/* ==========================================================================
   GlobePrism: layout blocks for story and page bodies
   Drawn by app/Blocks.php (every block and its JSON: docs/BLOCKS.md). Loaded after app.css on story and static pages only.
   Everything follows the story's category colour (--cat), the theme (light/dark) and the reader's text size (rem/em only).
   ========================================================================== */

:root {
  --up: #15803d; --down: #dc2626; --warn: #b45309; --info: #2563eb; --note: #64748b;
  --ch0: var(--cat, #5b3df5); --ch1: #2563eb; --ch2: #f59e0b; --ch3: #16a34a; --ch4: #db2777; --ch5: #0d9488;
}
:root[data-theme="dark"] { --up: #4ade80; --down: #f87171; --warn: #fbbf24; --info: #60a5fa; --note: #94a3b8; --ch1: #60a5fa; --ch2: #fbbf24; --ch3: #4ade80; --ch4: #f472b6; --ch5: #2dd4bf; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --up: #4ade80; --down: #f87171; --warn: #fbbf24; --info: #60a5fa; --note: #94a3b8; --ch1: #60a5fa; --ch2: #fbbf24; --ch3: #4ade80; --ch4: #f472b6; --ch5: #2dd4bf; }
}

/* ---------- shared ---------- */
.b { font-family: var(--font); font-size: .94em; line-height: 1.55; color: var(--ink); }
.prose > .b, .prose > .bh, .prose > .gallery { margin-block: 1.9em; }
.prose > .b--wide { max-width: none; }
@supports (width: 1cqw) { .article, .page { container-type: inline-size; } .prose > .b--wide { width: 100cqw; } }
.b p + p { margin-top: .6em; }
.prose .b-t { margin: 0 0 .75em; padding: 0; border: 0; font-family: var(--font); font-size: 1.05em; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: .5em; scroll-margin-top: 0; }
.b-t .i { color: var(--cat); }
.b-src { margin-top: .7em; font-size: .78em; color: var(--mute); }
.b-i { flex: none; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-top: .1em; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--cat)) 16%, transparent); color: color-mix(in srgb, var(--tone, var(--cat)) 88%, var(--ink)); }
.b-i .i { width: .85em; height: .85em; stroke-width: 3; }
.prose ul.b, .prose ol.b, .prose .b ul, .prose .b ol { padding-inline-start: 0; margin-inline: 0; list-style: none; }
.prose a.b-link, .prose a.b-link:hover { color: inherit; text-decoration: none; }
.prose a.btn { color: #fff; text-decoration: none; }
.prose a.btn--ghost { color: var(--ink); }
.prose::after { content: ""; display: block; clear: both; }
.prose h2, .prose h3, .prose > .bh, .prose > .b:not(.b-fig) { clear: both; }

/* ---------- headings with a kicker, a line below or a big number ---------- */
.bh { margin-top: 2.1em; display: flex; gap: .9rem; align-items: flex-start; font-family: var(--font); }
.prose .bh h2 { margin: 0; scroll-margin-top: calc(var(--hdr-total) + .1rem); }
.bh__n { flex: none; font-size: 2.7em; font-weight: 900; line-height: .85; letter-spacing: -.05em; color: color-mix(in srgb, var(--cat) 38%, transparent); }
.bh__k { display: block; margin-bottom: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--cat) 85%, var(--ink)); }
.bh__s { margin-top: .45rem; font-size: .96rem; line-height: 1.5; color: var(--mute); }
.prose .bh--plain h2 { border: 0; padding: 0; }
.prose .bh--underline h2 { border: 0; padding: 0 0 .35em; border-bottom: 3px solid var(--cat); display: inline-block; }
.bh--center { flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.prose .bh--center h2 { border: 0; padding: 0; }
.bh--center .bh__t::after { content: ""; display: block; width: 3.5rem; height: 4px; margin: .7rem auto 0; border-radius: 4px; background: var(--cat); }

/* ---------- lead paragraph, drop cap ---------- */
.prose .b-lead { font-family: var(--serif); font-size: 1.28em; line-height: 1.55; color: var(--ink2); font-weight: 500; text-wrap: pretty; }
.prose .b-drop::first-letter { float: left; margin: .06em .12em 0 0; font-family: var(--font); font-size: 3.7em; line-height: .82; font-weight: 850; color: var(--cat); }

/* ---------- key point banner ---------- */
.b-key { position: relative; padding: 1.1em 1.3em 1.15em 1.6em; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 15%, var(--card)), color-mix(in srgb, var(--cat) 4%, var(--card))); border: 1px solid color-mix(in srgb, var(--cat) 30%, var(--line)); overflow: hidden; }
.b-key::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--cat); }
.b-key__l { display: inline-flex; align-items: center; gap: .4em; margin-bottom: .35em; font-size: .72em; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: color-mix(in srgb, var(--cat) 82%, var(--ink)); }
.b-key p { font-size: 1.14em; font-weight: 650; line-height: 1.5; }

/* ---------- callouts ---------- */
.b-call { --tone: var(--info); display: flex; gap: .9em; padding: 1em 1.15em; border-radius: 14px; background: color-mix(in srgb, var(--tone) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--line)); }
.b-call--info { --tone: var(--info); } .b-call--tip, .b-call--success { --tone: var(--up); } .b-call--warn { --tone: var(--warn); } .b-call--danger { --tone: var(--down); } .b-call--note { --tone: var(--note); }
.b-call__i { flex: none; display: grid; place-items: center; width: 2.25em; height: 2.25em; border-radius: 50%; background: color-mix(in srgb, var(--tone) 17%, transparent); color: var(--tone); }
.b-call__i .i { width: 1.2em; height: 1.2em; }
.b-call__t { display: block; margin-bottom: .15em; }

/* ---------- quotes ---------- */
.b-pull { margin-inline: 0; padding: 1.5em .5em 1.1em; text-align: center; border-block: 1px solid var(--line); }
.b-pull__q { display: grid; place-items: center; width: 2.7em; height: 2.7em; margin: -3em auto .6em; border-radius: 50%; background: var(--bg); color: var(--cat); border: 1px solid var(--line); }
.prose .b-pull blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-size: 1.6em; line-height: 1.32; font-style: italic; font-weight: 500; text-wrap: balance; }
.b-pull figcaption { margin-top: .9em; font-size: .86em; color: var(--mute); }
.b-pull figcaption b { color: var(--ink); }
.b-qcard { position: relative; margin-inline: 0; padding: 1.3em 1.4em 1.2em; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.b-qcard::before { content: "\201C"; position: absolute; top: .08em; inset-inline-start: .3em; font: 900 4.2em/1 Georgia, serif; color: color-mix(in srgb, var(--cat) 28%, transparent); }
.prose .b-qcard blockquote { margin: .5em 0 0; padding: 0; border: 0; font-style: normal; font-size: 1.12em; line-height: 1.55; position: relative; }
.b-qcard figcaption { display: flex; align-items: center; gap: .75em; margin-top: 1em; }
.b-qcard__w b { display: block; } .b-qcard__w i { display: block; font-style: normal; font-size: .88em; color: var(--mute); }

/* ---------- dividers ---------- */
.b-div { text-align: center; color: var(--mute); }
.b-div--dots span::before { content: "\2022  \2022  \2022"; letter-spacing: .5em; font-size: 1.25em; color: var(--cat); }
.b-div--gradient { height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--cat), transparent); }
.b-div--label { display: flex; align-items: center; gap: 1em; }
.b-div--label::before, .b-div--label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.b-div--label span { font-size: .72em; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

/* ---------- lists ---------- */
.prose .b-list { display: grid; gap: .7em; }
.b-list li { display: flex; gap: .7em; align-items: flex-start; }
.prose .b-list--dot li::before { content: ""; flex: none; width: .5em; height: .5em; margin-top: .6em; border-radius: 50%; background: var(--cat); }
@media (min-width: 560px) { .b-list--cols2 { grid-template-columns: 1fr 1fr; column-gap: 1.8em; } }
.prose .b-list--cards { display: flex; flex-wrap: wrap; gap: .8em; }
.b-list--cards li { flex: 1 1 14rem; flex-direction: column; gap: .25em; padding: 1em 1.1em; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--cat); }
.b-list--cards li strong { color: color-mix(in srgb, var(--cat) 80%, var(--ink)); }
.prose .b-steps { display: grid; gap: 0; }
.b-steps li { position: relative; display: flex; gap: 1em; padding-bottom: 1.4em; }
.b-steps li:last-child { padding-bottom: 0; }
.b-steps li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 1.05em; top: 2.5em; bottom: .25em; width: 2px; background: color-mix(in srgb, var(--cat) 32%, var(--line)); }
.b-steps__n { flex: none; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; background: var(--cat); color: #fff; font-weight: 800; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 16%, transparent); }
.b-steps__b strong { display: block; font-size: 1.05em; line-height: 1.35; padding-top: .3em; }
.b-steps__b p { margin-top: .15em; color: var(--ink2); }
.prose .b-big { display: grid; gap: 1.1em; }
.b-big li { display: flex; gap: 1em; align-items: baseline; }
.b-big__n { flex: none; min-width: 1.7em; font-size: 2.8em; font-weight: 900; line-height: .9; letter-spacing: -.05em; color: color-mix(in srgb, var(--cat) 55%, transparent); }
.b-big__b strong { display: block; font-size: 1.08em; } .b-big__b p { color: var(--ink2); }

/* ---------- pros / cons, what we know ---------- */
.b-pc__g, .b-know__g { display: flex; flex-wrap: wrap; gap: 1em; }
.b-pc__c, .b-know__c { --tone: var(--up); flex: 1 1 15rem; min-width: 0; padding: 1em 1.15em; border-radius: 14px; background: color-mix(in srgb, var(--tone) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--line)); }
.b-pc__c--con { --tone: var(--down); } .b-know__c--yes { --tone: var(--up); } .b-know__c--no { --tone: var(--warn); }
.b-pc__c h4, .b-know__c h4 { display: flex; align-items: center; gap: .5em; margin-bottom: .65em; font-size: .78em; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tone); }
.b-pc__c ul, .b-know__c ul { display: grid; gap: .5em; }
.b-pc__c li, .b-know__c li { display: flex; gap: .6em; align-items: flex-start; }

/* ---------- checklist, fact box, glossary ---------- */
.b-chk ul { display: grid; gap: .5em; }
.b-chk li { display: flex; gap: .75em; align-items: flex-start; padding: .65em .85em; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.b-chk__b { flex: none; width: 1.35em; height: 1.35em; margin-top: .1em; display: grid; place-items: center; border-radius: 6px; border: 2px solid var(--line); }
.b-chk .i { width: .9em; height: .9em; stroke-width: 3.5; }
.b-chk .is-done .b-chk__b { background: var(--up); border-color: var(--up); color: #fff; }
.b-chk .is-done > span:last-child { color: var(--mute); }
.b-facts { padding: 1.1em 1.25em; border-radius: 16px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--cat); box-shadow: var(--shadow); }
.b-facts dl { margin: 0; }
.b-facts dl > div { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-bottom: 1px dashed var(--line); }
.b-facts dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.b-facts dt { color: var(--mute); } .b-facts dd { margin: 0; font-weight: 650; text-align: end; }
.b-facts--grid dl { display: flex; flex-wrap: wrap; gap: .3em 1.6em; }
.b-facts--grid dl > div { flex: 1 1 11rem; flex-direction: column; gap: .1em; border: 0; padding: .5em 0; }
.b-facts--grid dd { text-align: start; font-size: 1.05em; }
.b-terms dl { margin: 0; }
.b-terms dl > div { padding: .75em 0; border-bottom: 1px solid var(--line); }
.b-terms dt { font-weight: 800; color: color-mix(in srgb, var(--cat) 80%, var(--ink)); } .b-terms dd { margin: .15em 0 0; color: var(--ink2); }

/* ---------- timelines ---------- */
.prose .b-tl { display: flex; gap: .9em; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6em; }
.b-tl > li { flex: 1 0 min(15rem, 78%); scroll-snap-align: start; padding: 1em 1.1em; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--cat); }
.b-tl b { display: block; margin-bottom: .3em; font-size: .74em; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--cat) 82%, var(--ink)); }
.b-tl strong { display: block; line-height: 1.3; } .b-tl p { margin-top: .25em; font-size: .93em; color: var(--ink2); }
.prose .b-tl--cards { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
.b-tl--cards > li { flex: 1 1 13rem; }

/* ---------- tables ---------- */
.b-table .tablewrap table { width: 100%; min-width: 26rem; border-collapse: collapse; }
.b-table .tablewrap th, .b-table .tablewrap td { padding: .7em .95em; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.b-table .tablewrap thead th { background: color-mix(in srgb, var(--cat) 10%, var(--bg2)); font-size: .86em; font-weight: 800; letter-spacing: .02em; }
.b-table .tablewrap tbody tr:last-child > * { border-bottom: 0; }
.b-table--striped tbody tr:nth-child(even) > * { background: var(--bg2); }
.tablewrap.tw-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
.tablewrap.tw-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent); }
.tablewrap.tw-l.tw-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.b-table--plain .tablewrap { border: 0; border-radius: 0; }
.b-table--plain .tablewrap thead th { background: none; border-bottom: 2px solid var(--ink); }
.b-table--compact .tablewrap th, .b-table--compact .tablewrap td { padding: .4em .7em; font-size: .9em; }
.b-table--compare .tablewrap { border-radius: 16px; box-shadow: var(--shadow); }
.b-table--compare thead th { background: var(--bg2); font-size: .95em; text-align: center; padding-block: .95em; }
.b-table--compare thead th:first-child { background: transparent; }
.b-table--compare tbody th { width: 30%; font-weight: 650; color: var(--ink2); }
.b-table--compare tbody td { text-align: center; }
.b-table .is-hl { background: color-mix(in srgb, var(--cat) 11%, transparent) !important; }
.b-table thead .is-hl { background: var(--cat) !important; color: #fff; }
.b-table .ta-left { text-align: left !important; } .b-table .ta-center { text-align: center !important; } .b-table .ta-right { text-align: right !important; }
.b-table .is-total > * { font-weight: 800; border-top: 2px solid var(--ink); }
.b-yes, .b-no { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; }
.b-yes { background: color-mix(in srgb, var(--up) 17%, transparent); color: var(--up); } .b-no { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.b-yes .i, .b-no .i { width: .95em; height: .95em; stroke-width: 3.2; }
.b-cell.is-b { font-weight: 800; } .b-cell--up, .b-cell--good { color: var(--up); font-weight: 700; } .b-cell--down, .b-cell--bad { color: var(--down); font-weight: 700; } .b-cell--warn { color: var(--warn); font-weight: 700; }

/* ---------- key numbers ---------- */
.b-stats { container-type: inline-size; }
.b-stats ul { display: flex; flex-wrap: wrap; gap: .8em; }
.b-stats li { flex: 1 1 9.5rem; min-width: 0; display: flex; flex-direction: column; gap: .25em; }
.b-stats strong { font-size: 1.85em; font-weight: 850; line-height: 1.05; letter-spacing: -.035em; color: color-mix(in srgb, var(--cat) 80%, var(--ink)); }
.b-stats li > span { font-size: .88em; color: var(--ink2); line-height: 1.35; }
.b-stats--tiles li { padding: 1em 1.1em; border-radius: 14px; background: color-mix(in srgb, var(--cat) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--cat) 25%, var(--line)); }
.b-stats--bar ul { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.b-stats--bar li { padding: 1em 1.2em; background: var(--card); }
.b-stats--big li { flex-basis: 11rem; } .b-stats--big strong { font-size: 2.7em; }
.b-delta { display: inline-flex; align-items: center; gap: .3em; width: fit-content; padding: .1em .55em; border-radius: 99px; font-style: normal; font-weight: 750; font-size: .82em; color: var(--note); background: color-mix(in srgb, var(--note) 14%, transparent); }
.b-delta .i { width: 1em; height: 1em; }
.b-delta--up { color: var(--up); background: color-mix(in srgb, var(--up) 15%, transparent); } .b-delta--down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
@container (max-width: 42rem) { .b-stats--n4 li, .b-stats--n6 li { flex-basis: calc(50% - .4em); } .b-stats--n5 li { flex-basis: calc(33.3% - .6em); } }
@container (max-width: 22rem) { .b-stats li { flex-basis: 100%; } }

/* ---------- charts ---------- */
.b-chart { padding: 1.15em 1.25em; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.b-chart__t { margin-bottom: .95em; font-weight: 800; font-size: 1.04em; }
.chs0 { --k: var(--ch0); } .chs1 { --k: var(--ch1); } .chs2 { --k: var(--ch2); } .chs3 { --k: var(--ch3); } .chs4 { --k: var(--ch4); } .chs5 { --k: var(--ch5); }
.chs { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--k); flex: none; }
.prose .b-chart__lg { display: flex; flex-wrap: wrap; gap: .3em 1.1em; margin-top: .9em; font-size: .84em; color: var(--ink2); }
.b-chart__lg li { display: inline-flex; align-items: center; gap: .45em; }
.chb__g { display: grid; grid-template-columns: minmax(5.5rem, 30%) 1fr; gap: .3em .9em; align-items: center; padding: .38em 0; }
.chb__l { font-size: .88em; color: var(--ink2); line-height: 1.3; }
.chb__rows { display: grid; gap: .3em; }
.chb__r { display: flex; align-items: center; gap: .6em; }
.chb__t { flex: 1; height: .9em; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.chb__t i { display: block; height: 100%; border-radius: 99px; background: var(--k); }
.chb__r b { min-width: 3.4em; text-align: end; font-size: .85em; font-variant-numeric: tabular-nums; }
.chc { display: flex; gap: .5em; align-items: stretch; height: 15.5rem; padding-top: 1.6em; overflow: visible; }
@supports (width: 1cqw) { .chc { height: clamp(11.5rem, 46cqw, 17.5rem); } }
.chc__g { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.chc__cols { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); }
.chc__c { flex: 1; max-width: 3.2rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.chc__c b { margin-bottom: .25em; font-size: .72em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chc__c i { display: block; width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; background: var(--k); }
.chc__l { margin-top: .5em; font-size: .76em; line-height: 1.25; text-align: center; color: var(--mute); overflow-wrap: anywhere; }
.b-chart__u { display: none; margin-top: .6em; font-size: .78em; color: var(--mute); }
@supports (width: 1cqw) { .b-chart { container-type: inline-size; } }
/* narrow chart (a phone, or a column beside another): no unit on every bar; many bars -> labels stand up */
@container (max-width: 30rem) {
  .chc__c b small { display: none; }
  .chc__c b { font-size: .66em; }
  .b-chart__u { display: block; }
  .chc--dense { padding-top: 2.6em; gap: .25em; }
  .chc--many { gap: 2px; }
  .chc--many .chc__l { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; max-height: 4.6rem; overflow: hidden; text-overflow: ellipsis; font-size: .66em; }
  .chc--dense .chc__c b { writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: .35em; }
}
.chl__w svg { width: 100%; height: auto; }
.chl__g { stroke: var(--line); stroke-width: 1; }
.chl__y, .chl__x { fill: var(--mute); font-size: 11px; font-family: var(--font); }
.chl__v { fill: var(--ink); font-size: 11px; font-weight: 700; font-family: var(--font); }
.chl__p { stroke: var(--k); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.chl__d { fill: var(--k); stroke: var(--card); stroke-width: 2; }
.chd__w { display: flex; flex-wrap: wrap; gap: 1.2em 1.6em; align-items: center; }
.chd { flex: none; width: 11.5rem; }
.chd__bg { stroke: var(--bg2); }
.chd__s { stroke: var(--k); }
.chd__n { fill: var(--ink); font-size: 3.9px; font-weight: 800; font-family: var(--font); }
.prose .chd__lg { flex: 1 1 13rem; display: grid; gap: .45em; }
.chd__lg li { display: grid; grid-template-columns: auto 1fr auto auto; gap: .6em; align-items: center; font-size: .9em; }
.chd__lg b { font-variant-numeric: tabular-nums; } .chd__lg em { font-style: normal; color: var(--mute); min-width: 2.6em; text-align: end; font-size: .88em; }

/* ---------- market strip ---------- */
.b-mkt ul { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.b-mkt li { flex: 1 1 10rem; display: grid; gap: .15em; padding: .85em 1.05em; background: var(--card); }
.b-mkt li > b { font-size: .8em; color: var(--mute); font-weight: 700; }
.b-mkt__v { font-size: 1.4em; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- score / review ---------- */
.b-rate { display: flex; flex-wrap: wrap; gap: 1.3em; align-items: center; padding: 1.25em; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.b-rate__ring { --p: 50; position: relative; flex: none; width: 6.6em; height: 6.6em; display: grid; place-content: center; text-align: center; border-radius: 50%; background: conic-gradient(var(--cat) calc(var(--p) * 1%), var(--bg2) 0); }
.b-rate__ring::before { content: ""; position: absolute; inset: .6em; border-radius: 50%; background: var(--card); }
.b-rate__ring b, .b-rate__ring i { position: relative; z-index: 1; }
.b-rate__ring b { font-size: 1.95em; font-weight: 900; line-height: 1; } .b-rate__ring i { font-style: normal; font-size: .76em; color: var(--mute); }
.b-rate__b { flex: 1 1 14rem; min-width: 0; }
.prose .b-rate__bars { display: grid; gap: .5em; margin-top: .85em; }
.b-rate__bars li { display: grid; grid-template-columns: minmax(5rem, 8rem) 1fr 2.4rem; gap: .65em; align-items: center; font-size: .88em; }
.b-rate__bars b { text-align: end; font-variant-numeric: tabular-nums; }
.b-bar { height: .62em; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.b-bar i { display: block; height: 100%; border-radius: 99px; background: var(--cat); }

/* ---------- fact-check verdict ---------- */
.b-verd { --tone: #475569; padding: 1.05em 1.25em; border-radius: 16px; background: color-mix(in srgb, var(--tone) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--line)); }
.b-verd--true { --tone: #15803d; } .b-verd--mostly-true { --tone: #4d7c0f; } .b-verd--mixed { --tone: #b45309; } .b-verd--misleading { --tone: #c2410c; } .b-verd--false { --tone: #b91c1c; } .b-verd--unproven { --tone: #475569; }
.b-verd__chip { display: inline-flex; align-items: center; gap: .45em; padding: .22em .85em; border-radius: 99px; background: var(--tone); color: #fff; font-size: .8em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.b-verd__claim { margin-top: .75em; font-size: 1.06em; line-height: 1.5; } .b-verd__x { margin-top: .5em; color: var(--ink2); }

/* ---------- side by side, product, score ---------- */
.b-vs__g { position: relative; display: flex; flex-wrap: wrap; gap: 1em; align-items: stretch; }
.b-vs__s { position: relative; flex: 1 1 16rem; min-width: 0; padding: 1.25em; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.b-vs__s.is-win { border-color: var(--cat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 22%, transparent); }
.b-vs__w { position: absolute; top: -.85em; inset-inline-start: 1.1em; display: inline-flex; align-items: center; gap: .35em; padding: .18em .75em; border-radius: 99px; background: var(--cat); color: #fff; font-size: .72em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.b-vs__w .i { width: 1em; height: 1em; }
.b-vs__badge { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 2.9em; height: 2.9em; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: .85em; font-weight: 900; box-shadow: 0 0 0 5px var(--bg); }
.b-vs__img { margin: 0 0 .9em; } .b-vs__img img { width: 100%; border-radius: 12px; }
.b-vs__s h4 { font-size: 1.18em; line-height: 1.25; } .b-vs__sub { color: var(--mute); }
.b-vs__price { margin-top: .35em; font-size: 1.55em; font-weight: 850; letter-spacing: -.02em; color: color-mix(in srgb, var(--cat) 80%, var(--ink)); }
.b-vs__s ul { display: grid; gap: .4em; margin-top: .8em; }
.b-vs__s li { display: flex; gap: .6em; align-items: flex-start; }
.b-vs__v { margin-top: .85em; padding-top: .75em; border-top: 1px dashed var(--line); color: var(--ink2); font-style: italic; }
.b-prod { padding: 1.25em; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.b-prod__top { display: flex; flex-wrap: wrap; gap: 1.2em; align-items: center; }
.b-prod__img { flex: 1 1 12rem; max-width: 19rem; margin: 0; } .b-prod__img img { width: 100%; border-radius: 12px; }
.b-prod__top > div { flex: 2 1 14rem; min-width: 0; }
.prose .b-prod__n { margin: 0; font-size: 1.45em; font-weight: 850; letter-spacing: -.02em; border: 0; padding: 0; }
.b-prod__tag { color: var(--mute); }
.b-prod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; margin: .6em 0 .95em; }
.b-prod__price { font-size: 1.55em; font-weight: 850; letter-spacing: -.02em; }
.b-prod__stars { display: inline-flex; align-items: center; gap: .08em; color: var(--line); }
.b-prod__stars .is-on { color: #f59e0b; } .b-prod__stars .i { width: 1.1em; height: 1.1em; } .b-prod__stars b { margin-inline-start: .45em; color: var(--ink); }
.b-prod__pc { margin-top: 1.1em; }
.b-prod__specs { margin: 1.1em 0 0; border-top: 1px solid var(--line); }
.b-prod__specs > div { display: flex; justify-content: space-between; gap: 1em; padding: .55em 0; border-bottom: 1px solid var(--line); }
.b-prod__specs dt { color: var(--mute); } .b-prod__specs dd { margin: 0; font-weight: 650; text-align: end; }
.b-score { padding: 1.25em; text-align: center; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 12%, var(--card)), var(--card)); border: 1px solid var(--line); }
.b-score__meta { font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.b-score__meta span { opacity: .6; margin-inline: .3em; }
.b-score__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8em; align-items: center; margin: .9em 0 .7em; }
.b-score__t b { font-size: 1.2em; line-height: 1.25; } .b-score__t.is-win b { color: color-mix(in srgb, var(--cat) 82%, var(--ink)); }
.b-score__s { display: flex; align-items: center; gap: .35em; font-size: 2.9em; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.b-score__s i { font-style: normal; opacity: .35; font-size: .55em; } .b-score__s .is-win { color: var(--cat); }
.b-score__st { display: inline-block; padding: .15em .85em; border-radius: 99px; background: var(--bg2); font-size: .8em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.prose .b-score__ev { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em 1em; margin-top: .95em; font-size: .88em; color: var(--ink2); }

/* ---------- pictures ---------- */
.b-fig { margin-inline: 0; }
.b-fig img { width: 100%; border-radius: var(--radius-s); }
.b-fig--wide { max-width: none; }
@media (min-width: 640px) {
  .prose > .b-fig--left, .prose > .b-fig--right { margin-block: .4em 1em; }
  .prose > .b-fig--left { float: left; margin-inline: 0 1.5em; } .prose > .b-fig--right { float: right; margin-inline: 1.5em 0; }
  .b-fig--sm { width: 22ch; } .b-fig--md { width: 32ch; } .b-fig--lg { width: 42ch; }
}
.gallery { margin-inline: 0; }
.gallery__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery__i { flex: 1 1 calc(50% - 8px); min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 700px) { .gallery--3 .gallery__i { flex-basis: calc(33.3% - 8px); } }
.gallery--1 .gallery__i { flex-basis: 100%; }
.gallery__i img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--bg2); }
.gallery--1 .gallery__i img { aspect-ratio: auto; }
.gallery__i figcaption { font-size: .78rem; line-height: 1.4; color: var(--mute); font-family: var(--font); }
.gallery > figcaption { padding: 8px 2px 0; font-size: .8rem; color: var(--mute); font-family: var(--font); }
.gallery--strip .gallery__grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.prose .b-tl, .gallery--strip .gallery__grid { scrollbar-width: none; -ms-overflow-style: none; }
.prose .b-tl::-webkit-scrollbar, .gallery--strip .gallery__grid::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .prose .b-tl, .gallery--strip .gallery__grid { scrollbar-width: thin; }
  .prose .b-tl::-webkit-scrollbar, .gallery--strip .gallery__grid::-webkit-scrollbar { display: block; height: 8px; }
}
/* only tables and code scroll by hand: a thin, quiet bar */
.tablewrap, .b-code pre { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
/* the hidden "Yes / No" labels in a table (position: absolute) must be clipped by the scrolling wrapper, not widen the page */
.tablewrap { position: relative; }
.gallery--strip .gallery__i { flex: 1 0 min(17rem, 78%); scroll-snap-align: start; }
.gallery--mosaic .gallery__grid { display: grid; grid-auto-rows: 7.5rem; gap: 6px; }
.gallery--mosaic .gallery__i { display: block; position: relative; overflow: hidden; border-radius: var(--radius-s); }
.gallery--mosaic .gallery__i img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.gallery--mosaic .gallery__i figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 1.2em .6em .45em; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.gallery--mosaic .gallery__i figcaption .credit { color: rgba(255, 255, 255, .8); }
.gallery--mosaic:has(.gallery__i:nth-child(2)) .gallery__grid { grid-template-columns: repeat(2, 1fr); }
.gallery--mosaic:has(.gallery__i:nth-child(3):last-child) .gallery__grid { grid-template-columns: 2fr 1fr; grid-template-areas: "a b" "a c"; }
.gallery--mosaic:has(.gallery__i:nth-child(4):last-child) .gallery__grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b" "a a c" "d d d"; }
.gallery--mosaic:has(.gallery__i:nth-child(5):last-child) .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-template-areas: "a a b c" "a a d e"; }
.gallery--mosaic:has(.gallery__i:nth-child(6):last-child) .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-template-areas: "a a b c" "a a d e" "f f f f"; }
.gallery--mosaic .gallery__i:nth-child(1) { grid-area: a; } .gallery--mosaic .gallery__i:nth-child(2) { grid-area: b; } .gallery--mosaic .gallery__i:nth-child(3) { grid-area: c; }
.gallery--mosaic .gallery__i:nth-child(4) { grid-area: d; } .gallery--mosaic .gallery__i:nth-child(5) { grid-area: e; } .gallery--mosaic .gallery__i:nth-child(6) { grid-area: f; }
.gallery--mosaic:has(.gallery__i:nth-child(2):last-child) .gallery__i { grid-area: auto; grid-row: span 2; }
.b-ba { margin-inline: 0; }
.b-ba__w { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: var(--radius); background: var(--bg2); user-select: none; }
.b-ba__l, .b-ba__r { position: absolute; inset: 0; }
.b-ba img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.b-ba__r { clip-path: inset(0 0 0 var(--pos)); }
.b-ba__h { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.b-ba__h::after { content: "\21C6"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #111; font-size: 1.1rem; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.b-ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.b-ba input:focus-visible ~ .b-ba__h::after { outline: 3px solid var(--brand); outline-offset: 2px; }
.b-ba__tag { position: absolute; top: .7rem; padding: .2em .75em; border-radius: 99px; background: rgba(0, 0, 0, .58); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.b-ba__tag--l { left: .7rem; } .b-ba__tag--r { right: .7rem; }
.b-ba > figcaption { padding-top: 8px; font-size: .8rem; color: var(--mute); }
.b-link { display: flex; gap: 1em; align-items: center; padding: .9em 1em; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s, transform .15s; }
.b-link:hover { border-color: var(--cat); box-shadow: var(--shadow); transform: translateY(-1px); }
.b-link__img { flex: none; width: 7.2rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--bg2); }
.b-link__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.b-link__b { flex: 1; min-width: 0; display: grid; gap: .15em; }
.b-link__b small { font-size: .74em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.b-link__b strong { font-size: 1.03em; line-height: 1.3; } .b-link__b > span { font-size: .9em; color: var(--ink2); line-height: 1.4; }
.b-link__go { flex: none; color: var(--mute); }

/* ---------- layout: picture beside text, columns, accordion, people, event, button, code ---------- */
.b-split { display: flex; flex-wrap: wrap; gap: 1.4em; align-items: flex-start; }
.b-split__m { flex: 1 1 16rem; min-width: 0; } .b-split__m:empty { display: none; }
.b-split__x { flex: 1 1 18rem; min-width: 0; }
.b-split--r1-2 .b-split__m { flex: 1 1 12rem; } .b-split--r1-2 .b-split__x { flex: 2 1 22rem; }
.b-split--r2-1 .b-split__m { flex: 2 1 22rem; } .b-split--r2-1 .b-split__x { flex: 1 1 12rem; }
@media (min-width: 720px) { .b-split--right .b-split__m { order: 2; } }
.b-split__m .fig img { width: 100%; }
.b-split__x > * + *, .b-cols__c > * + * { margin-top: 1em; }
.b-split__x > .b, .b-cols__c > .b { margin-block: 1em; }
.b-split__x > :first-child, .b-cols__c > :first-child { margin-top: 0; }
.b-split__x h3, .b-cols__c h3 { margin-top: 0; font-family: var(--font); font-size: 1.15em; font-weight: 800; }
.b-cols { display: flex; flex-wrap: wrap; gap: 1.6em; }
.b-cols__c { flex: 1 1 15rem; min-width: 0; }
.b-cols--n3 .b-cols__c { flex-basis: 12rem; }
.b-cols--r1-2 .b-cols__c:first-child { flex: 1 1 12rem; } .b-cols--r1-2 .b-cols__c:last-child { flex: 2 1 20rem; }
.b-cols--r2-1 .b-cols__c:first-child { flex: 2 1 20rem; } .b-cols--r2-1 .b-cols__c:last-child { flex: 1 1 12rem; }
.b-acc details { margin-top: .6em; border-radius: 14px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.b-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .9em 1.15em; cursor: pointer; list-style: none; font-weight: 700; }
.b-acc summary::-webkit-details-marker { display: none; }
.b-acc__c { color: var(--mute); transition: transform .2s; }
.b-acc details[open] summary { background: color-mix(in srgb, var(--cat) 7%, var(--card)); border-bottom: 1px solid var(--line); }
.b-acc details[open] .b-acc__c { transform: rotate(180deg); }
.b-acc__a { padding: .9em 1.15em 1em; color: var(--ink2); }
.b-people ul { display: flex; flex-wrap: wrap; gap: .9em; }
.b-people li { flex: 1 1 16rem; min-width: 0; display: flex; gap: .9em; padding: 1em; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.b-people li b { display: block; } .b-people li i { display: block; font-style: normal; font-size: .88em; color: var(--mute); }
.b-people li p { margin-top: .4em; font-size: .92em; color: var(--ink2); }
.b-ev { display: flex; gap: 1em; padding: 1em 1.1em; border-radius: 16px; background: var(--card); border: 1px solid var(--line); border-inline-start: 5px solid var(--cat); }
.b-ev__d { flex: none; width: 4.2rem; display: grid; place-content: center; text-align: center; border-radius: 14px; background: color-mix(in srgb, var(--cat) 14%, var(--bg2)); color: color-mix(in srgb, var(--cat) 85%, var(--ink)); }
.b-ev__d b { font-size: 1.9em; font-weight: 900; line-height: 1; } .b-ev__d i { font-style: normal; font-size: .72em; font-weight: 800; letter-spacing: .1em; }
.prose .b-ev__t { margin: 0; padding: 0; border: 0; font-size: 1.15em; font-weight: 800; }
.b-ev__m { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .9em; margin: .25em 0 .4em; font-size: .88em; color: var(--mute); }
.b-ev__m span { display: inline-flex; align-items: center; gap: .3em; }
.b-ev__a { display: inline-flex; align-items: center; gap: .35em; margin-top: .35em; font-weight: 700; color: var(--brand); }
.b-btn { margin-block: 1.5em; }
.b-code { margin-inline: 0; overflow: hidden; border-radius: 14px; background: #0f1226; color: #e6e8f5; border: 1px solid #262b4d; }
.b-code figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .5em .9em; background: #171b36; font-size: .78em; color: #9aa3c7; }
.b-code figcaption span, .b-code figcaption button { display: inline-flex; align-items: center; gap: .4em; }
.b-code figcaption button { padding: .2em .65em; border-radius: 8px; color: inherit; }
.b-code figcaption button:hover { background: rgba(255, 255, 255, .1); }
.b-code pre { margin: 0; padding: 1em 1.1em; overflow-x: auto; font: .86em/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prose .b-code code { padding: 0; background: none; font: inherit; }

/* ---------- print: keep the content, drop the chrome ---------- */
@media print {
  .b-ba input, .b-code button { display: none; }
  .b, .b-link, .b-vs__s, .b-prod { break-inside: avoid; }
}

/* ==========================================================================
   Interaction: the blocks answer the pointer (the shared language is described in app.css, "Interaction layer").
   Cards get a ring and a small lift, rows a tint and a bar, pictures a zoom, charts light up the bar you point at.
   Items inside a scrolling strip never lift (the strip would cut them off): they get an inside ring instead.
   ========================================================================== */
.b-call, .b-key, .b-qcard, .b-pc__c, .b-know__c, .b-chk li, .b-list--cards li, .b-tl > li, .b-stats--tiles li, .b-vs__s, .b-prod, .b-score, .b-rate, .b-verd,
.b-people li, .b-ev, .b-facts, .b-chart, .b-acc details, .b-code, .b-stats--bar li, .b-mkt li {
  transition: border-color .18s, box-shadow .2s var(--ease), background-color .18s, transform .2s var(--ease);
}
.b-key::before { transition: width .2s var(--ease); }
.b-call__i, .b-steps__n, .b-big__n, .b-ev__d { transition: transform .2s var(--ease), background-color .2s, color .2s; }
.b-list--dot li::before { transition: transform .2s var(--ease); }

/* rows: a tint and an accent bar, with room for it (the negative margin keeps the text where it was) */
.b-facts dl > div, .b-terms dl > div, .b-prod__specs > div, .chb__g, .chd__lg li { margin-inline: -.55em; padding-inline: .55em; border-radius: 9px; transition: background-color .15s, box-shadow .15s; }
.tablewrap td, .tablewrap th { transition: background-color .12s; }

@media (hover: hover) {
  /* text blocks */
  .b-call:hover { border-color: color-mix(in srgb, var(--tone) 62%, var(--line)); box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--tone) 70%, transparent); }
  .b-key:hover { box-shadow: var(--lift); }
  .b-key:hover::before { width: 9px; }
  .b-qcard:hover, .b-facts:hover, .b-rate:hover, .b-score:hover, .b-chart:hover, .b-code:hover { border-color: var(--ring); }
  .b-pc__c:hover, .b-know__c:hover, .b-verd:hover { border-color: color-mix(in srgb, var(--tone) 66%, var(--line)); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--tone) 70%, transparent); }
  /* lists */
  .b-chk li:hover, .b-list--cards li:hover { border-color: var(--ring); box-shadow: var(--lift); }
  .b-chk .is-done:hover { border-color: color-mix(in srgb, var(--up) 55%, var(--line)); }
  .b-tl > li:hover { box-shadow: inset 0 0 0 1px var(--ring); background: color-mix(in srgb, var(--cat) 6%, var(--card)); }
  /* rows */
  .b-facts dl > div:hover, .b-terms dl > div:hover, .b-prod__specs > div:hover, .chb__g:hover, .chd__lg li:hover { background: var(--tint); box-shadow: inset 3px 0 0 var(--cat); }
  [dir="rtl"] .b-facts dl > div:hover, [dir="rtl"] .b-terms dl > div:hover, [dir="rtl"] .b-prod__specs > div:hover, [dir="rtl"] .chb__g:hover, [dir="rtl"] .chd__lg li:hover { box-shadow: inset -3px 0 0 var(--cat); }
  .prose .tablewrap tbody tr:hover > * { background-color: color-mix(in srgb, var(--cat, var(--brand)) 9%, var(--card)); }
  /* numbers and data */
  .b-stats--tiles li:hover, .stats li:hover { border-color: var(--ring); box-shadow: var(--lift); }
  .b-stats--bar li:hover, .b-mkt li:hover { background: color-mix(in srgb, var(--cat) 8%, var(--card)); }
  .chb__g:hover .chb__t i, .chc__c:hover i, .b-rate__bars li:hover .b-bar i { filter: brightness(1.14) saturate(1.1); }
  .chc__c:hover b, .chc__g:hover .chc__l { color: var(--ink); }
  .chd__s:hover { stroke-width: 7.6; }
  .chl__d:hover { r: 6px; }
  .chl__d, .chd__s { transition: r .15s, stroke-width .15s; }
  /* compare, product, people, event */
  .b-vs__s:hover, .b-prod:hover, .b-people li:hover, .b-ev:hover { border-color: var(--ring); box-shadow: var(--lift); }
  .b-vs__s.is-win:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 34%, transparent), var(--lift); }
  .b-ev:hover .b-ev__d { background: color-mix(in srgb, var(--cat) 24%, var(--bg2)); }
  /* accordion */
  .b-acc details:hover { border-color: var(--ring); }
  .b-acc summary:hover { background: var(--tint); }
  /* link card: picture zooms, arrow moves, title underlines */
  .b-link__img img { transition: transform .5s var(--ease); }
  .b-link:hover .b-link__img img { transform: scale(1.07); }
  .b-link__b strong { width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .25s; }
  .b-link:hover .b-link__b strong { background-size: 100% 2px; }
  .b-link__go { transition: transform .2s var(--ease), color .2s; }
  .b-link:hover .b-link__go { color: var(--cat); }
  /* before / after handle */
  .b-ba__w:hover .b-ba__h::after { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 35%, transparent), 0 2px 10px rgba(0, 0, 0, .4); }
  /* gallery tiles: an inside ring (the strips and the mosaic clip anything outside) */
  .gallery .zw:hover { box-shadow: none; outline: 2px solid var(--ring2); outline-offset: -2px; }
}
.b-ba__h::after { transition: box-shadow .2s; }
.gallery--mosaic .zw { position: absolute; inset: 0; border-radius: 0; }

/* motion (only if the reader has not asked for less) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .b-call:hover .b-call__i { transform: scale(1.12) rotate(-5deg); }
  .b-chk li:hover, .b-list--cards li:hover, .b-stats--tiles li:hover, .stats li:hover, .b-vs__s:hover, .b-prod:hover, .b-people li:hover, .b-ev:hover, .b-tl--cards > li:hover { transform: translateY(-2px); }
  .b-tl--cards > li:hover { box-shadow: var(--lift); }
  .b-list--dot li:hover::before { transform: scale(1.6); }
  .b-steps li:hover .b-steps__n { transform: scale(1.12); }
  .b-big li:hover .b-big__n { color: color-mix(in srgb, var(--cat) 90%, transparent); transform: translateX(2px); }
  .b-link:hover .b-link__go { transform: translateX(4px); }
  .b-link:hover { transform: translateY(-2px); }
  .chc__c:hover i { transform: scaleX(1.08); transform-origin: 50% 100%; }
  .chc__c i { transition: transform .2s var(--ease), filter .15s; }
  .b-acc summary:hover .b-acc__c { transform: translateY(2px); }
  .b-acc details[open] summary:hover .b-acc__c { transform: rotate(180deg) translateY(2px); }
}