/* ============================================================
   Jupiter UV — single-page brand site
   Brand colors: navy #1B2A57 · mint #6EE7B7 · white #FFF
   ============================================================ */

:root {
  --navy: #1B2A57;
  --navy-soft: #26396F;
  --mint: #6EE7B7;
  --mint-soft: #a3f3d1;
  --white: #FFFFFF;
  --black: #000000;
  --text: #000000;
  --text-soft: #444444;
  --text-fine: #666666;
  --bg-alt: #F4F7FA;
  --bg-soft: #FAFBFD;
  --border: #CCCCCC;
  --hairline: #CCCCCC;
  /* Admonition palette — amber for "Note:" callouts (service /
     maintenance reminders, non-safety advisories). Red/orange
     reserved for warnings we haven't needed yet. */
  --amber-text: #92400E;
  --amber-rule: #F59E0B;
  --amber-bg:   #FFF7E6;
  --shadow-sm: 0 2px 8px rgba(27, 42, 87, 0.06);
  --shadow-md: 0 8px 30px rgba(27, 42, 87, 0.10);
  --shadow-lg: 0 20px 60px rgba(27, 42, 87, 0.18);
  --shadow-mint: 0 20px 70px rgba(110, 231, 183, 0.30);
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;  /* brand standard: Arial */
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky-footer flex column: body stacks nav + main + footer vertically,
     fills at least the viewport height, and <main class="site-main">
     flex-grows to push the footer to the bottom on short pages (/s/
     lookup, /warranty, error pages). Without this the footer floats in
     the middle of a window taller than the page content. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1 0 auto; }
.footer    { flex-shrink: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
button { font-family: inherit; cursor: pointer; }

/* ===== layout ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ===== nav (navy bar) ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(110, 231, 183, 0.12);
  transition: all 0.3s var(--ease);
}
.nav.scrolled {
  background: #10183A;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.logo-mark {
  /* Brand: wordmark font-size = 40% of nav bar height (72px desktop / 60px mobile).
     Below ~30% it reads as a label; above ~50% it crowds the nav links. */
  font-weight: 700;              /* Arial Bold per brand standard */
  letter-spacing: 1.5px;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
}
.logo-mint { color: var(--mint); }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav-links a,
.nav-links a:visited {
  /* `:visited` paired to prevent the UA-default purple from winning
     against our explicit color (same class of bug as nav-dropdown-menu). */
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  font-size: 15px;
}
.nav-links a:hover,
.nav-links a:visited:hover { color: var(--mint); }
.nav-cta {
  background: var(--mint);
  color: var(--navy) !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: all 0.2s var(--ease);
}
.nav-cta:hover {
  background: var(--mint-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(110, 231, 183, 0.4);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}

/* ===== nav dropdowns (desktop + mobile) =====
   Click-driven dropdowns under top-level nav items (Products ▾, Lamps ▾).
   JS in /js/main.js toggles .is-open on <li.nav-dropdown> and flips
   aria-expanded on the <button>. Click outside / Escape / another
   dropdown opening closes any open one. On mobile the dropdowns live
   inside the slide-in hamburger menu and act as accordions — one line
   of CSS below (@media :root nav-dropdown-menu display) handles both
   display modes from the same markup. */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s var(--ease);
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible { color: var(--mint); outline: none; }
.nav-caret {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.2s var(--ease);
  transform: translateY(1px);
}
.nav-dropdown.is-open .nav-caret { transform: rotate(180deg) translateY(-1px); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  list-style: none;
  margin: 0;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease),
              transform 0.15s var(--ease),
              visibility 0.15s;
  z-index: 100;
}
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a,
.nav-dropdown-menu a:visited {
  /* `:visited` kept paired with the unvisited rule so browsers don't
     fall back to the UA default purple on a dark/light dropdown
     background — the site CSS has no other :visited overrides, so
     without this a once-clicked dropdown link renders in the default
     visited color (near-invisible on some surfaces). Reported 2026-10-29. */
  display: block;
  padding: 9px 18px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible,
.nav-dropdown-menu a:visited:hover,
.nav-dropdown-menu a:visited:focus-visible {
  background: var(--surface-alt, #f4f6f8);
  color: var(--navy);
  outline: none;
}
/* Series name — small navy label above its indented variant list. */
.nav-dropdown-subhead {
  padding: 10px 18px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}
.nav-dropdown-subhead + li a { padding-left: 30px; }

/* ===== hero (white, multi-slide) ===== */
.hero {
  position: relative;
  background: var(--white);
  color: var(--text);
  min-height: 92vh;
  overflow: hidden;
  padding-top: 68px; /* tight clearance under fixed nav */
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(110, 231, 183, 0.08), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(27, 42, 87, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero-slides {
  position: relative;
  width: 100%;
  min-height: calc(92vh - 68px);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
  display: flex;
  align-items: center;
  padding: 0 0 60px;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(27, 42, 87, 0.06);
  border: 1px solid rgba(27, 42, 87, 0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 28px;
  letter-spacing: 0.3px;
}
.eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(110, 231, 183, 0.7);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 24px;
  letter-spacing: -1.5px;
  color: var(--navy);
}
.accent-underline {
  color: var(--navy);
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  background-image: linear-gradient(120deg, var(--mint) 0%, var(--mint) 100%);
  background-repeat: no-repeat;
  background-size: 100% 12px;
  background-position: 0 96%;
  padding: 0 4px 0 0;
}
.hero-sub {
  font-size: 18px;
  color: var(--text-soft);
  margin: 0 0 36px;
  max-width: 540px;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-image {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image img {
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(27, 42, 87, 0.18));
  /* push image right so shadow bleeds off the page edge */
  transform: translateX(80px);
}

/* Mirrored hero slide — image left, text right (for slides where the shadow
   should fall naturally into the page, not off the right edge) */
.hero-slide.mirror .hero-inner {
  grid-template-columns: 1.7fr 1fr;
}
.hero-slide.mirror .hero-image { order: 1; }
.hero-slide.mirror .hero-text { order: 2; }
.hero-slide.mirror .hero-image img {
  transform: translateX(-80px);
}

/* on mobile, no horizontal shift (would clip content too aggressively) */
@media (max-width: 980px) {
  .hero-image img,
  .hero-slide.mirror .hero-image img { transform: none; }
  .hero-slide.mirror .hero-image { order: 0; }
  .hero-slide.mirror .hero-text { order: 0; }
}

/* hero CTA ghost-on-white variant */
.btn-ghost-dark {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(27, 42, 87, 0.25);
}
.btn-ghost-dark:hover {
  background: rgba(27, 42, 87, 0.05);
  border-color: var(--navy);
}

/* hero primary stays mint */
.hero .btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(27, 42, 87, 0.20);
}
.hero .btn-primary:hover {
  background: var(--navy-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(27, 42, 87, 0.28);
}

/* dots — repositioned for white hero */
.carousel-dots {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.carousel-dot {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(27, 42, 87, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.carousel-dot.active {
  background: var(--navy);
  width: 56px;
}
.carousel-dot:hover { background: rgba(27, 42, 87, 0.45); }

/* scroll indicator for white background */
.hero-scroll-indicator {
  border-color: rgba(27, 42, 87, 0.25);
}
.hero-scroll-indicator span { background: var(--navy); }
.hero-image-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.20), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 40px;
  border: 2px solid rgba(110, 231, 183, 0.4);
  border-radius: 999px;
}
.hero-scroll-indicator span {
  display: block;
  width: 4px;
  height: 8px;
  background: var(--mint);
  border-radius: 2px;
  margin: 8px auto 0;
  animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ===== buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.25s var(--ease);
  border: 0;
}
.btn-primary {
  background: var(--mint);
  color: var(--navy);
  box-shadow: 0 10px 24px rgba(110, 231, 183, 0.35);
}
.btn-primary:hover {
  background: var(--mint-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(110, 231, 183, 0.45);
}
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-block { width: 100%; padding: 16px 28px; }
.btn-inline { margin-top: 12px; }
.section-alt .btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(27, 42, 87, 0.25);
}
.section-alt .btn-primary:hover {
  background: var(--navy-soft);
  box-shadow: 0 14px 32px rgba(27, 42, 87, 0.35);
}
.section .btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(27, 42, 87, 0.20);
}
.section .btn-primary:hover {
  background: var(--navy-soft);
}

/* ===== sections ===== */
.section { padding: 110px 0; background: var(--white); }
.section-alt { background: var(--bg-alt); }
.section-dark {
  background: linear-gradient(180deg, var(--navy) 0%, #15224A 100%);
  color: var(--white);
}
.section-dark .section-sub.light { color: rgba(255, 255, 255, 0.75); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--navy);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mint);
  margin-bottom: 20px;
}
.section-eyebrow.mint { color: var(--mint); }
.section h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 20px;
  letter-spacing: -0.8px;
}
.section-sub {
  font-size: 18px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.65;
}

/* ===== the lamps section ===== */
.lamp-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 20px;
}
.lamp-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 280px;
}
.lamp-image::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, rgba(110, 231, 183, 0.18), transparent 65%);
  pointer-events: none;
}
.lamp-image img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(110, 231, 183, 0.2));
}
.lamp-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lamp-spec {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(110, 231, 183, 0.18);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
  transition: all 0.3s var(--ease);
}
.lamp-spec:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--mint);
  transform: translateY(-2px);
}
.lamp-spec-num {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--mint);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}
.lamp-spec-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--mint-soft);
  margin-left: 2px;
}
.lamp-spec-label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.3px;
}

/* ===== premium details grid ===== */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.detail-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.detail-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.detail-card:hover {
  transform: translateY(-4px);
  border-color: var(--mint);
  box-shadow: var(--shadow-md);
}
.detail-card:hover::after {
  transform: scaleX(1);
}
.detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--mint);
  border-radius: 14px;
  font-size: 26px;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(27, 42, 87, 0.18);
}
.detail-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--navy);
  letter-spacing: -0.3px;
}
.detail-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.detail-card strong { color: var(--navy); }

/* ===== feature grid ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.feature {
  padding: 36px 28px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: var(--mint);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--navy);
  color: var(--mint);
  border-radius: 12px;
  font-size: 22px;
  margin-bottom: 20px;
}
.feature h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--navy); }
.feature p { margin: 0; color: var(--text-soft); font-size: 15px; }

/* dark-variant feature cards (when .feature is inside .section-dark) */
.section-dark .feature {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(110, 231, 183, 0.18);
}
.section-dark .feature:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--mint);
}
.section-dark .feature h3 { color: var(--mint); }
.section-dark .feature p { color: rgba(255, 255, 255, 0.78); }
.section-dark .feature-icon {
  background: var(--mint);
  color: var(--navy);
}

/* ===== two-col (for contractors) ===== */
.two-col {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.two-col.reversed {
  grid-template-columns: 1fr 1.1fr;
}
.two-col.reversed .two-col-image { order: 0; }
.two-col.reversed .two-col-text { order: 1; }
.two-col-text h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.two-col .lead { font-size: 18px; color: var(--text-soft); margin: 0 0 28px; }
.check-list { list-style: none; padding: 0; margin: 0 0 24px; }
.check-list li {
  position: relative;
  padding: 14px 0 14px 36px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  line-height: 1.55;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 22px;
  width: 18px; height: 18px;
  background: var(--mint);
  border-radius: 50%;
}
.check-list li::after {
  content: '✓';
  position: absolute;
  left: 4px; top: 18px;
  color: var(--navy);
  font-weight: 800;
  font-size: 13px;
}
.check-list strong { color: var(--navy); }
.two-col-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  background: var(--white);
}
.two-col-image img.line-art {
  background: var(--white);
  box-shadow: none;
  border: 1px solid var(--border);
  padding: 32px;
}

/* ===== kit grid ===== */
.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.kit-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.25s var(--ease);
}
.kit-item:hover {
  background: var(--white);
  border-color: var(--navy);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}
.kit-num {
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: var(--navy);
  color: var(--mint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}
.kit-item strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.kit-item span { display: block; color: var(--text-soft); font-size: 13.5px; }

/* ===== trust grid ===== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.trust-card {
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(110, 231, 183, 0.2);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
}
.trust-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--mint);
  transform: translateY(-4px);
}
.trust-card h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--mint);
  font-weight: 700;
}
.trust-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.6;
}

/* ===== contact ===== */
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.contact-text h2 { margin: 0 0 16px; }
.contact-text p { font-size: 17px; color: var(--text-soft); margin: 0 0 32px; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.contact-list strong {
  display: inline-block;
  width: 90px;
  color: var(--navy);
  font-weight: 600;
}
.contact-list a,
.contact-list a:visited { color: inherit; }
.contact-list a:hover,
.contact-list a:visited:hover { color: var(--navy); }

.contact-form {
  background: var(--white);
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row-full { grid-column: 1 / -1; }
.form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.3px;
}
.form-row input,
.form-row textarea,
.form-row select {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  transition: all 0.2s var(--ease);
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.18);
}
.contact-form .btn-block { grid-column: 1 / -1; }

/* Helper line under a form field — muted, slightly indented, used to
   explain context or route the user elsewhere. Currently under the
   "What's this about?" dropdown to point product-specific inquiries at
   the per-product contact forms. */
.form-helper {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Post-Redirect-Get success panels for the contact form (homepage) and
   the per-product sales_cta forms. Share one visual treatment so the
   acknowledgment reads consistently site-wide; placed in the same slot
   the form occupied so the user's eye doesn't have to re-navigate. */
.contact-success,
.sales-cta-success {
  background: var(--white);
  border: 1px solid var(--mint);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.sales-cta-success {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.contact-success h3,
.sales-cta-success h3 {
  margin: 0 0 12px;
  color: var(--navy);
}
.contact-success p,
.sales-cta-success p { margin: 0 0 10px; }
.contact-success p:last-child,
.sales-cta-success p:last-child { margin-bottom: 0; }

/* ===== footer ===== */
/* Darker ground + mint keyline on top so the eye registers a hard
   stop between the sales CTA section and the footer; without this
   separator the CTA (which is also dark) flowed straight into the
   footer and the two read as one block. */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.8);
  padding: 48px 0 28px;
  border-top: 3px solid var(--mint);
}
/* Three-column grid: brand (identity), nav (wayfinding), contact (action).
   Columns align on their own vertical axes rather than fighting for one
   shared baseline, so the brand feels anchored, nav sits visually
   centered, and the mailto button-link reads as the terminal action. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 32px;
  align-items: center;
}
.footer-brand .logo-mark { font-size: 24px; color: var(--white); }
.footer-tagline {
  margin: 6px 0 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
}
.footer-address {
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* Horizontal nav row with dot separators. The <span> dots are purely
   visual (aria-hidden on the markup side) so screen readers hear just
   the four link labels, one after the other. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.footer-nav a,
.footer-nav a:visited {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  padding: 2px 0;
}
.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-nav a:visited:hover,
.footer-nav a:visited:focus-visible {
  color: var(--white);
  border-bottom-color: var(--mint);
}
.footer-sep { color: rgba(255, 255, 255, 0.35); font-size: 14px; }

/* Right column: the email is the primary call-to-action in the footer,
   styled as a semi-prominent link (slightly larger, mint underline)
   rather than a button so it still reads as text/trust. */
.footer-contact {
  text-align: right;
  font-size: 14px;
}
.footer-email {
  display: inline-block;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--mint);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease);
}
.footer-email:hover { color: var(--mint); }
.footer-prompt {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* Hairline divider + copyright strip. The strip is deliberately quiet —
   small, muted, two short lines flanking opposite edges — so it reads
   as attribution, not navigation. */
.footer-strip {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-strip p { margin: 0; }

@media (max-width: 820px) {
  /* Stack to a single column: brand → nav → contact. Center-align
     for a tidy phone footer. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .footer-contact { text-align: center; }
  .footer-strip { justify-content: center; text-align: center; }
}

/* ===== reveal-on-scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== responsive ===== */
@media (max-width: 980px) {
  .hero { padding: 120px 0 80px; }
  .hero-inner { grid-template-columns: 1fr; gap: 50px; text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .two-col { grid-template-columns: 1fr; gap: 50px; }
  .contact-inner { grid-template-columns: 1fr; gap: 50px; }
  .contact-form { padding: 32px 28px; }
}

@media (max-width: 720px) {
  .nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    flex-direction: column;
    background: var(--white);
    padding: 28px;
    width: 80%;
    max-width: 320px;
    height: calc(100vh - 70px);
    box-shadow: var(--shadow-lg);
    transition: right 0.3s var(--ease);
    align-items: flex-start;
    gap: 20px;
  }
  .nav-links.open { right: 0; }
  /* Panel background is white here, so links must be navy — they were
     inheriting the desktop rgba(255,255,255,.82) and rendering invisible. */
  .nav-links a { color: var(--navy); }
  .nav-links a:hover { color: var(--navy); }
  .nav-links .logo-mark { font-size: 24px; }

  /* Mobile dropdown: inside the slide-in panel the dropdown becomes
     an accordion. Toggle still works (JS flips .is-open), but the
     menu renders inline instead of as a positioned popover so it
     doesn't float over the panel edge. */
  .nav-dropdown { position: static; display: block; width: 100%; }
  .nav-dropdown-toggle { color: var(--navy); font-size: 15px; width: 100%;
                         justify-content: space-between; }
  .nav-dropdown-toggle:hover,
  .nav-dropdown-toggle:focus-visible { color: var(--navy); }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 4px 0 0;
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s var(--ease);
  }
  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 400px;
    transform: none;
  }
  .nav-dropdown-menu a,
  .nav-dropdown-menu a:visited {
    color: var(--navy);
    padding: 8px 0 8px 16px;
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible,
  .nav-dropdown-menu a:visited:hover,
  .nav-dropdown-menu a:visited:focus-visible { background: transparent; color: var(--navy); }
  .nav-dropdown-subhead { padding: 8px 0 2px; }
  .nav-dropdown-subhead + li a { padding-left: 28px; }
  .nav-toggle { display: flex; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .section { padding: 80px 0; }
  .section-head { margin-bottom: 48px; }
  .contact-form { grid-template-columns: 1fr; padding: 28px 22px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-meta { text-align: center; }
  .footer-links { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 18px; }
}

/* Slide 2 centroid alignment — measured, not eyeballed.
   hero-product.png  centroid: 49.5% x / 51.6% y  (effectively centered)
   hero-cutaway.png  centroid: 40.7% x / 63.1% y  (8.8% left, 11.5% low)
   The cutaway subject floats in transparent padding, so it sits off-centre
   in its own frame. Nudging it brings the two slides' visual mass onto the
   same point and removes the jump during the carousel transition. */
.hero-slide:nth-of-type(2) .hero-image img {
  transform: translate(8.8%, -6%);
}
@media (max-width: 720px) {
  .hero-slide:nth-of-type(2) .hero-image img { transform: translate(8.8%, 0); }
}

/* Anchor targets were landing behind the 72px fixed nav. */
section[id], article[id] { scroll-margin-top: 88px; }

/* ---------- unit serial pages (/s/<serial>) ---------- */
/* "We found your unit!" -- the installer is at an air handler with a phone,
   so the confirmation reads as good news and the facts sit above the fold. */
.unit-found{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
            padding:8px 18px 8px 10px;border-radius:999px;background:#EAF9F2;
            border:1px solid var(--mint);font-size:15px;font-weight:700;color:var(--navy)}
.unit-found-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
                  background:var(--mint);color:var(--navy);font-size:14px;font-weight:700;
                  display:flex;align-items:center;justify-content:center}

/* The product name is the largest thing on the page -- it is what the
   installer matches against the box. The serial is the lookup key, so it
   sits under the name rather than leading. */
.unit-product{font-size:58px;line-height:1.02;color:var(--navy);margin:0;letter-spacing:-1px}
.unit-modelline{font-family:monospace;font-size:17px;color:var(--text-soft);margin:10px 0 0}
.unit-serial{font-family:monospace;font-size:26px;color:var(--navy);letter-spacing:1px;
             margin:20px 0 0;font-weight:700}
.unit-seriallabel{font-size:12px;letter-spacing:.8px;text-transform:uppercase;
                  color:var(--text-fine);margin:2px 0 0}
.unit-model{color:var(--text-soft,#444);font-size:16px}
/* Product-page card: QR scan → one tap to the consumer-facing product
   page. Thumbnail + big labeled CTA. Whole card is one <a>, so the
   entire tile is tappable — thumb-friendly on phones. */
.unit-product-card{display:flex;align-items:center;gap:16px;
                   margin:22px 0 28px;max-width:520px;padding:14px 18px;
                   background:#fff;border:1px solid var(--border,#e5e7eb);
                   border-radius:14px;box-shadow:0 2px 6px rgba(10,30,60,.06);
                   text-decoration:none;color:inherit;transition:box-shadow .15s,
                   transform .15s,border-color .15s}
.unit-product-card:hover,.unit-product-card:focus{box-shadow:0 6px 18px rgba(10,30,60,.14);
                                                  border-color:var(--mint);
                                                  transform:translateY(-1px)}
.unit-product-card:visited{color:inherit}
.unit-product-card-thumb{flex:0 0 80px;width:80px;height:80px;object-fit:contain;
                         border-radius:10px;background:#f6f8fb}
.unit-product-card-body{flex:1 1 auto;display:flex;flex-direction:column;gap:4px}
.unit-product-card-label{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
                         color:var(--mint);font-weight:700}
.unit-product-card-title{font-size:17px;font-weight:700;color:var(--navy);
                         line-height:1.25}
.unit-product-card-cta{display:inline-block;margin-top:4px;font-size:14px;
                       font-weight:600;color:var(--navy);
                       text-decoration:underline;text-decoration-color:var(--mint);
                       text-underline-offset:3px}

/* Unregistered prompt. Orange, not mint — catches the eye more than
   the usual on-brand mint, which previously blended in with "we found
   your unit" confirmation box. Still a call-to-action, not an error. */
.unit-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
             max-width:620px;margin:26px 0 30px;padding:18px 20px;
             background:#FFF3E0;border:1px solid #F57C00;border-left:4px solid #F57C00;
             border-radius:var(--radius-sm);text-decoration:none;color:inherit;
             transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.unit-banner:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.unit-banner-icon{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
                  background:#F57C00;color:#FFF;font-weight:700;font-size:16px;
                  display:flex;align-items:center;justify-content:center}
.unit-banner-text{flex:1 1 280px;font-size:15px;line-height:1.5;color:var(--text-soft)}
.unit-banner-text strong{display:block;color:var(--navy);font-size:16px;margin-bottom:3px}
.unit-banner-go{flex:0 0 auto;font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap}

/* The at-a-glance card. Everything needed to confirm the unit is correct. */
.unit-card{max-width:620px;border:1px solid var(--hairline);border-radius:var(--radius-sm);
           background:var(--white);box-shadow:var(--shadow-sm);overflow:hidden}
.unit-card-head{background:var(--navy);color:var(--white);font-size:13px;font-weight:700;
                letter-spacing:.6px;text-transform:uppercase;padding:12px 20px}
.unit-card .unit-rows{max-width:none;padding:4px 20px}

.unit-wrong{font-size:14px;color:var(--text-fine);margin-top:16px;max-width:620px}
.unit-tagline{font-size:19px;color:var(--text-soft);margin:8px 0 0;font-weight:400}

/* Specifications -- two columns on a desktop, stacked on the phone the
   installer is actually holding. */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
           gap:14px 40px;max-width:900px}
.spec-block h3{font-size:13px;letter-spacing:.8px;text-transform:uppercase;
               color:var(--navy);margin:0 0 4px;padding-bottom:8px;
               border-bottom:2px solid var(--mint)}
.spec-block .unit-rows{max-width:none}
.spec-note{font-size:13px;color:var(--text-fine);margin:8px 0 0}
.spec-source{font-size:13px;color:var(--text-fine);margin-top:22px;font-style:italic}
.unit-mono{font-family:monospace}

.unit-lamp{border-left:4px solid var(--mint);padding:4px 0 4px 20px;margin-bottom:22px}
.unit-lamp-pn{font-family:monospace;font-size:32px;font-weight:700;color:var(--navy);line-height:1.1}
.unit-lamp-qty{font-size:16px;color:#444;margin-top:6px}

.unit-rows{max-width:520px}
.unit-row{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
          border-bottom:1px solid var(--hairline,#CCCCCC);font-size:16px}
.unit-row:last-child{border-bottom:0}
.unit-row span:first-child{color:#666}
.unit-row span:last-child{font-weight:700;text-align:right}
.unit-row.is-done span:last-child{color:var(--navy)}
.unit-row.is-pending span:last-child{color:var(--text-fine);font-weight:400}
.unit-row.is-pending a{color:var(--navy);font-weight:700}

.unit-ok{background:#EAF9F2;border-left:4px solid var(--mint);padding:14px 18px;
         font-size:16px;margin-bottom:20px;max-width:620px}
.unit-ok-big{font-size:17px;padding:18px 22px;margin-bottom:28px}
.unit-ok-big strong{color:var(--navy)}

.unit-form{max-width:460px;margin-top:8px}
.unit-form label{display:block;font-size:13px;color:#666;margin:14px 0 5px}
.unit-form input{width:100%;padding:12px;border:1px solid var(--hairline,#CCCCCC);
                 font-size:16px;font-family:inherit;background:#fff;
                 transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.unit-form input:focus{outline:2px solid var(--mint);outline-offset:-2px}
/* Live inline validation — red border + light-pink fill once the user
   has typed something that doesn't match the field's constraints
   (type=email, required, pattern, etc). `:not(:placeholder-shown)`
   keeps the field quiet until the user starts typing — don't shout
   "invalid!" on a form that just loaded. */
.unit-form input:invalid:not(:placeholder-shown){
    border-color:#D32F2F;background-color:#FFF5F5}
.unit-form input:valid:not(:placeholder-shown){border-color:#2E7D32}
.unit-form .btn{margin-top:18px;border:0;cursor:pointer}

/* 2026-10-29 registration form rebuild — new reg-form macro
   (components/registration_form.html). Inherits the field look from
   .unit-form; adds the "contractors only" notice banner, the
   zip-places display block, and the city radio-button cluster. */
.reg-form-wrap{max-width:480px;margin-top:8px}
.reg-form-notice{display:inline-block;background:#F0F7FF;color:var(--navy);
                 border:1px solid #D5E6F7;border-radius:999px;
                 padding:6px 14px;font-size:13px;font-weight:600;
                 margin-bottom:18px}
.reg-form-why{font-size:14px;color:var(--text-soft,#444);line-height:1.5;
              margin:0 0 20px;max-width:460px}
.reg-form-why strong{color:var(--navy)}
.reg-form{max-width:460px}
.reg-form label{display:block;font-size:13px;color:#666;margin:14px 0 5px}
.reg-form input{width:100%;padding:12px;border:1px solid var(--hairline,#CCCCCC);
                font-size:16px;font-family:inherit;background:#fff;
                transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.reg-form input:focus{outline:2px solid var(--mint);outline-offset:-2px}
.reg-form input:invalid:not(:placeholder-shown){
    border-color:#D32F2F;background-color:#FFF5F5}
.reg-form input:valid:not(:placeholder-shown){border-color:#2E7D32}
.reg-form .btn{margin-top:18px;border:0;cursor:pointer}
.reg-form-hint{display:block;font-size:12px;color:#777;margin:4px 0 0;
               line-height:1.4}
.reg-zip-places{margin:8px 0 0}
.reg-zip-single{color:var(--navy);font-weight:600;font-size:14px}
.reg-zip-multi{display:flex;flex-direction:column;gap:6px;
               padding:10px 12px;background:#F6F8FB;border-radius:8px;
               margin-top:6px}
.reg-zip-radio{display:flex;align-items:center;gap:8px;font-size:14px;
               color:var(--navy);cursor:pointer}
.reg-zip-radio input{width:auto;padding:0;margin:0}

@media (max-width:600px){
  .unit-product{font-size:40px;letter-spacing:-.5px}
  .unit-tagline{font-size:16px}
  .spec-grid{gap:4px 0}
  .unit-serial{font-size:22px}
  .unit-lamp-pn{font-size:26px}
  .unit-card .unit-rows{padding:4px 16px}
  .unit-row{font-size:15px;gap:14px}
  .unit-banner-go{flex-basis:100%}
}

/* First section on an interior page sits below the fixed nav. */
.section-top{padding-top:150px}
section[id]{scroll-margin-top:110px}
@media (max-width:720px){ .section-top{padding-top:120px} }


/* ============================================================
   Product pages (/<slug>) — one template, every product.
   Shared visual language with the WAHU homepage: same type scale,
   same mint accent, same navy anchor. The template fail-silents
   on missing fields, so pages with sparse content use fewer of
   these blocks and still look intentional.
   ============================================================ */

.product-hero {
  padding: 96px 0 56px;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--white) 100%);
}
.product-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
/* Single-column treatment when no hero image — text owns the width
   and the headline carries the page. */
.product-hero--text-only .product-hero-grid {
  grid-template-columns: minmax(0, 820px);
}
.product-hero--text-only .product-hero-copy h1 { font-size: 64px; }
.product-hero--text-only .product-tagline { font-size: 22px; max-width: 60ch; }

.product-hero-copy h1 {
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 14px 0 20px;
  color: var(--navy);
  text-wrap: balance;
  font-weight: 800;
}
.product-tagline {
  font-size: 20px;
  color: var(--text-soft);
  line-height: 1.45;
  max-width: 50ch;
  margin: 0 0 30px;
}
.product-features {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  max-width: 820px;
}
.product-hero--text-only .product-features { grid-template-columns: 1fr 1fr; }
.product-hero:not(.product-hero--text-only) .product-features { grid-template-columns: 1fr; }
.product-features li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.product-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 10px;
  border: 2px solid var(--mint);
  border-radius: 50%;
  background: transparent;
}
.product-hero-image img {
  width: 100%;
  /* No shadow + no border-radius — the hero image should sit on the
     page background like a product shot, not a card. If a specific
     product's photo has its own soft edge in the file, that reads
     better than a template-added shadow. */
}

/* Hero carousel — stacked slides (CSS grid, every slide in grid cell
   1/1), only .is-active at opacity 1. Container sizes to the tallest
   natural image; shorter images sit centered in the cell so the frame
   doesn't jump between slides. Dots sit below the frame as small
   mint-outlined circles; the active dot fills in. */
.product-hero-carousel { position: relative; }
.product-hero-slides {
  display: grid;
  position: relative;
}
.product-hero-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
  align-self: center;
  justify-self: center;
  width: 100%;
}
.product-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.product-hero-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.product-hero-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.product-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--mint);
  background: transparent;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.product-hero-dot:hover { transform: scale(1.15); }
.product-hero-dot.is-active { background: var(--mint); }
.product-hero-dot:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .product-hero-slide { transition: none; }
}

/* Consumables section — list of things customers re-buy over service
   life. Styled as a quiet list, not a product grid; the point is
   "here's what you'll re-buy", not "here are more products." The
   section's own padding/background live in the stripe block below. */
.consumable-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}
.consumable {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface, #fff);
  overflow: hidden;
}
/* Tile is the full card. When the consumable has a product_slug it is
   an <a> wrapping the whole card (click target is the whole tile); when
   it doesn't, it's a plain <div> with the same shape. */
.consumable-tile {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
  padding: 1em 1.25em;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.consumable-tile:hover,
.consumable-tile:focus-visible {
  background: var(--surface-hover, #fafafa);
}
/* Hero thumbnail — denormalized by publish_catalog.py from the referenced
   kit's first hero image. Fixed square frame so the card height is
   predictable regardless of source image aspect ratio; contain so a
   portrait or landscape hero isn't cropped awkwardly. */
.consumable-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--surface-alt, #f6f6f6);
  border-radius: var(--radius-sm);
}
.consumable-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4em;
}
.consumable-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 0.75em;
}
.consumable-title {
  font-size: 1.02em;
}
.consumable-juv {
  opacity: 0.65;
  font-weight: normal;
  margin-left: 0.4em;
}
.consumable-qty, .consumable-interval {
  color: var(--muted);
  font-size: 0.95em;
}
.consumable-link {
  margin-left: auto;
  font-weight: 600;
}
.consumable-note {
  margin: 0.5em 0 0;
  font-size: 0.9em;
}
@media (max-width: 520px) {
  .consumable-tile { flex-direction: column; }
  .consumable-thumb { width: 100%; height: 160px; }
}

/* Reusable "Note:" admonition — amber-hued box with an auto-prefixed
   "Note:" label, left rule, soft background. Wrap any note/advisory
   content in <div class="note-callout">…</div>; each inner <p> gets
   normal paragraph spacing, and the "Note:" label is prepended once
   via ::before so multi-paragraph notes still read as one block. */
.note-callout {
  background: var(--amber-bg);
  border-left: 3px solid var(--amber-rule);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 10px 0 0;
  color: var(--text);
  font-size: 0.95em;
}
.note-callout::before {
  content: "Note: ";
  font-weight: 700;
  color: var(--amber-text);
}
.note-callout > p {
  display: inline;  /* first <p> flows with the "Note:" prefix */
  margin: 0;
}
.note-callout > p + p {
  display: block;   /* subsequent paragraphs break onto their own */
  margin-top: 10px;
}

/* Public part number — shown directly under the h1 so contractors
   calling in to order see it immediately. Styled quiet so it reads
   as metadata, not a design element. */
.product-identifier {
  margin: 0.5em 0 1em;
  font-size: 0.95em;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.product-identifier-label {
  margin-right: 0.4em;
}
.product-identifier code {
  background: transparent;
  padding: 0;
  font-weight: 700;
  color: var(--text);
  font-size: 1em;
}

/* Section rhythm — alternating backgrounds beat hairline rules.
   The order on the page is: body (white) → specs (tinted) →
   warranty (white) → docs (tinted) → related (white).
   The tint is a cool pale blue-gray with just enough contrast
   against pure white to read as a distinct zone without feeling
   like a different page. --bg-soft (#FAFBFD) was almost
   imperceptible, so sections ran together. */
/* Alternating section backgrounds — white and soft blue-grey —
   create a datasheet rhythm so each section reads as a distinct
   block. Order follows the render order in product.html:
   body → headline-stats → specs → contractor-pitch → build-quality
   → built-on → kit → warranty → consumables → docs → related →
   sales-cta. If the render order changes, update the alternation
   here so the stripe pattern stays unbroken. */
.product-body             { padding: 44px 0; background: var(--white); }
.product-headline-stats   { padding: 40px 0; background: #E9EEF5; }
.product-specs            { padding: 44px 0; background: var(--white); }
.product-contractor-pitch { padding: 44px 0; background: #E9EEF5; }
.product-build-quality    { padding: 44px 0; background: var(--white); }
.product-built-on         { padding: 44px 0; background: #E9EEF5; }
.product-kit              { padding: 44px 0; background: var(--white); }
.product-warranty         { padding: 44px 0; background: #E9EEF5; }
.product-consumables      { padding: 44px 0; background: var(--white); }
.product-docs             { padding: 44px 0; background: #E9EEF5; }
.product-related          { padding: 44px 0; background: var(--white); }

/* Product-page section-heads override the homepage's centered marketing
   layout: left-aligned to sit flush with content, with tighter spacing
   under the title. Matches the Zone B contractor datasheet voice. */
.product-body .section-head,
.product-headline-stats .section-head,
.product-specs .section-head,
.product-contractor-pitch .section-head,
.product-build-quality .section-head,
.product-built-on .section-head,
.product-kit .section-head,
.product-warranty .section-head,
.product-consumables .section-head,
.product-docs .section-head,
.product-drawings .section-head,
.product-related .section-head {
  text-align: left;
  max-width: none;
  margin: 0 0 36px;
}

/* Headline stats — bold horizontal strip of 3-5 standout numbers,
   wraps to 2 rows at mobile. No icons; the content is the design.
   Tabular-nums keeps columns aligned when values are "15 in" style. */
.product-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  text-align: center;
}
.product-stat {
  padding: 8px 4px;
}
.product-stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.product-stat-label {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.product-stat-caption {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text-fine);
}

/* Contractor pitch — business-case zone. Headline (from section_head)
   over a reading-column prose, bullets in a 2-column feature grid
   under the prose, mint CTA button at the end. */
.product-contractor-pitch-body {
  max-width: 68ch;
  margin: 0;
}
.product-contractor-pitch-bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
  max-width: 820px;
}
.product-contractor-pitch-bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.5;
}
.product-contractor-pitch-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 10px;
  border: 2px solid var(--mint);
  border-radius: 50%;
  background: transparent;
}
.product-contractor-pitch-cta {
  margin-top: 28px;
}
.btn-mint {
  display: inline-block;
  padding: 12px 20px;
  background: var(--mint);
  color: var(--navy, #0b2545);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn-mint:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Built Solid — grid of 4-6 icon tiles. Auto-fit; 3 cols desktop,
   2 tablet, 1 mobile. Icons render mint; title is weighty; body is
   secondary. Deliberately NOT bordered — these are quiet notes of
   care, not product cards. */
.product-build-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 40px;
}
.product-build-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-build-tile-icon {
  width: 32px;
  height: 32px;
  color: var(--mint);
}
.product-build-tile-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.product-build-tile-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.product-build-tile-body {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Built On — 2-column: prose left, credential list right. Collapses
   to one column at mobile. Credentials use a <dl> for semantic
   label/value pairing; label hairline-ruled on top for visual tie
   to the spec table. */
.product-built-on-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .product-built-on-grid { grid-template-columns: 1fr; gap: 28px; }
}
.product-built-on-prose {
  max-width: 68ch;
}
.product-built-on-credentials {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 0;
}
.product-built-on-credentials dt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-fine);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-built-on-credentials dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.product-built-on-credentials dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 0.98rem;
}

/* Section-level headings — one rule for every major-section title
   on the product page. Driven by the `section_head` Jinja macro at
   `templates/public_preview/components/section_head.html`; adding a
   new section is a `{{ section_head("Title") }}` call — no CSS
   selector list to update. Left-aligned, 32 px, mint keyline above,
   to match the homepage's eyebrow + h2 rhythm.
   Text color reads from `--section-head-color`, defaulting to navy
   for light-ground sections. Dark-ground sections (sales-cta,
   footer) set their own value so the heading stays legible. */
.section-head h2 {
  position: relative;
  font-size: 32px;
  color: var(--section-head-color, var(--navy));
  margin: 0 0 32px;
  padding-top: 14px;
  text-align: left;
  letter-spacing: -0.01em;
}
.section-head h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--mint);
  border-radius: 2px;
  position: absolute;
  top: 0; left: 0;
}

.product-body-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 56px 72px;
}
.product-body-grid h2 {
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 14px;
  padding-top: 12px;
  position: relative;
  letter-spacing: -0.005em;
}
.product-body-grid h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--mint);
  border-radius: 2px;
  position: absolute;
  top: 0; left: 0;
}
.prose p { margin: 0 0 12px; color: var(--text-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose { white-space: pre-wrap; color: var(--text-soft); line-height: 1.55; }

.product-spec-table,
.product-warranty-table,
.product-kit-table {
  width: 100%;
  max-width: 820px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.product-spec-table th,
.product-warranty-table th,
.product-kit-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-fine);
  padding: 16px 20px 16px 0;
  width: 42%;
  vertical-align: top;
  border-bottom: 1px solid rgba(27, 42, 87, 0.1);
  font-size: 15px;
}
.product-spec-table td,
.product-warranty-table td,
.product-kit-table td {
  padding: 16px 0;
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1px solid rgba(27, 42, 87, 0.1);
  font-size: 16px;
}
.product-spec-table tr:last-child th,
.product-spec-table tr:last-child td,
.product-warranty-table tr:last-child th,
.product-warranty-table tr:last-child td,
.product-kit-table tr:last-child th,
.product-kit-table tr:last-child td { border-bottom: none; }

/* Kit table overrides — three-column layout (Qty · Item · Note),
   narrower Qty column, Note column rendered as muted meta since it's
   a qualifier rather than the primary data. */
.product-kit-table th,
.product-kit-table td { width: auto; padding-right: 20px; }
.product-kit-table th.qty,
.product-kit-table td.qty {
  width: 4.5em;
  text-align: left;
  padding-right: 24px;
  color: var(--navy);
  font-weight: 700;
}
.product-kit-table td.muted {
  color: var(--text-fine);
  font-weight: 400;
}

/* Grouped spec table — datasheet-style section subheads above each
   per-section table. Each group stacks with a quiet uppercase label. */
.product-spec-group + .product-spec-group {
  margin-top: 32px;
}
.product-spec-section {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.product-warranty .muted {
  margin-top: 24px;
  color: var(--text-fine);
  font-size: 14px;
  max-width: 60ch;
}

.product-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
}
.product-docs-grid h2 {
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 12px;
}
.product-doc-list,
.product-cert-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-doc-list a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-underline-offset: 3px;
}
.product-cert-list li {
  color: var(--text-soft);
  padding-left: 22px;
  position: relative;
}
.product-cert-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mint);
  font-weight: 700;
}

.product-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.product-related-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.product-related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.product-related-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.product-related-copy {
  padding: 16px 18px;
}
.product-related-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.product-related-tagline {
  font-size: 14px;
  color: var(--text-soft);
}

.product-index-grid { margin-top: 20px; }


/* ============================================================
   Shared sales CTA (bottom of every product page)
   ============================================================ */

.sales-cta {
  padding: 100px 0 110px;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  --section-head-color: var(--white);
}
.sales-cta .eyebrow { color: var(--mint); }
.sales-cta .eyebrow-dot { background: var(--mint); }
.sales-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.sales-cta-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  color: var(--text);
}
.sales-cta-card h3 {
  font-size: 22px;
  color: var(--navy);
  margin: 0 0 10px;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
.sales-cta-card > p {
  color: var(--text-soft);
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
}
.sales-cta-contractor { border-top: 3px solid var(--mint); }
.sales-cta-general    { border-top: 3px solid var(--navy); }

.sales-cta-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sales-cta-form label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-fine);
  margin-top: 10px;
  font-weight: 600;
}
.sales-cta-form .muted {
  color: var(--text-fine);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.sales-cta-form input,
.sales-cta-form textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  width: 100%;
}
.sales-cta-form input:focus,
.sales-cta-form textarea:focus {
  outline: 2px solid var(--mint);
  outline-offset: 1px;
  border-color: var(--navy);
}
.sales-cta-form button {
  margin-top: 24px;
  align-self: flex-start;
}


/* ===== responsive — product pages ===== */
@media (max-width: 980px) {
  .product-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-hero-copy h1 { font-size: 40px; }
  .product-hero--text-only .product-hero-copy h1 { font-size: 46px; }
  .product-features { grid-template-columns: 1fr; }
  .product-hero--text-only .product-features { grid-template-columns: 1fr; }
  .sales-cta-grid { grid-template-columns: 1fr; }
  .product-specs h2,
  .product-warranty h2,
  .product-docs h2,
  .product-related h2 { font-size: 26px; }
}
@media (max-width: 720px) {
  .product-hero { padding: 110px 0 60px; }
  .product-hero-copy h1 { font-size: 32px; }
  .product-hero--text-only .product-hero-copy h1 { font-size: 36px; }
  .product-tagline { font-size: 17px; }
  .product-body, .product-specs, .product-warranty, .product-docs, .product-related { padding: 60px 0; }
  .sales-cta { padding: 60px 0 70px; }
  .sales-cta-card { padding: 28px 22px; }
  .product-spec-table th, .product-spec-table td,
  .product-warranty-table th, .product-warranty-table td { padding: 12px 0; font-size: 14.5px; }
  .product-spec-table th, .product-warranty-table th { padding-right: 16px; }
}


/* ============================================================
   Site-only additions (preserved during ERP preview sync 2026-10-26)
   These are classes the live site uses but the ERP preview doesn't
   render — the serial-page registration flow (/s/<SERIAL>) and the
   benefits list under the unit title.
   ============================================================ */

/* Unit page — benefits bullets under the title */
.unit-benefits { margin: 12px 0 16px; padding-left: 1.2rem; }
.unit-benefits li { margin: 8px 0; line-height: 1.5; }

/* Registration + CTA form assent / clickwrap checkbox.
   Specificity bumped with the parent-form selectors so these win
   against `.sales-cta-form label` (uppercase/letter-spacing) and
   `.unit-register-form label` on the serial page.

   Layout note: this used to be `display: flex` on the label, but the
   label's contents are a checkbox PLUS multiple text/anchor nodes
   ("I agree to the", <a>Terms</a>, " and ", <a>Privacy</a>, ".").
   Flex treats each sibling as its own item, so with no flex-wrap the
   text nodes collapse to one-letter-wide columns and spill outside
   the card. Fixed by using `display: block` and absolutely
   positioning the checkbox — the text then flows naturally through
   the label's full width. */
.form-assent,
.sales-cta-form label.form-assent,
.unit-register-form label.form-assent {
  display: block !important;
  position: relative;
  padding-left: 26px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 14px 0 10px;
  color: var(--text-fine);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.form-assent input[type="checkbox"],
.sales-cta-form .form-assent input[type="checkbox"],
.unit-register-form .form-assent input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--white);
  flex: 0 0 auto;
}
.form-assent a {
  text-decoration: underline;
  color: inherit;
}