.cx-root{
    --bg: #050B1F;
    --bg-rgb: 5 11 31;
    --fg: rgba(255,255,255,0.94);
    --fg-rgb: 245 248 255;
    --muted: rgba(255,255,255,0.55);
    --faint: rgba(255,255,255,0.32);
    --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Very Good Voyages */
    --brand: #2A48DE;
    --brand-light: #3E63F0;
    --brand-dark: #1B2DB8;
    --brand-deeper: #101E72;
    --sunset: #F2A65A;
    --ai: #5E86FF;
  }
  :where(.cx-root), :where(.cx-root) *{ box-sizing:border-box; }
  :where(.cx-root) *{ margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html{ scroll-behavior:smooth; }
  .cx-root{ font-family:var(--font); color:var(--fg); background:var(--bg); overflow-x:clip; }
  /* house typography rule: no orphans or widows — headings balance,
     running text and lists avoid single-word last lines */
  :where(.cx-root) p, :where(.cx-root) li{ text-wrap:pretty; }
  :where(.cx-root) h2, :where(.cx-root) h3{ text-wrap:balance; }
  :where(.cx-root) button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }

  section.wall{
    position:relative; width:100%; height:100vh; height:100svh; overflow:hidden;
    /* Safari: composited drifting cells intermittently escape overflow:hidden —
       clip-path actually crops them. The fixed header lives OUTSIDE this
       section because clip-path would re-parent fixed descendants. */
    clip-path:inset(0);
    z-index:1;
    background:
      radial-gradient(ellipse 70% 60% at 20% 10%, rgba(42,72,222,0.20) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 85% 85%, rgba(242,166,90,0.08) 0%, transparent 60%),
      var(--bg);
    isolation:isolate; user-select:none; cursor:default;
  }

  /* ---------- Wall cells: simple module cards ---------- */
  .cell{
    position:absolute; top:0; left:0;
    pointer-events:none; will-change:transform;
    overflow:hidden; border-radius:6px;
    transform-origin:center center;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    opacity:0;
    background:#fafbfd; color:#10243a;
    box-shadow:0 10px 28px rgba(0,0,0,0.32), 0 2px 7px rgba(0,0,0,0.22);
    display:flex; align-items:center; justify-content:center;
  }
  /* ingredient cells: guest context + live signals mixed among the patterns,
     in the same chip vocabulary as the data-layer card below */
  /* ingredient cells float bare — styled like the lock-state data chips */
  .cell.ing{ background:transparent; box-shadow:none; overflow:visible; }
  .cell.ing::after{ display:none; }
  .cell .ing-chip{
    display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
    padding:10px 17px; border-radius:9999px;
    background:rgba(9,18,40,0.82);
    border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 10px 26px rgba(0,0,0,0.45),
               inset 0 1px 0 rgba(255,255,255,0.1),
               0 0 18px -6px var(--chip-c, #9AA4B2);
    font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.07em;
    text-transform:uppercase; color:rgba(255,255,255,0.92);
    --chip-c:#9AA4B2;
  }
  .cell .ing-chip i{
    display:block; width:7px; height:7px; border-radius:50%; flex:none;
    background:var(--chip-c);
    box-shadow:0 0 10px var(--chip-c), 0 0 0 2.5px rgba(255,255,255,0.14);
  }
  .ing-chip .sig-ic{ width:12px; height:12px; flex:none; }
  .lc-chip .sig-ic{ width:11px; height:11px; flex:none; }
  /* live signals: white with pink — a different species from preferences */
  .cell .ing-chip.sig{
    --chip-c:#5E86FF;
    background:rgba(255,255,255,0.96);
    border:1px solid rgba(94,134,255,0.32);
    color:#1D3AEA;
    box-shadow:0 10px 26px rgba(0,0,0,0.4), 0 0 18px -6px var(--chip-c);
  }
  /* the closer the plane, the higher it stacks (above the depth vignette) */
  .cell.sig-cell{ z-index:16; }
  .cell.ctx-cell{ z-index:18; }
  .cell.ctx-cell .ing-chip{ box-shadow:0 14px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 18px -6px var(--chip-c); }

  /* navy wash on every card — knocks the white wireframes back a register so
     the wall reads as backdrop, not content. Opaque overlay (no transparency),
     so overlapping cells never show through each other. This is the LIGHT
     register the intro plays at; the settle below darkens the whole wall */
  .cell::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:rgba(5,11,31,0.3);
  }
  /* the settle shade: one full-screen overlay faded in as the last know-beat
     lands, darkening every card and pill below it in a single composited
     opacity ramp. Sits above the chips (z-16/18) and below the lock dim
     (z-20). Cheap on purpose: animating each cell's wash (CSS transition or
     per-frame var) re-rasterizes hundreds of layers per frame and visibly
     hitched the payoff — fading ONE element's opacity never repaints cells */
  .wall-shade{
    position:absolute; inset:0; z-index:19; pointer-events:none;
    /* not a flat tint: a spotlight. The center (where the phone lands)
       keeps a touch more light than the old 0.35 wash, while the edges
       and corners fall toward black — calms the busy top without
       deadening the clearing. Still ONE composited opacity ramp. */
    background:radial-gradient(ellipse 70% 62% at 50% 47%,
      rgba(5,11,31,0.18) 0%,
      rgba(5,11,31,0.3) 42%,
      rgba(5,11,31,0.62) 74%,
      rgba(5,11,31,0.8) 100%);
    opacity:0;
  }
  /* "there's more down here": an aurora pooled on the hero's bottom edge,
     faded in once the intro settles. Tuned to the first section's waveform
     palette (blue + pink) so the hero's base glow and the play-spot glow read
     as the same light across the seam (was violet-forward; matched for the
     seamless handoff). */
  .wall-aura{
    position:absolute; left:-8%; right:-8%; bottom:0; height:220px;
    z-index:19; pointer-events:none; opacity:0;
    background:
      radial-gradient(ellipse 42% 60% at 50% 102%, rgba(94,134,255,0.5) 0%, rgba(94,134,255,0) 70%),
      radial-gradient(ellipse 72% 46% at 50% 106%, rgba(42,72,222,0.30) 0%, rgba(42,72,222,0) 72%),
      radial-gradient(ellipse 24% 32% at 50% 103%, rgba(94,134,255,0.20) 0%, rgba(94,134,255,0) 70%);
    filter:blur(6px);
    transition:opacity 2.2s ease;
  }
  .wall-aura.on{ opacity:1; }
  /* depth vignette: the wall recedes toward the browser edges, and falls off
     hardest at the top — the brightest modules sit behind nothing up there,
     so they get pushed deepest into shadow. Static gradient layers: zero
     per-frame cost, unlike blur/backdrop-filter over an animated wall */
  .wall-vignette{
    position:absolute; inset:0; z-index:12; pointer-events:none;
    background:
      linear-gradient(to bottom,
        rgba(5,11,31,0.66),
        rgba(5,11,31,0.3) 28%,
        transparent 52%,
        transparent 72%,
        rgba(5,11,31,0.6) 88%,
        rgba(5,11,31,1) 100%),   /* bottom dissolves the cells into solid bg — no hard seam */
      radial-gradient(ellipse 74% 70% at 50% 50%,
        transparent 26%,
        rgba(5,11,31,0.43) 60%,
        rgba(5,11,31,0.78) 100%);
  }
  .cell .mframe{
    border-radius:4px; overflow:hidden; background:#fff; position:relative;
    box-shadow:0 2px 10px rgba(12,30,52,0.16);
  }

  /* data layer: the guest's data floating around/behind the phone after lock.
     Sits ABOVE the dim overlay so chips and the halo read crisp. */
  .data-layer{ position:absolute; inset:0; z-index:25; pointer-events:none; }

  /* glow shadow emanating from behind the locked phone — depth + darkens
     the wall directly behind the chips and nav chrome */
  .phone-halo{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    border-radius:50%; pointer-events:none;
    opacity:0; transition:opacity 0.55s ease;
  }
  .phone-halo.on{ opacity:1; }
  .halo-layer{
    position:absolute; inset:0; border-radius:50%;
    opacity:0; transition:opacity 0.6s ease;
  }
  .chip-pos{ position:absolute; width:0; height:0; will-change:transform; -webkit-font-smoothing:antialiased; animation:chipBob var(--bobDur,5s) ease-in-out var(--bobDelay,0s) infinite; }
  @keyframes chipBob{ 0%,100%{ transform:translate3d(0,-3px,0) rotate(0.02deg); } 50%{ transform:translate3d(0,3px,0) rotate(-0.02deg); } }
  /* moment chips in the lock view: white-pink species, icon instead of dot */
  .data-chip.sig{
    background:rgba(255,255,255,0.95);
    border-color:rgba(94,134,255,0.34);
    color:#1D3AEA;
  }
  .data-chip .sig-ic{ width:12px; height:12px; flex:none; }
  .data-chip{
    position:absolute; top:-17px;
    display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
    padding:9px 16px; border-radius:9999px;
    /* NO backdrop-filter here: it re-samples the backdrop at integer pixels
       every frame, which made the bobbing chips judder 1px against their own
       glass. Slightly more opaque ink replaces the (invisible) blur. */
    background:rgba(9,18,40,0.92);
    border:1px solid rgba(255,255,255,0.24);
    box-shadow:0 10px 28px rgba(0,0,0,0.5),
               inset 0 1px 0 rgba(255,255,255,0.1),
               0 0 20px -6px var(--chip-c, var(--ai));
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.07em;
    text-transform:uppercase; color:rgba(255,255,255,0.92);
    animation:chipIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
    transform-origin:center;
  }
  .data-chip i{
    display:block; width:7px; height:7px; border-radius:50%; flex:none;
    background:var(--chip-c, var(--ai));
    box-shadow:0 0 10px var(--chip-c, var(--ai)), 0 0 0 2.5px rgba(255,255,255,0.14);
  }

  /* dotted connectors: the data streaming into the phone */
  .data-lines{ position:absolute; inset:0; width:100%; height:100%; transition:opacity 0.3s ease; }
  .data-lines line{
    stroke-width:1.5; stroke-linecap:round; fill:none;
    stroke-dasharray:2 7;
    opacity:0;
    animation:lineFlow 1.4s linear infinite, lineIn 0.5s ease-out both;
  }
  @keyframes lineFlow{ to{ stroke-dashoffset:-9; } }
  @keyframes lineIn{ from{ opacity:0; } to{ opacity:0.6; } }
  @keyframes chipIn{
    0%{ opacity:0; transform:scale(0.4) rotate(-2deg); filter:blur(6px); }
    32%{ opacity:1; transform:scale(1.06) rotate(0.5deg); filter:blur(0px); }
    44%{ opacity:0.3; }
    56%{ opacity:1; }
    70%{ opacity:0.65; }
    100%{ opacity:1; transform:scale(1) rotate(0deg); }
  }
  .data-chip.out{ animation:chipOut 0.3s ease-in both; }
  @keyframes chipOut{ to{ opacity:0; transform:scale(0.7); filter:blur(4px); } }

  /* electrify: energy rings at lock-in */
  .energy-ring{
    position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none;
    border:1.5px solid var(--ring-c, var(--ai));
    box-shadow:0 0 24px var(--ring-c, var(--ai)), inset 0 0 18px rgba(255,255,255,0.08);
    animation:ringOut 0.75s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  @keyframes ringOut{
    0%{ transform:translate(-50%,-50%) scale(0.4); opacity:0.95; }
    100%{ transform:translate(-50%,-50%) scale(1.7); opacity:0; }
  }
  /* one-time click affordance: comic click lines off the corner + a small
     pill under the phone. Removed forever after the first real click. */
  .click-burst{
    position:absolute; top:-26px; right:-32px; width:40px; height:40px;
    z-index:9; pointer-events:none; opacity:0;
    filter:drop-shadow(0 0 7px rgba(255,255,255,0.55));
  }
  .click-burst svg{ width:100%; height:100%; }
  .click-hint{
    position:absolute; top:100%; left:50%; translate:-50% 0;
    margin-top:14px; z-index:9; pointer-events:none; opacity:0;
  }
  .ch-inner{
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    font-family:var(--mono); font-size:9.5px; font-weight:500;
    letter-spacing:0.18em; text-transform:uppercase;
    color:#fff;
    background:var(--ai); border:1px solid rgba(255,255,255,0.22);
    border-radius:9999px; padding:8px 14px;
    box-shadow:0 10px 28px rgba(94,134,255,0.5), 0 4px 12px rgba(0,0,0,0.3);
    animation:hintBob 2.4s ease-in-out infinite;
  }
  .ch-inner svg{ width:11px; height:11px; flex:none; }
  @keyframes hintBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }

  .featured-frame.zap .phone{ animation:phoneZap 0.7s ease-out; }
  @keyframes phoneZap{
    0%{ filter:brightness(1); }
    12%{ filter:brightness(1.22) saturate(1.15); }
    24%{ filter:brightness(0.95); }
    38%{ filter:brightness(1.14); }
    55%{ filter:brightness(0.99); }
    100%{ filter:brightness(1); }
  }
  .featured-frame.expanded .phone{
    box-shadow:inset 0 0 0 calc(var(--u)*1) rgba(255,255,255,0.14),
               0 44px 120px rgba(0,0,0,0.78),
               0 6px 24px rgba(0,0,0,0.5),
               0 0 95px var(--halo-c, rgba(42,72,222,0.30));
    transition:box-shadow 0.6s ease;
  }

  /* the magic render-in: luminous sweep + bloom as a slot resolves */
  .render-sweep{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
  .render-sweep::before{
    content:''; position:absolute; top:-22%; bottom:-22%; left:0; width:55%;
    background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.22) 62%, transparent 100%);
    filter:blur(5px);
    animation:sweepMove 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes sweepMove{ from{ transform:translateX(-115%); } to{ transform:translateX(215%); } }
  .slot-inner.bloom, .m-tabbar.bloom{ animation:slotBloom 0.55s ease-out both; }
  @keyframes slotBloom{
    0%{ opacity:0.15; filter:blur(7px) saturate(1.7) brightness(1.3); }
    55%{ opacity:1; filter:blur(1px) saturate(1.2) brightness(1.1); }
    100%{ opacity:1; filter:blur(0px) saturate(1) brightness(1); }
  }

  /* sits ABOVE the wall, the data layer and the phone (anchor z-30) so the
     hero copy always reads — but below the copy itself (z-35) */
  .hero-gradient{
    position:absolute; inset:0; z-index:32; pointer-events:none;
    transition:opacity 0.3s ease;
    background:radial-gradient(ellipse 76% 62% at 0% 100%,
      rgb(var(--bg-rgb) / 1) 0%,
      rgb(var(--bg-rgb) / 0.96) 26%,
      rgb(var(--bg-rgb) / 0.78) 44%,
      rgb(var(--bg-rgb) / 0.4) 62%,
      transparent 82%);
  }
  .dim{
    position:absolute; inset:0; z-index:20;
    background:rgb(var(--bg-rgb) / 0.74);   /* deep enough that wall pills never compete with the lock chips */
    opacity:0; pointer-events:none; transition:opacity 0.4s ease;
  }
  .dim.on{ opacity:1; pointer-events:auto; }
  /* locked state owns the stage: hero copy and the scroll cue step aside
     (the cue's opacity is gsap-inline, hence the !important) */
  section.wall:has(.dim.on) .hero{ opacity:0; transition:opacity 0.3s ease; }
  /* the gradient backs the hero copy — both step aside while a guest is locked */
  section.wall:has(.dim.on) .hero-gradient{ opacity:0; }
  section.wall:has(.dim.on) .scroll-cue{ opacity:0 !important; pointer-events:none; }

  /* ---------- Featured anchor: the live phone ---------- */
  .featured-anchor{
    position:absolute; top:0; left:0; z-index:30;
    pointer-events:none; will-change:transform; opacity:0;
  }
  .featured-frame{
    position:absolute; pointer-events:auto;
    transform:translate(-50%,-50%);
    transition:width 0.25s cubic-bezier(0.16,1,0.3,1), height 0.25s cubic-bezier(0.16,1,0.3,1);
    perspective:1050px; perspective-origin:50% 50%;
  }
  .flipper{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d; will-change:transform;
  }
  /* real thickness: front and back sit at ±half-depth, metal rails between.
     Rails are inset to the straight section of the edge so they never poke
     past the rounded corners. */
  .flipper .phone{ transform:translateZ(calc(var(--u)*8)); }
  .flipper .phone::after{
    content:''; position:absolute; inset:0; z-index:60; pointer-events:none;
    border-radius:calc(var(--u)*31);
    background:rgba(3,8,18,var(--turn-shade,0));
  }
  .phone-side{
    position:absolute; top:calc(var(--u)*30); bottom:calc(var(--u)*30);
    width:calc(var(--u)*16); pointer-events:none;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    background:linear-gradient(180deg,
      #46506a 0%, #1a212f 16%, #2a3447 38%, #232c3e 62%, #161d2b 84%, #3d4760 100%);
    filter:brightness(calc(1 + var(--turn-shade, 0) * 1.6));
  }
  .phone-side.ps-l{ left:0; transform-origin:left center; transform:translateZ(calc(var(--u)*8)) rotateY(90deg); }
  .phone-side.ps-r{ right:0; transform-origin:right center; transform:translateZ(calc(var(--u)*8)) rotateY(-90deg); }
  /* the moving light: a specular band sweeping across the faces with the turn.
     Only lit while spinning — never parked on the resting phone. The container
     clips to the face shape so the band never paints outside the phone. */
  .face-sheen{
    position:absolute; inset:0;
    z-index:65; pointer-events:none;
    border-radius:calc(var(--u)*31); overflow:hidden;
    opacity:0; transition:opacity 0.25s ease;
  }
  .face-sheen::before{
    content:''; position:absolute; top:0; bottom:0; left:-30%; width:160%;
    background:linear-gradient(100deg,
      transparent 38%, rgba(255,255,255,0.13) 48%, rgba(170,205,255,0.07) 53%, transparent 64%);
    transform:translateX(var(--sheen-x, -80%));
  }
  .flipper.lit .face-sheen{ opacity:1; }

  /* phone shell — original carousel system, no status bar.
     --u is inherited (set on the frame, or inline for static phones)
     so the back face shares the same grid. */
  .phone{
    width:100%; height:100%;
    padding:calc(var(--u)*5);
    background:linear-gradient(160deg, #1a2638, #060c18 60%);
    border-radius:calc(var(--u)*31);
    box-shadow:inset 0 0 0 calc(var(--u)*1) rgba(255,255,255,0.14),
               0 30px 80px rgba(0,0,0,0.6), 0 6px 22px rgba(0,0,0,0.4);
    position:relative;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  /* the chassis back — visible mid-spin */
  .phone-back{
    position:absolute; inset:0;
    transform:rotateY(180deg) translateZ(calc(var(--u)*6.5));
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:calc(var(--u)*31);
    background:
      linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.05) 46%, transparent 62%),
      linear-gradient(160deg, #232c3e, #0b1120 65%);
    box-shadow:inset 0 0 0 calc(var(--u)*1) rgba(255,255,255,0.12),
               0 30px 80px rgba(0,0,0,0.6), 0 6px 22px rgba(0,0,0,0.4);
    overflow:hidden;
  }
  .pb-cam{
    position:absolute; top:calc(var(--u)*9); left:calc(var(--u)*9);
    width:calc(var(--u)*40); height:calc(var(--u)*40);
    border-radius:calc(var(--u)*11);
    background:rgba(13,19,32,0.9);
    box-shadow:inset 0 0 0 calc(var(--u)*1) rgba(255,255,255,0.1),
               0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,0.5);
  }
  .pb-cam s{
    position:absolute; display:block;
    width:calc(var(--u)*14); height:calc(var(--u)*14); border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #3a4760, #070b14 65%);
    box-shadow:inset 0 0 0 calc(var(--u)*1.6) rgba(255,255,255,0.13),
               inset 0 0 calc(var(--u)*3) rgba(0,0,0,0.8);
  }
  .pb-cam s:nth-child(1){ top:calc(var(--u)*4); left:calc(var(--u)*4); }
  .pb-cam s:nth-child(2){ top:calc(var(--u)*4); right:calc(var(--u)*4); }
  .pb-cam s:nth-child(3){ bottom:calc(var(--u)*4); left:calc(var(--u)*4); }
  .pb-cam i{
    position:absolute; right:calc(var(--u)*7); bottom:calc(var(--u)*7);
    width:calc(var(--u)*4.5); height:calc(var(--u)*4.5); border-radius:50%;
    background:radial-gradient(circle at 40% 40%, #ffeebc, #b8923e 70%);
    opacity:0.85;
  }
  .pb-mark{
    position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
    width:calc(var(--u)*64); opacity:0.22;
  }
  .pb-mark img{ width:100%; height:auto; display:block; filter:brightness(0) invert(1); }
  .phone-back::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    border-radius:calc(var(--u)*31);
    background:rgba(3,8,18,var(--turn-shade,0));
  }
  .mock{
    /* 180×381 inner screen → real-phone proportions (iPhone ≈ 0.49 w/h) */
    width:calc(var(--u)*180); height:calc(var(--u)*381);
    background:#fafbfd; color:#10243a; overflow:hidden;
    display:flex; flex-direction:column;
    border-radius:calc(var(--u)*26); position:relative;
    /* Safari: composited video/img layers escape overflow:hidden at rounded
       corners — clip-path actually crops them */
    clip-path:inset(0 round calc(var(--u)*26));
  }
  .island{
    position:absolute; top:calc(var(--u)*8.5); left:50%; transform:translateX(-50%);
    width:calc(var(--u)*38); height:calc(var(--u)*8); border-radius:calc(var(--u)*99);
    background:#060c18; z-index:6; pointer-events:none;
  }
  .slot{ position:relative; flex:none; overflow:hidden; clip-path:inset(0); }
  .slot-hero{ height:calc(var(--u)*112); }
  .slot-journey{ height:calc(var(--u)*76); background:#fafbfd; }
  .slot-onboard{ height:calc(var(--u)*76); background:#f2f6fb; }
  .slot-proof{ height:calc(var(--u)*60); background:#fafbfd; }
  .slot-cta{ height:calc(var(--u)*33); }
  .slot-inner{ position:absolute; inset:0; }
  .m-tabbar{
    flex:1; background:#fff; border-top:calc(var(--u)*1) solid #e6ebf3;
    display:flex; align-items:center; justify-content:space-around;
    padding:0 calc(var(--u)*10);
  }
  .tab{ text-align:center; }
  .tab s{
    display:block; width:calc(var(--u)*6); height:calc(var(--u)*6);
    border-radius:calc(var(--u)*2); background:#c3cedd; margin:0 auto calc(var(--u)*2);
  }
  .tab i{ display:block; width:calc(var(--u)*11); height:calc(var(--u)*2); border-radius:calc(var(--u)*1); background:#dbe2ec; margin:0 auto; }
  .tab.on s{ border-radius:50%; background:var(--ai); }
  .tab.on i{ background:#9fb0c6; }

  /* slot crossfade */
  .slot-inner{ transition:opacity 0.18s ease, transform 0.18s ease; }
  .slot-inner.swap-out{ opacity:0; transform:translateY(calc(var(--u)*4)); }
  .slot-inner.swap-in{ opacity:0; transform:translateY(calc(var(--u)*-4)); }

  /* ---------- Module primitives (original carousel language, Voyages tokens) ---------- */
  .mcell{ --u:1px; position:relative; width:100%; height:100%; background:#fff; color:#10243a; overflow:hidden; }
  .ln{ display:block; height:calc(var(--u)*3); border-radius:calc(var(--u)*1.5); background:#dde4ef; }
  .ph{
    display:block; border-radius:calc(var(--u)*3.5);
    background:linear-gradient(135deg, #cfe0f0, #a9c6e2 55%, #8fb4d8);
    position:relative; overflow:hidden;
  }
  .ph::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:36%;
    background:linear-gradient(180deg, rgba(42,72,222,0) 0%, rgba(42,72,222,0.30) 100%);
  }
  .mt{ font-size:calc(var(--u)*5.8); font-weight:700; letter-spacing:-0.01em; margin-bottom:calc(var(--u)*5); }
  .pad{ height:100%; padding:calc(var(--u)*8) calc(var(--u)*11); }

  .mh{ height:100%; padding:calc(var(--u)*8) calc(var(--u)*11) calc(var(--u)*9); color:#fff; position:relative; overflow:hidden; }
  .mock .mh.safe{ padding-top:calc(var(--u)*19); }

  /* rich mode: real media renders into the locked screen */
  .rt-sub{ font-size:calc(var(--u)*4.4); color:rgba(255,255,255,0.8); margin-top:calc(var(--u)*1.5); white-space:nowrap; }
  .rt{ flex:1; font-size:calc(var(--u)*4.4); font-weight:500; color:#41607f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rt-b{ font-size:calc(var(--u)*4.4); font-weight:700; color:#10243a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rt-m{ font-size:calc(var(--u)*3.9); color:#7e92a9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:calc(var(--u)*0.8); }
  .rt-aux{ font-family:var(--mono); font-size:calc(var(--u)*4); color:#7e92a9; white-space:nowrap; }
  .rt-w{ font-size:calc(var(--u)*4.2); color:rgba(255,255,255,0.8); white-space:nowrap; }
  .rt-ph{ flex:1; font-size:calc(var(--u)*4.6); color:#8aa0b8; white-space:nowrap; overflow:hidden; }
  .ph-lab{
    position:absolute; left:calc(var(--u)*5); bottom:calc(var(--u)*4); z-index:2;
    font-size:calc(var(--u)*5); font-weight:700; color:#fff; font-style:normal; letter-spacing:-0.01em;
    text-shadow:0 calc(var(--u)*0.5) calc(var(--u)*1.5) rgba(0,0,0,0.55); white-space:nowrap;
  }
  .map-chip{
    position:absolute; top:calc(var(--u)*2.5); left:calc(var(--u)*2.5); z-index:2;
    font-family:var(--mono); font-size:calc(var(--u)*3.4); color:rgba(255,255,255,0.88);
    background:rgba(5,11,31,0.6); border-radius:calc(var(--u)*99);
    padding:calc(var(--u)*1) calc(var(--u)*3); white-space:nowrap;
  }
  .q-tx{ font-size:calc(var(--u)*4.8); line-height:1.45; color:#2c3e50; }
  .logo-word{
    display:flex; align-items:center; justify-content:center;
    font-size:calc(var(--u)*3.3); font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:#93a5ba; background:#edf1f7 !important;
    border-radius:calc(var(--u)*3); white-space:nowrap; font-style:normal;
  }
  /* fake press lockups: icon + wordmark, six distinct type voices
     (i.logo-mark outranks the later .logo-wall i{display:block} base rule) */
  .logo-wall i.logo-mark{
    display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*1.8);
    height:calc(var(--u)*11);
    color:#8a9bb0; background:#edf1f7 !important;
    border-radius:calc(var(--u)*3); white-space:nowrap; font-style:normal;
  }
  .logo-mark svg{ opacity:0.75; }
  .logo-mark b{ font-size:calc(var(--u)*3.6); font-weight:700; color:#7e90a6; }
  .logo-mark.lm-serif b{ font-family:Georgia, 'Times New Roman', serif; letter-spacing:0.03em; }
  .logo-mark.lm-ital b{ font-style:italic; font-weight:600; font-size:calc(var(--u)*3.8); }
  .logo-mark.lm-caps b{ font-size:calc(var(--u)*3); letter-spacing:0.16em; font-weight:600; }
  .logo-mark.lm-bold b{ font-weight:800; letter-spacing:-0.02em; font-size:calc(var(--u)*3.9); }
  .logo-mark.lm-wide b{ font-weight:400; letter-spacing:0.3em; text-transform:uppercase; font-size:calc(var(--u)*3.2); }
  .logo-mark.lm-mono b{ font-family:var(--mono); font-weight:600; font-size:calc(var(--u)*3.1); letter-spacing:0.05em; }
  .bubble.txt{
    width:auto; height:auto; max-width:76%;
    padding:calc(var(--u)*1.8) calc(var(--u)*3.6);
    font-size:calc(var(--u)*4); line-height:1.35; color:#2c3e50;
  }
  .bubble.me.txt{ color:#fff; }
  .tier.hot .rt-m{ color:rgba(255,255,255,0.85); }

  /* fidelity helpers: headers, chips, icon rows, histogram, real tab bar */
  .mh{ display:flex; flex-direction:column; }
  .mh .m-cta{ align-self:flex-start; }
  .h-bot{ margin-top:auto; display:flex; align-items:center; gap:calc(var(--u)*2.5); padding-top:calc(var(--u)*3); flex-wrap:nowrap; overflow:hidden; }
  .hchip{
    display:inline-flex; align-items:center; gap:calc(var(--u)*1.7);
    background:rgba(255,255,255,0.16); border:calc(var(--u)*0.6) solid rgba(255,255,255,0.32);
    border-radius:calc(var(--u)*99); padding:calc(var(--u)*1.5) calc(var(--u)*3.6);
    font-size:calc(var(--u)*3.8); font-weight:600; white-space:nowrap; color:#fff;
  }
  .sec-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:calc(var(--u)*3.5); }
  .sec-head b{ font-size:calc(var(--u)*5.8); font-weight:700; letter-spacing:-0.01em; white-space:nowrap; }
  .sec-head s{
    text-decoration:none; display:inline-flex; align-items:center; gap:calc(var(--u)*1.5);
    font-family:var(--mono); font-size:calc(var(--u)*4); color:#7e92a9; white-space:nowrap;
  }
  .info-row{
    display:flex; align-items:center; gap:calc(var(--u)*2.5); margin-top:calc(var(--u)*5.5);
    font-size:calc(var(--u)*4.2); font-weight:600; color:#41607f; white-space:nowrap;
  }
  .info-row .mono-r{ margin-left:auto; font-family:var(--mono); font-size:calc(var(--u)*4); font-weight:500; color:#7e92a9; }
  .info-row svg, .plan-row svg, .sec-head svg{ color:#7e92a9; }
  .map-chip.br{ top:auto; left:auto; bottom:calc(var(--u)*2.5); right:calc(var(--u)*2.5); }
  .ph-more{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(10,21,48,0.45); color:#fff; font-size:calc(var(--u)*5.5);
    font-weight:700; font-style:normal;
  }
  .stars-row{ display:flex; gap:calc(var(--u)*1); color:var(--sunset); margin-bottom:calc(var(--u)*2.5); }
  .stat + .stat{ border-left:calc(var(--u)*0.7) solid #e6ebf3; padding-left:calc(var(--u)*6); }
  .stat .rt-m{ display:inline-flex; align-items:center; gap:calc(var(--u)*1.4); }
  .stat .rt-m svg{ color:#a7b6c8; }
  .rate-flex{ height:100%; display:flex; align-items:center; gap:calc(var(--u)*7); }
  .hist{ flex:1; display:flex; flex-direction:column; gap:calc(var(--u)*2.4); }
  .hist-row{ display:flex; align-items:center; gap:calc(var(--u)*2.5); font-family:var(--mono); font-size:calc(var(--u)*3.6); color:#7e92a9; white-space:nowrap; }
  .hist-track{ flex:1; height:calc(var(--u)*2); background:#eceff5; border-radius:99px; overflow:hidden; }
  .hist-fill{ height:100%; background:var(--sunset); border-radius:99px; }
  .loy-pts{ font-size:calc(var(--u)*3.9); opacity:0.78; margin-top:calc(var(--u)*1.2); }
  .spa .pr{
    margin-left:auto; display:inline-flex; align-items:center; gap:calc(var(--u)*1.2);
    font-family:var(--mono); font-size:calc(var(--u)*4.6); font-weight:600; color:#10243a; white-space:nowrap;
  }
  .spa .pr svg{ color:#a7b6c8; }
  .tier svg{ color:#7e92a9; display:block; margin-bottom:calc(var(--u)*1.6); }
  .tier.hot svg{ color:rgba(255,255,255,0.9); }
  .tier .pr{ display:block; font-family:var(--mono); font-size:calc(var(--u)*5); font-weight:600; margin-top:calc(var(--u)*2); }
  .bubble.txt svg{ vertical-align:calc(var(--u)*-0.8); margin-right:calc(var(--u)*1); }

  .m-tabbar{ position:relative; overflow:hidden; }
  .m-tabbar .tab svg{ display:block; margin:0 auto; }
  .m-tabbar .tab b{
    display:block; font-size:calc(var(--u)*3.2); font-weight:600;
    margin-top:calc(var(--u)*1); letter-spacing:0.03em; white-space:nowrap;
  }

  /* ---------- dark register: a guest whose app runs dark mode ----------
     The theme doesn't cut — it sweeps top-to-bottom with the recompose:
     each slot's surface crossfades on a small cascade delay. */
  .mock.zoom{ transition:background-color 0.5s ease; }
  .mock.zoom .slot{ transition:background-color 0.5s ease; }
  .mock.zoom .slot-journey{ transition-delay:0.1s; }
  .mock.zoom .slot-onboard{ transition-delay:0.22s; }
  .mock.zoom .slot-proof{ transition-delay:0.34s; }
  .mock.zoom .slot-cta{ transition-delay:0.46s; }
  .mock.zoom .m-tabbar{ transition:background-color 0.5s ease 0.58s, border-color 0.5s ease 0.58s; }
  .mock.dark{ background:#0e1726; color:#e8eef7; }
  .mock.dark .slot-journey, .mock.dark .slot-proof{ background:#0e1726; }
  .mock.dark .slot-onboard{ background:#0a111d; }
  .mock.dark .rt-b, .mock.dark .sec-head b{ color:#edf3fa; }
  .mock.dark .rt-m{ color:#8294a8; }
  .mock.dark .rt{ color:#a9bacd; }
  .mock.dark .sec-head s{ color:#7e8fa3; }
  .mock.dark .info-row{ color:#a9bacd; }
  .mock.dark .info-row .mono-r{ color:#7e8fa3; }
  .mock.dark .cab, .mock.dark .spa, .mock.dark .tier, .mock.dark .wx, .mock.dark .proto-row{
    background:#172538;
    box-shadow:0 calc(var(--u)*0.6) calc(var(--u)*1.2) rgba(0,0,0,0.3),
               0 calc(var(--u)*3) calc(var(--u)*8) rgba(0,0,0,0.4);
  }
  .mock.dark .plan-row b{ background:#1d2c44; color:#9fb4cd; }
  .mock.dark .tl-track{ background:#22324c; }
  .mock.dark .tl-dot{ background:#172538; border-color:#42597a; }
  .mock.dark .quote-line{ background:#22324c; }
  .mock.dark .q-tx{ color:#c7d4e4; }
  .mock.dark .stat + .stat{ border-color:rgba(255,255,255,0.09); }
  .mock.dark .stat .rt-m svg{ color:#5d7089; }
  .mock.dark .hist-track{ background:#22324c; }
  .mock.dark .logo-wall i, .mock.dark .logo-wall i.logo-mark{ background:#172538 !important; }
  .mock.dark .logo-mark b{ color:#93a6bc; }
  .mock.dark .bubble{ background:#1d2c44; }
  .mock.dark .bubble.txt{ color:#c7d4e4; }
  .mock.dark .news-wrap{ background:#0a111d; }
  .mock.dark .news-wrap span{ color:#e8eef7; }
  .mock.dark .news-wrap i{ background:#172538; border-color:#27384f; }
  .mock.dark .m-tabbar, .mock.zoom.dark .m-tabbar{ background:#0a111d; border-top-color:rgba(255,255,255,0.08); }
  .mock.zoom.dark .m-tabbar .tab{ color:#5d7089; }
  .mock.zoom.dark .m-tabbar::after{ background:#e8eef7; opacity:0.85; }

  /* ---------- zoom: rendered phones read at real-app scale ----------
     The ambient wall stays wireframe-small; any high-fidelity screen
     (locked hero, static showcase, vs phones) takes ~20% bigger type,
     scaled icons (--icz multiplies every ic() size), and slot content
     that centers instead of leaving dead space at the bottom. */
  .mock.zoom{ --icz:1.18; }
  .mock.zoom .pad{ display:flex; flex-direction:column; justify-content:center; }
  .mock.zoom .rt-sub{ font-size:calc(var(--u)*5.2); }
  .mock.zoom .rt{ font-size:calc(var(--u)*5.2); }
  .mock.zoom .rt-b{ font-size:calc(var(--u)*5.4); }
  .mock.zoom .rt-m{ font-size:calc(var(--u)*4.7); margin-top:calc(var(--u)*1.1); }
  .mock.zoom .rt-aux{ font-size:calc(var(--u)*4.8); }
  .mock.zoom .rt-w{ font-size:calc(var(--u)*5); }
  .mock.zoom .rt-ph{ font-size:calc(var(--u)*5.4); }
  .mock.zoom .ph-lab{ font-size:calc(var(--u)*5.6); }
  .mock.zoom .map-chip{ font-size:calc(var(--u)*4.1); padding:calc(var(--u)*1.3) calc(var(--u)*3.6); }
  .mock.zoom .q-tx{ font-size:calc(var(--u)*5.6); }
  .mock.zoom .logo-word{ font-size:calc(var(--u)*4); }
  .mock.zoom .bubble.txt{ font-size:calc(var(--u)*4.8); padding:calc(var(--u)*2.2) calc(var(--u)*4.2); }
  .mock.zoom .hchip{ font-size:calc(var(--u)*4.5); padding:calc(var(--u)*1.9) calc(var(--u)*4.2); }
  .mock.zoom .sec-head b{ font-size:calc(var(--u)*6.8); }
  .mock.zoom .sec-head s{ font-size:calc(var(--u)*4.7); }
  .mock.zoom .info-row{ font-size:calc(var(--u)*5); }
  .mock.zoom .info-row .mono-r{ font-size:calc(var(--u)*4.7); }
  .mock.zoom .ph-more{ font-size:calc(var(--u)*6.5); }
  .mock.zoom .hist-row{ font-size:calc(var(--u)*4.2); }
  .mock.zoom .loy-pts{ font-size:calc(var(--u)*4.7); }
  .mock.zoom .loy-tier{ font-size:calc(var(--u)*5); }
  .mock.zoom .loy-name{ font-size:calc(var(--u)*7.6); }
  .mock.zoom .spa .pr{ font-size:calc(var(--u)*5.4); }
  .mock.zoom .tier b{ font-size:calc(var(--u)*7.2); }
  .mock.zoom .tier .pr{ font-size:calc(var(--u)*6); }
  .mock.zoom .m-headline{ font-size:calc(var(--u)*11.5); }
  .mock.zoom .cta-banner .m-headline{ font-size:calc(var(--u)*8); }
  .mock.zoom .m-cta{ font-size:calc(var(--u)*6); padding:calc(var(--u)*3.4) calc(var(--u)*8.5); }
  .mock.zoom .m-search b{ font-size:calc(var(--u)*5.8); }
  .mock.zoom .m-search{ height:calc(var(--u)*15); border-radius:calc(var(--u)*7.5); }
  .mock.zoom .m-board i{ font-size:calc(var(--u)*5.6); height:calc(var(--u)*12.5); }
  .mock.zoom .m-count b{
    width:calc(var(--u)*18.5); height:calc(var(--u)*18.5);
    font-size:calc(var(--u)*9); line-height:calc(var(--u)*18.5);
  }
  .mock.zoom .m-count s{ font-size:calc(var(--u)*5); }
  /* the countdown hero reads centered; header and chip row stay full width */
  .mock.zoom .mh:has(.m-count){ align-items:center; text-align:center; }
  .mock.zoom .mh:has(.m-count) .app-head{ align-self:stretch; }
  .mock.zoom .mh:has(.m-count) .h-bot{ align-self:stretch; justify-content:center; }
  .mock.zoom .m-tabbar .tab b{ font-size:calc(var(--u)*4.2); }
  .mock.zoom .tl-labels{ font-size:calc(var(--u)*5.2); }
  .mock.zoom .plan-row b{ font-size:calc(var(--u)*5.2); }
  .mock.zoom .wx b{ font-size:calc(var(--u)*6.6); }
  .mock.zoom .wx i{ font-size:calc(var(--u)*5); }
  .mock.zoom .cab-price{ font-size:calc(var(--u)*5.4); }
  .mock.zoom .stat b{ font-size:calc(var(--u)*12.5); }
  .mock.zoom .rate-big{ font-size:calc(var(--u)*16); }
  .mock.zoom .rate-stars{ font-size:calc(var(--u)*7); }
  .mock.zoom .pass-l b{ font-size:calc(var(--u)*6.6); }
  .mock.zoom .news-wrap span{ font-size:calc(var(--u)*6.2); }
  .mock.zoom .news-wrap b{ font-size:calc(var(--u)*5.8); padding:calc(var(--u)*3.5) calc(var(--u)*8); }
  /* the template phone reads at the same app scale */
  .mock.zoom .proto-greet{ font-size:calc(var(--u)*9.6); }
  .mock.zoom .proto-seg{ font-size:calc(var(--u)*4.4); }
  .mock.zoom .proto-promo-t{ font-size:calc(var(--u)*7.4); }
  .mock.zoom .proto-promo-s{ font-size:calc(var(--u)*4.8); }
  .mock.zoom .proto-btn{ font-size:calc(var(--u)*4.8); }
  .mock.zoom .proto-chip{ font-size:calc(var(--u)*5); }
  /* app chrome: iOS-register tab bar — icons up top, labels quiet,
     inactive tabs gray, home indicator pinned at the bottom */
  .mock.zoom .m-tabbar{
    align-items:flex-start; padding:calc(var(--u)*2.6) calc(var(--u)*8) 0;
    border-top:calc(var(--u)*0.6) solid #e9edf3; background:#fcfdfe;
  }
  .mock.zoom .m-tabbar .tab{ color:#9aa6b4; }
  .mock.zoom .m-tabbar .tab b{
    font-size:calc(var(--u)*3.8); font-weight:500;
    letter-spacing:0; margin-top:calc(var(--u)*0.9);
  }
  .mock.zoom .m-tabbar::after{
    content:''; position:absolute; left:50%; bottom:calc(var(--u)*2); transform:translateX(-50%);
    width:calc(var(--u)*46); height:calc(var(--u)*1.7); border-radius:calc(var(--u)*99);
    background:#10243a; opacity:0.9;
  }
  /* app modules, not web cards: hairline borders give way to soft shadows */
  .mock.zoom .cab, .mock.zoom .spa, .mock.zoom .tier, .mock.zoom .wx, .mock.zoom .proto-row{
    border:none; border-radius:calc(var(--u)*5.5);
    box-shadow:0 calc(var(--u)*0.6) calc(var(--u)*1.2) rgba(16,36,58,0.05),
               0 calc(var(--u)*3) calc(var(--u)*8) rgba(16,36,58,0.1);
  }
  .mock.zoom .tier.hot{ box-shadow:0 calc(var(--u)*1) calc(var(--u)*2) rgba(16,36,58,0.12),
               0 calc(var(--u)*4) calc(var(--u)*10) rgba(16,36,58,0.2); }
  .mock.zoom .exc .ph, .mock.zoom .gal-row .ph, .mock.zoom .cab .ph, .mock.zoom .spa .ph{ border-radius:calc(var(--u)*5); }
  .mock.zoom .map-pane{ border-radius:calc(var(--u)*5.5); }
  .mh > *{ position:relative; z-index:1; }
  .mh-media{ position:absolute !important; inset:0; z-index:0 !important; pointer-events:none; }
  .mh-media video, .mh-media img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  .mh-scrim{ position:absolute; inset:0; }
  .ah-logo{
    display:block; height:calc(var(--u)*9); width:auto;
    filter:brightness(0) invert(1); opacity:0.95;
  }
  .m-orb{
    position:absolute; border-radius:50%; pointer-events:none;
    width:calc(var(--u)*130); height:calc(var(--u)*130);
    right:calc(var(--u)*-45); top:calc(var(--u)*-45);
    background:radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  }
  .app-head{ display:flex; align-items:center; gap:calc(var(--u)*4); margin-bottom:calc(var(--u)*7); }
  .ah-ava{
    flex:none; display:block; width:calc(var(--u)*9.5); height:calc(var(--u)*9.5);
    border-radius:50%; background:rgba(255,255,255,0.92);
    box-shadow:inset 0 0 0 calc(var(--u)*1.6) rgba(94,134,255,0.3);
  }
  .ah-tx{ flex:1; }
  .ah-tx i{ display:block; height:calc(var(--u)*2.4); width:38%; border-radius:calc(var(--u)*1.2); background:rgba(255,255,255,0.5); }
  .ah-tx i:first-child{ width:54%; height:calc(var(--u)*3); background:rgba(255,255,255,0.88); margin-bottom:calc(var(--u)*2); }
  .ah-bell{
    flex:none; display:block; width:calc(var(--u)*7.5); height:calc(var(--u)*7.5);
    border-radius:50%; border:calc(var(--u)*0.9) solid rgba(255,255,255,0.55); position:relative;
  }
  .ah-bell::after{
    content:''; position:absolute; top:calc(var(--u)*-0.5); right:calc(var(--u)*-0.5);
    width:calc(var(--u)*2.6); height:calc(var(--u)*2.6); border-radius:50%; background:#F4D35E;
  }
  .m-headline{ font-weight:700; line-height:1.12; letter-spacing:-0.02em; font-size:calc(var(--u)*10); }
  .m-cta{
    display:inline-block; margin-top:calc(var(--u)*5.5); background:#fff; color:#0b2740;
    font-weight:600; font-size:calc(var(--u)*5.2);
    padding:calc(var(--u)*3) calc(var(--u)*7.5); border-radius:calc(var(--u)*99); white-space:nowrap;
  }
  .m-split{ display:flex; gap:calc(var(--u)*8); align-items:flex-start; }
  .m-pane{
    flex:none; width:calc(var(--u)*52); height:calc(var(--u)*52);
    border-radius:calc(var(--u)*5); background:rgba(255,255,255,0.18);
    border:calc(var(--u)*0.8) solid rgba(255,255,255,0.35);
    position:relative; overflow:hidden;
  }
  .m-search{
    display:flex; margin-top:calc(var(--u)*6.5); height:calc(var(--u)*13);
    border-radius:calc(var(--u)*6.5); background:rgba(255,255,255,0.95); overflow:hidden;
    align-items:center; padding-left:calc(var(--u)*7); gap:calc(var(--u)*5);
  }
  .m-search i{ display:block; height:calc(var(--u)*3); border-radius:calc(var(--u)*1.5); background:#c4d2e2; flex:1; }
  .m-search b{
    flex:none; align-self:stretch; display:flex; align-items:center;
    padding:0 calc(var(--u)*8); color:#fff; font-size:calc(var(--u)*5); font-weight:600;
    background:var(--brand-deeper);
  }
  .m-board{ margin-top:calc(var(--u)*6); display:flex; flex-direction:column; gap:calc(var(--u)*3.5); }
  .m-board i{
    display:flex; align-items:center; gap:calc(var(--u)*5);
    height:calc(var(--u)*11); border-radius:calc(var(--u)*3); padding:0 calc(var(--u)*6);
    background:rgba(255,255,255,0.14); border:calc(var(--u)*0.8) solid rgba(255,255,255,0.28);
    font-family:var(--mono); font-size:calc(var(--u)*5); font-style:normal; letter-spacing:0.1em;
  }
  .m-board s{ text-decoration:none; opacity:0.75; }
  .m-bento{ display:grid; grid-template-columns:1.5fr 1fr; gap:calc(var(--u)*4); margin-top:calc(var(--u)*6); }
  .m-bento i{
    display:block; border-radius:calc(var(--u)*4); height:calc(var(--u)*17);
    background:rgba(255,255,255,0.16); border:calc(var(--u)*0.8) solid rgba(255,255,255,0.3);
  }
  .m-bento i:first-child{ grid-row:span 2; height:auto; }
  .m-bento i.ph-lab{ background:none; border:none; border-radius:0; height:auto; width:auto; }
  .m-count{ display:flex; gap:calc(var(--u)*4); margin-top:calc(var(--u)*6); align-items:flex-end; }
  .m-count b{
    display:block; width:calc(var(--u)*16); height:calc(var(--u)*16); border-radius:calc(var(--u)*3.5);
    background:rgba(255,255,255,0.94); color:#0b2740;
    font-size:calc(var(--u)*7.5); font-weight:700; text-align:center; line-height:calc(var(--u)*16);
    font-family:var(--mono);
  }
  .m-count s{
    text-decoration:none; font-family:var(--mono); font-size:calc(var(--u)*4.4);
    opacity:0.7; padding-bottom:calc(var(--u)*1);
  }

  /* journey */
  .tl-track{ position:relative; height:calc(var(--u)*2); min-height:2px; background:#dde4ef; border-radius:calc(var(--u)*1); margin:calc(var(--u)*8) calc(var(--u)*2) calc(var(--u)*6); }
  .tl-dot{
    position:absolute; top:50%; width:calc(var(--u)*6.5); height:calc(var(--u)*6.5);
    border-radius:50%; transform:translate(-50%,-50%);
    background:#fff; border:calc(var(--u)*1.6) solid #9fb4ca;
  }
  .tl-dot.hot{ border-color:transparent; }
  .tl-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:calc(var(--u)*4.6); letter-spacing:0.12em; color:#7e92a9; }
  .plan-row{ display:flex; align-items:center; gap:calc(var(--u)*5); margin-bottom:calc(var(--u)*4.5); }
  .plan-row b{
    flex:none; font-family:var(--mono); font-size:calc(var(--u)*4.6); font-weight:600;
    padding:calc(var(--u)*1.6) calc(var(--u)*4); border-radius:calc(var(--u)*2.5);
    background:#e7eef7; color:#41607f;
  }
  .plan-row i{ flex:1; }
  .map-pane{
    height:100%; border-radius:calc(var(--u)*4);
    background:linear-gradient(135deg, #dceaf6, #c2dcef);
    position:relative; overflow:hidden;
  }
  .map-path{
    position:absolute; left:12%; right:14%; top:50%; height:calc(var(--u)*1.4);
    background:repeating-linear-gradient(90deg, #5e87ad 0 calc(var(--u)*4), transparent calc(var(--u)*4) calc(var(--u)*8));
    transform:rotate(-8deg);
  }
  .map-pin{
    position:absolute; width:calc(var(--u)*7); height:calc(var(--u)*7); border-radius:50% 50% 50% 0;
    transform:rotate(-45deg); border:calc(var(--u)*1.4) solid #fff;
    box-shadow:0 calc(var(--u)*2) calc(var(--u)*4) rgba(20,40,70,0.3);
  }
  .wx-row{ display:flex; gap:calc(var(--u)*5); height:100%; align-items:center; }
  .wx{
    flex:1; text-align:center; background:#fff; border-radius:calc(var(--u)*4);
    border:calc(var(--u)*0.8) solid #e3eaf3; padding:calc(var(--u)*4) 0;
  }
  .wx s{
    display:block; width:calc(var(--u)*8); height:calc(var(--u)*8); border-radius:50%;
    margin:0 auto calc(var(--u)*2.5);
    background:radial-gradient(circle at 35% 35%, #F4D35E, #F2A65A);
  }
  .wx b{ font-size:calc(var(--u)*5.6); font-weight:700; font-family:var(--mono); }
  .wx i{ display:block; font-family:var(--mono); font-size:calc(var(--u)*4.2); color:#8aa0b8; font-style:normal; margin-top:calc(var(--u)*1); }
  .exc-grid{ display:flex; gap:calc(var(--u)*5); height:100%; }
  .exc{ flex:1; }
  .exc .ph{ height:calc(var(--u)*30); margin-bottom:calc(var(--u)*3.5); }
  .exc .ln{ width:80%; }

  /* onboard */
  .cab-row{ display:flex; gap:calc(var(--u)*6); height:100%; }
  .cab{
    flex:1; background:#fff; border-radius:calc(var(--u)*4.5);
    border:calc(var(--u)*0.8) solid #e3eaf3; padding:calc(var(--u)*4.5);
    position:relative;
  }
  .cab .ph{ height:calc(var(--u)*20); margin-bottom:calc(var(--u)*3.5); }
  .cab .ln{ width:70%; margin-bottom:calc(var(--u)*2.5); }
  .cab-price{
    position:absolute; top:calc(var(--u)*7); right:calc(var(--u)*7);
    color:#fff; font-size:calc(var(--u)*4.6); font-weight:700; font-family:var(--mono);
    padding:calc(var(--u)*1.4) calc(var(--u)*4); border-radius:calc(var(--u)*99); white-space:nowrap;
  }
  .tiers{ display:flex; gap:calc(var(--u)*5); height:100%; align-items:stretch; }
  .tier{
    flex:1; border-radius:calc(var(--u)*4); background:#fff;
    border:calc(var(--u)*0.8) solid #e3eaf3; padding:calc(var(--u)*4.5);
  }
  .tier b{ display:block; font-size:calc(var(--u)*6.2); font-weight:700; }
  .tier i{ display:block; height:calc(var(--u)*2.4); border-radius:calc(var(--u)*1.2); background:#eceff5; margin-top:calc(var(--u)*2.8); }
  .tier.hot{ color:#fff; border:none; }
  .tier.hot i{ background:rgba(255,255,255,0.4); }
  .gal-row{ display:flex; gap:calc(var(--u)*4.5); height:100%; align-items:center; }
  .gal-row .ph{ flex:1; height:calc(var(--u)*42); }
  .spa-col{ display:flex; flex-direction:column; gap:calc(var(--u)*5); height:100%; }
  .spa{
    flex:1; border-radius:calc(var(--u)*4); display:flex; align-items:center;
    gap:calc(var(--u)*5); padding:0 calc(var(--u)*6);
    background:#fff; border:calc(var(--u)*0.8) solid #e3eaf3;
  }
  .spa .ph{ width:calc(var(--u)*18); height:calc(var(--u)*14); flex:none; }
  .spa div{ flex:1; }
  .spa .ln{ margin-bottom:calc(var(--u)*2.5); }

  /* proof */
  .quote-line{ height:calc(var(--u)*3.4); border-radius:calc(var(--u)*1.7); background:#dde4ef; margin-bottom:calc(var(--u)*3.2); }
  .quote-by{ display:flex; align-items:center; gap:calc(var(--u)*4); margin-top:calc(var(--u)*4.5); }
  .quote-by s{ width:calc(var(--u)*9); height:calc(var(--u)*9); border-radius:50%; display:block; flex:none; }
  .quote-by i{ display:block; height:calc(var(--u)*2.8); width:calc(var(--u)*40); border-radius:calc(var(--u)*1.4); background:#c8d4e2; }
  .stat-row{ display:flex; gap:calc(var(--u)*8); align-items:center; height:100%; }
  .stat{ flex:1; }
  .stat b{ display:block; font-size:calc(var(--u)*11); font-weight:700; letter-spacing:-0.03em; font-family:var(--mono); }
  .stat i{ display:block; height:calc(var(--u)*2.8); width:72%; border-radius:calc(var(--u)*1.4); background:#dde4ef; margin-top:calc(var(--u)*3); }
  .logo-wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--u)*4.5); height:100%; align-content:center; }
  .logo-wall i{ display:block; height:calc(var(--u)*10); border-radius:calc(var(--u)*3); background:#e3e9f2; }
  .loy-card{
    height:100%; border-radius:calc(var(--u)*5); color:#fff;
    padding:calc(var(--u)*6) calc(var(--u)*7);
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden;
  }
  .loy-tier{ font-family:var(--mono); font-size:calc(var(--u)*4.4); letter-spacing:0.26em; text-transform:uppercase; opacity:0.8; }
  .loy-name{ font-size:calc(var(--u)*6.4); font-weight:700; font-style:italic; }
  .loy-dots{ display:flex; gap:calc(var(--u)*2.5); }
  .loy-dots s{ display:block; width:calc(var(--u)*4.5); height:calc(var(--u)*4.5); border-radius:50%; background:rgba(255,255,255,0.45); }
  .loy-dots s.on{ background:#fff; }
  .rate-wrap{ height:100%; display:flex; flex-direction:column; justify-content:center; }
  .rate-big{ font-size:calc(var(--u)*14); font-weight:700; letter-spacing:-0.03em; line-height:1; font-family:var(--mono); }
  .rate-stars{ font-size:calc(var(--u)*6); letter-spacing:0.16em; margin:calc(var(--u)*2.5) 0 calc(var(--u)*3.5); color:var(--sunset); }
  .rate-wrap .ln{ width:85%; }

  /* cta */
  .cta-banner{
    height:100%; display:flex; align-items:center; justify-content:space-between;
    padding:0 calc(var(--u)*11); color:#fff; position:relative; overflow:hidden;
  }
  .cta-banner .m-headline{ font-size:calc(var(--u)*7); max-width:58%; }
  .cta-banner .m-cta{ margin-top:0; }
  .pass{ height:100%; display:flex; align-items:stretch; color:#fff; }
  .pass-l{ flex:1; padding:calc(var(--u)*5) calc(var(--u)*10); display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u)*2.6); }
  .pass-l b{ font-size:calc(var(--u)*5.6); font-weight:700; }
  .pass-l i{ display:block; height:calc(var(--u)*2.4); width:calc(var(--u)*56); border-radius:calc(var(--u)*1.2); background:rgba(255,255,255,0.45); }
  .pass-div{
    flex:none; width:0; border-left:calc(var(--u)*1) dashed rgba(255,255,255,0.5);
    margin:calc(var(--u)*4) 0;
  }
  .pass-r{ flex:none; width:calc(var(--u)*42); display:flex; align-items:center; justify-content:center; }
  .pass-bar{
    width:calc(var(--u)*28); height:calc(var(--u)*16);
    background:repeating-linear-gradient(90deg, #fff 0 calc(var(--u)*1.6), transparent calc(var(--u)*1.6) calc(var(--u)*3.4));
    opacity:0.92;
  }
  .chat-wrap{ height:100%; padding:calc(var(--u)*4) calc(var(--u)*10); display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u)*3); }
  .bubble{
    align-self:flex-start; max-width:62%; height:calc(var(--u)*8);
    border-radius:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*1.5);
    background:#e7eef7; width:55%;
  }
  .bubble.me{
    align-self:flex-end; border-radius:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*1.5) calc(var(--u)*4);
    width:42%; opacity:0.95;
  }
  .news-wrap{
    height:100%; display:flex; align-items:center; gap:calc(var(--u)*5);
    padding:0 calc(var(--u)*10); background:#eaf1f8;
  }
  .news-wrap span{ flex:none; font-size:calc(var(--u)*5.4); font-weight:700; color:#10243a; }
  .news-wrap i{ flex:1; display:block; height:calc(var(--u)*11); border-radius:calc(var(--u)*5.5); background:#fff; border:calc(var(--u)*0.8) solid #d6e0ec; }
  .news-wrap b{
    flex:none; color:#fff; font-size:calc(var(--u)*5); font-weight:600;
    padding:calc(var(--u)*3) calc(var(--u)*7); border-radius:calc(var(--u)*99);
    background:var(--brand-deeper); white-space:nowrap;
  }

  /* persona avatar in module hero app-heads */
  .ah-ava{ overflow:hidden; }
  .ah-ava img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

  /* ---------- The template phone: rules-based personalization, frozen ----------
     A perfectly legit, perfectly boring travel app: real photos, generic
     corporate navy/teal, brand lockup in the header (no user icon — these
     apps never have one). Flip the guest and only the name and the segment
     badge swap. Shared by the intro prologue and the vs section. */
  .mock.proto{ background:#f7f9fb; }
  .mock.proto .slot-journey, .mock.proto .slot-proof{ background:#f7f9fb; }
  .mock.proto .slot-onboard{ background:#eef3f7; }
  .mock.proto .ph{ background:#d3dae3; }
  .mock.proto .ph::after{ display:none; }
  .mock.proto .rt-b, .mock.proto .sec-head b{ color:#1c3a52; }
  .mock.proto .rt-m{ color:#74879a; }
  .mock.proto .m-tabbar{ border-top-color:#e2e9ef; }
  .proto-mh{ background:#2c4e66; }   /* photo + scrim land inline */
  /* the swappable bits wear permanent dashed "merge field" outlines —
     the mail-merge tell, baked into the template */
  .proto-greet{
    font-size:calc(var(--u)*8.4); white-space:nowrap;
    text-shadow:0 calc(var(--u)*1) calc(var(--u)*4) rgba(8,24,38,0.45);
    outline:calc(var(--u)*0.7) dashed rgba(255,255,255,0.45);
    outline-offset:calc(var(--u)*1.6); border-radius:calc(var(--u)*1.5);
  }
  .proto-mh .rt-sub{ text-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(8,24,38,0.5); }
  .proto-seg{
    display:inline-flex; align-items:center; margin-top:calc(var(--u)*4.5);
    font-size:calc(var(--u)*3.7); font-weight:700;
    letter-spacing:0.07em; text-transform:uppercase;
    color:#1c3a52; background:rgba(255,255,255,0.93);
    border-radius:calc(var(--u)*99); padding:calc(var(--u)*1.8) calc(var(--u)*4.5);
    white-space:nowrap;
    outline:calc(var(--u)*0.7) dashed rgba(255,255,255,0.45);
    outline-offset:calc(var(--u)*1.6);
  }
  /* ghost duplicates fanned behind the vs template phone — everyone's copy */
  .proto-ghost{ position:absolute; inset:0; pointer-events:none; }
  .proto-ghost.g1{ transform:rotate(-5deg) translate(-17px, 10px); opacity:0.42; }
  .proto-ghost.g2{ transform:rotate(4.5deg) translate(17px, 13px); opacity:0.26; }
  .proto-row{
    display:flex; align-items:center; gap:calc(var(--u)*4);
    background:#fff; border:calc(var(--u)*0.8) solid #e2e9ef;
    border-radius:calc(var(--u)*4); padding:calc(var(--u)*2.6) calc(var(--u)*4);
  }
  .proto-row + .proto-row{ margin-top:calc(var(--u)*3); }
  .proto-row .ph{ width:calc(var(--u)*14); height:calc(var(--u)*11); flex:none; }
  .proto-row > div{ flex:1; min-width:0; }
  .proto-btn{
    flex:none; font-size:calc(var(--u)*4); font-weight:600; color:#fff;
    background:#2E86A0; border-radius:calc(var(--u)*99);
    padding:calc(var(--u)*1.8) calc(var(--u)*4.5);
  }
  .proto-stale{ color:#B45309; }
  .proto-promo{
    height:100%; padding:calc(var(--u)*6) calc(var(--u)*11);
    display:flex; flex-direction:column; justify-content:center;
    background:#24465f; color:#fff;   /* photo + scrim land inline */
  }
  .proto-promo-t{ font-size:calc(var(--u)*6.4); font-weight:700; white-space:nowrap; text-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(8,24,38,0.5); }
  .proto-promo-s{ font-size:calc(var(--u)*4); color:rgba(255,255,255,0.85); margin-top:calc(var(--u)*1.2); white-space:nowrap; text-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(8,24,38,0.5); }
  .proto-filter{
    height:100%; display:flex; align-items:center; gap:calc(var(--u)*2.2);
    padding:0 calc(var(--u)*8); background:#eef3f7; overflow:hidden;
  }
  .proto-chip{
    flex:none; font-size:calc(var(--u)*4.2); font-weight:500; color:#3f5a70;
    border:calc(var(--u)*0.8) solid #ccd8e1; border-radius:calc(var(--u)*99);
    padding:calc(var(--u)*1.6) calc(var(--u)*4.2); background:#fff; white-space:nowrap;
  }
  .proto-chip.on{ background:#24465f; border-color:#24465f; color:#fff; }
  /* seam flash: the merge-field outlines pulse amber when a swap lands */
  .proto-flash{ animation:protoFlash 1.1s ease-out; }
  @keyframes protoFlash{
    0%, 55%{ outline-color:rgba(242,166,90,0.95); }
    100%{ outline-color:rgba(255,255,255,0.45); }
  }

  /* ---------- Persona, front and center: the star of the browsing state ---------- */
  .p-center{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:8; display:flex; flex-direction:column; align-items:center; gap:9px;
    pointer-events:none; text-align:center; width:max-content;
    transition:opacity 0.25s ease;
  }
  /* the glow lives INSIDE the mock so the phone's rounded clip masks it */
  .mock-glow{
    position:absolute; inset:0; z-index:5; pointer-events:none;
    background:radial-gradient(circle at 50% 50%,
      rgba(250,251,253,0.96) 0%, rgba(250,251,253,0.8) 24%, rgba(250,251,253,0) 56%);
    transition:opacity 0.3s ease;
  }
  .mock-glow.off{ opacity:0; }
  .p-center img{
    width:88px; height:88px; border-radius:50%; object-fit:cover;
    border:3px solid #fff;
    box-shadow:0 14px 34px rgba(14,26,43,0.35);
  }
  .p-center b{ font-size:15.5px; font-weight:700; color:#0E1A2B; letter-spacing:-0.01em; white-space:nowrap; }
  .p-center s{
    text-decoration:none; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
    color:#6B7280; white-space:nowrap; margin-top:-3px;
  }
  .p-center.fade{ opacity:0; }

  /* ---------- Featured detail chrome ---------- */
  .f-ava{
    width:56px; height:56px; border-radius:50%; object-fit:cover;
    border:2px solid rgba(255,255,255,0.6);
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    display:block; flex:none;
  }
  .f-id{
    display:flex; align-items:center; justify-content:center;
    gap:14px; margin-bottom:10px;
  }
  .f-title{
    position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    margin-bottom:16px; text-align:center; white-space:nowrap;
    opacity:0; transition:opacity 0.3s ease; pointer-events:none;
  }
  /* the title docks only after the persona photo flies up to it */
  .identity-docked .f-title{ opacity:1; pointer-events:auto; }
  .f-ava{ position:relative; z-index:2; }
  .f-id .nav-arrow{
    position:relative; z-index:1; opacity:0;
    transition:opacity 0.4s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
  }
  .f-id .nav-arrow:first-child{ transform:translateX(36px) scale(0.5); }
  .f-id .nav-arrow:last-child{ transform:translateX(-36px) scale(0.5); }
  .identity-docked .f-id .nav-arrow{ opacity:1; transform:none; }
  .identity-docked .f-id .nav-arrow:first-child{ transition-delay:0.12s; }
  .identity-docked .f-id .nav-arrow:last-child{ transition-delay:0.18s; }
  .nav-arrow, .f-close{
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    border-radius:9999px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    background:rgb(var(--fg-rgb) / 0.10);
    color:rgb(var(--fg-rgb) / 0.85);
    border:1px solid rgb(var(--fg-rgb) / 0.10);
    transition:background 0.2s, color 0.2s;
  }
  .nav-arrow:hover, .f-close:hover{ background:rgb(var(--fg-rgb) / 0.20); color:#fff; }
  .f-eyebrow{
    font-size:10px; text-transform:uppercase; letter-spacing:0.24em;
    color:rgb(var(--fg-rgb) / 0.6); margin-top:6px;   /* role sits BENEATH the name */
  }
  .f-name{
    font-size:clamp(20px, 2.4vw, 28px); font-weight:700; font-style:italic;
    letter-spacing:-0.01em;
  }
  .f-below{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:16px; text-align:center; min-width:340px;
    opacity:0; transition:opacity 0.3s ease; pointer-events:none;
  }
  .expanded .f-below{ opacity:1; pointer-events:auto; }
  .f-meta{
    font-size:11px; text-transform:uppercase; letter-spacing:0.24em;
    color:rgb(var(--fg-rgb) / 0.6);
  }
  .f-recipe{
    margin-top:12px; display:flex; gap:14px; justify-content:center; flex-wrap:nowrap;
    align-items:flex-start;
    /* pills sit behind the phone in the stacking order, so they can
       physically emerge from beneath the bezel */
    position:relative; z-index:-1;
  }
  /* the recipe: a dealt hand of mini pattern cards — tiny skeletal modules
     in the wall's own vocabulary, one per slot, label beneath. Tells the
     "five patterns built this screen" story visually instead of naming it */
  .fr-item{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    rotate:var(--tilt, 0deg);
  }
  .fr-card{
    width:62px; height:46px; border-radius:7px; padding:6px;
    background:#EFF4FB;
    box-shadow:0 8px 20px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
    display:flex; flex-direction:column; justify-content:center; gap:3px;
  }
  .fr-card i{ display:block; background:#9FAEC6; border-radius:2px; height:3px; }
  .fr-card .b{ display:block; height:16px; border-radius:3.5px; background:#B9C6DB; }
  .fr-card .row{ display:flex; align-items:center; gap:3px; }
  .fr-card .d{ width:4px; height:4px; border-radius:50%; flex:none; }
  .fr-card .row i{ flex:1; }
  .fr-card .grid{ display:grid; grid-template-columns:1fr 1fr; gap:3px; }
  .fr-card .grid i{ height:13px; border-radius:3px; background:#B9C6DB; }
  .fr-card .btn{ display:block; height:9px; border-radius:9999px; width:70%; margin:0 auto; background:#8DA0BE; }
  .fr-item > s{
    text-decoration:none; white-space:nowrap;
    font-family:var(--mono); font-size:8.5px; letter-spacing:0.12em;
    text-transform:uppercase; color:rgb(var(--fg-rgb) / 0.66);
  }
  .f-buttons{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
  .f-btn-primary{
    padding:11px 22px; border-radius:9999px;
    background:var(--fg); color:#0A1530;
    font-size:13px; font-weight:600; white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
  }
  .f-btn-primary:hover{ opacity:0.9; }
  .f-btn-secondary{
    padding:11px 22px; border-radius:9999px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    background:rgb(var(--fg-rgb) / 0.08);
    color:rgb(var(--fg-rgb) / 0.9);
    border:1px solid rgb(var(--fg-rgb) / 0.15);
    font-size:13px; font-weight:500; white-space:nowrap;
  }
  .f-btn-secondary:hover{ background:rgb(var(--fg-rgb) / 0.15); }
  .f-side{
    position:absolute; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:8px;
    opacity:0; transition:opacity 0.3s ease; pointer-events:none;
  }
  .expanded .f-side{ opacity:1; pointer-events:auto; }
  .f-side.right{ left:100%; margin-left:16px; }

  /* ---------- Header ---------- */
  /* dark gradient anchoring the brand corner over the busy wall */
  .header-scrim{
    position:absolute; top:0; left:0; right:0; height:200px;
    z-index:39; pointer-events:none;
    background:
      radial-gradient(ellipse 560px 280px at 0% 0%, rgba(2,6,18,0.88) 0%, rgba(2,6,18,0.4) 55%, transparent 75%),
      linear-gradient(180deg, rgba(2,6,18,0.5) 0%, transparent 100%);
  }
  .cx-root header{
    position:fixed; top:0; left:0; right:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; pointer-events:none;
    transition:padding 0.35s ease, background 0.35s ease, border-color 0.35s ease,
               backdrop-filter 0.35s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    padding:11px 24px;
    background:rgba(3,8,20,0.55);
    backdrop-filter:blur(22px) saturate(170%);
    -webkit-backdrop-filter:blur(22px) saturate(170%);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .brand-row{ display:flex; align-items:center; gap:18px; }
  .lockup{ width:148px; opacity:0.92; transition:width 0.35s ease; }
  header.scrolled .lockup{ width:108px; }
  .lockup svg{ width:100%; height:auto; display:block; }
  .cobrand{ display:flex; align-items:center; gap:18px; }
  /* the section's name rides the brand bar and swaps as you scroll —
     it replaced the in-section eyebrow kickers */
  .nav-sec{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    pointer-events:none; max-width:46%;   /* centered in the bar, clear of the logo + actions */
  }
  @media (max-width:768px){ .nav-sec{ position:static; transform:none; max-width:none; } }
  .nav-sec b{
    display:block; font-size:16px; font-weight:600; color:#fff;
    white-space:nowrap; letter-spacing:-0.01em;
  }
  .cobrand .cb-div{ width:1px; height:30px; background:rgb(var(--fg-rgb) / 0.25); }
  .cobrand img{ height:38px; width:auto; display:block; opacity:0.95; transition:height 0.35s ease; }
  header.scrolled .cobrand img{ height:28px; }
  /* no-client placeholder: a dashed box where the prospect's logo will live */
  .client-box{
    display:inline-flex; align-items:center; white-space:nowrap;
    font-family:var(--mono); font-size:10.5px; font-weight:500;
    letter-spacing:0.22em; text-transform:uppercase;
    color:rgb(var(--fg-rgb) / 0.7);
    border:1px dashed rgb(var(--fg-rgb) / 0.38); border-radius:9px;
    padding:9px 14px;
  }
  .sec-client .client-box{ color:rgba(14,26,43,0.55); border-color:rgba(14,26,43,0.32); }
  header.scrolled .header-tag{ padding-top:4px; }
  .header-tag{
    font-family:var(--mono); font-size:10px; letter-spacing:0.28em;
    text-transform:uppercase; color:var(--muted); padding-top:8px; text-align:right;
  }

  /* ---------- Hero copy (bottom-left) ---------- */
  .hero{
    position:absolute; bottom:28px; left:28px; z-index:35;
    max-width:41rem; pointer-events:none; color:var(--fg);
    transition:opacity 0.3s ease;
  }
  .hero .eyebrow{
    display:flex; align-items:center; gap:12px;
    font-size:11px; text-transform:uppercase; letter-spacing:0.22em;
    color:rgb(var(--fg-rgb) / 0.65);
  }
  .hero .hr{ width:32px; height:1px; background:rgb(var(--fg-rgb) / 0.45); }
  #heroEyebrow{ display:none; }   /* removed per Josh — no "Prepared for cruise lines" kicker */
  .hero .title{
    margin-top:12px;
    font-size:clamp(1.65rem, 2.6vw, 2.7rem);
    font-weight:700;
    line-height:1.08; letter-spacing:-0.02em;
    text-shadow:0 4px 28px rgba(0,0,0,0.5);
  }
  .hero .title .w{ display:inline-block; white-space:nowrap; }
  .hero .title .w > span{ display:inline-block; white-space:pre; will-change:transform; opacity:0; }
  .hero .title .w-ai{ color:var(--ai); }
  .hero .sub{
    margin-top:12px; font-size:13px; line-height:1.5;
    color:rgb(var(--fg-rgb) / 0.6); max-width:26rem;
    text-wrap:pretty;
  }
  .hero .fineprint{
    margin-top:10px; font-size:10.5px; line-height:1.5;
    color:rgb(var(--fg-rgb) / 0.38); max-width:29rem;
    text-wrap:pretty;
  }
  /* (the mobile single-column pass lives at the end of the stylesheet —
     it has to outrank the base rules defined below it) */

  .hint{
    position:absolute; top:74px; right:28px; z-index:40;
    pointer-events:none; font-size:11px; text-transform:uppercase;
    letter-spacing:0.22em; color:rgb(var(--fg-rgb) / 0.55);
    transition:opacity 0.7s; opacity:0;
  }

  /* ---------- staged intro: the story beats over the blank wall ---------- */
  .intro-stage{
    position:absolute; inset:0; z-index:30; pointer-events:none;
    display:grid; place-items:center;
  }
  .intro-scrim{
    position:absolute; inset:0; opacity:0;
    background:radial-gradient(ellipse 64% 56% at 50% 47%,
      rgb(var(--bg-rgb) / 0.78), rgb(var(--bg-rgb) / 0.3) 52%, transparent 76%);
  }
  .intro-line{
    grid-area:1/1;
    padding:0 24px;
    font-size:clamp(1.9rem, 4.4vw, 3.8rem);
    font-weight:700; letter-spacing:-0.02em; line-height:1.12;
    text-align:center; color:var(--fg);
    /* one soft drop shadow for the whole line — no crisp per-glyph halo */
    text-shadow:0 10px 44px rgb(var(--bg-rgb) / 0.85);
    text-wrap:balance;
  }
  .intro-line .w{ display:inline-block; white-space:nowrap; }
  .intro-line .w > span{ display:inline-block; white-space:pre; will-change:transform; opacity:0; }
  .intro-line .k-guest{ color:#F2A65A; }
  .intro-line .k-brand{ color:#5FA8CC; }
  .intro-line .k-moment{ color:var(--ai); }
  .intro-line .k-old{ color:#8A94A6; }
  .intro-line .k-ai{ color:var(--ai); }
  /* the swapping keyword reserves the widest word's width (set in JS) and sits
     left-aligned in that slot, so the centered line never reflows on a swap */
  #introKey{ text-align:left; }

  /* prologue: the frozen template phone under the "you've seen this" lines */
  .intro-proto{
    grid-area:1/1; position:relative;
    display:flex; flex-direction:column; align-items:center; gap:26px;
  }
  .ip-lines{ display:grid; place-items:center; }
  .ip-lines .intro-line{ grid-area:1/1; }
  /* the row of identical screens — five guests, one template */
  .proto-stage{
    position:relative; filter:drop-shadow(0 28px 60px rgba(0,0,0,0.6));
    display:flex; align-items:center; gap:clamp(14px, 1.8vw, 26px);
  }
  .proto-stage .proto-cell{ will-change:transform; }
  .proto-stage .proto-cell:nth-child(3){ scale:1.06; z-index:2; position:relative; }
  /* skip + mute ride the header's right side together (skip to the LEFT of
     mute), so they share one row instead of the skip dropping beneath */
  .header-actions{ display:flex; align-items:center; gap:12px; pointer-events:none; }
  .intro-ctrls{ display:flex; align-items:center; }
  .skip-intro{
    font-family:var(--mono); font-size:10px; font-weight:500;
    letter-spacing:0.18em; text-transform:uppercase; white-space:nowrap;
    color:rgb(var(--fg-rgb) / 0.6); background:rgb(var(--bg-rgb) / 0.4);
    border:1px solid rgb(var(--fg-rgb) / 0.22); border-radius:9999px;
    padding:9px 17px; cursor:pointer; opacity:0; pointer-events:auto;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:color 0.2s, border-color 0.2s;
  }
  .skip-intro:hover{ color:#fff; border-color:rgb(var(--fg-rgb) / 0.5); }
  /* master narration mute — rides the fixed header (right side) for the whole
     experience. The header is pointer-events:none; the button opts back in */
  .sound-toggle{
    width:34px; height:34px; display:grid; place-items:center; padding:0;
    color:rgb(var(--fg-rgb) / 0.6); background:rgb(var(--bg-rgb) / 0.4);
    border:1px solid rgb(var(--fg-rgb) / 0.22); border-radius:9999px;
    cursor:pointer; pointer-events:auto;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:color 0.2s, border-color 0.2s;
  }
  .sound-toggle:hover{ color:#fff; border-color:rgb(var(--fg-rgb) / 0.5); }
  .sound-toggle svg{ width:15px; height:15px; display:block; }
  .sound-toggle .ic-off{ display:none; }
  .sound-toggle.off .ic-on{ display:none; }
  .sound-toggle.off .ic-off{ display:block; }
  .sound-toggle.off{ color:rgb(var(--fg-rgb) / 0.38); }
  /* section narration spot (testing on #vs): circular play/pause, the track's
     progress drawn around the circumference. Generic class — drop one per
     section if the test lands */
  .sec-vo{
    position:relative; width:48px; height:48px; margin:0 auto 20px;
    display:grid; place-items:center; padding:0;
    background:#0B1429;   /* opaque — the wave passes behind, not through */
    border:1px solid rgb(var(--fg-rgb) / 0.22); border-radius:50%;
    color:rgb(var(--fg-rgb) / 0.8); cursor:pointer;
    transition:color 0.2s, border-color 0.2s;
  }
  .sec-vo:hover{ color:#fff; border-color:rgb(var(--fg-rgb) / 0.5); }
  .sec-vo .sv-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
  .sec-vo .sv-ring circle{ fill:none; stroke-width:2; }
  .sec-vo .sv-track{ stroke:rgb(var(--fg-rgb) / 0.16); }
  .sec-vo .sv-prog{
    stroke:var(--ai); stroke-linecap:round;
    stroke-dasharray:138.23; stroke-dashoffset:138.23;
  }
  .sec-vo .sv-play{ width:21px; height:21px; margin-left:2px; }
  .sec-vo .sv-pause{ width:17px; height:17px; display:none; }
  .sec-vo.playing .sv-play{ display:none; }
  .sec-vo.playing .sv-pause{ display:block; }
  /* left-aligned sections (how-it-works) — no auto-centering */
  .sec-vo.left{ margin-left:0; }
  /* waveform stage: the living audio bloom behind each section's play spot.
     Present but not huge — the canvas is masked so the wave dissolves well
     inside its own span and never hits an edge. Always centered, even in
     left-aligned sections (it's atmosphere, not copy). */
  .vo-stage{
    position:relative; width:min(900px, 94vw); height:130px;
    margin:0 auto 6px; display:grid; place-items:center;
  }
  .vo-stage .sec-vo{ margin:0; }
  .mock .m-headline{ text-wrap:balance; }   /* no widowed last words in modules */
  .vo-stage.awake .vo-wave{ opacity:1; }
  .vo-wave{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; transition:opacity 0.9s ease;   /* fades in as you arrive */
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 31%, #000 69%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 31%, #000 69%, transparent);
  }
  /* timed narration cues: as the how-it-works clip plays, the element being
     talked about gets a beat of attention. Ringed pulse for cards, scale-only
     pop for the phone/personas (their wrappers are square-cornered — a ring
     wouldn't hug the artwork). lcFlutter is set inline per chip (it overrides
     chipBreathe for its run, and its opacity:1 keyframes momentarily lift
     .lc-dim chips so the WHOLE library reads). vo-bold thickens the dashed
     spines via transition; ribbons get a saturation kiss. */
  .vo-spot{ animation:voSpot 1.6s cubic-bezier(0.22,1,0.36,1); }
  @keyframes voSpot{
    0%{ transform:scale(1); outline:2px solid rgba(94,134,255,0); outline-offset:7px; }
    22%{ transform:scale(1.03); outline-color:rgba(94,134,255,0.5); }
    60%{ transform:scale(1.018); outline-color:rgba(94,134,255,0.28); }
    100%{ transform:scale(1); outline:2px solid rgba(94,134,255,0); outline-offset:7px; }
  }
  .vo-pop{ animation:voPop 1.5s cubic-bezier(0.22,1,0.36,1); }
  /* a slight breath for headlines — barely-there lift and settle */
  .vo-head{ animation:voHead 1.5s cubic-bezier(0.22,1,0.36,1); }
  @keyframes voHead{
    0%,100%{ transform:scale(1) translateY(0); }
    30%{ transform:scale(1.014) translateY(-2px); }
  }
  @keyframes voPop{
    0%,100%{ transform:scale(1); }
    24%{ transform:scale(1.05); }
    62%{ transform:scale(1.025); }
  }
  @keyframes lcFlutter{
    0%,100%{ transform:translateY(0) scale(1); }
    40%{ transform:translateY(-3px) scale(1.16); opacity:1; filter:brightness(1.12) saturate(1.25); }
    72%{ opacity:1; }
  }
  .flow-svg .flow{ transition:stroke-width 0.5s ease, opacity 0.5s ease; }
  .flow-svg .ribbon{ transition:filter 0.5s ease; }
  .flow-svg.vo-bold .flow{ stroke-width:3.8; opacity:1; }
  .flow-svg.vo-bold .ribbon{ filter:saturate(1.45) brightness(1.05); }
  /* narration callouts (showcase): the spoken phrase gets a marker-sweep
     highlight + pink ink + a little grow, then settles back — the camera
     dive to the matching guest pill carries the rest of the moment */
  .vo-callout{
    position:relative; display:inline-block;
    padding:0 3px; margin:0 -3px; border-radius:5px;
    background:linear-gradient(rgba(94,134,255,0.16), rgba(94,134,255,0.16))
      no-repeat left center / 0% 82%;
    transition:color 0.35s ease, transform 0.35s ease, background-size 0.5s ease;
  }
  .vo-callout.hit{
    color:var(--ai); transform:scale(1.07);
    background-size:100% 82%;
  }
  /* "AI builds the UI" (whatis cue): blueprint construction. Each word turns
     into a sketch — hollow stroked glyphs with architectural extension lines
     drawn around the word box — then the letterforms FILL bottom-to-top like
     poured concrete (background-clip:text with a rising gradient), the
     scaffolding fades, and the word stands. Ends visually identical to the
     resting text, so removing the class after animationend is seamless. */
  .build-ai, .build-w{ display:inline-block; position:relative; }
  .build-ai.on{ animation:buildAi 1.9s cubic-bezier(0.4,0,0.3,1) both; }
  @keyframes buildAi{
    0%{ color:var(--fg); }
    32%{ color:var(--ai); }
    68%{ color:var(--ai); }
    100%{ color:var(--fg); }
  }
  .build-w.on{
    color:transparent;
    -webkit-text-stroke:1.5px rgba(127,194,232,0.95);
    background-image:linear-gradient(rgb(var(--fg-rgb)), rgb(var(--fg-rgb)));
    background-repeat:no-repeat; background-position:0% 100%;
    -webkit-background-clip:text; background-clip:text;
    animation:bwCast 1.05s cubic-bezier(0.3,0,0.2,1) both;
  }
  @keyframes bwCast{
    0%{ background-size:100% 0%; -webkit-text-stroke-color:rgba(127,194,232,0); }
    14%{ -webkit-text-stroke-color:rgba(127,194,232,0.95); }
    34%{ background-size:100% 0%; }
    82%{ background-size:100% 100%; -webkit-text-stroke-color:rgba(127,194,232,0.5); }
    100%{ background-size:100% 100%; -webkit-text-stroke-color:rgba(127,194,232,0); }
  }
  /* extension rails: thin horizontal guides overshooting the word box at cap
     and base, like an architect's measure lines */
  .build-w.on::before{
    content:''; position:absolute; left:-0.4em; right:-0.4em; top:0.04em; bottom:0.1em;
    border-top:1px solid rgba(127,194,232,0.55);
    border-bottom:1px solid rgba(127,194,232,0.55);
    pointer-events:none; transform-origin:left center;
    animation:bwRails 1.05s cubic-bezier(0.3,0,0.2,1) both;
  }
  @keyframes bwRails{
    0%{ opacity:0; transform:scaleX(0); }
    22%{ opacity:1; transform:scaleX(1); }
    66%{ opacity:1; }
    100%{ opacity:0; transform:scaleX(1); }
  }
  /* corner posts: vertical ticks at the word's flanks, overshooting the rails */
  .build-w.on::after{
    content:''; position:absolute; left:-0.18em; right:-0.18em; top:-0.1em; bottom:-0.04em;
    border-left:1px solid rgba(127,194,232,0.4);
    border-right:1px solid rgba(127,194,232,0.4);
    pointer-events:none; transform-origin:center top;
    animation:bwPosts 1.05s cubic-bezier(0.3,0,0.2,1) both;
  }
  @keyframes bwPosts{
    0%{ opacity:0; transform:scaleY(0); }
    16%{ opacity:0; }
    34%{ opacity:1; transform:scaleY(1); }
    62%{ opacity:1; }
    100%{ opacity:0; transform:scaleY(1); }
  }
  /* showcase camera: the guest strip becomes a tracking shot. The rows keep
     drifting; .gz-cam is the dolly (rAF-driven spring transform that chases
     the named guest), the strip's mask stays put so the frame reads like a
     letterboxed window the pills fly past. Padding + negative margin give
     the zoomed shot vertical room inside overflow:hidden without moving a
     pixel of layout; pointer-events re-enable on the chips so the taller
     box never swallows hovers meant for the copy above. */
  .guest-strip{ padding:240px 0; margin:-240px 0; pointer-events:none; }
  .guest-chip{ pointer-events:auto; }
  .gz-cam{
    display:flex; flex-direction:column; gap:14px; width:100%;
    will-change:transform; transform-origin:50% 50%;
  }
  /* the camera lands: a pink ring blooms off the named guest's pill */
  .guest-chip.cam-hit{ animation:camHit 1.5s cubic-bezier(0.22,1,0.36,1); }
  @keyframes camHit{
    0%{ outline:2px solid rgba(94,134,255,0); outline-offset:2px; }
    20%{ outline-color:rgba(94,134,255,0.65); outline-offset:3px; }
    60%{ outline-color:rgba(94,134,255,0.3); }
    100%{ outline:2px solid rgba(94,134,255,0); outline-offset:5px; }
  }
  /* "every one of them" — a tiny pulse rolls across the wide shot */
  .guest-chip.cam-ripple{ animation:camRipple 0.9s cubic-bezier(0.22,1,0.36,1); }
  @keyframes camRipple{
    0%,100%{ transform:scale(1); }
    35%{ transform:scale(1.045); }
  }
  /* light product zone: dark ink on the pale gradient */
  .lp-light .sec-vo, .lp-white .sec-vo{
    color:rgba(14,26,43,0.72);
    background:#E3EEF4;   /* the zone's own ground, not stark white */
    border-color:rgba(14,26,43,0.2);
  }
  .lp-light .sec-vo:hover, .lp-white .sec-vo:hover{ color:#0E1A2B; }
  .lp-light .sec-vo .sv-track, .lp-white .sec-vo .sv-track{ stroke:rgba(14,26,43,0.16); }
  .lp-light .sec-vo .sv-prog, .lp-white .sec-vo .sv-prog{ stroke:#0D3CAA; }   /* deep blue progress in the light zone */

  /* ---------- PIN gate: keeps the demo off the open web ---------- */
  html.gated{ overflow:hidden; }
  .gate{
    position:fixed; inset:0; z-index:1000;
    display:grid; place-items:center;
    background:
      radial-gradient(ellipse 70% 60% at 20% 10%, rgba(42,72,222,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 85% 85%, rgba(242,166,90,0.09) 0%, transparent 60%),
      var(--bg);
    color:var(--fg);
  }
  .gate-card{ text-align:center; padding:0 24px; max-width:32rem; }
  .gate-logo{ display:block; height:30px; width:auto; margin:0 auto 16px; }   /* client mark atop the launch screen */
  .gate-eyebrow{
    font-family:var(--mono); font-size:10px; letter-spacing:0.26em;
    text-transform:uppercase; color:var(--ai); margin-bottom:14px;
  }
  .gate-card h2{
    font-size:1.55rem; font-weight:700; letter-spacing:-0.015em; line-height:1.2; white-space:nowrap;
  }
  .gate-card form{
    display:flex; gap:10px; justify-content:center; margin-top:22px;
  }
  .gate-card input{
    width:130px; text-align:center;
    font-family:var(--mono); font-size:16px; letter-spacing:0.3em;   /* ≥16px or iOS zooms on focus and stays zoomed */
    color:#fff; background:rgb(var(--fg-rgb) / 0.07);
    border:1px solid rgb(var(--fg-rgb) / 0.22); border-radius:12px;
    padding:12px 8px 12px 14px; outline:none;
    transition:border-color 0.2s;
  }
  .gate-card input:focus{ border-color:rgb(var(--fg-rgb) / 0.5); }
  .gate-card button{
    font-family:inherit; font-size:13.5px; font-weight:600; white-space:nowrap;
    color:#fff; background:#1D3AEA; border:none; border-radius:12px;
    padding:12px 20px; cursor:pointer; transition:background 0.2s;
  }
  .gate-card button:hover{ background:#3552F5; }
  /* launch screen: the shared sound-choice fork — shown to returning visitors
     directly, and to fresh visitors the moment the PIN clears. One line on
     what's behind the button, then a clear with-sound / silent choice. The
     button click is the gesture that unlocks narration (autoplay policy). */
  .gate-lede{
    margin:14px auto 0; max-width:none; white-space:nowrap;
    font-size:13.5px; line-height:1.55; color:var(--muted);
  }
  @media (max-width:560px){
    .gate-card{ max-width:23rem; }
    .gate-lede{ white-space:normal; max-width:21rem; }   /* wrap on small screens */
    .gate-card h2{ white-space:normal; }
  }
  .gate-launch{
    display:flex; flex-direction:column; gap:10px;
    width:min(264px, 100%); margin:24px auto 0;
  }
  .gate-card .gate-play{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:13px 22px; margin:0;
    font-size:14px; font-weight:600;
  }
  .gate-card .gate-play .gp-ic{ width:17px; height:17px; display:block; flex:none; }
  .gate-card .gate-play.primary{ background:#1D3AEA; color:#fff; }
  .gate-card .gate-play.primary:hover{ background:#3552F5; }
  .gate-card .gate-play.ghost{
    background:rgb(var(--fg-rgb) / 0.06);
    border:1px solid rgb(var(--fg-rgb) / 0.22);
    color:rgb(var(--fg-rgb) / 0.82);
  }
  .gate-card .gate-play.ghost:hover{
    background:rgb(var(--fg-rgb) / 0.10);
    border-color:rgb(var(--fg-rgb) / 0.45); color:#fff;
  }
  .gate-hint{
    margin-top:16px; font-size:11.5px; color:rgb(var(--fg-rgb) / 0.4);
  }
  .gate-card.wrong{ animation:gateShake 0.4s ease; }
  @keyframes gateShake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-9px); } 40%{ transform:translateX(8px); }
    60%{ transform:translateX(-6px); } 80%{ transform:translateX(4px); }
  }

  /* ================= LANDING PAGE (below the hero experience) ================= */
  /* scroll cue: a solid disc half-sunk into the bottom edge, label arched over it */
  /* left is set from JS to vw/2 — the same coordinate the phone centers on,
     so the cue always sits exactly under the mock (CSS 50% excludes the
     scrollbar and drifts a few px off the wall's coordinate system) */
  .scroll-cue{
    position:absolute; bottom:0; left:50%; translate:-50% 0;
    width:128px; height:84px; z-index:40;
    background:none; border:none; padding:0; cursor:pointer;
    opacity:0; transition:opacity 0.7s;
    transform-origin:50% 100%;
  }
  .cue-arc{
    position:absolute; inset:0; width:100%; height:100%; overflow:visible;
    filter:drop-shadow(0 2px 10px rgb(var(--bg-rgb) / 0.95));
  }
  .cue-arc text{
    font-family:var(--mono); font-size:8.5px; font-weight:500;
    letter-spacing:0.3em; text-transform:uppercase;
    fill:rgb(var(--fg-rgb) / 0.62);
  }
  /* quiet glass chip, half-sunk — same chrome family as the narration spots,
     lit from beneath by a soft blue ambience instead of being a blue ball */
  .cue-disc{
    position:absolute; left:50%; bottom:-26px; translate:-50% 0;
    width:64px; height:64px; border-radius:50%;
    background:rgba(11,20,41,0.78);
    border:1px solid rgb(var(--fg-rgb) / 0.2);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 -6px 30px rgba(29,58,234,0.38), 0 0 18px rgba(29,58,234,0.18);
    transition:border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease;
  }
  .scroll-cue:hover .cue-disc{
    border-color:rgb(var(--fg-rgb) / 0.45);
    box-shadow:0 -8px 40px rgba(29,58,234,0.55), 0 0 26px rgba(29,58,234,0.3);
    translate:-50% -4px;
  }
  .cue-disc svg{
    position:absolute; left:50%; top:11px; translate:-50% 0;
    width:26px; height:26px; color:rgb(var(--fg-rgb) / 0.92);
    animation:cueBob 2.2s ease-in-out infinite;
  }
  @keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
  @media (prefers-reduced-motion: reduce){ .cue-disc svg{ animation:none; } }


  .lp{
    position:relative; isolation:isolate;
    background:
      radial-gradient(ellipse 60% 40% at 80% 8%, rgba(42,72,222,0.16) 0%, transparent 60%),
      radial-gradient(ellipse 50% 35% at 12% 45%, rgba(94,134,255,0.07) 0%, transparent 60%),
      radial-gradient(ellipse 55% 35% at 85% 90%, rgba(242,166,90,0.08) 0%, transparent 60%),
      var(--bg);
  }
  /* glow bridge: the hero's aura is clipped at its bottom edge, so it would
     hard-stop at the seam. This continues the same blue+pink glow into the top
     of the landing page, so the light flows across the boundary unbroken. */
  .lp::before{
    content:''; position:absolute; left:0; right:0; top:0; height:240px;
    pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 46% 120% at 50% 0%, rgba(56,112,255,0.20) 0%, rgba(56,112,255,0) 70%),
      radial-gradient(ellipse 24% 100% at 50% 0%, rgba(94,134,255,0.11) 0%, rgba(94,134,255,0) 72%);
  }
  .lp-section{ max-width:1160px; margin:0 auto; padding:130px 28px 0; }
  .lp-section.last{ padding-bottom:120px; }
  .lp-eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
    color:var(--ai); margin-bottom:18px;
  }
  /* section handles moved into the nav bar — only nested eyebrows
     (e.g. the week-one block's) still render in place */
  .lp-section > .lp-eyebrow{ display:none; }
  .lp-h{
    font-size:clamp(34px, 4.6vw, 58px); font-weight:700; letter-spacing:-0.025em;
    line-height:1.04; max-width:820px; text-wrap:balance;
  }
  .lp-sub{
    margin-top:22px; font-size:17px; line-height:1.65;
    color:rgb(var(--fg-rgb) / 0.65); max-width:640px; text-wrap:pretty;
  }
  .lp-center{ text-align:center; }
  .lp-center .lp-h, .lp-center .lp-sub{ margin-left:auto; margin-right:auto; }

  /* how it works: the central data layer feeding the screen */
  /* this section runs denser than the centered ones — shorter wave band,
     header right under it, grid tucked up beneath the lede */
  #how{ padding-top:96px; }
  #how .lp-h{ max-width:none; }   /* one line on desktop — the 820px cap forced a break */
  #how .lp-h .hw{ display:inline-block; will-change:transform; }   /* per-word follow-along float */
  /* header reads centered like every other section; the grid below stays left */
  #how .lp-eyebrow, #how .lp-h, #how .lp-sub{ text-align:center; }
  #how .lp-h, #how .lp-sub{ margin-left:auto; margin-right:auto; }
  #how .vo-stage{ height:96px; margin-bottom:0; }
  #how .how-grid{ margin-top:48px; }
  .how-grid{
    display:grid; grid-template-columns:1.05fr 180px 0.95fr;
    gap:0 14px; align-items:center; margin-top:72px;
    position:relative;
  }
  .flow-svg{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none; overflow:visible;
  }
  .how-grid .dl-card, .how-grid .how-arrows, .how-grid .how-right{ position:relative; z-index:1; }
  /* liquid glass: translucent ground + backdrop blur, so the connector
     strands passing beneath melt into soft color instead of competing
     with the pills (the old opaque white slab was too heavy; bare ground
     was too thin). Static element — safe for backdrop sampling. */
  .dl-card{
    color:var(--ink, #0E1A2B); border-radius:24px;
    padding:26px 28px 24px;
    background:rgba(255,255,255,0.4);
    backdrop-filter:blur(14px) saturate(1.25);
    -webkit-backdrop-filter:blur(14px) saturate(1.25);
    border:1px solid rgba(255,255,255,0.65);
    box-shadow:0 24px 60px -28px rgba(14,46,120,0.25);
  }
  /* a compact root for the column — without the card, the bare intro line
     floated; the short rule ties the heading to its library */
  .dl-head{ font-size:19px; font-weight:700; letter-spacing:-0.015em; color:#0E1A2B; }
  .dl-rule{
    width:min(430px, 100%); height:1px; margin:12px 0 10px;
    background:rgba(14,26,43,0.14);
  }
  .dl-card .dl-sub{ font-size:14px; color:#5A6878; max-width:420px; }
  .dl-group{ margin-top:20px; }
  .dl-label{
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
    color:#9AA4B2; margin-bottom:9px;
    transition:color 0.4s ease;
  }
  /* the (?) that becomes a tiny player — each ingredient explains itself */
  .dl-vo{
    position:relative; width:22px; height:22px; flex:none;
    display:inline-grid; place-items:center; padding:0;
    background:transparent; border:none; cursor:pointer;
    color:rgba(14,26,43,0.45);
    transition:color 0.2s;
  }
  .dl-vo:hover{ color:#0E1A2B; }
  .dv-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
  .dv-ring circle{ fill:none; stroke-width:1.6; }
  .dv-track{ stroke:rgba(14,26,43,0.16); }
  .dv-prog{ stroke:var(--dv-c, #2A48DE); stroke-linecap:round; }
  .dv-q{ font-family:var(--mono); font-size:11px; font-weight:600; line-height:1; }
  .dv-play, .dv-pause{ width:11px; height:11px; display:none; }
  .dv-play{ margin-left:1px; }
  .dl-vo:hover .dv-q{ display:none; }
  .dl-vo:hover .dv-play{ display:block; }
  .dl-vo[data-state="playing"] .dv-q, .dl-vo[data-state="playing"] .dv-play{ display:none; }
  .dl-vo[data-state="playing"] .dv-pause{ display:block; }
  .dl-vo[data-state="paused"] .dv-q{ display:none; }
  .dl-vo[data-state="paused"] .dv-play{ display:block; }
  .dl-vo[data-lib="ctx"]{ --dv-c:#3B5878; }
  .dl-vo[data-lib="pat"]{ --dv-c:#2A48DE; }
  .dl-vo[data-lib="sig"]{ --dv-c:#5E86FF; }
  /* while an ingredient tells its story, it takes the room: the label inks
     up, the other two groups recede, and a soft wave travels its chips */
  .dl-group{ transition:opacity 0.5s ease, filter 0.5s ease; }
  .dl-group.explaining .dl-label{ color:#0E1A2B; }
  .dl-card.explaining-any .dl-group:not(.explaining){ opacity:0.35; filter:saturate(0.5); }
  .dl-group.explaining .lc-chip.lc-dim,
  .dl-group.explaining .lc-pat.lc-dim{ opacity:1; filter:none; }
  .dl-group.explaining .lc-chip.lc-hot{ box-shadow:none; }
  .dl-group.explaining .lc-pat.lc-hot .lcp-thumb{
    border-color:rgba(14,26,43,0.10);
    box-shadow:0 3px 10px rgba(14,46,120,0.10);
  }
  .dl-group.explaining .lc-pat.lc-hot > s{ color:rgba(14,26,43,0.55); font-weight:500; }
  @keyframes lcWave{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.07); filter:brightness(1.1); } }
  .lc-chip.lc-wave, .lc-pat.lc-wave{ animation:lcWave 0.65s ease; }
  /* narration call-out: the named chip jumps to full strength for a beat —
     the animation's opacity:1 overrides lc-dim for its run */
  @keyframes dvHit{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.14); opacity:1; filter:brightness(1.06) saturate(1.15); }
    70%{ opacity:1; }
    100%{ transform:scale(1); }
  }
  .lc-chip.dv-hit, .lc-pat.dv-hit{ animation:dvHit 0.85s cubic-bezier(0.22,1,0.36,1); }
  /* "from scratch": the thumbs regress to architecture lines — outlines on
     dashed paper — then pour back in as the catalogue reclaims them */
  .lcp-thumb, .lcp-thumb i, .lcp-thumb .b, .lcp-thumb .grid i,
  .lcp-thumb .cols i, .lcp-thumb .btn, .lcp-thumb .d, .lcp-thumb .c{
    transition:background-color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
  }
  .lc-pat.bp .lcp-thumb{
    background:rgba(255,255,255,0.3);
    border:1px dashed rgba(42,72,222,0.55);
    box-shadow:none;
  }
  .lc-pat.bp .lcp-thumb i, .lc-pat.bp .lcp-thumb .b, .lc-pat.bp .lcp-thumb .grid i,
  .lc-pat.bp .lcp-thumb .cols i, .lc-pat.bp .lcp-thumb .btn,
  .lc-pat.bp .lcp-thumb .d, .lc-pat.bp .lcp-thumb .c{
    background:transparent;
    box-shadow:inset 0 0 0 1px rgba(42,72,222,0.5);
  }
  /* evening re-skin (moments story): the SAME screen eases into the dark
     register and back — the guest hasn't changed, the moment has */
  .static-phone.nightcap .mock, .static-phone.nightcap .mock *{
    transition:background-color 0.7s ease, color 0.7s ease,
               border-color 0.7s ease, filter 0.7s ease, opacity 0.7s ease;
  }
  /* vs story: the template side steps into grey while the narration calls
     it out, then color returns and the GenUI bullets answer one by one */
  .vs-grid > .vs-col{ transition:opacity 0.6s ease, filter 0.6s ease; }
  .vs-col.tpl-dim{ opacity:0.35; filter:grayscale(0.85) saturate(0.4); }
  @keyframes seamHit{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.12); box-shadow:0 0 20px rgba(94,134,255,0.6); }
    100%{ transform:scale(1); }
  }
  .seam-chip.seam-hit{ animation:seamHit 0.7s cubic-bezier(0.22,1,0.36,1); }
  /* cinematic zoom (whatis story): the section becomes a stage. The camera
     eases in, copy and cards clear the floor, the three ingredients float
     in as physical objects, ascend, and everything falls back in layers. */
  #whatis{ position:relative; }
  .lp-section.cine{ transition:none; }   /* gsap owns the transform — the .lazy transition must not fight it */
  .cine-stage{
    position:absolute; left:4%; right:4%; top:34%; bottom:4%;
    pointer-events:none; z-index:3;
  }
  /* the title outranks the floaters — ascending objects pass BEHIND it */
  #whatis .lp-h, #whatis .lp-eyebrow, #whatis .vo-stage{ position:relative; z-index:4; }
  /* …and carries a soft scrim of the page ground, so anything passing
     behind it dims into the navy instead of colliding with the glyphs.
     Sits under the text but over the cine stage (z:-1 inside the title's
     own stacking context); invisible against the bare background at rest. */
  #whatis .lp-h::before{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    inset:-90px -120px -34px;
    background:radial-gradient(ellipse closest-side at 50% 54%,
      rgba(5,11,31,0.92) 0%, rgba(5,11,31,0.78) 46%, rgba(5,11,31,0) 100%);
  }
  /* the ±120px side bleed overflows the viewport below ~1060px (it caused
     mobile horizontal scroll) — hug the headline there; the floater-dimming
     side room is only needed on the wide desktop cinematic anyway */
  @media (max-width:1100px){ #whatis .lp-h::before{ left:0; right:0; } }
  .cine-item{
    position:absolute; will-change:transform;
    display:flex; flex-direction:column; align-items:center; gap:7px;
  }
  .cine-item > s{
    text-decoration:none; white-space:nowrap;
    font-family:var(--mono); font-size:10px; letter-spacing:0.18em;
    text-transform:uppercase; color:rgb(var(--fg-rgb) / 0.45);
  }
  /* the floating mini patterns run larger than their library cousins */
  .cine-item .lcp-thumb{ width:96px; height:68px; padding:10px; gap:5px; border-radius:11px; box-shadow:0 14px 30px rgba(0,0,0,0.45); }
  .cine-item .lcp-thumb i{ height:5px; border-radius:2.5px; }
  .cine-item .lcp-thumb .b{ height:22px; border-radius:5px; }
  .cine-item .lcp-thumb .grid i{ height:17px; border-radius:4px; }
  .cine-item .lcp-thumb .cols i{ height:24px; }
  .cine-item .lcp-thumb .btn{ height:10px; }
  .cine-item .lcp-thumb .row{ gap:4px; }
  .cine-item .lcp-thumb .d{ width:6px; height:6px; }
  .cine-item .lcp-thumb .c{ width:14px; height:14px; }
  /* a dislike gets crossed out as the narration says "avoid" */
  .lc-chip{ position:relative; }
  .lc-chip.crossed::after{
    content:''; position:absolute; left:8%; right:8%; top:50%; height:2px;
    border-radius:1px; background:rgba(222,62,94,0.9);
    transform:scaleX(0); transform-origin:left center;
    animation:strikeIn 0.4s cubic-bezier(0.3,0,0.2,1) 0.05s forwards;
  }
  /* …and the strike RETRACTS to the right when the moment passes */
  .lc-chip.crossed.out::after{
    transform:scaleX(1); transform-origin:right center;
    animation:strikeOut 0.4s cubic-bezier(0.3,0,0.2,1) forwards;
  }
  @keyframes strikeIn{ to{ transform:scaleX(1); } }
  @keyframes strikeOut{ to{ transform:scaleX(0); } }
  /* the Time of day pill turns to night for a breath */
  .lc-chip.night{
    background:#0E1A33;
    border-color:rgba(125,175,255,0.45);
    color:#BCD2F5;
    box-shadow:0 0 14px -2px rgba(60,90,200,0.55);
  }
  .dl-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  /* chips match the hero wall vocabulary: dark context, teal patterns, pink signals */
  .lc-chip{
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:0.06em;
    text-transform:uppercase; border-radius:9999px; padding:6.5px 11.5px;
    background:rgba(9,18,40,0.88); color:rgba(255,255,255,0.92);
    border:1px solid rgba(255,255,255,0.14);
    --chip-c:#9AA4B2;
    /* NO idle transform animation here: the narration wave/hit/select pops
       borrow the animation slot, and restarting a phase-shifted breathe on
       exit made chips SNAP mid-bob (the "jitter while playing"). The dots
       pulse and the waves travel — the chips themselves hold still. */
  }
  .lc-chip i{
    display:block; width:7px; height:7px; border-radius:50%; flex:none;
    background:var(--chip-c);
    box-shadow:0 0 9px var(--chip-c);
    animation:dotBreathe 2.8s ease-in-out infinite;
  }
  .lc-chip.pat{
    background:#fff; border:1px solid rgba(42,72,222,0.35); color:var(--brand);
    --chip-c:#3E63F0;
  }
  .lc-chip.sig{
    background:#fff; border:1px solid rgba(94,134,255,0.32); color:#1D3AEA;
    --chip-c:#5E86FF;
  }
  /* library highlighting: the current guest pulls only what they need.
     lc-prefixed states — bare .dim is the hero wall's full-surface overlay */
  .lc-chip{ transition:opacity 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease; }
  .lc-chip{ will-change:transform; -webkit-font-smoothing:antialiased; }   /* LCD text makes Chrome snap composited layers to whole pixels */
  .lc-chip{ transition:opacity 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.5s ease; }
  /* a chip PULLED OUT of the cloud while the narration holds it up */
  .lc-chip.dv-lift{
    transform:translateY(-6px) scale(1.12);
    opacity:1; filter:none;
    border-color:rgba(255,255,255,0.34);
    box-shadow:0 12px 26px rgba(0,0,0,0.45), 0 0 18px -4px var(--chip-c);
    z-index:2;
  }
  .lc-chip.dv-lift.dv-hi{ transform:translateY(-9px) scale(1.18); }
  /* the design catalogue shows the patterns THEMSELVES — mini skeletal cards
     instead of named pills. Same hot/dim states as the chips. */
  .lc-pat{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    transition:opacity 0.5s ease, filter 0.5s ease;
  }
  .lcp-thumb{
    width:42px; height:31px; border-radius:6px; padding:4px;
    background:#fff; border:1px solid rgba(14,26,43,0.10);
    box-shadow:0 3px 10px rgba(14,46,120,0.10);
    display:flex; flex-direction:column; justify-content:center; gap:2.5px;
    transition:box-shadow 0.5s ease, border-color 0.5s ease;
  }
  .lcp-thumb i{ display:block; height:2.5px; border-radius:1.5px; background:#9FAEC6; }
  .lcp-thumb .b{ display:block; height:11px; border-radius:3px; background:#B9C6DB; }
  .lcp-thumb .row{ display:flex; align-items:center; gap:2.5px; }
  .lcp-thumb .row i{ flex:1; }
  .lcp-thumb .d{ width:3.5px; height:3.5px; border-radius:50%; flex:none; background:#7C8DA8; }
  .lcp-thumb .grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5px; }
  .lcp-thumb .grid i{ height:9px; border-radius:2.5px; background:#B9C6DB; }
  .lcp-thumb .cols{ display:flex; gap:2.5px; }
  .lcp-thumb .cols i{ flex:1; height:14px; border-radius:2.5px; background:#B9C6DB; }
  .lcp-thumb .btn{ display:block; height:6px; border-radius:9999px; width:62%; margin:0 auto; background:#8DA0BE; }
  .lcp-thumb .c{ width:8px; height:8px; border-radius:50%; background:#B9C6DB; flex:none; }
  .lcp-thumb .dash{ display:block; height:0; border-top:1.5px dashed #B9C6DB; }
  .lc-pat > s{
    text-decoration:none; white-space:nowrap;
    font-family:var(--mono); font-size:7.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:rgba(14,26,43,0.55);
  }
  .lc-pat.lc-dim{ opacity:0.35; filter:saturate(0.4); }
  .lc-pat.lc-hot .lcp-thumb{
    border-color:#2A48DE;
    box-shadow:0 0 14px -2px rgba(42,72,222,0.55), 0 3px 10px rgba(14,46,120,0.12);
  }
  .lc-pat.lc-hot > s{ color:#2A48DE; font-weight:600; }
  /* the moment a chip is chosen it pops — sequenced by JS so the old
     selection visibly lets go BEFORE the new one lights up */
  .lc-chip.lc-sel, .lc-pat.lc-sel{ animation:lcSel 0.5s cubic-bezier(0.22,1,0.36,1); }
  @keyframes lcSel{ 0%{ transform:scale(1); } 45%{ transform:scale(1.09); } 100%{ transform:scale(1); } }
  .lc-chip.lc-dim{ opacity:0.3; filter:saturate(0.35); }
  .lc-chip.lc-hot{ box-shadow:0 0 18px -4px var(--chip-c), 0 0 0 1.5px var(--chip-c) inset; }
  .dl-chips .lc-chip:nth-child(2n){ animation-delay:-1.6s; }
  .dl-chips .lc-chip:nth-child(3n){ animation-delay:-3.1s; }
  .dl-chips .lc-chip:nth-child(2n) i{ animation-delay:-0.9s; }
  .dl-chips .lc-chip:nth-child(3n) i{ animation-delay:-1.9s; }
  @keyframes chipBreathe{ 0%,100%{ transform:translate3d(0,0,0) rotate(0.015deg); } 50%{ transform:translate3d(0,-2px,0) rotate(-0.015deg); } }
  @keyframes dotBreathe{
    0%,100%{ transform:scale(1); box-shadow:0 0 9px var(--chip-c); }
    50%{ transform:scale(1.3); box-shadow:0 0 14px var(--chip-c); }
  }
  .how-arrows{ align-self:stretch; position:relative; }
  .flow-svg .flow{ fill:none; stroke-linecap:round; }
  /* connectors: everything reads soft — wide low-alpha spines and comets
     wear their own blur so no element has a wire-crisp edge (the hard
     lines fought the waveform language). */
  .flow-svg .flow.in{ stroke-width:4.2; filter:blur(2.4px); animation:flowBreathe 5.2s ease-in-out infinite; }
  .flow-svg .flow.out{ stroke-width:4.6; filter:blur(2.4px); animation:flowBreathe 4.1s ease-in-out infinite; }
  @keyframes flowBreathe{ 0%,100%{ opacity:0.22; } 50%{ opacity:0.46; } }
  .flow-svg .flow-glow{
    fill:none; stroke-linecap:round; stroke-width:12;
    filter:blur(5px);
    animation:glowBreathe 5.8s ease-in-out infinite;
  }
  @keyframes glowBreathe{ 0%,100%{ opacity:0.14; } 50%{ opacity:0.3; } }
  .flow-svg .flow-pulse{
    fill:none; stroke-linecap:round; stroke-width:5.5;
    opacity:0.5; filter:blur(3px);
    stroke-dasharray:30 220;
    animation-name:cometFlow; animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  @keyframes cometFlow{ to{ stroke-dashoffset:-250; } }
  .flow-svg .ribbon{ stroke:none; filter:blur(4px); }
  /* adjacent partner strand: dotted, muted, no ribbon/glow/comet — it reads as
     "possible," not part of the GenUI flow. Sourced from the data layer, not
     the orb, so push never looks like a GenUI output. */
  .flow-svg .flow.partner{
    stroke:#8A95A4; stroke-width:1.8; fill:none; filter:none;
    stroke-dasharray:1.5 7; opacity:0.55;
    animation:partnerDash 3.6s linear infinite;
  }
  @keyframes partnerDash{ to{ stroke-dashoffset:-17; } }
  .flow-svg.vo-bold .flow.partner{ stroke-width:1.8; opacity:0.6; }
  .flow-svg .flow-tag{
    fill:rgba(14,26,43,0.4); font-family:var(--mono);
    font-size:9px; letter-spacing:0.16em;
  }

  /* client logo in the section corner — bare, generous */
  .sec-client{ position:absolute; top:134px; right:28px; display:none; }
  .sec-client.on{ display:block; }
  #secClient{ display:none; }   /* logo removed from the section corner ONLY — header cobrand stays */
  .sec-client img{ display:block; height:58px; width:auto; }
  .genui-orb{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:72px; height:72px; border-radius:50%;
    background:radial-gradient(circle at 30% 26%,
      rgba(255,255,255,0.95) 0%, rgba(255,210,228,0.85) 16%,
      #7DAFFF 38%, #5E86FF 64%, #101E72 100%);
    box-shadow:
      0 0 0 10px rgba(94,134,255,0.07),
      0 0 30px rgba(94,134,255,0.55),
      0 18px 44px -10px rgba(190,24,93,0.6);
    animation:orbBreathe 3.6s ease-in-out infinite;
  }
  @keyframes orbBreathe{
    0%,100%{ transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 10px rgba(94,134,255,0.07), 0 0 30px rgba(94,134,255,0.55), 0 18px 44px -10px rgba(190,24,93,0.6); }
    50%{ transform:translate(-50%,-50%) scale(1.05); box-shadow:0 0 0 14px rgba(94,134,255,0.1), 0 0 44px rgba(94,134,255,0.7), 0 22px 52px -10px rgba(190,24,93,0.7); }
  }
  .genui-orb i{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:26px; height:26px;
    background:#fff; clip-path:polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
    opacity:0.95;
  }
  .genui-orb-label{
    position:absolute; left:50%; top:calc(50% + 52px); transform:translateX(-50%);
    font-family:var(--mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
    color:rgba(14,26,43,0.55); white-space:nowrap;
  }
  .how-right{ display:flex; flex-direction:column; align-items:flex-start; gap:34px; }
  .hr-row{ display:flex; align-items:center; gap:36px; }
  .hr-persona-wrap{ display:flex; flex-direction:column; gap:16px; }
  .hr-nav{ display:flex; align-items:center; gap:12px; position:relative; z-index:5; }
  .hr-nav .nav-arrow{
    opacity:1; transform:none; position:static;
    background:rgba(14,26,43,0.07); color:#0E1A2B;
    border:1px solid rgba(14,26,43,0.16);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    transition:background 0.2s;
  }
  .hr-nav .nav-arrow:hover{ background:rgba(14,26,43,0.14); color:#0E1A2B; }
  .hr-count{
    font-family:var(--mono); font-size:10px; letter-spacing:0.22em;
    color:#6B7280; white-space:nowrap;
  }
  .static-phone{ perspective:1050px; perspective-origin:50% 50%; }
  .hr-persona{ display:flex; flex-direction:column; gap:10px; max-width:240px; text-align:left; }
  .hr-persona img{
    width:112px; height:112px; border-radius:50%; object-fit:cover;
    border:3px solid #fff; box-shadow:0 18px 42px rgba(14,46,120,0.28);
  }
  .hr-persona b{ font-size:21px; font-weight:700; color:#0E1A2B; letter-spacing:-0.01em; margin-top:4px; }
  .hr-persona s{
    text-decoration:none; font-family:var(--mono); font-size:10px; letter-spacing:0.2em;
    text-transform:uppercase; color:#6B7280;
  }
  .hr-persona p{ font-size:13.5px; line-height:1.55; color:#5A6878; text-wrap:pretty; margin-top:4px; }
  .mock-label.left{ text-align:left; }
  .mock-label{
    font-family:var(--mono); font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
    color:rgb(var(--fg-rgb) / 0.5); margin-bottom:12px; text-align:center;
  }
  .static-phone{ filter:drop-shadow(0 40px 80px rgba(0,0,0,0.55)); }
  /* push: an infinite STACK — the front card finishes, enlarges a touch and
     fades away while the card waiting behind rides forward and a fresh one
     slips in at the back. The stage holds a fixed measured height so the
     section never reflows. */
  .push-mock{ position:relative; width:min(360px, 100%); border-radius:18px; }   /* the narration ring hugs rounded corners */
  .push-card{
    position:absolute; inset:0;
    display:flex; align-items:center; gap:12px;
    background:rgba(22,24,29,0.92); border-radius:18px; padding:14px 16px;
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:0 14px 32px -14px rgba(0,0,0,0.5);   /* short reach — the caption sits right below */
    text-align:left;
  }
  .push-card.front{ z-index:1; }
  .push-card.back{ z-index:0; }
  .push-card .pi{
    width:38px; height:38px; border-radius:9px; flex:none; position:relative;
    background:var(--ai-grad, linear-gradient(135deg,#7DAFFF,#5E86FF 60%,#1D3AEA));
    background:linear-gradient(135deg,#7DAFFF,#5E86FF 60%,#1D3AEA);
  }
  .push-card .pi::after{
    content:''; position:absolute; inset:28%;
    background:#fff; clip-path:polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  }
  .push-card .pt{ flex:1; min-width:0; }
  .push-card .pt b{ display:block; font-size:13.5px; font-weight:600; color:#fff; }
  .push-card .pt p{ font-size:12.5px; line-height:1.45; color:rgba(255,255,255,0.72); margin-top:2px; }
  .push-card .pt s{ text-decoration:none; float:right; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.45); }
  /* the pool cycles — JS measures the tallest message and pins the stage
     height (104 floor) so nothing ever reflows */
  .push-mock{ min-height:104px; }
  .push-proof{
    margin-top:22px; max-width:360px;
    font-size:12px; line-height:1.5; color:#5A6878; text-wrap:pretty;
  }
  .push-proof s{
    display:block; text-decoration:none; margin-top:5px;
    font-family:var(--mono); font-size:9px; letter-spacing:0.18em;
    text-transform:uppercase; color:#9AA4B2;
  }

  /* guests: full-bleed infinity strip, fading at the edges */
  .guest-zone{
    width:100vw; position:relative; left:50%; transform:translateX(-50%);
    margin-top:64px;
  }
  .guest-strip{
    width:100%; position:relative; overflow:hidden;
    display:flex; flex-direction:column; gap:14px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  /* hover flip: the pill turns over in place to show what GenUI did for
     this guest (replaces the old dotted-thread card, which wandered over
     headlines and off the section). Both faces share one box — the back
     is absolutely inset over the front — so the pill never changes size.
     The pink dot marks the pills that carry a story. */
  .guest-chip{ position:relative; perspective:700px; border-radius:9999px; }   /* the cam-hit outline follows this */
  .gc-inner{
    position:relative; width:max-content; transform-style:preserve-3d;
    transition:transform 0.55s cubic-bezier(0.4,0.2,0.2,1);
  }
  .guest-chip.has-stat:hover .gc-inner{ transform:rotateY(180deg); }
  .gc-front{ position:relative; }
  .guest-chip.has-stat .gc-front::after{
    content:''; position:absolute; top:5px; right:9px; width:6px; height:6px;
    border-radius:50%; background:var(--ai); box-shadow:0 0 8px rgba(94,134,255,0.8);
  }
  /* compound selector on purpose: the shared .gc-face chrome is declared
     LATER in the sheet and would win the background otherwise */
  .gc-face.gc-back{
    position:absolute; inset:0; transform:rotateY(180deg); overflow:hidden;
    flex-direction:column; align-items:center; justify-content:center; gap:1px;
    padding:6px 14px; text-align:center;
    background:#0B1F45; border-color:rgba(94,134,255,0.4);
    box-shadow:0 8px 22px -10px rgba(7,20,40,0.5);
  }
  /* the story fades in once the flip has landed; fades out instantly */
  .gc-back > *{ opacity:0; transition:opacity 0.3s ease; }
  .guest-chip.has-stat:hover .gc-back > *{ opacity:1; transition-delay:0.22s; }
  .gc-back .gb-top{ display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
  .gc-back .gb-n{ font-family:var(--mono); font-size:14.5px; font-weight:700; color:#9DB6F8; }
  .gc-back .gb-t{
    font-family:var(--mono); font-size:8px; letter-spacing:0.16em;
    text-transform:uppercase; color:rgba(255,255,255,0.8);
  }
  .gc-back p{
    font-size:8.5px; line-height:1.25; color:rgba(255,255,255,0.6); text-wrap:balance;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* compound on purpose — the later .guest-chip s rule (10px nowrap)
     outranks a bare .gc-back s and balloons the disclaimer */
  .gc-face.gc-back s{
    text-decoration:none; margin-top:1px;
    font-family:var(--mono); font-size:5px; letter-spacing:0.18em;
    text-transform:uppercase; color:rgba(255,255,255,0.3);
  }
  /* hovering a pill holds its row still so the story can be read */
  .guest-row:hover{ animation-play-state:paused; }
  @media (hover:none), (max-width:767px){
    .guest-chip.has-stat .gc-front::after{ display:none; }
    .gc-inner{ transform:none !important; }
  }
  .guest-row{ display:flex; gap:14px; width:max-content; animation:rowDriftL 75s linear infinite; }
  .guest-row.rev{ animation:rowDriftR 88s linear infinite; }
  @keyframes rowDriftL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @keyframes rowDriftR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
  .guest-chip{ flex:none; }
  .gc-face{
    display:flex; align-items:center; gap:12px;
    background:rgb(var(--fg-rgb) / 0.05); border:1px solid rgb(var(--fg-rgb) / 0.1);
    border-radius:9999px; padding:9px 18px 9px 10px;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .guest-chip img{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; border:1.5px solid rgba(255,255,255,0.35); }
  .guest-chip b{ display:block; font-size:13px; font-weight:600; white-space:nowrap; }
  .guest-chip s{ text-decoration:none; display:block; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:rgb(var(--fg-rgb) / 0.5); margin-top:1px; white-space:nowrap; }

  /* closing */
  /* the winky unicorn: a 1920×1080 lottie comp, letterboxed into a 16:9 box.
     Plays once when it scrolls into view; click winds it back and plays again. */
  .vgv-mark{
    display:block; width:min(340px, 64vw); aspect-ratio:16/9;
    margin:0 auto 4px; padding:0; cursor:pointer;
    /* optical centering: the unicorn's CIRCLE sits ~2.4% right of the lottie
       comp's center (the mane balances the bbox, but the eye reads the
       circle) — nudge so the circle lines up with the narration ring below.
       On the button, not the svg: lottie owns the svg's inline transform */
    transform:translateX(-2.4%);
  }
  .vgv-mark svg{
    display:block; width:100%; height:100%;
    /* no brightness boost — the line art is recolored to brand blue on
       DOMLoaded (initUnicorn), and boosting would drift it off-logo */
    filter:drop-shadow(0 0 26px rgba(29,58,234,0.5));
  }
  /* the closing spot: tucked up under the unicorn, no waveform — the bloom
     fought the mark, so the button stands alone */
  .last .vo-stage{ width:min(560px, 88vw); height:84px; margin-top:-18px; }
  .last .vo-wave{ display:none; }
  .lp-cta-row{ display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap; }
  .lp-footer{
    margin-top:130px; padding:38px 28px 44px; text-align:center;
    border-top:1px solid rgb(var(--fg-rgb) / 0.08);
  }
  .lp-footer .lockup-sm{ width:120px; margin:0 auto 14px; opacity:0.85; }
  .lp-footer .lockup-sm svg{ width:100%; height:auto; display:block; }
  .lp-footer p{
    font-family:var(--mono); font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
    color:rgb(var(--fg-rgb) / 0.45);
  }
  .lp-footer .fh{ color:var(--ai); }   /* on-brand pink heart, not an emoji */
  .lp-footer a{
    color:rgb(var(--fg-rgb) / 0.62); text-decoration:none;
    border-bottom:1px solid rgb(var(--fg-rgb) / 0.22);
    transition:color 0.2s, border-color 0.2s;
  }
  .lp-footer a:hover{ color:#fff; border-color:rgb(var(--fg-rgb) / 0.5); }
  .lp-footer .footer-legal{ margin-top:12px; color:rgb(var(--fg-rgb) / 0.3); }

  /* what-is explainer cards (from the carnival GenUI playbook section) */
  .wg-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
    margin-top:64px; text-align:left;
  }
  .wg-card{
    background:rgb(var(--fg-rgb) / 0.045);
    border:1px solid rgb(var(--fg-rgb) / 0.1);
    border-radius:20px; padding:26px 26px 24px;
  }
  .wg-icon{
    width:46px; height:46px; border-radius:13px; margin-bottom:18px;
    background:rgba(94,134,255,0.12); color:#9DB6F8;
    display:flex; align-items:center; justify-content:center;
  }
  .wg-icon svg{ width:23px; height:23px; display:block; }
  .wg-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
    color:rgb(var(--fg-rgb) / 0.6); margin-bottom:14px;
  }
  .wg-pill i{ display:block; width:7px; height:7px; border-radius:50%; background:var(--ai); box-shadow:0 0 8px rgba(94,134,255,0.7); }
  .wg-card h3{ font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.3; text-wrap:balance; }
  .wg-card ul{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:9px; }
  .wg-card li{
    position:relative; padding-left:16px;
    font-size:13.5px; line-height:1.5; color:rgb(var(--fg-rgb) / 0.62);
    text-wrap:pretty;
  }
  .wg-card li::before{
    content:''; position:absolute; left:0; top:8px;
    width:5px; height:5px; background:var(--brand-light);
  }

  /* proof cards: sourced stats under the how-it-works diagram */
  .how-stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    margin-top:70px; text-align:left;
  }
  .hs-card{
    background:#fff; border-radius:18px; padding:24px 24px 20px;
    border:1px solid rgba(14,26,43,0.06);
    box-shadow:0 1px 2px rgba(14,26,43,0.04), 0 12px 28px -12px rgba(14,46,120,0.10);
  }
  .hs-icon{
    width:40px; height:40px; border-radius:12px; margin-bottom:14px;
    background:rgba(94,134,255,0.1); color:var(--ai);
    display:flex; align-items:center; justify-content:center;
  }
  .hs-icon svg{ width:20px; height:20px; display:block; }
  .hs-card b{
    font-family:var(--mono); font-size:34px; font-weight:700;
    letter-spacing:-0.03em; color:var(--ai);
  }
  .hs-card p{ margin-top:8px; font-size:13.5px; line-height:1.55; color:#5A6878; text-wrap:pretty; }
  .hs-card s{
    display:block; text-decoration:none; margin-top:12px;
    font-family:var(--mono); font-size:9px; letter-spacing:0.18em;
    text-transform:uppercase; color:#9AA4B2;
  }

  /* ---------- Personalization vs GenUI: flip the guest, watch what changes ---------- */
  .vs-ai{ color:var(--ai); }
  /* the headline runs two long sentences; the 820px cap forced a 4-line wrap,
     so lift it and ease the max size so each sentence holds one line */
  #vs .lp-h{ max-width:none; font-size:clamp(32px, 4.3vw, 52px); }
  /* body copy runs as two balanced columns, centered on the headline's axis —
     one centered, ragged column funneled and stacked badly */
  #vs .vs-cols{
    display:flex; gap:52px; align-items:flex-start;
    max-width:940px; margin:24px auto 0; text-align:left;
  }
  #vs .vs-col{ flex:1; min-width:0; }
  #vs .vs-hide{ display:none; }   /* shown via narration + toggle/flip, not as body text */
  #vs .vs-cols .lp-sub{ max-width:none; text-align:left; }
  #vs .vs-cols .lp-sub + .lp-sub{ margin-top:16px; }
  @media (max-width:768px){
    #vs .vs-cols{ flex-direction:column; gap:16px; max-width:560px; text-align:center; }
    #vs .vs-cols .lp-sub{ text-align:center; }   /* centered reads better than ragged-left on a narrow column */
  }
  /* the phone labels carry the comparison — make them read */
  #vs .mock-label{
    font-size:17px; letter-spacing:0.28em; margin-bottom:18px; font-weight:700;
    color:rgb(var(--fg-rgb) / 0.85);
  }
  /* GenUI wears the aurora: gradient ink + a drift of light dust behind it,
     same palette family as the waveforms (desktop + mobile) */
  #vs .vs-label-ai{
    position:relative;
    background:linear-gradient(100deg, #2A48DE 0%, #4F7CFF 32%, #5E86FF 64%, #5AB0F7 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  #vs .vs-label-ai::before{
    content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
    width:150%; height:300%; pointer-events:none; z-index:-1;
    background:
      radial-gradient(14px 10px at 22% 38%, rgba(56,112,255,0.5), transparent 70%),
      radial-gradient(10px 8px at 64% 22%, rgba(94,134,255,0.45), transparent 70%),
      radial-gradient(12px 9px at 82% 62%, rgba(94,134,255,0.4), transparent 70%),
      radial-gradient(8px 7px at 40% 74%, rgba(125,175,255,0.45), transparent 70%);
    filter:blur(5px);
    animation:aiDust 7s ease-in-out infinite alternate;
  }
  @keyframes aiDust{
    0%{ transform:translate(-4px, 2px) scale(1); opacity:0.75; }
    100%{ transform:translate(5px, -3px) scale(1.12); opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){ #vs .vs-label-ai::before{ animation:none; } }
  /* a whisper of pink + blue behind the GenUI phone */
  #vsRich{
    filter:drop-shadow(0 36px 76px rgba(0,0,0,0.55))
           drop-shadow(0 0 44px rgba(94,134,255,0.22))
           drop-shadow(0 0 90px rgba(29,58,234,0.2));
  }
  .vs-toggle{ display:flex; justify-content:center; gap:12px; margin-top:42px; flex-wrap:wrap; }
  .vs-guest{
    display:flex; align-items:center; gap:12px; text-align:left;
    padding:8px 20px 8px 9px; border-radius:9999px;
    background:rgb(var(--fg-rgb) / 0.05); border:1px solid rgb(var(--fg-rgb) / 0.12);
    opacity:0.6;
    transition:border-color 0.25s, background 0.25s, box-shadow 0.25s, opacity 0.25s;
  }
  .vs-guest:hover{ opacity:0.85; }
  .vs-guest.on{
    opacity:1; background:rgb(var(--fg-rgb) / 0.1);
    border-color:rgba(94,134,255,0.6);
    box-shadow:0 0 26px -8px rgba(94,134,255,0.6);
  }
  .vs-guest img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; border:1.5px solid rgba(255,255,255,0.4); }
  .vs-guest b{ display:block; font-size:13.5px; font-weight:600; color:var(--fg); white-space:nowrap; }
  .vs-guest s{
    text-decoration:none; display:block; font-size:10px; letter-spacing:0.1em;
    text-transform:uppercase; color:rgb(var(--fg-rgb) / 0.5); margin-top:1px; white-space:nowrap;
  }
  /* ---------- vs story: the personal-phone interlude ----------
     While she talks about YOUR phone, the comparison hands it the stage:
     a personal phone rises, app icons assemble into a home screen, a flip
     turns it into a feed being re-prioritized, a swipe moves the furniture,
     and the comparison returns for "Guests expect…". JS-built (#vsStory). */
  #vs{ position:relative; }
  #vsStory{
    position:absolute; left:0; right:0; display:none;
    justify-content:center; align-items:flex-start;
    pointer-events:none; z-index:3;
  }
  .vsp{ perspective:1400px; }
  .vsp-card{
    position:relative; width:min(252px, 62vw); aspect-ratio:190/391;
    transform-style:preserve-3d;
  }
  .vsp-face{
    position:absolute; inset:0; border-radius:40px; overflow:hidden;
    background:#070d1d; border:7px solid #0d1424;
    box-shadow:0 30px 70px rgba(3,8,24,0.6), 0 0 0 1px rgba(255,255,255,0.06);
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .vsp-face.back{ transform:rotateY(180deg); }
  .vsp-wall{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .vsp-grid{
    position:absolute; inset:20px 13px 78px; display:grid;
    grid-template-columns:repeat(4,1fr); grid-auto-rows:58px;
    gap:10px 6px; align-content:start;
  }
  .vsp-app{ display:flex; flex-direction:column; align-items:center; gap:3px; }
  .vsp-tile{
    width:43px; height:43px; border-radius:11px; flex:none;
    display:grid; place-items:center;
    box-shadow:0 4px 10px rgba(0,0,0,0.35);
  }
  .vsp-tile svg{ width:23px; height:23px; display:block; }
  .vsp-app s{
    text-decoration:none; font-size:7.5px; letter-spacing:0.02em;
    color:rgba(255,255,255,0.92); text-shadow:0 1px 4px rgba(0,0,0,0.55);
    white-space:nowrap;
  }
  /* glass dock — translucent fill, NOT backdrop-filter (the card rotates
     in 3D and backdrop sampling shimmers on transforming layers) */
  .vsp-dock{
    position:absolute; left:9px; right:9px; bottom:9px; height:58px;
    border-radius:20px; background:rgba(120,150,200,0.26);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);
    display:flex; justify-content:space-evenly; align-items:center;
  }
  .vsp-dots{
    position:absolute; left:0; right:0; bottom:74px;
    display:flex; justify-content:center; gap:6px;
  }
  .vsp-dots i{
    width:5px; height:5px; border-radius:50%;
    background:rgba(255,255,255,0.38);
  }
  .vsp-dots i.on{ background:#fff; }
  /* back face: the feed page + the rearranged home page slide as layers */
  .vsp-pages{ position:absolute; inset:0; }
  .vsp-page{ position:absolute; inset:0; }
  .vsp-page.feed{
    background:linear-gradient(180deg,#0d1528,#0a101f);
    padding:20px 13px; display:flex; flex-direction:column; gap:9px;
  }
  .vsp-feed-head{
    font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.92);
    padding:2px 4px 6px; display:flex; justify-content:space-between; align-items:center;
  }
  .vsp-feed-head em{
    font-style:normal; width:18px; height:18px; border-radius:50%;
    background:linear-gradient(135deg,#5AB0F7,#2A48DE);
  }
  .vsp-row{
    display:flex; gap:8px; align-items:center;
    background:rgba(255,255,255,0.07); border-radius:13px; padding:8px;
    position:relative;
  }
  .vsp-row .th{
    width:34px; height:34px; border-radius:8px; flex:none;
    background-size:cover; background-position:center;
  }
  .vsp-row .tx{ flex:1; min-width:0; }
  .vsp-row .tx i{
    display:block; height:7px; border-radius:4px;
    background:rgba(255,255,255,0.28); margin:3px 0;
  }
  .vsp-row .tx i:last-child{ width:55%; background:rgba(255,255,255,0.16); }
  .vsp-widget{
    grid-column:span 2; grid-row:span 2; border-radius:15px;
    background-size:cover; background-position:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.4);
    position:relative; overflow:hidden;
  }
  .vsp-widget s{
    position:absolute; left:9px; bottom:7px; text-decoration:none;
    font-size:8.5px; font-weight:600; color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,0.6);
  }
  .vs-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:46px;
    max-width:780px; margin:60px auto 0; align-items:start;
    position:relative;
  }
  .vs-badge{
    position:absolute; left:50%; top:236px; transform:translate(-50%,-50%); z-index:5;
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:0.1em;
    color:#fff; background:rgba(7,14,34,0.94);
    border:1px solid rgb(var(--fg-rgb) / 0.22);
    box-shadow:0 0 0 7px rgb(var(--bg-rgb) / 0.75),
               -14px 0 34px -10px rgba(242,166,90,0.45),
               14px 0 34px -10px rgba(94,134,255,0.5);
  }
  .vs-col{ display:flex; flex-direction:column; align-items:center; }
  .vs-label-ai{ color:rgba(255,143,184,0.85); }
  .vs-phone-wrap{
    position:relative;
    filter:drop-shadow(0 36px 76px rgba(0,0,0,0.55));
    perspective:1050px; perspective-origin:50% 50%;
  }
  /* dashed amber annotations hung off the template phone's left edge */
  .seam-chip{
    position:absolute; left:-14px; transform:translateX(-100%); z-index:3;
    font-family:var(--mono); font-size:9.5px; font-weight:500;
    letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap;
    color:rgba(242,166,90,0.92);
    border:1px dashed rgba(242,166,90,0.45); border-radius:9999px;
    padding:6px 12px; background:rgba(5,11,31,0.72);
  }
  .seam-chip::after{
    content:''; position:absolute; left:100%; top:50%; width:14px; height:1px;
    background:repeating-linear-gradient(90deg, rgba(242,166,90,0.7) 0 3px, transparent 3px 6px);
  }
  /* the GenUI side answers each seam: pink, solid border — features, not flaws */
  .seam-chip.ai{
    left:auto; right:-14px; transform:translateX(100%);
    color:#9DB6F8;
    border:1px solid rgba(94,134,255,0.5);
    box-shadow:0 0 16px -6px rgba(94,134,255,0.55);
  }
  .seam-chip.ai::after{
    left:auto; right:100%;
    background:repeating-linear-gradient(90deg, rgba(94,134,255,0.7) 0 3px, transparent 3px 6px);
  }
  /* captions paint above the phone's drop-shadow, never dimmed by it */
  .vs-delta{ margin-top:24px; max-width:300px; text-align:center; position:relative; z-index:2; }
  .vs-delta b{
    display:block; font-family:var(--mono); font-size:10px; font-weight:500;
    letter-spacing:0.22em; text-transform:uppercase; color:rgb(var(--fg-rgb) / 0.85);
  }
  /* two lines reserved, always — captions must never resize the section */
  .vs-delta s{ min-height:41px; }
  .vs-col:last-child .vs-delta b{ color:#9DB6F8; }
  .vs-delta s{
    text-decoration:none; display:block; margin-top:8px;
    font-size:13px; line-height:1.55; color:rgb(var(--fg-rgb) / 0.55); text-wrap:pretty;
  }
  .vs-tells{ margin-top:84px; }
  .vs-tells-label{
    font-family:var(--mono); font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
    color:rgb(var(--fg-rgb) / 0.45); margin-bottom:20px;
  }
  .vs-tells-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
  .vs-tells-label.lbl-ai{ color:#9DB6F8; }
  .vs-tell-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; }
  .vs-tell.ai{ border-color:rgba(94,134,255,0.18); }
  .vs-tell.ai .vs-tell-icon{ background:rgba(94,134,255,0.12); color:#9DB6F8; }
  .vs-tell{
    background:rgb(var(--fg-rgb) / 0.045); border:1px solid rgb(var(--fg-rgb) / 0.1);
    border-radius:16px; padding:20px 20px 18px;
    min-height:176px;
    position:relative; overflow:hidden; cursor:pointer;
    transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  /* each tell card is a tiny theater: click and the copy steps left while
     a contained vignette acts the pattern out, then everything returns */
  .vt-hint{
    position:absolute; top:13px; right:15px;
    font-family:var(--mono); font-size:8px; letter-spacing:0.18em; text-transform:uppercase;
    color:rgb(var(--fg-rgb) / 0.45);
    opacity:0; transition:opacity 0.3s ease; pointer-events:none;
  }
  .vs-tell:hover .vt-hint{ opacity:1; }
  .vt-stage{
    position:absolute; inset:0; padding:16px;
    display:flex; align-items:center; justify-content:center; gap:14px;
    pointer-events:none; opacity:0;
  }
  .vtm-scr{
    position:relative; width:158px; max-width:70%; height:130px; border-radius:12px;
    background:#101A30; border:1px solid rgba(255,255,255,0.12);
    padding:10px; display:flex; flex-direction:column; gap:6px; flex:none;
  }
  .vtm-bar{ height:9px; border-radius:5px; background:rgba(255,255,255,0.14); flex:none; }
  .vtm-tile{ border-radius:7px; background:rgba(255,255,255,0.12); flex:none; }
  .vtm-greet{ font-size:9.5px; color:rgba(255,255,255,0.85); font-weight:600; white-space:nowrap; }
  .vtm-name{ color:#F2A65A; padding:0 3px; border-radius:4px; outline:1px dashed rgba(242,166,90,0.55); display:inline-block; }
  .vtm-pill{
    display:inline-flex; align-items:center; white-space:nowrap;
    font-family:var(--mono); font-size:7.5px; letter-spacing:0.12em; text-transform:uppercase;
    padding:4px 9px; border-radius:999px; flex:none;
    background:rgba(242,166,90,0.14); color:#F2A65A; border:1px solid rgba(242,166,90,0.4);
  }
  .vtm-pill.pink{ background:rgba(94,134,255,0.16); color:#9DB6F8; border-color:rgba(94,134,255,0.5); }
  .vtm-pill.grey{ background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.6); border-color:rgba(255,255,255,0.18); }
  .vtm-ava{ width:22px; height:22px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(255,255,255,0.4); flex:none; }
  .vtm-slot{ border:1.5px dashed rgba(94,134,255,0.5); background:none; }
  .vtm-col{ display:flex; flex-direction:column; gap:7px; align-items:center; }
  .vtm-row{ display:flex; gap:7px; align-items:center; }
  .vs-tell:hover{
    transform:translateY(-4px);
    background:rgb(var(--fg-rgb) / 0.07);
    border-color:rgba(242,166,90,0.4);
    box-shadow:0 14px 34px -12px rgba(0,0,0,0.6), 0 0 24px -10px rgba(242,166,90,0.35);
  }
  .vs-tell.ai:hover{
    border-color:rgba(94,134,255,0.45);
    box-shadow:0 14px 34px -12px rgba(0,0,0,0.6), 0 0 24px -10px rgba(94,134,255,0.4);
  }
  .vs-tell-icon{
    width:34px; height:34px; border-radius:10px; margin-bottom:14px;
    background:rgba(242,166,90,0.12); color:#F2A65A;
    display:flex; align-items:center; justify-content:center;
  }
  .vs-tell-icon svg{ width:18px; height:18px; display:block; }
  .vs-tell b{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-0.01em; }
  .vs-tell p{ margin-top:7px; font-size:12.5px; line-height:1.55; color:rgb(var(--fg-rgb) / 0.6); text-wrap:pretty; }
  @media (max-width:1100px){
    .seam-chip{ display:none; }
    .vs-tells-cols{ grid-template-columns:1fr; gap:44px; }
  }

  .lazy{ opacity:0; transform:translateY(26px); transition:opacity 0.8s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1); }
  .lazy.in{ opacity:1; transform:none; }

  /* ---------- light zone: the lower half goes bright, VGV light atmosphere ---------- */
  .lp-light{
    position:relative; isolation:isolate;
    background:
      radial-gradient(1000px 700px at 8% 4%, rgba(42,72,222,0.13), transparent 55%),
      radial-gradient(800px 600px at 95% 12%, rgba(74,143,176,0.12), transparent 60%),
      radial-gradient(900px 700px at 96% 96%, rgba(242,166,90,0.1), transparent 55%),
      linear-gradient(180deg, #E9F3F8 0%, #D6E5ED 50%, #E0EDF4 100%);
    color:#0E1A2B;
  }
  .lp-light .lp-h{ color:#0E1A2B; }
  .lp-light .lp-sub{ color:#5A6878; }
  .lp-light .mock-label{ color:rgba(14,26,43,0.5); }

  .lp-light .static-phone{ filter:drop-shadow(0 36px 70px rgba(14,46,120,0.32)); }
  .lp-light .gc-front{ background:#fff; border:1px solid rgba(14,26,43,0.08); box-shadow:0 8px 22px -10px rgba(14,46,120,0.18); }
  .lp-light .gc-front s{ color:#6B7280; }
  .lp-light .f-btn-primary{ background:#0E1A2B; color:#fff; box-shadow:0 10px 26px -8px rgba(14,26,43,0.45); }
  .lp-light .f-btn-secondary{
    background:rgba(14,26,43,0.05); color:#0E1A2B;
    border:1px solid rgba(14,26,43,0.16); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .lp-light .lp-footer{ border-top:1px solid rgba(14,26,43,0.1); }
  .lp-light .lp-footer p{ color:#9AA4B2; }

  /* color blocking: white slab for the team, dark navy anchor at the foot */
  .lp-white{
    position:relative; isolation:isolate;
    background:#fff; color:#0E1A2B;
  }
  .lp-white .lp-h{ color:#0E1A2B; }
  .lp-white .lp-sub{ color:#5A6878; }

  /* ---------- About VGV: credibility cards + trust band + client logos ---------- */
  .cred-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
    margin-top:46px; text-align:left;
  }
  @media (max-width:880px){ .cred-grid{ grid-template-columns:1fr; } }
  .cred-card{
    position:relative; overflow:hidden;
    border:1px solid transparent; border-radius:20px; padding:30px 26px 28px;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, rgba(56,112,255,0.55), rgba(0,170,255,0.22) 45%, rgba(94,134,255,0.4)) border-box;
    box-shadow:0 18px 44px -20px rgba(14,46,120,0.22);
    transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
  }
  /* a soft aurora pooled in the card's top corner, waveform-kin */
  .cred-card::before{
    content:''; position:absolute; right:-30%; top:-45%;
    width:90%; height:90%; pointer-events:none;
    background:radial-gradient(closest-side, rgba(56,128,255,0.14), rgba(0,170,255,0.07) 55%, transparent);
    filter:blur(10px);
  }
  .cred-card:hover{
    transform:translateY(-5px);
    box-shadow:0 26px 54px -20px rgba(14,46,120,0.32);
  }
  .cred-icon{
    position:relative; width:46px; height:46px; border-radius:13px;
    background:linear-gradient(135deg, #3870FF, #1D3AEA);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
    box-shadow:0 8px 18px -6px rgba(29,58,234,0.55);
  }
  .cred-icon svg{ width:21px; height:21px; }
  .cred-icon.google{ background:#fff; box-shadow:0 0 0 1px rgba(11,21,48,0.08); }
  .cred-icon img{ display:block; width:20px; height:20px; }
  .cred-card h3{ font-size:17px; font-weight:600; color:#0E1A2B; margin-bottom:7px; line-height:1.3; }
  .cred-card p{ font-size:13.5px; color:#5A6878; line-height:1.6; }
  .trust-band{
    display:flex; justify-content:space-around; align-items:center;
    gap:14px 24px; flex-wrap:wrap;
    margin-top:22px; padding:22px 28px;
    background:#0E1A2B; border-radius:18px; color:#fff;
  }
  .trust-band .trust-item{
    display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:500; text-align:left;
  }
  .trust-band svg{ width:18px; height:18px; color:#F2A65A; flex:none; }
  .trusted-by{
    border-top:1px solid rgba(14,26,43,0.1);
    margin-top:44px; padding-top:30px;
  }
  .tb-label{
    font-family:var(--mono); font-size:10px; letter-spacing:0.2em;
    text-transform:uppercase; color:#9AA4B2; margin-bottom:20px;
  }
  .tb-logos{ display:block; width:100%; max-width:1080px; height:auto; margin:0 auto; }

  /* ---------- Getting started: the overwhelm collapses ----------
     Thirteen "how to…" questions drift as a loose cloud (the honest state)
     until the starter kit pulls them into three labeled tracks. Chips live
     in their FINAL layout — the scatter is pure transform offsets, so the
     collapse is a zero-measurement FLIP and resize can't break it. The
     idle bob lives on the inner span; GSAP owns the outer (the wall's
     animation-slot lesson). */
  #start{ overflow:clip; }
  .sk-stage{ position:relative; margin-top:64px; min-height:470px; }
  .sk-tracks{
    display:grid; grid-template-columns:repeat(3,1fr); gap:30px 24px; text-align:left;
  }
  .sk-track-label{
    font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--sk-c); border-left:2px solid var(--sk-c); padding-left:10px; margin-bottom:14px;
    opacity:0; transform:translateY(6px);
    transition:opacity 0.5s ease, transform 0.5s ease;
  }
  .sk-tracks.sorted .sk-track-label{ opacity:1; transform:none; }
  .sk-chips{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
  .sk-chip > span{
    display:flex; align-items:center; gap:9px;
    background:#fff; border-radius:999px; padding:9px 16px;
    font-size:12.5px; color:#22324A; line-height:1.3; text-align:left;
    box-shadow:0 4px 14px rgba(11,21,48,0.1), 0 0 0 1px rgba(14,26,43,0.05);
    animation:skBob 5s ease-in-out infinite alternate;
  }
  .sk-tracks.sorted .sk-chip > span{ animation:none; }   /* settles under the flight */
  .sk-chip i{
    width:7px; height:7px; border-radius:50%; flex:none;
    background:#A6B3C4; transition:background 0.6s ease;
  }
  .sk-tracks.sorted .sk-chip i{ background:var(--sk-c); }
  @keyframes skBob{ from{ transform:translateY(-3px); } to{ transform:translateY(3px); } }
  .sk-kit-wrap{
    position:absolute; inset:0; display:grid; place-items:center;
    pointer-events:none; z-index:5;
  }
  .sk-kit{
    pointer-events:auto; cursor:pointer; border:none; font-family:inherit;
    display:flex; align-items:center; gap:10px;
    background:var(--ai); color:#fff; font-size:14px; font-weight:600;
    padding:13px 24px; border-radius:999px; white-space:nowrap;
    box-shadow:0 14px 34px rgba(94,134,255,0.35);
    animation:skPulse 2.6s ease-in-out infinite;
  }
  .sk-kit svg{ width:19px; height:19px; }
  @keyframes skPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
  /* before the kit opens, the week area holds its shape with quiet
     skeleton blocks — the page's own ambient register — instead of a
     500px hole. They breathe gently and hand off to the real content. */
  .sk-week{ margin-top:28px; position:relative; }
  .sk-ghosts{
    position:absolute; inset:0; pointer-events:none;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px;
    align-items:start; text-align:left;
    animation:skgBreathe 3.6s ease-in-out infinite alternate;
  }
  @keyframes skgBreathe{ from{ opacity:0.55; } to{ opacity:0.95; } }
  .sk-week.on .sk-ghosts{ animation:skgOut 0.5s ease forwards; }
  @keyframes skgOut{ from{ opacity:0.7; } to{ opacity:0; visibility:hidden; } }
  .sk-ghosts i{
    display:block; height:12px; border-radius:6px;
    background:rgba(14,26,43,0.07); margin-top:12px;
  }
  .skg-h{
    display:block; height:26px; border-radius:9px;
    background:rgba(14,26,43,0.09); margin-top:12px;
  }
  .skg-checks{ margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
  .skg-checks span{ display:flex; gap:10px; align-items:center; }
  .skg-checks s{
    width:20px; height:20px; border-radius:50%; flex:none; text-decoration:none;
    border:2px dashed rgba(14,26,43,0.16);
  }
  .skg-checks i{ flex:1; height:10px; margin:0; }
  .skg-phone{
    justify-self:center; width:212px; aspect-ratio:190/391;
    border:2px dashed rgba(14,26,43,0.15); border-radius:38px;
    transform:rotate(-10deg);
  }
  .sk-real{
    display:grid; grid-template-columns:1.1fr 0.9fr;
    gap:20px; align-items:start; text-align:left;
    opacity:0; transform:translateY(18px); pointer-events:none;
  }
  .sk-week.on .sk-real{
    opacity:1; transform:none; pointer-events:auto;
    transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
  }
  .sk-week h3{
    font-size:clamp(26px, 3vw, 38px); font-weight:700; letter-spacing:-0.02em;
    line-height:1.12; color:#0E1A2B; text-wrap:balance;
  }
  .sk-week h3 em{ font-style:normal; color:var(--ai); display:inline-block; }
  .sk-real > div > p{ margin-top:16px; font-size:15.5px; line-height:1.65; color:#5A6878; text-wrap:pretty; }   /* the old .sk-week > div chain broke when the ghost/real wrappers landed */
  .sk-outcomes{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
  .sk-outcome{
    display:flex; gap:10px; align-items:flex-start;
    font-size:13.5px; font-weight:500; color:#22324A; line-height:1.45;
  }
  .sk-outcome b{ font-weight:inherit; text-wrap:balance; }   /* no widowed "Git" */
  .sk-outcome svg{ width:22px; height:22px; flex:none; }
  .sk-outcome .c{ stroke:#1D3AEA; stroke-dasharray:63; stroke-dashoffset:63; }
  .sk-outcome .t{ stroke:#1D3AEA; stroke-dasharray:14; stroke-dashoffset:14; }
  .sk-outcome.on .c{ stroke-dashoffset:0; transition:stroke-dashoffset 0.6s ease; }
  .sk-outcome.on .t{ stroke-dashoffset:0; transition:stroke-dashoffset 0.35s ease 0.45s; }
  .sk-phone-zoneable .slot{ position:relative; }
  /* the week-one phone leans in from the left, riding up into the
     whitespace the short tracks leave behind (Josh's composition) */
  .sk-phone{
    justify-self:center;
    margin-top:clamp(-75px, -5.5vw, -40px);
    transform:translateX(clamp(24px, 4.6vw, 70px)) rotate(-10deg);
  }
  .sk-zone{ position:absolute; inset:2px; border:2px dashed var(--ai); border-radius:6px; opacity:0; z-index:6; pointer-events:none; }
  .sk-zone.on{ opacity:1; transition:opacity 0.6s ease 0.3s; }
  .sk-zone s{
    position:absolute; top:5px; right:5px; text-decoration:none;
    font-family:var(--mono); font-size:8px; letter-spacing:0.14em; text-transform:uppercase;
    background:var(--ai); color:#fff; padding:3px 8px; border-radius:999px; white-space:nowrap;
  }

  /* ---------- Meet your GenUI team ---------- */
  .team-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
    margin-top:50px;
  }
  @media (max-width:880px){ .team-grid{ grid-template-columns:repeat(2,1fr); gap:34px 20px; } }
  .team-member{ text-align:center; }
  /* each teammate gets their own guest mode — the persona phones' gradient
     palette instead of corporate navy (--tm-grad/--tm-acc inline per member).
     A slow glow drifts through each circle like the heroes' orb, desynced,
     and on hover the cutout leans in off its baseline. */
  .team-avatar{
    width:118px; height:118px; margin:0 auto 18px;
    border-radius:50%; overflow:hidden; position:relative;
    background:var(--tm-grad, linear-gradient(145deg,#4A6FB0,#2D4A84 60%,#16294F));
    box-shadow:0 6px 18px rgba(11,21,48,0.16);
    transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
  }
  .team-avatar::before{
    content:''; position:absolute; width:130%; height:130%; left:-42%; top:-48%;
    border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side, rgba(255,255,255,0.32), rgba(255,255,255,0) 70%);
    animation:tmOrb 9s ease-in-out infinite alternate;
  }
  .team-member:nth-child(2) .team-avatar::before{ animation-delay:-3.2s; }
  .team-member:nth-child(3) .team-avatar::before{ animation-delay:-6.1s; }
  .team-member:nth-child(4) .team-avatar::before{ animation-delay:-1.7s; }
  .team-member:nth-child(5) .team-avatar::before{ animation-delay:-4.6s; }
  @keyframes tmOrb{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(36%,32%) scale(1.18); }
  }
  .team-avatar img{
    width:100%; height:100%; object-fit:cover; display:block;
    position:relative;   /* above the drifting glow */
    transform-origin:50% 100%;
    transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
  }
  .team-member:hover .team-avatar{
    transform:translateY(-5px);
    box-shadow:0 16px 34px rgba(11,21,48,0.24),
      0 0 0 3px #fff, 0 0 0 4.5px var(--tm-acc, #1D3AEA);
  }
  .team-member:hover .team-avatar img{ transform:scale(1.06) rotate(-2deg); }
  /* the row arrives one teammate at a time */
  .lazy .team-member{ opacity:0; transform:translateY(14px); }
  .lazy.in .team-member{
    opacity:1; transform:none;
    transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  }
  .lazy.in .team-member:nth-child(2){ transition-delay:0.08s; }
  .lazy.in .team-member:nth-child(3){ transition-delay:0.16s; }
  .lazy.in .team-member:nth-child(4){ transition-delay:0.24s; }
  .lazy.in .team-member:nth-child(5){ transition-delay:0.32s; }
  .team-member b{ display:block; font-size:17px; font-weight:600; color:#0E1A2B; }
  .team-member s{ display:block; text-decoration:none; font-size:13px; color:#5A6878; margin-top:2px; }
  .team-link{
    display:inline-block; margin-top:10px; font-size:12px; font-weight:600;
    color:#1D3AEA; text-decoration:none; letter-spacing:0.02em;
  }
  .team-link:hover{ text-decoration:underline; }
  .team-cta{
    margin-top:46px; padding-top:34px;
    border-top:1px solid rgba(14,26,43,0.08);
    font-size:15px; color:#5A6878;
  }
  .team-cta a{ color:#1D3AEA; font-weight:600; text-decoration:none; }
  .team-cta a:hover{ text-decoration:underline; }

  @media (max-width: 980px){
    .how-grid{ grid-template-columns:1fr; gap:48px; }
    .how-arrows{ display:none; }
    .flow-svg{ display:none; }
    .sec-client img{ height:42px; }
    .hr-row{ flex-direction:column; align-items:center; }
    .hr-persona{ text-align:center; align-items:center; }
    .how-right{ align-items:center; }
  }

  /* ---------- mobile: everything cascades to a single column, the hero
     fills the visible viewport and the phone holds dead center.
     Lives last so it outranks every base rule above. ---------- */
  @media (max-width:767px){
    .hero .sub, .hero .fineprint{ display:none; }
    .hero{ left:18px; right:18px; bottom:104px; max-width:none; text-align:center; }
    .hero .eyebrow{ justify-content:center; }
    /* centered headline needs a full-width floor, not just the corner radial */
    .hero-gradient{
      background:
        linear-gradient(180deg, transparent 46%, rgb(var(--bg-rgb) / 0.72) 74%, rgb(var(--bg-rgb) / 0.97) 94%),
        radial-gradient(ellipse 76% 62% at 0% 100%,
          rgb(var(--bg-rgb) / 1) 0%,
          rgb(var(--bg-rgb) / 0.96) 26%,
          rgb(var(--bg-rgb) / 0.78) 44%,
          rgb(var(--bg-rgb) / 0.4) 62%,
          transparent 82%);
    }
    .cx-root header{ padding:14px 16px; }
    header.scrolled{ padding:10px 16px; }
    .lockup{ width:116px; }
    .cobrand{ gap:12px; }
    .cobrand img{ height:30px; }
    .header-actions{ gap:9px; }
    .vo-stage{ height:104px; }
    .intro-proto{ gap:20px; }
    /* three identical screens carry the joke on a phone-width row */
    .proto-stage .proto-cell:first-child, .proto-stage .proto-cell:last-child{ display:none; }
    /* the click affordance moves above the phone — below it collides with the hero copy */
    .click-hint{ top:auto; bottom:100%; margin-top:0; margin-bottom:14px; }
    /* zoomed-out wall: the floating pills shrink with the cells */
    .cell .ing-chip{ font-size:9px; padding:7px 12px; gap:6px; }
    .cell .ing-chip i{ width:5px; height:5px; }
    /* locked-state data chips shrink so they fit the side margins */
    .data-chip{ font-size:8.5px; padding:6px 10px; gap:6px; }
    .data-chip i{ width:5px; height:5px; }
    .fr-card{ width:52px; height:40px; padding:5px; }
    .fr-item > s{ font-size:7.5px; }
    .f-recipe{ gap:8px; }
    .f-below{ min-width:0; width:max-content; max-width:calc(100vw - 28px); }
    .lp-section{ padding:88px 20px 0; }
    .lp-section.last{ padding-bottom:96px; }
    .wg-grid{ grid-template-columns:1fr; gap:12px; margin-top:44px; }
    .how-stats{ grid-template-columns:1fr; gap:12px; margin-top:48px; }
    .sec-client{ position:static; margin:0 0 22px; }
    .how-grid{ margin-top:46px; gap:42px; }
    /* showcase nav centered and above the phone's shadow */
    .hr-nav{ justify-content:center; }
    .hr-persona-wrap{ align-items:center; }
    /* stat cards: condensed and centered */
    .how-stats{ margin-top:40px; }
    .hs-card{ text-align:center; padding:20px 18px 16px; }
    .hs-icon{ margin:0 auto 10px; width:36px; height:36px; }
    .hs-card b{ font-size:27px; }
    .hs-card p{ font-size:12.5px; }
    .hs-card s{ font-size:8px; margin-top:9px; }
    /* playbook cards: tighter */
    .wg-card{ padding:20px 18px 18px; }
    .wg-icon{ width:38px; height:38px; border-radius:11px; margin-bottom:12px; }
    .wg-icon svg{ width:19px; height:19px; }
    .wg-pill{ margin-bottom:10px; }
    .wg-card h3{ font-size:16.5px; }
    .wg-card ul{ margin-top:12px; gap:7px; }
    .wg-card li{ font-size:13px; }
    /* the library card runs very tall on phones — compact the chips hard */
    .dl-card{ padding:24px 18px 20px; }
    .dl-card h3{ font-size:20px; }
    .dl-card .dl-sub{ font-size:12.5px; }
    .dl-group{ margin-top:16px; }
    .dl-label{ margin-bottom:8px; }
    .dl-chips{ gap:5px; }
    .lc-chip{ font-size:8.5px; padding:5px 9px; gap:5px; }
    .lc-chip i{ width:5px; height:5px; }
    /* the showcase column reads centered, label to push */
    .mock-label.left{ text-align:center; }
    .push-mock{ margin:0 auto; }
    .hr-row{ gap:28px; }
    .guest-zone{ margin-top:44px; }
    .trust-band{ flex-direction:column; align-items:flex-start; gap:14px; padding:20px 22px; }
    .trusted-by{ display:none; }
    /* the two guests ride one row above the phones (mock #22) instead of
       wrapping — shrink the pills so they fit side by side on a phone */
    .vs-toggle{ margin-top:34px; gap:8px; flex-wrap:nowrap; }
    .vs-guest{ gap:8px; padding:6px 13px 6px 6px; min-width:0; }
    .vs-guest img{ width:34px; height:34px; }
    .vs-guest b{ font-size:11.5px; }
    .vs-guest s{ font-size:8.5px; letter-spacing:0.06em; }
    /* the hero owns the whole screen: logos slide in only past the hero */
    .brand-row{
      opacity:0; transform:translateY(-14px); pointer-events:none;
      transition:opacity 0.35s ease, transform 0.35s ease;
    }
    header.locked .brand-row{ opacity:1; transform:none; pointer-events:auto; }
    /* both phones together: outer halves bleed off the edges, VS at the seam */
    .vs-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; max-width:none; }   /* minmax(0,…) or the phones' min-content blows the tracks out */
    #vs{ overflow-x:clip; }
    /* badge is the grid's first child, so the cols are 2 and 3.
       Wraps center their phones so the outward bleed is symmetric. */
    .vs-phone-wrap{ display:flex; justify-content:center; }
    .vs-grid > .vs-col:nth-child(2) .vs-phone-wrap{ transform:translateX(-7vw); }
    .vs-grid > .vs-col:nth-child(3) .vs-phone-wrap{ transform:translateX(7vw); }
    .vs-delta{ font-size:11px; }
    #vs .mock-label{ font-size:14px; letter-spacing:0.2em; }
    .vs-badge{ top:200px; }
    .vs-tells{ margin-top:64px; }
    .vs-tells-cols{ gap:36px; }
    .vs-tell-grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .vs-tell{ padding:14px 14px 12px; border-radius:13px; min-height:0; }
    .vs-tell-icon{ width:30px; height:30px; border-radius:9px; margin-bottom:10px; }
    .vs-tell-icon svg{ width:16px; height:16px; }
    .vs-tell b{ font-size:13px; }
    .vs-tell p{ font-size:11.5px; margin-top:5px; }
    .sk-tracks{ grid-template-columns:1fr; gap:22px; }
    .sk-real, .sk-ghosts{ grid-template-columns:1fr; gap:36px; }
    .sk-real .sk-phone{ margin-top:0; transform:rotate(-6deg); order:2; }
    .skg-phone{ display:none; }
    .sk-outcomes{ grid-template-columns:1fr; }
    .nav-sec b{ font-size:12.5px; max-width:42vw; overflow:hidden; text-overflow:ellipsis; }
    .lp-footer{ margin-top:88px; }
  }

  @media (prefers-reduced-motion: reduce){
    .cx-root *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
    .lazy{ opacity:1; transform:none; }
    .lazy .team-member{ opacity:1; transform:none; }
  }

  /* ============ GenUI Kit: the deployable product (mirrors genuikit.ai) ============
     Dark navy slab between About (white) and Getting started (light). Reuses the
     wg-card visual language; tells the site's product story in the wall's voice. */
  #kit{ padding-bottom:130px; }
  #kit .lp-h{ max-width:none; }
  #kit .lp-sub{ max-width:760px; }
  .kit-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
    margin-top:60px; text-align:left;
  }
  .kit-card, .kit-way{
    background:rgb(var(--fg-rgb) / 0.045);
    border:1px solid rgb(var(--fg-rgb) / 0.1);
    border-radius:20px; padding:28px 28px 26px;
  }
  .kit-num{
    display:block; font-family:var(--mono); font-size:12px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--ai); margin-bottom:14px;
  }
  .kit-card h3, .kit-way h3{
    font-size:20px; font-weight:700; letter-spacing:-0.015em; line-height:1.25;
    text-wrap:balance; margin-bottom:10px;
  }
  .kit-card p, .kit-way p{
    font-size:14.5px; line-height:1.6; color:rgb(var(--fg-rgb) / 0.62); text-wrap:pretty;
  }
  /* enterprise callout band — the buyer's-language beat */
  .kit-band{
    margin-top:16px; border-radius:20px; padding:30px 32px; text-align:left;
    background:linear-gradient(120deg, rgba(42,72,222,0.20), rgba(94,134,255,0.05) 70%);
    border:1px solid rgba(94,134,255,0.22);
  }
  .kit-band p{ font-size:17px; line-height:1.5; color:var(--fg); max-width:62ch; text-wrap:pretty; }
  .kit-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
  .kit-pill{
    display:inline-flex; align-items:center; white-space:nowrap;
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
    color:#9DB6F8; padding:9px 16px; border-radius:9999px;
    border:1px solid rgba(94,134,255,0.30); background:rgba(94,134,255,0.06);
  }
  /* two ways in: retrofit + greenfield */
  .kit-twohead{
    margin-top:64px; text-align:left; font-family:var(--mono); font-size:11px;
    letter-spacing:0.3em; text-transform:uppercase; color:rgb(var(--fg-rgb) / 0.5);
  }
  .kit-ways{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; text-align:left; }
  .kit-way .kit-num{ color:var(--brand-light); }
  @media (max-width:760px){
    .kit-grid, .kit-ways{ grid-template-columns:1fr; }
    .kit-card, .kit-way{ padding:22px 20px 20px; }
    .kit-band{ padding:22px 20px; }
    .kit-band p{ font-size:15.5px; }
  }
  /* ============ Clarity hero (locked layout; reuses the real renderer) ============ */
  #gate{ display:none !important; }
  #clarityHero{ position:relative; z-index:1; overflow:visible; scroll-behavior:smooth;
    font-family:'Poppins',system-ui,sans-serif; color:rgba(255,255,255,0.95);
    background:radial-gradient(ellipse 60% 45% at 90% 0%, rgba(42,72,222,0.26), transparent 60%),
      radial-gradient(ellipse 46% 40% at 0% 100%, rgba(94,134,255,0.10), transparent 60%), #050B1F;
    --cl-acc:#5E86FF; }
  #clarityHero ::selection{ background:rgba(94,134,255,0.30); }
  #clPartBg, #clPartFg{ position:fixed; inset:0; pointer-events:none; }
  #clPartBg{ z-index:0; } #clPartFg{ z-index:2; }
  .cl-wrap{ position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:22px 44px 64px; }
  /* GenUI sub-nav — a glass capsule that MIRRORS the global nav's content box
     (same max-w-[90rem] + px-6/10/16 gutter), so the GenUI logo sits under the
     VGV logo and the section links under the global nav: aligned, so the two
     read as one hierarchy instead of competing. Lighter/floating glass keeps it
     clearly secondary. .cl-top is a transparent, click-through positioning layer
     (top synced to the global nav by the route page); .cl-top-inner is the pill. */
  .cl-top{ position:sticky; top:0; z-index:40; width:100%; max-width:90rem; margin:0 auto; padding:14px 24px 0; pointer-events:none; background:none; border:none; }
  .cl-top-inner{ pointer-events:auto; position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 26px;
    border-radius:999px;
    background:rgba(18,28,60,0.55);
    -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.11);
    box-shadow:0 18px 44px -18px rgba(3,8,24,0.7); }
  @media (min-width:768px){ .cl-top{ padding-left:40px; padding-right:40px; } }   /* match nav Container md:px-10 */
  @media (min-width:1536px){ .cl-top{ padding-left:64px; padding-right:64px; } }  /* match nav Container 2xl:px-16 */
  @media (max-width:900px){ .cl-top-inner{ justify-content:center; } }            /* mobile: center the GenUI × Carnival lockup (section links hidden) */
  .cl-nav{ position:relative; display:flex; gap:24px; }
  /* JetBrains Mono (the experience's label face) sets the sub-nav apart from the
     Poppins global nav, so they read as two layers rather than competing. */
  .cl-nav a{ position:relative; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; font-weight:400; letter-spacing:-0.01em; color:rgba(255,255,255,0.62); text-decoration:none; transition:color .2s; white-space:nowrap; }
  .cl-nav a:hover{ color:#fff; }
  .cl-nav a.on{ color:#fff; }
  @media (max-width:900px){ .cl-nav{ display:none; } }
  .cl-topcta{ display:inline-flex; align-items:center; padding:9px 21px; border-radius:999px; background:#fff; color:#0a1330; font-weight:600; font-size:13.5px; text-decoration:none; white-space:nowrap; transition:filter .2s, transform .2s; }
  .cl-topcta:hover{ filter:brightness(0.93); transform:translateY(-1px); }
  /* ===== Carnival co-brand (fork-specific: header lockup + footer sign-off) ===== */
  .cl-top-left{ display:flex; align-items:center; }
  .cl-cobrand{ display:inline-flex; align-items:center; gap:15px; margin-left:15px; }
  .cl-cobrand-div{ width:1px; height:24px; background:rgba(255,255,255,0.2); }
  .cl-cobrand-logo{ height:20px; width:auto; display:block; }
  @media (max-width:1140px) and (min-width:901px){ .cl-cobrand{ display:none; } }   /* the centered nav needs the room at tablet widths; the footer still carries Carnival */
  @media (max-width:560px){ .cl-cobrand{ gap:11px; margin-left:11px; } .cl-cobrand-logo{ height:18px; } .cl-cobrand-div{ height:20px; } }
  @media (max-width:380px){ .cl-topcta{ display:none; } }   /* tiny phones: drop the header CTA so the GenUI × Carnival lockup has room (the get-in-touch CTA lives at the bottom) */
  .cl-foot-prep{ display:flex; align-items:center; justify-content:center; gap:11px; margin:2px 0 15px; font-size:11px; letter-spacing:0.2em; color:rgba(255,255,255,0.55); }
  .cl-foot-client{ height:20px; width:auto; display:block; }
  .cl-brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; letter-spacing:-0.01em; }
  .cl-brand .cl-mk{ width:26px; height:26px; border-radius:7px; background:linear-gradient(145deg,#4F7CFF,#2A48DE); display:grid; place-items:center; }
  .cl-brand .cl-mk svg{ width:15px; height:15px; }
  .cl-brand b{ color:#5E86FF; }
  .cl-brand{ cursor:pointer; text-decoration:none; transition:opacity .2s; }
  .cl-brand:hover{ opacity:0.82; }
  .cl-brand-logo{ height:22px; width:auto; display:block; overflow:visible; }
  .cl-brand-logo .gstar{ transform-box:fill-box; transform-origin:center; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
  .cl-brand-logo .gstar1{ animation:gtw1 5s ease-in-out infinite; }
  .cl-brand-logo .gstar2{ animation:gtw2 5s ease-in-out infinite -1.6s; }
  .cl-brand-logo .gstar3{ animation:gtw3 5s ease-in-out infinite -3.2s; }
  @keyframes gtw1{ 0%,100%{ fill:#5E86FF } 50%{ fill:#9DB6F8 } }
  @keyframes gtw2{ 0%,100%{ fill:#2A48DE } 50%{ fill:#5E86FF } }
  @keyframes gtw3{ 0%,100%{ fill:#7FA8FF } 50%{ fill:#3E63F0 } }
  .cl-brand:hover .gstar1{ transform:scale(1.35) rotate(90deg); }
  .cl-brand:hover .gstar2{ transform:scale(1.45) rotate(-130deg); transition-delay:.05s; }
  .cl-brand:hover .gstar3{ transform:scale(1.5) rotate(170deg); transition-delay:.1s; }
  @media (prefers-reduced-motion:reduce){ .cl-brand-logo .gstar{ animation:none; } .cl-brand:hover .gstar1, .cl-brand:hover .gstar2, .cl-brand:hover .gstar3{ transform:none; } }
  .cl-pill{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#9DB6F8; border:1px solid rgba(255,255,255,0.12); padding:6px 13px; border-radius:999px; }
  .cl-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:#5E86FF; }
  .cl-h{ font-weight:700; letter-spacing:-0.03em; line-height:1.13; margin:8px 0 10px; background:none; text-align:left; }
  .cl-h .cl-ln{ display:block; font-size:clamp(30px,4.2vw,50px); background:none; height:auto; border-radius:0; }
  .cl-h .cl-hl{ color:#5E86FF; }
  @media (min-width:921px){ .cl-h .cl-ln{ white-space:nowrap; } }
  @media (max-width:920px){ .cl-h .cl-ln{ text-wrap:balance; } }
  .cl-lede{ font-size:16.5px; line-height:1.55; color:rgba(255,255,255,0.56); max-width:none; text-align:left; margin:0; }
  .cl-lede .cl-l{ display:block; } .cl-lede b{ color:#fff; font-weight:500; }
  /* ===== eye-catching hero ===== */
  .cl-hero2{ position:relative; z-index:0; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:48px; align-items:center; padding:34px 0 54px; min-height:80vh; }
  .cl-hero2::before{ content:''; position:absolute; z-index:-1; top:-150px; bottom:-30px; left:50%; transform:translateX(-50%); width:100vw;
    background:
      radial-gradient(120% 100% at 84% -8%, rgba(99,137,255,0.66) 0%, rgba(58,95,236,0.32) 30%, transparent 62%),
      radial-gradient(90% 82% at 6% 114%, rgba(94,134,255,0.2) 0%, transparent 50%),
      radial-gradient(60% 66% at 70% 52%, rgba(132,162,255,0.18) 0%, transparent 60%),
      linear-gradient(168deg, #17295f 0%, #111f49 52%, #0a1430 100%); }
  .cl-hero2::after{ content:''; position:absolute; z-index:-1; left:50%; transform:translateX(-50%); bottom:-30px; width:100vw; height:1px; background:linear-gradient(90deg, transparent, rgba(94,134,255,0.22) 45%, rgba(94,134,255,0.22) 55%, transparent); }
  @media (max-width:900px){ .cl-hero2{ grid-template-columns:1fr; gap:18px; padding-bottom:24px; } }
  .cl-hero2-copy{ position:relative; z-index:2; }
  .cl-hero2 .cl-h{ font-size:clamp(36px,4.8vw,60px); margin:12px 0 16px; }
  .cl-hero2 .cl-h .cl-ln{ font-size:inherit; }
  .cl-hero2 .cl-lede{ font-size:17px; max-width:52ch; }
  .cl-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:30px; }
  .cl-cta-row .cl-cta-btn{ margin-top:0; border-radius:999px; padding:15px 28px; font-size:15px; }
  .cl-cta-ghost{ display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:999px; border:1px solid rgba(255,255,255,0.2); color:#fff; font-weight:600; font-size:15px; text-decoration:none; transition:border-color .2s, background .2s; }
  .cl-cta-ghost:hover{ border-color:rgba(94,134,255,0.6); background:rgba(94,134,255,0.08); }
  .cl-cred{ display:flex; align-items:center; gap:9px; margin-top:26px; font-size:13px; color:rgba(255,255,255,0.52); font-weight:500; }
  .cl-cred svg{ width:15px; height:15px; color:#4fd49b; flex:none; }
  /* dual phones */
  .cl-hero2-vis{ position:relative; }
  .cl-duo{ position:relative; width:100%; height:600px; }
  @media (max-width:900px){ .cl-duo{ height:520px; } }
  .cl-duo-phone{ position:absolute; top:50%; left:50%; display:flex; flex-direction:column; align-items:flex-start; }
  .cl-duo-back{ transform:translate(-62%,-46%) rotate(-8deg) scale(0.93); opacity:1; z-index:1; pointer-events:none; }
  .cl-duo-front{ transform:translate(-4%,-52%) rotate(4deg); z-index:2; }
  .cl-duo-front .flipper{ filter:drop-shadow(0 42px 80px rgba(0,0,0,0.6)) drop-shadow(0 0 64px rgba(94,134,255,0.22)); transition:opacity .45s ease, filter .55s ease; }
  /* soft ambient halo behind the GenUI phone — fades in only on the GenUI step */
  .cl-duo-front::before{ content:''; position:absolute; z-index:-1; left:50%; top:54%; width:116%; height:86%; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(110,150,255,0.46), rgba(94,134,255,0) 100%); filter:blur(30px); opacity:0; transition:opacity .6s ease; pointer-events:none; }
  .cl-duo-lab{ margin:0 0 13px 6px; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.04em; padding:5px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .cl-duo-lab-back{ color:rgba(255,255,255,0.62); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.13); }
  .cl-duo-lab-front{ color:#fff; background:linear-gradient(135deg,#5E86FF,#2A48DE); box-shadow:0 8px 22px -6px rgba(42,72,222,0.7); }
  .cl-duo-lab-front svg{ width:12px; height:12px; }
  /* "How it works" → compare mode: left column tells a stepped story, right column shows both phones */
  .cl-hero2-intro{ transition:opacity .4s ease; }
  .cl-duo-back, .cl-duo-front{ transition:transform .7s cubic-bezier(.2,.8,.3,1), filter .5s ease, opacity .5s ease; }
  .cl-cmp-panel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; pointer-events:none; transition:opacity .45s ease; }
  .cl-cmp-exit{ align-self:flex-start; margin-bottom:18px; display:inline-flex; align-items:center; gap:5px; padding:6px 10px 6px 0; border:none; background:none; color:rgba(255,255,255,0.55); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:color .2s; }
  .cl-cmp-exit svg{ width:15px; height:15px; }
  .cl-cmp-exit:hover{ color:#fff; }
  .cl-cmp-h{ font-size:clamp(27px,3.1vw,40px); font-weight:700; letter-spacing:-0.02em; line-height:1.12; color:#fff; margin:14px 0 16px; text-wrap:balance; min-height:2.24em; }
  .cl-cmp-h b{ color:#7FA8FF; font-weight:700; }
  .cl-cmp-sub{ font-size:16px; line-height:1.6; color:rgba(255,255,255,0.64); margin:0; max-width:40ch; min-height:6.4em; }   /* reserve 4 lines so both steps are the same height (no jump on advance) */
  .cl-cmp-foot{ display:flex; align-items:center; gap:20px; margin-top:34px; }
  .cl-cmp-dots{ display:flex; align-items:center; gap:8px; }
  .cl-cmp-dots i{ width:7px; height:7px; border-radius:999px; background-color:rgba(255,255,255,0.28); cursor:pointer; transition:background-color .3s, width .3s; }
  .cl-cmp-dots i:hover{ background-color:rgba(255,255,255,0.55); }
  .cl-cmp-dots i.on{ background-color:#5E86FF; width:26px; }   /* active = a clean line with rounded ends (stadium), not an oval */
  .cl-cmp-next{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; border:none; background:linear-gradient(145deg,#4F7CFF,#2A48DE); color:#fff; font:inherit; font-weight:600; font-size:15px; cursor:pointer; box-shadow:0 14px 30px -8px rgba(42,72,222,0.8); transition:filter .2s, transform .2s; }
  .cl-cmp-next:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  .cl-hero2.compare .cl-hero2-intro{ opacity:0; pointer-events:none; }
  .cl-hero2.compare .cl-cmp-panel{ opacity:1; pointer-events:auto; }
  .cl-hero2.compare .cl-duo-back{ transform:translate(-105%,-50%) rotate(0deg) scale(0.93); }   /* keep phones at their opening size, just straightened side by side */
  .cl-hero2.compare .cl-duo-front{ transform:translate(2%,-50%) rotate(0deg) scale(1); }
  .cl-hero2.compare[data-cmp="static"] .cl-duo-front{ filter:grayscale(0.95) brightness(0.5); opacity:0.4; }
  .cl-hero2.compare[data-cmp="genui"] .cl-duo-back{ filter:grayscale(0.95) brightness(0.5); opacity:0.4; }
  .cl-hero2.compare[data-cmp="genui"] .cl-duo-front::before{ opacity:1; }
  .cl-hero2.compare[data-cmp="genui"] .cl-duo-front .flipper{ filter:drop-shadow(0 42px 80px rgba(0,0,0,0.55)) drop-shadow(0 0 60px rgba(110,150,255,0.42)); }
  @media (max-width:900px){ .cl-hero2.compare .cl-duo-back{ transform:translate(-92%,-50%) rotate(0) scale(0.5); } .cl-hero2.compare .cl-duo-front{ transform:translate(-8%,-50%) rotate(0) scale(0.5); } }
  /* magical highlight reveal — a light sweeps the phrase, sparkles pop around it */
  .cl-spark{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; z-index:6; width:var(--sz,12px); height:var(--sz,12px); color:#7FA8FF; opacity:0; animation:clSpark 1.15s ease-out forwards; }
  .cl-spark svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 0 5px rgba(127,168,255,0.9)); }
  @keyframes clSpark{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(0.2); } 30%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.3); } }
  .cl-word{ display:inline-block; }
  .cl-hl-lit{ animation:clGlow 1.2s ease-out; }
  @keyframes clGlow{ 0%{ text-shadow:none; } 35%{ text-shadow:0 0 22px rgba(127,168,255,0.85), 0 0 7px rgba(127,168,255,0.55); } 100%{ text-shadow:none; } }
  /* pick-a-guest section header */
  .cl-pick{ position:relative; padding-top:150px; padding-bottom:80px; }   /* wrap already adds 64px below; keep the dark gap before Multiplatform tidy */
  .cl-sec-h2{ font-weight:700; letter-spacing:-0.02em; font-size:clamp(24px,2.6vw,32px); line-height:1.1; margin:14px 0 30px; }
  /* ===== alternating section bands ===== */
  .cl-sec.light{ color:#0c1430; }
  .cl-sec.light::before{ content:''; position:absolute; left:50%; top:0; width:100vw; height:100%; transform:translateX(-50%); background:linear-gradient(180deg,#eef3fc 0%,#e2eaf8 100%); z-index:-1; }
  .cl-sec.light .cl-sec-h{ color:#0c1430; } .cl-sec.light .cl-sec-h .cl-hl{ color:#2A48DE; }
  .cl-sec.light .cl-sec-sub{ color:rgba(12,20,48,0.64); } .cl-sec.light .cl-sec-sub b{ color:#0c1430; }
  .cl-sec.light .cl-eyebrow{ color:#2A48DE; }
  .cl-sec.light .cl-vsg{ border-color:rgba(12,20,48,0.14); background:rgba(12,20,48,0.03); }
  .cl-sec.light .cl-vsg b{ color:rgba(12,20,48,0.82); } .cl-sec.light .cl-vsg s{ color:rgba(12,20,48,0.5); }
  .cl-sec.light .cl-vsg img{ filter:grayscale(1) brightness(0.95); }
  .cl-sec.light .cl-vsg.on b{ color:#fff; } .cl-sec.light .cl-vsg.on s{ color:rgba(255,255,255,0.85); } .cl-sec.light .cl-vsg.on img{ filter:none; }
  .cl-sec.light .cl-stat{ border-color:rgba(12,20,48,0.12); background:rgba(12,20,48,0.03); }
  .cl-sec.light .cl-stat s{ color:rgba(12,20,48,0.6); }

  /* locked 2-col stage: left = guests (top) + inputs (bottom), right = phone. Top-aligned, fixed. */
  /* one centered column: nav, headline, and stage all share the wrap width */
  .cl-stage{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:52px; align-items:start; margin-top:24px; }
  .cl-right{ align-items:flex-end; }
  @media (max-width:900px){ .cl-stage{ grid-template-columns:1fr; gap:36px; } }
  .cl-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.42); margin-bottom:14px; }
  .cl-glist{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px; margin-bottom:30px; }
  @media (max-width:820px){ .cl-glist{ grid-template-columns:repeat(2,1fr); } }
  .cl-tile{ position:relative; aspect-ratio:1/1; border-radius:18px; overflow:visible; cursor:pointer; padding:0;
    border:1px solid rgba(255,255,255,0.1); background:#0d1830;
    transition:background .35s, border-color .35s, box-shadow .35s, transform .25s; }
  .cl-tile:hover{ transform:translateY(-2px); border-color:rgba(94,134,255,0.4); }
  /* fill the tile width, anchor to top so only the head breaks the top border; bottom + sides clip clean */
  .cl-tile-img{ position:absolute; left:0; right:0; bottom:0; width:100%; height:115%;
    object-fit:cover; object-position:50% 0%;
    border-bottom-left-radius:18px; border-bottom-right-radius:18px;
    filter:grayscale(1) brightness(0.74); transition:filter .45s, height .45s; pointer-events:none; }
  .cl-tile:hover .cl-tile-img{ filter:grayscale(0.45) brightness(0.9); }
  .cl-tile.on{ background:linear-gradient(165deg,#5E86FF,#2A48DE); border-color:transparent; box-shadow:0 20px 46px -12px rgba(42,72,222,0.85); }
  .cl-tile.on .cl-tile-img{ filter:none; height:123%; }
  /* selected persona identity, between the tiles and the inputs */
  .cl-who{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .cl-who-name{ font-size:22px; font-weight:700; letter-spacing:-0.01em; color:#fff; line-height:1.1; }
  .cl-who-role{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; color:var(--cl-acc); letter-spacing:0.02em; }
  .cl-who-desc{ font-size:14px; line-height:1.55; color:rgba(255,255,255,0.56); margin-top:9px; min-height:46px; }
  .cl-divider{ height:1px; background:linear-gradient(90deg, rgba(94,134,255,0.4), rgba(255,255,255,0.07) 55%, transparent); margin:18px 0 24px; }
  .cl-inputs{ display:flex; flex-direction:column; }
  .cl-incard{ position:relative; display:grid; grid-template-columns:172px 1fr; align-items:center; gap:20px; padding:16px 6px; border-top:1px solid rgba(255,255,255,0.08); transition:background .35s; }
  .cl-incard:last-child{ border-bottom:1px solid rgba(255,255,255,0.08); }
  .cl-incard.lit{ background:rgba(94,134,255,0.06); }
  @media (max-width:640px){ .cl-incard{ grid-template-columns:1fr; gap:9px; } }
  @keyframes clfeed{ 0%{opacity:0;right:65%} 40%{opacity:1} 100%{opacity:0;right:-45%} }
  .cl-inlabel{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.88); margin:0; }
  .cl-inlabel i{ width:7px; height:7px; border-radius:50%; background:var(--cl-acc); box-shadow:0 0 9px var(--cl-acc); flex:none; }
  .cl-incard{ cursor:default; }
  .cl-incol{ position:relative; min-height:46px; display:flex; flex-direction:column; justify-content:center; }
  .cl-chips{ display:flex; flex-wrap:wrap; gap:6px; transition:opacity .28s ease, transform .28s ease; transition-delay:.14s; }
  .cl-incard:hover .cl-chips{ opacity:0; transform:translateY(-7px); transition-delay:0s; }
  .cl-indef{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(7px); pointer-events:none; max-width:62ch;
    font-size:13.5px; line-height:1.46; color:rgba(255,255,255,0.62); transition:opacity .3s ease, transform .3s ease; }
  .cl-indef b{ color:#fff; font-weight:600; }
  .cl-incard:hover .cl-indef{ opacity:1; transform:translateY(0); transition-delay:.14s; }
  @media (prefers-reduced-motion:reduce){ .cl-chips, .cl-indef{ transition-duration:.01s; } }
  .cl-chip{ font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:0.01em; color:rgba(255,255,255,0.62); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:3px 9px; white-space:nowrap; }

  .cl-right{ display:flex; flex-direction:column; align-items:center; }
  .cl-phonewrap{ position:relative; }
  #clPhone .flipper{ filter:drop-shadow(0 38px 84px rgba(0,0,0,0.6)) drop-shadow(0 0 70px rgba(94,134,255,0.18)); }
  .cl-badge{ position:absolute; left:50%; bottom:-15px; transform:translateX(-50%); z-index:5; display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px; background:linear-gradient(145deg,#5E86FF,#2A48DE); color:#fff; font-size:12px; font-weight:600; box-shadow:0 12px 28px -6px rgba(42,72,222,0.85); opacity:0; transition:opacity .4s; white-space:nowrap; }
  .cl-badge svg{ width:13px; height:13px; }
  .cl-badge.show{ opacity:1; }
  .cl-cap{ font-size:14px; color:rgba(255,255,255,0.56); text-align:left; line-height:1.6; margin-top:22px; min-height:46px; }
  .cl-cap b{ color:#5E86FF; font-weight:600; }
  /* ---- scaffolded landing sections below the demo ---- */
  .cl-sec{ position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:162px 40px; text-align:center; }
  .cl-sec-h{ font-weight:700; letter-spacing:-0.03em; font-size:clamp(30px,3.8vw,46px); line-height:1.05; margin:12px 0 14px; }
  .cl-sec-h .cl-hl{ color:#5E86FF; }
  .cl-sec-sub{ font-size:16.5px; line-height:1.6; color:rgba(255,255,255,0.56); max-width:60ch; margin:0 auto; }
  .cl-sec-sub b{ color:#fff; font-weight:500; }
  .cl-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; text-align:left; }
  @media (max-width:760px){ .cl-stats{ grid-template-columns:1fr 1fr; } }
  .cl-stat{ display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.1); border-radius:18px; background:rgba(255,255,255,0.03); padding:24px 22px; transition:border-color .25s, background .25s, transform .25s; }
  .cl-stat:hover{ border-color:rgba(94,134,255,0.42); background:rgba(94,134,255,0.06); transform:translateY(-3px); }
  .cl-stat-ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg, rgba(94,134,255,0.22), rgba(42,72,222,0.16)); color:#7FA8FF; margin-bottom:18px; }
  .cl-stat-ic svg{ width:21px; height:21px; }
  .cl-stat b{ display:block; font-size:33px; font-weight:700; color:#5E86FF; letter-spacing:-0.02em; line-height:1; }
  .cl-stat s{ text-decoration:none; display:block; font-size:13px; color:rgba(255,255,255,0.58); margin-top:9px; line-height:1.45; }
  /* ===== chatbot vs GenUI ===== */
  .ct-sec{ max-width:1180px; text-align:left; }
  .ct-grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:60px; align-items:stretch; margin-top:6px; }
  @media (max-width:900px){ .ct-grid{ grid-template-columns:1fr; gap:34px; } }
  .ct-copy{ display:flex; flex-direction:column; }
  .ct-copy .cl-eyebrow{ margin-bottom:16px; }
  .ct-h{ font-size:clamp(27px,3vw,34px); font-weight:700; line-height:1.12; letter-spacing:-0.02em; color:#0c1430; margin:0 0 20px; text-wrap:balance; }
  .ct-h .cl-hl{ color:#2A48DE; }
  .ct-sub{ font-size:16.5px; line-height:1.6; color:rgba(12,20,48,0.64); margin:0; max-width:46ch; }
  .ct-quote{ margin-top:auto; border-left:3px solid #2A48DE; background:rgba(42,72,222,0.045); border-radius:0 16px 16px 0; padding:20px 24px; font-size:17px; line-height:1.58; font-style:italic; color:rgba(12,20,48,0.84); max-width:54ch; }
  .ct-quote cite{ display:block; font-style:normal; font-size:12.5px; letter-spacing:0.02em; color:rgba(12,20,48,0.5); margin-top:14px; font-family:'JetBrains Mono',monospace; }
  /* "What is GenUI?" definition (sits where the quote used to, anchored low) */
  .ct-def{ margin-top:auto; border-left:3px solid #2A48DE; background:rgba(42,72,222,0.05); border-radius:0 16px 16px 0; padding:22px 26px; max-width:52ch; }
  .ct-def-label{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#2A48DE; margin-bottom:11px; }
  .ct-def p{ margin:0; font-size:16px; line-height:1.6; color:rgba(12,20,48,0.82); }
  .ct-def p b{ color:#0c1430; font-weight:600; }
  /* standalone pull-quote divider — a deliberate, contained breather in the light run */
  .cl-quotebreak{ position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:150px 40px; }
  .cl-quotebreak::before{ content:''; position:absolute; z-index:-1; inset:0; left:50%; transform:translateX(-50%); width:100vw; background:linear-gradient(180deg,#eef3fc 0%,#e2eaf8 100%); }
  .cl-qb-inner{ position:relative; max-width:940px; margin:0 auto; }
  .cl-qb-mark{ position:absolute; z-index:0; top:-58px; left:-12px; font-family:Georgia,'Times New Roman',serif; font-size:200px; line-height:1; color:#2A48DE; opacity:0.1; pointer-events:none; user-select:none; }
  .cl-qb{ position:relative; margin:0; font-size:clamp(25px,3.6vw,43px); line-height:1.24; font-weight:600; letter-spacing:-0.022em; color:#0c1430; text-wrap:balance; }
  .cl-qb-hl{ color:#2A48DE; }
  .cl-qb-by{ display:flex; align-items:center; gap:15px; margin-top:36px; }
  .cl-qb-rule{ width:34px; height:2px; flex:none; border-radius:2px; background:linear-gradient(90deg,#5E86FF,#2A48DE); }
  .cl-qb-meta{ font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.04em; color:rgba(12,20,48,0.55); }
  .cl-qb-meta b{ font-family:'Poppins',system-ui,sans-serif; font-weight:700; font-size:15px; color:#0c1430; letter-spacing:-0.01em; }
  @media (max-width:640px){ .cl-quotebreak{ padding:94px 18px; } .cl-qb-mark{ font-size:130px; top:-36px; left:-4px; } }
  .ct-phones{ display:flex; gap:24px; justify-content:center; align-items:flex-start; }
  @media (max-width:480px){ .ct-phones{ gap:12px; } }
  .ct-phone-col{ display:flex; flex-direction:column; align-items:center; gap:16px; }
  .ct-lab{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(12,20,48,0.42); }
  .ct-lab.ai{ color:#2A48DE; }
  .ct-textphone{ position:relative; width:206px; height:424px; min-height:0; flex:none; border-radius:34px; padding:6px; overflow:hidden;
    background:linear-gradient(160deg,#1f2c40,#080e1c 62%); box-shadow:0 30px 64px -22px rgba(10,20,50,0.5), inset 0 0 0 1px rgba(255,255,255,0.1); }
  .ct-tp-screen{ position:relative; height:100%; border-radius:28px; overflow:hidden; background:#0c1424; display:flex; flex-direction:column; }
  .ct-tp-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:58px; height:15px; border-radius:99px; background:#05080f; z-index:6; }
  .ct-tp-head{ display:flex; align-items:center; gap:9px; padding:29px 17px 13px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.66); border-bottom:1px solid rgba(255,255,255,0.06); }
  .ct-tp-dot{ width:7px; height:7px; border-radius:50%; background:#5E86FF; box-shadow:0 0 8px #5E86FF; }
  .ct-tp-body{ flex:1; min-height:0; overflow:hidden; padding:16px 15px 58px; display:flex; flex-direction:column; gap:13px; }
  .ct-tp-user{ align-self:flex-end; max-width:82%; background:rgba(94,134,255,0.2); color:rgba(255,255,255,0.86); font-size:10.5px; padding:8px 11px; border-radius:14px 14px 4px 14px; }
  .ct-tp-ai{ flex:1; min-height:0; overflow:hidden; font-size:10px; line-height:1.62; color:rgba(255,255,255,0.5); }   /* fills remaining space and clips, so the reply never pushes past the input */
  .ct-tp-fade{ position:absolute; left:0; right:0; bottom:50px; height:82px; background:linear-gradient(180deg, transparent, #0c1424 78%); pointer-events:none; }
  .ct-tp-input{ position:absolute; left:12px; right:12px; bottom:13px; height:38px; border-radius:19px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; padding:0 15px; font-size:11px; color:rgba(255,255,255,0.32); }
  .ct-genui .flipper{ filter:drop-shadow(0 30px 64px rgba(10,20,50,0.5)); }
  /* hover blueprint overlay (.ct-bp-*) removed — no dim + labeled dashed zones on phone hover */
  /* ===== cruise use cases (Static vs GenUI) ===== */
  .uc-sec{ max-width:1180px; }
  .uc-rows{ display:flex; flex-direction:column; gap:28px; margin-top:52px; }
  .uc-row{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; background:rgba(255,255,255,0.55); border:1px solid rgba(12,20,48,0.08); border-radius:26px; padding:32px 40px; }
  .uc-row.rev .uc-copy{ order:2; }
  @media (max-width:860px){ .uc-row{ grid-template-columns:1fr; gap:26px; padding:26px; } .uc-row.rev .uc-copy{ order:0; } }
  .uc-tag{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:#2A48DE; margin-bottom:12px; }
  .uc-tag-n{ color:rgba(12,20,48,0.4); }   /* "Use case 0X:" prefix in light grey, the label stays accent */
  .uc-copy{ text-align:left; }
  .uc-copy h3{ font-size:23px; font-weight:700; color:#0c1430; letter-spacing:-0.01em; margin:0 0 11px; line-height:1.15; }
  .uc-copy p{ font-size:15px; line-height:1.55; color:rgba(12,20,48,0.62); margin:0; max-width:40ch; }
  .uc-stat{ display:grid; grid-template-columns:auto 1fr; column-gap:11px; row-gap:3px; align-items:center; margin-top:24px; padding-top:22px; border-top:1px solid rgba(12,20,48,0.1); }
  .uc-stat-n{ grid-column:1; grid-row:1; align-self:center; font-size:40px; font-weight:700; letter-spacing:-0.02em; color:#2A48DE; line-height:0.9; }
  .uc-stat-l{ grid-column:2; grid-row:1; align-self:center; font-size:13.5px; line-height:1.42; color:rgba(12,20,48,0.66); max-width:32ch; }
  .uc-stat-src{ grid-column:2; grid-row:2; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(12,20,48,0.4); }
  .uc-pairwrap{ display:flex; justify-content:center; min-width:0; }   /* centers the (zoom-collapsed) pair; on mobile it goes full-bleed so both phones stay centered in the viewport even past the card edge */
  .uc-pair{ display:flex; gap:18px; justify-content:center; align-items:flex-start; width:max-content; }
  .uc-col{ display:flex; flex-direction:column; align-items:center; gap:13px; flex:none; width:194px; }
  .uc-cap{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(12,20,48,0.4); }
  .uc-cap.g{ color:#2A48DE; }
  .uc-phone{ position:relative; width:100%; border-radius:24px; padding:0; background:none; box-shadow:0 26px 56px -30px rgba(12,20,48,0.42); }
  .uc-phone.g{ box-shadow:0 26px 58px -28px rgba(42,72,222,0.42); }
  .uc-phone.s{ box-shadow:none; }   /* static lies flat so the GenUI surface floats forward */
  .uc-notch{ display:none; }
  .uc-phone.s .uc-scr{ border:1px solid rgba(12,20,48,0.12); }
  .uc-phone.g .uc-scr{ border:1px solid rgba(42,72,222,0.22); }
  .uc-scr{ position:relative; border-radius:24px; overflow:hidden; background:#fbfcfe; height:412px; display:flex; flex-direction:column; text-align:left; }
  .uc-phone .uc-hd{ padding-top:16px; }
  .uc-phone .uc-hero{ padding-top:16px; }
  .uc-hd{ display:flex; align-items:center; justify-content:space-between; padding:23px 14px 12px; border-bottom:1px solid #eef1f7; }
  .uc-lg{ height:12px; width:auto; }
  .uc-bell2{ width:14px; height:14px; color:#aeb6c4; }
  .uc-hero{ position:relative; padding:23px 14px 13px; min-height:84px; display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center; color:#fff; }
  .uc-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,13,29,0.32) 0%,rgba(8,13,29,0.8) 100%); }
  .uc-hero > *{ position:relative; z-index:1; }
  .uc-hero-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
  .uc-hero .uc-lg{ filter:brightness(0) invert(1); }
  .uc-spark{ width:13px; height:13px; color:#9DB6F8; }
  .uc-hero-t{ font-size:14.5px; font-weight:700; letter-spacing:-0.01em; }
  .uc-body{ flex:1; padding:13px 14px; display:flex; flex-direction:column; min-height:0; }
  .uc-tab{ display:flex; justify-content:space-around; align-items:center; padding:9px 6px 11px; border-top:1px solid #eef1f7; background:#fff; }
  .uc-tab svg{ width:15px; height:15px; display:block; color:#bcc4d2; }
  .uc-tab .on svg{ color:#2A48DE; }
  .uc-h{ font-size:13.5px; font-weight:700; color:#0c1430; margin-bottom:10px; }
  .uc-step{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
  .uc-step span{ font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#9aa3b5; white-space:nowrap; }
  .uc-step i{ display:flex; gap:4px; flex:1; max-width:84px; }
  .uc-step i b{ flex:1; height:3px; border-radius:2px; background:rgba(12,20,48,0.12); }
  .uc-step i b.on{ background:#9aa3b5; }
  .uc-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }
  .uc-chips span{ font-size:9.5px; color:#6b7689; background:#eef1f7; border:1px solid #e1e6ef; border-radius:999px; padding:3px 8px; }
  .uc-li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #eef1f7; font-size:11.5px; }
  .uc-li:first-of-type{ border-top:none; }
  .uc-li b{ color:#1d2740; font-weight:600; flex:1; } .uc-li s{ text-decoration:none; color:#7a8499; font-family:'JetBrains Mono',monospace; font-size:11px; }
  .uc-li.mut{ opacity:0.45; }
  .uc-check{ width:15px; height:15px; border:1.6px solid #c5cdda; border-radius:4px; flex:none; }
  .uc-radio{ position:relative; width:14px; height:14px; border:1.6px solid #c5cdda; border-radius:50%; flex:none; }
  .uc-radio.on{ border-color:#2A48DE; }
  .uc-radio.on::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:#2A48DE; }
  .uc-radios{ display:flex; gap:18px; margin:4px 0 2px; font-size:11px; color:#6b7689; }
  .uc-radios > span{ display:flex; align-items:center; gap:7px; }
  .uc-todo{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:11.5px; color:#39435a; border-top:1px solid #eef1f7; }
  .uc-todo:first-of-type{ border-top:none; }
  .uc-fl{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .uc-fl label{ font-size:11px; color:#6b7689; }
  .uc-sel{ font-size:10.5px; color:#9aa3b5; background:#f1f4f9; border:1px solid #e3e8f0; border-radius:7px; padding:5px 9px; min-width:84px; text-align:right; }
  .uc-ti{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:11.5px; color:#1d2740; border-top:1px solid #eef1f7; }
  .uc-ti:first-of-type{ border-top:none; }
  .uc-ti i{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; color:#2A48DE; font-style:normal; min-width:34px; }
  .uc-big{ font-size:15px; font-weight:700; color:#0c1430; margin-bottom:3px; }
  .uc-big em{ font-style:normal; font-size:10px; font-weight:600; color:#178F86; background:rgba(23,143,134,0.12); padding:2px 7px; border-radius:999px; margin-left:4px; vertical-align:middle; }
  .uc-sub2{ font-size:11px; color:#7a8499; margin-bottom:11px; }
  .uc-note{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:#1d2740; background:#eef3fb; border-radius:10px; padding:9px 11px; margin-bottom:11px; }
  .uc-note-ic{ flex:none; display:flex; color:#5b6b8a; } .uc-note-ic svg{ width:18px; height:18px; }
  .uc-row2{ display:flex; align-items:flex-start; gap:11px; padding:7px 0; border-top:1px solid #eef1f7; }
  .uc-row2:first-of-type{ border-top:none; }
  .uc-row2-ic{ width:28px; height:28px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(94,134,255,0.12); color:#2A48DE; }
  .uc-row2-ic svg{ width:15px; height:15px; }
  .uc-row2-ic.moved{ background:rgba(200,132,28,0.16); color:#C8841C; }
  .uc-row2-ic.held{ background:rgba(23,143,134,0.16); color:#178F86; }
  .uc-row2 b{ display:block; font-size:12px; font-weight:600; color:#1d2740; line-height:1.3; }
  .uc-row2 s{ text-decoration:none; display:block; font-size:10.5px; color:#8893a6; margin-top:2px; }
  .uc-avatars{ display:flex; margin-bottom:11px; }
  .uc-avatars i{ width:18px; height:18px; border-radius:50%; background:linear-gradient(145deg,#9DB6F8,#5E86FF); border:2px solid #fff; margin-left:-5px; }
  .uc-avatars i:first-child{ margin-left:0; }
  .uc-btn{ margin-top:auto; text-align:center; font-size:11.5px; font-weight:600; color:#fff; background:linear-gradient(135deg,#4F7CFF,#2A48DE); border-radius:10px; padding:9px; }
  .uc-btn.mut{ color:#9aa3b5; background:#eef1f7; border:1px solid #e3e8f0; }
  /* tighter variant so a content-heavy GenUI mock still shows its CTA */
  .uc-tight .uc-hero{ min-height:74px; padding-top:18px; padding-bottom:11px; }
  .uc-tight .uc-big{ font-size:13.5px; }
  .uc-tight .uc-sub2{ font-size:10px; margin-bottom:8px; }
  .uc-tight .uc-row2{ padding:5px 0; }
  .uc-tight .uc-row2-ic{ width:24px; height:24px; }
  .uc-tight .uc-row2-ic svg{ width:13px; height:13px; }
  .uc-tight .uc-row2 b{ font-size:10.5px; line-height:1.22; }
  .uc-tight .uc-row2 s{ font-size:9.5px; margin-top:1px; }
  .uc-tight .uc-btn{ font-size:11px; padding:8px; }
  .uc-bell{ width:34px; height:34px; border-radius:10px; background:#eef1f7; display:flex; align-items:center; justify-content:center; color:#9aa3b5; margin-bottom:10px; }
  .uc-bell svg{ width:18px; height:18px; }
  .cl-cta-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; padding:14px 26px; border-radius:999px; background:linear-gradient(145deg,#4F7CFF,#2A48DE); color:#fff; font-weight:600; font-size:15px; text-decoration:none; box-shadow:0 14px 30px -8px rgba(42,72,222,0.8); cursor:pointer; transition:filter .2s, transform .2s; }
  .cl-cta-btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
  /* --- The shift: GenUI recomposes a desktop surface --- */
  .cl-shift{ max-width:1120px; }
  .cl-vs-toggle{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:40px auto 0; max-width:760px; }
  .cl-vsg{ display:flex; align-items:center; gap:10px; padding:7px 15px 7px 7px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); cursor:pointer; transition:border-color .25s, background .25s, transform .2s, box-shadow .25s; }
  .cl-vsg:hover{ transform:translateY(-1px); border-color:rgba(94,134,255,0.45); }
  .cl-vsg img{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 22%; filter:grayscale(1) brightness(0.85); transition:filter .25s; }
  .cl-vsg span{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
  .cl-vsg b{ font-size:13px; font-weight:600; color:rgba(255,255,255,0.8); }
  .cl-vsg s{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.02em; text-decoration:none; color:rgba(255,255,255,0.4); white-space:nowrap; }
  .cl-vsg.on{ background:linear-gradient(165deg,#5E86FF,#2A48DE); border-color:transparent; box-shadow:0 12px 30px -10px rgba(42,72,222,0.8); }
  .cl-vsg.on img{ filter:none; }
  .cl-vsg.on b{ color:#fff; } .cl-vsg.on s{ color:rgba(255,255,255,0.82); }
  @media (max-width:680px){ .cl-vsg s{ display:none; } }
  /* ---- laptop + desktop web app (cd-) ---- */
  .cd-stage{ --cd-acc:#5E86FF; max-width:1020px; margin:46px auto 0; text-align:left; min-height:684px; display:grid; place-items:center; }
  /* every device keeps a fixed "design" width and its desktop layout; on narrow screens JS scales the whole frame down (zoom) so it stays proportional instead of reflowing tall */
  .cd-laptop{ position:relative; width:1020px; }
  .cd-screen{ position:relative; border-radius:14px 14px 4px 4px; background:#0a1022; overflow:hidden;
    border:1px solid rgba(255,255,255,0.08); box-shadow:0 50px 100px -34px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.03); }
  .cd-base{ position:relative; width:118%; margin-left:-9%; height:15px; border-radius:0 0 13px 13px;
    background:linear-gradient(180deg,#aeb6c4 0%,#7e8696 48%,#5d6473 100%); box-shadow:0 24px 40px -18px rgba(0,0,0,0.7); }
  .cd-base::after{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:130px; height:8px;
    background:linear-gradient(180deg,#5a616f,#3d4350); border-radius:0 0 9px 9px; }
  /* browser chrome */
  .cd-chrome{ display:flex; align-items:center; gap:14px; padding:0 16px; height:40px; background:#0d152b; border-bottom:1px solid rgba(255,255,255,0.06); }
  .cd-dots{ display:flex; gap:7px; }
  .cd-dots i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.18); }
  .cd-dots i:first-child{ background:#ff5f57; } .cd-dots i:nth-child(2){ background:#febc2e; } .cd-dots i:nth-child(3){ background:#28c840; }
  .cd-url{ flex:1; max-width:340px; display:flex; align-items:center; gap:8px; height:24px; padding:0 12px; border-radius:7px;
    background:rgba(255,255,255,0.06); font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,0.5); }
  .cd-url svg{ width:11px; height:11px; opacity:0.55; }
  .cd-chrome-r{ display:flex; gap:14px; opacity:0.32; }
  .cd-chrome-r i{ width:15px; height:2px; border-radius:2px; background:#fff; box-shadow:0 5px 0 #fff,0 -5px 0 #fff; }
  /* app shell */
  .cd-app{ display:grid; grid-template-columns:188px 1fr; height:600px; background:radial-gradient(120% 80% at 80% 0%,#0e1730 0%,#080d1d 60%); }
  .cd-side{ border-right:1px solid rgba(255,255,255,0.06); padding:18px 14px; display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,0.012); }
  .cd-side-logo{ display:flex; align-items:center; height:30px; margin:2px 6px 18px; }
  .cd-side-logo img{ height:21px; opacity:0.95; filter:brightness(0) invert(1); }
  .cd-nav{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; font-size:13px; color:rgba(255,255,255,0.52); cursor:default; transition:color .3s, background .3s; }
  .cd-nav svg{ width:16px; height:16px; flex:none; }
  .cd-nav.on{ color:#fff; background:rgba(255,255,255,0.06); }
  .cd-nav.on .cd-nav-dot{ background:var(--cd-acc); }
  .cd-nav-dot{ width:5px; height:5px; border-radius:50%; background:transparent; margin-left:auto; }
  .cd-side-foot{ margin-top:auto; display:flex; align-items:center; gap:9px; padding:8px 7px; border-top:1px solid rgba(255,255,255,0.06); }
  .cd-side-foot img{ width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 22%; }
  .cd-side-foot b{ display:block; font-size:12px; color:#fff; font-weight:600; line-height:1.2; }
  .cd-side-foot s{ display:block; font-size:10px; text-decoration:none; color:rgba(255,255,255,0.4); font-family:'JetBrains Mono',monospace; }
  .cd-main{ display:flex; flex-direction:column; min-width:0; overflow:hidden; }
  .cd-top{ display:flex; align-items:center; justify-content:space-between; padding:20px 26px 0; }
  .cd-greet b{ display:block; font-size:19px; font-weight:700; letter-spacing:-0.01em; color:#fff; }
  .cd-greet s{ display:block; text-decoration:none; font-size:12px; color:rgba(255,255,255,0.45); margin-top:3px; }
  .cd-search{ display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:9px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); font-size:12px; color:rgba(255,255,255,0.4); width:200px; }
  .cd-search svg{ width:13px; height:13px; opacity:0.5; }
  .cd-canvas{ position:relative; flex:1; padding:18px 26px 24px; }
  /* hero band */
  .cd-hero{ position:relative; border-radius:16px; overflow:hidden; padding:24px 28px; min-height:140px; display:flex; flex-direction:column; justify-content:flex-end;
    background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); margin-bottom:14px; }
  .cd-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(108deg, rgba(5,9,24,0.92) 0%, rgba(5,9,24,0.62) 42%, rgba(5,9,24,0.12) 100%); }
  .cd-hero > *{ position:relative; z-index:1; }
  .cd-hero-tag{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--cd-acc); padding:4px 10px; border-radius:999px; margin-bottom:12px; }
  .cd-hero-title{ font-size:24px; font-weight:700; letter-spacing:-0.02em; color:#fff; line-height:1.12; max-width:30ch; }
  .cd-hero-sub{ font-size:13px; color:rgba(255,255,255,0.78); margin-top:7px; max-width:46ch; line-height:1.45; }
  .cd-hero-cta{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:15px; padding:9px 17px; border-radius:999px; background:#fff; color:#0a1022; font-size:12.5px; font-weight:600; }
  /* card grid */
  .cd-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:13px; }
  .cd-card{ position:relative; overflow:hidden; grid-column:span 2; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.035); padding:16px 18px; min-height:96px; display:flex; flex-direction:column; }
  .cd-card.sp3{ grid-column:span 3; } .cd-card.sp4{ grid-column:span 4; } .cd-card.sp6{ grid-column:span 6; }
  .cd-card-ic{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--cd-acc) 22%, transparent); color:var(--cd-acc); margin-bottom:12px; }
  .cd-card-ic svg{ width:17px; height:17px; }
  .cd-card-k{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--cd-acc); margin-bottom:6px; }
  .cd-card b{ font-size:14.5px; font-weight:600; color:#fff; line-height:1.25; letter-spacing:-0.01em; }
  .cd-card s{ text-decoration:none; display:block; font-size:11.5px; color:rgba(255,255,255,0.52); margin-top:6px; line-height:1.45; }
  .cd-card .cd-card-meta{ margin-top:auto; padding-top:12px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:rgba(255,255,255,0.46); }
  /* photo card */
  .cd-card.photo{ position:relative; overflow:hidden; padding:0; min-height:122px; justify-content:flex-end; border:none; }
  .cd-card.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.62) saturate(0.95); }
  .cd-card.photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(3,6,16,0.99) 0%, rgba(3,6,16,0.95) 34%, rgba(3,6,16,0.74) 60%, rgba(3,6,16,0.4) 82%, rgba(3,6,16,0.08) 100%); }
  .cd-card.photo > *{ position:relative; z-index:1; }
  .cd-card.photo .cd-pad{ padding:15px 17px; width:100%; text-shadow:0 1px 3px rgba(0,0,0,0.8), 0 2px 14px rgba(0,0,0,0.7); }
  .cd-card.photo .cd-card-k{ color:#fff; opacity:0.96; }
  .cd-card.photo b{ color:#fff; }
  .cd-card.photo .cd-card-meta{ padding-top:6px; color:rgba(255,255,255,0.9); }
  .cd-card.photo .cd-pill{ background:rgba(6,12,26,0.5); color:#fff; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); text-shadow:none; }
  .cd-card.photo .cd-pill-ok{ color:#7ef0bd; } .cd-card.photo .cd-pill-warn{ color:#ffce7d; }
  /* live (accent) card */
  .cd-card.live{ background:linear-gradient(150deg, color-mix(in srgb, var(--cd-acc) 30%, transparent), color-mix(in srgb, var(--cd-acc) 12%, transparent)); border-color:color-mix(in srgb, var(--cd-acc) 40%, transparent); }
  .cd-card.live .cd-card-k{ color:#fff; opacity:0.85; }
  .cd-live-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cd-acc); margin-right:6px; box-shadow:0 0 0 0 var(--cd-acc); animation:cdPulse 1.8s infinite; }
  @keyframes cdPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--cd-acc) 70%,transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
  .cd-live-foot{ margin-top:auto; padding-top:14px; }
  .cd-hold{ height:4px; border-radius:999px; background:rgba(255,255,255,0.1); overflow:hidden; margin-bottom:9px; }
  .cd-hold i{ display:block; height:100%; border-radius:999px; background:var(--cd-acc); box-shadow:0 0 10px color-mix(in srgb,var(--cd-acc) 65%, transparent); }
  .cd-route{ position:absolute; right:14px; bottom:12px; width:88px; height:auto; pointer-events:none; }
  .cd-badge{ position:absolute; top:14px; right:14px; z-index:6; display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.04em; color:#fff; background:rgba(8,13,29,0.72); backdrop-filter:blur(6px); padding:5px 11px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); opacity:0; transition:opacity .4s; }
  .cd-badge.show{ opacity:1; }
  .cd-badge svg{ width:11px; height:11px; color:var(--cd-acc); }
  .cd-badge-t{ white-space:nowrap; }
  .cd-badge.composing{ border-color:color-mix(in srgb,var(--cd-acc) 55%, rgba(255,255,255,0.14)); }
  .cd-badge.composing svg{ animation:cdStar 0.85s ease-in-out infinite; }
  @keyframes cdStar{ 0%,100%{ opacity:0.45; transform:scale(0.82) rotate(0deg); } 50%{ opacity:1; transform:scale(1.12) rotate(90deg); } }
  .cd-modscan{ position:absolute; left:0; right:0; height:72%; pointer-events:none; z-index:5;
    background:linear-gradient(180deg, transparent 0%, color-mix(in srgb,var(--cd-acc) 16%, transparent) 62%, color-mix(in srgb,var(--cd-acc) 34%, transparent) 92%, transparent 100%);
    border-bottom:1px solid color-mix(in srgb,var(--cd-acc) 52%, transparent); mix-blend-mode:screen; }
  /* ===== rich card internals ===== */
  .cd-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .cd-card-top .cd-card-k{ margin-bottom:0; }
  .cd-bot{ margin-top:auto; padding-top:13px; }
  .cd-card .cd-bot .cd-card-meta{ margin-top:0; padding-top:0; }
  .cd-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .cd-bot .cd-card-meta + .cd-foot{ margin-top:10px; }
  .cd-foot-sp{ flex:1; min-width:0; }
  .cd-pill{ display:inline-flex; align-items:center; gap:5px; flex:none; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; }
  .cd-pill svg{ width:10px; height:10px; }
  .cd-pill-ok{ background:rgba(48,200,140,0.16); color:#4fd6a0; }
  .cd-pill-warn{ background:rgba(240,176,70,0.18); color:#f3bd66; }
  .cd-pill-accent{ background:color-mix(in srgb,var(--cd-acc) 24%, transparent); color:#fff; }
  .cd-pill-live{ background:color-mix(in srgb,var(--cd-acc) 28%, transparent); color:#fff; }
  .cd-pill-dot{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 6px rgba(255,255,255,0.8); }
  .cd-cta{ display:inline-flex; align-items:center; gap:5px; flex:none; font-family:inherit; font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.16); padding:6px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s; }
  .cd-cta svg{ width:11px; height:11px; opacity:0.75; }
  .cd-cta:hover{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.28); }
  .cd-card.live .cd-cta, .cd-card.photo .cd-cta{ background:#fff; color:#0a1022; border-color:transparent; }
  .cd-card.live .cd-cta svg, .cd-card.photo .cd-cta svg{ opacity:0.65; }
  .cd-card.live .cd-cta:hover, .cd-card.photo .cd-cta:hover{ background:rgba(255,255,255,0.85); }
  .cd-book-top{ display:flex; gap:13px; align-items:flex-start; }
  .cd-book-h{ min-width:0; }
  .cd-thumb{ width:52px; height:52px; flex:none; border-radius:12px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }
  .cd-avs{ display:flex; align-items:center; }
  .cd-av{ width:27px; height:27px; border-radius:50%; background-size:300%; border:2px solid rgba(8,13,29,0.92); margin-left:-9px; box-shadow:0 1px 4px rgba(0,0,0,0.4); }
  .cd-av:first-child{ margin-left:0; }
  .cd-av-more{ display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--cd-acc) 36%, #1b2440); color:#fff; font-size:9.5px; font-weight:700; font-family:'JetBrains Mono',monospace; }
  .cd-val-top{ display:flex; align-items:center; gap:12px; }
  .cd-ring{ position:relative; width:42px; height:42px; flex:none; }
  .cd-ring svg{ width:42px; height:42px; display:block; }
  .cd-ring-c{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; color:#fff; }
  .cd-big{ font-size:30px; font-weight:700; letter-spacing:-0.02em; line-height:1; color:color-mix(in srgb,var(--cd-acc) 50%, #ffffff); margin-top:12px; }
  .cd-big em{ font-style:normal; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.5); margin-left:6px; letter-spacing:0; }
  .cd-pass-top{ display:flex; gap:13px; align-items:center; }
  .cd-bars{ position:relative; flex:none; width:54px; height:50px; border-radius:10px; background:#fff; overflow:hidden; }
  .cd-bars::before{ content:''; position:absolute; inset:9px 7px; background:repeating-linear-gradient(90deg,#0b1224 0 2px,transparent 2px 3.5px,#0b1224 3.5px 5px,transparent 5px 6px,#0b1224 6px 9px,transparent 9px 11px); }
  .cd-pass{ position:relative; }
  .cd-pass .cd-foot{ margin-top:auto; padding-top:13px; }
  .cd-map{ position:relative; overflow:hidden; background-image:linear-gradient(rgba(12,18,38,0.64),rgba(12,18,38,0.74)), url('/h9jv3ktq/carnival-23610d/assets/maps/deck-route.jpg'); background-size:cover; background-position:center; }
  .cd-map .cd-card-ic, .cd-map .cd-card-k, .cd-map b, .cd-map .cd-bot{ position:relative; z-index:1; }
  /* (no reflow at narrow widths — the laptop keeps its desktop layout and is scaled down as a whole, see fitMocks) */
  /* ===== device chooser (Desktop / Tablet) ===== */
  .cd-devtoggle-wrap{ display:flex; justify-content:center; margin:40px auto 0; }
  .cd-devtoggle{ position:relative; display:inline-flex; gap:4px; padding:5px; border-radius:999px; border:1px solid rgba(12,20,48,0.12); background:rgba(12,20,48,0.04); }
  .cd-dev-thumb{ position:absolute; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:#33363b; z-index:0; transition:left .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1); }
  .cd-devbtn{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; border:none; background:transparent; cursor:pointer; color:rgba(12,20,48,0.6); font-family:inherit; font-size:13.5px; font-weight:600; transition:color .25s; }
  .cd-devbtn svg{ width:17px; height:17px; }
  .cd-devbtn:hover{ color:#0c1430; }
  .cd-devbtn.on, .cd-devbtn.on:hover{ color:#fff; }
  @media (max-width:600px){ .cd-devbtn{ padding:9px 12px; font-size:12px; gap:6px; } .cd-devbtn svg{ width:15px; height:15px; } }   /* keep the 4 tabs on one line on phones */
  @media (max-width:345px){ .cd-devbtn span{ display:none; } .cd-devbtn{ padding:9px 13px; } }   /* very small phones (≤320): icon-only so the 4 tabs never clip the screen edge */
  /* ===== portrait tablet frame ===== */
  .cd-tablet{ display:none; position:relative; width:496px; margin:0 auto; border-radius:34px; padding:14px;
    background:linear-gradient(155deg,#2b3850,#0b1120 62%); box-shadow:0 50px 100px -34px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.05); }
  .cd-stage[data-dev="tablet"] .cd-laptop{ display:none; }
  .cd-stage[data-dev="tablet"] .cd-tablet{ display:block; }
  .cd-tab-cam{ position:absolute; top:13px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:#05080f; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.08); z-index:8; }
  .cd-tab-screen{ position:relative; border-radius:22px; overflow:hidden; background:radial-gradient(120% 70% at 80% 0%,#0e1730 0%,#080d1d 60%); height:652px; display:flex; flex-direction:column; }
  .cd-tab-bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .cd-tab-logo img{ height:20px; filter:brightness(0) invert(1); opacity:0.95; }
  .cd-tab-user{ display:flex; align-items:center; gap:9px; }
  .cd-tab-user img{ width:32px; height:32px; border-radius:50%; object-fit:cover; object-position:50% 22%; }
  .cd-tab-user span{ display:flex; flex-direction:column; line-height:1.2; }
  .cd-tab-user b{ font-size:12.5px; color:#fff; font-weight:600; }
  .cd-tab-user s{ text-decoration:none; font-size:9.5px; color:rgba(255,255,255,0.42); font-family:'JetBrains Mono',monospace; }
  .cd-tab-canvas{ position:relative; flex:1; padding:20px 22px 24px; overflow:hidden; }
  .cd-tab-greet{ margin-bottom:16px; }
  .cd-tab-hero{ min-height:148px; }
  .cd-tab-hero .cd-hero-title{ font-size:21px; }
  .cd-tab-grid{ grid-template-columns:1fr 1fr; gap:13px; margin-top:0; }
  .cd-tab-grid .cd-card,
  .cd-tab-grid .cd-card.sp3,
  .cd-tab-grid .cd-card.sp4,
  .cd-tab-grid .cd-card.sp6{ grid-column:span 1; min-height:108px; }
  /* ===== in-cabin TV (lean-back welcome) ===== */
  .cd-tv{ display:none; width:880px; position:relative; }
  /* remote tucks behind the TV's right edge, then pops out once the TV has sprung in */
  .cd-remote{ position:absolute; right:-46px; bottom:24px; width:56px; height:auto; pointer-events:none;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,0.5));
    opacity:0; transform:translateX(-90px); transition:transform .7s cubic-bezier(.2,.9,.3,1), opacity .5s ease; }
  .cd-remote.out{ opacity:1; transform:translateX(0); }
  @media (prefers-reduced-motion:reduce){ .cd-remote{ transition:none; } }
  @media (max-width:640px){ .cd-remote{ display:none; } }
  .cd-stage[data-dev="tv"] .cd-laptop{ display:none; }
  .cd-stage[data-dev="tv"] .cd-tv{ display:block; }
  .cd-tv-screen{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#070b16; border:10px solid #0a0e1a;
    box-shadow:0 50px 110px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05), 0 0 130px -24px rgba(94,134,255,0.28); }
  .cd-tv-amb{ position:absolute; inset:0; background:#070b16; }
  .cd-tv-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity .7s ease; }
  .cd-tv-video.on{ opacity:1; }
  .cd-tv-amb::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(105deg, rgba(5,9,22,0.93) 0%, rgba(5,9,22,0.76) 44%, rgba(5,9,22,0.36) 100%), linear-gradient(0deg, rgba(5,9,22,0.85), transparent 52%); }
  .cd-tv-fill{ position:relative; z-index:2; }
  .cd-tv-top{ display:flex; align-items:center; justify-content:space-between; padding:26px 34px 0; }
  .cd-tv-logo{ height:23px; filter:brightness(0) invert(1); opacity:0.95; }
  .cd-tv-meta{ display:flex; align-items:center; gap:16px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.06em; color:rgba(255,255,255,0.82); }
  .cd-tv-wx{ display:inline-flex; align-items:center; gap:6px; }
  .cd-tv-wx svg{ width:15px; height:15px; }
  .cd-tv-greet{ padding:30px 34px 0; max-width:62%; }
  .cd-tv-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cd-acc); margin-bottom:13px; }
  .cd-tv-greet h3{ font-size:44px; font-weight:700; letter-spacing:-0.02em; color:#fff; margin:0; line-height:1.04; }   /* fixed px (was 4.2vw): vw resolves against the viewport, which diverges under the mock's zoom on iOS */
  .cd-tv-greet p{ font-size:16px; color:rgba(255,255,255,0.66); margin:11px 0 0; }
  .cd-tv-plan{ position:absolute; left:34px; right:34px; bottom:30px; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .cd-tv-card{ position:relative; overflow:hidden; background:rgba(255,255,255,0.08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.15); border-radius:16px; padding:18px 20px; }
  .cd-tv-time{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:var(--cd-acc); margin-bottom:9px; }
  .cd-tv-card b{ display:block; font-size:18px; font-weight:700; color:#fff; letter-spacing:-0.01em; line-height:1.2; }
  .cd-tv-card s{ display:block; text-decoration:none; font-size:13px; color:rgba(255,255,255,0.62); margin-top:5px; line-height:1.4; }
  .cd-tv-screen .cd-badge{ top:60px; right:34px; }
  /* ===== phone frame: the same live GenUI phone from the hero, shown on its own ===== */
  .cd-phone{ display:none; position:relative; }
  .cd-phone .flipper{ --u:1.5px; width:285px; height:587px; }
  .cd-stage[data-dev="phone"] .cd-laptop{ display:none; }
  .cd-stage[data-dev="phone"] .cd-phone{ display:block; }
  .cd-phone .cd-badge{ top:auto; right:auto; bottom:-15px; left:50%; transform:translateX(-50%); }
  .cd-disclaimer{ max-width:880px; margin:32px auto 0; text-align:center; font-size:12.5px; line-height:1.55; color:rgba(12,20,48,0.5); text-wrap:balance; }
  .cd-disclaimer em{ font-style:normal; font-weight:600; color:rgba(12,20,48,0.72); }
  /* ===== how it works (light) ===== */
  .hw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
  @media (max-width:820px){ .hw-grid{ grid-template-columns:1fr; } }
  .hw-card{ background:rgba(255,255,255,0.62); border:1px solid rgba(12,20,48,0.09); border-radius:20px; padding:30px 26px 28px; }
  .hw-ic{ width:48px; height:48px; margin:0 auto 13px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#5E86FF,#2A48DE); color:#fff; box-shadow:0 10px 24px -10px rgba(42,72,222,0.7); }
  .hw-ic svg{ width:24px; height:24px; }
  .hw-num{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:0.08em; color:#2A48DE; margin-bottom:9px; }
  .hw-card b{ display:block; font-size:18px; font-weight:700; color:#0c1430; letter-spacing:-0.01em; margin-bottom:9px; }
  .hw-card p{ font-size:14px; line-height:1.55; color:rgba(12,20,48,0.6); margin:0; }
  .hw-method{ margin-top:18px; text-align:center; background:linear-gradient(135deg,rgba(42,72,222,0.07),rgba(94,134,255,0.04)); border:1px solid rgba(42,72,222,0.14); border-radius:22px; padding:34px 38px; }
  .hw-method-tag{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:#2A48DE; margin-bottom:13px; }
  .hw-method h3{ font-size:22px; font-weight:700; color:#0c1430; margin:0 0 12px; letter-spacing:-0.01em; }
  .hw-method p{ font-size:14.5px; line-height:1.6; color:rgba(12,20,48,0.64); margin:0 auto; max-width:640px; }
  .hw-chips{ display:flex; gap:9px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
  .hw-chip{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.04em; color:rgba(12,20,48,0.7); background:rgba(255,255,255,0.7); border:1px solid rgba(12,20,48,0.1); padding:7px 14px; border-radius:999px; white-space:nowrap; }
  .hw-chip:first-child{ background:#172037; color:#fff; border-color:transparent; }
  /* ===== two ways in (dark) ===== */
  .tw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; margin-top:50px; }
  @media (max-width:760px){ .tw-grid{ grid-template-columns:1fr; gap:16px; } }
  .tw-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.1); border-radius:22px; padding:30px 32px 26px; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
  .tw-card:hover{ transform:translateY(-5px); border-color:rgba(94,134,255,0.45); box-shadow:0 26px 54px -26px rgba(42,72,222,0.6); }
  .tw-card.tw-alt{ background:linear-gradient(165deg, rgba(94,134,255,0.17), rgba(42,72,222,0.04)); border-color:rgba(94,134,255,0.3); }
  .tw-card-top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .tw-ic{ width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#5E86FF,#2A48DE); color:#fff; box-shadow:0 8px 20px -8px rgba(42,72,222,0.85); }
  .tw-ic svg{ width:22px; height:22px; }
  .tw-tag{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#7FA8FF; }
  .tw-card h3{ font-size:21px; font-weight:700; color:#fff; margin:0 0 12px; letter-spacing:-0.01em; text-wrap:balance; }
  .tw-card p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,0.62); margin:0; }
  .tw-foot{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#9DB6F8; }
  .tw-foot svg{ width:13px; height:13px; opacity:0.8; }
  /* ===== team on dark + footer ===== */
  #clTeam .team-member b{ color:#fff; }
  #clTeam .team-member s{ color:rgba(255,255,255,0.5); }
  #clTeam .team-link{ color:#7FA8FF; }
  #clTeam .team-cta{ border-top-color:rgba(255,255,255,0.1); color:rgba(255,255,255,0.58); }
  #clTeam .team-cta a{ color:#7FA8FF; }
  .cl-foot{ line-height:1.7; }
  .cl-foot p{ margin:0; font-size:10.5px; letter-spacing:0.2em; }
  .cl-foot .cl-fh{ color:#7FA8FF; letter-spacing:0; }
  .cl-foot a{ color:rgba(255,255,255,0.6); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.22); padding-bottom:1px; transition:color .2s, border-color .2s; }
  .cl-foot a:hover{ color:#fff; border-color:rgba(255,255,255,0.5); }
  .cl-foot .cl-foot-legal{ margin-top:11px; color:rgba(255,255,255,0.3); }
  /* get-started contact form (placeholder) */
  .cl-form{ max-width:520px; margin:34px auto 0; display:flex; flex-direction:column; gap:12px; text-align:left; }
  .cl-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .cl-form input, .cl-form textarea{ width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px; color:#fff; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:13px 15px; transition:border-color .2s, background .2s; }
  .cl-form input::placeholder, .cl-form textarea::placeholder{ color:rgba(255,255,255,0.42); }
  .cl-form input:focus, .cl-form textarea:focus{ outline:none; border-color:rgba(94,134,255,0.6); background:rgba(94,134,255,0.07); }
  .cl-form textarea{ resize:vertical; min-height:84px; line-height:1.5; }
  .cl-start-cta{ margin:34px auto 0; text-align:center; }   /* email-link CTA replaces the placeholder form */
  .cl-form button.cl-cta-btn{ margin-top:6px; align-self:center; border:none; cursor:pointer; font:inherit; font-weight:600; }
  .cl-form-note{ text-align:center; margin:2px 0 0; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.32); }
  .cl-form-done{ text-align:center; padding:34px 20px; font-size:17px; color:#cdd9ff; }
  @media (max-width:520px){ .cl-form-row{ grid-template-columns:1fr; } }
  /* ===== sliding nav indicator ===== */
  .cl-nav-ind{ position:absolute; bottom:-8px; left:0; width:0; height:2px; border-radius:2px; opacity:0; background:linear-gradient(90deg,#5E86FF,#2A48DE); transition:left .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1), opacity .25s ease; pointer-events:none; }
  /* ===== wave seams between dark/light band runs ===== */
  .cl-wave{ position:absolute; left:50%; transform:translateX(-50%); top:-100px; width:136vw; height:130px; z-index:-1; display:block; pointer-events:none; will-change:transform; }
  @media (max-width:640px){ .cl-wave{ top:-54px; height:76px; } }
  /* ===== bottom GenUI sign-off logo ===== */
  .cl-endmark{ display:flex; justify-content:center; padding:6px 0 34px; }
  .cl-endmark-logo{ height:56px; width:auto; }
  .cl-endmark-logo path{ fill:#fff; }                 /* white wordmark + unicorn, like the header */
  .cl-endmark-logo .gstar{ fill:#5E86FF; }            /* colored sparkles */
  @media (max-width:640px){ .cl-endmark-logo{ height:36px; } }
  /* ===== trust / guardrails section ===== */
  .tr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:920px; margin:46px auto 0; text-align:left; }
  @media (max-width:720px){ .tr-grid{ grid-template-columns:1fr; } }
  .tr-card{ border:1px solid rgba(255,255,255,0.1); border-radius:18px; background:rgba(255,255,255,0.03); padding:26px 28px; transition:border-color .25s, background .25s, transform .25s; }
  .tr-card:hover{ border-color:rgba(94,134,255,0.4); background:rgba(94,134,255,0.05); transform:translateY(-3px); }
  .tr-ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,#5E86FF 20%, transparent); color:#9DB6F8; margin-bottom:16px; }
  .tr-ic svg{ width:21px; height:21px; }
  .tr-card b{ display:block; font-size:17px; font-weight:600; color:#fff; letter-spacing:-0.01em; margin-bottom:8px; text-wrap:balance; }
  .tr-card p{ font-size:14px; line-height:1.55; color:rgba(255,255,255,0.58); margin:0; }
  .tr-band{ max-width:920px; margin:18px auto 0; border-radius:18px; border:1px solid rgba(94,134,255,0.25); background:linear-gradient(135deg, rgba(42,72,222,0.18), rgba(94,134,255,0.05)); padding:26px 30px; text-align:left; }
  .tr-band p{ font-size:15.5px; line-height:1.5; color:rgba(255,255,255,0.84); margin:0 0 16px; font-weight:500; }
  .tr-pills{ display:flex; flex-wrap:wrap; gap:10px; }
  .tr-pill{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#9DB6F8; border:1px solid rgba(94,134,255,0.35); border-radius:999px; padding:7px 14px; }
  /* ===== section variety: left-lead headers, accent band, trust split ===== */
  .cl-sec.lead{ text-align:left; }
  .cl-sec.lead > .cl-sec-sub{ margin-left:0; }
  /* accent band (Proof stands out from the dark run) */
  .cl-sec.band::before{ content:''; position:absolute; z-index:-1; inset:0; left:50%; transform:translateX(-50%); width:100vw; background:radial-gradient(85% 130% at 50% -15%, #5081ff 0%, #2a48de 46%, #16236f 100%); }
  .cl-sec.band .cl-eyebrow{ color:rgba(255,255,255,0.82); }
  .cl-sec.band .cl-hl{ color:#cdd9ff; }
  .cl-sec.band .cl-sec-sub{ color:rgba(255,255,255,0.85); }
  .cl-sec.band .cl-stat{ border-color:rgba(255,255,255,0.24); background:rgba(255,255,255,0.1); }
  .cl-sec.band .cl-stat:hover{ border-color:rgba(255,255,255,0.42); background:rgba(255,255,255,0.16); }
  .cl-sec.band .cl-stat b{ color:#fff; }
  .cl-sec.band .cl-stat s{ color:rgba(255,255,255,0.8); }
  .cl-sec.band .cl-stat-ic{ background:rgba(255,255,255,0.18); color:#fff; }
  /* trust split: intro left, guardrail cards right */
  .tr-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:stretch; text-align:left; margin-top:6px; }
  .tr-split .cl-sec-h{ font-size:clamp(27px,3vw,38px); line-height:1.1; }
  .tr-intro{ display:flex; flex-direction:column; }
  .tr-split .tr-intro .cl-eyebrow{ margin-bottom:14px; }
  .tr-split .cl-sec-sub{ margin:14px 0 0; max-width:42ch; }
  .tr-intro .tr-band{ margin:0; max-width:none; }
  .tr-intro .tr-band-spacer{ flex:1 1 0; min-height:28px; }
  .tr-split .tr-grid{ margin:0; max-width:none; }
  @media (max-width:860px){ .tr-split{ grid-template-columns:1fr; gap:30px; } .tr-intro .tr-band-spacer{ display:none; } .tr-intro .tr-band{ margin-top:24px; } }
  .cl-foot{ position:relative; z-index:1; text-align:center; padding:26px 40px 50px; font-size:12px; color:rgba(255,255,255,0.4); font-family:'JetBrains Mono',monospace; letter-spacing:0.1em; text-transform:uppercase; }
  #clPick, #clShift, #clChat, #clUse, #clHow, #clTrust, #clProof, #clVision, #clStart, #clTeam{ scroll-margin-top:1px; }   /* land the section under the floating sub-nav (the section's own top padding clears the pill) */
  @media (prefers-reduced-motion:reduce){ #clarityHero{ scroll-behavior:auto; } }
  /* back to top */
  .cl-totop{ position:fixed; bottom:26px; right:26px; z-index:60; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(145deg,#4F7CFF,#2A48DE); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 32px -8px rgba(42,72,222,0.85), 0 0 0 1px rgba(255,255,255,0.08) inset;
    opacity:0; transform:translateY(14px) scale(0.9); pointer-events:none; transition:opacity .3s ease, transform .3s ease, filter .2s; }
  .cl-totop.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .cl-totop:hover{ filter:brightness(1.08); transform:translateY(-2px) scale(1); }
  .cl-totop svg{ width:20px; height:20px; }
  @media (max-width:600px){ .cl-totop{ bottom:18px; right:18px; width:44px; height:44px; } }
  /* load-in reveal */
  .cl-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .cl-reveal.is-in{ opacity:1; transform:none; }
  .cl-hero2-vis.cl-reveal{ transition-delay:.12s; }
  @media (prefers-reduced-motion:reduce){ .cl-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }
  /* demo section: pre-hidden in CSS (before first paint, no flash), reveals as one unit on .is-in */
  #clPick > .cl-eyebrow, #clPick > .cl-sec-h2, #clPick .cl-stage{ opacity:0.22; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  #clPick.is-in > .cl-eyebrow{ opacity:1; transform:none; }
  #clPick.is-in > .cl-sec-h2{ opacity:1; transform:none; transition-delay:.1s; }
  #clPick.is-in .cl-stage{ opacity:1; transform:none; transition-delay:.2s; }
  @media (prefers-reduced-motion:reduce){ #clPick > .cl-eyebrow, #clPick > .cl-sec-h2, #clPick .cl-stage{ opacity:1 !important; transform:none !important; } }
  /* ===== mobile pass ===== */
  @media (max-width:640px){
    .cl-sec{ padding:94px 18px; }
    .cl-pick{ padding-top:92px; padding-bottom:36px; }
    .cl-top-inner{ padding:12px 18px; }
    .cl-hero2{ padding:16px 0 28px; min-height:0; }
    .cl-hero2 .cl-h{ font-size:clamp(31px,8.5vw,42px); }
    /* center the hero headline + copy on mobile */
    .cl-hero2-copy{ text-align:center; }
    .cl-hero2-copy .cl-h, .cl-hero2-copy .cl-lede{ text-align:center; }
    .cl-cta-row{ justify-content:center; }
    .cl-duo{ height:430px; }
    .cl-duo-back{ transform:translate(-66%,-46%) rotate(-8deg) scale(0.9); }
    .cl-duo-front{ transform:translate(-12%,-50%) rotate(3deg); }
    /* headlines: drop the highlighted clause to its own balanced line so no word strands (no orphans/widows) */
    .cl-sec-h .cl-hl, .ct-h .cl-hl{ display:block; text-wrap:balance; }
    .cl-sec-h br, .ct-h br{ display:none; }
    /* chatbot text-only phone: tighter corners + the long reply clips behind the fade instead of colliding with the input */
    .ct-textphone{ width:164px; height:340px; border-radius:27px; }
    .ct-tp-screen{ border-radius:22px; }
    .ct-tp-head{ font-size:12px; padding:24px 13px 11px; }
    .ct-phones{ gap:12px; }
    /* device mocks scale down as whole units (see fitMocks) — keep desktop layout, just neutralize the laptop base overhang so it doesn't bleed off-screen */
    .cd-stage{ min-height:0; margin-top:30px; }
    .cd-base{ width:100%; margin-left:0; }
    /* use-case phone pairs break out to full viewport width so both stay centered + visible past the card edge */
    .uc-row{ padding:20px; }
    .uc-pairwrap{ width:100vw; margin-left:calc(50% - 50vw); }
    .uc-stat-n{ font-size:30px; }
    .cd-disclaimer{ margin-top:24px; }
  }
  @media (max-width:480px){
    .cl-cta-row .cl-cta-btn, .cl-cta-ghost{ padding:13px 22px; font-size:14px; }
    .cl-form-row{ grid-template-columns:1fr; }
  }


/* ═══════════════════════════════════════════════════════════════════
   v3.0 layer for /concepts/cruise-genui/ (Sept 2026, second pass).
   Everything above is the carnival-23610d carve CSS, unchanged, so every
   app screen inside the devices stays exactly as designed (Dunja, 27 Sept
   2026). This block restyles only the page around them, in the hubs'
   grammar: flat navy and white grounds, left-aligned heads on a rule, mono
   eyebrows, display type at 400, the kit Button, square corners, colour
   as a hover reward. Nothing here targets a selector inside a device mock.
   The root keeps its Poppins because the mocks inherit it; page text gets
   Host Grotesk class by class.
   ═══════════════════════════════════════════════════════════════════ */
#clarityHero {
  --v3-navy: var(--color-navy, #020F30);
  --v3-blue: var(--color-blue-200, #2E56FF);
  --v3-blue-hover: var(--color-blue-80, #2A50EF);
  --v3-sky: var(--color-blue-100, #DEE7FF);
  --v3-n100: var(--color-neutral-100, #F6F7FC);
  --v3-n200: var(--color-neutral-200, #CBD0DB);
  --v3-n300: var(--color-neutral-300, #838998);
  --v3-n400: var(--color-neutral-400, #5C6271);
  --v3-sans: 'Host Grotesk', system-ui, sans-serif;
  --v3-mono: 'Roboto Mono', ui-monospace, monospace;
  --v3-rule-dark: rgba(255, 255, 255, 0.2);
  background: var(--v3-navy) !important;
}
#clarityHero .cl-spark { display: none !important; }

/* ── Grounds and gutters: the site Container (90rem, 24/40/64px) ───── */
#clarityHero .cl-wrap,
#clarityHero .cl-sec,
#clarityHero .cl-foot {
  max-width: 90rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 48rem) {
  #clarityHero .cl-wrap,
  #clarityHero .cl-sec,
  #clarityHero .cl-foot { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 96rem) {
  #clarityHero .cl-wrap,
  #clarityHero .cl-sec,
  #clarityHero .cl-foot { padding-left: 4rem; padding-right: 4rem; }
}
#clarityHero .cl-sec { text-align: left; padding-top: 6.5rem; padding-bottom: 6.5rem; }
#clarityHero .cl-sec.light { color: var(--v3-navy); }
#clarityHero .cl-sec.light::before { background: #ffffff !important; }
#clarityHero .cl-pick { padding-top: 6.5rem; padding-bottom: 5rem; }
@media (max-width: 47.99rem) {
  #clarityHero .cl-sec { padding-top: 5rem; padding-bottom: 5rem; }
  #clarityHero .cl-pick { padding-top: 5rem; }
}

/* ── Sub-nav: a flat white bar on the page gutters, under the site header ── */
#clarityHero .cl-top {
  max-width: none;
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--v3-n200);
}
#clarityHero .cl-top-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (min-width: 48rem) { #clarityHero .cl-top-inner { padding: 0.875rem 2.5rem; } }
@media (min-width: 96rem) { #clarityHero .cl-top-inner { padding: 0.875rem 4rem; } }
#clarityHero .cl-brand { display: inline-flex; align-items: center; gap: 0.875rem; }
#clarityHero .cl-brand-logo { height: 20px; width: auto; }
#clarityHero .cl-brand-logo path { fill: var(--v3-navy); }
#clarityHero .cl-brand-logo .gstar { fill: var(--v3-blue); }
#clarityHero .v3-brand-div { width: 1px; height: 1.25rem; background: var(--v3-n200); }
#clarityHero .v3-brand {
  font: 500 1.0625rem/1.5rem var(--v3-sans);
  letter-spacing: -0.01em;
  color: var(--v3-navy);
}
#clarityHero .cl-brand:hover { opacity: 1; }
#clarityHero .cl-brand:hover .v3-brand { color: var(--v3-blue); }
#clarityHero .cl-cobrand-div { background: var(--v3-n200) !important; }
#clarityHero .cl-concept-chip {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: 600 0.6875rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-n400);
}
#clarityHero .v3-brand { white-space: nowrap; }
@media (max-width: 47.99rem) {
  #clarityHero .cl-cobrand { display: none !important; }
  #clarityHero .cl-brand-logo { height: 18px; }
}
#clarityHero .cl-nav { gap: 1.75rem; }
#clarityHero .cl-nav a {
  font: 600 0.75rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-n400);
}
#clarityHero .cl-nav a:hover,
#clarityHero .cl-nav a.on { color: var(--v3-navy); }
#clarityHero .cl-nav-ind { height: 2px; border-radius: 0; background: var(--v3-blue) !important; bottom: -0.9375rem; }

/* ── Type: eyebrows, heads, subs ─────────────────────────────────────── */
#clarityHero .cl-eyebrow,
#clarityHero .ct-def-label,
#clarityHero .hw-method-tag,
#clarityHero .uc-tag {
  margin: 0 0 1rem;
  font: 600 0.8125rem/1.25 var(--v3-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--v3-sky);
}
#clarityHero .cl-sec.light .cl-eyebrow,
#clarityHero .ct-def-label,
#clarityHero .uc-tag { color: var(--v3-blue); }
#clarityHero .uc-tag-n { color: var(--v3-n400); }

#clarityHero .cl-h,
#clarityHero .cl-sec-h,
#clarityHero .cl-sec-h2,
#clarityHero .ct-h,
#clarityHero .cl-cmp-h {
  font-family: var(--v3-sans) !important;
  font-weight: 400 !important;
  text-align: left;
  text-wrap: balance;
}
#clarityHero .cl-sec-h,
#clarityHero .cl-sec-h2,
#clarityHero .ct-h {
  margin: 0;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.028em !important;
}
#clarityHero .cl-hl,
#clarityHero .cl-sec.light .cl-sec-h .cl-hl,
#clarityHero .ct-h .cl-hl,
#clarityHero .cl-cmp-h b { color: inherit !important; }
#clarityHero .cl-sec-sub,
#clarityHero .cl-concept-sub,
#clarityHero .ct-sub {
  margin: 0;
  max-width: 36rem;
  font: 400 1.25rem/1.75rem var(--v3-sans);
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
  text-wrap: pretty;
}
#clarityHero .cl-sec.light .cl-sec-sub,
#clarityHero .ct-sub { color: var(--v3-n400); }
#clarityHero .cl-sec-sub b { font-weight: 500; }

/* The hubs' section head: eyebrow and h2 left, the sub right, on a rule. */
#clarityHero .v3-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
  text-align: left;
}
@media (min-width: 62rem) {
  #clarityHero .v3-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
    align-items: end;
  }
}
#clarityHero .v3-head .cl-eyebrow { margin-bottom: 1rem; }

/* ── Buttons: the kit Button ─────────────────────────────────────────── */
#clarityHero .cl-cta-btn,
#clarityHero .cl-cta-ghost,
#clarityHero .cl-cmp-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 56px;
  padding: 0 1.75rem;
  border-radius: 4px !important;
  font: 700 1.125rem/1.5rem var(--v3-sans) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}
#clarityHero .cl-cta-btn,
#clarityHero .cl-cmp-next { background: var(--v3-blue) !important; color: #fff !important; border: 0 !important; }
#clarityHero .cl-cta-btn:hover,
#clarityHero .cl-cmp-next:hover { background: var(--v3-blue-hover) !important; }
#clarityHero .cl-cta-ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; text-decoration: none; }
#clarityHero .cl-cta-ghost:hover { background: var(--v3-blue) !important; border-color: var(--v3-blue) !important; }
#clarityHero .cl-cta-btn:focus-visible,
#clarityHero .cl-cta-ghost:focus-visible { outline: 2px solid var(--v3-sky); outline-offset: 2px; }

/* ── Hero: light, like every v3.0 hero ─────────────────────────────── */
#clarityHero .cl-hero2::before { background: #fff !important; }
#clarityHero .cl-hero2::after { background: var(--v3-n200) !important; }
#clarityHero .cl-hero2 { color: var(--v3-navy); }
#clarityHero .cl-hero2-copy { max-width: 36rem; }
#clarityHero .cl-hero2 .cl-eyebrow { color: var(--v3-blue); }
#clarityHero .cl-concept-tag {
  display: block;
  margin: -0.25rem 0 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: 600 0.75rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-n400);
}
#clarityHero .cl-h,
#clarityHero .cl-hero2 .cl-h {
  margin: 0 0 1.75rem;
  font-size: clamp(3rem, 5.6vw, 5.5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.032em !important;
  color: var(--v3-navy);
}
#clarityHero .cl-lede,
#clarityHero .cl-hero2 .cl-lede {
  max-width: 32rem;
  font: 400 1.25rem/1.75rem var(--v3-sans);
  color: var(--v3-n400);
}
#clarityHero .cl-lede b { display: block; margin-top: 1rem; font-weight: 400; color: var(--v3-navy); }
#clarityHero .cl-cta-row { gap: 0.75rem; margin-top: 2.5rem; }
#clarityHero .cl-hero2 .cl-cta-ghost { color: var(--v3-blue) !important; border-color: var(--v3-blue) !important; }
#clarityHero .cl-hero2 .cl-cta-ghost:hover { background: var(--v3-blue) !important; color: #fff !important; }
#clarityHero .cl-duo-lab {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font: 600 0.6875rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#clarityHero .cl-duo-lab-back { background: transparent; border: 1px solid var(--v3-n200); color: var(--v3-n400); }
#clarityHero .cl-duo-lab-front { background: var(--v3-blue); border: 0; box-shadow: none; color: #fff; }
#clarityHero .cl-cmp-exit { font: 600 0.8125rem/1rem var(--v3-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--v3-n400); }
#clarityHero .cl-cmp-exit:hover { color: var(--v3-navy); }
#clarityHero .cl-cmp-h { font-size: clamp(2rem, 3.4vw, 2.75rem) !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; color: var(--v3-navy); }
#clarityHero .cl-cmp-sub { font: 400 1.125rem/1.6 var(--v3-sans); color: var(--v3-n400); }
#clarityHero .cl-cmp-dots i { border-radius: 0; width: 8px; height: 8px; background-color: var(--v3-n200); }
#clarityHero .cl-cmp-dots i.on { background-color: var(--v3-blue); width: 24px; }

/* ── Chatbot vs GenUI ────────────────────────────────────────────────── */
#clarityHero .ct-h { margin-bottom: 1.25rem; }
#clarityHero .ct-copy { gap: 2.5rem; }
#clarityHero #clChat .ct-grid { padding-top: 0; }
#clarityHero .ct-def {
  margin-top: auto;
  max-width: 36rem;
  padding: 1.75rem 2rem;
  border: 0;
  border-radius: 0;
  background: var(--v3-n100);
}
#clarityHero .ct-def p { font: 400 1.0625rem/1.6 var(--v3-sans); color: var(--v3-navy); }
#clarityHero .ct-def p b { font-weight: 500; }
#clarityHero .ct-lab,
#clarityHero .uc-cap {
  font: 600 0.6875rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-n400);
}
#clarityHero .ct-lab.ai,
#clarityHero .uc-cap.g { color: var(--v3-blue); }

/* ── Pick a guest ────────────────────────────────────────────────────── */
#clarityHero .cl-label,
#clarityHero .cl-who-role {
  font: 600 0.75rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
#clarityHero .cl-glist { margin-top: 2.5rem; gap: 0.5rem; }
#clarityHero .cl-tile {
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 200ms linear;
}
#clarityHero .cl-tile-img { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
#clarityHero .cl-tile:hover { background: rgba(46, 86, 255, 0.5); }
#clarityHero .cl-tile.on { background: var(--v3-blue) !important; }
#clarityHero .cl-tile:focus-visible { outline: 2px solid var(--v3-sky); outline-offset: 2px; }
#clarityHero .cl-who-name { font: 400 1.75rem/1.1 var(--v3-sans); letter-spacing: -0.02em; }
#clarityHero .cl-who-role { color: var(--v3-sky); }
#clarityHero .cl-who-desc { font: 400 1.0625rem/1.55 var(--v3-sans); color: rgba(255, 255, 255, 0.72); }
#clarityHero .cl-divider { background: var(--v3-rule-dark); }
#clarityHero .cl-incard { border-top-color: var(--v3-rule-dark); }
#clarityHero .cl-incard:last-child { border-bottom-color: var(--v3-rule-dark); }
#clarityHero .cl-incard.lit { background: rgba(46, 86, 255, 0.16); }
#clarityHero .cl-inlabel i { border-radius: 0; box-shadow: none; width: 8px; height: 8px; }
#clarityHero .cl-indef { font: 400 0.9375rem/1.5 var(--v3-sans); color: rgba(255, 255, 255, 0.72); }
/* What it composes from: plain values in the page type, slashes between,
   no boxes. The script still wipes them in when their column lights. */
#clarityHero .cl-chips { gap: 0.25rem 0; }
#clarityHero .cl-chip {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font: 400 1.0625rem/1.5rem var(--v3-sans) !important;
  letter-spacing: -0.005em !important;
  color: rgba(255, 255, 255, 0.86) !important;
}
#clarityHero .cl-chip + .cl-chip::before {
  content: "/";
  margin: 0 0.625rem;
  color: rgba(255, 255, 255, 0.3);
}
#clarityHero .cl-incard { grid-template-columns: 11rem minmax(0, 1fr); padding: 1.125rem 0 1.125rem 1rem; transition: background-color 300ms linear, box-shadow 300ms linear; }
@media (max-width: 40rem) { #clarityHero .cl-incard { grid-template-columns: 1fr; } }
#clarityHero .cl-incard.lit { background: none; box-shadow: inset 2px 0 0 var(--cl-acc, var(--v3-blue)); }
#clarityHero .cl-incard.lit .cl-chip { color: #fff !important; }
#clarityHero .cl-inlabel { font: 600 0.75rem/1rem var(--v3-mono); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
#clarityHero .cl-incard.lit .cl-inlabel { color: #fff; }
#clarityHero .cl-badge {
  border-radius: 4px;
  background: var(--v3-blue);
  box-shadow: none;
  font: 600 0.75rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Multiplatform: the device and guest toggles ─────────────────────── */
#clarityHero .cd-devtoggle-wrap { justify-content: flex-start; margin: 0; }
#clarityHero .cd-devtoggle {
  padding: 4px;
  border: 1px solid var(--v3-n200);
  border-radius: 4px;
  background: #fff;
}
#clarityHero .cd-dev-thumb { top: 4px; bottom: 4px; border-radius: 2px; background: var(--v3-navy); }
#clarityHero .cd-devbtn {
  border-radius: 2px;
  font: 600 0.9375rem/1.25rem var(--v3-sans);
  color: var(--v3-n400);
}
#clarityHero .cd-devbtn { transition: background-color 160ms linear, color 160ms linear; }
#clarityHero .cd-devbtn:not(.on):hover { background: var(--v3-blue); color: #fff; }
#clarityHero .cd-devbtn.on,
#clarityHero .cd-devbtn.on:hover { color: #fff; }
/* Surface and guest: two segmented controls on one row, each with a mono
   label, the same box and the same navy "on" as the device toggle. */
#clarityHero .v3-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 2.5rem;
}
#clarityHero .v3-control { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; max-width: 100%; }
#clarityHero .v3-control__k {
  font: 600 0.6875rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v3-n400);
}
#clarityHero .cl-vs-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--v3-n200);
  border-radius: 4px;
  background: #fff;
}
#clarityHero .cl-sec.light .cl-vsg,
#clarityHero .cl-vsg {
  gap: 0.5rem;
  padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
  border: 0;
  border-radius: 2px;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 160ms linear, color 160ms linear;
}
#clarityHero .cl-sec.light .cl-vsg img,
#clarityHero .cl-vsg img {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  filter: grayscale(1);
}
#clarityHero .cl-vsg s { display: none !important; }
#clarityHero .cl-sec.light .cl-vsg b,
#clarityHero .cl-vsg b {
  font: 600 0.9375rem/1.25rem var(--v3-sans);
  color: var(--v3-n400);
  transition: color 160ms linear;
}
#clarityHero .cl-sec.light .cl-vsg:not(.on):hover { background: var(--v3-blue) !important; }
#clarityHero .cl-sec.light .cl-vsg:not(.on):hover b { color: #fff; }
#clarityHero .cl-sec.light .cl-vsg:hover img,
#clarityHero .cl-sec.light .cl-vsg.on img { filter: none; }
/* The script paints each guest's accent inline on the active chip; the page keeps navy. */
#clarityHero .cl-sec.light .cl-vsg.on { background: var(--v3-navy) !important; }
#clarityHero .cl-sec.light .cl-vsg.on b { color: #fff; }
#clarityHero .cl-vsg:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
#clarityHero .cd-disclaimer {
  max-width: 44rem;
  margin: 2rem auto 0;
  text-align: center;
  text-wrap: balance;
  font: 400 0.9375rem/1.5 var(--v3-sans);
  color: var(--v3-n400);
}
#clarityHero .cd-disclaimer em { color: var(--v3-navy); font-weight: 500; }

/* ── Use cases: one deck, as on the GenUI Kit page ───────────────────
   The three rows share one grid cell. The active card sits in front, the
   other two peek behind it as blank edges, and the tabs or arrows bring
   one forward. Every card keeps its real size in the cell, so fitMocks
   measures the phone pairs correctly on phones. */
#clarityHero .v3-deck {
  display: grid;
  gap: 0;
  margin-top: 0;
  padding-top: 1.75rem;
}
#clarityHero .v3-deck > .uc-row {
  grid-area: 1 / 1;
  --d: 2;
  border: 0;
  border-radius: 0;
  background: var(--v3-n100);
  padding: 2.5rem;
  transform: translateY(calc(var(--d) * -0.875rem)) scale(calc(1 - var(--d) * 0.025));
  transform-origin: 50% 0;
  z-index: calc(3 - var(--d));
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), background-color 300ms linear;
}
#clarityHero .v3-deck > .uc-row[data-depth="0"] { --d: 0; }
#clarityHero .v3-deck > .uc-row[data-depth="1"] { --d: 1; background: #ECEEF5; }
#clarityHero .v3-deck > .uc-row[data-depth="2"] { --d: 2; background: #E2E5EE; }
#clarityHero .v3-deck > .uc-row > * { transition: opacity 260ms linear; }
#clarityHero .v3-deck > .uc-row:not([data-depth="0"]) > * { opacity: 0; pointer-events: none; }
#clarityHero .v3-deck > .uc-row:not([data-depth="0"]) { pointer-events: none; }
/* Before the script runs, only the first card shows. */
#clarityHero .v3-deck:not(.is-live) > .uc-row:not(:first-child) { visibility: hidden; }
@media (max-width: 47.99rem) { #clarityHero .v3-deck > .uc-row { padding: 1.5rem; } }
#clarityHero .v3-deck .uc-row .uc-copy { order: 0; }
#clarityHero .uc-copy h3 {
  margin: 0 0 1rem;
  font: 400 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--v3-sans) !important;
  letter-spacing: -0.025em !important;
  color: var(--v3-navy);
}
#clarityHero .uc-copy p { font: 400 1.0625rem/1.55 var(--v3-sans); color: var(--v3-n400); max-width: 32rem; }

#clarityHero .v3-deck-ctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
}
#clarityHero .v3-deck-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--v3-n200);
  border-radius: 4px;
  background: #fff;
}
#clarityHero .v3-deck-tabs button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  font: 600 0.9375rem/1.25rem var(--v3-sans);
  color: var(--v3-n400);
  cursor: pointer;
  transition: background-color 160ms linear, color 160ms linear;
}
#clarityHero .v3-deck-tabs button span {
  font: 600 0.6875rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  color: var(--v3-n400);
}
#clarityHero .v3-deck-tabs button:not([aria-selected="true"]):hover { background: var(--v3-blue); color: #fff; }
#clarityHero .v3-deck-tabs button:hover span,
#clarityHero .v3-deck-tabs button[aria-selected="true"] span { color: inherit; }
#clarityHero .v3-deck-tabs button[aria-selected="true"] { background: var(--v3-navy); color: #fff; }
#clarityHero .v3-deck-arrows { display: flex; gap: 0.5rem; }
#clarityHero .v3-deck-arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--v3-navy);
  border-radius: 4px;
  background: #fff;
  color: var(--v3-navy);
  cursor: pointer;
  transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}
#clarityHero .v3-deck-arrow svg { width: 24px; height: 24px; }
#clarityHero .v3-deck-arrow:hover { background: var(--v3-blue); border-color: var(--v3-blue); color: #fff; }
#clarityHero .v3-deck-tabs button:focus-visible,
#clarityHero .v3-deck-arrow:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
#clarityHero .v3-deck-tabs em { font-style: normal; }
@media (max-width: 47.99rem) {
  #clarityHero .v3-deck-ctrl { display: block; }
  #clarityHero .v3-deck-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #clarityHero .v3-deck-tabs button { justify-content: center; padding: 0.625rem 0; }
  #clarityHero .v3-deck-tabs button span { font-size: 0.8125rem; }
  #clarityHero .v3-deck-tabs em { display: none; }
  #clarityHero .v3-deck-arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #clarityHero .v3-deck > .uc-row,
  #clarityHero .v3-deck > .uc-row > * { transition: none; }
}

/* ── How it works ────────────────────────────────────────────────────── */
#clarityHero .hw-grid { gap: 1rem; margin-top: 0; }
#clarityHero .hw-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  border: 0;
  border-radius: 0;
  background: var(--v3-n100);
  text-align: left;
  transition: background-color 200ms linear, color 200ms linear;
}
#clarityHero .hw-ic,
#clarityHero .tr-ic {
  width: 4.5rem;
  height: auto;
  margin: 0 0 1.5rem;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  color: var(--v3-blue);
  transition: color 200ms linear;
}
#clarityHero .v3-spot { display: block; width: 100%; height: auto; }
#clarityHero .hw-num { margin-bottom: 0.5rem; font: 600 0.75rem/1rem var(--v3-mono); letter-spacing: 0.04em; color: var(--v3-n400); }
#clarityHero .hw-card b {
  margin-bottom: 0.75rem;
  font: 400 clamp(1.625rem, 2.2vw, 2rem)/1.1 var(--v3-sans);
  letter-spacing: -0.025em;
  color: var(--v3-navy);
}
#clarityHero .hw-card p { font: 400 1.0625rem/1.55 var(--v3-sans); color: var(--v3-n400); }
#clarityHero .hw-card:hover { background: var(--v3-blue); }
#clarityHero .hw-card:hover :is(.hw-ic, .hw-num, b, p) { color: #fff; }
#clarityHero .hw-method {
  margin-top: 1rem;
  padding: 2.5rem;
  border: 0;
  border-radius: 0;
  background: var(--v3-navy);
  text-align: left;
}
@media (min-width: 62rem) {
  #clarityHero .hw-method {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0 4rem;
    align-items: end;
    padding: 3.5rem;
  }
  #clarityHero .hw-method-tag { grid-column: 1; }
  #clarityHero .hw-method h3 { grid-column: 1; }
  #clarityHero .hw-method p { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  #clarityHero .hw-chips { grid-column: 1 / -1; }
}
#clarityHero .hw-method-tag { color: var(--v3-sky); }
#clarityHero .hw-method h3 {
  margin: 0;
  font: 400 clamp(2rem, 3.6vw, 2.75rem)/1.1 var(--v3-sans) !important;
  letter-spacing: -0.02em !important;
  color: #fff;
}
#clarityHero .hw-method p { margin: 1.25rem 0 0; max-width: 32rem; font: 400 1.125rem/1.6 var(--v3-sans); color: rgba(255, 255, 255, 0.72); }
#clarityHero .hw-chips { justify-content: flex-start; margin-top: 2rem; gap: 0.5rem; }
#clarityHero .hw-chip,
#clarityHero .tr-pill {
  padding: 0.375rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: transparent;
  font: 600 0.6875rem/1rem var(--v3-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
#clarityHero .hw-chip:first-child { background: var(--v3-blue); border-color: var(--v3-blue); color: #fff; }

/* ── Trust ───────────────────────────────────────────────────────────── */
#clarityHero .tr-split { gap: 4rem; margin-top: 0; }
@media (max-width: 61.99rem) { #clarityHero .tr-split { gap: 2.5rem; } }
#clarityHero .tr-split .cl-sec-h { font-size: clamp(2.25rem, 4.4vw, 3.75rem) !important; }
#clarityHero .tr-split .cl-sec-sub { margin-top: 1.5rem; }
#clarityHero .tr-grid { gap: 1rem; }
#clarityHero .tr-card {
  padding: 2rem;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  transform: none !important;
  transition: background-color 200ms linear;
}
#clarityHero .tr-ic { width: 3.5rem; color: var(--v3-sky); margin-bottom: 1.25rem; }
#clarityHero .tr-card b { margin-bottom: 0.625rem; font: 400 1.5rem/1.15 var(--v3-sans); letter-spacing: -0.02em; }
#clarityHero .tr-card p { font: 400 1rem/1.55 var(--v3-sans); color: rgba(255, 255, 255, 0.72); }
#clarityHero .tr-card:hover { background: var(--v3-blue); }
#clarityHero .tr-card:hover :is(.tr-ic, p) { color: #fff; }
#clarityHero .tr-band {
  padding: 2rem;
  border: 0;
  border-radius: 0;
  background: var(--v3-blue);
}
#clarityHero .tr-band p { font: 400 1.125rem/1.5 var(--v3-sans); color: #fff; }
#clarityHero .tr-pill { border-color: rgba(255, 255, 255, 0.55); color: #fff; }

/* ── Start: the hubs' way-in panel. Blue offer left, Laura and Greg right ── */
#clarityHero #clStart { max-width: 90rem; padding-top: 5rem; }
#clarityHero .v3-way { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { #clarityHero .v3-way { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
#clarityHero .v3-way__offer {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.5rem;
  background: var(--v3-blue);
  color: #fff;
}
@media (min-width: 48rem) { #clarityHero .v3-way__offer { padding: 3.5rem; } }
@media (min-width: 62rem) { #clarityHero .v3-way__offer { padding: 4rem; } }
#clarityHero #clStart .v3-way__offer .cl-eyebrow { color: #fff; }
#clarityHero #clStart .cl-sec-h {
  max-width: 40rem;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.027em !important;
  color: #fff;
}
#clarityHero .v3-rungs { margin: 2.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.35); }
#clarityHero .v3-rungs li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
#clarityHero .v3-rungs__n { grid-row: 1 / span 2; font: 600 0.75rem/1.5rem var(--v3-mono); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); }
#clarityHero .v3-rungs__t { font: 500 1.25rem/1.5rem var(--v3-sans); letter-spacing: -0.01em; }
#clarityHero .v3-rungs__b { font: 400 1rem/1.5 var(--v3-sans); color: rgba(255, 255, 255, 0.86); }
#clarityHero .v3-way__actions { margin-top: 2.5rem; }
#clarityHero .cl-concept-also {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
}
#clarityHero .cl-concept-also span { font: 600 0.75rem/1.5rem var(--v3-mono); letter-spacing: 0.04em; text-transform: uppercase; }
#clarityHero .cl-concept-also a { font: 600 1.0625rem/1.5rem var(--v3-sans); color: #fff; text-decoration: none; }
#clarityHero .v3-way__offer .cl-concept-also { margin-top: auto; padding-top: 1.5rem; border-top: 0; }
@media (min-width: 62rem) { #clarityHero .v3-way__offer .cl-concept-also { padding-top: 3rem; } }
#clarityHero .v3-way__offer .cl-concept-also span { color: rgba(255, 255, 255, 0.72); }
#clarityHero .v3-way__offer .cl-concept-also a:hover { color: var(--v3-navy); }

#clarityHero .v3-way__call {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.5rem;
  background: var(--v3-n100);
  color: var(--v3-navy);
}
@media (min-width: 48rem) { #clarityHero .v3-way__call { padding: 3.5rem; } }
@media (min-width: 62rem) { #clarityHero .v3-way__call { padding: 4rem 3.5rem; } }
#clarityHero .v3-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#clarityHero .v3-face { margin: 0; }
#clarityHero .v3-face img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--v3-sky);
}
#clarityHero .v3-face figcaption { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.75rem; }
#clarityHero .v3-face__name { font: 500 1.0625rem/1.35 var(--v3-sans); }
#clarityHero .v3-face__role { font: 600 0.625rem/0.875rem var(--v3-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--v3-n400); }
#clarityHero .v3-way__who { margin: 2rem 0 0; font: 400 1.5rem/1.25 var(--v3-sans); letter-spacing: -0.015em; }
#clarityHero .v3-way__btn { width: 100%; margin-top: 1.25rem; }
#clarityHero .v3-way__note { margin: 0.75rem 0 0; font: 400 0.9375rem/1.25rem var(--v3-sans); color: var(--v3-n400); }
#clarityHero .v3-way__guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--v3-n200);
  color: var(--v3-navy);
  text-decoration: none;
  transition: color 160ms linear;
}
@media (min-width: 62rem) { #clarityHero .v3-way__guide { margin-top: auto; } #clarityHero .v3-way__note { margin-bottom: 2.5rem; } }
#clarityHero .v3-way__meta { font: 600 0.75rem/1rem var(--v3-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--v3-blue); }
#clarityHero .v3-way__guide-t { font: 600 1.0625rem/1.5rem var(--v3-sans); }
#clarityHero .v3-way__guide svg { grid-row: 1 / span 2; grid-column: 2; width: 20px; height: 20px; color: var(--v3-blue); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
#clarityHero .v3-way__guide:hover { color: var(--v3-blue); }
#clarityHero .v3-way__guide:hover svg { transform: translateX(0.375rem); }

/* Kit Button, for the markup this layer adds. */
#clarityHero .v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 56px;
  padding: 0 1.5rem 0 2rem;
  border: 0;
  border-radius: 4px;
  font: 700 1.125rem/1.5rem var(--v3-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms linear, color 160ms linear;
}
#clarityHero .v3-btn svg { width: 24px; height: 24px; }
#clarityHero .v3-btn--primary { background: var(--v3-blue); color: #fff; }
#clarityHero .v3-btn--primary:hover { background: var(--v3-blue-hover); color: #fff; }
#clarityHero .v3-btn--inverse { padding: 0 2rem; background: var(--v3-navy); color: #fff; }
#clarityHero .v3-btn--inverse:hover { background: #fff; color: var(--v3-navy); }
#clarityHero .v3-btn:focus-visible { outline: 2px solid var(--v3-sky); outline-offset: 2px; }

/* ── Phones: everything left-aligned, toggles fit the gutter ───────── */
@media (max-width: 47.99rem) {
  #clarityHero .cl-hero2-copy,
  #clarityHero .cl-hero2-copy .cl-h,
  #clarityHero .cl-hero2-copy .cl-lede,
  #clarityHero .ct-copy,
  #clarityHero .ct-def { text-align: left !important; align-items: flex-start !important; }
  #clarityHero .cl-cta-row { justify-content: flex-start; }
  #clarityHero .cd-devtoggle { max-width: 100%; }
  #clarityHero .cd-devbtn { padding: 0.5rem 0.625rem; font-size: 0.8125rem; gap: 0.375rem; }
  #clarityHero .cl-top-inner { justify-content: flex-start; }
}

/* ── Foot and back to top ────────────────────────────────────────────── */
/* The foot sits on the light close, full bleed. */
#clarityHero .cl-foot {
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 4rem;
  text-align: left;
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
#clarityHero .cl-foot-prep {
  max-width: 44rem;
  font: 400 0.9375rem/1.5 var(--v3-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--v3-n400);
}
#clarityHero .cl-totop {
  border-radius: 4px;
  background: var(--v3-blue);
  box-shadow: none;
  filter: none !important;
}
#clarityHero .cl-totop:hover { background: var(--v3-blue-hover); }