/* roofline rev27 — 02-page-styles.css · BRI-329 */
/* =====================================================================
   Permanent Roofline Lighting — page styles (rev27)
   Load AFTER tokens.css. Everything is scoped to .bnl-page--products-roofline
   except the #perf carousel rules, which are scoped by ID.

   The token block at the top of the rev27 section is duplicated in
   01-tokens.css. Once Mateo has promoted those to :root in tokens.css,
   the duplicate here is harmless but can be deleted.
===================================================================== */


/* =====================================================================
   TOKENS v1.2 PROPOSAL — heading font + tracking. Scoped to this page for
   preview. If approved, these become token changes and this block goes away.
===================================================================== */
.bnl-page--products-roofline {
  --font-heading-proposed: 'Bricolage Grotesque','Sora',var(--font-heading),sans-serif;
  --glow-ambient-teal: 0 0 48px -12px color-mix(in srgb, var(--color-primary) 55%, transparent);
  --glow-ambient-pink: 0 0 56px -10px color-mix(in srgb, var(--color-pink) 45%, transparent);
}

.bnl-page--products-roofline {
  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--products-roofline img {
  max-width: 100%;
}
/* ---- Breadcrumbs ---- */
.bnl-page--products-roofline .bnl-crumbs {
  padding: var(--space-md) var(--space-md) 0;
  max-width: var(--width-content);
  margin: 0 auto;
}
.bnl-page--products-roofline .bnl-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.bnl-page--products-roofline .bnl-crumbs li + li::before {
  content: "/";
  margin: 0 var(--space-xs);
  color: var(--color-border);
}
.bnl-page--products-roofline .bnl-crumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.bnl-page--products-roofline .bnl-crumbs a:hover { color: var(--color-primary); }
.bnl-page--products-roofline .bnl-crumbs [aria-current] { color: var(--color-text); }

/* anchor targets clear the sticky header when deep-linked */
.bnl-page--products-roofline section[id] { scroll-margin-top: 90px; }

/* ---- Ecosystem text links (crawlable, descriptive anchors) ---- */
.bnl-page--products-roofline .bnl-eco-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}
.bnl-page--products-roofline .bnl-eco-links a {
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-small);
  letter-spacing: .02em;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.bnl-page--products-roofline .bnl-eco-links a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-glow-teal);
}

/* ---- Sticky mobile quote bar (CSS only) ---- */
.bnl-page--products-roofline .bnl-sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  .bnl-page--products-roofline { padding-bottom: 76px; }
  .bnl-page--products-roofline .bnl-sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: var(--space-sm) var(--space-md);
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
  }
  .bnl-page--products-roofline .bnl-sticky-cta .bnl-btn { display: block; }
}

.bnl-page--products-roofline .bnl-wide-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin-top: var(--space-lg);
}
.bnl-page--products-roofline .bnl-section {
  padding: var(--space-lg) var(--space-md);
}
.bnl-page--products-roofline .bnl-section--alt {
  /* Rev 24: seamless bands — fade to page bg at both edges (no hard seams),
     with off-axis teal/pink pools so the tint breathes instead of sitting flat */
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background:
    radial-gradient(90% 52% at 12% 26%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 62%),
    radial-gradient(85% 48% at 88% 74%, color-mix(in srgb, var(--color-pink) 9%, transparent), transparent 62%),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-bg-section) 55%, transparent) 9%,
      color-mix(in srgb, var(--color-bg-section) 82%, transparent) 22%,
      color-mix(in srgb, var(--color-bg-section) 82%, transparent) 78%,
      color-mix(in srgb, var(--color-bg-section) 55%, transparent) 91%,
      transparent 100%);
}
.bnl-page--products-roofline .bnl-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--color-pink); /* fallback */
  -webkit-text-fill-color: transparent;
}
.bnl-page--products-roofline .bnl-section__inner {
  max-width: var(--width-content);
  margin: 0 auto;
}
.bnl-page--products-roofline .bnl-heading {
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-ml);
}
.bnl-page--products-roofline .bnl-heading--section {
  font-size: var(--text-h2);
}
.bnl-page--products-roofline .bnl-lede {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}

/* ---- Buttons ---- */
.bnl-page--products-roofline .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);
  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--products-roofline .bnl-btn--primary {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-pink);
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--color-pink) 60%, transparent),
              0 0 44px -8px color-mix(in srgb, var(--color-pink) 38%, transparent);
}
.bnl-page--products-roofline .bnl-btn--primary:hover {
  box-shadow: var(--shadow-glow-pink);
}
.bnl-page--products-roofline .bnl-btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.bnl-page--products-roofline .bnl-btn--secondary:hover {
  box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-roofline .bnl-btn--ghost {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-pink);
  box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-roofline .bnl-btn--ghost:hover {
  box-shadow: var(--shadow-glow-pink);
}
/* PROPOSAL (tokens v1.2): larger section headings, less gradient */
.bnl-page--products-roofline .bnl-heading--section {
  font-size: clamp(30px, 4.6vw, 46px);
}
/* shared glow frame */
.bnl-page--products-roofline .bnl-glow-frame {
  border: 1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  border-radius: var(--radius-md);
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
}
/* By Day / By Night — framed with the brand glow */
.bnl-page--products-roofline .bnl-ba img {
  border: 1.5px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
}
/* Rev 25: day/night compare slider */
.bnl-page--products-roofline .bnl-ba-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
  touch-action: pan-y;
}
.bnl-page--products-roofline .bnl-ba-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  box-shadow: none;
}
.bnl-page--products-roofline .bnl-ba-slider__top {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.bnl-page--products-roofline .bnl-ba-slider__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  transform: translateX(-50%);
  background: var(--color-white);
  box-shadow: 0 0 14px rgba(0,0,0,.85);
  pointer-events: none;
  z-index: 2;
}
.bnl-page--products-roofline .bnl-ba-slider__knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  border: 1.5px solid var(--color-white);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  font-size: 14px;
  white-space: nowrap;
}
.bnl-page--products-roofline .bnl-ba-slider__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  z-index: 3;
}
.bnl-page--products-roofline .bnl-ba-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 64px; height: 480px;
  background: transparent;
}
.bnl-page--products-roofline .bnl-ba-slider__range::-moz-range-thumb {
  width: 64px; height: 480px; border: 0; background: transparent;
}
.bnl-page--products-roofline .bnl-ba-slider__tag {
  position: absolute; top: var(--space-md);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  backdrop-filter: blur(8px);
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}
.bnl-page--products-roofline .bnl-ba-slider__tag--day { left: var(--space-md); }
.bnl-page--products-roofline .bnl-ba-slider__tag--night { right: var(--space-md); }
.bnl-page--products-roofline .bnl-ba-slider__hint {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  margin-top: var(--space-md);
}
/* relocated feature grid + stats, inside the premium card */
.bnl-page--products-roofline .bnl-frame-card .bnl-stats {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
/* Rev 26: icon bullet list (relocated color-wash features) */
.bnl-page--products-roofline .bnl-featlist {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  text-align: left;
}
@media (min-width: 760px) {
  .bnl-page--products-roofline .bnl-featlist { grid-template-columns: 1fr 1fr; }
}
.bnl-page--products-roofline .bnl-featlist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.bnl-page--products-roofline .bnl-featlist__ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.bnl-page--products-roofline .bnl-featlist b {
  display: block;
  font-family: var(--font-heading-proposed);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.bnl-page--products-roofline .bnl-featlist p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
/* boxed statement card (Premium Lighting Without Compromise) */
.bnl-page--products-roofline .bnl-frame-card {
  border: 1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
  padding: var(--space-lg);
}
.bnl-page--products-roofline .bnl-frame-card > :last-child { margin-bottom: 0; }
/* framed More-Than split */
.bnl-page--products-roofline #why .bnl-split {
  border: 1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
  padding: var(--space-lg);
}
/* spec table redesign */
.bnl-page--products-roofline #specs .bnl-table-scroll {
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--glow-ambient-teal);
}
.bnl-page--products-roofline #specs .bnl-table__head {
  font-size: var(--text-h3);
}
.bnl-page--products-roofline #specs .bnl-table__cell--label {
  color: var(--color-primary);
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
}
.bnl-page--products-roofline #specs tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.bnl-page--products-roofline #specs tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-pink) 5%, transparent);
}
/* comparison table: keep brand column visually centered on phones */
@media (max-width: 640px) {
  .bnl-page--products-roofline .bnl-compare .bnl-table__cell--label,
  .bnl-page--products-roofline .bnl-compare .bnl-table__head:first-child {
    width: 36%;
    white-space: normal;
  }
}
/* stats extras */
.bnl-page--products-roofline .bnl-stats__note {
  display: block;
  margin-top: 6px;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: underline;
}
.bnl-page--products-roofline .bnl-stats__note:hover { color: var(--color-primary); }
/* animated tap hint on the ecosystem map */
.bnl-page--products-roofline .bnl-eco__hint {
  position: absolute;
  top: var(--space-md);
  left: 4%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  border: 1px solid var(--color-primary);
  backdrop-filter: blur(8px);
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
  box-shadow: var(--shadow-glow-teal);
  animation: bnl-hint-slide 6s ease-in-out infinite alternate;
}
.bnl-page--products-roofline .bnl-eco__hint span { font-size: 20px; animation: bnl-hint-bob 1.2s ease-in-out infinite alternate; }
@keyframes bnl-hint-slide { from { left: 4%; } to { left: calc(96% - 170px); } }
@keyframes bnl-hint-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .bnl-page--products-roofline .bnl-eco__hint { animation: none; left: 50%; transform: translateX(-50%); }
  .bnl-page--products-roofline .bnl-eco__hint span { animation: none; }
}
.bnl-page--products-roofline .bnl-btn:focus-visible,
.bnl-page--products-roofline .bnl-link:focus-visible,
.bnl-page--products-roofline .bnl-faq__q:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.bnl-page--products-roofline .bnl-link {
  color: var(--color-primary);
}
.bnl-page--products-roofline .bnl-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ---- Hero (video band on top; content below; title slightly overlaps the video's bottom edge) ---- */
.bnl-page--products-roofline .bnl-hero {
  padding: 0;
}
.bnl-page--products-roofline .bnl-hero__media-frame {
  position: relative;
  height: min(64vh, 600px);
  overflow: hidden;
}
.bnl-page--products-roofline .bnl-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
@media (prefers-reduced-motion: reduce) {
  .bnl-page--products-roofline .bnl-hero__bg--video { display: none; }
}
.bnl-page--products-roofline .bnl-hero__media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 55%, transparent) 18%, transparent 42%);
  pointer-events: none;
}
.bnl-page--products-roofline .bnl-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--width-content);
  margin: -44px auto 0;
  padding: 0 var(--space-md) var(--space-lg);
}
@media (min-width: 768px) {
  .bnl-page--products-roofline .bnl-hero__content {
    margin-top: -76px;
    padding: 0 var(--space-lg) var(--space-xl);
  }
}
.bnl-page--products-roofline .bnl-hero__inner { max-width: 720px; }
.bnl-page--products-roofline .bnl-hero .bnl-btn-row { justify-content: center; }
.bnl-page--products-roofline .bnl-hero__eyebrow {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.bnl-page--products-roofline .bnl-hero__title {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: var(--line-height-heading);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
}

/* ---- Checkmark lists ---- */
.bnl-page--products-roofline .bnl-checks {
  list-style: none;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-sm) var(--space-lg);
}
.bnl-page--products-roofline .bnl-checks li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.bnl-page--products-roofline .bnl-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* ---- Split (text + image) ---- */
.bnl-page--products-roofline .bnl-split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .bnl-page--products-roofline .bnl-split { grid-template-columns: 1fr 1fr; }
}
.bnl-page--products-roofline .bnl-split__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ---- Occasion chips ---- */
.bnl-page--products-roofline .bnl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
}
.bnl-page--products-roofline .bnl-chips span {
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-small);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  box-shadow: var(--glow-ambient-teal);
}

/* ---- Punch lines ---- */
.bnl-page--products-roofline .bnl-punch p {
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs);
}
.bnl-page--products-roofline .bnl-punch p:last-child {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 400;
  margin-top: var(--space-sm);
}

/* ---- Statistics band ---- */
.bnl-page--products-roofline .bnl-stats {
  display: grid;
  /* BRI-541 #3: 150px let "BT + Wi-Fi" force a 5th/6th column split that
     orphaned the last stat. 320px divides 1200px content width into an
     even 3 (auto-fit floors at floor((1200+16)/(320+16)) = 3), and keeps
     falling back to 2 or 1 columns cleanly at narrower widths — 6 items
     divide evenly by 3, 2 and 1, so no width produces an orphan. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg) var(--space-md);
  text-align: center;
}
.bnl-page--products-roofline .bnl-stats__num {
  display: block;
  font-family: var(--font-heading-proposed);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.bnl-page--products-roofline .bnl-stats__label {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
}

/* ---- Interactive stat counters (pure CSS: @property + counter; on hover/tap the
   number replays from 0. Browsers without @property simply show the final number.) ---- */
@property --bnl-statn { syntax: '<integer>'; inherits: false; initial-value: 0; }
.bnl-page--products-roofline .bnl-sr {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.bnl-page--products-roofline .bnl-stats__item { cursor: default; outline: none; }
.bnl-page--products-roofline .bnl-stats__num {
  counter-reset: bnlstat var(--bnl-statn);
}
.bnl-page--products-roofline .bnl-stats__digits::before {
  content: counter(bnlstat);
}
.bnl-page--products-roofline .bnl-stats__item:hover .bnl-stats__num,
.bnl-page--products-roofline .bnl-stats__item:focus-visible .bnl-stats__num {
  animation: bnl-count-up 0.9s ease-out;
}
@keyframes bnl-count-up { from { --bnl-statn: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bnl-page--products-roofline .bnl-stats__item:hover .bnl-stats__num,
  .bnl-page--products-roofline .bnl-stats__item:focus-visible .bnl-stats__num { animation: none; }
}

/* ---- Compare tool feature band ---- */
.bnl-page--products-roofline .bnl-compare-cta {
  margin-top: var(--space-xl);
  border: 1px solid color-mix(in srgb, var(--color-pink) 45%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--color-bg-elevated);
  box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-roofline button.bnl-compare-cta__chip {
  font: inherit;
  cursor: pointer;
}
.bnl-page--products-roofline button.bnl-compare-cta__chip:hover {
  box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-roofline .bnl-compare-cta__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-bold);
}
.bnl-page--products-roofline .bnl-compare-cta__chip { background:color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);-webkit-appearance:none;appearance:none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: var(--text-h3);
}
.bnl-page--products-roofline .bnl-compare-cta__chip--us {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-roofline .bnl-compare-cta__chip--them { background:color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);border-color:color-mix(in srgb,var(--color-pink) 45%,var(--color-border));
  color: var(--color-text-muted);
  border-style: dashed;
}
.bnl-page--products-roofline .bnl-compare-cta__x {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
}
.bnl-page--products-roofline .bnl-compare-cta__fine {
  margin-top: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ---- Premium motion: CSS-only scroll reveal (progressive enhancement) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bnl-page--products-roofline .bnl-card,
    .bnl-page--products-roofline .bnl-gallery__figure,
    .bnl-page--products-roofline .bnl-split__img,
    .bnl-page--products-roofline .bnl-stats > div,
    .bnl-page--products-roofline .bnl-ba figure {
      animation: bnl-rise-in both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes bnl-rise-in {
  from { opacity: 0.15; transform: translateY(18px); }
  to   { opacity: 1;    transform: none; }
}

/* ---- Interactive Color Wash slider (pure CSS radio carousel) ---- */
.bnl-page--products-roofline .bnl-cw__radio {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.bnl-page--products-roofline .bnl-cw__stage {
  position: relative;
  aspect-ratio: 459 / 246;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* BRI-541 #2: this margin-top stacked on top of .bnl-lede's own
     32px bottom margin instead of relying on it — doubling the gap
     other sections get from the lede alone. Removed. */
}
.bnl-page--products-roofline .bnl-cw__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}
.bnl-page--products-roofline .bnl-cw__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 26px;
  cursor: pointer;
  z-index: 3;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.bnl-page--products-roofline .bnl-cw__nav:hover { border-color: var(--color-primary); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-roofline .bnl-cw__nav--prev { left: var(--space-md); }
.bnl-page--products-roofline .bnl-cw__nav--next { right: var(--space-md); }
.bnl-page--products-roofline .bnl-cw__swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-ml);
  margin-top: var(--space-lg);
}
.bnl-page--products-roofline .bnl-cw__sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  min-width: 44px;
}
.bnl-page--products-roofline .bnl-cw__dot {
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--sw);
  transition: box-shadow .2s ease, transform .2s ease;
}
.bnl-page--products-roofline .bnl-cw__sw:hover .bnl-cw__dot { transform: scale(1.12); }

/* ---- Season cards (hover to zoom ~35%) ---- */
.bnl-page--products-roofline .bnl-season {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 900px) {
  .bnl-page--products-roofline .bnl-season { grid-template-columns: repeat(4, 1fr); }
}
.bnl-page--products-roofline .bnl-season__card {
  margin: 0;
  position: relative;
  transition: transform .3s ease;
  outline: none;
}
.bnl-page--products-roofline .bnl-season__card img {
  width: 100%; height: auto;
  border-radius: var(--radius-md);
  display: block;
  box-shadow: var(--shadow-sm);
}
.bnl-page--products-roofline .bnl-season__card figcaption {
  margin-top: var(--space-sm);
  text-align: center;
}
.bnl-page--products-roofline .bnl-season__card figcaption b {
  display: block;
  font-family: var(--font-heading-proposed);
  letter-spacing: -0.01em;
}
.bnl-page--products-roofline .bnl-season__card figcaption span {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bnl-page--products-roofline .bnl-season__card:hover,
  .bnl-page--products-roofline .bnl-season__card:focus-visible { transform: scale(1.35); z-index: 6; }
  .bnl-page--products-roofline .bnl-season__card:hover img,
  .bnl-page--products-roofline .bnl-season__card:focus-visible img { box-shadow: var(--shadow-glow-teal), 0 18px 50px rgba(0,0,0,.6); }
}


/* Rev 24: the stage frame glows in the selected wash color */
.bnl-page--products-roofline #cwc-red:checked ~ .bnl-cw__stage { border-color: #E23B3B; box-shadow: 0 0 0 1px color-mix(in srgb, #E23B3B 30%, transparent), 0 0 26px color-mix(in srgb, #E23B3B 45%, transparent), 0 0 78px color-mix(in srgb, #E23B3B 20%, transparent); }
.bnl-page--products-roofline #cwc-orange:checked ~ .bnl-cw__stage { border-color: #F5761A; box-shadow: 0 0 0 1px color-mix(in srgb, #F5761A 30%, transparent), 0 0 26px color-mix(in srgb, #F5761A 45%, transparent), 0 0 78px color-mix(in srgb, #F5761A 20%, transparent); }
.bnl-page--products-roofline #cwc-yellow:checked ~ .bnl-cw__stage { border-color: #F0C41B; box-shadow: 0 0 0 1px color-mix(in srgb, #F0C41B 30%, transparent), 0 0 26px color-mix(in srgb, #F0C41B 45%, transparent), 0 0 78px color-mix(in srgb, #F0C41B 20%, transparent); }
.bnl-page--products-roofline #cwc-green:checked ~ .bnl-cw__stage { border-color: #3FBF3F; box-shadow: 0 0 0 1px color-mix(in srgb, #3FBF3F 30%, transparent), 0 0 26px color-mix(in srgb, #3FBF3F 45%, transparent), 0 0 78px color-mix(in srgb, #3FBF3F 20%, transparent); }
.bnl-page--products-roofline #cwc-teal:checked ~ .bnl-cw__stage { border-color: #14B8A6; box-shadow: 0 0 0 1px color-mix(in srgb, #14B8A6 30%, transparent), 0 0 26px color-mix(in srgb, #14B8A6 45%, transparent), 0 0 78px color-mix(in srgb, #14B8A6 20%, transparent); }
.bnl-page--products-roofline #cwc-cyan:checked ~ .bnl-cw__stage { border-color: #22C7EE; box-shadow: 0 0 0 1px color-mix(in srgb, #22C7EE 30%, transparent), 0 0 26px color-mix(in srgb, #22C7EE 45%, transparent), 0 0 78px color-mix(in srgb, #22C7EE 20%, transparent); }
.bnl-page--products-roofline #cwc-blue:checked ~ .bnl-cw__stage { border-color: #2E5BFF; box-shadow: 0 0 0 1px color-mix(in srgb, #2E5BFF 30%, transparent), 0 0 26px color-mix(in srgb, #2E5BFF 45%, transparent), 0 0 78px color-mix(in srgb, #2E5BFF 20%, transparent); }
.bnl-page--products-roofline #cwc-indigo:checked ~ .bnl-cw__stage { border-color: #5B3FD4; box-shadow: 0 0 0 1px color-mix(in srgb, #5B3FD4 30%, transparent), 0 0 26px color-mix(in srgb, #5B3FD4 45%, transparent), 0 0 78px color-mix(in srgb, #5B3FD4 20%, transparent); }
.bnl-page--products-roofline #cwc-purple:checked ~ .bnl-cw__stage { border-color: #9A3FD4; box-shadow: 0 0 0 1px color-mix(in srgb, #9A3FD4 30%, transparent), 0 0 26px color-mix(in srgb, #9A3FD4 45%, transparent), 0 0 78px color-mix(in srgb, #9A3FD4 20%, transparent); }
.bnl-page--products-roofline #cwc-pink:checked ~ .bnl-cw__stage { border-color: #E23B8E; box-shadow: 0 0 0 1px color-mix(in srgb, #E23B8E 30%, transparent), 0 0 26px color-mix(in srgb, #E23B8E 45%, transparent), 0 0 78px color-mix(in srgb, #E23B8E 20%, transparent); }
.bnl-page--products-roofline #cwc-red:checked ~ .bnl-cw__stage .bnl-cw__img--red { opacity: 1; }
.bnl-page--products-roofline #cwc-red:checked ~ .bnl-cw__stage .bnl-cw__nav--for-red { display: grid; }
.bnl-page--products-roofline #cwc-red:checked ~ .bnl-cw__swatches label[for="cwc-red"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-red:checked ~ .bnl-cw__swatches label[for="cwc-red"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-red:focus-visible ~ .bnl-cw__swatches label[for="cwc-red"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-orange:checked ~ .bnl-cw__stage .bnl-cw__img--orange { opacity: 1; }
.bnl-page--products-roofline #cwc-orange:checked ~ .bnl-cw__stage .bnl-cw__nav--for-orange { display: grid; }
.bnl-page--products-roofline #cwc-orange:checked ~ .bnl-cw__swatches label[for="cwc-orange"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-orange:checked ~ .bnl-cw__swatches label[for="cwc-orange"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-orange:focus-visible ~ .bnl-cw__swatches label[for="cwc-orange"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-yellow:checked ~ .bnl-cw__stage .bnl-cw__img--yellow { opacity: 1; }
.bnl-page--products-roofline #cwc-yellow:checked ~ .bnl-cw__stage .bnl-cw__nav--for-yellow { display: grid; }
.bnl-page--products-roofline #cwc-yellow:checked ~ .bnl-cw__swatches label[for="cwc-yellow"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-yellow:checked ~ .bnl-cw__swatches label[for="cwc-yellow"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-yellow:focus-visible ~ .bnl-cw__swatches label[for="cwc-yellow"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-green:checked ~ .bnl-cw__stage .bnl-cw__img--green { opacity: 1; }
.bnl-page--products-roofline #cwc-green:checked ~ .bnl-cw__stage .bnl-cw__nav--for-green { display: grid; }
.bnl-page--products-roofline #cwc-green:checked ~ .bnl-cw__swatches label[for="cwc-green"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-green:checked ~ .bnl-cw__swatches label[for="cwc-green"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-green:focus-visible ~ .bnl-cw__swatches label[for="cwc-green"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-teal:checked ~ .bnl-cw__stage .bnl-cw__img--teal { opacity: 1; }
.bnl-page--products-roofline #cwc-teal:checked ~ .bnl-cw__stage .bnl-cw__nav--for-teal { display: grid; }
.bnl-page--products-roofline #cwc-teal:checked ~ .bnl-cw__swatches label[for="cwc-teal"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-teal:checked ~ .bnl-cw__swatches label[for="cwc-teal"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-teal:focus-visible ~ .bnl-cw__swatches label[for="cwc-teal"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-cyan:checked ~ .bnl-cw__stage .bnl-cw__img--cyan { opacity: 1; }
.bnl-page--products-roofline #cwc-cyan:checked ~ .bnl-cw__stage .bnl-cw__nav--for-cyan { display: grid; }
.bnl-page--products-roofline #cwc-cyan:checked ~ .bnl-cw__swatches label[for="cwc-cyan"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-cyan:checked ~ .bnl-cw__swatches label[for="cwc-cyan"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-cyan:focus-visible ~ .bnl-cw__swatches label[for="cwc-cyan"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-blue:checked ~ .bnl-cw__stage .bnl-cw__img--blue { opacity: 1; }
.bnl-page--products-roofline #cwc-blue:checked ~ .bnl-cw__stage .bnl-cw__nav--for-blue { display: grid; }
.bnl-page--products-roofline #cwc-blue:checked ~ .bnl-cw__swatches label[for="cwc-blue"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-blue:checked ~ .bnl-cw__swatches label[for="cwc-blue"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-blue:focus-visible ~ .bnl-cw__swatches label[for="cwc-blue"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-indigo:checked ~ .bnl-cw__stage .bnl-cw__img--indigo { opacity: 1; }
.bnl-page--products-roofline #cwc-indigo:checked ~ .bnl-cw__stage .bnl-cw__nav--for-indigo { display: grid; }
.bnl-page--products-roofline #cwc-indigo:checked ~ .bnl-cw__swatches label[for="cwc-indigo"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-indigo:checked ~ .bnl-cw__swatches label[for="cwc-indigo"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-indigo:focus-visible ~ .bnl-cw__swatches label[for="cwc-indigo"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-purple:checked ~ .bnl-cw__stage .bnl-cw__img--purple { opacity: 1; }
.bnl-page--products-roofline #cwc-purple:checked ~ .bnl-cw__stage .bnl-cw__nav--for-purple { display: grid; }
.bnl-page--products-roofline #cwc-purple:checked ~ .bnl-cw__swatches label[for="cwc-purple"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-purple:checked ~ .bnl-cw__swatches label[for="cwc-purple"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-purple:focus-visible ~ .bnl-cw__swatches label[for="cwc-purple"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-roofline #cwc-pink:checked ~ .bnl-cw__stage .bnl-cw__img--pink { opacity: 1; }
.bnl-page--products-roofline #cwc-pink:checked ~ .bnl-cw__stage .bnl-cw__nav--for-pink { display: grid; }
.bnl-page--products-roofline #cwc-pink:checked ~ .bnl-cw__swatches label[for="cwc-pink"] { color: var(--color-text); }
.bnl-page--products-roofline #cwc-pink:checked ~ .bnl-cw__swatches label[for="cwc-pink"] .bnl-cw__dot { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--sw), 0 0 22px var(--sw); }
.bnl-page--products-roofline #cwc-pink:focus-visible ~ .bnl-cw__swatches label[for="cwc-pink"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---- Testimonials ---- */
.bnl-page--products-roofline .bnl-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.bnl-page--products-roofline .bnl-quote__stars {
  color: var(--color-orange);
  letter-spacing: .15em;
  font-size: var(--text-small);
}
.bnl-page--products-roofline .bnl-quote blockquote {
  margin: 0;
  font-style: italic;
  color: var(--color-text);
}
.bnl-page--products-roofline .bnl-quote figcaption {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
}

/* ---- Reviews: CSS-only auto-scrolling marquee (BRI-541 #1) ----
   Markup holds the four review cards twice back-to-back; translating
   the track exactly -50% lines the second copy up where the first
   started, so the loop reads as continuous with no jump-cut. The
   second copy carries aria-hidden so assistive tech only hears each
   review once. No JavaScript anywhere in this block. */
.bnl-page--products-roofline .bnl-reviews-viewport {
  overflow: hidden;
}
.bnl-page--products-roofline .bnl-reviews-track {
  display: flex;
  width: max-content;
  gap: var(--space-ml);
  animation: bnl-reviews-scroll 36s linear infinite;
}
.bnl-page--products-roofline .bnl-reviews-track .bnl-card {
  flex: 0 0 min(85vw, 360px);
}
/* Pause on hover (mouse) and on touch — :active covers a sustained
   press/hold on touch devices since there's no JS to listen for
   touchstart; :focus-within pauses while a keyboard user is inside
   a card (e.g. tabbing to "Read all our reviews"). */
.bnl-page--products-roofline .bnl-reviews-track:hover,
.bnl-page--products-roofline .bnl-reviews-track:focus-within,
.bnl-page--products-roofline .bnl-reviews-track:active {
  animation-play-state: paused;
}
@keyframes bnl-reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Static 2x2 grid fallback: stop the loop and hide the duplicate set
   entirely rather than just freezing it mid-scroll. */
@media (prefers-reduced-motion: reduce) {
  .bnl-page--products-roofline .bnl-reviews-track {
    animation: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: auto;
  }
  .bnl-page--products-roofline .bnl-reviews-track .bnl-card {
    flex: initial;
  }
  .bnl-page--products-roofline .bnl-reviews-track [aria-hidden="true"] {
    display: none;
  }
}

/* ---- Before & After ---- */
.bnl-page--products-roofline .bnl-ba {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bnl-page--products-roofline .bnl-ba figure { margin: 0; }
.bnl-page--products-roofline .bnl-ba img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.bnl-page--products-roofline .bnl-ba figcaption {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  text-align: center;
}

/* ---- Benefits grid ---- */
.bnl-page--products-roofline .bnl-grid {
  display: grid;
  gap: var(--space-ml);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bnl-page--products-roofline .bnl-card {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-ml);
  box-shadow: var(--shadow-sm);
  box-shadow: var(--glow-ambient-teal);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bnl-page--products-roofline .bnl-card:hover {
  box-shadow: var(--shadow-glow-teal);
  transform: translateY(-2px);
}
.bnl-page--products-roofline .bnl-card__title {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
}
.bnl-page--products-roofline .bnl-card__body {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Spec + comparison tables ---- */
.bnl-page--products-roofline .bnl-table-scroll {
  overflow-x: auto;
}
.bnl-page--products-roofline .bnl-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.bnl-page--products-roofline .bnl-table__cell,
.bnl-page--products-roofline .bnl-table__head {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.bnl-page--products-roofline .bnl-table__head {
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-orange);
  white-space: nowrap;
}
.bnl-page--products-roofline .bnl-table__cell--label {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.bnl-page--products-roofline .bnl-table__cell {
  color: var(--color-text-muted);
}
.bnl-page--products-roofline .bnl-compare {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  box-shadow: var(--glow-ambient-teal);
}
.bnl-page--products-roofline .bnl-compare .bnl-table__head {
  white-space: normal;
  text-align: center;
  vertical-align: middle;
  min-width: 170px;
}
.bnl-page--products-roofline .bnl-compare .bnl-table__head--brand {
  color: var(--color-primary);
  text-align: center;
  font-size: clamp(17px, 2.3vw, 22px);
  line-height: 1.25;
  min-width: 230px;
}
.bnl-page--products-roofline .bnl-compare .bnl-table__cell--brand {
  text-align: center;
}
.bnl-page--products-roofline .bnl-compare .bnl-table__cell--brand {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.bnl-page--products-roofline .bnl-compare__foot {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

/* ---- Process steps ---- */
.bnl-page--products-roofline .bnl-steps {
  list-style: none;
  counter-reset: bnl-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-ml);
}
.bnl-page--products-roofline .bnl-steps__item {
  counter-increment: bnl-step;
  position: relative;
  padding-left: var(--space-xl);
  color: var(--color-text-muted);
}
.bnl-page--products-roofline .bnl-steps__item::before {
  content: counter(bnl-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: var(--color-white);
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-roofline .bnl-steps__title {
  display: block;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

/* ---- Contractor band ---- */
.bnl-page--products-roofline .bnl-pro-band {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
  box-shadow: var(--glow-ambient-pink);
  display: grid;
  gap: var(--space-md);
}
.bnl-page--products-roofline .bnl-pro-band__title {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}
.bnl-page--products-roofline .bnl-pro-band__body {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Gallery ---- */
.bnl-page--products-roofline .bnl-gallery {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 0;
}
.bnl-page--products-roofline .bnl-gallery__figure {
  margin: 0;
}
.bnl-page--products-roofline .bnl-gallery__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}


/* ---- Tech panel (controller) ---- */
.bnl-page--products-roofline .bnl-tech {
  display: grid;
  justify-items: center;
}
.bnl-page--products-roofline .bnl-tech__media-wrap {
  position: relative;
  max-width: 820px;
  width: 100%;
}
.bnl-page--products-roofline .bnl-tech__media-wrap::before {
  content: "";
  position: absolute;
  inset: 6% 8%;
  background: var(--gradient-brand);
  filter: blur(70px);
  opacity: 0.22;
}
.bnl-page--products-roofline .bnl-tech__media {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* ---- Ecosystem map (clickable systems) ---- */
.bnl-page--products-roofline .bnl-eco {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-sm);
  background: var(--color-bg-elevated);
  border: 1px solid color-mix(in srgb, var(--color-pink) 45%, var(--color-border));
  border-radius: var(--radius-md);
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
}
.bnl-page--products-roofline .bnl-eco__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: block;
}
.bnl-page--products-roofline .bnl-eco__hot {
  position: absolute;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bnl-page--products-roofline .bnl-eco__hot:hover,
.bnl-page--products-roofline .bnl-eco__hot:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-teal);
}

/* ---- FAQ ---- */
.bnl-page--products-roofline .bnl-faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
}
.bnl-page--products-roofline .bnl-faq__q {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.bnl-page--products-roofline .bnl-faq__q-text {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  margin: 0;
  display: inline;
}
.bnl-page--products-roofline .bnl-faq__a {
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 0;
}

/* ---- CTA band ---- */
.bnl-page--products-roofline .bnl-cta-band {
  position: relative;
  background:
    radial-gradient(70% 42% at 36% 30%, color-mix(in srgb, var(--color-pink) 10%, transparent), transparent 60%),
    radial-gradient(70% 42% at 66% 44%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-bg-elevated) 55%, transparent) 16%,
      color-mix(in srgb, var(--color-bg-elevated) 90%, transparent) 42%,
      color-mix(in srgb, var(--color-bg-elevated) 90%, transparent) 70%,
      color-mix(in srgb, var(--color-bg-elevated) 45%, transparent) 88%,
      transparent 100%);
  text-align: center;
  overflow: hidden;
}
/* Rev 24: blurred blob retired — its hard clip line at the band's top edge was
   the last visible seam. The glow now lives in contained radial pools below. */
.bnl-page--products-roofline .bnl-cta-band::before { content: none; }
.bnl-page--products-roofline .bnl-cta-band .bnl-section__inner {
  position: relative;
}
.bnl-page--products-roofline .bnl-cta-band .bnl-btn-row {
  justify-content: center;
}
.bnl-page--products-roofline .bnl-cta-band .bnl-lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

@media (min-width: 768px) {
  .bnl-page--products-roofline .bnl-section {
    padding: var(--space-xl) var(--space-lg);
  }
  .bnl-page--products-roofline .bnl-steps__item {
    padding-left: var(--space-2xl);
  }
  .bnl-page--products-roofline .bnl-pro-band {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bnl-page--products-roofline .bnl-btn,
  .bnl-page--products-roofline .bnl-card {
    transition: none;
  }
  .bnl-page--products-roofline .bnl-card:hover {
    transform: none;
  }
}
@media (max-width:700px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* ---- Kelvin strip (rev 33) — ALWAYS horizontal, five full-house panels.
   object-fit:contain means a panel can widen on hover without ever cropping the
   house; the source photo's black surround matches --color-bg so the letterbox
   is invisible. An auto-cycling highlight runs until the user hovers. No JS. ---- */
.bnl-page--products-roofline .bnl-k { max-width:1080px; margin:var(--space-lg) auto 0; --ease:cubic-bezier(.22,.61,.36,1); }
.bnl-page--products-roofline .bnl-k__radio { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.bnl-page--products-roofline .bnl-k__strip { display:flex; flex-direction:row; gap:8px;
  height:clamp(230px,38vw,470px); align-items:stretch; }
.bnl-page--products-roofline .bnl-k__panel {
  position:relative; flex:1 1 0; min-width:0; display:block; cursor:pointer;
  background:#000; border:1px solid rgba(255,255,255,.10); border-radius:14px; overflow:hidden;
  transition:flex-grow .55s var(--ease), border-color .35s ease, box-shadow .35s ease, filter .35s ease;
  animation:bnl-k-cycle 8s var(--d,0s) infinite both; }
.bnl-page--products-roofline .bnl-k__panel img {
  width:100%; height:100%; object-fit:contain; object-position:center center; display:block; }
.bnl-page--products-roofline .bnl-k__grad { position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.35) 55%, transparent); pointer-events:none; }
.bnl-page--products-roofline .bnl-k__tag { position:absolute; left:0; right:0; bottom:0;
  padding:12px 11px; display:grid; gap:1px; text-align:left; pointer-events:none; }
.bnl-page--products-roofline .bnl-k__k { font-family:var(--font-heading-proposed); font-size:clamp(.72rem,1.5vw,1.02rem);
  font-weight:700; color:rgba(255,255,255,.78); letter-spacing:-.01em; white-space:nowrap;
  transition:color .35s ease, text-shadow .35s ease; }
.bnl-page--products-roofline .bnl-k__k em { font-style:normal; font-size:.66em; opacity:.6; margin-left:1px; }
.bnl-page--products-roofline .bnl-k__name { font-family:var(--font-heading-proposed);
  font-size:clamp(.58rem,1.05vw,.74rem); color:rgba(255,255,255,.62); white-space:nowrap; }
.bnl-page--products-roofline .bnl-k__desc { font-size:.78rem; color:rgba(255,255,255,.58); line-height:1.4;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .35s var(--ease), margin .5s var(--ease); }
.bnl-page--products-roofline .bnl-k__chip { position:absolute; top:10px; left:10px; width:11px; height:11px;
  border-radius:50%; background:var(--sw); box-shadow:0 0 0 3px rgba(0,0,0,.35);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.bnl-page--products-roofline .bnl-k__scale { display:flex; align-items:center; gap:12px; max-width:560px;
  margin:var(--space-md) auto 0; font-family:var(--font-heading-proposed); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); opacity:.55; }
.bnl-page--products-roofline .bnl-k__scale i { flex:1; height:3px; border-radius:2px;
  background:linear-gradient(90deg,#FFB870,#FFCE9A,#FFE3C4,#EFF2FF,#D6E4FF); }

/* auto-cycling "these are interactive" highlight — stops the moment you hover */
@keyframes bnl-k-cycle {
  0%,12%  { filter:brightness(1.14) saturate(1.06); border-color:rgba(255,255,255,.42); }
  22%,100%{ filter:none; border-color:rgba(255,255,255,.10); }
}
.bnl-page--products-roofline .bnl-k__strip:hover .bnl-k__panel { animation:none; }

/* OPEN state — hovered panel, or the checked default while nothing is hovered */
.bnl-page--products-roofline .bnl-k__panel:hover,
.bnl-page--products-roofline .bnl-k__radio:checked ~ .bnl-k__strip:not(:hover) > .bnl-k__panel--on {
  flex-grow:2.4; border-color:rgba(255,255,255,.5);
  box-shadow:0 12px 34px rgba(0,0,0,.5), var(--shadow-glow-teal); }
.bnl-page--products-roofline .bnl-k__panel:hover .bnl-k__desc,
.bnl-page--products-roofline .bnl-k__radio:checked ~ .bnl-k__strip:not(:hover) > .bnl-k__panel--on .bnl-k__desc {
  max-height:3.6em; opacity:1; margin-top:4px; }
.bnl-page--products-roofline .bnl-k__panel:hover .bnl-k__k,
.bnl-page--products-roofline .bnl-k__radio:checked ~ .bnl-k__strip:not(:hover) > .bnl-k__panel--on .bnl-k__k {
  color:#fff; text-shadow:0 0 18px rgba(0,169,181,.55); }
.bnl-page--products-roofline .bnl-k__panel:hover .bnl-k__chip,
.bnl-page--products-roofline .bnl-k__radio:checked ~ .bnl-k__strip:not(:hover) > .bnl-k__panel--on .bnl-k__chip {
  transform:scale(1.45); box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 16px var(--sw); }
.bnl-page--products-roofline .bnl-k__radio:focus-visible ~ .bnl-k__strip > .bnl-k__panel--on {
  outline:var(--focus-ring); outline-offset:3px; }

/* phones: STAYS horizontal. Shorter strip, the open panel takes more share. */
@media (max-width:700px) {
  .bnl-page--products-roofline .bnl-k__strip { height:clamp(200px,52vw,300px); gap:5px; }
  .bnl-page--products-roofline .bnl-k__panel { border-radius:10px; }
  .bnl-page--products-roofline .bnl-k__panel:hover,
  .bnl-page--products-roofline .bnl-k__radio:checked ~ .bnl-k__strip:not(:hover) > .bnl-k__panel--on { flex-grow:3.4; }
  .bnl-page--products-roofline .bnl-k__desc { display:none; }
  .bnl-page--products-roofline .bnl-k__tag { padding:9px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .bnl-page--products-roofline .bnl-k__panel { animation:none; }
  .bnl-page--products-roofline .bnl-k__panel,
  .bnl-page--products-roofline .bnl-k__desc,
  .bnl-page--products-roofline .bnl-k__chip { transition:none !important; }
}

/* ---- Spec sheet (rev 33): collapsible groups replace the 13-row table.
   Native details/summary, no JS. Collapsed height ~4 rows instead of ~1400px
   of wrapped table cells on a phone. All 13 values preserved verbatim. ---- */
.bnl-page--products-roofline .bnl-spec { max-width:860px; margin:var(--space-lg) auto 0;
  border:1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  border-radius:var(--radius-md); background:var(--color-bg-elevated);
  box-shadow:var(--glow-ambient-teal); overflow:hidden; }
@media (max-width:560px) {
}
/* newest slider handle treatment, ported from pool-enclosure rev39 */
.bnl-page--products-roofline .bnl-ba-slider__knob { box-shadow:var(--shadow-glow-teal), 0 2px 10px rgba(0,0,0,.6); }

/* ---- Spec sheet (rev 33). Research-led rebuild.
   Sources agree: do NOT hide the headline specs behind collapsed headers
   (NN/g progressive disclosure; Mobbin "avoid hiding important content").
   So: a bento "at a glance" grid stays permanently visible, and ONE
   disclosure holds the full 13. Replaces rev31/32's four nested accordions,
   which buried everything and read as dated. Tap targets >=48px. ---- */
.bnl-page--products-roofline .bnl-sp { max-width:900px; margin:var(--space-lg) auto 0; }
.bnl-page--products-roofline .bnl-sp__bento { display:grid; gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:720px){ .bnl-page--products-roofline .bnl-sp__bento { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.bnl-page--products-roofline .bnl-sp__tile { position:relative; padding:16px 14px 14px;
  border:1px solid color-mix(in srgb, var(--color-border) 85%, transparent); border-radius:16px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-elevated)) 0%,
    var(--color-bg-elevated) 60%);
  display:flex; flex-direction:column; gap:2px; min-height:104px; overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.bnl-page--products-roofline .bnl-sp__tile--wide { grid-column:span 2; }
@media (min-width:720px){ .bnl-page--products-roofline .bnl-sp__tile--wide { grid-column:span 1; } }
.bnl-page--products-roofline .bnl-sp__ic { width:26px; height:26px; margin-bottom:6px; color:var(--color-primary); opacity:.9; }
.bnl-page--products-roofline .bnl-sp__v { font-family:var(--font-heading-proposed); font-weight:800;
  font-size:clamp(1.45rem,5.4vw,2rem); line-height:1.05; letter-spacing:-.03em;
  background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text;
  color:var(--color-pink); -webkit-text-fill-color:transparent; }
.bnl-page--products-roofline .bnl-sp__v small { font-size:.5em; font-weight:700; letter-spacing:0; margin-left:2px; }
.bnl-page--products-roofline .bnl-sp__l { font-family:var(--font-heading-proposed); font-size:var(--text-small);
  font-weight:var(--font-weight-semibold); color:var(--color-text); letter-spacing:.01em; }
.bnl-page--products-roofline .bnl-sp__s { font-size:.72rem; color:var(--color-text-muted); line-height:1.35; }
@media (hover:hover) and (pointer:fine){
  .bnl-page--products-roofline .bnl-sp__tile:hover { transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
    box-shadow:var(--shadow-glow-teal); }
}
/* single disclosure for the complete sheet */
.bnl-page--products-roofline .bnl-sp__more { margin-top:10px;
  border:1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  border-radius:16px; background:var(--color-bg-elevated); overflow:hidden; }
.bnl-page--products-roofline .bnl-sp__sum { display:flex; align-items:center; gap:10px; min-height:52px;
  padding:14px var(--space-md); cursor:pointer; list-style:none;
  font-family:var(--font-heading-proposed); font-weight:var(--font-weight-semibold);
  font-size:var(--text-body); color:var(--color-primary); transition:background .25s ease; }
.bnl-page--products-roofline .bnl-sp__sum::-webkit-details-marker { display:none; }
.bnl-page--products-roofline .bnl-sp__sum:hover { background:color-mix(in srgb, var(--color-primary) 8%, transparent); }
.bnl-page--products-roofline .bnl-sp__sum:focus-visible { outline:var(--focus-ring); outline-offset:-2px; }
.bnl-page--products-roofline .bnl-sp__chev { margin-left:auto; flex:none; transition:transform .3s ease; }
.bnl-page--products-roofline .bnl-sp__more[open] .bnl-sp__chev { transform:rotate(180deg); }
.bnl-page--products-roofline .bnl-sp__more[open] .bnl-sp__sum { color:var(--color-white);
  background:color-mix(in srgb, var(--color-primary) 10%, transparent); }
.bnl-page--products-roofline .bnl-sp__open { display:none; } .bnl-page--products-roofline .bnl-sp__more[open] .bnl-sp__open { display:inline; }
.bnl-page--products-roofline .bnl-sp__shut { display:inline; } .bnl-page--products-roofline .bnl-sp__more[open] .bnl-sp__shut { display:none; }
.bnl-page--products-roofline .bnl-sp__dl { margin:0; padding:4px var(--space-md) var(--space-md);
  animation:bnl-sp-in .32s ease both; }
@keyframes bnl-sp-in { from { opacity:0; transform:translateY(-5px); } }
.bnl-page--products-roofline .bnl-sp__row { display:grid; grid-template-columns:minmax(112px,28%) 1fr;
  gap:var(--space-md); padding:9px 0;
  border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent); }
.bnl-page--products-roofline .bnl-sp__row:first-child { border-top:0; }
.bnl-page--products-roofline .bnl-sp__dt { margin:0; font-family:var(--font-heading-proposed);
  font-size:var(--text-small); font-weight:var(--font-weight-semibold); color:var(--color-text); }
.bnl-page--products-roofline .bnl-sp__dd { margin:0; font-size:var(--text-small);
  color:var(--color-text-muted); line-height:1.5; }
@media (max-width:560px){
  .bnl-page--products-roofline .bnl-sp__row { grid-template-columns:1fr; gap:1px; padding:8px 0; }
  .bnl-page--products-roofline .bnl-sp__tile { min-height:96px; padding:14px 12px 12px; border-radius:14px; }
}
@media (prefers-reduced-motion:reduce){
  .bnl-page--products-roofline .bnl-sp__tile,.bnl-page--products-roofline .bnl-sp__chev { transition:none; }
  .bnl-page--products-roofline .bnl-sp__dl { animation:none; }
}
/* B-roll: deliberately modest, not full-bleed */
.bnl-page--products-roofline .bnl-broll{max-width:clamp(150px,42vw,205px);margin:var(--space-lg) auto 0;}
.bnl-page--products-roofline .bnl-broll video { width:100%; height:auto; display:block; border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb, var(--color-pink) 38%, var(--color-border));
  box-shadow:var(--glow-ambient-teal), var(--glow-ambient-pink); }
.bnl-page--products-roofline .bnl-broll figcaption { margin-top:var(--space-sm); text-align:center;
  font-size:var(--text-small); color:var(--color-text-muted); }

/* ==== unified pill (canonical, from home) ==== */
.bnl-pill,.bnl-k__chip,.bnl-k__tag,.bnl-vs__chip,.bnl-vibe__chip,.bnl-wash__chip,
.bnl-cs__chip,.bnl-rv__chip,.bnl-sp__kit-chip,.bnl-val__tag,.bnl-rot__tag,
.bnl-sc__tag,.bnl-compare-cta__chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-pill);
  font-family:var(--font-heading-proposed);font-weight:700;line-height:1.15;letter-spacing:.02em;
  background:color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary) 34%,var(--color-border));
  color:var(--color-text);-webkit-appearance:none;appearance:none;
}
.bnl-k__chip,.bnl-k__tag,.bnl-vs__chip,.bnl-vibe__chip,.bnl-wash__chip,.bnl-cs__chip,
.bnl-rv__chip,.bnl-sp__kit-chip,.bnl-val__tag,.bnl-rot__tag,.bnl-sc__tag{
  padding:7px 14px;font-size:var(--text-small);
}
.bnl-hero__eyebrow,.bnl-eyebrow,.bnl-sc__kicker,.bnl-acc__kicker,.bnl-kicker__t{
  font-family:var(--font-heading-proposed);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}

/* ==== coverflow cards, ported from home rev34 ==== */
/* ---- the card ---- */
.bnl-page--products-roofline .bnl-dcard{transform-style:preserve-3d;}
.bnl-page--products-roofline .bnl-dcard__inner{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:var(--radius-md);
  background:#141414;border:1px solid var(--color-border);
  transform-style:preserve-3d;
}
/* rim light — a tilted surface should catch an edge */
.bnl-page--products-roofline .bnl-dcard__inner::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 34%, transparent 58%);
}
.bnl-page--products-roofline .bnl-dcard__body{
  padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;
  transform-style:preserve-3d;position:relative;z-index:1;
}
.bnl-page--products-roofline .bnl-dcard__head{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.bnl-page--products-roofline .bnl-dcard__ic{
  flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-pill);
  border:1px solid currentColor;box-shadow:0 0 16px -4px currentColor;
}
.bnl-page--products-roofline .bnl-dcard__ic svg{width:15px;height:15px;}
.bnl-page--products-roofline .bnl-dcard__who{
  margin:0;font-family:var(--font-heading-proposed);font-size:10px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
}
.bnl-page--products-roofline .bnl-dcard__verb{
  font-family:var(--font-heading-proposed);font-weight:800;
  font-size:clamp(22px,5.6vw,30px);line-height:.96;letter-spacing:-.05em;margin:0 0 7px;
}
.bnl-page--products-roofline .bnl-dcard__verb span{display:inline;}
.bnl-page--products-roofline .bnl-dcard__rule{height:2px;width:52px;border-radius:2px;margin:0 0 9px;background:linear-gradient(90deg,currentColor,transparent);}
.bnl-page--products-roofline .bnl-dcard__hook{
  font-family:var(--font-heading-proposed);font-weight:700;
  font-size:14px;line-height:1.28;letter-spacing:-.015em;color:#fff;margin:0 0 10px;
}
.bnl-page--products-roofline .bnl-dcard__list{display:none;}
.bnl-page--products-roofline .bnl-dcard__cta{
  margin-top:auto;align-self:stretch;padding:11px var(--space-md);min-height:40px;font-size:12.5px;
}
.bnl-page--products-roofline .bnl-dcard__login{display:none;}
@media (min-width:860px){
  .bnl-page--products-roofline .bnl-dcard__body{padding:18px 20px 20px;}
.bnl-page--products-roofline .bnl-dcard__ic{width:36px;height:36px;}
.bnl-page--products-roofline .bnl-dcard__ic svg{width:17px;height:17px;}
.bnl-page--products-roofline .bnl-dcard__who{font-size:11px;}
.bnl-page--products-roofline .bnl-dcard__verb{font-size:34px;margin-bottom:9px;letter-spacing:-.052em;}
.bnl-page--products-roofline .bnl-dcard__rule{width:62px;margin-bottom:11px;}
.bnl-page--products-roofline .bnl-dcard__hook{font-size:16px;margin-bottom:12px;}
.bnl-page--products-roofline .bnl-dcard__list{
    display:block;list-style:none;padding:0;margin:0 0 14px;
    font-size:12.5px;color:var(--color-text-muted);
  }
.bnl-page--products-roofline .bnl-dcard__list li{padding:5px 0;border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent);}
.bnl-page--products-roofline .bnl-dcard__list li:nth-child(n+3){display:none;}
.bnl-page--products-roofline .bnl-dcard__cta{font-size:13px;}
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__login{
    display:block;margin-top:10px;text-align:center;
    font-family:var(--font-heading-proposed);font-size:11.5px;font-weight:600;
    color:var(--color-primary);text-decoration:none;
  }
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__login:hover{text-decoration:underline;}
}

/* each path card carries its own distinctly tinted gradient ground */
.bnl-page--products-roofline .bnl-dcard--live .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#0d1a1d 46%,#101010 100%);
}
.bnl-page--products-roofline .bnl-dcard--install .bnl-dcard__inner{
  background:linear-gradient(158deg,#2e0620 0%,#1d0d16 46%,#101010 100%);
}
.bnl-page--products-roofline .bnl-dcard--sell .bnl-dcard__inner{
  background:linear-gradient(158deg,#331904 0%,#1f1409 46%,#101010 100%);
}
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#1a0d28 42%,#2b0722 72%,#101010 100%);
}
/* ---- per-path accents ---- */
.bnl-page--products-roofline .bnl-dcard--live .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 48%, var(--color-border));}
.bnl-page--products-roofline .bnl-dcard--live .bnl-dcard__verb,
.bnl-page--products-roofline .bnl-dcard--live .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--live .bnl-dcard__ic,
.bnl-page--products-roofline .bnl-dcard--live .bnl-dcard__rule{color:var(--color-primary);}
.bnl-page--products-roofline .bnl-dcard--install .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 48%, var(--color-border));}
.bnl-page--products-roofline .bnl-dcard--install .bnl-dcard__verb,
.bnl-page--products-roofline .bnl-dcard--install .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--install .bnl-dcard__ic,
.bnl-page--products-roofline .bnl-dcard--install .bnl-dcard__rule{color:var(--color-pink);}
.bnl-page--products-roofline .bnl-dcard--sell .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 48%, var(--color-border));}
.bnl-page--products-roofline .bnl-dcard--sell .bnl-dcard__verb,
.bnl-page--products-roofline .bnl-dcard--sell .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--sell .bnl-dcard__ic,
.bnl-page--products-roofline .bnl-dcard--sell .bnl-dcard__rule{color:var(--color-orange);}
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 52%, var(--color-primary));}
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__verb{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  color:var(--color-pink);-webkit-text-fill-color:transparent;
}
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__ic{color:var(--color-primary);}
.bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__rule{background:var(--gradient-brand);}
/* ---- the stage ---- */
#perf .bnl-rot{margin:var(--space-ml) 0 0;}
#perf .bnl-rot__stage{
  /* rev18: card is 274px; the stage was 326px, leaving ~50px of dead air
     between the card and the controls once the photo slots came out */
  position:relative;height:296px;
  perspective:1100px;perspective-origin:50% 46%;
  transform-style:preserve-3d;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
}
#perf .bnl-rot__stage.is-drag{cursor:grabbing;}
#perf .bnl-rot__glow{
  position:absolute;left:50%;top:8px;width:min(760px,94vw);height:250px;
  margin-left:max(-380px,-47vw);pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--color-primary) 13%, transparent) 0%, transparent 68%);
}
#perf .bnl-rot__item{
  --w:64vw;
  position:absolute;left:50%;top:0;width:var(--w);height:274px;
  margin-left:calc(var(--w) / -2);
  transform-style:preserve-3d;
  transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease, filter .66s ease;
  will-change:transform;
}
#perf .bnl-rot__stage.is-drag .bnl-rot__item{transition:none;}
/* ---- coverflow geometry — EVERY card tilted on two axes ---- */
#perf .bnl-rot__item[data-pos="0"]{
  transform:translateX(0) translateZ(0)
            rotateY(calc(-9deg + var(--bnl-ry))) rotateX(calc(3.5deg + var(--bnl-rx)))
            scale(1);
  opacity:1;filter:none;z-index:5;
}
#perf .bnl-rot__item[data-pos="1"]{
  transform:translateX(70%) translateZ(-140px) rotateY(-46deg) rotateX(5deg) scale(.9);
  opacity:.6;filter:blur(.8px);z-index:3;
}
#perf .bnl-rot__item[data-pos="-1"]{
  transform:translateX(-70%) translateZ(-140px) rotateY(32deg) rotateX(5deg) scale(.9);
  opacity:.6;filter:blur(.8px);z-index:3;
}
#perf .bnl-rot__item[data-pos="2"],
#perf .bnl-rot__item[data-pos="-2"]{
  transform:translateX(0) translateZ(-360px) rotateY(-9deg) rotateX(3.5deg) scale(.82);
  opacity:.14;filter:blur(2.5px);z-index:1;
}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner{pointer-events:auto;}
#perf .bnl-rot__item:not([data-pos="0"]) .bnl-dcard__inner{pointer-events:none;}
/* pointer tracking wants a short transition, not the 660ms travel curve */
#perf .bnl-rot__item.is-tracking{transition:transform .12s linear;}
/* ---- directional shadow separation on the front card ---- */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner{
  box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.04) inset;
}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--live  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--install .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-pink);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--sell    .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 0 48px -12px color-mix(in srgb, var(--color-orange) 55%, transparent);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--design  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal), var(--glow-ambient-pink);}
/* ---- internal translateZ parallax — content floats above the surface ---- */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__head{transform:translateZ(30px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb{transform:translateZ(24px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__rule{transform:translateZ(18px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__hook{transform:translateZ(13px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__list{transform:translateZ(8px);}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:translateZ(20px);}
/* ---- cursor-tracked specular glare ---- */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(240px circle at var(--bnl-mx,50%) var(--bnl-my,26%),
             rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, transparent 64%);
  opacity:0;transition:opacity .32s ease;mix-blend-mode:screen;
}
#perf .bnl-rot__item[data-pos="0"].is-tracking .bnl-dcard__inner::after{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  #perf .bnl-rot__item[data-pos="0"]{animation:bnl-card-float 7s ease-in-out infinite;}
}

/* the shadow the front card floats above — offset to match the tilt */
#perf .bnl-rot__shadow{
  position:absolute;left:50%;top:274px;width:min(340px,50vw);height:24px;
  margin-left:max(-178px,-26vw);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.82) 0%, rgba(0,0,0,.34) 46%, transparent 74%);
  filter:blur(9px);
  transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease;
}
#perf .bnl-rot__stage.is-drag .bnl-rot__shadow{transition:none;}
/* ---- nav ---- */
#perf .bnl-rot__nav{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;}
#perf .bnl-rot__arrows{display:flex;align-items:center;justify-content:center;gap:10px;}
#perf .bnl-rot__arrow{
  width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#EDEFEF;font-size:16px;line-height:1;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#perf .bnl-rot__arrow--prev{
  border-color:color-mix(in srgb, var(--color-pink) 70%, transparent);
  color:#fff;box-shadow:var(--glow-ambient-pink);
}
#perf .bnl-rot__arrow--prev:hover{box-shadow:var(--hglow-pink-hi);background:color-mix(in srgb, var(--color-pink) 14%, transparent);}
#perf .bnl-rot__arrow--next{
  border-color:color-mix(in srgb, var(--color-primary) 70%, transparent);
  color:#fff;box-shadow:var(--glow-ambient-teal);
}
#perf .bnl-rot__arrow--next:hover{box-shadow:var(--hglow-teal-hi);background:color-mix(in srgb, var(--color-primary) 14%, transparent);}
#perf .bnl-rot__dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
#perf .bnl-rot__dot{
  cursor:pointer;font:inherit;font-family:var(--font-heading-proposed);font-weight:700;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);
  transition:color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
#perf .bnl-rot__dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;}
#perf .bnl-rot__dot:hover{color:#fff;border-color:var(--color-text-muted);}
#perf .bnl-rot__dot[aria-selected="true"]{color:var(--dot,#fff);border-color:var(--dot,#fff);box-shadow:0 0 14px -2px var(--dot,#fff);}
#perf .bnl-rot__dot[aria-selected="true"]::before{opacity:1;}
#perf .bnl-rot__hint{text-align:center;color:var(--color-text-muted);font-size:11px;margin-top:7px;}
#perf .bnl-rot.is-manual .bnl-rot__hint{opacity:.4;}
@media (min-width:560px){ #perf .bnl-rot__item{--w:300px;}
}
@media (min-width:860px){
  #perf .bnl-rot__stage{height:452px;perspective:1500px;}
#perf .bnl-rot__item{--w:352px;height:424px;}
#perf .bnl-rot__item[data-pos="1"]{transform:translateX(76%) translateZ(-170px) rotateY(-44deg) rotateX(4deg) scale(.9);}
#perf .bnl-rot__item[data-pos="-1"]{transform:translateX(-76%) translateZ(-170px) rotateY(30deg) rotateX(4deg) scale(.9);}
#perf .bnl-rot__item[data-pos="2"],#perf .bnl-rot__item[data-pos="-2"]{transform:translateX(0) translateZ(-440px) rotateY(-9deg) rotateX(3deg) scale(.82);}
#perf .bnl-rot__shadow{top:428px;width:300px;margin-left:-150px;height:30px;}
#perf .bnl-rot__glow{height:360px;}
#perf .bnl-rot__dot{font-size:12px;padding:9px 15px;}
#perf .bnl-rot__arrow{width:42px;height:42px;}
#perf .bnl-rot__stage{perspective:none;}
#perf .bnl-rot__item{animation:none!important;filter:none!important;}
#perf .bnl-rot__item[data-pos="1"],#perf .bnl-rot__item[data-pos="-1"],
  #perf .bnl-rot__item[data-pos="2"],#perf .bnl-rot__item[data-pos="-2"]{transform:none;opacity:0;pointer-events:none;}
#perf .bnl-rot__item[data-pos="0"]{transform:none;}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__head,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__rule,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__hook,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__list,
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:none;}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner::after{display:none;}
/* rules and dividers that carry the brand gradient can drift too */
  .bnl-page--products-roofline .bnl-dcard--design .bnl-dcard__rule{
    background-size:230% 100%;
    animation:bnl-grad-drift 9s ease-in-out infinite;
  }
}

/* ============================================================================
   rev18 · CARD POLISH
   Drop shadows do almost nothing on a near-black page, so elevation has to come
   from edges and gradient light instead. Three additions: a lit top bevel, a
   soft floor-glow inside the card face, and a slightly hotter accent edge on
   whichever card is actually front-and-centre.
============================================================================ */
/* 1 · lit top bevel — a 1px highlight that fades toward the sides, the way a
   real extruded edge catches light from above */
.bnl-page--products-roofline .bnl-dcard__inner{
  background-clip:padding-box;
  isolation:isolate;
}
.bnl-page--products-roofline .bnl-dcard__inner > .bnl-dcard__bevel{
  position:absolute;left:9%;right:9%;top:0;height:1px;z-index:4;
  pointer-events:none;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  opacity:.5;
}
/* 2 · the accent edge gets hotter on the front card only, so the coverflow has
   a clear focal point rather than four equally-lit cards */
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--live    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 72%, var(--color-border));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--install .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 72%, var(--color-border));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--sell    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 72%, var(--color-border));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard--design  .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 62%, var(--color-primary));}
#perf .bnl-rot__item[data-pos="0"] .bnl-dcard__bevel{opacity:.95;}
/* 3 · floor glow inside the card face — the accent colour pooling at the base,
   which is what actually sells these as lit objects */
.bnl-page--products-roofline .bnl-dcard__inner::before{
  background:
    linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 34%, transparent 58%),
    radial-gradient(120% 46% at 50% 104%, var(--bnl-cardfloor, transparent) 0%, transparent 72%);
}
.bnl-page--products-roofline .bnl-dcard--live   {--bnl-cardfloor:color-mix(in srgb, var(--color-primary) 22%, transparent);}
.bnl-page--products-roofline .bnl-dcard--install{--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 22%, transparent);}
.bnl-page--products-roofline .bnl-dcard--sell   {--bnl-cardfloor:color-mix(in srgb, var(--color-orange) 20%, transparent);}
.bnl-page--products-roofline .bnl-dcard--design {--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 20%, transparent);}
/* the back cards should not compete: kill their floor glow entirely */
#perf .bnl-rot__item:not([data-pos="0"]) .bnl-dcard{--bnl-cardfloor:transparent;}
/* --- carousel and rail arrows --- */
  #perf .bnl-rot__arrow,
  .bnl-page--products-roofline .bnl-sysrail__arrow{width:44px;height:44px;}
/* --- path pills under the carousel --- */
  #perf .bnl-rot__dot{min-height:42px;}
/* ============================================================================
   rev31 · THE CAROUSEL EARNS ITS SPACE
   Cards were 64vw x 274px, which left the front card floating in a lot of
   room. Sized up to 74vw x 348px, the stage follows, and the controls move up
   to sit directly beneath the card instead of across a gap — so the thing that
   tells you which way you can go is attached to the thing that moves.
============================================================================ */
#perf .bnl-rot__item{--w:74vw;height:348px;}
#perf .bnl-rot__stage{height:372px;perspective-origin:50% 44%;}
#perf .bnl-rot__shadow{top:348px;}
#perf .bnl-rot__nav{margin-top:2px;gap:8px;}
#perf .bnl-rot__hint{margin-top:5px;}
@media (min-width:560px){ #perf .bnl-rot__item{--w:352px;}
}
@media (min-width:820px){
  #perf .bnl-rot__stage{height:534px;}
#perf .bnl-rot__item{--w:412px;height:506px;}
#perf .bnl-rot__shadow{top:510px;width:352px;margin-left:-176px;}
}
@media (prefers-reduced-motion:no-preference){
  #perf .bnl-rot__item[data-pos="0"]{animation:bnl-card-float 9s ease-in-out infinite;}
#perf .bnl-rot__item[data-pos="0"]{
  transform:translateX(0) translateY(var(--bnl-fy,0px)) translateZ(0)
            rotateY(calc(-9deg + var(--bnl-ry))) rotateX(calc(3.5deg + var(--bnl-rx)))
            scale(1);
}
}
@media (prefers-reduced-motion:no-preference){
  #perf .bnl-rot__shadow{animation:bnl-card-shadow 9s ease-in-out infinite;}
}

/* ============================================================================
   rev32 · THE CARD NEVER ACTUALLY GREW
   `.bnl-dcard__inner` carries height:100%, but its parent `.bnl-dcard` had no
   height of its own, so the percentage resolved against an auto-height box and
   collapsed straight back to content height. The item container grew to 349px
   in rev31; the visible card stayed at 178px, and the 171px left over is the
   gap. Giving the card a height makes the chain resolve, so the card fills the
   space instead of leaving it below itself.
============================================================================ */
#perf .bnl-rot__item .bnl-dcard{height:100%;}
#perf .bnl-rot__item{height:330px;}
#perf .bnl-rot__stage{height:352px;}
#perf .bnl-rot__shadow{top:330px;}
#perf .bnl-rot__nav{margin-top:0;}
/* the extra room is spent on the content, not left as air inside the card */
#perf .bnl-rot__item .bnl-dcard__body{padding:20px 20px 20px;gap:2px;}
#perf .bnl-rot__item .bnl-dcard__hook{margin-bottom:14px;}
#perf .bnl-rot__item .bnl-dcard__cta{margin-top:auto;min-height:46px;}
@media (min-width:820px){
  #perf .bnl-rot__item{height:430px;}
#perf .bnl-rot__stage{height:456px;}
#perf .bnl-rot__shadow{top:430px;}
#perf .bnl-rot__item .bnl-dcard__body{padding:26px 26px 24px;}
}
/* ============================================================================
   rev34 · THE BULLETS WERE ALREADY WRITTEN
   Three to four points per card exist in the markup and have been hidden on
   anything under 860px since the cards were too short to hold them. They are
   331px now, so they come back — the first two on a phone, all of them on
   desktop, with the CTA still pinned to the bottom edge.
============================================================================ */
#perf .bnl-rot__item .bnl-dcard__list{
  display:block;list-style:none;padding:0;margin:8px 0 12px;
  font-size:11.6px;line-height:1.32;color:#B9C0C4;
}
#perf .bnl-rot__item .bnl-dcard__list li{
  position:relative;padding:6px 0 6px 15px;
  border-top:1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}
#perf .bnl-rot__item .bnl-dcard__list li:first-child{border-top:0;padding-top:2px;}
/* the marker takes the path's own accent, so each card is keyed by its light */
#perf .bnl-rot__item .bnl-dcard__list li::before{
  content:"";position:absolute;left:2px;top:calc(0.66em + 6px);
  width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.9;
  box-shadow:0 0 8px -1px currentColor;
}
#perf .bnl-rot__item .bnl-dcard__list li:first-child::before{top:calc(0.66em + 2px);}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:none;}
@media (min-width:820px){
  #perf .bnl-rot__item .bnl-dcard__list{font-size:12.8px;margin:10px 0 14px;}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:list-item;}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+5){display:none;}
}
/* the bullet text stays neutral; only the marker carries the accent */
#perf .bnl-rot__item .bnl-dcard__list li{color:#B9C0C4;}
/* ============================================================================
   rev34 · THE VERB STOPS BLENDING IN
   Each verb was a flat fill of the path's own accent sitting on a card tinted
   with that same accent — teal on teal, pink on pink. Value and hue both too
   close, so the headline sank into its own background.

   Two changes. The verb now runs a gradient from near-white through the accent,
   so the first word reads at full contrast and the colour arrives underneath
   it. And the second word is set in the display face at a heavier weight with
   tighter tracking, so the two halves separate by form as well as by tone.
============================================================================ */
#perf .bnl-rot__item .bnl-dcard__verb{
  font-size:clamp(25px,6.6vw,34px);
  letter-spacing:-.055em;
  line-height:.94;
  -webkit-text-fill-color:transparent;
  background-clip:text;-webkit-background-clip:text;
  background-image:linear-gradient(96deg,
    #FFFFFF 0%, #FFFFFF 26%,
    color-mix(in srgb, currentColor 62%, #FFFFFF) 48%,
    currentColor 76%,
    color-mix(in srgb, currentColor 78%, #000000) 100%);
  background-size:190% 100%;
  filter:drop-shadow(0 1px 10px color-mix(in srgb, currentColor 34%, transparent));
}
@media (prefers-reduced-motion:no-preference){
  #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb{
    animation:bnl-grad-drift 11s ease-in-out infinite;
  }
}
/* the two words get different weight so the lockup has an internal rhythm */
#perf .bnl-rot__item .bnl-dcard__verb span:first-child{font-weight:500;letter-spacing:-.03em;}
#perf .bnl-rot__item .bnl-dcard__verb span:last-child{font-weight:800;}
/* the rule under it becomes a lit bar rather than a fade */
#perf .bnl-rot__item .bnl-dcard__rule{
  height:2.5px;width:64px;
  background:linear-gradient(90deg, currentColor 0%, currentColor 42%, transparent 100%);
  box-shadow:0 0 12px -2px currentColor;
}
/* and the hook line lifts off the accent wash */
#perf .bnl-rot__item .bnl-dcard__hook{
  color:#FFFFFF;font-size:13.2px;line-height:1.26;margin-bottom:4px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
/* card ground cools slightly so an accent headline has something to sit on */
#perf .bnl-rot__item .bnl-dcard__inner{background:#101214;}
/* roofline feature variants, cloned from the home accents */
.bnl-dcard--app .bnl-dcard__login{
    display:block;margin-top:10px;text-align:center;
    font-family:var(--font-heading-proposed);font-size:11.5px;font-weight:600;
    color:var(--color-primary);text-decoration:none;
  }
.bnl-dcard--app .bnl-dcard__login:hover{text-decoration:underline;}
.bnl-dcard--invisible .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#0d1a1d 46%,#101010 100%);
}
.bnl-dcard--build .bnl-dcard__inner{
  background:linear-gradient(158deg,#2e0620 0%,#1d0d16 46%,#101010 100%);
}
.bnl-dcard--sealed .bnl-dcard__inner{
  background:linear-gradient(158deg,#331904 0%,#1f1409 46%,#101010 100%);
}
.bnl-dcard--app .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#1a0d28 42%,#2b0722 72%,#101010 100%);
}
.bnl-dcard--invisible .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 48%, var(--color-border));}
.bnl-dcard--invisible .bnl-dcard__verb,
.bnl-page--products-roofline .bnl-dcard--invisible .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--invisible .bnl-dcard__ic,
.bnl-page--products-roofline .bnl-dcard--invisible .bnl-dcard__rule{color:var(--color-primary);}
.bnl-dcard--build .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 48%, var(--color-border));}
.bnl-dcard--build .bnl-dcard__verb,
.bnl-page--products-roofline .bnl-dcard--build .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--build .bnl-dcard__ic,
.bnl-page--products-roofline .bnl-dcard--build .bnl-dcard__rule{color:var(--color-pink);}
.bnl-dcard--sealed .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 48%, var(--color-border));}
.bnl-dcard--sealed .bnl-dcard__verb,
.bnl-page--products-roofline .bnl-dcard--sealed .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--sealed .bnl-dcard__ic,
.bnl-page--products-roofline .bnl-dcard--sealed .bnl-dcard__rule{color:var(--color-orange);}
.bnl-dcard--app .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 52%, var(--color-primary));}
.bnl-dcard--app .bnl-dcard__verb{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  color:var(--color-pink);-webkit-text-fill-color:transparent;
}
.bnl-dcard--app .bnl-dcard__who,
.bnl-page--products-roofline .bnl-dcard--app .bnl-dcard__ic{color:var(--color-primary);}
.bnl-dcard--app .bnl-dcard__rule{background:var(--gradient-brand);}
.bnl-dcard--invisible  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal);}
.bnl-dcard--build .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-pink);}
.bnl-dcard--sealed    .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 0 48px -12px color-mix(in srgb, var(--color-orange) 55%, transparent);}
.bnl-dcard--app  .bnl-dcard__inner{box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), var(--glow-ambient-teal), var(--glow-ambient-pink);}
.bnl-dcard--app .bnl-dcard__rule{
    background-size:230% 100%;
    animation:bnl-grad-drift 9s ease-in-out infinite;
  }
.bnl-dcard--invisible    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 72%, var(--color-border));}
.bnl-dcard--build .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 72%, var(--color-border));}
.bnl-dcard--sealed    .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 72%, var(--color-border));}
.bnl-dcard--app  .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 62%, var(--color-primary));}
.bnl-dcard--invisible   {--bnl-cardfloor:color-mix(in srgb, var(--color-primary) 22%, transparent);}
.bnl-dcard--build{--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 22%, transparent);}
.bnl-dcard--sealed   {--bnl-cardfloor:color-mix(in srgb, var(--color-orange) 20%, transparent);}
.bnl-dcard--app {--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 20%, transparent);}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:list-item;}
#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+4){display:none;}
@media (min-width:820px){#perf .bnl-rot__item .bnl-dcard__list li:nth-child(n+4){display:list-item;}}
#perf .bnl-rot__item .bnl-dcard__body{padding-bottom:18px;}



/* =====================================================================
   REV 27 — HOMEPAGE-STANDARD CONFORMANCE
   BRI-278 (Bricolage tracking table) · BRI-281 (tap-target floor, H1)
   Appended last: wins the cascade at equal specificity.
   [WP HAND-OFF] the :root tokens below belong in tokens.css — Mateo.
===================================================================== */
.bnl-page--products-roofline{
  /* BRI-278 §1 — canonical token name, old name kept as an alias */
  --font-display:'Bricolage Grotesque','Sora',var(--font-heading),sans-serif;
  --font-heading-proposed:var(--font-display);

  /* BRI-278 §4 — Bricolage sets wider than Sora; these are the spec values */
  --track-hero:-.05em;
  --track-section:-.048em;
  --track-statement:-.052em;
  --track-verb:-.05em;
  --track-lockup:-.036em;
  --track-kicker:.22em;

  /* BRI-281 §1 — touch floor */
  --tap-min:44px;

  /* BRI-278 §3 — declared explicitly. It is the CSS default, but a theme
     reset setting `none` would silently kill the opsz axis this face was
     chosen for, and that failure is invisible in review. */
  font-optical-sizing:auto;
}

/* ---- Tracking retune ------------------------------------------------ */
.bnl-page--products-roofline .bnl-hero__title{letter-spacing:var(--track-hero);}
.bnl-page--products-roofline .bnl-heading--section,
.bnl-page--products-roofline .bnl-heading{letter-spacing:var(--track-section);}
.bnl-page--products-roofline .bnl-pro-band__title,
.bnl-page--products-roofline .bnl-sp__title,
.bnl-page--products-roofline .bnl-cmp__title{letter-spacing:var(--track-statement);}
.bnl-page--products-roofline .bnl-dcard__title,
.bnl-page--products-roofline .bnl-rot__title,
.bnl-page--products-roofline .bnl-broll__head,
.bnl-page--products-roofline h3{letter-spacing:var(--track-verb);}

/* Kicker treatment was dead: `.bnl-page--products-roofline .bnl-hero__eyebrow`
   (0,2,0) was beating the intended `.bnl-hero__eyebrow` (0,1,0) .22em rule,
   so every eyebrow rendered at .05em. Restored at matching specificity. */
.bnl-page--products-roofline .bnl-hero__eyebrow,
.bnl-page--products-roofline .bnl-eyebrow,
.bnl-page--products-roofline .bnl-sc__kicker,
.bnl-page--products-roofline .bnl-acc__kicker,
.bnl-page--products-roofline .bnl-kicker__t{letter-spacing:var(--track-kicker);}

/* ---- Tap targets (BRI-281 §1) --------------------------------------- */
/* Touch area only. Padding and min-height do the work; the ink stays put. */
.bnl-page--products-roofline .bnl-crumbs a,
.bnl-page--products-roofline .bnl-crumbs [aria-current],
.bnl-page--products-roofline .bnl-link,
.bnl-page--products-roofline .bnl-stats__note{
  display:inline-flex;align-items:center;
  min-height:var(--tap-min);
}
.bnl-page--products-roofline .bnl-eco__list a,
.bnl-page--products-roofline .bnl-eco__list span{
  display:inline-flex;align-items:center;
  min-height:var(--tap-min);
}
/* The ecosystem list is `.bnl-eco-links`, and the carousel pills and card
   verbs are held by #perf rules that outrank a page-class selector — these
   three have to be matched at their own specificity to take effect. */
.bnl-page--products-roofline .bnl-eco-links a{
  display:inline-flex;align-items:center;
  min-height:var(--tap-min);
}
#perf .bnl-rot__dot{
  min-width:var(--tap-min);min-height:var(--tap-min);
}
#perf .bnl-rot__item .bnl-dcard__verb{letter-spacing:var(--track-verb);}
/* Breadcrumb row keeps its visual rhythm despite the taller targets */
.bnl-page--products-roofline .bnl-crumbs{line-height:1;}

/* ---- Coming Soon (no live page for Deck & Dock / Flood) ------------- */
.bnl-page--products-roofline .bnl-eco__soon{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--tap-min);
  color:var(--color-text-muted);cursor:default;
}
.bnl-page--products-roofline .bnl-eco__soon em{
  font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:var(--track-kicker);text-transform:uppercase;
  color:var(--color-primary);opacity:.75;
  border:1px solid currentColor;border-radius:var(--radius-pill);
  padding:2px 8px;
}
.bnl-page--products-roofline .bnl-eco__hot--soon{
  position:absolute;cursor:default;
}

/* ---- Missing keyframes -------------------------------------------- */
/* `bnl-card-float`, `bnl-card-shadow` and `bnl-grad-drift` were referenced
   in three places but defined nowhere — deleted alongside the reduced-motion
   guards above, which is why the guards were left orphaned. Restored from
   their call sites: the card transform already reads translateY(var(--bnl-fy)),
   the shadow is the ellipse the card floats over, and grad-drift runs on
   elements carrying background-size:230% 100%. All three sit inside the
   restored prefers-reduced-motion guards, so they stay off when asked. */
@property --bnl-fy{syntax:'<length>';inherits:false;initial-value:0px;}

@keyframes bnl-card-float{
  0%,100%{--bnl-fy:0px;}
  50%    {--bnl-fy:-7px;}
}
@keyframes bnl-card-shadow{
  0%,100%{transform:scale(1);opacity:1;}
  50%    {transform:scale(.93);opacity:.72;}
}
@keyframes bnl-grad-drift{
  0%,100%{background-position:0% 50%;}
  50%    {background-position:100% 50%;}
}