/* Shared site chrome, linked once from BaseLayout.
 *
 * These rules previously sat inline in every page -- up to 146 copies each --
 * and had drifted into two lineages. index.html and the 19 product pages
 * carried a newer, more complete version; the other 126 pages an older one.
 *
 * Standardised on the newer lineage, which fixes a live bug: the CTA hover
 * shimmer (.wa-cta::after, an expanding circle) needs position:relative,
 * overflow:hidden and isolation:isolate on the button to work. Only the 20
 * newer pages had them, so on 126 pages the shimmer CSS shipped but could
 * never render.
 *
 * Left inline on purpose:
 *   details[open] > summary > .faq-q   present on 127 pages but NOT faq.html,
 *   which uses its own .faqlib FAQ implementation with .faq-q on 90 elements.
 *   Hoisting it would give that page red open-question text it never had.
 *
 * ORDER: after header.css, before the page CSS and Tailwind, matching where
 * these rules sat when inline. Stylesheet order here is load-bearing.
 */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Inter Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #ffffff;
  color: #111b21;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
}

h1, h2, h3 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

.container-site {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.font-serif {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-optical-sizing: auto;
}

.italic-serif {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: -0.15em;
  /* Enforce minimum 20px */
    font-size: max(1em, 20px);
  /* CLS lock: reserve a 1em-square inline box so fallback text
       ("bolt", "home") and the icon glyph occupy identical width. */
    width: 1em;
  height: 1em;
  flex-shrink: 0;
  overflow: hidden;
  /* Ligature + rendering essentials */
    letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  /* Crisp rendering fixes (no jagged edges) */
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  /* Default Material Symbols axes */
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 40;
}

.material-symbols-rounded.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ad2b11;
  background: rgba(235,77,29,0.08);
  border: 1px solid rgba(235,77,29,0.20);
  border-radius: 999px;
}

.nav-btn {
  position: relative;
  height: 72px;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #54656f;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0;
}

.nav-btn:hover {
  color: #111b21;
}

.nav-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 0;
  height: 2px;
  background: #ad2b11;
  transition: width .45s ease;
}

.nav-btn:hover::after {
  width: 100%;
}

.mobile-bar {
  box-shadow: 0 -8px 24px -8px rgba(0,0,0,.1);
}

.dark-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #ad2b11;
  color: #ffffff;
  border: 1px solid #ad2b11;
  border-radius: 50px;
  padding: 12px 28px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 500;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: color .7s ease, border-color .7s ease;
  text-decoration: none;
  cursor: pointer;
}

.ghost-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50px;
  padding: 12px 28px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 500;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: color .7s ease, border-color .7s ease;
  text-decoration: none;
  cursor: pointer;
}

.mobile-bar .wa-cta > span, .mobile-bar .dark-cta > span {
  white-space: nowrap;
}

.mobile-bar .wa-cta, .mobile-bar .dark-cta {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.wa-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #ffffff;
  color: #111b21;
  border: 1px solid #111b21;
  border-radius: 50px;
  padding: 12px 28px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 500;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: color .7s ease, border-color .7s ease;
  text-decoration: none;
  cursor: pointer;
}

.wa-cta > *, .wa-cta > svg, .dark-cta > *, .dark-cta > svg, .ghost-cta > *, .ghost-cta > svg {
  position: relative;
  z-index: 2;
}

.wa-cta, .dark-cta, .ghost-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50px;
  padding: 12px 28px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 500;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: color .7s ease, border-color .7s ease;
  text-decoration: none;
  cursor: pointer;
}

.wa-cta::after, .dark-cta::after, .ghost-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  background: #111b21;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  transition: width .9s ease, height .9s ease;
  z-index: -1;
}

.wa-cta:hover, .dark-cta:hover, .ghost-cta:hover {
  color: #fff;
  border-color: #111b21;
}

.wa-cta:hover::after, .dark-cta:hover::after, .ghost-cta:hover::after {
  width: 250%;
  height: 600%;
}