/* ======================================================================
   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;

  --accent: #1B5750;
  --accent-strong: #123B36;
  --accent-soft: #E3EEEB;
  --accent-soft-text: #144742;

  --warm: #93611F;
  --warm-soft: #F2E8D6;
  --warm-strong: #6E4A18;

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

  --hero-bg: #16211D;
  --hero-ink: #F2EFE6;
  --hero-muted: #A9C4BC;
  --hero-accent: #7FD8C4;

  /* ---- 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); }

/* 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(--mono); font-size: 0.72rem; letter-spacing: 0.14em; 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(--line);
  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(--accent); 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(--accent); }

/* ======================================================================
   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; }

/* ======================================================================
   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; }
/* 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; }

/* 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; }
.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(--accent);
  border: 1.5px solid var(--accent);
}
.discovery-card button:hover { background: var(--accent); color: var(--paper); }
.discovery-card button:disabled { opacity: 0.6; cursor: default; background: transparent; color: var(--muted); border-color: var(--line-strong); }
.discovery-career-btn { background: var(--accent) !important; color: var(--paper) !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; }

/* ---- 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); }
}