/* Local School design: dimensions follow the 1200px supplied artboards.
   Confirmed curriculum and approved studio navigation are independent of this layout. */
/* Keep the page position and scrollbar gutter stable behind every native popup. */
html:has(> body.ux-school){scrollbar-gutter:stable}
html:has(> body.ux-school dialog[open]){overflow:hidden}
body.ux-school{--ux-u:clamp(.8px,.083333333vw,1.5px);--ux-purple:#784fad;--ux-pink:#b05bb9;--ux-dark:#5a3285;--ux-yellow:#ffe04f;--ux-bright-pink:#ea609c;--ux-panel:#63399e;--school-heading-font:var(--school-body-font);color:#fff;background:var(--ux-purple);font-size:calc(15 * var(--ux-u));line-height:1.36}
body.ux-school [hidden]{display:none!important}
body.ux-school #main{padding:0;min-width:0}
body.ux-school :where(#main,.ux-payment-section,.ux-footer,.ux-dialog,.cart-dialog) :is(h1,h2,h3){font-family:var(--school-body-font)!important;font-weight:700!important;font-synthesis:weight!important;letter-spacing:normal}
body.ux-school #main :is(h1,h2,h3) :is(span,strong){font-family:inherit!important}
body.ux-school .ux-shell{width:calc(880 * var(--ux-u));max-width:calc(100% - 40px);margin-inline:auto}
body.ux-school .ux-reading{width:calc(684 * var(--ux-u));max-width:calc(100% - 40px);margin-inline:auto}
body.ux-school .ux-shell h1,body.ux-school .ux-shell>h2,body.ux-school .ux-reading>h2{font-size:calc(34 * var(--ux-u));text-align:center;margin:0 0 calc(32 * var(--ux-u));line-height:1.18}
body.ux-school .ux-button{display:inline-flex;justify-content:center;align-items:center;min-height:calc(35 * var(--ux-u));border:0;border-radius:calc(4 * var(--ux-u))!important;padding:calc(8 * var(--ux-u)) calc(14 * var(--ux-u));background:var(--ux-purple)!important;color:#fff;font-size:calc(14 * var(--ux-u));line-height:1.25;text-decoration:none;transition:filter .15s}
body.ux-school .ux-button:hover{filter:brightness(1.1)}
body.ux-school .ux-button.ux-light{background:#fff!important;color:#63399e}
body.ux-school .ux-button.ux-pink{background:var(--ux-pink)!important}
body.ux-school .ux-button.ux-green{background:#5dbc2e!important;color:#fff}
body.ux-school .ux-button.is-added{background:#287b40!important}
body.ux-school .ux-fineprint{font-size:12px;line-height:1.45;margin:16px 0 0;opacity:.88}
body.ux-school :is(.ux-facts,.ux-lesson,.ux-curriculum-summary,.ux-modal-instructor) strong{font-weight:700!important}
body.ux-school .ux-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.ux-school .ux-hero{padding:calc(55 * var(--ux-u)) 0 calc(50 * var(--ux-u))}
body.ux-school .ux-hero-grid{display:grid;grid-template-columns:400fr 420fr;gap:calc(60 * var(--ux-u));align-items:start}
body.ux-school .ux-logo{width:calc(240 * var(--ux-u));height:auto;object-fit:contain}
body.ux-school .ux-hero-copy .ux-logo{margin:calc(-16 * var(--ux-u)) 0 0 calc(-8 * var(--ux-u))}
body.ux-school .ux-hero-copy h1{text-align:left;font-size:calc(34 * var(--ux-u));line-height:1.27;margin:calc(15 * var(--ux-u)) 0 calc(22 * var(--ux-u))}
body.ux-school .ux-hero-copy h1 .ux-hero-accent{color:var(--ux-yellow)}
body.ux-school .ux-hero-copy p{font-size:calc(15 * var(--ux-u));line-height:1.36;margin-bottom:calc(16 * var(--ux-u))}
body.ux-school .ux-hero-art{position:relative;margin:0 0 calc(20 * var(--ux-u))}
body.ux-school .ux-hero-art>img:not(.ux-hero-badge){width:100%;height:auto;aspect-ratio:1.47;object-fit:cover;border-radius:calc(18 * var(--ux-u))}
body.ux-school .ux-hero-art .ux-hero-badge{position:absolute;left:calc(-24 * var(--ux-u));bottom:calc(-30 * var(--ux-u));width:calc(150 * var(--ux-u));height:auto;border-radius:calc(7 * var(--ux-u))}
body.ux-school .ux-about{background:var(--ux-pink);padding:calc(38 * var(--ux-u)) 0 calc(44 * var(--ux-u))}
body.ux-school .ux-about .ux-reading{width:calc(630 * var(--ux-u))}
body.ux-school .ux-video-poster{margin:0 0 calc(34 * var(--ux-u));position:relative}
body.ux-school .ux-video-poster img,body.ux-school .ux-video-poster video{display:block;width:100%;height:auto}
body.ux-school .ux-video-poster figcaption{font-size:11px;text-align:right;margin-top:4px;opacity:.8}
body.ux-school .ux-about h2{margin-bottom:calc(22 * var(--ux-u))}
body.ux-school .ux-about p{font-size:calc(13.5 * var(--ux-u));line-height:1.3;text-align:justify;margin-bottom:calc(18 * var(--ux-u))}
body.ux-school .ux-about p:last-child{margin-bottom:0}
body.ux-school .ux-seminars{padding:calc(38 * var(--ux-u)) 0 calc(42 * var(--ux-u));background:var(--ux-dark)}
body.ux-school .ux-seminars h2{margin-bottom:calc(8 * var(--ux-u));color:var(--ux-yellow)}
body.ux-school .ux-seminars h2 span,body.ux-school .ux-seminar-intro span{color:var(--ux-yellow)}
body.ux-school .ux-seminar-intro{text-align:center;font-size:calc(23 * var(--ux-u));line-height:1.3;margin-bottom:calc(38 * var(--ux-u));color:var(--ux-yellow)}
body.ux-school .ux-seminar-toggle{display:flex;gap:20px;margin:0 auto;min-width:145px}
body.ux-school .ux-seminar-toggle[aria-expanded="true"]{margin-bottom:30px}
body.ux-school .ux-seminar-toggle[aria-expanded="true"] .ux-chevron{transform:rotate(225deg);margin-bottom:0}
body.ux-school .ux-seminar-toggle:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:4px}
body.ux-school .ux-seminar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(30 * var(--ux-u)) calc(20 * var(--ux-u))}
body.ux-school .ux-seminar img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
body.ux-school .ux-seminar-actions{display:flex;justify-content:center;gap:calc(14 * var(--ux-u));margin-top:calc(12 * var(--ux-u))}
body.ux-school .ux-seminar-actions .ux-button{font-size:calc(13 * var(--ux-u));min-height:calc(25 * var(--ux-u));padding:calc(5 * var(--ux-u)) calc(10 * var(--ux-u))}
body.ux-school .ux-course-list{padding:calc(38 * var(--ux-u)) 0 calc(60 * var(--ux-u))}
body.ux-school .ux-course-intro{font-size:calc(13.5 * var(--ux-u));line-height:1.28;margin:0 0 calc(36 * var(--ux-u));text-align:justify}
body.ux-school .ux-course-intro p{margin-bottom:calc(17 * var(--ux-u))}
body.ux-school .ux-course-rows{display:flex;flex-direction:column;gap:calc(40 * var(--ux-u))}
/* Both columns share the row height. Longer approved copy grows the row instead
   of leaving its buttons below the image; object-fit keeps artwork undistorted. */
body.ux-school .ux-course-row{display:grid;grid-template-columns:minmax(0,350fr) minmax(0,498fr);gap:calc(32 * var(--ux-u));align-items:stretch}
body.ux-school .ux-course-art{display:block;width:100%;border-radius:calc(12 * var(--ux-u));overflow:hidden}
body.ux-school .ux-course-copy{display:flex;flex-direction:column;min-width:0}
body.ux-school .ux-art-frame{position:relative;display:block;overflow:hidden}
body.ux-school .ux-art-frame>img:not(.ux-moho-mark){display:block;position:absolute;max-width:none;left:var(--art-left,0);top:var(--art-top,0);width:var(--art-width,100%);height:var(--art-height,100%);object-fit:cover}
body.ux-school .ux-list-art{aspect-ratio:1;height:100%}
body.ux-school .ux-art-frame>img.ux-moho-mark{position:absolute;left:3%;bottom:1%;width:15%;height:auto;border:calc(3 * var(--ux-u)) solid #fff;border-radius:50%}
/* Read from each PDF's actual image transform and clip frame, not a generic center crop. */
body.ux-school .ux-list-art[data-art-course="stop-motion"]{--art-left:-5%;--art-top:-21.951%;--art-width:111.571%;--art-height:148.763%}
body.ux-school .ux-list-art[data-art-course="puppet-miniature"]{--art-left:-36%;--art-top:-18.857%;--art-width:162.286%;--art-height:162.286%}
body.ux-school .ux-list-art[data-art-course="2d-animation"]{--art-left:-82.889%;--art-top:-.214%;--art-width:183.746%;--art-height:103.357%}
body.ux-school .ux-list-art[data-art-course="3d-sculpting"]{--art-left:-2.571%;--art-top:-2.857%;--art-width:105.429%;--art-height:105.429%}
body.ux-school .ux-detail-art[data-art-course="stop-motion"],body.ux-school .ux-modal-art[data-art-course="stop-motion"]{--art-left:-2.199%;--art-top:0%;--art-width:107.331%;--art-height:135.891%}
body.ux-school .ux-detail-art[data-art-course="puppet-miniature"]{--art-left:-4.264%;--art-top:-23.317%;--art-width:108.185%;--art-height:182.547%}
body.ux-school .ux-detail-art[data-art-course="2d-animation"]{--art-left:-66.944%;--art-top:-13.891%;--art-width:167.384%;--art-height:158.941%}
body.ux-school .ux-detail-art[data-art-course="3d-modelling"]{--art-top:-40.842%;--art-height:168.812%}
body.ux-school .ux-detail-art[data-art-course="3d-sculpting"]{--art-left:-3.226%;--art-top:-4.208%;--art-width:106.452%;--art-height:179.703%}
body.ux-school .ux-modal-art[data-art-course="puppet-miniature"]{--art-top:-20.959%;--art-height:141.919%}
body.ux-school .ux-modal-art[data-art-course="2d-animation"]{--art-left:-70.65%;--art-top:-17.1%;--art-width:171.2%;--art-height:161.19%}
body.ux-school .ux-course-copy h3{font-size:calc(23 * var(--ux-u));margin:0 0 calc(14 * var(--ux-u));line-height:1.15}
body.ux-school .ux-course-copy h3 a{text-decoration:none}
body.ux-school .ux-course-copy h3 a:hover{text-decoration:underline;text-underline-offset:4px}
body.ux-school .ux-course-copy>p{font-size:calc(13.5 * var(--ux-u));line-height:1.28;margin-bottom:calc(14 * var(--ux-u));text-align:justify}
body.ux-school .ux-facts{padding-left:calc(15 * var(--ux-u));margin:calc(15 * var(--ux-u)) 0;font-size:calc(14 * var(--ux-u));line-height:1.2;list-style:disc}
body.ux-school .ux-facts li{padding:0;margin:calc(1 * var(--ux-u)) 0}
/* Flex columns do not collapse adjoining margins like ordinary text blocks. */
body.ux-school .ux-course-copy>.ux-facts{margin:calc(1 * var(--ux-u)) 0 0}
body.ux-school :is(.ux-tuition,.ux-purchase) [data-price-for]{display:inline-flex;gap:4px;flex-wrap:wrap}
body.ux-school :is(.ux-tuition,.ux-purchase) del{order:-1;font-size:.88em}
body.ux-school .ux-course-saving{display:block;font-size:.92em;margin-top:calc(4 * var(--ux-u))}
body.ux-school .ux-course-actions{display:flex;flex-direction:column;align-items:flex-start;gap:calc(7 * var(--ux-u));margin-top:auto;padding-top:calc(16 * var(--ux-u))}
body.ux-school .ux-course-actions .ux-button{min-width:calc(106 * var(--ux-u))}
body.ux-school .ux-course-overview{padding:calc(40 * var(--ux-u)) 0 calc(50 * var(--ux-u))}
body.ux-school .ux-course-overview h1{margin-bottom:calc(15 * var(--ux-u))}
body.ux-school .ux-subtitle{text-align:center;font-size:calc(15 * var(--ux-u));line-height:1.35;margin:0 auto calc(38 * var(--ux-u));max-width:calc(740 * var(--ux-u))}
body.ux-school .ux-detail-art{width:100%;aspect-ratio:1.684;margin-bottom:calc(32 * var(--ux-u))}
body.ux-school .ux-course-overview .ux-reading>h2{font-size:calc(20 * var(--ux-u));margin-bottom:calc(25 * var(--ux-u))}
body.ux-school .ux-course-overview .ux-reading>p{font-size:calc(15 * var(--ux-u));line-height:1.35;margin-bottom:calc(24 * var(--ux-u));text-align:justify}
body.ux-school .ux-course-overview .ux-facts{font-size:calc(15 * var(--ux-u));margin:calc(25 * var(--ux-u)) 0 0;line-height:1.24}
body.ux-school .ux-instructor-section{padding:calc(45 * var(--ux-u)) 0 calc(55 * var(--ux-u));background:var(--ux-pink)}
body.ux-school .ux-instructor-grid{display:grid;grid-template-columns:185fr 425fr;align-items:start;gap:calc(45 * var(--ux-u));width:calc(655 * var(--ux-u));transform:translateX(calc(25 * var(--ux-u)))}
body.ux-school .ux-instructor-portrait{width:calc(185 * var(--ux-u));height:calc(185 * var(--ux-u));border-radius:50%;object-fit:cover;object-position:50% 30%}
body.ux-school .ux-instructor-label{font-size:calc(23 * var(--ux-u));margin:0 0 calc(12 * var(--ux-u))}
body.ux-school .ux-instructor-grid h2{font-size:calc(23 * var(--ux-u));margin:0 0 calc(3 * var(--ux-u))}
body.ux-school .ux-instructor-role{font-size:calc(15 * var(--ux-u));margin-bottom:calc(24 * var(--ux-u))}
body.ux-school .ux-instructor-grid p:not(.ux-instructor-label):not(.ux-instructor-role){font-size:calc(15 * var(--ux-u));line-height:1.36;text-align:justify;margin-bottom:calc(22 * var(--ux-u))}
body.ux-school .ux-instructor-grid p:last-child{margin-bottom:0}
body.ux-school .ux-gallery-section{padding:calc(42 * var(--ux-u)) 0 calc(20 * var(--ux-u))}
body.ux-school .ux-gallery-section .ux-shell{width:calc(850 * var(--ux-u))}
body.ux-school .ux-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28 * var(--ux-u))/3);gap:calc(14 * var(--ux-u));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
body.ux-school .ux-gallery::-webkit-scrollbar{display:none}
body.ux-school .ux-gallery-item{display:block;position:relative;aspect-ratio:1.42;border:0;padding:0;background:transparent;overflow:hidden;border-radius:calc(12 * var(--ux-u))}
body.ux-school .ux-gallery img{width:100%;height:auto;aspect-ratio:1.42;object-fit:cover;transition:transform .15s}
body.ux-school .ux-gallery-item:hover img{transform:scale(1.025)}
body.ux-school .ux-gallery-item img[src*="stop-motion-gallery-1"]{position:absolute;max-width:none;width:227.839%;height:331.276%;aspect-ratio:auto;left:-111.355%;top:-163.964%}
body.ux-school .ux-gallery-item img[src*="stop-motion-gallery-2"]{position:absolute;max-width:none;width:110.662%;height:209.089%;aspect-ratio:auto;left:-1.103%;top:-71.745%}
body.ux-school .ux-gallery-item img[src*="stop-motion-gallery-3"]{position:absolute;max-width:none;width:100%;height:189.583%;aspect-ratio:auto;left:-.733%;top:-32.813%}
body.ux-school .ux-gallery-item img[src*="3d-sculpting-gallery-2"]{position:absolute;max-width:none;width:100%;height:174.129%;aspect-ratio:auto;left:0;top:-9.232%}
body.ux-school .ux-gallery-item{scroll-snap-align:start;min-width:0}
body.ux-school .ux-gallery-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:calc(16 * var(--ux-u))}
body.ux-school .ux-gallery-controls>button{border:0;border-radius:50%;background:var(--ux-panel);color:white;width:40px;height:40px;font-size:28px;line-height:1}
body.ux-school .ux-gallery-controls>button:disabled{opacity:.4;cursor:default}
body.ux-school .ux-gallery-controls button:focus-visible{outline:2px solid var(--ux-yellow);outline-offset:3px}
body.ux-school .ux-gallery-dots{display:flex;justify-content:center;gap:calc(6 * var(--ux-u));margin:0;flex-wrap:wrap}
body.ux-school .ux-gallery-dots button{width:calc(16 * var(--ux-u));height:calc(20 * var(--ux-u));border:0;background:transparent;position:relative;padding:0}
body.ux-school .ux-gallery-dots button::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(11 * var(--ux-u));height:calc(11 * var(--ux-u));background:#d9d9d9;border-radius:50%}
body.ux-school .ux-gallery-dots button[aria-current="true"]::after{background:var(--ux-bright-pink)}
body.ux-school .ux-packages{background:var(--ux-pink);padding:calc(40 * var(--ux-u)) 0 calc(54 * var(--ux-u))}
body.ux-school .ux-package-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(35 * var(--ux-u))}
body.ux-school .ux-package{background:var(--ux-purple);border-radius:calc(20 * var(--ux-u));padding:calc(22 * var(--ux-u));text-align:center;display:flex;flex-direction:column;min-width:0}
body.ux-school .ux-package-art{display:grid;grid-template-columns:minmax(0,1fr) calc(40 * var(--ux-u)) minmax(0,1fr);align-items:center;margin-bottom:calc(20 * var(--ux-u))}
body.ux-school .ux-package-art>div{aspect-ratio:1;overflow:hidden;border-radius:calc(12 * var(--ux-u))}
body.ux-school .ux-package-art>span{font-size:calc(48 * var(--ux-u));line-height:1;font-weight:bold}
body.ux-school .ux-package h3{font-size:calc(16 * var(--ux-u));font-weight:400!important;margin:0;line-height:1.3}
body.ux-school .ux-package h3 span{color:var(--ux-yellow)}
body.ux-school .ux-package p{font-size:calc(16 * var(--ux-u));margin:0 0 calc(23 * var(--ux-u))}
body.ux-school .ux-package-tuition{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;background:white;color:#63399e;border-radius:calc(8 * var(--ux-u));padding:calc(6 * var(--ux-u)) calc(9 * var(--ux-u));font-size:calc(14 * var(--ux-u));margin-top:auto;margin-bottom:calc(8 * var(--ux-u));min-height:calc(42 * var(--ux-u))}
body.ux-school [data-package-price]{display:inline-flex;gap:4px;flex-wrap:wrap}
body.ux-school .ux-package-saving{background:var(--ux-bright-pink);border-radius:calc(5 * var(--ux-u));color:white;padding:calc(7 * var(--ux-u));font-size:calc(11 * var(--ux-u));font-weight:700;white-space:nowrap}
body.ux-school .ux-package>.ux-button{width:100%;min-height:calc(43 * var(--ux-u))}
body.ux-school .ux-package-discount{text-align:left;padding:10px;background:#f3edf9;border-radius:6px;color:#63399e}
body.ux-school .ux-curriculum{padding:calc(42 * var(--ux-u)) 0 calc(64 * var(--ux-u));background:#502e80}
body.ux-school .ux-curriculum .ux-reading{width:calc(790 * var(--ux-u))}
body.ux-school .ux-curriculum-summary{background:var(--ux-pink);padding:calc(16 * var(--ux-u));border-radius:calc(6 * var(--ux-u));margin:calc(36 * var(--ux-u)) 0 calc(14 * var(--ux-u))}
body.ux-school .ux-curriculum-summary strong{display:block;font-size:calc(18 * var(--ux-u))}
body.ux-school .ux-curriculum-summary span{display:block;font-size:calc(15 * var(--ux-u));margin-top:calc(3 * var(--ux-u))}
body.ux-school .ux-lessons{display:flex;flex-direction:column;gap:calc(14 * var(--ux-u))}
body.ux-school .ux-lesson{background:var(--ux-purple);border-radius:calc(6 * var(--ux-u));overflow:hidden}
body.ux-school .ux-lesson summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:calc(22 * var(--ux-u));list-style:none;padding:calc(16 * var(--ux-u))}
body.ux-school .ux-lesson summary::-webkit-details-marker{display:none}
body.ux-school .ux-lesson summary strong{font-size:calc(16 * var(--ux-u));line-height:1.3;display:block}
body.ux-school .ux-lesson summary:hover{background:#8058b2}
body.ux-school .ux-lesson summary:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:-3px}
body.ux-school .ux-lesson-description{display:block;font-size:calc(14 * var(--ux-u));line-height:1.35;margin-top:calc(7 * var(--ux-u))}
body.ux-school .ux-chevron{width:calc(12 * var(--ux-u));height:calc(12 * var(--ux-u));flex:0 0 calc(12 * var(--ux-u));border:solid #502e80;border-width:0 3px 3px 0;transform:rotate(45deg);margin:0 3px 6px 0}
body.ux-school details[open] .ux-chevron{transform:rotate(225deg);margin-bottom:0}
body.ux-school .ux-lesson-body{background:var(--ux-pink);padding:calc(22 * var(--ux-u)) calc(16 * var(--ux-u));font-size:calc(15 * var(--ux-u));line-height:1.4}
body.ux-school .ux-lesson-body ul{list-style:none;margin:0;padding:0}
body.ux-school .ux-lesson-body li{display:flex;align-items:flex-start;gap:calc(10 * var(--ux-u));margin:calc(5 * var(--ux-u)) 0}
body.ux-school .ux-lesson-body .icon{width:calc(15 * var(--ux-u));height:calc(15 * var(--ux-u));margin-top:calc(3 * var(--ux-u))}
body.ux-school .ux-lesson-body .ux-milestone{border-top:1px solid #ffffff50;margin:calc(20 * var(--ux-u)) 0 0;padding-top:calc(16 * var(--ux-u))}
body.ux-school .ux-benefits{background:var(--ux-bright-pink);padding:calc(48 * var(--ux-u)) 0 calc(54 * var(--ux-u));scroll-margin-top:80px}
body.ux-school .ux-benefits h2{margin-bottom:calc(38 * var(--ux-u))}
body.ux-school .ux-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(18 * var(--ux-u))}
body.ux-school .ux-benefit-grid figure{margin:0;min-width:0;text-align:center}
body.ux-school .ux-benefit-image{width:100%;aspect-ratio:1.185;overflow:hidden;border-radius:calc(12 * var(--ux-u));position:relative}
body.ux-school .ux-benefit-image img{width:100%;height:100%;object-fit:cover}
body.ux-school .ux-benefit-hands-on img{position:absolute;width:312.5%;max-width:none;height:auto;left:-73%;top:-73%}
body.ux-school .ux-benefit-certificate .ux-benefit-image{background:#fbe7f2}
body.ux-school .ux-benefit-certificate img{object-fit:contain;transform:scale(2.2)}
body.ux-school .ux-benefit-grid figcaption{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(58 * var(--ux-u));font-size:calc(15 * var(--ux-u));line-height:1.25;font-weight:600;background:var(--ux-panel);border-radius:calc(10 * var(--ux-u));padding:calc(10 * var(--ux-u)) calc(8 * var(--ux-u));margin-top:calc(14 * var(--ux-u))}
/* Payment options and contact now form two distinct bands, as in the supplied UI. */
body.ux-school .ux-payment-section{background:var(--ux-purple);padding:calc(48 * var(--ux-u)) 0 calc(45 * var(--ux-u))}
body.ux-school :is(.ux-payment-section,.ux-footer)>.ux-shell{width:calc(815 * var(--ux-u))}
body.ux-school .ux-payment-grid{display:grid;grid-template-columns:minmax(0,310fr) minmax(0,380fr);column-gap:calc(110 * var(--ux-u));row-gap:calc(18 * var(--ux-u));grid-template-areas:"heading heading" "terms terms" "methods methods" "status status";align-items:start}
body.ux-school .ux-payment-course .ux-payment-grid{grid-template-areas:"purchase terms" "heading heading" "methods methods" "status status"}
body.ux-school .ux-payment-grid>.ux-payment-heading{grid-area:heading;margin:0;font-size:calc(23 * var(--ux-u));text-align:left}
body.ux-school .ux-payment-course .ux-payment-heading{margin-top:calc(18 * var(--ux-u))}
body.ux-school .ux-payment-section h2{font-size:calc(23 * var(--ux-u));line-height:1.28;margin:0 0 calc(25 * var(--ux-u))}
body.ux-school .ux-purchase{grid-area:purchase;min-width:0}
body.ux-school .ux-purchase h2{margin-bottom:calc(20 * var(--ux-u))}
body.ux-school .ux-purchase h2 span{display:block}
body.ux-school .ux-buy-now{width:100%;font-size:calc(18 * var(--ux-u));min-height:calc(39 * var(--ux-u));font-weight:600}
body.ux-school .ux-purchase-facts{font-size:calc(18 * var(--ux-u));line-height:1.55;margin:calc(22 * var(--ux-u)) 0 0}
body.ux-school .ux-purchase-facts strong{font-weight:700!important}
body.ux-school .ux-purchase .ux-course-saving{font-size:calc(15 * var(--ux-u));font-weight:600}
body.ux-school .ux-payment-methods{grid-area:methods;width:100%;min-width:0}
body.ux-school .ux-payment-terms{grid-area:terms;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(50 * var(--ux-u));align-items:stretch}
body.ux-school .ux-payment-course .ux-payment-terms{grid-template-columns:1fr;gap:calc(24 * var(--ux-u));padding-top:calc(6 * var(--ux-u))}
body.ux-school .ux-installments{display:flex;align-items:center;gap:calc(13 * var(--ux-u));padding:calc(16 * var(--ux-u)) calc(14 * var(--ux-u));border-radius:calc(6 * var(--ux-u));background:var(--ux-panel);min-height:calc(90 * var(--ux-u))}
body.ux-school .ux-installments>.icon{width:calc(44 * var(--ux-u));height:calc(44 * var(--ux-u));flex-shrink:0}
body.ux-school .ux-installments strong{display:block;color:var(--ux-yellow);font-size:calc(18 * var(--ux-u));line-height:1.3;font-weight:600!important}
body.ux-school .ux-installments span{display:block;font-size:calc(15 * var(--ux-u));line-height:1.35;margin-top:calc(4 * var(--ux-u))}
body.ux-school .ux-payment-status{grid-area:status;text-align:center;font-size:12px;line-height:1.5;margin:0;opacity:.9}
body.ux-school .ux-ssl-banner{margin:0;padding:0;background:#fff;border-radius:calc(6 * var(--ux-u));overflow:hidden}
body.ux-school .ux-ssl-banner picture{display:block;width:100%}
body.ux-school .ux-ssl-banner img{display:block;width:100%;height:auto;object-fit:contain}
body.ux-school .ux-footer{background:var(--ux-panel);padding:calc(62 * var(--ux-u)) 0 calc(30 * var(--ux-u));color:#fff}
body.ux-school .ux-footer-grid{display:grid;grid-template-columns:minmax(0,310fr) minmax(0,380fr);gap:calc(110 * var(--ux-u));margin-bottom:calc(34 * var(--ux-u))}
body.ux-school .ux-footer-grid>div{min-width:0}
body.ux-school .ux-footer .ux-logo{width:calc(330 * var(--ux-u));max-width:calc(100% + 20 * var(--ux-u));margin:calc(-18 * var(--ux-u)) 0 calc(-6 * var(--ux-u)) calc(-10 * var(--ux-u))}
body.ux-school .ux-tagline{font-size:calc(20 * var(--ux-u));font-style:italic;margin:0 0 calc(60 * var(--ux-u));white-space:normal}
body.ux-school .ux-footer h2{font-size:calc(24 * var(--ux-u));font-weight:600!important;margin:0 0 calc(27 * var(--ux-u))}
body.ux-school .ux-footer-brand h2{margin-bottom:calc(20 * var(--ux-u))}
body.ux-school .ux-footer address{font-style:normal;margin:0 0 calc(17 * var(--ux-u));font-size:calc(16 * var(--ux-u));line-height:1.3}
body.ux-school .ux-contact-link{display:block;text-decoration:none;font-size:calc(16 * var(--ux-u));line-height:1.3;overflow-wrap:anywhere}
body.ux-school .ux-contact-link:hover{text-decoration:underline}
body.ux-school .ux-footer-social{display:flex;gap:calc(9 * var(--ux-u));margin-top:calc(25 * var(--ux-u))}
body.ux-school .ux-footer-social a{display:flex;justify-content:center;align-items:center;border-radius:50%;width:calc(38 * var(--ux-u));height:calc(38 * var(--ux-u));background:var(--ux-purple)}
body.ux-school .ux-footer-social .icon{width:calc(23 * var(--ux-u));height:calc(23 * var(--ux-u))}
body.ux-school .ux-subscribe{display:flex;width:100%;max-width:100%;height:calc(40 * var(--ux-u))}
body.ux-school .ux-subscribe input{background:#fff;border:0;border-radius:calc(8 * var(--ux-u)) 0 0 calc(8 * var(--ux-u));color:#6c6472;padding:calc(12 * var(--ux-u));min-width:0;width:100%;font-size:calc(14 * var(--ux-u));opacity:1}
body.ux-school .ux-subscribe button{display:grid;place-items:center;background:var(--ux-bright-pink);border:0;border-radius:0 calc(8 * var(--ux-u)) calc(8 * var(--ux-u)) 0;color:white;min-width:calc(38 * var(--ux-u));--ux-check-color:var(--ux-bright-pink)}
body.ux-school .ux-subscribe .icon{width:calc(19 * var(--ux-u));height:calc(19 * var(--ux-u))}
body.ux-school .ux-subscribe button:disabled{cursor:wait;opacity:.65}
body.ux-school .ux-subscribe-note{font-size:14px;line-height:1.5;margin:10px 0 0;text-align:left}
body.ux-school #school-subscribe-status:empty{display:none}
body.ux-school .ux-payments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(6 * var(--ux-u))}
body.ux-school .ux-payments>div{height:calc(49 * var(--ux-u));background:#fff;padding:calc(4 * var(--ux-u));border-radius:calc(3 * var(--ux-u));overflow:hidden;display:flex;align-items:center;justify-content:center}
body.ux-school .ux-payments img{width:100%;height:100%;object-fit:contain}
body.ux-school .ux-payment-rocket img{transform:scale(1.5)}
body.ux-school .ux-payment-nagad img{transform:scale(2)}
body.ux-school .ux-refund{margin:0;background:var(--ux-panel);border:0;border-radius:calc(6 * var(--ux-u));color:var(--ux-yellow);min-height:calc(82 * var(--ux-u));width:100%;font-size:calc(22 * var(--ux-u));font-weight:600;line-height:1.3;padding:calc(14 * var(--ux-u))}
body.ux-school .ux-sister{text-align:left;margin:calc(43 * var(--ux-u)) 0 0;font-size:calc(15 * var(--ux-u));line-height:1.4}
body.ux-school .ux-sister a{text-decoration:underline;text-underline-offset:2px}
body.ux-school .ux-sister a:hover{text-decoration:underline}
body.ux-school .ux-preview-note{text-align:center;font-size:12px;line-height:1.6;opacity:.8;margin:0}
body.ux-school dialog.ux-dialog{border:0;padding:calc(35 * var(--ux-u));background:var(--ux-pink);color:#fff;width:calc(800 * var(--ux-u));max-width:calc(100vw - 40px);max-height:calc(100dvh - 60px);overflow:auto;border-radius:0;box-shadow:none;outline:none}
body.ux-school .ux-dialog::backdrop{background:rgba(39,0,63,.55)}
body.ux-school .ux-modal-grid{display:grid;grid-template-columns:293fr 400fr;gap:calc(35 * var(--ux-u));align-items:start}
body.ux-school .ux-modal-art{width:100%;aspect-ratio:1.684}
body.ux-school .ux-modal-instructor{display:flex;align-items:flex-start;gap:calc(20 * var(--ux-u));margin-top:calc(20 * var(--ux-u))}
body.ux-school .ux-modal-instructor img{width:calc(64 * var(--ux-u));height:calc(64 * var(--ux-u));border-radius:50%;object-fit:cover;object-position:50% 30%;flex-shrink:0}
body.ux-school .ux-modal-instructor small,body.ux-school .ux-modal-instructor strong,body.ux-school .ux-modal-instructor span{display:block}
body.ux-school .ux-modal-instructor small{font-size:calc(15 * var(--ux-u))}
body.ux-school .ux-modal-instructor strong{font-size:calc(15 * var(--ux-u));margin:calc(5 * var(--ux-u)) 0 calc(3 * var(--ux-u))}
body.ux-school .ux-modal-instructor span{font-size:calc(14 * var(--ux-u));line-height:1.25}
body.ux-school .ux-modal-copy h2{font-size:calc(23 * var(--ux-u));line-height:1.18;margin:0 0 calc(18 * var(--ux-u))}
body.ux-school .ux-modal-copy p{font-size:calc(15 * var(--ux-u));line-height:1.35;text-align:justify;margin:0 0 calc(23 * var(--ux-u))}
body.ux-school .ux-modal-copy p:last-child{margin-bottom:0}
body.ux-school dialog.ux-notice{width:540px;padding:35px}
body.ux-school .ux-notice h2{font-size:28px;margin:0 0 20px}
body.ux-school .ux-notice p{font-size:17px}
body.ux-school dialog.ux-gallery-dialog{padding:20px 20px 10px;width:1100px;background:#2e203d}
body.ux-school .ux-gallery-dialog img{max-height:75dvh;width:100%;object-fit:contain}
body.ux-school .ux-gallery-dialog p{text-align:center;font-size:16px;margin:10px 0}
body.ux-school .cart-page,body.ux-school .cart-dialog{color:#272332}
/* Leave a tappable backdrop on phones now that the visible close icon is removed. */
body.ux-school .cart-dialog{width:min(460px,calc(100vw - 28px))}
body.ux-school .cart-page .content{max-width:1100px}
@media(max-width:900px){
 body.ux-school{--ux-u:1px;font-size:17px}
 body.ux-school .ux-shell{width:calc(100% - 48px)}
 body.ux-school .ux-reading{width:calc(100% - 64px)}
 body.ux-school .ux-hero-grid{gap:28px;grid-template-columns:1fr 1fr}
 body.ux-school .ux-hero-copy h1{font-size:30px}
 body.ux-school .ux-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}
 body.ux-school .ux-benefit-grid figcaption{font-size:17px}
 body.ux-school :is(.ux-payment-section,.ux-footer)>.ux-shell{width:calc(100% - 48px)}
 body.ux-school .ux-footer-grid,body.ux-school .ux-payment-grid{grid-template-columns:1fr 1fr;column-gap:38px}
 body.ux-school .ux-tagline{white-space:normal}
 body.ux-school .ux-instructor-grid{transform:none;grid-template-columns:185px minmax(0,1fr);gap:30px}
 body.ux-school .ux-course-row{grid-template-columns:38% minmax(0,1fr);gap:26px}
 body.ux-school .ux-modal-grid{gap:25px}
 body.ux-school .ux-modal-instructor{gap:14px}
}
/* Stack long course descriptions before the image column becomes a narrow
   portrait crop on small tablets. Keep the supplied square frame when stacked. */
@media(max-width:760px){
 body.ux-school .ux-package-grid{grid-template-columns:1fr;gap:24px}
 body.ux-school .ux-package{width:100%;max-width:480px;margin-inline:auto}
 body.ux-school .ux-course-row{grid-template-columns:1fr;gap:22px}
 body.ux-school .ux-list-art{height:auto}
}
@media(max-width:600px){
 body.ux-school .ux-shell,body.ux-school .ux-reading{width:calc(100% - 36px);max-width:calc(100% - 36px)}
 body.ux-school .ux-shell h1,body.ux-school .ux-shell>h2,body.ux-school .ux-reading>h2{font-size:30px;line-height:1.2}
 body.ux-school .ux-hero{padding:34px 0 50px}
 body.ux-school .ux-hero-grid{grid-template-columns:1fr;gap:35px}
 body.ux-school .ux-hero-copy h1{font-size:clamp(26px,7.6vw,34px)}
 body.ux-school .ux-hero-copy p{font-size:17px}
 body.ux-school .ux-hero-art{margin-bottom:15px}
 body.ux-school .ux-hero-art .ux-hero-badge{left:12px;bottom:-20px}
 body.ux-school .ux-button{font-size:15px;min-height:42px}
 body.ux-school .ux-about,body.ux-school .ux-seminars,body.ux-school .ux-course-list,body.ux-school .ux-course-overview,body.ux-school .ux-curriculum,body.ux-school .ux-instructor-section{padding-block:36px}
 body.ux-school .ux-about p,body.ux-school .ux-course-intro,body.ux-school .ux-course-copy>p,body.ux-school .ux-course-overview .ux-reading>p{font-size:16px;line-height:1.45;text-align:left}
 body.ux-school .ux-seminar-intro{font-size:19px;margin-bottom:28px}
 body.ux-school .ux-seminar-grid{grid-template-columns:1fr;gap:30px}
 body.ux-school .ux-seminar{width:100%;max-width:360px;margin:auto}
 body.ux-school .ux-seminar-actions{gap:15px}
 body.ux-school .ux-seminar-actions .ux-button{font-size:15px;min-height:42px;padding:9px 14px}
 body.ux-school .ux-course-row{grid-template-columns:1fr;gap:22px}
 body.ux-school .ux-course-copy h3{font-size:25px}
 body.ux-school .ux-facts,body.ux-school .ux-course-overview .ux-facts{font-size:16px;line-height:1.35;padding-left:18px}
 body.ux-school .ux-course-actions{gap:9px}
 body.ux-school .ux-subtitle{font-size:17px;margin-bottom:28px}
 body.ux-school .ux-detail-art{margin-bottom:28px}
 body.ux-school .ux-course-overview .ux-reading>h2{font-size:23px}
 body.ux-school .ux-instructor-grid{grid-template-columns:1fr;gap:24px}
 body.ux-school .ux-instructor-portrait{width:170px;height:170px}
 body.ux-school .ux-instructor-grid p:not(.ux-instructor-label):not(.ux-instructor-role){font-size:16px;line-height:1.45;text-align:left}
 body.ux-school .ux-gallery{gap:10px;grid-auto-columns:100%}
 body.ux-school .ux-gallery-dots{margin:0}
 body.ux-school .ux-lesson summary strong{font-size:17px}
 body.ux-school .ux-lesson-description{font-size:15px}
 body.ux-school .ux-lesson-body{font-size:16px}
 body.ux-school .ux-benefits{padding:36px 0}
 body.ux-school .ux-benefit-grid{gap:22px 14px}
 body.ux-school .ux-benefit-grid figcaption{font-size:14px;min-height:75px;padding:10px 5px;margin-top:12px}
 body.ux-school :is(.ux-payment-section,.ux-footer)>.ux-shell{width:calc(100% - 36px)}
 body.ux-school .ux-payment-section{padding:36px 0 24px}
 body.ux-school .ux-payment-grid{grid-template-columns:1fr;grid-template-areas:"heading" "terms" "methods" "status";gap:20px}
 body.ux-school .ux-payment-course .ux-payment-grid{grid-template-areas:"purchase" "terms" "heading" "methods" "status"}
 body.ux-school .ux-payment-methods{width:100%;margin-inline:auto}
 body.ux-school .ux-payment-grid>.ux-payment-heading{font-size:27px}
 body.ux-school .ux-payment-terms{width:100%;grid-template-columns:1fr;gap:16px;margin-inline:auto}
 body.ux-school .ux-payment-course .ux-payment-terms{gap:16px;padding-top:0}
 body.ux-school .ux-purchase{margin-bottom:15px}
 body.ux-school .ux-purchase h2{font-size:25px}
 body.ux-school .ux-buy-now{min-height:44px;font-size:18px}
 body.ux-school .ux-footer{padding-top:48px}
 body.ux-school .ux-footer-grid{grid-template-columns:1fr;gap:38px}
 body.ux-school .ux-footer .ux-logo{display:block;width:320px;max-width:100%;margin:0 auto}
 body.ux-school .ux-tagline{font-size:clamp(16px,4.6vw,18px);text-align:center;margin-bottom:38px}
 body.ux-school .ux-footer h2{font-size:27px;margin-bottom:22px}
 body.ux-school .ux-footer address,body.ux-school .ux-contact-link{font-size:18px}
 body.ux-school .ux-subscribe{width:100%;height:48px}
 body.ux-school .ux-subscribe input{font-size:16px}
 body.ux-school .ux-subscribe button{min-width:48px}
 body.ux-school .ux-footer-social a{width:44px;height:44px}
 body.ux-school .ux-payments>div{height:60px}
 body.ux-school .ux-refund{min-height:42px;font-size:18px}
 body.ux-school .ux-sister{margin-top:36px;font-size:16px}
 body.ux-school dialog.ux-dialog{max-width:calc(100vw - 36px);padding:24px;max-height:calc(100dvh - 48px)}
 body.ux-school .ux-modal-grid{grid-template-columns:1fr;gap:24px}
 body.ux-school .ux-modal-instructor strong,body.ux-school .ux-modal-instructor small{font-size:15px}
 body.ux-school .ux-modal-copy h2{font-size:25px;margin:0 0 18px}
 body.ux-school .ux-modal-copy p{font-size:16px;text-align:left;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){body.ux-school *{scroll-behavior:auto!important;transition:none!important}}