/* ═══════════════════════════════════════════════════════════════
   ORGANIC REACH — AI SEARCH AUDIT METHODOLOGY
   Page-scoped. Every selector is prefixed .mth- so it cannot collide
   with pages.css / audit.css or fight them on specificity.
   Inherits the global token set; defines no new brand colours.
   ═══════════════════════════════════════════════════════════════ */

/* Page-scoped accessible colour roles.
   The global --faint and --accent fail WCAG AA as small text on the light
   theme (2.79:1 and 2.68:1). These roles keep the dark theme exactly as the
   brand defines it and substitute darker values only where light theme needs. */
.mth-hero,.mth-sec{
  --mth-quiet:#828c7b;   /* small supporting text  5.67:1 on --bg */
  --mth-label:var(--accent);
  --mth-alert:var(--coral);
}
html[data-theme="light"] .mth-hero,
html[data-theme="light"] .mth-sec{
  --mth-quiet:#656e5b;   /* 4.70:1 on --bg, 5.34:1 on white */
  --mth-label:#46700c;   /* 5.16:1 on --bg, 5.86:1 on white */
  --mth-alert:#b04726;   /* 4.89:1 on --bg, 5.56:1 on white */
}

.mth-wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.mth-measure{max-width:64ch}

/* ─────────── Hero ─────────── */
.mth-hero{padding:132px 0 56px}
.mth-hero h1{font-size:clamp(34px,5.2vw,54px);line-height:1.04;letter-spacing:-.028em;font-weight:800;margin:0 0 20px}
.mth-hero .mth-standfirst{font-size:clamp(15px,1.6vw,18px);line-height:1.62;color:var(--muted);max-width:62ch;margin:0}
.mth-hero .mth-standfirst strong{color:var(--text);font-weight:700}

/* The score rail — the one bold element on the page */
.mth-rail{margin:64px 0 8px}
.mth-rail-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:34px}
.mth-rail-head h2{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em}
.mth-rail-head p{margin:0;font-size:13px;color:var(--mth-quiet)}

.mth-scale{position:relative;padding:0 0 96px}
.mth-track{position:relative;height:12px;border-radius:100px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.mth-track-fill{position:absolute;inset:0 auto 0 0;border-radius:100px;background:linear-gradient(90deg,color-mix(in srgb,var(--coral) 70%,transparent),color-mix(in srgb,var(--accent) 80%,transparent))}
.mth-tick{position:absolute;top:-9px;transform:translateX(-50%);text-align:center}
.mth-tick i{display:block;width:2px;height:30px;margin:0 auto;background:var(--mth-alert);border-radius:2px}
.mth-tick--end i{background:var(--line-strong)}
.mth-tick b{display:block;margin-top:10px;font-family:"DM Mono",monospace;font-size:16px;font-weight:600;color:var(--mth-alert);letter-spacing:-.01em}
.mth-tick--end b{color:var(--mth-quiet);font-size:13px}
.mth-tick span{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--muted);white-space:nowrap}
.mth-tick--end span{color:var(--mth-quiet)}
.mth-scale-note{position:absolute;left:0;bottom:0;font-size:12.5px;color:var(--mth-quiet);max-width:56ch;line-height:1.55}

/* ─────────── Section shell ─────────── */
.mth-sec{padding:72px 0;border-top:1px solid var(--line)}
.mth-sec--flush{border-top:0}
.mth-sec h2{font-size:clamp(24px,3vw,32px);line-height:1.14;letter-spacing:-.022em;font-weight:800;margin:0 0 14px}
.mth-sec>.mth-wrap>p.mth-lede{font-size:15px;line-height:1.62;color:var(--muted);max-width:62ch;margin:0 0 40px}
.mth-tag{display:inline-block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mth-label);margin-bottom:14px}

/* ─────────── Pipeline (a real sequence, so it is numbered) ─────────── */
.mth-flow{display:grid;gap:0;counter-reset:step}
.mth-step{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--line)}
.mth-step:first-child{border-top:0;padding-top:0}
.mth-step-n{font-family:"DM Mono",monospace;font-size:13px;color:var(--mth-label);padding-top:3px;position:relative}
.mth-step-n::after{content:"";position:absolute;left:6px;top:26px;bottom:-30px;width:1px;background:var(--line)}
.mth-step:last-child .mth-step-n::after{display:none}
.mth-step h3{font-size:17px;font-weight:700;margin:0 0 7px;letter-spacing:-.01em}
.mth-step p{margin:0;font-size:14px;line-height:1.65;color:var(--muted);max-width:70ch}

/* ─────────── Gates ─────────── */
.mth-gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.mth-gate{padding:22px;border:1px solid color-mix(in srgb,var(--mth-alert) 34%,transparent);border-radius:16px;background:color-mix(in srgb,var(--mth-alert) 6%,var(--surface))}
.mth-gate-cap{font-family:"DM Mono",monospace;font-size:11px;color:var(--mth-alert);letter-spacing:.04em}
.mth-gate h3{font-size:15.5px;font-weight:700;margin:9px 0 8px;letter-spacing:-.01em}
.mth-gate p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.mth-gate-why{margin-top:30px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.mth-gate-why p{margin:0;font-size:13.5px;line-height:1.68;color:var(--muted);max-width:78ch}
.mth-gate-why strong{color:var(--text)}

/* ─────────── Weights table ─────────── */
.mth-weights{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.mth-wrow{display:grid;grid-template-columns:1fr 148px 62px;align-items:center;gap:18px;padding:13px 20px;border-top:1px solid var(--line)}
.mth-wrow:first-child{border-top:0}
.mth-wgroup{padding:16px 20px 9px;border-top:1px solid var(--line);font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mth-quiet)}
.mth-wgroup:first-child{border-top:0}
.mth-wname{font-size:13.5px;color:var(--text);line-height:1.4}
.mth-wname em{display:block;font-style:normal;font-size:12px;color:var(--mth-quiet);margin-top:3px;line-height:1.45}
.mth-wbar{height:7px;border-radius:100px;background:var(--surface-2);overflow:hidden}
.mth-wbar i{display:block;height:100%;border-radius:100px;background:var(--mth-label)}
.mth-wbar--core i{background:var(--mth-label)}
.mth-wbar--gate i{background:var(--mth-alert)}
.mth-wnum{font-family:"DM Mono",monospace;font-size:13px;color:var(--muted);text-align:right}
.mth-wnum--gate{color:var(--mth-alert)}
.mth-core-flag{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:100px;border:1px solid color-mix(in srgb,var(--mth-label) 40%,transparent);font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.06em;color:var(--mth-label);vertical-align:1px}
.mth-wfoot{padding:16px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mth-quiet);line-height:1.6}

/* ─────────── Not-scored list ─────────── */
.mth-excl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.mth-ex{padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.mth-ex-status{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mth-quiet);border:1px solid var(--line);border-radius:100px;padding:4px 10px;display:inline-block}
.mth-ex h3{font-size:15px;font-weight:700;margin:11px 0 7px;letter-spacing:-.01em}
.mth-ex p{margin:0;font-size:13px;line-height:1.62;color:var(--muted)}

/* ─────────── Limits / integrity split ─────────── */
.mth-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px}
.mth-split h2{font-size:clamp(21px,2.4vw,26px);margin-bottom:16px}
.mth-list{list-style:none;margin:0;padding:0}
.mth-list li{position:relative;padding:11px 0 11px 24px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--muted)}
.mth-list li:first-child{border-top:0}
.mth-list li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:1px;background:var(--mth-label)}
.mth-split p{font-size:13.5px;line-height:1.68;color:var(--muted);margin:0 0 13px}

/* ─────────── Sources ─────────── */
.mth-src{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:12px}
.mth-src a{display:block;padding:17px 19px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .2s,background .2s}
.mth-src a:hover,.mth-src a:focus-visible{border-color:var(--line-strong);background:var(--surface-2)}
.mth-src strong{display:block;font-size:13.5px;color:var(--text);margin-bottom:5px;font-weight:700}
.mth-src span{display:block;font-size:12px;line-height:1.55;color:var(--muted)}
.mth-src em{display:block;font-style:normal;margin-top:9px;font-size:11.5px;color:var(--mth-label)}

/* ─────────── CTA ─────────── */
.mth-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;padding:36px 38px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface)}
.mth-cta h2{margin:0 0 9px;font-size:clamp(21px,2.5vw,27px)}
.mth-cta p{margin:0;font-size:13.5px;color:var(--muted);max-width:52ch;line-height:1.6}

/* ─────────── Responsive ─────────── */
@media(max-width:860px){
  .mth-hero{padding:112px 0 40px}
  .mth-rail{margin-top:46px}
  .mth-scale{padding-bottom:118px}
  .mth-tick span{white-space:normal;max-width:82px;margin-inline:auto}
  .mth-wrow{grid-template-columns:1fr 76px;gap:12px}
  .mth-wbar{display:none}
  .mth-split{gap:34px}
}
@media(max-width:560px){
  .mth-step{grid-template-columns:34px 1fr;gap:14px}
  .mth-step-n::after{left:4px}
  .mth-tick b{font-size:13px}
  .mth-tick span{font-size:10px}
  .mth-cta{padding:26px 22px}
}

/* ─────────── Accessibility floor ─────────── */
.mth-sec a:focus-visible,.mth-cta a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  .mth-src a{transition:none}
}