/* Self-hosted so the wordmark is not at the mercy of a third-party CDN, and so
   it renders under a CSP that allows fonts only from 'self'. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-800-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-900-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

/* Unified masthead theme — Option 10 tokens across the site */

/* Bettors Anonymous — Masthead Layout (Option 10)
   Plain CSS only. Mobile-first. */

:root {
  --navy: #1f3a5f;
  --navy-dark: #14233a;
  --gold: #b8862b;
  --cream: #faf7f0;
  --white: #ffffff;
  --border: #ded7c6;
  --text: #1f2937;
  --text-muted: #4b5563;
  --text-soft: #6b7280;

  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 4px;
  --focus: 3px solid var(--gold);
}

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

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

body {
  margin: 0;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--navy);
}

a:focus-visible,
.btn:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Masthead                                                                   */
/* -------------------------------------------------------------------------- */

.masthead {
  background: var(--white);
  text-align: center;
  padding: 1.5rem 1.25rem 1.1rem; /* mobile */
}

.logotype {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem; /* 28px mobile */
  line-height: 1.2;
  color: var(--navy);
  text-decoration: none;
}

.logotype:hover {
  color: var(--navy-dark);
}

.tagline {
  margin: 0.55rem 0 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-soft);
}

/* -------------------------------------------------------------------------- */
/* Nav                                                                        */
/* -------------------------------------------------------------------------- */

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--navy);
}

.nav-bar a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.35rem 0.15rem;
}

.nav-bar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.nav-bar a:focus-visible {
  outline-color: var(--gold);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Main                                                                       */
/* -------------------------------------------------------------------------- */

.main {
  padding: 1.75rem 1.25rem 2.25rem;
}

.main-grid {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 72rem;
  margin: 0 auto;
}

.welcome .eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.welcome h1 {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem; /* 32px mobile */
  line-height: 1.2;
  color: var(--navy-dark);
}

.welcome p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  max-width: 42rem;
}

.welcome p:last-of-type {
  margin-bottom: 1.35rem;
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem; /* 48px */
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}

.btn-row .btn {
  width: 100%;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--navy);
}

.btn-primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}

.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
}

.btn-secondary:hover {
  background: var(--cream);
}

/* -------------------------------------------------------------------------- */
/* Sidebar cards                                                              */
/* -------------------------------------------------------------------------- */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.25rem;
}

.card h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--navy-dark);
}

.meeting-list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.meeting-list li {
  margin: 0 0 0.85rem;
}

.meeting-list li:last-child {
  margin-bottom: 0.95rem;
}

.meeting-list strong {
  display: block;
  font-weight: 700;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.35;
}

.meeting-list span {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.4;
}

.card-link {
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--navy);
}

.card-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.card p {
  margin: 0;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

.footer-strip {
  background: var(--navy-dark);
  color: #e8eef6;
  text-align: center;
  padding: 0.95rem 1rem;
  font-size: 0.9375rem; /* ~15px */
}

.footer-strip p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.55rem;
  line-height: 1.5;
}

.footer-strip a {
  color: #e8eef6;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.footer-strip a:hover {
  color: var(--white);
}

.footer-strip .sep {
  color: #8fa0b8;
  user-select: none;
}

/* -------------------------------------------------------------------------- */
/* Desktop ≥800px                                                             */
/* -------------------------------------------------------------------------- */

@media (min-width: 800px) {
  .masthead {
    padding: 30px 64px 22px;
  }

  .logotype {
    font-size: 2.5rem; /* 40px */
  }

  .tagline {
    font-size: 1.0625rem;
  }

  .nav-bar {
    gap: 0 38px;
    padding: 0.95rem 1.5rem;
  }

  .main {
    padding: 44px 64px;
  }

  .main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
  }

  .welcome h1 {
    font-size: 2.625rem; /* 42px */
  }

  .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-row .btn {
    width: auto;
    min-width: 12rem;
  }
}


/* ---- Interior page components (token-remapped) ---- */

/*
  Bettors Anonymous — design system (light)
  Calm and direct. No casino cues: no gold, no red, no felt green, no neon.
  Warm paper ground, ink text, a single deep-teal accent.

  WCAG AA contrast pairs (measured on the tokens below):
  - --color-text (#1E2936) on --color-surface (#F7F4EE)     13.42:1  (body)
  - --color-text (#1E2936) on --color-surface-raised        13.94:1  (cards)
  - --color-text-muted (#4A5560) on --color-surface          6.93:1  (muted body)
  - --color-accent (#3D6B66) on --color-surface              5.48:1  (links/UI)
  - --color-accent-strong (#2A524E) on --color-surface       7.92:1  (link hover)
  - --color-surface on --color-accent (primary button fill)  5.48:1  (button label)
  - --color-focus (#1F4541) on --color-surface               8.35:1  (focus ring ≥3:1)
  - --color-border (#8C8270) on --color-surface              3.45:1  (control edges, 1.4.11)
  - --color-footer-text on --color-footer (#2C3640)          9.62:1  (footer body)
  - --color-footer-muted (#C5CBD3) on footer                 6.98:1  (footer muted)
  - --color-notice-text on --color-notice-soft              ~7.1:1   (notice)

  NOTE on --color-border: the pre-2026-09 light palette used #D5CFC3 here, which is
  only 1.41:1 and fails 1.4.11 for the edges of secondary buttons, quiz pills and
  filter chips. #8C8270 is the AA-safe replacement; decorative hairlines use
  --color-border-soft instead.
*/

/* -------------------------------------------------------------------------- */

/* Wordmark faces. Archivo carries the lockup (900 heavy / 300 light split, plus
   800 for the header help link); Instrument Serif italic carries the tagline. */
/* Space Grotesk tops out at 700; that is the heavy weight for headlines. */
/* -------------------------------------------------------------------------- */
/* Tokens                                                                      */
/* -------------------------------------------------------------------------- */

:root {
  /* Masthead palette (canonical) */
  --navy: #1f3a5f;
  --navy-dark: #14233a;
  --gold: #b8862b;
  --cream: #faf7f0;
  --white: #ffffff;
  --border: #ded7c6;
  --text: #1f2937;
  --text-muted: #4b5563;
  --text-soft: #6b7280;

  /* Legacy aliases used by page components */
  --color-surface: var(--cream);
  --color-surface-soft: #f0ebe0;
  --color-surface-raised: var(--white);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-accent: var(--navy);
  --color-accent-strong: var(--navy-dark);
  --color-focus: var(--gold);
  --color-border: #8a7f6a;
  --color-border-soft: var(--border);
  --color-notice-soft: #efe8da;
  --color-notice-text: #3a4236;
  --color-footer: var(--navy-dark);
  --color-footer-text: #e8eef6;
  --color-footer-muted: #c5cbd3;
  --color-ink-on-accent: var(--white);

  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-wordmark: var(--font-display);
  --font-tagline: var(--font-sans);
  --font-serif: Georgia, "Times New Roman", serif;
  --text-base: 1.125rem;
  --text-sm: 1rem;
  --text-xs: 0.875rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 1.1rem + 0.9vw, 1.65rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.35rem);
  --text-3xl: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);
  --leading-body: 1.65;
  --leading-tight: 1.25;
  --measure: 68ch;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px color-mix(in srgb, var(--navy-dark) 8%, transparent);
  --container: 72rem;       /* base max-width; 80em bumps it to 72.5rem */
  --container-pad: 1.25rem;
  --header-h: 4rem;
  --motion-fast: 120ms;
  --ease: ease;
}

/* Sub pages use .container while the home page uses .main; .main steps up to a
   64px gutter at 800px, so the container has to match or interior content sits
   ~20px off the viewport edge under a centred masthead and reads as unaligned.
   This must come after the base :root above to win the cascade. */
@media (min-width: 800px) {
  :root {
    --container-pad: 64px;
  }
}


/* -------------------------------------------------------------------------- */
/* Base                                                                        */
/* -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--motion-fast) var(--ease);
}

a:hover {
  color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.skip-link:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-focus);
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  margin: 0 0 var(--space-4);
}

ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}

.container {
  width: 100%;
  /* box-sizing is border-box, so --container has to be widened by the gutter
     for the CONTENT box to measure --container. Without this the sub pages
     land one gutter inboard of the home page's .main-grid at the same width. */
  max-width: calc(var(--container) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.prose {
  max-width: var(--measure);
}

.prose-serif {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75;
}

.is-hidden {
  display: none !important;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* -------------------------------------------------------------------------- */
/* Header / Nav — mobile-first (~360px base)                                   */
/* -------------------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-surface) 92%, white);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-soft);
}

.header-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--space-2) var(--space-3);
  padding-block: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Wordmark lockup                                                             */
/* -------------------------------------------------------------------------- */

/*
  Two lines inside one link:
    1. BETTORS (Archivo 900) + ANONYMOUS (Archivo 300)
    2. a 28x2 rule, then the tagline in Instrument Serif italic

  The text is authored in normal case and uppercased in CSS, so assistive tech
  reads "Bettors Anonymous" as words rather than spelling it out. The link
  carries its own accessible name, so the visible text is aria-hidden.

  Mobile-first: the values here are the small sizes; >=64em scales them up.
*/
.lockup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px mobile, 6px from 64em */
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 3.5rem); /* never runs under the menu button */
  text-decoration: none;
  color: inherit;
}

.lockup:hover,
.lockup:focus-visible {
  color: inherit;
}

.lockup-name {
  display: block;
  font-family: var(--font-wordmark);
  font-size: 1.25rem; /* 20px mobile */
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap; /* line 1 must never wrap */
}

.lockup-name-strong {
  font-weight: 900;
}

.lockup-name-light {
  font-weight: 300;
}

.lockup-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: var(--font-tagline);
  font-style: italic;
  font-size: 0.9375rem; /* 15px mobile */
  line-height: 1.25;
  color: var(--color-accent-strong);
}

/* Decorative rule: a pseudo-element, so it is never announced. */
.lockup-tagline::before {
  content: "";
  flex: 0 0 auto;
  width: 20px; /* 28px from 64em */
  height: 2px;
  background: var(--color-accent);
}

/* Very narrow screens: drop the rule and let the tagline wrap. Line 1 must not
   wrap, so it steps down instead — at 20px the nowrap name overflows its box
   at 320px and gets clipped. */
@media (max-width: 22.5em) {
  .lockup-tagline::before {
    display: none;
  }

  .lockup-tagline {
    gap: 0;
    white-space: normal;
  }

  .lockup-name {
    font-size: 1.125rem; /* 18px */
  }
}

/* Footer reuses the same markup at ~80%, centred to match the footer block. */
.lockup-footer {
  max-width: none;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 auto var(--space-5);
}

.lockup-footer .lockup-name {
  font-size: 1rem;
  color: var(--color-footer-text);
}

.lockup-footer .lockup-tagline {
  font-size: 0.8125rem;
  color: var(--color-footer-muted);
}

.lockup-footer .lockup-tagline::before {
  background: var(--color-footer-muted);
}

/* -------------------------------------------------------------------------- */
/* Header help link                                                            */
/* -------------------------------------------------------------------------- */

.header-help {
  font-family: var(--font-wordmark);
  font-weight: 800;
  font-size: 0.875rem; /* 14px */
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.header-help:hover {
  color: var(--color-accent);
}

/* Below 64em it lives in the nav panel rather than competing with the menu
   button for the top bar. */
.header-help-item {
  border-bottom: 0;
}

.main-nav .header-help {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--space-3);
}

.header-help-desktop {
  display: none;
}

.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-text);
  cursor: pointer;
}

.mobile-menu-btn svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.main-nav {
  display: none;
  width: 100%;
  flex-basis: 100%;
  border-top: 1px solid var(--color-border-soft);
  margin-top: var(--space-2);
  padding-top: var(--space-1);
}

.main-nav.mobile-active {
  display: block;
}

.main-nav > ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.main-nav a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3rem; /* 48px tap targets */
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav a[aria-current="page"] {
  color: var(--color-accent-strong);
  background: var(--color-surface-soft);
}

@media (min-width: 64em) {
  :root {
    --header-h: 5.5rem; /* 88px on desktop */
  }

  .header-container {
    flex-wrap: nowrap;
    padding-block: 0;
    gap: var(--space-4);
  }

  .lockup {
    max-width: none;
    flex: 0 1 auto;
    gap: 0.375rem; /* 6px between lines */
  }

  .lockup-name {
    font-size: 1.625rem; /* 26px */
  }

  .lockup-tagline {
    font-size: 1.125rem; /* 18px */
  }

  .lockup-tagline::before {
    width: 28px;
  }

  .mobile-menu-btn {
    display: none;
  }

  /* On desktop the help link sits beside the nav; the nav copy is hidden. */
  .header-help-desktop {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-4);
  }

  .header-help-item {
    display: none;
  }

  .main-nav {
    display: block;
    width: auto;
    flex-basis: auto;
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  .main-nav > ul {
    flex-direction: row;
    gap: var(--space-1);
  }

  .main-nav a {
    width: auto;
    min-height: 0;
    padding: var(--space-2) var(--space-3);
    border-bottom: 0;
    border-radius: var(--radius-sm);
  }
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                     */
/* -------------------------------------------------------------------------- */

.btn,
.btn-aaa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-med) var(--ease),
              border-color var(--motion-med) var(--ease),
              color var(--motion-med) var(--ease),
              box-shadow var(--motion-med) var(--ease);
}

.btn-primary,
.btn-aaa {
  background: var(--color-accent);
  color: var(--color-ink-on-accent);
  border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-aaa:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-ink-on-accent);
}

.btn-secondary,
.btn-aaa-secondary {
  background: transparent;
  color: var(--color-accent-strong);
  border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-aaa-secondary:hover {
  background: var(--color-surface-raised);
  color: var(--color-accent-strong);
  border-color: var(--color-accent);
}

.btn-compact {
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font-size: var(--text-xs);
}

.btn-block {
  width: 100%;
}

/* Button groups: stack full-width on mobile, inline from 40em */
.btn-group,
p:has(> .btn) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.btn-group .btn,
p:has(> .btn) > .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .btn-group,
  p:has(> .btn) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-group .btn,
  p:has(> .btn) > .btn {
    width: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Page header                                                                 */
/* -------------------------------------------------------------------------- */

.page-header {
  background: var(--color-surface-soft);
  padding: var(--space-5) 0 var(--space-4);
}

@media (min-width: 40em) {
  .page-header {
    padding: var(--space-7) 0 var(--space-6);
  }
}

.page-header-container {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.page-header h1 {
  margin: 0;
}

.breadcrumbs {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  margin: 0 0.55em;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-accent-strong);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Sections / rhythm                                                           */
/* -------------------------------------------------------------------------- */

.section,
.content-section,
.action-grid-section,
.hero-testimonials-section {
  padding-block: var(--space-5);
}

@media (min-width: 40em) {
  .section,
  .content-section,
  .action-grid-section,
  .hero-testimonials-section {
    padding-block: var(--space-7);
  }
}

@media (min-width: 64em) {
  .section,
  .content-section,
  .action-grid-section,
  .hero-testimonials-section {
    padding-block: var(--space-8);
  }
}

.section-soft,
.hero-testimonials-section,
.home-intro-section {
  background: var(--color-surface-soft);
}

.section-raised {
  background: var(--color-surface-raised);
}

/* -------------------------------------------------------------------------- */
/* Home hero quote                                                             */
/* -------------------------------------------------------------------------- */

.hero-testimonials-section {
  text-align: center;
}

.testimonials-slider {
  max-width: 46rem;
  margin: 0 auto;
}

.testimonial-item {
  display: none;
}

.testimonial-item.active {
  display: block;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.92rem + 1.4vw, 1.55rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.testimonial-author {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.testimonial-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* -------------------------------------------------------------------------- */
/* Feature cards — 1 col (horizontal) → 2 @40em → 4 @64em (vertical)         */
/* -------------------------------------------------------------------------- */

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.feature-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: center;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--motion-med) var(--ease),
              border-color var(--motion-med) var(--ease),
              background var(--motion-med) var(--ease);
}

.feature-item:hover {
  color: inherit;
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  box-shadow: var(--shadow-hover);
  background: var(--color-surface-raised);
}

.feature-ring {
  grid-row: 1 / -1;
  grid-column: 1;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 0.1rem solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--color-surface);
  flex-shrink: 0;
}

.feature-ring svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-accent);
}

.feature-item h3 {
  grid-column: 2;
  font-size: 1.05rem;
  margin: 0;
}

.feature-rule {
  grid-column: 2;
  display: block;
  width: 2rem;
  height: 0.125rem;
  background: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  margin: 0;
}

.feature-item p {
  grid-column: 2;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

@media (min-width: 40em) {
  .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 64em) {
  .feature-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
  }

  .feature-ring {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--space-4);
  }

  .feature-ring svg {
    width: 2rem;
    height: 2rem;
  }

  .feature-item h3 {
    margin: 0 0 var(--space-2);
  }

  .feature-rule {
    margin: 0 0 var(--space-3);
  }

  .feature-item p {
    max-width: 16em;
  }
}

.home-intro {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.home-intro p {
  text-align: left;
}

.home-intro-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.home-intro-actions .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .home-intro-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .home-intro-actions .btn {
    width: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Cards / meetings / downloads                                                */
/* -------------------------------------------------------------------------- */

.meeting-day {
  margin-top: var(--space-7);
}

.meeting-day:first-of-type {
  margin-top: var(--space-4);
}

.meeting-day h3 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 1.15rem;
}

.meeting-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.meeting-card-info {
  min-width: 0;
}

.meeting-card-info h4 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.meeting-meta {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.meeting-address {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
}

.meeting-card > div:last-child {
  width: 100%;
}

.meeting-card > div:last-child .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .meeting-card {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  /* One fixed column, not auto: sizing each button to its own label made
     "Join Zoom" and "Add to calendar" different widths on every card, and the
     Meeting ID line set a different column width again. */
  .meeting-card > div:last-child {
    width: 15rem;
    flex: 0 0 15rem;
  }

  .meeting-card > div:last-child .btn {
    width: 100%;
  }
}

.meeting-notes {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.meeting-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
  margin-right: var(--space-2);
}

.zoom-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}

.empty-state {
  padding: var(--space-5);
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
}

.first-meeting {
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.first-meeting-list {
  margin: 0;
  padding-left: 1.25rem;
}

.first-meeting-list li {
  margin-bottom: var(--space-2);
}

.meeting-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.filter-chip {
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.filter-chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink-on-accent); /* off-white on sage is only 1.57:1 */
}

.meeting-day.is-today > h3 .meeting-today-badge:not([hidden]) {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.meeting-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.meeting-card-actions .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .meeting-card-actions {
    width: auto;
    min-width: 11rem;
  }

  .meeting-card-actions .btn {
    width: auto;
  }
}

.meeting-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.meeting-tag-expand {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.meeting-zoom-id {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.help-section {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-left: 0.25rem solid var(--color-accent-strong);
  border-radius: var(--radius-md);
}

.help-section h2 {
  margin-top: 0;
  font-size: var(--text-xl);
}

.footer-help {
  margin-top: var(--space-3) !important;
  font-size: var(--text-sm);
}

.footer-help a {
  font-weight: 700;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.resource-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.resource-card h4 {
  margin: 0 0 var(--space-2);
}

.resource-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.entry-block {
  margin-bottom: var(--space-7);
}

.entry-block h2 {
  margin-top: 0;
}

.reading-list {
  padding-left: 1.25rem;
  line-height: 1.8;
  color: var(--color-text);
}

.reading-close {
  margin-top: var(--space-4);
  font-style: italic;
}

.footer-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-footer-muted);
}

/* -------------------------------------------------------------------------- */
/* FAQ / Quiz                                                                  */
/* -------------------------------------------------------------------------- */

.faq-page {
  max-width: 48rem;
}

.faq-list {
  margin-bottom: var(--space-8);
}

.faq-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item h3 {
  font-size: 1.1rem;
  margin: 0 0 var(--space-2);
}

.faq-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.faq-questions {
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-border-soft);
}

.faq-questions-intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.quiz-help-now {
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.quiz-help-now a {
  font-weight: 700;
}

.quiz-privacy {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* 20 Questions page: denser chrome so more cards fit above the fold */
body:has(#quiz-form) .page-header {
  padding: var(--space-4) 0 var(--space-3);
}

body:has(#quiz-form) .content-section {
  padding-block: var(--space-4);
}

body:has(#quiz-form) .faq-questions-intro {
  margin-bottom: var(--space-2);
}

.quiz-form {
  margin: 0;
}

.quiz-progress {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.quiz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem; /* neat rhythm — tight but not jammed */
}

@media (min-width: 40em) {
  .quiz-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .quiz-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 cols keeps question text readable */
    gap: 0.5rem;
  }
}

@media (min-width: 80em) {
  .quiz-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.quiz-card {
  margin: 0;
  min-width: 0;
  /* Column, not wrapped row: with 2-3 narrow columns the question nearly always
     wraps, which pushed the toggles onto their own right-aligned line and left a
     ragged hole in every card. Question on top, answer pinned to the bottom of an
     equal-height card instead. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  box-shadow: none; /* flatter = denser without looking heavy */
}

.quiz-card.is-unanswered {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.quiz-card legend {
  display: block;
  float: none;
  flex: 0 0 auto;
  width: 100%;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.quiz-card::after {
  display: none;
}

.quiz-toggles {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  clear: none;
  flex: 0 0 auto;
  margin-top: auto;   /* pin to the bottom edge of the card */
  margin-left: 0;
}

.quiz-pill {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  cursor: pointer;
}

.quiz-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.quiz-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.5rem;
  min-height: 1.625rem; /* 26px */
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease);
}

.quiz-pill:hover span {
  border-color: var(--color-accent);
}

.quiz-pill input:focus-visible + span {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.quiz-pill input:checked + span {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-footer-text);
}

.quiz-incomplete {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.quiz-incomplete p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.quiz-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.quiz-actions .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .quiz-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .quiz-actions .btn {
    width: auto;
  }
}

.quiz-result {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-raised));
  color: var(--color-text);
}

.quiz-result.is-visible,
.quiz-result:not([hidden]) {
  display: block;
}

.quiz-result[hidden] {
  display: none !important;
}

.quiz-result h3 {
  margin-top: 0;
  color: inherit;
}

.quiz-result p {
  color: inherit;
}

.quiz-result-actions {
  margin: var(--space-5) 0 0;
}

.quiz-result-actions .btn {
  display: inline-flex;
}

.quiz-safety {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 0.25rem solid var(--color-accent-strong);
  border-radius: var(--radius-md);
}

.quiz-safety-heading {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  font-size: var(--text-lg);
}

.quiz-safety ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}

.quiz-safety li {
  margin-bottom: var(--space-2);
}

.quiz-safety a {
  font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* Program / Who We Are editorial                                              */
/* -------------------------------------------------------------------------- */

.prog-hero {
  background:
    linear-gradient(160deg, #2c3640 0%, #354652 55%, #3d4f5c 100%);
  color: var(--color-footer-text);
  padding: var(--space-6) 0 var(--space-5);
}

@media (min-width: 40em) {
  .prog-hero {
    padding: var(--space-8) 0 var(--space-7);
  }
}

@media (min-width: 64em) {
  .prog-hero {
    padding: var(--space-9) 0 var(--space-8);
  }
}

.prog-hero-inner {
  max-width: 40rem;
}

.prog-kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-footer-muted);
  margin-bottom: var(--space-4);
}

.prog-hero h1 {
  color: var(--color-footer-text);
  margin-bottom: var(--space-4);
}

.prog-lede {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  color: color-mix(in srgb, var(--color-footer-text) 85%, transparent);
  margin-bottom: var(--space-6);
}

.prog-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(247, 244, 238, 0.18);
}

.prog-toc a {
  color: color-mix(in srgb, var(--color-footer-text) 75%, transparent);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.prog-toc a:hover {
  color: var(--color-footer-text);
  border-color: rgba(247, 244, 238, 0.25);
}

.prog-section {
  padding: var(--space-6) 0;
}

@media (min-width: 40em) {
  .prog-section {
    padding-block: var(--space-7);
  }
}

@media (min-width: 64em) {
  .prog-section {
    padding-block: var(--space-8);
  }
}

.prog-history {
  background: var(--color-surface-soft);
}

.prog-fellowship {
  background: var(--color-surface);
}

.prog-illness {
  background: var(--color-surface-soft);
}

/* Mobile: stacked; date lockup as compact banner */
.prog-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.prog-date-lockup {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  border-left: 0.25rem solid var(--color-accent);
}

.prog-date-day {
  display: inline;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.prog-date-num,
.prog-date-year {
  display: inline;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.prog-date-year {
  color: var(--color-accent-strong);
}

.prog-date-place {
  display: block;
  flex-basis: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 0;
  padding-top: 0;
  max-width: none;
}

@media (min-width: 64em) {
  .prog-split {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .prog-date-lockup {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .prog-date-day {
    display: block;
    letter-spacing: 0.14em;
    margin-bottom: var(--space-3);
  }

  .prog-date-num,
  .prog-date-year {
    display: block;
    font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
  }

  .prog-date-year {
    margin-bottom: var(--space-4);
  }

  .prog-date-place {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    max-width: 11em;
  }
}

.prog-prose h2,
.prog-narrow > h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

.prog-prose p {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: var(--measure);
}

.prog-ack {
  background: color-mix(in srgb, var(--color-surface-soft) 70%, #d9d2c4);
  padding-block: var(--space-5);
}

.prog-ack p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 52em;
}

.prog-ack-label {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-right: var(--space-3);
}

.prog-narrow {
  max-width: 42rem;
  margin: 0 auto;
}

.prog-pull {
  margin: 0 0 var(--space-6);
  padding: 0 0 0 var(--space-5);
  border-left: 3px solid var(--color-accent);
}

.prog-pull p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}

.prog-purpose {
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  font-size: 1.15rem !important;
}

.prog-drop::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.8em;
  font-weight: 600;
  line-height: 0.85;
  padding: 0.1em 0.12em 0 0;
  color: var(--color-accent-strong);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  padding-block: var(--space-7);
  text-align: center;
}

footer p {
  margin: 0;
  color: var(--color-footer-text);
  font-size: var(--text-sm);
}

footer .footer-note {
  color: var(--color-footer-muted);
}

footer a {
  color: var(--color-footer-muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--color-footer-text);
}

.scroll-to-top {
  display: none;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
}

.scroll-to-top.is-visible {
  display: inline-block;
}

/* -------------------------------------------------------------------------- */
/* Footer: persistent "Need help now?" line                                    */
/* -------------------------------------------------------------------------- */

.footer-help {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(247, 244, 238, 0.22);
}

.footer-help-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-footer-text);
  margin-bottom: var(--space-2);
}

.footer-help p {
  margin: 0 auto var(--space-2);
  max-width: 44rem;
  color: var(--color-footer-muted);
}

.footer-help p:last-child {
  margin-bottom: 0;
}

/* Underlined so the numbers read as callable, not as decoration. */
footer .footer-help a {
  color: var(--color-footer-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

footer .footer-help a:hover {
  color: var(--color-accent-strong);
}

/* -------------------------------------------------------------------------- */
/* 20 Questions: live yes total                                                */
/* -------------------------------------------------------------------------- */

/* Sticks to the top on long scrolls so the count stays readable while you work
   down the list. There is no submit button — this is the result. */
.quiz-yes-total {
  position: sticky;
  top: calc(var(--header-h) + 0.5rem);
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0.45rem 0.75rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

/* display:flex would otherwise beat the UA rule for [hidden]. */
.quiz-yes-total[hidden] {
  display: none;
}

.quiz-yes-count {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.quiz-yes-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.quiz-yes-label strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .quiz-yes-total {
    position: static;
  }
}

/* -------------------------------------------------------------------------- */
/* Meetings: Zoom not yet posted                                               */
/* -------------------------------------------------------------------------- */

/* Placeholder, not a stub listing. Also the landing target for the /zoom and
   /phone-meetings redirects, which previously pointed at a missing anchor. */
.zoom-pending {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.zoom-pending h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.zoom-pending p {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* -------------------------------------------------------------------------- */
/* Home: hero                                                                  */
/* -------------------------------------------------------------------------- */

.home-hero {
  padding-block: var(--space-5) var(--space-4);
  background: var(--color-surface);
}

@media (min-width: 64em) {
  .home-hero {
    padding-block: var(--space-6) var(--space-5);
  }
}

.home-hero-inner {
  max-width: 54rem;
}

.home-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 16ch; /* short line length */
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

.home-hero-lede {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 40ch;
  margin: 0 0 var(--space-4);
}

.home-hero-actions {
  margin-bottom: var(--space-3);
}

/* Populated from /data/meetings.json; stays hidden when data is unavailable.
   Laid out as ordinary text so the line wraps mid-phrase on narrow screens
   rather than breaking the "Next meeting:" label into its own column. */
.next-meeting {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.next-meeting::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: 0.08em;
}

.next-meeting strong {
  font-weight: 600;
  color: var(--color-text);
}

/* -------------------------------------------------------------------------- */
/* Home: "Sound familiar?" card grid                                           */
/* -------------------------------------------------------------------------- */

.home-section {
  padding-block: var(--space-5);
}

@media (min-width: 64em) {
  .home-section {
    padding-block: var(--space-6);
  }
}

.home-section-title {
  font-size: var(--text-2xl);
  max-width: 24ch;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.familiar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40em) {
  .familiar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .familiar-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.familiar-card {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
}

/* -------------------------------------------------------------------------- */
/* Home: what counts as gambling                                               */
/* -------------------------------------------------------------------------- */

.definition-section {
  background: var(--color-surface-soft);
}

.definition-body {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}

.definition-emphasis {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  max-width: 24ch;
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
}

/* -------------------------------------------------------------------------- */
/* Home: how it works                                                          */
/* -------------------------------------------------------------------------- */

.steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

@media (min-width: 48em) {
  .steps-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.steps-list > li {
  counter-increment: step;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.steps-list > li::before {
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.step-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 28ch;
}

/* -------------------------------------------------------------------------- */
/* Home: Preamble pull-quote (fellowship literature — verbatim)                */
/* -------------------------------------------------------------------------- */

.preamble-section {
  background: var(--color-surface-soft);
}

.preamble-quote {
  margin: 0;
  max-width: 40rem;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
}

.preamble-quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}

.preamble-quote p:last-of-type {
  margin-bottom: 0;
}

.preamble-attribution {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Home: member shares (placeholders — never invented copy)                    */
/* -------------------------------------------------------------------------- */

.shares-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48em) {
  .shares-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.share-card {
  margin: 0;
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
}

.share-card p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
}

.share-card footer {
  background: none;
  padding: 0;
  margin-top: var(--space-4);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Home: closing call to action                                                */
/* -------------------------------------------------------------------------- */

.closing-section {
  padding-block: clamp(var(--space-7), 10vh, var(--space-9));
  border-top: 1px solid var(--color-border-soft);
}

.closing-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

/* -------------------------------------------------------------------------- */
/* Minimal motion: one subtle fade-up on scroll                                */
/* -------------------------------------------------------------------------- */

/* Only applied once JS confirms IntersectionObserver support, so content is
   never left invisible when the script does not run. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  will-change: opacity, transform;
}

.js-reveal .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Forms (register / leftover pages)                                           */
/* -------------------------------------------------------------------------- */

.form-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-top: var(--space-5);
}

.form-section-title {
  font-size: 1.05rem;
  color: var(--color-accent-strong);
  margin: var(--space-6) 0 var(--space-4);
}

.form-section-title:first-child {
  margin-top: 0;
}

.form-group {
  margin-bottom: var(--space-4);
  min-width: 0;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 1rem; /* ≥16px — prevents iOS zoom */
  color: var(--color-text);
}

.form-actions {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-actions .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .form-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .form-actions .btn {
    width: auto;
  }
}

.form-success {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-notice-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-notice-text);
}

.form-success.is-visible {
  display: block;
}

.audio-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.audio-card audio {
  width: 100%;
  margin-top: var(--space-3);
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 24rem;
  margin-top: var(--space-6);
}

.pull-quote {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-5);
  color: var(--color-text);
}

/* -------------------------------------------------------------------------- */
/* Responsive enhancements (mobile-first min-width only)                       */
/* -------------------------------------------------------------------------- */

@media (min-width: 40em) {
  .form-card {
    padding: var(--space-6);
  }

  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  :root {
    --container: 72.5rem;
  }
}

/* Landscape phones: keep header compact, avoid tall dead space */
@media (max-height: 30em) and (orientation: landscape) {
  .hero-testimonials-section,
  .action-grid-section,
  .home-intro-section,
  .prog-hero {
    padding-block: var(--space-4);
  }

  .header-container {
    padding-block: 0.35rem;
  }
}


/* Filter + progressive disclosure: author display rules must not beat [hidden]. */
.meeting-card[hidden],
.meeting-day[hidden],
.quiz-yes-total[hidden],
.quiz-safety[hidden],
.quiz-result[hidden],
[hidden] {
  display: none !important;
}

.nav-bar a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 2px;
}

/* Interior pages: content width */
/* .content-section has no inline padding, so 72rem already IS its content box. */
body:not(.home-page) .content-section {
  max-width: 72rem;
}

/* .container does have inline padding and border-box sizing, so it needs the
   gutter added back or interior content lands a gutter inboard of the home
   page. This selector outranks .container, hence repeating the calc here. */
body:not(.home-page) .page-header .container,
body:not(.home-page) main > .container {
  max-width: calc(72rem + 2 * var(--container-pad));
}

.page-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  font-family: var(--font-display);
  color: var(--navy-dark);
}

/* Compact buttons on meeting cards */
.btn-compact {
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.9375rem;
  width: auto;
}

body {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  color: var(--text);
  background: var(--cream);
}

h1, h2, h3, h4, .logotype {
  font-family: var(--font-display);
}

/* ========================================================================== */
/* POLISH LAYER - craft pass over the Option 10 masthead theme.               */
/* Appended last so it wins the cascade without editing the rules above.      */
/* Same palette, same type, same structure: navy / gold / cream, Libre        */
/* Baskerville display, Source Sans 3 text. Nothing here changes the design   */
/* direction, only its execution.                                             */
/* ========================================================================== */

:root {
  /* Softer than the 4px square corner, still serious. */
  --r-sm: 6px;
  --r-md: 10px;
  /* Layered, low-opacity shadows read as depth rather than as a drop shadow. */
  --elev-1: 0 1px 2px rgba(20, 35, 58, 0.05), 0 1px 3px rgba(20, 35, 58, 0.04);
  --elev-2: 0 2px 4px rgba(20, 35, 58, 0.06), 0 6px 16px rgba(20, 35, 58, 0.07);
  --t: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* -- Page shell ------------------------------------------------------------ */
/* The footer used to stop mid-viewport on short pages, leaving a slab of bare
   cream underneath it. Push it to the bottom. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > main,
body > .main {
  flex: 1 0 auto;
}

body > .footer-strip {
  margin-top: auto;
}

::selection {
  background: var(--navy);
  color: #fff;
}

/* -- Typography ------------------------------------------------------------ */
/* Libre Baskerville sets wide by default; at display sizes it needs negative
   tracking and tighter leading or headings look loose and unresolved. */
.logotype,
h1,
h2,
h3,
.card h2,
.page-header h1 {
  letter-spacing: -0.015em;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1,
.page-header h1 {
  line-height: 1.12;
  text-wrap: balance;
}

h2,
h3,
.card h2 {
  line-height: 1.22;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty; /* kills single-word orphans on the last line */
}

.welcome > p,
.prose p,
.content-section p {
  max-width: 68ch;
}

.tagline {
  letter-spacing: 0.01em;
}

/* Times, dates and counts align in columns when they use tabular figures. */
.meeting-meta,
.meeting-meta-row,
.meeting-list strong,
.meeting-day,
.quiz-yes-count,
.meeting-zoom-id {
  font-variant-numeric: tabular-nums;
}

/* -- Masthead + navigation ------------------------------------------------- */
.masthead {
  border-bottom: 1px solid rgba(31, 58, 95, 0.08);
}

.logotype {
  transition: color var(--t);
}

/* Sticky nav keeps primary wayfinding reachable without a JS header. */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--elev-1);
  /* One line at every width - "Readings" used to wrap onto a row of its own. */
  flex-wrap: nowrap;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0.35rem;
  padding-inline: 0.75rem;
}

.nav-bar::-webkit-scrollbar {
  display: none;
}

.nav-bar a {
  position: relative;
  white-space: nowrap;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--t), color var(--t);
}

.nav-bar a:hover {
  background: rgba(255, 255, 255, 0.09);
  text-decoration: none;
}

/* Gold rule marks the current page - the accent doing wayfinding work. */
.nav-bar a[aria-current="page"] {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
}

.nav-bar a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.18rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* Focus rings: navy on light ground, white on the navy bar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 3px;
}

.nav-bar a:focus-visible,
.footer-strip a:focus-visible {
  outline-color: #fff;
}

/* -- Buttons --------------------------------------------------------------- */
.btn {
  padding: 0.8rem 1.4rem;
  border-radius: var(--r-sm);
  letter-spacing: 0.005em;
  transition: background-color var(--t), border-color var(--t), color var(--t),
    box-shadow var(--t), transform var(--t);
}

.btn-primary {
  box-shadow: var(--elev-1);
}

.btn-primary:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}

.btn-secondary:hover {
  border-color: var(--navy-dark);
  box-shadow: var(--elev-1);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--elev-1);
}

.btn-row {
  gap: 0.75rem;
}

/* -- Cards ----------------------------------------------------------------- */
/* The 4px gold slab reads as a banner. A 3px rule spanning the top reads as a
   detail - same accent, more restraint. */
.card {
  position: relative;
  border-top: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.35rem 1.35rem 1.4rem;
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition: box-shadow var(--t);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), #d9a84a);
}

.card:hover {
  box-shadow: var(--elev-2);
}

.card h2 {
  font-size: 1.22rem;
  margin-bottom: 0.9rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), gap var(--t);
}

.card-link:hover {
  border-bottom-color: currentColor;
  gap: 0.55rem;
}

.eyebrow {
  letter-spacing: 0.14em;
  font-size: 0.8125rem;
}

/* -- Interior page header + breadcrumbs ------------------------------------ */
.page-header {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
}

.page-header h1 {
  margin-block: 0.1em 0.15em;
}

.breadcrumbs {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

.breadcrumbs a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* -- Meetings -------------------------------------------------------------- */
.meeting-card {
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t);
}

.meeting-card:hover {
  box-shadow: var(--elev-2);
}

/* Action buttons used to stretch the full column, so a long map label produced
   one very wide, very thin button. Cap the width. */
.meeting-card-actions {
  align-content: start;
  gap: 0.6rem;
}

.meeting-card-actions .btn {
  width: 100%;
  max-width: 22rem;
  text-align: center;
}

.meeting-day {
  letter-spacing: -0.01em;
}

.meeting-today-badge,
.meeting-tag {
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.filter-chip {
  border-radius: 999px;
  transition: background-color var(--t), border-color var(--t), color var(--t),
    box-shadow var(--t);
}

.filter-chip:hover {
  box-shadow: var(--elev-1);
}

/* -- FAQ / readings lists -------------------------------------------------- */
.faq-item h2,
.faq-item h3 {
  letter-spacing: -0.01em;
}

/* -- Footer ---------------------------------------------------------------- */
.footer-strip {
  padding: 1.5rem 1.25rem;
  line-height: 1.7;
  border-top: 3px solid var(--gold);
}

.footer-strip p {
  justify-content: center;
  gap: 0.15rem 0.6rem;
}

.footer-strip a {
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--t);
}

.footer-strip a:hover {
  color: #fff;
}

.footer-strip .sep {
  opacity: 0.45;
}

/* -- Motion opt-out -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .meeting-card,
  .card-link,
  .filter-chip,
  .nav-bar a {
    transition: none;
  }

  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
}

/* Small screens: tighten the nav so all five items fit on one line rather than
   scrolling with a clipped last item, which reads as a layout bug. */
@media (max-width: 30em) {
  .nav-bar {
    gap: 0.1rem;
    padding-inline: 0.35rem;
  }

  .nav-bar a {
    padding: 0.45rem 0.35rem;
    letter-spacing: -0.005em;
  }

  .nav-bar a[aria-current="page"]::after {
    left: 0.35rem;
    right: 0.35rem;
  }
}

/* 320px (SE-class) needs one more notch to clear the last item. */
@media (max-width: 22.5em) {
  .nav-bar a {
    padding: 0.45rem 0.25rem;
    font-size: 0.875rem;
  }

  .nav-bar a[aria-current="page"]::after {
    left: 0.25rem;
    right: 0.25rem;
  }
}

/* Gold as TEXT: #b8862b is 3.03:1 on cream, an AA failure for the eyebrow.
   Same hue (39deg) and saturation, stepped down in value to 4.71:1 on cream
   and 5.04:1 on white. --gold itself is untouched: it stays the decorative
   accent on the card rule, the nav underline and the footer edge, where it is
   a non-text element held to 3:1. */
:root {
  --gold-text: #8f6821;
}

/* .welcome .eyebrow upstream is 0-2-0, so match it rather than lose silently. */
.welcome .eyebrow,
.eyebrow {
  color: var(--gold-text);
}

/* -- Reading measure on text-heavy pages ----------------------------------- */
/* Paragraphs are capped at 68ch for readability, but the FAQ dividers and the
   readings blocks ran the full 72rem, so on a wide screen a short answer sat
   under a rule stretching twice its width. Constrain the column itself and the
   rules land where the text ends. Meetings and the quiz keep the full width -
   their cards and grids are meant to use it. */
.faq-list,
.faq-questions,
.content-section.prose > .entry-block,
.reading-list {
  max-width: 72ch;
}

.faq-item p:last-child,
.entry-block p:last-child {
  margin-bottom: 0;
}

/* -- Meetings toolbar ------------------------------------------------------ */
.meeting-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--space-5);
}

.meeting-toolbar .meeting-filters {
  margin-bottom: 0;
}

.meeting-print-btn {
  margin-left: auto;
}

/* ========================================================================== */
/* Home: below-the-fold sections                                              */
/* The hero alone left most of the page empty once the footer was pinned to   */
/* the bottom. These two bands carry the page down to it.                     */
/* ========================================================================== */

.home-section {
  max-width: 72rem;
  margin: 0 auto;
  padding-top: 2.75rem;
}

.home-section-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.start-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 1.25rem;
  justify-items: center;
}

@media (min-width: 40em) {
  .start-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
  }
}

/* The whole tile is the link. Circle carries the icon; title and copy sit
   underneath — inspired by open fellowship sites, not a rectangular card. */
.start-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 16rem;
  height: 100%;
  padding: 0.35rem 0.5rem 0.25rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  overflow: visible;
  transition: transform var(--t, 180ms ease);
}

.start-card::before {
  content: none;
}

.start-card:hover,
.start-card:focus-visible {
  box-shadow: none;
  transform: none;
  border-color: transparent;
}

.start-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 0.45rem;
}

.start-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 22ch;
}

.start-card-go {
  margin-top: 0.65rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
}

.start-card:hover .start-card-go {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Closing statement - fellowship literature, reproduced as it appears on the
   Who We Are page. */
.purpose-band {
  max-width: 72rem;
  margin: 2.75rem auto 0;
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.purpose-band p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.45;
  color: var(--navy-dark);
  text-wrap: balance;
}

.help-line {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.help-line:last-child {
  margin-bottom: 0;
}

@media print {
  .home-section,
  .purpose-band {
    display: none !important;
  }
}

/* -- The 20 Questions: plain numbered list --------------------------------- */
.questions-list {
  max-width: 62ch;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: q;
}

.questions-list li {
  position: relative;
  counter-increment: q;
  padding: 0.7rem 0 0.7rem 2.6rem;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.questions-list li:last-child {
  border-bottom: 1px solid var(--border);
}

.questions-list li::before {
  content: counter(q) ".";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media print {
  .questions-list li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* -- The 12 Steps ---------------------------------------------------------- */
/* Named .twelve-steps, not .steps-list: that class is already a 3-column
   "how it works" grid elsewhere in this sheet and would column-split these. */
.steps-intro {
  max-width: 62ch;
  margin: 0 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.steps-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  max-width: 62ch;
}

.twelve-steps {
  max-width: 62ch;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.twelve-steps li {
  position: relative;
  counter-increment: step;
  padding: 0.95rem 0 0.95rem 3.1rem;
  line-height: 1.55;
}

.twelve-steps li + li {
  border-top: 1px solid var(--border);
}

.twelve-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 2.1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--gold-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.steps-attribution {
  max-width: 62ch;
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--text-muted);
}

@media print {
  .twelve-steps li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* -- Print actions (screen) ------------------------------------------------ */
.print-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.print-actions-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

/* The print-only sheets duplicate the meetings; never shown on screen. */
.print-sheets {
  display: none;
}

@media (max-width: 30em) {
  .print-actions {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* -- Crisis strip ---------------------------------------------------------- */
/* Sits directly under the nav on every page. Deliberately quiet: a calm band,
   not an alert. Someone in crisis should not have to scroll to the footer. */
.crisis-strip {
  background: #f3ece0;
  border-bottom: 1px solid var(--border);
}

.crisis-strip p {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.55rem var(--container-pad);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
  color: var(--text);
}

.crisis-strip a {
  font-weight: 700;
  color: var(--navy-dark);
  text-underline-offset: 0.18em;
}

/* -- Hero lede + trust bar ------------------------------------------------- */
.welcome-lede {
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 1rem;
  max-width: 34ch;
}

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  margin: 1.4rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.trust-bar li {
  position: relative;
  padding-left: 1.15rem;
  font-weight: 600;
}

/* Check mark drawn in CSS so it stays decorative and out of the a11y tree. */
.trust-bar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.42rem;
  height: 0.72rem;
  border: solid var(--gold-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* -- Preamble -------------------------------------------------------------- */
.preamble-block {
  max-width: 72rem;
  margin: 2.75rem auto 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.preamble-text {
  margin: 0;
  max-width: 56ch;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--navy-dark);
  text-wrap: balance;
}

.preamble-note {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  max-width: 56ch;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

@media print {
  .crisis-strip,
  .preamble-block,
  .trust-bar {
    display: none !important;
  }
}

/* -- Masthead scale -------------------------------------------------------- */
/* The wordmark was carrying too little weight against the navy nav and the
   page below it. Larger, with more air above and below, so the top of the
   page reads as a masthead rather than a caption. */
.masthead {
  padding: 2rem 1.25rem 1.5rem;
}

.tagline {
  margin-top: 0.5rem;
  font-size: 1rem;
}

@media (min-width: 800px) {
  .masthead {
    padding: 3rem 4rem 2.25rem;
  }

  .tagline {
    margin-top: 0.7rem;
    font-size: 1.15rem;
  }
}

/* -- Hero after the copy trim ---------------------------------------------- */
/* With the lede and the button row gone the heading carries the section on its
   own, so it gets more room and the trust line sits closer to it. */
.welcome h1 {
  margin-bottom: 1.25rem;
}

.trust-bar {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Three start tiles — keep three columns from the mid breakpoint up. */
@media (min-width: 64em) {
  .start-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.25rem;
  }
}

/* No heading above the cards any more, so the section supplies the space. */
.home-section {
  padding-top: 2.25rem;
}

/* -- Wordmark lockup ------------------------------------------------------- */
/*
  Two words, one link, set in a single weight-contrasted line: BETTORS heavy
  against ANONYMOUS light, then a short gold rule, then the tagline in an
  italic serif. Authored in normal case and uppercased in CSS so assistive tech
  reads the words rather than spelling them out.
*/
.logotype {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  /* Fluid, not stepped: the lockup must hold one line at every width, and its
     width scales with the type, so tie the type to the viewport and cap it. */
  font-size: clamp(1.15rem, 6.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.logotype-strong {
  font-weight: 900;
}

.logotype-light {
  font-weight: 300;
  letter-spacing: 0.055em;
}

/* The rule is ours, not the reference's - it ties the mark to the gold the
   rest of the site already uses, and keeps the lockup from reading as a
   copy of any other fellowship's. */
.masthead .tagline {
  position: relative;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.92rem, 2.5vw, 1.4rem);
  letter-spacing: 0.012em;
  color: var(--navy-dark);
  opacity: 1;
}

.masthead .tagline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 2px;
  background: var(--gold);
}

@media (min-width: 800px) {
  .masthead .tagline {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
  }

  .masthead .tagline::before {
    width: 4rem;
  }
}

@media (max-width: 22.5em) {
  .logotype {
    gap: 0.22em;
  }
}

/* -- Site header: one row, mark left, nav right ---------------------------- */
/* Replaces the stacked centred masthead + full-width navy nav band. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.9rem var(--container-pad);
}

/* The masthead is now a block inside the row, not a full-width band. */
.site-header .masthead {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  text-align: left;
  flex: 0 1 auto;
  min-width: 0;
}

.site-header .logotype {
  font-size: clamp(1.15rem, 3.6vw, 1.85rem);
}

/* Left-aligned under the mark, no centred rule in this layout. */
.site-header .tagline {
  margin-top: 0.3rem;
  padding-top: 0;
  font-size: clamp(0.72rem, 1.5vw, 0.9rem);
  text-align: left;
  color: var(--text-muted);
}

.site-header .tagline::before {
  display: none;
}

/* Nav sits on the light ground now, so it takes ink colour, not white. */
.site-header .nav-bar {
  position: static;
  background: none;
  box-shadow: none;
  border: 0;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 0;
  overflow: visible;
}

.site-header .nav-bar a {
  color: var(--navy-dark);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
}

.site-header .nav-bar a:hover {
  background: #f1ece2;
  color: var(--navy-dark);
}

.site-header .nav-bar a[aria-current="page"] {
  background: none;
  color: var(--navy-dark);
  font-weight: 700;
}

.site-header .nav-bar a[aria-current="page"]::after {
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.12rem;
  height: 2px;
  background: var(--gold);
}

.site-header .nav-bar a:focus-visible {
  outline-color: var(--navy);
}

/* Phone: mark on its own line, nav beneath it, both still single-line. */
@media (max-width: 47.99em) {
  /* Block flow, not a column flex container: as a flex column the nav's
     max-content width inflated the container's content box and the masthead
     stretched to match it, pushing the whole header 20px past the viewport. */
  .site-header-inner {
    display: block;
    padding: 0.75rem var(--container-pad) 0.5rem;
  }

  .site-header .masthead {
    max-width: 100%;
  }

  .site-header .nav-bar {
    margin-top: 0.6rem;
    width: 100%;
    min-width: 0;
  }

  .site-header .nav-bar a {
    padding: 0.45rem 0.35rem;
    font-size: 0.875rem;
  }

  .site-header .nav-bar a[aria-current="page"]::after {
    left: 0.35rem;
    right: 0.35rem;
  }

  .site-header .masthead {
    text-align: center;
  }

  .site-header .tagline {
    text-align: center;
  }

  .site-header .nav-bar {
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-header .nav-bar::-webkit-scrollbar {
    display: none;
  }
}

@media print {
  .site-header {
    position: static;
    border-bottom: 0;
  }

  .site-header-inner {
    display: block;
    padding: 0;
  }
}

/* -- Start tiles: large circle disk, label and copy below ------------------ */
.start-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(6.5rem, 18vw, 8.25rem);
  height: clamp(6.5rem, 18vw, 8.25rem);
  margin-bottom: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--navy));
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--navy-dark) 6%, transparent);
  transition:
    border-color var(--t, 180ms ease),
    color var(--t, 180ms ease),
    background-color var(--t, 180ms ease),
    box-shadow var(--t, 180ms ease),
    transform var(--t, 180ms ease);
}

.start-card-icon svg {
  width: 2.35rem;
  height: 2.35rem;
}

.start-card:hover .start-card-icon,
.start-card:focus-visible .start-card-icon {
  border-color: var(--navy);
  background: #f4f1ea;
  color: var(--navy-dark);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--navy-dark) 12%, transparent);
  transform: translateY(-3px);
}

.start-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}

.start-card p {
  margin: 0;
  max-width: 24ch;
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .start-card,
  .start-card-icon {
    transition: none;
  }

  .start-card:hover .start-card-icon,
  .start-card:focus-visible .start-card-icon {
    transform: none;
  }
}

/* ========================================================================== */
/* PRINT — the meeting list as a hand-out / noticeboard flyer.                */
/*                                                                            */
/* Restrained, not loud: one navy accent on the wordmark and the rules, the   */
/* rest black on white so it photocopies cleanly and costs nothing to run     */
/* off. Hierarchy comes from size, weight and space rather than colour.       */
/* Whatever the format filter is showing is what prints.                      */
/* ========================================================================== */
@media print {
  @page {
    size: portrait;
    margin: 13mm 14mm 12mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-family: var(--font-sans);
    font-size: 10.5pt;
    line-height: 1.4;
  }

  /* Brand colours cost toner and reduce legibility on paper. One blanket rule
     beats chasing every token that still resolves to teal or navy; the
     wordmark and rules opt back in below. */
  main *,
  .masthead * {
    color: #000 !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Chrome that means nothing on paper. */
  .nav-bar,
  .breadcrumbs,
  .skip-link,
  .meeting-toolbar,
  .meeting-filters,
  .print-actions,
  .meeting-print-btn,
  .footer-strip,
  .scroll-to-top,
  .meeting-card-actions .btn,
  .meeting-today-badge,
  .home-section,
  .purpose-band,
  .empty-state[hidden],
  #zoom {
    display: none !important;
  }

  /* ---- Letterhead ---- */
  .masthead {
    padding: 0 0 7pt;
    border: 0;
    border-bottom: 2.5pt solid #1f3a5f;
    text-align: center;
    background: none !important;
  }

  .logotype {
    font-family: var(--font-display);
    font-size: 24pt;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #1f3a5f !important;
  }

  .tagline {
    font-size: 10pt;
    font-style: italic;
    color: #000 !important;
    margin: 3pt 0 0;
  }

  /* ---- Title block ---- */
  .page-header {
    background: none !important;
    border: 0;
    padding: 10pt 0 0;
    text-align: center;
  }

  .page-header-container {
    display: block !important;
    text-align: center;
  }

  .page-header h1 {
    font-family: var(--font-display);
    font-size: 19pt;
    line-height: 1.1;
    color: #000 !important;
    margin: 0;
  }

  /* Strapline lifted from the site footer, not invented for the flyer. */
  .page-header h1::after {
    content: "Free. Anonymous. No sign-ups. The only requirement is a desire to stop gambling.";
    display: block;
    margin-top: 5pt;
    font-family: var(--font-sans);
    font-size: 10pt;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
  }

  .container,
  .content-section,
  .main {
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .meetings-list {
    margin-top: 4pt;
  }

  /* ---- Day heading ----
     .meeting-day is the SECTION wrapping the heading AND its cards, so any
     type styling put on it inherits down onto every address. Style the h3. */
  .meeting-day {
    display: block;
    margin: 12pt 0 0;
  }

  .meeting-day > h3 {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    font-family: var(--font-sans);
    font-size: 9.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0;
    padding-bottom: 2.5pt;
    border-bottom: 1pt solid #1f3a5f;
  }

  .meeting-day-name {
    color: #000 !important;
  }

  /* ---- One meeting ---- */
  .meeting-card {
    display: block !important;
    break-inside: avoid;
    page-break-inside: avoid;
    width: auto !important;
    background: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    padding: 6pt 0 0;
    margin: 0;
  }

  .meeting-card + .meeting-card {
    margin-top: 1pt;
    padding-top: 6pt;
    border-top: 0.4pt solid #bbb;
  }

  .meeting-card-info {
    width: auto !important;
  }

  .meeting-card-info h4 {
    font-family: var(--font-display);
    font-size: 12pt;
    line-height: 1.2;
    margin: 0 0 2pt;
  }

  .meeting-meta {
    font-size: 11pt;
    font-weight: 700;
    margin: 0 0 3pt;
  }

  .meeting-address {
    font-size: 10pt;
    line-height: 1.35;
    margin: 0 0 3pt;
    color: #000 !important;
  }

  /* The action buttons are dropped, but the Zoom credentials inside that
     column are the whole point of a printed list, so keep that line. */
  .meeting-card-actions {
    display: block !important;
    width: auto !important;
    flex: none !important;
    margin: 3pt 0 0;
  }

  .meeting-zoom-id {
    font-size: 10pt;
    margin: 0;
    color: #000 !important;
  }

  .meeting-zoom-id code,
  code {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-weight: 700;
  }

  /* Tags become quiet uppercase text rather than pills — pills waste toner and
     read as interface, not information. */
  .meeting-meta-row {
    margin: 3pt 0 0;
    font-size: 8.5pt;
  }

  .meeting-tag,
  .meeting-tag-format {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-right: 7pt;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #333 !important;
    text-decoration: none !important;
  }

  .meeting-notes {
    font-size: 9pt;
    font-style: italic;
    color: #333 !important;
  }

  /* Raw URLs after every link would swamp the sheet; the address and the Zoom
     ID are already printed. */
  a,
  a:link,
  a:visited {
    color: #000 !important;
    text-decoration: none !important;
  }

  a[href]::after {
    content: "" !important;
  }

  /* ---- In-person and Zoom as separate sheets ----
     The live list is grouped by day with both formats interleaved. For print
     we render the pre-built sheets instead, and the button that started the
     job picks which. Default (printing straight from the browser menu) gives
     both sheets. */
  #meetings-list,
  #meetings-empty {
    display: none !important;
  }

  .print-sheets {
    display: block !important;
  }

  .print-sheet {
    display: block;
  }

  /* Each sheet starts its own page, so the two never share paper. */
  .print-sheet + .print-sheet {
    break-before: page;
    page-break-before: always;
  }

  .print-sheet-title {
    font-family: var(--font-sans);
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: center;
    margin: 10pt 0 0;
    padding-bottom: 4pt;
    border-bottom: 0.75pt solid #000;
  }

  /* A single-format job prints only that sheet, and with one sheet on the page
     the format title is redundant with the page heading. */
  body[data-print-sheet="in-person"] .print-sheet:not([data-sheet="in-person"]),
  body[data-print-sheet="zoom"] .print-sheet:not([data-sheet="zoom"]) {
    display: none !important;
  }

  body[data-print-sheet="in-person"] .print-sheet[data-sheet="in-person"],
  body[data-print-sheet="zoom"] .print-sheet[data-sheet="zoom"] {
    break-before: auto;
    page-break-before: auto;
  }

  /* The tear-off footer hangs off .meetings-list, which each sheet has, so it
     prints once per sheet - which is what a hand-out wants. */

  /* ---- Tear-off footer ---- */
  .meetings-list::after {
    content: "bettors-anonymous.org";
    display: block;
    break-inside: avoid;
    margin-top: 12pt;
    padding-top: 6pt;
    border-top: 2.5pt solid #1f3a5f;
    font-family: var(--font-display);
    font-size: 12pt;
    text-align: center;
    color: #1f3a5f;
  }

  .meetings-list::before {
    content: "";
  }

  #meetings-empty:not([hidden]) {
    font-size: 10pt;
  }

  /* Helpline block sits after the list, centred under the rule. */
  .content-section::after,
  .container.content-section::after {
    content: "Massachusetts Problem Gambling Helpline  1-800-327-5050  (call or text), 24/7          988 Suicide & Crisis Lifeline";
    display: block;
    break-inside: avoid;
    margin-top: 4pt;
    font-size: 9.5pt;
    text-align: center;
    color: #000;
  }

  /* Anything that animates in is already visible on paper. */
  [class*="reveal"],
  .is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================== */
/* Homepage 2026-09-29 — promoted from demo-home (AAA-style mark + calm home) */
/* ========================================================================== */

:root {
  --font-mark: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --home-container: 68rem;
  --home-radius: 10px;
  --home-elev: 0 1px 2px rgba(20, 35, 58, 0.04);
  --home-accent-edge: color-mix(in srgb, var(--gold) 70%, var(--border));
}

/* Wordmark: BETTORS bold / ANONYMOUS light (All Addicts–style lockup) */
.site-header .logotype,
.logotype {
  display: inline-block;
  font-family: var(--font-mark);
  font-size: clamp(1.0rem, 2.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

.site-header .logotype-strong,
.logotype-strong {
  font-weight: 800;
  color: #1a1a1a;
}

.site-header .logotype-light,
.logotype-light {
  font-weight: 300;
  color: #9a9a9a;
  margin-left: 0.08em;
  opacity: 1;
}

.site-header .tagline,
.tagline {
  margin: 0.35rem 0 0;
  padding-top: 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.75rem, 1.35vw, 0.9rem);
  line-height: 1.4;
  color: #6a8582;
  letter-spacing: 0.01em;
  text-align: inherit;
}

.site-header .tagline::before {
  display: none;
}

/* Home page composition */
.home-page .main {
  max-width: var(--home-container);
  margin: 0 auto;
  padding: 2.5rem var(--container-pad) 3.5rem;
}

.home-page .hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  margin: 0 0 2.5rem;
  width: 100%;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--border);
}

.home-page .welcome {
  max-width: 34rem;
}

.home-page .welcome h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--navy-dark);
  text-wrap: balance;
  max-width: 15ch;
}

.home-page .welcome-lede {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 28ch;
  text-wrap: pretty;
}

.home-page .sidebar {
  width: 100%;
}

.home-page .surface-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--home-accent-edge);
  border-top: 1px solid var(--border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-elev);
  padding: 1.35rem 1.3rem 1.4rem;
}

.home-page .surface-card h2 {
  margin: 0 0 0.95rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--navy-dark);
}

.home-page .meeting-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.home-page .meeting-list li {
  margin: 0 0 0.85rem;
}

.home-page .meeting-list li:last-child {
  margin-bottom: 0.95rem;
}

.home-page .meeting-list strong {
  display: block;
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.35;
}

.home-page .meeting-list span {
  display: block;
  margin-top: 0.12rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.home-page .card-link {
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--navy);
}

.home-page .card-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.home-page .path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
}

.home-page .path-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  padding: 1.25rem 1.2rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--home-accent-edge);
  border-radius: var(--home-radius);
  box-shadow: var(--home-elev);
  text-decoration: none;
  color: inherit;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.home-page .path-card:hover,
.home-page .path-card:focus-visible {
  background: #fffcf7;
  border-color: color-mix(in srgb, var(--border) 70%, var(--navy));
}

.home-page .path-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 70%, #ebe4d6);
  color: var(--navy);
}

.home-page .path-card-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.home-page .path-card h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--navy-dark);
  font-weight: 700;
}

.home-page .path-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.home-page .crisis-strip {
  background: #f1ebe1;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.home-page .crisis-strip p {
  max-width: var(--home-container);
  margin: 0 auto;
  padding: 0.85rem var(--container-pad);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  color: var(--text);
}

@media (min-width: 40em) {
  .home-page .path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

@media (min-width: 64em) {
  .home-page .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

/* Mobile feng shui — phone-first balance */
@media (max-width: 47.99em) {
  .site-header .logotype,
  .logotype {
    font-size: clamp(0.95rem, 4.2vw, 1.2rem);
    letter-spacing: 0.03em;
  }

  .site-header .tagline,
  .tagline {
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.78rem;
  }

  .home-page .main {
    padding: 1.5rem 1.15rem 2.25rem;
  }

  .home-page .hero {
    gap: 1.35rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    align-items: stretch;
  }

  .home-page .welcome {
    text-align: left;
  }

  .home-page .welcome h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
    max-width: 14ch;
  }

  .home-page .welcome-lede {
    max-width: 32ch;
    font-size: 1.05rem;
  }

  .home-page .surface-card {
    padding: 1.2rem 1.15rem 1.25rem;
  }

  .home-page .path-grid {
    gap: 0.85rem;
  }

  .home-page .path-card {
    padding: 1.1rem 1.05rem 1.15rem;
  }

  .home-page .crisis-strip p {
    padding: 0.8rem 1.15rem;
    font-size: 0.875rem;
    text-align: left;
  }
}

@media (max-width: 22.5em) {
  .site-header .logotype,
  .logotype {
    white-space: normal;
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .path-card {
    transition: none;
  }
}

/* ========================================================================== */
/* Program page — match homepage light spine / calm cards (2026-09-29)         */
/* ========================================================================== */

.program-page {
  background: var(--cream, #f7f4ee);
}

.program-page .prog-main {
  max-width: var(--home-container, 68rem);
  margin: 0 auto;
  padding: 0 var(--container-pad) 0;
}

.program-page .prog-hero {
  background: transparent;
  color: inherit;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--border);
}

.program-page .prog-hero-inner {
  max-width: 40rem;
}

.program-page .prog-kicker {
  display: none;
}

.program-page .prog-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.65rem);
  line-height: 1.15;
  color: var(--navy-dark);
}

.program-page .prog-lede {
  margin: 0 0 1.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 38ch;
}

.program-page .prog-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding-top: 0;
  border-top: 0;
}

.program-page .prog-toc a {
  color: var(--navy-dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--home-elev, 0 1px 2px rgba(20, 35, 58, 0.04));
}

.program-page .prog-toc a:hover,
.program-page .prog-toc a:focus-visible {
  background: #fffcf7;
  border-color: color-mix(in srgb, var(--border) 65%, var(--navy));
  color: var(--navy-dark);
}

.program-page .prog-section {
  padding: 2.5rem 0;
  background: transparent;
}

.program-page .prog-history,
.program-page .prog-fellowship,
.program-page .prog-illness {
  background: transparent;
}

.program-page .prog-history {
  border-bottom: 1px solid var(--border);
}

.program-page .prog-fellowship {
  border-bottom: 1px solid var(--border);
}

.program-page .prog-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.program-page .prog-date-lockup {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--home-accent-edge, color-mix(in srgb, var(--gold) 70%, var(--border)));
  border-radius: var(--home-radius, 10px);
  box-shadow: var(--home-elev, 0 1px 2px rgba(20, 35, 58, 0.04));
  padding: 1.15rem 1.2rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.65rem;
}

.program-page .prog-date-day {
  display: block;
  flex-basis: 100%;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 0.35rem;
}

.program-page .prog-date-num,
.program-page .prog-date-year {
  display: inline;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--navy-dark);
  letter-spacing: -0.02em;
}

.program-page .prog-date-year {
  color: var(--navy);
}

.program-page .prog-date-place {
  display: block;
  flex-basis: 100%;
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: none;
}

.program-page .prog-prose h2,
.program-page .prog-narrow > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  color: var(--navy-dark);
  margin: 0 0 1.15rem;
}

.program-page .prog-prose p {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 42rem;
  margin: 0 0 1.05rem;
}

.program-page .prog-prose p:last-child {
  margin-bottom: 0;
}

.program-page .prog-narrow {
  max-width: 42rem;
  margin: 0;
}

.program-page .prog-pull {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--home-accent-edge, color-mix(in srgb, var(--gold) 70%, var(--border)));
  border-radius: var(--home-radius, 10px);
  box-shadow: var(--home-elev, 0 1px 2px rgba(20, 35, 58, 0.04));
}

.program-page .prog-pull p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.45;
  color: var(--navy-dark);
  margin: 0;
}

.program-page .prog-purpose {
  margin-top: 0.5rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 1.1rem !important;
}

.program-page .prog-drop::first-letter {
  color: var(--navy);
  font-family: var(--font-display);
}

.program-page .crisis-strip {
  background: #f1ebe1;
  border-top: 1px solid var(--border);
}

.program-page .crisis-strip p {
  max-width: var(--home-container, 68rem);
  margin: 0 auto;
  padding: 0.85rem var(--container-pad);
  text-align: left;
  font-size: 0.9375rem;
}

@media (min-width: 64em) {
  .program-page .prog-hero {
    padding: 3rem 0 2.5rem;
  }

  .program-page .prog-section {
    padding: 3rem 0;
  }

  .program-page .prog-split {
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    gap: 2.75rem;
  }

  .program-page .prog-date-lockup {
    position: sticky;
    top: 5.5rem;
    display: block;
    padding: 1.35rem 1.3rem 1.4rem;
  }

  .program-page .prog-date-num,
  .program-page .prog-date-year {
    display: block;
    font-size: clamp(1.85rem, 1.4rem + 1.2vw, 2.4rem);
    line-height: 1.05;
  }

  .program-page .prog-date-year {
    margin-bottom: 0.65rem;
  }
}

@media (max-width: 47.99em) {
  .program-page .prog-main {
    padding-inline: 1.15rem;
  }

  .program-page .prog-hero {
    padding: 1.5rem 0 1.35rem;
  }

  .program-page .prog-section {
    padding: 1.75rem 0;
  }

  .program-page .prog-toc {
    gap: 0.45rem;
  }

  .program-page .prog-toc a {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
  }

  .program-page .prog-prose p {
    font-size: 1.02rem;
    line-height: 1.65;
  }

  .program-page .crisis-strip p {
    padding: 0.8rem 1.15rem;
    font-size: 0.875rem;
  }
}

/* ========================================================================== */
/* FAQ + 12 Steps — interior feng shui (match home/program, 2026-09-29)        */
/* ========================================================================== */

.faq-view,
.steps-view {
  background: var(--cream, #f7f4ee);
}

.faq-view .interior-main,
.steps-view .interior-main {
  max-width: var(--home-container, 68rem);
  margin: 0 auto;
  padding: 0 var(--container-pad) 2.5rem;
}

.faq-view .interior-hero,
.steps-view .interior-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.faq-view .interior-hero-inner,
.steps-view .interior-hero-inner {
  max-width: 40rem;
}

.faq-view .interior-hero h1,
.steps-view .interior-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.65rem);
  line-height: 1.15;
  color: var(--navy-dark);
}

.faq-view .interior-lede,
.steps-view .interior-lede {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40ch;
}

.faq-view .interior-body,
.steps-view .interior-body {
  max-width: 44rem;
}

.faq-view .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.75rem;
}

.faq-view .faq-item {
  margin: 0;
  padding: 1.2rem 1.25rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--home-accent-edge, color-mix(in srgb, var(--gold) 70%, var(--border)));
  border-radius: var(--home-radius, 10px);
  box-shadow: var(--home-elev, 0 1px 2px rgba(20, 35, 58, 0.04));
  border-bottom: 1px solid var(--border);
}

.faq-view .faq-item:first-child {
  padding-top: 1.2rem;
}

.faq-view .faq-item h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--navy-dark);
}

.faq-view .faq-item p {
  margin: 0 0 0.7rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.faq-view .faq-item p:last-child {
  margin-bottom: 0;
}

.faq-view .faq-cta-card,
.faq-view .faq-help-card {
  margin: 0 0 1.15rem;
  padding: 1.35rem 1.35rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--home-accent-edge, color-mix(in srgb, var(--gold) 70%, var(--border)));
  border-radius: var(--home-radius, 10px);
  box-shadow: var(--home-elev, 0 1px 2px rgba(20, 35, 58, 0.04));
}

.faq-view .faq-cta-card h2,
.faq-view .faq-help-card h2 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--navy-dark);
}

.faq-view .faq-cta-card p,
.faq-view .faq-help-card p {
  margin: 0 0 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.faq-view .faq-cta-card p:last-child,
.faq-view .faq-help-card p:last-child,
.faq-view .faq-help-card .mb-0 {
  margin-bottom: 0;
}

.faq-view .faq-cta-card .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.15rem;
  border-radius: var(--home-radius, 10px);
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border: 0;
}

.faq-view .faq-cta-card .btn-primary:hover {
  background: var(--navy-dark);
  color: var(--white);
}

.faq-view .crisis-strip,
.steps-view .crisis-strip {
  background: #f1ebe1;
  border-top: 1px solid var(--border);
}

.faq-view .crisis-strip p,
.steps-view .crisis-strip p {
  max-width: var(--home-container, 68rem);
  margin: 0 auto;
  padding: 0.85rem var(--container-pad);
  text-align: left;
  font-size: 0.9375rem;
}

/* 12 Steps */
.steps-view .steps-intro {
  max-width: none;
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.steps-view .steps-heading {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  max-width: none;
}

.steps-view .twelve-steps {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.steps-view .twelve-steps li {
  position: relative;
  counter-increment: step;
  margin: 0;
  padding: 1.05rem 1.15rem 1.1rem 3.4rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--home-accent-edge, color-mix(in srgb, var(--gold) 70%, var(--border)));
  border-radius: var(--home-radius, 10px);
  box-shadow: var(--home-elev, 0 1px 2px rgba(20, 35, 58, 0.04));
  line-height: 1.55;
  color: var(--text);
  border-top: 1px solid var(--border);
}

.steps-view .twelve-steps li + li {
  border-top: 1px solid var(--border);
}

.steps-view .twelve-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0.95rem;
  top: 1.05rem;
  width: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--navy);
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.steps-view .steps-attribution {
  max-width: none;
  margin: 1.75rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (min-width: 64em) {
  .faq-view .interior-hero,
  .steps-view .interior-hero {
    padding: 3rem 0 2.5rem;
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 47.99em) {
  .faq-view .interior-main,
  .steps-view .interior-main {
    padding: 0 1.15rem 2rem;
  }

  .faq-view .interior-hero,
  .steps-view .interior-hero {
    padding: 1.5rem 0 1.35rem;
    margin-bottom: 1.35rem;
  }

  .faq-view .faq-item,
  .faq-view .faq-cta-card,
  .faq-view .faq-help-card,
  .steps-view .twelve-steps li {
    padding-left: 1.1rem;
    padding-right: 1.05rem;
  }

  .steps-view .twelve-steps li {
    padding-left: 3.15rem;
  }

  .faq-view .crisis-strip p,
  .steps-view .crisis-strip p {
    padding: 0.8rem 1.15rem;
    font-size: 0.875rem;
  }
}