/* Unconditional — design system.
   Direction: warm editorial, made BOLD. Flat full-bleed colour bands, large type with
   tight leading, hand-drawn line illustration instead of stock photography, pill CTAs,
   and a background that changes colour *mid-headline*.

   The graphic language was studied from Positive Intelligence (the brief's stated
   reference model). What was adopted: flat saturated bands, oversized numerals, a
   credential strip, a dark closing band. What was deliberately NOT adopted: their
   social proof — "2 Million+ Assessments", NYT/WSJ logo walls, named executive quotes.
   None of that exists for a first cohort, and inventing it would be fraud.

   Contrast: every token pair below was measured, not eyeballed.
     ink on paper 16.40 · ink on cream 14.79 · ink on amber 9.34 · paper on clay 5.71
     paper on teal 7.17 · clay on paper 5.71 (AA body, at #A8411F)
     --muted on ink is 2.94 and FAILS, hence --muted-on-dark.
   Amber is a FIELD colour only: 1.76:1 against paper, so it never carries text on light.
   Change tokens here, never in markup. */

/* Served from /assets/ — so the font path is relative to that directory. */
@import url("fonts/fonts.css");

:root {
  /* warm paper base */
  --paper:        #FAF7F2;
  --paper-raised: #FFFFFF;
  --cream:        #F2EBDF;
  --ink:          #1B1917;
  --ink-soft:     #3F3A35;
  --muted:        #6B625A;
  --line:         #E4DCD1;
  --line-strong:  #CFC4B6;

  /* fields and the accent */
  --amber:        #F2B231;   /* field only — never text on a light background */
  --amber-deep:   #E0A012;
  --clay:         #A8411F;   /* 5.71:1 on paper — valid as text AND as a band */
  --clay-deep:    #963A1A;
  --accent-soft:  #F3E7DF;
  --teal:         #175D57;   /* 7.17:1 both directions */

  /* text on dark bands */
  --ink-soft-on-dark: #C9C0B4;   /* 9.75:1 on ink */
  --muted-on-dark:    #A79E93;   /* 6.64:1 on ink */

  --font-serif: "Source Serif 4", "IBMPlex Serif", Georgia, serif;
  --font-sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 34rem;
  --wide: 68rem;
  --pad: clamp(1.25rem, 5vw, 2.75rem);
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius: 4px;
  --pill: 999px;
  --band-pad: clamp(3.5rem, 9vw, 7.5rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- structure */

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }

.site-head-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.head-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------------- bands */

.band { padding-block: var(--band-pad); }
.band--tight { padding-block: clamp(1.75rem, 4.5vw, 3rem); }
.band--short { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Full-bleed flat colour. Each dark/warm band re-points the text tokens so every
   descendant stays legible without per-element overrides. */
.band--paper { background: var(--paper); }
.band--cream { background: var(--cream); }

.band--amber {
  background: var(--amber);
  color: var(--ink);
  --muted: var(--ink-soft);
  --line: rgba(27, 25, 23, 0.20);
  --line-strong: rgba(27, 25, 23, 0.38);
  --clay: var(--ink);          /* #963A1A on amber is 3.84:1 — ink is 9.34:1 */
}

.band--ink {
  /* literal, NOT var(--ink): this rule re-points --ink below, and a var() in the same
     block resolves to the new value — which painted the band paper-white. */
  background: #1B1917;
  color: var(--paper);
  --ink: #FAF7F2;
  --ink-soft: var(--ink-soft-on-dark);
  --muted: var(--muted-on-dark);
  --line: rgba(250, 247, 242, 0.22);
  --line-strong: rgba(250, 247, 242, 0.42);
  --clay: var(--amber);
}

.band--clay {
  background: #A8411F;   /* literal for the same reason as .band--ink */
  color: var(--paper);
  --ink: #FAF7F2;
  --ink-soft: #F6E3D9;   /* 4.91:1 on clay */
  --muted: #F6E3D9;      /* 4.91:1 — #F0D3C4 was 4.31 and failed */
  --line: rgba(250, 247, 242, 0.32);
  --line-strong: rgba(250, 247, 242, 0.5);
  --clay: #FAF7F2;       /* amber on clay is 3.25:1 — paper is 5.71:1 */
}

.band--teal {
  background: var(--teal);
  color: var(--paper);
  --ink: #FAF7F2;
  --ink-soft: #CDE3DF;   /* 5.71:1 on teal */
  --muted: #CDE3DF;      /* 5.71:1 — #A9CCC7 was 4.43 and failed */
  --line: rgba(250, 247, 242, 0.26);
  --line-strong: rgba(250, 247, 242, 0.45);
  --clay: #FAF7F2;       /* amber on teal is 4.08:1 — paper is 7.17:1 */
}

/* The signature move: the field changes colour part-way down, so the headline
   crosses the boundary. `--split` is tuned per breakpoint. */
.band--split {
  --split: 41%;
  background: linear-gradient(180deg,
    var(--paper) 0 var(--split),
    var(--amber) var(--split) 100%);
  --muted: var(--ink-soft);
  --clay: var(--ink);   /* the split band carries the kicker over BOTH paper and amber */
}
.band--split .lede { color: var(--ink); }

@media (max-width: 900px) { .band--split { --split: 34%; } }
@media (max-width: 620px) { .band--split { --split: 26%; } }

/* --------------------------------------------------------------------- type */

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; }

h1 {
  font-size: clamp(2.25rem, 5.1vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 var(--space-5);
  max-width: 22ch;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  line-height: 1.09;
  letter-spacing: -0.018em;
  margin: 0 0 var(--space-4);
  max-width: 24ch;
  text-wrap: balance;
}

h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
}

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

.lede {
  font-size: clamp(1.1rem, 2.1vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--space-6);
  max-width: 30rem;
}

.kicker, .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 var(--space-5);
}

.section-head { margin-bottom: var(--space-6); }
.section-head p { color: var(--ink-soft); max-width: var(--measure); margin: 0; }

/* ------------------------------------------------------------------ hero */

.hero-band { padding-top: clamp(3rem, 8vw, 6.5rem); padding-bottom: clamp(3.5rem, 9vw, 7rem); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.32fr 0.68fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 22rem; margin-inline: auto; }
}

.hero-art { max-width: 32rem; }
.hero .lede, .hero-band .lede { margin-bottom: var(--space-6); }

/* Non-banded hero: the 404 and the /analysis/ index sit inside .wrap, so they get
   spacing rather than a full-bleed field. */
.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: var(--space-4); }
.wrap > section + section { margin-top: var(--space-7); }

.doodle { width: 100%; height: auto; display: block; color: currentColor; }
.doodle--card { max-width: 7.5rem; margin-bottom: var(--space-5); }

/* ------------------------------------------------------------------ buttons */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin: 0 0 var(--space-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: 52px;
  padding: 0.95rem 1.85rem;
  border-radius: var(--pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease,
              color 150ms ease, border-color 150ms ease;
}

.btn-primary { background: var(--ink); color: #FAF7F2; border-color: var(--ink); }
.btn-primary:hover { background: #000; border-color: #000; transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* On a dark/warm field the ink token is flipped, so state the pill explicitly. */
.band--clay .btn-primary,
.band--teal .btn-primary { background: #1B1917; color: #FAF7F2; border-color: #1B1917; }
.band--ink  .btn-primary { background: var(--amber); color: #1B1917; border-color: var(--amber); }
.band--ink  .btn-primary:hover { background: #FAF7F2; border-color: #FAF7F2; }

.band--ink .btn-ghost, .band--clay .btn-ghost, .band--teal .btn-ghost,
.band--amber .btn-ghost { color: var(--ink); border-color: var(--ink); }
.band--ink .btn-ghost:hover { background: var(--amber); border-color: var(--amber); color: #1B1917; }
.band--clay .btn-ghost:hover, .band--teal .btn-ghost:hover { background: #FAF7F2; color: #1B1917; border-color: #FAF7F2; }
.band--amber .btn-ghost:hover { background: #1B1917; color: var(--amber); border-color: #1B1917; }

.btn:focus-visible, a:focus-visible, summary:focus-visible,
button:focus-visible, input:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
}
.band--ink .btn:focus-visible, .band--ink a:focus-visible,
.band--clay .btn:focus-visible, .band--clay a:focus-visible {
  outline-color: var(--amber);
}

.cta-micro {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30rem;
}

/* -------------------------------------------------------- credential strip */
/* Replaces a logo wall. These are real, held credentials — not borrowed brands. */

.credit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  align-items: baseline;
  justify-content: space-between;
}

.credit {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------- lever cards */

.lever-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 820px) { .lever-cards { grid-template-columns: 1fr 1fr; } }

.lever-card { padding: clamp(1.75rem, 3.2vw, 2.75rem); }
.lever-card h2 { font-size: clamp(1.45rem, 2.9vw, 2.05rem); }
.lever-card p:last-child { margin-bottom: 0; }
.lever-card--amber { background: var(--amber); color: #1B1917;
  --ink: #1B1917; --ink-soft: #3F3A35; --muted: #3F3A35; --clay: #1B1917; }
.lever-card--teal { background: var(--teal); color: #FAF7F2;
  --ink: #FAF7F2; --ink-soft: #CDE3DF; --muted: #CDE3DF; --clay: #FAF7F2; }
.lever-card--ink { background: #1B1917; color: #FAF7F2;
  --ink: #FAF7F2; --ink-soft: #C9C0B4; --muted: #A79E93; --clay: #F2B231; }
.lever-card--clay { background: #A8411F; color: #FAF7F2;
  --ink: #FAF7F2; --ink-soft: #F6E3D9; --muted: #F6E3D9; --clay: #FAF7F2; }
.lever-card p { color: var(--ink-soft); }

/* ------------------------------------------------------------------- stats */
/* Real numbers only: duration, cohort size, patterns, session length. */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border-block: 2px solid var(--ink);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { background: var(--paper); padding: var(--space-6) var(--space-4) var(--space-6); }
.stat-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 var(--space-3);
  color: var(--clay);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ------------------------------------------------------------ lists / ticks */

.ticks, .steps { list-style: none; margin: 0; padding: 0; max-width: 46rem; }

.ticks li {
  position: relative;
  padding-left: 3.25rem;
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before {
  counter-increment: tick;
  content: counter(tick, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--clay);
  letter-spacing: 0.06em;
}
.ticks { counter-reset: tick; }

/* ------------------------------------------------------------------ method */

.method-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 820px) { .method-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.method-grid h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.method-grid p { color: var(--ink-soft); max-width: var(--measure); }
.method-block { border-top: 2px solid var(--ink); padding-top: var(--space-5); }

/* ------------------------------------------------------------------- weeks */

.weeks { list-style: none; margin: 0; padding: 0; }

.week {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}
.week:last-child { border-bottom: 1px solid var(--line); }
.week h3 { margin-bottom: var(--space-2); }
.week p { color: var(--ink-soft); max-width: var(--measure); margin: 0; }
.week-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--clay);
  padding-top: 0.15rem;
}
@media (max-width: 620px) {
  .week { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ------------------------------------------------------------------- price */

.price-amount {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin: 0 0 var(--space-3);
  color: var(--amber);
}
.price-terms { color: var(--ink-soft); font-size: 1.15rem; margin: 0 0 var(--space-6); max-width: 30rem; }
.guarantee {
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
  margin: 0;
  color: var(--ink-soft);
  max-width: 34rem;
  font-size: 1rem;
}

/* ------------------------------------------------------------ proof / faq */

.proof-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); max-width: var(--wide); }
@media (min-width: 820px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.proof-card { border-top: 2px solid var(--ink); padding-top: var(--space-5); }
.proof-card p { color: var(--ink-soft); max-width: none; }
.proof-name {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.integrity {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--cream);
  border-left: 4px solid var(--clay);
  max-width: 46rem;
}
.integrity p { margin: 0; font-size: 0.975rem; color: var(--ink-soft); }

.faq-item { border-top: 1px solid var(--line); max-width: 46rem; }
.faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  padding: var(--space-5) 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  font-family: var(--font-mono);
  color: var(--clay);
  font-weight: 400;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 var(--space-5); color: var(--ink-soft); max-width: var(--measure); }

/* --------------------------------------------------------------- final CTA */

.final-cta h2 {
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  max-width: 20ch;
}
.final-cta .cta-micro { color: var(--ink-soft); }
.final-cta a { color: var(--ink); }

/* ------------------------------------------------------------------ footer */

.site-foot {
  background: #1B1917;   /* literal: this rule re-points --ink to paper below */
  color: var(--paper);
  padding-block: var(--space-6);
  --ink: #FAF7F2;
  --ink-soft: var(--ink-soft-on-dark);
  --muted: var(--muted-on-dark);
}
.site-foot p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 var(--space-2);
}
.foot-small {
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
  color: var(--muted);
  max-width: 46rem;
  margin-bottom: var(--space-4) !important;
}
.foot-link { color: var(--amber); }

/* --------------------------------------------------------------- selling */
/* Components that exist to move a reader to a decision: the offer stated up
   front, what is included, who it is for, the first step spelled out, the price
   anchored against its alternatives. All figures here are the project's own
   (docs/2) — nothing on this page is invented. */

/* announcement bar: the real cohort dates, visible before anything else */
.announce { background: #1B1917; color: #FAF7F2; }
.announce-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.35rem 1.5rem; padding-block: 0.7rem; text-align: center; }
.announce p { margin: 0; font-family: var(--font-mono); font-size: 0.73rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: #FAF7F2; }
.announce b { color: var(--amber); font-weight: 500; }   /* amber on ink = 9.34:1 */
.announce a { color: var(--amber); text-underline-offset: 3px; }

/* the head keeps the next step one click away at every scroll position */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--paper);
  border-bottom: 1px solid var(--line); }
.site-head-inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding-block: var(--space-4); flex-wrap: wrap; }
.head-cta { white-space: nowrap; }
.btn--sm { min-height: 44px; padding: 0.58rem 1.15rem; font-size: 0.87rem; }
@media (max-width: 600px) { .head-note { display: none; } }

/* a sticky head will cover the top of any anchor we jump to */
:target, section[id], div[id] { scroll-margin-top: 5.5rem; }

/* five-fact offer row */
@media (min-width: 900px) { .stats--5 { grid-template-columns: repeat(5, 1fr); } }
.stats--5 .stat { padding: var(--space-5) var(--space-4) var(--space-6); }
.stats--5 .stat-num { font-size: clamp(1.55rem, 2.9vw, 2.35rem); letter-spacing: -0.03em; }
.stat-note { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em;
  color: var(--muted); margin: var(--space-2) 0 0; line-height: 1.5; }

/* what is included */
.stack { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.stack li { display: grid; grid-template-columns: 1.9rem 1fr; gap: var(--space-4);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.stack li::before { content: "✓"; font-family: var(--font-sans); font-weight: 700; color: var(--clay);
  font-size: 1rem; line-height: 1.55; }
.stack h3 { margin: 0 0 0.15rem; font-size: 1.02rem; }
.stack p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.stack-free { background: var(--accent-soft); border-left: 4px solid var(--clay);
  padding: var(--space-5) var(--space-5) var(--space-4); margin-bottom: var(--space-6); }
.stack-free h3 { margin-top: 0; }
.stack-note { margin: var(--space-5) 0 0; font-size: 0.92rem; color: var(--muted); }

/* who it is for — self-selection, so the wrong buyer leaves early and cheap */
.for-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 820px) { .for-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
.for-grid h3 { border-top: 2px solid var(--ink); padding-top: var(--space-4); }
.for-grid ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.for-grid li { position: relative; padding-left: 1.55rem; margin-bottom: var(--space-3);
  color: var(--ink-soft); }
.for-grid li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.for-yes li::before { content: "✓"; color: var(--teal); }
.for-no li::before { content: "×"; color: var(--clay); }

/* the first step, spelled out: the cheapest conversion work on the page */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr;
  gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); font-family: var(--font-sans); font-weight: 800;
  font-size: 1.5rem; line-height: 1; color: var(--clay); letter-spacing: -0.03em; }
.steps h3 { margin: 0 0 var(--space-2); font-size: 1.12rem; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.steps .step-meta { display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }

/* price, and what it is being compared to */
.price-row { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.price-was { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted);
  text-decoration: line-through; }
.price-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.67rem;
  letter-spacing: 0.1em; text-transform: uppercase; background: var(--amber); color: #1B1917;
  padding: 0.32rem 0.62rem; }   /* amber + ink = 9.34:1 */
.anchors { list-style: none; margin: var(--space-6) 0 0; padding: 0;
  border-top: 1px solid var(--line); }
.anchors li { display: flex; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 0.94rem;
  color: var(--muted); }
.anchors b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.anchors-note { margin: var(--space-3) 0 0; font-size: 0.76rem; color: var(--muted); }

/* inline call to action between long sections */
.cta-band { background: var(--cream); border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink); }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5) var(--space-6); flex-wrap: wrap; padding-block: var(--space-6); }
.cta-band p { margin: 0; max-width: 36rem; font-family: var(--font-serif);
  font-size: 1.13rem; line-height: 1.45; }
.cta-band .cta-row { margin: 0; }

/* --------------------------------------------------------------- long-form */
/* Used by /analysis/ — the documents are the deliverable, so they must be
   readable, not decoration. Unchanged in intent. */

.prose { max-width: 46rem; }
.prose h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); max-width: none; line-height: 1.15; }
.prose h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  max-width: none;
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  line-height: 1.2;
}
.prose h3 { margin-top: var(--space-6); max-width: none; }
.prose h4 { font-size: 0.95rem; margin: var(--space-5) 0 var(--space-3); font-family: var(--font-mono); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose li > ul, .prose li > ol { margin-top: var(--space-2); }
.prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--clay);
  background: var(--accent-soft);
  color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--accent-soft);
  padding: 0.1em 0.35em;
}
.prose pre {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.5;
}
.prose pre code { background: none; color: inherit; padding: 0; }
.prose a { color: var(--ink); text-decoration-color: var(--clay); text-underline-offset: 2px; }
.prose strong { color: var(--ink); }

.table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); }
.prose table, .table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 34rem;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.prose th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.prose td { color: var(--ink-soft); }

/* ------------------------------------------------------------------- index */

.doc-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; max-width: var(--wide); }
.doc-list li { border-top: 1px solid var(--line); padding: var(--space-5) 0; }
.doc-list li:last-child { border-bottom: 1px solid var(--line); }
.doc-list a { color: var(--ink); font-weight: 700; text-decoration-color: var(--clay); text-underline-offset: 2px; }
.doc-list p { margin: var(--space-2) 0 0; color: var(--muted); font-size: 0.925rem; max-width: var(--measure); }

/* -------------------------------------------------------------- diagnostic */

.boundary {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--paper-raised);
  border: 2px solid var(--line-strong);
  border-left: 4px solid var(--clay);
  max-width: 46rem;
}
.boundary p { max-width: none; }

.quiz { max-width: 40rem; }
.quiz-progress {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}
.quiz-bar { height: 4px; background: var(--line); margin: 0 0 var(--space-6); }
.quiz-bar span { display: block; height: 4px; background: var(--clay); width: 0; transition: width 200ms ease; }
.quiz-q {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.25;
  margin: 0 0 var(--space-5);
  max-width: 28ch;
}
.quiz-options { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); }

.opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  color: #1B1917;
  background: var(--paper-raised);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-4);
  min-height: 52px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.opt:hover { border-color: #1B1917; background: #fff; }
.opt.is-picked { border-color: var(--clay); background: var(--accent-soft); }

.quiz-back {
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  min-height: 44px;
}
.quiz-back:hover { color: var(--ink); }

.result-pattern {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0 0 var(--space-5);
}
.result-block { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-bottom: var(--space-4); max-width: var(--measure); }
.result-block h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.result-block p { color: var(--ink-soft); }
.result-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: var(--measure);
  margin: var(--space-2) 0 0;
}
@media (min-width: 700px) { .result-actions { grid-template-columns: 1fr 1fr; } }
.result-actions .btn { text-align: center; }

.crisis {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 3px solid var(--clay-deep);
  background: var(--paper-raised);
  max-width: var(--measure);
}
.crisis h2 { font-size: 1.3rem; margin-bottom: var(--space-3); }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn-primary:hover, .btn:hover { transform: none; }
  .quiz-bar span { transition: none; }
  .opt { transition: none; }
}