/* ===== Design tokens — shared across the .guide network ===== */

:root, [data-theme="light"] {
  /* Type scale — bumped for clarity. Body floor 17px, scales to ~19px on wide screens. */
  --text-xs: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
  --text-sm: clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
  --text-base: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces — paper warm. surface-2 deepened so alternation actually reads. */
  --color-bg: #f6f3ec;
  --color-surface: #fbf8f1;
  --color-surface-2: #e6dec9;
  --color-divider: #cfc6b1;
  --color-border: #c8c1b0;

  /* Text — deep ink. Muted darkened from #6b665b to #4a463c for AA contrast on warm bg. */
  --color-text: #14130f;
  --color-text-muted: #4a463c;
  --color-text-faint: #7a7466;

  /* Defaults — overridden per site */
  --color-primary: #1f5e57;
  --color-primary-hover: #163f3a;
  --color-primary-soft: #e2ebe6;

  /* Functional */
  --color-warning: #964219;
  --color-error: #8a2547;
  --color-success: #2e6021;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(29, 28, 24, 0.06);
  --shadow-md: 0 6px 18px rgba(29, 28, 24, 0.08);

  /* Content widths — editorial */
  --content-narrow: 640px;
  --content-default: 880px;
  --content-wide: 1100px;

  /* Fonts — humanist sans (Source Sans 3, BA's nearest free relative) for body, matched serif for display. */
  --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Source Serif 4', Georgia, serif;
}

[data-theme="dark"] {
  --color-bg: #15140f;
  --color-surface: #1c1b16;
  --color-surface-2: #2a2820;
  --color-divider: #34322a;
  --color-border: #3b3830;
  --color-text: #e8e3d4;
  --color-text-muted: #8c8678;
  --color-text-faint: #5d5849;
  --color-primary-soft: #1b2925;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #15140f;
    --color-surface: #1c1b16;
    --color-surface-2: #2a2820;
    --color-divider: #34322a;
    --color-border: #3b3830;
    --color-text: #e8e3d4;
    --color-text-muted: #8c8678;
    --color-text-faint: #5d5849;
    --color-primary-soft: #1b2925;
  }
}

/* ===== Reset ===== */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
}

body {
  min-height: 100dvh;
  line-height: 1.55;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

h1, h2, h3, h4 {
  text-wrap: balance;
  line-height: 1.15;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

p, li {
  text-wrap: pretty;
  max-width: 64ch;
}

button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }

::selection {
  background: var(--color-primary);
  color: var(--color-bg);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

a, button {
  transition: color var(--transition-interactive),
              background var(--transition-interactive),
              border-color var(--transition-interactive),
              opacity var(--transition-interactive);
}

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

/* ===== Layout primitives ===== */

.wrap {
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
}

.wrap-narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
}

section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  position: relative;
}

/* Alternating tone: every other section gets the warmer kraft surface.
   The page now reads as panels, not one wall of cream. */
section:nth-of-type(even) {
  background: var(--color-surface-2);
}

/* Soft hairline at the seam between every section, so even same-tone neighbours have a structural line */
section + section {
  border-top: 1px solid var(--color-divider);
}
section + section.band-dark,
section.band-dark + section { border-top: none; }

/* The dark band: a single inverted section, for the pull quote. Drops the eye into a different room. */
section.band-dark {
  background: var(--color-text);
  color: var(--color-bg);
}
section.band-dark .section-eyebrow,
section.band-dark h2,
section.band-dark p { color: inherit; }
section.band-dark .section-eyebrow { opacity: 0.6; }
section.band-dark blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.25;
  font-weight: 500;
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
  letter-spacing: -0.01em;
}
section.band-dark cite {
  display: block;
  margin-top: var(--space-6);
  text-align: center;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Chapter index — small numeral inside the eyebrow.
   Built with CSS counter so we don't have to renumber by hand. */
main { counter-reset: chapter; }
section[data-chapter] { counter-increment: chapter; }
section[data-chapter] .section-eyebrow::before {
  content: counter(chapter, decimal-leading-zero);
  display: inline-block;
  margin-right: 0.9em;
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Tiny teal ledge centred at the top of each chapter — a structural tick, not decoration */
section[data-chapter]:not(.band-dark)::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.55;
}

/* ===== Header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 243, 236, 0.96);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--color-divider);
}

/* Dark-mode header — fixed. The previous selector grouped a comma with a
   media query, which is invalid CSS and left the header showing the cream
   light-mode background even in dark mode. Both rules now stand alone. */
[data-theme="dark"] .site-header {
  background: rgba(21, 20, 15, 0.97);
  border-bottom-color: rgba(232, 227, 212, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    background: rgba(21, 20, 15, 0.97);
    border-bottom-color: rgba(232, 227, 212, 0.10);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.nav-links a:hover { color: var(--color-text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .nav-links { display: none; }
}

/* ===== Hero ===== */

.hero {
  padding-block: clamp(var(--space-16), 12vw, var(--space-32));
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.hero h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
  max-width: 22ch;
  font-weight: 600;
}

.hero-lede {
  font-size: var(--text-lg);
  color: var(--color-text);
  max-width: 56ch;
  margin-bottom: var(--space-8);
  line-height: 1.5;
}

.hero-meta {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  max-width: 60ch;
}

/* ===== Sections ===== */

.section-eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
  max-width: 26ch;
  font-weight: 600;
}

h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  margin-top: var(--space-8);
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
}

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

/* Pull line — short emphatic */
.pull {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--color-text);
  max-width: 24ch;
  margin-block: var(--space-10);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-primary);
}

/* Body emphasis sentence */
.lede {
  font-size: var(--text-lg);
  line-height: 1.45;
  margin-bottom: var(--space-6);
  max-width: 60ch;
  color: var(--color-text);
  font-weight: 400;
}

.lede strong, p strong, li strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Two-column on wider screens */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

/* List — checkpoint style */
.checklist {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.checklist li {
  padding-left: var(--space-6);
  position: relative;
  max-width: 64ch;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 1px;
  background: var(--color-primary);
}

/* CTA links — quiet, editorial */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 500;
  background: var(--color-surface);
}

.cta:hover {
  border-color: var(--color-text);
  background: var(--color-surface-2);
}

.cta-primary {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.cta-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

.cta-link {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-text-faint);
  text-underline-offset: 4px;
}

.cta-link:hover { color: var(--color-text); text-decoration-color: var(--color-text); }

/* ===== Start-here list ===== */

.start-here {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin-top: var(--space-8);
}

.start-here li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-divider);
  max-width: none;
}

.start-here li:first-child {
  border-top: 1px solid var(--color-divider);
}

.start-here .if {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.start-here .then {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.start-here a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}
@media (min-width: 720px) {
  .start-here a {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }
}

.start-here a:hover .then {
  color: var(--color-primary);
}

@media (min-width: 720px) {
  .start-here li {
    grid-template-columns: 1fr auto;
    align-items: baseline;
  }
}

/* ===== Footer ===== */

.site-footer {
  padding-block: var(--space-16) var(--space-12);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
}

@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer-grid h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.footer-grid ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

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

.footer-fine {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ===== Sister-site banner — subtle, not loud ===== */

.sister {
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
  text-align: center;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
}

.sister a { color: var(--color-text); border-bottom: 1px solid var(--color-text-faint); }

/* ===== Crisis bar — sober.guide only ===== */

.crisis-strip {
  background: var(--color-surface-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
}

.crisis-strip a {
  color: var(--color-text);
  font-weight: 600;
  border-bottom: 1px solid var(--color-text-faint);
}

/* ===== Quote block — closing ===== */

.closing-quote {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  text-align: center;
  background: var(--color-surface);
}

.closing-quote blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.45;
  max-width: 32ch;
  margin-inline: auto;
  color: var(--color-text);
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
}

.closing-quote cite {
  display: block;
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  letter-spacing: 0.05em;
}

/* ===== Music player ===== */
/* A single small button. Off by default. Plays an instrumental loop when on.
   No autoplay, no surprise. Persists per browser. */
.music-toggle {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 160ms ease;
}
.music-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.music-toggle[data-playing="true"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.music-toggle .music-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-text-faint);
}
.music-toggle[data-playing="true"] .music-dot {
  background: var(--color-primary);
  animation: musicPulse 2.4s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle[data-playing="true"] .music-dot { animation: none; }
}
@media (max-width: 480px) {
  .music-toggle { bottom: var(--space-4); right: var(--space-4); }
  .music-toggle .music-label { display: none; }
  .music-toggle { padding: 0; width: 40px; justify-content: center; }
}
/* ============================================================
   POLISH PASS — protect what works, sharpen execution.
   Applied 28 April 2026. No new direction. Subtle gains only.
   ============================================================ */

/* --- 1. Header readability — lift logo + nav links ~25% without going loud --- */
.brand {
  font-weight: 700;
  letter-spacing: -0.015em;
}
.brand-mark {
  /* Mark itself reads stronger by widening the stroke a hair */
  stroke-width: 1.7;
}
.nav-links {
  font-weight: 600;
  letter-spacing: 0.005em;
}
.nav-links a {
  color: var(--color-text);
  opacity: 0.82;
  transition: opacity 180ms ease, color 180ms ease;
  position: relative;
  padding-block: 4px;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  opacity: 1;
  color: var(--color-text);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

/* --- 2. Crisis strip — quieter, more deliberate. Aqua tick replaces underline --- */
.crisis-strip {
  font-size: 0.815rem;
  letter-spacing: 0.01em;
  padding-block: var(--space-3);
  background: var(--color-surface-2);
}
[data-theme="dark"] .crisis-strip {
  background: rgba(255, 255, 255, 0.025);
  border-bottom-color: rgba(232, 227, 212, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .crisis-strip {
    background: rgba(255, 255, 255, 0.025);
    border-bottom-color: rgba(232, 227, 212, 0.08);
  }
}
.crisis-strip a {
  color: var(--color-primary);
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(31, 94, 87, 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  transition: text-decoration-color 180ms ease;
}
.crisis-strip a:hover {
  text-decoration-color: var(--color-primary);
}

/* --- 3. CTA buttons — tactile finish, premium hover, hierarchy --- */
.cta {
  padding: 0.85rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 200ms ease,
              background-color 180ms ease,
              border-color 180ms ease,
              color 180ms ease;
  will-change: transform;
}
.cta-primary {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18),
              0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}
.cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(31, 94, 87, 0.35),
              0 1px 2px rgba(0, 0, 0, 0.2),
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.cta-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.cta:not(.cta-primary):hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.cta:not(.cta-primary):active {
  transform: translateY(0);
}
[data-theme="dark"] .cta-primary {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
[data-theme="dark"] .cta-primary:hover {
  box-shadow: 0 8px 22px rgba(31, 94, 87, 0.5),
              0 1px 2px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* --- 4. Body copy — paragraph rhythm. Loosen the dense intro blocks --- */
.hero-lede,
.hero-pitch {
  line-height: 1.66;
  margin-bottom: var(--space-7);
}
.hero-pitch {
  /* The dense pitch paragraph — give it a touch more breathing */
  letter-spacing: 0.002em;
}
.hero-pitch strong {
  /* Bold pulls already do work; lift them just a hair more */
  letter-spacing: 0.003em;
}
.why-james {
  margin-bottom: var(--space-9);
}
.why-james li {
  padding-block: 0.35rem;
  line-height: 1.6;
}

/* Hero meta — currently too faint. Lift one notch, keep restrained. */
.hero-meta {
  color: var(--color-text-muted);
  line-height: 1.7;
  opacity: 0.95;
}

/* --- 5. Section transitions — calmer reveal, more breathing room --- */
section {
  /* Add a quiet vertical breath to every full-width section */
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}
section + section {
  /* Soften the seam between sections — subtle gradient instead of hard line */
  border-top-color: transparent;
  position: relative;
}
section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-divider) 28%,
    var(--color-divider) 72%,
    transparent 100%
  );
  opacity: 0.7;
}

/* Keep band-dark seams crisp — that section is meant to feel like a different room */
section + section.band-dark::before,
section.band-dark + section::before {
  display: none;
}
section + section.band-dark,
section.band-dark + section {
  border-top: none;
}

/* --- 6. Pull quotes / key-truth lines — let the bold lines breathe --- */
/* The "Money you can earn back. Time you cannot." style block-quote */
blockquote,
.pullquote {
  position: relative;
}
/* Inline strong runs inside body paragraphs — the "key truths" the brief
   asks for. Tighter tracking + a hair more weight differential reads as
   editorial pull, not bold spam. */
p strong, li strong {
  font-weight: 700;
  letter-spacing: -0.002em;
}

/* --- 7. Sticky header refinement — reads stronger when scrolled --- */
.site-header {
  transition: background-color 200ms ease, border-bottom-color 200ms ease,
              box-shadow 200ms ease;
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04),
              0 8px 24px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4),
              0 8px 24px rgba(0, 0, 0, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header[data-scrolled="true"] {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4),
                0 8px 24px rgba(0, 0, 0, 0.25);
  }
}

/* Reduced-motion users get no transforms or shadows on hover */
@media (prefers-reduced-motion: reduce) {
  .cta, .cta:hover, .cta:active,
  .cta-primary, .cta-primary:hover, .cta-primary:active {
    transform: none !important;
    transition: background-color 0s, border-color 0s, color 0s;
  }
  .nav-links a::after {
    transition: none;
  }
}

/* =====================================================================
   POLISH PASS 2 — header bleed-through fix, mobile compaction,
   hero breathing room, CTA hierarchy, TOC mobile hide, section rhythm.
   Reject anything that reads as more startup, generic, bright, clinical,
   or busy. Aim: premium finished product.
   ===================================================================== */

/* --- 8. Hero breathing room — separate H1 from doors block, lift meta --- */
.hero h1 {
  /* Already has margin-bottom: var(--space-6) — give it a touch more
     before the doors block reads as the next beat. */
  margin-bottom: var(--space-7);
}
.hero-doors {
  /* The brief: H1 sits crammed against doors. Push doors down. */
  margin-top: var(--space-9) !important;
}
.hero-meta {
  /* Currently feels like quiet limbo. Anchor it with a thin top rule
     and lift the body slightly to read as a signature line, not afterthought. */
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-size: 0.9rem;
  line-height: 1.65;
  opacity: 0.92;
  max-width: 56ch;
}

/* --- 9. Doors block — lift the aqua "next step" so it reads as
       weight-equal to the if-line. Currently undersized. --- */
.door-then {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* --- 10. Mobile compact — the brief: header was ~10% of viewport.
       Shrink padding-block + tighten logo on small screens. --- */
@media (max-width: 640px) {
  .nav {
    padding-block: var(--space-3);
    gap: var(--space-4);
  }
  .brand { font-size: var(--text-base); }
  .brand-mark { width: 22px; height: 22px; }
  .crisis-strip {
    /* Slimmer crisis strip on mobile so total header stays compact */
    font-size: 0.74rem;
    padding-block: var(--space-2);
    line-height: 1.4;
  }

  /* Hero H1 — give it air below the nav border */
  .hero { padding-block: var(--space-10) var(--space-8); }
  .hero h1 { margin-top: var(--space-2); }

  /* CTA hierarchy on mobile — both full-width or both auto looks
     intentional. Mismatched stack reads accidental. Make both full
     width with primary on top — clear hierarchy, matched rhythm. */
  .cta-row {
    flex-direction: column;
    gap: var(--space-3);
  }
  .cta-row .cta {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Hero meta — tighter stacking on mobile, no border (saves a line) */
  .hero-meta {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    font-size: 0.85rem;
  }

  /* Section eyebrow rhythm — was butting against the H2. Add air. */
  .section-eyebrow {
    margin-bottom: var(--space-5);
    line-height: 1.4;
  }

  /* Body inset — bump padding-inline at narrow widths so text doesn't
     feel pinned to the screen edge */
  .wrap, .nav {
    padding-inline: var(--space-6);
  }

  /* Doors block — reduce vertical margins on mobile so it doesn't
     dominate; keep enough air to read as a separate beat */
  .hero-doors {
    margin-top: var(--space-7) !important;
    margin-bottom: var(--space-7);
  }
  .door-then {
    /* Mobile: the right-aligned cue moves inline below the if-line.
       Keep it weighted but not loud. */
    font-size: 0.86rem !important;
  }
}

/* --- 11. Hero TOC — desktop sidebar affordance. Hide below 880px
       (the chapter-rail breakpoint) so it stops appearing as a wasted
       block beneath the buttons on mobile. --- */
@media (max-width: 879px) {
  .hero-toc { display: none; }
}

/* --- 12. Sticky header opacity reinforcement — even when scrolled,
       no body text should ghost through. The 0.96/0.97 backgrounds plus
       a stronger blur are doing the lifting. The scrolled-shadow already
       defined adds the visual lift. --- */
.site-header[data-scrolled="true"] {
  /* Bump opacity another notch when actively scrolling — the moment
     when bleed-through is most visible. */
  background-color: rgba(246, 243, 236, 0.985);
}
[data-theme="dark"] .site-header[data-scrolled="true"] {
  background-color: rgba(21, 20, 15, 0.985);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header[data-scrolled="true"] {
    background-color: rgba(21, 20, 15, 0.985);
  }
}

/* =====================================================================
   POLISH PASS 3 — surgical adjustments only, no redesign.
   1. Header nav: +15-20% visibility (weight, contrast, active state)
   2. Density relief: lift hero-pitch + add room around bold anchors
   3. Pricing justification line — subtle, signature-styled
   4. Mobile sticky chat CTA — appears after hero scroll
   5. Scroll smoothness — global behaviour smooth, anchor offset fix
   ===================================================================== */

/* --- 13. Header nav: lift weight without making it loud.
       Brief asks for ~15-20% more visibility. Going from 500 -> 600 weight,
       and lifting the link colour from default-text to true text-strong
       so contrast against the cream/black header reads more clearly. --- */
.nav-links {
  font-weight: 600;
  letter-spacing: 0.005em;
}
.nav-links a {
  color: var(--color-text);
  opacity: 0.95;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  opacity: 1;
  color: var(--color-primary);
}
[data-theme="dark"] .nav-links a {
  color: var(--color-text);
}

/* Active page indicator — when the nav anchor target is in view, show
   a small aqua dot before the label. Pure CSS via :target/:has would
   miss section scrolling, so we keep this purely as the hover affordance.
   The active-state hint is delivered by the ::after underline. */
.nav-links a::after {
  /* Existing underline already exists from pass 1. Lift it 1px and
     slightly more visible on hover. */
  height: 2px;
  background: var(--color-primary);
  opacity: 0.9;
}

/* --- 14. Density relief: pricing justification line + hero-pitch breathing --- */
.hero-pitch {
  /* Add a touch more line-height so the dense paragraph doesn't read
     as a wall. Was 1.55, lift to 1.62. */
  line-height: 1.62;
}
.price-justify {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: calc(var(--space-2) * -1) 0 var(--space-7) 0;
  max-width: 52ch;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-primary);
  opacity: 0.92;
}
.price-justify span[aria-hidden="true"] {
  /* The em-dash prefix — keep but tone down */
  display: none;
}

/* --- 15. Body anchors: small breathing room around p strong runs in
       long sections so the bold pulls have air to do their work. --- */
section[data-chapter] p {
  margin-bottom: var(--space-5);
}
section[data-chapter] p:last-child {
  margin-bottom: 0;
}

/* --- 16. Mobile sticky chat CTA. Hidden on tablet/desktop entirely. --- */
.mobile-sticky-cta {
  display: none;
}
@media (max-width: 719px) {
  .mobile-sticky-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: fixed;
    bottom: var(--space-5);
    left: var(--space-5);
    right: var(--space-5);
    z-index: 80;
    padding: var(--space-4) var(--space-5);
    background: var(--color-text);
    color: var(--color-bg);
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28),
                0 1px 2px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .mobile-sticky-cta[data-visible="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-sticky-cta-label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.005em;
  }
  .mobile-sticky-cta-meta {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.78;
    letter-spacing: 0.01em;
  }
  /* Push body content above the CTA so the floating button never covers
     the closing quote / footer last lines. */
  .site-footer {
    padding-bottom: calc(var(--space-12) + 64px);
  }
}
[data-theme="dark"] .mobile-sticky-cta {
  background: var(--color-text);
  color: var(--color-bg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5),
              0 1px 2px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(232, 227, 212, 0.06) inset;
}

/* --- 17. Crisis link surfaced earlier on mobile: the existing crisis-strip
       is already at the very top. Keep it. But on mobile, when the user
       has scrolled and the strip is no longer visible, we need crisis access
       reachable. The mobile sticky CTA goes to chat — which itself surfaces
       crisis routes. That is the route. No extra UI added. --- */

/* --- 18. Scroll smoothness + anchor offset (so #lane / #maths / #how
       don't tuck under the sticky header). --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--space-12) + var(--space-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
  html {
    /* Header is more compact on mobile, less padding needed. */
    scroll-padding-top: var(--space-12);
  }
}

/* --- 19. Reduced-motion users get no transform on the mobile CTA --- */
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-cta,
  .mobile-sticky-cta[data-visible="true"] {
    transform: none !important;
    transition: opacity 0s !important;
  }
}

    transition: opacity 0s !important;
  }
}

/* =====================================================================
   POLISH PASS 4 — surgical refinements (no redesign, no regression)
   1. Header nav contrast +25% (opacity 0.95 -> full, dark also lifted)
   2. Fast-entry rail: 4 emotional-state pills under hero doors
   3. Trust-led CTA copy (markup change only; this block is for the rail)
   4. Mobile rhythm: section padding-block lifted ~12% on small screens
   ===================================================================== */

/* --- 20. Header nav: lift contrast modestly. From opacity 0.95 to 1.
       Dark mode link colour shifts a step toward text-strong. --- */
.nav-links a {
  opacity: 1;
  font-weight: 600;
}
[data-theme="dark"] .nav-links a {
  color: var(--color-text-strong, var(--color-text));
  opacity: 1;
}
/* Subtle weight bump only on desktop where the nav is larger; keeps mobile
   menu unchanged (mobile menu hides this nav entirely). */
@media (min-width: 720px) {
  .nav-links a { letter-spacing: 0.01em; }
}

/* --- 21. Fast-entry rail. Sits between hero-doors and hero-lede.
       4 small pills, each routes to chat with a state hint. Calm,
       restrained — pills not buttons, serif not bold display. --- */
.hero-fast-entry {
  margin: var(--space-5) 0 var(--space-7) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hero-fast-entry-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.hero-fast-entry ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hero-fast-entry a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-surface, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.hero-fast-entry a::before {
  content: "→";
  color: var(--color-primary);
  font-weight: 600;
  opacity: 0.85;
  margin-right: 2px;
}
.hero-fast-entry a:hover,
.hero-fast-entry a:focus-visible {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-text-strong, var(--color-text));
}
[data-theme="dark"] .hero-fast-entry a {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .hero-fast-entry a:hover,
[data-theme="dark"] .hero-fast-entry a:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-primary);
}
@media (max-width: 640px) {
  .hero-fast-entry { margin: var(--space-4) 0 var(--space-6) 0; }
  .hero-fast-entry a {
    font-size: 0.88rem;
    padding: 7px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fast-entry a { transition: none; }
}

/* --- 22. Mobile rhythm: section padding-block lifted on small screens
       only. ~12% bump on the bottom edge so sections breathe between
       chapters. No change to desktop. No change to hero. --- */
@media (max-width: 720px) {
  section[data-chapter] {
    padding-block: clamp(var(--space-14), 12vw, var(--space-20));
  }
  /* Keep the band-dark pull-quote section feeling like a beat, not a
     full chapter break. Less padding than chapter sections. */
  section.band-dark {
    padding-block: clamp(var(--space-12), 10vw, var(--space-18));
  }
}

/* =====================================================================
   POLISH PASS 5 — surgical, no regression
   1. Header: hairline divider on mobile + brand wordmark weight bump,
      desktop underline 1px more present
   2. Hero CTA: micro-kicker below the primary button
   3. Mobile: section padding-block lifted again, hero stack gap eased
   4. Price: framed as continued private access (markup change in HTML)
   ===================================================================== */

/* --- 23. Header visibility, deeper. Mobile especially. --- */
@media (max-width: 720px) {
  .site-header,
  header.site-header {
    border-bottom: 1px solid var(--color-divider);
  }
  .brand-wordmark,
  .nav .brand-wordmark,
  a.brand-link {
    font-weight: 700;
    letter-spacing: -0.005em;
  }
}
/* Desktop: lift the underline tick under nav-links so it reads at a
   glance on hover/focus. From opacity 0.9 -> 1, height stays 2px. */
@media (min-width: 720px) {
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after {
    opacity: 1;
  }
}

/* --- 24. Hero CTA kicker. Sits between cta-row and hero-meta.
       Small serif italic, muted. Adds emotional immediacy without
       loudness. --- */
.hero-cta-kicker {
  margin: var(--space-3) 0 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  letter-spacing: 0.005em;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .hero-cta-kicker {
    font-size: 0.92rem;
    margin-top: var(--space-2);
  }
}

/* --- 25. Mobile breathing room, deeper. Lift section padding-block
       once more on small screens only. ~16% more than pass 4. --- */
@media (max-width: 720px) {
  section[data-chapter] {
    padding-block: clamp(var(--space-16), 14vw, var(--space-22, 7rem));
  }
  section.band-dark {
    padding-block: clamp(var(--space-14), 12vw, var(--space-20));
  }
  /* Hero stack gap — ease the rhythm between doors, fast-entry, lede */
  .hero-fast-entry {
    margin: var(--space-6) 0 var(--space-7) 0;
  }
  .hero-lede {
    margin-top: var(--space-5);
  }
  .cta-row {
    margin-top: var(--space-6);
  }
}

/* --- 26. Price-as-access. Soften the price-justify type so it reads
       as quiet reassurance, not transaction. --- */
.price-justify {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.005em;
}
.price-justify strong {
  color: var(--color-text);
  font-weight: 600;
  font-style: normal;
}
   Polish 6 — Editorial spacing (global, desktop only)
   Goal: calmer, more premium, more authoritative left column
   on desktop. Mobile rhythm unchanged.
   Applied identically across all 6 sites.
   ============================================================ */
@media (min-width: 900px) {

  /* 1. Reading width — 65ch editorial sweet spot for body copy */
  section[data-chapter] p,
  section[data-chapter] ul,
  section[data-chapter] ol {
    max-width: 65ch;
  }
  section[data-chapter] .lede {
    max-width: 60ch;
  }

  /* 2. Paragraph rhythm — modest +25%, copy breathes without drift */
  section[data-chapter] p {
    margin-bottom: var(--space-5);   /* was --space-4 */
    line-height: 1.65;               /* was 1.55 */
  }

  /* 3. Section transitions — bigger vertical breathing between sections */
  section[data-chapter] {
    padding-block: clamp(var(--space-16), 9vw, var(--space-32));
  }

  /* 4. Heading hierarchy — more room after a heading, less inside */
  section[data-chapter] h2 {
    margin-bottom: var(--space-8);   /* was --space-6 */
  }
  section[data-chapter] h3 {
    margin-top: var(--space-12);     /* was --space-8 */
    margin-bottom: var(--space-4);
  }
  section[data-chapter] .section-eyebrow {
    margin-bottom: var(--space-6);   /* was --space-4 */
  }

  /* 5. Pills row & CTA group — more breathing room before next block */
  .fast-entry,
  .doors,
  .hero-cta-row {
    margin-bottom: var(--space-12);
  }

  /* 6. Lede — slightly looser line for the calm-long-read feel */
  section[data-chapter] .lede {
    line-height: 1.6;                /* was 1.45 */
    margin-bottom: var(--space-8);   /* was --space-6 */
  }

  /* 7. Pull quotes — more vertical air around them */
  .pull {
    margin-block: var(--space-16);   /* was --space-10 */
  }

  /* 8. Cost lists / cards — more space between rows */
  .cost-list > li + li,
  .months-grid > * + *,
  .why-james li + li {
    margin-top: var(--space-6);
  }
}


/* ============================================================
   Polish 7 — Lower-page rhythm + microcopy fit (global, desktop only)
   Goal: no awkward wraps in pill rows, sister-door cards breathe,
   lower-page lists feel intentional. Identity unchanged.
   Applied identically across all 6 sites.
   ============================================================ */
@media (min-width: 900px) {

  /* 1. Start-here pill rows — IF left, THEN right.
     Prevent the THEN column from crowding the IF column when THEN
     text is long. IF gets a sensible cap; THEN aligns to the right
     and is allowed to wrap to two lines without breaking the row. */
  .start-here a {
    align-items: baseline;
    column-gap: var(--space-8);
  }
  .start-here .if {
    flex: 0 1 auto;
    max-width: 28ch;
    line-height: 1.45;
  }
  .start-here .then {
    flex: 1 1 auto;
    text-align: right;
    line-height: 1.35;
  }

  /* 2. Sister-door cards (Same James. Three other doors) —
     more vertical air per card, h3 sits closer to its body. */
  section[data-chapter] .two-col > div {
    padding-block: var(--space-3);
  }
  section[data-chapter] .two-col h3 {
    margin-top: 0;
    margin-bottom: var(--space-3);
  }
  section[data-chapter] .two-col p {
    margin-bottom: 0;
    line-height: 1.6;
  }

  /* 3. Refuse-list (What this site will not do) —
     each item gets a comma of breathing space. */
  .refuse-list li {
    line-height: 1.55;
    padding-block: var(--space-1);
  }
  .refuse-list li + li {
    margin-top: var(--space-3);
  }

  /* 4. Persona tiles (Who this site is for) —
     slightly more comfortable padding inside each tile. */
  .persona-tiles li {
    line-height: 1.4;
  }

  /* 5. Sister-note paragraph — reading width tighter so the line
     break does not orphan the link text. */
  .sister-note p {
    max-width: 60ch;
    line-height: 1.6;
  }
}



/* Polish 7 — nav items must not wrap mid-link
   ============================================================ */
.nav-links li {
  white-space: nowrap;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .nav-links { gap: var(--space-4); font-size: var(--text-xs); }
}