/* ======================================================================
   Lead by Design: customer-facing design system
   Redesigned 14 Aug 2026 for MVP validation readiness. Premium personal
   insight product, not a personality-quiz aesthetic: calm, considered,
   substantial. Content and mechanics are untouched; this file and its
   companion app.js/index.html changes are presentation only.
   ====================================================================== */

:root {
  /* ---- palette: warm paper, deep ink, one considered accent per
     content type (not a rainbow), used sparingly, not as boxes
     everywhere ---- */
  --paper: #F7F5EF;
  --paper-raised: #FFFFFF;
  --ink: #1D2420;
  --ink-soft: #3C443F;
  --muted: #6B7168;
  --line: #E3DECE;
  --line-strong: #CFC8B4;

  /* Approved Lead by Design brand palette, added 28 Aug 2026 (brand
     mark + visual polish pass). Deep Green and Warm Gold are the two
     colours in the approved logo itself; Olive is the palette's third,
     supporting tone. Gold (#DAB460) fails WCAG AA as text on a light
     background (contrast ~2:1, checked directly), so it is kept as a
     separate, accent-only token (--gold) never used for body/label
     text on --paper/--paper-raised; --warm/--warm-strong stay a
     readable, same-family darkened gold for text/label use, exactly
     the same relationship the previous palette already had, just
     re-derived from the new brand hue instead of an unrelated brown. */
  --accent: #24341A;       /* Deep Green, approved */
  --accent-strong: #17210F;
  --accent-soft: #E6E9DD;
  --accent-soft-text: #202D14;

  --olive: #66673C;        /* Olive, approved: secondary accents, dividers, supporting text */

  --gold: #DAB460;         /* Warm Gold, approved: accents/borders/hover only, never small text on light backgrounds */
  --gold-soft: #F8EFDC;
  --warm: #856529;         /* readable warm-gold-family text (labels), same role as before, contrast-checked at 5.4:1 on white */
  --warm-soft: #F2E8D6;
  --warm-strong: #5C4318;  /* darker still, for stronger warm-toned emphasis text */

  --dynamic: #574385;
  --dynamic-soft: #ECE7F4;

  --hero-bg: #1A2510;
  --hero-ink: #F2EFE6;
  --hero-muted: #C4C7AE;
  --hero-accent: #DAB460;  /* Warm Gold reads at 8.1:1 on the dark hero background, checked directly */

  /* ---- type ---- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Public Sans", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Code", Consolas, monospace;

  /* ---- spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --content-w: 640px;
  --report-w: 700px;

  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { margin: 0 0 var(--sp-3); }

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

/* Persistent site brand mark, added 28 Aug 2026 (brand mark + visual
   polish pass), enlarged and given real breathing room same day after
   the founder flagged the first version as too small and tucked into
   the corner. The mark stands alone, deliberately no wordmark text
   beside it (an initial version added one; the founder corrected this,
   the eyebrow text elsewhere on the page already carries the name).
   Sits outside each page's #app / main content, so it persists across
   every JS-rendered screen without needing changes to individual
   render functions. Uses the Web 1000 asset; the browser downscales
   it, one asset for every non-favicon, non-email placement rather than
   a second smaller export. */
.site-brand {
  display: flex;
  align-items: center;
  padding: var(--sp-6) var(--sp-6) 0;
}
.site-brand img {
  height: 76px;
  width: auto;
  display: block;
}
.site-brand:focus-visible { outline-offset: 4px; }
@media (min-width: 700px) {
  .site-brand { padding: var(--sp-7) var(--sp-7) 0; }
  .site-brand img { height: 96px; }
}

/* Visible, deliberate focus ring everywhere, never suppressed. */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---- buttons ---- */
button {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--accent-strong);
  color: #fff;
  border: none;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  min-height: 44px;
}
button:hover:not(:disabled) { background: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
}
button.secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
button.ghost {
  background: transparent;
  color: var(--muted);
  padding: 0.5rem 0.9rem;
  font-weight: 500;
}
button.ghost:hover { color: var(--ink); }

/* ---- shared layout helpers ---- */
.wrap { max-width: var(--content-w); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.center { text-align: center; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- loading / error states ---- */
.state-screen {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--muted);
}
.state-screen .spinner {
  width: 34px; height: 34px; margin: 0 auto var(--sp-4);
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.85s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .state-screen .spinner { animation: none; border-top-color: var(--line-strong); }
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-screen p { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-soft); }
.state-screen.is-error { color: var(--warm-strong); }
.state-screen.is-error .icon { font-size: 1.8rem; margin-bottom: var(--sp-3); }
.state-screen .retry { margin-top: var(--sp-4); }

/* ======================================================================
   Intro screen
   ====================================================================== */
.intro { max-width: var(--content-w); margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-7); }
.intro-eyebrow { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: var(--sp-3); }
.intro h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}
.intro p.lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--sp-5); }
.intro-points { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.intro-points li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: 0.95rem; color: var(--ink-soft);
}
.intro-points .dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-top: 0.55em;
}
/* Conversion stat row (Strategy v8.5 Section 44.5): 15 questions / under
   5 minutes / instant result must be a visually prominent conversion
   asset, not small print, so this sits between the scenario bullets and
   the low-key meta disclaimer, not folded into it. */
.intro-stats {
  display: flex; gap: var(--sp-6); margin: 0 0 var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.intro-stats .stat { display: flex; flex-direction: column; gap: 0.15em; }
.intro-stats .stat-num { font-family: var(--serif); font-size: 1.5rem; color: var(--accent-strong); line-height: 1; }
.intro-stats .stat-label { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.intro-meta { font-size: 0.82rem; color: var(--muted); margin-top: var(--sp-4); }

/* Below-the-fold landing sections, added 14 Aug 2026 ("Next Build
   Workstream"): the hero above (.intro) stays exactly as compact as
   before, still visible with no scroll on a typical desktop viewport.
   Everything in .intro-more is new, deliberately given more room, per
   the explicit instruction that the page no longer needs to minimise
   copy, just keep the first screen immediately actionable. */
.intro-more { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--sp-4) var(--sp-8); }
.intro-section { padding: var(--sp-7) 0; border-top: 1px solid var(--line); }
.intro-section h2 {
  font-family: var(--serif); font-size: clamp(1.3rem, 3.5vw, 1.6rem);
  color: var(--ink); margin: 0 0 var(--sp-4);
}
.intro-section > p { font-size: 1rem; color: var(--ink-soft); max-width: 68ch; line-height: 1.7; }

.discover-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
}
.discover-group h3 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--accent-strong); margin: 0 0 var(--sp-3);
}
.discover-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.discover-group li {
  font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55;
  padding-left: var(--sp-4); position: relative;
}
.discover-group li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

.how-it-works { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-5); max-width: 60ch; }
.how-it-works li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.how-it-works .step-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.how-it-works li div { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; padding-top: 0.35em; }
.how-it-works li strong { color: var(--ink); }

.intro-cta-repeat { text-align: center; border-top: none; padding-top: var(--sp-5); }
.intro-cta-repeat p { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin-bottom: var(--sp-4); }

/* Restrained secondary navigation, added 15 Aug 2026. Shown only on the
   landing screen (see wireFooterLinks/siteFooter in app.js), deliberately
   quiet, small type, muted colour, so it reads as reference material at
   the bottom of the page, never competing with the primary CTA above it. */
.site-footer {
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-5);
  border-top: 1px solid var(--gold); /* one restrained "gold moment," per the brand pass's own "fine rules/dividers" guidance */
  text-align: center;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.site-footer nav a { font-size: 0.82rem; color: var(--muted); text-decoration: none; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--warm); text-decoration: underline; }
.site-footer-meta { font-size: 0.75rem; color: var(--muted); opacity: 0.7; }
.site-footer-meta a { color: var(--muted); text-decoration: underline; }
.site-footer-meta a:hover, .site-footer-meta a:focus-visible { color: var(--warm); }
/* Copyright notice, added 28 Aug 2026 (Final Customer-Facing Product &
   Conversion Pass): restrained, one small line, no visual weight of
   its own, sitting under the existing footer meta line. */
.site-footer-copyright { font-size: 0.7rem; color: var(--muted); opacity: 0.55; margin-top: 0.2em; }

/* ======================================================================
   Founder authority, added 24 Aug 2026 (Founder Authority & Trust
   Positioning pass). Green (--accent) for the name, gold (--warm) for
   the role line, per the founder's own request, both already-established
   design tokens, not new colours introduced for this pass.
   ====================================================================== */

/* Full About / Meet the Founder page (public/about.html) */
.founder-page { max-width: 760px; margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-6); }
.founder-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3); margin-bottom: var(--sp-6);
}
/* Full, uncropped photo (not a circle crop), added 24 Aug 2026: the
   founder's own photo, background and all, is shown in full, scaled to
   fit, never cropped, per her explicit correction. Centered with equal
   margins on both sides for page symmetry. */
.founder-photo {
  display: block;
  width: min(300px, 70vw);
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(20, 20, 19, 0.14);
  margin: 0 auto;
}
.founder-name { font-family: var(--serif); font-size: 1.9rem; color: var(--accent-strong); margin: 0; }
.founder-role {
  font-family: var(--sans); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm-strong);
  margin: 0.2em 0 0;
}
.founder-tagline { font-family: var(--sans); color: var(--ink-soft); font-size: 0.92rem; margin: 0.6em 0 0; max-width: 46ch; }
.founder-lede { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1rem; margin: 0.5em 0 0; max-width: 46ch; }
.founder-statement {
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.65; color: var(--ink);
  text-align: center; max-width: 62ch; margin: 0 auto var(--sp-7);
  padding: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.founder-section { padding: var(--sp-6) 0; border-top: 1px solid var(--line); max-width: 66ch; margin: 0 auto; }
.founder-section:first-of-type { border-top: none; padding-top: 0; }
.founder-section h2 { font-family: var(--serif); font-size: 1.25rem; color: var(--accent-strong); margin: 0 0 var(--sp-3); }
.founder-section p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; margin: 0; }
.founder-closing { margin-top: var(--sp-2); padding-top: var(--sp-6); border-top: 1px solid var(--line); text-align: center; }
.founder-closing p { max-width: 56ch; margin: 0 auto var(--sp-4); font-size: 1rem; color: var(--ink-soft); }
.founder-closing .founder-cta-link { display: inline-block; text-decoration: none; margin-bottom: var(--sp-5); }
.founder-disclaimer { font-size: 0.8rem; color: var(--muted); margin: 0 auto; max-width: 56ch; }

/* Compact founder block on the landing page, inside the existing
   "About Lead by Design" section, and inside the two report price-cta
   transitions. Deliberately small: a thumbnail, name/role, 2-3 lines,
   a link to the full page, never a second biography. */
.founder-mini { display: flex; gap: var(--sp-4); align-items: center; margin: var(--sp-4) 0; flex-wrap: wrap; }
.founder-mini-photo { width: 96px; height: auto; border-radius: var(--radius-md); flex: none; }
.founder-mini-copy { flex: 1 1 260px; }
.founder-mini-name { font-family: var(--serif); font-size: 1.05rem; color: var(--accent-strong); margin: 0; }
.founder-mini-role {
  font-family: var(--sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm-strong);
  margin: 0.15em 0 0.5em;
}
.founder-mini-copy p:last-child { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.founder-mini-copy a { color: var(--accent-strong); font-weight: 600; }
.founder-mini-punch {
  font-family: var(--serif); font-style: italic; color: var(--accent-strong);
  font-size: 0.95rem; margin: 0 0 0.6em;
}

/* One-line founder credit under the email capture form, and under each
   report price-cta transition. Small, quiet, never competing with the
   primary action above it. */
.founder-note { font-size: 0.8rem; color: var(--muted); margin-top: var(--sp-3); text-align: center; }
.founder-note a { color: var(--accent-strong); font-weight: 600; }
/* Reinforces the Read-vs-Insight product distinction at the exact
   decision point, added 28 Aug 2026 (Final Customer-Facing Commercial
   Pass), per the explicit "at the decision point itself, reinforce the
   distinction" guidance. Used once, only at the Relationship/Family
   Insight unlock moment, the one place a customer might reasonably
   wonder "didn't I already get a report?" */
.pc-distinction { font-size: 0.85rem; color: var(--muted); font-style: italic; margin-top: var(--sp-3); text-align: center; }

/* ======================================================================
   Coaching / "How I Can Help" page (public/coaching.html), added 24 Aug
   2026 (About, Founder Authority & Coaching Positioning refinement pass).
   The dedicated destination the About page's CTA now leads to, answering
   "how can this person help me" once "who is she" has been established.
   ====================================================================== */
.coach-page { max-width: 780px; margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-8); }
.coach-hero { text-align: center; margin-bottom: var(--sp-6); }
.coach-hero h1 { font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.3rem); margin: 0 0 var(--sp-3); color: var(--ink); }
.coach-hero p { color: var(--ink-soft); max-width: 56ch; margin: 0 auto; font-size: 1.02rem; line-height: 1.7; }
.coach-hero p.coach-hero-punch {
  font-family: var(--serif); font-style: italic; color: var(--accent-strong);
  font-size: 1.08rem; margin: var(--sp-3) auto 0; max-width: 46ch;
}

.coach-journey {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.coach-journey span.step {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--accent-strong); text-transform: uppercase;
}
.coach-journey span.arrow { color: var(--warm-strong); font-size: 1rem; font-weight: 700; }

.coach-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin: var(--sp-6) 0; }
.coach-card {
  padding: var(--sp-5); background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.coach-card h3 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 var(--sp-2); color: var(--ink); }
.coach-card .coach-why { font-size: 0.85rem; color: var(--muted); font-style: italic; margin: 0 0 var(--sp-3); line-height: 1.5; }
.coach-card ul { margin: 0 0 var(--sp-4); padding-left: 1.1em; color: var(--ink-soft); font-size: 0.92rem; display: flex; flex-direction: column; gap: 0.4em; }
.coach-card a.coach-link { font-size: 0.9rem; font-weight: 600; color: var(--accent-strong); text-decoration: none; }
.coach-card a.coach-link:hover, .coach-card a.coach-link:focus-visible { text-decoration: underline; }
@media (min-width: 640px) {
  .coach-grid { grid-template-columns: 1fr 1fr; }
}

.coach-scope { max-width: 62ch; margin: var(--sp-2) auto var(--sp-6); text-align: center; font-size: 0.85rem; color: var(--muted); }
.coach-closing { text-align: center; margin-top: var(--sp-2); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.coach-closing p { max-width: 52ch; margin: 0 auto var(--sp-4); color: var(--ink-soft); font-size: 1rem; }

@media (min-width: 640px) {
  .discover-grid { grid-template-columns: 1fr 1fr; }
}

/* ======================================================================
   Assessment
   ====================================================================== */
header.assess-header {
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-align: center;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
}
header.assess-header h1 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 var(--sp-1); }
header.assess-header p { color: var(--muted); margin: 0; font-size: 0.82rem; }

.progress-track {
  max-width: var(--content-w);
  margin: var(--sp-3) auto 0;
  height: 5px;
  background: var(--line);
  border-radius: 100px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  transition: width 0.35s ease;
}
.progress-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: var(--sp-2);
  letter-spacing: 0.03em;
}

.assess-wrap { max-width: var(--content-w); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }

.qcard {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.qtext {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  line-height: 1.4;
  margin-bottom: var(--sp-5);
  color: var(--ink);
}
.qhelp { font-size: 0.82rem; color: var(--muted); margin: -0.75rem 0 var(--sp-5); }

.opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--paper);
  transition: border-color 0.12s ease, background-color 0.12s ease;
  min-height: 44px;
}
.opt:hover { border-color: var(--line-strong); }
.opt.ranked { border-color: var(--accent); background: var(--accent-soft); }
.opt .rank-badge {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 0.76rem; font-weight: 700;
  color: var(--muted);
  background: var(--paper-raised);
}
.opt.ranked .rank-badge { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt .opt-text { font-size: 0.95rem; color: var(--ink-soft); }
.opt.ranked .opt-text { color: var(--ink); }

/* assessment_v0.3 (Most/Least), added 15 Aug 2026 (Assessment UX and
   Scoring Optimisation Workstream). A single-column list of chip pairs,
   not the reference competitor's wide two-column radio table
   (deliberately not copied, see CLAUDE.md): easier to scan and tap on
   a narrow mobile screen, and the two chips are mutually exclusive
   across the whole question by construction (selecting one disables
   the other chip on that same row, and clears any prior selection of
   the same role elsewhere via tapMostLeast's re-render). */
.ml-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.ml-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.ml-opt.is-most { border-color: var(--accent); background: var(--accent-soft); }
.ml-opt.is-least { border-color: var(--warm); background: var(--warm-soft); }
.ml-opt-text { font-size: 0.95rem; color: var(--ink-soft); flex: 1 1 220px; }
.ml-opt.is-most .ml-opt-text, .ml-opt.is-least .ml-opt-text { color: var(--ink); }
.ml-chips { display: flex; gap: var(--sp-2); flex: none; }
.ml-chip {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--muted);
  cursor: pointer;
  min-height: 36px;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.ml-chip:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink-soft); }
.ml-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.ml-chip-most[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ml-chip-least[aria-pressed="true"] { background: var(--warm); border-color: var(--warm); color: #fff; }

.assess-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-5); }

/* ---- email capture ---- */
.capture-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  text-align: left;
}
.capture-card h2 { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 var(--sp-2); }
.capture-card p { color: var(--muted); margin-bottom: var(--sp-4); }
#email-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
#email-form input {
  flex: 1 1 220px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--sans);
  min-height: 44px;
}
#email-form input:focus-visible { border-color: var(--accent); }
.capture-meta { font-size: 0.78rem; color: var(--muted); flex-basis: 100%; margin: 0; }
/* First name / surname row, added 28 Aug 2026 ("Final MVP Customer
   Experience" pass): its own nested flex row (not just another
   #email-form child) so the two name fields sit side by side on a
   wider screen and stack on mobile, without disturbing #email-form's
   own existing flex-wrap layout for the email field and the two meta/
   consent rows below it. */
.capture-name-row { display: flex; gap: var(--sp-2); flex-basis: 100%; flex-wrap: wrap; }
.capture-name-row input { flex: 1 1 140px; }

/* Invite flow's own name-capture step (invite.js's renderNameCapture),
   added 28 Aug 2026: reuses #email-form's input treatment on a form
   that isn't itself #email-form, since invite.js's flow never shows the
   email-capture screen at all. */
#name-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
#name-form input {
  flex: 1 1 220px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--sans);
  min-height: 44px;
}
#name-form input:focus-visible { border-color: var(--accent); }
/* Consent checkbox, added 15 Aug 2026 (consent architecture): a genuine,
   unticked opt-in for the 5-day email sequence, kept visually distinct
   from the required email field so it reads as optional, not as part of
   the same required action. flex-basis:100% forces it onto its own row
   inside #email-form's flex layout, same trick used for .capture-meta. */
.consent-check {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  accent-color: var(--accent);
  cursor: pointer;
}
#email-form button { flex-basis: 100%; }

/* ======================================================================
   Report experience (Free / Paid / Career)
   ====================================================================== */
.report { max-width: var(--report-w); margin: 0 auto var(--sp-8); }

.report-hero {
  background: var(--hero-bg);
  color: var(--hero-ink);
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.rh-eyebrow {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hero-accent); margin-bottom: var(--sp-3);
}
.rh-archetype {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  line-height: 1.15;
}
.rh-blend { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--hero-muted); margin-bottom: var(--sp-4); }
.rh-dek { font-size: 0.95rem; color: var(--hero-muted); max-width: 46ch; line-height: 1.6; }

/* "Save a Copy as PDF," Phase 7 (27 Aug 2026): a small, secondary,
   ghost-style action, deliberately not competing visually with the
   report's own commercial CTAs (.price-cta), which stay the only
   prominent buttons on the page. */
.pdf-save-btn {
  margin-top: var(--sp-4);
  background: transparent;
  border: 1px solid var(--hero-accent);
  color: var(--hero-accent);
  font-size: 0.82rem;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  width: auto;
}
.pdf-save-btn:hover, .pdf-save-btn:focus-visible { background: var(--hero-accent); color: var(--hero-bg); }

/* Print-only closing section (renderPdfClosingSection in app.js): a
   product-specific "where to go next" note that only makes sense on a
   saved/printed copy, since the on-screen page already has live,
   clickable CTAs (.price-cta, the Discovery grid) covering the same
   ground. Hidden on screen, revealed only under @media print below. */
.pdf-only-closing { display: none; }

/* In-report jump navigation (Strategy v8.5 Section 44.13, "section
   rhythm and navigation"), a native <details> so it needs no JS wiring
   and degrades cleanly, collapsed by default so it never competes with
   the hero. Only rendered for reports long enough to need it. */
.report-nav {
  margin: 0 var(--sp-4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.report-nav summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--accent-strong);
}
.report-nav summary::-webkit-details-marker { display: none; }
.report-nav summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s ease; }
.report-nav[open] summary::before { transform: rotate(90deg); }
.report-nav ul {
  list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-4);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-1);
}
.report-nav a {
  display: block; padding: var(--sp-1) 0; font-size: 0.85rem; color: var(--ink-soft); text-decoration: none;
}
.report-nav a:hover, .report-nav a:focus-visible { color: var(--accent-strong); text-decoration: underline; }
@media (min-width: 640px) {
  .report-nav ul { grid-template-columns: 1fr 1fr; }
}

.report-body { padding: var(--sp-6) var(--sp-4) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-4); }

/* Card treatment, added 14 Aug 2026 ("Next Build Workstream": UI
   redesign, "insight cards", "does not feel overwhelming"). Reports now
   run to 16-17 sections; a flat, divider-separated list read as one
   continuous wall once reports grew this long. Each section is now a
   distinct, subtly-elevated card, relying on .report-body's existing
   flex gap for spacing rather than a border-bottom divider. */
.rsection {
  padding: var(--sp-5);
  background: var(--paper-raised);
  border-radius: var(--radius-lg);
  border-left: 3px solid transparent;
  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.05);
}
.rsection h3 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 var(--sp-2); color: var(--ink); }
.rsection p { font-size: 0.98rem; margin: 0; color: var(--ink-soft); }
.rsection .rk-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.rsection.strength { border-left-color: var(--accent); }
.rsection.strength .rk-label { color: var(--accent-strong); }
.rsection.blindspot, .rsection.watchout { border-left-color: var(--warm); }
.rsection.blindspot .rk-label, .rsection.watchout .rk-label { color: var(--warm-strong); }
.rsection.pressure { border-left-color: var(--line-strong); }
.rsection.pressure .rk-label { color: var(--muted); }
.rsection.dynamic { border-left-color: var(--dynamic); background: var(--dynamic-soft); border-radius: var(--radius-md); padding: var(--sp-5); margin: var(--sp-2) 0; }
.rsection.dynamic h3 { color: var(--dynamic); font-size: 1.3rem; }
.rsection.action { border-left-color: var(--accent); }
.rsection.action .rk-label { color: var(--accent-strong); }
.rsection.explore { border-left-color: var(--accent); }

/* Report Depth workstream, 14 Aug 2026 */
.rsection.education {
  border-left-color: var(--muted);
  background: var(--paper);
}
.rsection.education .rk-label { color: var(--muted); }
.rsection.education p { color: var(--ink-soft); }
.rsection.thrive { border-left-color: var(--accent); }
.rsection.thrive .rk-label { color: var(--accent-strong); }
.rsection.friction { border-left-color: var(--warm); }
.rsection.friction .rk-label { color: var(--warm-strong); }
.rsection.reframe {
  border-left-color: var(--dynamic);
  background: var(--dynamic-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin: var(--sp-2) 0;
}
.rsection.reframe .rk-label { color: var(--dynamic); }
.rsection.reframe p { font-family: var(--serif); font-size: 1.05rem; }

.rsection.principle {
  border: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--sp-6) var(--sp-2); text-align: center; margin: var(--sp-2) 0;
  background: transparent; box-shadow: none; border-radius: 0;
}
.rsection.principle p { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); }

.rsection.glance { border: none; padding: 0 0 var(--sp-2); }
.rsection.glance p { font-size: 1.02rem; color: var(--ink); }

.rsection.cta {
  border: 1px solid var(--accent);
  border-left-width: 3px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.rsection.cta .rk-label { color: var(--accent-strong); }

/* role-family lists (Environments Worth Exploring) */
.rlist-group { margin-top: var(--sp-4); }
.rlist-group h4 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--sp-2);
}
.rlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rlist li {
  font-size: 0.92rem; color: var(--ink-soft);
  padding-left: var(--sp-4); position: relative;
}
.rlist li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.rlist.watch li::before { background: var(--warm); }

/* staged pressure-escalation sequence (Report Depth workstream) */
.stage-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.stage-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.stage-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; margin-top: 0.1em;
}
.stage-body h4 { font-family: var(--serif); font-size: 0.98rem; margin: 0 0 0.2em; color: var(--ink); }
.stage-body p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* "watch for this" / "why this matters" callouts (Report Depth workstream) */
.callout {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--paper); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout-label {
  display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 0.3em;
}
.callout p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.rsection.blindspot .callout, .rsection.watchout .callout, .rsection.friction .callout { border-left-color: var(--warm); }
.rsection.blindspot .callout-label, .rsection.watchout .callout-label, .rsection.friction .callout-label { color: var(--warm-strong); }

/* Reflection-question callouts ("Worth asking yourself"), added 14 Aug
   2026 (Strategy v8.5 Section 44.13): a question posed to the reader,
   set in italic serif rather than the sans fact-box style the other
   callouts use, so it reads as a prompt to sit with, not another data
   point. */
.callout.reflection {
  background: var(--dynamic-soft); border-left-color: var(--dynamic);
}
.callout.reflection .callout-label { color: var(--dynamic); }
.callout.reflection p { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink); }

/* Scenario callouts ("A moment this might look like"), added 14 Aug
   2026 ("Next Build Workstream": UI redesign). A small quote mark and
   serif body text set an illustrative scene apart from the sans
   fact-box style used for action-oriented callouts (Try this / Worth
   trying / What helps), without competing with the reflection-question
   treatment's colour. */
.callout.scenario {
  background: var(--paper); border-left-color: var(--line-strong);
  position: relative; padding-left: calc(var(--sp-4) + var(--sp-3));
}
.callout.scenario::before {
  content: "\201C"; position: absolute; left: var(--sp-3); top: 0.15em;
  font-family: var(--serif); font-size: 1.6rem; color: var(--line-strong); line-height: 1;
}
.callout.scenario .callout-label { color: var(--muted); }
.callout.scenario p { font-family: var(--serif); font-size: 0.96rem; color: var(--ink-soft); }

.table-wrap { overflow-x: auto; margin-top: var(--sp-4); }
.rtable { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.9rem; }
.rtable th, .rtable td { text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.rtable th { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* ---- price / CTA band ---- */
.price-cta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-5); margin: var(--sp-2) var(--sp-4) 0;
}
.price-cta .pc-copy { font-size: 0.95rem; color: var(--ink-soft); max-width: 34ch; }
.price-cta .pc-copy strong { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; display: block; margin-bottom: 0.2em; }
.price-cta .pc-action { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.price-cta .amt { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); }

/* Relationship Insight hub, added 27 Aug 2026: the invite form reuses
   #email-form's own input styling for visual consistency, but needs its
   own selector since it isn't #email-form (which is scoped to the
   assessment's own email-capture screen). */
.relationship-hub .pc-copy { max-width: 44ch; }

/* Restrained "see a sample" affordance, Commercial Conversion + Insight
   Samples pass, 28 Aug 2026: a small, quiet text link at the actual
   purchase-decision moment (the Insight invite/unlock hub), never a
   competing button. */
.sample-link { font-size: 0.82rem; color: var(--muted); margin: var(--sp-2) 0 0; }
.sample-link a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.sample-link a:hover, .sample-link a:focus-visible { text-decoration: underline; }

/* Fictional-sample disclaimer, same pass: sits above the report hero on
   the two standalone sample pages, gold top-rule per the brand pass's
   "gold for selected moments" guidance, since this is exactly that, a
   single, deliberate moment, not a recurring UI element. Placed BEFORE
   the sample so a reader's expectations are set before they read it,
   never after. */
.sample-disclaimer {
  max-width: var(--report-w);
  margin: var(--sp-6) auto var(--sp-4);
  padding: var(--sp-5);
  background: var(--paper-raised);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md);
  text-align: center;
}
.sample-disclaimer .sample-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--warm-strong); margin-bottom: var(--sp-3);
}
.sample-disclaimer p {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-soft);
  max-width: 60ch; margin: 0 auto; line-height: 1.6;
}
/* The first line ("This is an example of...") states the fact plainly,
   sans, not italic; the second line (the "psychological bridge",
   "Your own report is uniquely generated from...") keeps the emphasised
   serif italic treatment above, since that's the line doing the real
   commercial work. */
.sample-disclaimer-what {
  font-family: var(--sans) !important; font-style: normal !important; font-size: 0.92rem !important;
  color: var(--muted) !important; margin-bottom: var(--sp-2) !important;
}

/* Small, muted technical context (section count, "who this is written
   for"), deliberately placed BELOW the hero's emotional hook, never
   above it, per the "sample as conversion asset, not a brochure" brief. */
.sample-scope-note {
  max-width: var(--report-w);
  margin: var(--sp-3) auto 0;
  padding: 0 var(--sp-4);
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}
.ri-invite-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex: 1 1 260px; }
.ri-invite-form input {
  flex: 1 1 220px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--sans);
  min-height: 44px;
}
.ri-invite-form input:focus-visible { border-color: var(--accent); }

/* ---- Contextual Application Discovery, added 15 Aug 2026 ---- */
.discovery-section {
  margin: var(--sp-6) var(--sp-4) 0;
  padding: var(--sp-6) var(--sp-5);
  background: var(--paper-raised);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.discovery-section h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 var(--sp-2); }
.discovery-section > p { color: var(--muted); max-width: 62ch; margin-bottom: var(--sp-5); }
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.discovery-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.discovery-card h4 { font-family: var(--serif); font-size: 1.02rem; margin: 0; color: var(--ink); }
.discovery-questions { margin: 0; padding-left: 1.1em; font-size: 0.85rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.35em; }
.discovery-questions li { line-height: 1.35; }
.discovery-card button {
  margin-top: auto;
  font-size: 0.85rem;
  padding: 0.65rem 1rem;
  background: transparent;
  color: var(--warm); /* gold-family "invitation" treatment, per the brand pass's secondary/highlight CTA guidance; hover confirms with the primary green */
  border: 1.5px solid var(--gold);
}
.discovery-card button:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.discovery-card button:disabled { opacity: 0.6; cursor: default; background: transparent; color: var(--muted); border-color: var(--line-strong); }
/* Paid product CTAs (Career/Relationship/Family Design Read), made
   visually distinct from the quieter gold-outline capture-only buttons
   above, 28 Aug 2026 (Final Customer-Facing Product & Conversion Pass):
   a real, ready-to-purchase product needs to read differently from an
   exploratory "tell us you'd like help with this" button, previously
   they were identical. Solid Deep Green, the established primary-CTA
   treatment used everywhere else in the product (Unlock buttons, etc.),
   gold stays reserved for accents, never the fill colour here. */
.discovery-product-btn {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border-color: var(--accent) !important;
}
.discovery-product-btn:hover { background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; }
.discovery-done { margin-top: auto; font-size: 0.82rem; color: var(--muted); font-style: italic; }
.discovery-coaching {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.discovery-coaching h4 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 var(--sp-2); }
.discovery-coaching p { color: var(--ink-soft); max-width: 62ch; margin-bottom: var(--sp-3); font-size: 0.92rem; }

/* Journey-specific coaching capture, added 29 Aug 2026 ("Commercial
   Intelligence and Coaching Capture" pass), replacing the old single
   generic checkbox. */
.coaching-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.coaching-option-btn {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  min-height: 44px;
}
.coaching-option-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.coaching-option-btn.selected { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.coaching-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); max-width: 480px; }
.coaching-form[hidden] { display: none; }
.coaching-form-area { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); font-style: italic; }
.coaching-form input, .coaching-form textarea {
  flex: 1 1 220px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--sans);
  min-height: 44px;
}
.coaching-form textarea { flex-basis: 100%; resize: vertical; min-height: 70px; }
.coaching-form input:focus-visible, .coaching-form textarea:focus-visible { border-color: var(--accent); }
.coaching-form button[type="submit"] { flex-basis: 100%; }
.coaching-confirm { margin-top: var(--sp-3); font-size: 0.92rem; color: var(--accent-strong); }

/* Self-serve access-link recovery, added 29 Aug 2026 (final
   access-hardening pass). */
.recovery-form-wrap { max-width: 420px; margin: var(--sp-5) auto 0; text-align: left; }
.recovery-form-wrap h2 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 var(--sp-2); text-align: center; }
.recovery-form-wrap .capture-meta { text-align: center; margin-bottom: var(--sp-3); }
#recovery-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
#recovery-form input {
  flex: 1 1 220px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--sans);
  min-height: 44px;
}
#recovery-form input:focus-visible { border-color: var(--accent); }
.recovery-confirm { margin-top: var(--sp-3); font-size: 0.92rem; color: var(--accent-strong); text-align: center; }

/* ---- section entrance, subtle, guarded by reduced-motion above ---- */
.report-body .rsection {
  animation: rise 0.4s ease both;
}
.report-body .rsection:nth-child(1) { animation-delay: 0.02s; }
.report-body .rsection:nth-child(2) { animation-delay: 0.06s; }
.report-body .rsection:nth-child(3) { animation-delay: 0.1s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ======================================================================
   Responsive: mobile is the base; refine upward
   ====================================================================== */
@media (min-width: 700px) {
  .wrap, .assess-wrap, .intro { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .report-hero { padding: var(--sp-8) var(--sp-7) var(--sp-7); }
  .report-body { padding: var(--sp-7) var(--sp-6) var(--sp-2); }
  .qcard { padding: var(--sp-7) var(--sp-6); }
}

@media (max-width: 480px) {
  .price-cta { flex-direction: column; align-items: stretch; }
  .price-cta .pc-action { justify-content: space-between; }
  button { width: 100%; }
  .assess-nav button { width: auto; }
  .assess-nav { gap: var(--sp-3); }
}

/* ======================================================================
   Print ("Save a Copy as PDF," Phase 7, 27 Aug 2026): reuses the exact
   report DOM/CSS, no separate print-specific layout. Strips every
   interactive/commercial element (purchase CTAs, the Discovery grid,
   the two-person hub, in-page navigation, this feature's own button)
   and reveals the print-only "where to go next" closing note instead.
   Forces light backgrounds regardless of the viewer's OS/browser theme,
   since a printed page should never assume dark-mode ink levels, and
   removes the card shadows/animations that only make sense on screen.
   ====================================================================== */
@media print {
  .no-print, .report-nav, .price-cta, .founder-note, #relationship-hub, .discovery-section, button {
    display: none !important;
  }
  body, .report-hero { background: #fff !important; color: #111 !important; }
  .rh-eyebrow, .rh-blend { color: #444 !important; }
  .rsection {
    box-shadow: none !important;
    border: 1px solid #ccc;
    animation: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pdf-only-closing { display: block !important; border-color: #999; }
}

/* ======================================================================
   Blog, added 31 Aug 2026 (blog infrastructure build, Marketing
   Operating System). Server-rendered static pages, deliberately reusing
   .founder-page/.founder-section for the container and prose (identical
   typography to About/Coaching, nothing new invented there); this block
   covers only what's genuinely new: the index list and small article
   chrome (date label, back link).
   ====================================================================== */
.blog-page { }
.blog-hero { text-align: center; margin-bottom: var(--sp-6); }
.blog-hero h1 { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--accent-strong); margin: 0.2em 0 0; line-height: 1.25; }
.blog-card-date {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--warm); font-weight: 700;
}
.blog-back { display: inline-block; font-family: var(--sans); font-size: 0.88rem; color: var(--accent-strong); text-decoration: none; margin-bottom: var(--sp-5); }
.blog-back:hover { text-decoration: underline; }
.blog-index { display: flex; flex-direction: column; gap: var(--sp-5); }
.blog-card {
  display: block; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper-raised); text-decoration: none; transition: border-color 0.15s ease;
}
.blog-card:hover { border-color: var(--accent); }
.blog-card h2 { font-family: var(--serif); font-size: 1.2rem; color: var(--accent-strong); margin: 0.4em 0 0.3em; }
.blog-card p { font-family: var(--sans); color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.blog-article-body .founder-section:first-of-type { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.blog-closing { text-align: center; }
.blog-closing .founder-cta-link { display: inline-block; text-decoration: none; margin-top: var(--sp-4); }