:root{
  --paper:#F3F4F0; --sheet:#FFFFFF; --ink:#17181A; --ink-2:#4A4C50; --line:#DADCD5;
  --hl:#FFE14D; --see:#E9A800; --think:#4C6FD1; --build:#169C55; --prove:#D8412F;
  --cta:#FFD21F; --cta-edge:#17181A; --bump:#FFF6C7; --bump-edge:#D8412F;
  --shadow:0 1px 0 rgba(23,24,26,.06),0 10px 30px -12px rgba(23,24,26,.25);
  --f-display:"Bai Jamjuree","IBM Plex Sans Thai Looped",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai Looped","Sarabun",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark;--paper:#121315;--sheet:#1B1C1F;--ink:#EEEEE8;--ink-2:#AEB0AA;--line:#2E3034;--hl:#8A7300;--bump:#2A2616;--cta-edge:#000;
  --shadow:0 1px 0 rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.7)}
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--f-body);padding-inline:16px;padding-block:0 64px}
h1,h2,h3{font-family:var(--f-display);line-height:1.3;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
.top{display:flex;justify-content:space-between;align-items:center;padding-block:18px;max-width:640px;margin-inline:auto;font:700 18px/1 var(--f-display)}
.top a{text-decoration:none}
.top small{font:500 14px/1 var(--f-body);color:var(--ink-2)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font:600 13px/1.4 var(--f-body);color:var(--ink-2)}
.steps li{border-top:4px solid var(--line);padding-top:8px}
.steps li.on{border-color:var(--ink);color:var(--ink)}
.steps li.done{border-color:var(--build)}
.card{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px;box-shadow:var(--shadow)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plan{position:relative;display:grid;gap:4px;border:2px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;background:var(--sheet)}
.plan input{position:absolute;opacity:0}
.plan:has(input:checked){border:3px solid var(--build)}
.plan:has(input:focus-visible){outline:3px solid var(--think);outline-offset:3px}
.plan .nm{font:600 15px/1.3 var(--f-body);color:var(--ink-2)}
.plan .pr{font:700 26px/1.2 var(--f-display)}
.plan .pr small{font:500 14px/1 var(--f-body);color:var(--ink-2)}
.plan .sv{font-size:13px;color:var(--build);font-weight:600}
@media (max-width:460px){.plans{grid-template-columns:1fr}}
.bump{border:3px dashed var(--bump-edge);background:var(--bump);border-radius:14px;padding:20px;display:grid;gap:12px}
.bump .flag{font:700 14px/1.3 var(--f-display);color:var(--prove)}
.bump label.yes{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;background:var(--sheet);border:2px solid var(--ink);border-radius:10px;padding:14px;cursor:pointer;font:700 18px/1.45 var(--f-display)}
.bump input[type=checkbox]{width:24px;height:24px;margin:3px 0 0;accent-color:var(--build)}
.bump h2{font-size:clamp(22px,4vw,28px)}
.bump ul{margin:0;padding-left:20px;display:grid;gap:6px}
.bump .price{font:700 20px/1.3 var(--f-display)}
.bump .price s{color:var(--ink-2);font-weight:500;margin-right:6px}
.sum{display:grid;gap:8px}
.sum .row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.sum .row.total{border-top:2px solid var(--ink);padding-top:10px;font:700 22px/1.3 var(--f-display)}
.muted{color:var(--ink-2);font-size:15px}
.cta{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;background:var(--cta);color:#17181A;text-decoration:none;border:3px solid var(--cta-edge);border-radius:12px;padding:16px 20px;box-shadow:0 6px 0 var(--cta-edge);font:700 21px/1.3 var(--f-display);cursor:pointer;transition:transform .12s,box-shadow .12s}
.cta small{font:500 13px/1.3 var(--f-body)}
.cta:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--cta-edge)}
.cta:disabled{opacity:.6;cursor:progress}
.skip{background:none;border:0;color:var(--ink-2);text-decoration:underline;font:500 15px/1.4 var(--f-body);cursor:pointer;justify-self:center}
.field{display:grid;gap:6px;font:600 15px/1.4 var(--f-body)}
.field input{font:400 17px/1.5 var(--f-body);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:12px}
.err{background:#FDECEA;color:#8C1D12;border-radius:10px;padding:12px 14px;font-size:15px}
@media (prefers-color-scheme:dark){.err{background:#3A1712;color:#FFB4A8}}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:14px;color:var(--ink-2)}
:focus-visible{outline:3px solid var(--think);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}