.showcase-section{padding-top:64px}
.showcase-section .section-heading{margin-bottom:20px}
.real-example-label{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:24px}
.real-examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.real-example{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.real-example>a,.real-example-body{display:block;height:100%}
.real-example-screen{position:relative;background:var(--navy);overflow:hidden}
.real-example-screen img{display:block;width:100%;height:auto;aspect-ratio:1.85;object-fit:contain}
.real-example-screen>span{position:absolute;right:9px;bottom:9px;background:#001629e8;border:1px solid #b5edff55;border-radius:24px;color:#fff;padding:6px 10px;font-size:10px}
.real-example-caption{padding:20px}
.real-example-caption .eyebrow{font-size:10px;margin-bottom:7px}
.real-example-caption h3{font:500 22px/1.8 var(--serif);margin-bottom:8px}
.real-example-caption>p:last-child{font-size:12px;line-height:1.9;color:var(--muted)}
.real-example a:focus-visible{outline:3px solid var(--cyan);outline-offset:-4px}
.real-example:has(a):hover,.real-example.is-current{border-color:var(--cyan)}
.real-example.is-current .real-example-screen>span{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.design-reference{margin-top:45px;padding-top:35px;border-top:1px solid var(--line)}
.design-reference-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:16px}
.design-reference-heading .eyebrow{margin-bottom:10px}
.design-reference-heading h3{font:500 clamp(23px,2.6vw,32px)/1.8 var(--serif)}
.design-reference-heading>p{font-size:16px;line-height:1.9;color:var(--muted)}
.design-reference .design-gallery-note{margin-bottom:24px}
.design-preview{max-width:980px;margin-inline:auto}
.design-preview .design-example-image img{aspect-ratio:3/2;object-fit:contain}
.design-preview figcaption{min-height:130px}
.design-preview h3{font-size:22px}
.design-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;max-width:980px;margin:18px auto 0}
.design-thumb{min-width:0;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:inherit;cursor:pointer;text-align:center}
.design-thumb img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#e8e8e4;border-radius:3px}
.design-thumb>span{display:block;padding:7px 1px 3px;font:500 14px/1.7 var(--sans)}
.design-thumb[aria-pressed=true]{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan)}
.design-thumb:hover{border-color:var(--cyan)}
.design-thumb:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
body[data-sample] .design-thumb{background:var(--sample-panel);border-color:var(--sample-border)}
body[data-sample] .design-reference-heading>p{color:var(--sample-quiet)}
body[data-sample] .real-example.is-current,body[data-sample] .design-thumb[aria-pressed=true],body[data-sample] .design-thumb:hover{border-color:var(--sample-accent)}
body[data-design=blue] .real-example.is-current .real-example-screen>span{color:#fff}
@media(max-width:650px){.design-reference{margin-top:32px;padding-top:27px}.design-reference-heading{display:block}.design-reference-heading>p{font-size:15px;margin-top:13px}.design-reference-heading>p br{display:none}.design-preview h3{font-size:20px}.design-preview figcaption{min-height:175px}.design-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:15px}.design-thumb>span{font-size:14px}}
.section-anchor{display:block;scroll-margin-top:130px}
.overview-course-grid,.pricing-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.course-outcomes{list-style:none;display:grid;gap:13px;margin-top:24px;font-size:14px;line-height:1.9}
.course-outcomes li{padding-left:20px;position:relative}
.course-outcomes li:before{content:'✓';position:absolute;left:0;color:var(--cyan)}
.overview-course-panel{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:31px;text-align:center}
.overview-course-panel .panel-label{font-size:12px;line-height:1.9}
.overview-course-price{font:500 clamp(44px,5.1vw,68px)/1.3 'Cormorant Garamond',var(--serif);color:var(--ice);margin:17px 0 15px}
.overview-course-price span{font:400 12px/1.8 var(--serif);margin-left:5px}
.overview-course-panel>p:not(.overview-course-price){font-size:12px;line-height:1.9}
.overview-course-panel .button{margin-top:22px;width:100%;min-width:0;font-size:13px;padding-inline:11px;white-space:normal;line-height:1.8}
.text-link{display:inline-flex;gap:12px;align-items:center;font-size:13px;line-height:1.9;color:var(--ice);text-decoration:underline;text-underline-offset:5px}
.overview-course-panel .text-link{margin-top:17px;font-size:12px}
.curriculum-section,.materials-section,.pricing-section,.other-services{border-top:1px solid var(--line)}
.curriculum-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 45px;max-width:1100px;margin-inline:auto}
.curriculum-grid .lesson{padding-block:25px}
.curriculum-section .between{max-width:1100px;margin:26px auto 0}
.materials-section .manual-card{margin-top:0}
.materials-section .support{max-width:1050px;margin:36px auto 0}
.about+#pricing{padding-top:68px}
.pricing-layout .value-box{margin-top:0}
.pricing-message{margin-top:28px}
.pricing-layout .seminar-price{position:static;width:100%;max-width:none}
.pricing-layout .button{font-size:13px}
.other-services .section-heading{margin-bottom:28px}
.other-services-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:1050px;margin-inline:auto}
.other-service{padding:27px;border:1px solid var(--line);border-radius:10px;background:var(--panel);scroll-margin-top:130px}
.other-service .eyebrow{font-size:11px;margin-bottom:12px}
.other-service h3{font:500 23px/1.8 var(--serif);margin-bottom:12px}
.other-service>p:not(.eyebrow){font-size:13px;line-height:1.95;color:var(--muted)}
.other-service .other-service-price{margin-top:17px;color:var(--ice)!important}
.other-service .text-link{margin-top:18px}
.service-detail .section h1{font:500 clamp(28px,3.2vw,42px)/1.8 var(--serif);margin-bottom:22px}
.detail-back{padding-top:40px;font-size:13px;color:var(--ice)}
.service-detail .offer-section,.service-detail .portfolio-section{padding-top:38px}
.detail-bottom{padding-bottom:65px}
.detail-bottom .button{min-width:0;font-size:14px;white-space:normal}
body[data-sample] .real-example,body[data-sample] .overview-course-panel,body[data-sample] .other-service{background:var(--sample-panel);border-color:var(--sample-border)}
body[data-sample] .design-reference,body[data-sample] .design-reference>summary>span,body[data-sample] .curriculum-section,body[data-sample] .materials-section,body[data-sample] .pricing-section,body[data-sample] .other-services{border-color:var(--sample-border)}
body[data-sample] .real-example-label,body[data-sample] .real-example-caption>p:last-child,body[data-sample] .other-service>p:not(.eyebrow){color:var(--sample-quiet)}
body[data-sample] .overview-course-price,body[data-sample] .text-link,body[data-sample] .design-reference>summary:after,body[data-sample] .design-reference>summary>span,body[data-sample] .detail-back,body[data-sample] .other-service .other-service-price{color:var(--sample-accent)!important}
@media(max-width:1000px){.real-examples-grid{gap:15px}.real-example-caption{padding:17px}.real-example-caption h3{font-size:19px}.overview-course-grid,.pricing-layout{gap:35px}.overview-course-panel{padding:25px 20px}.curriculum-grid{gap:0 27px}.course-outcomes{font-size:13px}}
@media(max-width:650px){.showcase-section{padding-top:40px}.real-examples-grid{grid-template-columns:1fr;gap:23px}.real-example-caption{padding:18px}.real-example-caption h3{font-size:22px}.real-example-screen>span{font-size:11px}.real-example-label{font-size:11px}.design-reference>summary{font-size:12px;gap:8px}.design-reference>summary>span{padding-inline:8px}.design-reference-inner>h3{font-size:18px}.overview-course-grid,.pricing-layout{grid-template-columns:1fr;gap:29px}.overview-course-panel{padding:25px 21px}.overview-course-price{font-size:61px}.curriculum-grid{grid-template-columns:1fr}.curriculum-grid .lesson{padding-block:23px}.materials-section .support{margin-top:27px}.about+#pricing{padding-top:43px}.other-services-grid{grid-template-columns:1fr;gap:19px}.other-service{padding:23px}.other-service h3{font-size:22px}.detail-back{padding-top:26px}.service-detail .section h1{font-size:29px}.detail-bottom{padding-bottom:45px}}

/* Course introduction and pricing use the same left/right division. */
main .course-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;max-width:1180px;margin-inline:auto;align-items:start}
main .course-split-copy{min-width:0}
main .course-split-copy>.value-box{margin-top:0;padding:24px;border-radius:0 9px 9px 0}
main .course-split-panel{position:relative;top:auto;width:100%;max-width:none;min-width:0;padding:34px;border-radius:15px;border:1px solid var(--line);background:linear-gradient(145deg,#052747d9,#031831);box-shadow:0 15px 50px #00071a55}
main .course-split-panel>.large-price{font-size:68px;line-height:1.3;letter-spacing:-.02em;margin:17px 0 15px;color:var(--ice)}
main .course-split-panel>.large-price>span{font:400 14px/1.8 var(--sans);margin-left:7px}
main .course-split-panel>.button{font-size:16px;margin-top:25px;padding-inline:14px;width:100%;min-width:0;line-height:1.8;white-space:normal}
body[data-sample] main .course-split-panel{background:var(--sample-panel);border-color:var(--sample-border)}
@media(max-width:1000px){main .course-split{gap:35px}main .course-split-panel{padding:27px 24px}}
@media(max-width:800px){main .course-split{grid-template-columns:minmax(0,1fr);gap:29px}main .course-split-panel{max-width:560px;justify-self:center}}
@media(max-width:650px){main .course-split-panel{padding:27px 23px}main .course-split-panel>.large-price{font-size:61px}main .course-split-panel>.button{font-size:15px}main .course-split-copy>.value-box{padding:20px}}