* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, sans-serif;
  background: #D7A4BF;
  color: #121212;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
}

.logo-header {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 0 8px;
}

.quiz-wrap {
  width: 100%;
  max-width: 640px;
  background: #FFF6F8;
  border-radius: 20px;
  padding: 32px 40px 44px;
  border: 1px solid #F0D9E2;
  box-shadow: 0 20px 50px rgba(75,0,31,0.35);
}

.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.35s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Nav --- */
.site-nav {
  display: flex; justify-content: center; gap: 28px;
  margin-bottom: 36px; padding-bottom: 18px;
  border-bottom: 1px solid #F0D9E2;
}
.nav-link {
  background: none; border: none; font-family: "Inter", sans-serif;
  font-size: 14px; font-weight: 600; color: #4B001F;
  cursor: pointer; padding: 4px 2px; text-decoration: none;
}
.nav-link:hover { color: #D7A4BF; }
.nav-link.active { color: #4B001F; border-bottom: 2px solid #4B001F; }

/* --- Intro --- */
#intro-screen { text-align: center; }
.prompt { color: #C4197A; font-size: 14px; font-weight: 600; margin: 8px 0 16px; }

/* --- Type stack --- */
.type-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }

.type-card {
  border-radius: 16px; border: 1.5px solid;
  text-align: left; cursor: pointer;
  overflow: hidden; transition: transform 0.12s ease;
}
.type-card:hover { transform: translateY(-2px); }

.type-card-main {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
}
.type-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.type-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.type-name { font-size: 15px; font-weight: 700; }
.type-vibe { font-size: 12px; font-weight: 400; opacity: 0.85; }
.type-chevron {
  font-size: 20px; font-weight: 300; opacity: 0.6;
  transition: transform 0.2s ease; line-height: 1;
}
.type-card.open .type-chevron { transform: rotate(90deg); }

.type-expand {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.2s ease;
  padding: 0 18px;
}
.type-card.open .type-expand {
  max-height: 300px;
  padding: 0 18px 16px;
}
.type-expand p { font-size: 13px; line-height: 1.6; margin: 0 0 8px; }
.type-celebs { opacity: 0.75; font-style: italic; }
.type-cta { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.type-cta:hover { opacity: 0.75; }

.type-brat-mother    { background: #2A003A; border-color: #5A0070; }
.type-brat-mother .type-name { color: #C4C4C4; }
.type-brat-mother .type-vibe { color: #B8A0C0; }
.type-brat-mother .type-expand p { color: #C4C4C4; }
.type-brat-mother .type-cta { color: #E8C3D3; }

.type-brat-babygirl  { background: #F2E6FF; border-color: #C44BD8; }
.type-brat-babygirl .type-name { color: #B030D8; }
.type-brat-babygirl .type-vibe { color: #8830A8; }
.type-brat-babygirl .type-expand p { color: #8830A8; }
.type-brat-babygirl .type-cta { color: #B030D8; }

.type-demure-mother  { background: #FAE8EA; border-color: #D4A0A8; }
.type-demure-mother .type-name { color: #8E5D65; }
.type-demure-mother .type-vibe { color: #A87078; }
.type-demure-mother .type-expand p { color: #8E5D65; }
.type-demure-mother .type-cta { color: #8E5D65; }

.type-demure-babygirl { background: #F4F0FF; border-color: #D4C8F0; }
.type-demure-babygirl .type-name { color: #8878B8; }
.type-demure-babygirl .type-vibe { color: #9888C0; }
.type-demure-babygirl .type-expand p { color: #8878B8; }
.type-demure-babygirl .type-cta { color: #8878B8; }

/* --- Method note --- */
.method-note {
  text-align: left;
  background: #FBEEF3;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 32px 0 20px;
}
.method-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #C4197A;
  margin: 0 0 10px;
}
.method-note p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #4B001F;
  margin: 0 0 10px;
}
.method-note p:last-child { margin-bottom: 0; }
.method-sweet {
  font-style: italic;
  color: #A8607F;
  margin-top: 14px !important;
}
.method-disclaimer {
  font-style: italic;
  color: #A8607F !important;
}

.quiz-instruction {
  font-size: 12.5px;
  color: #A8607F;
  font-style: italic;
  margin: 0 0 16px;
  text-align: center;
}

/* --- Buttons --- */
.btn-primary {
  display: inline-block; background: #D7A4BF; color: #121212;
  border: none; padding: 15px 36px; font-family: "Inter", sans-serif;
  font-weight: 600; font-size: 16px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 6px 0 #A8607F; transition: transform 0.12s ease;
}
.btn-primary:hover  { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 3px 0 #A8607F; }

.btn-secondary {
  background: none; border: 1.5px solid #E8C3D3; color: #A8607F;
  padding: 10px 22px; font-family: "Inter", sans-serif;
  font-weight: 500; font-size: 14px; border-radius: 999px;
  cursor: pointer; margin-top: 24px;
}
.btn-secondary:hover { background: #FBEEF3; border-color: #D7A4BF; }

.result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.result-actions .btn-secondary { margin-top: 0; }

.result-shop {
  margin: 32px auto 8px;
  max-width: 320px;
}
.result-shop iframe {
  background: transparent !important;
}

/* --- Quiz --- */
h2 { font-size: 21px; font-weight: 600; margin: 18px 0 28px; line-height: 1.4; color: #121212; }
.progress-bar { height: 8px; background: #FBEEF3; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #D7A4BF, #A8607F); width: 0%; transition: width 0.3s ease; }
.progress-label { font-size: 13px; font-weight: 500; color: #D7A4BF; margin: 0 0 8px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option-btn {
  text-align: left; padding: 15px 18px; border: 1.5px solid #F0D9E2;
  border-radius: 14px; background: #fff; font-family: "Inter", sans-serif;
  font-size: 15px; color: #121212; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .option-btn:hover { border-color: #D7A4BF; background: #FBEEF3; }
}
.option-btn.selected { border-color: #D7A4BF; background: #FBEEF3; font-weight: 600; }
.nav-buttons { display: flex; justify-content: flex-start; }

/* --- Email gate --- */
.email-gate { text-align: center; padding: 16px 0; }
.email-gate-eyebrow { text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; font-weight: 600; color: #D7A4BF; margin: 0 0 10px; }
.email-gate-heading { font-size: 22px; font-weight: 700; color: #4B001F; margin: 0 0 24px; line-height: 1.3; }
#email-gate-form { display: flex; flex-direction: column; align-items: center; }
.email-input {
  width: 100%; max-width: 340px; padding: 12px 16px;
  border: 1.5px solid #E8C3D3; border-radius: 999px;
  font-family: "Inter", sans-serif; font-size: 15px;
  color: #121212; background: #fff; outline: none; text-align: center;
}
.email-input:focus { border-color: #D7A4BF; }
.email-consent { font-size: 11px; color: #A8607F; margin: 10px 0 0; line-height: 1.5; }
.skip-email-link {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: #A8607F;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.skip-email-link:hover { opacity: 0.75; }

.email-result-form {
  max-width: 320px;
  margin: 16px auto 0;
  text-align: center;
}
.email-result-form .email-input { width: 100%; }
.email-result-status {
  font-size: 12px;
  color: #A8607F;
  margin: 10px 0 0;
}

/* --- Result --- */
#result-screen { text-align: center; }
.result-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; font-weight: 600; color: #D7A4BF; margin-bottom: 6px; }
#result-title { font-size: 34px; font-weight: 700; margin-bottom: 16px; }
#result-screen.tone-brat   #result-title { color: #A8607F; }
#result-screen.tone-demure #result-title { color: #D7A4BF; }
#result-description { font-size: 16px; color: #A8607F; line-height: 1.6; margin-bottom: 20px; }

.result-extended { text-align: left; margin-bottom: 24px; }
.result-extended p { font-size: 15px; color: #4B001F; line-height: 1.7; margin: 0 0 14px; }

.result-adjacent {
  background: #FBEEF3; border-radius: 12px;
  padding: 14px 16px; margin: 20px 0;
}
.adjacent-label { font-size: 13px; color: #A8607F; margin: 0 0 4px; }
.adjacent-label strong { color: #4B001F; }
.adjacent-note { font-size: 13px; color: #A8607F; margin: 0; line-height: 1.6; }

.result-celebs { font-size: 13px; color: #A8607F; margin: 0; line-height: 1.6; }
.result-celebs strong { color: #4B001F; }

/* --- Charts --- */
.chart-section, .home-chart-section { margin: 32px 0 8px; }
.chart-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #C4197A; margin-bottom: 12px; }
.chart-wrap { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 380px; margin: 0 auto; border: 1px solid #F0D9E2; border-radius: 14px; padding: 10px; }
.chart-legend { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; font-size: 13px; color: #A8607F; }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; }
.legend-dot-you    { background: #bb277c; border: 2px solid #FFF6F8; outline: 1px solid #bb277c; }
.legend-dot-others { background: rgba(140,26,26,0.55); }
.chart-explainer { margin-top: 14px; background: #FBEEF3; border-radius: 12px; padding: 14px 16px; font-size: 13px; color: #A8607F; line-height: 1.6; text-align: left; }
.chart-explainer strong { color: #4B001F; }

/* --- Result themes --- */
.quiz-wrap.result-brat-mother { background: #2A003A; border-color: #5A0070; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.quiz-wrap.result-brat-mother .nav-link { color: #C4C4C4; }
.quiz-wrap.result-brat-mother .result-label { color: #8C1A1A; }
.quiz-wrap.result-brat-mother #result-title { color: #C4C4C4; }
.quiz-wrap.result-brat-mother #result-description { color: #B8A0C0; }
.quiz-wrap.result-brat-mother .result-extended p { color: #C4C4C4; }
.quiz-wrap.result-brat-mother .result-adjacent { background: #3D0050; }
.quiz-wrap.result-brat-mother .adjacent-label, .quiz-wrap.result-brat-mother .adjacent-note, .quiz-wrap.result-brat-mother .result-celebs { color: #B8A0C0; }
.quiz-wrap.result-brat-mother .adjacent-label strong, .quiz-wrap.result-brat-mother .result-celebs strong { color: #C4C4C4; }
.quiz-wrap.result-brat-mother .btn-secondary { border-color: #5A0070; color: #C4C4C4; }
.quiz-wrap.result-brat-mother .chart-label { color: #8C1A1A; }
.quiz-wrap.result-brat-mother .chart-explainer { background: #3D0050; color: #B8A0C0; }
.quiz-wrap.result-brat-mother .chart-explainer strong { color: #8C1A1A; }
.quiz-wrap.result-brat-mother .site-nav { border-bottom-color: #5A0070; }

.quiz-wrap.result-brat-babygirl { background: #F2E6FF; border-color: #C44BD8; }
.quiz-wrap.result-brat-babygirl .result-label { color: #D14F8C; }
.quiz-wrap.result-brat-babygirl #result-title { color: #B030D8; }
.quiz-wrap.result-brat-babygirl #result-description, .quiz-wrap.result-brat-babygirl .result-extended p { color: #8830A8; }
.quiz-wrap.result-brat-babygirl .result-adjacent { background: #EAD4FF; }
.quiz-wrap.result-brat-babygirl .adjacent-label, .quiz-wrap.result-brat-babygirl .adjacent-note, .quiz-wrap.result-brat-babygirl .result-celebs { color: #8830A8; }
.quiz-wrap.result-brat-babygirl .btn-secondary { border-color: #D490E8; color: #9030B8; }
.quiz-wrap.result-brat-babygirl .chart-label { color: #D14F8C; }
.quiz-wrap.result-brat-babygirl .chart-explainer { background: #EAD4FF; color: #8830A8; }

.quiz-wrap.result-demure-mother { background: #FAE8EA; border-color: #D4A0A8; }
.quiz-wrap.result-demure-mother .result-label { color: #C98A90; }
.quiz-wrap.result-demure-mother #result-title { color: #8E5D65; }
.quiz-wrap.result-demure-mother #result-description, .quiz-wrap.result-demure-mother .result-extended p { color: #8E5D65; }
.quiz-wrap.result-demure-mother .result-adjacent { background: #F5D8DC; }
.quiz-wrap.result-demure-mother .adjacent-label, .quiz-wrap.result-demure-mother .adjacent-note, .quiz-wrap.result-demure-mother .result-celebs { color: #A87078; }
.quiz-wrap.result-demure-mother .btn-secondary { border-color: #D4A0A8; color: #8E5D65; }
.quiz-wrap.result-demure-mother .chart-label { color: #C98A90; }
.quiz-wrap.result-demure-mother .chart-explainer { background: #F5D8DC; color: #A87078; }

.quiz-wrap.result-demure-babygirl { background: #F4F0FF; border-color: #D4C8F0; }
.quiz-wrap.result-demure-babygirl .result-label { color: #B4A0CC; }
.quiz-wrap.result-demure-babygirl #result-title { color: #8878B8; }
.quiz-wrap.result-demure-babygirl #result-description, .quiz-wrap.result-demure-babygirl .result-extended p { color: #9888C0; }
.quiz-wrap.result-demure-babygirl .result-adjacent { background: #EDE8FF; }
.quiz-wrap.result-demure-babygirl .adjacent-label, .quiz-wrap.result-demure-babygirl .adjacent-note, .quiz-wrap.result-demure-babygirl .result-celebs { color: #9888C0; }
.quiz-wrap.result-demure-babygirl .btn-secondary { border-color: #D4C8F0; color: #8878B8; }
.quiz-wrap.result-demure-babygirl .chart-label { color: #B4A0CC; }
.quiz-wrap.result-demure-babygirl .chart-explainer { background: #EDE8FF; color: #9888C0; }

/* --- Shop --- */
#shop-screen { text-align: center; }
.shop-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}
.shop-loading, .shop-error {
  width: 100%;
  font-size: 14px;
  color: #A8607F;
  padding: 32px 0;
}
.shop-grid iframe {
  background: transparent !important;
}

@media (max-width: 480px) {
  .quiz-wrap { padding: 28px 20px 36px; }
}