/* which-agency-is-best-for-digital-marketing.html - extracted from inline <style> blocks, original document order preserved */

/* --- block --- */
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:dark;
  /* ── Identical to index.html ── */
  --bg:#000;
  --bg2:#080808;
  --o:#ED671C;--p:#B71CED;
  --pp:rgba(151,71,255,.62);
  --line:rgba(255,255,255,.12);
  --gtext:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%);
  /* ── Kept for backward compat ── */
  --card:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --card2:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  --border:rgba(255,255,255,.16);
  --border2:rgba(255,255,255,.20);
  --purple:#B71CED;
  --purple2:#8B5CF6;
  --pink:#E91E8C;
  --orange:#ED671C;
  --grad:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%);
  --text:#fff;
  --muted:rgba(255,255,255,.55);
}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}
body{
  background:#000;color:#fff;
  font-family:'Satoshi',sans-serif;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(183,28,237,.4);color:#fff}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:70px;padding:0 56px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .4s,border-color .4s;
}
.nav.sc{
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(40px) saturate(160%);-webkit-backdrop-filter:blur(40px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-logo img{height:30px}
.nav-center{
  display:flex;align-items:center;gap:2px;
  background:rgba(20,20,23,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:5px 7px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.nav-center > a{
  font-size:14px;font-weight:500;padding:9px 17px;border-radius:8px;
  color:rgba(255,255,255,.7);transition:color .2s,background .2s;
}
.nav-center > a:hover,.nav-center > a.active{color:#fff;background:rgba(255,255,255,.08)}

/* SERVICES DROPDOWN */
.svc-drop{position:relative}
.svc-trigger{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;padding:9px 17px;border-radius:8px;
  color:rgba(255,255,255,.7);transition:color .2s,background .2s;
  cursor:pointer;user-select:none;
}
.svc-trigger::after{content:'▾';font-size:13px;opacity:.7;transition:transform .25s}
.svc-drop:hover .svc-trigger{color:#fff;background:rgba(255,255,255,.07)}
.svc-drop:hover .svc-trigger::after{transform:rotate(180deg)}
.svc-menu{
  position:absolute;top:calc(100% + 10px);left:-16px;
  display:none;
  background:#0a0a0a;border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px 22px 18px;
  box-shadow:0 24px 72px rgba(0,0,0,.85);
  width:580px;
}
.svc-drop:hover .svc-menu{display:block}
.svc-drop::after{content:'';position:absolute;left:-16px;right:-16px;top:100%;height:16px}
.svc-drop.open .svc-menu{display:block}
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.svc-menu a{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;padding:9px 13px;border-radius:9px;
  color:rgba(255,255,255,.62);transition:color .2s,background .2s;
}
.svc-menu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.svc-menu a.cur{color:var(--purple2);background:rgba(183,28,237,.08)}
.svc-menu a::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.2);transition:background .2s;
}
.svc-menu a:hover::before,.svc-menu a.cur::before{background:var(--grad);background-size:100%;background-clip:unset}
.svc-tailored{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.svc-tailored-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.48);display:block;margin-bottom:10px;padding-left:13px;
}
.svc-tailored-links{display:flex;gap:4px}

.nav-cta{
  font-size:var(--t-btn);font-weight:600;padding:11px 22px;border-radius:10px;
  border:none;color:#fff;cursor:pointer;
  background:linear-gradient(95deg,#a31ce8 0%,#c41fd4 100%);
  transition:box-shadow .25s,transform .2s,background .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.nav-cta .cta-ico{font-size:var(--t-btn);line-height:1}
.nav-cta:hover{background:linear-gradient(95deg,#b228f5 0%,#d52ae6 100%);transform:translateY(-1px)}

/* ===== HERO ===== */
.hero{
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* Background photo */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url('/assets/w-hero-banner.webp') center center/cover no-repeat;
}
/* Dark overlay */
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.32);
}
/* Subtle vignette at edges */
.hero-bg::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,transparent 50%,rgba(0,0,0,.35) 100%);
}

/* Center play button */
.hero-play{
  position:relative;z-index:2;
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.hero-play:hover{
  background:rgba(255,255,255,.28);
  transform:scale(1.08);
  
}
.hero-play::after{
  content:'';
  width:0;height:0;
  border-style:solid;
  border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent #fff;
  margin-left:5px;
}

/* Trustpilot — bottom left */
.hero-tp{
  position:absolute;bottom:36px;left:48px;z-index:2;
  display:flex;flex-direction:column;gap:4px;
}
.tp-row{display:flex;align-items:center;gap:8px}
.tp-logo{
  background:#00b67a;color:#fff;font-size:var(--t-caption);font-weight:800;
  padding:2px 7px;border-radius:4px;letter-spacing:.04em;
}
.tp-stars{color:#00b67a;font-size:15px;letter-spacing:1px}
.tp-txt{font-size:var(--t-caption);font-weight:500;color:rgba(255,255,255,.75)}

/* Clutch badge — bottom right */
.hero-clutch{
  position:absolute;bottom:28px;right:48px;z-index:2;
  display:block;
  text-decoration:none;
  transition:transform .22s,box-shadow .22s;
  border-radius:50%;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hero-clutch:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.45)}
.hero-clutch img{display:block;width:76px;height:82px;border-radius:50%}

.btn-p{
  display:inline-block;padding:14px 30px;border-radius:10px;
  background:linear-gradient(95deg,#8B5CF6 0%,#B71CED 32%,#E91E8C 62%,#ED671C 100%);
  color:#fff;font-size:var(--t-btn);font-weight:600;
  transition:box-shadow .25s,transform .2s;
}
.btn-p:hover{transform:translateY(-2px)}
.btn-o{
  display:inline-block;padding:14px 30px;border-radius:10px;
  border:1px solid rgba(255,255,255,.20);
  color:rgba(255,255,255,.8);font-size:var(--t-btn);font-weight:500;
  transition:border-color .2s,background .2s,transform .2s;
}
.btn-o:hover{border-color:rgba(183,28,237,.5);background:rgba(183,28,237,.07);transform:translateY(-2px)}

/* LOGOS BAND */
.logos-band{
  padding:36px 0;
  background:var(--bg);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.logos-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.48);text-align:center;margin-bottom:18px;
}
.logos-track{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logos-track + .logos-track{margin-top:34px}
.logos-inner{
  display:flex;gap:78px;align-items:center;width:max-content;
}
.logos-row1{animation:lscroll 50s linear infinite}
.logos-row2{animation:lscrollR 50s linear infinite}
.logos-inner img{max-height:36px;max-width:150px;height:auto;width:auto;opacity:1;filter:none;object-fit:contain}
@keyframes lscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lscrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ===== SECTION BASE ===== */
.sec{padding:100px 56px}
.sec-inner{max-width:1280px;margin:0 auto}
.sec-label{
  font-size:var(--t-caption);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pp);display:inline-flex;align-items:center;gap:14px;margin-bottom:14px;
}
.sec-label::before,.sec-label::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,var(--p),var(--o));opacity:.7}
.sec-title{
  font-size:var(--t-h2);font-weight:700;
  letter-spacing:-.035em;line-height:1.16;padding:.1em 0;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.sec-sub{
  font-size:var(--t-body);color:var(--muted);
  line-height:1.65;max-width:56ch;margin-top:14px;
}
.g-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-bottom:.18em;
}

/* ===== PAIN POINTS ===== */
.pain{background:#000}
.pain-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px;flex-wrap:wrap}
.pain-top .sec-title{max-width:22ch}
.pain-note{
  max-width:40ch;font-size:var(--t-body);font-weight:400;line-height:1.65;color:var(--muted);
  flex:0 0 38%;
}
.pain-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.pain-card{
  background:#0e0e10;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:22px 24px;min-height:160px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .3s,border-color .3s;
  position:relative;overflow:hidden;cursor:default;
}
.pain-quote{
  display:block;
  font-family:Georgia,'Times New Roman',serif;
  font-size:40px;font-weight:700;line-height:.7;
  color:rgba(255,255,255,.4);
  transition:opacity .2s,max-height .3s,margin .3s;
}
.pain-title{
  font-size:var(--t-body);font-weight:400;letter-spacing:-.2px;line-height:1.32;
  color:#fff;
}
.pain-desc{
  font-size:var(--t-body);color:rgba(255,255,255,.55);line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .3s,margin-top .3s;
}
.pain-card::after{
  content:'';position:absolute;left:0;bottom:0;width:58%;height:2px;
  background:linear-gradient(90deg,#B71CED 0%,#E91E8C 60%,transparent 100%);
  opacity:0;transition:opacity .3s;
}
.pain-card.is-active,.pain-card:hover{
  justify-content:flex-start;
  background:linear-gradient(180deg,rgba(42,16,60,.55) 0%,rgba(18,9,30,.45) 100%);
  border-color:rgba(255,255,255,.16);
}
.pain-card.is-active .pain-quote,.pain-card:hover .pain-quote{
  opacity:0;max-height:0;margin:0;
}
.pain-card.is-active .pain-desc,.pain-card:hover .pain-desc{
  max-height:240px;opacity:1;margin-top:10px;
}
.pain-card.is-active::after,.pain-card:hover::after{opacity:1}
/* interactive cursor spotlight */
.pain-card > *{position:relative;z-index:1}
.pain-card::after{z-index:2}
.pain-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(183,28,237,.22),transparent 62%);
  opacity:0;transition:opacity .35s;
}
.pain-card:hover::before{opacity:1}
/* scroll reveal */
.pain-card.rv-pending{opacity:0;transform:translateY(30px)}
.pain-card.rv-in{opacity:1;transform:translateY(0);
  transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}

/* ===== DESIGN STACK ===== */
.stack{
  background:var(--bg);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:60px 56px;
}
.stack-inner{max-width:1280px;margin:0 auto;text-align:center}
.stack-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.48);margin-bottom:36px;
}
.stack-tools{
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.tool{
  display:flex;align-items:center;gap:11px;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:12px 20px;
  font-size:var(--t-body);font-weight:600;
  transition:border-color .2s,transform .2s;cursor:default;
}
.tool:hover{border-color:rgba(183,28,237,.5);transform:translateY(-2px)}
.ti{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-body);font-weight:900;font-style:italic;color:#fff;flex:none;
}
.ti-ai{background:linear-gradient(135deg,#ff9500,#ff6b00)}
.ti-ps{background:linear-gradient(135deg,#00b8ff,#0074d9)}
.ti-ae{background:linear-gradient(135deg,#a0a0ff,#7070d0)}
.ti-pr{background:linear-gradient(135deg,#d45fff,#9b00bf)}
.ti-id{background:linear-gradient(135deg,#ff6680,#cc004f)}
.ti-fig{background:linear-gradient(135deg,#0acf83,#1abcfe,#a259ff,#f24e1e);font-style:normal}
.ti-cv{background:linear-gradient(135deg,#7d2ae8,#4b00c3);font-style:normal}
.ti-mid{background:linear-gradient(135deg,#00a8e0,#0064a0);font-style:normal;font-size:13px}

/* ===== STATS — WHY GOOD DESIGN ===== */
.stats-sec{background:#000;position:relative;overflow:hidden}
.stats-sec::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 80% at 80% 50%,rgba(183,28,237,.1),transparent),
    radial-gradient(ellipse 40% 60% at 10% 20%,rgba(233,30,140,.06),transparent);
  pointer-events:none;
}
.stats-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1;text-align:center}
.why-cats{
  display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:32px 0 60px;
}
.why-cat{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:16px 24px;text-align:left;min-width:200px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .3s,transform .3s;
}
.why-cat:hover{border-color:rgba(183,28,237,.45);transform:translateY(-3px)}
.why-cat h3{
  font-size:var(--t-h3);font-weight:700;margin-bottom:6px;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.why-cat p{font-size:var(--t-body);color:var(--muted);line-height:1.5}
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:800px;margin:0 auto;
}
.stat-c{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:36px 32px;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.stat-c:hover{border-color:rgba(183,28,237,.45);transform:translateY(-3px)}
.stat-c::after{
  content:'';position:absolute;top:-30px;right:-30px;
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(183,28,237,.12),transparent 70%);
  pointer-events:none;
}
.stat-num{
  display:block;
  font-size:clamp(50px,6vw,82px);font-weight:700;
  letter-spacing:-.04em;line-height:1;margin-bottom:10px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-bottom:.18em;
}
.stat-txt{font-size:var(--t-body);font-weight:600;color:rgba(255,255,255,.82);line-height:1.35}

/* ===== INDUSTRIES ===== */
.ind-sec{background:var(--bg);padding:80px 56px}
.ind-inner{max-width:1280px;margin:0 auto;text-align:center}
.ind-tags{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:40px;
}
.ind-tag{
  padding:10px 22px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
  font-size:var(--t-caption);font-weight:500;color:rgba(255,255,255,.65);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  transition:border-color .25s,background .25s,color .25s,transform .25s;cursor:default;
}
.ind-tag:hover{
  border-color:rgba(183,28,237,.5);
  background:rgba(183,28,237,.08);
  color:#fff;transform:translateY(-2px);
}

/* ===== TESTIMONIALS ===== */
.testi-sec{background:#000}
.testi-inner{max-width:1000px;margin:0 auto;text-align:center}
.trev-card{
  display:grid;grid-template-columns:280px 1fr;
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  margin-top:52px;
}
/* LEFT white Clutch panel */
.trev-left{background:#fff;padding:28px 24px;text-align:left}
.trev-chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.trev-clogo-img{height:24px;width:auto;display:block}
.trev-clink{font-size:var(--t-body);color:#555;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.trev-clink:hover{color:#e84b37}
.trev-crating{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.trev-ccount{font-size:var(--t-body);font-weight:600;color:#111}
.trev-cstars{color:#e84b37;font-size:14px;letter-spacing:2px}
.trev-cline{height:1px;background:#e8e8e8;margin:0 0 18px}
.trev-ctags{display:flex;flex-wrap:wrap;gap:6px}
.trev-ctag{
  font-size:var(--t-caption);font-weight:500;color:#444;
  background:#f1f1f1;border-radius:5px;padding:4px 10px;
}
.trev-ctag-more{background:#f8f8f8;color:#6b6b6b}
/* RIGHT dark panel */
.trev-right{
  background:#141414;
  display:grid;grid-template-columns:1fr 1px 1fr;
}
.trev-meta{padding:26px 24px;display:flex;flex-direction:column}
.trev-mrating{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.trev-mcount{font-size:var(--t-body);font-weight:600;color:rgba(255,255,255,.65)}
.trev-mstars{color:#e84b37;font-size:13px;letter-spacing:2px}
.trev-mline{height:1px;background:rgba(255,255,255,.1);margin-bottom:16px}
.trev-mitem{
  display:flex;align-items:center;gap:10px;padding:5px 0;
  font-size:var(--t-body);color:rgba(255,255,255,.62);
}
.trev-mico{
  width:20px;height:20px;border-radius:4px;flex:none;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-style:normal;
}
.trev-vdiv{background:rgba(255,255,255,.1)}
.trev-quote-col{padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between}
.trev-quote{
  font-size:var(--t-body);line-height:1.7;color:rgba(255,255,255,.82);
  font-weight:400;margin:0;
}
.trev-author{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:24px}
.trev-alogo{max-height:22px;width:auto;opacity:.7;filter:brightness(1.4) grayscale(20%);object-fit:contain;align-self:flex-start}
.trev-aname{font-size:var(--t-body);color:rgba(255,255,255,.48);letter-spacing:.01em}

/* ===== FAQ ===== */
.faq-sec{
  background:url('/assets/bg-faqs.png') center center/cover no-repeat;
  position:relative;overflow:hidden;
}
.faq-inner{max-width:900px;margin:0 auto;position:relative;z-index:1;text-align:center}
.faq-title{
  font-family:inherit;font-weight:500;
  font-size:var(--t-h2);
  letter-spacing:-.03em;line-height:1.18;
  color:#fff;
background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.18em}
.faq-sub{
  margin-top:12px;font-size:var(--t-body);
  color:rgba(255,255,255,.7);font-weight:400;
}
.faq-list{margin-top:48px;text-align:left;display:flex;flex-direction:column;gap:14px}
.faq-item{
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(48,16,72,.46) 0%,rgba(22,8,38,.46) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow:hidden;
  box-shadow:0 4px 18px rgba(20,4,40,.25);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.faq-item:hover{
  border-color:rgba(255,255,255,.30);
  background:linear-gradient(180deg,rgba(64,22,96,.55) 0%,rgba(30,10,52,.55) 100%);
}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 24px;cursor:pointer;
  font-size:15.5px;font-weight:500;color:rgba(255,255,255,.92);
  transition:color .2s;
}
.faq-q:hover{color:#fff}
.faq-ico{
  width:22px;height:22px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:transparent;font-size:0;
  transition:transform .3s ease;
}
.faq-ico::before{
  content:'';width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(255,255,255,.72);
}
.faq-item.open .faq-ico{transform:rotate(180deg)}
.faq-a{
  font-size:14.5px;line-height:1.72;color:rgba(255,255,255,.72);
  max-height:0;overflow:hidden;padding:0 24px;
  transition:max-height .4s cubic-bezier(.16,1,.3,1),padding-bottom .4s;
}
.faq-item.open .faq-a{max-height:400px;padding-bottom:20px}

/* ===== CTA ===== */
.cta-sec{
  background:#000;
  position:relative;overflow:hidden;
}
.cta-inner{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
.cta-left h2{
  font-size:var(--t-h2);font-weight:700;
  letter-spacing:-.035em;line-height:1.1;margin-bottom:28px;
  color:#fff;
}

.cta-ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:26px}
.cta-ul li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:var(--t-body);font-weight:400;color:rgba(255,255,255,.8);line-height:1.4;
}
.cta-ul li::before{
  content:'';display:block;width:4px;height:4px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.8);margin-top:8px;
}
.cta-tagline{font-size:var(--t-body);font-weight:400;color:rgba(255,255,255,.6);margin-bottom:34px}
.cta-p-logos{
  display:grid;grid-template-columns:repeat(3,132px);
  gap:34px 56px;align-items:center;justify-items:stretch;width:max-content;
}
.cta-p-logos img{
  display:block;width:100%;max-width:100%;min-width:0;
  height:36px;object-fit:contain;object-position:left center;opacity:.95;
}

/* FORM */
.form-box{
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;padding:34px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  width:100%;max-width:400px;margin-left:auto;
}
.fg{margin-bottom:16px}
.fg input,.fg textarea,.fg select{
  width:100%;padding:15px 16px;border-radius:6px;
  background:transparent;border:1px solid rgba(255,255,255,.5);
  color:#fff;font-family:'Satoshi',sans-serif;font-size:14.5px;
  outline:none;transition:border-color .2s,background .2s;
  -webkit-appearance:none;
}
.fg input:focus,.fg textarea:focus{
  border-color:#fff;background:rgba(255,255,255,.03);
}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.48)}
.form-btn{
  width:100%;margin-top:6px;padding:15px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#a31ce8;
  color:#fff;font-family:'Satoshi',sans-serif;
  font-size:var(--t-btn);font-weight:600;border:none;cursor:pointer;
  transition:background .2s,box-shadow .2s;
}
.form-btn:hover{background:#b228f5;}
.form-btn .btn-ico{font-size:var(--t-btn);line-height:1}
.form-consent{
  display:flex;align-items:flex-start;gap:10px;margin-top:18px;
  font-size:13px;line-height:1.5;color:rgba(255,255,255,.48);
}
.form-consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:15px;height:15px;margin-top:1px;border-radius:3px;
  border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.form-consent input[type=checkbox]:checked{
  background:#a31ce8;border-color:#a31ce8;
}
.form-consent a{color:rgba(255,255,255,.7);text-decoration:underline}

/* ===== FOOTER ===== */
.ft{
  background:
    radial-gradient(ellipse 78% 95% at 58% -12%,rgba(122,46,152,.34) 0%,rgba(68,24,92,.16) 32%,transparent 60%),
    #060309;
  border:1px solid rgba(255,255,255,.06);border-bottom:none;
  border-radius:42px 42px 0 0;
  padding:64px 64px 26px;
  position:relative;overflow:hidden;
}
.ft-grid{
  max-width:1280px;margin:0 auto 46px;
  display:flex;align-items:stretch;gap:0;
}
.ft-brand{flex:0 0 30%;padding-right:36px}
.ft-brand img{height:42px;margin-bottom:30px}
.ft-brand-nav{display:flex;flex-direction:column;gap:6px}
.ft-brand-nav a{
  font-size:17px;font-weight:400;color:rgba(255,255,255,.78);
  padding:5px 0;transition:color .2s;
}
.ft-brand-nav a:hover{color:#fff}
.ft-divider{width:1px;background:rgba(255,255,255,.12);align-self:stretch;flex:none;margin:4px 0}
.ft-cols{
  flex:1;display:grid;grid-template-columns:0.9fr 1.25fr 1.3fr;gap:40px;
  padding-left:56px;
}
.ft-col h4{
  font-size:var(--t-h3);font-weight:500;letter-spacing:0;text-transform:none;
  color:#fff;margin-bottom:22px;
}
.ft-col a,.ft-col p{
  display:block;font-size:13.5px;color:rgba(255,255,255,.5);
  padding:6px 0;margin:0;transition:color .2s;line-height:1.3;
}
.ft-col a:hover{color:#fff}
.ft-bot{
  max-width:1280px;margin:0 auto;
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.48);
}
.ft-bot a{color:rgba(255,255,255,.48);transition:color .2s}
.ft-bot a:hover{color:#fff}
/* animated underline on footer + nav links */
.ft-col a,.ft-brand-nav a,.ft-bot a{position:relative;display:inline-block}
.ft-col a{display:block}
.ft-col a::after,.ft-brand-nav a::after,.ft-bot a::after,.nav-cta::after{
  content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:linear-gradient(90deg,#B71CED,#E91E8C);
  transition:width .3s ease;
}
.ft-col a:hover::after,.ft-brand-nav a:hover::after,.ft-bot a:hover::after{width:100%}

/* ===== DESIGN STACK (NEW) ===== */
.dstack{
  background:var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:30px 56px;
}
.dstack-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:36px;
}
.dstack-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.48);line-height:1.55;
  min-width:106px;flex:none;
}
.dstack-icons{
  display:flex;gap:20px;align-items:center;
  flex-wrap:wrap;row-gap:18px;flex:1;min-width:0;
  justify-content:space-between;
}
.dsi{
  width:44px;height:44px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-body);font-weight:900;font-style:italic;color:#fff;
  cursor:default;transition:transform .18s,box-shadow .18s;
  letter-spacing:-.02em;overflow:hidden;
}
.dsi:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.dsi img{width:26px;height:26px;object-fit:contain;display:block;flex:none}
.dsi-local{background:transparent;padding:0}
.dsi-local img{width:44px;height:44px;object-fit:cover;border-radius:12px}

/* ===== WHY GOOD DESIGN (NEW) ===== */
.wgd-sec{background:#000}
.wgd-top{
  padding:120px 56px 40px;text-align:center;
}
.wgd-title{
  font-size:var(--t-h2);font-weight:500;
  letter-spacing:-.035em;line-height:1.22;
  padding:.14em 0;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.18em}
/* Staggered 3-column */
.wgd-cols{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;
  align-items:start;gap:0;
  max-width:1280px;margin:0 auto;
  padding:0 56px 80px;
  min-height:280px;
}
.wgd-col{padding:24px 48px}
.wgd-col-1{padding-top:120px} /* stagger: lowest */
.wgd-col-2{padding-top:60px}  /* stagger: middle */
.wgd-col-3{padding-top:20px}  /* stagger: highest */
.wgd-divider{
  background:rgba(255,255,255,.12);
  min-height:200px;align-self:stretch;
  transition:background .45s ease,box-shadow .45s ease;
}
/* Animated vertical line — glow on hover */
.wgd-cols:hover .wgd-divider{
  background:linear-gradient(180deg,transparent 0%,rgba(139,92,246,.95) 50%,transparent 100%);
  
  animation:lineGlow 1.8s ease-in-out infinite;
}
@keyframes lineGlow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
.wgd-h{
  font-size:var(--t-body);font-weight:700;margin-bottom:12px;
  display:block;letter-spacing:-.01em;
}
.wgd-cyan{color:#00cec8}
.wgd-pink{color:#E91E8C}
.wgd-purple{color:#8B5CF6}
.wgd-p{
  font-size:var(--t-body);color:rgba(255,255,255,.6);
  line-height:1.6;max-width:28ch;font-weight:400;
}
/* scroll reveal — columns slide up, dividers draw in */
.wgd-col.rv-pending{opacity:0;transform:translateY(46px)}
.wgd-col.rv-in{opacity:1;transform:translateY(0);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.wgd-divider.rv-pending{opacity:0;transform:scaleY(0);transform-origin:top}
.wgd-divider.rv-in{opacity:1;transform:scaleY(1);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.wgd-col{transition:transform .35s ease}
.wgd-col.rv-in:hover{transform:translateY(-7px)}
.wgd-col .wgd-h{transition:text-shadow .35s ease}
.wgd-col:hover .wgd-cyan{text-shadow:0 0 22px rgba(0,206,200,.6)}
.wgd-col:hover .wgd-pink{text-shadow:0 0 22px rgba(233,30,140,.6)}
.wgd-col:hover .wgd-purple{text-shadow:0 0 22px rgba(139,92,246,.6)}
/* Purple gradient stats */
.wgd-stats-bg{
  background:url('/assets/bg-why-design.png') center center/cover no-repeat;
  position:relative;overflow:hidden;
  padding:80px 56px;
  margin-top:0;
}
.wgd-stats-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(80,0,160,.35),transparent);
  pointer-events:none;
}
.wgd-stats-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:40px;align-items:center;
  position:relative;z-index:1;
}
.wgd-stats-col{display:flex;flex-direction:column}
.wgd-stat{display:flex;flex-direction:column;gap:6px}
.wgd-num{
  font-size:clamp(52px,7vw,100px);font-weight:700;
  letter-spacing:-.04em;line-height:1;color:#fff;
}
.wgd-stxt{
  font-size:var(--t-body);color:rgba(255,255,255,.6);
  line-height:1.45;max-width:20ch;font-weight:400;
}
.wgd-stats-col[style*="text-align:right"] .wgd-stxt{margin-left:auto}
.wgd-queen{
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.wgd-queen img{
  width:240px;height:auto;
  filter:drop-shadow(0 20px 50px rgba(100,0,200,.5));
  animation:float 5s ease-in-out infinite;
}

/* Industry tags with emoji */
.ind-tag-inner{display:flex;align-items:center;gap:8px}
.ind-emoji{font-size:var(--t-body);line-height:1}

@media(max-width:1080px){
  .dstack{padding:22px 36px}
  .wgd-top{padding:60px 36px 0}
  .wgd-cols{padding:0 36px}
  .wgd-stats-bg{padding:60px 36px}
  .dstack-icons{flex-wrap:wrap}
}
@media(max-width:860px){
  .wgd-cols{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .wgd-divider{display:none}
  .wgd-col-1,.wgd-col-2,.wgd-col-3{padding-top:16px;padding-left:0;padding-right:0}
  .wgd-stats-inner{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .wgd-queen{grid-column:1/-1;order:-1}
  .wgd-queen img{width:160px}
}
@media(max-width:580px){
  .dstack{padding:20px 22px}
  .dsi{width:38px;height:38px;font-size:var(--t-body);border-radius:9px}
  .dstack-label{min-width:90px;font-size:var(--t-caption)}
}

/* ===== SCREENSHOT MATCH OVERRIDES ===== */
/* Pain points — centered heading + quote-mark cards */
.pain-top{display:block!important;text-align:center;margin-bottom:52px}
.pain-top .sec-title{max-width:none!important;text-align:center}
.pain-note{display:none!important}
/* Stats — mascot center layout */
.stats-grid{display:none!important}
.stats-mascot-layout{
  display:grid;grid-template-columns:1fr 200px 1fr;
  gap:20px;align-items:center;max-width:960px;margin:0 auto;
}
.smcol{display:flex;flex-direction:column;gap:16px}
.sm-img{display:flex;align-items:center;justify-content:center}
.sm-img img{
  width:200px;height:auto;
  filter:drop-shadow(0 16px 40px rgba(183,28,237,.45));
  animation:float 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
/* Why Good Design — highlight center card */
.why-cat.center-card{
  border-color:rgba(183,28,237,.35);
  background:rgba(183,28,237,.07);
}
.why-cat.center-card h3{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-size:var(--t-h3);padding-bottom:.18em;
}
/* Testimonials — clean */

/* ===== RESPONSIVE ===== */
@media(max-width:1080px){
  .nav{padding:0 36px}
  .sec{padding:80px 36px}
  .hero{padding:110px 36px 0}
  .stack{padding:60px 36px}
  .ind-sec{padding:80px 36px}
  .cta-sec .sec,.cta-sec{padding:80px 36px}
  .ft{padding:56px 40px 24px;border-radius:32px 32px 0 0}
  .ft-cols{padding-left:40px;gap:28px}
}
@media(max-width:860px){
  .nav-center{display:none}
  .nav-cta{padding:9px 16px;font-size:var(--t-btn)}
  .pain-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr}
  .stats-mascot-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .sm-img{grid-column:1/-1;order:-1}
  .sm-img img{width:140px}
  .testi-cols{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr;gap:40px}
  .ft-grid{flex-direction:column;gap:36px}
  .ft-divider{display:none}
  .ft-brand{flex:none;padding-right:0}
  .ft-cols{padding-left:0;grid-template-columns:1fr 1fr;gap:28px}
  .clutch-meta{grid-template-columns:1fr}
  .why-cats{flex-direction:column;align-items:center}
  .hero-tp{left:22px;bottom:22px}
  .hero-clutch{right:22px;bottom:18px;width:56px;height:56px}
  .hero-play{width:64px;height:64px}
}
@media(max-width:580px){
  .pain-grid{grid-template-columns:1fr}
  .hero h1{font-size:var(--t-h1)}
  .sec{padding:70px 22px}
  .hero{padding:100px 22px 0}
  .stack{padding:50px 22px}
  .ind-sec{padding:70px 22px}
  .ft{padding:50px 22px 22px}
  .nav{padding:0 18px}
  .form-box{padding:28px 22px}
  .fg-row{grid-template-columns:1fr}
  .clutch-card{padding:26px 22px}
}

/* ===== GLOBAL CURSOR GLOW ===== */



/* ===== ANIMATION PACKAGE ===== */
@media (prefers-reduced-motion: no-preference){
  /* scroll reveal — slide up (text/blocks without hover-transform) */
  .reveal{opacity:0;transform:translateY(34px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  /* scroll reveal — fade only (safe for hover-lift cards) */
  .reveal-fade{opacity:0;transition:opacity .7s ease}
  .reveal-fade.in{opacity:1}

  /* hero entrance */
  .hero-play{opacity:0;transform:scale(.6);
    animation:heroPop .9s cubic-bezier(.34,1.56,.64,1) .3s forwards}
  @keyframes heroPop{to{opacity:1;transform:scale(1)}}
  .hero-play::before{content:'';position:absolute;inset:-3px;border-radius:50%;
    border:2px solid rgba(255,255,255,.45);pointer-events:none;
    animation:heroRing 2.6s ease-out infinite}
  @keyframes heroRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}}
  .hero-tp,.hero-clutch{opacity:0;animation:fadeUp .8s ease .7s forwards}
  @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
/* nav CTA shine sweep (on hover) */
.nav-cta{position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);pointer-events:none}
.nav-cta:hover::before{animation:ctaShine .85s ease}
@keyframes ctaShine{to{left:150%}}
/* stat numbers glow when counting */
.wgd-num{transition:text-shadow .5s ease}
.wgd-stats-bg.in-stats .wgd-num{text-shadow:0 0 30px rgba(183,28,237,.5)}

/* ===== ANIMATION PACKAGE 2 ===== */
/* scroll progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,#8B5CF6,#B71CED,#E91E8C,#ED671C);
  box-shadow:0 0 12px rgba(183,28,237,.6);transition:width .12s linear}
/* back-to-top button */
.to-top{position:fixed;right:26px;bottom:26px;z-index:80;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(20,20,24,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .3s,transform .3s,background .2s,box-shadow .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:linear-gradient(135deg,#a31ce8,#c41fd4);
  transform:translateY(-4px)}
/* marquee pause on hover */
.logos-track:hover .logos-inner{animation-play-state:paused}
/* smoother button transforms for magnetic effect */
.nav-cta,.form-btn,.btn-p,.btn-o{
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease}
@media (prefers-reduced-motion: no-preference){
  /* hero slow ken-burns zoom */
  .hero-bg{animation:kenburns 24s ease-in-out infinite alternate}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
  /* floating chess mascot */
  .wgd-queen img{animation:floaty 4.6s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
}


/* ===== Footer (matches index home page) ===== */
.F{position:relative;z-index:3;overflow:hidden;border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(183,28,237,.6),rgba(237,103,28,.5),transparent) 1;
  padding:48px 60px 22px;background:#070708}
.F::after{content:'';position:absolute;right:-180px;bottom:-180px;width:560px;height:560px;border-radius:50%;
  background:repeating-radial-gradient(circle at center,rgba(183,28,237,.1) 0 1px,transparent 1px 56px);pointer-events:none}
.Fin{position:relative;z-index:1;max-width:1380px;margin:0 auto}
.Fstate{font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  max-width:34ch;padding-bottom:.14em;padding-bottom:.18em}
.Fstate .grad{background:var(--gtext);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
.offmini{display:flex;gap:10px;align-items:center;padding:6px 0}
.offmini img{width:26px;height:auto;flex:none;filter:drop-shadow(0 4px 12px rgba(183,28,237,.4))}
.offmini b{display:block;font-size:13px;font-weight:700;letter-spacing:.02em}
.offmini a{display:block;font-size:13px;color:rgba(255,255,255,.48);transition:color .2s}
.offmini a:hover{color:#fff}
.Fgrid{display:grid;grid-template-columns:1.3fr .7fr .9fr .9fr 1.2fr;gap:40px;margin-top:42px}
.Fbrand img{height:24px;margin-bottom:14px}
.Fbrand p{font-size:13px;color:rgba(255,255,255,.48);max-width:28ch;line-height:1.6}
.Fsoc{display:flex;gap:8px;margin-top:18px}
.Fsoc a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);transition:all .25s}
.Fsoc a:hover{border-color:rgba(183,28,237,.55);color:#fff;transform:translateY(-2px)}
.Fsoc svg{width:14px;height:14px;fill:currentColor;display:block}
.Fcol h4,.Fcol h3{font-size:var(--t-h3);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-bottom:14px}
.Fcol a{display:block;font-size:13px;padding:4px 0;color:rgba(255,255,255,.65);transition:color .2s,padding-left .25s}
.Fcol a:hover{color:#fff;padding-left:6px}
.Fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:52px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.48)}
@media(max-width:860px){.Fgrid{grid-template-columns:1fr 1fr;gap:32px}.F{padding:60px 28px 28px}}
@media(max-width:580px){.Fgrid{grid-template-columns:1fr;gap:30px}}

/* author byline */
.bp-meta .bp-au{color:#fff;text-decoration:none;transition:color .2s}
.bp-meta .bp-au:hover{color:#d9a9f5;text-decoration:underline;text-underline-offset:3px}
.bp-avatar{border-radius:50%;object-fit:cover}
.bl-card .bl-au{display:flex;align-items:center;gap:9px;margin-top:12px}
.bl-card .bl-au img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.bl-card .bl-au span{font-size:var(--t-caption);color:rgba(255,255,255,.5)}

/* --- block --- */
/* ============ BLOG ARTICLE PAGE ============ */
.bp-hero{
  position:relative;overflow:hidden;background:#000;text-align:center;
  padding:160px 24px 10px;
}
.bp-hero::before{
  content:'';position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:1200px;height:700px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(183,28,237,.22),transparent 65%);
}
.bp-crumb{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-caption);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:22px;transition:color .2s;
}
.bp-crumb:hover{color:#fff}
.bp-hero h1{
  position:relative;z-index:1;
  font-size:var(--t-h1);font-weight:700;letter-spacing:-.03em;line-height:1.12;
  padding-bottom:.12em;color:#fff;max-width:19ch;margin:0 auto;
}
.bp-hero .excerpt{
  position:relative;z-index:1;
  font-size:var(--t-body);line-height:1.7;color:rgba(255,255,255,.65);
  max-width:640px;margin:16px auto 0;
}
.bp-hero .date{
  position:relative;z-index:1;display:inline-block;
  font-size:var(--t-caption);font-weight:600;color:#d9a9f5;margin:22px 0 0;
  padding:8px 18px;border-radius:999px;
  background:rgba(183,28,237,.12);border:1px solid rgba(183,28,237,.35);
}
.bp-share{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:34px 24px 38px;position:relative;
}
.bp-share::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(780px,88%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.bp-share span{font-size:var(--t-body);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-right:6px}
.bp-share a{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);
  transition:all .25s;
}
.bp-share a:hover{border-color:rgba(183,28,237,.6);color:#fff;transform:translateY(-2px)}
.bp-share svg{width:15px;height:15px;fill:currentColor;display:block}
.bp-body{padding:30px 24px 70px;background:#000}
.bp-art{max-width:780px;margin:0 auto}
.bp-art h2{
  font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;color:#fff;
  margin:46px 0 16px;line-height:1.25;
}
.bp-art h3{
  font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;margin:40px 0 8px;
  background:var(--gtext);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  display:inline-block;padding-bottom:.18em;
}
.bp-art h4{font-size:var(--t-h3);font-weight:700;color:#fff;margin:26px 0 8px}
.bp-art p{font-size:var(--t-body);line-height:1.85;color:rgba(255,255,255,.68);margin:0 0 16px}
.bp-art p b,.bp-art li b{color:rgba(255,255,255,.92);font-weight:700}
.bp-art a{color:#c98af0;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.bp-art a:hover{color:#fff}
.bp-art ul,.bp-art ol{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.bp-art li{font-size:var(--t-body);line-height:1.7;color:rgba(255,255,255,.68)}
.bp-art li::marker{color:#B71CED}
.bp-art .lede{font-size:var(--t-body);color:rgba(255,255,255,.78)}
.bp-art hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:40px 0}
.bp-faq .faq-inner{max-width:780px}

/* --- dm-premium --- */
/* ===== PREMIUM POLISH (site-wide, not on home) ===== */
::selection{background:rgba(183,28,237,.45);color:#fff}
html{scrollbar-width:thin;scrollbar-color:#6d2f92 #0a0710}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0a0710}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#B71CED,#6a0f9e);border-radius:99px;border:2px solid #0a0710}
::-webkit-scrollbar-thumb:hover{background:#c93cf5}
:focus-visible{outline:2px solid rgba(183,28,237,.75);outline-offset:3px}
section[id],footer[id]{scroll-margin-top:96px}
#scrollProg{box-shadow:0 0 12px rgba(183,28,237,.8),0 0 4px rgba(233,30,140,.9)}
.form-btn{position:relative;overflow:hidden}
.form-btn::before{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);pointer-events:none}
.form-btn:hover::before{animation:ctaShine .85s ease}
@media(prefers-reduced-motion:no-preference){
  body{animation:dmPageIn .55s ease-out both}
  @keyframes dmPageIn{from{opacity:0}to{opacity:1}}
  .reveal{opacity:0;transform:translateY(36px);filter:blur(9px);
    transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .95s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none;filter:none}
  .reveal-fade{opacity:0;transform:translateY(20px) scale(.98);filter:blur(7px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
  .reveal-fade.in{opacity:1;transform:none;filter:none}
}

/* --- dart-footer-size --- */
/* ===== footer text at body size ===== */
.F .Fbrand p,.F .Fcol a,.F .offmini b,.F .offmini a,.F .Fbot{font-size:var(--dart-body,18px)!important;line-height:1.35!important}
.F .Fcol h4,.F .Fcol h3{font-size:14px!important}
.F .offmini img{width:32px!important}

/* --- dart-blog-table --- */
.bp-tablewrap{overflow-x:auto;margin:26px 0}.bp-table{width:100%;border-collapse:collapse;font-size:var(--dart-body,18px)}.bp-table th,.bp-table td{border:1px solid rgba(255,255,255,.14);padding:12px 14px;text-align:left;vertical-align:top;color:rgba(255,255,255,.8)}.bp-table th{background:rgba(183,28,237,.12);color:#fff;font-weight:500}

/* --- dart-article-style --- */
/* ===== article beauty pass ===== */
.bp-cat{display:inline-block;letter-spacing:.18em;text-transform:uppercase;color:#a78bfa;margin-bottom:14px}
.bp-art .lede{color:rgba(255,255,255,.88)!important;border-left:3px solid #B71CED;padding-left:18px;margin-bottom:26px}
.bp-art p{margin:0 0 18px}
.bp-art h2{margin:46px 0 16px}
.bp-art h3{margin:34px 0 12px}
.bp-art ul,.bp-art ol{margin:0 0 20px 22px}
.bp-art li{margin-bottom:8px}
.bp-art li::marker{color:#B71CED}
.bp-art a{color:#d94ce6;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(183,28,237,.5);transition:color .2s}
.bp-art a:hover{color:#fff}
.bp-fig{margin:30px 0}
.bp-fig img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.12);display:block}
.bp-fig figcaption{color:rgba(255,255,255,.48);margin-top:10px;text-align:center}
.bp-embed{margin:26px 0}
.bp-embed a{display:inline-flex;gap:8px;align-items:center;padding:12px 22px;border:1px solid rgba(183,28,237,.45);border-radius:10px;color:#fff!important;text-decoration:none!important;background:rgba(183,28,237,.08);}
.bp-embed a:hover{background:rgba(183,28,237,.18)}
/* editorial sizes inside articles + tighter layout */
.bp-art{max-width:860px!important}
.bp-body{padding:26px 20px 60px!important}
.bp-art h2{line-height:1.2!important}
.bp-art h3{line-height:1.25!important}
.bp-hero h1{line-height:1.12!important}
/* v3: wider column, clean headings */
.bp-art{max-width:1000px!important}
.bp-body{padding:20px 40px 56px!important}
.bp-hero{padding-left:40px!important;padding-right:40px!important}
.bp-art h2,.bp-art h3{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.bp-art h2{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);margin:42px 0 18px!important}
.bp-art h3{color:#fff!important;-webkit-text-fill-color:#fff!important;margin:30px 0 12px!important}
.bp-art ul{margin-left:6px!important}
.bp-art li{padding-left:6px}
@media(max-width:700px){.bp-body{padding:14px 20px 46px!important}.bp-hero{padding-left:20px!important;padding-right:20px!important}}

/* --- dart-typography --- */
/* ===== TYPE SCALE (single source, fluid): H1 70 | H2 60 | H3 25 | Body 18 | Caption 14 | Button 18 ===== */
:root{--t-h1:clamp(42px,5.2vw,70px);--t-h2:clamp(32px,4.4vw,60px);--t-h3:clamp(20px,1.85vw,25px);--t-sub:clamp(17px,1.35vw,18px);--t-body:clamp(17px,1.3vw,18px);--t-btn:clamp(16px,1.3vw,18px);--t-caption:clamp(15px,1.2vw,16px);--dart-body:clamp(17px,1.3vw,18px);--dart-body-sm:clamp(17px,1.3vw,18px)}
body{font-size:var(--t-body)!important}
.bp-hero h1, .hero h1{font-size:var(--t-h1)!important;font-weight:500!important;line-height:1.08!important}
.cta-left h2, .sec-title{font-size:var(--t-h2)!important;font-weight:500!important;line-height:1.12!important}
h3, h4, .bp-art h2, .bp-art h3{font-size:var(--t-h3)!important;font-weight:600!important;line-height:1.25!important}
.abf-front b, .abf-back b, .bd-step b, .ai-hf-card b, .ai-step b, .ai-svc-card b, .aic b, .bd-wcard b, .cmf-face b, .prf-face b, .sif-face b, .wdf-face b, .pm-wrong-card b, .wd-wcard b, .ab-member b, .pstep b, .seg-top b, .ct-loc b{font-size:var(--t-h3)!important;font-weight:600!important;line-height:1.25!important}
.bd-price-sub, .bd-proc-sub, .bl-hero-sub, .bp-art .lede, .bp-art h4, .bp-art li, .bp-art p, .bp-hero .date, .bp-hero .excerpt, .bp-share span, .cta-tagline, .cta-ul li, .dsi, .dstack-label, .faq-sub, .fs-hero-sub, .hero-sub, .ind-emoji, .lead, .pain-desc, .pain-note, .pain-title, .sec-label, .sec-sub, .stack-label, .stat-txt, .ti, .tool, .trev-aname, .trev-ccount, .trev-clink, .trev-mcount, .trev-mitem, .trev-quote, .vnums-sub, .wgd-h, .wgd-p, .wgd-stxt, .why-cat p{font-size:var(--t-body)!important;line-height:1.3!important}
.bd-price-sub, .bd-proc-sub, .bl-hero-sub, .bp-hero .excerpt, .cr-form .sub, .ct-every .sub, .cta-tagline, .faq-sub, .fs-hero-sub, .hero-sub, .lead, .pain-desc, .sec-sub, .stat-txt, .vnums-sub, .wgd-p, .why-cat p{font-size:var(--t-sub)!important;line-height:1.5!important}
.nav-cta, .btn-p, .btn-o, .form-btn, .fs-btn, .bd-btn, .cr-btn, .cm-btn, .bl-btn, .bd-plan .cta, .nav-cta .cta-ico, .form-btn .btn-ico, .bl-pager button, .fs-btn.ghost{font-size:var(--t-btn)!important;font-weight:500!important}
.sec-kicker, .kicker, .eyebrow, figcaption, .bp-fig figcaption, .bp-cat, .bl-card .date, .bp-hero .date, .cover .site, .svc-tailored-label, .F .Fcol h4,.F .Fcol h3, .tp-txt, .abf-hint, .dstack-label, .stack-label, .sec-label, .stat .lab, .camp-stats span, .bull-tools span, .trev-ctag, .logos-label, .tag, .chips a{font-size:var(--t-caption)!important}
/* ===== DESIGN SYSTEM - tokens, radius, buttons (single source of truth) ===== */
:root{
  --c-bg:#000;
  --c-orange:#ED671C;
  --c-magenta:#B71CED;
  --c-violet:#8B5CF6;
  --c-pink:#E91E8C;
  --grad-brand:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%);
  --grad-btn:linear-gradient(95deg,#a31ce8 0%,#c41fd4 100%);
  --grad-btn-hover:linear-gradient(95deg,#b228f5 0%,#d52ae6 100%);
  --tx-1:#fff;
  --tx-2:rgba(255,255,255,.65);
  --tx-3:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.14);
  --r-nav:12px;
  --r-nav-link:8px;
  --r-btn:10px;
  --r-card:16px;
  --r-panel:20px;
}
/* Every button shares one radius */
.btn-p, .btn-o, .form-btn, .fs-btn, .fs-btn.ghost, .bd-btn, .cr-btn, .ct-submit, .cm-btn,
.bl-btn, .bd-plan .cta, .nav-cta, .bl-pager button{border-radius:var(--r-btn)!important}
/* Section CTA buttons */
.btn-p, .btn-o, .bd-btn, .cm-btn, .fs-btn, .fs-btn.ghost, .bl-btn, .bd-plan .cta{padding:14px 30px!important}
/* Form submit buttons */
.form-btn, .ct-submit, .cr-btn{padding:15px!important}
/* Nav CTA */
.nav-cta{padding:11px 22px!important}
@media(max-width:1024px){.nav-cta{padding:9px 16px!important}}
/* Primary button - one gradient style, one hover behaviour */
.btn-p, .form-btn, .ct-submit, .cr-btn, .bd-btn, .cm-btn, .bl-btn, .bd-plan .cta{
  background:var(--grad-btn)!important;color:var(--tx-1)!important;border:none!important;
  transition:background .25s ease,transform .2s ease,box-shadow .25s ease!important;
}
.btn-p:hover, .form-btn:hover, .ct-submit:hover, .cr-btn:hover, .bd-btn:hover, .cm-btn:hover,
.bl-btn:hover, .bd-plan .cta:hover, .nav-cta:hover{
  background:var(--grad-btn-hover)!important;transform:translateY(-1px)!important;
  box-shadow:0 8px 24px rgba(183,28,237,.28)!important;
}
/* Secondary button - one outline style, matching hover */
.btn-o, .fs-btn.ghost{
  background:transparent!important;color:var(--tx-1)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  transition:background .25s ease,border-color .25s ease,transform .2s ease!important;
}
.btn-o:hover, .fs-btn.ghost:hover{
  background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.40)!important;
  transform:translateY(-1px)!important;
}

/* --- nav-mobile-fix --- */
/* ===== Mobile navigation (hamburger + drawer) ===== */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(20,20,23,.72);cursor:pointer;padding:0;position:relative;z-index:901;flex:none}
.nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:#fff;border-radius:2px;transition:transform .3s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mob{position:fixed;inset:0;z-index:890;background:rgba(8,6,12,.98);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:flex;flex-direction:column;padding:92px 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s ease,transform .4s ease,visibility .4s}
.nav-mob.open{opacity:1;visibility:visible;transform:none}
.nav-mob-links{display:flex;flex-direction:column}
.nav-mob-links>a,.nm-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:inherit;font-size:19px;font-weight:500;color:#fff;text-decoration:none;padding:15px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:none;cursor:pointer;text-align:left}
.nav-mob-links>a:hover,.nm-trigger:hover{color:#fff}
.nm-trigger .chev{font-size:14px;color:rgba(255,255,255,.5);transition:transform .3s}
.nm-group.open .nm-trigger .chev{transform:rotate(180deg)}
.nm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.nm-group.open .nm-sub{grid-template-rows:1fr}
.nm-sub-in{overflow:hidden;min-height:0}
.nm-sub a{display:block;font-size:15px;color:rgba(255,255,255,.62);text-decoration:none;padding:10px 6px 10px 18px}
.nm-sub a:hover{color:#fff}
.nm-sub-label{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.48);padding:14px 6px 4px 18px}
.nav-mob .nav-cta{display:inline-flex;justify-content:center;width:100%;margin-top:28px}
body.nav-locked{overflow:hidden}
@media(max-width:1024px){.nav-burger{display:flex}.nav-logo{position:relative;z-index:901}.nav>.nav-cta{display:none}}
@media(min-width:1025px){.nav-mob{display:none!important}.nav-burger{display:none!important}}
@media(prefers-reduced-motion:reduce){.nav-mob,.nav-burger span,.nm-sub,.nm-trigger .chev{transition:none}}

/* --- bp-rails --- */
.bp-railL,.bp-railR{display:block}
.bp-railL .rin,.bp-railR .rin{position:sticky;top:130px}
.bp-railL .rlab{display:block;font-size:var(--t-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:14px;text-align:center}
.bp-railL .rin{display:flex;flex-direction:column;align-items:center;gap:0}
.bp-railL a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#121016;color:rgba(255,255,255,.75);margin-bottom:12px;transition:border-color .25s,color .25s,transform .25s}
.bp-railL a:hover{border-color:rgba(163,28,232,.6);color:#fff;transform:translateY(-2px)}
.bp-railL svg{width:18px;height:18px;fill:currentColor;display:block}
.bp-subcard{background:#121016;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 24px;text-align:center}
.bp-subcard h4,.bp-subcard h3{margin:0 0 18px;color:#fff;font-size:var(--t-body);font-weight:700;line-height:1.4}
.bp-subform input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;padding:10px 2px;font-size:var(--t-body);font-family:inherit;outline:none;margin-bottom:18px}
.bp-subform input::placeholder{color:rgba(255,255,255,.55)}
.bp-subform input:focus{border-bottom-color:#c41fd4}
.bp-subform button{width:100%;border:none;cursor:pointer;background:linear-gradient(95deg,#a31ce8,#c41fd4);color:#fff;font-weight:600;font-size:var(--t-btn);font-family:inherit;padding:12px 0;border-radius:10px;transition:opacity .25s,transform .25s}
.bp-subform button:hover{opacity:.9;transform:translateY(-1px)}
@media(min-width:1280px){
.bp-body{display:grid!important;grid-template-columns:96px minmax(0,1000px) 300px;justify-content:center;gap:46px;align-items:start}
.bp-share{display:none!important}
}
@media(max-width:1279px){
.bp-railL{display:none}
.bp-railR{max-width:430px;margin:44px auto 0}
.bp-railR .rin{position:static}
}

/* --- cta-form-xl --- */
.cta-sec .form-box{max-width:600px;padding:38px 34px}
.form-box .f-title{margin:0 0 6px;color:#fff;font-size:var(--t-h3);font-weight:600}
.form-box .f-sub{margin:0 0 24px;color:rgba(255,255,255,.55);font-size:var(--t-caption);line-height:1.5}
.cta-sec .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cta-sec .fg{margin-bottom:18px}
.cta-sec .fg label{display:block;font-size:var(--t-caption);font-weight:600;color:rgba(255,255,255,.6);margin:0 0 7px}
.cta-sec .fg input,.cta-sec .fg textarea{font-size:16px}
.cta-sec .fg textarea{min-height:132px;resize:vertical}
.cta-sec .form-btn{padding:17px}
@media(max-width:640px){.cta-sec .fg-row{grid-template-columns:1fr}.cta-sec .form-box{padding:30px 22px}}
/* wider CTA card + white gradient stroke.
   the ramp mirrors the .bull-card gradient-border recipe already on this site, in white.
   double background: padding-box paints the card fill, border-box paints the
   gradient into the 1px border, so radius, shadow and padding are preserved
   and no pseudo-element or extra markup is needed.
   the input fields are not selected here, they keep their own plain border. */
.cta-sec .cta-inner{max-width:1280px}
.cta-sec .form-box{border-color:transparent;background:linear-gradient(#0d0d0d,#0d0d0d) padding-box,linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.12) 55%,rgba(255,255,255,.34)) border-box}

/* --- dart-mobile-fix --- */
/* Dart Marketing - mobile responsiveness fixes.
   Scoped to mobile / tablet media queries only.
   Rendering above 1180px is unchanged. */
/* client logo grid: width:max-content pinned the CTA columns to 507px */
@media(max-width:860px){
  .cta-left,.cta-right{min-width:0}
  .cta-p-logos{width:100%;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}
  .cta-p-logos img{max-width:100%;min-width:0;object-fit:contain;object-position:left center}
}
@media(max-width:580px){
  .cta-p-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .cta-p-logos img{height:clamp(26px,8vw,36px)}
}
/* Clutch review card: 280px + 1fr / 1fr 1px 1fr never collapsed on mobile */
@media(max-width:860px){
  .trev-card{grid-template-columns:1fr}
  .trev-right{grid-template-columns:1fr}
  .trev-vdiv{width:100%;height:1px}
}
/* badge: anchor shrinks to 56x56 on mobile but the image stayed 76x82 */
@media(max-width:860px){
  .hero-clutch img{width:56px;height:56px;object-fit:cover}
}
/* touch targets: transparent hit area only, no visual change */
@media(max-width:860px){
  .nav-logo{position:relative}
  .nav-logo::after{content:"";position:absolute;top:-7px;right:0;bottom:-7px;left:0}
  .Fsoc a{position:relative}
  .Fsoc a::after{content:"";position:absolute;top:-6px;right:-4px;bottom:-6px;left:-4px;border-radius:50%}
}
@media(max-width:860px){
  .bp-crumb{position:relative}
  .bp-crumb::after{content:"";position:absolute;top:-6px;right:0;bottom:-6px;left:0}
}
@media(max-width:860px){
  .trev-clink{position:relative}
  .trev-clink::after{content:"";position:absolute;top:-6px;right:0;bottom:-6px;left:0}
}
/* secondary text CTAs sat 1-3px under the 24px minimum; hit area only */
@media(max-width:860px){
  .Fbot a{position:relative}
  .Fbot a::after{content:"";position:absolute;top:-3px;right:0;bottom:-3px;left:0}
}

/* --- dart-heading-pins --- */
/* Heading levels corrected for a valid document outline (WCAG 1.3.1).
   Appearance is pinned to the previous rendering: no visual change. */
.bp-art h2.bp-sec{display:inline-block;padding-bottom:0;border-bottom:none;margin:30px 0 12px!important}
.bp-art h3.bp-sub{display:block;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);margin:42px 0 18px!important}

/* --- dart-landmark-css --- */
.dart-skip{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;z-index:100000}
.dart-skip:focus,.dart-skip:focus-visible{left:14px;top:14px;width:auto;height:auto;overflow:visible;white-space:normal;padding:12px 20px;background:#fff;color:#000;border-radius:10px;font-family:'Satoshi',sans-serif;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;outline:3px solid #fff;outline-offset:2px;box-shadow:0 8px 28px rgba(0,0,0,.6)}
main{display:block}
main:focus{outline:none}

/* --- dart-tap-css --- */
/* WCAG 2.5.8 target size (minimum): transparent hit area only.
   No visual change - no colour, spacing, typography or box geometry is touched. */
/* "← All Insights"  measured 162x18 -> 162.0x24.0 */
a.bp-crumb{position:relative}
a.bp-crumb::after{content:"";position:absolute;top:-3px;right:0;bottom:-3px;left:0}

/* --- bp-editorial --- */
/* ===== BLOG EDITORIAL SYSTEM (additive only - no existing rule is modified) ===== */

/* --- HERO v2 : left aligned, column-matched to the article grid --- */
.bp-hero.bp-hero-v2{padding:clamp(112px,8.6vw,164px) 40px clamp(40px,3.5vw,66px)!important;text-align:left}
.bp-hero-v2::before{left:32%;top:-44%;width:1180px;height:760px}
.bp-hero-in{max-width:1000px;margin:0 auto;position:relative;z-index:1}
.bp-hero-v2 h1{max-width:22ch;margin:0;letter-spacing:-.03em}
.bp-hero-v2 .excerpt{max-width:780px;margin:14px 0 0;text-align:left}

/* breadcrumb */
.bp-bc{margin:0 0 16px}
.bp-bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px}
.bp-bc li{display:flex;align-items:center;gap:9px;font-size:var(--t-caption);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.bp-bc li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid rgba(255,255,255,.3);border-top:1.5px solid rgba(255,255,255,.3);transform:rotate(45deg);flex:none}
.bp-bc a{display:inline-block;padding:5px 0;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.bp-bc a:hover,.bp-bc a:focus-visible{color:#d9a9f5}
.bp-bc [aria-current]{color:rgba(255,255,255,.78);padding:5px 0;display:inline-block}

/* category pill */
.bp-pill{display:inline-block;font-size:var(--t-caption);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#e6c8fb;padding:8px 17px;border-radius:999px;background:rgba(183,28,237,.13);border:1px solid rgba(183,28,237,.36);margin:0 0 20px}

/* author / date / reading time */
.bp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;margin:26px 0 0}
.bp-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top center;flex:none;border:1px solid rgba(255,255,255,.2);background:#15111b}
.bp-byline{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.bp-au{color:#fff;font-weight:600;font-size:var(--t-body)}
.bp-role{color:rgba(255,255,255,.48);font-size:var(--t-caption)}
.bp-msep{width:1px;height:30px;background:rgba(255,255,255,.14);flex:none}
.bp-mi{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.58);font-size:var(--t-caption)}
.bp-mi svg{width:16px;height:16px;flex:none;fill:none;stroke:#c98af0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* cover panel */
.bp-cover{position:relative;margin:28px 0 0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0c0a0f;box-shadow:0 20px 52px rgba(0,0,0,.55)}
.bp-cover::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:var(--grad)}
.bp-cover::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 24%,transparent 64%,rgba(0,0,0,.5) 100%)}
.bp-cover .bp-cover-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:none;border-radius:0}
.bp-cover-logo{position:absolute;left:26px;top:23px;z-index:4;height:26px;width:auto;opacity:.96;border:none;border-radius:0}
.bp-cover-site{position:absolute;left:28px;bottom:21px;z-index:4;font-size:var(--t-caption);letter-spacing:.08em;color:rgba(255,255,255,.6)}

@media(min-width:861px){
  .bp-hero-v2 .bp-hero-in{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;
    column-gap:clamp(30px,2.4vw,46px);align-content:center;align-items:start;
    width:min(94vw,1560px);max-width:100%;margin:0 auto;
    background:linear-gradient(180deg,#141118,#100e14);
    border:1px solid rgba(255,255,255,.09);border-radius:clamp(16px,1.3vw,24px);
    padding:clamp(38px,3.1vw,59px) clamp(38px,3.26vw,62px) clamp(42px,3.53vw,67px);
  }
  /* the site locks h1 to --t-h1 with !important further up, so the banner
     size has to be declared !important to land */
  .bp-hero-v2 h1{grid-column:1;grid-row:1;max-width:none;
    font-size:clamp(30px,2.45vw,46px)!important;line-height:1.16!important}
  .bp-hero-v2 .excerpt{grid-column:1;grid-row:2;max-width:none;margin:12px 0 0;
    font-size:clamp(15px,1.05vw,18px);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bp-hero-v2 .bp-meta{grid-column:1;grid-row:3;margin:clamp(18px,1.6vw,28px) 0 0;gap:10px 16px}
  /* the copy column is narrower than the meta row, so the upright rules
     would be left orphaned at the end of a wrapped line */
  .bp-hero-v2 .bp-meta .bp-msep{display:none}
  .bp-hero-v2 .bp-cover{grid-column:2;grid-row:1/4;align-self:center;margin:0;
    border-radius:clamp(10px,.9vw,16px)}
  .bp-hero-v2 .bp-cover .bp-cover-img{
    width:auto;height:17.42vw;min-height:200px;max-height:331px;aspect-ratio:16/9}
}
@media(min-width:1024px){
  /* full reference width once there is room for it */
  .bp-hero-v2 .bp-hero-in{width:min(82.1vw,1560px)}
}
@media(max-width:860px){
  .bp-hero.bp-hero-v2{padding:108px 40px 38px!important}
  .bp-cover{border-radius:14px;margin-top:22px}
  .bp-cover-logo{left:16px;top:14px;height:19px}
  .bp-cover-site{left:17px;bottom:12px}
  .bp-msep{display:none}
  .bp-meta{gap:12px 16px}
}
@media(max-width:700px){
  .bp-hero.bp-hero-v2{padding:100px 20px 32px!important}
}
@media(max-width:560px){
  .bp-bc li:last-child{display:none}
  .bp-bc{margin-bottom:12px}
}

/* --- TABLE OF CONTENTS --- */
.bp-toc{margin:0 0 34px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.015));overflow:hidden}
.bp-toc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 22px;color:#fff;font-weight:600;font-size:var(--t-body)}
.bp-toc>summary::-webkit-details-marker{display:none}
.bp-toc>summary:focus-visible{outline:2px solid #c98af0;outline-offset:-3px}
.bp-toc-lab{display:inline-flex;align-items:center;gap:11px}
.bp-toc-lab svg{width:18px;height:18px;stroke:#c98af0;fill:none;stroke-width:1.8;stroke-linecap:round;flex:none}
.bp-toc-x{width:10px;height:10px;border-right:2px solid rgba(255,255,255,.48);border-bottom:2px solid rgba(255,255,255,.48);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;flex:none}
.bp-toc[open] .bp-toc-x{transform:rotate(-135deg) translate(-2px,-2px)}
.bp-tocwrap{padding:4px 16px 16px;border-top:1px solid rgba(255,255,255,.08)}
.bp-toc ol{counter-reset:bt;list-style:none;margin:10px 0 0!important;padding:0!important;display:grid!important;gap:1px!important}
.bp-toc li{counter-increment:bt;margin:0!important;padding:0!important;font-size:var(--t-body)!important;line-height:1.4!important}
.bp-toc li::marker{content:""}
.bp-toc a{display:flex;gap:13px;align-items:baseline;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.64)!important;text-decoration:none!important;transition:background .2s,color .2s}
.bp-toc a::before{content:counter(bt,decimal-leading-zero);color:#B71CED;font-weight:700;font-size:var(--t-caption);flex:none;font-variant-numeric:tabular-nums}
.bp-toc a:hover,.bp-toc a:focus-visible{background:rgba(183,28,237,.12);color:#fff!important}
.bp-toc a.on{background:rgba(183,28,237,.17);color:#fff!important}
.bp-art h2[id]{scroll-margin-top:118px}
.bp-faq[id]{scroll-margin-top:88px}

/* --- KEY TAKEAWAYS --- */
.bp-key{position:relative;margin:0 0 38px;padding:26px 28px;border-radius:18px;border:1px solid rgba(183,28,237,.3);background:linear-gradient(150deg,rgba(183,28,237,.14),rgba(139,92,246,.05) 58%,rgba(237,103,28,.05));overflow:hidden}
.bp-key::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.bp-key-t{display:flex!important;align-items:center;gap:10px;margin:0 0 16px!important;color:#fff!important;font-weight:700!important;font-size:var(--t-body)!important;line-height:1.3!important}
.bp-key-t svg{width:19px;height:19px;fill:none;stroke:#ED671C;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bp-key ul{list-style:none;margin:0!important;padding:0!important;display:grid!important;gap:12px!important}
.bp-key li{position:relative;margin:0!important;padding:0 0 0 30px!important;color:rgba(255,255,255,.8)!important;font-size:var(--t-body)!important;line-height:1.55!important}
.bp-key li::marker{content:""}
.bp-key li::before{content:"";position:absolute;left:4px;top:.5em;width:11px;height:6px;border-left:2px solid #B71CED;border-bottom:2px solid #B71CED;transform:rotate(-45deg)}

/* --- CALLOUT BOXES --- */
.bp-note{position:relative;margin:30px 0;padding:22px 26px 22px 62px;border-radius:16px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.bp-note>svg{position:absolute;left:22px;top:23px;width:22px;height:22px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bp-note p{margin:0!important;color:rgba(255,255,255,.82)!important;line-height:1.62!important}
.bp-note b{display:block;color:#fff;font-weight:700;margin-bottom:5px}
.bp-note--brand{border-color:rgba(183,28,237,.34);background:linear-gradient(150deg,rgba(183,28,237,.15),rgba(139,92,246,.05))}
.bp-note--brand>svg{stroke:#c98af0}
.bp-note--warn{border-color:rgba(237,103,28,.34);background:linear-gradient(150deg,rgba(237,103,28,.13),rgba(233,30,140,.04))}
.bp-note--warn>svg{stroke:#ED671C}
@media(max-width:560px){.bp-note{padding:52px 20px 20px}.bp-note>svg{left:20px;top:18px}}

/* --- PULL QUOTE --- */
.bp-quote{position:relative;margin:40px 0;padding:6px 0 6px 32px}
.bp-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--grad)}
.bp-quote::after{content:"\201C";position:absolute;right:2px;top:-30px;font-size:110px;line-height:1;color:rgba(183,28,237,.16);pointer-events:none}
.bp-quote p{margin:0!important;font-size:calc(var(--t-body) + 5px)!important;line-height:1.5!important;font-weight:500;color:#fff!important;letter-spacing:-.012em}

/* --- MID ARTICLE CTA --- */
.bp-midcta{position:relative;margin:44px 0;padding:30px 32px;border-radius:20px;overflow:hidden;border:1px solid rgba(183,28,237,.32);background:radial-gradient(120% 170% at 100% 0%,rgba(183,28,237,.24),transparent 62%),linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bp-midcta::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}
.bp-midcta-c{flex:1 1 330px;min-width:0}
.bp-midcta b{display:block;color:#fff;font-size:calc(var(--t-body) + 6px);font-weight:600;line-height:1.28;letter-spacing:-.015em;margin-bottom:7px}
.bp-midcta span{display:block;color:rgba(255,255,255,.6);font-size:var(--t-body);line-height:1.5}
.bp-midcta .btn-p{flex:none;white-space:nowrap;text-decoration:none!important;color:#fff!important}

/* --- INFOGRAPHIC SHELL --- */
.bp-ig{margin:34px 0 36px;container-type:inline-size;container-name:ig}
.bp-ig-h{display:flex!important;align-items:center;gap:11px;margin:0 0 5px!important;color:#fff!important;font-weight:700!important;font-size:var(--t-body)!important;line-height:1.3!important}
.bp-ig-h svg{width:18px;height:18px;fill:none;stroke:#c98af0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bp-ig-s{margin:0 0 20px!important;color:rgba(255,255,255,.46)!important;font-size:var(--t-caption)!important;line-height:1.5!important}

/* infographic 1 : stat cards + progress bars */
.bp-stat{list-style:none;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(6,1fr);gap:16px!important}
.bp-stat li{margin:0!important;padding:20px 20px 18px!important;grid-column:span 2;border-radius:16px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(150deg,rgba(255,255,255,.065),rgba(255,255,255,.018));transition:border-color .3s,transform .3s}
.bp-stat li:nth-child(4),.bp-stat li:nth-child(5){grid-column:span 3}
.bp-stat li:hover{border-color:rgba(183,28,237,.45);transform:translateY(-3px)}
.bp-stat li::marker{content:""}
.bp-stat-n{display:block;font-size:42px;font-weight:700;line-height:1;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
.bp-stat-l{display:block;margin:11px 0 0;color:#fff;font-size:var(--t-body);font-weight:600;line-height:1.35}
.bp-bar{display:block;margin:14px 0 12px;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bp-bar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.bp-stat-w{display:block;color:rgba(255,255,255,.56);font-size:var(--t-caption);line-height:1.5}
.bp-stat-src{display:block;margin:11px 0 0;color:rgba(255,255,255,.34);font-size:calc(var(--t-caption) - 3px);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:900px){
  .bp-stat{grid-template-columns:repeat(2,1fr)}
  .bp-stat li,.bp-stat li:nth-child(4),.bp-stat li:nth-child(5){grid-column:span 1}
  .bp-stat li:nth-child(5){grid-column:span 2}
}
@media(max-width:560px){
  .bp-stat{grid-template-columns:1fr}
  .bp-stat li:nth-child(5){grid-column:span 1}
  .bp-stat-n{font-size:36px}
}

/* infographic 2 : search intent pyramid */
.bp-pyr{display:grid;gap:8px;margin:0}
.bp-pyr-t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:104px;padding:18px 0}
.bp-pyr-t1{clip-path:polygon(26% 0,74% 0,80% 100%,20% 100%);padding-left:26%;padding-right:26%;background:linear-gradient(120deg,#ED671C,#f2913f)}
.bp-pyr-t2{clip-path:polygon(20% 0,80% 0,90% 100%,10% 100%);padding-left:20%;padding-right:20%;background:linear-gradient(120deg,#B71CED,#E91E8C)}
.bp-pyr-t3{clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);padding-left:10%;padding-right:10%;background:linear-gradient(120deg,#8B5CF6,#B71CED 54%,#ED671C)}
.bp-pyr-n{display:block;font-size:var(--t-caption);font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.72)}
.bp-pyr-l{display:block;margin:5px 0 2px;font-size:calc(var(--t-body) + 3px);font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}
.bp-pyr-s{display:block;font-size:var(--t-caption);color:rgba(255,255,255,.84);line-height:1.4}
@media(max-width:760px){
  .bp-pyr{gap:10px}
  .bp-pyr-t{clip-path:none!important;border-radius:13px;min-height:0;padding:16px 18px!important}
  .bp-pyr-t1{width:76%;margin:0 auto}
  .bp-pyr-t2{width:88%;margin:0 auto}
}

/* infographic 3 : ascending growth flow */
.bp-flow{list-style:none;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(5,1fr);gap:0 14px!important;align-items:end}
.bp-flow li{margin:0!important;padding:0!important;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bp-flow li::marker{content:""}
.bp-flow-c{border-radius:16px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));padding:17px 15px 15px;transition:border-color .3s,transform .3s}
.bp-flow li:hover .bp-flow-c{border-color:rgba(183,28,237,.5);transform:translateY(-3px)}
.bp-flow-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;font-size:var(--t-caption);font-weight:700;margin-bottom:11px}
.bp-flow-l{display:block;color:#fff;font-size:calc(var(--t-body) + 1px);font-weight:600;line-height:1.24;margin-bottom:6px;letter-spacing:-.01em}
.bp-flow-s{display:block;color:rgba(255,255,255,.54);font-size:var(--t-caption);line-height:1.45}
.bp-pil{display:block;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(183,28,237,.32),rgba(183,28,237,.02));border-left:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.05)}
.bp-flow li:nth-child(1) .bp-pil{height:30px}
.bp-flow li:nth-child(2) .bp-pil{height:64px}
.bp-flow li:nth-child(3) .bp-pil{height:98px}
.bp-flow li:nth-child(4) .bp-pil{height:132px}
.bp-flow li:nth-child(5) .bp-pil{height:166px}
/* equal card heights keep the step pattern clean whatever the copy wraps to */
.bp-flow-c{min-height:198px}
@media(max-width:860px){
  .bp-flow{grid-template-columns:repeat(2,1fr);gap:14px!important;align-items:stretch}
  .bp-flow li:nth-child(5){grid-column:span 2}
  .bp-flow-c{min-height:0;flex:1 1 auto}
  .bp-pil{display:none}
}
@media(max-width:520px){
  .bp-flow{grid-template-columns:1fr}
  .bp-flow li:nth-child(5){grid-column:span 1}
}
/* the article column narrows sharply once the sticky rails appear, so the
   growth flow also reflows on its own width, not just on viewport width */
@container ig (max-width:820px){
  .bp-flow{grid-template-columns:repeat(2,1fr);gap:14px!important;align-items:stretch}
  .bp-flow li:nth-child(5){grid-column:span 2}
  .bp-flow-c{min-height:0;flex:1 1 auto}
  .bp-pil{display:none}
}
@container ig (max-width:470px){
  .bp-flow{grid-template-columns:1fr}
  .bp-flow li:nth-child(5){grid-column:span 1}
}

/* --- COMPARISON TABLE (rebuilt, scrollable, semantic) --- */
.bp-ctable-w{position:relative;margin:26px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;border:1px solid rgba(255,255,255,.13)}
.bp-ctable-w:focus-visible{outline:2px solid #c98af0;outline-offset:2px}
.bp-ctable{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--t-body)}
.bp-ctable caption{caption-side:top;text-align:left;padding:16px 20px 14px;color:rgba(255,255,255,.5);font-size:var(--t-caption);line-height:1.5;border-bottom:1px solid rgba(255,255,255,.1)}
.bp-ctable th,.bp-ctable td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.09);line-height:1.5}
.bp-ctable thead th{background:rgba(183,28,237,.14);color:#fff;font-weight:600;font-size:var(--t-caption);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid rgba(183,28,237,.3)}
.bp-ctable tbody th{color:#fff;font-weight:600;width:24%;background:rgba(255,255,255,.03)}
.bp-ctable td{color:rgba(255,255,255,.66)}
.bp-ctable tbody tr:last-child th,.bp-ctable tbody tr:last-child td{border-bottom:none}
.bp-ctable tbody tr:hover th,.bp-ctable tbody tr:hover td{background:rgba(183,28,237,.07)}
.bp-swipe{display:none!important;margin:11px 0 0!important;color:rgba(255,255,255,.38)!important;font-size:var(--t-caption)!important}
@media(max-width:760px){.bp-swipe{display:block!important}}

/* --- PREVIOUS / NEXT --- */
.bp-pager{background:#000;padding:6px 40px 66px}
.bp-pager-in{max-width:1000px;margin:0 auto}
.bp-pager-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bp-pg{display:flex;flex-direction:column;gap:9px;padding:22px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.015));text-decoration:none!important;transition:border-color .3s,transform .3s,box-shadow .3s;min-width:0}
a.bp-pg:hover{border-color:rgba(183,28,237,.5);transform:translateY(-3px);box-shadow:0 18px 46px rgba(183,28,237,.16)}
.bp-pg-l{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.44);font-size:var(--t-caption);font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.bp-pg-l svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bp-pg-t{color:#fff;font-size:calc(var(--t-body) + 2px);font-weight:600;line-height:1.32;letter-spacing:-.012em}
a.bp-pg:hover .bp-pg-t{color:#d9a9f5}
.bp-pg--next{text-align:right;align-items:flex-end}
.bp-pg--off{opacity:.4}
@media(min-width:1280px){
  .bp-pager-in{display:grid;grid-template-columns:96px minmax(0,1000px) 300px;justify-content:center;gap:0 46px;max-width:none}
  .bp-pager-grid{grid-column:2}
}
@media(max-width:760px){
  .bp-pager-grid{grid-template-columns:1fr}
  .bp-pg--next{text-align:left;align-items:flex-start}
}
@media(max-width:700px){
  .bp-pager{padding:2px 20px 46px}
}

/* --- RELATED ARTICLES (ported from all-blogs.html, scoped) --- */
.bp-rel .faq-sub{margin:14px auto 52px;text-align:center;max-width:720px}
.bp-rel .faq-title{text-align:center}
.bp-rel .bl-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:38px 26px}
.bp-rel .bl-card{display:flex;flex-direction:column;cursor:pointer;text-decoration:none!important;min-width:0}
.bp-rel .bl-card .cover{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9.4;background:radial-gradient(90% 120% at 80% 70%,rgba(120,30,170,.35),transparent 60%),linear-gradient(150deg,#161318 0%,#0c0a0f 100%);border:1px solid rgba(255,255,255,.14);padding:14px 15px;transition:transform .35s,border-color .3s,box-shadow .35s}
.bp-rel .bl-card:hover .cover{transform:translateY(-6px);border-color:rgba(183,28,237,.55);box-shadow:0 18px 50px rgba(183,28,237,.2)}
.bp-rel .bl-card .cover .clogo{height:13px;width:auto;margin-bottom:12px;opacity:.95;border:none;border-radius:0}
.bp-rel .bl-card .cover .ctitle{font-size:var(--t-caption);font-weight:700;letter-spacing:-.2px;color:#fff;max-width:62%;line-height:1.35}
.bp-rel .bl-card .cover .cart{position:absolute;right:4%;bottom:-6%;width:46%;height:78%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 10px 26px rgba(183,28,237,.4));transition:transform .4s;border:none;border-radius:0}
.bp-rel .bl-card:hover .cover .cart{transform:scale(1.06) rotate(-3deg)}
.bp-rel .bl-card .cover .bolt{position:absolute;right:8%;top:8%;font-size:20px;color:#c93cf5;text-shadow:0 0 18px rgba(183,28,237,.8);transform:rotate(12deg)}
.bp-rel .bl-card .cover .site{position:absolute;left:15px;bottom:10px;font-size:calc(var(--t-caption) - 3px)!important;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.bp-rel .bl-card .date{display:block;font-size:var(--t-caption);color:rgba(255,255,255,.48);margin:16px 0 8px}
.bp-rel .bl-card h3{font-size:calc(var(--t-body) + 3px)!important;font-weight:700!important;letter-spacing:-.3px;line-height:1.3!important;color:#fff;margin:0 0 10px;transition:color .25s}
.bp-rel .bl-card:hover h3{color:#d9a9f5}
.bp-rel .bl-card p{font-size:var(--t-caption)!important;line-height:1.6!important;color:rgba(255,255,255,.5);margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1100px){.bp-rel .bl-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px;max-width:820px}}
@media(max-width:600px){.bp-rel .bl-grid{grid-template-columns:1fr;gap:34px}.bp-rel .faq-sub{margin-bottom:36px}}

/* --- bp-light --- */
/* ===== LIGHT CONTENT AREA (additive only - nothing above is edited) =====
   Everything from the share row down to the CTA section sits on solid #FFFFFF.
   The hero keeps its dark treatment. The footer keeps its dark treatment.
   Separation is done with hairline borders and soft shadows, never with a
   different background colour.
   Every text and icon colour below was measured against #FFFFFF:
     ink   #100d16  19.25:1     body  #43414d   9.99:1
     mut   #5c5a66   6.75:1     faint #6f6d79   5.07:1
     brand #a31ce8   5.40:1  (already used by .form-btn and .bp-subform button)
   The brand ramp is kept on display type only, where 3:1 is the bar. */

:root{
  --lt-bg:#ffffff;
  --lt-ink:#100d16;
  --lt-body:#43414d;
  --lt-mut:#5c5a66;
  --lt-faint:#6f6d79;
  --lt-line:#e7e4ee;
  --lt-line-s:#f1eff6;
  --lt-card:#fbfafd;
  --lt-brand:#a31ce8;
  --lt-shadow:0 1px 2px rgba(16,10,28,.04),0 10px 30px rgba(16,10,28,.06);
  --lt-shadow-h:0 2px 6px rgba(16,10,28,.05),0 16px 38px rgba(16,10,28,.10);
}

/* --- 1. CANVAS --------------------------------------------------------- */
/* the shorthand also clears the dark faq texture on .faq-sec */
.bp-share,.bp-body,.bp-pager,.bp-faq,.bp-rel,.cta-sec{background:#fff!important}

/* the cover has a 22px radius and a near black fill, so the dark hero needs a
   little run off underneath it or two dark corner wedges land on the seam */
.bp-hero.bp-hero-v2{padding-bottom:68px!important}
@media(max-width:860px){.bp-hero.bp-hero-v2{padding-bottom:48px!important}}
@media(max-width:700px){.bp-hero.bp-hero-v2{padding-bottom:40px!important}}

/* section separation without a background change */
.bp-faq,.bp-rel,.cta-sec{border-top:1px solid var(--lt-line-s)}

/* --- 2. ARTICLE BASE TEXT ---------------------------------------------- */
.bp-art p,.bp-art li{color:var(--lt-body)!important}
/* .bp-art p b and .bp-art li b are 0,1,2 and outrank .bp-note b at 0,1,1, so
   without this the bold lead-ins inside the callouts stayed white on white */
.bp-art p b,.bp-art li b{color:var(--lt-ink)}
.bp-art h2,.bp-art h3{color:var(--lt-ink)!important;-webkit-text-fill-color:var(--lt-ink)!important}
.bp-art h2{border-bottom-color:var(--lt-line)}
.bp-art .lede{color:var(--lt-ink)!important;border-left-color:var(--lt-brand)}
.bp-art a{color:var(--lt-brand);text-decoration-color:rgba(163,28,232,.45)}
.bp-art a:hover,.bp-art a:focus-visible{color:#8c17c9;text-decoration-color:#8c17c9}

/* --- 3. TABLE OF CONTENTS ---------------------------------------------- */
.bp-toc{border-color:var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-toc>summary{color:var(--lt-ink)}
.bp-toc>summary:focus-visible{outline-color:var(--lt-brand)}
.bp-toc-lab svg{stroke:var(--lt-brand)}
.bp-toc-x{border-right-color:rgba(16,13,22,.45);border-bottom-color:rgba(16,13,22,.45)}
.bp-tocwrap{border-top-color:var(--lt-line)}
.bp-toc a{color:var(--lt-body)!important}
.bp-toc a::before{color:var(--lt-brand)}
.bp-toc a:hover,.bp-toc a:focus-visible{background:rgba(163,28,232,.09);color:var(--lt-ink)!important}
.bp-toc a.on{background:rgba(163,28,232,.12);color:var(--lt-ink)!important}

/* --- 4. KEY TAKEAWAYS --------------------------------------------------- */
.bp-key{border-color:rgba(183,28,237,.22);background:linear-gradient(150deg,rgba(183,28,237,.055),rgba(139,92,246,.02) 58%,rgba(237,103,28,.025));box-shadow:var(--lt-shadow)}
.bp-key-t{color:var(--lt-ink)!important}
.bp-key li{color:var(--lt-body)!important}

/* --- 5. CALLOUT BOXES --------------------------------------------------- */
.bp-note{border-color:var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-note p{color:var(--lt-body)!important}
.bp-note b{color:var(--lt-ink)}
.bp-note--brand{border-color:rgba(183,28,237,.3);background:linear-gradient(150deg,rgba(183,28,237,.07),rgba(139,92,246,.028))}
/* #c98af0 measures 2.51:1 on white and fails, #a31ce8 is 5.40:1 */
.bp-note--brand>svg{stroke:var(--lt-brand)}
/* the wash is kept very light so the #ED671C mark still clears 3:1 on it */
.bp-note--warn{border-color:rgba(237,103,28,.42);background:linear-gradient(150deg,rgba(237,103,28,.05),rgba(233,30,140,.02))}
.bp-note--warn>svg{stroke:#ED671C}

/* --- 6. PULL QUOTE ------------------------------------------------------ */
.bp-quote p{color:var(--lt-ink)!important}
.bp-quote::after{color:rgba(183,28,237,.13)}

/* --- 7. MID ARTICLE CTA ------------------------------------------------- */
.bp-midcta{border-color:rgba(183,28,237,.26);background:radial-gradient(120% 170% at 100% 0%,rgba(183,28,237,.1),transparent 62%),var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-midcta b{color:var(--lt-ink)}
.bp-midcta span{color:var(--lt-mut)}

/* --- 8. INFOGRAPHIC SHELL ---------------------------------------------- */
.bp-ig-h{color:var(--lt-ink)!important}
.bp-ig-h svg{stroke:var(--lt-brand)}
.bp-ig-s{color:var(--lt-faint)!important}

/* --- 9. INFOGRAPHIC 1 : STAT CARDS -------------------------------------- */
.bp-stat li{border-color:var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-stat li:hover{border-color:rgba(183,28,237,.42);box-shadow:var(--lt-shadow-h)}
.bp-stat-l{color:var(--lt-ink)}
.bp-bar{background:rgba(16,13,22,.09)}
.bp-stat-w{color:var(--lt-mut)}
.bp-stat-src{color:var(--lt-faint)}
/* .bp-stat-n keeps the brand ramp: 42px 700 is large text, 3.2:1 minimum passes */

/* --- 10. INFOGRAPHIC 2 : PYRAMID ---------------------------------------- */
/* the tiers are opaque brand gradients, so they are unchanged by the white
   canvas. Only the surrounding shell needed light treatment. */

/* --- 11. INFOGRAPHIC 3 : GROWTH FLOW ------------------------------------ */
.bp-flow-c{border-color:var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-flow li:hover .bp-flow-c{border-color:rgba(183,28,237,.45);box-shadow:var(--lt-shadow-h)}
.bp-flow-l{color:var(--lt-ink)}
.bp-flow-s{color:var(--lt-mut)}
/* same hue as the dark build, only the alphas move. The tail is lifted off zero
   so the base of each bar still reads against white, and the hairlines are
   darkened so the columns keep their edges instead of smudging into the page */
.bp-pil{background:linear-gradient(180deg,rgba(183,28,237,.30),rgba(183,28,237,.06));border-left-color:rgba(16,13,22,.07);border-right-color:rgba(16,13,22,.07);border-bottom-color:rgba(16,13,22,.09)}

/* --- 12. COMPARISON TABLE ----------------------------------------------- */
.bp-ctable-w{border-color:var(--lt-line);box-shadow:var(--lt-shadow)}
.bp-ctable-w:focus-visible{outline-color:var(--lt-brand)}
.bp-ctable caption{color:var(--lt-faint);border-bottom-color:var(--lt-line)}
.bp-ctable th,.bp-ctable td{border-bottom-color:var(--lt-line-s)}
.bp-ctable thead th{background:rgba(183,28,237,.07);color:var(--lt-ink);border-bottom-color:rgba(183,28,237,.24)}
.bp-ctable tbody th{color:var(--lt-ink);background:#f7f5fb}
.bp-ctable td{color:var(--lt-body)}
.bp-ctable tbody tr:hover th,.bp-ctable tbody tr:hover td{background:rgba(183,28,237,.04)}
.bp-swipe{color:var(--lt-faint)!important}

/* --- 13. STICKY RAILS + SUBSCRIBE CARD ---------------------------------- */
.bp-railL .rlab{color:var(--lt-ink)}
.bp-railL a{border-color:var(--lt-line);background:#fff;color:var(--lt-mut);box-shadow:var(--lt-shadow)}
.bp-railL a:hover{border-color:rgba(163,28,232,.6);color:var(--lt-brand)}
.bp-subcard{background:var(--lt-card);border-color:var(--lt-line);box-shadow:var(--lt-shadow)}
.bp-subcard h4,.bp-subcard h3{color:var(--lt-ink)}
.bp-subform input{border-bottom-color:rgba(16,13,22,.28);color:var(--lt-ink)}
.bp-subform input::placeholder{color:var(--lt-faint)}
.bp-subform input:focus{border-bottom-color:var(--lt-brand)}
/* .bp-subform button keeps its brand gradient, white on #a31ce8 is 5.40:1 */

/* --- 14. SHARE ROW (tablet and mobile only) ----------------------------- */
.bp-share span{color:var(--lt-faint)}
.bp-share a{border-color:var(--lt-line);color:var(--lt-mut)}
.bp-share a:hover{border-color:rgba(163,28,232,.6);color:var(--lt-brand)}
.bp-share::after{background:linear-gradient(90deg,transparent,var(--lt-line),transparent)}

/* --- 15. PREVIOUS / NEXT ------------------------------------------------ */
.bp-pg{border-color:var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
a.bp-pg:hover{border-color:rgba(163,28,232,.5);box-shadow:0 18px 42px rgba(163,28,232,.14)}
.bp-pg-l{color:var(--lt-faint)}
.bp-pg-t{color:var(--lt-ink)}
a.bp-pg:hover .bp-pg-t{color:var(--lt-brand)}

/* --- 16. FAQ ------------------------------------------------------------ */
/* the stock ramp runs white to near black, which is invisible on white.
   flipped so it runs ink to a soft grey and keeps the same fade shape. */
.bp-faq .faq-title,.bp-rel .faq-title{background-image:linear-gradient(180deg,#100d16 44%,#57545f 118%)}
.faq-sub{color:var(--lt-mut)}
.faq-item{border-color:var(--lt-line);background:#fff;box-shadow:var(--lt-shadow);backdrop-filter:none}
.faq-item:hover{border-color:rgba(183,28,237,.34)}
.faq-q{color:var(--lt-ink)}
.faq-a{color:var(--lt-body)}
.faq-ico::before{border-top-color:rgba(16,13,22,.6)}

/* --- 17. RELATED ARTICLES ----------------------------------------------- */
/* the card artwork stays dark on purpose: the Dart mark, the card title and the
   site line inside it are all white, so it reads as a thumbnail, not as page
   background. A soft shadow lifts it off the white canvas. */
.bp-rel .bl-card .cover{box-shadow:0 8px 26px rgba(16,10,28,.14)}
.bp-rel .bl-card .date{color:var(--lt-faint)}
.bp-rel .bl-card h3{color:var(--lt-ink)}
.bp-rel .bl-card p{color:var(--lt-mut)}
.bp-rel .bl-card:hover h3{color:var(--lt-brand)}

/* --- 18. CTA SECTION ---------------------------------------------------- */
.cta-left h2{color:var(--lt-ink)}
.cta-ul li{color:var(--lt-body)}
.cta-ul li::before{background:var(--lt-brand)}
.cta-tagline{color:var(--lt-mut)}
/* the six partner PNGs are white artwork on transparent, so on white they
   would disappear. brightness(0) turns them into flat silhouettes. */
.cta-p-logos img{filter:brightness(0);opacity:.5}

/* white card, dark gradient stroke, same double background recipe as before */
.cta-sec .form-box{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(16,13,22,.24),rgba(16,13,22,.07) 55%,rgba(16,13,22,.16)) border-box;box-shadow:var(--lt-shadow-h)}
.form-box .f-title{color:var(--lt-ink)}
.form-box .f-sub{color:var(--lt-mut)}
.cta-sec .fg label{color:var(--lt-mut)}
.fg input,.fg textarea,.fg select{border-color:rgba(16,13,22,.24);color:var(--lt-ink)}
.fg input:focus,.fg textarea:focus{border-color:var(--lt-brand);background:rgba(163,28,232,.03)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--lt-faint)}
.form-consent{color:var(--lt-faint)}
.form-consent input[type=checkbox]{border-color:rgba(16,13,22,.3)}
.form-consent a{color:var(--lt-mut)}
/* .form-btn keeps #a31ce8 with white text, 5.40:1 */

/* --- 19. SELECTION ------------------------------------------------------ */
/* the global rule paints white text on a translucent purple, which vanishes on
   a white canvas. Scoped so the dark hero and footer keep the original. */
.bp-share ::selection,.bp-body ::selection,.bp-pager ::selection,
.bp-faq ::selection,.bp-rel ::selection,.cta-sec ::selection{background:rgba(163,28,232,.2);color:#100d16}

/* --- bp-ig2 --- */
/* ===== INFOGRAPHIC PRIMITIVES v2 (additive only) =========================
   New HTML/CSS infographic components used by the remaining blog inner pages.
   Nothing in ed.css or lt.css is edited. This block is injected after both, so
   it is authored light native for the white article canvas and reuses the same
   --lt-* tokens, the same 16px card radius, the same hairline and shadow.
   Every colour below was measured against #FFFFFF:
     ink #100d16 19.25:1   body #43414d 9.99:1   mut #5c5a66 6.75:1
     faint #6f6d79 5.07:1  brand #a31ce8 5.40:1  ok #1d7a4d 4.71:1
     bad #b4261f 5.94:1
   The brand ramp is only used on display type and on graphics, where 3:1 is
   the bar, never on body copy.
   .bp-art forces font-size / line-height / list margins with !important on p,
   li, ul and ol, so component internals re-declare those with !important too.
   ======================================================================== */

:root{--ig-ok:#1d7a4d;--ig-bad:#b4261f;--ig-track:#ece9f2}

/* shared source line under any infographic */
.bp-ig-src{margin:14px 0 0!important;color:var(--lt-faint)!important;font-size:calc(var(--t-caption) - 2px)!important;line-height:1.5!important;letter-spacing:.05em;text-transform:uppercase}

/* shared legend */
.bp-lg{display:flex!important;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0!important;padding:0!important;list-style:none}
.bp-lg li{display:flex!important;align-items:center;gap:9px;margin:0!important;padding:0!important;color:var(--lt-mut)!important;font-size:var(--t-caption)!important;line-height:1.4!important}
.bp-lg li::marker{content:""}
.bp-lg i{width:14px;height:14px;border-radius:5px;flex:none;background:var(--grad)}
.bp-lg li:nth-child(2) i{background:#cfc7dd}
/* explicit swatch modifiers so legend order can follow chart order */
.bp-lg li.b i{background:var(--grad)}
.bp-lg li.n i{background:#cfc7dd}

/* --- 1. DONUT : one dominant percentage ------------------------------- */
.bp-donut{display:grid;grid-template-columns:auto 1fr;gap:26px 34px;align-items:center;padding:26px 28px;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-dn{position:relative;width:186px;height:186px;border-radius:50%;flex:none;
  background:conic-gradient(from -90deg,#8B5CF6 0deg,#B71CED calc(var(--v) * 1.8deg),#E91E8C calc(var(--v) * 3.6deg),var(--ig-track) calc(var(--v) * 3.6deg))}
.bp-dn::before{content:"";position:absolute;inset:17px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(16,13,22,.05)}
.bp-dn-v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.bp-dn-n{display:block;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--lt-ink)}
.bp-dn-u{display:block;font-size:calc(var(--t-caption) - 2px);letter-spacing:.12em;text-transform:uppercase;color:var(--lt-faint)}
.bp-dn-c b{display:block;color:var(--lt-ink);font-size:calc(var(--t-body) + 3px);font-weight:700;line-height:1.3;letter-spacing:-.015em;margin-bottom:8px}
.bp-dn-c p{margin:0!important;color:var(--lt-body)!important;font-size:var(--t-body)!important;line-height:1.6!important}
.bp-dn-c p+p{margin-top:10px!important}
@container ig (max-width:560px){
  .bp-donut{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 20px}
  .bp-dn{width:158px;height:158px}
  .bp-dn-n{font-size:38px}
}

/* --- 2. COMPARE : two panels side by side ------------------------------ */
.bp-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:0 18px;align-items:stretch}
.bp-cmp-c{padding:22px 22px 20px;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow);display:flex;flex-direction:column}
.bp-cmp-c.on{border-color:rgba(183,28,237,.3);background:linear-gradient(150deg,rgba(183,28,237,.06),rgba(139,92,246,.022))}
.bp-cmp-h{display:flex!important;align-items:center;gap:9px;margin:0 0 4px!important;color:var(--lt-ink)!important;font-size:var(--t-body)!important;font-weight:700!important;line-height:1.3!important}
.bp-cmp-h svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--lt-brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bp-cmp-n{display:block;margin:12px 0 2px;font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--lt-ink)}
.bp-cmp-c.on .bp-cmp-n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
.bp-cmp-u{display:block;margin:0 0 14px;color:var(--lt-faint);font-size:var(--t-caption)}
.bp-cmp-c ul{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:9px!important}
.bp-cmp-c li{margin:0!important;padding:0 0 0 22px!important;position:relative;color:var(--lt-body)!important;font-size:var(--t-caption)!important;line-height:1.5!important}
.bp-cmp-c li::marker{content:""}
.bp-cmp-c li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:3px;background:#cfc7dd}
.bp-cmp-c.on li::before{background:var(--grad)}
.bp-cmp-c li b{color:var(--lt-ink)}
.bp-cmp-vs{align-self:center;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--lt-line);background:#fff;box-shadow:var(--lt-shadow);color:var(--lt-faint);font-size:calc(var(--t-caption) - 2px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;flex:none}
@container ig (max-width:660px){
  .bp-cmp{grid-template-columns:1fr;gap:14px}
  .bp-cmp-vs{justify-self:center;width:38px;height:38px}
}

/* --- 3. RANK : horizontal ranked bars ---------------------------------- */
.bp-rank{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:14px!important}
.bp-rank li{margin:0!important;padding:0!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,2fr) auto;gap:6px 16px;align-items:center}
.bp-rank li::marker{content:""}
.bp-rank-l{color:var(--lt-ink);font-size:var(--t-caption);font-weight:600;line-height:1.35;min-width:0}
.bp-rank-t{display:block;height:14px;border-radius:99px;background:var(--ig-track);overflow:hidden;min-width:0}
.bp-rank-t i{display:block;height:100%;border-radius:99px;background:var(--grad);width:calc(var(--w) * 1%)}
.bp-rank-v{font-size:calc(var(--t-body) + 1px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--lt-ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bp-rank li:first-child .bp-rank-v{color:#8c17c9}
@container ig (max-width:560px){
  .bp-rank li{grid-template-columns:minmax(0,1fr) auto;gap:9px 12px}
  .bp-rank-l{grid-area:1 / 1 / 2 / 2}
  .bp-rank-v{grid-area:1 / 2 / 2 / 3}
  .bp-rank-t{grid-area:2 / 1 / 3 / 3}
}

/* --- 4. TREND : columns over time -------------------------------------- */
.bp-trend{list-style:none!important;margin:0!important;padding:22px 22px 18px!important;display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:0 12px!important;align-items:end;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-trend li{margin:0!important;padding:0!important;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.bp-trend li::marker{content:""}
.bp-trend-v{color:var(--lt-ink);font-size:var(--t-caption);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-align:center;font-variant-numeric:tabular-nums}
.bp-trend-b{display:block;width:100%;max-width:76px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,#8B5CF6,#B71CED 52%,#E91E8C);height:calc(var(--h) * 1.9px);min-height:8px}
.bp-trend li:last-child .bp-trend-b{background:linear-gradient(180deg,#ED671C,#E91E8C 58%,#B71CED)}
.bp-trend-x{color:var(--lt-mut);font-size:calc(var(--t-caption) - 2px);line-height:1.2;text-align:center;padding-top:9px;border-top:1px solid var(--lt-line);width:100%}
@container ig (max-width:560px){
  .bp-trend{padding:18px 14px 14px!important;gap:0 7px!important}
  .bp-trend-v{font-size:calc(var(--t-caption) - 3px)}
  .bp-trend-x{font-size:calc(var(--t-caption) - 4px)}
  .bp-trend-b{height:calc(var(--h) * 1.3px)}
}

/* --- 5. GRID3 : icon cards --------------------------------------------- */
.bp-grid3{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important}
.bp-grid3 li{margin:0!important;padding:20px 19px 18px!important;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow);transition:border-color .3s,box-shadow .3s,transform .3s;min-width:0}
.bp-grid3 li::marker{content:""}
.bp-grid3 li:hover{border-color:rgba(183,28,237,.42);box-shadow:var(--lt-shadow-h);transform:translateY(-3px)}
.bp-g3-i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,rgba(183,28,237,.13),rgba(139,92,246,.06));border:1px solid rgba(183,28,237,.22);margin-bottom:13px}
.bp-g3-i svg{width:20px;height:20px;fill:none;stroke:var(--lt-brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bp-g3-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:var(--grad);color:#fff;font-size:var(--t-caption);font-weight:700;margin-bottom:13px}
.bp-g3-l{display:block;color:var(--lt-ink);font-size:calc(var(--t-body) + 1px);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin-bottom:6px}
.bp-g3-s{display:block;color:var(--lt-mut);font-size:var(--t-caption);line-height:1.5}
@container ig (max-width:700px){.bp-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container ig (max-width:430px){.bp-grid3{grid-template-columns:1fr}}
.bp-grid3.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@container ig (max-width:820px){.bp-grid3.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container ig (max-width:430px){.bp-grid3.four{grid-template-columns:1fr}}
.bp-grid3.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@container ig (max-width:560px){.bp-grid3.two{grid-template-columns:1fr}}

/* --- 6. CHECK : yes / no columns --------------------------------------- */
.bp-check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bp-check.one{grid-template-columns:1fr}
.bp-ck{padding:21px 22px 19px;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow);min-width:0}
.bp-ck--yes{border-color:rgba(29,122,77,.26);background:linear-gradient(150deg,rgba(29,122,77,.05),rgba(29,122,77,.015))}
.bp-ck--no{border-color:rgba(180,38,31,.26);background:linear-gradient(150deg,rgba(180,38,31,.045),rgba(180,38,31,.012))}
.bp-ck-h{display:flex!important;align-items:center;gap:10px;margin:0 0 15px!important;color:var(--lt-ink)!important;font-size:var(--t-body)!important;font-weight:700!important;line-height:1.3!important}
.bp-ck-h svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--lt-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bp-ck--yes .bp-ck-h svg{stroke:var(--ig-ok)}
.bp-ck--no .bp-ck-h svg{stroke:var(--ig-bad)}
.bp-ck ul{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:11px!important}
.bp-ck li{position:relative;margin:0!important;padding:0 0 0 29px!important;color:var(--lt-body)!important;font-size:var(--t-caption)!important;line-height:1.5!important}
.bp-ck li::marker{content:""}
.bp-ck li::before{content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;border-radius:6px;background:rgba(163,28,232,.1)}
.bp-ck li::after{content:"";position:absolute;left:5px;top:.42em;width:8px;height:4px;border-left:2px solid var(--lt-brand);border-bottom:2px solid var(--lt-brand);transform:rotate(-45deg)}
.bp-ck--yes li::before{background:rgba(29,122,77,.11)}
.bp-ck--yes li::after{border-color:var(--ig-ok)}
.bp-ck--no li::before{background:rgba(180,38,31,.1)}
.bp-ck--no li::after{left:5.5px;top:.44em;width:8px;height:8px;border:none;transform:none;
  background:linear-gradient(to bottom right,transparent 44%,var(--ig-bad) 44%,var(--ig-bad) 56%,transparent 56%),linear-gradient(to bottom left,transparent 44%,var(--ig-bad) 44%,var(--ig-bad) 56%,transparent 56%)}
.bp-ck li b{color:var(--lt-ink);display:block;margin-bottom:2px}
@container ig (max-width:620px){.bp-check{grid-template-columns:1fr}}

/* --- 7. TIER : package tiers ------------------------------------------- */
.bp-tier{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;align-items:stretch}
.bp-tier li{margin:0!important;padding:22px 21px 20px!important;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow);display:flex!important;flex-direction:column;min-width:0}
.bp-tier li::marker{content:""}
.bp-tier li.on{border-color:rgba(183,28,237,.32);background:linear-gradient(160deg,rgba(183,28,237,.07),rgba(139,92,246,.022));box-shadow:var(--lt-shadow-h)}
.bp-tr-b{display:inline-block;align-self:flex-start;font-size:calc(var(--t-caption) - 2px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8c17c9;padding:5px 12px;border-radius:99px;background:rgba(163,28,232,.09);border:1px solid rgba(163,28,232,.2);margin-bottom:14px}
.bp-tr-p{display:block;font-size:27px;font-weight:700;line-height:1.1;letter-spacing:-.025em;color:var(--lt-ink)}
.bp-tr-p span{font-size:var(--t-caption);font-weight:500;color:var(--lt-faint);letter-spacing:0}
.bp-tr-w{display:block;margin:8px 0 15px;padding-bottom:15px;border-bottom:1px solid var(--lt-line);color:var(--lt-mut);font-size:var(--t-caption);line-height:1.5}
.bp-tier ul{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:9px!important}
.bp-tier ul li{margin:0!important;padding:0 0 0 21px!important;position:relative;border:none;background:none;box-shadow:none;border-radius:0;display:block!important;color:var(--lt-body)!important;font-size:var(--t-caption)!important;line-height:1.5!important}
.bp-tier ul li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:2px;background:var(--grad)}
@container ig (max-width:760px){.bp-tier{grid-template-columns:1fr}}

/* --- 8. MATRIX : label to value rows ----------------------------------- */
.bp-mx{list-style:none!important;margin:0!important;padding:0!important;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow);overflow:hidden;display:block!important}
.bp-mx li{margin:0!important;padding:15px 20px!important;display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:4px 20px;align-items:baseline;border-bottom:1px solid var(--lt-line-s)}
.bp-mx li::marker{content:""}
.bp-mx li:last-child{border-bottom:none}
.bp-mx li:nth-child(odd){background:rgba(183,28,237,.022)}
.bp-mx-k{color:var(--lt-ink);font-size:var(--t-caption);font-weight:700;line-height:1.4}
.bp-mx-v{color:var(--lt-body);font-size:var(--t-caption);line-height:1.55}
@container ig (max-width:560px){.bp-mx li{grid-template-columns:1fr;gap:5px}}

/* --- 9. RATIO : pictogram ---------------------------------------------- */
.bp-ratio{display:grid;grid-template-columns:auto 1fr;gap:24px 30px;align-items:center;padding:24px 26px;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-rt-f{display:flex;gap:10px;flex:none}
.bp-rt-f i{position:relative;display:block;width:32px;height:44px;color:#dcd6e8}
.bp-rt-f i.on{color:#B71CED}
.bp-rt-f i::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:currentColor}
.bp-rt-f i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;border-radius:11px 11px 5px 5px;background:currentColor}
.bp-rt-n{display:block;font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--lt-ink);margin-bottom:7px}
.bp-rt-c p{margin:0!important;color:var(--lt-body)!important;font-size:var(--t-body)!important;line-height:1.6!important}
@container ig (max-width:560px){
  .bp-ratio{grid-template-columns:1fr;padding:22px 20px}
  .bp-rt-f i{width:27px;height:38px}
  .bp-rt-n{font-size:29px}
}

/* --- 10. DUAL : two series per row ------------------------------------- */
.bp-dual{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:16px!important}
.bp-dual li{margin:0!important;padding:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:5px 18px;align-items:center}
.bp-dual li::marker{content:""}
.bp-dl-l{color:var(--lt-ink);font-size:var(--t-caption);font-weight:600;line-height:1.35;min-width:0}
.bp-dl-g{display:flex;flex-direction:column;gap:6px;min-width:0}
.bp-dl-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.bp-dl-r>span{display:block;height:12px;border-radius:99px;background:var(--ig-track);overflow:hidden}
.bp-dl-r>span i{display:block;height:100%;border-radius:99px;background:#cfc7dd;width:calc(var(--w) * 1%)}
.bp-dl-r.b>span i{background:var(--grad)}
.bp-dl-r b{font-size:var(--t-caption);font-weight:700;color:var(--lt-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.bp-dl-r.b b{color:var(--lt-ink)}
@container ig (max-width:560px){.bp-dual li{grid-template-columns:1fr}}

/* --- 11. HUB : one system, many inputs --------------------------------- */
.bp-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.bp-hub-c{grid-column:1 / -1;order:2;display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:16px;border:1px solid rgba(183,28,237,.3);background:linear-gradient(150deg,rgba(183,28,237,.09),rgba(139,92,246,.03));box-shadow:var(--lt-shadow)}
.bp-hub-c svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--lt-brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bp-hub-c b{display:block;color:var(--lt-ink);font-size:calc(var(--t-body) + 2px);font-weight:700;line-height:1.25;letter-spacing:-.015em;margin-bottom:4px}
.bp-hub-c span{display:block;color:var(--lt-mut);font-size:var(--t-caption);line-height:1.5}
.bp-hub-i{padding:16px 17px;border-radius:14px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow);min-width:0}
.bp-hub-i:nth-child(-n+3){order:1}
.bp-hub-i:nth-child(n+5){order:3}
.bp-hub-i b{display:block;color:var(--lt-ink);font-size:var(--t-caption);font-weight:700;line-height:1.3;margin-bottom:4px}
.bp-hub-i span{display:block;color:var(--lt-mut);font-size:calc(var(--t-caption) - 1px);line-height:1.45}
@container ig (max-width:640px){.bp-hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container ig (max-width:420px){.bp-hub{grid-template-columns:1fr}}

/* --- 12. STEP : numbered ladder ---------------------------------------- */
.bp-step{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:0!important}
.bp-step li{position:relative;margin:0!important;padding:0 0 22px 56px!important;min-height:44px}
.bp-step li::marker{content:""}
.bp-step li:last-child{padding-bottom:0!important}
.bp-step li::before{content:"";position:absolute;left:19px;top:38px;bottom:-4px;width:2px;background:linear-gradient(180deg,rgba(183,28,237,.32),rgba(183,28,237,.08))}
.bp-step li:last-child::before{display:none}
.bp-step-n{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:var(--grad);color:#fff;font-size:var(--t-body);font-weight:700}
.bp-step-l{display:block;color:var(--lt-ink);font-size:calc(var(--t-body) + 1px);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:7px 0 5px}
.bp-step-s{display:block;color:var(--lt-mut);font-size:var(--t-caption);line-height:1.55}

/* --- 13. GAUGE : labelled meter rows ----------------------------------- */
.bp-meter{list-style:none!important;margin:0!important;padding:22px 24px 20px!important;display:flex!important;flex-direction:column;gap:17px!important;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-meter li{margin:0!important;padding:0!important;display:block!important}
.bp-meter li::marker{content:""}
.bp-mt-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:8px}
.bp-mt-l{color:var(--lt-ink);font-size:var(--t-caption);font-weight:600;line-height:1.35;min-width:0}
.bp-mt-v{font-size:calc(var(--t-body) + 2px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--lt-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bp-mt-t{display:block;height:10px;border-radius:99px;background:var(--ig-track);overflow:hidden}
.bp-mt-t i{display:block;height:100%;border-radius:99px;background:var(--grad);width:calc(var(--w) * 1%)}
.bp-mt-s{display:block;margin-top:7px;color:var(--lt-mut);font-size:calc(var(--t-caption) - 1px);line-height:1.45}

/* --- 14. SPLIT : one number beside a short list ------------------------ */
.bp-split{display:grid;grid-template-columns:auto 1fr;gap:22px 30px;align-items:center;padding:24px 26px;border-radius:16px;border:1px solid rgba(183,28,237,.24);background:linear-gradient(150deg,rgba(183,28,237,.055),rgba(139,92,246,.02));box-shadow:var(--lt-shadow)}
.bp-sp-n{display:block;font-size:60px;font-weight:700;line-height:.95;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;white-space:nowrap;padding-bottom:.18em}
.bp-sp-u{display:block;margin-top:6px;color:var(--lt-faint);font-size:calc(var(--t-caption) - 2px);letter-spacing:.12em;text-transform:uppercase}
.bp-split ul{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:9px!important}
.bp-split li{position:relative;margin:0!important;padding:0 0 0 22px!important;color:var(--lt-body)!important;font-size:var(--t-caption)!important;line-height:1.5!important}
.bp-split li::marker{content:""}
.bp-split li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:3px;background:var(--grad)}
.bp-split li b{color:var(--lt-ink)}
@container ig (max-width:520px){.bp-split{grid-template-columns:1fr;padding:22px 20px}.bp-sp-n{font-size:48px}}

/* --- 15. COMPARE, long value variant ----------------------------------- */
/* A money string such as "$3,000 to $8,000" cannot hold one 34px line in a
   half width panel, so this variant drops to a single column one step early
   and the two headline figures stay on matching baselines. */
@container ig (max-width:800px){
  .bp-cmp.lv{grid-template-columns:1fr;gap:14px}
  .bp-cmp.lv .bp-cmp-vs{justify-self:center;width:38px;height:38px}
}

/* --- 16. GRID TRACK GUARD ---------------------------------------------- */
/* .bp-art is sized by fit content because it carries margin:0 auto, so its
   width follows the widest min content inside it. A scrolling table reports
   its full unwrapped width there, which pushed the article past its grid
   track and underneath the right hand rail. Inline size containment keeps
   the wrapper's own width independent of the table it scrolls. */
.bp-ctable-w{contain:inline-size}

/* --- 17. RANK CARD ------------------------------------------------------ */
/* The ranked bar list shipped without a surface, so beside a trend or gauge
   block it read as loose body copy. This gives it the same card as its two
   siblings without touching their rules. */
.bp-rank{padding:22px 24px 20px!important;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
@container ig (max-width:560px){.bp-rank{padding:18px 16px 16px!important}}

/* --- 18. DUAL CARD AND MUTED FILL --------------------------------------- */
/* The two bar dual comparison was the only chart primitive without a card, so
   next to a rank or gauge block it read as loose body copy. It now takes the
   same surface as its siblings. Its muted fill was also #cfc7dd against an
   #ece9f2 track, a ratio of 1.36:1, so the lower value in every pair was
   effectively invisible. The fill it carries now clears 3:1 for non text
   contrast while still reading as clearly secondary to the brand gradient. */
.bp-dual{padding:22px 24px 20px!important;border-radius:16px;border:1px solid var(--lt-line);background:var(--lt-card);box-shadow:var(--lt-shadow)}
.bp-dl-r>span i{background:#7d7689}
.bp-dl-r.b>span i{background:var(--grad)}
@container ig (max-width:560px){.bp-dual{padding:18px 16px 16px!important}}

/* --- 19. QUOTE ATTRIBUTION ---------------------------------------------- */
/* The pull quote block styles its paragraph but never styled a cite, and the
   page level boilerplate paints one white. On the white article canvas that
   put the attribution at 1:1 contrast, which is invisible. This gives cite a
   block of its own at the muted ink token, 6.75:1 on white. */
.bp-art .bp-quote cite{display:block;margin:16px 0 0;color:var(--lt-mut)!important;font-size:var(--t-caption);font-weight:600;font-style:normal;line-height:1.45;letter-spacing:.01em}

/* --- 20. TABLE CAPTION ON NARROW SCREENS -------------------------------- */
/* The caption is a child of the table, so it inherited the table's 640px
   min-width and was clipped by the scroll wrapper on phones. Its text, which
   carries the sourcing note for the data, could only be read by dragging the
   table sideways. Making the wrapper an inline-size query container lets the
   caption take the visible width instead, and pinning it left keeps it in
   place while the columns scroll under it. Desktop is unchanged, because
   there the container width and the table width are already the same. */
.bp-ctable-w{container-type:inline-size}
.bp-ctable caption{position:sticky;left:0;width:100cqw;box-sizing:border-box}

/* --- 21. HUB WITH FIVE INPUTS, AND THE LEGEND SWATCH -------------------- */
/* .bp-hub lays three inputs on the top row, the centre card across the full
   width, then the remainder below. With five inputs the bottom row left one
   empty cell. Switching to a six track grid lets the top three span two each
   and the bottom two span three each, so both rows stay flush. */
.bp-hub.h5{grid-template-columns:repeat(6,minmax(0,1fr))}
.bp-hub.h5 .bp-hub-i:nth-child(-n+3){grid-column:span 2}
.bp-hub.h5 .bp-hub-i:nth-child(n+5){grid-column:span 3}
@container ig (max-width:640px){.bp-hub.h5{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-hub.h5 .bp-hub-i{grid-column:auto!important}}
@container ig (max-width:420px){.bp-hub.h5{grid-template-columns:1fr}.bp-hub.h5 .bp-hub-i{grid-column:auto!important}}
/* Section 18 darkened the muted bar fill in .bp-dual to #7d7689 for contrast
   but left the legend swatch on the old #cfc7dd, so a two series chart with a
   legend would key the wrong colour. Bring the swatch back in line. */
.bp-lg li.n i,.bp-lg li:nth-child(2) i{background:#7d7689}

/* --- 22. THE HUB CENTRE CARD ON A NARROW CANVAS ------------------------- */
/* .bp-hub-c is a flex row: icon, then title and body in one column. Under
   about 480px the title wraps to three lines and the icon floats beside a tall
   block, which reads badly. Stack it there instead. */
@container ig (max-width:480px){.bp-hub-c{flex-direction:column;align-items:flex-start;gap:11px;padding:18px 18px}}

/* --- 23. SOURCE HEADING VARIANTS ON THE WHITE CANVAS -------------------- */
/* Three page-local heading rules in the source set were authored for the dark
   canvas and never got a light counterpart. .bp-art h3.bp-sub4 is 0,2,1 and so
   outranks the 0,1,1 selector in lt.css even though both carry !important, and
   .bp-art h4 has no light rule at all, so both land white on white. h2.bp-sec
   also drops the section rule and tightens the margins away from the approved
   master. Put all of them back on the master treatment. */
.bp-art h2.bp-sec{display:block;padding-bottom:10px;border-bottom:1px solid var(--lt-line);margin:42px 0 18px!important}
.bp-art h3.bp-sub4{color:var(--lt-ink)!important;-webkit-text-fill-color:var(--lt-ink)!important}
.bp-art h4{color:var(--lt-ink)!important;-webkit-text-fill-color:var(--lt-ink)!important}
.bp-art hr{border-top-color:var(--lt-line)}

/* --- 24. RATIO PICTOGRAM ON A NARROW CANVAS ----------------------------- */
/* 1fr carries an automatic min-content floor, and ten pips plus nine gaps
   measure 360px, so the track refused to shrink below the article width on a
   phone and the last two pips were clipped off the right edge. */
@container ig (max-width:560px){
  .bp-ratio{grid-template-columns:minmax(0,1fr)}
  .bp-rt-f{flex-wrap:wrap;gap:8px}
}
@container ig (max-width:400px){
  .bp-rt-f{gap:6px}
  .bp-rt-f i{width:24px;height:34px}
  .bp-rt-f i::before{width:14px;height:14px}
  .bp-rt-f i::after{height:19px;border-radius:9px 9px 4px 4px}
}

/* Gradient text is clipped to the glyph box, so tight leading and negative
   letter-spacing cut descenders and the last glyph. Pad the box and pull the
   padding back with a matching negative margin so layout is unchanged. */
h1,h2,h3,.g-text,.g-brand,.grad{}
[class*="hero"] h1,[class*="hero"] h2,.sec-title,.sh,.g-text,.g-brand,.grad{
  padding-bottom:.16em;margin-bottom:-.16em;
  padding-right:.06em;
}

/* Article hero headline on the shared scale. The generic .bp-hero h1 rule
   loses to a later, more specific one on these pages. */
.bp-hero.bp-hero-v2 h1,.bp-hero.bp-hero-c h1,.bp-hero.pb-hero h1{font-size:var(--t-h1)!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important}

/* The nav CTA was taller than the nav row it sits in. */
.nav-cta{padding:9px 18px!important;font-size:var(--t-btn)!important;line-height:1.25!important}
@media(max-width:1024px){.nav-cta{padding:8px 14px!important}}

/* Footer region icons: each map has its own aspect ratio, so at a fixed width
   they rendered at four different heights and never lined up. They also came
   out near-black on a black footer, and the ones whose artwork runs to the
   edge of the file looked clipped. One fixed box with object-fit gives them a
   common size and centre, and the brightness lift makes them legible. The
   dartboard rings sat behind this column, so they move clear of it. */
.F .offmini img{width:32px!important;height:26px;object-fit:contain;object-position:center;
  filter:brightness(2.15) saturate(1.15) drop-shadow(0 3px 10px rgba(183,28,237,.45))}
.F .offmini{align-items:center;gap:12px}
.F::after{right:-300px;bottom:-250px}