/* Final local layout: compact parchment, original hero, live typography and cards. */
/* The mask's nearly-white final pixels left a faint hard seam. Fade the base alpha fully to zero. */
.ember .hero-art,.ember .hero:before{mask-image:linear-gradient(to bottom,#fff calc(100% - 40px),transparent calc(100% - 20px)),url("/assets/redesign/assets/pigment-fade-v3.webp");mask-composite:subtract;mask-mode:alpha,luminance}
.ember .class-panel{display:grid;grid-template-columns:205px minmax(0,1fr);gap:24px;padding:31px 45px 34px 87px}
.ember .class-intro{text-align:left;margin:0;padding-right:18px;border-right:1px solid #8d71443b}
.ember .class-intro h2{font-size:30px;line-height:1.13;margin:0 0 12px}
.ember .class-intro>p:last-child{font-size:13px;line-height:1.55;margin:0;max-width:180px}
.ember .class-options{gap:5px 6px}
.ember .class-options button{font-size:15px;min-height:58px;padding:8px 3px;gap:5px}
.ember .class-options button>span{font-size:17px}
body.ember.live-example .hero h1{font-family:Cinzel,Georgia,serif;font-size:clamp(62px,7vw,102px)}
body.ember.live-example .hero .hero-subtitle{font-family:Cormorant,Georgia,serif}
.ember.live-example .class-intro h2{font-size:30px}
body.ember.live-example [data-treasure-card]{min-width:0}
body.ember.live-example [data-treasure-card] h3{font-size:clamp(20px,1.9vw,23px)}
body.ember.live-example [data-treasure-card] .card-link{white-space:nowrap}
.ember .class-banner .feature>div{min-width:0}
.ember .class-banner .feature h3{overflow-wrap:break-word}
@media(min-width:601px) and (max-width:1000px){
 .ember .class-panel{grid-template-columns:1fr;gap:17px;padding:27px 42px 31px 65px}
 .ember .class-intro{display:flex;align-items:center;justify-content:space-between;gap:22px;border-right:0;padding:0 0 13px;border-bottom:1px solid #8d71443b}
 .ember .class-intro h2{margin:0;font-size:28px}
 .ember .class-intro>p:last-child{max-width:235px;font-size:13px}
 .ember .class-options button{font-size:14px;min-height:55px}
 .ember .class-banner .feature{max-width:490px}
}
@media(min-width:601px) and (max-width:740px){.ember .class-options{grid-template-columns:repeat(4,minmax(0,1fr))}.ember .class-intro h2{font-size:26px}}
@media(max-width:600px){
 .ember .hero{height:auto;min-height:0;padding-bottom:104px}
 .ember .hero-copy{padding-bottom:0}
 body.ember.live-example .hero h1{font-size:58px}
 .ember .hero-actions{flex-wrap:wrap;row-gap:13px}
 .ember .class-panel{display:block;padding:43px 25px 45px;gap:0}
 .ember .class-intro{display:block;text-align:center;border:0;padding:0;margin:0 0 8px}
 .ember .class-intro h2,.ember.live-example .class-intro h2{font-size:29px;margin:0 0 10px}
 .ember .class-intro>p:last-child{font-size:13px;max-width:none;margin:0 auto;padding-bottom:13px}
 .ember .class-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
 .ember .class-options button{font-size:16px;min-height:44px;padding:9px 3px;gap:8px}
 .ember .class-banner .feature h3{font-size:22px;line-height:1.18}
 .ember.live-example .banner-story h2{font-size:37px}
 .ember .class-banner .feature .price{flex-wrap:wrap;font-size:18px}
 .ember .section-heading{gap:14px;align-items:flex-start}
 body.ember.live-example [data-treasure-card] h3{font-size:23px}
 .ember .design-dock{max-width:calc(100% - 16px)}
}
@media(max-width:360px){
 .ember .hero h1,body.ember.live-example .hero h1{font-size:51px}
 .ember .hero-actions{gap:14px}
 .ember .hero-actions .button{padding:13px 16px}
 .ember .class-panel{padding-left:20px;padding-right:20px}
 .ember .class-options button{font-size:14px}
 .ember .class-banner .feature{grid-template-columns:43% minmax(0,1fr);gap:10px}
 .ember .class-banner .feature h3{font-size:20px}
 .ember .banner-story{padding-left:20px;padding-right:20px}
}