/* Homepage: proof line under the hero lede, and readable text sizes on phones. */
.hero .hero-proof {
  max-width: 560px;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--brass, #c9a24a);
  font-size: 14px;
  line-height: 1.55;
  color: #cfd6ca;
}
.hero-proof strong {
  color: #f5d982;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero .hero-ctas { margin-top: 22px; }

/* Phones: nothing a visitor has to read sits under 13px, and body copy is 15px. */
@media (max-width: 680px) {
  .quick-benefit p,
  .how-grid .how-step p,
  .features-grid .feature p,
  .feature-film figcaption p,
  .faq-intro p,
  .faq-list details p,
  .download-details details p,
  .pricing-copy .check-list li,
  .closing p,
  .footer-brand p { font-size: 15px; line-height: 1.6; }
  .hero .hero-proof { font-size: 15px; }
  .hero .trial-assurance span,
  .film-footnote,
  .help-link,
  .help-link a,
  .footer-links a,
  .features-grid .feature .text-link,
  .download-details summary,
  .price-meta span { font-size: 14px; }
  .hero-ctas .button { font-size: 15px; }
  .hero-ctas .watch-link { font-size: 14px; }
  .hero .hero-note,
  .closing .hero-note,
  .price-panel .price-note,
  .film-overlay strong,
  .footer-bottom p,
  .footer-bottom p a,
  .footer-bottom .copyright { font-size: 13px; }
  .eyebrow,
  .hero .eyebrow,
  .closing .eyebrow,
  .price-panel .eyebrow,
  .faq-intro .eyebrow,
  .feature-head .feature-number,
  .feature-film .film-index,
  .footer-title,
  .film-duration { font-size: 12px; }
  .how-step .step-number { font-size: 13px; }
}

/* FAQ: the whole row opens the answer, not just the line of text. */
.faq-list details { padding-block: 0; }
.faq-list summary { padding-block: 19px; }
.faq-list details:first-child summary { padding-top: 0; }
.faq-list details p { margin-top: 0; padding-bottom: 19px; }
.faq-list summary:focus-visible { outline: 2px solid var(--brass, #c9a24a); outline-offset: 4px; }

/* Phones cannot run the Windows installer: the download buttons become "send it to my PC". */
.phone-note { display: none; }
html.is-phone .phone-note { display: block; margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: #cfd6ca; }