/* SottoBanco — landing page
   Tokens mirror packages/ui/src/tokens.ts of the app: warm paper, ink,
   green on the buying side, amber on the selling side. */

:root {
  --paper: #f9f7f2;
  --paper-warm: #fbfaf6;
  --canvas: #eceade;
  --surface: #fff;
  --ink: #211d16;
  --ink-soft: #4a443a;
  --muted: #6b6455;
  --muted-soft: #877f6f;
  --faint: #a39a89;
  --buy: #1e7a52;
  --buy-dark: #14573a;
  --buy-surface: #e7f2ec;
  --buy-glow: #5fd39a;
  --sell: #b96d1f;
  --sell-dark: #8a5416;
  --sell-surface: #fdf8f1;
  --sell-surface-strong: #fdf3e3;
  --danger: #b3402f;
  --danger-dark: #7c2d20;
  --danger-surface: #fdf0ee;
  --border: rgba(33, 29, 22, .12);
  --border-strong: rgba(33, 29, 22, .2);
  --hairline: rgba(33, 29, 22, .07);
  --ui: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --display: 'Bricolage Grotesque', Georgia, serif;
  --r-card: 12px;
  --r-lg: 13px;
  --r-panel: 14px;
  --r-xl: 16px;
  --r-sheet: 22px;
  --shadow-card: 0 3px 10px rgba(33, 29, 22, .07);
  --shadow-float: 0 30px 60px -20px rgba(33, 29, 22, .35), 0 10px 20px -10px rgba(33, 29, 22, .2);
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Belt and braces against any future sideways overflow. `clip` rather than
   `hidden`: it does not create a scroll container, so the pinned phone keeps
   working — `hidden` here would silently break position: sticky. */
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 700; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--buy); color: #fff; }
:focus-visible { outline: 3px solid var(--buy); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-soft); line-height: 1.55; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- progress bar ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: var(--buy); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 14px 0;
  transition: background .4s, box-shadow .4s, padding .4s;
}
.nav.is-solid {
  /* .86 let the text scrolling underneath read straight through the bar and
     collide with the links; at .96 the blur still picks up a hint of whatever
     passes below without anything becoming legible through it */
  background: rgba(249, 247, 242, .96);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--hairline);
  padding: 10px 0;
}
.nav .wrap { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 18px var(--display); color: var(--buy); letter-spacing: .01em; }
.brand svg { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-weight: 600; font-size: 14.5px; color: var(--ink-soft); }
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--buy); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }
.nav-links a:hover::after { transform: scaleX(1); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-lg);
  font-weight: 700; font-size: 15.5px; line-height: 1; white-space: nowrap;
  transition: transform .25s var(--ease-spring), box-shadow .25s, background .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-buy { background: var(--buy); color: #fff; box-shadow: 0 6px 18px -6px rgba(30, 122, 82, .7); }
.btn-buy:hover { background: var(--buy-dark); }
.btn-sell { background: var(--sell); color: #fff; box-shadow: 0 6px 18px -6px rgba(185, 109, 31, .7); }
.btn-sell:hover { background: var(--sell-dark); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ghost { border: 1.5px solid var(--border-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.nav .btn { margin-left: 8px; }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; place-items: center; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 2.5px 0; border-radius: 2px; transition: transform .3s, opacity .3s; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  padding: 120px 0 60px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(30, 122, 82, .14), transparent 70%),
    radial-gradient(50% 45% at 10% 90%, rgba(185, 109, 31, .12), transparent 70%),
    var(--paper);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(42px, 6.2vw, 84px); line-height: .98; letter-spacing: -.03em; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; transform: translateY(110%); animation: rise 1s var(--ease-out) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .08s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .16s; }
.hero h1 em { font-style: normal; color: var(--buy); }
.hero .lead { margin-top: 26px; max-width: 52ch; opacity: 0; animation: fade-up .9s .35s var(--ease-out) forwards; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; opacity: 0; animation: fade-up .9s .5s var(--ease-out) forwards; }

.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; transition: transform .25s var(--ease-spring), background .25s; }
.store:hover { transform: translateY(-2px); background: #000; }
.store svg { width: 26px; height: 26px; }
.store small { display: block; font-size: 10px; opacity: .75; line-height: 1; margin-bottom: 2px; }
.store b { display: block; font-size: 16px; line-height: 1.05; font-weight: 600; }

/* the stage: photo + phone, scroll-parallaxed */
.hero-stage { position: relative; height: clamp(520px, 78vh, 760px); }
.hero-photo {
  position: absolute; right: 0; top: 2%; width: 76%; height: 92%;
  border-radius: 28px; overflow: hidden; background: var(--canvas);
  box-shadow: var(--shadow-float);
  opacity: 0; animation: fade-up 1.1s .25s var(--ease-out) forwards;
  will-change: transform;
}
.hero-photo img, .hero-photo video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.hero-phone { --w: 250px; }
.hero-phone .phone { --w: clamp(190px, 16.5vw, 225px); }
.hero-phone {
  position: absolute; left: 0; bottom: 0;
  opacity: 0; animation: fade-up 1.2s .45s var(--ease-out) forwards;
  will-change: transform;
}
.hero-float {
  position: absolute; padding: 12px 14px; border-radius: 14px; background: var(--surface);
  box-shadow: 0 14px 40px -12px rgba(33, 29, 22, .35); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.3; will-change: transform;
  opacity: 0; animation: fade-up 1s .9s var(--ease-out) forwards;
}
.hero-float .num { font-size: 22px; }
.hero-float.save { right: 2%; top: 0; color: var(--buy-dark); background: var(--buy-surface); border-color: rgba(30, 122, 82, .3); }
.hero-float.earn { right: 6%; bottom: 6%; color: var(--sell-dark); background: var(--sell-surface-strong); border-color: rgba(185, 109, 31, .35); animation-delay: 1.05s; }
.hero-float small { display: block; font-size: 11.5px; opacity: .8; }

.scroll-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.scroll-hint i { width: 1px; height: 40px; background: linear-gradient(var(--faint), transparent); display: block; animation: drip 1.8s ease-in-out infinite; }

/* ---------- phone mockup: the design's 402x874 iOS frame, scaled to --w ---------- */
.phone {
  --w: 300px;
  width: var(--w); aspect-ratio: 402 / 874; position: relative;
  border-radius: calc(var(--w) * 48 / 402);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .12);
  isolation: isolate;
}
.phone > .sw { position: absolute; top: 0; left: 0; }
.phone .dev { position: absolute !important; top: 0; left: 0; }
.phone > .dev, .phone > .sw > .dev { transform: scale(var(--s, .75)); transform-origin: 0 0; }
.phone > .sw { width: 100%; height: 100%; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.phone > .sw[hidden] { display: block; opacity: 0; transform: translateX(6%); pointer-events: none; }
.phone .dev { font-family: 'Instrument Sans', system-ui, sans-serif; }
.dev .blink { border-left: 2px solid #1e7a52; margin-left: 1px; animation: blink 1s steps(2) infinite; }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
/* the fixed nav must not cover the top of a section reached by an anchor link */
.section, .split, .final, .hero { scroll-margin-top: 72px; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: clamp(32px, 4.6vw, 58px); }
.section-head .lead { margin-top: 18px; }

/* ticker */
.ticker { padding: 22px 0; border-block: 1px solid var(--hairline); background: var(--paper-warm); overflow: hidden; }
.ticker-track { display: flex; gap: 48px; width: max-content; will-change: transform; }
.ticker-track span { display: inline-flex; align-items: center; gap: 12px; font: 600 15px var(--ui); color: var(--muted); white-space: nowrap; }
.ticker-track i { width: 6px; height: 6px; border-radius: 50%; background: var(--buy); }
.ticker-track i.s { background: var(--sell); }

/* how it works — pinned phone */
.how { background: var(--paper); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: start; }
.how-sticky { position: sticky; top: 90px; display: flex; justify-content: center; }
.how-sticky .phone { --w: clamp(260px, 24vw, 340px); }
.how-steps { display: flex; flex-direction: column; }
.step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; opacity: .3; transition: opacity .5s; }
.step.is-active { opacity: 1; }
.step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--buy-surface); color: var(--buy-dark); font: 700 17px var(--display); margin-bottom: 18px; }
.step-n.sell { background: var(--sell-surface-strong); color: var(--sell-dark); }
.step h3 { font-size: clamp(26px, 3vw, 38px); }
.step p { margin-top: 14px; color: var(--ink-soft); font-size: 17px; max-width: 46ch; }
.step .hint { margin-top: 16px; font-size: 13.5px; color: var(--muted-soft); display: flex; gap: 8px; align-items: flex-start; }
.step .hint svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--buy); }

/* numbers band */
.numbers { background: var(--ink); color: #fff; overflow: hidden; position: relative; }
.numbers::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 20% 50%, rgba(30, 122, 82, .35), transparent 60%), radial-gradient(50% 70% at 85% 50%, rgba(185, 109, 31, .3), transparent 60%); }
.numbers .wrap { position: relative; }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat .num { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; display: block; }
.stat .num.buy { color: var(--buy-glow); }
.stat .num.sell { color: #f2b56a; }
.stat p { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, .72); max-width: 24ch; }
.numbers .note { margin-top: 48px; font-size: 13px; color: rgba(255, 255, 255, .5); }

/* split panel compra / vendi */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
.split > div { padding: clamp(56px, 7vw, 110px) var(--gutter); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.split .buy-side { background: var(--buy-surface); color: var(--buy-dark); }
.split .sell-side { background: var(--sell-surface-strong); color: var(--sell-dark); }
.split h2 { font-size: clamp(30px, 3.6vw, 48px); margin-top: 14px; color: inherit; }
.split .big { font-size: clamp(64px, 9.5vw, 132px); line-height: .9; display: block; margin: 22px 0 8px; will-change: transform; }
.split .cmp { font-size: 16px; opacity: .8; }
.split .cmp s { opacity: .8; }
.split ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.split li { display: flex; gap: 10px; align-items: flex-start; }
.split li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; }
/* the comparison bars: what the same books cost (or fetch) elsewhere */
.split .cmp { font-size: 15px; opacity: .75; }
.cmp-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; max-width: 460px; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 11.5em) 1fr auto; align-items: center; gap: 12px; font-size: 14px; }
.cmp-row .l { opacity: .8; }
.cmp-row .b { position: relative; height: 10px; border-radius: 99px; background: rgba(20, 87, 58, .13); }
.sell-side .cmp-row .b { background: rgba(138, 84, 22, .13); }
/* i is the bar (or the top of a range); u is the solid bottom of a range */
.cmp-row .b i, .cmp-row .b u {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--w);
  border-radius: 99px; background: currentColor; opacity: .3;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease-out);
}
.cmp-row .b u { opacity: .5; }
.cmp-row .v { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; opacity: .8; white-space: nowrap; }
.cmp-row.is-us .b i { opacity: 1; }
.cmp-row.is-us .l { font-weight: 700; opacity: 1; }
.cmp-row.is-us .v { font-size: 20px; opacity: 1; }
.cmp-bars.in .cmp-row .b i, .cmp-bars.in .cmp-row .b u { transform: none; }
.cmp-bars.in .cmp-row:nth-child(2) .b i { transition-delay: .12s; }
.cmp-bars.in .cmp-row:nth-child(3) .b i { transition-delay: .24s; }
.cmp-note { margin-top: 14px; font-size: 13px; line-height: 1.5; opacity: .72; max-width: 46ch; }

.split .bg-word { position: absolute; right: -2%; bottom: -6%; font: 700 clamp(160px, 28vw, 420px)/1 var(--display); opacity: .05; pointer-events: none; user-select: none; will-change: transform; }

/* sell section */
.sell-section { background: var(--paper-warm); }
.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.entry { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-panel); padding: 26px; transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s; }
.entry:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: rgba(185, 109, 31, .4); }
.entry svg { width: 32px; height: 32px; color: var(--ink); }
.entry h3 { font-size: 22px; margin-top: 18px; }
.entry p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.sell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: center; margin-top: clamp(56px, 7vw, 110px); }
.sell-visual { position: relative; min-height: 640px; }
.sell-visual .photo { position: absolute; inset: 40px 0 0 18%; border-radius: 28px; overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-float); }
.sell-visual .photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.sell-visual .phone { --w: clamp(210px, 18vw, 250px); position: absolute; left: 0; bottom: 0; }
.checklist { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .ck { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: var(--sell); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.checklist b { display: block; }
.checklist span { color: var(--muted); font-size: 15px; }

/* notify / timeline */
.notify { overflow: hidden; }
.notify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: center; }
.notify-visual { position: relative; min-height: 520px; }
.notify-visual .photo { position: absolute; inset: 8% 0 8% 0; border-radius: 28px; overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-float); }
.notify-visual .photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.push { position: absolute; width: min(340px, 86%); background: rgba(33, 29, 22, .96); color: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .55); backdrop-filter: blur(10px); }
.push .h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; opacity: .7; }
.push .h span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .06em; }
.push .h i { width: 14px; height: 14px; border-radius: 4px; background: var(--buy); display: inline-block; }
.push b { display: block; font-size: 14.5px; margin-top: 5px; }
.push small { font-size: 12.5px; opacity: .85; }
.push.p1 { left: 0; top: -2%; }
.push.p2 { right: -2%; top: 34%; }
.push.p3 { left: 6%; bottom: -2%; }
.timeline { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.timeline li { position: relative; padding: 0 0 22px 40px; }
.timeline li::before { content: ''; position: absolute; left: 5px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--buy); }
.timeline li.sell::before { border-color: var(--sell); }
.timeline b { display: block; font-size: 17px; }
.timeline span { color: var(--muted); font-size: 15px; }

/* trust */
.trust { background: var(--canvas); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 26px; box-shadow: var(--shadow-card); }
.trust-card svg { width: 30px; height: 30px; color: var(--buy); }
.trust-card h3 { font-size: 21px; margin-top: 18px; }
.trust-card p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* faq */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; text-decoration: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 600 19px var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; position: relative; transition: transform .35s var(--ease-out), background .35s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; background: currentColor; width: 12px; height: 1.5px; }
.faq summary i::after { transform: rotate(90deg); transition: transform .35s; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--buy); border-color: var(--buy); color: #fff; }
.faq .a { padding: 0 0 24px; color: var(--ink-soft); max-width: 62ch; font-size: 16px; }

/* The answer used to appear in a single frame. Where the browser can animate
   the disclosure box it now opens; where it cannot, nothing is lost. */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s var(--ease-out), content-visibility .3s;
    transition-behavior: allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* final cta */
.final { position: relative; overflow: hidden; text-align: center; padding: clamp(100px, 14vw, 180px) 0; }
.final-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 100%, rgba(30, 122, 82, .22), transparent 70%), var(--paper); }
.final h2 { font-size: clamp(38px, 6vw, 80px); letter-spacing: -.03em; line-height: .98; }
.final h2 em { font-style: normal; color: var(--buy); }
.final .lead { margin: 22px auto 0; max-width: 54ch; }
.final .store-badges { justify-content: center; margin-top: 36px; }
.final .mark { width: 92px; height: 92px; margin: 0 auto 28px; border-radius: 24px; background: var(--surface); display: grid; place-items: center; box-shadow: var(--shadow-float); }
.final .mark svg { width: 62px; height: 62px; }
.books-row { display: flex; gap: 8px; justify-content: center; align-items: flex-end; height: 90px; margin-bottom: 30px; }
.books-row i { display: block; width: 38px; border-radius: 6px; transform-origin: 50% 100%; will-change: transform; }

/* the legal pages carry no JavaScript, so their nav cannot have a burger menu:
   three short links simply stay visible and wrap instead of collapsing */
.nav-legal .nav-links { display: flex !important; gap: 18px; font-size: 14px; }
.nav-legal .nav-links a { white-space: nowrap; }
.nav-legal .btn { display: none; }
@media (min-width: 821px) { .nav-legal .btn { display: inline-flex; } }
@media (max-width: 560px) {
  .nav-legal .wrap { gap: 14px; }
  .nav-legal .nav-links { gap: 13px; font-size: 13px; }
  /* below this the three labels and the wordmark cannot both fit: the mark alone
     still links home, and the page title says where you are */
  .nav-legal .brand { font-size: 0; gap: 0; }
}

/* The legal pages do NOT pin their header. On the home a fixed bar costs a band
   of hero image; on a wall of prose it costs a half-clipped line of text at every
   scroll position, which is what made these pages look broken. Here the header
   simply scrolls away — the footer carries the same links, and nothing ever
   passes underneath it. */
.nav-legal {
  position: static;
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.nav-legal + .legal { padding-top: clamp(36px, 6vw, 60px); }

/* ---------- legal pages ---------- */
.legal { padding: 120px 0 clamp(60px, 8vw, 110px); }
.legal .wrap { max-width: 760px; }
.legal-back { font-size: 14px; font-weight: 600; margin-bottom: 26px; }
.legal-back a { color: var(--buy); }
.legal-back a:hover { text-decoration: underline; }
.legal h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -.025em; }
.legal-date { margin-top: 12px; font-size: 13.5px; color: var(--muted-soft); }
.legal-lead {
  margin-top: 28px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6;
  color: var(--ink-soft); padding-left: 18px; border-left: 3px solid var(--buy);
}
.legal h2 {
  font-size: clamp(20px, 2vw, 25px); margin-top: 46px; letter-spacing: -.01em;
  padding-top: 22px; border-top: 1px solid var(--hairline);
}
.legal h2 + p, .legal h2 + ul { margin-top: 14px; }
.legal p, .legal ul { margin-top: 14px; color: var(--ink-soft); line-height: 1.65; font-size: 16px; }
.legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal li::marker { color: var(--faint); }
.legal a { color: var(--buy); text-decoration: underline; text-underline-offset: 2px; }
/* a button inside prose is still a button: .legal a is more specific than .btn
   and was painting the label green on green */
.legal a.btn { text-decoration: none; }
.legal a.btn-buy, .legal a.btn-sell, .legal a.btn-ink { color: #fff; }
.legal a:hover { color: var(--buy-dark); }
.legal strong { color: var(--ink); }
.legal-holder {
  margin-top: 30px; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-panel);
}
.legal-holder p { margin-top: 0; font-size: 15px; }
.legal-holder p + p { margin-top: 8px; }
.legal-todo {
  margin-top: 26px; padding: 14px 18px; border-radius: var(--r-card);
  background: var(--danger-surface); border: 1.5px solid rgba(179, 64, 47, .35);
  color: var(--danger-dark); font-size: 14.5px;
}
.legal-todo code { font: 600 13px ui-monospace, Menlo, monospace; }

/* footer */
.footer { border-top: 1px solid var(--border); padding: 56px 0 40px; font-size: 14px; color: var(--muted); background: var(--paper-warm); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer h4 { font: 700 12px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer a:hover { color: var(--buy); }
.footer .brand { margin-bottom: 14px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 12.5px; color: var(--faint); }

/* ---------- reveal system ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal].in { opacity: 1; transform: none; }
/* On a narrow screen the horizontal reveals start 40px outside the viewport,
   which is exactly the sideways scroll the page should never have — and a
   sideways entrance reads badly on a phone anyway. Below the two-column
   breakpoint they come up from below like everything else. */
@media (max-width: 820px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(28px); }
}
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > :nth-child(1) { transition-delay: .05s }
.stagger.in > :nth-child(2) { transition-delay: .15s }
.stagger.in > :nth-child(3) { transition-delay: .25s }
.stagger.in > :nth-child(4) { transition-delay: .35s }
.stagger.in > :nth-child(5) { transition-delay: .45s }
.stagger.in > :nth-child(6) { transition-delay: .55s }

/* word-by-word headline reveal */
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.words .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * .05s); }
.words.in .w > span { transform: none; }

/* native scroll-driven animations where supported */
@supports (animation-timeline: view()) {
  .hero-photo { animation: fade-up 1.1s .25s var(--ease-out) forwards; }
  .sell-visual .photo img, .notify-visual .photo img {
    animation: img-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
  .split .bg-word { animation: word-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes img-parallax { from { transform: translateY(-8%) scale(1.12); } to { transform: translateY(8%) scale(1.12); } }
@keyframes word-drift { from { transform: translateX(10%); } to { transform: translateX(-10%); } }
@keyframes rise { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes blink { to { opacity: 0; } }
@keyframes laser { 0%, 100% { top: 18%; } 50% { top: 78%; } }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 110px; }
  .hero-stage { height: clamp(460px, 70vw, 640px); max-width: 640px; margin: 10px auto 0; width: 100%; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .entry-grid { grid-template-columns: 1fr; }
  .sell-grid, .notify-grid { grid-template-columns: 1fr; }
  /* Stacked, the phone hangs past the bottom of its own container and the
     parallax pushes it further down as you scroll, so the heading underneath
     ran into it. The gap has to cover the drift, which scales with the
     viewport height — hence vw-based rather than a fixed number. */
  .sell-grid, .notify-grid { row-gap: clamp(96px, 14vw, 130px); }
  .sell-visual { min-height: 520px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav .btn { display: none; }
  .nav-toggle { display: grid; }
  .nav.is-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); padding: 20px var(--gutter) 28px; box-shadow: 0 20px 40px -20px rgba(33, 29, 22, .3); gap: 18px; font-size: 18px; }
  .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .how-grid { grid-template-columns: 1fr; }
  /* The block pins ABOVE the bottom of the fixed bar, not below it: at top:64
     the bar ended at 62 and those two pixels were a window onto the text
     scrolling underneath. Pinning at 40 tucks the block's top edge behind the
     bar — which is opaque and sits higher in the stack — so there is no seam to
     leak through, whatever height the bar happens to render at. The padding
     makes up the difference, leaving the phone exactly where it was (40+34 =
     64+10). Nothing is painted outside the block's own box: an earlier fix used
     a pseudo-element for this and masked the paragraph above whenever the block
     was not yet pinned. */
  .how-sticky { position: sticky; top: 40px; z-index: 2; background: linear-gradient(var(--paper) 93%, transparent); padding: 34px 0 16px; }
  .how-sticky .phone { --w: clamp(150px, 34vw, 205px); }
  /* stacked, the phone sits above the text instead of beside it: dimming the
     step the reader is on hurts far more than the pairing helps, so only the
     phone's screen tracks the scroll here */
  .step { min-height: 55vh; opacity: 1; }
  .split { grid-template-columns: 1fr; }
  .split > div { min-height: 70vh; }
  .hero-float.save { top: -4%; }
  .hero-float.earn { bottom: 2%; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero h1 { font-size: clamp(38px, 11.5vw, 56px); }
  .hero-stage { height: 120vw; max-height: 560px; }
  .hero-photo { width: 84%; height: 82%; top: 0; }
  .hero-phone .phone { --w: clamp(160px, 42vw, 200px); }
  .hero-float { font-size: 12px; padding: 10px 12px; }
  .hero-float .num { font-size: 18px; }
  .hero-float.earn { right: 0; bottom: 0; }
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .sell-visual { min-height: 0; height: 110vw; max-height: 520px; }
  .sell-visual .phone { --w: clamp(150px, 40vw, 200px); bottom: -10px; }
  .notify-visual { min-height: 0; height: 120vw; max-height: 560px; }
  .push { width: 82%; font-size: 13px; }
  .push.p2 { top: 42%; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .books-row i { width: 28px; }
  .cmp-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .cmp-row .l { grid-column: 1; }
  .cmp-row .v { grid-column: 2; }
  .cmp-row .b { grid-column: 1 / -1; grid-row: 2; }
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  [data-reveal], .stagger > *, .words .w > span { opacity: 1; transform: none; }
  .cmp-row .b i, .cmp-row .b u { transform: none; }
  .hero h1 .line > span, .hero .lead, .hero-cta, .hero-photo, .hero-phone, .hero-float { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}