/* ============================================================================
   CardBinder, marketing site design system
   Brand: navy #16172c · teal #4ae8b0 · paper #e7e9ea
   Accents (sparingly): coral #e36f59 · yellow #e7c749 · indigo #3f38ca · blue #4360ee
   Display type = Anton (stand-in for Abolition Soft). Body = Archivo (stand-in for
   Trade Gothic Next LT Pro). Real faces are licensed; these are the free recs.
   ========================================================================== */

:root{
  /* primary */
  --navy:#16172c;
  --navy-1:#1b1d34;      /* raised surface */
  --navy-2:#22243f;      /* card surface */
  --navy-3:#2c2f4d;      /* hairline / border on dark */
  --teal:#4ae8b0;
  --teal-600:#33d59d;
  --teal-ink:#0b2c20;    /* text that sits on teal */
  --paper:#e7e9ea;
  --paper-1:#f3f4f5;
  --ink:#16172c;         /* text on light */
  /* text */
  --text:#eef0f3;        /* primary text on dark */
  --muted:#a2a9bd;       /* secondary text on dark */
  --muted-2:#767d93;     /* tertiary text on dark */
  --muted-l:#5c6274;     /* muted text on light */
  /* accents */
  --coral:#e36f59;
  --yellow:#e7c749;
  --indigo:#3f38ca;
  --blue:#4360ee;
  /* system */
  --border:rgba(231,233,234,.10);
  --border-2:rgba(231,233,234,.16);
  --radius:16px;
  --radius-sm:11px;
  --radius-lg:24px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-teal:0 14px 40px rgba(74,232,176,.28);
  --maxw:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--navy);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--teal);color:var(--teal-ink);}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:clamp(64px,9vw,120px) 0;}
.section-sm{padding:clamp(44px,6vw,72px) 0;}
.center{text-align:center;}
.stack-sm > * + *{margin-top:14px;}

/* light-panel section (for scannable, text-dense areas) */
.panel-light{background:var(--paper);color:var(--ink);}
.panel-light .muted{color:var(--muted-l);}

/* ── type ───────────────────────────────────────────────────────────────── */
.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.01em;
}
h1.display{font-size:clamp(34px,5.2vw,64px);}
h2.display{font-size:clamp(30px,4.6vw,56px);}
h3.display{font-size:clamp(22px,3vw,32px);}
.h-teal{color:var(--teal);}
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:13px;
  color:var(--teal);
}
.panel-light .eyebrow{color:var(--indigo);}
.lead{
  font-size:clamp(17px,2vw,21px);
  line-height:1.55;
  color:var(--muted);
  max-width:56ch;
}
.center .lead{margin-left:auto;margin-right:auto;}
.section-head{max-width:640px;margin:0 auto clamp(40px,5vw,60px);text-align:center;}
.section-head .lead{margin-top:16px;}

/* ── rainbow band (brand "fun element") ─────────────────────────────────── */
.rainbow{display:flex;height:6px;width:100%;overflow:hidden;}
.rainbow > i{flex:1;}
.rainbow > i:nth-child(1){background:var(--coral);}
.rainbow > i:nth-child(2){background:var(--yellow);}
.rainbow > i:nth-child(3){background:var(--indigo);}
.rainbow > i:nth-child(4){background:var(--blue);}
.rainbow > i:nth-child(5){background:var(--paper);}
.rainbow > i:nth-child(6){background:var(--teal);}
.rainbow-tall{height:10px;border-radius:99px;}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:14px 26px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform .16s var(--ease),box-shadow .16s,background .16s,border-color .16s,color .16s;
}
.btn:active{transform:translateY(0);}
.btn-teal{background:var(--teal);color:var(--teal-ink);box-shadow:var(--shadow-teal);}
.btn-teal:hover{transform:translateY(-2px);background:#5cf0bd;box-shadow:0 18px 46px rgba(74,232,176,.4);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2);}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);}
.btn-ink{background:var(--navy);color:#fff;}
.btn-ink:hover{background:#20223d;transform:translateY(-2px);}
.panel-light .btn-ghost{color:var(--ink);border-color:rgba(22,23,44,.2);}
.panel-light .btn-ghost:hover{border-color:var(--indigo);color:var(--indigo);}
/* Coral = the PRIMARY action colour (deliberately warm, so the money button
   is not a teal/green pill on navy — that combo reads as the Ludex competitor.
   Teal stays the brand accent; coral acts. */
.btn-coral{background:var(--coral);color:#2b0f06;box-shadow:0 14px 40px rgba(227,111,89,.30);}
.btn-coral:hover{transform:translateY(-2px);background:#ef7d67;box-shadow:0 18px 46px rgba(227,111,89,.44);}
.btn-lg{padding:17px 34px;font-size:16px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.6;cursor:default;transform:none;}

/* ── header / nav ───────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(22,23,44,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:28px;height:72px;}
.nav .brand{display:flex;align-items:center;flex:0 0 auto;}
.nav .brand svg,.nav .brand img{height:40px;width:auto;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:14px;}
.nav-links a{font-weight:600;font-size:15px;color:var(--muted);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;}
.nav-login{font-weight:700;font-size:15px;color:var(--text);}
.nav-login:hover{color:var(--teal);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:.2s;}
.nav-toggle span + span{margin-top:5px;}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(24px,3.2vw,44px) 0 clamp(24px,3.4vw,44px);}
/* CBU-260j (+CBM-129b): the hero owns the whole FIRST SCREEN on every device — viewport
   minus the 72px sticky header, content centered — so the binder never peeks in above the
   fold and the pitch never ends awkwardly short of it. svh = the height with the browser
   chrome visible, i.e. what a phone actually shows on load. */
.hero{min-height:calc(100svh - 72px);display:flex;align-items:center;}
.hero .wrap{width:100%;}
/* CBU-260k (+CBM-129c): ONE quiet scroll cue at the base of the full-height hero —
   every device, now that phones get the full-first-screen hero too. 44px box = a
   real touch target. */
.hero-scroll{position:absolute;left:50%;bottom:12px;display:flex;align-items:center;
  justify-content:center;width:44px;height:44px;color:var(--coral);
  transition:color .2s;animation:heroDrift 2.8s ease-in-out infinite;}
.hero-scroll:hover{color:#ef7d67;}
.hero-scroll svg{width:22px;height:22px;}
@keyframes heroDrift{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}
@media (prefers-reduced-motion:reduce){
  .hero-scroll{animation:none;transform:translateX(-50%);}
}
.hero-center{max-width:860px;margin:0 auto;text-align:center;}
.hero-center .lead{margin-left:auto;margin-right:auto;}
.hero-center .hero-cta{justify-content:center;}
.hero-center .hero-note{margin-left:auto;margin-right:auto;}
.hero h1{margin-bottom:20px;}
.hero .lead{margin-bottom:34px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero-note{margin-top:20px;font-size:15px;line-height:1.5;color:var(--muted);max-width:46ch;}
.hero-note b{color:var(--teal);font-weight:700;}
.hero-bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 60% at 78% 20%, rgba(74,232,176,.14), transparent 70%),
    radial-gradient(50% 50% at 12% 90%, rgba(67,96,238,.10), transparent 70%);
}

/* ── hero binder — mirrors the REAL app binder (staging card_lister.html):
   a two-page spread with a bound centre spine seam, and a two-sided cover that
   flips a full −180° on the spine (front = leather "My Binder", back = the inside
   cover) so it lands FLAT as the left page instead of vanishing. Exact app values:
   transform-origin:left center; rotateY 0→−180; cubic-bezier(.45,.05,.55,.95).
   The right page shows one card per palette colour (app pocket format: portrait
   image, footer = name left + value right), and the chase card pops to the app's
   large hover view.
   2026-08-17 (CBU-108c): promoted out of the hero into its own full-width
   `.binder-stage` section, ~1.6x bigger; fixed px sizes below became fluid
   clamps so the type scales with it. ─────────────────────────────────────── */
.binder-stage{overflow:hidden;padding:clamp(6px,1.2vw,16px) 0 clamp(28px,4vw,56px);
  /* CBU-260k2: the hero chevron's anchor jump stops 88px early so the binder lands
     clear of the 72px sticky header instead of sliding under it. */
  scroll-margin-top:88px;}
.hero-binder{--loop:14s;--spine:clamp(24px,3vw,38px);position:relative;
  /* CBU-108d2: 666→520 tall — the page used to carry ~2 pockets of dead band above
     and below the grid; now it hugs the 2×3 grid like the app's page does. */
  width:min(100%,1020px,calc((100vh - 150px)*1.96));aspect-ratio:1020/520;
  margin:0 auto;perspective:2400px;
  /* Centre the CLOSED cover, then glide right in lock-step with the flip so the
     OPEN spread lands centred too (-26% ≈ half a page + half the spine). */
  animation:binderShift var(--loop) infinite cubic-bezier(.45,.05,.55,.95);}
.binder-spread{position:absolute;inset:0;transform-style:preserve-3d;}

/* right page = the revealed card grid */
.bpage{position:absolute;top:0;bottom:0;left:calc(50% + var(--spine)/2);right:0;
  border-radius:5px 12px 12px 5px;overflow:hidden;
  background:linear-gradient(155deg,#24264a,#15162e);border:1px solid #34375e;
  box-shadow:0 12px 40px rgba(0,0,0,.45),inset 14px 0 24px -12px rgba(0,0,0,.55);padding:4% 6% 4% 7%;}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9% 7%;align-content:center;height:100%;}
.mini-card{position:relative;border-radius:5px;overflow:hidden;background:#0f1020;
  border:1px solid rgba(255,255,255,.09);box-shadow:0 3px 9px rgba(0,0,0,.45);display:flex;flex-direction:column;}
.mini-card .pic{position:relative;flex:none;aspect-ratio:2.5/3.5;background:linear-gradient(150deg,var(--c1,#1a1c36),var(--c2,#12132a));}
.mini-card .pic img,.hover-card .hc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.mini-card .pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.10) 100%);}
.mini-card .pic .cbm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;color:rgba(12,14,28,.5);}
/* CBU-108d: the app never shows a chopped name in a pocket — the foot type is sized
   against the POCKET's own width (cqi), so the full name + value fit at every binder
   scale. The px line before each cqi line is the fallback for old browsers. */
.mini-card{container-type:inline-size;}
.mini-card .foot{display:flex;align-items:center;justify-content:space-between;gap:2px;
  padding:clamp(2px,.4vw,5px) clamp(3px,.5vw,6px);background:#12132a;border-top:1px solid rgba(255,255,255,.06);}
.mini-card .nm{flex:1;min-width:0;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;letter-spacing:-.01em;
  font-size:11px;font-size:clamp(6px,10.2cqi,16px);}
.mini-card .val{font-weight:800;color:var(--teal);white-space:nowrap;display:flex;align-items:center;gap:1px;
  font-size:11px;font-size:clamp(6px,10.2cqi,16px);}
.mini-card.is-src{animation:srcDim var(--loop) infinite;}

/* bound centre spine seam (revealed as the cover opens, hidden while closed/flipping) */
.bspine{position:absolute;top:5%;bottom:5%;left:calc(50% - var(--spine)/2);width:var(--spine);z-index:3;
  background:linear-gradient(90deg,#0c0d1c,#262848 50%,#0c0d1c);box-shadow:inset 0 0 10px rgba(0,0,0,.55);
  opacity:0;animation:spineReveal var(--loop) infinite;}
.bspine::before,.bspine::after{content:"";position:absolute;top:12%;bottom:12%;width:1px;
  background:repeating-linear-gradient(rgba(74,232,176,.30) 0 6px,transparent 6px 13px);}
.bspine::before{left:7px;}.bspine::after{right:7px;}

/* the flipping cover: sits over the right page, hinges on its LEFT edge (the spine) */
.cover-flip{position:absolute;top:0;bottom:0;left:calc(50% + var(--spine)/2);right:0;z-index:30;
  transform-origin:left center;transform-style:preserve-3d;
  animation:coverFlip var(--loop) infinite cubic-bezier(.45,.05,.55,.95);}
.cf-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:5px 12px 12px 5px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
/* front = leather "My Binder" cover with its own bound spine band */
.cf-front{background:linear-gradient(150deg,#262848,#14152a 80%);border:1px solid #3a3d68;
  box-shadow:0 22px 56px rgba(0,0,0,.62),0 0 52px rgba(74,232,176,.12);padding:8% 9% 8% 16%;}
.cf-front .bc-spine{position:absolute;left:0;top:0;bottom:0;width:var(--spine);border-radius:5px 0 0 5px;z-index:2;
  background:linear-gradient(90deg,#111226,#2c2e52 58%,#131428);
  box-shadow:inset -5px 0 9px rgba(0,0,0,.45),inset 3px 0 2px rgba(74,232,176,.10);}
.cf-front .bc-spine::before,.cf-front .bc-spine::after{content:"";position:absolute;top:12%;bottom:12%;border-left:1px dashed rgba(74,232,176,.28);}
.cf-front .bc-spine::before{left:8px;}.cf-front .bc-spine::after{right:8px;}
.cf-front .bc-frame{position:absolute;inset:clamp(12px,1.7vw,20px) clamp(12px,1.7vw,20px) clamp(12px,1.7vw,20px) clamp(30px,4.1vw,52px);border:1px solid rgba(74,232,176,.30);border-radius:6px;pointer-events:none;}
.cf-front .bc-title{font-family:var(--font-display);font-size:clamp(24px,4vw,48px);line-height:.92;
  letter-spacing:.02em;color:#83eec6;text-transform:uppercase;}
.cf-front .bc-rule{width:clamp(44px,6vw,76px);height:2px;background:rgba(74,232,176,.5);margin:clamp(9px,1.3vw,15px) auto;}
.cf-front .bc-meta{font-size:clamp(10px,1.35vw,16px);letter-spacing:.04em;color:#aeb3c8;}
/* back = the inside front cover — the real logo lockup, dimmed, like the app's */
.cf-back{transform:rotateY(180deg);background:linear-gradient(150deg,#1f2142,#111226);border:1px solid #34375e;}
.cf-back::after{content:"";position:absolute;inset:16px;border:1px solid rgba(74,232,176,.16);border-radius:6px;pointer-events:none;}
.cf-back .ic-logo{width:52%;max-width:340px;opacity:.42;filter:saturate(.75);}

/* the large "hover" preview that pops out of the chase card */
.hover-card{position:absolute;top:4%;left:50%;width:30%;z-index:40;transform-origin:center;
  border-radius:10px;overflow:hidden;background:#0f1020;border:1px solid rgba(74,232,176,.55);
  box-shadow:0 26px 46px rgba(0,0,0,.6),0 0 0 4px rgba(74,232,176,.14);
  animation:popCard var(--loop) infinite var(--ease);}
.hover-card .hc-pic{position:relative;aspect-ratio:2.5/3.5;background:linear-gradient(150deg,#c9c9d4,#8f93a8);}
.hover-card .hc-pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.10) 100%);}
.hover-card .hc-pic .cbm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:30px;color:rgba(12,14,28,.42);}
.hover-card .hc-badge{position:absolute;top:clamp(6px,1vw,12px);right:clamp(6px,1vw,12px);background:var(--teal);color:var(--teal-ink);
  font-weight:800;font-size:clamp(10px,1.35vw,16px);padding:clamp(3px,.6vw,6px) clamp(7px,1.1vw,13px);border-radius:99px;}
.hover-card .hc-meta{padding:clamp(7px,1.1vw,13px) clamp(9px,1.3vw,15px);background:#12132a;border-top:1px solid rgba(255,255,255,.07);}
.hover-card .hc-nm{font-size:clamp(12px,1.7vw,20px);font-weight:800;color:#fff;}
.hover-card .hc-sub{font-size:clamp(9px,1.25vw,14px);color:var(--muted-2);margin-top:1px;}

/* CBU-108d: third view — the pop-out crossfades to the card's price graph (no dates,
   the values are illustrative; the note under the binder says so). */
.hover-card .hc-graph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  background:#12132a;padding:clamp(9px,1.3vw,16px) clamp(10px,1.5vw,18px);
  opacity:0;animation:graphIn var(--loop) infinite var(--ease);}
.hg-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.hg-nm{font-size:clamp(11px,1.55vw,18px);font-weight:800;color:#fff;white-space:nowrap;}
.hg-tag{font-size:clamp(8px,1.05vw,12px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;}
.hg-val{font-size:clamp(18px,2.6vw,32px);font-weight:800;color:var(--teal);margin:clamp(2px,.4vw,6px) 0 clamp(6px,.9vw,12px);}
.hg-plot{flex:1;min-height:0;display:flex;gap:7px;}
/* labels sit at the gridlines' proportional heights (34/70/106 of the 130 viewBox) */
.hg-ax{position:relative;flex:none;width:clamp(24px,3.4vw,34px);}
.hg-ax span{position:absolute;right:0;transform:translateY(-50%);
  font-size:clamp(8px,1.05vw,12px);font-weight:600;color:var(--muted-2);}
.hg-ax span:nth-child(1){top:26.2%;}
.hg-ax span:nth-child(2){top:53.8%;}
.hg-ax span:nth-child(3){top:81.5%;}
.hg-svg{flex:1;width:100%;min-height:0;}
.hg-cap{font-size:clamp(8px,1.05vw,12px);color:var(--muted-2);margin-top:clamp(5px,.8vw,10px);}

/* note under the whole stage — the values above are props, not comps */
.binder-note{text-align:center;font-size:clamp(11px,1.2vw,13px);color:var(--muted-2);
  margin:clamp(14px,2vw,22px) auto 0;max-width:62ch;}

@keyframes coverFlip{      /* the exact app open→hold→close, hinged on the spine */
  0%,9%    {transform:rotateY(0deg);}
  17%,86%  {transform:rotateY(-180deg);}
  94%,100% {transform:rotateY(0deg);}
}
@keyframes binderShift{    /* same timing as coverFlip: keeps the binder centred at both ends */
  0%,9%    {transform:translateX(-26%);}
  17%,86%  {transform:translateX(0);}
  94%,100% {transform:translateX(-26%);}
}
@keyframes spineReveal{
  0%,12%   {opacity:0;}
  19%,87%  {opacity:1;}
  93%,100% {opacity:0;}
}
@keyframes srcDim{         /* chase card dims while its big view is out */
  0%,28%  {opacity:1;}
  36%,79% {opacity:.16;}
  86%,100%{opacity:1;}
}
@keyframes popCard{
  0%,26%   {opacity:0;transform:translate(-50%,12%) scale(.5);}
  34%,80%  {opacity:1;transform:translate(-50%,0) scale(1);}
  87%,100% {opacity:0;transform:translate(-50%,12%) scale(.5);}
}
@keyframes graphIn{        /* card view first, then the graph face for the back half */
  0%,52%   {opacity:0;}
  58%,78%  {opacity:1;}
  84%,100% {opacity:0;}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  /* frozen pop-out would permanently cover the phone's static page — hide it there */
  .hover-card{display:none;}
  .mini-card.is-src{animation:none;opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .hero-binder{animation:none;transform:translateX(0);}
  .cover-flip{animation:none;transform:rotateY(-180deg);}
  .bspine{animation:none;opacity:1;}
  .mini-card.is-src{animation:none;opacity:.16;}
  .hover-card{animation:none;opacity:1;transform:translate(-50%,0) scale(1);}
  .hover-card .hc-graph{animation:none;opacity:0;}
}

/* ── generic card grid ──────────────────────────────────────────────────── */
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--navy-1);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;transition:transform .18s var(--ease),border-color .18s,background .18s;
}
.card:hover{transform:translateY(-3px);border-color:var(--border-2);}
.card .ico{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(74,232,176,.12);color:var(--teal);margin-bottom:16px;
}
.card .ico svg{width:24px;height:24px;}
.card h3{font-size:18px;font-weight:800;margin-bottom:8px;letter-spacing:.01em;}
.card p{color:var(--muted);font-size:15.5px;line-height:1.6;}

/* CBU-260c: plan CTAs are INERT pre-launch — plan selection arrives with billing.
   The nav's "Join the waitlist" stays live; only the tier cards go quiet. */
.tier-cta-soon{display:flex;align-items:center;justify-content:center;width:100%;
  padding:14px 26px;border-radius:var(--radius-sm);border:1.5px dashed var(--border-2);
  color:var(--muted-2);font-weight:700;font-size:15px;letter-spacing:.01em;
  cursor:default;user-select:none;}

/* ── free-forever band ──────────────────────────────────────────────────── */
.band{
  background:linear-gradient(135deg,#1c1e39,#191b32);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(34px,5vw,56px);position:relative;overflow:hidden;
}
/* CBU-260b: the list box shrink-wraps its two columns (width:max-content + max-content
   tracks) so "centered" for the kicker means centered under the VISIBLE items — a full-width
   row's centerline sits way right of where the eye puts it. */
.free-list{display:grid;grid-template-columns:repeat(2,max-content);width:max-content;max-width:100%;
  gap:14px clamp(48px,7vw,110px);margin-top:26px;}
/* the scan trial is the odd one out (a starter allotment, not a forever-free feature) —
   centered on the TEXT, not the check+text unit: the -18px is half of (24px check + 12px gap). */
.free-list .free-kicker{grid-column:1 / -1;justify-self:center;transform:translateX(-18px);}
@media (max-width:900px){
  .free-list{width:auto;grid-template-columns:repeat(2,1fr);gap:14px 28px;}
  /* below the shrink-wrapped layout the kicker lines up with the other items */
  .free-list .free-kicker{justify-self:start;transform:none;}
}
.free-list li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--text);}
.free-list .chk{flex:0 0 auto;width:24px;height:24px;border-radius:99px;background:rgba(74,232,176,.15);
  color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;margin-top:1px;}
.free-list b{color:#fff;}

/* ── pricing ────────────────────────────────────────────────────────────── */
.bill-toggle{display:inline-flex;align-items:center;gap:0;background:var(--navy-1);
  border:1px solid var(--border-2);border-radius:99px;padding:5px;margin:22px auto 0;}
.bill-toggle button{background:none;border:0;color:var(--muted);font-family:var(--font-body);
  font-weight:700;font-size:14px;padding:9px 20px;border-radius:99px;cursor:pointer;transition:.15s;}
.bill-toggle button.on{background:var(--teal);color:var(--teal-ink);}
.bill-save{margin-left:6px;font-size:11px;font-weight:800;color:var(--teal);
  background:rgba(74,232,176,.14);padding:3px 8px;border-radius:99px;letter-spacing:.03em;}

.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch;}
.tier{display:flex;flex-direction:column;background:var(--navy-1);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px;position:relative;transition:transform .18s var(--ease),border-color .18s;}
.tier:hover{transform:translateY(-3px);border-color:var(--border-2);}
.tier.pop{border-color:var(--teal);background:linear-gradient(180deg,rgba(74,232,176,.08),var(--navy-1) 40%);
  box-shadow:0 20px 60px rgba(74,232,176,.14);}
.tier .pop-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--teal);
  color:var(--teal-ink);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:99px;white-space:nowrap;}
.tier .t-name{font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--teal);}
.tier .t-price{font-family:var(--font-display);font-size:44px;line-height:1;margin:14px 0 2px;}
.tier .t-price .per{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;}
.tier .t-annual{font-size:13px;color:var(--muted-2);min-height:18px;}
.tier .t-scans{margin:18px 0 6px;font-size:15px;}
.tier .t-scans b{font-size:22px;font-weight:800;color:#fff;}
.tier .t-rate{font-size:13px;color:var(--muted-2);margin-bottom:18px;}
/* CBU-260d: per-tier checklists dropped (they were near-identical) — the card is just
   name/price/scans/rate + CTA; margin-top:auto bottom-aligns the CTA across cards. */
.tier .btn,.tier .tier-cta-soon{margin-top:auto;}


.topups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:640px;margin:24px auto 0;}
.topup{background:var(--navy-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px;text-align:center;}
.topup .q{font-family:var(--font-display);font-size:30px;color:var(--teal);}
.topup .p{font-weight:800;font-size:18px;margin:4px 0 2px;}
.topup .r{font-size:12.5px;color:var(--muted-2);}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-cat{margin-bottom:40px;}
.faq-cat > .eyebrow{display:block;margin-bottom:16px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--text);
  font-family:var(--font-body);font-weight:700;font-size:17px;padding:20px 40px 20px 0;position:relative;
  display:flex;justify-content:space-between;gap:16px;}
.faq-q .pm{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .2s;}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--teal);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-q .pm::before{width:14px;height:2px;}
.faq-q .pm::after{width:2px;height:14px;transition:opacity .2s,transform .2s;}
.faq-item.open .faq-q .pm::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s var(--ease);}
.faq-a-inner{padding:0 0 22px;color:var(--muted);font-size:16px;line-height:1.7;max-width:70ch;}
.faq-a-inner a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}

/* ── forms (waitlist + support) ─────────────────────────────────────────── */
.form-row{display:flex;gap:12px;flex-wrap:wrap;}
.field{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;}
.field label{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);}
.input,.textarea,select.input{
  width:100%;background:var(--navy-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--font-body);font-size:16px;padding:14px 16px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2);}
.input:focus,.textarea:focus,select.input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(74,232,176,.15);}
.textarea{resize:vertical;min-height:150px;line-height:1.6;}
.form-note{font-size:13px;color:var(--muted-2);margin-top:4px;}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;max-width:480px;}
.inline-form .input{flex:1;min-width:220px;}

/* success / status messages */
.form-status{display:none;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:600;margin-top:14px;}
.form-status.show{display:flex;}
.form-status.ok{background:rgba(74,232,176,.12);color:var(--teal);border:1px solid rgba(74,232,176,.3);}
.form-status.err{background:rgba(227,111,89,.12);color:var(--coral);border:1px solid rgba(227,111,89,.3);}

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band{background:linear-gradient(135deg,var(--teal),#38d69f);border-radius:var(--radius-lg);
  padding:clamp(40px,6vw,68px);text-align:center;color:var(--teal-ink);position:relative;overflow:hidden;}
.cta-band h2{color:var(--teal-ink);}
.cta-band .lead{color:rgba(11,44,32,.82);margin:16px auto 30px;}
.cta-band .btn-ink{box-shadow:0 14px 40px rgba(11,44,32,.28);}
.cta-band .rainbow{position:absolute;top:0;left:0;}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer{background:#111223;border-top:1px solid var(--border);padding:56px 0 34px;margin-top:0;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.footer-brand svg,.footer-brand img{height:30px;margin-bottom:16px;}
.footer-brand p{color:var(--muted-2);font-size:14px;max-width:34ch;}
.footer-col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;font-weight:800;}
.footer-col a{display:block;color:var(--muted);font-size:15px;padding:5px 0;transition:color .15s;}
.footer-col a:hover{color:var(--teal);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--border);color:var(--muted-2);font-size:13.5px;}
.footer-bottom a{color:var(--muted-2);}
.footer-bottom a:hover{color:var(--muted);}

/* ── reveal on scroll ───────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .btn,.card,.tier{transition:none;}
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .tiers{grid-template-columns:repeat(2,1fr);}
  /* CBM-131: tiles stay in plan order everywhere — the Recommended badge marks
     Pro; hoisting it first read as "out of order" on phones. */
  .footer-top{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:760px){
  .nav-links,.nav-actions{display:none;}
  .nav-toggle{display:block;}
  .nav.open + .nav-drawer{display:block;}
  .grid-3,.free-list{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  /* Phones match the APP's mobile binder: the spread/cover-flip is desktop
     decoration (the app gates it off on phones too) — show ONE open page,
     full width, so the pockets stay the same size they are on desktop. */
  .hero{padding-top:28px;}
  /* CBM-132: footer brand block centers on phones (logo + tagline); link
     columns stay left-justified. Bradley is rewriting the tagline copy later. */
  .footer-brand{text-align:center;}
  .footer-brand svg,.footer-brand img{margin-left:auto;margin-right:auto;}
  .footer-brand p{margin-left:auto;margin-right:auto;}
  .hero-binder{width:100%;aspect-ratio:auto;height:auto;max-width:420px;animation:none;transform:none;}
  .binder-spread{position:static;}
  /* CBM-130: engine-proof phone page — Safari resolved the %-based row-gap
     differently and clipped the second row's feet; fixed gaps + visible overflow
     make clipping geometrically impossible. */
  .bpage{position:static;border-radius:12px;padding:16px;overflow:visible;}
  .mini-grid{height:auto;gap:14px 10px;}
  .bspine,.cover-flip{display:none;}
  /* CBM-130 also: the pop-out + market-value loop runs on phones now, over the
     static page (the cover-flip stays desktop-only). */
  .hover-card{display:block;width:58%;top:2%;}
}
@media (max-width:520px){
  body{font-size:16px;}
  /* CBM-131b: phone pricing = a 2-up grid (Bradley) — Collector full-width as the
     free-forever headliner, then Starter+Pro, then Power+Power Plus. */
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* min-width:0 — a grid item refuses to shrink below its content by default,
     and the nowrap launch pill was blowing the whole grid past the screen edge */
  .tiers .tier{min-width:0;}
  /* the full-width free-forever headliner reads as a banner — centered; the
     two-up plan cards below stay left-aligned like plan cards should */
  .tiers .tier:first-child{grid-column:1 / -1;text-align:center;}
  .tier .pop-tag{font-size:10px;padding:3px 10px;white-space:nowrap;}
  /* CBM-131c: top-up packs match the compact grid — 3-across, tight */
  .topups{gap:10px;}
  .topup{padding:12px 8px;min-width:0;}
  .topup .q{font-size:24px;}
  .topup .p{font-size:15px;}
  .topup .r{font-size:11.5px;}
  .tier .tier-cta-soon{padding:8px 4px;font-size:11.5px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  /* CBM-129: the whole hero pitch (through the free-forever note) must fit an
     iPhone's FIRST screen — Safari's bottom bar was swallowing the note's last
     line. Tighter rhythm, same copy. */
  .hero{padding-top:18px;}
  .hero .rainbow{margin-bottom:16px !important;}
  .hero h1.display{font-size:30px;margin-bottom:14px;}
  .hero .lead{font-size:16px;line-height:1.45;margin-bottom:22px;}
  .hero-cta{gap:10px;}
  .hero-cta .btn-lg{padding:13px 26px;font-size:15px;}
  .hero-note{margin-top:14px;font-size:13.5px;}
  /* CBM-131: compact phone pricing tiles — the desktop rhythm made each card
     nearly a full screen tall. */
  .tiers{gap:10px;}
  .tier{padding:14px 16px 12px;}
  .tier .t-name{font-size:13px;}
  .tier .t-price{font-size:27px;margin:5px 0 0;}
  .tier .t-price .per{font-size:12px;}
  .tier .t-annual{min-height:0;font-size:12px;}
  .tier .t-scans{margin:7px 0 1px;font-size:14px;}
  .tier .t-scans b{font-size:16px;}
  .tier .t-rate{margin-bottom:9px;font-size:12px;}
  .tier .tier-cta-soon{padding:8px 16px;font-size:13.5px;}
}

/* ── mobile nav drawer ──────────────────────────────────────────────────── */
.nav-drawer{display:none;border-top:1px solid var(--border);background:var(--navy);padding:16px 24px 24px;}
.nav-drawer a{display:block;padding:12px 0;font-weight:700;font-size:17px;color:var(--text);border-bottom:1px solid var(--border);}
/* the drawer's block-link rule overrides .btn's centering flex — restore it */
.nav-drawer .btn{margin-top:16px;display:flex;align-items:center;justify-content:center;}
.nav-drawer.show{display:block;}

/* ── beta application modal (CBU-259) ───────────────────────────────────── */
.modal{position:fixed;inset:0;height:100dvh;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-back{position:absolute;inset:0;background:rgba(10,11,22,.72);backdrop-filter:blur(3px);}
.modal-panel{position:relative;width:100%;max-width:520px;max-height:min(88dvh,760px);overflow-y:auto;
  background:var(--navy-1);border:1px solid var(--border-2);border-radius:var(--radius-lg);
  padding:clamp(22px,4vw,36px);box-shadow:var(--shadow);}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);
  font-size:26px;line-height:1;cursor:pointer;padding:6px;}
.modal-x:hover{color:var(--text);}
.modal-title{font-family:var(--font-display);font-size:clamp(24px,3.4vw,30px);letter-spacing:.01em;
  text-transform:uppercase;color:var(--text);margin:0 0 6px;}
.modal-sub{font-size:15px;color:var(--muted);margin:0 0 22px;line-height:1.55;}
body.modal-open{overflow:hidden;}
/* checkbox / radio pills */
.pick-grid{display:flex;flex-wrap:wrap;gap:8px;}
.pick{position:relative;cursor:pointer;}
.pick input{position:absolute;opacity:0;pointer-events:none;}
.pick span{display:inline-block;padding:9px 14px;border-radius:99px;border:1px solid var(--border-2);
  background:var(--navy-2);color:var(--muted);font-size:14px;font-weight:600;
  transition:background .15s,color .15s,border-color .15s;user-select:none;}
.pick input:checked+span{background:rgba(74,232,176,.14);border-color:var(--teal);color:var(--teal);}
.pick input:focus-visible+span{box-shadow:0 0 0 3px rgba(74,232,176,.25);}
.pick input:disabled+span{opacity:.55;cursor:default;}

/* CBM-133: very narrow phones (Galaxy Fold outer screen class) — the launch pill
   needs one more step down to fit the half-width cards. */
@media (max-width:370px){
  .tier .tier-cta-soon{font-size:10.5px;letter-spacing:0;white-space:normal;line-height:1.25;text-align:center;}
}