:root {
  --ps-font-ui: Inter, "Helvetica Neue", Arial, sans-serif;
  --ps-type-page-title: clamp(40px, 5vw, 64px);
  --ps-type-section: 20px;
  --ps-type-card: 16px;
  --ps-type-body: 15px;
  --ps-type-control: 14px;
  --ps-type-secondary: 12px;
  --ps-type-label: 11px;
  --ps-type-meta: 10px;
}

@media screen {
  body,
  button,
  input,
  select,
  textarea {
    font-family: var(--ps-font-ui) !important;
  }

  body {
    font-size: var(--ps-type-body) !important;
    line-height: 1.5;
  }

  button,
  input,
  select,
  textarea {
    font-size: var(--ps-type-control) !important;
    line-height: 1.35;
  }

  .home-page .hero h1,
  .tool-guide .intro h2,
  .tool-windload .topbar h1 {
    font-size: var(--ps-type-page-title) !important;
    line-height: 1 !important;
  }

  .home-page .hero-copy,
  .tool-guide .intro p,
  .tool-windload .lede {
    font-size: var(--ps-type-body) !important;
    line-height: 1.55 !important;
  }

  .eyebrow,
  .kicker,
  .tool-kicker,
  .result-kicker,
  .step-count,
  .status,
  .badge,
  .chip,
  .setup-status {
    font-size: var(--ps-type-meta) !important;
  }

  .bottom-nav a,
  .tool-page .tool-heading strong {
    font-size: var(--ps-type-label) !important;
  }

  .home-page .section-heading h2,
  .home-page .cpd-heading h2 {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .home-page .tool-copy strong,
  .home-page .cpd-contact h3 {
    font-size: 17px !important;
  }

  .home-page .tool-copy small,
  .home-page .cpd-contact p,
  .home-page .cpd-contact-links a {
    font-size: var(--ps-type-secondary) !important;
  }

  .home-page .app-note,
  .home-page .connection-pill,
  .home-page .version-label {
    font-size: var(--ps-type-meta) !important;
  }

  .tool-checklist .checklist-status {
    font-size: 13px !important;
  }

  .tool-checklist .mobile-intro-kicker,
  .tool-checklist .mobile-required-badge,
  .tool-checklist .mobile-menu-hint,
  .tool-checklist .mobile-section-footer {
    font-size: var(--ps-type-meta) !important;
  }

  .tool-checklist .mobile-intro h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
  }

  .tool-checklist .mobile-intro p {
    font-size: var(--ps-type-body) !important;
  }

  .tool-checklist .mobile-section-heading h2 {
    font-size: var(--ps-type-section) !important;
  }

  .tool-checklist .mobile-group h3,
  .tool-checklist .mobile-group-summary-title {
    font-size: var(--ps-type-card) !important;
  }

  .tool-checklist .mobile-section-heading p,
  .tool-checklist .mobile-group-help,
  .tool-checklist .mobile-row-label,
  .tool-checklist .mobile-row-help {
    font-size: var(--ps-type-label) !important;
  }

  .tool-checklist .mobile-field,
  .tool-checklist .mobile-choice,
  .tool-checklist .app-shell > .actions button {
    font-size: var(--ps-type-secondary) !important;
  }

  .tool-guide .panel-head h3 {
    font-size: var(--ps-type-section) !important;
  }

  .tool-guide .panel-head p,
  .tool-guide .intro-note,
  .tool-guide .pending-cover span,
  .tool-guide .primary-result p,
  .tool-guide .warning {
    font-size: var(--ps-type-secondary) !important;
  }

  .tool-guide .field-label,
  .tool-guide .field-label span,
  .tool-guide .field-help,
  .tool-guide .completion,
  .tool-guide .detail-title,
  .tool-guide .component-ref,
  .tool-guide .component-name span,
  .tool-guide .metric small,
  .tool-guide .component-qty small,
  .tool-guide .footer {
    font-size: var(--ps-type-label) !important;
  }

  .tool-guide .choice label,
  .tool-guide .component-name strong,
  .tool-guide .basis-card strong {
    font-size: var(--ps-type-secondary) !important;
  }

  .tool-guide .cavity strong,
  .tool-guide .meta-item strong,
  .tool-guide .component-qty,
  .tool-guide .big-number small {
    font-size: 13px !important;
  }

  .tool-guide .cavity small,
  .tool-guide .metric span,
  .tool-guide .meta-item span,
  .tool-guide .basis-card span {
    font-size: var(--ps-type-meta) !important;
  }

  .tool-guide .clear-btn,
  .tool-guide .print-btn {
    font-size: var(--ps-type-secondary) !important;
  }

  .tool-distributors .search-panel h2 {
    font-size: var(--ps-type-section) !important;
  }

  .tool-distributors .search-panel > p,
  .tool-distributors .filter-input,
  .tool-distributors .list-heading strong,
  .tool-distributors .result-count,
  .tool-distributors .map-summary {
    font-size: var(--ps-type-secondary) !important;
  }

  .tool-distributors .location-button,
  .tool-distributors .status,
  .tool-distributors .mobile-view-tabs button,
  .tool-distributors .map-type button,
  .tool-distributors .popup-address,
  .tool-distributors .popup-actions a {
    font-size: var(--ps-type-label) !important;
  }

  .tool-distributors .result-card h3,
  .tool-distributors .map-summary strong,
  .tool-distributors .popup-title {
    font-size: var(--ps-type-body) !important;
  }

  .tool-distributors .result-meta,
  .tool-distributors .distance,
  .tool-distributors .tile-loading {
    font-size: var(--ps-type-label) !important;
  }

  .tool-windload h2 {
    font-size: var(--ps-type-section) !important;
  }

  .tool-windload h3,
  .tool-windload .section-heading h3,
  .tool-windload .output-group h3 {
    font-size: var(--ps-type-card) !important;
  }

  .tool-windload label,
  .tool-windload .section-step,
  .tool-windload .result-label,
  .tool-windload .zone-table th {
    font-size: var(--ps-type-label) !important;
  }

  .tool-windload .input-hint,
  .tool-windload .reference-row,
  .tool-windload .advanced-inputs summary,
  .tool-windload .map-fallback,
  .tool-windload .map-note,
  .tool-windload .message,
  .tool-windload .formula-box,
  .tool-windload .sources,
  .tool-windload .warning {
    font-size: var(--ps-type-secondary) !important;
  }

  .tool-windload .zone-table {
    font-size: 13px !important;
  }

  .tool-windload .result-unit {
    font-size: 13px !important;
  }
}

@media screen and (max-width: 760px) {
  :root {
    --ps-type-page-title: clamp(36px, 10vw, 44px);
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button {
    font-size: 13px !important;
  }

  .tool-checklist .mobile-intro h1 {
    font-size: 28px !important;
  }
}
