@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat.woff2') format('woff2');
}

:root {
  --orange:#E3751D; --orange-dark:#C65F11; --ink:#241D18; --text:#181818;
  --muted:#6B6560; --bg:#FFFFFF; --bg-soft:#F7F7F7; --line:#E7E2DC;
  --radius:14px; --shadow:0 6px 24px rgba(36,29,24,.08);
  --font:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--font); color:var(--text); background:var(--bg-soft);
  line-height:1.55; -webkit-font-smoothing:antialiased; }

.topbar { background:#fff; border-bottom:1px solid var(--line);
  display:flex; justify-content:center; padding:14px 16px; }
.topbar img { height:40px; width:auto; }

.container { max-width:640px; margin:0 auto; padding:24px 16px 48px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; }

h1 { font-weight:700; color:var(--ink); font-size:1.5rem; margin:.2rem 0 .4rem; letter-spacing:-.01em; }
h2 { font-weight:600; color:var(--ink); font-size:1.15rem; margin:0 0 1rem; }
p { margin:.4rem 0; }
.muted { color:var(--muted); }
.hint { color:var(--muted); font-size:.9rem; }
.accent { color:var(--orange); }
.pill { display:inline-block; background:#FFF5EC; color:var(--orange-dark);
  border:1px solid #F4D5B3; padding:.2rem .7rem; border-radius:999px; font-weight:600; font-size:.9rem; }

.btn { font-family:var(--font); font-weight:600; font-size:1rem; border-radius:10px;
  padding:.7rem 1.3rem; border:1px solid transparent; cursor:pointer; transition:.15s; }
.btn-primary { background:var(--orange); color:#fff; }
.btn-primary:hover { background:var(--orange-dark); }
.btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { background:var(--bg-soft); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-row { display:flex; gap:.75rem; justify-content:space-between; margin-top:1.5rem; }

.field { margin:0 0 1.1rem; }
.field > label { display:block; font-weight:600; color:var(--ink); margin-bottom:.35rem; font-size:.95rem; }
.field input[type=text], .field input[type=number], .field textarea, .field select {
  width:100%; font-family:var(--font); font-size:1rem; color:var(--text);
  padding:.65rem .8rem; border:1px solid var(--line); border-radius:10px; background:#fff; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(227,117,29,.15); }
.field textarea { min-height:84px; resize:vertical; }

.opts { display:flex; flex-wrap:wrap; gap:.5rem; }
.opt { position:relative; }
.opt input { position:absolute; opacity:0; width:0; height:0; }
.opt label { display:inline-block; padding:.5rem .9rem; border:1px solid var(--line);
  border-radius:999px; cursor:pointer; font-weight:500; color:var(--text); background:#fff; margin:0; }
.opt input:checked + label { border-color:var(--orange); background:#FFF5EC; color:var(--orange-dark); }

.steps { display:flex; gap:.4rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.step { flex:1; min-width:26px; height:6px; border-radius:999px; background:var(--line); }
.step.done { background:var(--orange); }
.step.active { background:var(--orange); opacity:.55; }
.saved { color:#16794A; font-size:.85rem; font-weight:600; }