/* Mobile type rhythm. Keep all copy, markup, media ratios and scroll engines.
   Major headings share one scale; video-overlay/CTA headings use a smaller role.
   Hero and the expressive Process wordmark deliberately retain their source type. */
@media (max-width: 767px) {
  #wf-page-main {
    --ax-mobile-heading: clamp(32px, 9.230769vw, 40px);
    --ax-mobile-heading-leading: 1.3;
    --ax-mobile-heading-gap: 40px;
    --ax-mobile-description-gap: 20px;
    --ax-mobile-gutter: 20px;
    --ax-mobile-overlay-heading: clamp(24px, 6.666667vw, 28px);
  }

  #wf-main-2 .main__persona__copy h2,
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2) .main-section__title > .jt-typo--02,
  #wf-main-5 .content_box > .text_content h3 p,
  #wf-main-6 .main__sns__title,
  #wf-main-6-3 .article__section-title > .jt-typo--02,
  #wf-main-6-4 .vision_section_title,
  #wf-main-reviews .service-review__title > .jt-typo--02,
  #wf-main-8 .WobloQuestions_title__WPOeU {
    font-size: var(--ax-mobile-heading);
    line-height: var(--ax-mobile-heading-leading);
  }

  #wf-main-2 .main__persona__copy > p,
  #wf-main-4 .main-section__desc,
  #wf-main-6 .main__sns__desc,
  #wf-main-6-3 .article__section-desc {
    margin-top: var(--ax-mobile-description-gap);
  }
  :is(#wf-main-3, #wf-main-4, #wf-main-6-2) .main-section__head,
  #wf-main-6-3 .article__section-head,
  #wf-main-8 .WobloQuestions_header__4ONh9 {
    margin-bottom: var(--ax-mobile-heading-gap);
  }
  #wf-main-2 .main__persona__inner,
  #wf-main-6 .main__sns__inner {
    gap: var(--ax-mobile-heading-gap);
  }

  /* Bound the text slide so a larger heading wraps inside the phone viewport. */
  #wf-main-5 .content_box > .text_content {
    flex: 0 0 calc(100vw - 2 * var(--ax-mobile-gutter));
    width: calc(100vw - 2 * var(--ax-mobile-gutter));
    margin-left: var(--ax-mobile-gutter);
  }
  #wf-main-5 .text_content h3 {
    margin-top: 16px;
  }
  #wf-main-5 .text_content .sub_txt {
    margin-top: var(--ax-mobile-description-gap);
  }
  #wf-main-5 .text_content .sub_txt span {
    font-size: 16px;
    line-height: 1.5;
  }
  /* The expanded video also contains three steps: reserve room for all of them. */
  #wf-main-5 .fixed_section .text_content {
    width: calc(100% - 2 * var(--ax-mobile-gutter));
    margin: 72px var(--ax-mobile-gutter) 24px;
  }
  #wf-main-5 .fixed_section .text_content h3 p {
    font-size: var(--ax-mobile-overlay-heading);
    line-height: 1.3;
  }
  #wf-main-5 .fixed_section .track_content {
    width: calc(100% - 2 * var(--ax-mobile-gutter));
    margin-inline: var(--ax-mobile-gutter);
    padding: 0 0 24px;
    gap: 24px;
  }
  #wf-main-5 .track_content .text_wrap p {
    font-size: 20px;
    line-height: 1.4;
  }
  #wf-main-5 .track_content .text_wrap span {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.5;
  }

  /* CTA lives inside the original scroll mask; use the compact heading role. */
  #wf-main-9 .RequestAccess_heading__tDq2k {
    font-size: clamp(26px, 7.179487vw, 30px);
    line-height: 1.3;
  }
}

@media (max-width: 359px) {
  /* Preserve the display treatment, but fit the word inside very narrow phones. */
  #wf-main-7 .process-title {
    font-size: clamp(64px, 21.025641vw, 75px);
  }
}

/* Short phones: retain the complete three-step story inside the existing pin. */
@media (max-width: 767px) and (max-height: 700px) {
  #wf-main-5 .fixed_section .text_content {
    margin-bottom: 16px;
  }
  #wf-main-5 .fixed_section .text_content h3 {
    margin-top: 12px;
  }
  #wf-main-5 .fixed_section .text_content h3 p {
    font-size: clamp(22px, 6.153846vw, 24px);
  }
  #wf-main-5 .fixed_section .sub_txt {
    margin-top: 16px;
  }
  #wf-main-5 .fixed_section .sub_txt span,
  #wf-main-5 .fixed_section .track_content .text_wrap span {
    font-size: 14px;
    line-height: 1.5;
  }
  #wf-main-5 .fixed_section .track_content {
    gap: 16px;
    padding-bottom: 16px;
  }
}