/* Final art-direction overrides for the landing page. */

/* Tabletop backgrounds for the major landing-page sections. */
html{
  background:#04090c;
}
body{
  background:#04090c;
}
body:before{background:transparent!important}

/* Each major section gets its own tabletop scene. */
.problem{
  background:
    linear-gradient(180deg,rgba(4,10,13,.72),rgba(4,9,12,.79)),
    url('/assets/landing/tabletop-dm.png') center center/cover no-repeat!important;
  border-bottom:1px solid rgba(199,151,78,.2);
}

.intake{
  background:
    linear-gradient(180deg,rgba(4,10,13,.72),rgba(4,9,12,.79)),
    url('/assets/landing/tabletop-hexgrid.png') center center/cover no-repeat!important;
  border-top:1px solid rgba(199,151,78,.16);
}

.features{
  background:
    linear-gradient(180deg,rgba(4,10,13,.72),rgba(4,9,12,.79)),
    url('/assets/landing/tabletop-gaming.png') center center/cover no-repeat!important;
  border-top:1px solid rgba(199,151,78,.16);
}

.pricing-section{
  background:#04090c!important;
  border-top:1px solid rgba(199,151,78,.16);
}

/* The top hero always uses the approved dragon battle and nothing else. */
.hero{isolation:isolate}
.hero-art{
  background-image:url('/assets/landing/hero-dragon-battle.png')!important;
  background-size:cover!important;
  background-position:center 35%!important;
  background-repeat:no-repeat!important;
}

/* Static DM-screen facsimile. The adventure map is part of the screen, not an image floating over it. */
.live-shell{overflow:visible}
.live-frame-wrap,.marketing-map-overlay{display:none!important}
.demo-app{
  background:#1b231c;
  border-top:1px solid rgba(201,160,87,.24);
  color:#222;
  font-family:Georgia,"Times New Roman",serif;
}
.demo-nav{
  min-height:50px;
  display:grid;
  grid-template-columns:auto 1fr minmax(175px,270px);
  align-items:center;
  gap:14px;
  padding:0 13px;
  background:#1c281d;
  border-bottom:1px solid #655b36;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
}
.demo-brand{
  color:#a6d9df;
  font:700 20px/1 Georgia,"Times New Roman",serif;
  letter-spacing:.045em;
  white-space:nowrap;
}
.demo-tabs{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap}
.demo-tabs span{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:0 8px;
  color:#d7d2ae;
  font-size:10px;
  font-weight:700;
}
.demo-tabs .active{background:#a93737;color:#fff;border-radius:3px}
.demo-search{
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 9px;
  background:#fffdf1;
  border:1px solid #c7b990;
  color:#7d7a70;
  font:12px/1 Georgia,"Times New Roman",serif;
}
.demo-search b{
  display:grid;
  place-items:center;
  align-self:stretch;
  width:29px;
  margin-right:-9px;
  border-left:1px solid #c7b990;
  color:#26342b;
  font-family:Inter,sans-serif;
  font-weight:700;
}
.demo-page{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);
  gap:22px;
  min-height:430px;
  margin:22px 14px 14px;
  padding:35px 38px 25px;
  background:
    linear-gradient(rgba(255,253,239,.84),rgba(255,250,225,.9)),
    repeating-linear-gradient(0deg,rgba(92,72,37,.025) 0 1px,transparent 1px 3px),
    #f3e6bd;
  border:1px solid #d5c69b;
  box-shadow:inset 0 0 45px rgba(119,91,41,.09);
}
.demo-overview{align-self:center;padding:3px 0 10px}
.demo-kicker{
  color:#a53c35;
  font:800 10px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.demo-overview h3{
  margin:5px 0 20px;
  color:#315c46;
  font:700 clamp(37px,4.1vw,60px)/.84 Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;
}
.demo-overview p{margin:0 0 17px;color:#302c23;font-size:15px;line-height:1.48}
.demo-overview .demo-deck{color:#655b4a;font-size:17px;font-style:italic;line-height:1.5}
.demo-status{display:flex;gap:7px;flex-wrap:wrap;margin-top:21px;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.demo-status span{
  padding:5px 7px;
  border:1px solid #9c906c;
  background:rgba(255,255,255,.34);
  color:#485a4e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.demo-map-card{
  position:relative;
  align-self:center;
  min-width:0;
  padding:8px 8px 30px;
  background:#ddd5b9;
  border:1px solid #a99b75;
  box-shadow:0 10px 24px rgba(54,43,24,.23);
}
.demo-map-label{
  position:absolute;
  z-index:2;
  top:15px;
  left:15px;
  padding:5px 7px;
  background:rgba(19,28,28,.86);
  border:1px solid rgba(216,177,99,.45);
  color:#e9d8ac;
  font:800 8px/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.demo-map-card img{
  display:block;
  width:100%;
  aspect-ratio:1.48/1;
  object-fit:contain;
  object-position:center;
  background:#101718;
  border:1px solid #4f5651;
}
.demo-map-key{
  position:absolute;
  left:8px;
  right:8px;
  bottom:5px;
  min-height:21px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:2px 7px;
  background:#222a2b;
  border:1px solid #495153;
  color:#cbd0c8;
  font:7px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;
  white-space:nowrap;
  overflow:hidden;
}
.demo-map-key span:nth-child(3){color:#9ddbf4}
.demo-map-key span:nth-child(4){color:#e5c34e}
.demo-map-tab{
  position:absolute;
  right:-1px;
  bottom:29px;
  padding:10px 15px;
  background:#315c46;
  border:1px solid #6b6d47;
  color:#f3dfad;
  font:800 11px/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.1em;
}

/* Keep all three plans in one stable grid. */
.pricing-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
}
.price-card{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
.price-card ul{flex:1}

/* Defensive styling for the previously misclassified Adventurer card before JS repairs its classes. */
.price-card.popular{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  padding:27px 26px 25px!important;
  background:linear-gradient(180deg,rgba(13,24,29,.96),rgba(6,13,17,.98))!important;
  border:1px solid #b98c47!important;
  color:inherit!important;
  font-size:inherit!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  font-weight:inherit!important;
  transform:translateY(-9px);
  box-shadow:0 28px 75px rgba(0,0,0,.45),0 0 40px rgba(94,195,241,.08);
}
.price-card.popular .most{
  position:absolute;
  top:-12px;
  right:17px;
  padding:5px 8px;
  background:#8b632e;
  border:1px solid #c79c55;
  color:#fff0ce;
  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:900;
}

/* The approved Kick the Door In asset belongs only to the last CTA. Crop from the right so its baked-in left-side placeholder copy never appears. */
.final{
  position:relative;
  isolation:isolate;
  min-height:610px;
  overflow:hidden;
  background:#05090c;
  border-top:1px solid rgba(206,162,91,.28);
}
.final-art{
  position:absolute;
  z-index:-2;
  top:0;
  right:0;
  bottom:0;
  left:34%;
  background-image:url('/assets/landing/kick-the-door-in.png')!important;
  background-size:auto 100%!important;
  background-position:right center!important;
  background-repeat:no-repeat!important;
  background-color:#05090c;
  filter:saturate(1.08) contrast(1.04) brightness(.94);
  transform:none!important;
}
.final-shade{
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,#05090c 0%,#05090c 27%,rgba(5,9,12,.97) 35%,rgba(5,9,12,.56) 48%,rgba(5,9,12,.08) 72%),
    linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.22));
}
.final-inner{
  position:relative;
  z-index:2;
  min-height:610px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.final-copy{max-width:460px}

@media (max-width:1050px){
  .demo-nav{grid-template-columns:auto 1fr}
  .demo-search{display:none}
  .demo-tabs{justify-content:flex-end}
  .demo-page{grid-template-columns:minmax(0,.85fr) minmax(350px,1.15fr);padding:30px 28px 24px}
}
@media (max-width:900px){
  html,body{background-size:900px 900px}
  .demo-tabs span:nth-last-child(-n+3){display:none}
  .demo-page{grid-template-columns:1fr;margin:14px;padding:25px}
  .demo-overview{padding-bottom:0}
  .demo-overview h3{font-size:48px}
  .demo-map-card{width:100%;max-width:620px;justify-self:center}
  .final-art{left:0;background-position:right center!important}
  .final-shade{background:linear-gradient(90deg,rgba(4,8,11,.97) 0%,rgba(4,8,11,.84) 48%,rgba(4,8,11,.25) 100%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.42))}
}
@media (max-width:780px){
  .pricing-grid{grid-template-columns:1fr!important}
  .price-card.popular{transform:none}
  .demo-nav{grid-template-columns:1fr;padding:8px 10px}
  .demo-tabs{justify-content:flex-start;overflow-x:auto}
  .demo-tabs span{flex:none}
  .demo-page{padding:20px 18px}
}
@media (max-width:640px){
  .demo-tabs span:nth-last-child(-n+5){display:none}
  .demo-page{margin:10px;padding:17px 14px}
  .demo-overview h3{font-size:39px}
  .demo-overview p{font-size:13px}
  .demo-overview .demo-deck{font-size:15px}
  .demo-map-key{gap:8px;font-size:6px}
  .final-art{left:0;background-position:right center!important;opacity:.78}
}

.button.disabled{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.62;
  cursor:not-allowed;
  pointer-events:none;
  filter:none;
  transform:none;
}

.intake-grid-single{
  grid-template-columns:minmax(0,1fr);
  max-width:720px;
  margin:0 auto;
}

/* Keep the longer approved hero line commanding but readable. */
.hero-copy{max-width:720px}
.hero h1{font-size:clamp(52px,5.2vw,80px);line-height:.92;letter-spacing:-.045em}
.hero h1 em{white-space:nowrap}
.hero-callout{width:285px}
.hero-callout strong{line-height:1.08}

/* The new substantive non-cinematic section uses the same physical-table surface as the rest of the brand. */
.quantum-scroll{
  border-top:1px solid rgba(199,151,78,.18);
  border-bottom:1px solid rgba(199,151,78,.22);
  background:
    radial-gradient(850px 460px at 18% 18%,rgba(77,160,196,.08),transparent 62%),
    linear-gradient(180deg,rgba(4,10,13,.74),rgba(4,9,12,.82));
}
.quantum-scroll-intro{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);
  gap:68px;
  align-items:end;
  padding-bottom:42px;
}
.quantum-scroll-mark{
  margin:0 0 21px;
  color:var(--gold2);
  font:700 clamp(42px,5vw,68px)/.9 var(--serif);
  letter-spacing:.04em;
  text-shadow:0 10px 35px rgba(0,0,0,.35);
}
.quantum-scroll-mark span{font-size:.26em;vertical-align:top;position:relative;top:.12em;margin-left:.08em;color:var(--gold)}
.quantum-scroll-story{
  padding:7px 0 4px 30px;
  border-left:1px solid rgba(205,158,82,.42);
  color:#bdc8ca;
  font-size:15px;
}
.quantum-scroll-story p{margin:0 0 14px}
.quantum-scroll-story strong{color:#f2dfbf}
.quantum-scroll-divider{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  margin:0 0 26px;
  border-top:1px solid rgba(201,151,78,.32);
  border-bottom:1px solid rgba(201,151,78,.2);
}
.quantum-scroll-divider span{
  padding:10px 8px;
  text-align:center;
  color:#8edcff;
  font-size:8px;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:900;
  border-right:1px solid rgba(201,151,78,.12);
}
.quantum-scroll-divider span:last-child{border-right:0}
.design-principles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.design-principle{
  min-height:225px;
  padding:24px 24px 22px;
  background:linear-gradient(180deg,rgba(14,25,29,.89),rgba(6,13,17,.93));
  border:1px solid rgba(184,141,73,.28);
  border-top:2px solid rgba(201,151,78,.7);
  box-shadow:0 16px 38px rgba(0,0,0,.18);
}
.design-principle small{
  display:block;
  margin-bottom:8px;
  color:var(--blue);
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.design-principle h3{margin:0 0 11px;color:#f1dfbf;font:700 24px/1.05 var(--serif)}
.design-principle p{margin:0;color:#aebdc0;font-size:13px;line-height:1.6}
.quantum-scroll-close{
  width:min(820px,100%);
  margin:34px auto 0;
  color:#d2d9d9;
  text-align:center;
  font:italic 16px/1.6 var(--serif);
}

/* The old problem accordion becomes the public explanation of adventure-awareness. */
.adventure-aware .section-title em{font-style:normal;color:var(--gold2)}
.adventure-aware .preview-intro h3{font-size:32px;line-height:1.04}
.adventure-aware .sample{padding-top:1px}

/* Add enough explanatory context around the existing DM-screen spectacle without reducing the screen's visual importance. */
.screen-copy{margin-bottom:18px}
.screen-explainer{
  width:min(820px,100%);
  margin:0 auto 28px;
  padding:15px 20px;
  text-align:center;
  color:#cad4d5;
  font-size:13px;
  background:rgba(3,10,14,.62);
  border-top:1px solid rgba(210,165,91,.26);
  border-bottom:1px solid rgba(210,165,91,.2);
  backdrop-filter:blur(7px);
  text-shadow:0 2px 16px #000;
}
.screen-explainer p{margin:5px 0}
.screen-explainer strong{color:#f0d7aa}
.screen-payoff{
  width:min(880px,100%);
  margin:20px auto 0;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:13px;
  flex-wrap:wrap;
  text-align:center;
  text-shadow:0 2px 14px #000;
}
.screen-payoff strong{color:#f0d3a1;font:700 23px var(--serif)}
.screen-payoff span{color:#c4ced0;font-size:13px}

/* Strong authorship statement on the import side. */
.authorship-line{
  margin-top:20px!important;
  padding-top:16px;
  border-top:1px solid rgba(197,151,78,.25);
  color:#d8c59e!important;
  font-family:var(--serif);
}

/* Slightly more copy room for feature cards while preserving the existing 3+2 gallery. */
.feature-copy h3{line-height:1.05}
.feature-copy p{line-height:1.55}

/* Table-first payoff is now a product philosophy instead of a VTT rebuttal. */
.table-first .payoff strong{color:#f1d29a;font-family:var(--serif);font-size:1.18em}

/* New pricing title is intentionally longer. */
.pricing-section .section-head{max-width:940px}
.pricing-section .section-title{font-size:clamp(38px,4.4vw,60px)}

/* Preserve the opening/closing bookend in all caps. */
.final-copy h2{text-transform:uppercase}

@media (max-width:1050px){
  .nav-links{gap:16px}
  .nav-links>a:not(.button){font-size:12px}
  .quantum-scroll-intro{gap:42px}
  .design-principles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero h1 em{white-space:normal}
  .quantum-scroll-intro{grid-template-columns:1fr;gap:25px;align-items:start}
  .quantum-scroll-story{padding-left:20px}
  .quantum-scroll-divider{grid-template-columns:repeat(3,1fr)}
  .quantum-scroll-divider span:nth-child(3){border-right:0}
  .quantum-scroll-divider span:nth-child(-n+3){border-bottom:1px solid rgba(201,151,78,.12)}
}
@media (max-width:780px){
  .design-principles{grid-template-columns:1fr}
  .design-principle{min-height:0}
  .screen-explainer{padding:12px 14px;text-align:left}
  .screen-payoff{display:block}
  .screen-payoff strong,.screen-payoff span{display:block}
  .screen-payoff span{margin-top:5px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(44px,13vw,62px)}
  .quantum-scroll-divider{grid-template-columns:repeat(2,1fr)}
  .quantum-scroll-divider span:nth-child(2n){border-right:0}
  .quantum-scroll-divider span:nth-child(-n+4){border-bottom:1px solid rgba(201,151,78,.12)}
}

/* === Master Your World + Feature focus gallery === */

/* MASTER YOUR WORLD */
.your-world .wrap{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(390px,540px)!important;
  gap:clamp(42px,6vw,92px)!important;
  align-items:center!important;
}

.world-mastery{
  align-self:center;
  width:100%;
  padding:0;
}

.world-mastery-kicker{
  margin-bottom:8px;
  color:#83dcff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.world-mastery-scene{
  margin:0 0 16px;
  color:#f1dfbe;
  font:700 25px/1.08 var(--serif);
}

.world-mastery-body{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}

.world-mastery-rail{
  display:grid;
  gap:5px;
}

.world-mastery-rail button{
  position:relative;
  min-height:38px;
  padding:0 10px 0 14px;
  border:0;
  border-left:1px solid rgba(193,157,99,.28);
  background:rgba(5,14,18,.38);
  color:#9fadb0;
  cursor:pointer;
  text-align:left;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  transition:
    border-color .16s ease,
    color .16s ease,
    background .16s ease,
    padding-left .16s ease;
}

.world-mastery-rail button:hover{
  color:#e4ecec;
  border-left-color:rgba(131,220,255,.56);
}

.world-mastery-rail button:focus-visible{
  outline:2px solid #83dcff;
  outline-offset:2px;
}

.world-mastery-rail button.is-active{
  padding-left:18px;
  border-left:2px solid #d8b46f;
  background:linear-gradient(90deg,rgba(126,91,40,.26),rgba(5,14,18,.12));
  color:#f1dcb5;
}

.world-mastery-rail button.is-active::before{
  content:"";
  position:absolute;
  left:-4px;
  top:50%;
  width:6px;
  height:6px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#83dcff;
  box-shadow:0 0 10px rgba(131,220,255,.55);
}

.world-mastery-answer{
  --master-bg:url("/assets/landing/master-discovery.png");
  --master-overlay:linear-gradient(
    rgba(4,12,16,.09) 0%,
    rgba(4,12,16,.9) 30%,
    rgba(4,12,16,.9) 60%,
    rgba(4,12,16,0) 70%
  );
  --master-position:center center;

  background:
    var(--master-overlay),
    var(--master-bg) var(--master-position)/cover no-repeat;

  overflow:hidden;
  box-sizing:border-box;
  max-height:258px;
  height:258px;
  min-height:258px;
  padding:18px 18px 17px;
  border:1px solid rgba(199,151,78,.34);
  border-left:2px solid rgba(91,202,255,.66);
box-shadow:0 16px 42px rgba(0,0,0,.25);
  backdrop-filter:blur(5px);
}

.world-mastery-answer>small{
  display:block;
  margin-bottom:12px;
  color:#83dcff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.world-mastery-runtime{
  min-height:188px;
}

/* Discovery: runtime read-aloud */
.wm-readaloud{
  padding:14px 15px 15px;
  border-left:3px solid rgba(208,164,91,.78);
  background:rgba(232,221,195,.075);
}

.wm-readaloud span{
  display:block;
  margin-bottom:7px;
  color:#d5b36f;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.wm-readaloud p{
  margin:0!important;
  color:#e8e1d4!important;
  font:italic 14px/1.58 var(--serif)!important;
}

/* Encounters: compact character block */
.wm-character{
  border:1px solid rgba(192,158,101,.28);
  background:rgba(5,14,18,.52);
}

.wm-character-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.wm-character-head div{
  min-width:0;
}

.wm-character-head strong{
  display:block;
  color:#f0dfc0;
  font:700 18px/1.05 var(--serif);
}

.wm-character-head em{
  display:block;
  margin-top:3px;
  color:#aab7b9;
  font-size:10px;
}

.wm-chip{
  flex:none;
  padding:4px 7px;
  border:1px solid rgba(91,202,255,.38);
  color:#83dcff;
  background:rgba(52,135,176,.1);
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.wm-character-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.wm-character-field{
  padding:9px 11px 10px;
  border-top:1px solid rgba(255,255,255,.07);
}

.wm-character-field:nth-child(odd){
  border-right:1px solid rgba(255,255,255,.07);
}

.wm-character-field span,
.wm-check-label,
.wm-state-label,
.wm-guidance-label{
  display:block;
  margin-bottom:3px;
  color:#91a2a5;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.wm-character-field p{
  margin:0!important;
  color:#d9e0e0!important;
  font-size:10px!important;
  line-height:1.4!important;
}

/* Exploration: skill + DC check */
.wm-check{
  overflow:hidden;
  border:1px solid rgba(192,158,101,.32);
  background:rgba(5,14,18,.54);
}

.wm-check-top{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:stretch;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.wm-check-skill{
  padding:12px 13px 11px;
}

.wm-check-skill strong{
  display:block;
  color:#f0dfc0;
  font:700 17px/1.1 var(--serif);
}

.wm-dc{
  min-width:68px;
  display:grid;
  place-items:center;
  padding:8px 10px;
  border-left:1px solid rgba(255,255,255,.08);
  color:#f1d79f;
  background:rgba(126,91,40,.2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wm-check-body{
  padding:11px 13px 12px;
}

.wm-check-body p{
  margin:0!important;
  color:#cbd6d7!important;
  font-size:11px!important;
  line-height:1.45!important;
}

.wm-success{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.wm-success strong{
  display:block;
  margin-bottom:3px;
  color:#83dcff;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Consequences: changed state */
.wm-state{
  border:1px solid rgba(192,158,101,.28);
  background:rgba(5,14,18,.52);
}

.wm-state-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.wm-state-head strong{
  color:#f0dfc0;
  font:700 17px/1.05 var(--serif);
}

.wm-state-badge{
  padding:4px 7px;
  border:1px solid rgba(113,179,135,.42);
  background:rgba(54,111,71,.16);
  color:#bfe1c7;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.wm-state-row{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  padding:9px 12px;
  border-top:1px solid rgba(255,255,255,.07);
}

.wm-state-row strong{
  color:#d8e0e0;
  font-size:10px;
  line-height:1.38;
}

/* Pacing: DM guidance */
.wm-guidance{
  border:1px solid rgba(192,158,101,.28);
  background:rgba(5,14,18,.52);
  padding:12px 13px 13px;
}

.wm-beats{
  display:flex;
  align-items:center;
  gap:5px;
  margin:8px 0 13px;
  flex-wrap:wrap;
}

.wm-beats span{
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.1);
  color:#9fadaf;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wm-beats span.active{
  border-color:rgba(240,207,145,.55);
  color:#f1dcb5;
  background:rgba(126,91,40,.18);
}

.wm-beats i{
  color:#65777a;
  font-style:normal;
  font-size:9px;
}

.wm-guidance-note{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.wm-guidance-note strong{
  color:#d9e0e0;
  font-size:10px;
  line-height:1.4;
}

/* Payoff: connected thread */
.wm-thread{
  padding:2px 0 0 2px;
}

.wm-thread-node{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:27px;
  padding-left:16px;
}

.wm-thread-node::before{
  content:"";
  position:absolute;
  left:3px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(91,202,255,.25);
}

.wm-thread-node::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px rgba(216,180,111,.3);
}

.wm-thread-node span{
  color:#d8e0e0;
  font-size:10px;
}

.wm-thread-node:last-child span{
  color:#f0dfc0;
  font-weight:800;
}

.wm-thread-node:last-child::after{
  background:var(--red);
}

.wm-thread-result{
  margin-top:5px;
  padding:6px 9px;
  border:1px solid rgba(91,202,255,.2);
  background:rgba(52,135,176,.07);
  color:#becbcd;
  font-size:9px;
  line-height:1.28;
}

@media (max-width:900px){
  .your-world .wrap{
    grid-template-columns:1fr!important;
    gap:32px!important;
    padding:54px 0!important;
  }

  .world-mastery{
    max-width:720px;
  }

  .world-mastery-body{
    grid-template-columns:132px minmax(0,1fr);
  }
}

@media (max-width:620px){
  .world-mastery-body{
    grid-template-columns:1fr;
  }

  .world-mastery-rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .world-mastery-answer,
  .world-mastery-runtime{
    min-height:0;
  }

  .wm-character-grid{
    grid-template-columns:1fr;
  }

  .wm-character-field:nth-child(odd){
    border-right:0;
  }

  .world-mastery-answer{
    height:auto;
    min-height:0;
    max-height:none;
    overflow:visible;
  }
}

/* FEATURES: in-place focus gallery */
.feature-card[data-feature-focus]{
  cursor:pointer;
  transform-origin:center;
  transition:
    transform .3s cubic-bezier(.2,.75,.2,1),
    filter .3s ease,
    opacity .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.feature-card[data-feature-focus] img{
  transition:
    transform .32s cubic-bezier(.2,.75,.2,1),
    filter .32s ease!important;
}

.feature-card[data-feature-focus] .feature-copy{
  transition:
    opacity .22s ease,
    transform .25s ease;
}

@media (hover:hover) and (pointer:fine){
  .feature-card[data-feature-focus]:not(.is-focused):hover{
    transform:translateY(-3px);
    border-color:rgba(218,175,101,.58);
    box-shadow:0 22px 54px rgba(0,0,0,.42);
  }

  .feature-card[data-feature-focus]:not(.is-focused):hover img{
    transform:scale(1.026)!important;
    filter:saturate(1.07) brightness(1.035)!important;
  }
}

.feature-card[data-feature-focus]:focus-visible{
  outline:2px solid #83dcff;
  outline-offset:4px;
}

.feature-gallery.is-focused .feature-card[data-feature-focus]:not(.is-focused){
  transform:scale(.955);
  filter:brightness(.52) saturate(.55);
  opacity:.72;
}

.feature-card[data-feature-focus].is-focused{
  z-index:9;
  transform:scale(1.085);
  border-color:rgba(238,195,118,.82);
  box-shadow:
    0 32px 78px rgba(0,0,0,.66),
    0 0 0 1px rgba(238,195,118,.16);
  cursor: default;
}

.feature-card[data-feature-focus].is-focused img{
  transform:scale(1.065)!important;
  filter:saturate(.78) brightness(.44)!important;
}

.feature-card[data-feature-focus].is-focused .feature-copy{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}

.feature-focus-overlay{
  position:absolute;
  z-index:4;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px 25px 23px;
  opacity:0;
  transform:translateY(9px);
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,8,11,.18) 0%,rgba(3,8,11,.62) 34%,rgba(3,8,11,.97) 100%);
  transition:
    opacity .23s ease .06s,
    transform .28s ease .04s;
}

.feature-card.is-focused .feature-focus-overlay{
  opacity:1;
  transform:translateY(0);
}

.feature-focus-overlay>small{
  margin-bottom:4px;
  color:#83dcff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.feature-focus-overlay>h3{
  margin:0 0 12px;
  color:#f2dfbe;
  font:700 clamp(22px,2.2vw,31px)/1.05 var(--serif);
}

.feature-focus-close{
  position:absolute;
  top:12px;
  right:15px;
  color:#ead3a9;
  font:300 28px/1 sans-serif;
  opacity:.78;
}

.feature-focus-close{
  pointer-events: all;  
}

.feature-focus-close:hover{
  filter: brightness(2);
  cursor: pointer;
}

.feature-focus-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 16px;
}

.feature-focus-grid div{
  min-width:0;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.12);
}

.feature-focus-grid span{
  display:block;
  margin-bottom:2px;
  color:#9caeb1;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.feature-focus-grid strong{
  display:block;
  color:#e3e8e8;
  font-size:11px;
  line-height:1.36;
}

.feature-focus-payoff{
  margin:10px 0 0!important;
  color:#dfc58f!important;
  font:italic 12px/1.4 var(--serif)!important;
}

@media (max-width:900px){
  .your-world .wrap{
    grid-template-columns:1fr!important;
    gap:32px!important;
    padding:54px 0!important;
  }

  .world-mastery{
    max-width:700px;
  }

  .world-mastery-body{
    grid-template-columns:132px minmax(0,1fr);
  }

  .feature-card[data-feature-focus].is-focused{
    transform:scale(1.035);
  }

  .feature-gallery.is-focused .feature-card[data-feature-focus]:not(.is-focused){
    transform:scale(.98);
  }
}

@media (max-width:620px){
  .world-mastery-body{
    grid-template-columns:1fr;
  }

  .world-mastery-rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .world-mastery-answer{
    min-height:190px;
  }


  .feature-focus-overlay{
    padding:20px 18px 18px;
  }

  .feature-focus-grid{
    grid-template-columns:1fr;
    gap:5px;
  }

  .feature-focus-payoff{
    display:none;
  }

  .feature-card[data-feature-focus].is-focused{
    transform:none;
  }

  .feature-gallery.is-focused .feature-card[data-feature-focus]:not(.is-focused){
    transform:none;
    opacity:.5;
  }
}

@media (prefers-reduced-motion:reduce){
  .world-mastery-questions button,
  .feature-card[data-feature-focus],
  .feature-card[data-feature-focus] img,
  .feature-card[data-feature-focus] .feature-copy,
  .feature-focus-overlay{
    transition:none!important;
  }
}

/* === Feature Rules runtime specimen === */
/*
  The gallery remains visually part of the landing page.
  Only the inline check borrows the runtime's native .check language.
*/
.feature-focus-overlay-rules{
  justify-content:flex-end;
}

.feature-focus-overlay-rules>h3{
  margin-bottom:7px;
}

.kd-runtime-sample{
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  color:inherit;
  font-family:inherit;
}

.feature-focus-rule-copy{
  margin:0!important;
  color:#cfd8d9!important;
  font-size:11px!important;
  line-height:1.42!important;
}

/* Mirrors the runtime's inline .check treatment without creating a fake screenshot. */
.kd-runtime-check{
  margin:8px 0 0;
  padding:6px 8px;
  border:0;
  background:rgba(49,88,64,.18);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.66rem;
  line-height:1.38;
}

.kd-runtime-check strong{
  display:inline;
  color:#8fc7d6;
  font-weight:800;
}

.kd-runtime-check p{
  display:inline;
  margin:0 0 0 5px!important;
  color:#d8e0e0!important;
  font-size:inherit!important;
  line-height:inherit!important;
}

@media (max-width:620px){
  .feature-focus-overlay-rules .feature-focus-payoff{
    display:none;
  }
}

/* === Feature focus carousel arrows === */
.feature-card[data-feature-focus].is-focused{
  overflow:visible;
}

.feature-focus-nav{
  position:absolute;
  z-index:14;
  top:50%;
  width:42px;
  height:52px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(232,196,129,.5);
  background:rgba(3,9,12,.92);
  color:#f1dfbe;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  cursor:pointer;
  font:400 32px/1 Georgia,serif;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) scale(.92);
  transition:
    opacity .18s ease,
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.feature-card.is-focused .feature-focus-nav{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) scale(1);
}

.feature-focus-nav.prev{
  left:-54px;
}

.feature-focus-nav.next{
  right:-54px;
}

.feature-focus-nav:hover{
  border-color:rgba(131,220,255,.78);
  background:rgba(7,20,26,.98);
}

.feature-focus-nav:focus-visible{
  outline:2px solid #83dcff;
  outline-offset:3px;
}

@media (max-width:900px){
  .feature-focus-nav{
    width:38px;
    height:46px;
    font-size:28px;
  }

  .feature-focus-nav.prev{
    left:-22px;
  }

  .feature-focus-nav.next{
    right:-22px;
  }
}

@media (max-width:620px){
  .feature-card[data-feature-focus].is-focused{
    overflow:hidden;
  }

  .feature-focus-nav{
    top:14px;
    width:36px;
    height:36px;
    transform:none;
    font-size:24px;
  }

  .feature-card.is-focused .feature-focus-nav{
    transform:none;
  }

  .feature-focus-nav.prev{
    left:auto;
    right:58px;
  }

  .feature-focus-nav.next{
    right:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .feature-focus-nav{
    transition:none!important;
  }
}

/* === MASTER YOUR WORLD: Payoff artwork === 
.world-mastery-answer.is-payoff{
  background-image:
    linear-gradient(90deg,rgba(3,9,12,.92) 0%,rgba(3,9,12,.78) 58%,rgba(3,9,12,.42) 100%),
    url("/assets/landing/master-payoff.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
*/

/* === MASTER YOUR WORLD: robust concept backgrounds === */

/* Exploration gets its own artwork. Other tabs fall back to the base
   .world-mastery-answer background automatically. */

/* === MASTER YOUR WORLD: variable artwork system === */

.world-mastery-answer[data-concept="consequences"]{
  --master-bg:url("/assets/landing/master-exploration.png");
}

.world-mastery-answer[data-concept="pacing"]{
  --master-bg:url("/assets/landing/master-exploration.png");
}

.world-mastery-answer[data-concept="exploration"]{
  --master-bg:url("/assets/landing/master-exploration.png");
}

.world-mastery-answer[data-concept="payoff"]{
  --master-bg:url("/assets/landing/master-payoff.png");
}

/* === MASTER YOUR WORLD: layered pane transition === */

/*
  The pane background is rendered on ::before so it can animate independently
  from the text/runtime artifact. The existing --master-bg,
  --master-overlay, and --master-position variables still control the artwork.

  These variables are available for future per-concept tuning:
    --wm-bg-enter-scale
    --wm-bg-enter-x
    --wm-bg-enter-y
    --wm-content-enter-y
    --wm-detail-enter-y
*/
.world-mastery-answer{
  --wm-bg-enter-scale:1.045;
  --wm-bg-enter-x:0px;
  --wm-bg-enter-y:0px;
  --wm-content-enter-y:8px;
  --wm-detail-enter-y:5px;

  position:relative;
  overflow:hidden;
  isolation:isolate;

  /* Dark fallback only. Artwork now lives on ::before. */
  background:#041016;
}

.world-mastery-answer::before{
  content:"";
  position:absolute;
  inset:-2%;
  z-index:0;
  pointer-events:none;

  background:
    var(--master-overlay),
    var(--master-bg) var(--master-position)/cover no-repeat;

  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center;
  will-change:transform,opacity,filter;
}

.world-mastery-answer > small,
.world-mastery-answer .world-mastery-runtime{
  position:relative;
  z-index:1;
}

/* Background arrives first: slight push-in, deblur, and settle. */
.world-mastery-answer.wm-bg-entering::before{
  animation:
    wm-master-bg-enter
    760ms
    cubic-bezier(.16,1,.3,1)
    both;
}

/* Eyebrow follows shortly after the image starts moving. */
.world-mastery-answer.wm-entering > small{
  animation:
    wm-master-eyebrow-enter
    390ms
    cubic-bezier(.22,1,.36,1)
    65ms
    both;
}

/* Main runtime artifact enters as one layer. */
.world-mastery-answer.wm-entering .world-mastery-runtime > *{
  animation:
    wm-master-content-enter
    520ms
    cubic-bezier(.16,1,.3,1)
    125ms
    both;
}

.world-mastery-answer.wm-entering .world-mastery-runtime > *:nth-child(2){
  animation-delay:190ms;
}

.world-mastery-answer.wm-entering .world-mastery-runtime > *:nth-child(3){
  animation-delay:235ms;
}

/*
  One level inside the artifact settles a little later. This is what keeps the
  change from feeling like a single PowerPoint object sliding onto the screen.
*/
.world-mastery-answer.wm-entering .world-mastery-runtime > * > *{
  animation:
    wm-master-detail-enter
    430ms
    cubic-bezier(.22,1,.36,1)
    185ms
    both;
}

.world-mastery-answer.wm-entering .world-mastery-runtime > * > *:nth-child(2){
  animation-delay:225ms;
}

.world-mastery-answer.wm-entering .world-mastery-runtime > * > *:nth-child(3){
  animation-delay:265ms;
}

.world-mastery-answer.wm-entering .world-mastery-runtime > * > *:nth-child(4){
  animation-delay:305ms;
}

@keyframes wm-master-bg-enter{
  0%{
    opacity:.5;
    filter:blur(4px) saturate(.78) brightness(.84);
    transform:
      translate3d(
        var(--wm-bg-enter-x),
        var(--wm-bg-enter-y),
        0
      )
      scale(var(--wm-bg-enter-scale));
  }

  55%{
    opacity:.92;
    filter:blur(.8px) saturate(.96) brightness(.96);
  }

  100%{
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes wm-master-eyebrow-enter{
  0%{
    opacity:0;
    filter:blur(2px);
    transform:translate3d(0,6px,0);
  }

  100%{
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0);
  }
}

@keyframes wm-master-content-enter{
  0%{
    opacity:0;
    filter:blur(2px);
    transform:translate3d(0,var(--wm-content-enter-y),0);
  }

  100%{
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0);
  }
}

@keyframes wm-master-detail-enter{
  0%{
    opacity:0;
    filter:blur(1.25px);
    transform:translate3d(0,var(--wm-detail-enter-y),0);
  }

  100%{
    opacity:1;
    filter:none;
    transform:translate3d(0,0,0);
  }
}

@media (prefers-reduced-motion:reduce){
  .world-mastery-answer.wm-bg-entering::before,
  .world-mastery-answer.wm-entering > small,
  .world-mastery-answer.wm-entering .world-mastery-runtime > *,
  .world-mastery-answer.wm-entering .world-mastery-runtime > * > *{
    animation:none!important;
  }
}

/*
  Future per-pane variation can stay very small, for example:

  .world-mastery-answer[data-concept="payoff"]{
    --wm-bg-enter-scale:1.02;
    --wm-bg-enter-x:7px;
    --wm-content-enter-y:5px;
  }
*/

/* === MASTER YOUR WORLD: Exploration runtime-check refinement === */

/*
  Mirrors the actual runtime .check treatment for the check label itself.
  The surrounding landing-page pane keeps its own visual language.
*/
.wm-runtime-checkline{
  margin:8px 12px 0;
  padding:5px 7px;
  border:0;
  background:rgba(49,88,64,.08);
  font-family:var(--ui);
  font-size:.66rem;
  line-height:1.38;
}

.wm-runtime-checkline strong{
  display:inline;
  color:var(--green,#83b892);
  font:inherit;
  font-weight:700;
}

/*
  Do not turn this into a second Read Aloud box. It only borrows the
  Discovery read-aloud typography: serif + italic + matching line-height.
*/
.wm-check-body > .wm-exploration-readaloud{
  margin:0!important;
  color:#e8e1d4!important;
  font:italic 14px/1.58 var(--serif)!important;
}

/* === MASTER YOUR WORLD: Exploration presentation refinement === */

/* No divider immediately under "Secrets reward curiosity." */
.world-mastery-answer[data-concept="exploration"] > small{
  border-bottom:0!important;
}

.world-mastery-answer[data-concept="exploration"] > small::after{
  display:none!important;
}

/* Restore Ability Check as a real heading rather than an eyebrow. */
.world-mastery-answer[data-concept="exploration"] .wm-check-heading{
  margin:10px 12px 4px;
  color:var(--gold,#c9a66b);
  font-family:var(--serif);
  font-size:.98rem;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.01em;
}

/* Keep the actual check itself in the compact runtime-native style. */
.world-mastery-answer[data-concept="exploration"] .wm-runtime-checkline{
  margin-top:0;
}

/*
  Read-aloud treatment for the descriptive setup.
  This intentionally borrows the runtime read-aloud visual language without
  adding a redundant "Read Aloud" label.
*/
.world-mastery-answer[data-concept="exploration"] .wm-exploration-readaloud{
  display:block;
  margin:9px 12px 12px!important;
  padding:10px 12px!important;
  border:1px solid rgba(188,176,139,.72)!important;
  border-left:4px solid #887d5d!important;
  background:rgba(255,255,255,.10)!important;
  color:#e8e1d4!important;
  font-family:var(--serif)!important;
  font-size:14px!important;
  font-style:italic!important;
  font-weight:400!important;
  line-height:1.45!important;
}

/* Match the muted gray label treatment used by Encounter subheadings. */
.world-mastery-answer[data-concept="exploration"] .wm-success > strong{
  color:var(--muted,#9aa2a3)!important;
}

/* === MASTER YOUR WORLD: Exploration visual reset v2 === */

/* Exploration should read like Discovery, not like a nested dashboard. */
.world-mastery-answer[data-concept="exploration"] > small{
  border:0!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-exploration-stack{
  margin:0;
  padding:0 18px 14px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-check-heading{
  margin:10px 0 7px!important;
  padding:0!important;
  border:0!important;
  color:#d2a85e!important;
  font-family:var(--serif)!important;
  font-size:1.02rem!important;
  font-weight:700!important;
  line-height:1.15!important;
  letter-spacing:0!important;
}

/* Compact runtime check strip. No detached DC badge, no surrounding frame. */
.world-mastery-answer[data-concept="exploration"] .wm-runtime-checkline{
  margin:0 0 12px!important;
  padding:5px 7px!important;
  border:0!important;
  background:rgba(235,229,207,.90)!important;
  box-shadow:none!important;
  font-family:var(--ui)!important;
  font-size:.66rem!important;
  line-height:1.38!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-runtime-checkline strong{
  display:inline!important;
  color:#315840!important;
  font-family:var(--ui)!important;
  font-size:inherit!important;
  font-style:normal!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Match Discovery's Read Aloud composition: broad translucent field + gold rule. */
.world-mastery-answer[data-concept="exploration"] .wm-exploration-readaloud{
  display:block!important;
  margin:0 0 12px!important;
  padding:10px 14px 11px!important;
  border:0!important;
  border-left:4px solid #c6a257!important;
  background:rgba(24,31,34,.78)!important;
  box-shadow:none!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-readaloud-label{
  display:block!important;
  margin:0 0 6px!important;
  color:#c6a257!important;
  font-family:var(--ui)!important;
  font-size:.54rem!important;
  font-style:normal!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-exploration-readaloud p{
  margin:0!important;
  padding:0!important;
  color:#e8e1d4!important;
  font-family:var(--serif)!important;
  font-size:.88rem!important;
  font-style:italic!important;
  font-weight:400!important;
  line-height:1.48!important;
}

/* Success is a quiet subheading like On Arrival / Wants / Says / Knows. */
.world-mastery-answer[data-concept="exploration"] .wm-success{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-success > strong{
  display:block!important;
  margin:0 0 4px!important;
  color:#9aa2a3!important;
  font-family:var(--ui)!important;
  font-size:.56rem!important;
  font-style:normal!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-success > p{
  margin:0!important;
  color:#d3d7d5!important;
  font-family:var(--ui)!important;
  font-size:.72rem!important;
  line-height:1.42!important;
}

/* === MASTER YOUR WORLD: Exploration success reveal v3 === */

@property --wm-explore-top-alpha{
  syntax:"<number>";
  inherits:true;
  initial-value:.09;
}

@property --wm-explore-thirty-alpha{
  syntax:"<number>";
  inherits:true;
  initial-value:.9;
}

/* Normal Exploration masking. */
.world-mastery-answer[data-concept="exploration"]::before{
  --wm-explore-top-alpha:.09;
  --wm-explore-thirty-alpha:.9;

  --master-overlay:linear-gradient(
    rgba(4,12,16,var(--wm-explore-top-alpha)) 0%,
    rgba(4,12,16,var(--wm-explore-thirty-alpha)) 30%,
    rgba(4,12,16,.9) 60%,
    rgba(4,12,16,0) 70%
  );

  transition:
    --wm-explore-top-alpha 900ms cubic-bezier(.16,1,.3,1),
    --wm-explore-thirty-alpha 900ms cubic-bezier(.16,1,.3,1);
}

/* Revealed state: exactly the requested gradient values. */
.world-mastery-answer[data-concept="exploration"].wm-secret-revealed::before{
  --wm-explore-top-alpha:.9;
  --wm-explore-thirty-alpha:.09;
}


/* ---------- Success trigger ---------- */

.world-mastery-answer[data-concept="exploration"] .wm-success-reveal{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-success-trigger{
  width:100%;
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin:0;
  padding:2px 1px;

  border:0;
  background:transparent;
  box-shadow:none;

  color:inherit;
  text-align:left;
  cursor:pointer;
}

.world-mastery-answer[data-concept="exploration"] .wm-success-trigger > strong{
  display:block;
  margin:0;
  color:#9aa2a3;
  font-family:var(--ui);
  font-size:.56rem;
  font-style:normal;
  font-weight:700;
  line-height:1;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.world-mastery-answer[data-concept="exploration"] .wm-success-caret{
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin-right:4px;

  border-right:1.5px solid rgba(198,162,87,.95);
  border-bottom:1.5px solid rgba(198,162,87,.95);

  opacity:.72;
  transform:rotate(45deg) translate3d(0,0,0);
  animation:wm-success-caret-pulse 1650ms ease-in-out infinite;
}

.world-mastery-answer[data-concept="exploration"] .wm-success-trigger:hover .wm-success-caret,
.world-mastery-answer[data-concept="exploration"] .wm-success-trigger:focus-visible .wm-success-caret{
  opacity:1;
}

.world-mastery-answer[data-concept="exploration"] .wm-success-trigger:focus-visible{
  outline:1px solid rgba(198,162,87,.55);
  outline-offset:4px;
}

@keyframes wm-success-caret-pulse{
  0%,100%{
    opacity:.5;
    transform:rotate(45deg) translate3d(0,0,0);
  }

  50%{
    opacity:1;
    transform:rotate(45deg) translate3d(2px,2px,0);
  }
}


/* ---------- Revealed result ---------- */

.world-mastery-answer[data-concept="exploration"] .wm-success-result{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transform:translate3d(0,5px,0);

  transition:
    grid-template-rows 480ms cubic-bezier(.16,1,.3,1),
    opacity 320ms ease 80ms,
    transform 480ms cubic-bezier(.16,1,.3,1);
}

.world-mastery-answer[data-concept="exploration"] .wm-success-result > p{
  min-height:0;
  overflow:hidden;

  margin:0!important;
  color:#d3d7d5!important;
  font-family:var(--ui)!important;
  font-size:.72rem!important;
  line-height:1.42!important;
}

.world-mastery-answer[data-concept="exploration"] .wm-success-reveal.is-revealed .wm-success-result{
  grid-template-rows:1fr;
  opacity:1;
  transform:translate3d(0,0,0);
}

.world-mastery-answer[data-concept="exploration"] .wm-success-reveal.is-revealed .wm-success-trigger{
  cursor:default;
  pointer-events:none;
}

.world-mastery-answer[data-concept="exploration"] .wm-success-reveal.is-revealed .wm-success-caret{
  animation:none;
  opacity:0;
  transform:rotate(45deg) translate3d(5px,5px,0) scale(.55);

  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion:reduce){
  .world-mastery-answer[data-concept="exploration"]::before,
  .world-mastery-answer[data-concept="exploration"] .wm-success-result{
    transition:none!important;
  }

  .world-mastery-answer[data-concept="exploration"] .wm-success-caret{
    animation:none!important;
  }
}