/* ============================================================================
   #clShift — GenUI multiplatform section. Self-contained port from the GenUI
   "carve" (astro/public/resources/genui/exp.css). Every rule below is copied
   verbatim from that file; only the enclosing comments and the dropping of
   other-section rules differ. See the report for what was intentionally left out.

   SELF-CONTAINED BACKGROUND: on the source page #clShift already carries its own
   light background (line 795 of exp.css) — a top-to-bottom light gradient. It is
   preserved here so the section reads correctly when dropped between light
   sections on another page. The source's mobile (<=760px) override that flipped
   the section to dark navy (because the dark #clPick above it is hidden there)
   is intentionally NOT ported — that context does not exist on the target page.
   ========================================================================== */

/* ============================================================================
   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)}

/* ============================================================================
   Greeting header + compact module sizing — composed FROM kit primitives.
   (Used by the phone surface's generated screen.)
   ========================================================================== */
.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)); }

/* 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%); } }

/* ============================================================================
   #clShift — section chrome + device stage. Verbatim from exp.css.
   ========================================================================== */
#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:'Poppins',system-ui,sans-serif; font-weight:600; font-size:12px; letter-spacing:0.2em; 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; }

/* 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:'Poppins',system-ui,sans-serif; 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 — JS toggles #clShift.is-in via IntersectionObserver */
#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; } }

/* section marquee — display-scale two-line headline. Must come AFTER .cl-sec-h so
   its font-size override wins (source cascade order preserved). */
.cl-marquee{ font-size:clamp(32px,4.6vw,56px); line-height:1.05; letter-spacing:-0.03em; }
.cl-marquee span{ display:block; }