/* 2026-10-09 15:50 IST - legs exercise page (/exercises/legs/): anatomy explorer layout. Every rule is scoped to
   body.pg-ex-legs. Body-map ramp = ordinal coral, validated (dataviz validate_palette.js --ordinal, dark mode) on
   #141414 and #1c1c1c: #8a3423 (steadies) < #d0502f (assists) < #ff8a5c (main mover). */
body.pg-ex-legs {
  --lx-3: #ff8a5c;
  --lx-2: #d0502f;
  --lx-1: #8a3423;
  --lx-0: #313131;
  --lx-body: #262626;
  --lx-dec: #2c2c2c;
  --lx-panel: var(--bg-2);
  --lx-card: var(--bg-2);
  --lx-ink-2: #d8d8d2;
  --lx-max: 1400px;
}

/* 2026-10-09 15:50 IST - shared page frame: wrap width, section rhythm, headings */
body.pg-ex-legs .lx-wrap { max-width: var(--lx-max); margin: 0 auto; padding: 0 var(--gutter); }
body.pg-ex-legs .lx-sec { padding: clamp(48px, 7vw, 96px) 0; }
body.pg-ex-legs .lx-sec-alt { background: var(--bg-2); }
body.pg-ex-legs .lx-sec h2 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 18px; }
body.pg-ex-legs .lx-kicker { margin: 0 0 8px; color: var(--accent); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
body.pg-ex-legs .lx-lead { color: var(--muted); max-width: 62ch; margin: 0; }
body.pg-ex-legs a:not(.btn) { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
body.pg-ex-legs a:not(.btn):hover { color: var(--accent); }

/* 2026-10-09 15:50 IST - split banner: text column + portrait photo frame */
body.pg-ex-legs main { padding-top: var(--nav-h); }
body.pg-ex-legs .lx-hero { background: radial-gradient(90% 120% at 0% 0%, rgba(255,138,92,.10), rgba(0,0,0,0) 60%), var(--bg); border-bottom: 1px solid var(--line); }
body.pg-ex-legs .lx-hero-in { max-width: var(--lx-max); margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
body.pg-ex-legs .lx-crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); }
body.pg-ex-legs .lx-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
body.pg-ex-legs .lx-crumbs a { text-decoration: none; }
body.pg-ex-legs .lx-h1 { display: flex; flex-direction: column; gap: 6px; }
body.pg-ex-legs .lx-h1-main { font-size: clamp(72px, 12vw, 168px); line-height: .9; color: var(--text); }
body.pg-ex-legs .lx-h1-sub { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.05; color: var(--accent); letter-spacing: .05em; }
body.pg-ex-legs .lx-hero-lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--lx-ink-2); max-width: 46ch; margin: 18px 0 22px; }
body.pg-ex-legs .lx-hero-jump { margin: 22px 0 0; }
body.pg-ex-legs .lx-hero-photo { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; max-height: 72vh; justify-self: end; width: 100%; background: var(--bg-3); }
body.pg-ex-legs .lx-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--lx-focus, 50% 40%); }

/* 2026-10-09 15:50 IST - Men | Women segmented switch (markup contract from /js/audience.js) */
body.pg-ex-legs .lx-aud { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); }
body.pg-ex-legs .lx-aud[hidden] { display: none; }
body.pg-ex-legs .lx-aud-lbl { padding: 0 10px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
body.pg-ex-legs .lx-aud button { min-height: 44px; min-width: 92px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 700 15px/1 var(--body); letter-spacing: .04em; cursor: pointer; transition: background-color .2s, color .2s; }
body.pg-ex-legs .lx-aud button:hover { color: var(--accent); }
body.pg-ex-legs .lx-aud button.is-active, body.pg-ex-legs .lx-aud button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* 2026-10-09 15:50 IST - overview: intro beside the muscle glossary cards */
body.pg-ex-legs .lx-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
body.pg-ex-legs .lx-intro p { font-size: 17px; line-height: 1.75; color: var(--lx-ink-2); margin: 0 0 16px; max-width: 68ch; }
body.pg-ex-legs .lx-gloss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
body.pg-ex-legs .lx-gl { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
body.pg-ex-legs .lx-gl h3 { font-size: 26px; letter-spacing: .04em; color: var(--text); }
body.pg-ex-legs .lx-gl p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
body.pg-ex-legs .lx-gl-plain { color: var(--muted); }
body.pg-ex-legs .lx-gl-job { color: var(--lx-ink-2); }
body.pg-ex-legs .lx-gl-count { color: var(--muted); font-size: 14px !important; }
body.pg-ex-legs .lx-gl-count b { color: var(--text); }

/* 2026-10-09 15:50 IST - explorer head: title + switch, then the exercise index chips */
body.pg-ex-legs .lx-sec-ex { background: var(--bg); }
body.pg-ex-legs .lx-ex-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
body.pg-ex-legs .lx-ex-head h2 { margin-bottom: 10px; }
body.pg-ex-legs .lx-index ol { list-style: none; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: lxi; }
body.pg-ex-legs .lx-index li { counter-increment: lxi; }
body.pg-ex-legs .lx-index a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
body.pg-ex-legs .lx-index a::before { content: counter(lxi, decimal-leading-zero); font: 400 17px/1 var(--display); color: var(--accent); }
body.pg-ex-legs .lx-index a:hover, body.pg-ex-legs .lx-index a[aria-current="true"] { border-color: var(--accent); color: var(--text); }

/* 2026-10-09 15:50 IST - split screen: sticky body-map stage (left) + scrolling exercise list (right) */
body.pg-ex-legs .lx-explorer { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
body.pg-ex-legs .lx-stage { position: sticky; top: calc(var(--nav-h) + 12px); }
body.pg-ex-legs .lx-stage-in { background: var(--lx-panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - var(--nav-h) - 24px); max-height: calc(100svh - var(--nav-h) - 24px); }
body.pg-ex-legs .lx-now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
body.pg-ex-legs .lx-now-lbl { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.pg-ex-legs .lx-now strong { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--display); letter-spacing: .04em; color: var(--text); }
body.pg-ex-legs .lx-stage-fig { position: relative; margin: 0; flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; }
body.pg-ex-legs .lx-svg-big { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--nav-h) - 250px); max-height: calc(100svh - var(--nav-h) - 250px); min-height: 280px; }

/* 2026-10-09 15:50 IST - body map marks: neutral silhouette, recessive detail, ordinal muscle shading, 2px surface gaps */
body.pg-ex-legs .lx-body { fill: var(--lx-body); }
body.pg-ex-legs .lx-dec { fill: var(--lx-dec); stroke: var(--lx-panel); stroke-width: 1.5; }
body.pg-ex-legs .mz { fill: var(--lx-0); stroke: var(--lx-panel); stroke-width: 2; stroke-linejoin: round; transition: fill .35s ease; }
body.pg-ex-legs .mz[data-lv="1"] { fill: var(--lx-1); }
body.pg-ex-legs .mz[data-lv="2"] { fill: var(--lx-2); }
body.pg-ex-legs .mz[data-lv="3"] { fill: var(--lx-3); }
body.pg-ex-legs .lx-svg-big .mz { cursor: help; }
body.pg-ex-legs .lx-svg-big .mz.is-hot { stroke: var(--text); stroke-width: 2; }
body.pg-ex-legs .lx-line { stroke: var(--lx-panel); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
body.pg-ex-legs .lx-lead { stroke: #5a5a56; stroke-width: 1; pointer-events: none; }
body.pg-ex-legs .lx-dot { fill: var(--text); stroke: var(--lx-panel); stroke-width: 2; pointer-events: none; }
body.pg-ex-legs .lx-lbl { fill: var(--lx-ink-2); font: 600 14px/1 var(--body); }
body.pg-ex-legs .lx-view { fill: var(--muted); font: 700 13px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
body.pg-ex-legs .lx-view-mini { font-size: 22px; letter-spacing: .12em; }

/* 2026-10-09 15:50 IST - legend + per-muscle level list (words beside every swatch: colour is never the only cue) */
body.pg-ex-legs .lx-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--lx-0); flex: none; }
body.pg-ex-legs .lx-sw[data-lv="1"] { background: var(--lx-1); }
body.pg-ex-legs .lx-sw[data-lv="2"] { background: var(--lx-2); }
body.pg-ex-legs .lx-sw[data-lv="3"] { background: var(--lx-3); }
body.pg-ex-legs .lx-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
body.pg-ex-legs .lx-legend li { display: inline-flex; align-items: center; gap: 6px; }
body.pg-ex-legs .lx-levels { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 14px; }
body.pg-ex-legs .lx-levels li { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.pg-ex-legs .lx-lv-name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pg-ex-legs .lx-lv-txt { color: var(--muted); margin-left: auto; white-space: nowrap; }
body.pg-ex-legs .lx-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 240px; padding: 8px 10px; border-radius: 8px; background: #0b0b0b; border: 1px solid #3a3a36; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 13px; line-height: 1.4; color: var(--text); transform: translate(-50%, calc(-100% - 12px)); }
body.pg-ex-legs .lx-tip b { display: block; font-weight: 700; }
body.pg-ex-legs .lx-tip span { color: var(--muted); }

/* 2026-10-09 15:50 IST - exercise cards */
body.pg-ex-legs .lx-list { display: grid; gap: 18px; min-width: 0; }
body.pg-ex-legs .lx-ex { scroll-margin-top: calc(var(--nav-h) + 16px); background: var(--lx-card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 2.2vw, 28px); transition: border-color .25s, box-shadow .25s; }
@media (min-width: 1001px) {
  body.pg-ex-legs .lx-ex.is-active { border-color: rgba(255,138,92,.55); box-shadow: inset 4px 0 0 var(--lx-3); }
}
body.pg-ex-legs .lx-ex-top { display: flex; align-items: flex-start; gap: 14px; }
body.pg-ex-legs .lx-num { font: 400 44px/.9 var(--display); color: var(--accent); min-width: 1.4em; }
body.pg-ex-legs .lx-ex-title { flex: 1; min-width: 0; }
body.pg-ex-legs .lx-ex-title h3 { font-size: clamp(30px, 3vw, 40px); }
body.pg-ex-legs .lx-meta { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--lx-ink-2); }
body.pg-ex-legs .lx-meta-k { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; }
body.pg-ex-legs .lx-show { flex: none; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 600 13px/1 var(--body); cursor: pointer; transition: border-color .2s, color .2s; }
body.pg-ex-legs .lx-show[hidden] { display: none; }
body.pg-ex-legs .lx-show:hover, body.pg-ex-legs .lx-show[aria-pressed="true"] { border-color: var(--lx-3); color: var(--lx-3); }
body.pg-ex-legs .lx-ex-body h4 { font: 700 13px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 22px 0 8px; }
body.pg-ex-legs .lx-impact { margin: 0; color: var(--lx-ink-2); line-height: 1.7; }
body.pg-ex-legs .lx-worked { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
body.pg-ex-legs .lx-mini { display: none; margin: 0; flex: none; width: clamp(120px, 34vw, 190px); background: var(--lx-panel); }
body.pg-ex-legs .lx-svg-mini { display: block; width: 100%; height: auto; }
body.pg-ex-legs .lx-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.pg-ex-legs .lx-chip { display: block; padding: 6px 12px 6px 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
body.pg-ex-legs .lx-chip::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--lx-0); }
body.pg-ex-legs .lx-chip dt, body.pg-ex-legs .lx-chip dd { display: inline; }
body.pg-ex-legs .lx-chip dt { margin-right: 6px; }
body.pg-ex-legs .lx-chip[data-lv="3"]::before { background: var(--lx-3); }
body.pg-ex-legs .lx-chip[data-lv="2"]::before { background: var(--lx-2); }
body.pg-ex-legs .lx-chip[data-lv="1"]::before { background: var(--lx-1); }
body.pg-ex-legs .lx-chip dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.pg-ex-legs .lx-chip dd { margin: 0; color: var(--text); font-weight: 600; }
body.pg-ex-legs .lx-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
body.pg-ex-legs .lx-steps, body.pg-ex-legs .lx-mist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--lx-ink-2); }
body.pg-ex-legs .lx-steps { counter-reset: lxs; }
body.pg-ex-legs .lx-steps li { counter-increment: lxs; position: relative; padding-left: 30px; }
body.pg-ex-legs .lx-steps li::before { content: counter(lxs); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text); }
body.pg-ex-legs .lx-mist li { position: relative; padding-left: 22px; }
body.pg-ex-legs .lx-mist li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 10px; height: 2px; background: var(--err); transform: rotate(45deg); }
body.pg-ex-legs .lx-mist li::after { content: ""; position: absolute; left: 3px; top: .62em; width: 10px; height: 2px; background: var(--err); transform: rotate(-45deg); }

/* 2026-10-09 15:50 IST - Men / Women starting plan blocks (both show without JS, one with the switch) */
body.pg-ex-legs .lx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
body.pg-ex-legs .lx-plan { background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
body.pg-ex-legs .lx-plan[hidden] { display: none; }
body.pg-ex-legs .lx-plan-who { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
body.pg-ex-legs .lx-plan-nums { margin: 0 0 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.pg-ex-legs .lx-plan-nums div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
body.pg-ex-legs .lx-plan-nums dt { font-size: 12px; color: var(--muted); font-weight: 600; }
body.pg-ex-legs .lx-plan-nums dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.2; }
body.pg-ex-legs .lx-plan-focus { margin: 0; color: var(--lx-ink-2); font-size: 15px; line-height: 1.6; }
body.pg-ex-legs .lx-swap { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed #3a3a36; color: var(--lx-ink-2); font-size: 15px; }
body.pg-ex-legs .lx-swap-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }

/* 2026-10-09 15:50 IST - table twin of the body map (inside a disclosure; scrolls inside its own box on phones) */
body.pg-ex-legs .lx-tbl-wrap { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
body.pg-ex-legs .lx-tbl-wrap summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--text); }
body.pg-ex-legs .lx-tbl-scroll { overflow-x: auto; padding-bottom: 14px; }
body.pg-ex-legs .lx-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
body.pg-ex-legs .lx-tbl caption { text-align: left; color: var(--muted); padding-bottom: 8px; }
body.pg-ex-legs .lx-tbl th, body.pg-ex-legs .lx-tbl td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
body.pg-ex-legs .lx-tbl thead th { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
body.pg-ex-legs .lx-tbl td[data-lv="0"] { color: #77776f; }
body.pg-ex-legs .lx-tbl td[data-lv="3"] { font-weight: 700; color: var(--text); }

/* 2026-10-09 15:50 IST - safety, call to action and onward links (FAQ now uses the shared .qa-* component, 2026-10-09 17:41 IST) */
body.pg-ex-legs .lx-safety > * { max-width: 920px; }
body.pg-ex-legs .lx-safety p { font-size: 17px; line-height: 1.75; color: var(--lx-ink-2); margin: 0 0 14px; }
body.pg-ex-legs .lx-safety p:first-of-type { border-left: 3px solid var(--accent); padding-left: 16px; }
body.pg-ex-legs .lx-cta { border-radius: 20px; padding: clamp(24px, 4vw, 44px); background: linear-gradient(120deg, rgba(255,138,92,.16), rgba(255,210,0,.06)); border: 1px solid rgba(255,138,92,.35); margin-bottom: clamp(36px, 5vw, 60px); }
body.pg-ex-legs .lx-cta p { color: var(--lx-ink-2); max-width: 64ch; margin: 0 0 20px; font-size: 17px; }
body.pg-ex-legs .lx-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
body.pg-ex-legs .lx-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px; }
body.pg-ex-legs .lx-more h2 { font-size: clamp(28px, 3.4vw, 40px); }
body.pg-ex-legs .lx-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
body.pg-ex-legs .lx-links li { display: flex; }
body.pg-ex-legs .lx-links a { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); text-decoration: none; transition: border-color .2s; }
body.pg-ex-legs .lx-links a:hover, body.pg-ex-legs .lx-links a:focus-visible { border-color: var(--accent); }
body.pg-ex-legs .lx-links span { font: 400 22px/1.05 var(--display); letter-spacing: .04em; }
body.pg-ex-legs .lx-links small { color: var(--muted); font-size: 13px; }

/* 2026-10-09 17:58 IST - wide explorer (desktop only): the section uses up to min(96vw, 1760px) with slimmer
   gutters; the sticky map panel is sized from the viewport height (100dvh with a 100vh fallback, minus the site
   header and a top/bottom margin) and the map column is sized from that height so the front/back figure (viewBox
   600 x 474, aspect 1.266) fills the panel, clamped to 40-45% of the row so the cards keep ~55-60%. */
body.pg-ex-legs {
  --lx-ex-max: min(96vw, 1760px);
  --lx-stage-m: 12px;
  --lx-stage-h: calc(100vh - var(--nav-h) - 2 * var(--lx-stage-m));
  --lx-fig-ar: 1.266;
  --lx-chrome: 240px;
  --lx-map-max: 45%;
}
@supports (height: 100dvh) {
  body.pg-ex-legs { --lx-stage-h: calc(100dvh - var(--nav-h) - 2 * var(--lx-stage-m)); }
}
@media (min-width: 1001px) {
  body.pg-ex-legs .lx-sec-ex > .lx-wrap { max-width: var(--lx-ex-max); padding: 0 clamp(16px, 2.5vw, 48px); }
  body.pg-ex-legs .lx-explorer { grid-template-columns: minmax(0, clamp(40%, calc((var(--lx-stage-h) - var(--lx-chrome)) * var(--lx-fig-ar) + 40px), var(--lx-map-max))) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 40px); }
  body.pg-ex-legs .lx-stage { top: calc(var(--nav-h) + var(--lx-stage-m)); }
  body.pg-ex-legs .lx-stage-in { height: max(var(--lx-stage-h), 420px); max-height: none; }
  body.pg-ex-legs .lx-stage-fig { flex: 1 1 0; min-height: 180px; }
  body.pg-ex-legs .lx-svg-big { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; min-height: 0; }
  body.pg-ex-legs .lx-legend, body.pg-ex-legs .lx-now { flex: none; }
  body.pg-ex-legs .lx-levels { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.pg-ex-legs .lx-impact { max-width: 85ch; }
}
/* 2026-10-09 18:10 IST - small desktops (1001-1300px) with height to spare: the panel is too narrow for the
   two-column muscle list (names were cut to "Quadrice..."), so the list stacks in one column */
@media (min-width: 1001px) and (max-width: 1300px) and (min-height: 760px) {
  body.pg-ex-legs .lx-levels { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* 2026-10-09 18:04 IST - very wide screens (2200px+, e.g. 2560 x 1440): the 1760px cap left the tall map panel
   half empty, so the explorer grows to min(90vw, 2240px) and the map column may take up to half the row */
@media (min-width: 2200px) {
  body.pg-ex-legs { --lx-ex-max: min(90vw, 2240px); --lx-map-max: 50%; }
}

/* 2026-10-09 16:12 IST - narrow desktop (list column under ~560px): steps and mistakes stack in one column */
@media (min-width: 1001px) and (max-width: 1240px) {
  body.pg-ex-legs .lx-cols { grid-template-columns: 1fr; }
}
/* 2026-10-09 15:50 IST - below 1000px: no sticky stage; each card carries its own small body map */
@media (max-width: 1000px) {
  body.pg-ex-legs .lx-overview { grid-template-columns: 1fr; }
  body.pg-ex-legs .lx-explorer { grid-template-columns: 1fr; }
  body.pg-ex-legs .lx-stage { position: static; }
  body.pg-ex-legs .lx-stage-in { background: none; border: 0; padding: 0; max-height: none; }
  body.pg-ex-legs .lx-now, body.pg-ex-legs .lx-stage-fig, body.pg-ex-legs .lx-levels { display: none; }
  body.pg-ex-legs .lx-show { display: none; }
  body.pg-ex-legs .lx-mini { display: block; border-radius: 12px; padding: 6px; }
}
/* 2026-10-09 15:50 IST - phones: stacked banner, one-column card content */
@media (max-width: 760px) {
  body.pg-ex-legs .lx-hero-in { grid-template-columns: 1fr; }
  body.pg-ex-legs .lx-hero-photo { order: -1; aspect-ratio: 16 / 10; max-height: none; justify-self: stretch; border-radius: 16px; }
  body.pg-ex-legs .lx-cols { grid-template-columns: 1fr; }
  body.pg-ex-legs .lx-worked { align-items: flex-start; }
  body.pg-ex-legs .lx-num { font-size: 36px; }
}
@media (max-width: 480px) {
  body.pg-ex-legs .lx-worked { flex-direction: column; align-items: stretch; }
  body.pg-ex-legs .lx-mini { width: 100%; max-width: 320px; }
  body.pg-ex-legs .lx-aud { display: flex; width: 100%; }
  body.pg-ex-legs .lx-aud button { flex: 1; min-width: 0; }
  body.pg-ex-legs .lx-plan-nums { grid-template-columns: minmax(0, .6fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 6px; }
  body.pg-ex-legs .lx-plan-nums div { padding: 8px 10px; }
  body.pg-ex-legs .lx-plan-nums dd { font-size: 16px; }
  body.pg-ex-legs .lx-index a { font-size: 13px; padding: 6px 12px; }
}
/* 2026-10-09 15:50 IST - reduced motion: no fill fades or hover lifts */
@media (prefers-reduced-motion: reduce) {
  body.pg-ex-legs .mz, body.pg-ex-legs .lx-ex, body.pg-ex-legs .lx-aud button, body.pg-ex-legs .lx-index a { transition: none; }
}
/* 2026-10-09 15:50 IST - forced colours: keep the map readable with system colours (levels stay in the words) */
@media (forced-colors: active) {
  body.pg-ex-legs .mz { stroke: CanvasText; }
  body.pg-ex-legs .mz[data-lv="3"] { fill: Highlight; }
}