/* ============================================================
   NIZOV.AI — method.html page tweaks (.mh- only)
   COMPOSES the system.css kit (.sec/.rail/.tl/.kpis/.statement/.wash).
   Editorial · anti-card · hairline-driven. No boxed cards here —
   only genuinely page-specific spacing/layout lives in this file.
   ============================================================ */

/* nav active state (this page = "Как обучаю") — not provided by base.css */
.nav__links a[aria-current="page"]{ color:var(--ink-0); }
.nav__links a[aria-current="page"]::after{ width:100%; }

/* ---------- hero: editorial intro, clears the fixed nav ---------- */
.mh-hero{ padding-top:calc(var(--section) + 1.4rem); }
.mh-hero__eyebrow{ display:inline-flex; margin-bottom:1.6rem; }
.mh-hero__title{ max-width:18ch; margin-bottom:1.4rem; }
.mh-hero__lede{ margin-bottom:2.8rem; }
.mh-hero__kpis{ margin-bottom:2.4rem; }
.mh-hero__term{ margin-top:.2rem; }

/* ---------- 01 · format rail: roomy 3-column read ---------- */
.mh-format .rail__row{ grid-template-columns:minmax(118px,auto) minmax(0,1.05fr) minmax(0,1.55fr); }

/* ---------- 02 · roadmap spine: room under the lead + lit progress fill ---------- */
.mh-tl{ margin-top:clamp(1.8rem,3.4vw,3rem); }
.mh-tl .tl__fill{ background:linear-gradient(var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--glow); }

/* D — stage activation (only when JS scrub is live → reduced-motion shows all stages full) */
.mh-tl .tl__node::before{ transition:background .45s var(--ease), box-shadow .45s var(--ease); }
.mh-tl.fx-on .tl__node{ opacity:.46; transition:opacity .5s var(--ease); }
.mh-tl.fx-on .tl__node.is-active{ opacity:1; }
.mh-tl .tl__node.is-active::before{ background:var(--accent); box-shadow:0 0 14px var(--glow); }

/* ---------- 03 · author-guides rail: title at h3 scale + room so it doesn't wrap narrow ---------- */
.mh-guides .rail__row{ grid-template-columns:minmax(50px,auto) minmax(0,1.25fr) minmax(0,1.4fr); align-items:start; }
.mh-guides .rail__t{ font-size:var(--t-h3); }

/* ---------- CTA: editorial wash, centered statement (no card) ---------- */
.mh-cta{ text-align:center; }
.mh-cta__inner{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; }
.mh-cta .statement{ margin:0 auto; }
.mh-cta__sub{ max-width:52ch; }

/* ---------- responsive: rails stack cleanly (system.css ships no .rail breakpoint) ---------- */
@media(max-width:680px){
  .mh-format .rail__row,
  .mh-guides .rail__row{ grid-template-columns:1fr; gap:.4rem; }
  .mh-format .rail__t,
  .mh-guides .rail__t{ font-size:1.05rem; }
}