/* =====================================================================
   Affectli · concept v2 (round 9 test) — affectli/concept.html only
   Five Refero references, translated into Affectli's own palette and type:
   - Linear: precision dark surfaces in small steps, hairline edges instead of shadows,
     one accent colour for the one primary action, product UI as the only imagery.
   - Stripe: light-weight display type with tight tracking, quiet light sections,
     every filled button paired with an outline one.
   - Mapbox: the product as the light source of a dark control room; media that
     dissolves into the page instead of sitting on it; wide-tracked caps labels.
   - 1Password: a dark entrance that opens into bright, clear sections.
   - Increase: institutional calm; on light ground, cards float on soft navy-tinted
     shadows; mono for numbers and identifiers.
   Brand kept: Saira / Public Sans / IBM Plex Mono, the Affectli navy and its gradient
   (one phrase per page). Deliberate test: 4px buttons and 6px frames, softer than 2px.
   ===================================================================== */
body[data-concept] {
  --cx-void: #050817; --cx-carbon: #0A0F26; --cx-obsidian: #10173A; --cx-edge: rgba(170, 190, 255, 0.12); --cx-edge-hi: rgba(170, 190, 255, 0.22);
  --cx-paper: #F4F6FC; --cx-mist: #C9D0E6; --cx-fog: #8F98BA;
  --cx-canvas: #F4F6FB; --cx-frost: #DFE5F1; --cx-ink: #0A1033; --cx-slate: #4C5577; --cx-azure-ink: #1D6AE0;
  --cx-azure: #2F8BFF; --cx-iris: #8B6CFF; --cx-cyan: #2FC0FF;
  --cx-float: 0 6px 8px rgba(10, 16, 51, 0.03), 0 18px 24px rgba(10, 16, 51, 0.08);
  --cx-float-lg: 0 6px 8px rgba(10, 16, 51, 0.05), 0 16px 20px rgba(10, 16, 51, 0.06), 0 50px 60px rgba(10, 16, 51, 0.12);
  --cx-sec: clamp(5.5rem, 3.5rem + 6vw, 9rem);
  --radius: 4px;
  background: var(--cx-void);
}

/* ---------- Section grounds ---------- */
.cx-sec { position: relative; padding-block: var(--cx-sec); isolation: isolate; overflow: hidden; }
body[data-concept] .cx-dark { --bg: var(--cx-void); --surface: var(--cx-carbon); --line: var(--cx-edge); --line-strong: var(--cx-edge-hi); --muted: var(--cx-fog); background: var(--bg); }
body[data-concept] .cx-dark--iris::before { content: ""; position: absolute; z-index: -1; left: -18%; top: -30%; width: 70%; height: 120%; background: radial-gradient(closest-side, rgba(139, 108, 255, 0.16), transparent); pointer-events: none; }
body[data-concept] .cx-light { --bg: var(--cx-canvas); --fg: var(--cx-ink); --muted: var(--cx-slate); --line: var(--cx-frost); background: var(--bg); }
body[data-concept] .cx-white { --bg: #FFFFFF; --fg: var(--cx-ink); --muted: var(--cx-slate); --line: var(--cx-frost); background: var(--bg); }

/* ---------- Type ---------- */
.cx-display { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.9rem, 1.3rem + 6vw, 6.6rem); line-height: 0.98; letter-spacing: -0.035em; color: var(--fg); text-wrap: balance; margin: 0; }
.cx-display strong { font-weight: 500; }
.cx-h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.028em; color: var(--fg); text-wrap: balance; margin: 0; }
.cx-h2 strong { font-weight: 500; }
.cx-word { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.8rem, 1.4rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--fg); margin: 0; }
.cx-def { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); margin: 0; text-wrap: balance; }
.cx-def strong { font-weight: 500; }
.cx-statement { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.6rem); line-height: 1.12; letter-spacing: -0.024em; color: var(--fg); max-width: 32ch; margin: 0 auto; text-wrap: balance; }
.cx-statement strong { font-weight: 500; }
.cx-lede { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); line-height: 1.55; color: var(--muted); max-width: 42ch; margin: 0; text-wrap: pretty; }
.cx-lede strong, .cx-body strong { color: var(--fg); font-weight: 500; }
.cx-body { font-size: 1.0625rem; line-height: 1.68; color: var(--muted); max-width: 56ch; margin: 0; text-wrap: pretty; }
.cx-label { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.cx-label::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.7; }
.cx-light .cx-label, .cx-white .cx-label { color: var(--cx-azure-ink); }
.cx-label--signal { color: var(--signal) !important; }
.cx-label--signal::before { display: none; }
.cx-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0; }
.cx-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong, var(--line)); padding-bottom: 3px; justify-self: start; align-self: flex-start; transition: border-color .25s var(--ease), color .25s var(--ease); }
.cx-link .arr { color: var(--accent-text); transition: transform .35s var(--ease); }
.cx-light .cx-link .arr, .cx-white .cx-link .arr { color: var(--cx-azure-ink); }
.cx-link:hover { border-bottom-color: currentColor; }
.cx-link:hover .arr { transform: translateX(4px); }
.cx-link--light { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.3); }
.cx-inline { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }

/* ---------- Section heads: label above both columns, even split ---------- */
.cx-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.cx-head--center { justify-items: center; text-align: center; }
.cx-head--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(2.5rem, 1rem + 4vw, 6rem); align-items: end; }
.cx-head--split > div { display: grid; gap: 1.1rem; min-width: 0; }
.cx-head--split > div:last-child { gap: 1.25rem; }

/* ---------- Buttons: one filled accent, always paired with an outline ---------- */
body[data-concept] .btn { border-radius: 4px; letter-spacing: 0; }
body[data-concept] .btn--primary { background: var(--cx-azure); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(5, 8, 23, 0.35), 0 8px 24px -10px rgba(47, 139, 255, 0.55); }
body[data-concept] .btn--primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 34px -12px rgba(47, 139, 255, 0.75); }
body[data-concept] .cx-dark .btn--ghost, body[data-concept] .cx-hero .btn--ghost { color: var(--cx-paper); border-color: var(--cx-edge-hi); background: rgba(255, 255, 255, 0.02); }
body[data-concept] .cx-dark .btn--ghost:hover, body[data-concept] .cx-hero .btn--ghost:hover { border-color: rgba(200, 215, 255, 0.5); background: rgba(255, 255, 255, 0.05); }
.cx-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ---------- Header: transparent over the entrance, frosted once you scroll ---------- */
body[data-concept] .site-header.is-solid, body[data-concept] .site-header.is-open { background: rgba(5, 8, 23, 0.72); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-bottom-color: var(--cx-edge); }

/* =====================================================================
   HERO
   ===================================================================== */
body[data-concept] .cx-hero { background: var(--cx-void); padding-top: calc(var(--header-h) + clamp(3.25rem, 1.5rem + 6vw, 7rem)); padding-bottom: 0; }
.cx-hero__inner { justify-items: center; text-align: center; gap: 1.6rem; }
.cx-chip { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.95rem 0.45rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--cx-edge); font-size: 0.8125rem; font-weight: 500; color: var(--cx-mist); line-height: 1.3; text-align: center; }
.cx-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-azure); box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.18); flex: none; }
/* The light source: a soft aurora below the product, nothing else glows */
.cx-aurora { position: absolute; left: 50%; bottom: -6%; width: min(1500px, 130vw); height: 72%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(46% 55% at 50% 72%, rgba(47, 139, 255, 0.38), transparent 70%), radial-gradient(30% 40% at 30% 78%, rgba(139, 108, 255, 0.30), transparent 70%), radial-gradient(30% 40% at 72% 74%, rgba(47, 192, 255, 0.24), transparent 70%); }
.cx-gridfade { position: absolute; inset: 0; pointer-events: none; opacity: 0.85; /* round 32: brighter (was 0.55, lines 0.05) */
  background-image: linear-gradient(rgba(170, 200, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 200, 255, 0.07) 1px, transparent 1px); background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 20%, transparent 75%); }
body[data-concept] .dp-horizon { opacity: 0 !important; }
/* The product frame: hairline edge, glow from below, lower edge dissolving into the page */
body[data-concept] .cx-screen { border-radius: 6px; border: 1px solid var(--cx-edge-hi); background: var(--cx-carbon); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 50px 140px -40px rgba(47, 139, 255, 0.45), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
body[data-concept] .cx-screen .ui { border: 0; border-radius: 5px; }
body[data-concept] .cx-screen::before { display: none; }
body[data-concept] .cx-screen::after { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; border: 0; border-radius: 6px; z-index: 4;
  background: linear-gradient(180deg, transparent 72%, rgba(5, 8, 23, 0.92) 100%), radial-gradient(600px 300px at var(--gx, 50%) var(--gy, 0%), rgba(170, 200, 255, 0.07), transparent 70%); }
body[data-concept] .dp-card { border-radius: 6px; background: rgba(10, 15, 38, 0.8); border-color: var(--cx-edge-hi); }
body[data-concept] .cx-hero .mock-note { position: relative; z-index: 4; margin-top: -0.5rem; }
/* Trust rail: the credentials and the scale, quietly, under the product */
.cx-rail { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-block: 2rem clamp(2.5rem, 1.5rem + 3vw, 4rem); border-top: 1px solid var(--cx-edge); }
.cx-rail__k { display: grid; gap: 0.5rem; }
.cx-rail__k p { margin: 0; color: var(--cx-fog); font-size: 0.875rem; line-height: 1.5; max-width: 30ch; }
.cx-rail__seals { filter: grayscale(1); opacity: 0.8; justify-self: center; }
.cx-rail__seals .certs__caption { color: var(--cx-fog); }
.cx-rail__stats { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: flex-end; text-align: left; }
.cx-rail__stats > div { display: grid; }
.cx-rail__stats b { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--cx-paper); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cx-rail__stats span { font-size: 0.8125rem; color: var(--cx-fog); }
.cx-rail__stats small { flex-basis: 100%; text-align: right; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(143, 152, 186, 0.75); }

/* =====================================================================
   IN SHORT: three pillar cards floating on the light canvas
   ===================================================================== */
.cx-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cx-pillars > li { min-width: 0; }
.cx-pillar { --cx-dot: #fff; height: 100%; display: grid; gap: 0.7rem; align-content: start; padding: 1.6rem 1.6rem 1.5rem; background: #fff; border: 1px solid var(--cx-frost); border-radius: 6px; box-shadow: var(--cx-float); color: var(--cx-ink); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.cx-pillar:hover { transform: translateY(-4px); box-shadow: var(--cx-float-lg); border-color: #C6D2E8; }
.cx-pillar__art { display: block; width: 120px; height: 56px; color: var(--cx-azure); margin-bottom: 0.6rem; }
.cx-pillar__art svg { width: 100%; height: 100%; display: block; }
.cx-pillar__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-slate); }
.cx-pillar__w { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; }
.cx-pillar__d { color: var(--cx-slate); line-height: 1.55; }
.cx-pillar__go { margin-top: 0.4rem; font-weight: 500; color: var(--cx-azure-ink); display: inline-flex; gap: 0.45rem; }
.cx-pillar__go .arr { transition: transform .35s var(--ease); }
.cx-pillar:hover .cx-pillar__go .arr { transform: translateX(4px); }
.cx-audience { margin: clamp(2.5rem, 1.5rem + 2vw, 3.5rem) auto 0; max-width: 62ch; text-align: center; color: var(--cx-slate); font-size: 1.0625rem; line-height: 1.65; }
.cx-audience strong { color: var(--cx-ink); font-weight: 600; }

/* =====================================================================
   DATA SOVEREIGNTY: the word, a ledger, two cards at two depths
   ===================================================================== */
.cx-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 1rem + 5vw, 6.5rem); align-items: center; }
.cx-split--top { align-items: start; }
.cx-split > * { min-width: 0; }
.cx-split__text { display: grid; gap: 1.5rem; align-content: start; }
.cx-ledger { margin: 0.5rem 0 0; display: grid; border-top: 1px solid var(--line); }
.cx-ledger > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.cx-ledger dt { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 0.25em; }
.cx-ledger dd { margin: 0; color: var(--fg); font-size: 1.02rem; line-height: 1.45; }
.cx-stack { position: relative; margin: 0; padding: 0 0 17.5rem; }
body[data-concept] .cx-stack__back { width: 92%; border-radius: 6px; border: 1px solid var(--cx-edge-hi); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); }
.cx-stack__front { position: absolute; right: 0; bottom: 0; width: min(330px, 58%); display: grid; gap: 0.5rem; padding: 1.25rem 1.3rem 1.1rem; background: #fff; color: var(--cx-ink); border-radius: 6px; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 12px 24px -12px rgba(10, 16, 51, 0.3); }
.cx-mini-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-azure-ink); }
.cx-dark .cx-mini-k { color: #6FB6FF; }
.cx-stack__front .cx-mini-k { color: var(--cx-azure-ink); }
.cx-mini-t { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
.cx-choice { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.cx-choice li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.7rem; align-items: center; padding: 0.6rem 0.75rem; border: 1px solid var(--cx-frost); border-radius: 4px; }
.cx-choice b { display: block; font-weight: 600; font-size: 0.9rem; }
.cx-choice small { display: block; color: var(--cx-slate); font-size: 0.8rem; }
.cx-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #B8C3D9; }
.cx-choice li.is-on { border-color: var(--cx-azure); background: rgba(47, 139, 255, 0.06); }
.cx-choice li.is-on .cx-radio { border: 5px solid var(--cx-azure); }
.cx-stack .cx-note { position: absolute; left: 0; bottom: 0; max-width: 36%; line-height: 1.5; }
.cx-onday { margin: clamp(2.5rem, 1.5rem + 2vw, 3.5rem) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); color: var(--fg); }
.cx-onday span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6FB6FF; }

/* =====================================================================
   ONTOLOGY + DATA FABRIC
   ===================================================================== */
.cx-console { background: #fff; border: 1px solid var(--cx-frost); border-radius: 6px; box-shadow: var(--cx-float-lg); overflow: hidden; }
.cx-checks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.cx-checks li { position: relative; padding: 0.8rem 0 0.8rem 1.9rem; border-bottom: 1px solid var(--line); color: var(--fg); line-height: 1.5; }
.cx-checks li::before { content: ""; position: absolute; left: 0.15rem; top: 1.05rem; width: 0.85rem; height: 0.45rem; border-left: 1.5px solid var(--accent-text); border-bottom: 1.5px solid var(--accent-text); transform: rotate(-45deg); }
.cx-checks--sm { border-top: 0; }
.cx-checks--sm li { padding-block: 0.55rem; font-size: 0.9rem; color: var(--muted); }
.cx-checks--sm li::before { top: 0.8rem; }
body[data-concept] .cx-panel { --bg: var(--cx-carbon); --surface: var(--cx-carbon); padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); background: var(--cx-carbon); border: 1px solid var(--cx-edge); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 50px 120px -50px rgba(47, 139, 255, 0.5); }

/* =====================================================================
   MODULES
   ===================================================================== */
.cx-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cx-mod { display: grid; gap: 0.55rem; align-content: start; padding: 1.4rem 1.4rem 1.5rem; background: #fff; border: 1px solid var(--cx-frost); border-radius: 6px; color: var(--cx-ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); min-width: 0; }
.cx-mod:hover { transform: translateY(-3px); box-shadow: var(--cx-float); border-color: #C9D4E9; }
.cx-mod__i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: rgba(47, 139, 255, 0.08); color: var(--cx-azure-ink); margin-bottom: 0.4rem; transition: background-color .35s var(--ease), color .35s var(--ease); }
.cx-mod:hover .cx-mod__i { background: var(--cx-azure); color: #fff; }
.cx-mod__i svg { width: 22px; height: 22px; }
.cx-mod__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-slate); }
.cx-mod__t { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.cx-mod p { margin: 0; color: var(--cx-slate); font-size: 0.92rem; line-height: 1.55; }
.cx-mod--more { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; align-content: space-between; }
.cx-mod--more .cx-mod__k { color: #9DB3FF; }
.cx-mod--more .cx-mod__t { font-weight: 300; font-size: 1.6rem; }
.cx-mod--more:hover { box-shadow: 0 20px 40px -20px rgba(10, 16, 51, 0.6); }

/* =====================================================================
   PROOF
   ===================================================================== */
.cx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cx-stat { display: grid; gap: 0.6rem; padding: 1.75rem 1.5rem 0 0; min-width: 0; }
.cx-stat + .cx-stat { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.cx-stat b { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); line-height: 1; letter-spacing: -0.035em; color: var(--cx-paper); font-variant-numeric: tabular-nums; }
.cx-stat span { color: var(--muted); max-width: 30ch; line-height: 1.5; }
.cx-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.cx-case { display: grid; grid-template-rows: auto 1fr; background: var(--cx-carbon); border: 1px solid var(--cx-edge); border-radius: 6px; overflow: hidden; min-width: 0; transition: border-color .35s var(--ease), transform .35s var(--ease); }
.cx-case:hover { border-color: var(--cx-edge-hi); transform: translateY(-3px); }
.cx-case__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cx-case__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.85); transition: transform 1.2s var(--ease); }
.cx-case:hover .cx-case__media img { transform: scale(1.04); }
.cx-case__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -110px 80px -40px var(--cx-carbon); pointer-events: none; }
.cx-case__body { position: relative; display: grid; gap: 0.7rem; align-content: start; padding: 0 1.5rem 1.5rem; margin-top: -1.25rem; }
.cx-case__t { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--cx-paper); margin: 0; }
.cx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* =====================================================================
   FOUNDER, PARTNERS, MI-C3
   ===================================================================== */
.cx-quote { margin: 0 auto clamp(3rem, 2rem + 3vw, 5rem); max-width: 46rem; display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.cx-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--cx-ink); text-wrap: balance; }
.cx-quote blockquote::before { content: "“"; color: var(--cx-azure-ink); }
.cx-quote blockquote::after { content: "”"; color: var(--cx-azure-ink); }
.cx-quote figcaption { color: var(--cx-slate); font-size: 0.9rem; }
.cx-quote figcaption b { color: var(--cx-ink); margin-right: 0.4rem; }
.cx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.cx-tile { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); background: #fff; border: 1px solid var(--cx-frost); border-radius: 6px; box-shadow: var(--cx-float); color: var(--cx-ink); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); min-width: 0; }
.cx-tile:hover { transform: translateY(-3px); box-shadow: var(--cx-float-lg); }
.cx-tile p { margin: 0; color: var(--cx-slate); line-height: 1.6; }
.cx-tile__t { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.cx-tile__t strong { font-weight: 500; }
.cx-tile--ink { background: #0C0F14; border-color: #0C0F14; color: #EEF0EE; }
.cx-tile--ink p { color: #A3ABB6; }

/* =====================================================================
   NEXT STEP
   ===================================================================== */
.cx-cta { text-align: center; }
.cx-cta .cx-aurora--cta { bottom: -40%; height: 110%; opacity: 0.9; }
.cx-cta .cx-gridfade { -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 60%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 55% 60% at 50% 60%, #000 15%, transparent 75%); }
.cx-cta__inner { position: relative; display: grid; justify-items: center; gap: 1.6rem; }
.cx-display--cta { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.2rem); max-width: 16ch; }
.cx-cta .cx-lede { max-width: 50ch; }

/* =====================================================================
   Narrower screens
   ===================================================================== */
@media (max-width: 1080px) {
  .cx-split, .cx-head--split { grid-template-columns: minmax(0, 1fr); }
  .cx-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-rail { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .cx-rail__seals { justify-self: start; }
  .cx-rail__stats { justify-content: flex-start; }
  .cx-rail__stats small { text-align: left; }
}
@media (max-width: 900px) {
  .cx-pillars, .cx-cases, .cx-duo { grid-template-columns: minmax(0, 1fr); }
  .cx-stack { padding-bottom: 0; display: grid; gap: 1rem; }
  .cx-stack__front { position: relative; right: auto; width: auto; }
  body[data-concept] .cx-stack__back { width: auto; }
  .cx-stack .cx-note { position: static; max-width: none; }
}
@media (max-width: 640px) {
  .cx-stats { grid-template-columns: minmax(0, 1fr); }
  .cx-stat + .cx-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 1.5rem; }
  .cx-modules { grid-template-columns: minmax(0, 1fr); }
  .cx-ledger > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .cx-ctas .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-pillar, .cx-mod, .cx-case, .cx-tile, .cx-case__media img { transition: none; }
}

/* =====================================================================
   v3 (round 10): explainer, pinned story, bento, roles, cursor glow
   ===================================================================== */
/* Cursor glow: the edge of a card lights where the pointer is (fine pointers only, set by concept.js) */
.cx-glow { --mx: -300px; --my: -300px; position: relative; }
.cx-glow::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(111, 182, 255, 0.75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s var(--ease); }
.cx-glow:hover::before { opacity: 1; }
.cx-dark .cx-glow:hover { background-image: radial-gradient(380px circle at var(--mx) var(--my), rgba(111, 182, 255, 0.06), transparent 65%); }

/* Hero: the second action plays the explainer */
body[data-concept] .cx-btn-play { gap: 0.7rem; }
.cx-play-ic { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.9; }
.cx-play-ic::after { content: ""; position: absolute; left: 8px; top: 5.5px; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* Explainer: a cinema screen between the statement and the three ideas */
.cx-video { display: block; max-width: 1040px; aspect-ratio: 16 / 9; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto; border-radius: 6px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--cx-void); box-shadow: var(--cx-float-lg), 0 50px 100px -50px rgba(47, 139, 255, 0.45); }
.cx-video__poster { position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 100%, rgba(47, 139, 255, 0.28), transparent 70%), radial-gradient(40% 60% at 15% 90%, rgba(139, 108, 255, 0.22), transparent 70%), var(--cx-void); }
.cx-video__map { position: absolute; inset: -3%; opacity: 0.55; transition: transform 1.4s var(--ease), opacity .6s var(--ease); }
.cx-video:hover .cx-video__map { transform: scale(1.04); opacity: 0.72; }
.cx-video__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 23, 0.1) 30%, rgba(5, 8, 23, 0.82) 92%), radial-gradient(55% 55% at 50% 45%, transparent, rgba(5, 8, 23, 0.55)); }
.cx-video__play { position: absolute; left: 50%; top: 45%; z-index: 2; width: clamp(64px, 3rem + 4vw, 96px); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .45s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .45s var(--ease); }
.cx-video__play svg { width: 38%; height: 38%; margin-left: 7%; color: #fff; }
.cx-video:hover .cx-video__play, .cx-video:focus-visible .cx-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--cx-azure); border-color: var(--cx-azure); box-shadow: 0 18px 50px -12px rgba(47, 139, 255, 0.8); }
.cx-video__meta { position: absolute; z-index: 2; left: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); right: 1.5rem; bottom: clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem; }
.cx-video__meta .cx-mini-k { color: #8FC4FF; }
.cx-video__meta b { flex-basis: 100%; order: -1; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
.cx-video__yt { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
.cx-video.is-playing { cursor: default; }
.cx-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* How it works: steps scroll on the left, the stage stays pinned on the right */
.cx-story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.cx-story__steps { list-style: none; margin: 0; padding: 0; }
.cx-step { min-height: min(76vh, 700px); display: grid; align-content: center; gap: 1.2rem; padding-block: 2rem; opacity: 0.3; transition: opacity .6s var(--ease); }
.cx-step.is-on { opacity: 1; }
.cx-step__n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cx-azure-ink); }
.cx-step__t { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1.06; letter-spacing: -0.028em; color: var(--cx-ink); text-wrap: balance; }
.cx-step__t strong { font-weight: 500; }
.cx-story__stage { position: sticky; top: calc(var(--header-h) + 6vh); height: min(78vh, 660px); }
.cx-story__view { position: absolute; inset: 0; display: grid; align-items: center; justify-items: center; opacity: 0; visibility: hidden; transform: translateY(28px) scale(0.985); transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s linear .7s; }
.cx-story__view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s; }
.cx-panel--story { width: 100%; }
.cx-story__view[data-view="0"] .cx-panel--story { width: min(100%, calc(min(78vh, 660px) - 0.5rem)); }
.cx-story__dots { position: absolute; left: calc(-1 * clamp(1.25rem, 0.5rem + 2.5vw, 3rem)); top: 50%; display: grid; gap: 8px; transform: translateY(-50%); }
.cx-story__dots i { display: block; width: 4px; height: 4px; border-radius: 4px; background: #B7C3DB; transition: height .4s var(--ease), background-color .4s var(--ease); }
.cx-story__dots i.is-on { height: 22px; background: var(--cx-azure); }
.cx-story__note { margin-top: 2rem; }
/* 02 · the ontology draws itself the first time it is shown */
.cx-ograph { display: block; width: 100%; height: auto; }
.cx-ograph__l { fill: none; stroke: rgba(111, 182, 255, 0.55); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); transition-delay: calc(var(--i) * 120ms + 250ms); }
.was-on .cx-ograph__l { stroke-dashoffset: 0; }
.cx-ograph__ll { font-family: var(--font-mono); font-size: 11px; fill: rgba(170, 190, 255, 0.6); letter-spacing: 0.04em; opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--i) * 120ms + 800ms); }
.was-on .cx-ograph__ll { opacity: 1; }
.cx-ograph__hub rect { fill: #0E1534; stroke: rgba(47, 139, 255, 0.75); stroke-width: 1.2; }
.cx-ograph__hub .t1 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; fill: #6FB6FF; }
.cx-ograph__hub .t2 { font-family: var(--font-display); font-size: 20px; fill: #F4F6FC; }
.cx-ograph__hub .t3 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; fill: rgba(170, 190, 255, 0.6); }
.cx-ograph__hub .t4 { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; fill: #F4F6FC; }
.cx-ograph__n { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--i) * 120ms + 550ms); }
.was-on .cx-ograph__n { opacity: 1; }
.cx-ograph__n circle { fill: #050817; stroke: #2F8BFF; stroke-width: 1.6; }
.cx-ograph__n .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; fill: rgba(170, 190, 255, 0.62); }
.cx-ograph__n .v { font-family: var(--font-body); font-size: 14px; font-weight: 500; fill: #F4F6FC; }
/* 03 · one incident, every step raised and recorded */
body[data-concept] .cx-panel--act { padding: 0; overflow: hidden; }
body[data-concept] .cx-act { width: 100%; border: 0; border-radius: 6px; }
.cx-act__list { list-style: none; margin: 0; padding: 0.6rem 1.25rem 0.9rem; display: grid; }
.cx-act__list li { position: relative; display: grid; grid-template-columns: 4.8rem 12px minmax(0, 1fr); gap: 0.85rem; align-items: start; padding: 0.75rem 0; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 260ms + 300ms); }
.was-on .cx-act__list li { opacity: 1; transform: none; }
.cx-act__list li:not(:last-child)::after { content: ""; position: absolute; left: calc(4.8rem + 0.85rem + 5.5px); top: 1.6rem; bottom: -0.4rem; width: 1px; background: rgba(170, 190, 255, 0.2); }
.cx-act__t { font-family: var(--font-mono); font-size: 11.5px; color: var(--ui-muted); padding-top: 0.15rem; font-variant-numeric: tabular-nums; }
.cx-act__dot { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 0.3rem; border-radius: 50%; border: 1.5px solid #2F8BFF; background: #050817; }
.cx-act__list li:first-child .cx-act__dot { border-color: var(--crit); }
.cx-act__list li:last-child .cx-act__dot { background: #2F8BFF; }
.cx-act__b b { display: block; color: var(--ui-fg); font-weight: 500; font-size: 0.95rem; }
.cx-act__b small { color: var(--ui-muted); font-size: 0.8rem; }
.cx-act__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--ui-line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); }

/* Policy: see the table through one role at a time */
.cx-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--ui-line); }
.cx-roles__k { margin-right: 0.35rem; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-muted); }
.cx-roles button { font: 500 12px/1 var(--font-body); color: var(--ui-muted); background: transparent; border: 1px solid var(--ui-line); border-radius: 999px; padding: 0.42rem 0.75rem; cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.cx-roles button:hover { color: var(--ui-fg); border-color: rgba(170, 190, 255, 0.3); }
.cx-roles button[aria-pressed="true"] { color: #fff; background: rgba(47, 139, 255, 0.2); border-color: rgba(47, 139, 255, 0.65); }
.cx-policy td, .cx-policy th { transition: background-color .35s var(--ease); }
.cx-policy td .pill { transition: opacity .35s var(--ease); }
.cx-policy[data-role="1"] :is(td, th):nth-child(2), .cx-policy[data-role="2"] :is(td, th):nth-child(3), .cx-policy[data-role="3"] :is(td, th):nth-child(4) { background: rgba(47, 139, 255, 0.1); }
.cx-policy[data-role="1"] td:is(:nth-child(3), :nth-child(4)) .pill, .cx-policy[data-role="2"] td:is(:nth-child(2), :nth-child(4)) .pill, .cx-policy[data-role="3"] td:is(:nth-child(2), :nth-child(3)) .pill { opacity: 0.32; }

/* Modules: a bento of the stack, two tiles live */
.cx-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cx-tile-l { display: grid; gap: 0.6rem; align-content: start; min-width: 0; padding: 1.5rem; background: var(--cx-carbon); border: 1px solid var(--cx-edge); border-radius: 6px; overflow: hidden; transition: border-color .35s var(--ease); }
.cx-tile-l:hover, .cx-tile-s:hover { border-color: var(--cx-edge-hi); }
.cx-tile-l__text { display: grid; gap: 0.6rem; }
.cx-tile-l__t { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.2; color: var(--cx-paper); }
.cx-tile-l p, .cx-tile-s p { margin: 0; color: var(--cx-fog); font-size: 0.92rem; line-height: 1.55; }
.cx-dark .cx-mod__k { color: #8FA3D6; }
.cx-tile-l--map { grid-column: span 2; grid-row: span 2; grid-template-rows: auto minmax(260px, 1fr); }
.cx-tile-l__map { position: relative; margin: 0.6rem -1.5rem -1.5rem; border-top: 1px solid var(--cx-edge); background-image: linear-gradient(rgba(170, 190, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 190, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; }
.cx-tile-l--feed { grid-column: span 2; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
body[data-concept] .cx-tile-l__ui { padding: 0.7rem; border-radius: 4px; }
.cx-tile-l__ui .ui__feed { gap: 0.55rem; }
.cx-bpmn { width: 100%; height: auto; margin-top: 0.9rem; color: #6FB6FF; }
.cx-spark { margin-top: 0.9rem; }
.cx-tile-s { display: grid; gap: 0.5rem; align-content: start; min-width: 0; padding: 1.35rem; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--cx-edge); border-radius: 6px; color: var(--cx-paper); text-decoration: none; transition: border-color .35s var(--ease); }
.cx-tile-s .cx-mod__i { background: rgba(47, 139, 255, 0.12); color: #6FB6FF; margin-bottom: 0.3rem; }
.cx-tile-s:hover .cx-mod__i { background: var(--cx-azure); color: #fff; }
.cx-tile-s .cx-mod__t { color: var(--cx-paper); }
.cx-tile-s--more { align-content: space-between; background: linear-gradient(135deg, rgba(139, 108, 255, 0.2), rgba(47, 192, 255, 0.12)); border-color: rgba(111, 182, 255, 0.35); }
.cx-tile-s--more .cx-mod__t { font-weight: 300; font-size: 1.55rem; }

/* Proof on light ground */
.cx-light .cx-stat b { color: var(--cx-ink); }
.cx-light .cx-case { background: #fff; border-color: var(--cx-frost); box-shadow: var(--cx-float); }
.cx-light .cx-case:hover { border-color: #C6D2E8; }
.cx-light .cx-case__media::after { box-shadow: inset 0 -110px 80px -40px #fff; }
.cx-light .cx-case__media img { filter: saturate(0.9); }
.cx-light .cx-case__t { color: var(--cx-ink); }
.cx-light .cx-checks li::before { border-color: var(--cx-azure-ink); }
.cx-cases + .cx-foot + .cx-quote { margin-top: clamp(4rem, 3rem + 3vw, 6rem); }

@media (max-width: 1080px) {
  .cx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-tile-l--map { grid-row: auto; }
  .cx-tile-l--feed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cx-story__grid { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .cx-story__steps, .cx-story__stage { display: contents; }
  .cx-step { min-height: 0; opacity: 1; padding-block: 1.5rem 0; }
  .cx-step:nth-child(1) { order: 1; } .cx-story__view[data-view="0"] { order: 2; }
  .cx-step:nth-child(2) { order: 3; } .cx-story__view[data-view="1"] { order: 4; }
  .cx-step:nth-child(3) { order: 5; } .cx-story__view[data-view="2"] { order: 6; }
  .cx-story__view { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }
  .cx-story__view[data-view="0"] .cx-panel--story { width: 100%; }
  .cx-story__dots { display: none; }
}
@media (max-width: 640px) {
  .cx-bento { grid-template-columns: minmax(0, 1fr); }
  .cx-tile-l--map, .cx-tile-l--feed { grid-column: auto; }
  .cx-video__meta .cx-mini-k { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-ograph__l { stroke-dashoffset: 0; transition: none; }
  .cx-ograph__ll, .cx-ograph__n, .cx-act__list li { opacity: 1; transform: none; transition: none; }
  .cx-story__view { transition: none; }
}
/* Sticky positioning needs an ancestor that does not clip: the story section lets its overflow show */
.cx-sec.cx-story { overflow: visible; }
/* The explainer poster: brighter map, a warmer light below, the three ideas aligned to the screen's width */
.cx-video__map { opacity: 0.85; }
.cx-video:hover .cx-video__map { opacity: 1; }
.cx-video__shade { background: linear-gradient(180deg, rgba(5, 8, 23, 0) 35%, rgba(5, 8, 23, 0.78) 94%), radial-gradient(60% 60% at 50% 42%, transparent 40%, rgba(5, 8, 23, 0.45)); }
.cx-video__poster { background: radial-gradient(70% 85% at 50% 105%, rgba(47, 139, 255, 0.42), transparent 70%), radial-gradient(45% 65% at 12% 95%, rgba(139, 108, 255, 0.32), transparent 70%), radial-gradient(40% 60% at 90% 90%, rgba(47, 192, 255, 0.22), transparent 70%), var(--cx-void); }
#in-short .cx-pillars, #in-short .cx-video { max-width: 1040px; margin-inline: auto; }

/* =====================================================================
   Explainer player (round 11): plays inside the page with Affectli's own controls
   ===================================================================== */
.cx-player { max-width: 1040px; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto; border-radius: 6px; overflow: hidden; isolation: isolate; background: var(--cx-carbon); box-shadow: var(--cx-float-lg), 0 50px 100px -50px rgba(47, 139, 255, 0.45); }
.cx-player__screen { position: relative; aspect-ratio: 16 / 9; background: #02040C; overflow: hidden; }
.cx-player__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-align: left; }
.cx-player__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.cx-player__poster:hover img, .cx-player__poster:focus-visible img { transform: scale(1.03); }
.cx-player__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 8, 23, 0.85) 0%, rgba(5, 8, 23, 0.2) 38%, transparent 60%); }
.cx-player__play { position: absolute; left: 50%; top: 46%; z-index: 2; width: clamp(64px, 3rem + 4vw, 96px); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .45s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .45s var(--ease); }
.cx-player__play svg { width: 38%; height: 38%; margin-left: 7%; }
.cx-player__poster:hover .cx-player__play, .cx-player__poster:focus-visible .cx-player__play { transform: translate(-50%, -50%) scale(1.08); background: var(--cx-azure); border-color: var(--cx-azure); box-shadow: 0 18px 50px -12px rgba(47, 139, 255, 0.85); }
.cx-player__poster:focus-visible { outline: 2px solid var(--cx-azure); outline-offset: -4px; }
.cx-player__meta { position: absolute; z-index: 2; left: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); bottom: clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem); display: grid; gap: 0.4rem; }
.cx-player__meta .cx-mini-k { color: #8FC4FF; }
.cx-player__meta b { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
.cx-player__media { position: absolute; inset: 0; background: #000; }
.cx-player__media iframe, .cx-player__media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.cx-player__media.is-done { visibility: hidden; }
.cx-player__note, .cx-player__end { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; color: #fff;
  background: radial-gradient(60% 70% at 50% 110%, rgba(47, 139, 255, 0.35), transparent 70%), rgba(5, 8, 23, 0.94); }
.cx-player__note[hidden], .cx-player__end[hidden], .cx-player__media[hidden] { display: none; }
.cx-player__note .cx-mini-k, .cx-player__end .cx-mini-k { color: #8FC4FF; }
.cx-player__note-t { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.cx-player__note-d { margin: 0; max-width: 52ch; color: var(--cx-mist); line-height: 1.6; }
body[data-concept] .cx-btn-icon { gap: 0.55rem; }
.cx-btn-icon svg { width: 18px; height: 18px; }
/* The control bar: always present, so the frame reads as a player before it plays */
.cx-player__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; background: var(--cx-carbon); border-top: 1px solid var(--cx-edge); color: var(--cx-mist); }
.cx-pbtn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.cx-pbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: #fff; }
.cx-pbtn:disabled { opacity: 0.35; cursor: default; }
.cx-pbtn:focus-visible { outline: 2px solid var(--cx-azure); outline-offset: 1px; }
.cx-pbtn svg { width: 20px; height: 20px; }
.cx-pbtn .cx-ic-pause { display: none; }
.cx-player.is-playing .cx-pbtn .cx-ic-pause { display: block; }
.cx-player.is-playing .cx-pbtn .cx-ic-play { display: none; }
.cx-pbtn .cx-ic-x { display: none; }
.cx-pbtn[aria-pressed="true"] .cx-ic-x { display: block; }
.cx-pbtn[aria-pressed="true"] .cx-ic-wave { display: none; }
.cx-player__title { flex: none; font-size: 0.85rem; font-weight: 500; color: var(--cx-paper); white-space: nowrap; }
.cx-player__seek { flex: 1 1 auto; min-width: 60px; height: 18px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.cx-player__seek:disabled { cursor: default; opacity: 0.5; }
.cx-player__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--cx-azure) var(--p), rgba(170, 190, 255, 0.2) var(--p)); }
.cx-player__seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(170, 190, 255, 0.2); }
.cx-player__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--cx-azure); }
.cx-player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.35); }
.cx-player__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.cx-player__time { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--cx-fog); font-variant-numeric: tabular-nums; }
.cx-player__sep { margin: 0 0.35rem; opacity: 0.6; }
.cx-player:fullscreen { max-width: none; margin: 0; border-radius: 0; display: flex; flex-direction: column; background: #000; }
.cx-player:fullscreen .cx-player__screen { flex: 1; aspect-ratio: auto; }
#in-short .cx-player { max-width: 1040px; margin-inline: auto; }
@media (max-width: 640px) {
  .cx-player__title, .cx-player__sep, [data-dur] { display: none; }
  .cx-player__note-d { display: none; }
}
.cx-player__poster[hidden] { display: none; }
body[data-concept] .cx-player__end .btn--ghost, body[data-concept] .cx-player__note .btn--ghost { color: #fff; border-color: rgba(200, 215, 255, 0.35); background: rgba(255, 255, 255, 0.03); }
body[data-concept] .cx-player__end .btn--ghost:hover, body[data-concept] .cx-player__note .btn--ghost:hover { border-color: rgba(200, 215, 255, 0.6); background: rgba(255, 255, 255, 0.07); }

/* =====================================================================
   Round 14: pillar artwork, pinned story, mobile polish
   ===================================================================== */
/* Pillar cards open with a small dark product panel */
.cx-pillar { padding: 0 0 1.5rem; overflow: hidden; gap: 0.7rem; }
.cx-pillar > :not(.cx-pillar__art) { margin-inline: 1.6rem; }
.cx-pillar__art { width: 100%; height: auto; margin: 0 0 0.75rem; aspect-ratio: 340 / 170; color: inherit; border-bottom: 1px solid var(--cx-frost); }
.cx-art { display: block; width: 100%; height: 100%; }
.cx-art .m { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; fill: rgba(200, 215, 255, 0.72); }
.cx-art .m--hi { fill: #8FC4FF; }
.cx-art .m--lo { font-size: 8px; fill: rgba(220, 230, 255, 0.85); }
.cx-art .m--on { fill: rgba(255, 255, 255, 0.82); font-size: 8px; }
.cx-art .m--st { font-size: 7.5px; }
.cx-art .s { font-family: var(--font-body); font-weight: 600; font-size: 12px; fill: #fff; }
.cx-art .r { font-family: var(--font-body); font-weight: 500; font-size: 10.5px; fill: #EEF1FA; }
.cx-art__node circle { fill: #070B24; stroke: #6FB6FF; stroke-width: 1.6; }
.cx-pillar .cx-art { transition: transform 1.2s var(--ease); transform-origin: 50% 60%; }
.cx-pillar:hover .cx-art { transform: scale(1.04); }
/* How it works, pinned (desktop): the section holds while each step stays fully readable, then the next
   step slides in. A step tab shows where you are and how far through the step the scroll has come. */
.cx-story__tabs { display: none; }
@media (min-width: 901px) {
  .cx-story__pin { position: relative; height: calc(100vh + 2 * 90vh); }
  .cx-story__grid { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); align-items: center; }
  .cx-story__copy { display: grid; gap: 2.5rem; align-content: center; }
  .cx-story__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .cx-story__tab { display: grid; gap: 0.5rem; justify-items: start; padding: 0 0 0.85rem; border: 0; background: none; text-align: left; cursor: pointer; font: 500 0.95rem/1.2 var(--font-body); color: var(--cx-slate); position: relative; transition: color .3s var(--ease); --fill: 0; }
  .cx-story__tab span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #8D97B5; transition: color .3s var(--ease); }
  .cx-story__tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #D6DEEC; overflow: hidden; }
  .cx-story__tab i::after { content: ""; position: absolute; inset: 0; background: var(--cx-azure); transform-origin: 0 50%; transform: scaleX(var(--fill)); }
  .cx-story__tab.is-on { color: var(--cx-ink); }
  .cx-story__tab.is-on span { color: var(--cx-azure-ink); }
  .cx-story__tab:hover { color: var(--cx-ink); }
  .cx-story__steps { display: grid; }
  .cx-step { grid-area: 1 / 1; min-height: 0; padding-block: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s linear .45s; }
  .cx-step.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .12s, transform .6s var(--ease) .12s, visibility 0s; }
  .cx-story__stage { position: relative; top: auto; height: min(74vh, 640px); }
}
@media (max-width: 900px) {
  .cx-story__copy { display: contents; }
}
/* Hero label: one line on desktop; on phones the pill holds the description and "Built by Mi-C3" sits beneath */
.cx-chip__sep { opacity: 0.6; }
@media (max-width: 600px) {
  .cx-chip { flex-direction: column; gap: 0.75rem; padding: 0; border: 0; background: none; }
  .cx-chip__dot, .cx-chip__sep { display: none; }
  .cx-chip__a { padding: 0.45rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cx-edge); font-size: 0.78rem; text-wrap: balance; }
  .cx-chip__b { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #8FC4FF; }
}
/* Phones: the product mock-up shows the map and the event feed only */
@media (max-width: 640px) {
  body[data-concept] .cx-screen .ui__panel > :nth-child(n+3) { display: none; }
}
/* Trust rail: centred on tablets and phones */
@media (max-width: 1080px) {
  .cx-rail { justify-items: center; text-align: center; gap: 1.75rem; }
  .cx-rail__k { justify-items: center; }
  .cx-rail__k p { margin-inline: auto; }
  .cx-rail__seals { justify-self: center; display: grid; justify-items: center; }
  .cx-rail__seals .certs__seals { justify-content: center; }
  .cx-rail__seals .certs__caption { text-align: center; max-width: 34ch; }
  .cx-rail__stats { justify-content: center; gap: 0.5rem 2.5rem; }
  .cx-rail__stats > div { justify-items: center; text-align: center; }
  .cx-rail__stats small { text-align: center; }
}
/* Policy on phones: the field plus the chosen role, so the table fits; the switcher compares roles */
@media (max-width: 640px) {
  .cx-policy[data-role="1"] :is(td, th):is(:nth-child(3), :nth-child(4)),
  .cx-policy[data-role="2"] :is(td, th):is(:nth-child(2), :nth-child(4)),
  .cx-policy[data-role="3"] :is(td, th):is(:nth-child(2), :nth-child(3)) { display: none; }
  .cx-policy td .pill { opacity: 1 !important; }
  .cx-policy :is(td, th):nth-child(n+2) { text-align: right; }
  .cx-policy :is(td, th):nth-child(n+2) { background: none !important; }
  .cx-roles { justify-content: center; }
  .cx-roles__k { flex-basis: 100%; text-align: center; margin: 0 0 0.2rem; }
}

/* Round 21: the hero's ontology card repeated the panel beside it and hid the facts that now light up with the map */
.cx-hero .dp-card--onto { display: none; }

/* Round 22: the contractor card sits in the empty lower part of the sidebar instead of over its list */
.cx-hero .dp-card--own { top: auto; bottom: 7%; }
/* Round 22: predictive analytics shows a real forecast (actual, projection, trigger) instead of a bare sparkline */
.cx-fc { display: block; width: 100%; height: auto; margin-top: 0.9rem; overflow: visible; }
.cx-fc .g { stroke: rgba(170, 190, 255, 0.12); stroke-width: 1; }
.cx-fc .ax { stroke: rgba(170, 190, 255, 0.35); stroke-width: 1; }
.cx-fc .now { stroke: rgba(170, 190, 255, 0.4); stroke-width: 1; stroke-dasharray: 2 3; }
.cx-fc .ln { fill: none; stroke: #6FB6FF; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) .2s; }
.cx-fc .pj { fill: none; stroke: #6FB6FF; stroke-width: 1.8; stroke-dasharray: 3 4; opacity: 0.75; transition: opacity .5s ease 1.2s; }
.cx-fc .th { stroke: #F7941D; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.85; }
.cx-fc .mk { fill: #2F8BFF; stroke: #0A0F26; stroke-width: 2; transition: opacity .4s ease 1.3s; }
.cx-fc .mk--end { fill: #F7941D; transition-delay: 1.6s; }
.cx-fc text { font-family: var(--font-mono); font-size: 9.5px; fill: rgba(170, 190, 255, 0.62); letter-spacing: 0.04em; }
.cx-fc text.b { fill: #F4F6FC; font-weight: 500; transform: translateY(-3px); transition: opacity .4s ease 1.7s; }
.rv:not(.in) .cx-fc .ln { stroke-dashoffset: 1; }
.rv:not(.in) .cx-fc .pj, .rv:not(.in) .cx-fc .mk, .rv:not(.in) .cx-fc text.b { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cx-fc .ln, .cx-fc .pj, .cx-fc .mk, .cx-fc text.b { transition: none; } }

/* Round 23: a plain sentence at the top of each story panel */
.cx-say { padding: 0 0 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--cx-edge); font-size: 0.9rem; line-height: 1.5; color: var(--cx-fog); }
.cx-say b { color: #F4F6FC; font-weight: 600; margin-right: 0.3rem; }
.cx-screen .ui__say { background: rgba(170, 190, 255, 0.04); }

/* round 25: certifications in the hero rail, centred, larger and each one named */
@media (min-width: 1081px) { body[data-concept] .cx-rail { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.2fr) minmax(0, 0.9fr); } }
.cx-rail__seals.certs--labelled {
  filter: none; opacity: 1; --seal: 70px; color: var(--cx-paper);
  width: 100%; max-width: 680px; justify-self: center; align-items: start;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem;
}
.cx-rail .cert-badge { flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.cx-rail .cert-badge figcaption { justify-items: center; gap: 0.2rem; }
.cx-rail .cert-badge b { font-size: 0.9375rem; color: var(--cx-paper); white-space: nowrap; }
.cx-rail .cert-badge span { font-size: 0.75rem; line-height: 1.35; color: var(--cx-fog); max-width: 18ch; }
.cx-rail .seal__o { opacity: 0.8; }
.cx-rail .seal__i { opacity: 0.45; }
@media (max-width: 960px) { .cx-rail__seals.certs--labelled { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cx-rail__seals.certs--labelled { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; gap: 1.4rem 1rem; } }

/* round 26: the figures get a label like the assurance column, instead of a trailing line */
.cx-rail__stats .cx-label { flex-basis: 100%; justify-content: flex-end; margin-bottom: 0.35rem; }
@media (max-width: 1080px) { .cx-rail__stats .cx-label { justify-content: center; } }

/* ---------- Round 35: Affectli home first screen (Katie, Andrea, 28 Oct) ----------
   Smaller headline and less space above it, so the twin is in the first view; the words stay still
   under the pointer; the twin fades into the ground and carries dashboard figures like a user's screen. */
body[data-concept] .cx-hero { padding-top: calc(var(--header-h) + clamp(2rem, 0.8rem + 3.6vw, 4.25rem)); }
.cx-hero .cx-display { font-size: clamp(2.4rem, 1.1rem + 4vw, 4.6rem); }
.cx-hero .cx-hero__inner { gap: 1.25rem; }
.cx-hero .dp-mid { transform: translate3d(0, calc(var(--p) * -36px), 0); }
.cx-hero .dp-stage { margin-top: clamp(1.25rem, 0.5rem + 2vw, 2.25rem); }
.cx-hero .dp-rig--scene .scn { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; }
.cx-dash { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--font-mono); color: #CFE3FF; }
.cx-dash__bar { position: absolute; top: 2.5%; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 1px; background: rgba(46, 160, 240, 0.22); border: 1px solid rgba(46, 160, 240, 0.32); border-radius: 6px; overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; }
.cx-dash__bar > span { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; background: rgba(10, 18, 44, 0.86); font-size: 0.6875rem; letter-spacing: 0.04em; color: #9FB4DA; }
.cx-dash__bar b { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: #EEF4FF; }
.cx-dash__ws { color: #EEF4FF !important; text-transform: uppercase; letter-spacing: 0.1em !important; }
.cx-dash__ws i { width: 7px; height: 7px; border-radius: 50%; background: #9FE8F5; box-shadow: 0 0 8px #9FE8F5; }
.cx-dash__kpi--chart svg { width: 64px; height: 18px; color: #5FC4FF; }
.cx-dash__log { position: absolute; right: 2%; top: 20%; margin: 0; padding: 0.6rem 0.75rem; list-style: none; display: grid; gap: 0.4rem; min-width: 12.5rem; background: rgba(10, 18, 44, 0.86); border: 1px solid rgba(46, 160, 240, 0.32); border-radius: 6px; font-size: 0.6875rem; color: #CFE3FF; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cx-dash__log::before { content: "Events"; display: block; margin-bottom: 0.15rem; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7F93BC; }
.cx-dash__log li { display: flex; gap: 0.6rem; }
.cx-dash__log time { color: #5FC4FF; }
@media (max-width: 1100px) { .cx-dash__log { display: none; } }
@media (max-width: 760px) { .cx-dash__bar > span:nth-child(n+4) { display: none; } .cx-dash__bar > span { padding: 0.4rem 0.55rem; } .cx-dash__bar b { font-size: 0.875rem; } }

/* What your teams get: four short points, from the demo page's list */
.cx-see { list-style: none; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cx-see li { display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem 1.1rem 1.35rem; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 6px; }
.cx-see__t { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.25; color: var(--fg); }
.cx-see p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 1000px) { .cx-see { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cx-see { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 560px) { .cx-dash__ws { display: none !important; } .cx-dash__bar { top: 0; } }

/* Round 35: the how-it-works story now sits on dark ground (Andrea: the twin as it looks in the product) */
.cx-dark.cx-story .cx-step__t { color: var(--cx-paper); }
.cx-dark.cx-story .cx-step__n, .cx-dark.cx-story .cx-label { color: #6FB6FF; }
.cx-dark.cx-story .cx-story__tab { color: var(--cx-fog); }
.cx-dark.cx-story .cx-story__tab span { color: #7F8BB0; }
.cx-dark.cx-story .cx-story__tab i { background: rgba(170, 190, 255, 0.18); }
.cx-dark.cx-story .cx-story__tab.is-on, .cx-dark.cx-story .cx-story__tab:hover { color: var(--cx-paper); }
.cx-dark.cx-story .cx-story__tab.is-on span { color: #6FB6FF; }
.cx-dark.cx-story .cx-story__dots i { background: rgba(170, 190, 255, 0.28); }
.cx-dark.cx-story .cx-body, .cx-dark.cx-story p { color: var(--cx-mist); }
.cx-dark.cx-story .cx-body strong, .cx-dark.cx-story p strong { color: var(--cx-paper); }
/* Dark theme: the white cards on the Affectli home take the dark surface */
html[data-theme="dark"] body[data-concept] .cx-light, html[data-theme="dark"] body[data-concept] .cx-white { --bg: #0A1236; --fg: var(--cx-paper); --muted: var(--cx-mist); --line: rgba(170, 190, 255, 0.16); --surface: #101A45; }
html[data-theme="dark"] .cx-pillar, html[data-theme="dark"] .cx-mod, html[data-theme="dark"] .cx-see li, html[data-theme="dark"] .cx-stack__front { background: #101A45; border-color: rgba(170, 190, 255, 0.16); color: var(--cx-paper); }
html[data-theme="dark"] .cx-light .cx-label, html[data-theme="dark"] .cx-white .cx-label { color: #6FB6FF; }
html[data-theme="dark"] .cx-statement, html[data-theme="dark"] .cx-quote blockquote, html[data-theme="dark"] .cx-audience strong { color: var(--cx-paper); }
/* 29 Oct 2026: the light Affectli sections in dark mode. Their ink tokens turn light, and the white cards and tiles turn navy. */
html[data-theme="dark"] body[data-concept] :is(.cx-light, .cx-white) { --cx-ink: var(--cx-paper); --cx-slate: var(--cx-mist); --cx-frost: rgba(170, 190, 255, 0.16); --cx-canvas: #0A1236; --cx-azure-ink: #6FB6FF; }
html[data-theme="dark"] .cx-light .cx-case, html[data-theme="dark"] .cx-white .cx-case, html[data-theme="dark"] .cx-tile:not(.cx-tile--ink) { background: #101A45; border-color: rgba(170, 190, 255, 0.16); }
html[data-theme="dark"] .cx-light .cx-case__media::after { box-shadow: inset 0 -110px 80px -40px #101A45; }
html[data-theme="dark"] .cx-mod--more { background: #1D2A63; border-color: #1D2A63; }
/* round 39: client quotes on the Affectli home */
.cx-voices { margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 clamp(3rem, 2rem + 3vw, 5rem); }