/* [WP HAND-OFF] delete this block once the theme enqueues tokens.css — the stand-ins below will otherwise override it silently.
   =====================================================================
   RENDERED-PREVIEW TOKEN STAND-INS — for visualization only.
   Real values live in tokens.css v1.1 (Mateo's file, source of truth).
   Palette/spacing here mirrors the compare-tool + Field Report styling.
   Delete this whole block when previewing inside the real preview folder.
===================================================================== */
:root{
  --color-primary:#00A9B5; --color-pink:#E3056B; --color-orange:#FA6A1E;
  --color-white:#FFFFFF; --color-black-true:#000000;
  --color-bg:#0A0A0A; --color-bg-elevated:#161616; --color-bg-section:#101014;
  --color-text:#F5F5F5; --color-text-muted:#B8B8B8;
  --color-border:#3A3A3A; --color-fill-subtle:#1E1E1E; --color-error:#FF4D5E;
  --gradient-brand:linear-gradient(135deg,#00A9B5 0%,#E3056B 100%);
  --font-heading:'Chakra Petch','Rajdhani',sans-serif;
  --font-body:'Inter','Helvetica Neue',sans-serif;
  --font-weight-semibold:600; --font-weight-bold:700;
  --text-small:13px; --text-body:16px;
  --text-h1:clamp(32px,5vw,48px); --text-h2:clamp(24px,3.6vw,34px); --text-h3:19px;
  --line-height-body:1.6; --line-height-heading:1.18; --letter-spacing-heading:.05em;
  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-ml:24px;
  --space-lg:32px; --space-xl:64px; --space-2xl:96px;
  --radius-sm:6px; --radius-md:12px; --radius-pill:999px;
  --width-content:1100px;
  --shadow-sm:0 10px 30px rgba(0,0,0,.4);
  --shadow-glow-teal:0 0 28px rgba(0,169,181,.45);
  --shadow-glow-pink:0 0 28px rgba(227,5,107,.45);
  --focus-ring:2px solid #E3056B; --focus-ring-offset:2px;
  /* rev2 - display face, matching home rev34 token architecture (BRI-266).
     Mateo: promote these two lines into tokens.css, then delete this block. */
  --font-display:'Bricolage Grotesque','Sora',var(--font-heading),sans-serif;
  --font-heading-proposed:var(--font-display);
}

/* Stand-ins for what the theme provides — NOT part of any page's output */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { background: var(--color-bg, #0A0A0A); }
  body {
    overflow-x: clip;
  }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--line-height-body);
  }
  
  

  
  
  .preview-note__todo { display: block; margin-top: var(--space-xs); }

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

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

/* ---- Ecosystem text links (crawlable, descriptive anchors) ---- */
.bnl-page--products-landscape .bnl-eco-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  .bnl-page--products-landscape { padding-bottom: 76px; }
  .bnl-page--products-landscape .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-landscape .bnl-sticky-cta .bnl-btn { display: block; }
}

.bnl-page--products-landscape .bnl-wide-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin-top: var(--space-lg);
}
.bnl-page--products-landscape .bnl-section {
  padding: var(--space-lg) var(--space-md);
}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-section__inner {
  max-width: var(--width-content);
  margin: 0 auto;
}
.bnl-page--products-landscape .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-landscape .bnl-heading--section {
  font-size: var(--text-h2);
}
.bnl-page--products-landscape .bnl-lede {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}

/* ---- Buttons ---- */
.bnl-page--products-landscape .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-landscape .bnl-btn--primary {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-pink);
  box-shadow: var(--glow-ambient-pink);
}
.bnl-page--products-landscape .bnl-btn--primary:hover {
  box-shadow: var(--shadow-glow-pink);
  background: color-mix(in srgb, var(--color-pink) 12%, transparent);
}
.bnl-page--products-landscape .bnl-btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.bnl-page--products-landscape .bnl-btn--secondary:hover {
  box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-landscape .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-landscape .bnl-btn--ghost:hover {
  box-shadow: var(--shadow-glow-pink);
}
/* PROPOSAL (tokens v1.2): larger section headings, less gradient */
.bnl-page--products-landscape .bnl-heading--section {
  font-size: clamp(30px, 4.6vw, 46px);
}
/* shared glow frame */
.bnl-page--products-landscape .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);
}
/* photo hairline guards (color-wash + temperature stages tint per selection below) */
.bnl-page--products-landscape .bnl-temp__stage,
.bnl-page--products-landscape .bnl-cw__stage {
  border: 1.5px solid var(--color-border);
  transition: border-color .45s ease, box-shadow .45s ease;
}
/* By Day / By Night — framed with the brand glow */
.bnl-page--products-landscape .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-landscape .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-landscape .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-landscape .bnl-ba-slider__top {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.bnl-page--products-landscape .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-landscape .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-landscape .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-landscape .bnl-ba-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 64px; height: 480px;
  background: transparent;
}
.bnl-page--products-landscape .bnl-ba-slider__range::-moz-range-thumb {
  width: 64px; height: 480px; border: 0; background: transparent;
}
.bnl-page--products-landscape .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-landscape .bnl-ba-slider__tag--day { left: var(--space-md); }
.bnl-page--products-landscape .bnl-ba-slider__tag--night { right: var(--space-md); }
.bnl-page--products-landscape .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-landscape .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-landscape .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-landscape .bnl-featlist { grid-template-columns: 1fr 1fr; }
}
.bnl-page--products-landscape .bnl-featlist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.bnl-page--products-landscape .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-landscape .bnl-featlist b {
  display: block;
  font-family: var(--font-heading-proposed);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-frame-card > :last-child { margin-bottom: 0; }
/* framed More-Than split */
.bnl-page--products-landscape #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-landscape #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-landscape #specs .bnl-table__head {
  font-size: var(--text-h3);
}
.bnl-page--products-landscape #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-landscape #specs tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.bnl-page--products-landscape #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-landscape .bnl-compare .bnl-table__cell--label,
  .bnl-page--products-landscape .bnl-compare .bnl-table__head:first-child {
    width: 36%;
    white-space: normal;
  }
}
/* stats extras */
.bnl-page--products-landscape .bnl-stats__note {
  display: block;
  margin-top: 6px;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: underline;
}
.bnl-page--products-landscape .bnl-stats__note:hover { color: var(--color-primary); }
/* animated tap hint on the ecosystem map */
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-eco__hint { animation: none; left: 50%; transform: translateX(-50%); }
  .bnl-page--products-landscape .bnl-eco__hint span { animation: none; }
}
.bnl-page--products-landscape .bnl-btn:focus-visible,
.bnl-page--products-landscape .bnl-link:focus-visible,
.bnl-page--products-landscape .bnl-faq__q:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.bnl-page--products-landscape .bnl-link {
  color: var(--color-primary);
}
.bnl-page--products-landscape .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-landscape .bnl-hero {
  padding: 0;
}
.bnl-page--products-landscape .bnl-hero__media-frame {
  position: relative;
  height: min(64vh, 600px);
  overflow: hidden;
}
.bnl-page--products-landscape .bnl-hero__bg--video { object-position: center 42%; }
.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-landscape .bnl-hero__bg--video { display: none; }
}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-hero__content {
    margin-top: -76px;
    padding: 0 var(--space-lg) var(--space-xl);
  }
}
.bnl-page--products-landscape .bnl-hero__inner { max-width: 720px; }
.bnl-page--products-landscape .bnl-hero .bnl-btn-row { justify-content: center; }
.bnl-page--products-landscape .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-landscape .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-landscape .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-landscape .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-landscape .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-landscape .bnl-split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .bnl-page--products-landscape .bnl-split { grid-template-columns: 1fr 1fr; }
}
.bnl-page--products-landscape .bnl-split__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ---- Occasion chips ---- */
.bnl-page--products-landscape .bnl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
}
.bnl-page--products-landscape .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-landscape .bnl-punch p {
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs);
}
.bnl-page--products-landscape .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-landscape .bnl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-lg) var(--space-md);
  text-align: center;
}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-sr {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.bnl-page--products-landscape .bnl-stats__item { cursor: default; outline: none; }
.bnl-page--products-landscape .bnl-stats__num {
  counter-reset: bnlstat var(--bnl-statn);
}
.bnl-page--products-landscape .bnl-stats__digits::before {
  content: counter(bnlstat);
}
.bnl-page--products-landscape .bnl-stats__item:hover .bnl-stats__num,
.bnl-page--products-landscape .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-landscape .bnl-stats__item:hover .bnl-stats__num,
  .bnl-page--products-landscape .bnl-stats__item:focus-visible .bnl-stats__num { animation: none; }
}

/* ---- Compare tool feature band ---- */
.bnl-page--products-landscape .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-landscape button.bnl-compare-cta__chip {
  font: inherit;
  cursor: pointer;
}
.bnl-page--products-landscape button.bnl-compare-cta__chip:hover {
  box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-landscape .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-landscape .bnl-compare-cta__chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: var(--text-h3);
}
.bnl-page--products-landscape .bnl-compare-cta__chip--us {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-teal);
}
.bnl-page--products-landscape .bnl-compare-cta__chip--them {
  color: var(--color-text-muted);
  border-style: dashed;
}
.bnl-page--products-landscape .bnl-compare-cta__x {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
}
.bnl-page--products-landscape .bnl-compare-cta__fine {
  margin-top: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ---- Apple-style closer ---- */
.bnl-page--products-landscape .bnl-closer {
  position: relative;
  min-height: min(64vh, 560px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-2xl);
  text-align: center;
  overflow: hidden;
  padding: var(--space-2xl) var(--space-md);
}
.bnl-page--products-landscape .bnl-closer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bnl-page--products-landscape .bnl-closer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, var(--color-bg) 0%, transparent 35%),
    linear-gradient(180deg, var(--color-bg) 0%, transparent 35%),
    color-mix(in srgb, var(--color-bg) 45%, transparent);
}
.bnl-page--products-landscape .bnl-closer__content {
  position: relative;
  z-index: 2;
}
.bnl-page--products-landscape .bnl-closer__title {
  font-family: var(--font-heading-proposed);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-lg);
}

/* ---- Premium motion: CSS-only scroll reveal (progressive enhancement) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bnl-page--products-landscape .bnl-card,
    .bnl-page--products-landscape .bnl-gallery__figure,
    .bnl-page--products-landscape .bnl-split__img,
    .bnl-page--products-landscape .bnl-stats > div,
    .bnl-page--products-landscape .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-landscape .bnl-cw__radio {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.bnl-page--products-landscape .bnl-cw__stage {
  position: relative;
  aspect-ratio: 459 / 246;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-lg);
}
.bnl-page--products-landscape .bnl-cw__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}
.bnl-page--products-landscape .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-landscape .bnl-cw__nav:hover { border-color: var(--color-primary); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-landscape .bnl-cw__nav--prev { left: var(--space-md); }
.bnl-page--products-landscape .bnl-cw__nav--next { right: var(--space-md); }
.bnl-page--products-landscape .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-landscape .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-landscape .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-landscape .bnl-cw__sw:hover .bnl-cw__dot { transform: scale(1.12); }

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

/* ---- Temperature preset cards (real photos, pure CSS) ---- */
.bnl-page--products-landscape .bnl-temp__body {
  max-width: 860px;
  margin: var(--space-lg) auto 0;
}
.bnl-page--products-landscape .bnl-temp__stage {
  position: relative;
  aspect-ratio: 460 / 406;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.bnl-page--products-landscape .bnl-temp__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.bnl-page--products-landscape .bnl-temp__info {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bnl-page--products-landscape .bnl-temp__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  padding: 8px 16px;
  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);
  color: var(--color-text);
}
.bnl-page--products-landscape .bnl-temp__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-xl) var(--space-md) var(--space-md);
  background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 88%, transparent) 0%, transparent 100%);
}
.bnl-page--products-landscape .bnl-temp__cap b {
  display: block;
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.bnl-page--products-landscape .bnl-temp__cap span {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
.bnl-page--products-landscape .bnl-temp__picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.bnl-page--products-landscape .bnl-temp__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 82px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.bnl-page--products-landscape .bnl-temp__opt:hover { border-color: var(--color-primary); color: var(--color-text); }
.bnl-page--products-landscape .bnl-temp__dot {
  width: 18px; height: 18px;
  border-radius: var(--radius-pill);
  background: var(--dot);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dot) 70%, transparent);
}

/* Rev 24: the temperature stage frame glows in the selected kelvin tone */
.bnl-page--products-landscape #t-2000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #E8951D 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #E8951D 34%, transparent), 0 0 70px color-mix(in srgb, #E8951D 15%, transparent); }
.bnl-page--products-landscape #t-3000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #F2C57F 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #F2C57F 34%, transparent), 0 0 70px color-mix(in srgb, #F2C57F 15%, transparent); }
.bnl-page--products-landscape #t-4000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #F6E7C8 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #F6E7C8 34%, transparent), 0 0 70px color-mix(in srgb, #F6E7C8 15%, transparent); }
.bnl-page--products-landscape #t-5000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #DCE8F5 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #DCE8F5 34%, transparent), 0 0 70px color-mix(in srgb, #DCE8F5 15%, transparent); }
.bnl-page--products-landscape #t-7000:checked ~ .bnl-temp__body .bnl-temp__stage { border-color: color-mix(in srgb, #9CC4EE 80%, var(--color-border)); box-shadow: 0 0 24px color-mix(in srgb, #9CC4EE 34%, transparent), 0 0 70px color-mix(in srgb, #9CC4EE 15%, transparent); }
.bnl-page--products-landscape #t-2000:checked ~ .bnl-temp__body .bnl-temp__img--2000 { opacity: 1; }
.bnl-page--products-landscape #t-2000:checked ~ .bnl-temp__body .bnl-temp__info--2000 { display: block; }
.bnl-page--products-landscape #t-2000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-2000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-landscape #t-2000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-2000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #t-3000:checked ~ .bnl-temp__body .bnl-temp__img--3000 { opacity: 1; }
.bnl-page--products-landscape #t-3000:checked ~ .bnl-temp__body .bnl-temp__info--3000 { display: block; }
.bnl-page--products-landscape #t-3000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-3000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-landscape #t-3000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-3000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #t-4000:checked ~ .bnl-temp__body .bnl-temp__img--4000 { opacity: 1; }
.bnl-page--products-landscape #t-4000:checked ~ .bnl-temp__body .bnl-temp__info--4000 { display: block; }
.bnl-page--products-landscape #t-4000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-4000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-landscape #t-4000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-4000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #t-5000:checked ~ .bnl-temp__body .bnl-temp__img--5000 { opacity: 1; }
.bnl-page--products-landscape #t-5000:checked ~ .bnl-temp__body .bnl-temp__info--5000 { display: block; }
.bnl-page--products-landscape #t-5000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-5000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-landscape #t-5000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-5000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #t-7000:checked ~ .bnl-temp__body .bnl-temp__img--7000 { opacity: 1; }
.bnl-page--products-landscape #t-7000:checked ~ .bnl-temp__body .bnl-temp__info--7000 { display: block; }
.bnl-page--products-landscape #t-7000:checked ~ .bnl-temp__body .bnl-temp__picker label[for="t-7000"] { border-color: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-glow-teal); }
.bnl-page--products-landscape #t-7000:focus-visible ~ .bnl-temp__body .bnl-temp__picker label[for="t-7000"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }


/* Rev 24: the stage frame glows in the selected wash color */
.bnl-page--products-landscape #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-landscape #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-landscape #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-landscape #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-landscape #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-landscape #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-landscape #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-landscape #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-landscape #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-landscape #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-landscape #cwc-red:checked ~ .bnl-cw__stage .bnl-cw__img--red { opacity: 1; }
.bnl-page--products-landscape #cwc-red:checked ~ .bnl-cw__stage .bnl-cw__nav--for-red { display: grid; }
.bnl-page--products-landscape #cwc-red:checked ~ .bnl-cw__swatches label[for="cwc-red"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-red:focus-visible ~ .bnl-cw__swatches label[for="cwc-red"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-orange:checked ~ .bnl-cw__stage .bnl-cw__img--orange { opacity: 1; }
.bnl-page--products-landscape #cwc-orange:checked ~ .bnl-cw__stage .bnl-cw__nav--for-orange { display: grid; }
.bnl-page--products-landscape #cwc-orange:checked ~ .bnl-cw__swatches label[for="cwc-orange"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-orange:focus-visible ~ .bnl-cw__swatches label[for="cwc-orange"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-yellow:checked ~ .bnl-cw__stage .bnl-cw__img--yellow { opacity: 1; }
.bnl-page--products-landscape #cwc-yellow:checked ~ .bnl-cw__stage .bnl-cw__nav--for-yellow { display: grid; }
.bnl-page--products-landscape #cwc-yellow:checked ~ .bnl-cw__swatches label[for="cwc-yellow"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-yellow:focus-visible ~ .bnl-cw__swatches label[for="cwc-yellow"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-green:checked ~ .bnl-cw__stage .bnl-cw__img--green { opacity: 1; }
.bnl-page--products-landscape #cwc-green:checked ~ .bnl-cw__stage .bnl-cw__nav--for-green { display: grid; }
.bnl-page--products-landscape #cwc-green:checked ~ .bnl-cw__swatches label[for="cwc-green"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-green:focus-visible ~ .bnl-cw__swatches label[for="cwc-green"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-teal:checked ~ .bnl-cw__stage .bnl-cw__img--teal { opacity: 1; }
.bnl-page--products-landscape #cwc-teal:checked ~ .bnl-cw__stage .bnl-cw__nav--for-teal { display: grid; }
.bnl-page--products-landscape #cwc-teal:checked ~ .bnl-cw__swatches label[for="cwc-teal"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-teal:focus-visible ~ .bnl-cw__swatches label[for="cwc-teal"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-cyan:checked ~ .bnl-cw__stage .bnl-cw__img--cyan { opacity: 1; }
.bnl-page--products-landscape #cwc-cyan:checked ~ .bnl-cw__stage .bnl-cw__nav--for-cyan { display: grid; }
.bnl-page--products-landscape #cwc-cyan:checked ~ .bnl-cw__swatches label[for="cwc-cyan"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-cyan:focus-visible ~ .bnl-cw__swatches label[for="cwc-cyan"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-blue:checked ~ .bnl-cw__stage .bnl-cw__img--blue { opacity: 1; }
.bnl-page--products-landscape #cwc-blue:checked ~ .bnl-cw__stage .bnl-cw__nav--for-blue { display: grid; }
.bnl-page--products-landscape #cwc-blue:checked ~ .bnl-cw__swatches label[for="cwc-blue"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-blue:focus-visible ~ .bnl-cw__swatches label[for="cwc-blue"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-indigo:checked ~ .bnl-cw__stage .bnl-cw__img--indigo { opacity: 1; }
.bnl-page--products-landscape #cwc-indigo:checked ~ .bnl-cw__stage .bnl-cw__nav--for-indigo { display: grid; }
.bnl-page--products-landscape #cwc-indigo:checked ~ .bnl-cw__swatches label[for="cwc-indigo"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-indigo:focus-visible ~ .bnl-cw__swatches label[for="cwc-indigo"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-purple:checked ~ .bnl-cw__stage .bnl-cw__img--purple { opacity: 1; }
.bnl-page--products-landscape #cwc-purple:checked ~ .bnl-cw__stage .bnl-cw__nav--for-purple { display: grid; }
.bnl-page--products-landscape #cwc-purple:checked ~ .bnl-cw__swatches label[for="cwc-purple"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #cwc-purple:focus-visible ~ .bnl-cw__swatches label[for="cwc-purple"] { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bnl-page--products-landscape #cwc-pink:checked ~ .bnl-cw__stage .bnl-cw__img--pink { opacity: 1; }
.bnl-page--products-landscape #cwc-pink:checked ~ .bnl-cw__stage .bnl-cw__nav--for-pink { display: grid; }
.bnl-page--products-landscape #cwc-pink:checked ~ .bnl-cw__swatches label[for="cwc-pink"] { color: var(--color-text); }
.bnl-page--products-landscape #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-landscape #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-landscape .bnl-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.bnl-page--products-landscape .bnl-quote__stars {
  color: var(--color-orange);
  letter-spacing: .15em;
  font-size: var(--text-small);
}
.bnl-page--products-landscape .bnl-quote blockquote {
  margin: 0;
  font-style: italic;
  color: var(--color-text);
}
.bnl-page--products-landscape .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);
}

/* ---- Before & After ---- */
.bnl-page--products-landscape .bnl-ba {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bnl-page--products-landscape .bnl-ba figure { margin: 0; }
.bnl-page--products-landscape .bnl-ba img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.bnl-page--products-landscape .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-landscape .bnl-grid {
  display: grid;
  gap: var(--space-ml);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bnl-page--products-landscape .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-landscape .bnl-card:hover {
  box-shadow: var(--shadow-glow-teal);
  transform: translateY(-2px);
}
.bnl-page--products-landscape .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-landscape .bnl-card__body {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Spec + comparison tables ---- */
.bnl-page--products-landscape .bnl-table-scroll {
  overflow-x: auto;
}
.bnl-page--products-landscape .bnl-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.bnl-page--products-landscape .bnl-table__cell,
.bnl-page--products-landscape .bnl-table__head {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.bnl-page--products-landscape .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-landscape .bnl-table__cell--label {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.bnl-page--products-landscape .bnl-table__cell {
  color: var(--color-text-muted);
}
.bnl-page--products-landscape .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-landscape .bnl-compare .bnl-table__head {
  white-space: normal;
  text-align: center;
  vertical-align: middle;
  min-width: 170px;
}
.bnl-page--products-landscape .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-landscape .bnl-compare .bnl-table__cell--brand {
  text-align: center;
}
.bnl-page--products-landscape .bnl-compare .bnl-table__cell--brand {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.bnl-page--products-landscape .bnl-compare__foot {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

/* ---- Process steps ---- */
.bnl-page--products-landscape .bnl-steps {
  list-style: none;
  counter-reset: bnl-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-ml);
}
.bnl-page--products-landscape .bnl-steps__item {
  counter-increment: bnl-step;
  position: relative;
  padding-left: var(--space-xl);
  color: var(--color-text-muted);
}
.bnl-page--products-landscape .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-landscape .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-landscape .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-landscape .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-landscape .bnl-pro-band__body {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Gallery ---- */
.bnl-page--products-landscape .bnl-gallery {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 0;
}
.bnl-page--products-landscape .bnl-gallery__figure {
  margin: 0;
}
.bnl-page--products-landscape .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-landscape .bnl-tech {
  display: grid;
  justify-items: center;
}
.bnl-page--products-landscape .bnl-tech__media-wrap {
  position: relative;
  max-width: 820px;
  width: 100%;
}
.bnl-page--products-landscape .bnl-tech__media-wrap::before {
  content: "";
  position: absolute;
  inset: 6% 8%;
  background: var(--gradient-brand);
  filter: blur(70px);
  opacity: 0.22;
}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-eco__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: block;
}
.bnl-page--products-landscape .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-landscape .bnl-eco__hot:hover,
.bnl-page--products-landscape .bnl-eco__hot:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-teal);
}

/* ---- FAQ ---- */
.bnl-page--products-landscape .bnl-faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
}
.bnl-page--products-landscape .bnl-faq__q {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.bnl-page--products-landscape .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-landscape .bnl-faq__a {
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 0;
}

/* ---- CTA band ---- */
.bnl-page--products-landscape .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-landscape .bnl-cta-band::before { content: none; }
.bnl-page--products-landscape .bnl-cta-band .bnl-section__inner {
  position: relative;
}
.bnl-page--products-landscape .bnl-cta-band .bnl-btn-row {
  justify-content: center;
}
.bnl-page--products-landscape .bnl-cta-band .bnl-lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

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

/* section seam treatment - tighten the join and blend the two backgrounds */
  .bnl-page--products-landscape .bnl-bridge-b{position:relative;padding-bottom:34px;}
  .bnl-page--products-landscape .bnl-bridge-b::after{content:"";position:absolute;
    left:0;right:0;bottom:0;height:120px;pointer-events:none;
    background:linear-gradient(180deg,transparent 0%,
      color-mix(in srgb,var(--color-primary) 7%,transparent) 55%,
      color-mix(in srgb,var(--color-primary) 12%,transparent) 100%);}
  .bnl-page--products-landscape .bnl-bridge-t{position:relative;padding-top:34px;}
  .bnl-page--products-landscape .bnl-bridge-t::before{content:"";position:absolute;
    left:0;right:0;top:0;height:120px;pointer-events:none;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--color-primary) 12%,transparent) 0%,
      color-mix(in srgb,var(--color-primary) 5%,transparent) 45%,transparent 100%);}
  .bnl-page--products-landscape .bnl-bridge-t>*{position:relative;z-index:1;}
  .bnl-page--products-landscape .bnl-bridge-b>*{position:relative;z-index:1;}
  /* a hairline of colour right on the seam so the join reads deliberate */
  .bnl-page--products-landscape .bnl-bridge-b::before{content:"";position:absolute;
    left:12%;right:12%;bottom:0;height:1px;pointer-events:none;z-index:2;
    background:linear-gradient(90deg,transparent,
      color-mix(in srgb,var(--color-primary) 55%,transparent),transparent);}
  @media (max-width:720px){
    .bnl-page--products-landscape .bnl-bridge-b{padding-bottom:26px;}
    .bnl-page--products-landscape .bnl-bridge-t{padding-top:26px;}
  }

/* --- rev2 spacing pass (Austen, 2026-07-28) ---------------------------------
   The eyebrow is a hero component being reused inside sections, where it
   carried the hero's much larger bottom margin - which is the gap he saw
   between "Three Bulbs. Every Job." and the heading under it. Tightened, and
   given a short gradient rule so the eyebrow reads as attached to its heading
   rather than floating above it. ------------------------------------------ */
.bnl-page--products-landscape .bnl-section .bnl-hero__eyebrow{
  margin:0 0 .55rem;position:relative;padding-bottom:.5rem;}
.bnl-page--products-landscape .bnl-section .bnl-hero__eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:74px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#22C7EE,rgba(226,75,199,.85),transparent);}
.bnl-page--products-landscape .bnl-section .bnl-hero__eyebrow + .bnl-heading--section{
  margin-top:0;}
/* the lede sat a long way off whatever followed it */
.bnl-page--products-landscape .bnl-section .bnl-heading--section + .bnl-lede{margin-top:.9rem;}

/* soft seam so stacked dark sections do not butt together as a flat edge */
.bnl-page--products-landscape .bnl-section--alt{position:relative;}
.bnl-page--products-landscape .bnl-section--alt::before{
  content:"";position:absolute;left:0;right:0;top:0;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,199,238,.055),transparent 78%);}

/* rev2 - bnl-grad-drift, lifted verbatim from home rev34 (top level there).
   The card float and shadow keyframes are restored inline inside their
   @media (hover:none) blocks, exactly as rev34 has them. */
@keyframes bnl-grad-drift{
  0%,100%{background-position:0% 50%;}
  50%    {background-position:100% 50%;}
}

#wash .bnl-wash{margin-top:1.6rem;}
  #wash .bnl-wash__stage{position:relative;border-radius:18px;overflow:hidden;
    background:#04060b;border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 60px rgba(0,0,0,.55);line-height:0;
    cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
  #wash .bnl-wash__stage img{display:block;width:100%;height:auto;
    -webkit-user-drag:none;pointer-events:none;}

  #wash .bnl-wash__base{filter:grayscale(.94) brightness(.26) contrast(1.05);}

  #wash .bnl-wash__reveal{position:absolute;inset:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
    -webkit-mask-size:34% 100%;  mask-size:34% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:var(--pos) 50%; mask-position:var(--pos) 50%;
    animation:bnl-wash-sweep 7s linear infinite;}
  /* runs off-frame at both ends so the restart is invisible - a true loop,
     not a bounce, and fast enough to read as a light sweeping past */
  @keyframes bnl-wash-sweep{
    from{-webkit-mask-position:-30% 50%; mask-position:-30% 50%;}
    to  {-webkit-mask-position:130% 50%; mask-position:130% 50%;}
  }
  #wash .bnl-wash.is-manual .bnl-wash__reveal{animation:none;}

  /* the visible grab handle - this is what was missing in rev1 */
  #wash .bnl-wash__edge{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
    margin-left:-1px;pointer-events:none;opacity:.9;transition:opacity .3s ease;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.9),transparent);
    box-shadow:0 0 20px 4px rgba(255,255,255,.4);}
  #wash .bnl-wash:not(.is-manual) .bnl-wash__edge{opacity:0;}
  #wash .bnl-wash__grip{position:absolute;top:50%;left:var(--pos);
    width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;
    background:rgba(8,12,20,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.5);box-shadow:0 4px 22px rgba(0,0,0,.55);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:14px;letter-spacing:-1px;line-height:1;
    transition:transform .18s ease;}
  #wash .bnl-wash.is-drag .bnl-wash__grip{transform:scale(1.14);}

  /* keyboard / assistive only - never the primary control */
  #wash .bnl-wash__range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  #wash .bnl-wash__range:focus-visible{position:absolute;inset:auto auto 8px 50%;
    transform:translateX(-50%);width:70%;height:34px;clip:auto;margin:0;
    outline:2px solid #35CFC9;outline-offset:3px;}

  #wash .bnl-wash__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:9px;padding:.55rem 1rem;border-radius:999px;
    background:rgba(10,12,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.9rem;line-height:1;
    pointer-events:none;transition:opacity .3s ease;white-space:nowrap;}
  #wash .bnl-wash.is-manual .bnl-wash__hint{opacity:0;}
  #wash .bnl-wash__hint b{width:.5rem;height:.5rem;border-radius:50%;background:#35CFC9;
    box-shadow:0 0 10px #35CFC9;animation:bnl-wash-pulse 1.8s ease-in-out infinite;}
  @keyframes bnl-wash-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}

  /* colour selectors - real buttons now */
  #wash .bnl-wash__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;}
  #wash .bnl-wash__chip{display:inline-flex;align-items:center;gap:7px;padding:.46rem .85rem;
    border-radius:999px;border:1px solid rgba(255,255,255,.12);cursor:pointer;
    background:rgba(255,255,255,.03);font:inherit;font-size:.82rem;color:rgba(237,239,239,.72);
    transition:border-color .2s ease,color .2s ease,background .2s ease,transform .15s ease;}
  #wash .bnl-wash__chip:hover{border-color:var(--c);color:#fff;background:rgba(255,255,255,.07);}
  #wash .bnl-wash__chip:active{transform:scale(.96);}
  #wash .bnl-wash__chip[aria-pressed="true"]{border-color:var(--c);color:#fff;
    background:rgba(255,255,255,.09);box-shadow:0 0 16px -4px var(--c);}
  #wash .bnl-wash__chip i{width:.62rem;height:.62rem;border-radius:50%;background:var(--c);
    box-shadow:0 0 10px var(--c);font-style:normal;flex:0 0 auto;}
  #wash .bnl-wash__chip:focus-visible{outline:2px solid #35CFC9;outline-offset:2px;}

  /* ---- MOBILE: the strip is 2.756:1, so a full-width fit is only ~130px tall.
         Give the stage real height and pan the palms through a fixed light. ---- */
  @media (max-width:720px){
    #wash .bnl-wash__stage{height:min(56vh,470px);cursor:grab;}
    #wash .bnl-wash__stage img{height:100%;width:100%;object-fit:cover;
      object-position:var(--pos) 50%;}
    #wash .bnl-wash__base{animation:bnl-wash-pan 13s cubic-bezier(.45,0,.55,1) infinite alternate;}
    #wash .bnl-wash__reveal img{animation:bnl-wash-pan 13s cubic-bezier(.45,0,.55,1) infinite alternate;}
    #wash .bnl-wash.is-manual .bnl-wash__base,
    #wash .bnl-wash.is-manual .bnl-wash__reveal img{animation:none;}
    /* the light holds centre on mobile; the palms move through it */
    #wash .bnl-wash__reveal{-webkit-mask-size:58% 100%;mask-size:58% 100%;
      -webkit-mask-position:50% 50%;mask-position:50% 50%;animation:none;}
    #wash .bnl-wash__edge{display:none;}
    #wash .bnl-wash__grip{left:auto;right:14px;top:auto;bottom:14px;margin:0;width:42px;height:42px;}
    #wash .bnl-wash__hint{font-size:.8rem;bottom:12px;left:14px;transform:none;}
    #wash .bnl-wash__chip{font-size:.75rem;padding:.36rem .66rem;}
  }
  @keyframes bnl-wash-pan{
    from{object-position:0% 50%;} to{object-position:100% 50%;}
  }

  @media (prefers-reduced-motion:reduce){
    #wash .bnl-wash__reveal,#wash .bnl-wash__base,#wash .bnl-wash__reveal img{animation:none;}
    #wash .bnl-wash__hint b{animation:none;}
  }

#fixtures .bnl-rot{margin:34px 0 0;}
  #fixtures .bnl-rot__stage{position:relative;height:330px;perspective:1400px;
    perspective-origin:50% 42%;touch-action:pan-y;cursor:grab;
    user-select:none;-webkit-user-select:none;}
  #fixtures .bnl-rot__stage.is-drag{cursor:grabbing;}
  #fixtures .bnl-rot__item{position:absolute;left:50%;top:0;width:280px;height:280px;
    margin-left:-140px;transform-style:preserve-3d;
    transition:transform .62s cubic-bezier(.22,.61,.36,1),opacity .62s ease;
    will-change:transform;}
  #fixtures .bnl-rot__stage.is-drag .bnl-rot__item{transition:none;}
  #fixtures .bnl-rot__item img{width:100%;height:100%;object-fit:contain;display:block;
    -webkit-user-drag:none;pointer-events:none;
    }
  /* the ellipse the bulb hovers over */
  #fixtures .bnl-rot__shadow{position:absolute;left:50%;top:318px;width:210px;height:34px;
    margin-left:-105px;border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 45%,transparent 72%);
    filter:blur(7px);
    transition:transform .62s cubic-bezier(.22,.61,.36,1),opacity .62s ease;}
  #fixtures .bnl-rot__stage.is-drag .bnl-rot__shadow{transition:none;}
  #fixtures .bnl-rot__glow{position:absolute;left:50%;top:26px;width:420px;height:300px;
    margin-left:-210px;pointer-events:none;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(53,207,201,.16) 0%,transparent 68%);}

  #fixtures .bnl-rot__nav{display:flex;align-items:center;justify-content:center;gap:10px;
    margin-top:6px;}
  #fixtures .bnl-rot__arrow{width:40px;height:40px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;cursor:pointer;color:#EDEFEF;font-size:15px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
    transition:background .2s ease,border-color .2s ease;}
  #fixtures .bnl-rot__arrow:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);}
  #fixtures .bnl-rot__dots{display:flex;gap:8px;}
  #fixtures .bnl-rot__dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.22);border:0;transition:background .25s ease,transform .25s ease;}
  #fixtures .bnl-rot__dot[aria-selected="true"]{background:var(--dot,#35CFC9);transform:scale(1.35);}

  #fixtures .bnl-rot__panel{max-width:660px;margin:22px auto 0;text-align:center;}
  #fixtures .bnl-rot__panel[hidden]{display:none;}
  #fixtures .bnl-rot__tag{margin:0 0 6px;font-size:.7rem;letter-spacing:.18em;
    text-transform:uppercase;font-weight:700;}
  #fixtures .bnl-rot__name{margin:0 0 14px;font-size:clamp(1.5rem,3.6vw,2.15rem);line-height:1.1;}
  #fixtures .bnl-rot__keys{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px;}
  #fixtures .bnl-rot__keys span{font-size:.82rem;padding:.36rem .78rem;border-radius:999px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);color:#EDEFEF;}
  #fixtures .bnl-rot__use{margin:0;font-size:.98rem;line-height:1.65;opacity:.8;}

  @media (max-width:760px){
    #fixtures .bnl-rot__stage{height:318px;perspective:1000px;}
    #fixtures .bnl-rot__item{width:160px;height:160px;margin-left:-80px;}
    #fixtures .bnl-rot__shadow{top:238px;width:124px;height:20px;margin-left:-62px;}
    #fixtures .bnl-rot__glow{width:320px;height:230px;margin-left:-160px;}
  }
  @media (prefers-reduced-motion:reduce){
    #fixtures .bnl-rot__item,#fixtures .bnl-rot__shadow{transition:none;}
  }

/* rev3 - THE BULB CAROUSEL, Austen: "I want this to be one of our premier
   features". Three changes he asked for, plus the enrichment around them.

   1 ARC. The front bulb now settles DOWN and the two behind ride UP, so the
     three sit on a curve instead of a flat line. That is what gives the ring
     its depth - a straight row of scaled images reads as three pictures, an
     arc reads as one object rotating.
   2 THE SHADOW MAINTAINS. It is pinned to the ground plane and no longer
     lifts with the bulb, so when a bulb rises its shadow stays put, shrinks
     and softens. It never fades out - minimum opacity is held - so the
     shadow is continuous through the whole rotation, which is what he asked.
   3 ENRICHMENT. Per-bulb ambient wash keyed to each bulb's own colour, a
     specular sweep across the front bulb, real chevron buttons in place of
     the glyph divs, and a hint line.
*/
#fixtures .bnl-rot__stage{height:470px;perspective-origin:50% 46%;}
/* rev4 - Austen: "I don't want the shadow around it. I only want a shadow
   underneath the bulb." drop-shadow() traces the alpha silhouette, so it
   wrapped every bulb in a dark halo. The ground ellipse below is now the
   only shadow on this carousel. */
#fixtures .bnl-rot__item img{filter:none;}

/* ground plane - the shadow lives here, not on the bulb */
/* rev4 - the ONLY shadow: a soft ellipse on the ground under each bulb, so
   the bulb reads as casting onto a surface rather than being outlined.
   Narrower than the bulb so it reads as contact, not as a plate. */
#fixtures .bnl-rot__shadow{top:392px;width:210px;height:32px;margin-left:-105px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.86) 0%,rgba(0,0,0,.42) 40%,transparent 72%);
  filter:blur(9px);}

/* ambient wash takes the active bulb's colour */
#fixtures .bnl-rot__glow{top:10px;height:344px;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--dot,#35CFC9) 22%,transparent) 0%,transparent 66%);
  transition:background .6s ease;}

/* real buttons, not glyph divs */
#fixtures .bnl-rot__arrow{width:44px;height:44px;padding:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .18s ease;}
#fixtures .bnl-rot__arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#fixtures .bnl-rot__arrow:hover{background:rgba(255,255,255,.12);
  border-color:color-mix(in srgb,var(--dot,#35CFC9) 60%,transparent);
  box-shadow:0 0 18px -4px var(--dot,#35CFC9);transform:translateY(-1px);}
#fixtures .bnl-rot__arrow:focus-visible{outline:2px solid var(--color-pink);outline-offset:2px;}
#fixtures .bnl-rot__dots{gap:12px;}
#fixtures .bnl-rot__dot{width:10px;height:10px;min-width:24px;min-height:24px;
  background:transparent;position:relative;}
#fixtures .bnl-rot__dot::before{content:"";position:absolute;left:50%;top:50%;
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:rgba(255,255,255,.24);transition:background .25s ease,transform .25s ease,box-shadow .25s ease;}
#fixtures .bnl-rot__dot[aria-selected="true"]{background:transparent;transform:none;}
#fixtures .bnl-rot__dot[aria-selected="true"]::before{background:var(--dot,#35CFC9);
  transform:scale(1.5);box-shadow:0 0 12px -1px var(--dot,#35CFC9);}
#fixtures .bnl-rot__hint{text-align:center;font-size:.82rem;opacity:.5;margin:10px 0 0;}

/* rev4 - the rev3 specular sweep was a RECTANGLE (inset:0 + 24px radius)
   laid over the front bulb. Against the near-black stage it read as a grey
   box around the bulb - exactly what Austen circled. A highlight cannot be
   clipped to a product silhouette in CSS, so it is gone; the bulb photography
   already carries its own specular. */

@media (prefers-reduced-motion:reduce){
  #fixtures .bnl-rot__glow{transition:none;}
  #fixtures .bnl-rot__arrow{transition:none;}
}

#fixtures .bnl-acc{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:38px;}
  #fixtures .bnl-acc__card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;
    align-items:center;padding:24px 26px;border-radius:18px;border:1px solid rgba(255,255,255,.09);
    background:radial-gradient(120% 120% at 12% 18%,rgba(53,207,201,.10),transparent 62%),rgba(255,255,255,.028);}
  #fixtures .bnl-acc__shot{display:flex;align-items:center;justify-content:center;}
  /* No backing plate. Austen: "remove the background all the way" - the
     knockout is now complete, so the product sits on the card itself. */
  #fixtures .bnl-acc__shot img{width:100%;max-width:210px;height:auto;display:block;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.7));}
  #fixtures .bnl-acc__card h3{margin:0 0 4px;font-size:1.28rem;line-height:1.15;}
  #fixtures .bnl-acc__kicker{margin:0 0 10px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:#35CFC9;font-weight:700;}
  #fixtures .bnl-acc__card p{margin:0;font-size:.93rem;line-height:1.6;opacity:.8;}
  #fixtures .bnl-acc__pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
  #fixtures .bnl-acc__pills span{font-size:.74rem;padding:.3rem .62rem;border-radius:999px;
    border:1px solid rgba(53,207,201,.32);background:rgba(53,207,201,.09);color:#EDEFEF;}
  @media (max-width:1040px){#fixtures .bnl-acc{grid-template-columns:minmax(0,1fr);}}
  @media (max-width:900px){
    #fixtures .bnl-acc__card{grid-template-columns:1fr;gap:16px;padding:22px;}
    #fixtures .bnl-acc__shot img{max-width:190px;}
  }

#fixtures .bnl-pathslide{position:relative;margin:34px 0 0;border-radius:18px;overflow:hidden;
    border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 60px rgba(0,0,0,.55);
    line-height:0;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
  #fixtures .bnl-pathslide img{display:block;width:100%;height:auto;pointer-events:none;
    -webkit-user-drag:none;}
  #fixtures .bnl-pathslide__top{position:absolute;inset:0;overflow:hidden;
    width:var(--pos);}
  #fixtures .bnl-pathslide__top img{position:absolute;top:0;left:0;height:100%;width:auto;
    max-width:none;}
  #fixtures .bnl-pathslide__div{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
    margin-left:-1px;background:rgba(255,255,255,.9);box-shadow:0 0 18px 3px rgba(255,255,255,.45);
    pointer-events:none;}
  #fixtures .bnl-pathslide__knob{position:absolute;top:50%;left:var(--pos);width:46px;height:46px;
    margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;display:flex;align-items:center;
    justify-content:center;color:#fff;font-size:14px;letter-spacing:-1px;
    background:rgba(8,12,20,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.5);box-shadow:0 4px 22px rgba(0,0,0,.55);}
  #fixtures .bnl-pathslide__tag{position:absolute;bottom:14px;padding:.42rem .8rem;border-radius:999px;
    background:rgba(10,12,20,.7);border:1px solid rgba(255,255,255,.16);color:#fff;
    font-size:.8rem;line-height:1;pointer-events:none;white-space:nowrap;}
  #fixtures .bnl-pathslide__tag--a{left:14px;} #fixtures .bnl-pathslide__tag--b{right:14px;}
  #fixtures .bnl-pathslide__hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);
    padding:.45rem .85rem;border-radius:999px;background:rgba(10,12,20,.7);
    border:1px solid rgba(255,255,255,.16);color:#fff;font-size:.8rem;line-height:1;
    pointer-events:none;transition:opacity .3s ease;}
  #fixtures .bnl-pathslide.is-manual .bnl-pathslide__hint{opacity:0;}

/* rev3 - Austen: "that doesn't need to have a white background, it looks
   really harsh". The supplied asset was a white marketing sheet carrying
   another brand's navy/orange typography. The white is knocked out of the
   product photography and the claims are rebuilt as native chips, so the
   section now reads as ours rather than as a pasted-in PDF page. */
#fixtures .bnl-fxsheet{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:34px;align-items:center;margin:34px 0 0;padding:30px 32px;border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:radial-gradient(120% 130% at 14% 12%,rgba(53,207,201,.10),transparent 60%),
             rgba(255,255,255,.026);}
#fixtures .bnl-fxsheet__hero{position:relative;display:flex;justify-content:center;}
#fixtures .bnl-fxsheet__hero img{width:100%;max-width:210px;height:auto;display:block;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.8));}
#fixtures .bnl-fxsheet__hero::after{content:"";position:absolute;left:50%;bottom:-6px;
  width:190px;height:26px;margin-left:-95px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 72%);filter:blur(9px);}
#fixtures .bnl-fxsheet__kicker{margin:0 0 6px;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--color-primary);font-weight:700;}
#fixtures .bnl-fxsheet h3{margin:0 0 10px;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.15;}
#fixtures .bnl-fxsheet p{margin:0;font-size:.95rem;line-height:1.6;opacity:.82;}
#fixtures .bnl-fxsheet__specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px;margin-top:18px;}
#fixtures .bnl-fxsheet__spec{padding:12px 14px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--color-primary) 30%,transparent);
  background:color-mix(in srgb,var(--color-primary) 7%,transparent);}
#fixtures .bnl-fxsheet__spec b{display:block;font-family:var(--font-heading-proposed);
  font-size:1.06rem;line-height:1.1;}
#fixtures .bnl-fxsheet__spec span{display:block;margin-top:3px;font-size:.76rem;opacity:.62;line-height:1.35;}
#fixtures .bnl-fxsheet__range{grid-column:1 / -1;margin-top:6px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);text-align:center;}
#fixtures .bnl-fxsheet__range img{width:100%;max-width:640px;height:auto;display:inline-block;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.75));}
#fixtures .bnl-fxsheet__range figcaption{margin-top:12px;font-size:.86rem;opacity:.6;}
@media (max-width:820px){
  #fixtures .bnl-fxsheet{grid-template-columns:1fr;gap:24px;padding:24px 20px;text-align:center;}
  #fixtures .bnl-fxsheet__hero img{max-width:170px;}
  #fixtures .bnl-fxsheet__specs{text-align:left;}
}

.bnl-vfilm{display:flex;flex-direction:column;align-items:center;gap:14px;margin:34px 0 0;}
  .bnl-vfilm__card{margin:0;max-width:380px;width:100%;padding:16px 16px 14px;
    box-shadow:var(--hglow-teal-soft);}
  .bnl-vfilm__card video{display:block;width:100%;aspect-ratio:9/16;max-height:620px;
    border-radius:14px;background:#000;object-fit:cover;box-shadow:var(--hglow-teal);}
  .bnl-vfilm__cap{margin-top:12px;text-align:center;}
  .bnl-vfilm__cap strong{display:block;margin-bottom:2px;}
  .bnl-vfilm__cap span{opacity:.65;font-size:.9em;}

#notequal .bnl-flyer{position:relative;max-width:760px;margin:34px auto 0;padding:3px;border-radius:22px;
    background:linear-gradient(135deg,#FF3D7F,#FF7A2F 22%,#E8B84B 42%,#35CFC9 68%,#7C4DFF 100%);
    background-size:300% 300%;animation:bnl-flyer-edge 14s ease infinite;
    box-shadow:0 22px 70px rgba(0,0,0,.6);}
  @keyframes bnl-flyer-edge{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
  #notequal .bnl-flyer::after{content:"";position:absolute;inset:-14px;border-radius:30px;z-index:-1;
    background:inherit;filter:blur(26px);opacity:.4;}
  #notequal .bnl-flyer img{display:block;width:100%;height:auto;border-radius:19px;}
  @media (prefers-reduced-motion:reduce){#notequal .bnl-flyer{animation:none;}}

#holidays .bnl-season{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px;margin-left:auto;margin-right:auto;}@media (max-width:640px){#holidays .bnl-season{grid-template-columns:minmax(0,1fr);}}#holidays .bnl-season__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px 14px 0 0;}

/* rev3 - Austen: "look back through our other pages, find the best looking
   holiday interactive we have". That is sconce rev18 (.bnl-hol) - radio
   driven, zero JS, auto-cycles and holds on tap. Lifted and rescoped from
   #seasons to #holidays, now carrying all four photographs. */
#holidays .bnl-hol__r{position:absolute;opacity:0;pointer-events:none;}
#holidays .bnl-hol__stage{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-pink);margin-top:var(--space-lg);}
#holidays .bnl-hol__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease;z-index:1;}
#holidays .bnl-hol__slide img{width:100%;height:100%;object-fit:cover;display:block;}
#holidays .bnl-hol__slide figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;
      padding:22px 24px 20px;background:linear-gradient(transparent,rgba(0,0,0,.78));}
#holidays .bnl-hol__slide figcaption strong{font-family:var(--font-heading-proposed);font-size:clamp(1.15rem,2.4vw,1.6rem);}
#holidays .bnl-hol__slide figcaption span{font-size:.92rem;opacity:.8;}
#holidays .bnl-hol__tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--space-ml);}
#holidays .bnl-hol__tab{cursor:pointer;padding:11px 22px;border-radius:999px;border:1.5px solid var(--color-border);
      color:var(--color-text-muted);font-weight:700;font-size:.95rem;transition:color .2s,border-color .2s,box-shadow .2s,transform .18s;}
#holidays .bnl-hol__tab:hover{transform:translateY(-2px);color:var(--color-text);}
#holidays .bnl-hol__hint{text-align:center;font-size:.85rem;opacity:.55;margin-top:12px;}
#holidays .bnl-hol__r#hol-stpatricks:checked ~ .bnl-hol__stage .bnl-hol__slide--stpatricks{opacity:1;z-index:2;}
#holidays .bnl-hol__r#hol-stpatricks:checked ~ .bnl-hol__tabs .bnl-hol__tab--stpatricks{color:var(--color-primary);border-color:var(--color-primary);box-shadow:var(--hglow-teal);}
#holidays .bnl-hol__r#hol-christmas:checked ~ .bnl-hol__stage .bnl-hol__slide--christmas{opacity:1;z-index:2;}
#holidays .bnl-hol__r#hol-christmas:checked ~ .bnl-hol__tabs .bnl-hol__tab--christmas{color:var(--color-primary);border-color:var(--color-primary);box-shadow:var(--hglow-teal);}
#holidays .bnl-hol__r#hol-halloween:checked ~ .bnl-hol__stage .bnl-hol__slide--halloween{opacity:1;z-index:2;}
#holidays .bnl-hol__r#hol-halloween:checked ~ .bnl-hol__tabs .bnl-hol__tab--halloween{color:var(--color-primary);border-color:var(--color-primary);box-shadow:var(--hglow-teal);}
#holidays .bnl-hol__r#hol-july4:checked ~ .bnl-hol__stage .bnl-hol__slide--july4{opacity:1;z-index:2;}
#holidays .bnl-hol__r#hol-july4:checked ~ .bnl-hol__tabs .bnl-hol__tab--july4{color:var(--color-primary);border-color:var(--color-primary);box-shadow:var(--hglow-teal);}
#holidays .bnl-hol__r#hol-auto:checked ~ .bnl-hol__stage .bnl-hol__slide{animation:bnlHolCycle 12s infinite;}
#holidays .bnl-hol__r#hol-auto:checked ~ .bnl-hol__stage .bnl-hol__slide--stpatricks{animation-delay:0s;}
#holidays .bnl-hol__r#hol-auto:checked ~ .bnl-hol__stage .bnl-hol__slide--christmas{animation-delay:3s;}
#holidays .bnl-hol__r#hol-auto:checked ~ .bnl-hol__stage .bnl-hol__slide--halloween{animation-delay:6s;}
#holidays .bnl-hol__r#hol-auto:checked ~ .bnl-hol__stage .bnl-hol__slide--july4{animation-delay:9s;}
#holidays .bnl-hol__r#hol-auto:checked ~ .bnl-hol__tabs .bnl-hol__tab--auto{color:var(--color-primary);border-color:var(--color-primary);box-shadow:var(--hglow-teal);}
#holidays .bnl-hol__r#hol-stpatricks:checked ~ .bnl-hol__stage .bnl-hol__slide{animation:none;}
#holidays .bnl-hol__r#hol-christmas:checked ~ .bnl-hol__stage .bnl-hol__slide{animation:none;}
#holidays .bnl-hol__r#hol-halloween:checked ~ .bnl-hol__stage .bnl-hol__slide{animation:none;}
#holidays .bnl-hol__r#hol-july4:checked ~ .bnl-hol__stage .bnl-hol__slide{animation:none;}
@keyframes bnlHolCycle{0%{opacity:0} 4%{opacity:1} 21.00%{opacity:1} 25.00%{opacity:0} 100%{opacity:0}}

/* ===== Interactive spec panel (CSS-only port of PoolEnclosureSpecs.jsx) ===== */
#specs .bnl-sp{color:#EDEFEF}
#specs .bnl-sp__r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#specs .bnl-sp__ic{flex:none;stroke:#35CFC9}
#specs .bnl-heading--section{text-align:center}
#specs .bnl-sp__feat{cursor:pointer;transition:background .2s ease}
#specs .bnl-sp__feat:hover{background:rgba(53,207,201,0.06)}
#specs .bnl-sp__feat:hover .bnl-sp__feat-t{color:#35CFC9}
#specs .bnl-sp__hint{text-align:center;font-size:.82rem;color:rgba(237,239,239,0.38);margin:-8px 0 14px}
@media (max-width:899px){#specs .bnl-sp__feat:last-of-type{grid-column:1 / -1;justify-content:center}}
#specs .bnl-sp__strip{display:grid;grid-template-columns:repeat(5,1fr);background:#101314;border:1px solid rgba(255,255,255,0.07);border-radius:18px;margin:26px 0 18px;overflow:hidden}
#specs .bnl-sp__feat{display:flex;align-items:center;gap:13px;padding:18px 20px}
#specs .bnl-sp__feat+.bnl-sp__feat{border-left:1px solid rgba(255,255,255,0.07)}
#specs .bnl-sp__feat-t{font-size:.92rem;font-weight:600;line-height:1.25}
#specs .bnl-sp__feat-b{font-size:.82rem;color:rgba(237,239,239,0.6);line-height:1.3;margin-top:2px}
#specs .bnl-sp__layout{display:grid;grid-template-columns:252px 1fr;gap:18px;align-items:start}
#specs .bnl-sp__nav{background:#101314;border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:8px;position:sticky;top:20px}
#specs .bnl-sp__nav-item{display:flex;align-items:center;gap:13px;width:100%;padding:13px 16px;border-radius:12px;border-left:2.5px solid transparent;color:rgba(237,239,239,0.6);font-size:.94rem;font-weight:500;cursor:pointer;transition:color .2s ease,background .2s ease}
#specs .bnl-sp__nav-item:hover{color:#EDEFEF;background:rgba(255,255,255,0.03)}
#specs .bnl-sp__nav-item .bnl-sp__ic{stroke:currentColor}
#specs .bnl-sp__panel{background:#101314;border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:26px 28px 30px;min-width:0}
#specs .bnl-sp__view{display:none;animation:bnlSpFade .28s ease}
@keyframes bnlSpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#specs .bnl-sp__ptitle{color:#35CFC9;font-size:1.18rem;font-weight:700;margin:0 0 10px}
#specs .bnl-sp__body{font-size:.97rem;line-height:1.7;margin:0 0 14px;max-width:640px}
#specs .bnl-sp__rows{margin-top:18px}
#specs .bnl-sp__row{display:grid;grid-template-columns:56px 1fr 300px;gap:18px;align-items:center;padding:20px 6px;border-top:1px solid rgba(255,255,255,0.07);border-radius:12px;cursor:pointer;transition:background .2s ease}
#specs .bnl-sp__row:hover{background:rgba(53,207,201,0.045)}
#specs .bnl-sp__row:hover .bnl-sp__row-title{color:#35CFC9}
#specs .bnl-sp__row-ic{align-self:start;margin-top:4px}
#specs .bnl-sp__row-title{display:block;font-size:1.06rem;font-weight:700;margin-bottom:5px;transition:color .2s ease}
#specs .bnl-sp__row-desc{display:block;font-size:.91rem;color:rgba(237,239,239,0.6);line-height:1.6}
#specs .bnl-sp__row-vis{min-height:74px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}
#specs .bnl-sp__row-vis--photo{height:96px;background:#0B0F10;border:1px solid rgba(255,255,255,0.07)}
#specs .bnl-sp__row-chev{display:none}
#specs .bnl-sp__vsvg{width:100%;height:100%;display:block;font-family:inherit}
#specs .bnl-sp__badge{display:flex;align-items:center;justify-content:center;gap:12px;border-radius:14px;border:1px solid rgba(53,207,201,0.28);background:rgba(53,207,201,0.07);padding:16px 20px;width:100%;min-height:74px}
#specs .bnl-sp__badge-big{color:#35CFC9;font-size:1.19rem;font-weight:700;line-height:1.2;letter-spacing:-0.01em}
#specs .bnl-sp__badge-sm{font-size:.85rem;font-weight:500;opacity:.85;margin-top:2px}
#specs .bnl-sp__wheel{border-radius:50%;flex:none;position:relative;display:inline-block;background:conic-gradient(#ff3b30,#ff9500,#ffe234,#8be32f,#2fd0c9,#2f8fe3,#7a4de3,#e34dd0,#ff3b30)}
#specs .bnl-sp__wheel-in{position:absolute;inset:24%;border-radius:50%;background:#0B0F10}
#specs .bnl-sp__wheel-core{position:absolute;inset:36%;border-radius:50%;background:#fff}
#specs .bnl-sp__back{display:inline-flex;align-items:center;gap:7px;color:rgba(237,239,239,0.6);font-size:.88rem;font-weight:600;cursor:pointer;padding:4px 0;margin-bottom:16px}
#specs .bnl-sp__back:hover{color:#EDEFEF}
#specs .bnl-sp__back .bnl-sp__ic{stroke:currentColor}
#specs .bnl-sp__dhead{display:flex;align-items:center;gap:14px;margin-bottom:16px}
#specs .bnl-sp__dhead h3{font-size:1.5rem;font-weight:700;margin:0}
#specs .bnl-sp__dvis{border-radius:16px;overflow:hidden;margin-bottom:20px}
#specs .bnl-sp__dvis--photo{background:#0B0F10;border:1px solid rgba(255,255,255,0.07);height:150px;display:flex;align-items:center;justify-content:center}
#specs .bnl-sp__dvis--badge{max-width:380px}
#specs .bnl-sp__bullets{margin:0;padding:0;list-style:none}
#specs .bnl-sp__bullets li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:.94rem;color:rgba(237,239,239,0.6);line-height:1.55}
#specs .bnl-sp__bullets .bnl-sp__ic{margin-top:4px}
#specs .bnl-sp__kit{margin-top:20px}
#specs .bnl-sp__kit-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,239,239,0.38);font-weight:600;margin:0 0 10px}
#specs .bnl-sp__kit-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
#specs .bnl-sp__kit-chip{padding:11px 16px;border-radius:12px;font-size:.94rem;font-weight:700;cursor:pointer;min-width:74px;text-align:center;color:rgba(237,239,239,0.6);border:1px solid rgba(255,255,255,0.07);transition:all .2s ease}
#specs .bnl-sp__kitbar{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,0.06);margin-bottom:6px;overflow:hidden}
#specs .bnl-sp__kitfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#35CFC9,rgba(53,207,201,0.55));box-shadow:0 0 14px rgba(53,207,201,0.35);transition:width .35s ease}
#specs .bnl-sp__kit-scale{display:flex;justify-content:space-between;font-size:.75rem;color:rgba(237,239,239,0.38);margin-bottom:12px}
#specs .bnl-sp__kitinfo{display:none;border-radius:14px;border:1px solid rgba(53,207,201,0.28);background:rgba(53,207,201,0.07);padding:14px 16px;font-size:.91rem;line-height:1.6}
#specs .bnl-sp__kitinfo strong{color:#35CFC9}
#specs .bnl-sp__dls{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#specs .bnl-sp__dl{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;font-size:.88rem;font-weight:600;text-decoration:none;color:#35CFC9;background:rgba(53,207,201,0.07);border:1px solid rgba(53,207,201,0.28)}
#specs .bnl-sp__dl-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:14px 18px;border-radius:12px;background:#35CFC9;color:#06201f;font-size:.94rem;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
#specs .bnl-sp__dl-cta:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(53,207,201,0.3)}
#specs .bnl-sp__dl-cta .bnl-sp__ic{stroke:currentColor}
#specs #sp-v-overview:checked ~ .bnl-sp__layout .bnl-sp__view--overview{display:block}
#specs #sp-v-overview:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-overview"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-overview:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-overview"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-architecture:checked ~ .bnl-sp__layout .bnl-sp__view--architecture{display:block}
#specs #sp-v-architecture:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-architecture"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-architecture:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-architecture"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-sizes:checked ~ .bnl-sp__layout .bnl-sp__view--sizes{display:block}
#specs #sp-v-sizes:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-sizes"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-sizes:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-sizes"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-power:checked ~ .bnl-sp__layout .bnl-sp__view--power{display:block}
#specs #sp-v-power:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-power"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-power:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-power"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-connectors:checked ~ .bnl-sp__layout .bnl-sp__view--connectors{display:block}
#specs #sp-v-connectors:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-connectors"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-connectors:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-connectors"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-wiring:checked ~ .bnl-sp__layout .bnl-sp__view--wiring{display:block}
#specs #sp-v-wiring:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-wiring"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-wiring:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-wiring"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-mounting:checked ~ .bnl-sp__layout .bnl-sp__view--mounting{display:block}
#specs #sp-v-mounting:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-mounting"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-mounting:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-mounting"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-track:checked ~ .bnl-sp__layout .bnl-sp__view--track{display:block}
#specs #sp-v-track:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-track"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-track:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-track"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-led:checked ~ .bnl-sp__layout .bnl-sp__view--led{display:block}
#specs #sp-v-led:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-led"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-led:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-led"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-environmental:checked ~ .bnl-sp__layout .bnl-sp__view--environmental{display:block}
#specs #sp-v-environmental:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-environmental"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-environmental:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-environmental"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-control:checked ~ .bnl-sp__layout .bnl-sp__view--control{display:block}
#specs #sp-v-control:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-control"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-control:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-control"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-compatibility:checked ~ .bnl-sp__layout .bnl-sp__view--compatibility{display:block}
#specs #sp-v-compatibility:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-compatibility"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-compatibility:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-compatibility"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-warranty:checked ~ .bnl-sp__layout .bnl-sp__view--warranty{display:block}
#specs #sp-v-warranty:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-warranty"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-warranty:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-warranty"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-v-downloads:checked ~ .bnl-sp__layout .bnl-sp__view--downloads{display:block}
#specs #sp-v-downloads:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-downloads"]{color:#35CFC9;background:rgba(53,207,201,0.08);border-left-color:#35CFC9;font-weight:700}
#specs #sp-v-downloads:focus-visible ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-downloads"]{outline:2px solid #35CFC9;outline-offset:2px}
#specs #sp-k-mr16:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:33.3%}
#specs #sp-k-mr16:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--mr16{display:block}
#specs #sp-k-mr16:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-mr16"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-mr16:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"MR16 · 5 W · 500 lm"}
#specs #sp-k-par36:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:100%}
#specs #sp-k-par36:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--par36{display:block}
#specs #sp-k-par36:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-par36"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-par36:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"PAR36 · 16 W · 1500 lm"}
#specs #sp-k-g4:checked ~ .bnl-sp__layout .bnl-sp__kitfill{width:13.3%}
#specs #sp-k-g4:checked ~ .bnl-sp__layout .bnl-sp__kitinfo--g4{display:block}
#specs #sp-k-g4:checked ~ .bnl-sp__layout .bnl-sp__kit-chips label[for="sp-k-g4"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-k-g4:checked ~ .bnl-sp__layout .bnl-sp__kit-cur::after{content:"G4 bi-pin · 2 W · 200 lm"}




@media (max-width:899px){
#specs .bnl-sp__strip{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#specs .bnl-sp__feat+.bnl-sp__feat{border-left:none}
#specs .bnl-sp__layout{display:block}
#specs .bnl-sp__nav{position:sticky;top:0;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:10px 2px;margin-bottom:12px;background:rgba(10,10,10,0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:none;border-radius:0;scrollbar-width:none}
#specs .bnl-sp__nav::-webkit-scrollbar{display:none}
#specs .bnl-sp__nav-item{flex:none;width:auto;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,0.07);border-left-width:1px;background:#101314;font-size:.86rem;font-weight:600}
#specs .bnl-sp__nav-item .bnl-sp__ic{display:none}
#specs .bnl-sp__panel{padding:20px 16px 24px}
#specs .bnl-sp__row{grid-template-columns:44px 1fr auto;gap:12px;padding:16px 4px}
#specs .bnl-sp__row-vis{display:none}
#specs .bnl-sp__row-chev{display:block;color:rgba(237,239,239,0.38)}
#specs .bnl-sp__row-chev .bnl-sp__ic{stroke:currentColor}
#specs .bnl-sp__dvis--photo{height:110px}
#specs .bnl-sp__dhead h3{font-size:1.3rem}
}
@media (max-width:899px){
#specs #sp-v-overview:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-overview"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-architecture:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-architecture"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-sizes:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-sizes"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-power:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-power"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-connectors:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-connectors"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-wiring:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-wiring"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-mounting:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-mounting"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-track:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-track"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-led:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-led"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-environmental:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-environmental"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-control:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-control"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-compatibility:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-compatibility"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-warranty:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-warranty"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
#specs #sp-v-downloads:checked ~ .bnl-sp__layout .bnl-sp__nav label[for="sp-v-downloads"]{background:#35CFC9;color:#06201f;border-color:#35CFC9}
}
@media (prefers-reduced-motion:reduce){
#specs .bnl-sp__view{animation:none}
#specs .bnl-sp__kitfill,#specs .bnl-sp__row,#specs .bnl-sp__nav-item,#specs .bnl-sp__kit-chip,#specs .bnl-sp__dl-cta{transition:none}
}

#compare-cta .bnl-vs__stack{text-align:center;max-width:900px;margin:0 auto;}
    #compare-cta .bnl-vs__brand{font-family:var(--font-heading-proposed);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-0.01em;}
    #compare-cta .bnl-vs__badge{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
      margin:18px auto;font-weight:800;font-size:1.25rem;color:#fff;border:1.5px solid var(--color-pink);
      box-shadow:var(--hglow-pink);background:color-mix(in srgb, var(--color-pink) 14%, transparent);}
    #compare-cta .bnl-vs__viewport{overflow:hidden;margin-top:6px;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
    #compare-cta .bnl-vs__track{display:flex;gap:14px;width:max-content;animation:bnlVsScroll 26s linear infinite;will-change:transform;padding:10px 0 14px;}
    #compare-cta .bnl-vs__viewport:hover .bnl-vs__track,
    #compare-cta .bnl-vs__viewport:focus-within .bnl-vs__track{animation-play-state:paused;}
    @keyframes bnlVsScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
    #compare-cta .bnl-vs__chip{flex:0 0 auto;display:inline-block;padding:14px 26px;border-radius:999px;text-decoration:none;
      color:var(--color-primary);border:1.5px solid var(--color-primary);font-weight:700;font-size:1.02rem;
      box-shadow:var(--hglow-teal);background:transparent;transition:box-shadow .2s ease,background .2s ease,transform .18s ease;}
    #compare-cta .bnl-vs__chip:hover{box-shadow:var(--hglow-teal-hi);background:color-mix(in srgb, var(--color-primary) 12%, transparent);transform:translateY(-2px) scale(1.05);}
    #compare-cta .bnl-vs__all{margin-top:20px;}
    #compare-cta .bnl-vs__hint{font-size:.85rem;opacity:.55;margin-top:10px;}
    @media (prefers-reduced-motion:reduce){
      #compare-cta .bnl-vs__track{animation:none;}
      #compare-cta .bnl-vs__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;mask-image:none;-webkit-mask-image:none;}
      #compare-cta .bnl-vs__chip{transition:none;}
    }

#contractors .bnl-pro2{max-width:980px;margin:0 auto;text-align:center;}
    #contractors .bnl-pro2 h2{margin-bottom:14px;}
    #contractors .bnl-pro2 .bnl-lede{max-width:760px;margin:0 auto 30px;}
    #contractors .bnl-pro2__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:0 0 32px;}
    #contractors .bnl-pro2__tile{display:flex;align-items:center;gap:12px;text-align:left;
      padding:16px 18px;border-radius:14px;border:1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
      background:color-mix(in srgb, var(--color-primary) 6%, transparent);font-weight:600;font-size:.95rem;line-height:1.35;}
    #contractors .bnl-pro2__tile svg{flex:none;width:20px;height:20px;stroke:var(--color-primary);}
    #contractors .bnl-pro2__cta{display:inline-block;}
    @media (max-width:640px){#contractors .bnl-pro2__grid{grid-template-columns:1fr 1fr;} #contractors .bnl-pro2__tile{font-size:.88rem;padding:13px 14px;}}

/* rev3 - Austen: "make that look more badass and more interactive".
   The tiles were flat static boxes. They now have a live gradient rim, a
   lit icon well, a sheen that sweeps on hover, and a staggered entrance.
   Every tile is focusable, so the same states are reachable by keyboard. */
#contractors .bnl-pro2__grid{gap:16px;}
#contractors .bnl-pro2__tile{
  position:relative;isolation:isolate;overflow:hidden;cursor:default;
  gap:14px;padding:20px 20px;border-radius:16px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.028),rgba(255,255,255,.028)) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb,var(--color-primary) 55%,transparent) 0%,
      color-mix(in srgb,var(--color-pink) 40%,transparent) 52%,
      color-mix(in srgb,var(--color-primary) 30%,transparent) 100%) border-box;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),box-shadow .26s ease,
             background-color .26s ease;
}
#contractors .bnl-pro2__tile::before{           /* the sheen */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .62s cubic-bezier(.22,.61,.36,1);
}
#contractors .bnl-pro2__tile::after{            /* floor bloom */
  content:"";position:absolute;left:12%;right:12%;bottom:-14px;height:22px;z-index:-1;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--color-primary) 46%,transparent),transparent 70%);
  filter:blur(9px);transition:opacity .26s ease;
}
#contractors .bnl-pro2__tile:hover,
#contractors .bnl-pro2__tile:focus-visible{
  transform:translateY(-4px);
  background-color:color-mix(in srgb,var(--color-primary) 9%,transparent);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.9), var(--hglow-teal-soft);
  outline:none;
}
#contractors .bnl-pro2__tile:hover::before,
#contractors .bnl-pro2__tile:focus-visible::before{transform:translateX(120%);}
#contractors .bnl-pro2__tile:hover::after,
#contractors .bnl-pro2__tile:focus-visible::after{opacity:1;}
#contractors .bnl-pro2__tile:focus-visible{
  box-shadow:0 0 0 2px var(--color-pink),0 16px 40px -18px rgba(0,0,0,.9);
}
/* the icon gets a well of its own so it reads as lit rather than drawn */
#contractors .bnl-pro2__ico{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--color-primary) 38%,transparent);
  background:radial-gradient(120% 120% at 30% 20%,
    color-mix(in srgb,var(--color-primary) 26%,transparent),transparent 70%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),box-shadow .26s ease;
}
#contractors .bnl-pro2__tile:hover .bnl-pro2__ico,
#contractors .bnl-pro2__tile:focus-visible .bnl-pro2__ico{
  transform:scale(1.08) rotate(-4deg);box-shadow:var(--hglow-teal);
}
#contractors .bnl-pro2__tile svg{width:22px;height:22px;stroke:var(--color-primary);}
#contractors .bnl-pro2__tile > span{font-weight:650;}
/* The staggered entrance is ARMED BY SCRIPT, never by CSS alone. If the
   observer below does not run, .is-armed is never added and the tiles are
   simply visible - a reveal must not be able to hide content permanently. */
@media (hover:hover){
  #contractors .bnl-pro2.is-armed .bnl-pro2__tile{opacity:0;transform:translateY(14px);}
  #contractors .bnl-pro2.is-armed.is-in .bnl-pro2__tile{opacity:1;transform:none;
    transition:opacity .5s ease var(--d,0s),transform .5s cubic-bezier(.22,.61,.36,1) var(--d,0s);}
}
@media (prefers-reduced-motion:reduce){
  #contractors .bnl-pro2__tile,#contractors .bnl-pro2__ico{transition:none;transform:none;opacity:1;}
  #contractors .bnl-pro2__tile::before{display:none;}
}

/* ===== Interactive Glow Layer (Austen 07-27: everything clickable glows, heavy) ===== */
:root{
  --hglow-pink: 0 0 14px rgba(227,5,107,.55), 0 0 44px rgba(227,5,107,.38);
  --hglow-pink-hi: 0 0 18px rgba(227,5,107,.75), 0 0 60px rgba(227,5,107,.5);
  --hglow-teal: 0 0 14px rgba(0,169,181,.5), 0 0 40px rgba(0,169,181,.32);
  --hglow-teal-hi: 0 0 18px rgba(0,169,181,.7), 0 0 56px rgba(0,169,181,.45);
  --hglow-teal-soft: 0 0 10px rgba(53,207,201,.28), 0 0 26px rgba(53,207,201,.18);
}
/* Hover lift + grow on all buttons */
.bnl-page--products-landscape .bnl-btn{transition:box-shadow .2s ease,background-color .2s ease,transform .18s ease;will-change:transform}
.bnl-page--products-landscape .bnl-btn:hover{transform:translateY(-2px) scale(1.05)}
.bnl-page--products-landscape .bnl-btn:active{transform:translateY(0) scale(0.98)}
@media (prefers-reduced-motion:reduce){.bnl-page--products-landscape .bnl-btn,.bnl-page--products-landscape .bnl-btn:hover{transform:none;transition:box-shadow .2s ease,background-color .2s ease}}
/* Hero title: larger + deeper overlap onto the video */
.bnl-page--products-landscape .bnl-hero__title{font-size:clamp(2.7rem,6.2vw,4.8rem);text-shadow:0 3px 22px rgba(0,0,0,.85),0 0 40px rgba(0,0,0,.5)}
.bnl-page--products-landscape .bnl-hero__content{margin-top:-96px}
@media (min-width:900px){.bnl-page--products-landscape .bnl-hero__content{margin-top:-170px}}
/* Buttons */
.bnl-page--products-landscape .bnl-btn--primary{box-shadow:var(--hglow-pink)}
.bnl-page--products-landscape .bnl-btn--primary:hover{box-shadow:var(--hglow-pink-hi);background:color-mix(in srgb, var(--color-pink) 14%, transparent)}
.bnl-page--products-landscape .bnl-btn--secondary{box-shadow:var(--hglow-teal)}
.bnl-page--products-landscape .bnl-btn--secondary:hover{box-shadow:var(--hglow-teal-hi)}
.bnl-page--products-landscape .bnl-btn--ghost{box-shadow:var(--hglow-pink)}
.bnl-page--products-landscape .bnl-btn--ghost:hover{box-shadow:var(--hglow-pink-hi)}
/* Text links */
.bnl-page--products-landscape .bnl-link{text-shadow:0 0 12px rgba(0,169,181,.75)}
.bnl-page--products-landscape .bnl-link:hover{text-shadow:0 0 16px rgba(0,169,181,1)}
/* FAQ questions */
.bnl-page--products-landscape .bnl-faq__q{text-shadow:0 0 10px rgba(255,255,255,.22);transition:text-shadow .2s ease,color .2s ease}
.bnl-page--products-landscape .bnl-faq__q:hover{color:var(--color-primary);text-shadow:0 0 14px rgba(0,169,181,.8)}
/* Before/after slider handle (range thumb) */
.bnl-page--products-landscape .bnl-ba-slider__range::-webkit-slider-thumb{box-shadow:var(--hglow-teal)}
.bnl-page--products-landscape .bnl-ba-slider__range::-moz-range-thumb{box-shadow:var(--hglow-teal)}
/* Holiday season cards (hover-zoom targets) */
.bnl-page--products-landscape .bnl-season__card{box-shadow:var(--hglow-teal-soft);border-radius:14px}
/* Spec panel interactives */
#specs .bnl-sp__nav-item, #specs .bnl-sp__feat, #specs .bnl-sp__kit-chip,
#specs .bnl-sp__dl, #specs .bnl-sp__dl-cta, #specs .bnl-sp__back{box-shadow:var(--hglow-teal-soft)}
#specs .bnl-sp__row{box-shadow:inset 0 0 0 1px rgba(53,207,201,.10), var(--hglow-teal-soft)}
#specs .bnl-sp__nav-item:hover, #specs .bnl-sp__feat:hover, #specs .bnl-sp__kit-chip:hover,
#specs .bnl-sp__dl:hover, #specs .bnl-sp__row:hover{box-shadow:var(--hglow-teal)}
#specs .bnl-sp__dl-cta:hover{box-shadow:var(--hglow-teal-hi)}
@media (prefers-reduced-motion:reduce){
  .bnl-page--products-landscape .bnl-faq__q{transition:none}
}

/* ==== 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); }
/* eyebrows: one treatment everywhere */
.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-landscape .bnl-dcard{transform-style:preserve-3d;}
.bnl-page--products-landscape .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-landscape .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-landscape .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-landscape .bnl-dcard__head{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.bnl-page--products-landscape .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-landscape .bnl-dcard__ic svg{width:15px;height:15px;}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-dcard__verb span{display:inline;}
.bnl-page--products-landscape .bnl-dcard__rule{height:2px;width:52px;border-radius:2px;margin:0 0 9px;background:linear-gradient(90deg,currentColor,transparent);}
.bnl-page--products-landscape .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-landscape .bnl-dcard__list{display:none;}
.bnl-page--products-landscape .bnl-dcard__cta{
  margin-top:auto;align-self:stretch;padding:11px var(--space-md);min-height:40px;font-size:12.5px;
}
.bnl-page--products-landscape .bnl-dcard__login{display:none;}
@media (min-width:860px){
  .bnl-page--products-landscape .bnl-dcard__body{padding:18px 20px 20px;}
.bnl-page--products-landscape .bnl-dcard__ic{width:36px;height:36px;}
.bnl-page--products-landscape .bnl-dcard__ic svg{width:17px;height:17px;}
.bnl-page--products-landscape .bnl-dcard__who{font-size:11px;}
.bnl-page--products-landscape .bnl-dcard__verb{font-size:34px;margin-bottom:9px;letter-spacing:-.052em;}
.bnl-page--products-landscape .bnl-dcard__rule{width:62px;margin-bottom:11px;}
.bnl-page--products-landscape .bnl-dcard__hook{font-size:16px;margin-bottom:12px;}
.bnl-page--products-landscape .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-landscape .bnl-dcard__list li{padding:5px 0;border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent);}
.bnl-page--products-landscape .bnl-dcard__list li:nth-child(n+3){display:none;}
.bnl-page--products-landscape .bnl-dcard__cta{font-size:13px;}
.bnl-page--products-landscape .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-landscape .bnl-dcard--design .bnl-dcard__login:hover{text-decoration:underline;}
}

/* each path card carries its own distinctly tinted gradient ground */
.bnl-page--products-landscape .bnl-dcard--live .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#0d1a1d 46%,#101010 100%);
}
.bnl-page--products-landscape .bnl-dcard--install .bnl-dcard__inner{
  background:linear-gradient(158deg,#2e0620 0%,#1d0d16 46%,#101010 100%);
}
.bnl-page--products-landscape .bnl-dcard--sell .bnl-dcard__inner{
  background:linear-gradient(158deg,#331904 0%,#1f1409 46%,#101010 100%);
}
.bnl-page--products-landscape .bnl-dcard--design .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#1a0d28 42%,#2b0722 72%,#101010 100%);
}
/* ---- per-path accents ---- */
.bnl-page--products-landscape .bnl-dcard--live .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 48%, var(--color-border));}
.bnl-page--products-landscape .bnl-dcard--live .bnl-dcard__verb,
.bnl-page--products-landscape .bnl-dcard--live .bnl-dcard__who,
.bnl-page--products-landscape .bnl-dcard--live .bnl-dcard__ic,
.bnl-page--products-landscape .bnl-dcard--live .bnl-dcard__rule{color:var(--color-primary);}
.bnl-page--products-landscape .bnl-dcard--install .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 48%, var(--color-border));}
.bnl-page--products-landscape .bnl-dcard--install .bnl-dcard__verb,
.bnl-page--products-landscape .bnl-dcard--install .bnl-dcard__who,
.bnl-page--products-landscape .bnl-dcard--install .bnl-dcard__ic,
.bnl-page--products-landscape .bnl-dcard--install .bnl-dcard__rule{color:var(--color-pink);}
.bnl-page--products-landscape .bnl-dcard--sell .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 48%, var(--color-border));}
.bnl-page--products-landscape .bnl-dcard--sell .bnl-dcard__verb,
.bnl-page--products-landscape .bnl-dcard--sell .bnl-dcard__who,
.bnl-page--products-landscape .bnl-dcard--sell .bnl-dcard__ic,
.bnl-page--products-landscape .bnl-dcard--sell .bnl-dcard__rule{color:var(--color-orange);}
.bnl-page--products-landscape .bnl-dcard--design .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 52%, var(--color-primary));}
.bnl-page--products-landscape .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-landscape .bnl-dcard--design .bnl-dcard__who,
.bnl-page--products-landscape .bnl-dcard--design .bnl-dcard__ic{color:var(--color-primary);}
.bnl-page--products-landscape .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;}
/* ---- idle float where there's no cursor to track ---- */
@property --bnl-ry{syntax:'<angle>';initial-value:0deg;inherits:false;}
@property --bnl-rx{syntax:'<angle>';initial-value:0deg;inherits:false;}
@media (hover:none){
  @keyframes bnl-card-float{
    0%,100%{--bnl-ry:-3.5deg;--bnl-rx:2.2deg;}
    50%    {--bnl-ry: 3.5deg;--bnl-rx:4.8deg;}
  }
  #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-landscape .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-landscape .bnl-dcard__inner{
  background-clip:padding-box;
  isolation:isolate;
}
.bnl-page--products-landscape .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-landscape .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-landscape .bnl-dcard--live   {--bnl-cardfloor:color-mix(in srgb, var(--color-primary) 22%, transparent);}
.bnl-page--products-landscape .bnl-dcard--install{--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 22%, transparent);}
.bnl-page--products-landscape .bnl-dcard--sell   {--bnl-cardfloor:color-mix(in srgb, var(--color-orange) 20%, transparent);}
.bnl-page--products-landscape .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-landscape .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;}
}
/* ---- a livelier idle (rev34): doubled yaw, wider pitch, vertical drift ---- */
@media (hover:none){
  @keyframes bnl-card-float{
    0%,100%{--bnl-ry:-7.5deg;--bnl-rx:1.2deg;--bnl-fy:-4px;}
    28%    {--bnl-ry: 2.5deg;--bnl-rx:6.4deg;--bnl-fy: 3px;}
    58%    {--bnl-ry: 7.5deg;--bnl-rx:2.6deg;--bnl-fy: 5px;}
    82%    {--bnl-ry:-1.5deg;--bnl-rx:6.0deg;--bnl-fy:-1px;}
  }
  #perf .bnl-rot__item[data-pos="0"]{animation:bnl-card-float 9s ease-in-out infinite;}
}
@property --bnl-fy{syntax:'<length>';initial-value:0px;inherits:true;}
#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);
}
/* the shadow answers the drift - tighter and darker as the card settles */
@media (hover:none){
  @keyframes bnl-card-shadow{
    0%,100%{transform:scaleX(.96) scaleY(.9);opacity:.78;}
    58%    {transform:scaleX(1.06) scaleY(1.1);opacity:.62;}
  }
  #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;}
.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-landscape .bnl-dcard--invisible .bnl-dcard__who,
.bnl-page--products-landscape .bnl-dcard--invisible .bnl-dcard__ic,
.bnl-page--products-landscape .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-landscape .bnl-dcard--build .bnl-dcard__who,
.bnl-page--products-landscape .bnl-dcard--build .bnl-dcard__ic,
.bnl-page--products-landscape .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-landscape .bnl-dcard--sealed .bnl-dcard__who,
.bnl-page--products-landscape .bnl-dcard--sealed .bnl-dcard__ic,
.bnl-page--products-landscape .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-landscape .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;}