/* =========================================================
   MUM SHIFT V2 — shared stylesheet
   Editorial thought-leadership system.
   Palette: forest green / cream / terracotta.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- color tokens --- */
  --forest-950:#243329;   /* deepest bg — nav, footer — warm deep sage-forest, not near-black */
  --forest-900:#35473c;   /* primary dark section bg — provisional, swap here if a different candidate is preferred */
  --forest-700:#435649;   /* raised panels on dark */
  --sage-500:#7c9585;     /* muted green accent — "capacity" line, secondary ink on dark */
  --cream-100:#f6f1e6;    /* primary light section bg */
  --cream-50:#fbf8f1;     /* card bg on cream */
  --clay-600:#a65b42;     /* terracotta — primary accent, CTA (buttons: cream text on this bg, 4.7:1, fine) */
  --clay-700:#8c4a35;     /* terracotta hover */
  --clay-on-dark:#cf8a68; /* lighter terracotta for TEXT on dark backgrounds (eyebrows/labels) — 4.7:1 vs forest-950, the base --clay-600 only hits 2.7:1 there and fails WCAG AA */
  --sage-500:#7c9585;     /* muted green accent — chart lines/fills (decorative, not text-contrast constrained) */
  --sage-on-dark:#9db5a4; /* lighter sage for TEXT on dark (radar legend labels) — 4.5:1 vs forest-900, base sage-500 only hits 3.1:1 */
  --ink-900:#1c2620;      /* body text on cream */
  --ink-600:#4d5850;      /* secondary text on cream */
  --paper-100:#f1eee2;    /* body text on dark */
  --paper-500:#a9b3a9;    /* secondary text on dark */
  --line-on-cream:rgba(28,38,32,0.12);
  --line-on-dark:rgba(241,238,226,0.14);

  /* --- type --- */
  --font-display:'Newsreader', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- layout --- */
  --wrap:1180px;
  --radius:2px; /* deliberately near-square — editorial, not app-like */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream-100);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 20px}}

/* --- typography --- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.08;margin:0;letter-spacing:-0.01em}
h1{font-size:clamp(2.4rem,5vw,4rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
p{margin:0 0 1em;color:inherit}
.section-dark p, .section-dark li{color:var(--paper-500)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:600;color:var(--clay-600);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--clay-600)}
.section-dark .eyebrow, .section-deep .eyebrow, .hero .eyebrow{color:var(--clay-on-dark)}
.section-dark .eyebrow::before, .section-deep .eyebrow::before, .hero .eyebrow::before{background:var(--clay-on-dark)}

.lede{font-size:1.05rem;color:var(--ink-600);max-width:52ch}
.section-dark .lede{color:var(--paper-500)}

/* --- sections --- */
section{padding:96px 0}
@media (max-width:720px){section{padding:64px 0}}
.section-dark{background:var(--forest-900);color:var(--paper-100)}
.section-deep{background:var(--forest-950);color:var(--paper-100)}
.section-cream{background:var(--cream-100)}
.rule{border:0;border-top:1px solid var(--line-on-cream);margin:0}
.section-dark .rule{border-top:1px solid var(--line-on-dark)}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;font-size:0.92rem;font-weight:600;
  border-radius:var(--radius);border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  cursor:pointer;
}
.btn-primary{background:var(--clay-600);color:var(--cream-50)}
.btn-primary:hover{background:var(--clay-700)}
.btn-ghost{border-color:currentColor;background:transparent}
.section-cream .btn-ghost{color:var(--ink-900)}
.section-dark .btn-ghost, .section-deep .btn-ghost{color:var(--paper-100)}
.btn-ghost:hover{background:rgba(0,0,0,0.05)}
.section-dark .btn-ghost:hover,.section-deep .btn-ghost:hover{background:rgba(255,255,255,0.08)}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}
.text-link{font-weight:600;color:var(--clay-600);display:inline-flex;align-items:center;gap:6px}
.section-dark .text-link, .section-deep .text-link{color:var(--clay-on-dark)}
.text-link .arr{transition:transform .15s ease}
.text-link:hover .arr{transform:translateX(3px)}

/* =========================================================
   HEADER / NAV
   ========================================================= */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--forest-950);
  border-bottom:1px solid var(--line-on-dark);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand .wordmark{font-family:var(--font-display);font-size:1.4rem;color:var(--paper-100)}
.brand .tagline{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--paper-500);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.nav-links a{
  font-size:0.82rem;letter-spacing:0.04em;text-transform:uppercase;font-weight:600;
  color:var(--paper-500);padding:6px 0;border-bottom:1px solid transparent;
}
.nav-links a:hover,.nav-links a.active{color:var(--paper-100);border-color:var(--clay-600)}
.nav-right{display:flex;align-items:center;gap:22px}
.lang-switch{display:flex;gap:10px;font-size:0.75rem;color:var(--paper-500);letter-spacing:0.04em}
.lang-switch a.active{color:var(--paper-100)}
.menu-btn{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:6px}
.menu-btn span{width:22px;height:1.5px;background:var(--paper-100)}
.mobile-cta{display:none}

@media (max-width:920px){
  .nav-links{position:fixed;inset:64px 0 0 0;background:var(--forest-950);flex-direction:column;align-items:flex-start;padding:28px 24px;gap:22px;display:none}
  .nav-links.open{display:flex}
  .menu-btn{display:flex}
  .nav-right .btn-primary{display:none}
  .mobile-cta{display:flex}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{background:var(--forest-950);color:var(--paper-100);padding:88px 0 100px}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center}
.hero h1{color:var(--paper-100)}
.hero .lede{color:var(--paper-500);margin:22px 0 34px;max-width:46ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{display:flex;justify-content:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}.hero-visual{order:-1}}

/* Demand/Capacity/Margin diagram */
.dcm-diagram{width:100%;max-width:420px}

/* =========================================================
   SEVEN SYSTEMS GRID
   ========================================================= */
.systems-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-on-cream);border:1px solid var(--line-on-cream);margin-top:48px}
.system-card{background:var(--cream-50);padding:28px 24px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.system-card .num{font-family:var(--font-display);font-size:0.85rem;color:var(--clay-600)}
.system-card h4{font-size:1.02rem;margin-top:14px}
.system-card.wide{grid-column:span 2}
@media (max-width:920px){.systems-grid{grid-template-columns:repeat(2,1fr)}.system-card.wide{grid-column:span 2}}
@media (max-width:560px){.systems-grid{grid-template-columns:1fr}.system-card.wide{grid-column:span 1}}

/* =========================================================
   METHOD (dark, force blocks)
   ========================================================= */
.forces{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px}
.force{border-top:1px solid var(--line-on-dark);padding-top:20px}
.force .fnum{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--sage-on-dark)}
.force h3{margin-top:10px;color:var(--paper-100)}
@media (max-width:720px){.forces{grid-template-columns:1fr}}
.eqbar{margin-top:56px;padding-top:40px;border-top:1px solid var(--line-on-dark);text-align:left}
.punch{font-family:var(--font-display);font-size:1.5rem;color:var(--paper-100);max-width:34ch}

/* =========================================================
   DASHBOARD PRODUCT SECTION
   ========================================================= */
.dash-preview{
  background:var(--forest-700);border:1px solid var(--line-on-dark);
  padding:28px;font-family:var(--font-body);
}
.dash-preview table{width:100%;border-collapse:collapse;font-size:0.85rem}
.dash-preview th{text-align:left;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--paper-500);padding-bottom:12px;font-weight:600}
.dash-preview td{padding:10px 0;border-top:1px solid var(--line-on-dark);color:var(--paper-100)}
.dash-preview td.pressure{color:var(--clay-on-dark)}
.dash-preview td.margin{color:var(--sage-on-dark)}
.dash-note{font-size:0.8rem;color:var(--paper-500);margin-top:18px}

/* =========================================================
   LEADERSHIP SKILLS
   ========================================================= */
.skills-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}
.skill-item .skill-num{font-family:var(--font-display);color:var(--clay-on-dark);font-size:1rem}
.skill-item h4{margin-top:10px}
@media (max-width:720px){.skills-list{grid-template-columns:1fr}}

/* =========================================================
   IDEAS CARDS
   ========================================================= */
.ideas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.idea-card{border-top:1px solid var(--line-on-cream);padding-top:20px}
.idea-card .cat{font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--clay-600);font-weight:600}
.idea-card h4{margin-top:12px;font-size:1.1rem}
.idea-card p{margin-top:10px;font-size:0.92rem;color:var(--ink-600)}
@media (max-width:820px){.ideas-grid{grid-template-columns:1fr}}

/* =========================================================
   FOUNDER
   ========================================================= */
.founder-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center}
.founder-grid img{border-radius:var(--radius);width:100%;object-fit:cover;aspect-ratio:4/5}
@media (max-width:820px){.founder-grid{grid-template-columns:1fr}.founder-grid img{max-width:320px}}

/* =========================================================
   WORK WITH ME OFFERS
   ========================================================= */
.offer-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-on-dark);border:1px solid var(--line-on-dark);margin-top:48px}
.offer-item{background:var(--forest-900);padding:30px 24px}
.offer-item h4{color:var(--paper-100);font-size:1.05rem;margin-bottom:8px}
.offer-item p{font-size:0.88rem;color:var(--paper-500);margin:0}
@media (max-width:920px){.offer-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.offer-list{grid-template-columns:1fr}}

/* =========================================================
   NEWSLETTER + FOOTER
   ========================================================= */
.newsletter{background:var(--forest-950);padding:56px 0;border-top:1px solid var(--line-on-dark)}
.newsletter-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.newsletter-copy{display:flex;align-items:center;gap:16px}
.newsletter-copy h3{color:var(--paper-100);font-size:1.2rem}
.newsletter-form{display:flex;gap:10px;flex:1;max-width:460px;min-width:280px}
.newsletter-form input[type=email]{
  flex:1;background:transparent;border:1px solid var(--line-on-dark);
  color:var(--paper-100);padding:13px 16px;border-radius:var(--radius);font-size:0.92rem;
}
.newsletter-form input::placeholder{color:var(--paper-500)}
.newsletter-status{font-size:0.82rem;color:var(--sage-on-dark);margin-top:10px}

footer.site-footer{background:var(--forest-950);color:var(--paper-500);padding:54px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.foot-col h5{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--paper-100);margin-bottom:14px;font-weight:600}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:0.88rem}
.foot-col ul a:hover{color:var(--paper-100)}
.foot-brand .wordmark{font-family:var(--font-display);font-size:1.3rem;color:var(--paper-100)}
.foot-brand p{font-size:0.85rem;margin-top:12px;max-width:34ch}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-on-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.78rem}
@media (max-width:820px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* =========================================================
   COOKIE CONSENT (reused mechanism, restyled)
   ========================================================= */
#cc{
  position:fixed;left:20px;right:20px;bottom:20px;max-width:520px;
  background:var(--forest-950);color:var(--paper-100);border:1px solid var(--line-on-dark);
  padding:22px;z-index:100;display:none;font-size:0.86rem;
}
#cc.show{display:block}
#cc p{color:var(--paper-500);margin-bottom:16px}
.cc-btns{display:flex;gap:10px}
.cc-accept{background:var(--clay-600);color:var(--cream-50);border:0;padding:10px 18px;font-weight:600;cursor:pointer;border-radius:var(--radius)}
.cc-reject{background:transparent;border:1px solid var(--line-on-dark);color:var(--paper-100);padding:10px 18px;cursor:pointer;border-radius:var(--radius)}

/* utility */
.mt-lg{margin-top:56px}
.center{text-align:center}
.small-note{font-size:0.8rem;color:var(--ink-600)}
.section-dark .small-note{color:var(--paper-500)}

/* =========================================================
   TOOLS PAGE — Life Leadership Dashboard (interactive)
   ========================================================= */
.tools-hero{background:var(--forest-950);color:var(--paper-100);padding:80px 0 56px}
.tools-hero .lede{color:var(--paper-500);margin-top:18px}

.tool-block{padding:64px 0;border-top:1px solid var(--line-on-cream)}
.tool-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:8px}
.tool-tag{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--clay-600);font-weight:600}

.dash-progress{display:flex;gap:8px;margin:36px 0}
.dash-progress .dot{flex:1;height:3px;background:var(--line-on-cream);border-radius:2px;overflow:hidden}
.dash-progress .dot span{display:block;height:100%;width:0;background:var(--clay-600);transition:width .25s ease}
.dash-progress .dot.done span,.dash-progress .dot.active span{width:100%}

.dash-panel{background:var(--forest-950);color:var(--paper-100);padding:44px;border-radius:var(--radius)}
.dash-panel .step-label{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--sage-on-dark);font-weight:600}
.dash-panel h3{color:var(--paper-100);margin-top:12px;font-size:1.5rem}
.dash-panel .step-help{color:var(--paper-500);margin-top:12px;max-width:56ch}

.dash-step{display:none}
.dash-step.active{display:block}

textarea.dash-textarea{
  width:100%;min-height:160px;margin-top:24px;background:var(--forest-700);
  border:1px solid var(--line-on-dark);color:var(--paper-100);padding:18px;
  font-family:var(--font-body);font-size:0.95rem;border-radius:var(--radius);resize:vertical;
}
textarea.dash-textarea::placeholder{color:var(--paper-500)}

.entries-review{margin-top:20px;padding:16px;background:var(--forest-700);border-radius:var(--radius);font-size:0.85rem;color:var(--paper-500)}
.entries-review ul{margin:8px 0 0;padding-left:18px}

.slider-row{margin-top:26px}
.slider-row .slabel{display:flex;justify-content:space-between;font-size:0.92rem;margin-bottom:8px}
.slider-row .slabel b{font-weight:600;color:var(--paper-100)}
.slider-row .sval{color:var(--clay-600);font-weight:600}
input[type=range]{
  width:100%;-webkit-appearance:none;height:2px;background:var(--line-on-dark);border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--paper-100);
  border:2px solid var(--clay-600);cursor:pointer;margin-top:-8px;
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--paper-100);border:2px solid var(--clay-600);cursor:pointer;
}
.slider-scale{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--paper-500);margin-top:6px}

.refine-toggle{background:none;border:0;color:var(--paper-500);font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;margin-top:28px;display:flex;align-items:center;gap:6px}
.refine-area{display:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-on-dark)}
.refine-area.open{display:block}

.dash-step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:40px;gap:12px;flex-wrap:wrap}
@media (max-width:560px){
  .dash-step-nav{flex-direction:column-reverse;align-items:stretch}
  .dash-step-nav .btn{width:100%;justify-content:center}
}

.margin-table{width:100%;border-collapse:collapse;margin-top:28px;font-size:0.9rem}
.margin-table th{text-align:left;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--paper-500);padding-bottom:10px;font-weight:600;border-bottom:1px solid var(--line-on-dark)}
.margin-table td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line-on-dark);color:var(--paper-100)}
.margin-table td.pressure{color:var(--clay-on-dark);font-weight:600}
.margin-table td.margin{color:var(--sage-on-dark);font-weight:600}

.partial-diagnosis{margin-top:32px;padding:22px;background:var(--forest-700);border-left:2px solid var(--clay-600)}
.partial-diagnosis p{color:var(--paper-100);margin:0;font-family:var(--font-display);font-size:1.15rem}

.email-gate{margin-top:36px;padding-top:30px;border-top:1px solid var(--line-on-dark)}
.email-gate .gate-row{display:flex;gap:10px;flex-wrap:wrap}
.email-gate input[type=email]{
  flex:1;min-width:220px;background:var(--forest-700);border:1px solid var(--line-on-dark);
  color:var(--paper-100);padding:13px 16px;border-radius:var(--radius);font-size:0.92rem;
}
.email-gate input::placeholder{color:var(--paper-500)}
.consent-row{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:0.85rem;color:var(--paper-500)}
.consent-row input{margin-top:3px}
.gate-status{font-size:0.85rem;color:var(--paper-500);margin-top:14px}

.brief-out{margin-top:8px}
.brief-out .diagnosis{font-family:var(--font-display);font-size:1.3rem;color:var(--paper-100);margin-bottom:24px}
.brief-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-on-dark);border:1px solid var(--line-on-dark);margin-top:24px}
@media (max-width:640px){.brief-grid{grid-template-columns:1fr}}
.brief-cell{background:var(--forest-900);padding:22px}
.brief-cell .blabel{font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--clay-on-dark);font-weight:600}
.brief-cell p{margin-top:10px;font-size:0.88rem;color:var(--paper-100)}
.brief-mindset{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-on-dark);font-family:var(--font-display);font-size:1.1rem;color:var(--paper-100)}
@media (max-width:820px){.brief-grid{grid-template-columns:1fr}}

.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:var(--paper-100);border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

.tool-secondary{background:var(--cream-50);border:1px solid var(--line-on-cream);padding:36px;margin-top:0}
.more-tools-note{margin-top:40px;padding-top:32px;border-top:1px solid var(--line-on-cream);color:var(--ink-600);font-size:0.92rem}

/* =========================================================
   CHECKPOINT A ADDITIONS
   Framework signature visual · photo placeholders · field notes ·
   classification UI · radar chart · mobile rhythm tightening
   ========================================================= */

/* ---------- signature framework diagram ---------- */
.framework-section{padding-top:64px}
.framework-intro{max-width:640px}
.framework-diagram-wrap{display:flex;justify-content:center;margin:48px 0 8px}
.framework-diagram{width:100%;max-width:620px}
@media (min-width:700px){.framework-diagram{max-width:760px}}
@media (min-width:1100px){.framework-diagram{max-width:860px}}
.framework-caption{text-align:center;color:var(--paper-500);font-size:0.95rem;max-width:52ch;margin:8px auto 0}
.framework-caption b{color:var(--paper-100)}

/* ---------- editorial photography ---------- */
.photo-block{padding:0;background:var(--cream-100)}
.photo-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--cream-100); /* fallback only, visible if an image fails to load */
}
.photo-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (min-width:920px){.photo-frame{aspect-ratio:21/9}}

/* ---------- field notes ---------- */
.field-notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:48px}
.field-note blockquote{margin:0;font-family:var(--font-display);font-size:1.15rem;font-style:italic;color:var(--ink-900);line-height:1.4}
.field-note cite{display:block;margin-top:16px;font-style:normal;font-size:0.8rem;color:var(--ink-600);letter-spacing:0.02em}
.field-notes-close{margin-top:48px;padding-top:28px;border-top:1px solid var(--line-on-cream);font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:var(--ink-600)}
@media (max-width:820px){.field-notes-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- Step 2: Life System Classification ---------- */
.classify-list{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.classify-row{
  display:flex;align-items:center;gap:14px;background:var(--forest-700);
  padding:12px 16px;border-radius:var(--radius);flex-wrap:wrap;
}
.classify-row .entry-text{flex:1;min-width:180px;font-size:0.9rem;color:var(--paper-100)}
.classify-row select{
  background:var(--forest-950);color:var(--paper-100);border:1px solid var(--line-on-dark);
  padding:8px 10px;font-size:0.82rem;border-radius:var(--radius);font-family:var(--font-body);
}
.classify-hint{font-size:0.78rem;color:var(--paper-500);margin-top:14px}

/* ---------- radar chart ---------- */
.radar-wrap{display:flex;justify-content:center;margin:28px 0}
#radarChart{width:100%;max-width:440px}
.radar-svg{width:100%;height:auto;display:block}
@media (min-width:700px){#radarChart{max-width:560px}}
@media (min-width:1100px){#radarChart{max-width:620px}}
.radar-legend{display:flex;gap:22px;justify-content:center;margin-bottom:4px;font-size:0.82rem}
.radar-legend span{display:flex;align-items:center;gap:7px;color:var(--paper-500)}
.radar-legend .sw{width:14px;height:2px;display:inline-block}

/* ---------- mobile rhythm tightening ---------- */
@media (max-width:640px){
  section{padding:52px 0}
  h1{font-size:clamp(2.1rem,8vw,2.8rem)}
  h2{font-size:clamp(1.6rem,6vw,2.1rem)}
  .lede{font-size:0.98rem}
  .forces,.systems-grid,.ideas-grid,.field-notes-grid,.offer-list{margin-top:32px}
  .framework-diagram-wrap{margin:32px 0 4px}
  .dash-preview{overflow-x:auto}
  .dash-preview table{min-width:460px;font-size:0.8rem}
}

/* =========================================================
   CHECKPOINT A v2 — calibration carousel, pattern badge, print
   ========================================================= */

/* ---------- compressed classification result ---------- */
.map-summary{font-family:var(--font-display);font-size:1.3rem;color:var(--paper-100);margin-top:8px}
.map-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.map-chip{font-size:0.78rem;padding:6px 12px;border:1px solid var(--line-on-dark);border-radius:20px;color:var(--paper-500)}
.map-chip.touched{color:var(--paper-100);border-color:var(--clay-600)}
.map-review-toggle{background:none;border:0;color:var(--sage-on-dark);font-size:0.82rem;text-decoration:underline;cursor:pointer;margin-top:22px;padding:0}
.map-detail{display:none;margin-top:20px}
.map-detail.open{display:block}

/* ---------- calibration carousel ---------- */
.calib-progress{font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--sage-on-dark);margin-bottom:6px}
.calib-system-name{font-family:var(--font-display);font-size:1.4rem;color:var(--paper-100)}
.calib-context{font-size:0.85rem;color:var(--paper-500);margin-top:10px;padding:12px 14px;background:var(--forest-700);border-radius:var(--radius)}
.calib-q{margin-top:26px}
.calib-q .qlabel{font-size:0.92rem;color:var(--paper-100);margin-bottom:12px;font-weight:500}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  padding:10px 16px;border:1px solid var(--line-on-dark);border-radius:20px;
  background:transparent;color:var(--paper-500);font-size:0.85rem;cursor:pointer;
  transition:all .15s ease;
}
.pill:hover{border-color:var(--clay-600);color:var(--paper-100)}
.pill.selected{background:var(--clay-600);border-color:var(--clay-600);color:var(--cream-50);font-weight:600}
.calib-nav{display:flex;justify-content:space-between;align-items:center;margin-top:32px}
.calib-dots{display:flex;gap:6px}
.calib-dots .cdot{width:6px;height:6px;border-radius:50%;background:var(--line-on-dark)}
.calib-dots .cdot.done{background:var(--clay-600)}
.calib-dots .cdot.current{background:var(--paper-100)}

/* ---------- margin reveal ---------- */
.margin-hero-label{font-family:var(--font-display);font-size:1.6rem;color:var(--paper-100);text-align:center;margin-top:8px}
.margin-counts{display:flex;justify-content:center;gap:28px;margin:28px 0;flex-wrap:wrap}
.margin-count{text-align:center}
.margin-count .num{font-family:var(--font-display);font-size:2.1rem;display:block}
.margin-count .lbl{font-size:0.74rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--paper-500)}
.margin-count.pressure .num{color:var(--clay-on-dark)}
.margin-count.tight .num{color:var(--paper-100)}
.margin-count.available .num{color:var(--sage-on-dark)}
.margin-explainer{max-width:56ch;margin:24px auto 0;text-align:center;color:var(--paper-500);font-size:0.95rem;line-height:1.6}
.margin-explainer b{color:var(--paper-100)}
.reflection-q{margin-top:32px;text-align:center}
.reflection-q .qlabel{color:var(--paper-100);font-size:0.95rem;margin-bottom:14px}
.reflection-q .pill-row{justify-content:center}

/* ---------- system read ---------- */
.read-headline{font-family:var(--font-display);font-size:1.5rem;color:var(--paper-100);margin-top:8px}
.read-sentences p{color:var(--paper-500);margin-top:10px}
.gate-transition{font-family:var(--font-display);font-size:1.2rem;color:var(--paper-100);margin-top:32px;padding-top:24px;border-top:1px solid var(--line-on-dark)}

/* ---------- pattern badge ---------- */
.pattern-badge-row{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.pattern-badge-label{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--paper-500)}
.pattern-badge{font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--clay-on-dark);font-weight:700;border:1px solid var(--clay-on-dark);padding:4px 12px;border-radius:20px}

/* ---------- field notes on Tools (dark variant) ---------- */
.field-notes-dark blockquote{color:var(--paper-100)}
.field-notes-dark cite{color:var(--paper-500)}
.field-notes-dark .field-notes-close{border-top-color:var(--line-on-dark);color:var(--paper-500)}

/* ---------- print (Save my Brief) ---------- */
@media print{
  body.printing-brief > *:not(#printArea){display:none !important}
  #printArea{display:block !important;color:#1c2620;padding:24px}
  #printArea .diagnosis{font-size:1.3rem;margin-bottom:18px;color:#1c2620}
  #printArea .brief-grid{border-color:#ccc}
  #printArea .brief-cell{background:#fff;border-color:#ccc}
  #printArea .brief-cell p{color:#1c2620}
  #printArea .brief-mindset{color:#1c2620;border-top-color:#ccc}
  #printArea .pattern-badge-label{color:#4d5850}
  #printArea .pattern-badge{color:#a65b42;border-color:#a65b42}
}
#printArea{display:none}

/* Home Dashboard showcase — two columns on desktop, stacks on mobile.
   Was previously an inline grid with no mobile breakpoint, which
   squeezed the preview table into half-width on narrow screens and
   broke its column headers. Fixed here. */
.dash-showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:820px){
  .dash-showcase-grid{grid-template-columns:1fr;gap:32px}
}

/* ---------- Tools page: clarity line + journey strip ---------- */
.clarity-line{font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:var(--paper-100);margin-top:18px;max-width:44ch}
.journey-strip{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:44px;padding:28px 0;border-top:1px solid var(--line-on-dark);border-bottom:1px solid var(--line-on-dark)}
.journey-step{display:flex;align-items:center;gap:10px}
.journey-step .jnum{font-family:var(--font-display);font-size:0.85rem;color:var(--clay-on-dark)}
.journey-step .jlabel{font-size:0.8rem;color:var(--paper-100);font-weight:600;white-space:nowrap}
.journey-arrow{color:var(--paper-500);margin:0 14px;font-size:0.9rem}
@media (max-width:820px){
  .journey-strip{flex-direction:column;align-items:flex-start;gap:14px}
  .journey-arrow{display:none}
  .journey-step{gap:8px}
}