/* BRI-542 wave-2 QA fix — Install Brighter (rev3, post ID 18).
   Same root cause as Live Brighter: rev3 never defines a base
   .bnl-page--install-brighter{} wrapper rule, so background/color/
   font-family are never applied at the page level -- the whole page
   rendered as unstyled browser-default HTML instead of the dark
   theme. Every var() it needs resolves fine against the deployed
   tokens.css; nothing ever applied them at the root. Also: all CTAs
   carry class="bnl-btn bnl-btn--primary/--secondary" plus
   class="bnl-btn-row" but the base components are never defined here
   either -- same gap as Live Brighter, Landscape/Deck/Roofline just
   duplicate them locally and this page didn't.
   Additive only, rev3 files untouched. */
.bnl-page--install-brighter {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-body);
  line-height: var(--line-height-body); overflow-x: clip;
}
.bnl-page--install-brighter .bnl-btn {
  display: inline-block;
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading-proposed, var(--font-display));
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  text-decoration: none;
  text-align: center;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.bnl-page--install-brighter .bnl-btn--primary {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-pink);
  box-shadow: var(--glow-ambient-pink);
}
.bnl-page--install-brighter .bnl-btn--primary:hover {
  box-shadow: var(--shadow-glow-pink);
  background: color-mix(in srgb, var(--color-pink) 12%, transparent);
}
.bnl-page--install-brighter .bnl-btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.bnl-page--install-brighter .bnl-btn--secondary:hover {
  box-shadow: var(--shadow-glow-teal);
}
.bnl-page--install-brighter .bnl-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}