/* ═══════════════════════════════════════════════════════
   CricBun — Contact
   Extracted from html/cricbun-contact.html
   Body-content styles only. Chrome (root vars, body, links,
   masthead, nav, footer, focus ring) owned by global-shell.css.

   Prototype var names remapped to the global-shell scheme so
   dark theme applies:
     --p -> --paper   --m -> --muted   --c -> --cyan
     --cd -> --cyan-d --cp -> --cyan-p --gp -> --green-p
     --shadow -> --shadow-sm
   Two selectors renamed to avoid clobbering global chrome:
     .status  -> .support-status   .success -> .sent
   ═══════════════════════════════════════════════════════ */

.hero{background:var(--navy);color:var(--paper);padding:50px 0 40px}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);line-height:.94;letter-spacing:-.075em}
.hero p{font-size:.67rem;color:oklch(76% .015 230);margin-top:12px;max-width:60ch}
.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:27px}
.route{border:1px solid oklch(43% .04 238);border-radius:10px;background:oklch(31% .045 238);color:var(--paper);padding:15px;text-align:left}
.route.on{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}
.route i{display:block;margin-bottom:10px}
.route b{display:block;font-size:.63rem}
.route span{display:block;font-size:.49rem;color:oklch(72% .015 230);margin-top:3px}
.route.on span{color:oklch(35% .04 238)}
main{padding:28px 0 75px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px}
.formcard,.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.formhead{padding:18px;border-bottom:1px solid var(--line)}
.formhead h2{font-size:.9rem}
.formhead p{font-size:.54rem;color:var(--muted);margin-top:4px}
.form{padding:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.55rem;font-weight:700;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:10px;font-size:.61rem}
.field input,.field select{height:43px}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid oklch(85% .055 221);border-color:var(--cyan-d)}
.counter{text-align:right;font-size:.47rem;color:var(--muted);margin-top:4px}
.attach{border:1px dashed oklch(78% .03 236);border-radius:8px;padding:13px;text-align:center;font-size:.52rem;color:var(--muted)}
.attach input{display:none}
.submit{height:43px;border:0;border-radius:8px;background:var(--cyan-d);color:var(--paper);padding:0 15px;font-size:.58rem;font-weight:800;margin-top:15px}
.privacy{font-size:.47rem;color:var(--muted);margin-top:10px}
.panel{margin-bottom:13px}
.head{height:44px;padding:0 13px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.head h2{font-size:.7rem}
.sidebody{padding:13px}
.channel{padding:9px 0;border-bottom:1px solid var(--line)}
.channel:last-child{border:0}
.channel h3{font-size:.58rem}
.channel p{font-size:.49rem;color:var(--muted);margin-top:3px}
.response{padding:15px;background:var(--cyan-p)}
.response h3{font-size:.68rem}
.response p{font-size:.51rem;color:var(--muted);margin-top:5px}
.support-status{display:flex;align-items:center;gap:7px;font-size:.53rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
@media(max-width:780px){.routes{grid-template-columns:1fr 1fr}.layout{grid-template-columns:1fr}.aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:550px){.hero{padding:36px 0}.hero h1{font-size:2.7rem}.routes{display:flex;overflow:auto}.route{min-width:180px}.row{grid-template-columns:1fr}.aside{grid-template-columns:1fr}}