/* SitePex — site styles. Palette anchored on brand blue #2563EB. */
:root{
  --blue:#2563EB; --blue-d:#1D4ED8; --blue-l:#3B82F6; --sky:#60A5FA;
  --navy:#0B1B3F; --deep:#081533;
  --ink:#101B33; --slate:#5B6780; --dim:#9BA9C8;
  --wash:#F4F7FD; --wash2:#E8F0FC; --line:#E2E9F4;
  --green:#15803D; --green-bg:#E7F6ED; --amber:#F59E0B; --red:#DC2626;
  --sh:0 1px 3px rgba(16,27,51,.05),0 8px 24px rgba(16,27,51,.06);
  --sh-lg:0 8px 18px rgba(16,27,51,.08),0 24px 54px rgba(16,27,51,.12);
  --r:16px; --maxw:1320px;
  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-optical-sizing:auto}
img{max-width:100%;height:auto}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;letter-spacing:-.018em;font-weight:700;line-height:1.18}
p{margin:0}
.w{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.w--narrow{max-width:900px}
section{padding:80px 0}
.sec--wash{background:var(--wash)}
.sec--navy{background:var(--navy);color:#E8EEFB}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:12px 18px;border-radius:8px}

/* ---------- promo + nav ---------- */
.promo{background:var(--navy);color:#fff;font-size:13.5px;padding:10px 20px;text-align:center}
.promo b{color:var(--sky)}
.promo a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav .w{display:flex;align-items:center;gap:28px;padding:13px 32px}
.brand{display:flex;align-items:center;gap:9px;font-size:21.5px;font-weight:700;
  letter-spacing:-.028em;text-decoration:none;color:var(--ink)}
.brand .mk{width:29px;height:29px;border-radius:8px;background:var(--blue);display:grid;
  place-items:center;color:#fff;font-size:15px;font-weight:700}
.nav nav{display:flex;gap:24px;font-size:14.5px;font-weight:500}
.nav nav a{text-decoration:none;color:var(--ink)}
.nav nav a:hover,.nav nav a[aria-current=page]{color:var(--blue)}
.nav .right{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:14.5px}
.nav .right a{text-decoration:none;font-weight:500}
.nav .right .in{color:var(--slate)}
.nav .right .in:hover{color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;cursor:pointer}
.burger svg{width:20px;height:20px;display:block}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:10px;
  padding:15px 30px;font-size:16px;text-align:center;border:0;cursor:pointer;
  transition:background .16s,color .16s}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.26)}
.btn--blue:hover{background:var(--blue-d)}
.btn--out{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.btn--out:hover{background:var(--wash2)}
.btn--white{background:#fff;color:var(--blue)}
.btn--white:hover{background:var(--wash2)}
.btn--sm{padding:11px 20px;font-size:14.5px;border-radius:9px}
.btn--blk{display:block;width:100%}

/* ---------- hero ---------- */
.hero{background:linear-gradient(168deg,var(--navy) 0%,#12275C 58%,#16306E 100%);
  color:#fff;padding:60px 0 72px;text-align:center;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;left:50%;top:-200px;width:900px;height:540px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(96,165,250,.2),transparent 68%)}
.hero .w{position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(96,165,250,.15);
  border:1px solid rgba(96,165,250,.33);color:#CFE0FF;font-size:13px;font-weight:600;
  border-radius:100px;padding:7px 16px;margin-bottom:20px}
.pill svg{width:14px;height:14px}
.hero h1{font-size:clamp(31px,4.5vw,55px);margin-bottom:16px;letter-spacing:-.028em}
.hero .lede{font-size:18px;color:#BCCBEA;max-width:64ch;margin:0 auto 24px;line-height:1.6}
.hstat{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;
  font-size:14.5px;color:#CFE0FF}
.hstat span{display:flex;gap:8px;align-items:center}
.hstat svg{width:16px;height:16px;color:var(--sky);flex:none}
.hprice{margin-bottom:22px}
.hprice .from{font-size:14px;color:#9FB6E4;display:block;margin-bottom:4px}
.hprice .amt{font-size:clamp(35px,5vw,47px);font-weight:700;letter-spacing:-.032em;line-height:1}
.hprice .amt em{font-style:normal;font-size:17px;font-weight:500;color:#BCCBEA}
.hacts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hnote{margin-top:16px;font-size:13.5px;color:#9FB6E4}

/* ---------- page header (inner pages) ---------- */
.phead{background:var(--navy);color:#fff;padding:52px 0 58px;text-align:center}
.phead h1{font-size:clamp(29px,4vw,47px);margin-bottom:14px;letter-spacing:-.026em}
.phead p{font-size:17.5px;color:#BCCBEA;max-width:62ch;margin:0 auto}
.crumb{font-size:13px;color:#8FA6D6;margin-bottom:14px}
.crumb a{color:#BCCBEA;text-decoration:none}
.crumb a:hover{color:#fff}

/* ---------- trust bar ---------- */
.rate{background:var(--wash);border-bottom:1px solid var(--line)}
.rate .w{display:flex;gap:40px;justify-content:center;align-items:center;padding:18px 32px;flex-wrap:wrap}
.rate .item{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--slate)}
.rate .item b{color:var(--ink)}

/* ---------- section heads ---------- */
.head{max-width:62ch;margin:0 auto 42px;text-align:center}
.head h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:12px}
.head p{font-size:17px;color:var(--slate)}
.sec--navy .head h2{color:#fff}
.sec--navy .head p{color:var(--dim)}
.head--l{margin-left:0;text-align:left}

/* ---------- plan cards ---------- */
.terms{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:5px;margin:0 auto 10px;box-shadow:var(--sh)}
.terms button{font-size:14.5px;font-weight:500;font-family:inherit;color:var(--slate);background:none;
  border:0;border-radius:100px;padding:11px 22px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.terms button[aria-pressed=true]{background:var(--blue);color:#fff}
.terms .save{font-size:11px;font-weight:700;background:var(--green-bg);color:var(--green);
  padding:3px 8px;border-radius:100px}
.terms button[aria-pressed=true] .save{background:rgba(255,255,255,.22);color:#fff}
.tnote{text-align:center;font-size:13.5px;color:var(--slate);margin-bottom:32px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  box-shadow:var(--sh);position:relative}
.card--best{border:2px solid var(--blue);box-shadow:var(--sh-lg);padding-top:38px}
.ribbon{position:absolute;top:0;left:0;right:0;background:var(--blue);color:#fff;
  font-size:12px;font-weight:700;text-align:center;padding:7px;border-radius:14px 14px 0 0}
.card h3{font-size:21px;margin-bottom:6px}
.card .tag{font-size:13.5px;color:var(--slate);min-height:42px;line-height:1.5;margin-bottom:14px}
.card .now{display:flex;align-items:baseline;gap:3px;margin-bottom:4px}
.card .now sup{font-size:19px;font-weight:700;position:relative;top:-11px}
.card .now b{font-size:41px;font-weight:700;letter-spacing:-.034em;line-height:1;font-variant-numeric:tabular-nums}
.card .now em{font-style:normal;font-size:15px;color:var(--slate);font-weight:500}
.card .mo{font-size:13px;color:var(--slate);margin-bottom:14px}
.card .renew{font-size:12.5px;font-weight:600;color:var(--green);background:var(--green-bg);
  border-radius:8px;padding:9px 11px;margin-top:12px;line-height:1.45}
.card .grp{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.card .grp h4{font-size:12px;font-weight:700;color:var(--slate);margin-bottom:10px}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.card li{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.card li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--green)}
.card li.no{color:var(--slate);opacity:.62}
.card li.no svg{color:var(--slate)}
.card .why{margin-top:16px;background:var(--wash);border-radius:10px;padding:12px 14px;
  font-size:13px;color:var(--slate);line-height:1.55}
.guarantee{text-align:center;margin-top:28px;font-size:14px;color:var(--slate)}
.guarantee b{color:var(--ink)}

/* ---------- feature grid ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh)}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--wash2);color:var(--blue);
  display:grid;place-items:center;margin-bottom:15px}
.feat .ic svg{width:23px;height:23px}
.feat h3{font-size:18.5px;margin-bottom:7px}
.feat p{font-size:14.5px;color:var(--slate);line-height:1.65}

/* ---------- split band ---------- */
.band{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.band h2{font-size:clamp(25px,3vw,38px);margin-bottom:14px}
.band>div>p{font-size:16.5px;color:var(--slate);line-height:1.66;margin-bottom:20px;max-width:50ch}
.sec--navy .band h2{color:#fff}
.sec--navy .band>div>p{color:var(--dim)}
.blist{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;font-size:15.5px}
.blist li{display:flex;gap:11px;align-items:flex-start}
.blist svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--blue)}
.sec--navy .blist svg{color:var(--sky)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;box-shadow:var(--sh)}
.sec--navy .panel{background:var(--deep);border-color:rgba(96,165,250,.26)}
.panel h3{font-size:16.5px;margin-bottom:18px}
.sec--navy .panel h3{color:var(--sky)}
.bar{margin-bottom:15px}
.bar .lab{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px;color:var(--slate)}
.bar .lab b{color:var(--ink)}
.sec--navy .bar .lab{color:var(--dim)}
.sec--navy .bar .lab b{color:#fff}
.bar .track{height:10px;background:var(--wash2);border-radius:100px;overflow:hidden}
.sec--navy .bar .track{background:rgba(255,255,255,.1)}
.bar .fill{height:100%;border-radius:100px;background:var(--blue)}
.bar .fill--alt{background:#A9BCDD}
.sec--navy .bar .fill{background:var(--sky)}
.sec--navy .bar .fill--alt{background:rgba(255,255,255,.26)}

/* ---------- comparison ---------- */
.cmpwrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:#fff;box-shadow:var(--sh)}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:780px}
.cmp thead th{position:sticky;top:0;z-index:2;background:var(--navy);color:#fff;text-align:left;
  font-weight:600;font-size:14px;padding:14px 16px}
.cmp thead th:nth-child(n+2){text-align:center;width:14.5%}
.cmp thead th small{display:block;font-weight:400;font-size:12px;color:var(--dim);margin-top:2px}
.cmp .grp td{background:var(--wash2);font-weight:700;font-size:14.5px;padding:12px 16px;color:var(--navy)}
.cmp tbody td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--slate)}
.cmp tbody td:nth-child(n+2){text-align:center}
.cmp tbody td:first-child{font-weight:500;color:var(--ink)}
.cmp tbody tr:hover td{background:var(--wash)}
.cmp tbody tr.grp:hover td{background:var(--wash2)}
.cmp .y{color:var(--green);font-weight:700}
.cmp .n{color:var(--slate);opacity:.4}
.cmp .hint{display:block;font-size:12.5px;font-weight:400;color:var(--slate);margin-top:2px;max-width:54ch}

/* ---------- domain search + tld table ---------- */
.dsearch{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;
  box-shadow:var(--sh-lg);display:flex;gap:10px;max-width:760px;margin:0 auto}
.dsearch input{flex:1;border:0;font-size:16.5px;padding:14px 16px;font-family:inherit;
  border-radius:10px;background:var(--wash);color:var(--ink)}
.dsearch input:focus{outline:2px solid var(--blue);outline-offset:-2px}
.dchips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:13.5px}
.dchips span{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  color:#CFE0FF;border-radius:100px;padding:6px 13px}
.dchips span b{color:#fff}
.tldwrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:#fff;box-shadow:var(--sh)}
.tld{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.tld thead th{background:var(--navy);color:#fff;text-align:left;font-weight:600;font-size:14px;padding:14px 18px}
.tld thead th:nth-child(n+3){text-align:right}
.tld td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--slate)}
.tld td:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
.tld td:first-child{font-weight:700;font-size:17px;color:var(--blue)}
.tld tbody tr:hover td{background:var(--wash)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh)}
.step .n{width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:16px;margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--slate);line-height:1.65}

/* ---------- faq ---------- */
.faq{max-width:920px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;box-shadow:var(--sh)}
.faq summary{cursor:pointer;list-style:none;padding:19px 24px;font-weight:600;font-size:16.5px;
  display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:24px;font-weight:400;color:var(--blue);line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq .a{padding:0 24px 21px;font-size:15px;line-height:1.72;color:var(--slate)}
.faq .a p+p{margin-top:12px}

/* ---------- prose (legal + about) ---------- */
.prose{font-size:16px;line-height:1.78;color:var(--ink2,#2B3654);max-width:78ch}
.prose h2{font-size:25px;margin:44px 0 14px}
.prose h3{font-size:19px;margin:30px 0 10px}
.prose p{margin-bottom:16px;color:var(--slate)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--slate)}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:20px}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.prose th{background:var(--wash);font-weight:600;color:var(--ink)}
.prose td{color:var(--slate)}
.updated{font-size:14px;color:var(--slate);background:var(--wash);border-radius:10px;
  padding:13px 16px;margin-bottom:30px}
.toc{background:var(--wash);border-radius:var(--r);padding:22px 26px;margin-bottom:34px}
.toc h2{font-size:15px;margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;font-size:14.5px;columns:2;column-gap:32px}
.toc li{margin-bottom:7px}
.toc a{color:var(--blue);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---------- contact ---------- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.ccard .ic{width:42px;height:42px;border-radius:11px;background:var(--wash2);color:var(--blue);
  display:grid;place-items:center;margin-bottom:14px}
.ccard .ic svg{width:22px;height:22px}
.ccard h3{font-size:18px;margin-bottom:6px}
.ccard p{font-size:14.5px;color:var(--slate);line-height:1.6;margin-bottom:12px}
.ccard a{font-weight:600;text-decoration:none}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--sh)}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;font-size:15.5px;font-family:inherit;background:#fff;color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.field .hint{font-size:13px;color:var(--slate);margin-top:6px}

/* ---------- cta + footer ---------- */
.cta{background:linear-gradient(135deg,var(--blue) 0%,#1E40AF 100%);color:#fff;text-align:center}
.cta h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:12px;color:#fff}
.cta p{font-size:17px;color:rgba(255,255,255,.9);margin-bottom:26px}
footer{background:var(--deep);color:var(--dim);padding:60px 0 32px;font-size:14px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:42px}
.fcols h4{font-size:13px;font-weight:700;color:#fff;margin:0 0 14px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcols a{text-decoration:none;color:var(--dim)}
.fcols a:hover{color:var(--sky)}
.fabout p{font-size:14px;line-height:1.7;margin:12px 0 0;color:var(--dim);max-width:34ch}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;align-items:center}
.pays{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pays i{font-style:normal;font-size:11px;font-weight:600;color:var(--dim);
  border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:4px 9px}

/* ---------- responsive ---------- */
@media(max-width:1140px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .band{grid-template-columns:1fr;gap:40px}
  .feats,.steps,.ccards{grid-template-columns:1fr 1fr}
  .nav nav,.nav .right .in{display:none}
  .burger{display:block}
  .nav nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-lg)}
  .nav nav.open a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  section{padding:60px 0}
}
@media(max-width:680px){
  .w{padding:0 20px}
  .cards,.feats,.steps,.ccards{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .toc ol{columns:1}
  .rate .w{gap:18px}
  .hstat{gap:16px;font-size:13.5px}
  .dsearch{flex-direction:column}
}

/* ---- DM Sans tuning ----------------------------------------------------
   DM Sans has a smaller x-height and tighter default tracking than Inter (the previous face),
   so body copy runs a half-point larger and display type carries less
   negative tracking. Figures use tabular numerals so prices and spec
   columns line up when the billing term switches. */
.cmp,.tld,.hprice .amt,.card .now b,.card .mo,.prose table,.bar .lab{font-variant-numeric:tabular-nums}
.terms button{letter-spacing:-.006em}
.btn{letter-spacing:-.008em}
.head h2,.band h2,.cta h2{letter-spacing:-.024em}
.feat h3,.step h3,.ccard h3,.card h3{letter-spacing:-.016em}
.faq summary{letter-spacing:-.012em}
.prose h2{letter-spacing:-.02em}

/* ---- sticky mobile buy bar (ads traffic lands on mobile) ---- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  gap:12px;align-items:center;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(16,27,51,.1)}
.buybar .t{flex:1;min-width:0;font-size:13px;color:var(--slate);line-height:1.35}
.buybar .t b{display:block;font-size:16px;color:var(--ink);letter-spacing:-.02em}
.buybar .btn{padding:12px 20px;font-size:15px;white-space:nowrap}
@media(max-width:860px){.buybar{display:flex}body{padding-bottom:78px}}

/* =====================================================================
   v3 — long commercial homepage, structured like the reference:
   hero with offer badge, trust bar, pricing, included-with-every-plan,
   guarantee, comparison, support, dashboard, us-vs-them, why-us,
   migration, product blocks, stats, reviews, FAQ, CTA.
   ===================================================================== */

/* top contact bar above the nav */
.topbar{background:#071330;color:var(--dim);font-size:12.5px;padding:8px 0}
.topbar .w{display:flex;gap:26px;align-items:center;flex-wrap:wrap;padding:0 32px}
.topbar a{color:var(--dim);text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .r{margin-left:auto;display:flex;gap:22px}
@media(max-width:760px){.topbar .r{display:none}}

/* hero, split with an offer chip */
.hero--split{text-align:left;padding:56px 0 64px}
.hero--split .w{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero--split .lede{margin:0 0 22px;max-width:48ch}
.offer{display:inline-flex;align-items:center;gap:9px;background:var(--green-bg);color:var(--green);
  font-size:13px;font-weight:700;border-radius:100px;padding:7px 15px;margin-bottom:18px}
.hero--split .ul{list-style:none;margin:0 0 26px;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:11px;font-size:15px;color:#D7E1F6}
.hero--split .ul li{display:flex;gap:10px;align-items:flex-start}
.hero--split .ul svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--sky)}
.heroprice{display:flex;align-items:baseline;gap:8px;margin-bottom:20px}
.heroprice b{font-size:clamp(36px,4.6vw,50px);font-weight:700;letter-spacing:-.032em;line-height:1;color:#fff}
.heroprice em{font-style:normal;font-size:16px;color:#BCCBEA}
.heroprice .rn{font-size:13px;color:#8FA6D6;display:block;margin-top:6px}

/* abstract browser mock — used instead of stock photography */
.mock{position:relative}
.win{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden}
.win__bar{display:flex;gap:6px;padding:13px 15px;background:var(--wash);border-bottom:1px solid var(--line);align-items:center}
.win__bar i{width:10px;height:10px;border-radius:50%;background:#CBD6EA}
.win__bar span{margin-left:10px;flex:1;height:10px;border-radius:100px;background:#DDE6F6}
.win__body{padding:24px}
.kpi{display:flex;gap:12px;margin-bottom:18px}
.kpi div{flex:1;background:var(--wash);border-radius:12px;padding:14px}
.kpi b{display:block;font-size:23px;letter-spacing:-.028em;color:var(--blue)}
.kpi span{font-size:12px;color:var(--slate)}
.lines i{display:block;height:9px;border-radius:100px;background:#E6ECF8;margin-bottom:10px}
.lines i:nth-child(2){width:86%}.lines i:nth-child(3){width:62%}
.floatprice{position:absolute;right:-12px;bottom:-18px;background:var(--navy);color:#fff;
  border-radius:14px;padding:15px 19px;box-shadow:var(--sh-lg);font-variant-numeric:tabular-nums}
.floatprice b{display:block;font-size:23px;letter-spacing:-.028em}
.floatprice span{font-size:12px;color:var(--dim)}

/* included-with-every-plan strip */
.incl{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.incl div{background:#fff;padding:26px 22px;text-align:center}
.incl .ic{width:40px;height:40px;border-radius:11px;background:var(--wash2);color:var(--blue);
  display:grid;place-items:center;margin:0 auto 13px}
.incl h3{font-size:15.5px;margin-bottom:6px;letter-spacing:-.014em}
.incl p{font-size:13.5px;color:var(--slate);line-height:1.6}

/* money-back band */
.mb{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);
  padding:34px 38px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
.mb .seal{width:112px;height:112px;border-radius:50%;background:var(--green-bg);color:var(--green);
  display:grid;place-items:center;text-align:center;font-size:14px;font-weight:700;line-height:1.25;flex:none}
.mb h2{font-size:26px;margin-bottom:10px;letter-spacing:-.022em}
.mb p{font-size:16px;color:var(--slate);line-height:1.7;margin-bottom:14px}
.mb .sig{font-size:13.5px;color:var(--slate)}
.mb .sig b{color:var(--ink);display:block;font-size:14.5px}

/* us vs them */
.vs{border:1px solid var(--line);border-radius:16px;overflow:auto;background:#fff;box-shadow:var(--sh)}
.vs table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.vs thead th{background:var(--navy);color:#fff;text-align:left;font-size:14px;font-weight:700;padding:15px 18px}
.vs thead th:nth-child(2){background:var(--blue)}
.vs td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--slate)}
.vs td:first-child{font-weight:500;color:var(--ink);width:28%}
.vs td:nth-child(2){background:rgba(37,99,235,.045);color:var(--ink);font-weight:500}
.vs tbody tr:last-child td{border-bottom:0}

/* alternating product blocks */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:72px}
.alt:last-child{margin-bottom:0}
.alt--flip .altcopy{order:2}
.alt h3{font-size:clamp(23px,2.6vw,31px);letter-spacing:-.024em;margin-bottom:12px}
.alt p{font-size:16.5px;color:var(--slate);line-height:1.68;margin-bottom:18px;max-width:48ch}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats b{display:block;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;color:#fff}
.stats span{font-size:14px;color:var(--dim)}

/* review cards */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--sh)}
.rev .stars{display:flex;gap:2px;color:#F59E0B;margin-bottom:12px}
.rev .stars svg{width:15px;height:15px}
.rev h3{font-size:16px;margin-bottom:8px;letter-spacing:-.014em}
.rev p{font-size:14.5px;color:var(--slate);line-height:1.65;margin-bottom:15px}
.rev .who{display:flex;gap:11px;align-items:center}
.rev .av{width:38px;height:38px;border-radius:100px;background:var(--wash2);color:var(--blue);
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.rev .who b{display:block;font-size:14px}
.rev .who span{font-size:13px;color:var(--slate)}

/* support / chat mock */
.chat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--sh)}
.bub{border-radius:14px;padding:13px 16px;font-size:14.5px;line-height:1.55;margin-bottom:12px;max-width:86%}
.bub--them{background:var(--wash);color:var(--ink)}
.bub--us{background:var(--blue);color:#fff;margin-left:auto}
.bub small{display:block;font-size:11.5px;opacity:.72;margin-top:5px}

@media(max-width:1080px){
  .incl{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero--split .w,.alt{grid-template-columns:1fr;gap:40px}
  .alt--flip .altcopy{order:0}
  .revs{grid-template-columns:1fr 1fr}
  .mb{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media(max-width:680px){
  .incl{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr}
  .hero--split .ul{grid-template-columns:1fr}
  .floatprice{right:8px}
}

/* ---- intro-pricing card extras (Starter/Plus/Pro/Max line) ---- */
.card .off{position:absolute;top:18px;right:18px;background:var(--green-bg);color:var(--green);
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px}
.card--best .off{top:48px}
.card .was{font-size:14px;color:var(--slate);text-decoration:line-through;height:20px;
  font-variant-numeric:tabular-nums}
.card .bonus{font-size:12.5px;font-weight:700;color:var(--blue);background:var(--wash2);
  border-radius:8px;padding:8px 11px;margin:10px 0 0;line-height:1.4}
.card .bonus:empty{display:none}
.card .renew{background:var(--wash2);color:var(--ink)}