/* Adapt the approved desktop composition without changing the content order. */
@media(max-width:900px) {
  .experience-showcase-grid {
    grid-template-columns: 1fr;
    gap: 36px
  }
  .experience-showcase-item {
    width: 100%;
    max-width: 500px;
    margin-inline: auto
  }
  .experience-showcase-intro>p:last-child {
    font-size: 16px
  }
}

@media(max-width:1000px) {
  .membership-intro-grid {
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
    gap: 28px
  }
  .instructor-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1.7fr);
    gap: 28px;
    align-items: start
  }
}

@media(max-width:760px) {
  .membership-intro-grid,.instructor-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }
  .membership-intro-offer {
    width: 100%;
    max-width: 480px
  }
  .instructor-portrait {
    max-width: 340px
  }
  .teaching-preview {
    padding: 20px
  }
}

@media(min-width:1600px) {
  .hero-inner {
    min-height: 450px
  }
  .learning-collage {
    height: 390px
  }
  .hero-copy h1 {
    font-size: 76px
  }
}

@media(max-width:1200px) {
  :root {
    --gutter: 32px;
    --section-gap: 36px
  }
  .header-inner {
    min-height: 87px
  }
  .brand {
    width: 205px
  }
  .hero-inner {
    grid-template-columns: 43% 57%;
    min-height: 380px
  }
  .hero-copy h1 {
    font-size: 55px
  }
  .hero-copy p:not(.eyebrow) {
    font-size: 16px
  }
  .learning-collage {
    height: 330px
  }
  .alphabet-preview {
    height: 220px
  }
  .alphabet-content {
    padding: 15px 9px
  }
  .alphabet-content>strong {
    font-size: 16px
  }
  .lesson-rail {
    font-size: 8px;
    gap: 11px
  }
  .lesson-rail strong {
    font-size: 10px
  }
  .letter-row>span {
    font-size: 29px
  }
  .letter-row small {
    font-size: 8px
  }
  .space-preview {
    height: 183px;
    padding: 17px 8px
  }
  .space-preview>strong {
    font-size: 26px
  }
  .chat-preview {
    height: 145px
  }
  .chat-copy {
    padding: 5px
  }
  .chat-copy p {
    font-size: 11px;
    padding: 5px
  }
  .chat-copy small {
    font-size: 9px
  }
  .chat-copy>strong {
    font-size: 11px;
    margin-bottom: 5px
  }
  .hero-flashcard strong {
    font-size: 24px
  }
  .benefit-row {
    gap: 16px
  }
  .benefit {
    gap: 10px
  }
  .benefit .icon-disc {
    width: 46px;
    height: 46px
  }
  .benefit svg {
    width: 27px;
    height: 27px
  }
  .benefit h2 {
    font-size: 14px
  }
  .benefit p {
    font-size: 13px
  }
  .section-intro {
    gap: 26px
  }
  .section-intro>p {
    max-width: 380px;
    font-size: 15px
  }
  .panel-heading {
    gap: 10px
  }
  .panel-heading .icon-disc {
    width: 50px;
    height: 50px
  }
  .panel-heading h3 {
    font-size: 19px
  }
  .panel-heading p,.check-list li {
    font-size: 14px
  }
  .learning-panel {
    padding: 15px
  }
  .flashcard-scene,.game-art {
    height: 175px
  }
  .game-art img {
    height: 225px;
    width: 225px
  }
  .lesson-art strong {
    font-size: 14px
  }
  .lesson-art span {
    font-size: 10px
  }
  .method-flashcard {
    width: 70%
  }
  .method-flashcard strong {
    font-size: 23px
  }
  .matilda-inner {
    min-height: 275px
  }
  .matilda-copy {
    width: 46%
  }
  .matilda-copy>p:not(.eyebrow) {
    font-size: 15px
  }
  .matilda-labels span {
    padding: 10px 17px
  }
  .course-intro .course-note {
    max-width: 390px;
    font-size: 14px
  }
  .course-details {
    padding-left: 14px
  }
  .course-details h3,.upcoming-content h3 {
    font-size: 21px
  }
  .course-details>p {
    font-size: 14px
  }
  .featured-course {
    grid-template-columns: 42% 58%
  }
  .course-portrait>span {
    font-size: 14px;
    right: 5%
  }
  .upcoming-courses {
    padding: 20px
  }
  .upcoming-content {
    gap: 12px
  }
  .upcoming-content .icon-disc {
    width: 45px;
    height: 45px
  }
  .upcoming-content ul {
    font-size: 14px
  }
  .footer-brand {
    width: 165px
  }
  .footer-content nav a {
    padding-inline: 12px;
    font-size: 13px
  }
  .footer-content>p {
    font-size: 11px
  }
}

@media(max-width:950px) {
  :root {
    --gutter: 24px
  }
  .header-utilities {
    gap: 20px
  }
  .hero-copy h1 {
    font-size: 46px
  }
  .hero-copy p:not(.eyebrow) {
    font-size: 15px
  }
  .hero-copy .eyebrow {
    font-size: 9px
  }
  .learning-collage {
    height: 310px;
    margin-left: 12px
  }
  .alphabet-preview {
    width: 69%;
    height: 200px
  }
  .alphabet-content {
    padding: 15px 7px
  }
  .lesson-rail {
    display: none
  }
  .space-preview {
    width: 37%;
    height: 170px;
    right: -5px;
    top: 20px
  }
  .space-preview>strong {
    font-size: 24px;
    margin-left: 0
  }
  .space-preview p {
    left: 12%;
    padding-inline: 10px;
    font-size: 13px
  }
  .planet {
    right: 7px;
    top: 76px;
    width: 40px;
    height: 40px;
    font-size: 26px
  }
  .chat-preview {
    width: 56%;
    height: 132px
  }
  .chat-preview>img {
    width: 33%
  }
  .chat-copy p {
    font-size: 10px
  }
  .chat-copy small {
    font-size: 8px
  }
  .hero-flashcard {
    left: 3%;
    width: 40%;
    bottom: 5px
  }
  .hero-flashcard strong {
    font-size: 22px
  }
  .hero-flashcard span {
    font-size: 12px
  }
  .benefit-row {
    grid-template-columns: repeat(2,1fr);
    gap: 18px 30px
  }
  .benefit h2 {
    font-size: 16px
  }
  .benefit p {
    font-size: 14px
  }
  .section-intro {
    align-items: start;
    flex-direction: column;
    gap: 13px
  }
  .section-intro>p {
    max-width: 640px
  }
  .learning-panel {
    padding: 16px 12px
  }
  .panel-heading {
    flex-direction: column
  }
  .panel-heading .icon-disc {
    width: 48px;
    height: 48px
  }
  .panel-heading p {
    min-height: 76px
  }
  .check-list li {
    font-size: 13px
  }
  .learning-panel .check-list {
    min-height: 87px
  }
  .flashcard-scene,.game-art {
    height: 147px
  }
  .game-art img {
    width: 190px;
    height: 190px
  }
  .lesson-art {
    aspect-ratio: 1.5
  }
  .lesson-art figcaption {
    width: 57%;
    right: 1%;
    top: 9%
  }
  .lesson-art strong {
    font-size: 12px
  }
  .lesson-art span {
    font-size: 9px
  }
  .method-flashcard {
    width: 83%;
    padding: 5px
  }
  .method-flashcard strong {
    font-size: 21px
  }
  .card-back {
    height: 120px;
    top: 16px
  }
  .course-intro .course-note {
    max-width: 100%;
    padding-block: 2px
  }
  .course-grid {
    grid-template-columns: 1fr
  }
  .featured-course {
    grid-template-columns: 40% 60%
  }
  .course-portrait {
    min-height: 250px;
    max-height: 290px
  }
  .course-portrait>span {
    font-size: 19px
  }
  .course-details {
    padding: 5px 16px 5px 25px
  }
  .course-details>p {
    max-width: 400px;
    font-size: 16px
  }
  .upcoming-courses {
    padding: 25px
  }
  .upcoming-content p {
    max-width: 400px
  }
  .upcoming-content ul {
    font-size: 16px
  }
  .upcoming-content small {
    max-width: none
  }
  .membership-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px
  }
  .membership-benefits {
    grid-column: 1/-1;
    padding: 0
  }
  .membership-benefits .check-list {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 12px
  }
  .membership-benefits>p {
    max-width: none
  }
  .pricing-plan {
    min-height: 240px
  }
  .footer-inner {
    flex-direction: column;
    gap: 8px
  }
  .footer-brand {
    width: 150px
  }
  .footer-content nav {
    justify-content: center
  }
  .footer-content>p {
    text-align: center
  }
  .footer-content nav a:last-child {
    padding-right: 12px
  }
}

@media(max-width:680px) {
  :root {
    --gutter: 20px;
    --section-gap: 32px
  }
  h2 {
    font-size: 29px
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: .22em
  }
  .header-inner {
    min-height: 100px;
    gap: 12px;
    align-items: center
  }
  .brand {
    width: 145px;
    margin-bottom: 0
  }
  .header-utilities {
    gap: 6px 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 225px;
    font-size: 13px
  }
  .header-utilities .button {
    min-height: 39px;
    padding: 9px 18px;
    font-size: 14px
  }
  .language-switch {
    gap: 3px
  }
  .language-switch a {
    min-width: 25px;
    padding-block: 8px
  }
  .login-link {
    padding-block: 8px
  }
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: 25px
  }
  .hero-copy {
    padding-block: 34px 27px
  }
  .hero-copy h1 {
    font-size: clamp(43px,10.2vw,65px);
    margin-bottom: 16px
  }
  .hero-copy p:not(.eyebrow) {
    font-size: 16px;
    max-width: 440px
  }
  .hero-copy .eyebrow {
    font-size: 10px
  }
  .hero::after {
    background: linear-gradient(#fffffff0,#ffffff99 50%,#ffffff00)
  }
  .hero-background {
    object-position: 70% center
  }
  .flag-ribbon {
    left: 0;
    bottom: 0;
    width: 120%;
    height: 75px
  }
  .learning-collage {
    height: 300px;
    width: 100%;
    max-width: 510px;
    margin: 0 auto
  }
  .alphabet-preview {
    width: 66%;
    height: 202px;
    top: 0
  }
  .alphabet-content {
    padding: 19px 12px
  }
  .alphabet-content>strong {
    font-size: 18px
  }
  .letter-row>span {
    font-size: 31px
  }
  .letter-row small {
    font-size: 9px
  }
  .space-preview {
    right: 0;
    top: 11px;
    height: 175px;
    width: 36%;
    padding-top: 21px
  }
  .space-preview>strong {
    font-size: 27px
  }
  .hero-flashcard {
    width: 36%;
    left: 9%;
    bottom: 0
  }
  .chat-preview {
    width: 52%;
    height: 131px;
    bottom: 0
  }
  .chat-copy p {
    font-size: 11px
  }
  .chat-copy small {
    font-size: 9px
  }
  .hero-flashcard strong {
    font-size: 23px
  }
  .benefit-row {
    gap: 18px 14px;
    padding-block: 21px
  }
  .benefit {
    align-items: flex-start;
    gap: 8px
  }
  .benefit .icon-disc {
    width: 38px;
    height: 38px
  }
  .benefit svg {
    width: 23px;
    height: 23px
  }
  .benefit h2 {
    font-size: 13px
  }
  .benefit p {
    font-size: 12px
  }
  .learning-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }
  .learning-panel {
    padding: 20px
  }
  .panel-heading {
    flex-direction: row;
    gap: 14px
  }
  .panel-heading .icon-disc {
    width: 56px;
    height: 56px
  }
  .panel-heading h3 {
    font-size: 22px
  }
  .panel-heading p {
    font-size: 15px;
    min-height: 0
  }
  .learning-panel .check-list {
    min-height: 0;
    margin-block: 18px
  }
  .check-list li {
    font-size: 15px
  }
  .lesson-art {
    aspect-ratio: 1.9
  }
  .lesson-art strong {
    font-size: 17px
  }
  .lesson-art span {
    font-size: 12px
  }
  .lesson-art figcaption {
    right: 3%;
    width: 52%;
    top: 10%
  }
  .flashcard-scene,.game-art {
    height: 215px
  }
  .method-flashcard {
    width: 65%;
    padding: 7px 7px 12px;
    max-width: 260px
  }
  .method-flashcard strong {
    font-size: 28px
  }
  .card-back {
    height: 160px;
    width: 60%;
    max-width: 250px;
    top: 30px
  }
  .game-art img {
    width: 275px;
    height: 275px;
    bottom: -25px
  }
  .in-house-note {
    font-size: 14px;
    margin-top: 22px
  }
  .matilda-inner {
    min-height: 530px;
    padding-top: 30px;
    display: block
  }
  .matilda-copy {
    width: 100%;
    max-width: none
  }
  .matilda-copy>p:not(.eyebrow) {
    font-size: 15px;
    max-width: 430px
  }
  .matilda h2 {
    font-size: 29px
  }
  .matilda .scenic-background {
    height: 270px;
    top: auto;
    bottom: 0;
    object-position: 65% center
  }
  .matilda::after {
    background: linear-gradient(#eef8ff 0 42%,#eef8ff00 61%)
  }
  /* Reserve the artwork area below the longer Russian copy. */
  html:lang(ru) .matilda-inner {
    min-height: 0;
    padding-bottom: 290px
  }
  html:lang(ru) .matilda::after {
    background: linear-gradient(#eef8ff 0 calc(100% - 270px),#eef8ff00 calc(100% - 200px))
  }
  .matilda-labels {
    position: absolute;
    bottom: 17px;
    right: 20px;
    margin: 0;
    gap: 8px
  }
  .matilda-labels span {
    font-size: 11px;
    padding: 8px 12px
  }
  .matilda-labels b {
    font-size: 15px
  }
  .course-intro>div>p:last-child {
    font-size: 15px
  }
  .course-intro .course-note {
    font-size: 14px
  }
  .featured-course {
    grid-template-columns: 1fr;
    padding: 12px
  }
  .course-portrait {
    height: 215px;
    min-height: 0;
    max-height: none
  }
  .course-portrait img {
    object-position: center 23%
  }
  .course-portrait>span {
    right: 15%;
    top: 15%
  }
  .course-details {
    padding: 18px 6px 3px
  }
  .course-details h3 {
    font-size: 25px
  }
  .course-details>p {
    font-size: 15px
  }
  .course-price {
    margin-block: 12px
  }
  .course-price>strong {
    font-size: 38px
  }
  .alternative-link {
    min-height: 44px;
    font-size: 14px
  }
  .availability {
    font-size: 12px
  }
  .upcoming-courses {
    padding: 22px 17px
  }
  .upcoming-content {
    gap: 12px
  }
  .upcoming-content h3 {
    font-size: 21px
  }
  .upcoming-content .icon-disc {
    width: 40px;
    height: 40px
  }
  .upcoming-content svg {
    width: 26px;
    height: 26px
  }
  .upcoming-content p,.upcoming-content ul {
    font-size: 14px
  }
  .membership-inner {
    padding-block: 30px 25px
  }
  .membership-heading h2 {
    font-size: 31px
  }
  .membership-heading>p:last-child {
    font-size: 17px
  }
  .membership-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }
  .membership-benefits .check-list {
    grid-template-columns: 1fr;
    gap: 9px
  }
  .membership-benefits>p {
    font-size: 13px
  }
  .pricing-plan {
    min-height: 250px;
    padding: 24px 22px 13px
  }
  .pricing-plan h3 {
    font-size: 19px
  }
  .plan-price strong {
    font-size: 44px
  }
  .plan-detail {
    font-size: 14px
  }
  .pricing-plan .alternative-link {
    font-size: 14px
  }
  .membership::after {
    background: #ffffffe8
  }
  .membership-footnote {
    font-size: 12px;
    line-height: 1.5
  }
  .site-footer {
    padding-block: 23px 110px
  }
  .footer-content nav {
    row-gap: 1px
  }
  .footer-content nav a {
    padding: 12px;
    font-size: 13px
  }
  .footer-content nav a+a::before {
    display: none
  }
  .footer-content>p {
    font-size: 11px;
    line-height: 1.6;
    max-width: 370px
  }
}

@media(max-width:370px) {
  :root {
    --gutter: 15px
  }
  .brand {
    width: 120px
  }
  .header-utilities {
    column-gap: 8px
  }
  .hero-copy h1 {
    font-size: 42px
  }
  .alphabet-content {
    padding-inline: 7px
  }
  .alphabet-content>strong {
    font-size: 16px
  }
  .space-preview>strong {
    font-size: 23px
  }
  .chat-preview>img {
    width: 28%
  }
  .chat-copy p {
    font-size: 10px
  }
  .letter-row small {
    font-size: 8px
  }
  .panel-heading {
    gap: 10px
  }
  .panel-heading .icon-disc {
    width: 46px;
    height: 46px
  }
  .lesson-art strong {
    font-size: 14px
  }
  .lesson-art span {
    font-size: 10px
  }
  .benefit .icon-disc {
    width: 32px;
    height: 32px
  }
  .benefit h2 {
    font-size: 12px
  }
  .matilda-inner {
    min-height: 560px
  }
}

@media(max-width:680px) {
  .game-art {
    margin-top: 22px
  }
  .game-art img {
    width: 250px;
    height: 250px;
    bottom: -20px
  }
  .upcoming-courses {
    background-image: linear-gradient(90deg,#e9f5fff5,#edf7ffbd),url('../assets/images/scenery/russian-skyline.webp')
  }
}