:root {
  --primary: #37cdcc;
  --primary-hover: #238584;
  --primary-dark: #0e8180;
  --decorative: rgba(55, 205, 204, .11);
  --accent: #fbbc34;
  --coral: #ff7f73;
  --body: #646464;
  --title: #242424;
  --border: rgba(0, 0, 0, .105);
  --surface: #f5f3f3;
  --shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--body); background: #fff; font: 400 16px/1.6 Roboto, Arial, sans-serif; }
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary-dark); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, h4 { color: var(--title); line-height: 1.2; margin-top: 0; }
p { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.container-wide { width: min(1280px, calc(100% - 32px)); margin-inline: auto; }
.container-narrow { width: min(1000px, calc(100% - 32px)); margin-inline: auto; }
.site-main { min-height: 55vh; padding-top: 40px; }
.lead { color: #687080; font-size: 1.05rem; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 42px; border: 1px solid transparent; border-radius: 4px; padding: .65rem 1.15rem; cursor: pointer; font-weight: 600; line-height: 1.2; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: #fff; background: var(--primary); }
.button--primary:hover { color: #fff; background: var(--primary-hover); }
.button--primary-dark { color: #fff; background: var(--primary-dark); }
.button--primary-dark:hover { color: #fff; background: #0a6968; }
.button--coral { color: #fff; background: var(--coral); }
.button--coral:hover { color: #fff; background: #ff6b5e; }
.button--outline { border-color: #d1d5db; color: #4b5563; background: #fff; }
.button--outline:hover { color: var(--title); border-color: #9ca3af; background: #f9fafb; }
.button--muted { color: #fff; background: #9ca3af; }
.button--danger { color: #fff; background: #dc2626; }
.button--danger:hover { color: #fff; background: #b91c1c; }
.button--small { min-height: 36px; padding: .5rem .8rem; font-size: .85rem; }
.button--block { width: 100%; }

.alert { border: 1px solid; border-radius: 6px; margin-bottom: 20px; padding: 12px 16px; }
.alert--success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.alert--error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.alert--warning { color: #92400e; border-color: #fde68a; background: #fffbeb; }

/* Header and navigation */
.site-header { position: relative; z-index: 100; border-bottom: 1px solid #e5e7eb; background: #fff; }
.site-header__social { border-bottom: 1px solid #edf0f2; background: #f8fafb; }
.site-header__social-inner { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 34px; }
.site-header__social-inner > span { color: #667085; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-block: 18px; }
.site-logo { flex: 0 0 210px; }
.site-logo img { width: 210px; }
.site-nav { display: flex; align-items: center; gap: 22px; color: #111; font-size: 13px; font-weight: 700; }
.site-nav > a, .nav-dropdown > button { border: 0; background: none; padding: 12px 0; cursor: pointer; white-space: nowrap; }
.site-nav > a:hover, .site-nav .active, .nav-dropdown > button:hover { color: var(--primary-dark); }
.nav-dropdown { position: relative; }
.nav-dropdown__menu { position: absolute; top: 100%; left: -18px; display: none; min-width: 230px; border: 1px solid #eee; border-radius: 6px; background: #fff; padding: 8px; box-shadow: var(--shadow); }
.nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown.open .nav-dropdown__menu { display: block; }
.nav-dropdown__menu a { display: block; border-radius: 4px; padding: 9px 12px; font-weight: 500; }
.nav-dropdown__menu a:hover { background: var(--decorative); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.cart-button { position: relative; border: 0; background: transparent; padding: 9px; cursor: pointer; font-size: 20px; }
.cart-button span { position: absolute; top: -1px; right: -3px; display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--coral); font-size: 10px; font-weight: 700; }
.mobile-menu-button { display: none; width: 42px; border: 0; background: transparent; padding: 7px; }
.mobile-menu-button span { display: block; height: 2px; margin: 5px 0; background: #222; }

/* Footer, cart, cookies */
.site-footer { margin-top: 80px; border-top: 4px solid var(--primary); background: #f9fafb; }
.footer-grid { display: grid; grid-template-columns: 1.15fr .62fr .88fr .95fr; gap: 42px; padding: 45px 0; }
.footer-grid h2 { font-size: 26px; }
.footer-grid h3 { font-size: 20px; font-weight: 500; }
.footer-grid p { color: #4b5563; font-size: 17px; text-align: justify; }
.footer-grid nav { display: flex; flex-direction: column; gap: 8px; }
.badge-carousel { position: relative; min-height: 260px; overflow: hidden; }
.badge-carousel img { position: absolute; inset: 0; width: 250px; margin: auto; opacity: 0; transition: opacity .65s; }
.badge-carousel img.active { opacity: 1; }
.footer-social p { margin-bottom: 18px; font-size: 15px; line-height: 1.65; text-align: left; }
.social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.social-link { --social-color: var(--primary-dark); display: flex; align-items: center; gap: 9px; min-height: 46px; border: 1px solid #e1e5e9; border-radius: 9px; color: #374151; background: #fff; padding: 8px 10px; font-size: 13px; font-weight: 600; transition: color .2s, background-color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.social-link:hover, .social-link:focus-visible { border-color: var(--social-color); color: #fff; background: var(--social-color); transform: translateY(-2px); box-shadow: 0 7px 18px color-mix(in srgb, var(--social-color) 24%, transparent); }
.social-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--social-color) 28%, transparent); outline-offset: 2px; }
.social-link__icon { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; color: var(--social-color); }
.social-link:hover .social-link__icon, .social-link:focus-visible .social-link__icon { color: #fff; }
.social-link__icon svg, .social-link__icon img { width: 19px; height: 19px; }
.social-link__icon svg { fill: currentColor; }
.social-links--icons { display: flex; align-items: center; gap: 5px; }
.social-links--icons .social-link { min-width: 28px; min-height: 28px; border: 0; border-radius: 50%; background: transparent; padding: 3px; }
.social-links--icons .social-link:hover, .social-links--icons .social-link:focus-visible { background: #eaf1f3; transform: translateY(-1px); box-shadow: none; }
.social-links--icons .social-link__icon { width: 20px; height: 20px; }
.social-links--icons .social-link__icon img { width: 17px; height: 17px; }
.social-links--inline { grid-template-columns: repeat(2, minmax(150px, 220px)); justify-content: center; }
.social-link--linkedin { --social-color: #0a66c2; }
.social-link--instagram { --social-color: #c13584; }
.social-link--facebook { --social-color: #1877f2; }
.social-link--whatsapp { --social-color: #168c46; }
.site-footer__copyright { border-top: 1px solid #e5e7eb; background: #fff; padding: 20px; text-align: center; }
.cart-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.cart-drawer.open { visibility: visible; }
.cart-drawer__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
.cart-drawer.open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(430px, 92vw); height: 100%; background: #fff; padding: 24px; transform: translateX(100%); transition: transform .25s; }
.cart-drawer.open .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; margin-bottom: 18px; padding-bottom: 14px; }
.cart-drawer__header h2 { margin: 0; }
.cart-drawer__header button { border: 0; background: transparent; cursor: pointer; font-size: 32px; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; border-bottom: 1px solid #eee; padding: 14px 0; }
.cart-item strong, .cart-item small { display: block; }
.cart-item button { align-self: center; border: 0; color: #dc2626; background: transparent; cursor: pointer; }
.cart-empty { padding: 50px 10px; text-align: center; }
.cart-drawer__footer { margin-top: auto; border-top: 1px solid #eee; padding-top: 18px; }
.cart-drawer__footer > div { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 18px; }
.cart-drawer__footer .button { width: 100%; }
.cookie-banner { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1100; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #fff; padding: 16px 32px; box-shadow: 0 0 12px rgba(0,0,0,.18); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; }
.cookie-banner p a { font-weight: 700; }
.cookie-banner > div { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.scroll-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; background: var(--primary-dark); cursor: pointer; box-shadow: var(--shadow); }
.scroll-top.show { display: block; }

/* Home and public pages */
.hero-intro { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 0 8% 20px; }
.hero-intro > img { width: 250px; flex: 0 0 auto; }
.hero-intro > div { max-width: 880px; }
.hero-intro h1 { margin-bottom: 16px; font-size: clamp(25px, 3vw, 48px); font-weight: 400; }
.hero-intro__subtitle { color: #111; font-size: clamp(20px, 2vw, 24px); }
.hero-intro > div > p:last-child { font-size: 18px; }
.hero-intro p, .home-about p, .wave-section p, .service-detail p, .course-detail .rich-text p, .program-overview .rich-text p, .legal-content p, .legal-content li { text-align: justify; }
.services-ribbon { position: relative; margin-top: 30px; background: var(--primary); padding: 50px 0; }
.services-ribbon h2 { color: #fff; text-align: center; font-size: clamp(32px, 4vw, 37px); text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.services-ribbon--compact { margin-bottom: 20px; }
.service-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.service-cards a { display: flex; min-height: 206px; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: 12px; color: #333; background: #fff; padding: 22px; text-align: center; font-size: 21px; font-weight: 500; }
.service-cards a:hover { color: var(--primary-dark); transform: translateY(-3px); }
.service-cards span { color: var(--accent); font-size: 54px; line-height: 1; }
.triangle { position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 25px solid transparent; border-left: 25px solid transparent; }
.triangle--top { top: 0; border-top: 25px solid #fff; }
.triangle--bottom { bottom: -25px; border-top: 25px solid var(--primary); }
.home-about { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; padding-top: 140px; padding-bottom: 80px; }
.home-about__image { display: flex; justify-content: center; }
.home-about img { width: min(500px, 100%); border-radius: 12px; }
.home-about h2, .service-detail h2 { color: var(--primary-dark); font-size: clamp(30px, 4vw, 48px); }
.home-about p { color: #222; font-size: 18px; }
.wave-section { position: relative; background: var(--decorative); padding: 55px 0; }
.wave-section::before, .wave-section::after { content: ''; position: absolute; right: 0; left: 0; height: 26px; background: linear-gradient(173deg, transparent 49%, rgba(55,205,204,.12) 50%); pointer-events: none; }
.wave-section::before { top: -25px; }
.wave-section::after { bottom: -25px; transform: rotate(180deg); }
.wave-section h2 { color: var(--primary-dark); font-size: clamp(28px, 4vw, 44px); text-transform: uppercase; }
.wave-section p, .service-detail p { max-width: 900px; color: #222; font-size: 18px; }
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; margin: 10px 0; padding-left: 34px; color: #222; font-size: 18px; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: var(--primary); font-size: 22px; font-weight: 800; }
.provider-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-top: 150px; text-align: center; }
.provider-badges > div { display: grid; grid-template-rows: 190px auto; align-items: start; }
.provider-badges a { display: flex; height: 190px; align-items: center; justify-content: center; }
.provider-badges img { width: auto; height: 170px; max-width: 100%; margin: auto; object-fit: contain; }
.provider-badges p { color: #222; font-size: 20px; }
.credential-links a { color: var(--primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s, transform .65s; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.about-lead { display: grid; grid-template-columns: 350px 1fr; align-items: center; gap: 45px; padding: 10px 6% 50px; }
.about-lead img { max-height: 430px; margin: auto; }
.about-lead h1 { font-size: clamp(28px, 4vw, 48px); font-weight: 400; }
.about-lead p { color: #646464; font-size: 17px; text-align: justify; }
.accent-band { color: #111; background: var(--primary); padding: 18px 0; font-size: 19px; }
.mission { padding: 55px 0 20px; }
.mission h2 { font-size: 28px; }
.mission-list { list-style: none; padding: 0 0 0 20px; }
.mission-list li { position: relative; margin: 22px 0; padding-left: 55px; color: var(--primary-dark); font-size: 20px; font-weight: 700; }
.mission-list li::before { content: '✓'; position: absolute; left: 0; top: -7px; display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid var(--primary); border-radius: 50%; color: var(--primary-dark); }
.mission > p { color: #222; font-size: 19px; }
.section-eyebrow { display: inline-block; margin-bottom: 8px; color: var(--primary-dark); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.service-detail { padding-top: 75px; padding-bottom: 75px; }
.services-page .wave-section { width: 100%; max-width: none; }
.services-page .wave-section > .container-wide { width: min(1280px, calc(100% - 32px)); }
.page-heading { max-width: 800px; margin: 0 auto; padding: 20px 16px 50px; text-align: center; }
.page-heading h1 { color: var(--primary-dark); font-size: clamp(34px, 5vw, 48px); text-transform: uppercase; }
.page-heading p { font-size: 20px; }
.page-heading > a { display: block; color: var(--title); font-size: 18px; }
.page-heading--contact { max-width: 1080px; }
.contact-channels { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; margin-top: 34px; text-align: left; }
.contact-direct, .contact-social { border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; padding: 26px; box-shadow: var(--shadow); }
.contact-channels h2 { margin-bottom: 18px; color: var(--title); font-size: 21px; }
.contact-direct { display: flex; flex-direction: column; }
.contact-direct a { display: flex; flex-direction: column; border-bottom: 1px solid #edf0f2; padding: 13px 0; }
.contact-direct a:last-child { border-bottom: 0; }
.contact-direct a span { color: #667085; font-size: 13px; }
.contact-direct a strong { color: var(--primary-dark); font-size: 17px; overflow-wrap: anywhere; }
.contact-social > p { margin-bottom: 16px; color: #667085; font-size: 15px; }
.contact-schedule { text-align: center; }
.contact-schedule > div { max-width: 900px; margin: auto; }
.contact-schedule h2 { font-size: 32px; }
.contact-schedule p { margin-inline: auto; }
.contact-form-section { padding: 80px 16px; }
.contact-form-section h2 { color: var(--primary-dark); text-align: center; font-size: 38px; text-transform: uppercase; }

/* Forms */
.form-card { display: flex; flex-direction: column; gap: 18px; border: 2px solid #f1f2f4; border-radius: 8px; background: #fff; padding: 30px; }
.form-card--wide { max-width: 760px; margin: auto; }
.form-card label { display: flex; flex-direction: column; gap: 6px; color: #374151; font-size: 14px; font-weight: 600; }
.form-card input, .form-card textarea, .form-card select { width: 100%; border: 2px solid #edf0f2; border-radius: 4px; background: #fff; padding: 10px 12px; outline: none; color: #222; }
.form-card textarea { resize: vertical; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { border-color: var(--primary); }
.form-card small { display: block; color: #6b7280; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid--three { grid-template-columns: repeat(3, 1fr); }
.form-grid--four { grid-template-columns: repeat(4, 1fr); }
.required { color: #c02b0a; }
.check-field { flex-direction: row !important; align-items: flex-start; }
.check-field input { width: auto; margin-top: 4px; }
.auth-page { display: grid; min-height: 72vh; place-items: center; padding: 40px 16px; }
.auth-box { width: min(450px, 100%); text-align: center; }
.auth-box--wide { width: min(560px, 100%); }
.auth-box h1 { margin-bottom: 6px; }
.auth-box > p { margin-bottom: 26px; }
.auth-box .form-card { margin: 24px 0; text-align: left; }
.auth-box .form-card .button { width: 100%; }
.otp-input { text-align: center; font-size: 26px !important; font-weight: 700; letter-spacing: .3em; }

/* Course listing/detail */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-bottom: 60px; }
.course-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: box-shadow .25s, transform .25s; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course-card__image, .course-card__placeholder { display: flex; height: 260px; align-items: center; justify-content: center; overflow: hidden; background: var(--decorative); }
.course-card__image img { width: 100%; height: 100%; object-fit: contain; object-position: center top !important; transition: transform .3s; }
.course-card:hover .course-card__image img { transform: scale(1.015); }
.course-card__placeholder { color: var(--primary-dark); font-size: 40px; font-weight: 700; }
.course-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.course-card__body h2 { margin-bottom: 5px; font-size: 24px; }
.course-card__board { color: var(--primary-dark); font-size: 14px; font-weight: 600; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pill-row span { border-radius: 999px; color: var(--primary-dark); background: var(--decorative); padding: 5px 11px; font-size: 13px; font-weight: 600; }
.course-card__price { color: var(--title); font-size: 29px; font-weight: 700; }
.course-card__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.course-card__badges img { height: 60px; width: auto; }
.course-card__date { margin-top: 16px; font-size: 14px; font-weight: 600; }
.course-card__body > .button { margin-top: auto; }
.course-detail { overflow-x: hidden; }
.course-hero header { grid-area: heading; text-align: left; }
.course-hero header h1 { font-size: clamp(38px, 5vw, 52px); }
.course-hero header p { color: #464646; font-size: clamp(24px, 4vw, 36px); }
.course-hero header span { display: inline-block; border-radius: 6px; color: #fff; background: var(--primary); padding: 5px 14px; font-size: 18px; }
.course-hero__grid { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; grid-template-areas: "image heading" "image content"; align-items: start; column-gap: 38px; row-gap: 28px; margin-top: 40px; }
.course-hero__image { grid-area: image; width: 100%; max-height: 540px; margin: 0 auto; object-fit: contain; object-position: center top; }
.course-hero__content { grid-area: content; min-width: 0; padding-right: 18px; }
.course-overview { display: grid; grid-template-columns: 1fr auto; gap: 20px; border-radius: 10px; background: var(--decorative); padding: 22px; }
.course-overview h2 { margin-bottom: 6px; font-size: 34px; }
.course-overview p { margin: 2px 0; color: #242424; }
.course-overview > div:last-child { text-align: right; }
.course-overview > div:last-child > strong { display: block; color: var(--title); font-size: 34px; }
.course-overview small { display: block; }
.course-overview > div:last-child > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.rich-text { color: #5c5c5c; font-size: 18px; }
.rich-text a { color: var(--primary-dark); text-decoration: underline; }
.course-hero .rich-text { margin-top: 24px; }
.course-features { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; padding: 20px 0 70px; }
.course-features > div { display: flex; align-items: center; gap: 14px; }
.course-features > div a { display: flex; width: 180px; height: 125px; align-items: center; justify-content: center; }
.course-features > div img { width: auto; height: 115px; max-width: 180px; object-fit: contain; }
.bonus-section { position: relative; color: #fff; background: var(--primary); padding: 55px 0; }
.bonus-section h2, .bonus-section h3 { color: inherit; }
.bonus-section__intro { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
.bonus-section__intro img { border-radius: 12px; }
.bonus-section__intro h2 { margin-bottom: 12px; font-size: 48px; }
.enrollment-callout { margin-top: 32px; border-radius: 5px; color: var(--title); background: #fff; padding: 26px; box-shadow: var(--shadow); }
.enrollment-callout h3 { color: var(--primary-dark); font-size: 34px; }
.enrollment-callout > div { display: flex; justify-content: flex-end; gap: 12px; }
.program-overview { background: linear-gradient(rgba(243,243,243,.92),rgba(243,243,243,.92)), url('/images/about-us/about-us.png') center/cover; padding: 65px 0; }
.program-overview .rich-text { max-width: none; }
.program-overview h2, .syllabus-section h2, .faq-section h2 { color: var(--primary-dark); font-size: clamp(36px, 5vw, 48px); }
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.module-grid article { border-radius: 8px; background: rgba(255,255,255,.8); padding: 18px; }
.module-grid article > div { display: flex; justify-content: space-between; gap: 10px; }
.module-grid h3 { font-size: 28px; }
.module-grid article > div span { height: fit-content; border-radius: 999px; color: var(--primary-dark); background: var(--decorative); padding: 4px 9px; font-size: 13px; font-weight: 600; }
.module-grid li { margin: 7px 0; }
.module-grid article > p { border-top: 1px solid #ddd; padding-top: 12px; }
.syllabus-section { background: var(--decorative); padding: 60px 0; text-align: center; }
.syllabus-section > div > div { display: flex; max-width: 460px; flex-direction: column; gap: 10px; margin: 25px auto 0; }
.faq-section { padding: 65px 0; }
.faq-section h2 { text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-list details { background: var(--decorative); }
.faq-list summary { position: relative; cursor: pointer; list-style: none; padding: 14px 18px 14px 55px; color: var(--title); font-size: 18px; }
.faq-list summary::before { content: '+'; position: absolute; left: 20px; top: 3px; color: var(--primary-dark); font-size: 34px; }
.faq-list details[open] summary { color: #fff; background: var(--primary); }
.faq-list details[open] summary::before { content: '−'; color: #fff; }
.faq-list details > div { color: var(--title); background: #fff; padding: 16px 22px; }
.faq-section.wave-section .faq-list details > div { background: rgba(255,255,255,.65); }
.table-wrap { max-width: 100%; overflow-x: auto; }
.faq-list table { width: 100%; border-collapse: collapse; }
.faq-list th, .faq-list td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.course-social-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; border: 1px solid #dbe8e8; border-radius: 14px; margin-top: 60px; background: #f8fbfb; padding: 34px 38px; }
.course-social-section h2 { margin-bottom: 10px; color: var(--primary-dark); font-size: clamp(25px, 3vw, 32px); }
.course-social-section p { max-width: 650px; margin-bottom: 0; color: #4b5563; font-size: 17px; }
.legal-page { padding-top: 5px; padding-bottom: 30px; }
.legal-page > header { margin-bottom: 34px; }
.legal-page h1 { color: var(--primary-dark); font-size: clamp(34px, 5vw, 48px); text-transform: uppercase; }
.legal-content { display: flex; flex-direction: column; gap: 30px; font-size: 18px; }
.legal-content h2 { font-size: 25px; }
.legal-content li { margin: 7px 0; }
.legal-content a { color: #2563eb; text-decoration: underline; }
.legal-content address { font-style: normal; }

/* Checkout */
.checkout-page { max-width: 1000px; padding-bottom: 50px; }
.back-link { display: inline-block; margin-bottom: 14px; color: #6b7280; font-size: 14px; }
.checkout-page > h1 { font-size: 34px; }
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
.checkout-grid > div > section { margin-bottom: 34px; }
.checkout-grid h2 { font-size: 19px; }
.checkout-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 10px; padding: 15px; }
.checkout-line strong, .checkout-line small { display: block; }
.checkout-line button { border: 0; color: #dc2626; background: transparent; cursor: pointer; }
.payment-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.payment-option { border: 2px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 15px; cursor: pointer; text-align: left; }
.payment-option.active { border-color: var(--primary); background: var(--decorative); }
.payment-option strong, .payment-option small { display: block; }
.schedule-row { display: flex; justify-content: space-between; border: 1px solid #f0f0f0; border-radius: 4px; margin: 6px 0; background: #f9fafb; padding: 9px 13px; font-size: 14px; }
.payment-schedule > small { display: block; border-left: 4px solid var(--primary); margin-top: 12px; color: #374151; background: var(--decorative); padding: 10px 12px; }
.stripe-test-banner { display: flex; align-items: center; gap: 8px; border: 1px solid #f59e0b; color: #78350f; background: #fffbeb; }
.checkout-summary { position: sticky; top: 25px; align-self: start; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.checkout-user { display: flex; align-items: center; gap: 10px; border-radius: 6px; margin-bottom: 20px; background: #f9fafb; padding: 10px; }
.checkout-user > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--primary-dark); background: var(--decorative); font-weight: 700; }
.checkout-user strong, .checkout-user small { display: block; }
.checkout-total-row { display: flex; justify-content: space-between; margin: 7px 0; font-size: 14px; }
.checkout-total-row.grand { border-top: 1px solid #eee; margin-top: 12px; padding-top: 12px; font-size: 18px; font-weight: 700; }
.checkout-summary > .button { margin-top: 12px; }
.login-notice { border: 1px solid #fde68a; border-radius: 6px; margin-top: 18px; color: #92400e; background: #fffbeb; padding: 12px; text-align: center; }
.login-notice strong, .login-notice small { display: block; }
.stripe-note { margin: 14px 0 0; color: #9ca3af; text-align: center; font-size: 12px; }
.checkout-empty { padding: 70px 10px; text-align: center; }
.checkout-empty[hidden] { display: none; }
.empty-icon { font-size: 58px; opacity: .35; }
.success-page { display: flex; min-height: 60vh; max-width: 700px; flex-direction: column; align-items: center; justify-content: center; margin: auto; padding: 30px 16px; text-align: center; }
.success-check { display: grid; width: 82px; height: 82px; place-items: center; border-radius: 50%; margin-bottom: 22px; color: #fff; background: #22c55e; font-size: 52px; }
.success-page h1 { font-size: 36px; }
.success-page > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* Dashboard and admin */
.portal-body { background: #f9fafb; }
.portal-nav { border-bottom: 1px solid #e5e7eb; background: #fff; }
.portal-nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 20px; }
.portal-brand { color: var(--primary-dark); font-size: 20px; font-weight: 700; }
.portal-links { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.portal-links a { border-radius: 6px; padding: 8px 11px; color: #5b6472; font-size: 14px; font-weight: 500; }
.portal-links a:hover, .portal-links .active { color: #111827; background: #f3f4f6; }
.portal-main { padding-top: 32px; padding-bottom: 60px; }
.portal-main > h1 { margin-bottom: 4px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 30px 0; }
.metric-grid > * { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 8px; color: #4b5563; background: #fff; padding: 24px; box-shadow: 0 2px 5px rgba(0,0,0,.03); }
.metric-grid strong { color: var(--primary-dark); font-size: 34px; }
.metric-grid .metric-warning strong { color: #d97706; }
.portal-section { margin-top: 40px; }
.mini-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-card-grid article { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 20px; }
.mini-card-grid h3 { margin-bottom: 5px; }
.mini-card-grid p { margin-bottom: 6px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-title-row h1 { margin-bottom: 5px; font-size: 32px; }
.page-title-row p { margin: 0; }
.portal-course-grid { grid-template-columns: repeat(3, 1fr); }
.empty-panel, .admin-panel { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 25px; }
.admin-main > .admin-panel + .admin-panel { margin-top: 24px; }
.form-card--portal { max-width: 680px; }
.profile-settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); align-items: start; gap: 24px; }
.profile-settings-grid .form-card--portal { max-width: none; }
.profile-settings-grid h2 { margin: 0; font-size: 21px; }
.payment-method-card { position: sticky; top: 24px; border-color: #c8eeec; box-shadow: 0 10px 30px rgba(14,129,128,.08); }
.payment-method-card__eyebrow, .manual-charge-panel__eyebrow { display: block; margin-bottom: 6px; color: var(--primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.payment-method-card p { margin: 7px 0 0; color: #64748b; line-height: 1.55; }
.saved-card { display: flex; align-items: center; gap: 14px; border: 1px solid #d9e4e7; border-radius: 9px; background: #f8fbfb; padding: 16px; }
.saved-card__icon { display: grid; width: 54px; height: 38px; flex: 0 0 54px; place-items: center; border-radius: 6px; color: #fff; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.saved-card strong, .saved-card small { display: block; }
.saved-card small { margin-top: 3px; color: #64748b; }
.saved-card--empty .saved-card__icon { font-size: 22px; letter-spacing: 0; }
.payment-method-card form { margin: 0; }
.payment-method-card form .button { width: 100%; }
.payment-method-actions { display: grid; gap: 10px; }
.payment-security-note { color: #64748b; line-height: 1.45; }
.data-table { width: 100%; border-collapse: collapse; color: #4b5563; background: #fff; font-size: 14px; }
.data-table th { color: #374151; background: #f9fafb; text-align: left; font-weight: 600; }
.data-table th, .data-table td { border-bottom: 1px solid #e5e7eb; padding: 13px 14px; vertical-align: top; }
.data-table tbody tr:hover { background: #fcfcfd; }
.data-table td strong, .data-table td small { display: block; }
.data-table td a { color: var(--primary-dark); font-weight: 600; }
.status { display: inline-flex; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.status--paid, .status--published, .status--active { color: #166534; background: #dcfce7; }
.status--partial, .status--sent, .status--user, .status--draft, .status--incomplete { color: #1e40af; background: #dbeafe; }
.status--pending, .status--overdue, .status--past_due { color: #92400e; background: #fef3c7; }
.status--failed, .status--cancelled, .status--canceled, .status--archived { color: #991b1b; background: #fee2e2; }
.status--admin { color: #6b21a8; background: #f3e8ff; }
.admin-body { display: flex; min-height: 100vh; background: var(--surface); }
.admin-sidebar { position: sticky; top: 0; display: flex; width: 240px; height: 100vh; flex: 0 0 240px; flex-direction: column; color: #fff; background: #242424; }
.admin-brand { display: flex; height: 60px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--primary); padding: 0 20px; font-weight: 700; }
.admin-brand:hover { color: var(--primary); }
.admin-sidebar nav { flex: 1; padding: 10px 8px; }
.admin-sidebar nav a { display: block; border-radius: 4px; margin-bottom: 2px; color: rgba(255,255,255,.8); padding: 10px 14px; font-size: 14px; font-weight: 500; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: #fff; background: rgba(255,255,255,.12); }
.admin-sidebar form { border-top: 1px solid rgba(255,255,255,.1); padding: 10px; }
.admin-sidebar form button { width: 100%; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; color: #fff; background: rgba(255,255,255,.1); padding: 10px; cursor: pointer; }
.admin-main { min-width: 0; flex: 1; padding: 32px; }
.admin-menu-button { display: none; }
.admin-metrics { grid-template-columns: repeat(5, 1fr); }
.admin-metrics .metric-failed strong { color: #b91c1c; }
.admin-payment-alerts { border: 1px solid #fecaca; border-left: 5px solid #dc2626; border-radius: 8px; margin-bottom: 24px; color: #7f1d1d; background: #fff7f7; padding: 16px 18px; box-shadow: 0 3px 10px rgba(127,29,29,.08); }
.admin-payment-alerts[hidden] { display: none !important; }
.admin-payment-alerts__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.admin-payment-alerts__heading strong { font-size: 18px; }
.admin-payment-alerts__heading span { color: #991b1b; font-size: 13px; }
.admin-payment-alerts__list { display: grid; gap: 7px; }
.admin-payment-alerts__list a { display: block; border-radius: 6px; color: #7f1d1d; background: #fee2e2; padding: 10px 12px; }
.admin-payment-alerts__list a:hover { background: #fecaca; }
.admin-payment-alerts__list strong, .admin-payment-alerts__list small { display: block; }
.admin-payment-alerts__list small { margin-top: 3px; color: #991b1b; }
.admin-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.admin-card-grid > a { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.03); }
.admin-card-grid h2 { color: var(--primary-dark); font-size: 18px; }
.form-card--admin { max-width: 1100px; }
.form-card--admin h2 { border-bottom: 1px solid #e5e7eb; margin: 20px 0 0; padding-bottom: 8px; font-size: 20px; }
.form-card--admin fieldset { border: 1px solid #e5e7eb; border-radius: 6px; }
.form-card--admin legend { padding: 0 8px; font-weight: 600; }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.code-input { min-height: 100px; font: 13px/1.45 Consolas, 'Courier New', monospace !important; tab-size: 2; }
.simple-editor { overflow: hidden; border: 1px solid #dbe2e8; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.simple-editor__heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; }
.simple-editor__label { color: #1f2937; font-size: 15px; font-weight: 700; }
.simple-editor__heading small { margin: 0; text-align: right; }
.simple-editor__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #dbe2e8; background: #f8fafc; padding: 9px 12px; }
.editor-toolbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.editor-toolbar-group > span { margin-right: 3px; color: #64748b; font-size: 12px; font-weight: 600; }
.editor-toolbar-group button { min-height: 32px; border: 1px solid #cbd5e1; border-radius: 5px; color: #334155; background: #fff; padding: 5px 9px; cursor: pointer; font-size: 12px; font-weight: 600; }
.editor-toolbar-group button:hover, .editor-toolbar-group button:focus { border-color: var(--primary); color: var(--primary-dark); background: #f0fdfa; outline: none; }
.editor-toolbar-group button:disabled { cursor: not-allowed; opacity: .45; }
.simple-editor__content { min-height: 260px; max-height: 560px; overflow-y: auto; border: 0; background: #fff; padding: 18px; outline: none; color: #374151; font-size: 16px; font-weight: 400; line-height: 1.65; white-space: normal; }
.simple-editor__content:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.simple-editor__content:empty::before { color: #9ca3af; content: attr(data-placeholder); pointer-events: none; }
.simple-editor__content p { margin: 0 0 14px; text-align: left !important; }
.simple-editor__content p:last-child { margin-bottom: 0; }
.simple-editor__content a { border-radius: 3px; color: #075985 !important; background: #e0f2fe; padding: 1px 3px; cursor: pointer; font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 1px !important; }
.simple-editor__content a.is-selected-link { outline: 2px solid #0ea5e9; outline-offset: 2px; }
.simple-editor__content font[size="2"], .rich-text font[size="2"] { font-size: 13px; }
.simple-editor__content font[size="3"], .rich-text font[size="3"] { font-size: 16px; }
.simple-editor__content font[size="4"], .rich-text font[size="4"] { font-size: 20px; }
.simple-editor__content font[size="5"], .rich-text font[size="5"] { font-size: 24px; }
.simple-editor__status { border-top: 1px solid #e5e7eb; color: #64748b; background: #f8fafc; padding: 8px 13px; font-size: 12px; }
.simple-editor__status.is-error { color: #b91c1c; background: #fef2f2; }
.link-editor-panel { border-top: 1px solid #bae6fd; background: #f0f9ff; padding: 14px; }
.link-editor-panel[hidden] { display: none !important; }
.link-editor-panel__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #0c4a6e; }
.link-editor-panel__heading > button { border: 0; color: #64748b; background: transparent; cursor: pointer; font-size: 23px; line-height: 1; }
.link-editor-panel__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.link-editor-panel__actions > span { color: #b91c1c; font-size: 12px; }
.description-links { border-top: 1px solid #e5e7eb; background: #fff; padding: 12px 14px; }
.description-links > strong { display: block; margin-bottom: 8px; color: #475569; font-size: 12px; text-transform: uppercase; letter-spacing: .035em; }
.description-links__empty { color: #94a3b8; font-size: 13px; }
.description-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #eef2f7; padding: 8px 0; }
.description-link-row:first-child { border-top: 0; }
.description-link-row > span:first-child { min-width: 0; }
.description-link-row strong, .description-link-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.description-link-row small { color: #64748b; }
.description-link-row > span:last-child { display: flex; flex: 0 0 auto; gap: 5px; }
.description-link-row button { border: 1px solid #cbd5e1; border-radius: 4px; color: #334155; background: #fff; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.installment-fieldset { padding: 16px; }
.field-help { margin: 0 0 12px; color: #6b7280; font-size: 14px; }
.installment-options { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); gap: 10px; }
.form-card .installment-option { display: flex; min-height: 72px; flex-direction: row; align-items: center; gap: 10px; border: 2px solid #e5e7eb; border-radius: 7px; background: #fff; padding: 11px; cursor: pointer; }
.form-card .installment-option:has(input:checked) { border-color: var(--primary); background: #f0fdfa; }
.form-card .installment-option input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--primary-dark); }
.installment-option span, .installment-option strong, .installment-option small { display: block; }
.installment-option--fixed { cursor: default !important; }
.recurring-schedule { padding: 16px; }
.form-card .schedule-toggle { flex-direction: row; align-items: flex-start; gap: 10px; border-radius: 7px; background: #f8fafc; padding: 13px; cursor: pointer; }
.form-card .schedule-toggle input { width: 19px; height: 19px; flex: 0 0 19px; margin: 1px 0 0; accent-color: var(--primary-dark); }
.schedule-toggle strong, .schedule-toggle small { display: block; }
.recurring-schedule__fields { margin-top: 14px; }
.recurring-schedule__fields[hidden] { display: none !important; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.upload-box { display: flex; align-items: end; gap: 12px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; padding: 15px; }
.upload-box label { flex: 1; }
.media-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.media-editor { display: flex; flex-direction: column; gap: 13px; border: 1px solid #dbe2e8; border-radius: 8px; background: #f8fafc; padding: 16px; }
.media-editor h3 { margin: 0; font-size: 17px; }
.media-editor > img { width: 100%; height: 220px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; object-fit: contain; object-position: center top; }
.badge-selector { padding: 16px; }
.form-card .badge-choice { display: grid; grid-template-columns: 22px 100px 1fr; align-items: center; gap: 12px; border: 2px solid #e5e7eb; border-radius: 7px; background: #fff; padding: 10px; cursor: pointer; }
.form-card .badge-choice:has(input:checked) { border-color: var(--primary); background: #f0fdfa; }
.form-card .badge-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-dark); }
.badge-choice img { width: 100px; height: 70px; object-fit: contain; }
.repeat-manager { display: flex; flex-direction: column; gap: 12px; }
.repeat-manager__heading, .repeat-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.repeat-manager__heading h3 { margin: 0; font-size: 17px; }
.repeat-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid #dbe2e8; border-radius: 8px; background: #f8fafc; padding: 16px; }
.repeat-card__heading > label { flex: 1; }
.faq-category { border-left: 4px solid var(--primary); }
.faq-editor { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid #dbe2e8; background: #fff; padding: 16px; }
.faq-editor + .faq-editor { margin-top: 12px; }
.syllabus-file-list { display: flex; flex-direction: column; gap: 9px; }
.syllabus-file-row { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 10px; border: 1px solid #dbe2e8; border-radius: 7px; background: #fff; padding: 12px; }
.syllabus-file-row .check-field { align-self: center; }
.repeat-manager > .upload-box { display: flex; flex-direction: column; align-items: stretch; }
.contact-admin-list { display: flex; flex-direction: column; gap: 14px; }
.contact-admin-list article { border-left: 4px solid transparent; }
.contact-admin-list .contact-unread { border-left-color: var(--primary); }
.contact-admin-list header { display: flex; justify-content: space-between; gap: 15px; }
.contact-admin-list header strong, .contact-admin-list header a { display: block; }
.contact-admin-list header a { color: var(--primary-dark); }
.contact-admin-list time { color: #9ca3af; font-size: 13px; }
.contact-admin-list article > p { white-space: normal; }
.invoice-links { display: flex; flex-wrap: wrap; gap: 12px; }
.invoice-links a { color: var(--primary-dark); text-decoration: underline; }
.manual-charge-panel { display: flex; max-width: 1100px; align-items: center; justify-content: space-between; gap: 28px; border-color: #fecaca; margin-top: 24px; background: #fffafa; }
.manual-charge-panel h2 { margin: 0 0 6px; color: #991b1b; font-size: 21px; }
.manual-charge-panel p { max-width: 720px; margin: 0 0 6px; color: #4b5563; line-height: 1.55; }
.manual-charge-panel small { color: #991b1b; }
.manual-charge-panel form { flex: 0 0 auto; }
.status-page { display: flex; min-height: 60vh; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.status-page__code { margin: 0; color: var(--primary); font-size: 70px; font-weight: 700; }

@media (max-width: 1180px) {
  .site-logo { flex-basis: 165px; }
  .site-logo img { width: 165px; }
  .site-nav { gap: 13px; font-size: 12px; }
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-metrics { grid-template-columns: repeat(2, 1fr); }
  .form-grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023px) {
  .site-header__inner { padding-block: 11px; }
  .mobile-menu-button { display: block; order: 0; }
  .site-logo { flex-basis: 180px; order: 1; }
  .header-actions { order: 2; }
  .site-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; border-top: 1px solid #eee; background: #fff; padding: 0 18px 18px; box-shadow: 0 12px 20px rgba(0,0,0,.08); }
  .site-nav.open { display: flex; }
  .site-nav > a, .nav-dropdown > button { display: block; width: 100%; border-bottom: 1px solid #eee; padding: 14px 8px; text-align: left; }
  .nav-dropdown__menu { position: static; display: none; box-shadow: none; }
  .nav-dropdown:hover .nav-dropdown__menu { display: none; }
  .nav-dropdown.open .nav-dropdown__menu { display: block; }
  .hero-intro { padding-inline: 20px; }
  .home-about { padding-top: 110px; }
  .course-hero__grid { grid-template-columns: 240px 1fr; }
  .course-overview { grid-template-columns: 1fr; }
  .course-overview > div:last-child { text-align: left; }
  .course-overview > div:last-child > div { justify-content: flex-start; }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 30px; }
  .contact-channels { grid-template-columns: 1fr; }
  .course-social-section { grid-template-columns: 1fr; text-align: center; }
  .course-social-section p { margin-inline: auto; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .site-main { padding-top: 30px; }
  .site-header__inner { gap: 6px; }
  .site-header__social-inner { min-height: 30px; }
  .site-logo { flex: 0 1 150px; }
  .site-logo img { width: 150px; }
  .dashboard-button { min-height: 38px; padding: .5rem .7rem; }
  .hero-intro { flex-direction: column; gap: 20px; text-align: center; }
  .hero-intro > img { width: 176px; }
  .service-cards { grid-template-columns: 1fr; }
  .services-ribbon { padding: 40px 0; }
  .service-cards a { min-height: 150px; }
  .home-about { grid-template-columns: 1fr; padding-top: 100px; }
  .home-about > div:last-child { text-align: center; }
  .home-about p { text-align: justify; }
  .provider-badges { grid-template-columns: 1fr; gap: 60px; padding-top: 110px; }
  .about-lead { grid-template-columns: 1fr; padding-inline: 10px; }
  .about-lead img { max-height: 300px; }
  .about-lead h1 { text-align: center; }
  .mission-list { padding-left: 0; }
  .mission-list li { padding-left: 0; padding-top: 48px; text-align: center; }
  .mission-list li::before { top: 0; left: 50%; transform: translateX(-50%); }
  .contact-direct, .contact-social { padding: 22px 18px; }
  .course-grid, .portal-course-grid { grid-template-columns: 1fr; }
  .course-hero__grid { grid-template-columns: 1fr; grid-template-areas: "heading" "image" "content"; row-gap: 24px; }
  .course-hero__image { max-height: 360px; }
  .course-hero__content { padding-right: 0; }
  .course-features { grid-template-columns: 1fr; }
  .course-features > div { justify-content: center; }
  .media-editor-grid { grid-template-columns: 1fr; }
  .syllabus-file-row { grid-template-columns: 1fr; align-items: stretch; }
  .bonus-section__intro { grid-template-columns: 1fr; }
  .bonus-section__intro img { width: 260px; margin: auto; }
  .module-grid { grid-template-columns: 1fr; }
  .enrollment-callout > div, .course-overview > div:last-child > div { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-grid nav { align-items: center; }
  .footer-social { width: min(420px, 100%); margin-inline: auto; }
  .footer-social p { text-align: center; }
  .cookie-banner { flex-direction: column; align-items: stretch; padding: 16px; }
  .cookie-banner > div { justify-content: flex-end; }
  .form-grid, .form-grid--three, .form-grid--four { grid-template-columns: 1fr; }
  .payment-options { grid-template-columns: 1fr; }
  .portal-nav__inner { align-items: flex-start; flex-wrap: wrap; padding: 12px 0; }
  .portal-links { order: 3; width: 100%; overflow-x: auto; }
  .metric-grid, .admin-metrics { grid-template-columns: 1fr 1fr; }
  .mini-card-grid, .admin-card-grid { grid-template-columns: 1fr; }
  .page-title-row { align-items: flex-start; flex-direction: column; }
  .admin-sidebar { position: fixed; left: 0; z-index: 200; transform: translateX(-100%); transition: transform .25s; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { padding: 18px; }
  .admin-menu-button { display: inline-flex; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 16px; background: #fff; padding: 7px 12px; }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
  .installment-options { grid-template-columns: 1fr 1fr; }
  .simple-editor__heading, .simple-editor__toolbar { align-items: flex-start; flex-direction: column; }
  .simple-editor__heading small { text-align: left; }
  .description-link-row { align-items: flex-start; flex-direction: column; }
  .upload-box { align-items: stretch; flex-direction: column; }
  .profile-settings-grid { grid-template-columns: 1fr; }
  .payment-method-card { position: static; }
  .manual-charge-panel { align-items: stretch; flex-direction: column; }
  .manual-charge-panel form .button { width: 100%; }
}

@media (max-width: 480px) {
  .container-wide, .container-narrow { width: min(100% - 24px, 1280px); }
  .site-logo { flex-basis: 115px; }
  .site-logo img { width: 115px; }
  .mobile-menu-button { width: 34px; padding: 3px; }
  .cart-button { padding: 5px; }
  .dashboard-button { min-height: 34px; padding: .45rem .55rem; font-size: 12px; }
  .service-cards a { font-size: 18px; }
  .course-overview { padding: 15px; }
  .course-overview h2, .course-overview > div:last-child > strong { font-size: 27px; }
  .metric-grid, .admin-metrics { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .installment-options { grid-template-columns: 1fr; }
}