/* ─────────────────────────────────────────────
   FirstSnap.net — /methodology unique patterns
───────────────────────────────────────────── */

.mt-wrap { position: relative; z-index: 2; }

/* ── Pipeline / data-flow diagram ── */
.mt-pipeline {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .mt-pipeline { grid-template-columns: 1fr; gap: 18px; }
  .mt-arrow { display: none; }
}
.mt-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.mt-stage.engine {
  background: var(--surface);
  border-color: var(--chalk-border);
}
.mt-stage-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.mt-stage.engine .mt-stage-label { color: var(--chalk); }
.mt-stage-label .step {
  font-family: var(--font-mono);
  background: var(--surface3);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 1px 7px;
  border-radius: 0;
  letter-spacing: 0.02em;
}
.mt-stage.engine .mt-stage-label .step {
  background: var(--chalk-bg); color: var(--chalk); border-color: var(--chalk-border);
}
.mt-stage-h {
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.015em; color: var(--text);
  margin: 0;
}
.mt-stage-body {
  font-size: 12.5px; line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.mt-stage-list {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; color: var(--text-2);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.mt-stage-list li {
  display: flex; gap: 8px; align-items: baseline;
}
.mt-stage-list li::before {
  content: '→'; color: var(--chalk); font-weight: 700;
  font-family: var(--font-sans);
}
.mt-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--chalk);
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ── Input weights bar list ── */
.mt-weights {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px;
}
.mt-weight {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 0;
}
@media (max-width: 700px) { .mt-weight { grid-template-columns: 1fr; padding: 12px 16px; } }
.mt-weight-name {
  display: flex; flex-direction: column;
}
.mt-weight-name .h {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.mt-weight-name .d {
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
}
.mt-weight-bar {
  position: relative;
  height: 8px;
  background: var(--bg-deep);
  border-radius: 0;
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.mt-weight-bar-fill {
  height: 100%;
  background: var(--chalk);
  border-radius: 0;
}
.mt-weight-bar-fill.turf { background: var(--turf); }
.mt-weight-bar-fill.away { background: var(--away); }
.mt-weight-bar-fill.home { background: var(--home); }
.mt-weight-pct {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 800;
  color: var(--text);
  text-align: right;
  letter-spacing: -0.01em;
}

/* ── Tier criteria table ── */
.mt-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .mt-tiers { grid-template-columns: 1fr; } }

.mt-tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.mt-tier.gold {
  background: var(--surface);
  border: 0;
  border-left: 5px solid var(--chalk);
}
.mt-tier-name {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.mt-tier.gold .mt-tier-name { color: var(--chalk); }
.mt-tier-name .star { color: var(--chalk); }
.mt-tier-criteria {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12.5px; color: var(--text-2);
}
.mt-tier-criteria .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.mt-tier-criteria .row:last-child { border-bottom: none; }
.mt-tier-criteria .l { color: var(--muted); }
.mt-tier-criteria .v {
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 700;
}
.mt-tier-blurb {
  font-size: 12.5px; color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 0;
}

/* ── Timeline (refresh cadence) ── */
.mt-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 26px 0 0;
}
@media (max-width: 800px) { .mt-timeline { grid-template-columns: 1fr; gap: 14px; } }
.mt-timeline::before {
  content: '';
  position: absolute;
  top: 32px; left: 4%; right: 4%;
  height: 2px;
  background: linear-gradient(to right, var(--border-soft), var(--chalk), var(--border-soft));
  border-radius: 0;
}
@media (max-width: 800px) { .mt-timeline::before { display: none; } }
.mt-tl-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 16px 14px 16px;
  position: relative;
}
.mt-tl-step.active {
  background: var(--chalk-bg);
  border-color: var(--chalk-border);
}
.mt-tl-dot {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface3);
  border: 2px solid var(--bg);
  z-index: 2;
}
.mt-tl-step.active .mt-tl-dot {
  background: var(--chalk);
}
@media (max-width: 800px) { .mt-tl-dot { display: none; } }
.mt-tl-when {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--chalk);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.mt-tl-h {
  font-size: 14px; font-weight: 800;
  color: var(--text); letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.mt-tl-body {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  margin: 0;
}

/* ── "What we don't do" section ── */
.mt-notdo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) { .mt-notdo { grid-template-columns: 1fr; } }
.mt-notdo-item {
  background: rgba(3, 17, 10, 0.45);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.mt-notdo-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 0;
  background: var(--neg-bg);
  border: 1px solid #5e1f2a;
  color: var(--neg);
  font-size: 13px; font-weight: 800;
}
.mt-notdo-h {
  font-size: 14.5px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}
.mt-notdo-body {
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
  margin: 0;
}

/* ── Headline equation card (visual centerpiece) ── */
.mt-eq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 32px 36px 28px;
  margin-top: 10px;
}
.mt-eq-l {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--chalk); font-weight: 700;
  margin-bottom: 12px;
}
.mt-eq-row {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mt-eq-row .lhs { color: var(--chalk); }
.mt-eq-row .op { color: var(--muted); font-weight: 600; }
.mt-eq-row .term {
  background: var(--surface3);
  border: 1px solid var(--border-soft);
  padding: 4px 10px;
  border-radius: 0;
  color: var(--text-2);
  font-size: 0.65em;
  font-family: var(--font-mono);
  font-weight: 700;
}
.mt-eq-foot {
  font-size: 13px; color: var(--muted); line-height: 1.55;
  margin-top: 14px;
  max-width: 640px;
}

/* ── Glossary card grid (extends lp-gloss) ── */
.mt-gloss-extended {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .mt-gloss-extended { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mt-gloss-extended { grid-template-columns: 1fr; } }

/* TOC sidebar (anchor jumps) */
.mt-toc {
  position: sticky;
  top: 80px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 12.5px;
}
.mt-toc-h {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--chalk); font-weight: 700;
  margin-bottom: 6px;
}
.mt-toc a {
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 0;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.mt-toc a:hover { color: var(--text); background: var(--surface2); }
.mt-toc a.active {
  color: var(--chalk);
  background: var(--chalk-bg);
  font-weight: 700;
}

.mt-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 28px 60px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
@media (max-width: 980px) {
  .mt-body { grid-template-columns: 1fr; padding: 24px 20px 50px; gap: 22px; }
  .mt-toc { position: static; }
}


/* ─────────────────────────────────────────────
   Broadcast type layer. Display face on headings, mono on figures, condensed
   uppercase on micro-labels. Appended so the authored rules above stay intact.
───────────────────────────────────────────── */
.mt-stage-h, .mt-tl-h, .mt-notdo-h, .mt-toc-h {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  line-height: 1.04;
}
.mt-eq-val, .mt-weight-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.mt-eq-l, .mt-stage-n {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* Single-column body. The TOC sidebar was removed when the page was cut down
   to seven short sections — a sticky index for a page this length was more
   chrome than help. .mt-toc rules above are kept for a future long-form page. */
.mt-body--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1040px;
}


/* Plain-English walkthrough that replaced the formula block in §02. Numbered
   counter in the accent colour, lead-in sentence bolded, body text muted. */
.mt-steps {
  list-style: none;
  counter-reset: mt-step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mt-steps li {
  counter-increment: mt-step;
  position: relative;
  padding-left: 34px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.mt-steps li::before {
  content: counter(mt-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--chalk);
  background: var(--chalk-bg);
  border: 1px solid var(--border);
}
.mt-steps li .h {
  display: block;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 2px;
}
@media (max-width: 540px) {
  .mt-steps li { padding-left: 30px; font-size: 14px; }
  /* 36px of side padding on a 375px screen leaves ~230px of text column. One
     card carried this before and now five do, so it is worth the rule. */
  .mt-eq { padding: 22px 18px 20px; }
}

/* Two columns once there is room for two. The single-column body is ~1040px
   wide and `.mt-body--single .mt-steps li` caps each step at 62ch for
   readability, which in one column left roughly half the card empty down its
   whole height -- six short steps stacked against 600px of nothing. Two
   columns spend that width on content instead, and the 62ch cap still sets the
   measure inside each column, so nothing gets harder to read. Below 900px the
   flex column stands as it was. */
@media (min-width: 900px) {
  .mt-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 20px;
  }
}


/* ── Prose measure ──────────────────────────────────────────────────────────
   The single-column body is ~1040px, which is right for the card grids and
   much too wide for running text: these blocks were measuring 84-141
   characters a line against a 60-75 target. Cap the text blocks; the grids
   keep the full width. ch is font-relative, so each block lands on a similar
   measure despite differing font sizes. */
.mt-body--single .lp-section-sub,
.mt-body--single .mt-eq-foot,
.mt-body--single .mt-steps li,
.mt-body--single main > section > p {
  max-width: 62ch;
}

/* Keyboard focus. Only .gc-more carried a focus ring site-wide, so links in
   this page's body had no visible focus state at all. */
.mt-body--single a:focus-visible,
.mt-wrap .lp-final-cta a:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 3px;
}