/* Find Your Realm — optional personality experience. */
.realm-quiz-page{
  --quiz-paper:#f8f1e7;
  --quiz-muted:#aaa095;
  --quiz-gold:#efd18a;
  --quiz-line:rgba(239,209,138,.17);
  --quiz-panel:rgba(6,7,11,.78);
  overflow-x:hidden;
  background:#020307;
}
.realm-quiz-page .quiz-shell{position:relative;min-height:100svh;padding:var(--bar-height) max(20px,5vw) 72px;display:grid;place-items:center}
.realm-quiz-page .quiz-shell::before{content:"";position:fixed;z-index:-1;inset:var(--bar-height) 0 0;background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 28%),radial-gradient(circle at 50% 75%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 34%)}
.quiz-intro,.quiz-stage,.quiz-result{position:relative;width:min(1040px,100%);margin:auto}
.quiz-intro{align-self:start;margin:0 auto;text-align:center;padding:0 0 24px}
.quiz-master-brand{width:min(340px,72vw);margin:-8px auto -26px}
.quiz-kicker{margin:0 0 14px;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.28em;text-transform:uppercase}
.quiz-intro h1{margin:0;color:var(--quiz-paper);font:400 clamp(58px,8vw,108px)/.87 var(--wo-font-display,"Iowan Old Style",Baskerville,Georgia,serif);letter-spacing:-.055em;text-wrap:balance}
.quiz-lede{max-width:690px;margin:18px auto 22px;color:#c8beb2;font-size:clamp(15px,1.6vw,18px);line-height:1.72}
.quiz-primary{min-height:50px;border-color:color-mix(in srgb,var(--accent) 62%,#fff);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,white),var(--accent));color:#080706;box-shadow:0 14px 50px color-mix(in srgb,var(--accent) 16%,transparent)}
.quiz-fineprint{max-width:680px;margin:14px auto 0;color:#817970;font-size:10px;line-height:1.6;letter-spacing:.05em}
.quiz-orbit{position:absolute;left:50%;top:46%;width:min(640px,92vw);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.035);border-radius:50%;pointer-events:none;opacity:.5}
.quiz-orbit::before,.quiz-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.028);border-radius:50%}.quiz-orbit::before{inset:14%}.quiz-orbit::after{inset:31%}
.quiz-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 0 20px currentColor}.quiz-orbit i:nth-child(1){left:50%;top:-4px;background:#e4c382;color:#e4c382}.quiz-orbit i:nth-child(2){right:-4px;top:50%;background:#93ddd0;color:#93ddd0}.quiz-orbit i:nth-child(3){left:50%;bottom:-4px;background:#ff8f4b;color:#ff8f4b}.quiz-orbit i:nth-child(4){left:-4px;top:50%;background:#a99be8;color:#a99be8}
.quiz-stage{max-width:900px;padding:clamp(26px,4.5vw,52px);border:1px solid var(--quiz-line);border-radius:22px;background:linear-gradient(145deg,rgba(15,16,22,.9),rgba(4,5,9,.86));box-shadow:0 34px 100px rgba(0,0,0,.35)}
.quiz-progress-row{display:flex;justify-content:space-between;gap:20px;align-items:center;color:#92897e;font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.quiz-back,.quiz-text-button{border:0;background:transparent;color:#b8aea1;padding:8px 0;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.quiz-back:hover,.quiz-text-button:hover{color:#fff}
.quiz-progress{height:2px;margin:15px 0 42px;background:rgba(255,255,255,.07);overflow:hidden}.quiz-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 20px color-mix(in srgb,var(--accent) 50%,transparent);transition:width .35s ease}
.quiz-stage h2{max-width:760px;margin:0 0 32px;color:var(--quiz-paper);font:400 clamp(38px,5vw,62px)/1 var(--wo-font-display,"Iowan Old Style",Baskerville,Georgia,serif);letter-spacing:-.04em;text-wrap:balance}
.quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-answer{position:relative;min-height:110px;padding:20px 22px;text-align:left;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.018);color:#ddd4c8;line-height:1.5;transition:transform .18s ease,border-color .18s ease,background .18s ease;color .18s ease}
.quiz-answer::before{content:attr(data-letter);display:block;margin-bottom:8px;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.18em}
.quiz-answer:hover,.quiz-answer:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.018));color:#fff}
.quiz-result{max-width:1160px;padding:clamp(28px,4vw,48px);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:24px;background:linear-gradient(145deg,rgba(15,16,22,.92),rgba(4,5,9,.9));box-shadow:0 35px 120px rgba(0,0,0,.42);overflow:hidden}
.quiz-result-grid{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,70px);align-items:center}
.quiz-result-art{position:relative;display:grid;place-items:center;min-width:0}.quiz-result-art::after{content:"";position:absolute;inset:18%;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);filter:blur(42px);z-index:0}
.quiz-result-art img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 24px 55px color-mix(in srgb,var(--accent) 12%,transparent))}
.quiz-result-copy{position:relative;z-index:2;min-width:0}
.quiz-result-label{margin:0;color:#8f867a;font-size:9px;font-weight:900;letter-spacing:.25em;text-transform:uppercase}
.quiz-result h1{margin:8px 0 6px;color:var(--quiz-paper);font:400 clamp(60px,8vw,112px)/.86 var(--wo-font-display,"Iowan Old Style",Baskerville,Georgia,serif);letter-spacing:-.06em;overflow-wrap:anywhere}
.quiz-result-headline{margin:18px 0;color:var(--accent);font:400 clamp(24px,3vw,36px)/1.15 var(--wo-font-display,"Iowan Old Style",Baskerville,Georgia,serif)}
.quiz-result-body{max-width:680px;color:#bbb1a5;font-size:15px;line-height:1.82}
.quiz-traits{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 28px}.quiz-traits span{padding:8px 11px;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:999px;color:#d8cec1;background:color-mix(in srgb,var(--accent) 4%,transparent);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.quiz-result-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.quiz-result-actions .button{min-height:48px}.quiz-text-button{min-height:44px;padding:10px}
.quiz-share-status{min-height:18px;margin:10px 0 0;color:#a69c90;font-size:11px}
.quiz-result-glow{position:absolute;right:-20%;top:-28%;width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%);pointer-events:none}
.realm-quiz-page[data-realm=light]{--bg:#080706}.realm-quiz-page[data-realm=balance]{--bg:#050908}.realm-quiz-page[data-realm=fire]{--bg:#0a0604}.realm-quiz-page[data-realm=night]{--bg:#050509}
@media(max-width:760px){
  .realm-quiz-page .quiz-shell{padding-left:17px;padding-right:17px;padding-top:var(--bar-height);padding-bottom:48px}
  .quiz-intro{padding-top:0;padding-bottom:14px}.quiz-master-brand{width:min(270px,80vw);margin-top:-8px;margin-bottom:-14px}.quiz-intro h1{font-size:clamp(48px,13vw,68px)}
  .quiz-orbit{width:96vw}.quiz-stage{padding:24px 18px}.quiz-progress{margin-bottom:30px}.quiz-stage h2{font-size:clamp(34px,10vw,46px);margin-bottom:24px}
  .quiz-answers{grid-template-columns:1fr}.quiz-answer{min-height:82px;padding:17px 18px}
  .quiz-result{padding:25px 18px}.quiz-result-grid{grid-template-columns:1fr;gap:12px}.quiz-result-art{width:min(300px,76vw);margin:auto}.quiz-result-copy{text-align:center}
  .quiz-result-body{margin-left:auto;margin-right:auto}.quiz-traits,.quiz-result-actions{justify-content:center}.quiz-result-actions{display:grid;grid-template-columns:1fr;width:100%}.quiz-result-actions .button,.quiz-result-actions button{width:100%;justify-content:center}
}
@media(max-width:360px){.quiz-result h1{font-size:52px}.quiz-intro h1{font-size:50px}.quiz-stage{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){.quiz-progress span,.quiz-answer{transition:none}.quiz-answer:hover{transform:none}}
@media(min-width:761px) and (max-height:900px){
  .realm-quiz-page .quiz-shell{padding-top:var(--bar-height);padding-bottom:40px}
  .quiz-intro{padding-top:0;padding-bottom:18px}
  .quiz-master-brand{width:min(285px,60vw);margin-top:-14px;margin-bottom:-28px}
  .quiz-intro h1{font-size:clamp(56px,6.6vw,86px)}
  .quiz-lede{margin-top:10px;margin-bottom:14px;line-height:1.55}
  .quiz-fineprint{margin-top:8px}
}
@media(max-width:760px) and (max-height:740px){
  .quiz-master-brand{width:min(220px,68vw);margin-top:-10px;margin-bottom:-16px}
  .quiz-intro h1{font-size:clamp(42px,12vw,56px)}
  .quiz-lede{margin-top:9px;margin-bottom:13px;line-height:1.5}
  .quiz-fineprint{margin-top:9px}
}


/* Find Your Realm — premium Option B polish */
.realm-quiz-page{
  --quiz-realm-gradient:var(--wo-realm-gradient,linear-gradient(90deg,#f2d67b 0%,#fff0bd 18%,#80e2ee 39%,#ff9551 64%,#b78eff 86%,#efe2c8 100%));
  --quiz-lede-gradient:var(--wo-support-gradient,linear-gradient(90deg,#ddd0ad 0%,#ded9ca 18%,#b8d7d8 39%,#e2c1aa 64%,#c9c0dc 86%,#ddd4c8 100%));
}

.quiz-intro h1{
  display:inline-block;
  padding-bottom:.04em;
  color:#f2ddaa;
  background:var(--quiz-realm-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 26px rgba(255,255,255,.055),0 0 48px rgba(232,200,121,.035);
}

.quiz-lede{
  color:#cbc2b7;
  text-shadow:0 10px 30px rgba(0,0,0,.28);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .quiz-lede{
    background:var(--quiz-lede-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.quiz-primary{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:999px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,filter .22s ease;
}
.quiz-primary::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 10%,rgba(255,255,255,.36) 48%,transparent 76%);
  transform:translateX(-120%);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.quiz-primary:hover,
.quiz-primary:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.045);
  box-shadow:0 18px 54px color-mix(in srgb,var(--accent) 22%,transparent);
}
.quiz-primary:hover::after,
.quiz-primary:focus-visible::after{transform:translateX(120%)}

.quiz-answer{
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.014));
  box-shadow:0 12px 34px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.025);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
}
.quiz-answer::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:12%;
  right:12%;
  top:-1px;
  height:1px;
  background:var(--quiz-realm-gradient);
  opacity:0;
  transition:opacity .22s ease;
}
.quiz-answer:hover,
.quiz-answer:focus-visible{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.10));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.025)),rgba(255,255,255,.018));
  box-shadow:0 18px 44px rgba(0,0,0,.30),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);
  color:#fff;
}
.quiz-answer:hover::after,
.quiz-answer:focus-visible::after{opacity:.72}
.quiz-answer:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 66%,white);outline-offset:3px}

.quiz-stage:not([hidden]),
.quiz-result:not([hidden]),
.quiz-intro:not([hidden]){
  animation:quiz-panel-in .42s cubic-bezier(.2,.72,.2,1) both;
}
.quiz-answer{animation:quiz-choice-in .32s cubic-bezier(.2,.72,.2,1) both}
.quiz-answer:nth-child(2){animation-delay:.035s}
.quiz-answer:nth-child(3){animation-delay:.07s}
.quiz-answer:nth-child(4){animation-delay:.105s}
@keyframes quiz-panel-in{
  from{opacity:0;transform:translateY(10px) scale(.996)}
  to{opacity:1;transform:none}
}
@keyframes quiz-choice-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.quiz-result{
  max-width:1120px;
  padding:clamp(26px,3.5vw,42px);
}
.quiz-result-grid{
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  gap:clamp(22px,4vw,52px);
}
.quiz-result-art{
  width:min(100%,410px);
  justify-self:center;
}
.quiz-result-art::after{
  inset:22%;
  filter:blur(48px);
}
.quiz-result h1{
  margin:7px 0 5px;
  font-size:clamp(54px,7.2vw,98px);
  line-height:.88;
}
.quiz-result-headline{
  margin:14px 0 12px;
  font-size:clamp(23px,2.6vw,33px);
}
.quiz-result-body{line-height:1.72}
.quiz-traits{margin:20px 0 22px}
.quiz-result-actions{gap:9px}
.quiz-result-actions .button{min-height:46px}

@media(min-width:761px) and (max-height:820px){
  .realm-quiz-page .quiz-shell{
    min-height:100svh;
    padding-top:var(--bar-height);
    padding-bottom:12px;
  }
  .quiz-intro{padding:0 0 4px}
  .quiz-master-brand{
    width:min(190px,42vw);
    margin:-10px auto -26px;
  }
  .quiz-kicker{
    margin-bottom:5px;
    font-size:8px;
    letter-spacing:.23em;
  }
  .quiz-intro h1{
    font-size:clamp(50px,5.2vw,70px);
    line-height:.84;
  }
  .quiz-lede{
    max-width:820px;
    margin:6px auto 8px;
    font-size:13.5px;
    line-height:1.40;
  }
  .quiz-primary{
    min-height:44px;
    padding-top:11px;
    padding-bottom:11px;
  }
  .quiz-fineprint{
    max-width:760px;
    margin-top:5px;
    font-size:8.5px;
    line-height:1.34;
  }
  .quiz-result{
    padding:24px 28px;
  }
  .quiz-result-grid{
    grid-template-columns:minmax(230px,.68fr) minmax(0,1.32fr);
    gap:28px;
  }
  .quiz-result-art{width:min(100%,320px)}
  .quiz-result h1{font-size:clamp(50px,6vw,78px)}
  .quiz-result-headline{margin:10px 0}
  .quiz-result-body{font-size:14px;line-height:1.62}
  .quiz-traits{margin:15px 0 17px}
}

@media(max-width:760px){
  .quiz-intro h1{line-height:.88}
  .quiz-lede{
    max-width:38rem;
    line-height:1.58;
  }
  .quiz-answer{border-radius:14px}
  .quiz-result-grid{gap:8px}
  .quiz-result-art{width:min(265px,70vw)}
  .quiz-result h1{font-size:clamp(50px,15vw,70px)}
  .quiz-result-headline{margin:12px 0 10px}
  .quiz-traits{margin:17px 0 20px}
}

@media(max-width:760px) and (max-height:740px){
  .quiz-master-brand{width:min(205px,64vw)}
  .quiz-kicker{margin-bottom:6px}
  .quiz-intro h1{font-size:clamp(40px,11.5vw,54px)}
  .quiz-lede{margin-top:8px;margin-bottom:11px;font-size:13.5px;line-height:1.46}
  .quiz-primary{min-height:44px;padding:12px 18px}
  .quiz-fineprint{margin-top:6px;font-size:8.5px;line-height:1.35}
}

@media(prefers-reduced-motion:reduce){
  .quiz-stage:not([hidden]),
  .quiz-result:not([hidden]),
  .quiz-intro:not([hidden]),
  .quiz-answer{animation:none}
  .quiz-primary::after{display:none}
  .quiz-primary,
  .quiz-answer{transition:none}
  .quiz-primary:hover,
  .quiz-primary:focus-visible,
  .quiz-answer:hover,
  .quiz-answer:focus-visible{transform:none}
}


/* Mobile result layout must remain a true single-column card.
   This override intentionally lives after the premium desktop grid rules so the
   result copy cannot be pushed outside a 320px viewport. */
@media(max-width:760px){
  .quiz-result-grid{
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
  .quiz-result-copy{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .quiz-result h1{
    width:100%;
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }
}