/* Whisora landing pages. Shared by index, privacy and terms — the tokens were
   previously triplicated inline across all three, which is how they drift apart.
   These values mirror the app's own tokens (web/src/app.css) deliberately. */

:root {
  --bg: #08080c;
  --fg: #f1f5f9;
  --muted: rgba(241, 245, 249, 0.62);
  --faint: rgba(241, 245, 249, 0.38);
  --accent: linear-gradient(135deg, #a78bfa, #22d3ee);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --focus: #22d3ee;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* One soft wash of the brand gradient behind the fold. Cheap: two fixed radials,
     no blur filter, nothing repainting on scroll. */
  background-image:
    radial-gradient(60rem 40rem at 50% -12rem, rgba(167, 139, 250, 0.16), transparent 70%),
    radial-gradient(50rem 34rem at 85% 8rem, rgba(34, 211, 238, 0.10), transparent 70%);
  background-repeat: no-repeat;
}

.wrap { max-width: 52rem; margin: 0 auto; padding: clamp(2.5rem, 8vw, 6rem) 1.5rem 4rem; }
/* Long-form prose wants a narrower measure than a two-column hero. */
.wrap.doc { max-width: 40rem; }

/* Links ─────────────────────────────────────────────────────────────────────
   Styled at the element level on purpose. Scoping link colour to footers and
   components left inline body links falling back to the user-agent stylesheet,
   which rendered them default blue on a near-black page. */
a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--glass-border);
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Lockup ────────────────────────────────────────────────────────────────── */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(2.5rem, 7vw, 4.5rem);
  border-bottom: 0;
}
/* Rounded to match the icon's own plate. The plate is kept rather than keyed out:
   flood-filling the dark background left chewed edges on the mark's darker
   strokes, and iOS home screens and social cards want an opaque icon anyway. */
.lockup img { width: 2.2rem; height: 2.2rem; border-radius: 0.5rem; display: block; }
.wordmark {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  /* background-clip:text clips descenders at line-height 1 — give it room. */
  line-height: 1.3;
  margin: 0;
}
.wrap.doc .wordmark { font-size: 1.15rem; }
.wrap.doc .lockup img { width: 2rem; height: 2rem; border-radius: 0.45rem; }

/* Hero ──────────────────────────────────────────────────────────────────────
   The screenshot lives here rather than beside a one-line claim. A 640px-tall
   phone next to two lines of copy makes a row as tall as the phone with the text
   floating in the middle of the void. The hero stacks eyebrow, headline, lede,
   form and microcopy, which is roughly a phone's height, so the columns balance. */
.hero {
  margin: 0 0 clamp(2.5rem, 7vw, 4rem);
  display: flex;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: flex-start;
}
.hero-copy { flex: 1 1 0; min-width: 0; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 1.1rem;
}

.lede {
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  color: var(--muted);
  margin: 0 0 2.5rem;
  max-width: 34rem;
}

/* Form ─────────────────────────────────────────────────────────────────── */
form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.85rem; }

input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  color: var(--fg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.6rem;
}
input[type="email"]::placeholder { color: var(--faint); }
input[type="email"]:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button {
  padding: 0.85rem 1.4rem;
  font-size: 1rem;
  font-weight: 650;
  color: #0a0a0f;
  background: var(--accent);
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
}
button:disabled { opacity: 0.55; cursor: default; }

.microcopy { font-size: 0.85rem; color: var(--faint); margin: 0 0 0.4rem; }

/* Off-screen rather than display:none — some bots skip hidden inputs but fill
   ones that are technically laid out. */
.decoy { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* <output> is inline by default; block makes the margin and min-height apply. */
#status { display: block; margin: 0; font-size: 0.95rem; min-height: 1.5rem; }
#status[data-state="ok"] { color: #4ade80; }
#status[data-state="error"] { color: #fca5a5; }

/* Screenshot ────────────────────────────────────────────────────────────── */
.shot { flex: 0 0 13rem; margin: 0.4rem 0 0; }
.shot img {
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
  border: 1px solid var(--glass-border);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.5);
  display: block;
}
.shot figcaption {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0.7rem 0 0;
  text-align: center;
}

/* Body content ─────────────────────────────────────────────────────────── */
section { margin: 0 0 2.3rem; }
h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
section p { margin: 0; color: var(--muted); }

.wrap.doc h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.wrap.doc h2 { font-size: 1.05rem; margin: 2.25rem 0 0.5rem; }
.wrap.doc p, .wrap.doc li { color: var(--muted); margin: 0 0 0.85rem; }
.wrap.doc ul { padding-left: 1.2rem; }
.updated { color: var(--faint); font-size: 0.85rem; margin: 0 0 2.5rem; }

.note {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.4rem;
  color: var(--muted);
  font-size: 0.95rem;
  margin: 3rem 0 0;
}

footer {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.85rem;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--fg); }

/* Narrow screens ───────────────────────────────────────────────────────────
   Two columns stop being worth it before the phone gets uselessly small. */
@media (max-width: 46rem) {
  .hero { flex-direction: column; }
  .shot { flex: none; width: 100%; max-width: 12rem; align-self: center; margin: 0.5rem 0 0; }
}

/* A button at its natural width, stranded under a full-width input, reads as
   unfinished. Below this the two no longer fit on one line at all. */
@media (max-width: 30rem) {
  input[type="email"], button { flex: 1 1 100%; }
  button { text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  button, input[type="email"] { transition: opacity 120ms ease, border-color 120ms ease; }
}