/* 10-simple-seo-tweaks-that-can-double-your-website-traffic.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-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-hero-size --- */
/* Blog hero banner sized to match the approved v2 hero. These pages carry no
   cover image and no author block, so the card is text only and keeps the
   page's own centred copy. The width ladder, the breakpoints and the section
   padding below all mirror the v2 hero exactly, so the two templates line up
   at every viewport. Below 861 the v2 hero has no card at all, so neither does
   this one, which leaves these pages' phone layout exactly as it already was. */
.bp-hero.bp-hero-c{
  padding:clamp(112px,8.6vw,164px) 40px 68px!important;
}
.bp-hero-c .bp-hero-in{position:relative;z-index:1;margin:0 auto}
@media(min-width:861px){
  .bp-hero-c .bp-hero-in{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:min(94vw,1560px);max-width:100%;
    /* tracks the measured v2 card: text driven up to 1100, cover driven above */
    min-height:max(320px,calc(min(17.42vw,333px) + clamp(38px,3.1vw,59px) + clamp(42px,3.53vw,67px)));
    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);
    text-align:center;
  }
  /* the site locks h1 to --t-h1 with !important further up, so the banner
     size has to be declared !important to land */
  .bp-hero-c h1{font-size:clamp(30px,2.45vw,46px)!important;line-height:1.16!important;
    max-width:26ch;margin:0}
  .bp-hero-c .excerpt{font-size:clamp(15px,1.05vw,18px)!important;line-height:1.5!important;
    max-width:74ch;margin:12px auto 0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bp-hero-c .date{margin:clamp(18px,1.6vw,28px) 0 0}
}
@media(min-width:861px) and (max-width:1099px){
  /* the v2 card is text driven across this band and measures a flat 354 */
  .bp-hero-c .bp-hero-in{min-height:354px}
}
@media(min-width:1024px){
  /* full reference width once there is room for it */
  .bp-hero-c .bp-hero-in{width:min(82.1vw,1560px)}
}
@media(max-width:860px){
  .bp-hero.bp-hero-c{padding:108px 40px 48px!important}
}
@media(max-width:700px){
  .bp-hero.bp-hero-c{padding:100px 20px 40px!important}
}

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

/* 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 v2 + cover, matched to the other blog pages --- */
/* --- 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-v2 h1{max-width:22ch;margin:0;letter-spacing:-.03em}
.bp-hero-v2 .excerpt{max-width:780px;margin:14px 0 0;text-align:left}
/* 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}
}
/* 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}}


/* --- article byline, matched to the other blog pages --- */
/* 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}
.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}
.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}
@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}
}
/* 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}
@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(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}
}
/* --- 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}
/* --- 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}
/* --- 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)}
/* .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)}
/* .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}

/* 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}


/* --- article layout, matched to the other blog pages --- */
/* 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}
/* --- 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}
/* --- 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}}
.bp-hero h1, .hero h1{font-size:var(--t-h1)!important;font-weight:500!important;line-height:1.08!important}
h3, h4, .bp-art h2, .bp-art h3{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}
.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}
/* --- 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}
}
@media(max-width:860px){
  .bp-crumb{position:relative}
  .bp-crumb::after{content:"";position:absolute;top:-6px;right:0;bottom:-6px;left:0}
}
/* --- 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}
}
.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}
.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%)}
/* --- 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)}
/* .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}
/* 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 embed button was white text, which was fine on the old dark card and
   invisible once these articles moved onto the light one. */
.bp-art .bp-embed a{color:#8f1ec0!important;font-weight:600}
.bp-art .bp-embed a:hover{color:#5d0f80!important;background:rgba(183,28,237,.14)!important}

/* The light article canvas must stop at the article. The CTA, form and
   footer below it belong to the dark site, and the reference article has no
   CTA section, so the white canvas was never caught there. */
.cta-sec,.sec.cta-sec,.bl-cta,.rel-sec{background:transparent!important}
.cta-sec h2,.cta-sec .cta-left h2,.cta-sec p,.cta-sec li{color:#fff}
.cta-sec .cta-tagline,.cta-sec .cta-ul li{color:rgba(255,255,255,.72)}

/* 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}