/* surf mockup: proof map, readouts, town tool, audit form. Same tokens as the hero. */
.sec-head{text-align:center;max-width:44em;margin:0 auto}
.sec-head h2{font-size:56px;line-height:1.04}
.sec-head .l{margin:18px auto 0;max-width:36em}

/* readout blocks: big number left, label right, hairline, sample size + date underneath */
.ro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line)}
.ro{display:flex;gap:22px;align-items:flex-start;padding:26px 6px 26px 0;border-bottom:1px solid var(--line)}
.ro:nth-child(odd){padding-right:36px;border-right:1px solid var(--line)}
.ro:nth-child(even){padding-left:36px}
.ro-n{font-family:var(--d);font-weight:400;font-size:64px;line-height:.9;letter-spacing:-.04em;color:#F4F8FB;min-width:118px}
.ro-n span{font-size:.5em;color:#8EC9FF;margin-left:2px}
.ro-l{font-size:19px;line-height:1.4;color:#E4EBF0}
.ro-d{position:relative;margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted)}
.ro-i{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:4px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--muted);font:600 12px var(--b);cursor:pointer;vertical-align:1px}
.ro-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:5;width:300px;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.5;color:#DCE6ED;background:rgba(16,20,28,.96);border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow)}

/* proof map */
.proof{padding:130px 0 120px;background:var(--night);border-top:1px solid var(--line)}
.toggles{display:flex;justify-content:center;margin-top:40px}
.toggles .chips{margin-top:0}
.map-cap{text-align:center;margin-top:22px;font-size:18px;color:#E4EBF0;min-height:54px}
.map-cap b{font-family:var(--d);font-weight:400;font-size:26px;color:#8EC9FF;margin-right:4px}
.map-cap span{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
.map-wrap{position:relative;margin-top:16px;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 40% 45%,rgba(20,40,70,.35),rgba(1,3,7,0) 70%);border:1px solid var(--line)}
.map-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.map-tip{position:absolute;z-index:3;width:250px;padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none;font-size:14px;line-height:1.5;color:#C5CDD4}
.map-tip b{display:block;font-size:16px;color:#fff;margin-bottom:2px}
.map-tip span{display:block}
.map-tip em{display:block;margin-top:8px;font-style:normal;color:var(--lime);font-weight:600}
.map-foot{display:flex;justify-content:space-between;margin-top:14px;font-size:15px;color:var(--muted)}

/* "what it takes in your town" */
.town{padding:120px 0 130px;background:linear-gradient(180deg,var(--night),var(--night-2));border-top:1px solid var(--line)}
.town-card{max-width:920px;margin:48px auto 0;padding:36px 40px 34px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line)}
.town-pick{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:18px;color:#C5CDD4}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;height:52px;padding:0 44px 0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#F4F8FB;font:500 17px var(--b);cursor:pointer}
.sel::after{content:"";position:absolute;right:18px;top:22px;width:7px;height:7px;border-right:1.6px solid #9FAEBA;border-bottom:1.6px solid #9FAEBA;transform:rotate(45deg);pointer-events:none}
.sel select:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.town-out{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);min-height:150px}
.town-big{font-family:var(--d);font-weight:400;font-size:36px;line-height:1.2;letter-spacing:-.02em;color:#F4F8FB;text-wrap:balance}
.town-big b{font-weight:500;color:#8EC9FF}
.town-half{margin-top:12px;font-size:19px;color:#C5CDD4}
.town-next{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:17px;color:#C5CDD4}

/* hero: no-website option + inline hints */
.nosite{display:inline-block;margin-top:20px;padding:6px 4px;background:none;border:0;color:#AEBBC6;font:500 16px var(--b);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(174,187,198,.35);text-underline-offset:4px}
.nosite:hover{color:#fff;text-decoration-color:var(--lime)}
.bar-hint{height:0;margin:0;overflow:hidden;font-size:15px;line-height:22px;color:#FFB4B4;transition:height .3s cubic-bezier(.2,.7,.2,1),margin .3s cubic-bezier(.2,.7,.2,1)}
.bar-hint.show{height:22px;margin-top:12px}
.bar-hint.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

.link-btn{min-height:44px;padding:0 2px;background:none;border:0;color:#DCE6ED;font:600 16px var(--b);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(220,230,237,.35);text-underline-offset:4px}
.link-btn:hover{color:#fff;text-decoration-color:var(--lime)}
.go-sm{height:50px;padding:0 24px;font-size:16px}
.bar.bar-close{width:720px}

/* ---------- the audit dialog (round 29; made plainer in round 33) ----------
   Left, a first look at their homepage, filled in by the instant check while they type; right, the form. Since round 33
   it speaks the rest of the site's language: Satoshi and Instrument Sans only (no code font, no capitalised labels), the
   example card's rows and round marks, sentences instead of lists. Lime is only on the send button, and only once the
   form is ready; blue marks the one highlighted word; the old red marks problems and form errors. Built by app.js into
   <dialog id="auditForm">. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ad{--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.14);--text:#D7DEE5;--muted:#93A8B8;--dim:#7A8A9A;--ad-out:cubic-bezier(.16,1,.3,1);
  width:min(1000px,calc(100% - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border-radius:24px;
  background:rgba(10,14,22,.98);border:1px solid var(--line2);color:var(--text);font:400 16px/1.5 var(--b);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.ad[open]{animation:ad-rise .5s var(--ad-out) both}
.ad::backdrop{background:rgba(1,3,7,.75);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ad :focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}   /* quieter than the page's lime ring (round 33) */
.ad-x{position:absolute;right:14px;top:14px;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--muted);font:400 22px/1 var(--b);cursor:pointer}
.ad-x:hover{color:var(--white);border-color:var(--line2)}
.ad-body,.ad-done,.ad-fallback{position:relative}
.ad-body{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"scan form" "scan go" "scan trust"}
.ad-body[hidden],.ad-done[hidden],.ad-fallback[hidden]{display:none}
/* left: the first look */
.ad-scan{grid-area:scan;position:relative;padding:34px 34px 32px;border-right:1px solid var(--line)}
.ad-host{margin:0;font-family:var(--d);font-weight:var(--dw);font-size:30px;line-height:1.1;letter-spacing:var(--dt);color:var(--white);overflow-wrap:anywhere}
.ad-host small{display:block;margin-top:8px;font:400 15px/1.4 var(--b);letter-spacing:0;color:var(--muted)}
.ad-host small:empty{display:none}
.ad-live{margin:22px 0 10px;font-size:16px;color:var(--muted)}
.ad-live[hidden],.ad-meta[hidden],.ad-fine[hidden]{display:none}
.ad-timer{margin-left:2px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}   /* even-width digits: the timer never jitters */
.ad-big{display:flex;align-items:baseline;gap:12px;margin:24px 0 0}
.ad-big[hidden]{display:none}
.ad-big b{font-family:var(--d);font-weight:var(--dw);font-size:56px;line-height:1;letter-spacing:var(--dt);color:var(--white)}
.ad-big span{font-size:17px;line-height:1.35;color:var(--text)}
.ad-meta{margin:8px 0 0;font-size:15px;color:var(--muted)}
.ad-msg{margin:22px 0 0;font-size:17px;line-height:1.5;color:var(--white)}
.ad-msg[hidden]{display:none}
.ad-msg .link-btn{display:inline-flex;align-items:center;margin-top:6px;font-size:15px}
.ad-rows{list-style:none;margin:0;padding:0}
.ad-found{margin-top:20px}
.ad-found:empty{margin:0}
.ad-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;border-top:1px solid var(--line);font-size:16px;color:#DCE6ED}
.ad-row:last-child{border-bottom:1px solid var(--line)}
.ad-row .ic{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(255,99,99,.14);color:#FF8A8A}
.ad-row p{margin:0}
.ad-fine{margin:12px 0 0;font-size:15px;color:var(--muted)}
.ad-later{margin:22px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.ad-bench{margin-top:16px;font-size:15px;line-height:1.6;color:var(--muted)}
.ad-bench[hidden]{display:none}
.ad-bench b{color:#8EC9FF;font-weight:600}
.ad-bench small{display:block;margin-top:2px;font-size:13.5px;color:var(--dim)}
/* the scan (round 31, quietened in 33): the seven basics in plain grey text, and a faint line reading down them */
.ad-scanbox{position:relative}
.ad-row.pend{min-height:0;padding:5px 0;border:0;font-size:15px;color:var(--dim);transition:color .9s}
.ad-row.pend.lit{color:var(--text);transition-duration:.15s}
.ad-beam{position:absolute;left:-8px;right:-8px;top:0;height:1px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32) 20%,rgba(255,255,255,.32) 80%,transparent)}
/* right: the form */
.ad-form{grid-area:form;position:relative;display:flex;flex-direction:column;gap:22px;padding:34px 34px 4px}
.ad-head h2{margin:0;padding-right:44px;font-family:var(--d);font-weight:var(--dw);font-size:32px;line-height:1.08;letter-spacing:var(--dt);color:var(--white)}
.ad-head h2 em{font-style:normal;color:#8EC9FF}
.ad-sub{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.ad-lbl{display:block;margin:0 0 9px;font-size:15px;font-weight:500;color:var(--muted)}
.ad-f[hidden],.ad-more-f[hidden]{display:none}
.ad-more-f{display:flex;flex-direction:column;gap:18px}
.ad-chips{display:flex;flex-wrap:wrap;gap:8px}
.ad-chip{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;
  color:#C5CDD4;font:500 15px var(--b);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.ad-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ad-chip:hover{color:#fff}
.ad-chip:has(input:checked){background:#F1F6FA;border-color:#F1F6FA;color:#06101D}   /* as the hero's chips */
.ad-chip:has(input:focus-visible){outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.ad-field{display:block;width:100%;height:56px;padding:0 16px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--white);font:500 17px var(--b);
  transition:border-color .2s}
.ad-field::placeholder{color:#66768A}
.ad .ad-field:focus,.ad .ad-field:focus-visible{outline:none;border-color:rgba(255,255,255,.4)}
.ad-field[aria-invalid="true"]{border-color:rgba(255,99,99,.65)}
textarea.ad-field{height:170px;padding:12px 14px;font-size:15px;line-height:1.5;resize:none}
.ad-more{align-self:flex-start;min-height:44px;padding:6px 0;background:none;border:0;color:var(--muted);font:500 15px var(--b);cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(147,168,184,.4);text-underline-offset:4px}
.ad-more:hover{color:var(--white)}
.ad-err{margin:8px 0 0;font-size:15px;line-height:1.4;color:#FFB4B4}
.ad-err:empty{display:none}
.ad-go{grid-area:go;padding:18px 34px 0}
/* the send button: the hero's lime button once the form is ready; a quiet outline until then (it still works: a click
   says what's missing) */
.ad-cta,.ad-main{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;padding:0 26px;border:0;border-radius:999px;cursor:pointer;
  font:700 17px/1 var(--b);color:#0E1A02;text-shadow:0 1px 0 rgba(255,255,255,.35);text-decoration:none;background:linear-gradient(180deg,#E6FF7A 0%,#CFFB1E 48%,#AEDF00 100%);
  box-shadow:0 0 0 1px rgba(221,255,82,.45),0 8px 24px -10px rgba(200,253,3,.45),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -4px 10px rgba(70,110,0,.35);
  transition:transform .2s var(--ad-out),box-shadow .2s,background .2s,color .2s}
.ad-cta:hover,.ad-main:hover{transform:translateY(-1px)}
.ad-cta[data-ready="false"]{background:#131A24;color:#C5CDD4;text-shadow:none;box-shadow:inset 0 0 0 1px var(--line2)}
.ad-cta[data-ready="false"]:hover{transform:none;color:#fff}
.ad-cta svg{width:18px;height:18px}
.ad-trust{grid-area:trust;align-self:start;margin:0;padding:14px 34px 30px;font-size:15px;line-height:1.55;color:var(--muted)}
/* done and fallback replace the body */
.ad-done,.ad-fallback{padding:44px 44px 40px;max-width:620px}
.ad-done h2,.ad-fallback h2{margin:0;padding-right:44px;font-family:var(--d);font-weight:var(--dw);font-size:34px;line-height:1.08;letter-spacing:var(--dt);color:var(--white);outline:none}
.ad-done p,.ad-fallback p{margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--text)}
.ad-done .ad-small{margin-top:22px;font-size:15px;color:var(--muted)}
.ad-done .ad-small a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.ad-fallback .ad-lbl{margin-top:22px}
.ad-fb-acts{display:flex;gap:10px;margin-top:16px}
.ad-fb-acts a{flex:1}
.ad-ghost{display:flex;align-items:center;justify-content:center;height:56px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);color:var(--white);font:600 16px var(--b);text-decoration:none}
.ad-ghost:hover{border-color:rgba(255,255,255,.4)}
@keyframes ad-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ad-tick{from{opacity:0}to{opacity:1}}
.ad-row.tick{animation:ad-tick .4s ease-out both}
/* phones and narrow screens (860px and under): one column, the first look on top, the send button stuck to the bottom */
@media (max-width:860px){
  .ad{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:22px}
  .ad-x{right:10px;top:10px}
  .ad-body{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"scan" "form" "go" "trust"}
  .ad-scan{border-right:0;border-bottom:1px solid var(--line);padding:24px 20px 20px}
  .ad-host{font-size:24px;padding-right:48px}
  .ad-big{margin-top:16px}.ad-big b{font-size:46px}
  .ad-msg{margin-top:16px;font-size:16px}
  .ad-bench,.ad-later{display:none}
  .ad-form{padding:22px 20px 0;gap:18px}
  .ad-head h2{font-size:27px;padding-right:0}
  .ad-go{position:sticky;bottom:0;z-index:3;padding:14px 20px 14px;background:linear-gradient(180deg,rgba(10,14,22,0),rgba(10,14,22,.97) 26%)}
  .ad-trust{padding:6px 20px 22px}
  .ad-done,.ad-fallback{padding:34px 22px 28px}
  .ad-done h2,.ad-fallback h2{font-size:28px}
  .ad-fb-acts{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.ad,.ad *,.ad *::before,.ad *::after{animation:none!important;transition:none!important}}

/* sample-data warning: never ships */
.sample-badge{display:none}
.is-sample .sample-badge{display:flex;position:fixed;left:16px;bottom:16px;z-index:90;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font:600 14px var(--b);color:#06101D;background:#8EC9FF;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}

/* region page */
.reg-hero{padding:170px 0 30px;text-align:center}
.reg-hero h1{font-size:56px;line-height:1.05;letter-spacing:-.03em;white-space:normal}
.reg-hero .sub{white-space:normal;max-width:34em}
.crumb{font-size:15px;color:var(--muted)}
.crumb a{color:#C5CDD4}

@media (prefers-reduced-motion:reduce){.bar-hint{transition:none}.bar-hint.shake{animation:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* isometric map */
.sec-head.wide{max-width:1080px}
.sec-head.wide h2{text-wrap:balance}
.iso{position:relative;margin-top:16px;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse 60% 55% at 50% 55%,rgba(30,60,100,.32),rgba(1,3,7,0) 72%)}
.iso canvas{position:absolute;inset:0;width:100%;height:100%}
.iso-labels{position:absolute;inset:0;pointer-events:none}
.iso-lab{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;height:30px;padding:0 12px;border-radius:999px;cursor:pointer;
  font:600 13px var(--b);color:#E9EEF2;background:rgba(10,16,26,.72);border:1px solid rgba(var(--accent-rgb),.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,color .2s,border-color .2s,transform .3s var(--ease)}
.iso-lab:hover{border-color:rgb(var(--accent-rgb))}
.iso-lab.on{background:rgb(var(--accent-rgb));color:#06101D;border-color:rgb(var(--accent-rgb));transform:translate(-50%,-130%)}
.iso-next{position:absolute;transform:translate(-50%,-50%);font:500 13px var(--b);color:rgba(160,180,200,.5);white-space:nowrap}
.iso-card{position:absolute;right:20px;top:20px;width:270px;padding:16px 18px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:15px;line-height:1.5;color:#C5CDD4}
.iso-card b{display:block;font-size:18px;color:#fff;margin-right:30px}
.iso-card>span{display:block}
.iso-card p{margin-top:10px;color:#E4EBF0}
.iso-card em{font-style:normal;font-family:var(--d);font-size:26px;color:rgb(var(--accent-rgb));margin-right:4px}
.iso-den{display:block;font-size:14px;color:var(--muted)}
.iso-card a{display:inline-block;margin-top:10px;color:rgb(var(--accent-rgb));font-weight:600}
.iso-x{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#AEBBC6;font-size:18px;cursor:pointer}

/* example audits (round 21): one plain card, no glow. Three examples sit behind tabs in the card's top edge and swap
   with a blur fade; nothing slides or turns. The left column is stretched to the card's height: its headline starts at
   the card's top edge and its button ends at the card's bottom edge. */
.side h2{text-box:trim-start cap alphabetic}
.side .l{margin-top:24px}
.side-cta{align-self:flex-start;margin-top:auto}
.deck-wrap{display:flex;flex-direction:column}
.deck{position:relative;flex:1;display:flex;flex-direction:column;border-radius:20px;background:#0A0E15;border:1px solid rgba(255,255,255,.1)}
.deck-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line)}
.deck-tabs button{height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:#AEBBC6;font:500 15px var(--b);cursor:pointer;transition:background .2s,color .2s}
.deck-tabs button:hover{color:#fff}
.deck-tabs button[aria-selected="true"]{background:#F1F6FA;color:#06101D}
.deck-body{position:relative;flex:1}
.deck .card{position:absolute;top:0;left:0;right:0;min-height:100%;display:flex;flex-direction:column;padding:22px 28px 0;
  opacity:0;filter:blur(8px);visibility:hidden;transition:opacity .3s ease,filter .3s ease,visibility 0s linear .3s}
.deck .card[data-pos="0"]{opacity:1;filter:blur(0);visibility:visible;transition:opacity .45s ease .12s,filter .45s ease .12s,visibility 0s}
.deck .card .fix{margin-top:auto}
.deck .card .rows{flex:1;display:flex;flex-direction:column}   /* rows share any spare height, so no dead band */
.deck .card .rows li{flex:1 0 auto}
.sh-tag{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:var(--muted)}
.rows li.more{justify-content:center;opacity:1;color:var(--muted);font-size:15px}
.s2{padding-top:96px!important;padding-bottom:104px!important}
.s2 .rows li{height:42px}
.s2 .meter{margin-top:14px;height:4px}

/* flat dot map */
.dotmap{position:relative;margin-top:8px;width:100%;aspect-ratio:16/9}
/* home page: the map runs edge to edge, so the neighbouring states can fade off the sides */
.proof{overflow-x:clip}
.proof .dotmap.wide{width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:auto;height:700px}
.dotmap canvas{position:absolute;inset:0;width:100%;height:100%}
.dm-tip{position:absolute;z-index:3;width:max-content;max-width:240px;padding:10px 13px 11px;border-radius:12px;background:rgba(10,14,22,.86);border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;line-height:1.4;color:#C5CDD4;opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
.dm-tip.on{opacity:1;transform:none}
.dm-area{display:block;font-size:15px;font-weight:600;color:#fff}
.dm-fig{display:block;margin-top:4px;font-size:15px;color:#E4EBF0}
.dm-fig em{font-style:normal;font-family:var(--d);font-size:20px;letter-spacing:-.02em;color:rgb(var(--accent-rgb));margin-right:2px}
.dm-den{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.dm-tip i{display:block;margin-top:8px;font-style:normal;font-size:13px;color:rgb(var(--accent-rgb));font-weight:600}
.chip[hidden]{display:none}
.ro-n .u{font-size:.3em;margin-left:6px;color:#8EC9FF;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.dm-tip{transition:none}.deck .card,.deck .card>*{transition:none}.dm-tip{animation:none}}

/* ---------- how it works: four panels riding one wave ---------- */
.s4{padding:120px 0 140px!important}
.flow-head h2{font-size:80px;line-height:1.02}                 /* two lines across the full width (round 23) */
.flow-head h2 .acc{color:var(--lime)}
.flow-head .l{max-width:43em;margin-top:28px;font-size:21px;line-height:1.6;color:#A7B6C2}
.flow{position:relative;margin-top:30px;padding-top:170px}
.flow-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flow-line path{fill:none;stroke-linecap:round}
.fl-main{stroke-width:2.5}
.fl-glow{stroke-width:7;opacity:.55}
.stops{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;position:relative}
.stop{position:relative;margin-top:calc((3 - var(--rise)) * 48px)}
.stop .node{position:absolute;left:50%;top:-94px;width:32px;height:32px;margin-left:-16px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--d);font-size:14px;font-weight:600;color:#fff;background:#07101C;border:1.5px solid #59B8FF;box-shadow:0 0 18px -2px rgba(0,153,255,.6);z-index:2}
.stop .node::after{content:"";position:absolute;left:50%;top:calc(100% + 6px);height:50px;border-left:1.5px dashed rgba(89,184,255,.35)}
.pane{position:relative;height:100%;padding:20px 20px 26px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) ,#080C13;
  border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
.pane h3{margin-top:22px;font-family:var(--d);font-weight:500;font-size:26px;letter-spacing:-.03em;color:#fff}
.pane p{margin-top:10px;font-size:16px;line-height:1.55;color:#AFC0CD}
.stop.now .node{background:rgb(var(--accent-rgb));border-color:rgb(var(--accent-rgb));color:#0E1A02;box-shadow:0 0 0 6px rgba(var(--accent-rgb),.12),0 0 26px rgba(var(--accent-rgb),.55)}
.stop.now .node::after{border-left-color:rgba(var(--accent-rgb),.45)}
.stop.now .pane{border-color:rgba(var(--accent-rgb),.32);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.06),0 0 50px -16px rgba(var(--accent-rgb),.4),0 30px 60px -40px rgba(0,0,0,.9)}
.ongoing{position:relative;margin-top:10px;display:inline-flex;font-family:var(--b);letter-spacing:0;align-items:center;gap:7px;padding:4px 10px 4px 9px;border-radius:999px;font-size:12px;font-weight:600;
  color:rgb(var(--accent-rgb));background:rgba(8,12,19,.85);border:1px solid rgba(var(--accent-rgb),.35)}
.ongoing::before{content:"";width:6px;height:6px;border-radius:50%;background:rgb(var(--accent-rgb));animation:ongo calc(2.4s * var(--fs, 1)) ease-in-out infinite}
@keyframes ongo{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}60%{box-shadow:0 0 0 6px rgba(var(--accent-rgb),0)}}

/* the little pictures */
.vig{position:relative;height:138px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.vig-audit{padding:16px 16px 0}
.mr{display:flex;align-items:center;gap:10px;height:22px;margin-bottom:6px}
.mr i{flex:none;width:14px;height:14px;border-radius:50%;display:grid;place-items:center}
.mr i::after{content:"";width:6px;height:6px;border-radius:50%}
.mr i.no{background:rgba(255,92,92,.16)} .mr i.no::after{background:#FF6B6B}
.mr i.ok{background:rgba(89,184,255,.16)} .mr i.ok::after{background:#59B8FF}
.mr b{height:7px;border-radius:4px;background:rgba(255,255,255,.14)}
.mr.fixr{margin:8px -16px 0;padding:0 16px;height:34px;background:rgba(var(--accent-rgb),.07);border-top:1px solid rgba(255,255,255,.06)}
.mr.fixr span{font-size:12px;font-weight:700;color:rgb(var(--accent-rgb))}
.mr.fixr b{background:rgba(255,255,255,.22)}
.scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,rgba(89,184,255,0),rgba(89,184,255,.14) 80%,rgba(89,184,255,.5));opacity:0}
.vig-build{padding:0}
.mb-bar{display:flex;gap:5px;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.06)}
.mb-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.mb-page{padding:10px 12px;display:grid;gap:7px}
.mb-page b{display:block;border-radius:4px;background:rgba(255,255,255,.1)}
.mb-nav{height:7px;width:40%}
.mb-hero{height:18px;width:78%;background:rgba(255,255,255,.17)!important}
.mb-cta{height:10px;width:28%;background:rgb(var(--accent-rgb))!important;opacity:.9}
.mb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mb-cards b{height:22px}
.mb-chip{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;color:#06101D;background:#8EC9FF}
.vig-live{display:grid;place-items:center;align-content:center;gap:14px}
.vig-live .url{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:13px;color:#DCE6ED;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.vig-live .url svg{width:12px;height:12px;color:#59B8FF}
.sw{position:relative;width:54px;height:30px;border-radius:999px;background:rgba(var(--accent-rgb),.9);box-shadow:0 0 22px -4px rgba(var(--accent-rgb),.6)}
.sw .knob{position:absolute;top:3px;left:27px;width:24px;height:24px;border-radius:50%;background:#fff}
.sw-l{position:absolute;bottom:12px;right:14px;font-size:12px;font-weight:700;color:rgb(var(--accent-rgb))}
.vig-manage{padding:14px 16px;display:grid;align-content:center;gap:10px}
.ck{display:flex;align-items:center;gap:10px;font-size:13px;color:#DCE6ED}
.ck i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#0E1A02;background:rgb(var(--accent-rgb))}
.ck i svg{width:12px;height:12px}

/* one orchestrated reveal: the line draws, each node lands, its panel rises. --fs stretches every timing below
   (round 23: Ekam asked for 75% slower, read as 1.75x as long) */
.flow{--fs:1.75}
.flow.fl-still,.flow.fl-still *,.flow.fl-still *::before,.flow.fl-still *::after{transition:none!important}
.flow.fl-armed .fl-main,.flow.fl-armed .fl-glow{transition:stroke-dashoffset calc(1.9s * var(--fs)) cubic-bezier(.45,0,.25,1)}
.flow.fl-armed .stop .node{transform:scale(0);transition:transform calc(.45s * var(--fs)) cubic-bezier(.2,1.6,.4,1)}
.flow.fl-armed .stop .pane{opacity:0;transform:translateY(18px);transition:opacity calc(.6s * var(--fs)) ease,transform calc(.7s * var(--fs)) cubic-bezier(.2,.8,.2,1)}
.flow.fl-armed .stop .node::after{opacity:0;transition:opacity calc(.4s * var(--fs)) ease}
.flow.fl-armed .stop .node::after{transition-delay:inherit}
.flow.fl-armed .stop:nth-child(1) :is(.node,.pane){transition-delay:calc(.25s * var(--fs))}.flow.fl-armed .stop:nth-child(2) :is(.node,.pane){transition-delay:calc(.7s * var(--fs))}
.flow.fl-armed .stop:nth-child(3) :is(.node,.pane){transition-delay:calc(1.15s * var(--fs))}.flow.fl-armed .stop:nth-child(4) :is(.node,.pane){transition-delay:calc(1.6s * var(--fs))}
.flow.fl-armed.fl-on .stop .node{transform:none}
.flow.fl-armed.fl-on .stop .node::after{opacity:1}
.flow.fl-armed.fl-on .stop .pane{opacity:1;transform:none}
.flow.fl-on .scan{animation:scan calc(1.6s * var(--fs)) calc(1s * var(--fs)) ease-in-out}
@keyframes scan{0%{top:-30%;opacity:1}100%{top:110%;opacity:1}}
.flow.fl-armed .mb-page>*{opacity:0;transform:translateY(6px);transition:opacity calc(.4s * var(--fs)) ease,transform calc(.5s * var(--fs)) ease}
.flow.fl-armed.fl-on .mb-page>*{opacity:1;transform:none}
.flow.fl-armed.fl-on .mb-page>*:nth-child(1){transition-delay:calc(1.1s * var(--fs))}.flow.fl-armed.fl-on .mb-page>*:nth-child(2){transition-delay:calc(1.25s * var(--fs))}
.flow.fl-armed.fl-on .mb-page>*:nth-child(3){transition-delay:calc(1.4s * var(--fs))}.flow.fl-armed.fl-on .mb-page>*:nth-child(4){transition-delay:calc(1.55s * var(--fs))}
.flow.fl-armed .sw{background:rgba(255,255,255,.14);box-shadow:none;transition:background calc(.35s * var(--fs)) ease calc(2s * var(--fs)),box-shadow calc(.35s * var(--fs)) ease calc(2s * var(--fs))}
.flow.fl-armed .sw .knob{left:3px;transition:left calc(.35s * var(--fs)) cubic-bezier(.3,1.4,.5,1) calc(1.9s * var(--fs))}
.flow.fl-armed .sw-l{opacity:0;transition:opacity calc(.3s * var(--fs)) ease calc(2.2s * var(--fs))}
.flow.fl-armed.fl-on .sw{background:rgba(var(--accent-rgb),.9);box-shadow:0 0 22px -4px rgba(var(--accent-rgb),.6)}
.flow.fl-armed.fl-on .sw .knob{left:27px}
.flow.fl-armed.fl-on .sw-l{opacity:1}
.flow.fl-on .ck i{animation:tick calc(6s * var(--fs)) ease-in-out infinite}
.flow.fl-on .ck:nth-child(2) i{animation-delay:calc(.5s * var(--fs))}.flow.fl-on .ck:nth-child(3) i{animation-delay:calc(1s * var(--fs))}
@keyframes tick{0%,62%,100%{transform:none;filter:none}70%{transform:scale(.6);filter:grayscale(1) brightness(.5)}80%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.flow *{transition:none!important;animation:none!important}.ongoing::before{animation:none}}

/* ---------- phones (640px and narrower): one column, nothing wider than the screen, every control 44px to tap ----------
   The desktop design above is untouched. This is the fit-to-phone layer, not the full phone design pass (log §10). */
.pill{white-space:nowrap}   /* the nav's longer labels (round 22) must never squeeze "Free audit" onto two lines */
/* footer: every area with a page, a column per state (round 27) */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px;padding:4px 0 44px;text-align:left}
.rl-state{display:flex;flex-direction:column;gap:9px;font-size:16px;color:#D6E2EA}
.rl-state b{margin-bottom:3px;font-size:14px;font-weight:600;color:var(--muted)}
.rl-state a:hover{color:#fff}
.touch-only{display:none}
.menu-btn,.nav-menu{display:none}
@media (hover:none){.hover-only{display:none}.touch-only{display:inline}}
@media (max-width:1199px){   /* phones, and tablets until the 1,200px desktop page fits (round 34) */
  body{min-width:0}
  .c{width:auto;padding:0 18px}
  /* nav: logo, the phone number, the audit pill; the section links wait for a phone menu */
  .nav{padding:10px 10px 0}
  .nav-in{height:56px;grid-template-columns:1fr auto;gap:8px;padding:0 6px 0 8px}
  .nav.scrolled .nav-in{max-width:none;padding:0 6px 0 2px}
  .links{display:none}
  .wm{display:flex;align-items:center;min-height:44px;min-width:44px}   /* the text logo is 41px wide: still a 44px tap */
  .nav.scrolled .wm{margin-left:10px}
  .wm,.wm-foot{font-size:32px}   /* the serif "surf" (round 32) */
  .nav-r{gap:4px}
  .tel,.nav.scrolled .tel{width:44px;max-width:44px;height:44px;padding:0;justify-content:center;border-color:rgba(255,255,255,.12)}
  .tel span{display:none}
  /* the menu: the nav's links and the full number, behind one button */
  .menu-btn{display:grid;place-content:center;gap:5px;width:44px;height:44px;margin-left:2px;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;cursor:pointer}
  .menu-btn i{display:block;width:16px;height:1.5px;border-radius:2px;background:#E9EEF2;transition:transform .25s var(--ease)}
  .nav.menu-open .menu-btn i:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav.menu-open .menu-btn i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .nav.menu-open .nav-in{background:var(--glass);border-color:var(--glass-rim);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
  .nav-menu:not([hidden]){display:flex;flex-direction:column;pointer-events:auto;margin-top:8px;padding:4px 20px 8px;border-radius:24px;background:rgba(12,16,24,.95);border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .nav-menu a{display:flex;align-items:center;min-height:54px;font-family:var(--d);font-size:24px;letter-spacing:-.02em;color:#F4F8FB;border-bottom:1px solid var(--line)}
  .nav-menu a.nm-tel{border-bottom:0;font-family:var(--b);font-size:17px;font-weight:600;letter-spacing:0;color:var(--lime)}
  .pill{height:44px;padding:0 16px}
  /* hero */
  .hero{height:auto;min-height:100svh;padding:92px 0 26px;justify-content:flex-start}
  .sky{margin:auto 0}
  .bridge{height:auto;min-height:40px;padding:8px 16px 8px 14px;font-size:16px}
  h1{margin-top:20px;font-size:clamp(34px,10.2vw,44px);line-height:1.06;white-space:normal}
  .tw{display:block;text-align:center}
  .sub{margin-top:14px;white-space:normal;font-size:17px;line-height:1.5;text-wrap:balance}
  .bar{width:100%;height:auto;margin-top:24px;flex-direction:column;align-items:stretch;gap:6px;padding:6px;border-radius:26px}
  .bar.bar-close{width:100%}
  .bar .seg{padding:11px 18px 10px;min-height:64px}
  .bar .vdiv,.bar .seg-want{display:none}
  .seg input{font-size:19px}
  .bar .go{width:100%;height:56px;justify-content:center}
  .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .chip{height:44px;padding:0 15px;gap:8px;border:1px solid rgba(255,255,255,.12);background:rgba(24,28,36,.72)}
  .chip+.chip::before{display:none}
  .chip.on{border-color:#F1F6FA}
  .nosite{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:4px 6px;line-height:1.4;text-wrap:balance}
  .bar-hint.show{height:44px}
  .assure{position:static;margin-top:26px;padding:0 18px;line-height:1.5}
  /* headings and body */
  h2,.sec-head h2,.flow-head h2,.s3 h2{font-size:clamp(30px,8.8vw,38px);line-height:1.08}
  .l{font-size:17px}
  /* audit */
  .s2{padding-top:72px!important;padding-bottom:76px!important;overflow-x:clip}
  .s2 .c{display:block}
  .side{position:static}
  .deck-wrap{margin-top:34px}
  .sheet,.deck .card{padding:20px 18px 0}
  .fix{margin-left:-18px;margin-right:-18px;padding:16px 18px 18px}
  .deck-tabs{padding:8px}
  .deck-tabs button{flex:1;height:44px;padding:0 8px}
  .side-cta{align-self:stretch;justify-content:center;margin-top:0}
  .facts{margin-bottom:24px}
  .sh-name{font-size:23px}
  .sh-score b{font-size:40px}
  .rows li,.s2 .rows li{height:auto;min-height:44px;padding:9px 0;line-height:1.35}
  .rows li em{padding-left:12px}
  /* proof map */
  .proof{padding:80px 0 70px}
  .toggles{margin-top:26px}
  .map-cap{margin-top:18px;min-height:0;font-size:17px}
  .map-cap b{font-size:24px}
  .proof .dotmap.wide{height:min(74vw,330px)}
  .s5 .note,.map-foot span,.assure{text-wrap:balance}
  .dotmap{aspect-ratio:auto;height:min(100vw,420px)}
  .map-foot{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .map-foot a{display:inline-flex;align-items:center;min-height:44px}
  .ro-grid{grid-template-columns:1fr;margin-top:36px}
  .ro,.ro:nth-child(odd),.ro:nth-child(even){gap:16px;padding:22px 0;border-right:0}
  .ro-n{font-size:46px;min-width:88px}
  .ro-l{font-size:17px}
  .ro-i{position:relative;width:44px;height:44px;margin:-12px -10px -12px -8px;border:0;vertical-align:middle}
  .ro-i::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.18);border-radius:50%}
  .ro-tip{width:auto;max-width:calc(100vw - 36px)}
  /* town tool */
  .town{padding:80px 0 86px}
  .town-card{margin-top:30px;padding:22px 18px 20px;border-radius:20px}
  .town-pick{gap:8px}
  .sel{max-width:100%}
  .sel select{height:48px;max-width:100%;font-size:17px}
  .sel::after{top:20px}
  .town-out{margin-top:22px;padding-top:20px;min-height:0}
  .town-big{font-size:clamp(24px,7vw,30px)}
  .town-half{font-size:17px}
  .town-next{flex-direction:column;align-items:stretch;gap:14px}
  .town-next .go{justify-content:center}
  /* who it's for */
  .s3{padding:78px 0 86px}
  .marq{margin-top:34px}
  .track span{font-size:17px;padding:9px 18px}
  /* how it works: the four panels stack; the wave line is a wide-screen thing */
  .s4{padding:78px 0 90px!important}
  .flow-head{display:block}
  .flow-head .l{margin-top:18px;font-size:18px}
  .flow-head h2 br{display:none}
  .flow{margin-top:34px;padding-top:0}
  .flow-line{display:none}
  .stops{grid-template-columns:1fr;gap:22px}
  .stop{margin-top:0;padding-top:16px}
  .stop .node{left:20px;top:0;margin-left:0}
  .stop .node::after{display:none}
  /* close and footer */
  .s5{padding:96px 0 0}
  .s5 h2{font-size:clamp(36px,10.5vw,44px)}
  .foot{margin-top:84px;flex-direction:column;gap:26px}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
  .cols div{gap:0}
  .areas{grid-template-columns:1fr 1fr;gap:22px 20px;padding-bottom:30px}
  .rl-state{gap:0}
  .rl-state b{margin-bottom:2px}
  .rl-state a{display:flex;align-items:center;min-height:44px}
  .cols a{display:flex;align-items:center;min-height:44px}
  .legal{flex-direction:column;gap:4px;padding-bottom:28px}
  .legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  /* area pages */
  .reg-hero{padding:110px 0 24px}
  .reg-hero h1{font-size:clamp(32px,9.4vw,42px)}
  .crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
}
@media (max-width:380px){
  .bridge{font-size:15px;padding:8px 12px}
  .pill{padding:0 14px}
}