/* ============================================================
   SwoopSEO — design system
   ============================================================ */
:root{
  --bg:#080c12; --bg-2:#0e141d; --bg-3:#141c28; --bg-4:#1b2534;
  --line:#1f2a3a; --line-2:#2c3a4c;
  --tx:#e9eef5; --tx-2:#a3b2c5; --tx-3:#697a90;
  --acc:#52b1cd; --acc-2:#8ad3e8; --acc-dim:rgba(82,177,205,.14);
  --navy:#133a65; --navy-2:#1d5290;
  --ok:#3ddc97; --ok-dim:rgba(61,220,151,.12);
  --warn:#ffcc4d; --warn-dim:rgba(255,204,77,.12);
  --bad:#ff6b6b; --bad-dim:rgba(255,107,107,.12);
  --info:#7aa7ff; --info-dim:rgba(122,167,255,.12);
  --r:10px; --r-lg:16px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 28px rgba(0,0,0,.36);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:650}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.03em}
h3{font-size:1.16rem}
p{margin:0 0 1rem}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
::selection{background:var(--acc);color:#06121a}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.muted{color:var(--tx-2)}
.dim{color:var(--tx-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none !important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.68rem 1.15rem;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--tx);font:600 .93rem/1 var(--sans);cursor:pointer;
  transition:.16s ease;white-space:nowrap}
.btn:hover{background:var(--bg-4);border-color:#3b4756;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--acc);border-color:var(--acc);color:#06131b}
.btn-primary:hover{background:var(--acc-2);border-color:var(--acc-2)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--tx-2)}
.btn-ghost:hover{background:var(--bg-3);color:var(--tx)}
.btn-danger{border-color:rgba(255,107,107,.4);color:var(--bad);background:transparent}
.btn-danger:hover{background:var(--bad-dim);border-color:var(--bad)}
.btn-lg{padding:.92rem 1.7rem;font-size:1rem}
.btn-sm{padding:.44rem .78rem;font-size:.82rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.26rem .68rem;
  border-radius:999px;font:600 .74rem/1.5 var(--sans);letter-spacing:.02em;
  border:1px solid var(--line-2);color:var(--tx-2);background:var(--bg-3)}
.pill-acc{background:var(--acc-dim);border-color:rgba(82,177,205,.4);color:var(--acc-2)}
.pill-ok{background:var(--ok-dim);border-color:rgba(61,220,151,.4);color:var(--ok)}
.pill-warn{background:var(--warn-dim);border-color:rgba(255,204,77,.4);color:var(--warn)}
.pill-bad{background:var(--bad-dim);border-color:rgba(255,107,107,.4);color:var(--bad)}
.pill-info{background:var(--info-dim);border-color:rgba(122,167,255,.4);color:var(--info)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- cards ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem}
.card-pad-0{padding:0;overflow:hidden}
.card h3{margin-bottom:.5rem}

/* ---------- forms ---------- */
label{display:block;font:600 .8rem/1.5 var(--sans);color:var(--tx-2);margin-bottom:.34rem;
  letter-spacing:.01em}
input,select,textarea{width:100%;padding:.66rem .8rem;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--bg);color:var(--tx);
  font:400 .93rem/1.5 var(--sans);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-dim)}
textarea{resize:vertical;min-height:84px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23697a90' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.field{margin-bottom:1rem}
.field-row{display:grid;gap:1rem}
@media(min-width:640px){.field-row.c2{grid-template-columns:1fr 1fr}.field-row.c3{grid-template-columns:repeat(3,1fr)}}
.help{font-size:.78rem;color:var(--tx-3);margin-top:.3rem}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font:650 .74rem/1.5 var(--sans);text-transform:uppercase;
  letter-spacing:.06em;color:var(--tx-3);padding:.7rem .9rem;
  border-bottom:1px solid var(--line);background:var(--bg-3);white-space:nowrap}
td{padding:.72rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-3)}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
th.num{text-align:right}

/* ---------- layout helpers ---------- */
.grid{display:grid;gap:1rem}
@media(min-width:700px){.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
.row{display:flex;align-items:center;gap:.7rem}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.stack>*+*{margin-top:1rem}

/* ---------- stat tiles ---------- */
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.15rem 1.25rem}
.stat .k{font:650 .72rem/1.5 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--tx-3)}
.stat .v{font:650 1.72rem/1.2 var(--sans);letter-spacing:-.03em;margin-top:.3rem;
  font-variant-numeric:tabular-nums}
.stat .s{font-size:.8rem;color:var(--tx-3);margin-top:.22rem}

/* ---------- site header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(8,12,18,.84);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1rem}
.logo{display:flex;align-items:center;gap:.55rem;font:700 1.05rem/1 var(--sans);letter-spacing:-.02em}
.logo-mark{width:28px;height:auto;flex:none}
.logo img.lockup{height:30px;width:auto;display:block}
.logo img.foot-logo{height:52px}
.side .logo img.lockup{height:30px}
@media(max-width:520px){.logo img.lockup{height:28px}}
.nav{display:none;gap:1.6rem;font-size:.91rem;color:var(--tx-2)}
.nav a:hover{color:var(--tx)}
@media(min-width:860px){.nav{display:flex}}

/* ---------- hero ---------- */
.hero{padding:5rem 0 4rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-45%;left:50%;transform:translateX(-50%);
  width:min(1100px,130vw);height:680px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(82,177,205,.16),transparent 66%)}
.hero>*{position:relative}
.hero p.lede{font-size:clamp(1.02rem,2vw,1.22rem);color:var(--tx-2);max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:650 .76rem/1 var(--sans);
  text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:1.1rem}

/* ---------- pricing ---------- */
.price-grid{display:grid;gap:1.2rem;align-items:start}
@media(min-width:900px){.price-grid{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem;display:flex;flex-direction:column;position:relative;transition:.2s}
.plan:hover{border-color:var(--line-2);transform:translateY(-3px)}
.plan.featured{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 18px 50px rgba(82,177,205,.16)}
.plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%)}
.plan .amt{font:650 2.5rem/1 var(--sans);letter-spacing:-.04em;margin:.7rem 0 .1rem}
.plan .amt span{font-size:.95rem;font-weight:500;color:var(--tx-3);letter-spacing:0}
.plan ul{list-style:none;margin:1.2rem 0;padding:0;flex:1;font-size:.9rem}
.plan li{padding:.42rem 0 .42rem 1.6rem;position:relative;color:var(--tx-2);
  border-bottom:1px dashed rgba(31,42,58,.75)}
.plan li:last-child{border-bottom:0}
.plan li::before{content:'';position:absolute;left:.25rem;top:.86rem;width:7px;height:7px;
  border-radius:2px;background:var(--acc);opacity:.75}
.plan li b{color:var(--tx);font-weight:600}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:1000px){.app{grid-template-columns:236px 1fr}}
.side{background:var(--bg-2);border-right:1px solid var(--line);padding:1.1rem;
  display:flex;flex-direction:column;gap:.2rem}
@media(max-width:999px){.side{border-right:0;border-bottom:1px solid var(--line)}}
.side .logo{margin-bottom:1.3rem;padding:.2rem}
.side nav{display:flex;flex-direction:column;gap:.14rem}
@media(max-width:999px){.side nav{flex-direction:row;overflow-x:auto;gap:.3rem}}
.side a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:var(--r);
  color:var(--tx-2);font:550 .9rem/1 var(--sans);cursor:pointer;transition:.14s;white-space:nowrap}
.side a:hover{background:var(--bg-3);color:var(--tx)}
.side a.on{background:var(--acc-dim);color:var(--acc-2);font-weight:650}
.side .spacer{flex:1}
.main{padding:1.6rem;min-width:0;background:var(--bg)}
@media(min-width:700px){.main{padding:2rem 2.2rem}}
.page-head{margin-bottom:1.5rem}
.page-head h2{margin-bottom:.25rem}

/* ---------- misc ---------- */
.empty{text-align:center;padding:3rem 1.5rem;color:var(--tx-3)}
.empty h3{color:var(--tx-2);margin-bottom:.4rem}
.sec{padding:4.2rem 0;border-top:1px solid var(--line)}
.sec-head{max-width:660px;margin-bottom:2.2rem}
.sec-head p{color:var(--tx-2);margin:0}
details.faq{border-bottom:1px solid var(--line);padding:1.05rem 0}
details.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--acc);font-size:1.3rem;flex:none;line-height:1}
details.faq[open] summary::after{content:'\2212'}
details.faq div{color:var(--tx-2);padding-top:.7rem;font-size:.94rem}

.note{border-left:3px solid var(--acc);background:var(--acc-dim);padding:.9rem 1.1rem;
  border-radius:0 var(--r) var(--r) 0;font-size:.89rem;color:var(--tx-2)}
.note.info{border-color:var(--info);background:var(--info-dim)}
.note.warn{border-color:var(--warn);background:var(--warn-dim)}
.note b{color:var(--tx)}

.bar{height:7px;border-radius:99px;background:var(--bg-4);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s}

.modal-bg{position:fixed;inset:0;background:rgba(4,6,9,.76);backdrop-filter:blur(3px);
  z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem;overflow:auto}
.modal{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  width:100%;max-width:620px;box-shadow:var(--shadow)}
.modal-head{padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.modal-body{padding:1.4rem}
.modal-foot{padding:1.1rem 1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:.6rem}

.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:300;
  background:var(--bg-4);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.75rem 1.2rem;font-size:.9rem;box-shadow:var(--shadow);
  animation:up .25s ease both}
@keyframes up{from{opacity:0;transform:translate(-50%,12px)}}

.foot{border-top:1px solid var(--line);padding:2.6rem 0;color:var(--tx-3);font-size:.86rem}
.foot a:hover{color:var(--tx-2)}

.split{display:grid;gap:2rem}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr;align-items:center}}

.layer-head td{background:var(--bg-3);font:650 .72rem/1.5 var(--sans);text-transform:uppercase;
  letter-spacing:.07em;color:var(--tx-3);padding:.5rem .9rem}

@media print{
  body{background:#fff;color:#000}
  .no-print{display:none !important}
  .card,.stat{border-color:#ccc;background:#fff}
  th{background:#f2f2f2;color:#000}
  td,th{border-color:#ddd}
  .main{padding:0}
  .app{grid-template-columns:1fr}
}

/* ---- public service catalog (index.html) ----------------------
   Two columns: what you get, and what that means. Rows are grouped
   under a heading per layer, so the purpose is stated once in a
   full sentence instead of repeated as a vague pill on every row. */
#catalog td{vertical-align:top;padding:1rem .95rem}
#catalog .cat-svc{width:30%;min-width:210px}
#catalog .cat-svc b{display:block;font-size:.95rem;line-height:1.35}
#catalog .cat-svc .dim{font-size:.79rem;line-height:1.45;margin-top:.25rem}
#catalog .cat-desc{font-size:.89rem;line-height:1.65;max-width:68ch}
#catalog .cat-group td{background:var(--bg-3);padding:.9rem .95rem}
#catalog .cat-group b{font-size:.98rem;line-height:1.4;color:var(--tx)}
#catalog .cat-group .muted{font-size:.84rem;line-height:1.55;margin-top:.2rem;max-width:78ch}
#catalog tr:last-child td{border-bottom:none}
@media (max-width:720px){
  #catalog .cat-svc{width:auto;min-width:150px}
  #catalog td{padding:.8rem .7rem}
}

/* ---- two-path conversion flow -------------------------------
   Buying is the primary action everywhere. The audit stays one tap
   away but never competes visually with the purchase button. */
.hero-cta{margin-top:2rem;flex-wrap:wrap;gap:.8rem}

.plan-blurb{font-size:.88rem;margin:.35rem 0 0;min-height:2.6em}
.plan-best{font-size:.8rem}
.plan-cta{margin-top:auto;padding-top:1rem;display:flex;flex-direction:column;
  align-items:stretch;gap:.6rem}
.plan-cta .btn-buy{width:100%;min-height:48px;display:flex;align-items:center;
  justify-content:center;text-align:center;font-weight:650;line-height:1.25}
.plan-alt{text-align:center;font-size:.83rem;color:var(--tx-3);text-decoration:none;
  padding:.35rem 0;min-height:32px}
.plan-alt:hover{color:var(--tx-2);text-decoration:underline}

.path-grid{gap:1.1rem}
.path-card{display:flex;flex-direction:column}
.path-card h3{margin:0 0 .4rem}
.path-card .btn{margin-top:auto;min-height:48px;display:flex;align-items:center;
  justify-content:center}

/* ---- checkout ---- */
.checkout-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:1.6rem;align-items:start}
.checkout-main{order:1}
.checkout-summary{order:2;position:sticky;top:1.4rem}
.summary-list{margin:1rem 0 0;padding-left:1.1rem;font-size:.86rem;line-height:1.7;
  color:var(--tx-2)}
.billing-line{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;
  padding:.85rem .95rem;margin:1.2rem 0;font-size:.88rem;line-height:1.55}
.billing-line .dim{display:block;margin-top:.2rem;font-size:.82rem}
.pay-block:not(:empty){margin-bottom:1.2rem}
.form-sec{margin:0 0 1rem;font-size:1rem}

@media (max-width:900px){
  .checkout-wrap{grid-template-columns:1fr}
  .checkout-summary{order:1;position:static}
  .checkout-main{order:2}
}
@media (max-width:720px){
  .hero-cta .btn{width:100%;justify-content:center}
  .plan-cta .btn-buy{min-height:52px;font-size:.95rem}
  .plan-alt{min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* ============================================================
   CRO layer — trust, steps, reporting demo, compare, accordions,
   sticky mobile CTA, exit intent. Dark premium look retained;
   cyan accent used only on the things we want clicked.
   ============================================================ */

.site-head.sticky{position:sticky;top:0;z-index:60;
  background:rgba(8,12,18,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav-actions{gap:.6rem;align-items:center}
/* On a narrow header the prompt beside the button wraps and breaks
   the row. The button alone still says what it does. */
@media(max-width:560px){.nav-actions>span.dim{display:none}}
.nav-link-sm{font-size:.86rem;color:var(--tx-2);text-decoration:none;margin-right:.2rem}
.nav-link-sm:hover{color:var(--tx)}

/* ---- hero ---- */
.price-from{margin-top:1rem;font-size:.92rem;color:var(--tx-2)}
.price-from b{color:var(--tx)}
.trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  margin:1.6rem 0 0;padding:0}
.trust-strip li{font-size:.86rem;color:var(--tx-2);display:flex;align-items:center;gap:.45rem}
.trust-strip li::before{content:"✓";color:var(--acc);font-weight:700}

.quick-audit{margin-top:2.2rem;max-width:560px}
.quick-audit label{display:block;font-size:.86rem;color:var(--tx-2);margin-bottom:.5rem}
.quick-audit-row{display:flex;gap:.6rem;flex-wrap:wrap}
.quick-audit-row input{flex:1 1 240px;min-height:48px}
.quick-audit-row .btn{min-height:48px;white-space:nowrap}
.quick-audit .help{margin-top:.5rem}

/* ---- section rhythm ---- */
.sec{padding-block:5.2rem}
.sec-tight{padding-block:3.4rem}
.sec-head{margin-bottom:2.4rem}

/* ---- trust cards ---- */
.trust-card{text-align:left}
.trust-card h3{margin:.2rem 0 .35rem;font-size:1.02rem}
.trust-card p{margin:0;font-size:.89rem;line-height:1.6}
.tc-icon{font-size:1.5rem;color:var(--acc);line-height:1;margin-bottom:.7rem}

/* ---- steps with a progress line ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(4,1fr);position:relative}
.steps::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,var(--acc),rgba(93,214,255,.15));opacity:.4}
.step{position:relative;padding-top:0}
.step-n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--acc);color:var(--acc);
  font-weight:700;font-size:.95rem;margin-bottom:.9rem;position:relative;z-index:1}
.step h3{margin:0 0 .35rem;font-size:1rem}
.step p{margin:0;font-size:.89rem;line-height:1.6}

/* ---- example report ---- */
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.demo-grid .stat{background:var(--bg-2);margin:0;border:none;border-radius:0;padding:1.1rem}
.demo-foot{padding:.85rem 1.1rem;border-top:1px solid var(--line);font-size:.8rem}

/* ---- risk reversal ---- */
.risk-strip{background:var(--bg-3);border-block:1px solid var(--line);padding:1.1rem 0}
.risk-strip .wrap{display:flex;gap:.4rem 1rem;flex-wrap:wrap;align-items:baseline;
  justify-content:center;text-align:center}
.risk-strip span{color:var(--tx-2);font-size:.9rem}

/* ---- billing toggle ---- */
.billing-toggle{display:inline-flex;gap:.25rem;padding:.25rem;margin:0 auto 2rem;
  background:var(--bg-3);border:1px solid var(--line);border-radius:999px}
.billing-toggle{display:flex;width:fit-content}
.bt-opt{border:none;background:none;color:var(--tx-2);font:inherit;font-size:.88rem;
  padding:.55rem 1.1rem;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:.45rem}
.bt-opt.is-on{background:var(--bg);color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.save-line{font-size:.8rem;margin-bottom:.7rem;color:var(--ok)}
.save-line.dim{color:var(--tx-3)}

/* ---- compare table ---- */
#compare th{white-space:nowrap}
#compare td,#compare th{padding:.8rem .9rem}
#compare .col-best{background:rgba(93,214,255,.06)}
#compare thead .col-best{position:relative}
.best-tag{display:block;font-size:.64rem;color:var(--acc);letter-spacing:.06em;margin-top:.15rem}
.tick{color:var(--acc);font-weight:700}
.cross{color:var(--tx-3)}
.cell-txt{font-size:.84rem;color:var(--tx-2)}

/* ---- disclosure blocks ---- */
.disclose{margin-top:1.2rem;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2);overflow:hidden}
.disclose>summary{padding:1rem 1.1rem;cursor:pointer;font-size:.92rem;color:var(--tx-2);
  list-style:none;display:flex;align-items:center;gap:.5rem}
.disclose>summary::before{content:"+";color:var(--acc);font-weight:700}
.disclose[open]>summary::before{content:"−"}
.disclose>summary::-webkit-details-marker{display:none}
.disclose-body{padding:0 1.1rem 1.2rem}
.qty-block{margin-top:1.2rem}
.qty-block h4{margin:0 0 .2rem;font-size:.95rem}
.qty-block p{margin:0 0 .7rem;font-size:.83rem}
.qty-table{font-size:.85rem}

/* ---- what-you-get accordions ---- */
.acc{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);
  margin-bottom:.8rem;overflow:hidden}
.acc>summary{padding:1.15rem 1.2rem;cursor:pointer;list-style:none;
  display:flex;flex-direction:column;gap:.25rem}
.acc>summary::-webkit-details-marker{display:none}
.acc-title{font-weight:650;font-size:1.02rem;display:flex;align-items:center;gap:.55rem}
.acc-title::before{content:"+";color:var(--acc);font-weight:700}
.acc[open] .acc-title::before{content:"−"}
.acc-sub{font-size:.86rem;color:var(--tx-2);padding-left:1.15rem}
.acc-body{padding:0 1.2rem 1.2rem}
.detail-item{padding:.95rem 0;border-top:1px solid var(--line)}
.detail-item b{display:block;margin-bottom:.3rem;font-size:.93rem}
.detail-item p{margin:0;font-size:.87rem;line-height:1.65;max-width:74ch}

/* ---- final CTA ---- */
.final-cta{background:var(--bg-2);border-top:1px solid var(--line)}
.final-cta h2{margin-bottom:.6rem}

/* ---- mobile sticky bar ---- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:.5rem;flex-direction:column;align-items:stretch;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(8,12,18,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mobile-bar .btn{min-height:50px;display:flex;align-items:center;justify-content:center;font-weight:650}
.mobile-bar-alt{text-align:center;font-size:.84rem;color:var(--tx-2);text-decoration:none;padding:.2rem}

/* ---- exit intent ---- */
.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(4,7,11,.72);
  backdrop-filter:blur(4px);display:grid;place-items:center;padding:1.2rem}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;
  padding:1.8rem;max-width:420px;width:100%;position:relative;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.modal h3{margin:0 0 .4rem}
.modal p{margin:0 0 1.2rem;font-size:.9rem}
.modal-x{position:absolute;top:.7rem;right:.9rem;background:none;border:none;
  color:var(--tx-3);font-size:1.5rem;line-height:1;cursor:pointer}
.modal-x:hover{color:var(--tx)}

/* ---- responsive ---- */
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .demo-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .sec{padding-block:3.6rem}
  .nav-actions .nav-link-sm{display:none}
  .steps{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:1fr}
  .mobile-bar{display:none}
  .mobile-bar.is-on{display:flex}
  body{padding-bottom:0}
  .trust-strip{gap:.45rem 1rem}
  .trust-strip li{font-size:.82rem}
  .billing-toggle{width:100%;justify-content:center}
}

.secure-note{text-align:center;margin-top:.9rem;font-size:.83rem;color:var(--tx-3);
  display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}

/* ---- onboarding wizard ---- */
.wizard-steps{list-style:none;display:flex;gap:.4rem;margin:0 0 1.6rem;padding:0;
  flex-wrap:wrap}
.wizard-steps li{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;
  font-size:.82rem;color:var(--tx-3)}
.ws-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line);font-size:.76rem;flex:none}
.wizard-steps li.is-on{color:var(--tx)}
.wizard-steps li.is-on .ws-n{border-color:var(--acc);color:var(--acc)}
.wizard-steps li.is-done .ws-n{background:var(--acc);border-color:var(--acc);color:#04202b}
.wizard-steps li.is-done .ws-n::after{content:"✓"}
.wizard-steps li.is-done .ws-n{font-size:0}
.wizard-steps li.is-done .ws-n::after{font-size:.72rem;font-weight:700}
.ob-nav{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.ob-nav .btn{min-height:48px}
.ob-nav .btn-primary{flex:1 1 220px;justify-content:center;display:flex;align-items:center}

/* ---- post-audit upsell ---- */
.upsell{margin-top:1.2rem;border-color:rgba(93,214,255,.3)}
.upsell .summary-list{margin-top:.8rem}

@media (max-width:600px){
  .wizard-steps .ws-l{display:none}
  .wizard-steps li{flex:0 0 auto}
}

/* ---- Turnstile ---- */
.turnstile-slot { min-height: 65px; margin-bottom: .4rem; }
.turnstile-slot:empty::before {
  content: "Loading verification…";
  display: flex; align-items: center; min-height: 65px;
  font-size: .84rem; color: var(--tx-3);
}

/* ============================================================
   Accounts — sign up, sign in, reset, dashboard
   ============================================================ */

/* Two layouts share these pieces.

   Sign-up and sign-in use the split: the form on one side, the reason
   to fill it in on the other. An auth page with nothing but a card on
   an empty background is the moment people decide whether the product
   is real, and empty space says nothing.

   Reset keeps the plain centred column. It is a utility page reached
   mid-task — nobody arriving there needs to be sold to. */

.auth-sec{position:relative;overflow:hidden;padding:3.2rem 0 4.5rem}

/* The same glow the marketing hero uses, so these pages read as part
   of the site rather than a bolted-on login. */
.auth-sec::before{content:'';position:absolute;top:-42%;left:50%;transform:translateX(-50%);
  width:min(1100px,140vw);height:620px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(82,177,205,.15),transparent 66%)}
.auth-sec>*{position:relative}

/* ---- the split ---- */
.auth-shell{max-width:1060px;margin:0 auto;padding:0 24px;display:grid;gap:2.6rem}
@media(min-width:940px){
  .auth-shell{grid-template-columns:1fr 452px;gap:4rem;align-items:center;padding:1.4rem 24px}
}

/* Below the split, the pitch would push the form off the first screen,
   so it is dropped entirely. Someone on a phone who tapped "Sign in"
   wants the fields, not the argument for them. */
.auth-aside{display:none}
@media(min-width:940px){.auth-aside{display:block}}

.auth-aside h2{font-size:clamp(1.8rem,2.6vw,2.35rem);letter-spacing:-.03em;margin-bottom:.8rem}
.auth-aside .lede{color:var(--tx-2);font-size:1.02rem;line-height:1.65;
  max-width:44ch;margin:0 0 2rem}

.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.auth-points li{display:flex;gap:.85rem;align-items:flex-start}
.auth-points .tick{width:23px;height:23px;border-radius:7px;flex:none;margin-top:.12rem;
  display:grid;place-items:center;background:var(--acc-dim);
  border:1px solid rgba(82,177,205,.42);color:var(--acc-2);
  font:700 .74rem/1 var(--sans)}
.auth-points b{display:block;font-weight:650;font-size:.95rem;letter-spacing:-.01em;
  margin-bottom:.15rem}
.auth-points span{color:var(--tx-2);font-size:.88rem;line-height:1.6}

.auth-aside .trust-strip{margin-top:2.2rem;padding-top:1.5rem;
  border-top:1px solid var(--line);gap:.5rem 1.2rem}

/* ---- the card column ---- */
.auth-col{width:100%;max-width:452px;margin:0 auto}
.auth-wrap{max-width:452px;margin:0 auto;padding:0 24px}

.auth-head{margin-bottom:1.4rem}
.auth-head h1{font-size:clamp(1.6rem,3.4vw,1.95rem);margin-bottom:.45rem}
.auth-head p{color:var(--tx-2);font-size:.93rem;margin:0}
.auth-wrap .auth-head{text-align:center}
@media(max-width:939px){.auth-head{text-align:center}}

.auth-card{position:relative;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:1.7rem 1.6rem 1.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 22px 60px rgba(0,0,0,.44)}

/* A hairline of brand across the top edge — enough to make the card
   feel deliberate without another border competing with the real one. */
.auth-card::before{content:'';position:absolute;left:1.6rem;right:1.6rem;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.55}

.auth-card .field{margin-bottom:1.05rem}
.auth-card label{font-size:.82rem;color:var(--tx-2)}
.auth-card input{padding:.78rem .9rem;font-size:.95rem;background:var(--bg)}
.auth-card input::placeholder{color:#4d5c70}
.auth-card .btn-lg{width:100%;margin-top:.5rem;padding:.95rem 1.7rem}

.auth-alt{text-align:center;color:var(--tx-3);font-size:.88rem;margin-top:1.2rem}
.auth-alt a{color:var(--acc-2);font-weight:600}
.auth-alt a:hover{text-decoration:underline}
.auth-legal{text-align:center;color:var(--tx-3);font-size:.76rem;
  line-height:1.6;margin:1.1rem auto 0;max-width:40ch}
.auth-legal a{color:var(--tx-2);text-decoration:underline;text-underline-offset:2px}
.auth-legal a:hover{color:var(--acc-2)}

/* A labelled rule, for "or" between the form and a secondary path. */
.auth-rule{display:flex;align-items:center;gap:.9rem;margin:1.4rem 0 1.1rem;
  color:var(--tx-3);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.auth-rule::before,.auth-rule::after{content:'';flex:1;height:1px;background:var(--line)}

/* Inline form feedback. Reserved space, so an error appearing does not
   shove the submit button out from under a moving thumb. */
.form-msg{display:none;border-radius:var(--r);padding:.72rem .85rem;
  font-size:.86rem;line-height:1.55;margin-bottom:1rem;border:1px solid transparent}
.form-msg.is-on{display:block}
.form-msg.bad{background:var(--bad-dim);border-color:rgba(255,107,107,.4);color:#ffc9c9}
.form-msg.ok{background:var(--ok-dim);border-color:rgba(61,220,151,.4);color:#b6f2d8}
.form-msg.info{background:var(--info-dim);border-color:rgba(122,167,255,.4);color:#cfdcff}

/* Password strength.

   Hidden until the field has content — four empty grey bars under the
   input read as a broken border and say nothing about a password nobody
   has typed. Once typing starts the bars fill, take a colour, and a
   word appears beside them.

   The word is not decoration. A meter that speaks only in red-to-green
   is invisible to the ~8% of men with a colour vision deficiency and to
   every screen reader, so the colour reinforces and the word carries
   the message. */
.pw-meter{display:none;gap:5px;margin-top:.75rem}
.pw-meter.is-on{display:flex}
.pw-meter i{flex:1;height:5px;border-radius:3px;background:var(--bg-4);
  transition:background .25s ease,box-shadow .25s ease}

.pw-meter.s1 i:nth-child(-n+1){background:var(--bad);box-shadow:0 0 10px rgba(255,107,107,.5)}
.pw-meter.s2 i:nth-child(-n+2){background:var(--warn);box-shadow:0 0 10px rgba(255,204,77,.45)}
.pw-meter.s3 i:nth-child(-n+3){background:var(--acc);box-shadow:0 0 10px rgba(82,177,205,.5)}
.pw-meter.s4 i{background:var(--ok);box-shadow:0 0 12px rgba(61,220,151,.5)}

.pw-label{display:inline-block;margin-top:.45rem;font:700 .74rem/1 var(--sans);
  letter-spacing:.07em;text-transform:uppercase;transition:color .25s}
.pw-label.s1{color:var(--bad)}
.pw-label.s2{color:var(--warn)}
.pw-label.s3{color:var(--acc-2)}
.pw-label.s4{color:var(--ok)}

/* Checkout: the line confirming which account the plan attaches to. */
.signed-in-note{display:none;background:var(--acc-dim);
  border:1px solid rgba(82,177,205,.34);border-radius:var(--r);
  padding:.7rem .85rem;margin-bottom:1rem;font-size:.86rem;color:var(--tx-2)}
.signed-in-note.signed-in-note{display:block}
input[readonly]{background:var(--bg-3);color:var(--tx-2);cursor:default}

/* ---- the audit-in-progress screen ----

   A crawl takes minutes. For that whole time this is the only thing the
   customer has to look at, and a 15px spinner on an empty page reads as
   a stalled tab. It is now a real progress display: the stages we
   actually move through, the one in flight called out, and the site
   being worked on named. */
.crawl{max-width:620px;margin:0 auto;text-align:center}
.crawl-ring{width:132px;height:132px;margin:0 auto 1.6rem;position:relative;
  display:grid;place-items:center}
.crawl-ring::before,.crawl-ring::after{content:'';position:absolute;inset:0;
  border-radius:50%;border:3px solid transparent}
.crawl-ring::before{border-color:var(--line-2);opacity:.55}
.crawl-ring::after{border-top-color:var(--acc);border-right-color:var(--acc);
  animation:crawl-spin 1.15s cubic-bezier(.5,.15,.5,.85) infinite}
.crawl-ring .pct{font:700 2rem/1 var(--sans);letter-spacing:-.04em;color:var(--acc-2)}
.crawl-ring .pct small{display:block;font:600 .62rem/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin-top:.4rem}
@keyframes crawl-spin{to{transform:rotate(360deg)}}

.crawl h2{font-size:clamp(1.5rem,3.2vw,2rem)}
.crawl .crawl-site{display:inline-flex;align-items:center;gap:.5rem;margin:.9rem 0 0;
  padding:.4rem .85rem;border-radius:999px;background:var(--bg-3);
  border:1px solid var(--line-2);font:600 .84rem/1 var(--mono);color:var(--tx-2)}

.crawl-steps{list-style:none;margin:2rem 0 0;padding:0;text-align:left;
  display:grid;gap:.45rem}
.crawl-steps li{display:flex;align-items:center;gap:.8rem;padding:.75rem .95rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  color:var(--tx-3);font-size:.92rem;transition:.25s}
.crawl-steps .cs-dot{width:20px;height:20px;border-radius:50%;flex:none;
  border:2px solid var(--line-2);display:grid;place-items:center;
  font:700 .62rem/1 var(--sans)}
.crawl-steps li.done{color:var(--tx-2);border-color:rgba(61,220,151,.3)}
.crawl-steps li.done .cs-dot{background:var(--ok);border-color:var(--ok);color:#052e1e}
.crawl-steps li.done .cs-dot::after{content:'✓'}
.crawl-steps li.now{color:var(--tx);border-color:var(--acc);
  background:linear-gradient(90deg,var(--acc-dim),var(--bg-2) 70%)}
.crawl-steps li.now .cs-dot{border-color:var(--acc);
  border-top-color:transparent;animation:crawl-spin .9s linear infinite}
.crawl-note{margin-top:1.6rem;font-size:.85rem;color:var(--tx-3)}

@media(prefers-reduced-motion:reduce){
  .pw-meter i,.pw-label{transition:none}
  .crawl-ring::after,.crawl-steps li.now .cs-dot{animation-duration:3s}
}

/* The toggle is positioned against the input, not the field, so a
   label that wraps to two lines cannot push it off the box. */
.field-pw{position:relative}
.field-pw input{padding-right:4.4rem}
.pw-toggle{position:absolute;right:.45rem;bottom:0;height:calc(1.5rem + 1.56rem);
  display:flex;align-items:center;background:none;border:0;border-radius:6px;
  color:var(--tx-3);font:650 .76rem var(--sans);cursor:pointer;padding:0 .5rem}
.pw-toggle:hover{color:var(--acc-2)}
.pw-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
/* Where a meter and help text follow the input, the toggle measures
   down from the label instead of up from the field's bottom edge. */
.field-pw:has(.pw-meter) .pw-toggle,
.field-pw:has(.help) .pw-toggle{bottom:auto;top:1.72rem;height:2.9rem}

/* A visible keyboard focus ring everywhere, not just on inputs. */
.auth-card a:focus-visible,.auth-card button:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* ---------- account dashboard ---------- */
.acct-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.acct-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:900px){.acct-grid{grid-template-columns:1.55fr .95fr;align-items:start}}

.audit-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.audit-row:last-child{border-bottom:0}
.audit-row:hover{background:var(--bg-3)}
.audit-row .ar-main{flex:1 1 190px;min-width:0}
.audit-row .ar-dom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-row .ar-when{font-size:.79rem;color:var(--tx-3);margin-top:.15rem}
.audit-row .ar-actions{display:flex;gap:.45rem;flex:none}

/* The price figure exists as .plan .amt for the pricing cards; the
   account panel needs the same type outside a .plan. */
.card > .amt{font:650 2.1rem/1 var(--sans);letter-spacing:-.04em}
.card > .amt span{font-size:.9rem;font-weight:500;color:var(--tx-3);letter-spacing:0}

.score-chip{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font:700 1.05rem/1 var(--sans);flex:none;border:1px solid var(--line-2);background:var(--bg-3)}
.score-chip.good{color:var(--ok);border-color:rgba(61,220,151,.45);background:var(--ok-dim)}
.score-chip.mid{color:var(--warn);border-color:rgba(255,204,77,.45);background:var(--warn-dim)}
.score-chip.low{color:var(--bad);border-color:rgba(255,107,107,.45);background:var(--bad-dim)}

/* ---------- audit report page ---------- */
.rep-hero{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.rep-score{width:118px;height:118px;border-radius:50%;flex:none;display:grid;
  place-items:center;position:relative;background:var(--bg-2);border:1px solid var(--line)}
.rep-score b{font:700 2.5rem/1 var(--sans);letter-spacing:-.04em}
.rep-score span{font-size:.7rem;color:var(--tx-3);letter-spacing:.08em;text-transform:uppercase}
.rep-score.good b{color:var(--ok)} .rep-score.mid b{color:var(--warn)} .rep-score.low b{color:var(--bad)}

.stat-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));margin:1.2rem 0}
.stat-box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1rem}
.stat-box .sb-k{font:600 .68rem/1.5 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx-3)}
.stat-box .sb-v{font:700 1.6rem/1.2 var(--sans);letter-spacing:-.03em;margin-top:.15rem}
.stat-box .sb-s{font-size:.76rem;color:var(--tx-3)}

.rec-item{border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.7rem;background:var(--bg-2)}
.rec-item.critical{border-left-color:var(--bad)}
.rec-item.high{border-left-color:var(--warn)}
.rec-item.medium{border-left-color:var(--acc)}
.rec-item .ri-top{display:flex;justify-content:space-between;gap:.8rem;
  align-items:center;margin-bottom:.4rem;flex-wrap:wrap}
.rec-item h4{margin:0;font-size:1rem;font-weight:650;letter-spacing:-.01em}
.rec-item p{margin:0;color:var(--tx-2);font-size:.89rem;line-height:1.6}
.rec-item .ri-fix{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--tx-2)}

/* A polling page must never look frozen. */
.working{display:flex;align-items:center;gap:.65rem;color:var(--tx-2);font-size:.92rem}
.working::before{content:"";width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid var(--line-2);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.working::before{animation-duration:2.4s}}

/* ============================================================
   Audit report — the funnel
   ============================================================ */

/* Severity colour on the stat tiles, so "3 critical" reads as a problem
   at a glance rather than as a neutral number. */
.stat-box.t-bad{border-color:rgba(255,107,107,.36);background:linear-gradient(var(--bad-dim),var(--bg-2))}
.stat-box.t-bad .sb-v{color:var(--bad)}
.stat-box.t-warn{border-color:rgba(255,204,77,.32)}
.stat-box.t-warn .sb-v{color:var(--warn)}
.stat-box.t-ok .sb-v{color:var(--ok)}

/* ---- the download ---- */
.dl-block{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(82,177,205,.1),var(--bg-2) 60%);
  border:1px solid rgba(82,177,205,.34);border-radius:var(--r-lg);
  padding:1.15rem 1.3rem;margin:0 0 1.8rem}
.dl-icon{width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--acc);color:#06131b;font:700 .72rem/1 var(--sans);letter-spacing:.04em}
.dl-text{flex:1 1 220px;min-width:0}
.dl-text b{display:block;font-size:1rem;letter-spacing:-.01em}
.dl-text span{display:block;color:var(--tx-2);font-size:.86rem;line-height:1.55;margin-top:.2rem}
.dl-block .btn{flex:none}

/* ---- findings ---- */
.ri-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:var(--bg-4);color:var(--tx-2);font:700 .74rem/1 var(--sans);
  margin-right:.6rem;vertical-align:2px}
.rec-item h4{display:flex;align-items:center;gap:0}

/* ---- what we'd do ---- */
.plan-steps{display:grid;gap:.7rem}
.ps-item{display:flex;gap:1rem;align-items:flex-start;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem}
.ps-when{flex:none;width:88px;font:650 .72rem/1.5 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--acc);padding-top:.12rem}
.ps-body b{display:block;font-weight:650;letter-spacing:-.01em;margin-bottom:.2rem}
.ps-body span{color:var(--tx-2);font-size:.89rem;line-height:1.6}
@media(max-width:560px){
  .ps-item{flex-direction:column;gap:.4rem}
  .ps-when{width:auto}
}

/* ---- the offer ---- */
.offer-card{margin-top:2.4rem;background:var(--bg-2);
  border:1px solid var(--acc);border-radius:var(--r-lg);padding:1.7rem 1.6rem;
  box-shadow:0 0 0 1px rgba(82,177,205,.35),0 24px 64px rgba(82,177,205,.14)}
.offer-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.2rem;flex-wrap:wrap;margin-bottom:1.2rem}
.offer-price{text-align:right;flex:none}
.offer-price .amt{font:650 2.2rem/1 var(--sans);letter-spacing:-.04em}
.offer-price .amt span{font-size:.9rem;font-weight:500;color:var(--tx-3);letter-spacing:0}
@media(max-width:520px){.offer-price{text-align:left}}
.offer-list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;font-size:.9rem}
.offer-list li{padding:.46rem 0 .46rem 1.7rem;position:relative;color:var(--tx-2);
  border-bottom:1px dashed rgba(31,42,58,.75)}
.offer-list li:last-child{border-bottom:0}
.offer-list li::before{content:"✓";position:absolute;left:.2rem;top:.44rem;
  color:var(--acc);font-weight:700;font-size:.86rem}
.offer-list li b{color:var(--tx);font-weight:600}

/* ---- objections ---- */
.obj-grid{display:grid;gap:.8rem}
@media(min-width:700px){.obj-grid{grid-template-columns:1fr 1fr}}
.obj-item{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.05rem 1.15rem}
.obj-item b{display:block;font-weight:650;letter-spacing:-.01em;margin-bottom:.35rem}
.obj-item span{color:var(--tx-2);font-size:.88rem;line-height:1.62}

/* ---- the sticky bar ----
   Held back until the reader has passed the score. A pitch that covers
   the number they came for is a pitch they close. */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(11,17,25,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  transform:translateY(100%);transition:transform .28s ease;
  padding:.75rem 0;box-shadow:0 -10px 40px rgba(0,0,0,.45)}
.cta-bar.is-on{transform:translateY(0)}
.cta-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cta-bar-text{min-width:0}
.cta-bar-text b{display:block;font-size:.95rem;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-bar-text span{display:block;color:var(--tx-3);font-size:.8rem}
.cta-bar .btn{flex:none}
@media(max-width:520px){
  .cta-bar-text span{display:none}
  .cta-bar .btn{padding:.6rem 1rem;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){.cta-bar{transition:none}}

/* The bar sits over the end of the page, so the last thing on it needs
   room to clear. */
body:has(.cta-bar.is-on) .sec:last-of-type{padding-bottom:6rem}

/* ============================================================
   Marketing site — conversion pieces
   ============================================================ */

/* The hero's form is now the primary action rather than a footnote
   below two buttons, so it carries the weight of one. */
.quick-audit.hero-form{margin-top:2.2rem;max-width:600px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:1.3rem 1.35rem;box-shadow:0 1px 2px rgba(0,0,0,.5),0 20px 54px rgba(0,0,0,.4)}
.quick-audit.hero-form label{font-size:.9rem;color:var(--tx);font-weight:600;margin-bottom:.6rem}
.quick-audit.hero-form input{padding:.85rem .95rem;font-size:1rem;flex:1 1 240px}
.quick-audit.hero-form .quick-audit-row{gap:.7rem}
.quick-audit.hero-form .btn{flex:none}
.quick-audit.hero-form .help{margin-top:.7rem}
@media(max-width:560px){
  .quick-audit.hero-form .quick-audit-row{flex-direction:column}
  .quick-audit.hero-form .btn{width:100%}
}

.price-from a{color:var(--acc-2);font-weight:600}
.price-from a:hover{text-decoration:underline}

/* A call to action where the argument for it has just been made, rather
   than only at the top and the bottom of the page. */
.mid-cta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap;margin-top:1.6rem;padding:1.15rem 1.35rem;
  background:linear-gradient(135deg,rgba(82,177,205,.1),var(--bg-2) 62%);
  border:1px solid rgba(82,177,205,.32);border-radius:var(--r-lg)}
.mid-cta b{display:block;font-size:1.02rem;letter-spacing:-.01em}
.mid-cta span{display:block;color:var(--tx-2);font-size:.88rem;margin-top:.15rem}
.mid-cta .btn{flex:none}
@media(max-width:560px){.mid-cta .btn{width:100%}}

/* The mobile bar leads with the free action now, so the secondary link
   needs room to say what it is rather than being a bare word. */
.mobile-bar-alt{font-size:.8rem;line-height:1.3}

/* ============================================================
   Shared chrome — footer, page fill, small layout repairs
   ============================================================ */

/* Every page except the marketing site used to stop dead below its last
   card, with the viewport's remaining height as empty dark space. That
   reads as a page still loading. The body becomes a column so the main
   content takes the slack and the footer sits at the bottom of short
   pages without floating on long ones. */
body{min-height:100vh;display:flex;flex-direction:column}
body>section,body>main,body>.app{flex:1 0 auto;min-width:0}
body>.site-head,body>.foot,body>.app-foot,body>.mobile-bar,
body>.cta-bar,body>.modal-backdrop{flex:none}

.app-foot{border-top:1px solid var(--line);background:var(--bg-2);
  padding:1.8rem 0 1.6rem;margin-top:3.5rem;color:var(--tx-3);font-size:.85rem}
.app-foot .af-top{display:flex;align-items:center;justify-content:space-between;
  gap:1rem 1.6rem;flex-wrap:wrap}
.af-brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.af-brand img{height:24px;width:auto;opacity:.9}
.af-links{display:flex;gap:1.1rem;flex-wrap:wrap}
.af-links a:hover{color:var(--tx-2)}
.af-note{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.76rem;line-height:1.65;max-width:76ch;color:var(--tx-3)}
@media(max-width:620px){
  .app-foot .af-top{flex-direction:column;align-items:flex-start}
  .af-links{gap:.8rem 1rem}
}
/* The report page's sticky bar sits over the footer. */
body:has(.cta-bar.is-on) .app-foot{padding-bottom:5.5rem}

/* Auth pages: fill the viewport rather than leaving a third of it dark
   below the card. Centred on tall screens, top-aligned on short ones so
   a long form is never pushed off the top where it cannot be scrolled
   back to. */
.auth-sec{display:flex;align-items:center;
  min-height:calc(100vh - 66px - 190px)}
.auth-sec>*{width:100%}
@media(max-height:820px){.auth-sec{align-items:flex-start}}

/* The dashboard heading and its action were on different baselines. */
.acct-head{align-items:center}
.acct-head h1{line-height:1.1}

/* Turnstile renders into a fixed-width box unless the slot gives it
   room, which left it stranded against the left edge of a full-width
   form. */
.turnstile-slot{width:100%}
.turnstile-slot iframe{width:100% !important;max-width:100%}

/* The staff console's sidebar became a horizontal nav on small screens
   but nothing constrained its width, so the whole page scrolled
   sideways. The nav is the scroller now; the page is not. */
@media(max-width:999px){
  /* Two rows, and the first is only as tall as the nav. Without the
     explicit rows the sidebar stretched to share the viewport with the
     content and left a screenful of empty panel above it. */
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .side{min-width:0;max-width:100%;overflow:hidden;height:auto;
    flex-direction:row;align-items:center;gap:.8rem;flex-wrap:wrap}
  .side .logo{margin-bottom:0}
  .side nav{overflow-x:auto;scrollbar-width:thin;padding-bottom:.3rem;
    -webkit-overflow-scrolling:touch}
  .side .spacer{display:none}
  .main{min-width:0}
}

/* ============================================================
   Dashboard — live campaign work
   ============================================================ */

/* The answer to "what am I actually paying for". Named in the same
   plain English the site uses; the panel's own service names and ids
   never appear here. */
.work-card{margin-bottom:1.1rem}
.work-head{padding:1.15rem 1.25rem;border-bottom:1px solid var(--line);align-items:flex-start}
.work-sum{text-align:right;flex:none}
.work-sum b{display:block;font:700 1.6rem/1 var(--sans);letter-spacing:-.03em;color:var(--acc-2)}
.work-sum span{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3)}

.work-row{display:flex;align-items:flex-start;gap:1.1rem;padding:1rem 1.25rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.work-row:last-child{border-bottom:0}
.work-row:hover{background:var(--bg-3)}
.work-main{flex:1 1 260px;min-width:0}
.work-name{font-weight:650;letter-spacing:-.01em}
.work-what{color:var(--tx-3);font-size:.83rem;line-height:1.55;margin-top:.15rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.work-bar{height:5px;border-radius:3px;background:var(--bg-4);margin-top:.7rem;overflow:hidden}
.work-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));transition:width .6s ease}
.work-side{flex:none;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:.4rem}
.work-qty{font:500 .78rem/1 var(--mono);color:var(--tx-3)}
@media(max-width:560px){
  .work-side{flex-direction:row;align-items:center;width:100%;
    justify-content:space-between;text-align:left}
}

/* When the next audit is not available yet, the button is replaced by
   the reason and the date rather than something that would be refused. */
.cta-locked{background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--r);padding:.65rem .95rem;text-align:right}
.cta-locked b{display:block;font-size:.9rem}
.cta-locked span{display:block;font-size:.78rem;color:var(--tx-3);margin-top:.1rem}

@media(prefers-reduced-motion:reduce){.work-bar i{transition:none}}

/* ---- admin panel ---- */
.side a[data-view]{cursor:pointer}
.app-foot ~ .app{display:none}
#admin-main .stat .v{font-size:1.5rem}
#admin-main table td,#admin-main table th{font-size:.86rem}
#admin-main .card+.card{margin-top:1rem}

/* ---- checkout: what happens next, and the assurances ---- */
.next-head{margin:1.4rem 0 .6rem;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-3);font-weight:700}
.next-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;counter-reset:n}
.next-list li{position:relative;padding-left:1.9rem;counter-increment:n}
.next-list li::before{content:counter(n);position:absolute;left:0;top:.05rem;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc-dim);border:1px solid rgba(82,177,205,.42);
  color:var(--acc-2);font:700 .68rem/1 var(--sans)}
.next-list b{display:block;font-size:.88rem;letter-spacing:-.01em}
.next-list span{display:block;color:var(--tx-2);font-size:.84rem;line-height:1.55;margin-top:.1rem}

.assure{display:flex;align-items:center;gap:.5rem;margin-top:1.2rem;padding-top:1rem;
  border-top:1px solid var(--line);color:var(--ok);font:600 .84rem/1.4 var(--sans)}

/* Wordmarks rather than logo files: the brand images are licensed, and
   an unlicensed Visa logo on a checkout is a real problem. */
.card-marks{display:flex;gap:.4rem;justify-content:center;margin-top:.7rem}
.card-marks span{font:700 .64rem/1 var(--sans);letter-spacing:.06em;color:var(--tx-3);
  border:1px solid var(--line-2);border-radius:4px;padding:.32rem .45rem;background:var(--bg-3)}

/* ---- onboarding: what we already know ---- */
.ob-known{margin-bottom:1.1rem;border-color:rgba(61,220,151,.32);
  background:linear-gradient(135deg,rgba(61,220,151,.07),var(--bg-2) 60%)}
.known-list{margin:0 0 1.1rem;padding:0;display:grid;gap:.5rem}
.known-list div{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
.known-list dt{flex:0 0 110px;font:600 .78rem/1.5 var(--sans);color:var(--tx-3);
  letter-spacing:.03em;text-transform:uppercase;margin:0}
.known-list dd{margin:0;font-size:.92rem;word-break:break-word;flex:1 1 200px}

/* ---- admin: the supplier's order id ----
   The only reference SMMFlare can look a problem up by, so it is the
   first column and one click copies it rather than being retyped into
   a support ticket. */
.order-id{font:600 .84rem/1 var(--mono);color:var(--acc-2);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:6px;padding:.34rem .5rem;
  cursor:pointer;transition:.15s}
.order-id:hover{border-color:var(--acc);color:var(--tx)}
.order-id.copied{background:var(--ok-dim);border-color:var(--ok);color:var(--ok)}
.order-id:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

.cycle-block{border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:.9rem}
.cycle-head{padding:.8rem 1rem;background:var(--bg-3);border-bottom:1px solid var(--line)}
.cycle-head .pill{margin-left:.35rem}

/* ---- admin: supplier balances (never customer-facing) ---- */
.bal-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.bal-card{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;
  background:var(--bg-3)}
.bal-card.ok{border-color:rgba(61,220,151,.32)}
.bal-card.low{border-color:var(--bad);background:linear-gradient(var(--bad-dim),var(--bg-3))}
.bal-card.off{opacity:.65}
.bal-k{font:600 .7rem/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.bal-v{font:700 1.7rem/1.15 var(--sans);letter-spacing:-.03em;margin-top:.15rem}
.bal-card.ok .bal-v{color:var(--ok)}
.bal-card.low .bal-v{color:var(--bad)}
.bal-s{font-size:.78rem;color:var(--tx-3);margin-top:.15rem}

/* ---- checkout: discount code ----
   Collapsed until asked for. An open code field is a prompt to leave
   and go looking for one. */
.promo{margin:1.1rem 0 0}
.promo-toggle{background:none;border:0;padding:0;cursor:pointer;
  color:var(--acc-2);font:600 .85rem var(--sans);text-decoration:underline;
  text-underline-offset:3px}
.promo-toggle:hover{color:var(--tx)}
.promo-row{display:flex;gap:.5rem;margin-top:.6rem}
.promo-row input{flex:1;text-transform:uppercase}
.promo-row .btn{flex:none}
.promo-msg{font-size:.83rem;margin-top:.45rem;display:none}
.promo-msg.ok{display:block;color:var(--ok)}
.promo-msg.bad{display:block;color:var(--bad)}

/* ---- admin: services and plan quantities ---- */
.plan-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
#plan-editor input{background:var(--bg)}
#admin-main .field-row.c3{display:grid;gap:1rem}
@media(min-width:760px){#admin-main .field-row.c3{grid-template-columns:repeat(3,1fr)}}

/* ---- admin: staff and roles ---- */
.who{padding:.7rem .75rem;border-top:1px solid var(--line);margin-top:.5rem}
.who-role{display:block;font:700 .7rem/1.4 var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--acc-2)}
.who-email{display:block;font-size:.76rem;color:var(--tx-3);
  overflow:hidden;text-overflow:ellipsis}
.perm-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.15rem;
  font:500 .76rem/1.5 var(--mono);color:var(--tx-3)}
#staff-body select{font-size:.84rem;padding:.4rem .6rem}
#staff-body .btn{margin-left:.3rem}