/* ============================================================================
   gasstationpermit.com — single stylesheet.
   Frame card: D-3987 (design-system pass), D-3966 (state brief pages).

   Rule of this file: every raw value lives in :root. Nothing below :root may
   contain a hex colour, a font stack, a duration or a dimension — it references
   a token. That is what makes the surface measurable: the gate can then say
   "this colour is not a token" and be right.

   Typefaces: Inter for reading (self-hosted, one variable file, no third-party
   font host). Mono for anything that is *data rather than prose* — state names in
   the register, chips, labels, table figures, domains under a citation. Two
   families, each with a job.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-variable.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 {
  /* ── palette ─────────────────────────────────────────────────────────── */
  --green-dark:    #252017;   /* Alloy: the brand action colour is ink, not green */
  --green-mid:     #526574;
  --green-bright:  #526574;
  --green-light:   #e4ede7;
  --green-ink:     #1f5c3a;
  --blue:          #526574;
  --blue-light:    #eef1f3;
  --orange:        #94651e;

  --bg:            #fafaf9;
  --surface:       #ffffff;
  --ink:           #252017;
  --ink-soft:      #2e2921;
  --text:          #252017;
  --text-muted:    #6b665c;
  --text-on-ink:   #ffffff;
  --text-on-ink-1: rgba(255,255,255,.85);
  --text-on-ink-2: rgba(255,255,255,.62);
  --text-on-ink-3: rgba(255,255,255,.55);
  --border:        #e8e4de;
  --border-soft:   #efede8;
  --hover-row:     #f3f2ef;

  --red:           #bd3d42;
  --red-bg:        #f7e3e4;
  --red-ink:       #96282d;
  --red-wash:      #fdf7f7;
  --amber:         #94651e;
  --amber-bg:      #f4ead8;
  --amber-wash:    #fcf9f2;
  --amber-ink:     #7a5316;
  --amber-soft-bg: #fbf7ef;
  --amber-soft-line: #e8d9bc;
  --amber-soft-ink:  #6d4a13;
  --gray-bg:       #f3f2ef;
  --gray-ink:      #555045;

  --focus:         #526574;   /* 6.0:1 on white — SC 1.4.11 */
  --focus-on-ink:  #d0dbe2;

  /* ── type ────────────────────────────────────────────────────────────── */
  --font-sans: 'GT America', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:      .78rem;
  --text-sm:      .8rem;
  --text-base:    .875rem;
  --text-md:      .9rem;
  --text-lg:      .95rem;
  --text-xl:      1.1rem;
  --text-2xl:     1.2rem;
  --text-3xl:     1.4rem;
  --text-4xl:     1.5rem;
  --text-5xl:     1.65rem;
  --text-6xl:     clamp(20px, 4vw, 26px);
  --text-7xl:     clamp(24px, 5vw, 38px);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  --line-none:    1;
  --line-tight:   1.15;
  --line-title:   1.2;
  --line-snug:    1.3;
  --line-link:    1.45;
  --line-body:    1.55;
  --line-read:    1.7;

  --track-label:  .06em;
  --track-tight:  -.02em;

  /* ── space ───────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: .2rem;
  --space-2: .25rem;
  --space-3: .35rem;
  --space-4: .4rem;
  --space-5: .5rem;
  --space-6: .6rem;
  --space-7: .75rem;
  --space-8: .8rem;
  --space-9: .85rem;
  --space-10: .9rem;
  --space-11: 1rem;
  --space-12: 1.1rem;
  --space-13: 1.25rem;
  --space-14: 1.4rem;
  --space-15: 1.5rem;
  --space-16: 2rem;
  --space-17: 16px;
  --space-18: 18px;
  --space-19: 20px;
  --space-20: 24px;
  --space-21: 28px;
  --space-22: 32px;
  --space-23: 40px;
  --space-24: 48px;
  --space-25: 56px;

  /* ── geometry ────────────────────────────────────────────────────────── */
  --radius-sm:   5px;
  --radius:      9px;
  --radius-md:   9px;
  --radius-lg:   16px;
  --radius-pill: 9999px;
  --nav-h:       56px;
  --icon:        22px;
  --icon-stroke: 2;
  --bw:          1px;
  --bw-2:        2px;
  --bw-3:        3px;
  --maxw:        1100px;
  --maxw-read:   640px;
  --measure:     58ch;
  --lift:        -2px;
  --off-screen:  -9999px;

  /* px scale — the state pages were authored in px; these keep them exact */
  --px-1:   1px;
  --px-2:   2px;
  --px-3:   3px;
  --px-5:   5px;
  --px-6:   6px;
  --px-8:   8px;
  --px-10:  10px;
  --px-12:  12px;
  --px-13:  13px;
  --px-14:  14px;
  --px-15:  15px;
  --px-16:  16px;
  --px-20:  20px;
  --px-22:  22px;
  --px-24:  24px;
  --px-28:  28px;
  --px-32:  32px;
  --px-36:  36px;
  --px-40:  40px;
  --px-4:   4px;
  --px-17:  1.05rem;
  --px-560: 560px;
  --px-640: 640px;
  --px-520: 520px;
  --px-340: 340px;
  --px-22f: 22px;
  --px-15r: 1.15rem;
  --px-22r: 2.2rem;
  --px-25r: 2.5rem;

  /* about page */
  --px-72:   72px;
  --px-150:  150px;
  --px-210:  210px;
  --px-860:  860px;
  --px-620:  620px;
  --about-note-bg:  #fff8e6;
  --green-ink-deep: #252017;
  --green-hover:    #39342a;
  --blue-wash:      #f0f6ff;
  --text-body-strong: #1f2937;
  --text-body-soft:   #374151;
  --px-48v:  48px;
  --px-18v:  18px;
  --px-22r2: 22px;
  --px-93r:  .93rem;
  --px-108r: 1.08rem;
  --px-112r: 1.12rem;
  --px-145r: 1.45rem;
  --px-215r: 2.15rem;
  --lh-172:  1.72;

  /* landing page */
  --px-11:   11px;
  --px-36v:  36px;
  --px-44:   44px;
  --px-52:   52px;
  --px-56:   56px;
  --px-400:  400px;
  --px-420:  420px;
  --px-480:  480px;
  --px-540:  540px;
  --px-360b: 360px;
  --green-wash: rgba(82,101,116,.08);
  --green-line: rgba(82,101,116,.22);
  --green-pale: #f6f7f8;
  --white-08:   rgba(255,255,255,.08);
  --text-faint: #5f6672;
  --track-normal: normal;
  --text-strong: var(--ink);
  --text-hero:  clamp(30px, 8vw, 48px);
  --text-final: clamp(20px, 5vw, 28px);
  --maxw-full:  100%;
  --px-14r: 1.4rem;

  --border-hero: 1px solid rgba(255,255,255,.06);
  --shadow-cta:   0 4px 20px rgba(37,32,23,.18);
  --glow-cta:     radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.07) 0%, transparent 70%);
  --grid-min:    240px;

  /* ── motion ──────────────────────────────────────────────────────────── */
  --dur-fast: .1s;
  --dur:      .15s;
  --dur-slow: .18s;

  /* ── elevation ───────────────────────────────────────────────────────── */
  --shadow:       0 0 0 .55px rgba(154,148,136,.2), 0 1px 3px rgba(37,32,23,.07);
  --shadow-hover: 0 3px 9px rgba(37,32,23,.06), 0 12px 36px rgba(37,32,23,.09);
}

/* Sticky nav must not swallow a keyboard focus target (WCAG 2.4.11 Focus Not
   Obscured). Without this, Tab-scrolling parks the focused control under the nav. */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-3)); }
a, button, input, select, textarea, summary { scroll-margin-top: calc(var(--nav-h) + var(--space-3)); }

/* ── reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: var(--space-0); padding: var(--space-0); }

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Data rather than prose. Headings and the wordmark are NOT here: the Alloy
   theme sets one grotesque across type, and monospace headings were the loudest
   tell that these pages predated the landing rebuild. */
.mono,
td.num {
  font-family: var(--font-mono);
}

/* ── nav ─────────────────────────────────────────────────────────────────── */
nav {
  background: var(--surface);
  color: var(--text);
  border-bottom: var(--bw) solid var(--border);
  padding: var(--space-0) var(--space-13);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Deliberately NOT sticky. A sticky header sits over the top band of the
     viewport, and Chrome's "minimal scroll" for a partially visible focus target
     parks the focused control underneath it (WCAG 2.4.11 Focus Not Obscured).
     Measured: the Notify button focused by real Tab presses landed at y=4 with
     56px of nav over it. A static header removes the whole failure class. */
  position: relative;
  z-index: 1;
}
.nav-brand {
  font-weight: var(--weight-semi);
  font-size: var(--text-xl);
  color: var(--text);
  letter-spacing: var(--track-tight);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* The mark is a dark tile with a stroked glyph, matching the landing's brand__mark. */
.nav-brand svg {
  width: var(--px-28); height: var(--px-28);
  padding: var(--px-4);
  box-sizing: border-box;
  background: var(--ink);
  border-radius: var(--radius-sm);
  fill: none;
  stroke: var(--surface);
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-links { display: flex; align-items: center; gap: var(--space-13); }
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  transition: color var(--dur);
}
.nav-links a:hover { color: var(--text); }
.btn-nav {
  background: var(--ink);
  color: var(--surface) !important;
  padding: var(--space-3) var(--space-10);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-sm) !important;
}

/* ── main ────────────────────────────────────────────────────────────────── */
main { flex: 1; width: 100%; max-width: var(--maxw); margin: var(--space-0) auto; padding: var(--space-16) var(--space-13); }

/* ── cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-15);
}
a .card { transition: box-shadow var(--dur-slow), transform var(--dur-slow); }
a:hover .card { box-shadow: var(--shadow-hover); transform: translateY(var(--lift)); }

/* ── page header ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-bottom: var(--space-15);
}
.page-header-left { display: flex; flex-direction: column; gap: var(--space-1); }
.page-header-title { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text); line-height: var(--line-title); }
.page-header-sub { color: var(--text-muted); font-size: var(--text-base); }
.page-header-back {
  color: var(--green-mid);
  font-size: var(--text-base);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-4);
}
.page-header-back:hover { text-decoration: underline; }

/* ── section label ───────────────────────────────────────────────────────── */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  margin-bottom: var(--space-7);
  margin-top: var(--space-2);
}
.section-label + * { margin-top: var(--space-0); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: var(--space-6) var(--space-14);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity var(--dur);
  line-height: var(--line-none);
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-secondary { background: var(--surface); color: var(--text); border: var(--bw) solid var(--border); }
.btn-danger { background: var(--red); color: var(--text-on-ink); }

/* ── forms ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-11); }
label { display: block; font-size: var(--text-base); font-weight: var(--weight-medium); margin-bottom: var(--space-3); color: var(--text); }
input[type=text], input[type=email], input[type=tel],
input[type=number], select, textarea {
  width: 100%;
  padding: var(--space-6) var(--space-8);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--dur);
}
input:focus, select:focus, textarea:focus {
  /* WCAG SC 1.4.11 Non-text Contrast (AA) needs >=3:1. --focus measures 5.02:1 on
     white. Do NOT regress to rgba(37,211,102,.12): it composites to 1.08:1. */
  outline: var(--bw-3) solid var(--focus);
  outline-offset: var(--bw);
  border-color: var(--focus);
}

/* ── chips ───────────────────────────────────────────────────────────────── */
.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  white-space: nowrap;
}
.chip-red   { background: var(--red-bg);    color: var(--red-ink); }
.chip-amber { background: var(--amber-bg);  color: var(--amber-ink); }
.chip-green { background: var(--green-light); color: var(--green-ink); }
.chip-gray  { background: var(--gray-bg);   color: var(--gray-ink); }

/* ── alerts ──────────────────────────────────────────────────────────────── */
.alert { padding: var(--space-9) var(--space-11); border-radius: var(--radius-sm); margin-bottom: var(--space-11); font-size: var(--text-md); }
.alert-error   { background: var(--red-bg); color: var(--red-ink); border-left: var(--bw-3) solid var(--red); }
.alert-success { background: var(--green-light); color: var(--green-ink); border-left: var(--bw-3) solid var(--green-bright); }

/* ── tables ──────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
thead tr { border-bottom: var(--bw-2) solid var(--border); }
thead th { text-align: left; padding: var(--space-6) var(--space-7); color: var(--text-muted); font-weight: var(--weight-semi); white-space: nowrap; }
tbody tr { border-bottom: var(--bw) solid var(--border); transition: background var(--dur-fast); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--hover-row); }
tbody td { padding: var(--space-7); vertical-align: middle; }
tr.row-red   { background: var(--red-wash); }
tr.row-red:hover { background: var(--red-bg); }
tr.row-amber { background: var(--amber-wash); }
tr.row-amber:hover { background: var(--amber-bg); }

/* ── footer ──────────────────────────────────────────────────────────────── */
footer {
  background: var(--surface);
  color: var(--text-muted);
  border-top: var(--bw) solid var(--border);
  text-align: center;
  padding: var(--space-16) var(--space-11);
  font-size: var(--text-sm);
}
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--text); }

/* ── register (state index) ──────────────────────────────────────────────── */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-23);
}
.reg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-17) var(--space-18);
  text-decoration: none;
  min-height: var(--space-25);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.reg-item:hover { border-color: var(--green-bright); box-shadow: var(--shadow); }
.reg-item:focus-visible { outline: var(--bw-2) solid var(--focus); outline-offset: var(--bw-2); }
.state-name { font-size: var(--text-lg); font-weight: var(--weight-semi); color: var(--text); }
.reg-arrow { font-size: var(--text-2xl); color: var(--green-ink); }
.reg-item-pending {
  background: var(--gray-bg);
  border: var(--bw) dashed var(--border);
}
.reg-item-pending .state-name { color: var(--text); }

/* ── state brief ─────────────────────────────────────────────────────────── */
.sb-hero { background: var(--ink); padding: var(--space-24) var(--space-20) var(--space-23); border-bottom: var(--bw) solid var(--border-soft); }
.sb-hero-inner { max-width: var(--maxw-read); margin: var(--space-0) auto; }
.sb-crumb { font-family: var(--font-mono); font-size: var(--text-base); color: var(--text-on-ink-2); margin-bottom: var(--space-11); }
.sb-crumb a { color: var(--text-on-ink-2); text-decoration: none; }
.sb-crumb a:hover { color: var(--text-on-ink); }
.sb-hero h1 { font-size: var(--text-7xl); font-weight: var(--weight-black); color: var(--text-on-ink); line-height: var(--line-tight); margin-bottom: var(--space-11); }
.sb-hero p { font-size: var(--text-4xl); color: var(--text-on-ink-2); line-height: var(--line-body); max-width: var(--maxw-read); }

.sb-body { max-width: var(--maxw-read); margin: var(--space-0) auto; padding: var(--space-23) var(--space-20); }
.sb-section { margin-bottom: var(--space-22); }
.sb-section h2 { font-size: var(--text-5xl); font-weight: var(--weight-bold); color: var(--text); margin-bottom: var(--space-7); padding-bottom: var(--space-5); border-bottom: var(--bw-2) solid var(--border-soft); }
.sb-section p { font-size: var(--text-4xl); color: var(--text); line-height: var(--line-read); }
.sb-section p + p { margin-top: var(--space-2); }

.sb-topic { border: var(--bw) solid var(--border); border-radius: var(--radius-md); padding: var(--space-17) var(--space-18); margin-bottom: var(--space-7); background: var(--surface); }
.sb-topic h3 { font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--text); margin-bottom: var(--space-2); }
.sb-src { display: block; font-size: var(--text-4xl); line-height: var(--line-link); padding: var(--space-2) var(--space-0); color: var(--green-ink); text-decoration: none; }
.sb-src:hover { text-decoration: underline; }
.sb-src small { display: block; font-family: var(--font-mono); color: var(--text-muted); font-size: var(--text-base); margin-top: var(--bw); }

.sb-honest { background: var(--amber-soft-bg); border: var(--bw) solid var(--amber-soft-line); border-radius: var(--radius); padding: var(--space-17); font-size: var(--text-4xl); color: var(--amber-soft-ink); line-height: var(--line-body); margin-top: var(--space-17); }
.sb-honest strong { color: var(--amber-ink); }

.sb-cta { background: var(--ink); border-radius: var(--radius-lg); padding: var(--space-22) var(--space-21); margin: var(--space-23) var(--space-0); }
.sb-cta h2 { font-size: var(--text-5xl); font-weight: var(--weight-black); color: var(--text-on-ink); margin-bottom: var(--space-2); line-height: var(--line-title); }
.sb-cta p { font-size: var(--text-4xl); color: var(--text-on-ink-3); margin-bottom: var(--space-19); line-height: var(--line-body); }
.sb-cta form { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.sb-cta input[type=email], .sb-cta input[type=text] {
  flex: 1 1 200px; min-width: var(--space-0); padding: var(--space-7) var(--space-17);
  border-radius: var(--radius-md); border: var(--bw) solid var(--text-on-ink-2);
  background: var(--ink-soft); color: var(--text-on-ink); font-family: var(--font-sans); font-size: var(--text-4xl);
}
.sb-cta input::placeholder { color: var(--text-on-ink-2); }
.sb-cta input:focus-visible { outline: var(--bw-2) solid var(--focus-on-ink); outline-offset: var(--bw-2); border-color: var(--focus-on-ink); }
.sb-cta button {
  flex: 0 0 auto; padding: var(--space-7) var(--space-21); border-radius: var(--radius-md); border: none; cursor: pointer;
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-4xl); font-weight: var(--weight-bold);
}
.sb-cta button:hover { opacity: .9; }
.sb-cta button:focus-visible { outline: var(--bw-2) solid var(--text-on-ink); outline-offset: var(--bw-2); }
.sb-cta small { display: block; font-family: var(--font-mono); color: var(--text-on-ink-2); font-size: var(--text-base); margin-top: var(--space-14); }
.sb-done { background: var(--green-light); border: var(--bw) solid var(--green-bright); border-radius: var(--radius-md); padding: var(--space-17); color: var(--green-ink); font-size: var(--text-4xl); line-height: var(--line-body); }
.sb-err { color: var(--red-bg); font-size: var(--text-base); margin-top: var(--space-10); }

.sb-states { background: var(--gray-bg); border-radius: var(--radius-md); padding: var(--space-19); margin-top: var(--space-22); }
.sb-states h3 { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--gray-ink); text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: var(--space-13); }
.sb-grid { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.sb-grid a { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-13); font-size: var(--text-base); color: var(--text); text-decoration: none; }
.sb-grid a:hover { border-color: var(--green-bright); color: var(--green-ink); }
.sb-foot { font-family: var(--font-mono); font-size: var(--text-base); color: var(--text-muted); line-height: var(--line-body); margin-top: var(--space-20); }

/* ── register page (permits index) ───────────────────────────────────────── */
.reg-wrap { max-width: var(--maxw-read); margin: var(--space-0) auto; padding: var(--space-23) var(--space-20); }
.reg-back { margin-bottom: var(--space-5); }
.reg-back a { font-family: var(--font-mono); font-size: var(--text-base); color: var(--green-ink); text-decoration: none; }
.reg-back a:hover { text-decoration: underline; }
.reg-title { font-size: var(--text-6xl); font-weight: var(--weight-black); color: var(--text); margin-bottom: var(--space-7); line-height: var(--line-title); }
.reg-lede { font-size: var(--text-4xl); color: var(--text); line-height: var(--line-body); margin-bottom: var(--space-22); }
.reg-sub { font-size: var(--text-5xl); font-weight: var(--weight-bold); color: var(--text); margin: var(--space-0) var(--space-0) var(--space-5); }
.reg-sub-lede { font-size: var(--text-4xl); color: var(--text-muted); line-height: var(--line-body); margin-bottom: var(--space-17); }
.reg-cta { background: var(--ink); border-radius: var(--radius-lg); padding: var(--space-21); text-align: center; }
.reg-cta-lede { font-size: var(--text-4xl); color: var(--text-on-ink-3); margin-bottom: var(--space-17); line-height: var(--line-body); }
.reg-cta-btn {
  display: inline-flex; align-items: center; gap: var(--space-5);
  background: var(--surface); color: var(--ink);
  font-size: var(--text-4xl); font-weight: var(--weight-bold);
  padding: var(--space-7) var(--space-20); border-radius: var(--radius-md); text-decoration: none;
}
.reg-cta-btn:hover { opacity: .9; }
.reg-cta-btn:focus-visible { outline: var(--bw-2) solid var(--text-on-ink); outline-offset: var(--bw-2); }

/* ── consent bar ─────────────────────────────────────────────────────────── */
.consent {
  display: none;
  position: fixed;
  inset-inline: var(--space-13);
  inset-block-end: var(--space-13);
  z-index: 10;
  max-width: var(--maxw-read);
  margin-inline: auto;
  background: var(--surface);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-11) var(--space-13);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  text-align: left;
}
.consent-btn {
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-14);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
}
.consent-btn:focus-visible { outline: var(--bw-2) solid var(--focus); outline-offset: var(--bw-2); }
.consent-accept { margin-left: var(--space-7); background: var(--ink); color: var(--surface); border: none; }
.consent-decline { margin-left: var(--space-5); background: transparent; color: var(--text-muted); border: var(--bw) solid var(--border); }

.foot-note { margin-top: var(--space-3); }
.visually-hidden { position: absolute; left: var(--off-screen); }


/* ── covered state page (state_page.html) ─────────────────────────────────── */
.sp-hero { background: var(--ink); padding: var(--px-40) var(--px-24) var(--px-36); border-bottom: var(--border-hero); }
.sp-hero-inner { max-width: var(--maxw-read); margin: var(--space-0) auto; }
.sp-breadcrumb { font-family: var(--font-mono); font-size: var(--px-13); color: var(--text-on-ink-2); margin-bottom: var(--px-16); }
.sp-breadcrumb a { color: var(--text-on-ink-2); text-decoration: none; }
.sp-breadcrumb a:hover { color: var(--text-on-ink); }
.sp-hero h1 { font-size: var(--text-7xl); font-weight: var(--weight-black); color: var(--text-on-ink); line-height: var(--line-tight); margin-bottom: var(--px-14); }
.sp-hero p { font-size: var(--px-16); color: var(--text-on-ink-2); line-height: var(--line-body); max-width: var(--maxw-read); }

.sp-body { max-width: var(--maxw-read); margin: var(--space-0) auto; padding: var(--px-40) var(--px-24); }
.sp-section { margin-bottom: var(--px-36); }
.sp-section h2 { font-size: var(--px-20); font-weight: var(--weight-bold); color: var(--text); margin-bottom: var(--px-12); padding-bottom: var(--px-8); border-bottom: var(--px-2) solid var(--border-soft); }
.sp-section p { font-size: var(--px-15); color: var(--text); line-height: var(--line-read); }
.sp-gap-1 { margin-top: var(--px-12); }
.sp-gap-2 { margin-top: var(--px-14); }

.sp-miss-list { list-style: none; padding: var(--space-0); margin: var(--px-12) var(--space-0) var(--space-0); display: flex; flex-direction: column; gap: var(--px-10); }
.sp-miss-list li { background: var(--gray-bg); border-radius: var(--radius); padding: var(--px-14) var(--px-16); font-size: var(--px-14); color: var(--text); line-height: var(--line-body); border-left: var(--px-3) solid var(--green-bright); display: flex; gap: var(--px-10); align-items: flex-start; }
.sp-miss-list li::before { content: "\26A0"; color: var(--amber-ink); flex-shrink: 0; margin-top: var(--px-1); }

.sp-note { background: var(--amber-soft-bg); border: var(--bw) solid var(--amber-soft-line); border-radius: var(--radius); padding: var(--px-16); font-size: var(--px-14); color: var(--amber-soft-ink); line-height: var(--line-body); margin-top: var(--px-16); }
.sp-note strong { color: var(--amber-ink); }

.sp-cta-box { background: var(--ink); border-radius: var(--radius-lg); padding: var(--px-32) var(--px-28); text-align: center; margin: var(--px-40) var(--space-0); position: relative; overflow: hidden; }
.sp-cta-box::before { content: ""; position: absolute; top: var(--space-0); left: var(--space-0); right: var(--space-0); bottom: var(--space-0); background: var(--glow-cta); pointer-events: none; }
.sp-cta-box h2 { font-size: var(--px-22); font-weight: var(--weight-black); color: var(--text-on-ink); margin-bottom: var(--px-10); line-height: var(--line-title); }
.sp-cta-box p { font-size: var(--px-14); color: var(--text-on-ink-2); margin-bottom: var(--px-24); line-height: var(--line-body); }
.sp-cta-btn { display: inline-flex; align-items: center; gap: var(--px-8); background: var(--surface); color: var(--ink); font-size: var(--px-16); font-weight: var(--weight-bold); padding: var(--px-14) var(--px-28); border-radius: var(--radius-md); text-decoration: none; position: relative; }
.sp-cta-btn:hover { opacity: .92; }
.sp-cta-btn:focus-visible { outline: var(--px-2) solid var(--text-on-ink); outline-offset: var(--px-2); }
.sp-cta-micro { font-family: var(--font-mono); font-size: var(--px-12); color: var(--text-on-ink-2); margin-top: var(--px-12); }

.sp-states { background: var(--gray-bg); border-radius: var(--radius-md); padding: var(--px-20); margin-top: var(--px-40); }
.sp-states h3 { font-size: var(--px-14); font-weight: var(--weight-bold); color: var(--gray-ink); text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: var(--px-14); }
.sp-states-grid { display: flex; flex-wrap: wrap; gap: var(--px-8); }
.sp-states-grid a { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-pill); padding: var(--px-5) var(--px-14); font-size: var(--px-13); color: var(--text); text-decoration: none; transition: border-color var(--dur), color var(--dur); }
.sp-states-grid a:hover { border-color: var(--green-bright); color: var(--green-ink); }
.sp-states-grid a.current { background: var(--green-light); border-color: var(--green-bright); color: var(--green-ink); font-weight: var(--weight-semi); }


/* ── funnel forms (check / check_preview / check_success) ─────────────────── */
.narrow { max-width: var(--px-560, 560px); margin: var(--space-0) auto; }
.page-header--column { flex-direction: column; align-items: flex-start; }
.card--alert-amber { border-left: var(--px-4, 4px) solid var(--amber); margin-bottom: var(--space-11); }
.card--alert-amber h2 { font-size: var(--px-17, 1.05rem); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.card--alert-amber p { font-size: var(--text-md); color: var(--text-muted); line-height: var(--line-body); margin-bottom: var(--space-0); }
.fieldset-label { margin-top: var(--px-20); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--px-8) var(--px-12); margin-bottom: var(--space-11); }
.feature-opt { font-weight: var(--weight-regular); display: flex; gap: var(--px-8); align-items: center; }
.feature-opt input[type=checkbox] { width: auto; }
.num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--px-12); }
.btn-block { width: 100%; padding: var(--px-14) !important; font-size: var(--px-16) !important; }
.fineprint { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: var(--px-10); }


/* ── preview / paywall ───────────────────────────────────────────────────── */
.page-wrap-md { max-width: var(--px-640); margin: var(--space-0) auto; }
.stat-row { display: flex; justify-content: center; gap: var(--px-25r); flex-wrap: wrap; }
.stat-num { font-size: var(--px-22r); font-weight: var(--weight-black); color: var(--text); font-family: var(--font-mono); }
.stat-num--red { color: var(--red); }
.stat-label { font-size: var(--text-xs); color: var(--text-muted); }
.card--table { padding: var(--space-0); margin-bottom: var(--px-20); overflow: hidden; }
.card--center { text-align: center; margin-bottom: var(--px-20); }
.td-strong { font-weight: var(--weight-semi); }
.td-muted { color: var(--text-muted); }
.lock-blur { filter: blur(var(--px-4)); user-select: none; }
.checkout-form { text-align: center; }
.checkout-title { font-size: var(--px-15r); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.checkout-sub { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-11); }
.email-field { max-width: var(--px-340); margin: var(--space-0) auto var(--space-11); }
/* The legal acknowledgment box must never collapse: with flex-shrink allowed it
   measured ~0px wide in a flex row and required-validation deadlocked checkout.
   Guarded by app/test_check_funnel.py, which reads this rule. */
.ack { display: flex; gap: var(--space-5); align-items: flex-start; text-align: left; max-width: var(--px-520); margin: var(--space-0) auto var(--space-11); font-size: var(--text-xs); line-height: var(--line-link); color: var(--text-muted); font-weight: var(--weight-regular); }
.ack input[type=checkbox] { width: var(--px-22f); height: var(--px-22f); flex-shrink: 0; accent-color: var(--green-bright); margin-top: var(--space-1); }
.btn-checkout { width: 100%; max-width: var(--px-340); padding: var(--px-14) !important; font-size: var(--px-16) !important; }
.secure-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-6); }


/* ── post-purchase success ────────────────────────────────────────────────── */
.success-banner { text-align: center; font-size: var(--px-16); }
.btn-wide { display: block; width: 100%; text-align: center; margin-bottom: var(--px-24); }
.btn-wide-lg { padding: var(--px-15) !important; font-size: var(--px-17) !important; }
.card--center-tight { text-align: center; margin-bottom: var(--space-11); }
.card--center-tight h2 { font-size: var(--px-17); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.card--center-tight p { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-11); }
.card--center-tight p:last-child { margin-bottom: var(--space-0); }

/* ── about page ───────────────────────────────────────────────────────────── */
.about-wrap { max-width: var(--px-860); margin: var(--space-0) auto; padding: var(--px-48v) var(--px-20) var(--px-72); }
.about-wrap h1 { font-size: var(--px-215r); line-height: var(--line-title); margin-bottom: var(--px-12); letter-spacing: var(--track-tight); }
.about-wrap .lede { font-size: var(--px-112r); color: var(--text-body-soft); margin-bottom: var(--px-8); }
.about-wrap h2 { font-size: var(--px-145r); margin-top: var(--px-48v); margin-bottom: var(--px-14); padding-bottom: var(--px-8); border-bottom: var(--px-2) solid var(--border); }
.about-wrap h3 { font-size: var(--px-108r); margin-top: var(--px-22r2); margin-bottom: var(--px-6); }
.about-wrap p, .about-wrap li { line-height: var(--lh-172); color: var(--text-body-strong); max-width: var(--measure); }
.about-wrap p { margin-bottom: var(--px-12); }
.about-wrap ul { padding-left: var(--px-22r2); margin-bottom: var(--px-12); }
.about-wrap li { margin-bottom: var(--px-6); }
.about-wrap dl { display: grid; grid-template-columns: minmax(var(--px-150), var(--px-210)) 1fr; gap: var(--space-0); margin: var(--px-18v) var(--space-0) var(--px-8); border: var(--bw) solid var(--border); border-radius: var(--radius); overflow: hidden; }
.about-wrap dt { background: var(--hover-row); font-weight: var(--weight-semi); padding: var(--px-10) var(--px-14); border-bottom: var(--bw) solid var(--border); color: var(--green-dark); font-size: var(--px-93r); }
.about-wrap dd { padding: var(--px-10) var(--px-14); border-bottom: var(--bw) solid var(--border); margin: var(--space-0); font-size: var(--text-lg); }
.about-wrap dt:last-of-type, .about-wrap dd:last-of-type { border-bottom: none; }
.about-wrap .cta { display: inline-block; margin-top: var(--px-18v); background: var(--ink); color: var(--surface); font-weight: var(--weight-semi); padding: var(--px-12) var(--px-22r2); border-radius: var(--radius); text-decoration: none; }
.about-wrap .cta:hover { background: var(--green-hover); }
.about-wrap .note { background: var(--about-note-bg); border-left: var(--px-4) solid var(--amber); padding: var(--px-14) var(--px-18v); margin: var(--px-18v) var(--space-0); font-size: var(--text-lg); max-width: var(--measure); }
.about-wrap blockquote { background: var(--blue-wash); border-left: var(--px-4) solid var(--blue); padding: var(--px-14) var(--px-18v); margin: var(--px-16) var(--space-0); font-size: var(--text-lg); max-width: var(--measure); }

/* ── landing page (index.html) ────────────────────────────────────────────── */
body.lp main { max-width: var(--maxw-full); padding: var(--space-0); }

.lp-hero { background: var(--ink); padding: var(--px-56) var(--px-24) var(--px-52); text-align: center; }
.lp-gotcha { display: block; width: fit-content; margin: var(--space-0) auto var(--px-18v); background: var(--green-wash); border: var(--bw) solid var(--green-line); border-radius: var(--radius-pill); padding: var(--px-6) var(--px-14) var(--px-6) var(--px-10); font-family: var(--font-mono); font-size: var(--px-12); font-weight: var(--weight-semi); color: var(--focus-on-ink); }
.lp-eye { display: block; width: fit-content; margin: var(--space-0) auto var(--px-20); background: var(--white-08); color: var(--text-on-ink-2); font-size: var(--px-12); font-weight: var(--weight-regular); letter-spacing: var(--track-normal); padding: var(--px-6) var(--px-14); border-radius: var(--radius-pill); max-width: var(--px-540); }
.lp-hero h1 { font-size: var(--text-hero); font-weight: var(--weight-black); color: var(--text-on-ink); line-height: var(--line-tight); margin-bottom: var(--px-16); max-width: var(--px-540); margin-left: auto; margin-right: auto; }
.lp-hero-sub { font-size: var(--px-16); color: var(--text-on-ink-2); line-height: var(--line-body); max-width: var(--px-360b); margin: var(--space-0) auto var(--px-32); }
.lp-cta { display: inline-flex; align-items: center; gap: var(--px-10); background: var(--surface); color: var(--ink); font-size: var(--px-17); font-weight: var(--weight-semi); padding: var(--px-16) var(--px-32); border-radius: var(--radius-md); text-decoration: none; width: 100%; max-width: var(--px-340); justify-content: center; }
.lp-cta:hover { background: var(--hover-row); }
.lp-cta:focus-visible { outline: var(--px-2) solid var(--focus-on-ink); outline-offset: var(--px-2); }
.lp-cta-micro { font-family: var(--font-mono); font-size: var(--px-12); color: var(--text-on-ink-2); margin-top: var(--px-12); }

.lp-proof { background: var(--ink-soft); padding: var(--px-20) var(--px-24); border-top: var(--border-hero); border-bottom: var(--border-hero); }
.lp-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--px-12); max-width: var(--px-480); margin: var(--space-0) auto; }
.lp-proof-item { display: flex; align-items: center; gap: var(--px-8); font-size: var(--px-13); font-weight: var(--weight-semi); color: var(--text-on-ink-1); }

.lp-section { padding: var(--px-44) var(--px-24); background: var(--surface); border-top: var(--bw) solid var(--border-soft); }
.lp-section--alt { background: var(--gray-bg); }
.lp-section--tight { padding: var(--px-36v) var(--px-24); }
.lp-section--center { text-align: center; }
.lp-wrap { max-width: var(--px-560); margin: var(--space-0) auto; }
.lp-wrap--sm { max-width: var(--px-480); margin: var(--space-0) auto; }
.lp-kicker { font-size: var(--px-12); letter-spacing: var(--track-normal); color: var(--text-faint); font-weight: var(--weight-semi); margin-bottom: var(--px-14); }
.lp-kicker--center { text-align: center; }
.lp-h2 { font-size: var(--px-22); font-weight: var(--weight-black); color: var(--text-strong); margin-bottom: var(--px-24); text-align: center; }
.lp-lede { font-size: var(--px-17); line-height: var(--line-body); color: var(--text); max-width: var(--px-420); margin: var(--space-0) auto; }
.lp-lede strong { color: var(--ink); }

.lp-steps { display: flex; flex-direction: column; gap: var(--px-16); max-width: var(--px-480); margin: var(--space-0) auto; }
.lp-step-card { background: var(--surface); border-radius: var(--radius-md); padding: var(--px-20); display: flex; gap: var(--px-16); align-items: flex-start; box-shadow: var(--shadow); }
.lp-step-num { width: var(--px-40); height: var(--px-40); border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font-family: var(--font-mono); font-size: var(--px-17); font-weight: var(--weight-black); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-step-body h3 { font-size: var(--px-15); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: var(--px-4); }
.lp-step-body p { font-size: var(--px-13); color: var(--text-muted); line-height: var(--line-body); }

.lp-price { padding: var(--px-32) var(--px-24); text-align: center; background: var(--surface); border-top: var(--bw) solid var(--border); border-bottom: var(--bw) solid var(--border); }
.lp-price-badge { display: inline-block; background: var(--green-pale); border: var(--bw-2) solid var(--green-bright); border-radius: var(--radius-md); padding: var(--px-16) var(--px-28); }
.lp-price-amt { font-family: var(--font-mono); font-size: var(--px-36v); font-weight: var(--weight-black); color: var(--ink); }
.lp-price-desc { font-size: var(--px-13); color: var(--text-muted); margin-top: var(--px-4); }

.lp-final { background: var(--ink); padding: var(--px-52) var(--px-24); text-align: center; }
.lp-final h2 { font-size: var(--text-final); font-weight: var(--weight-black); color: var(--text-on-ink); line-height: var(--line-snug); max-width: var(--px-400); margin: var(--space-0) auto var(--px-10); }
.lp-final p { font-size: var(--px-14); color: var(--text-on-ink-2); margin-bottom: var(--px-28); max-width: var(--px-340); margin-left: auto; margin-right: auto; }

.lp-cover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--px-12); }
.lp-cover-card { background: var(--gray-bg); border-radius: var(--radius); padding: var(--px-16); }
.lp-cover-icon { font-size: var(--px-20); margin-bottom: var(--px-6); }
.lp-cover-title { font-weight: var(--weight-bold); font-size: var(--px-14); color: var(--text-strong); margin-bottom: var(--px-4); }
.lp-cover-body { font-size: var(--px-13); color: var(--text-muted); line-height: var(--line-body); }

.lp-scenario-list { display: flex; flex-direction: column; gap: var(--px-14); }
.lp-scenario { background: var(--surface); border-radius: var(--radius); padding: var(--px-18v); }
.lp-scenario-title { font-weight: var(--weight-bold); font-size: var(--px-15); color: var(--text-strong); margin-bottom: var(--px-6); }
.lp-scenario-body { font-size: var(--px-13); color: var(--text-muted); line-height: var(--line-body); }

.lp-state-grid { display: flex; flex-wrap: wrap; gap: var(--px-8); justify-content: center; }
.lp-state-pill { background: var(--gray-bg); color: var(--text-body-soft); font-size: var(--px-13); font-weight: var(--weight-medium); padding: var(--px-5) var(--px-12); border-radius: var(--radius-pill); text-decoration: none; }
.lp-state-pill:hover { background: var(--green-light); color: var(--green-ink); }
.lp-states-note { font-size: var(--px-12); color: var(--text-faint); margin-top: var(--px-14); }
.lp-states-note a { color: var(--green-ink); text-decoration: none; }

.lp-faq-list { display: flex; flex-direction: column; gap: var(--px-14); }
.lp-faq-item { background: var(--surface); border-radius: var(--radius); padding: var(--px-18v); }
.lp-faq-q { font-weight: var(--weight-bold); font-size: var(--px-14); color: var(--text-strong); margin-bottom: var(--px-6); }
.lp-faq-a { font-size: var(--px-13); color: var(--text-muted); line-height: var(--line-body); }

.lp-footer { padding: var(--px-20) var(--px-24); text-align: center; font-size: var(--px-12); color: var(--text-on-ink-2); background: var(--ink); border-top: var(--border-hero); }
.lp-footer a { color: var(--text-on-ink-2); text-decoration: none; }
.lp-footer a:hover { color: var(--text-on-ink-1); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  main { padding: var(--space-13) var(--space-7); }
  .card { padding: var(--space-12); }
  .page-header { gap: var(--space-5); }
  .page-header-title { font-size: var(--text-2xl); }
  .reg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  thead th:last-child, tbody td:last-child { display: none; }
}