.cx-root img{ max-width:100%; }
.cl-cobrand{ display:inline-flex; align-items:center; gap:15px; margin-right:15px; order:-1; }
.cl-cobrand-div{ width:1px; height:24px; background:rgba(255,255,255,0.2); }
.cl-cobrand-logo{ height:25px; width:auto; display:block; }
@media (max-width:1140px) and (min-width:901px){ .cl-cobrand{ display:none; } }
@media (max-width:560px){ .cl-cobrand{ gap:11px; margin-right:11px; } .cl-cobrand-logo{ height:22px; } .cl-cobrand-div{ height:20px; } }
.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-cobrand-logo, .cl-foot-client{ filter: brightness(0) invert(1); }

/* ============================================================================
   GenUI mock kit — DESIGN TOKENS
   Sigma styling, ported. VGV Blue accent. Device- and vertical-agnostic.
   Everything scalable hangs off one knob: --kit-scale.
     phone = 1 (default) · tablet ~1.15 · kiosk ~1.3 · TV ~1.6
   Set it on the device shell; every component resizes with no redraw.
   ========================================================================== */
.kit{
  --kit-scale: 1;

  /* ---- color: VGV Blue accent + Sigma warm neutrals ---- */
  --kit-accent:        #2A48DE;                    /* VGV Blue (canonical) */
  --kit-accent-ink:    #1b2f9e;                    /* darker, for rings/contrast */
  --kit-accent-soft:   rgba(42,72,222,0.12);       /* tinted fill */
  --kit-on-accent:     #ffffff;
  --kit-pos:           #1FA567;                     /* positive / up — DATA-VIZ ONLY (Sigma green family), never UI chrome */
  --kit-neg:           #E0353B;                     /* negative / down */
  --kit-bg:            #ffffff;
  --kit-bg-2:          #f5f4f2;                     /* warm page */
  --kit-fill:          rgba(128,126,125,0.12);      /* borderless surface fill */
  --kit-fill-strong:   rgba(128,126,125,0.20);
  --kit-ink:           #191817;                     /* text primary (warm near-black) */
  --kit-ink-2:         rgba(67,66,66,0.78);         /* secondary — raised from .62 so labels pass AA on grey fills (Contrast card) */
  --kit-ink-3:         rgba(67,66,66,0.56);         /* tertiary — raised from .34 */
  --kit-line:          rgba(67,66,66,0.10);         /* hairline separators */
  --kit-glass:         rgba(255,255,255,0.60);      /* glass chrome */
  --kit-scrim:         linear-gradient(to top,rgba(6,12,26,.95) 2%,rgba(6,12,26,.82) 32%,rgba(6,12,26,.55) 56%,rgba(6,12,26,.28) 80%,rgba(6,12,26,.06) 100%);

  /* ---- type: Poppins UI · JetBrains Mono for data ---- */
  --kit-font:  'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --kit-mono:  'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --kit-fs-display: calc(32px * var(--kit-scale));  /* greeting / billboard */
  --kit-fs-title:   calc(20px * var(--kit-scale));  /* section headers */
  --kit-fs-feature: calc(22px * var(--kit-scale));  /* feature headline */
  --kit-fs-body:    calc(16px * var(--kit-scale));  /* item titles / body */
  --kit-fs-label:   calc(14px * var(--kit-scale));  /* labels / subtitles */
  --kit-fs-micro:   calc(12px * var(--kit-scale));  /* captions / tab labels */
  --kit-track:      -0.02em;                        /* tight Sigma tracking */
  --kit-w-light:    300;
  --kit-w-regular:  400;
  --kit-w-medium:   500;
  --kit-w-semibold: 600;

  /* ---- spacing: 4-grid ---- */
  --kit-s1: calc(4px  * var(--kit-scale));
  --kit-s2: calc(8px  * var(--kit-scale));
  --kit-s3: calc(12px * var(--kit-scale));
  --kit-s4: calc(16px * var(--kit-scale));
  --kit-s5: calc(20px * var(--kit-scale));
  --kit-s6: calc(24px * var(--kit-scale));
  --kit-s8: calc(32px * var(--kit-scale));

  /* ---- radii: very round, Sigma signature ---- */
  --kit-r-card:  calc(28px * var(--kit-scale));
  --kit-r-chip:  calc(14px * var(--kit-scale));
  --kit-r-pill:  999px;

  /* ---- elevation: matches Sigma's model (Foundation · Elevation). "Subtle and
     natural, never distracting" — don't stack strong shadows; pair with fill + spacing. */
  --kit-shadow-sm:      0 1px 4px rgba(16,24,40,.10);                                          /* secondary — small controls (toggle/slider knobs) */
  --kit-shadow-card:    0 1px 3px rgba(16,24,40,.05), 0 10px 26px -10px rgba(20,30,60,.16);    /* primary — cards/surfaces (the depth pass, default) */
  --kit-shadow-feature: 0 20px 44px -18px rgba(16,24,40,.34);                                  /* high — hero/feature media */
  --kit-shadow-glass:   0 6px 40px rgba(0,0,0,0.14);                                           /* overlay — glass chrome / sheets */
  --kit-shadow:         0 4px 48px rgba(0,0,0,0.08);                                           /* Sigma's own primaryElevation (kept for reference) */

  font-family: var(--kit-font);
  color: var(--kit-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   GenUI mock kit — PRIMITIVES
   Built only from tokens (tokens.css). Fluid: no width/device assumptions —
   the device shell constrains width and sets --kit-scale. Reused across
   phone / tablet / TV / dashboard / kiosk and every vertical.
   ========================================================================== */
.kit *{box-sizing:border-box}

/* ---- section header: title (+ optional sub) + trailing chevron ---------- */
.kit-section{display:flex;align-items:center;justify-content:space-between;gap:var(--kit-s3);min-height:calc(38px * var(--kit-scale));margin-bottom:var(--kit-s2)}
.kit-section-t h3{margin:0;font-size:var(--kit-fs-title);line-height:1.2;letter-spacing:var(--kit-track);font-weight:var(--kit-w-medium)}
.kit-section-t s{display:block;text-decoration:none;margin-top:calc(2px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);font-weight:var(--kit-w-regular)}
.kit-chevron{flex:none;width:calc(44px * var(--kit-scale));height:calc(44px * var(--kit-scale));border:0;cursor:pointer;border-radius:var(--kit-r-pill);background:var(--kit-fill);color:var(--kit-ink);display:flex;align-items:center;justify-content:center}   /* 44px min tap target — Fitts's Law */
.kit-chevron svg{width:calc(18px * var(--kit-scale));height:calc(18px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2.2}

/* ---- display heading (greeting / billboard) — Poppins Light ------------- */
.kit-h1{margin:0;font-size:var(--kit-fs-display);line-height:1.12;letter-spacing:var(--kit-track);font-weight:var(--kit-w-light)}
.kit-h1 s{display:block;text-decoration:none;margin-top:calc(7px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);font-weight:var(--kit-w-regular)}
.kit-avatar{flex:none;width:calc(46px * var(--kit-scale));height:calc(46px * var(--kit-scale));border-radius:var(--kit-r-pill);object-fit:cover;box-shadow:0 0 0 2.5px var(--kit-bg),0 0 0 4.5px var(--kit-accent),0 4px 14px -5px rgba(16,24,40,.3)}   /* persona ring (--kit-accent is overridden per persona) */

/* ---- card: borderless fill surface, big radius -------------------------- */
.kit-card{background:var(--kit-fill);border-radius:var(--kit-r-card);padding:var(--kit-s5);overflow:hidden;box-shadow:var(--kit-shadow-card)}
.kit-card.is-elevated{background:var(--kit-bg);box-shadow:var(--kit-shadow)}
.kit-card.is-pad-0{padding:0}

/* ---- list-row: [leading] title/sub [trailing meta] ---------------------- */
.kit-row{display:flex;align-items:center;gap:var(--kit-s4);min-height:calc(56px * var(--kit-scale));padding:calc(6px * var(--kit-scale)) 0}
.kit-row + .kit-row{border-top:1px solid var(--kit-line)}
.kit-row-lead{flex:none;width:calc(46px * var(--kit-scale));height:calc(46px * var(--kit-scale));border-radius:var(--kit-r-chip);object-fit:cover;background:var(--kit-fill) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--kit-ink-2);box-shadow:0 2px 8px -3px rgba(16,24,40,.22)}
.kit-row-lead svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2}
.kit-row-body{flex:1;min-width:0}
.kit-row-body b{display:block;font-size:var(--kit-fs-body);line-height:1.25;letter-spacing:var(--kit-track);font-weight:var(--kit-w-medium);color:var(--kit-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-row-body s{display:block;text-decoration:none;margin-top:1px;font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-row-meta{flex:none;font-family:var(--kit-mono);font-size:calc(13px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-ink-2)}

/* ---- chip: pill tag (label, optional dot/accent) ------------------------ */
.kit-chip{display:inline-flex;align-items:center;gap:var(--kit-s2);background:var(--kit-fill);color:var(--kit-ink);border-radius:var(--kit-r-pill);padding:calc(7px * var(--kit-scale)) calc(14px * var(--kit-scale));font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);white-space:nowrap}
.kit-chip.is-accent{background:var(--kit-accent);color:var(--kit-on-accent)}
.kit-chip-dot{width:calc(7px * var(--kit-scale));height:calc(7px * var(--kit-scale));border-radius:50%;background:var(--kit-accent)}
.kit-chip.is-accent .kit-chip-dot{background:var(--kit-on-accent)}

/* ---- metric chip: stacked value/label (weather-strip, KPI tile) --------- */
.kit-metric{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:calc(3px * var(--kit-scale));background:var(--kit-fill);background:color-mix(in srgb, var(--kit-accent) 10%, var(--kit-bg));border-radius:var(--kit-r-chip);padding:var(--kit-s3) var(--kit-s4);min-width:0}   /* accent wash + accent value: the tiles read as live data composed for THIS guest (grey fill is the pre-color-mix fallback) */
.kit-metric b{font-family:var(--kit-mono);font-size:var(--kit-fs-body);font-weight:var(--kit-w-medium);color:var(--kit-accent-ink)}
.kit-metric s{text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-micro);color:var(--kit-ink-2)}

/* ---- stat: big number + label (stat band) ------------------------------- */
.kit-stat{flex:1;text-align:center}
.kit-stat b{display:block;font-family:var(--kit-mono);font-size:calc(26px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-accent)}
.kit-stat s{text-decoration:none;font-size:var(--kit-fs-micro);letter-spacing:var(--kit-track);color:var(--kit-ink-2)}

/* ---- feature: full-bleed media card, scrim + overlay -------------------- */
.kit-feature{position:relative;overflow:hidden;border-radius:var(--kit-r-card);background:var(--kit-fill) center/cover no-repeat}
.kit-feature::after{content:"";position:absolute;inset:0;background:var(--kit-scrim)}
.kit-feature-ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--kit-s4) var(--kit-s5) var(--kit-s5);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.kit-feature-eyebrow{font-family:var(--kit-mono);font-size:var(--kit-fs-micro);font-weight:var(--kit-w-medium);letter-spacing:.01em;color:rgba(255,255,255,.92);margin-bottom:calc(7px * var(--kit-scale))}
.kit-feature-ov h3{margin:0;font-size:var(--kit-fs-feature);line-height:1.15;letter-spacing:var(--kit-track);font-weight:var(--kit-w-semibold)}
.kit-feature-sub{margin-top:calc(4px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:rgba(255,255,255,.82)}

/* ---- timeline: progress line + stops (lives in feature or standalone) --- */
.kit-timeline{position:relative;height:calc(30px * var(--kit-scale));margin-bottom:var(--kit-s2)}
.kit-timeline-line{position:absolute;top:calc(5px * var(--kit-scale));left:3px;right:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.kit-timeline-line i{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--kit-accent)}
.kit-timeline-dot{position:absolute;top:0;width:calc(12px * var(--kit-scale));height:calc(12px * var(--kit-scale));border-radius:50%;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 3px rgba(6,12,26,.35)}
.kit-timeline-dot.is-on{width:calc(16px * var(--kit-scale));height:calc(16px * var(--kit-scale));top:calc(-2px * var(--kit-scale));background:var(--kit-accent);box-shadow:0 0 0 4px rgba(42,72,222,.32)}
.kit-timeline-lab{position:absolute;top:calc(16px * var(--kit-scale));transform:translateX(-50%);font-family:var(--kit-mono);font-size:calc(10.5px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:.02em;color:rgba(255,255,255,.92)}

/* ---- avatar-stack: rotated thumbnail cluster (resume/collection) -------- */
.kit-stack{position:relative;flex:none;display:flex;align-items:center;height:calc(58px * var(--kit-scale))}
.kit-stack img{position:absolute;width:calc(48px * var(--kit-scale));height:calc(48px * var(--kit-scale));border-radius:var(--kit-r-chip);border:2px solid var(--kit-bg);box-shadow:var(--kit-shadow);object-fit:cover}

/* ---- nav: glass tab bar ------------------------------------------------- */
.kit-nav{display:flex;gap:var(--kit-s2)}
.kit-nav-wrap{flex:1;display:flex;align-items:center;padding:4px;background:var(--kit-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:var(--kit-shadow-glass)}
.kit-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(3px * var(--kit-scale));padding:calc(7px * var(--kit-scale)) 0;border-radius:var(--kit-r-pill);text-decoration:none;color:var(--kit-ink-2)}
.kit-nav-item.is-on{background:var(--kit-fill);color:var(--kit-accent)}
.kit-nav-item svg{width:calc(23px * var(--kit-scale));height:calc(23px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2}
.kit-nav-item span{font-size:var(--kit-fs-micro);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track)}
.kit-nav-solo{flex:none;width:calc(56px * var(--kit-scale));display:flex;align-items:center;justify-content:center;background:var(--kit-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:var(--kit-shadow-glass);color:var(--kit-ink)}
.kit-nav-solo svg{width:calc(23px * var(--kit-scale));height:calc(23px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2}

/* ============================================================================
   DEVICE SHELLS — chrome that wraps the components. One per form factor.
   ========================================================================== */

/* phone shell: bezel + iOS-style status bar (real glyphs). Island + status
   chrome all ride --kit-scale so downscaled phones keep true iOS proportions. */
.kit-phone{width:min(402px,94vw);background:var(--kit-bg);border-radius:calc(51px * var(--kit-scale, 1));box-shadow:0 30px 80px -24px rgba(20,30,60,.4),0 0 0 10px #0c0e12,0 0 0 11px #2a2d34;overflow:hidden;position:relative;text-align:left}
.kit-phone-island{position:absolute;top:calc(13px * var(--kit-scale, 1));left:50%;transform:translateX(-50%);width:calc(96px * var(--kit-scale, 1));height:calc(30px * var(--kit-scale, 1));background:#0c0e12;border-radius:calc(20px * var(--kit-scale, 1));z-index:5}
.kit-statusbar{display:flex;align-items:center;justify-content:space-between;padding:calc(16px * var(--kit-scale, 1)) calc(28px * var(--kit-scale, 1)) 0;color:var(--kit-ink)}
.kit-statusbar .time{font-size:calc(16px * var(--kit-scale, 1));font-weight:var(--kit-w-semibold);letter-spacing:-.01em}
.kit-statusbar .sysicons{display:flex;align-items:center;gap:calc(6px * var(--kit-scale, 1))}
.kit-statusbar .sysicons svg{display:block;fill:currentColor}
.kit-statusbar .sig{width:calc(18px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1))}
.kit-statusbar .wifi{width:calc(16px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1))}
.kit-statusbar .batt{width:calc(25px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1))}
.kit-screen{padding:24px 16px 0}              /* content gutter (Sigma 24 → 16, wider) */
/* generic screen content area shared by the tablet / laptop / tv shells */
.kit-screen-in{background:var(--kit-bg);overflow:hidden}
/* tablet — uniform-bezel slate */
.kit-tablet{position:relative;background:#0c0e12;border-radius:32px;padding:14px;box-shadow:0 30px 70px -30px rgba(20,30,60,.5),0 0 0 2px #2a2d34}
.kit-tablet::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#2a2d34;z-index:2}
.kit-tablet .kit-screen-in{border-radius:19px}
/* laptop — clamshell (lid + base) */
.kit-laptop-lid{background:#0c0e12;border-radius:14px 14px 3px 3px;padding:11px 11px 0;box-shadow:0 26px 60px -32px rgba(20,30,60,.55)}
.kit-laptop-lid .kit-screen-in{border-radius:8px 8px 0 0}
.kit-laptop-base{position:relative;height:14px;width:116%;margin-left:-8%;background:linear-gradient(180deg,#dfe3eb,#b3b9c7);border-radius:0 0 14px 14px;box-shadow:inset 0 2px 2px rgba(255,255,255,.55)}
.kit-laptop-base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:6px;background:#9aa0b0;border-radius:0 0 8px 8px}
/* tv — wide set on a stand */
.kit-tv-set{background:#0c0e12;border-radius:12px;padding:9px;box-shadow:0 30px 70px -30px rgba(20,30,60,.55),0 0 0 2px #2a2d34}
.kit-tv-set .kit-screen-in{border-radius:5px}
.kit-tv-stand{width:14%;height:15px;margin:0 auto;background:linear-gradient(180deg,#2a2d34,#16181d);border-radius:0 0 3px 3px}
.kit-tv-foot{width:40%;height:6px;margin:2px auto 0;background:#16181d;border-radius:5px}
/* car — landscape center-stack HMI: a map canvas + a navigation rail. Hosts the
   same kit components (card / map / progress / stat / chip), themed dark-glass for
   the night-driving context. Map image is supplied per-instance on .kit-car-map. */
.kit-car{position:relative;background:#0a0c10;border-radius:calc(30px * var(--kit-scale,1));padding:calc(11px * var(--kit-scale,1));box-shadow:0 36px 90px -34px rgba(8,14,32,.62),0 0 0 2px #23262d}
.kit-car-screen{position:relative;display:flex;overflow:hidden;border-radius:calc(20px * var(--kit-scale,1));background:#0b0d12;aspect-ratio:16/9}
.kit-car-main{position:relative;flex:1;min-width:0;overflow:hidden}
.kit-car-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kit-car-main::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,24,.28) 0%,transparent 24% 50%,rgba(8,12,24,.68) 100%)}  /* top + bottom legibility scrim */
/* AI assistant pill — top-left */
.kit-car-ai{position:absolute;top:calc(15px * var(--kit-scale,1));left:calc(15px * var(--kit-scale,1));z-index:2;display:inline-flex;align-items:center;gap:calc(10px * var(--kit-scale,1));padding:calc(7px * var(--kit-scale,1)) calc(15px * var(--kit-scale,1)) calc(7px * var(--kit-scale,1)) calc(7px * var(--kit-scale,1));background:rgba(11,15,25,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:0 8px 24px -10px rgba(0,0,0,.55)}
.kit-car-orb{width:calc(30px * var(--kit-scale,1));height:calc(30px * var(--kit-scale,1));border-radius:50%;flex:none;background:radial-gradient(circle at 32% 28%,#9fbcff,#2A48DE 62%,#16236F);box-shadow:0 0 14px rgba(94,134,255,.6)}
.kit-car-ai b{display:block;font-size:calc(13px * var(--kit-scale,1));font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);color:#fff;line-height:1.1}
.kit-car-ai s{display:block;text-decoration:none;font-family:var(--kit-mono);font-size:calc(9px * var(--kit-scale,1));letter-spacing:.07em;color:rgba(255,255,255,.6);margin-top:1px}
/* widget tray — bottom row of mini modules built from kit components */
.kit-car-widgets{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:calc(10px * var(--kit-scale,1));padding:calc(13px * var(--kit-scale,1));align-items:stretch}
.kit-car-widgets > *{flex:1;min-width:0}
/* dark-glass theming for kit components on the map canvas (the only context-override; structure stays kit) */
.kit-car-widgets .kit-card{background:rgba(16,20,30,.74);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 12px 30px -16px rgba(0,0,0,.6);color:#fff;padding:calc(13px * var(--kit-scale,1));display:flex;flex-direction:column;gap:calc(9px * var(--kit-scale,1))}
.kit-car-widgets .kit-card .k{font-family:var(--kit-mono);font-size:calc(9px * var(--kit-scale,1));letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.kit-car-widgets .kit-card b{font-size:calc(14px * var(--kit-scale,1));font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);color:#fff}
.kit-car-widgets .kit-card s{text-decoration:none;font-size:calc(11px * var(--kit-scale,1));color:rgba(255,255,255,.62)}
.kit-car-widgets .kit-progress{background:rgba(255,255,255,.16)}
.kit-car-widgets .kit-map{box-shadow:none;border-radius:calc(10px * var(--kit-scale,1))}
/* navigation rail — right edge */
.kit-car-rail{flex:none;width:calc(94px * var(--kit-scale,1));background:#070809;display:flex;flex-direction:column;justify-content:center;gap:calc(2px * var(--kit-scale,1));padding:calc(10px * var(--kit-scale,1)) 0}
.kit-car-nav-item{display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--kit-scale,1));padding:calc(13px * var(--kit-scale,1)) 0;color:rgba(255,255,255,.5);cursor:pointer;position:relative}
.kit-car-nav-item .kit-ic{font-size:calc(24px * var(--kit-scale,1))}
.kit-car-nav-item span{font-size:calc(10px * var(--kit-scale,1));font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track)}
.kit-car-nav-item.is-on{color:#fff}
.kit-car-nav-item.is-on::before{content:"";position:absolute;left:0;top:calc(9px * var(--kit-scale,1));bottom:calc(9px * var(--kit-scale,1));width:calc(3px * var(--kit-scale,1));border-radius:0 3px 3px 0;background:var(--kit-accent)}
/* depth is baked into the base rules above (Josh chose it 2026-06-25): soft
   layered navy-tinted shadows on cards/feature/thumbs. No gloss, no inset highlights. */

/* ============================================================================
   PRIMITIVES II — rounds out the catalog (audit upgrades + adds).
   All token-built, fluid, device-agnostic.
   ========================================================================== */

/* button */
.kit-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--kit-s2);border:0;cursor:pointer;font-family:var(--kit-font);font-size:var(--kit-fs-body);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);padding:calc(11px * var(--kit-scale)) var(--kit-s6);min-height:calc(44px * var(--kit-scale));border-radius:var(--kit-r-pill);background:var(--kit-accent);color:var(--kit-on-accent);box-shadow:var(--kit-shadow-card);white-space:nowrap}
.kit-btn.is-light{background:var(--kit-bg);color:var(--kit-accent)}
.kit-btn.is-ghost{background:var(--kit-fill);color:var(--kit-ink);box-shadow:none}

/* input / search field */
.kit-field{display:flex;align-items:center;gap:var(--kit-s3);background:var(--kit-fill);border-radius:var(--kit-r-pill);padding:calc(13px * var(--kit-scale)) var(--kit-s5);color:var(--kit-ink-3)}
.kit-field svg{flex:none;width:calc(18px * var(--kit-scale));height:calc(18px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2}
.kit-field input,.kit-field .kit-field-ph{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--kit-font);font-size:var(--kit-fs-body);letter-spacing:var(--kit-track);color:var(--kit-ink-2)}

/* segmented control */
.kit-seg{display:inline-flex;gap:2px;padding:4px;background:var(--kit-fill);border-radius:var(--kit-r-pill)}
.kit-seg button{border:0;cursor:pointer;font-family:var(--kit-font);font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);color:var(--kit-ink-2);padding:calc(8px * var(--kit-scale)) var(--kit-s5);border-radius:var(--kit-r-pill);background:none}
.kit-seg button.is-on{background:var(--kit-bg);color:var(--kit-ink);box-shadow:var(--kit-shadow-card)}

/* media-tile + horizontal tile row (excursions / dining / listings / gallery) */
/* rail bleeds to the phone edges: the negative inline margin cancels the screen's
   horizontal padding, while the leading pad keeps the first tile aligned with the header. */
.kit-tile-row{display:flex;gap:var(--kit-s4);overflow-x:auto;scrollbar-width:none;padding:0 0 0 var(--kit-screen-pad,12px);margin:0 calc(-1 * var(--kit-screen-pad,12px));scroll-padding-left:var(--kit-screen-pad,12px)}
.kit-tile-row::-webkit-scrollbar{display:none}
.kit-tile{flex:0 0 calc(150px * var(--kit-scale));background:var(--kit-fill);background:color-mix(in srgb, var(--kit-accent) 10%, var(--kit-bg));border-radius:var(--kit-r-card);overflow:hidden}   /* same accent wash as the metrics — photo on top, tinted panel below (grey fill is the pre-color-mix fallback) */
.kit-tile-img{aspect-ratio:1;background:var(--kit-fill) center/cover no-repeat}
.kit-tile-info{padding:var(--kit-s4)}
.kit-tile-info b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);color:var(--kit-ink)}   /* cap at 2 lines so a long title can't push the subtitle out */
.kit-tile-info s{display:block;text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-micro);color:var(--kit-accent-ink);margin-top:calc(3px * var(--kit-scale))}   /* mono meta takes the accent ink, echoing the metric values */

/* tier / plan selector (drink tiers · pricing · finance plans) */
.kit-tier-row{display:flex;gap:var(--kit-s3)}
.kit-tier{flex:1;text-align:center;background:var(--kit-fill);border-radius:var(--kit-r-chip);padding:var(--kit-s4) var(--kit-s3)}
.kit-tier.is-on{background:var(--kit-accent);color:var(--kit-on-accent);box-shadow:var(--kit-shadow-card)}
.kit-tier b{display:block;font-size:var(--kit-fs-body);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track)}
.kit-tier s{display:block;text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-label);margin-top:calc(4px * var(--kit-scale));opacity:.72}

/* chat bubbles (concierge) */
.kit-chat{display:flex;flex-direction:column;gap:var(--kit-s2)}
.kit-bubble{max-width:80%;padding:calc(10px * var(--kit-scale)) calc(15px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.35;letter-spacing:var(--kit-track);border-radius:calc(20px * var(--kit-scale))}
.kit-bubble.is-them{align-self:flex-start;background:var(--kit-fill);color:var(--kit-ink);border-bottom-left-radius:calc(6px * var(--kit-scale))}
.kit-bubble.is-me{align-self:flex-end;background:var(--kit-accent);color:var(--kit-on-accent);border-bottom-right-radius:calc(6px * var(--kit-scale))}

/* ticket / pass (boarding pass) */
.kit-pass{display:flex;align-items:stretch;background:var(--kit-accent);color:var(--kit-on-accent);border-radius:var(--kit-r-card);overflow:hidden;box-shadow:var(--kit-shadow-card)}
.kit-pass-main{flex:1;padding:var(--kit-s5)}
.kit-pass-main .k{font-family:var(--kit-mono);font-size:var(--kit-fs-micro);opacity:.72;letter-spacing:.04em}
.kit-pass-main b{display:block;font-size:var(--kit-fs-title);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);margin-top:calc(4px * var(--kit-scale))}
.kit-pass-stub{display:flex;align-items:center;padding:0 var(--kit-s4);border-left:2px dashed rgba(255,255,255,.45)}
.kit-pass-bars{width:calc(8px * var(--kit-scale));height:58%;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px);opacity:.85}

/* CTA banner */
.kit-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--kit-s4);background:var(--kit-accent);color:var(--kit-on-accent);border-radius:var(--kit-r-card);padding:var(--kit-s6);box-shadow:var(--kit-shadow-card)}
.kit-banner b{flex:1;min-width:0;font-size:var(--kit-fs-title);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);line-height:1.2;text-wrap:balance}
.kit-banner .kit-btn{flex:none}   /* CTA never shrinks or wraps; the headline flexes/wraps instead */

/* semantic chip states + toast */
.kit-chip.is-ok{background:var(--kit-accent-soft);color:var(--kit-accent-ink)}
.kit-chip.is-ok .kit-chip-dot{background:var(--kit-accent)}
.kit-chip.is-warn{background:rgba(176,113,12,.14);color:#8a5a0c}
.kit-chip.is-warn .kit-chip-dot{background:#b0710c}
.kit-toast{display:inline-flex;align-items:center;gap:var(--kit-s3);background:var(--kit-ink);color:#fff;border-radius:var(--kit-r-pill);padding:calc(10px * var(--kit-scale)) var(--kit-s5);font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);box-shadow:var(--kit-shadow-card)}
.kit-toast .kit-chip-dot{background:var(--kit-accent)}

/* live route map — drop in a route + pin SVG (accent-colored), it fills the frame */
.kit-map{border-radius:var(--kit-r-chip);overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.1)}
.kit-map svg{display:block;width:100%;height:auto}
/* printable label (shipping / return) with a barcode */
.kit-label{border:1.5px dashed var(--kit-line);border-radius:calc(12px * var(--kit-scale));padding:var(--kit-s3);background:var(--kit-bg)}
.kit-label-h{display:flex;justify-content:space-between;font-family:var(--kit-mono);font-size:calc(11px * var(--kit-scale));font-weight:var(--kit-w-semibold);letter-spacing:.12em;color:var(--kit-ink)}
.kit-barcode{height:calc(40px * var(--kit-scale));margin:var(--kit-s2) 0;border-radius:2px;background:repeating-linear-gradient(90deg,#15151c 0 2px,#fff 2px 4px,#15151c 4px 7px,#fff 7px 9px,#15151c 9px 11px,#fff 11px 15px)}
.kit-label-tn{font-family:var(--kit-mono);font-size:var(--kit-fs-micro);letter-spacing:.1em;color:var(--kit-ink);text-align:center}
.kit-label-a{font-size:calc(10.5px * var(--kit-scale));color:var(--kit-ink-3);text-align:center;margin-top:calc(4px * var(--kit-scale))}

/* ============================================================================
   PRIMITIVES III — data & finance (Charts / Gauge / Progress, per Sigma Status).
   Semantic green/red are data-viz only, never UI chrome.
   ========================================================================== */

/* balance hero — VGV navy→blue gradient, big mono figure, sparkline, delta */
.kit-balance{position:relative;overflow:hidden;border-radius:var(--kit-r-card);padding:var(--kit-s6);color:#fff;background:linear-gradient(150deg,#2A48DE 0%,#16236F 62%,#0A1530 100%);box-shadow:var(--kit-shadow-feature)}
.kit-balance-lab{font-family:var(--kit-mono);font-size:var(--kit-fs-micro);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.kit-balance-amt{font-family:var(--kit-mono);font-size:calc(34px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:-.01em;margin-top:calc(4px * var(--kit-scale))}
.kit-balance-delta{display:inline-flex;align-items:center;gap:calc(5px * var(--kit-scale));margin-top:var(--kit-s3);font-family:var(--kit-mono);font-size:var(--kit-fs-label);color:#7BE6AE}

/* sparkline (inline svg; flip class for dark/light surfaces) */
.kit-spark{display:block;width:100%;height:calc(54px * var(--kit-scale))}
.kit-spark .area{stroke:none}
.kit-spark .line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.kit-spark.on-dark .area{fill:rgba(255,255,255,.16)} .kit-spark.on-dark .line{stroke:#fff}
.kit-spark.on-light .area{fill:var(--kit-accent-soft)} .kit-spark.on-light .line{stroke:var(--kit-accent)}

/* gauge (donut) */
.kit-gauge{position:relative;width:calc(116px * var(--kit-scale));height:calc(116px * var(--kit-scale));flex:none}
.kit-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.kit-gauge .track{fill:none;stroke:var(--kit-fill-strong);stroke-width:11}
.kit-gauge .val{fill:none;stroke:var(--kit-accent);stroke-width:11;stroke-linecap:round}
.kit-gauge-ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.kit-gauge-ctr b{font-family:var(--kit-mono);font-size:calc(24px * var(--kit-scale));font-weight:var(--kit-w-medium);color:var(--kit-ink);letter-spacing:0}
.kit-gauge-ctr s{text-decoration:none;font-size:var(--kit-fs-micro);color:var(--kit-ink-3)}

/* bar chart (mini) */
.kit-bars{display:flex;align-items:flex-end;gap:var(--kit-s2);height:calc(76px * var(--kit-scale))}
.kit-bar{flex:1;min-height:4px;background:var(--kit-fill-strong);border-radius:calc(6px * var(--kit-scale)) calc(6px * var(--kit-scale)) 2px 2px}
.kit-bar.is-on{background:var(--kit-accent)}
.kit-bars-x{display:flex;gap:var(--kit-s2);margin-top:var(--kit-s2)}
.kit-bars-x span{flex:1;text-align:center;font-family:var(--kit-mono);font-size:calc(10px * var(--kit-scale));color:var(--kit-ink-3)}

/* progress bar */
.kit-progress{height:calc(8px * var(--kit-scale));background:var(--kit-fill-strong);border-radius:var(--kit-r-pill);overflow:hidden}
.kit-progress i{display:block;height:100%;border-radius:var(--kit-r-pill);background:var(--kit-accent)}

/* mono amount helper */
.kit-amt{font-family:var(--kit-mono);font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-ink)}
.kit-amt.is-neg{color:var(--kit-neg)}
.kit-amt.is-pos{color:var(--kit-pos)}

/* ---- icons: Phosphor (regular), inlined via icons.js → <i class="kit-ic" data-ph="home"></i> */
.kit-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1em;height:1em;line-height:0}
.kit-ic svg{width:100%;height:100%;display:block;fill:currentColor;stroke:none}
.kit-nav-item .kit-ic,.kit-nav-solo .kit-ic{font-size:calc(24px * var(--kit-scale))}
.kit-chevron .kit-ic{font-size:calc(19px * var(--kit-scale))}
.kit-field .kit-ic{font-size:calc(19px * var(--kit-scale))}
.kit-row-lead .kit-ic{font-size:calc(22px * var(--kit-scale));color:var(--kit-ink-2)}

  /* Reset is scoped to .cx-root (never touches the site nav/footer) and deliberately omits margin/padding:
     those would either override the kit components (when scoped) or bleed onto the nav (when global). Standard
     elements get their margin reset from the site's Tailwind preflight; kit components set their own spacing. */
  :where(.cx-root) *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  .cx-root{font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:rgba(255,255,255,0.94);overflow-x:clip}
  :where(.cx-root) button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}   /* :where() = zero specificity, so kit button classes (.cl-tile/.cl-vsg/.cd-devbtn) keep their own bg/border */

  /* ====================================================================
     CARNIVAL HERO — carved verbatim from carnival-23610d/exp.css.
     The layout, gradients, headline scale, phone tilt + the "How it works"
     compare choreography are carnival's; only the two phone interiors are
     swapped to kit mocks (see "kit phones in the duo slots" at the bottom).
     ==================================================================== */
  #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); }
  .cl-wrap{ position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:22px 44px 64px; }
  #clarityHero .cl-wrap{ z-index:auto; }   /* no stacking context here — its edge composited as a faint seam over the navy gradient */

  /* glass sub-nav capsule */
  .cl-top{ position:sticky; top:0; z-index:40; width:100%; max-width:90rem; margin:0 auto; padding:14px 24px 0; pointer-events: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; } }
  @media (min-width:1536px){ .cl-top{ padding-left:64px; padding-right:64px; } }
  @media (max-width:900px){ .cl-top-inner{ justify-content:center; } }
  .cl-top-left{ display:flex; align-items:center; }
  .cl-brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; letter-spacing:-0.01em; 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; } }
  /* in-house vertical label (replaces the client co-brand — mocks always use VGV's own vertical) */
  .cl-vert{ display:inline-flex; align-items:center; gap:13px; margin-left:15px; }
  .cl-vert-div{ width:1px; height:24px; background:rgba(255,255,255,0.2); }
  .cl-vert-name{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.06em; color:rgba(255,255,255,0.66); white-space:nowrap; }
  @media (max-width:1140px) and (min-width:901px){ .cl-vert{ display:none; } }
  @media (max-width:560px){ .cl-vert{ gap:11px; margin-left:11px; } }
  .cl-nav{ position:relative; display:flex; gap:24px; }
  .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; }   /* scrollspy: current section (white), like carnival */
  @media (max-width:900px){ .cl-nav{ display:none; } }

  /* shared type */
  .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; text-align:left; }
  .cl-h .cl-ln{ display:block; font-size:clamp(30px,4.2vw,50px); }
  .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); text-align:left; margin:0; }
  .cl-lede b{ color:#fff; font-weight:500; }

  /* hero grid */
  .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%);
    /* fade the panel's last 90px into the section navy — its hard edge (and the old 1px
       ::after hairline) showed as a line wherever the #clChat wave dips below it */
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 90px), transparent);
    mask-image:linear-gradient(180deg, #000 calc(100% - 90px), transparent); }
  @media (max-width:900px){ .cl-hero2{ grid-template-columns:minmax(0,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 18px; line-height:1.05; }   /* display-scale leading — the base 1.13 reads airy across the three-line stack */
  .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-btn{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:15px 28px; font-size:15px; background:linear-gradient(145deg,#4F7CFF,#2A48DE); color:#fff; font-weight:600; 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); }
  .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); }

  /* dual phones */
  .cl-hero2-vis{ position:relative; }
  .cl-duo{ position:relative; width:100%; height:600px; }
  .cl-duo-note{ text-align:center; font-size:12px; line-height:1.6; color:rgba(255,255,255,0.42); max-width:54ch; margin:76px auto 0; transition:opacity .3s ease; }   /* the rotated phones dip past the 600px duo box — clear them */
  @media (max-width:900px){ .cl-duo-note{ margin-top:58px; } }
  .cl-duo-note em{ font-style:normal; color:rgba(255,255,255,0.58); }
  .cl-hero2.compare .cl-duo-note{ opacity:0; }   /* the walkthrough hides the static phone, so the comparison caption bows out with it */
  @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.85); opacity:1; z-index:1; pointer-events:none; }
  .cl-duo-front{ transform:translate(-4%,-52%) rotate(4deg) scale(0.92); z-index:2; }   /* resting pair sits a notch smaller; the walkthrough zooms the front phone back to 1 */
  .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; }
  .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; }

  /* "How it works" → compare mode */
  .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; 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:12px 0 14px; text-wrap:balance; }
  .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.92); margin:0; max-width:40ch; min-height:6.4em; }
  .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; }
  .cl-cmp-next{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; 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; }
  /* the walkthrough is about ONE screen being built — the static phone leaves entirely */
  .cl-hero2.compare .cl-duo-back{ transform:translate(-150%,-50%) rotate(-6deg) scale(0.9); opacity:0; pointer-events:none; }
  .cl-hero2.compare .cl-duo-front{ transform:translate(2%,-50%) rotate(0deg) scale(1); }
  /* composer rail: one designed object holding the ingredients — catalog pieces in
     step 1, the moment's facts in step 2, dimmed once the screen is composed */
  .cp-panel{ position:absolute; z-index:3; top:50%; right:54%; transform:translateY(-50%); width:238px; background:rgba(9,15,36,0.55); border:1px solid rgba(94,134,255,0.18); border-radius:18px; padding:15px 17px 11px; opacity:0; pointer-events:none; transition:opacity .4s ease, filter .4s ease; }   /* right:54% parks the rail ~40px off the phone — it feeds the screen, so it sits with it */
  .cl-hero2.compare .cp-panel{ opacity:1; }
  .cl-hero2.compare[data-cmp="done"] .cp-panel{ opacity:0.38; filter:saturate(0.5); }
  .cp-panel-h{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#8FA3FF; margin-bottom:6px; }
  .cp-prow{ display:flex; align-items:center; gap:10px; padding:8px 0; }
  .cp-prow + .cp-prow{ border-top:1px solid rgba(94,134,255,0.1); }
  .cp-prow span{ font-size:13px; font-weight:600; color:rgba(255,255,255,0.86); white-space:nowrap; }
  .cp-pic{ flex:none; width:26px; height:26px; border-radius:8px; background:rgba(94,134,255,0.14); display:flex; align-items:center; justify-content:center; font-style:normal; color:#AFC3FF; }
  .cp-pic .kit-ic{ display:flex; }
  .cp-pic svg{ width:14px; height:14px; }
  /* the blueprint: labeled slots where the catalog pieces will land */
  .cp-slot{ position:relative; flex:none; display:flex; align-items:center; justify-content:center; border-radius:calc(14px * var(--kit-scale, 1)); border:1.5px dashed rgba(42,72,222,0.24); background:rgba(42,72,222,0.04); transition:border-color .35s ease, background .35s ease; }
  .cp-slot-fill{ flex:1; min-height:40px; }
  .cp-slot-l{ font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(42,72,222,0.42); transition:color .35s ease; }
  /* step 2: the moment's facts stamp onto their slots and the borders solidify — bound */
  .cp-slot-c{ position:absolute; top:-9px; right:8px; font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:0.06em; padding:3px 8px; border-radius:999px; background:#fff; border:1px solid rgba(42,72,222,0.35); color:#2A48DE; box-shadow:0 4px 10px -4px rgba(12,20,48,0.25); white-space:nowrap; opacity:0; transform:translateY(4px) scale(0.85); transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.4,.64,1); }
  .cp-slot.bound{ border-style:solid; border-color:rgba(42,72,222,0.5); background:rgba(42,72,222,0.07); }
  .cp-slot.bound .cp-slot-l{ color:rgba(42,72,222,0.62); }
  .cp-slot.bound .cp-slot-c{ opacity:1; transform:none; }
  .cp-slot:first-child .cp-slot-c{ top:6px; }   /* the top slot's chip stays inside the screen instead of riding the bezel */
  /* David F's line, made visible: the nav is the head — hand-built, never generated */
  .cl-hero2.compare .cl-duo-front .kit-nav{ position:relative; }
  .cl-hero2.compare .cl-duo-front .kit-nav::after{ content:'The head · hand-built'; position:absolute; z-index:2; top:-10px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:0.06em; padding:3px 8px; border-radius:999px; background:#fff; border:1px solid rgba(12,20,48,0.22); color:rgba(12,20,48,0.6); box-shadow:0 4px 10px -4px rgba(12,20,48,0.25); white-space:nowrap; }
  /* step 3: sparks carry the pieces from the rail into the slots */
  .cp-spark{ position:absolute; z-index:6; width:9px; height:9px; border-radius:999px; background:#7FA8FF; box-shadow:0 0 12px 3px rgba(94,134,255,0.65); pointer-events:none; }
  /* the receipt — pops at the phone's bottom seam after the modules land */
  .cp-badge{ position:absolute; z-index:7; left:50%; bottom:-17px; display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:0.03em; color:#fff; padding:7px 13px; border-radius:999px; background:linear-gradient(135deg,#5E86FF,#2A48DE); box-shadow:0 10px 26px -8px rgba(42,72,222,0.8); opacity:0; transform:translate(-50%,8px) scale(0.8); transition:opacity .25s ease, transform .25s ease; pointer-events:none; white-space:nowrap; }
  .cp-badge svg{ width:12px; height:12px; }
  /* entrance waits for the flights to finish; exit is immediate */
  .cl-hero2.compare[data-cmp="done"] .cp-badge{ opacity:1; transform:translate(-50%,0) scale(1); transition:opacity .45s ease .95s, transform .5s cubic-bezier(.34,1.56,.64,1) .95s; }
  @media (max-width:1100px){ .cp-panel{ width:206px; right:52%; } .cp-prow span{ font-size:12px; } }
  .cl-hero2.compare[data-cmp="genui"] .cl-duo-front::before{ opacity:1; }
  @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); } }
  @media (max-width:900px){ .cl-hero2-copy .cl-eyebrow, .cl-hero2-copy .cl-h, .cl-hero2-copy .cl-lede{ text-align:center; } .cl-duo-back{ transform:translate(-66%,-46%) rotate(-8deg) scale(0.9); } .cl-duo-front{ transform:translate(-12%,-50%) rotate(3deg); } }
  /* small phones: the duo scales to fit the viewport — full-size mocks crowded
     the CTAs and clipped off the right edge */
  @media (max-width:640px){
    .cl-duo{ height:430px; margin-top:18px; }
    .cl-duo-back{ transform:translate(-80%,-50%) rotate(-8deg) scale(0.6); }
    .cl-duo-front{ transform:translate(-22%,-50%) rotate(3deg) scale(0.72); }
    .cl-cta-row{ justify-content:center; flex-wrap:wrap; gap:10px; }
    .cl-cta-btn, .cl-cta-ghost{ padding:12px 17px; font-size:13.5px; white-space:nowrap; }
  }
  /* mobile: kill the continuous compositing load — the drifting blurs and the
     per-module render sweeps are what made scroll + taps choppy on iOS */
  @media (max-width:768px){
    .pk-bokeh, .vz-bokeh{ display:none; }   /* even static, the big blurred layers + edge mask cost an offscreen composite per scroll frame on iOS */
    .tw-card::before, .tw-card::after{ display:none; }
    .team-avatar::before{ animation:none; }
    .render-sweep{ display:none; }
  }

  /* ===== kit phones IN carnival's duo slots — only the interiors changed.
     Phone is a flex column (statusbar / scrolling screen / pinned tab bar) so the
     screen always fills and the glass tab bar anchors the bottom like a real app. ===== */
  .cl-duo .kit-phone{ width:290px; height:620px; --kit-scale:0.72; position:relative; overflow:hidden; display:flex; flex-direction:column; }   /* FIXED height = every persona's phone is the SAME size (never jumps); long content just runs under the fold like a scrollable app */
  .cl-duo .kit-phone-island{ width:76px; height:24px; top:11px; }
  .cl-duo .kit-statusbar{ flex:none; padding:13px 19px 0; }
  .cl-duo .kit-statusbar .time{ font-size:13px; }
  .cl-duo .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }   /* the visible window; content past the fold blurs under the nav = "scroll for more" */
  .cl-duo .kit-screen > *{ flex:none; }   /* modules keep their natural height — never compressed/clipped; overflow falls below the fold instead */
  .cl-duo .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
  .cl-duo-back .kit-phone{ box-shadow:0 18px 50px -20px rgba(8,14,32,.6),0 0 0 7px #0c0e12,0 0 0 8px #23262d; }
  .cl-duo-front .kit-phone{ box-shadow:0 30px 70px -22px rgba(0,0,0,.62),0 0 60px rgba(94,134,255,.22),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }

  /* greeting header + compact module sizing — composed FROM kit primitives, no new components */
  .hs-top{ display:flex; align-items:center; gap:10px; flex:none; }
  .hs-top .kit-avatar{ width:calc(55px * var(--kit-scale)); height:calc(55px * var(--kit-scale)); }
  .hs-top b{ font-size:calc(19.5px * var(--kit-scale)); font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
  .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:calc(14px * var(--kit-scale)); color:var(--kit-ink-2); margin-top:2px; }
  .hs-gav{ width:40px; height:40px; border-radius:50%; background:var(--kit-fill-strong); display:grid; place-items:center; color:var(--kit-ink-3); flex:none; }
  .hs-gav .kit-ic{ font-size:21px; }
  .hs-lab{ font-family:var(--kit-mono); font-size:calc(14px * var(--kit-scale)); letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); flex:none; }   /* air above (chunk break), tight to its content — Law of Proximity */
  .hs-metrics{ display:flex; gap:calc(7px * var(--kit-scale)); }
  .cl-duo .kit-feature{ height:124px; flex:none; }
  .cl-duo .kit-feature.is-tall{ height:138px; }
  .cl-duo .kit-tile{ flex-basis:calc(124px * var(--kit-scale)); }
  .cl-duo .kit-tile-img{ aspect-ratio:1.35; }

  /* ===== PICK A CUSTOMER (#clPick) — carved from carnival, kit phone swapped in ===== */
  /* ===== Chat vs GenUI (#clChat): "go beyond a wall of text" — carved from carnival ===== */
  #clChat{ position:relative; z-index:2; background:#eef3fc; color:#0c1430; font-family:'Poppins',system-ui,sans-serif; }
  #clChat .cl-wrap{ max-width:1180px; margin:0 auto; padding:80px 44px 152px; text-align:left; }
  #clChat .cl-eyebrow{ color:#2A48DE; }
  .cl-wave{ position:absolute; left:50%; transform:translateX(-50%); top:-99px; width:136vw; height:130px; display:block; pointer-events:none; }
  @media (max-width:640px){ .cl-wave{ top:-53px; height:76px; } }
  .ct-grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:60px; align-items:stretch; }
  @media (max-width:900px){ .ct-grid{ grid-template-columns:1fr; gap:40px; } }
  .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.7; color:rgba(12,20,48,0.64); margin:0; max-width:46ch; text-wrap:pretty; }
  .ct-copy-top{ margin-bottom:38px; }
  .ct-def{ margin-top:auto; background:rgba(42,72,222,0.05); border:1px solid rgba(42,72,222,0.14); border-radius:16px; padding:22px 26px; max-width:52ch; }   /* no left accent bar — the side-bar callout is an AI tell */
  .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; }
  .ct-phones{ display:flex; gap:22px; justify-content:center; align-items:flex-end; }   /* bottoms align: the eras rise left to right, no overlap, no tuck */
  @media (max-width:900px){ .ct-def{ margin-top:24px; } }
  @media (max-width:480px){ .ct-phones{ gap:12px; } }
  /* small screens: the chat pair stacks — side by side it clipped off-screen; the
     static-era thumb bows out, the copy carries the history on phones */
  @media (max-width:560px){ .ct-phones{ flex-direction:column; align-items:center; gap:26px; } .ct-static-col{ display:none; } }
  .ct-phone-col{ display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; z-index:1; }
  .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-era{ font-size:12.5px; color:rgba(12,20,48,0.52); margin-top:-10px; }
  /* the static era: smallest of the three — height carries the timeline, not overlap */
  .ct-static-col{ z-index:0; }
  .ct-static{ position:relative; width:162px; height:338px; flex:none; border-radius:24px; padding:5px; background:linear-gradient(160deg,#7e8aa5,#525d75 62%); box-shadow:0 22px 44px -20px rgba(10,20,50,0.45), inset 0 0 0 1px rgba(255,255,255,0.2); }
  .ct-st-screen{ height:100%; border-radius:19px; background:#f4f6fb; padding:8px 10px 8px; display:flex; flex-direction:column; gap:9px; overflow:hidden; }
  .ct-st-bar{ display:flex; align-items:center; justify-content:space-between; padding:1px 3px 0; }
  .ct-st-bar s{ width:16px; height:5px; border-radius:3px; background:#b9c2d4; text-decoration:none; }
  .ct-st-bar b{ width:32px; height:10px; border-radius:999px; background:#0b1222; }
  .ct-st-bar u{ width:15px; height:5px; border-radius:3px; background:#b9c2d4; text-decoration:none; }
  /* real old-school content, desaturated: the same rates table for every customer */
  .ct-st-title{ padding:1px 2px 0; font-size:10px; font-weight:700; letter-spacing:-0.01em; color:#3c465e; line-height:1.2; }
  .ct-st-title span{ display:block; font-size:7.5px; font-weight:500; letter-spacing:0.02em; color:#8b94ab; margin-top:2px; }
  .ct-st-table{ border:1px solid #e0e5f0; border-radius:9px; overflow:hidden; background:#fff; }
  .ct-st-tr{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:5.5px 8px; font-size:8px; font-weight:500; color:#5d6780; }
  .ct-st-tr + .ct-st-tr{ border-top:1px solid #edf0f7; }
  .ct-st-tr b{ font-size:8px; font-weight:600; color:#3c465e; white-space:nowrap; }
  .ct-st-promo{ border-radius:10px; background:linear-gradient(150deg,#39445e,#141b2c); padding:9px 10px; }
  .ct-st-promo b{ display:block; font-size:8.5px; font-weight:600; color:rgba(255,255,255,0.9); }
  .ct-st-promo s{ display:block; font-size:7.5px; font-weight:500; color:rgba(255,255,255,0.45); margin-top:3px; text-decoration:none; }
  .ct-st-link{ padding:0 2px; font-size:8px; font-weight:500; color:#6b7590; text-decoration:underline; text-decoration-color:#c2cad9; text-underline-offset:2px; }
  .ct-st-nav{ margin-top:auto; border-top:1px solid #e6eaf3; padding-top:8px; display:flex; justify-content:space-around; }
  .ct-st-nav i{ width:14px; height:14px; border-radius:5px; background:#dde3ee; }
  .ct-textphone{ position:relative; width:206px; height:424px; flex:none; border-radius:26px; 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:20px; 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); }
  .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); }
  /* GenUI phone — a kit phone at the same footprint as the text phone */
  .ct-genui .kit-phone{ width:206px; height:424px; --kit-scale:0.5; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 64px -22px rgba(10,20,50,.5), 0 0 50px rgba(94,134,255,.2), 0 0 0 6px #0c0e12, 0 0 0 7px #2a2d34; }
  .ct-genui .kit-phone-island{ width:54px; height:17px; top:8px; }
  .ct-genui .kit-statusbar{ flex:none; padding:9px 14px 0; } .ct-genui .kit-statusbar .time{ font-size:10px; }
  .ct-genui .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:8px 9px 4px; overflow:hidden; position:relative; }
  .ct-genui .kit-screen > *{ flex:none; }
  .ct-genui .kit-feature{ height:86px; } .ct-genui .kit-feature.is-tall{ height:100px; }
  .ct-genui .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:4px 8px 9px; }
  #clPick{ position:relative; z-index:3; background:#050B1F; }
  /* ===== Try It ambience — PS-menu bokeh: large soft drifting orbs + a few crisp
     points across the section's top. Depth layer under the content, transform/opacity
     only, clipped in its own layer so the wave overhang stays clean. ===== */
  .pk-bokeh{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 120px);
    mask-image:linear-gradient(180deg, transparent 0, #000 120px); }   /* glow ramps in below the wave hand-off — a hard clip edge reads as a broken seam */
  .pk-bokeh i, .pk-bokeh b{ position:absolute; border-radius:50%; }
  .pk-bokeh i{ filter:blur(70px); opacity:.16; animation:pkDrift 44s ease-in-out infinite alternate; }
  .pk-bokeh i:nth-of-type(1){ width:420px; height:420px; left:-6%; top:-60px; background:radial-gradient(circle at 40% 40%, #2A48DE, transparent 64%); }
  .pk-bokeh i:nth-of-type(2){ width:300px; height:300px; left:26%; top:-20px; background:radial-gradient(circle at 50% 50%, #5E86FF, transparent 64%); animation-delay:-12s; animation-duration:52s; }
  .pk-bokeh i:nth-of-type(3){ width:360px; height:360px; right:4%; top:-50px; background:radial-gradient(circle at 55% 45%, #0E9BAE, transparent 64%); animation-delay:-26s; animation-duration:60s; opacity:.12; }
  .pk-bokeh i:nth-of-type(4){ width:220px; height:220px; left:55%; top:40px; background:radial-gradient(circle at 50% 50%, #7A5AF0, transparent 64%); animation-delay:-34s; opacity:.11; }
  .pk-bokeh i:nth-of-type(5){ width:260px; height:260px; right:30%; top:10px; background:radial-gradient(circle at 45% 55%, #4F7CFF, transparent 64%); animation-delay:-6s; animation-duration:38s; }
  .pk-bokeh i:nth-of-type(6){ width:180px; height:180px; left:12%; top:120px; background:radial-gradient(circle at 50% 50%, #2A48DE, transparent 64%); animation-delay:-20s; opacity:.10; }
  .pk-bokeh b{ width:5px; height:5px; filter:blur(1px); opacity:.5; background:#9DB6F8; animation:pkDrift 30s ease-in-out infinite alternate; }
  .pk-bokeh b:nth-of-type(1){ left:18%; top:90px; }
  .pk-bokeh b:nth-of-type(2){ left:64%; top:60px; width:3px; height:3px; opacity:.38; animation-delay:-9s; }
  .pk-bokeh b:nth-of-type(3){ left:82%; top:150px; width:4px; height:4px; animation-delay:-17s; }
  .pk-bokeh b:nth-of-type(4){ left:40%; top:170px; width:3px; height:3px; opacity:.3; animation-delay:-23s; }
  @keyframes pkDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(34px,22px,0) scale(1.07); } }
  @media (max-width:900px){ .pk-bokeh i:nth-of-type(4), .pk-bokeh i:nth-of-type(5), .pk-bokeh i:nth-of-type(6){ display:none; } }
  @media (prefers-reduced-motion:reduce){ .pk-bokeh i, .pk-bokeh b{ animation:none; } }
  #clPick .cl-wrap{ position:relative; max-width:1300px; margin:0 auto; padding:118px 44px 80px; }
  @media (max-width:600px){ #clPick .cl-wrap{ padding:80px 22px 56px; } }
  #clPick .cl-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:#5E86FF; }
  .cl-sec-h2{ font-weight:700; letter-spacing:-0.02em; font-size:clamp(24px,2.8vw,34px); line-height:1.12; margin:10px 0 0; color:#fff; text-wrap:balance; }
  .cl-stage{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:52px; align-items:start; margin-top:34px; }
  @media (max-width:900px){ .cl-stage{ grid-template-columns:1fr; gap:40px; } }
  .cl-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.44); margin-bottom:14px; }
  .cl-glist{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-top:6%; margin-bottom:30px; }   /* persona photos pop up to 23% above their tiles — top padding keeps them clear of the PICK A PERSONA label (12% in the 2-col layout, where tiles are twice as wide) */
  @media (max-width:820px){ .cl-glist{ grid-template-columns:repeat(2,1fr); padding-top:12%; } }
  .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); }
  /* persona hover: a blurred accent aura pops from BEHIND the card, and the brand
     sparkle peeks over the corner — PS-menu focus feel, per-tile accent colored */
  .cl-tile::before{ content:''; position:absolute; inset:-12px; border-radius:24px; background:radial-gradient(circle at 50% 60%, var(--tile-acc,#5E86FF), transparent 72%); filter:blur(20px); opacity:0; transform:scale(.82); transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); z-index:-1; pointer-events:none; }
  .cl-tile:hover::before{ opacity:.5; transform:scale(1.06); }
  .cl-tile.on::before{ opacity:.34; transform:scale(1); }
  .cl-tile::after{ content:''; position:absolute; top:-7px; right:14px; width:13px; height:13px; background:var(--tile-acc,#5E86FF); clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity:0; transform:scale(.2) rotate(-40deg); transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1) .06s; z-index:2; pointer-events:none; }
  .cl-tile:hover::after{ opacity:.95; transform:scale(1) rotate(8deg); }
  @media (prefers-reduced-motion:reduce){ .cl-tile::before, .cl-tile::after{ transition:none; } }
  .cl-tile-ava, .cl-tile-name{ display:none; }
  /* mobile picker: vsg-style pills instead of the big cutout tiles — the tiles'
     height + filter transitions on four large PNGs are a layout/repaint storm on
     phones (the Try It tap lag). Pills carry small avatars, no heavy animation. */
  @media (max-width:640px){
    .cl-label{ margin-bottom:10px; }
    .cl-glist{ grid-template-columns:1fr 1fr; gap:8px; padding-top:0; margin-bottom:22px; }
    .cl-tile{ aspect-ratio:auto; display:flex; align-items:center; gap:9px; padding:6px 12px 6px 7px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.05); }
    .cl-tile-img{ display:none; }
    .cl-tile-ava{ display:block; width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none; filter:grayscale(1) brightness(.95); }
    .cl-tile.on .cl-tile-ava{ filter:none; }
    .cl-tile-name{ display:block; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cl-tile.on .cl-tile-name{ color:#fff; }
    .cl-tile::before, .cl-tile::after{ display:none; }
  }
  .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{ border-color:transparent; box-shadow:0 20px 46px -12px rgba(42,72,222,0.85); }   /* .on bg + glow set inline to the persona accent by JS */
  .cl-tile.on .cl-tile-img{ filter:none; height:123%; }
  .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',monospace; font-size:12.5px; color:var(--cl-acc,#5E86FF); letter-spacing:0.02em; }
  .cl-who-desc{ font-size:14px; line-height:1.55; color:rgba(255,255,255,0.6); margin-top:9px; min-height:46px; }
  .cl-divider{ height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--cl-acc,#5E86FF) 42%, transparent), 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:148px 1fr; align-items:center; gap:18px; padding:15px 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); }
  @media (max-width:640px){ .cl-incard{ grid-template-columns:1fr; gap:9px; } }
  .cl-inlabel{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.88); }
  .cl-inlabel i{ width:7px; height:7px; border-radius:50%; background:var(--cl-acc,#5E86FF); box-shadow:0 0 9px var(--cl-acc,#5E86FF); flex:none; }
  .cl-incol{ position:relative; min-height:44px; 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-chip{ font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:0.01em; color:rgba(255,255,255,0.68); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:4px 10px; white-space:nowrap; }
  .cl-incard.lit{ background:rgba(94,134,255,0.06); }
  /* render-sweep: a light sweeps each module as it materializes (carved from carnival) */
  .render-sweep{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; border-radius:inherit; }
  .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.5) 45%, rgba(255,255,255,0.16) 62%, transparent 100%); filter:blur(5px); animation:sweepMove 0.6s cubic-bezier(0.4,0,0.2,1) forwards; }
  @keyframes sweepMove{ from{ transform:translateX(-115%); } to{ transform:translateX(215%); } }
  /* particle bridge canvases — motes fly from the inputs to the phone on recompose */
  #clPartBg, #clPartFg{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
  #clPartBg{ z-index:0; } #clPartFg{ z-index:60; }
  .cl-indef{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(7px); pointer-events:none; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.62); transition:opacity .28s ease, transform .28s 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-right{ display:flex; flex-direction:column; align-items:center; }
  .cl-phonewrap{ position:relative; }
  .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; }
  /* #clPick phone — same kit treatment as the hero (fixed height, scroll-fade, no compression) */
  .cl-phonewrap .kit-phone{ width:300px; height:624px; --kit-scale:0.74; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px -22px rgba(0,0,0,.62),0 0 64px rgba(94,134,255,.24),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
  .cl-phonewrap .kit-phone-island{ width:78px; height:24px; top:11px; }
  .cl-phonewrap .kit-statusbar{ flex:none; padding:13px 19px 0; }
  .cl-phonewrap .kit-statusbar .time{ font-size:13px; }
  .cl-phonewrap .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
  .cl-phonewrap .kit-screen > *{ flex:none; }
  .cl-phonewrap .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
  .cl-phonewrap .hs-top{ display:flex; align-items:center; gap:10px; } .cl-phonewrap .hs-top .kit-avatar{ width:40px; height:40px; }
  .cl-phonewrap .hs-top b{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
  .cl-phonewrap .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:10px; color:var(--kit-ink-2); margin-top:2px; }
  .cl-phonewrap .hs-gav{ width:40px; height:40px; border-radius:50%; background:var(--kit-fill-strong); display:grid; place-items:center; color:var(--kit-ink-3); flex:none; } .cl-phonewrap .hs-gav .kit-ic{ font-size:21px; }
  .cl-phonewrap .hs-lab{ font-family:var(--kit-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); }
  .cl-phonewrap .hs-metrics{ display:flex; gap:calc(7px * var(--kit-scale)); }
  .cl-phonewrap .kit-feature{ height:124px; } .cl-phonewrap .kit-feature.is-tall{ height:138px; }
  .cl-phonewrap .kit-tile{ flex-basis:calc(124px * var(--kit-scale)); } .cl-phonewrap .kit-tile-img{ aspect-ratio:1.35; }
  /* reveal on scroll */
  #clPick .cl-eyebrow, #clPick .cl-sec-h2, #clPick .cl-stage{ opacity:0; 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:.08s; }
  #clPick.is-in .cl-stage{ opacity:1; transform:none; transition-delay:.18s; }
  @media (prefers-reduced-motion:reduce){ #clPick .cl-eyebrow, #clPick .cl-sec-h2, #clPick .cl-stage{ opacity:1 !important; transform:none !important; } }

  /* ===== MULTIPLATFORM (#clShift) — carved from carnival; the device HARDWARE frames are carved,
     the app INSIDE each is the light kit (same design language as the phone). Pass 1: laptop + phone. ===== */
  #clShift{ position:relative; background:linear-gradient(180deg,#eef3fc 0%,#e2eaf8 100%); color:#0c1430; }
  #clShift .cl-wrap{ position:relative; max-width:1180px; margin:0 auto; padding:96px 44px 88px; text-align:center; }
  @media (max-width:600px){ #clShift .cl-wrap{ padding:66px 18px 60px; } }
  #clShift .cl-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:#2A48DE; }
  .cl-sec-h{ font-weight:700; letter-spacing:-0.02em; font-size:clamp(26px,3vw,38px); line-height:1.12; margin:10px 0 0; color:#0c1430; text-wrap:balance; }
  .cl-sec-h .cl-hl{ color:#2A48DE; }
  .cl-sec-sub{ font-size:16px; line-height:1.55; color:rgba(12,20,48,0.62); max-width:62ch; margin:15px auto 0; text-wrap:pretty; }
  /* device toggle (sliding thumb) */
  .cd-devtoggle-wrap{ display:flex; justify-content:center; margin:38px 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:#0c1430; 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:520px){ .cd-devbtn{ padding:9px 13px; font-size:12px; gap:6px; } }
  /* stage — each device has a fixed design width, scaled to fit its frame */
  .cd-stage{ position:relative; margin:46px auto 0; min-height:640px; display:grid; grid-template-columns:100%; place-items:center; }   /* pin the track to the container — an implicit column grows to the widest frame (1000px) and every %-based centering resolves against THAT, shoving frames right */
  /* the big surfaces scale to the viewport via transform (iOS Safari doesn't
     apply zoom to descendants) — --dev-s composes with the switch choreography,
     and the negative margin returns the scaled-away height to the layout.
     The kiosk already fits via min() and keeps --dev-s 1. */
  .cd-laptop{ --dev-h:700px; --dev-w:1000px; } .cd-tablet{ --dev-h:740px; --dev-w:524px; } .cd-phone-wrap{ --dev-h:640px; --dev-w:300px; } .cd-tv{ --dev-w:min(400px,94vw); }
  /* explicit centering: Safari start-aligns grid items that overflow the container,
     so the wide frames hung off the right edge — margin math centers them at any width.
     transform-origin lives in CSS only (the switch choreography no longer stamps it inline). */
  .cd-laptop, .cd-tablet, .cd-tv, .cd-phone-wrap{ justify-self:start; position:relative; left:calc(50% - var(--dev-w,0px)/2); transform:scale(var(--dev-s,1)); transform-origin:50% 42%; margin-bottom:calc((var(--dev-s,1) - 1) * var(--dev-h,0px)); }   /* relative offset, not %-margin — Safari resolves this against the track reliably */
  @media (max-width:1040px){ .cd-laptop{ --dev-s:0.62; } .cd-stage{ min-height:0; align-items:start; } .cd-laptop, .cd-tablet, .cd-tv, .cd-phone-wrap{ transform-origin:top center; } }
  @media (max-width:640px){ .cd-laptop{ --dev-s:0.36; } .cd-tablet{ --dev-s:0.6; } .cd-phone-wrap{ --dev-s:0.7; } .cd-stage{ margin-top:30px; } }
  .cd-stage[data-dev="desktop"] .cd-tablet, .cd-stage[data-dev="desktop"] .cd-tv, .cd-stage[data-dev="desktop"] .cd-phone-wrap{ display:none; }
  .cd-stage[data-dev="tablet"] .cd-laptop, .cd-stage[data-dev="tablet"] .cd-tv, .cd-stage[data-dev="tablet"] .cd-phone-wrap{ display:none; }
  .cd-stage[data-dev="tv"] .cd-laptop, .cd-stage[data-dev="tv"] .cd-tablet, .cd-stage[data-dev="tv"] .cd-phone-wrap{ display:none; }
  .cd-stage[data-dev="phone"] .cd-laptop, .cd-stage[data-dev="phone"] .cd-tablet, .cd-stage[data-dev="phone"] .cd-tv{ display:none; }
  /* prev/next guest arrows — hug the active device frame (JS places them) and
     rubberband out/in around every mock swap */
  .cd-arrow{ position:absolute; z-index:7; width:46px; height:46px; border:0; border-radius:999px; background:#fff; color:#0c1430; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 32px -12px rgba(12,20,48,0.4), 0 0 0 1px rgba(12,20,48,0.07); transform:translateY(-50%); transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease; }
  .cd-arrow svg{ width:20px; height:20px; }
  .cd-arrow:hover{ transform:translateY(-50%) scale(1.1); box-shadow:0 18px 38px -12px rgba(12,20,48,0.5), 0 0 0 1px rgba(12,20,48,0.09); }
  .cd-arrow.out{ transform:translateY(-50%) scale(0); opacity:0; pointer-events:none; }
  .cd-arrow.pop{ animation:cdArrowPop .6s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes cdArrowPop{ 0%{ transform:translateY(-50%) scale(0); opacity:0; } 55%{ transform:translateY(-50%) scale(1.16); opacity:1; } 78%{ transform:translateY(-50%) scale(.94); } 100%{ transform:translateY(-50%) scale(1); opacity:1; } }
  @media (max-width:1080px){ .cd-arrow{ display:none; } }
  @media (prefers-reduced-motion:reduce){ .cd-arrow.pop{ animation:none; } }
  /* guest toggle (carved .cl-vsg pills, light-section themed) */
  .cl-vs-toggle{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px auto 0; max-width:800px; }
  .cl-vsg{ display:flex; align-items:center; gap:10px; padding:7px 15px 7px 7px; border-radius:999px; border:1px solid rgba(12,20,48,.14); background:rgba(12,20,48,.03); cursor:pointer; transition:border-color .25s, background .25s, transform .2s, box-shadow .25s; }
  .cl-vsg:hover{ transform:translateY(-1px); border-color:rgba(42,72,222,.4); }
  .cl-vsg img{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 22%; filter:grayscale(1) brightness(.95); transition:filter .25s; flex:none; }
  .cl-vsg span{ display:flex; flex-direction:column; line-height:1.15; text-align:left; min-width:0; }
  .cl-vsg b{ font-size:13px; font-weight:600; color:rgba(12,20,48,.82); white-space:nowrap; }
  .cl-vsg s{ font-family:var(--kit-mono); font-size:9.5px; letter-spacing:.02em; text-decoration:none; color:rgba(12,20,48,.5); white-space:nowrap; }
  .cl-vsg.on{ border-color:transparent; } .cl-vsg.on img{ filter:none; } .cl-vsg.on b{ color:#fff; } .cl-vsg.on s{ color:rgba(255,255,255,.85); }
  @media (max-width:680px){ .cl-vsg s{ display:none; } }
  /* hero richness (pill + cta + badge) */
  .cd-feat > .cd-hero-pill{ position:absolute; top:15px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:6px; margin:0; font-family:var(--kit-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--kit-accent); padding:5px 12px; border-radius:999px; box-shadow:0 6px 16px -8px rgba(0,0,0,.6); }
  .cd-feat > .cd-hero-cta{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:12px; padding:10px 18px; border:0; border-radius:999px; background:#fff; color:#0a1022; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 8px 22px -10px rgba(0,0,0,.5); }
  .cd-badge{ position:absolute; top:16px; right:16px; z-index:6; display:inline-flex; align-items:center; gap:6px; font-family:var(--kit-mono); font-size:10px; letter-spacing:.03em; color:var(--kit-accent-ink); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:6px 12px; border-radius:999px; box-shadow:var(--kit-shadow-card); opacity:0; transition:opacity .4s; }
  .cd-badge.show{ opacity:1; } .cd-badge svg{ width:12px; height:12px; fill:var(--kit-accent); }
  /* card richness */
  .cd-card.live{ background:var(--kit-accent-soft); }
  .cd-ctop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .cd-row2{ display:flex; align-items:flex-start; gap:13px; }
  .cd-thumb{ width:46px; height:46px; flex:none; border-radius:11px; background-size:cover; background-position:center; }
  .cd-pill{ display:inline-flex; align-items:center; gap:5px; flex:none; font-family:var(--kit-mono); font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; }
  .cd-pill-ok{ background:rgba(31,165,103,.15); color:#157a4a; } .cd-pill-warn{ background:rgba(176,113,12,.16); color:#8a5a0c; } .cd-pill-accent{ background:var(--kit-accent-soft); color:var(--kit-accent-ink); }
  .cd-progress{ height:5px; border-radius:999px; background:var(--kit-fill-strong); overflow:hidden; margin:14px 0 9px; } .cd-progress i{ display:block; height:100%; border-radius:999px; background:var(--kit-accent); }
  .cd-cfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; }
  .cd-cta{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--kit-on-accent); background:var(--kit-accent); padding:7px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; }
  .cd-barcode{ height:42px; border-radius:8px; background:repeating-linear-gradient(90deg, var(--kit-ink) 0 2px, transparent 2px 4px, var(--kit-ink) 4px 5.5px, transparent 5.5px 8px); margin-top:auto; opacity:.82; }
  /* tablet frame (portrait) */
  .cd-tablet{ position:relative; width:524px; border-radius:34px; padding:14px; background:linear-gradient(155deg,#2b3850,#0b1120 62%); box-shadow:0 50px 100px -34px rgba(8,14,32,.55), inset 0 0 0 1px rgba(255,255,255,.05); }
  .cd-tab-cam{ position:absolute; top:13px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:#05080f; z-index:3; }
  .cd-tab-screen{ position:relative; border-radius:22px; overflow:hidden; background:var(--kit-bg); height:692px; display:flex; flex-direction:column; text-align:left; }
  .cd-tab-bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--kit-line); }
  .cd-tab-logo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--kit-ink); }
  .cd-tab-user{ display:flex; align-items:center; gap:9px; } .cd-tab-user img{ width:32px; height:32px; border-radius:50%; object-fit:cover; } .cd-tab-user b{ font-size:12.5px; color:var(--kit-ink); font-weight:600; display:block; line-height:1.2; } .cd-tab-user s{ text-decoration:none; font-size:9.5px; color:var(--kit-ink-3); font-family:var(--kit-mono); display:block; }
  .cd-tab-canvas{ position:relative; flex:1; padding:18px 18px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
  .cd-tab-canvas .cd-feat{ min-height:178px; } .cd-tab-canvas .cd-feat h3{ font-size:21px; } .cd-tab-canvas .cd-feat p{ font-size:13px; }
  .cd-tab-canvas .cd-grid{ grid-template-columns:1fr 1fr; grid-auto-flow:dense; }
  .cd-tab-canvas .cd-card{ min-height:82px; padding:13px 14px; } .cd-tab-canvas .cd-card.photo{ min-height:104px; }
  .cd-tab-canvas .cd-thumb{ width:42px; height:42px; } .cd-tab-canvas .cd-card b{ font-size:14.5px; } .cd-tab-canvas .cd-row2{ gap:11px; }
  /* in-cabin TV (lean-back) */
  /* in-branch kiosk — a portrait ATM-style totem (was the cruise TV). Same DOM,
     restyled vertical: greeting up top, a quick-action home screen, the queued
     branch items stacked below, and card-slot hardware under the glass. */
  .cd-tv{ width:min(400px,94vw); position:relative; }
  .cd-tv-screen{ position:relative; aspect-ratio:10/16; border-radius:22px; overflow:hidden; background:#070b16; border:12px solid #0a0e1a; box-shadow:0 50px 110px -30px rgba(0,0,0,.85), 0 0 100px -24px rgba(42,72,222,.28); text-align:left; }
  .cd-tv::after{ content:''; display:block; margin:16px auto 0; width:56%; height:14px; border-radius:8px; background:linear-gradient(180deg,#1a2030,#0b0f1c); box-shadow:inset 0 2px 3px rgba(255,255,255,.09), 0 12px 26px -12px rgba(0,0,0,.6); }   /* card slot */
  .cd-tv-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
  .cd-tv-screen::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,9,22,.5) 0%, rgba(5,9,22,.78) 55%, rgba(5,9,22,.94) 100%); }
  .cd-tv-top{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:20px 22px; }
  .cd-tv-logo{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:15px; }
  .cd-tv-clock{ font-family:var(--kit-mono); font-size:13px; color:rgba(255,255,255,.8); }
  .cd-tv-greet{ position:absolute; left:22px; right:22px; top:112px; z-index:2; }
  .cd-tv-eyebrow{ font-family:var(--kit-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--kit-accent); margin-bottom:10px; }
  .cd-tv-greet h3{ font-size:32px; font-weight:700; letter-spacing:-.02em; color:#fff; margin:0; line-height:1.05; }
  .cd-tv-greet p{ font-size:14px; color:rgba(255,255,255,.72); margin:10px 0 0; max-width:32ch; }
  .cd-tv-plan{ position:absolute; left:22px; right:22px; bottom:22px; z-index:2; display:flex; flex-direction:column; gap:9px; }
  .cd-tv-acts{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:5px; }
  .cd-tv-act{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px 12px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:#fff; font:inherit; cursor:pointer; transition:background .2s, transform .2s; }
  .cd-tv-act:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
  .cd-tv-act .kit-ic{ font-size:22px; }
  .cd-tv-act b{ font-size:12px; font-weight:600; text-align:center; line-height:1.2; letter-spacing:-.01em; }
  .cd-tv-card{ background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:13px 16px; display:flex; align-items:baseline; gap:12px; }
  .cd-tv-time{ font-family:var(--kit-mono); font-size:12px; font-weight:700; color:var(--kit-accent); flex:none; min-width:52px; }
  .cd-tv-card b{ display:block; font-size:15px; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.2; } .cd-tv-card s{ display:block; text-decoration:none; font-size:12px; color:rgba(255,255,255,.62); margin-top:3px; }
  .cd-tv-screen .cd-badge{ top:56px; right:22px; }

  /* reveal */
  /* laptop hardware */
  .cd-laptop{ position:relative; width:1000px; }
  .cd-screen{ position:relative; border-radius:14px 14px 4px 4px; background:#0a1022; overflow:hidden; box-shadow:0 40px 90px -30px rgba(8,14,32,.55), 0 0 0 2px #11192e, 0 0 0 11px #161d31; }
  .cd-chrome{ display:flex; align-items:center; gap:14px; padding:0 16px; height:38px; background:#e9edf5; border-bottom:1px solid rgba(12,20,48,.08); }
  .cd-dots{ display:flex; gap:7px; } .cd-dots i{ width:11px; height:11px; border-radius:50%; background:rgba(12,20,48,.16); }
  .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:320px; display:flex; align-items:center; justify-content:center; gap:8px; height:24px; padding:0 12px; border-radius:7px; background:#fff; font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(12,20,48,.55); }
  .cd-url svg{ width:11px; height:11px; opacity:.5; }
  .cd-base{ position:relative; width:118%; margin-left:-9%; height:14px; border-radius:0 0 13px 13px; background:linear-gradient(180deg,#c3cbdb,#9aa3bb); box-shadow:0 22px 40px -18px rgba(8,14,32,.5); }
  .cd-base::after{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:130px; height:7px; border-radius:0 0 8px 8px; background:#828ca6; }
  /* the light kit app (shared by laptop + tablet) */
  .cd-app{ display:grid; grid-template-columns:200px 1fr; height:600px; background:var(--kit-bg); color:var(--kit-ink); text-align:left; }
  .cd-side{ border-right:1px solid var(--kit-line); padding:18px 14px; display:flex; flex-direction:column; gap:3px; background:var(--kit-bg-2); }
  .cd-side-logo{ display:flex; align-items:center; gap:8px; height:30px; margin:2px 8px 16px; font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--kit-ink); }
  .cd-logo-img{ display:block; width:auto; }   /* the real VGV Voyage lockup, used across surfaces */
  .cd-logo-img.inv{ filter:brightness(0) invert(1); }   /* whiten for dark surfaces (TV) */
  .cd-nav{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; font-size:13.5px; font-weight:500; color:var(--kit-ink-2); cursor:default; }
  .cd-nav .kit-ic{ font-size:18px; }
  .cd-nav.on{ color:var(--kit-accent); background:var(--kit-accent-soft); }
  .cd-side-foot{ margin-top:auto; display:flex; align-items:center; gap:9px; padding:9px 7px; border-top:1px solid var(--kit-line); }
  .cd-side-foot img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
  .cd-side-foot b{ display:block; font-size:12.5px; color:var(--kit-ink); font-weight:600; line-height:1.2; }
  .cd-side-foot s{ display:block; text-decoration:none; font-size:10px; color:var(--kit-ink-3); font-family:var(--kit-mono); }
  .cd-main{ display:flex; flex-direction:column; min-width:0; overflow:hidden; }
  .cd-top{ display:flex; align-items:flex-end; justify-content:space-between; padding:24px 28px 0; }
  .cd-greet b{ display:block; font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); }
  .cd-greet s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:12px; color:var(--kit-ink-2); margin-top:3px; }
  .cd-search{ display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:10px; background:var(--kit-fill); font-size:13px; color:var(--kit-ink-2); width:220px; }
  .cd-search .kit-ic{ font-size:16px; }
  .cd-canvas{ position:relative; flex:1; padding:18px 24px 24px; display:flex; flex-direction:column; gap:13px; overflow:hidden; }
  .cd-feat{ position:relative; min-height:184px; border-radius:16px; overflow:hidden; background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:flex-end; padding:20px 24px; }
  .cd-feat::after{ content:''; position:absolute; inset:0; background:var(--kit-scrim); }
  .cd-feat > *{ position:relative; z-index:1; color:#fff; }
  .cd-feat .k{ font-family:var(--kit-mono); font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.92); margin-bottom:8px; }
  .cd-feat h3{ margin:0; font-size:24px; font-weight:600; letter-spacing:-.01em; }
  .cd-feat p{ margin:6px 0 0; font-size:13px; color:rgba(255,255,255,.84); }
  .cd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .cd-card{ position:relative; overflow:hidden; border-radius:14px; background:var(--kit-fill); border:1px solid var(--kit-line); padding:13px 16px; display:flex; flex-direction:column; min-height:90px; }
  .cd-card.sp2{ grid-column:span 2; } .cd-card.is-accent{ background:var(--kit-accent); color:var(--kit-on-accent); border-color:transparent; }
  .cd-card.live{ border-color:transparent; }
  .cd-card.photo{ padding:0; justify-content:flex-end; min-height:108px; border:0; }
  .cd-card.photo .cd-cimg{ position:absolute; inset:0; background-size:cover; background-position:center; } .cd-card.photo::after{ content:''; position:absolute; inset:0; background:var(--kit-scrim); } .cd-card.photo > .cd-cbody{ position:relative; z-index:1; color:#fff; padding:14px 16px; }
  .cd-card-k{ font-family:var(--kit-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--kit-accent); margin-bottom:7px; }
  .cd-card.is-accent .cd-card-k, .cd-card.photo .cd-card-k{ color:rgba(255,255,255,.9); }
  .cd-card b{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); line-height:1.25; }
  .cd-card.is-accent b, .cd-card.photo b{ color:#fff; }
  .cd-card s{ text-decoration:none; display:block; font-size:12px; color:var(--kit-ink-2); margin-top:5px; line-height:1.4; }
  .cd-card.is-accent s, .cd-card.photo s{ color:rgba(255,255,255,.82); }
  /* phone surface — reuse the kit hero phone */
  .cd-phone-wrap{ position:relative; }
  .cd-phone-wrap .kit-phone{ width:300px; height:624px; --kit-scale:0.74; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px -22px rgba(0,0,0,.5),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
  .cd-phone-wrap .kit-phone-island{ width:78px; height:24px; top:11px; }
  .cd-phone-wrap .kit-statusbar{ flex:none; padding:13px 19px 0; } .cd-phone-wrap .kit-statusbar .time{ font-size:13px; }
  .cd-phone-wrap .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
  .cd-phone-wrap .kit-screen > *{ flex:none; }
  .cd-phone-wrap .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
  .cd-phone-wrap .hs-top{ display:flex; align-items:center; gap:10px; } .cd-phone-wrap .hs-top .kit-avatar{ width:40px; height:40px; }
  .cd-phone-wrap .hs-top b{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
  .cd-phone-wrap .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:10px; color:var(--kit-ink-2); margin-top:2px; }
  .cd-phone-wrap .hs-lab{ font-family:var(--kit-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); }
  .cd-phone-wrap .kit-feature{ height:124px; } .cd-phone-wrap .kit-feature.is-tall{ height:138px; }
  .cd-disclaimer{ max-width:760px; margin:34px 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); }
  /* reveal */
  #clShift .cl-eyebrow, #clShift .cl-sec-h, #clShift .cl-sec-sub, #clShift .cd-devtoggle-wrap, #clShift .cd-stage{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  #clShift.is-in .cl-eyebrow{ opacity:1; transform:none; } #clShift.is-in .cl-sec-h{ opacity:1; transform:none; transition-delay:.06s; }
  #clShift.is-in .cl-sec-sub{ opacity:1; transform:none; transition-delay:.12s; } #clShift.is-in .cd-devtoggle-wrap{ opacity:1; transform:none; transition-delay:.18s; } #clShift.is-in .cd-stage{ opacity:1; transform:none; transition-delay:.24s; }
  @media (prefers-reduced-motion:reduce){ #clShift .cl-eyebrow, #clShift .cl-sec-h, #clShift .cl-sec-sub, #clShift .cd-devtoggle-wrap, #clShift .cd-stage{ opacity:1 !important; transform:none !important; } }


  /* ===== Use Cases (#clUse): ported from carnival-23610d, adapted to the kit full-width-section + inner-wrap pattern ===== */
  #clUse{ position:relative; background:linear-gradient(180deg,#e2eaf8,#eef3fc); color:#0c1430; }
  #clUse .cl-eyebrow{ color:#2A48DE; }
  .uc-sec{ margin:0 auto; padding:96px 40px 116px; text-align:center; }   /* max-width comes from the ported .uc-sec rule below */
  .uc-sec{ max-width:1180px; }
  /* section marquees — display-scale two-line headlines (dark statement line,
     accent payoff line) shared by Use Cases, Beyond the Phone, How It Works,
     and The Vision. Content modules under a marquee arrive as whole blocks. */
  .cl-marquee{ font-size:clamp(32px,4.6vw,56px); line-height:1.05; letter-spacing:-0.03em; }
  .cl-marquee span{ display:block; }
  .uc-sec .cl-marquee span + span{ margin-top:0.14em; }
  .hw-card.rv, .hw-method.rv, .tw-card.rv{ transform:translateY(32px); transition-duration:.8s; }
  .uc-sec .cl-sec-sub{ font-size:17px; margin-top:16px; }
  /* each case study arrives as one whole module, Apple-product-page style */
  .uc-row.rv{ transform:translateY(36px); transition-duration:.85s; }
  .uc-rows{ display:flex; flex-direction:column; gap:28px; margin-top:64px; }
  .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{ display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(12,20,48,0.58); margin-bottom:14px; }
  .uc-tag-n{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none; border-radius:8px; background:#0c1430; color:#fff; font-size:11px; letter-spacing:0.04em; }
  .uc-copy{ text-align:left; }
  .uc-copy h3{ font-size:24px; font-weight:700; color:#0c1430; letter-spacing:-0.015em; 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; }
  /* what this screen was composed from — same chip vocabulary as the pick-a-customer inputs */
  .uc-in{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:16px; }
  .uc-in > span{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(12,20,48,0.42); margin-right:3px; }
  .uc-in i{ font-style:normal; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:rgba(12,20,48,0.62); background:rgba(12,20,48,0.03); border:1px solid rgba(12,20,48,0.14); border-radius:999px; padding:4px 11px; white-space:nowrap; }
  /* the data point as a proof card, not a floating superlative */
  .uc-stat{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; margin-top:22px; background:#fff; border:1px solid rgba(12,20,48,0.08); border-radius:12px; padding:15px 19px 12px; box-shadow:0 14px 34px -26px rgba(12,20,48,0.4); }   /* no left accent bar — the blue figure carries the accent */
  .uc-stat-n{ font-size:34px; font-weight:700; letter-spacing:-0.02em; color:#0c1430; line-height:1; }
  .uc-stat-l{ font-size:13px; line-height:1.45; color:rgba(12,20,48,0.68); max-width:32ch; }
  .uc-stat-src{ grid-column:1 / -1; margin-top:10px; padding-top:8px; border-top:1px solid rgba(12,20,48,0.06); font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(12,20,48,0.4); }
  /* section closers: research evidence row + the never-generate band (conservatism is the credibility) */
  .uc-ev{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:80px auto 0; max-width:980px; padding-top:40px; border-top:1px solid rgba(12,20,48,0.08); text-align:left; }
  .uc-ev-ic{ display:block; width:19px; height:19px; color:rgba(12,20,48,0.35); margin-bottom:12px; }
  .uc-ev-ic svg{ width:19px; height:19px; display:block; }
  .uc-ev-i b{ display:block; font-size:31px; font-weight:700; letter-spacing:-0.02em; color:#0c1430; line-height:1; }
  .uc-ev-i s{ display:block; text-decoration:none; font-size:12.5px; line-height:1.5; color:rgba(12,20,48,0.62); margin-top:9px; max-width:30ch; }
  .uc-ev-i > i:last-child{ display:block; font-style:normal; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(12,20,48,0.4); margin-top:11px; }
  .uc-never{ margin:52px auto 0; max-width:660px; background:#0c1430; border-radius:18px; padding:30px 34px 32px; text-align:center; }
  .uc-never-tag{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#8FA3FF; white-space:nowrap; margin-bottom:14px; }
  .uc-never-tag svg{ width:13px; height:13px; }
  .uc-never p{ margin:0 auto; max-width:56ch; font-size:14px; line-height:1.7; color:rgba(255,255,255,0.78); }
  @media (max-width:760px){
    .uc-ev{ grid-template-columns:1fr; gap:28px; text-align:center; }
    .uc-ev-i s{ margin-left:auto; margin-right:auto; }
    .uc-ev-ic{ margin-left:auto; margin-right:auto; }
    .uc-never{ padding:28px 24px 30px; }
  }
  .uc-cta{ margin:64px auto 0; max-width:980px; text-align:center; }
  .uc-cta p{ margin:0 0 20px; font-size:15.5px; color:rgba(12,20,48,0.72); }
  .uc-cta b{ color:#0c1430; }
  .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-lgtxt{ font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:-0.01em; color:#0c1430; white-space:nowrap; }   /* placeholder text lockup until the brand SVG lands */
  .uc-lgtxt.w{ color:#fff; }
  .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); transition:transform .3s ease, box-shadow .3s ease; }
  /* hover tells the story physically: the static screen grows as ONE dead slab;
     the GenUI screen rises to the viewer piece by piece — its modules are alive */
  .uc-phone.s:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 34px 64px -30px rgba(12,20,48,0.5); }
  .uc-phone.g{ transition:transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .38s ease; }
  .uc-phone.g:hover{ transform:translateY(-5px) scale(1.03); box-shadow:0 36px 68px -28px rgba(12,20,48,0.55), 0 0 44px -8px rgba(42,72,222,0.28); }
  .uc-phone.g .uc-hero, .uc-phone.g .uc-body > *{ transition:transform .42s cubic-bezier(.34,1.56,.64,1); }
  .uc-phone.g:hover .uc-hero{ transform:translateY(-2px) scale(1.015); transition-delay:.02s; }
  .uc-phone.g:hover .uc-body > :nth-child(1){ transform:translateY(-3px) scale(1.03); transition-delay:.07s; }
  .uc-phone.g:hover .uc-body > :nth-child(2){ transform:translateY(-3px) scale(1.03); transition-delay:.12s; }
  .uc-phone.g:hover .uc-body > :nth-child(3){ transform:translateY(-3px) scale(1.025); transition-delay:.17s; }
  .uc-phone.g:hover .uc-body > :nth-child(4){ transform:translateY(-2px) scale(1.02); transition-delay:.22s; }
  @media (prefers-reduced-motion:reduce){
    .uc-phone.s:hover, .uc-phone.g:hover{ transform:none; }
    .uc-phone.g .uc-hero, .uc-phone.g .uc-body > *{ transition:none; }
    .uc-phone.g:hover .uc-hero, .uc-phone.g:hover .uc-body > *{ transform:none; }
  }
  .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:15px; width:auto; }   /* the stacked Bank of VGV lockup needs a touch more height than the cruise wordmark */
  .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; }
  /* GenUI-side bodies compose from the REAL kit at phone scale — the static side
     stays a deliberately grey wireframe; this side is the shipped design system.
     Type gets a floor above pure --kit-scale math so it stays legible at 194px. */
  /* Radius scale anchors to the 10px CTA: cards 10, chips 7 — the kit's phone-tuned
     radii read blobby at this size. Spacing is grouped, not uniform: the hero card
     and its metrics cluster (10/12), the rows read as one list, the CTA breathes.
     One color family: everything neutral is a wash of the accent, labels share the
     balance card's uppercase-mono system. */
  .uc-body.uc-kit{ --kit-scale:0.52; --kit-r-card:10px; --kit-r-chip:7px; --kit-fs-micro:7.5px; --kit-fs-label:8.5px; --kit-fs-body:10.5px; gap:0; }
  /* blocks never compress: the flex column used to shrink children when a mock ran
     tall, which clipped the balance card's delta line mid-glyph (overflow:hidden) */
  .uc-body.uc-kit > *{ flex-shrink:0; }
  .uc-body.uc-kit .kit-balance{ box-shadow:0 10px 24px -12px rgba(10,21,48,.45); margin-bottom:10px; padding:10px 12px; }
  .uc-body.uc-kit .kit-balance-amt{ font-size:15px; margin-top:2px; }
  .uc-body.uc-kit .kit-balance-delta{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:4px; }
  .uc-body.uc-kit .kit-balance-delta svg{ margin-right:3px; vertical-align:-1px; }
  .uc-body.uc-kit .hs-metrics{ margin-bottom:12px; }
  .uc-body.uc-kit .kit-metric{ padding:7px 5px 6px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kit-accent) 12%, transparent); }
  .uc-body.uc-kit .kit-metric s{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .uc-body.uc-kit .kit-metric b, .uc-body.uc-kit .kit-metric s{ white-space:nowrap; text-align:center; align-self:center; }
  .uc-body.uc-kit .kit-metric s{ text-transform:uppercase; letter-spacing:.04em; font-size:6.5px; margin-top:2px; }
  .uc-body.uc-kit .kit-card{ padding:10px 12px 0; margin-bottom:12px; background:color-mix(in srgb, var(--kit-accent) 6%, var(--kit-bg)); }
  .uc-body.uc-kit .kit-card .hs-lab{ display:flex; justify-content:space-between; align-items:baseline; }
  .uc-body.uc-kit .kit-spark{ height:46px; margin:5px -12px 0; width:calc(100% + 24px); }   /* chart bleeds to the card's edges like a real widget */
  .uc-body.uc-kit .kit-row{ padding:5px 0; }
  .uc-body.uc-kit .kit-row-lead{ background:color-mix(in srgb, var(--kit-accent) 8%, var(--kit-bg)); color:var(--kit-accent-ink); }
  .uc-body.uc-kit .kit-row-lead .kit-ic{ font-size:12px; }
  .uc-body.uc-kit .hs-lab{ font-size:7px; letter-spacing:.1em; }
  .uc-body.uc-kit .uc-btn{ margin-top:auto; }
  /* mono eyebrow over the hero title — the composed-marker, GenUI side only */
  .uc-hero-k{ font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:4px; }
  .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:#fff; border:1px solid #d9dee8; border-radius:999px; padding:3px 9px; }
  .uc-chips span.on{ background:#606a7e; border-color:#606a7e; color:#fff; }
  .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:#606a7e; }   /* static side owns no accent — selected states are dead slate */
  .uc-radio.on::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:#606a7e; }
  .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:10.5px; color:#4b5468; }
  .uc-sel{ font-size:10px; color:#8f97a9; background:#fff; border:1px solid #d6dbe5; border-radius:6px; padding:5px 9px; min-width:84px; text-align:right; }
  .uc-inp{ font-size:10px; color:#a3abbc; background:#fff; border:1px solid #d6dbe5; border-radius:6px; padding:5px 9px; min-width:84px; text-align:left; }
  /* static side, high fidelity but dead: a real bank app's parts — card-art thumbs,
     detail lines, chevron cells, disclosure microcopy — with zero accent anywhere */
  .uc-cell{ display:flex; align-items:center; gap:9px; padding:7px 0; border-top:1px solid #e9edf3; }
  .uc-cell:first-of-type{ border-top:none; }
  .uc-cell-b{ flex:1; min-width:0; }
  .uc-cell-b b{ display:block; font-size:10.5px; font-weight:600; color:#252d42; line-height:1.25; }
  .uc-cell-b s{ display:block; text-decoration:none; font-size:8.5px; color:#8a93a6; margin-top:1px; }
  .uc-thumb{ width:27px; height:18px; flex:none; border-radius:3.5px; background:linear-gradient(135deg,#cdd3df,#adb5c6); position:relative; }
  .uc-thumb::after{ content:''; position:absolute; left:4px; top:4px; width:7px; height:5px; border-radius:1.5px; background:rgba(255,255,255,.55); }
  .uc-chev{ flex:none; width:6px; height:6px; margin-right:2px; border-right:1.6px solid #b6bdcc; border-bottom:1.6px solid #b6bdcc; transform:rotate(-45deg); }
  .uc-note2{ font-size:7.5px; line-height:1.5; color:#9aa2b2; margin:8px 0 10px; }
  .uc-alert{ display:flex; gap:9px; align-items:flex-start; background:#f1f3f8; border:1px solid #e6eaf1; border-radius:8px; padding:9px 10px; margin-bottom:11px; }
  .uc-alert-ic{ flex:none; width:22px; height:22px; border-radius:50%; background:#e2e6ee; display:flex; align-items:center; justify-content:center; color:#7d8698; }
  .uc-alert-ic svg{ width:11px; height:11px; }
  .uc-alert b{ display:block; font-size:10.5px; font-weight:600; color:#252d42; line-height:1.3; }
  .uc-alert s{ display:block; text-decoration:none; font-size:8.5px; color:#8a93a6; margin-top:1px; }
  .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-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; }
  @media (max-width:640px){
    .uc-row{ padding:20px; }
    .uc-pairwrap{ width:100vw; margin-left:calc(50% - 50vw); }
    .uc-stat{ grid-template-columns:1fr; row-gap:7px; }   /* number over label — side-by-side reads odd at phone width */
    .uc-stat-n{ font-size:30px; }
  }

  /* ===== Quote breather (#clQuote) — ported from carnival (its ::before paints the full-width light bg) ===== */
  .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,#f3f7fe 0%,#eaf0fb 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; } }

  /* ===== How It Works (#clHow): ported from carnival, adapted to full-width section + inner wrap ===== */
  #clHow{ position:relative; background:linear-gradient(180deg,#e2eaf8,#eef3fc); color:#0c1430; }
  #clHow .cl-eyebrow{ color:#2A48DE; }
  .hw-wrap{ max-width:1000px; margin:0 auto; padding:96px 40px 116px; text-align:center; }
  .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; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .hw-card:hover{ transform:translateY(-3px); border-color:rgba(42,72,222,0.3); box-shadow:0 22px 46px -28px rgba(42,72,222,0.45); }
  .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,#1b2749,#0c1430); color:#fff; box-shadow:0 10px 24px -10px rgba(12,20,48,0.55); }
  .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:rgba(12,20,48,0.5); 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; }

  /* ===== Trust (#clTrust): navy guardrails split — ported from carnival ===== */
  #clTrust{ position:relative; z-index:4; background:#050B1F; }
  #clTrust .cl-wrap{ max-width:1000px; padding:140px 40px; }
  #clTrust .cl-sec-h{ color:#fff; }                /* kit's base .cl-sec-h is dark (#0c1430) for light sections; this section is navy */
  #clTrust .cl-sec-h .cl-hl{ color:#5E86FF; }
  #clTrust .cl-sec-sub{ color:rgba(255,255,255,0.56); }
  .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:rgba(255,255,255,0.08); color:rgba(255,255,255,0.78); margin-bottom:16px; }   /* guarantees are quiet; the controls band below keeps the section's blue */
  .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; }
  .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; } }
  /* governance gate — boxless two-column footer under the split; the solid top
     rule IS the gate (Truist red-tape feedback) */
  .tr-gov{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center; margin-top:40px; border-top:1px solid rgba(94,134,255,0.45); padding:30px 4px 0; text-align:left; }
  .tr-gov{ display:none; }   /* HIDDEN pending approval — delete this line to show the gate */
  .tr-gov b{ display:block; font-size:16.5px; font-weight:600; color:#fff; margin-bottom:6px; }
  .tr-gov p{ font-size:15.5px; line-height:1.5; color:rgba(255,255,255,0.84); margin:0; font-weight:500; text-wrap:pretty; }
  .tr-gov-pills{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; justify-self:end; }
  @media (max-width:860px){ .tr-gov{ grid-template-columns:1fr; gap:18px; } .tr-gov-pills{ flex-direction:row; flex-wrap:wrap; justify-self:start; } }

  /* ===== Proof (#clProof): blue accent band + stats — ported from carnival ===== */
  #clProof{ position:relative; z-index:5; }
  #clProof .cl-wrap{ max-width:1000px; padding:140px 40px; text-align:center; }
  #clProof .cl-sec-h{ color:#fff; }
  #clProof::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%); }
  #clProof .cl-eyebrow{ color:rgba(255,255,255,0.82); }
  #clProof .cl-hl{ color:#cdd9ff; }
  #clProof .cl-sec-sub{ color:rgba(255,255,255,0.85); }
  #clProof .cl-stat{ border-color:rgba(255,255,255,0.24); background:rgba(255,255,255,0.1); }
  #clProof .cl-stat:hover{ border-color:rgba(255,255,255,0.42); background:rgba(255,255,255,0.16); }
  #clProof .cl-stat b{ color:#fff; }
  #clProof .cl-stat s{ color:rgba(255,255,255,0.8); }
  #clProof .cl-stat-ic{ background:rgba(255,255,255,0.18); color:#fff; }
  .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; }

  /* ===== Vision (#clVision): navy "two ways in" — ported from carnival (cl-sec lead -> left-aligned) ===== */
  #clVision{ position:relative; z-index:6; background:#050B1F; }
  /* vision ambience — big accent orbs breathe behind the two path cards; edge
     fades on the layer so the glow never hard-clips against neighbor sections */
  .vz-bokeh{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent);
    mask-image:linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent); }
  .vz-bokeh i{ position:absolute; border-radius:50%; filter:blur(80px); animation:pkDrift 50s ease-in-out infinite alternate; }
  .vz-bokeh i:nth-of-type(1){ width:560px; height:560px; left:2%; bottom:-120px; opacity:.15; background:radial-gradient(circle at 45% 45%, #2A48DE, transparent 62%); }
  .vz-bokeh i:nth-of-type(2){ width:560px; height:560px; right:0; bottom:-90px; opacity:.13; background:radial-gradient(circle at 50% 50%, #5E86FF, transparent 62%); animation-delay:-22s; animation-duration:62s; }
  .vz-bokeh i:nth-of-type(3){ width:300px; height:300px; right:16%; top:60px; opacity:.09; background:radial-gradient(circle at 50% 50%, #0E9BAE, transparent 62%); animation-delay:-38s; }
  @media (prefers-reduced-motion:reduce){ .vz-bokeh i{ animation:none; } }
  #clVision .cl-wrap{ max-width:1000px; padding:140px 40px; text-align:left; }
  #clVision .cl-sec-h{ color:#fff; }
  #clVision .cl-sec-h .cl-hl{ color:#5E86FF; }
  #clVision .cl-sec-sub{ color:rgba(255,255,255,0.56); margin-left:0; }
  .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; 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; }   /* overflow stays visible so the hover aura can escape the card */
  .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); }
  /* the two paths pop from behind on hover — an aura in each card's own hue + the brand sparkle */
  .tw-card::before{ content:''; position:absolute; inset:-16px; border-radius:30px; background:radial-gradient(circle at 50% 62%, #2A48DE, transparent 70%); filter:blur(26px); opacity:0; transform:scale(.85); transition:opacity .4s ease, transform .55s cubic-bezier(.34,1.56,.64,1); z-index:-1; pointer-events:none; }
  .tw-card.tw-alt::before{ background:radial-gradient(circle at 50% 62%, #5E86FF, transparent 70%); }
  .tw-card:hover::before{ opacity:.4; transform:scale(1.04); }
  .tw-card::after{ content:''; position:absolute; top:-8px; right:22px; width:15px; height:15px; background:#9DB6F8; clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity:0; transform:scale(.2) rotate(-40deg); transition:opacity .3s ease, transform .55s cubic-bezier(.34,1.56,.64,1) .05s; z-index:2; pointer-events:none; }
  .tw-card:hover::after{ opacity:.95; transform:scale(1) rotate(10deg); }
  @media (prefers-reduced-motion:reduce){ .tw-card::before, .tw-card::after{ transition:none; } }
  .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 (#clTeam): navy — ported from carnival (VGV GenUI team) ===== */
  #clTeam{ position:relative; z-index:7; background:#050B1F; }
  #clTeam .cl-wrap{ max-width:1000px; padding:140px 40px; text-align:center; }
  #clTeam .cl-sec-h{ color:#fff; }
  .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; }
  /* team fan-in: the five gather at the grid's center, fan out to their seats
     (center first, edges last), then the faces arrive inside the circles.
     Gated behind .tm-fan (JS, motion-safe only); classes strip after the
     sequence so the avatar hover lean keeps working. */
  #clTeam.tm-fan .team-member{ opacity:0; transform:translateX(var(--fan-x,0)) translateY(14px) scale(.9); transition:opacity .45s ease, transform .85s cubic-bezier(.3,1.3,.4,1); }
  #clTeam.tm-fan .team-member:nth-child(1){ --fan-x:calc(200% + 48px); transition-delay:.14s; }
  #clTeam.tm-fan .team-member:nth-child(2){ --fan-x:calc(100% + 24px); transition-delay:.07s; }
  #clTeam.tm-fan .team-member:nth-child(3){ --fan-x:0px; }
  #clTeam.tm-fan .team-member:nth-child(4){ --fan-x:calc(-100% - 24px); transition-delay:.07s; }
  #clTeam.tm-fan .team-member:nth-child(5){ --fan-x:calc(-200% - 48px); transition-delay:.14s; }
  #clTeam.tm-fan .team-avatar img{ opacity:0; transform:scale(1.14); transition:opacity .55s ease .5s, transform .8s cubic-bezier(.2,.7,.2,1) .5s; }
  #clTeam.tm-fan.tm-in .team-member{ opacity:1; transform:none; }
  #clTeam.tm-fan.tm-in .team-avatar img{ opacity:1; transform:scale(1); }
  @media (max-width:880px){ #clTeam.tm-fan .team-member{ --fan-x:0px !important; } }
  /* 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); }
  .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; }
  #clTeam .team-member b{ color:#fff; }
  #clTeam .team-member s{ color:rgba(255,255,255,0.5); }
  #clTeam .team-link{ color:#7FA8FF; }

  /* ===== Get started (#clStart): navy CTA — ported from carnival ===== */
  #clStart{ position:relative; z-index:8; background:#050B1F; }
  #clStart .cl-wrap{ max-width:1000px; padding:140px 40px; text-align:center; }
  #clStart .cl-sec-h{ color:#fff; }
  #clStart .cl-sec-sub{ color:rgba(255,255,255,0.56); }
  .cl-start-angle{ max-width:680px; margin:22px auto 0; font-size:17px; line-height:1.55; font-weight:600; color:rgba(255,255,255,0.9); text-wrap:balance; }   /* per-bank angle line; render.js strips the slot when the record has none */
  /* the pilot recipe as a step rail — 01 → 02 → 03; the section's one blue moment stays on the CTA */
  .cl-start-steps{ display:flex; align-items:stretch; justify-content:center; gap:14px; max-width:880px; margin:38px auto 0; }
  .cl-step{ flex:1; max-width:250px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:left; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); border-radius:18px; padding:18px 20px 19px; }
  .cl-step-top{ display:flex; align-items:center; justify-content:space-between; width:100%; }   /* icon left, mono number right — tw-card-top composition */
  .cl-step-ic{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.75); }   /* quiet like .tr-ic — the section's blue stays on the CTA */
  .cl-step-ic svg{ width:17px; height:17px; }
  .cl-step-num{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.38); }
  .cl-step b{ font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-0.01em; color:rgba(255,255,255,0.92); text-wrap:balance; }
  .cl-step-arr{ align-self:center; flex:none; width:17px; height:17px; color:rgba(255,255,255,0.28); }
  .cl-step-arr svg{ display:block; width:100%; height:100%; }
  .cl-start-cta{ display:flex; align-items:center; justify-content:center; gap:22px; margin:36px auto 0; }   /* button + hint read as one composed row */
  .cl-start-hint{ margin:0; max-width:40ch; text-align:left; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.55); text-wrap:balance; border-left:1px solid rgba(255,255,255,0.14); padding-left:22px; }   /* balance keeps "together" off a line of its own */
  .cl-start-note{ margin:26px auto 0; font-size:12.5px; color:rgba(255,255,255,0.42); }
  @media (max-width:760px){
    .cl-start-steps{ flex-direction:column; align-items:stretch; max-width:340px; gap:10px; }
    .cl-step{ max-width:none; }
    .cl-step-arr{ transform:rotate(90deg); }
    .cl-start-cta{ flex-direction:column; gap:16px; }
    .cl-start-hint{ border-left:0; padding-left:0; text-align:center; }
  }
  .pk-bridge{ margin:40px auto 0; text-align:center; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,0.55); }
  .pk-bridge a{ color:#8FA3FF; text-decoration:none; border-bottom:1px solid rgba(143,163,255,0.4); transition:color .2s, border-color .2s; }
  .pk-bridge a:hover{ color:#C9D4FF; border-color:#C9D4FF; }

  /* ===== Footer + back-to-top — ported from carnival (endmark clones the GenUI sub-nav lockup) ===== */
  .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; }
  .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; } }
  .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); }

  /* ===== scroll reveals — exp.js tags targets with .rv (skipped entirely under
     reduced-motion / no IntersectionObserver, so content is never hidden).
     Opacity + transform only: compositor-friendly, one-shot, no layout work. ===== */
  .rv{ opacity:0; transform:translateY(16px); transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rv-d,0s); }
  .rv.rv-in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .rv{ opacity:1 !important; transform:none !important; } }
  .cl-totop svg{ width:20px; height:20px; }
  @media (max-width:600px){ .cl-totop{ bottom:18px; right:18px; width:44px; height:44px; } }

  /* land anchor jumps below the floating sub-nav */
  #clChat, #clPick, #clShift, #clUse, #clHow, #clTrust, #clProof, #clVision, #clTeam, #clStart{ scroll-margin-top:1px; }

  /* mobile: Try It comes off — the tap-to-recompose interaction isn't phone
     friendly; the multiplatform stage right below carries the persona story and
     inherits the dark theatre so the page keeps its light/dark rhythm */
  @media (max-width:760px){
    #clPick{ display:none; }
    .cp-panel, .cp-badge{ display:none; }   /* the compose walkthrough never opens on mobile */
    #clShift{ background:#050B1F; }
    #clShift .cl-eyebrow{ color:#5E86FF; }
    #clShift .cl-sec-h{ color:#fff; }
    #clShift .cl-sec-h .cl-hl{ color:#5E86FF; }
    #clShift .cl-sec-sub{ color:rgba(255,255,255,.6); }
    .cd-devtoggle{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
    .cd-devbtn{ color:rgba(255,255,255,.66); } .cd-devbtn:hover{ color:#fff; }
    .cd-dev-thumb{ background:#2A48DE; }
    .cl-vsg{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
    .cl-vsg b{ color:rgba(255,255,255,.85); } .cl-vsg s{ color:rgba(255,255,255,.5); }
    .cd-disclaimer{ color:rgba(255,255,255,.55); }
    .cd-disclaimer em{ color:#5E86FF; }   /* the emphasized "your" was navy-on-navy in the dark theatre */
  }




  /* ===== GenUI hub page sections (2026-07-08) ===== */

  /* demo section in-house note */
  .hub-demo-note{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); text-align:left; margin:14px 0 0; }

  /* What is generative UI (light) */
  #hubDef{ position:relative; z-index:2; background:linear-gradient(180deg,#eef3fc,#e2eaf8); color:#0c1430; font-family:'Poppins',system-ui,sans-serif; }
  .hd-wrap{ max-width:1060px; padding:110px 44px 120px; text-align:center; }
  @media (max-width:720px){ .hd-wrap{ padding:76px 22px 84px; } }
  .hd-h span{ display:inline; }
  .hd-def{ margin:34px auto 0; max-width:30em; font-size:clamp(19px,2.3vw,25px); line-height:1.5; font-weight:500; color:rgba(12,20,48,0.72); text-wrap:balance; }
  .hd-def b{ color:#0c1430; font-weight:700; }
  .hd-lead{ margin:60px auto 0; font-size:15px; font-weight:600; color:#0c1430; }
  .hd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:26px auto 0; text-align:center; }
  @media (max-width:920px){ .hd-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .hd-grid{ grid-template-columns:1fr; } }
  .hd-card{ background:rgba(255,255,255,0.62); border:1px solid rgba(12,20,48,0.09); border-radius:16px; padding:20px 22px 24px; }
  .hd-step{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; white-space:nowrap; color:rgba(12,20,48,0.55); margin-bottom:12px; }
  .hd-card b{ display:block; font-size:16px; font-weight:600; color:#0c1430; }
  .hd-card p{ font-size:14.5px; line-height:1.55; color:rgba(12,20,48,0.66); margin:8px 0 0; text-wrap:pretty; }
  .hd-card-hl{ background:#0A1530; border-color:rgba(94,134,255,0.4); box-shadow:0 28px 60px -24px rgba(42,72,222,0.45); }
  @media (min-width:921px){ .hd-card-hl{ transform:translateY(-10px); } }
  .hd-card-hl .hd-step{ color:#5E86FF; }
  .hd-card-hl b{ color:#fff; }
  .hd-card-hl p{ color:rgba(255,255,255,0.66); }
  .hd-cite{ margin:30px auto 0; max-width:74ch; font-size:14px; line-height:1.6; color:rgba(12,20,48,0.6); text-wrap:pretty; }
  .hd-cite a{ color:#2A48DE; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(42,72,222,0.35); }
  .hd-cite a:hover{ border-color:#2A48DE; }

  /* Where GenUI fits (dark) */
  #hubFit{ position:relative; z-index:3; background:#050B1F; color:#fff; font-family:'Poppins',system-ui,sans-serif; }
  .hf-wrap{ max-width:900px; padding:120px 40px; text-align:center; }
  @media (max-width:720px){ .hf-wrap{ padding:80px 22px; } }
  #hubFit .cl-sec-h{ color:#fff; }
  #hubFit .cl-sec-sub{ color:rgba(255,255,255,0.56); }
  .hf-stack{ display:grid; gap:10px; margin:46px auto 0; max-width:720px; }
  .hf-tier{ text-align:left; border:1px solid rgba(255,255,255,0.12); border-radius:14px; background:rgba(255,255,255,0.03); padding:18px 22px; }
  .hf-tier-l{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
  .hf-tier p{ font-size:15px; line-height:1.55; color:rgba(255,255,255,0.66); margin:7px 0 0; text-wrap:pretty; }
  .hf-tier-hl{ border-color:rgba(94,134,255,0.7); background:linear-gradient(150deg, rgba(42,72,222,0.3), rgba(94,134,255,0.08)); box-shadow:0 14px 34px -18px rgba(42,72,222,0.9); }
  .hf-tier-hl .hf-tier-l{ color:#BDCDFF; }
  .hf-p{ max-width:72ch; margin:34px auto 0; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,0.62); text-align:left; text-wrap:pretty; }

  /* Use cases by industry (light) */
  #hubUse{ position:relative; z-index:3; background:linear-gradient(180deg,#eef3fc,#e2eaf8); color:#0c1430; font-family:'Poppins',system-ui,sans-serif; }
  .hu-wrap{ max-width:1060px; padding:110px 44px 120px; text-align:center; }
  @media (max-width:720px){ .hu-wrap{ padding:76px 22px 84px; } }
  .hu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:44px auto 0; text-align:left; }
  @media (max-width:880px){ .hu-grid{ grid-template-columns:1fr; } }
  .hu-card{ background:#fff; border:1px solid rgba(12,20,48,0.08); border-radius:20px; padding:26px 28px 28px; box-shadow:0 24px 60px -30px rgba(12,20,48,0.24); }
  .hu-tag{ white-space:nowrap; display:inline-flex; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#2A48DE; border:1px solid rgba(42,72,222,0.3); border-radius:999px; padding:6px 13px; }
  .hu-card b{ display:block; font-size:17px; font-weight:600; letter-spacing:-0.01em; color:#0c1430; margin:16px 0 0; text-wrap:pretty; }
  .hu-card p{ font-size:15px; line-height:1.6; color:rgba(12,20,48,0.66); margin:10px 0 0; text-wrap:pretty; }
  .hu-foot{ margin:32px 0 0; font-size:14.5px; color:rgba(12,20,48,0.62); }
  .hu-foot a{ color:#2A48DE; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(42,72,222,0.35); }

  /* Meet GenUI Kit (dark band) */
  #hubKit{ position:relative; z-index:6; background:#050B1F; color:#fff; font-family:'Poppins',system-ui,sans-serif; }
  .hk-wrap{ max-width:1100px; padding:120px 44px; }
  @media (max-width:720px){ .hk-wrap{ padding:80px 22px; } }
  .hk-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
  @media (max-width:900px){ .hk-grid{ grid-template-columns:1fr; gap:34px; } }
  #hubKit .cl-sec-h{ color:#fff; }
  .hk-p{ font-size:15.5px; line-height:1.65; color:rgba(255,255,255,0.62); margin:18px 0 0; max-width:56ch; text-wrap:pretty; }
  .hk-cta{ text-align:left; margin-top:28px; }
  .hk-card{ border:1px solid rgba(94,134,255,0.3); border-radius:20px; background:linear-gradient(135deg, rgba(42,72,222,0.18), rgba(94,134,255,0.05)); padding:28px 30px; }
  .hk-card-l{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#9DB6F8; }
  .hk-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
  .hk-list li{ position:relative; padding-left:26px; font-size:14px; line-height:1.5; color:rgba(255,255,255,0.72); text-wrap:pretty; }
  .hk-list li::before{ content:''; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:rgba(94,134,255,0.18); }
  .hk-list li::after{ content:''; position:absolute; left:4px; top:7px; width:8px; height:4.5px; border-left:2px solid #9DB6F8; border-bottom:2px solid #9DB6F8; transform:rotate(-45deg); }

  /* hub FAQ shares the fq- system; section shell only */
  #hubFaq{ position:relative; z-index:7; background:linear-gradient(180deg,#eef3fc,#e2eaf8); color:#0c1430; font-family:'Poppins',system-ui,sans-serif; }

/* one-line hero: "the complete guide." must not wrap or overflow the copy column (Josh 2026-07-08) */
.cl-hero2 .cl-h{ font-size:clamp(30px,3.6vw,50px); }

/* Page-scoped fixes (Anja, 2026-07-10) — this stylesheet ships only on the hub
   page, so template cards are corrected here without touching the verticals. */
.hw-card{ transition:none; }
.hw-card:hover{ transform:none; border-color:rgba(12,20,48,0.09); box-shadow:none; }
.hw-card p{ font-size:15px; color:rgba(12,20,48,0.66); }
.hw-num{ font-size:12.5px; color:rgba(12,20,48,0.55); }

  /* ===== 2026-07-10 feedback round: nav CTA pill + per-section CTAs (Poppins,
     outlined-button + text-link mixture; rows clear the 99px wave overhang) ===== */
  .cl-nav-cta{ flex:none; font-family:'Poppins',system-ui,sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0; color:#fff; text-decoration:none; white-space:nowrap; padding:9px 17px; border-radius:999px; background:linear-gradient(145deg,#4F7CFF,#2A48DE); box-shadow:0 10px 22px -10px rgba(42,72,222,0.9); transition:filter .2s, transform .2s; }
  .cl-nav-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  @media (max-width:900px){ .cl-top-inner{ justify-content:space-between; } }
  .sec-cta-row{ position:relative; display:flex; justify-content:center; padding:0 24px 124px; margin-top:-20px; }
  .sec-cta{ display:inline-flex; align-items:center; gap:9px; font-family:'Poppins',system-ui,sans-serif; font-size:14.5px; font-weight:600; letter-spacing:-0.01em; text-decoration:none; color:#2A48DE; transition:color .2s; }
  .sec-cta svg{ width:15px; height:15px; flex:none; transition:transform .2s; }
  .sec-cta:hover svg{ transform:translateX(3px); }
  .sec-cta-btn{ padding:12px 24px; border-radius:999px; border:1px solid rgba(42,72,222,0.4); background:transparent; transition:border-color .2s, background .2s; }
  .sec-cta-btn:hover{ border-color:#2A48DE; background:rgba(42,72,222,0.05); }
  #clPick .sec-cta, #clTrust .sec-cta{ color:#BDCDFF; }
  #clPick .sec-cta:hover, #clTrust .sec-cta:hover{ color:#fff; }
  #clProof .sec-cta{ color:#fff; }
  #clProof .sec-cta-btn{ border-color:rgba(255,255,255,0.5); }
  #clProof .sec-cta-btn:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
  #clProof .sec-cta-row{ margin-top:-70px; padding-bottom:96px; }

/* ===== FAQ + glossary (light) ===== */
  #hubFaq{ position:relative; z-index:7; background:linear-gradient(180deg,#eef3fc,#e2eaf8); color:#0c1430; font-family:'Poppins',system-ui,sans-serif; }
  .fq-wrap{ max-width:880px; padding:110px 44px 120px; }
  @media (max-width:720px){ .fq-wrap{ padding:76px 22px 84px; } }
  #hubFaq .cl-sec-h{ text-align:center; }
  .fq-gloss{ margin-top:44px; background:#0A1530; border:1px solid rgba(94,134,255,0.2); border-radius:20px; padding:26px 30px 28px; box-shadow:0 30px 70px -34px rgba(5,11,31,0.55); }
  .fq-gloss-l{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:#9DB6F8; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.09); }
  .fq-dl{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin:18px 0 0; }
  @media (max-width:680px){ .fq-dl{ grid-template-columns:1fr; } }
  .fq-term dt{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.04em; color:#E7EDFF; }
  .fq-term dd{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,0.62); margin:4px 0 0; text-wrap:pretty; }
  .fq-list{ margin-top:26px; display:grid; gap:12px; }
  .fq-item{ background:#fff; border:1px solid rgba(12,20,48,0.08); border-radius:16px; box-shadow:0 14px 34px -24px rgba(12,20,48,0.3); overflow:hidden; }
  .fq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 24px; font-size:16px; font-weight:600; letter-spacing:-0.01em; color:#0c1430; text-wrap:pretty; }
  .fq-item summary::-webkit-details-marker{ display:none; }
  .fq-item summary::after{ content:''; flex:none; width:9px; height:9px; border-right:2px solid #2A48DE; border-bottom:2px solid #2A48DE; transform:rotate(45deg); transition:transform .2s; margin-top:-4px; }
  .fq-item[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
  .fq-a{ padding:0 24px 22px; }
  .fq-a p{ font-size:14.5px; line-height:1.65; color:rgba(12,20,48,0.68); margin:0; text-wrap:pretty; }
  .fq-a a{ color:#2A48DE; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(42,72,222,0.35); }
  .fq-a a:hover{ border-color:#2A48DE; }
  .fq-foot{ margin:30px 0 0; text-align:center; font-size:14.5px; color:rgba(12,20,48,0.62); }
  .fq-foot a{ color:#2A48DE; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(42,72,222,0.35); }


@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/fonts/jetbrains-mono-var.woff2') format('woff2'); }