/* Shared responsive layer; loaded last so section themes keep one viewport contract. */
:root {--header-height:85px; --page-gutter:clamp(20px,4vw,48px);}
html {scroll-padding-top:calc(var(--header-height) + 12px); -webkit-text-size-adjust:100%; text-size-adjust:100%;}
main, .container, .panel-content, .lesson-title h3 {min-width:0;}
.btn {max-width:100%; min-width:min(275px,100%); white-space:normal; text-align:center;}
.footer-links a, .dialog p, .legal-row dd {overflow-wrap:anywhere;}
.site-header {padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right));}
.menu-toggle, .video-toggle, .round-control, .daily-gallery__control, .dialog-close, .social-link, .reform-features__motion-toggle {min-width:44px; min-height:44px;}
.media-pagination {position:relative; min-height:44px; height:auto; gap:0; margin-top:18px; flex-wrap:wrap; padding-inline:12px;}
.media-dot {width:34px; height:44px; border-radius:0; background:none;}
.media-dot::before {inset:auto; left:50%; top:50%; width:9px; height:9px; border-radius:50%; background:#d3dce1; transform:translate(-50%,-50%);}
.media-dot[aria-current=true] {background:none;}
.media-dot[aria-current=true]::before {background:#2b88a6;}
.media-pause {position:static; width:44px; height:44px; flex:0 0 44px; font-size:15px;}
.media-carousel {padding-bottom:0;}
#faq .question-label {min-width:0; overflow-wrap:anywhere;}
#faq .faq-icon {flex-shrink:0;}

/* The hamburger appears at 1180px: the menu must remain available up to that width. */
@media (max-width:1180px) {
  .mobile-menu {display:block; top:var(--header-height); max-height:calc(100dvh - var(--header-height)); overscroll-behavior:contain; padding-bottom:max(28px,env(safe-area-inset-bottom));}
  .mobile-menu nav>a:not(.btn) {min-height:48px; font-size:clamp(18px,2.8vw,22px);}
}
@media (min-width:1181px) {.mobile-menu {display:none;}}
@media (max-width:950px) {:root {--header-height:80px;}}

/* Let content determine hero height on short screens and when text wraps. */
.motto-hero {height:auto; min-height:max(780px,100svh); max-height:none;}
.motto-hero .hero-content {padding-bottom:90px;}
@media (min-width:701px) and (max-height:700px) {
  .motto-hero .hero-content {padding-top:120px;}
}

/* Tablet: give the curriculum the full panel width, with a horizontal course index. */
@media (max-width:1024px) {
  #lesson>.container {width:calc(100% - 40px);}
  #lesson .split-panel {display:block;}
  #lesson .panel-nav {position:sticky; top:var(--header-height); z-index:10; display:flex; flex-direction:row; align-items:stretch; gap:24px; max-height:112px; padding:0 16px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; background:#fffefcf5; border-radius:10px 10px 0 0; box-shadow:0 1px 0 var(--line);}
  #lesson .panel-nav a {flex:none; gap:8px; padding:16px 0; font-size:12px; white-space:nowrap;}
  #lesson .panel-nav a small {display:block; font-size:15px;}
  #lesson .panel-nav a:after {display:none;}
  #lesson .panel-nav a.active:before {left:0; bottom:0; height:3px; width:100%;}
  #lesson .panel-nav a:is(:hover,:focus-visible) {padding-left:0;}
  #lesson .panel-nav .course-nav-chunk {white-space:nowrap;}
  #lesson .panel-nav .course-nav-chunk+span {font-size:11px;}
  #lesson .panel-content {padding-inline:24px; border-left:0;}
  #lesson .course-card {scroll-margin-top:calc(var(--course-nav-height,96px) + 12px);}
  #lesson .course-step {grid-template-rows:auto 1fr 1fr;}
  #lesson .course-step-heading {min-height:82px; font-size:12px;}
  #lesson .course-topic p {font-size:13px; line-height:1.85;}
  #lesson .course-description, #lesson .course-intro {font-size:14px;}
  .concept {padding-inline:var(--page-gutter); gap:72px; padding-bottom:88px;}
  .concept-intro {width:100%;}
  .concept .section-head {margin-bottom:36px;}
  .concept-copy {max-width:740px; margin-inline:auto; text-wrap:pretty;}
}

/* Support balloons and portraits participate in layout, including enlarged text. */
@media (max-width:900px) {
  .web-support__scene {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 24px; height:auto; align-items:end;}
  .web-support__questions {grid-column:1; display:flex; flex-direction:column; align-items:flex-start; gap:16px; align-self:start; min-width:0;}
  .web-support__bubble--question {position:relative; inset:auto; width:auto; max-width:100%; margin:0; overflow-wrap:anywhere;}
  .web-support__bubble--answer {position:relative; inset:auto; grid-column:2; grid-row:1; align-self:start; width:100%; margin:0; overflow-wrap:anywhere;}
  .web-support__person {position:relative; inset:auto; grid-row:2; width:100%; margin:0;}
  .web-support__person--student {grid-column:1; width:80%; justify-self:start;}
  .web-support__person--marke {grid-column:2; justify-self:end;}
  .web-support__ribbon {top:auto; bottom:0; height:48%;}
  .web-support__connection {top:auto; bottom:44px; height:220px;}
  .web-support__conversation {top:auto; bottom:130px;}
}

@media (max-width:700px) {
  :root {--header-height:74px;}
  .motto-hero {min-height:100svh;}
  .motto-hero .hero-content {width:calc(100% - 40px); padding-top:118px; padding-bottom:88px;}
  .hero-kicker {font-size:12px; letter-spacing:.02em;}
  .motto-hero h1 {font-size:clamp(22px,6.7vw,38px);}
  .motto-hero .hero-title-emphasis {font-size:clamp(34px,11.2vw,64px);}
  .motto-hero .hero-subtitle {font-size:clamp(12px,3.25vw,16px);}
  .motto-hero .hero-subtitle>span {max-width:100%;}
  .hero-highlights {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; max-width:390px;}
  .hero-highlight {width:100%; height:auto; aspect-ratio:1; min-width:0; padding:5px;}
  .hero-highlight>span {font-size:clamp(9px,2.4vw,11px); letter-spacing:0;}
  .hero-highlight strong {font-size:clamp(30px,9vw,40px);}
  .hero-tools {font-size:12px;}
  .hero-cta-note {font-size:10px; max-width:100%; padding-inline:8px; letter-spacing:0;}
  .motto-hero .hero-primary {font-size:clamp(14px,4vw,18px); gap:10px; padding-inline:12px;}
  .hero-secondary {font-size:13px; min-height:44px;}
  .hero-footnote {font-size:10px; margin-top:5px;}
  #main .motto-title__display {font-size:clamp(30px,9.4vw,54px); overflow-wrap:anywhere;}
  #main .motto-title__label {font-size:clamp(13px,3.7vw,16px);}
  #main .motto-title__note {font-size:13px; line-height:1.8;}
  .concept {padding:64px 20px; gap:48px;}
  .concept-intro {width:100%; margin:0;}
  .concept-copy {font-size:15px; line-height:2; text-align:left;}
  .concept-copy br:not(:has(+br)):not(br+br) {display:none;}
  .reform-features__inner {width:calc(100% - 40px);}
  .reform-feature__title {width:100%; margin-left:0; font-size:clamp(18px,4.8vw,24px);}
  .reform-feature__title span {padding-inline:12px; overflow-wrap:anywhere;}
  .reform-feature__description {font-size:15px;}
  .daily-gallery--courses {padding-top:96px; padding-bottom:72px; margin-top:24px;}
  .daily-gallery--courses .daily-gallery__bubble {font-size:11px;}
  .daily-gallery--courses .daily-gallery__control {bottom:0;}
  #lesson .panel-content {padding-inline:16px;}
  #lesson .course-curriculum {padding:12px 10px;}
  #lesson .course-step {grid-template-rows:auto auto auto;}
  #lesson .course-step-heading {min-height:48px;}
  #lesson .course-topic {padding:14px 12px;}
  #lesson .course-topic h5 {font-size:14px;}
  #lesson .course-syllabus-unit li {font-size:13px;}
  #lesson .course-syllabus summary {font-size:13px;}
  #lesson .course-total {flex-wrap:wrap; font-size:13px;}
  #lesson .course-more-button {font-size:13px; white-space:normal;}
  .voice--posts .voice-column {flex-basis:min(90%,340px);}
  .studio-plan__body {padding:26px 20px;}
  .studio-plan__features li {font-size:15px;}
  .studio-plan__amount strong {font-size:clamp(40px,12vw,52px);}
  .studio-plan__amount>small {margin-left:5px; font-size:12px;}
  .studio-plan__tag {max-width:100%; text-align:center; font-size:14px;}
  #faq summary {padding:22px 16px; gap:12px;}
  #faq .faq-answer {font-size:14px; padding-inline:16px; gap:12px;}
  .footer-links {gap:6px; font-size:13px;}
  .footer-links a {display:flex; align-items:center; min-height:44px;}
  .legal-hero h1 span {overflow-wrap:anywhere;}
}

@media (max-width:540px) {
  .web-support__scene {grid-template-columns:minmax(0,43fr) minmax(0,57fr); gap:24px 0;}
  .web-support__questions {grid-column:1/-1;}
  .web-support__bubble--q2 {align-self:flex-end; max-width:94%;}
  .web-support__bubble--answer {grid-column:1/-1; grid-row:2; width:88%; justify-self:end; font-size:16px;}
  .web-support__person {grid-row:3; width:100%;}
  .web-support__connection {bottom:40px; height:160px;}
  .web-support__conversation {left:calc(43% - 28px); top:auto; bottom:95px;}
  .web-support__topic-label {font-size:12px; overflow-wrap:anywhere;}
  .web-support__services h3 {font-size:16px; padding-inline:18px;}
  .web-support__cta {font-size:17px; gap:16px; padding-inline:20px;}
  .web-support__closing {margin-top:24px;}
}

/* Keep the item label and mottoAI column visible together on a 320px phone. */
@media (max-width:440px) {
  .school-compare__inner {width:calc(100% - 32px);}
  .school-compare__label-col {width:88px;}
  .school-compare__featured-col {width:198px;}
  .school-compare__table th, .school-compare__table td {overflow-wrap:anywhere;}
  .school-compare__text-line {max-width:100%;}
  .school-compare__table thead .school-compare__corner {position:sticky; left:0; z-index:3; background:#fff;}
  .school-compare__hint {font-size:12px;}
  .footer-top {grid-template-columns:1fr; gap:24px;}
  .footer-brand {grid-column:auto;}
}

@media (max-height:500px) and (max-width:1180px) {
  .mobile-menu {padding-top:12px;}
  .mobile-menu nav>a:not(.btn) {padding-block:10px; font-size:18px;}
}