/* The home page (site/index.html) and nothing else: white, with motion as you scroll (assets/js/landing.js). System
   fonts only, so the page can keep a strict Content-Security-Policy (site/_headers: nothing inline, nothing from
   other sites). The plan cards and the comparison come from assets/js/plans.js (classes h-plan*, h-compare*,
   h-checks, btn btn--*), so those are styled here too. Every scroll effect has a final state that simply shows with
   reduced motion (the .reduce rules at the end). Colours follow the app's: navy ink, the bull's red, money green. */
:root {
  --bg: #ffffff; --paper2: #F2F3F7; --card: #ffffff; --ink: #14182E; --dim: #5B6175; --line: rgba(20,24,46,0.10);
  --red: #C8102E; --red-soft: #FBE9EC; --gold: #B57B00; --gold-soft: #F0C35A; --green: #0B6E4A; --green-soft: #EAF4EF; --orange: #B63C09;
  --shadow-float: 0 1px 2px rgba(20,24,46,0.06), 0 16px 40px -12px rgba(20,24,46,0.22);
  --shadow-phone: 0 1px 2px rgba(20,24,46,0.08), 0 40px 80px -30px rgba(20,24,46,0.45);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --nav: 72px; --gutter: clamp(16px, 5vw, 72px); --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scroll-padding-top: var(--nav); }
body { margin: 0; font: 18px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
::selection { background: var(--ink); color: #fff; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1400px; margin-left: auto; margin-right: auto; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); margin-right: 8px; vertical-align: middle; }
.on .live { animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------- buttons (ours, and the ones plans.js and site.js draw) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: 600 16px/1.2 var(--sans);
  text-decoration: none; background: var(--ink); color: #fff; border: 1px solid var(--ink); cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s, color .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(20,24,46,0.5); }
.btn.ghost, .btn.h-btn-glass { background: rgba(255,255,255,0.85); color: var(--ink); border-color: rgba(20,24,46,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn.sm, .btn.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn.lg, .btn.btn--lg { padding: 16px 26px; font-size: 17px; }
.btn.btn--block { width: 100%; }
.btn.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn.h-btn-light { background: var(--gold-soft); color: #1a1403; border-color: var(--gold-soft); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--paper2); color: var(--dim); border-color: transparent; cursor: default; transform: none !important; box-shadow: none !important; }
.btn .icon { width: 18px; height: 18px; }
.h-btn-app__tag { margin-left: 2px; padding: 2px 8px; border-radius: 999px; background: var(--red-soft); color: var(--red); font: 600 12px/18px var(--sans); letter-spacing: 0.02em; }

/* ---------- states the shared scripts set on <html> (site.js, plans.js): the same rules as site.css */
html:not([data-auth="in"]) [data-auth-show="in"], html[data-auth="in"] [data-auth-show="out"] { display: none !important; }
html:not([data-visitor="invite"]) [data-offer="invite"], html[data-visitor="invite"] [data-offer="trial"] { display: none !important; }
html[data-founder="unknown"] [data-when]:not([data-when~="unknown"]), html[data-founder="open"] [data-when]:not([data-when~="open"]),
html[data-founder="closed"] [data-when]:not([data-when~="closed"]) { display: none !important; }
[data-app-live] { display: none !important; }
html[data-app-store="live"] [data-app-live] { display: revert !important; }
html[data-app-store="live"] [data-app-soon] { display: none !important; }
[data-team-live] { display: none !important; }
html[data-team-logins="live"] [data-team-live] { display: revert !important; }
html[data-team-logins="live"] [data-team-soon] { display: none !important; }
/* Free during launch (plans.js initPricing sets data-launch from the server's LAUNCH_FREE): the launch words show until
   the server says it's over ("paid"), then the trial words come back. */
[data-launch-hide] { display: none !important; }
html[data-launch="paid"] [data-launch-hide] { display: revert !important; }
html[data-launch="paid"] [data-launch-show] { display: none !important; }

/* ---------- the invited-visitor bar (site.js shows it) and the iPhone app bar (site.js draws it) */
.invite-bar { position: relative; z-index: 51; background: var(--gold-soft); color: #1a1403; padding: 10px var(--gutter); font-size: 15px; text-align: center; }
.invite-bar p { margin: 0; }
.invite-bar .link { font-weight: 700; color: inherit; }
.app-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  border-radius: 16px; background: rgba(255,255,255,0.94); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-float); }
.app-bar__icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; flex: none; }
.app-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; color: var(--dim); }
.app-bar__text strong { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.app-bar__get { flex: none; }
.app-bar__close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--dim); cursor: pointer; }
.app-bar__close .icon { width: 18px; height: 18px; }
html[data-app-bar] body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* ---------- top bar */
.top { position: fixed; inset: 0 0 auto 0; height: var(--nav); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter); transition: transform .45s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.top.solid { background: rgba(255,255,255,0.97); border-color: var(--line); }
.top.hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.top nav { display: flex; gap: 26px; font-size: 14px; color: var(--dim); }
.top nav a { text-decoration: none; transition: color .2s; }
.top nav a:hover { color: var(--ink); }
.top-actions { display: flex; gap: 8px; }
@media (max-width: 900px) { .top nav { display: none; } }
@media (max-width: 600px) { :root { --nav: 64px; } .top-actions .ghost { display: none; } .brand img { height: 26px; } }

/* ---------- hero: the cards fan out, then one is found and priced */
.hero { position: relative; height: 230vh; }
.hero-stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; background: radial-gradient(ellipse at 50% 110%, rgba(200,16,46,0.07), transparent 55%); }
#cards { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 80%, var(--bg)); }
.hero-copy { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; text-align: center; padding: var(--nav) var(--gutter) 0; pointer-events: none; }
.hero-words { font-size: clamp(40px, 8vw, 118px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; max-width: 14ch; }
.hero-words .w { display: inline-block; will-change: transform, opacity; }
.hero-words .w.accent { background: linear-gradient(90deg, #e0263f, var(--red) 60%, #8f0b21); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin-top: 26px; max-width: 46ch; color: var(--dim); font-size: clamp(16px, 1.5vw, 20px); will-change: transform, opacity; }
.h-hero__actions { margin-top: 26px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
/* Above the headline: Apple's "Download on the App Store" badge (get-app.css). The owner, 2026-11-05: it started as a
   "public beta, Join on TestFlight" pill (L-352), then "this didnt become the download on the app store" (L-355): it now
   opens the two TestFlight steps (QR codes on a computer) and, once the App Store link is set, the App Store. */
.hero-beta { pointer-events: auto; margin-bottom: 22px; will-change: transform, opacity; }
.h-hero__fine { margin-top: 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14px; color: var(--dim); }
/* With JavaScript (boot.js marks the page before first paint) the copy starts hidden and the script brings it in; without it, everything simply shows. */
.js:not(.reduce) .hero-beta, .js:not(.reduce) .hero-words .w, .js:not(.reduce) .hero-sub, .js:not(.reduce) .h-hero__actions, .js:not(.reduce) .h-hero__fine { opacity: 0; }
.h-hero__fine li::before { content: "✓"; color: var(--green); margin-right: 7px; }
.hero-found { position: absolute; z-index: 3; left: 50%; top: 0; transform: translate(-50%, 50vh); will-change: transform, opacity; display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,0.94); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-float);
  opacity: 0; min-width: 240px; pointer-events: none; }
.hero-found b { font-size: 22px; letter-spacing: -0.02em; }
.hero-found .sub { color: var(--dim); font-size: 13px; }
.hero-found .price { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.hero-found .price i { font: 700 28px/1 var(--mono); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-found .price em { font: 12px/1 var(--mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.hero-tele { position: absolute; left: var(--gutter); bottom: 28px; display: grid; gap: 8px; opacity: 0; z-index: 2; }
.hero-tele > div { display: flex; gap: 14px; align-items: baseline; }
.hero-tele b { font-family: var(--mono); font-weight: 500; font-size: 18px; color: var(--ink); min-width: 4ch; font-variant-numeric: tabular-nums; }
.hero-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; z-index: 2; }
.hero-hint i { display: block; width: 1px; height: 46px; background: linear-gradient(to bottom, var(--ink), transparent); position: relative; overflow: hidden; }
.hero-hint i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--red); transform: translateY(-100%); animation: drop 1.6s ease-in-out infinite; }
@keyframes drop { to { transform: translateY(275%); } }
@media (max-height: 720px) { .hero-hint { display: none; } }
@media (max-width: 760px) { .hero { height: 200vh; } .hero-tele { display: none; } .hero-found { min-width: 0; padding: 12px 14px; } .hero-found b { font-size: 18px; } .hero-found .price i { font-size: 22px; } .hero-found .price em { white-space: nowrap; } }
@media (max-width: 600px) {
  .hero-copy { align-content: start; padding-top: calc(var(--nav) + 4vh); }
  .hero-words { font-size: clamp(34px, 11vw, 48px); }
  .hero-beta { margin-bottom: 14px; }
  .hero-sub { font-size: 15px; margin-top: 16px; max-width: 40ch; }
  .h-hero__actions { margin-top: 18px; gap: 8px; } .h-hero__actions .btn { padding: 13px 20px; font-size: 16px; }
  .h-hero__fine { margin-top: 12px; font-size: 13px; gap: 4px 14px; }
}

/* ---------- the statement */
.statement { position: relative; z-index: 2; padding: 10vh var(--gutter) 12vh; margin-top: -10vh; }
.statement p { max-width: 1100px; margin: 0 auto; font-size: clamp(28px, 4.8vw, 72px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.statement .w { opacity: 0.16; transition: opacity .35s ease; display: inline-block; }
.statement .w.lit { opacity: 1; }
.statement .w.lit.gold { color: var(--red); }

/* ---------- 01: the trade, built step by step */
#how { position: relative; height: 250vh; }
.how-stage { position: sticky; top: 0; height: var(--vh); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0 5vw; align-content: start; padding: calc(var(--nav) + 2vh) var(--gutter) 2vh; overflow: hidden; max-width: 1400px; margin: 0 auto; }
.how-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(circle at 70% 55%, rgba(200,16,46,0.07), transparent 45%),
  repeating-linear-gradient(0deg, transparent 0 39px, rgba(20,24,46,0.05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(20,24,46,0.05) 39px 40px);
  mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 75%); }
.how-head { grid-column: 1 / -1; align-self: start; padding-bottom: 2vh; }
.how-head h2, .sec-head h2 { font-size: clamp(30px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin-top: 12px; }
.how-head h2 { max-width: 22ch; }
.how-head p, .sec-head p { color: var(--dim); max-width: 56ch; margin-top: 14px; font-size: clamp(15px, 1.25vw, 18px); }
.how-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: start; align-content: safe center; min-width: 0; min-height: 0; overflow: hidden; grid-column: 1; grid-row: 2; }
.step { display: grid; gap: 2px; padding: 12px 16px 12px 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; position: relative; opacity: 0.4; transform: translateX(-10px); transition: opacity .45s, transform .45s, border-color .45s, background .45s, box-shadow .45s; }
.step::before { content: attr(data-step); position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); font: 600 11px/18px var(--mono); text-align: center; color: var(--dim); transition: background .4s, color .4s, border-color .4s; }
.step b { font-size: 16px; } .step span { font-size: 14px; color: var(--dim); }
.step.on { opacity: 1; transform: none; border-color: rgba(200,16,46,0.35); box-shadow: var(--shadow-float); }
.step.on::before { background: var(--red); border-color: var(--red); color: #fff; }
.deal { position: relative; grid-column: 2; grid-row: 2 / 4; align-self: center; min-width: 0; max-height: 100%; overflow: hidden; border-radius: 22px; background: var(--card); border: 1px solid var(--line); padding: 18px 20px; display: grid; gap: 12px; box-shadow: var(--shadow-phone); will-change: transform; }
.deal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.deal-rate { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.deal-rate i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--red) calc(var(--rate, 0) * 1%), rgba(20,24,46,0.1) 0); position: relative; }
.deal-rate i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.deal-rate b { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.deal-side { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--paper2); border: 1px solid transparent;
  opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s; }
.row.in { opacity: 1; transform: none; border-color: var(--line); }
.art { width: 44px; aspect-ratio: 600 / 825; border-radius: 4px; overflow: hidden; background: rgba(20,24,46,0.06); display: grid; place-items: center; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art.box svg { width: 24px; height: 24px; fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-linejoin: round; }
.row .name { font-weight: 600; font-size: 15px; line-height: 1.25; min-width: 0; } .row .name small { display: block; font-weight: 400; font-size: 12px; color: var(--dim); }
.row .amt { font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-math { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed rgba(20,24,46,0.2); }
.line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 15px; color: var(--dim); opacity: 0.3; transition: opacity .4s; }
.line b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.line b.neg { color: var(--orange); }
.line.total { font-size: 17px; color: var(--ink); }
.line.total b { font-size: clamp(22px, 2.2vw, 30px); color: var(--green); font-weight: 700; }
.line.total b.out { color: var(--orange); }
.line.on { opacity: 1; }
.pay { display: flex; gap: 6px; flex-wrap: wrap; opacity: 0; transition: opacity .4s; }
.pay span { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.pay.on { opacity: 1; }
.pay.on span:first-child { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.deal-done { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--green-soft); border: 1px solid rgba(11,110,74,0.3); color: var(--green); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.deal-done .check { width: 20px; height: 20px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.deal-done .check svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; }
.deal-done.on { opacity: 1; transform: none; }
.show-tile { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 14px; z-index: 2; display: grid; grid-template-columns: repeat(3, auto); gap: 6px 18px; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: #fff; border: 1px solid var(--ink);
  box-shadow: var(--shadow-float); opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
.show-tile > .mono, .show-tile .synced { grid-column: 1 / -1; }
.show-tile .mono { color: #B9BED3; }
.show-tile small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #B9BED3; }
.show-tile b { font: 600 clamp(16px, 1.6vw, 22px)/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.show-tile b[data-show="profit"] { color: #7EE2B0; }
.show-tile .synced { font-size: 12px; color: #B9BED3; }
.show-tile.on { opacity: 1; transform: none; }
.show-tile.on .synced { color: #7EE2B0; }
@media (max-width: 900px) {
  #how { height: 220vh; }
  .how-stage { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding-top: calc(var(--nav) + 6px); }
  .how-head h2 { font-size: clamp(22px, 6vw, 34px); } .how-head p { display: none; }
  .how-steps { grid-template-columns: 1fr; align-content: start; grid-row: 2; }
  .step:not(.now) { display: none; }
  .step { padding: 8px 10px 8px 38px; } .step::before { left: 10px; top: 9px; width: 18px; height: 18px; font-size: 10px; line-height: 16px; } .step b { font-size: 14px; line-height: 1.2; } .step span { font-size: 13px; }
  .deal { grid-column: 1; grid-row: 3; padding: 10px 10px; gap: 6px; align-self: start; border-radius: 16px; }
  .deal-top { gap: 6px; } .deal-rate { font-size: 12px; } .deal-rate i { width: 26px; height: 26px; } .deal-rate i::after { inset: 4px; }
  .row { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 5px 8px; } .art { width: 32px; } .row .name { font-size: 13px; } .row .name small { font-size: 11px; } .row .amt { font-size: 14px; }
  .deal-math { padding-top: 6px; gap: 4px; } .line.total b { font-size: 22px; }
  .pay, .deal-done { display: none; }
  .show-tile { grid-column: 1; grid-row: 4; margin-top: 4px; padding: 10px 12px; gap: 4px 12px; }
}
@media (max-height: 740px) and (max-width: 900px) { .show-tile { display: none; } }
@media (max-height: 880px) and (min-width: 901px) {
  .how-stage { padding-top: calc(var(--nav) + 4px); gap: 0 3vw; }
  .how-head h2 { font-size: clamp(24px, 3.2vw, 40px); } .how-head p { display: none; }
  .step { padding: 8px 12px 8px 40px; } .step span { display: none; }
  .deal { padding: 12px 14px; gap: 8px; } .row { padding: 6px 8px; } .pay { display: none; }
  .deal-done { padding: 6px 12px; } .show-tile { padding: 10px 14px; margin-top: 8px; }
}
@media (max-height: 940px) and (min-width: 901px) { .pay { display: none; } }
@media (max-height: 720px) and (min-width: 901px) { .deal-done { display: none; } }

/* ---------- 02: the stack of feature cards */
.stack { position: relative; padding: 0 var(--gutter) 10vh; }
.stack .sec-head { padding: 12vh 0 8vh; max-width: 1400px; margin: 0 auto; }
.card { position: sticky; top: calc(var(--nav) + 8px); height: calc(var(--vh) - var(--nav) - 44px); max-width: 1400px; margin: 0 auto 12vh;
  border-radius: 28px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transform-origin: 50% 0;
  display: grid; grid-template-columns: 1fr 1fr; will-change: transform; box-shadow: 0 -10px 40px -20px rgba(20,24,46,0.3), var(--shadow-float); }
/* The dimming as the next card slides over: a layer of its own (landing.js adds it and sets its opacity), not a filter,
   so nothing repaints. Its opacity is set directly: an earlier version read it from a --dim variable, which is also the
   name of the grey text colour, so a card never dimmed yet got a colour for an opacity and showed as a solid navy block. */
.card-dim { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; pointer-events: none; z-index: 3; }
.card:nth-child(2n) { top: calc(var(--nav) + 20px); }
.card:nth-child(3n) { top: calc(var(--nav) + 32px); }
.card .copy { padding: clamp(24px, 4vw, 64px); display: grid; align-content: center; gap: 16px; min-width: 0; }
.card .copy h3 { font-size: clamp(26px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.card .copy p { color: var(--dim); font-size: clamp(15px, 1.2vw, 18px); max-width: 48ch; }
.card .copy ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.card .copy li { font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: var(--paper2); }
.card .copy .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.card .shot { position: relative; overflow: hidden; display: grid; place-items: end center; min-width: 0; background: var(--tint, var(--paper2)); }
.phone { position: relative; width: min(74%, 330px); aspect-ratio: 1206 / 2622; border-radius: 48px; border: 10px solid #15192a; background: #000; overflow: hidden;
  box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255,255,255,0.08); transform: translateY(14%); }
.phone img, .phone video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone::after { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 34%; height: 24px; border-radius: 999px; background: #000; }
.shot-desk { place-items: center; padding: 6% 6% 0; }
.laptop { position: relative; width: 100%; border-radius: 14px 14px 0 0; border: 8px solid #15192a; border-bottom: 0; background: #000; overflow: hidden; box-shadow: var(--shadow-phone); transform: translateY(10%); }
.laptop img { width: 100%; height: auto; }
.card.c-scan { --tint: linear-gradient(160deg, #E3F4EB, #FFFFFF); }
.card.c-prices { --tint: linear-gradient(160deg, #FCF0CC, #FFFFFF); }
.card.c-deals { --tint: linear-gradient(160deg, #FBE9EC, #FFFFFF); }
.card.c-shows { --tint: linear-gradient(160deg, #E4ECFC, #FFFFFF); }
.card.c-record { --tint: linear-gradient(160deg, #EEE6FA, #FFFFFF); }
.card.c-team { --tint: linear-gradient(160deg, #E3F4EB, #FFFFFF); }
.card.c-desk { --tint: linear-gradient(160deg, #E4ECFC, #FFFFFF); }
@media (max-width: 900px) {
  .card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: calc(var(--vh) - var(--nav) - 44px); border-radius: 22px; }
  .card .shot { height: auto; min-height: 0; }
  .card .copy { padding: 20px 20px 8px; gap: 10px; } .card .copy h3 { font-size: clamp(22px, 6vw, 32px); } .card .copy p { font-size: 14px; }
  .card .copy ul { display: none; }
  .phone { width: auto; height: 112%; max-width: 78%; transform: translateY(8%); border-width: 7px; border-radius: 34px; }
  .shot-desk { padding: 4% 4% 0; align-items: end; } .laptop { transform: translateY(6%); }
}
@media (max-height: 720px) and (min-width: 901px) { .card .copy { gap: 10px; } .card .copy p { font-size: 15px; } .card .copy h3 { font-size: clamp(24px, 2.8vw, 38px); } .phone { width: min(60%, 260px); } }

/* ---------- numbers (the one navy band on the page) */
#numbers { position: relative; height: 220vh; }
.numbers-stage { position: sticky; top: 0; height: var(--vh); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 6vh; overflow: hidden; padding-top: var(--nav); background: var(--ink); color: #fff; }
.numbers-stage .mono { color: #B9BED3; }
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto; width: 100%; }
.counters b { display: block; font-size: clamp(40px, 6vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, var(--gold-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counters small { display: block; margin-top: 10px; color: #B9BED3; font-size: 14px; }
.counters .mono { display: block; margin-bottom: 14px; }
/* The live "cards scanned" number (scan-counter.js, L-345): above the four counters, shown once the server answers. */
.live-count { padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto; width: 100%; }
.live-count[hidden] { display: none; }
.live-count .mono { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.live-count b { display: block; font-size: clamp(56px, 10vw, 152px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, var(--gold-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.live-count small { display: block; margin-top: 12px; color: #B9BED3; font-size: 15px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61,220,132,0.6); animation: live-dot 2s ease-out infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,0.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(61,220,132,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.marquees { display: grid; gap: 14px; min-width: 0; overflow: hidden; }
.marquee { display: flex; gap: 14px; white-space: nowrap; will-change: transform; width: max-content; }
.marquee span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); font-size: 16px; }
.marquee span i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--gold-soft); text-transform: uppercase; }
@media (max-width: 900px) { #numbers { height: 190vh; } .counters { grid-template-columns: 1fr 1fr; gap: 24px 12px; } .counters b { font-size: clamp(34px, 11vw, 56px); } .counters small { font-size: 13px; } .marquee span { font-size: 14px; padding: 12px 16px; } }
@media (max-height: 720px) { .numbers-stage { gap: 4vh; } .counters b { font-size: clamp(34px, 5vw, 64px); } .counters small { display: none; } .live-count b { font-size: clamp(44px, 7vw, 96px); } .live-count small { display: none; } }

/* ---------- 03: the rest. An index, not a grid of icon tiles (the owner, 2026-11-01: "it looks so ai generated. i see
   the same layout on other peoples pages"): four numbered groups of rows on hairlines, and on computers a phone beside
   them that shows the app screen of the group being read (landing.js). */
.more { padding: 14vh 0 6vh; }
.index { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: 0 6vw; margin-top: 7vh; }
.index-shot { position: sticky; top: calc(var(--nav) + 4vh); align-self: start; height: calc(var(--vh) - var(--nav) - 8vh); display: grid; place-items: center; }
.index-shot .phone { width: auto; height: min(100%, 640px); max-width: 100%; transform: none; }
.index-shot .phone img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.index-shot .phone img.on { opacity: 1; }
.group { padding: 28px 0 7vh; border-top: 2px solid var(--ink); }
.group-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 16px; align-items: baseline; padding-bottom: 22px; }
.g-n { font: 600 13px/1 var(--mono); letter-spacing: 0.14em; color: var(--dim); transition: color .4s; }
.group.on .g-n { color: var(--red); }
.group-head h3 { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.group-head p { grid-column: 2; color: var(--dim); font-size: clamp(15px, 1.2vw, 18px); max-width: 52ch; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: grid; grid-template-columns: 72px minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 4px 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.r-n { font: 500 12px/1.6 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.rows h4 { margin: 0; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.rows p { color: var(--dim); font-size: 15px; }
.rows p a { color: var(--ink); }
.more-link { margin-top: 8px; } .more-link a { color: var(--ink); font-weight: 600; }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
@media (max-width: 1180px) {
  .rows li { grid-template-columns: 72px minmax(0, 1fr); }
  .rows li p { grid-column: 2; }
}
@media (max-width: 900px) {
  .index { grid-template-columns: minmax(0, 1fr); margin-top: 4vh; }
  .index-shot { display: none; }
  .group { padding: 22px 0 5vh; }
  .group-head, .rows li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .group-head { padding-bottom: 14px; }
  .group-head h3 { font-size: clamp(24px, 6.5vw, 32px); }
  .rows li { padding: 14px 0; }
  .rows h4 { font-size: 16px; } .rows p { font-size: 14px; }
}

/* ---------- 04: pricing (the cards and the table are plans.js's markup) */
.pricing { padding: 10vh 0 6vh; background: var(--paper2); border-top: 1px solid var(--line); }
.founder { display: grid; grid-template-columns: 1fr auto; gap: 14px 32px; align-items: center; margin: 5vh auto 4vh; }
.founder-line { font-size: 16px; color: var(--dim); max-width: 70ch; } .founder-line strong { color: var(--red); }
.founder-count { margin-top: 6px; font-size: 14px; color: var(--dim); } .founder-count strong { color: var(--ink); }
.meter { display: grid; grid-template-columns: repeat(50, 1fr); gap: 2px; width: min(100%, 260px); height: 10px; }
.meter span { background: rgba(20,24,46,0.12); border-radius: 1px; } .meter span.is-claimed { background: var(--red); }
html[data-founder="unknown"] .meter, html[data-stats="failed"] .meter { visibility: hidden; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.h-plan { display: grid; align-content: start; gap: 16px; padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: #fff; min-width: 0; }
.h-plan--featured { border-color: rgba(200,16,46,0.35); background: linear-gradient(180deg, var(--red-soft), #fff 40%); box-shadow: var(--shadow-float); }
.h-plan__top { display: grid; gap: 6px; }
.h-plan__name { font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.h-plan__tag { justify-self: start; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(200,16,46,0.4); }
.h-plan__tagline { color: var(--dim); font-size: 14px; }
.h-plan__price { display: grid; gap: 6px; }
.h-plan__row { display: flex; align-items: baseline; gap: 8px; }
.h-plan__num { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.h-plan__unit { color: var(--dim); font-size: 14px; }
.h-plan__founder { font-size: 13px; color: var(--dim); } .h-plan__founder strong { color: var(--red); }
.h-plan__cta { display: grid; gap: 8px; }
.h-plan__fine { font-size: 13px; color: var(--dim); }
.h-plan__intro { color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono); font-size: 11px; }
.h-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.h-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.h-checks .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--green); }
/* "Every plan includes" above the plan cards (plans.js everyPlanHtml). */
.h-every { margin-bottom: 18px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--line); background: #fff; }
.h-every:empty { display: none; }
.h-every__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; }
.h-every__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
@media (max-width: 1100px) { .h-every__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .h-every { padding: 18px 16px; } .h-every__list { grid-template-columns: 1fr; } }
.h-plan__tag--launch { color: var(--green); border-color: currentColor; }
.compare { margin-top: 6vh; min-width: 0; overflow: hidden; }
.compare h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; margin-bottom: 16px; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.h-compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.h-compare th, .h-compare td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.h-compare thead th { border-top: 0; background: var(--paper2); vertical-align: bottom; }
.h-compare th[scope="row"] { font-weight: 500; color: var(--dim); }
.h-compare__hint { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--dim); opacity: 0.85; }
.h-compare .is-featured { background: rgba(200,16,46,0.04); }
.h-compare__plan { display: block; font-weight: 700; font-size: 15px; } .h-compare__price { display: block; color: var(--dim); font-size: 13px; } .h-compare__per { color: var(--dim); }
.h-compare__yes { width: 18px; height: 18px; color: var(--green); } .h-compare__no { color: rgba(20,24,46,0.3); }
.pricing-fine { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; color: var(--dim); font-size: 14px; max-width: 80ch; }
.pricing-fine strong { color: var(--ink); }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; } .founder { grid-template-columns: 1fr; } .meter { width: 100%; }
  /* Phones: the comparison stacks, a row per line with the four plans across it, so nothing is wider than the screen
     (a wide table, even inside a scroll box, makes Chrome on a phone lay the whole page out wider). */
  .compare { overflow: visible; } .compare-scroll { overflow: visible; border: 0; border-radius: 0; background: none; }
  .h-compare { min-width: 0; display: block; }
  .h-compare thead, .h-compare tbody { display: block; }
  .h-compare tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; padding: 10px 0; border-top: 1px solid var(--line); }
  .h-compare thead tr { border-top: 0; position: sticky; top: 0; background: var(--paper2); z-index: 1; }
  .h-compare th, .h-compare td { display: block; padding: 0; border: 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
  .h-compare th[scope="row"] { grid-column: 1 / -1; margin-bottom: 4px; font-weight: 600; color: var(--ink); }
  .h-compare .h-compare__corner { display: none; }
  .h-compare thead th { background: none; } .h-compare .is-featured { background: none; }
  .h-compare__plan { font-size: 13px; } .h-compare__price { font-size: 11px; }
  .h-compare td.is-featured { color: var(--red); font-weight: 600; }
}

/* ---------- 05: questions */
.faq { padding: 8vh 0 6vh; }
.faq-list { display: grid; gap: 8px; margin-top: 4vh; max-width: 900px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.faq summary { cursor: pointer; padding: 16px 44px 16px 18px; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 22px; color: var(--dim); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 18px; color: var(--dim); font-size: 15px; }
.faq details p a { color: var(--ink); }

/* ---------- final call */
.cta { position: relative; padding: 16vh var(--gutter) 12vh; text-align: center; overflow: hidden; background: var(--ink); color: #fff; }
.cta::before { content: ""; position: absolute; left: 50%; bottom: -60vw; width: 120vw; height: 120vw; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0%, rgba(200,16,46,0.55), rgba(240,195,90,0.12) 30%, transparent 55%); pointer-events: none; }
.cta h2 { position: relative; font-size: clamp(38px, 7.5vw, 112px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; }
.cta p { position: relative; color: #B9BED3; margin: 22px auto 0; max-width: 44ch; }
.cta-actions { position: relative; margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cta .btn.ghost { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.35); }
.cta-fine { font-size: 14px; } .cta-fine a { color: #fff; }
.cta p[data-reveal] { transition-delay: 120ms; } .cta .cta-actions[data-reveal] { transition-delay: 240ms; }

/* ---------- footer */
.site-footer { padding: 40px var(--gutter) 48px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; max-width: 1400px; margin: 0 auto; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-cols h4 { font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-cols a { text-decoration: none; } .foot-cols a:hover { color: var(--ink); }
.foot-legal { margin-top: 32px; font-size: 13px; line-height: 1.6; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- no motion: everything simply shown, in its final state */
.reduce .top { background: rgba(255,255,255,0.92); border-color: var(--line); }
.reduce .hero { height: auto; } .reduce .hero-stage { position: relative; height: auto; min-height: var(--vh); padding-bottom: 60px; display: grid; justify-items: center; }
.reduce .hero-copy { position: relative; padding-top: calc(var(--nav) + 8vh); order: 1; } .reduce #cards { order: 2; } .reduce .hero-found { order: 3; }
.reduce .hero-sub, .reduce .h-hero__actions, .reduce .h-hero__fine, .reduce [data-reveal] { opacity: 1; transform: none; }
.reduce .hero-words .w { opacity: 1 !important; transform: none !important; }
.reduce .hero-hint, .reduce .live, .reduce .hero-tele { display: none; }
.reduce #cards { position: relative; width: 100%; height: 56vh; }
.reduce .hero-found { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin: -40px auto 0; justify-self: center; width: max-content; }
.reduce .statement { margin-top: 0; } .reduce .statement .w { opacity: 1; }
.reduce #how, .reduce #numbers { height: auto; }
.reduce .how-stage, .reduce .numbers-stage { position: static; height: auto; padding-bottom: 8vh; }
.reduce .how-stage { grid-template-rows: auto auto auto; }
.reduce .step, .reduce .row, .reduce .line, .reduce .pay, .reduce .deal-done, .reduce .show-tile { opacity: 1; transform: none; }
.reduce .step { border-color: rgba(200,16,46,0.35); display: grid; } .reduce .step::before { background: var(--red); border-color: var(--red); color: #fff; }
.reduce .row { border-color: var(--line); } .reduce .deal-rate i { --rate: 80; }
.reduce .show-tile { grid-column: 1; grid-row: 3; margin-top: 12px; } .reduce .deal { max-height: none; }
@media (max-width: 900px) { .reduce .how-stage { grid-template-rows: auto auto auto auto; } .reduce .show-tile { grid-row: 4; display: grid; } .reduce .deal { grid-row: 3; } }
.reduce .card { position: relative; top: auto; height: auto; min-height: 70vh; transform: none !important; filter: none !important; } .reduce .card-dim { display: none; }
@media (max-width: 900px) { .reduce .card .shot { height: min(44vh, 420px); } }
.reduce .marquee { transform: none !important; }
.reduce .index-shot .phone img { transition: none; }