/* A compact, consistent reading scale for phones. Desktop typography is unchanged.
   Scoped !important rules override the older page-specific typography layers. */
@media (max-width: 750px) {
  html body.layout-two {
    --mobile-body: .875rem;
    --mobile-label: .875rem;
    --mobile-title: 1.625rem;
    --mobile-heading: 1.375rem;
    --mobile-card-heading: 1.125rem;
  }

  html body.layout-two main h1 {
    font-size: var(--mobile-title) !important;
    line-height: 1.45;
    letter-spacing: -.02em;
  }
  html body.layout-two main h2 {
    font-size: var(--mobile-heading) !important;
    line-height: 1.5;
    letter-spacing: -.015em;
  }
  html body.layout-two main h3 {
    font-size: var(--mobile-card-heading) !important;
    line-height: 1.6;
  }
  html body.layout-two #intro #sky-title {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
    line-height: 1.2;
  }
  html body.layout-two main .sky-note h2,
  html body.layout-two main .follow-label {
    font-size: var(--mobile-card-heading) !important;
  }

  html body.layout-two :is(
    .custom-content>p, .sky-subtitle, .creator-card-copy, .overview-copy>p:not(.eyebrow),
    .channel-description, .course-about-inner>p, .section-heading>p:not(.eyebrow),
    .section-lead, .lesson-intro p, .audience-grid article>p,
    .course-description, .benefit-list, .package-included,
    .platform-story p, .platform-trend-copy p, .story-point-copy p,
    .story-pair-copy p:not(.eyebrow), .income-story-copy p,
    .about-cover-copy>p:not(.eyebrow):not(.expert-years),
    .home-brief-card>p, .learning-about-copy>p:not(.eyebrow),
    .home-start-reminder>p, .review-intro>p:not(.eyebrow),
    .work-journal-heading>p:not(.eyebrow), .experience-offer>p:not(.eyebrow),
    .curriculum-note>p, .curriculum-overview>p, .curriculum-overview li,
    .lesson-modal-intro, .lesson-topic>p, .lesson-module-outcome>p,
    .dialog-content>p:not(.eyebrow), .dialog-private, .steps p,
    .dialog-payment-message, details>p
  ) {
    font-size: var(--mobile-body) !important;
    line-height: 1.8;
  }
  html body.layout-two .journey-quote p {
    font-size: 1rem !important;
    line-height: 1.8;
  }
  html body.layout-two .expert-years strong {
    font-size: 1.25rem;
  }
  html body.layout-two #overview .follower-strip strong {
    font-size: 1.875rem !important;
    line-height: 1.3;
  }
  html body.layout-two .follower-strip>div>span {
    font-size: var(--mobile-label);
  }

  html body.layout-two :is(.button, .course-button, .lesson-detail-button,
    .course-quicklinks a, .page-tabs a, .mobile-enroll>a, summary) {
    font-size: var(--mobile-label) !important;
    line-height: 1.6;
  }
  html body.layout-two :is(.button, .course-quicklinks a, .lesson-detail-button) {
    min-height: 44px;
  }
  html body.layout-two .heading-icon-row {
    gap: 10px;
  }
  html body.layout-two .heading-icon-row .section-symbol {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  html body.layout-two .heading-icon-row .section-symbol svg {
    width: 20px;
    height: 20px;
  }
  html body.layout-two :is(#course-dialog h2, .lesson-modal-content>h2) {
    font-size: 1.375rem !important;
    line-height: 1.55;
  }
  html body.layout-two :is(#course-dialog .checkout-steps h2,
    .lesson-modal-topics .lesson-subgroup-heading) {
    font-size: 1.125rem !important;
  }
  html body.layout-two :is(.lesson-topic>h3, .lesson-module-outcome>h3,
    #course-dialog .steps h3) {
    font-size: 1rem !important;
    line-height: 1.65;
  }
  html body.layout-two .course-purchase .price,
  html body.layout-two .dialog-price strong {
    font-size: 1.75rem;
  }
}