/* EDIT THESE VALUES to adjust typography across both languages.
   Loaded after site.css, so these settings take precedence.
   Large page/section headings retain their existing sizes. */
:root {
  --font-body: 20px;       /* General reading text and bot detail pages */
  --font-card: 18px;       /* Bot cards, pricing copy, contact and FAQs */
  --font-menu: 18px;       /* Navigation and language choices */
  --font-button: 18px;     /* Buttons and links to individual bots */
  --font-small: 16px;      /* Captions, footer, addresses and menu descriptions */
  --font-label: 16px;      /* Uppercase labels and bot taglines */
  --font-lead: 22px;       /* Introductory paragraphs on individual bot pages */
}
body { font-size: var(--font-body); }
.hero > p, .prose { font-size: var(--font-body); }
.article-intro, .prose .article-intro { font-size: var(--font-lead); }
.desktop-nav, .header-actions summary, .bot-menu > summary,
.language-menu > summary, .language-dropdown a, .mobile-dropdown > a,
.bot-dropdown strong, .mobile-bots strong { font-size: var(--font-menu); }
.bot-dropdown small, .mobile-bots small { font-size: var(--font-small); }
.button, .bot-hero .button, .text-link { font-size: var(--font-button); }
.card-content > p:not(.bot-tagline), .association p, .pricing-copy > p,
.faq-item > summary, .faq-answer, .contact-copy { font-size: var(--font-card); }
.eyebrow, .hero-eyebrow, .bot-tagline, .bot-hero .eyebrow { font-size: var(--font-label); letter-spacing: .065em; }
.price-plan h3, .price-plan p, .price span, .footer-inner p,
.footer-inner > a:last-child, .back-link, .bot-address,
.article-sidebar nav a, .sidebar-note a, .audio-example label { font-size: var(--font-small); }

.sentence-examples { font-size: var(--font-body); }
.mobile-bots a { font-size: var(--font-menu); }
.bot-dropdown { width: 410px; }
.banner { background: transparent; margin-block: 20px 0; }
.banner-link { display: block; }
/* Navigation needs extra room with larger type and translated labels. */
@media (max-width: 959px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .header-actions { margin-inline-start: auto; }
}
@media (max-width: 430px) {
  .header-inner { flex-wrap: wrap; gap: 4px 8px; padding-block: 10px; }
  .header-inner .brand { font-size: 25px; }
  .language-menu > summary { gap: 5px; padding-inline: 6px; }
  .mobile-nav > summary { width: 30px; }
  .header-actions { gap: 2px; }
  .mobile-dropdown { top: 100%; }
}
@media (max-width: 359px) {
  .header-inner .brand { font-size: 23px; }
  .header-inner .brand img { width: 23px; }
}