:root{--ink:#172033;--muted:#5d6678;--line:#dfe5ee;--paper:#fff;--wash:#f5f7fb;--accent:#3157d5;--accent2:#162b6f;--good:#eaf7ef;--radius:18px;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}img{max-width:100%}.wrap{max-width:var(--max);margin:auto;padding:0 24px}
.nav{max-width:var(--max);margin:auto;padding:18px 24px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-weight:800}.mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ink);color:white;font-size:13px;letter-spacing:.04em}.navlinks{display:flex;gap:18px;margin-left:auto}.navlinks a{color:var(--muted);text-decoration:none;font-weight:650;font-size:14px}.nav-toggle{display:none;margin-left:auto;background:white;border:1px solid var(--line);border-radius:10px;padding:8px 11px}
main{max-width:var(--max);margin:auto;padding:28px 24px 70px}.hero{padding:74px 0 46px;border-bottom:1px solid var(--line)}.hero h1{font-size:clamp(42px,7vw,76px);line-height:1.03;letter-spacing:-.045em;max-width:980px;margin:.12em 0}.article-hero h1{font-size:clamp(38px,6vw,64px)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;color:var(--accent)}.lede{font-size:clamp(18px,2vw,24px);color:var(--muted);max-width:820px}.button{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;padding:13px 18px;border-radius:12px}.button.secondary{background:white;color:var(--ink);border:1px solid var(--line)}
section{padding:38px 0}h2{font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:-.025em;margin:0 0 18px}h3{line-height:1.25}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.card,.related-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:white}.card p{color:var(--muted);margin-bottom:0}.takeaways{background:var(--wash);padding:28px;border-radius:var(--radius);margin-top:34px}.takeaways h2{font-size:24px}.takeaways li{margin:8px 0}.cta{background:var(--accent2);color:#fff;padding:34px;border-radius:24px}.cta .eyebrow{color:#c8d5ff}.cta p{max-width:760px}.cta .button{background:#fff;color:var(--accent2)}.related{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.related-card{text-decoration:none;color:var(--ink);display:block}.related-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}.sources{border-top:1px solid var(--line)}.sources p,.sources li{color:var(--muted);font-size:14px}
.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.category-grid a{text-decoration:none;color:var(--ink)}.category-grid .card{height:100%}.category-grid p{color:var(--muted)}footer{border-top:1px solid var(--line);padding:28px 24px;color:var(--muted);font-size:13px}.footer-inner{max-width:var(--max);margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:820px){.navlinks{display:none;position:absolute;left:16px;right:16px;top:72px;background:white;padding:16px;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.08);z-index:10}.navlinks.open{display:grid}.nav-toggle{display:block}.grid.two,.grid.three,.category-grid,.related{grid-template-columns:1fr}.hero{padding-top:48px}main{padding-left:18px;padding-right:18px}}


/* 2026 conversion refresh — independent HighLevel-adjacent SaaS aesthetic */
:root{
  --ink:#0d1733;
  --muted:#667085;
  --line:#e7eaf2;
  --paper:#ffffff;
  --wash:#f7f9ff;
  --accent:#6d4aff;
  --accent2:#24185a;
  --cyan:#13c8d5;
  --violet-wash:#f2efff;
  --radius:22px;
}
body{
  background:
    radial-gradient(circle at 80% -10%,rgba(109,74,255,.12),transparent 34rem),
    radial-gradient(circle at 5% 10%,rgba(19,200,213,.08),transparent 28rem),
    var(--paper);
}
.nav{
  margin-top:12px;
  border:1px solid rgba(231,234,242,.9);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 36px rgba(35,24,90,.06);
  position:sticky;top:10px;z-index:20
}
.mark{background:linear-gradient(135deg,var(--accent),var(--cyan));box-shadow:0 8px 22px rgba(109,74,255,.22)}
.hero{border-bottom:0;position:relative}
.hero:after{content:"";display:block;width:96px;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--cyan));margin-top:30px}
.hero h1{background:linear-gradient(135deg,var(--ink) 15%,#2c235d 70%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--accent)}
.button{
  background:linear-gradient(135deg,var(--accent),#5140db);
  box-shadow:0 10px 22px rgba(109,74,255,.22);
  transition:transform .18s ease,box-shadow .18s ease
}
.button:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(109,74,255,.28)}
.button.secondary{background:#fff;color:var(--ink);box-shadow:none}
.card,.related-card{
  border-color:#e9e6f8;
  box-shadow:0 12px 34px rgba(35,24,90,.05);
}
.card:hover,.related-card:hover{border-color:#d8d0ff}
.takeaways{background:linear-gradient(135deg,var(--violet-wash),#f6fcff);border:1px solid #e8e1ff}
.cta{
  position:relative;overflow:hidden;
  background:
   radial-gradient(circle at 90% 10%,rgba(19,200,213,.28),transparent 15rem),
   linear-gradient(135deg,#21164f,#382875 65%,#313786);
  box-shadow:0 22px 50px rgba(35,24,90,.18)
}
.cta:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:-60px;bottom:-90px}
.cta .button{background:#fff;color:#2a205d;box-shadow:none}
.affiliate-note{
  display:flex;gap:10px;align-items:flex-start;
  background:#fff8e8;border:1px solid #f1dfb3;color:#6a5424;
  padding:12px 14px;border-radius:14px;margin:20px 0 4px;font-size:14px
}
.affiliate-note strong{color:#4c3a12}
.popup-backdrop{
  position:fixed;inset:0;background:rgba(10,15,35,.52);z-index:90;
  display:none;align-items:center;justify-content:center;padding:20px
}
.popup-backdrop.show{display:flex}
.conversion-popup{
  width:min(520px,100%);background:#fff;border:1px solid #ebe7ff;border-radius:28px;
  padding:28px;box-shadow:0 28px 80px rgba(15,15,45,.32);position:relative;
  background-image:radial-gradient(circle at 95% 5%,rgba(109,74,255,.14),transparent 13rem)
}
.popup-close{
  position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;cursor:pointer
}
.popup-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:850}
.conversion-popup h2{font-size:34px;margin:8px 44px 12px 0}
.conversion-popup p{color:var(--muted)}
.popup-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.popup-actions .button{border:0;cursor:pointer}
.popup-fine{font-size:12px!important;margin-top:14px}
@media(max-width:820px){
 .nav{margin:8px 10px 0}
 .conversion-popup{padding:24px 20px}
 .conversion-popup h2{font-size:29px}
}

.nav-affiliate{
  margin-left:8px;padding:10px 14px;border-radius:12px;text-decoration:none!important;
  font-weight:800;font-size:14px;color:#fff!important;
  background:linear-gradient(135deg,var(--accent),#5140db);
  box-shadow:0 8px 18px rgba(109,74,255,.20)
}
.affiliate-rail{
  position:fixed;left:18px;right:18px;bottom:16px;z-index:70;
  pointer-events:none
}
.affiliate-rail-inner{
  max-width:820px;margin:auto;background:rgba(13,23,51,.96);color:#fff;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:11px 12px 11px 16px;
  display:flex;align-items:center;gap:14px;box-shadow:0 18px 48px rgba(13,23,51,.24);
  backdrop-filter:blur(12px);pointer-events:auto;font-size:13px
}
.affiliate-rail-inner div{flex:1}.affiliate-rail-inner span{color:#c8cede}
.affiliate-rail-inner a{
  text-decoration:none;color:#24185a;background:#fff;font-weight:850;
  padding:9px 13px;border-radius:10px;white-space:nowrap
}
.affiliate-rail-inner button{
  border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer;
  width:30px;height:30px;border-radius:50%
}
.affiliate-rail.hidden{display:none}
@media(max-width:820px){
  .nav-affiliate{margin-left:0;font-size:12px;padding:8px 10px}
  .affiliate-rail{left:8px;right:8px;bottom:8px}
  .affiliate-rail-inner{gap:8px;padding:9px 9px 9px 12px}
  .affiliate-rail-inner div span{display:none}
}


/* Header stability patch */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
  width:calc(100% - 48px);
  max-width:1160px;
  margin:12px auto 0;
  padding:14px 16px;
}
.brand{flex:0 0 auto;min-width:max-content}
.navlinks{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-width:0;
}
.navlinks .nav-affiliate{
  margin-left:4px;
  flex:0 0 auto;
}
.nav-toggle{display:none}
@media(max-width:920px){
  .nav{
    width:calc(100% - 20px);
    margin:8px auto 0;
    padding:12px 14px;
    position:sticky;
    top:8px;
  }
  .brand{min-width:0}
  .brand span:last-child{white-space:nowrap}
  .nav-toggle{
    display:block;
    margin-left:auto;
    flex:0 0 auto;
  }
  .navlinks{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    margin-left:0;
    padding:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 18px 42px rgba(13,23,51,.14);
    z-index:40;
  }
  .navlinks.open{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
  }
  .navlinks a{
    display:block;
    padding:11px 12px;
    border-radius:10px;
  }
  .navlinks .nav-affiliate{
    margin:6px 0 0;
    text-align:center;
    padding:11px 14px;
  }
}
@media(max-width:420px){
  .brand span:last-child{font-size:14px}
  .mark{width:34px;height:34px}
}