/* 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); }

.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; }
.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; }

/* 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) { display: none; }
  .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; } }