/* ============================================================================
   VERA v4 — "REFERENCE DARK" design system
   Built to match Gage's reference shot 1:1 in language:
   charcoal canvas · flat nav · silver-gradient grotesque headline ·
   Whop-style product cards with real thumbnail art · vera-blue pill as
   THE money CTA.

   LAWS:
   1. One vera-blue money CTA per viewport. Primary buttons are white pills.
   2. Money is server-rendered static text. [data-price] NEVER animates.
   3. Vivid color lives on the CARDS, not the shell.
   4. Never a bare number: every stat carries denominator + source link.
   5. Quiescence after entrance.
   Skin history: light-v4 / arcade-light / framer-light .bak.css
   ========================================================================== */

/* ── FONTS ───────────────────────────────────────────────────────────────── */
@font-face{font-family:"Clash Display";src:url("fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Clash Display";src:url("fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist Fallback";src:local("Arial");
  size-adjust:101%;ascent-override:95%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:"Clash Fallback";src:local("Arial Bold"),local("Arial");
  size-adjust:104%;ascent-override:96%;descent-override:22%;line-gap-override:0%;}

:root{
  color-scheme:dark;

  /* ── Ink (light on charcoal) ──────────────────────────────────────────── */
  --ink-1:#F5F6F8; --ink-2:#B9BFC9; --ink-3:#8B929E; --ink-4:#5E646E;

  /* ── Surfaces — charcoal, not pure black ──────────────────────────────── */
  --page-bg:#111214; --surface:#18191D; --surface-2:#141518; --surface-3:#1E2025;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --divider:rgba(255,255,255,.08);

  /* ── VERA BLUE — THE money color (#7DD3FF, the owner's exact hue). ─────── */
  --vera:#7DD3FF; --vera-hover:#9BDFFF; --vera-ink:#08131C;
  --vera-tint:rgba(125,211,255,.1); --vera-tint-bd:rgba(125,211,255,.3);
  /* legacy alias so templates using accent-warm still render the money color */
  --accent-warm:var(--vera); --accent-warm-hover:var(--vera-hover);
  --accent-warm-ink:var(--vera-ink);
  --accent-warm-tint:var(--vera-tint); --accent-warm-tint-bd:var(--vera-tint-bd);

  /* ── Brand blue (links, live dots) ────────────────────────────────────── */
  --brand:#7DD3FF; --brand-rgb:125,211,255;
  --brand-fill:#2E9FE6; --brand-hover:#54B4F0; --brand-active:#1E8BD2;
  --brand-ink:#08131C; --brand-link:#8FD4FF;
  --brand-tint:rgba(125,211,255,.1); --brand-tint-bd:rgba(125,211,255,.28);
  --brand-on-tint:#A8DEFF;

  --green-light:#4ADE80; --green-light-ink:#86EFAC; --live:#4ADE80;

  /* ── Dark media wells ─────────────────────────────────────────────────── */
  --win-bg-0:#0B0C0F; --win-bg-1:#08090B; --win-ink:#E9EDF2; --win-ink-dim:#9AA5B4;
  --win-border:rgba(255,255,255,.08); --win-bar:#101116;
  --dark-bg:#0C0D10; --dark-surface:#141518; --dark-ink:#E9EDF2;
  --dark-ink-dim:#9AA5B4; --dark-border:rgba(255,255,255,.08);

  /* ── Per-product accents (card-vivid) + dark washes ───────────────────── */
  --acc-demon:#F0484E;      --acc-vortex:#20B8E8;
  --acc-fadeaway:#8B67FF;   --acc-plus:#EFBF3A;
  --acc-breach:#F07D34;     --acc-r6-breach:#F07D34;
  --acc-r6-bastion:#2BC0CC; --acc-rust-outpost:#3ECF7A;
  --acc-apex-ascend:#F0559A;--acc-rewind:#8BA3C7;
  --acc-demon-bd:rgba(240,72,78,.4);       --acc-demon-wash:color-mix(in oklab,#F0484E 16%,#18191D);
  --acc-vortex-bd:rgba(32,184,232,.4);     --acc-vortex-wash:color-mix(in oklab,#20B8E8 16%,#18191D);
  --acc-fadeaway-bd:rgba(139,103,255,.4);  --acc-fadeaway-wash:color-mix(in oklab,#8B67FF 16%,#18191D);
  --acc-plus-bd:rgba(239,191,58,.45);      --acc-plus-wash:color-mix(in oklab,#EFBF3A 14%,#18191D);
  --acc-breach-bd:rgba(240,125,52,.4);     --acc-breach-wash:color-mix(in oklab,#F07D34 16%,#18191D);
  --acc-r6-breach-bd:rgba(240,125,52,.4);  --acc-r6-breach-wash:color-mix(in oklab,#F07D34 16%,#18191D);
  --acc-r6-bastion-bd:rgba(43,192,204,.4); --acc-r6-bastion-wash:color-mix(in oklab,#2BC0CC 16%,#18191D);
  --acc-rust-outpost-bd:rgba(62,207,122,.4);--acc-rust-outpost-wash:color-mix(in oklab,#3ECF7A 16%,#18191D);
  --acc-apex-ascend-bd:rgba(240,85,154,.4);--acc-apex-ascend-wash:color-mix(in oklab,#F0559A 16%,#18191D);
  --acc-rewind-bd:rgba(139,163,199,.4);    --acc-rewind-wash:color-mix(in oklab,#8BA3C7 16%,#18191D);

  --accent:var(--brand-fill); --accent-bd:var(--brand-tint-bd); --accent-wash:var(--brand-tint);

  /* ── Fonts ────────────────────────────────────────────────────────────── */
  --font-body:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:var(--font-body);
  --font-poster:var(--font-body);
  --font-stat:var(--font-body);
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-wordmark:"Clash Display","Clash Fallback",system-ui,sans-serif;

  /* ── Type scale ───────────────────────────────────────────────────────── */
  --fs-hero:clamp(44px,6vw,84px);
  --fs-h2:clamp(28px,3.4vw,44px);
  --fs-h3:clamp(22px,2.4vw,30px);
  --fs-body-lg:18px; --fs-body:15px; --fs-body-sm:13.5px;
  --track-tight:-0.028em; --lh-hero:1.04;

  --fs-poster:var(--fs-hero); --fs-poster-sm:clamp(32px,3.8vw,52px);
  --fs-display-lg:clamp(38px,4.6vw,64px); --fs-display-md:var(--fs-h2);
  --fs-display-sm:var(--fs-h3);
  --fs-mono:12.5px; --fs-mono-sm:11px; --track-upper:.08em;

  /* ── Space / radius / layout ──────────────────────────────────────────── */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;
  --s-8:64px;--s-9:80px;--s-10:104px;--s-11:136px;
  --radius-sm:8px;--radius-md:10px;--radius-lg:14px;--radius-xl:16px;
  --radius-2xl:22px;--radius-full:999px;
  --content-max:1120px; --content-wide:1280px; --gutter:clamp(20px,4vw,48px);

  /* ── Depth ────────────────────────────────────────────────────────────── */
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-card:0 2px 8px rgba(0,0,0,.35);
  --shadow-card-hover:0 8px 24px rgba(0,0,0,.5);
  --shadow-float:0 20px 48px -12px rgba(0,0,0,.55);
  --shadow-window:0 28px 64px -18px rgba(0,0,0,.65);
  --shadow-pop:0 16px 40px -12px rgba(0,0,0,.6);
  --sheen:none; --win-sheen:none;

  --ring-focus:0 0 0 3px rgba(125,211,255,.4);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-entrance:cubic-bezier(.16,1,.3,1);
  --ease-nav:cubic-bezier(.4,0,.2,1);
  --dur-snap:.12s;--dur-fast:.2s;--dur-base:.35s;--dur-slow:.7s;--stagger:40ms;
}

/* per-product accent cascade */
body[data-product="demon"]       {--accent:var(--acc-demon);       --accent-bd:var(--acc-demon-bd);       --accent-wash:var(--acc-demon-wash);}
body[data-product="fadeaway"]    {--accent:var(--acc-fadeaway);    --accent-bd:var(--acc-fadeaway-bd);    --accent-wash:var(--acc-fadeaway-wash);}
body[data-product="vortex"]      {--accent:var(--acc-vortex);      --accent-bd:var(--acc-vortex-bd);      --accent-wash:var(--acc-vortex-wash);}
body[data-product="vera-plus"]   {--accent:var(--acc-plus);        --accent-bd:var(--acc-plus-bd);        --accent-wash:var(--acc-plus-wash);}
body[data-product="breach"]      {--accent:var(--acc-breach);      --accent-bd:var(--acc-breach-bd);      --accent-wash:var(--acc-breach-wash);}
body[data-product="r6-breach"]   {--accent:var(--acc-r6-breach);   --accent-bd:var(--acc-r6-breach-bd);   --accent-wash:var(--acc-r6-breach-wash);}
body[data-product="r6-bastion"]  {--accent:var(--acc-r6-bastion);  --accent-bd:var(--acc-r6-bastion-bd);  --accent-wash:var(--acc-r6-bastion-wash);}
body[data-product="rust-outpost"]{--accent:var(--acc-rust-outpost);--accent-bd:var(--acc-rust-outpost-bd);--accent-wash:var(--acc-rust-outpost-wash);}
body[data-product="apex-ascend"] {--accent:var(--acc-apex-ascend); --accent-bd:var(--acc-apex-ascend-bd); --accent-wash:var(--acc-apex-ascend-wash);}
body[data-product="rewind"]      {--accent:var(--acc-rewind);      --accent-bd:var(--acc-rewind-bd);      --accent-wash:var(--acc-rewind-wash);}

/* ============================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{color:var(--ink-1);
  background:
    radial-gradient(1100px 640px at 50% -180px,rgba(125,211,255,.075),transparent 62%),
    radial-gradient(900px 600px at 88% 8%,rgba(125,211,255,.045),transparent 60%),
    var(--page-bg);
  font-family:var(--font-body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;position:relative;}
/* fixed ambient layer — soft corner washes + vignette that persist on scroll */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 700px at 106% 12%,rgba(125,211,255,.05),transparent 58%),
    radial-gradient(950px 720px at -6% 78%,rgba(139,103,255,.055),transparent 58%),
    radial-gradient(1300px 900px at 50% 115%,rgba(125,211,255,.035),transparent 62%),
    radial-gradient(140% 120% at 50% 45%,transparent 55%,rgba(0,0,0,.32) 100%);}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img,svg,video{display:block;max-width:100%;}
::selection{background:var(--vera);color:var(--vera-ink);}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--vera);outline-offset:2px;border-radius:var(--radius-sm);}

.skip-link{position:absolute;top:-48px;left:0;padding:8px 16px;background:var(--ink-1);
  color:var(--page-bg);z-index:1000;font-size:12px;border-radius:0 0 var(--radius-sm) 0;}
.skip-link:focus{top:0;}

.wrap{max-width:var(--content-max);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);}
.wrap-wide{max-width:var(--content-wide);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);}

/* ============================================================================
   TYPE
   ========================================================================== */
.poster{font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--track-tight);
  color:var(--ink-1);text-transform:none;}
.poster-sm{font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-poster-sm);line-height:1.12;letter-spacing:var(--track-tight);
  color:var(--ink-1);text-transform:none;}
/* silver gradient text — the reference headline finish */
.grad-silver{background:linear-gradient(180deg,#FFFFFF 18%,#C7CCD6 60%,#9BA1AC);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

.poster .hl,.poster-sm .hl{color:var(--vera);}
.poster .hl-brand,.poster-sm .hl-brand{color:var(--brand);}

h1,.h1{font-family:var(--font-body);font-weight:600;font-size:var(--fs-display-lg);
  line-height:1.06;letter-spacing:var(--track-tight);}
h2,.h2{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h2);
  line-height:1.12;letter-spacing:-.02em;}
h3,.h3{font-family:var(--font-body);font-weight:600;font-size:19px;line-height:1.4;}
.sub{color:var(--ink-2);font-size:var(--fs-body-lg);line-height:1.65;max-width:56ch;}
.sub strong{color:var(--ink-1);font-weight:600;}
.mono{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.5;}
.stat-num{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

.wm{font-family:var(--font-wordmark);font-weight:700;letter-spacing:-.015em;color:var(--ink-1);}
.wm .sfx{color:var(--accent);}

/* eyebrow — vera lead + quiet tail (reference: "Early Access — Build Your Identity") */
.kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);}
.kick::before{display:none;}
.kick .idx{color:var(--vera);font-weight:500;}
.kick .d{display:none;}

/* ============================================================================
   TEXTURE — faint radial guides + sparse stars (reference backdrop)
   ========================================================================== */
.tex-grid{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px),
    radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px);
  background-size:420px 380px,300px 260px;
  background-position:40px 60px,170px 130px;
  -webkit-mask-image:radial-gradient(110% 85% at 50% 0%,#000 25%,transparent 75%);
          mask-image:radial-gradient(110% 85% at 50% 0%,#000 25%,transparent 75%);}
.tex-floor{display:none;}
.tex-grain{display:none;}
.tex-bloom{position:absolute;width:min(900px,92vw);aspect-ratio:1.7;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.05) 0%,transparent 70%);}
.tex-contour{display:none;}
.f3d{display:none !important;}

/* ============================================================================
   BUTTONS — pills. White = primary, lime = money, ghost = outline.
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;font-family:var(--font-body);font-size:15px;font-weight:500;
  border-radius:var(--radius-full);white-space:nowrap;position:relative;
  transition:transform var(--dur-fast) var(--ease-nav),box-shadow var(--dur-fast),
    background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);}
.btn:focus-visible{outline:none;box-shadow:var(--ring-focus);}
.btn-lg{padding:16px 30px;font-size:16px;}
.btn-sm{padding:8px 16px;font-size:14px;}

/* money CTA — vera-blue gradient pill, white text (reference "Get started ›") */
.btn-coral{background:linear-gradient(100deg,#6FC9FF 0%,#2E9FE6 58%,#1E8BD2 100%);
  color:#FFFFFF;font-weight:600;box-shadow:var(--shadow-xs);}
.btn-coral:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-card);}
.btn-coral .chev{font-size:1.05em;font-weight:700;line-height:1;margin:0 -4px 1px 0;}
.btn-coral .sub-price{font-weight:500;opacity:.85;font-size:.94em;}

/* primary — white pill (reference "Contact") */
.btn-primary{background:#FFFFFF;color:#101114;box-shadow:var(--shadow-xs);}
.btn-primary:hover{background:#E9EBEF;transform:translateY(-1px);box-shadow:var(--shadow-card);}

.btn-ghost{background:rgba(255,255,255,.02);color:#FFFFFF;
  border:1px solid rgba(255,255,255,.22);}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);
  transform:translateY(-1px);}

.btn-accent{background:#FFFFFF;color:#101114;box-shadow:var(--shadow-xs);}
.btn-accent:hover{background:#E9EBEF;transform:translateY(-1px);box-shadow:var(--shadow-card);}

@media (pointer:coarse){.btn{min-height:44px;}}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}


/* ============================================================================
   CHIPS / STATS
   ========================================================================== */
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border-radius:var(--radius-full);font-family:var(--font-body);font-size:13px;
  font-weight:500;background:rgba(255,255,255,.05);color:var(--ink-2);
  border:1px solid var(--border);}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;}
.chip.live .d{background:var(--live);}

.tchip{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font-body);
  font-size:13.5px;font-weight:400;color:var(--ink-3);}
.tchip .v{font-weight:600;font-size:14.5px;color:var(--ink-1);}
.tchip a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);
  text-underline-offset:3px;}
.tchip a:hover{color:var(--brand-link);text-decoration-color:var(--brand-link);}
.tchip .star{color:#F5A623;}

/* stat band — clean numbers row with hairline dividers */
.stat-card{position:relative;background:none;border-radius:0;padding:6px 28px;
  box-shadow:none;display:flex;flex-direction:column;gap:4px;color:var(--ink-1);
  border-left:1px solid var(--border);}
.stat-card:first-child{border-left:none;padding-left:0;}
.stat-card::after{display:none;}
.stat-card .n{font-weight:600;font-size:clamp(26px,2.8vw,36px);line-height:1.15;
  letter-spacing:-.02em;color:var(--ink-1);}
.stat-card .n .star{color:#F5A623;font-size:.7em;vertical-align:.12em;margin-right:2px;}
.stat-card .l{font-size:13px;color:var(--ink-3);line-height:1.45;}
.stat-card .l a{color:var(--ink-3);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px;}
.stat-card .l a:hover{color:var(--brand-link);}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:var(--radius-full);font-size:11.5px;
  font-weight:600;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap;}
.badge-live{display:none;}
.badge-included{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1);color:#86EFAC;}
.badge-free{border-color:var(--brand-tint-bd);background:var(--brand-tint);color:var(--brand-on-tint);}
.badge-soon{border-color:rgba(245,166,35,.35);background:rgba(245,166,35,.1);color:#FCD34D;}

/* ============================================================================
   CLIP — rounded media, hairline, deep shadow
   ========================================================================== */
.clip{position:relative;border-radius:var(--radius-xl);overflow:hidden;
  background:#0B0C0F;aspect-ratio:16/9;
  box-shadow:var(--shadow-window);border:1px solid rgba(255,255,255,.1);}
.clip>video,.clip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.clip .pill{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;
  align-items:center;gap:7px;padding:5px 11px;border-radius:var(--radius-full);
  background:rgba(8,10,16,.66);backdrop-filter:blur(8px);
  font-size:11.5px;font-weight:500;letter-spacing:.04em;color:#fff;
  border:1px solid rgba(255,255,255,.12);}
.clip .pill .d{width:6px;height:6px;border-radius:50%;background:var(--live);}
.clip.plate-mode{background:linear-gradient(150deg,var(--accent-wash),var(--surface) 130%);
  border:1px solid var(--accent-bd);box-shadow:var(--shadow-card);}

/* ============================================================================
   PRODUCT CARD — marketplace card (reference: Whop storefront)
   full-bleed art / icon + verified name + by-line / desc / Get access
   ========================================================================== */
.pcard{position:relative;display:flex;flex-direction:column;min-width:0;
  border-radius:18px;background:var(--surface);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  transition:transform var(--dur-fast) var(--ease-entrance),box-shadow var(--dur-fast),
    border-color var(--dur-fast);}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);
  border-color:var(--border-strong);}
.pc-art{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-3);}
.pc-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-base) var(--ease-entrance);}
.pcard:hover .pc-art img{transform:scale(1.03);}
.pc-body{display:flex;flex-direction:column;gap:11px;padding:15px 17px 17px;}
.pc-head{display:flex;align-items:center;gap:12px;min-width:0;}
.pc-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;}
.pc-title{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pc-title b{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;font-weight:600;
  color:var(--ink-1);line-height:1.15;white-space:nowrap;}
.pc-ver{flex:none;}
.pc-by{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
  color:var(--ink-3);white-space:nowrap;}
.pc-by img{border-radius:3px;opacity:.8;}
.pc-plat{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10px;
  font-weight:500;letter-spacing:.06em;color:var(--ink-4);}
.pc-desc{font-size:13.5px;color:var(--ink-2);line-height:1.55;min-height:2.8em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;}
.pc-get{display:inline-flex;align-items:center;gap:5px;font-size:14.5px;font-weight:600;
  color:var(--vera);transition:gap var(--dur-fast);}
.pc-get i{font-style:normal;font-size:17px;line-height:1;transition:transform var(--dur-fast);}
.pc-get:hover i{transform:translateX(3px);}
.pc-price{font-size:13px;font-weight:500;color:var(--ink-3);}
.pc-price s{color:var(--ink-4);font-weight:500;font-size:.92em;
  text-decoration-thickness:1.5px;margin-right:2px;}
.pc-price b{font-weight:600;color:var(--ink-1);}

.spec-strip{display:none;}

/* ============================================================================
   INSTALL RAIL
   ========================================================================== */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rail .step{background:var(--surface);border-radius:var(--radius-lg);padding:22px;
  border:1px solid var(--border);box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;gap:8px;}
.rail .k{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  color:var(--vera);}
.rail .k .ticks{display:none;}
.rail b{font-size:16px;font-weight:600;color:var(--ink-1);}
.rail span{font-size:14px;color:var(--ink-2);line-height:1.55;}
@media (max-width:760px){.rail{grid-template-columns:1fr;}}

/* ============================================================================
   VOUCH RECEIPT
   ========================================================================== */
.receipt{border-radius:var(--radius-xl);overflow:hidden;
  background:var(--win-bg-0);
  box-shadow:var(--shadow-float);border:1px solid rgba(255,255,255,.1);}
.receipt .rb{display:flex;align-items:center;gap:10px;padding:10px 14px;
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--win-ink-dim);border-bottom:1px solid var(--win-border);}
.receipt .rb .badge{border-color:rgba(125,211,255,.3);background:rgba(125,211,255,.08);
  color:#A8D8F8;margin-left:auto;}
.receipt img{width:100%;height:auto;}

/* ============================================================================
   TOP ANNOUNCEMENT BAR — one flag in context.py (FLAGS.announcement)
   ========================================================================== */
.topbar{display:flex;align-items:center;justify-content:center;gap:13px;
  padding:14px var(--gutter);background:#0B0C0F;border-bottom:1px solid var(--divider);
  font-size:14px;font-weight:700;color:#E9EDF2;text-align:center;letter-spacing:-.005em;
  transition:color var(--dur-fast),background var(--dur-fast);}
.topbar:hover{color:#FFFFFF;background:#0D0F13;}
.topbar img{flex:none;}
.tb-t{min-width:0;}
.tb-short{display:none;}
.tb-arrow{flex:none;font-size:17px;font-weight:700;color:var(--brand);line-height:1;}
@media (max-width:640px){.tb-long{display:none;}.tb-short{display:inline;}}

/* ── closer (shared: landing + compare) ─────────────────────────────────── */
.closer{position:relative;overflow:hidden;border-radius:var(--radius-2xl);
  background:linear-gradient(180deg,var(--win-bg-0),var(--win-bg-1));
  box-shadow:var(--shadow-window);border:1px solid rgba(255,255,255,.1);
  color:var(--win-ink);
  padding:clamp(44px,6vw,84px) clamp(24px,5vw,72px);}
.closer .poster-sm{color:#fff;}
.closer .poster-sm .hl{color:var(--accent-warm);}
.closer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;}
.closer .inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:26px;align-items:flex-start;}
.closer .mono-line{font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--win-ink-dim);}

/* ── bcard — stat/spec cards on product pages ───────────────────────────── */
.bcard{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:24px;
  display:flex;flex-direction:column;gap:8px;min-width:0;}
.bcard .num{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink-1);}
.bcard .desc{font-size:13.5px;color:var(--ink-3);line-height:1.55;}

/* ── chip-lg — the shared page-eyebrow pill ─────────────────────────────── */
.chip-lg{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;
  border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);
  background:rgba(255,255,255,.05);border:1px solid var(--border);}

/* ============================================================================
   NAV — flat + clean, true-centered links
   ========================================================================== */
.topnav{position:sticky;top:0;z-index:60;background:rgba(17,18,20,.94);
  border-bottom:1px solid var(--divider);}
.tn-row{display:flex;align-items:center;gap:var(--s-5);height:64px;position:relative;}
.tn-brand{display:inline-flex;align-items:center;}
.tn-brand img{border-radius:6px;}
.tn-brand .dot{color:var(--brand);}
/* centered links — absolutely centered on the viewport, not between siblings */
.tn-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:6px;}
.tn-link{position:relative;padding:8px 14px;border-radius:var(--radius-full);font-size:14px;
  font-weight:500;color:var(--ink-2);transition:color var(--dur-fast);}
.tn-link:hover{color:#fff;}
.tn-tools{display:flex;align-items:center;gap:14px;margin-left:auto;}
.tn-signin{font-size:14px;font-weight:500;color:var(--ink-2);}
.tn-signin:hover{color:var(--ink-1);}
.tn-dc{background:#5865F2;color:#FFFFFF;font-weight:600;gap:8px;}
.tn-dc:hover{background:#6B78F5;transform:translateY(-1px);}
.tn-cta{background:#FFFFFF;color:#101114;font-weight:600;box-shadow:var(--shadow-xs);}
.tn-cta:hover{background:#EDEFF3;}
.tn-toggle{display:none;flex-direction:column;gap:4px;padding:12px 11px;
  border-radius:var(--radius-full);background:rgba(255,255,255,.05);
  border:1px solid var(--border);}
.tn-toggle span{display:block;width:16px;height:1.6px;background:var(--ink-1);
  transition:transform .2s,opacity .2s;}
.tn-toggle.on span:nth-child(1){transform:translateY(5.6px) rotate(45deg);}
.tn-toggle.on span:nth-child(2){opacity:0;}
.tn-toggle.on span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg);}
.tn-mobile{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding:14px;
  border-radius:var(--radius-xl);border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow-window);}
.tn-mobile[hidden]{display:none;}
.tn-mobile a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 12px;border-radius:var(--radius-md);}
.tn-mobile a:hover{background:rgba(255,255,255,.06);}
.tn-mobile .wm{font-size:18px;}
.tn-mobile .m{font-size:12.5px;font-weight:500;color:var(--ink-3);}
.tn-mobile .lbl{font-size:15px;font-weight:500;color:var(--ink-2);}
@media (max-width:880px){
  .tn-center{display:none;}
  .tn-signin{display:none;}
  .tn-dc{display:none;}
  .tn-cta{display:none;}
  .tn-toggle{display:flex;}
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--dark-bg);color:var(--dark-ink);margin-top:var(--s-10);
  border-top:1px solid var(--border);padding:var(--s-9) 0 48px;font-size:14px;}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;margin-bottom:48px;}
@media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr;gap:28px;}}
.foot-brand{max-width:38ch;display:flex;flex-direction:column;gap:12px;}
.foot-brand .b span{color:var(--brand);}
.foot-brand p{color:var(--dark-ink-dim);line-height:1.6;}
.foot-col h2{font-size:12px;font-weight:600;color:#77828F;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:14px;}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:10px;}
.foot-col a{color:var(--dark-ink-dim);transition:color var(--dur-fast);}
.foot-col a:hover{color:var(--dark-ink);}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--dark-border);
  font-size:13px;color:#77828F;}
.foot-legal a{color:#77828F;}
.foot-legal a:hover{color:var(--dark-ink);}

/* ============================================================================
   SECTION GRAMMAR
   ========================================================================== */
.section{padding:var(--s-10) 0;}
.section-tight{padding:var(--s-8) 0;}
.section-head{margin-bottom:var(--s-7);max-width:64ch;}
.section-head .kick{margin-bottom:var(--s-3);}
.section-title{font-family:var(--font-body);font-weight:600;text-transform:none;
  font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;color:var(--ink-1);}
.section-title .hl{color:var(--accent,var(--brand));}
.section-title .flourish{font-weight:400;}
.section-sub{margin-top:var(--s-4);color:var(--ink-2);font-size:17px;line-height:1.65;max-width:58ch;}

/* ============================================================================
   LEGACY .pw
   ========================================================================== */
.pw{position:relative;border-radius:var(--radius-2xl);overflow:hidden;
  background:var(--win-bg-0);box-shadow:var(--shadow-window);color:var(--win-ink);}
.pw-src{display:flex;align-items:center;gap:10px;margin-top:12px;
  font-size:13.5px;color:var(--ink-3);}
.pw-src a{color:var(--ink-2);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px;}
.pw-src a:hover{color:var(--brand-link);}

/* ============================================================================
   MOTION
   ========================================================================== */
@keyframes vFadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease-entrance),transform .6s var(--ease-entrance);}
.js .reveal.in{opacity:1;transform:none;}
.js .reveal.in :is(.cascade)>*{animation:vFadeUp .5s var(--ease-entrance) both;}
.js .reveal.in :is(.cascade)>*:nth-child(1){animation-delay:.03s;}
.js .reveal.in :is(.cascade)>*:nth-child(2){animation-delay:.08s;}
.js .reveal.in :is(.cascade)>*:nth-child(3){animation-delay:.13s;}
.js .reveal.in :is(.cascade)>*:nth-child(4){animation-delay:.18s;}
.js .reveal.in :is(.cascade)>*:nth-child(5){animation-delay:.23s;}
.js .reveal.in :is(.cascade)>*:nth-child(6){animation-delay:.28s;}
.js .reveal.in :is(.cascade)>*:nth-child(7){animation-delay:.33s;}
.js .reveal.in :is(.cascade)>*:nth-child(8){animation-delay:.38s;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{transition:none;opacity:1;transform:none;}
  .js .reveal.in :is(.cascade)>*{animation:none;}}

@view-transition{navigation:auto;}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none;}}

.count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}