/* ============================================================================
   FRACTA — chrome theme  (loaded AFTER style.css)

   Carries the intro's world into the site: void black, liquid-chrome mercury
   floating behind glass, silver type, one accent (cyan) reserved for live
   data. A layer, not a rewrite — every class, route and piece of copy in
   index.html is untouched, and deleting this file's <link> restores the old
   light site exactly.

   Rules this file holds to:
   · Chrome is a material, used sparingly: the background droplets, 1px bevel
     edges, the primary button, the hero headline. Nothing else is shiny.
   · Cyan means "live data" (score ring, ladder, live tags, ticks). Not decor.
   · Full-bleed: the content column goes to 1680px, sections breathe edge to
     edge, and headings sit left with copy opposite, like editorial spreads.
   · Same easing as the intro and the app: cubic-bezier(.22,.75,.28,1).
============================================================================ */

:root {
  color-scheme: dark;
  --cyan: #22d3ee;
  --cyan-dim: rgba(34, 211, 238, .35);
  --bg-0: #050608;
  --bg-1: #0b0d11;
  --bg-2: #111318;
  --bg-3: #171a20;
  --text-0: #f4f5f7;
  --text-1: rgba(244, 245, 247, .80);
  --text-2: rgba(244, 245, 247, .58);
  --text-3: rgba(244, 245, 247, .40);
  --success: #34d399;
  --warn: #fbbf24;
  --error: #f87171;

  --glass-bg: rgba(255, 255, 255, .035);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-bg-strong: rgba(255, 255, 255, .06);
  --hair: rgba(255, 255, 255, .12);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 50px rgba(0, 0, 0, .45);
  --pill-shadow: none;
  --pill-shadow-pressed: none;
  --pill-bg-selected: rgba(255, 255, 255, .1);
  --pill-shadow-selected: none;

  --ease: cubic-bezier(.22, .75, .28, 1);
  --panel: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  --bevel: linear-gradient(155deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .07) 28%, rgba(255, 255, 255, .025) 55%, rgba(255, 255, 255, .1) 78%, rgba(255, 255, 255, .26));
  --silver-text: linear-gradient(180deg, #ffffff 0%, #eef0f3 48%, #b3bac4 100%);
  --chrome-text: linear-gradient(180deg, #ffffff 0%, #f3f5f7 30%, #9aa2ae 50%, #eceef1 58%, #c3c8cf 78%, #ffffff 100%);
  --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

html, body { background: var(--bg-0); color: var(--text-0); font-family: var(--sans); }
/* body must be see-through: the backdrop layers sit at z-index -1, which paints
   under in-flow backgrounds — an opaque body would hide them. html keeps the
   colour. */
body { overflow-x: hidden; background: transparent; }
::selection { background: rgba(34, 211, 238, .28); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* the room: a soft pool of light at the top, falling off to void */
body::before {
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(120, 132, 150, .16) 0%, transparent 62%),
    radial-gradient(50% 40% at 100% 100%, rgba(34, 211, 238, .045) 0%, transparent 70%),
    var(--bg-0);
}
/* film grain, same as the intro — kills banding in the dark gradients */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* mercury backdrop (js/chrome-ambient.js) */
#mercury {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
}
#mercury.on { opacity: 1; }

/* ---------------------------------------------------------------------------
   LAYOUT — use the whole screen
--------------------------------------------------------------------------- */
.wrap { max-width: 1680px; padding: 0 clamp(20px, 4.4vw, 80px); }

/* ---------------------------------------------------------------------------
   NAV — a full-width glass bar, pinned
--------------------------------------------------------------------------- */
.wrap:has(> .nav) {
  position: sticky; top: 0; z-index: 40; max-width: none;
  background: linear-gradient(180deg, rgba(5, 6, 8, .78), rgba(5, 6, 8, .52));
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav { max-width: 1680px; margin: 0 auto; padding: 16px 0; }

.brand-mark {
  background: rgba(255, 255, 255, .03); color: var(--text-0);
  font-size: 13px; letter-spacing: .42em; padding: 10px 14px 10px 19px; border-radius: 10px;
}
.brand-mark::before { background: var(--bevel); }
/* the old rainbow sweep, now a single glint of light travelling round the edge */
.brand-mark::after {
  background: conic-gradient(from var(--logo-a), transparent 0 76%, rgba(255, 255, 255, .95) 86%, rgba(34, 211, 238, .6) 90%, transparent 96%);
  animation-duration: 5.5s;
}

.nav-links { gap: 2px; color: var(--text-2); }
.nav-links a {
  min-height: 40px; padding: 0 16px; background: transparent; border: 1px solid transparent;
  box-shadow: none; color: var(--text-2); font-weight: 500; font-size: 13px; letter-spacing: .02em;
  position: relative;
}
.nav-links a:hover { color: var(--text-0); }
.nav-links a:active { box-shadow: none; }
.nav-links a.on {
  color: var(--text-0); font-weight: 600; background: transparent; border-color: transparent; box-shadow: none;
}
/* current page: a short chrome hairline under the word, not a pressed pill */
.nav-links a[data-route].on::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
}
/* Sign in: the intro's glass ENTER button, small */
.nav-links a.nav-cta {
  margin-left: 12px; padding: 0 20px; color: var(--text-0); font-weight: 600;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)) border-box;
  border: 1px solid rgba(255, 255, 255, .17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(0, 0, 0, .4);
}
.nav-links a.nav-cta:hover { color: #fff; border-color: rgba(255, 255, 255, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px rgba(0, 0, 0, .4); }
.nav-links a.nav-cta.on::after { display: none; }

.nav-burger { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.nav-burger svg { stroke: var(--text-0); }
@media (max-width: 820px) {
  .nav { padding: 12px 0; }
  .nav-links {
    inset: 66px 0 auto; padding: 12px clamp(20px, 4.4vw, 80px) 22px;
    background: rgba(7, 8, 11, .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .nav-links a { min-height: 52px; font-size: 16px; border-radius: 14px; }
  .nav-links a[data-route].on { background: rgba(255, 255, 255, .06); }
  .nav-links a[data-route].on::after { display: none; }
  .nav-links a.nav-cta { margin: 10px 0 0; }
}

/* ---------------------------------------------------------------------------
   TYPE
--------------------------------------------------------------------------- */
/* Section headlines: silver, not full chrome — metal catching a little light */
.display {
  background: var(--silver-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Eyebrows take the intro's editorial voice: tracked caps behind a hairline */
.eyebrow,
.hero-dark .eyebrow,
.hero-showcase .eyebrow {
  background: none; border: 0; padding: 0; border-radius: 0; color: var(--text-2);
  font-size: 10.5px; font-weight: 600; letter-spacing: .34em; gap: 14px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: rgba(255, 255, 255, .28); }

/* ---------------------------------------------------------------------------
   GLASS PANELS + CHROME BEVEL
   One recipe for every surface: translucent panel, heavy blur (so the
   mercury behind smears into soft light), and a 1px bevel drawn with a masked
   pseudo-element. --mx/--my/--ml come from chrome-fx.js and put a spot of
   liquid light on the edge nearest the cursor.
--------------------------------------------------------------------------- */
.pcard, .pstat, .ladder, .glass { position: relative; }
.pcard, .pstat, .pbrand, .ladder, .glass, .hs-card, .pband, .fm-panel, .tier-card {
  border: 0;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(255, 255, 255, calc(.06 * var(--ml, 0))), transparent 65%),
    var(--panel);
  -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%);
  box-shadow: var(--shadow-card);
  color: var(--text-0);
}
.pcard::after, .pstat::after, .pbrand::after, .ladder::after, .glass::after, .hs-card::after, .pband::after, .fm-panel::after, .tier-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background:
    radial-gradient(180px circle at var(--mx, 50%) var(--my, -60%), rgba(255, 255, 255, calc(.95 * var(--ml, 0))), rgba(255, 255, 255, 0) 70%),
    var(--bevel);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pcard:hover, .pbrand:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 70px rgba(0, 0, 0, .55); }
.pcard h3, .psplit h3 { color: var(--text-0); letter-spacing: -.01em; }
.pcard p, .pbrand .pb-desc, .pstat .d { color: var(--text-2); }

/* icon chips: dark glass, icon drawn in its accent colour */
.pcard .pic, .pic.cy, .pic.vi, .pic.gd, .pic.or, .pic.gr {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 20px rgba(0, 0, 0, .35);
}
.pcard .pic svg { stroke: var(--text-0); }
.pic.cy svg { stroke: var(--cyan); }
.pic.vi svg { stroke: #b9a3ff; }
.pic.gd svg { stroke: #f5c044; }
.pic.or svg { stroke: #ff9a52; }
.pic.gr svg { stroke: #34d399; }
.pcard .pic.badge-pic { background: transparent; box-shadow: none; }
.pcard .pic.badge-pic img { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); }
.plat-ic.tiktok { color: #f4f5f7; }

/* ---------------------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; font-weight: 650; letter-spacing: .01em; }
/* primary = polished chrome. The one shiny control on any screen. */
.btn-primary,
.hero-dark .btn-primary, .hero-showcase .btn-primary, .pband .btn-primary, .fm-panel .btn-primary {
  color: #07080a;
  background: linear-gradient(180deg, #ffffff 0%, #eceef1 42%, #bfc5cd 54%, #e9ecef 76%, #fbfbfc 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 34px rgba(0, 0, 0, .55);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.btn-primary:hover::before, .btn-primary:focus-visible::before { transform: translateX(130%); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .35), 0 16px 40px rgba(0, 0, 0, .6); }
.btn-primary:disabled { opacity: .45; }

/* ghost = the intro's glass ENTER button */
.btn-ghost,
.hero-dark .btn-ghost, .hero-showcase .btn-ghost, .fm-panel .btn-ghost {
  color: var(--text-0);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .17);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 34px rgba(0, 0, 0, .45);
}
.btn-ghost:hover,
.hero-dark .btn-ghost:hover, .hero-showcase .btn-ghost:hover, .fm-panel .btn-ghost:hover {
  color: #fff; border-color: rgba(255, 255, 255, .36);
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04));
}
.btn-danger { background: #b3261e; color: #fff; }

/* ---------------------------------------------------------------------------
   FORMS
--------------------------------------------------------------------------- */
.input {
  background: rgba(255, 255, 255, .04); color: var(--text-0);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input:focus { border-color: rgba(34, 211, 238, .55); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 4px rgba(34, 211, 238, .12); }
.input::placeholder { color: var(--text-3); }
.input:-webkit-autofill { -webkit-text-fill-color: var(--text-0); -webkit-box-shadow: 0 0 0 100px #111318 inset; }

.role-chip {
  background: rgba(255, 255, 255, .035); color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; position: relative; overflow: hidden;
}
.role-chip:hover { color: var(--text-0); border-color: rgba(255, 255, 255, .22); }
.role-chip.active {
  color: var(--text-0); background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.fld > span { color: var(--text-1); }

/* ---------------------------------------------------------------------------
   HOME HERO — full screen, copy left, the phone as the focal object right
--------------------------------------------------------------------------- */
.hero-showcase {
  margin: 0; padding: clamp(40px, 6vh, 80px) 0 clamp(64px, 9vh, 110px);
  border-radius: 0; background: transparent;
  min-height: calc(100svh - 74px); display: grid; align-items: center;
}
.hero-showcase::before { background: radial-gradient(50% 60% at 78% 50%, rgba(160, 172, 190, .10) 0%, transparent 70%); }
.hero-showcase::after { display: none; }

.hs-grid { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 96px); }
.hs-copy h1 {
  font-size: clamp(64px, 9.6vw, 196px); line-height: .88; letter-spacing: .01em; margin: 26px 0 0;
  background: var(--chrome-text); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .55));
}
.hs-copy .lede { max-width: 46ch; margin-top: 28px; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: var(--text-2); }
.hero-btns { gap: 14px; margin-top: 38px; }
.hs-copy .hero-btns .btn { padding: 16px 30px; }

/* Show the scroll cue on the full-height hero (it was gated off before) */
.hs-cue {
  display: flex; position: absolute; left: 0; bottom: 26px; z-index: 4; flex-direction: row; align-items: center; gap: 14px;
  font-size: 10px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--text-3); pointer-events: none;
  animation: hsCueIn 1s var(--ease) 2.2s both;
}
.hs-cue span { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .5), transparent); }
@keyframes hsCueIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-height: 720px), (max-width: 900px) { .hs-cue { display: none; } }

/* the phone: bigger, titanium edge, lit from above */
.hs-stage { min-height: min(78svh, 720px); }
.hs-phone {
  /* capped by height too, so the whole phone is on screen on a laptop */
  width: min(340px, 78%, calc((100svh - 170px) * 9 / 19.5)); border-radius: 50px; padding: 11px;
  background: linear-gradient(180deg, #16181d, #07080a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 40px 90px rgba(0, 0, 0, .7), 0 10px 30px rgba(0, 0, 0, .5);
}
.hs-phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(160deg, #f2f4f7 0%, #8b93a0 14%, #2b2e35 34%, #15171b 55%, #6d7480 80%, #e7eaee 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.hs-screen { border-radius: 40px; padding: 26px 20px; background: #07080b; }
.hs-screen::before { top: 12px; width: 92px; height: 24px; }
.hs-top { margin-top: 28px; }
.hs-title { font-size: 17px; }
.hs-av, .hs-av img { width: 32px; height: 32px; }
.hs-ring { width: 170px; height: 170px; margin-top: 26px; }
.hs-ring .track { stroke: rgba(255, 255, 255, .07); stroke-width: 8; }
/* The glow was clipped by the SVG's own box, leaving a visible square edge.
   Letting the SVG overflow means the blur can fade all the way out. */
.hs-ring svg { overflow: visible; }
.hs-ring .fill { stroke-width: 8; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .5)) drop-shadow(0 0 22px rgba(34, 211, 238, .22)); }
.hs-ring-val { font-size: 40px; background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-ring-lab { font-size: 8.5px; color: var(--text-2); }
.hs-rows { margin-top: 28px; gap: 11px; }
.hs-row { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .045); }

/* floating notifications: glass with a bevel, the cyan kept for the icon */
.hs-card {
  border-radius: 16px; padding: 12px 18px 12px 12px;
  background: linear-gradient(180deg, rgba(24, 26, 32, .72), rgba(14, 15, 19, .62));
}
.hs-card .ci { width: 34px; height: 34px; background: rgba(34, 211, 238, .1); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .22); }
.hs-card .ct { font-size: 13px; display: block; }
.hs-card .cs { font-size: 11px; color: var(--text-2); display: block; }
.hs-card.c1 { top: 10%; left: 2%; }
.hs-card.c2 { top: 46%; right: 0; }
.hs-card.c3 { bottom: 11%; left: 5%; }

@media (max-width: 900px) {
  .hero-showcase { min-height: 0; padding-top: 34px; }
  .hs-grid { grid-template-columns: 1fr; }
  .hs-copy { text-align: left; }
  .hs-copy .lede { margin-inline: 0; }
  .hs-copy .hero-btns { justify-content: flex-start; }
  .hs-stage { min-height: 560px; }
  .hs-phone { width: min(300px, 74%); }
}
@media (max-width: 520px) {
  .hs-copy h1 { font-size: clamp(56px, 17vw, 88px); }
  .hs-card.c1 { left: -2%; } .hs-card.c2 { right: -3%; } .hs-card.c3 { left: 0; }
}

/* ---------------------------------------------------------------------------
   SUB-PAGE HEROES — no box. Big left-set headline on the open canvas.
--------------------------------------------------------------------------- */
.hero-dark {
  margin: 0; border-radius: 0; background: transparent; text-align: left;
  min-height: min(64svh, 640px); display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(80px, 14vh, 160px) 0 clamp(48px, 8vh, 90px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.hero-dark::before { background: radial-gradient(60% 70% at 85% 30%, rgba(160, 172, 190, .09) 0%, transparent 70%); }
.hero-dark.tv::before { background: radial-gradient(60% 70% at 85% 30%, rgba(155, 92, 255, .12) 0%, transparent 70%); }
.hero-dark::after { display: none; }
.hero-dark h1 {
  font-size: clamp(56px, 8.4vw, 168px); line-height: .9; margin: 0;
  background: var(--chrome-text); -webkit-background-clip: text; background-clip: text;
}
.hero-dark .lede { margin: 30px 0 0; max-width: 54ch; font-size: clamp(16px, 1.35vw, 20px); color: var(--text-2); }
.hero-dark .hero-btns { justify-content: flex-start; }

/* ---------------------------------------------------------------------------
   SECTIONS — editorial spreads on wide screens
   Eyebrow across the top, headline left, copy right.
--------------------------------------------------------------------------- */
.psec { padding: clamp(72px, 11vh, 140px) 0; }
.psec[style*="padding-top:0"] { padding-top: clamp(24px, 4vh, 60px) !important; }
@media (min-width: 1000px) {
  .psec-head {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(40px, 6vw, 120px); align-items: start;
  }
  .psec-head > .eyebrow { grid-column: 1 / -1; justify-self: start; margin-bottom: 22px; }
  .psec-head > h2 { grid-column: 1; grid-row: span 4; }
  .psec-head > p, .psec-head > .hero-btns { grid-column: 2; margin-top: 0; margin-bottom: 14px; }
  .psec-head > p + p { margin-top: 0; }
}
.psec-head h2 { font-size: clamp(40px, 5.4vw, 104px); line-height: .92; margin-top: 0; }
.psec-head p { font-size: clamp(15.5px, 1.1vw, 18px); line-height: 1.7; color: var(--text-2); }
.psec-head p em { color: var(--text-0); }
.psec-head.mid { text-align: left; margin: 0; }

.pgrid { gap: 18px; margin-top: clamp(40px, 6vh, 72px); }
.pcard { padding: 30px; border-radius: var(--radius-lg); }
.pcard h3 { font-size: 18px; }
.pcard p { font-size: 14.5px; }

/* feature splits: wider gap, bigger phones */
.psplit { gap: clamp(40px, 7vw, 140px); margin-top: clamp(40px, 6vh, 72px); }
.psplit h3 { font-size: clamp(26px, 2.4vw, 40px); letter-spacing: -.02em; }
.psplit p { font-size: clamp(15.5px, 1.1vw, 18px); color: var(--text-2); max-width: 56ch; }
.psplit li { font-size: 15px; color: var(--text-1); }
.psplit li strong { color: var(--text-0); }
.psplit li svg { stroke: var(--cyan); }
.psplit li:hover svg { filter: drop-shadow(0 0 6px rgba(34, 211, 238, .7)); }
.psplit li em { color: var(--text-3); }
.soon-dot { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.soon-dot::after { background: var(--text-3); }

.phone { width: min(360px, 82%); border-radius: 50px; padding: 11px; background: #07080a; position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 40px 90px rgba(0, 0, 0, .65); }
.phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(160deg, #eef1f4 0%, #8b93a0 14%, #2b2e35 34%, #15171b 55%, #6d7480 80%, #e3e6ea 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.phone-in { border-radius: 40px; }

/* stats: numbers in silver; they light up cyan when you look at them */
.pstats { gap: 18px; margin-top: clamp(40px, 6vh, 72px); }
.pstat { padding: 30px; border-radius: var(--radius-lg); transition: transform .3s var(--ease), box-shadow .3s ease; }
.pstat .k { color: var(--text-3); letter-spacing: .24em; font-weight: 600; }
.pstat .v {
  font-size: clamp(56px, 5vw, 88px); background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter .35s ease;
}
.pstat:hover { transform: translateY(-3px); }
.pstat:hover .v { background: linear-gradient(180deg, #ffffff 0%, #a5f3fc 55%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(34, 211, 238, .35)); }

/* sub-brands */
.pbrands { gap: 18px; margin-top: clamp(40px, 6vh, 72px); }
.pbrand { padding: 30px 26px; border-radius: var(--radius-lg); }
.pbrand .pb-name { font-size: 28px; background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pbrand .pb-accent { top: -1px; height: 2px; z-index: 4; }
.pbrand .pb-tag, .plat-tag, .soon-tag { background: rgba(255, 255, 255, .07); color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pbrand .pb-tag.live, .plat-tag.live { background: rgba(34, 211, 238, .1); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .25); }
.pcard.plat.soon:hover { box-shadow: var(--shadow-card); }
.plat-go { color: var(--text-1); }

.pf-note { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .09); color: var(--text-2); }
.pf-note .soon-tag { background: rgba(251, 191, 36, .1); color: #fbbf24; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .25); }
.psrc, .psrc a { color: var(--text-3); }
.psrc a:hover { color: var(--text-0); }

/* rank ladder: dark rail, the product colours kept */
.ladder { padding: 34px 32px 28px; border-radius: var(--radius-lg); }
.ladder-rank { font-size: clamp(38px, 3.4vw, 56px); }
.ladder-score { color: var(--text-2); font-weight: 600; }
.ladder-bar { height: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.ladder-bar > i { box-shadow: 0 0 18px rgba(255, 255, 255, .12); }
.ladder-tick { color: var(--text-3); font-weight: 600; letter-spacing: .18em; }
.ladder-tick.hit { color: var(--text-0); }

/* Chrome rank badges on the ladder. Each sits above its label, dimmed until the
   bar reaches it, then lights up — same moment the label turns white. */
.ladder-ticks { align-items: flex-start; margin-top: 14px; }
.ladder-tick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 15%; text-align: center;
}
.ladder-tick:first-child { align-items: flex-start; text-align: left; }
.ladder-tick:last-child  { align-items: flex-end;   text-align: right; }
.ladder-tick b { font: inherit; }
.ladder-tick img {
  width: 46px; height: 46px; object-fit: contain; display: block;
  opacity: .28; filter: grayscale(1) brightness(.7);
  transform: scale(.88);
  transition: opacity .5s ease, filter .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.3);
}
.ladder-tick.hit img {
  opacity: 1; filter: grayscale(0) drop-shadow(0 4px 10px rgba(0,0,0,.6));
  transform: scale(1);
}

/* Phones: six labels in a row don't fit, so the badges carry it and the
   names go — the big rank word above already says where you are. */
@media (max-width: 560px) {
  .ladder { padding: 24px 18px 20px; }
  .ladder-tick b { display: none; }
  .ladder-tick img { width: 38px; height: 38px; }
  .ladder-note { font-size: 12px; }
}
.ladder-note { color: var(--text-2); }

/* ---------------------------------------------------------------------------
   WAITLIST + FOUNDING — two wide panels right under the hero
--------------------------------------------------------------------------- */
#waitlist .hero { padding: 0 0 clamp(40px, 6vh, 80px) !important; text-align: left; }
.hero-cards { max-width: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.waitlist-card, .founding-teaser-card { padding: clamp(28px, 3vw, 44px); border-radius: var(--radius-lg); }
.hero-cards .waitlist-card .input { padding: 17px 20px; font-size: 16px; border-radius: 999px; }
.hero-cards .waitlist-card .btn { padding: 16px 30px; }
.role-select { justify-content: flex-start; margin-top: 16px; }
.count-line { color: var(--text-3); }
.founding-teaser-card h3 { font-size: clamp(22px, 1.8vw, 30px); letter-spacing: -.02em; color: var(--text-0); }
.founding-teaser-card p { color: var(--text-2); font-size: 15px; }
.founding-badges-row img { width: 54px; height: 54px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); }
.founding-badges-row .badges-caption { color: var(--text-3); letter-spacing: .06em; }
.form-msg.ok { color: var(--success); }
.form-msg.err { color: var(--error); }
@media (max-width: 800px) { .hero-cards { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   FOUNDING TIERS
--------------------------------------------------------------------------- */
.tier-grid { gap: 18px; }
.tier-card { padding: 34px 28px; border-radius: var(--radius-lg); }
.tier-card::before {
  background: conic-gradient(from var(--logo-a, 0deg), transparent 0 70%, rgba(255, 255, 255, .95) 84%, rgba(34, 211, 238, .75) 90%, transparent 97%);
}
.tier-card:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.tier-card.featured { box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12); }
.tier-badge {
  color: #07080a; background: linear-gradient(180deg, #fff, #cfd4da 55%, #f4f5f7);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), 0 6px 16px rgba(0, 0, 0, .4);
}
.tier-badge-img { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }
.tier-name { color: var(--text-0); }
.tier-price { color: var(--text-0); font-size: 44px; letter-spacing: -.02em; }
.tier-price span, .tier-blurb { color: var(--text-2); }
.tier-perks li { color: var(--text-1); border-top-color: rgba(255, 255, 255, .07); }
.tier-perks li::before, .modal-pro-list li::before { color: var(--cyan); }
.tier-avail { color: var(--text-3); }
.tier-avail strong { color: var(--text-0); }
.tier-card.tier-locked .btn { background: rgba(255, 255, 255, .08); color: var(--text-3); box-shadow: none; }
.tier-state { background: rgba(255, 255, 255, .05); color: var(--text-2); }
.tier-state-mine { background: rgba(52, 211, 153, .1); color: #34d399; }
.tier-card.tier-mine .btn, .tier-badge-mine { background: #0f7a3d; color: #fff; }

.notice { background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .25); color: #fbbf24; }

/* ---------------------------------------------------------------------------
   CTA BAND + FOOTER
--------------------------------------------------------------------------- */
.pband { border-radius: 32px; padding: clamp(56px, 9vh, 110px) clamp(24px, 5vw, 80px); }
.pband::before { background: radial-gradient(60% 90% at 50% -10%, rgba(200, 210, 225, .14) 0%, transparent 60%), radial-gradient(40% 60% at 50% 120%, rgba(34, 211, 238, .08) 0%, transparent 70%); }
.pband h2 { font-size: clamp(48px, 7vw, 132px); background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; }
.pband p { color: var(--text-2); font-size: clamp(15.5px, 1.2vw, 19px); }

.footer { color: var(--text-3); padding: 56px 0 70px; border-top: 1px solid rgba(255, 255, 255, .06); margin-top: 20px; letter-spacing: .02em; }
.footer > div:first-child { color: var(--text-2); letter-spacing: .3em; text-transform: uppercase; font-size: 11px; }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--text-0); }

/* ---------------------------------------------------------------------------
   MODAL, ACCOUNT, SUCCESS, LEGAL — token flip covers most; these are the
   hard-coded light bits.
--------------------------------------------------------------------------- */
.modal-backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.modal { background: linear-gradient(180deg, rgba(22, 24, 30, .96), rgba(12, 13, 17, .96)); }
.modal-close { color: var(--text-2); }
#checkout-stripe-mount { border-radius: 14px; overflow: hidden; }
.co-v, .ac-v, .ac-purchase-tier, .ac-purchase-num { color: var(--text-0); }
.ac-purchase, .tfa-codes-panel { background: rgba(255, 255, 255, .035); }
.tfa-secret, .tfa-codes li, #panel-broadcast code { background: rgba(255, 255, 255, .06); color: var(--text-0); }
.claim-panel { background: rgba(34, 211, 238, .05); border-color: rgba(34, 211, 238, .22); }
.danger-details { background: rgba(248, 113, 113, .04); border-color: rgba(248, 113, 113, .25); }
.danger-details > summary { color: #f87171; }
.legal p, .legal li { color: var(--text-1); }
.legal a { color: var(--text-0); }
.fm-panel { margin: 0; border-radius: 32px; }
.fm-number { background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 40px rgba(34, 211, 238, .2)); }
.skip-link { background: #f4f5f7; color: #07080a; }
.pill.resolved { color: var(--text-2); background: rgba(255, 255, 255, .07); }

/* ---------------------------------------------------------------------------
   MERCURY RIPPLE (js/chrome-fx.js)
--------------------------------------------------------------------------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.fx-ring {
  position: absolute; border-radius: 50%; will-change: transform, opacity;
  border: 1.5px solid rgba(255, 255, 255, .8);
  background: radial-gradient(circle, transparent 55%, rgba(255, 255, 255, .12) 70%, transparent 72%);
  box-shadow: 0 0 18px rgba(255, 255, 255, .25), inset 0 0 12px rgba(200, 220, 235, .25);
}
.fx-drop {
  position: absolute; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e2e6eb 22%, #8a929e 55%, #25282e 85%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------------------
   Scrollbar
--------------------------------------------------------------------------- */
html { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 10px; border: 3px solid var(--bg-0); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before { display: none; }
  #mercury { transition: none; }
}