/* Blog article — converted from Stage-2-Blog-Detail.dc.html.
   Page-owned; nav/closing/footer are the shared shell. */

/* Reading progress bar */
.bd-prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,#F4A000,#FFB038);transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 12px rgba(244,160,0,.55);transition:transform .15s linear}

/* Article hero */
.bd-hero{position:relative;margin-top:-102px;padding:160px 40px 0;overflow:hidden;
  background:radial-gradient(80% 65% at 50% 0%,rgba(244,160,0,.1),rgba(244,160,0,0) 62%),var(--bg-deep)}
.bd-hero__in{position:relative;max-width:1330px;margin:0 auto}
.bd-crumb{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:28px}
.bd-crumb a,.bd-crumb span[aria-hidden]{color:var(--text-dim)}
.bd-crumb a:hover{color:var(--gold)}
.bd-crumb [aria-current]{color:var(--text-soft)}
.bd-hero h1{margin:0 0 22px;font-weight:800;font-size:52px;line-height:1.04;letter-spacing:-.034em;color:#fff;max-width:1020px}
.bd-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.bd-meta__author{display:flex;align-items:center;gap:10px}
.bd-avatar{width:38px;height:38px;border-radius:50%;background:rgba(244,160,0,.18);
  border:1px solid rgba(244,160,0,.4);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--gold)}
.bd-meta__name{font-size:14.5px;color:var(--text);font-weight:600}
.bd-meta__dim{font-size:14px;color:var(--text-dim)}
.bd-pill{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;
  padding:5px 11px;border-radius:100px;background:rgba(244,160,0,.12);border:1px solid rgba(244,160,0,.26)}
.bd-reviewed{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--green);
  padding:5px 12px;border-radius:100px;background:rgba(79,191,160,.08);border:1px solid rgba(79,191,160,.3)}
.bd-share--hero{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.bd-share__k,.bd-card__k{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.bd-sharebtn{font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);color:var(--text-soft);transition:border-color .3s,color .3s}
.bd-sharebtn:hover{border-color:rgba(244,160,0,.5);color:#fff}
.bd-sharebtn[data-copied]{border-color:rgba(79,191,160,.5);color:var(--green)}
.bd-sharebtn svg{width:15px;height:15px;display:block}
.bd-hero__img{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02)}
.bd-hero__img img{width:100%;height:auto;display:block}

/* Layout: article + sticky aside */
.bd-layout{max-width:1330px;margin:56px auto 0;padding:0 40px}
.bd-layout__grid{display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:start}
.bd-prose{overflow-x:clip;min-width:0}
.bd-aside{position:sticky;top:106px;display:grid;gap:14px;align-self:start;
  max-height:calc(100vh - 122px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
  padding-right:2px}
.bd-aside::-webkit-scrollbar{width:5px}
.bd-aside::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.bd-aside::-webkit-scrollbar-track{background:transparent}
.bd-card{border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);padding:20px 22px}
.bd-toc__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.bd-toc__pct{display:inline-flex;align-items:baseline;gap:5px;font-size:12px;color:var(--gold);font-weight:700}
.bd-toc__pct span:last-child{color:var(--text-dim);font-weight:500}
.bd-toc__box{max-height:320px;overflow:auto;display:grid;gap:2px;padding-right:6px}
.bd-toc__box a{font-size:13.5px;line-height:1.45;color:var(--text-soft);padding:7px 10px;border-radius:8px;
  border-left:2px solid rgba(255,255,255,.1);transition:color .3s,background .3s,border-color .3s}
.bd-toc__box a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.bd-toc__box a[data-active]{color:var(--gold);border-left-color:var(--gold);background:rgba(244,160,0,.07)}
.bd-sharecard{display:flex;align-items:center;gap:8px;padding:16px 22px}
.bd-sharecard .bd-card__k{margin-right:auto}
.bd-asidecta{position:relative;overflow:hidden;border-radius:18px;padding:24px 24px 20px;
  background:linear-gradient(165deg,rgba(244,160,0,.14),rgba(244,160,0,.03) 55%,rgba(255,255,255,.02));
  border:1px solid rgba(244,160,0,.4);
  box-shadow:0 18px 50px rgba(244,160,0,.1),inset 0 1px 0 rgba(255,255,255,.08)}
.bd-asidecta::before{content:"";position:absolute;top:-70px;right:-70px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(244,160,0,.22),transparent 65%);pointer-events:none}
.bd-asidecta__k{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:12px}
.bd-asidecta__k b{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold)}
.bd-asidecta__t{font-family:var(--font-head);font-weight:800;font-size:21px;line-height:1.12;
  letter-spacing:-.02em;color:var(--text);margin-bottom:9px}
.bd-asidecta p{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--text-mid)}
.bd-asidecta__btn{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:var(--ink);font-size:14.5px;font-weight:600;border-radius:100px;
  height:48px;box-shadow:0 10px 30px rgba(244,160,0,.28);transition:background .3s}
.bd-asidecta__btn span{transition:transform .3s}
.bd-asidecta__btn:hover{background:var(--gold-hover);color:var(--ink)}
.bd-asidecta__btn:hover span{transform:translateX(3px)}
.bd-asidecta__sms{display:block;margin-top:13px;text-align:center;font-size:12.5px;color:var(--text-dim)}
.bd-asidecta__smslink{color:var(--text-soft);font-weight:600}
.bd-asidecta__smslink:hover{color:var(--gold)}

/* Prose — the design's article typography over CMS HTML */
.bd-prose p{margin:0 0 15px;font-size:16.5px;line-height:1.72;color:var(--text-mid)}
.bd-prose strong{color:var(--text);font-weight:600}
.bd-prose a{color:var(--gold)}
.bd-prose a:hover{color:var(--gold-hover)}
.bd-prose h2{margin:0 0 16px;font-weight:800;font-size:31px;line-height:1.12;letter-spacing:-.025em;color:var(--text);scroll-margin-top:158px}
/* prose h3 styling skips component-built headings (card titles keep
   real h3 tags for the document outline, styled by their own class) */
.bd-prose h3:not([class]){margin:30px 0 12px;font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.018em;color:var(--text)}
.bd-prose h3.rb-faq__q,.bd-prose h3.rb-mistake__t,.bd-prose h3.rb-ind__k,.bd-prose h3.rb-next__t{margin:0;letter-spacing:0;line-height:inherit}
.bd-prose img{max-width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.1);display:block}
.bd-prose figure{margin:22px 0 26px}
.bd-prose figcaption{font-size:13.5px;color:var(--text-dim);margin-top:10px}
.rb-secnum{display:flex;align-items:center;gap:14px;margin:56px 0 14px}
.rb-secnum__chip{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  letter-spacing:.1em;color:var(--gold);padding:6px 11px;border:1px solid rgba(244,160,0,.35);
  border-radius:8px;background:rgba(244,160,0,.08)}
.rb-secnum__line{flex:1 1 0;height:1px;background:linear-gradient(90deg,rgba(244,160,0,.4),transparent)}
/* ul markers: bold gold chevrons (the brand arrow motif), drawn with
   borders so they stay crisp at any zoom; nested lists hang off a soft
   gold guide line with hollow-dot markers */
.bd-prose ul{list-style:none;display:grid;gap:9px;margin:4px 0 20px;padding:0}
.bd-prose ul li{position:relative;padding-left:25px;font-size:16px;line-height:1.66;color:var(--text-mid)}
.bd-prose ul li::before{content:"\25C6";position:absolute;left:0;top:.44em;color:var(--gold);
  font-size:15px;line-height:1}
.bd-prose ul li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0}
.bd-prose ul ul{margin:10px 0 2px;border-left:1.5px solid rgba(244,160,0,.22);
  margin-left:4px;padding-left:16px;gap:8px}
.bd-prose ul ul li{padding-left:20px;font-size:15.5px}
.bd-prose ul ul li::before{content:"";width:7px;height:7px;border:1.5px solid rgba(244,160,0,.75);
  border-radius:50%;left:2px;top:.5em}
.bd-prose ul li strong:first-child{color:var(--text)}
.bd-prose ol{margin:4px 0 22px;padding-left:0;display:grid;gap:0;counter-reset:rbol;
  border-left:2px solid rgba(244,160,0,.22)}
.bd-prose ol li{counter-increment:rbol;position:relative;list-style:none;font-size:16px;
  line-height:1.66;color:var(--text-mid);padding:9px 0 9px 52px}
.bd-prose ol li::before{content:counter(rbol,decimal-leading-zero);position:absolute;left:16px;
  top:.82em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  letter-spacing:.05em;color:var(--gold);font-weight:600}
.bd-prose ol li strong:first-child{color:var(--text)}
/* long lists (10+ items) flow into two balanced columns */
.bd-prose .rb-cols{display:block;columns:2;column-gap:40px}
.bd-prose .rb-cols li{break-inside:avoid;margin-bottom:9px}
.bd-prose ol.rb-cols{border-left:0;column-rule:1px solid rgba(255,255,255,.08)}
.bd-prose ol.rb-cols li{padding-left:44px}
.bd-prose ol.rb-cols li::before{left:8px}
@media (max-width:700px){
  .bd-prose .rb-cols{columns:1}
  .bd-prose ol.rb-cols{border-left:2px solid rgba(244,160,0,.22)}
}
.bd-prose blockquote{margin:26px 0 30px;padding:18px 26px;border-left:5px solid var(--gold);
  border-radius:0 14px 14px 0;background:rgba(255,255,255,.024)}
.bd-prose blockquote p{margin:0;color:var(--text)}
/* ---- Callout system (editorial spec 2026-09-15): single cell, thick
   left border, tinted cell, small-caps key line. Summary (amber, rotating
   title), Tip (teal), Warning (coral), Note (blue-grey, quiet), Formula
   (white key, amber operators, teal worked example), Action (legacy
   amber), Disclaimer (untinted, deliberately quiet). ---- */
.bd-prose .article-callout{margin:26px 0 30px;padding:22px 26px;border-radius:14px;
  background:rgba(244,160,0,.07);border:1px solid rgba(244,160,0,.3);border-left:5px solid var(--gold)}
.bd-prose .article-callout p{margin:0;font-size:16px;line-height:1.66;color:var(--text)}
.bd-prose .article-callout p + p{margin-top:10px}
.bd-prose .article-callout__k{display:block;font-size:12px;letter-spacing:.14em;font-weight:700;
  color:var(--gold);margin-bottom:10px}
.bd-prose .article-callout__t{display:block;font-family:var(--font-head);font-weight:700;
  font-size:17px;letter-spacing:-.014em;color:var(--text);margin:-4px 0 9px}
.bd-prose .article-callout--summary{background:rgba(244,160,0,.07);border-color:rgba(244,160,0,.3);border-left-color:var(--gold)}
.bd-prose .article-callout--tip{background:rgba(79,191,160,.06);border-color:rgba(79,191,160,.3);border-left-color:var(--green)}
.bd-prose .article-callout--tip .article-callout__k{color:var(--green)}
.bd-prose .article-callout--warning{background:rgba(255,122,107,.06);border-color:rgba(255,122,107,.3);border-left-color:var(--red)}
.bd-prose .article-callout--warning .article-callout__k{color:var(--red)}
.bd-prose .article-callout--note{background:rgba(122,136,153,.07);border-color:rgba(122,136,153,.3);border-left-color:#8B9BB0}
.bd-prose .article-callout--note .article-callout__k{color:#8B9BB0}
.bd-prose .article-callout--action{background:rgba(244,160,0,.07);border-color:rgba(244,160,0,.3);border-left-color:var(--gold)}
.bd-prose .article-callout--formula{background:rgba(255,255,255,.024);border-color:rgba(255,255,255,.14);border-left-color:#F0F0EC}
.bd-prose .article-callout--formula .article-callout__k{color:var(--text)}
.bd-prose .article-callout__f{padding:14px 18px;border-radius:12px;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.12);font-family:var(--font-head);font-weight:700;
  font-size:17px;letter-spacing:-.01em;color:var(--text)}
.bd-prose p.article-callout__f + p{margin-top:12px}
.bd-prose .article-callout__f b{color:var(--gold);font-weight:700;padding:0 2px}
.bd-prose .article-callout__ex{padding:12px 18px;border-radius:12px;background:rgba(79,191,160,.08);
  border:1px solid rgba(79,191,160,.3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.5px;color:var(--green)}
.bd-prose .article-callout--disclaimer{background:none;border:1px solid rgba(255,255,255,.1);
  border-left:1px solid rgba(255,255,255,.1);padding:18px 22px}
.bd-prose .article-callout--disclaimer .article-callout__k{color:var(--text-dim);margin-bottom:8px}
.bd-prose .article-callout--disclaimer p{font-size:14.5px;color:var(--text-dim)}

/* ---- Mid-article CTA band ---- */
.bd-prose .bd-midcta{display:flex;align-items:center;gap:28px;margin:34px 0 38px;
  padding:26px 30px;border-radius:16px;border:1px solid rgba(244,160,0,.4);
  background:linear-gradient(120deg,rgba(244,160,0,.09),rgba(244,160,0,.03))}
.bd-prose .bd-midcta__body{flex:1 1 auto;min-width:0}
.bd-prose .bd-midcta__t{font-family:var(--font-head);font-weight:700;font-size:21px;
  letter-spacing:-.018em;color:var(--text);margin-bottom:6px}
.bd-prose .bd-midcta p{margin:0;font-size:15px;line-height:1.55;color:var(--text-mid)}
.bd-prose .bd-midcta__btn{flex:0 0 auto;color:var(--ink)}
.bd-prose .bd-midcta__btn:hover{color:var(--ink)}
@media (max-width:700px){
  .bd-prose .bd-midcta{flex-direction:column;align-items:stretch;gap:16px;padding:22px 20px;text-align:left}
  .bd-prose .bd-midcta__btn{justify-content:center}
}
.rb-tablewrap{margin:22px 0 26px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:var(--bg-deep);overflow:hidden;width:fit-content;max-width:100%}
.rb-tablewrap[class*="rb-table--"]{width:100%}
/* typed side-by-side tables: even columns instead of content-greedy ones */
.rb-table--comparison table,.rb-table--proscons table,.rb-table--tradeoffs table,
.rb-table--quickref table{table-layout:fixed;width:100%}
.rb-tablewrap__scroll{overflow-x:auto}
/* scroll cue: an edge shade on whichever side has more table (set by
   the script only when the table really overflows) */
.rb-tablewrap{position:relative}
.rb-tablewrap::before,.rb-tablewrap::after{content:"";position:absolute;top:0;bottom:0;width:28px;
  pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.rb-tablewrap::before{left:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent)}
.rb-tablewrap::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.55),transparent)}
.rb-tablewrap.can-left::before,.rb-tablewrap.can-right::after{opacity:1}
.rb-tablewrap__scroll[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.rb-tablewrap figure{margin:0}
.bd-prose table{width:100%;min-width:560px;border-collapse:collapse;margin:0}
.bd-prose th{padding:13px 18px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#E9E9E5;font-weight:700;text-align:left;background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.14)}
.bd-prose td{padding:13px 18px;font-size:15.5px;line-height:1.6;color:#E2E2DE;
  border-top:1px solid rgba(255,255,255,.09);vertical-align:top}
.bd-prose tr:nth-child(even) td{background:rgba(255,255,255,.045)}
.bd-prose td p,.bd-prose th p{margin:0;font-size:inherit;line-height:inherit;color:inherit}

/* ---- Editorial table styles (9 types, chosen with a "TABLE: <name>"
   marker line above the table, or the editor's Table style tool).
   :first-child:nth-last-child(n) selects by column count, so the same
   type works at 2 or 3 columns. ---- */

/* Comparison + Pros/Cons: teal side vs coral side, unmistakably.
   2 col: first teal, last coral. 3 col (Factor | X | Y): middle teal,
   last coral. Headers get strong bands + accent borders, and the data
   columns carry the tint all the way down. */
.rb-table--comparison th:last-child,.rb-table--proscons th:last-child{
  color:var(--red);background:rgba(255,122,107,.12);
  border-top:2px solid rgba(255,122,107,.6)}
.rb-table--comparison th:first-child:nth-last-child(2),
.rb-table--proscons th:first-child:nth-last-child(2),
.rb-table--comparison th:nth-child(2):nth-last-child(2),
.rb-table--proscons th:nth-child(2):nth-last-child(2){
  color:var(--green);background:rgba(79,191,160,.12);
  border-top:2px solid rgba(79,191,160,.6)}
.rb-table--comparison td:last-child,.rb-table--proscons td:last-child{
  background:rgba(255,122,107,.045);color:var(--text-dim)}
.rb-table--comparison td:first-child:nth-last-child(2),
.rb-table--proscons td:first-child:nth-last-child(2),
.rb-table--comparison td:nth-child(2):nth-last-child(2),
.rb-table--proscons td:nth-child(2):nth-last-child(2){
  background:rgba(79,191,160,.05);color:var(--text)}

/* Trade-offs: same reading, quieter — coloured header text only */
.rb-table--tradeoffs th:last-child{color:var(--red)}
.rb-table--tradeoffs th:nth-child(2):nth-last-child(2),
.rb-table--tradeoffs th:first-child:nth-last-child(2){color:var(--green)}

/* Cost breakdown: gold header band, strong service column, prices
   right-aligned in gold tabular digits */
.rb-table--cost th{background:rgba(244,160,0,.09);color:var(--gold);
  border-bottom-color:rgba(244,160,0,.3)}
.rb-table--cost td:first-child{color:var(--text);font-weight:600}
.rb-table--cost th:last-child,.rb-table--cost td:last-child{text-align:right}
.rb-table--cost td:last-child{color:var(--gold);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Checklist: ops-schedule look — gold header band, boxed ticks on the
   task column, mono cadence column, row hover */
.rb-table--checklist th{background:rgba(244,160,0,.12);color:var(--gold);
  border-bottom-color:rgba(244,160,0,.35);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase}
.rb-table--checklist td:first-child{color:var(--text);font-weight:600}
.rb-table--checklist td:first-child::before{content:"\2713";display:inline-flex;
  width:19px;height:19px;align-items:center;justify-content:center;border-radius:6px;
  border:1.5px solid rgba(244,160,0,.55);background:rgba(244,160,0,.08);color:var(--gold);
  font-size:10.5px;font-weight:700;margin-right:11px;vertical-align:-4px}
.rb-table--checklist td:nth-child(2){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--text-mid)}
.rb-table--checklist tr:hover td{background:rgba(244,160,0,.03)}

/* Benchmarks: bright header band; the target column is the point —
   teal on a teal tint, tabular digits */
.rb-table--benchmarks th{background:rgba(255,255,255,.08);color:#F0F0EC}
.rb-table--benchmarks td{font-variant-numeric:tabular-nums}
.rb-table--benchmarks td:first-child{color:var(--text);font-weight:600}
.rb-table--benchmarks th:last-child{color:var(--green);background:rgba(79,191,160,.09)}
.rb-table--benchmarks td:last-child{color:var(--green);font-weight:600}

/* Decision matrix: scores centred and tabular, option column strong */
.rb-table--matrix td:first-child{color:var(--text);font-weight:600}
.rb-table--matrix th:not(:first-child),.rb-table--matrix td:not(:first-child){
  text-align:center;font-variant-numeric:tabular-nums}

/* Quick reference: Q&A rows — Q chips on the questions, quiet
   uppercase header, divider before the answers */
.rb-table--quickref{background:rgba(255,255,255,.014)}
.rb-table--quickref table{min-width:0}
.rb-table--quickref th{background:transparent;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim)}
.rb-table--quickref td:first-child{position:relative;color:var(--text);font-weight:600;width:42%;
  padding-left:52px}
.rb-table--quickref td:first-child::before{content:"Q";position:absolute;left:18px;top:15px;
  display:flex;width:20px;height:20px;align-items:center;justify-content:center;
  border-radius:7px;background:rgba(244,160,0,.12);border:1px solid rgba(244,160,0,.45);
  color:var(--gold);font-size:11px;font-weight:800}
.rb-table--quickref td:last-child{color:var(--text-mid);border-left:1px solid rgba(255,255,255,.07)}
.rb-table--quickref td{padding:16px 18px}
.rb-table--quickref tr:hover td{background:rgba(244,160,0,.03)}

/* Red flags: coral frame, coral headers — the warning table */
.rb-table--redflags{border-color:rgba(255,122,107,.35)}
.rb-table--redflags th{color:var(--red);background:rgba(255,122,107,.06)}
.rb-table--redflags td:first-child{color:var(--text);font-weight:600}
.rb-faq{position:relative;display:block;margin:0 0 12px;padding:16px 20px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.12)}
.rb-faq__chip{position:absolute;left:20px;top:17px;width:24px;height:24px;border-radius:7px;
  background:rgba(244,160,0,.13);border:1px solid rgba(244,160,0,.45);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:12px;color:var(--gold)}
.rb-faq__body{min-width:0;position:relative}
.rb-faq__q{position:relative;font-size:16.5px;font-weight:600;color:var(--text);
  margin-bottom:6px;padding-left:34px;padding-right:26px;line-height:1.4}
.rb-faq__body p{margin:0;font-size:15.5px;line-height:1.64;color:var(--text-mid)}
.rb-faq__body p + p{margin-top:8px}
/* accordion (armed by JS; no-JS leaves everything visible) */
.rb-faq.has-acc .rb-faq__q{cursor:pointer;-webkit-tap-highlight-color:transparent;margin-bottom:0}
.rb-faq__btn{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;
  font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
/* the whole card row is the target: the button's box covers the h3,
   padding and chevron included */
.rb-faq__btn::before{content:"";position:absolute;inset:-6px 0}
.rb-faq__btn:focus-visible{outline:none}
.rb-faq__btn:focus-visible::before{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.rb-faq.has-acc .rb-faq__q::after{content:"";position:absolute;right:4px;top:8px;width:8px;
  height:8px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
  transform:rotate(45deg);transition:transform .25s}
.rb-faq.has-acc.is-open .rb-faq__q::after{transform:rotate(225deg);top:12px}
.rb-faq.has-acc .rb-faq__body>:not(.rb-faq__q){display:none}
.rb-faq.has-acc.is-open .rb-faq__body>:not(.rb-faq__q){display:block}
.rb-faq.has-acc.is-open .rb-faq__q{margin-bottom:0}
.rb-faq.has-acc.is-open .rb-faq__body>p:first-of-type,
.rb-faq.has-acc.is-open .rb-faq__body>:not(.rb-faq__q):first-of-type{margin-top:10px}

/* Related articles */
.bd-related{max-width:1240px;margin:80px auto 0;padding:0 40px}
.bd-related__head{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:22px}
.bd-related__head h2{margin:0;font-weight:800;font-size:34px;letter-spacing:-.028em}
.bd-related__head a{font-size:15px;font-weight:600;white-space:nowrap}
.bd-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bd-relcard{display:block;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);color:inherit;
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s}
.bd-relcard:hover{transform:translateY(-6px);border-color:rgba(244,160,0,.35);color:inherit}
.bd-relcard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:1px solid rgba(255,255,255,.1)}
.bd-relcard__body{display:block;padding:18px 20px}
.bd-relcard__cat{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px}
.bd-relcard__title{display:block;font-family:var(--font-head);font-weight:700;font-size:16.5px;line-height:1.3;letter-spacing:-.012em;color:var(--text)}

/* ------------------------------------------------------------
   Author bio card — end of the article body (Authors in the CMS)
   ------------------------------------------------------------ */
.bd-author{display:flex;gap:24px;align-items:center;margin-top:52px;padding:28px 30px;
  border-radius:20px;background:linear-gradient(150deg,rgba(244,160,0,.07),rgba(255,255,255,.02));
  border:1px solid rgba(244,160,0,.28)}
.bd-author__photo{position:relative;flex:0 0 auto;width:92px;height:92px;border-radius:50%;
  overflow:hidden;border:2px solid rgba(244,160,0,.55);box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;background:rgba(244,160,0,.12)}
/* full-specificity reset: the generic .bd-prose img rules (max-width
   :100%, height:auto, radius, border) leaked in and capped the bleed —
   the image shifted -3px but stayed 100% wide, leaving the right-side
   gap (external review 2026-09-17) */
.bd-prose .bd-author__photo img,.bd-author__photo img{position:absolute;inset:-3px;
  width:calc(100% + 6px);max-width:none;height:calc(100% + 6px);
  border-radius:0;border:0;object-fit:cover;display:block}
.bd-avatar{overflow:hidden}
.bd-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
  transform:scale(1.08)}
.bd-author__photo span{font-family:var(--font-head);font-weight:800;font-size:28px;color:var(--gold)}
.bd-author__body{min-width:0}
.bd-author__k{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:7px}
.bd-author__name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:-.018em;
  color:var(--text);margin-bottom:9px}
.bd-author__name em{font-style:normal;font-family:var(--font-body);font-weight:500;
  font-size:13px;color:var(--text-dim)}
.bd-author p{margin:0;font-size:15px;line-height:1.62;color:var(--text-mid)}
.bd-author__ln{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--gold)}
@media (max-width:700px){
  .bd-author{flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px 20px}
  .bd-author__name{justify-content:center}
}

/* ------------------------------------------------------------
   Sources / references — reading-list rows: ↗ chip, upright link
   title + source-domain tag, muted note
   ------------------------------------------------------------ */
.bd-prose ul.rb-sources{margin:12px 0 30px;padding:6px 4px;display:grid;gap:4px}
.bd-prose .rb-sources li{list-style:none;display:flex;gap:16px;align-items:flex-start;
  padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09);transition:border-color .3s,background .3s}
.bd-prose .rb-sources li:hover{border-color:rgba(244,160,0,.35);background:rgba(244,160,0,.04)}
.bd-prose .rb-sources li::before{display:none}
.rb-sources__go{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;font-size:14px;color:var(--gold);
  background:rgba(244,160,0,.1);border:1px solid rgba(244,160,0,.35);
  transition:transform .3s,background .3s}
.bd-prose .rb-sources li:hover .rb-sources__go{transform:translate(2px,-2px);
  background:rgba(244,160,0,.2)}
.rb-sources__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.rb-sources__top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bd-prose a.rb-sources__t{font-weight:600;font-style:normal;font-size:15px;line-height:1.4;
  color:var(--text);text-decoration:none}
.bd-prose .rb-sources li:hover a.rb-sources__t{color:var(--gold)}
.rb-sources__host{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.05em;color:var(--text-dim);padding:2px 8px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);white-space:nowrap}
.rb-sources__d{font-size:13.5px;font-style:normal;line-height:1.55;color:var(--text-dim)}
@media (max-width:700px){
  .bd-prose .rb-sources li{padding:12px 12px;gap:12px}
  .rb-sources__go{width:26px;height:26px;font-size:12px}
  .bd-prose a.rb-sources__t{font-size:14px}
}

/* ------------------------------------------------------------
   Step runs ("Step 1: ...", "Day 3: ...") — a two-up card grid with
   ghost corner numbers, deliberately NOT another list
   ------------------------------------------------------------ */
.bd-prose .rb-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 32px}
.bd-prose .rb-step{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:7px;
  padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);transition:border-color .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.bd-prose .rb-step:hover{border-color:rgba(244,160,0,.35);transform:translateY(-3px)}
.rb-step__no{position:absolute;top:2px;right:14px;font-family:var(--font-head);font-weight:800;
  font-size:56px;letter-spacing:-.04em;line-height:1.15;color:rgba(244,160,0,.16);pointer-events:none}
.rb-step__kind{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  letter-spacing:.12em;color:var(--gold);font-weight:600}
.rb-step__t{font-family:var(--font-head);font-weight:700;font-size:16.5px;letter-spacing:-.014em;
  color:var(--text);line-height:1.3;padding-right:44px}
.bd-prose .rb-step__body p{margin:0;font-size:14px;line-height:1.6;color:var(--text-mid)}
.rb-step__body{display:flex;flex-direction:column;gap:7px}
.bd-prose .rb-step:last-child:nth-child(odd){grid-column:1/-1}
/* long runs (7+): tighter three-up cards so 30 steps don't become a wall */
.bd-prose .rb-steps--dense{grid-template-columns:repeat(3,1fr);gap:10px}
.bd-prose .rb-steps--dense .rb-step{padding:16px 16px;gap:5px}
.bd-prose .rb-steps--dense .rb-step__no{font-size:40px;right:10px}
.bd-prose .rb-steps--dense .rb-step__t{font-size:14.5px;padding-right:30px}
.bd-prose .rb-steps--dense .rb-step__kind{font-size:12px}
.bd-prose .rb-steps--dense .rb-step__body p{font-size:13px}
.bd-prose .rb-steps--dense .rb-step:last-child:nth-child(odd){grid-column:auto}
.bd-prose .rb-steps--dense .rb-step:last-child:nth-child(3n+1){grid-column:1/-1}
@media (max-width:1020px){
  .bd-prose .rb-steps--dense{grid-template-columns:1fr 1fr}
  .bd-prose .rb-steps--dense .rb-step:last-child:nth-child(3n+1){grid-column:auto}
  .bd-prose .rb-steps--dense .rb-step:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:700px){
  .bd-prose .rb-steps,.bd-prose .rb-steps--dense{grid-template-columns:1fr;gap:10px}
  .bd-prose .rb-step:last-child:nth-child(odd),
  .bd-prose .rb-steps--dense .rb-step:last-child:nth-child(3n+1){grid-column:auto}
  .rb-step__no{font-size:44px}
}

/* ------------------------------------------------------------
   Phase boards ("Days 1 to 30: research") — range chip + title header,
   compact task rows (two columns at 6+)
   ------------------------------------------------------------ */
.bd-prose .rb-phase{margin:22px 0 26px;border-radius:16px;background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.12);overflow:hidden}
.rb-phase__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;
  background:rgba(244,160,0,.06);border-bottom:1px solid rgba(244,160,0,.25)}
.rb-phase__chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  letter-spacing:.1em;color:var(--gold);font-weight:600;padding:6px 14px;border-radius:100px;
  border:1px solid rgba(244,160,0,.5);background:rgba(244,160,0,.08);white-space:nowrap}
.rb-phase__t{font-family:var(--font-head);font-weight:700;font-size:16.5px;
  letter-spacing:-.014em;color:var(--text)}
.rb-phase__items{padding:14px 20px 18px;display:grid;gap:2px}
.rb-phase__items--cols{grid-template-columns:1fr 1fr;gap:2px 32px}
.rb-phase__item{position:relative;padding:7px 0 7px 20px;font-size:14px;line-height:1.55;
  color:var(--text-mid)}
.rb-phase__item::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);border-radius:.5px}
/* runs of 2+ boards become a side-by-side card set: short task lists
   fill the row instead of leaving the right half of the page empty */
.bd-prose .rb-phaseset{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);
  gap:14px;margin:24px 0 28px}
.rb-phaseset .rb-phase{margin:0;display:flex;flex-direction:column}
.rb-phaseset .rb-phase__head{padding:14px 16px;gap:10px}
.rb-phaseset .rb-phase__chip{font-size:12px;padding:5px 12px}
.rb-phaseset .rb-phase__t{font-size:15px}
.rb-phaseset .rb-phase__lede{padding:12px 16px 0}
.rb-phaseset .rb-phase__items{padding:12px 16px 16px;grid-template-columns:1fr;align-content:start;flex:1}
@media (max-width:700px){
  .rb-phase__items--cols{grid-template-columns:1fr}
  .rb-phase__head{padding:13px 16px}
  .rb-phase__items{padding:12px 16px 14px}
  .bd-prose .rb-phaseset{grid-template-columns:1fr;gap:12px}
}

/* ------------------------------------------------------------
   Checklist cards — single-column "Check" tables become tick-box
   audits (empty boxes: the reader marks pass/fail themselves)
   ------------------------------------------------------------ */
.bd-prose .rb-checklist{display:grid;gap:2px;margin:20px 0 28px;padding:8px 4px;
  border-radius:14px}
.bd-prose .rb-checklist--cols{grid-template-columns:1fr 1fr;gap:2px 32px}
.rb-checkrow{display:flex;align-items:flex-start;gap:12px;padding:9px 6px;border-radius:9px;
  font-size:14.5px;line-height:1.55;color:var(--text-mid);transition:background .25s,color .25s}
.rb-checkrow:hover{background:rgba(244,160,0,.05);color:var(--text)}
/* two-column audit tables (Check | What to verify) get rows with a
   verify sub-line instead of remaining tables */
.rb-checkrow__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.rb-checkrow__t{font-weight:600;color:var(--text);font-size:15px;line-height:1.45}
.rb-checkrow__sub{font-size:13.5px;color:var(--text-dim);line-height:1.55}
.rb-checkbox{flex:0 0 auto;width:17px;height:17px;margin-top:3px;border-radius:5px;
  border:1.5px solid rgba(244,160,0,.55);background:rgba(244,160,0,.06)}
@media (max-width:700px){
  .bd-prose .rb-checklist--cols{grid-template-columns:1fr}
}

/* ---- phase board lede line ---- */
.rb-phase__lede{margin:0;padding:12px 20px 0;font-size:14px;color:var(--text-dim);font-style:normal}

/* ------------------------------------------------------------
   Mistake cards — two-up coral grid from "mistakes" sections
   ------------------------------------------------------------ */
.bd-prose .rb-mistakes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 30px}
.bd-prose .rb-mistake{position:relative;display:flex;flex-direction:column;gap:7px;
  padding:18px 20px;border-radius:14px;background:rgba(255,122,107,.04);
  border:1px solid rgba(255,122,107,.22);border-top:2px solid rgba(255,122,107,.5)}
.rb-mistake__x{position:absolute;top:14px;right:16px;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--red);
  background:rgba(255,122,107,.1);border:1px solid rgba(255,122,107,.35)}
.rb-mistake__t{font-family:var(--font-head);font-weight:700;font-size:15.5px;
  letter-spacing:-.012em;color:var(--text);line-height:1.3;padding-right:34px}
.bd-prose .rb-mistake p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-mid)}
.bd-prose .rb-mistake:last-child:nth-child(odd){grid-column:1/-1}

/* ------------------------------------------------------------
   Question grids ("1. What problem are we trying to solve?")
   ------------------------------------------------------------ */
.bd-prose .rb-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 30px}
.bd-prose .rb-q{display:flex;align-items:flex-start;gap:13px;padding:15px 18px;
  border-radius:13px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12)}
.rb-q__no{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-head);font-weight:800;font-size:13px;
  color:var(--gold);background:rgba(244,160,0,.1);border:1px solid rgba(244,160,0,.4)}
.rb-q__t{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.45;padding-top:3px}
.bd-prose .rb-qgrid--bad .rb-q{border-top:2px solid rgba(255,122,107,.45)}
.rb-qgrid--bad .rb-q__no{color:var(--red);background:rgba(255,122,107,.08);
  border-color:rgba(255,122,107,.4)}

/* ------------------------------------------------------------
   Next steps: one consistent numbered action path after the FAQ
   ------------------------------------------------------------ */
/* v4: milestone stepper — numbered gold discs on a continuous rail,
   panel-framed, full paragraph room (user: "design it, don't leave
   it as is"; items can be heading + paragraphs) */
.bd-prose .rb-next{position:relative;display:grid;margin:28px 0 34px;
  padding:10px 26px 10px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(244,160,0,.045),rgba(255,255,255,.015) 45%);
  border:1px solid rgba(244,160,0,.28)}
.rb-next__item{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);
  gap:20px;padding:22px 0}
.rb-next__item + .rb-next__item{border-top:1px solid rgba(255,255,255,.07)}
/* the rail runs disc-to-disc down the whole path */
.rb-next__item::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(244,160,0,.45),rgba(244,160,0,.2))}
.rb-next__item:first-child::before{top:24px}
.rb-next__item:last-child::before{bottom:calc(100% - 46px)}
.rb-next__no{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:800;
  color:var(--gold);background:#141518;border:2px solid rgba(244,160,0,.6);
  box-shadow:0 0 0 5px rgba(244,160,0,.07);transition:background .3s,color .3s}
.rb-next__item:hover .rb-next__no{background:var(--gold);color:#141518}
.rb-next__item:last-child .rb-next__no{background:var(--gold);color:#141518;
  box-shadow:0 0 0 5px rgba(244,160,0,.14),0 8px 22px rgba(244,160,0,.25)}
.rb-next__body{display:flex;flex-direction:column;gap:7px;min-width:0;padding-top:8px}
.rb-next__t{font-family:var(--font-head);font-weight:700;font-size:17.5px;color:var(--text);
  line-height:1.35;letter-spacing:-.015em}
.rb-next__d,.bd-prose .rb-next__body p{margin:0;font-size:15px;color:var(--text-mid);
  line-height:1.66}
.bd-prose .rb-next__body ul{margin:4px 0 0}

/* ------------------------------------------------------------
   Fix cards: Mistake | Why | Better approach tables re-drawn as
   coral → teal cards
   ------------------------------------------------------------ */
.bd-prose .rb-fixes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 30px}
.bd-prose .rb-fix{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02)}
.rb-fix__bad{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;
  background:rgba(255,122,107,.08);border-bottom:1px solid rgba(255,122,107,.25)}
.rb-fix__bad>span{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--text);
  line-height:1.4}
.rb-fix__mark{font-style:normal;font-weight:700;flex:0 0 auto;width:20px;height:20px;
  border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;
  margin-top:1px}
.rb-fix__bad .rb-fix__mark{color:var(--red);background:rgba(255,122,107,.15)}
.rb-fix__why{margin:0;padding:12px 16px 2px;font-size:13.5px;color:var(--text-dim);line-height:1.6}
.rb-fix__good{display:flex;gap:11px;align-items:flex-start;padding:12px 16px 16px;margin-top:auto}
.rb-fix__good .rb-fix__mark{color:var(--green);background:rgba(79,191,160,.13)}
.rb-fix__good>span{font-size:14px;color:var(--text-mid);line-height:1.55}

/* ------------------------------------------------------------
   Industry example cards (2-up, linked titles → industry pages)
   ------------------------------------------------------------ */
.bd-prose .rb-inds{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 30px}
.bd-prose .rb-ind{display:flex;flex-direction:column;gap:8px;padding:18px 20px;
  border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.12);
  transition:border-color .3s,transform .3s}
.bd-prose .rb-ind:hover{border-color:rgba(244,160,0,.4);transform:translateY(-2px)}
.rb-ind__k{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;
  font-size:16px;color:var(--text);line-height:1.3}
.bd-prose .rb-ind__k a{color:var(--gold);text-decoration:none;border-bottom:0}
.bd-prose .rb-ind__k a:hover{text-decoration:underline}
.rb-ind__go{font-style:normal;font-size:12px;color:var(--gold);opacity:.8}
.bd-prose .rb-ind p{margin:0;font-size:14px;color:var(--text-mid);line-height:1.6}

/* ------------------------------------------------------------
   Search-term / keyword chips (quoted lists in Ads articles);
   --neg (negative keywords) flips them coral
   ------------------------------------------------------------ */
.bd-prose .rb-terms{position:relative;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:24px 0 28px;padding:22px 18px 18px;border-radius:14px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.09)}
.rb-terms__tag{position:absolute;top:-10px;left:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--gold);
  padding:3px 11px;border-radius:100px;background:#141518;border:1px solid rgba(244,160,0,.45)}
.rb-terms--neg .rb-terms__tag{color:var(--red);border-color:rgba(255,122,107,.5)}
.rb-term{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  background:#141518;border:1px solid rgba(255,255,255,.15);font-size:14px;color:var(--text);
  line-height:1.3;transition:border-color .3s;cursor:default}
/* search terms read teal (user 2026-09-17), keywords gold, negatives coral */
.rb-term::before{content:"";width:13px;height:13px;flex:0 0 auto;background-size:contain;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FBFA0' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E")}
.rb-terms .rb-term{border-color:rgba(79,191,160,.35)}
.rb-terms .rb-term:hover{border-color:rgba(79,191,160,.7)}
.rb-terms>.rb-terms__tag{color:var(--green);border-color:rgba(79,191,160,.5)}
.rb-terms--kw .rb-term{border-color:rgba(244,160,0,.35)}
.rb-terms--kw .rb-term:hover{border-color:rgba(244,160,0,.6)}
.rb-terms--kw>.rb-terms__tag{color:var(--gold);border-color:rgba(244,160,0,.45)}
.rb-terms--kw .rb-term::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4A000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E")}
.rb-terms--neg .rb-term{border-color:rgba(255,122,107,.3)}
.bd-prose .rb-terms--neg{border-color:rgba(255,122,107,.22)}
.rb-terms--neg .rb-term{border-color:rgba(255,122,107,.3)}
.rb-terms--neg .rb-term:hover{border-color:rgba(255,122,107,.6)}
/* declared after the teal defaults so coral wins on negative panels */
.rb-terms--neg>.rb-terms__tag,.rb-terms--neg .rb-terms__tag{color:var(--red);border-color:rgba(255,122,107,.5)}
.rb-terms--neg .rb-term::before{width:12px;height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7A6B' stroke-width='2.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
.rb-terms__note{font-size:12.5px;color:var(--text-dim);line-height:1.5}

/* ------------------------------------------------------------
   Recommended tools: in-content card grid after the article body
   ------------------------------------------------------------ */
.bd-toolsgrid{margin:38px 0 8px;padding-top:26px;border-top:1px solid rgba(255,255,255,.09)}
.bd-toolsgrid__k{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
.bd-toolsgrid__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bd-toolcard{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:13px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.12);
  text-decoration:none;transition:border-color .3s,transform .3s}
.bd-toolcard:hover{border-color:rgba(244,160,0,.45);transform:translateY(-2px)}
.bd-toolcard__t{font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--text);
  line-height:1.3}
.bd-toolcard__t i{font-style:normal;color:var(--gold);transition:transform .3s;display:inline-block}
.bd-toolcard:hover .bd-toolcard__t{color:var(--gold)}
.bd-toolcard:hover .bd-toolcard__t i{transform:translateX(3px)}
.bd-toolcard__d{font-size:13.5px;color:var(--text-mid);line-height:1.55}
.bd-toolcard__free{font-size:12px;color:var(--text-dim)}
/* inline variant: authored mid-article under its own heading */
.bd-prose .bd-toolsgrid--inline{margin:18px 0 28px;padding-top:0;border-top:0}
@media (max-width:700px){
  .bd-toolsgrid__grid{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   Scaling ladders: rung cards ascending on rising pedestals
   ------------------------------------------------------------ */
.bd-prose .rb-ladder{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:0 12px;
  align-items:end;margin:26px 0 30px}
.rb-rung{display:flex;flex-direction:column;min-width:0}
.rb-rung__card{display:flex;flex-direction:column;gap:6px;padding:15px 15px 13px;
  border-radius:13px 13px 0 0;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);border-bottom:0}
.rb-rung__chip{align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--gold);
  padding:3px 9px;border-radius:100px;background:rgba(244,160,0,.09);
  border:1px solid rgba(244,160,0,.4)}
.rb-rung__t{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--text);
  line-height:1.35}
.rb-rung__d{font-size:13px;color:var(--text-mid);line-height:1.55}
.rb-rung__base{display:block;height:calc(18px + var(--i,0)*20px);border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,rgba(244,160,0,.5),rgba(244,160,0,.08));
  border:1px solid rgba(244,160,0,.35);border-top:2px solid var(--gold)}
@media (max-width:700px){
  .bd-prose .rb-ladder{grid-template-columns:1fr;gap:10px;align-items:stretch}
  .rb-rung{flex-direction:row}
  .rb-rung__card{flex:1;border-radius:0 13px 13px 0;border:1px solid rgba(255,255,255,.12);
    border-left:0}
  .rb-rung__base{height:auto;width:calc(14px + var(--i,0)*10px);border-radius:4px 0 0 4px;
    background:linear-gradient(90deg,rgba(244,160,0,.5),rgba(244,160,0,.08));
    border:1px solid rgba(244,160,0,.35);border-right:0;border-left:2px solid var(--gold);order:-1}
}

/* ------------------------------------------------------------
   "What we recommend at Elev8d": the branded recommendation panel
   ------------------------------------------------------------ */
.bd-prose .rb-rec{position:relative;margin:30px 0 34px;padding:30px 28px 24px;border-radius:18px;
  border:1.5px solid rgba(244,160,0,.5);border-left:4px solid var(--gold);
  background:radial-gradient(140% 120% at 0% 0%,rgba(244,160,0,.13),rgba(244,160,0,.03) 55%,rgba(255,255,255,.015)),#101114;
  box-shadow:0 14px 44px rgba(0,0,0,.35)}
.rb-rec__chip{position:absolute;top:-15px;left:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:800;letter-spacing:.18em;color:#141518;
  padding:7px 17px;border-radius:100px;background:var(--gold);
  box-shadow:0 8px 24px rgba(244,160,0,.4)}
.bd-prose .rb-rec>p{font-size:15px}
.bd-prose .rb-rec>p:first-of-type{color:var(--text)}
/* hairlines chunk the longer recommendations into scannable segments
   (review: an all-bold lead + unbroken paragraphs read as a wall) */
.bd-prose .rb-rec>p+p{margin-top:16px;padding-top:16px;border-top:1px dashed rgba(244,160,0,.18)}
.bd-prose .rb-rec a{color:var(--gold);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(244,160,0,.45);text-underline-offset:3px}
.bd-prose .rb-rec a:hover{text-decoration-color:var(--gold)}
.bd-prose .rb-rec>:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   Report panels: numbered metric tiers with chips
   ------------------------------------------------------------ */
.bd-prose .rb-report{position:relative;margin:28px 0 32px;padding:14px 0 0;border-radius:16px;
  background:#101114;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.3)}
.rb-report__tier:last-child{border-radius:0 0 15px 15px}
.rb-report__chip{position:absolute;top:-11px;left:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--gold);
  padding:4px 12px;border-radius:100px;background:#141518;border:1px solid rgba(244,160,0,.45)}
.rb-report__tier{display:flex;gap:22px;align-items:stretch;padding:17px 22px}
.rb-report__tier:nth-child(odd){background:rgba(255,255,255,.022)}
.rb-report__tier + .rb-report__tier{border-top:1px solid rgba(255,255,255,.07)}
.rb-report__k{flex:0 0 200px;display:flex;align-items:flex-start;gap:12px;
  font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--text);line-height:1.3;
  padding:3px 18px 0 0;border-right:1px solid rgba(255,255,255,.09)}
.rb-report__no{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:800;color:#141518;border-radius:8px;background:var(--gold);
  margin-top:-2px}
.rb-report__metrics{display:flex;flex-wrap:wrap;gap:8px;min-width:0;align-content:center}
.rb-metric{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:9px;
  background:#17181C;border:1px solid rgba(255,255,255,.13);border-left:2px solid rgba(244,160,0,.45);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--text-mid);
  line-height:1.4}
.rb-metric b{font-weight:700;color:var(--gold)}

/* ------------------------------------------------------------
   Query → page ownership map (SEO): query chips pointing at the
   page that should own them
   ------------------------------------------------------------ */
/* desktop: one shared column grid so queries, arrows, destinations and
   intent chips align down the map regardless of pill width (DOM order:
   query, arrow, page, intent — intent is trailing metadata) */
.bd-prose .rb-qmap{position:relative;margin:24px 0 30px;padding:24px 20px 18px;
  border-radius:14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.09);
  display:grid;grid-template-columns:fit-content(320px) max-content minmax(0,1fr);
  gap:13px 14px;align-items:center}
.bd-prose .rb-qmap--intent{grid-template-columns:fit-content(320px) max-content minmax(0,1fr) max-content}
.rb-qmap__ik{display:none;font-style:normal}
.rb-qmap__tag{position:absolute;top:-10px;left:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--gold);
  padding:3px 11px;border-radius:100px;background:#141518;border:1px solid rgba(244,160,0,.45)}
.rb-qmap__row{display:contents}
.rb-qmap__q{justify-self:start}
.rb-qmap .rb-term{border-color:rgba(79,191,160,.35)}
/* the query text scrolls locally rather than wrapping or ellipsising;
   JS makes genuinely overflowing pills keyboard-focusable */
.rb-query-text{display:block;min-width:0;white-space:nowrap;overflow-x:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.rb-query-text:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* copy-link failure fallback: the link itself, selectable in one tap */
.bd-copyurl{display:block;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;line-height:1.5;color:var(--gold);word-break:break-all;
  -webkit-user-select:all;user-select:all}
.rb-qmap__intent{white-space:nowrap;justify-self:start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);
  padding:3px 9px;border-radius:100px;border:1px solid rgba(255,255,255,.18)}
.rb-qmap__intent:empty{visibility:hidden}
.rb-qmap__arr{font-style:normal;color:var(--gold);opacity:.7}
.rb-qmap__page{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text)}
.bd-prose .rb-qmap__page a{color:var(--gold);text-decoration:none}
.bd-prose .rb-qmap__page a:hover{text-decoration:underline}

/* ------------------------------------------------------------
   Query → keyword map (Ads): what searches trigger which keywords
   ------------------------------------------------------------ */
.bd-prose .rb-kwmap{position:relative;margin:24px 0 30px;padding:24px 20px 18px;
  border-radius:14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.09);
  display:grid;gap:14px}
.rb-kwmap__row{display:flex;flex-direction:column;gap:6px}
.rb-kwmap__main{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rb-kwmap__q{flex:0 1 auto}
.rb-kwmap__kw{display:inline-flex;align-items:center;padding:7px 14px;border-radius:9px;
  background:#141518;border:1px solid rgba(244,160,0,.45);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:600;
  color:var(--gold)}
.rb-kwmap__match{white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);
  padding:3px 9px;border-radius:100px;border:1px solid rgba(255,255,255,.15)}
.rb-kwmap__verdict{white-space:nowrap;font-size:12px;font-weight:700;padding:4px 11px;border-radius:100px;
  margin-left:auto}
.rb-kwmap__verdict--good{color:var(--green);background:rgba(79,191,160,.09);
  border:1px solid rgba(79,191,160,.45)}
.rb-kwmap__verdict--bad{color:var(--red);background:rgba(255,122,107,.09);
  border:1px solid rgba(255,122,107,.45)}
.rb-kwmap__why{font-size:13px;color:var(--text-mid);line-height:1.55;padding-left:4px}
.rb-kwmap__row + .rb-kwmap__row{border-top:1px solid rgba(255,255,255,.06);padding-top:14px}

/* ------------------------------------------------------------
   Ad anatomy (Ads): mock sponsored result additions
   ------------------------------------------------------------ */
.bd-dg__adtag{font-size:12px;font-weight:700;color:#E8EAED;margin-right:2px}
.bd-dg__adheadline{font-size:17px}
.bd-dg__adlinks{display:flex;flex-wrap:wrap;gap:8px}
.bd-dg__adlink{font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#8AB4F8;
  padding:5px 12px;border-radius:100px;border:1px solid rgba(138,180,248,.35)}
.bd-dg__adasset{font-size:12.5px;color:#BDC1C6}
.bd-dg__adphone{font-size:12.5px;color:#E8EAED}

/* ------------------------------------------------------------
   Lead economics (Ads): the money cascade with computed chips
   ------------------------------------------------------------ */
/* centred stat-stack: value + label on one centred line, computed
   chips centred underneath — identical composition at every width
   (review: left-run values and right-run chips never lined up) */
.bd-dg.bd-dg--econ{max-width:430px;margin-left:auto;margin-right:auto;display:grid;grid-template-columns:minmax(0,1fr)}
.bd-dg__ecrow{position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:baseline;gap:5px 10px;padding:11px 16px;text-align:center;
  border-radius:13px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.12)}
.bd-dg__ecrow + .bd-dg__ecrow{margin-top:11px}
.bd-dg__ecrow + .bd-dg__ecrow::before{content:"";position:absolute;top:-12px;left:50%;
  width:2px;height:12px;margin-left:-1px;
  background:repeating-linear-gradient(rgba(244,160,0,.5) 0,rgba(244,160,0,.5) 3px,transparent 3px,transparent 6px)}
html.el8-js .bd-dg--econ:not(.is-in) .bd-dg__ecrow{opacity:0;transform:translateY(14px)}
.bd-dg__ecrow{transition:opacity .55s ease calc(var(--i,0)*.13s),
  transform .55s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.13s)}
.bd-dg--econ.is-in .bd-dg__ecrow{opacity:1;transform:none}
.bd-dg__ecval{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;
  font-weight:700;color:var(--text)}
.bd-dg__eclabel{font-family:var(--font-head);font-weight:700;font-size:14.5px;
  color:var(--text-mid);line-height:1.3}
.bd-dg__ecchips{display:flex;gap:7px;flex-basis:100%;flex-wrap:wrap;justify-content:center}
.bd-dg__ecchips:empty{display:none}
.bd-dg__ecrate,.bd-dg__ecper,.bd-dg__ecroi{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:100px;
  white-space:nowrap}
.bd-dg__ecrate{color:var(--text-mid);border:1px solid rgba(255,255,255,.16)}
.bd-dg__ecper{color:var(--gold);background:rgba(244,160,0,.08);border:1px solid rgba(244,160,0,.45)}
.bd-dg__ecroi{color:var(--green);background:rgba(79,191,160,.1);border:1px solid rgba(79,191,160,.5)}
.bd-dg__ecrow--return{border-color:rgba(79,191,160,.45);
  background:linear-gradient(135deg,rgba(79,191,160,.08),rgba(255,255,255,.02) 60%)}
.bd-dg__ecrow--return .bd-dg__ecval{color:var(--green)}

/* ------------------------------------------------------------
   Content lifecycle board (SEO): keep / refresh / consolidate /
   redirect / remove decisions with evidence
   ------------------------------------------------------------ */
.bd-prose .rb-lc{margin:24px 0 30px;display:grid;gap:8px}
.rb-lc__row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 15px;border-radius:12px;background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.12)}
.rb-lc__main{display:flex;flex-direction:column;gap:3px;min-width:0}
.rb-lc__page{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--text);
  line-height:1.35}
.rb-lc__why{font-size:13px;color:var(--text-mid);line-height:1.55}
/* destination for consolidations / redirects */
.rb-lc__dest{align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:600;color:#8B9BB0;padding:2px 9px;border-radius:100px;
  border:1px dashed rgba(139,155,176,.45)}
.rb-lc__chip{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;margin-top:2px}
.rb-lc__chip--keep{color:var(--green);background:rgba(79,191,160,.09);border:1px solid rgba(79,191,160,.45)}
.rb-lc__chip--refresh{color:var(--gold);background:rgba(244,160,0,.09);border:1px solid rgba(244,160,0,.5)}
.rb-lc__chip--consolidate{color:#8B9BB0;background:rgba(139,155,176,.1);border:1px solid rgba(139,155,176,.45)}
.rb-lc__chip--redirect{color:#FFD98A;background:rgba(255,217,138,.08);border:1px solid rgba(255,217,138,.4)}
.rb-lc__chip--remove{color:var(--red);background:rgba(255,122,107,.09);border:1px solid rgba(255,122,107,.45)}

/* ------------------------------------------------------------
   Handover board (WD): tasks with owner / timing / status chips
   ------------------------------------------------------------ */
.bd-prose .rb-hand{position:relative;margin:24px 0 30px;padding:24px 20px 16px;
  border-radius:14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.09);
  display:grid;gap:12px}
.rb-hand__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.rb-hand__row + .rb-hand__row{border-top:1px solid rgba(255,255,255,.06);padding-top:12px}
.rb-hand__main{display:flex;flex-direction:column;gap:3px;min-width:0}
.rb-hand__task{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--text);
  line-height:1.35}
.rb-hand__note{font-size:12.5px;color:var(--text-mid);line-height:1.5}
.rb-hand__chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto;
  max-width:46%}
.rb-hand__owner,.rb-hand__when,.rb-hand__status{display:inline-flex;align-items:center;gap:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;white-space:nowrap}
/* visible OWNER / WHEN / STATUS labels inside each chip */
.rb-hand__metak{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.12em;
  opacity:.65;border-right:1px solid currentColor;padding-right:6px}
.rb-hand__owner{color:var(--gold);background:rgba(244,160,0,.08);border:1px solid rgba(244,160,0,.45)}
.rb-hand__when{color:var(--text-mid);border:1px solid rgba(255,255,255,.16)}
.rb-hand__status--done{color:var(--green);background:rgba(79,191,160,.09);border:1px solid rgba(79,191,160,.45)}
.rb-hand__status--pending{color:#FFD98A;background:rgba(255,217,138,.07);border:1px solid rgba(255,217,138,.4)}
.rb-hand__status--blocked{color:var(--red);background:rgba(255,122,107,.09);border:1px solid rgba(255,122,107,.45)}

/* ------------------------------------------------------------
   Scope tables (WD): Included / Not included / $ cells as chips
   ------------------------------------------------------------ */
.rb-table--scope td:first-child{color:var(--text);font-weight:600}
.rb-table--scope th{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
/* glyph + coloured text, no pill boxes — a wall of repeated chips was
   heavier than the information warranted (external review) */
.rb-scopechip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;
  white-space:nowrap}
.rb-scopechip--yes{color:var(--green)}
.rb-scopechip--no{color:var(--red)}
.rb-scopechip--cost{color:var(--gold);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}

/* ------------------------------------------------------------
   Labelled panels (shared round): experiment records + case-study
   proof blocks — chip, optional title, LABEL: text rows
   ------------------------------------------------------------ */
.bd-prose .rb-panel{position:relative;margin:28px 0 32px;padding:26px 26px 20px;
  border-radius:16px;background:#101114;border:1px solid rgba(255,255,255,.14);
  border-top:2px solid rgba(244,160,0,.55);box-shadow:0 14px 40px rgba(0,0,0,.3);
  display:grid;gap:12px}
.rb-panel__chip{position:absolute;top:-13px;left:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--gold);
  padding:4px 12px;border-radius:100px;background:#141518;border:1px solid rgba(244,160,0,.45)}
.rb-panel__t{font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:-.01em;
  color:var(--text);padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.rb-panel__row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;
  align-items:baseline}
.rb-panel__k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  font-weight:700;letter-spacing:.1em;color:var(--text-dim);text-align:right}
.rb-panel__v{font-size:14.5px;color:var(--text-mid);line-height:1.6}
.rb-panel__row--key,.rb-panel__row--good,.rb-panel__row--bad{margin-top:2px;
  padding:11px 14px;border-radius:11px;width:fit-content;max-width:100%;
  grid-template-columns:auto minmax(0,1fr)}
.rb-panel__row--key .rb-panel__k,.rb-panel__row--good .rb-panel__k,
.rb-panel__row--bad .rb-panel__k{text-align:left}
/* the box hugs its text, so greedy wrapping (full lines) reads better
   than the site-wide text-wrap:pretty rag-balancing here */
.rb-panel__row--key .rb-panel__v,.rb-panel__row--good .rb-panel__v,
.rb-panel__row--bad .rb-panel__v{text-wrap:wrap}
.rb-panel__row--key{background:rgba(244,160,0,.06);border:1px solid rgba(244,160,0,.35)}
.rb-panel__row--key .rb-panel__k{color:var(--gold)}
.rb-panel__row--key .rb-panel__v{color:var(--text);font-weight:600}
.rb-panel__row--good{background:rgba(79,191,160,.07);border:1px solid rgba(79,191,160,.4)}
.rb-panel__row--good .rb-panel__k{color:var(--green)}
.rb-panel__row--good .rb-panel__v{color:var(--text);font-weight:600}
.rb-panel__row--bad{background:rgba(255,122,107,.06);border:1px solid rgba(255,122,107,.35)}
.rb-panel__row--bad .rb-panel__k{color:var(--red)}
.rb-panel__row--bad .rb-panel__v{color:var(--text);font-weight:600}

/* ------------------------------------------------------------
   Scenario comparison cards (shared round): conservative / base /
   upside side by side
   ------------------------------------------------------------ */
.bd-prose .rb-scen{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:12px;
  margin:24px 0 30px}
.rb-scen__card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.12)}
.rb-scen__t{font-family:var(--font-head);font-weight:800;font-size:14px;letter-spacing:.02em;
  text-transform:uppercase;padding:12px 15px;color:var(--text-mid);
  border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.rb-scen__card--low .rb-scen__t{color:#8B9BB0;background:rgba(139,155,176,.1);
  border-bottom-color:rgba(139,155,176,.3)}
.rb-scen__card--base{border-color:rgba(244,160,0,.4)}
.rb-scen__card--base .rb-scen__t{color:var(--gold);background:rgba(244,160,0,.08);
  border-bottom-color:rgba(244,160,0,.35)}
.rb-scen__card--high .rb-scen__t{color:var(--green);background:rgba(79,191,160,.08);
  border-bottom-color:rgba(79,191,160,.3)}
.rb-scen__row{display:flex;flex-direction:column;gap:2px;padding:10px 15px}
.rb-scen__row + .rb-scen__row{border-top:1px solid rgba(255,255,255,.06)}
/* the first metric is the headline outcome */
.rb-scen__row--lead .rb-scen__v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;font-weight:700;letter-spacing:-.01em}
.rb-scen__card--low .rb-scen__row--lead .rb-scen__v{color:#AEBACB}
.rb-scen__card--base .rb-scen__row--lead .rb-scen__v{color:var(--gold)}
.rb-scen__card--high .rb-scen__row--lead .rb-scen__v{color:var(--green)}
.rb-scen__k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.rb-scen__v{font-size:13.5px;color:var(--text);line-height:1.5;font-weight:600}

/* ------------------------------------------------------------
   Diagnosis decision chain (shared round)
   ------------------------------------------------------------ */
.bd-dg.bd-dg--dx{max-width:580px;margin-left:auto;margin-right:auto}
.bd-dg__dxstage{position:relative;padding-bottom:30px}
.bd-dg__dxstage:last-child{padding-bottom:0}
html.el8-js .bd-dg--dx:not(.is-in) .bd-dg__dxstage{opacity:0;transform:translateY(14px)}
.bd-dg__dxstage{transition:opacity .55s ease calc(var(--i,0)*.16s),
  transform .55s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.16s)}
.bd-dg--dx.is-in .bd-dg__dxstage{opacity:1;transform:none}
/* the question node, centred */
.bd-dg__dxq{position:relative;max-width:480px;margin:0 auto;display:flex;align-items:baseline;
  gap:11px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.035)),#0E0F12;
  border:1px solid rgba(255,255,255,.16)}
.bd-dg__dxmark{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--gold);
  padding:3px 9px;border-radius:100px;background:rgba(244,160,0,.1);
  border:1px solid rgba(244,160,0,.45);white-space:nowrap}
.bd-dg__dxqt{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--text);
  line-height:1.4}
/* the fork: stub from the question, tee across, stubs into each answer */
.bd-dg__dxbrs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;
  margin-top:26px;align-items:stretch}
.bd-dg__dxbrs--one{grid-template-columns:1fr}
.bd-dg__dxbrs::before{content:"";position:absolute;top:-14px;left:25%;right:25%;height:2px;
  background:rgba(244,160,0,.45)}
.bd-dg__dxbrs--one::before{display:none}
.bd-dg__dxbrs::after{content:"";position:absolute;top:-26px;left:50%;width:2px;height:12px;
  margin-left:-1px;background:rgba(244,160,0,.45)}
.bd-dg__dxbr{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding-top:14px;min-width:0}
.bd-dg__dxbr::before{content:"";position:absolute;top:-13px;height:27px;left:50%;width:2px;
  margin-left:-1px;background:rgba(244,160,0,.45)}
/* neutral answer chip on the branch; the OUTCOME leaf carries the colour */
.bd-dg__dxchip{position:relative;flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;padding:3px 10px;border-radius:100px;
  color:var(--text-mid);border:1px solid rgba(255,255,255,.25);white-space:nowrap;
  background:#0E0F12}
.bd-dg__dxleaf{align-self:stretch;display:flex;flex-direction:column;gap:6px;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.1)}
.bd-dg__dxbr--fix .bd-dg__dxleaf{background:rgba(255,122,107,.05);border-color:rgba(255,122,107,.3)}
.bd-dg__dxbr--ok .bd-dg__dxleaf{background:rgba(79,191,160,.06);border-color:rgba(79,191,160,.32)}
.bd-dg__dxact{font-size:12.5px;color:var(--text-mid);line-height:1.55}
.bd-dg__dxbr--fix .bd-dg__dxact{color:var(--text)}
.bd-dg__dxthen{align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:100px;
  color:var(--text-mid);border:1px solid rgba(255,255,255,.18)}
.bd-dg__dxbr--fix .bd-dg__dxthen{color:var(--red);border-color:rgba(255,122,107,.4)}
.bd-dg__dxbr--ok .bd-dg__dxthen{color:var(--green);border-color:rgba(79,191,160,.45)}
/* the continuing answer drops a dashed line with an arrow straight into
   the next check — the branch that carries on is physically connected */
.bd-dg__dxdrop{position:absolute;top:42px;bottom:-30px;left:50%;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(rgba(244,160,0,.5) 0,rgba(244,160,0,.5) 4px,transparent 4px,transparent 8px)}
.bd-dg__dxdrop::after{content:"";position:absolute;bottom:1px;left:50%;width:7px;height:7px;
  margin-left:-4px;border-right:2px solid rgba(244,160,0,.7);border-bottom:2px solid rgba(244,160,0,.7);
  transform:rotate(45deg)}
.bd-dg__dxgo{display:none;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--gold);
  padding:4px 11px;border-radius:100px;border:1px dashed rgba(244,160,0,.45);
  background:rgba(244,160,0,.04);white-space:normal}
.bd-dg__dxgo::after{content:" \2193"}
.bd-dg__dxcontlab{position:relative;margin-top:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  padding:2px 9px;border-radius:100px;border:1px dashed rgba(244,160,0,.4);background:#0E0F12}

/* ------------------------------------------------------------
   Worked example panels: ledger rows with dotted leaders, teal /
   coral If→outcome decision rows
   ------------------------------------------------------------ */
.bd-prose .rb-ex{position:relative;margin:28px 0 32px;padding:26px 26px 22px;
  border-radius:16px;background:#101114;border:1px solid rgba(255,255,255,.14);
  border-top:2px solid rgba(244,160,0,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.3)}
.rb-ex__chip{position:absolute;top:-13px;left:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--gold);
  padding:4px 12px;border-radius:100px;background:#141518;border:1px solid rgba(244,160,0,.45)}
.rb-ex__t{display:block;font-family:var(--font-head);font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--text);padding-bottom:13px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.rb-ex__rows{display:grid;gap:11px}
.rb-ex__row{display:flex;align-items:baseline;gap:12px;padding:2px 0}
.rb-ex__k{font-size:14.5px;color:var(--text-mid);line-height:1.5}
.rb-ex__lead{flex:1 1 auto;min-width:24px;border-bottom:2px dotted rgba(255,255,255,.13);
  transform:translateY(-4px)}
.rb-ex__v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:700;
  color:var(--gold);white-space:nowrap}
.rb-ex__line{position:relative;margin:2px 0;padding-left:20px;font-size:14px;
  color:var(--text-mid);line-height:1.55}
.rb-ex__line::before{content:"\25C6";position:absolute;left:1px;top:.44em;color:rgba(244,160,0,.65);
  font-size:9px;line-height:1}
.rb-ex__if{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:11px;
  width:fit-content;max-width:100%;
  font-size:14px;line-height:1.5;margin-top:4px}
.rb-ex__if--good{background:rgba(79,191,160,.07);border:1px solid rgba(79,191,160,.3);color:var(--text)}
.rb-ex__if--bad{background:rgba(255,122,107,.06);border:1px solid rgba(255,122,107,.3);color:var(--text)}
.rb-ex__mark{font-style:normal;font-weight:700;flex:0 0 auto;width:19px;height:19px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:10.5px;margin-top:1px}
.rb-ex__if--good .rb-ex__mark{color:var(--green);background:rgba(79,191,160,.14)}
.rb-ex__if--bad .rb-ex__mark{color:var(--red);background:rgba(255,122,107,.14)}

@media (max-width:700px){
  .bd-prose .rb-mistakes,.bd-prose .rb-qgrid,.bd-prose .rb-fixes,.bd-prose .rb-inds{grid-template-columns:1fr}
  .bd-prose .rb-next{padding:6px 16px}
  .rb-next__item{grid-template-columns:38px minmax(0,1fr);gap:14px;padding:18px 0}
  .rb-next__item::before{left:18px}
  .rb-next__no{width:38px;height:38px;font-size:12.5px}
  .rb-next__item:first-child::before{top:20px}
  .rb-next__item:last-child::before{bottom:calc(100% - 38px)}
  .rb-next__t{font-size:16px}
  .bd-prose .rb-terms{padding:14px;gap:8px}
  .rb-term{font-size:13px;padding:7px 13px}
  .bd-prose .rb-ex{padding:20px 16px 16px}
  .rb-ex__k,.rb-ex__v,.rb-ex__line,.rb-ex__if{font-size:13px}
  .rb-report__tier{flex-direction:column;gap:10px;padding:14px 16px}
  .rb-report__k{flex-basis:auto;border-right:0;padding-right:0}
}

/* ------------------------------------------------------------
   Glossary tooltips — subtle dashed underline; hover/focus/tap shows a
   one-line definition inline. No modal, no page change.
   ------------------------------------------------------------ */
.bd-gloss{position:relative;border-bottom:1px dashed rgba(244,160,0,.55);cursor:help;
  -webkit-tap-highlight-color:transparent}
.bd-gloss::after{content:attr(data-def);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(var(--gtx,-50%)) translateY(4px);width:max-content;max-width:min(280px,72vw);
  padding:10px 14px;border-radius:10px;background:#15161A;border:1px solid rgba(244,160,0,.35);
  box-shadow:0 16px 44px rgba(0,0,0,.55);font-size:13px;line-height:1.5;color:var(--text-mid);
  text-align:left;white-space:normal;opacity:0;pointer-events:none;z-index:40;
  transition:opacity .25s,transform .25s}
.bd-gloss::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#15161A;
  border-right:1px solid rgba(244,160,0,.35);border-bottom:1px solid rgba(244,160,0,.35);
  opacity:0;z-index:41;transition:opacity .25s}
.bd-gloss:hover::after,.bd-gloss:focus-visible::after,.bd-gloss.is-on::after{
  opacity:1;transform:translateX(var(--gtx,-50%)) translateY(0)}
.bd-gloss:hover::before,.bd-gloss:focus-visible::before,.bd-gloss.is-on::before{opacity:1}
.bd-gloss:hover::before,.bd-gloss:focus-visible::before,.bd-gloss.is-on::before{
  transform:translateX(-50%) rotate(45deg)}

/* script-driven tip: fixed to the viewport, so no column or table
   scroller can clip it; the pseudo-tooltip above is the no-JS fallback */
html.bd-glosstip-on .bd-gloss::before,html.bd-glosstip-on .bd-gloss::after{display:none}
.bd-gloss.is-on{border-bottom-style:solid}
.bd-glosstip{position:fixed;z-index:120;max-width:min(300px,calc(100vw - 16px));padding:10px 14px;
  border-radius:10px;background:#15161A;border:1px solid rgba(244,160,0,.35);
  box-shadow:0 16px 44px rgba(0,0,0,.55);font-size:13px;line-height:1.5;color:var(--text-mid);
  pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.bd-glosstip.is-below{transform:translateY(-4px)}
.bd-glosstip.is-shown{opacity:1;transform:none}
.bd-glosstip::after{content:"";position:absolute;left:var(--ax,50%);top:100%;width:10px;height:10px;
  margin:-5px 0 0 -5px;background:#15161A;transform:rotate(45deg);
  border-right:1px solid rgba(244,160,0,.35);border-bottom:1px solid rgba(244,160,0,.35)}
.bd-glosstip.is-below::after{top:0;transform:rotate(225deg)}
@media (prefers-reduced-motion:reduce){.bd-glosstip{transition:none;transform:none}}

/* ------------------------------------------------------------
   Series navigation — band under the hero + numbered part list above
   Related. Renders only when the CMS series fields are set.
   ------------------------------------------------------------ */
.bd-series{max-width:1330px;margin:34px auto 0;padding:0 40px}
.bd-series__in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 22px;
  border-radius:14px;border:1px solid rgba(244,160,0,.35);
  background:linear-gradient(120deg,rgba(244,160,0,.1),rgba(244,160,0,.02))}
.bd-series__k{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--gold);white-space:nowrap}
.bd-series__t{font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--text)}
.bd-series__nav{margin-left:auto;display:flex;gap:18px}
.bd-series__nav a{font-size:13.5px;font-weight:600;color:var(--gold);white-space:nowrap}
.bd-serieslist{max-width:1330px;margin:64px auto 0;padding:0 40px}
.bd-serieslist__card{max-width:760px;margin:0 auto;padding:30px 34px;border-radius:20px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12)}
.bd-serieslist__k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.bd-serieslist__card h2{margin:10px 0 18px;font-size:24px;letter-spacing:-.02em}
.bd-serieslist__card ol{list-style:none;margin:0;padding:0;display:grid}
.bd-serieslist__card li{display:flex;align-items:baseline;gap:14px;padding:11px 4px;
  border-top:1px solid rgba(255,255,255,.08)}
.bd-serieslist__no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--text-dim);flex:0 0 auto}
.bd-serieslist__t{font-size:15.5px;font-weight:600;color:var(--text-soft)}
a.bd-serieslist__t:hover{color:var(--gold)}
.bd-serieslist__card li.is-current .bd-serieslist__no{color:var(--gold)}
.bd-serieslist__card li.is-current .bd-serieslist__t{color:var(--text)}
.bd-serieslist__t em{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-left:8px}

/* ------------------------------------------------------------
   Diagram templates v3 (ArticleDiagrams) — Flow, Funnel, Cycle,
   Timeline, Split + graphs (Line, Bars, Waterfall). One reveal grammar
   (.is-in + --i stagger), every template with continuous ambient
   motion. Reduced motion: static end state.
   ------------------------------------------------------------ */
/* in-article scroll reveal: same curve family as the site's data-rise
   but gentler travel — components 24px, headings and intro lines 12px.
   The class is JS-added below the fold only; reduced motion opts out. */
@media (prefers-reduced-motion:no-preference){
  .bd-rise{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .bd-rise:not(.is-in){opacity:0;transform:translateY(24px)}
  h2.bd-rise:not(.is-in),h3.bd-rise:not(.is-in),p.bd-rise:not(.is-in){transform:translateY(12px)}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bd-dg{margin:38px 0 42px;position:relative}
html.el8-js .bd-dg:not(.is-in) .bd-dg__frow,
html.el8-js .bd-dg:not(.is-in) .bd-dg__node,
html.el8-js .bd-dg:not(.is-in) .bd-dg__q,html.el8-js .bd-dg:not(.is-in) .bd-dg__opt,
html.el8-js .bd-dg:not(.is-in) .bd-dg__gtitle,html.el8-js .bd-dg:not(.is-in) .bd-dg__pt,
html.el8-js .bd-dg:not(.is-in) .bd-dg__note,html.el8-js .bd-dg:not(.is-in) .bd-dg__bcol,
html.el8-js .bd-dg:not(.is-in) .bd-dg__wfcol,html.el8-js .bd-dg:not(.is-in) .bd-dg__wftotal,
html.el8-js .bd-dg:not(.is-in) .bd-dg__lg,html.el8-js .bd-dg:not(.is-in) .bd-dg__dwrap,
html.el8-js .bd-dg:not(.is-in) .bd-dg__sdot,html.el8-js .bd-dg:not(.is-in) .bd-dg__tcell,
html.el8-js .bd-dg:not(.is-in) .bd-dg__sknode,
html.el8-js .bd-dg:not(.is-in) .bd-dg__tlitem,html.el8-js .bd-dg:not(.is-in) .bd-dg__bub{
  opacity:0;transform:translateY(16px)}
/* annotation chips are absolutely positioned THROUGH their transform, so the
   entrance may only fade them — a translateY hidden state would replace the
   positioning transform and make the load-time clamp measure a false spot */
html.el8-js .bd-dg:not(.is-in) .bd-dg__note{transform:translate(-50%,-160%)}
html.el8-js .bd-dg:not(.is-in) .bd-dg__note--peak{transform:translate(-50%,-265%)}
.bd-dg__frow,.bd-dg__node,.bd-dg__q,.bd-dg__opt,
.bd-dg__gtitle,.bd-dg__pt,.bd-dg__note,.bd-dg__bcol,.bd-dg__wfcol,.bd-dg__wftotal,
.bd-dg__lg,.bd-dg__dwrap,.bd-dg__sdot,.bd-dg__tcell,.bd-dg__sknode,
.bd-dg__tlitem,.bd-dg__bub{
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0)*.14s)}
.bd-dg .bd-dg__t{font-family:var(--font-head);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;color:var(--text);line-height:1.3}
.bd-dg .bd-dg__d{font-size:13px;line-height:1.55;color:var(--text-dim)}
.bd-dg__mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.13em;color:var(--gold)}
.bd-dg__v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  color:var(--gold);font-weight:600;white-space:nowrap}
.bd-dg__gtitle{text-align:center;font-family:var(--font-head);font-weight:700;font-size:16px;
  letter-spacing:-.01em;color:var(--text);margin-bottom:20px}
@media (prefers-reduced-motion:reduce){
  html.el8-js .bd-dg:not(.is-in) *{opacity:1!important;transform:none!important;clip-path:none!important}
  /* pseudo-element shimmer/sheen/ping/comet animations too (Archive 8) */
  .bd-dg,.bd-dg *,.bd-dg::before,.bd-dg::after,
  .bd-dg *::before,.bd-dg *::after{animation:none!important;transition-duration:.01s!important}
}

/* ---- Funnel: shape left, labels beside — text unconstrained ---- */
/* narrow enough that the shape + labels read as one centred unit
   (review: at 680px the label column left a dead right third) */
/* the block shrink-wraps its real content (fixed shape column + auto
   label column) so margin-auto centres the VISUAL mass — %-width
   columns left a dead right side whenever labels ran short */
.bd-dg--funnel{display:flex;flex-direction:column;width:max-content;max-width:min(520px,100%);
  margin-left:auto;margin-right:auto;padding-bottom:26px}
.bd-dg__frow{display:grid;grid-template-columns:270px auto;gap:0 4px;align-items:stretch}
.bd-dg__fseg{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:58px;margin-bottom:3px}
.bd-dg__fshape{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(244,160,0,.22),rgba(244,160,0,.09));
  border-top:1px solid rgba(244,160,0,.4);
  clip-path:polygon(calc((100% - var(--wt,100) * 1%) / 2) 0,calc((100% + var(--wt,100) * 1%) / 2) 0,
    calc((100% + var(--wb,100) * 1%) / 2) 100%,calc((100% - var(--wb,100) * 1%) / 2) 100%)}
.bd-dg__fshape::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%) -200% 0/200% 100% no-repeat}
.bd-dg.is-in .bd-dg__fshape::after{animation:el8dgshimmer 3.8s ease-in-out calc(var(--i,0)*.25s + 1s) infinite}
@keyframes el8dgshimmer{0%{background-position:-200% 0}45%,100%{background-position:200% 0}}
.bd-dg__fseg .bd-dg__v{position:relative;font-size:14.5px}
.bd-dg__flabel{display:flex;align-items:center;gap:10px;padding:6px 0}
.bd-dg__lead{flex:0 0 26px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(244,160,0,.5) 0,rgba(244,160,0,.5) 4px,transparent 4px,transparent 8px)}
.bd-dg__flabel-in{display:flex;flex-direction:column;gap:3px;min-width:0}
.bd-dg__flabel .bd-dg__t{font-size:15px}
.bd-dg__drop{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.06em;color:var(--red)}
.bd-dg__drips{position:absolute;bottom:0;left:135px;transform:translateX(-50%);width:40px;height:26px}
.bd-dg__drips i{position:absolute;top:0;left:50%;width:4px;height:4px;border-radius:50%;
  background:var(--gold);opacity:0}
.bd-dg__drips i:nth-child(2){left:32%}
.bd-dg__drips i:nth-child(3){left:66%}
.bd-dg.is-in .bd-dg__drips i{animation:el8dgdrip 2.1s ease-in calc(var(--i,0)*.7s) infinite}
@keyframes el8dgdrip{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(22px);opacity:0}}

/* ---- Cycle (approved) ---- */
.bd-dg--cycle{position:relative;width:min(400px,88vw);aspect-ratio:1;margin:38px auto 44px}
.bd-dg--cycle svg{position:absolute;inset:10%;width:80%;height:80%;overflow:visible}
.bd-dg__ring{fill:none;stroke:rgba(244,160,0,.4);stroke-width:1.4;stroke-dasharray:4.5 4.5}
.bd-dg__arrowhead{fill:rgba(244,160,0,.85)}
.bd-dg__spin{transform-origin:50% 50%}
.bd-dg.is-in .bd-dg__spin{animation:el8dgspinrot 30s linear infinite}
@keyframes el8dgspinrot{to{transform:rotate(360deg)}}
/* inset 32%: the hub box's corners sit at sqrt(2)*18% = 25.5% from
   centre, inside the 26.8% ring radius — text can never cross the
   dashes at any viewport width */
.bd-dg__hub{position:absolute;inset:32%;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:5px;padding:12px;
  background:radial-gradient(circle,rgba(244,160,0,.07),transparent 72%)}
.bd-dg__hub-t{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--gold);
  letter-spacing:-.01em;transition:opacity .35s}
.bd-dg__hub-d{font-size:12.5px;line-height:1.5;color:var(--text-mid);min-height:3.1em;transition:opacity .35s;
  max-width:150px}
.bd-dg__hub.is-swap .bd-dg__hub-t,.bd-dg__hub.is-swap .bd-dg__hub-d{opacity:0}
/* --ring is the anchor radius (ring radius + a uniform gap); the
   translate shifts each pill so its ring-facing EDGE sits on the
   anchor — equal daylight for every pill regardless of its width */
.bd-dg--cycle{--ring:31.5%}
.bd-dg--cycle .bd-dg__node{position:absolute;
  left:calc(50% + var(--ring)*var(--cx,0));top:calc(50% + var(--ring)*var(--cy,0));
  transform:translate(calc(-50% + var(--cx,0)*50%),calc(-50% + var(--cy,0)*50%));
  padding:9px 16px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  border-radius:100px;background:#101114;border:1px solid rgba(255,255,255,.22);color:var(--text-soft);
  font-family:var(--font-head);font-weight:700;font-size:13.5px;white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.14s),
    background .45s,border-color .45s,color .45s,box-shadow .45s}
.bd-dg--cycle .bd-dg__node:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* persistent pause/resume for the rotation */
.bd-dg__cyclepause{position:absolute;right:0;bottom:0;width:30px;height:30px;border-radius:50%;
  appearance:none;-webkit-appearance:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:11px;line-height:1;color:var(--text-mid);
  background:#101114;border:1px solid rgba(255,255,255,.2)}
.bd-dg__cyclepause:hover{color:var(--gold);border-color:rgba(244,160,0,.5)}
.bd-dg__cyclepause:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* (owner, 4 Oct 2026: "way bigger than the rest") the ring's own svg rule above caught the button's icon and drew
   it at 80% of the button; it keeps the 11px every other chart's play/pause uses */
.bd-dg--cycle .bd-dg__cyclepause svg{position:static;inset:auto;width:11px;height:11px;overflow:visible}
html.el8-js .bd-dg--cycle:not(.is-in) .bd-dg__node{transform:translate(calc(-50% + var(--cx,0)*50%),calc(-50% + var(--cy,0)*50%)) scale(.7)}
.bd-dg--cycle.is-in .bd-dg__node{transform:translate(calc(-50% + var(--cx,0)*50%),calc(-50% + var(--cy,0)*50%))}
.bd-dg--cycle .bd-dg__node.is-active{background:rgba(244,160,0,.14);border-color:var(--gold);
  color:var(--gold);box-shadow:0 0 22px rgba(244,160,0,.28)}

/* ---- Split (approved) ---- */
.bd-dg--split{text-align:center}
.bd-dg__q{display:inline-flex;padding:12px 24px;border-radius:100px;background:rgba(244,160,0,.1);
  border:1px solid rgba(244,160,0,.5);font-family:var(--font-head);font-weight:700;
  font-size:15.5px;color:var(--text)}
.bd-dg__branches{display:block;width:100%;height:64px}
.bd-dg__branch,.bd-dg__bcomet{fill:none;vector-effect:non-scaling-stroke}
.bd-dg__branch{stroke:rgba(244,160,0,.4);stroke-width:1.5;stroke-dasharray:220;
  transition:stroke-dashoffset 1.1s ease calc(var(--i,0)*.2s + .3s)}
html.el8-js .bd-dg--split:not(.is-in) .bd-dg__branch{stroke-dashoffset:220}
.bd-dg__bcomet{stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:10 300;stroke-dashoffset:10;opacity:0}
.bd-dg--split.is-in .bd-dg__bcomet{
  animation:el8dgbcomet 2.6s cubic-bezier(.45,.05,.55,.95) calc(var(--i,0)*.85s + 1.6s) infinite}
@keyframes el8dgbcomet{0%{stroke-dashoffset:10;opacity:0}8%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:-220;opacity:0}}
.bd-dg__opts{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:12px;text-align:left}
.bd-dg__opt{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.14);border-top:2px solid rgba(244,160,0,.55)}
.bd-dg__opt .bd-dg__t{color:var(--gold)}
.bd-dg__opt .bd-dg__d{color:var(--text-mid)}

/* ---- Line graph ---- */
.bd-dg--line{max-width:720px;margin-left:auto;margin-right:auto}
.bd-dg__plot{position:relative;padding-bottom:30px}
.bd-dg__plotarea{position:relative;margin:14px 8px 0}
.bd-dg__ptval{position:absolute;transform:translate(-50%,-190%);color:var(--gold);font-size:11px;
  white-space:nowrap}
.bd-dg__ptval--r{transform:translate(-100%,-190%)}
.bd-dg__ptval--l{transform:translate(0,-190%)}
.bd-dg__plot svg{display:block;width:100%;height:220px}
.bd-dg__area{fill:rgba(244,160,0,.12);transition:opacity 1s ease .9s}
html.el8-js .bd-dg--line:not(.is-in) .bd-dg__area{opacity:0}
.bd-dg__curve,.bd-dg__gcomet{stroke-width:2;vector-effect:non-scaling-stroke;fill:none;stroke-linejoin:round}
.bd-dg__curve{stroke:var(--gold);stroke-dasharray:100;
  transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.55,.95) .2s}
html.el8-js .bd-dg--line:not(.is-in) .bd-dg__curve{stroke-dashoffset:100}
.bd-dg__gcomet{stroke:#FFD98A;stroke-width:3;stroke-linecap:round;stroke-dasharray:4 96;
  stroke-dashoffset:4;opacity:0}
.bd-dg--line.is-in .bd-dg__gcomet{animation:el8dggcomet 4.4s cubic-bezier(.45,.05,.55,.95) 2s infinite}
@keyframes el8dggcomet{0%{stroke-dashoffset:4;opacity:0}6%{opacity:1}86%{opacity:1}100%{stroke-dashoffset:-96;opacity:0}}
.bd-dg__pt{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:#141518;border:2px solid var(--gold)}
.bd-dg__pt--max{background:var(--gold);box-shadow:0 0 12px rgba(244,160,0,.6)}
.bd-dg__note{position:absolute;transform:translate(-50%,-160%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.08em;white-space:nowrap;padding:5px 10px;border-radius:8px;
  background:rgba(13,14,17,.92)}
.bd-dg__note--peak{color:var(--green);border:1px solid rgba(79,191,160,.4);transform:translate(-50%,-265%)}
.bd-dg__note--trough{color:var(--red);border:1px solid rgba(255,122,107,.4)}
.bd-dg__axis{position:absolute;left:8px;right:8px;bottom:0;height:22px}
.bd-dg__axis .bd-dg__mono{position:absolute;transform:translateX(-50%);color:var(--text-dim)}
.bd-dg__axis .bd-dg__mono:first-child{transform:none}
.bd-dg__axis .bd-dg__mono:last-child{transform:translateX(-100%)}

/* ---- Bars ---- */
.bd-dg--bars{max-width:640px;margin-left:auto;margin-right:auto}
.bd-dg__barrow{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0 14px;
  align-items:end;min-height:230px}
.bd-dg__bcol{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;
  justify-content:flex-end}
/* height reserves the value + label space so flex never shrinks tall
   bars into lying about their values (review: $52 and $61 rendered
   the same height) */
.bd-dg__bar{position:relative;overflow:hidden;width:min(64px,80%);flex:0 0 auto;
  height:calc((100% - 56px) * var(--h,50) / 100);min-height:6px;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,rgba(244,160,0,.85),rgba(244,160,0,.25));
  border:1px solid rgba(244,160,0,.5);transform-origin:bottom;
  transition:transform .95s cubic-bezier(.34,1.3,.45,1) calc(var(--i,0)*.14s + .2s)}
html.el8-js .bd-dg--bars:not(.is-in) .bd-dg__bar{transform:scaleY(0)}
/* light band rising through the columns in turn */
.bd-dg__bar::after,.bd-dg__stack::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 28%,rgba(255,255,255,.28) 50%,transparent 72%);
  transform:translateY(135%)}
.bd-dg--bars.is-in .bd-dg__bar::after,
.bd-dg--stacked.is-in .bd-dg__stack::after{animation:el8dgsheeny 6s ease-in-out calc(var(--i,0)*.55s + 2.2s) infinite}
@keyframes el8dgsheeny{0%{transform:translateY(135%)}26%{transform:translateY(-135%)}100%{transform:translateY(-135%)}}
.bd-dg__bar--max{box-shadow:0 0 18px rgba(244,160,0,.3)}
.bd-dg--bars.is-in .bd-dg__bar--max{animation:el8dgbarglow 2.8s ease-in-out 1.6s infinite}
@keyframes el8dgbarglow{0%,100%{box-shadow:0 0 12px rgba(244,160,0,.2)}50%{box-shadow:0 0 26px rgba(244,160,0,.45)}}
.bd-dg__blabel{font-size:12.5px;color:var(--text-mid);text-align:center;line-height:1.35}

/* ---- Waterfall ---- */
.bd-dg--wf{max-width:680px;margin-left:auto;margin-right:auto}
.bd-dg__wfplot{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);
  gap:0 12px;height:250px;padding-top:34px;margin-bottom:16px}
.bd-dg__wftotal-line{position:absolute;left:0;right:0;height:2px;
  bottom:calc(var(--b,100) * (100% - 58px) / 100 + 22px);
  background:repeating-linear-gradient(90deg,rgba(79,191,160,.55) 0,rgba(79,191,160,.55) 7px,transparent 7px,transparent 14px)}
.bd-dg--wf.is-in .bd-dg__wftotal-line{animation:el8dgmarch 1.2s linear infinite}
@keyframes el8dgmarch{to{background-position-x:-14px}}
.bd-dg__wfcol{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.bd-dg__wfbar{position:absolute;left:6%;right:6%;bottom:calc(var(--b,0) * (100% - 58px) / 100 + 24px);
  height:calc(var(--h,10) * (100% - 58px) / 100);min-height:12px;border-radius:6px;
  background:linear-gradient(180deg,rgba(244,160,0,.7),rgba(244,160,0,.2));
  border:1px solid rgba(244,160,0,.55);transform-origin:bottom;
  transition:transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.22s + .2s)}
html.el8-js .bd-dg--wf:not(.is-in) .bd-dg__wfbar{transform:scaleY(0)}
/* negative steps drop in coral; the closing Total column is teal */
.bd-dg__wfbar--neg{background:linear-gradient(180deg,rgba(255,122,107,.2),rgba(255,122,107,.65));
  border-color:rgba(255,122,107,.55);transform-origin:top}
.bd-dg__wfbar--neg .bd-dg__v{color:var(--red)}
.bd-dg__wfbar--total{background:linear-gradient(180deg,rgba(79,191,160,.65),rgba(79,191,160,.18));
  border-color:rgba(79,191,160,.6)}
.bd-dg__wfbar--total .bd-dg__v{color:var(--green)}
/* dashed running-level guide reaching into the next column */
.bd-dg__wfjoin{position:absolute;left:94%;width:calc(12% + 12px);height:0;
  bottom:calc(var(--b,0) * (100% - 58px) / 100 + 24px);
  border-top:2px dashed rgba(255,255,255,.28);transition:opacity .5s ease calc(var(--i,0)*.22s + .7s)}
html.el8-js .bd-dg--wf:not(.is-in) .bd-dg__wfjoin{opacity:0}
.bd-dg__wfcol:last-child .bd-dg__wfjoin{display:none}
.bd-dg__wfbar .bd-dg__v{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:12.5px}
.bd-dg__wfcol .bd-dg__blabel{position:absolute;top:calc(100% - 20px);left:0;right:0;font-size:11.5px;line-height:1.3}

/* ---- chart value inspection (Archive 9): one anchored chip ---- */
.bd-dg__tipbox{position:absolute;z-index:6;transform:translate(-50%,-130%);pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;
  letter-spacing:.02em;white-space:pre-line;width:max-content;
  max-width:min(340px,calc(100% - 12px));text-align:left;line-height:1.65;color:var(--text);
  padding:6px 11px;border-radius:9px;background:#141518;border:1px solid rgba(244,160,0,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.bd-dg__tipbox--below{transform:translate(-50%,26%)}
/* tall marks (stacked / grouped columns): float the chip at mid-height
   so it never blankets the title or total */
.bd-dg__tipbox--mid{transform:translate(-50%,-50%)}
/* device-aware hint */
.bd-dg__tiphint{display:block;text-align:center;margin-top:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  letter-spacing:.08em;color:var(--text-dim)}
.bd-dg__tiphint i{font-style:normal}
.bd-dg__tiphint-h{display:none}
@media (hover:hover){
  .bd-dg__tiphint-h{display:inline}
  .bd-dg__tiphint-t{display:none}
}
[data-tip]{cursor:pointer}
[data-tip]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* generous invisible hit areas for small dots */
.bd-dg__pt::after{content:"";position:absolute;inset:-12px}
/* the visually-hidden data table keeps every value for assistive tech */
.bd-dg__srdata table{border-collapse:collapse}

/* ---- shared legend ---- */
.bd-dg__legend{display:flex;justify-content:center;gap:8px 20px;margin-top:18px;flex-wrap:wrap}
.bd-dg__lg{font-size:12.5px;font-weight:600;color:var(--text-mid);
  display:inline-flex;align-items:center;gap:7px}
.bd-dg__lg i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}

/* ---- Stacked column ---- */
.bd-dg__stack{position:relative;display:flex;flex-direction:column-reverse;width:min(64px,80%);
  flex:0 0 auto;height:calc((100% - 56px) * var(--h,60) / 100);min-height:8px;
  border-radius:8px 8px 3px 3px;overflow:hidden;transform-origin:bottom;
  transition:transform .95s cubic-bezier(.34,1.3,.45,1) calc(var(--i,0)*.14s + .2s)}
html.el8-js .bd-dg--stacked:not(.is-in) .bd-dg__stack{transform:scaleY(0)}
.bd-dg__sseg{display:block;min-height:3px}
.bd-dg__sseg + .bd-dg__sseg{border-bottom:1px solid rgba(0,0,0,.45)}
/* segments light up bottom-to-top after the column grows */
html.el8-js .bd-dg--stacked:not(.is-in) .bd-dg__sseg{opacity:0}
.bd-dg__sseg{transition:opacity .45s ease calc(var(--i,0)*.14s + var(--k,0)*.13s + .45s)}
.bd-dg--stacked.is-in .bd-dg__sseg{opacity:1}

/* ---- Donut ---- */
.bd-dg--donut{max-width:520px;margin-left:auto;margin-right:auto;text-align:center}
.bd-dg__dwrap{position:relative;width:min(240px,70vw);margin:0 auto}
.bd-dg__dwrap svg{display:block;width:100%;transform:rotate(0deg)}
.bd-dg__slice{fill:none;stroke-width:6.5;stroke-linecap:round;
  stroke-dasharray:100 100;stroke-dashoffset:0;
  transition:stroke-dashoffset .9s cubic-bezier(.6,.1,.3,1) calc(var(--i,0)*.14s + .2s)}
html.el8-js .bd-dg--donut:not(.is-in) .bd-dg__slice{stroke-dashoffset:100}
.bd-dg__dhole{position:absolute;inset:22%;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.bd-dg__dhole b{font-family:var(--font-head);font-weight:800;font-size:27px;color:var(--text)}
.bd-dg__dhole span{font-size:11.5px;color:var(--text-dim);max-width:100px;line-height:1.3}

/* ---- Scatter (+ shared plot for Bubble) ---- */
.bd-dg--scatter,.bd-dg--bubble{max-width:620px;margin-left:auto;margin-right:auto}
.bd-dg__splot{position:relative;height:280px;border-left:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);border-radius:0 0 0 2px;
  background:repeating-linear-gradient(rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 25%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 25%)}
.bd-dg__trendsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bd-dg__trend{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2;stroke-dasharray:6 7;
  vector-effect:non-scaling-stroke;transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.6,.1,.3,1) .9s}
/* drawn by default; only a page whose script runs hides it for the entrance */
html.el8-js .bd-dg--scatter:not(.is-in) .bd-dg__trend{transform:scaleX(0)}
.bd-dg__sdot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  color:var(--gold);background-color:currentColor;
  background-image:radial-gradient(circle at 34% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 48%);
  border:1.5px solid rgba(255,255,255,.5);cursor:help;
  box-shadow:0 0 14px}
html.el8-js .bd-dg--scatter:not(.is-in) .bd-dg__sdot{transform:scale(.2)}
.bd-dg--scatter .bd-dg__sdot{transition:opacity .55s ease calc(var(--i,0)*.12s + .2s),
  transform .65s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0)*.12s + .2s)}
.bd-dg__sdot::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid currentColor;opacity:0}
.bd-dg--scatter.is-in .bd-dg__sdot::after{animation:el8dgping 4.6s ease-out calc(var(--i,0)*.75s + 1.8s) infinite}
@keyframes el8dgping{0%{transform:scale(.55);opacity:.85}30%{transform:scale(2.3);opacity:0}100%{transform:scale(2.3);opacity:0}}
/* axis captions sit OUTSIDE the plot box: y above the axis, x below it
   (roomy bottom margin so the caption never crowds the legend) */
.bd-dg--scatter .bd-dg__splot,.bd-dg--bubble .bd-dg__splot{margin:30px 0 50px}
.bd-dg__ycap{position:absolute;top:-26px;left:0;color:var(--text-dim)}
.bd-dg__xcap{position:absolute;bottom:-27px;left:50%;transform:translateX(-50%);color:var(--text-dim)}
/* numeric min/max ticks (review: plots need a readable scale) */
.bd-dg__tick{position:absolute;font-size:10px;color:var(--text-dim);letter-spacing:.05em}
.bd-dg__tick--x0{bottom:-22px;left:0}
.bd-dg__tick--x1{bottom:-22px;right:0}
.bd-dg__tick--y1{top:5px;left:7px}
.bd-dg__tick--y0{bottom:4px;left:7px}

/* ---- Bubble ---- */
/* no overflow clip here — the axis captions live outside the box */
.bd-dg__splot--bub{border:1px solid rgba(255,255,255,.1);
  border-left-color:rgba(255,255,255,.22);border-bottom-color:rgba(255,255,255,.22);border-radius:10px}
.bd-dg__bub{position:absolute;transform:translate(-50%,-50%);border-radius:50%;cursor:help;
  border:1.5px solid rgba(255,255,255,.35);opacity:.88;
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.28),0 0 16px rgba(0,0,0,.3)}
html.el8-js .bd-dg--bubble:not(.is-in) .bd-dg__bub{transform:translate(-50%,-50%) scale(.15)}
.bd-dg--bubble .bd-dg__bub{transition:opacity .6s ease calc(var(--i,0)*.13s + .2s),
  transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0)*.13s + .2s)}
.bd-dg--bubble.is-in .bd-dg__bub{transform:translate(-50%,-50%)}

/* ---- Treemap ---- */
.bd-dg--treemap{max-width:680px;margin-left:auto;margin-right:auto}
.bd-dg__tplot{position:relative;height:300px;border-radius:14px;overflow:hidden}
.bd-dg__tcell{position:absolute;overflow:hidden;display:flex;flex-direction:column;gap:2px;
  justify-content:flex-end;padding:10px 12px;border:1.5px solid #0B0C0E;border-radius:6px}
/* build in: blocks grow into place instead of the generic drift-up */
html.el8-js .bd-dg--treemap:not(.is-in) .bd-dg__tcell{transform:scale(.72)}
.bd-dg--treemap .bd-dg__tcell{transform-origin:center;
  transition:opacity .55s ease calc(var(--i,0)*.09s + .1s),
  transform .65s cubic-bezier(.34,1.45,.5,1) calc(var(--i,0)*.09s + .1s)}
/* light sweep passing across the blocks in turn */
.bd-dg__tcell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);
  transform:translateX(-135%)}
.bd-dg--treemap.is-in .bd-dg__tcell::after{animation:el8dgsheenx 7.5s ease-in-out calc(var(--i,0)*.55s + 1.8s) infinite}
@keyframes el8dgsheenx{0%{transform:translateX(-135%)}24%{transform:translateX(135%)}100%{transform:translateX(135%)}}
.bd-dg__tlabel{font-family:var(--font-head);font-weight:700;font-size:13.5px;line-height:1.2;
  color:#0A0A0A}
.bd-dg__tval{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:rgba(0,0,0,.82)}
.bd-dg__tcell--sm{flex-direction:row;align-items:center;justify-content:flex-start;
  gap:8px;padding:4px 10px}
.bd-dg__tcell--sm .bd-dg__tval{position:relative;top:1px}
.bd-dg__tcell--sm .bd-dg__tlabel{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-dg__tcell--sm .bd-dg__tval{font-size:10px;flex:0 0 auto}

/* ---- Sankey ---- */
.bd-dg--sankey{max-width:680px;margin-left:auto;margin-right:auto}
.bd-dg__skplot{position:relative;height:max(280px,calc(var(--nodes,4) * 52px));padding:0 2px}
.bd-dg__skplot svg{position:absolute;inset:0;width:100%;height:100%}
.bd-dg__band{opacity:.5;
  transition:opacity .8s ease calc(var(--i,0)*.16s + .25s),
  clip-path 1.15s cubic-bezier(.6,.1,.3,1) calc(var(--i,0)*.16s + .25s)}
html.el8-js .bd-dg--sankey:not(.is-in) .bd-dg__band{opacity:0;clip-path:inset(0 100% 0 0)}
.bd-dg--sankey.is-in .bd-dg__band:hover{opacity:.75}
/* particles flowing source → target along each band (seamless conveyor:
   the offset steps by exact multiples of the dash period) */
.bd-dg__skcomet{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:1.6 9.4;opacity:0;
  transition:opacity .9s ease calc(var(--i,0)*.16s + 1.2s)}
.bd-dg--sankey.is-in .bd-dg__skcomet{opacity:1;
  animation:el8dgskflow 2.8s linear calc(var(--i,0)*-.4s) infinite}
@keyframes el8dgskflow{to{stroke-dashoffset:-22}}
.bd-dg__sknode{position:absolute;transform:translateY(-50%);font-family:var(--font-head);
  font-weight:700;font-size:12.5px;color:var(--text);padding:5px 10px;border-radius:8px;
  background:rgba(13,14,17,.92);border:1px solid rgba(255,255,255,.16);max-width:34%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-dg__sknode b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  font-size:11px;color:var(--gold);margin-left:4px}
.bd-dg__sknode--l{left:0}
.bd-dg__sknode--r{right:0;text-align:right}

/* ---- Page anatomy: annotated wireframe in a browser frame ---- */
.bd-dg--page{max-width:560px;margin-left:auto;margin-right:auto}
.bd-dg__pgframe{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:#131417}
.bd-dg__pgchrome{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#1B1C21;
  border-bottom:1px solid rgba(255,255,255,.08)}
.bd-dg__pgdots{display:flex;gap:5px}
.bd-dg__pgdots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.bd-dg__pgdots i:first-child{background:rgba(255,122,107,.6)}
.bd-dg__pgdots i:nth-child(2){background:rgba(244,160,0,.6)}
.bd-dg__pgdots i:nth-child(3){background:rgba(79,191,160,.6)}
.bd-dg__pgurl{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  color:var(--text-dim);padding:3px 12px;border-radius:100px;background:rgba(255,255,255,.05)}
.bd-dg__pgrow{position:relative;padding:12px 40px 12px 16px}
.bd-dg__pgrow + .bd-dg__pgrow{border-top:1px dashed rgba(255,255,255,.07)}
.bd-dg__pgrow .bd-dg__serpmark{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.bd-dg__pgnav{display:flex;align-items:center;gap:12px}
.bd-dg__pglogo{width:22px;height:10px;border-radius:3px;background:var(--gold)}
.bd-dg__pgnavtxt{font-size:10.5px;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase}
.bd-dg__pgnavbtn{margin-left:auto;width:52px;height:16px;border-radius:100px;
  background:rgba(244,160,0,.8)}
.bd-dg__pghero{padding-top:20px}
.bd-dg__pgh1{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.015em;
  color:var(--text);line-height:1.3}
.bd-dg__pgsub span{font-size:12.5px;color:var(--text-mid);line-height:1.5}
.bd-dg__pgcta{padding-bottom:18px}
.bd-dg__pgbtn{display:inline-flex;padding:8px 18px;border-radius:100px;background:var(--gold);
  color:#141518;font-family:var(--font-head);font-weight:700;font-size:12.5px}
.bd-dg__pgbtn--sm{padding:6px 14px;font-size:11px}
.bd-dg__pgproof{display:flex;flex-wrap:wrap;gap:7px}
.bd-dg__pgchip{font-size:10.5px;color:var(--text-mid);padding:4px 10px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14)}
.bd-dg__pgcards{display:flex;gap:8px}
.bd-dg__pgcard{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;
  padding:10px 11px;border-radius:9px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1)}
.bd-dg__pgcard b{font-size:10.5px;font-weight:700;color:var(--text);line-height:1.25}
.bd-dg__pgcard i{height:4px;width:70%;border-radius:2px;background:rgba(255,255,255,.12)}
.bd-dg__pgform{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.bd-dg__pgfield{flex:1 1 100px;font-size:10.5px;color:var(--text-dim);padding:7px 11px;
  border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.bd-dg__pgfooter{background:#0E0F12;padding:10px 40px 10px 16px}
.bd-dg__pgfooter span{font-size:10px;color:var(--text-dim)}
.bd-dg__pgblock span{font-size:12px;color:var(--text-mid);line-height:1.5}
html.el8-js .bd-dg--page:not(.is-in) .bd-dg__pgframe{opacity:0;transform:translateY(16px)}
.bd-dg__pgframe{transition:opacity .7s ease .1s,transform .7s cubic-bezier(.16,1,.3,1) .1s}
.bd-dg--page.is-in .bd-dg__pgframe{opacity:1;transform:none}

/* ---- System map: responsibility overview — items grouped by who
   holds admin access; no connectors (external review: the old paired
   rails implied technical relationships that don't exist) ---- */
.bd-dg--sys{max-width:680px;margin-left:auto;margin-right:auto;text-align:center}
.bd-dg__syshub{display:inline-flex;padding:11px 24px;border-radius:100px;
  background:rgba(244,160,0,.1);border:1.5px solid rgba(244,160,0,.55);
  font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--gold)}
.bd-dg__syskey{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.08em;color:var(--text-mid);margin:8px 0 16px}
.bd-dg__sysgroups{display:grid;grid-template-columns:repeat(var(--g,3),1fr);gap:12px;
  text-align:left;align-items:start}
.bd-dg__sysgroup{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:13px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.11)}
.bd-dg__sysgroup--you{border-color:rgba(244,160,0,.4)}
.bd-dg__sysgroup--agency{border-color:rgba(79,191,160,.38)}
.bd-dg__sysgroup--shared{border-color:rgba(139,155,176,.4)}
.bd-dg__sysgrouph{align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;color:var(--text-mid);
  border:1px solid rgba(255,255,255,.2)}
.bd-dg__sysgroup--you .bd-dg__sysgrouph{color:var(--gold);border-color:rgba(244,160,0,.5);
  background:rgba(244,160,0,.08)}
.bd-dg__sysgroup--agency .bd-dg__sysgrouph{color:var(--green);border-color:rgba(79,191,160,.5);
  background:rgba(79,191,160,.07)}
.bd-dg__sysgroup--shared .bd-dg__sysgrouph{color:#8B9BB0;border-color:rgba(139,155,176,.5);
  background:rgba(139,155,176,.08)}
.bd-dg__sysnode{display:flex;flex-direction:column;gap:4px;
  padding:11px 12px;border-radius:11px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12)}
html.el8-js .bd-dg--sys:not(.is-in) .bd-dg__sysgroup{opacity:0;transform:translateY(12px)}
.bd-dg__sysgroup{transition:opacity .55s ease calc(var(--i,0)*.14s + .2s),
  transform .55s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.14s + .2s)}
.bd-dg--sys.is-in .bd-dg__sysgroup{opacity:1;transform:none}
.bd-dg__sysname{font-family:var(--font-head);font-weight:700;font-size:13.5px;color:var(--text)}
.bd-dg__sysdesc{font-size:12px;color:var(--text-mid);line-height:1.5}

/* ---- Waffle: 10×10 dot grid ---- */
.bd-dg--waffle{max-width:520px;margin-left:auto;margin-right:auto;text-align:center}
.bd-dg__wafflesvg{display:block;width:min(300px,74%);margin:0 auto}

/* ---- Grouped bars ---- */
.bd-dg--grouped{max-width:660px;margin-left:auto;margin-right:auto}
.bd-dg__group{display:flex;align-items:flex-end;gap:5px;height:100%;width:min(96px,92%);
  justify-content:center}
.bd-dg__gbar{flex:1 1 0;max-width:34px;height:calc((100% - 34px) * var(--h,50) / 100);
  min-height:5px;border-radius:6px 6px 2px 2px;opacity:.92;transform-origin:bottom;
  transition:transform .85s cubic-bezier(.34,1.3,.45,1) calc(var(--i,0)*.14s + .25s)}
html.el8-js .bd-dg--grouped:not(.is-in) .bd-dg__gbar{transform:scaleY(0)}

/* ---- Range bands ---- */
.bd-dg--range{max-width:640px;margin-left:auto;margin-right:auto;display:grid;gap:15px}
.bd-dg__rrow{display:grid;grid-template-columns:150px 1fr 130px;gap:14px;align-items:center}
.bd-dg__rlabel{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text);
  line-height:1.3}
.bd-dg__rtrack{position:relative;height:16px;border-radius:100px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08)}
.bd-dg__rband{position:absolute;top:2px;bottom:2px;border-radius:100px;
  background:linear-gradient(90deg,rgba(244,160,0,.35),rgba(244,160,0,.85));
  transform-origin:left;
  transition:transform .9s cubic-bezier(.6,.1,.3,1) calc(var(--i,0)*.14s + .25s)}
html.el8-js .bd-dg--range:not(.is-in) .bd-dg__rband{transform:scaleX(0)}
.bd-dg__rvals{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.bd-dg__rvals .bd-dg__mono{font-size:11.5px;letter-spacing:.04em}
.bd-dg__rdash{width:8px;height:1.5px;background:rgba(244,160,0,.5)}
html.el8-js .bd-dg--range:not(.is-in) .bd-dg__rrow{opacity:0;transform:translateY(14px)}
.bd-dg__rrow{transition:opacity .6s ease calc(var(--i,0)*.12s),
  transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.12s)}

/* ---- Heatmap ---- */
.bd-dg--heatmap{max-width:640px;margin-left:auto;margin-right:auto}
.bd-dg__hm{display:grid;grid-template-columns:auto repeat(calc(var(--cols,8) - 1),1fr);gap:4px}
.bd-dg__hmh{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  letter-spacing:.06em;color:var(--text-mid);text-align:center;padding:2px 0 5px;
  text-transform:uppercase}
.bd-dg__hmr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--text-mid);display:flex;align-items:center;padding-right:10px;white-space:nowrap}
.bd-dg__hmc{display:flex;align-items:center;justify-content:center;min-height:36px;
  border-radius:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  font-weight:700;color:var(--text)}
.bd-dg__hmc--hot{border:1.5px solid rgba(79,191,160,.9);color:#FFFFFF;font-weight:800}
html.el8-js .bd-dg--heatmap:not(.is-in) .bd-dg__hmc{opacity:0;transform:scale(.6)}
.bd-dg__hmc{transition:opacity .5s ease calc(var(--i,0)*.06s + .15s),
  transform .5s cubic-bezier(.34,1.4,.5,1) calc(var(--i,0)*.06s + .15s)}

/* ---- Site architecture tree ---- */
.bd-dg--sitetree{max-width:560px;margin-left:auto;margin-right:auto;display:grid;gap:9px}
.bd-dg__tnode{position:relative;margin-left:calc(var(--d,0)*34px)}
html.el8-js .bd-dg--sitetree:not(.is-in) .bd-dg__tnode{opacity:0;transform:translateX(14px)}
.bd-dg__tnode{transition:opacity .55s ease calc(var(--i,0)*.08s),
  transform .55s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.08s)}
.bd-dg--sitetree.is-in .bd-dg__tnode{opacity:1;transform:none}
/* elbow connector to the parent level — heavier stroke and a longer
   reach so parent→child continuity survives at a glance (external
   review: connectors read as broken) */
.bd-dg__tnode:not(.bd-dg__tnode--root)::before{content:"";position:absolute;left:-19px;top:-11px;
  width:16px;height:30px;border-left:2px solid rgba(244,160,0,.5);
  border-bottom:2px solid rgba(244,160,0,.5);border-radius:0 0 0 8px}
.bd-dg__trail{position:absolute;top:-10px;bottom:-10px;width:2px;
  background:rgba(244,160,0,.5);
  left:calc((var(--l,1) - var(--d,1))*34px - 19px)}
.bd-dg__tcard{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;
  border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.13)}
.bd-dg__tnode--root>.bd-dg__tcard{border-color:rgba(244,160,0,.5);background:rgba(244,160,0,.07)}
.bd-dg__tname{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text);
  line-height:1.3}
.bd-dg__trole{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);
  padding:2px 8px;border-radius:100px;border:1px solid rgba(255,255,255,.2);white-space:nowrap}
.bd-dg__trole--hub{color:var(--green);border-color:rgba(79,191,160,.45)}
.bd-dg__trole--money{color:var(--gold);border-color:rgba(244,160,0,.5)}
/* a landing page is the ad's DESTINATION, not a child object: dashed
   arrow + label instead of a hierarchy elbow (external review) */
.bd-dg__tcard.bd-dg__tcard--ad{flex-direction:column;align-items:flex-start;gap:3px;padding:8px 13px;
  background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.1)}
.bd-dg__tkind{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.bd-dg__tcard--ad .bd-dg__tname{font-size:13px;font-weight:600;color:var(--text-mid)}
.bd-dg__tnode.bd-dg__tnode--dest::before{border:none;border-left:2px dashed rgba(79,191,160,.55);
  border-bottom:2px dashed rgba(79,191,160,.55);border-radius:0 0 0 8px}
.bd-dg__tnode--dest{display:flex;align-items:center;gap:8px}
.bd-dg__tdest{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;
  font-weight:700;letter-spacing:.08em;color:var(--green);white-space:nowrap}
/* decorative arrow follows the layout: right beside the card on
   desktop, down toward the card when the label stacks above (mobile) */
.bd-dg__tdest::after{content:" \2192"}
.bd-dg__tnode--dest>.bd-dg__tcard{border-style:dashed;border-color:rgba(79,191,160,.45)}

/* ---- Flow pipeline: compact vertical stage rows (external review:
   side-by-side cards wrapped hard and the longest note stretched
   every stage). Numbered discs sit on a shared left rail; ISSUE /
   FIX areas indent beneath their stage. ---- */
.bd-dg--flow{max-width:600px;margin-left:auto;margin-right:auto}
.bd-dg__flowcol{display:flex;flex-direction:column}
.bd-dg__fstage{position:relative;padding:0 0 18px 44px}
.bd-dg__fstage:last-child,.bd-dg__fstage--joined:last-of-type{padding-bottom:0}
/* the rail + downstream arrowhead between stages */
.bd-dg__fstage--joined::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;
  width:2px;background:linear-gradient(rgba(244,160,0,.45),rgba(244,160,0,.25))}
.bd-dg__fstage--joined::after{content:"";position:absolute;left:10px;bottom:3px;width:7px;height:7px;
  border-right:2px solid rgba(244,160,0,.6);border-bottom:2px solid rgba(244,160,0,.6);
  transform:rotate(45deg)}
html.el8-js .bd-dg--flow:not(.is-in) .bd-dg__fstage,
html.el8-js .bd-dg--flow:not(.is-in) .bd-dg__freturn{opacity:0;transform:translateY(14px)}
.bd-dg__fstage,.bd-dg__freturn{transition:opacity .55s ease calc(var(--i,0)*.14s),
  transform .55s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.14s)}
.bd-dg--flow.is-in .bd-dg__fstage,.bd-dg--flow.is-in .bd-dg__freturn{opacity:1;transform:none}
.bd-dg__fhead{display:flex;align-items:flex-start;gap:0}
.bd-dg__fno{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  font-weight:700;color:var(--gold);letter-spacing:.05em;
  background:rgba(244,160,0,.09);border:1px solid rgba(244,160,0,.5)}
.bd-dg__fht{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px}
.bd-dg__fname{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--text);
  line-height:1.25}
.bd-dg__fdesc{font-size:12.5px;color:var(--text-mid);line-height:1.5}
/* labelled issue / fix areas, aligned to the stage body */
.bd-dg__fnote{display:flex;align-items:flex-start;gap:9px;margin-top:8px;
  padding:7px 10px;border-radius:9px;width:fit-content;max-width:100%}
.bd-dg__fnote--gate{background:rgba(255,122,107,.06);border:1px solid rgba(255,122,107,.3)}
.bd-dg__fnote--fix{background:rgba(79,191,160,.06);border:1px solid rgba(79,191,160,.32)}
.bd-dg__fnotek{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;font-weight:800;letter-spacing:.14em;padding:2px 8px;border-radius:100px;
  margin-top:1px}
.bd-dg__fnote--gate .bd-dg__fnotek{color:var(--red);border:1px solid rgba(255,122,107,.5)}
.bd-dg__fnote--fix .bd-dg__fnotek{color:var(--green);border:1px solid rgba(79,191,160,.5)}
.bd-dg__fnotev{font-size:12px;color:var(--text-mid);line-height:1.5}
/* explicit feed-back row closing the loop (conversion tracking) */
.bd-dg__freturn{position:relative;display:flex;align-items:baseline;gap:10px;margin-left:44px;
  padding:9px 12px;border-radius:10px;border:1px dashed rgba(244,160,0,.45);
  background:rgba(244,160,0,.04);width:fit-content;max-width:calc(100% - 44px)}
.bd-dg__fretk{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--gold);white-space:nowrap}
.bd-dg__fretv{font-size:12px;color:var(--text-mid);line-height:1.5}

/* ---- SERP anatomy ---- */
.bd-dg--serp{max-width:600px;margin-left:auto;margin-right:auto}
.bd-dg__serp{padding:20px 22px;border-radius:14px;background:#17181C;
  border:1px solid rgba(255,255,255,.13);display:grid;gap:7px}
.bd-dg__serprow{position:relative;display:flex;align-items:center;gap:9px}
.bd-dg__anatomy-content{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.bd-dg__serpfav{flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFD98A,#F4A000 75%)}
.bd-dg__serpurl{font-size:12.5px;color:var(--text-mid);overflow-wrap:anywhere}
.bd-dg__serptitle{font-family:Arial,Helvetica,sans-serif;font-size:18px;color:#8AB4F8;
  line-height:1.3}
.bd-dg__serpdesc{font-size:13.5px;color:#BDC1C6;line-height:1.55}
.bd-dg__serprating{font-size:12.5px;color:var(--gold)}
.bd-dg__serpline{font-size:12.5px;color:var(--text-mid)}
/* double-class selector so section rules like ".bd-dg__pgsub span"
   can never recolour the digit (review: markers 3 and 8 went pale) */
.bd-dg .bd-dg__serpmark{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:800;color:#141518;background:var(--gold);line-height:1}
/* markers sit right beside the element they annotate (review: a
   far-right rail forced readers to trace an imaginary ruler) */
.bd-dg__serprow .bd-dg__serpmark{position:static;transform:none;margin-left:2px}
.bd-dg__serpnotes{display:grid;gap:8px;margin-top:16px}
.bd-dg__serpnote{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
  color:var(--text-mid);line-height:1.55}
.bd-dg__serpnote .bd-dg__serpmark{margin-top:1px}
html.el8-js .bd-dg--serp:not(.is-in) .bd-dg__serpnote{opacity:0;transform:translateY(10px)}
.bd-dg__serpnote{transition:opacity .5s ease calc(var(--i,0)*.1s + .4s),
  transform .5s ease calc(var(--i,0)*.1s + .4s)}
.bd-dg--serp.is-in .bd-dg__serpnote{opacity:1;transform:none}

/* ---- Parliament ---- */
.bd-dg--parl{max-width:520px;margin-left:auto;margin-right:auto;text-align:center}
.bd-dg__parlsvg{display:block;width:min(400px,90%);margin:0 auto}
.bd-dg__seat{transform-origin:center;transform-box:fill-box;
  transition:opacity .5s ease calc(var(--i,0)*.012s + .12s),transform .5s cubic-bezier(.34,1.4,.5,1) calc(var(--i,0)*.012s + .12s)}
html.el8-js .bd-dg--parl:not(.is-in) .bd-dg__seat,
html.el8-js .bd-dg--waffle:not(.is-in) .bd-dg__seat{opacity:0;transform:scale(.3)}
.bd-dg--parl.is-in .bd-dg__seat,.bd-dg--waffle.is-in .bd-dg__seat{animation:el8dgseat 6s ease-in-out calc(var(--i,0)*.07s + 1.6s) infinite}
@keyframes el8dgseat{0%,90%,100%{filter:brightness(1)}95%{filter:brightness(1.5)}}

/* ---- Timeline: horizontal serpentine on desktop (rail runs L→R,
   curves down at the edge, comes back R→L), vertical spine on phones ---- */
.bd-dg--tl{max-width:600px;margin-left:auto;margin-right:auto}
.bd-dg__tlwrap{position:relative}
.bd-dg__tldir,.bd-dg__tldn,.bd-dg__tldnrow{display:none}
.bd-dg__tlrow{display:contents}
@media (min-width:701px){
  .bd-dg--tl{max-width:700px}
  .bd-dg__tlspine{display:none}
  .bd-dg__tlwrap{display:flex;flex-direction:column;gap:46px;padding:0 34px}
  .bd-dg__tlrow{display:grid;grid-template-columns:repeat(var(--pr,3),1fr);gap:0 26px;
    position:relative}
  .bd-dg__tlrow--rev{direction:rtl}
  .bd-dg__tlrow--rev .bd-dg__tlitem{direction:ltr}
  /* the rail through each row's nodes — top matches the chip pill's
     vertical centre so pills, dots and rail share one axis */
  .bd-dg__tlrow::before{content:"";position:absolute;left:-34px;right:-34px;top:11px;height:2px;
    background:linear-gradient(90deg,rgba(244,160,0,.12),rgba(244,160,0,.45) 18%,rgba(244,160,0,.45) 82%,rgba(244,160,0,.12))}
  /* the turn: down and around at the end of the row */
  .bd-dg__tlrow--turn::after{content:"";position:absolute;top:11px;bottom:-59px;width:34px;
    right:-34px;border:2px solid rgba(244,160,0,.35);border-left:none;
    border-radius:0 30px 30px 0}
  .bd-dg__tlrow--rev.bd-dg__tlrow--turn::after{right:auto;left:-34px;
    border:2px solid rgba(244,160,0,.35);border-right:none;border-radius:30px 0 0 30px}
  html.el8-js .bd-dg--tl:not(.is-in) .bd-dg__tlrow::before,
  html.el8-js .bd-dg--tl:not(.is-in) .bd-dg__tldnrow,
  html.el8-js .bd-dg--tl:not(.is-in) .bd-dg__tlrow--turn::after{opacity:0}
  .bd-dg__tlrow::before,.bd-dg__tldnrow,.bd-dg__tlrow--turn::after{
    transition:opacity .9s ease calc(var(--i,0)*.55s + .2s)}
  /* dot centre == rail centre (14px); the pill rides the same axis */
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlnode{left:4px;top:5px}
  .bd-dg__tlchip{font-size:11.5px;padding:4px 11px}
  /* ONE travel cue per turn (user round): the down chevron centred on
     the elbow's descent — no separate exit arrowhead */
  .bd-dg__tldnrow{display:block;position:absolute;top:calc(50% + 30px);right:-38px;
    width:9px;height:9px;border-right:2.5px solid var(--gold);
    border-bottom:2.5px solid var(--gold);border-radius:1px;transform:rotate(45deg)}
  .bd-dg__tlrow--rev .bd-dg__tldnrow{right:auto;left:-38px}
  /* end row: the rail stops at the last milestone with a terminal
     arrow instead of running across empty cells to the gutter */
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--end::before,
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--end .bd-dg__tldir{display:none}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--end .bd-dg__tlitem::before{content:"";
    position:absolute;top:11px;height:2px;left:-13px;right:-13px;
    background:rgba(244,160,0,.4)}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--end .bd-dg__tldir + .bd-dg__tlitem::before{
    left:-34px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--rev.bd-dg__tlrow--end .bd-dg__tldir + .bd-dg__tlitem::before{
    left:-13px;right:-34px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--end .bd-dg__tlitem:last-child::before{right:-4px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--rev.bd-dg__tlrow--end .bd-dg__tlitem:last-child::before{
    right:-13px;left:-4px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--end .bd-dg__tlitem:last-child::after{content:"";
    position:absolute;top:8px;width:9px;height:9px;border-top:2.5px solid var(--gold);
    border-right:2.5px solid var(--gold);border-radius:1px;right:-12px;transform:rotate(45deg)}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--rev.bd-dg__tlrow--end .bd-dg__tlitem:last-child::after{
    right:auto;left:-12px;transform:rotate(225deg)}
  /* the single-item end row that both starts and ends the journey */
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow--end .bd-dg__tldir + .bd-dg__tlitem:last-child::before{
    left:-34px;right:-4px}
  /* straight vertical variant (DIAGRAM: Timeline vertical) keeps the
     spine on desktop too */
  .bd-dg--tlvert{max-width:600px}
  .bd-dg--tlvert .bd-dg__tlwrap{display:block;padding:0}
  .bd-dg--tlvert .bd-dg__tlspine{display:block}
  .bd-dg--tlvert .bd-dg__tlrow{display:contents}
  .bd-dg--tlvert .bd-dg__tlrow::before,.bd-dg--tlvert .bd-dg__tlrow--turn::after{display:none}
  .bd-dg--tlvert .bd-dg__tldir{display:none}
  .bd-dg--tlvert .bd-dg__tldnrow{display:none}
  .bd-dg--tlvert .bd-dg__tlitem{padding:0 0 24px 36px}
  .bd-dg--tlvert .bd-dg__tlnode{left:4px;top:4px}
}
.bd-dg__tlspine{position:absolute;top:4px;bottom:10px;left:10px;width:2px;
  background:linear-gradient(180deg,rgba(244,160,0,.6),rgba(244,160,0,.14));transform-origin:top;
  transition:transform 1.2s cubic-bezier(.6,.1,.3,1) .15s}
html.el8-js .bd-dg--tl:not(.is-in) .bd-dg__tlspine{transform:scaleY(0)}
/* comet sliding down the spine */
.bd-dg__tlspine::after{content:"";position:absolute;left:-2px;top:0;width:6px;height:28px;
  border-radius:4px;background:linear-gradient(180deg,transparent,#FFD98A,transparent);opacity:0}
.bd-dg--tl.is-in .bd-dg__tlspine::after{animation:el8dgtlcomet 4.6s cubic-bezier(.45,.05,.55,.95) 1.8s infinite}
@keyframes el8dgtlcomet{0%{top:-6%;opacity:0}12%{opacity:.9}80%{opacity:.9}100%{top:96%;opacity:0}}
.bd-dg__tlitem{position:relative;padding:0 0 24px 36px}
.bd-dg__tlrow:last-child .bd-dg__tlitem:last-child{padding-bottom:0}
html.el8-js .bd-dg--tl:not(.is-in) .bd-dg__tlitem{transform:translateX(24px)}
.bd-dg--tl.is-in .bd-dg__tlitem{transform:none}
.bd-dg__tlnode{position:absolute;left:4px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:3px solid #0E0F12;
  box-shadow:0 0 0 1.5px rgba(244,160,0,.55),0 0 10px rgba(244,160,0,.3)}
.bd-dg__tlbody{display:flex;flex-direction:column;gap:6px}
/* opaque pill (the same 10% gold tint composited on the page ground):
   the rail now runs through the pill's vertical centre, so a
   translucent background would strike the line through the month text */
.bd-dg__tlchip{position:relative;align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  padding:4px 13px;border-radius:100px;
  background:linear-gradient(rgba(244,160,0,.1),rgba(244,160,0,.1)),#0E0F12;
  border:1px solid rgba(244,160,0,.35)}
.bd-dg__tlbody .bd-dg__d{color:var(--text-mid);font-size:14px}

/* off-screen charts and a paused cycle hold every loop where it is */
.bd-dg.is-off,.bd-dg.is-off *,.bd-dg.is-off *::before,.bd-dg.is-off *::after,
.bd-dg.is-paused,.bd-dg.is-paused *,.bd-dg.is-paused *::before,.bd-dg.is-paused *::after{
  animation-play-state:paused!important}

/* 701–800px: the article column is barely wider than the timeline, so
   the elbow chevrons (centred on the turn, 34px out) crossed the column
   clip — give the turns a little more gutter at these widths only */
@media (min-width:701px) and (max-width:800px){
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlwrap{padding:0 42px}
}

/* ---- diagram phone layouts ---- */
@media (max-width:700px){
  /* phones: the funnel fills the column and its labels wrap — the
     fixed shape column plus a max-content label ran 84px past the
     article edge at 390px */
  .bd-dg--funnel{width:100%}
  .bd-dg__frow{grid-template-columns:42% minmax(0,1fr)}
  .bd-dg__drips{left:21%}
  .bd-dg__lead{flex-basis:10px}
  .bd-dg__flabel{gap:6px}
  .bd-dg__flabel .bd-dg__t{overflow-wrap:anywhere}
  .bd-dg__fseg{min-height:50px}
  .bd-dg__flabel .bd-dg__t{font-size:13.5px}
  .bd-dg--cycle{width:min(320px,82vw)}
  /* phones: ring pulled in a touch and pills slimmed so the widest
     pill keeps daylight from the dashes inside the narrow column */
  .bd-dg--cycle svg{inset:12%;width:76%;height:76%}
  .bd-dg--cycle .bd-dg__node{font-size:11px;padding:6px 9px;max-width:92px;
    white-space:normal;text-align:center;line-height:1.2}
  .bd-dg__hub-t{font-size:13px}
  .bd-dg__hub-d{font-size:10px;line-height:1.4;min-height:2.8em}
  /* Split on phones: the desktop fork points at columns that no longer
     exist — swap it for flowing vertical connectors between the pill
     and each stacked card */
  .bd-dg__branches{display:none}
  .bd-dg__opts{grid-template-columns:1fr;gap:0;margin-top:0}
  .bd-dg__opt{margin-top:26px;position:relative}
  .bd-dg__opt::before{content:"";position:absolute;top:-26px;left:50%;width:2px;height:26px;
    transform:translateX(-50%);
    background:repeating-linear-gradient(rgba(244,160,0,.5) 0,rgba(244,160,0,.5) 5px,transparent 5px,transparent 10px) 0 0/2px 10px}
  .bd-dg--split.is-in .bd-dg__opt::before{animation:el8dgdashY 1.2s linear infinite}
  .bd-dg__plot svg{height:170px}
  .bd-dg__note{font-size:10px}
  .bd-dg__barrow{min-height:190px;gap:0 8px}
  .bd-dg__blabel{font-size:11px}
  .bd-dg__wfplot{height:210px;gap:0 6px}
  .bd-dg__wfbar .bd-dg__v{font-size:10.5px}
  /* edge columns: clamp the value chips inward so "$19,380+" can't
     poke past the article box on narrow phones */
  .bd-dg__wfcol:last-child .bd-dg__wfbar .bd-dg__v{left:auto;right:0;transform:none}
  .bd-dg__wfcol:first-child .bd-dg__wfbar .bd-dg__v{left:0;transform:none}
  /* reserved marker column: a bare flex-wrap let annotation numbers
     orphan onto their own line (Archive 7 review) */
  .bd-dg--serp .bd-dg__serprow,.bd-dg--ad .bd-dg__serprow{display:grid;
    grid-template-columns:minmax(0,1fr) 19px;align-items:start;gap:9px}
  .bd-dg__anatomy-content{min-width:0;overflow-wrap:anywhere}
  .bd-dg__serprow .bd-dg__serpmark{margin:2px 0 0}
  .bd-dg__wftotal{font-size:15px}
  .bd-dg__axis .bd-dg__mono{font-size:9px}
  .bd-dg__axis .bd-dg__mono:nth-child(even){display:none}
  .bd-dg__splot{height:230px}
  .bd-dg__bub{opacity:.8}
  .bd-dg__tplot{height:240px}
  .bd-dg__tlabel{font-size:11px}
  .bd-dg__tval{font-size:9.5px}
  .bd-dg__skplot{height:max(230px,calc(var(--nodes,4) * 46px))}
  .bd-dg__rrow{grid-template-columns:1fr;gap:7px}
  .bd-dg__rvals{justify-content:flex-start}
  /* cycle: keep the outer nodes inside the clipped prose column */
  .bd-dg--cycle{width:min(300px,72vw);--ring:28%}
  /* line charts: inset the plot so edge dots and the peak chip
     aren't cut by the column clip */
  .bd-dg__plotarea{margin:14px 8px 0}
  .bd-dg__axis{left:8px;right:8px}
  /* waterfall: slanted axis labels stay ONE line each — wrapping
     inside a rotation reads as debris (review: "Hot water system") */
  .bd-dg__wfplot{margin-bottom:58px;padding-left:22px}
  .bd-dg__wfcol .bd-dg__blabel{font-size:10px;line-height:1;top:100%;
    left:auto;right:50%;width:max-content;text-align:right;
    transform:translateX(10px) rotate(-40deg);transform-origin:top right;white-space:nowrap}
  /* timelines (serpentine flavour): the desktop rail design, two
     milestones per row */
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlspine{display:none}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlwrap{display:grid;grid-template-columns:1fr 1fr;
    grid-auto-flow:row dense;gap:30px 18px;padding:0 27px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlrow{display:contents}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem{position:relative;margin:0;
    padding:24px 0 0}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem[data-mc="1"]{grid-column:1}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem[data-mc="2"]{grid-column:2}
  /* the rail through each pair, reaching the side gutters */
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem::before{content:"";position:absolute;
    top:6px;height:2px;left:-9px;right:-9px;
    background:linear-gradient(90deg,rgba(244,160,0,.35),rgba(244,160,0,.45))}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem[data-mc="1"]::before{left:-20px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem[data-mc="2"]::before{right:-20px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlnode{display:block;left:1px;top:1px;
    width:12px;height:12px;border-width:2.5px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlchip{font-size:10.5px;padding:3px 9px;
    margin-bottom:2px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlbody .bd-dg__d{font-size:12px}
  /* travel cues: chevrons within a pair, rounded turns at the edges */
  .bd-dg__tlitem--p1::after,.bd-dg__tlitem--p3::after{content:"";position:absolute;
    top:2px;width:8px;height:8px;border-top:2.5px solid var(--gold);
    border-right:2.5px solid var(--gold);border-radius:1px}
  .bd-dg__tlitem--p1::after{right:-13px;transform:rotate(45deg)}
  .bd-dg__tlitem--p3::after{left:-13px;transform:rotate(225deg)}
  .bd-dg__tlitem--p2::after,.bd-dg__tlitem--p4::after{content:"";position:absolute;
    top:6px;bottom:-38px;width:18px;border:2px solid rgba(244,160,0,.4)}
  .bd-dg__tlitem--p2::after{right:-20px;border-left:0;border-radius:0 18px 18px 0}
  .bd-dg__tlitem--p4::after{left:-20px;border-right:0;border-radius:18px 0 0 18px}
  /* down chevron riding each elbow's descent, centred on the drop
     (user round) */
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--p2 .bd-dg__tldn,
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--p4 .bd-dg__tldn{display:block;
    position:absolute;top:calc(50% + 18px);width:8px;height:8px;
    border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
    border-radius:1px;transform:rotate(45deg)}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--p2 .bd-dg__tldn{right:-24px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--p4 .bd-dg__tldn{left:-24px}
  /* the journey's last rail ends with a terminal arrow, whichever of
     the four serpentine positions it lands on (user round) */
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e1::after,
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e2::after,
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e3::after,
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e4::after{content:"";position:absolute;
    top:2px;width:8px;height:8px;border-top:2.5px solid var(--gold);
    border-right:2.5px solid var(--gold);border-radius:1px;transform:rotate(45deg)}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e1::after{right:-13px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e2::after{right:-20px}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e3::after{left:-13px;transform:rotate(225deg)}
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlitem--e4::after{left:-20px;transform:rotate(225deg)}
  /* query maps (external code review): the query owns a FULL row —
     nothing shares its line, so no badge can squeeze it into wrapping.
     Auto row placement means an absent intent reserves no empty row. */
  .bd-prose .rb-qmap,.bd-prose .rb-kwmap{padding-left:12px;padding-right:12px}
  .bd-prose .rb-qmap,.bd-prose .rb-qmap--intent{grid-template-columns:1fr;gap:13px}
  .rb-qmap__row{display:grid;grid-template-columns:20px minmax(0,1fr);
    gap:8px;align-items:start}
  /* subtle separators between mappings */
  .rb-qmap__row + .rb-qmap__row{border-top:1px solid rgba(255,255,255,.07);padding-top:13px}
  .rb-qmap__intent:empty{display:none}
  .rb-qmap__row .rb-qmap__q{grid-column:1/-1;justify-self:start;width:fit-content;max-width:100%;min-width:0}
  .rb-qmap__row .rb-qmap__arr{grid-column:1;margin:0;align-self:start;justify-self:center}
  .rb-qmap__row .rb-qmap__page{grid-column:2;min-width:0;line-height:1.4}
  /* intent reads as labelled metadata under the mapping, not a chip */
  .rb-qmap__row .rb-qmap__intent{grid-column:1/-1;justify-self:start;
    border:0;padding:0;background:none;font-family:inherit;text-transform:none;
    letter-spacing:normal;font-size:12px;font-weight:500;color:var(--text-mid);
    white-space:normal}
  .rb-qmap__row .rb-qmap__ik{display:inline;color:var(--text-dim)}
  .rb-kwmap__main{display:grid;grid-template-columns:20px minmax(0,1fr) auto;
    gap:9px 8px;align-items:center}
  .rb-kwmap__main .rb-kwmap__q{grid-column:1/-1;justify-self:start;width:fit-content;max-width:100%;min-width:0}
  .rb-kwmap__main .rb-qmap__arr{grid-column:1;margin:0;justify-self:center}
  .rb-kwmap__main .rb-kwmap__kw{grid-column:2;min-width:0;justify-self:start;
    overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
  .rb-kwmap__main .rb-kwmap__match{grid-column:3;justify-self:start}
  .rb-kwmap__main .rb-kwmap__verdict{grid-column:1/-1;margin-left:0;justify-self:start}
  .rb-qmap__q,.rb-kwmap__q{max-width:100%;min-width:0;padding-left:10px;padding-right:10px;
    border-radius:14px}
  /* economics stack: same centred design, smaller value type */
  .bd-dg__ecrow{padding:14px 15px}
  .bd-dg__ecval{font-size:17px}
  /* page anatomy: tighter marker gutter, one-line nav */
  .bd-dg__pgrow{padding:11px 32px 11px 13px}
  .bd-dg__pgrow .bd-dg__serpmark,.bd-dg__serpnote .bd-dg__serpmark{width:16px;height:16px;
    font-size:9.5px}
  .bd-dg__pgrow .bd-dg__serpmark{right:9px}
  .bd-dg__pgh1{font-size:16px}
  .bd-dg__pgnavtxt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bd-dg__pgfield{flex-basis:calc(50% - 7px)}
  /* FAQ: inline Q chip (no wasted gutter) + tap-to-expand accordion */
  .bd-prose .rb-faq{padding:13px 15px}
  .rb-faq__q{font-size:15px;padding-left:30px}
  .rb-faq__chip{left:15px;top:14px;width:21px;height:21px;font-size:10.5px}
  /* phones: shallow indents and wrapping cards so depth-4 nodes (ad →
     landing page) stay INSIDE the article box — overflow-x:clip was
     hiding ~15px of card (external review; bounds now checked against
     the article, not just page scroll width) */
  .bd-dg--sitetree{width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
  .bd-dg__tnode{margin-left:calc(var(--d,0)*15px);min-width:0}
  .bd-dg__trail{left:calc((var(--l,1) - var(--d,1))*15px - 11px)}
  .bd-dg__tnode:not(.bd-dg__tnode--root)::before{left:-11px;width:8px}
  .bd-dg__tcard{flex-wrap:wrap;row-gap:4px;max-width:100%;padding:8px 12px}
  .bd-dg__tname{font-size:13px}
  /* the "lands on" label rides ABOVE the destination card, so its
     arrow points DOWN toward it (Archive 9) */
  .bd-dg__tnode--dest{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
  .bd-dg__tdest::after{content:" \2193"}
  .bd-dg__serptitle{font-size:16px}
  .rb-lc__row{flex-direction:column;gap:7px}
  .rb-lc__chip{align-self:flex-start}
  .rb-kwmap__verdict{margin-left:0}
  .rb-hand__row{flex-direction:column;gap:8px}
  .rb-hand__chips{justify-content:flex-start;max-width:none}
  .rb-panel__row{grid-template-columns:1fr;gap:3px}
  .rb-panel__row--key,.rb-panel__row--good,.rb-panel__row--bad{width:100%;
    grid-template-columns:1fr}
  .rb-panel__k{text-align:left}
  .bd-prose .rb-scen{grid-template-columns:1fr}
  /* flow: labels above their explanation so long copy gets the full
     inner width (Archive 9) */
  .bd-dg__fnote,.bd-dg__freturn{flex-direction:column;align-items:flex-start;gap:4px}
  /* decision tree phones (Archive 7): CHECK chip above the question,
     each answer chip heading its own outcome card, and ONE labelled
     connector ("NO \2192 CHECK 2") joining to the next check */
  .bd-dg__dxstage{position:relative;padding-bottom:24px;padding-left:13px}
  .bd-dg__dxstage::before{content:"";position:absolute;left:0;top:4px;bottom:26px;width:2px;
    border-radius:2px;background:rgba(244,160,0,.22)}
  .bd-dg__dxstage:last-child{padding-bottom:0}
  .bd-dg__dxstage:last-child::before{bottom:4px}
  .bd-dg__dxq{flex-direction:column;align-items:flex-start;gap:7px}
  .bd-dg__dxbrs{grid-template-columns:1fr;gap:9px;margin-top:12px}
  .bd-dg__dxbrs::before,.bd-dg__dxbrs::after,.bd-dg__dxbr::before,.bd-dg__dxdrop,
  .bd-dg__dxbr--cont .bd-dg__dxchip,.bd-dg__dxbr--cont .bd-dg__dxcontlab{display:none}
  .bd-dg__dxbr--leaf{flex-direction:column;align-items:stretch;gap:7px;padding:10px 12px;
    border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.1)}
  .bd-dg__dxbr--fix{background:rgba(255,122,107,.05);border-color:rgba(255,122,107,.3)}
  .bd-dg__dxbr--ok{background:rgba(79,191,160,.06);border-color:rgba(79,191,160,.32)}
  .bd-dg__dxbr--leaf .bd-dg__dxchip{align-self:flex-start;margin:0}
  .bd-dg__dxbr .bd-dg__dxleaf{padding:0;border:0;background:none;align-self:auto;min-width:0}
  .bd-dg__dxbr--cont{align-items:flex-start;padding-top:0}
  .bd-dg__dxgo{display:inline-flex;position:relative}
  .bd-dg__dxgo::before{content:"";position:absolute;left:50%;top:100%;height:14px;width:2px;
    margin-left:-1px;background:repeating-linear-gradient(rgba(244,160,0,.5) 0,rgba(244,160,0,.5) 3px,transparent 3px,transparent 6px)}
  .bd-dg__sysgroups{grid-template-columns:1fr}
  .bd-dg__pgcards{flex-wrap:wrap}
  .bd-dg__pgcard{flex-basis:calc(50% - 8px)}
  .bd-dg__hmc{min-height:26px;font-size:10px}
  .bd-dg__hmh,.bd-dg__hmr{font-size:9px}
  /* long node names wrap to two lines instead of an ellipsis */
  .bd-dg__sknode{font-size:10.5px;padding:4px 7px;max-width:40%;white-space:normal;
    line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .bd-dg__dhole b{font-size:22px}
}
@keyframes el8dgdashY{to{background-position-y:12px}}
@media (max-width:374px){
  /* 320-class phones: the funnel shape column, cycle ring, node pills,
     waterfall label inset and economics chips each need a few more px
     of headroom inside the article box */
  .bd-dg--cycle{width:min(300px,66vw);--ring:26.4%}
  .bd-dg--cycle .bd-dg__node{max-width:82px;font-size:10.5px;padding:5px 8px}
  .bd-dg__wfplot{padding-left:28px}
  .bd-dg__ecrate,.bd-dg__ecper,.bd-dg__ecroi{font-size:9px;letter-spacing:.02em}
}

@media (max-width:1024px){
  .bd-layout__grid{grid-template-columns:1fr;gap:24px}
  /* The rail dissolves: only the TOC sits above the article (collapsed
     to its head row, tap to expand); share + CTA move below the body. */
  .bd-aside{display:contents}
  .bd-toc{order:-1}
  .bd-sharecard,.bd-asidecta{order:1}
  .bd-toc__head{margin-bottom:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bd-toc__head::after{content:"";width:9px;height:9px;margin-left:2px;flex:0 0 auto;
    align-self:center;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
    transform:rotate(45deg) translateY(-2px);transition:transform .3s}
  .bd-toc.is-open .bd-toc__head{margin-bottom:12px}
  .bd-toc.is-open .bd-toc__head::after{transform:rotate(225deg) translateY(-3px)}
  /* collapsed from the first paint (arming it only once the script ran
     made the list paint open and then snap shut — a layout shift). If
     the script never runs, the inline safety net adds .bd-toc--static
     and the list shows again. */
  .bd-toc .bd-toc__box{max-height:min(340px,55vh)}
  html.el8-js .bd-toc:not(.is-open):not(.bd-toc--static) .bd-toc__box{display:none}
  .bd-toc.is-open .bd-toc__box{display:grid}
  /* Compact pinned state while reading: a slim bar under the sticky nav,
     expanding over the content instead of pushing it */
  /* opaque pinned surface — backdrop-filter shimmered over animated
     charts in desktop Chrome (see .el8-nav__bar note in shell.css) */
  .bd-toc.is-stuck{position:fixed;top:84px;left:16px;right:16px;z-index:55;
    padding:12px 18px;background:#0D0E11;
    border-color:rgba(255,255,255,.14);box-shadow:0 22px 60px rgba(0,0,0,.55)}
  .bd-hero h1{font-size:42px}
}
@media (max-width:720px){
  .bd-hero{padding:140px 20px 0}
  .bd-layout,.bd-related,.bd-series{padding:0 20px}
  .bd-hero h1{font-size:33px}
  .bd-share--hero{margin-left:0}
  .bd-related__grid{grid-template-columns:1fr}
  .bd-prose h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .bd-prog{transition:none}
  .bd-relcard{transition:none}
  .bd-toc__box{scroll-behavior:auto}
}

/* ==== Diagram engine v5 (2026-09-26) ==================================== */
.bd-dg__nodet{display:inline}
.bd-dg__gread{display:none}
/* a chart the engine could not draw: the author's own lines in the chart
   frame (preview adds the reason; publishing is blocked by ArticleLint) */
.bd-dg--failed{border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:18px 20px}
.bd-dg__fallback{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--text-mid);font-size:15px}
.bd-prose p.bd-dg-warn{margin:0 0 14px;padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.5;
  color:#FFD9D3;background:rgba(255,122,107,.12);border:1px solid rgba(255,122,107,.45)}
.bd-prose p.bd-dg-warn b{color:var(--red);margin-right:4px}
/* "Source:" caption under any chart */
.bd-prose p.bd-dg__source{margin:16px auto 0;max-width:640px;font-size:13px;line-height:1.5;color:var(--text-mid);
  text-align:center}
.bd-dg__sourcek{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);margin-right:8px}
.bd-prose p.bd-dg__source a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
/* image boxed in a one-cell table */
.bd-figure{margin:30px 0}
.bd-figure img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:12px}
/* negative magnitudes (they used to draw as nothing) */
.bd-dg__bar--neg{background:linear-gradient(180deg,rgba(255,122,107,.8),rgba(255,122,107,.22));
  border-color:rgba(255,122,107,.55)}
.bd-dg__gbar--neg{outline:1.5px solid var(--red);outline-offset:-1.5px}
.bd-dg__wfbar--total.bd-dg__wfbar--neg{background:rgba(255,122,107,.35);border-color:rgba(255,122,107,.6)}
.bd-dg__hmc--na{color:var(--text-dim);background:rgba(255,255,255,.03)!important}
/* inspectable marks gained keyboard focus */
.bd-dg__bub:focus-visible,.bd-dg__sdot:focus-visible,.bd-dg__tcell:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}
/* many items: charts scroll inside their own frame instead of pushing
   columns past the article edge (12 bars ran 322px out at 320px) */
.bd-dg__hmscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bd-dg--heatmap.bd-dg--dense .bd-dg__hm{min-width:calc(var(--cols,8) * 52px)}
/* 8+ columns: use the full column width at every size, and scroll
   inside the chart only when even that is too narrow (12 bars ran past
   the article at 768 and 1280 too, not just on phones) */
.bd-dg--bars.bd-dg--dense,.bd-dg--grouped.bd-dg--dense,.bd-dg--stacked.bd-dg--dense{max-width:none}
.bd-dg--dense .bd-dg__barrow{grid-template-columns:repeat(var(--n,4),minmax(54px,1fr));gap:0 8px;
  overflow-x:auto;overflow-y:hidden;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.bd-dg--dense .bd-dg__blabel{font-size:11.5px}
.bd-dg--wf.bd-dg--dense .bd-dg__wfcol:last-child .bd-dg__wfbar .bd-dg__v{left:auto;right:0;transform:none}
.bd-dg--wf.bd-dg--dense .bd-dg__wfbar .bd-dg__v{font-size:11px}
/* thinned axis labels on long series (the data table keeps them all) */
.bd-dg__axis .bd-dg__xl--thin{display:none}
@media (max-width:700px){
  /* phones use their own picks, not the every-other-label rule */
  .bd-dg__axis--thin .bd-dg__mono.bd-dg__mono{display:block}
  .bd-dg__axis--thin .bd-dg__mono.bd-dg__xl--thinp{display:none}
}
@media (max-width:700px){
  .bd-dg--wf.bd-dg--dense{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bd-dg--wf.bd-dg--dense .bd-dg__wfplot{min-width:calc(var(--n,4) * 58px)}
}
/* the CTA band's button opens the enquiry popup (articles never link to
   /contact); give the <button> the link's typography */
.bd-prose button.bd-midcta__btn{font-family:inherit;line-height:1}
/* component titles that are real headings again (outline preserved):
   they take their look from the component class, not prose h3 */
.bd-prose h3.rb-step__t,.bd-prose h4.rb-step__t,.bd-prose h3.rb-report__name{margin:0;letter-spacing:inherit;line-height:inherit}
.bd-prose h3.rb-report__name{font:inherit;color:inherit}
.bd-prose h3.rb-phase__head,.bd-prose h4.rb-phase__head{margin:0;font-size:inherit;font-weight:inherit;
  line-height:inherit;letter-spacing:inherit}
/* ranked cards: optional third column as a muted sub-line */
.rb-q__sub{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--text-mid)}
.rb-q__subk{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim)}

/* ==== Editorial blocks (2026-09-26): CODE, SCREENSHOT, VERDICT, LAW,
   TOOL, KEY NUMBERS, COMPARE, TEMPLATE, UPDATED, DEFINITION, QUOTE ====
   Same panel language as the lab-note/proof panels (dark card, gold top
   edge, floating mono chip). Entrance states live ONLY under
   html.el8-js .bd-block:not(.is-in); the base is the finished block. */
.bd-prose .bd-block{position:relative;margin:30px 0 34px}
.bd-block__chip{position:absolute;top:-13px;left:20px;z-index:2;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  padding:4px 12px;border-radius:100px;background:#141518;border:1px solid rgba(244,160,0,.45)}
.bd-block--failed{border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:18px 20px}

/* ---- CODE: terminal frame, copy, line numbers, lines type in ---- */
.bd-prose .bd-code{border-radius:14px;overflow:hidden;background:#0A0B0D;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.bd-code__head{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;margin:0;
  background:#111317;border-bottom:1px solid rgba(255,255,255,.08)}
.bd-code__dots{display:inline-flex;gap:6px}
.bd-code__dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.bd-code__dots i:first-child{background:rgba(255,122,107,.7)}
.bd-code__dots i:nth-child(2){background:rgba(244,160,0,.7)}
.bd-code__dots i:last-child{background:rgba(79,191,160,.7)}
.bd-code__label{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  letter-spacing:.04em;color:var(--text-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-code__copy{flex:0 0 auto;font:600 12px/1 var(--font-head, inherit);letter-spacing:.02em;color:var(--gold);
  background:rgba(244,160,0,.08);border:1px solid rgba(244,160,0,.4);border-radius:100px;padding:7px 14px;
  cursor:pointer;min-height:32px;transition:background .25s,color .25s,border-color .25s}
.bd-code__copy:hover{background:rgba(244,160,0,.16)}
.bd-code__copy:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bd-code__copy.is-done{color:var(--green);border-color:rgba(79,191,160,.55);background:rgba(79,191,160,.1)}
.bd-prose .bd-code__pre{margin:0;padding:16px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;color:#E6E3DA;
  background:none;border:0;border-radius:0;tab-size:2}
.bd-code__pre:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.bd-code__code{display:block;counter-reset:bdln;min-width:max-content;white-space:pre}
.bd-code__line{display:inline-block;min-width:100%;padding:0 20px 0 0;counter-increment:bdln}
.bd-code__line::before{content:counter(bdln);display:inline-block;width:3.2em;padding-right:1.1em;text-align:right;
  color:rgba(255,255,255,.22);user-select:none;-webkit-user-select:none}
.bd-code__c{color:#7E8A99;font-style:italic}
.bd-code__k{color:var(--gold)}
.bd-code__v{color:#B9E6D9}
.bd-code__s{color:#B9E6D9}
/* the editor's own <pre> blocks have no numbered lines: pad them */
.bd-code__pre:not(:has(.bd-code__line)){padding:16px 20px}
.bd-code__pre code:not(.bd-code__code){white-space:pre;background:none;padding:0;font-size:inherit;color:inherit}
html.el8-js .bd-block--code:not(.is-in) .bd-code__line{opacity:0;transform:translateX(-8px)}
.bd-code__line{transition:opacity .45s ease calc(var(--i,0)*.045s + .15s),transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.045s + .15s)}

/* ---- SCREENSHOT: framed image, pulsing numbered pins, linked notes ---- */
.bd-prose .bd-block--screenshot{margin:34px 0 38px}
.bd-shot__t{font-family:var(--font-head);font-weight:700;font-size:16.5px;color:var(--text);margin-bottom:12px}
.bd-shot__frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:#0D0E11;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.bd-prose .bd-shot__frame img{display:block;width:100%;height:auto;border:0;border-radius:0}
.bd-shot__pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:800 13px/1 var(--font-head);color:#141518;
  background:var(--gold);box-shadow:0 0 0 3px rgba(20,21,24,.85),0 6px 18px rgba(0,0,0,.45);z-index:1;
  transition:transform .5s cubic-bezier(.34,1.5,.5,1) calc(var(--i,0)*.12s + .2s)}
.bd-shot__pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(244,160,0,.7);
  opacity:0}
.bd-block--screenshot.is-in .bd-shot__pin::after{animation:bdpinping 2.6s ease-out calc(var(--i,0)*.4s + 1s) 3}
@keyframes bdpinping{0%{opacity:.8;transform:scale(.8)}70%,100%{opacity:0;transform:scale(1.6)}}
.bd-shot__pin.is-hl{transform:translate(-50%,-50%) scale(1.25);background:#fff}
html.el8-js .bd-block--screenshot:not(.is-in) .bd-shot__pin{transform:translate(-50%,-50%) scale(0)}
.bd-shot__notes{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;counter-reset:none}
.bd-prose .bd-shot__note{display:flex;gap:12px;align-items:flex-start;margin:0;padding:10px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:border-color .25s,background .25s}
.bd-prose .bd-shot__note::before{display:none}
.bd-shot__note.is-hl{border-color:rgba(244,160,0,.5);background:rgba(244,160,0,.06)}
.bd-shot__num{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 12px/1 var(--font-head);color:#141518;background:var(--gold)}
.bd-shot__txt{font-size:15px;line-height:1.55;color:var(--text-mid)}
.bd-shot__cap{margin-top:10px;font-size:13.5px;color:var(--text-dim);text-align:center}

/* ---- VERDICT: score ring, best-for / avoid-if, bottom line ---- */
.bd-prose .bd-block--verdict{padding:28px 26px 22px;border-radius:18px;background:#101114;
  border:1px solid rgba(255,255,255,.14);border-top:2px solid rgba(244,160,0,.6);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.bd-verdict__t{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.015em;color:var(--text);margin:2px 0 16px}
.bd-verdict__cols{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:16px}
.bd-verdict__col{display:grid;gap:10px;align-content:start;padding:0}
.bd-verdict__cols[style*="--n:2"] .bd-verdict__col,.bd-verdict__cols[style*="--n:3"] .bd-verdict__col{
  padding:16px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08)}
.bd-verdict__name{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--gold)}
.bd-verdict__score{position:relative;width:86px;height:86px}
.bd-verdict__score svg{width:100%;height:100%;transform:rotate(-90deg)}
.bd-verdict__track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:4}
.bd-verdict__arc{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0));transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1) .25s}
html.el8-js .bd-block--verdict:not(.is-in) .bd-verdict__arc{stroke-dashoffset:100}
.bd-verdict__num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:10px;
  font:800 24px/1 var(--font-head);color:var(--text)}
.bd-verdict__of{position:absolute;left:0;right:0;bottom:21px;text-align:center;font-size:11px;color:var(--text-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bd-verdict__row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.025)}
.bd-verdict__k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.bd-verdict__v{font-size:15px;line-height:1.5;color:var(--text-mid)}
.bd-verdict__row--good .bd-verdict__k{color:var(--green)}
.bd-verdict__row--good{box-shadow:inset 3px 0 0 rgba(79,191,160,.6)}
.bd-verdict__row--bad .bd-verdict__k{color:var(--red)}
.bd-verdict__row--bad{box-shadow:inset 3px 0 0 rgba(255,122,107,.6)}
.bd-verdict__row--cost .bd-verdict__k{color:var(--gold)}
.bd-verdict__row--cost{box-shadow:inset 3px 0 0 rgba(244,160,0,.55)}
.bd-verdict__list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.bd-prose .bd-verdict__list li{margin:0;padding-left:22px;position:relative;font-size:14.5px;color:var(--text-mid)}
.bd-prose .bd-verdict__list li::before{content:attr(data-sign);position:absolute;left:4px;top:0;border:0;
  width:auto;height:auto;transform:none;background:none;font-weight:800}
.bd-verdict__list--good li::before{color:var(--green)}
.bd-verdict__list--bad li::before{color:var(--red)}
.bd-prose p.bd-verdict__bottom{margin:4px 0 0;padding:12px 14px;border-radius:12px;background:rgba(244,160,0,.07);
  border:1px solid rgba(244,160,0,.28);font-size:15px;line-height:1.55;color:var(--text)}
.bd-prose p.bd-verdict__bottom b{color:var(--gold);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;margin-right:6px}
.bd-prose p.bd-verdict__note{margin:0;font-size:14.5px;color:var(--text-mid)}
html.el8-js .bd-block--verdict:not(.is-in) .bd-verdict__row,
html.el8-js .bd-block--verdict:not(.is-in) .bd-verdict__bottom{opacity:0;transform:translateY(10px)}
.bd-verdict__row,.bd-verdict__bottom{transition:opacity .55s ease .3s,transform .55s cubic-bezier(.2,.8,.2,1) .3s}

/* ---- LAW: status pill (live / pending / gone), facts grid ---- */
.bd-prose .bd-block--law{padding:28px 26px 20px;border-radius:18px;background:#101114;
  border:1px solid rgba(255,255,255,.14);border-left:3px solid rgba(139,155,176,.7);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.bd-law__top{display:flex;justify-content:flex-end;margin:-6px 0 6px}
.bd-law__status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:100px;
  font:700 12.5px/1 var(--font-head);letter-spacing:.02em}
.bd-law__dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.bd-law__status--live{color:var(--green);background:rgba(79,191,160,.1);border:1px solid rgba(79,191,160,.45)}
.bd-law__status--pending{color:var(--gold);background:rgba(244,160,0,.1);border:1px solid rgba(244,160,0,.45)}
.bd-law__status--gone{color:var(--red);background:rgba(255,122,107,.1);border:1px solid rgba(255,122,107,.45)}
.bd-block--law.is-in .bd-law__status--pending .bd-law__dot,
.bd-block--law.is-in .bd-law__status--live .bd-law__dot{animation:bdlawpulse 2.2s ease-in-out 4}
@keyframes bdlawpulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 5px transparent}}
.bd-law__t{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.015em;color:var(--text);margin-bottom:14px}
.bd-law__grid{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.bd-law__item{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.bd-law__item dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 4px}
.bd-law__item dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--text)}
.bd-prose p.bd-law__means{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--text-mid)}
.bd-prose p.bd-law__means b{color:var(--text)}
.bd-prose p.bd-law__note{margin:10px 0 0;font-size:14.5px;color:var(--text-mid)}
.bd-prose p.bd-law__src{margin:14px 0 0;font-size:13.5px;color:var(--text-mid)}
.bd-prose p.bd-law__src a{color:var(--gold)}
.bd-prose p.bd-law__fine{margin:8px 0 0;font-size:12px;color:var(--text-dim)}
html.el8-js .bd-block--law:not(.is-in) .bd-law__item{opacity:0;transform:translateY(8px)}
.bd-law__item{transition:opacity .5s ease .2s,transform .5s cubic-bezier(.2,.8,.2,1) .2s}

/* ---- TOOL: glowing card with an animated gauge icon ---- */
.bd-prose .bd-block--tool{margin:30px 0}
.bd-prose a.bd-tool{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:20px 22px;border-radius:18px;text-decoration:none;color:inherit;border:1px solid rgba(244,160,0,.4);
  background:radial-gradient(120% 140% at 0% 0%,rgba(244,160,0,.12),rgba(244,160,0,0) 55%),#101114;
  box-shadow:0 14px 40px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.bd-prose a.bd-tool:hover{transform:translateY(-3px);border-color:rgba(244,160,0,.75);box-shadow:0 20px 50px rgba(244,160,0,.12)}
.bd-prose a.bd-tool:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bd-tool__icon{position:relative;width:52px;height:52px;border-radius:14px;background:rgba(244,160,0,.12);
  border:1px solid rgba(244,160,0,.4);display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:11px 10px}
.bd-tool__icon i{width:7px;border-radius:3px;background:var(--gold);height:calc(35% + var(--i,0)*25%);
  transform-origin:bottom;transition:transform .7s cubic-bezier(.34,1.4,.5,1) calc(var(--i,0)*.12s + .2s)}
html.el8-js .bd-block--tool:not(.is-in) .bd-tool__icon i{transform:scaleY(.15)}
.bd-tool__body{display:grid;gap:3px;min-width:0}
.bd-tool__k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green)}
.bd-tool__name{font-family:var(--font-head);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--text)}
.bd-tool__why{font-size:14.5px;line-height:1.5;color:var(--text-mid)}
.bd-tool__go{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:700 14px/1 var(--font-head);
  color:var(--ink,#0A0A0A);background:var(--gold);padding:12px 16px;border-radius:100px}
.bd-tool__go i{font-style:normal;transition:transform .3s}
.bd-prose a.bd-tool:hover .bd-tool__go i{transform:translateX(4px)}

/* ---- KEY NUMBERS: count-up tiles with a growing underline ---- */
.bd-stats__t{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.bd-stats__grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.bd-stats__tile{position:relative;display:grid;gap:6px;align-content:start;padding:18px 18px 16px;border-radius:16px;
  background:#101114;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.bd-stats__tile::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(244,160,0,.1));transform-origin:left;
  transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.14s + .3s)}
html.el8-js .bd-block--stats:not(.is-in) .bd-stats__tile::after{transform:scaleX(0)}
.bd-stats__v{font:800 34px/1.05 var(--font-head);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.bd-stats__k{font-size:14px;line-height:1.45;color:var(--text-mid)}
.bd-stats__src{font-size:12px;line-height:1.4;color:var(--text-dim)}
.bd-stats__src a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px}
html.el8-js .bd-block--stats:not(.is-in) .bd-stats__tile{opacity:0;transform:translateY(12px)}
.bd-stats__tile{transition:opacity .55s ease calc(var(--i,0)*.12s + .1s),transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.12s + .1s)}

/* ---- COMPARE: drag slider over two images, or two text cards ---- */
.bd-compare__t{font-family:var(--font-head);font-weight:700;font-size:16.5px;color:var(--text);margin-bottom:12px}
.bd-compare__stage{position:relative;display:grid;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:#0D0E11;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bd-compare__layer{grid-area:1/1;position:relative}
.bd-prose .bd-compare__layer img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.bd-compare__layer--after{clip-path:inset(0 0 0 var(--pos,50%))}
.bd-compare__tag{position:absolute;top:12px;font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 10px;border-radius:100px;background:rgba(10,11,13,.8)}
.bd-compare__tag--before{left:12px;color:var(--red);border:1px solid rgba(255,122,107,.5)}
.bd-compare__tag--after{right:12px;color:var(--green);border:1px solid rgba(79,191,160,.5)}
.bd-compare__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;z-index:2}
.bd-compare__handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;
  color:#141518;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.bd-compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;
  -webkit-appearance:none;appearance:none}
.bd-compare__range:focus-visible + .bd-compare__handle,.bd-compare__stage:focus-within .bd-compare__handle::after{
  outline:3px solid var(--gold);outline-offset:2px}
.bd-block--compare.is-in:not(.is-touched) .bd-compare__stage{animation:bdcmphint 2.4s cubic-bezier(.45,0,.2,1) .6s 1}
@keyframes bdcmphint{0%,100%{--pos:50%}30%{--pos:32%}65%{--pos:68%}}
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.bd-compare__notes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bd-prose p.bd-compare__note{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-mid)}
.bd-prose p.bd-compare__note b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.bd-compare__note--before b{color:var(--red)}
.bd-compare__note--after b{color:var(--green)}
.bd-compare__pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
.bd-compare__card{position:relative;padding:34px 18px 16px;border-radius:16px;background:#101114;border:1px solid rgba(255,255,255,.12)}
.bd-compare__card--before{border-color:rgba(255,122,107,.4);background:linear-gradient(180deg,rgba(255,122,107,.06),rgba(255,122,107,0) 60%),#101114}
.bd-compare__card--after{border-color:rgba(79,191,160,.45);background:linear-gradient(180deg,rgba(79,191,160,.07),rgba(79,191,160,0) 60%),#101114}
.bd-compare__card .bd-compare__tag{top:12px;left:16px;right:auto}
.bd-prose .bd-compare__card p{margin:0 0 6px;font-size:15px;line-height:1.55;color:var(--text-mid)}
.bd-compare__arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#141518;background:var(--gold);font-weight:800}
.bd-block--compare.is-in .bd-compare__arrow{animation:bdcmparrow 1.8s ease-in-out .5s 3}
@keyframes bdcmparrow{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-30%,-50%)}}
html.el8-js .bd-block--compare:not(.is-in) .bd-compare__card--after{opacity:0;transform:translateX(14px)}
.bd-compare__card--after{transition:opacity .6s ease .35s,transform .6s cubic-bezier(.2,.8,.2,1) .35s}
.bd-prose p.bd-compare__extra{margin:10px 0 0;font-size:14.5px;color:var(--text-mid)}
.bd-compare__cap{margin-top:10px;font-size:13.5px;color:var(--text-dim);text-align:center}

/* ---- TEMPLATE: copyable text with [placeholders] ---- */
.bd-prose .bd-block--template{border-radius:16px;background:#101114;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.3);overflow:hidden}
.bd-tpl__head{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  background:#121418}
.bd-tpl__head .bd-block__chip{position:static}
.bd-tpl__t{flex:1;min-width:0;font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--text)}
.bd-tpl__body{padding:18px 20px;font-size:15px;line-height:1.65;color:var(--text)}
.bd-prose .bd-tpl__line{margin:0;white-space:pre-wrap}
.bd-tpl__ph{color:var(--gold);background:rgba(244,160,0,.1);border-radius:5px;padding:1px 4px;
  box-shadow:inset 0 -1px 0 rgba(244,160,0,.5)}
.bd-block--template.is-in .bd-tpl__ph{animation:bdphglow 1.6s ease-in-out .6s 2}
@keyframes bdphglow{50%{background:rgba(244,160,0,.24)}}

/* ---- UPDATED: what changed in a refreshed guide ---- */
.bd-prose .bd-block--updated{padding:26px 24px 18px;border-radius:16px;background:#101114;
  border:1px solid rgba(255,255,255,.12);border-left:3px solid rgba(79,191,160,.65)}
.bd-upd__top{display:flex;justify-content:flex-end;margin:-6px 0 8px}
.bd-upd__date{font:700 12.5px/1 var(--font-head);color:var(--green);padding:6px 12px;border-radius:100px;
  background:rgba(79,191,160,.1);border:1px solid rgba(79,191,160,.4)}
.bd-upd__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bd-prose .bd-upd__item{position:relative;margin:0;padding-left:28px;font-size:15px;line-height:1.55;color:var(--text-mid)}
.bd-prose .bd-upd__item::before{content:"~";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--gold);background:rgba(244,160,0,.1);border:0;transform:none}
.bd-prose .bd-upd__item--add::before{content:"+";color:var(--green);background:rgba(79,191,160,.12)}
.bd-prose .bd-upd__item--del::before{content:"\2212";color:var(--red);background:rgba(255,122,107,.12)}
html.el8-js .bd-block--updated:not(.is-in) .bd-upd__item{opacity:0;transform:translateX(-8px)}
.bd-upd__item{transition:opacity .45s ease calc(var(--i,0)*.08s + .15s),transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.08s + .15s)}

/* ---- DEFINITION: dictionary card ---- */
.bd-prose .bd-block--definition{padding:28px 26px 20px;border-radius:18px;
  background:linear-gradient(135deg,rgba(244,160,0,.07),rgba(244,160,0,0) 50%),#101114;
  border:1px solid rgba(244,160,0,.35)}
.bd-prose p.bd-def__term{margin:0 0 8px;font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--text)}
.bd-prose p.bd-def__term dfn{font-style:normal;background-image:linear-gradient(90deg,var(--gold),var(--gold));background-repeat:no-repeat;
  background-size:100% 2px;background-position:0 100%;transition:background-size .9s cubic-bezier(.2,.8,.2,1) .3s}
html.el8-js .bd-block--definition:not(.is-in) .bd-def__term dfn{background-size:0 2px}
.bd-prose p.bd-def__text{margin:0 0 8px;font-size:16px;line-height:1.65;color:var(--text)}
.bd-prose p.bd-def__aka,.bd-prose p.bd-def__ex{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14.5px;color:var(--text-mid)}
.bd-def__k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);margin-right:4px}
.bd-def__chip{padding:3px 10px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text)}

/* ---- QUOTE: pull / expert quote ---- */
.bd-prose .bd-block--quote{margin:38px 0 40px;padding:8px 0 0 64px}
.bd-quote__mark{position:absolute;left:0;top:-18px;font:800 96px/1 var(--font-head);color:var(--gold);opacity:.85;
  transition:transform .8s cubic-bezier(.34,1.4,.5,1) .1s}
html.el8-js .bd-block--quote:not(.is-in) .bd-quote__mark{transform:scale(.4) rotate(-12deg)}
.bd-prose .bd-quote__text{margin:0;padding:0;border:0;background:none;font-family:var(--font-head);font-weight:700;
  font-size:22px;line-height:1.4;letter-spacing:-.012em;color:var(--text)}
.bd-prose .bd-quote__text p{margin:0 0 10px;font:inherit;color:inherit}
.bd-quote__by{display:flex;align-items:center;gap:12px;margin-top:8px}
.bd-quote__av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 13px/1 var(--font-head);color:#141518;background:var(--gold)}
.bd-quote__who{display:grid;font-size:14px;line-height:1.35;color:var(--text-mid)}
.bd-quote__who b{color:var(--text);font-weight:700}

@media (max-width:700px){
  .bd-prose a.bd-tool{grid-template-columns:auto minmax(0,1fr)}
  .bd-tool__go{grid-column:1/-1;justify-content:center}
  .bd-verdict__cols{grid-template-columns:1fr}
  .bd-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-stats__v{font-size:28px}
  .bd-compare__pair{grid-template-columns:1fr;gap:26px}
  .bd-compare__arrow{transform:translate(-50%,-50%) rotate(90deg)}
  .bd-block--compare.is-in .bd-compare__arrow{animation:none}
  .bd-compare__notes{grid-template-columns:1fr}
  .bd-prose .bd-block--quote{padding-left:44px}
  .bd-quote__mark{font-size:72px;top:-12px}
  .bd-prose .bd-quote__text{font-size:19px}
  .bd-verdict__row{grid-template-columns:1fr;gap:3px}
  .bd-prose .bd-block--verdict,.bd-prose .bd-block--law,.bd-prose .bd-block--definition{padding:24px 16px 16px}
}
@media (max-width:420px){.bd-stats__grid{grid-template-columns:1fr}}
/* reduced motion: blog-detail.js marks every block is-in at once; nothing
   animates or transitions (entrance offsets never apply) */
@media (prefers-reduced-motion:reduce){
  .bd-block *,.bd-block *::before,.bd-block *::after{animation:none!important;transition:none!important}
}

/* ==========================================================================
   Chart upgrades approved from review batch 1 (26 September 2026)
   1 11px text floor · 2 line y-axis · 3 horizontal bars from 8 items ·
   4 numbered scatter/bubble markers · 6 opacity/transform-only pulses ·
   7 pause button on looping charts · 8 heatmap ripple + crosshair ·
   9 still donut with hover read-out · 10 busy cycles as a list on phones
   ========================================================================== */

/* 1 · no chart text under 11px */
.bd-dg__hub-d,.bd-dg__note,.bd-dg__tiphint,.bd-dg__tiphint-h,.bd-dg__tick,.bd-dg__ycap,
.bd-dg__xcap,.bd-dg__tval,.bd-dg__sknode,.bd-dg__drop{font-size:11px}
@media (max-width:700px){
  .bd-dg__axis .bd-dg__mono,.bd-dg__wfbar .bd-dg__v,.bd-dg__wfcol .bd-dg__blabel,
  .bd-dg__hmh,.bd-dg__hmr,.bd-dg__hmc,.bd-dg__tval,.bd-dg__tcell--sm .bd-dg__tval,
  .bd-dg--tl:not(.bd-dg--tlvert) .bd-dg__tlchip,.bd-dg--cycle .bd-dg__node,.bd-dg__sknode{font-size:11px}
  /* the slanted waterfall labels are longer at 11px: more room on the left */
  .bd-dg__wfplot{padding-left:30px}
}
@media (max-width:374px){.bd-dg__wfplot{padding-left:36px}}

/* 2 · line charts: top, middle and bottom values with gridlines that draw in */
.bd-dg--line .bd-dg__plotarea{margin-left:54px}
.bd-dg--line .bd-dg__axis{left:54px}
.bd-dg__yaxis{position:absolute;inset:0;pointer-events:none}
/* the three gridlines sit at the tick values (10, 30 and 50 of the 56-unit plot) */
.bd-dg__yaxis::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 0 17.857%/100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 0 53.571%/100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) 0 89.286%/100% 1px no-repeat;
  transform-origin:left;transition:transform 1s cubic-bezier(.6,.1,.3,1) .15s}
.bd-dg__ytick{position:absolute;right:calc(100% + 10px);transform:translateY(-50%);
  font-size:11px;color:var(--text-dim);white-space:nowrap;transition:opacity .6s ease .5s}
html.el8-js .bd-dg--line:not(.is-in) .bd-dg__yaxis::before{transform:scaleX(0)}
html.el8-js .bd-dg--line:not(.is-in) .bd-dg__ytick{opacity:0}
@media (max-width:700px){
  .bd-dg--line .bd-dg__plotarea{margin-left:50px}
  .bd-dg--line .bd-dg__axis{left:50px}
  .bd-dg__ytick{right:calc(100% + 6px)}
}

/* 3 · eight or more bars lie on their side: full labels left, values right */
.bd-dg--bars.bd-dg--dense{max-width:680px}
.bd-dg--bars.bd-dg--dense .bd-dg__barrow{display:grid;grid-template-columns:1fr;gap:9px;
  min-height:0;overflow:visible;padding-bottom:0}
.bd-dg--bars.bd-dg--dense .bd-dg__bcol{display:grid;height:auto;
  grid-template-columns:minmax(96px,32%) minmax(0,1fr) auto;grid-template-areas:"l b v";
  align-items:center;gap:0 12px;transition-delay:calc(var(--i,0)*.07s)}
.bd-dg--bars.bd-dg--dense .bd-dg__blabel{grid-area:l;text-align:right;font-size:13px;line-height:1.3}
.bd-dg--bars.bd-dg--dense .bd-dg__bar{grid-area:b;width:max(6px,calc(var(--h,50) * 1%));
  height:20px;min-height:0;border-radius:3px 7px 7px 3px;
  background:linear-gradient(90deg,rgba(244,160,0,.25),rgba(244,160,0,.85));
  transform-origin:left;transition:transform .9s cubic-bezier(.34,1.2,.45,1) calc(var(--i,0)*.07s + .2s)}
.bd-dg--bars.bd-dg--dense .bd-dg__bar--neg{background:linear-gradient(90deg,rgba(255,122,107,.22),rgba(255,122,107,.8))}
.bd-dg--bars.bd-dg--dense .bd-dg__v{grid-area:v;min-width:52px;font-size:13px}
html.el8-js .bd-dg--bars.bd-dg--dense:not(.is-in) .bd-dg__bar{transform:scaleX(0)}
html.el8-js .bd-dg--bars.bd-dg--dense:not(.is-in) .bd-dg__bcol{transform:translateX(-10px)}
/* the light band runs along the bar instead of up it */
.bd-dg--bars.bd-dg--dense .bd-dg__bar::after{
  background:linear-gradient(90deg,transparent 28%,rgba(255,255,255,.28) 50%,transparent 72%);
  transform:translateX(-135%)}
.bd-dg--bars.bd-dg--dense.is-in .bd-dg__bar::after{animation-name:el8dgsheenx}
@media (max-width:700px){
  .bd-dg--bars.bd-dg--dense .bd-dg__bcol{grid-template-columns:minmax(80px,36%) minmax(0,1fr) auto;gap:0 8px}
  .bd-dg--bars.bd-dg--dense .bd-dg__blabel,.bd-dg--bars.bd-dg--dense .bd-dg__v{font-size:12px}
  .bd-dg--bars.bd-dg--dense .bd-dg__v{min-width:40px}
}

/* 4 · numbered markers: points match their legend by number, not colour alone */
.bd-dg__mk{display:grid;place-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;font-size:10.5px;line-height:1;color:#0B0C0E}
.bd-dg__lg i:has(.bd-dg__mk){width:17px;height:17px;border-radius:50%;display:grid;place-items:center}
.bd-dg__sdot .bd-dg__mk{position:absolute;inset:0}
.bd-dg__sdot:has(.bd-dg__mk){width:18px;height:18px;margin:-9px 0 0 -9px}

/* 6 · pulses animate opacity and transform only, so nothing repaints */
.bd-dg__pt--max::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(244,160,0,.7);opacity:0;pointer-events:none}
.bd-dg--line.is-in .bd-dg__pt--max::after{animation:el8dgring 2.4s ease-out 2s infinite}
@keyframes el8dgring{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(2.2);opacity:0}}
.bd-dg__tlnode::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  box-shadow:0 0 0 2.5px rgba(244,160,0,.9),0 0 20px rgba(244,160,0,.6);opacity:0;pointer-events:none}
.bd-dg--tl.is-in .bd-dg__tlnode::after{animation:el8dgblink 5.5s ease-in-out calc(var(--i,0)*.85s + 2.2s) infinite}
@keyframes el8dgblink{0%,88%,100%{opacity:0}94%{opacity:1}}

/* 7 · a pause button on every chart that loops (the cycle keeps its own) */
.bd-dg__pause{position:absolute;top:-4px;right:0;z-index:3;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;font-size:12px;line-height:1;
  color:var(--text-mid);background:#101114;border:1px solid rgba(255,255,255,.18);
  opacity:.55;transition:opacity .25s,border-color .25s,color .25s}
.bd-dg__pause[hidden]{display:none}
.bd-dg:hover .bd-dg__pause,.bd-dg__pause:focus-visible,.bd-dg__pause[aria-pressed="true"]{opacity:1}
.bd-dg__pause:hover,.bd-dg__pause:focus-visible{color:var(--gold);border-color:rgba(244,160,0,.6)}
.bd-dg__pause:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:none){.bd-dg__pause{opacity:.85}}
/* keep a centred title clear of the button */
.bd-dg.has-pause > .bd-dg__gtitle{padding-left:36px;padding-right:36px}

/* 8 · heatmap: cells ripple in diagonally; hovering shows a crosshair */
.bd-dg__hmc{transition-delay:calc((var(--r,0) + var(--c,0)) * .05s + .15s)}
.bd-dg__hm.is-cross .bd-dg__hmc{opacity:.32;transition-delay:0s;transition-duration:.18s}
.bd-dg__hm.is-cross .bd-dg__hmc.is-x{opacity:1}
.bd-dg__hm.is-cross .bd-dg__hmc.is-cur{opacity:1;transform:scale(1.08);
  box-shadow:0 0 0 2px var(--gold);position:relative;z-index:1}
.bd-dg__hmh.is-x,.bd-dg__hmr.is-x{color:var(--gold)}

/* 9 · donut: sweeps in once and holds still; hover lifts a slice */
.bd-dg__dwrap svg{transition:transform 1.4s cubic-bezier(.6,.1,.3,1) .1s}
html.el8-js .bd-dg--donut:not(.is-in) svg{transform:rotate(-100deg)}
.bd-dg__slice{transition:stroke-dashoffset .9s cubic-bezier(.6,.1,.3,1) calc(var(--i,0)*.14s + .2s),
  opacity .2s,stroke-width .2s}
.bd-dg--donut.is-focus .bd-dg__slice{opacity:.28}
.bd-dg--donut.is-focus .bd-dg__slice.is-on{opacity:1;stroke-width:8.5}
.bd-dg--donut .bd-dg__lg{cursor:default;transition:opacity .2s}
.bd-dg--donut.is-focus .bd-dg__lg{opacity:.45}
.bd-dg--donut.is-focus .bd-dg__lg.is-on{opacity:1}

/* 10 · cycles with six or more steps become a numbered loop list on phones */
.bd-dg__cyd{display:none}
@media (max-width:700px){
  .bd-dg--cycle.bd-dg--cyclelist{width:auto;aspect-ratio:auto;display:grid;gap:10px;
    padding:4px 0 34px 38px;transform:none!important;counter-reset:cy}
  .bd-dg--cyclelist svg,.bd-dg--cyclelist .bd-dg__hub{display:none}
  /* the loop: a rail down the left that bends back to the top */
  .bd-dg--cyclelist::before{content:"";position:absolute;left:12px;top:18px;bottom:16px;width:14px;
    border:2px solid rgba(244,160,0,.4);border-right:0;border-radius:14px 0 0 14px}
  .bd-dg--cyclelist::after{content:"\21BA  repeats";position:absolute;left:38px;bottom:4px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:var(--gold)}
  .bd-dg--cyclelist .bd-dg__node{position:relative;left:auto;top:auto;transform:none!important;
    display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;max-width:none;
    white-space:normal;text-align:left;border-radius:12px;padding:10px 14px;font-size:14px;
    counter-increment:cy;transition:opacity .6s ease calc(var(--i,0)*.1s),
    transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.1s),background .45s,border-color .45s,color .45s}
  .bd-dg--cyclelist .bd-dg__node::before{content:counter(cy);grid-row:span 2;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--gold)}
  .bd-dg--cyclelist .bd-dg__cyd{display:block;grid-column:2;font-family:var(--font-body,inherit);font-weight:400;
    font-size:13px;line-height:1.45;color:var(--text-dim)}
  html.el8-js .bd-dg--cycle.bd-dg--cyclelist:not(.is-in) .bd-dg__node{transform:translateX(-10px)!important}
}

@media (prefers-reduced-motion:reduce){
  .bd-dg__pt--max::after,.bd-dg__tlnode::after{animation:none!important;opacity:0}
  .bd-dg__dwrap svg{transition:none}
}

/* ------------------------------------------------------------
   Print: every chart and block in its finished state (the inline
   beforeprint handler adds .is-in), the dark design kept so the light
   text stays readable, and the page chrome left off the paper.
   ------------------------------------------------------------ */
@media print{
  html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .el8-nav,.el8-mnav,.el8-mega,.el8-modal,.el8-footwrap,.el8-close,.bd-prog,.bd-aside,
  .bd-share,.bd-related,.bd-series,.bd-dg__cyclepause,[data-copy-target]{display:none!important}
  .bd-layout__grid{display:block!important}
  html.el8-js [data-rise],.bd-rise{opacity:1!important;transform:none!important}
  .bd-dg,.bd-block,.rb-tablewrap,figure{break-inside:avoid}
  .bd-prose h2,.bd-prose h3{break-after:avoid}
}