/* 🔒 W2 · the Buying Power answer (W2A) and the DEP-W2-21 project continuation — DECISION_REGISTER § 79, 24 Sep 2026.
   ⚠ A SEPARATE STYLESHEET, the comparison.css precedent: `styles.css` is byte-pinned and stays byte-identical.

   ── THE ANSWER ─────────────────────────────────────────────────────────────────────────────────────────────────────
   The locked frames' own `/* W2 answer content only * /` block (w2.css), ported rule for rule. ⚠ Every selector is
   wrapped in `:where(.sf.bp)`, which adds ZERO specificity: each rule therefore keeps EXACTLY the specificity it has in
   the frames, so the frozen shell's own rules (e.g. `.sfh h3`, `.fact`) still win or lose against it as they do there.
   It beats the older same-specificity `.bp-*` rules in `styles.css` by source order (this file loads later), and the
   properties those older rules set that w2.css never declares are neutralised explicitly below — ⛔ they would
   otherwise leak into a composition that never had them. ⛔ Nothing here reaches `.block-bp` (Case 5, the beds cases).

   ── THE CONTINUATION ───────────────────────────────────────────────────────────────────────────────────────────────
   The frames' `dep.css` host (D-06 rev 2, RAIL_HOST_GEOMETRY.tsv H-01…H-10), scoped to `.dep21`. ⛔ THE CARD IS NOT
   STYLED HERE: `.dep21` joins the canonical card's host list in `comparison.css` (owner ruling of 24 Sep 2026 — the
   rail reuses the site's canonical card exactly), as the W5 rail did (§ 9.7 case 4). */

/* ══ the answer section — the frozen shell draws `.sf` as a block; the product's `.sf` is the W4 two-column grid ══ */
.sf.bp{display:block;column-gap:normal}
/* the frozen shell's own section header (`.sfh`, the frames' shell block) — the product's `.sfh` is the W4 variant */
:where(.sf.bp) .sfh{display:flex;align-items:center;gap:9px}
/* the frames' `.num` isolates but sets no wrapping of its own — it inherits (e.g. `.fact dd`'s nowrap); the product's
   shell `.num` rule forces nowrap everywhere */
:where(.sf.bp) .num{white-space:inherit}

/* ══ w2.css — Buying Power answer (CT-BUYING-POWER) ══ */
:where(.sf.bp) .num{direction:ltr;unicode-bidi:isolate}
:where(.sf.bp) .sfh{margin-bottom:12px}
:where(.sf.bp) .bp-title{margin:0;font-size:1.02rem;font-weight:700;color:var(--ink)}
:where(.sf.bp) .bp-hero{display:flex;flex-direction:column;gap:2px}
:where(.sf.bp) .bp-lab{font-size:.81rem;font-weight:400;color:var(--ink-3)}
:where(.sf.bp) .bp-val{font-size:1.45rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
:where(.sf.bp) .bp-hero-1 .bp-val{color:var(--purple-deep)}
:where(.sf.bp) .bp-assume{margin-top:12px;padding:10px 12px;border-radius:var(--r-s);background:var(--tint-2);
  border:1px solid var(--hair)}
:where(.sf.bp) .bp-aline{margin:0;font-size:.8rem;font-weight:400;line-height:1.55;color:var(--ink-2)}
:where(.sf.bp) .bp-aline+.bp-aline{margin-top:4px}
:where(.sf.bp) .bp-sec{margin:0 0 10px;font-size:.88rem;font-weight:700;color:var(--ink)}
:where(.sf.bp) .bp-asset{border:1px solid var(--line);border-radius:var(--r-m);padding:12px 13px;background:var(--surface)}
:where(.sf.bp) .bp-ahead{display:flex;align-items:center;gap:8px}
:where(.sf.bp) .bp-ic{width:22px;height:22px;flex:0 0 22px}
:where(.sf.bp) .bp-alab{margin:0;font-size:.88rem;font-weight:700;color:var(--ink)}
:where(.sf.bp) .bp-abody{margin-top:6px;display:flex;flex-direction:column;gap:3px}
:where(.sf.bp) .bp-mut,:where(.sf.bp) .bp-size{margin:0;font-size:.8rem;font-weight:400;color:var(--ink-3)}
:where(.sf.bp) .bp-names{margin:0;font-size:.82rem;font-weight:700;color:var(--ink-2)}
:where(.sf.bp) .bp-rangebox{margin-top:12px;padding-top:10px;border-top:1px solid var(--hair)}
:where(.sf.bp) .bp-rangebox .fact{border-top:0;padding:0}

/* VP1 · ≥1108 — answer context beside analysis, 50/50 of the content container */
:where(.sf.bp) .bp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
:where(.sf.bp) .bp-heroes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;
  padding:14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--tint-2)}
:where(.sf.bp) .bp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}

/* VP2 · 900–1107 — ONE full-width column designed for the band */
:where(.sf.bp) .bp-band{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
:where(.sf.bp) .bp-band .bp-hero{flex:1 1 0;padding:12px 16px;background:var(--tint-2)}
:where(.sf.bp) .bp-band .bp-hero+.bp-hero{border-inline-start:1px solid var(--line);background:var(--surface)}
:where(.sf.bp) .bp-listhead{margin-top:16px}
:where(.sf.bp) .bp-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
:where(.sf.bp) .bp-list .bp-asset{display:flex;align-items:center;gap:16px;border:0;border-radius:0;padding:12px 16px}
:where(.sf.bp) .bp-list .bp-asset+.bp-asset{border-top:1px solid var(--hair)}
:where(.sf.bp) .bp-list .bp-ahead{flex:0 0 190px}
:where(.sf.bp) .bp-list .bp-abody{margin-top:0;flex:1;min-width:0;flex-direction:row;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;column-gap:16px}

/* VP3 · 390 — the controlling mobile composition */
:where(.sf.bp) .bp-stack{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--tint-2)}
:where(.sf.bp) .bp-vp3 .bp-sec,:where(.sf.bp).bp-vp3 .bp-sec{margin-top:16px}
:where(.sf.bp) .bp-mlist{display:flex;flex-direction:column;gap:8px}
:where(.sf.bp).bp-vp3 .bp-val{font-size:1.3rem}
:where(.sf.bp) .fact dd{white-space:nowrap}

/* ══ neutralisers — the properties the older `styles.css` `.bp-*` rules set and w2.css never declares ══
   Each restores what the frame computes without them (the initial / inherited value, or the shell's own rule the older
   rule out-ordered). Same specificity as the older rule, later in the cascade. */
:where(.sf.bp) .bp-title,:where(.sf.bp) .bp-sec{letter-spacing:normal;text-transform:none}
/* ⚠ the title's own letter-spacing is the shell's `.sfh h3` (and its RTL `normal`), which out-specifies both rules above */
:where(.sf.bp) .bp-hero{justify-content:normal;align-items:normal;padding:0}
:where(.sf.bp) .bp-hero .bp-lab{min-width:auto;flex:0 1 auto;line-height:inherit}
:where(.sf.bp) .bp-hero .bp-val{flex:0 1 auto;white-space:normal;text-align:inherit}
:where(.sf.bp) .bp-hero-1 .bp-val{font-size:1.45rem;letter-spacing:normal}
:where(.sf.bp).bp-vp3 .bp-hero-1 .bp-val{font-size:1.3rem}
:where(.sf.bp) .bp-hero-1 .bp-lab{font-weight:400;color:var(--ink-3)}
:where(.sf.bp) .bp-lab{line-height:inherit}
:where(.sf.bp) .bp-assume{margin-bottom:0;color:inherit;font-size:inherit;line-height:inherit;padding-top:10px}
:where(.sf.bp) .bp-asset{display:block;gap:normal}
:where(.sf.bp) .bp-list .bp-asset{display:flex;gap:16px}
:where(.sf.bp) .bp-range{justify-content:space-between;align-items:baseline;gap:14px;margin-top:0}  /* the shell's `.fact` */
:where(.sf.bp) .bp-range .bp-lab,:where(.sf.bp) .bp-range .bp-val{flex:initial}
/* each money value of the range is ONE non-breaking unit (the mixed-value rule) */
:where(.sf.bp) .bp-mu{white-space:nowrap}
/* the MECHANICAL narrowing below the approved 390 px (D-04: "fluid narrowing … never a redesign"): the governed
   formatter's range can outgrow the one-line `dd` at 360 px, so there — and only there — it may break BETWEEN its two
   money units; each unit still never breaks. ≥ 390 px it is exactly the approved nowrap row. */
@media (max-width:389px){ :where(.sf.bp) .fact dd{white-space:normal} }

/* ══ the continuation — D-06 rev 2 (DEP-W2-21 only) ══ */
.dep21{--ink:#191622;--body:#3c3547;--muted:#6f6880;--line:#e7e1f2;--soft:#f5f1ff;--tint:#fcfbfe;
  --purple:#6d4aff;--purple-deep:#4b2fd6;--r-md:12px;--r-lg:16px;--r-2xl:24px;
  margin-top:14px;display:flex;flex-direction:column;gap:12px;color:var(--body)}
.dep21,.dep21 *{box-sizing:border-box}
.dep21 .cx-h{font-size:1.02rem;font-weight:700;color:var(--ink);margin:0}
/* H-01…H-03: ONE non-wrapping row, horizontal overflow, logical order (the region's `dir`). H-10: no scrollbar rule. */
.dep21 .cx-rail{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;width:100%}
/* H-04 / H-05: 420 px at VP1 / VP2. H-06…H-08: 296 px at 390, and the mechanically released 281 / 266 px at 375 / 360 —
   the row width less the approved 12 px gap and 20 px next-card edge, so ONE expression gives all three governed widths. */
.dep21[data-band="VP1"],.dep21[data-band="VP2"]{--dep-slot:420px}
.dep21[data-band="VP3"]{--dep-slot:min(296px, calc(100% - 32px))}
.dep21 .cx-rail > .cx-card,.dep21 .cx-rail > .dep-slot{flex:0 0 var(--dep-slot);width:var(--dep-slot)}
/* the multi-card action baseline — the effective rule (7 Sep 2026), a HOST rule */
.dep21 .cx-rail > .cx-card{display:flex;flex-direction:column}
.dep21 .cx-rail > .cx-card > .cx-media{flex:0 0 auto}
.dep21 .cx-rail > .cx-card > .cx-body{flex:1 1 auto}
.dep21 .cx-rail > .cx-card > .cx-body > :nth-last-child(2){margin-block-end:auto}
/* ADD-07 shares its card's slot: directly BELOW the card, OUTSIDE the card frame */
.dep21 .dep-slot{display:flex;flex-direction:column;gap:6px;min-width:0}
.dep21 .dep-fit{margin:0;font-size:.78rem;font-weight:400;line-height:1.5;color:var(--body)}
.dep21 .dep-count{margin:0;font-size:.78rem;font-weight:400;color:var(--muted)}
.dep21 .dep-say{margin:0;font-size:.9rem;font-weight:400;line-height:1.6;color:var(--ink-2,#443f4e)}
.dep21 > .dep-say{width:100%;max-width:1180px;margin-inline:auto}
.dep21 .num{direction:ltr;unicode-bidi:isolate;white-space:inherit}
/* the {budget} value is ONE money unit: it never breaks between the numeral and its marker */
.dep21 [data-ph="budget"]{white-space:nowrap}