html { scroll-behavior:auto; }
/* Desktop art direction v21. Shared content stays responsive. */
.brand { display:block; flex-shrink:0; }
.brand img { display:block; width:330px; height:auto; max-width:none; }
.hero-photo picture { display:block; width:100%; height:100%; }
.hero-photo picture img { width:100%; height:100%; object-fit:cover; object-position:67% 50%; }

/* One gloss pass on deliberate interaction; the underlying gel colour stays visible. */
.button { position:relative; isolation:isolate; overflow:hidden; box-shadow:inset 0 1px 0 #ffffff66; transition:transform .22s,box-shadow .24s,filter .24s; }
.button::after { content:''; position:absolute; z-index:-1; top:-80%; bottom:-80%; left:-80%; width:48%; background:linear-gradient(90deg,transparent,#ffffff88 48%,#ffffffbb 51%,transparent); transform:skewX(-22deg) translateX(-100%); pointer-events:none; opacity:0; }
.button:not(:disabled):is(:hover,:focus-visible)::after { opacity:1; animation:button-gloss .68s cubic-bezier(.2,.6,.2,1) both; }
.button:not(:disabled):is(:hover,:focus-visible) { filter:brightness(1.05); box-shadow:inset 0 1px 0 #ffffffaa,0 8px 28px #61e3f21c; }
.button.button-cyan,.button.button-cyan:hover,.course-card:first-child .button.outline,.course-card:first-child .button.outline:hover { background:var(--cyan); color:var(--canvas); border-color:transparent; }
.button.button-magenta,.button.button-magenta:hover,.course-card:nth-child(2) .button.outline,.course-card:nth-child(2) .button.outline:hover { background:var(--magenta); color:var(--canvas); border-color:transparent; }
.button.button-white,.button.button-white:hover { background:var(--white); color:var(--canvas); }
.hero-actions .button,.hero-actions .button:hover,.final-section .button,.final-section .button:hover,.bundle-full .button,.bundle-full .button:hover { background:linear-gradient(110deg,var(--cyan),#b9c7e7 50%,var(--magenta)); color:var(--canvas); }
.button:disabled { cursor:default; opacity:1; background:#ffffff0a; border-color:#ffffff36; color:var(--copy); box-shadow:none; }
.button:disabled::after { display:none; }
@keyframes button-gloss { from{left:-80%;transform:skewX(-22deg) translateX(0)} to{left:150%;transform:skewX(-22deg) translateX(0)} }

/* Six photographic examples. No pinning or slider; labels describe the real material. */
.showcase { padding:100px 0 80px; background:var(--canvas); }
.showcase-inner { display:flex; flex-direction:column; gap:48px; }
.showcase-copy { max-width:650px; }
.showcase-copy h2 { font-size:clamp(48px,5.3vw,86px); margin-bottom:24px; }
.showcase-copy h2 span { display:block; }
.showcase-copy p { max-width:470px; font-size:16px; line-height:1.75; }
.showcase-copy .button { margin-top:28px; min-width:220px; font-size:14px; }
.align-right .showcase-copy { align-self:flex-end; width:57%; }
.align-center .showcase-copy { align-self:center; text-align:center; max-width:760px; }
.align-center .showcase-copy p { margin-inline:auto; }
.showcase-media { width:100%; margin:0; min-width:0; }
.showcase-media .comparison { position:relative; width:100%; height:auto; min-height:0; max-height:none; margin-inline:auto; aspect-ratio:var(--media-ratio); overflow:hidden; }
.showcase-media .comparison>img,.showcase-media .before-layer img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.showcase-media .before-layer { position:absolute; inset:0; width:100%; height:100%; clip-path:none; }
.showcase-split .showcase-inner { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:8%; }
.showcase-split .showcase-copy { width:auto; max-width:550px; }
.showcase-split .showcase-copy h2 { font-size:clamp(42px,4.4vw,72px); }
.showcase-split.split-reverse .showcase-copy { grid-column:2; grid-row:1; }
.showcase-split.split-reverse .showcase-media { grid-column:1; grid-row:1; width:87%; }
/* Plain photographic captions, never controls. Only the current state is shown. */
.comparison-label { position:absolute; z-index:4; top:var(--caption-top,22px); padding:9px 12px; color:#fff; font-size:13px; font-weight:500; line-height:1.2; letter-spacing:.015em; pointer-events:none; text-shadow:0 1px 7px #000; opacity:0; transition:opacity .15s; }
.comparison-label-before { left:22px; background:linear-gradient(90deg,#0b0d0fb3,#0b0d0f33); }
.comparison-label-after { right:22px; background:linear-gradient(270deg,#0b0d0fb3,#0b0d0f33); }
[data-phase=before] .comparison-label-before,[data-phase=after] .comparison-label-after { opacity:1; }
.gallery-section .section-heading h2 { max-width:1040px; font-size:clamp(42px,4.6vw,74px); }
.gallery-section { padding-top:100px; }

/* Three independent courses, followed by one set across all three columns. */
.course-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; align-items:stretch; }
.course-card { min-width:0; padding:32px; }
.course-card .card-top { font-size:10px; min-height:26px; }
.course-card .course-art { display:flex; align-items:center; justify-content:center; flex:none; height:clamp(250px,27vw,390px); min-height:0; margin:24px 0 30px; overflow:visible; }
.course-card .course-art img { display:block; flex:none; width:100%; height:100%; max-width:100%; max-height:100%; min-width:0; min-height:0; object-fit:contain; }
html[data-modern-type] .course-card h3 { font-size:clamp(28px,2.45vw,39px); line-height:1.15; min-height:2.3em; margin:0 0 24px; }
.course-card>p { font-size:14px; max-width:100%; }
.course-card ul { font-size:13px; line-height:1.8; margin:25px 0 32px; }
.course-card li { margin-bottom:9px; }
.course-card .button { min-height:58px; font-size:14px; }
.course-card .price-note { font-size:11px; line-height:1.65; margin:12px 0 0; }
.course-card.ai-course { --course-accent:var(--white); border-color:#ffffff36; }
.ai-course::after { background:linear-gradient(90deg,var(--cyan),var(--magenta)); }
.ai-course .card-top>span:first-child,.ai-course li::before { color:var(--white); }
.course-availability { margin-top:auto; }
.course-card.ai-course .button { background:#ffffff0a; color:var(--white); border-color:#ffffff45; }
.course-card.bundle-full { grid-column:1/-1; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:6%; padding:48px; margin-top:28px; border:1px solid #ee79cf66; }
.bundle-full::before { display:none; }
.bundle-art { width:100%; min-width:0; }
.bundle-art img { width:100%; height:auto; max-height:410px; object-fit:contain; }
.bundle-copy { min-width:0; }
.bundle-copy .card-top { justify-content:flex-start; gap:20px; margin-bottom:25px; }
html[data-modern-type] .bundle-full h3 { min-height:0; font-size:clamp(38px,3.6vw,58px); margin:0 0 24px; }
.bundle-full ul { margin:0 0 28px; font-size:14px; }
.bundle-full .button { width:220px; margin:0; }
.bundle-full .button:disabled { opacity:.7; color:var(--canvas); }

@media(min-width:761px) {
 .nav { height:110px; padding:20px 5%; background:linear-gradient(#0b0d0f99,transparent); }
 .nav.scrolled { background:#0b0d0ff5; }
 .nav nav { gap:clamp(22px,2.6vw,46px); }
 .nav nav>a:not(.button) { font-size:clamp(16px,1.3vw,20px); font-weight:500; min-height:48px; display:flex; align-items:center; transition:color .2s; }
 .nav nav>a:not(.button):hover { color:var(--cyan); }
 .nav .login { margin-left:22px; }
 html[data-modern-type] h1 { font-size:clamp(92px,min(11vw,19svh),188px); line-height:.99; letter-spacing:-.055em; }
 html[data-modern-type] .hero-copy { top:21%; left:6%; max-width:58%; }
 .hero-actions { margin-top:36px; }
 .hero-actions .button { min-height:62px; min-width:235px; font-size:16px; padding:18px 28px; }
 .hero-shade { background:linear-gradient(90deg,#05090dc9, #05090d66 37%, transparent 67%),linear-gradient(0deg,#05090d70,transparent 28%,transparent 80%,#05090d40); }
 .courses-heading { margin-bottom:65px; }
 .courses-heading h2 { font-size:clamp(52px,5.4vw,88px); }
}
@media(min-width:761px) and (max-width:1100px) {
 .brand img { width:285px; }
 .nav { padding-inline:4%; }
 .nav nav { gap:22px; }
 .nav .login { margin-left:0; }
 .course-card { padding:24px; }
 .course-card .course-art { height:255px; margin-bottom:25px; }
 html[data-modern-type] .course-card h3 { font-size:27px; }
 .course-card ul { font-size:12px; }
 .course-card .button { font-size:12px; padding-inline:16px; }
 .showcase-copy p { font-size:15px; }
}
@media(max-width:760px) {
 .brand img { width:255px; max-width:calc(100vw - 100px); }
 .hero-photo picture img { object-position:70% 50%; }
 .showcase { padding:64px 0 36px; }
 .showcase-inner,.showcase-split .showcase-inner { width:100%; display:flex; flex-direction:column; gap:30px; }
 .showcase-copy,.showcase-split .showcase-copy,.align-right .showcase-copy,.align-center .showcase-copy { width:88%; max-width:none; margin-inline:auto; align-self:auto; text-align:left; }
 html[data-modern-type] .showcase-copy h2 { font-size:38px; margin-bottom:20px; }
 .showcase-copy p { max-width:390px; font-size:13px; line-height:1.8; }
 .showcase-copy .button { min-height:52px; min-width:205px; font-size:12px; margin-top:22px; }
 .align-center .showcase-copy p { margin-inline:0; }
 .showcase-split.split-reverse .showcase-media { width:100%; }
 .showcase-media .comparison { width:100%; height:auto; aspect-ratio:var(--media-ratio); }
 .comparison-label { top:var(--caption-top,12px); padding:8px 10px; font-size:11px; }.comparison-label-before{left:12px}.comparison-label-after{right:12px}
 .gallery-section .section-heading h2 { font-size:33px; }
 .course-grid { grid-template-columns:1fr; gap:20px; }
 .course-card { padding:28px; }
 .course-card .course-art { height:auto; aspect-ratio:1; margin:20px 0 28px; }
 html[data-modern-type] .course-card h3 { font-size:30px; min-height:0; }
 .course-card .price-note { font-size:10px; }
 .course-card.bundle-full { display:flex; flex-direction:column; padding:28px; margin-top:0; gap:28px; }
 .bundle-copy { width:100%; }
 .bundle-copy .card-top { gap:15px; font-size:9px; }
 html[data-modern-type] .bundle-full h3 { font-size:34px; }
 .bundle-full ul { font-size:12px; }
 .bundle-full .button { width:100%; }
 .footer-top>.brand img { width:280px; max-width:100%; }
}
@media(prefers-reduced-motion:reduce) {
 .button::after { display:none; }
 .showcase img { transform:none!important; }
 .comparison-label-before { opacity:0!important; }
 .comparison-label-after { opacity:1; }
}
html.reduce-motion .button::after { display:none; }
html.reduce-motion .showcase img { transform:none!important; }

/* The desktop photograph always fits in full, before and after the print transition. */
@media(min-width:761px) {
 .hero-photo { inset:126px 24px 26px; }
 .hero-photo picture img { object-fit:contain; object-position:center; }
 .hero-shade { background:linear-gradient(90deg,#05090d80,transparent 54%); }
}
html.reduce-motion .comparison-label-before { opacity:0; }
html.reduce-motion .comparison-label-after { opacity:1; }

/* Desktop: monochrome contact sheet → one complete colour photograph. */
.hero-mosaic { display:none; }
@media(min-width:761px) {
 .story { height:245svh; }
 .hero-photo { display:none; }
 .hero-mosaic { display:grid; position:absolute; left:0; top:0; width:max(100vw,210svh); height:max(calc(100vw / 2.1),100svh); grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); transform-origin:0 0; transform:translate(calc((100vw - max(100vw,210svh)) / 2),calc((100svh - max(calc(100vw / 2.1),100svh)) / 2));  }
 .mosaic-tile { position:relative; min-width:0; min-height:0; overflow:hidden; border:3px solid var(--canvas); }
 .mosaic-tile img { width:100%; height:100%; max-width:none; object-fit:cover; }
 .mosaic-target img { object-fit:contain; filter:none; }
 .mosaic-target .mosaic-mono { position:absolute; inset:0; filter:grayscale(1); }
 .mosaic-shade { position:absolute; inset:0; background:radial-gradient(ellipse at center,#06090cc9 0%,#06090c80 37%,#06090c30 75%),linear-gradient(#06090c66,transparent 25%); pointer-events:none; }
 html[data-modern-type] .hero-copy { top:50%; left:50%; right:auto; width:90%; max-width:none; transform:translate(-50%,-50%); text-align:center; }
 html[data-modern-type] h1 { font-size:clamp(82px,min(10vw,15svh),176px); line-height:1; }
 .hero-actions { justify-content:center; }

 html.reduce-motion .story { height:100svh; }
 html.reduce-motion .story-stage { height:100svh; padding-top:0; overflow:hidden; }
 html.reduce-motion .hero-copy { top:50%; }
 html.reduce-motion .hero-mosaic { will-change:auto; }
}
@media(max-width:760px) { .mosaic-shade { display:none; } }
@media(min-width:761px) and (prefers-reduced-motion:reduce) {
 .story { height:100svh; }
 .story-stage { height:100svh; padding-top:0; overflow:hidden; }
 html[data-modern-type] .hero-copy { top:50%; }
 .hero-mosaic { will-change:auto; }
}

/* Reviews use the real portraits already paired with the published testimonials. */
.quotes { gap:18px; }
.quotes figure { min-width:0; padding:32px; border:1px solid #ffffff1c; background:linear-gradient(145deg,#171b20,#0e1115); }
.quotes .quote-mark { color:var(--cyan); line-height:.8; }
.quotes figure:nth-child(2) .quote-mark { color:var(--magenta); }
.quotes blockquote { margin:20px 0 42px; color:var(--white); }
.quotes figcaption { display:flex; flex-direction:row; align-items:center; gap:15px; }
.quotes figcaption img { width:64px; height:64px; flex:none; border-radius:50%; object-fit:cover; padding:3px; background:linear-gradient(135deg,var(--cyan),var(--magenta)); }
.quotes figcaption div { display:flex; flex-direction:column; gap:6px; }
.quotes figcaption strong { font-size:13px; }
.quotes figcaption span { font-size:10px; }
.showcase-split.split-reverse .showcase-media { width:100%; }
.faq-page { min-height:75svh; padding-top:clamp(160px,17vw,240px); padding-bottom:120px; }
html[data-modern-type] .faq-page h1 { font-size:clamp(58px,6vw,90px); line-height:1; }
.faq-page .text-link { margin-top:30px; }
.nav nav a[aria-current=page] { color:var(--cyan); }
@media(min-width:761px) and (max-width:1100px) {
 .brand img { width:clamp(190px,25vw,285px); }
 .nav nav { gap:clamp(12px,1.8vw,22px); }
 .nav nav>a:not(.button) { font-size:clamp(14px,1.4vw,16px); }
}
@media(max-width:760px) {
 .quotes { gap:14px; }
 .quotes figure { padding:25px; }
 .quotes blockquote { margin:15px 0 32px; }
 .faq-page { padding-top:140px; padding-bottom:90px; }
 html[data-modern-type] .faq-page h1 { font-size:52px; }
}
.faq-page h1 span { display:inline; }

/* Brand sequence in the hero on every screen size. */
.hero-copy h1 span:first-child { color:var(--white); }
.hero-copy h1 span:nth-child(2) { color:var(--magenta); }
.hero-copy h1 span:nth-child(3) { color:var(--cyan); }

/* Mobile uses the same photographs in a denser contact sheet, without stretching them. */
@media(max-width:760px) {
 .mosaic-ready .story-stage { min-height:0; }
 /* Let the next chapter enter while the last blurred frame disappears. */
 .story.stable-hero { margin-bottom:-10svh; }
 html.has-js .hero-photo { display:none; }
 html.has-js .hero-mosaic { display:grid; position:absolute; left:0; top:0; right:auto; bottom:auto; width:max(100vw,calc(var(--hero-stage-height,100svh) / 2)); height:max(200vw,var(--hero-stage-height,100svh)); grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); transform-origin:0 0; transform:translate(calc((100vw - max(100vw,calc(var(--hero-stage-height,100svh) / 2))) / 2),calc((var(--hero-stage-height,100svh) - max(200vw,var(--hero-stage-height,100svh))) / 2)); }
 html.has-js .mosaic-initial-sheet,.mosaic-ready .mosaic-atlas { display:block; position:absolute; inset:0; width:100%; height:100%; max-width:none; pointer-events:none; }
 html.has-js .mosaic-initial-sheet img { display:block; width:100%; height:100%; max-width:none; }
 .mosaic-ready .mosaic-tile { position:relative; z-index:1; min-width:0; min-height:0; overflow:hidden; border:2px solid transparent; }
 .mosaic-ready .mosaic-tile img { width:100%; height:100%; max-width:none; object-fit:cover; }
 .mosaic-ready .mosaic-target img { object-fit:contain; }
 .mosaic-ready .mosaic-target .mosaic-mono { position:absolute; inset:0; filter:grayscale(1); }
 .mosaic-ready .mosaic-preview { position:absolute; inset:0; background-repeat:no-repeat; background-size:400% 800%; opacity:1; transition:opacity .2s; pointer-events:none; }
 .mosaic-ready .mosaic-target:not(.is-ready) img { visibility:hidden; }
 .mosaic-ready .mosaic-target.is-ready .mosaic-preview { opacity:0; }
 html.has-js .mosaic-shade { display:block; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%,#06090cba 0%,#06090c9c 45%,#06090c40 100%),linear-gradient(#06090c80,transparent 23%); pointer-events:none; }
 html.has-js[data-modern-type] .hero-copy { top:50%; left:50%; right:auto; width:94%; max-width:none; transform:translate(-50%,-50%); text-align:center; }
 html.has-js[data-modern-type] .story h1 { font-size:clamp(48px,14vw,72px); line-height:1.04; }
 html.has-js .story .hero-actions { align-items:center; justify-content:center; margin-top:26px; }
 html.has-js .story .hero-actions .button { min-height:52px; min-width:205px; font-size:13px; }
 html.reduce-motion .mosaic-ready .story-stage { height:100svh; min-height:0; padding-top:0; overflow:hidden; }
 html.reduce-motion[data-modern-type] .mosaic-ready .hero-copy { top:50%; }
 .native-hero.mosaic-ready .hero-mosaic { animation:mobile-mosaic-zoom 1s linear both; animation-timeline:scroll(root block); animation-range:var(--hero-scroll-start) var(--hero-scroll-end); }
 .native-hero.mosaic-ready .mosaic-target img { animation:mobile-mosaic-frame 1s linear both; animation-timeline:scroll(root block); animation-range:var(--hero-scroll-start) var(--hero-scroll-end); }
 .native-hero.mosaic-ready .mosaic-target { animation:mobile-mosaic-soften 1s linear both; animation-timeline:scroll(root block); animation-range:var(--hero-scroll-start) var(--hero-scroll-end); }
 .native-hero.mosaic-ready .mosaic-atlas { animation:mobile-mosaic-others 1s linear both; animation-timeline:scroll(root block); animation-range:var(--hero-scroll-start) var(--hero-scroll-end); }
 .native-hero.mosaic-ready .mosaic-target img.mosaic-mono { animation:mobile-mosaic-frame 1s linear both,mobile-mosaic-colour 1s linear both; animation-timeline:scroll(root block),scroll(root block); animation-range:var(--hero-scroll-start) var(--hero-scroll-end),var(--hero-scroll-start) var(--hero-scroll-end); }
 .native-hero.mosaic-ready .mosaic-shade { animation:mobile-mosaic-shade 1s linear both; animation-timeline:scroll(root block); animation-range:var(--hero-scroll-start) var(--hero-scroll-end); }
 html[data-modern-type] .native-hero.mosaic-ready .hero-copy { animation:mobile-mosaic-copy 1s linear both; animation-timeline:scroll(root block); animation-range:var(--hero-scroll-start) var(--hero-scroll-end); }
}
@keyframes mobile-mosaic-zoom {
 0%,6% { transform:translate(var(--mosaic-x0),var(--mosaic-y0)) scale(1); animation-timing-function:cubic-bezier(.65,0,.35,1); }
 65%,69% { transform:translate(var(--mosaic-x1),var(--mosaic-y1)) scale(var(--mosaic-scale)); animation-timing-function:cubic-bezier(.65,0,.35,1); }
 99%,100% { transform:translate(var(--mosaic-focusX),var(--mosaic-focusY)) scale(var(--mosaic-focusScale)); }
 0%,78% { opacity:1; }
 96%,100% { opacity:0; }
}
@keyframes mobile-mosaic-frame {
 0%,6% { transform:scale(var(--mosaic-cover)); animation-timing-function:cubic-bezier(.65,0,.35,1); }
 65%,100% { transform:scale(1); }
}
@keyframes mobile-mosaic-soften {
 0%,43% { border-color:var(--canvas); }
 60%,100% { border-color:transparent; }
 0%,76% { filter:blur(0); }
 100% { filter:blur(var(--mosaic-blur)); }
}
@keyframes mobile-mosaic-others { 0%,44% { opacity:1; } 62%,100% { opacity:0; } }
@keyframes mobile-mosaic-colour { 0%,37% { opacity:1; } 60%,100% { opacity:0; } }
@keyframes mobile-mosaic-shade { 0%,12% { opacity:1; } 42%,100% { opacity:0; } }
@keyframes mobile-mosaic-copy {
 0% { opacity:1; transform:translate(-50%,-50%); }
 22%,100% { opacity:0; transform:translate(-50%,-50%) translateY(-25px); }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) {
 .mosaic-ready .story-stage { height:100svh; min-height:0; padding-top:0; overflow:hidden; }
 html[data-modern-type] .mosaic-ready .hero-copy { top:50%; }
}

/* Full testimonials remain readable without truncation on every screen. */
.quotes blockquote { font-size:clamp(16px,1.3vw,18px); line-height:1.7; letter-spacing:-.01em; }
@media(max-width:760px) { .quotes blockquote { font-size:16px; line-height:1.7; } }
/* Reserve the image area until its nearby section starts loading. */
.showcase img[data-lazy-src], .courses img[data-lazy-src] { visibility:hidden; }

/* Each example leads directly to its own course. */
.courses-anchor { position:relative; scroll-margin-top:100px; }
.showcase-split .showcase-inner { display:flex; flex-direction:column; align-items:stretch; gap:48px; }
.showcase-split .showcase-copy { max-width:800px; width:100%; }
.showcase-split.split-reverse .showcase-copy { align-self:flex-end; }
.showcase-split.split-reverse .showcase-media { width:100%; }
.course-feature { padding:20px 0 100px; background:var(--canvas); }
.course-feature .feature-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,6vw,90px); align-items:center; max-width:1160px; margin:auto; padding:clamp(26px,4vw,55px); border:1px solid #ffffff2c; }
.course-feature .feature-card .course-art { margin:0; height:auto; aspect-ratio:1; }
.course-feature .feature-card-copy { min-width:0; }
.course-feature .feature-card h3 { min-height:0; }
.course-feature .feature-card .button { display:inline-flex; width:auto; max-width:100%; margin-top:22px; }
.feature-light .feature-card { --course-accent:var(--cyan); }
.feature-edit .feature-card { --course-accent:var(--magenta); }
.feature-light .feature-card { background:linear-gradient(rgba(97,227,242,.03),rgba(97,227,242,.03)),var(--canvas); }
.feature-edit .feature-card { background:linear-gradient(rgba(238,121,207,.03),rgba(238,121,207,.03)),var(--canvas); }
.feature-ai .feature-card { background:linear-gradient(rgba(76,125,255,.03),rgba(76,125,255,.03)),var(--canvas); }
.feature-bundle .bundle-full { max-width:1160px; margin:0 auto; background:linear-gradient(115deg,rgba(97,227,242,.03),rgba(238,121,207,.03) 52%,rgba(76,125,255,.03)),var(--canvas); }
.feature-edit .card-top > span:first-child,.feature-edit li::before { color:var(--magenta); }
.feature-light .feature-card .button.outline { background:var(--cyan); color:var(--canvas); }
.feature-edit .feature-card .button.outline { background:var(--magenta); color:var(--canvas); }
.ai-intro { padding:100px 0 55px; background:var(--canvas); }
.ai-intro>.wrap { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:1%; align-items:center; max-width:1160px; }
.ai-intro h2 { font-size:clamp(42px,5.3vw,86px); }
.ai-intro p { margin-top:24px; }
.ai-palette { margin:0; min-width:0; }
.ai-palette img { width:100%; height:auto; display:block; }
@media(max-width:760px) {
 .showcase-split .showcase-inner { width:100%; gap:30px; }
 .showcase-split .showcase-copy,.showcase-split.split-reverse .showcase-copy { width:88%; align-self:auto; }
 .course-feature { padding:14px 0 65px; }
 .course-feature .feature-card { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:24px; }
 .course-feature .feature-card .course-art { width:100%; max-height:340px; }
 .course-feature .feature-card .button { min-height:54px; font-size:13px; }
 .ai-intro { padding:65px 0 30px; }
 .ai-intro>.wrap { display:block; }
 .ai-intro h2 { font-size:38px; }
 .ai-intro p { font-size:13px; }
 .ai-palette { margin:22px -4% 0; }
}

/* Desktop pairs each example with its course; mobile retains the existing order. */
@media(min-width:761px) {
 .course-chapter { width:88%; max-width:1440px; margin:0 auto; padding:65px 0 90px; display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); grid-template-areas:'card photo'; align-items:center; gap:clamp(30px,4vw,70px); }
 .course-chapter.chapter-edit { grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); grid-template-areas:'photo card'; }
 .course-chapter .showcase { grid-area:photo; padding:0; min-width:0; }
 .course-chapter .showcase-inner { width:100%; max-width:none; margin:0; }
 .course-chapter .showcase-copy { display:none; }
 .course-chapter .course-feature { grid-area:card; padding:0; min-width:0; }
 .course-chapter .course-feature>.wrap { width:100%; max-width:none; }
 .course-chapter .course-feature .feature-card { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:clamp(22px,2.7vw,38px); }
 .course-chapter .course-feature .feature-card .course-art { height:clamp(125px,21svh,200px); max-height:200px; aspect-ratio:auto; }
 .course-chapter .feature-card .card-top { min-height:0; }
 html[data-modern-type] .course-chapter .feature-card h3 { font-size:clamp(28px,2.5vw,38px); margin:0 0 14px; }
 .course-chapter .feature-card-copy p:not(.price-note) { font-size:14px; line-height:1.6; }
 .course-chapter .feature-card ul { display:none; }
 .course-chapter .feature-card .button { margin-top:16px; }
}
@media(min-width:761px) and (max-height:700px) {
 .course-chapter .course-feature .feature-card .course-art { height:110px; }
 html[data-modern-type] .course-chapter .feature-card h3 { font-size:27px; }
 .course-chapter .feature-card-copy p:not(.price-note) { font-size:13px; }
}

/* A compact portfolio; every image keeps its original proportions. */
.gallery-section .section-heading h2 { max-width: 1040px; font-size: clamp(32px, 3.6vw, 54px); }
.gallery-section .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.gallery-section .gallery-item { width: 100%; min-width: 0; margin: 0; padding: 0; }
.gallery-section .gallery-reveal { width: 100%; }
.gallery-section .photo-button { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; background: #101216; }
.gallery-section .photo-button img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 760px) {
  .gallery-section .section-heading h2 { font-size: 33px; }
  .gallery-section .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}