/*
  WhatAreTheBest visual system  v1.0  "the lab notebook"
  Shared vocabulary for the style guide, the four editorial pages,
  the category tree and the L2 / L3 / L4 ranking pages.
  Palette: white paper, navy ink, amber accent, mono evidence labels,
  1px rules over shadows, no gradients.
  Every class is prefixed wb- so it never collides with main.css.
  Tokens live on the .wb wrapper (not :root) so a page can opt in.
*/

.wb {
  --wb-page:#ffffff;
  --wb-surface:#ffffff;
  --wb-tint:#f3f5f9;
  --wb-tint-2:#e9edf4;
  --wb-ink:#0b1f3a;
  --wb-soft:#3f4b60;
  --wb-faint:#5b6980;
  --wb-rule:#e2e7ef;
  --wb-rule-strong:#c3cddb;
  --wb-navy:#0b1f3a;
  --wb-navy-2:#12305b;
  --wb-onnavy:#f5f7fb;
  --wb-onnavy-soft:#b7c3d6;
  --wb-link:#1a4a9c;
  --wb-link-soft:#e8eef9;
  --wb-amber:#e9a825;
  --wb-amber-deep:#8a5a00;
  --wb-amber-soft:#fdf3dc;
  --wb-red:#b3261e;
  --wb-red-soft:#fbeae8;
  --wb-green:#1f7a4d;
  --wb-green-soft:#e6f4ec;
  --wb-purple:#5b4a8f;
  --wb-purple-soft:#eeeaf7;
  --wb-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --wb-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wb-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wb-hand:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --wb-radius:10px;
  --wb-radius-sm:6px;
  --wb-header:96px;
  color:var(--wb-ink);
  background:var(--wb-page);
  font-family:var(--wb-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wb[data-theme="dark"] {
  --wb-page:#0c1522;
  --wb-surface:#111c2c;
  --wb-tint:#172436;
  --wb-tint-2:#1e2d43;
  --wb-ink:#e8edf5;
  --wb-soft:#b5c0d0;
  --wb-faint:#8b98ab;
  --wb-rule:#233248;
  --wb-rule-strong:#35475f;
  --wb-navy:#08131f;
  --wb-navy-2:#0f2038;
  --wb-onnavy:#eef2f8;
  --wb-onnavy-soft:#9fb0c7;
  --wb-link:#8fb3ec;
  --wb-link-soft:#1a2b45;
  --wb-amber:#e9b64a;
  --wb-amber-deep:#e9b64a;
  --wb-amber-soft:#2a2210;
  --wb-red:#f28b83;
  --wb-red-soft:#2c1715;
  --wb-green:#7dd3a4;
  --wb-green-soft:#14271d;
  --wb-purple:#b7a6de;
  --wb-purple-soft:#241d36;
}

/* ---------- shields against main.css globals ---------- */
.wb *, .wb *::before, .wb *::after { box-sizing:border-box; }
.wb p { margin:0 0 1rem; color:inherit !important; }
.wb :where(h1, h2, h3, h4) { margin:0; color:inherit; font-weight:600; line-height:1.15; }
.wb :where(a) { color:var(--wb-link); text-decoration:none; transition:none; }
.wb :where(a):hover { color:var(--wb-link); text-decoration:underline; }
.wb :where(ul, ol) { margin:0; padding:0; }
.wb img { max-width:100%; height:auto; }
.wb button { font:inherit; }
.wb figure { margin:0; }
.wb table { border-collapse:collapse; }

/* ---------- shell ---------- */
.wb-shell { max-width:1180px; margin:0 auto; padding:0 24px 80px; }
.wb-shell-narrow { max-width:860px; }
.wb-band { padding:56px 0; }
.wb-band-navy { color:var(--wb-onnavy); background:var(--wb-navy); }
.wb-band-navy .wb-kicker { color:var(--wb-amber); }
.wb-band-navy .wb-kicker::after { background:rgba(255,255,255,.25); }
.wb-band-tint { background:var(--wb-tint); }
.wb-diag-bottom { clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),0 100%); padding-bottom:calc(56px + 48px); }
.wb-diag-top { clip-path:polygon(0 48px,100% 0,100% 100%,0 100%); padding-top:calc(56px + 48px); }

/* page header block (title area under the site header) */
.wb-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:44px 0 26px; border-bottom:2px solid var(--wb-ink); }
.wb-head.wb-head-center { grid-template-columns:1fr; text-align:center; }
.wb-head.wb-head-center .wb-kicker { justify-content:center; }
.wb-head.wb-head-center .wb-kicker::after { display:none; }
.wb-head.wb-head-center .wb-intro { margin-left:auto; margin-right:auto; }
.wb-kicker { display:flex; align-items:center; gap:11px; margin:0 0 12px; color:var(--wb-link); font:700 12px/1.2 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-kicker::after { content:""; flex:1; max-width:120px; height:1px; background:var(--wb-rule-strong); }
.wb-head h1 { max-width:18ch; color:var(--wb-ink); font:600 clamp(34px,5.6vw,60px)/1.02 var(--wb-serif); letter-spacing:-.02em; }
.wb-intro { max-width:64ch; margin:16px 0 0 !important; color:var(--wb-soft) !important; font:italic 18px/1.55 var(--wb-serif); }
.wb-head-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; color:var(--wb-faint); font:12px/1.5 var(--wb-mono); }
.wb-head-meta b { color:var(--wb-ink); font-weight:700; }
.wb-head-aside { display:grid; gap:8px; justify-items:end; }

/* breadcrumb */
.wb-crumb { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding:14px 0 0; margin:0; list-style:none; color:var(--wb-faint); font:12.5px/1.4 var(--wb-sans); white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.wb-crumb::-webkit-scrollbar { display:none; }
@media (max-width:640px) { .wb-crumb { flex-wrap:wrap; white-space:normal; overflow:visible; row-gap:2px; } .wb-crumb li { display:inline; } .wb-crumb li + li::before { margin-right:6px; } }
.wb-crumb li { display:flex; align-items:center; gap:6px; }
.wb-crumb li + li::before { content:"/"; color:var(--wb-rule-strong); }
.wb-crumb a { color:var(--wb-soft); }
.wb-crumb [aria-current] { color:var(--wb-ink); font-weight:600; }

/* sticky section nav (chips) */
.wb-subnav { position:sticky; top:var(--wb-header); z-index:20; display:flex; gap:8px; overflow-x:auto; margin:0 -24px 34px; padding:12px 24px; border-bottom:1px solid var(--wb-rule); background:var(--wb-page); scrollbar-width:none; }
.wb-subnav::-webkit-scrollbar { display:none; }
.wb-subnav a { flex:0 0 auto; padding:7px 12px; border:1px solid var(--wb-rule); border-radius:999px; color:var(--wb-soft); background:var(--wb-surface); font:600 11.5px/1 var(--wb-sans); white-space:nowrap; }
.wb-subnav a:hover, .wb-subnav a.is-on { color:var(--wb-onnavy); border-color:var(--wb-navy); background:var(--wb-navy); text-decoration:none; }

/* sections */
.wb-section { margin:58px 0 0; scroll-margin-top:calc(var(--wb-header) + 60px); }
.wb-section-head { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:baseline; margin:0 0 22px; padding-bottom:12px; border-bottom:1px solid var(--wb-rule); }
.wb-section-no { color:var(--wb-link); font:700 28px/1 var(--wb-mono); letter-spacing:-.04em; }
.wb-section h2, .wb-h2 { color:var(--wb-ink); font:600 clamp(26px,3.6vw,38px)/1.05 var(--wb-serif); letter-spacing:-.015em; }
.wb-section-head p { grid-column:2; margin:2px 0 0 !important; color:var(--wb-soft) !important; font:italic 15px/1.5 var(--wb-serif); }
.wb-section-head .wb-more { grid-column:3; grid-row:1; }
.wb-more { color:var(--wb-link); font:600 13.5px/1.2 var(--wb-sans); white-space:nowrap; }
.wb-more::after { content:" \2192"; }
.wb-h3 { color:var(--wb-ink); font:600 20px/1.2 var(--wb-serif); }

/* demo grid (style guide) */
.wb-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.wb-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wb-demo { position:relative; min-width:0; overflow:hidden; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-surface); }
.wb-demo-wide { grid-column:1 / -1; }
.wb-demo-head { display:flex; align-items:center; gap:10px; min-height:44px; padding:9px 14px; border-bottom:1px solid var(--wb-rule); background:var(--wb-tint); }
.wb-demo-no { color:var(--wb-link); font:700 12px/1 var(--wb-mono); }
.wb-demo-title { color:var(--wb-ink); font:700 13px/1.2 var(--wb-sans); }
.wb-demo-use { margin-left:auto; color:var(--wb-faint); font:11px/1 var(--wb-mono); text-transform:uppercase; letter-spacing:.08em; }
.wb-demo-code { margin-left:8px; color:var(--wb-amber-deep); font:700 11px/1 var(--wb-mono); }
.wb-stage { min-height:150px; padding:22px; color:var(--wb-ink); background:var(--wb-surface); }
.wb-stage > :last-child { margin-bottom:0; }
.wb-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
.wb-caption { margin:0 !important; color:var(--wb-faint) !important; font:12px/1.5 var(--wb-mono); }
.wb-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* primitives */
.wb-label { display:inline-block; margin:0 0 8px; color:var(--wb-link); font:700 11.5px/1.2 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--wb-rule); border-radius:999px; padding:5px 9px; color:var(--wb-soft); background:var(--wb-tint); font:600 11px/1 var(--wb-sans); }
.wb-pill.good { color:var(--wb-green); background:var(--wb-green-soft); border-color:transparent; }
.wb-pill.bad { color:var(--wb-red); background:var(--wb-red-soft); border-color:transparent; }
.wb-pill.warn { color:var(--wb-amber-deep); background:var(--wb-amber-soft); border-color:transparent; }
.wb-pill.navy { color:var(--wb-onnavy); background:var(--wb-navy); border-color:transparent; }
.wb-dot { width:7px; height:7px; border-radius:50%; background:var(--wb-link); }
.wb-good { color:var(--wb-green) !important; }
.wb-bad { color:var(--wb-red) !important; }
.wb-warn { color:var(--wb-amber-deep) !important; }
.wb-mono { font-family:var(--wb-mono); }
.wb-num { font-variant-numeric:tabular-nums; }
.wb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border:1px solid var(--wb-navy); border-radius:var(--wb-radius-sm); color:var(--wb-onnavy); background:var(--wb-navy); font:600 14px/1.2 var(--wb-sans); text-decoration:none; cursor:pointer; }
.wb-btn:hover { color:var(--wb-onnavy); background:var(--wb-navy-2); text-decoration:none; }
.wb-btn-outline { color:var(--wb-navy); background:transparent; }
.wb-btn-outline:hover { color:var(--wb-navy); background:var(--wb-tint); }
.wb-band-navy .wb-btn-outline { color:var(--wb-onnavy); border-color:rgba(255,255,255,.4); }
.wb-band-navy .wb-btn-outline:hover { background:rgba(255,255,255,.08); color:var(--wb-onnavy); }
.wb-btn-amber { color:#2a1d02; background:var(--wb-amber); border-color:var(--wb-amber); }
.wb-btn-amber:hover { color:#2a1d02; background:#f0b53c; }
.wb-btn-sm { min-height:36px; padding:6px 12px; font-size:13px; }
.wb-btn-row { display:flex; flex-wrap:wrap; gap:10px; }
.wb-rule-h { height:1px; margin:32px 0; background:var(--wb-rule); border:0; }
.wb-divider { display:flex; align-items:center; gap:14px; margin:40px 0; color:var(--wb-faint); font:700 11px/1 var(--wb-mono); letter-spacing:.14em; text-transform:uppercase; }
.wb-divider::before, .wb-divider::after { content:""; flex:1; height:1px; background:var(--wb-rule-strong); }
.wb-logo { display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border:1px solid var(--wb-rule); border-radius:8px; background:#fff; overflow:hidden; }
.wb-logo img { width:36px; height:36px; object-fit:contain; }
.wb-logo-lg { width:64px; height:64px; }
.wb-logo-lg img { width:52px; height:52px; }
.wb-logo-sm { width:32px; height:32px; border-radius:6px; }
.wb-logo-sm img { width:26px; height:26px; }
.wb-logo-fallback { color:var(--wb-navy); font:700 16px/1 var(--wb-serif); }

/* ---------- 01-15 words ---------- */
.wb-dropcap { margin:0; font:18px/1.7 var(--wb-serif); }
.wb-dropcap::first-letter { float:left; margin:6px 10px 0 0; color:var(--wb-navy); font:600 60px/.74 var(--wb-serif); }
.wb-highlight { display:inline; padding:2px 4px; color:var(--wb-ink); background:linear-gradient(transparent 52%,var(--wb-amber) 52% 92%,transparent 92%); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.wb[data-theme="dark"] .wb-highlight { background:linear-gradient(transparent 52%,rgba(233,182,74,.4) 52% 92%,transparent 92%); }
.wb-eyebrow { display:flex; align-items:center; gap:10px; margin:0; color:var(--wb-link); font:700 12px/1 var(--wb-mono); letter-spacing:.15em; text-transform:uppercase; }
.wb-eyebrow::after { content:""; flex:1; height:1px; background:var(--wb-rule-strong); }
.wb-pull { margin:0; color:var(--wb-ink); font:600 clamp(22px,3.4vw,32px)/1.16 var(--wb-serif); letter-spacing:-.015em; }
.wb-annotated { position:relative; display:inline-block; color:var(--wb-ink); font:600 26px/1.3 var(--wb-serif); text-decoration:underline wavy var(--wb-red) 2px; text-underline-offset:7px; }
.wb-annotated::after { content:"\2196  " attr(data-note); position:absolute; left:14px; top:calc(100% + 9px); color:var(--wb-red); font:600 13px/1.2 var(--wb-hand); transform:rotate(-2deg); white-space:nowrap; }
.wb-definition { display:grid; grid-template-columns:auto 1fr; gap:14px; margin:0; padding-left:14px; border-left:3px solid var(--wb-amber); }
.wb-definition dt { color:var(--wb-navy); font:600 24px/1.1 var(--wb-serif); }
.wb-definition dt em { display:block; margin-top:4px; color:var(--wb-faint); font:italic 12px/1.3 var(--wb-serif); }
.wb-definition dd { margin:0; color:var(--wb-soft); font-size:14px; }
.wb-redline { margin:0; color:var(--wb-faint); font:600 22px/1.28 var(--wb-serif); text-decoration:line-through 2.5px var(--wb-red); }
.wb-correction { margin:8px 0 0; color:var(--wb-ink); font:600 24px/1.2 var(--wb-serif); }
.wb-margin-note { max-width:280px; margin-left:auto; padding:10px 0 10px 14px; border-left:2px solid var(--wb-amber); color:var(--wb-soft); font:italic 14px/1.55 var(--wb-serif); }
.wb-display { margin:0; color:var(--wb-ink); font:600 clamp(32px,5.5vw,54px)/1 var(--wb-serif); letter-spacing:-.025em; }
.wb-deck { margin:0; color:var(--wb-soft); font:italic 20px/1.48 var(--wb-serif); }
.wb-lead { margin:0; color:var(--wb-ink); font:18px/1.62 var(--wb-serif); }
.wb-smallcaps { margin:0; color:var(--wb-soft); font:700 13px/1.6 var(--wb-sans); font-variant:small-caps; letter-spacing:.13em; }
.wb-code { display:inline-block; border:1px solid var(--wb-rule); border-radius:5px; padding:2px 6px; color:var(--wb-purple); background:var(--wb-purple-soft); font:12px/1.4 var(--wb-mono); }
.wb-key { display:inline-block; min-width:28px; margin:0 2px; border:1px solid var(--wb-rule-strong); border-bottom-width:3px; border-radius:6px; padding:4px 7px; color:var(--wb-ink); background:var(--wb-tint); font:700 12px/1 var(--wb-mono); text-align:center; }
.wb-footnote { display:flex; gap:8px; color:var(--wb-faint); font:12.5px/1.55 var(--wb-sans); }
.wb-footnote sup { color:var(--wb-link); font:700 11.5px/1.4 var(--wb-mono); }
.wb-prose { max-width:68ch; color:var(--wb-soft); font-size:16.5px; line-height:1.7; }
.wb-prose p { margin-bottom:1rem; }
.wb-prose b, .wb-prose strong { color:var(--wb-ink); }
.wb-prose h2 { margin:34px 0 10px; color:var(--wb-ink); font:600 26px/1.15 var(--wb-serif); }
.wb-prose h3 { margin:26px 0 8px; color:var(--wb-ink); font:600 20px/1.2 var(--wb-serif); }
.wb-prose ul { padding-left:20px; margin:0 0 1rem; }
.wb-prose li { margin:4px 0; }

/* ---------- 16-25 quotes ---------- */
.wb-quote { margin:0; padding-left:18px; border-left:3px solid var(--wb-amber); color:var(--wb-ink); font:italic 22px/1.38 var(--wb-serif); }
.wb-quote cite { display:block; margin-top:12px; color:var(--wb-faint); font:700 11px/1.3 var(--wb-sans); font-style:normal; text-transform:uppercase; letter-spacing:.1em; }
.wb-person-quote { display:grid; grid-template-columns:54px 1fr; gap:16px; align-items:start; }
.wb-avatar { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; color:var(--wb-onnavy); background:var(--wb-navy); border:2px solid var(--wb-amber); box-shadow:0 0 0 3px var(--wb-amber-soft); font:600 18px/1 var(--wb-serif); overflow:hidden; }
.wb-avatar img { width:100%; height:100%; object-fit:cover; }
.wb-person-quote blockquote { margin:0; color:var(--wb-ink); font:italic 17px/1.48 var(--wb-serif); }
.wb-person-quote blockquote::before { content:"\201C"; margin-right:2px; color:var(--wb-amber); font:700 1.3em/0 var(--wb-serif); font-style:normal; vertical-align:-.12em; }
.wb-person-quote cite { display:block; margin-top:8px; color:var(--wb-faint); font:700 11px/1.2 var(--wb-sans); font-style:normal; text-transform:uppercase; letter-spacing:.07em; }
.wb-quote-card { position:relative; margin:0; padding:24px; border-radius:var(--wb-radius); color:var(--wb-onnavy); background:var(--wb-navy); }
.wb-quote-card::before { content:"\201C"; position:absolute; right:14px; top:-5px; color:var(--wb-amber); font:700 76px/1 var(--wb-serif); opacity:.55; }
.wb-quote-card p { position:relative; max-width:85%; margin:0; font:600 19px/1.42 var(--wb-serif); }
.wb-quote-card cite { display:block; margin-top:10px; color:var(--wb-onnavy-soft); font:700 11px/1.2 var(--wb-sans); font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.wb-quote-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.wb-quote-wall span { position:relative; padding:24px 12px 12px; border:1px solid var(--wb-rule); border-radius:8px; color:var(--wb-soft); background:var(--wb-tint); font:italic 13px/1.4 var(--wb-serif); }
.wb-quote-wall span::before { content:"\201C"; position:absolute; left:10px; top:2px; color:var(--wb-amber); font:700 26px/1 var(--wb-serif); }
.wb-opposed { position:relative; display:grid; grid-template-columns:1fr 1px 1fr; gap:18px; align-items:stretch; }
.wb-opposed::before { content:""; grid-column:2; grid-row:1; background:var(--wb-rule-strong); }
.wb-opposed::after { content:"VS"; position:absolute; left:50%; top:50%; padding:6px 8px; border-radius:999px; color:var(--wb-onnavy); background:var(--wb-navy); font:700 11px/1 var(--wb-mono); letter-spacing:.06em; transform:translate(-50%,-50%); }
.wb-opposed blockquote { margin:0; padding-left:12px; color:var(--wb-ink); font:italic 16px/1.48 var(--wb-serif); }
.wb-opposed blockquote:first-child { border-left:3px solid var(--wb-link); }
.wb-opposed blockquote:last-child { grid-column:3; border-left:3px solid var(--wb-red); }
.wb-source-quote { margin:0; padding:16px; border:1px dashed var(--wb-rule-strong); border-radius:var(--wb-radius); background:var(--wb-tint); }
.wb-source-quote .source { color:var(--wb-link); font:700 11.5px/1 var(--wb-mono); text-transform:uppercase; letter-spacing:.1em; word-break:break-all; }
.wb-source-quote p { margin:8px 0 0 !important; font:16px/1.52 var(--wb-serif); }
.wb-review { display:grid; gap:8px; padding:16px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-tint); }
.wb-review .stars-row { display:flex; align-items:center; gap:10px; }
.wb-stars { color:var(--wb-amber); font-size:18px; letter-spacing:2px; }
.wb-review .sc { padding:3px 8px; border-radius:5px; color:var(--wb-amber-deep); background:var(--wb-amber-soft); font:700 12px/1 var(--wb-mono); }
.wb-review p { margin:0 !important; font:italic 17px/1.48 var(--wb-serif); }
.wb-review cite { color:var(--wb-faint); font:700 11px/1 var(--wb-sans); font-style:normal; text-transform:uppercase; letter-spacing:.07em; }
.wb-quote-strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:5px; scroll-snap-type:x proximity; }
.wb-quote-strip blockquote { position:relative; flex:0 0 210px; margin:0; padding:26px 13px 13px; border:1px solid var(--wb-rule); border-top:3px solid var(--wb-link); border-radius:var(--wb-radius); color:var(--wb-soft); background:var(--wb-tint); font:italic 13px/1.42 var(--wb-serif); scroll-snap-align:start; }
.wb-quote-strip blockquote::before { content:"\201C"; position:absolute; left:11px; top:4px; color:var(--wb-amber); font:700 26px/1 var(--wb-serif); }
.wb-quote-strip blockquote:nth-child(2) { border-top-color:var(--wb-amber); }
.wb-quote-strip blockquote:nth-child(3) { border-top-color:var(--wb-purple); }

/* ---------- 26-40 numbers ---------- */
.wb-big-number { color:var(--wb-navy); font:600 clamp(48px,9vw,84px)/.9 var(--wb-serif); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.wb-big-number small { display:block; margin-top:14px; color:var(--wb-soft); font:600 13px/1.45 var(--wb-sans); letter-spacing:0; }
.wb-stat-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--wb-rule); }
.wb-stat-row div { min-width:0; padding:16px; border-left:1px solid var(--wb-rule); }
.wb-stat-row div:first-child { border-left:0; }
.wb-stat-row b { display:block; color:var(--wb-navy); font:600 26px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-stat-row span { display:block; margin-top:6px; color:var(--wb-faint); font-size:11.5px; line-height:1.35; }
.wb-stat-row em { display:inline-block; margin-top:7px; padding:2px 6px; border-radius:4px; color:var(--wb-green); background:var(--wb-green-soft); font:700 11px/1.3 var(--wb-mono); font-style:normal; }
.wb-stat-row em.dn { color:var(--wb-red); background:var(--wb-red-soft); }
.wb-delta { display:flex; align-items:baseline; gap:10px; }
.wb-delta b { color:var(--wb-green); font:600 42px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-delta b::before { content:"\25B2"; margin-right:7px; font-size:.42em; vertical-align:.5em; }
.wb-delta.down b { color:var(--wb-red); }
.wb-delta.down b::before { content:"\25BC"; }
.wb-delta.flat b { color:var(--wb-faint); }
.wb-delta.flat b::before { content:"\25CF"; }
.wb-delta span { color:var(--wb-soft); font-size:13px; }
/* gauge: set --pct (0-100) */
.wb-gauge { --pct:72; position:relative; width:190px; height:95px; overflow:hidden; margin:8px auto 0; }
.wb-gauge::before { content:""; position:absolute; left:0; right:0; top:0; height:190px; border-radius:50%; background:conic-gradient(from -90deg, var(--wb-link) 0deg calc(var(--pct) * 1.8deg), var(--wb-tint-2) calc(var(--pct) * 1.8deg) 180deg, transparent 180deg 360deg); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 61px, #000 62px); mask:radial-gradient(circle at 50% 50%, transparent 61px, #000 62px); }
.wb-gauge b { position:absolute; left:0; right:0; bottom:16px; text-align:center; font:600 34px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-gauge span { position:absolute; left:0; right:0; bottom:2px; text-align:center; color:var(--wb-faint); font:700 11px/1 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
/* progress: set --pct on the fill and data-v for the label */
.wb-progress { display:grid; gap:8px; }
.wb-progress b { font-size:13.5px; }
.wb-progress-track { position:relative; height:18px; border-radius:999px; background:var(--wb-tint-2); border:1px solid var(--wb-rule); }
.wb-progress-track::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--wb-page) calc(25% - 1px) 25%); border-radius:inherit; pointer-events:none; }
.wb-progress-fill { --pct:72; position:relative; z-index:1; width:calc(var(--pct) * 1%); height:100%; border-radius:999px; background:var(--wb-link); }
.wb-progress-fill::after { content:attr(data-v); position:absolute; right:8px; top:50%; color:#fff; font:700 11px/1 var(--wb-mono); transform:translateY(-50%); }
/* score ring: set --pct (0-100); the number is your own text */
.wb-score { --pct:84; --ring:var(--wb-green); position:relative; display:grid; place-items:center; width:116px; aspect-ratio:1; margin:auto; border-radius:50%; background:conic-gradient(var(--ring) 0 calc(var(--pct) * 1%), var(--wb-tint-2) calc(var(--pct) * 1%)); }
.wb-score::before { content:""; position:absolute; inset:10px; border-radius:50%; background:var(--wb-surface); }
.wb-score b { position:relative; text-align:center; font:600 32px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-score b small { display:block; margin-top:3px; color:var(--wb-faint); font:700 10.5px/1 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; }
.wb-score.amber { --ring:var(--wb-amber); }
.wb-score.navy { --ring:var(--wb-navy); }
.wb-score.red { --ring:var(--wb-red); }
.wb-score-sm { width:64px; }
.wb-score-sm::before { inset:6px; }
.wb-score-sm b { font-size:19px; }
.wb-score-sm b small { display:none; }
/* benchmark: two bars (you vs baseline) */
.wb-benchmark { display:grid; grid-template-columns:auto 1fr; gap:12px 12px; align-items:center; padding-right:40px; }
.wb-benchmark span { color:var(--wb-ink); font:600 12px/1.3 var(--wb-sans); }
.wb-benchmark .bar { height:10px; border-radius:99px; background:var(--wb-tint-2); }
.wb-benchmark .bar i { position:relative; display:block; width:calc(var(--w,60) * 1%); height:100%; border-radius:99px; background:var(--wb-link); }
.wb-benchmark .bar:last-of-type i { background:var(--wb-rule-strong); }
.wb-benchmark .bar i::after { content:attr(data-v); position:absolute; left:calc(100% + 7px); top:50%; color:var(--wb-soft); font:700 11px/1 var(--wb-mono); transform:translateY(-50%); }
.wb-range { position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--wb-faint); font:700 11px/1 var(--wb-mono); letter-spacing:.1em; }
.wb-range .line { --pos:64; position:relative; flex:1; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--wb-green-soft),var(--wb-amber-soft),var(--wb-red-soft)); }
.wb-range .line::after { content:""; position:absolute; left:calc(var(--pos) * 1%); top:50%; width:16px; height:16px; border:3px solid var(--wb-surface); border-radius:50%; background:var(--wb-navy); box-shadow:0 0 0 1px var(--wb-navy); transform:translate(-50%,-50%); }
.wb-split-stat { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:var(--wb-radius); }
.wb-split-stat div { padding:18px; text-align:center; }
.wb-split-stat div:first-child { color:var(--wb-onnavy); background:var(--wb-navy); }
.wb-split-stat div:last-child { color:var(--wb-ink); background:var(--wb-amber-soft); }
.wb-split-stat b { display:block; font:600 34px/1 var(--wb-serif); }
.wb-split-stat span { display:block; margin-top:6px; font:700 11px/1 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.wb-ratio { display:flex; align-items:center; justify-content:center; gap:22px; }
.wb-ratio .side { display:grid; justify-items:center; gap:8px; }
.wb-ratio b { font:600 44px/1 var(--wb-serif); }
.wb-ratio .to { color:var(--wb-faint); font:italic 15px/1 var(--wb-serif); }
.wb-ratio .dots { display:flex; gap:4px; }
.wb-ratio .dots i { width:10px; height:10px; border-radius:50%; background:var(--wb-link); }
.wb-pictograph { display:flex; flex-wrap:wrap; gap:6px; }
.wb-person { width:16px; height:26px; border-radius:8px 8px 3px 3px; background:var(--wb-tint-2); position:relative; }
.wb-person::before { content:""; position:absolute; left:3px; top:-9px; width:10px; height:10px; border-radius:50%; background:inherit; }
.wb-person.on { background:var(--wb-link); }
.wb-kpi-ribbon { display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:center; padding:12px 16px; border-left:4px solid var(--wb-amber); background:var(--wb-tint); }
.wb-kpi-ribbon span { color:var(--wb-soft); font-size:13px; }
.wb-kpi-ribbon em { grid-column:1; color:var(--wb-green); font:700 11.5px/1 var(--wb-mono); font-style:normal; }
.wb-kpi-ribbon em.dn { color:var(--wb-red); }
.wb-kpi-ribbon b { grid-column:2; grid-row:1 / 3; font:600 32px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-number-stack { display:grid; gap:8px; }
.wb-number-stack div { display:flex; align-items:baseline; gap:8px; font-size:13.5px; }
.wb-number-stack span { color:var(--wb-soft); }
.wb-number-stack i { flex:1; border-bottom:1px dotted var(--wb-rule-strong); }
.wb-number-stack b { font:700 14px/1 var(--wb-mono); font-variant-numeric:tabular-nums; }
.wb-percentile { --pos:82; position:relative; height:10px; margin:22px 0 6px; border-radius:99px; background:linear-gradient(90deg,var(--wb-tint-2),var(--wb-link-soft)); }
.wb-percentile::before { content:attr(data-v); position:absolute; left:calc(var(--pos) * 1%); bottom:calc(100% + 6px); padding:3px 7px; border-radius:5px; color:var(--wb-onnavy); background:var(--wb-navy); font:700 11px/1 var(--wb-mono); transform:translateX(-50%); white-space:nowrap; }
.wb-percentile::after { content:""; position:absolute; left:calc(var(--pos) * 1%); top:50%; width:16px; height:16px; border:3px solid var(--wb-surface); border-radius:50%; background:var(--wb-navy); transform:translate(-50%,-50%); }

/* ---------- 41-55 tables and comparisons ---------- */
.wb-table { width:100%; min-width:520px; border-collapse:collapse; color:var(--wb-ink); font-size:13.5px; }
.wb-table caption { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--wb-link); font:700 11.5px/1 var(--wb-mono); text-align:left; text-transform:uppercase; letter-spacing:.1em; }
.wb-table caption::after { content:""; flex:1; height:1px; background:var(--wb-rule-strong); }
.wb-table th, .wb-table td { padding:10px 12px; border-bottom:1px solid var(--wb-rule); text-align:left; font-variant-numeric:tabular-nums; vertical-align:top; }
.wb-table tbody th, .wb-table tbody td:first-child { font-weight:600; }
.wb-table thead th { color:var(--wb-soft); border-bottom:2px solid var(--wb-rule-strong); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; }
.wb-table tbody tr:hover { background:var(--wb-tint); }
.wb-table .num { font:700 12.5px var(--wb-mono); }
.wb-table .num.up { color:var(--wb-green); }
.wb-table .num.dn { color:var(--wb-red); }
.wb-table .tag { display:inline-block; padding:3px 9px; border-radius:99px; font:700 10.5px/1.3 var(--wb-sans); font-style:normal; }
.wb-table .tag.bad { color:var(--wb-red); background:var(--wb-red-soft); }
.wb-table .tag.mid { color:var(--wb-amber-deep); background:var(--wb-amber-soft); }
.wb-table .tag.good { color:var(--wb-green); background:var(--wb-green-soft); }
.wb-table-striped tbody tr:nth-child(even) { background:var(--wb-tint); }
.wb-table-compact th, .wb-table-compact td { padding:6px 8px; font-size:12.5px; }
.wb-heat-table { min-width:0 !important; border-collapse:separate; border-spacing:3px; }
.wb-heat-table th, .wb-heat-table td { border-bottom:0; }
.wb-heat-table thead th { color:var(--wb-faint); font:700 11px/1.3 var(--wb-mono); text-align:center; letter-spacing:.06em; }
.wb-heat-table tbody th { color:var(--wb-soft); font:600 12px/1.3 var(--wb-sans); }
.wb-heat-table tbody tr:hover { background:none; }
.wb-heat-table td .txt { display:block; max-width:170px; margin:0 auto; font-size:12px; line-height:1.3; white-space:normal; text-align:center; }
.wb-mod-title .wb-mod-title-note { margin-left:8px; color:var(--wb-red); font:700 11px/1 var(--wb-mono); text-transform:none; letter-spacing:0; }
.wb-heat { text-align:center !important; border-radius:7px; font:700 11.5px/1.4 var(--wb-mono); text-transform:uppercase; letter-spacing:.04em; }
.wb-heat.low { color:var(--wb-green); background:var(--wb-green-soft); }
.wb-heat.mid { color:var(--wb-amber-deep); background:var(--wb-amber-soft); }
.wb-heat.high { color:var(--wb-red); background:var(--wb-red-soft); }
.wb-heat.na { color:var(--wb-faint); background:var(--wb-tint); }
.wb-check, .wb-cross, .wb-dash { text-align:center !important; font-weight:800; font-size:14px; border-radius:6px; }
.wb-check { color:var(--wb-green); background:var(--wb-green-soft); }
.wb-cross { color:var(--wb-red); background:var(--wb-red-soft); }
.wb-dash { color:var(--wb-faint); background:var(--wb-tint); font-weight:400; }
.wb-procon { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wb-procon section { min-width:0; padding:15px; border-radius:var(--wb-radius); background:var(--wb-green-soft); border-top:3px solid var(--wb-green); }
.wb-procon section:last-child { background:var(--wb-red-soft); border-top-color:var(--wb-red); }
.wb-procon h3, .wb-procon h4 { display:flex; align-items:center; gap:8px; margin:0 0 10px; color:var(--wb-green); font:700 12px/1 var(--wb-mono); text-transform:uppercase; letter-spacing:.06em; }
.wb-procon h3::before, .wb-procon h4::before { content:"+"; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:var(--wb-green); font:700 12px/1 var(--wb-sans); }
.wb-procon section:last-child h3, .wb-procon section:last-child h4 { color:var(--wb-red); }
.wb-procon section:last-child h3::before, .wb-procon section:last-child h4::before { content:"\2212"; background:var(--wb-red); }
.wb-procon ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; color:var(--wb-soft); font-size:13.5px; }
.wb-procon li { position:relative; padding-left:16px; }
.wb-procon li::before { content:"+"; position:absolute; left:0; color:var(--wb-green); font-weight:800; }
.wb-procon section:last-child li::before { content:"\2212"; color:var(--wb-red); }
.wb-before-after { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }
.wb-before-after section { padding:14px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); text-align:center; }
.wb-before-after section:last-child { border-color:var(--wb-green); background:var(--wb-green-soft); }
.wb-before-after b { display:block; margin-bottom:4px; font:700 11px/1 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wb-faint); }
.wb-before-after .arrow { color:var(--wb-amber-deep); font-size:22px; font-weight:800; }
.wb-price-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:end; padding-top:12px; }
.wb-price-card { padding:16px 13px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); text-align:center; }
.wb-price-card span { color:var(--wb-faint); font:700 11px/1.4 var(--wb-mono); text-transform:uppercase; letter-spacing:.1em; }
.wb-price-card.featured { position:relative; padding-top:22px; border:2px solid var(--wb-navy); background:var(--wb-link-soft); }
.wb-price-card.featured em { position:absolute; left:50%; top:-11px; padding:4px 9px; border-radius:99px; color:#2a1d02; background:var(--wb-amber); font:700 10.5px/1 var(--wb-mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transform:translateX(-50%); }
.wb-price-card b { display:block; margin:6px 0 0; font:600 24px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-price-card b small { color:var(--wb-faint); font:700 11px/1 var(--wb-sans); }
.wb-price-card p { margin:8px 0 0 !important; color:var(--wb-soft) !important; font-size:12px; }
.wb-ladder { display:grid; gap:6px; counter-reset:rank; }
.wb-ladder > * { counter-increment:rank; display:grid; grid-template-columns:30px auto 1fr auto; gap:12px; align-items:center; padding:9px 12px 9px 0; border-bottom:1px solid var(--wb-rule); color:var(--wb-ink); font-size:14px; text-decoration:none; }
.wb-ladder > *::before { content:counter(rank); color:var(--wb-amber-deep); font:600 22px/1 var(--wb-serif); text-align:center; }
.wb-ladder > :first-child::before { color:var(--wb-amber-deep); }
.wb-ladder > :hover { background:var(--wb-tint); text-decoration:none; }
.wb-ladder .who { min-width:0; }
.wb-ladder .who b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-ladder .who small { display:block; color:var(--wb-faint); font:12px/1.3 var(--wb-mono); }
.wb-ladder .bar { height:8px; border-radius:99px; background:var(--wb-tint-2); overflow:hidden; }
.wb-ladder .bar i { display:block; width:calc(var(--w) * 1%); height:100%; background:var(--wb-navy); transform-origin:left; }
.wb-ladder > :first-child .bar i { background:var(--wb-amber); }
.wb-ladder .sc { font:600 18px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-ladder .sc small { color:var(--wb-faint); font:12px/1 var(--wb-mono); }
.wb-score-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.wb-score-grid div { padding:12px 10px; border:1px solid var(--wb-rule); border-radius:8px; text-align:center; }
.wb-score-grid b { display:block; font:600 22px/1 var(--wb-serif); }
.wb-score-grid span { display:block; margin-top:5px; color:var(--wb-faint); font-size:11px; line-height:1.3; }
.wb-score-grid .best { border-color:var(--wb-amber); background:var(--wb-amber-soft); }
.wb-score-grid .worst { border-color:var(--wb-red-soft); background:var(--wb-red-soft); }
.wb-winner { position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:18px; border:2px solid var(--wb-amber); border-radius:var(--wb-radius); background:var(--wb-amber-soft); }
.wb-winner::before { content:"Winner"; position:absolute; left:16px; top:-10px; padding:3px 8px; border-radius:4px; color:#2a1d02; background:var(--wb-amber); font:700 10.5px/1 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-winner b { display:block; font:600 20px/1.2 var(--wb-serif); }
.wb-winner span { color:var(--wb-soft); font-size:13px; }
.wb-compare2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wb-compare2 section { padding:14px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); }
.wb-compare2 section:first-child { border-top:3px solid var(--wb-navy); }
.wb-compare2 section:last-child { border-top:3px solid var(--wb-amber); }
.wb-compare2 h4 { margin:0 0 8px; font:600 16px/1.2 var(--wb-serif); }
.wb-compare2 ul { display:grid; gap:5px; padding-left:16px; color:var(--wb-soft); font-size:13px; }
.wb-tradeoff { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.wb-tradeoff section { padding:14px; border-radius:var(--wb-radius); background:var(--wb-tint); text-align:center; }
.wb-tradeoff b { display:block; font:600 18px/1.2 var(--wb-serif); }
.wb-tradeoff span { color:var(--wb-soft); font-size:12.5px; }
.wb-tradeoff i { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--wb-onnavy); background:var(--wb-navy); font:700 10px/1 var(--wb-mono); font-style:normal; }
.wb-quadrants { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.wb-quadrants div { min-height:80px; padding:12px; border-radius:6px; background:var(--wb-tint); }
.wb-quadrants div:first-child { background:var(--wb-green-soft); }
.wb-quadrants div:last-child { background:var(--wb-red-soft); }
.wb-quadrants b { display:block; font-size:12px; margin-bottom:4px; }
.wb-quadrants span { color:var(--wb-soft); font-size:12px; }
.wb-receipt { max-width:320px; margin:0 auto; padding:16px 16px 22px; border:1px solid var(--wb-rule-strong); border-radius:4px; background:var(--wb-surface); font:13px/1.5 var(--wb-mono); box-shadow:0 1px 0 var(--wb-rule); }
.wb-receipt h4 { margin:0 0 10px; padding-bottom:8px; border-bottom:1px dashed var(--wb-rule-strong); font:700 12px/1 var(--wb-mono); letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.wb-receipt div { display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.wb-receipt div span:first-child { color:var(--wb-soft); }
.wb-receipt .total { margin-top:8px; padding-top:8px; border-top:1px dashed var(--wb-rule-strong); font-weight:700; }
.wb-receipt .neg { color:var(--wb-red); }
/* WhatAreTheBest visual system  part 2: charts, systems, editorial, product modules, layouts, motion, responsive */

/* ---------- 56-75 charts ---------- */
.wb-bars { display:grid; gap:11px; }
.wb-bar-row { display:grid; grid-template-columns:minmax(80px,120px) 1fr 40px; gap:10px; align-items:center; color:var(--wb-ink); font:600 12.5px/1.3 var(--wb-sans); }
.wb-bar-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-bar-row b { color:var(--wb-soft); font:700 12px/1 var(--wb-mono); font-variant-numeric:tabular-nums; text-align:right; }
.wb-bar-track { position:relative; height:14px; border-radius:999px; background:var(--wb-tint-2); overflow:hidden; }
.wb-bar-fill { display:block; width:calc(var(--w) * 1%); height:100%; border-radius:999px; background:var(--wb-link); transform-origin:left; }
.wb-bar-row.best .wb-bar-fill { background:var(--wb-amber); }
.wb-bar-row.worst .wb-bar-fill { background:var(--wb-red); }
.wb-bar-row.navy .wb-bar-fill { background:var(--wb-navy); }
.wb-bar-track .avg { position:absolute; top:-3px; bottom:-3px; left:calc(var(--avg) * 1%); width:2px; background:var(--wb-ink); opacity:.6; }
.wb-columns { display:flex; align-items:end; gap:8px; height:126px; margin-bottom:22px; padding-top:18px; border-bottom:1px solid var(--wb-rule-strong); }
.wb-column { position:relative; flex:1; height:calc(var(--h) * 1%); border-radius:4px 4px 0 0; background:var(--wb-link); transform-origin:bottom; }
.wb-column.hi { background:var(--wb-amber); }
.wb-column::before { content:attr(data-l); position:absolute; top:calc(100% + 6px); left:50%; color:var(--wb-faint); font:700 11px/1 var(--wb-mono); transform:translateX(-50%); white-space:nowrap; }
.wb-column::after { content:attr(data-v); position:absolute; bottom:calc(100% + 5px); left:50%; color:var(--wb-soft); font:700 11px/1 var(--wb-mono); transform:translateX(-50%); }
.wb-stacked { display:flex; height:22px; border-radius:999px; overflow:hidden; }
.wb-stacked i { display:grid; place-items:center; width:calc(var(--w) * 1%); color:#fff; background:var(--wb-navy); font:700 10.5px/1 var(--wb-mono); font-style:normal; }
.wb-stacked i:nth-child(2) { background:var(--wb-link); }
.wb-stacked i:nth-child(3) { background:var(--wb-amber); color:#2a1d02; }
.wb-stacked i:nth-child(4) { background:var(--wb-rule-strong); color:var(--wb-ink); }
.wb-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; color:var(--wb-soft); font:600 11.5px/1 var(--wb-mono); }
.wb-legend i { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:2px; background:var(--wb-navy); }
.wb-legend span:nth-child(2) i { background:var(--wb-link); }
.wb-legend span:nth-child(3) i { background:var(--wb-amber); }
.wb-legend span:nth-child(4) i { background:var(--wb-rule-strong); }
.wb-diverging { display:grid; gap:8px; }
.wb-diverging div { display:grid; grid-template-columns:1fr 100px 1fr; align-items:center; gap:8px; font:600 12px/1.3 var(--wb-sans); }
.wb-diverging div span { text-align:center; color:var(--wb-soft); }
.wb-diverging .l, .wb-diverging .r { height:14px; border-radius:99px; }
.wb-diverging .l { justify-self:end; width:calc(var(--w) * 1%); background:var(--wb-red); }
.wb-diverging .r { width:calc(var(--w) * 1%); background:var(--wb-green); }
.wb-lollipop { display:grid; gap:12px; }
.wb-lollipop div { display:grid; grid-template-columns:100px 1fr; gap:10px; align-items:center; font:600 12px/1.3 var(--wb-sans); }
.wb-lollipop i { position:relative; display:block; height:2px; width:calc(var(--w) * 1%); background:var(--wb-rule-strong); }
.wb-lollipop i::after { content:attr(data-v); position:absolute; right:-12px; top:50%; display:grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:99px; color:#fff; background:var(--wb-link); font:700 10.5px/1 var(--wb-mono); font-style:normal; transform:translateY(-50%); }
.wb-sparkline { display:flex; align-items:end; gap:2px; height:36px; }
.wb-sparkline i { flex:1; height:calc(var(--h) * 1%); background:var(--wb-link); opacity:.75; border-radius:1px; }
.wb-sparkline i:last-child { background:var(--wb-amber); opacity:1; }
/* donut: --a, --b, --c percentages (cumulative handled here), data-v centre label */
.wb-donut { --a:60; --b:25; display:grid; place-items:center; width:136px; aspect-ratio:1; margin:auto; border-radius:50%; background:conic-gradient(var(--wb-navy) 0 calc(var(--a) * 1%), var(--wb-amber) calc(var(--a) * 1%) calc((var(--a) + var(--b)) * 1%), var(--wb-tint-2) calc((var(--a) + var(--b)) * 1%)); }
.wb-donut::after { content:attr(data-v); display:grid; place-content:center; width:82px; aspect-ratio:1; border-radius:50%; color:var(--wb-ink); background:var(--wb-surface); font:600 24px/1 var(--wb-serif); box-shadow:0 0 0 1px var(--wb-rule); }
.wb-half-donut { --pct:53; position:relative; width:170px; height:85px; margin:auto; overflow:hidden; }
.wb-half-donut::before { content:""; position:absolute; left:0; right:0; top:0; height:170px; border-radius:50%; background:conic-gradient(from -90deg, var(--wb-amber) 0deg calc(var(--pct) * 1.8deg), var(--wb-tint-2) calc(var(--pct) * 1.8deg) 180deg, transparent 180deg 360deg); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 53px, #000 54px); mask:radial-gradient(circle at 50% 50%, transparent 53px, #000 54px); }
.wb-half-donut::after { content:attr(data-v); position:absolute; left:0; right:0; bottom:0; text-align:center; color:var(--wb-ink); font:600 26px/1 var(--wb-serif); }
.wb-waterfall { display:flex; align-items:end; gap:6px; height:120px; padding-bottom:22px; border-bottom:1px solid var(--wb-rule-strong); }
.wb-waterfall i { position:relative; flex:1; height:calc(var(--h) * 1%); margin-bottom:calc(var(--b,0) * 1%); background:var(--wb-green); border-radius:3px 3px 0 0; }
.wb-waterfall i.neg { background:var(--wb-red); }
.wb-waterfall i.total { background:var(--wb-navy); }
.wb-waterfall i::before { content:attr(data-l); position:absolute; top:calc(100% + var(--b,0) * 1.2px + 6px); left:50%; color:var(--wb-faint); font:700 10.5px/1 var(--wb-mono); transform:translateX(-50%); white-space:nowrap; }
.wb-slope { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; }
.wb-slope svg { width:100%; height:110px; }
.wb-slope b { font:700 12px/1.3 var(--wb-mono); }
.wb-scatter { position:relative; height:140px; border-left:1px solid var(--wb-rule-strong); border-bottom:1px solid var(--wb-rule-strong); }
.wb-scatter i { position:absolute; left:calc(var(--x) * 1%); bottom:calc(var(--y) * 1%); width:10px; height:10px; border-radius:50%; background:var(--wb-link); transform:translate(-50%,50%); }
.wb-scatter i.hi { width:14px; height:14px; background:var(--wb-amber); box-shadow:0 0 0 2px var(--wb-surface),0 0 0 3px var(--wb-amber-deep); }
.wb-scatter i::after { content:attr(data-l); position:absolute; left:14px; top:-2px; color:var(--wb-soft); font:600 10.5px/1 var(--wb-mono); white-space:nowrap; }
.wb-histogram { display:flex; align-items:end; gap:2px; height:90px; border-bottom:1px solid var(--wb-rule-strong); }
.wb-histogram i { flex:1; height:calc(var(--h) * 1%); background:var(--wb-link-soft); border-top:2px solid var(--wb-link); }
.wb-histogram i.me { background:var(--wb-amber-soft); border-top-color:var(--wb-amber-deep); }
.wb-chart-timeline { position:relative; display:flex; justify-content:space-between; padding-top:26px; }
.wb-chart-timeline::before { content:""; position:absolute; left:5%; right:5%; top:32px; height:2px; background:var(--wb-rule-strong); }
.wb-chart-timeline span { position:relative; width:14px; height:14px; border:3px solid var(--wb-surface); border-radius:50%; background:var(--wb-link); box-shadow:0 0 0 1px var(--wb-link); }
.wb-chart-timeline span.now { background:var(--wb-amber); box-shadow:0 0 0 1px var(--wb-amber-deep), 0 0 0 5px var(--wb-amber-soft); }
.wb-chart-timeline b { position:absolute; bottom:calc(100% + 8px); left:50%; padding:3px 7px; border:1px solid var(--wb-rule); border-radius:5px; color:var(--wb-soft); background:var(--wb-tint); font:700 11px/1 var(--wb-mono); transform:translateX(-50%); white-space:nowrap; }
.wb-chart-timeline i { position:absolute; top:calc(100% + 6px); left:50%; color:var(--wb-faint); font:600 10.5px/1.2 var(--wb-sans); font-style:normal; transform:translateX(-50%); white-space:nowrap; }
.wb-bump { width:100%; height:130px; }
.wb-thermo { --pct:66; position:relative; width:26px; height:140px; margin:0 auto; border:2px solid var(--wb-rule-strong); border-radius:99px; background:var(--wb-tint); overflow:hidden; }
.wb-thermo::after { content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--pct) * 1%); background:var(--wb-red); }
.wb-thermo-wrap { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.wb-thermo-wrap b { display:block; font:600 28px/1 var(--wb-serif); }
.wb-thermo-wrap span { color:var(--wb-soft); font-size:13px; }
.wb-target { position:relative; width:130px; aspect-ratio:1; margin:auto; border-radius:50%; background:repeating-radial-gradient(circle, var(--wb-tint-2) 0 12px, var(--wb-surface) 12px 24px); }
.wb-target i { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); width:12px; height:12px; border-radius:50%; background:var(--wb-amber); border:2px solid var(--wb-surface); transform:translate(-50%,-50%); }
.wb-target::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%; background:var(--wb-navy); transform:translate(-50%,-50%); }
.wb-dist { position:relative; height:26px; border-radius:99px; background:linear-gradient(90deg,var(--wb-tint-2) 0,var(--wb-link-soft) 40%,var(--wb-link) 60%,var(--wb-link-soft) 80%,var(--wb-tint-2)); }
.wb-dist i { position:absolute; left:calc(var(--x) * 1%); top:-6px; bottom:-6px; width:3px; background:var(--wb-amber-deep); }
.wb-dist i::after { content:attr(data-l); position:absolute; top:100%; left:50%; margin-top:4px; color:var(--wb-amber-deep); font:700 10.5px/1 var(--wb-mono); transform:translateX(-50%); white-space:nowrap; }
.wb-mini-dash { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.wb-mini-dash div { padding:12px; border:1px solid var(--wb-rule); border-radius:8px; }
.wb-mini-dash span { display:block; color:var(--wb-faint); font:600 10.5px/1.3 var(--wb-mono); text-transform:uppercase; letter-spacing:.06em; }
.wb-mini-dash b { display:block; margin-top:6px; font:600 22px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-mini-dash em { display:block; margin-top:4px; color:var(--wb-green); font:700 11px/1 var(--wb-mono); font-style:normal; }
.wb-mini-dash em.dn { color:var(--wb-red); }
/* radar (svg drawn by JS or CF) */
.wb-radar { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.wb-radar svg { width:200px; height:200px; }
.wb-radar .grid { fill:none; stroke:var(--wb-rule-strong); stroke-width:1; }
.wb-radar .axis { stroke:var(--wb-rule); stroke-width:1; }
.wb-radar .area { fill:var(--wb-link); fill-opacity:.18; stroke:var(--wb-link); stroke-width:2; }
.wb-radar .area.avg { fill:none; stroke:var(--wb-rule-strong); stroke-dasharray:3 3; }
.wb-radar .lbl { fill:var(--wb-soft); font:600 10px var(--wb-sans); }
.wb-radar ul { display:grid; gap:4px; list-style:none; font-size:12.5px; }
.wb-radar li { display:flex; justify-content:space-between; gap:10px; color:var(--wb-soft); border-bottom:1px dotted var(--wb-rule-strong); padding-bottom:3px; }
.wb-radar li b { font:700 12px/1.5 var(--wb-mono); color:var(--wb-ink); }
.wb-unit-grid { display:grid; grid-template-columns:repeat(20,minmax(0,1fr)); gap:3px; }
.wb-unit-grid i { aspect-ratio:1; border-radius:2px; background:var(--wb-tint-2); }
.wb-unit-grid i.on { background:var(--wb-link); }
.wb-dumbbell { display:grid; gap:14px; }
.wb-dumbbell div { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; font:600 12px/1.3 var(--wb-sans); }
.wb-dumbbell .rail { position:relative; height:4px; background:var(--wb-tint-2); border-radius:99px; }
.wb-dumbbell .rail::before { content:""; position:absolute; top:0; bottom:0; left:calc(var(--a) * 1%); width:calc((var(--b) - var(--a)) * 1%); background:var(--wb-link); }
.wb-dumbbell .rail i { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); }
.wb-dumbbell .rail i:first-child { left:calc(var(--a) * 1%); background:var(--wb-rule-strong); }
.wb-dumbbell .rail i:last-child { left:calc(var(--b) * 1%); background:var(--wb-navy); }
.wb-dumbbell .rail i::after { content:attr(data-v); position:absolute; top:calc(100% + 4px); left:50%; color:var(--wb-soft); font:700 10.5px/1 var(--wb-mono); transform:translateX(-50%); }
.wb-bullet { display:grid; gap:6px; }
.wb-bullet .track { position:relative; height:22px; background:linear-gradient(90deg,var(--wb-red-soft) 0 40%,var(--wb-amber-soft) 40% 70%,var(--wb-green-soft) 70%); border-radius:4px; }
.wb-bullet .track i { position:absolute; left:0; top:7px; height:8px; width:calc(var(--w) * 1%); background:var(--wb-navy); }
.wb-bullet .track b { position:absolute; top:-3px; bottom:-3px; left:calc(var(--t) * 1%); width:3px; background:var(--wb-red); }
.wb-bullet span { display:flex; justify-content:space-between; color:var(--wb-faint); font:700 10.5px/1 var(--wb-mono); }

/* ---------- 76-88 systems ---------- */
.wb-timeline { position:relative; display:grid; gap:14px; padding-left:26px; }
.wb-timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--wb-rule-strong); }
.wb-timeline > div { position:relative; }
.wb-timeline > div::before { content:""; position:absolute; left:-24px; top:5px; width:12px; height:12px; border:3px solid var(--wb-surface); border-radius:50%; background:var(--wb-link); box-shadow:0 0 0 1px var(--wb-link); }
.wb-timeline > div:last-child::before { background:var(--wb-amber); box-shadow:0 0 0 1px var(--wb-amber-deep); }
.wb-timeline b { display:block; color:var(--wb-ink); font-size:14.5px; }
.wb-timeline span { display:block; margin-top:2px; color:var(--wb-soft); font-size:13px; }
.wb-timeline em { display:inline-block; margin-bottom:3px; padding:2px 7px; border:1px solid var(--wb-rule); border-radius:5px; color:var(--wb-faint); background:var(--wb-tint); font:700 10.5px/1.4 var(--wb-mono); font-style:normal; }
.wb-steps { counter-reset:step; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.wb-steps > div { counter-increment:step; position:relative; padding:14px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-tint); }
.wb-steps > div::before { content:counter(step, decimal-leading-zero); display:block; margin-bottom:8px; color:var(--wb-amber-deep); font:600 26px/1 var(--wb-serif); }
.wb-steps b { display:block; margin-bottom:4px; font-size:14px; }
.wb-steps span, .wb-steps p { color:var(--wb-soft) !important; font-size:13px; margin:0 !important; }
.wb-band-navy .wb-steps > div { background:transparent; border-color:rgba(255,255,255,.14); }
.wb-band-navy .wb-steps > div::before { color:var(--wb-amber); }
.wb-band-navy .wb-steps b { color:var(--wb-onnavy); }
.wb-band-navy .wb-steps span, .wb-band-navy .wb-steps p { color:var(--wb-onnavy-soft) !important; }
.wb-flow { display:flex; gap:8px; align-items:center; }
.wb-flow span { flex:1; padding:11px; border:1px solid var(--wb-rule); border-radius:8px; color:var(--wb-ink); background:var(--wb-tint); font:600 11px/1.3 var(--wb-sans); text-align:center; }
.wb-flow span:first-child { color:var(--wb-onnavy); border-color:var(--wb-navy); background:var(--wb-navy); }
.wb-flow span:last-child { color:var(--wb-green); border-color:var(--wb-green); background:var(--wb-green-soft); }
.wb-flow i { color:var(--wb-amber-deep); font-style:normal; font-weight:800; }
.wb-tree { display:grid; gap:6px; font-size:13px; }
.wb-tree .q { padding:10px 12px; border-radius:8px; color:var(--wb-onnavy); background:var(--wb-navy); font-weight:600; }
.wb-tree .br { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.wb-tree .br div { padding:9px 10px; border:1px solid var(--wb-rule); border-radius:8px; background:var(--wb-tint); color:var(--wb-soft); }
.wb-tree .br div b { display:block; color:var(--wb-ink); font:700 10.5px/1.4 var(--wb-mono); text-transform:uppercase; letter-spacing:.08em; }
.wb-funnel { display:grid; gap:4px; justify-items:center; }
.wb-funnel div { display:grid; place-items:center; width:calc(var(--w) * 1%); min-width:120px; padding:8px; color:var(--wb-onnavy); background:var(--wb-navy); font:600 12px/1.2 var(--wb-sans); clip-path:polygon(0 0,100% 0,96% 100%,4% 100%); }
.wb-funnel div:nth-child(2) { background:var(--wb-navy-2); }
.wb-funnel div:nth-child(3) { background:var(--wb-link); }
.wb-funnel div:last-child { color:#2a1d02; background:var(--wb-amber); }
.wb-effort { display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:center; font-size:13px; }
.wb-effort i { display:block; height:12px; border-radius:99px; background:var(--wb-tint-2); position:relative; }
.wb-effort i::after { content:""; position:absolute; inset:0; width:calc(var(--w) * 1%); border-radius:99px; background:var(--wb-link); }
.wb-milestones { display:flex; gap:0; }
.wb-milestones div { flex:1; padding:10px 8px 0; border-top:3px solid var(--wb-rule-strong); }
.wb-milestones div.done { border-top-color:var(--wb-green); }
.wb-milestones div.cur { border-top-color:var(--wb-amber); }
.wb-milestones b { display:block; font:700 11px/1.3 var(--wb-mono); color:var(--wb-faint); }
.wb-milestones span { display:block; font-size:12.5px; }
.wb-checklist { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.wb-checklist li { position:relative; padding-left:27px; color:var(--wb-soft); font-size:13.5px; }
.wb-checklist li::before { content:"\2713"; position:absolute; left:0; top:1px; display:grid; place-items:center; width:18px; height:18px; border-radius:5px; color:#fff; background:var(--wb-green); font:700 11px/1 var(--wb-sans); }
.wb-checklist li.no::before { content:"\2715"; background:var(--wb-red); }
.wb-checklist li.maybe::before { content:"?"; background:var(--wb-amber-deep); }
.wb-anatomy { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.wb-anatomy div { padding:10px; border:1px solid var(--wb-rule); border-radius:8px; background:var(--wb-tint); font-size:12px; }
.wb-anatomy div.core { grid-column:1 / -1; border-color:var(--wb-navy); background:var(--wb-link-soft); text-align:center; }
.wb-anatomy b { display:block; font:700 10.5px/1.5 var(--wb-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--wb-link); }
.wb-cause { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
.wb-cause div { padding:12px; border-radius:8px; background:var(--wb-tint); font-size:13px; }
.wb-cause div:last-child { background:var(--wb-amber-soft); }
.wb-cause i { color:var(--wb-amber-deep); font-style:normal; font-weight:800; font-size:20px; }
.wb-cycle { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.wb-cycle div { padding:10px; border:1px solid var(--wb-rule); border-radius:8px; text-align:center; font:600 12px/1.3 var(--wb-sans); }
.wb-cycle div::before { content:"\21BB"; display:block; color:var(--wb-amber-deep); font-size:16px; }

/* ---------- 89-100 editorial ---------- */
.wb-callout { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:14px 16px; border:1px solid var(--wb-rule); border-left:4px solid var(--wb-link); border-radius:var(--wb-radius-sm); background:var(--wb-tint); color:var(--wb-soft); font-size:14px; }
.wb-callout b { color:var(--wb-ink); }
.wb-callout i { color:var(--wb-link); font-style:normal; font-weight:800; }
.wb-callout.warn { border-left-color:var(--wb-amber-deep); background:var(--wb-amber-soft); }
.wb-callout.warn i { color:var(--wb-amber-deep); }
.wb-callout.ok { border-left-color:var(--wb-green); background:var(--wb-green-soft); }
.wb-callout.ok i { color:var(--wb-green); }
.wb-callout.danger { border-left-color:var(--wb-red); background:var(--wb-red-soft); }
.wb-callout.danger i { color:var(--wb-red); }
.wb-mythfact { display:grid; gap:8px; }
.wb-mythfact p { margin:0 !important; padding:10px 12px; border-radius:8px; font-size:14px; }
.wb-mythfact .myth { color:var(--wb-soft) !important; background:var(--wb-red-soft); text-decoration:line-through 1.5px rgba(179,38,30,.55); }
.wb-mythfact .myth::before { content:"MYTH"; margin-right:9px; color:var(--wb-red); font:700 10.5px/1 var(--wb-mono); letter-spacing:.1em; text-decoration:none; display:inline-block; }
.wb-mythfact .fact { color:var(--wb-ink) !important; background:var(--wb-green-soft); }
.wb-mythfact .fact::before { content:"FACT"; margin-right:9px; color:var(--wb-green); font:700 10.5px/1 var(--wb-mono); letter-spacing:.1em; }
.wb-exhibit { padding:14px; border:1px solid var(--wb-rule-strong); border-radius:4px; background:var(--wb-surface); box-shadow:2px 2px 0 var(--wb-rule); }
.wb-exhibit .tag { display:inline-block; margin-bottom:8px; padding:3px 8px; color:#fff; background:var(--wb-red); font:700 10.5px/1 var(--wb-mono); letter-spacing:.14em; text-transform:uppercase; }
.wb-exhibit p { margin:0 !important; font:15px/1.5 var(--wb-serif); }
.wb-source-card { display:grid; gap:4px; padding:12px 14px; border:1px solid var(--wb-rule); border-radius:8px; background:var(--wb-tint); }
.wb-source-card b { font-size:14px; }
.wb-source-card span { color:var(--wb-soft); font-size:12.5px; }
.wb-source-card a { color:var(--wb-link); font:700 11px/1.4 var(--wb-mono); word-break:break-all; }
.wb-cite { display:inline-flex; align-items:center; gap:5px; margin-left:6px; border:1px solid var(--wb-rule); border-radius:5px; padding:4px 7px; color:var(--wb-link); background:var(--wb-tint); font:700 10px/1 var(--wb-sans); cursor:pointer; vertical-align:middle; text-decoration:none; }
.wb-cite::before { content:"\2197"; opacity:.75; }
.wb-cite:hover { color:var(--wb-onnavy); border-color:var(--wb-navy); background:var(--wb-navy); text-decoration:none; }
.wb-faq { display:grid; gap:6px; }
.wb-faq details { border:1px solid var(--wb-rule); border-radius:8px; background:var(--wb-surface); }
.wb-faq summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; color:var(--wb-ink); font:600 14.5px/1.3 var(--wb-sans); cursor:pointer; list-style:none; }
.wb-faq summary::-webkit-details-marker { display:none; }
.wb-faq summary::after { content:"+"; flex:0 0 auto; color:var(--wb-link); font:700 18px/1 var(--wb-mono); }
.wb-faq details[open] summary::after { content:"\2212"; }
.wb-faq details > div, .wb-faq details > p { padding:0 14px 14px; color:var(--wb-soft) !important; font-size:14px; margin:0 !important; }
.wb-figure { display:grid; gap:8px; }
.wb-figure img { border:1px solid var(--wb-rule); border-radius:8px; }
.wb-glossary { display:grid; gap:8px; margin:0; }
.wb-glossary div { display:grid; grid-template-columns:120px 1fr; gap:10px; padding-bottom:8px; border-bottom:1px dotted var(--wb-rule-strong); font-size:13px; }
.wb-glossary dt { color:var(--wb-navy); font:600 14px/1.3 var(--wb-serif); }
.wb-glossary dd { margin:0; color:var(--wb-soft); }
.wb-takeaways { display:grid; gap:8px; padding:16px 18px; border-radius:var(--wb-radius); background:var(--wb-link-soft); }
.wb-takeaways b { color:var(--wb-link); font:700 11px/1 var(--wb-mono); letter-spacing:.14em; text-transform:uppercase; }
.wb-takeaways ol { display:grid; gap:6px; padding-left:20px; font-size:14px; color:var(--wb-ink); }
.wb-verdict { position:relative; padding:24px 22px 18px; border:2px solid var(--wb-ink); border-radius:2px; color:var(--wb-ink); background:var(--wb-amber-soft); text-align:center; }
.wb-verdict::before { content:"Verdict"; position:absolute; left:50%; top:-10px; padding:4px 9px; color:var(--wb-surface); background:var(--wb-ink); font:700 11px/1 var(--wb-mono); letter-spacing:.14em; text-transform:uppercase; transform:translateX(-50%); }
.wb-verdict b { display:block; font:600 24px/1.18 var(--wb-serif); }
.wb-verdict span { display:block; margin-top:6px; color:var(--wb-soft); font-size:13px; }
.wb-stamp { display:inline-block; padding:6px 12px; border:3px solid var(--wb-red); border-radius:6px; color:var(--wb-red); font:800 14px/1 var(--wb-mono); letter-spacing:.16em; text-transform:uppercase; transform:rotate(-6deg); opacity:.9; }
.wb-stamp.ok { border-color:var(--wb-green); color:var(--wb-green); }
.wb-sticky { display:inline-block; max-width:220px; padding:14px; background:#fff4b8; color:#3d3000; font:15px/1.4 var(--wb-hand); transform:rotate(-2deg); box-shadow:0 4px 8px rgba(0,0,0,.08); }
.wb[data-theme="dark"] .wb-sticky { background:#5a4a12; color:#fff1c2; }
.wb-index-card { padding:14px 16px; border:1px solid var(--wb-rule-strong); border-radius:3px; background:repeating-linear-gradient(0deg,transparent 0 23px,var(--wb-rule) 23px 24px); font:15px/24px var(--wb-serif); }
.wb-index-card b { display:block; color:var(--wb-red); font:700 11px/24px var(--wb-mono); letter-spacing:.14em; text-transform:uppercase; }
.wb-grade { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
.wb-grade .mark { display:grid; place-items:center; width:86px; aspect-ratio:1; border:2.5px solid var(--wb-green); border-radius:14px; color:var(--wb-green); background:var(--wb-green-soft); font:700 40px/1 var(--wb-serif); }
.wb-grade .mark.b { border-color:var(--wb-link); color:var(--wb-link); background:var(--wb-link-soft); }
.wb-grade .mark.c { border-color:var(--wb-amber-deep); color:var(--wb-amber-deep); background:var(--wb-amber-soft); }
.wb-grade .mark.d { border-color:var(--wb-red); color:var(--wb-red); background:var(--wb-red-soft); }
.wb-grade ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.wb-grade li { display:flex; justify-content:space-between; gap:10px; color:var(--wb-soft); font-size:12.5px; border-bottom:1px dotted var(--wb-rule-strong); padding-bottom:5px; }
.wb-grade li b { font:700 12px/1.5 var(--wb-mono); color:var(--wb-link); }
.wb-award { display:inline-grid; place-items:center; width:92px; aspect-ratio:1; border-radius:50%; color:#2a1d02; background:var(--wb-amber); font:700 10.5px/1.2 var(--wb-mono); letter-spacing:.08em; text-transform:uppercase; text-align:center; box-shadow:0 0 0 4px var(--wb-surface),0 0 0 6px var(--wb-amber); }
.wb-award b { display:block; font:600 22px/1 var(--wb-serif); letter-spacing:0; text-transform:none; }
.wb-confidence { display:grid; gap:6px; }
.wb-confidence .segs { display:flex; gap:4px; }
.wb-confidence .segs i { flex:1; height:10px; border-radius:3px; background:var(--wb-tint-2); }
.wb-confidence .segs i.on { background:var(--wb-green); }
.wb-confidence span { display:flex; justify-content:space-between; color:var(--wb-faint); font:700 10.5px/1 var(--wb-mono); }
.wb-live { display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:99px; color:var(--wb-red); background:var(--wb-red-soft); font:700 10.5px/1 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; }
.wb-live i { width:7px; height:7px; border-radius:50%; background:var(--wb-red); animation:wbPulse 1.6s infinite; }
.wb-flip { perspective:900px; height:130px; }
.wb-flip .inner { position:relative; height:100%; transition:transform .5s; transform-style:preserve-3d; }
.wb-flip:hover .inner, .wb-flip:focus-within .inner { transform:rotateY(180deg); }
.wb-flip .front, .wb-flip .back { position:absolute; inset:0; display:grid; place-items:center; padding:14px; border-radius:var(--wb-radius); backface-visibility:hidden; text-align:center; }
.wb-flip .front { color:var(--wb-onnavy); background:var(--wb-navy); font:600 18px/1.3 var(--wb-serif); }
.wb-flip .back { color:var(--wb-ink); background:var(--wb-amber-soft); transform:rotateY(180deg); font-size:14px; }
.wb-segmented { display:inline-flex; padding:3px; border:1px solid var(--wb-rule); border-radius:999px; background:var(--wb-tint); }
.wb-segmented button { padding:6px 12px; border:0; border-radius:999px; color:var(--wb-soft); background:transparent; font:600 12px/1 var(--wb-sans); cursor:pointer; }
.wb-segmented button.is-on { color:var(--wb-onnavy); background:var(--wb-navy); }
.wb-poll { display:grid; gap:8px; }
.wb-poll div { position:relative; padding:9px 12px; border-radius:6px; background:var(--wb-tint); font:600 13px/1.3 var(--wb-sans); overflow:hidden; }
.wb-poll div::before { content:""; position:absolute; inset:0; width:calc(var(--w) * 1%); background:var(--wb-link-soft); }
.wb-poll span { position:relative; }
.wb-poll b { position:absolute; right:12px; top:50%; color:var(--wb-link); font:700 12px/1 var(--wb-mono); transform:translateY(-50%); }
.wb-poll div.mine::before { background:var(--wb-amber-soft); }
.wb-toast { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; color:var(--wb-onnavy); background:var(--wb-navy); font:600 13px/1.3 var(--wb-sans); }
.wb-toast i { color:var(--wb-amber); font-style:normal; }

/* ---------- product modules (P01-P32): data-driven blocks for ranking pages ---------- */
.wb-mod { position:relative; min-width:0; padding:16px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-surface); }
.wb-mod-title { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--wb-link); font:700 11px/1.2 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-mod-title::after { content:""; flex:1; height:1px; background:var(--wb-rule); }
.wb-mod-foot { margin:12px 0 0 !important; color:var(--wb-faint) !important; font:11.5px/1.5 var(--wb-mono); }
.wb-mod-foot a { color:var(--wb-link); word-break:break-all; }
.wb-mod-tint { background:var(--wb-tint); }
.wb-mod-navy { color:var(--wb-onnavy); background:var(--wb-navy); border-color:var(--wb-navy); }
.wb-mod-navy .wb-mod-title { color:var(--wb-amber); }
.wb-mod-navy .wb-mod-title::after { background:rgba(255,255,255,.2); }
.wb-mod-navy .wb-mod-foot { color:var(--wb-onnavy-soft) !important; }
/* P01 criteria bars with category average tick: rows use --w and --avg */
.wb-criteria { display:grid; gap:9px; }
.wb-criteria .wb-bar-row { grid-template-columns:minmax(110px,150px) 1fr 34px; }
/* P02 strength gap */
.wb-gap { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
.wb-gap div { padding:12px; border-radius:8px; text-align:center; }
.wb-gap div:first-child { background:var(--wb-green-soft); }
.wb-gap div:last-child { background:var(--wb-red-soft); }
.wb-gap b { display:block; font:600 30px/1 var(--wb-serif); }
.wb-gap div:first-child b { color:var(--wb-green); }
.wb-gap div:last-child b { color:var(--wb-red); }
.wb-gap span { display:block; margin-top:4px; color:var(--wb-soft); font-size:12px; line-height:1.3; }
.wb-gap i { color:var(--wb-faint); font:700 11px/1 var(--wb-mono); font-style:normal; letter-spacing:.1em; }
/* P03 price tag */
.wb-price-tag { display:inline-grid; grid-template-columns:auto 1fr; gap:0 14px; align-items:center; padding:12px 16px 12px 14px; border:2px solid var(--wb-ink); border-radius:4px 18px 18px 4px; background:var(--wb-surface); }
.wb-price-tag::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--wb-surface); box-shadow:inset 0 0 0 2px var(--wb-ink); grid-row:1 / 3; }
.wb-price-tag b { font:600 30px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-price-tag b small { color:var(--wb-faint); font:700 11px/1 var(--wb-mono); }
.wb-price-tag span { color:var(--wb-soft); font-size:12px; }
.wb-price-tag.quote b { font-size:20px; }
/* P04 free vs paid */
.wb-freepaid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wb-freepaid section { padding:12px; border-radius:8px; border:1px solid var(--wb-rule); }
.wb-freepaid section:first-child { background:var(--wb-green-soft); border-color:transparent; }
.wb-freepaid h4 { margin:0 0 6px; font:700 11px/1 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-freepaid b { display:block; margin-bottom:6px; font:600 20px/1 var(--wb-serif); }
.wb-freepaid ul { display:grid; gap:4px; list-style:none; color:var(--wb-soft); font-size:12.5px; }
.wb-freepaid li::before { content:"\2022 "; color:var(--wb-link); }
/* P05 penalty flags */
.wb-penalties { display:grid; gap:8px; }
.wb-penalties div { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:10px 12px; border-radius:8px; background:var(--wb-red-soft); font-size:13px; color:var(--wb-ink); }
.wb-penalties .sev { display:grid; place-items:center; min-width:38px; padding:4px 6px; border-radius:6px; color:#fff; background:var(--wb-red); font:700 11px/1 var(--wb-mono); }
.wb-penalties .sev.mid { background:var(--wb-amber-deep); }
.wb-penalties .sev.low { background:var(--wb-faint); }
.wb-penalties small { display:block; margin-top:3px; color:var(--wb-faint); font:11px/1.4 var(--wb-mono); }
.wb-penalties small a { color:var(--wb-link); }
/* P06 who split */
.wb-who { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wb-who section { padding:12px; border-radius:8px; border-top:3px solid var(--wb-green); background:var(--wb-green-soft); }
.wb-who section:last-child { border-top-color:var(--wb-red); background:var(--wb-red-soft); }
.wb-who h4 { margin:0 0 8px; font:700 11px/1 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wb-green); }
.wb-who section:last-child h4 { color:var(--wb-red); }
.wb-who ul { display:grid; gap:5px; list-style:none; color:var(--wb-soft); font-size:13px; }
.wb-who li { padding-left:14px; position:relative; }
.wb-who li::before { content:"\2713"; position:absolute; left:0; color:var(--wb-green); font-weight:800; }
.wb-who section:last-child li::before { content:"\2715"; color:var(--wb-red); }
/* P07 fit meter (solo -> enterprise) */
.wb-fit { display:grid; gap:8px; }
.wb-fit .scale { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.wb-fit .scale i { height:12px; border-radius:3px; background:var(--wb-tint-2); }
.wb-fit .scale i.on { background:var(--wb-link); }
.wb-fit .scale i.best { background:var(--wb-amber); }
.wb-fit .lbls { display:grid; grid-template-columns:repeat(4,1fr); color:var(--wb-faint); font:700 10px/1.2 var(--wb-mono); text-align:center; }
/* P08 chip cloud */
.wb-chips { display:flex; flex-wrap:wrap; gap:6px; }
.wb-chips span { padding:5px 9px; border:1px solid var(--wb-rule); border-radius:6px; color:var(--wb-ink); background:var(--wb-tint); font:600 12px/1 var(--wb-sans); }
.wb-chips span.hi { border-color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-chips span.more { color:var(--wb-faint); background:transparent; border-style:dashed; }
/* P09 badges (compliance / platform) */
.wb-badges { display:flex; flex-wrap:wrap; gap:8px; }
.wb-badges span { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:6px; color:var(--wb-green); background:var(--wb-green-soft); font:700 11.5px/1 var(--wb-mono); letter-spacing:.04em; }
.wb-badges span.off { color:var(--wb-faint); background:var(--wb-tint); text-decoration:line-through; }
.wb-badges span.unk { color:var(--wb-faint); background:var(--wb-tint); }
/* P10 review pulse: external ratings */
.wb-pulse { display:grid; gap:8px; }
.wb-pulse div { display:grid; grid-template-columns:100px 1fr auto; gap:10px; align-items:center; font:600 12.5px/1.3 var(--wb-sans); }
.wb-pulse .bar { height:10px; border-radius:99px; background:var(--wb-tint-2); overflow:hidden; }
.wb-pulse .bar i { display:block; width:calc(var(--w) * 1%); height:100%; background:var(--wb-amber); }
.wb-pulse b { font:700 12.5px/1 var(--wb-mono); font-variant-numeric:tabular-nums; }
.wb-pulse small { color:var(--wb-faint); font:11px/1 var(--wb-mono); }
/* P11 adoption / big number handled by .wb-big-number; P12 rank position */
.wb-rankpos { display:flex; align-items:center; gap:14px; }
.wb-rankpos b { font:600 56px/1 var(--wb-serif); color:var(--wb-navy); }
.wb-rankpos b small { color:var(--wb-faint); font:700 12px/1 var(--wb-mono); }
.wb-rankpos .dots { display:flex; gap:4px; flex-wrap:wrap; }
.wb-rankpos .dots i { width:12px; height:12px; border-radius:3px; background:var(--wb-tint-2); }
.wb-rankpos .dots i.me { background:var(--wb-amber); }
.wb-rankpos .dots i.above { background:var(--wb-navy); }
.wb-rankpos span { color:var(--wb-soft); font-size:12.5px; }
/* P13 support channels */
.wb-channels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.wb-channels div { padding:10px 6px; border-radius:8px; text-align:center; font:600 11px/1.3 var(--wb-sans); color:var(--wb-ink); background:var(--wb-green-soft); }
.wb-channels div.off { color:var(--wb-faint); background:var(--wb-tint); }
.wb-channels div.limited { background:var(--wb-amber-soft); }
.wb-channels i { display:block; margin-bottom:4px; font-style:normal; font-size:18px; }
/* P14 cost at scale */
.wb-cost-scale { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:end; }
.wb-cost-scale div { display:grid; gap:6px; text-align:center; }
.wb-cost-scale i { display:block; height:calc(var(--h) * 1px); min-height:8px; border-radius:4px 4px 0 0; background:var(--wb-navy); }
.wb-cost-scale div:last-child i { background:var(--wb-amber); }
.wb-cost-scale b { font:600 18px/1 var(--wb-serif); }
.wb-cost-scale span { color:var(--wb-faint); font:700 10.5px/1.2 var(--wb-mono); }
/* P15 learning curve */
.wb-curve { display:grid; gap:6px; }
.wb-curve .track { position:relative; height:10px; border-radius:99px; background:linear-gradient(90deg,var(--wb-green-soft),var(--wb-amber-soft),var(--wb-red-soft)); }
.wb-curve .track i { position:absolute; left:calc(var(--pos) * 1%); top:50%; width:18px; height:18px; border:3px solid var(--wb-surface); border-radius:50%; background:var(--wb-navy); transform:translate(-50%,-50%); box-shadow:0 0 0 1px var(--wb-navy); }
.wb-curve span { display:flex; justify-content:space-between; color:var(--wb-faint); font:700 10.5px/1 var(--wb-mono); }
/* P16 quote evidence */
.wb-evidence { padding:14px 16px; border-left:3px solid var(--wb-amber); background:var(--wb-tint); }
.wb-evidence p { margin:0 !important; font:italic 16px/1.5 var(--wb-serif); }
.wb-evidence cite { display:block; margin-top:8px; color:var(--wb-faint); font:11px/1.4 var(--wb-mono); font-style:normal; word-break:break-all; }
/* P17 heat strip */
.wb-heatstrip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.wb-heatstrip div { padding:8px 4px; border-radius:6px; text-align:center; }
.wb-heatstrip b { display:block; font:700 15px/1 var(--wb-mono); }
.wb-heatstrip span { display:block; margin-top:4px; color:var(--wb-soft); font-size:9.5px; line-height:1.2; }
.wb-heatstrip .h1 { background:var(--wb-red-soft); color:var(--wb-red); }
.wb-heatstrip .h2 { background:var(--wb-amber-soft); color:var(--wb-amber-deep); }
.wb-heatstrip .h3 { background:var(--wb-green-soft); color:var(--wb-green); }
.wb-heatstrip .h4 { background:var(--wb-green); color:#fff; }
.wb-heatstrip .h4 span { color:#ffffff; }
/* P18 hands-on note (human EEAT) */
.wb-handson { display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px; border:1px solid var(--wb-amber); border-radius:var(--wb-radius); background:var(--wb-amber-soft); }
.wb-handson .who { display:grid; justify-items:center; gap:6px; }
.wb-handson .who img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.wb-handson .who b { color:var(--wb-amber-deep); font:700 10px/1.2 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.wb-handson p { margin:0 !important; font:15px/1.5 var(--wb-serif); }
.wb-handson cite { display:block; margin-top:6px; color:var(--wb-soft); font:600 11.5px/1.3 var(--wb-sans); font-style:normal; }

/* ---------- layouts shared by editorial + ranking pages ---------- */
.wb-cols-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.wb-cols-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.wb-cols-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.wb-split { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:start; }
.wb-split-rail { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start; }
.wb-rail { position:sticky; top:calc(var(--wb-header) + 16px); display:grid; gap:14px; }
.wb-card { min-width:0; padding:18px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-surface); }
.wb-card-link { display:block; color:inherit; }
.wb-card-link:hover { color:inherit; text-decoration:none; border-color:var(--wb-navy); }
.wb-card h3 { margin:0 0 6px; font:600 17px/1.25 var(--wb-serif); }
.wb-card p { color:var(--wb-soft) !important; font-size:13.5px; margin:0 !important; }
.wb-meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--wb-faint); font:12px/1.5 var(--wb-mono); }
.wb-meta b { color:var(--wb-ink); }
/* category tile grid (icon + name + count) */
.wb-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.wb-tile { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:14px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); color:var(--wb-ink); background:var(--wb-surface); text-decoration:none; }
.wb-tile:hover { color:var(--wb-ink); text-decoration:none; border-color:var(--wb-navy); background:var(--wb-tint); }
.wb-tile .ic { display:grid; place-items:center; width:40px; height:40px; border-radius:8px; color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-tile .ic svg { width:20px; height:20px; }
.wb-tile b { display:block; font:600 14px/1.25 var(--wb-sans); }
.wb-tile small { display:block; margin-top:3px; color:var(--wb-faint); font:11.5px/1.3 var(--wb-mono); }
.wb-tile.navy { color:var(--wb-onnavy); background:var(--wb-navy); border-color:var(--wb-navy); }
.wb-tile.navy .ic { color:var(--wb-amber); background:rgba(255,255,255,.08); }
.wb-tile.navy small { color:var(--wb-onnavy-soft); }
/* product row (ladder used on hubs) */
.wb-prow { display:grid; grid-template-columns:28px 44px minmax(0,1fr) 72px; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--wb-rule); color:var(--wb-ink); text-decoration:none; }
.wb-prow:hover { color:var(--wb-ink); text-decoration:none; background:var(--wb-tint); }
.wb-prow .rk { color:var(--wb-amber-deep); font:600 20px/1 var(--wb-serif); text-align:center; }
.wb-prow .nm { min-width:0; }
.wb-prow .nm b { display:block; font-weight:600; font-size:14.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-prow .nm small { display:block; color:var(--wb-faint); font:11.5px/1.3 var(--wb-mono); }
.wb-prow .sc { text-align:right; font:600 20px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-prow .sc small { color:var(--wb-faint); font:11px/1 var(--wb-mono); }
.wb-prow .bar { grid-column:3 / 5; height:5px; margin-top:-4px; border-radius:99px; background:var(--wb-tint-2); overflow:hidden; }
.wb-prow .bar i { display:block; width:calc(var(--w) * 1%); height:100%; background:var(--wb-navy); transform-origin:left; }
.wb-prow:first-child .bar i, .wb-prow.top .bar i { background:var(--wb-amber); }
/* accordion tree */
.wb-tree-list { display:grid; gap:10px; }
.wb-acc { border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-surface); overflow:hidden; }
.wb-acc > summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; cursor:pointer; list-style:none; color:var(--wb-ink); }
.wb-acc > summary::-webkit-details-marker { display:none; }
.wb-acc > summary:hover { background:var(--wb-tint); }
.wb-acc > summary .ic { display:grid; place-items:center; width:40px; height:40px; border-radius:8px; color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-acc > summary .ic svg { width:20px; height:20px; }
.wb-acc > summary b { display:block; font:600 17px/1.25 var(--wb-serif); }
.wb-acc > summary small { display:block; margin-top:3px; color:var(--wb-faint); font:11.5px/1.3 var(--wb-mono); }
.wb-acc > summary .open { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--wb-rule-strong); border-radius:50%; color:var(--wb-link); font:700 16px/1 var(--wb-mono); }
.wb-acc[open] > summary .open::before { content:"\2212"; }
.wb-acc:not([open]) > summary .open::before { content:"+"; }
.wb-acc > summary .go { color:var(--wb-link); font:600 12.5px/1 var(--wb-sans); white-space:nowrap; }
.wb-acc-go { display:inline-block; margin:12px 0 2px; }
.wb-acc-body { padding:4px 16px 16px; border-top:1px solid var(--wb-rule); background:var(--wb-tint); }
.wb-l3 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; padding-top:12px; }
.wb-l3 details { min-width:0; }
.wb-l3 summary { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:8px; align-items:center; padding:7px 0; color:var(--wb-ink); font:600 14px/1.3 var(--wb-sans); cursor:pointer; list-style:none; }
.wb-l3 summary::-webkit-details-marker { display:none; }
.wb-l3 summary i { color:var(--wb-link); font:700 14px/1 var(--wb-mono); font-style:normal; text-align:center; }
.wb-l3 details[open] summary i::before { content:"\2212"; }
.wb-l3 details:not([open]) summary i::before { content:"+"; }
.wb-l3 summary span { color:var(--wb-ink); }
.wb-l4 a.wb-l4-go { color:var(--wb-link); font-weight:600; }
.wb-l3 summary small { color:var(--wb-faint); font:11px/1 var(--wb-mono); white-space:nowrap; }
.wb-l4 { display:grid; gap:2px; margin:2px 0 8px 28px; padding-left:12px; border-left:2px solid var(--wb-rule-strong); }
.wb-l4 a { display:flex; justify-content:space-between; gap:10px; padding:4px 0; color:var(--wb-soft); font-size:13px; }
.wb-l4 a:hover { color:var(--wb-link); }
.wb-l4 a small { color:var(--wb-faint); font:11px/1.6 var(--wb-mono); white-space:nowrap; }
/* article cards */
.wb-lead-story { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:28px; align-items:start; }
.wb-story { display:grid; gap:10px; color:inherit; }
.wb-story:hover { text-decoration:none; color:inherit; }
.wb-story img { width:100%; aspect-ratio:16 / 9; object-fit:cover; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-tint); }
.wb-story h3 { font:600 clamp(22px,2.6vw,32px)/1.12 var(--wb-serif); letter-spacing:-.01em; }
.wb-story:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.wb-story-list { display:grid; }
.wb-story-list a { display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:14px; padding:14px 0; border-bottom:1px solid var(--wb-rule); color:inherit; }
.wb-story-list a:first-child { padding-top:0; }
.wb-story-list a:hover { color:inherit; text-decoration:none; }
.wb-story-list h3 { font:600 17px/1.25 var(--wb-serif); }
.wb-story-list a:hover h3 { text-decoration:underline; text-underline-offset:3px; }
.wb-story-list img { width:96px; aspect-ratio:4 / 3; object-fit:cover; border-radius:6px; border:1px solid var(--wb-rule); background:var(--wb-tint); }
.wb-story-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 20px; }
.wb-story-grid .wb-story h3 { font-size:17px; }
/* founder / author block */
.wb-author { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:20px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-tint); }
.wb-author img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--wb-amber); }
.wb-author b { display:block; font:600 18px/1.2 var(--wb-serif); }
.wb-author small { display:block; margin:2px 0 8px; color:var(--wb-faint); font:12px/1.4 var(--wb-mono); }
.wb-author p { color:var(--wb-soft) !important; font-size:14.5px; margin:0 0 6px !important; }

/* ---------- motion ---------- */
@keyframes wbEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes wbGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes wbRise { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes wbPulse { 0% { box-shadow:0 0 0 0 rgba(179,38,30,.45); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion:no-preference) {
  .wb-reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .wb-reveal.is-in { opacity:1; transform:none; }
  .wb-anim .wb-bar-fill, .wb-anim .wb-ladder .bar i, .wb-anim .wb-prow .bar i, .wb-anim .wb-pulse .bar i { transform:scaleX(0); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
  .wb-anim.is-in .wb-bar-fill, .wb-anim.is-in .wb-ladder .bar i, .wb-anim.is-in .wb-prow .bar i, .wb-anim.is-in .wb-pulse .bar i { transform:scaleX(1); }
  .wb-anim .wb-column { transform:scaleY(0); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
  .wb-anim.is-in .wb-column { transform:scaleY(1); }
  .wb-demo { animation:wbEnter .5s both; animation-delay:calc(var(--o,0) * 30ms); }
}
@media (prefers-reduced-motion:reduce) {
  .wb-live i, .wb-demo { animation:none !important; }
  .wb-flip .inner { transition:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1024px) {
  .wb-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wb-story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wb-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wb-split-rail { grid-template-columns:1fr; }
  .wb-rail { position:static; }
}
@media (max-width:768px) {
  .wb { --wb-header:76px; }
  .wb-shell { padding:0 16px 56px; }
  .wb-band { padding:40px 0; }
  .wb-head { grid-template-columns:1fr; gap:14px; padding:30px 0 20px; }
  .wb-head-aside { justify-items:start; }
  .wb-subnav { margin:0 -16px 24px; padding:10px 16px; }
  .wb-section { margin-top:44px; }
  .wb-section-head { grid-template-columns:auto 1fr; }
  .wb-section-head .wb-more { grid-column:2; grid-row:auto; justify-self:start; }
  .wb-grid, .wb-grid-3, .wb-cols-2, .wb-cols-3, .wb-cols-4, .wb-split, .wb-lead-story, .wb-tiles, .wb-story-grid, .wb-l3 { grid-template-columns:1fr; }
  .wb-stage { padding:16px; }
  .wb-stat-row { grid-template-columns:1fr; }
  .wb-stat-row div { border-left:0; border-top:1px solid var(--wb-rule); }
  .wb-stat-row div:first-child { border-top:0; }
  .wb-quote-wall, .wb-price-cards, .wb-score-grid, .wb-steps, .wb-anatomy { grid-template-columns:1fr; }
  .wb-steps > div:not(:last-child)::after { display:none; }
  .wb-mini-dash, .wb-channels { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wb-procon, .wb-who, .wb-freepaid, .wb-compare2 { grid-template-columns:1fr; }
  .wb-opposed { grid-template-columns:1fr; }
  .wb-opposed::before { display:none; }
  .wb-opposed::after { position:static; justify-self:center; transform:none; }
  .wb-opposed blockquote:last-child { grid-column:1; }
  .wb-before-after, .wb-tradeoff, .wb-cause, .wb-gap { grid-template-columns:1fr; }
  .wb-before-after .arrow, .wb-tradeoff i, .wb-cause i, .wb-gap i { justify-self:center; transform:rotate(90deg); }
  .wb-bar-row { grid-template-columns:1fr; gap:4px; }
  .wb-bar-row b { text-align:left; }
  .wb-criteria .wb-bar-row { grid-template-columns:minmax(0,1fr) 34px; }
  .wb-criteria .wb-bar-row > span { grid-column:1 / 3; }
  .wb-radar { grid-template-columns:1fr; justify-items:center; }
  .wb-ladder > * { grid-template-columns:26px minmax(0,1fr) auto; }
  .wb-ladder .bar { grid-column:2 / 4; }
  .wb-prow { grid-template-columns:24px 36px minmax(0,1fr) 56px; gap:8px; }
  .wb-prow .nm b { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .wb-acc-body { padding:4px 12px 12px; }
  .wb-l4 { margin-left:20px; }
  .wb-story-list a { grid-template-columns:minmax(0,1fr) 80px; }
  .wb-story-list img { width:80px; }
  .wb-author { grid-template-columns:1fr; }
  .wb-handson { grid-template-columns:1fr; }
  .wb-heatstrip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wb-unit-grid { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .wb-diag-bottom { clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),0 100%); padding-bottom:calc(40px + 28px); }
  .wb-diag-top { clip-path:polygon(0 28px,100% 0,100% 100%,0 100%); padding-top:calc(40px + 28px); }
}
@media (max-width:480px) {
  .wb-mini-dash, .wb-channels, .wb-cost-scale { grid-template-columns:1fr 1fr; }
  .wb-heatstrip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wb-head h1 { font-size:30px; }
}

/* ---------- source modal (wb.js) ---------- */
.wb-modal { position:fixed; inset:0; z-index:1000; display:none; }
.wb-modal.is-open { display:block; }
.wb-modal-back { position:absolute; inset:0; background:rgba(11,31,58,.55); }
.wb-modal-box { position:absolute; left:50%; top:50%; width:min(520px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; padding:22px 22px 20px; border:1px solid #e2e7ef; border-radius:10px; color:#0b1f3a; background:#fff; transform:translate(-50%,-50%); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.wb-modal-x { position:absolute; right:10px; top:8px; width:36px; height:36px; border:0; border-radius:50%; color:#3f4b60; background:transparent; font:400 24px/1 sans-serif; cursor:pointer; }
.wb-modal-x:hover { background:#f3f5f9; }
.wb-modal-box .wb-label { display:inline-block; margin:0 0 6px; color:#1a4a9c; font:700 11px/1.2 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }
.wb-modal-name { margin:0 0 4px; font:600 22px/1.2 "Source Serif 4",Georgia,serif; }
.wb-modal-who { margin:0 !important; color:#5b6980 !important; font-size:13px; }
.wb-modal-took { margin:0 0 16px !important; color:#3f4b60 !important; font-size:14.5px; line-height:1.55; }

/* ---------- ranking page product cards (L4) and hub blocks (L2/L3) ---------- */
.wb-pc { position:relative; margin:0 0 22px; padding:22px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-surface); scroll-margin-top:calc(var(--wb-header) + 60px); }
.wb-pc.is-top { border-color:var(--wb-amber); box-shadow:0 0 0 3px var(--wb-amber-soft); }
.wb-pc-head { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:14px; align-items:center; }
.wb-pc-rank { display:grid; place-items:center; min-width:44px; height:44px; padding:0 8px; border-radius:8px; color:var(--wb-onnavy); background:var(--wb-navy); font:600 22px/1 var(--wb-serif); }
.wb-pc.is-top .wb-pc-rank { color:#2a1d02; background:var(--wb-amber); }
.wb-pc-rank.sponsored { font:700 10px/1.2 var(--wb-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--wb-amber-deep); background:var(--wb-amber-soft); }
.wb-pc-title { min-width:0; }
.wb-pc-title h2 { font:600 24px/1.15 var(--wb-serif); overflow-wrap:anywhere; }
.wb-pc-title small { display:block; margin-top:3px; color:var(--wb-faint); font:12px/1.4 var(--wb-mono); overflow-wrap:anywhere; }
.wb-pc-title .wb-chips { margin-top:8px; }
.wb-pc-title .wb-chips span { padding:3px 7px; font-size:11px; }
.wb-pc-headline { margin:18px 0 6px !important; color:var(--wb-ink) !important; font:600 clamp(20px,2.4vw,26px)/1.2 var(--wb-serif); letter-spacing:-.01em; }
.wb-pc-oneliner { margin:0 0 16px !important; color:var(--wb-soft) !important; font-size:15.5px; line-height:1.55; max-width:72ch; }
.wb-pc-strip { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.wb-pc-strip div { padding:12px 14px; border-radius:8px; font-size:14px; line-height:1.5; }
.wb-pc-strip div:first-child { background:var(--wb-green-soft); border-left:3px solid var(--wb-green); }
.wb-pc-strip div:last-child { background:var(--wb-red-soft); border-left:3px solid var(--wb-red); }
.wb-pc-strip b { display:block; margin-bottom:2px; font:700 10.5px/1.4 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-pc-strip div:first-child b { color:var(--wb-green); }
.wb-pc-strip div:last-child b { color:var(--wb-red); }
.wb-pc-mods { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; align-items:start; }
.wb-pc-body { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:14px; margin-bottom:16px; align-items:start; }
.wb-pc-fit { display:grid; gap:8px; }
.wb-pc-fit div { padding:10px 12px; border-radius:8px; background:var(--wb-tint); font-size:13.5px; line-height:1.5; }
.wb-pc-fit b { display:block; font:700 10.5px/1.5 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wb-link); }
.wb-pc-take { margin:0 0 16px !important; padding:14px 16px; border-left:3px solid var(--wb-amber); background:var(--wb-tint); color:var(--wb-ink) !important; font:16px/1.55 var(--wb-serif); }
.wb-pc-take b { display:block; margin-bottom:4px; font:700 10.5px/1.4 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wb-amber-deep); }
.wb-pc-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.wb-pc-actions .wb-caption { margin-left:auto !important; }
.wb-pc-ev { margin-top:14px; border:1px solid var(--wb-rule); border-radius:8px; background:var(--wb-surface); }
.wb-pc-ev > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; cursor:pointer; list-style:none; color:var(--wb-ink); font:600 14px/1.3 var(--wb-sans); }
.wb-pc-ev > summary::-webkit-details-marker { display:none; }
.wb-pc-ev > summary::after { content:"Show"; color:var(--wb-link); font:700 11px/1 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; }
.wb-pc-ev[open] > summary::after { content:"Hide"; }
.wb-pc-ev > div { padding:4px 14px 16px; border-top:1px solid var(--wb-rule); }
.wb-ev-row { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--wb-rule); }
.wb-ev-row:last-child { border-bottom:0; }
.wb-ev-row > b { font:600 24px/1 var(--wb-serif); color:var(--wb-navy); }
.wb-ev-row strong { display:block; font-size:14px; font-weight:600; }
.wb-ev-row .lf { display:block; margin:3px 0; color:var(--wb-faint); font-size:12.5px; }
.wb-ev-row .fd { display:block; color:var(--wb-soft); font-size:13.5px; line-height:1.5; }
.wb-ev-row .srcs { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.wb-ev-row .srcs a { padding:3px 7px; border:1px solid var(--wb-rule); border-radius:5px; color:var(--wb-link); background:var(--wb-tint); font:600 11px/1.3 var(--wb-mono); word-break:break-all; }
.wb-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:26px 0 0; }
.wb-podium > a { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:16px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); color:var(--wb-ink); background:var(--wb-surface); }
.wb-podium > a:hover { color:var(--wb-ink); text-decoration:none; border-color:var(--wb-navy); background:var(--wb-tint); }
.wb-podium > a:first-child { border-color:var(--wb-amber); background:var(--wb-amber-soft); }
.wb-podium .rk { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; color:var(--wb-onnavy); background:var(--wb-navy); font:600 16px/1 var(--wb-serif); }
.wb-podium > a:first-child .rk { color:#2a1d02; background:var(--wb-amber); }
.wb-podium b { display:block; font:600 17px/1.2 var(--wb-serif); }
.wb-podium small { display:block; margin-top:2px; color:var(--wb-faint); font:11.5px/1.4 var(--wb-mono); }
.wb-podium p { margin:6px 0 0 !important; color:var(--wb-soft) !important; font-size:13.5px; line-height:1.45; }
.wb-podium .sc { grid-column:1 / 3; display:flex; align-items:center; gap:8px; margin-top:6px; }
.wb-podium .sc i { flex:1; height:6px; border-radius:99px; background:var(--wb-tint-2); overflow:hidden; display:block; }
.wb-podium .sc i::after { content:""; display:block; width:calc(var(--w) * 1%); height:100%; background:var(--wb-navy); }
.wb-podium > a:first-child .sc i::after { background:var(--wb-amber-deep); }
.wb-podium .sc b { font-size:18px; }
.wb-snapshot { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:22px 0 0; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-rule); overflow:hidden; }
.wb-snapshot div { padding:14px 16px; background:var(--wb-surface); }
.wb-snapshot b { display:block; color:var(--wb-navy); font:600 26px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-snapshot span { display:block; margin-top:5px; color:var(--wb-faint); font:11.5px/1.3 var(--wb-mono); text-transform:uppercase; letter-spacing:.06em; }
.wb-hub-l4 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wb-hub-l4 .wb-card h3 a { color:var(--wb-ink); }
.wb-hub-l4 .wb-meta { margin:4px 0 10px; }
.wb-hub-l4 .wb-prow { padding:7px 0; }
.wb-hub-l4 .wb-prow .nm b { font-size:13.5px; }
.wb-hub-l4 .wb-prow .sc { font-size:17px; }
.wb-ladder-hub .who b { white-space:normal; }
.wb-ladder-hub .who em { display:block; margin-top:2px; color:var(--wb-soft); font:italic 13px/1.4 var(--wb-serif); }
.wb-decision { width:100%; }
.wb-decision td:first-child { font-weight:600; }
.wb-usecases { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.wb-usecases div { padding:14px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); }
.wb-usecases i { display:block; margin-bottom:6px; font-style:normal; font-size:20px; }
.wb-usecases b { display:block; margin-bottom:4px; font:600 14px/1.25 var(--wb-serif); }
.wb-usecases span { color:var(--wb-soft); font-size:12.5px; line-height:1.45; }
.wb-about { max-width:none; }
.wb-about details { border:1px solid var(--wb-rule); border-radius:var(--wb-radius); padding:0 18px; }
.wb-about summary { padding:12px 0; cursor:pointer; color:var(--wb-link); font:600 14px/1.3 var(--wb-sans); list-style:none; }
.wb-about summary::-webkit-details-marker { display:none; }
.wb-about summary::before { content:"+ "; font-family:var(--wb-mono); }
.wb-about details[open] summary::before { content:"\2212 "; }
.wb-about .wb-prose { padding:0 0 16px; }
.wb-about .wb-prose h3 { margin:22px 0 8px; font:600 19px/1.2 var(--wb-serif); }
.wb-about .wb-prose p { color:var(--wb-soft) !important; font-size:15px; }
@media (max-width:1024px) { .wb-hub-l4 { grid-template-columns:1fr 1fr; } .wb-usecases { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:768px) {
  .wb-pc { padding:16px; }
  .wb-pc-head { grid-template-columns:auto auto minmax(0,1fr); }
  .wb-pc-head .wb-score { grid-column:1 / 4; justify-self:start; margin:4px 0 0; }
  .wb-pc-title h2 { font-size:20px; }
  .wb-pc-strip, .wb-pc-mods, .wb-pc-body, .wb-podium, .wb-hub-l4, .wb-usecases { grid-template-columns:1fr; }
  .wb-snapshot { grid-template-columns:1fr 1fr; }
  .wb-pc-actions .wb-btn { width:100%; }
  .wb-pc-actions .wb-caption { margin-left:0 !important; }
}

/* overview HTML from _l2_content JSON carries inline link colours; normalise inside the about block */
.wb-about .wb-prose a, .wb-about .wb-prose sup a { color:var(--wb-link) !important; }
.wb-about .wb-prose sup { font-size:11px; }
.wb-about .wb-prose blockquote { margin:14px 0; padding:10px 16px; border-left:3px solid var(--wb-amber); background:var(--wb-tint); }
.wb-about .wb-prose ul, .wb-about .wb-prose ol { padding-left:22px; margin:0 0 14px; }
.wb-about .wb-prose strong[style] { color:var(--wb-red) !important; }
.wb-about .wb-prose [style*="color"] { color:var(--wb-ink) !important; }
.wb-about .wb-prose a[style*="color"] { color:var(--wb-link) !important; }
.wb-about .wb-prose strong[style*="color"] { color:var(--wb-red) !important; }
.wb-mod-navy a, .wb-mod-navy .wb-mod-foot a { color:var(--wb-amber) !important; }

/* ===== L2 hub refresh 2026-09-09: shortlist, category tiles, scenario picker, mono use-case icons ===== */
.wb { --wb-shadow:0 1px 2px rgba(11,31,58,.05), 0 10px 26px -14px rgba(11,31,58,.22); --wb-shadow-hi:0 2px 4px rgba(11,31,58,.06), 0 18px 34px -14px rgba(11,31,58,.32); }
.wb[data-theme="dark"], [data-theme="dark"] .wb { --wb-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.7); --wb-shadow-hi:0 2px 4px rgba(0,0,0,.4), 0 18px 34px -14px rgba(0,0,0,.85); }

/* shortlist: compact top-pick cards, two rows of five */
.wb-shortlist { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; counter-reset:pick; }
.wb-shortlist > * { counter-increment:pick; position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px 14px 12px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); color:var(--wb-ink); background:var(--wb-surface); box-shadow:var(--wb-shadow); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wb-shortlist > :hover { color:var(--wb-ink); text-decoration:none; border-color:var(--wb-navy); box-shadow:var(--wb-shadow-hi); transform:translateY(-2px); }
.wb-shortlist > *::before { content:counter(pick); position:absolute; top:10px; left:12px; color:var(--wb-faint); font:600 12px/1 var(--wb-mono); }
.wb-shortlist > :first-child { border-color:var(--wb-amber); }
.wb-shortlist > :first-child::before { color:var(--wb-amber-deep); }
.wb-shortlist .ring { --pct:0; align-self:flex-end; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:conic-gradient(var(--wb-navy) calc(var(--pct) * 1%), var(--wb-tint-2) 0); }
.wb-shortlist .ring::after { content:attr(data-v); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--wb-surface); color:var(--wb-ink); font:600 15px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-shortlist > :first-child .ring { background:conic-gradient(var(--wb-amber) calc(var(--pct) * 1%), var(--wb-tint-2) 0); }
.wb-shortlist b { display:block; font:600 15.5px/1.2 var(--wb-serif); overflow-wrap:anywhere; }
.wb-shortlist em { flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:var(--wb-soft); font:italic 12.5px/1.4 var(--wb-serif); }
.wb-shortlist small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; padding-top:8px; border-top:1px solid var(--wb-rule); color:var(--wb-faint); font:11px/1.35 var(--wb-mono); }
.wb-shortlist small span, .wb-shortlist small a { color:var(--wb-link); }
.wb-anim .wb-shortlist .ring { transition:background .01s; }

/* category tiles with icon + shadow + arrow */
.wb-catgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wb-cat { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:14px; row-gap:4px; min-width:0; padding:18px 18px 16px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); color:var(--wb-ink); background:var(--wb-surface); box-shadow:var(--wb-shadow); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wb-cat:hover { color:var(--wb-ink); text-decoration:none; border-color:var(--wb-navy); box-shadow:var(--wb-shadow-hi); transform:translateY(-2px); }
.wb-cat .ic { grid-row:1 / 4; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-cat .ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wb-cat:hover .ic { color:var(--wb-onnavy); background:var(--wb-navy); }
.wb-cat h3 { margin:0; padding-right:26px; font:600 16.5px/1.25 var(--wb-serif); }
.wb-cat .wb-meta { margin:0; }
.wb-cat p { margin:4px 0 0 !important; color:var(--wb-soft) !important; font-size:13px; line-height:1.45; }
.wb-cat .go { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--wb-faint); background:var(--wb-tint); transition:transform .18s ease, color .18s ease, background .18s ease; }
.wb-cat .go svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wb-cat:hover .go { color:var(--wb-onnavy); background:var(--wb-navy); transform:translateX(3px); }

/* scenario picker (replaces the Start here table) */
.wb-scen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.wb-scen > div { display:grid; grid-template-rows:auto 1fr auto auto; gap:8px; min-width:0; padding:16px 16px 14px; border:1px solid var(--wb-rule); border-left:4px solid var(--wb-navy); border-radius:var(--wb-radius); background:var(--wb-surface); box-shadow:var(--wb-shadow); }
.wb-scen .lbl { color:var(--wb-faint); font:700 10.5px/1.4 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-scen .q { font:600 16px/1.3 var(--wb-serif); }
.wb-scen .wb-btn { justify-self:start; gap:10px; min-height:38px; padding:8px 14px; font-size:13.5px; }
.wb-scen .wb-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.wb-scen .alt { color:var(--wb-faint); font:12.5px/1.4 var(--wb-sans); }
.wb-scen .alt a { color:var(--wb-link); font-weight:600; }

/* use cases: mono icon chip */
.wb-usecases { gap:12px; }
.wb-usecases div { position:relative; padding:16px 14px 14px; background:var(--wb-surface); box-shadow:var(--wb-shadow); }
.wb-usecases .ic { display:grid; place-items:center; width:38px; height:38px; margin-bottom:10px; border-radius:9px; color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-usecases .ic svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wb-usecases .pri { display:block; margin-top:8px; padding-top:8px; border-top:1px dashed var(--wb-rule-strong); color:var(--wb-amber-deep); font:700 11px/1.4 var(--wb-mono); }

@media (max-width:1024px) { .wb-shortlist { grid-template-columns:repeat(3,minmax(0,1fr)); } .wb-catgrid { grid-template-columns:1fr 1fr; } .wb-scen { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .wb-shortlist { grid-template-columns:1fr 1fr; gap:10px; } .wb-shortlist > * { padding:12px 12px 10px; } .wb-catgrid, .wb-scen { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .wb-shortlist > *, .wb-cat, .wb-cat .go { transition:none; } .wb-shortlist > :hover, .wb-cat:hover { transform:none; } }

/* ===== L3 hub refresh 2026-09-09: shortlist articles, ranking cards, quick-look modal ===== */
.wb-ring { --pct:0; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:conic-gradient(var(--wb-navy) calc(var(--pct) * 1%), var(--wb-tint-2) 0); }
.wb-ring::after { content:attr(data-v); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--wb-surface); color:var(--wb-ink); font:600 15px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-ring.is-top { background:conic-gradient(var(--wb-amber) calc(var(--pct) * 1%), var(--wb-tint-2) 0); }
.wb-shortlist .wb-ql-btn { margin-top:4px; }
.wb-ql-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:6px 10px; border:1px solid var(--wb-navy); border-radius:var(--wb-radius-sm); color:var(--wb-navy); background:transparent; font:600 12.5px/1 var(--wb-sans); cursor:pointer; }
.wb-ql-btn svg, .wb-ql-mini svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wb-ql-btn:hover, .wb-ql-btn:focus-visible { color:var(--wb-onnavy); background:var(--wb-navy); }
.wb-ql-mini { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--wb-rule); border-radius:50%; color:var(--wb-navy); background:var(--wb-tint); cursor:pointer; }
.wb-ql-mini:hover, .wb-ql-mini:focus-visible { color:var(--wb-onnavy); background:var(--wb-navy); border-color:var(--wb-navy); }
.wb-prow-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; border-bottom:1px solid var(--wb-rule); }
.wb-prow-wrap .wb-prow { border-bottom:0; }
.wb-l4card { box-shadow:var(--wb-shadow); }
.wb-l4card-head { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; margin-bottom:8px; }
.wb-l4card-head .ic { display:grid; place-items:center; width:40px; height:40px; border-radius:9px; color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-l4card-head .ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wb-l4card-head h3 { margin:0; }
.wb-hub-l4 .wb-l4card .wb-meta { margin:2px 0 0; }
.wb-btn-ghost { color:var(--wb-navy); background:transparent; }
.wb-btn-ghost:hover { color:var(--wb-onnavy); background:var(--wb-navy); }

/* quick-look modal */
html.wb-lock { overflow:hidden; }
.wb-modal-ql .wb-modal-box { width:min(840px, calc(100% - 32px)); max-height:calc(100% - 40px); padding:0; border-color:var(--wb-rule); color:var(--wb-ink); background:var(--wb-surface); font-family:var(--wb-sans); box-shadow:0 30px 80px -20px rgba(0,0,0,.45); }
.wb-modal-ql .wb-modal-x { position:sticky; top:8px; float:right; z-index:2; margin:8px 8px 0 0; color:var(--wb-soft); background:var(--wb-surface); box-shadow:0 0 0 1px var(--wb-rule); }
.wb-modal-ql .wb-modal-x:hover { background:var(--wb-tint); }
.wb-ql { padding:18px 24px 0; }
.wb-ql-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding-right:40px; }
.wb-ql-head .who { min-width:0; }
.wb-ql-head .wb-kicker { margin:0 0 4px; font-size:11px; }
.wb-ql-head .wb-kicker::after { display:none; }
.wb-ql-head h3 { margin:0; font:600 24px/1.15 var(--wb-serif); overflow-wrap:anywhere; }
.wb-ql-head small { display:block; margin-top:2px; color:var(--wb-faint); font:12px/1.3 var(--wb-mono); }
.wb-ql-headline { margin:16px 0 4px !important; color:var(--wb-ink) !important; font:600 clamp(19px,2.4vw,24px)/1.2 var(--wb-serif); letter-spacing:-.01em; }
.wb-ql-one { margin:0 0 14px !important; color:var(--wb-soft) !important; font-size:15px; line-height:1.5; }
.wb-ql .wb-pc-strip { margin-bottom:14px; }
.wb-ql-nums { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.wb-ql-nums div { min-width:0; padding:12px 14px; border-radius:8px; background:var(--wb-tint); }
.wb-ql-nums b { display:block; color:var(--wb-navy); font:600 21px/1.1 var(--wb-serif); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.wb-ql-nums span { display:block; margin-top:4px; color:var(--wb-faint); font:10.5px/1.35 var(--wb-mono); letter-spacing:.05em; text-transform:uppercase; }
.wb-ql-nums small { display:block; margin-top:6px; }
.wb-ql-nums .wb-cite { margin-left:0; }
.wb-ql-mods { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; align-items:start; }
.wb-ql-mods > :nth-child(3):last-child { grid-column:1 / -1; }
.wb-ql .wb-procon { margin-bottom:14px; }
.wb-ql .wb-procon section { padding:13px; }
.wb-ql-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.wb-ql-facts div { min-width:0; padding:12px 14px; border:1px solid var(--wb-rule); border-left-width:4px; border-radius:8px; color:var(--wb-soft); font-size:14px; line-height:1.5; }
.wb-ql-facts div.fact { border-left-color:var(--wb-amber); }
.wb-ql-facts div.catch { border-left-color:var(--wb-red); }
.wb-ql-facts b { display:block; margin-bottom:3px; font:700 10.5px/1.4 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-ql-facts div.fact b { color:var(--wb-amber-deep); }
.wb-ql-facts div.catch b { color:var(--wb-red); }
.wb-ql-price { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; padding:12px 14px; border-radius:8px; background:var(--wb-link-soft); color:var(--wb-ink); font-size:14px; line-height:1.45; }
.wb-ql-price .model { flex:0 0 auto; padding:4px 8px; border-radius:5px; color:var(--wb-onnavy); background:var(--wb-navy); font:700 10.5px/1 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; }
.wb-ql-price .model.free, .wb-ql-price .model.freemium { background:var(--wb-green); }
.wb-ql-take { margin-bottom:14px; padding:14px 16px; border-left:4px solid var(--wb-navy); border-radius:0 8px 8px 0; background:var(--wb-tint); color:var(--wb-ink); font:15px/1.55 var(--wb-serif); }
.wb-ql-take b { display:block; margin-bottom:4px; color:var(--wb-link); font:700 10.5px/1.4 var(--wb-mono); letter-spacing:.12em; text-transform:uppercase; }
.wb-ql .wb-handson { margin-bottom:14px; }
.wb-ql .wb-faq { margin-bottom:14px; }
.wb-ql .wb-faq details > div { padding:0 14px 12px; color:var(--wb-soft); font-size:14px; line-height:1.55; }
.wb-ql-tags { margin-bottom:16px; }
.wb-ql-cta { position:sticky; bottom:0; display:flex; flex-wrap:wrap; gap:10px; margin:0 -24px; padding:12px 24px; border-top:1px solid var(--wb-rule); background:var(--wb-surface); }
.wb-ql-cta .wb-btn { flex:1 1 200px; gap:10px; }
.wb-ql-cta .wb-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.wb-modal-ql.is-open .wb-modal-box { animation:wbPop .26s cubic-bezier(.2,.7,.2,1); }
@keyframes wbPop { from { opacity:0; transform:translate(-50%,-50%) scale(.97); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (max-width:1024px) { .wb-ql-nums { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) {
  .wb-modal-ql .wb-modal-box { left:0; top:auto; bottom:0; width:100%; max-height:94%; transform:none; border-radius:16px 16px 0 0; border-bottom:0; }
  .wb-modal-ql.is-open .wb-modal-box { animation:wbSheet .3s cubic-bezier(.2,.7,.2,1); }
  @keyframes wbSheet { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
  .wb-ql { padding:14px 16px 0; }
  .wb-ql-head { gap:10px; padding-right:36px; }
  .wb-ql-head h3 { font-size:20px; }
  .wb-ql-nums, .wb-ql-mods, .wb-ql-facts, .wb-ql .wb-procon { grid-template-columns:1fr; }
  .wb-ql-cta { margin:0 -16px; padding:10px 16px; }
  .wb-prow-wrap { grid-template-columns:minmax(0,1fr) auto; }
}
@media (prefers-reduced-motion:reduce) { .wb-modal-ql.is-open .wb-modal-box { animation:none; } }

.wb-l4card .wb-prow .nm b { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wb-l4card .wb-prow .nm small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:12px/1.35 var(--wb-sans); }
@media (max-width:640px) { .wb-ql-head .wb-kicker { font-size:10px; letter-spacing:.08em; } }

/* ===== L4 ranking refresh 2026-09-09: filters, leaderboard cards, mini criteria strip ===== */
.wb-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.wb-filters button { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 13px; border:1px solid var(--wb-rule); border-radius:999px; color:var(--wb-soft); background:var(--wb-surface); font:600 12.5px/1 var(--wb-sans); cursor:pointer; }
.wb-filters button b { font:600 11px/1 var(--wb-mono); opacity:.7; }
.wb-filters button:hover { border-color:var(--wb-navy); color:var(--wb-ink); }
.wb-filters button.is-on { color:var(--wb-onnavy); background:var(--wb-navy); border-color:var(--wb-navy); }
.wb-filters .none { display:none; width:100%; padding:12px 14px; border:1px dashed var(--wb-rule-strong); border-radius:8px; color:var(--wb-faint); font-size:13.5px; }
.wb-filters.is-empty .none { display:block; }

.wb-rank { display:grid; grid-template-columns:48px 60px minmax(0,1fr) auto; grid-template-areas:"rk logo main score" "rk logo crit crit" "rk logo act act"; column-gap:16px; row-gap:12px; align-items:start; margin:0 0 14px; padding:18px 20px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); background:var(--wb-surface); box-shadow:var(--wb-shadow); scroll-margin-top:calc(var(--wb-header) + 60px); }
.wb-rank.is-top { border-color:var(--wb-amber); box-shadow:0 0 0 3px var(--wb-amber-soft), var(--wb-shadow); }
.wb-rank.is-hidden { display:none; }
.wb-rank > .wb-pc-rank { grid-area:rk; }
.wb-rank > .wb-logo { grid-area:logo; }
.wb-rank-body { grid-area:main; min-width:0; }
.wb-rank-body h2 { margin:0; font:600 22px/1.15 var(--wb-serif); overflow-wrap:anywhere; }
.wb-rank-body small.host { display:block; margin-top:2px; color:var(--wb-faint); font:12px/1.4 var(--wb-mono); overflow-wrap:anywhere; }
.wb-rank .hl { margin:8px 0 4px !important; color:var(--wb-ink) !important; font:600 16.5px/1.3 var(--wb-serif); }
.wb-rank .bf { margin:0 !important; color:var(--wb-soft) !important; font-size:13.5px; line-height:1.5; }
.wb-rank .bf b { margin-right:6px; color:var(--wb-green); font:700 10.5px/1 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; }
.wb-rank .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.wb-rank .chips span { padding:4px 8px; border:1px solid var(--wb-rule); border-radius:6px; color:var(--wb-soft); background:var(--wb-tint); font:600 11.5px/1 var(--wb-sans); }
.wb-rank .chips span.price { color:var(--wb-navy); background:var(--wb-link-soft); border-color:transparent; }
.wb-rank .chips span.free { color:var(--wb-green); background:var(--wb-green-soft); border-color:transparent; }
.wb-rank .chips span.quote { color:var(--wb-amber-deep); background:var(--wb-amber-soft); border-color:transparent; }
.wb-rank-score { grid-area:score; display:grid; justify-items:center; gap:4px; }
.wb-rank-score small { color:var(--wb-faint); font:600 11px/1 var(--wb-mono); }
.wb-ring.lg { width:66px; height:66px; }
.wb-ring.lg::after { width:54px; height:54px; font-size:19px; }
.wb-minicrit { grid-area:crit; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.wb-minicrit span { min-width:0; padding:6px 4px 5px; border-radius:6px; background:var(--wb-tint); color:var(--wb-soft); text-align:center; font:700 13px/1 var(--wb-mono); font-variant-numeric:tabular-nums; }
.wb-minicrit span i { display:block; margin-top:3px; overflow:hidden; color:var(--wb-faint); font:500 9.5px/1.2 var(--wb-sans); font-style:normal; white-space:nowrap; text-overflow:ellipsis; }
.wb-minicrit span.up { background:var(--wb-green-soft); color:var(--wb-green); }
.wb-minicrit span.down { background:var(--wb-red-soft); color:var(--wb-red); }
.wb-minicrit span.up i { color:var(--wb-green); } .wb-minicrit span.down i { color:var(--wb-red); }
.wb-minicrit span.alt { outline:1px dashed var(--wb-rule-strong); outline-offset:-1px; }
.wb-rank-act { grid-area:act; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.wb-rank-act .wb-caption { margin-left:auto !important; }
.wb-rank-act .wb-ql-btn { min-height:38px; padding:8px 14px; font-size:13.5px; }
.wb-rank-act .wb-btn { min-height:38px; padding:8px 14px; font-size:13.5px; }
.wb-ql-ev { margin-bottom:14px; }
.wb-ql-src { display:none; }
@media (max-width:640px) {
  .wb-rank { grid-template-columns:38px minmax(0,1fr) auto; grid-template-areas:"rk main score" "crit crit crit" "act act act"; column-gap:10px; row-gap:10px; padding:14px; }
  .wb-rank > .wb-logo { display:none; }
  .wb-rank > .wb-pc-rank { min-width:38px; height:38px; font-size:18px; }
  .wb-rank-body h2 { font-size:19px; }
  .wb-rank .hl { font-size:15.5px; }
  .wb-ring.lg { width:56px; height:56px; } .wb-ring.lg::after { width:46px; height:46px; font-size:16px; }
  .wb-minicrit { gap:3px; } .wb-minicrit span { padding:5px 2px 4px; font-size:12px; border-radius:5px; } .wb-minicrit span i { font-size:8.5px; }
  .wb-rank-act .wb-ql-btn, .wb-rank-act .wb-btn { flex:1 1 130px; }
}
@media (max-width:640px) { .wb-rank-act .wb-btn .brand { display:none; } }

/* shared action rows: quick look + visit (L2/L3 cards and rows) */
.wb-ql-act { display:flex; gap:6px; margin-top:4px; }
.wb-ql-act .wb-ql-btn { flex:1 1 auto; }
.wb-ql-act .wb-visit { flex:0 0 auto; min-height:34px; padding:6px 10px; font-size:12.5px; }
.wb-row-act { display:flex; align-items:center; gap:6px; }
.wb-visit-mini { display:inline-flex; align-items:center; min-height:34px; padding:0 10px; border-radius:var(--wb-radius-sm); color:var(--wb-onnavy); background:var(--wb-navy); font:600 12px/1 var(--wb-sans); text-decoration:none; white-space:nowrap; }
.wb-visit-mini:hover, .wb-visit-mini:focus-visible { color:var(--wb-onnavy); background:var(--wb-navy-2); text-decoration:none; }
.wb-usecases .wb-ql-more { margin-top:10px; width:100%; }
.wb-ql-info .wb-ql-head .ic { display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-ql-info .wb-ql-head .ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wb-ql-prose { margin:14px 0; color:var(--wb-soft); font-size:15px; line-height:1.6; }
.wb-ql-list { display:grid; gap:10px; margin:14px 0; padding:0; list-style:none; }
.wb-ql-list li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:12px 14px; border:1px solid var(--wb-rule); border-radius:8px; }
.wb-ql-list li b { display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:8px; color:var(--wb-onnavy); background:var(--wb-navy); font:600 14px/1 var(--wb-serif); }
.wb-ql-list li strong { display:block; font:600 14.5px/1.3 var(--wb-sans); }
.wb-ql-list li span { display:block; margin-top:3px; color:var(--wb-soft); font-size:13.5px; line-height:1.5; }
.wb-ql-list li small { display:block; margin-top:4px; color:var(--wb-faint); font:11.5px/1.4 var(--wb-mono); overflow-wrap:anywhere; }
.wb-podium > a, .wb-podium > div { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"rk name ring" "rk hl hl" "act act act"; gap:10px 12px; align-items:start; padding:16px; border:1px solid var(--wb-rule); border-radius:var(--wb-radius); color:var(--wb-ink); background:var(--wb-surface); box-shadow:var(--wb-shadow); }
.wb-podium > div:first-child { border-color:var(--wb-amber); }
.wb-podium > div .rk { grid-area:rk; }
.wb-podium > div .nm { grid-area:name; min-width:0; }
.wb-podium > div .wb-ring { grid-area:ring; }
.wb-podium > div p { grid-area:hl; }
.wb-podium > div .wb-ql-act { grid-area:act; margin-top:2px; }
.wb-snapshot button { display:block; width:100%; padding:14px 16px; border:0; background:var(--wb-surface); color:inherit; text-align:left; font:inherit; cursor:pointer; }
.wb-snapshot button:hover { background:var(--wb-tint); }
.wb-snapshot button::after { content:"Open"; display:inline-block; margin-top:6px; color:var(--wb-link); font:700 10.5px/1 var(--wb-mono); letter-spacing:.1em; text-transform:uppercase; }
.wb-snapshot button b { display:block; color:var(--wb-navy); font:600 26px/1 var(--wb-serif); font-variant-numeric:tabular-nums; }
.wb-snapshot button span { display:block; margin-top:5px; color:var(--wb-faint); font:11.5px/1.3 var(--wb-mono); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:640px) { .wb-ql-act .wb-visit { padding:6px 9px; } .wb-podium > div { grid-template-columns:auto minmax(0,1fr) auto; } }

/* action button polish 2026-09-09 */
.wb-ql-act .wb-ql-btn { padding:6px 8px; font-size:12px; gap:5px; white-space:nowrap; }
.wb-ql-act .wb-visit { padding:6px 9px; font-size:12px; white-space:nowrap; }
.wb-prow-wrap { display:block; }
.wb-row-act { justify-content:flex-end; margin:-4px 0 6px; }
.wb-row-act .wb-ql-mini { width:30px; height:30px; }
.wb-row-act .wb-visit-mini { min-height:30px; padding:0 9px; }
.wb-l4card .wb-prow { padding-bottom:4px; }
@media (max-width:640px) { .wb-ql-act { flex-direction:column; } .wb-ql-act .wb-visit { width:100%; } }

/* ===== 2026-09-09 (later): line icons everywhere, all-categories tree with linked names, L4 inline reviews ===== */
.wb .ic > svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wb-acc-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; color:var(--wb-ink); }
.wb-acc-head .ic { display:grid; place-items:center; width:40px; height:40px; border-radius:8px; color:var(--wb-navy); background:var(--wb-link-soft); }
.wb-acc-head .ic svg { width:20px; height:20px; }
.wb-acc-head .wb-acc-name { display:block; color:var(--wb-ink); font:600 17px/1.25 var(--wb-serif); }
.wb-acc-head .wb-acc-name:hover { color:var(--wb-link); }
.wb-acc-head small { display:block; margin-top:3px; color:var(--wb-faint); font:11.5px/1.3 var(--wb-mono); }
.wb-acc-head .open { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--wb-rule-strong); border-radius:50%; color:var(--wb-link); background:var(--wb-surface); font:700 18px/1 var(--wb-mono); cursor:pointer; }
.wb-acc-head .open:hover { color:var(--wb-onnavy); background:var(--wb-navy); border-color:var(--wb-navy); }
.wb-acc-head .open::before { content:"+"; }
.wb-acc.is-open > .wb-acc-head .open::before { content:"\2212"; }
.wb-acc.is-open > .wb-acc-head { background:var(--wb-tint); }
.wb-l3-item { min-width:0; }
.wb-l3-head { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; padding:5px 0; }
.wb-l3-head .tg { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--wb-rule-strong); border-radius:50%; color:var(--wb-link); background:var(--wb-surface); font:700 14px/1 var(--wb-mono); cursor:pointer; }
.wb-l3-head .tg::before { content:"+"; }
.wb-l3-item.is-open > .wb-l3-head .tg::before { content:"\2212"; }
.wb-l3-head .tg:hover { color:var(--wb-onnavy); background:var(--wb-navy); border-color:var(--wb-navy); }
.wb-l3-head a { color:var(--wb-ink); font:600 14px/1.3 var(--wb-sans); }
.wb-l3-head a:hover { color:var(--wb-link); }
.wb-l3-head small { color:var(--wb-faint); font:11px/1 var(--wb-mono); white-space:nowrap; }
.wb-l3-item .wb-l4 { margin-left:36px; }
.wb-rank { display:block; }
.wb-rank-top { display:grid; grid-template-columns:48px 60px minmax(0,1fr) auto; grid-template-areas:"rk logo main score" "rk logo crit crit" "rk logo act act"; column-gap:16px; row-gap:12px; align-items:start; }
.wb-rank-top > .wb-pc-rank { grid-area:rk; }
.wb-rank-top > .wb-logo { grid-area:logo; }
.wb-rank-more { margin-top:16px; padding-top:16px; border-top:1px solid var(--wb-rule); }
.wb-rank-more .wb-pc-oneliner { margin-bottom:14px !important; }
.wb-rank-more .wb-pc-strip { margin-bottom:14px; }
.wb-rank-more .wb-ql-nums { margin-bottom:14px; }
.wb-rank-more .wb-pc-mods { margin-bottom:14px; }
.wb-rank-more .wb-pc-body { margin-bottom:14px; }
.wb-rank-more .wb-pc-take { margin-bottom:14px !important; }
.wb-rank-more .wb-faq details > p { margin:0 !important; padding:0 14px 12px; color:var(--wb-soft) !important; font-size:14px; }
.wb-rank-act a.wb-ql-btn { text-decoration:none; }
@media (max-width:640px) {
  .wb-rank-top { grid-template-columns:38px minmax(0,1fr) auto; grid-template-areas:"rk main score" "crit crit crit" "act act act"; column-gap:10px; row-gap:10px; }
  .wb-rank-top > .wb-logo { display:none; }
  .wb-acc-head { padding:12px; gap:10px; }
  .wb-l3-item .wb-l4 { margin-left:20px; }
}
.wb-l4[hidden], .wb-acc-body[hidden] { display:none !important; }

/* L3 top picks on the L4 card layout */
.wb-rank-list .wb-rank { margin-bottom:14px; }
.wb-rank-body h3 { margin:0; font:600 22px/1.15 var(--wb-serif); overflow-wrap:anywhere; }
.wb-rank-in { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 9px; border-radius:6px; color:var(--wb-link); background:var(--wb-link-soft); font:600 12px/1.2 var(--wb-sans); text-decoration:none; }
.wb-rank-in svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.wb-rank-in:hover { color:var(--wb-onnavy); background:var(--wb-navy); text-decoration:none; }
.wb-rank-act a.wb-ql-btn svg { width:14px; height:14px; }
@media (max-width:640px) { .wb-rank-body h3 { font-size:19px; } .wb-rank-act a.wb-ql-btn { flex:1 1 100%; } }

/* product names link to the tracked vendor link without changing their look; row buttons clear the score bar */
.wb :where(a.wb-name-link), .wb :where(a.wb-name-link):hover, .wb :where(a.wb-name-link):focus-visible { color:inherit; text-decoration:none; }
.wb-row-act { margin:10px 0 10px; }
.wb-l4card .wb-prow { padding-bottom:8px; }
.wb-pc-actions .wb-more { white-space:normal; overflow-wrap:anywhere; }