/* Mobile layout is deliberately separate from the approved desktop compositions. */
@media (max-width: 1023px) {
  body.school-site .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  body.school-site .footer-col { min-width: 0; }
  body.school-site .footer-col a { overflow-wrap: anywhere; }
  body.school-site .footer-col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  /* One phone layout formula shared by the homepage and every child page.
     The gutter grows gently on wider phones instead of jumping at a breakpoint. */
  body.school-site {
    --phone-gutter: clamp(16px, 4.25vw, 22px);
    --phone-section-space: clamp(32px, 8vw, 44px);
    --phone-card-space: clamp(16px, 4.5vw, 22px);
    --phone-card-gap: clamp(12px, 3.2vw, 16px);
    --phone-card-radius: 24px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.school-site :is(main, section, article, aside, .container, .glass-card, .card) {
    min-width: 0;
  }

  body.school-site :is(img, video, iframe, canvas, svg) {
    max-width: 100%;
  }

  body.school-site :is(.container, .header > .container) {
    width: calc(100% - 2 * var(--phone-gutter)) !important;
    margin-inline: auto !important;
  }

  body.school-site:not(.home-premium) :is(.cards-grid, .features-grid, .pricing-grid, .steps-grid, .refer-mutual__grid, .refer-terms__grid) > *,
  body.school-site.home-premium :is(.steps-grid, .testimonials-grid, .advantages-grid, .pricing-preview-grid, .result-grid) > * {
    min-width: 0;
    max-width: 100%;
  }

  body.school-site .container,
  body.school-site.home-premium .hero > .container,
  body.school-site.home-premium .testimonials .container {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--phone-gutter)) !important;
    max-width: 560px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body.school-site .header > .container {
    width: calc(100% - 2 * var(--phone-gutter)) !important;
    padding-inline: 0 !important;
  }

  body.school-site .header .logo-icon { width: 32px; height: 37px; }
  body.school-site .header .logo-wordmark { width: 112px; height: auto; }
  body.school-site .header .nav { min-height: 64px; }

  body.school-site :is(.btn-primary, .btn-secondary, .header-cta, .button) {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }

  body.school-site :is(input, select, textarea) { font-size: 16px !important; }
  body.school-site .modal-content { width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 24px 20px !important; }

  body.school-site:not(.home-premium) :is(.hero, .contacts-hero, .policy-hero, .pricing-hero, .refer-hero, .success-main),
  body.school-site:not(.home-premium) :is(.section, .article-section, .faq, .cta-section, .pricing-included, .refer-mutual, .refer-steps, .refer-terms, .refer-final) {
    padding-block: var(--phone-section-space) !important;
  }

  body.school-site:not(.home-premium) h1 { font-size: clamp(29px, 7.8vw, 36px) !important; line-height: 1.15 !important; }
  body.school-site:not(.home-premium) :is(h2, .section-title) { font-size: clamp(24px, 6.5vw, 29px) !important; line-height: 1.2 !important; }
  body.school-site:not(.home-premium) :is(.hero-subtitle, .section-lead, .section-subtitle) { font-size: 15px !important; line-height: 1.6 !important; }
  body.school-site:not(.home-premium) :is(.cards-grid, .features-grid, .pricing-grid, .steps-grid, .refer-mutual__grid, .refer-terms__grid) { gap: var(--phone-card-gap) !important; }
  body.school-site:not(.home-premium) :is(.glass-card, .card, .feature-card, .pricing-card, .refer-mutual__card, .refer-terms__card) { box-sizing: border-box; width: 100%; max-width: 100%; padding: var(--phone-card-space) !important; border-radius: var(--phone-card-radius) !important; min-height: 0; }
  body.school-site:not(.home-premium) .pricing-duration-panel { padding: 16px !important; }
  body.school-site:not(.home-premium) .pricing-duration-panel :is(button, label) { min-width: 0; }
  body.school-site:not(.home-premium) :is(.cta-content, .refer-final__inner) { width: 100%; padding: 24px 20px !important; }
  body.school-site:not(.home-premium) .policy-document { padding: 20px !important; overflow-wrap: anywhere; }
  body.school-site:not(.home-premium) .policy-document a { overflow-wrap: anywhere; word-break: break-word; }

  body.school-site.page-pricing .pricing-duration-panel { margin-bottom: 24px !important; }
  body.school-site.page-pricing .pricing-card,
  body.school-site.page-pricing .pricing-card.featured,
  body.school-site.page-pricing .pricing-card:hover,
  body.school-site.page-pricing .pricing-card.featured:hover {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 20px !important;
    transform: none !important;
  }
  body.school-site.page-pricing .pricing-card.featured { padding-top: 60px !important; }
  body.school-site.page-pricing .pricing-header { min-height: 0 !important; margin-bottom: 16px !important; padding-bottom: 16px !important; }
  body.school-site.page-pricing .pricing-card .pricing-title { margin: 0 !important; padding: 0 !important; font-size: 20px !important; }
  body.school-site.page-pricing .pricing-card .pricing-price { font-size: 32px !important; margin: 12px 0 8px !important; }
  body.school-site.page-pricing .pricing-desc { min-height: 0 !important; font-size: 14px !important; line-height: 1.55 !important; }
  body.school-site.page-pricing .pricing-saving { min-height: 0 !important; margin-top: 8px !important; }
  body.school-site.page-pricing .pricing-saving:empty { display: none; }
  body.school-site.page-pricing .pricing-features { margin: 16px 0 0 !important; padding: 0 !important; }
  body.school-site.page-pricing .pricing-features li { margin: 0 !important; padding: 10px 0 10px 24px !important; font-size: 14px !important; line-height: 1.5; }
  body.school-site.page-pricing .pricing-features li::before { top: 10px; }
  body.school-site.page-pricing .tariff-button { border-radius: 999px !important; }
  body.school-site.page-pricing .pricing-trust-rail { gap: 0; margin-block: 20px; }
  body.school-site.page-pricing .pricing-trust-rail > div { padding-block: 12px; }

  body.school-site.home-premium > section,
  body.school-site.home-premium .outcome-story {
    min-height: 0 !important;
    padding-block: 36px !important;
  }

  body.school-site.home-premium .hero { padding-top: 24px !important; }
  body.home-premium .hero > .container { gap: 24px !important; }
  body.home-premium .hero-kicker { margin-bottom: 16px !important; font-size: 12px !important; }
  body.home-premium .hero-title { max-width: none; margin-bottom: 16px !important; font-size: clamp(31px, 8.6vw, 39px) !important; line-height: 1.12 !important; }
  body.home-premium .hero-subtitle { margin-bottom: 12px !important; font-size: 15px !important; line-height: 1.6 !important; }
  body.home-premium .hero-promise { margin-block: 12px !important; font-size: 14px !important; }
  body.home-premium .hero-cta { margin-top: 16px !important; }
  body.home-premium .hero-rating { margin-block: 12px 0 !important; }
  body.home-premium .hero-rating__card { justify-content: center; gap: 8px; padding: 12px 16px; }
  body.home-premium .hero-image.hero-stage { min-height: 340px !important; height: 340px !important; border-radius: 26px !important; }
  /* Account for the rail becoming shorter as its text wraps less on wider phones. */
  body.home-premium .hero-child-slot {
    bottom: clamp(88px, calc(198px - 20vw), 134px) !important;
    display: block !important;
    overflow: visible !important;
  }
  body.home-premium .hero-child-photo {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    width: clamp(210px, 42vw, 230px) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
  body.home-premium .hero-stage__rail { inset: auto 8px 8px !important; }
  body.home-premium .hero-stage__rail > div { padding: 10px !important; }
  body.home-premium .hero-stage__rail strong { font-size: 12px !important; }
  body.home-premium .hero-stage__rail p { font-size: 11px !important; line-height: 1.4 !important; }

  body.school-site.home-premium :is(.section-title, .outcome-story__center h2, .child-journey__intro h2, .story-text h2, .parent-proof-panel h2) {
    max-width: none !important;
    font-size: clamp(24px, 6.5vw, 29px) !important;
    line-height: 1.2 !important;
    margin: 0 0 16px !important;
    text-wrap: balance;
    text-align: left !important;
  }

  body.school-site.home-premium :is(.section-lead, .story-text > p, .parent-proof-intro, .child-journey__intro > p:last-child) {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
    text-align: left !important;
  }

  body.home-premium .outcome-story__canvas {
    width: calc(100% - 32px) !important;
    padding: 20px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }
  body.home-premium .outcome-story__center { grid-column: 1 / -1 !important; padding: 0 !important; }
  body.home-premium .outcome-story__sticky { height: auto !important; inset: auto !important; }
  body.home-premium .outcome-story__item,
  body.home-premium .outcome-story__item:is(.is-active, [aria-current="true"]) {
    grid-column: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border-radius: 18px !important;
    white-space: normal !important;
  }
  body.home-premium .outcome-story__item strong {
    min-width: 0;
    max-width: 100%;
    font-size: 14px !important;
    line-height: 1.4;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
  body.home-premium .outcome-story__item.outcome-story__item--5 { grid-column: 1 / -1 !important; }

  body.home-premium .steps-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 20px !important; }
  body.home-premium .step-card { grid-template-columns: 32px minmax(0, 1fr) !important; grid-template-rows: auto auto; gap: 6px 12px !important; padding: 18px !important; min-height: 0 !important; border-radius: 24px !important; }
  body.home-premium .step-number { grid-row: 1 / span 2; width: 32px; height: 32px; font-size: 14px; }
  body.home-premium .step-card h3 { grid-column: 2; min-height: 0 !important; font-size: 17px !important; line-height: 1.35 !important; }
  body.home-premium .step-card p { grid-column: 2; max-width: none; font-size: 14px !important; line-height: 1.55 !important; }
  body.home-premium .section-actions { margin-top: 20px !important; }

  body.home-premium .child-journey__container { width: calc(100% - 2 * var(--phone-gutter)); max-width: 560px; margin-inline: auto; }
  body.home-premium .child-journey__intro { margin-bottom: 16px; }
  body.home-premium .child-journey__nav-wrap { padding: 6px; border-radius: 24px !important; }
  body.home-premium .child-journey__tabs { scrollbar-width: none; }
  body.home-premium .child-journey__tabs::-webkit-scrollbar { display: none; }
  body.home-premium .child-journey__details { padding: 20px; border-radius: 24px !important; }
  body.home-premium .child-journey__panel h3 { margin-top: 8px; font-size: 22px; }
  body.home-premium .child-journey__summary { font-size: 15px; line-height: 1.55; }
  body.home-premium .child-journey__columns { gap: 16px; margin-top: 16px; }
  body.home-premium .child-journey__columns > div { padding: 0; background: transparent; border: 0; border-radius: 0; }
  body.home-premium .child-journey__columns h4 { margin-bottom: 8px; font-size: 15px; }
  body.home-premium .child-journey__columns li { font-size: 14px; line-height: 1.5; }
  body.home-premium .child-journey__footer { margin-top: 16px; gap: 12px; }
  body.home-premium .child-journey__footer p { font-size: 13px; }

  /* One full-width review, not a narrow sliver with arrows over the quote. */
  body.home-premium .testimonials .section-lead { margin-inline: 0 !important; }
  body.home-premium .testimonials-grid { display: flex; gap: 16px; padding: 0; margin: 20px 0 0; scroll-padding-inline: 0; align-items: stretch; }
  body.home-premium .testimonials .testimonials-grid .testimonial-card,
  body.home-premium .testimonials .testimonials-grid .testimonial-card:last-child {
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    padding: 16px !important;
    border-radius: 26px !important;
    scroll-snap-align: center;
  }
  body.home-premium .testimonials .testimonial-photo-slot { aspect-ratio: 16 / 9; height: auto !important; min-height: 0 !important; margin: 0 !important; border-radius: 18px !important; }
  body.home-premium .testimonials .testimonial-photo-slot img { object-fit: cover !important; }
  body.home-premium .testimonials .testimonial-text { font-size: 15px; line-height: 1.6; }
  body.home-premium .testimonials .testimonial-author { align-self: end; gap: 3px; font-size: 14px; }
  body.home-premium .testimonials .testimonial-author span { font-size: 12px; }
  body.home-premium .testimonials .testimonial-piece { top: 24px; right: 24px; width: 34px; }
  body.home-premium .testimonials-mobile-nav { position: static; display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; padding: 0; transform: none; pointer-events: auto; }
  body.home-premium .testimonials-arrow { width: 44px; height: 44px; padding: 0; font-size: 24px; }
  body.home-premium .testimonials-position { color: var(--school-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

  body.home-premium .teacher-trust-layout { gap: 20px !important; }
  body.home-premium .teacher-trust-copy { grid-row: auto; gap: 0; }
  body.home-premium .teacher-media-column { grid-row: 2; }
  body.home-premium .teacher-points { grid-row: 3; }
  body.home-premium .teacher-media-column { gap: 12px !important; }
  body.home-premium .teacher-photo-panel,
  body.home-premium .teacher-lesson-slot { border-radius: 24px !important; }
  body.home-premium .teacher-points { margin-top: 0 !important; gap: 10px !important; }
  body.home-premium .teacher-point { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 6px 12px !important; padding: 16px !important; }
  body.home-premium .teacher-point > span { width: 32px; height: 32px; grid-row: 1 / span 2 !important; font-size: 14px !important; }
  body.home-premium .teacher-point > strong { font-size: 15px !important; }
  body.home-premium .teacher-point > p { grid-column: 2 !important; font-size: 14px !important; }
  body.home-premium .trial-band-inner { gap: 20px; }
  body.home-premium .trial-band h2 { font-size: 26px !important; line-height: 1.2; }
  body.home-premium .trial-band p { font-size: 15px; line-height: 1.6; }

  body.home-premium :is(.story-panel, .parent-proof-panel) { gap: 20px !important; padding: 20px !important; border-radius: 26px !important; }
  body.home-premium .signal-item { padding: 14px !important; grid-template-columns: 28px minmax(0, 1fr); gap: 8px 10px; min-height: 0; }
  body.home-premium .signal-mark { grid-row: auto !important; }
  body.home-premium .signal-item p { font-size: 14px !important; }
  body.home-premium .signal-item h3 { font-size: 15px !important; }
  body.home-premium .result-grid { gap: 10px !important; grid-template-rows: auto; margin-top: 20px; }
  body.home-premium .result-card:first-child,
  body.home-premium .result-card:not(:first-child) { display: block; min-height: 0; padding: 18px !important; border-radius: 24px !important; }
  body.home-premium .result-card:first-child h3,
  body.home-premium .result-card:not(:first-child) h3 { max-width: none; margin: 10px 0 6px; font-size: 18px !important; line-height: 1.3; }
  body.home-premium .result-card p,
  body.home-premium .result-card:first-child p { font-size: 14px !important; line-height: 1.55 !important; }
  body.home-premium .proof-label { margin-bottom: 12px; }
  body.home-premium .proof-step { padding: 12px 12px 12px 26px !important; }
  body.home-premium .proof-step h3 { font-size: 15px !important; }
  body.home-premium .proof-step p { font-size: 14px !important; }

  body.home-premium .pricing-preview .container > h3.section-title { font-size: 18px !important; margin-top: 16px !important; }
  body.home-premium .pricing-preview-grid { gap: 12px; margin-top: 20px; }
  body.home-premium .pricing-preview-card { min-height: 0; padding: 20px !important; border-radius: 24px !important; gap: 0; }
  body.home-premium .pricing-preview-label { margin-bottom: 0; font-size: 12px; line-height: 1.4; }
  body.home-premium .pricing-preview-price { font-size: 25px !important; margin-block: 8px; }
  body.home-premium .pricing-preview-meta { font-size: 14px !important; margin-block: 8px 16px; }
  body.home-premium .advantages-grid { gap: 10px !important; margin-top: 20px !important; }
  body.home-premium .age-card.advantage-card,
  body.home-premium .age-card.advantage-card:last-child { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 6px 12px; min-height: 0; padding: 18px !important; border-radius: 24px !important; }
  body.home-premium .age-card.advantage-card .advantage-icon { grid-column: 1; grid-row: 1 / span 2; width: 42px; min-width: 42px; min-height: 36px; font-size: 14px !important; white-space: nowrap; }
  body.home-premium .age-card.advantage-card h3 { grid-column: 2; margin: 0 !important; font-size: 16px !important; }
  body.home-premium .age-card.advantage-card p { grid-column: 2; font-size: 14px !important; }
  body.home-premium .faq-question { padding: 16px !important; gap: 12px; }
  body.home-premium .faq-question h3 { font-size: 16px; line-height: 1.4; }
  body.home-premium .faq-answer { font-size: 14px; }

  body.home-premium .parent-guides__top { gap: 16px; margin-bottom: 16px; }
  body.home-premium .parent-guides__controls { width: 100%; justify-content: center; }
  body.home-premium .parent-guide-slide__index { padding: 16px 20px 0; }
  body.home-premium .parent-guide-slide { min-height: 0; grid-template-rows: auto auto auto; }
  body.home-premium .parent-guide-slide__index { grid-row: auto; }
  body.home-premium .parent-guide-slide__copy { padding: 16px 20px 20px; }
  body.home-premium .parent-guide-slide h3 { font-size: 23px; }
  body.home-premium .parent-guide-slide p { font-size: 14px; }
  body.home-premium .parent-guide-slide__chess { min-height: 100px; height: 100px; margin: 0 20px 20px; }
  body.home-premium .parent-guide-slide__chess img { max-height: 86px; width: auto; }
  body.home-premium .final-cta h2 { font-size: 27px !important; line-height: 1.2; }
  body.home-premium .final-cta p { font-size: 15px; line-height: 1.6; }
  body.home-premium .final-cta__steps { gap: 10px; margin-block: 20px; }
  body.school-site .footer { padding-block: 32px !important; }
}