/* === cards-3-index === */
.c3i{width:100%;position:relative;overflow:hidden;background:var(--ssla-bg-color, var(--shell-bg-dark, #1F2937))}
.c3i-inner{max-width:1000px;margin:0 auto;padding:var(--paint-section-padding,100px) 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.c3i-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
.c3i-eyebrow::before{content:"";width:28px;height:2px;background:var(--shell-accent,currentColor)}
.c3i-eyebrow span{font-size:11px;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,3px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--shell-accent,currentColor)}
.c3i h2{font-size:var(--paint-h2-size, 32px);font-weight:var(--paint-heading-weight,800);color:#fff;line-height:1.15;letter-spacing:var(--paint-heading-letter-spacing-h2,-1px);text-transform:var(--paint-heading-case-h2,none);margin:0 0 20px}
.c3i-desc{font-size:var(--paint-body-size, 15px);color:rgba(255,255,255,.55);line-height:var(--paint-body-line-height, 1.8);margin:0 0 28px}
.c3i-desc p{margin:0}
.c3i-cta{display:inline-block;background:var(--paint-button-primary-fill,var(--shell-accent,currentColor));color:var(--paint-button-primary-text,#fff)!important;padding:16px 38px;font-size:var(--paint-button-size, 13px);font-weight:800;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;border-radius:var(--paint-button-radius,0);transition:all var(--paint-motion-timing,.3s)}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .c3i-cta:hover{filter:brightness(.9);transform:translateY(var(--paint-hover-lift,-2px))}
 */
.c3i-cta:hover{/* paint retired; global rule provides lift */}
.c3i-cta:empty{display:none}
.c3i-cards{display:grid;gap:12px}
.c3i-card{display:flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:20px 24px;transition:all var(--paint-motion-timing,.3s)}
.c3i-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.c3i-dot{width:10px;height:10px;flex-shrink:0}
/* v3.12.18 — Card name is now an anchor (.c3i-card-link) instead of
 * <h4>. Per Glenn 2026-05-21 walk: "objects in the boxes need to be
 * linkable." Style mirrors the prior h4 visual (size, weight, color,
 * flex sizing, letter-spacing/case tokens) plus link-specific rules:
 * remove default underline; add subtle hover affordance.
 *
 * The legacy .c3i-card h4 rule is retained for back-compat with
 * pre-v3.12.18 saved pages that still emit <h4>. */
.c3i-card h4,
.c3i-card-link{font-size:14px;font-weight:var(--paint-heading-weight,700);color:#fff;margin:0;flex:1;letter-spacing:var(--paint-heading-letter-spacing-h4,normal);text-transform:var(--paint-heading-case-h4,none);text-decoration:none}
.c3i-card-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.c3i-price{font-size:13px;font-weight:600;color:var(--shell-accent,currentColor);white-space:nowrap}
@media(max-width:768px){.c3i-inner{grid-template-columns:1fr}}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark .c3i h2{color: #ffffff}
.ssla-tone-dark .c3i-desc{color: rgba(255, 255, 255, 0.55)}
.ssla-tone-dark .c3i-card h4,
.ssla-tone-dark .c3i-card-link{color: #ffffff}
.ssla-tone-light .c3i h2{color: var(--shell-h, #1a1d21)}
.ssla-tone-light .c3i-desc{color: var(--shell-t, #4a5568)}
.ssla-tone-light .c3i-card{background: #ffffff; border-color: rgba(0, 0, 0, 0.08)}
.ssla-tone-light .c3i-card h4,
.ssla-tone-light .c3i-card-link{color: var(--shell-h, #1a1d21)}