/* ==========================================================================
   NAPPEDIA CANONICAL UNIVERSAL TOP STRIP, HEADER & FOOTER
   Official fleet-wide style definitions for Nappedia
   Universal Standard: 29px Top Deal Strip, 55px Sticky Header, 950px Max Shell
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Stand-in shown until Inter loads: Arial scaled to Inter's width, so lines break in the same
   places and static pages do not jump when Inter swaps in (#104, #67). The deploy step names it
   after Inter in each page's own font lists (scripts/inter-fallback.mjs). */
@font-face {
  font-family: "InterFallback";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* Strict 950px Max Shell Invariant */
.m-shell,
.shell,
.page-shell,
.content-shell,
.research-layout {
  width: 100% !important;
  max-width: 950px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 1. Universal Centered Top Announcement Deal Strip: Exact 29px Height */
.np-top-strip,
.m-deal-strip,
.top-cta-strip {
  background: #0e2732 !important;
  color: #dce9ec !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 11px !important;
  line-height: 16px !important;
  letter-spacing: 0.01em !important;
  box-sizing: border-box !important;
  height: 29px !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.np-top-strip-inner,
.m-deal-strip-inner,
.top-cta-strip-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 100% !important;
  line-height: 16px !important;
  text-align: center !important;
  max-width: 950px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}
.np-top-strip-badge,
.m-deal-badge {
  background: linear-gradient(135deg, #cd4b2f 0%, #cd4b2f 50%, #b83318 100%) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 14px !important;
  flex-shrink: 0 !important;
}
.np-top-strip-text,
.m-deal-text,
.strip-cta-text {
  color: #dce9ec !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 16px !important;
}
.np-top-strip-text strong,
.m-deal-text strong,
.strip-cta-text strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.np-top-strip-link,
.m-deal-link,
.strip-cta-btn {
  color: #f7a38b !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  line-height: 16px !important;
  transition: color 0.15s ease !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.np-top-strip-link:hover,
.m-deal-link:hover,
.strip-cta-btn:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* 2. Universal Sticky Navigation Header: Exact 55px Height */
.np-header,
.m-header,
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(15, 28, 45, 0.03) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 55px !important;
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.np-header-inner,
.m-header-row-clean,
.header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 55px !important;
  max-width: 950px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}
.np-brand,
.m-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: #202b28 !important;
  flex-shrink: 0 !important;
}
.np-brand:hover,
.m-brand:hover {
  text-decoration: none !important;
}
.np-brand-mark,
.m-brand-logo-mark {
  width: 34px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.np-brand-wrap,
.m-brand-wrap {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}
.np-brand-title,
.m-brand-name {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #202b28 !important;
  letter-spacing: -0.02em !important;
}
.np-brand-tld,
.m-brand-tld {
  color: #cd4b2f !important;
}
.np-brand-subtitle,
.m-brand-desc,
.np-brand-desc {
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #134e4a !important;
  text-transform: uppercase !important;
  margin-top: 1px !important;
}
.np-nav,
.m-nav {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
.np-nav-link,
.m-nav-link {
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #58625b !important;
  text-decoration: none !important;
  padding: 6px 0 !important;
  position: relative !important;
  transition: color 0.15s ease !important;
  line-height: 16px !important;
  background: transparent !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
.np-nav-link:hover,
.m-nav-link:hover {
  color: #202b28 !important;
  background: transparent !important;
}
.np-nav-link.active,
.m-nav-link.active {
  color: #202b28 !important;
  font-weight: 700 !important;
}
.np-nav-link.active::after,
.m-nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: #cd4b2f !important;
  border-radius: 2px !important;
}
.np-nav-cta,
.m-nav-cta,
.btn-header-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #cd4b2f 0%, #cd4b2f 50%, #b83318 100%) !important;
  color: #ffffff !important;
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(205, 75, 47, 0.28) !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  height: 36px !important;
  box-sizing: border-box !important;
}
.np-nav-cta:hover,
.m-nav-cta:hover,
.btn-header-cta:hover {
  background: linear-gradient(135deg, #cd4b2f 0%, #b83318 50%, #b83318 100%) !important;
  box-shadow: 0 4px 12px rgba(205, 75, 47, 0.40) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 600px) {
  .np-nav-cta,
  .m-nav-cta,
  .btn-header-cta {
    display: none !important;
  }
}

/* Mobile Navigation Drawer */
.mobile-navigation {
  display: none !important;
}
@media (max-width: 820px) {
  .np-nav,
  .m-nav {
    display: none !important;
  }
  .mobile-navigation {
    display: block !important;
    position: relative !important;
  }
  .mobile-navigation summary {
    list-style: none !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #202b28 !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
  }
  .mobile-navigation summary::-webkit-details-marker {
    display: none !important;
  }
  .mobile-navigation:not([open]) nav {
    display: none !important;
  }
  .mobile-navigation[open] nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    width: 220px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    padding: 14px 16px !important;
    z-index: 1001 !important;
  }
  .mobile-navigation nav a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #202b28 !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
  }
  .mobile-navigation nav a:last-child {
    border-bottom: none !important;
  }
  .mobile-navigation nav a.active {
    color: #cd4b2f !important;
  }
}

/* 3. Universal Footer */
.np-footer,
.m-footer {
  background: #0f1c2d !important;
  color: #dce9ec !important;
  padding: 38px 0 20px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* Footer legibility: the unscoped brand rules higher in this file carry
   !important, which beats the footer markup's own inline light colours. On the
   dark footer canvas that left the brand name at 1.17:1 and the tagline at
   3.60:1. These rules only touch the footer, so the header keeps its own inks. */
.np-footer .np-brand-title,
.m-footer .m-brand-name {
  color: #ffffff !important;
}
.np-footer .np-brand-subtitle,
.np-footer .np-brand-desc,
.m-footer .m-brand-desc {
  color: #a9c2ca !important;
}
.np-footer .np-brand-tld,
.m-footer .m-brand-name span {
  color: #f7a38b !important;
}
.np-footer-shell,
.m-footer .m-shell {
  max-width: 950px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}
.np-footer-grid,
.m-footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 3fr !important;
  gap: 36px !important;
  align-items: start !important;
}
.np-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.np-footer-tagline {
  font-size: 12.5px !important;
  color: #8da4b0 !important;
  line-height: 1.5 !important;
  max-width: 38ch !important;
  margin: 0 !important;
}
.np-footer-cols,
.m-footer-cols,
.m-footer-cols-5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
.np-footer-col,
.m-footer-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.np-footer-heading,
.m-footer-heading {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}
.np-footer-link,
.m-footer-link {
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #8da4b0 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  line-height: 1.6 !important;
  display: block !important;
  padding: 3px 0 !important;
}
.np-footer-link:hover,
.m-footer-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Centered Footer TM */
.np-footer-bottom,
.m-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 22px 0 10px !important;
  margin-top: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.np-footer-tm-row,
.m-footer-tm-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  gap: 8px !important;
}
.np-footer-copy,
.m-footer-bottom-copy {
  display: block !important;
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
}
.np-footer-tagline-sub,
.m-footer-bottom-tagline {
  display: block !important;
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  text-align: center !important;
  line-height: 1.5 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

@media (max-width: 900px) {
  .np-header-inner,
  .m-header-row-clean {
    padding: 0 16px !important;
  }
  .np-footer-grid,
  .m-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .np-footer-cols,
  .m-footer-cols {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .np-footer-cols,
  .m-footer-cols {
    grid-template-columns: 1fr !important;
  }
}

/* 5-Column Institutional Footer (Equidistant Column Balance) */
.m-footer-cols-5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 768px) {
  .m-footer-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}
@media (max-width: 420px) {
  .m-footer-cols-5 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* One footer everywhere. Every page loads this file, but page families kept
   their own footer copies for the parts the rules above never set (top row,
   tagline, brand lockup, base text size), so the footer drifted from page to
   page. These rules set those parts to the home page and brand review values,
   scoped to footer.m-footer so they outrank any page copy. Footer styling
   belongs here only. */
footer.m-footer {
  font-size: 13px !important;
  line-height: 1.6 !important;
}
footer.m-footer .m-footer-top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 0 0 18px !important;
  margin: 0 0 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
footer.m-footer .m-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  /* Some static pages cap every .m-brand at 34px for the header; the footer brand sizes to its text. */
  height: auto !important;
  max-height: none !important;
}
footer.m-footer .m-brand-logo-mark {
  width: 34px !important;
  height: 34px !important;
  flex: none !important;
}
footer.m-footer .m-brand-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: normal !important;
  line-height: 1.1 !important;
}
footer.m-footer .m-brand-name,
footer.m-footer .m-brand-name span {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
footer.m-footer .m-brand-desc {
  display: block !important;
  margin: 1px 0 0 !important;
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
/* Phones and tablets only; desktop (1025px and up) keeps its current footer (#80, #63). */
@media (max-width: 1024px) {
  /* Shrink on narrow phones so the brand line wraps instead of running off screen. */
  footer.m-footer .m-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  footer.m-footer .m-brand-wrap {
    min-width: 0 !important;
  }
  /* 12px is the reader-text floor in public/tokens.css. Some page copies set the brand line
     to nowrap; at 12px it must wrap on a 320px phone. */
  footer.m-footer .m-brand-desc {
    font-size: 12px !important;
    white-space: normal !important;
  }
  footer.m-footer .m-footer-bottom-tagline {
    font-size: 12px !important;
  }
}
/* Some page copies set footer links to one line with overflow hidden, which
   cuts long labels off when a reader enlarges text. Labels wrap instead, at every width (#67). */
footer.m-footer .m-footer-link {
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
}
footer.m-footer .m-footer-tagline {
  max-width: 480px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #728f9d !important;
}
footer.m-footer .m-footer-cols-5 {
  margin: 0 !important;
}
footer.m-footer .m-footer-bottom {
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #617a86 !important;
}
footer.m-footer .m-footer-bottom-copy,
footer.m-footer .m-footer-bottom-tagline {
  color: #94a3b8 !important;
}
footer.m-footer a:focus-visible,
footer.m-footer button:focus-visible {
  outline: 2px solid #e8f2ec !important;
  outline-offset: 2px !important;
}
@media (max-width: 768px) {
  footer.m-footer .m-footer-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  footer.m-footer .m-footer-link {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 !important;
  }
}
/* Two link columns on phones instead of one long list (plan E3-S3, first
   shipped on the compare pages). */
@media (max-width: 420px) {
  footer.m-footer .m-footer-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 20px !important;
  }
}

/* ==========================================================================
   UNIVERSAL PRE-FOOTER SLEEP QUIZ CTA (UNIVERSAL 6 STANDARD)
   ========================================================================== */
.prefooter-cta-section {
  padding: var(--section-pad-y, 38px) 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
.sleep-quiz-card {
  background: linear-gradient(135deg, #0e2732 0%, #202b28 100%) !important;
  border-radius: 16px !important;
  padding: 40px 32px !important;
  color: #ffffff !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(23, 63, 81, 0.08) !important;
  max-width: 950px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.quiz-kicker {
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #2cd5c4 !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}
.quiz-headline {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
  color: #ffffff !important;
}
.quiz-body {
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #dce9ec !important;
  max-width: 620px !important;
  margin: 0 auto 22px auto !important;
}
.quiz-action-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 22px !important;
}
.quiz-action-group .m-pill-btn-solid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 13px 28px !important;
  background: linear-gradient(135deg, #cd4b2f 0%, #cd4b2f 50%, #b83318 100%) !important;
  color: #ffffff !important;
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 12px rgba(205, 75, 47, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.quiz-action-group .m-pill-btn-solid:hover {
  background: linear-gradient(135deg, #cd4b2f 0%, #b83318 50%, #b83318 100%) !important;
  box-shadow: 0 5px 16px rgba(205, 75, 47, 0.45) !important;
  transform: translateY(-1px) !important;
}
.quiz-ghost-link {
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #dce9ec !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 0.15s ease !important;
}
.quiz-ghost-link:hover {
  color: #ffffff !important;
}
.quiz-trust-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12.5px !important;
  color: #b0c7cf !important;
}
.quiz-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Comparison/search controls inherit the page shell's retired sans token;
   pin the active UI surface to the shared Inter stack. */
.m-search-box-field,
.m-search-box-field *,
.m-autocomplete-dropdown,
.m-autocomplete-dropdown *,
.m-quick-pair-btn,
.m-swap-btn,
.m-feature-help-btn {
  font-family: "Inter", InterFallback, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
@media (max-width: 600px) {
  .sleep-quiz-card {
    padding: 28px 18px !important;
  }
  .quiz-headline {
    font-size: 22px !important;
  }
  .quiz-body {
    font-size: 14px !important;
  }
  .quiz-trust-row {
    gap: 12px !important;
    font-size: 11.5px !important;
  }
}

/* ==========================================================================
   NAPPEDIA INVIOLABLE DESIGN UNIVERSALS
   ========================================================================== */

/* Universal 1: Content Hyperlinks (Apple Blue Standard) */
:root {
  --link-blue: #0066cc;
  --link-blue-hover: #004499;
  --link-blue-visited: #0066cc;
}

a.apple-blue-link,
.link-content a,
.answers-content a,
.m-article-body a,
.m-guide-body a,
.guide-prose a,
.m-shell a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]):not([class*="action"]):not([class*="brand"]):not([class*="deal"]):not([class*="nav"]):not([class*="pill"]):not([class*="chip"]):not([class*="badge"]):not([class*="card"]):not([class*="footer"]):not([class*="quick-jump"]):not([class*="ghost"]) {
  color: var(--link-blue, #0066cc) !important;
  text-decoration: underline !important;
  text-underline-offset: 2.5px !important;
  transition: color 0.15s ease !important;
}

a.apple-blue-link:hover,
.link-content a:hover,
.answers-content a:hover,
.m-article-body a:hover,
.m-guide-body a:hover,
.guide-prose a:hover,
.m-shell a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]):not([class*="action"]):not([class*="brand"]):not([class*="deal"]):not([class*="nav"]):not([class*="pill"]):not([class*="chip"]):not([class*="badge"]):not([class*="card"]):not([class*="footer"]):not([class*="quick-jump"]):not([class*="ghost"]):hover {
  color: var(--link-blue-hover, #004499) !important;
}

a.apple-blue-link:visited,
.link-content a:visited,
.answers-content a:visited,
.m-article-body a:visited,
.m-guide-body a:visited,
.guide-prose a:visited,
.m-shell a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]):not([class*="action"]):not([class*="brand"]):not([class*="deal"]):not([class*="nav"]):not([class*="pill"]):not([class*="chip"]):not([class*="badge"]):not([class*="card"]):not([class*="footer"]):not([class*="quick-jump"]):not([class*="ghost"]):visited {
  color: var(--link-blue, #0066cc) !important;
}

/* Universal Action Buttons & CTAs: Keep white labels only on known coral actions. */
.np-nav-cta,
.np-nav-cta *,
.m-nav-cta,
.m-nav-cta *,
.btn-header-cta,
.btn-header-cta *,
.m-card-cta,
.m-card-cta *,
.m-pill-btn-solid,
.m-pill-btn-solid *,
.m-quiz-cta-btn,
.m-quiz-cta-btn *,
.m-flagship-btn,
.m-flagship-btn *,
.m-btn-primary-coral,
.m-btn-primary-coral *,
.m-card-btn-action,
.m-card-btn-action *,
.m-table-coral-btn,
.m-table-coral-btn *,
.m-cta-btn-coral,
.m-cta-btn-coral *,
.btn-coral,
.btn-coral *,
.btn-action-coral,
.btn-action-coral *,
.btn-primary,
.btn-primary *,
.btn-alt-cta-large,
.btn-alt-cta-large *,
.action-coral-cta,
.action-coral-cta *,
.cro-coral-cta,
.cro-coral-cta * {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Universal 7: Zero-Orphan Grid Layouts */
.m-sort-control {
  min-height: 44px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.m-sort-control:focus-visible { outline: 2px solid var(--link-blue, #0066cc); outline-offset: 2px; }

.m-grid-2col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.m-grid-3col {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 860px) {
  .m-grid-3col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .m-grid-2col,
  .m-grid-3col {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Universal 4: Architectural Vertical Rhythm (Zero-Margin Invariant & 38px Padding)
   ========================================================================== */
:root {
  --section-pad-y: 38px;
}
@media (max-width: 1023px) {
  :root {
    --section-pad-y: 32px;
  }
}
@media (max-width: 640px) {
  :root {
    --section-pad-y: 28px;
  }
}

/* Full-width page sections must have 0 margin and use the shared section token. */
section.m-section,
section.np-section,
section.answers-section,
section.prefooter-cta-section,
section.m-prefooter-quiz,
section.m-brands-hero,
section.m-compare-hero,
section.m-research-hero,
section.m-questions-hero,
section.m-brand-hero,
section.group,
main > section {
  margin: 0 !important;
}

section.m-section,
section.np-section,
section.group {
  padding-top: var(--section-pad-y, 38px) !important;
  padding-bottom: var(--section-pad-y, 38px) !important;
}

/* Inclusive mobile controls: preserve the shared 44px touch target floor. */
@media (max-width: 640px) {
  .mobile-navigation summary,
  .mobile-navigation nav a,
  .np-nav-cta,
  .m-nav-cta,
  .btn-header-cta,
  .m-az-btn,
  .m-filter-btn,
  .m-feature-help-btn,
  .m-search-clear,
  .m-drawer-close-btn,
  .m-mobile-jump-btn,
  .m-quick-pair-btn,
  .m-swap-btn,
  .m-btn-copy,
  .m-source-btn,
  .segmented-btn,
  .btn-prev,
  .btn-restart,
  .m-quiz-btn,
  .m-filter-pill,
  .m-table-pill,
  .quiz-back,
  .quiz-restart,
  .m-pill-btn-solid,
  .m-card-cta,
  .m-quiz-cta-btn,
  .m-flagship-btn,
  .m-btn-primary-coral,
  .m-card-btn-action,
  .m-table-coral-btn,
  .m-cta-btn-coral,
  .btn-coral,
  .btn-action-coral,
  .btn-primary,
  .btn-alt-cta-large {
    min-height: 44px !important;
  }

  .mobile-navigation summary,
  .mobile-navigation nav a,
  .m-az-btn,
  .m-filter-btn,
  .m-feature-help-btn,
  .m-search-clear,
  .m-drawer-close-btn,
  .m-mobile-jump-btn,
  .m-quick-pair-btn,
  .m-swap-btn,
  .m-btn-copy,
  .m-source-btn,
  .segmented-btn,
  .btn-prev,
  .btn-restart,
  .m-quiz-btn,
  .m-filter-pill,
  .m-table-pill,
  .quiz-back,
  .quiz-restart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Keep icon-only help affordances compact visually while exposing a 44px hit area. */
  .m-feature-help-btn {
    min-width: 44px !important;
    padding: 0 !important;
    position: relative !important;
    background: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
  }
  .m-feature-help-btn::before {
    content: "?" !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #e2eaf0 !important;
    color: #3b5a68 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  .m-feature-help-btn:hover::before,
  .m-feature-help-btn:focus-visible::before {
    background: var(--teal-dark, #19483d) !important;
    border-color: var(--teal-dark, #19483d) !important;
    color: #ffffff !important;
  }
}

/* ==========================================================================
   Universal 5: Nav-to-H1 Tightness (Eliminate White Void <= 70px)
   ========================================================================== */
.m-breadcrumbs-bar,
.wrap.breadcrumbs-bar {
  padding: 4px 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  height: 24px !important;
  line-height: 16px !important;
  margin: 0 !important;
}
.m-article-hero {
  padding-top: 6px !important;
  margin-top: 0 !important;
}
.m-hero-meta-top {
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.m-hero-meta-sub {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

/* Header on phones and tablets (#79). Sizes come from public/tokens.css (#78). */
/* Some page templates (research articles) pin the open menu to the Menu
   button's left edge, which pushes it past the right side of the screen. */
@media (max-width: 820px) {
  #site-header .mobile-navigation[open] nav {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 32px) !important;
  }
}
/* The 8.5px tagline is under the 12px reader-text floor. Tablets and small
   laptops get 12px; desktop (1025px and up) keeps its current look. */
@media (min-width: 641px) and (max-width: 1024px) {
  #site-header .m-brand-desc,
  #site-header .np-brand-subtitle {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }
}
/* Keyboard focus and in-page links stop below the 55px sticky header
   instead of landing underneath it. :where() keeps this a default that a
   page's own value (research articles use 72px) overrides. */
:where(html) {
  scroll-padding-top: 64px;
}

@media (max-width: 640px) {
  #site-header .m-brand-desc,
  #site-header .np-brand-subtitle { display: none !important; }
  #site-header .mobile-navigation a[href="/quiz"] {
    background: linear-gradient(135deg, #cd4b2f 0%, #cd4b2f 50%, #b83318 100%) !important;
    color: #ffffff !important;
  }
  .m-faq-btn-text,
  .m-view-btn,
  .m-lineup-chip {
    min-height: 44px !important;
  }
  .m-article-hero {
    padding-top: 0 !important;
  }
  .m-article-hero .m-hero-meta-top {
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
  }
  .m-article-hero .m-hero-meta-top > span {
    min-width: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 14px;
    padding: 0 4px;
  }
}

/* Mobile deal strip (2026-09-17): at phone widths the badge, the sentence and
   the link cannot fit the declared 29px band, so the sentence wrapped out of the
   strip and covered the header below. Keep the badge and the link, drop the
   sentence, and pin the band to its declared height. */
@media (max-width: 640px) {
  .m-deal-strip .m-deal-text,
  .top-cta-strip .m-deal-text {
    display: none !important;
  }
  .m-deal-strip .m-deal-strip-inner,
  .top-cta-strip .top-cta-strip-inner {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: 29px !important;
    overflow: hidden !important;
  }
  .m-deal-strip .m-deal-badge,
  .m-deal-strip .m-deal-link,
  .top-cta-strip .m-deal-badge,
  .top-cta-strip .m-deal-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   Wide content on phones (#81): one pattern for spec tables, compare tables,
   price grids and charts. Each table uses one of three forms (AGENTS.md says
   which to pick). Test page: tests/fixtures/mobile-tables.html.
   1. .np-table-fit    up to 1024px the table fits the screen; long cell text wraps.
   2. .np-table-scroll a wrapper that scrolls sideways inside its own box. Its
                       right edge fades so readers can see there is more; the
                       end padding lets the last column scroll clear of the fade.
                       Give the wrapper tabindex="0", role="region" and an
                       aria-label so keyboard users can scroll it too.
   3. .np-table-stack  on phones each row becomes a card; every td needs a
                       data-label with its column name.
   ========================================================================== */
@media (max-width: 1024px) {
  .np-table-fit {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .np-table-fit th,
  .np-table-fit td,
  .np-table-fit :is(th, td) * {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}
.np-table-scroll {
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  padding-inline-end: 32px !important;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.np-table-scroll:focus-visible {
  outline: 2px solid #0c6967 !important;
  outline-offset: 2px !important;
}
.np-table-scroll-hint {
  display: none;
  margin: 0 0 6px !important;
  font-size: 12px !important;
  color: #4a5b6b !important;
}
@media (max-width: 640px) {
  .np-table-fit {
    font-size: 14px !important;
  }
  .np-table-scroll-hint {
    display: block;
  }
  .np-table-stack thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }
  .np-table-stack,
  .np-table-stack tbody,
  .np-table-stack tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .np-table-stack tr {
    margin: 0 0 12px !important;
    border: 1px solid #d9e2e7 !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
  }
  .np-table-stack th,
  .np-table-stack td {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-top: 1px solid #eef2f4 !important;
    text-align: right !important;
    font-size: 14px !important;
    overflow-wrap: anywhere !important;
  }
  .np-table-stack tr > :first-child {
    border-top: 0 !important;
    text-align: left !important;
    font-weight: 700 !important;
  }
  .np-table-stack td[data-label]::before {
    content: attr(data-label);
    flex: none;
    max-width: 50%;
    text-align: left;
    font-weight: 600;
    color: #4a5b6b;
  }
}

/* ==========================================================================
   Phone and tablet floor (#82, #83, #84, #86, standardcommand#203).
   Page templates set their own small sizes, many of them inline in the
   built pages, so the fixes live here, where every page loads them.
   Everything sits at 1024px and below: desktop keeps its current look.
   Values come from public/tokens.css. Group order: shared, then by page type.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Headings: no last word left alone on its own line. */
  html body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
    text-wrap: balance;
  }

  /* Existing scroll boxes get the shared scroll form's faded edge (#81). */
  html body :is(.pressure-heatmap-matrix, .deep-table-wrap, .guide-table-wrap, .m-table-wrap,
    [class*="question-answer_tableWrap__"], [class*="doc-page_tableWrap__"],
    [class*="FiberglassComponents_modelTableWrapper__"]) {
    padding-inline-end: 32px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  /* Main buttons: 44px tall on phones and tablets. */
  html body :is(a.m-study-link-btn, button.cmp-seg, button.m-filter-pill, a.guide-btn-secondary,
    button[class*="FiberglassComponents_filterPill__"], button.ra-copy-btn) {
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  /* Reader text floor: 12px for labels and badges, 16px for paragraphs (public/tokens.css).
     Selectors come from a measured scan of the audit pages at 390px; none of them match
     text that is already larger. Pages set many labels with !important class rules, so the
     label rules match on weight; the 16px rules carry :not(#np-floor) so they always win. */
  html body :is(
    div.hub-hero-copy span.h2-badge,
    div.hero-photo-wrap span.hero-photo-badge,
    div.hero-photo-wrap div.hero-photo-caption,
    div.hero-spec-box span.hero-spec-label,
    div.hero-spec-box span.hero-spec-sub,
    div.h2-top-row span.h2-badge,
    div.h2-top-row span.verified-stamp,
    section.section-wrap table.data-table th,
    span.entry-card-body span.entry-card-kicker,
    div.stage-badge-box span.stage-num,
    div.stage-badge-box span.stage-label,
    div.sleep-quiz-card span.quiz-kicker,
    div.quiz-trust-row span.quiz-trust-item,
    div.advisory-content div.advisory-kicker,
    div.nsw-scorecard-header div.scorecard-kicker,
    div.pub-cell span.pub-scope,
    table.editorial-scorecard-table span.cfg-pill,
    div.consensus-analysis-callout div.callout-kicker,
    article.section-wrap div.interactive-matcher-wrap span,
    div.interactive-matcher-wrap button.filter-pill-btn,
    article.section-wrap section.section-wrap span,
    div.model-photo-wrap div.model-badge-tag,
    div.spec-node-text span.spec-node-label,
    table.clinical-table span.lineup-status,
    div.h2-top-row p.verified-stamp,
    div.size-card span.size-dims,
    div.evolution-header div.evolution-kicker,
    div.timeline-meta-bar span.timeline-phase-pill,
    div.timeline-card span.timeline-spec-pill,
    table.boundary-table span.tag-verified,
    table.boundary-table span.tag-undisclosed,
    table.clinical-table span.status-pill,
    figure.shot-frame span.capture-url,
    div.law-tag-showcase span.source-pill,
    div.law-tag-grid div.law-tag-substrate span,
    div.law-tag-grid div.law-tag-substrate strong,
    div.policy-spec-card div.policy-spec-card-header,
    div.competitor-card div.comp-img-caption,
    div.competitor-card span.comp-tier-badge,
    main.main-column section.quiz-card span,
    div.hero-data-col p.rs-kicker,
    div.hero-visual-col p.rs-tiles-title,
    section.page-shell p.eyebrow,
    nav.page-shell p.eyebrow,
    article.page-shell p.eyebrow,
    section.expansion-record-summary p.eyebrow,
    article.page-shell section.expansion-record-summary dt,
    section.expansion-source-card p.eyebrow,
    section.expansion-gap-section p.eyebrow,
    section.expansion-family-brief p.eyebrow,
    section.expansion-evidence-columns p.eyebrow,
    section.expansion-family-record-list p.eyebrow,
    section.expansion-source-ledger p.eyebrow,
    div.deep-article-head p.deep-kicker,
    div.deep-article-head div.deep-hero-meta span,
    section.deep-briefing div.deep-briefing-overline span,
    section.deep-briefing div.deep-briefing-lead p,
    section.research-summary header.research-summary-head span,
    header.research-summary-head li.summary-status,
    div.quick-answer-grid article.quick-answer span,
    section.deep-briefing div.deep-briefing-facts span,
    div.deep-decision-map div.deep-decision-lane span,
    section.deep-briefing div.deep-briefing-foot span,
    section.deep-briefing div.deep-briefing-foot a,
    article.deep-article div.deep-scope-note strong,
    section.deep-section div.deep-section-title p,
    div.deep-conclusion span.deep-tone,
    div.deep-fit-grid p.deep-mini-label,
    div.deep-fit-grid p.deep-fit-explainer,
    section.deep-section div.deep-confidence span,
    section.deep-section dl.deep-fact-grid dt,
    dl.deep-fact-grid span.deep-tone,
    ul.deep-layer-list span.deep-tone,
    div.deep-evidence-cards span.deep-tone,
    div.deep-findings span.deep-tone,
    section.deep-section div.deep-findings small,
    div.flex p.wr-kicker,
    section.pressure-heatmap-visualizer div.mt-4 span,
    div.performance-evidence-matrix span.deep-tone,
    div.performance-evidence-matrix span.performance-scope,
    figure.dimension-visual-plate div.dimension-profile b,
    section.deep-section figure.dimension-visual-plate p,
    section.deep-section figure.policy-visual-timeline b,
    dl.deep-policy-list span.deep-tone,
    section.deep-section dl.deep-policy-list dt,
    ol.deep-timeline span.deep-tone,
    section.deep-section dl.deep-gap-list dt,
    section.deep-section ol.deep-source-ledger p,
    section.deep-section ol.deep-source-ledger small,
    article.deep-article div.deep-end-nav a,
    section.deep-record-facts p.deep-kicker,
    aside.deep-record-rail section.deep-record-facts dt,
    section.deep-record-next p.deep-kicker,
    header.guide-article-hero div.guide-meta-strip span,
    div.page-shell div.family-hub-proof span,
    section.family-explainer div.section-label span,
    section.family-explainer div.family-level-guide small,
    section.family-explainer div.family-definition-callout small,
    section.family-collection-map div.section-label span,
    div.family-collection-groups div.family-record-section h4,
    div[class*="brand-family_familyLayout__"] aside[class*="brand-family_factRail__"] p,
    div[class*="brand-family_familyLayout__"] aside[class*="brand-family_factRail__"] dt,
    span.hero-spec-val span.cmp-who,
    div.cmp-table-wrap table.clinical-table th,
    table.clinical-table tr.cmp-cta-row th,
    div.cmp-calc-head span.cmp-kicker,
    div.cmp-calc-head span.cmp-chip,
    div.cmp-finder-controls span.cmp-ctl-label,
    span.cmp-fit-line span.cmp-fit-who,
    span.cmp-sc span.cmp-fit-who,
    ol.m-breadcrumbs-list li.m-breadcrumbs-item span,
    div.m-shell p.m-hero-kicker,
    div.m-hero-chips span.m-chip,
    div.m-search-pane-title-group span.m-side-pill,
    div.m-search-pane-title-group span.m-search-pane-label,
    div.m-vs-center-col button.m-swap-btn span,
    div.m-quick-pairs-wrap span.m-quick-pairs-label,
    div.m-quick-pairs-row button.m-quick-pair-btn,
    div.m-card-brand-row span.m-card-brand-kicker,
    div.m-card-price-row span.m-card-msrp,
    div.m-card-price-row span.m-card-badge,
    div.m-model-column p.m-card-takeaway,
    div.m-tier-title-wrap span.m-tier-subtitle,
    div.m-tier-header span.m-tier-badge,
    table.m-compare-table th.col-feature,
    td.col-feature span.m-feature-sub,
    div.m-section-head span.m-section-kicker,
    div.m-matchup-meta span.m-matchup-badge,
    span.m-matchup-spec-tag span.m-spec-tag-mobile,
    div.m-matchup-side span.m-matchup-model-name,
    div.m-matchup-vs-wrap span.m-matchup-vs,
    article.m-matchup-card p.m-matchup-deck,
    div.m-matchup-foot a.m-matchup-link span,
    div.m-matchup-meta span.m-matchup-spec-tag,
    div.hero-top-row div.hero-meta-left a,
    div.hero-top-row div.hero-meta-left span,
    div.hero-meta-left span.hero-tag,
    div.quiz-toolbar span.quiz-lab-tag,
    div.quiz-toolbar span.quiz-bias-pill,
    div.segmented-control button.segmented-btn,
    div.step-badge-group span.step-badge,
    div.step-header-row span.step-counter,
    div.step-bar-seg span.seg-pct,
    div.quiz-trust-subbar span.trust-subbar-pill,
    div.assurance-tag-row span.assurance-pill,
    div.assurance-tag-row span.assurance-subtag,
    div.pillar-head span.pillar-label,
    div.assurance-disclaimer-bar p.assurance-desc,
    div[class*="FiberglassComponents_legalNoticeCard__"] span[class*="FiberglassComponents_legalNoticeType__"],
    a.catalog-primary-link span.catalog-primary-copy small,
    article.catalog-row span.catalog-construction b,
    article.catalog-row span.catalog-firmness b,
    article.catalog-row span.catalog-status b,
    article.catalog-row span.catalog-status,
    div.catalog-dossier-cell a.catalog-dossier-link,
    div.entry-card-body p.entry-card-kicker,
    div.dir-count-box span.dir-count-label,
    div.dir-chips button.dir-chip,
    button.dir-chip span.dir-chip-n,
    div.table-shell table.dir-table th,
    div.m-sec-head p.m-hero-kicker,
    div.m-stat-card div.m-stat-lbl,
    div.m-view-toggle button.m-view-btn,
    div.m-badge-group span.m-cat-pill,
    div.m-badge-group span.m-journal-tag,
    div.m-card-top-meta span.m-study-date,
    div.m-stat-chips-row span.m-chip-stat span,
    div.m-stat-chips-row span.m-chip-stat,
    article.m-study-card div.m-citation-box span,
    div.m-citation-box a.m-study-link-btn span,
    div.m-method-card div.m-method-num,
    div.section-tag-row span.section-tag,
    div.section-tag-row span.badge-live,
    div.link-content span.parent-badge,
    div.link-content span.live-badge,
    table.boundary-table span.tag-brand-says,
    table.locations-table span.store-district,
    div.mp-fit-box span.mp-fit-label,
    div.consensus-score span.consensus-score-status,
    div.deep-briefing-lead div.consensus-score span,
    section.deep-briefing details.consensus-explainer summary,
    section.deep-briefing details.consensus-explainer p,
    details.consensus-explainer p.consensus-score-counts,
    details.consensus-explainer p.consensus-score-sample-note,
    details.consensus-explainer section.consensus-score-table h3,
    details.consensus-explainer section.consensus-score-table span,
    details.consensus-explainer section.consensus-score-table strong,
    details.consensus-explainer section.consensus-score-table small,
    article.deep-article nav.deep-lineup-map span,
    section.deep-section div.deep-related-grid span,
    figure.mattress-cutaway div.mattress-cutaway-head span,
    figure.mattress-cutaway div.mattress-cutaway-head strong,
    div.cutaway-photo-stage span.cutaway-archetype-note,
    div.cutaway-photo-stage span.cutaway-reconstruction-label,
    div.cutaway-photo-layout ol.cutaway-photo-labels small,
    div.cutaway-photo-layout ol.cutaway-photo-labels em,
    ol.deep-layer-list span.deep-tone,
    [class~="text-[9px]"], [class~="text-[10px]"], [class~="text-[10.5px]"], [class~="text-[11px]"], [class~="text-[11.5px]"]
  ) { font-size: 12px !important; }
  html body main :is(
    div.hub-hero-copy p.hero-disclosure,
    div.sleep-quiz-card p.quiz-body,
    div.nsw-scorecard-header p.scorecard-subtitle,
    div.editorial-scorecard-card p.scorecard-legend,
    nav.model-pages-block p.model-pages-note,
    main.main-column section.quiz-card p,
    div[class*="doc-page_head__"] p[class*="doc-page_meta__"],
    div[class*="doc-page_grid2__"] div[class*="doc-page_tile__"] p,
    div[class*="doc-page_grid4__"] div[class*="doc-page_tile__"] p,
    header.rs-head p.rs-source,
    div.ra-compare-grid div.ra-compare-col p,
    div.ra-callout p.ra-cite-text,
    div.option-two-inner-page section.page-shell p,
    div.deep-article-head p.deep-deck,
    div.quick-answer-grid article.quick-answer p,
    div.deep-decision-map div.deep-decision-lane p,
    article.deep-article figure.unknown-construction-plate p,
    article.deep-article div.deep-scope-note p,
    section.deep-section div.deep-conclusion p,
    section.deep-section div.deep-confidence p,
    section.deep-section dl.deep-fact-grid p,
    section.deep-section p.deep-section-intro,
    ul.deep-layer-list p.deep-layer-spec,
    section.deep-section ul.deep-layer-list p,
    section.deep-section div.deep-evidence-cards p,
    section.deep-section p.material-visual-note,
    section.deep-section div.deep-findings p,
    div.sleep-mechanic-wrapper div.px-4 p,
    section.deep-section dl.deep-policy-list p,
    div.mt-8 section.policy-deconstruction-card p,
    section.deep-section ol.deep-timeline p,
    section.deep-section div.deep-faq-list p,
    section.deep-section dl.deep-gap-list p,
    section.deep-section div.deep-method-note p,
    section.deep-section ol.deep-source-ledger p,
    aside.deep-record-rail section.deep-record-next p,
    div.relative section.policy-deconstruction-card p,
    div[class*="question-answer_content__"] section[class*="question-answer_standardsNote__"] p,
    div[class*="question-answer_relatedGrid__"] article[class*="question-answer_relatedCard__"] p,
    section.family-explainer div.family-definition-callout p,
    div.cmp-picks div.cmp-pick-card p,
    div.hero-data-col p.cmp-disclosure,
    div.m-shell p.m-hero-lede,
    div.m-model-column p.m-card-takeaway,
    div.m-section-head p.m-section-lede,
    article.m-matchup-card p.m-matchup-deck,
    div.quiz-content p.question-sub,
    div[class*="FiberglassComponents_brandOverviewGrid__"] div[class*="FiberglassComponents_brandOverviewText__"] p,
    aside[class*="FiberglassComponents_lawsuitLinkerWidget__"] p[class*="FiberglassComponents_lawsuitDisclaimer__"],
    div[class*="FiberglassComponents_legalNoticeCard__"] p[class*="FiberglassComponents_legalNoticeSummary__"],
    div.entry-card-body p.entry-card-line,
    section.section-wrap div.cta-card p,
    div.m-sec-head p.m-sec-lede,
    article.m-study-card p.m-study-authors,
    div.m-method-card p.m-method-desc,
    div.m-shell p.hero-lead,
    div.m-shell p.section-desc,
    section.deep-section figure.dimension-visual-plate p,
    p.text-xs, p.text-sm
  ):not(#np-floor) { font-size: 16px !important; line-height: 1.6 !important; }
  /* Labels that only shrink at tablet widths, and React islands that size text inline. */
  html body :is(
    article.catalog-row span.catalog-firmness,
    article.catalog-row span.catalog-construction,
    table.dir-table span.soon,
    table.clinical-table span.cmp-src-meta,
    div.toc-box div.toc-group-title,
    div.toc-header-text span.toc-scroll-pct,
    div.hero-trust-row span.hero-trust-item,
    section.catalog-tool div.results-head span,
    aside.deep-toc span.deep-tone,
    section.deep-briefing div.deep-briefing-lead p,
    div.consensus-score span,
    div.deep-table-wrap table.deep-table thead th,
    figure.policy-visual-timeline li span strong,
    table.m-compare-table th:is(.col-model-a, .col-model-b)
  ) { font-size: 12px !important; }
  html body main :where(
    [style*="font-size:0.5"], [style*="font-size:0.6"],
    [style*="font-size:0.7rem"], [style*="font-size:0.70"], [style*="font-size:0.71"],
    [style*="font-size:0.72"], [style*="font-size:0.73"], [style*="font-size:0.74"],
    [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"], [style*="font-size: 10px"],
    [style*="font-size:10.5px"], [style*="font-size: 10.5px"], [style*="font-size:11px"], [style*="font-size: 11px"],
    [style*="font-size:11.5px"], [style*="font-size: 11.5px"]
  ):not(svg, svg *) { font-size: 12px !important; }
  html body main p:is(
    [style*="font-size:0.5"], [style*="font-size:0.6"], [style*="font-size:0.7"],
    [style*="font-size:0.8"], [style*="font-size:0.9"],
    [class~="text-[10px]"], [class~="text-[11px]"], [class~="text-[12px]"], [class~="text-[13px]"]
  ):not(#np-floor),
  html body main section.section-wrap p.table-note:not(#np-floor) { font-size: 16px !important; line-height: 1.6 !important; }
  /* Form fields at 16px so phones do not zoom in when a reader taps them. */
  html body :is(input:not([type=checkbox], [type=radio], [type=range], [type=submit], [type=button], [type=hidden]), select, textarea) {
    font-size: 16px !important;
  }
  /* At 16px an input's default width grows; inputs in inline flex rows may shrink instead. */
  html body main [style*="display:flex"] > input { min-width: 0 !important; }
  /* Main buttons 44px tall; small icon buttons get a 44px square target. */
  html body :is(button.m-quick-pair-btn, button.m-swap-btn, button.faq-accordion-toggle, button.filter-pill-btn,
    button.segmented-btn, button.btn-restart, button.m-view-btn) {
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  html body main section.forensic-law-label-card div[role=button] { min-height: 44px !important; box-sizing: border-box !important; }
  html body button.m-search-clear { min-width: 44px !important; min-height: 44px !important; }
  /* Review pages make breadcrumb links 44px tall blocks with the text at the top, so the
     links sat higher than the current page name; centering the text lines them up (#107). */
  html body .clean-breadcrumbs a { display: inline-flex !important; align-items: center !important; }
  html body div.guide-toc-footer a.guide-toc-top { display: inline-flex !important; align-items: center !important; min-height: 24px !important; }
  /* Long words in narrow compare cells wrap instead of spilling out. */
  html body table.clinical-table :is(th, td),
  html body table.clinical-table :is(th, td) * { overflow-wrap: anywhere !important; white-space: normal !important; }
  /* Tables that scroll sideways never need to split a word (Purple and Leesa 2026-10-14: "Limi ts appl y" pills, and
     the 7-column layers table broke model names one letter per line at 390px). The layers table gets a floor so it
     scrolls instead of squeezing; desktop widths keep the page's own fit-the-card rule. */
  html body .table-scroll-wrap > table.clinical-table :is(th, td),
  html body .table-scroll-wrap > table.clinical-table :is(th, td) * { overflow-wrap: normal !important; }
  html body .table-scroll-wrap > table.clinical-table .status-pill { white-space: nowrap !important; }
  html body .table-scroll-wrap > table.construction-lines { min-width: 760px; }
  html body div.table-shell {
    padding-inline-end: 32px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  /* Layer diagrams: their labels reach 12px only near full width, so on phones the review
     table keeps the diagram at 252px and the compare figure scrolls inside its own box. */
  html body td.spec-art-cell { width: 252px !important; min-width: 252px !important; }
  html body td.spec-art-cell svg.spec-art { width: 252px !important; }
  @media (max-width: 383px) {
    html body figure.cmp-layers-fig {
      overflow-x: auto;
      padding-inline: 8px 24px !important;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }
    html body figure.cmp-layers-fig svg.cmp-layers { min-width: 284px; }
  }
  /* Research briefing labels: the page's own module rules weigh four classes, so these
     carry the same boost as the paragraph rules. */
  html body section.deep-briefing :is(div.deep-briefing-lead > div:first-child > p, div.consensus-score span):not(#np-floor) {
    font-size: 12px !important;
  }
  /* Posture and sag diagrams in review and compare articles (560 units wide): label sizes step with the
     phone width so they render at 12px or more; the spine legend moves left so it stays
     inside the drawing. */
  @media (max-width: 480px) { html body :is(#h2-03, #h2-11, main) .article-media-figure svg[viewBox^="0 0 560"] text { font-size: 19.8px !important; } }
  @media (max-width: 413px) {
    html body :is(#h2-03, #h2-11, main) .article-media-figure svg[viewBox^="0 0 560"] text { font-size: 21.3px !important; }
    html body #h2-03 .article-media-figure svg[viewBox="0 0 560 344"] :is(text[x="394"], path[d="M340 312H382"]) { transform: translateX(-60px); }
  }
  @media (max-width: 389px) { html body :is(#h2-03, #h2-11, main) .article-media-figure svg[viewBox^="0 0 560"] text { font-size: 22.4px !important; } }
  @media (max-width: 374px) { html body :is(#h2-03, #h2-11, main) .article-media-figure svg[viewBox^="0 0 560"] text { font-size: 23.5px !important; } }
  @media (max-width: 359px) { html body :is(#h2-03, #h2-11, main) .article-media-figure svg[viewBox^="0 0 560"] text { font-size: 26.9px !important; } }
  /* Chart drawings whose numbers also sit in readable HTML beside them (pressure heatmap and
     its sensor table, coil deflection and its caption, exploded cutaway and its layer list).
     Their in-drawing labels would render at 3-9px here, so the drawing shows without them. */
  html body :is(div.reserved-container-16-10, div[class~="aspect-[16/9]"].select-none) svg[role=img] text {
    display: none !important;
  }
}

/* Author box link below every post (#182). */
.author-box-name a { color: inherit; }
.author-box-link { display: inline-block; margin-top: 8px; padding: 4px 0; font-size: 14px; font-weight: 600; color: #245c4f; text-decoration: underline; }