@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap");

/* Desktop keeps Point 6 as two lines; mobile reveals the first break. */
html[lang="en"] body main#top #about .about-points li br.point6-mobile-first-break {
  display: none;
}

/* Mobile typography follows the approved desktop English design section by section. */
@media (max-width: 720px) {
  html[lang="en"] .site-header .header-brand,
  html[lang="en"] .hero .hero-sub,
  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-synthesis: none !important;
  }

  html[lang="en"] body main#top .about-points li,
  html[lang="en"] body main#top .about-points li > span,
  html[lang="en"] body main#top .desktop-reasons-layout .reason-list p,
  html[lang="en"] body main#top .desktop-reasons-layout .reason-list small,
  html[lang="en"] body main#top .voices .voice > p {
    font-family: var(--font-english-readable) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

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

  /* Match the approved desktop design: Point 1–6 use yellow speech bubbles. */
  html[lang="en"] body main#top .about-points li > span {
    color: #111 !important;
    background: #ffd95a !important;
    box-shadow: 0 4px 0 rgba(45, 44, 42, .08) !important;
  }

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

/* Final mobile match to the approved desktop English typography. */
@media (max-width: 720px) {
  html[lang="en"] body main#top #about .mobile-about-copy,
  html[lang="en"] body main#top #about .mobile-about-copy * {
    color: #454440 !important;
    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: 900 !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

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

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

  html[lang="en"] body main#top .desktop-reasons-layout .reason-list small {
    color: var(--muted) !important;
  }

  html[lang="en"] body main#top .voices .voice > p {
    color: #42413d !important;
    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 #about .video-heading > span {
    color: #55b947 !important;
    -webkit-text-fill-color: #55b947 !important;
  }
}

/* English edition only. The completed Japanese edition remains unchanged. */
html[lang="en"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  font-weight: 400;
}

/* Exact desktop-to-mobile type and colour parity for the English edition. */
@media (max-width: 720px) {
  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span,
  html[lang="en"] .video-heading,
  html[lang="en"] #price > h2,
  html[lang="en"] .voices > h2,
  html[lang="en"] .faq-section > h2,
  html[lang="en"] .teacher-section h2,
  html[lang="en"] .access-section > h2,
  html[lang="en"] .feature-learning-pillars > h2,
  html[lang="en"] .feature-learning-pillars .hero-pillar strong,
  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;
  }

  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span {
    color: #55b947 !important;
  }

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

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

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

  html[lang="en"] .video-heading,
  html[lang="en"] .video-heading span {
    color: #111 !important;
  }

  html[lang="en"] .mobile-about-copy,
  html[lang="en"] .mobile-about-copy *,
  html[lang="en"] .about-points li,
  html[lang="en"] .about-points li > span,
  html[lang="en"] .mobile-feature-copy,
  html[lang="en"] .feature-learning-pillars > p,
  html[lang="en"] .feature-learning-pillars > p span,
  html[lang="en"] .desktop-reasons-layout .reason-list p,
  html[lang="en"] .desktop-reasons-layout .reason-list small,
  html[lang="en"] .voices .voice > p,
  html[lang="en"] .faq-list p,
  html[lang="en"] .detail-grid li,
  html[lang="en"] .access-lead {
    font-family: var(--font-english-readable) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] main h3,
  html[lang="en"] main h3 span,
  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
  }

  html[lang="en"] #price .price-label,
  html[lang="en"] #price .price-amount {
    font-family: var(--font-rounded) !important;
  }

  html[lang="en"] #price .price-label {
    color: #3d9f16 !important;
    -webkit-text-fill-color: #3d9f16 !important;
  }

  html[lang="en"] #price .price-amount,
  html[lang="en"] #price .price-amount.fee {
    color: #55b947 !important;
    -webkit-text-fill-color: #55b947 !important;
  }

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

  html[lang="en"] .feature-learning-pillars > h2 {
    color: #2079d8 !important;
  }

  html[lang="en"] .feature-intro > .pop-heading span {
    background: none !important;
  }

  html[lang="en"] .video-heading span,
  html[lang="en"] .method-card > h3 span,
  html[lang="en"] #price .detail-grid h3 > span {
    background: linear-gradient(transparent 70%, #ffd95a 70%, #ffd95a 94%, transparent 94%) !important;
  }
}

/* Final English mobile rhythm and alignment corrections. */
@media (max-width: 720px) {
  html[lang="en"] .hero-mobile-line {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .hero .hero-lead {
    width: min(calc(100vw - 28px), 360px) !important;
    max-width: 360px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-family: var(--font-english-readable) !important;
    font-size: clamp(.76rem, 3.55vw, .88rem) !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  html[lang="en"] .hero .hero-lead span {
    font-family: inherit !important;
  }

  html[lang="en"] .hero .hero-mini-info {
    gap: 4px !important;
    width: min(calc(100vw - 24px), 352px) !important;
  }

  html[lang="en"] .hero .hero-mini-info > div {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    column-gap: 3px !important;
    min-height: 52px !important;
    padding: 3px 2px !important;
  }

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

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

  html[lang="en"] .hero .hero-info {
    gap: 9px 8px !important;
    width: min(calc(100vw - 24px), 352px) !important;
  }

  html[lang="en"] .hero .hero-info > div,
  html[lang="en"] .hero .hero-info > div:nth-child(n) {
    grid-template-columns: 31px minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 52px !important;
    justify-self: stretch !important;
  }

  html[lang="en"] .hero .hero-info-icon {
    width: 29px !important;
    height: 29px !important;
  }

  html[lang="en"] .hero .hero-info p,
  html[lang="en"] .hero .hero-info p span {
    font-size: .7rem !important;
    line-height: 1.23 !important;
    text-align: left !important;
  }

  html[lang="en"] #about > .section-label {
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    font-size: clamp(.62rem, 2.8vw, .72rem) !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .video-heading span {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .feature-intro .method-card > h3,
  html[lang="en"] .feature-intro .method-card > h3 span {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
  }

  html[lang="en"] .feature-intro .method-card > h3 {
    max-width: 306px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(1.16rem, 5.25vw, 1.35rem) !important;
    font-weight: 500 !important;
    line-height: 1.34 !important;
    text-wrap: balance;
  }

  html[lang="en"] .feature-intro .method-card > p {
    max-width: 298px !important;
    margin: 20px auto 0 !important;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
    font-size: .84rem !important;
    font-weight: 400 !important;
    line-height: 1.68 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  html[lang="en"] .feature-intro .method-card .rounded-photo {
    width: 118% !important;
    max-width: none !important;
    margin-right: -9% !important;
    margin-left: -9% !important;
    clip-path: none !important;
    transform: none !important;
  }

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

  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    font-size: .66rem !important;
    line-height: 1.16 !important;
    text-align: center !important;
  }

  html[lang="en"] .feature-learning-pillars > p {
    width: min(100%, 330px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-family: var(--font-english-readable) !important;
    font-size: .86rem !important;
    line-height: 1.68 !important;
    text-align: center !important;
    text-wrap: pretty;
  }

  html[lang="en"] .feature-learning-pillars > p .pillar-blue,
  html[lang="en"] .feature-learning-pillars > p .pillar-orange,
  html[lang="en"] .feature-learning-pillars > p .pillar-green {
    font-family: inherit !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-characters {
    top: 76px !important;
    width: 260px !important;
    height: 148px !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list {
    margin-top: 132px !important;
  }
}

/* Desktop English typography mirrored on mobile — keep as the final cascade. */
@media (max-width: 720px) {
  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span,
  html[lang="en"] .video-heading,
  html[lang="en"] #price > h2,
  html[lang="en"] .voices > h2,
  html[lang="en"] .faq-section > h2,
  html[lang="en"] .teacher-section h2,
  html[lang="en"] .access-section > h2,
  html[lang="en"] .feature-learning-pillars > h2,
  html[lang="en"] .feature-learning-pillars .hero-pillar strong,
  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;
  }

  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span {
    color: #55b947 !important;
  }

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

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

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

  html[lang="en"] .video-heading,
  html[lang="en"] .video-heading span {
    color: #111 !important;
  }

  html[lang="en"] .mobile-about-copy,
  html[lang="en"] .mobile-about-copy *,
  html[lang="en"] .about-points li,
  html[lang="en"] .about-points li > span,
  html[lang="en"] .mobile-feature-copy,
  html[lang="en"] .feature-learning-pillars > p,
  html[lang="en"] .feature-learning-pillars > p span,
  html[lang="en"] .desktop-reasons-layout .reason-list p,
  html[lang="en"] .desktop-reasons-layout .reason-list small,
  html[lang="en"] .voices .voice > p,
  html[lang="en"] .faq-list p,
  html[lang="en"] .detail-grid li,
  html[lang="en"] .access-lead {
    font-family: var(--font-english-readable) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] main h3,
  html[lang="en"] main h3 span,
  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
  }

  html[lang="en"] #price .price-label,
  html[lang="en"] #price .price-amount {
    font-family: var(--font-rounded) !important;
  }

  html[lang="en"] #price .price-label {
    color: #3d9f16 !important;
    -webkit-text-fill-color: #3d9f16 !important;
  }

  html[lang="en"] #price .price-amount,
  html[lang="en"] #price .price-amount.fee {
    color: #55b947 !important;
    -webkit-text-fill-color: #55b947 !important;
  }

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

  html[lang="en"] .feature-learning-pillars > h2 {
    color: #2079d8 !important;
  }

  html[lang="en"] .feature-intro > .pop-heading span {
    background: none !important;
  }

  html[lang="en"] .video-heading span,
  html[lang="en"] .method-card > h3 span,
  html[lang="en"] #price .detail-grid h3 > span {
    background: linear-gradient(transparent 70%, #ffd95a 70%, #ffd95a 94%, transparent 94%) !important;
  }
}

html[lang="en"] {
  --font-english-readable: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}

html[lang="en"] .hero .hero-sub,
html[lang="en"] .hero .hero-world,
html[lang="en"] .hero .hero-composed-copy h1,
html[lang="en"] .soft-section > h2,
html[lang="en"] .white-section > h2,
html[lang="en"] .feature-intro h2,
html[lang="en"] .feature-message > h2,
html[lang="en"] .voices > h2,
html[lang="en"] .faq-section > h2,
html[lang="en"] .teacher-section h2,
html[lang="en"] .access-section > h2,
html[lang="en"] h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
  letter-spacing: -0.02em;
}

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

html[lang="en"] p,
html[lang="en"] li,
html[lang="en"] a,
html[lang="en"] span {
  letter-spacing: normal;
}

html[lang="en"] .hero .hero-info p,
html[lang="en"] .hero .hero-info p span {
  overflow-wrap: normal;
  word-break: normal;
}

html[lang="en"] .about-points li {
  line-height: 1.55;
}

html[lang="en"] .method-card .rounded-photo {
  object-fit: contain;
  background: #fff;
}

html[lang="en"] .feature-learning-pillars .hero-pillar strong {
  font-size: clamp(1rem, 1.8vw, 1.45rem);
}

html[lang="en"] .feature-learning-pillars .hero-pillar span {
  max-width: 88%;
  line-height: 1.25;
}

html[lang="en"] .desktop-english-break {
  display: none;
}

html[lang="en"] .pillar-desktop-break {
  display: none;
}

html[lang="en"] .en-mobile-copy-break,
html[lang="en"] .en-schedule-mobile-copy,
html[lang="en"] .en-price-mobile-title,
html[lang="en"] .en-mobile-pillar-break,
html[lang="en"] .en-mobile-line-group {
  display: none;
}

html[lang="en"] .reasons-mobile-break {
  display: none;
}

@media (min-width: 721px) {
  html[lang="en"] .desktop-english-break {
    display: initial;
  }

  html[lang="en"] .pillar-desktop-break {
    display: block;
  }
  /* Keep desktop English phrases together at natural semantic boundaries. */
  html[lang="en"] .hero .hero-lead {
    width: min(690px, 100%) !important;
    max-width: 690px !important;
    font-family: var(--font-english-readable) !important;
    line-height: 1.72 !important;
    text-wrap: balance;
  }

  html[lang="en"] .hero .hero-lead span {
    font-family: inherit !important;
  }

  html[lang="en"] .hero .hero-lead .power-red {
    white-space: nowrap !important;
  }

  html[lang="en"] .hero .hero-lead .hero-skill-line {
    white-space: nowrap !important;
  }

  /* Lower the decorative route so the plane clears “Go Global.” */
  html[lang="en"] .hero .hero-world::before {
    top: calc(100% + 14px) !important;
  }

  html[lang="en"] .hero .hero-world::after {
    top: calc(100% + 4px) !important;
  }

  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading {
    font-family: var(--font-sorotouch) !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] .feature-message > .feature-heading {
    font-family: var(--font-english-readable) !important;
    letter-spacing: normal !important;
  }

  /* Extend the same friendly display face to the major English headings. */
  html[lang="en"] main > section > h2,
  html[lang="en"] .video-heading,
  html[lang="en"] .method-card > h3,
  html[lang="en"] .voices > h2,
  html[lang="en"] .faq-section > h2,
  html[lang="en"] .teacher-section h2,
  html[lang="en"] .access-section > h2 {
    font-family: var(--font-sorotouch) !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] .feature-intro > .pop-heading br {
    display: block;
  }

  html[lang="en"] .desktop-about-copy,
  html[lang="en"] .method-card p,
  html[lang="en"] .desktop-feature-copy,
  html[lang="en"] .feature-learning-pillars > p,
  html[lang="en"] .detail-grid li,
  html[lang="en"] .voice p,
  html[lang="en"] .faq-list p,
  html[lang="en"] .teacher-section p,
  html[lang="en"] .access-lead {
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: pretty;
  }

  /* Match the rounded face used by “Why Digital Abacus Online?”. */
  html[lang="en"] #about .desktop-about-copy,
  html[lang="en"] #about .desktop-about-copy *,
  html[lang="en"] #about .about-points li,
  html[lang="en"] #about .about-points li > span,
  html[lang="en"] .method-card > h3,
  html[lang="en"] .method-card > h3 span,
  html[lang="en"] .method-card > p,
  html[lang="en"] .feature-learning-pillars .hero-pillar strong,
  html[lang="en"] .feature-learning-pillars .hero-pillar span,
  html[lang="en"] .feature-learning-pillars > p,
  html[lang="en"] .feature-learning-pillars > p span,
  html[lang="en"] .desktop-reasons-layout .reason-list p,
  html[lang="en"] .desktop-reasons-layout .reason-list small,
  html[lang="en"] .voices .voice > p {
    font-family: var(--font-english-readable) !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] .desktop-about-copy {
    width: min(850px, calc(100% - 48px)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html[lang="en"] .hero .hero-sub {
    font-size: clamp(1.35rem, 2.3vw, 2.15rem) !important;
  }

  html[lang="en"] .hero .hero-world {
    font-size: clamp(1.3rem, 2.1vw, 2rem) !important;
  }

  html[lang="en"] .hero .hero-composed-copy h1 {
    font-size: clamp(3.2rem, 4.35vw, 4.45rem) !important;
  }

  html[lang="en"] .hero .hero-info p {
    font-size: clamp(.72rem, .82vw, .84rem) !important;
  }

  html[lang="en"] .hero .hero-info .origin-accent,
  html[lang="en"] .hero .hero-info .origin-main {
    white-space: normal !important;
  }

  html[lang="en"] .about-points {
    align-items: stretch;
  }

  html[lang="en"] .about-points li {
    min-height: 190px;
    padding-inline: 22px;
  }

  html[lang="en"] .desktop-reasons-layout .slash-heading {
    width: max-content !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(1.78rem, 2.4vw, 2.42rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .desktop-reasons-layout .slash-heading span {
    font-size: 1.5em !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-characters {
    top: 88px !important;
    z-index: 2 !important;
    width: 270px !important;
    height: 158px !important;
    transform: translateX(-50%) scale(.75) !important;
    pointer-events: none;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list {
    position: relative !important;
    z-index: 4 !important;
    margin-top: 132px !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list p:nth-child(3),
  html[lang="en"] .desktop-reasons-layout .reason-list p:nth-child(4),
  html[lang="en"] .desktop-reasons-layout .reason-list p:nth-child(6) {
    align-content: center !important;
    justify-content: center !important;
    padding-inline: 12px !important;
    line-height: 1.22 !important;
    text-align: center !important;
    text-wrap: balance;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list p:nth-child(4) {
    gap: 4px !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list p:nth-child(4) small {
    width: 100%;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-wrap: balance;
  }

  /* Use one consistent, restrained underline treatment for both headings. */
  html[lang="en"] #price .detail-grid h3 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    background: none !important;
    text-align: center !important;
    z-index: 0;
  }

  html[lang="en"] #price .detail-grid h3 > span {
    display: inline !important;
    padding: 0 4px 3px !important;
    background: linear-gradient(transparent 62%, var(--yellow) 62%) !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  html[lang="en"] #price .detail-grid h3::after {
    display: none !important;
    content: none !important;
  }

  /* Final desktop type rule: one face across the complete English page,
     matching the “Building Strong Minds…” paragraph. */
  html[lang="en"] body,
  html[lang="en"] body * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
  }

  /* Carry the same calm body typography through every reading section. */
  html[lang="en"] main p,
  html[lang="en"] main li,
  html[lang="en"] main small,
  html[lang="en"] footer p,
  html[lang="en"] footer a {
    font-weight: 400;
    letter-spacing: 0 !important;
    font-synthesis: none;
  }

  html[lang="en"] main p,
  html[lang="en"] main li {
    line-height: 1.75;
  }

  html[lang="en"] main h1,
  html[lang="en"] main h2,
  html[lang="en"] main h3,
  html[lang="en"] main strong,
  html[lang="en"] .big-cta {
    font-style: normal;
    font-synthesis: none;
  }

  /* Requested matching display headings. Keep these after the page-wide
     typography rule so the visual change is unambiguous. */
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span,
  html[lang="en"] #price > h2,
  html[lang="en"] .voices > h2,
  html[lang="en"] .feature-learning-pillars > h2,
  html[lang="en"] .feature-learning-pillars .hero-pillar strong {
    font-family: var(--font-sorotouch) !important;
  }

  html[lang="en"] .feature-intro > .pop-heading {
    font-size: clamp(2.24rem, 4.28vw, 3.6rem) !important;
    line-height: 1.08 !important;
  }

  html[lang="en"] .feature-intro > .pop-heading span {
    margin-top: 6px !important;
    font-family: var(--font-sorotouch) !important;
    font-size: 1em !important;
    line-height: inherit !important;
  }

  html[lang="en"] .feature-message > .feature-heading {
    color: #55b947 !important;
    font-family: var(--font-sorotouch) !important;
    font-size: clamp(2.24rem, 4.28vw, 3.6rem) !important;
    line-height: 1.08 !important;
  }

  html[lang="en"] .feature-message > .feature-heading span {
    color: #55b947 !important;
    background: none !important;
    font-family: var(--font-sorotouch) !important;
    font-size: 1em !important;
    line-height: inherit !important;
  }

  html[lang="en"] main h3,
  html[lang="en"] main h3 span {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
  }

  /* Match the Japanese edition's actual fee typeface and numeral rendering. */
  html[lang="en"] #price .price-label,
  html[lang="en"] #price .price-amount {
    font-family: var(--font-rounded) !important;
    font-style: normal !important;
    font-synthesis: none !important;
  }

  html[lang="en"] .method-card > h3,
  html[lang="en"] .method-card > h3 span {
    color: #45433f !important;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
    font-weight: 500 !important;
  }

  html[lang="en"] .method-card > h3 span {
    margin-left: 0.22em !important;
  }

  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    color: #45433f !important;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
    font-weight: 500 !important;
  }

  /* Keep the requested yellow markers consistent. */
  html[lang="en"] .method-card > h3 span,
  html[lang="en"] .video-heading span,
  html[lang="en"] #price .detail-grid h3 > span {
    background: linear-gradient(
      transparent 70%,
      #ffd95a 70%,
      #ffd95a 94%,
      transparent 94%
    ) !important;
  }

  /* “How SoroTouch Works” is intentionally unmarked. */
  html[lang="en"] .feature-intro > .pop-heading span {
    background: none !important;
  }
}

@media (max-width: 720px) {
  html[lang="en"] .site-header .header-brand {
    font-size: .72rem !important;
  }

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

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

  html[lang="en"] .hero .hero-composed-copy h1 {
    font-size: clamp(2rem, 10.4vw, 2.7rem) !important;
    line-height: .98 !important;
  }

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

  html[lang="en"] .hero .hero-mini-info .target,
  html[lang="en"] .hero .hero-mini-info .worldwide {
    left: 0 !important;
  }

  html[lang="en"] .hero .hero-mini-info .worldwide strong,
  html[lang="en"] .hero .hero-mini-info .worldwide span {
    transform: none !important;
  }

  html[lang="en"] .hero .hero-info .event p {
    font-size: .78rem !important;
  }

  html[lang="en"] .hero .hero-info .event p::after {
    display: none !important;
    content: none !important;
  }

  html[lang="en"] .hero .hero-info .kids,
  html[lang="en"] .hero .hero-info .event {
    transform: translateX(-8px) !important;
  }

  html[lang="en"] .hero .hero-info .language,
  html[lang="en"] .hero .hero-info .hybrid {
    left: 8px !important;
  }

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

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

  html[lang="en"] .mobile-about-copy {
    padding-inline: 12px;
    font-size: .9rem !important;
    line-height: 1.7 !important;
  }

  html[lang="en"] .mobile-about-copy strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.05rem;
  }

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

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

  html[lang="en"] body main .feature-message .feature-learning-pillars .hero-pillar.brain span {
    font-size: .64rem !important;
  }

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

  html[lang="en"] body main .feature-message .feature-learning-pillars .hero-pillar-circles .hero-pillar span {
    font-size: .64rem !important;
    line-height: 1.2 !important;
  }

  html[lang="en"] .schedule-card::after {
    content: "Swipe horizontally to view the full schedule" !important;
  }

  html[lang="en"] .site-footer .footer-business-location::after {
    content: "Sydney · Online Worldwide" !important;
  }
}

/* English mobile final pass. Desktop rules remain untouched. */
@media (max-width: 720px) {
  html[lang="en"] body,
  html[lang="en"] body * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
  }

  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span,
  html[lang="en"] #price > h2,
  html[lang="en"] .voices > h2,
  html[lang="en"] .faq-section > h2,
  html[lang="en"] .teacher-section h2,
  html[lang="en"] .access-section > h2,
  html[lang="en"] .feature-learning-pillars > h2,
  html[lang="en"] .feature-learning-pillars .hero-pillar strong {
    font-family: var(--font-sorotouch) !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span {
    color: #55b947 !important;
    background: none !important;
  }

  html[lang="en"] main h3,
  html[lang="en"] main h3 span,
  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
  }

  html[lang="en"] .method-card > h3,
  html[lang="en"] .method-card > h3 span,
  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    color: #45433f !important;
    font-weight: 500 !important;
  }

  html[lang="en"] #price .price-label,
  html[lang="en"] #price .price-amount {
    font-family: var(--font-rounded) !important;
    font-style: normal !important;
    font-synthesis: none !important;
  }

  html[lang="en"] .method-card > h3 span,
  html[lang="en"] .video-heading span,
  html[lang="en"] #price .detail-grid h3 > span {
    background: linear-gradient(transparent 70%, #ffd95a 70%, #ffd95a 94%, transparent 94%) !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  html[lang="en"] .feature-intro > .pop-heading span {
    background: none !important;
  }

  html[lang="en"] #price .detail-grid h3 {
    width: 100% !important;
    max-width: 330px !important;
    padding: 0 !important;
    background: none !important;
    text-align: center !important;
  }

  html[lang="en"] #price .detail-grid h3 > span {
    display: inline !important;
    padding: 0 3px 2px !important;
  }

  html[lang="en"] a.big-cta,
  html[lang="en"] .hero .big-cta,
  html[lang="en"] .price-cta,
  html[lang="en"] .access-trial .big-cta {
    width: calc(100vw - 32px) !important;
    max-width: 350px !important;
    padding-right: 22px !important;
    padding-left: 22px !important;
    font-size: clamp(.78rem, 3.65vw, .94rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html[lang="en"] main p,
  html[lang="en"] main li,
  html[lang="en"] main small,
  html[lang="en"] .reason-list p,
  html[lang="en"] .reason-list small {
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: pretty;
  }

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

  html[lang="en"] .hero .hero-mini-info > div {
    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: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !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 {
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

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

  html[lang="en"] .hero .hero-mini-info span {
    align-self: start !important;
    font-size: .62rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  html[lang="en"] .hero .hero-info {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    width: min(calc(100vw - 36px), 340px) !important;
    margin: 4px 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: 7px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !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;
    flex: 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;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: .66rem !important;
    line-height: 1.28 !important;
    text-align: left !important;
    transform: none !important;
  }

  html[lang="en"] .feature-intro .method-card {
    overflow: hidden !important;
  }

  html[lang="en"] .feature-intro .method-card .rounded-photo {
    display: block !important;
    width: calc(100% + 28px) !important;
    max-width: none !important;
    margin-right: -14px !important;
    margin-left: -14px !important;
    clip-path: inset(0 3.5% 0 3.5%) !important;
    transform: scale(1.08) !important;
    transform-origin: center center !important;
  }

  html[lang="en"] .reasons-mobile-break {
    display: block;
  }

  html[lang="en"] .desktop-reasons-layout .slash-heading {
    width: 100% !important;
    max-width: 330px !important;
    font-family: var(--font-sorotouch) !important;
    font-size: clamp(1.18rem, 5.9vw, 1.48rem) !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-characters {
    top: 98px !important;
    left: 50% !important;
    z-index: 2 !important;
    width: 250px !important;
    height: 142px !important;
    transform: translateX(-50%) !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 126px !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list p,
  html[lang="en"] .desktop-reasons-layout .reason-list small {
    font-family: var(--font-english-readable) !important;
    line-height: 1.28 !important;
    text-align: center !important;
  }

  /* Remove justified word gaps and give the Meet Aya biography a natural rhythm. */
  html[lang="en"] .teacher-section > div {
    width: min(100%, 342px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html[lang="en"] .teacher-section h2 {
    margin-bottom: 14px !important;
  }

  html[lang="en"] .teacher-section > div > p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: .92rem !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    line-break: auto !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto;
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    text-wrap: pretty;
  }

  /* Match the approved desktop Contact & Locations heading. */
  html[lang="en"] .access-section > h2 {
    color: #3d9f16 !important;
    font-family: var(--font-sorotouch) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
  }
}

/* Desktop typography parity immediately before the final mobile layout corrections. */
@media (max-width: 720px) {
  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span,
  html[lang="en"] .video-heading,
  html[lang="en"] #price > h2,
  html[lang="en"] .voices > h2,
  html[lang="en"] .faq-section > h2,
  html[lang="en"] .teacher-section h2,
  html[lang="en"] .access-section > h2,
  html[lang="en"] .feature-learning-pillars > h2,
  html[lang="en"] .feature-learning-pillars .hero-pillar strong,
  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;
  }

  html[lang="en"] #about > h2,
  html[lang="en"] .feature-intro > .pop-heading,
  html[lang="en"] .feature-intro > .pop-heading span,
  html[lang="en"] .feature-message > .feature-heading,
  html[lang="en"] .feature-message > .feature-heading span {
    color: #55b947 !important;
  }

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

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

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

  html[lang="en"] .video-heading,
  html[lang="en"] .video-heading span {
    color: #111 !important;
  }

  html[lang="en"] .mobile-about-copy,
  html[lang="en"] .mobile-about-copy *,
  html[lang="en"] .about-points li,
  html[lang="en"] .about-points li > span,
  html[lang="en"] .mobile-feature-copy,
  html[lang="en"] .feature-learning-pillars > p,
  html[lang="en"] .feature-learning-pillars > p span,
  html[lang="en"] .desktop-reasons-layout .reason-list p,
  html[lang="en"] .desktop-reasons-layout .reason-list small,
  html[lang="en"] .voices .voice > p,
  html[lang="en"] .faq-list p,
  html[lang="en"] .detail-grid li,
  html[lang="en"] .access-lead {
    font-family: var(--font-english-readable) !important;
    font-style: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
  }

  html[lang="en"] main h3,
  html[lang="en"] main h3 span,
  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
  }

  html[lang="en"] #price .price-label,
  html[lang="en"] #price .price-amount {
    font-family: var(--font-rounded) !important;
  }

  html[lang="en"] #price .price-label {
    color: #3d9f16 !important;
    -webkit-text-fill-color: #3d9f16 !important;
  }

  html[lang="en"] #price .price-amount,
  html[lang="en"] #price .price-amount.fee {
    color: #55b947 !important;
    -webkit-text-fill-color: #55b947 !important;
  }

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

  html[lang="en"] .feature-learning-pillars > h2 {
    color: #2079d8 !important;
  }

  html[lang="en"] .feature-intro > .pop-heading span {
    background: none !important;
  }

  html[lang="en"] .video-heading span,
  html[lang="en"] .method-card > h3 span,
  html[lang="en"] #price .detail-grid h3 > span {
    background: linear-gradient(transparent 70%, #ffd95a 70%, #ffd95a 94%, transparent 94%) !important;
  }
}

/* Keep these mobile corrections last so legacy responsive rules cannot override them. */
@media (max-width: 720px) {
  html[lang="en"] .hero-mobile-line {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .hero .hero-lead {
    width: min(calc(100vw - 28px), 360px) !important;
    max-width: 360px !important;
    margin-inline: auto !important;
    font-family: var(--font-english-readable) !important;
    font-size: clamp(.76rem, 3.55vw, .88rem) !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  html[lang="en"] .hero .hero-lead span {
    font-family: inherit !important;
  }

  html[lang="en"] .hero .hero-mini-info {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: min(calc(100vw - 24px), 352px) !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 {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 3px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 3px 2px !important;
    transform: none !important;
  }

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

  html[lang="en"] .hero .hero-mini-info strong,
  html[lang="en"] .hero .hero-mini-info span {
    margin: 0 !important;
    transform: none !important;
    text-align: center !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;
    white-space: normal !important;
  }

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

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

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

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

  html[lang="en"] #about > .section-label {
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    padding-inline: 12px !important;
    font-size: clamp(.62rem, 2.8vw, .72rem) !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .video-heading span {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .feature-intro .method-card > h3,
  html[lang="en"] .feature-intro .method-card > h3 span,
  html[lang="en"] .feature-intro .method-card > p {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important;
  }

  html[lang="en"] .feature-intro .method-card > h3 {
    max-width: 306px !important;
    margin-inline: auto !important;
    font-size: clamp(1.16rem, 5.25vw, 1.35rem) !important;
    font-weight: 500 !important;
    line-height: 1.34 !important;
    text-wrap: balance;
  }

  html[lang="en"] .feature-intro .method-card > p {
    max-width: 298px !important;
    margin: 20px auto 0 !important;
    font-size: .84rem !important;
    font-weight: 400 !important;
    line-height: 1.68 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  html[lang="en"] .feature-intro .method-card {
    overflow: hidden !important;
  }

  html[lang="en"] .feature-intro .method-card .rounded-photo {
    width: 118% !important;
    max-width: none !important;
    margin-right: -9% !important;
    margin-left: -9% !important;
    clip-path: none !important;
    transform: none !important;
  }

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

  html[lang="en"] .feature-learning-pillars .hero-pillar span {
    font-size: .66rem !important;
    line-height: 1.16 !important;
    text-align: center !important;
  }

  html[lang="en"] .feature-learning-pillars > p {
    width: min(100%, 330px) !important;
    margin-inline: auto !important;
    font-family: var(--font-english-readable) !important;
    font-size: .86rem !important;
    line-height: 1.68 !important;
    text-align: center !important;
    text-wrap: pretty;
  }

  html[lang="en"] .feature-learning-pillars > p .pillar-blue,
  html[lang="en"] .feature-learning-pillars > p .pillar-orange,
  html[lang="en"] .feature-learning-pillars > p .pillar-green {
    font-family: inherit !important;
    white-space: nowrap !important;
  }

  html[lang="en"] .desktop-reasons-layout .slash-heading {
    font-family: var(--font-sorotouch) !important;
    text-wrap: balance;
  }

  html[lang="en"] .desktop-reasons-layout .reason-characters {
    top: 76px !important;
    width: 260px !important;
    height: 148px !important;
  }

  html[lang="en"] .desktop-reasons-layout .reason-list {
    margin-top: 132px !important;
  }
}