/* Ad Verdict Desk: its own identity (soft lilac paper, deep plum ink, the FulFill It purple). Green, amber and red are used only for keep, fix and stop.
   Headings use a system serif, body a system sans, numbers a monospace: no extra font downloads. */
:root{--bg:#FAF7FC;--paper:#FFFFFF;--ink:#1E1030;--muted:#645A72;--line:#E6DDEE;--line2:#D3C6DE;--accent:#9A18BA;--accent-d:#7A1294;--accent-soft:#F4E6F9;--amber:#9A18BA;--amber-soft:#FBF0D8;
  --good:#0F6B3B;--good-bg:#DDF1E5;--warn:#8A5A00;--warn-bg:#FBF0D8;--bad:#B3261E;--bad-bg:#F9E0DC;--neutral:#645A72;--neutral-bg:#EFE9F4;
  --fh:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;--fb:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r:10px}
*{box-sizing:border-box}html{scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--fb);-webkit-text-size-adjust:100%;padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3{font-family:var(--fh);letter-spacing:-.01em;margin:0;line-height:1.15;text-wrap:balance;font-weight:700}
p{margin:0}a{color:var(--accent)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:20}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}h2[tabindex="-1"]:focus{outline:none}

.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;max-width:720px;margin:0 auto}
.lockup{display:flex;align-items:center;gap:12px;min-width:0}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.bmark{flex:none;width:40px;height:40px;display:block}.brand b{font:700 22px/1 var(--fh);letter-spacing:-.01em;white-space:nowrap}.brand b i{font-style:normal;color:var(--accent)}
.x{flex:none;display:block;width:14px;height:14px}.ffb{display:flex;align-items:center;gap:7px;text-decoration:none;color:#2A1B33;font:600 21px/1 'Outfit',var(--fb);white-space:nowrap}.ffb img{display:block;height:24px;width:auto;flex:none}
.lang .ls{display:none}
.lang{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--paper);border:1px solid var(--line2);border-radius:8px;padding:3px}.lang button{font:600 13px var(--fb);border:0;background:transparent;color:var(--muted);padding:7px 12px;border-radius:6px;cursor:pointer;min-height:34px}.lang button[aria-pressed=true]{background:var(--accent);color:#fff}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
.hero{padding:26px 0 10px}
.tag{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--fb);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);border:1.5px solid var(--accent);padding:5px 10px;border-radius:4px;transform:rotate(-1.2deg);margin-bottom:16px}
.hero h1{font-size:clamp(36px,7vw,56px);font-weight:700;line-height:1.05}.hero p.sub{color:var(--muted);font-size:19px;max-width:560px;margin-top:14px}
.points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}.points li{display:flex;gap:10px;align-items:flex-start;font-size:16px}.points li::before{content:'✓';flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font:700 12px var(--fb);margin-top:1px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;list-style:none;margin:26px 0 0;padding:0}
.steps li{border-top:4px solid var(--line2);padding-top:7px;font:600 13px var(--fb);color:var(--muted)}.steps li b{display:none}.steps li.done{border-color:var(--accent);color:var(--ink)}.steps li[aria-current=step]{border-color:var(--amber);color:var(--ink)}
@media(max-width:560px){.steps li span{font-size:11.5px}}
.card{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:26px;margin:20px 0;box-shadow:5px 5px 0 var(--ink)}
.card>h2{font-size:27px}.card>.lede{color:var(--muted);margin:8px 0 20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid .wide{grid-column:1/-1}
@media(max-width:600px){.grid{grid-template-columns:1fr}.card{padding:20px;box-shadow:3px 3px 0 var(--ink)}}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}.f>label,.f>.lab{font:700 14px var(--fb)}.f .h{font-size:13px;color:var(--muted);margin-top:-2px}
input,select,textarea{font:inherit;color:var(--ink);background:#FFFFFF;border:1.5px solid var(--line2);border-radius:8px;padding:12px 13px;width:100%;min-width:0}
textarea{resize:vertical;min-height:140px;line-height:1.45}input:focus,select:focus,textarea:focus{outline:3px solid var(--amber);outline-offset:0;border-color:var(--ink)}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--bad);background:#FFF8F6}
.err{color:var(--bad);font-size:14px;font-weight:600}.err:empty{display:none}.err.show{margin-top:4px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--bg);border:1.5px solid var(--line2);border-radius:10px;padding:4px}
.seg button{font:600 14px var(--fb);border:0;background:transparent;color:var(--muted);padding:11px 8px;border-radius:7px;cursor:pointer}
.seg button[aria-checked=true]{background:var(--ink);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px var(--fb);border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:12px 20px;border-radius:8px;cursor:pointer;text-decoration:none;min-height:46px}
.btn:hover{background:var(--bg)}.btn.pri{background:var(--accent);border-color:var(--accent-d);color:#fff;box-shadow:0 3px 0 var(--accent-d)}.btn.pri:hover{background:var(--accent-d)}.btn.pri:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-d)}
.btn.sm{padding:8px 16px;min-height:38px;font-size:14px}.btn.big{min-height:54px;padding:14px 26px;font-size:16px}.btn[disabled],.btn.busy{opacity:.6;pointer-events:none}
.link{background:none;border:0;color:var(--accent);font:600 15px var(--fb);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.end{justify-content:flex-end}.sp{flex:1}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.note{font-size:13.5px;color:var(--muted)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.opts label{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line2);border-radius:8px;padding:10px 12px;font:600 14px var(--fb);cursor:pointer;background:#FFFFFF}.opts input{width:18px;height:18px;padding:0;accent-color:var(--accent);flex:none}.opts label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.prompt{font:13px/1.5 var(--mono);background:var(--bg);border:1.5px solid var(--line2);border-radius:8px;padding:14px;max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.how{margin:10px 0 14px;padding-left:20px}.how li{margin-bottom:4px}
details.more{border:1.5px solid var(--line);border-radius:8px;padding:12px 16px;margin-top:16px}details.more summary{cursor:pointer;font-weight:700}details.more[open] summary{margin-bottom:12px}
.warnbox{background:var(--amber-soft);color:var(--warn);border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;margin-top:12px}.warnbox:empty{display:none}
.pill{font:700 12px var(--fb);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:4px;white-space:nowrap;border:1.5px solid currentColor}
.t-good{background:var(--good-bg);color:var(--good)}.t-warn{background:var(--warn-bg);color:var(--warn)}.t-bad{background:var(--bad-bg);color:var(--bad)}.t-neutral{background:var(--neutral-bg);color:var(--neutral)}
/* tabs / panels */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg);border:1.5px solid var(--line2);border-radius:10px;padding:4px;margin-bottom:16px}.tabs button{font:600 14px var(--fb);border:0;background:transparent;color:var(--muted);padding:11px 6px;border-radius:7px;cursor:pointer}.tabs button[aria-selected=true]{background:var(--ink);color:#fff}
@media(max-width:520px){.tabs{grid-template-columns:1fr}}
.panel{min-width:0}.ph{font:700 18px var(--fh);margin:0 0 6px}.biz{margin-top:26px;padding-top:20px;border-top:1.5px dashed var(--line2)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.drop{margin:10px 0}
.info{font-size:14px;color:var(--good);font-weight:700;margin-top:8px}.info:empty{display:none}
/* overview + cards */
.ov-light{display:flex;gap:14px;align-items:center;margin:14px 0 6px}.dot{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 24px var(--fb)}.dot.good{background:var(--good)}.dot.warn{background:#C98A10}.dot.bad{background:var(--bad)}
.ov-title{font:700 25px var(--fh);line-height:1.15}.ov-sent{font-size:18px;margin:8px 0 14px}
h3.sub,h4.sub{font:700 12.5px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.ov-steps{display:grid;gap:10px;margin:10px 0 0;padding:0;list-style:none}.ov-steps li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;background:var(--bg);border-radius:8px;padding:12px}.ov-steps li b.n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:700 13px var(--fb)}
.ov-steps h4{margin:0 0 2px;font:700 15px var(--fb);letter-spacing:0;text-transform:none;color:var(--ink)}.assume{font-size:13px;color:var(--muted);margin-top:14px}.assume .link{font-size:13px;padding:0 0 0 6px}
.camp{border:1.5px solid var(--ink);border-radius:var(--r);padding:20px;margin:16px 0;background:var(--paper)}
.camp-h{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.camp-h h3{font-size:20px;overflow-wrap:anywhere}.camp .head{margin-top:10px;font-size:17px}.conf{font-size:12.5px;color:var(--muted)}
.camp .money{font-size:15px;color:var(--muted);margin-top:8px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}@media(max-width:600px){.nums{grid-template-columns:1fr 1fr}}
.nums div{background:var(--bg);border-radius:8px;padding:10px 12px}.nums b{display:block;font:700 16px var(--mono)}.nums span{font-size:12px;color:var(--muted)}
.funnel{display:grid;gap:9px;margin:12px 0}.st{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.5fr) auto;gap:10px;align-items:center;font-size:14px}
@media(max-width:600px){.st{grid-template-columns:1fr auto}.st .bar{grid-column:1/-1}}
.bar{position:relative;height:9px;background:var(--bg);border:1px solid var(--line);border-radius:99px;overflow:visible}.bar i{position:absolute;left:0;top:-1px;bottom:-1px;border-radius:99px}.bar em{position:absolute;left:66.6%;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.45}
.bar.good i{background:var(--good)}.bar.ok i{background:#C98A10}.bar.bad i{background:var(--bad)}.st .v{font:600 13px var(--mono);color:var(--muted);white-space:nowrap}.st .tip{cursor:help;border-bottom:1px dotted var(--muted)}
.camp h4,.audit h4{font:700 12.5px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.camp ul,.camp ol{margin:0;padding-left:20px;display:grid;gap:7px}.camp li{padding-left:2px}
.flag{font-size:14px;border-radius:8px;padding:9px 12px;margin-top:8px;font-weight:600}.flag.bad{background:var(--bad-bg);color:var(--bad)}.flag.warn{background:var(--warn-bg);color:var(--warn)}
/* website review */
.audit{background:var(--paper);border:1.5px dashed var(--line2);border-radius:var(--r);padding:22px;margin:18px 0}.audit h3{font-size:20px}
.score{display:flex;gap:18px;align-items:center;margin:12px 0}.ring{display:grid;place-items:center;align-content:center;width:92px;height:92px;border-radius:50%;border:8px solid var(--line2);flex:none}.ring b{font:700 30px/1 var(--fh)}.ring span{font-size:11px;color:var(--muted)}
.ring.good{border-color:var(--good)}.ring.warn{border-color:#C98A10}.ring.bad{border-color:var(--bad)}
.cats{display:grid;gap:8px;margin:10px 0}.cat{display:grid;grid-template-columns:170px 1fr 34px;gap:10px;align-items:center;font-size:14px}.cat b{font:700 13px var(--mono);text-align:right}@media(max-width:600px){.cat{grid-template-columns:120px 1fr 30px}}
.cklist{display:grid;gap:10px}.ck{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:15px}.ck .ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 12px var(--fb);margin-top:1px}
.ck.pass .ic{background:var(--good-bg);color:var(--good)}.ck.warn .ic{background:var(--warn-bg);color:var(--warn)}.ck.fail .ic{background:var(--bad-bg);color:var(--bad)}.ck.info .ic{background:var(--neutral-bg);color:var(--neutral)}
.ck .note{margin-top:2px}.fixl{font-size:14px;margin-top:3px}.fixme{display:inline-block;margin-top:6px;font-size:13px;font-weight:700}
.lockline{margin-top:12px}
.cta{background:var(--ink);color:#fff;border-radius:var(--r);padding:26px;margin-top:20px;text-align:center}.cta h3{font-size:23px;color:#fff}.cta p{color:#CFE0DA;margin:8px 0 16px}.cta .btn.pri{border-color:#fff;box-shadow:0 3px 0 #000}
.btn.wa{background:#157A3B;border-color:#0F6330;color:#fff;box-shadow:0 3px 0 #0F6330}.btn.wa:hover{background:#0F6330;color:#fff}
.ok-msg{background:var(--good-bg);color:var(--good);border-radius:8px;padding:12px 14px;font-weight:700}
.ft{max-width:720px;margin:36px auto 0;padding:22px 20px 40px;color:var(--muted);font-size:13.5px;border-top:1.5px solid var(--line2)}.ft a{color:var(--muted)}
.cf-ts-host{margin:6px 0}
[hidden]{display:none!important}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:8px;font-weight:600;z-index:50;max-width:90vw;text-align:center}
body.deep .hero .tag,body.deep .hero .sub,body.deep .hero .points{display:none}body.deep .hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}body.deep .hero{padding-top:6px}
button,a,input,select,label,summary{touch-action:manipulation}
/* phones */
@media(max-width:600px){
  .hd{padding:12px 16px;flex-wrap:nowrap;gap:8px}.bmark{width:32px;height:32px}.brand{gap:7px}.brand b{font-size:16.5px}.lockup{gap:8px}.x{width:11px;height:11px}.ffb{font-size:14.5px;gap:5px}.ffb img{height:18px}
  .lang{margin-left:auto;padding:2px}.lang .lf{display:none}.lang .ls{display:inline}.lang button{padding:8px 11px;font-size:13px}
  .wrap{padding:0 16px}.hero{padding-top:10px}.hero p.sub{font-size:17px}.points li{font-size:15px}.steps{margin-top:20px}
  .card{margin:14px 0;padding:18px}.card>h2{font-size:23px}.card>.lede{font-size:15px;margin-bottom:16px}
  .seg{grid-auto-flow:row}.seg button{min-height:48px;text-align:left;padding:12px 14px}
  input,select,textarea{min-height:48px;padding:13px}textarea{min-height:130px}
  .btn{min-height:50px}.row{flex-direction:column-reverse;align-items:stretch}.row .sp{display:none}.row .btn,.row .link{width:100%;text-align:center;justify-content:center}.row .btn.big{min-height:54px}
  .row.end .link{padding:12px 0}.opts label{min-height:48px}.tabs button{min-height:46px}
  .camp{padding:16px}.camp-h h3{font-size:18px}.ov-title{font-size:22px}.ov-sent{font-size:17px}.dot{width:44px;height:44px}
  .score{flex-direction:column;align-items:flex-start;gap:12px}.audit{padding:16px}.cta{padding:20px}
  .ft{padding:18px 16px 32px}
}
@media(max-width:600px){.lang button{min-height:44px}details.more summary{padding:11px 0}.assume .link{display:inline-block;min-height:44px;padding:13px 0 13px 6px}}
@media(max-width:400px){.ffb span{display:none}.brand b{font-size:16px}}
/* reports are delivered by email or WhatsApp only: nothing on this page can be printed or saved as PDF */
@media print{body>*{display:none!important}body::before{content:'This report is sent to you by email or WhatsApp.';display:block;font:16px var(--fb);padding:40px}}
@media (prefers-reduced-motion:no-preference){.step{animation:in .25s ease both}@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

.check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px;font-size:15px}.check input{width:20px;height:20px;margin-top:2px;flex:none}
.snip{background:var(--ink);color:#fff;border-radius:10px;padding:14px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;margin:10px 0}
.ap-state{font-weight:600;margin:12px 0 6px}

/* Desktop first screen: copy on the left, the free website check on the right (steps 2-4 keep the narrow column). */
@media(min-width:1024px){
  body:has(#s1:not([hidden])) .hd{max-width:1160px;padding-left:32px;padding-right:32px}
  .wrap:has(#s1:not([hidden])){max-width:1160px;padding:0 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,540px);column-gap:72px;align-items:center;min-height:calc(100vh - 140px)}
  .wrap:has(#s1:not([hidden])) .hero{grid-column:1;grid-row:1;padding:0}
  .wrap:has(#s1:not([hidden])) #s1{grid-column:2;grid-row:1;margin:0}
  .wrap:has(#s1:not([hidden])) .hero h1{font-size:clamp(52px,5.4vw,76px)}
  .wrap:has(#s1:not([hidden])) .hero p.sub{font-size:21px;max-width:520px}
  .wrap:has(#s1:not([hidden])) .points li{font-size:17px}
}
@media(min-width:1024px){
  /* Steps 2-4 and the report: a wider column so cards and tables are not squeezed. */
  body:not(:has(#s1:not([hidden]))) .hd,.wrap:not(:has(#s1:not([hidden]))){max-width:920px}
  .wrap:not(:has(#s1:not([hidden]))) .hero p.sub{max-width:640px}
}

/* First screen, wide: fuller layout. Hero top-aligned with a sticky check card, then a three-card "How it works" row. */
.hw{margin:10px 0 28px}.hw h2{font-size:24px;margin-bottom:14px}
.hw-l{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hw-l li{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:4px 4px 0 var(--ink)}
.hw-l b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font:700 16px var(--fb);margin-bottom:10px}
.hw-l h3{font-size:20px;margin-bottom:6px}.hw-l p{color:var(--muted);font-size:15.5px;line-height:1.55}
.wrap:not(:has(#s1:not([hidden]))) .hw{display:none}
@media(min-width:1024px){
  body:has(#s1:not([hidden])) .hd{max-width:1280px;padding:22px 40px}
  .wrap:has(#s1:not([hidden])){max-width:1280px;padding:36px 40px 0;min-height:0;align-items:start;column-gap:88px;row-gap:48px;grid-template-columns:minmax(0,1.05fr) minmax(480px,560px)}
  .wrap:has(#s1:not([hidden])) #s1{position:sticky;top:20px}
  .wrap:has(#s1:not([hidden])) .hero h1{font-size:clamp(56px,5.6vw,84px)}
  .hw{grid-column:1/-1;grid-row:2;margin:6px 0 0}.hw-l{grid-template-columns:repeat(3,1fr);gap:22px}.hw h2{font-size:28px;margin-bottom:18px}
  body:has(#s1:not([hidden])) .ft{max-width:1280px;padding-left:40px;padding-right:40px}
}
@media(min-width:1600px){.wrap:has(#s1:not([hidden])){max-width:1360px}body:has(#s1:not([hidden])) .hd,body:has(#s1:not([hidden])) .ft{max-width:1360px}}

/* Tool feel (wide screens): a compact title, then the tool itself. No landing-page hero, no marketing row. */
@media(min-width:1024px){
  body:has(#s1:not([hidden])) .hd,body:has(#s1:not([hidden])) .ft{max-width:1040px;padding-left:32px;padding-right:32px}
  .wrap:has(#s1:not([hidden])){display:block;max-width:1040px;padding:14px 32px 0;min-height:0}
  .wrap:has(#s1:not([hidden])) .hero{padding:0}
  .wrap:has(#s1:not([hidden])) .hero .tag{display:none}
  .wrap:has(#s1:not([hidden])) .hero h1{font-size:clamp(34px,3.6vw,44px);line-height:1.1}
  .wrap:has(#s1:not([hidden])) .hero p.sub{font-size:18px;max-width:none;margin-top:8px}
  .wrap:has(#s1:not([hidden])) .points{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 24px;margin:16px 0 0}
  .wrap:has(#s1:not([hidden])) .points li{font-size:14.5px;margin:0}
  .wrap:has(#s1:not([hidden])) .steps{margin-top:18px}
  .wrap:has(#s1:not([hidden])) #s1{position:static;grid-column:auto;margin:16px 0 0;padding:28px 30px}
  .wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1fr 1fr;gap:18px 24px}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.f:first-child{grid-column:1/-1}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.f:first-child input{min-height:60px;font-size:19px}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.wide{grid-column:auto}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.row{grid-column:1/-1}
  .wrap:has(#s1:not([hidden])) .hw{display:none}
}

/* Tool layout (wide): same idea as PageSpeed Insights and Ahrefs checkers. The address box and the button share one row at the top,
   options sit under it, and the rest of the page is for results. Benefits become a quiet line below. */
@media(min-width:1024px){
  .wrap:has(#s1:not([hidden])){display:flex;flex-direction:column;padding-top:8px}
  .wrap:has(#s1:not([hidden])) .hero{display:contents}
  .wrap:has(#s1:not([hidden])) .hero h1{order:1;font-size:clamp(30px,2.8vw,38px)}
  .wrap:has(#s1:not([hidden])) .hero p.sub{order:2;font-size:17px;margin:6px 0 0}
  .wrap:has(#s1:not([hidden])) .steps{order:3;margin:18px 0 0}
  .wrap:has(#s1:not([hidden])) #s1{order:4;margin:14px 0 0;padding:22px 24px;box-shadow:none;border-width:1.5px}
  .wrap:has(#s1:not([hidden])) .points{order:5;margin:22px 0 0;opacity:.9}
  .wrap:has(#s1:not([hidden])) #s1>h2,.wrap:has(#s1:not([hidden])) #s1>.lede{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1fr 1fr auto;gap:16px 16px;align-items:end}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.f:first-child{grid-column:1/3;grid-row:1}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.f:first-child input{min-height:58px;font-size:18px}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.row{display:contents}
  .wrap:has(#s1:not([hidden])) #s1 #go1{grid-column:3;grid-row:1;min-height:58px;padding:0 30px;white-space:nowrap}
  .wrap:has(#s1:not([hidden])) #s1 #demo{grid-column:3;grid-row:2;justify-self:end;align-self:center;text-align:right}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.f:nth-child(2){grid-column:1;grid-row:2}
  .wrap:has(#s1:not([hidden])) #s1 .grid>.f:nth-child(3){grid-column:2;grid-row:2}
}
@media(min-width:1024px){
  body:has(#s1:not([hidden])) .hd,body:has(#s1:not([hidden])) .ft{max-width:1160px}
  .wrap:has(#s1:not([hidden])){max-width:1160px;row-gap:0}
  .wrap:has(#s1:not([hidden])) .hero p.sub{margin-top:6px}
  .wrap:has(#s1:not([hidden])) .steps{margin-top:16px}
  .wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1.1fr 1fr 260px;align-items:start}
  .wrap:has(#s1:not([hidden])) #s1 #go1{align-self:end}
  .wrap:has(#s1:not([hidden])) #s1 #demo{align-self:end;padding-bottom:14px}
  .wrap:has(#s1:not([hidden])) #s1 .seg button{white-space:nowrap}
}
@media(min-width:1024px){
  .wrap:has(#s1:not([hidden])) .steps{align-self:stretch;width:100%}
  .wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1.25fr 1fr 230px}
  .wrap:has(#s1:not([hidden])) #s1 .seg button{padding-left:12px;padding-right:12px}
  .wrap:has(#s1:not([hidden])) #s1 #demo{white-space:nowrap;font-size:14.5px}
}
@media(min-width:1024px){
  .wrap:has(#s1:not([hidden])) #s1 #demo{grid-column:1/-1;grid-row:3;justify-self:start;align-self:center;padding:0;margin-top:2px}
  .wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1.2fr 1fr 230px}
}
@media(min-width:1024px){
  .wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1fr 1fr 230px}
  .wrap:has(#s1:not([hidden])) #s1 .seg button{white-space:normal;padding-left:8px;padding-right:8px;min-width:0}
}

/* the footer stays at the bottom of short screens instead of leaving a blank gap under the tool */
body{min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto}.ft{width:100%}
@media(min-width:1024px){.wrap:has(#s1:not([hidden])) .points{gap:8px 18px}.wrap:has(#s1:not([hidden])) .points li{white-space:nowrap}}
.hd,.wrap{width:100%}
@media(min-width:1024px){.wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1.2fr 1fr 230px}}

/* option buttons: one equal size, one line, same height in both groups */
@media(min-width:601px){
  #s1 .f{display:flex;flex-direction:column}
  #s1 .seg{flex:1;align-items:stretch}
  #s1 .seg button{display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;white-space:nowrap;padding:0 10px}
}

@media(min-width:1024px){
  .wrap:has(#s1:not([hidden])){align-items:stretch}
  .wrap:has(#s1:not([hidden])) #s1 .grid{grid-template-columns:1.6fr 1fr 220px}
  .wrap:has(#s1:not([hidden])) #s1 .seg button{white-space:nowrap;padding-left:10px;padding-right:10px}
}
@media(min-width:1024px) and (max-width:1279px){
  .wrap:has(#s1:not([hidden])) #s1 .seg button{white-space:normal;line-height:1.2;padding-left:6px;padding-right:6px}
}

/* connect your ad account */
.cx{background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:var(--r);padding:16px 18px;margin:4px 0 18px}
.cx-h{display:grid;gap:4px;margin-bottom:12px}.cx-h b{font:700 18px var(--fh)}.cx-h span{color:var(--muted);font-size:14.5px}
.cx .f{margin-bottom:10px}.cx select{width:100%;min-height:48px}.cx .info,.cx .err{margin-top:8px}.cx .note{margin-top:10px}

/* example result (step 1): shows what the tool gives back and fills the space under the form on wide screens; flat colours only */
.pv{margin:22px 0 4px}.wrap:not(:has(#s1:not([hidden]))) .pv{display:none}
.pv-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}.pv-top h2{font-size:22px}
.pv-tag{font:700 11px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-d);background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:3px 8px}
.pv-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pv-c{background:var(--paper);border:1.5px solid var(--line2);border-radius:var(--r);padding:20px}
.pv-c h3{font:700 12.5px var(--fb);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:14px}
.pv-score{display:flex;align-items:center;gap:16px}.pv-ring{flex:none}.pv-score p{font-size:15.5px;line-height:1.5}
.pv-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}.pv-l li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.pv-l i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--fb);font-style:normal;margin-top:1px}
.pv-l i.b{background:var(--bad-bg);color:var(--bad)}.pv-l i.w{background:var(--warn-bg);color:var(--warn)}.pv-l i.g{background:var(--good-bg);color:var(--good)}
.pv-l .pill{flex:none;min-width:54px;text-align:center}
@media(max-width:900px){.pv-g{grid-template-columns:1fr}}
@media(max-width:700px){.pv{display:none}}
@media(min-width:1024px){.wrap:has(#s1:not([hidden])) .pv{order:5;margin-top:28px}.wrap:has(#s1:not([hidden])) .points{order:6}}
/* wide screens: use the room. These come last so they beat the earlier fixed 1160px widths. */
@media(min-width:1500px){.wrap:has(#s1:not([hidden])){max-width:1360px}body:has(#s1:not([hidden])) .hd,body:has(#s1:not([hidden])) .ft{max-width:1360px}}
/* the footer rule lines up with the content above it, not with the padded box */
.ft{border-top:0;position:relative}.ft::before{content:'';position:absolute;top:0;left:20px;right:20px;border-top:1.5px solid var(--line2)}
@media(max-width:600px){.ft::before{left:16px;right:16px}}
@media(min-width:1024px){body:has(#s1:not([hidden])) .ft::before{left:32px;right:32px}body:not(:has(#s1:not([hidden]))) .ft::before{left:20px;right:20px}}