/* ==========================================================================
   Duologue blog. Built on the Website design tokens (tokens/*.css):
   Satoshi for everything you read, JetBrains Mono only for small uppercase chrome,
   deep brand blue #0948B6, square chrome (buttons, chips), soft content panels.
   Every class is prefixed .b- so nothing leaks into the marketing pages.
   ========================================================================== */

.b-page{background:var(--surface-page);color:var(--text-body)}
.b-page main{display:block}
#site-header{position:sticky;top:0;z-index:40}
#site-header > header{position:relative !important}

/* Shared chrome ------------------------------------------------------------ */
.b-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-brand)}
.b-eyebrow::before{content:"";width:6px;height:6px;background:currentColor;flex:none}
.b-eyebrow--inverse{color:var(--blue-300)}
.b-eyebrow--dots::after{content:"";width:6px;height:6px;background:currentColor;flex:none}

.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;font:500 13px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent;border-radius:0;white-space:nowrap;transition:var(--transition-control)}
.b-btn:hover{text-decoration:none}
.b-btn--inverse{background:var(--white);color:var(--blue-700)}
.b-btn--inverse:hover{background:var(--blue-050);color:var(--blue-800)}
.b-btn--outline{border-color:rgba(255,255,255,.5);color:var(--white)}
.b-btn--outline:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.08)}

/* Reading progress, pinned under the nav */
.b-progress{position:sticky;top:var(--nav-height);z-index:39;height:0}
.b-progress span{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--blue-700);transform:scaleX(0);transform-origin:0 50%}

/* Hero --------------------------------------------------------------------- */
.b-hero{position:relative;overflow:hidden;padding:clamp(56px,7vw,104px) var(--layout-gutter) clamp(40px,5vw,64px);text-align:center}
.b-hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(9,72,182,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(9,72,182,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 76%);mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 76%)}
.b-hero-inner{position:relative;max-width:1040px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.b-crumbs{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.b-crumbs a{color:var(--text-brand)}
.b-crumbs span[aria-hidden]{color:var(--ink-300)}
.b-title{margin-top:26px;font-family:var(--font-display);font-weight:500;font-size:clamp(44px,6vw,86px);line-height:1.02;letter-spacing:var(--tracking-display);color:var(--text-strong);text-wrap:balance}
.b-title em{display:block;font-style:normal;color:var(--blue-700);text-wrap:balance}
.b-dek{margin-top:26px;max-width:760px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--text-body)}
.b-dek strong{color:var(--text-strong);font-weight:700}
.b-hero--index .b-eyebrow{margin-bottom:0}
.b-hero--index .b-title{font-size:clamp(42px,5.4vw,76px)}
.b-dek{text-wrap:balance}
@media (min-width:760px){ .b-hero--index .b-dek > span{white-space:nowrap} }

.b-byline{margin-top:36px;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:14px 20px}
.b-byline-metas{display:flex;align-items:center;gap:20px}
.b-byline i{width:1px;height:28px;background:var(--line-hairline)}
.b-avatar{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:var(--blue-700);color:var(--white);font:600 14px/1 var(--font-body);letter-spacing:.02em}
.b-byline-who{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.b-byline-who span:first-child{font-size:15px;font-weight:700;color:var(--text-strong);line-height:1.2}
.b-byline-who span:last-child{font-size:14px;color:var(--text-muted);line-height:1.2}
.b-byline-meta{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:15px;font-weight:500;color:var(--text-strong);line-height:1.2}
.b-byline-meta span{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}

/* Layout: sticky contents on the left, a 720px reading column, wide figures break out ---- */
.b-layout{--col:720px;--wide:min(1200px,calc(100vw - 2 * var(--layout-gutter)));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--col)) minmax(0,1fr);column-gap:56px;
  max-width:var(--layout-max);margin:0 auto;padding:clamp(24px,3vw,40px) var(--layout-gutter) 0}
.b-body{grid-column:2;grid-row:1;min-width:0}
.b-toc{grid-column:1;grid-row:1;justify-self:end;align-self:start;position:sticky;top:calc(var(--nav-height) + 40px);width:212px;padding-top:6px;transition:opacity var(--duration-base) var(--ease-standard),visibility var(--duration-base)}
.b-toc.is-tucked{opacity:0;visibility:hidden}
.b-toc ol{list-style:none;margin:18px 0 0;padding:0;border-left:1px solid var(--line-hairline)}
.b-toc li a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--text-muted);transition:color var(--duration-fast),border-color var(--duration-fast)}
.b-toc li a:hover{color:var(--text-strong);text-decoration:none}
.b-toc li a.is-active{color:var(--blue-700);border-left-color:var(--blue-700);font-weight:500}
@media (max-width:1240px){
  .b-layout{grid-template-columns:minmax(0,var(--col));justify-content:center}
  .b-body{grid-column:1;grid-row:2}
  .b-toc{grid-column:1;grid-row:1;position:static;justify-self:stretch;width:auto;padding:22px 24px;margin-bottom:8px;background:var(--surface-sunken);border-radius:var(--radius-lg)}
  .b-toc ol{columns:2;column-gap:32px;border-left:0;margin-top:14px}
  .b-toc li a{padding:6px 0;border-left:0;margin-left:0}
}
@media (max-width:600px){ .b-toc ol{columns:1} }

/* Prose -------------------------------------------------------------------- */
.b-body{counter-reset:bsec bfig}
.b-body > p,.b-section > p,.b-body li{font-size:18px;line-height:1.72;color:var(--ink-700)}
.b-body > p + p,.b-section > p + p{margin-top:22px}
.b-body strong{color:var(--text-strong);font-weight:700}
.b-body a:not([class]){color:var(--text-brand);text-decoration:underline;text-decoration-color:var(--blue-300);text-decoration-thickness:1px;text-underline-offset:4px}
.b-body a:not([class]):hover{text-decoration-color:var(--blue-700)}
.b-body mark{color:var(--text-strong);background:linear-gradient(180deg,transparent 56%,var(--blue-200) 56%, var(--blue-200) 92%,transparent 92%);padding:0 2px}
.b-section{margin-top:clamp(72px,8vw,112px)}
.b-section:first-child{margin-top:clamp(40px,4vw,56px)}
.b-section > h2{scroll-margin-top:calc(var(--nav-height) + 32px);font-family:var(--font-display);font-weight:500;font-size:clamp(30px,3.2vw,42px);line-height:1.08;letter-spacing:-.022em;color:var(--text-strong);margin-bottom:22px;text-wrap:balance}
.b-section.is-numbered > h2::before{counter-increment:bsec;content:counter(bsec,decimal-leading-zero);display:block;margin-bottom:18px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--blue-700)}
.b-section h3{margin:44px 0 12px;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.012em;color:var(--text-strong)}
.b-lead{font-size:21px !important;line-height:1.6 !important;color:var(--text-strong) !important}
.b-body ul:not([class]){list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.b-body ul:not([class]) > li{position:relative;padding-left:28px}
.b-body ul:not([class]) > li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;background:var(--blue-700)}
.b-body sup{font:500 11px/0 var(--font-mono);vertical-align:super;margin-left:2px}
.b-body sup a{color:var(--blue-700);text-decoration:none;padding:0 1px}
.b-body sup a:hover{text-decoration:underline}

/* Wide breakout: any block with .b-wide spans up to 1200px, centred on the column */
.b-wide{width:var(--wide);margin-left:calc(50% - var(--wide) / 2)}
@media (max-width:1240px){ .b-wide{--wide:min(1000px,calc(100vw - 2 * var(--layout-gutter)))} }

/* The short answer (BLUF) --------------------------------------------------- */
.b-bluf{margin-top:clamp(40px,4vw,56px);border:1px solid var(--line-hairline);border-radius:var(--radius-xl);background:var(--white);box-shadow:var(--shadow-card);overflow:hidden}
.b-bluf-top{padding:clamp(28px,3.4vw,44px) clamp(24px,3.4vw,44px) clamp(26px,3vw,36px)}
.b-bluf-top p{margin-top:18px;font-family:var(--font-display);font-weight:500;font-size:clamp(23px,2.3vw,30px);line-height:1.3;letter-spacing:-.016em;color:var(--text-strong);text-wrap:pretty}
.b-bluf-top p + p{margin-top:14px}
.b-bluf-top p em{font-style:normal;color:var(--blue-700)}
@media (min-width:760px){ .b-bluf-top p em,.b-bluf-top p span{white-space:nowrap} }
.b-bluf-grid{display:grid;grid-template-columns:1fr 1fr}
.b-pick{padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px) clamp(28px,3.2vw,40px)}
.b-pick h3{margin:0 !important;display:flex;align-items:center;gap:10px;font:500 12px/1 var(--font-mono) !important;letter-spacing:.14em !important;text-transform:uppercase}
.b-pick ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.b-pick li{position:relative;padding-left:30px;font-size:16px !important;line-height:1.5 !important}
.b-pick li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:999px;background:var(--pick-dot) center/10px no-repeat;background-color:var(--pick-bg)}
.b-pick--them{background:var(--surface-sunken);border-top:1px solid var(--line-hairline)}
.b-pick--them h3{color:var(--ink-600)}
.b-pick--them li{color:var(--ink-700) !important}
.b-pick--them{--pick-bg:var(--ink-200);--pick-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A4152' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.b-pick--us{position:relative;background:var(--gradient-brand-deep);color:var(--white)}
.b-pick--us h3{color:var(--blue-300)}
.b-pick--us li{color:rgba(255,255,255,.9) !important}
.b-pick--us{--pick-bg:rgba(255,255,255,.16);--pick-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
@media (max-width:720px){ .b-bluf-grid{grid-template-columns:1fr} }

/* Big statement band -------------------------------------------------------- */
.b-statement{position:relative;overflow:hidden;margin-top:clamp(72px,8vw,112px);border-radius:var(--radius-2xl);background:var(--gradient-brand-deep);color:var(--white);padding:clamp(44px,6.4vw,96px) clamp(28px,6.4vw,96px)}
.b-statement::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.11) 1.4px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.35) 50%,transparent 90%);mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.35) 50%,transparent 90%)}
.b-statement::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 90% at 92% 0%,rgba(92,155,220,.42),transparent 62%)}
.b-statement > *{position:relative;z-index:1}
.b-statement blockquote{margin:24px 0 0;font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,48px);line-height:1.12;letter-spacing:-.026em;color:var(--white)}
.b-statement blockquote > span{display:block}
.b-statement blockquote > span + span{margin-top:.28em}
.b-statement blockquote em{display:block;font-style:normal;color:var(--blue-300)}

.b-statement-foot{margin-top:clamp(28px,3vw,40px);padding-top:24px;border-top:1px solid var(--line-inverse);display:grid;grid-template-columns:1fr 1fr;gap:24px 48px}
.b-statement-foot p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.74);max-width:440px}
.b-statement-foot b{display:block;margin-bottom:6px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
@media (max-width:720px){ .b-statement-foot{grid-template-columns:1fr} }

/* Key takeaway callout ------------------------------------------------------ */
.b-takeaway{margin-top:36px;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 28px;border-radius:var(--radius-lg);background:var(--blue-050);border:1px solid var(--blue-100)}
.b-takeaway::before{content:"";width:3px;border-radius:2px;background:var(--blue-700)}
.b-takeaway p{font-size:17px !important;line-height:1.6 !important;color:var(--ink-800) !important}
.b-takeaway p b{display:block;margin-bottom:6px;font:500 11px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700)}

/* Stat tiles: the numbers each product leads with -------------------------- */
.b-stats{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.b-stats-col{border-radius:var(--radius-xl);padding:clamp(24px,2.6vw,34px);border:1px solid var(--line-hairline);background:var(--white)}
.b-stats-col--us{background:var(--gradient-brand-deep);border-color:transparent;color:var(--white)}
.b-stats-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line-hairline)}
.b-stats-col--us .b-stats-head{border-bottom-color:var(--line-inverse)}
.b-stats-head strong{font-size:20px;font-weight:700;letter-spacing:-.01em;color:inherit !important}
.b-stats-col:not(.b-stats-col--us) .b-stats-head strong{color:var(--text-strong) !important}
.b-stats-head span{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.b-stats-col--us .b-stats-head span{color:var(--blue-300)}
.b-stat{padding:24px 0;border-bottom:1px solid var(--line-hairline);display:flex;flex-direction:column;gap:10px}
.b-stat:last-child{border-bottom:0;padding-bottom:0}
.b-stats-col--us .b-stat{border-bottom-color:var(--line-inverse)}
.b-stat-num{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.03em;color:var(--text-strong)}
.b-stats-col--us .b-stat-num{color:var(--white)}
.b-stat-label{font-size:15px;line-height:1.45;color:var(--ink-700)}
.b-stats-col--us .b-stat-label{color:rgba(255,255,255,.8)}
.b-stats-col--us .b-stat-label sup a{color:var(--blue-300)}
@media (max-width:760px){ .b-stats{grid-template-columns:1fr} }

/* Comparison table ----------------------------------------------------------- */
.b-compare{margin-top:40px;border:1px solid var(--line-hairline);border-radius:var(--radius-xl);overflow:hidden;background:var(--white)}
.b-compare table{width:100%;border-collapse:collapse;table-layout:fixed}
.b-compare col.k{width:24%}
.b-compare th,.b-compare td{text-align:left;vertical-align:top;padding:20px 24px;border-top:1px solid var(--line-hairline)}
.b-compare thead th{border-top:0;padding-block:22px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);background:var(--white)}
.b-compare thead th.us{color:var(--white);background:var(--blue-700)}
.b-compare thead th .b-th{display:flex;align-items:center;gap:10px}
.b-compare thead th .b-th img{width:18px;height:18px;filter:brightness(0) invert(1)}
.b-compare tbody th{font-size:14px;font-weight:700;line-height:1.4;color:var(--text-strong);background:var(--surface-sunken)}
.b-compare td{font-size:15.5px;line-height:1.55;color:var(--ink-700)}
.b-compare td.us{background:var(--blue-050);color:var(--ink-800)}
.b-compare tbody tr:first-child th,.b-compare tbody tr:first-child td{border-top:1px solid var(--line-hairline)}
.b-compare td sup a{color:var(--blue-700)}
@media (max-width:760px){
  .b-compare table,.b-compare tbody,.b-compare tr,.b-compare th,.b-compare td{display:block;width:auto}
  .b-compare thead,.b-compare colgroup{display:none}
  .b-compare tbody tr{border-top:1px solid var(--line-hairline)}
  .b-compare tbody tr:first-child{border-top:0}
  .b-compare tbody th{border-top:0;padding:16px 20px 12px}
  .b-compare td{border-top:0;padding:14px 20px 16px}
  .b-compare td::before{content:attr(data-label);display:block;margin-bottom:6px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
  .b-compare td.us::before{color:var(--blue-700)}
}

/* Figures ------------------------------------------------------------------- */
.b-fig{margin-top:48px;margin-bottom:0;margin-right:0}
.b-fig.b-wide{margin-top:clamp(56px,6vw,80px)}
.b-fig > figcaption{counter-increment:bfig;margin-top:16px;display:flex;gap:14px;font-size:14px;line-height:1.5;color:var(--text-muted);max-width:720px}
.b-fig.b-wide > figcaption{margin-inline:auto;justify-content:center;text-align:left}
.b-fig > figcaption::before{content:"Fig. " counter(bfig);flex:none;padding-top:3px;font:500 11px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700)}
.b-visual{position:relative;min-height:80px}
.b-visual > script{display:none}
.b-visual-fallback{padding:24px;border:1px dashed var(--line-strong);border-radius:var(--radius-lg);font-size:15px;color:var(--text-muted)}

/* FAQ ----------------------------------------------------------------------- */
.b-faq-item{border-top:1px solid var(--line-hairline)}
.b-faq-item:last-of-type{border-bottom:1px solid var(--line-hairline)}
.b-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0}
.b-faq-item summary::-webkit-details-marker{display:none}
.b-faq-item summary h3{margin:0 !important;font-size:19px !important;line-height:1.35 !important;font-weight:700}
.b-faq-icon{position:relative;width:32px;height:32px;flex:none;border:1px solid var(--line-strong);transition:background var(--duration-fast),border-color var(--duration-fast)}
.b-faq-icon::before,.b-faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink-800);transform:translate(-50%,-50%);transition:transform var(--duration-base) var(--ease-out)}
.b-faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.b-faq-item[open] .b-faq-icon{background:var(--blue-700);border-color:var(--blue-700)}
.b-faq-item[open] .b-faq-icon::before,.b-faq-item[open] .b-faq-icon::after{background:var(--white)}
.b-faq-item[open] .b-faq-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.b-faq-item summary:hover h3{color:var(--blue-700)}
.b-faq-item p{margin:-6px 0 0;padding:0 56px 26px 0;font-size:17px;line-height:1.7;color:var(--ink-700)}

/* Sources + disclosure ------------------------------------------------------ */
.b-sources ol{list-style:none;counter-reset:bsrc;margin:0;padding:0;border-top:1px solid var(--line-hairline)}
.b-sources li{counter-increment:bsrc;display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-hairline);font-size:15px;line-height:1.45;scroll-margin-top:calc(var(--nav-height) + 40px)}
.b-sources li::before{content:counter(bsrc);font:500 12px/1 var(--font-mono);color:var(--blue-700)}
.b-sources li a{color:var(--text-strong);word-break:break-word}
.b-sources li span{font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.b-sources li:target{background:var(--blue-050)}
@media (max-width:600px){ .b-sources li{grid-template-columns:28px 1fr} .b-sources li span{grid-column:2} }
.b-disclosure{margin-top:40px;padding-top:22px;border-top:1px solid var(--line-hairline);font-size:14px !important;line-height:1.6 !important;color:var(--text-muted) !important}
.b-disclosure:empty{display:none}

/* Closing CTA --------------------------------------------------------------- */
.b-cta-wrap{max-width:var(--layout-max);margin:0 auto;padding:clamp(96px,10vw,144px) var(--layout-gutter) var(--section-py)}
.b-cta{position:relative;overflow:hidden;border-radius:var(--radius-2xl);background:var(--blue-700);padding:clamp(44px,6vw,88px);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.b-cta-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.10) 1px,transparent 1px);background-size:34px 34px}
.b-cta > *{position:relative}
.b-cta .b-eyebrow::after{content:"";width:6px;height:6px;background:currentColor}
.b-cta h2{margin:0;max-width:900px;font-family:var(--font-display);font-weight:500;font-size:var(--text-display-2);line-height:1.04;letter-spacing:var(--tracking-display);color:var(--white)}
.b-cta p{max-width:620px;font-size:var(--text-body-lg);color:rgba(255,255,255,.8)}
.b-cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Cover art (typographic, no third-party logos) ----------------------------- */
.b-cover{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);background:var(--gradient-brand-deep);isolation:isolate}
.b-cover-grid{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.14) 1.3px,transparent 1.6px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(80% 90% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(80% 90% at 50% 50%,#000 20%,transparent 80%)}
.b-cover::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 100% 0%,rgba(92,155,220,.45),transparent 60%)}
.b-cover-tile{display:inline-flex;align-items:center;gap:12px;padding:18px 26px;border-radius:14px;font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1}
.b-cover-tile--us{background:var(--white);color:var(--ink-900);box-shadow:0 24px 48px -18px rgba(2,14,44,.7)}
.b-cover-tile--us img{display:block;width:auto;height:26px}
.b-cover-tile--them{background:rgba(255,255,255,.08);color:var(--white);border:1px solid rgba(255,255,255,.28)}
.b-cover-vs{font:500 13px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-300)}
.b-cover-word{font-family:var(--font-display);font-weight:500;font-size:40px;color:var(--white)}
.b-cover--lg{aspect-ratio:16/10}
.b-cover--md{aspect-ratio:16/10}
.b-cover--md .b-cover-tile{font-size:20px;padding:12px 18px;border-radius:10px;gap:9px}
.b-cover--md .b-cover-tile--us img{height:19px}

/* Blog index ---------------------------------------------------------------- */
.b-index{max-width:1200px;margin:0 auto;padding:0 var(--layout-gutter) var(--section-py)}
.b-filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-bottom:22px;margin-bottom:32px;border-bottom:1px solid var(--line-hairline)}
.b-chip{appearance:none;cursor:pointer;padding:10px 16px;border:1px solid var(--line-strong);border-radius:0;background:var(--white);font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-700);transition:var(--transition-control)}
.b-chip:hover{border-color:var(--ink-700);color:var(--ink-900)}
.b-chip.is-active{background:var(--ink-900);border-color:var(--ink-900);color:var(--white)}
.b-filters-count{margin-left:auto;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.b-card{display:flex;flex-direction:column;border:1px solid var(--line-hairline);border-radius:var(--radius-xl);overflow:hidden;background:var(--white);color:inherit;transition:var(--transition-lift),border-color var(--duration-base)}
.b-card:hover{text-decoration:none;transform:var(--lift-hover);box-shadow:var(--shadow-raised);border-color:var(--line-strong);color:inherit}
.b-card-body{display:flex;flex-direction:column;gap:14px;padding:26px 28px 28px}
.b-card-title{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.14;letter-spacing:-.018em;color:var(--text-strong)}
.b-card-excerpt{font-size:16px;line-height:1.55;color:var(--ink-700)}
.b-card-meta{display:flex;align-items:center;gap:12px;margin-top:6px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.b-card-meta i{width:4px;height:4px;background:var(--ink-300)}
.b-card--featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.b-card--featured .b-cover{aspect-ratio:auto;min-height:420px;height:100%}
.b-card--featured .b-card-body{justify-content:center;padding:clamp(28px,4vw,56px)}
.b-card--featured .b-card-title{font-size:clamp(26px,2.2vw,32px);line-height:1.12}
.b-card-title em{display:block;font-style:normal;color:var(--blue-700);text-wrap:balance}
.b-card-title br{display:block}
.b-card--featured .b-card-excerpt{font-size:18px}
.b-grid{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.b-grid:empty{display:none}
.b-card[hidden]{display:none}
@media (max-width:900px){
  .b-card--featured{grid-template-columns:1fr}
  .b-card--featured .b-cover{min-height:0;aspect-ratio:16/9}
}
@media (max-width:600px){
  .b-cover-tile{font-size:20px;padding:12px 16px;gap:8px}
  .b-cover-tile--us img{height:19px}
  .b-byline{flex-direction:column;gap:18px}
  .b-byline-metas > i:first-child{display:none}
  .b-title{font-size:clamp(32px,9vw,44px)}
}

/* ==========================================================================
   Interactive figures (blog-visuals.jsx)
   ========================================================================== */

/* TwoModels ---------------------------------------------------------------- */
.bv-models{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bv-model{display:flex;flex-direction:column;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line-hairline);background:var(--white)}
.bv-model--us{border-color:var(--blue-200);box-shadow:var(--shadow-brand)}
.bv-model-head{padding:26px 30px 22px;border-bottom:1px solid var(--line-hairline)}
.bv-model--us .bv-model-head{background:var(--gradient-brand-deep);border-bottom-color:transparent}
.bv-model-name{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-600)}
.bv-model--us .bv-model-name{color:var(--blue-300)}
.bv-model--us .bv-model-name img{filter:brightness(0) invert(1)}
.bv-ring{width:11px;height:11px;border-radius:999px;border:2.5px solid var(--ink-500)}
.bv-model-head h3{margin:14px 0 0 !important;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2vw,28px) !important;line-height:1.15 !important;letter-spacing:-.018em !important;color:var(--text-strong)}
.bv-model--us .bv-model-head h3{color:var(--white)}
.bv-model-head p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--ink-600)}
.bv-model--us .bv-model-head p{color:rgba(255,255,255,.74)}
.bv-model-canvas{flex:1;padding:6px 8px 10px;background:#F6F7F9;background-image:radial-gradient(rgba(9,72,182,.16) 1.1px,transparent 1.5px);background-size:16px 16px}
@media (max-width:900px){ .bv-models{grid-template-columns:1fr} }

/* Spectrum ----------------------------------------------------------------- */
.bv-spec{border:1px solid var(--line-hairline);border-radius:var(--radius-xl);background:var(--white);padding:8px clamp(20px,3vw,36px) 12px}
.bv-spec-legend{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;padding:18px 0;border-bottom:1px solid var(--line-hairline);font-size:14px;font-weight:700;color:var(--text-strong)}
.bv-spec-legend span{display:inline-flex;align-items:center;gap:9px}
.bv-spec-legend em{margin-left:auto;font:500 11px/1 var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.bv-key{width:14px;height:14px;border-radius:999px}
.bv-key--them{border:3px solid var(--ink-500);background:var(--white)}
.bv-key--us{background:var(--blue-700);box-shadow:0 0 0 3px var(--blue-100)}
.bv-spec-row{padding:26px 0 30px;border-bottom:1px solid var(--line-hairline)}
.bv-spec-row:last-child{border-bottom:0}
.bv-spec-q{font:500 11px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:22px}
.bv-spec-line{display:grid;grid-template-columns:190px 1fr 190px;align-items:center;gap:22px}
.bv-pole{font-size:14.5px;line-height:1.35;font-weight:500;color:var(--ink-700)}
.bv-pole--right{text-align:right}
.bv-track{position:relative;height:44px}
.bv-track-bar{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,var(--ink-300),var(--blue-200))}
.bv-track-bar::before,.bv-track-bar::after{content:"";position:absolute;top:-4px;width:2px;height:10px;background:var(--ink-300)}
.bv-track-bar::before{left:0}
.bv-track-bar::after{right:0;background:var(--blue-200)}
.bv-track-mid{position:absolute;left:50%;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--ink-200)}
.bv-mark{position:absolute;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;padding:0;border:0;background:none;cursor:pointer;transition:left .9s var(--ease-out);z-index:1}
.bv-mark:focus-visible{outline:2px solid var(--focus-ring);outline-offset:0;border-radius:999px}
.bv-mark.is-open{z-index:3}
.bv-mark-dot{position:absolute;left:50%;top:50%;border-radius:999px;transform:translate(-50%,-50%);transition:transform var(--duration-fast)}
.bv-mark--them .bv-mark-dot{width:18px;height:18px;border:3.5px solid var(--ink-500);background:var(--white)}
.bv-mark--us .bv-mark-dot{width:18px;height:18px;background:var(--blue-700);box-shadow:0 0 0 4px var(--blue-100),0 6px 14px -4px rgba(9,72,182,.6)}
.bv-mark:hover .bv-mark-dot,.bv-mark.is-open .bv-mark-dot{transform:translate(-50%,-50%) scale(1.18)}
.bv-mark-label{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:-4px;font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--ink-500)}
.bv-mark--us .bv-mark-label{color:var(--blue-700);top:100%;bottom:auto;margin:-4px 0 0}
.bv-tip{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-24px);width:280px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--ink-900);color:rgba(255,255,255,.86);text-align:left;font:400 14px/1.5 var(--font-body);letter-spacing:0;text-transform:none;box-shadow:var(--shadow-raised);cursor:default}
.bv-tip b{display:block;margin-bottom:4px;font:500 10.5px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.bv-tip--left{transform:translateX(calc(-100% + 24px))}
.bv-mark--us .bv-tip{top:calc(100% + 26px)}
@media (max-width:700px){
  .bv-spec-line{grid-template-columns:1fr 1fr;gap:14px 16px}
  .bv-track{grid-column:1 / -1;grid-row:2;margin:10px 18px 6px}
  .bv-pole{font-size:13.5px}
  .bv-tip{width:220px}
  .bv-spec-legend em{margin-left:0;flex-basis:100%}
}

/* FitFinder ---------------------------------------------------------------- */
.bv-fit{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.bv-fit-qs{border:1px solid var(--line-hairline);border-radius:var(--radius-xl);background:var(--white);padding:6px clamp(20px,2.6vw,32px)}
.bv-fit-q{margin:0;padding:24px 0;border:0;border-bottom:1px solid var(--line-hairline);min-width:0}
.bv-fit-q:last-child{border-bottom:0}
.bv-fit-q legend{float:left;width:100%;display:flex;gap:12px;padding:0;margin:0 0 16px;font-size:17px;line-height:1.4;font-weight:700;color:var(--text-strong)}
.bv-fit-q legend span{flex:none;padding-top:4px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--blue-700)}
.bv-fit-opts{clear:both;display:flex;flex-wrap:wrap;gap:8px;padding-left:31px}
.bv-opt{appearance:none;cursor:pointer;padding:11px 15px;border:1px solid var(--line-strong);border-radius:0;background:var(--white);font:500 14.5px/1.25 var(--font-body);color:var(--ink-800);text-align:left;transition:var(--transition-control)}
.bv-opt:hover{border-color:var(--ink-700)}
.bv-opt.is-on{background:var(--blue-700);border-color:var(--blue-700);color:var(--white)}
.bv-fit-result{position:sticky;top:calc(var(--nav-height) + 28px);border-radius:var(--radius-xl);padding:clamp(24px,2.6vw,34px);background:var(--surface-sunken);border:1px solid var(--line-hairline)}
.bv-meter{margin-top:28px}
.bv-meter-track{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--ink-400) 0%,var(--ink-200) 50%,var(--blue-700) 100%)}
.bv-meter-needle{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:999px;background:var(--white);border:3px solid var(--ink-900);box-shadow:var(--shadow-card);transition:left .6s var(--ease-out),opacity .3s}
.bv-meter-ends{display:flex;justify-content:space-between;margin-top:14px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.bv-fit-result h3{margin:30px 0 0 !important;font-family:var(--font-display);font-weight:500;font-size:26px !important;line-height:1.15 !important;letter-spacing:-.018em !important}
.bv-fit-result p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-700)}
.bv-fit-foot{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:18px;border-top:1px solid var(--line-hairline);font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.bv-fit-foot button{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--blue-700)}
@media (max-width:980px){ .bv-fit{grid-template-columns:1fr} .bv-fit-result{position:static} }

/* ProductTiles -------------------------------------------------------------- */
.bv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bv-tile{display:flex;flex-direction:column;border-radius:var(--radius-xl);overflow:hidden;background:var(--gradient-brand-deep);padding:10px}
.bv-tile .du-ill{border-radius:14px}
.b-body .du-ill > *{zoom:var(--z,1) !important}
.bv-tile-copy{padding:20px 16px 12px}
.bv-tile-copy h3{margin:0 !important;font-size:19px !important;line-height:1.3 !important;color:var(--white)}
.bv-tile-copy p{margin-top:6px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.74)}
@media (max-width:800px){ .bv-tiles{grid-template-columns:1fr} }

/* Channel flow (static HTML) ------------------------------------------------ */
.b-flow{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:22px;border-radius:var(--radius-lg);background:var(--surface-sunken);border:1px solid var(--line-hairline)}
.b-flow-step{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;background:var(--white);border:1px solid var(--line-hairline);border-radius:10px;font-size:15px;font-weight:500;color:var(--text-strong);box-shadow:var(--shadow-xs)}
.b-flow-step i{width:16px;height:16px;background:var(--ink-600);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.b-flow-arrow{width:18px;height:2px;background:var(--ink-300);position:relative}
.b-flow-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border-left:5px solid var(--ink-300);border-top:4px solid transparent;border-bottom:4px solid transparent}
.b-flow-cond{padding:8px 12px;border:1px dashed var(--ink-400);border-radius:999px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-600)}
.b-flow-label{flex-basis:100%;margin-bottom:4px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}

.b-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}