/* swipvox.com — V7. Editorial, product-forward. Vanilla CSS, no build step.
   Type: Bricolage Grotesque (display), Hanken Grotesk (body), IBM Plex Mono (code/labels).
   Base ported from the V7 reference mockup; the interaction-state rules that the mockup
   omits (email-capture states, unmute, tree links) are preserved at the end. */

:root {
  --bg: #0B0A0E; --bg-2: #100E14; --surface: #17151C; --surface-2: #201D28;
  --line: #29262F; --line-2: #3A3648;
  --text: #F1EEF5; --dim: #A6A1B4; --mute: #6E6980;
  --ember: #FF6A45; --ember-2: #FF8A6B; --wave: #35E0C4; --gated: #6FA8FF; --amber: #F5B845;
  --maxw: 1180px;
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: rgba(255,106,69,0.28); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.eyebrow { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.eyebrow--warm { color: var(--ember); }
.lede { color: var(--dim); font-size: clamp(17px, 2.3vw, 20px); line-height: 1.55; max-width: 60ch; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.block { padding: clamp(56px, 9vw, 104px) 0; border-top: 1px solid var(--line); }
.block__head { max-width: 66ch; }
.block h2 { font-size: clamp(28px, 4.4vw, 46px); }
.block__head .lede { margin-top: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--f-body); font-weight: 600; font-size: 15.5px; padding: 13px 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .16s ease, border-color .16s ease, color .16s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ember); color: #1B0A05; }
.btn--primary:hover { background: var(--ember-2); }
.btn--wave { background: transparent; color: var(--wave); border-color: rgba(53,224,196,0.42); }
.btn--wave:hover { background: rgba(53,224,196,0.09); border-color: var(--wave); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ember); background: var(--surface); }
.btn--soon { background: var(--surface-2); color: var(--mute); border-color: var(--line-2); cursor: default; }
.btn--soon:hover { background: var(--surface-2); }

.nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(16px); background: rgba(11,10,14,0.74); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; font-size: 20px; }
.brand__mark { width: 26px; height: 26px; border-radius: 0; object-fit: contain; background: none; box-shadow: none; display: block; }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a { color: var(--dim); font-size: 14.5px; padding: 8px 12px; border-radius: 9px; }
.nav__links a:hover { color: var(--text); background: var(--surface); }
/* Buyer sign-in — a quieter sibling of the CTA, but it survives the mobile nav collapse below
   (a returning buyer on a phone still needs the way back to their download). */
.nav__links a.nav__auth { color: var(--text); border: 1px solid var(--line-2); border-radius: 9px; }
.nav__links a.nav__auth:hover { border-color: var(--ember); background: var(--surface); }

.phone { position: relative; width: 100%; max-width: 322px; aspect-ratio: 9 / 19.5; border-radius: 34px; padding: 9px; background: linear-gradient(160deg, #26232E, #121017); box-shadow: 0 40px 90px -34px rgba(0,0,0,0.85), 0 0 0 1px var(--line-2) inset; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #000; container-type: inline-size; }
.phone__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.phone__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; opacity: 0; transition: opacity .35s ease; }
.phone__vid.is-playing { opacity: 1; }
.phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 42%; height: 20px; background: #0b0a0e; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 5; }

.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 8vw, 96px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 620px; z-index: -1; background: radial-gradient(46% 100% at 22% 0%, rgba(255,106,69,0.16), transparent 70%), radial-gradient(40% 90% at 88% 20%, rgba(53,224,196,0.12), transparent 70%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(258px, 26vw, 322px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__copy { max-width: 54ch; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); }
.hero h1 .warm { color: var(--ember); }
.hero .lede { margin-top: 22px; max-width: 58ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Post-purchase small print (success.html) — it was an unstyled <p> inheriting body text, which read
   as body copy sitting right on top of the CTA row. */
.hero__note { color: var(--dim); font-size: 15px; line-height: 1.6; max-width: 62ch; margin: 34px 0 0; }
.hero__note + .hero__note { margin-top: 14px; }
.hero__note b, .hero__note strong { color: var(--text); }
.hero__sub { margin-top: 16px; font-family: var(--f-mono); font-size: 12.5px; color: var(--mute); }
.hero__sub a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.hero__demo { display: flex; justify-content: center; align-items: flex-start; }

.problem__lead { font-family: var(--f-display); font-weight: 600; font-size: clamp(21px, 3.1vw, 30px); line-height: 1.32; max-width: 27ch; letter-spacing: -0.01em; }
.problem__lead strong { color: var(--ember); font-weight: 700; }
.problem__lead em { color: var(--wave); font-style: normal; }
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.triad__card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.triad__card b { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-2); }
.triad__card p { color: var(--dim); font-size: 15px; margin-top: 11px; }

.cap__row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(34px, 5vw, 56px) 0; border-top: 1px dashed var(--line); }
.cap__row:first-of-type { border-top: 0; }
.cap__row.rev .cap__media { order: 2; }
.cap__n { font-family: var(--f-mono); font-size: 13px; color: var(--ember); letter-spacing: 0.1em; }
.cap__row h3 { font-size: clamp(23px, 3vw, 32px); margin: 10px 0 12px; }
.cap__row p { color: var(--dim); font-size: 16px; max-width: 42ch; }
.cap__row p b { color: var(--text); }
.cap__media { display: flex; justify-content: center; }
.shot { position: relative; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 70px -34px rgba(0,0,0,0.8); max-width: 264px; width: 100%; aspect-ratio: 9 / 16; container-type: inline-size; }
.shot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 2; }
/* Chart cards are near-square, not full-screen phone shots. The 9:16 cover frame scales them to
   fill the height and crops the sides (title left, bar-ends right). Let a chart card size to its
   own image so the whole chart shows, uncropped. */
/* Chart card = a phone frame showing the full chart on top + the app nav bar below it (in flow,
   not an overlay), so nothing is cropped and it reads like the other feed mocks. Same 264px width
   as the feed shots. position:relative keeps img + nav in flow (frame sizes to them) AND above the
   absolute .ph placeholder. */
.shot--chart { aspect-ratio: auto; max-width: 264px; background: #0a0f18; display: flex; flex-direction: column; }
.shot--chart img { position: relative; z-index: 2; height: auto; object-fit: contain; }
.shot--chart .navbar { position: relative; z-index: 2; padding-top: 6cqw; background: #05070d; }
.shot--chart .navbar__call-btn { transform: translateY(-2.6cqw); }

/* ---- in-frame bottom nav overlay: makes each phone mock read as the live app with a voice
   call in progress (red hang-up). Injected by site JS into .phone__screen + the feed .shot frames.
   Sizes in container-query units so it scales with the frame (hero 322px vs shots 264px). ---- */
.navbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none;
  display: flex; justify-content: space-around; align-items: flex-end; padding: 11cqw 1cqw 3.4cqw;
  background: linear-gradient(to top, #05070d 56%, rgba(5,7,13,0.8) 80%, rgba(5,7,13,0)); }
.navbar__i { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; color: #8a97a9; }
.navbar__i svg { width: 6.2cqw; height: 6.2cqw; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.navbar__l { font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 3cqw; font-weight: 600; line-height: 1; white-space: nowrap; }
.navbar__i--on { color: #35c7f0; }
.navbar__call { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; }
.navbar__call-btn { width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-items: center; transform: translateY(-3.2cqw);
  background: radial-gradient(circle at 50% 32%, #ff5b53, #dc1f1f);
  box-shadow: 0 0 0 1.2cqw rgba(220,31,31,0.16), 0 3cqw 7cqw -1.5cqw rgba(220,31,31,0.6); }
.navbar__call-btn svg { width: 8.2cqw; height: 8.2cqw; fill: #fff; stroke: none; }
.navbar__call .navbar__l { color: #ff6a6a; }

/* placeholders */
.ph { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; gap: 10px; text-align: center; padding: 8%;
  background: radial-gradient(90% 60% at 50% 12%, rgba(255,106,69,0.13), transparent 66%), linear-gradient(168deg, #16131C, #0A0910 62%); }
.ph::before { content: ""; position: absolute; inset: 11px; border-radius: 18px; border: 1px dashed var(--line-2); pointer-events: none; }
.ph__play { width: clamp(38px, 13%, 54px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: rgba(255,106,69,0.13); border: 1px solid rgba(255,106,69,0.5); }
.ph__play svg { width: 40%; fill: var(--ember); margin-left: 8%; }
.ph__t { font-family: var(--f-mono); font-size: clamp(10px, 3.4cqw, 12.5px); color: var(--text); letter-spacing: .04em; }
.ph__d { font-family: var(--f-mono); font-size: clamp(9px, 3cqw, 11px); color: var(--mute); line-height: 1.65; }
.ph__chip { justify-self: center; font-family: var(--f-mono); font-size: 10px; color: var(--wave); border: 1px solid rgba(53,224,196,0.36); border-radius: 20px; padding: 3px 10px; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.stat b { font-family: var(--f-display); font-size: 26px; color: var(--wave); font-weight: 700; }
.stat span { display: block; color: var(--dim); font-size: 14px; margin-top: 8px; }
.stat small { display: block; color: var(--mute); font-size: 12px; margin-top: 6px; font-family: var(--f-mono); }

.inside { margin-top: 34px; display: grid; gap: 26px; }
.code { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.code__bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 12.5px; color: var(--mute); }
.code__dot { width: 10px; height: 10px; border-radius: 50%; }
.code__file { margin-left: 8px; color: var(--dim); }
.code pre { margin: 0; padding: 18px; overflow-x: auto; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; color: #D8D3E4; }
.code .k { color: var(--ember-2); } .code .s { color: var(--wave); } .code .c { color: var(--mute); } .code .f { color: #A9C7FF; }
.code__cap { padding: 13px 15px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.code__cap b { color: var(--text); }

/* ── tree: meaningful icons, not abstract dots ───────────────── */
.tree { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tsec { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.tsec__h { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--surface); }
.tsec__t { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; }
.tsec__c { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--mute); }
.badge { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; border: 1px solid; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.badge svg { width: 11px; height: 11px; fill: currentColor; }
.badge--free { color: var(--wave); border-color: rgba(53,224,196,0.45); background: rgba(53,224,196,0.08); }
.badge--mail { color: var(--gated); border-color: rgba(111,168,255,0.45); background: rgba(111,168,255,0.08); }
.badge--paid { color: var(--amber); border-color: rgba(245,184,69,0.45); background: rgba(245,184,69,0.08); }

.tnode { display: flex; gap: 11px; padding: 12px 16px 12px 18px; border-top: 1px solid var(--line); }
.tnode__i { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; font-weight: 500; }
.tnode__i svg { width: 10px; height: 10px; fill: currentColor; }
.tnode__i--free { color: var(--wave); background: rgba(53,224,196,0.12); }
.tnode__i--mail { color: var(--gated); background: rgba(111,168,255,0.12); }
.tnode__i--paid { color: var(--amber); background: rgba(245,184,69,0.12); }
.tnode__b { min-width: 0; }
.tnode__t { font-family: var(--f-mono); font-size: 13.5px; color: var(--text); line-height: 1.4; }
.tnode__d { color: var(--dim); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.tnode__m { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--dim); }
.tag--free { color: var(--wave); border-color: rgba(53,224,196,0.34); }
.tag--gated { color: var(--gated); border-color: rgba(111,168,255,0.34); }
.tag--locked { color: var(--amber); border-color: rgba(245,184,69,0.34); }
/* brighter, per feedback — this label is a trust signal, it shouldn't whisper */
.tag--bt { color: #5BF0D6; border-color: rgba(91,240,214,0.55); background: rgba(91,240,214,0.09); font-weight: 500; }

.demo { text-align: center; background: radial-gradient(50% 120% at 50% 0%, rgba(53,224,196,0.10), transparent 70%); }
.demo h2 { max-width: 20ch; margin: 0 auto; }
.demo .lede { margin: 18px auto 0; text-align: center; }
.demo__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.demo__meta { margin-top: 16px; font-family: var(--f-mono); font-size: 12.5px; color: var(--mute); }

.attest { font-family: var(--f-display); font-weight: 500; font-size: clamp(21px, 3.1vw, 31px); line-height: 1.38; max-width: 32ch; letter-spacing: -0.01em; }
.attest .q { color: var(--ember); }

.who { display: flex; gap: 18px; align-items: flex-start; margin-top: 30px; max-width: 62ch; }
.who__pic { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line-2); background: var(--surface); }
.who__pic--ph { display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; color: var(--mute); border-style: dashed; text-align: center; line-height: 1.3; }
.who__body b { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.who__body p { color: var(--dim); font-size: 15px; margin-top: 7px; }
.who__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.who__links a { font-family: var(--f-mono); font-size: 12.5px; color: var(--wave); text-decoration: underline; text-underline-offset: 3px; }

/* ── stack: agents + services ────────────────────────────────── */
.stack { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 34px); margin-top: 34px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 2.6vw, 30px); }
.panel h3 { font-size: 21px; }
.panel > p { color: var(--dim); font-size: 15px; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.chip { font-family: var(--f-mono); font-size: 12.5px; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 12px; }
.chip--dim { color: var(--mute); }
.svc { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.svc li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--dim); }
.svc__n { font-family: var(--f-mono); font-size: 13px; color: var(--text); flex: 0 0 108px; }
.svc__f { font-family: var(--f-mono); font-size: 11.5px; color: var(--wave); flex: 0 0 auto; }
.panel__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 12px; color: var(--mute); line-height: 1.65; }

/* ── FIX: bold text was becoming its own flex column ─────────── */
.limits ul { list-style: none; display: grid; gap: 15px; margin-top: 30px; max-width: 74ch; }
.limits li { display: flex; gap: 13px; align-items: flex-start; }
.limits li::before { content: "\2192"; color: var(--ember); flex: 0 0 auto; line-height: 1.6; }
.limits li span { color: var(--dim); font-size: 15.5px; line-height: 1.65; }
.limits li b { color: var(--text); font-weight: 600; }

/* ── pricing ─────────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; margin-top: 26px; }
.plans--free { grid-template-columns: repeat(2, 1fr); }
.plans--paid { grid-template-columns: repeat(3, 1fr); }
.plans__label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: 44px; display: flex; align-items: center; gap: 14px; }
.plans__label::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.plan--paid { border-color: var(--ember); box-shadow: 0 0 0 1px rgba(255,106,69,0.25), 0 26px 60px -32px rgba(255,106,69,0.4); }
.plan--done { border-color: rgba(245,184,69,0.5); }
.plan__k { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #D2CCE0; }
.plan__price { font-family: var(--f-display); font-size: 30px; font-weight: 700; }
.plan__price s { color: var(--mute); font-size: 18px; font-weight: 400; margin-left: 8px; }
.plan__founding { font-family: var(--f-mono); font-size: 12px; color: var(--amber); }
.plan__sub { font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); letter-spacing: .04em; margin-top: -4px; }
.plan__list { list-style: none; display: grid; gap: 11px; margin-top: 4px; flex: 1 1 auto; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list li::before { content: "\2192"; color: var(--wave); flex: 0 0 auto; line-height: 1.55; }
.plan__list li span { color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.plan__list li b { color: var(--text); font-weight: 600; }
.plan--paid .plan__list li::before, .plan--done .plan__list li::before { color: var(--ember); }
.plan__meta { font-family: var(--f-mono); font-size: 11.5px; color: var(--mute); padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.6; }
.plan__meta b { color: var(--wave); font-weight: 500; }
.plan .btn { width: 100%; margin-top: auto; }

/* scarcity — real, because it's one person's calendar */
.slots { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--amber);
  border: 1px solid rgba(245,184,69,0.42); background: rgba(245,184,69,0.07); border-radius: 20px; padding: 5px 11px; align-self: flex-start; }
.slots__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245,184,69,.6); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(245,184,69,0); } 100% { box-shadow: 0 0 0 0 rgba(245,184,69,0); } }
.cats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.cats span { font-family: var(--f-mono); font-size: 11px; color: var(--dim); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; }

.capture { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 3.5vw, 40px); align-items: center; position: relative; overflow: hidden; }
.capture::before { content: ""; position: absolute; inset: -60% -30% auto auto; width: 460px; height: 460px; z-index: 0; background: radial-gradient(circle, rgba(255,106,69,0.13), transparent 62%); pointer-events: none; }
.capture > * { position: relative; z-index: 1; }
.capture h2 { font-size: clamp(24px, 3.2vw, 34px); margin-top: 12px; }
.capture__copy p { color: var(--dim); margin-top: 12px; font-size: 15.5px; }
.capture__list { list-style: none; display: grid; gap: 9px; margin-top: 18px; }
.capture__list li { display: flex; gap: 10px; color: var(--dim); font-size: 14.5px; align-items: flex-start; }
.capture__list li::before { content: "→"; color: var(--wave); flex: 0 0 auto; }
.capture__label { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 9px; }
.capture__field { display: flex; gap: 10px; flex-wrap: wrap; }
.capture__field input { flex: 1 1 240px; min-width: 0; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; font-family: var(--f-body); font-size: 16px; }
.capture__field input::placeholder { color: var(--mute); }
.capture__field input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,106,69,0.16); }
.capture__field .btn { flex: 0 0 auto; }
.capture__hint { margin-top: 11px; font-size: 13px; color: var(--mute); }

.foot { border-top: 1px solid var(--line); padding: 44px 0; color: var(--mute); font-size: 13.5px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.foot a { color: var(--dim); } .foot a:hover { color: var(--text); }

@media (max-width: 980px) { .plans--paid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .hero__copy { display: contents; }
  .hero__copy .eyebrow { order: 1; }
  .hero__copy h1 { order: 2; margin-top: 12px !important; }
  .hero__demo { order: 3; }
  .hero__copy .lede { order: 4; }
  .hero__copy .hero__cta { order: 5; }
  .hero__copy .hero__sub { order: 6; }
  .phone { max-width: 264px; }
  .cap__row { grid-template-columns: 1fr; gap: 20px; }
  .cap__row.rev .cap__media { order: 0; }
  .tree, .stack, .capture { grid-template-columns: 1fr; }
  .triad { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr 1fr; }
  .plans--free { grid-template-columns: 1fr; }
  .nav__links a:not(.btn):not(.nav__auth) { display: none; }
  .nav__links a.nav__auth { padding: 8px 10px; font-size: 14px; }
  .outcome { grid-template-columns: 1fr; }
  .svc li { flex-wrap: wrap; gap: 6px 12px; }
  .svc__n { flex-basis: auto; }
}
@media (max-width: 540px) { .strip { grid-template-columns: 1fr; } }

/* ── save badge + amber CTA ──────────────────────────────────── */
.save { align-self: flex-start; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: #08211C; background: var(--wave); border-radius: 20px; padding: 5px 12px;
  box-shadow: 0 0 22px -4px rgba(53,224,196,.55); }
.btn--amber { background: var(--amber); color: #241A05; }
.btn--amber:hover { background: #FFC960; }

/* ── upcoming modules ────────────────────────────────────────── */
.up__banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px;
  border: 1px solid rgba(245,184,69,.4); background: rgba(245,184,69,.07); border-radius: 14px; padding: 14px 18px; }
.up__banner b { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(245,184,69,.5); border-radius: 6px; padding: 4px 9px; flex: 0 0 auto; }
.up__banner span { color: var(--dim); font-size: 14.5px; }
.up__banner span em { color: var(--text); font-style: normal; font-weight: 600; }

.rail { display: flex; gap: 18px; margin-top: 30px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 24px 22px; margin-inline: -24px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.rail__item { scroll-snap-align: center; flex: 0 0 auto; width: 258px; }
.rail__cap { font-family: var(--f-mono); font-size: 12px; color: var(--mute); margin-top: 12px; text-align: center; line-height: 1.5; }
.rail__cap b { color: var(--text); display: block; font-size: 13px; margin-bottom: 3px; }
.rail__hint { font-family: var(--f-mono); font-size: 12px; color: var(--mute); margin-top: 4px; }

.mock { position: relative; width: 100%; aspect-ratio: 9 / 19.5; border-radius: 30px; padding: 8px;
  background: linear-gradient(160deg, #26232E, #121017); box-shadow: 0 30px 70px -34px rgba(0,0,0,.85), 0 0 0 1px var(--line-2) inset; }
.mock__s { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden;
  background: #08070C; display: flex; flex-direction: column; }
.mock__top { padding: 16px 15px 8px; }
.mock__ttl { font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.mock__sub { font-family: var(--f-body); font-size: 9.5px; color: var(--mute); margin-top: 2px; }
.mock__viz { padding: 6px 12px 2px; }
.mock__viz svg { width: 100%; height: auto; display: block; }
.mock__body { padding: 4px 15px 0; margin-top: auto; }
.mock__alert { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 6px; align-items: center; }
.mock__big { font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; margin-top: 6px; }
.mock__unit { font-family: var(--f-body); font-size: 9.5px; color: var(--mute); margin-top: 4px; }
.mock__h { font-family: var(--f-display); font-weight: 700; font-size: 14.5px; line-height: 1.22; letter-spacing: -.01em; margin-top: 9px; }
.mock__d { font-size: 10.5px; color: var(--dim); line-height: 1.5; margin-top: 7px; }
.mock__swipe { display: flex; justify-content: space-between; align-items: center; padding: 9px 15px 8px; font-family: var(--f-body); font-size: 9px; color: var(--mute); }
.dots { display: flex; gap: 4px; align-items: center; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: #2C2A34; }
.dots i:first-child { width: 13px; border-radius: 4px; }
.mock__nav { display: flex; justify-content: space-around; align-items: flex-end; padding: 8px 6px 11px;
  border-top: 1px solid rgba(255,255,255,.05); position: relative; }
.mock__nav div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; color: var(--mute); }
.mock__nav div.on { color: var(--text); }
.mock__nav svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mock__mic { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; border: 3px solid #08070C; }
.mock__mic svg { width: 16px; height: 16px; stroke: #08211C; }
.mock__pro { position: absolute; top: -7px; right: -8px; font-family: var(--f-mono); font-size: 6.5px; letter-spacing: .06em;
  background: #6C5CE7; color: #fff; border-radius: 4px; padding: 2px 4px; }

/* restaurant card */
.mock__hero { position: relative; height: 47%; flex: 0 0 auto; overflow: hidden; }
.mock__hero svg { width: 100%; height: 100%; display: block; }
.mock__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.mock__price { font-family: var(--f-mono); font-size: 10px; color: var(--wave); }
.stars { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.stars svg { width: 11px; height: 11px; fill: var(--amber); }
.stars span { font-size: 9.5px; color: var(--mute); font-family: var(--f-body); }

.outcome { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.outcome__card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.outcome__card::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, var(--ember), transparent 72%); }
.outcome__n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; color: var(--ember); }
.outcome__card b { font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.outcome__card p { color: var(--dim); font-size: 15px; }
.outcome__foot { margin-top: 26px; font-family: var(--f-mono); font-size: 13px; color: var(--mute); border-left: 2px solid var(--line-2); padding-left: 14px; max-width: 62ch; }

/* ── preserved from V3: interaction states the static mockup doesn't cover ───────── */

/* hero video: tap-to-unmute control (revealed only once a real video plays) */
.phone__unmute { position: absolute; right: 12px; bottom: 12px; z-index: 6; font-family: var(--f-mono); font-size: 11.5px; color: var(--text); background: rgba(0,0,0,0.6); border: 1px solid var(--line-2); padding: 6px 11px; border-radius: 20px; cursor: pointer; }

/* tree: per-node link + the "+N more" expander */
.tnode__link { font-family: var(--f-mono); font-size: 12px; margin-top: 7px; display: inline-block; }
.tnode--free .tnode__link { color: var(--wave); }
.tnode--gated .tnode__link { color: var(--gated); }
.tmore { padding: 12px 16px; font-family: var(--f-mono); font-size: 12px; color: var(--mute); background: var(--surface); border: 0; border-top: 1px solid var(--line); width: 100%; text-align: left; cursor: pointer; }
.tmore:hover { color: var(--text); }

/* email capture: validation, busy, suggestion and success states */
.capture__field input[aria-invalid="true"] { border-color: var(--ember); }
.capture__field .btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(27,10,5,0.35); border-top-color: #1B0A05; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.capture__msg { margin-top: 10px; font-size: 13.5px; min-height: 1.2em; }
.capture__msg--err { color: var(--ember-2); }
.capture__msg--ok { color: var(--wave); }
.capture__suggest { margin-top: 10px; background: rgba(53,224,196,0.09); border: 1px solid rgba(53,224,196,0.4); color: var(--wave); font-family: var(--f-mono); font-size: 13px; padding: 8px 12px; border-radius: 10px; cursor: pointer; text-align: left; }
.capture__suggest:hover { background: rgba(53,224,196,0.16); }
.capture__suggest b { color: var(--text); font-weight: 600; }
.capture__done { display: grid; gap: 12px; }
.capture__done .tick { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(53,224,196,0.14); border: 1px solid rgba(53,224,196,0.45); color: var(--wave); font-size: 22px; line-height: 1; }
.capture__done h3 { font-family: var(--f-display); font-size: 23px; }
.capture__done p { color: var(--dim); font-size: 15px; }
.capture__done .capture__meta { font-family: var(--f-mono); font-size: 12.5px; color: var(--mute); }
.capture__again { background: none; border: 0; color: var(--dim); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; justify-self: start; }
.capture__again:hover { color: var(--text); }

/* ── /v3/ compatibility (superseded page, shares this stylesheet) ────────────────── */
.attest__by { font-family: var(--f-mono); font-size: 13px; color: var(--mute); margin-top: 18px; }
.plan__note { font-size: 14px; color: var(--dim); flex: 1 1 auto; }

/* ── INQUIRY LIGHTBOX ─────────────────────────────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.lb[hidden] { display: none; }
.lb__backdrop { position: absolute; inset: 0; background: rgba(6,5,9,0.72); backdrop-filter: blur(6px); animation: lbFade .18s ease; }
.lb__panel { position: relative; width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 30px 30px 24px; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8); animation: lbRise .22s cubic-bezier(.2,.7,.2,1); max-height: calc(100vh - 40px); overflow-y: auto; }
@keyframes lbFade { from { opacity: 0; } }
@keyframes lbRise { from { opacity: 0; transform: translateY(14px); } }
.lb__x { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: none; background: transparent; color: var(--mute); font-size: 24px; line-height: 1; border-radius: 9px; cursor: pointer; transition: color .12s, background .12s; }
.lb__x:hover { color: var(--text); background: var(--surface-2); }
.lb__eyebrow { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.lb__title { font-size: clamp(21px, 3.4vw, 26px); margin-top: 10px; line-height: 1.12; }
.lb__sub { color: var(--dim); font-size: 14.5px; margin-top: 8px; }
.lb__field { margin-top: 16px; }
.lb__field label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.lb__input { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 11px; color: var(--text); font-family: var(--f-body); font-size: 15.5px; padding: 12px 14px; transition: border-color .14s; }
.lb__input:focus { outline: none; border-color: var(--ember); }
.lb__input[aria-invalid="true"] { border-color: #F5624B; }
.lb__textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.lb__suggest { margin-top: 7px; font-size: 13px; color: var(--wave); cursor: pointer; }
.lb__suggest b { color: var(--text); }
.lb__msg { color: #FF8A73; font-size: 13.5px; margin-top: 12px; min-height: 0; }
.lb__msg:empty { margin-top: 0; }
.lb__submit { width: 100%; margin-top: 18px; }
.lb__submit[disabled] { opacity: .7; cursor: default; }
.lb__fine { text-align: center; color: var(--mute); font-size: 12px; margin-top: 12px; }
.lb__done { text-align: center; padding: 20px 6px 8px; }
.lb__done .tick { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: rgba(53,224,196,0.14); color: var(--wave); display: grid; place-items: center; font-size: 26px; }
.lb__done h3 { font-size: 22px; }
.lb__done p { color: var(--dim); margin: 8px 0 18px; }
@media (prefers-reduced-motion: reduce) { .lb__backdrop, .lb__panel { animation: none; } }