@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root { --ink:#10242b; --paper:#f4f1e9; --lime:#c9ff54; --muted:#5c6b6e; --line:#cfd5ca; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Noto Sans Thai", sans-serif; }
.page-shell { width:min(1080px, calc(100% - 40px)); margin:auto; padding:30px 0 78px; }
.brand { display:inline-block; color:var(--ink); font:500 18px "DM Mono", monospace; letter-spacing:-1px; text-decoration:none; }
.brand span { color:#56731c; }
.hero { padding:100px 0 45px; max-width:750px; }
.eyebrow { margin:0 0 17px; color:#55721e; font:500 12px "DM Mono", monospace; letter-spacing:1.6px; }
h1 { margin:0; font-size:clamp(48px, 8vw, 94px); line-height:.98; letter-spacing:-4px; font-weight:700; }
h1 em { color:#5f7b24; font-style:normal; }
.lead { max-width:525px; margin:29px 0 0; color:var(--muted); font-size:18px; line-height:1.75; }
.tracking-card { max-width:850px; padding:35px; border:1px solid var(--ink); background:#fffef9; box-shadow:10px 10px 0 var(--lime); }
label { display:block; margin:0 0 9px; font-size:14px; font-weight:600; }
select, input { width:100%; height:52px; border:1px solid var(--line); border-radius:0; padding:0 16px; color:var(--ink); background:#fff; font:16px "Noto Sans Thai", sans-serif; outline:none; }
select { margin-bottom:24px; }
select:focus, input:focus { border-color:var(--ink); box-shadow:0 0 0 3px var(--lime); }
.input-row { display:flex; gap:10px; }
button { min-width:164px; border:1px solid var(--ink); border-radius:0; color:var(--ink); background:var(--lime); font:700 16px "Noto Sans Thai", sans-serif; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
button:hover { transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); }
button span { margin-left:8px; font-size:22px; vertical-align:-1px; }
.form-message { min-height:25px; margin:15px 0 0; color:var(--muted); font-size:13px; }
.help { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:850px; margin:80px 0 0; }
.help div { border-top:1px solid var(--line); padding-top:16px; }
.help b { color:#5d7922; font:500 12px "DM Mono", monospace; }
.help p { margin:10px 0 0; font-size:14px; line-height:1.6; }
footer { width:min(1080px, calc(100% - 40px)); margin:auto; padding:24px 0; border-top:1px solid var(--line); color:var(--muted); font:12px "DM Mono", monospace; }
@media (max-width:600px) { .page-shell { width:min(100% - 32px, 1080px); padding-top:22px; } .hero { padding:66px 0 38px; } h1 { letter-spacing:-2.5px; } .tracking-card { padding:23px 19px; box-shadow:6px 6px 0 var(--lime); } .input-row { display:block; } input { margin-bottom:10px; } button { width:100%; height:52px; } .help { grid-template-columns:1fr; gap:22px; margin-top:62px; } }