:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#24171b;background:#fbf6f1}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#fffdf9 0,#fbf6f1 48%,#f4e9e4 100%)}
.shell{width:min(760px,calc(100% - 28px));margin:0 auto;padding:42px 0 28px}
.card{background:#fffdfb;border:1px solid #eadbd4;border-radius:24px;padding:clamp(24px,5vw,48px);box-shadow:0 18px 50px rgba(76,18,42,.07)}
.hero{text-align:center;padding-top:58px;padding-bottom:58px}
.eyebrow,.small-label{font-size:.75rem;font-weight:800;letter-spacing:.14em;color:#b96a7f}
h1{font-size:clamp(2rem,6vw,3.55rem);line-height:1.03;letter-spacing:-.045em;margin:14px 0 18px}
h2{font-size:clamp(1.35rem,4vw,2rem);line-height:1.15;letter-spacing:-.025em}
.lead{font-size:1.18rem;line-height:1.6}
.muted{color:#725f63;line-height:1.6}
.primary,.secondary{border:0;border-radius:14px;padding:16px 22px;font-size:1rem;font-weight:800;cursor:pointer}
.primary{background:#5b1230;color:#fff;margin-top:14px}
.secondary{background:#f3e4e8;color:#5b1230;margin-top:12px}
.link-button{display:block;text-align:center;text-decoration:none;width:100%}
.hidden{display:none}
.progress-wrap{margin-bottom:30px}
.progress-text{font-size:.85rem;font-weight:800;margin-bottom:8px;color:#765d64}
.progress{height:8px;background:#efe2e4;border-radius:999px;overflow:hidden}
#progressBar{height:100%;width:16.66%;background:#5b1230;transition:width .25s ease}
.answers{display:grid;gap:12px;margin-top:26px}
.answer{width:100%;text-align:left;padding:17px 18px;border-radius:14px;border:1px solid #eadbd4;background:#fffdfb;font-size:1rem;cursor:pointer;transition:.15s}
.answer:hover{transform:translateY(-1px);border-color:#bd7a8d;background:#fff7f7}
.traits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0}
.traits div{background:#f8ecec;border-radius:14px;padding:16px}
.traits span{display:block;color:#765f64;font-size:.78rem;margin-bottom:6px}
.traits strong{font-size:.95rem}
.face-card{display:flex;align-items:center;gap:18px;border-top:1px solid #eadbd4;border-bottom:1px solid #eadbd4;padding:28px 0;margin:26px 0}
.face-mark{flex:0 0 74px;height:90px;border-radius:50% 50% 45% 45%;display:grid;place-items:center;background:#f1e1e4;font-size:2.3rem;font-weight:800;color:#9e536b}
.face-card h2{margin:6px 0 0}
.disclosure{font-size:.72rem;line-height:1.45;color:#7b686d;margin:14px 6px 4px}
footer{text-align:center;color:#88757a;font-size:.75rem;padding:20px}
@media(max-width:600px){.shell{padding-top:18px}.card{border-radius:18px}.traits{grid-template-columns:1fr}.hero{padding-top:38px;padding-bottom:38px}}

.reveal-line{font-size:1.45rem;margin:8px 0 14px;letter-spacing:-.02em}
.curiosity{font-size:1.12rem;margin:22px 0 2px}

.reveal-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:28px 0 10px}
.reveal-progress div{border:1px solid #eadbd4;background:#fff7f7;border-radius:12px;padding:12px 10px;text-align:center}
.reveal-progress span{display:block;font-size:.65rem;font-weight:800;letter-spacing:.07em;color:#765f64}
.reveal-progress strong{display:block;margin-top:5px;font-size:1.15rem}
.reveal-progress .unrevealed{background:#5b1230;border-color:#5b1230}
.reveal-progress .unrevealed span,.reveal-progress .unrevealed strong{color:#fff}
@media(max-width:600px){.reveal-progress{grid-template-columns:repeat(2,1fr)}}

.noscript{padding:12px;text-align:center;background:#fff4d6;font-size:.85rem}

/* Heart Insight Media brand alignment */
.brand-mark{
  text-align:center;
  margin:0 0 14px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  color:#5b1230;
}