/* Readability pass for the public NOLSAPO sales site.
   Keep the smallest supporting copy at roughly the same size as the main
   Sappo explanatory paragraph so the site remains easy to read on iPhone. */

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

body {
  font-size: 18px;
  line-height: 1.9;
}

/* Header / navigation */
.brand-stack small,
.header-nav a,
.button,
.header-cta {
  font-size: 18px;
  line-height: 1.35;
}

.button {
  min-height: 56px;
  padding: 14px 22px;
}

/* Global supporting copy: nothing important should drop below this size. */
.section-kicker,
.section-heading > p,
.hero-badge,
.hero-lead,
.hero-mini,
.value-strip b,
.value-strip span,
.feature-card p,
.feature-tag,
.connected p,
.chain span,
.sappo-bubble span,
.sappo-copy > p,
.sappo-points div,
.price-card .eyebrow,
.price-main small,
.price-after,
.trial-card ul,
summary,
details p,
.contact-panel > p,
.contact-field label,
.contact-field input,
.contact-field select,
.contact-field textarea,
.contact-form-note,
.site-footer,
.footer-meta,
.footer-brand span {
  font-size: 18px;
  line-height: 1.8;
}

.section-kicker {
  letter-spacing: .12em;
}

/* Titles and card headings get a proportional bump as well. */
.feature-card h3,
.trial-card h3,
summary {
  font-size: 22px;
  line-height: 1.55;
}

.sappo-bubble b {
  font-size: 22px;
}

.price-card h3 {
  font-size: 28px;
}

/* App preview shown in the hero: even the smallest labels stay readable. */
.phone-top,
.quest-head span,
.next-card small,
.flow-row span,
.mini-grid small,
.sappo-card b,
.sappo-card p,
.floating-pill,
.quest-head b,
.next-card > span,
.mini-grid {
  font-size: 18px;
  line-height: 1.5;
}

.next-card strong {
  font-size: 22px;
}

.mini-grid b {
  font-size: 25px;
}

/* Form controls need enough height once their text is enlarged. */
.contact-field input,
.contact-field select {
  min-height: 56px;
  padding: 13px 15px;
}

.contact-field textarea {
  min-height: 150px;
  padding: 13px 15px;
}

.contact-form-note {
  margin-top: 10px;
}

@media (max-width: 620px) {
  body {
    font-size: 19px;
    line-height: 1.95;
  }

  .site-header {
    min-height: 76px;
  }

  .brand-stack small,
  .header-cta,
  .button,
  .section-kicker,
  .section-heading > p,
  .hero-badge,
  .hero-lead,
  .hero-mini,
  .value-strip b,
  .value-strip span,
  .feature-card p,
  .feature-tag,
  .connected p,
  .chain span,
  .sappo-bubble span,
  .sappo-copy > p,
  .sappo-points div,
  .price-card .eyebrow,
  .price-main small,
  .price-after,
  .trial-card ul,
  summary,
  details p,
  .contact-panel > p,
  .contact-field label,
  .contact-field input,
  .contact-field select,
  .contact-field textarea,
  .contact-form-note,
  .site-footer,
  .footer-meta,
  .footer-brand span,
  .phone-top,
  .quest-head span,
  .next-card small,
  .flow-row span,
  .mini-grid small,
  .sappo-card b,
  .sappo-card p,
  .floating-pill,
  .quest-head b,
  .next-card > span,
  .mini-grid {
    font-size: 19px;
    line-height: 1.85;
  }

  .header-cta {
    min-height: 50px;
    padding: 11px 15px;
    white-space: nowrap;
  }

  .feature-card h3,
  .trial-card h3,
  summary {
    font-size: 24px;
  }

  .sappo-bubble b {
    font-size: 24px;
  }

  .next-card strong {
    font-size: 23px;
  }

  .mini-grid b {
    font-size: 26px;
  }

  .phone {
    width: min(330px, 88vw);
  }

  .sappo-card {
    width: 184px;
    padding: 17px;
  }

  .value-strip article,
  .feature-card,
  details,
  .sappo-points div {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}