/* /request-demo — the QR landing page. Mobile-first (320–430px is the primary case): the enquiry
   form is the first thing on the page and nothing above it needs scrolling past.
   Accents are var(--teal) tokens only — no accent literals (brand 4.2 FIX-02). */
.request-demo-page{background:var(--paper,var(--cloud))}

/* Hero ------------------------------------------------------------------------------------- */
.rd-hero{padding:24px 0 4px}
.rd-hero .eyebrow{margin-bottom:12px}
.rd-hero h1{font-size:clamp(30px,8.2vw,58px);letter-spacing:-1.3px;line-height:1.06;overflow-wrap:break-word}
.rd-lead{margin-top:12px;max-width:62ch;font-size:16px;line-height:1.6}

/* Form panel ------------------------------------------------------------------------------- */
.rd-form-section{padding:20px 0 6px}
.rd-panel{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:20px 16px 22px;max-width:700px;box-shadow:0 16px 34px rgb(11 31 51 / 7%)}
.rd-panel h2{font-size:clamp(22px,5.6vw,32px);letter-spacing:-.7px;line-height:1.1}
.rd-form{margin-top:16px}
.rd-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.rd-form label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy);margin-bottom:14px}
.rd-form input,.rd-form select,.rd-form textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--navy);font-size:16px;line-height:1.4;font-weight:400;letter-spacing:0}
.rd-form input:hover,.rd-form select:hover,.rd-form textarea:hover{border-color:color-mix(in srgb,var(--teal) 32%,var(--line))}
.rd-form input:focus-visible,.rd-form select:focus-visible,.rd-form textarea:focus-visible{border-color:var(--teal);outline:3px solid var(--teal);outline-offset:1px}
.rd-form textarea{resize:vertical;min-height:88px}
.rd-form .consent-row{display:flex;align-items:flex-start;gap:10px;font-size:12px;font-weight:400;letter-spacing:0;line-height:1.6;margin-top:4px}
.rd-form .consent-row input{width:18px;height:18px;min-width:18px;flex:0 0 18px;margin:2px 0 0;padding:0}
.rd-form .consent-row a{color:var(--teal);text-decoration:underline}
.rd-form .form-note{margin:12px 0 16px;font-size:11px;line-height:1.65;color:var(--slate)}
.rd-submit{width:100%;margin-top:2px}
.rd-form .form-status{margin-top:14px;font-size:13px;line-height:1.6;color:var(--teal);min-height:1px}
.rd-panel .direct-email{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;font-size:12px}
.rd-panel .direct-email a{color:var(--teal);text-decoration:underline;overflow-wrap:anywhere}
.rd-panel .direct-email button{border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--teal);font-size:11px;font-weight:700;padding:8px 12px;min-height:36px}

/* What happens next ------------------------------------------------------------------------ */
.rd-next{padding:30px 0 52px}
.rd-next h2{font-size:clamp(22px,5.2vw,32px);letter-spacing:-.7px;line-height:1.1}
.rd-next-lead{margin-top:12px;max-width:72ch;font-size:14px;line-height:1.65}
.rd-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:18px 0 0;padding:0;list-style:none}
.rd-steps li{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.rd-steps strong{display:block;font-size:14px;color:var(--navy);letter-spacing:-.01em}
.rd-steps p{margin-top:6px;font-size:13.5px;line-height:1.6}
.rd-next-note{margin-top:18px;max-width:72ch;font-size:12.5px;line-height:1.7}
.rd-next-note a{color:var(--teal);text-decoration:underline}

/* Wider layouts ---------------------------------------------------------------------------- */
@media(min-width:560px){
 .rd-form .rd-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .rd-form .rd-row label{margin-bottom:14px}
}
@media(min-width:840px){
 .rd-hero{padding:52px 0 6px}
 .rd-panel{max-width:760px;padding:30px 32px 30px}
 .rd-form-section{padding:26px 0 10px}
 .rd-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
 .rd-next{padding:36px 0 64px}
}
@media(min-width:1200px){
 .rd-hero{padding:62px 0 8px}
 .rd-panel{max-width:820px;padding:36px 38px 34px}
}