/* Page typography has a different job from the small native UI in a capture.
   Keep copy readable at every breakpoint, including controls and disclosures. */
:root {
  --muted: #484f5a;
  --dark-muted: #c2c8d0;
  --section-title: clamp(40px, 5vw, 68px);
  --body-copy: clamp(19px, 1.6vw, 22px);
}
body { font-size: 18px; }
.showcase-heading h2,
.app-showcase .showcase-heading h2,
.b1-head h2,
.features-bento > h2,
.faq-section h2 {
  font-size: var(--section-title);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.showcase-heading { max-width: 1000px; }
.showcase-heading p { font-size: var(--body-copy); line-height: 1.55; }
.site-header nav, .nav-download { font-size: 16px; }
.site-header nav a { color: #e1e5eb; }
.hero-description { color: #d3d7de; }
.hero-motion, .preview-dialog-bar { font-size: 16px; }
.app-readout-name { font-size: 24px; font-weight: 700; }
.app-readout-platform, .app-platforms button { color: #484137; font-size: 16px; }
.app-image-bar h2 { font-size: 18px; }
.b1-head { max-width: 900px; }
.b1-head h2 { font-size: clamp(46px, 6vw, 88px); }
.b1-head > p { max-width: 60ch; color: #e0e3e8; font-size: var(--body-copy); line-height: 1.6; }
.b1-tile h3 { color: #cbd1d9; font-size: clamp(25px, 2.1vw, 30px); line-height: 1.25; }
.b1-tile-copy > p { color: #d3d7de; font-size: 19px; line-height: 1.6; }
.demo-switch, .demo-transport, .demo-rate-head, .demo-rate-head output { font-size: 16px; }
.b1-rate .demo-rate-head label { color: #d3d7de; }
.demo-rate-head { flex-wrap: wrap; gap: 4px 16px; }
.demo-rate input { height: 32px; }
.b1-footnote a { color: #eee0cf; }
.paper-dial > span { font-weight: 700; }
.paper-dial output { font-weight: 400; }
.screenshot-card figcaption { font-weight: 700; }
.screenshot-card figcaption span { font-weight: 400; }
.faq-list summary { padding-block: 24px; font-size: 21px; font-weight: 700; line-height: 1.4; }
.faq-list summary span { flex-shrink: 0; color: #9b381f; }
.faq-list details p { font-size: 18px; line-height: 1.65; }
.closing .eyebrow { color: #ded2c2; font-size: 14px; letter-spacing: .12em; }
.closing h2 + p { color: #d3d7de; font-size: 20px; }
.site-footer > div > p, .footer-links, .footer-links button { font-size: 16px; }
.footer-bottom { font-size: 14px; line-height: 1.6; }
#download-dialog h2 + p { font-size: 18px; line-height: 1.6; }
.dialog-done { font-size: 16px; }

@media (max-width: 800px) {
  .app-readout-name { font-size: 22px; }
  .faq-list summary { font-size: 20px; }
}
@media (max-width: 420px) {
  .nav-download { font-size: 15px; }
  .hero-description { font-size: 19px; }
  .hero-motion { padding-inline: 13px; }
  .app-readout { max-width: 210px; }
  .app-readout-name { font-size: 20px; }
  .footer-bottom { row-gap: 16px; }
}