@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

.spectus-quiz{
  --spectus-primary:#111;
  --spectus-accent:#111;
  --spectus-ink-dark: color-mix(in srgb, var(--spectus-primary) 82%, black);
  --spectus-ink-tint: color-mix(in srgb, var(--spectus-primary) 10%, white);
  --spectus-accent-dark: color-mix(in srgb, var(--spectus-accent) 78%, black);
  --spectus-cream:#FAF6ED;
  --spectus-card:#FFFFFF;
  --spectus-sand:#E7DFCE;
  --spectus-text:#2B332F;
  --spectus-text-muted:#6E7A73;
  --spectus-serif:'Fraunces',Georgia,serif;
  --spectus-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  max-width:560px;
  margin:30px auto;
  padding:0;
  background:var(--spectus-card);
  border:1px solid var(--spectus-sand);
  border-radius:18px;
  box-shadow:0 1px 2px rgba(21,55,51,.04), 0 12px 32px -16px rgba(21,55,51,.18);
  overflow:hidden;
  font-family:var(--spectus-sans);
  color:var(--spectus-text);
  box-sizing:border-box;
}
.spectus-quiz *{box-sizing:border-box}
.spectus-quiz [hidden]{display:none}

/* ---------- Intro ---------- */
.spectus-quiz__intro{padding:40px 40px 32px}
.spectus-quiz__intro h2{font-family:var(--spectus-serif);font-size:28px;font-weight:600;line-height:1.2;color:var(--spectus-ink-dark);margin:0 0 12px}
.spectus-quiz__intro p{font-size:15.5px;line-height:1.6;color:var(--spectus-text-muted);margin:0 0 26px;max-width:42ch}

/* ---------- Progress ---------- */
.spectus-quiz__form{padding:0}
.spectus-quiz__progress{padding:26px 40px 0;margin:0 0 -6px}

.spectus-quiz__progress-label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:12.5px;
  font-weight:600;
  color:var(--spectus-text-muted);
  margin-bottom:12px;
}
.spectus-quiz__progress-label .spectus-quiz__progress-percent{color:var(--spectus-primary)}

.spectus-quiz__track{
  position:relative;
  height:4px;
  background:var(--spectus-sand);
  border-radius:4px;
  margin-bottom:4px;
}
.spectus-quiz__track-fill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0%;
  background:var(--spectus-primary);
  border-radius:4px;
  transition:width 450ms cubic-bezier(.4,0,.2,1);
}
.spectus-quiz__track-clip{
  position:absolute;
  top:50%;
  left:0%;
  width:15px;height:15px;
  background:var(--spectus-accent);
  border:2.5px solid var(--spectus-card);
  border-radius:4px;
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 1px 3px rgba(21,55,51,.3);
  transition:left 450ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Question step ---------- */
.spectus-quiz__step{padding:26px 40px 0}
.spectus-quiz__step h3{font-family:var(--spectus-serif);font-size:22px;font-weight:600;color:var(--spectus-ink-dark);line-height:1.3;margin:0 0 20px}
.spectus-quiz__step > p{font-size:14.5px;line-height:1.5;color:var(--spectus-text-muted);margin:-10px 0 20px}

.spectus-quiz__options{display:flex;flex-direction:column;gap:10px}

.spectus-quiz__option{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  border:1.5px solid var(--spectus-sand);
  border-radius:12px;
  padding:14px 16px;
  cursor:pointer;
  background:var(--spectus-card);
  transition:border-color 150ms ease, background 150ms ease;
}
.spectus-quiz__option:hover{border-color:#C9DAD5;background:var(--spectus-ink-tint)}
.spectus-quiz__option:has(input:checked){border-color:var(--spectus-primary);background:var(--spectus-ink-tint)}

.spectus-quiz__option input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  position:static;opacity:1;
  width:18px;height:18px;min-width:18px;
  border:1.5px solid #C7CFCB;
  border-radius:50%;
  margin:0;
  display:grid;place-content:center;
  cursor:pointer;
}
.spectus-quiz__option input[type="radio"]::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--spectus-primary);
  transform:scale(0);
  transition:transform 120ms ease;
}
.spectus-quiz__option input[type="radio"]:checked::before{transform:scale(1)}
.spectus-quiz__option input:checked + span{font-weight:500}
.spectus-quiz__option span{font-size:15px;font-weight:500;color:var(--spectus-text)}

.spectus-quiz__error,.spectus-quiz__lead-error{font-size:13px;color:#B3452F;margin-top:10px;min-height:16px}

/* ---------- Actions ---------- */
.spectus-quiz__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 40px 34px;
  border-top:1px solid var(--spectus-sand);
  margin-top:22px;
}

.spectus-quiz button,.spectus-result__button{
  appearance:none;
  border:none;
  background:var(--spectus-primary);
  color:#fff;
  font-family:var(--spectus-sans);
  font-size:15px;
  font-weight:600;
  padding:13px 24px;
  border-radius:10px;
  cursor:pointer;
  transition:background 150ms ease;
  text-decoration:none;
  display:inline-block;
}
.spectus-quiz button:hover,.spectus-result__button:hover{background:var(--spectus-ink-dark)}
.spectus-quiz button:disabled{background:#C7CFCB;cursor:not-allowed}

.spectus-quiz__actions .spectus-quiz__back{
  background:none;
  color:var(--spectus-text-muted);
  font-size:14.5px;
  padding:10px 4px;
}
.spectus-quiz__actions .spectus-quiz__back:hover{background:none;color:var(--spectus-primary)}

/* ---------- Loading ---------- */
.spectus-quiz__loading{
  padding:70px 40px;
  text-align:center;
  font-family:var(--spectus-serif);
  font-size:18px;
  color:var(--spectus-ink-dark);
}
.spectus-quiz__loading::before{
  content:"";
  display:block;
  width:30px;height:30px;
  margin:0 auto 18px;
  border:3px solid var(--spectus-sand);
  border-top-color:var(--spectus-primary);
  border-radius:50%;
  animation:spectus-spin 800ms linear infinite;
}
@keyframes spectus-spin{to{transform:rotate(360deg)}}

/* ---------- Lead form ---------- */
.spectus-quiz__lead{padding:40px 40px 36px;max-width:none;margin:0}
.spectus-quiz__lead h2{font-family:var(--spectus-serif);font-size:24px;font-weight:600;color:var(--spectus-ink-dark);margin:0 0 8px}
.spectus-quiz__lead > p{font-size:15px;color:var(--spectus-text-muted);margin:0 0 26px;line-height:1.55}
.spectus-quiz__lead-form label{display:block;font-size:13px;font-weight:600;color:var(--spectus-text);margin-bottom:16px}
.spectus-quiz__lead-form input{
  display:block;width:100%;margin-top:7px;
  font-family:var(--spectus-sans);font-size:15px;font-weight:400;
  color:var(--spectus-text);background:var(--spectus-cream);
  border:1.5px solid var(--spectus-sand);border-radius:10px;padding:12px 14px;
}
.spectus-quiz__lead-form input:focus{outline:none;border-color:var(--spectus-primary);background:var(--spectus-card)}
.spectus-quiz__lead-form small{display:block;font-size:12.5px;color:var(--spectus-text-muted);line-height:1.5;margin:4px 0 20px}
.spectus-quiz__lead-form > button{width:100%;padding:14px 24px}

/* ---------- Result ---------- */
.spectus-result__inner{display:block}

.spectus-result__content{padding:32px 40px 36px}

.spectus-result__eyebrow{font-size:13px;font-weight:600;color:var(--spectus-accent-dark);margin-bottom:8px}
.spectus-result__content h2{font-family:var(--spectus-serif);font-size:26px;font-weight:600;color:var(--spectus-ink-dark);margin:0 0 10px;line-height:1.2}
.spectus-result__size{
  display:inline-block;font-size:13.5px;font-weight:500;color:var(--spectus-ink-dark);
  background:var(--spectus-ink-tint);border:1px solid #CFE0DB;border-radius:20px;
  padding:6px 14px;margin:0 0 26px;
}
.spectus-result__size strong{font-weight:600}

.spectus-result__section{margin:0 0 24px}
.spectus-result__section h3{font-family:var(--spectus-sans);font-size:13.5px;font-weight:600;color:var(--spectus-text);margin:0 0 8px}
.spectus-result__section p{font-size:15px;line-height:1.65;color:var(--spectus-text-muted);margin:0}
.spectus-result__section ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.spectus-result__section li{font-size:15px;color:var(--spectus-text);padding-left:24px;position:relative;line-height:1.5}
.spectus-result__section li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--spectus-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

.spectus-result__secondary{border:1px solid var(--spectus-sand);border-radius:12px;padding:16px 18px;margin:0 0 28px}
.spectus-result__secondary strong{display:block;font-size:13.5px;font-weight:600;color:var(--spectus-accent-dark);margin-bottom:4px}
.spectus-result__secondary p{font-size:14px;color:var(--spectus-text-muted);margin:0;line-height:1.55}

.spectus-result__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-start;margin-top:0}
.spectus-result__button{padding:14px 26px}
.spectus-result__restart{
  background:transparent!important;
  color:var(--spectus-text-muted)!important;
  border:none!important;
  font-family:var(--spectus-sans);
  font-size:14.5px;
  font-weight:600;
  padding:0!important;
  text-decoration:underline;
  text-underline-offset:3px;
}
.spectus-result__restart:hover{color:var(--spectus-primary)!important;background:transparent!important}

@media (max-width:600px){
  .spectus-quiz{margin:16px auto;border-radius:14px}
  .spectus-quiz__intro,
  .spectus-quiz__progress,
  .spectus-quiz__step,
  .spectus-quiz__actions,
  .spectus-quiz__loading,
  .spectus-quiz__lead,
  .spectus-result__content{padding-left:22px;padding-right:22px}
}