/* ============================================================
   THE HEALING LOUNGE — quiz styles
   Mobile-first. Builds on healing.css tokens.
   ============================================================ */

body[data-page="quiz"]{ background:var(--espresso-900); color:var(--cream); min-height:100vh; overflow-x:hidden; }

/* living shader backdrop (mounted on canvas) */
.qz-bg{ position:fixed; inset:0; z-index:0; }
.qz-bg canvas{ width:100%; height:100%; display:block; }
.qz-bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(125% 95% at 50% 0%, rgba(24,15,8,.66), rgba(24,15,8,.92) 60%, rgba(24,15,8,.98)); }

/* top bar (focused, like the booking flow) */
.qz-topbar{
  position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,5vw,40px); gap:16px;
}
.qz-topbar .brand{ color:var(--cream); font-family:var(--serif); font-size:20px; display:flex; align-items:center; gap:11px; }
.qz-topbar .brand .mark{ width:30px; height:30px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; font-size:13px; opacity:.9; }
.qz-right{ display:flex; align-items:center; gap:14px; }
.qz-topbar .lang{ display:inline-flex; align-items:center; gap:0; border:1px solid rgba(243,236,222,.55); border-radius:var(--r-pill); padding:2px; opacity:.9; }
.qz-topbar .lang button{ background:none; border:0; color:var(--cream); padding:5px 11px; border-radius:var(--r-pill); font-weight:600; font-size:12.5px; letter-spacing:.06em; opacity:.6; transition:all .3s; }
.qz-topbar .lang button.on{ background:var(--honey); opacity:1; }
.qz-topbar .lang button.on span{ color:var(--paper); }
.qz-close{ color:var(--cream); font-size:26px; line-height:1; opacity:.7; padding:4px 8px; }
.qz-close:hover{ opacity:1; }

/* stage */
.qz-stage{ position:relative; z-index:2; min-height:calc(100vh - 76px); display:flex; flex-direction:column; }
.qz-wrap{ width:100%; max-width:720px; margin-inline:auto; padding:8px clamp(20px,5vw,40px) 60px; flex:1; display:flex; flex-direction:column; }

/* progress */
.qz-progress{ display:flex; align-items:center; gap:14px; margin:6px 0 30px; }
.qz-bar{ flex:1; height:3px; border-radius:3px; background:rgba(243,236,222,.16); overflow:hidden; }
.qz-bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--honey),var(--gold)); border-radius:3px; transition:width .6s var(--ease); }
.qz-count{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; white-space:nowrap; }

/* fade/slide transitions between panes */
.qz-pane{ animation:qzIn .55s var(--ease) both; }
@keyframes qzIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .qz-pane{ animation:none; } }

/* ---------- intro ---------- */
.qz-intro{ text-align:center; margin:auto 0; padding:30px 0; }
.qz-intro .eyebrow{ color:var(--gold); }
.qz-intro h1{ color:var(--cream); font-size:clamp(38px,8vw,68px); line-height:1.02; margin:18px 0 20px; }
.qz-intro p.lead{ color:rgba(243,236,222,.82); max-width:46ch; margin-inline:auto; }
.qz-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px 0 36px; }
.qz-badge2{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:var(--r-pill); border:1px solid rgba(243,236,222,.22); background:rgba(243,236,222,.05); font-size:13px; letter-spacing:.02em; color:var(--gold-soft); white-space:nowrap; }
.qz-badge2 .d{ width:6px; height:6px; border-radius:50%; background:var(--honey); }

/* ---------- question ---------- */
.qz-q{ margin:6px 0 6px; }
.qz-q .eyebrow{ color:var(--gold); }
.qz-q h2{ color:var(--cream); margin:14px 0 8px; font-size:clamp(27px,5.4vw,42px); }
.qz-q .q-sub{ color:rgba(243,236,222,.66); font-size:15.5px; margin:0; }
.qz-multi-note{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; letter-spacing:.04em; color:var(--gold-soft); }

/* answer options */
.qz-options{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.qz-opt{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:18px 20px; min-height:64px; border-radius:var(--r-md);
  background:rgba(243,236,222,.045); border:1px solid rgba(243,236,222,.16); color:var(--cream);
  font-family:var(--sans); font-size:17px; font-weight:500; line-height:1.3;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.qz-opt:hover{ border-color:rgba(215,184,119,.6); background:rgba(243,236,222,.08); transform:translateY(-2px); }
.qz-opt .ring{
  flex:none; width:24px; height:24px; border-radius:50%; border:1.6px solid rgba(243,236,222,.4);
  display:grid; place-items:center; transition:all .3s var(--ease);
}
.qz-opt[data-multi="true"] .ring{ border-radius:7px; }
.qz-opt .ring::after{ content:''; width:10px; height:10px; border-radius:inherit; background:var(--honey); transform:scale(0); transition:transform .3s var(--ease); }
.qz-opt.on{ border-color:var(--gold); background:linear-gradient(120deg, rgba(188,129,58,.22), rgba(215,184,119,.10)); box-shadow:0 10px 30px rgba(24,15,8,.4); }
.qz-opt.on .ring{ border-color:var(--gold); }
.qz-opt.on .ring::after{ transform:scale(1); }
.qz-opt .lbl{ flex:1; }

/* footer nav */
.qz-nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:30px; }
.qz-back{ background:none; border:0; color:rgba(243,236,222,.7); font-weight:600; font-size:14.5px; letter-spacing:.03em; display:inline-flex; align-items:center; gap:8px; padding:10px 4px; }
.qz-back:hover{ color:var(--cream); }
.qz-back[hidden]{ visibility:hidden; }
.qz-stage .btn-gold[disabled]{ opacity:.4; pointer-events:none; }

/* ---------- result ---------- */
.qz-result{ padding-top:6px; }
.qz-result .res-eyebrow{ text-align:center; color:var(--gold); }
.qz-result h2.res-title{ text-align:center; color:var(--cream); font-size:clamp(30px,6vw,52px); margin:12px 0 6px; }
.qz-result .res-why{ text-align:center; color:rgba(243,236,222,.8); max-width:52ch; margin:0 auto 30px; font-size:16.5px; }
.qz-result .res-why em{ color:var(--gold); font-style:normal; }

/* main match card */
.match-card{ background:var(--paper); color:var(--ink); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.match-photo{ position:relative; aspect-ratio:16/10; background:var(--linen-deep); }
.match-photo img{ width:100%; height:100%; object-fit:cover; }
.match-photo .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,15,8,.1) 0%, transparent 35%, rgba(24,15,8,.55) 100%); }
.match-photo .ribbon{ position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:8px; background:rgba(24,15,8,.55); backdrop-filter:blur(6px); color:var(--gold-soft); border:1px solid rgba(215,184,119,.4); padding:8px 15px; border-radius:var(--r-pill); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.match-photo .pct{ position:absolute; right:16px; bottom:16px; color:var(--cream); font-family:var(--serif); font-size:15px; letter-spacing:.04em; background:rgba(24,15,8,.4); border:1px solid rgba(243,236,222,.25); padding:6px 13px; border-radius:var(--r-pill); }
.match-body{ padding:clamp(22px,4vw,34px); }
.match-cat{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--honey); }
.match-body h3{ font-size:clamp(26px,4vw,36px); margin:8px 0 10px; }
.match-meta{ display:flex; align-items:baseline; gap:18px; margin-bottom:18px; }
.match-meta .price{ font-family:var(--serif); font-size:26px; color:var(--ink); }
.match-meta .dur{ color:var(--ink-soft); font-size:14.5px; letter-spacing:.03em; }
.match-lead{ color:var(--ink-soft); font-size:16.5px; }

.match-section{ margin-top:22px; }
.match-section h4{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px; }
.benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.benefits li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink); line-height:1.5; }
.benefits li .bk{ flex:none; width:22px; height:22px; border-radius:50%; background:rgba(188,129,58,.14); color:var(--honey); display:grid; place-items:center; font-size:12px; margin-top:1px; }
.expect-line{ display:flex; gap:13px; align-items:flex-start; background:var(--linen); border-radius:var(--r-md); padding:16px 18px; font-size:15.5px; color:var(--ink); line-height:1.5; }
.expect-line .ic{ flex:none; color:var(--honey); }

.match-trust{ display:flex; gap:12px; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--linen-deep); font-size:14px; color:var(--ink-soft); }
.match-trust .stars{ color:var(--honey); letter-spacing:.18em; }

.match-cta{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.match-cta .micro{ text-align:center; font-size:13px; color:var(--ink-soft); }

/* alternatives */
.alts{ margin-top:38px; }
.alts .alts-head{ text-align:center; color:var(--gold-soft); margin-bottom:18px; }
.alts .alts-head .eyebrow{ color:var(--gold); }
.alts .alts-head p{ color:rgba(243,236,222,.6); font-size:14.5px; margin:8px 0 0; }
.alt-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.alt-card{ display:flex; gap:16px; align-items:center; background:rgba(243,236,222,.05); border:1px solid rgba(243,236,222,.14); border-radius:var(--r-md); padding:14px; text-align:left; width:100%; transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); color:var(--cream); }
.alt-card:hover{ transform:translateY(-3px); border-color:rgba(215,184,119,.5); background:rgba(243,236,222,.09); }
.alt-thumb{ flex:none; width:84px; height:84px; border-radius:var(--r-sm); overflow:hidden; background:var(--cocoa); }
.alt-thumb img{ width:100%; height:100%; object-fit:cover; }
.alt-info{ flex:1; min-width:0; }
.alt-info .alt-cat{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.alt-info h4{ font-family:var(--serif); font-weight:500; color:var(--cream); font-size:20px; margin:3px 0 5px; }
.alt-info .alt-meta{ font-size:13.5px; color:rgba(243,236,222,.6); }
.alt-go{ flex:none; color:var(--gold-soft); font-size:22px; padding-right:6px; }

/* share + restart */
.qz-share{ margin-top:40px; text-align:center; }
.qz-share .eyebrow{ color:var(--gold); }
.qz-share p{ color:rgba(243,236,222,.6); font-size:14.5px; margin:8px 0 18px; }
.share-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.share-btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:var(--r-pill); border:1px solid rgba(243,236,222,.22); background:rgba(243,236,222,.05); color:var(--cream); font-weight:600; font-size:13.5px; letter-spacing:.02em; transition:all .3s var(--ease); }
.share-btn:hover{ border-color:var(--gold); background:rgba(243,236,222,.1); transform:translateY(-2px); }
.share-btn .si{ width:17px; height:17px; display:block; }
.share-btn.copied{ border-color:var(--gold); color:var(--gold); }

.qz-restart{ display:block; margin:34px auto 0; background:none; border:0; color:rgba(243,236,222,.55); font-weight:600; font-size:13.5px; letter-spacing:.06em; }
.qz-restart:hover{ color:var(--cream); }

/* calculating splash */
.qz-calc{ text-align:center; margin:auto 0; padding:60px 0; }
.qz-calc .bloom{ width:64px; height:64px; margin:0 auto 26px; border-radius:50%; border:2px solid rgba(215,184,119,.35); border-top-color:var(--gold); animation:qzSpin 1s linear infinite; }
@keyframes qzSpin{ to{ transform:rotate(360deg); } }
.qz-calc p{ color:var(--gold-soft); font-family:var(--serif); font-size:22px; }

/* ---------- shareable result card (rendered to image) ---------- */
.share-card{ position:fixed; left:-9999px; top:0; width:1080px; height:1350px; background:linear-gradient(165deg,#241910,#180F08); color:var(--cream); padding:96px 88px; display:flex; flex-direction:column; font-family:var(--sans); }
.share-card .sc-mark{ width:78px; height:78px; border-radius:50%; border:2px solid var(--gold); display:grid; place-items:center; font-size:34px; color:var(--gold); }
.share-card .sc-brand{ margin-top:26px; font-family:var(--serif); font-size:34px; color:var(--cream); }
.share-card .sc-brand small{ display:block; font-family:var(--sans); font-size:18px; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-soft); margin-top:8px; }
.share-card .sc-eyebrow{ margin-top:auto; font-size:24px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.share-card .sc-name{ font-family:var(--serif); font-size:96px; line-height:1.04; color:var(--cream); margin:26px 0 28px; }
.share-card .sc-why{ font-size:32px; line-height:1.5; color:rgba(243,236,222,.85); max-width:24ch; }
.share-card .sc-foot{ margin-top:54px; display:flex; align-items:center; gap:22px; font-size:26px; color:var(--gold-soft); }
.share-card .sc-foot .dot{ width:8px; height:8px; border-radius:50%; background:var(--honey); }
.share-card .sc-photo{ position:absolute; right:0; top:0; width:46%; height:100%; opacity:.34; }
.share-card .sc-photo img{ width:100%; height:100%; object-fit:cover; }
.share-card .sc-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,#180F08, transparent 60%); }

/* ---------- responsive ---------- */
@media (min-width:680px){
  .qz-options{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .qz-q + .qz-options .qz-opt{ }
  .alt-grid{ grid-template-columns:1fr 1fr; }
  /* keep contra (single column reads better when multi) handled in JS via class */
  .qz-options.single-col{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .match-cta .btn{ width:100%; }
}