/* ==========================================================================
   Design tokens (imported from Claude Design project "Private Seller Design
   System" — templates/onboarding-quiz). Inlined into one file on purpose:
   fewer requests, and this project only ever needs this one screen's tokens.
   ========================================================================== */
:root{
  /* colors */
  --black-1:#0a0a0a;
  --black-2:#101010;
  --black-3:#151515;
  --gray-1:#1a1a1a;
  --gray-2:#333333;
  --gray-3:#4d4d4d;
  --gray-4:#707070;
  --gray-5:#a7a7a7;
  --gray-6:#d9d9d9;
  --gray-7:#f5f5f5;
  --white:#ffffff;
  --blue-1:#0c3aa0;
  --blue-2:#024be9;
  --blue-3:#0050fe;
  --blue-4:#3d7bff;
  --green-1:#0b9e37;
  --bg-page:var(--black-1);
  --bg-card:var(--black-2);
  --bg-card-hover:var(--black-3);
  --bg-input:transparent;
  --border-subtle:var(--gray-2);
  --border-strong:rgba(255,255,255,0.16);
  --text-primary:var(--gray-7);
  --text-secondary:var(--gray-5);
  --text-tertiary:var(--gray-4);
  --text-on-accent:var(--white);
  --accent:var(--blue-3);
  --accent-strong:var(--blue-2);
  --accent-soft:var(--blue-1);
  --accent-gradient:linear-gradient(135deg,var(--blue-2) 0%,var(--blue-3) 60%,var(--blue-4) 100%);
  --watermark-color:var(--blue-1);
  --toggle-track-on:var(--gray-6);
  --toggle-knob-on:#2b2b2b;
  --toggle-track-off:var(--gray-1);
  --toggle-knob-off:var(--gray-6);
  --success:var(--green-1);

  /* typography */
  --font-display:'Poppins',-apple-system,sans-serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --fs-watermark:180px;
  --fs-h1:34px;
  --fs-h2:26px;
  --fs-h3:20px;
  --fs-body-lg:19px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --lh-tight:1.15;
  --lh-normal:1.4;
  --lh-relaxed:1.55;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:48px;
  --space-9:64px;
  --space-10:96px;
  --card-width:640px;
  --card-padding:56px;

  /* effects */
  --radius-card:16px;
  --radius-input:2px;
  --radius-pill:999px;
  --radius-sm:6px;
  --border-w:1px;
  --shadow-card:0 20px 60px rgba(0,0,0,0.45);
  --shadow-button:0 8px 24px rgba(2,75,233,0.35);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:150ms;
  --dur-normal:240ms;
  --dur-slow:400ms;
}

@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');unicode-range:U+00C0-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJnedHFF.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa25L7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   Base / layout — recreated from OnboardingQuiz.dc.html
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-page)}
body{font-family:var(--font-body)}

.page{
  position:relative;min-height:100vh;background:var(--bg-page);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:40px 20px;
}

.watermark{
  display:none;
  text-align:center;pointer-events:none;max-width:100%;
  font-family:var(--font-display);font-weight:700;font-size:clamp(28px,6vw,56px);
  letter-spacing:-0.01em;line-height:1.05;margin:0 0 var(--space-7);
  background-image:linear-gradient(90deg,var(--black-1) 0%,var(--blue-1) 30%,var(--blue-3) 50%,var(--blue-1) 70%,var(--black-1) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.watermark.show{display:block}

.stage{
  position:relative;z-index:1;width:640px;max-width:100%;
  display:flex;flex-direction:column;align-items:center;
}

.topbar{
  display:none;
  position:absolute;top:0;left:0;right:0;height:78px;
  border-bottom:1px solid var(--border-subtle);
  font-family:var(--font-body);font-size:18px;color:var(--text-secondary);
  overflow:hidden;white-space:nowrap;align-items:center;
}
.topbar.show{display:flex}
.topbar-track{display:inline-flex;align-items:center;animation:marqueeLoop 24s linear infinite}
.topbar-track span{display:inline-block;padding-right:120px}
.topbar-track strong{color:var(--text-primary);font-weight:600}
@keyframes marqueeLoop{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.card{
  position:relative;z-index:1;width:640px;max-width:100%;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:clamp(28px,6vw,56px);
  color:var(--text-primary);font-family:var(--font-body);
}

.step{display:none}
.step.active{display:block}

h2{margin:0}
p{margin:0}

/* Step 0 — profile */
.step0 h2{margin:0 0 20px;font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--text-primary)}

/* Step 1 — name */
.step1 h2{margin:0 0 24px;font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--text-primary);line-height:1.2}
.field-label{display:block;color:var(--text-secondary);font-size:15px;margin-bottom:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-input{
  width:100%;margin-top:12px;background:transparent;border:none;border-bottom:1px solid var(--border-strong);
  color:var(--text-primary);font-family:var(--font-body);font-size:19px;padding:0 0 12px;outline:none;
}
.text-input::placeholder{color:var(--text-secondary);opacity:1;font-family:var(--font-body)}

/* Step 2 — whatsapp */
.step2 h2{margin:0 0 12px;font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--text-primary)}
.step2 p{margin:0 0 24px;color:var(--text-secondary);font-size:16px}
.phone-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border-strong);padding-bottom:12px}
.phone-flag{font-size:22px}
.phone-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-family:var(--font-body);font-size:19px}

/* Step 3 — budget */
.step3 h2{margin:0 0 20px;font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--text-primary);line-height:1.25}
.step3 p{margin:0 0 16px;color:var(--text-primary);font-size:20px;font-weight:500}

/* Step 4 — timeline */
.step4 h2{margin:0 0 20px;font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--text-primary);line-height:1.25}

/* Step 5 — confirmation */
.step5{text-align:center}
.step5 h2{margin:0 0 20px;font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--blue-3)}
.step5 .lead{margin:0 0 16px;color:var(--blue-4);font-weight:600;font-size:17px;line-height:1.5}
.step5 .sub{margin:0 0 24px;color:var(--blue-4);font-size:15px}

/* Toggle-option rows (profile / budget / timeline) */
.option-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;cursor:pointer}
.option-label{color:var(--text-secondary);font-size:clamp(15px,2vw,19px)}
.toggle{width:49px;height:28px;border-radius:999px;flex-shrink:0;position:relative;transition:background var(--dur-normal) var(--ease-standard)}
.toggle.on{background:var(--accent)}
.toggle.off{background:var(--toggle-track-off);border:1px solid var(--border-subtle)}
.toggle-knob{position:absolute;top:4px;width:20px;height:20px;border-radius:50%;transition:left var(--dur-normal) var(--ease-standard)}
.toggle.on .toggle-knob{left:21px;background:var(--toggle-knob-on)}
.toggle.off .toggle-knob{left:4px;background:var(--toggle-knob-off)}

/* Buttons */
.btn-continue,.btn-cta{
  padding:16px 28px;border-radius:999px;border:none;background:var(--accent-gradient);
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:16px;cursor:pointer;
  box-shadow:var(--shadow-button);
  transition:transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}
.btn-continue{margin-top:28px;width:100%;opacity:1}
.btn-continue:disabled{cursor:not-allowed;opacity:0.5}
.btn-continue:active:not(:disabled),.btn-cta:active{transform:scale(0.97)}