/* Isolated WebCompositionR02. Actual native renders, composed as separate layers. */
.promo-hero{position:relative;isolation:isolate;overflow:hidden;background:#100d18;min-height:690px;border-bottom:1px solid #d8b77b33}
.promo-environment{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 56%;opacity:.87;z-index:-3;pointer-events:none}
.promo-hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#110d1af7 0%,#180e26de 22%,#180e268a 41%,#180e2610 64%),linear-gradient(0deg,#100d18 0%,#100d1800 31%,#160d2720 80%,#100d1855)}
.promo-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 73% 54%,#cda8fb25,transparent 39%)}
.promo-hero-inner{position:relative;min-height:690px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);align-items:center;gap:28px}
.promo-copy{position:relative;z-index:3;max-width:490px;padding-block:76px 110px}
.promo-copy .eyebrow{margin-bottom:23px}
.promo-copy h1{font-size:clamp(3.2rem,4.8vw,5rem);max-width:560px;text-shadow:0 2px 30px #0007;line-height:1.03}
.promo-copy .lead{font-size:1rem;line-height:1.8;color:#ded4e1;max-width:410px;margin-top:28px;text-wrap:pretty}
.promo-copy .inline{margin-top:30px;gap:18px}
.promo-copy .small{margin-top:20px;max-width:390px;color:#c4b8cb;font-size:.72rem}
.promo-stage{position:relative;isolation:isolate;align-self:end;height:610px;min-width:0;margin:0 -46px 25px -95px;pointer-events:none}
.promo-stage::before{content:"";position:absolute;inset:17% 3% 9%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#9b67d51c,transparent 69%);filter:blur(15px)}
.promo-party{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 15px 24px #07041399)}
.promo-mist{position:absolute;pointer-events:none;z-index:2;inset:auto -5% 0;height:19%;background:radial-gradient(ellipse at 55% 70%,#b6a0d120,transparent 60%);filter:blur(16px);animation:promo-mist 16s ease-in-out infinite alternate}
@keyframes promo-mist{to{opacity:.55;transform:translateX(12px)}}
.promo-note{position:absolute;right:0;bottom:22px;z-index:4;text-align:right;max-width:650px;font-size:.75rem;line-height:1.6;color:#d8cadf;text-shadow:0 1px 5px #000}
.promo-note span{display:block;color:#b8a9c3;font-size:.67rem}
.promo-breadcrumb{display:flex;align-items:center;gap:15px;font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.promo-breadcrumb::before{content:"";width:34px;height:1px;background:var(--gold)}
.promo-metrics{padding-block:24px;justify-content:space-between;gap:24px;border-top:0;margin-top:0}
.promo-metrics>span{display:flex;align-items:center;gap:8px}
.promo-metrics strong{font-size:1.7rem}
.promo-section{padding-block:92px}
.promo-section .section-heading{margin-bottom:35px;align-items:center}
.promo-section .section-heading h2{max-width:650px;font-size:clamp(2.2rem,3.6vw,3.7rem)}
.promo-class-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.promo-class-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:0 17px 23px;border:1px solid #d8b77b25;background:linear-gradient(160deg,#38243d55,#17121f);transition:border-color .25s,background .25s}
.promo-class-card:hover{border-color:#d8b77b88;background:linear-gradient(160deg,#4a2d5055,#17121f);color:var(--paper)}
.promo-class-image{height:275px;position:relative;isolation:isolate;margin-inline:-12px;overflow:hidden}
.promo-class-image::before{content:"";position:absolute;inset:20% 0 0;z-index:-1;background:radial-gradient(ellipse at 50% 90%,#9066b933,transparent 69%)}
.promo-class-image img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 12px #0007);transition:transform .35s}
.promo-class-card:hover img{transform:translateY(-4px)}
.promo-class-card .region-index{font-size:.59rem;min-height:20px;margin-top:17px;color:var(--gold);letter-spacing:.13em}
.promo-class-card h3{font-size:clamp(1.15rem,1.6vw,1.55rem);line-height:1.14;margin-top:10px;min-height:3.5em}
.promo-class-card p{font-size:.75rem;line-height:1.75;color:#bcaec5;margin-top:10px}
.promo-class-caption{margin-top:18px}
.promo-world{background:linear-gradient(180deg,#17111f,#100d18);border-block:1px solid var(--line)}
.promo-landscape{margin:0;position:relative;isolation:isolate;min-height:410px;overflow:hidden;border:1px solid #d8b77b44;background:#1e1831}
.promo-landscape>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center;z-index:-2}
.promo-landscape::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#100d18d9,#100d1870 42%,transparent 70%),linear-gradient(0deg,#100d18a8,transparent 65%)}
.promo-landscape-copy{padding:50px;width:min(52%,590px)}
.promo-landscape-copy h2{font-size:clamp(2.2rem,3.6vw,3.7rem)}
.promo-landscape-copy p{color:#d7ccdc;margin-block:23px 25px;font-size:.91rem;max-width:450px}
.promo-landscape figcaption{position:absolute;right:20px;bottom:15px;max-width:430px;font-size:.62rem;color:#c7b5d4;text-align:right}
.promo-dragon-section{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 25% 60%,#6b385038,transparent 48%)}
.promo-dragon-section .dragon-feature{min-height:430px;gap:50px}
.promo-dragon-section .dragon-feature img{height:440px;width:100%;object-fit:contain}
.promo-dragon-section .dragon-feature h2{max-width:620px}
.promo-dragon-section .dragon-feature .lead{margin-top:24px}
.promo-dragon-section .text-link{display:inline-block;margin-top:26px}
.promo-dragon-section .caption{margin-top:22px}
.promo-panorama-figure{margin-bottom:50px}
.promo-panorama-figure>img{width:100%;aspect-ratio:2.3;object-fit:cover;border:1px solid #d8b77b44}
.promo-panorama-figure figcaption{font-size:.69rem;color:var(--muted);margin-top:12px;line-height:1.8}
.class-row.promo-class-detail{grid-template-columns:28px 180px minmax(0,1fr);gap:22px 30px;align-items:start}
.promo-class-detail .promo-detail-portrait{grid-column:2;grid-row:1/4;height:290px;width:100%;object-fit:contain;object-position:center top;filter:drop-shadow(0 10px 15px #0007)}
.promo-class-detail>div{grid-column:3}
.promo-class-detail>p{grid-column:3}
.promo-class-detail>.class-skills{grid-column:3}
.promo-class-detail .class-skills ul{gap:12px}
.promo-class-detail .class-skills li{padding:16px}
@media(min-width:1600px){.promo-hero-inner{min-height:750px}.promo-stage{height:670px;margin-right:-90px;margin-left:-110px}.promo-hero{min-height:750px}.promo-environment{object-position:55% 53%}}
@media(max-width:1150px) and (min-width:761px){.promo-hero,.promo-hero-inner{min-height:630px}.promo-stage{height:525px;margin-left:-100px;margin-right:-35px}.promo-copy{padding-bottom:110px}.promo-copy h1{font-size:3.6rem}.promo-copy .lead{font-size:.91rem}.promo-class-grid{gap:10px}.promo-class-card{padding-inline:12px}.promo-class-image{height:220px}.promo-class-card h3{font-size:1.2rem}.promo-landscape-copy{padding:35px;width:60%}.class-row.promo-class-detail{grid-template-columns:24px 140px minmax(0,1fr);gap:18px}.promo-class-detail>.class-skills{grid-column:2/-1}}
@media(max-width:760px){
 .promo-hero{min-height:0}.promo-environment{height:490px;inset:auto 0 0;object-position:58% 55%;opacity:.85}.promo-hero::before{background:linear-gradient(180deg,#100d18 0%,#130e1f 30%,#160e2499 51%,#100d1800 71%,#100d18 100%)}
 .promo-hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0}.promo-copy{padding:43px 0 0;max-width:620px}.promo-copy .eyebrow{margin-bottom:17px}.promo-copy h1{font-size:clamp(2.65rem,10.5vw,4rem);max-width:100%}.promo-copy .lead{font-size:.91rem;max-width:490px;margin-top:22px;line-height:1.75}.promo-copy .inline{margin-top:25px;gap:16px}.promo-copy .small{font-size:.67rem;margin-top:16px}
 .promo-stage{height:390px;width:calc(100% + 32px);margin:0 -16px 82px;flex-shrink:0}.promo-party{object-position:center bottom}.promo-note{right:0;left:0;bottom:16px;text-align:center;font-size:.7rem;max-width:100%}.promo-note span{font-size:.65rem;line-height:1.6}
 .promo-metrics{padding-block:20px;gap:16px}.promo-metrics>span{flex-wrap:wrap;font-size:.66rem}.promo-metrics>span:last-child{width:100%;gap:4px}.promo-metrics .visually-divider{margin-inline:5px}
 .promo-section{padding-block:60px}.promo-class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.promo-class-card{padding:0 14px 20px}.promo-class-image{height:245px}.promo-class-card h3{font-size:1.4rem;min-height:2.5em}.promo-class-card p{font-size:.74rem}.promo-class-card:last-child{grid-column:1/-1;width:calc(50% - 7px);justify-self:center}.promo-class-card .region-index{font-size:.53rem}.promo-class-caption{font-size:.62rem}
 .promo-landscape{min-height:465px}.promo-landscape>img{object-position:62% center}.promo-landscape::before{background:linear-gradient(90deg,#100d18dd,#100d1860 95%),linear-gradient(0deg,#100d18a8,transparent)}.promo-landscape-copy{padding:30px 25px 80px;width:100%}.promo-landscape-copy h2{font-size:2.5rem;max-width:380px}.promo-landscape-copy p{font-size:.86rem;max-width:400px}.promo-landscape figcaption{text-align:left;left:25px;right:25px;bottom:20px;max-width:none}
 .promo-dragon-section .dragon-feature{gap:0;min-height:0}.promo-dragon-section .dragon-feature>img{height:310px;max-width:100%}.promo-dragon-section .dragon-feature>div{padding-top:20px}.promo-dragon-section .dragon-feature h2{font-size:2.6rem}.promo-dragon-section .caption{font-size:.64rem}
 .promo-panorama-figure>img{aspect-ratio:1.35;object-position:57% center}.promo-panorama-figure{margin-bottom:30px}
 .class-row.promo-class-detail{grid-template-columns:25px 90px minmax(0,1fr);gap:13px}.promo-class-detail .promo-detail-portrait{grid-row:1/3;height:170px}.promo-class-detail>div{align-self:center}.promo-class-detail>p{grid-column:2/-1}.promo-class-detail>.class-skills{grid-column:1/-1}.promo-class-detail .number{font-size:1.3rem}
}
@media(max-width:380px){.promo-stage{height:345px}.promo-copy h1{font-size:2.65rem}.promo-class-image{height:210px}.promo-class-card h3{font-size:1.2rem}.promo-copy .inline>.text-link{font-size:.8rem}.promo-class-card{padding-inline:11px}.promo-dragon-section .dragon-feature>img{height:270px}}
@media(prefers-reduced-motion:reduce){.promo-mist{animation:none;transform:none}.promo-class-card,.promo-class-image img{transition:none}.promo-class-card:hover img{transform:none}}

/* Platform availability is a service status, never a download offer. */
.promo-platforms{display:flex;gap:35px;margin-left:auto;min-width:0}.promo-platforms>div{min-width:0;padding-left:24px;border-left:1px solid var(--line)}.promo-platforms span{display:block;color:var(--paper);font-size:.8rem}.promo-platforms small{display:block;font-size:.64rem;line-height:1.7;margin-top:5px;color:var(--muted)}
@media(max-width:760px){.promo-platforms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:18px;margin-top:5px;margin-left:0;padding-top:18px;border-top:1px solid var(--line)}.promo-platforms>div{padding-left:0;border:0}.promo-platforms span{font-size:.72rem}.promo-platforms small{font-size:.62rem}.promo-environment{mask-image:linear-gradient(180deg,transparent,#000 100px)}}

/* R02: a complete foreground dragon; portrait framing is deliberate, never floating full bodies. */
.promo-stage-layered{isolation:isolate}
.promo-portrait{position:absolute;z-index:1;width:235px;height:242px;overflow:hidden;mask-image:linear-gradient(180deg,#000 0%,#000 57%,#0009 80%,transparent 100%);pointer-events:none}
.promo-portrait img{width:100%;height:auto;max-width:none;filter:brightness(.82) saturate(.88) drop-shadow(0 0 10px #a17ab444);object-position:center top}
.portrait-knight{left:10%;top:20px;transform:rotate(-3deg)}
.portrait-mage{left:50%;top:-8px;transform:translateX(-50%);width:255px}
.portrait-ranger{right:1%;top:38px;width:220px;transform:rotate(2deg)}
.promo-dragon-front{position:absolute;z-index:3;inset:auto 0 0;width:100%;height:85%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 15px 17px #08021088);pointer-events:none}
.promo-stage-layered .promo-mist{z-index:4;height:12%;opacity:.6}
@media(min-width:1600px){.promo-portrait{width:260px;height:265px}.portrait-mage{width:280px}.portrait-ranger{width:240px;top:42px}.portrait-knight{top:27px}}
@media(max-width:1150px) and (min-width:761px){.promo-portrait{width:185px;height:205px}.portrait-mage{width:205px;top:-5px}.portrait-ranger{width:180px;top:20px}.portrait-knight{top:5px;left:8%}}
@media(max-width:760px){.promo-stage-layered{height:380px;margin-top:12px}.promo-portrait{width:155px;height:170px}.portrait-mage{left:62%;top:10px;width:166px}.portrait-knight{left:2%;top:25px;width:150px}.portrait-ranger{display:none}.promo-dragon-front{height:83%;width:100%;object-position:center bottom}.promo-stage-layered .promo-mist{height:10%}}
@media(max-width:380px){.promo-stage-layered{height:340px}.portrait-mage{width:146px;top:4px}.portrait-knight{width:135px;top:18px}}

/* Mobile panorama refinement: preserve the complete painted landscape composition. */
@media(max-width:760px){
 .promo-panorama-figure>img{width:100%;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;object-position:center}
 .promo-landscape{min-height:0}
 .promo-landscape>img{position:relative;inset:auto;width:100%;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;object-position:center;z-index:0}
 .promo-landscape::before{display:none}
 .promo-landscape-copy{padding:28px 24px 76px}
}