/* Paixly — "edit suite" look. Near-black warm studio background, warm white type, a single
   recording-light red used only for the REC dot and the primary action. The product videos are
   the colour. Instrument Serif (display), Geist (UI), Geist Mono (timecodes, specs). All fonts
   self-hosted, OFL. Built with UI/UX Pro Max guidance: video-first hero with click-to-play +
   pause, 4.5:1 contrast, 44px targets, reduced-motion respected, no emoji icons. */
@font-face { font-family: "Instrument Serif"; src: url("../fonts2/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts2/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts2/geist-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts2/geist-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts2/geist-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts2/geist-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts2/geist-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0c0b0a; --surface: #151413; --surface2: #1d1c1a; --line: #2c2a27; --ink: #f3efe7; --muted: #a39e94;
  /* --faint was #6f6b64: only 3.7:1 on --bg, under the 4.5:1 floor for the footer and
     the sample captions, which are real text a buyer reads. #8a857c is 5.4:1 and still
     reads as the quietest step in the scale. */
  --faint: #8a857c;
  /* Two reds on purpose: --rec is the recording light (a dot and other non-text marks,
     5.5:1 on --bg, well past the 3:1 non-text floor), --rec-btn carries white BUTTON
     text and so has to clear 4.5:1 - the bright one only managed 3.55:1. Hover goes
     darker, not lighter, because lighter fails the same test. */
  --rec: #ff3b2f; --rec-btn: #d9261a; --rec-btn-hover: #c22115; --rec-ink: #ffffff; --good: #6fd39b;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 14px; --r-lg: 22px; --max: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
img, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(255,59,47,.18); }
@media (prefers-reduced-motion: no-preference) { .rec::before { animation: blink 2s steps(1) infinite; } }
@keyframes blink { 50% { opacity: .25; } }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(12,11,10,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand-mark { width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 5px; position: relative; }
.brand-mark::after { content: ""; position: absolute; left: 7px; top: 5px; border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.nav { display: flex; gap: 28px; font-size: .94rem; }
/* inline-flex + min-height so the tap area is 44px tall, not just the 24px of text */
.nav a { text-decoration: none; color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover { color: var(--ink); }
@media (max-width: 820px) { .nav { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 99px; font: 500 .98rem/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--rec-btn); color: var(--rec-ink); }
.btn-primary:hover { background: var(--rec-btn-hover); }
.btn-light { background: var(--ink); color: var(--bg); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--muted); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .9rem; }
/* legacy class names still used by order/legal templates */
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-ghost-dark { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-red { background: var(--rec-btn); color: var(--rec-ink); }

/* Type */
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
h1, h2 { font-family: var(--serif); line-height: 1.02; }
h1 { font-size: clamp(2.9rem, 7.2vw, 5.8rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h1 em, h2 em { font-style: italic; color: var(--muted); }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 48ch; }
section { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
section.hero { border-top: 0; padding-top: clamp(40px, 6vw, 80px); }
.sec-head { display: grid; grid-template-columns: 1fr minmax(0, 1.3fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head p { margin: 0; color: var(--muted); max-width: 52ch; }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; } }

/* Hero: photo in, video out */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .lede { margin: 22px 0 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.specs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.specs span b { color: var(--ink); font-weight: 500; }
.inout { display: grid; grid-template-columns: minmax(0, .82fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.frame img, .frame video { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.frame.photo img { aspect-ratio: 3/4; }
.frame .tag { position: absolute; left: 10px; top: 10px; background: rgba(12,11,10,.78); padding: 5px 9px; border-radius: 7px; }
.frame .tc { position: absolute; right: 10px; bottom: 10px; background: rgba(12,11,10,.78); padding: 5px 9px; border-radius: 7px; }
.arrow-io { color: var(--faint); font-family: var(--mono); font-size: 1.2rem; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .inout { max-width: 560px; } }

/* Play / pause control on videos */
.vplay { position: absolute; inset: auto auto 10px 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(243,239,231,.92); color: var(--bg); display: grid; place-items: center; cursor: pointer; }
.vplay svg { width: 18px; height: 18px; }
.vplay .i-pause { display: none; }
.playing .vplay .i-play { display: none; }
.playing .vplay .i-pause { display: block; }

/* Samples reel */
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, calc((100% - 3 * 16px) / 4)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.reel figure { margin: 0; scroll-snap-align: start; min-width: 0; }
.reel figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 12px 2px 0; }
.reel figcaption b { font-weight: 500; }
.reel .words { margin: 6px 2px 0; color: var(--faint); font-size: .88rem; }
.reel-nav { display: flex; gap: 10px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { border-color: var(--muted); }
.icon-btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .reel { grid-auto-columns: 72%; } }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps li { padding: 26px 26px 6px 0; border-right: 1px solid var(--line); }
.steps li + li { padding-left: 26px; }
.steps li:last-child { border-right: 0; }
.steps .n { display: block; margin-bottom: 26px; }
.steps p { color: var(--muted); margin: 8px 0 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .steps li, .steps li + li { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); } }

/* Photo quality */
.quality { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.quality ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.quality li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; }
.quality li .mono { min-width: 28px; }
.quality p { color: var(--muted); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare figure { margin: 0; }
.compare img { width: 100%; aspect-ratio: 5/6; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.compare figcaption { padding-top: 10px; display: flex; gap: 8px; align-items: center; }
.compare .bad figcaption::before, .compare .good figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.compare .bad figcaption::before { background: var(--rec); }
.compare .good figcaption::before { background: var(--good); }
@media (max-width: 860px) { .quality { grid-template-columns: 1fr; } }

/* Pricing */
/* Three cards since Growth joined Single and Starter on 2026-10-29. Two columns left the third one alone in a half-empty row. */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.price { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 16px; background: var(--surface); }
.price .amt { font-family: var(--serif); font-size: clamp(4rem, 8vw, 6rem); line-height: .9; }
.price .amt small { font-family: var(--sans); font-size: 1rem; color: var(--muted); }
.price ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted); }
.price li::before { content: "—"; margin-right: 10px; color: var(--faint); }
.price .btn { align-self: flex-start; margin-top: auto; }
/* What stands in for the button while the shop is shut: same place on the card, so three cards of different lengths still line up. */
.price .opens-note { margin-top: auto; margin-bottom: 0; color: var(--faint); }
.price.feature { border-color: var(--muted); }
.note { color: var(--muted); font-size: .94rem; margin-top: 20px; max-width: 70ch; }
@media (max-width: 1080px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .prices { grid-template-columns: 1fr; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 1.12rem; font-weight: 500; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus { outline: none; }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq .pm { flex: 0 0 28px; height: 28px; position: relative; color: var(--muted); }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s ease; }
.faq .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq .ans { padding: 0 0 24px; color: var(--muted); max-width: 70ch; }
.faq .ans p { margin: 0; }

/* Closing */
.closing { text-align: center; }
.closing h2 { margin-bottom: 28px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 48px; color: var(--faint); font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.site-footer a { color: var(--muted); }
.site-footer .legal-links { display: flex; gap: 18px; margin-left: auto; }
/* standalone links, not links inside a sentence, so they carry the 44px target rule */
.site-footer .legal-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Inner pages: order form, tips, legal, order status */
.page { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 100px); }
.page-narrow { max-width: 680px; margin: 0 auto; }
.page h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin: 10px 0 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-top: 16px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-bottom: 8px; }
label { display: block; margin: 16px 0; font-weight: 500; }
input[type=email], input[type=text], select, textarea { display: block; width: 100%; margin-top: 8px; min-height: 46px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-weight: 400; }
input::placeholder, textarea::placeholder { color: var(--faint); }
/* No outline:none here. It used to kill the focus ring on the plan radios and the
   plan radios, where the border-color below is invisible - so a keyboard user
   could not see what was selected. The global :focus-visible ring stands. */
input:focus, textarea:focus, select:focus { border-color: var(--muted); }
textarea { min-height: 110px; resize: vertical; }
/* width:100% matters: left to its intrinsic size the native file input ran 40px past
   the right edge of a 375px phone and gave the whole page a sideways scroll. */
input[type=file] { display: flex; align-items: center; width: 100%; max-width: 100%; min-height: 46px;
  margin-top: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font: inherit; color: var(--muted); }
input[type=file]::file-selector-button { font: 500 .9rem var(--sans); background: var(--ink); color: var(--bg); border: 0; border-radius: 99px; padding: 10px 16px; margin-right: 12px; cursor: pointer; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; font-weight: 400; cursor: pointer; }
.choice input { margin-top: 5px; accent-color: var(--rec); width: 18px; height: 18px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; color: var(--muted); }
.eyebrow { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.form-actions { margin-top: 20px; }
button { font: inherit; }
.callout-warn, .photo-warning-card { background: #2a1a12; border: 1px solid #5a3420; color: #f4d3bd; padding: 13px 15px; border-radius: 12px; margin: 14px 0; font-size: .94rem; }
.callout-warn a { color: #ffd7bd; }
.photo-warning-card ul { margin: .25rem 0; padding-left: 1.25rem; }
.photo-warning-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.photo-warning-actions button { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid #f4d3bd; background: #f4d3bd; color: #2a1a12; cursor: pointer; }
.photo-warning-actions button.secondary { background: transparent; color: #f4d3bd; }
.tips-list { list-style: none; padding: 0; margin: 24px 0; counter-reset: t; border-top: 1px solid var(--line); }
.tips-list li { padding: 18px 0 18px 56px; position: relative; counter-increment: t; border-bottom: 1px solid var(--line); color: var(--muted); }
.tips-list li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 19px; font-family: var(--mono); font-size: .85rem; color: var(--faint); }
.tips-list b { display: block; color: var(--ink); margin-bottom: 2px; font-weight: 500; }
.draft-banner { background: #2a1a12; border: 1px solid #5a3420; color: #f4d3bd; padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1.5rem; font-size: .9rem; }
.legal h2 { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; margin: 28px 0 8px; }
.legal p { color: var(--muted); }
.order-status video { width: min(340px, 100%); border-radius: var(--r-lg); margin: 18px 0; border: 1px solid var(--line); }
.eta { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.eta div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.eta b { display: block; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; line-height: 1.1; }
.note a, .small a { color: var(--ink); }
.frame .tag, .frame .tc { white-space: nowrap; }
@media (max-width: 560px) { .frame .tag, .frame .tc { font-size: .66rem; padding: 4px 7px; left: 8px; top: 8px; } }
section.page, .page { border-top: 0; }

/* Samples wheel: a 3D ring that spins either way (arrows, drag, keys, click a side card) */
.wheel { position: relative; height: clamp(500px, 62vw, 640px); perspective: 1600px; perspective-origin: 50% 30%; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; outline: none; }
.wheel:active { cursor: grabbing; }
.wheel:focus-visible { box-shadow: 0 0 0 2px var(--ink); border-radius: var(--r-lg); }
.wheel-ring { position: absolute; left: 50%; top: 24px; width: 0; height: 0; transform-style: preserve-3d; }
.wheel-card { position: absolute; left: -130px; top: 0; width: 260px; margin: 0; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wheel-card .frame::after { content: ""; position: absolute; inset: 0; background: #0c0b0a; opacity: .55; transition: opacity .5s ease; pointer-events: none; border-radius: inherit; }
.wheel-card.is-front .frame::after { opacity: 0; }
.wheel-card:not(.is-front) { cursor: pointer; }
.wheel-card:not(.is-front) .vplay { pointer-events: none; opacity: 0; }
.wheel-card .frame { backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.wheel-info { max-width: 620px; margin: 4px auto 0; text-align: center; min-height: 96px; }
.wheel-cap .cap-head { display: flex; justify-content: center; gap: 12px; align-items: baseline; margin: 0; }
.wheel-cap .cap-head b { font-weight: 500; font-size: 1.1rem; }
.wheel-cap .words { margin: 8px 0 0; color: var(--faint); font-size: .92rem; }
.wheel-cap .disclaim { margin: 8px 0 0; color: var(--faint); font-size: .7rem; opacity: .75; }
@media (max-width: 760px) { .wheel { height: 470px; perspective: 1000px; } .wheel-card { width: 220px; left: -110px; } }
@media (prefers-reduced-motion: reduce) { .wheel-ring { transition-property: transform !important; transition-duration: .45s !important; } }
.wheel-card.is-back { opacity: 0; visibility: hidden; }
.wheel-card { transition: opacity .4s ease, visibility .4s; }

/* ---- Countdown page (pre-launch) ------------------------------------------------ */

/* The honeypot. This rule is not decoration: without it the field is simply visible,
   real people fill in "Website", and every one of them is silently treated as a bot and
   dropped. It is hidden from sight here and from assistive tech by aria-hidden in the
   markup; clip-path rather than display:none because some bots skip what is display:none,
   which is the entire point of the field. */
.hp, .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.countdown { margin: 22px 0 6px; }
.countdown .mono { color: var(--muted); margin: 0 0 10px; letter-spacing: .04em; }
.cd-units { display: flex; gap: 10px; flex-wrap: wrap; }
.cd-units > div {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 76px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.cd-units b {
  font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums;
  /* Tabular figures and a fixed min-width keep the box from twitching every second as
     the digits change width. */
  color: var(--ink);
}
.cd-units span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
#cd-soon { font-size: 18px; color: var(--ink); margin: 6px 0 0; }

@media (max-width: 480px) {
  .cd-units > div { min-width: 0; flex: 1 1 0; padding: 9px 6px; }
  .cd-units b { font-size: 22px; }
}

/* Pre-launch: join first, clock second, what Paixly is third (Wyatt, 2026-10-29).
   A centred column rather than the landing page's two-column hero - a 680px block
   pinned left on a 1200px page is an empty half, which is the thing being fixed. */
.wl-hero {
  max-width: 660px; margin: 0 auto; text-align: center;
  border-top: 0; padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 6vw, 72px);
}
.wl-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
/* section.hero drops the top border because it is normally first on the page. Here it
   is second, and the line is what separates the signup from everything below it. The
   padding comes down with it: a full section's worth above a centred two-column block
   is the empty band this page was complained about for. */
.wl-hero + .hero { border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) 0; }
.wl-sub { color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.15rem); margin: 16px 0 0; }
.wl-hero .countdown { margin: 34px 0 0; }
.wl-hero .cd-units { justify-content: center; }

/* The company section below it: the display headline has to fit beside the demo
   without running to four lines, which is what pushed everything down the page. */
.hero-pre h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.hero-pre .lede { margin: 18px 0 0; max-width: 46ch; }
.hero-pre .specs { margin-top: 26px; padding-top: 18px; }

/* Join the waitlist. One row: the box and the button in view without scrolling, which
   is the whole job of this page. */
.wl-inline { margin-top: 26px; }
.wl-row { display: flex; gap: 10px; align-items: stretch; }
.wl-row input[type=email] { margin: 0; flex: 1 1 auto; min-width: 0; text-align: left; }
.wl-row .btn { flex: 0 0 auto; white-space: nowrap; }
.wl-inline .small { margin: 14px 0 0; }
.wl-inline .callout-warn { margin: 12px 0 0; text-align: left; }
.wl-note { color: var(--muted); font-size: .92rem; margin: 14px 0 0; }
.wl-note a, .wl-inline .small a { color: var(--ink); }
.wl-done {
  margin: 0; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (max-width: 560px) {
  .wl-row { flex-direction: column; }
  .wl-row .btn { width: 100%; }
}