/* Typography aligned with /unit-substation-transformers.
   Heading sizes fit the homepage's three-offer composition. */
:root {
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

body { font-family: var(--body); font-size: 16px; line-height: 1.55; }
.hero h1 { font-weight: 950; line-height: .96; letter-spacing: -.055em; }
.hero-deck { font-size: 18px; line-height: 1.55; }
.eyebrow { font-size: 13px; font-weight: 950; letter-spacing: .145em; }
.section-title,
.charger-section h2,
.seller-section h2,
.contact-top h2 { font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.section-title { font-size: clamp(30px, 3.1vw, 44px); }
.section-intro { font-size: 17px; line-height: 1.55; }
.btn { font-size: 14px; font-weight: 900; letter-spacing: .01em; }
.text-link { font-size: 13px; font-weight: 900; }
.main-nav { font-size: 14px; }
.nav-cta { font-size: 12px; }
.hero-reasons { font-size: 11px; }
.hero-fine { font-size: 11px; line-height: 1.55; }
.hero-stat strong { font-weight: 950; }
.hero-stat span { font-size: 11px; }
.showcase-caption { font-size: 11px; font-weight: 800; }
.showcase-card.primary .showcase-caption { font-size: 12px; }
.category-card strong { font-size: 17px; font-weight: 900; }
.category-card span { font-size: 11px; }
.filter { font-size: 12px; font-weight: 900; }
.search-wrap input { font-size: 12px; }
.desk-count { font-size: 11px; }
.product h3 { font-weight: 950; line-height: 1.15; letter-spacing: -.035em; }
.product-description { font-size: 13px; line-height: 1.45; }
.product-kicker { font-size: 11px; font-weight: 900; }
.product-facts span { font-size: 11px; font-weight: 800; }
.product-price { font-weight: 950; letter-spacing: -.035em; }
.product-price-note { font-size: 11px; line-height: 1.55; }
.photo-tag { font-size: 11px; font-weight: 900; }
.photo-note { font-size: 9px; }
.inventory-bottom p { font-size: 12px; line-height: 1.55; }
.charger-section p { font-size: 15px; line-height: 1.55; }
.charger-features span { font-size: 11px; font-weight: 900; }
.charger-number strong { font-weight: 950; }
.charger-number span { font-size: 11px; }
.charger-offer-note { font-size: 11px !important; }
.charger-offer-note .text-link { font-size: 11px; }
.why-card h3 { font-size: 16px; font-weight: 700; letter-spacing: .025em; }
.why-card p { font-size: 13px; line-height: 1.45; }
.why-card small { font-size: 11px; font-weight: 900; }
.proof-number { font-weight: 950; }
.proof-number small { font-size: 12px; font-weight: 800; }
.proof-body h3 { font-weight: 700; }
.proof-body p { font-size: 13px; line-height: 1.55; }
.proof-tags span { font-size: 11px; font-weight: 800; }
.seller-section p { font-size: 15px; line-height: 1.55; }
.seller-tags span { font-size: 12px; font-weight: 800; }
.seller-action strong { font-weight: 900; }
.seller-action p { font-size: 13px; }
.contact-top p { font-size: 17px; line-height: 1.55; }
.buyer-band h3 { font-weight: 700; }
.buyer-band p { font-size: 13px; }
.buyer-band .btn { font-size: 13px; }
.footer-links { font-size: 12px; }
.footer-bottom { font-size: 11px; }

@media (max-width: 1150px) {
  .main-nav { font-size: 12px; }
  .hero-deck { font-size: 16px; }
  .hero-actions .btn { font-size: 13px; gap: 14px; }
  .section-intro { font-size: 15px; }
  .category-card strong { font-size: 15px; }
  .category-card span { font-size: 10px; }
  .filter { font-size: 11px; }
  .showcase-caption { font-size: 10px; }
}

@media (min-width: 731px) and (max-width: 950px) {
  .hero h1 { font-size: 39px; }
  .hero-deck { font-size: 14px; }
  .hero-copy .eyebrow { font-size: 11px; }
  .hero-actions .btn { font-size: 11px; gap: 9px; padding: 11px 13px; }
  .hero-reasons { font-size: 10px; }
  .hero-fine { font-size: 10px; }
  .showcase-caption { font-size: 9px; }
  .showcase-card.primary .showcase-caption { font-size: 10px; }
  .filter { font-size: 10px; }
  .category-card strong { font-size: 13px; }
  .category-card span { font-size: 9px; }
  .section-intro { font-size: 14px; }
  .proof-number small { font-size: 10px; }
}

@media (max-width: 730px) {
  .hero-deck { font-size: 16px; }
  .hero-copy .eyebrow { font-size: 12px; }
  .hero-actions .btn { font-size: 13px; }
  .hero-fine { font-size: 11px; }
  .hero-stat span { font-size: 11px; }
  .section-title { font-size: 30px; }
  .section-intro { font-size: 14px; }
  .category-card strong { font-size: 15px; }
  .category-card span { font-size: 10px; }
  .product-kicker { font-size: 10px; }
  .product-description { font-size: 12px; }
  .product-facts span { font-size: 10px; }
  .product-price-note { font-size: 10px; }
  .photo-tag { font-size: 10px; }
  .charger-links .btn, .charger-links .text-link { font-size: 13px; }
  .charger-number span { font-size: 10px; }
  .proof-body p { font-size: 13px; }
  .contact-top p { font-size: 15px; }
}

@media (max-width: 500px) {
  .hero-copy .eyebrow { font-size: 10px; }
  .hero-actions .btn { font-size: 12px; padding: 11px 12px; gap: 10px; }
  .hero-reasons { font-size: 10px; gap: 9px; }
  .hero-fine { font-size: 10px; }
  .hero-stat span { font-size: 10px; }
  .showcase-caption { font-size: 10px; }
  .showcase-card.primary .showcase-caption { font-size: 11px; }
  .category-card strong { font-size: 14px; }
  .category-card span { font-size: 10px; }
  .section-title { font-size: 30px; }
  .inventory .eyebrow { font-size: 11px; }
  .filter { font-size: 11px; }
  .desk-count { font-size: 10px; }
  .product-description { font-size: 13px; }
  .product-kicker, .product-facts span, .product-price-note { font-size: 11px; }
  .photo-tag { font-size: 11px; }
  .inventory-bottom .btn { font-size: 13px; }
  .charger-section p { font-size: 14px; }
  .charger-number span { font-size: 9px; }
  .why-card h3 { font-size: 16px; }
  .why-card p { font-size: 13px; }
  .proof-number small { font-size: 12px; }
  .seller-section p { font-size: 14px; }
  .seller-tags span { font-size: 11px; }
  .seller-action p { font-size: 13px; }
  .buyer-band p { font-size: 13px; }
}

@media (max-width: 350px) {
  .hero-actions .btn { font-size: 11px; padding: 10px; gap: 7px; }
  .hero-copy .eyebrow { font-size: 9px; }
  .hero-stat span { font-size: 9px; }
  .showcase-caption { font-size: 9px; }
}