/* Production mobile hero rescue.
   Load this AFTER modern-final.css and mobile-fix.css. */

@media (max-width: 720px) {
  .site-header {
    min-height: 82px !important;
    padding: 14px 18px !important;
  }

  .brand,
  .brand-lockup,
  .brand-lockup-combo {
    min-width: 0 !important;
  }

  .brand-mark-old {
    width: 178px !important;
    max-width: 48vw !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .brand-lockup-combo small,
  .brand-wordmark {
    display: none !important;
  }

  .lang-switch-header {
    width: 100px !important;
    height: 44px !important;
    padding: 4px !important;
  }

  .lang-switch-header button {
    font-size: 13px !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .hero {
    min-height: auto !important;
    padding: 30px 0 36px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(251, 251, 246, 0.97)),
      url("https://kakehashi.tech/assets/optimized/teamz-hero-640.jpg") center top / cover no-repeat !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
  }

  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html .hero .japan-cue,
  html[lang="ja"] .hero .japan-cue,
  html .hero .hero-jp-line,
  html[lang="ja"] .hero .hero-jp-line,
  html .hero .hero-proof-line,
  html[lang="ja"] .hero .hero-proof-line,
  html .hero .hero-scope,
  html[lang="ja"] .hero .hero-scope,
  html .hero .signal-row,
  html[lang="ja"] .hero .signal-row,
  html .hero .hero-company-proof,
  html[lang="ja"] .hero .hero-company-proof,
  html .hero .hero-system-card,
  html[lang="ja"] .hero .hero-system-card,
  html .hero .gtm-visual-old,
  html[lang="ja"] .hero .gtm-visual-old {
    display: none !important;
  }

  .hero .eyebrow {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    margin: 0 0 14px !important;
    color: #a33a31 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .hero .eyebrow::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 2px !important;
    flex: 0 0 38px !important;
    background: currentColor !important;
  }

  .hero h1 {
    order: 2 !important;
    max-width: 9em !important;
    margin: 0 !important;
    color: #07101f !important;
    font-size: clamp(44px, 12.5vw, 58px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
    font-weight: 900 !important;
    text-wrap: balance !important;
    word-break: auto-phrase !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 8em !important;
    font-size: clamp(39px, 10.8vw, 50px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .hero-lede {
    order: 3 !important;
    max-width: 25em !important;
    margin: 16px 0 0 !important;
    color: #344154 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
  }

  html[lang="ja"] .hero-lede {
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    font-weight: 700 !important;
  }

  .hero-actions {
    order: 4 !important;
    display: flex !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
  }

  .hero-actions .button {
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html .hero .hero-bridge-visual,
  html[lang="ja"] .hero .hero-bridge-visual,
  html .hero .gtm-visual.hero-bridge-visual,
  html[lang="ja"] .hero .gtm-visual.hero-bridge-visual {
    order: 5 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
  }

  .hero-field-card {
    width: min(100%, 356px) !important;
    margin: 0 !important;
    border: 1px solid rgba(16, 42, 85, 0.12) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(16, 42, 85, 0.12) !important;
  }

  .hero-field-card img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .hero-field-card figcaption {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 13px 14px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .hero-field-card figcaption span {
    color: #a33a31 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .hero-field-card figcaption strong {
    color: #102a55 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 850 !important;
  }
}

@media (max-width: 390px) {
  .brand-mark-old {
    width: 162px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 11.4vw, 52px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(36px, 10.2vw, 46px) !important;
  }
}

/* 2026-07-07 no photo overlays: do not place text inside hero images on mobile. */
.hero-field-card::before,
.hero-field-card::after,
.hero-field-card figcaption,
.hero-field-card figcaption * {
  display: none !important;
  content: none !important;
}

/* 2026-07-07 bilingual polish: final mobile heading override after legacy fixes. */
@media (max-width: 720px) {
  html .hero h1,
  html[lang="en"] .hero h1 {
    max-width: 10.2em !important;
    font-size: clamp(38px, 10.6vw, 50px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.015em !important;
    text-wrap: balance !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 11em !important;
    font-size: clamp(30px, 7.9vw, 38px) !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-title-line {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    line-height: 1.68 !important;
  }

  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line {
    line-height: 1.78 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }
}

@supports (word-break: auto-phrase) {
  @media (max-width: 720px) {
    html[lang="ja"] .hero h1,
    html[lang="ja"] .hero-title-line,
    html[lang="ja"] .hero-lede,
    html[lang="ja"] .hero-proof-line {
      word-break: auto-phrase !important;
    }
  }
}

/* 2026-07-07 final JP mobile headline: avoid over-balanced gaps after Japanese punctuation. */
@media (max-width: 720px) {
  html[lang="ja"] .hero h1 {
    max-width: 9.2em !important;
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-wrap: wrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-title-line {
    text-wrap: wrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }
}

@supports (word-break: auto-phrase) {
  @media (max-width: 720px) {
    html[lang="ja"] .hero h1,
    html[lang="ja"] .hero-title-line {
      word-break: auto-phrase !important;
    }
  }
}

/* 2026-07-09 mobile hero CTA: show Contact and Book a call clearly on phones. */
@media (max-width: 720px) {
  .hero-actions,
  .hero-copy > .hero-actions,
  html[lang="ja"] .hero-copy > .hero-actions {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin: 22px 0 0 !important;
  }

  .hero-actions .button,
  .hero-actions .hero-contact,
  .hero-actions .hero-book {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
  }

  .hero-actions .hero-book {
    color: var(--navy, #173a69) !important;
    background: #fff !important;
    border: 1px solid var(--line, #dfe6ee) !important;
    box-shadow: 0 12px 24px rgba(11, 31, 63, 0.08) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }
}

/* 2026-07-09 JP mobile hero repair: stop text clipping and keep both CTAs visible. */
@media (max-width: 720px) {
  html[lang="ja"] .hero,
  html[lang="ja"] .section-pad.hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  html[lang="ja"] .hero-grid,
  html[lang="ja"] .hero-copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    max-width: calc(100vw - 40px) !important;
  }

  html[lang="ja"] .hero h1,
  html[lang="ja"] .hero-title-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: clamp(34px, 9.2vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-lede {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 18px !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-proof-line {
    display: none !important;
  }

  html[lang="ja"] .hero-actions,
  html[lang="ja"] .hero-copy > .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin: 22px 0 0 !important;
    overflow: visible !important;
  }

  html[lang="ja"] .hero-actions .button,
  html[lang="ja"] .hero-actions .hero-contact,
  html[lang="ja"] .hero-actions .hero-book {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

@supports (word-break: auto-phrase) {
  @media (max-width: 720px) {
    html[lang="ja"] .hero h1,
    html[lang="ja"] .hero-title-line,
    html[lang="ja"] .hero-lede {
      word-break: auto-phrase !important;
    }
  }
}

/* 2026-07-10 JP mobile hard stop: Safari must wrap Japanese hero text inside the viewport. */
@media (max-width: 720px) {
  html[lang="ja"],
  html[lang="ja"] body,
  html[lang="ja"] main,
  html[lang="ja"] .hero,
  html[lang="ja"] .section-pad.hero,
  html[lang="ja"] .hero-grid,
  html[lang="ja"] .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html[lang="ja"] .hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  html[lang="ja"] .hero-copy > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang="ja"] .hero h1,
  html[lang="ja"] .hero-title-line,
  html[lang="ja"] .hero-lede {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: wrap !important;
  }

  html[lang="ja"] .hero-title-line {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero-title-line > span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 100% !important;
    font-size: clamp(30px, 8.5vw, 34px) !important;
    line-height: 1.18 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero-lede {
    font-size: 15px !important;
    line-height: 1.75 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .hero-actions,
  html[lang="ja"] .hero-copy > .hero-actions,
  html[lang="ja"] .hero-actions .button,
  html[lang="ja"] .hero-actions .hero-contact,
  html[lang="ja"] .hero-actions .hero-book,
  html[lang="ja"] .hero-bridge-visual,
  html[lang="ja"] .gtm-visual.hero-bridge-visual,
  html[lang="ja"] .hero-field-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 2026-07-10 JP mobile final clamp: no horizontal clipping in Safari/Chrome. */
@media (max-width: 720px) {
  html[lang="ja"],
  html[lang="ja"] body {
    overflow-x: hidden !important;
  }

  html[lang="ja"] .hero {
    padding: 38px 22px 42px !important;
  }

  html[lang="ja"] .hero-grid,
  html[lang="ja"] .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html[lang="ja"] .hero h1 {
    width: 100% !important;
    max-width: 8.6em !important;
    margin: 0 !important;
    font-size: clamp(32px, 8.4vw, 36px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-wrap: wrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero-title-line,
  html[lang="ja"] .hero-title-line > span {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-lede {
    width: 100% !important;
    max-width: 21em !important;
    margin-top: 18px !important;
    font-size: 15px !important;
    line-height: 1.78 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .hero-lede-line {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-actions,
  html[lang="ja"] .hero-copy > .hero-actions {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 22px !important;
    justify-self: start !important;
  }

  html[lang="ja"] .hero-actions .button {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang="ja"] .hero-bridge-visual,
  html[lang="ja"] .gtm-visual.hero-bridge-visual,
  html[lang="ja"] .hero-field-card {
    width: min(100%, calc(100vw - 44px)) !important;
    max-width: calc(100vw - 44px) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang="ja"] .hero-field-card img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* 2026-07-10 JP mobile site-wide overflow repair.
   The production CSS stack has several late desktop heading/card rules, so this final block
   keeps every Japanese mobile section inside the viewport and lets text wrap naturally. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html[lang="ja"] body {
    -webkit-text-size-adjust: 100% !important;
  }

  html[lang="ja"] *,
  html[lang="ja"] *::before,
  html[lang="ja"] *::after {
    box-sizing: border-box !important;
  }

  html[lang="ja"] main,
  html[lang="ja"] section,
  html[lang="ja"] .section-pad,
  html[lang="ja"] .muted-section,
  html[lang="ja"] .gtm-section,
  html[lang="ja"] .company-proof,
  html[lang="ja"] .support-section,
  html[lang="ja"] .owned-section,
  html[lang="ja"] .why-section,
  html[lang="ja"] .about-section,
  html[lang="ja"] .contact-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html[lang="ja"] .section-pad,
  html[lang="ja"] .muted-section {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .support-grid,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .network-grid,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-section .section-intro,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .tag-cloud,
  html[lang="ja"] .contact-panel {
    width: min(100%, calc(100vw - 44px)) !important;
    max-width: calc(100vw - 44px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
  }

  html[lang="ja"] .section-intro,
  html[lang="ja"] .section-intro.compact,
  html[lang="ja"] .company-proof-copy,
  html[lang="ja"] .why-layout > div,
  html[lang="ja"] .about-copy,
  html[lang="ja"] .contact-panel > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[lang="ja"] .jp-heading-line {
    display: block !important;
  }

  html[lang="ja"] h1,
  html[lang="ja"] h2,
  html[lang="ja"] h3,
  html[lang="ja"] p,
  html[lang="ja"] li,
  html[lang="ja"] small,
  html[lang="ja"] figcaption,
  html[lang="ja"] .button {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  html[lang="ja"] .company-proof h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .contact-panel h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: clamp(28px, 8.2vw, 38px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
    transform: none !important;
    white-space: normal !important;
    text-wrap: balance !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
  }

  html[lang="ja"] .contact-panel h2,
  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2 {
    font-size: clamp(29px, 8vw, 34px) !important;
    line-height: 1.2 !important;
  }

  html[lang="ja"] .contact-panel {
    padding: 42px 24px !important;
    border-radius: 18px !important;
  }

  html[lang="ja"] .contact-panel > p:not(.eyebrow) {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .contact-panel .contact-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  html[lang="ja"] .contact-panel .contact-actions .button,
  html[lang="ja"] .contact-panel .contact-mail,
  html[lang="ja"] .contact-panel .contact-book {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .contact-panel .contact-mail {
    letter-spacing: 0.05em !important;
  }

  html[lang="ja"] .launch-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 34px 22px !important;
    border-radius: 18px !important;
  }

  html[lang="ja"] .launch-panel ol {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang="ja"] .launch-panel li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 20px 18px !important;
    font-size: 15.5px !important;
    line-height: 1.68 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .launch-panel li span {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
  }

  html[lang="ja"] .why-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  html[lang="ja"] .why-layout > div:first-child p:not(.eyebrow) {
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .proof-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html[lang="ja"] .proof-list div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 42px 1fr !important;
    gap: 16px !important;
    padding: 20px 18px !important;
    font-size: 15.5px !important;
    line-height: 1.58 !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .pain-panel {
    padding: 36px 20px !important;
    border-radius: 18px !important;
  }

  html[lang="ja"] .pain-panel .section-intro,
  html[lang="ja"] .pain-panel .section-intro.compact {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
  }

  html[lang="ja"] .pain-panel .proof-photo-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
  }

  html[lang="ja"] .pain-panel .proof-photo-strip figure {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  html[lang="ja"] .pain-panel .proof-photo-strip img {
    width: 100% !important;
    max-width: 100% !important;
    height: 118px !important;
    display: block !important;
    object-fit: cover !important;
  }

  html[lang="ja"] .pain-panel .proof-photo-strip figcaption {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .site-footer {
    padding: 20px 18px 28px !important;
    overflow-x: hidden !important;
  }

  html[lang="ja"] .site-footer p {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  html[lang="ja"] .site-footer .email-link {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* 2026-07-10 final JP mobile tightening: shorter, calmer type and zero horizontal bleed. */
@media (max-width: 720px) {
  html[lang="ja"],
  html[lang="ja"] body {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  html[lang="ja"] body {
    font-feature-settings: "palt" 1 !important;
  }

  html[lang="ja"] .section-pad {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  html[lang="ja"] .company-proof,
  html[lang="ja"] .support-section,
  html[lang="ja"] .owned-section,
  html[lang="ja"] .why-section,
  html[lang="ja"] .about-section,
  html[lang="ja"] .contact-section {
    margin-top: 0 !important;
  }

  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[lang="ja"] .company-proof h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    word-break: auto-phrase !important;
    overflow-wrap: anywhere !important;
    text-wrap: pretty !important;
  }

  @supports not (word-break: auto-phrase) {
    html[lang="ja"] .company-proof h2,
    html[lang="ja"] .support-section .section-intro h2,
    html[lang="ja"] .launch-panel h2,
    html[lang="ja"] .pain-panel h2,
    html[lang="ja"] .owned-section .section-intro h2,
    html[lang="ja"] .why-section h2,
    html[lang="ja"] .about-section .section-intro h2,
    html[lang="ja"] .contact-panel h2 {
      word-break: normal !important;
      line-break: strict !important;
    }
  }

  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(25px, 7vw, 30px) !important;
  }

  html[lang="ja"] .company-proof-copy > p:not(.eyebrow),
  html[lang="ja"] .support-section .section-intro p,
  html[lang="ja"] .pain-panel .section-intro p,
  html[lang="ja"] .owned-section .section-intro p,
  html[lang="ja"] .why-layout > div:first-child p:not(.eyebrow),
  html[lang="ja"] .about-copy p,
  html[lang="ja"] .contact-panel > p:not(.eyebrow) {
    font-size: 15px !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .launch-panel {
    padding: 30px 18px !important;
    gap: 18px !important;
  }

  html[lang="ja"] .launch-panel ol {
    gap: 12px !important;
  }

  html[lang="ja"] .launch-panel li {
    padding: 16px 14px !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  html[lang="ja"] .launch-panel li span {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  html[lang="ja"] .proof-list div {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  html[lang="ja"] .proof-list div span {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  html[lang="ja"] .proof-list div p {
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .pain-panel {
    padding: 32px 18px !important;
  }

  html[lang="ja"] .pain-panel .proof-photo-strip {
    gap: 12px !important;
  }

  html[lang="ja"] .pain-panel .proof-photo-strip img {
    height: 112px !important;
  }

  html[lang="ja"] .pain-panel .proof-photo-strip figcaption {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.32 !important;
  }

  html[lang="ja"] .contact-panel {
    padding: 34px 20px !important;
  }

  html[lang="ja"] .contact-panel .contact-actions {
    gap: 10px !important;
  }

  html[lang="ja"] .contact-panel .contact-actions .button,
  html[lang="ja"] .contact-panel .contact-mail,
  html[lang="ja"] .contact-panel .contact-book {
    min-height: 54px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 390px) {
  html[lang="ja"] .company-proof h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(24px, 7vw, 29px) !important;
    line-height: 1.25 !important;
  }

  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 38px) !important;
    max-width: calc(100vw - 38px) !important;
  }
}

/* 2026-07-11 final mobile Japanese containment. Keep this at EOF. */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html[lang="ja"] .hero,
  html[lang="ja"] .hero-copy,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html[lang="ja"] .hero h1,
  html[lang="ja"] .company-proof h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .contact-panel h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    letter-spacing: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
    text-wrap: auto !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(42px, 12vw, 52px) !important;
    line-height: 1.08 !important;
  }

  html[lang="ja"] .hero h1 .hero-title-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[lang="ja"] .hero h1 .hero-title-line > span {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  html[lang="ja"] .hero h1 .hero-title-line > span:last-child {
    font-size: 0.92em !important;
  }

  html[lang="ja"] .hero-lede {
    font-size: clamp(19px, 5.2vw, 24px) !important;
    line-height: 1.65 !important;
  }

  html[lang="ja"] .hero-lede-line {
    display: block !important;
    white-space: normal !important;
  }

  html[lang="ja"] .company-proof h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2 {
    font-size: clamp(30px, 8.5vw, 38px) !important;
    line-height: 1.22 !important;
  }

  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(28px, 7.4vw, 34px) !important;
    line-height: 1.24 !important;
  }

  html[lang="ja"] .jp-heading-line {
    display: block !important;
    white-space: normal !important;
  }

  html[lang="ja"] .launch-panel {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  html[lang="ja"] .launch-panel li,
  html[lang="ja"] .proof-list div,
  html[lang="ja"] .contact-panel p,
  html[lang="ja"] .section-intro p {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 390px) {
  html[lang="ja"] .hero-copy,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(40px, 11.2vw, 46px) !important;
  }

  html[lang="ja"] .company-proof h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2 {
    font-size: clamp(28px, 7.7vw, 32px) !important;
    line-height: 1.24 !important;
  }

  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(26px, 7.2vw, 30px) !important;
  }
}

/* 2026-07-11 mobile Japanese overflow hard stop. Keep after all mobile rules. */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html[lang="ja"] main,
  html[lang="ja"] section,
  html[lang="ja"] .hero-grid,
  html[lang="ja"] .hero-copy,
  html[lang="ja"] .hero-actions,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel,
  html[lang="ja"] .proof-list,
  html[lang="ja"] .proof-list div,
  html[lang="ja"] .proof-photo-strip,
  html[lang="ja"] .network-grid,
  html[lang="ja"] .support-grid,
  html[lang="ja"] .support-section .section-intro {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html[lang="ja"] .hero-copy,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[lang="ja"] main h1,
  html[lang="ja"] main h2,
  html[lang="ja"] main h3,
  html[lang="ja"] main p,
  html[lang="ja"] main li,
  html[lang="ja"] main figcaption,
  html[lang="ja"] main .eyebrow,
  html[lang="ja"] main .section-intro,
  html[lang="ja"] main .hero-lede,
  html[lang="ja"] main .hero-proof-line {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: auto !important;
    letter-spacing: 0 !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 100% !important;
    font-size: clamp(40px, 11.4vw, 48px) !important;
    line-height: 1.08 !important;
  }

  html[lang="ja"] .hero h1 .hero-title-line,
  html[lang="ja"] .hero h1 .hero-title-line > span {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line,
  html[lang="ja"] .contact-panel p,
  html[lang="ja"] .why-section p {
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.65 !important;
  }

  html[lang="ja"] .launch-panel,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid {
    grid-template-columns: 1fr !important;
  }

  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .company-proof h2 {
    font-size: clamp(28px, 7.2vw, 34px) !important;
    line-height: 1.22 !important;
  }

  html[lang="ja"] .contact-panel {
    padding: 40px 22px !important;
    overflow: hidden !important;
  }

  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(27px, 7vw, 32px) !important;
    line-height: 1.22 !important;
  }

  html[lang="ja"] .contact-panel .contact-mail,
  html[lang="ja"] .contact-panel .contact-book,
  html[lang="ja"] .hero-actions .button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  html[lang="ja"] .hero-copy,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(36px, 10.8vw, 42px) !important;
  }

  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .company-proof h2 {
    font-size: clamp(25px, 7vw, 30px) !important;
  }
}

/* 2026-07-11 actual EOF mobile guard: Japanese text must never escape its container. */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html[lang="ja"] main,
  html[lang="ja"] main *,
  html[lang="ja"] .contact-panel,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .hero-copy {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  html[lang="ja"] .hero-copy,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[lang="ja"] main h1,
  html[lang="ja"] main h2,
  html[lang="ja"] main h3,
  html[lang="ja"] main p,
  html[lang="ja"] main li,
  html[lang="ja"] main figcaption,
  html[lang="ja"] main .eyebrow,
  html[lang="ja"] main .hero-lede,
  html[lang="ja"] main .hero-proof-line {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: auto !important;
    letter-spacing: 0 !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 100% !important;
    font-size: clamp(36px, 10.2vw, 42px) !important;
    line-height: 1.08 !important;
  }

  html[lang="ja"] .hero h1 .hero-title-line,
  html[lang="ja"] .hero h1 .hero-title-line > span,
  html[lang="ja"] .hero-lede-line {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line,
  html[lang="ja"] .contact-panel p,
  html[lang="ja"] .why-section p {
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.65 !important;
  }

  html[lang="ja"] .launch-panel,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid {
    grid-template-columns: 1fr !important;
  }

  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .company-proof h2 {
    font-size: clamp(25px, 7vw, 32px) !important;
    line-height: 1.22 !important;
  }

  html[lang="ja"] .contact-panel {
    padding: 40px 22px !important;
    overflow: hidden !important;
  }

  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(26px, 6.8vw, 31px) !important;
    line-height: 1.22 !important;
  }

  html[lang="ja"] .contact-panel .contact-mail,
  html[lang="ja"] .contact-panel .contact-book,
  html[lang="ja"] .hero-actions .button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  html[lang="ja"] .hero-copy,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 10vw, 40px) !important;
  }
}

/* 2026-07-11 final mobile hard stop for Japanese copy overflow. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero h1 .hero-title-line > span,
  .hero-lede-line,
  .jp-heading-line {
    display: block !important;
    max-width: 100% !important;
  }

  html[lang="ja"] .hero-copy,
  html[lang="ja"] .hero-media,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .section-intro,
  html[lang="ja"] .section-intro.compact,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang="ja"] main h1,
  html[lang="ja"] main h2,
  html[lang="ja"] main h3,
  html[lang="ja"] main p,
  html[lang="ja"] main li,
  html[lang="ja"] main figcaption,
  html[lang="ja"] main .eyebrow,
  html[lang="ja"] main .hero-lede,
  html[lang="ja"] main .hero-proof-line {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: auto !important;
    letter-spacing: 0 !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(38px, 10.4vw, 42px) !important;
    line-height: 1.1 !important;
  }

  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line {
    font-size: clamp(18px, 4.8vw, 21px) !important;
    line-height: 1.68 !important;
  }

  html[lang="ja"] .launch-panel,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid {
    grid-template-columns: 1fr !important;
  }

  html[lang="ja"] .launch-panel h2,
  html[lang="ja"] .pain-panel h2,
  html[lang="ja"] .why-section h2,
  html[lang="ja"] .about-section .section-intro h2,
  html[lang="ja"] .owned-section .section-intro h2,
  html[lang="ja"] .support-section .section-intro h2,
  html[lang="ja"] .company-proof h2 {
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.25 !important;
  }

  html[lang="ja"] .contact-panel {
    padding: 38px 20px !important;
  }

  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(23px, 5.9vw, 29px) !important;
    line-height: 1.28 !important;
  }

  html[lang="ja"] .contact-panel p {
    font-size: clamp(17px, 4.4vw, 20px) !important;
    line-height: 1.7 !important;
  }

  html[lang="ja"] .hero-actions,
  html[lang="ja"] .contact-panel .contact-actions {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[lang="ja"] .hero-actions .button,
  html[lang="ja"] .contact-panel .contact-mail,
  html[lang="ja"] .contact-panel .contact-book {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  html[lang="ja"] .hero-copy,
  html[lang="ja"] .hero-media,
  html[lang="ja"] .company-proof-inner,
  html[lang="ja"] .support-section .section-intro,
  html[lang="ja"] .section-intro,
  html[lang="ja"] .section-intro.compact,
  html[lang="ja"] .launch-panel,
  html[lang="ja"] .pain-panel,
  html[lang="ja"] .owned-section .section-intro,
  html[lang="ja"] .why-layout,
  html[lang="ja"] .about-grid,
  html[lang="ja"] .contact-panel {
    width: calc(100vw - 26px) !important;
    max-width: calc(100vw - 26px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(35px, 9.8vw, 39px) !important;
  }

  html[lang="ja"] .contact-panel h2 {
    font-size: clamp(23px, 5.9vw, 27px) !important;
  }
}