/* HeadsUp — shared design system (mock preview) */
:root{
  --ink:#111827; --ink2:#6B7280; --ink3:#9CA3AF;
  --line:#E5E7EB; --line2:#EEF0F2; --page:#F6F7F8; --card:#FFFFFF;
  --orange:#F97316; --orange-soft:#FFF1E6; --orange-line:#F7CDA9; --orange-deep:#C2570C;
  --blue:#2563EB; --blue-soft:#EDF3FF; --blue-line:#BFD3F7; --blue-deep:#1D4FBF;
  --green:#16A34A; --green-soft:#E8F6EC; --green-deep:#15803D;
  --red:#DC2626; --red-soft:#FDECEC;
  --r:16px;
  --shadow:0 1px 2px rgba(17,24,39,.05);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  background:var(--page); color:var(--ink);
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
}
.app{width:100%; max-width:430px; min-height:100dvh; background:var(--page);
  display:flex; flex-direction:column; box-shadow:0 0 40px rgba(17,24,39,.06)}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; padding-top:max(12px, env(safe-area-inset-top))}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none}
.logo svg{display:block}
.wordmark{font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink)}
.wordmark em{font-style:normal; color:var(--orange)}
.hdr-l{display:flex; align-items:center; gap:10px; min-width:0}
.hdr-r{display:flex; align-items:center; gap:8px}
.back{appearance:none; border:1px solid var(--line); background:#fff; border-radius:10px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto}
.back svg{display:block}
.htitle{min-width:0}
.htitle b{display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.htitle small{display:block; font-size:11.5px; color:var(--ink2); margin-top:1px}
.lang{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
.lang button{appearance:none; border:0; background:transparent; font:inherit;
  font-size:12.5px; font-weight:700; color:var(--ink2); padding:7px 10px; cursor:pointer}
.lang button.on{background:var(--ink); color:#fff}
.menu-btn{appearance:none; border:1px solid var(--line); background:#fff; border-radius:10px;
  font:inherit; font-size:13px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:7px; padding:7px 11px; cursor:pointer}
.menu-btn svg{display:block}
.menu-btn.icon{padding:0; width:38px; height:38px; justify-content:center}

/* ---------- main ---------- */
main{flex:1; padding:8px 16px 24px; display:flex; flex-direction:column; width:100%}
main.form{padding-bottom:96px} /* room for sticky cta */

/* ---------- type helpers ---------- */
.prompt{margin:22px 2px 10px; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3)}
.seclabel{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink3); margin:22px 2px 9px}
.seclabel:first-child{margin-top:14px}

/* ---------- form ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden}
.field{padding:13px 14px; border-bottom:1px solid var(--line2)}
.field:last-child{border-bottom:0}
.field > label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px}
.field .req{color:var(--orange); font-weight:800}
.field .opt{color:var(--ink3); font-weight:500; font-size:11.5px}
.input,.textarea{width:100%; appearance:none; border:1px solid var(--line); border-radius:11px;
  background:#fff; font:inherit; font-size:15px; color:var(--ink); padding:12px 13px; resize:none}
.input::placeholder,.textarea::placeholder{color:#AEB4BC}
.input:focus,.textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft)}
.textarea{min-height:80px; line-height:1.45}
.hint{font-size:12px; color:var(--ink3); margin-top:7px; line-height:1.4}

/* segmented YES/NO */
.seg{display:flex; gap:8px}
.seg button{flex:1; appearance:none; border:1px solid var(--line); background:#fff; font:inherit;
  font-size:14px; font-weight:700; color:var(--ink2); padding:11px 0; border-radius:11px; cursor:pointer;
  transition:all .12s ease}
.seg button.on{border-color:var(--orange); background:var(--orange-soft); color:var(--orange-deep)}
.seg.danger button.on{border-color:var(--red); background:var(--red-soft); color:var(--red)}

/* reveal */
.reveal{max-height:0; opacity:0; overflow:hidden; transition:max-height .28s ease, opacity .2s ease}
.reveal.on{max-height:420px; opacity:1; margin-top:11px}

/* photo dropzone */
.drop{display:flex; gap:10px}
.drop button{flex:1; appearance:none; border:1.5px dashed var(--line); background:#FBFBFC; cursor:pointer;
  border-radius:13px; padding:16px 8px; display:flex; flex-direction:column; align-items:center; gap:7px;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--ink2)}
.drop button:active{border-color:var(--orange); background:var(--orange-soft)}
.thumbs{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
.thumb{width:54px; height:54px; border-radius:10px; background:#E9EBEE center/cover; position:relative;
  border:1px solid var(--line)}
.thumb .x{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:999px;
  background:var(--ink); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; border:2px solid #fff}

/* money input */
.money{position:relative}
.money .dollar{position:absolute; left:13px; top:50%; transform:translateY(-50%); font-weight:800; color:var(--ink2); font-size:15px}
.money .input{padding-left:26px}

/* ---------- sticky cta ---------- */
.cta-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px;
  background:linear-gradient(to top, #fff 72%, rgba(255,255,255,0)); padding:14px 16px calc(16px + env(safe-area-inset-bottom)); z-index:25}
.btn{width:100%; appearance:none; border:0; font:inherit; font-size:16px; font-weight:800;
  border-radius:14px; padding:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px}
.btn:active{transform:scale(.99)}
.btn.primary{background:var(--orange); color:#fff; box-shadow:0 6px 18px rgba(249,115,22,.32)}
.btn.blue{background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.3)}
.btn.dark{background:var(--ink); color:#fff}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow)}
.btn svg{display:block}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:#fff;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom)); text-align:center}
.foot .rec{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:var(--ink2)}
.foot .links{margin-top:8px; font-size:12px; color:var(--ink3)}
.foot .links a{color:var(--ink2); font-weight:600; text-decoration:none}
.foot .links em{font-style:normal; color:#C7CBD1; margin:0 7px}

/* ---------- menu sheet ---------- */
.shade{position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .22s ease}
.shade.on{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:50%; transform:translate(-50%,104%); bottom:0; z-index:50;
  width:100%; max-width:430px; background:#fff; border-radius:22px 22px 0 0;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom));
  transition:transform .28s cubic-bezier(.32,.72,.33,1); max-height:86dvh; overflow:auto}
.sheet.on{transform:translate(-50%,0)}
.grip{width:38px; height:4px; border-radius:999px; background:#E2E4E8; margin:4px auto 14px}
.sheet h3{font-size:18px; font-weight:800; letter-spacing:-.01em; padding:0 2px; margin-bottom:10px}
.mi{width:100%; appearance:none; background:#fff; border:1px solid var(--line); border-radius:14px;
  font:inherit; text-align:left; cursor:pointer; padding:14px; margin-bottom:9px;
  display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none}
.mi .mtile{flex:0 0 36px; height:36px; border-radius:10px; background:var(--page);
  display:flex; align-items:center; justify-content:center; font-size:16px}
.mi b{display:block; font-size:14.5px; font-weight:700}
.mi small{display:block; margin-top:1px; font-size:12px; color:var(--ink2)}
.mi .grow{flex:1; min-width:0}
.panel{display:none; padding:4px 6px 14px; font-size:13.5px; line-height:1.55; color:#374151}
.panel.on{display:block}
.panel .step{display:flex; gap:10px; margin-top:10px}
.panel .n{flex:0 0 22px; height:22px; border-radius:999px; background:var(--orange);
  color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center}
.panel .step b{display:block; font-size:13.5px}
.panel .step small{display:block; color:var(--ink2); font-size:12.5px; margin-top:1px}
.close-btn{width:100%; appearance:none; border:0; background:var(--ink); color:#fff;
  font:inherit; font-size:14.5px; font-weight:700; border-radius:14px; padding:14px; cursor:pointer; margin-top:4px}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#fff; font-size:13px; font-weight:600;
  padding:11px 16px; border-radius:12px; z-index:60; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; max-width:88%; text-align:center}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion: no-preference){
  .fade{opacity:0; transform:translateY(10px); animation:huUp .5s ease forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}
  .d4{animation-delay:.2s}.d5{animation-delay:.25s}.d6{animation-delay:.3s}
  @keyframes huUp{to{opacity:1; transform:none}}
}