/* ═══════════════════════════════════════════════════════════════════
   Methodology Center — Design System v2, editorial pass (T01.8H)

   Composition only. Every colour is a --tok-*; no gradients, no shadows,
   no blur, no light-theme branch (the token maps own both themes).
   Guard: tests/unit/test_design_v2_guard.py.

   TWO WIDTHS, one rule: structure may use the workspace (hero, chapter
   cards, bands, matrices, comparisons), prose may not (65–72 characters).
   A methodology read as a 700px column in the middle of a 1920px monitor
   is what T01.8G replaced; a 1600px paragraph would be the same mistake
   in the other direction.

   OWN TYPE SCALE, and why: the platform tokens are tuned for dashboards
   (title 22px, body 15px, label 13px) — measured on the T01.8G page, the
   h1 and the h2 were BOTH 22px, so the page had no hierarchy between its
   name and its chapters. This is an editorial surface, so it carries an
   editorial scale, expressed in the same rhythm and colour tokens as
   everything else.
   ═══════════════════════════════════════════════════════════════════ */

.mth {
    /* fluid: the low end is the phone, the high end a wide desktop */
    --mth-h1: clamp(30px, 2.6vw, 42px);
    --mth-h2: clamp(24px, 2vw, 32px);
    --mth-h3: clamp(19px, 1.35vw, 23px);
    --mth-h4: clamp(16px, 1.05vw, 18px);
    --mth-body: clamp(16px, 1.02vw, 17.5px);
    --mth-support: 15px;
    --mth-meta: 13px;

    --mth-chapter-gap: clamp(64px, 6.5vw, 112px);
    --mth-block-gap: clamp(28px, 2.6vw, 48px);

    display: flex;
    flex-direction: column;
    gap: var(--mth-chapter-gap);
    padding-bottom: var(--tok-space-8);
}

/* prose never spans the workspace */
.mth-lead,
.mth-support,
.mth-meta,
.mth-qa__a,
.mth-evid__caveat,
.mth-hero__lead { max-width: 68ch; }

.mth-lead {
    margin: 0;
    font-size: var(--mth-body);
    line-height: 1.6;
    color: var(--tok-ink-2);
}
.mth-support {
    margin: 0;
    font-size: var(--mth-support);
    line-height: 1.55;
    color: var(--tok-ink-muted);
}
.mth-meta {
    margin: 0;
    font-size: var(--mth-meta);
    line-height: 1.5;
    color: var(--tok-ink-muted);
}
.num { font-variant-numeric: tabular-nums; }

.mth-h2 {
    margin: 0;
    font-size: var(--mth-h2);
    line-height: 1.2;
    font-weight: 640;
    letter-spacing: -0.01em;
    color: var(--tok-ink);
}
.mth-h3 {
    margin: 0;
    font-size: var(--mth-h3);
    line-height: 1.3;
    font-weight: 620;
    color: var(--tok-ink);
}
.mth-h4 {
    margin: 0;
    font-size: var(--mth-h4);
    line-height: 1.35;
    font-weight: 620;
    color: var(--tok-ink);
}

/* ── hero ─────────────────────────────────────────────────────────── */
.mth-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tok-space-6);
    /* The TEXT starts at the top of the hero; only the art is centred
       against it. With align-items:center the whole text block was
       centred against a taller illustration and the eyebrow fell ~70px
       down the page, on top of a 71px pad — the page looked like it
       began halfway down the screen. */
    align-items: start;
    padding: clamp(4px, 0.8vw, 14px) 0 clamp(8px, 1vw, 16px);
}
@media (min-width: 900px) {
    .mth-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.mth-hero__text { display: flex; flex-direction: column; gap: var(--tok-space-3); }
.mth-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tok-brand);
}
.mth-hero__title {
    margin: 0;
    font-size: var(--mth-h1);
    line-height: 1.1;
    font-weight: 660;
    letter-spacing: -0.02em;
    color: var(--tok-ink);
}
.mth-hero__lead {
    margin: 0;
    font-size: var(--mth-body);
    line-height: 1.6;
    color: var(--tok-ink-2);
}
.mth-hero__lead--2 { color: var(--tok-ink-muted); }

.mth-hero__art {
    justify-self: center;
    align-self: center;
    width: min(100%, 400px);
    color: var(--tok-brand);
}
.mth-hero__art svg { display: block; width: 100%; height: auto; }
.mth-hero__bars rect { fill: var(--tok-brand); opacity: 0.22; }
.mth-hero__bars rect:nth-child(2) { opacity: 0.34; }
.mth-hero__bars rect:nth-child(3) { opacity: 0.5; }
.mth-hero__bars rect:nth-child(4) { opacity: 0.7; }
.mth-hero__shield {
    fill: var(--tok-surface-raised);
    stroke: var(--tok-brand);
    stroke-width: 1.6;
}
.mth-hero__tick { stroke: var(--tok-pos); fill: none; }
@media (max-width: 899px) { .mth-hero__art { display: none; } }

/* ── chapter cards ────────────────────────────────────────────────── */
.mth-chapters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: var(--tok-space-3);
}
.mth-chap-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--tok-space-2);
    height: 100%;
    padding: clamp(20px, 1.6vw, 28px);
    border: 1px solid var(--tok-line);
    border-radius: var(--tok-radius-m);
    background: var(--tok-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--tok-motion-fast),
                background var(--tok-motion-fast);
}
.mth-chap-card:hover {
    border-color: var(--tok-brand);
    background: var(--tok-surface-raised);
}
.mth-chap-card:focus-visible {
    outline: 2px solid var(--tok-focus);
    outline-offset: 2px;
}
.mth-chap-card__ico { color: var(--tok-brand); }
.mth-chap-card__title {
    font-size: var(--mth-h4);
    font-weight: 640;
    color: var(--tok-ink);
}
.mth-chap-card__desc {
    font-size: var(--mth-support);
    line-height: 1.5;
    color: var(--tok-ink-muted);
}
.mth-chap-card__go {
    justify-self: end;   /* a 'go' affordance belongs at the end of the card */
    color: var(--tok-ink-muted);
    font-size: 16px;
}
.mth-chap-card:hover .mth-chap-card__go { color: var(--tok-brand); }

/* ── chapter navigation rail ──────────────────────────────────────── */
.mth-rail {
    position: sticky;
    top: 0;
    z-index: var(--tok-z-sticky);
    margin: 0;
    padding: var(--tok-space-2) 0;
    background: var(--tok-canvas);
    border-bottom: 1px solid var(--tok-line);
}
.mth-rail__sum {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    list-style: none;
    cursor: pointer;
    font-size: var(--mth-support);
    font-weight: 620;
    color: var(--tok-ink);
}
.mth-rail__sum::-webkit-details-marker { display: none; }
.mth-rail__sum::after {
    content: '\203A';
    margin-left: auto;
    color: var(--tok-ink-muted);
    transform: rotate(90deg);
}
.mth-rail[open] .mth-rail__sum::after { transform: rotate(-90deg); }
.mth-rail__sum:focus-visible { outline: 2px solid var(--tok-focus); outline-offset: 2px; }
.mth-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.mth-rail__link {
    display: block;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: var(--mth-support);
    color: var(--tok-ink-muted);
    text-decoration: none;
    white-space: nowrap;
}
.mth-rail__link:hover { color: var(--tok-ink); background: var(--tok-surface-inset); }
.mth-rail__link.is-current {
    color: var(--tok-ink);
    background: var(--tok-surface-selected);
}
.mth-rail__link:focus-visible { outline: 2px solid var(--tok-focus); outline-offset: 2px; }
@media (min-width: 1100px) {
    .mth-rail__sum { display: none; }
    .mth-rail__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .mth-rail__list::-webkit-scrollbar { display: none; }
}
@media (max-width: 1099px) {
    .mth-rail { padding: var(--tok-space-2) var(--tok-space-3); border: 1px solid var(--tok-line); border-radius: var(--tok-radius-s); }
    .mth-rail__list { flex-direction: column; margin-top: var(--tok-space-2); }
    .mth-rail__link { border-radius: var(--tok-radius-xs); }
}

/* ── sections ─────────────────────────────────────────────────────── */
.mth-main {
    display: flex;
    flex-direction: column;
    gap: var(--mth-chapter-gap);
    min-width: 0;
}
.mth-sec {
    display: flex;
    flex-direction: column;
    gap: var(--tok-space-4);
    /* the sticky rail must never sit on top of an anchor target */
    scroll-margin-top: 96px;
}
.mth-sec__head { display: flex; align-items: center; gap: var(--tok-space-3); }
.mth-sec__ico { color: var(--tok-brand); display: inline-flex; }
.mth-sec > .mth-h3 { margin-top: var(--tok-space-4); }

/* ── editorial transitions: the sentence between two chapters ─────── */
.mth-trans {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px var(--tok-space-4);
    padding: var(--mth-block-gap) 0 0;
    border-top: 1px solid var(--tok-line);
}
.mth-trans__n {
    grid-row: 1 / 3;
    align-self: start;
    font-size: var(--mth-h2);
    line-height: 1;
    font-weight: 300;
    color: var(--tok-line-strong);
    font-variant-numeric: tabular-nums;
}
.mth-trans__lead {
    margin: 0;
    font-size: var(--mth-h3);
    line-height: 1.35;
    font-weight: 600;
    color: var(--tok-ink);
    max-width: 40ch;
}
.mth-trans__sub {
    margin: 0;
    font-size: var(--mth-support);
    line-height: 1.55;
    color: var(--tok-ink-muted);
    max-width: 62ch;
}

/* ── the chain: data → … → view ───────────────────────────────────── */
.mth-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
}
.mth-chain__step { display: flex; align-items: center; gap: 6px; font-size: var(--mth-support); }
.mth-chain__step > span {
    padding: 7px 14px;
    border: 1px solid var(--tok-line);
    border-radius: 999px;
    color: var(--tok-ink-2);
}
.mth-chain__step + .mth-chain__step::before {
    content: '\2192';
    color: var(--tok-ink-muted);
}

/* ── principles ───────────────────────────────────────────────────── */
.mth-princ {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--tok-space-5);
}
.mth-princ__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: var(--tok-space-4);
    border-left: 2px solid var(--tok-line-strong);
}

/* ── the eleven areas ─────────────────────────────────────────────── */
.mth-chapgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--tok-space-5);
}
.mth-movement__title { margin-bottom: var(--tok-space-3); }
.mth-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mth-step {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tok-line);
    font-size: var(--mth-support);
    color: var(--tok-ink);
}
.mth-step__n { font-size: var(--mth-meta); font-weight: 700; color: var(--tok-ink-muted); }
.mth-step.is-planned .mth-step__name { color: var(--tok-ink-muted); }

/* ── score bands: the focal point of a chapter ────────────────────── */
.mth-bands {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--tok-space-4);
}
.mth-bands--slim { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--tok-space-3); }
.mth-band {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(18px, 1.5vw, 26px);
    border: 1px solid var(--tok-line);
    border-left-width: 3px;
    border-radius: var(--tok-radius-m);
    background: var(--tok-surface);
}
.mth-band__range {
    font-size: clamp(26px, 2.2vw, 36px);
    line-height: 1.05;
    font-weight: 660;
    letter-spacing: -0.015em;
    color: var(--tok-ink);
}
.mth-bands--slim .mth-band { padding: var(--tok-space-3) var(--tok-space-4); }
.mth-bands--slim .mth-band__range { font-size: var(--mth-h4); }
.mth-band__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tok-ink-2);
}
.mth-band__body {
    font-size: var(--mth-support);
    line-height: 1.5;
    color: var(--tok-ink-muted);
}
/* colour is support, never the carrier: the range, the name and the
   sentence each state the band on their own */
.mth-band--pos { border-left-color: var(--tok-pos); }
.mth-band--warn { border-left-color: var(--tok-warn); }
.mth-band--neg { border-left-color: var(--tok-neg); }
.mth-band--none { border-left-color: var(--tok-line-strong); }

/* ── factor rows ──────────────────────────────────────────────────── */
.mth-factors { list-style: none; margin: 0; padding: 0; }
.mth-factor {
    display: grid;
    grid-template-columns: 24px minmax(150px, 1.1fr) minmax(120px, 0.7fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--tok-space-3);
    padding: var(--tok-space-3) 0;
    border-bottom: 1px solid var(--tok-line);
}
.mth-factor__ico { color: var(--tok-ink-muted); display: inline-flex; }
.mth-factor__name { font-size: var(--mth-h4); font-weight: 600; color: var(--tok-ink); }
.mth-factor__weight { display: flex; align-items: center; gap: 10px; font-size: var(--mth-body); color: var(--tok-ink); }
.mth-factor__bar {
    flex: 1 1 auto;
    max-width: 84px;
    height: 6px;
    border-radius: 999px;
    background: var(--tok-surface-inset);
}
.mth-factor__bar > i { display: block; height: 100%; border-radius: 999px; background: var(--tok-brand); }
.mth-factor__what { font-size: var(--mth-support); color: var(--tok-ink-2); }
.mth-factor__why { font-size: var(--mth-support); color: var(--tok-ink-muted); }
.mth-factor__whylbl {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tok-line-strong);
}
.mth-factor--total { border-bottom: 0; }
.mth-factor--total .mth-factor__name { grid-column: 2; color: var(--tok-ink-2); }
@media (max-width: 899px) {
    .mth-factor {
        grid-template-columns: 24px minmax(0, 1fr) auto;
        row-gap: 4px;
    }
    .mth-factor__what,
    .mth-factor__why { grid-column: 2 / -1; }
}

/* ── progressive disclosure ───────────────────────────────────────── */
.mth-more {
    border: 1px solid var(--tok-line);
    border-radius: var(--tok-radius-s);
}
.mth-more__sum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--tok-space-3) var(--tok-space-4);
    list-style: none;
    cursor: pointer;
    font-size: var(--mth-support);
    font-weight: 600;
    color: var(--tok-ink);
}
.mth-more__sum::-webkit-details-marker { display: none; }
.mth-more__sum::before { content: '+'; width: 12px; color: var(--tok-ink-muted); }
.mth-more[open] .mth-more__sum::before { content: '\2212'; }
.mth-more__sum:hover { background: var(--tok-surface-inset); }
.mth-more__sum:focus-visible { outline: 2px solid var(--tok-focus); outline-offset: -2px; }
.mth-more__body {
    padding: 0 var(--tok-space-4) var(--tok-space-4) var(--tok-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--tok-space-4);
}
.mth-more--inline { border: 0; margin-top: auto; }
.mth-more--inline .mth-more__sum { padding: var(--tok-space-2) 0; color: var(--tok-brand); }
.mth-more--inline .mth-more__sum:hover { background: none; text-decoration: underline; }
.mth-more--inline .mth-more__body { padding: 0; }
.mth-qa { display: flex; flex-direction: column; gap: 4px; }
.mth-qa__q { margin: 0; font-size: var(--mth-h4); font-weight: 620; color: var(--tok-ink); }
.mth-qa__a { margin: 0; font-size: var(--mth-support); line-height: 1.6; color: var(--tok-ink-muted); }

/* ── historical evidence: one dominant comparison ─────────────────── */
.mth-evid {
    display: flex;
    flex-direction: column;
    gap: var(--tok-space-4);
    padding: clamp(20px, 2vw, 36px);
    border: 1px solid var(--tok-line);
    border-radius: var(--tok-radius-l, 16px);
    background: var(--tok-surface-inset);
}
.mth-evid__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--tok-space-4);
}
.mth-evid__vs {
    display: grid;
    place-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--tok-line-strong);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--tok-ink-muted);
}
.mth-evid__side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mth-evid__value {
    font-size: clamp(34px, 3.4vw, 54px);
    line-height: 1.02;
    font-weight: 660;
    letter-spacing: -0.02em;
}
.mth-evid__side--pos .mth-evid__value { color: var(--tok-pos); }
.mth-evid__side--neg .mth-evid__value { color: var(--tok-neg); }
.mth-evid__label { font-size: var(--mth-support); line-height: 1.5; color: var(--tok-ink-2); }
.mth-evid__label strong { color: var(--tok-ink); }
.mth-evid__caveat { margin: 0; }
.mth-evid__caveat strong { color: var(--tok-ink-2); font-weight: 600; }
@media (max-width: 767px) {
    .mth-evid__row { grid-template-columns: minmax(0, 1fr); }
    .mth-evid__vs { justify-self: start; width: 40px; height: 40px; }
}

/* ── decision pillars ─────────────────────────────────────────────── */
.mth-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: var(--tok-space-4);
}
.mth-pillar {
    display: flex;
    flex-direction: column;
    gap: var(--tok-space-2);
    padding: clamp(20px, 1.6vw, 28px);
    border: 1px solid var(--tok-line);
    border-radius: var(--tok-radius-m);
    background: var(--tok-surface);
}
.mth-pillar__ico { color: var(--tok-brand); display: inline-flex; }
.mth-pillar__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tok-ink-muted);
}
.mth-pillar__q { margin: 0; }
.mth-pillar__note { color: var(--tok-ink-muted); }
.mth-inputs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mth-input {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--mth-support);
    color: var(--tok-ink-2);
}
.mth-input__w { color: var(--tok-ink-muted); }
.mth-inline { display: flex; flex-direction: column; gap: var(--tok-space-3); }

/* ── valuation lenses / asset families ────────────────────────────── */
.mth-lenses,
.mth-fams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: var(--tok-space-4);
}
.mth-lens,
.mth-fam {
    display: flex;
    flex-direction: column;
    gap: var(--tok-space-3);
    padding: clamp(20px, 1.6vw, 28px);
    border: 1px solid var(--tok-line);
    border-radius: var(--tok-radius-m);
    background: var(--tok-surface);
}
.mth-fam__ico { color: var(--tok-brand); display: inline-flex; }
.mth-lens__qa,
.mth-fam__qa { margin: 0; display: flex; flex-direction: column; gap: var(--tok-space-3); }
.mth-lens__qa dt,
.mth-fam__qa dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tok-ink-muted);
}
.mth-lens__qa dd,
.mth-fam__qa dd {
    margin: 3px 0 0;
    font-size: var(--mth-support);
    line-height: 1.55;
    color: var(--tok-ink-2);
}

/* ── two columns: warnings vs targets ─────────────────────────────── */
.mth-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: var(--mth-block-gap);
}
.mth-two__col { display: flex; flex-direction: column; gap: var(--tok-space-2); min-width: 0; }
.mth-defs { margin: var(--tok-space-2) 0 0; }
.mth-def {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tok-space-4);
    padding: 10px 0;
    border-top: 1px solid var(--tok-line);
}
.mth-def dt { font-size: var(--mth-support); color: var(--tok-ink-2); }
.mth-def dd {
    margin: 0;
    font-size: var(--mth-body);
    font-weight: 620;
    color: var(--tok-ink);
    white-space: nowrap;
}

/* ── callouts ─────────────────────────────────────────────────────── */
.mth-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--tok-space-3);
    margin: 0;
    padding: var(--tok-space-4);
    border-radius: var(--tok-radius-s);
    font-size: var(--mth-support);
    color: var(--tok-ink-2);
}
.mth-callout__ico { flex: none; display: inline-flex; }
.mth-callout--warn {
    border-left: 3px solid var(--tok-warn);
    background: var(--tok-warn-tint);
}
.mth-callout--warn .mth-callout__ico { color: var(--tok-warn); }
.mth-callout--warn strong { color: var(--tok-ink); }
.mth-callout--strong {
    padding: clamp(20px, 2vw, 32px);
    border: 1px solid var(--tok-line-strong);
    border-left: 3px solid var(--tok-brand);
    border-radius: var(--tok-radius-m);
    background: var(--tok-surface-raised);
}
.mth-callout--strong .mth-callout__ico { color: var(--tok-brand); }
.mth-callout--strong .mth-h3 { margin: 0 0 6px; }

/* ── table (only where the relation is genuinely 2-D) ─────────────── */
.mth-tablewrap { overflow-x: auto; }
.mth-matrix { width: auto; min-width: min(700px, 100%); }
.mth-matrix__cap {
    caption-side: top;
    text-align: left;
    padding-bottom: 8px;
    font-size: var(--mth-meta);
    color: var(--tok-ink-muted);
}
.mth-w { text-align: right; white-space: nowrap; }
.mth-matrix td.mth-w,
.mth-matrix th.mth-w { min-width: 96px; }
.mth-matrix tbody th,
.mth-matrix tfoot th {
    font-size: var(--mth-support);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tok-ink);
    white-space: normal;
}

/* ── data trust flags ─────────────────────────────────────────────── */
.mth-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mth-flag {
    padding: 6px 12px;
    border: 1px solid var(--tok-line);
    border-radius: 999px;
    font-size: var(--mth-support);
    color: var(--tok-ink-2);
}

/* ── training ─────────────────────────────────────────────────────── */
.mth-sec--cta {
    padding: clamp(24px, 2.6vw, 44px);
    border: 1px solid var(--tok-line-strong);
    border-radius: var(--tok-radius-l, 16px);
    background: var(--tok-surface-raised);
}
.mth-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: var(--tok-space-3);
}
.mth-lvl {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 4px var(--tok-space-3);
    padding: var(--tok-space-3) var(--tok-space-4);
    border: 1px solid var(--tok-line);
    border-radius: var(--tok-radius-s);
    background: var(--tok-surface);
}
.mth-lvl__letter {
    grid-row: 1 / 3;
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--tok-radius-xs);
    background: var(--tok-surface-inset);
    font-size: var(--mth-support);
    font-weight: 700;
    color: var(--tok-ink);
}
.mth-lvl__name { font-size: var(--mth-h4); font-weight: 620; color: var(--tok-ink); }
.mth-lvl__body { font-size: var(--mth-support); line-height: 1.5; color: var(--tok-ink-muted); }
.mth-lvl__final { grid-column: 2; font-size: var(--mth-meta); color: var(--tok-pos); }
.mth-cta { margin-top: var(--tok-space-2); }
.mth-cta .act { font-size: var(--mth-support); padding: 12px 22px; }

/* ── glossary ─────────────────────────────────────────────────────── */
.mth-gloss {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 0 var(--mth-block-gap);
}
.mth-gloss__item { padding: var(--tok-space-3) 0; border-top: 1px solid var(--tok-line); min-width: 0; }
.mth-gloss__item dt { font-size: var(--mth-h4); font-weight: 620; color: var(--tok-ink); }
.mth-gloss__item dd {
    margin: 4px 0 0;
    font-size: var(--mth-support);
    line-height: 1.55;
    color: var(--tok-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
    .mth-chap-card { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   T01.8H.1 — visual fidelity pass against the approved reference.

   The editorial pass fixed the type scale but kept ONE card grammar for
   everything, which flattened the page back into documentation. Three
   levels now: a PRIMARY concept surface (bands, pillars, evidence), a
   SUPPORTING card (lenses, families, rail), and DETAIL that is only
   typography and a hairline.
   ═══════════════════════════════════════════════════════════════════ */

/* ── hero: a composition, not a headline with a corner sticker ────── */
.mth-hero {
    min-height: 380px;
    padding-top: clamp(16px, 2vw, 36px);
}
@media (min-width: 900px) {
    .mth-hero { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); }
}
.mth-hero__art { width: min(100%, 460px); }
.mth-hero__text { gap: var(--tok-space-4); padding-top: clamp(8px, 1.4vw, 24px); }
.mth-hero__title { font-size: clamp(32px, 2.9vw, 46px); }
.mth-hero__lead { font-size: clamp(16px, 1.1vw, 19px); }

/* ── chapter cards: one row, own identity, a canonical badge ─────── */
@media (min-width: 1400px) {
    .mth-chapters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 1000px) and (max-width: 1399px) {
    .mth-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mth-chap-card {
    grid-template-rows: auto auto 1fr auto auto;
    gap: 10px;
    border-top: 2px solid var(--tok-line);
}
.mth-chap-card__ico {
    display: grid;
    place-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--tok-radius-s);
    background: var(--tok-surface-inset);
}
.mth-chap-card__badge {
    justify-self: start;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tok-surface-inset);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tok-ink-2);
    font-variant-numeric: tabular-nums;
}
/* each chapter carries a colour so the row reads as seven doors rather
   than one repeated tile — the accent lives on the rule and the icon */
.mth-chap-card--a { border-top-color: var(--tok-brand); }
.mth-chap-card--a .mth-chap-card__ico { color: var(--tok-brand); }
.mth-chap-card--b { border-top-color: var(--tok-pos); }
.mth-chap-card--b .mth-chap-card__ico { color: var(--tok-pos); }
.mth-chap-card--c { border-top-color: var(--tok-chart-4); }
.mth-chap-card--c .mth-chap-card__ico { color: var(--tok-chart-4); }
.mth-chap-card--d { border-top-color: var(--tok-chart-3); }
.mth-chap-card--d .mth-chap-card__ico { color: var(--tok-chart-3); }
.mth-chap-card--e { border-top-color: var(--tok-warn); }
.mth-chap-card--e .mth-chap-card__ico { color: var(--tok-warn); }
.mth-chap-card--f { border-top-color: var(--tok-chart-5); }
.mth-chap-card--f .mth-chap-card__ico { color: var(--tok-chart-5); }
.mth-chap-card--g { border-top-color: var(--tok-info); }
.mth-chap-card--g .mth-chap-card__ico { color: var(--tok-info); }

/* ── content + rail ───────────────────────────────────────────────── */
.mth-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mth-block-gap);
    align-items: start;
}
@media (min-width: 1240px) {
    .mth-body {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: clamp(32px, 3vw, 64px);
    }
    .mth-aside { position: sticky; top: 96px; }
}
.mth-aside { display: flex; flex-direction: column; gap: var(--tok-space-4); }
.mth-aside__card {
    display: flex;
    flex-direction: column;
    gap: var(--tok-space-3);
    padding: var(--tok-space-5);
    border: 1px solid var(--tok-line);
    border-radius: var(--tok-radius-m);
    background: var(--tok-surface);
}
.mth-aside__title {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tok-ink-muted);
}
.mth-aside__facts { margin: 0; display: flex; flex-direction: column; }
.mth-aside__facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tok-space-3);
    padding: 9px 0;
    border-top: 1px solid var(--tok-line);
}
.mth-aside__facts > div:first-child { border-top: 0; }
.mth-aside__facts dt { font-size: var(--mth-support); color: var(--tok-ink-2); }
.mth-aside__facts dd {
    margin: 0;
    font-size: var(--mth-h4);
    font-weight: 640;
    color: var(--tok-ink);
    white-space: nowrap;
}
.mth-aside__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.mth-aside__links a {
    font-size: var(--mth-support);
    color: var(--tok-brand);
    text-decoration: none;
}
.mth-aside__links a:hover { text-decoration: underline; }
.mth-aside__card--cta {
    border-color: var(--tok-line-strong);
    background: var(--tok-surface-raised);
}
.mth-aside__ctaico { color: var(--tok-brand); }
.mth-aside__ctabody {
    margin: 0;
    font-size: var(--mth-support);
    line-height: 1.55;
    color: var(--tok-ink-2);
}
.mth-aside__soon { font-size: var(--mth-meta); color: var(--tok-ink-muted); }
.mth-aside .act { justify-content: center; }

/* ── LEVEL 1: the band spectrum ───────────────────────────────────── */
.mth-bands { gap: var(--tok-space-3); }
.mth-band {
    border-left-width: 1px;
    border-top: 3px solid var(--tok-line);
    padding: clamp(22px, 1.8vw, 32px);
}
.mth-band__range { font-size: clamp(30px, 2.6vw, 44px); }
.mth-band--pos { border-top-color: var(--tok-pos); background: var(--tok-surface-raised); }
.mth-band--warn { border-top-color: var(--tok-warn); background: var(--tok-warn-tint); }
.mth-band--neg { border-top-color: var(--tok-neg); background: var(--tok-surface-raised); }
.mth-band--none { border-top-color: var(--tok-line-strong); }
.mth-band--pos .mth-band__range { color: var(--tok-pos); }
.mth-band--neg .mth-band__range { color: var(--tok-neg); }
.mth-bands--slim .mth-band {
    padding: var(--tok-space-3) var(--tok-space-4);
    border-top-width: 2px;
}

/* ── the weight VISUALIZATION ─────────────────────────────────────── */
.mth-factors { display: flex; flex-direction: column; gap: 2px; }
.mth-factor {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--tok-line);
}
.mth-factor__d { width: 100%; }
.mth-factor__sum {
    display: grid;
    grid-template-columns: 28px minmax(150px, 1.1fr) 64px minmax(0, 1.5fr) 16px;
    align-items: center;
    gap: 8px var(--tok-space-4);
    padding: var(--tok-space-4) 0;
    list-style: none;
    cursor: pointer;
}
.mth-factor__sum::-webkit-details-marker { display: none; }
.mth-factor__sum::after {
    content: '\203A';
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    color: var(--tok-ink-muted);
    transform: rotate(90deg);
    transition: transform var(--tok-motion-fast);
}
.mth-factor__d[open] .mth-factor__sum::after { transform: rotate(-90deg); }
.mth-factor__sum:hover { background: var(--tok-surface-inset); }
.mth-factor__sum:focus-visible { outline: 2px solid var(--tok-focus); outline-offset: -2px; }
.mth-factor__pct {
    font-size: var(--mth-h3);
    font-weight: 640;
    color: var(--tok-ink);
    text-align: right;
}
/* the bar spans the row: the weight is seen before it is read */
.mth-factor__bar {
    grid-column: 2 / 4;
    grid-row: 2;
    max-width: none;
    height: 8px;
    border-radius: 999px;
    background: var(--tok-surface-inset);
}
.mth-factor__what { grid-column: 4; grid-row: 1 / 3; align-self: center; }
.mth-factor--1 .mth-factor__bar > i { background: var(--tok-brand); }
.mth-factor--2 .mth-factor__bar > i { background: var(--tok-chart-1); }
.mth-factor--3 .mth-factor__bar > i { background: var(--tok-chart-2); }
.mth-factor--4 .mth-factor__bar > i { background: var(--tok-chart-6); }
.mth-factor--5 .mth-factor__bar > i { background: var(--tok-chart-5); }
.mth-factor__more {
    margin: 0;
    padding: 0 0 var(--tok-space-4) 44px;
    font-size: var(--mth-support);
    line-height: 1.55;
    color: var(--tok-ink-muted);
}
.mth-factor__whylbl {
    display: inline-block;
    margin-right: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tok-line-strong);
}
.mth-factors__total { margin-top: var(--tok-space-3); }
@media (max-width: 899px) {
    .mth-factor__sum { grid-template-columns: 28px minmax(0, 1fr) 58px 16px; }
    .mth-factor__bar { grid-column: 2 / 4; }
    .mth-factor__what { grid-column: 2 / 5; grid-row: 3; }
}

/* ── the historical comparison: the loudest thing on the page ─────── */
.mth-evid { padding: clamp(28px, 3vw, 56px); gap: var(--tok-space-5); }
.mth-evid__value { font-size: clamp(44px, 4.6vw, 72px); }
.mth-evid__row { gap: clamp(24px, 3vw, 56px); }
.mth-evid__vs { width: 56px; height: 56px; }
.mth-evid__label { font-size: var(--mth-body); }
.mth-evid__note {
    padding-top: var(--tok-space-4);
    border-top: 1px solid var(--tok-line);
}

/* ── LEVEL 1 for the pillars, LEVEL 2 for supporting cards ───────── */
.mth-pillar {
    gap: var(--tok-space-3);
    min-height: 260px;
    padding: clamp(24px, 2vw, 32px);
    background: var(--tok-surface-raised);
}
.mth-pillar__ico {
    display: grid;
    place-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--tok-radius-s);
    background: var(--tok-surface-inset);
}
.mth-pillar__q { font-size: clamp(19px, 1.5vw, 25px); }
.mth-lens, .mth-fam { background: var(--tok-surface); }

/* ── LEVEL 3: detail is typography and a hairline ─────────────────── */
.mth-gloss__item { padding: var(--tok-space-4) 0; }
.mth-gloss { gap: 0 clamp(32px, 4vw, 72px); }


/* ── pass 2: the shell rhythm is NOT the chapter rhythm ───────────────
   `.mth` gaps the page furniture (hero, chapter cards, rail, body);
   `.mth-main` gaps the chapters. Sharing one 112px value put a quarter
   of a screen of nothing between the hero and its own navigation, so
   the page looked like it started twice. */
.mth { gap: clamp(28px, 2.6vw, 48px); }
.mth-hero {
    /* THE TEXT IS TOP-ALIGNED. Twice before, `align-items: center` on
       this grid centred a 205px text block inside a 360px box and left
       64px of black above the eyebrow — the page looked like it began
       a third of a screen down. The platform already starts content at
       141px (.container padding); the hero adds almost nothing on top
       of that, and only the ART is centred against the text. */
    min-height: clamp(0px, 20vw, 320px);
    padding: clamp(0px, 0.6vw, 10px) 0 0;
    align-items: start;
}
.mth-hero__art { align-self: center; }
.mth-hero__text { padding-top: 0; }
/* Centring only works while the art does not dominate: at 500px wide
   the illustration stood 375px tall against 230px of text and pushed
   the eyebrow a third of a screen down. Cap its HEIGHT, not its width. */
.mth-hero__art { width: min(100%, 500px); }
.mth-hero__art svg { max-height: 320px; width: auto; margin-left: auto; }
.mth-rail { margin-top: calc(var(--tok-space-2) * -1); }