/* ─── CLARITY TOOL ──────────────────────────────────────────── */
#clarity {
  min-height:100vh;
  background:var(--petal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 28px 80px;
}
.clarity-inner {
  width:100%;
  max-width:860px;
  margin:0 auto;
}

/* ── Step 1 ── */
.clarity-step {
  text-align:center;
  transition:opacity .4s ease, transform .4s ease;
}
.clarity-step.exit {
  opacity:0;
  transform:translateY(-16px);
  pointer-events:none;
}
.clarity-eyebrow {
  font-family:var(--fs);
  font-size:.58rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:28px;
}
.clarity-question {
  font-family:var(--fd);
  font-size:clamp(32px,4.5vw,62px);
  font-weight:300;
  line-height:1.1;
  color:var(--espresso);
  margin-bottom:16px;
}
.clarity-question em {
  color:var(--gold);
  font-style:italic;
}
.clarity-sub {
  font-family:var(--fd);
  font-size:1rem;
  font-style:italic;
  color:var(--cocoa);
  opacity:.65;
  margin-bottom:56px;
}
.clarity-choices {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(184,104,90,.12);
  border:1px solid rgba(184,104,90,.12);
}
.clarity-choice {
  background:rgba(255,255,255,.72);
  border:none;
  padding:44px 28px 36px;
  cursor:pointer;
  text-align:left;
  transition:background .3s;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.clarity-choice:hover { background:rgba(255,255,255,.96); }
.choice-symbol {
  font-size:1.4rem;
  color:var(--gold);
  line-height:1;
  margin-bottom:4px;
}
.choice-title {
  font-family:var(--fd);
  font-size:1.25rem;
  font-weight:500;
  color:var(--espresso);
  line-height:1.2;
}
.choice-desc {
  font-family:var(--fd);
  font-size:.87rem;
  line-height:1.7;
  color:var(--cocoa);
}

/* ── Result ── */
.clarity-result {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease;
}
.clarity-result.visible {
  opacity:1;
  transform:translateY(0);
}
.result-back {
  background:none;
  border:none;
  font-family:var(--fs);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cocoa);
  cursor:pointer;
  padding:0;
  margin-bottom:40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color .25s;
}
.result-back:hover { color:var(--gold); }
.result-path-label {
  font-family:var(--fs);
  font-size:.52rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.result-title {
  font-family:var(--fd);
  font-size:clamp(30px,4vw,56px);
  font-weight:300;
  color:var(--espresso);
  line-height:1.1;
  margin-bottom:20px;
}
.result-desc {
  font-family:var(--fd);
  font-size:1.02rem;
  line-height:1.9;
  color:var(--cocoa);
  max-width:600px;
  margin-bottom:32px;
}
.result-affirmation {
  font-family:var(--fd);
  font-size:clamp(1rem,1.6vw,1.2rem);
  font-style:italic;
  font-weight:300;
  line-height:1.65;
  color:var(--espresso);
  border-left:2px solid var(--gold);
  padding-left:20px;
  margin-bottom:32px;
  max-width:560px;
}
.result-practice {
  background:rgba(201,169,110,.07);
  border-radius:2px;
  padding:24px 28px;
  max-width:600px;
  margin-bottom:40px;
}
.result-practice-label {
  font-family:var(--fs);
  font-size:.5rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.result-practice p {
  font-family:var(--fd);
  font-size:.95rem;
  line-height:1.82;
  color:var(--cocoa);
  margin:0;
}
.result-resonance {
  font-family:var(--fd);
  font-size:.97rem;
  font-style:italic;
  color:var(--cocoa);
  opacity:.6;
  margin-bottom:32px;
}
.result-ctas {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* ── Responsive ── */
@media (max-width:700px) {
  .clarity-choices { grid-template-columns:1fr; }
  .clarity-choice { padding:32px 22px 28px; }
}