/* =========================================================================
   PHASE 2 - UNIFIED TYPOGRAPHY & READABILITY SYSTEM (2026-09-16)
   Appended only. No existing rule above this line was removed or edited.
   Purpose: raise small text to readable sizes and give the whole site a
   single, maintainable type scale via CSS custom properties + clamp().
   Scope: font-size / line-height only. No colors, spacing, structure,
   Stripe, payment icons, buttons destinations, or copy were changed.
   ========================================================================= */
:root {
  --fs-body: clamp(16px, 0.4vw + 15.4px, 18px);
  --fs-nav: clamp(16px, 0.2vw + 15.6px, 17px);
  --fs-button: clamp(16px, 0.2vw + 15.6px, 17px);
  --fs-label: clamp(15px, 0.15vw + 14.7px, 16px);
  --fs-input: clamp(17px, 0.2vw + 16.6px, 18px);
  --fs-secondary: clamp(16px, 0.15vw + 15.7px, 17px);
  --fs-legal: clamp(15px, 0.1vw + 14.8px, 15px);
}

/* Navigation (overrides earlier !important rules with higher specificity) */
.nav .nav-links a,
.nav nav a { font-size: var(--fs-nav) !important; }
.lang-btn { font-size: 14px !important; }

/* Buttons */
.btn,
.card-button,
.summary-cta { font-size: var(--fs-button); }

/* Form labels / inputs (site-wide contact form) */
.form label { font-size: var(--fs-label) !important; }
.form input,
.form textarea { font-size: var(--fs-input); }

/* Secondary / card / supporting copy that was under the 16px floor */
.audience p,
.prices p,
.faq details p,
.pkg-list,
.prices-small .pkg-list { font-size: var(--fs-secondary); }

.audience .ex,
.works-note,
.not-included,
.express-note,
.addons-line,
.compare-line,
.step-text { font-size: var(--fs-label); }

/* Legal / footer text floor */
.legal p { font-size: var(--fs-legal); line-height: 1.6; }

/* Mobile floor: never let body/buttons/labels drop below 16 / 15px */
@media (max-width: 620px) {
  body { font-size: 16px; }
  .btn, .card-button, .summary-cta,
  .form input, .form textarea { font-size: 16px; }
  .form label,
  .audience .ex, .works-note, .not-included, .express-note,
  .addons-line, .compare-line, .step-text { font-size: 15px; }
}

/* Visible keyboard focus (Step 9 - accessibility) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card-button:focus-visible,
.nav-toggle:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* =========================================================================
   PHASE 2 - UNIFIED TYPOGRAPHY & READABILITY SYSTEM - PRICING PAGE
   (2026-09-16). Appended only, nothing above this line was edited.
   Font-size / line-height only - calculator logic, prices, layout
   structure, and Stripe/payment icons are untouched.
   ========================================================================= */

/* Pricing-page nav link: existing rule is 12px (non-!important) but is
   currently overridden site-wide to 14px by an !important rule in
   styles.css. Raise both, with matching specificity + !important, to the
   shared --fs-nav scale so it is consistent and correct regardless of
   load order. */
.pricing-page .nav nav a { font-size: 16px !important; }

.eyebrow,
.card-kicker { font-size: 15px; }

.tag { font-size: 13px; }

.calc-form > label,
.calc-form legend { font-size: 15px; }

.calc-form select { font-size: 17px; }

.check { font-size: 16px !important; }

.summary-label { font-size: 15px; }
.summary-line { font-size: 15px; }
.summary small { font-size: 14px; }

.collab-grid a { font-size: 15px; }

.card-button,
.summary-cta { font-size: 16px; }

.format-options small { font-size: 14px; }
.check span small { font-size: 13px; }
.delivery-note { font-size: 15px; }

.payment-title { font-size: 15px; }
.payment-note { font-size: 14px; }

.price-hero-proof span { font-size: 15px; }

@media (max-width: 620px) {
  .pricing-page { font-size: 16px; }
  .calc-form select,
  .card-button,
  .summary-cta { font-size: 16px; }
  .calc-form > label,
  .calc-form legend,
  .eyebrow,
  .card-kicker,
  .summary-label { font-size: 15px; }
}