/* ============================================================
   COLLECTR — Marketing site (B2C) · Dark & premium
   Built on the Collectr design tokens, adapted for dark surfaces.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

:root{
  /* canvas + surfaces */
  --bg:        #08090A;
  --bg-1:      #0D0E10;
  --bg-2:      #131417;
  --bg-3:      #1A1B1F;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* brand */
  --teal:      #41AAA1;
  --teal-br:   #5FD3C7;   /* brightened teal for glow/text on black */
  --teal-deep: #1E5B57;
  --green:     #21CE99;
  --red:       #F0564E;
  --amber:     #E3C05A;
  /* metallic gold — matte card-like sheen */
  --gold-metallic: linear-gradient(135deg,#8f6f2c 0%,#c9a14a 24%,#f3e3a6 46%,#d8b85a 60%,#9c7a2e 82%,#7d5f25 100%); /* @kind color */
  --gold-edge: #6f561f;
  --gold-hi:   #f3e3a6;

  /* ink */
  --ink:   #F4F6F7;
  --ink-2: #ADB2B9;
  --ink-3: #6E747C;

  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r-pill: 100px;
  --maxw: 1200px;
  --nav-h: 72px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
/* Subtle scrollbar on desktop/responsive-emulator (real mobile uses auto-hiding overlay bars). */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); background-clip:padding-box; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--teal); color:#04110F; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ position:relative; padding:clamp(64px,10vw,140px) 0; }

/* ---------- atmospheric backdrop ---------- */
.glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; z-index:0; }
.glow-teal{ background:radial-gradient(circle, rgba(65,170,161,.55), transparent 70%); }
.glow-amber{ background:radial-gradient(circle, rgba(255,200,19,.30), transparent 70%); }

/* ---------- type ---------- */
.eyebrow{
  font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-br); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--teal); border-radius:2px; }
h1,h2,h3{ font-weight:900; letter-spacing:-.02em; line-height:1.04; color:var(--ink); }
.display{ font-size:clamp(44px,7vw,86px); }
.h-sec{ font-size:clamp(32px,4.6vw,56px); }
.h-card{ font-size:clamp(22px,2.4vw,28px); }
.lead{ font-size:clamp(17px,1.5vw,20px); color:var(--ink-2); line-height:1.55; }
.tnum{ font-variant-numeric:tabular-nums; }
.teal{ color:var(--teal-br); }
.green{ color:var(--green); }
.red{ color:var(--red); }
.amber{ background:var(--gold-metallic); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* anime-style metal sheen sweeping S -> D */
.amber.sheen{
  background:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,.25) 46%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.25) 54%, transparent 62%),
    var(--gold-metallic);
  background-size:220% 100%, 100% 100%;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:amberSheen 6s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes amberSheen{
  0%   { background-position:120% 0, 0 0; }
  70%  { background-position:-40% 0, 0 0; }
  100% { background-position:-40% 0, 0 0; }
}
@media (prefers-reduced-motion:reduce){ .amber.sheen{ animation:none; background:var(--gold-metallic); background-clip:text; -webkit-background-clip:text; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:900; font-size:16px; border-radius:var(--r-pill);
  padding:15px 28px; transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-teal{ background:var(--teal); color:#03100E; box-shadow:0 8px 30px -8px rgba(65,170,161,.7); }
.btn-teal:hover{ background:var(--teal-br); box-shadow:0 12px 40px -8px rgba(95,211,199,.85); transform:translateY(-2px); }
.btn-amber{ background:var(--gold-metallic); color:#2a200a; border:1px solid var(--gold-edge);
  box-shadow:0 8px 30px -8px rgba(201,161,74,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-amber:hover{ filter:brightness(1.06) saturate(1.05); transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.04); color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.28); transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:14px; }
.btn-lg{ padding:18px 34px; font-size:17px; }

/* ---------- store badges ---------- */
.stores{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.store{
  display:inline-flex; align-items:center; gap:11px;
  background:#0c0d0f; border:1px solid var(--line-2); border-radius:12px;
  padding:10px 18px 10px 16px; transition:border-color .2s, transform .2s, background .2s;
}
.store:hover{ border-color:rgba(255,255,255,.32); transform:translateY(-2px); background:#121316; }
.store svg{ width:24px; height:24px; flex:none; }
.store .st-sub{ font-size:10px; color:var(--ink-2); line-height:1; letter-spacing:.04em; }
.store .st-main{ font-size:17px; font-weight:900; line-height:1.15; letter-spacing:-.01em; }

/* ---------- badge / pill ---------- */
.pro-badge{
  display:inline-flex; align-items:center; font-weight:900; font-size:11px; letter-spacing:.06em;
  background:var(--gold-metallic); color:#2a200a; border-radius:5px; padding:3px 8px; line-height:1;
  border:1px solid var(--gold-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.chip{
  display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink-2);
  border-radius:var(--r-pill); padding:7px 15px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(8,9,10,.72); backdrop-filter:blur(16px); border-bottom-color:var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-logo img{ height:40px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  font-weight:700; font-size:15px; color:var(--ink-2); padding:8px 14px; border-radius:9px;
  transition:color .18s, background .18s;
}
.nav-links a:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.nav-links a.active{ color:var(--ink); }

/* Features mega-menu */
.nav-features{ position:relative; }
.nav-feat-btn{
  display:inline-flex; align-items:center; gap:5px; font-family:inherit;
  font-weight:700; font-size:15px; color:var(--ink-2); padding:8px 12px 8px 14px;
  border-radius:9px; background:none; border:none; cursor:pointer;
  transition:color .18s, background .18s;
}
.nav-feat-btn:hover, .nav-features.open .nav-feat-btn{ color:var(--ink); background:rgba(255,255,255,.05); }
.nav-feat-btn.active{ color:var(--ink); }
.nav-feat-btn .caret{ width:15px; height:15px; transition:transform .25s; }
.nav-features.open .nav-feat-btn .caret{ transform:rotate(180deg); }
.mega{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  width:560px; max-width:calc(100vw - 32px); z-index:120;
  background:rgba(16,18,20,.92); backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--line-2); border-radius:18px; padding:12px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility .22s;
}
.mega::before{ content:""; position:absolute; bottom:100%; left:0; right:0; height:14px; }
.nav-features.open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.mega-card{ display:flex; align-items:flex-start; gap:12px; padding:13px; border-radius:12px;
  transition:background .16s; }
.mega-card:hover{ background:rgba(255,255,255,.05); }
.mega-ico{ flex:none; width:38px; height:38px; border-radius:10px; background:rgba(65,170,161,.12);
  color:var(--teal-br); display:flex; align-items:center; justify-content:center; }
.mega-ico svg{ width:20px; height:20px; }
.mega-tt{ font-weight:800; font-size:15px; color:var(--ink); display:block; line-height:1.2; }
.mega-ds{ font-weight:600; font-size:12.5px; color:var(--ink-3); display:block; margin-top:3px; line-height:1.35; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-burger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2);
  align-items:center; justify-content:center; }
.nav-burger svg{ width:22px; height:22px; }

.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:200;
  background:var(--bg-1); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.5,0,.2,1);
  padding:24px; display:flex; flex-direction:column; gap:6px;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-weight:700; font-size:18px; padding:14px 12px; border-radius:10px; color:var(--ink); }
.mobile-menu a:hover{ background:rgba(255,255,255,.05); }
.mobile-menu .mm-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.mobile-menu .mm-label{ font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:14px 12px 4px; }
.mobile-menu a.mm-sub{ font-size:16px; padding:11px 12px 11px 26px; color:var(--ink-2); }
.mobile-menu a.mm-sub:hover{ color:var(--ink); }
.mobile-menu .mm-top img{ height:22px; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:150; opacity:0; pointer-events:none;
  transition:opacity .3s; }
.scrim.open{ opacity:1; pointer-events:auto; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   HERO (shared shell)
   ============================================================ */
.hero{ position:relative; padding-top:calc(var(--nav-h) + 40px); overflow:hidden; }
.hero-inner{ position:relative; z-index:2; }

/* search component */
.searchbox{
  display:flex; align-items:center; gap:12px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:8px 8px 8px 22px; box-shadow:0 20px 60px -20px rgba(0,0,0,.8);
  transition:border-color .2s, box-shadow .2s;
}
.searchbox:focus-within{ border-color:var(--teal); box-shadow:0 20px 70px -18px rgba(65,170,161,.45); }
.searchbox .s-ico{ width:24px; height:24px; color:var(--ink-3); flex:none; }
.searchbox input{
  flex:1; background:none; border:none; outline:none; color:var(--ink);
  font-family:inherit; font-size:18px; font-weight:700; min-width:0;
}
.searchbox input::placeholder{ color:var(--ink-3); font-weight:700; }

/* live suggestion dropdown */
.suggest{
  margin-top:12px; background:var(--bg-2); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:0 30px 70px -24px rgba(0,0,0,.9); text-align:left;
}
.suggest-row{
  display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--line);
  transition:background .15s;
}
.suggest-row:last-child{ border-bottom:none; }
.suggest-row:hover{ background:rgba(255,255,255,.04); }
.suggest-row img{ width:34px; height:auto; border-radius:4px; }
.suggest-row .sr-name{ font-weight:700; font-size:15px; }
.suggest-row .sr-meta{ font-size:12px; color:var(--ink-3); }
.suggest-row .sr-price{ margin-left:auto; text-align:right; font-weight:900; }
.suggest-row .sr-delta{ font-size:12px; font-weight:700; }

/* ---------- phones / device mockups ---------- */
.phone{ filter:drop-shadow(0 40px 70px rgba(0,0,0,.7)); }
.phone img{ width:100%; height:auto; }

/* ============================================================
   FEATURE PILLARS (home) — Slash-style tiles
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pillar{
  position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:20px;
  padding:30px; overflow:hidden; transition:border-color .25s, transform .25s, background .25s;
  display:flex; flex-direction:column; min-height:230px;
}
.pillar:hover{ border-color:var(--line-2); transform:translateY(-4px); background:var(--bg-2); }
.pillar .p-ico{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(65,170,161,.12); color:var(--teal-br); margin-bottom:18px; }
.pillar .p-ico svg{ width:24px; height:24px; }
.pillar h3{ font-size:21px; margin-bottom:8px; }
.pillar p{ color:var(--ink-2); font-size:15px; }
.pillar .p-link{ margin-top:auto; padding-top:18px; font-weight:900; font-size:14px; color:var(--teal-br);
  display:inline-flex; align-items:center; gap:6px; }
.pillar .p-link svg{ width:16px; height:16px; transition:transform .2s; }
.pillar:hover .p-link svg{ transform:translateX(4px); }
.pillar.span2{ grid-column:span 2; }

/* check rows + step numbers (feature pages) */
.t-check{ flex:none; width:24px; height:24px; border-radius:50%; background:rgba(65,170,161,.14);
  color:var(--teal-br); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.t-check svg{ width:14px; height:14px; }
.step-num{ width:42px; height:42px; border-radius:12px; background:rgba(65,170,161,.12); color:var(--teal-br);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:19px; margin-bottom:16px; }

/* generic 2-col feature row */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.split.rev .split-media{ order:-1; }

/* stat strip */
.stats{ display:flex; flex-wrap:wrap; gap:14px; }
.stat{ flex:1 1 160px; background:var(--bg-1); border:1px solid var(--line); border-radius:16px; padding:24px; }
.stat .s-num{ font-size:clamp(30px,3.6vw,44px); font-weight:900; letter-spacing:-.02em; }
.stat .s-lab{ color:var(--ink-2); font-size:14px; margin-top:4px; }

/* logos / trust */
.trust{ display:flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,56px); flex-wrap:wrap; }
.trust .t-item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.stars{ color:#E3C05A; font-size:18px; letter-spacing:2px; text-shadow:0 0 1px rgba(243,227,166,.5); }

/* ============================================================
   PRO pricing
   ============================================================ */
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:880px; margin:0 auto; }
.plan{ background:var(--bg-1); border:1px solid var(--line); border-radius:24px; padding:34px; }
.plan.pro{ border-color:rgba(255,200,19,.4); background:linear-gradient(180deg, rgba(255,200,19,.06), transparent 40%), var(--bg-1);
  box-shadow:0 30px 80px -40px rgba(255,200,19,.35); }
.plan .pl-name{ font-weight:900; font-size:20px; display:flex; align-items:center; gap:10px; }
.plan .pl-price{ font-size:48px; font-weight:900; letter-spacing:-.02em; margin:14px 0 2px; }
.plan .pl-price small{ font-size:16px; color:var(--ink-2); font-weight:700; }
.plan .pl-sub{ color:var(--ink-3); font-size:13px; min-height:18px; }
.plan ul{ list-style:none; margin:24px 0; display:flex; flex-direction:column; gap:13px; }
.plan li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink-2); }
.plan li svg{ width:19px; height:19px; flex:none; margin-top:1px; }
.plan li.on{ color:var(--ink); }
.plan li .ok{ color:var(--teal-br); } .plan li .no{ color:var(--ink-3); }

/* ---- animated concert FX over the showcase phone header ---- */
.aoki-fx{
  position:absolute; top:1.7%; left:3.2%; right:3.2%; height:47%;
  border-radius:42px 42px 0 0 / 46px 46px 0 0;
  overflow:hidden; pointer-events:none; z-index:3;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%);
}
.aoki-beams{
  position:absolute; left:50%; top:-30%; width:230%; height:150%;
  transform-origin:50% 0; mix-blend-mode:screen; opacity:.55;
  background:
    conic-gradient(from 90deg at 50% 0,
      transparent 0deg, rgba(255,40,120,0) 6deg, rgba(255,40,120,.5) 11deg, transparent 16deg,
      transparent 30deg, rgba(80,200,255,.45) 36deg, transparent 42deg,
      transparent 58deg, rgba(255,180,40,.5) 64deg, transparent 70deg,
      transparent 110deg, rgba(180,80,255,.45) 116deg, transparent 122deg,
      transparent 140deg, rgba(80,255,180,.4) 146deg, transparent 152deg,
      transparent 180deg);
  animation:aokiBeams 7s ease-in-out infinite alternate;
}
@keyframes aokiBeams{ from{ transform:translateX(-50%) rotate(-13deg); } to{ transform:translateX(-50%) rotate(13deg); } }
.aoki-strobe{
  position:absolute; inset:0; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.5),transparent 60%);
  animation:aokiStrobe 2.6s steps(1,end) infinite;
}
@keyframes aokiStrobe{ 0%,92%{ opacity:0; } 93%{ opacity:.7; } 94%{ opacity:0; } 96%{ opacity:.55; } 97%,100%{ opacity:0; } }
.aoki-embers{ position:absolute; inset:0; mix-blend-mode:screen; }
.aoki-embers span{
  position:absolute; bottom:-6%; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle,#ffd27a,#ff7a18 55%,transparent 72%);
  filter:drop-shadow(0 0 4px rgba(255,140,30,.8));
  animation:aokiEmber linear infinite;
}
@keyframes aokiEmber{
  0%{ transform:translateY(0) scale(.7); opacity:0; }
  12%{ opacity:1; }
  80%{ opacity:.9; }
  100%{ transform:translateY(-300px) translateX(var(--dx,0)) scale(1.1); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .aoki-beams,.aoki-strobe,.aoki-embers span{ animation:none; }
  .aoki-strobe{ opacity:0; }
}

/* feature cards grid (pro) */
.pro-callout{
  background:rgba(16,18,20,.86); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line-2); border-radius:16px; padding:14px 16px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.85); min-width:178px;
}
.pro-ico{
  width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:17px; font-family:Georgia,serif;
}
/* scrolling app-icon marquee inside the callout */
.ico-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.ico-track{ display:flex; gap:9px; width:max-content; animation:icoScroll 26s linear infinite; }
.ico-track img{ width:42px; height:42px; border-radius:10px; flex:none; box-shadow:0 2px 8px -2px rgba(0,0,0,.6); }
@keyframes icoScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ico-track{ animation:none; } }
.pro-theme{
  display:flex; align-items:center; justify-content:center; padding:9px 12px; border-radius:8px;
  font-weight:900; font-size:11px; letter-spacing:.12em;
}
@media (max-width:880px){ .pro-callout{ display:none; } }

.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fcard{ background:var(--bg-1); border:1px solid var(--line); border-radius:18px; padding:26px;
  transition:border-color .25s, transform .25s; }
.fcard:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.fcard .f-ico{ width:42px; height:42px; border-radius:11px; background:rgba(255,200,19,.12); color:var(--amber);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.fcard .f-ico svg{ width:22px; height:22px; }
.fcard h3{ font-size:18px; margin-bottom:7px; }
.fcard p{ color:var(--ink-2); font-size:14px; }
.fcard .soon{ font-size:11px; font-weight:900; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:5px; padding:2px 7px; display:inline-block; margin-top:12px; }

/* ============================================================
   CTA band + Footer
   ============================================================ */
.cta-band{ position:relative; overflow:hidden; border-radius:28px; padding:clamp(40px,6vw,72px);
  background:linear-gradient(135deg, #0e1817, #0a0b0c); border:1px solid var(--line-2); text-align:center; }

footer{ border-top:1px solid var(--line); padding:64px 0 40px; background:var(--bg-1); }
.f-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.f-col h4{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; font-weight:700; }
.f-col a{ display:block; color:var(--ink-2); font-size:15px; padding:6px 0; transition:color .15s; }
.f-col a:hover{ color:var(--ink); }
.f-logo img{ height:26px; margin-bottom:16px; }
.f-social{ display:flex; gap:12px; margin-top:18px; }
.f-social a{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); display:flex;
  align-items:center; justify-content:center; color:var(--ink-2); transition:all .2s; }
.f-social a:hover{ color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.04); }
.f-social svg{ width:18px; height:18px; }
.f-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px; }
.f-bottom a{ color:var(--ink-3); } .f-bottom a:hover{ color:var(--ink-2); }

/* ---------- prototype hero toggle (home only) ---------- */
.hero-toggle{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:120;
  display:flex; align-items:center; gap:4px; background:rgba(13,14,16,.9); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:5px; box-shadow:0 14px 40px -12px rgba(0,0,0,.8);
}
.hero-toggle .ht-label{ font-size:11px; font-weight:700; color:var(--ink-3); padding:0 10px; letter-spacing:.04em; }
.hero-toggle button{ font-weight:900; font-size:13px; padding:8px 16px; border-radius:var(--r-pill); color:var(--ink-2);
  transition:all .2s; white-space:nowrap; }
.hero-toggle button.on{ background:var(--teal); color:#03100E; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-cta .btn:not(.burger-keep){ display:none; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .pillar.span2{ grid-column:span 2; }
  .fgrid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .split.rev .split-media{ order:0; }
  .price-grid{ grid-template-columns:1fr; }
  .f-grid{ grid-template-columns:1fr 1fr; }
  .f-col.f-logo{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .pillars{ grid-template-columns:1fr; }
  .pillar.span2{ grid-column:span 1; }
  .fgrid{ grid-template-columns:1fr; }
  .f-grid{ grid-template-columns:1fr 1fr; gap:30px 24px; }
  /* brand block sits full-width on top so the link columns align in a tidy grid */
  .f-col.f-logo{ grid-column:1 / -1; }
  .f-social{ margin-top:14px; }
  .f-bottom{ flex-direction:column; align-items:flex-start; gap:8px; margin-top:36px; }
  .display{ font-size:clamp(38px,11vw,56px); }
  .searchbox input{ font-size:16px; }
  .section{ padding:64px 0; }

  /* ---- mobile CTA treatment: slimmer, equal-width, aligned ---- */
  .btn-lg{ padding:14px 22px; font-size:15px; }
  /* hero/CTA button pairs become one tidy equal-width column */
  .reveal.d3:has(> .btn-lg),
  .split > div > div:has(> .btn-lg){
    flex-direction:column; align-items:stretch; gap:10px;
    width:100%;
  }
  .reveal.d3:has(> .btn-lg) .btn,
  .split > div > div:has(> .btn-lg) .btn{ width:100%; }
  /* store badges: equal-width pair, matched to the button column */
  .stores{ width:100%; max-width:360px; gap:10px; }
  .stores .store{ flex:1 1 0; justify-content:center; min-width:0; }
}

/* ================= Legal / rich-text (privacy policy) ================= */
.prose.w-richtext{ color:var(--ink-2); }
.prose.w-richtext p{ margin:14px 0; line-height:1.75; }
.prose.w-richtext ul,
.prose.w-richtext ol{ margin:14px 0; padding-left:26px; line-height:1.75; }
.prose.w-richtext li{ margin:10px 0; }
.prose.w-richtext li > ul,
.prose.w-richtext li > ol{ margin:10px 0; }
.prose.w-richtext a{ color:var(--teal-br); text-decoration:underline; }
/* section headings (bold + underlined) get generous separation between sections */
.prose.w-richtext p:has(strong u){ margin-top:48px; color:var(--ink); font-size:19px; }
.prose.w-richtext > p:first-child{ margin-top:0; }
/* underline-only sub-headings + lead-in paragraphs get a smaller gap above */
.prose.w-richtext p:has(> u){ margin-top:26px; }

/* ================= Legal / TOS numbered sections ================= */
.prose ol.tos{ list-style:decimal; margin:14px 0 0; padding-left:26px; color:var(--ink-2); }
.prose ol.tos > li{ margin-top:34px; line-height:1.6; }
.prose ol.tos > li::marker{ font-weight:900; color:var(--ink); }
.prose ol.tos > li > strong:first-child{ color:var(--ink); font-weight:900; }
.prose ol.tos ul{ list-style:disc; margin:12px 0; padding-left:22px; }
.prose ol.tos ul ul{ list-style:circle; }
.prose ol.tos li li{ margin:8px 0; line-height:1.6; }
.prose ol.tos p{ margin:12px 0; line-height:1.6; }