/*!
 * Socient — mobile type scale
 *
 * Loaded LAST on every page, after style.css, insights/post.css and each page's
 * own <style> block. That ordering is deliberate: an audit at 390px found 40
 * distinct font sizes across the site, most of them set by page-scoped rules
 * with higher specificity than the design system. This sheet exists only to
 * pull those back onto one scale, so it uses !important inside a single media
 * query. Nothing here applies above 620px.
 *
 * Seven steps. Every text role maps onto one. Leading is set by role, not per
 * component, so successive blocks share a vertical rhythm.
 */

@media (max-width: 620px) {
  :root {
    --ms-xs:   13px;   /* uppercase micro-labels, tags */
    --ms-sm:   15px;   /* meta, captions, fineprint — the floor for any prose */
    --ms-base: 17px;   /* body */
    --ms-md:   19px;   /* lead paragraphs, standfirsts */
    --ms-lg:   23px;   /* h4, card titles */
    --ms-xl:   28px;   /* h3 */
    --ms-2xl:  34px;   /* h2, section headlines */
    --ms-3xl:  40px;   /* h1 */

    --lh-tight: 1.12;
    --lh-head:  1.22;
    --lh-lead:  1.5;
    --lh-body:  1.62;
    --lh-micro: 1.4;
  }

  /* ---- Running text. 15px is the floor; nothing prose-like goes below it. ---- */
  body { font-size: var(--ms-base) !important; line-height: var(--lh-body) !important; }
  p, li, blockquote, dd, figcaption, td, .ans, .obj-answer {
    font-size: var(--ms-base) !important;
    line-height: var(--lh-body) !important;
  }

  /* ---- Secondary prose: one step down, never smaller ---- */
  .ic-excerpt, .form-fineprint, .sc-note, .post-meta-sub, .plan-billing,
  .form-note, .tool-sub, .al-empty, .source-note, .founder-role, .fit-sub,
  .stat-label, .st-label, .sc-sub, .service-tagline, .footer-brand p,
  .credentials-label, .modal-sub, .final-supporting, .testimonial-attr,
  .mt-startup .form-note, .mt-startup .sec-intro, .subscribe-form .form-fineprint {
    font-size: var(--ms-sm) !important;
    line-height: var(--lh-body) !important;
  }

  /* ---- Lead paragraphs ---- */
  .hero-sub, .post-standfirst, .uc-tagline, .problem-lead,
  .subscribe-copy p, .final-cta > .container p, .shift-text > p:first-of-type {
    font-size: var(--ms-md) !important;
    line-height: var(--lh-lead) !important;
  }

  /* The home hero runs two paragraphs. The first is the lead and keeps the lead
     size. The second is supporting copy, so on a phone it steps down to body
     size and the two stop competing. */
  .hero-sub.hero-sub-alt {
    font-size: var(--ms-base) !important;
  }

  /* ---- Headings ---- */
  h1, .hero h1, .post-hero h1, .mt-startup .hero h1 {
    font-size: var(--ms-3xl) !important; line-height: var(--lh-tight) !important;
  }
  h2, .section-headline, .sec-title, .subscribe-copy h2, .post-body h2 {
    font-size: var(--ms-2xl) !important; line-height: var(--lh-head) !important;
  }
  h3, .subscribe-confirmed h3 {
    font-size: var(--ms-xl) !important; line-height: var(--lh-head) !important;
  }
  h4, .service-card h3, .step h4, .why-card h4, .obj-question h4, .ic-body h2 {
    font-size: var(--ms-lg) !important; line-height: var(--lh-head) !important;
  }

  /* ---- Micro labels: one size, one tracking ---- */
  .section-label, .eyebrow, .ic-tag, .post-tag, .footer-nav-title,
  .credential-tag, .toc-label, .sc-live, .mt-startup .eyebrow, .cover-label {
    font-size: var(--ms-xs) !important;
    line-height: var(--lh-micro) !important;
    letter-spacing: 0.14em !important;
  }

  /* ---- Interactive text tracks the body ---- */
  .btn, .btn-primary, .btn-ghost, .form-submit, .nav-cta, .form-input,
  .form-textarea, .mt-startup .cta, .mt-startup .form-card button,
  .footer-nav a, .footer-link-btn {
    font-size: var(--ms-base) !important;
  }
  .nav-links a, .footer-bottom { font-size: var(--ms-sm) !important; }
  /* Inputs must stay at least 16px or iOS Safari zooms the viewport on focus. */
  input, textarea, select { font-size: 17px !important; }

  /* ---- Vertical rhythm keyed to the scale ---- */
  p + p { margin-top: 1em; }
  h2, .section-headline { margin-bottom: 0.6em; }
  h3, h4 { margin-bottom: 0.45em; }
  .section-label, .eyebrow { margin-bottom: 1.1em; }
  li + li { margin-top: 0.5em; }

  /* ---- Quotes ---- */
  .pullquote blockquote { font-size: var(--ms-xl) !important; line-height: 1.35 !important; }
  .post-body .pullquote { font-size: var(--ms-md) !important; line-height: var(--lh-lead) !important; }

  /* Display numerals keep their own weight — they are figures, not prose. */
  .stat-num, .st-value, .proof-num, .plan-price, .sc-metric { line-height: 1.05 !important; }
}

/* Below 380px the display step starts breaking words. */
@media (max-width: 380px) {
  :root { --ms-3xl: 34px; --ms-2xl: 29px; --ms-xl: 25px; }
}

/* --------------------------------------------------------------------------
   Second pass. The audit above surfaced components that sit below the 15px
   prose floor because they were styled locally inside the interactive article
   tools and the modals. Micro-labels are legitimately 13px; help text, option
   labels and read-times are prose and move up to 15px.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {

  /* Micro-labels — join the 13px step */
  .modal-eyebrow, .plan-eyebrow, .kicker, .post-toc a, .hb-label,
  .pc-label, .chart-label, label {
    font-size: var(--ms-xs) !important;
    line-height: var(--lh-micro) !important;
  }

  /* Help text, option labels and meta — prose, so they take the 15px floor */
  .q-help, .ic-read, .q-opt, .tag-chip, .chip, .filter-chip, .legend,
  .post-meta, .sc-metric, .ans-note, .scale-note {
    font-size: var(--ms-sm) !important;
    line-height: var(--lh-body) !important;
  }

  /* Anything prose-like inside an article, including the tool widgets */
  .post-body p, .post-body li { font-size: var(--ms-base) !important; line-height: var(--lh-body) !important; }
  .post-body .tool p, .post-body .tool li,
  .post-body [class*="tool"] p, .post-body [class*="card"] p {
    font-size: var(--ms-sm) !important;
    line-height: var(--lh-body) !important;
  }

  /* Tap targets: an option button needs a real hit area, not just bigger type */
  .q-opt, .tag-chip, .chip, .filter-chip { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Stragglers. A handful of one-off values were left off the scale — inline
   emphasis that inherited a desktop clamp, a tab control, and the numbered
   markers in the problem list.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .problem-list .num { font-size: var(--ms-md) !important; }      /* was 22 */
  .problem-result em, .shift-text strong,
  .problem-result strong { font-size: inherit !important; }        /* was 26 */
  .philosophy-pull { font-size: var(--ms-md) !important; line-height: var(--lh-lead) !important; }
  .playbook-tab { font-size: var(--ms-sm) !important; min-height: 44px; }
  .plan-price em, .pricing em { font-size: var(--ms-md) !important; }
  .mt-startup .footer-cta-btn { font-size: var(--ms-base) !important; }
  .post-body h3 { font-size: var(--ms-xl) !important; line-height: var(--lh-head) !important; }
}

/* --------------------------------------------------------------------------
   Headings that are actually labels. `.post-takeaways h2` and the footer nav
   titles are `h2` for document outline reasons, not for visual weight — the
   heading rule above would blow them up to the 34px step.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .post-takeaways h2,
  .footer-nav-title,
  h2.footer-nav-title {
    font-size: var(--ms-xs) !important;
    line-height: var(--lh-micro) !important;
    letter-spacing: 0.16em !important;
  }
  /* Metric tags are labels, not prose */
  .sc-metric, .ic-tag, .st-label { font-size: var(--ms-xs) !important; }
}