/* BODY HACK mobile-first final refinements.
   Loaded after editorial/entry CSS. It changes presentation only: no content, URL, form or tracking logic. */
@media (max-width: 720px) {
  /* Section headers must read top-to-bottom on phones, never as desktop left/right columns. */
  .bhx-site .bhx-section-head {
    display: block !important;
    margin-bottom: 30px !important;
    text-align: left !important;
  }
  .bhx-site .bhx-section-head > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .bhx-site .bhx-section-head > p,
  .bhx-site .bhx-section-head > div + p,
  .bhx-site .bhx-section-head > div + div {
    margin-top: 17px !important;
  }
  .bhx-site .bhx-section-head h2 {
    max-width: 100% !important;
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.62 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .bhx-site .bhx-page-hero h1,
  .bhx-site .post_title {
    max-width: 100% !important;
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.62 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .bhx-site .bhx-page-hero {
    padding-top: 34px !important;
    padding-bottom: 40px !important;
  }
  .bhx-site .bhx-page-lead {
    margin-top: 20px !important;
    font-size: 14px !important;
    line-height: 2 !important;
  }
  .bhx-site .bhx-section-head p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 2 !important;
  }

  /* Desktop-authored hard breaks often look awkward on narrow Japanese layouts. */
  .bhx-site .bhx-page h2 br,
  .bhx-site .bhx-home h2 br {
    display: none !important;
  }
  /* The registration hero has its own deliberate phrase locking. */
  .bhx-site .bhx-entry-catch br,
  .bhx-site .bhx-entry-catch-line br {
    display: initial !important;
  }

  /* Card groups that are useful in three columns on desktop should become a reading sequence. */
  .bhx-site .bhx-intent-grid,
  .bhx-site .bhx-route-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .bhx-site .bhx-intent-grid > article,
  .bhx-site .bhx-route-card {
    padding: 23px 20px !important;
  }

  /* Buttons need breathing room from the copy before and after them. */
  .bhx-site .bhx-actions {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    row-gap: 14px !important;
  }
  .bhx-site .bhx-actions + p,
  .bhx-site .bhx-actions + .bhx-small,
  .bhx-site .bhx-button + p,
  .bhx-site .bhx-button-entry + p {
    margin-top: 18px !important;
  }
  .bhx-site .bhx-entry .bhx-button-entry {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .bhx-site .bhx-register-strip .bhx-button-entry {
    margin-top: 24px !important;
    margin-bottom: 4px !important;
  }
  .bhx-site .bhx-register-strip p {
    margin-bottom: 0 !important;
    line-height: 2 !important;
  }
  .bhx-site .bhx-entry .bhx-text-link {
    line-height: 1.9 !important;
  }

  /* Registration page: headlines and supporting copy should form one clear vertical rhythm. */
  .bhx-site .bhx-entry .bhx-section-head .bhx-kicker {
    margin-bottom: 10px !important;
  }
  .bhx-site .bhx-entry .bhx-section-head > div + p {
    padding-top: 0 !important;
    color: var(--bhx-muted) !important;
  }
  .bhx-site .bhx-entry-welcome-grid,
  .bhx-site .bhx-entry-motives,
  .bhx-site .bhx-entry-values {
    margin-top: 4px !important;
  }
  .bhx-site .bhx-entry-welcome-card-body,
  .bhx-site .bhx-entry-motives article,
  .bhx-site .bhx-entry-values article {
    text-align: left !important;
  }

  /* Forms / content blocks: prevent cramped controls and accidental horizontal scrolling. */
  .bhx-site .bhx-form-layout,
  .bhx-site .bhx-about-grid,
  .bhx-site .bhx-discover-hero,
  .bhx-site .bhx-join-grid,
  .bhx-site .bhx-feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .bhx-site img,
  .bhx-site iframe,
  .bhx-site video {
    max-width: 100% !important;
  }

  /* ALL OUT shared-office banner: explain first, then give the action enough room. */
  .bhx-site .bhx-business,
  .bhx-site .bhx-business-compact {
    display: block !important;
    margin-top: 34px !important;
    margin-bottom: 34px !important;
    padding: 28px 22px !important;
    border-radius: 14px !important;
  }
  .bhx-site .bhx-business .bhx-kicker,
  .bhx-site .bhx-business-compact .bhx-kicker {
    margin-bottom: 12px !important;
  }
  .bhx-site .bhx-business h2,
  .bhx-site .bhx-business-compact h2 {
    margin: 0 0 20px !important;
    font-size: clamp(24px, 6.8vw, 29px) !important;
    line-height: 1.65 !important;
  }
  .bhx-site .bhx-business p,
  .bhx-site .bhx-business-compact p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 2 !important;
  }
  .bhx-site .bhx-business p + p,
  .bhx-site .bhx-business-compact p + p {
    margin-top: 16px !important;
  }
  .bhx-site .bhx-business p + .bhx-button,
  .bhx-site .bhx-business-compact p + .bhx-button,
  .bhx-site .bhx-business .bhx-small + .bhx-button,
  .bhx-site .bhx-business-compact .bhx-small + .bhx-button {
    margin-top: 28px !important;
  }
  .bhx-site .bhx-business .bhx-button,
  .bhx-site .bhx-business-compact .bhx-button {
    width: 100% !important;
    min-height: 56px !important;
    padding: 15px 18px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    text-align: center !important;
  }
  .bhx-site .bhx-business figure {
    margin-top: 28px !important;
  }

  /* Mobile interaction baseline for every redesigned BODY HACK page. */
  .bhx-site .bhx-button,
  .bhx-site .bhx-text-link,
  .bhx-site .bhx-topic-nav a,
  .bhx-site .bhx-topic-grid a,
  .bhx-site .bhx-card a,
  .bhx-site .bhx-mobile-nav a {
    -webkit-tap-highlight-color: rgba(39,61,52,.08);
    touch-action: manipulation;
  }
  .bhx-site .bhx-button {
    min-height: 52px !important;
  }
  .bhx-site .bhx-text-link {
    min-height: 44px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .bhx-site .bhx-topic-nav a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .bhx-site .bhx-mobile-nav a {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }
  .bhx-site input,
  .bhx-site select,
  .bhx-site textarea,
  .bhx-site .bhx-search input {
    font-size: 16px !important;
  }
  .bhx-site .bhx-search button {
    min-height: 48px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 520px) {
  .bhx-site .bhx-section {
    padding: 52px 0 !important;
  }
  .bhx-site .bhx-section-head {
    margin-bottom: 26px !important;
  }
  .bhx-site .bhx-section-head h2 {
    font-size: clamp(24px, 7.2vw, 29px) !important;
    line-height: 1.65 !important;
  }
  .bhx-site .bhx-section-head p {
    font-size: 13px !important;
    line-height: 2 !important;
  }
  .bhx-site .bhx-kicker {
    line-height: 1.8 !important;
  }

  /* Mobile reading rhythm: standalone actions must not stick to surrounding copy. */
  .bhx-site p + .bhx-button,
  .bhx-site p + .bhx-text-link,
  .bhx-site .bhx-page-lead + .bhx-button,
  .bhx-site .bhx-page-lead + .bhx-text-link {
    margin-top: 24px !important;
  }
  .bhx-site .bhx-button + p,
  .bhx-site .bhx-text-link + p {
    margin-top: 18px !important;
  }

  /* Registration CTAs become one clear tap target with enough surrounding whitespace. */
  .bhx-site .bhx-entry .bhx-actions {
    display: block !important;
    margin-top: 30px !important;
    margin-bottom: 24px !important;
  }
  .bhx-site .bhx-entry .bhx-actions > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  .bhx-site .bhx-entry .bhx-actions > * + * {
    margin-top: 13px !important;
  }
  .bhx-site .bhx-entry .bhx-button-entry {
    min-height: 60px !important;
    padding: 16px 18px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  .bhx-site .bhx-entry .bhx-text-link {
    min-height: 46px !important;
    padding: 4px 0 !important;
  }
  .bhx-site .bhx-entry-selection-line,
  .bhx-site .bhx-entry-phone-note,
  .bhx-site .bhx-small {
    line-height: 2 !important;
  }

  /* Single-column content is easier to scan than tiny two-up cards on phones. */
  .bhx-site .bhx-topic-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}