:root{
  --ink:#0a0c10;--paper:#fff;--paper-2:#f6f7f9;--line:#dfe3ea;--text:#14181f;--text-2:#4a5364;--text-3:#7d8798;
  --accent:#ff6a13;--accent-dk:#e2530a;--accent-lt:#fff1e8;--good:#0f9d58;--bad:#d8412f;
  --f-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;--f-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --r:12px;--r-lg:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--f-body);font-size:17px;line-height:1.5;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
h1,h2{font-family:var(--f-display);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(1.6rem,6vw,2.2rem)}
h2{font-size:clamp(1.35rem,5.5vw,1.9rem)}
p{margin:0 0 .8em}
.muted{color:var(--text-2)}
.small{font-size:.9rem}
a{color:var(--accent-dk)}

/* top bar */
.bar{position:sticky;top:0;background:var(--paper);z-index:5;padding:14px 20px 10px;border-bottom:1px solid var(--line)}
.bar-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--text-2);font-weight:500}
.bar-row b{color:var(--text);font-family:var(--f-display)}
.track{height:6px;background:var(--paper-2);border-radius:3px;margin-top:8px;overflow:hidden}
.fill{height:100%;background:var(--accent);width:0;transition:width .3s ease}

/* card area */
main{display:flex;flex-direction:column;max-width:560px;width:100%;margin:0 auto;padding:22px 20px 10px}
.step{display:none;animation:in .22s ease}
.step.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--f-display);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:8px}
.hint{color:var(--text-2);font-size:.95rem;margin:-.2em 0 1em}
.opt-req{font-size:.8rem;font-weight:600;color:var(--text-3);margin-left:.5em;text-transform:none;letter-spacing:0}

/* controls — big tap targets */
.opts{display:grid;gap:10px;margin:6px 0 4px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border:2px solid var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer;font-size:1rem;line-height:1.35;text-align:left;width:100%;font-family:inherit;color:var(--text);transition:border-color .12s,background .12s}
.opt:active{transform:translateY(1px)}
.opt .box{flex:0 0 22px;height:22px;border:2px solid var(--line);border-radius:6px;margin-top:1px;position:relative;background:#fff}
.opt.radio .box{border-radius:50%}
.opt.sel{border-color:var(--accent);background:var(--accent-lt)}
.opt.sel .box{border-color:var(--accent);background:var(--accent)}
.opt.sel .box::after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path d="M7.6 14.6 3.4 10.4l1.4-1.4 2.8 2.8 7.6-7.6 1.4 1.4z"/></svg>') center/16px no-repeat}
.opt .lbl b{display:block;font-weight:600}
.opt .lbl span{color:var(--text-2);font-size:.9rem}
.swatch{flex:0 0 34px;height:34px;border-radius:8px;border:1px solid rgb(0 0 0/.08);margin-top:-2px}
textarea,input[type=text],input[type=tel],input[type=email]{width:100%;font:inherit;font-size:1.05rem;padding:14px 16px;border:2px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--text);outline:none;transition:border-color .12s}
textarea:focus,input:focus{border-color:var(--accent)}
textarea{min-height:130px;resize:vertical;line-height:1.5}
.field{margin-bottom:14px}

/* polish ("Tidy this up") */
.polish{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.polish-btn{display:inline-flex;align-items:center;gap:.45em;font:600 .9rem var(--f-display);color:var(--accent-dk);background:var(--accent-lt);border:1px solid rgb(255 106 19/.35);border-radius:999px;padding:.55em 1em;cursor:pointer}
.polish-btn[disabled]{opacity:.55;cursor:wait}
.polish-note{font-size:.82rem;color:var(--text-3)}
.polish-card{margin-top:12px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);background:var(--paper-2);padding:14px 16px;animation:in .2s ease}
.polish-card .lbl{font:600 .78rem var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.polish-card .txt{font-size:1rem;line-height:1.5;white-space:pre-wrap;color:var(--text)}
.polish-card .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.polish-card .acts button{font:700 .9rem var(--f-display);padding:.7em 1.1em;border-radius:10px;border:2px solid transparent;cursor:pointer}
.polish-card .use{background:var(--accent);color:#fff}
.polish-card .keep{background:transparent;border-color:var(--line);color:var(--text)}
.polish-card .undo{margin-left:auto;background:none;border:0;color:var(--text-3);text-decoration:underline;font:500 .85rem var(--f-body);cursor:pointer}
.orig-note{margin-top:8px;font-size:.82rem;color:var(--text-3)}
.orig-note button{background:none;border:0;padding:0;color:var(--accent-dk);text-decoration:underline;font:inherit;cursor:pointer}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.other{margin-top:8px}

/* photos */
.snap{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.snap-btn{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:16px;border:2px dashed var(--line);border-radius:var(--r);background:var(--paper-2);font:600 .95rem var(--f-display);color:var(--text);cursor:pointer}
.snap-btn input{display:none}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgb(10 12 16/.75);color:#fff;font-size:15px;line-height:1;cursor:pointer}

/* footer nav */
.nav{padding:4px 20px calc(20px + env(safe-area-inset-bottom));background:var(--paper)}
.nav-in{max-width:560px;margin:0 auto;display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-display);font-size:1rem;font-weight:700;padding:1em 1.4em;border:2px solid transparent;border-radius:var(--r);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .12s,background-color .16s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#fff;flex:1;box-shadow:0 6px 20px -6px rgb(255 106 19/.55)}
.btn--primary:hover{background:var(--accent-dk)}
.btn--primary[disabled]{background:#c9ced8;box-shadow:none;cursor:not-allowed}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn--link{background:none;border:0;color:var(--text-3);font-family:var(--f-body);font-weight:500;font-size:.9rem;padding:.6em .4em;cursor:pointer;text-decoration:underline}
.err{color:var(--bad);font-size:.9rem;margin-top:8px;display:none}
.err.on{display:block}

/* intro / done */
.hero{padding-top:14px}
/* Used on the intro and again on the done screen's bonus offer — so it is not scoped to
   .hero any more. Scoped there, the same markup rendered as a bare "+" and loose text. */
.who{display:flex;gap:12px;align-items:center;margin:18px 0 22px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2);text-align:left}
.who .av{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 1rem var(--f-display);flex:none}
.done .check{width:64px;height:64px;border-radius:50%;background:var(--good);display:grid;place-items:center;margin-bottom:18px}
.done .check svg{width:34px;height:34px}
.summary{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:.92rem;max-height:40vh;overflow:auto;background:var(--paper-2);white-space:pre-wrap;word-break:break-word}
/* Review list — every answer is a way back into the question that produced it. */
.rev{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.rev li+li{border-top:1px solid var(--line)}
.rev__row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;padding:12px 14px;background:none;border:0;text-align:left;font:inherit;cursor:pointer;align-items:baseline}
.rev__row:hover,.rev__row:focus-visible{background:rgba(0,0,0,.035)}
.rev__q{grid-column:1;font-size:.78rem;color:var(--text-3);line-height:1.4}
.rev__a{grid-column:1;font-size:.95rem;font-weight:600;line-height:1.45;word-break:break-word}
.rev__go{grid-column:2;grid-row:1/3;align-self:center;font-size:.78rem;font-weight:600;color:var(--accent-dk);white-space:nowrap}
.rev__row.is-blank .rev__a{font-weight:500;color:var(--text-3);font-style:italic}
.saved{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.8rem;padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:6}
.saved.on{opacity:.9}