/* ────────────────────────────────────────────────────────────
 Page-local tokens. The system tokens are already loaded from
 colors_and_type.css; this block exists so a reviewer can read
 the landing without jumping files.
 ──────────────────────────────────────────────────────────── */
 :root {
 --landing-max: 1200px;
 --gutter: 32px;
 --section-pad-y: 96px;
 --hair: rgba(15, 23, 42, 0.06);
 }

 /* Large-viewport breathing room. On wide monitors the 1200px cap left the
    whole page floating small and tight in the middle; step the container,
    gutters and vertical rhythm up so it fills the space with intent. */
 @media (min-width: 1440px) {
 :root { --landing-max: 1320px; --gutter: 40px; --section-pad-y: 120px; }
 }
 @media (min-width: 1800px) {
 :root { --landing-max: 1460px; --gutter: 56px; --section-pad-y: 144px; }
 }

 html, body { margin: 0; background: var(--map-canvas); color: var(--foreground); }
 body {
 font-family: var(--font-sans);
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
 }
 * { box-sizing: border-box; }
 img { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }

 /* Selection, emerald tint */
 ::selection { background: rgba(40, 159, 133, 0.18); color: var(--slate-900); }

 /* ──── Shared bits ──── */
 .container {
 max-width: var(--landing-max);
 margin: 0 auto;
 padding: 0 var(--gutter);
 }
 .eyebrow-mono {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--brand-primary);
 }
 .eyebrow-mono.muted { color: var(--slate-500); }
 .display {
 font-family: var(--font-display);
 font-weight: 300;
 letter-spacing: -0.025em;
 line-height: 0.96;
 color: var(--slate-900);
 text-wrap: balance;
 }
 .display em { font-style: italic; font-weight: 300; }
 .display strong { font-weight: 900; color: var(--brand-primary); font-style: normal; }
 .lede {
 font-family: var(--font-sans);
 font-size: 17px;
 line-height: 1.6;
 color: var(--slate-600);
 max-width: 56ch;
 text-wrap: pretty;
 }
 .hairline {
 height: 1px;
 background: linear-gradient(to right, transparent, var(--hair) 12%, var(--hair) 88%, transparent);
 }

 /* Buttons */
 .btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 height: 44px;
 padding: 0 20px;
 border-radius: 9999px;
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: -0.005em;
 cursor: pointer;
 transition: transform 200ms var(--ease-out), box-shadow 200ms, background 200ms, color 200ms, border-color 200ms;
 border: 1px solid transparent;
 white-space: nowrap;
 }
 .btn:active { transform: scale(0.97); }
 .btn-primary {
 background: var(--brand-primary);
 color: white;
 box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 .btn-primary:hover {
 background: hsl(165 80% 30%);
 box-shadow: var(--shadow-primary);
 transform: translateY(-1px);
 }
 .btn-ghost {
 background: transparent;
 color: var(--slate-700);
 border-color: rgba(15, 23, 42, 0.12);
 }
 .btn-ghost:hover { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.20); }
 .btn .ic { width: 16px; height: 16px; stroke-width: 1.5; }

 /* ──── Canvas dot-grid backdrop (page-wide) ──── */
 .canvas-bg {
 position: fixed; inset: 0; z-index: -1;
 background-color: var(--map-canvas);
 background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
 background-size: 18px 18px;
 }
 .section-fade { position: relative; }
 .section-fade::before {
 content: "";
 position: absolute; inset: 0;
 background: radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,0.55), transparent 75%);
 pointer-events: none;
 z-index: 0;
 }
 .section-fade > * { position: relative; z-index: 1; }

 /* NAV */
 .nav-wrap {
 position: relative;
 z-index: 100;
 background: transparent;
 }
 .nav {
 display: flex; align-items: center; gap: 6px;
 padding: 20px 0;
 max-width: var(--landing-max);
 margin: 0 auto;
 padding-left: var(--gutter);
 padding-right: var(--gutter);
 }
 .nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
 .nav-brand .mark {
 width: 26px; height: 26px;
 display: block;
 }
 .nav-brand .word {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 16px;
 letter-spacing: -0.01em;
 color: var(--slate-900);
 }
 .nav-links { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
 .nav-link {
 padding: 6px 12px;
 border-radius: 9999px;
 font-size: 13px;
 font-weight: 500;
 color: var(--slate-600);
 transition: all 150ms;
 }
 .nav-link:hover { background: rgba(228, 228, 231, 0.7); color: var(--slate-900); }
 .nav-cta { margin-left: 4px; height: 36px; padding: 0 16px; font-size: 13px; background: var(--slate-800); }
 .nav-cta:hover { background: var(--slate-900); }
 @media (max-width: 760px) { .nav-links { display: none; } }

 /* FLOATING NAV - appears mid-page while the user scrolls,
 hides with a slow fade once scrolling stops. */
 .nav-float {
 position: fixed;
 top: 14px;
 left: 50%;
 z-index: 120;
 display: flex; align-items: center; gap: 4px;
 padding: 6px 6px 6px 16px;
 background: rgba(255, 255, 255, 0.78);
 border: 1px solid rgba(15, 23, 42, 0.08);
 border-radius: 9999px;
 backdrop-filter: saturate(160%) blur(14px);
 -webkit-backdrop-filter: saturate(160%) blur(14px);
 box-shadow:
 0 10px 30px -16px rgba(15, 23, 42, 0.18),
 0 1px 0 rgba(255, 255, 255, 0.6) inset;
 transform: translate(-50%, -140%);
 opacity: 0;
 pointer-events: none;
 transition:
 transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
 opacity 900ms ease;
 }
 .nav-float.is-visible {
 transform: translate(-50%, 0);
 opacity: 1;
 pointer-events: auto;
 transition:
 transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
 opacity 220ms ease;
 }
 .nav-float .nf-brand {
 display: inline-flex; align-items: center; gap: 8px;
 margin-right: 4px;
 text-decoration: none;
 }
 .nav-float .nf-brand img { width: 20px; height: 20px; display: block; }
 .nav-float .nf-brand .word {
 font-family: var(--font-display);
 font-weight: 700; font-size: 13.5px;
 letter-spacing: -0.01em; color: var(--slate-900);
 }
 .nav-float .nf-sep {
 width: 1px; height: 16px;
 background: rgba(15, 23, 42, 0.10);
 margin: 0 4px;
 }
 .nav-float .nf-link {
 padding: 5px 10px;
 border-radius: 9999px;
 font-size: 12.5px; font-weight: 500;
 color: var(--slate-600);
 text-decoration: none;
 transition: color 120ms, background 120ms;
 }
 .nav-float .nf-link:hover {
 color: var(--slate-900);
 background: rgba(15, 23, 42, 0.045);
 }
 .nav-float .nf-cta {
 display: inline-flex; align-items: center;
 height: 30px; padding: 0 13px;
 border-radius: 9999px;
 font-size: 12.5px; font-weight: 600;
 background: var(--slate-800);
 color: white;
 text-decoration: none;
 transition: background 120ms, transform 80ms;
 }
 .nav-float .nf-cta:hover { background: var(--slate-900); }
 .nav-float .nf-cta:active { transform: scale(0.97); }
 @media (max-width: 720px) {
 .nav-float { padding: 5px 5px 5px 12px; gap: 2px; }
 .nav-float .nf-link { display: none; }
 .nav-float .nf-sep { display: none; }
 }
 @media (prefers-reduced-motion: reduce) {
 .nav-float { transition: opacity 200ms ease; transform: translate(-50%, 0); }
 }

 /* HERO */
 .hero { padding: 64px 0 64px; position: relative; }
 .hero-grid {
 display: grid;
 grid-template-columns: 1fr 1.22fr;
 gap: 72px;
 align-items: center;
 }
 @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }
 @media (min-width: 1440px) {
 .hero { padding: 104px 0 92px; }
 .hero-grid { gap: 88px; grid-template-columns: 1fr 1.3fr; }
 }
 @media (min-width: 1800px) {
 .hero { padding: 140px 0 116px; }
 .hero-grid { gap: 104px; grid-template-columns: 1fr 1.36fr; }
 }
 .hero h1 { margin: 16px 0 24px; font-size: clamp(40px, 5.4vw, 76px); }
 .hero-cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
 .hero-trust {
 margin-top: 52px;
 display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
 }
 .hero-trust .lbl {
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--slate-500);
 letter-spacing: 0.14em;
 text-transform: uppercase;
 white-space: nowrap;
 }
 .hero-trust .trust-logos {
 display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;
 }
 .hero-trust .trust-logos img {
 max-height: 27px; max-width: 100px;
 width: auto; height: auto; object-fit: contain;
 flex: 0 1 auto; min-width: 0;
 filter: brightness(0) invert(1);
 opacity: 0.58;
 transition: opacity 200ms;
 }
 .hero-trust .trust-logos img:hover { opacity: 0.92; }

 /* Hero copy sits to the RIGHT of the map, aligned left against the gap. */
 @media (min-width: 961px) {
 .hero-copy { text-align: left; }
 }

 /* Hero visual */
 .hero-viz {
 position: relative;
 aspect-ratio: 1 / 0.84;
 max-width: 780px;
 justify-self: end;
 width: 100%;
 }
 @media (min-width: 1440px) { .hero-viz { max-width: 860px; } }
 @media (min-width: 1800px) { .hero-viz { max-width: 940px; } }
 @media (max-width: 960px) { .hero-viz { justify-self: center; max-width: 560px; } }

 .hero-viz-scene { position: absolute; inset: 0; }
 .hero-canvas-pane {
 position: absolute; inset: 0;
 /* Thick frosted-glass FRAME - the gorgeous frosted surface becomes a
    chunky bezel wrapped around a bright product canvas (like a real
    react-flow viewport sitting in a glass frame). Kept flat (no 3D tilt)
    so the rescaled map text stays crisp. */
 padding: 16px;
 background: rgba(255, 255, 255, 0.08);
 backdrop-filter: blur(10px) saturate(125%);
 -webkit-backdrop-filter: blur(10px) saturate(125%);
 border: 1.5px solid rgba(255, 255, 255, 0.18);
 border-radius: 26px;
 box-shadow:
 0 26px 60px -30px rgba(2, 8, 23, 0.7),
 inset 0 1px 0 rgba(255, 255, 255, 0.16);
 overflow: hidden;
 }
 /* the bright working canvas inside the frosted frame */
 .hero-canvas-inner {
 position: absolute; inset: 16px;
 border-radius: 14px;
 overflow: hidden;
 background-color: var(--map-canvas);
 background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
 background-size: 18px 18px;
 box-shadow:
 inset 0 0 0 1px rgba(15, 23, 42, 0.06),
 inset 0 1px 0 rgba(255, 255, 255, 0.85),
 0 2px 10px rgba(2, 8, 23, 0.22);
 }


 /* ════════════════════════════════════════════════════════════
    HERO MAP - faithful MapView nodes (mirror landscape `.n` /
    lens-demo-embed.html) with the CRITICALITY lens applied:
    whole-node tint, coloured icon tile + border, and a dot+value
    indicator pill. Fixed 760×720 design canvas, scaled to fit the
    pane by JS so the nodes stay full-detail and centred.
    ════════════════════════════════════════════════════════════ */
 .hmap {
 position: absolute; top: 0; left: 0;
 width: 760px; height: 720px;
 transform-origin: top left;
 }
 .hero-edges { position: absolute; top: 0; left: 0; width: 760px; height: 720px; pointer-events: none; overflow: visible; }
 .hero-edges path { fill: none; stroke-linecap: round; }
 .hero-edges .he        { stroke: rgba(71, 85, 105, 0.30); stroke-width: 1.5; }
 .hero-edges .he.strong { stroke: rgba(71, 85, 105, 0.38); stroke-width: 1.6; }
 .hero-edges .he.in-flux {
 stroke: hsl(220 70% 55%); stroke-width: 2.4; stroke-dasharray: 7 6;
 opacity: 0.92;
 filter: drop-shadow(0 0 4px hsl(220 70% 55% / 0.38));
 animation: heroFlow 1.6s linear infinite;
 }
 @keyframes heroFlow { to { stroke-dashoffset: -26; } }

 /* Node - mirrors landscape `.n` */
 .hn {
 position: absolute;
 width: 220px;
 padding: 12px 13px;
 display: flex; align-items: center; gap: 11px;
 background: var(--node-bg, var(--glass-node-bg));
 backdrop-filter: blur(14px);
 border: 1.5px solid var(--node-border, var(--glass-node-border));
 border-radius: 14px;
 box-shadow: var(--glass-node-shadow);
 z-index: 2;
 }
 .hn .tile {
 width: 36px; height: 36px; border-radius: 9px;
 background: var(--tile-bg, var(--zinc-100));
 display: flex; align-items: center; justify-content: center; flex: none;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 .hn .tile svg { width: 17px; height: 17px; stroke-width: 1.6; color: var(--tile-fg, var(--slate-500)); }
 .hn .body { min-width: 0; flex: 1; overflow: hidden; }
 .hn .title {
 font-size: 14px; font-weight: 600; color: var(--slate-900);
 line-height: 1.2; letter-spacing: -0.005em;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
 }
 .hn .sub {
 font-size: 11.5px; color: var(--slate-400); font-weight: 400;
 line-height: 1.1; margin-top: 3px;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
 }
 /* Indicator pill - dot + value, top-right (mirrors `.n .ind`) */
 .hn .ind {
 position: absolute; top: -11px; right: -4px;
 display: inline-flex; align-items: center; gap: 8px;
 padding: 5px 12px 5px 11px;
 border-radius: 9999px;
 background: white; border: 1px solid var(--slate-200);
 color: var(--slate-700);
 font-family: var(--font-mono); font-size: 11px; font-weight: 600;
 box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
 white-space: nowrap; letter-spacing: 0.01em; z-index: 3; min-height: 24px;
 }
 .hn .ind .ind-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-400); flex: none; }

 /* Icon-tile tint by node type (matches real `.n[data-type]`) */
 .hn[data-type="app"] { --tile-bg: hsl(220 80% 95%); --tile-fg: hsl(220 75% 45%); }
 .hn[data-type="db"]  { --tile-bg: hsl(165 65% 92%); --tile-fg: hsl(165 70% 35%); }
 .hn[data-type="api"] { --tile-bg: hsl(46 85% 92%);  --tile-fg: hsl(35 80% 42%); }

 /* ── ACTIVITY LENS - workspace state: who's editing what right now.
    Active nodes brighten with a soft blue ring + a stacked contributor
    avatar cluster; quiet nodes fade back. Mirrors lens-demo-embed.html. ── */
 .hn[data-activity="active"] {
 --node-bg: rgba(255, 255, 255, 0.95);
 --node-border: hsl(220 65% 65% / 0.65);
 box-shadow: 0 0 0 2px hsl(220 70% 65% / 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
 }
 .hn[data-activity="quiet"] { opacity: 0.55; filter: saturate(0.6); }
 /* Activity lens replaces the indicator pill with an avatar cluster */
 .hn .ind { display: none; }
 .hn .activity-cluster { display: none; }
 .hn[data-activity="active"] .activity-cluster {
 display: inline-flex; align-items: center; gap: 7px;
 position: absolute; top: -16px; right: -8px; z-index: 4;
 }
 .activity-cluster .avs { display: inline-flex; }
 .activity-cluster .avs .av {
 width: 26px; height: 26px; border-radius: 50%;
 background: var(--av, hsl(220 20% 80%)) center/cover no-repeat;
 box-shadow: 0 0 0 2px white, 0 1px 2px rgba(15, 23, 42, 0.14);
 margin-left: -8px;
 }
 .activity-cluster .avs .av:first-child { margin-left: 0; }
 .activity-cluster .change-meta {
 font-family: var(--font-mono); font-size: 11px; font-weight: 600;
 color: var(--slate-700); background: white;
 padding: 4px 9px; border-radius: 9999px;
 border: 1px solid var(--slate-200);
 box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
 letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
 }
 .activity-cluster .change-meta .dot-blue {
 display: inline-block; width: 7px; height: 7px; border-radius: 50%;
 background: hsl(220 70% 55%); margin-right: 5px; vertical-align: 0;
 animation: hnChangePulse 1.6s ease-in-out infinite;
 }
 @keyframes hnChangePulse {
 0%, 100% { box-shadow: 0 0 0 0 hsl(220 70% 55% / 0); }
 50%      { box-shadow: 0 0 0 4px hsl(220 70% 55% / 0.18); }
 }

 /* Floating contextual legend - decodes the active Criticality lens,
    mirroring the in-map legend from lens-demo-embed.html. */
 .mini-legend {
 position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
 z-index: 5;
 display: flex; align-items: center; gap: 12px;
 padding: 7px 14px;
 background: rgba(255, 255, 255, 0.82);
 border: 1px solid var(--glass-panel-border);
 border-radius: 9999px;
 box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), 0 1px 1px rgba(15, 23, 42, 0.04);
 backdrop-filter: blur(8px);
 font-family: var(--font-sans);
 }
 .mini-legend .mlg {
 display: inline-flex; align-items: center; gap: 7px;
 font-size: 10.5px; font-weight: 500; color: var(--slate-600);
 white-space: nowrap;
 }
 .mini-legend .mlg:not(:first-child)::before {
 content: ""; width: 1px; height: 13px;
 background: rgba(148, 163, 184, 0.32); margin-right: 5px;
 }
 .mini-legend .ml-node {
 width: 18px; height: 12px; border-radius: 4px;
 border: 1.5px solid var(--c, var(--slate-400));
 background: var(--bg, rgba(255, 255, 255, 0.92));
 flex: none;
 }
 .mini-legend .ml-node.glow { box-shadow: 0 0 7px var(--c); }
 .mini-legend .ml-edge { flex: none; display: block; }
 .mini-legend .ml-avs { display: inline-flex; flex: none; }
 .mini-legend .ml-avs i {
 width: 12px; height: 12px; border-radius: 50%;
 box-shadow: 0 0 0 1.5px white; margin-left: -4px;
 }
 .mini-legend .ml-avs i:first-child { margin-left: 0; }

 .hero-viz::after {
 content: "";
 position: absolute;
 left: 10%; right: 10%; bottom: 48px; height: 60px;
 background: radial-gradient(ellipse at center, rgba(40, 159, 133, 0.20), transparent 70%);
 filter: blur(22px);
 z-index: 0;
 pointer-events: none;
 }

 /* STATS */
 .stats { padding: 24px 0 208px; }
 .stats-card {
 border-radius: 16px;
 overflow: hidden;
 background: var(--glass-panel-bg);
 border: 1px solid var(--glass-panel-border);
 box-shadow: var(--glass-panel-shadow);
 backdrop-filter: blur(4px);
 }
 .stats-card-head { padding: 22px 28px 18px; }
 .stats-card-head h2 {
 font-family: var(--font-display);
 margin: 6px 0 0;
 font-size: 28px;
 font-weight: 600;
 letter-spacing: -0.02em;
 color: var(--slate-900);
 line-height: 1.2;
 text-wrap: balance;
 }
 .stats-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border-top: 1px solid var(--glass-panel-border);
 background: rgba(248, 250, 252, 0.6);
 }
 @media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
 .stat { padding: 22px 24px; border-left: 1px solid var(--glass-panel-border); }
 .stat:first-child { border-left: 0; }
 @media (max-width: 760px) {
 .stat:nth-child(2n+1) { border-left: 0; }
 .stat:nth-child(n+3) { border-top: 1px solid var(--glass-panel-border); }
 }
 .stat .big {
 font-family: var(--font-display);
 font-size: 28px; font-weight: 800;
 letter-spacing: -0.02em;
 color: var(--slate-900);
 line-height: 1.05;
 }
 .stat .label { margin-top: 8px; font-size: 12px; color: var(--slate-500); line-height: 1.5; }
 .stat .src {
 margin-top: 6px;
 font-family: var(--font-mono);
 font-size: 9.5px;
 color: var(--slate-400);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 }

 /* SECTION HEADERS */
 .section-head { text-align: left; max-width: 720px; margin: 0 auto 56px; }
 .section-head.centered { text-align: center; margin-left: auto; margin-right: auto; }
 .section-head h2 {
 margin: 12px 0 14px;
 font-family: var(--font-display);
 font-size: clamp(32px, 4vw, 52px);
 font-weight: 400;
 letter-spacing: -0.025em;
 line-height: 1.04;
 color: var(--slate-900);
 text-wrap: balance;
 }
 .section-head h2 strong { font-weight: 900; color: var(--brand-primary); }

 /* Section vertical rhythm. Per-section override via inline --bay-pt / --bay-pb,
    e.g. <section class="bay" style="--bay-pb: 160px"> for a heavy element
    (like the lens map's big shadow) that needs to start/end later. */
 section.bay { padding-top: var(--bay-pt, var(--section-pad-y)); padding-bottom: var(--bay-pb, var(--section-pad-y)); padding-left: 0; padding-right: 0; }

 /* PROBLEM */
 .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
 @media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr; } }
 .problem-card {
 padding: 0 0 18px;
 background: var(--glass-node-bg);
 border: 1.5px solid var(--glass-node-border);
 border-radius: 16px;
 box-shadow: var(--glass-node-shadow);
 backdrop-filter: blur(12px);
 display: flex; flex-direction: column;
 position: relative;
 overflow: hidden;
 transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s;
 }
 .problem-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--glass-node-shadow-active);
 border-color: var(--glass-node-border-active);
 }

 /* head row: mono index + themed tag */
 .problem-card .pc-top {
 display: flex; align-items: center; justify-content: space-between;
 padding: 18px 22px 0;
 }
 .problem-card .pc-index {
 font-family: var(--font-mono);
 font-size: 11px; letter-spacing: 0.16em;
 color: var(--slate-400);
 }
 .problem-card .pc-tag {
 display: inline-flex; align-items: center; gap: 6px;
 font-family: var(--font-mono);
 font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em;
 color: var(--slate-500);
 border: 1px solid var(--hair);
 border-radius: 7px;
 padding: 4px 9px 4px 8px;
 background: linear-gradient(180deg, #ffffff, var(--map-canvas));
 box-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 .problem-card .pc-tag .tag-glyph { width: 14px; height: 9px; color: var(--slate-400); flex: none; }

 /* ── problem-card mini-charts: clean, legible read-outs of each problem.
    Drift = your snapshot flatlining while the estate climbs; Ownership =
    a coverage matrix mostly unfilled; Signal = criticality bars left blank. ── */
 .pc-motif {
 position: relative;
 margin: 16px 22px 0;
 height: 150px;
 border-radius: 12px;
 background: linear-gradient(180deg, #ffffff, var(--map-canvas));
 border: 1px solid rgba(15, 23, 42, 0.07);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
 overflow: hidden;
 }
 /* 01 · DRIFT */
 .pc-motif .chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
 .pc-motif .chart .grid { stroke: rgba(15, 23, 42, 0.05); stroke-width: 1; }
 .pc-motif .chart .wedge { fill: rgba(15, 23, 42, 0.05); }
 .pc-motif .chart .snap-mark { stroke: rgba(15, 23, 42, 0.16); stroke-width: 1; stroke-dasharray: 2 3; }
 .pc-motif .chart .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
 .pc-motif .chart .ln-live { stroke: var(--slate-800); stroke-width: 2; }
 .pc-motif .chart .ln-snap { stroke: var(--slate-400); stroke-width: 1.5; stroke-dasharray: 4 3.5; }
 .pc-motif .dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--map-canvas); }
 .pc-motif .dot.live { background: var(--slate-800); }
 .pc-motif .dot.snap { background: #fff; border: 1.5px solid var(--slate-400); box-sizing: border-box; }

 /* 02 · OWNERSHIP — coverage matrix, mostly unfilled */
 .pc-motif .cov { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; padding: 26px 28px; place-items: center; }
 .pc-motif .cov b { width: 11px; height: 11px; border-radius: 50%; border: 1.4px dashed var(--slate-300); box-sizing: border-box; }
 .pc-motif .cov b.on { border: 0; background: var(--slate-700); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2); }

 /* 03 · SIGNAL — criticality bars left blank */
 .pc-motif .sig { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 28px 30px 32px; }
 .pc-motif .sig i { width: 17px; height: var(--h, 50%); border-radius: 4px 4px 0 0; border: 1.4px dashed var(--slate-300); border-bottom: 0; }
 .pc-motif .sig::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 30px; height: 1.4px; border-radius: 2px; background: var(--slate-200); }

 /* confident sentence-case headline (no more lowercase "no map") */
 .problem-card .pc-head {
 font-family: var(--font-display);
 font-size: 23px;
 font-weight: 500;
 letter-spacing: -0.02em;
 line-height: 1.12;
 color: var(--slate-900);
 margin: 18px 22px 0;
 text-wrap: balance;
 }
 .problem-card .pc-label {
 font-family: var(--font-sans);
 font-size: 14px;
 color: var(--slate-600);
 line-height: 1.55;
 margin: 8px 22px 0;
 }

 /* resolution line - flips the card from problem to answer */
 .problem-card .pc-fix {
 margin: 16px 22px 0;
 padding-top: 13px;
 border-top: 1px solid var(--hair);
 display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
 font-size: 13px; line-height: 1.45; color: var(--slate-700);
 }
 .problem-card .pc-fix .ar {
 width: 18px; height: 18px; border-radius: 6px;
 background: rgba(40, 159, 133, 0.12);
 color: var(--brand-primary);
 display: grid; place-items: center;
 margin-top: 1px;
 }
 .problem-card .pc-fix .ar svg { width: 11px; height: 11px; stroke-width: 2; }
 .problem-card .pc-fix strong { color: var(--brand-primary); font-weight: 600; }

 .problem-card .pc-src {
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--slate-400);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 margin: 14px 22px 0;
 }
 .problem-grid[data-sources="collapsed"] .pc-src { display: none; }
 .problem-sources-toggle {
 margin: 22px auto 0;
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 14px;
 background: transparent;
 border: 1px solid rgba(15, 23, 42, 0.10);
 border-radius: 9999px;
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--slate-500);
 cursor: pointer;
 transition: color 150ms, border-color 150ms, background 150ms;
 }
 .problem-sources-toggle:hover { color: var(--slate-800); border-color: rgba(15, 23, 42, 0.22); background: rgba(15, 23, 42, 0.02); }
 .problem-sources-toggle svg { width: 11px; height: 11px; stroke-width: 1.75; transition: transform 200ms ease; }
 .problem-sources-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

 /* FEATURE BLOCKS */
 .feature {
 display: grid;
 grid-template-columns: 1fr 1.6fr;
 gap: 56px;
 align-items: center;
 padding: 84px 0;
 }
 .feature.reverse { grid-template-columns: 1.5fr 1fr; }
 .feature.reverse .feature-copy { order: 2; }
 .feature.reverse .feature-viz { order: 1; }
 /* On wide screens, let the sample maps break past the text column and the
    1200px content cap so the graph reads at near full size. */
 @media (min-width: 1100px) {
 #features > .container { max-width: min(1480px, 95vw); }
 }
 @media (min-width: 1200px) {
 .feature { grid-template-columns: 0.85fr 2fr; gap: 64px; }
 .feature.reverse { grid-template-columns: 2fr 0.85fr; }
 }
 @media (max-width: 960px) {
 .feature, .feature.reverse { grid-template-columns: 1fr; gap: 36px; padding: 52px 0; }
 .feature.reverse .feature-copy { order: 1; }
 .feature.reverse .feature-viz { order: 2; }
 }
 .feature-copy h3 {
 font-family: var(--font-display);
 font-size: 36px;
 font-weight: 500;
 letter-spacing: -0.02em;
 line-height: 1.1;
 color: var(--slate-900);
 margin: 14px 0 16px;
 text-wrap: balance;
 }
 .feature-copy p {
 font-size: 16px;
 line-height: 1.65;
 color: var(--slate-600);
 margin: 0 0 22px;
 max-width: 50ch;
 }
 .feature-copy p strong { color: var(--slate-800); font-weight: 600; }
 .feature-bullets {
 list-style: none;
 padding: 0; margin: 0;
 display: flex; flex-direction: column; gap: 10px;
 }
 .feature-bullets li {
 display: grid;
 grid-template-columns: 22px 1fr;
 gap: 10px;
 align-items: start;
 font-size: 14px;
 color: var(--slate-700);
 line-height: 1.5;
 }
 .feature-bullets .ic-wrap {
 width: 22px; height: 22px;
 border-radius: 6px;
 background: rgba(40, 159, 133, 0.12);
 display: grid; place-items: center;
 color: var(--brand-primary);
 margin-top: 1px;
 }
 .feature-bullets .ic-wrap svg { width: 12px; height: 12px; stroke-width: 2; }

 /* LENS PICKER - a standalone control set on its own line beneath the prose;
    choosing a lens drives the embedded map across the frame. */
 .lens-pick-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 2px; flex-wrap: wrap; }
 .lens-pick-cue { order: 2; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate-400); }
 .lens-pick { position: relative; display: inline-block; }
 .lens-pick[data-open="true"] { z-index: 50; }
 .lens-pick-btn {
 display: inline-flex; align-items: center; gap: 8px;
 font-family: var(--font-sans); font-size: 13px; font-weight: 600;
 color: var(--slate-700);
 background: var(--zinc-100);
 border: 1px solid var(--zinc-200);
 border-radius: 9999px;
 padding: 7px 13px 7px 11px;
 cursor: pointer; line-height: 1;
 transition: background 160ms, border-color 160ms, box-shadow 160ms;
 }
 .lens-pick-btn:hover { background: var(--zinc-200); border-color: rgba(15, 23, 42, 0.16); color: var(--slate-900); }
 .lens-pick[data-open="true"] .lens-pick-btn { background: var(--zinc-200); border-color: rgba(15, 23, 42, 0.20); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
 .lens-pick-btn:focus-visible { outline: 2px solid rgba(15, 23, 42, 0.35); outline-offset: 2px; }
 .lens-pick-ic { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
 .lens-pick-ic svg { width: 16px; height: 16px; stroke-width: 1.8; color: var(--slate-500); }
 .lens-pick-name { letter-spacing: -0.005em; }
 .lens-pick-chev { width: 14px; height: 14px; stroke-width: 2.2; color: var(--slate-400); transition: transform 220ms var(--ease-out); }
 .lens-pick[data-open="true"] .lens-pick-chev { transform: rotate(180deg); }
 .lens-pick-menu {
 position: absolute; top: calc(100% + 10px); bottom: auto; left: 0; z-index: 50;
 width: 468px; overflow: hidden;
 background: rgba(250, 250, 249, 0.97);
 border: 1px solid rgba(212, 212, 216, 0.9);
 border-radius: 16px;
 box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.30), 0 2px 6px rgba(15, 23, 42, 0.08);
 backdrop-filter: blur(10px);
 opacity: 0; transform: translateY(-6px) scale(0.98);
 transform-origin: top left;
 pointer-events: none;
 transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out);
 }
 .lens-pick[data-open="true"] .lens-pick-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
 .lens-pick-menu .split { display: flex; }
 .lens-pick-menu .mlist { width: 204px; border-right: 1px solid #e4e4e7; padding: 6px; }
 .lens-pick-menu .mrow {
 display: flex; align-items: center; gap: 8px; width: 100%;
 padding: 9px 10px; border-radius: 8px; border: 0; background: transparent;
 cursor: pointer; text-align: left; font-family: var(--font-sans);
 transition: background 120ms;
 }
 .lens-pick-menu .mrow:hover, .lens-pick-menu .mrow.prev { background: #f4f4f5; }
 .lens-pick-menu .mrow .leadtile { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; }
 .lens-pick-menu .mrow .leadtile svg { width: 14px; height: 14px; stroke-width: 1.9; }
 .lens-pick-menu .mrow .nm { flex: 1; font-size: 12.5px; font-weight: 500; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .lens-pick-menu .mrow.sel .nm { color: #0f172a; font-weight: 600; }
 .lens-pick-menu .mrow.sel { background: #f4f4f5; }
 .lens-pick-menu .mrow .ck { width: 14px; height: 14px; color: #1e293b; stroke-width: 2.2; flex: none; }
 .lens-pick-menu .mpane { flex: 1; padding: 12px; min-width: 0; }
 .lens-pick-menu .mp {
 height: 104px; border-radius: 10px; border: 1px solid #e4e4e7;
 background-color: #f8fafc;
 background-image: radial-gradient(circle, rgba(148,163,184,0.35) 1px, transparent 1px);
 background-size: 12px 12px; position: relative; overflow: hidden;
 }
 .lens-pick-menu .mp .mini { position: absolute; width: 30px; height: 17px; border-radius: 5px; background: #fff; border: 1.5px solid var(--mini-b,#cbd5e1); transform: translate(-50%, -50%); z-index: 1; box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
 .lens-pick-menu .mp .mp-edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
 .lens-pick-menu .mp .mp-edges line { stroke: #cbd5e1; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
 .lens-pick-menu .mp { height: 116px; margin-top: 12px; }
 .lens-pick-menu .pn { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 0; letter-spacing: -0.005em; }
 .lens-pick-menu .pd { font-size: 11px; color: #64748b; line-height: 1.45; margin-top: 4px; min-height: 30px; }
 .lens-pick-menu .pacts { display: flex; gap: 6px; margin-top: 10px; }
 .lens-pick-menu .pacts button { width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: #94a3b8; display: grid; place-items: center; cursor: pointer; }
 .lens-pick-menu .pacts button svg { width: 15px; height: 15px; stroke-width: 1.8; }
 .lens-pick-menu .pacts button:hover { background: rgba(15,23,42,0.06); color: #475569; }
 .lens-pick-menu .pacts button.danger:hover { background: #fef2f2; color: #dc2626; }
 .lens-pick-menu .divh { height: 1px; background: #e4e4e7; }
 .lens-pick-menu .saved { padding: 6px; }
 .lens-pick-menu .mact {
 display: flex; align-items: center; gap: 8px; width: 100%;
 min-height: 36px; padding: 0 10px; border-radius: 8px; border: 0;
 background: transparent; cursor: pointer; font-family: var(--font-sans);
 transition: background 120ms;
 }
 .lens-pick-menu .mact:hover { background: #f4f4f5; }
 .lens-pick-menu .mact svg { width: 15px; height: 15px; color: #64748b; stroke-width: 1.8; }
 .lens-pick-menu .mact .nm { font-size: 12.5px; font-weight: 500; color: #334155; }

 /* Discover (non-reversed): copy hugs the big map on its right - text and
    checkmark bullets flip to right alignment. Collaborate (.reverse) stays
    left-aligned so it hugs its own map. Only while side-by-side. */
 @media (min-width: 961px) {
 .feature:not(.reverse) .feature-copy { text-align: left; }
 }

 .feature-viz { position: relative; aspect-ratio: 3 / 2; }
 .feature-frame {
 position: absolute; inset: 0;
 border-radius: 18px;
 overflow: hidden;
 background: var(--map-canvas);
 background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
 background-size: 18px 18px;
 border: 1px solid rgba(15, 23, 42, 0.08);
 box-shadow:
 0 24px 60px -22px rgba(15, 23, 42, 0.20),
 0 8px 20px -10px rgba(15, 23, 42, 0.10),
 inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 .feature-frame image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
 .feature-frame .chrome {
 position: absolute; top: 0; left: 0; right: 0; height: 36px;
 display: flex; align-items: center; gap: 8px;
 padding: 0 14px;
 background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
 border-bottom: 1px solid rgba(15, 23, 42, 0.06);
 backdrop-filter: blur(8px);
 z-index: 2;
 }
 .feature-frame .chrome .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slate-300); }
 .feature-frame .chrome .crumb {
 font-family: var(--font-sans);
 font-size: 11px;
 color: var(--slate-500);
 margin-left: 6px;
 display: flex; align-items: center; gap: 6px;
 }
 .feature-viz .side-label {
 position: absolute;
 bottom: -22px; right: 0;
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--slate-400);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 }

 /* ───────────────── HOW AN ENGAGEMENT RUNS · live flythrough ─────────────────
    A Remotion-Player "camera over the living map" demo, threaded to three
    persona chapter cards that track timeline progress. One restrained accent
    (emerald); colour inside the map is earned by the lenses, not decoration.
    ──────────────────────────────────────────────────────────────────────── */
 .how-sub {
 margin: 20px auto 0; max-width: 60ch;
 font-size: 16px; line-height: 1.62; color: var(--slate-600); text-wrap: pretty;
 }

 .fly { --accent: var(--brand-primary); max-width: 1140px; margin: 14px auto 0; }
 @media (min-width: 1440px) { .fly { max-width: 1280px; } }

 /* ── stage: hairline frame + the same soft lift as the feature/lens frames ── */
 .fly-stage {
 position: relative; margin: 0;
 border-radius: 20px; overflow: hidden;
 background: var(--map-canvas);
 border: 1px solid rgba(15, 23, 42, 0.08);
 box-shadow:
 0 24px 60px -22px rgba(15, 23, 42, 0.20),
 0 8px 20px -10px rgba(15, 23, 42, 0.10),
 inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 .fly-canvas { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--map-canvas); }
 .fly-canvas > div, .fly-canvas iframe { border: 0; }

 .fly-fallback {
 position: absolute; inset: 0; z-index: 1;
 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
 background-color: var(--map-canvas);
 background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
 background-size: 24px 24px;
 font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--slate-500);
 text-align: center; padding: 0 24px;
 transition: opacity 450ms ease;
 }
 .fly-fallback.is-hidden { opacity: 0; pointer-events: none; }
 .fly-fallback-spinner {
 width: 26px; height: 26px; border-radius: 50%;
 border: 2.5px solid var(--slate-200); border-top-color: var(--accent);
 animation: flySpin 0.8s linear infinite;
 }
 .fly-fallback.is-error .fly-fallback-spinner { display: none; }
 @keyframes flySpin { to { transform: rotate(360deg); } }

 /* ── transport: one calm scrubber, neutral track + single emerald fill ── */
 .fly-transport {
 display: flex; align-items: center; gap: 16px;
 margin: 16px 2px 0;
 }
 .fly-play {
 flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(15,23,42,0.10);
 background: #fff; color: var(--slate-800); display: grid; place-items: center; padding: 0; cursor: pointer;
 transition: transform 140ms var(--ease-out), border-color 160ms, color 160ms, box-shadow 200ms;
 box-shadow: var(--shadow-xs);
 }
 .fly-play:hover { transform: translateY(-1px); border-color: rgba(15,23,42,0.20); color: var(--slate-900); }
 .fly-play:active { transform: scale(0.94); }
 .fly-play svg { width: 16px; height: 16px; display: block; }
 .fly-play .ic-play { display: none; }
 .fly-play[data-state="paused"] .ic-play { display: block; }
 .fly-play[data-state="paused"] .ic-pause { display: none; }

 .fly-scrub { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
 .fly-scrub-track { position: relative; width: 100%; height: 4px; border-radius: 9999px; background: var(--slate-200); }
 .fly-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 9999px; background: var(--slate-900); }
 .fly-scrub-fill::after {
 content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
 width: 12px; height: 12px; border-radius: 50%; background: #fff;
 box-shadow: 0 0 0 2px var(--slate-900), 0 1px 3px rgba(15, 23, 42, 0.25);
 }
 .fly-scrub-tick { position: absolute; top: 50%; width: 2px; height: 9px; transform: translate(-50%, -50%); background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px rgba(15,23,42,0.06); }
 .fly-time { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--slate-500); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

 /* ── chapter cards: editorial + monochrome. Inactive cards are quiet text on
    the tint; the active chapter lifts into a soft white card. No accent bar,
    no glow, no colour, the numeral and weight carry the hierarchy. ── */
 .fly-chapters {
 list-style: none; margin: 32px 0 0; padding: 0;
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
 }
 .fly-chapter { display: flex; }
 .fly-card {
 position: relative; width: 100%; text-align: left; cursor: pointer; font: inherit;
 display: flex; flex-direction: column;
 padding: 22px 19px 20px;
 background: transparent;
 border: 1px solid transparent;
 border-radius: 16px;
 transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .35s ease, background .35s ease;
 }
 .fly-card:hover {
 background: rgba(255, 255, 255, 0.38);
 -webkit-backdrop-filter: blur(10px) saturate(118%); backdrop-filter: blur(10px) saturate(118%);
 border-color: var(--glass-node-border);
 box-shadow: var(--shadow-xs); transform: translateY(-2px);
 }
 .fly-card:focus-visible { outline: 2px solid var(--slate-400); outline-offset: 3px; }

 .fly-chapter[data-active="true"] .fly-card {
 background: rgba(255, 255, 255, 0.42);
 -webkit-backdrop-filter: blur(16px) saturate(122%); backdrop-filter: blur(16px) saturate(122%);
 border-color: var(--glass-node-border);
 box-shadow:
 0 18px 44px -30px rgba(15, 23, 42, 0.18),
 inset 0 1px 0 rgba(255, 255, 255, 0.5);
 transform: translateY(-4px);
 }

 .fc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
 .fc-index {
 font-family: var(--font-display); font-size: 27px; font-weight: 300; letter-spacing: -0.02em;
 line-height: 1; color: var(--slate-300); font-variant-numeric: tabular-nums; transition: color .4s ease;
 flex: none;
 }
 .fly-chapter[data-active="true"] .fc-index { color: var(--slate-900); }
 .fc-title {
 font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
 line-height: 1.16; color: var(--slate-800); margin: 0; flex: 1; transition: color .4s ease;
 }
 .fly-chapter[data-active="true"] .fc-title { color: var(--slate-900); }
 .fc-desc { font-size: 12.5px; line-height: 1.55; color: var(--slate-500); margin: 0; text-wrap: pretty; transition: color .4s ease; }
 .fly-chapter[data-active="true"] .fc-desc { color: var(--slate-600); }
 .fc-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
 .fc-tool {
 display: inline-flex; align-items: center; gap: 6px;
 font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: var(--slate-500);
 background: transparent; border: 1px solid var(--slate-200); padding: 4px 9px; border-radius: 8px;
 transition: border-color .4s ease, color .4s ease;
 }
 .fc-tool svg { width: 11px; height: 11px; stroke-width: 1.8; color: var(--slate-400); transition: color .4s ease; }
 .fly-chapter[data-active="true"] .fc-tool { border-color: var(--slate-300); color: var(--slate-700); }
 .fly-chapter[data-active="true"] .fc-tool svg { color: var(--slate-500); }

 @media (prefers-reduced-motion: reduce) {
 .fly-card { transition: none !important; }
 .fly-card:hover, .fly-chapter[data-active="true"] .fly-card { transform: none; }
 }
 @media (max-width: 1080px) {
 .fly-chapters { grid-template-columns: repeat(2, 1fr); gap: 8px; }
 }
 @media (max-width: 620px) {
 .fly-chapters { grid-template-columns: 1fr; gap: 6px; }
 .fc-title { font-size: 21px; }
 }

 /* LENS CALLOUT */
 .lens-callout { margin-top: 44px; }
 .lens-callout .lc-head {
 display: flex; align-items: center; gap: 12px;
 margin-bottom: 16px;
 }
 .lens-callout .lc-head .l {
 font-family: var(--font-mono);
 font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
 color: var(--slate-500); white-space: nowrap;
 }
 .lens-callout .lc-head .rule { flex: 1; height: 1px; background: var(--glass-panel-border); }
 .lens-callout .lc-head .r {
 font-family: var(--font-mono);
 font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
 color: var(--slate-400); white-space: nowrap;
 }
 .lens-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
 @media (max-width: 760px) { .lens-grid { grid-template-columns: 1fr; } }
 .lens-tile {
 padding: 18px 20px 18px;
 border-radius: 14px;
 background: var(--glass-panel-bg);
 border: 1px solid var(--glass-panel-border);
 box-shadow: var(--glass-panel-shadow);
 }
 .lens-tile .lens-head {
 display: flex; align-items: center; gap: 9px;
 margin-bottom: 16px;
 }
 .lens-tile .lens-head .lic {
 width: 24px; height: 24px; border-radius: 7px;
 background: var(--slate-800);
 display: grid; place-items: center; flex: none;
 }
 .lens-tile .lens-head .lic svg { width: 13px; height: 13px; stroke-width: 1.7; color: white; }
 .lens-tile .lens-head .lname { font-size: 14px; font-weight: 600; color: var(--slate-800); }
 .lens-tile .lens-head .lctx {
 margin-left: auto;
 font-family: var(--font-mono);
 font-size: 9.5px;
 color: var(--slate-400);
 text-transform: uppercase; letter-spacing: 0.08em;
 }
 .lens-tile .swatches { display: flex; flex-direction: column; gap: 12px; }
 .lens-tile .sw {
 display: grid;
 grid-template-columns: 11px 1fr auto;
 align-items: center;
 gap: 12px;
 }
 .lens-tile .sw .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
 .lens-tile .sw .dot.ring { background: transparent !important; border: 1.5px dashed var(--slate-400); }
 .lens-tile .sw .lbl { font-size: 13px; color: var(--slate-700); }
 .lens-tile .sw .v { font-family: var(--font-mono); font-size: 11px; color: var(--slate-400); white-space: nowrap; }

 /* Embeds fade in once their document has painted, instead of popping over
    the canvas background. Gated on the .js root class so the maps are never
    stuck invisible when scripting is off. */
 .js .lens-embed, .js .hero-map-mount { opacity: 0; transition: opacity 0.45s ease; }
 .js .lens-embed.is-ready, .js .hero-map-mount.is-ready { opacity: 1; }

 /* live lens demo embedded in feature-frame */
 .feature-frame .lens-embed {
 position: absolute; top: 36px; left: 0; right: 0; bottom: 0;
 width: 100%; height: calc(100% - 36px);
 border: 0; display: block;
 background: var(--map-canvas);
 }

 /* Feature 3 - full-width lens showcase (the map needs room, not a column) */
 .lens-feature { padding: 56px 0 0; }
 .lens-feature .feature-copy { max-width: 760px; margin: 0 auto 40px; text-align: center; }
 .lens-feature .feature-copy p { margin: 0 auto; max-width: 64ch; }
 .lens-feature .feature-copy p strong { color: var(--slate-800); font-weight: 600; }
 .feature-viz-wide { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 720px; margin: 0 auto 72px; }
 @media (max-width: 700px) { .feature-viz-wide { aspect-ratio: 4 / 3; } }

 /* SOCIAL */
 .social { padding: 60px 0 80px; }
 .social-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
 .social-head {
 display: flex; align-items: center; gap: 16px;
 margin-bottom: 22px;
 }
 .social-head .l {
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--slate-500);
 text-transform: uppercase;
 letter-spacing: 0.14em;
 white-space: nowrap;
 }
 .social-head .rule { flex: 1; height: 1px; background: var(--glass-panel-border); }
 .social-head .r {
 font-family: var(--font-mono);
 font-size: 10px;
 color: var(--slate-400);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 white-space: nowrap;
 }
 .logo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: center; }
 @media (max-width: 760px) { .logo-row { grid-template-columns: repeat(2, 1fr); } }
 .logo-cell { display: grid; place-items: center; height: 44px; }
 .logo-cell img {
 max-height: 32px;
 max-width: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
 filter: brightness(0);
 opacity: 0.55;
 transition: opacity 200ms;
 }
 .logo-cell:hover img { opacity: 0.85; }

 /* TRUSTED-BY strip - compact, folded into the engagement section */
 .quote-trust {
 margin-top: 48px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
 }
 .quote-trust .lbl {
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--slate-400);
 white-space: nowrap;
 }
 .quote-trust .logos {
 display: flex;
 width: 100%;
 align-items: center;
 justify-content: center;
 gap: 22px 40px;
 flex-wrap: wrap;
 }
 .quote-trust .logos img {
 max-height: 22px;
 max-width: 94px;
 width: auto; height: auto;
 object-fit: contain;
 filter: brightness(0);
 opacity: 0.38;
 transition: opacity 200ms;
 }
 .quote-trust .logos img:hover { opacity: 0.66; }
 @media (max-width: 700px) {
 .quote-trust .logos { gap: 18px 28px; }
 }

 /* SOCIAL (legacy standalone strip - unused after fold into engagement) */
 .quote { max-width: 900px; margin: 80px auto 0; padding: 0 32px; text-align: center; }
 .quote .mark {
 font-family: var(--font-display);
 font-size: 64px;
 font-weight: 800;
 color: var(--brand-primary);
 line-height: 0;
 margin-bottom: 28px;
 display: block;
 }
 .quote p {
 font-family: var(--font-display);
 font-size: clamp(22px, 2.6vw, 32px);
 font-weight: 400;
 line-height: 1.35;
 letter-spacing: -0.015em;
 color: var(--slate-800);
 text-wrap: balance;
 margin: 0 0 24px;
 }
 .quote .who {
 font-size: 13px;
 color: var(--slate-500);
 font-family: var(--font-mono);
 letter-spacing: 0.04em;
 }
 .quote .who strong { color: var(--slate-700); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

 /* CTA */
 .cta-banner {
 margin: 0;
 padding: 56px 48px;
 border-radius: 24px;
 background:
 radial-gradient(60% 100% at 90% 0%, rgba(40, 159, 133, 0.12), transparent 70%),
 var(--glass-panel-bg);
 border: 1px solid var(--glass-panel-border);
 box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.18);
 backdrop-filter: blur(8px);
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: 48px;
 align-items: center;
 overflow: hidden;
 position: relative;
 }
 @media (max-width: 880px) { .cta-banner { grid-template-columns: 1fr; padding: 36px 28px; } }
 .cta-banner h2 {
 font-family: var(--font-display);
 font-size: clamp(28px, 3.4vw, 44px);
 font-weight: 400;
 letter-spacing: -0.025em;
 line-height: 1.06;
 color: var(--slate-900);
 margin: 14px 0 14px;
 text-wrap: balance;
 }
 .cta-banner h2 strong { font-weight: 900; color: var(--brand-primary); }
 .cta-banner p {
 font-size: 15px;
 line-height: 1.55;
 color: var(--slate-600);
 margin: 0 0 26px;
 max-width: 44ch;
 }
 .cta-banner .actions { display: flex; gap: 12px; flex-wrap: wrap; }
 .cta-aside { position: relative; aspect-ratio: 5 / 4; }
 @media (max-width: 880px) { .cta-aside { display: none; } }
 .cta-aside-frame {
 position: absolute; inset: 0;
 border-radius: 16px;
 overflow: hidden;
 background: var(--map-canvas);
 background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
 background-size: 16px 16px;
 border: 1px solid rgba(15, 23, 42, 0.08);
 box-shadow: 0 12px 30px -16px rgba(15, 23, 42, 0.20), inset 0 1px 0 rgba(255,255,255,0.8);
 transform: rotate(-2deg);
 }
 .cta-mini-node {
 position: absolute;
 background: rgba(255,255,255,0.85);
 border: 1.5px solid var(--glass-node-border);
 border-radius: 10px;
 padding: 6px 8px;
 width: 88px;
 font-size: 8.5px;
 font-weight: 600;
 color: var(--slate-700);
 box-shadow: var(--glass-node-shadow);
 display: flex; align-items: center; gap: 5px;
 }
 .cta-mini-node .ic { width: 9px; height: 9px; flex: none; stroke-width: 1.5; color: var(--slate-500); }

 /* ════════════════════════════════════════════════════════════
    CTA - dark AURORA surface + Aceternity COVER ("lightspeed")
    headline. Borrowed from the production hero graphic:
      · aurora layers   → ui/aurora-background.tsx
      · beams + gradient → ui/cover.tsx  (beam #2EB9DF, text
        blue-400 → teal-400 → blue-500, 8s drift)
    ════════════════════════════════════════════════════════════ */
 .cta-banner.aurora {
 background: #0b1220;
 border: 1px solid rgba(255, 255, 255, 0.10);
 box-shadow:
 0 18px 44px -28px rgba(6, 12, 30, 0.45),
 inset 0 1px 0 rgba(255, 255, 255, 0.06);
 isolation: isolate;
 }
 .cta-banner.aurora > * { position: relative; z-index: 2; }
 .cta-banner.aurora > .cta-aurora { position: absolute; z-index: 0; }

 /* ════════════════════════════════════════════════════════════
    FINAL ZONE - the aurora becomes the background of the whole
    last diagonal section: CTA content + footer share one dark
    surface. The CTA card chrome is dropped; the footer is reskinned
    for the dark surface.
    ════════════════════════════════════════════════════════════ */
 .diag-sec[data-fill="aurora"]::before { display: none; }
 .zone-final { color: #e2e8f0; }
 .zone-aurora {
 position: absolute; z-index: -1;
 inset: 0; left: 50%;
 width: 100vw; transform: translateX(-50%);
 clip-path: polygon(0 var(--diag-h), 100% 0, 100% 100%, 0 100%);
 overflow: hidden; pointer-events: none;
 background: #0b1220;
 }
 /* CTA loses its card chrome - it now floats directly on the section aurora.
    With the side graphic gone it becomes a single centred column. */
 .zone-final .cta-banner.aurora {
 display: block;
 background: transparent;
 border: 0;
 box-shadow: none;
 isolation: auto;
 padding: 8px 0 0;
 text-align: center;
 }
 .zone-final .cta-banner.aurora > div { max-width: 760px; margin: 0 auto; }
 .zone-final .cta-banner.aurora p { margin-left: auto; margin-right: auto; }
 .zone-final .cta-banner.aurora .actions { justify-content: center; }
 /* footer reskinned for the dark aurora surface */
 .diag-sec.zone-final > footer {
 margin-top: 0;
 padding-top: 8px;
 border-top: 0;
 }
 .zone-final .footer-grid .word { color: #ffffff; }
 .zone-final .footer-links a { color: rgba(226, 232, 240, 0.78); }
 .zone-final .footer-links a:hover { color: #ffffff; }
 .zone-final .footer-base { color: rgba(148, 163, 184, 0.72); border-top: 0; padding-top: 0; }

 /* ════ HERO ZONE - same aurora surface at the top of the page ════ */
 .diag-sec[data-top="flat"] .zone-aurora { clip-path: none; }
 .zone-hero { color: #e2e8f0; }
 /* nav, on the dark hero aurora */
 .zone-hero .nav-brand .word { color: #ffffff; }
 .zone-hero .nav-link { color: rgba(226, 232, 240, 0.80); }
 .zone-hero .nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.10); }
 .zone-hero .nav-cta {
 background: rgba(255, 255, 255, 0.12);
 border: 1px solid rgba(255, 255, 255, 0.22);
 color: #ffffff;
 box-shadow: none;
 }
 .zone-hero .nav-cta:hover { background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.42); }
 /* hero copy */
 .zone-hero .eyebrow-mono { color: #5eead4; }
 .zone-hero .display { color: #ffffff; }
 .zone-hero .display strong { color: #34d8b4; }
 .zone-hero .lede { color: rgba(226, 232, 240, 0.82); }
 .zone-hero .hero-trust .lbl { color: rgba(226, 232, 240, 0.60); }
 /* hero product map reads as a bright card floating on the dark surface */
 .zone-hero .hero-canvas-pane {
 border-color: rgba(255, 255, 255, 0.16);
 box-shadow: 0 30px 66px -30px rgba(2, 8, 23, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.16);
 }
 /* stats card → dark glass to match the hero */
 .zone-hero .stats-card {
 background: rgba(255, 255, 255, 0.06);
 border-color: rgba(255, 255, 255, 0.12);
 box-shadow: 0 26px 60px -30px rgba(2, 8, 23, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 backdrop-filter: blur(10px);
 }
 .zone-hero .stats-card-head h2 { color: #ffffff; }
 .zone-hero .stats-grid { background: rgba(255, 255, 255, 0.03); border-top-color: rgba(255, 255, 255, 0.12); }
 .zone-hero .stat { border-left-color: rgba(255, 255, 255, 0.10); }
 .zone-hero .stat .big { color: #ffffff; }
 .zone-hero .stat .big em { color: rgba(148, 163, 184, 0.85) !important; }
 .zone-hero .stat .label { color: rgba(226, 232, 240, 0.72); }
 .zone-hero .stat .src { color: rgba(148, 163, 184, 0.70); }
 @media (max-width: 760px) {
 .zone-hero .stat:nth-child(n+3) { border-top-color: rgba(255, 255, 255, 0.10); }
 }

 /* ── aurora field (mirrors AuroraBackground layers) ── */
 .cta-aurora { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
 .cta-aurora .base, .zone-aurora .base {
 position: absolute; inset: 0;
 background: linear-gradient(to bottom, rgb(40, 104, 133), rgb(24, 55, 107), rgb(41, 97, 115));
 opacity: 0.9;
 }
 .cta-aurora .a1, .cta-aurora .a2, .zone-aurora .a1, .zone-aurora .a2 {
 position: absolute; inset: -40%;
 background-size: 200% 200%;
 opacity: 0.55;
 filter: blur(90px);
 will-change: transform, background-position;
 }
 .cta-aurora .a1, .zone-aurora .a1 {
 background-image: linear-gradient(120deg, rgb(94, 234, 212), rgb(47, 40, 117), rgb(33, 154, 120));
 animation: ctaAurora 18s ease-in-out infinite, ctaDrift1 23s ease-in-out infinite;
 }
 .cta-aurora .a2, .zone-aurora .a2 {
 background-image: linear-gradient(300deg, rgb(67, 56, 202), rgb(59, 130, 246), rgb(94, 234, 212));
 animation: ctaAurora 22s ease-in-out infinite reverse, ctaDrift2 27s ease-in-out infinite;
 }
 .cta-aurora .mask, .zone-aurora .mask {
 position: absolute; inset: 0;
 background: radial-gradient(125% 120% at 72% 8%, transparent 0%, rgba(4, 9, 22, 0.55) 55%, rgba(4, 9, 22, 0.92) 100%);
 }
 @keyframes ctaAurora {
 0%   { background-position: 0% 50%; }
 50%  { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
 @keyframes ctaDrift1 {
 0%   { transform: translate(-7%, -5%) scale(1.15) rotate(0deg); }
 50%  { transform: translate(8%, 6%) scale(1.32) rotate(8deg); }
 100% { transform: translate(-7%, -5%) scale(1.15) rotate(0deg); }
 }
 @keyframes ctaDrift2 {
 0%   { transform: translate(7%, 5%) scale(1.22) rotate(0deg); }
 50%  { transform: translate(-8%, -6%) scale(1.38) rotate(-9deg); }
 100% { transform: translate(7%, 5%) scale(1.22) rotate(0deg); }
 }

 /* ── dark-surface copy ── */
 .cta-banner.aurora .eyebrow-mono { color: #5eead4; }
 .cta-banner.aurora h2 { color: #ffffff; }
 .cta-banner.aurora p { color: rgba(226, 232, 240, 0.82); }
 .cta-banner.aurora .btn-ghost {
 color: #e2e8f0;
 border-color: rgba(255, 255, 255, 0.22);
 background: rgba(255, 255, 255, 0.04);
 }
 .cta-banner.aurora .btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.42); }
 .cta-banner.aurora .btn-primary {
 background: linear-gradient(to right, #3b82f6, #2EB9DF);
 border: 1.5px solid rgba(255, 255, 255, 0.85);
 box-shadow: 0 0 22px rgba(59, 130, 246, 0.40);
 }
 .cta-banner.aurora .btn-primary:hover {
 box-shadow: 0 0 30px rgba(46, 185, 223, 0.45);
 transform: translateY(-1px);
 }

 /* ── COVER: the "lightspeed" headline word ── */
 .cover {
 position: relative;
 display: inline-block;
 padding: 0.04em 0.30em 0.10em;
 border-radius: 12px;
 background: rgba(10, 15, 28, 0.30);
 overflow: visible;
 vertical-align: baseline;
 }
 .cover .cover-text {
 position: relative; z-index: 3;
 background: linear-gradient(to right, #60a5fa, #2dd4bf, #3b82f6);
 background-size: 200% 200%;
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 font-weight: 900;
 letter-spacing: -0.02em;
 animation: hs-gradient 8s ease infinite;
 }
 .cover .beam {
 position: absolute; left: -210px; right: -360px; height: 1px; z-index: 2;
 background: linear-gradient(90deg, transparent, #2EB9DF 50%, transparent);
 background-size: 300px 100%;
 background-repeat: no-repeat;
 opacity: 0;
 filter: drop-shadow(0 0 3px rgba(46, 185, 223, 0.6));
 animation: coverBeam 3s linear infinite;
 pointer-events: none;
 }
 @keyframes coverBeam {
 0%   { background-position: 120% 0; opacity: 0; }
 10%  { opacity: 0.95; }
 90%  { opacity: 0.95; }
 100% { background-position: -20% 0; opacity: 0; }
 }
 .cover .cdot {
 position: absolute; width: 4px; height: 4px; border-radius: 50%;
 background: #2EB9DF; box-shadow: 0 0 7px #2EB9DF; z-index: 4;
 animation: coverPulse 2s ease-in-out infinite;
 }
 @keyframes coverPulse {
 0%, 100% { opacity: 0.35; transform: scale(0.85); }
 50%      { opacity: 1; transform: scale(1.15); }
 }

 /* ════ LIGHT MAP - faithful CompactNode (200px spec, scaled) ════ */
 .cta-banner.aurora .cta-aside { aspect-ratio: 5 / 4.5; }
 /* soft aurora-tinted halo so the panel sits in the gradient card */
 .cta-banner.aurora .cta-aside::before {
 content: ""; position: absolute; inset: -7%;
 background: radial-gradient(58% 58% at 52% 46%, rgba(45, 212, 191, 0.20), rgba(99, 102, 241, 0.10) 55%, transparent 72%);
 filter: blur(28px); z-index: -1; pointer-events: none;
 }
 /* Match the hero graphic: a thick frosted bezel wrapping a bright
    dot-grid product canvas (instead of one flat frosted panel). */
 .cta-banner.aurora .cta-aside-frame {
 inset: 0;
 padding: 14px;
 background: rgba(255, 255, 255, 0.08);
 backdrop-filter: blur(10px) saturate(125%);
 -webkit-backdrop-filter: blur(10px) saturate(125%);
 border: 1.5px solid rgba(255, 255, 255, 0.18);
 border-radius: 24px;
 box-shadow:
 0 30px 60px -26px rgba(2, 8, 23, 0.6),
 inset 0 1px 0 rgba(255, 255, 255, 0.18);
 transform: none;
 overflow: hidden;
 }
 /* the bright working canvas inside the frosted bezel */
 .cta-banner.aurora .cta-aside-inner {
 position: absolute; inset: 14px;
 border-radius: 13px;
 overflow: hidden;
 background-color: var(--map-canvas);
 background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
 background-size: 16px 16px;
 box-shadow:
 inset 0 0 0 1px rgba(15, 23, 42, 0.06),
 inset 0 1px 0 rgba(255, 255, 255, 0.85),
 0 2px 10px rgba(2, 8, 23, 0.22);
 }
 .cta-map { position: absolute; inset: 0; z-index: 1; }
 .cta-edge { fill: none; stroke: var(--map-edge); stroke-width: 1.4; }
 .cta-edge.strong { stroke: var(--map-edge-strong); stroke-width: 1.8; }
 .cta-edge.traced {
 stroke: #6366f1; stroke-width: 1.8; stroke-dasharray: 5 4;
 filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.35));
 animation: flow 1.8s linear infinite;
 }
 /* ════ GROUP DECK CARDS - collapsed stacks (grouping.html "Deck") ════ */
 .gcard { position: absolute; z-index: 3; width: 150px; --accent: #4f46e5; }
 /* deck = layered cards peeking out behind the body */
 .gcard::before, .gcard::after {
 content: ""; position: absolute; left: 7px; right: 7px; top: 7px; bottom: -1px;
 border-radius: 13px;
 background: rgba(255, 255, 255, 0.6);
 border: 1px solid rgba(148, 163, 184, 0.30);
 box-shadow: 0 6px 14px -9px rgba(15, 23, 42, 0.35);
 z-index: -1;
 }
 .gcard::after { left: 12px; right: 12px; top: 12px; background: rgba(255, 255, 255, 0.42); }
 .gcard-body {
 position: relative;
 padding: 9px 10px 10px;
 background: rgba(255, 255, 255, 0.92);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1.5px solid rgba(148, 163, 184, 0.42);
 border-radius: 13px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 12px 24px -16px rgba(15,23,42,0.4), inset 0 1px 0 rgba(255,255,255,0.85);
 }
 .gcard-head { display: flex; align-items: center; gap: 7px; }
 .gcard-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
 .gcard-label { font-size: 11px; font-weight: 650; color: var(--slate-900); letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .gcard-count {
 margin-left: auto; flex: none;
 font-family: var(--font-mono); font-size: 9px; font-weight: 600;
 color: var(--slate-500); border: 1px solid var(--slate-200);
 border-radius: 5px; padding: 0 5px; font-variant-numeric: tabular-nums;
 }
 .gcard-owner {
 margin-top: 7px;
 font-family: var(--font-mono); font-size: 7px; font-weight: 600;
 letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-400);
 }
 .gcard-bar { margin-top: 8px; }
 .gcard-bar .cap { font-size: 8px; font-weight: 600; color: var(--slate-500); letter-spacing: 0.01em; margin-bottom: 6px; }
 .gcard-bar .track { display: flex; height: 6px; gap: 1.5px; border-radius: 9999px; overflow: hidden; background: var(--slate-200); }
 .gcard-bar .track i { display: block; height: 100%; }
 .gcard-bar .leg { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
 .gcard-bar .lg { display: inline-flex; align-items: center; gap: 5px; }
 .gcard-bar .lg .d { width: 7px; height: 7px; border-radius: 9999px; flex: none; }
 .gcard-bar .lg .nm { font-size: 9px; font-weight: 650; color: var(--slate-700); letter-spacing: -0.01em; }
 .gcard-bar .lg .vl { font-size: 9px; font-weight: 500; color: var(--slate-400); font-variant-numeric: tabular-nums; }
 .cta-eweight {
 position: absolute; z-index: 4; transform: translate(-50%, -50%);
 font-family: var(--font-mono); font-size: 8px; font-weight: 600; color: var(--slate-500);
 background: rgba(255, 255, 255, 0.92); border: 1px solid var(--slate-200);
 border-radius: 5px; padding: 0 4px; font-variant-numeric: tabular-nums;
 }
 .cta-map-lens {
 position: absolute; top: 11px; left: 11px; z-index: 6;
 display: flex; align-items: center; gap: 6px;
 padding: 3px 9px 3px 8px;
 background: rgba(255, 255, 255, 0.9);
 border: 1px solid var(--glass-panel-border);
 border-radius: 9999px;
 backdrop-filter: blur(6px);
 box-shadow: var(--glass-panel-shadow);
 font-family: var(--font-mono);
 font-size: 8px; letter-spacing: 0.10em; text-transform: uppercase;
 color: var(--slate-600);
 }
 .cta-map-lens .ld { width: 6px; height: 6px; border-radius: 50%; background: #4f46e5; }

 @media (prefers-reduced-motion: reduce) {
 .cta-aurora .a1, .cta-aurora .a2,
 .cover .beam, .cover .cover-text,
 .cta-edge.traced { animation: none; }
 .cover .beam { opacity: 0.5; }
 }

 /* ════════════════════════════════════════════════════════════════
    ENGAGEMENT BAND - a subtly tinted, full-bleed surface joined to the
    map-canvas above by a single diagonal seam. Separates "what the map
    gives you" (dotted canvas) from "how an engagement runs" (flat tint).
    The band tucks up under the section above (negative margin) so the
    clipped top edge reads as a clean two-tone diagonal. data-dir flips it.
    ════════════════════════════════════════════════════════════════ */
 /* ════════════════════════════════════════════════════════════════
    DIAGONAL SECTION  ·  the page is a stack of these
    ────────────────────────────────────────────────────────────────
    Each <div class="diag-sec"> is a full-bleed tonal band whose TOP
    edge is a diagonal seam joining it to the band above. It overlaps
    the previous band (negative margin) so the clipped triangle reveals
    that band's tone - a clean two-tone diagonal. Content sections sit
    inside and keep their own .container / .bay padding.

      data-fill   canvas | tint | white | slate   (band tone)
      data-top    flat   → no seam (use on the first band only)
      data-dir    right (default) | left           (rake direction)
      --diag-h    seam depth = the angle           (default 84px)

    Slant clearance is handled by the band's own padding-top, so any
    section markup can sit inside without edits. Per-section breathing
    is still tuned with --bay-pt / --bay-pb on each .bay section.
    ════════════════════════════════════════════════════════════════ */
 .diag-sec {
 --diag-h: 84px;
 position: relative;
 isolation: isolate;
 margin-top: calc(-1 * var(--diag-h));   /* overlap the band above to reveal its tone */
 padding-top: var(--diag-h);             /* push content clear of the seam */
 }
 .diag-sec[data-top="flat"] { margin-top: 0; padding-top: 0; }
 .diag-sec::before {
 content: "";
 position: absolute;
 z-index: -1;
 inset: 0;
 left: 50%;
 width: 100vw;                           /* full-bleed seam, edge to edge */
 transform: translateX(-50%);
 clip-path: polygon(0 var(--diag-h), 100% 0, 100% 100%, 0 100%);
 }
 .diag-sec[data-dir="left"]::before {
 clip-path: polygon(0 0, 100% var(--diag-h), 100% 100%, 0 100%);
 }
 .diag-sec[data-top="flat"]::before { clip-path: none; }

 /* band tones */
 .diag-sec[data-fill="canvas"]::before {
 background-color: #f8fafc;
 background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
 background-size: 18px 18px;
 }
 .diag-sec[data-fill="tint"]::before  { background: #e9eef4; }
 .diag-sec[data-fill="white"]::before { background: #ffffff; }
 .diag-sec[data-fill="slate"]::before { background: #0f172a; }
 /* static dark band (no animated layers) - used by the dark content zones so
 only the hero + final CTA carry the live aurora. Kills the multi-layer flicker. */
 .diag-sec[data-fill="ink"]::before {
 background:
 radial-gradient(120% 120% at 72% -10%, rgba(40,104,133,0.55) 0%, rgba(40,104,133,0) 46%),
 radial-gradient(110% 130% at 12% 8%, rgba(67,56,202,0.32) 0%, rgba(67,56,202,0) 52%),
 linear-gradient(172deg, #0c1a2e 0%, #0f2138 52%, #0b1626 100%);
 }

 /* footer, when it caps the stack, drops its own top rule + margin */
 .diag-sec > footer { margin-top: 0; border-top: 0; }

 @media (max-width: 760px) { .diag-sec { --diag-h: 52px; } }

 /* FOOTER */
 footer { margin-top: 80px; padding: 60px 0 40px; border-top: 1px solid var(--hair); }
 .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
 .footer-grid .word {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 18px;
 color: var(--slate-900);
 letter-spacing: -0.01em;
 }
 .footer-links { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
 .footer-links a { font-size: 13px; color: var(--slate-600); transition: color 150ms; }
 .footer-links a:hover { color: var(--slate-900); }
 .footer-base {
 margin-top: 48px;
 padding-top: 24px;
 border-top: 1px solid var(--hair);
 display: flex; justify-content: space-between;
 font-family: var(--font-mono);
 font-size: 11px;
 color: var(--slate-400);
 letter-spacing: 0.04em;
 }
 @media (max-width: 560px) { .footer-base { flex-direction: column; gap: 8px; } }

 /* ─────────────────────────────────────────────────────────────
    BALANCE LAYER - the services-led framework woven into the
    product landing. Phase spine (Discover · Mirror · Transform ·
    Observe) + Governance, two-track phase cards, and the why /
    outcomes / industries trust block. Tokens shared with
    colors_and_type.css; no new colours invented.
    ───────────────────────────────────────────────────────────── */
 :root{
 --ph-discover:#289F85;
 --ph-mirror:hsl(195 68% 42%);
 --ph-transform:hsl(215 64% 50%);
 --ph-observe:hsl(245 58% 56%);
 }
 /* hero phase spine, on the dark aurora */
 .phase-line{ font-family:var(--font-display); font-weight:500; font-size:clamp(16px,1.9vw,21px); letter-spacing:-0.01em; line-height:1.5; color:rgba(226,232,240,0.94); margin:4px 0 22px; }
 .phase-line .ph{ white-space:nowrap; }
 .phase-line .sep{ color:rgba(226,232,240,0.34); margin:0 8px; }
 .phase-line .gov{ color:#5eead4; font-weight:700; }
 .phase-line .small{ font-size:0.8em; color:rgba(226,232,240,0.6); }
 /* dual hero CTA - services-first solid + product gradient play */
 .zone-hero .book-cta{ background:#ffffff; color:var(--slate-900); border:1px solid #ffffff; box-shadow:0 10px 28px -12px rgba(2,8,23,0.6); }
 .zone-hero .book-cta:hover{ background:rgba(255,255,255,0.92); transform:translateY(-1px); }
 .zone-hero .book-cta svg{ width:18px; height:18px; stroke-width:1.8; }

 /* ── THE FRAMEWORK - phase flow wrapped by a governance frame ── */
 .fw-stage{ position:relative; border-radius:0; padding:40px 24px 0; margin:18px 0 64px; background:transparent;
 border:0; box-shadow:none; }
 .fw-gov-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
 padding-bottom:22px; margin-bottom:34px; border-bottom:1px solid var(--hair); }
 .fw-gov-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 11px; border-radius:9999px;
 background:var(--slate-900); color:#fff; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }
 .fw-gov-badge svg{ width:13px; height:13px; stroke-width:1.8; color:#5eead4; }
 .fw-gov-cap{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.04em; color:var(--slate-400); }
 .fw-rail{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); }
 .fw-rail::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:28px; height:2px;
 background:linear-gradient(to right, var(--ph-discover), var(--ph-mirror), var(--ph-transform), var(--ph-observe));
 opacity:0.4; border-radius:2px; }
 @media (max-width:720px){ .fw-rail{ grid-template-columns:repeat(2,1fr); row-gap:34px; } .fw-rail::before{ display:none; } }
 @media (max-width:420px){ .fw-rail{ grid-template-columns:1fr; } }
 .fw-stop{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 8px; }
 .fw-tile{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
 background:color-mix(in srgb, var(--c) 11%, #fff); border:1.5px solid color-mix(in srgb, var(--c) 30%, transparent);
 box-shadow:0 1px 2px rgba(15,23,42,0.05); }
 .fw-tile svg{ width:24px; height:24px; stroke-width:1.7; color:var(--c); }
 .fw-name{ margin-top:20px; font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--slate-900); letter-spacing:-0.012em; }
 .fw-cap{ margin-top:6px; font-size:13px; line-height:1.4; color:var(--slate-500); }

 /* ── PHASE CARDS - two delivery tracks as chips ── */
 .phase-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 40px; max-width:1104px; margin:8px auto 0; }
 /* Two columns, two rows on every desktop/tablet width; single column only on narrow phones. */
 @media (max-width:880px){ .phase-grid{ grid-template-columns:1fr; gap:28px; } }
 .pcard{ position:relative; padding:26px 28px; border-radius:18px; background:#fff;
 border:1px solid rgba(15,23,42,0.08);
 box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 18px 42px -32px rgba(15,23,42,0.28);
 transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
 .pcard:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 28px 52px -30px rgba(15,23,42,0.32); }
 .pcard-head{ display:flex; align-items:center; gap:13px; }
 .pcard-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none;
 background:color-mix(in srgb, var(--c) 11%, white); border:1px solid color-mix(in srgb, var(--c) 24%, transparent); }
 .pcard-ic svg{ width:22px; height:22px; stroke-width:1.7; color:var(--c); }
 .pcard-titles{ display:flex; flex-direction:column; gap:3px; min-width:0; }
 .pcard-name{ font-family:var(--font-display); font-size:23px; font-weight:700; color:var(--slate-900); letter-spacing:-0.015em; line-height:1; }
 .pcard-mantra{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--c); }
 .pcard-step{ margin-left:auto; align-self:flex-start; font-family:var(--font-mono); font-size:12px; font-weight:600;
 color:color-mix(in srgb, var(--c) 50%, var(--slate-300)); flex:none; }
 .pcard-desc{ margin:15px 0 0; font-size:13.5px; line-height:1.55; color:var(--slate-600); }
 .pcard-tracks{ margin-top:20px; padding-top:18px; border-top:1px solid var(--hair); display:grid; grid-template-columns:1fr 1fr; gap:24px; }
 .track{ display:flex; flex-direction:column; gap:10px; }
 .track--service{ }
 .track-label{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:9.5px;
 letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-500); }
 .track-label .cd{ width:7px; height:7px; border-radius:50%; flex:none; }
 .track--product .track-label .cd{ background:var(--brand-primary); }
 .track--service .track-label .cd{ background:var(--slate-400); }
 .chips{ display:flex; flex-wrap:wrap; gap:7px; }
 .chips .chip{ font-size:12px; line-height:1; font-weight:500; padding:7px 11px; border-radius:8px; }
 .track--product .chip{ background:rgba(40,159,133,0.09); color:hsl(165 52% 27%); border:1px solid rgba(40,159,133,0.18); }
 .track--service .chip{ background:#fff; color:var(--slate-600); border:1px solid var(--slate-200); }
 .track-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
 .track-list li{ display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.3; color:var(--slate-700); }
 .track-list li .m{ flex:none; width:12px; height:12px; display:inline-flex; align-items:center; justify-content:center; color:var(--slate-400); }
 .track-list li .m svg{ width:12px; height:12px; }
 .track--product .track-list li .m{ color:var(--brand-primary); }
 .track--service .track-list li .m{ color:var(--slate-400); }

 /* ── WHY HUBSCOPE - capability grid ── */
 .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
 @media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
 @media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }
 .wcard{ padding:26px; border-radius:16px; background:#fff;
 border:1px solid rgba(15,23,42,0.08);
 box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 16px 38px -32px rgba(15,23,42,0.24);
 display:flex; flex-direction:column;
 transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
 .wcard:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 24px 46px -30px rgba(15,23,42,0.30); }
 .wcard-head{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
 .wcard-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none;
 background:rgba(40,159,133,0.10); border:1px solid rgba(40,159,133,0.16); } .wcard-ic svg{ width:20px; height:20px; stroke-width:1.7; color:var(--brand-primary); }
 .wcard h3{ font-family:var(--font-display); font-size:18.5px; font-weight:600; color:var(--slate-900); letter-spacing:-0.012em; line-height:1.18; margin:0; }
 .wcard p{ font-size:13.5px; line-height:1.6; color:var(--slate-600); margin:0; }

 /* ──── Contact form (sits on the aurora banner like a wcard) ──── */
 .contact-form{ margin:44px auto 0; max-width:640px; text-align:left;
 padding:30px; border-radius:16px; background:#fff;
 border:1px solid rgba(15,23,42,0.08);
 box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 16px 38px -32px rgba(15,23,42,0.24); }
 .contact-form h3{ font-family:var(--font-display); font-size:20px; font-weight:600;
 color:var(--slate-900); letter-spacing:-0.012em; margin:0 0 4px; }
 .contact-form .sub{ font-size:13.5px; color:var(--slate-600); margin:0 0 20px; }
 .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
 @media (max-width:600px){ .cf-row{ grid-template-columns:1fr; } }
 .cf-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
 .cf-field label{ font-size:12.5px; font-weight:600; color:var(--slate-700); }
 .cf-field label .opt{ font-weight:400; color:var(--slate-400); }
 .cf-field input, .cf-field textarea{
 font-family:var(--font-sans); font-size:14px; color:var(--slate-900);
 padding:10px 12px; border-radius:10px; border:1px solid rgba(15,23,42,0.14);
 background:#fff; outline:none; transition:border-color .2s, box-shadow .2s; }
 .cf-field input:focus, .cf-field textarea:focus{
 border-color:var(--brand-primary);
 box-shadow:0 0 0 3px rgba(40,159,133,0.16); }
 .cf-field textarea{ min-height:120px; resize:vertical; }
 .cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
 .cf-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px; }
 .cf-alt{ font-size:12.5px; color:var(--slate-500); }
 .cf-alt a{ color:var(--brand-primary); font-weight:600; }
 .cf-status{ margin:12px 0 0; font-size:13.5px; display:none; }
 .cf-status.ok{ display:block; color:var(--brand-primary); font-weight:600; }
 .cf-status.err{ display:block; color:#dc2626; }
 .contact-form button[disabled]{ opacity:0.6; cursor:default; }
 /* The aurora banner paints its paragraphs near-white; the form card is a
    light surface, so its copy must win that cascade. */
 .cta-banner.aurora .contact-form p.sub{ color:var(--slate-600); }
 .cta-banner.aurora .contact-form p.cf-status.ok{ color:var(--brand-primary); }
 .cta-banner.aurora .contact-form p.cf-status.err{ color:#dc2626; }

 /* ════ FRAMEWORK on the dark aurora surface (matches the stats panel) ════ */
 .zone-dk{ color:#e2e8f0; }
 .zone-dk .eyebrow-mono{ color:#5eead4; }
 .zone-dk .section-head h2{ color:#fff; }
 .zone-dk .section-head h2 strong{ color:#34d8b4; }
 .zone-dk .lede{ color:rgba(226,232,240,0.82); }
 .zone-dk .fw-stage{ background:transparent; border:0; box-shadow:none; backdrop-filter:none; }
 .zone-dk .fw-gov-head{ border-bottom-color:rgba(255,255,255,0.12); }
 .zone-dk .fw-gov-badge{ background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); color:#fff; }
 .zone-dk .fw-gov-cap{ color:rgba(148,163,184,0.82); }
 .zone-dk .fw-rail::before{ background:rgba(148,163,184,0.26); opacity:1; }
 .zone-dk .fw-tile{ border:1px solid rgba(148,163,184,0.22);
 background:#13203a;
 box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); }
 .zone-dk .fw-tile svg{ color:rgba(203,213,225,0.82); }
 .zone-dk .fw-name{ color:#fff; }
 .zone-dk .fw-cap{ color:rgba(226,232,240,0.72); }
 .zone-dk .pcard{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.10);
 box-shadow:0 26px 56px -34px rgba(2,8,23,0.70), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter:blur(10px); }
 .zone-dk .pcard:hover{ box-shadow:0 34px 66px -32px rgba(2,8,23,0.80), inset 0 1px 0 rgba(255,255,255,0.09); }
 .zone-dk .pcard-ic{ background:rgba(255,255,255,0.06); border-color:color-mix(in srgb, var(--c) 50%, transparent); }
 .zone-dk .pcard-ic svg{ color:color-mix(in srgb, var(--c) 72%, white); }
 .zone-dk .pcard-name{ color:#fff; }
 .zone-dk .pcard-mantra{ color:color-mix(in srgb, var(--c) 58%, white); }
 .zone-dk .pcard-step{ color:rgba(148,163,184,0.62); }
 .zone-dk .pcard-desc{ color:rgba(226,232,240,0.78); }
 .zone-dk .pcard-tracks{ border-top-color:rgba(255,255,255,0.12); }
 .zone-dk .track--service{ }
 .zone-dk .track-label{ color:rgba(148,163,184,0.88); }
 .zone-dk .track--product .track-label .cd{ background:#34d8b4; }
 .zone-dk .track--service .track-label .cd{ background:rgba(148,163,184,0.85); }
 .zone-dk .track--product .chip{ background:rgba(52,216,180,0.13); color:#8af0d8; border:1px solid rgba(52,216,180,0.30); }
 .zone-dk .track--service .chip{ background:rgba(255,255,255,0.06); color:rgba(226,232,240,0.82); border:1px solid rgba(255,255,255,0.16); }
 .zone-dk .track-list li{ color:rgba(226,232,240,0.88); }
 .zone-dk .track--product .track-list li .m{ color:#34d8b4; }
 .zone-dk .track--service .track-list li .m{ color:rgba(148,163,184,0.7); }

 /* engagement (how it works) on dark */
 .zone-dk .how-sub{ color:rgba(226,232,240,0.80); }
 .zone-dk .fly-stage{ border-color:rgba(255,255,255,0.12);
 box-shadow:0 34px 70px -36px rgba(2,8,23,0.74), inset 0 1px 0 rgba(255,255,255,0.08); }
 .zone-dk .fly-play{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); color:#fff; box-shadow:none; }
 .zone-dk .fly-play:hover{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.30); color:#fff; }
 .zone-dk .fly-scrub-track{ background:rgba(255,255,255,0.16); }
 .zone-dk .fly-scrub-fill{ background:#fff; }
 .zone-dk .fly-scrub-fill::after{ box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(2,8,23,0.5); }
 .zone-dk .fly-time{ color:rgba(148,163,184,0.85); }
 .zone-dk .fc-index{ color:rgba(148,163,184,0.45); }
 .zone-dk .fly-chapter[data-active="true"] .fc-index{ color:#fff; }
 .zone-dk .fc-title{ color:rgba(226,232,240,0.92); }
 .zone-dk .fly-chapter[data-active="true"] .fc-title{ color:#fff; }
 .zone-dk .fc-desc{ color:rgba(148,163,184,0.85); }
 .zone-dk .fly-chapter[data-active="true"] .fc-desc{ color:rgba(226,232,240,0.86); }
 .zone-dk .fly-card:hover{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.12); -webkit-backdrop-filter:blur(12px) saturate(118%); backdrop-filter:blur(12px) saturate(118%); }
 .zone-dk .fly-chapter[data-active="true"] .fly-card{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14);
 box-shadow:0 26px 56px -34px rgba(2,8,23,0.7), inset 0 1px 0 rgba(255,255,255,0.07); }

 /* why grid on dark */
 .zone-dk .wcard, .zone-final .wcard{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.10);
 box-shadow:0 26px 56px -34px rgba(2,8,23,0.70), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter:blur(10px); text-align:left; }
 .zone-dk .wcard:hover, .zone-final .wcard:hover{ box-shadow:0 34px 66px -32px rgba(2,8,23,0.80), inset 0 1px 0 rgba(255,255,255,0.09); }
 .zone-dk .wcard-ic, .zone-final .wcard-ic{ background:rgba(52,216,180,0.12); border:1px solid rgba(52,216,180,0.26); }
 .zone-dk .wcard-ic svg, .zone-final .wcard-ic svg{ color:#34d8b4; }
 .zone-dk .wcard h3, .zone-final .wcard h3{ color:#fff; }
 .zone-dk .wcard p, .zone-final .wcard p{ color:rgba(226,232,240,0.78); }
 /* final-zone cards adopt the CTA-button blue language, dialled back from the brightest */
 .zone-final .wcard-ic{ background:rgba(59,130,246,0.12); border:1px solid rgba(96,165,250,0.28); }
 .zone-final .wcard-ic svg{ color:#62a0f7; }
 .zone-final .cta-banner.aurora h2 strong{ color:#62a0f7; }
 .zone-final .cta-banner.aurora .eyebrow-mono{ color:#62a0f7; }