/* System-wide readability floor. Loaded after the app's existing styles. */
body {
  font-size: 17px !important;
  line-height: 1.55;
}

:is(
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  a.button,
  a.btn,
  a[role="button"]
) {
  min-height: 40px;
  font-size: 16px !important;
}

:is(label, legend) {
  font-size: 15px !important;
}

:is(small, .muted, .helper, .help, .hint, [class$="-helper"], [class$="-help"], [class$="-hint"]) {
  font-size: 14px !important;
  line-height: 1.55;
}

:is(table, td) {
  font-size: 15px !important;
}

th {
  font-size: 14px !important;
}

:is(
  .badge,
  .pill,
  .chip,
  .tag,
  [class$="-badge"],
  [class$="-pill"],
  [class$="-chip"],
  [class$="-tag"]
) {
  font-size: 13px !important;
}

/* Mobile-only layout overlay. */
@media (max-width: 760px) {
  :is(html, body, main, section, article, .container, .header-inner, .hero-copy, .hero-visual) {
    max-width: 100%;
    min-width: 0;
  }

  :is(img, video, canvas, iframe) {
    max-width: 100%;
    height: auto;
  }

  :is(
    button,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    a.button,
    a.btn
  ) {
    min-height: 44px;
    min-width: 44px;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }

  :is(
    .header-inner,
    .header-actions,
    .hero-actions,
    .tracking-actions,
    .seo-actions,
    .seo-cta-actions,
    .not-found-actions,
    .result-actions,
    .footer-bottom
  ) {
    max-width: 100%;
    align-items: flex-start;
    flex-wrap: wrap !important;
  }

  :is(
    .product-grid,
    .faq-grid,
    .contact-grid,
    .footer-grid,
    .seo-card-grid,
    .seo-faq-grid,
    .calculator-grid,
    .choice-grid,
    .size-grid,
    .field-grid,
    .field-grid.three,
    .check-grid,
    .result-actions
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(.seo-price-table, .table-wrap, .table-container, .price-table-wrap) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(.modal-backdrop, .dialog-backdrop, .lightbox-backdrop) {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  :is(dialog, .modal, .dialog, [role="dialog"]) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto;
  }
}

@media (max-width: 420px) {
  :is(.hero-actions, .seo-actions, .seo-cta-actions, .not-found-actions) > :is(button, a) {
    flex: 1 1 100%;
  }
}

@media (max-width: 760px) {
  .site-header .header-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .site-header :is(.brand, .brand > span) {
    min-width: 0;
  }
}

/* Selector-specific readability floors. Keep this final for cascade priority. */
.eyebrow,
.eyebrow-light,
.top-strip,
.top-strip-inner {
  font-size: 14px !important;
}

.visual-topline,
.visual-topline > span,
.visual-topline > strong,
.card-number {
  font-size: 13px !important;
}

.calc-header .ghost-button,
.calc-header .line-button,
.calculator-card .product-tabs button b,
.calculator-card .choice-grid button b,
.calculator-card .check-card b,
.calculator-card .rate-preview > b,
.calculator-card .result-actions > a,
.next-step > a {
  font-size: 15px !important;
}

.calculator-card .panel-heading > span,
.calculator-card .input-unit > i {
  font-size: 14px !important;
}

.calculator-card .copy-status {
  font-size: 14px !important;
}

.seo-page .breadcrumbs,
.seo-page .seo-kicker,
.seo-page .seo-price-label,
.seo-page .seo-mini-specs > span {
  font-size: 14px !important;
}

.seo-page .seo-note {
  font-size: 14px !important;
}

.design-chip,
.promo-board-head span,
.promo-board em {
  font-size: 13px !important;
}

.service-points article > span,
.service-points p,
.product-index,
.promo-board > p,
.steps article > span,
.tracking-window ul,
.tracking-window li,
.contact-cards span,
.footer-bottom {
  font-size: 14px !important;
}

.mobile-dock a {
  font-size: 15px !important;
}

.calculator-card .panel-heading p,
.calculator-card .auto-notice,
.calculator-card .rate-preview span,
.calculator-card .result-product span,
.calculator-card .result-breakdown > div,
.calculator-card .grand-total span,
.calculator-card .estimate-note {
  font-size: 14px !important;
}

.calculator-card .result-details span {
  font-size: 13px !important;
}

.calc-header ~ footer {
  font-size: 14px !important;
}

.seo-page .seo-info-card > span,
.seo-page .seo-price-row.is-head,
.seo-page .seo-price-row.is-head > span,
.seo-page .seo-price-row.is-head > b,
.seo-page .seo-data-note,
.seo-page .seo-step > span,
.seo-page .seo-footer-links {
  font-size: 14px !important;
}