/* ==========================================================================
   No Action Fund — sitewide stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --color-bg: #120d09;
  --color-surface: #1c1611;
  --color-text: #f5efe6;
  --color-on-accent: #170f09;
  --color-divider: #4a3a2c;

  --color-neutral-100: #1e1712;
  --color-neutral-200: #241b14;
  --color-neutral-300: #2c2118;
  --color-neutral-400: #8a765f;
  --color-neutral-500: #9c8b76;
  --color-neutral-600: #b6a68e;
  --color-neutral-700: #d3c7b5;
  --color-neutral-800: #e6ddd0;
  --color-neutral-900: #070502;

  --color-accent: #ef5a1f;
  --color-accent-100: rgba(239, 90, 31, 0.14);
  --color-accent-200: rgba(239, 90, 31, 0.26);
  --color-accent-300: #ffba93;
  --color-accent-400: #fb8b52;
  --color-accent-500: #ef5a1f;
  --color-accent-600: #ff7a3d;
  --color-accent-700: #ff9a61;
  --color-accent-800: #ffb98a;
  --color-accent-900: #7c2606;

  --glow-accent: rgba(239, 90, 31, 0.45);

  --hi: #ffc43d;

  --font-head: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-max: 1180px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
a { text-decoration: none; color: inherit; }

/* ---- Focus states ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent-500);
  outline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-accent-500);
}

::selection {
  background: var(--color-accent-500);
  color: var(--color-on-accent);
}

/* ---- Headings ---- */
h1, h2, h3, h4, .display {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

.kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 14px;
}

.subhead {
  font-size: 1.05rem;
  color: var(--color-neutral-700);
  max-width: 640px;
  margin-top: 16px;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 56px 0;
}

.hairline {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 0;
}

.rule-accent {
  width: 84px;
  height: 3px;
  background: var(--color-accent-500);
  border: none;
  margin: 18px 0 22px;
  box-shadow: 0 0 14px var(--glow-accent);
}

/* ---- Links (body copy) ---- */
.text-link {
  color: var(--color-accent-700);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease;
}
.text-link:hover { color: var(--color-accent-500); }

.arrow-link {
  color: var(--color-accent-700);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}
.arrow-link .arrow {
  display: inline-block;
  transition: transform 0.15s ease, color 0.15s ease;
}
.arrow-link:hover { color: var(--color-accent-500); }
.arrow-link:hover .arrow { transform: translateX(3px); color: var(--color-accent-500); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--color-accent-500);
  color: var(--color-on-accent);
  border-color: var(--color-accent-500);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  box-shadow: 0 0 28px 2px var(--glow-accent);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-neutral-400);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  box-shadow: 0 0 18px 1px rgba(239, 90, 31, 0.25);
}

.btn-block { width: 100%; }

/* ---- Help bar ---- */
.help-bar {
  background: var(--color-neutral-900);
  color: var(--color-text);
  font-size: 13px;
  border-bottom: 1px solid rgba(239, 90, 31, 0.18);
}
.help-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  padding-bottom: 9px;
  flex-wrap: wrap;
}
.help-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.help-bar-flags {
  color: var(--hi);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.help-bar-call { font-weight: 700; color: var(--color-text); }
.help-bar a.arrow-link { color: var(--hi); font-size: 12px; font-weight: 700; }
.help-bar a.arrow-link:hover { color: #fff; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  gap: 16px;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-link img {
  height: 120px;
  width: auto;
  filter: drop-shadow(0 0 22px rgba(239, 90, 31, 0.4));
}

/* Live handle counter — today / week / month / year, next to the logo */
.handle-counter-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 26px;
  border-left: 1px solid var(--color-divider);
  min-width: 0;
}
.handle-counter-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  white-space: nowrap;
}
.handle-counter {
  display: flex;
  align-items: center;
  gap: 22px;
}
.handle-counter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.handle-counter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  white-space: nowrap;
}
.handle-counter-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .handle-counter-block { display: none; }
}

/* Contribute button — pill-shaped and light against the dark header, so it
   pops the way a checkout/CTA pill does against a dark storefront header. */
.header-top .btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
  border-radius: 999px;
  padding: 13px 26px;
}
.header-top .btn-primary:hover,
.header-top .btn-primary:focus-visible {
  background: var(--color-accent-500);
  color: var(--color-on-accent);
  border-color: var(--color-accent-500);
  box-shadow: 0 0 26px 3px var(--glow-accent);
}

.main-nav { border-top: 1px solid var(--color-divider); }
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 26px;
}
.main-nav a {
  display: inline-block;
  padding: 12px 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent-500);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-neutral-400);
  padding: 8px 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- No Action Day promo banner ----
   Full-width strip directly below the header. Kept as its own banner rather
   than squeezed into header-top: the header row already carries the logo,
   the (wide-viewport-only) handle counter and the Contribute button, so a
   second CTA there would crowd fast and vanish at the same breakpoint the
   counter does. A dedicated band scales down cleanly instead. */
.no-action-day-banner {
  background: linear-gradient(90deg, var(--color-neutral-900) 0%, var(--color-accent-900) 100%);
  border-bottom: 1px solid rgba(239, 90, 31, 0.35);
}
.no-action-day-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 13px 0;
}
.nad-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}
.nad-kicker {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hi);
  text-shadow: 0 0 14px rgba(239, 90, 31, 0.4);
  flex-shrink: 0;
}
.nad-text p {
  color: var(--color-neutral-700);
  font-size: 13px;
  font-weight: 500;
}
.nad-text p strong {
  color: var(--color-accent-300);
  font-weight: 700;
}
.nad-cta {
  font-size: 12px;
  flex-shrink: 0;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-neutral-100);
  border-top: 1px solid var(--color-divider);
  margin-top: 64px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding: 48px 0 32px;
}
.footer-col { min-width: 0; }
.footer-wordmark {
  font-family: var(--font-head);
  font-size: 1.4rem;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: 0 0 24px rgba(239, 90, 31, 0.25);
}
.footer-tagline {
  color: var(--color-neutral-700);
  font-size: 14px;
  max-width: 34ch;
  margin-bottom: 18px;
}
.footer-help p { font-size: 14px; margin-bottom: 4px; }
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}
.footer-col a:hover { color: var(--color-accent-500); }
.footer-bottom {
  border-top: 1px solid var(--color-divider);
  padding: 18px 0;
  font-size: 12px;
  color: var(--color-neutral-600);
}

/* ---- Cards ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  padding: 28px;
}

/* ---- Tags ---- */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.tag-hi { background: var(--color-neutral-900); color: var(--hi); border: 1px solid rgba(239, 90, 31, 0.35); }
.tag-do { background: var(--color-accent-500); color: var(--color-on-accent); }
.tag-dont { background: transparent; border: 1px solid var(--color-neutral-400); color: var(--color-text); }

/* ==========================================================================
   Mission (home)
   ========================================================================== */
.hero-headline {
  font-size: clamp(3.4rem, 10vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
}
.hero-headline .accent {
  color: var(--color-accent-500);
  text-shadow: 0 0 46px rgba(239, 90, 31, 0.6);
}
.hero-copy { font-size: 1.1rem; color: var(--color-neutral-700); max-width: 46ch; }

.mission-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.mission-statement .kicker { display: block; }
.mission-statement p {
  font-size: 1.05rem;
  color: var(--color-neutral-700);
  line-height: 1.55;
  max-width: 46ch;
}

/* Dramatic spotlight glow behind the wordmark — a soft radial bloom in the
   brand orange, like a single stage light hitting the product shot. */
#mission {
  position: relative;
  overflow: hidden;
  padding: 96px 0 72px;
}
#mission::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  width: 1200px;
  max-width: 200vw;
  height: 780px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at center, rgba(239, 90, 31, 0.35) 0%, rgba(239, 90, 31, 0.13) 40%, rgba(239, 90, 31, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
#mission .container { position: relative; z-index: 1; }

/* ---- Self-check quiz ---- */
.quiz-card { max-width: 720px; margin: 0 auto; padding: 32px; }
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.quiz-progress span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  white-space: nowrap;
}
.quiz-progress .hairline { flex: 1; }
.quiz-question { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 28px; }
.quiz-choices { display: flex; gap: 14px; flex-wrap: wrap; }
.quiz-back { margin-top: 20px; }
.quiz-back button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-neutral-600);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}
.quiz-back button:hover { color: var(--color-accent-500); }

.quiz-doubt { margin-top: 22px; text-align: center; }
.quiz-doubt-trigger {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-neutral-600);
  font-weight: 600;
  font-size: 14px;
}
.quiz-doubt-trigger:hover { color: var(--color-accent-500); }
.quiz-doubt-body {
  margin-top: 14px;
  padding: 18px;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-divider);
  font-size: 14px;
  color: var(--color-neutral-700);
  text-align: left;
}
.quiz-doubt-body p:first-child { margin-bottom: 12px; }

.quiz-result-headline { margin-bottom: 14px; }
.quiz-result-body { color: var(--color-neutral-700); margin-bottom: 24px; }
.quiz-step-counter {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 14px;
}
.quiz-step-text { font-size: 1.1rem; margin-bottom: 26px; }
.quiz-step-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.quiz-summary-list { counter-reset: step; margin-top: 8px; }
.quiz-summary-list li {
  counter-increment: step;
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-divider);
}
.quiz-summary-list li::before {
  content: counter(step);
  font-family: var(--font-head);
  color: var(--color-accent-500);
  min-width: 24px;
}
.quiz-summary-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.quiz-start-over { color: var(--color-neutral-600); font-size: 13px; font-weight: 600; text-decoration: underline; }
.quiz-start-over:hover { color: var(--color-accent-500); }

/* ---- Home — immersive self-check intro flow ----
   The very first thing a visitor sees: no hero, no stats, just the
   opening line and question 1, full-viewport below the sticky chrome. */
.intro-flow {
  min-height: 80vh; /* JS overrides this with an exact fit below whatever precedes it */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 112px; /* bottom padding must clear the absolutely-positioned scroll cue */
  text-align: center;
  position: relative;
  overflow: hidden; /* never let the scroll cue / rotated children spawn a scrollbar */
}

/* Floating background quotes — short pull-quote fragments drawn from the
   IRL Stories, drifting in and out at random positions. JS-driven fade
   cycle (see initFloatingQuotes in script.js), purely decorative and not
   meant to be read start to finish. Lives in the header where the
   Contribute button used to be, to the right of the logo/handle block.
   Homepage-only — the container only exists in index.html. */
.hero-quotes {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: clamp(220px, 26vw, 360px);
  overflow: hidden; /* clip rotated quotes to the slot — no header scrollbar */
  pointer-events: none;
  user-select: none;
}
.hero-quote {
  position: absolute;
  display: block;
  max-width: 100%;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  line-height: 1.25;
  color: rgba(245, 239, 230, 0.32);
  opacity: 0;
  transition: opacity 2.2s ease;
}
.hero-quote.is-left { left: 0; right: auto; text-align: left; }
.hero-quote.is-right { right: 0; left: auto; text-align: right; }
.hero-quote.is-accent { color: rgba(255, 154, 97, 0.4); }
.hero-quote.is-visible { opacity: 1; }
/* On narrow screens the header row is cramped (the handle counter is
   already hidden by this width) — drop the decorative quotes rather than
   crowd the logo. */
@media (max-width: 860px) {
  .hero-quotes { display: none; }
}

.intro-flow-inner {
  width: 100%;
  max-width: 640px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.intro-flow-inner.is-swapping {
  opacity: 0;
  transform: translateY(14px);
}
@media (prefers-reduced-motion: reduce) {
  .intro-flow-inner { transition: none; }
}

.intro-flow .intro-headline {
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  line-height: 1;
  margin-bottom: 14px;
}

.intro-opening {
  font-size: 1.05rem;
  color: var(--color-neutral-600);
  margin-bottom: 34px;
}

.intro-flow .quiz-progress { justify-content: center; margin-bottom: 26px; }
.intro-flow .quiz-progress .hairline { display: none; }

.intro-flow .quiz-question {
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  margin-bottom: 36px;
}

.intro-flow .quiz-choices { justify-content: center; margin-bottom: 22px; }
.intro-flow .quiz-choices .btn { min-width: 140px; }

.intro-flow .quiz-back { text-align: center; }
.intro-flow .quiz-doubt { margin-top: 30px; }

/* Results/steps reuse the same classes the quiz JS already generates —
   only the surrounding layout changes, not the copy or the class names. */
.intro-flow #quiz-results { text-align: left; }
.intro-flow #quiz-results > .tag { display: table; margin: 0 auto 16px; }
.intro-flow .quiz-result-headline,
.intro-flow .quiz-step-counter { text-align: center; }
.intro-flow .quiz-step-nav,
.intro-flow .quiz-summary-links { justify-content: center; }

.intro-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-neutral-600);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.intro-scroll-cue:hover { color: var(--color-accent-500); }
.intro-scroll-cue:hover .intro-scroll-arrow {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 22px rgba(239, 90, 31, 0.5);
}
.intro-scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-accent-500);
  box-shadow: 0 0 16px rgba(239, 90, 31, 0.32);
  font-size: 15px;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  animation: intro-bounce 1.8s ease-in-out infinite;
}
@keyframes intro-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-scroll-arrow { animation: none; }
}

/* ---- Door cards ---- */
.door-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.door-card {
  background: var(--color-surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  transition: background-color 0.15s ease;
}
.door-card:hover { background: var(--color-accent-100); box-shadow: 0 0 40px -12px rgba(239, 90, 31, 0.4) inset; }
.door-card h3 { font-size: 1.15rem; }
.door-card p { color: var(--color-neutral-700); font-size: 14px; flex: 1; }

/* ==========================================================================
   Signs page
   ========================================================================== */
.signs-list { border-top: 1px solid var(--color-divider); margin-top: 30px; }
.sign-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-divider);
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
  transition: background-color 0.15s ease;
}
.sign-row:hover { background: var(--color-neutral-100); }
.sign-row.is-checked { background: var(--color-accent-100); }
.sign-num {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--color-neutral-400);
  min-width: 40px;
  flex-shrink: 0;
}
.sign-row.is-checked .sign-num { color: var(--color-accent-500); }
.sign-text h3 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.sign-text p { color: var(--color-neutral-600); font-size: 14px; }

.signs-response {
  margin-top: 30px;
  padding: 26px;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-divider);
}
.signs-response h3 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 1.15rem; margin-bottom: 10px; }
.signs-response p { color: var(--color-neutral-700); }
.signs-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 26px; }

/* ==========================================================================
   Step-through cards (worried.html)
   ========================================================================== */
.step-card { max-width: 720px; margin: 0 auto; padding: 32px; }
.step-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ---- Do / don't list ---- */
.dodont-list { margin-top: 24px; border-top: 1px solid var(--color-divider); }
.dodont-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-divider);
}
.dodont-row .tag { flex-shrink: 0; margin-top: 2px; }
.dodont-row p { font-size: 15px; }

/* ==========================================================================
   States page
   ========================================================================== */
.state-select-wrap { max-width: 420px; margin-bottom: 32px; }
.state-select-wrap label { display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; color: var(--color-neutral-700); }
select#state-select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-neutral-400);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
}
.state-info { display: grid; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.state-info-row { background: var(--color-surface); padding: 20px 22px; display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
.state-info-row .label { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); }
.state-info-row .value strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.state-info-row .value span { color: var(--color-neutral-600); font-size: 14px; }
.states-footnote { margin-top: 30px; font-size: 13px; color: var(--color-neutral-600); }

/* ==========================================================================
   Forms (share.html / contact.html)
   ========================================================================== */
.form-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; color: var(--color-neutral-700); }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-neutral-400);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 0;
  font-size: 15px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-accent-500);
}
.field-hint { font-size: 12px; color: var(--color-neutral-500); margin-top: 6px; }

.segmented { display: flex; flex-wrap: wrap; border: 1px solid var(--color-neutral-400); width: fit-content; max-width: 100%; }
.segmented label {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-right: 1px solid var(--color-neutral-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  white-space: nowrap;
}
.segmented label:last-child { border-right: none; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label.is-active,
.segmented input:checked + span {
  color: var(--color-accent-700);
}
.segmented label:has(input:checked) { background: var(--color-accent-100); color: var(--color-accent-700); }

.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.checkbox-field input { margin-top: 4px; }
.checkbox-field label { font-size: 14px; color: var(--color-neutral-700); font-weight: 500; text-transform: none; letter-spacing: 0; }

.sidebar { border-left: 1px solid var(--color-divider); padding-left: 36px; }
.sidebar h3 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 1.05rem; margin-bottom: 10px; }
.sidebar p { color: var(--color-neutral-700); font-size: 14px; margin-bottom: 20px; }

.form-success { padding: 40px 0; }
.form-success h2 { margin-bottom: 14px; }
.form-success p { color: var(--color-neutral-700); font-size: 1.05rem; }

/* ==========================================================================
   Stories accordion
   ========================================================================== */
.stories-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); margin-top: 30px; }
.story-item { background: var(--color-surface); }
.story-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  background: none;
  border: none;
  text-align: left;
}
.story-trigger > span:first-child { flex: 1 1 auto; min-width: 0; }
.story-meta { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 10px; }
.story-status { display: block; font-size: 12px; color: var(--color-neutral-500); font-weight: 500; text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
.story-quote { display: block; font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.4; color: var(--color-text); }
.story-marker {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--color-accent-500);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  text-shadow: 0 0 14px rgba(239, 90, 31, 0.45);
}
.story-body {
  padding: 0 26px 26px;
  display: none;
}
.story-item.is-open .story-body { display: block; }
.story-body p { color: var(--color-neutral-700); margin-bottom: 16px; }
.story-body p:last-child { margin-bottom: 0; }
.stories-closing { margin-top: 32px; }

/* ==========================================================================
   Partners
   ========================================================================== */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.partner-tile {
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--color-neutral-400);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-500);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-neutral-100);
}
.partners-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
  max-width: 720px;
}
.partners-columns h3 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 1.05rem; margin-bottom: 10px; }
.partners-columns p { color: var(--color-neutral-700); font-size: 14px; }
.partners-closing { margin-top: 40px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { margin-top: 24px; border-top: 1px solid var(--color-divider); }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 15px;
}
.faq-marker { font-family: var(--font-head); font-size: 1.3rem; color: var(--color-accent-500); flex-shrink: 0; text-shadow: 0 0 14px rgba(239, 90, 31, 0.45); }
.faq-answer { padding: 0 4px 20px; display: none; color: var(--color-neutral-700); max-width: 70ch; }
.faq-item.is-open .faq-answer { display: block; }

/* ==========================================================================
   Donate
   ========================================================================== */
.donate-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.donate-toggle.segmented { margin-bottom: 24px; }
.amount-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.amount-btn {
  padding: 14px 8px;
  border: 1px solid var(--color-neutral-400);
  background: var(--color-surface);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}
.amount-btn.is-active { background: var(--color-accent-500); color: var(--color-on-accent); border-color: var(--color-accent-500); box-shadow: 0 0 18px 1px var(--glow-accent); }
.amount-other { margin-bottom: 22px; }
.impact-line {
  padding: 16px 18px;
  background: var(--color-accent-100);
  border: 1px solid rgba(239, 90, 31, 0.45);
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 22px;
}
.donate-fineprint { margin-top: 14px; font-size: 12px; color: var(--color-neutral-500); }
.ways-block { margin-bottom: 28px; }
.ways-block h3 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 1.05rem; margin-bottom: 8px; }
.ways-block p { color: var(--color-neutral-700); font-size: 14px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-rows { display: flex; flex-direction: column; gap: 20px; }
.contact-row { padding-bottom: 18px; border-bottom: 1px solid var(--color-divider); }
.contact-row .label { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 6px; }
.contact-row .value { font-size: 15px; }

/* ==========================================================================
   Page hero (non-home pages)
   ========================================================================== */
.page-hero { padding: 52px 0 20px; }
.page-hero h1 { max-width: 16ch; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ---- Tablet and below: reflow multi-column grids ---- */
@media (max-width: 900px) {
  .mission-grid { grid-template-columns: 1fr; gap: 28px; }
  .door-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; }
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
  .partners-columns { grid-template-columns: 1fr; gap: 24px; }
  .state-info-row { grid-template-columns: 140px 1fr; }
}

/* ---- Below ~768px: two-column sections stack into one column ---- */
@media (max-width: 768px) {
  .donate-layout { grid-template-columns: 1fr; }
  .form-layout { grid-template-columns: 1fr; gap: 36px; }
  .sidebar { border-left: none; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: 28px; }
  .main-nav ul { gap: 6px 20px; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .section { padding: 40px 0; }
  .header-top { padding: 16px 0; gap: 12px; }
  .logo-link img { height: 64px; }
  .main-nav ul { gap: 4px 16px; }
  .main-nav a { white-space: nowrap; }
  .help-bar .container { flex-direction: column; align-items: flex-start; gap: 4px; }
  .door-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .amount-grid { grid-template-columns: repeat(3, 1fr); }
  .state-info-row { grid-template-columns: 1fr; gap: 4px; }
  .quiz-card, .step-card { padding: 22px; }
  .story-trigger { padding: 18px; }
  .story-body { padding: 0 18px 20px; }
  .intro-flow { padding: 32px 18px 112px; min-height: 72vh; }
  .intro-flow .quiz-choices .btn { min-width: 0; flex: 1 1 auto; }
}

/* ---- Phone tier: tighten controls that can still crowd at narrow widths ---- */
@media (max-width: 480px) {
  .segmented { flex-direction: column; width: 100%; }
  .segmented label { border-right: none; border-bottom: 1px solid var(--color-neutral-400); justify-content: flex-start; }
  .segmented label:last-child { border-bottom: none; }
  .amount-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .quiz-choices .btn,
  .quiz-step-nav .btn,
  .step-nav .btn { flex: 1 1 auto; }
}