/* Voice Takeover landing page. The "Neon Broadcast" look of the desktop app
   (colours from desktop/src/MicMixer/Takeover/Ui/TakeoverTheme.xaml). No inline styles anywhere (CSP: style-src 'self'). */

@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/SpaceGrotesk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/SpaceGrotesk-Medium.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/SpaceGrotesk-Bold.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2"); }

:root {
  --bg: #0B0B12;
  --card: #12121C;
  --raised: #171724;
  --edge: #22223A;
  --edge-strong: #2E2E4A;
  --control-edge: #7A7A9C;   /* borders of inputs and the checkbox: 3:1 against the panels (WCAG 1.4.11) */
  --ink: #F2F2F7;
  --muted: #9A9AB3;
  --faint: #34344E;
  --accent: #8B5CF6;
  --accent-deep: #7C3AED;
  --accent-press: #6D28D9;
  --accent-soft: #C4B5FD;
  --lime: #C6F432;
  --good: #3DDC84;
  --warn: #FFA826;
  --warn-back: #1C150A;
  --warn-edge: #4D3613;
  --danger: #FF3B5C;
  --danger-fill: #2A0E18;
  --danger-edge: #6E1E31;
  --focus: #C6F432;
  --radius: 20px;
  --gap: 24px;        /* the grid: 12 columns of 66px with 24px gaps = 1056px (12*66 + 11*24); below that the columns shrink in proportion */
  --read: 696px;      /* the reading width = 8 columns (8*66 + 7*24): headings, intros, FAQ, footer text; also the cap for cards and the form when stacked */
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--accent-soft); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--lime); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* 1056px of content at full size (1120 - 2 x 32); the side gutter shrinks smoothly on small screens instead of jumping at a breakpoint */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ---------- the one grid ----------
   Every multi-column block (hero, "What it looks like", steps, controls) uses .grid-12 and switches from stacked to columns at the SAME width:
   960px (>= 960 the content is at least 896px wide, so the 5-column side is still 359px, enough for the form and the drawing of the app).
   Below it everything stacks, and cards, form and drawing are capped at the reading width (--read). The only other breakpoint is 480px (small phones). */
.grid-12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 960px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .col-text { grid-column: 1 / span 7; }   /* hero copy and "What it looks like" copy */
  .col-card { grid-column: 8 / span 5; }   /* the waitlist card and the drawing of the app: same columns, same width */
}

/* page glow behind the top of the page */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 720px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 380px at 14% -4%, rgba(139, 92, 246, .34), transparent 70%),
    radial-gradient(520px 320px at 96% 12%, rgba(198, 244, 50, .08), transparent 70%);
}

/* ---------- header ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem; }
.brand img { width: 40px; height: 40px; display: block; }
.brand:hover { color: var(--ink); }
.site-header nav { display: flex; align-items: center; gap: 10px; }

/* ---------- small pieces ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--edge-strong); background: var(--raised); color: var(--muted);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.warn { background: var(--warn-back); border-color: var(--warn-edge); color: var(--warn); }
.pill.air { background: var(--danger-fill); border-color: var(--danger-edge); color: var(--danger); }
.pill.plain::before { display: none; }

.label { font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.keycap {
  display: inline-block; font-family: var(--mono); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 6px; background: var(--bg); border: 1px solid var(--edge-strong); border-bottom-width: 2px; color: var(--muted); line-height: 1.5;
}
.keycap.red { color: #FF6B83; border-color: var(--danger-edge); }

.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border-radius: 14px; border: 1px solid transparent;
  font: 700 1.0625rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  background: var(--accent-deep); color: #fff;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .5), 0 8px 28px -6px rgba(139, 92, 246, .55);
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.btn:hover { background: var(--accent-press); color: #fff; box-shadow: 0 0 0 1px rgba(196, 181, 253, .6), 0 10px 34px -4px rgba(139, 92, 246, .7); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: progress; opacity: .75; }
.btn.small { white-space: nowrap; min-height: 40px; padding: 8px 16px; font-size: .9375rem; border-radius: 12px; }
.btn.ghost { background: var(--raised); border-color: var(--edge-strong); box-shadow: none; color: var(--ink); }
.btn.ghost:hover { background: var(--edge); }

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); font-weight: 700; }
h1 .hl { display: block; color: var(--lime); }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.125rem, 2.6vw, 1.375rem); color: var(--muted); line-height: 1.5; max-width: var(--read); }
.lead strong { color: var(--ink); font-weight: 500; }

.card { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); padding: 20px; }

/* ---------- hero ---------- */
.hero { padding-block: 16px 40px; }
.hero-copy { max-width: var(--read); }
.hero-copy > * + * { margin-top: 18px; }
.hero-copy .lead { margin-bottom: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 960px) {
  /* copy on the left (7 columns), the form beside it (5): the submit button is on screen on a 1366 x 768 laptop */
  .hero { padding-block: 28px 64px; }
}

/* ---------- signup form ---------- */
.signup { max-width: var(--read); padding: 16px; box-shadow: 0 0 0 1px rgba(139, 92, 246, .18), 0 24px 60px -24px rgba(139, 92, 246, .45); }
@media (min-width: 420px) { .signup { padding: 24px; } }
@media (min-width: 960px) { .signup { max-width: none; } }
@media (max-width: 380px) { .signup { padding: 12px; } }
.signup h2 { font-size: 1.375rem; margin-bottom: 4px; }
.signup .hint { color: var(--muted); font-size: .9375rem; margin-bottom: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 500; font-size: .9375rem; }
input[type="email"] {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; font: 400 1rem/1.3 var(--font);
  background: var(--bg); color: var(--ink); border: 1.5px solid var(--control-edge);
}
input[type="email"]::placeholder { color: #8B8BA8; }
input[type="email"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-bottom: 16px; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.consent input {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 1px 0 0; border-radius: 7px; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--control-edge);
}
.consent input:checked {
  background-color: var(--accent-deep); border-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 18px; background-position: center; background-repeat: no-repeat;
}
.consent input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.consent .privacy-link { white-space: nowrap; display: inline-block; padding-block: 8px; margin-block: -8px; }
/* Turnstile runs "interaction-only": invisible unless Cloudflare needs a click, so the box takes no room until then. */
.turnstile-box { min-height: 0; margin: 0; }
.turnstile-box.needs-click { min-height: 65px; margin-bottom: 16px; }
.notify { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: .9375rem; }
.signup .btn { width: 100%; }
.signup .btn.retry { width: auto; margin-top: 10px; }
.status { margin: 0; font-size: .9375rem; }
.status:not(:empty) { margin-top: 14px; }
.status.error { color: #FF8FA2; }
.status.success { color: var(--lime); font-weight: 500; font-size: 1.0625rem; }
.noscript-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--warn-edge); background: var(--warn-back); color: #E6DCC8; font-size: .9375rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fine { color: var(--muted); font-size: .875rem; margin: 14px 0 0; }
.signup.done form .field, .signup.done form .consent, .signup.done form .turnstile-box, .signup.done form .btn, .signup.done form .notify, .signup.done .hint, .signup.done form .noscript-note { display: none; }

/* ---------- the "now playing" card (a drawing of the app, not the app) ---------- */
.mock { margin: 0; max-width: var(--read); }
@media (min-width: 960px) { .mock { max-width: none; } }
.mock figcaption { margin-top: 14px; color: var(--muted); font-size: .875rem; }
.mock-card { padding: 18px; box-shadow: 0 0 0 1px rgba(139, 92, 246, .14), 0 30px 80px -30px rgba(139, 92, 246, .55); }
.mock-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mock-top .time { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.mock-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 14px; }
.mock-who .who { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1875rem; min-width: 0; }
.avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--raised); border: 1px solid var(--edge-strong); color: var(--accent-soft); font-weight: 700; }
.amount { font-weight: 700; font-size: 1.75rem; color: var(--lime); letter-spacing: -.02em; }
.quote { font-size: clamp(1.1875rem, 3.4vw, 1.5rem); font-weight: 500; line-height: 1.35; margin: 0 0 18px; }
.wave { display: block; width: 100%; height: auto; margin-bottom: 18px; }
.wave .on { fill: var(--accent); }
.wave .off { fill: var(--faint); }
.mock-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* label on top, key badge under it: every button has the same two rows, so the three labels line up (Skip has no default key in the app, so its badge row is an empty, invisible placeholder) */
.mock-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px; border-radius: 14px;
  background: #1A1A28; border: 1px solid var(--edge-strong); font-weight: 700; font-size: .9375rem; line-height: 1.3; white-space: nowrap;
}
.mock-btn .keycap.none { visibility: hidden; }
.mock-btn.panic { border-color: var(--danger); background: var(--danger-fill); color: #FF6B83; }

@media (prefers-reduced-motion: no-preference) {
  .wave rect { transform-box: fill-box; transform-origin: center; animation: pulse 1.6s ease-in-out infinite; }
  .wave .off { animation: none; }
  .wave .p2 { animation-delay: -.3s; } .wave .p3 { animation-delay: -.6s; } .wave .p4 { animation-delay: -.9s; } .wave .p5 { animation-delay: -1.2s; }
  @keyframes pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
  .pill.air::before { animation: blink 1.4s ease-in-out infinite; }
  @keyframes blink { 50% { opacity: .35; } }
}

/* ---------- sections ---------- */
section { padding-block: 56px; }
.section-head { max-width: var(--read); margin-bottom: 32px; }
.section-head > * + * { margin-top: 12px; }
.section-head .label { display: block; }
.section-head p { color: var(--muted); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: var(--read); }
.steps li { position: relative; padding: 22px 20px 22px 20px; counter-increment: step; }
.steps li::before {
  content: "0" counter(step); display: block; font-family: var(--mono); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; color: var(--lime); margin-bottom: 10px;
}
.steps h3 { margin-bottom: 8px; }
.steps p { margin: 0; color: var(--muted); }
@media (min-width: 960px) { .steps { max-width: none; align-items: stretch; } .steps li { grid-column: span 4; } }

.controls { max-width: var(--read); }
.control { padding: 20px; }
.control h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.control p { margin: 0; color: var(--muted); }
.control.panic { border-color: var(--danger-edge); background: #160B11; }
.control.panic h3 { color: #FF6B83; }
/* 5 cards on the same 4-column tracks as the steps: three across, then "One at a time" (4 columns) and "Only your voice" (the other 8). Both rows are the same height. */
@media (min-width: 960px) {
  .controls { max-width: none; grid-auto-rows: 1fr; align-items: stretch; }
  .controls .control { grid-column: span 4; }
  .controls .control:nth-child(5) { grid-column: span 8; }
}

.faq { display: grid; gap: 12px; max-width: var(--read); }
.faq details { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 700; font-size: 1.0625rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-radius: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.25rem; color: var(--accent-soft); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding: 0 20px 18px; margin: 0; color: var(--muted); }

.cta { text-align: center; padding-block: 64px 80px; }
.cta .band { padding: 40px 20px; background: radial-gradient(520px 260px at 50% 0%, rgba(139, 92, 246, .28), transparent 70%), var(--card); }
.cta h2 { margin-bottom: 12px; }
.cta p { color: var(--muted); max-width: 32em; margin-inline: auto; margin-bottom: 24px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--edge); padding-block: 32px 48px; color: var(--muted); font-size: .875rem; }
.site-footer p { margin: 0 0 12px; max-width: var(--read); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-bottom: 8px; font-size: .9375rem; }
.footer-links a { display: inline-block; padding-block: 8px; }

/* ---------- text pages (privacy, thanks, error, 404) ---------- */
.page { padding-block: 24px 64px; }
.page h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 8px; }
.page .updated { font-family: var(--mono); font-size: .8125rem; color: var(--muted); margin-bottom: 32px; }
.prose { max-width: var(--read); }
.prose h2 { font-size: 1.375rem; margin: 36px 0 10px; letter-spacing: -.01em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose .draft { border: 1px solid var(--warn-edge); background: var(--warn-back); color: #E6DCC8; padding: 12px 14px; border-radius: 12px; font-size: .9375rem; margin-bottom: 24px; }
.prose code { white-space: nowrap; font-family: var(--mono); font-size: .9em; background: var(--raised); padding: 1px 6px; border-radius: 6px; }
.center-page { min-height: 60vh; display: grid; align-content: center; justify-items: start; gap: 12px; padding-block: 48px; }
.msg { display: none; }
.msg:target { display: block; }
body:has(.msg:target) .msg-default { display: none; }

/* header button: short label on phones */
.btn .short { display: none; }
@media (max-width: 420px) { .btn .long { display: none; } .btn .short { display: inline; } }

/* the queue under the "now playing" card */
.mock-card + .mock-card { margin-top: 16px; }
.upnext-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.label.muted { color: var(--muted); }
.count { min-width: 24px; padding: 0 8px; text-align: center; border-radius: 999px; background: var(--lime); color: var(--bg); font-family: var(--mono); font-weight: 700; font-size: .8125rem; line-height: 24px; }
.queued { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-radius: 14px; background: var(--raised); border: 1px solid var(--edge); }
.queued + .queued { margin-top: 10px; }
.queued .who-q { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.queued .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.queued .amt { font-weight: 700; color: var(--lime); }
.queued .q { grid-column: 1 / -1; color: var(--muted); font-size: .9375rem; line-height: 1.4; }

/* "What it looks like": the drawing of the app under the hero */
.showcase { padding-block: 32px 56px; }
.showcase-copy { max-width: var(--read); }
.showcase-copy > * + * { margin-top: 12px; }
.showcase-copy .label { display: block; }
.showcase-copy p { color: var(--muted); }
.showcase-copy .fine { font-size: .875rem; margin-bottom: 0; }
.pill { white-space: nowrap; }
/* small phones: the two hero pills share one row (smaller type) or, when even that is too wide, stack at full width; never a staggered pair */
@media (max-width: 480px) {
  .hero-meta { gap: 6px; }
  .hero-meta .pill { flex: 1 1 auto; justify-content: center; padding-inline: 10px; font-size: .6875rem; letter-spacing: .03em; }
}
@media (max-width: 360px) { .mock-top .time { display: none; } }