/* app.css — Siren's design system.
 *
 * Tokens first, then primitives, then the section grammar the pages compose
 * from. Light only: the brand is a pale lavender page with near-black ink, and
 * a dark inversion would be a different brand rather than the same one at
 * night.
 */

:root {
  color-scheme: light;

  /* surfaces */
  --surface1: #f7f6fb;
  --surface2: #fff;
  --surface2-hover: #fcfbff;
  --surface3: #120f1914;
  --surface3-hover: #120f1929;

  /* ink */
  --neutral1: #120f19;
  --neutral2: #625b70;
  --neutral3: #120f196b;

  /* brand */
  --brand: #6f5bd6;
  --brand-hover: #5a47bb;
  --brand-tint: #9585e824;

  /* status */
  --critical: #d92d20;
  --critical-tint: #d92d2017;
  --warn: #b25e00;
  --warn-tint: #b25e0014;
  --good: #157f4f;
  --good-tint: #157f4f14;

  --radius-card: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 40px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface1);
  color: var(--neutral1);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
a { color: inherit; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- type ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 6.2vw, 4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); letter-spacing: -0.03em; }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
p { margin: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  color: var(--neutral2);
  line-height: 1.5;
  text-wrap: pretty;
}
.muted { color: var(--neutral2); }
/* Readable small print: --neutral3 is ~3.2:1 on white, below AA for body text.
   It stays in the palette for rules, placeholders and disabled marks. */
.dim { color: var(--neutral2); }
.placeholder { color: var(--neutral3); }

/* Figures in columns: tabular so digits line up, tightened to match the
   display face's own tracking. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* A code identifier sitting inside a sentence is a different job from a figure
   in a column, and was sharing .num with it.
   Geist Mono runs wider with a taller x-height than Figtree, so an identifier
   set at the body size bulged out of the line and broke its rhythm — most
   visibly in the hero, where `uiMultiplier()` read as a different size from the
   words either side of it. Scaled down to sit on the same visual line, and kept
   unbreakable so a name never splits across two lines from its parentheses. */
.ident {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: inherit;
}
.pos { color: var(--good); }
.neg { color: var(--critical); }
.warnc { color: var(--warn); }

/* Small uppercase label that opens most sections. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--neutral2);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.eyebrow.live::before { animation: pulse 2s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
section { padding-block: clamp(56px, 8vw, 104px); }
.section-head { max-width: 46rem; display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.wide { max-width: 58rem; }
.head-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.head-row .section-head { margin-bottom: 0; }
.rule { border: 0; border-top: 1px solid var(--surface3); margin: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface1) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.stuck {
  border-bottom-color: var(--surface3);
  background: color-mix(in srgb, var(--surface1) 92%, transparent);
}
.header-inner {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.03em; flex: none;
}
.wordmark svg { width: 26px; height: 26px; flex: none; }
.wordmark .chain {
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .06em; color: var(--neutral2);
  padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--surface3);
}

.site-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.site-nav a {
  padding: 7px 11px; border-radius: var(--radius-pill);
  font-size: .9375rem; font-weight: 500; color: var(--neutral2);
  text-decoration: none; transition: color .18s var(--ease), background .18s var(--ease);
}
.site-nav a:hover { color: var(--neutral1); background: var(--surface3); }
.site-nav a[aria-current="page"] { color: var(--neutral1); background: var(--surface3); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-toggle {
  display: none; width: 38px; height: 38px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--surface3); border-radius: var(--radius-sm);
  background: var(--surface2); color: var(--neutral1); cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; inset: 64px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--gut) 18px;
    background: var(--surface1);
    border-bottom: 1px solid var(--surface3);
  }
  .site-nav:not(.open) { display: none; }
  .site-nav a { padding: 11px 12px; border-radius: var(--radius-sm); font-size: 1rem; }
  .header-actions .btn-primary { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { background: var(--surface2); color: var(--neutral1); border-color: var(--surface3); }
.btn-secondary:hover { background: var(--surface2-hover); border-color: var(--surface3-hover); }
.btn-ghost { background: transparent; color: var(--neutral2); }
.btn-ghost:hover { background: var(--surface3); color: var(--neutral1); }
.btn-sm { padding: 7px 13px; font-size: .875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- cards ---------- */

.card {
  background: var(--surface2);
  border: 1px solid var(--surface3);
  border-radius: var(--radius-card);
  padding: clamp(18px, 2.4vw, 26px);
}
.card-quiet { background: transparent; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* pill tags, the “100% burn · 50% holders” motif */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--brand-tint); color: var(--brand);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: -0.01em; white-space: nowrap;
}
.pill.neutral { background: var(--surface3); color: var(--neutral2); }
.pill.critical { background: var(--critical-tint); color: var(--critical); }
.pill.warn { background: var(--warn-tint); color: var(--warn); }
.pill.good { background: var(--good-tint); color: var(--good); }
.pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 108px) clamp(40px, 6vw, 76px); }
/* A pure-CSS dawn sky: no asset to fail to load, no image to go stale. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 150%;
  background:
    radial-gradient(90% 62% at 18% 8%, #ffffff 0%, #ffffff00 60%),
    radial-gradient(70% 55% at 82% 2%, #cdbdf7a8 0%, #cdbdf700 62%),
    radial-gradient(85% 60% at 50% 100%, #f9e3ef9c 0%, #f9e3ef00 68%),
    linear-gradient(176deg, #ded6f8 0%, #eeeaf9 44%, var(--surface1) 88%);
  z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--neutral3) .5px, transparent .5px);
  background-size: 22px 22px;
  opacity: .16;
  mask-image: linear-gradient(#000, transparent 72%);
}
.hero-inner { display: grid; gap: clamp(20px, 3vw, 30px); max-width: 52rem; }
/* .hero-inner nests inside .wrap; it must not re-centre itself. */
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 44ch; }
.hero-note {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .8125rem; color: var(--neutral2);
}

/* per-character reveal on the headline */
.reveal-text { display: inline-block; }
.reveal-text .word { display: inline-block; white-space: nowrap; }
.reveal-text .ch {
  display: inline-block;
  animation: chIn .62s var(--ease) both;
  animation-delay: calc(var(--i) * 18ms);
}
@keyframes chIn {
  from { opacity: 0; transform: translateY(0.42em) rotate(2deg); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-text .ch { animation: none; }
}

/* ---------- stat strip ---------- */

.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--surface3);
  border: 1px solid var(--surface3); border-radius: var(--radius-card);
  overflow: hidden;
}
.stat { background: var(--surface2); padding: 20px clamp(16px, 2vw, 24px); display: grid; gap: 3px; }
.stat b {
  font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1.1;
}
.stat span { font-size: .875rem; color: var(--neutral2); line-height: 1.35; }

/* ---------- numbered steps ---------- */

.step-num {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  color: var(--brand); letter-spacing: .06em;
}
.step { display: grid; gap: 8px; align-content: start; }
.step p { color: var(--neutral2); font-size: .9375rem; }
.step h3 { margin-top: 2px; }

/* ---------- tables ---------- */

.table-wrap {
  border: 1px solid var(--surface3); border-radius: var(--radius-card);
  background: var(--surface2); overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  position: sticky; top: 0;
  background: var(--surface2);
  text-align: right; font-weight: 500; font-size: .75rem;
  font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--neutral2); padding: 11px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--surface3);
}
thead th:first-child, tbody td:first-child { text-align: left; }
tbody td {
  text-align: right; padding: 11px 14px; white-space: nowrap;
  border-top: 1px solid var(--surface3);
}
tbody tr:first-child td { border-top: 0; }
tbody tr:hover { background: var(--surface2-hover); }
.t-name { color: var(--neutral2); font-size: .8125rem; }
.t-ticker { font-family: var(--font-mono); font-weight: 500; }
.table-note {
  padding: 11px 14px; border-top: 1px solid var(--surface3);
  font-size: .8125rem; color: var(--neutral2);
}
.empty { padding: 28px 14px; text-align: center; color: var(--neutral2); font-size: .9375rem; }

/* expandable proof row */
.row-toggle { cursor: pointer; }
.row-toggle td:first-child::before {
  content: "›"; display: inline-block; width: 14px;
  color: var(--neutral3); transition: transform .2s var(--ease);
}
.row-toggle[aria-expanded="true"] td:first-child::before { transform: rotate(90deg); }
.detail-row > td { padding: 0; text-align: left; white-space: normal; background: var(--surface1); }
.detail-inner { padding: clamp(16px, 2.4vw, 24px); display: grid; gap: 16px; }
@media (min-width: 860px) { .detail-inner { grid-template-columns: 1.4fr 1fr; gap: 26px; } }
.detail-inner p { color: var(--neutral2); font-size: .9375rem; }
.detail-h {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--neutral2);
  margin-top: 12px;
}
.claim { font-weight: 500; font-size: .9375rem; }
.claim.synthetic { color: var(--warn); }
.claim.onchain { color: var(--good); }
.caveat {
  border-left: 2px solid var(--surface3-hover); padding-left: 12px;
  font-size: .875rem; color: var(--neutral2);
}
.caveat b { color: var(--neutral1); font-weight: 500; }
.ev { display: grid; gap: 9px; align-content: start; background: var(--surface2);
  border: 1px solid var(--surface3); border-radius: var(--radius-sm); padding: 16px; }
.ev-row { display: grid; gap: 1px; }
.ev-k { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--neutral3); }
.ev-v { font-family: var(--font-mono); font-size: .8125rem; word-break: break-all; }
.ev-n { font-size: .75rem; color: var(--neutral2); }
a.ev-v { color: var(--brand); text-decoration: none; }
a.ev-v:hover { text-decoration: underline; }

/* ---------- accordion ---------- */

.qa { border-top: 1px solid var(--surface3); }
.qa:last-of-type { border-bottom: 1px solid var(--surface3); }
.qa-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 2px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500; color: inherit;
  text-align: left; letter-spacing: -0.01em;
}
.qa-q::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 1.5px solid var(--neutral2); border-bottom: 1.5px solid var(--neutral2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s var(--ease);
}
.qa-q[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }
.qa-a { overflow: hidden; transition: height .26s var(--ease); }
.qa-a p { padding: 0 2px 20px; max-width: 62ch; color: var(--neutral2); font-size: .9375rem; }

/* ---------- slider / auction ---------- */

.sim { display: grid; gap: 18px; }
@media (min-width: 900px) { .sim { grid-template-columns: 1fr 1fr; gap: 26px; } }
.scn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.scn {
  padding: 7px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--surface3); background: var(--surface2);
  font-family: inherit; font-size: .875rem; font-weight: 500; color: var(--neutral2);
  cursor: pointer; transition: all .18s var(--ease);
}
.scn:hover { background: var(--surface2-hover); color: var(--neutral1); }
.scn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: var(--radius-pill); background: var(--surface3-hover);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6.5px;
  border-radius: 50%; background: var(--brand); border: 2px solid #fff;
  box-shadow: 0 1px 4px #120f1933;
}
input[type="range"]::-moz-range-track {
  height: 5px; border-radius: var(--radius-pill); background: var(--surface3-hover);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand);
  border: 2px solid #fff; box-shadow: 0 1px 4px #120f1933;
}

.kv { display: grid; gap: 10px; }
.kv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--surface3);
}
.kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-k { font-size: .875rem; color: var(--neutral2); }
.kv-k small { display: block; font-size: .75rem; color: var(--neutral3); }
.kv-v { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; white-space: nowrap; }

.gap-bar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface3); }
.gap-bar i { display: block; height: 100%; }
.gap-bar i.a { background: var(--brand); }
.gap-bar i.b { background: var(--critical); opacity: .55; }
.gap-lab { font-size: .8125rem; color: var(--neutral2); }

.verdict { border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 5px; }
.verdict.bad { background: var(--critical-tint); }
.verdict.good { background: var(--good-tint); }
.verdict h4 {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
}
.verdict.bad h4 { color: var(--critical); }
.verdict.good h4 { color: var(--good); }
.verdict p { font-size: .875rem; color: var(--neutral2); }

/* ---------- callouts ---------- */

.callout {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--radius-card); padding: clamp(16px, 2.2vw, 22px);
  background: var(--warn-tint); border: 1px solid #b25e0026;
}
.callout .mark {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--warn); color: #fff; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
}
.callout .body { display: grid; gap: 5px; }
.callout h3 { font-size: .9375rem; }
.callout p { font-size: .875rem; color: var(--neutral2); }

.limits { display: grid; gap: 0; }
.limit {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--surface3);
}
.limits .limit:first-child { border-top: 0; }
.limit .n { font-family: var(--font-mono); font-size: .8125rem; color: var(--neutral3); }
.limit h3 { font-size: .9375rem; margin-bottom: 4px; }
.limit p { font-size: .875rem; color: var(--neutral2); max-width: 70ch; }

/* ---------- closing ---------- */

.closing {
  border-radius: var(--radius-card);
  background: linear-gradient(168deg, #e6e0f9 0%, #f2eefb 52%, var(--surface2) 100%);
  border: 1px solid var(--surface3);
  padding: clamp(28px, 5vw, 56px);
  display: grid; gap: 16px; justify-items: start;
}
.closing h2 { max-width: 26ch; }
.closing p { color: var(--neutral2); max-width: 46ch; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--surface3); padding-block: 34px 44px; }
.footer-inner { display: grid; gap: 18px; }
.footer-inner p { font-size: .875rem; color: var(--neutral2); max-width: 62ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.footer-links a {
  font-size: .875rem; color: var(--neutral2); text-decoration: none;
  padding: 5px 10px; border-radius: var(--radius-pill);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.footer-links a:hover { color: var(--neutral1); background: var(--surface3); }

/* ---------- utility ---------- */

/* Scroll-reveal settles position only — it never gates opacity.
   Content parked at opacity 0 waiting on a scroll is invisible in the first
   rendered frame, which is what a link preview, a gallery thumbnail and a
   reader who never scrolls all get. A transform-only reveal keeps every word
   legible at rest and still gives the page its settle. */
.reveal { transform: translateY(10px); transition: transform .5s var(--ease); }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
  .qa-a { transition: none; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gut); top: 8px; z-index: 100;
  transform: translateY(-200%);
  background: var(--neutral1); color: #fff; padding: 9px 14px;
  border-radius: var(--radius-sm); font-size: .875rem; text-decoration: none;
}
.skip-link:focus { transform: none; }
.mono-addr {
  font-family: var(--font-mono); font-size: .8125rem; word-break: break-all;
  background: var(--surface3); padding: 3px 7px; border-radius: 6px;
}
[hidden] { display: none !important; }

/* Scroll-reveal is progressive enhancement: the class is added by JS, so with
   JS off nothing is ever hidden. Printing, though, never scrolls, so anything
   still waiting on the observer has to be forced visible or the page prints
   blank below the fold. */
@media print {
  .reveal { transform: none !important; transition: none !important; }
  .site-header { position: static; }
  .qa-a { height: auto !important; }
  .qa-a[hidden] { display: block !important; }
}

/* Stacked on a narrow screen, buttons of different fills read as misaligned:
   a ghost button has no background, so its text starts one padding-width in
   while a filled button's edge does not. Stretching them to a common width
   centres every label on the same axis, and gives a bigger touch target. */
@media (max-width: 520px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ---------- waitlist ---------- */

.waitlist { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; width: 100%; }
.waitlist input {
  flex: 1 1 16rem; min-width: 0;
  padding: 11px 16px;
  font-family: inherit; font-size: .9375rem; color: var(--neutral1);
  background: var(--surface2);
  border: 1px solid var(--surface3-hover);
  border-radius: var(--radius-pill);
  transition: border-color .18s var(--ease);
}
.waitlist input::placeholder { color: var(--neutral3); }
.waitlist input:hover { border-color: var(--neutral3); }
.waitlist input:focus-visible { border-color: var(--brand); outline-offset: 1px; }
.waitlist input:disabled { opacity: .6; cursor: not-allowed; }
.waitlist .btn { flex: 0 0 auto; }
.waitlist .btn:disabled { opacity: .6; cursor: not-allowed; }

.waitlist-status { font-size: .8125rem; color: var(--neutral2); margin-top: 4px; }
.waitlist-status.ok { color: var(--good); font-weight: 500; }
.waitlist-status.bad { color: var(--critical); font-weight: 500; }
.waitlist-status.busy { color: var(--neutral2); }

@media (max-width: 520px) {
  .waitlist { flex-direction: column; }
  .waitlist .btn { width: 100%; }
}