:root{--navy:#001a35;--yellow:#ffbc00;--ink:#132c43;--muted:#526477;--line:#dfe5e9;--cream:#f8f9f7}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--cream);line-height:1.5}
.shell{width:min(1200px,calc(100% - 80px));margin:auto}
header{background:var(--navy);color:white;border-bottom:1px solid #ffffff20}
.header-row{height:94px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;line-height:1.1;font-weight:800;font-size:15px;letter-spacing:.7px}
.brand img{border-radius:50%;width:48px;height:48px;object-fit:cover}
.brand strong{display:block;font-size:20px;color:var(--yellow);margin-top:3px}
nav{display:flex;gap:32px;font-size:14px}
nav a:hover,.header-help:hover{color:var(--yellow)}
.header-help{font-size:14px;border:1px solid #ffffff45;border-radius:7px;padding:11px 17px}
.header-help span{margin-left:15px}
.hero{background:var(--navy);color:white;padding-top:60px}
.hero-grid{display:grid;grid-template-columns:1.16fr 1fr;gap:75px;align-items:center}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;margin:0 0 24px}
h1{font-size:clamp(48px,5.4vw,76px);line-height:1.04;letter-spacing:-3.6px;margin:0 0 25px;font-weight:700}
h1 em{font-style:normal;color:var(--yellow)}
.lead{font-size:16px;color:#c1cfdd;max-width:430px;line-height:1.75;margin:0 0 28px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:38px;padding:16px 23px;border-radius:7px;font-weight:700;font-size:14px;border:0;transition:transform .2s,background .2s}
.yellow{background:var(--yellow);color:var(--navy)}
.yellow:hover{background:#ffd04a}
.navy{background:var(--navy);color:white}
.hero-note{font-size:11px;color:#a1b3c6;margin-top:15px}
.catalog{padding-top:78px;padding-bottom:75px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:32px}
h2{font-size:39px;letter-spacing:-1.5px;line-height:1.14;margin:0}
.section-heading .eyebrow{color:#667888;margin-bottom:14px}
.section-heading>p{color:var(--muted);font-size:14px;margin:0}
.text-link{display:inline-block;font-size:14px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:6px}
.contact{background:var(--yellow);padding:45px 0}
.contact-row{display:flex;justify-content:space-between;gap:30px;align-items:center}
.contact .eyebrow{margin-bottom:12px}
.contact h2{font-size:32px}
.contact p:last-child{font-size:14px;margin:14px 0 0}
footer{background:var(--navy);color:white;padding:44px 0 30px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-top>p{font-size:19px;font-weight:700}
.footer-top>p span{color:var(--yellow)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;padding:32px 0;border-bottom:1px solid #ffffff24}
.footer-links a:last-child{margin-left:auto}
.footer-links a:hover{color:var(--yellow)}
.legal{display:flex;justify-content:space-between;gap:30px;font-size:10px;color:#a2b5c6;padding-top:18px}
.legal>div:last-child{display:flex;gap:20px;align-items:start;padding-top:10px}
.legal a:hover{color:white}
@media(min-width:1450px){.hero{padding-top:75px}}
@media(max-width:1100px){.shell{width:calc(100% - 48px)}
.hero-grid{gap:40px}}
@media(max-width:760px){.shell{width:calc(100% - 36px)}
.header-row{height:auto;min-height:82px;flex-wrap:wrap;padding:15px 0;gap:16px}
.brand{font-size:12px}
.brand strong{font-size:17px}
.brand img{width:40px;height:40px}
nav{order:3;width:100%;justify-content:space-between;gap:12px;font-size:12px;padding-top:10px;border-top:1px solid #ffffff20}
.header-help{font-size:12px;padding:8px 12px}
.hero{padding-top:35px}
.hero-grid{grid-template-columns:1fr;gap:30px}
h1{font-size:54px;letter-spacing:-2.5px}
.lead{font-size:15px}
.catalog{padding-top:48px;padding-bottom:40px}
h2{font-size:30px;letter-spacing:-1px}
.section-heading>p{display:none}
.contact-row{flex-direction:column;align-items:start}
.contact h2{font-size:29px}
.footer-top{align-items:start;flex-direction:column}
.footer-top>p{font-size:17px}
.footer-links{gap:20px}
.footer-links a:last-child{margin-left:0;width:100%}
.legal{flex-direction:column;gap:5px}
.legal>div:last-child{flex-wrap:wrap}}
@media(max-width:360px){h1{font-size:48px}
.eyebrow{font-size:9px}}
.os-arrow{display:inline-block;width:1em;height:1em;min-width:1em;flex-shrink:0;vertical-align:-.12em;overflow:visible}
.button .os-arrow,.header-help .os-arrow,.text-link .os-arrow{width:1.4em;height:1.4em;min-width:1.4em;vertical-align:-.25em}
/* Shared geometry follows the main site; bundle-specific components use its palette. */
.button{min-height:0}.hero h1{font-family:Arial,Helvetica,sans-serif}.hero-actions{gap:25px}.hero .eyebrow{font-size:11px}.hero-note span{padding:0 8px}.desktop-break{display:none}h2{font-weight:700}.hero-stats{margin-top:55px;padding:23px 0 28px}.hero-stats strong{font-size:24px}.hero-stats span{font-size:12px;color:#bacbd9}.bundle-panel{background:#fffefa;border-radius:12px;box-shadow:14px 14px 0 #ffffff09}.mini-course{background:#e7efea;color:#295b45}.mini-course.design{background:#eee9f6;color:#664f82}.mini-course.code{background:#e7eef7;color:#30547e}.section{padding-block:75px}.course{border-radius:10px}.course-top{height:145px;padding:19px 22px;background:#e7efea;color:#295b45}.course[data-category=design] .course-top{background:#eee9f6;color:#664f82}.course[data-category=code] .course-top{background:#e7eef7;color:#30547e}.course-mark{font-size:50px}.course-copy{padding:22px}.course h3{font-size:21px;letter-spacing:-.5px;margin:0 0 8px}.course-copy>p:last-child{font-size:13px;min-height:39px}.course-link{margin:0 22px;padding-top:15px;font-size:12px}.course-link .os-arrow{color:var(--ink)}.filters button{font-size:12px;padding:10px 13px;border-radius:6px}.catalog-foot a{display:inline-flex;align-items:center;gap:15px}.join-section h2{font-size:45px}.contact h2{letter-spacing:-1.5px}.footer-top>p{line-height:1.5;margin:1em 0}.legal p{margin:1em 0;line-height:1.5}
/* FAQ structure and dimensions from the JavaScript course, with main-site colors. */
.faq{padding-top:0;display:grid;grid-template-columns:1fr 1.2fr;gap:90px}.faq .eyebrow{display:block;margin-bottom:24px}.faq details{border-top:0;border-bottom:1px solid var(--line);padding:0}.faq details:first-child{border-top:0}.faq summary{display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;padding:21px 0}.faq summary h3{flex:1;margin:0;font-size:16px;line-height:1.6;font-weight:700}.faq summary b{font-size:23px;font-weight:400;line-height:1.6}.faq details[open] summary b{transform:rotate(45deg)}.faq details p{font-size:14px;margin:0 30px 23px 0;line-height:1.6;color:var(--muted)}
@media(max-width:1100px){.faq{gap:45px}}
@media(max-width:760px){.section{padding-block:62px}.hero .eyebrow{font-size:11px}.hero-actions{gap:20px}.hero h1{font-size:54px;letter-spacing:-2.5px}.hero-stats{margin-top:30px}.bundle-panel{transform:none;max-width:430px;width:100%}.course-top{height:115px;padding:14px}.course-mark{font-size:40px}.course-copy{padding:16px}.course h3{font-size:18px}.course-copy>p:last-child{font-size:12px}.course-link{font-size:11px;margin:0 16px}.filters button{font-size:11px;padding:9px 10px}.join-section h2{font-size:36px}.faq{grid-template-columns:1fr;padding-top:0;gap:4px}.faq summary{gap:14px}.footer-top>p{width:auto;order:initial}.mobile-buy .button{gap:12px}.contact .button{gap:38px}}
@media(max-width:360px){.hero h1{font-size:48px}.course-grid{grid-template-columns:1fr}.course-top{height:125px}.eyebrow{font-size:9px}}
.hero h1>span{color:var(--yellow)}.hero .eyebrow>span{height:6px;width:6px;flex:0 0 6px;background:var(--yellow);border-radius:50%;display:inline-block}

.faq{margin-top:75px}@media(max-width:760px){.faq{margin-top:62px}}

/* Purchase bar is available on both desktop and mobile, independently of browser. */
body{padding-bottom:90px}.mobile-buy{display:flex;position:fixed;inset:auto 0 0;align-items:center;justify-content:space-between;gap:20px;padding:14px max(40px,calc((100vw - 1200px)/2));background:#fff;box-shadow:0 -4px 25px #001a3512;border-top:1px solid var(--line);z-index:10}.mobile-buy strong{display:block;font-size:16px}.mobile-buy span{display:block;font-size:13px;color:var(--muted)}.mobile-buy .button{gap:24px}.mobile-buy .button span{font-size:inherit;color:inherit}.legal>div:first-child{max-width:720px}
@media(max-width:760px){body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}.mobile-buy{gap:12px;padding:11px 18px calc(11px + env(safe-area-inset-bottom))}.mobile-buy strong{font-size:14px}.mobile-buy span{font-size:12px}.mobile-buy .button{gap:12px;font-size:13px;padding:11px 15px}.header-help{white-space:nowrap}}
@media(max-width:360px){.mobile-buy .button{gap:8px;padding-inline:10px}.mobile-buy strong{font-size:13px}}
@media print{.mobile-buy{display:none}body{padding-bottom:0}}

.hero .eyebrow{display:flex;align-items:center;gap:10px}.hero .eyebrow>span{align-self:center}.catalog-foot a .os-arrow{width:1.4em;height:1.4em;min-width:1.4em}.mobile-buy>div{flex-shrink:0}.mobile-buy .button{min-width:0}@media(max-width:760px){.mobile-buy .button{gap:10px;max-width:230px;text-align:center}.mobile-buy>div{max-width:105px}}

.support-contact{margin-top:-36px;margin-bottom:64px}.support-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.support-contact h3{font-family:inherit;font-style:normal;font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.4;margin:0 0 8px}.support-contact p{font-family:inherit;font-style:normal;font-size:14px;line-height:1.7;color:var(--muted);margin:0}.support-email{display:inline-flex;align-items:center;gap:16px;flex-shrink:0;font-family:inherit;font-size:14px;font-weight:700;line-height:1.5;border-bottom:1px solid var(--ink);padding:0 0 4px;text-decoration:none;overflow-wrap:anywhere;min-width:0}.support-email>span{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:24px;flex:0 0 24px;margin:0}.support-email .os-arrow{display:block;width:24px;height:24px;min-width:24px;vertical-align:initial}.support-email:hover{opacity:.75}@media(max-width:760px){.support-contact{margin-top:-16px;margin-bottom:40px}.support-contact-inner{flex-direction:column;align-items:flex-start;gap:18px;padding:24px 0}.support-contact h3{font-size:19px}.support-email{font-size:13px;max-width:100%;flex-shrink:1}}

/* Mobile rhythm and accessible dialog focus. */
#payment-title:focus{outline:none}.payment-close:focus:not(:focus-visible){outline:none}.payment-close:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media(max-width:760px){.ticker{display:none}.section-heading{gap:24px}.paths{gap:32px}.paths article{grid-template-columns:32px minmax(0,1fr);column-gap:16px}.paths h3{line-height:1.25;margin-bottom:16px}.paths p{margin-bottom:20px}.format{gap:32px}.steps article:last-child{padding-bottom:0}.payment-header{gap:12px}.payment-header h2{line-height:1.35}.catalog-foot a{gap:12px;max-width:100%;line-height:1.5}.support-contact-inner{gap:20px}}