/* ===== Quiz page ===== */
.quiz-page{
  --brand:#CF9358;
  min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -100px, var(--cream-2) 0%, var(--cream) 60%, var(--cream) 100%);
  display:flex;flex-direction:column;
  overflow:hidden;
}

.quiz-nav{
  display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:24px;
  padding:18px clamp(16px,3vw,40px);
  background:rgba(250,249,245,.7);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.quiz-progress{display:flex;align-items:center;gap:14px;justify-content:center}
.quiz-progress-bar{
  flex:1;max-width:380px;height:6px;background:rgba(20,20,19,.08);border-radius:999px;overflow:hidden;
}
.quiz-progress-fill{
  display:block;height:100%;width:16.66%;
  background:linear-gradient(90deg, var(--ink), var(--brand));
  border-radius:999px;
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.quiz-progress-text{font-size:13px;color:var(--ink-2);min-width:90px;text-align:right}

.quiz-main{
  flex:1;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  max-width:1400px;
  width:100%;
  margin:0 auto;
  padding:clamp(40px,6vw,80px) clamp(16px,3vw,40px);
}

/* ambient background orbs */
.quiz-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg-orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  animation:bg-drift 18s ease-in-out infinite;
}
.bg-orb--1{
  width:420px;height:420px;top:-100px;left:-100px;
  background:radial-gradient(circle at 30% 30%, #fff, var(--tan-soft) 40%, var(--brand) 100%);
}
.bg-orb--2{
  width:380px;height:380px;bottom:-120px;right:-80px;
  background:radial-gradient(circle at 30% 30%, #fff, var(--lilac-soft) 40%, var(--lilac) 100%);
  animation-delay:-6s;
}
.bg-orb--3{
  width:300px;height:300px;top:40%;left:40%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--sage-soft) 40%, var(--sage) 100%);
  animation-delay:-12s;opacity:.35;
}
@keyframes bg-drift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.08)}
}

/* ===== Stage / steps ===== */
.quiz-stage{
  position:relative;z-index:2;
  padding:0 clamp(20px,4vw,60px);
  display:flex;flex-direction:column;
  min-height:560px;
}
.step{
  display:none;
  animation:slideIn .55s cubic-bezier(.2,.7,.2,1) both;
}
.step.is-active{display:flex;flex-direction:column;gap:18px}
.step .overline{margin:0 0 4px;color:var(--brand)}
.step .display{font-size:clamp(36px,4.6vw,62px);margin-bottom:8px}
.step .lede{margin-bottom:8px}

@keyframes slideIn{
  from{opacity:0;transform:translateY(20px) scale(.99)}
  to{opacity:1;transform:none}
}

/* choices */
.choice-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px;
}
.choice-grid--multi{grid-template-columns:repeat(3,1fr)}
.choice{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  text-align:left;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.choice:hover{transform:translateY(-2px);border-color:rgba(20,20,19,.25);box-shadow:0 14px 28px -16px rgba(20,20,19,.25)}
.choice.is-selected{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent), 0 14px 28px -16px rgba(20,20,19,.25);
  background:color-mix(in srgb, var(--brand) 6%, var(--paper));
}
.choice-icon{font-size:28px;line-height:1}
.choice-label{font-weight:600;font-size:16px;letter-spacing:-.01em}
.choice-desc{font-size:13px;color:var(--ink-2)}
.choice-grid--multi .choice{padding:18px;flex-direction:row;align-items:center;gap:12px}
.choice-grid--multi .choice-label{font-size:15px}

/* slider */
.slider-card{
  background:var(--paper);border:1px solid var(--line);border-radius:24px;
  padding:36px;display:flex;flex-direction:column;gap:14px;
  align-items:center;
}
.slider-value{
  font-family:var(--sans);font-weight:600;font-size:72px;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg, var(--ink), var(--brand));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.slider-unit{color:var(--ink-2);font-size:14px;margin-bottom:18px}
#visitorRange{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg, var(--ink) 0%, var(--brand) var(--p,20%), rgba(20,20,19,.08) var(--p,20%));
  outline:none;
}
#visitorRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--ink);
  box-shadow:0 6px 14px -4px rgba(20,20,19,.4);
  cursor:grab;
  transition:transform .1s ease;
}
#visitorRange::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
#visitorRange::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--ink);
}
.slider-scale{display:flex;justify-content:space-between;width:100%;font-size:12px;color:var(--ink-2)}

/* swatches */
.swatch-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:8px}
.swatch{
  aspect-ratio:1;border-radius:50%;background:var(--c,#000);position:relative;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(20,20,19,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.swatch:hover{transform:scale(1.08)}
.swatch.is-selected{
  box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--c), 0 12px 24px -10px rgba(20,20,19,.4);
  transform:scale(1.08);
}
.swatch--custom{
  background:conic-gradient(from 0deg, red,orange,yellow,lime,cyan,blue,magenta,red);
  overflow:hidden;
}
.swatch--custom input{
  position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;
}

.quiz-name-row{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.quiz-name-row label{font-size:13px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.quiz-name-row input,
.quiz-final input{
  font:inherit;font-size:18px;padding:16px 20px;
  border-radius:16px;border:1px solid var(--line);background:var(--paper);
  outline:none;transition:border-color .2s ease, box-shadow .2s ease;
}
.quiz-name-row input:focus,
.quiz-final input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* final */
.quiz-final{display:flex;flex-direction:column;gap:14px;max-width:480px}
.quiz-final .pill{align-self:flex-start}
.quiz-fine{font-size:12px;color:var(--ink-2);margin:6px 0 0}
.quiz-receipt{
  margin-top:32px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;
  max-width:560px;
}
.quiz-receipt h3{margin:0 0 14px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:500}
.quiz-receipt dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
.quiz-receipt dt{color:var(--ink-2)}
.quiz-receipt dd{margin:0;color:var(--ink);font-weight:500}

/* nav footer */
.quiz-foot{
  display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:36px;
}

/* ===== Live preview ===== */
.quiz-preview{
  position:relative;z-index:2;
  padding:0 clamp(20px,4vw,60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.quiz-preview .overline{margin:0;color:var(--brand)}

.preview-phone{
  position:relative;
  width:340px;
  border-radius:36px;
  background:#0F0F0E;
  padding:14px;
  box-shadow:
    0 60px 100px -30px rgba(20,20,19,.45),
    0 20px 40px -12px rgba(20,20,19,.3),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform:perspective(1200px) rotateY(-12deg) rotateX(4deg);
  transition:transform .4s ease;
  will-change:transform;
}
.preview-phone::before{
  content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:90px;height:24px;border-radius:0 0 14px 14px;background:#000;z-index:3;
}
.preview-phone-screen{
  background:var(--cream);
  border-radius:26px;padding:42px 18px 18px;
  display:flex;flex-direction:column;gap:14px;
  min-height:520px;
  position:relative;overflow:hidden;
}
.preview-header{display:flex;gap:10px;align-items:center}
.preview-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #000));
  box-shadow:0 4px 10px -2px color-mix(in srgb, var(--brand) 50%, transparent);
}
.preview-name{margin:0;font-weight:600;font-size:15px}
.preview-status{margin:2px 0 0;font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.preview-thread{display:flex;flex-direction:column;gap:6px;flex:1}
.preview-thread .bubble{font-size:12px;padding:8px 10px;border-radius:12px;max-width:80%}
.preview-thread .bubble--in{background:#fff;border:1px solid var(--line)}
.preview-chips{display:flex;flex-wrap:wrap;gap:6px}
.preview-chips span{
  background:var(--brand);color:#fff;font-size:11px;padding:6px 10px;border-radius:999px;
  box-shadow:0 4px 10px -4px color-mix(in srgb, var(--brand) 50%, transparent);
  transition:background .3s ease;
}
.preview-input{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:10px 14px;font-size:12px;color:rgba(20,20,19,.45);
}
.preview-mic{
  width:22px;height:22px;border-radius:50%;background:var(--brand);
  box-shadow:0 4px 10px -3px color-mix(in srgb, var(--brand) 60%, transparent);
}

.preview-glow{
  position:absolute;inset:-20px;border-radius:50px;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--brand) 40%, transparent) 0%, transparent 60%);
  filter:blur(40px);z-index:-1;opacity:.6;
  transition:background .4s ease;
}

.preview-foot{font-size:12px;color:var(--ink-2);text-align:center;max-width:280px;margin:8px 0 0}

/* success step */
.step--success{align-items:flex-start;position:relative;overflow:visible}
.success-card{
  background:var(--ink);color:#fff;border-radius:20px;padding:22px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  max-width:680px;
}
.success-card code{
  font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.01em;line-height:1.5;
  white-space:nowrap;overflow-x:auto;
  display:block;
}
.tok-c{color:#ABB2BF}
.tok-a{color:#E5C07B}
.tok-s{color:#98C379}

.confetti{
  position:absolute;inset:-40px -100px;pointer-events:none;
  background:
    radial-gradient(circle, var(--brand) 1.5px, transparent 2px) 10% 20% / 100px 100px,
    radial-gradient(circle, var(--lilac) 1.5px, transparent 2px) 40% 80% / 80px 80px,
    radial-gradient(circle, var(--sage) 1.5px, transparent 2px) 70% 30% / 120px 120px,
    radial-gradient(circle, var(--peach) 1.5px, transparent 2px) 90% 60% / 90px 90px;
  animation:conf 6s linear infinite;
  opacity:.7;z-index:-1;
}
@keyframes conf{
  0%{background-position:10% 20%, 40% 80%, 70% 30%, 90% 60%}
  100%{background-position:30% 60%, 60% 30%, 90% 80%, 110% 20%}
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .quiz-main{grid-template-columns:1fr;padding:24px 16px 40px}
  /* Quiz form FIRST, preview after — user lands on the form, not the decoration */
  .quiz-stage{order:1;min-height:auto;padding:0}
  .quiz-preview{order:2;margin-top:32px;align-items:center}
  .preview-phone{width:260px;transform:none}
  .quiz-nav{grid-template-columns:auto 1fr auto}
  .quiz-progress-bar{max-width:200px}
}
@media (max-width:560px){
  .quiz-main{padding:16px 14px 32px;gap:0}
  .quiz-stage{padding:0}
  .choice-grid,.choice-grid--multi{grid-template-columns:1fr;gap:10px}
  .choice{padding:16px;border-radius:14px}
  .swatch-grid{grid-template-columns:repeat(4,1fr)}
  .quiz-progress-text{display:none}
  .step .display{font-size:clamp(28px,8vw,38px);line-height:1.1}
  .step .lede{font-size:15px}
  /* Compact the preview — it's decorative, not the path forward */
  .quiz-preview{margin-top:20px;gap:8px}
  .quiz-preview .overline{font-size:11px}
  .preview-phone{width:220px}
  .preview-foot{font-size:11px;max-width:240px}
  /* Sticky nav buttons so users can always advance without scrolling */
  .quiz-nav{position:sticky;top:0;z-index:10;background:rgba(var(--paper-rgb),.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 12px}
  /* Quiz final / success — tighter */
  .quiz-final{gap:10px}
  .step--success .quiz-final{padding:20px 16px}
}
@media (max-width:560px){
  /* Success step — long emails and code snippets break layout */
  .step--success{overflow:hidden}
  .step--success .display{font-size:clamp(26px,7vw,34px);line-height:1.15}
  .step--success p{overflow-wrap:anywhere;word-break:break-word}
  .success-card{padding:16px;border-radius:14px;flex-direction:column;align-items:stretch;min-width:0}
  .success-card code{font-size:11px;min-width:0;max-width:100%;width:100%}
  /* Confetti overflow leak on tiny screens — fully contain */
  .confetti{inset:-10px 0}
  /* Ensure quiz-main never overflows */
  .quiz-main{overflow-x:hidden}
}
@media (max-width:400px){
  /* Tiny phones — hide the preview entirely; it's not load-bearing */
  .quiz-preview{display:none}
}