:root{
  --void:#060607; --ash:#121216; --ash2:#1a1a20; --line:#2a2a31; --line2:#3a3a44;
  --bone:#f4f1ea; --smoke:#a9a8b0; --smoke2:#8a8992;
  --blood:#e01926; --blood2:#ff3140; --bloodglow:rgba(224,25,38,.28);
  --err:#ff6b74;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--bone);font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
.wrap{max-width:640px;margin:0 auto;padding:28px 16px calc(40px + env(safe-area-inset-bottom))}
.disp{font-family:Anton,"Hanken Grotesk",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.02}

.top{margin-bottom:26px}
.eyebrow{color:var(--blood2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.progress{height:4px;background:var(--ash2);border-radius:4px;margin:14px 0 8px;overflow:hidden}
.bar{height:100%;width:0;background:var(--blood);transition:width .35s ease}
.stepcount{color:var(--smoke2);font-size:13px;font-weight:600;letter-spacing:.04em}

.step h1{font-size:clamp(34px,8vw,48px);margin-bottom:10px}
.step .intro{color:var(--smoke);margin-bottom:28px}

.field{margin-bottom:30px}
.field > label, .field > .lbl{display:block;font-weight:700;font-size:18px;line-height:1.35;margin-bottom:6px}
.opt{color:var(--smoke2);font-weight:500;font-size:14px;margin-left:6px}
.helper{color:var(--smoke2);font-size:14.5px;margin-bottom:10px}
.err{color:var(--err);font-size:14.5px;font-weight:600;margin-top:8px}
.err:empty{display:none}

input[type=text],input[type=email],input[type=number],textarea{
  width:100%;background:var(--ash);color:var(--bone);border:1px solid var(--line);border-radius:10px;
  padding:14px 15px;font:inherit;font-size:17px;outline:none;transition:border-color .15s, box-shadow .15s;-webkit-appearance:none}
textarea{min-height:120px;resize:vertical;line-height:1.5}
input:focus,textarea:focus{border-color:var(--blood);box-shadow:0 0 0 3px var(--bloodglow)}
input[readonly]{color:var(--smoke);background:var(--void);border-style:dashed}
.invalid input,.invalid textarea{border-color:var(--err)}
input[type=number]{max-width:140px}
.other{margin-top:10px}

/* choice cards (selects) */
.choices{display:grid;gap:8px}
.choices.pills{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.choice{position:relative}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:block;background:var(--ash);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  cursor:pointer;font-weight:600;font-size:16px;transition:border-color .15s, background .15s}
.choice span:hover{border-color:var(--line2)}
.choice input:checked + span{border-color:var(--blood);background:rgba(224,25,38,.12)}
.choice input:focus-visible + span{box-shadow:0 0 0 3px var(--bloodglow)}

/* 1-10 scale */
.scale{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.scale .choice span{padding:12px 0;text-align:center;font-size:17px}
.scale-ends{display:flex;justify-content:space-between;gap:12px;color:var(--smoke2);font-size:13px;margin-top:8px}
.scale-ends span:last-child{text-align:right}
.na{margin-top:10px;max-width:240px}
@media (max-width:480px){.scale{grid-template-columns:repeat(5,1fr)}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blood);color:#fff;font:inherit;
  font-weight:700;font-size:17px;padding:16px 30px;border-radius:11px;border:1px solid #ff4b57;cursor:pointer;
  text-decoration:none;transition:transform .12s, box-shadow .2s, background .2s;box-shadow:0 8px 26px var(--bloodglow)}
.btn:hover{background:var(--blood2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--bone);box-shadow:none}
.btn.ghost:hover{border-color:var(--bone);background:transparent}
.btn.lg{padding:18px 30px;font-size:18px}

.nav{display:flex;gap:10px;justify-content:space-between;margin-top:8px}
.nav .btn{flex:1}
.nav #back{flex:0 0 auto}
.formerr{color:var(--err);font-weight:600;margin:4px 0 14px}

.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.thanks{padding-top:30px}
.thanks h1{font-size:clamp(48px,13vw,76px);margin-bottom:12px}
.thanks p{color:var(--smoke);font-size:19px;margin-bottom:30px}
.ctas{display:grid;gap:12px}
.btn[hidden]{display:none}