/*
 * Crease public site - styling only. THE DARK INSTRUMENT, per Michael's
 * ruling of 25 Aug 2026: the app's dark palette is the brand ground, and the
 * site wears it. Every colour below is verbatim from lib/theme.ts darkPalette
 * (this page imports NOTHING from the app): near-black ground, hairline
 * dividers, ONE red used sparingly, and SQUARED CORNERS EVERYWHERE
 * (border-radius 0 is the defining rule). The variable NAMES kept their old
 * paper-era spellings on purpose so the three legal pages need no markup
 * churn; the VALUES are the dark tokens.
 *
 * NO third-party requests - no CDN, no analytics - so a visit is visible to
 * nobody but us. That stance is untouched by the brand fonts added 9 Sep 2026:
 * the three woff2 files are served from THIS origin out of fonts/, never from
 * fonts.googleapis.com or fonts.gstatic.com, either of which would hand every
 * visitor's IP to a third party and falsify the privacy policy's own claim.
 */

/* The brand faces, same three variable woff2 files index.html uses. One file
   per family carries the whole 100-900 weight range; the Latin unicode-range
   keeps anything outside it on the fallback stack instead of tofu. The legal
   pages preload Archivo and Hanken Grotesk in their own heads (an external
   sheet is found late); Geist Mono is only reached by the rare inline <code>,
   so it is left to load on demand under font-display:swap. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/hanken-grotesk-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #0e1013;      /* darkPalette.bg - page ground */
  --surface: #171a20;    /* darkPalette.surface - cards, panels */
  --ink: #f2f4f8;        /* darkPalette.text1 */
  --ink-soft: #f2f4f8;   /* body text on the legal pages stays fully legible */
  --muted: #9aa1ad;      /* darkPalette.text2 */
  --muted-2: #6b7280;    /* darkPalette.text3 - section labels */
  --hairline: #272c35;   /* darkPalette.border */
  --btn-fill: #1f232b;   /* darkPalette.surfaceElevated */
  --accent: #ff6b5e;     /* darkPalette red - THE accent, used sparingly */
  --accent-deep: #ff6b5e;/* same red: the dark ground has one weight of it */
  --accent-wash: rgba(255, 107, 94, 0.08);
  --green: #4ade80;      /* darkPalette measure.green */
  --green-wash: rgba(74, 222, 128, 0.08);

  /* Brand face first, then a REAL fallback stack - these pages must still
     read correctly while a woff2 is in flight, or if one 404s. */
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; border-radius: 0 !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

header { border-bottom: 1px solid var(--hairline); padding-bottom: 1.75rem; margin-bottom: 1.75rem; }
/* Display voice: Archivo 600 on the wordmark and every heading, per the brand
   kit. Declared once so the rules below only ever change measurements. */
.masthead, .tagline, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
}

.masthead {
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  /* weight comes from the display rule above: Archivo 600, the locked
     wordmark's own weight (the 700 was a system font standing in for it). */
  margin: 0 0 1rem;
}
/* The wordmark's red full stop (brand kit: never omitted, never ink). */
.masthead .dot { color: var(--accent); }
.tagline {
  font-size: 1.7rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-weight: 600;
}
.lede { color: var(--muted); margin: 0 0 1.25rem; }
.pilot-badge {
  display: inline-block;
  background: var(--accent-wash);
  color: var(--accent-deep);
  border: 1px solid var(--hairline);
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  margin: 0;
}

.features { margin: 0 0 2.5rem; }
.feature { border-bottom: 1px solid var(--hairline); padding: 1.25rem 0; }
.feature:last-child { border-bottom: none; }
.feature h2 { font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--ink-soft); }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.waitlist {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent);
  background: var(--surface);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.waitlist h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.waitlist > p { color: var(--muted); margin: 0 0 1.25rem; font-size: 0.95rem; }

.field { margin-bottom: 0.9rem; }
label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
input[type='email'] {
  width: 100%;
  padding: 0.75rem 0.7rem;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--hairline);
  min-height: 46px;
}
input[type='email']:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.err { display: block; color: var(--accent-deep); font-size: 0.85rem; margin-top: 0.35rem; }
.field.invalid input { border-color: var(--accent-deep); }

button {
  width: 100%;
  min-height: 50px;
  font: inherit;
  font-weight: 700;
  color: var(--paper);
  background: var(--accent);
  border: none;
  cursor: pointer;
}
button:hover { background: var(--ink); }
button[disabled] { background: var(--muted); cursor: not-allowed; }

.banner { border: 1px solid var(--hairline); border-left: 4px solid var(--muted); padding: 0.9rem; margin-top: 1rem; }
.banner p { margin: 0 0 0.4rem; }
.banner p:last-child { margin-bottom: 0; }
.banner.good { background: var(--green-wash); border-left-color: var(--green); }
.banner.bad { background: var(--accent-wash); border-left-color: var(--accent); }
.banner a { color: var(--accent-deep); }

.privacy-note {
  color: var(--muted-2);
  font-size: 0.85rem;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: 0.9rem;
}

footer { border-top: 1px solid var(--hairline); padding-top: 1.25rem; color: var(--muted); font-size: 0.9rem; }
footer a { color: var(--accent-deep); }
.fineprint { color: var(--muted-2); font-size: 0.8rem; }

.hidden { display: none; }

/* -- privacy.html, terms.html, support.html -────────────────────────────────────────────────────────── */
.draft-banner {
  background: var(--accent-wash);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  padding: 0.9rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}
.policy h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; border-bottom: 1px solid var(--hairline); padding-bottom: 0.35rem; }
.policy p, .policy li { color: var(--ink-soft); font-size: 0.95rem; }
.policy .placeholder { background: var(--accent-wash); color: var(--accent-deep); padding: 0 0.2rem; }
.policy table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.policy th, .policy td { border: 1px solid var(--hairline); padding: 0.5rem; text-align: left; }
.policy th { background: var(--btn-fill); }

/* The plain note box used at the top of the policy pages (the old
   .draft-banner is kept below only so an older cached page still renders). */
.note {
  background: var(--btn-fill);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--muted);
  padding: 0.9rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}
.note p { margin: 0; }
.policy h3 { font-size: 1rem; margin: 1.4rem 0 0.4rem; color: var(--ink-soft); }
.policy .meta { color: var(--muted); font-size: 0.9rem; }
.policy code { font-family: var(--mono); font-size: 0.85em; background: var(--btn-fill); padding: 0 0.2rem; }
.policy a { color: var(--accent-deep); }