/* MegaWebExpress design system. No inline styles anywhere (strict CSP).
   Concept: "be the answer". Cool white paper, navy ink, cobalt for action, and a marker-yellow highlight
   reserved for the moment a business becomes the answer. Display: TeX Gyre Adventor. Text: Inter. */
@font-face{font-family:"Adventor";src:url(/assets/fonts/adventor-bold.woff?v=0c19842b6c) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Adventor";src:url(/assets/fonts/adventor-regular.woff?v=383737276c) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-regular.woff?v=c84ff8f967) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-italic.woff?v=4d48294bd0) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-medium.woff?v=dfc4233fd2) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-semibold.woff?v=b1dbc29c57) format("woff");font-weight:600 800;font-style:normal;font-display:swap}
:root{
  /* palette */
  --snow:#f5f7fb; --white:#fff; --ink:#0b1736; --ink-2:#263354; --slate:#5b6782; --line:#dce2ee; --line-2:#c9d2e3;
  --cobalt:#2442f5; --cobalt-d:#1530cc; --cobalt-t:#e9edff; --night:#071029; --night-2:#0f1b3d; --marker:#ffe14d; --signal:#0fa968;
  /* legacy aliases used by the account, audit and admin screens */
  --paper:var(--snow); --paper-2:#eaeef6; --card:var(--white); --muted:var(--slate); --accent:var(--cobalt); --accent-d:var(--cobalt-d); --forest:var(--night); --lime:var(--marker);
  --display:"Adventor","Avenir Next","Century Gothic",system-ui,sans-serif;
  --serif:var(--display);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:14px; --r-lg:22px; --shadow:0 1px 2px rgba(11,23,54,.06),0 24px 48px -28px rgba(11,23,54,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--snow);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.03em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.75rem);line-height:1.01;letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.3rem;letter-spacing:-.015em;line-height:1.2}
h1 em,h2 em{font-style:normal;color:inherit}
p{margin:0 0 1em}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.eyebrow{display:block;font:600 .95rem/1.3 var(--sans);color:var(--cobalt);margin-bottom:.9rem}
.lede{font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:40rem}
.muted{color:var(--slate)}
.hl{background:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);padding:0 .08em}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,247,251,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:700 1.2rem var(--display);letter-spacing:-.03em;color:var(--ink)}
.brand svg{flex:0 0 auto}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a{text-decoration:none;font-weight:500;font-size:.97rem;color:var(--ink-2)}
.nav a:not(.btn):hover,.nav a[aria-current]{color:var(--cobalt)}
.nav .btn{color:#fff}
.nav-toggle{display:none;background:var(--white);border:1px solid var(--line-2);border-radius:10px;padding:.5rem .95rem;font:600 .92rem var(--sans);color:var(--ink);cursor:pointer}
@media(max-width:880px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);flex-direction:column;align-items:stretch;gap:0;padding:.4rem 1.25rem 1.4rem;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(11,23,54,.3)}
  .nav.open{display:flex}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.08rem}
  .nav a.btn{margin-top:1rem;text-align:center;border:0}
}
@media(max-width:1080px) and (min-width:881px){.nav{gap:1.1rem}.nav a{font-size:.92rem}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--cobalt);color:#fff;border:1.5px solid var(--cobalt);text-decoration:none;font:600 1rem/1.2 var(--sans);padding:.9rem 1.45rem;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 20px -10px rgba(36,66,245,.7)}
.btn:hover{background:var(--cobalt-d);border-color:var(--cobalt-d)}
.btn-sm{padding:.6rem 1rem;font-size:.93rem;color:#fff!important}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn-ghost:hover{background:var(--white);border-color:var(--ink);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.dark .btn-ghost,.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.dark .btn-ghost:hover,.btn-light:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}

/* Sections */
section{padding:clamp(3.25rem,6vw,5.5rem) 0}
.dark,.forest{background:var(--night);color:#eef1f8}
.dark .eyebrow,.forest .eyebrow{color:var(--marker)}
.dark .lede,.dark p,.forest p{color:#b8c1d6}
.dark h2,.dark h3,.forest h2,.forest h3{color:#fff}
.sec-head{max-width:44rem;margin-bottom:2.4rem}
.sec-head p{color:var(--slate);font-size:1.12rem;margin:0}
.dark .sec-head p{color:#b8c1d6}
.band{background:#eaeef6}

/* ---------- Home: hero ---------- */
.hero{padding:clamp(3rem,6vw,5.5rem) 0 clamp(3.5rem,6vw,5.5rem);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 75% 30%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 75% 30%,#000 10%,transparent 70%);opacity:.55;pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1{max-width:12ch}
.hero .lede{margin-bottom:2rem}
.hero-audit{display:flex;gap:.5rem;background:var(--white);border:1.5px solid var(--line-2);border-radius:14px;padding:.45rem .45rem .45rem 1.1rem;max-width:560px;box-shadow:var(--shadow)}
.hero-audit:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(36,66,245,.15),var(--shadow)}
.hero-audit input{flex:1;min-width:0;border:0;padding:.55rem 0;min-height:46px;font-size:1.05rem;background:transparent;outline:none}
.hero-audit .btn{box-shadow:none;white-space:nowrap}
.hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;margin-top:1rem;font-size:.95rem;color:var(--slate)}
.hero-sub a{color:var(--cobalt);font-weight:600;text-decoration:none}.hero-sub a:hover{text-decoration:underline}
.trustline{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:2.2rem 0 0;padding:0;list-style:none;font-size:.93rem;color:var(--ink-2)}
.trustline li{display:flex;align-items:center;gap:.45rem}
.trustline svg{width:18px;height:18px;stroke:var(--signal);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.hero-audit{flex-direction:column;padding:.6rem}.hero-audit input{padding:.4rem .5rem}.hero-audit .btn{width:100%}}

/* The answer stage: an AI assistant answering a customer's question with a sample business. */
.stage{position:relative;padding:0}
@media(max-width:980px){.stage{max-width:640px}.stage .chat{margin-top:7rem}}
.stage-site{position:absolute;right:-7%;top:0;width:76%;border-radius:12px;overflow:hidden;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);transform:rotate(2.5deg);display:block}
.stage-site .chrome{height:26px;background:#eef1f7;display:flex;gap:6px;align-items:center;padding:0 10px;border-bottom:1px solid var(--line)}
.stage-site .chrome i{width:8px;height:8px;border-radius:50%;background:#c9d0de}
.stage-site img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
@media(max-width:980px){.stage-site{right:-3%;width:72%}}
.chat{position:relative;z-index:2;margin-top:10rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 2px 4px rgba(11,23,54,.05),0 40px 80px -40px rgba(11,23,54,.55);padding:1.3rem;max-width:520px}
.chat-top{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--slate);padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.chat-top .dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--cobalt),#7b8cff);display:grid;place-items:center}
.chat-top .dot svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4}
.chat-top span:last-child{margin-left:auto;font-size:.76rem;background:var(--snow);border:1px solid var(--line);padding:.15rem .5rem;border-radius:6px}
.q{margin-left:auto;max-width:86%;width:fit-content;background:var(--ink);color:#fff;padding:.75rem 1rem;border-radius:16px 16px 4px 16px;font-size:.98rem;min-height:2.9em}
.q .caret{display:inline-block;width:2px;height:1.05em;background:#fff;vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
.a{margin-top:1.1rem;font-size:.97rem;color:var(--ink-2)}
.a p{margin:0 0 .7rem}
.a ol{margin:.2rem 0 .8rem;padding-left:1.2rem}.a li{margin:.25rem 0}
.a b{color:var(--ink)}
.a .mark{background:linear-gradient(90deg,var(--marker),var(--marker)) no-repeat 0 85%/100% 40%;padding:0 .1em}
.cite{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.8rem;font-weight:600;color:var(--cobalt);background:var(--cobalt-t);padding:.3rem .6rem;border-radius:7px;text-decoration:none}
.cite svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}
.stage-note{margin:1rem 0 0;font-size:.8rem;color:var(--slate);position:relative;z-index:2}
/* One orchestrated load sequence, pure CSS so nothing flickers: the question lands, the answer builds,
   the business name gets highlighted, then the website it links to slides in. */
.stage .a>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.stage .a>:nth-child(1){animation-delay:1.7s}.stage .a>:nth-child(2){animation-delay:1.95s}.stage .a>:nth-child(3){animation-delay:2.2s}.stage .a>:nth-child(4){animation-delay:2.45s}
.stage .a .mark{animation:mark .7s 2.5s cubic-bezier(.6,0,.2,1) both}
.stage .stage-site{animation:slide .9s 2.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mark{from{background-size:0% 40%}to{background-size:100% 40%}}
@keyframes slide{from{opacity:0;transform:rotate(2.5deg) translateY(18px)}to{opacity:1;transform:rotate(2.5deg)}}
@keyframes blink{50%{opacity:0}}

/* Where customers look strip */
.engines{padding:1.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.engines .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 2.6rem}
.engines p{margin:0;font-size:.95rem;color:var(--slate)}
.engines ul{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;list-style:none;margin:0;padding:0}
.engines li{font:700 1.15rem var(--display);letter-spacing:-.02em;color:#8a94ab}

/* Three surfaces: search result, answer box, AI citation */
.surfaces{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:1000px) and (min-width:700px){.surfaces{grid-template-columns:1fr;gap:2rem}.surfaces .surface{display:grid;grid-template-columns:1.1fr .9fr;gap:.3rem 2rem;align-content:center}.surfaces .surface .viz{grid-column:1;grid-row:1/span 4;margin:0;min-height:0}.surfaces .surface>:not(.viz){grid-column:2}.surfaces .surface h3{align-self:end;margin-top:.5rem}.surfaces .surface .more{align-self:start}}
@media(max-width:699px){.surfaces{grid-template-columns:1fr}}
.surface{display:flex;flex-direction:column}
.surface .viz{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;min-height:212px;margin-bottom:1.4rem;font-size:.86rem;display:grid;align-content:start;gap:.55rem}
.surface h3{display:flex;align-items:baseline;gap:.6rem}
.surface h3 small{font:600 .82rem var(--sans);color:var(--cobalt);letter-spacing:0}
.surface p{color:var(--slate);margin:0 0 1rem}
.surface .more{margin-top:auto;font-weight:600;color:var(--cobalt);text-decoration:none}.surface .more:hover{text-decoration:underline}
.serp-q{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line-2);border-radius:99px;padding:.45rem .8rem;color:var(--ink-2)}
.serp-q svg{width:14px;height:14px;stroke:var(--slate);fill:none;stroke-width:2.2;flex:0 0 auto}
.serp-r{padding:.5rem .1rem}.serp-r small{display:block;color:#3d7a3d;font-size:.74rem}
.serp-r b{display:block;color:#1a3fd6;font-weight:600;font-size:.98rem}
.serp-r span{color:var(--slate);font-size:.8rem;line-height:1.45;display:block}
.serp-r.you{background:var(--cobalt-t);border-radius:10px;padding:.6rem .7rem;outline:1.5px solid rgba(36,66,245,.35)}
.serp-r.dim{opacity:.45}
.box-a{border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem;background:var(--snow)}
.box-a b{display:block;margin-bottom:.25rem;font-size:.9rem}
.box-a span{color:var(--ink-2);line-height:1.5;display:block}
.box-a span em{font-style:normal;background:linear-gradient(transparent 55%,var(--marker) 55%)}
.box-a small{display:block;margin-top:.5rem;color:var(--slate);font-size:.74rem}
.ai-msg{display:grid;gap:.45rem}
.ai-msg .bub{justify-self:end;background:var(--ink);color:#fff;border-radius:12px 12px 3px 12px;padding:.45rem .7rem;max-width:90%}
.ai-msg .ans{color:var(--ink-2);line-height:1.5}
.ai-msg .ans b{background:linear-gradient(transparent 55%,var(--marker) 55%)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}.chips span{font-size:.72rem;font-weight:600;background:var(--cobalt-t);color:var(--cobalt);padding:.2rem .5rem;border-radius:6px}

/* Showcase of sample sites (dark) */
.showcase{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem 1.2rem}
.show{grid-column:span 3;display:block;text-decoration:none;color:#fff}
.show.big{grid-column:span 6}
.show .frame{border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.show:hover .frame,.show:focus-visible .frame{transform:translateY(-6px)}
.show .chrome{height:24px;background:#e9edf5;display:flex;align-items:center;gap:5px;padding:0 9px}
.show .chrome i{width:7px;height:7px;border-radius:50%;background:#c3cad8}
.show .chrome span{margin-left:8px;font-size:.66rem;color:#7a849a;background:#fff;border-radius:4px;padding:.05rem .5rem;flex:1;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.show img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.show .cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-top:.9rem}
.show .cap b{font:700 1.1rem var(--display);letter-spacing:-.02em}
.show .cap span{font-size:.86rem;color:#8e9ab5}
@media(max-width:980px){.showcase{grid-template-columns:1fr 1fr}.show,.show.big{grid-column:span 1}}
@media(max-width:600px){.showcase{grid-template-columns:1fr}}
.dark .more-link{color:#fff;font-weight:600}

/* Dashboard split */
.dash{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:980px){.dash{grid-template-columns:1fr}}
.dash-shot{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow)}
.dash-shot img{width:100%;height:auto}
.dash-list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:1.1rem}
.dash-list li{display:grid;grid-template-columns:36px 1fr;gap:.9rem;align-items:start}
.dash-list .i{width:36px;height:36px;border-radius:10px;background:var(--cobalt-t);display:grid;place-items:center}
.dash-list .i svg{width:19px;height:19px;stroke:var(--cobalt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-list b{display:block;font-weight:600}.dash-list span{color:var(--slate);font-size:.95rem}

/* Pricing teaser */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.tier{padding:1.8rem 1.6rem;border-left:1px solid var(--line);display:flex;flex-direction:column}
.tier:first-child{border-left:0}
.tier.best{background:var(--ink);color:#fff;border-color:var(--ink)}
.tier h3{font-size:1.15rem;margin:0 0 .2rem}
.tier .for{font-size:.9rem;color:var(--slate);margin:0 0 1.2rem;min-height:2.8em}
.tier.best .for{color:#b8c1d6}
.tier .amt{font:700 2.4rem/1 var(--display);letter-spacing:-.04em}
.tier .amt small{font:500 .95rem var(--sans);color:var(--slate);letter-spacing:0}
.tier.best .amt small{color:#b8c1d6}
.tier ul{list-style:none;padding:0;margin:1.3rem 0 1.6rem;display:grid;gap:.5rem;font-size:.93rem;flex:1}
.tier li{padding-left:1.5rem;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.42em;width:.8rem;height:.45rem;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.tier.best li::before{border-color:var(--marker)}
.tier .btn{width:100%}
.tier.best .btn{background:#fff;color:var(--ink)!important;border-color:#fff;box-shadow:none}
.tier .flag{display:inline-block;align-self:flex-start;font-size:.78rem;font-weight:600;background:var(--marker);color:var(--ink);padding:.2rem .55rem;border-radius:6px;margin-bottom:.8rem}
@media(max-width:1020px){.tiers{grid-template-columns:1fr 1fr}.tier:nth-child(3){border-left:0}.tier:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:600px){.tiers{grid-template-columns:1fr}.tier{border-left:0;border-top:1px solid var(--line)}.tier:first-child{border-top:0}.tier .for{min-height:0}}

/* FAQ split */
.faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.faq-split{grid-template-columns:1fr}}

/* Final call to action */
.final{background:var(--night);color:#fff;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 0%,rgba(36,66,245,.45),transparent 70%);pointer-events:none}
.final .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media(max-width:900px){.final .wrap{grid-template-columns:1fr}}
.final h2{color:#fff;margin:0 0 .6rem}.final p{color:#b8c1d6;margin:0}
.final .hero-audit{border-color:transparent;max-width:none}

/* ---------- Shared components (inner pages) ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;position:relative}
.card h3{margin-bottom:.45rem}
.card p{color:var(--slate)}
.card p:last-child{margin-bottom:0}
.card .tag{display:block;font:600 .85rem var(--sans);color:var(--cobalt);margin-bottom:.6rem}
.card.ink{background:var(--ink);color:#fff;border-color:var(--ink)} .card.ink p{color:#b8c1d6} .card.ink .tag{color:var(--marker)}
.card.acc{background:var(--cobalt);color:#fff;border-color:var(--cobalt)} .card.acc p{color:#dfe5ff} .card.acc .tag{color:#fff}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.bento .c2{grid-column:span 2} .bento .c3{grid-column:span 3} .bento .c4{grid-column:span 4}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento .c2,.bento .c3,.bento .c4{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento .c2,.bento .c3,.bento .c4{grid-column:auto}}
.ico{width:44px;height:44px;border-radius:11px;background:var(--cobalt-t);display:grid;place-items:center;margin-bottom:1rem}
.ico svg{width:22px;height:22px;stroke:var(--cobalt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.qa{grid-template-columns:1fr}}
.qa .card{background:var(--night-2);border-color:#1f2c52;color:#eef1f8}
.qa h3{font-size:1.2rem;color:#fff}
.qa .abbr{font:700 2.6rem/1 var(--display);color:var(--marker);margin-bottom:.8rem;display:block;letter-spacing:-.04em}
.pill{display:inline-block;font:600 .75rem var(--sans);background:var(--cobalt-t);color:var(--cobalt);padding:.25rem .6rem;border-radius:6px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.3rem}
.kpi{background:var(--night-2);border-radius:12px;padding:.8rem .9rem}.kpi b{display:block;font:700 1.6rem var(--display);color:#fff}.kpi span{font-size:.75rem;color:#8e9ab5;display:block}
.panel{background:var(--ink);color:#eef1f8;border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--shadow)}
.panel-top{display:flex;justify-content:space-between;font-size:.82rem;color:#8e9ab5;margin-bottom:1.2rem}
.meter-row{display:grid;grid-template-columns:5.6rem 1fr 2.6rem;gap:.7rem;align-items:center;font-size:.88rem;margin:.55rem 0}
.meter{height:8px;background:#1f2c52;border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--cobalt);border-radius:99px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.panel-note{font-size:.74rem;color:#8e9ab5;margin:1rem 0 0}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.97rem}
th,td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .88rem var(--sans);color:var(--slate);background:#f0f3f9}
tr:last-child td{border-bottom:0}
.dark .table-wrap{background:var(--night-2);border-color:#1f2c52}.dark th{background:#14214a;color:#b8c1d6}.dark td{border-color:#1f2c52;color:#dfe4f0}

/* Catalog page */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:980px){.cat-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.cat-grid{grid-template-columns:1fr}}
.site-card{display:block;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,box-shadow .25s}
.site-card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.shot{height:240px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#eef1f7}
.shot img{position:absolute;inset:26px 0 0;width:100%;height:calc(100% - 26px);object-fit:cover;object-position:top;transition:transform .6s}
.site-card:hover .shot img{transform:scale(1.03)}
.shot .chrome{position:absolute;z-index:2;inset:0 0 auto 0;height:26px;background:#e9edf5;display:flex;gap:5px;align-items:center;padding-left:10px;border-bottom:1px solid var(--line)}
.shot .chrome i{width:7px;height:7px;border-radius:50%;background:#c3cad8}
.site-card .meta{padding:1.3rem 1.4rem 1.5rem}
.site-card h3{margin:0 0 .2rem;font-size:1.25rem}
.site-card .cat{font:600 .85rem var(--sans);color:var(--cobalt)}
.site-card p{margin:.5rem 0 0;color:var(--slate);font-size:.95rem}
.feat-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;padding:0;list-style:none}
.feat-list li{font-size:.76rem;background:#eef1f7;color:var(--ink-2);padding:.25rem .6rem;border-radius:6px}

/* Steps: a real sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;padding:0;list-style:none;position:relative}
.steps li{counter-increment:s;padding:0 1.6rem 0 0;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);border:1.5px solid var(--line-2);font:700 1.1rem var(--display);color:var(--cobalt);margin-bottom:1.1rem;position:relative;z-index:1}
.steps li::after{content:"";position:absolute;top:22px;left:44px;right:0;height:1.5px;background:var(--line-2)}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.2rem}
.steps p{color:var(--slate);font-size:.97rem}
.dark .steps li::before,.forest .steps li::before{background:var(--night);border-color:#33426e;color:var(--marker)}
.dark .steps li::after,.forest .steps li::after{background:#33426e}
.dark .steps p,.forest .steps p{color:#b8c1d6}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:2rem 0}.steps li:nth-child(2)::after{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.steps li::after{display:none}}

/* Pricing page */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
@media(max-width:940px){.price-grid{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column}
.plan .price{font:700 2.9rem var(--display);margin:.4rem 0 0;letter-spacing:-.04em}
.plan .price small{font:500 1rem var(--sans);color:var(--slate);letter-spacing:0}
.plan ul{padding:0;margin:1.2rem 0 1.6rem;list-style:none;flex:1}
.plan li{padding:.5rem 0 .5rem 1.7rem;position:relative;border-bottom:1px solid var(--line);font-size:.97rem;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:0;top:.95rem;width:.85rem;height:.45rem;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.plan.best{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--shadow)}
.plan.best p,.plan.best li{color:#dfe4f0}.plan.best li{border-color:#1f2c52}.plan.best li::before{border-color:var(--marker)}.plan.best .price small{color:#b8c1d6}
.plan.best .btn{background:#fff;color:var(--ink)!important;border-color:#fff;box-shadow:none}
.badge{position:absolute;top:-12px;left:1.5rem;background:var(--marker);color:var(--ink);font:600 .8rem var(--sans);padding:.3rem .7rem;border-radius:6px}
.note{font-size:.92rem;color:var(--slate);border-left:3px solid var(--cobalt);padding:.2rem 0 .2rem 1rem;max-width:46rem}
.price-sm{font:700 1.4rem var(--display);color:var(--cobalt);margin:.2rem 0 .4rem;letter-spacing:-.02em}
.plan .plan-pay{margin:.6rem 0 0;font-size:.9rem;text-align:center}.plan .btn{justify-content:center}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:1.15rem 0}
details summary{cursor:pointer;font:600 1.12rem/1.4 var(--sans);list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--ink)}
details summary::-webkit-details-marker{display:none}
summary .faq-q{font:inherit;color:inherit;margin:0;letter-spacing:inherit}
details summary::after{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:.1em;border-radius:6px;background:var(--cobalt-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232442f5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.7rem 0 0;max-width:46rem;color:var(--ink-2)}
.dark details{border-color:#1f2c52}.dark details summary{color:#fff}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,4vw,2.6rem);box-shadow:var(--shadow)}
fieldset{border:0;padding:0;margin:0 0 2rem}
legend{font:700 1.45rem var(--display);letter-spacing:-.02em;margin-bottom:1rem;padding:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.35rem} .field.full{grid-column:1/-1}
label,.lbl{font-weight:600;font-size:.92rem}
.hint{font-size:.83rem;color:var(--slate);font-weight:400}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:10px;padding:.8rem .95rem;width:100%;min-height:48px}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(36,66,245,.15)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--cobalt)}
.checks{display:flex;flex-wrap:wrap;gap:.6rem}
.checks label{display:flex;gap:.5rem;align-items:center;font-weight:500;background:#fff;border:1.5px solid var(--line-2);padding:.6rem .9rem;border-radius:10px;cursor:pointer}
.checks label:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-t)}
.hp,.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:1rem 1.2rem;border-radius:12px;margin-top:1rem;font-weight:500}
.alert.ok{background:#e1f6ec;color:#06603a;border:1px solid #9fdcbf} .alert.err{background:#fde8e6;color:#8a1c12;border:1px solid #f2b0a8}
.dropzone{border:2px dashed var(--line-2);border-radius:14px;padding:1.4rem;text-align:center;background:#fff}
.file-list{list-style:none;padding:0;margin:.8rem 0 0;font-size:.9rem;text-align:left}

/* Footer */
.site-footer{background:var(--night);color:#dfe4f0;padding:4.5rem 0 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
.foot-4{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
@media(max-width:900px){.foot-4{grid-template-columns:1fr 1fr}}@media(max-width:560px){.foot-4,.foot-grid{grid-template-columns:1fr}}
.brand-line{display:flex;align-items:center;gap:.6rem;font:700 1.3rem var(--display);letter-spacing:-.03em;color:#fff;margin-bottom:.8rem}
.muted-on-dark{color:#8e9ab5;max-width:26rem}
.foot-h{font:600 .95rem var(--sans);color:#fff;margin-bottom:.4rem}
.site-footer ul{list-style:none;padding:0;margin:0} .site-footer li{margin:.55rem 0}
.site-footer a{text-decoration:none;color:#b8c1d6} .site-footer a:hover{color:#fff}
.foot-cta{color:var(--marker)!important;font-weight:600}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid #1a2547;margin-top:3.5rem;padding-top:1.5rem;font-size:.88rem;color:#6f7b98}

/* Inner page heroes and layouts */
.page-hero{padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--white),var(--snow))}
.page-hero h1{overflow-wrap:anywhere;max-width:18ch}
.crumbs{font-size:.88rem;color:var(--slate);margin-bottom:1.4rem}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--cobalt)}.crumbs span{margin:0 .45rem;opacity:.5}.crumbs .cur{opacity:1;margin:0}
.ph-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}@media(max-width:900px){.ph-grid{grid-template-columns:1fr}}
.ph-grid img,.split img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev>:first-child{order:2}@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.split>*,.art-cols>*,.grid3>*,.grid2>*{min-width:0}
.ticks{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.65rem}
.ticks li{position:relative;padding-left:1.8rem}
.ticks li::before{content:"";position:absolute;left:.1rem;top:.45em;width:.85rem;height:.45rem;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.ticks.two{grid-template-columns:1fr 1fr}@media(max-width:600px){.ticks.two{grid-template-columns:1fr}}
.dark .ticks li::before,.forest .ticks li::before{border-color:var(--marker)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}@media(max-width:600px){.grid3,.grid2{grid-template-columns:1fr}}
a.card{text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .25s}a.card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.card .more{display:inline-block;margin-top:.8rem;font-weight:600;color:var(--cobalt)}
.card img.thumb{width:calc(100% + 3.4rem);margin:-1.7rem -1.7rem 1.3rem;max-width:none;aspect-ratio:3/2;object-fit:cover;height:auto}
.card h3 a.stretch{text-decoration:none}.card h3 a.stretch::after{content:"";position:absolute;inset:0}.card h3 a.stretch:hover{color:var(--cobalt)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}@media(max-width:700px){.stat-row{grid-template-columns:1fr 1fr}}
.stat-row b{display:block;font:700 clamp(2rem,4vw,2.8rem)/1.1 var(--display);color:var(--marker);letter-spacing:-.03em}.stat-row span{font-size:.92rem;color:#b8c1d6}
.cta-band{background:var(--night);color:#fff;padding:clamp(3.5rem,7vw,5.5rem) 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 260px at 90% 0%,rgba(36,66,245,.45),transparent 70%);pointer-events:none}
.cta-band .wrap{position:relative;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.cta-band h2{margin:0;color:#fff}.cta-band p{margin:.5rem 0 0;color:#b8c1d6}
.cta-band .btn-row{margin-top:0}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}

/* Services detail */
.svc{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;padding:3rem 0;border-top:1px solid var(--line)}
@media(max-width:860px){.svc{grid-template-columns:1fr;gap:1rem}}
.svc ul{padding-left:1.2rem} .svc li{margin:.35rem 0}
.svc .sticky{position:sticky;top:96px;align-self:start}
@media(max-width:860px){.svc .sticky{position:static}}

/* Articles */
.prose{max-width:44rem;font-size:1.07rem;line-height:1.75}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:2.4rem 0 .7rem}.prose h3{margin:1.6rem 0 .5rem;font-size:1.25rem}
.prose ul,.prose ol{padding-left:1.3rem}.prose li{margin:.35rem 0}
.prose blockquote{margin:1.8rem 0;padding:.3rem 0 .3rem 1.2rem;border-left:4px solid var(--marker);font:500 1.2rem/1.55 var(--sans);color:var(--ink)}
.prose a{color:var(--cobalt)}
.answer{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--marker);border-radius:0 12px 12px 0;padding:1.1rem 1.3rem;margin:0 0 1.8rem}
.art-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4rem);align-items:start}@media(max-width:940px){.art-cols{grid-template-columns:1fr}}
.byline{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.9rem;color:var(--slate);margin:0 0 1.4rem}
.art-hero img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r-lg);margin:0 0 2rem}
.aside{position:sticky;top:96px;display:grid;gap:1rem}@media(max-width:940px){.aside{position:static}}
.aside .card{padding:1.4rem}.aside h3{font-size:1.1rem}.aside ul{padding-left:1.1rem;margin:.4rem 0}
.toc a{text-decoration:none}.toc a:hover{color:var(--cobalt)}

/* Audit tool (free-audit page) */
.audit-box{display:flex;gap:.5rem;flex-wrap:wrap;background:#fff;border:1.5px solid var(--line-2);border-radius:14px;padding:.45rem .45rem .45rem 1.1rem;box-shadow:var(--shadow);max-width:640px}
.audit-box input{flex:1;min-width:200px;border:0;padding:.6rem 0;min-height:44px;font-size:1.05rem;background:transparent;box-shadow:none}
.audit-box input:focus{outline:none;box-shadow:none}.audit-box:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(36,66,245,.15)}
.audit-box .btn{box-shadow:none}
@media(max-width:560px){.audit-box{padding:.6rem}.audit-box .btn{width:100%}}
#audit-status{min-height:1.5em;margin-top:.9rem;color:var(--slate)}
.audit-band{padding:2.6rem 0}.audit-band-in{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}.audit-band h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .3rem}.audit-band p{margin:0}
@media(max-width:900px){.audit-band-in{grid-template-columns:1fr}}
.audit-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:center;margin-bottom:2rem}
.audit-url{font-size:clamp(1.3rem,3vw,1.9rem);word-break:break-all;margin:.2rem 0}
.rings{display:flex;gap:1.2rem;flex-wrap:wrap}
.ring{position:relative;width:118px;text-align:center}.ring svg{width:118px;height:118px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:#e6ebf4;stroke-width:10}.ring-fg{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s}
.ring-good .ring-fg{stroke:var(--signal)}.ring-ok .ring-fg{stroke:#e8a400}.ring-poor .ring-fg{stroke:#e04a2f}
.ring b{position:absolute;top:34px;left:0;right:0;font:700 2rem var(--display)}.ring span{display:block;font-weight:600;font-size:.85rem;margin-top:.2rem}
.audit-group{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,3vw,2rem);margin-bottom:1.2rem}
.audit-group-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}.audit-group h3{margin:0}
.pill-score{font-weight:700;padding:.3rem .7rem;border-radius:7px;font-size:.88rem}.pill-score.good{background:#e1f6ec;color:#06603a}.pill-score.ok{background:#fff3cc;color:#7a5600}.pill-score.poor{background:#fde8e6;color:#8a1c12}
.checklist{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.2rem}
.chk{display:grid;grid-template-columns:30px 1fr;gap:.8rem;padding:.9rem 0;border-top:1px solid var(--line)}
.chk-ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff}
.chk.pass .chk-ico{background:var(--signal)}.chk.warn .chk-ico{background:#e8a400}.chk.fail .chk-ico{background:#e04a2f}
.chk p{margin:.2rem 0 0;font-size:.94rem}.chk-detail{color:var(--slate);word-break:break-word}.chk-fix{color:var(--ink-2)}
.audit-cta{background:var(--night);color:#fff;border-radius:var(--r-lg);padding:2rem;margin-top:1.4rem}.audit-cta h3{color:#fff}.audit-cta p{color:#b8c1d6}
.nav .nav-login{font-weight:600;color:var(--ink)}
.linkish{background:none;border:0;padding:0;color:var(--cobalt);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}

/* Motion: no scroll-triggered hiding; content is always visible. */
[data-reveal]{opacity:1}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.q .caret{display:none}}
@media print{.site-header,.site-footer,.btn{display:none}}
/* meter widths (set by JS from data-w; avoids inline styles) */
.meter i.w0{width:0%}.meter i.w5{width:5%}.meter i.w10{width:10%}.meter i.w15{width:15%}.meter i.w20{width:20%}.meter i.w25{width:25%}.meter i.w30{width:30%}.meter i.w35{width:35%}.meter i.w40{width:40%}.meter i.w45{width:45%}.meter i.w50{width:50%}.meter i.w55{width:55%}.meter i.w60{width:60%}.meter i.w65{width:65%}.meter i.w70{width:70%}.meter i.w75{width:75%}.meter i.w80{width:80%}.meter i.w85{width:85%}.meter i.w90{width:90%}.meter i.w95{width:95%}.meter i.w100{width:100%}

.plan-pay button{all:unset;cursor:pointer;color:var(--cobalt);text-decoration:underline;font-weight:600}.plan.best .plan-pay button,.plan.best .plan-pay a{color:#fff}
.plan-pay button:focus-visible{outline:3px solid var(--cobalt);border-radius:4px}

/* ===================== Start a project ===================== */
.sp-hero{background:radial-gradient(700px 360px at 92% -10%,rgba(36,66,245,.16),transparent 70%),linear-gradient(180deg,var(--white),var(--snow));border-bottom:1px solid var(--line);padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(2.4rem,5vw,3.5rem)}
.sp-hero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.sp-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.03em;max-width:15ch;margin:0 0 1rem}
.sp-hero .lede{max-width:36rem;margin:0}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;counter-reset:sp}
.sp-steps li{counter-increment:sp;display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;box-shadow:0 10px 24px -20px rgba(11,23,54,.5)}
.sp-steps li::before{content:counter(sp);grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cobalt);color:#fff;font-weight:700;font-size:.9rem}
.sp-steps b{font-size:.98rem}.sp-steps span{font-size:.87rem;color:var(--slate)}
@media(max-width:860px){.sp-hero-in{grid-template-columns:1fr}}
.sp-body{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem)}
.sp-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:960px){.sp-grid{grid-template-columns:1fr}.sp-side{order:-1;display:none}}
.sp-form{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:clamp(1.3rem,4vw,2.6rem);box-shadow:0 30px 60px -44px rgba(11,23,54,.45)}
.sp-req{font-size:.85rem;color:var(--slate);margin:0 0 .4rem}
.sp-sec{border:0;padding:1.8rem 0 0;margin:0;border-top:1px solid var(--line);margin-top:1.6rem;min-width:0}
.sp-sec:first-of-type{border-top:0;margin-top:0;padding-top:.8rem}
.sp-sec legend{display:flex;align-items:center;gap:.7rem;font:700 1.25rem/1.2 var(--display);letter-spacing:-.01em;padding:0;margin-bottom:1.1rem;color:var(--ink)}
.sp-sec legend small{font:500 .85rem var(--sans,inherit);color:var(--slate)}
.sp-n{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--cobalt-t);color:var(--cobalt);font-size:.92rem;font-family:var(--sans,inherit)}
.sp-form .field{margin-bottom:0}
.sp-form .field+.field{margin-top:0}
.sp-account{margin-top:1.3rem;padding:1.1rem 1.2rem;border-radius:14px;background:var(--snow);border:1px solid var(--line)}
.sp-account-h{margin:0 0 .9rem;display:grid;gap:.15rem}
.sp-signed{margin:1.1rem 0 0;padding:.8rem 1rem;border-radius:12px;background:#e1f6ec;color:#06603a;font-weight:500}
.pw{position:relative}.pw input{padding-right:4.5rem}
.pw-show{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--cobalt);font-weight:600;cursor:pointer;padding:.4rem .6rem;border-radius:8px}
.pw-show:hover{background:var(--cobalt-t)}
.sp-reveal{margin-top:1rem;display:grid;gap:1rem;animation:sp-in .25s ease}
.sp-reveal[hidden]{display:none}
@keyframes sp-in{from{opacity:0;transform:translateY(-4px)}}
.sp-upload{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border:1.5px dashed var(--line-2);border-radius:14px;background:var(--snow);cursor:pointer;transition:border-color .2s,background-color .2s}
.sp-upload:hover,.sp-upload:focus-within{border-color:var(--cobalt);background:var(--cobalt-t)}
.sp-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0}
.sp-upload span:last-of-type{display:grid}.sp-upload small{font-weight:400;color:var(--slate);font-size:.84rem}
.sp-up-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--white);border:1px solid var(--line);color:var(--cobalt);font-weight:700;flex:0 0 auto}
.sp-upload.wide{margin-bottom:.4rem}
.sp-check{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.1rem;border:1.5px solid var(--line-2);border-radius:14px;cursor:pointer;font-weight:500}
.sp-check:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-t)}
.sp-check input{width:20px;height:20px;min-height:0;margin-top:.15rem;accent-color:var(--cobalt);flex:0 0 auto}
.sp-check span{display:grid}.sp-check small{color:var(--slate);font-size:.85rem}
.sp-domain{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.sp-domain input{flex:1 1 220px}
.sp-domain .btn{min-height:48px;white-space:nowrap}
.sp-dstat{flex-basis:100%;font-weight:600;font-size:.93rem;min-height:1.3em}
@media(min-width:720px){.sp-dstat{flex-basis:auto}}
.sp-dstat.ok{color:#0a8a4f}.sp-dstat.bad{color:#c62828}.sp-dstat.wait{color:var(--slate);font-weight:500}
.sp-submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.sp-submit .btn{min-width:220px;justify-content:center}
.sp-submit .hint{margin:0}
.sp-side{position:sticky;top:100px;display:grid;gap:1rem}
.sp-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.4rem}
.sp-card h2{font-size:1.15rem;margin:0 0 .7rem}
.sp-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.93rem}
.sp-list li{padding-left:1.6rem;position:relative}.sp-list li::before{content:"\2713";position:absolute;left:0;color:var(--signal);font-weight:800}
.sp-dark{background:var(--night);color:#cdd5e8;border-color:var(--night)}.sp-dark h2{color:#fff}.sp-dark a{color:#fff}
.sp-done{text-align:center;padding:clamp(1rem,4vw,2.4rem) .5rem}
.sp-done .tick{width:64px;height:64px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;background:#e1f6ec;color:#0a8a4f;font-size:2rem;font-weight:800}
.sp-done h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 .6rem}
.sp-done p{color:var(--slate);max-width:34rem;margin:.4rem auto}
.sp-done .btn-row{justify-content:center;margin-top:1.4rem}
.sp-done .pill{display:inline-block;margin-top:.8rem;background:#fff4cc;color:#6a5100;font-weight:700;font-size:.85rem;padding:.35rem .8rem;border-radius:99px}
[aria-invalid=true]{border-color:#c62828!important}
.f-err{color:#c62828;font-size:.84rem;font-weight:600}
.sp-sec legend{float:left;width:100%}
.sp-sec legend+*{clear:both}
.sp-sec>.field,.sp-sec>.fgrid{clear:both}
.sp-hero h1{max-width:19ch}
.sp-form [hidden],.sp-account[hidden]{display:none!important}
.dir-facts{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:.8rem 0 1rem}.dir-facts dt{font-weight:600}.dir-facts dd{margin:0;overflow-wrap:anywhere}