/* The page a guest opens from WhatsApp. Light, warm, one column, no jargon. */

:root{
  --accent:#8E2B20;
  --accent-deep:#6F1F17;
  --accent-soft:#FAEFEC;
  --gold:#C9A227;
  --gold-soft:#F6EDD4;
  --paper:#FDFBF6;
  --surface:#FFFFFF;
  --sand:#F3EDE1;
  --ink:#2A2420;
  --ink-2:#6B6056;
  --ink-3:#9C9084;
  --line:#E9E0CF;
  --line-2:#F2EBDC;
  --ok:#2F6B4F;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font:16px/1.55 var(--sans);-webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
main{max-width:560px;margin:0 auto;padding:0 18px 64px}
.loading{padding:64px 0;text-align:center;color:var(--ink-3)}

/* ---------- masthead ---------- */
.top{
  text-align:center;padding:40px 0 26px;
  background:
    radial-gradient(120% 120% at 50% 0%,var(--gold-soft) 0%,transparent 62%);
  margin:0 -18px 22px;
}
.top .om{font-size:21px;color:var(--gold);line-height:1}
.top h1{
  font:600 30px/1.2 var(--serif);margin:12px 0 6px;letter-spacing:-.01em;
}
.top .sub{color:var(--ink-2);font-size:14.5px}
.top .rule{width:54px;height:1px;background:var(--gold);margin:17px auto 0;
  opacity:.65}

.hello{font:600 21px/1.3 var(--serif);margin:0 0 6px}
.lede{color:var(--ink-2);font-size:15px;margin:0 0 22px}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:17px 18px;margin-bottom:13px;
}
.card h2{
  font:600 12px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 13px;
}
.ev{display:flex;gap:13px;padding:11px 0;border-top:1px solid var(--line-2)}
.ev:first-of-type{border-top:0;padding-top:0}
.ev .dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-top:8px}
.ev b{display:block;font:600 16px/1.3 var(--serif)}
.ev span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:1px}

/* ---------- questions ---------- */
.q{padding:16px 0;border-top:1px solid var(--line-2)}
.q:first-of-type{border-top:0;padding-top:2px}
.q > label{display:block;font:500 15.5px/1.4 var(--sans);margin-bottom:10px}
.q .sub{display:block;font-size:13px;color:var(--ink-3);font-weight:400;
  margin-top:2px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:10px 17px;font:500 15px/1.2 var(--sans);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .13s ease,border-color .13s ease,color .13s ease;
}
.chip:active{transform:scale(.98)}
.chip.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip.no.sel{background:var(--ink-2);border-color:var(--ink-2)}
input[type="text"],input[type="tel"],input[type="date"],textarea{
  width:100%;font:16px var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:12px 13px;outline:0;
}
input:focus,textarea:focus{border-color:var(--ink)}
textarea{resize:vertical;min-height:84px;line-height:1.5}
.two{display:flex;gap:10px;flex-wrap:wrap}
.two > div{flex:1 1 150px;min-width:0}
.two label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}

.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;background:var(--surface)}
.stepper button{border:0;background:none;width:46px;height:46px;cursor:pointer;
  font:20px/1 var(--sans);color:var(--ink-2)}
.stepper button:active{background:var(--sand)}
.stepper input{width:52px;border:0;outline:0;text-align:center;background:none;
  font:600 17px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;
  padding:0;border-radius:0}
.counts{display:flex;gap:22px;flex-wrap:wrap}
.counts > div{text-align:left}
.counts label{display:block;font-size:12.5px;color:var(--ink-3);
  margin-bottom:7px}

/* ---------- send ---------- */
.send{
  position:sticky;bottom:0;padding:14px 0 18px;
  background:linear-gradient(transparent,var(--paper) 28%);
}
.send button{
  width:100%;border:0;border-radius:999px;background:var(--accent);color:#fff;
  font:600 17px/1 var(--sans);padding:17px;cursor:pointer;
}
.send button:active{background:var(--accent-deep)}
.send button[disabled]{opacity:.6}
.send .note{text-align:center;font-size:12.5px;color:var(--ink-3);
  margin-top:10px}

.done{text-align:center;padding:50px 10px}
.done .mark{
  width:62px;height:62px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:0 auto 18px;
}
.done h2{font:600 25px/1.25 var(--serif);margin:0 0 8px}
.done p{color:var(--ink-2);font-size:15px;margin:0 0 22px}
.done button{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:12px 22px;font:600 15px var(--sans);color:var(--ink);cursor:pointer;
}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;
  background:var(--ink);color:#fff;border-radius:999px;padding:12px 22px;
  font-size:14px;max-width:90vw;text-align:center;
}
.toast.bad{background:var(--accent)}
.foot{text-align:center;color:var(--ink-3);font-size:12.5px;padding:8px 0 0}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}