/* Advanced Strategy page (Guide Part 6) — new components only.
   Extends style.css + guide.css.
   Every class here is adv- prefixed on purpose: strategy.css and odds.css
   already carry a duplicated block of shared components (.chart, .tip,
   .refcard, .pc--ghost, .hand--center, .act-pill …). Rather than copy that
   block a third time, the equivalents below use distinct names so nothing
   collides and a later consolidation into guide.css is a clean rename. */

/* ---------- decision pills (near-duplicate of .act-pill) ---------- */
.adv-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.2}
.adv-pill svg{width:14px;height:14px;flex:none}
.adv-pill--ride{background:#dbf6ee;color:#0a5744;box-shadow:inset 0 0 0 1.5px #7fdcc4}
.adv-pill--pull{background:#fdf3d8;color:#795000;box-shadow:inset 0 0 0 1.5px #f2c94c}
.adv-pill__b{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:currentColor;flex:none}
.adv-pill__b b{color:#fff;font-size:.66rem;line-height:1}
.adv-pill--ride .adv-pill__b b{color:#dbf6ee}
.adv-pill--pull .adv-pill__b b{color:#fdf3d8}

/* ---------- ghost / outlined missing card (near-duplicate of .pc--ghost) ---------- */
.adv-ghost{background:transparent;border:2px dashed #9fb6c6;box-shadow:none;color:var(--muted)}
.adv-ghost b,.adv-ghost em{opacity:.75}
.adv-ghost em{display:none}
.adv-ghost b{left:0;right:0;top:50%;transform:translateY(-50%);align-items:center;font-size:calc(var(--w) * .42)}
.adv-ghost b i{display:none}

/* ---------- helpers (near-duplicates of .hand--center / .centre) ---------- */
.adv-center{justify-content:center;flex-wrap:wrap}
.adv-centre{text-align:center}
.adv-meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}

/* ---------- small labelling badges ---------- */
.adv-badge{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:3px 12px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.3}
.adv-badge--1{background:#8ea3b3}
.adv-badge--2{background:var(--blue)}
.adv-badge--3{background:var(--teal)}
.adv-badge--high{background:#fdf3d8;color:#6b4700;box-shadow:inset 0 0 0 1px #f1e2b6}
.adv-badge--none{background:#eef2f5;color:#3f5a75;box-shadow:inset 0 0 0 1px #b9c4cc}

/* ---------- big out counter (near-duplicate of .outs) ---------- */
.adv-outs{display:inline-flex;align-items:center;gap:14px;padding:11px 22px;border-radius:999px;background:var(--navy);color:#fff}
.adv-outs b{font-size:1.9rem;font-weight:800;color:var(--yellow);line-height:1}
.adv-outs span{font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.82rem;line-height:1.2}
.adv-outs--teal{background:var(--teal)}
.adv-outs--teal b{color:#fff}
.adv-outs--warn{background:#7a241d}
.adv-outs--warn b{color:#ffd7d4}

/* ---------- grouped outs (near-duplicate of .outgrid / .outgroup) ---------- */
.adv-outgrid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0}
.adv-outgroup{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 12px;border-radius:16px;background:#f4f9f7;border:1px solid var(--line);min-width:0}
.adv-outgroup .hand{justify-content:center;gap:5px;flex-wrap:wrap}
.adv-outgroup__cap{font-weight:800;color:var(--navy);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;text-align:center;line-height:1.3}
.adv-outgroup__val{font-weight:800;color:#0a5744;font-size:.9rem}

/* ---------- rank groups (near-duplicate of .rank-groups) ---------- */
.adv-ranks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.adv-rank{border:1px solid var(--line);border-radius:14px;background:#f4f9f7;padding:13px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.adv-rank__n{font-weight:800;color:var(--navy);font-size:1.05rem;line-height:1.2}
.adv-rank .hand{justify-content:center;gap:4px}
.adv-rank small{color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.35}

/* ---------- verdict strip (near-duplicate of .verdict) ---------- */

/* ---------- illustrative label (near-duplicate of .illus) ---------- */
.adv-illus{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fdf3d8;color:#5c3f00;font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;box-shadow:inset 0 0 0 1px #f1e2b6;line-height:1.3}
.adv-illus svg{width:14px;height:14px;flex:none;color:#8a6100}
.adv-illus--grey{background:#eef2f5;box-shadow:inset 0 0 0 1px #b9c4cc;color:#3f5a75}
.adv-illus--grey svg{color:#5b7186}

/* ---------- three-state cards (near-duplicate of .states3 / .state3) ---------- */
.adv-states{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.adv-state{border-radius:14px;padding:16px 14px;text-align:center;border:1px solid var(--line);background:#fff}
.adv-state b{display:block;color:var(--navy);font-size:1.02rem;line-height:1.3}
.adv-state span{display:block;margin-top:7px;font-size:.9rem;line-height:1.55;color:var(--text)}
.adv-state--pos{background:#f2fbf7;border-color:#bfe6d6}
.adv-state--pos b{color:#0a5744}
.adv-state--even{background:#fdf3d8;border-color:#f1e2b6}
.adv-state--even b{color:#6b4700}
.adv-state--neg{background:#fdf5f4;border-color:#f3ccc8}
.adv-state--neg b{color:#7a241d}

/* ---------- generic layout grids ---------- */
.adv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.adv-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.adv-grid3>*,.adv-grid2>*{min-width:0}

/* ---------- numbered step list (near-duplicate of .f5) ---------- */
.adv-steps{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.adv-steps__head{display:flex;align-items:center;gap:12px;padding:15px 22px;background:var(--panel);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;line-height:1.3}
.adv-steps__head svg{width:20px;height:20px;flex:none;color:#a8ecd9}
.adv-steps__list{list-style:none;margin:0;padding:0}
.adv-steps__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 22px;border-top:1px solid var(--line);align-items:start}
.adv-steps__list li:first-child{border-top:0}
.adv-steps__n{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:.82rem;display:grid;place-items:center;flex:none}
.adv-steps__list p{margin:0;color:var(--text);line-height:1.65;font-size:1rem}
.adv-steps__list strong{color:var(--navy)}
.adv-steps__foot{padding:14px 22px;border-top:1px solid var(--line);background:#f4f9f7;color:var(--muted);font-size:.92rem;line-height:1.55}

/* ---------- pay-table column (near-duplicate of .pt) ---------- */
.adv-pt{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.adv-pt__head{padding:14px 18px;background:var(--panel);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;line-height:1.35}
.adv-pt__head small{display:block;font-weight:700;letter-spacing:.03em;font-size:.72rem;color:#a8ecd9;text-transform:none;margin-top:3px}
.adv-pt__rows{list-style:none;margin:0;padding:0}
.adv-pt__rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 18px;border-top:1px solid var(--line);font-size:.98rem;color:var(--text)}
.adv-pt__rows li:first-child{border-top:0}
.adv-pt__rows li b{color:var(--navy);font-weight:800;white-space:nowrap}
.adv-pt__rows li.adv-is-up{background:#f2fbf7}
.adv-pt__rows li.adv-is-up b{color:#0a7a52}
.adv-pt__foot{margin-top:auto;padding:13px 18px;border-top:1px solid var(--line);background:#f4f9f7;color:var(--muted);font-size:.88rem;line-height:1.55}

/* ---------- checklist (near-duplicate of .checks) ---------- */
.adv-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adv-checks li{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:13px;background:#fff;border:1px solid var(--line);color:var(--text);font-size:1rem;line-height:1.55;box-shadow:var(--shadow)}
.adv-checks li svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--teal)}
.adv-checks li strong{color:var(--navy)}

/* ================================================================
   COMPONENTS THAT ARE NEW TO THIS PAGE
   ================================================================ */

/* ---------- side-by-side hand comparison; stacks (never shrinks) on mobile ---------- */
.adv-vs{margin-top:26px;background:#fdf6e3;border:1px solid #f0dfae;border-radius:20px;padding:22px}
.adv-vs__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.adv-vs__side{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.adv-vs__side .hand{justify-content:center;flex-wrap:wrap}
.adv-vs__name{font-weight:800;color:var(--navy);font-size:1.05rem;line-height:1.3}
.adv-vs__name small{display:block;font-weight:600;color:var(--muted);font-size:.85rem;margin-top:3px}
.adv-vs__facts{display:flex;flex-direction:column;gap:7px;width:100%;margin:0;padding:0;list-style:none}
.adv-vs__facts li{display:flex;justify-content:space-between;gap:12px;padding:9px 13px;border-radius:11px;background:#f4f9f7;border:1px solid var(--line);font-size:.95rem;color:var(--text);text-align:left;line-height:1.5}
.adv-vs__facts li b{color:var(--navy);white-space:nowrap;font-weight:800}
.adv-vs__facts li.adv-is-key{background:#dbf6ee;border-color:#7fdcc4;color:#0a5744}
.adv-vs__facts li.adv-is-key b{color:#0a5744}
.adv-vs__facts li.adv-is-flat{background:#eef2f5;border-color:#b9c4cc;color:#3f5a75}
.adv-vs__mid{display:grid;place-items:center;font-weight:800;color:#b4860a;font-size:1.5rem;text-transform:uppercase;letter-spacing:.06em}
.adv-vs__foot{margin:18px 0 0;text-align:center;color:#5c3f00;font-weight:700;line-height:1.6;font-size:.98rem}
.adv-vs--teal{background:#eaf6f3;border-color:#bfe0d8}
.adv-vs--teal .adv-vs__mid{color:var(--teal)}
.adv-vs--teal .adv-vs__foot{color:#0a5744}
.adv-vs--blue{background:#eaf2fb;border-color:#c6dcf3}
.adv-vs--blue .adv-vs__mid{color:var(--blue)}
.adv-vs--blue .adv-vs__foot{color:#14345c}

/* ---------- the recurring four-beat progression ---------- */
.adv-prog{display:flex;align-items:stretch;gap:0;margin-top:26px}
.adv-prog__step{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.adv-prog__n{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;line-height:1.3}
.adv-prog__n i{font-style:normal;width:21px;height:21px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.68rem;flex:none}
.adv-prog__t{font-weight:800;color:var(--navy);font-size:1rem;line-height:1.3}
.adv-prog__d{margin:0;color:var(--text);font-size:.95rem;line-height:1.6}
.adv-prog__arrow{width:34px;flex:none;display:grid;place-items:center;color:#b6cbd8}
.adv-prog__arrow svg{width:20px;height:20px}
.adv-prog__step--final{border-color:#7fdcc4;background:#fbfffe}

/* ---------- exposed-card ladder ---------- */
.adv-expo{display:flex;align-items:stretch;gap:0;margin-top:24px}
.adv-expo__stage{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.adv-expo__head{padding:12px 16px;background:#eef4f8;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;text-align:center;line-height:1.4}
.adv-expo__body{padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:13px;flex:1}
.adv-expo__foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--line);background:#f4f9f7;color:var(--muted);font-size:.88rem;line-height:1.55;text-align:center}
.adv-expo__arrow{width:36px;flex:none;display:grid;place-items:center;color:#b6cbd8}
.adv-expo__arrow svg{width:20px;height:20px}
.adv-expo__stage--down .adv-expo__head{background:#fdf5f4;color:#7a241d}
.adv-expo__stage--up .adv-expo__head{background:#f2fbf7;color:#0a5744}

/* ---------- an openly exposed card: struck through AND labelled ---------- */
.adv-exposed{display:inline-flex;flex-direction:column;align-items:center;gap:7px}
.adv-struck{position:relative;filter:grayscale(.9);opacity:.85}
.adv-struck::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(to top right,transparent calc(50% - 1.7px),#7a241d calc(50% - 1.7px),#7a241d calc(50% + 1.7px),transparent calc(50% + 1.7px)),linear-gradient(to bottom right,transparent calc(50% - 1.7px),#7a241d calc(50% - 1.7px),#7a241d calc(50% + 1.7px),transparent calc(50% + 1.7px))}
.adv-exposed__lbl{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#fdecea;color:#7a241d;font-weight:800;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:inset 0 0 0 1px #f3ccc8;white-space:nowrap}
.adv-exposed__lbl svg{width:11px;height:11px;flex:none}

/* ---------- do-not / use rules box ---------- */
.adv-rules{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.adv-rules__col{border-radius:18px;overflow:hidden;border:2px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.adv-rules__col--no{border-color:#e05a52}
.adv-rules__col--yes{border-color:var(--teal)}
.adv-rules__head{display:flex;align-items:center;gap:10px;padding:13px 18px;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.88rem;line-height:1.3}
.adv-rules__col--no .adv-rules__head{background:#e05a52}
.adv-rules__col--yes .adv-rules__head{background:var(--teal)}
.adv-rules__head svg{width:18px;height:18px;flex:none}
.adv-rules__list{list-style:none;margin:0;padding:16px 18px 18px;display:grid;gap:10px}
.adv-rules__list li{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:1rem;line-height:1.6}
.adv-rules__list li svg{width:17px;height:17px;flex:none;margin-top:4px}
.adv-rules__col--no li svg{color:#e05a52}
.adv-rules__col--yes li svg{color:var(--teal)}

/* ---------- highlighted reminder ---------- */
.adv-hl{margin-top:30px;border-radius:20px;background:var(--panel);color:#fff;padding:26px 28px;display:flex;align-items:center;gap:22px;box-shadow:0 14px 30px rgba(20,48,63,.25)}
.adv-hl__icon{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--yellow);flex:none}
.adv-hl__icon svg{width:28px;height:28px}
.adv-hl strong{display:block;font-size:1.25rem;line-height:1.25;text-transform:uppercase;letter-spacing:.02em}
.adv-hl p{margin:9px 0 0;color:#d3e0e8;font-size:1rem;line-height:1.7}

/* ---------- advanced strategy chart (near-duplicate of .chart) ---------- */
.adv-chart-wrap{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.adv-chart{width:100%;border-collapse:collapse}
.adv-chart th,.adv-chart td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-size:1rem;line-height:1.6}
.adv-chart thead th{background:var(--panel);color:#fff;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;border-top:0;font-weight:700}
.adv-chart tbody th{color:var(--navy);font-weight:800;width:28%}
.adv-chart td{color:var(--text)}
.adv-chart tbody tr:nth-child(odd){background:#f7fbfa}
.adv-chart__keep{color:#0a5744;font-weight:800}
.adv-chart__pull{color:#7a241d;font-weight:800}
.adv-chart__note{color:var(--muted);font-weight:600}

/* ---------- final reference card (near-duplicate of .refcard) ---------- */
.adv-ref{margin-top:26px;background:#fff;border:2px solid var(--navy);border-radius:20px;overflow:hidden;box-shadow:0 12px 28px rgba(20,52,92,.14)}
.adv-ref__head{display:flex;align-items:center;gap:12px;padding:16px 22px;background:var(--navy);color:#fff}
.adv-ref__head svg{width:22px;height:22px;color:var(--yellow);flex:none}
.adv-ref__head h3{margin:0;font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.adv-ref__head span{margin-left:auto;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a8ecd9}
.adv-ref__cols{display:grid;grid-template-columns:1fr 1fr}
.adv-ref__col{padding:22px}
.adv-ref__col+.adv-ref__col{border-left:1px solid var(--line)}
.adv-ref__col-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.adv-ref__col-head b{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:.82rem;flex:none}
.adv-ref__col-head strong{color:var(--navy);font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
.adv-ref__col-head small{display:block;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;font-size:.82rem}
.adv-ref-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.adv-ref-item{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-radius:11px;font-size:1rem;line-height:1.55;color:var(--text)}
.adv-ref-item svg{width:17px;height:17px;flex:none;margin-top:2px}
.adv-ref-item--keep{background:#dbf6ee;color:#0a5744;font-weight:600}
.adv-ref-item--keep svg{color:#0a5744}
.adv-ref-item--pull{background:#fdf3d8;color:#6b4700;font-weight:600}
.adv-ref-item--pull svg{color:#795000}
.adv-ref__foot{padding:14px 22px;border-top:1px solid var(--line);background:#f4f9f7;color:var(--muted);font-size:.92rem;line-height:1.55}

/* ---------- equation strip (near-duplicate of .eq) ---------- */
.adv-eq{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.adv-eq__t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:12px 18px;border-radius:14px;background:#f4f9f7;border:1px solid var(--line);min-width:104px;text-align:center}
.adv-eq__t b{display:block;color:var(--navy);font-size:1.3rem;font-weight:800;line-height:1.15}
.adv-eq__t small{display:block;color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.35}
.adv-eq__op{display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800;font-size:1.35rem;line-height:1;flex:none;min-width:20px}
.adv-eq__t--res{background:var(--navy);border-color:var(--navy)}
.adv-eq__t--res b{color:#fff;font-size:1.5rem}
.adv-eq__t--res small{color:#a8ecd9}
.adv-eq__t--cost{background:#eef4f8;border-color:#b9cad4}

/* ---------- spacing helpers ---------- */
.prose+.adv-vs,.prose+.adv-prog,.prose+.adv-rules,.prose+.adv-grid2,.prose+.adv-grid3,.prose+.adv-expo{margin-top:26px}
.adv-gap{margin-top:26px}
.adv-gap-sm{margin-top:16px}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1023px){
  .adv-ranks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:899px){
  /* comparisons and progressions stack rather than shrink */
  .adv-vs__grid{grid-template-columns:minmax(0,1fr)}
  .adv-vs__side,.adv-vs__mid{min-width:0}
  .adv-vs__mid{padding:2px 0}
  .adv-grid2,.adv-grid3,.adv-rules,.adv-states,.adv-checks{grid-template-columns:1fr}
  .adv-prog,.adv-expo{flex-direction:column;gap:0}
  .adv-prog__arrow,.adv-expo__arrow{width:100%;height:34px;transform:rotate(90deg)}
  .adv-prog__step,.adv-expo__stage{width:100%}
  .adv-ref__cols{grid-template-columns:1fr}
  .adv-ref__col+.adv-ref__col{border-left:0;border-top:1px solid var(--line)}
  .adv-hl{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  /* nine-row chart becomes individual cards — never a horizontal scroll */
  .adv-chart,.adv-chart tbody,.adv-chart tr,.adv-chart th,.adv-chart td{display:block;width:auto}
  .adv-chart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .adv-chart tbody tr{border-top:1px solid var(--line);padding:6px 0 12px}
  .adv-chart tbody tr:first-child{border-top:0}
  .adv-chart tbody th{width:auto;border-top:0;padding-bottom:2px;font-size:1.06rem}
  .adv-chart td{border-top:0;padding-top:6px;padding-bottom:6px}
  .adv-chart td::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:3px}
}
@media (max-width:400px){
  /* the nowrap answer column no longer fits beside its label — stack the row */
  .adv-vs__facts li{flex-direction:column;gap:4px}
  .adv-vs__facts li b{white-space:normal}
}
@media (max-width:560px){
  .adv-ranks{grid-template-columns:repeat(2,1fr)}
  .adv-vs{padding:16px}
  /* keep three- and four-card examples big enough to read instantly */
  .adv-vs__side .pc--sm,.adv-prog__step .pc--sm,.adv-expo__body .pc--sm,.panel-box__body .pc--sm{--w:54px}
  .adv-vs__side .pc--xs,.adv-prog__step .pc--xs,.adv-expo__body .pc--xs{--w:44px}
  .adv-outs{padding:9px 18px;gap:11px}
  .adv-outs b{font-size:1.65rem}
}
@media (max-width:480px){
  .adv-ranks{grid-template-columns:1fr 1fr;gap:9px}
  .adv-rank .pc--xs{--w:34px}
  .adv-outgroup .pc--xs{--w:36px}
  .adv-ref__col{padding:18px}
  .adv-chart th,.adv-chart td{padding-left:16px;padding-right:16px}
  .adv-hl strong{font-size:1.1rem}
  .adv-eq__t{min-width:88px;padding:10px 14px}
  .adv-eq__t b{font-size:1.15rem}
}

/* interactive elements honour reduced motion */
.adv-pill,.adv-badge{transition:none}
@media (prefers-reduced-motion:reduce){
  .adv-hl,.adv-prog__step,.adv-expo__stage{transition:none}
}

/* ===== component modifiers (replaces former inline style="" attributes) ===== */
/* the three-state strip used as a flush footer under the step list */
.adv-states--foot{padding:18px 22px;margin-top:0;border-top:1px solid var(--line);background:#f4f9f7}
/* wider gap between the inline meta chips */
.adv-meta--roomy{gap:14px}
/* badge headings that sit directly above the diagram they label */
p.adv-centre--lede{margin:0 0 10px}
p.adv-centre--sub{margin:24px 0 10px}