/* English mobile typography copied from the approved English desktop edition. */
@media (max-width: 720px) {
  html[lang="en"] .site-header .header-brand,
  html[lang="en"] .hero .hero-sub,
  html[lang="en"] .hero .hero-sub *,
  html[lang="en"] .hero .hero-world,
  html[lang="en"] .hero .hero-world *,
  html[lang="en"] .hero .hero-composed-copy h1,
  html[lang="en"] .hero .hero-composed-copy h1 * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-style: normal !important;
    font-synthesis: none !important;
  }

  html[lang="en"] .hero .hero-sub,
  html[lang="en"] .hero .hero-sub *,
  html[lang="en"] .hero .hero-world,
  html[lang="en"] .hero .hero-world * {
    font-weight: 900 !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] .hero .hero-composed-copy h1,
  html[lang="en"] .hero .hero-composed-copy h1 * {
    font-weight: 650 !important;
    letter-spacing: -.045em !important;
  }

  html[lang="en"] main p,
  html[lang="en"] main p *,
  html[lang="en"] main li,
  html[lang="en"] main li *,
  html[lang="en"] main small,
  html[lang="en"] main small * {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] #about .mobile-about-copy,
  html[lang="en"] #about .mobile-about-copy * {
    color: #454440 !important;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 400 !important;
  }

  html[lang="en"] #about .about-points li,
  html[lang="en"] #about .about-points li > span {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
    font-weight: 500 !important;
  }

  html[lang="en"] #about .about-points li {
    color: #454440 !important;
  }

  html[lang="en"] #about .about-points li > span {
    color: #111 !important;
    background: #ffd95a !important;
  }

  html[lang="en"] #about .about-points li > span::after {
    background: #ffd95a !important;
  }

  html[lang="en"] .desktop-reasons-layout .slash-heading {
    font-family: var(--font-sorotouch) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list p,
  html[lang="en"] .desktop-reasons-layout .reason-list p * {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] .voices .voice > p,
  html[lang="en"] .voices .voice > p * {
    color: #42413d !important;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] .voices > h2 {
    font-family: var(--font-sorotouch) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  /* Follow the approved Japanese mobile rhythm for the two summary items. */
  html[lang="en"] .hero .hero-mini-info {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 330px) !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-mini-info > div,
  html[lang="en"] .hero .hero-mini-info .target,
  html[lang="en"] .hero .hero-mini-info .worldwide {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 4px !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-mini-info > div::before {
    grid-row: 1 / 3 !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-mini-info strong,
  html[lang="en"] .hero .hero-mini-info span {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-mini-info strong {
    align-self: end !important;
    font-size: .79rem !important;
    line-height: 1.1 !important;
  }

  html[lang="en"] .hero .hero-mini-info span {
    align-self: start !important;
    font-size: .71rem !important;
    line-height: 1.15 !important;
  }

  /* Match the Japanese mobile two-by-two class overview. */
  html[lang="en"] .hero .hero-info {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    width: min(100%, 340px) !important;
    margin: 5px auto 0 !important;
    padding: 0 !important;
  }

  html[lang="en"] .hero .hero-info > div,
  html[lang="en"] .hero .hero-info > div:nth-child(n) {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-info-icon {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-info p,
  html[lang="en"] .hero .hero-info p span {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: .74rem !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }

  html[lang="en"] .hero .hero-info .kids p {
    display: grid !important;
    gap: 2px !important;
  }

  html[lang="en"] .hero .hero-info .kids .origin-accent {
    font-size: .54rem !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .hero .hero-info .kids .origin-main {
    font-size: .72rem !important;
    white-space: normal !important;
  }

  /* Give both fee cards the same internal left edge. */
  html[lang="en"] #price .price-item {
    justify-content: center !important;
    justify-items: stretch !important;
  }

  html[lang="en"] #price .price-item > .price-label,
  html[lang="en"] #price .price-item > .price-amount {
    box-sizing: border-box !important;
    width: min(100%, 250px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: left !important;
  }

  /* Crop the grey strips embedded at both sides of the SoroTouch method image. */
  html[lang="en"] .feature-intro .method-card {
    overflow: hidden !important;
  }

  html[lang="en"] .feature-intro .method-card .rounded-photo {
    display: block !important;
    width: 129% !important;
    max-width: none !important;
    height: auto !important;
    margin-right: -14.5% !important;
    margin-left: -14.5% !important;
    object-fit: contain !important;
  }

  /* Mobile readability pass: keep supporting copy at 12px+ and body copy near 14–15px. */
  html[lang="en"] body {
    font-size: 16px !important;
  }

  html[lang="en"] .site-header .header-brand {
    font-size: .8rem !important;
  }

  html[lang="en"] .hero .hero-sub {
    font-size: 1.08rem !important;
    line-height: 1.22 !important;
  }

  html[lang="en"] .hero .hero-world {
    font-size: 1rem !important;
    line-height: 1.24 !important;
  }

  html[lang="en"] .hero .hero-lead {
    font-size: .88rem !important;
    line-height: 1.68 !important;
  }

  html[lang="en"] .hero .hero-mini-info strong {
    font-size: .82rem !important;
  }

  html[lang="en"] .hero .hero-mini-info span {
    font-size: .76rem !important;
    line-height: 1.2 !important;
  }

  html[lang="en"] .hero .hero-info p,
  html[lang="en"] .hero .hero-info p span {
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  html[lang="en"] .hero .hero-info .kids .origin-accent {
    font-size: .62rem !important;
  }

  html[lang="en"] .hero .hero-info .kids .origin-main {
    font-size: .76rem !important;
  }

  html[lang="en"] .notice,
  html[lang="en"] .section-label {
    font-size: .75rem !important;
    line-height: 1.45 !important;
  }

  html[lang="en"] #about .mobile-about-copy,
  html[lang="en"] .mobile-feature-copy,
  html[lang="en"] .feature-learning-pillars > p,
  html[lang="en"] .method-card > p,
  html[lang="en"] .teacher-section > div > p,
  html[lang="en"] .access-lead {
    font-size: .92rem !important;
    line-height: 1.72 !important;
  }

  html[lang="en"] #about .mobile-about-copy strong {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
  }

  html[lang="en"] #about .about-points li {
    font-size: .88rem !important;
    line-height: 1.58 !important;
  }

  html[lang="en"] #about .about-points li > span {
    font-size: .78rem !important;
  }

  html[lang="en"] .method-card > h3 {
    font-size: 1.12rem !important;
    line-height: 1.38 !important;
  }

  html[lang="en"] .feature-learning-pillars .hero-pillar strong {
    font-size: 1rem !important;
  }

  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    font-size: .8rem !important;
    line-height: 1.3 !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list p {
    font-size: .9rem !important;
    line-height: 1.4 !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list small {
    font-size: .75rem !important;
    line-height: 1.3 !important;
  }

  html[lang="en"] #price .price-label {
    font-size: .92rem !important;
    line-height: 1.3 !important;
  }

  html[lang="en"] #price .price-amount {
    font-size: 1.82rem !important;
  }

  html[lang="en"] #price .price-notes p,
  html[lang="en"] #price .detail-grid li {
    font-size: .86rem !important;
    line-height: 1.55 !important;
  }

  html[lang="en"] .voices .voice > p {
    font-size: .92rem !important;
    line-height: 1.72 !important;
  }

  html[lang="en"] .faq-list summary {
    font-size: .94rem !important;
    line-height: 1.45 !important;
  }

  html[lang="en"] .faq-list p {
    font-size: .88rem !important;
    line-height: 1.65 !important;
  }

  html[lang="en"] .access-section .access-card,
  html[lang="en"] .contact-card,
  html[lang="en"] .site-footer {
    font-size: .84rem !important;
  }

  html[lang="en"] .site-footer p,
  html[lang="en"] .site-footer a,
  html[lang="en"] .site-footer span {
    line-height: 1.5 !important;
  }

  /* Final exact English desktop face/weight match for the repeatedly reviewed areas. */
  html[lang="en"] body .hero .hero-sub,
  html[lang="en"] body .hero .hero-sub *,
  html[lang="en"] body .hero .hero-world,
  html[lang="en"] body .hero .hero-world * {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body .hero .hero-lead,
  html[lang="en"] body .hero .hero-lead * {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top #about .about-points li,
  html[lang="en"] body main#top #about .about-points li > span {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .slash-heading {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .reason-list p,
  html[lang="en"] body main#top .desktop-reasons-layout .reason-list p *,
  html[lang="en"] body main#top .desktop-reasons-layout .reason-list small {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .voices > h2 {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .voices .voice > p,
  html[lang="en"] body main#top .voices .voice > p * {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  /* Final mobile legibility pass: keep secondary UI text comfortably readable. */
  html[lang="en"] .site-header .language-nav a {
    font-size: .74rem !important;
    line-height: 1.25 !important;
  }

  html[lang="en"] .hero .hero-info .origin-accent {
    font-size: .72rem !important;
    line-height: 1.25 !important;
  }

  html[lang="en"] .big-cta {
    font-size: .9rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  html[lang="en"] .access-section .access-lead,
  html[lang="en"] .access-section .access-map-card a {
    font-size: .82rem !important;
    line-height: 1.5 !important;
  }

  html[lang="en"] .access-section .access-map-card h3,
  html[lang="en"] .access-section .access-summary-grid h3 {
    font-size: .9rem !important;
    line-height: 1.3 !important;
  }

  html[lang="en"] .access-section .access-summary-grid article > a,
  html[lang="en"] .access-section .access-summary-grid article > p,
  html[lang="en"] .access-section .access-summary-grid p strong {
    font-size: .8rem !important;
    line-height: 1.45 !important;
  }

  html[lang="en"] .site-footer .footer-business-info strong,
  html[lang="en"] .site-footer .footer-privacy-link > span:last-child {
    font-size: .8rem !important;
    line-height: 1.35 !important;
  }

  html[lang="en"] .site-footer .footer-business-name,
  html[lang="en"] .site-footer .footer-business-location {
    font-size: .74rem !important;
    line-height: 1.45 !important;
  }

  /* Refined English mobile first view. */
  html[lang="en"] .hero .hero-composed-copy:first-child {
    width: min(calc(100% - 24px), 380px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  html[lang="en"] .hero .hero-composed-copy h1 {
    margin: 8px auto 10px !important;
    font-size: clamp(2.18rem, 10.8vw, 2.62rem) !important;
    line-height: .98 !important;
    text-align: center !important;
  }

  html[lang="en"] .hero .hero-lead {
    width: min(100%, 354px) !important;
    margin: 0 auto !important;
    font-size: .9rem !important;
    line-height: 1.48 !important;
    text-align: center !important;
  }

  html[lang="en"] .hero .hero-lead .hero-mobile-line {
    margin: 0 !important;
    text-align: center !important;
  }

  html[lang="en"] .hero .hero-mini-info {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(calc(100% - 28px), 318px) !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
  }

  html[lang="en"] .hero .hero-mini-info > div,
  html[lang="en"] .hero .hero-mini-info .target,
  html[lang="en"] .hero .hero-mini-info .worldwide {
    left: auto !important;
    top: auto !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    min-height: 48px !important;
    padding: 3px 1px !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-mini-info strong,
  html[lang="en"] .hero .hero-mini-info span,
  html[lang="en"] .hero .hero-mini-info .worldwide strong,
  html[lang="en"] .hero .hero-mini-info .worldwide span {
    top: auto !important;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 500 !important;
    text-align: left !important;
    transform: none !important;
  }

  html[lang="en"] .hero .hero-info {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 10px !important;
    width: min(calc(100% - 24px), 336px) !important;
    margin: 8px auto 0 !important;
  }

  html[lang="en"] .hero .hero-info > div,
  html[lang="en"] .hero .hero-info > div:nth-child(n) {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 48px !important;
    padding: 2px 0 !important;
  }

  html[lang="en"] .hero .hero-info p,
  html[lang="en"] .hero .hero-info p span,
  html[lang="en"] .hero .hero-info .kids .origin-main {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-size: .76rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    letter-spacing: normal !important;
    text-align: left !important;
  }

  html[lang="en"] .hero .hero-info .kids .origin-accent {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 500 !important;
  }

  /* Exact English desktop heading face and colours for the lower sections. */
  html[lang="en"] body main#top .voices > h2,
  html[lang="en"] body main#top .faq-section > h2,
  html[lang="en"] body main#top .teacher-section h2 {
    font-family: var(--font-sorotouch) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .voices > h2 {
    color: #252b29 !important;
    -webkit-text-fill-color: #252b29 !important;
  }

  html[lang="en"] body main#top .faq-section > h2,
  html[lang="en"] body main#top .teacher-section h2 {
    color: #1f462a !important;
    -webkit-text-fill-color: #1f462a !important;
  }

  /* Centre the three hero messages and keep them visually grouped. */
  html[lang="en"] body main#top .hero .hero-lead {
    box-sizing: border-box !important;
    width: min(calc(100% - 12px), 360px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: .94rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }

  html[lang="en"] body main#top .hero .hero-lead > .hero-mobile-line {
    display: block !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  html[lang="en"] body main#top .hero .hero-lead > .hero-mobile-line:nth-of-type(3),
  html[lang="en"] body main#top .hero .hero-lead > .hero-mobile-line:nth-of-type(6) {
    margin-top: 8px !important;
  }

  html[lang="en"] body main#top .hero .hero-lead br {
    display: none !important;
  }

  /* Match the approved desktop navy header typography on mobile. */
  html[lang="en"] body .site-header .header-brand,
  html[lang="en"] body .site-header .language-nav a,
  html[lang="en"] body .site-header .language-nav a[aria-current="page"] {
    color: #123f73 !important;
    -webkit-text-fill-color: #123f73 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body .site-header .language-nav a[aria-current="page"] {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Use the approved Japanese mobile header sizes on the English page. */
  html[lang="en"] body .site-header .header-brand {
    font-size: .72rem !important;
    line-height: 1 !important;
  }

  html[lang="en"] body .site-header .language-nav a,
  html[lang="en"] body .site-header .language-nav a[aria-current="page"] {
    font-size: .61rem !important;
    line-height: 1 !important;
  }

  /* Final mobile alignment for Ages / Classes. */
  html[lang="en"] body main#top .hero .hero-mini-info {
    width: min(calc(100% - 12px), 348px) !important;
    gap: 6px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info > div {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: 18px 18px !important;
    align-content: center !important;
    column-gap: 5px !important;
    min-height: 48px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .target {
    transform: translateX(15px) !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    transform: translateX(-4px) !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info strong,
  html[lang="en"] body main#top .hero .hero-mini-info span {
    align-self: center !important;
    line-height: 1.12 !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-size: .7rem !important;
    white-space: nowrap !important;
  }

  /* Pull the four overview items into one balanced unit. */
  html[lang="en"] body main#top .hero .hero-info {
    width: min(calc(100% - 14px), 344px) !important;
    gap: 5px 8px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > div,
  html[lang="en"] body main#top .hero .hero-info > div:nth-child(n) {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  html[lang="en"] body main#top .hero .hero-info .kids,
  html[lang="en"] body main#top .hero .hero-info .language {
    transform: translateX(-4px) !important;
  }

  html[lang="en"] body main#top .hero .hero-info .kids .origin-accent {
    transform: translateX(-4px) !important;
  }

  html[lang="en"] body main#top .hero .hero-info-icon {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info p,
  html[lang="en"] body main#top .hero .hero-info .kids p {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    width: max-content !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  html[lang="en"] body main#top .hero .hero-info .language {
    transform: translateX(-9px) !important;
  }

  html[lang="en"] body main#top .hero .hero-info .language p {
    width: max-content !important;
  }

  /* Keep the SoroTouch introduction as one compact reading block. */
  html[lang="en"] body main#top #about > h2 {
    margin-bottom: 5px !important;
  }

  html[lang="en"] body main#top #about .mobile-about-copy {
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: .94rem !important;
    line-height: 1.58 !important;
  }

  html[lang="en"] body main#top #about .mobile-about-copy strong {
    margin: 0 !important;
    font-size: .94rem !important;
    line-height: 1.58 !important;
  }

  html[lang="en"] body main#top #about .mobile-about-copy br {
    display: none !important;
  }

  /* Add breathing room below the flight path and enlarge the main title. */
  html[lang="en"] body main#top .hero .hero-composed-copy h1,
  html[lang="en"] body main#top .hero .hero-composed-copy h1 * {
    letter-spacing: .02em !important;
  }

  html[lang="en"] body main#top .hero .hero-composed-copy h1 {
    margin-top: 17px !important;
    margin-bottom: 10px !important;
    font-size: clamp(2.34rem, 11.5vw, 2.78rem) !important;
  }

  html[lang="en"] body main#top .hero .hero-composed-copy h1 .title-line:last-child {
    color: #2588d8 !important;
    -webkit-text-fill-color: #2588d8 !important;
  }

  html[lang="en"] body main#top .hero .hero-lead,
  html[lang="en"] body main#top .hero .hero-lead * {
    font-weight: 500 !important;
  }

  /* Lock all four overview items to identical icon and text axes. */
  html[lang="en"] body main#top .hero .hero-info {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    width: min(calc(100% - 18px), 342px) !important;
  }

  html[lang="en"] body main#top .hero .hero-info > div,
  html[lang="en"] body main#top .hero .hero-info > div:nth-child(n),
  html[lang="en"] body main#top .hero .hero-info .kids,
  html[lang="en"] body main#top .hero .hero-info .language,
  html[lang="en"] body main#top .hero .hero-info .event,
  html[lang="en"] body main#top .hero .hero-info .hybrid {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 2px !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info .hero-info-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-self: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info p,
  html[lang="en"] body main#top .hero .hero-info .kids p,
  html[lang="en"] body main#top .hero .hero-info .language p,
  html[lang="en"] body main#top .hero .hero-info .event p,
  html[lang="en"] body main#top .hero .hero-info .hybrid p {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    text-align: left !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info .kids .origin-accent,
  html[lang="en"] body main#top .hero .hero-info .kids .origin-main {
    margin-left: 0 !important;
    transform: none !important;
  }

  /* Desktop font treatment for Ages / Classes. */
  html[lang="en"] body main#top .hero .hero-mini-info strong,
  html[lang="en"] body main#top .hero .hero-mini-info span {
    font-family: var(--font-rounded) !important;
    font-style: normal !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info strong {
    font-weight: 700 !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info span {
    font-weight: 900 !important;
  }

  /* Exact column alignment for the four overview items. */
  html[lang="en"] body main#top .hero .hero-info .kids,
  html[lang="en"] body main#top .hero .hero-info .event {
    box-sizing: border-box !important;
    padding-left: 8px !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info .language,
  html[lang="en"] body main#top .hero .hero-info .hybrid {
    box-sizing: border-box !important;
    padding-right: 6px !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info .kids p,
  html[lang="en"] body main#top .hero .hero-info .event p,
  html[lang="en"] body main#top .hero .hero-info .language p,
  html[lang="en"] body main#top .hero .hero-info .hybrid p {
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* “Works” uses exactly the same face and size as “How SoroTouch”. */
  html[lang="en"] body main#top .feature-intro > .pop-heading,
  html[lang="en"] body main#top .feature-intro > .pop-heading span {
    font-family: var(--font-sorotouch) !important;
    font-size: 1.68rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: normal !important;
  }

  /* Match the FAQ and teacher headings to What Parents Say. */
  html[lang="en"] body main#top .faq-section > h2,
  html[lang="en"] body main#top .teacher-section h2 {
    color: #252b29 !important;
    -webkit-text-fill-color: #252b29 !important;
  }

  /* Final clean reset: match the approved English desktop face exactly. */
  html[lang="en"] body main#top .hero .hero-mini-info strong,
  html[lang="en"] body main#top .hero .hero-mini-info span,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide strong,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-family: var(--font-english-readable) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  /* One shared geometry for all four overview items. */
  html[lang="en"] body main#top .hero .hero-info {
    box-sizing: border-box !important;
    grid-template-columns: repeat(2, 164px) !important;
    column-gap: 6px !important;
    row-gap: 5px !important;
    justify-content: center !important;
    width: 334px !important;
    max-width: calc(100% - 18px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .language,
  html[lang="en"] body main#top .hero .hero-info > .event,
  html[lang="en"] body main#top .hero .hero-info > .hybrid {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 30px 128px !important;
    grid-template-rows: 50px !important;
    align-items: center !important;
    column-gap: 4px !important;
    width: 164px !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .hero-info-icon,
  html[lang="en"] body main#top .hero .hero-info > .language .hero-info-icon,
  html[lang="en"] body main#top .hero .hero-info > .event .hero-info-icon,
  html[lang="en"] body main#top .hero .hero-info > .hybrid .hero-info-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-self: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids p,
  html[lang="en"] body main#top .hero .hero-info > .language p,
  html[lang="en"] body main#top .hero .hero-info > .event p,
  html[lang="en"] body main#top .hero .hero-info > .hybrid p {
    grid-column: 2 !important;
    grid-row: 1 !important;
    place-self: center stretch !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 128px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #2d2c2a !important;
    font-family: var(--font-english-readable) !important;
    font-size: .76rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-synthesis: none !important;
    line-height: 1.28 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids p span {
    display: block !important;
    width: 128px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-english-readable) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    letter-spacing: normal !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .origin-accent {
    font-size: .62rem !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .origin-main {
    font-size: .76rem !important;
  }

  /* Match the approved Japanese mobile contact/location typography. */
  html[lang="en"] body main#top .access-section > h2 {
    color: #252b29 !important;
    -webkit-text-fill-color: #252b29 !important;
    font-family: var(--font-sorotouch) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .access-section .access-map-card:first-child h3 {
    color: #55a63b !important;
    -webkit-text-fill-color: #55a63b !important;
  }

  html[lang="en"] body main#top .access-section .access-map-card:nth-child(2) h3 {
    color: #257dc1 !important;
    -webkit-text-fill-color: #257dc1 !important;
  }

  html[lang="en"] body main#top .access-section .access-map-card h3 {
    font-family: var(--font-rounded) !important;
    font-size: .78rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
  }

  /* Centre the visual weight of the four-item unit without collapsing icon/text spacing. */
  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .event {
    transform: translateX(7px) !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .language,
  html[lang="en"] body main#top .hero .hero-info > .event,
  html[lang="en"] body main#top .hero .hero-info > .hybrid {
    grid-template-columns: 30px 126px !important;
    column-gap: 6px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids p,
  html[lang="en"] body main#top .hero .hero-info > .language p,
  html[lang="en"] body main#top .hero .hero-info > .event p,
  html[lang="en"] body main#top .hero .hero-info > .hybrid p {
    width: 126px !important;
  }

  /* Restore the orange Sydney-Born callout with balanced diagonal strokes. */
  html[lang="en"] body main#top .hero .hero-info > .kids .origin-accent {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    color: #e77e3e !important;
    -webkit-text-fill-color: #e77e3e !important;
    font-family: var(--font-english-readable) !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .origin-accent::before,
  html[lang="en"] body main#top .hero .hero-info > .kids .origin-accent::after {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 1px !important;
    flex: 0 0 7px !important;
    background: currentColor !important;
    opacity: .78 !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .origin-accent::before {
    transform: translateY(2px) rotate(55deg) !important;
    transform-origin: right center !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .origin-accent::after {
    transform: translateY(2px) rotate(-55deg) !important;
    transform-origin: left center !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .origin-main {
    display: block !important;
    width: 126px !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  /* Larger, balanced two-line Reasons heading with the callout strokes on line one. */
  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading {
    position: relative !important;
    box-sizing: border-box !important;
    width: min(100%, 350px) !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    font-family: var(--font-sorotouch) !important;
    font-size: clamp(1.48rem, 7vw, 1.78rem) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading .reasons-mobile-break {
    display: block !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::before,
  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::after {
    position: absolute !important;
    top: .18em !important;
    z-index: 1 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: .78em !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::before {
    left: 30px !important;
    content: "\\" !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::after {
    right: 30px !important;
    content: "/" !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .reason-characters {
    top: 108px !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .reason-list {
    margin-top: 142px !important;
  }

  /* Use the exact inherited desktop type treatment for Ages / Classes. */
  html[lang="en"] body main#top .hero .hero-mini-info strong,
  html[lang="en"] body main#top .hero .hero-mini-info span,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide strong,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-family: var(--font-rounded) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info strong,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide strong {
    font-weight: 700 !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info span,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-weight: 900 !important;
  }

  /* Move the complete four-item cluster right as one balanced unit. */
  html[lang="en"] body main#top .hero .hero-info {
    position: relative !important;
    left: 6px !important;
  }

  /* Attach the two callout strokes tightly to the first “7 Reasons” line. */
  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::before {
    left: 88px !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::after {
    right: 88px !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .reason-characters {
    top: 96px !important;
  }

  /* Bring the two left-column items inward while preserving a safe gap to column two. */
  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .event {
    justify-self: end !important;
    grid-template-columns: 30px 116px !important;
    column-gap: 6px !important;
    width: 152px !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids p,
  html[lang="en"] body main#top .hero .hero-info > .event p {
    width: 116px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids .origin-main {
    width: 116px !important;
  }

  /* Bring Ages / 5+ and its icon inward as one unit. */
  html[lang="en"] body main#top .hero .hero-mini-info .target {
    justify-self: end !important;
    box-sizing: border-box !important;
    width: 150px !important;
    transform: none !important;
  }

  /* Final inward nudge requested for the left-side groups. */
  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .event {
    position: relative !important;
    left: 4px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .target {
    position: relative !important;
    left: 5px !important;
  }

  /* Visible rightward move, with the neighbouring column moved enough to prevent overlap. */
  html[lang="en"] body main#top .hero .hero-info {
    left: 10px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .event {
    left: 12px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .language,
  html[lang="en"] body main#top .hero .hero-info > .hybrid {
    position: relative !important;
    left: 10px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .target {
    left: 14px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    position: relative !important;
    left: 10px !important;
  }

  /* Keep the Reasons callout strokes clear of the letters. */
  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::before {
    left: 72px !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::after {
    right: 72px !important;
  }

  /* Restore the untouched right column; move only the three requested left groups. */
  html[lang="en"] body main#top .hero .hero-info {
    left: 6px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .language,
  html[lang="en"] body main#top .hero .hero-info > .hybrid {
    position: static !important;
    left: auto !important;
    transform: none !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .event {
    position: relative !important;
    left: 16px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .target {
    position: relative !important;
    left: 16px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    position: relative !important;
    left: auto !important;
    transform: translateX(-4px) !important;
  }

  /* Stronger inward placement requested; only these three groups move. */
  html[lang="en"] body main#top .hero .hero-info > .kids,
  html[lang="en"] body main#top .hero .hero-info > .event {
    left: 24px !important;
    grid-template-columns: 30px 108px !important;
    width: 144px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids p,
  html[lang="en"] body main#top .hero .hero-info > .event p,
  html[lang="en"] body main#top .hero .hero-info > .kids .origin-main {
    width: 108px !important;
    max-width: 108px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .target {
    left: 32px !important;
  }

  /* Match the English desktop typography exactly for Ages / Classes values. */
  html[lang="en"] body main#top .hero .hero-mini-info strong,
  html[lang="en"] body main#top .hero .hero-mini-info span,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide strong,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info strong,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide strong {
    font-weight: 700 !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info span,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-weight: 900 !important;
  }

  /* Bring the Classes group slightly inward without affecting Ages. */
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    transform: translateX(-12px) !important;
  }

  /* Restore “30 Seconds!” to the standard black text colour. */
  html[lang="en"] body main#top #about .video-heading > span {
    color: #2d2c2a !important;
    -webkit-text-fill-color: #2d2c2a !important;
  }

  /* Lower the two callout strokes beside “7 Reasons” slightly. */
  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::before,
  html[lang="en"] body main#top .desktop-reasons-layout .green-section .slash-heading::after {
    top: .34em !important;
  }

  /* Match the Japanese mobile typography in the contact and footer links. */
  html[lang="en"] body main#top .access-section .access-summary-grid h3,
  html[lang="en"] body main#top .access-section .access-summary-grid a,
  html[lang="en"] body .site-footer .footer-business-info strong,
  html[lang="en"] body .site-footer .footer-privacy-link > span:last-child {
    font-family: var(--font-rounded) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  /* Preserve the previously approved Business block placement. */
  html[lang="en"] body .site-footer .footer-business-info strong {
    position: relative !important;
    top: 0 !important;
  }

  html[lang="en"] body .site-footer .footer-business-name {
    position: relative !important;
    top: -3px !important;
    margin: 0 !important;
  }

  html[lang="en"] body .site-footer .footer-business-location {
    position: relative !important;
    top: -1px !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  html[lang="en"] body .site-footer .footer-business-location::after {
    content: "Sydney · Online Worldwide" !important;
    display: block !important;
    color: #2d2c2a !important;
    -webkit-text-fill-color: #2d2c2a !important;
    font-family: var(--font-rounded) !important;
    font-size: .54rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  /* Use the same mobile flight-path airplane treatment as the Japanese edition. */
  html[lang="en"] body main#top .hero .hero-world::before {
    left: calc(50% - 8px) !important;
    top: 112% !important;
    width: 220px !important;
    height: 22px !important;
    border-top: 2px dashed rgba(39, 148, 232, .62) !important;
    border-radius: 50% !important;
    transform: translateX(-50%) rotate(-2deg) !important;
  }

  html[lang="en"] body main#top .hero .hero-world::after {
    left: calc(50% + 101px) !important;
    right: auto !important;
    top: 20px !important;
    color: #58aeea !important;
    font-family: var(--font-rounded) !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transform: rotate(-18deg) !important;
  }

  /* Larger, darker and consistent introductory body copy on mobile. */
  html[lang="en"] body main#top #about .mobile-about-copy,
  html[lang="en"] body main#top .feature-message .mobile-feature-copy {
    width: min(calc(100% - 24px), 348px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    color: #30312f !important;
    -webkit-text-fill-color: #30312f !important;
    font-family: var(--font-english-readable) !important;
    font-size: 1.05rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.62 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-wrap: pretty !important;
  }

  html[lang="en"] body main#top #about .mobile-about-copy strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: #30312f !important;
    -webkit-text-fill-color: #30312f !important;
    font-family: var(--font-english-readable) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
  }

  html[lang="en"] body main#top #about .mobile-about-copy .mobile-about-heading-break {
    display: block !important;
  }

  html[lang="en"] body main#top .access-section > h2 {
    color: #3d9f16 !important;
    -webkit-text-fill-color: #3d9f16 !important;
  }

  /* Final English-mobile readability audit. */
  html[lang="en"] body main#top h2,
  html[lang="en"] body main#top h3 {
    text-wrap: balance !important;
  }

  html[lang="en"] body main#top p,
  html[lang="en"] body main#top li {
    overflow-wrap: break-word !important;
    text-wrap: pretty !important;
  }

  html[lang="en"] body main#top .hero .hero-lead,
  html[lang="en"] body main#top .hero .hero-lead * {
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    line-height: 1.58 !important;
  }

  html[lang="en"] body main#top .hero .hero-lead {
    width: min(calc(100% - 18px), 354px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  html[lang="en"] body main#top .section-label,
  html[lang="en"] body main#top .notice {
    font-size: .8rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }

  html[lang="en"] body main#top #about .about-points li {
    color: #343431 !important;
    -webkit-text-fill-color: #343431 !important;
    font-size: .94rem !important;
    font-weight: 500 !important;
    line-height: 1.62 !important;
  }

  html[lang="en"] body main#top #about .about-points li > span {
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  html[lang="en"] body main#top .feature-intro .method-card > p,
  html[lang="en"] body main#top .feature-learning-pillars > p {
    color: #343431 !important;
    -webkit-text-fill-color: #343431 !important;
    font-size: .98rem !important;
    font-weight: 500 !important;
    line-height: 1.68 !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar span {
    color: #30312f !important;
    -webkit-text-fill-color: #30312f !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    line-height: 1.34 !important;
    text-wrap: balance !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .reason-list p {
    font-size: .94rem !important;
    font-weight: 600 !important;
    line-height: 1.42 !important;
    text-wrap: balance !important;
  }

  html[lang="en"] body main#top .desktop-reasons-layout .reason-list small {
    font-size: .8rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  html[lang="en"] body main#top #price .price-notes p,
  html[lang="en"] body main#top #price .detail-grid li {
    color: #343431 !important;
    -webkit-text-fill-color: #343431 !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    line-height: 1.58 !important;
  }

  html[lang="en"] body main#top .voices .voice > p,
  html[lang="en"] body main#top .teacher-section > div > p {
    color: #343431 !important;
    -webkit-text-fill-color: #343431 !important;
    font-size: .96rem !important;
    font-weight: 500 !important;
    line-height: 1.72 !important;
  }

  html[lang="en"] body main#top .faq-list h3 {
    color: #2d2c2a !important;
    -webkit-text-fill-color: #2d2c2a !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }

  html[lang="en"] body main#top .faq-list p {
    color: #343431 !important;
    -webkit-text-fill-color: #343431 !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    line-height: 1.68 !important;
  }

  html[lang="en"] body main#top .access-section .access-lead,
  html[lang="en"] body main#top .access-section .access-card p,
  html[lang="en"] body main#top .access-section .access-map-card a {
    color: #343431 !important;
    -webkit-text-fill-color: #343431 !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
  }

  html[lang="en"] body main#top .access-section .access-card h3,
  html[lang="en"] body main#top .access-section .access-map-card h3,
  html[lang="en"] body main#top .access-section .access-summary-grid h3 {
    font-size: .96rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  html[lang="en"] body main#top .access-section .access-summary-grid article > a,
  html[lang="en"] body main#top .access-section .access-summary-grid article > p,
  html[lang="en"] body main#top .access-section .access-summary-grid p strong {
    font-size: .86rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }

  /* Centre the title copy against the viewport, independent of the hero grid. */
  html[lang="en"] body main#top .hero .hero-lead {
    position: relative !important;
    left: 50% !important;
    box-sizing: border-box !important;
    width: min(calc(100vw - 38px), 336px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  html[lang="en"] body main#top .hero .hero-lead > .hero-mobile-line {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Move the complete Classes / Worldwide & Sydney group slightly inward. */
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    position: relative !important;
    left: -12px !important;
    transform: translateX(-12px) !important;
  }

  /* Optical centring for the English mobile title and its copy. */
  html[lang="en"] body main#top .hero .hero-composed-copy:first-child > h1 {
    position: relative !important;
    left: -5px !important;
  }

  html[lang="en"] body main#top .hero .hero-lead {
    left: calc(50% - 10px) !important;
  }

  /* Restore the approved white FAQ question text. */
  html[lang="en"] body main#top .faq-list h3 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Final small-text safeguards for comfortable mobile reading. */
  html[lang="en"] body .site-header .language-nav a {
    font-size: .8rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info strong {
    font-size: .82rem !important;
    font-weight: 700 !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info span {
    font-size: .76rem !important;
    font-weight: 700 !important;
  }

  html[lang="en"] body main#top .hero .hero-info p,
  html[lang="en"] body main#top .hero .hero-info p span,
  html[lang="en"] body main#top .hero .hero-info .kids .origin-main {
    color: #30312f !important;
    -webkit-text-fill-color: #30312f !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
  }

  html[lang="en"] body main#top .hero .hero-info .kids .origin-accent {
    font-size: .68rem !important;
    font-weight: 700 !important;
  }

  html[lang="en"] body .site-footer .footer-business-location::after {
    font-size: .66rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  /* Slightly larger mobile values with more room for Worldwide & Sydney. */
  html[lang="en"] body main#top .hero .hero-mini-info span,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    left: -16px !important;
  }

  /* Match Digital Abacus School to the other three overview labels. */
  html[lang="en"] body main#top .hero .hero-info .kids .origin-main {
    color: #30312f !important;
    -webkit-text-fill-color: #30312f !important;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-size: .8rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    letter-spacing: normal !important;
  }

  /* Final requested sizing and exact typography match in the first-view facts. */
  html[lang="en"] body main#top .hero .hero-mini-info span,
  html[lang="en"] body main#top .hero .hero-mini-info .worldwide span {
    font-size: .88rem !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    left: -20px !important;
  }

  html[lang="en"] body main#top .hero .hero-info > .kids p,
  html[lang="en"] body main#top .hero .hero-info > .language p,
  html[lang="en"] body main#top .hero .hero-info > .event p,
  html[lang="en"] body main#top .hero .hero-info > .hybrid p,
  html[lang="en"] body main#top .hero .hero-info > .kids .origin-main {
    color: #30312f !important;
    -webkit-text-fill-color: #30312f !important;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif !important;
    font-size: .8rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    letter-spacing: normal !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

/* Final English mobile reading layout: match the approved desktop hierarchy. */
@media (max-width: 720px) {
  html[lang="en"] body main#top .hero .hero-mini-info .target {
    left: 18px !important;
  }

  html[lang="en"] body main#top .hero .hero-mini-info .worldwide {
    left: -28px !important;
  }

  html[lang="en"] body main#top #about .about-points li > strong {
    color: #e77e3e !important;
    font-family: var(--font-rounded) !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
    line-height: 1.28 !important;
  }

  html[lang="en"] body main#top #about .about-points li > em,
  html[lang="en"] body main#top #about .about-points li > em .point-copy-line {
    color: #30312f !important;
    font-family: var(--font-rounded) !important;
    font-size: .92rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
  }

  html[lang="en"] body main#top #about .about-points li > em .point-copy-line {
    display: block !important;
    white-space: normal !important;
  }

  html[lang="en"] body main#top .desktop-feature-copy {
    display: none !important;
  }

  html[lang="en"] body main#top .mobile-feature-copy strong {
    display: block !important;
    margin-bottom: 8px !important;
    line-height: 1.34 !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars > p {
    width: min(100%, 342px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  html[lang="en"] body main#top .schedule-heading-group .schedule-lead {
    line-height: 1.58 !important;
  }

  html[lang="en"] body main#top #price .detail-grid li {
    line-height: 1.58 !important;
  }

  /* Restore the six Point cards as complete mobile cards: yellow label,
     orange heading and the approved desktop phrase groups. */
  html[lang="en"] body main#top #about .about-points {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    width: min(100%, 350px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html[lang="en"] body main#top #about .about-points li {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 154px !important;
    padding: 30px 20px 20px !important;
    overflow: visible !important;
    text-align: center !important;
  }

  html[lang="en"] body main#top #about .about-points li > span {
    position: absolute !important;
    top: -16px !important;
    left: 50% !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: .28rem .7rem !important;
    color: #171714 !important;
    background: #ffd95a !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 0 rgba(45, 44, 42, .08) !important;
    font-family: var(--font-rounded) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    transform: translateX(-50%) !important;
  }

  html[lang="en"] body main#top #about .about-points li > span::after {
    position: absolute !important;
    top: calc(100% - 1px) !important;
    left: 50% !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border-top: 7px solid #ffd95a !important;
    border-right: 7px solid transparent !important;
    border-left: 7px solid transparent !important;
    content: "" !important;
    transform: translateX(-50%) !important;
  }

  html[lang="en"] body main#top #about .about-points li > strong {
    display: block !important;
    margin: 0 0 8px !important;
    color: #e77e3e !important;
    font-family: var(--font-rounded) !important;
    font-size: 1.04rem !important;
    font-weight: 750 !important;
    line-height: 1.26 !important;
  }

  html[lang="en"] body main#top #about .about-points li > em,
  html[lang="en"] body main#top #about .about-points li > em .point-copy-line {
    display: block !important;
    margin: 0 !important;
    color: #30312f !important;
    font-family: var(--font-rounded) !important;
    font-size: .9rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.46 !important;
    text-align: center !important;
  }
}

@media (max-width: 720px) {
  /* The English mobile circle copy follows the supplied three-circle design. */
  html[lang="en"] .en-mobile-pillar-break {
    display: block !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar::before {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar strong {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important;
    padding-bottom: 7px !important;
    border-bottom: 4px dotted currentColor !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar span {
    max-width: 108px !important;
    margin-top: 10px !important;
    color: #4a4a47 !important;
    font-size: .86rem !important;
    font-weight: 650 !important;
    line-height: 1.28 !important;
    text-align: center !important;
  }

  /* Undo the generic Point-label decoration on the explanatory line spans. */
  html[lang="en"] body main#top #about .about-points li > em > .point-copy-line {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    white-space: normal !important;
  }

  html[lang="en"] body main#top #about .about-points li > em > .point-copy-line::after {
    display: none !important;
    content: none !important;
  }

  /* Keep all three learning circles perfectly round and remove the Japanese
     fallback copy decoration from the English MIND circle. */
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar {
    width: 138px !important;
    height: 138px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain span::after {
    display: none !important;
    content: none !important;
  }

  /* Point headings and their explanatory groups exactly follow the desktop
     English treatment. */
  html[lang="en"] body main#top #about .about-points li > strong {
    color: #e77e3e !important;
    -webkit-text-fill-color: #e77e3e !important;
    font-family: var(--font-rounded) !important;
    font-size: 1.04rem !important;
    font-weight: 750 !important;
    line-height: 1.26 !important;
  }

  html[lang="en"] body main#top #about .about-points li > em > .point-copy-line {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Rebuild the three-circle panel to match the approved English desktop
     composition while retaining a true mobile-safe square aspect ratio. */
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar-circles {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    height: 330px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar {
    box-sizing: border-box !important;
    width: 180px !important;
    height: 180px !important;
    max-width: none !important;
    padding: 18px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain {
    top: 0 !important;
    left: 4px !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.global {
    top: 0 !important;
    right: 4px !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.heart {
    top: 150px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar::before {
    margin-bottom: 6px !important;
    font-size: 1.7rem !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar strong {
    padding-bottom: 6px !important;
    font-size: 1.42rem !important;
    line-height: 1 !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar span {
    max-width: 130px !important;
    margin-top: 8px !important;
    font-size: .88rem !important;
    font-weight: 650 !important;
    line-height: 1.24 !important;
  }

  /* Keep every Point card safely within the phone viewport. */
  html[lang="en"] body main#top #about .bullets-panel {
    box-sizing: border-box !important;
    width: calc(100% - 28px) !important;
    max-width: 350px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html[lang="en"] body main#top #about .about-points {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[lang="en"] body main#top #about .about-points li {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Align MIND and GLOBAL on one visual baseline, with only a light overlap. */
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain,
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.global {
    grid-template-rows: 30px 38px 64px !important;
    align-content: center !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain {
    left: 2px !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.global {
    right: 2px !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain::before,
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.global::before {
    align-self: end !important;
    margin: 0 !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain strong,
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.global strong {
    align-self: end !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain span,
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.global span {
    align-self: start !important;
  }

  html[lang="en"] .en-desktop-copy-break,
  html[lang="en"] .en-schedule-desktop-copy {
    display: none !important;
  }

  html[lang="en"] .en-mobile-copy-break,
  html[lang="en"] .en-schedule-mobile-copy,
  html[lang="en"] .en-price-mobile-title {
    display: block !important;
  }

  html[lang="en"] .en-price-desktop-title {
    display: none !important;
  }

  html[lang="en"] body main#top p,
  html[lang="en"] body main#top li {
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: pretty;
  }

  html[lang="en"] body main#top .feature-learning-pillars > p {
    width: min(100%, 330px) !important;
    font-size: .95rem !important;
    line-height: 1.6 !important;
  }

  html[lang="en"] body main#top .schedule-heading-group .schedule-lead {
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }

  /* Give the three learning circles an even, light overlap without allowing
     the MIND/GLOBAL copy to intrude into a neighbouring circle. */
  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar {
    width: 176px !important;
    height: 176px !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.brain {
    left: 8px !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.global {
    right: 8px !important;
  }

  html[lang="en"] body main#top .feature-learning-pillars .hero-pillar.heart {
    top: 148px !important;
  }

  /* Keep the explanatory copy beneath “A Unique New Way to Master Mental
     Maths” on the same centre axis as its heading and image. */
  html[lang="en"] body main#top .feature-intro .method-card > p {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  /* The global mobile rule hides list breaks. Keep the four client-approved
     line groups visible in the Class Information section. */
  html[lang="en"] body main#top .detail-grid li.en-fixed-mobile-line-item > span {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Exact mobile-only line groups requested for explanatory copy. */
  html[lang="en"] .en-method-desktop-copy {
    display: none !important;
  }

  html[lang="en"] .en-mobile-line-group {
    display: block !important;
  }

  html[lang="en"] .en-mobile-line-group > span {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Let only the long method copy wrap inside its card instead of clipping. */
  html[lang="en"] body main#top .feature-intro .method-card .en-mobile-line-group > span {
    white-space: normal !important;
  }

  /* Use one shared, generous card width for the SoroTouch video, the six
     Point cards and the How SoroTouch Works panel.  This preserves the
     requested wording groups without letting the Point copy escape its
     frame on narrow phones. */
  html[lang="en"] body main#top #about .video-card,
  html[lang="en"] body main#top #about .bullets-panel,
  html[lang="en"] body main#top .feature-intro .method-card {
    box-sizing: border-box !important;
    /* Use the section width, rather than viewport width: 100vw includes a
       scrollbar in the phone preview and was creating the apparent drift. */
    position: relative !important;
    right: auto !important;
    left: auto !important;
    /* Fill the same mobile content column as the Mind / Grit / Global panel. */
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    transform: none !important;
  }

  html[lang="en"] body main#top #about .about-points {
    width: 100% !important;
    max-width: none !important;
  }

  html[lang="en"] body main#top #about .about-points li {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  /* Match the approved Japanese mobile language-switch size exactly. */
  html[lang="en"] body .site-header .language-nav a,
  html[lang="en"] body .site-header .language-nav a[aria-current="page"] {
    font-size: .61rem !important;
    line-height: 1 !important;
  }

  /* Point 6 retains the requested phrase break on mobile. */
  html[lang="en"] body main#top #about .about-points li br.point6-mobile-break {
    display: block !important;
  }

  /* Keep “What Parents Say” at one consistent heading weight. */
  html[lang="en"] body main#top .voices > h2 {
    font-weight: 700 !important;
    font-synthesis: none !important;
  }

  /* Testimonial emphasis: highlighted copy is stronger than the surrounding text. */
  html[lang="en"] body main#top .voices .voice > p {
    font-weight: 400 !important;
  }

  html[lang="en"] body main#top .voices .voice > p mark {
    font-weight: 500 !important;
  }
}