/* O3 Capital Customer Survey — premium styling.
   Design system: Swiss minimalism (clean, spacious, high-contrast, grid).
   Type: DM Sans. Motion: subtle 200-260ms, exit faster than entrance, reduced-motion aware.
   Brand --primary / --accent are injected inline from config; the rest are tokens below. */

:root{
  --ink:#15201A; --ink-2:#515B54; --ink-3:#828C84;
  --bg:#F7F9F5; --surface:#FFFFFF; --muted:#F0F3EC; --muted-2:#E9EEE3;
  --line:#E2E7DC; --line-strong:#CFD6C7;
  --primary:#1C5B3E; --accent:#8A5E1F;
  --err:#B23A2C; --err-bg:#FBEBE7; --err-line:#E7C2B9;
  --ok:#1C5B3E;
  --radius:16px; --radius-sm:11px;
  --shadow-card:0 1px 2px rgba(21,32,26,.04), 0 22px 48px -28px rgba(21,32,26,.28);
  --shadow-pop:0 2px 6px rgba(21,32,26,.08);
  --ring:0 0 0 3px color-mix(in srgb, var(--primary) 26%, transparent);
  --ease:cubic-bezier(.4,0,.2,1);
  --step:100%;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--primary) 8%, transparent) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

.page{max-width:600px; margin:0 auto; padding:16px 16px 96px}
.brandbar{display:flex; align-items:center; gap:10px; min-height:60px; padding:14px 4px 6px}
.wordmark{font-weight:700; font-size:1.2rem; letter-spacing:-.015em; color:var(--ink)}
.logo-mark{height:30px; width:auto; display:block; flex:none}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:28px 26px 24px; position:relative; overflow:hidden;
}

/* headings */
h1{font-size:1.55rem; line-height:1.22; letter-spacing:-.02em; margin:2px 0 8px; font-weight:700; text-wrap:balance}
.intro{color:var(--ink-2); margin:0 0 4px; max-width:52ch}
.greet{margin:14px 0 0; font-weight:500}
.muted{color:var(--ink-2)}

/* progress — sticky at top of card */
.progress-wrap{position:sticky; top:8px; z-index:5; background:var(--surface); padding:14px 0 16px; margin-bottom:6px}
.progress-meta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.progress-step{font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.progress-pct{font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.progress{height:7px; background:var(--muted-2); border-radius:99px; overflow:hidden}
.progress .bar{height:100%; width:0; background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 62%,var(--accent))); border-radius:99px; transition:width .45s var(--ease)}

/* steps + transition */
.step{border:0; margin:0; padding:0; min-inline-size:auto}
.step[hidden]{display:none}
.step-title{padding:0; margin:2px 0 16px; font-size:1.16rem; font-weight:700; letter-spacing:-.01em; line-height:1.3}
.step.animate-in{animation:stepIn .26s var(--ease) both}
.step.animate-out{animation:stepOut .16s var(--ease) both}
@keyframes stepIn{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
@keyframes stepOut{from{opacity:1; transform:none} to{opacity:0; transform:translateX(-12px)}}

/* questions */
.q{padding:18px 0; border-top:1px solid var(--line)}
.q:first-of-type{border-top:0; padding-top:4px}
.q-label{display:block; font-weight:600; margin-bottom:11px; line-height:1.45}
.q-label .req{color:var(--err); margin-left:2px}
.q-help{margin:-5px 0 12px; font-size:.86rem; color:var(--ink-3)}

.input{
  width:100%; padding:13px 14px; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  appearance:none; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none; border-color:var(--primary); box-shadow:var(--ring)}
textarea.input{resize:vertical; min-height:104px; line-height:1.55}
select.input{cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 21px,calc(100% - 15px) 21px; background-size:6px 6px; background-repeat:no-repeat; padding-right:44px}

/* choice cards */
.choices{display:flex; flex-direction:column; gap:9px}
.choice{
  display:flex; align-items:center; gap:12px; padding:14px 15px; cursor:pointer; min-height:54px;
  border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface);
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.choice:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--line-strong))}
.choice input{width:20px; height:20px; margin:0; flex:none; accent-color:var(--primary); cursor:pointer}
.choice span{flex:1; line-height:1.4}
.choice:has(input:checked){border-color:var(--primary); background:color-mix(in srgb,var(--primary) 6%,var(--surface)); box-shadow:inset 0 0 0 1px var(--primary)}
.choice:focus-within{box-shadow:var(--ring)}

/* "Other" write-in */
.other-input{margin-top:9px; animation:stepIn .2s var(--ease) both}
.other-input.is-hidden{display:none}

/* nav — sticky footer */
.nav{
  position:sticky; bottom:0; display:flex; gap:10px; align-items:center; margin-top:26px;
  padding:16px 0 10px; background:linear-gradient(to top, var(--surface) 72%, transparent);
}
.btn{
  appearance:none; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:1rem;
  padding:14px 24px; border-radius:var(--radius-sm); min-height:52px; color:#fff; background:var(--primary);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:filter .16s var(--ease), transform .08s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn[disabled]{opacity:.7; cursor:progress}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-strong)}
.btn.ghost:hover{filter:none; border-color:var(--primary); color:var(--primary)}
.btn.submit{background:var(--accent)}
#nextBtn,.btn.submit{margin-left:auto}

/* spinner */
.spin{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* messages */
.alert{display:flex; gap:10px; align-items:flex-start; background:var(--err-bg); color:var(--err);
  border:1px solid var(--err-line); border-radius:var(--radius-sm); padding:12px 14px; margin:0 0 18px; font-size:.92rem; font-weight:500}
.field-error{color:var(--err); font-size:.85rem; margin:8px 0 0; font-weight:500; display:flex; gap:6px; align-items:center}
.q.has-error .choice, .q.has-error .input{border-color:var(--err-line)}
.q.shake{animation:shake .3s var(--ease)}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* done */
.done{text-align:center; padding:22px 4px 8px}
.done .checkmark{width:76px; height:76px; margin:0 auto 18px; display:block}
.done .checkmark circle{fill:none; stroke:var(--primary); stroke-width:5; opacity:.18}
.done .checkmark path{fill:none; stroke:var(--primary); stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48; animation:draw .5s .15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done h1{margin-top:2px}

.foot{padding:20px 8px 8px; color:var(--ink-3); font-size:.8rem; text-align:center; line-height:1.5}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@media (max-width:480px){
  .card{padding:22px 17px 18px}
  h1{font-size:1.4rem}
  .page{padding-bottom:80px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .progress .bar{transition:none}
}