/* Layout: one narrow column — a big live counter up top, three quiet stats, the form below. */
:root{
  --bg:#eef4f6; --surface:#ffffff; --fg:#13303a; --muted:#5b7580;
  --line:#d3e1e6; --accent:#1f8a6b; --accent-ink:#ffffff; --accent-soft:#dcf1e9; --warn:#c2410c;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1a1f; --surface:#15252b; --fg:#e4eff2; --muted:#93acb5;
    --line:#263b42; --accent:#4cc79f; --accent-ink:#0b1c17; --accent-soft:#173a30; --warn:#fb923c;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
main{max-width:560px; margin:0 auto; padding-block:40px 64px; display:flex; flex-direction:column; gap:28px}
h1,h2{font-family:var(--display); text-wrap:balance; margin:0}
h1{font-size:clamp(1.6rem,6vw,2.2rem)}
h2{font-size:1.25rem}
.eyebrow{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0}
.greeting{font-size:1.05rem; color:var(--muted); margin:6px 0 0}

.hero{display:flex; flex-direction:column; gap:6px}
.badge{align-self:flex-start; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent); padding:3px 10px; border-radius:999px}
.money{font-family:var(--display); font-weight:700; color:var(--accent);
  font-size:clamp(3rem,14vw,5.2rem); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.money .cents{font-size:.45em; letter-spacing:0}
.money .cur{font-size:.6em; letter-spacing:0}
.sub{color:var(--muted); margin:4px 0 0}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden}
.stat{background:var(--surface); padding:16px 14px; display:flex; flex-direction:column; gap:2px; min-width:0}
.stat b{font-family:var(--display); font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.stat span{font-size:.82rem; color:var(--muted)}

.ahead{display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.95rem; color:var(--muted)}
.ahead strong{color:var(--fg); font-variant-numeric:tabular-nums}

.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px;
  display:flex; flex-direction:column; gap:16px; margin:0}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field.full{grid-column:1 / -1}
label{font-size:.88rem; font-weight:600}
.hint{font-size:.8rem; color:var(--muted)}
input,select{font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; width:100%; min-width:0}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.price{display:flex; gap:8px}
.price select{width:auto; flex:0 0 auto}
.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
button{font:inherit; font-weight:600; border-radius:10px; padding:11px 18px; cursor:pointer; border:1px solid transparent}
button:disabled{opacity:.6; cursor:progress}
.primary{background:var(--accent); color:var(--accent-ink)}
.ghost{background:transparent; color:var(--muted); border-color:var(--line)}
.ghost:hover{color:var(--fg)}
.error{color:var(--warn); font-size:.9rem; margin:0}
.ok{color:var(--accent); font-size:.9rem; margin:0}
.note{font-size:.88rem; color:var(--muted); margin:0}

@media (max-width:440px){
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{flex-direction:row; align-items:baseline; justify-content:space-between}
}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important} }