/* Zeggio site styles. Every color, space, radius and font comes from tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/28px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--text-strong); font-family: var(--font-display); text-wrap: balance; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 100; background: var(--surface); padding: var(--space-2) var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(72rem + 2 * var(--space-6));
  margin-inline: auto;
  padding-left: max(var(--space-6), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
}
@media (max-width: 640px) {
  .container { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
}
.section { padding-block: var(--space-24); }
@media (max-width: 640px) { .section { padding-block: var(--space-16); } }
.ground-panel { background: var(--panel); }
.ground-surface { background: var(--surface); }
.ground-band { background: var(--band); color: var(--on-band); position: relative; overflow: hidden; }
.ground-band h1, .ground-band h2, .ground-band h3 { color: var(--on-band); }
.ground-band a:not(.btn) { color: var(--on-band-link); }
.ground-band .eyebrow { color: var(--cobalt-300); }
.ground-band .lead, .ground-band p { color: var(--on-band); }

.stack > * + * { margin-top: var(--space-4); }
.measure { max-width: 38rem; }
.section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-12); max-width: 44rem; }
.section-head .lead { margin-top: var(--space-2); }

/* ---------- Type styles ---------- */
.display { font: 600 64px/64px var(--font-display); letter-spacing: -0.5px; }
.h1 { font: 600 48px/52px var(--font-display); }
.h2 { font: 600 36px/40px var(--font-display); }
.h3 { font: 500 24px/30px var(--font-display); }
.eyebrow { font: 500 14px/20px var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); }
.lead { font: 400 21px/32px var(--font-sans); color: var(--text); }
.small { font: 400 14px/20px var(--font-sans); }
.muted { color: var(--text-muted); }
.quote { font: italic 400 26px/34px var(--font-serif); }
@media (max-width: 640px) {
  .display { font-size: 40px; line-height: 42px; }
  .h1 { font-size: 34px; line-height: 38px; }
  .h2 { font-size: 28px; line-height: 32px; }
  .lead { font-size: 19px; line-height: 29px; }
  .quote { font-size: 22px; line-height: 30px; }
}
.hl {
  background: linear-gradient(to bottom, transparent 54%, var(--highlight) 54%, var(--highlight) 90%, transparent 90%);
  padding: 0 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ground-band .hl { color: var(--on-highlight); background: var(--highlight); padding: 0 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 600 16px/20px var(--font-sans);
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 0; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease;
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn-inverse { background: var(--on-band); color: var(--band); }
.btn-inverse:hover { background: var(--cobalt-050); color: var(--band); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: 17px; }
.link-strong { font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-8); }

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
.brand-link { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-strong); }
.brand-link svg { width: 28px; height: 32px; fill: var(--cobalt); }
.brand-link .wordmark { font: 500 28px/1 var(--font-display); letter-spacing: 2px; color: var(--navy); }
.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.site-nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.btn) { color: var(--text-strong); text-decoration: none; font: 500 16px/20px var(--font-sans); padding-block: var(--space-2); border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--text-strong); }
.nav-toggle { display: none; }
@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    color: var(--text-strong); font: 600 15px/20px var(--font-sans); padding: var(--space-2) var(--space-3); min-height: 44px; cursor: pointer;
  }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-6) max(var(--space-4), env(safe-area-inset-left, 0px)); }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a:not(.btn) { display: block; padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
  .site-header .container { position: relative; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-link .wordmark { color: var(--text-strong); } }
:root[data-theme="dark"] .brand-link .wordmark { color: var(--text-strong); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-16) var(--space-24); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.hero-copy .lead { max-width: 34rem; }
.hero-art { min-width: 0; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-block: var(--space-12) var(--space-16); } }

/* ---------- Diagrams (inline SVG) ---------- */
.diagram { width: 100%; height: auto; display: block; }
.dg-node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 4; }
.dg-node-on { fill: var(--cobalt-100); stroke: var(--brand); stroke-width: 5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg-node-on { fill: var(--surface); } }
:root[data-theme="dark"] .dg-node-on { fill: var(--surface); }
.dg-core { fill: var(--highlight); }
.dg-broken { stroke: var(--coral-500); stroke-width: 4; stroke-dasharray: 6 6; }
.dg-link { stroke: var(--brand); stroke-width: 5; }
.dg-x { font: 600 26px var(--font-display); fill: var(--danger); }
.dg-label { font: 500 17px var(--font-display); fill: var(--text-strong); }
.dg-tag { font: 500 13px var(--font-display); letter-spacing: 1.4px; fill: var(--text-muted); }
.dg-side { stroke: var(--brand); stroke-width: 10; }
.dg-side-key { stroke: var(--highlight); stroke-width: 10; }
.dg-you { font: 600 15px var(--font-display); letter-spacing: 1.4px; fill: var(--on-highlight); }
.dg-side-label { font: 500 19px var(--font-display); fill: var(--text-strong); }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.card .icon { width: 48px; height: 48px; margin-bottom: var(--space-2); }
.card p { color: var(--text); }
.card .more { margin-top: auto; padding-top: var(--space-3); font-weight: 600; }
.icon { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; }
.icon .f { fill: var(--highlight); stroke: none; }

/* ---------- Split (text + aside) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: var(--space-12); } }

/* ---------- Hex list ---------- */
.hex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.hex-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.hex-list li::before {
  content: ""; width: 14px; height: 16px; margin-top: 6px;
  background: var(--brand);
  -webkit-mask: url("../img/hex-bullet.svg") center / contain no-repeat; mask: url("../img/hex-bullet.svg") center / contain no-repeat;
}
.ground-band .hex-list li::before { background: var(--cobalt-300); }
.hex-list strong { color: var(--text-strong); font-weight: 600; }
.ground-band .hex-list strong { color: var(--on-band); }

/* ---------- Results ---------- */
.results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 960px) { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.results.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .results, .results.two { grid-template-columns: 1fr; } }
.result { border-top: 1px solid var(--line); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.result .figure { font: 600 56px/56px var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.result .figure span { background: linear-gradient(to bottom, transparent 70%, var(--highlight) 70%, var(--highlight) 92%, transparent 92%); }
.result .who { font: 400 14px/20px var(--font-sans); color: var(--text-muted); }

/* ---------- Quote ---------- */
.pull { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-6); align-items: start; max-width: 52rem; }
.pull svg { width: 34px; height: 39px; fill: var(--brand); margin-top: 6px; }
.pull blockquote { margin: 0; color: var(--text-strong); }
.pull cite { display: block; margin-top: var(--space-4); font: normal 500 14px/20px var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); }
.ground-band .pull svg { fill: var(--cobalt-300); }
.ground-band .pull blockquote { color: var(--on-band); }
.ground-band .pull cite { color: var(--cobalt-300); }

/* ---------- Differentiators ---------- */
.diff { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); align-items: center; }
@media (max-width: 960px) { .diff { grid-template-columns: 1fr; } }
.diff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); list-style: none; margin: 0; padding: 0; }
@media (max-width: 560px) { .diff-list { grid-template-columns: 1fr; } }
.diff-list li { display: flex; flex-direction: column; gap: var(--space-1); border-top: 1px solid var(--line); padding-top: var(--space-3); min-width: 0; }
.diff-list li.key { border-top: 3px solid var(--highlight); padding-top: calc(var(--space-3) - 2px); }
.diff-list h3 { font: 500 22px/28px var(--font-display); }
.diff-list a { font-weight: 600; font-size: 15px; }
@media (max-width: 480px) { .diff-art { display: none; } }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); position: relative; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.steps li { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.step-hex { width: 56px; height: 64px; }
.step-hex polygon { fill: none; stroke: var(--cobalt-300); stroke-width: 3.5; }
.step-hex text { font: 600 26px var(--font-display); fill: var(--on-band); }
.steps h3 { margin-top: var(--space-2); font: 500 24px/30px var(--font-display); }
.steps p { max-width: 30ch; }

/* ---------- Textures ---------- */
.hexgrid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hexgrid circle { fill: var(--on-band); fill-opacity: .12; }
.ground-band > .container { position: relative; }
.honeycomb { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 300px; height: auto; pointer-events: none; }
.honeycomb .cell { fill: none; stroke: var(--on-band); stroke-opacity: .28; stroke-width: 5; }
.honeycomb .fill { fill: var(--highlight); }
@media (max-width: 960px) { .honeycomb { display: none; } }

/* ---------- CTA band ---------- */
.cta-band .container { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.cta-band .lead { max-width: 36rem; }

/* ---------- GHL embed slots ---------- */
.embed {
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-raise);
  padding: var(--space-6); min-height: 200px; color: var(--text);
}
.embed iframe { width: 100%; border: 0; display: block; }
.embed-placeholder { border: 2px dashed var(--line-strong); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.embed-placeholder code { font-size: 14px; background: var(--panel); padding: 2px 6px; border-radius: var(--radius-sm); }

/* ---------- About ---------- */
.portrait { position: relative; max-width: 360px; }
.portrait .hexframe { width: 100%; height: auto; }
.portrait .hexframe .ring { fill: none; stroke: var(--brand); stroke-width: 6; }
.portrait .hexframe .ph { fill: var(--panel); }
.portrait .hexframe text { font: 500 16px var(--font-sans); fill: var(--text-muted); }
.signature { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-6); }
.signature strong { font: 600 22px/28px var(--font-display); color: var(--text-strong); }
.prose { max-width: 38rem; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--on-band); padding-block: var(--space-16) var(--space-8); }
.site-footer a { color: var(--on-band-link); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-12); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-brand svg { width: 28px; height: 32px; fill: var(--on-band); }
.footer-brand p { color: var(--cobalt-100); max-width: 24rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-h { font: 500 14px/20px var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cobalt-300); margin-bottom: var(--space-3); }
.footer-legal { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--navy-400); display: flex; flex-direction: column; gap: var(--space-3); color: var(--cobalt-100); }
.footer-legal p { font: 400 13px/20px var(--font-sans); max-width: 60rem; }
.site-footer .embed-placeholder { border-color: var(--navy-400); }
.site-footer .embed-placeholder code { background: var(--band); color: var(--on-band); }
.split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 880px) { .split-5-7 { grid-template-columns: 1fr; } }

/* Highlighter: never split, and in dark mode a full marker block with dark text */
.hl { white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl,
  :root:not([data-theme="light"]) .result .figure span { background: var(--highlight); color: var(--on-highlight); padding: 0 6px; }
}
:root[data-theme="dark"] .hl,
:root[data-theme="dark"] .result .figure span { background: var(--highlight); color: var(--on-highlight); padding: 0 6px; }

/* ======================================================================
   Home v2 (2026-11-10): handoff hero, symptom map, blueprint hexagon
   ====================================================================== */
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.cta-band .cta-stack { margin-top: var(--space-2); }

/* Hero handoff chain */
.handoff { max-width: 480px; margin-inline: auto; }
.dg-pass { stroke: var(--line-strong); stroke-width: 4; }
.dg-note { font: italic 400 19px var(--font-serif); fill: var(--danger); }
.dg-label-lg { font-size: 22px; }

/* Long-form story text in the serif */
.article p { font: 400 19px/31px var(--font-serif); }

/* Symptom map */
.symptom-map { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
.symptom-art { position: sticky; top: 104px; }
@media (max-width: 880px) { .symptom-map { grid-template-columns: 1fr; } .symptom-art { display: none; } }
.symptoms details { border-top: 1px solid var(--line); }
.symptoms details:last-child { border-bottom: 1px solid var(--line); }
.symptoms summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 18px minmax(0, 1fr) 20px; gap: var(--space-3); align-items: center;
  padding: var(--space-4) 0; font: 500 22px/28px var(--font-display); color: var(--text-strong);
}
.symptoms summary::-webkit-details-marker { display: none; }
.symptoms summary::before {
  content: ""; width: 14px; height: 16px; background: var(--brand);
  -webkit-mask: url("../img/hex-bullet.svg") center / contain no-repeat; mask: url("../img/hex-bullet.svg") center / contain no-repeat;
}
.symptoms summary::after { content: "+"; font: 400 24px/1 var(--font-sans); color: var(--brand); text-align: right; }
.symptoms details[open] summary::after { content: "−"; }
.symptoms details[open] summary::before { background: var(--text-strong); }
.symptoms summary:hover { color: var(--brand); }
.symptom-body { padding: 0 0 var(--space-6) calc(18px + var(--space-3)); display: flex; flex-direction: column; gap: var(--space-3); max-width: 40rem; }
.fixes { font: 500 16px/24px var(--font-display); color: var(--text-strong); }
.fixes span { display: block; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
.symptom-close { margin-top: var(--space-12); max-width: 40rem; color: var(--text-strong); }

/* Nobody's job band */
.roles { max-width: 46rem; gap: var(--space-4); }
.band-aside { margin-top: var(--space-8); max-width: 40rem; }
.moved { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,.2); max-width: 46rem; display: flex; flex-direction: column; gap: var(--space-3); }

/* Blueprint hexagon */
.bp-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
@media (max-width: 960px) { .bp-grid { grid-template-columns: 1fr; } .bp-art { max-width: 560px; } }
.bp-h { font: 500 14px/20px var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.bp-h:not(:first-child) { margin-top: var(--space-8); }
.bp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bp-list li { padding-left: var(--space-4); border-left: 3px solid var(--brand); }
.bp-list li strong { color: var(--text-strong); }
.bp-list li a { font-weight: 600; font-size: 15px; white-space: nowrap; }
.bp-list:nth-of-type(2) li { border-left-color: var(--text-strong); }
.bp-result { margin-top: var(--space-8); }
.bp-result li { border-left-color: var(--highlight); }
.bp-close { margin-top: var(--space-12); max-width: 44rem; color: var(--text-strong); }

.bp .bp-side { transition: fill .2s; }
.bp .bp-in { fill: var(--brand); }
.bp .bp-bridge { fill: var(--text-strong); }
.bp .bp-label { font: 500 22px var(--font-display); fill: var(--text-strong); transition: fill .2s; }
.bp .bp-core polygon { fill: var(--highlight); transition: fill .2s; }
.bp .bp-core text { font: 600 17px var(--font-display); letter-spacing: 1.6px; fill: var(--on-highlight); }
.bp .bp-out line { stroke: var(--text-strong); stroke-width: 4; }
.bp .bp-out polygon { fill: var(--text-strong); }
.bp.has-active .bp-side:not(.is-on) { fill: var(--line); }
.bp.has-active .bp-label:not(.is-on) { fill: var(--text-muted); }
.bp.has-active .bp-label.is-on { font-weight: 600; }
.bp.has-active .bp-core:not(.is-on) polygon { fill: var(--line); }
.bp.has-active .bp-core:not(.is-on) text { fill: var(--text-muted); }
.bp.has-active .bp-out:not(.is-on) line { stroke: var(--line); }
.bp.has-active .bp-out:not(.is-on) polygon { fill: var(--line); }
.bp.has-active .bp-out:not(.is-on) .bp-label { fill: var(--text-muted); }

/* What you get */
.hex-list.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); }
@media (max-width: 640px) { .hex-list.two-col { grid-template-columns: 1fr; } }

/* After the blueprint */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* Book + bio */
.book-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-12); align-items: start; }
.book-cover { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-raise); background: #fff; }
.bio { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.bio svg { width: 24px; height: 28px; fill: var(--brand); }
@media (max-width: 1040px) { .book-grid { grid-template-columns: 180px minmax(0, 1fr); } .bio { grid-column: 1 / -1; max-width: 40rem; } }
@media (max-width: 560px) { .book-grid { grid-template-columns: 1fr; } .book-cover { max-width: 180px; } }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; font: 500 21px/28px var(--font-display); color: var(--text-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--font-sans); color: var(--brand); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--space-6); max-width: 38rem; }

/* ======================================================================
   Book page (2026-11-10)
   ====================================================================== */
.book-sub { font: italic 400 24px/32px var(--font-serif); color: var(--text-strong); max-width: 30rem; }
.book-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.book-figure .book-cover { max-width: 340px; }
@media (max-width: 960px) { .book-figure { align-items: flex-start; } .book-figure .book-cover { max-width: 220px; } }
.parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 960px) { .parts { grid-template-columns: 1fr; } }
.part { border-top: 1px solid var(--line); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.part-key { border-top: 3px solid var(--highlight); padding-top: calc(var(--space-4) - 2px); }
.part-n { font: 500 14px/20px var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); }
.problems { list-style: none; margin: var(--space-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.problems li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: center; font: 500 20px/26px var(--font-display); color: var(--text-strong); }
.problems .step-hex { width: 36px; height: 41px; }
.problems .step-hex polygon { stroke: var(--brand); stroke-width: 4; }
.problems .step-hex text { fill: var(--text-strong); font-size: 28px; }
.card .hex-list { margin-top: var(--space-2); }
.not-for { margin-top: var(--space-12); max-width: 46rem; display: flex; flex-direction: column; gap: var(--space-4); }
.section-tight { padding-block: var(--space-12); }
.bonus-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.bonus-row .stack { max-width: 40rem; }

/* ======================================================================
   Home v2.1 (2026-11-10): livelier sections
   ====================================================================== */
/* Sticky note beside the story */
.note { margin-top: var(--space-8); background: var(--marigold-100); color: var(--on-highlight); padding: var(--space-6); border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(24,34,61,.08), 0 10px 20px -12px rgba(24,34,61,.35); max-width: 22rem; position: relative; }
.note::before { content: ""; position: absolute; left: var(--space-6); top: -8px; width: 56px; height: 16px; background: var(--marigold-400); opacity: .8; }
.note p { font: italic 400 22px/30px var(--font-serif); color: var(--on-highlight); }
@media (max-width: 880px) { .note { margin-top: var(--space-6); } }

/* Symptom map: coral marks the problem, teal marks the fix */
.symptoms details[open] summary::before { background: var(--coral-500); }
.fixes { padding-left: var(--space-3); border-left: 3px solid var(--teal-500); }
.fixes span { color: var(--success); }

/* Nobody's job: copy + gap diagram */
.job-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
@media (max-width: 960px) { .job-grid { grid-template-columns: 1fr; } .job-art { max-width: 420px; } }
.moved { border-top-color: var(--line); }
.gap-role { fill: var(--surface); stroke: var(--line-strong); stroke-width: 4; stroke-linejoin: miter; }
.gap-label { font: 500 21px var(--font-display); fill: var(--text-strong); }
.gap-hole { fill: none; stroke: var(--coral-500); stroke-width: 4; stroke-dasharray: 10 8; }
.gap-hole-label { font: 600 17px var(--font-display); letter-spacing: 1.6px; fill: var(--danger); }
.gap-note { font: italic 400 24px var(--font-serif); fill: var(--danger); }
.gap-arrow { fill: none; stroke: var(--danger); stroke-width: 2.5; }

/* Before / after pair */
.before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 560px) { .before-after { grid-template-columns: 1fr; } }
.ba { padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); font: 500 19px/26px var(--font-display); color: var(--on-highlight); }
.ba span { display: block; font: 600 13px/20px var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: var(--space-1); }
.ba-before { background: var(--coral-100); } .ba-before span { color: var(--coral-800); }
.ba-after { background: var(--teal-100); } .ba-after span { color: var(--teal-800); }

/* Steps on a light ground */
.steps-light .step-hex polygon { stroke: var(--brand); }
.steps-light .step-hex text { fill: var(--text-strong); }
.get-block { margin-top: var(--space-24); padding-top: var(--space-16); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .get-block { margin-top: var(--space-16); padding-top: var(--space-12); } }

/* Results on the navy band */
.results-band .result { border-top-color: rgba(255,255,255,.25); }
.results-band .result .figure { color: var(--on-band); font-size: 72px; line-height: 72px; }
.results-band .result p { color: var(--on-band); }
.results-band .result .who { color: var(--cobalt-100); }
.results-note { margin-top: var(--space-8); color: var(--cobalt-100); }
.bp-grid { align-items: start; }
.bp-art { position: sticky; top: 112px; }
@media (max-width: 960px) { .bp-art { position: static; } }
/* GHL forms render on white, so keep their card white in dark mode too */
.embed:has(iframe) { background: #fff; padding: var(--space-4); }

/* ======================================================================
   Blog, legal and contact (2026-11-10)
   ====================================================================== */
.post-head { padding-block: var(--space-16) var(--space-8); }
.post-head .container { max-width: calc(46rem + 2 * var(--space-6)); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.post-head .eyebrow a { color: inherit; text-decoration: none; }
.post-head .eyebrow a:hover { color: var(--brand); }
.post-title { font: 600 30px/36px var(--font-display); }
@media (min-width: 641px) { .post-title { font-size: 48px; line-height: 52px; } }
.post-dek { color: var(--text-muted); }
.post-meta { font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.post-body, .post-author { max-width: 46rem; margin-inline: auto; }
.post-body { padding-bottom: var(--space-12); }
.post-body > * + * { margin-top: var(--space-6); }
.post-body p, .post-body li { font: 400 19px/31px var(--font-serif); color: var(--text); }
.post-body h2 { font: 600 30px/36px var(--font-display); margin-top: var(--space-12); }
.post-body h3 { font: 500 24px/30px var(--font-display); margin-top: var(--space-8); color: var(--text-strong); }
.post-body ul, .post-body ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.post-body blockquote { margin: 0; padding-left: var(--space-6); border-left: 3px solid var(--highlight); }
.post-body blockquote p { font-style: italic; font-size: 22px; line-height: 32px; color: var(--text-strong); }
.post-author { margin-bottom: var(--space-24); }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 960px) { .post-list { grid-template-columns: 1fr; } }
.post-list-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
@media (max-width: 760px) { .post-list-all { grid-template-columns: 1fr; } }
.post-card { border-top: 3px solid var(--brand); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.post-card h3 { font: 600 26px/32px var(--font-display); }
.post-card h3 a { color: var(--text-strong); text-decoration: none; }
.post-card h3 a:hover { color: var(--brand); text-decoration: underline; }
.blog-index { padding-top: var(--space-8); }

.legal-body { max-width: 46rem; }
.legal-body > * + * { margin-top: var(--space-4); }
.legal-body h2 { font: 600 24px/30px var(--font-display); margin-top: var(--space-12); }
.legal-body h3 { font: 500 20px/26px var(--font-display); margin-top: var(--space-8); color: var(--text-strong); }
.legal-body p, .legal-body li { font-size: 16px; line-height: 26px; }
.legal-body ul { padding-left: 1.4em; }
.legal-body table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 20px; display: block; overflow-x: auto; }
.legal-body td { border: 1px solid var(--line); padding: var(--space-2) var(--space-3); vertical-align: top; }
.legal-body [id] { scroll-margin-top: 96px; }
.contact-cards .card p .btn { margin-top: var(--space-2); }
.blog-head { padding-bottom: 0; }