/* iOS HIG-aligned mobile typography & chrome (≤768px). See docs/MOBILE_HIG_AUDIT.md */
@media (max-width: 768px) {
  :root {
    --site-tabbar-h: 49px;
    --site-fab-size: 60px;
    --site-gutter: 20px;
    --ios-large-title: 2.125rem;
    --ios-title1: 1.75rem;
    --ios-title2: 1.375rem;
    --ios-title3: 1.25rem;
    --ios-headline: 1.0625rem;
    --ios-body: 1.0625rem;
    --ios-callout: 1rem;
    --ios-subhead: 0.9375rem;
    --ios-footnote: 0.8125rem;
    --ios-caption: 0.75rem;
    --ios-lh-large-title: 1.205;
    --ios-lh-title1: 1.214;
    --ios-lh-title2: 1.273;
    --ios-lh-title3: 1.25;
    --ios-lh-headline: 1.294;
    --ios-lh-body: 1.294;
    --ios-lh-callout: 1.3125;
    --ios-lh-subhead: 1.333;
    --ios-lh-footnote: 1.385;
    --ios-lh-caption: 1.333;
    --ink-mobile: #2b2118;
    --muted-mobile: #524336;
    --grass-link: #2a5634;
  }

  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: -apple-system-body, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--ios-body);
    line-height: var(--ios-lh-body);
    color: var(--ink-mobile);
  }

  .eyebrow {
    font-size: var(--ios-caption);
    line-height: var(--ios-lh-caption);
    font-weight: 600;
  }

  h1 {
    font-size: var(--ios-large-title);
    line-height: var(--ios-lh-large-title);
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  h2 {
    font-size: var(--ios-title2);
    line-height: var(--ios-lh-title2);
    font-weight: 700;
  }

  h3 {
    font-size: var(--ios-title3);
    line-height: var(--ios-lh-title3);
    font-weight: 600;
  }

  .lead,
  .sub {
    font-size: var(--ios-callout);
    line-height: var(--ios-lh-callout);
    color: var(--muted-mobile);
  }

  .card p,
  .fact-card > p:not(.fact-kicker):not(.fact-benefit) {
    font-size: var(--ios-subhead);
    line-height: var(--ios-lh-subhead);
    color: var(--muted-mobile);
  }

  .fact-kicker {
    font-size: var(--ios-caption);
    line-height: var(--ios-lh-caption);
  }

  footer,
  .step {
    font-size: var(--ios-footnote);
    line-height: var(--ios-lh-footnote);
  }

  a {
    color: var(--grass-link);
  }

  .links a {
    color: var(--muted-mobile);
  }

  .site-main {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }

  .wrap {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }

  .btn {
    font-size: var(--ios-headline);
    line-height: var(--ios-lh-headline);
    font-weight: 600;
    min-height: 44px;
    padding: 10px 20px;
  }

  .site-tabbar {
    background: rgba(255, 250, 242, 0.96);
    border-top-color: #d9c9b4;
  }

  .site-tabbar__inner {
    min-height: var(--site-tabbar-h);
    padding: 2px 4px 3px;
  }

  .site-tabbar__link {
    gap: 1px;
    min-height: 44px;
    min-width: 44px;
    padding: 3px 2px 2px;
    font-size: 0.625rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted-mobile);
  }

  .site-tabbar__link--accent {
    color: var(--grass-link);
    font-weight: 600;
  }

  .site-tabbar__svg {
    width: 26px;
    height: 26px;
    display: block;
    color: var(--muted-mobile);
  }

  .site-tabbar__link--accent .site-tabbar__svg {
    color: var(--grass-link);
  }

  .site-tabbar__fab {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: var(--site-fab-size);
    height: var(--site-fab-size);
    border-width: 2px;
  }
}