:root{
  --bg:#f4f2ee;
  --bg-2:#ece9e2;
  --card:#ffffff;
  --ink:#1b1a17;
  --ink-2:#57544c;
  --ink-3:#8f8b80;
  --line:#e6e2da;
  --line-2:#d8d3c8;
  --accent:#4b46e5;
  --accent-2:#6d67ff;
  --accent-soft:#eeedff;
  --danger:#c0392b;
  --ok:#1f9d63;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(27,26,23,.04), 0 12px 34px -18px rgba(27,26,23,.22);
  --shadow-lg:0 1px 2px rgba(27,26,23,.05), 0 30px 60px -28px rgba(27,26,23,.32);
  --font:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 82% -8%, #e9e6ff 0%, rgba(233,230,255,0) 55%),
    radial-gradient(900px 560px at 6% 4%, #eef0e6 0%, rgba(238,240,230,0) 52%),
    var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
.page{max-width:720px;margin:0 auto;padding:0 20px 40px;min-height:100vh;display:flex;flex-direction:column}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 2px 26px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.brand-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 0 4px var(--accent-soft)}
.brand-name{font-size:16px}
.topbar-meta{font-size:13px;color:var(--ink-3);font-weight:500}

/* Shell */
.shell{flex:1;display:flex;flex-direction:column;justify-content:flex-start}

/* Intro */
.intro{padding:12px 4px 8px;animation:rise .5s ease both}
.eyebrow{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.intro h1{margin:0 0 16px;font-size:clamp(28px,6vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:800}
.lede{margin:0 0 28px;font-size:16.5px;color:var(--ink-2);max-width:38ch}
.intro-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.intro-steps span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--card);border:1px solid var(--line);padding:7px 12px;border-radius:100px;box-shadow:var(--shadow)}

/* Card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:26px}
@media(min-width:560px){.card{padding:34px}}

/* Progress */
.progress{margin-bottom:26px}
.progress-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.progress-label{font-size:14px;font-weight:700;letter-spacing:-.01em}
.progress-count{font-size:13px;color:var(--ink-3);font-weight:600}
.progress-count b{color:var(--ink);font-weight:800}
.progress-track{height:6px;border-radius:100px;background:var(--bg-2);overflow:hidden}
.progress-bar{height:100%;width:16.66%;border-radius:100px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .45s cubic-bezier(.2,.7,.2,1)}

/* Steps */
.step{border:0;margin:0;padding:0;min-inline-size:0;animation:fade .35s ease both}
.step-title{margin:0 0 5px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.step-sub{margin:0 0 22px;font-size:14.5px;color:var(--ink-2)}

/* Fields */
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.field label i{color:var(--accent);font-style:normal;font-weight:700}
.field .hint{font-weight:500;color:var(--ink-3);font-size:13px;margin-left:4px}
.grid-2{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:560px){.grid-2{grid-template-columns:1fr 1fr;gap:16px}}
input[type=text],input[type=email],textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:#fbfaf8;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);
  padding:13px 14px;transition:border-color .18s,box-shadow .18s,background .18s;resize:vertical;
}
input::placeholder,textarea::placeholder{color:#b4afa4}
input:focus,textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
input.invalid,textarea.invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(192,57,43,.09)}

/* Choices */
.choices{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:520px){.choices{grid-template-columns:1fr 1fr}}
.choice{display:flex;align-items:center;gap:11px;padding:14px 15px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);cursor:pointer;background:#fbfaf8;transition:all .16s;font-size:15px;font-weight:600;user-select:none}
.choice input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--line-2);border-radius:6px;flex:none;position:relative;transition:all .16s;cursor:pointer}
.choice input:checked{background:var(--accent);border-color:var(--accent)}
.choice input:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice.disabled{opacity:.45;cursor:not-allowed}
.choice.disabled input{cursor:not-allowed}
.choice-note{margin:10px 0 0;font-size:13px;color:var(--accent);font-weight:600}

/* Nav */
.form-error{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.2);color:var(--danger);font-size:14px;font-weight:600;padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:16px}
.nav{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.nav-spacer{flex:1}
.autosave{font-size:12.5px;color:var(--ink-3);font-weight:600;opacity:0;transition:opacity .3s}
.autosave.show{opacity:1}
@media(max-width:520px){.autosave{display:none}}

/* Buttons */
.btn{font-family:inherit;font-size:15px;font-weight:700;border-radius:12px;padding:12px 20px;cursor:pointer;border:1.5px solid transparent;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s;letter-spacing:-.01em}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 22px -12px rgba(27,26,23,.7)}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.arr{display:inline-block;transition:transform .2s}
.btn-primary:hover .arr{transform:translateX(3px)}
#startBtn{margin-top:4px;font-size:16px;padding:14px 26px}

/* Thanks */
.thanks{text-align:center;padding:48px 26px;animation:rise .5s ease both}
.thanks h2{margin:8px 0 10px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.thanks p{margin:0 auto 26px;color:var(--ink-2);max-width:40ch;font-size:15.5px}
.thanks-check{width:74px;height:74px;margin:0 auto 8px}
.thanks-check svg{width:100%;height:100%}
.thanks-check circle{stroke:var(--accent-soft);stroke-width:3}
.thanks-check path{stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:draw .5s .2s ease forwards}

/* Footer */
.footer{text-align:center;padding:26px 10px 6px;font-size:12.5px;color:var(--ink-3)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}