/* =====================================================================
   VOTRS WEBSITE STYLES
   ---------------------------------------------------------------------
   Every color, size and spacing on the site is set in this one file.
   It uses only the fonts already built into each visitor's device (no
   downloads from Google or anyone else), which keeps the site fast and
   means we don't send visitors' information to any outside company.
   ===================================================================== */

/* ---------- 1. THE PAINT BOX: change a color here and it changes everywhere ---------- */
:root {
  --bg: #F5F8FC;        /* soft white-blue page background */
  --surface: #FFFFFF;   /* cards */
  --ink: #1C2B4A;       /* main text: deep navy */
  --ink-soft: #5E6E8C;  /* quieter text */
  --line: #DDE5F1;      /* thin dividers */
  --blue: #4F7CBF;      /* brand blue: main buttons, "Yes" */
  --blue-deep: #3A62A0; /* darker blue so small blue text is easy to read */
  --blue-soft: #E5EEF9;
  --red: #D8636F;       /* brand red: "No", the dot in the logo */
  --red-deep: #B5414E;
  --gray: #A9B4C8;
  --gold: #B8922F;
  --on-blue: #FFFFFF;   /* text color placed on top of blue buttons */
  color-scheme: light dark;
}
/* Dark mode: when a visitor's device is set to dark, swap the colors. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1624; --surface: #172033; --ink: #E8EDF6; --ink-soft: #9DABC4; --line: #27324A;
    --blue: #7DA3DB; --blue-deep: #9DB9E6; --blue-soft: #1D2A44;
    --red: #E58A93; --red-deep: #EE9BA3; --gray: #7C89A3; --gold: #D9B35A; --on-blue: #0F1624;
  }
}

/* ---------- 2. FONTS: heavy italic sans for the logo, serif for big headlines ---------- */
:root {
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
}

/* ---------- 3. BASICS ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
}
a { color: var(--blue-deep); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px;
}
/* Text for screen readers only (visible to assistive technology, hidden on screen) */
.nowrap { white-space: nowrap; }
.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;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 4. THE LOGO ---------- */
.wordmark {
  font-family: var(--sans); font-weight: 900; font-style: italic; letter-spacing: -0.03em;
  font-size: 1.9rem; color: var(--ink); text-decoration: none; line-height: 1; margin: 0;
}
.wordmark .dot { color: var(--red); }
.wordmark.small { font-size: 1.5rem; }

/* ---------- 5. TOP BAR ---------- */
.topbar {
  max-width: 68rem; margin: 0 auto; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.pill {
  padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--blue-soft);
  color: var(--blue-deep); font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.pill:hover { background: var(--blue-deep); color: var(--on-blue); }

/* ---------- 6. HERO ---------- */
.hero {
  max-width: 68rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem;
  display: grid; gap: 3rem; grid-template-columns: 1.15fr 0.85fr; align-items: center;
}
.eyebrow {
  margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red-deep);
}
h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1.25rem; text-wrap: balance;
}
h1 em { font-style: italic; color: var(--red-deep); }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 34rem; margin: 0 0 1.75rem; }

/* ---------- 7. WAITLIST FORM ---------- */
.waitlist { max-width: 32rem; }
.waitlist-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.waitlist input[type="email"] {
  flex: 1 1 14rem; min-width: 0; padding: 0.9rem 1.1rem; font-size: 1rem; font-family: inherit;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
}
.waitlist input[type="email"]::placeholder { color: var(--ink-soft); }
.waitlist button {
  padding: 0.9rem 1.5rem; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--on-blue); background: var(--blue-deep); border: 0; border-radius: 999px;
}
.waitlist button:hover { background: var(--blue); }
.waitlist button:disabled { opacity: 0.6; cursor: progress; }
.fineprint { font-size: 0.85rem; color: var(--ink-soft); margin: 0.8rem 0 0; }
.form-status { margin: 0.6rem 0 0; font-weight: 600; min-height: 1.5em; }
.form-status.ok { color: var(--blue-deep); }
.form-status.err { color: var(--red-deep); }
/* The spam-bot trap: pushed far off-screen so people never see it. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 8. THE SAMPLE POLL CARD ---------- */
.poll-card {
  margin: 0; padding: 1.6rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: 0 18px 40px -22px rgba(28, 43, 74, 0.35);
  transform: rotate(1.2deg);
}
.tag { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.poll-q { margin: 0 0 1.1rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.bar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: var(--line); }
.seg.yes { width: 56%; background: var(--blue); }
.seg.no { width: 35%; background: var(--red); }
.seg.unsure { width: 9%; background: var(--gray); }
.legend { list-style: none; margin: 0.9rem 0 1.1rem; padding: 0; display: flex; gap: 1.25rem; color: var(--ink-soft); font-size: 0.95rem; }
.legend .num { font-size: 1.35rem; margin-right: 0.15rem; font-variant-numeric: tabular-nums; }
.yes-text { color: var(--blue-deep); } .no-text { color: var(--red-deep); } .unsure-text { color: var(--ink-soft); }
.bias-line { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.chip { display: inline-block; margin-right: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; }

/* ---------- 9. THIRTEEN STARS DIVIDER (a quiet nod to the founding era) ---------- */
.stars { text-align: center; color: var(--blue); letter-spacing: 0.25em; font-size: 0.8rem; margin: 0 0 1rem; opacity: 0.7; }

/* ---------- 10. CONTENT SECTIONS ---------- */
.section { max-width: 68rem; margin: 0 auto; padding: 3.5rem 1.5rem; }
.section.alt { max-width: none; background: var(--surface); border-block: 1px solid var(--line); }
.section.alt > * { max-width: 68rem; margin-inline: auto; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.015em; margin: 0 0 1.75rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.steps li { counter-increment: step; padding-top: 1rem; border-top: 3px solid var(--blue); }
.steps li::before {
  content: counter(step); display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: 0.6rem; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue-deep); font-weight: 800;
}
.steps p, .grid p { margin: 0; color: var(--ink-soft); }
.grid { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(2, 1fr); }
.cta { text-align: center; }
.cta .waitlist { margin-inline: auto; text-align: left; }
.cta > p { color: var(--ink-soft); margin: -0.75rem 0 1.5rem; }

/* ---------- 11. FOOTER ---------- */
.footer { max-width: 68rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; border-top: 1px solid var(--line); }
.footer nav { display: flex; gap: 1.5rem; margin: 0.75rem 0 1.25rem; }
.footer nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
.footer nav a:hover { text-decoration: underline; }
.legal { font-size: 0.82rem; color: var(--ink-soft); max-width: 44rem; margin: 0; }

/* ---------- 12. TEXT PAGES (privacy, terms, support) ---------- */
.doc { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.doc h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin-bottom: 0.5rem; }
.doc h2 { font-size: 1.45rem; margin: 2.25rem 0 0.6rem; }
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-left: 1.25rem; }
.updated { color: var(--ink-soft); margin: 0 0 1.5rem; }
.draft {
  margin: 1.25rem 0 1.75rem; padding: 0.9rem 1.1rem; border-left: 4px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--surface)); border-radius: 0 10px 10px 0; font-size: 0.95rem;
}
.center-page { max-width: 36rem; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.center-page .block { display: block; margin-bottom: 1.5rem; }
.center-page .mid { margin-inline: auto; }

/* ---------- 13. SMALL SCREENS: stack things in one column ---------- */
@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; gap: 2.25rem; padding-top: 1.5rem; }
  .poll-card { transform: none; }
  .steps, .grid { grid-template-columns: 1fr; }
}