/* Course brand: slate foundations, one turquoise accent, amber actions. */
:root[data-theme="dark"]{--page:#202f37;--card:#293d46;--panel:#314a54;--surface:#314a54;--ink:#f3f8fa;--muted:#cad9df;--line:#536c76;--navy:#223a44;--accent:#69ddd1;--accent-dark:#9beade;--cyan:#69ddd1;--pink:#ed659d;--orange:#ffc04f;--amber:#ffc04f;--yellow:#ddc57c;--yellow-ink:#ddc57c;--soft-tint:#2b464e;--shadow:0 8px 24px #0a1a2310;--section-band:#314a54}
:root[data-theme="light"]{--page:#fbfcfc;--card:#fff;--panel:#eaf2f3;--surface:#eaf2f3;--ink:#203942;--muted:#4a626c;--line:#c7d8dc;--navy:#223a44;--accent:#147b75;--accent-dark:#105f5b;--cyan:#147b75;--pink:#af2b66;--orange:#ffc04f;--amber:#ffc04f;--yellow:#ddc57c;--yellow-ink:#80692a;--soft-tint:#e4f0ee;--shadow:0 8px 24px #19343e08;--section-band:#eaf2f3}
body.layout-two{background:var(--page);color:var(--ink)}
.layout-two main{background:none}
.layout-two .site-header,.layout-two .page-tabs{background:var(--page)}
.layout-two .page-tabs a[aria-current="page"]{background:var(--soft-tint);color:var(--accent);border-bottom-color:var(--accent)}
.layout-two .desktop-nav a[aria-current="page"]{color:var(--accent)}
.layout-two ::selection{background:#bce7e2;color:#203942}
.layout-two a:focus-visible,.layout-two button:focus-visible,.layout-two summary:focus-visible{outline-color:var(--accent)}

/* One backdrop treatment across the three page heroes. */
.layout-two .abstract-hero,.layout-two .about-cutout-hero.abstract-hero,.layout-two .income-refresh .work-hero.abstract-hero{
 --ink:#f3f8fa;--muted:#dce8ec;--accent:#69ddd1;--cyan:#69ddd1;
 background-color:#2e4b57;
 background-image:radial-gradient(ellipse at 15% 0,#63bdbb25,transparent 65%),linear-gradient(160deg,#41687980,#213944dd),url('/assets/creator-abstract.png');
 border:0;box-shadow:none;
}
.layout-two .sky-heading h1>span{color:#69ddd1;text-shadow:none}
.layout-two .sky-subtitle,.layout-two #results .work-hero .work-journal-heading>p:last-child{color:#dce8ec}
.layout-two .sky-kicker:before{background:#69ddd1;box-shadow:none}
.layout-two .sky-note{background:#29454ff5;border-color:#68808b;box-shadow:none}
.layout-two .sky-note-label{color:#c7e4e5}
.layout-two .sky-note h2>span{color:#9beade}
.layout-two .sky-name{background:#eaf2f3;color:#203942;border:0}
.layout-two .sky-name span{color:#4a626c}
.layout-two .about-cutout-hero .expert-years{border-color:#69ddd1}

/* A single color signals action; supporting cards stay neutral. */
.layout-two .button.primary,.layout-two .course-card.featured .button.primary{background:var(--orange);border-color:var(--orange);color:#251c14;box-shadow:none}
.layout-two .button.primary:hover,.layout-two .course-card.featured .button.primary:hover{background:#ffd17d;border-color:#ffd17d;color:#251c14}
.layout-two .section-symbol{color:var(--accent)}
.layout-two #overview .followers-heading{color:var(--ink)}
.layout-two #overview .follower-strip>div strong,.layout-two #overview .follower-strip>div:nth-child(n) strong{color:var(--accent)!important;text-shadow:none}
.layout-two .overview-channels .channel-card,.layout-two .home-brief-card{background:var(--card);border:1px solid var(--line);box-shadow:none}
.layout-two .home-brief-card .home-card-top,.layout-two .channel-card .channel-kicker{color:var(--accent)}

/* Section backgrounds reach both viewport edges; reading width stays constrained.
   Clipped spread shadows paint the band without adding horizontal scroll width. */
.layout-two #overview,.layout-two #section-13,.layout-two #about-offer,.layout-two #student-reviews{
 --band-color:var(--section-band);background:var(--band-color);border:0;border-radius:0;box-shadow:0 0 0 100vmax var(--band-color);clip-path:inset(0 -100vmax);overflow:visible;
}
.layout-two #overview{--band-color:var(--page);margin-bottom:0;padding-block:56px}
/* The Home hook uses the same full-width structure as the enrollment steps. */
.layout-two #learning-intro.home-learning-hook{width:100%;max-width:none!important;display:block;margin:0;padding:58px 0;border:0;border-radius:0;background:var(--section-band);box-shadow:none;overflow:visible}
.layout-two #learning-intro.home-learning-hook .learning-about-copy{width:min(1200px,calc(100% - 96px));max-width:1200px;margin-inline:auto;padding:0}
.layout-two #learning-intro .eyebrow{color:var(--accent)}
.layout-two #learning-intro .learning-promises span{background:var(--panel);color:var(--muted)}
.layout-two #how-it-works{background:var(--section-band);border:0;border-radius:0}
.layout-two .paired-biography .story-pair{border-radius:0}
.layout-two .paired-biography .story-pair:nth-child(even){--band-color:var(--section-band);background:var(--band-color);--ink:#203942;--muted:#4a626c;--line:#c7d8dc;border:0;box-shadow:0 0 0 100vmax var(--band-color);clip-path:inset(0 -100vmax)}
[data-theme="dark"] .layout-two .paired-biography .story-pair:nth-child(even){--ink:#f3f8fa;--muted:#cad9df;--line:#536c76}
.layout-two #results .platform-band{border:0;border-radius:0}
.layout-two #results .platform-band.band-shaded{--band-color:#314a54;--ink:#f3f8fa;--muted:#cad9df;--line:#536c76;--accent:#69ddd1;background:var(--band-color);box-shadow:0 0 0 100vmax var(--band-color);clip-path:inset(0 -100vmax)}
.layout-two .journey-quote{background:transparent;border-color:var(--accent)}
.layout-two .journey-quote-mark{color:var(--accent);opacity:.75}
.layout-two #section-13{--band-color:#2e4853;--ink:#f3f8fa;--muted:#dce8ec;padding-block:48px}
.layout-two #section-13 .eyebrow{color:#9beade}
.layout-two #section-13 .quote-mark{color:#ddc57c}
.layout-two #section-13 .creator-reminder{border-color:#718b94}
.layout-two #section-13 .creator-reminder-question{color:#f3f8fa}
.layout-two #section-13 .offer-copy p:not(.eyebrow){color:#dce8ec}
.layout-two .course-page-nav .course-quicklinks a{border-color:var(--line);background:var(--card);color:var(--ink)}
.layout-two .course-page-nav .course-quicklinks a:hover{background:var(--panel);border-color:var(--accent)}

/* Consistent turquoise icons and outcomes, no rainbow card borders. */
.layout-two #curriculum .lesson-card{--lesson-color:var(--accent);border:1px solid var(--line);box-shadow:none;background:var(--card)}
.layout-two .lesson-icon{background:color-mix(in srgb,var(--lesson-color) 12%,transparent)}
.layout-two .audience-grid article{background:var(--card);border:1px solid var(--line)}

/* All package covers share a cool family; Private Online gets a clear mint highlight.
   IDs intentionally outrank the legacy dark-theme cover rules. */
.layout-two #courses .course-card,.layout-two #courses .course-card.featured{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:none}
.layout-two #courses .course-card.featured{border-color:var(--accent)}
.layout-two #courses .course-card .course-cover{--ink:#203942;--muted:#46636b;background:#e1ecee;color:#203942;border:0}
.layout-two #courses .course-card:nth-child(2) .course-cover{background:#bce7e2}
.layout-two #courses .course-card:nth-child(3) .course-cover{background:#d6e5eb}
.layout-two #courses .course-card .course-cover .service-index,.layout-two #courses .course-card .course-cover .cover-meta,.layout-two #courses .course-card .course-cover>p,.layout-two #courses .course-card .course-cover .cover-tag{color:#203942}
.layout-two #courses .course-card .cover-tag{background:#ffffff65;border-color:#20394224}
.layout-two .corporate-note{background:var(--panel);border-color:var(--line)}
.layout-two .community-footer{background:var(--navy);--ink:#f3f8fa;--muted:#cad9df;--line:#536c76;--accent:#69ddd1;color:var(--ink);border-top:1px solid #536c76}
.layout-two .community-footer h3{color:var(--ink)}
@media(max-width:900px){.layout-two #learning-intro.home-learning-hook .learning-about-copy{width:calc(100% - 56px)}}
@media(max-width:600px){.layout-two #learning-intro.home-learning-hook{padding-block:38px}.layout-two #learning-intro.home-learning-hook .learning-about-copy{width:calc(100% - 36px)}.layout-two #overview,.layout-two #section-13{padding-block:36px}}

/* The same amber slash identifies the brand in both navigation and footer. */
.layout-two .site-header .wordmark>span:not(.wordmark-label),
.layout-two .community-footer .wordmark>span:not(.wordmark-label){color:var(--amber);text-shadow:none}
/* Pink belongs to the personal story, rather than alternating random numbers. */
.layout-two .sky-kicker:before{background:#cf387a}
.layout-two .about-cutout-hero .expert-years{border-color:#cf387a}
.layout-two #story .story-editorial-heading .eyebrow{color:var(--pink)}
.layout-two #story .journey-quote{border-color:#cf387a}
.layout-two #story .journey-quote-mark{color:var(--pink)}
.layout-two .home-brief-card:first-child .home-card-top{color:var(--pink)}
.layout-two .course-page-nav .course-quicklinks .course-admin-link{border-color:var(--amber);color:var(--ink)}
.layout-two .course-page-nav .course-quicklinks .course-admin-link:hover{background:var(--amber);color:#203942}

/* About uses actual full-width sections, not extended shadows.
   One background per band prevents legacy theme fills from differing at its edges. */
.layout-two #about.about-cutout-hero{width:100%;max-width:none;margin:0 0 48px;border-radius:0;padding-inline:max(28px,calc((100% - 1200px)/2));box-shadow:none}
.layout-two #story.paired-biography{width:100%;max-width:none;margin-inline:0;padding-inline:0;background:var(--page);overflow:visible}
.layout-two #story .biography-preface{margin-inline:auto}
.layout-two #story .story-pairs{display:block;gap:0}
.layout-two #story .biography-band{width:100%;background:var(--page)}
.layout-two #story .biography-band:nth-child(even){background:var(--section-band)}
.layout-two #story .biography-band .story-pair{
 width:min(1200px,calc(100% - 96px));max-width:1200px;margin-inline:auto;padding:48px 0;
 border:0;border-radius:0;background:transparent;box-shadow:none;clip-path:none;
 --ink:inherit;--muted:inherit;--line:inherit;
}
.layout-two #about-offer{width:100%;max-width:none;margin-inline:0;padding:48px max(28px,calc((100% - 1200px)/2));background:var(--section-band);box-shadow:none;clip-path:none;border:0;border-radius:0}
@media(max-width:900px){.layout-two #story .biography-band .story-pair{width:calc(100% - 56px)}}
@media(max-width:600px){.layout-two #about.about-cutout-hero{padding-inline:18px;margin-bottom:32px}.layout-two #story .biography-band .story-pair{width:calc(100% - 36px);padding-block:32px}.layout-two #about-offer{padding:34px 18px}}

/* Owner-authored text colors take precedence over theme accents. */
html body [data-text-color],html body [data-text-color] :is(span,strong,em,b){color:var(--custom-text-color)!important}
.custom-text-box{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card);white-space:pre-line;margin:24px 0}
.custom-content>p{white-space:pre-line}
html body [data-edit-id][hidden]{display:none!important}
html body.editor-active [data-edit-id][hidden]{display:block!important;opacity:.3}
/* A touch-friendly lesson carousel with the same dot controls as the galleries. */
html body #curriculum .lesson-card-grid{display:flex;--lesson-width:calc((100% - 48px)/2.35);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;align-items:start;padding:8px 2px 20px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;overscroll-behavior-x:contain}
#lesson-rail .lesson-card{scroll-snap-align:start;flex:0 0 var(--lesson-width);min-width:0;height:auto;box-sizing:border-box}
#lesson-rail::after{content:'';flex:0 0 calc(100% - var(--lesson-width) - 24px)}
.lesson-dots{display:flex;justify-content:center;gap:2px;margin:4px 0 16px}.lesson-dots button{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;border-radius:50%;cursor:pointer}.lesson-dots span{width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.35;transition:transform .2s}.lesson-dots [aria-pressed=true] span{background:var(--accent);opacity:1;transform:scale(1.35)}.lesson-dots button:focus-visible{outline:2px solid var(--accent)}
#courses .package-group-title{font-size:13px;font-weight:600;color:var(--accent);margin:0 0 16px}#courses .package-difference{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}#courses .package-shared .benefit-list{font-size:14px}#courses .benefit-list strong{color:var(--ink);font-weight:600}#courses .package-access{font-size:14px;font-weight:600;color:var(--accent);margin:14px 0}#courses .package-corporate{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 20px}.package-corporate a{text-decoration:underline;color:inherit}.dialog-corporate{border-top:1px solid var(--line);padding:20px 0;margin-top:20px;font-size:14px;line-height:1.8}.dialog-corporate .text-link{display:block;margin-top:8px}
@media(max-width:720px){html body #curriculum .lesson-card-grid{--lesson-width:88%;gap:16px}#lesson-rail::after{flex-basis:calc(100% - var(--lesson-width) - 16px)}}

/* All opening surfaces inherit the Home treatment, without per-page overlays. */
:root{--hero-width:min(1180px,calc(100% - 80px));--hero-radius:26px;--hero-top:24px;--hero-backdrop:radial-gradient(ellipse at 15% 0,#63bdbb25,transparent 65%),linear-gradient(160deg,#41687980,#213944dd),url('/assets/creator-abstract.png')}
html body.layout-two #intro.page-hero,
html body.layout-two #about.page-hero,
html body.layout-two #results .work-hero.page-hero,
html body.layout-two #section-13.page-hero{
 width:var(--hero-width);max-width:1180px;margin:var(--hero-top) auto 42px;
 --ink:#f3f8fa;--muted:#dce8ec;--accent:#69ddd1;--cyan:#69ddd1;
 background-color:#2e4b57;background-image:var(--hero-backdrop);background-position:center top;background-size:100% 100%,100% 100%,100% auto;background-repeat:no-repeat;
 border:0;border-radius:var(--hero-radius);box-shadow:none;clip-path:none;overflow:hidden;isolation:isolate;
}
html body.layout-two #intro.page-hero{margin-bottom:0}
html body.layout-two #about.page-hero{padding:42px 36px 0}
html body.layout-two #results{width:100%;max-width:none;padding-top:0;margin:0;display:flow-root}
html body.layout-two #results .results-content{width:var(--hero-width);max-width:1180px;margin-inline:auto}
html body.layout-two #section-13.page-hero{padding:42px 36px}
html body.layout-two #section-13.page-hero .offer-copy{background:transparent}
html body.layout-two #about-offer>.button{display:inline-flex;width:fit-content;max-width:100%;flex:none;align-self:flex-start;justify-content:center;white-space:normal}
/* Keep narration and its chart together, top-aligned with the image evidence. */
.layout-two #results .platform-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.layout-two #results .platform-main,.layout-two #results .platform-evidence{min-width:0}
.layout-two #results .platform-main{display:flex;flex-direction:column;gap:26px}
.layout-two #results .platform-story{align-self:start}
.layout-two #results .platform-main .platform-trend-image{margin:0;width:100%}
.layout-two #results .platform-main .platform-trend-image .image-open{display:block;width:100%;height:auto;min-height:0;max-height:none}
.layout-two #results .platform-evidence{align-self:start}
.layout-two #results .platform-evidence .gallery-stage{min-width:0}
.layout-two #results .platform-evidence .income-proof-gallery{max-width:500px;margin-inline:auto}
.layout-two #results .platform-evidence .gallery-thumbnails{justify-content:flex-start;max-width:100%;overflow-x:auto}
@media(max-width:1100px){:root{--hero-width:calc(100% - 48px)}}
@media(max-width:900px){.layout-two #results .platform-layout{grid-template-columns:minmax(0,1fr);gap:28px}.layout-two #results .platform-main{gap:22px}.layout-two #results .platform-evidence{width:100%;max-width:680px;margin-inline:auto}}
@media(max-width:750px){:root{--hero-width:calc(100% - 32px);--hero-radius:20px;--hero-top:16px}html body.layout-two #about.page-hero{padding:28px 18px 0}html body.layout-two #results .work-hero.page-hero,html body.layout-two #section-13.page-hero{padding:28px 18px}html body.layout-two #about.page-hero,html body.layout-two #results .work-hero.page-hero,html body.layout-two #section-13.page-hero{margin-bottom:30px}}

/* One Thai text family throughout content and controls. */
html body.layout-two{--font:'IBM Plex Sans Thai',sans-serif;--latin:'Manrope','IBM Plex Sans Thai',sans-serif}
html body.layout-two *{font-family:var(--font)!important}
html body.layout-two .wordmark,html body.layout-two .wordmark>span:not(.wordmark-label){font-family:var(--latin)!important}
/* Solid opening bands reach the viewport edge; the content retains its reading width. */
html body.layout-two #intro.page-hero,
html body.layout-two #about.page-hero,
html body.layout-two #results .work-hero.page-hero,
html body.layout-two #course-about.page-hero{
 width:100%;max-width:none;margin:0 0 42px;border:0;border-radius:0;box-shadow:none;clip-path:none;
 background:#2e4b57;background-image:none;
 --ink:#f3f8fa;--muted:#dce8ec;--accent:#69ddd1;--line:#637881;
 color:var(--ink);padding-inline:max(40px,calc((100% - 1180px)/2));
}
html body.layout-two #intro.page-hero{margin-bottom:0;padding-top:48px;padding-bottom:24px}
html body.layout-two #intro .sky-stage{max-width:1180px;margin-inline:auto}
html body.layout-two #about.page-hero{padding-top:42px;padding-bottom:0}
html body.layout-two #results .work-hero.page-hero{padding-block:44px}
html body.layout-two #course-about.page-hero{padding-block:48px}
.course-about-inner{max-width:1050px;margin-inline:auto}
.course-about-inner h1{font-size:clamp(30px,4vw,46px);line-height:1.5;letter-spacing:0}
.course-about-inner>p{font-size:19px;line-height:1.95;color:var(--muted);margin:24px 0 0}
/* Keep icons on the first heading line, allowing long Thai headings to wrap naturally. */
html body.layout-two .heading-icon-row{display:flex;align-items:flex-start;gap:16px;min-width:0;margin-bottom:22px}
html body.layout-two .heading-icon-row :is(h1,h2,h3){margin:0;min-width:0;flex:1}
html body.layout-two .heading-icon-row .section-symbol{flex:0 0 42px;margin:4px 0 0;display:grid}
html body.layout-two .lesson-title-row .lesson-icon{flex:0 0 42px;width:42px;height:42px;border-radius:12px;margin-top:3px}
html body.layout-two .lesson-title-row .lesson-icon svg{width:25px;height:25px}
html body.layout-two .lesson-card-top{justify-content:flex-end;margin-bottom:14px}
html body.layout-two .lesson-title-row{gap:12px;margin-bottom:18px}
html body.layout-two .lesson-title-row h3{font-size:22px;line-height:1.65}
html body.layout-two #results .platform-heading{align-items:flex-start}
html body.layout-two #results .platform-heading>img{margin-top:4px}
html body.layout-two #results .platform-band>.eyebrow{margin-bottom:12px}
/* Larger, consistent copy below section and card titles. */
html body.layout-two :is(.section-heading>p,.section-lead,.lesson-intro p,.audience-grid article>p,.course-description,.platform-story p,.platform-trend-copy p,.story-point-copy p,.income-story-copy p,.about-cover-copy>p,.home-brief-card>p,.learning-about-copy>p,.home-start-reminder>p,.review-intro>p){font-size:18px;line-height:1.9}
html body.layout-two .section-heading{align-items:flex-start}
html body.layout-two .section-heading>p{max-width:500px}
html body.layout-two #courses .package-included{font-size:18px;line-height:1.8;font-weight:600;color:var(--accent);padding:18px 0;border-block:1px solid var(--line);margin:0 0 22px}
html body.layout-two #courses .package-shared .benefit-list{font-size:16px}
.home-start-reminder{border-top:1px solid var(--line);padding-top:32px;margin-top:36px;max-width:900px}
.home-start-reminder h3{font-size:clamp(24px,3vw,32px);line-height:1.6;letter-spacing:0}
.home-start-reminder .creator-reminder{margin:26px 0;padding:8px 0 8px 24px;border-left:3px solid var(--pink);position:relative}
.home-start-reminder .quote-mark{display:none}
.home-start-reminder .creator-reminder-question{font-size:clamp(22px,3vw,30px);line-height:1.65;color:var(--ink);margin:0}
.home-start-reminder .closing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.home-start-reminder .closing-actions .button{width:fit-content;max-width:100%;flex:none}
.layout-two .course-page-nav .course-admin-link{gap:9px}
.layout-two .course-page-nav .course-admin-link .line-oa-icon{width:24px;height:24px;flex:none;object-fit:contain}
/* Checkout focuses on payment and access, with no repeated course benefit list. */
#course-dialog .checkout-steps{margin:28px 0;padding-top:24px;border-top:1px solid var(--line)}
#course-dialog .checkout-steps h2{font-size:25px;line-height:1.6;margin:0 0 24px}
#course-dialog .steps{display:grid;gap:20px}
#course-dialog .steps li{gap:16px;border-bottom:1px solid var(--line);padding-bottom:20px}
#course-dialog .steps li:last-child{border:0;padding-bottom:0}
#course-dialog .steps h3{font-size:18px;color:var(--ink);line-height:1.6;margin:0 0 8px}
#course-dialog .steps p{font-size:16px;color:var(--muted);line-height:1.85;margin:0}
#course-dialog .step-number{font-size:20px;color:var(--accent);flex:0 0 30px;padding-top:0}
#course-dialog .dialog-private{font-size:16px;line-height:1.85}
@media(max-width:750px){
 html body.layout-two #intro.page-hero,html body.layout-two #about.page-hero,html body.layout-two #results .work-hero.page-hero,html body.layout-two #course-about.page-hero{padding-inline:18px;margin-top:0;border-radius:0}
 html body.layout-two #intro.page-hero{padding-top:32px}html body.layout-two #course-about.page-hero{padding-block:32px}
 html body.layout-two .course-about-inner>p{font-size:17px}
 html body.layout-two :is(.section-heading>p,.section-lead,.lesson-intro p,.audience-grid article>p,.course-description,.platform-story p,.platform-trend-copy p,.story-point-copy p,.income-story-copy p,.about-cover-copy>p,.home-brief-card>p,.learning-about-copy>p,.home-start-reminder>p,.review-intro>p){font-size:17px}
 html body.layout-two .heading-icon-row{gap:12px}.home-start-reminder .closing-actions{align-items:flex-start;flex-direction:column}
}

/* Course selection: amber names, compact review action, and focused lesson dialogs. */
html body.layout-two #curriculum .curriculum-note .button{display:inline-flex;width:fit-content;max-width:100%;flex:none;justify-self:start;align-self:flex-start;white-space:normal;text-align:left}
html body.layout-two #courses .course-body>h3,
html body.layout-two #courses .package-included,
html body.layout-two #course-dialog #dialog-title{color:var(--orange)}
:root[data-theme="light"] body.layout-two #courses .course-body>h3,
:root[data-theme="light"] body.layout-two #courses .package-included,
:root[data-theme="light"] body.layout-two #course-dialog #dialog-title{color:#996000}
.lesson-detail-button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 0 0;margin-top:auto;border:0;border-top:1px solid var(--line);background:transparent;color:var(--accent);font-size:16px;font-weight:600;text-align:left}
.lesson-detail-button:hover{color:var(--ink)}
html body.layout-two .lesson-dialog{width:min(760px,calc(100% - 32px));max-width:none;max-height:90dvh;padding:0;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.lesson-dialog::backdrop{background:#09171dd9;backdrop-filter:blur(5px)}
.lesson-modal-content{position:relative;padding:36px}
.lesson-dialog-close{position:absolute;right:14px;top:12px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);font-size:28px;line-height:1}
.lesson-modal-content>.eyebrow{padding-right:50px;color:var(--accent)}
.lesson-modal-content>h2{font-size:clamp(24px,3vw,32px);line-height:1.6;margin-bottom:18px;padding-right:20px}
.lesson-modal-intro{font-size:18px;line-height:1.9;color:var(--muted)}
.lesson-modal-topics>ol{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:28px;counter-reset:lesson}
.lesson-topic{counter-increment:lesson;border-top:1px solid var(--line);padding-top:24px}
.lesson-topic>h3{font-size:20px;line-height:1.65;margin:0 0 12px;color:var(--ink)}
.lesson-topic>h3::before{content:counter(lesson,decimal-leading-zero) ' / ';color:var(--accent);font-size:16px}
.lesson-topic>p,.lesson-topic-outcome>p{font-size:17px;line-height:1.9;margin:0;color:var(--muted)}
.lesson-topic-outcome{border-left:3px solid var(--pink);padding:4px 0 4px 18px;margin-top:18px}
.lesson-topic-outcome>h4{font-size:16px;color:var(--accent);margin:0 0 6px}
.lesson-dialog .module-note{margin:28px 0 0;font-size:15px;color:var(--muted)}
#course-dialog .dialog-payment-message{font-size:18px;font-weight:600;line-height:1.85;color:var(--ink);margin:24px 0 18px;padding:18px 0;border-top:1px solid var(--line)}
#course-dialog .dialog-payment-message a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.lesson-modal-content{padding:28px 20px}.lesson-dialog-close{right:10px;top:10px}.lesson-modal-intro,.lesson-topic>p,.lesson-topic-outcome>p{font-size:16px}.lesson-topic>h3{font-size:19px}#course-dialog .dialog-payment-message{font-size:17px}}

/* A single Home heading and one learning outcome summary per course category. */
html body.layout-two .home-start-reminder.single-heading-reminder{border:0;padding-top:0;margin-top:24px}
.lesson-module-outcome{border-left:3px solid var(--pink);padding:6px 0 6px 20px;margin:24px 0 30px}
.lesson-module-outcome>h3{font-size:18px;line-height:1.6;color:var(--accent);margin:0 0 8px}
.lesson-module-outcome>p{font-size:17px;line-height:1.9;color:var(--ink);margin:0}

/* Edge-to-edge enrollment steps within every package dialog. */
html body.layout-two #course-dialog{--checkout-padding:35px;overflow-x:hidden}
html body.layout-two #course-dialog .dialog-content{padding:var(--checkout-padding)}
html body.layout-two #course-dialog #how-it-works.checkout-steps{
 box-sizing:border-box;width:calc(100% + 2 * var(--checkout-padding));max-width:none;
 margin:28px calc(-1 * var(--checkout-padding));padding:28px var(--checkout-padding);
 background:var(--section-band);border:0;border-radius:0;
}
html body.layout-two #courses .package-schedule-first{color:var(--orange);font-weight:600}
:root[data-theme="light"] body.layout-two #courses .package-schedule-first{color:#996000}
html body.layout-two #about [data-edit-id="about-expert-title"] .about-name-highlight{display:inline;color:var(--accent)!important}
html body.layout-two #course-about.page-hero{margin-bottom:0}
html body.layout-two #learn.course-page-nav{padding-top:28px;padding-bottom:8px}
@media(max-width:600px){html body.layout-two #course-dialog{--checkout-padding:23px}}

/* Course navigation sits inside the introductory band. */
html body.layout-two #course-about #learn.course-page-nav{width:100%;max-width:none;margin:30px 0 0;padding:0;background:transparent}
html body.layout-two #course-about .course-quicklinks a{background:transparent;border-color:#789099;color:var(--ink)}
html body.layout-two #course-about .course-quicklinks a:hover{background:#3c606e;border-color:var(--accent)}
html body.layout-two #course-about .course-quicklinks .course-admin-link{border-color:var(--amber)}
html body.layout-two #course-about .course-quicklinks .course-admin-link:hover{background:var(--amber);border-color:var(--amber);color:#203942}

/* Keep the Results course link sized to its label on desktop and mobile. */
html body.layout-two [data-edit-id="work-offer-cta"].button{display:inline-flex;width:fit-content;max-width:100%;flex:none;align-self:flex-start;justify-self:start;justify-content:center;white-space:normal}

/* Give the curriculum breathing room below the introductory band. */
html body.layout-two #curriculum.curriculum-section{padding-top:64px}
/* Small pink accents in two section icons and the active lesson indicator. */
html body.layout-two #curriculum .curriculum-top .section-symbol,
html body.layout-two #student-reviews .review-intro .section-symbol{color:var(--pink);border-color:color-mix(in srgb,var(--pink) 45%,var(--line))}
html body.layout-two #curriculum .lesson-dots [aria-pressed=true] span{background:var(--pink)}
@media(max-width:750px){html body.layout-two #curriculum.curriculum-section{padding-top:44px}}

/* Separate checkout content with space rather than repeated rules. */
html body.layout-two #course-dialog .dialog-price,
html body.layout-two #course-dialog .checkout-steps,
html body.layout-two #course-dialog .steps,
html body.layout-two #course-dialog .steps li,
html body.layout-two #course-dialog .steps li:last-child,
html body.layout-two #course-dialog .dialog-payment-message{border:0;box-shadow:none}
html body.layout-two #course-dialog .steps{gap:30px}
html body.layout-two #course-dialog .steps li,
html body.layout-two #course-dialog .steps li:last-child{padding-block:0}
html body.layout-two #course-dialog .dialog-price{padding-bottom:0}
html body.layout-two #course-dialog .dialog-payment-message{padding-top:0}

/* Keep only the two dividers between enrollment steps. */
html body.layout-two #course-dialog .steps li:not(:first-child){border-top:1px solid var(--line);padding-top:24px}
html body.layout-two #course-dialog .steps{gap:24px}

/* The course overview reads directly below its heading. */
html body.layout-two #curriculum .curriculum-top{display:block}
html body.layout-two #curriculum .curriculum-overview{max-width:1000px;margin:24px 0 0}
html body.layout-two #curriculum .curriculum-overview>p{font-size:20px;font-weight:500;line-height:1.8;color:var(--ink);margin:0 0 16px}
html body.layout-two #curriculum .curriculum-overview ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
html body.layout-two #curriculum .curriculum-overview li{font-size:18px;line-height:1.85;color:var(--muted);padding-left:1.8em;text-indent:-1.8em}
@media(max-width:750px){html body.layout-two #curriculum .curriculum-overview>p{font-size:18px}html body.layout-two #curriculum .curriculum-overview li{font-size:17px}}

/* Five audience groups: three cards, then two, with a single column on phones. */


/* Curriculum groups follow the updated course structure. */
html body.layout-two .lesson-modal-topics .lesson-subgroup-heading{color:var(--accent);font-size:22px;margin:30px 0 14px}
html body.layout-two .lesson-modal-topics .lesson-subgroup-heading:first-child{margin-top:0}
/* Course preview follows the student reviews: copy left, gallery right. */
html body.layout-two #curriculum .skool-showcase{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:25px 50px;align-items:start;margin-bottom:40px}
html body.layout-two #curriculum .skool-showcase .curriculum-top{min-width:0;margin-bottom:0}
html body.layout-two #curriculum .skool-preview-gallery{width:100%;max-width:none;min-width:0;margin:0}
html body.layout-two #curriculum .skool-preview-gallery .gallery-stage img{width:100%;height:100%;object-fit:contain}
html body.layout-two #curriculum .skool-preview-gallery button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(max-width:1000px){html body.layout-two #curriculum .skool-showcase{gap:25px 30px}}
@media(max-width:800px){html body.layout-two #curriculum .skool-showcase{grid-template-columns:minmax(0,1fr);gap:24px}}

/* Audience cards slide using the same controls and spacing as lesson cards. */
html body.layout-two #for-you .audience-grid{display:flex;--audience-width:calc((100% - 48px)/2.35);--audience-gap:24px;gap:var(--audience-gap);overflow-x:auto;scroll-snap-type:x mandatory;align-items:stretch;padding:8px 2px 20px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;overscroll-behavior-x:contain;min-width:0;max-width:100%}
html body.layout-two #for-you .audience-grid article{flex:0 0 var(--audience-width);min-width:0;height:auto;box-sizing:border-box;scroll-snap-align:start}
html body.layout-two #for-you .audience-grid::after{content:'';flex:0 0 calc(100% - var(--audience-width) - var(--audience-gap))}
html body.layout-two #for-you .audience-grid:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
@media(max-width:720px){html body.layout-two #for-you .audience-grid{--audience-width:88%;--audience-gap:16px}}

/* Package artwork: retain the full supplied image at every screen size. */
.layout-two #courses .course-card .course-cover{display:block;min-height:0;padding:0}
.layout-two #courses .course-card .package-cover-image{display:block;width:100%;height:auto;aspect-ratio:1460/752;object-fit:contain;margin:0;border:0;border-radius:0}
.layout-two #courses .course-card .course-cover>p{margin:20px 24px 12px}
.layout-two #courses .course-card .course-cover>.cover-tag{display:inline-block;margin:0 24px 24px}

/* Lesson artwork stays uncropped; outcomes live in the detail dialogs. */
html body #curriculum .lesson-card-grid{align-items:stretch}
html body #lesson-rail .lesson-card{padding:24px;display:flex;flex-direction:column}
#lesson-rail .lesson-cover-image{display:block;width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:1460/752;object-fit:contain;margin:-24px -24px 20px;flex-shrink:0}
#lesson-rail .lesson-detail-button{margin-top:auto;align-self:flex-start}

/* Show and number only the steps belonging to the selected package. */
html body.layout-two #course-dialog .steps li[hidden]{display:none!important}
html body.layout-two #course-dialog .steps li.first-visible-step{border-top:0;padding-top:0}