/* Heat Map Scan landing page (/heat-map-scan/). Form, screenshots, tour.
   Loaded after the site chrome (styles.css + 9d.css), so it uses the 9D tokens. */
.hms *{box-sizing:border-box}
.hms{font-family:var(--sans);color:var(--brown);background:#fff}
.hms h1,.hms h2,.hms h3{font-family:var(--disp);letter-spacing:-.02em;margin:0}
.hms p{margin:0}
.hms .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.hms .eyebrow{display:inline-block;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.hms .btn-go{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;border:0;border-radius:12px;padding:16px 26px;font:700 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.hms .btn-go:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(244,97,34,.7)}
.hms .btn-ghost{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font:600 15px/1 var(--sans);padding:16px 8px;opacity:.85}


/* screenshots from the tool */
.shot{margin:0;border-radius:14px;overflow:hidden;background:#0b1020;box-shadow:0 30px 60px -30px rgba(20,20,42,.55),0 0 0 1px rgba(20,20,42,.08)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font:500 12.5px/1.4 var(--sans);color:rgba(255,255,255,.7);padding:10px 14px;background:#11152a}

/* ---------- the request form ---------- */
.hms-form{background:#fff;color:var(--brown);border-radius:18px;padding:clamp(20px,3vw,32px);box-shadow:0 30px 70px -30px rgba(20,20,42,.45),0 0 0 1px rgba(20,20,42,.06)}
.hms-form h3{font-size:24px;margin-bottom:4px}
.hms-form .sub{font-size:14.5px;color:#6b5a52;margin-bottom:18px}
.hms-form fieldset{border:0;padding:0;margin:0 0 18px}
.hms-form legend{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:12px;padding:0}
.hms-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.hms-form .f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.hms-form label{font:600 14px/1.3 var(--sans)}
.hms-form .opt{font-weight:400;color:#8a7a72}
.hms-form .hint{font-size:12.5px;color:#8a7a72;line-height:1.4}
.hms-form input,.hms-form select{width:100%;font:400 16px/1.3 var(--sans);color:var(--brown);background:#fbf8f6;border:1px solid #e3d6cf;border-radius:10px;padding:12px 13px;transition:border-color .15s,box-shadow .15s}
.hms-form input:focus,.hms-form select:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,97,34,.18);background:#fff}
.hms-form .q{margin-bottom:16px}
.hms-form .q > p{font:600 15px/1.35 var(--sans);margin-bottom:8px}
.hms-form .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hms-form .choice{position:relative;display:flex;gap:10px;align-items:flex-start;border:1.5px solid #e3d6cf;border-radius:12px;padding:12px 13px;cursor:pointer;background:#fbf8f6;font:500 14px/1.35 var(--sans);transition:border-color .15s,background .15s}
.hms-form .choice input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--orange);padding:0}
.hms-form .choice small{display:block;font-weight:400;color:#8a7a72;margin-top:2px}
.hms-form .choice:has(input:checked){border-color:var(--orange);background:#fff5f0}
.hms-form .submit{width:100%;justify-content:center;margin-top:6px;font-size:17px;padding:18px}
.hms-form .fine{font-size:12.5px;color:#8a7a72;text-align:center;margin-top:10px}
.hms-form .hp{position:absolute;left:-9999px;top:-9999px}
@media (max-width:620px){.hms-form .row,.hms-form .choices{grid-template-columns:1fr}}

/* result + error */
.hms-result{display:none}
.hms-result.on{display:block}
.hms-result .ok{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#1f7a34;margin-bottom:16px}
.hms-result h3{font-size:26px;margin-bottom:8px}
.hms-result p{font-size:16px;line-height:1.6;color:#5b4a42;margin-top:8px}
.hms-form .err{color:#c0341d;font-size:14.5px;margin-top:12px;text-align:center}
.hms-form .cf-turnstile{margin:4px 0 10px;min-height:65px}

/* page layout: dark, scroll-through tour */
.b{background:var(--navy);color:#fff}
.b h1{font-size:clamp(34px,5vw,62px);line-height:1.04;font-weight:800;color:#fff;max-width:900px;margin:14px auto 0}
.b h1 span,.b h2 span{color:var(--orange)}
.b h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:800;color:#fff;margin:10px 0 12px}
.b .lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,.75);max-width:680px}
.b-hero{padding:clamp(48px,6vw,90px) 0 0;text-align:center;background:radial-gradient(1200px 500px at 50% 0%,rgba(244,97,34,.18),transparent 70%)}
.b-hero .lead{margin:18px auto 0}
.b-hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin-top:28px}
.b-hero__shot{margin:48px auto 0;max-width:1100px}
.b-hero__shot .shot{box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
.b-tour{padding:var(--sy) 0}
.panels{margin-top:48px;display:flex;flex-direction:column;gap:clamp(56px,7vw,96px)}
.panel{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.panel.flip{grid-template-columns:1fr 1.5fr}
.panel.flip > .shot{order:2}
.panel .shot{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.panel__txt .num{font:800 14px/1 var(--disp);color:var(--orange);letter-spacing:.1em}
.panel__txt h3{font-size:clamp(24px,2.6vw,32px);color:#fff;margin:10px 0 12px}
.panel__txt p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.78)}
.b-use{padding:0 0 var(--sy)}
.usesteps{list-style:none;counter-reset:u;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.14)}
.usesteps li{counter-increment:u;padding:26px 26px 0 0}
.usesteps li::before{content:counter(u,decimal-leading-zero);display:block;font:800 14px/1 var(--disp);color:var(--amber);margin-bottom:12px}
.usesteps h3{font-size:19px;color:#fff;margin-bottom:6px}
.usesteps p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.7)}
.b-req{background:#0e0e20;padding:var(--sy) 0}
.b-req__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:start}
.b-req__copy{position:sticky;top:100px}
.flow{list-style:none;padding:0;margin:24px 0 0;counter-reset:f}
.flow li{counter-increment:f;position:relative;padding:0 0 22px 52px;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.flow li::before{content:counter(f);position:absolute;left:0;top:-4px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--orange);color:var(--orange);font:800 16px/1 var(--disp)}
.flow b{color:#fff;display:block}
@media (max-width:960px){.panel,.panel.flip,.b-req__grid{grid-template-columns:1fr}.panel.flip > .shot{order:0}.usesteps{grid-template-columns:1fr}.b-req__copy{position:static}}
.panel.wide{grid-template-columns:1fr;gap:24px}
.panel.wide > .shot{order:2}
.panel.wide .panel__txt{max-width:720px}