/* Public Homepage Studio premium layer — published data only.
   Scoped to production .studio-mode; independent preview/demo stays unchanged. */
.studio-mode {
 --premium-line: rgba(22,52,82,.11);
 --premium-shadow: 0 24px 70px rgba(13,36,65,.095);
 --premium-soft: color-mix(in srgb, var(--blue) 6%, white);
 color:var(--ink);
 background:var(--wash);
}
.studio-mode>.studio-hero {
 isolation:isolate;
 background:
   radial-gradient(ellipse at 77% 26%, color-mix(in srgb, var(--blue) 35%, transparent), transparent 55%),
   linear-gradient(118deg,color-mix(in srgb,var(--blue) 18%,#061b34) 2%,color-mix(in srgb,var(--blue) 22%,#0b2a4a) 55%,color-mix(in srgb,var(--teal) 12%,#153d61) 100%);
}
.studio-mode>.studio-hero:before {
 background-size:56px 56px;
 opacity:.7;
 mask-image:linear-gradient(to right,transparent 3%,black 90%);
}
.studio-mode .studio-hero-inner {
 min-height:625px;
 grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
 gap:clamp(38px,5vw,90px);
 padding-block:clamp(80px,8vw,114px);
}
.studio-mode .studio-hero-copy{min-width:0;position:relative;z-index:2}
.studio-mode .studio-hero .eyebrow {
 display:inline-flex;
 color:#b5f0df;
 font-size:11px;
 letter-spacing:.16em;
}
.studio-mode .studio-hero .h2 {
 font-size:clamp(43px,5.1vw,74px);
 letter-spacing:-.065em;
 line-height:1.115;
 text-wrap:balance;
 margin:25px 0 23px;
}
.studio-mode .studio-hero .section-copy{
 font-size:clamp(15px,1.25vw,17px);
 line-height:1.85;
 max-width:585px;
 color:#d1e2f3;
 text-wrap:pretty;
}
.studio-mode .studio-hero .published-cta{margin-top:32px;gap:12px}
.studio-mode .studio-hero .published-cta .button{min-height:54px;font-size:13px;padding:15px 25px}
.studio-mode .studio-hero .published-cta .button.primary {
 background:#fff;
 color:#103052;
 box-shadow:0 14px 35px rgba(0,8,24,.25);
}
.studio-mode .studio-hero .published-cta .button.primary:hover{background:#e9f8f7}
.studio-mode .studio-hero .published-cta .button.glass{background:rgba(255,255,255,.085);border-color:rgba(226,244,255,.35);color:#fff}
.studio-mode .studio-hero .published-cta .button.glass:hover{background:rgba(255,255,255,.15)}
.studio-mode .studio-hero-art{min-width:0;min-height:430px;position:relative}
.studio-mode .studio-hero-art:before{
 width:min(85%,445px);height:auto;aspect-ratio:1;
 border:1px solid rgba(200,231,255,.18);
 box-shadow:0 0 0 50px rgba(212,238,255,.035),0 0 0 98px rgba(212,238,255,.025);
}
.premium-learning-art{
 position:relative;
 z-index:2;
 width:min(100%,490px);
 padding:25px;
 border-radius:26px;
 border:1px solid rgba(229,241,254,.87);
 background:#fff;
 color:#16324e;
 box-shadow:0 32px 85px rgba(0,9,26,.4);
 overflow:hidden;
}
.premium-learning-art:before{
 content:"";
 position:absolute;top:-95px;right:-85px;width:265px;height:265px;
 border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--teal) 13%,white),transparent 68%);
 pointer-events:none;
}
.premium-art-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.premium-art-mark{display:inline-flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:14px;background:#11395c;color:#fff;font-size:13px;font-weight:900;letter-spacing:.02em}
.premium-art-tag{color:#3e6a8a;font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.premium-art-heading{font-weight:850;font-size:clamp(20px,2vw,29px);line-height:1.25;letter-spacing:-.045em;margin:0 0 8px}
.premium-art-desc{margin:0 0 24px;color:#668096;font-size:12px;line-height:1.8}
.premium-path{position:relative;display:grid;gap:10px}
.premium-path-step{position:relative;display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid #e1eaf3;border-radius:14px;background:#f8fbfe}
.premium-path-step:nth-child(2){border-color:#c6e6e0;background:#ecf9f6}
.premium-step-number{flex:none;display:grid;place-items:center;width:36px;height:36px;background:#e7effa;border-radius:11px;color:#1a4c75;font-size:12px;font-weight:900}
.premium-path-step:nth-child(2) .premium-step-number{background:#caeee3;color:#126b61}
.premium-step-info{display:grid;gap:4px;min-width:0}
.premium-step-info strong{font-size:12px;font-weight:850;line-height:1.4;color:#1a3854}
.premium-step-info small{font-size:10px;line-height:1.5;color:#607a91}
.premium-art-note{margin:19px 0 0;padding-top:14px;border-top:1px solid #edf2f7;color:#778ba0;font-size:10px;line-height:1.5}
.studio-mode .studio-section{
 position:relative;
 padding-block:var(--studio-padding,88px);
 background:var(--paper);
}
.studio-mode .studio-section:nth-child(2n+1):not(.bg-accent):not(.bg-contrast):not(.bg-muted){background:color-mix(in srgb,var(--wash) 78%,white)}
.studio-mode .studio-section .eyebrow{letter-spacing:.14em}
.studio-mode .studio-section .h2{font-size:clamp(30px,3.55vw,51px);line-height:1.19;max-width:850px;letter-spacing:-.055em;text-wrap:balance}
.studio-mode .studio-section .section-copy{font-size:clamp(14px,1.15vw,16px);line-height:1.9;max-width:770px;text-wrap:pretty}
.studio-mode .studio-grid{gap:clamp(16px,2.2vw,28px);margin-top:38px}
.studio-mode .studio-card{
 min-width:0;
 padding:clamp(22px,2.45vw,34px);
 background:var(--paper);
 border:1px solid var(--premium-line);
 border-radius:var(--edge);
 box-shadow:0 11px 34px rgba(8,39,73,.055);
 overflow-wrap:anywhere;
}
.studio-mode .studio-card h3{font-size:clamp(17px,1.5vw,22px);line-height:1.35;letter-spacing:-.035em;margin:0 0 12px}
.studio-mode .studio-card p{font-size:13px;line-height:1.85;color:var(--muted)}
.studio-mode .studio-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:13px;margin-bottom:19px}
.studio-mode .studio-card .text-link{font-size:12px}
.studio-mode .course-grid{gap:clamp(16px,2.1vw,28px);margin-top:37px}
.studio-mode .course-card{
 min-width:0;
 overflow:hidden;
 border:1px solid var(--premium-line);
 border-radius:var(--edge);
 box-shadow:0 12px 36px rgba(8,39,73,.075);
 transition:transform .22s ease,box-shadow .22s ease;
}
.studio-mode .course-card:hover{transform:translateY(-4px);box-shadow:var(--premium-shadow)}
.studio-mode .course-cover{height:195px}
.studio-mode .course-info{padding:23px;min-height:207px}
.studio-mode .course-info h3{font-size:19px;line-height:1.35;letter-spacing:-.04em}
.studio-mode .course-info p{font-size:12px;line-height:1.8}
.studio-mode .course-action{margin-top:auto;min-height:35px}
.studio-mode .published-course-empty{margin-top:32px;padding:26px 29px;background:var(--premium-soft);border-color:color-mix(in srgb,var(--blue) 20%,#dae6ef);line-height:1.8}
.studio-mode .studio-section[data-kind="CALL_TO_ACTION"],
.studio-mode .studio-section[data-kind="PROMO_BANNER"] {
 background:linear-gradient(125deg,color-mix(in srgb,var(--blue) 8%,white),color-mix(in srgb,var(--teal) 7%,white));
}
.studio-mode .studio-section[data-kind="CALL_TO_ACTION"] .shell,
.studio-mode .studio-section[data-kind="PROMO_BANNER"] .shell{padding:20px 0}
.studio-mode .studio-section[data-kind="FAQ"] .shell{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(24px,5vw,85px)}
.studio-mode .studio-faq details{padding:20px 0}
.studio-mode .studio-faq summary{font-size:15px}
.studio-mode .studio-section-img{max-width:100%;border-radius:var(--edge);margin-top:25px}
.studio-mode .published-cta .button{min-height:48px;font-size:13px}
.studio-mode .studio-section.bg-contrast .studio-card{color:#16324e}
.studio-mode .studio-section.bg-contrast .studio-card p{color:#4a657c}
.studio-mode .studio-section.bg-contrast .studio-card .text-link{color:#195bc5}
/* Keep hash links keyboard-discoverable when the sticky header is present. */
.studio-mode [id]{scroll-margin-top:100px}
@media(max-width:1100px){
 .studio-mode .studio-hero-inner{grid-template-columns:1fr 1fr;gap:35px;min-height:550px}
 .studio-mode .studio-hero .h2{font-size:clamp(40px,5vw,60px)}
}
@media(max-width:960px){
 .studio-mode .studio-hero-inner{grid-template-columns:1fr;gap:50px;text-align:center;padding-block:75px}
 .studio-mode .studio-hero-copy .section-copy{margin-inline:auto}
 .studio-mode .studio-hero .published-cta{justify-content:center}
 .studio-mode .studio-hero-art{min-height:auto}
 .studio-mode .studio-hero .h2{max-width:760px;margin-inline:auto}
 .studio-mode .studio-section[data-kind="FAQ"] .shell{grid-template-columns:1fr}
 .studio-mode .studio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
 .studio-mode .studio-hero-inner{padding-block:68px 80px;gap:36px}
 .studio-mode .studio-hero .h2{font-size:clamp(36px,9vw,49px);line-height:1.17}
 .studio-mode .studio-hero .section-copy{font-size:14px;line-height:1.8}
 .studio-mode .studio-hero .published-cta{flex-direction:column;align-items:stretch}
 .studio-mode .studio-hero .published-cta a{width:100%;white-space:normal}
 .studio-mode .studio-hero-art:before{width:75%}
 .premium-learning-art{padding:19px;border-radius:20px;box-shadow:0 20px 48px #0616296b}
 .premium-art-heading{font-size:22px}
 .premium-art-desc{font-size:11px}
 .premium-path-step{padding:12px}
 .studio-mode .studio-section{padding-block:clamp(48px,calc(var(--studio-padding,88px) * .72),80px)}
 .studio-mode .studio-grid{grid-template-columns:1fr}
 .studio-mode .studio-card{padding:23px}
 .studio-mode .studio-section .h2{font-size:clamp(28px,8vw,37px)}
 .studio-mode .course-grid{grid-template-columns:1fr}
 .studio-mode .course-info{min-height:0}
 .studio-mode .studio-section[data-kind="FAQ"] .shell{display:block}
 .studio-mode .studio-section[data-kind="FAQ"] .studio-faq{margin-top:25px}
}
@media(prefers-reduced-motion:reduce){
 .studio-mode .course-card,.studio-mode .studio-card{transition:none}
 .studio-mode .course-card:hover,.studio-mode .studio-card:hover{transform:none}
}

/* Upgrade the public shell only when the published Homepage Studio is visible. */
body:has(.studio-mode:not([hidden])) .header{
 background:rgba(255,255,255,.985);
 border-bottom-color:#e4ecf5;
 box-shadow:0 7px 26px rgba(7,32,59,.045);
}
body:has(.studio-mode:not([hidden])) .nav a:hover,
body:has(.studio-mode:not([hidden])) .nav a:focus-visible{
 color:var(--blue);
 text-decoration:underline;
 text-underline-offset:7px;
}
body:has(.studio-mode:not([hidden])) .brand-name{letter-spacing:-.047em}
body:has(.studio-mode:not([hidden])) .head-actions>.button{
 border-radius:12px;
 padding-inline:20px;
}
body:has(.studio-mode:not([hidden])) .footer{
 padding-top:clamp(62px,6vw,91px);
 background:linear-gradient(128deg,#061c34,#0b2b49);
}
body:has(.studio-mode:not([hidden])) .footer-grid{
 gap:clamp(25px,3.4vw,55px);
}
body:has(.studio-mode:not([hidden])) .footer-intro{
 font-size:12px;
 line-height:1.9;
}
body:has(.studio-mode:not([hidden])) .footer-links a{
 display:inline-block;
 min-height:22px;
 line-height:1.7;
}
body:has(.studio-mode:not([hidden])) .footer-links a:hover{
 text-decoration:underline;
 text-underline-offset:4px;
}
@media(max-width:960px){
 body:has(.studio-mode:not([hidden])) .footer-grid{gap:30px}
}
@media(max-width:640px){
 body:has(.studio-mode:not([hidden])) .header{box-shadow:0 4px 18px rgba(7,32,59,.04)}
 body:has(.studio-mode:not([hidden])) .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:has(.studio-mode:not([hidden])) .footer-grid>div:first-child{grid-column:1/-1}
 body:has(.studio-mode:not([hidden])) .footer-grid>div:last-child{grid-column:auto}
}