/* Page styles — Home (rev49). Scoped under .bnl-page--home.
   Genie launcher is NOT here — bnl-genie-launcher.css, BRI-302.
   Preview chrome is NOT here — 99-preview-chrome-rev49.css, DO NOT ENQUEUE. */

*{box-sizing:border-box;}
body{margin:0;background:var(--color-bg);}

/* animated stat digits — same mechanism as rev39.
   inherits:true so the animated value on .bnl-stats__item reaches
   the .bnl-stats__digits child that actually renders the counter. */
@property --bnl-statn{syntax:'<integer>';initial-value:0;inherits:true;}

/* =====================================================================
   REAL PHOTOGRAPHY — each blob declared once, referenced by var() so
   the same image can be reused in several slots at zero byte cost.
   Sources: Austen's install photos, EXIF-rotated, WebP q68-74.
===================================================================== */
:root{
  --img-sys-flood:url("/wp-content/uploads/2026/08/home-sys-flood.webp");
  --img-roofline-rwb:url("/wp-content/uploads/2026/08/home-roofline-rwb.webp");
  --img-roofline-warm:url("/wp-content/uploads/2026/08/home-roofline-warm.webp");
  --img-cage-white:url("/wp-content/uploads/2026/08/home-cage-white.webp");
  --img-cage-amber:url("/wp-content/uploads/2026/08/home-cage-amber.webp");
  --img-cage-green:url("/wp-content/uploads/2026/08/home-cage-green.webp");
  --img-cage-cyan:url("/wp-content/uploads/2026/08/home-cage-cyan.webp");
  --img-cage-blue:url("/wp-content/uploads/2026/08/home-cage-blue.webp");
  --img-cage-violet:url("/wp-content/uploads/2026/08/home-cage-violet.webp");
  --img-cage-dock:url("/wp-content/uploads/2026/08/home-cage-dock.webp");
  --img-app-phone:url("/wp-content/uploads/2026/08/home-app-phone.webp");
  --img-logo-full:url("/wp-content/uploads/2026/08/home-logo-full.webp");
  --img-logo-mark:url("/wp-content/uploads/2026/08/home-logo-mark.webp");
  --img-genie:url("/wp-content/uploads/2026/08/home-genie.webp");
  --img-cage-off:url("/wp-content/uploads/2026/08/home-cage-off.webp");
  --img-cage-on:url("/wp-content/uploads/2026/08/home-cage-on.webp");
  --img-sys-landscape:url("/wp-content/uploads/2026/08/home-sys-landscape.webp");
  --img-sys-poolcage:url("/wp-content/uploads/2026/08/home-sys-poolcage.webp");
  --img-sys-soffit:url("/wp-content/uploads/2026/08/home-sys-soffit.webp");
  --img-sys-deck:url("/wp-content/uploads/2026/08/home-sys-deck.webp");
  --img-sys-sconce:url("/wp-content/uploads/2026/08/home-sys-sconce.webp");
  --img-sys-roofline:url("/wp-content/uploads/2026/08/home-sys-roofline.webp");
  --img-sys-bistro:url("/wp-content/uploads/2026/08/home-sys-bistro.webp");
  --img-academy-class:url("/wp-content/uploads/2026/08/home-academy-class.webp");
}
.bnl-ph{background-size:cover;background-position:center;background-repeat:no-repeat;}

/* ======================= PAGE ======================= */
.bnl-page--home{
  /* Bricolage Grotesque is optically sized — let the browser drive the opsz
     axis from font-size so big type tightens and small type stays open. */
  font-optical-sizing:auto;
  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;
  padding-bottom:76px;
}
.bnl-page--home img{max-width:100%;}
.bnl-page--home section[id]{scroll-margin-top:90px;}
.bnl-page--home .bnl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.bnl-page--home a.bnl-skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--color-pink);color:#fff;padding:12px 18px;border-radius:var(--radius-sm);}
.bnl-page--home a.bnl-skip:focus{left:var(--space-md);top:var(--space-md);}

/* sections + seamless alt bands (verbatim treatment from rev39) */
.bnl-page--home .bnl-section{padding:var(--space-xl) var(--space-md);}
.bnl-page--home .bnl-section--alt{
  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--home .bnl-section__inner{max-width:var(--width-content);margin:0 auto;}

/* type */
.bnl-page--home .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--home .bnl-heading--section{font-size:clamp(30px,4.6vw,46px);}
.bnl-page--home .bnl-heading--center{text-align:center;}
.bnl-page--home .bnl-lede{color:var(--color-text-muted);margin:0 0 var(--space-lg);}
.bnl-page--home .bnl-lede--center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;}
.bnl-page--home .bnl-gradient-text{
  background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text;
  color:var(--color-pink); -webkit-text-fill-color:transparent;
}
.bnl-page--home .bnl-eyebrow-label{
  font-family:var(--font-heading-proposed); font-size:var(--text-small);
  font-weight:var(--font-weight-semibold); letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-primary);
  margin:0 0 var(--space-md);
}

/* buttons — outlined + ambient glow, matching rev39 exactly */
.bnl-page--home .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 .2s ease, background-color .2s ease, border-color .2s ease;
}
.bnl-page--home .bnl-btn--primary{background:transparent;color:var(--color-white);border:1.5px solid var(--color-pink);box-shadow:var(--glow-ambient-pink);}
.bnl-page--home .bnl-btn--primary:hover{box-shadow:var(--hglow-pink-hi);background:color-mix(in srgb, var(--color-pink) 12%, transparent);}
.bnl-page--home .bnl-btn--secondary{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);box-shadow:var(--glow-ambient-teal);}
.bnl-page--home .bnl-btn--secondary:hover{box-shadow:var(--hglow-teal-hi);background:color-mix(in srgb, var(--color-primary) 12%, transparent);}
.bnl-page--home .bnl-btn-row{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-lg);}
@media (max-width:767px){
  .bnl-page--home .bnl-btn-row{justify-content:center;}
  .bnl-page--home .bnl-btn-row .bnl-btn{width:100%;}
}
.bnl-page--home .bnl-link{color:var(--color-primary);text-decoration:none;font-family:var(--font-heading-proposed);font-weight:var(--font-weight-semibold);}
.bnl-page--home .bnl-link:hover{text-decoration:underline;}
.bnl-page--home .bnl-btn:focus-visible,
.bnl-page--home .bnl-link:focus-visible,
.bnl-page--home button:focus-visible,
.bnl-page--home input:focus-visible,
.bnl-page--home [tabindex]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);}

.bnl-page--home .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);
}

/* ---- MEDIA SLOT (preview only — replace with real asset) ---- */
.bnl-slot{
  position:relative; display:grid; place-items:center; text-align:center;
  border-radius:var(--radius-md); overflow:hidden;
  border:1.5px dashed color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background:
    radial-gradient(120% 90% at 50% 115%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #101014, #0A0A0A);
  color:var(--color-text-muted); padding:var(--space-lg);
}
.bnl-slot__tag{
  font-family:var(--font-heading-proposed); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-primary); margin-bottom:6px;
}
.bnl-slot__name{font-size:var(--text-small);line-height:1.5;max-width:44ch;}
.bnl-slot--hero{aspect-ratio:16/9;}
.bnl-slot--wide{aspect-ratio:21/9;}
.bnl-slot--square{aspect-ratio:1/1;}
.bnl-slot--4x3{aspect-ratio:4/3;}

/* ======================= HEADER — premium lockup (rev12) ======================= */



/* logo mark — replace the inline bulb with bnlt-logo-mark.svg */





/* the secondary line reads as a peer, not a footnote */


/* what the company does, then the four ways it shows up */





/* the four ways, cycling — each with its own colour and glow */
.bnl-cycle{
  margin:0;display:grid;font-family:var(--font-heading-proposed);
  font-size:clamp(12.5px,3.6vw,17px);font-weight:800;letter-spacing:-.02em;line-height:1.15;
}
.bnl-cycle__w{grid-area:1/1;justify-self:center;white-space:nowrap;opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .bnl-cycle__w{animation:bnl-cycle 10.4s cubic-bezier(.4,0,.2,1) infinite;}
  .bnl-cycle__w--live{animation-delay:0s;}
  .bnl-cycle__w--install{animation-delay:2.6s;}
  .bnl-cycle__w--sell{animation-delay:5.2s;}
  .bnl-cycle__w--design{animation-delay:7.8s;}
}
@media (prefers-reduced-motion:reduce){ .bnl-cycle__w--live{opacity:1;} }
@keyframes bnl-cycle{
  0%      {opacity:0;transform:translateY(5px) scale(.97);filter:blur(2px);}
  3%,20%  {opacity:1;transform:none;filter:blur(0);}
  24%,100%{opacity:0;transform:translateY(-5px) scale(.99);filter:blur(2px);}
}
.bnl-cycle__w--live   {color:var(--color-primary);text-shadow:0 0 16px color-mix(in srgb,var(--color-primary) 62%,transparent);}
.bnl-cycle__w--install{color:var(--color-pink);   text-shadow:0 0 16px color-mix(in srgb,var(--color-pink) 62%,transparent);}
.bnl-cycle__w--sell   {color:var(--color-orange); text-shadow:0 0 16px color-mix(in srgb,var(--color-orange) 62%,transparent);}
.bnl-cycle__w--design {
  background:var(--gradient-lux);-webkit-background-clip:text;background-clip:text;
  color:var(--color-pink);-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--color-pink) 45%,transparent));
}





/* ---------- pills: gradient border on a glass fill, with a sheen sweep ---------- */
/* rev27: three across on one line. They were stacking two-up and wrapping the
   third onto its own row, which is what made the block feel loose. */













/* state switcher — PREVIEW CONTROL ONLY, not a real UI element */






/* ======================= HERO ======================= */
.bnl-page--home .bnl-hero{padding:var(--space-md) var(--space-md) var(--space-lg);}
@media (max-width:899px){
  /* the hero must not eat the whole viewport before the paths appear */
  .bnl-page--home .bnl-hero__grid{gap:var(--space-md);}
  .bnl-page--home .bnl-checks{gap:8px;margin-bottom:var(--space-md);}
  .bnl-page--home .bnl-checks li{font-size:12.5px;}
  .bnl-page--home .bnl-checks__ic{width:30px;height:30px;}
  .bnl-page--home .bnl-checks__ic svg{width:15px;height:15px;}
  .bnl-page--home .bnl-microproof{margin-top:var(--space-md);gap:10px var(--space-md);font-size:11.5px;}
  .bnl-page--home .bnl-hero .bnl-lede{margin-bottom:var(--space-md);font-size:14px;}
  .bnl-page--home .bnl-hero__title{margin-bottom:var(--space-md);}
}
.bnl-page--home .bnl-hero__grid{
  max-width:var(--width-content);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:var(--space-lg);align-items:center;
}
/* on a phone the video leads — it's the first thing you should see */
.bnl-page--home .bnl-hero__media{order:1;}
.bnl-page--home .bnl-hero__content{order:2;}
/* the source video is VERTICAL (1080x1840), so it gets a portrait frame
   beside the copy on desktop rather than being cropped into a 16:9 band */
@media (min-width:900px){
  .bnl-page--home .bnl-hero__grid{grid-template-columns:1.25fr .75fr;gap:var(--space-xl);}
  .bnl-page--home .bnl-hero__media{order:2;}
  .bnl-page--home .bnl-hero__content{order:1;}
}
.bnl-page--home .bnl-hero__frame{
  position:relative;overflow:hidden;border-radius:var(--radius-md);
  aspect-ratio:16/11;max-height:38vh;margin:0 auto;width:100%;
  border:1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  box-shadow:var(--glow-ambient-teal), var(--glow-ambient-pink);
  background:#000;
}
@media (min-width:900px){
  .bnl-page--home .bnl-hero__frame{aspect-ratio:9/16;max-height:none;}
}
.bnl-page--home .bnl-hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.bnl-page--home .bnl-hero__content{min-width:0;}
/* rev25: micro-proof strip removed; the hero column closes up behind it */
.bnl-page--home .bnl-hero__inner{max-width:640px;}
.bnl-page--home .bnl-hero__eyebrow{
  font-family:var(--font-heading-proposed); font-size:var(--text-small);
  font-weight:var(--font-weight-semibold); letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-primary); margin:0 0 var(--space-md);
}
.bnl-page--home .bnl-hero__title{
  font-family:var(--font-heading-proposed); font-weight:var(--font-weight-bold);
  font-size:clamp(40px,7vw,72px); line-height:1.04; letter-spacing:-0.03em;
  margin:0 0 var(--space-ml);
}
.bnl-page--home .bnl-checks{list-style:none;padding:0;margin:0 0 var(--space-lg);display:grid;gap:12px;}
.bnl-page--home .bnl-checks li{display:flex;gap:12px;align-items:center;font-size:var(--text-small);color:var(--color-text);}
.bnl-page--home .bnl-checks__ic{
  flex:none;width:38px;height:38px;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) 40%, transparent);
  box-shadow:0 0 18px -2px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.bnl-page--home .bnl-checks__ic svg{width:18px;height:18px;}
@media (min-width:768px){ .bnl-page--home .bnl-checks{grid-template-columns:1fr 1fr;} }
.bnl-page--home .bnl-microproof{
  display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;
  margin-top:var(--space-lg);padding-top:var(--space-md);
  border-top:1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  font-size:var(--text-small);color:var(--color-text-muted);
}
.bnl-page--home .bnl-microproof b{color:var(--color-text);font-weight:600;}
.bnl-page--home .bnl-microproof span{display:inline-flex;align-items:center;gap:7px;}
.bnl-page--home .bnl-microproof span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-primary);box-shadow:var(--hglow-teal);}


/* ======================= THREE DOORS (homepage only) ======================= */
.bnl-page--home .bnl-doors{display:grid;gap:var(--space-md);}
@media (min-width:900px){ .bnl-page--home .bnl-doors{grid-template-columns:repeat(3,1fr);} }
.bnl-door{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:inherit;
  background:var(--color-bg-elevated);
  border:1px solid var(--color-border);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bnl-door:hover{transform:translateY(-4px);}
.bnl-door__media{aspect-ratio:16/10;}
.bnl-door__body{padding:var(--space-ml);display:flex;flex-direction:column;flex:1;}
.bnl-door__verb{
  font-family:var(--font-heading-proposed);font-weight:800;
  font-size:var(--text-small);letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 10px;
}
.bnl-door__hook{
  font-family:var(--font-heading-proposed);font-weight:700;
  font-size:clamp(20px,2.4vw,25px);line-height:1.18;letter-spacing:-.02em;
  margin:0 0 10px;color:#fff;
}
.bnl-door__who{font-size:var(--text-small);color:var(--color-text-muted);margin:0 0 var(--space-md);}
.bnl-door__list{list-style:none;padding:0;margin:0 0 var(--space-md);font-size:var(--text-small);color:var(--color-text-muted);}
.bnl-door__list li{padding:5px 0;border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent);}
.bnl-door__go{margin-top:auto;font-family:var(--font-heading-proposed);font-weight:600;font-size:var(--text-small);}
/* one accent per door */
.bnl-door--live{border-color:color-mix(in srgb, var(--color-primary) 34%, var(--color-border));}
.bnl-door--live:hover{border-color:var(--color-primary);box-shadow:var(--glow-ambient-teal);}
.bnl-door--live .bnl-door__verb,.bnl-door--live .bnl-door__go{color:var(--color-primary);}
.bnl-door--install{border-color:color-mix(in srgb, var(--color-pink) 34%, var(--color-border));}
.bnl-door--install:hover{border-color:var(--color-pink);box-shadow:var(--glow-ambient-pink);}
.bnl-door--install .bnl-door__verb,.bnl-door--install .bnl-door__go{color:var(--color-pink);}
.bnl-door--sell{border-color:color-mix(in srgb, var(--color-orange) 34%, var(--color-border));}
.bnl-door--sell:hover{border-color:var(--color-orange);box-shadow:0 0 48px -12px color-mix(in srgb, var(--color-orange) 55%, transparent);}
.bnl-door--sell .bnl-door__verb,.bnl-door--sell .bnl-door__go{color:var(--color-orange);}

/* ======================= DAY / NIGHT SLIDER (from rev39) ======================= */
.bnl-page--home .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--home .bnl-ba-slider .bnl-slot{position:absolute;inset:0;height:100%;border:0;border-radius:0;}
.bnl-page--home .bnl-ba-slider__top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);}
.bnl-page--home .bnl-ba-slider__top .bnl-slot{background:radial-gradient(120% 90% at 50% 115%, color-mix(in srgb, var(--color-pink) 20%, transparent), transparent 70%), linear-gradient(180deg,#1a1520,#0A0A0A);}
.bnl-page--home .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--home .bnl-ba-slider__knob{
  position:absolute;top:50%;left:var(--pos,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;pointer-events:none;z-index:2;
}
.bnl-page--home .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--home .bnl-ba-slider__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:64px;height:480px;background:transparent;}
.bnl-page--home .bnl-ba-slider__range::-moz-range-thumb{width:64px;height:480px;border:0;background:transparent;}
.bnl-page--home .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--home .bnl-ba-slider__tag--day{left:var(--space-md);}
.bnl-page--home .bnl-ba-slider__tag--night{right:var(--space-md);}
.bnl-page--home .bnl-ba-slider__hint{text-align:center;color:var(--color-text-muted);font-size:var(--text-small);margin-top:var(--space-md);}

/* ======================= ECOSYSTEM (Seven Systems) ======================= */
.bnl-page--home .bnl-eco{position:relative;border-radius:var(--radius-md);overflow:hidden;}
.bnl-page--home .bnl-eco-links{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;margin-top:var(--space-lg);}
.bnl-page--home .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--home .bnl-eco-links a:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--shadow-glow-teal);}
.bnl-page--home .bnl-eco-links a[aria-disabled="true"]{opacity:.45;pointer-events:none;}

/* ======================= SYSTEMS SLIDER (rev10) ======================= */
.bnl-page--home .bnl-sysrail{margin-top:var(--space-lg);}
.bnl-page--home .bnl-sysrail__viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:4px 0 10px;
  /* fade the edges so it's obvious there's more either side */
  mask-image:linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.bnl-page--home .bnl-sysrail__viewport::-webkit-scrollbar{display:none;}
.bnl-page--home .bnl-sysrail__track{display:flex;gap:var(--space-md);padding:0 2px;}
.bnl-page--home .bnl-sysc{
  flex:0 0 72%;scroll-snap-align:center;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:var(--radius-md);overflow:hidden;
  background:linear-gradient(170deg,#171a1c 0%,#111 70%);
  border:1px solid var(--color-border);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bnl-page--home a.bnl-sysc:hover{border-color:var(--color-primary);box-shadow:var(--glow-ambient-teal);transform:translateY(-3px);}
.bnl-page--home .bnl-sysc--soon{opacity:.55;}
.bnl-page--home .bnl-sysc__media{height:108px;flex:none;}
.bnl-page--home .bnl-sysc__media .bnl-slot{height:100%;aspect-ratio:auto;border-radius:0;border-width:0 0 1.5px 0;padding:8px;}
.bnl-page--home .bnl-sysc__media .bnl-slot__name{display:none;}
.bnl-page--home .bnl-sysc__body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;}
.bnl-page--home .bnl-sysc__n{
  font-family:var(--font-heading-proposed);font-weight:800;font-size:11px;letter-spacing:.16em;
  color:var(--color-primary);margin:0 0 6px;
}
.bnl-page--home .bnl-sysc__t{
  font-family:var(--font-heading-proposed);font-weight:700;font-size:17px;
  letter-spacing:-.02em;line-height:1.15;color:#fff;margin:0 0 7px;
}
.bnl-page--home .bnl-sysc__d{font-size:12.5px;line-height:1.42;color:var(--color-text-muted);margin:0 0 10px;}
.bnl-page--home .bnl-sysc__w{
  font-size:11.5px;color:var(--color-text);margin:0 0 12px;padding-top:9px;
  border-top:1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
/* rev39 · the per-system action is a button, not a tinted word.
   It was a 12px teal string with no hit affordance sitting under a 240px
   photograph, and the only real button in the section was a single "See all
   seven systems" underneath the whole rail — which pointed at /products/, one
   of the three soft-404s. The card carries its own action now and the rail CTA
   is gone. The card itself is still the <a>; this is the visible affordance
   inside it, so no nested interactive element is introduced. */
.bnl-page--home .bnl-sysc__go{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:9px 16px;
  border-radius:var(--radius-pill,999px);
  font-family:var(--font-heading-proposed);font-weight:600;
  font-size:12.5px;letter-spacing:.01em;
  color:var(--color-primary);
  border:1.5px solid color-mix(in srgb,var(--color-primary) 62%,transparent);
  background:color-mix(in srgb,var(--color-primary) 7%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--color-primary) 16%,transparent);
  transition:background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bnl-sysc:hover .bnl-page--home .bnl-sysc__go,
.bnl-page--home .bnl-sysc:hover .bnl-sysc__go,
.bnl-page--home .bnl-sysc:focus-visible .bnl-sysc__go{
  background:color-mix(in srgb,var(--color-primary) 15%,transparent);
  border-color:var(--color-primary);
  box-shadow:0 0 22px color-mix(in srgb,var(--color-primary) 30%,transparent);
}
.bnl-page--home .bnl-sysrail__nav{
  display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-top:10px;
}
.bnl-page--home .bnl-sysrail__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;
}
.bnl-page--home .bnl-sysrail__arrow:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34);box-shadow:var(--hglow-teal-soft);}
.bnl-page--home .bnl-sysrail__hint{font-size:11px;color:var(--color-text-muted);text-align:center;}
.bnl-page--home .bnl-sysrail.is-manual .bnl-sysrail__hint{opacity:.4;}
@media (min-width:640px){ .bnl-page--home .bnl-sysc{flex:0 0 44%;} }
@media (min-width:900px){
  .bnl-page--home .bnl-sysc{flex:0 0 calc((100% - (2.5 * var(--space-md))) / 3.4);}
  .bnl-page--home .bnl-sysc__media{height:132px;}
  .bnl-page--home .bnl-sysc__t{font-size:19px;}
}

/* ======================= LIGHT GENIE BLOCK (rev10) ======================= */
.bnl-page--home .bnl-genieblk{
  display:grid;grid-template-columns:1fr;gap:var(--space-ml);align-items:center;
  margin:0 0 var(--space-xl);padding:var(--space-ml);border-radius:var(--radius-md);
  /* rev24: pure black, because the artwork's own background is pure black.
     Matching them is what removes the frame — not a blend mode. */
  background:#000;
  border:1px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  box-shadow:var(--glow-ambient-teal);
}
@media (min-width:820px){
  .bnl-page--home .bnl-genieblk{grid-template-columns:.8fr 1.2fr;gap:var(--space-lg);padding:var(--space-lg);}
}
.bnl-page--home .bnl-genieblk__art .bnl-slot{border-radius:var(--radius-md);}
.bnl-page--home .bnl-genieblk__k{
  font-family:var(--font-heading-proposed);font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-primary);margin:0 0 var(--space-md);
}
.bnl-page--home .bnl-tiers{list-style:none;padding:0;margin:0 0 var(--space-md);display:grid;gap:12px;}
.bnl-page--home .bnl-tiers__row{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--color-text-muted);line-height:1.45;}
.bnl-page--home .bnl-tiers__row b{color:#fff;font-weight:600;}
.bnl-page--home .bnl-tiers__ic{
  flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-pill);
  border:1px solid currentColor;box-shadow:0 0 16px -5px currentColor;
}
.bnl-page--home .bnl-tiers__ic svg{width:16px;height:16px;}
.bnl-page--home .bnl-tiers__row--home .bnl-tiers__ic{color:var(--color-primary);}
.bnl-page--home .bnl-tiers__row--pro  .bnl-tiers__ic{color:var(--color-pink);}
.bnl-page--home .bnl-tiers__row--dist .bnl-tiers__ic{color:var(--color-orange);}
.bnl-page--home .bnl-genieblk__fine{
  font-size:11.5px;color:var(--color-text-muted);margin:0;padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}

/* ======================= APPROVED BADGES ======================= */
.bnl-page--home .bnl-approved{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:640px;margin:0 auto var(--space-lg);
}
.bnl-page--home .bnl-approved__item{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:14px 8px;border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-bg-elevated) 82%, transparent);
  border:1px solid var(--color-border);
  font-family:var(--font-heading-proposed);
}
.bnl-page--home .bnl-approved__item b{font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;line-height:1.15;}
.bnl-page--home .bnl-approved__item span:last-child{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted);
}
.bnl-page--home .bnl-approved__ic{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-pill);
  border:1px solid currentColor;box-shadow:0 0 16px -5px currentColor;margin-bottom:3px;
}
.bnl-page--home .bnl-approved__ic svg{width:16px;height:16px;}
.bnl-page--home .bnl-approved__item--home{border-color:color-mix(in srgb, var(--color-primary) 40%, var(--color-border));}
.bnl-page--home .bnl-approved__item--home .bnl-approved__ic{color:var(--color-primary);}
.bnl-page--home .bnl-approved__item--pro{border-color:color-mix(in srgb, var(--color-pink) 40%, var(--color-border));}
.bnl-page--home .bnl-approved__item--pro .bnl-approved__ic{color:var(--color-pink);}
.bnl-page--home .bnl-approved__item--dist{border-color:color-mix(in srgb, var(--color-orange) 40%, var(--color-border));}
.bnl-page--home .bnl-approved__item--dist .bnl-approved__ic{color:var(--color-orange);}

/* ======================= REVIEW WALL — vertical marquee ======================= */
.bnl-page--home .bnl-rvwall{
  position:relative;overflow:hidden;height:420px;
  mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.bnl-page--home .bnl-rvwall__cols{display:grid;grid-template-columns:1fr;gap:var(--space-md);height:100%;}
@media (min-width:760px){ .bnl-page--home .bnl-rvwall__cols{grid-template-columns:repeat(3,1fr);} }
.bnl-page--home .bnl-rvcol{overflow:hidden;}
.bnl-page--home .bnl-rvcol--b,.bnl-page--home .bnl-rvcol--c{display:none;}
@media (min-width:760px){ .bnl-page--home .bnl-rvcol--b,.bnl-page--home .bnl-rvcol--c{display:block;} }
.bnl-page--home .bnl-rvcol__run{display:grid;gap:var(--space-md);}
@media (prefers-reduced-motion:no-preference){
  /* rev18: each column's items are duplicated in the markup, so -50% lands
     exactly on the clone and the belt never jumps. Speeds nudged up a little
     so the motion is legible instead of ambiguous. */
  .bnl-page--home .bnl-rvcol--a .bnl-rvcol__run{animation:bnl-rvup 26s linear infinite;}
  .bnl-page--home .bnl-rvcol--b .bnl-rvcol__run{animation:bnl-rvdn 31s linear infinite;}
  .bnl-page--home .bnl-rvcol--c .bnl-rvcol__run{animation:bnl-rvup 36s linear infinite;}
  .bnl-page--home .bnl-rvwall:hover .bnl-rvcol__run{animation-play-state:paused;}
}
@keyframes bnl-rvup{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@keyframes bnl-rvdn{from{transform:translateY(-50%);}to{transform:translateY(0);}}
.bnl-page--home .bnl-rv{
  margin:0;padding:16px;border-radius:var(--radius-md);
  background:linear-gradient(168deg,#181b1d 0%,#111 78%);
  border:1px solid var(--color-border);
}
.bnl-page--home .bnl-rv__stars{color:var(--color-orange);letter-spacing:.1em;font-size:12px;margin-bottom:9px;}
.bnl-page--home .bnl-rv__q{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--color-text);}
.bnl-page--home .bnl-rv__who{display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--color-text-muted);}
.bnl-page--home .bnl-rv__who b{color:#fff;font-weight:600;font-family:var(--font-heading-proposed);}
.bnl-page--home .bnl-rv__chip{
  display:inline-flex;align-items:center;gap:5px;margin-top:11px;
  font-family:var(--font-heading-proposed);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);
  padding:5px 9px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--color-primary) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.bnl-page--home .bnl-rv__chip svg{width:11px;height:11px;}
.bnl-page--home .bnl-rvwall__note{text-align:center;font-size:11px;color:#7d7d7d;margin-top:var(--space-md);}

/* ======================= ACADEMY ======================= */
.bnl-page--home .bnl-academy{
  border-radius:var(--radius-md);overflow:hidden;text-align:center;
  border:1px solid color-mix(in srgb, var(--color-orange) 38%, var(--color-border));
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--color-orange) 13%, transparent), transparent 65%),
    var(--color-bg-elevated);
  box-shadow:0 0 56px -14px color-mix(in srgb, var(--color-orange) 45%, transparent);
}
/* rev18: was a 150px letterbox that cropped the heads off a 4:3 photograph.
   Same treatment as the systems rail now — whole frame visible, contained on
   near-black so the surround reads as intentional matting. */
/* rev23: the class photo was a bright band sitting above the copy, and it read
   as a white rectangle punched into a black page. It is now the ground the
   whole section stands on — full bleed behind the type, pushed down in
   brightness and pulled toward the page's own colour so the headline can sit
   over it. Not faded: darkened. The photograph keeps its contrast, it just
   stops competing with the words. */
.bnl-page--home .bnl-academy{position:relative;overflow:hidden;isolation:isolate;}


/* the scrim: clear at the top so faces still read, closing to near-solid where
   the body copy lives */


/* rev19: the xl bottom pad left a visibly empty half-screen under the two
   buttons on a phone. Tightened, and the banner is capped so it cannot eat
   more than a third of a mobile viewport. */

@media (max-width:767px){
}
.bnl-page--home .bnl-academy .bnl-eyebrow-label{color:var(--color-orange);}

/* ======================= COMPARE ======================= */
.bnl-page--home .bnl-cmp{
  border-radius:var(--radius-md);padding:var(--space-ml);
  background:var(--color-bg-elevated);border:1px solid var(--color-border);
  max-width:820px;margin:var(--space-lg) auto 0;
}
.bnl-page--home .bnl-cmp__toggle{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-ml);
}
.bnl-page--home .bnl-cmp__seg{
  font-family:var(--font-heading-proposed);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--color-border);color:var(--color-text-muted);
}
.bnl-page--home .bnl-cmp__seg.is-on{color:#fff;border-color:var(--color-primary);box-shadow:var(--hglow-teal);}
.bnl-page--home .bnl-cmp__grid{display:grid;gap:0;}
.bnl-page--home .bnl-cmp__row{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;align-items:center;
  padding:11px 0;border-top:1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  font-size:12px;color:var(--color-text-muted);
}
.bnl-page--home .bnl-cmp__row b{color:var(--color-primary);font-weight:700;font-family:var(--font-heading-proposed);font-size:12.5px;}
.bnl-page--home .bnl-cmp__row--head{
  border-top:0;font-family:var(--font-heading-proposed);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#7d7d7d;
}
.bnl-page--home .bnl-cmp__row--head b{color:#fff;font-size:11px;letter-spacing:.06em;}
.bnl-page--home .bnl-cmp__fine{font-size:11px;color:#7d7d7d;margin:var(--space-md) 0 0;text-align:center;}


/* ======================= TYPE SYSTEM v2 — premium (rev12) =======================
   Three accent treatments, cycled by the job a section does:
     (a) metallic gradient  — the emotional sections
     (b) two-tone split     — the factual sections
     (c) outline stroke     — the bold single statements
   Every section carries a numbered kicker with a hairline, so the page reads
   as an edition rather than a stack of identical bands.
============================================================================ */
:root{
  --gradient-lux:linear-gradient(100deg,#00A9B5 0%,#8FE3E9 24%,#E3056B 68%,#FF74AE 100%);
  /* polished aluminium — brushed metal with a breath of teal and rose in it */
  --gradient-aluminum:linear-gradient(101deg,
    #6F787E 0%, #E4EFF1 11%, #A9B4BA 22%, #FFFFFF 33%,
    #D8E7EA 43%, #8E9AA2 54%, #F4F8F9 65%, #B6BEC4 76%,
    #EFE4EA 87%, #7E878D 100%);
}

/* --- numbered kicker with hairline --- */
.bnl-page--home .bnl-kicker{
  display:flex;align-items:center;gap:11px;margin:0 0 var(--space-md);
  font-family:var(--font-heading-proposed);
}
.bnl-page--home .bnl-kicker--center{justify-content:center;}
/* rev18: numbered kickers removed — the eyebrow now leads with a short rule,
   which reads as editorial rather than as a numbered checklist */
.bnl-page--home .bnl-kicker::before{
  content:"";height:1px;width:clamp(18px,5vw,34px);flex:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-primary) 62%,transparent));
}
.bnl-page--home .bnl-kicker--center::before{display:none;}
.bnl-page--home .bnl-kicker__t{
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,#fff 62%,var(--color-text-muted));
}
.bnl-page--home .bnl-kicker::after{
  content:"";height:1px;width:clamp(28px,9vw,90px);flex:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 55%,transparent),transparent);
}

/* --- headings --- */
.bnl-page--home .bnl-heading--section{
  font-size:clamp(31px,5vw,52px);letter-spacing:-.048em;line-height:1.02;font-weight:800;
  text-wrap:balance;
}
.bnl-page--home .bnl-gradient-text{
  background:var(--gradient-lux);-webkit-background-clip:text;background-clip:text;
  color:var(--color-pink);-webkit-text-fill-color:transparent;
}
/* (b) two-tone split */
.bnl-page--home .bnl-tone{color:var(--color-primary);}
/* brushed-aluminium treatment, reserved for the credential */
.bnl-page--home .bnl-alu{
  background:var(--gradient-aluminum);
  -webkit-background-clip:text;background-clip:text;
  color:#DDE5E9;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55));
}
.bnl-page--home .bnl-heading--xl{font-size:clamp(35px,6vw,64px);letter-spacing:-.052em;}

/* hero title — larger, metallic */
.bnl-page--home .bnl-hero__title{
  font-size:clamp(46px,8.4vw,88px);line-height:.96;letter-spacing:-.05em;font-weight:800;
  text-wrap:balance;
}
.bnl-page--home .bnl-hero__eyebrow{
  font-size:clamp(9.5px,2.5vw,12px);letter-spacing:.2em;
  color:color-mix(in srgb,#fff 58%,var(--color-primary));
}
/* section descriptor sits under the heading */
.bnl-page--home .bnl-lede--center{max-width:66ch;}


/* ---- sub-head inside a section, so a card group explains itself ---- */
.bnl-page--home .bnl-subhead{text-align:center;max-width:60ch;margin:0 auto var(--space-lg);}
.bnl-page--home .bnl-subhead__t{
  font-family:var(--font-heading-proposed);font-weight:800;
  font-size:clamp(19px,2.9vw,26px);letter-spacing:-.032em;line-height:1.15;
  color:#fff;margin:0 0 8px;
}
.bnl-page--home .bnl-subhead__d{font-size:13.5px;color:var(--color-text-muted);margin:0;}

/* ======================= COLOUR SELECTOR (rev16) =======================
   Five real photographs of one enclosure, crossfaded. The page chrome stays
   teal/pink; every saturated colour in this block comes from the product.
======================================================================= */
.bnl-page--home .bnl-cs{margin-top:var(--space-lg);}
.bnl-page--home .bnl-cs__stage{
  position:relative;overflow:hidden;border-radius:var(--radius-md);
  aspect-ratio:4/3;max-height:60vh;
  border:1px solid var(--color-border);background:#000;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
}
@media (min-width:760px){ .bnl-page--home .bnl-cs__stage{aspect-ratio:16/9;} }
.bnl-page--home .bnl-cs__layer{
  position:absolute;inset:0;opacity:0;transition:opacity .62s cubic-bezier(.4,0,.2,1);
}
.bnl-page--home .bnl-cs__layer.is-on{opacity:1;}
.bnl-page--home .bnl-cs__badge{
  position:absolute;left:14px;bottom:14px;z-index:3;
  display:flex;flex-direction:column;gap:1px;
  padding:9px 14px;border-radius:var(--radius-pill);
  background:rgba(6,6,6,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--font-heading-proposed);
}
.bnl-page--home .bnl-cs__name{font-size:14px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1;}
.bnl-page--home .bnl-cs__wl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#B8B8B8;}

/* --- control panel --- */
.bnl-page--home .bnl-cs__panel{
  display:grid;grid-template-columns:1fr;gap:var(--space-md);margin-top:var(--space-md);
}
@media (min-width:860px){ .bnl-page--home .bnl-cs__panel{grid-template-columns:1.55fr 1fr;} }
.bnl-page--home .bnl-cs__selector,
.bnl-page--home .bnl-cs__smart{
  padding:var(--space-ml);border-radius:var(--radius-md);
  background:var(--color-bg-elevated);border:1px solid var(--color-border);
}
.bnl-page--home .bnl-cs__lab{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-family:var(--font-heading-proposed);margin-bottom:14px;
}
.bnl-page--home .bnl-cs__lab span:first-child{
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
.bnl-page--home .bnl-cs__hint{font-size:11px;color:var(--color-text-muted);}

/* the track carries the five captured hues, in spectrum order */
.bnl-page--home .bnl-cs__range{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;
  cursor:pointer;display:block;margin:0 0 4px;
}
.bnl-page--home .bnl-cs__range::-webkit-slider-runnable-track{
  height:12px;border-radius:99px;
  background:linear-gradient(90deg,#FF8A2B 0%,#1FD16A 26%,#17B8C9 50%,#2B6BFF 75%,#8B5CF6 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.bnl-page--home .bnl-cs__range::-moz-range-track{
  height:12px;border-radius:99px;
  background:linear-gradient(90deg,#FF8A2B 0%,#1FD16A 26%,#17B8C9 50%,#2B6BFF 75%,#8B5CF6 100%);
  border:1px solid rgba(255,255,255,.18);
}
.bnl-page--home .bnl-cs__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;margin-top:-8px;
  background:radial-gradient(circle at 50% 34%,#fff,#DDE5E9 62%,#9AA4AA 100%);
  border:2px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.7), 0 0 0 4px rgba(255,255,255,.10);
}
.bnl-page--home .bnl-cs__range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;border:2px solid #fff;
  background:radial-gradient(circle at 50% 34%,#fff,#DDE5E9 62%,#9AA4AA 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.7);
}
.bnl-page--home .bnl-cs__range:focus-visible{outline:none;}
.bnl-page--home .bnl-cs__range:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 10px rgba(0,0,0,.7), 0 0 0 4px color-mix(in srgb,var(--color-primary) 60%,transparent);}

/* --- swatch chips --- */
.bnl-page--home .bnl-cs__chips{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px;
}
.bnl-page--home .bnl-cs__chip{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 4px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--color-border);
  font-family:var(--font-heading-proposed);min-height:44px;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.bnl-page--home .bnl-cs__sw{
  width:20px;height:20px;border-radius:50%;background:var(--c);
  border:1.5px solid rgba(255,255,255,.5);
  box-shadow:0 0 12px -1px var(--c);
}
.bnl-page--home .bnl-cs__cn{font-size:10.5px;font-weight:700;color:var(--color-text);line-height:1;}
.bnl-page--home .bnl-cs__nm{font-size:8px;letter-spacing:.08em;color:#7d7d7d;line-height:1;}
.bnl-page--home .bnl-cs__chip:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04);}
.bnl-page--home .bnl-cs__chip[aria-pressed="true"]{
  border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
  box-shadow:0 0 20px -6px var(--c);
}
.bnl-page--home .bnl-cs__chip[aria-pressed="true"] .bnl-cs__cn{color:#fff;}

/* --- smart control card --- */
.bnl-page--home .bnl-cs__smart{display:flex;flex-direction:column;}
.bnl-page--home .bnl-cs__ring{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  color:#fff;margin-bottom:12px;
  background:
    linear-gradient(#141414,#141414) padding-box,
    conic-gradient(from 200deg,#FF8A2B,#1FD16A,#17B8C9,#2B6BFF,#8B5CF6,#E3056B,#FF8A2B) border-box;
  border:2px solid transparent;
}
.bnl-page--home .bnl-cs__ring svg{width:21px;height:21px;}
.bnl-page--home .bnl-cs__st{
  font-family:var(--font-heading-proposed);font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 8px;
}
.bnl-page--home .bnl-cs__sd{font-size:13px;line-height:1.5;color:var(--color-text-muted);margin:0;}

/* --- feature strip --- */
.bnl-page--home .bnl-cs__feats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:2px;margin-top:var(--space-md);
  border-radius:var(--radius-md);overflow:hidden;
  background:var(--color-border);
}
.bnl-page--home .bnl-cs__feat{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:15px 8px;background:var(--color-bg-elevated);
  font-family:var(--font-heading-proposed);
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-muted);line-height:1.25;
}
.bnl-page--home .bnl-cs__feat svg{width:20px;height:20px;color:var(--color-primary);}
.bnl-page--home .bnl-cs__note{
  font-size:12px;color:var(--color-text-muted);text-align:center;
  margin:var(--space-md) auto 0;max-width:64ch;
}
.bnl-page--home .bnl-cs__note b{color:#fff;font-weight:600;}
@media (prefers-reduced-motion:reduce){
  .bnl-page--home .bnl-cs__layer{transition:none;}
}


/* ======================= rev17 ADDITIONS ======================= */
/* real logo mark — screen blend drops the black ground of the artwork */

.bnl-page--home .bnl-foot__logo{
  width:180px;height:140px;margin-bottom:12px;
  background-image:var(--img-logo-full);background-size:contain;
  background-position:left center;background-repeat:no-repeat;mix-blend-mode:screen;
}

/* the cycling four ways — squared technical face, deliberately not the display font */
.bnl-cycle{font-family:'Chakra Petch',var(--font-heading-proposed),sans-serif;font-weight:700;letter-spacing:.01em;}

/* brushed silver, warmed either pink or blue — replaces the outlined style */
.bnl-page--home .bnl-silver-blue{
  background:linear-gradient(101deg,#7C858C 0%,#EAF2F6 12%,#AFBCC6 24%,#FFFFFF 35%,
    #BFD8EE 46%,#4A9EFF 58%,#E8F1F8 71%,#8FA6BA 84%,#F2F7FA 100%);
  -webkit-background-clip:text;background-clip:text;color:#DDE5E9;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
.bnl-page--home .bnl-silver-pink{
  background:linear-gradient(101deg,#8A8288 0%,#F4EDF1 12%,#C4B2BB 24%,#FFFFFF 35%,
    #F6C4DA 46%,#E3056B 58%,#FBE6EF 71%,#BE95A6 84%,#FDF6F9 100%);
  -webkit-background-clip:text;background-clip:text;color:#EFD9E4;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}

/* system cards: show the WHOLE photograph, no aggressive crop */
.bnl-page--home .bnl-sysc__media{height:auto;aspect-ratio:4/3;}
.bnl-page--home .bnl-sysc__media .bnl-slot{
  height:100%;aspect-ratio:auto;
  /* rev42: was `contain`, which fits the image inside the slot and leaves bars
     wherever the aspect ratios disagree. Every landscape card is 1000x750 in a
     4:3 slot so it never showed — but the flood strip is 1320x479 and needed a
     `cover` override in rev30, and the deck photograph is 900x1200 PORTRAIT and
     was rendering down the left half of its card with black beside it.
     Two special cases is enough: cover is the default now. */
  background-size:cover !important;background-color:#070707;
}
@media (min-width:900px){ .bnl-page--home .bnl-sysc__media{aspect-ratio:4/3;} }

/* the deck photograph is the only portrait asset in the rail; cover crops top
   and bottom, so anchor it where the walkway and railings are */
.bnl-page--home .bnl-sysc__media .bnl-slot[style*="--img-sys-deck"]{
  background-position:center 38% !important;
}

/* Light Genie artwork */
/* rev18: the artwork now carries a real alpha channel, so mix-blend-mode is
   gone. Screen-blending a JPEG meant every bit of near-black noise lifted into
   a visible rectangle; with true transparency he sits on any backdrop, and the
   glow can be a genuine light source instead of a compositing side-effect. */
.bnl-page--home .bnl-genieart{
  position:relative;
  background-image:var(--img-genie);
  background-size:contain;background-position:center bottom;background-repeat:no-repeat;
  aspect-ratio:820/1330;width:100%;max-height:56vh;margin:0 auto;
  /* no blend mode, no filter — the art is already right */
}
/* the light he is casting, sitting behind him */
.bnl-page--home .bnl-genieart::before{
  content:"";position:absolute;left:50%;bottom:6%;translate:-50% 0;
  width:118%;aspect-ratio:1/1;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 62%,
    color-mix(in srgb,var(--color-pink) 26%,transparent) 0%,
    color-mix(in srgb,#7A3BFF 16%,transparent) 34%,
    transparent 66%);
}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-genieart::before{animation:bnl-genie-breathe 7s ease-in-out infinite;}
}
@keyframes bnl-genie-breathe{
  0%,100%{opacity:.72;transform:scale(1);}
  50%    {opacity:1;  transform:scale(1.06);}
}
@media (min-width:820px){ .bnl-page--home .bnl-genieart{max-height:none;} }

/* app-control band */
.bnl-page--home .bnl-app{
  display:grid;grid-template-columns:1fr;gap:var(--space-ml);align-items:center;
  margin-top:var(--space-lg);
}
@media (min-width:880px){ .bnl-page--home .bnl-app{grid-template-columns:1fr 1fr;gap:var(--space-lg);} }
.bnl-page--home .bnl-app__shot{
  background-image:var(--img-app-phone);
  aspect-ratio:1000/655;border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb,var(--color-pink) 34%,var(--color-border));
  box-shadow:var(--glow-ambient-pink);
}
.bnl-page--home .bnl-app__list{list-style:none;padding:0;margin:0 0 var(--space-md);display:grid;gap:var(--space-md);}
.bnl-page--home .bnl-app__list li{display:grid;grid-template-columns:auto 1fr;gap:4px 13px;align-items:start;}
.bnl-page--home .bnl-app__ic{
  grid-row:span 2;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-pill);
  color:var(--color-primary);
  border:1px solid color-mix(in srgb,var(--color-primary) 42%,transparent);
  background:color-mix(in srgb,var(--color-primary) 10%,transparent);
  box-shadow:0 0 16px -4px color-mix(in srgb,var(--color-primary) 50%,transparent);
}
.bnl-page--home .bnl-app__ic svg{width:18px;height:18px;}
.bnl-page--home .bnl-app__list b{
  font-family:var(--font-heading-proposed);font-size:14.5px;font-weight:800;
  letter-spacing:-.028em;color:#fff;align-self:center;
}
.bnl-page--home .bnl-app__list li > span:last-child{font-size:13px;line-height:1.5;color:var(--color-text-muted);}
.bnl-page--home .bnl-app__fine{
  font-size:11.5px;color:var(--color-text-muted);margin:0;padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--color-border) 55%,transparent);
}

/* reviews: one solid, glowing statement instead of dashed placeholder pills */
.bnl-page--home .bnl-rating{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-md);
  max-width:660px;margin:0 auto var(--space-lg);
  padding:var(--space-ml);border-radius:var(--radius-md);
  background:
    radial-gradient(90% 130% at 50% 0%, color-mix(in srgb,var(--color-primary) 12%,transparent), transparent 66%),
    var(--color-bg-elevated);
  border:1.5px solid color-mix(in srgb,var(--color-primary) 52%,transparent);
  box-shadow:0 0 44px -12px color-mix(in srgb,var(--color-primary) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.07);
}
.bnl-page--home .bnl-rating__line{
  margin:0;text-align:center;font-size:14px;line-height:1.55;color:var(--color-text);
}

/* closer: matcher sits flush under the headline, no rule between */
.bnl-page--home .bnl-match--flush{border-top:0;padding-top:0;margin-top:var(--space-ml);}

/* ---- the premium pill treatment, applied to every button on the page ---- */
.bnl-page--home .bnl-btn{
  position:relative;overflow:hidden;isolation:isolate;
  border:1.5px solid transparent;
  transition:box-shadow .25s ease, transform .25s ease;
}
.bnl-page--home .bnl-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.02) 44%, transparent 70%);
}
.bnl-page--home .bnl-btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transition:left .55s cubic-bezier(.22,.61,.36,1);
}
.bnl-page--home .bnl-btn:hover{transform:translateY(-1px);}
.bnl-page--home .bnl-btn:hover::before{left:120%;}
.bnl-page--home .bnl-btn--primary{
  background:linear-gradient(#120810,#120810) padding-box,
             linear-gradient(135deg,#E3056B 0%,#FF7FB4 50%,#A6034E 100%) border-box;
  color:#fff;
  box-shadow:0 0 24px -6px color-mix(in srgb,var(--color-pink) 72%,transparent);
}
.bnl-page--home .bnl-btn--primary:hover{box-shadow:0 0 34px -4px color-mix(in srgb,var(--color-pink) 92%,transparent);}
.bnl-page--home .bnl-btn--secondary{
  background:linear-gradient(#0b0f10,#0b0f10) padding-box,
             linear-gradient(135deg,#00A9B5 0%,#7FE0E6 50%,#007D86 100%) border-box;
  color:#fff;
  box-shadow:0 0 24px -6px color-mix(in srgb,var(--color-primary) 72%,transparent);
}
.bnl-page--home .bnl-btn--secondary:hover{box-shadow:0 0 34px -4px color-mix(in srgb,var(--color-primary) 92%,transparent);}
@media (prefers-reduced-motion:reduce){
  .bnl-page--home .bnl-btn::before{display:none;}
  .bnl-page--home .bnl-btn:hover{transform:none;}
}

/* ======================= STEPS ======================= */
/* rev39 · THE STEPS WERE FOUR SLABS
   Each item was a full card — var(--space-ml) padding, a 34-46px numeral and a
   --text-h3 title — so four of them ran nearly three phone screens for four
   sentences. The numeral now sits inline as a labelled chip carrying its own
   colour, the padding is cut roughly in half, and the title drops a tier. Same
   four steps, about 45% of the height. */
.bnl-page--home .bnl-steps{
  list-style:none;counter-reset:bnlstep;padding:0;margin:0;
  display:grid;gap:10px;
}
@media (min-width:900px){ .bnl-page--home .bnl-steps{grid-template-columns:repeat(4,1fr);gap:12px;} }

.bnl-page--home .bnl-steps__item{
  counter-increment:bnlstep;position:relative;
  padding:13px 15px 14px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  border:1px solid var(--color-border);
  border-left:3px solid var(--step, var(--color-primary));
  font-size:13px;line-height:1.45;color:var(--color-text-muted);
}
/* one colour per step, so "step 3" is findable at a glance rather than read for */
.bnl-page--home .bnl-steps__item:nth-child(1){--step:var(--color-primary);}
.bnl-page--home .bnl-steps__item:nth-child(2){--step:#7A3BFF;}
.bnl-page--home .bnl-steps__item:nth-child(3){--step:var(--color-pink);}
.bnl-page--home .bnl-steps__item:nth-child(4){--step:var(--color-orange);}

/* the numeral is a chip now, not a headline */
.bnl-page--home .bnl-steps__item::before{
  content:"STEP " counter(bnlstep);
  display:inline-flex;align-items:center;
  height:20px;padding:0 9px;margin-bottom:7px;
  border-radius:var(--radius-pill,999px);
  font-family:var(--font-heading-proposed);font-weight:800;
  font-size:9.5px;letter-spacing:.13em;line-height:1;
  color:var(--step);
  background:color-mix(in srgb, var(--step) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--step) 42%, transparent);
}
.bnl-page--home .bnl-steps__title{
  display:block;font-family:var(--font-heading-proposed);font-weight:700;
  font-size:15px;line-height:1.25;letter-spacing:-.012em;
  color:var(--color-text);margin-bottom:4px;
}

/* ======================= STATS ======================= */
.bnl-page--home .bnl-stats{display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr;}
@media (min-width:900px){ .bnl-page--home .bnl-stats{grid-template-columns:repeat(4,1fr);} }
.bnl-page--home .bnl-stats__item{
  text-align:center;padding:var(--space-ml) var(--space-md);
  border-radius:var(--radius-md);border:1px solid var(--color-border);
  background:color-mix(in srgb, var(--color-bg-elevated) 70%, transparent);
}
.bnl-page--home .bnl-stats__num{
  display:block;font-family:var(--font-heading-proposed);font-weight:800;
  font-size:clamp(34px,4.6vw,54px);line-height:1;letter-spacing:-.035em;
}
.bnl-page--home .bnl-stats__digits::after{content:counter(bnlstat);counter-reset:bnlstat var(--bnl-statn);}
.bnl-page--home .bnl-stats__label{display:block;margin-top:10px;font-size:var(--text-small);color:var(--color-text-muted);}
.bnl-page--home .bnl-stats__note{display:block;margin-top:6px;font-size:var(--text-small);color:var(--color-text-muted);text-decoration:underline;}
.bnl-page--home .bnl-stats__note:hover{color:var(--color-primary);}
/* rev18 BUGFIX — these read "0+" on iOS.
   animation-timeline:view() is Chromium-only. Where it is unsupported the
   timeline is inactive, the animation parks in its before-phase, and the
   backwards fill (--bnl-statn:0) is what you see. Permanently. Gating the
   whole thing behind @supports means unsupported browsers simply render the
   declared 500 / 2000 as static text, which is the correct fallback. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bnl-page--home .bnl-stats__item{animation:bnl-count 1.4s ease-out both;animation-timeline:view();animation-range:entry 10% cover 34%;}
  }
}
@keyframes bnl-count{from{--bnl-statn:0;}}

/* ======================= REVIEWS ======================= */
.bnl-page--home .bnl-reviews{display:grid;gap:var(--space-md);}
@media (min-width:900px){ .bnl-page--home .bnl-reviews{grid-template-columns:repeat(3,1fr);} }
.bnl-page--home .bnl-review{
  padding:var(--space-ml);border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-bg-elevated) 80%, transparent);
  font-size:var(--text-small);
}
.bnl-page--home .bnl-review__stars{color:var(--color-orange);letter-spacing:.12em;margin-bottom:10px;}
.bnl-page--home .bnl-review__who{margin-top:var(--space-md);color:var(--color-text-muted);}
.bnl-page--home .bnl-rating{
  display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;justify-content:center;
  margin-bottom:var(--space-lg);font-family:var(--font-heading-proposed);font-size:var(--text-small);
  color:var(--color-text-muted);
}
.bnl-page--home .bnl-rating b{font-size:22px;color:var(--color-text);font-weight:800;letter-spacing:-.02em;}

/* ======================= ACADEMY BAND ======================= */
.bnl-page--home .bnl-academy{
  border-radius:var(--radius-md);padding:var(--space-xl) var(--space-lg);text-align:center;
  border:1px solid color-mix(in srgb, var(--color-orange) 38%, var(--color-border));
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--color-orange) 13%, transparent), transparent 65%),
    var(--color-bg-elevated);
  box-shadow:0 0 56px -14px color-mix(in srgb, var(--color-orange) 45%, transparent);
}
.bnl-page--home .bnl-academy .bnl-eyebrow-label{color:var(--color-orange);}

/* ======================= CLOSER + GET MATCHED ======================= */
.bnl-page--home .bnl-closer{position:relative;padding:var(--space-2xl) var(--space-md);text-align:center;overflow:hidden;}
.bnl-page--home .bnl-closer__bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--color-pink) 15%, transparent), transparent 70%),
             radial-gradient(60% 90% at 20% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%);
}
.bnl-page--home .bnl-closer__content{position:relative;z-index:1;max-width:820px;margin:0 auto;}
.bnl-page--home .bnl-closer__title{
  font-family:var(--font-heading-proposed);font-weight:800;
  font-size:clamp(38px,6.6vw,68px);line-height:1.0;letter-spacing:-.05em;margin:0 0 var(--space-md);
}
.bnl-page--home .bnl-match{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:var(--space-lg);padding-top:var(--space-lg);
  border-top:1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}
.bnl-page--home .bnl-match label{width:100%;font-size:var(--text-small);color:var(--color-text-muted);margin-bottom:4px;}
.bnl-page--home .bnl-match input{
  font:inherit;font-size:var(--text-body);min-height:48px;padding:0 var(--space-md);
  border-radius:var(--radius-pill);border:1px solid var(--color-border);
  background:var(--color-bg);color:var(--color-text);width:min(240px,100%);
}
.bnl-page--home .bnl-match input::placeholder{color:#6d6d6d;}
.bnl-page--home .bnl-match__fine{width:100%;font-size:var(--text-small);color:var(--color-text-muted);margin-top:var(--space-md);}

/* ======================= FOOTER ======================= */
.bnl-page--home .bnl-foot{
  position:relative;border-top:0;
  /* rev18: the closer no longer stops at a ruled line — it dissolves into the
     footer over ~150px, so the pink floor-glow above bleeds through the seam */
  /* rev45: the ramp used to resolve to flat #000 at 150px and stay there for
     the rest of the page, so the closer's glow died into a black slab with
     nothing under it. It resolves into a tinted ground instead, and the block
     below carries a bloom so the bottom of the page is lit rather than empty. */
  background:linear-gradient(180deg,
    transparent 0,
    rgba(9,9,11,.55) 62px,
    #0A0A0C 150px,
    #0B0B10 62%,
    #0C0A12 100%);
  padding:calc(var(--space-xl) + 86px) var(--space-md) var(--space-xl);
  font-size:var(--text-small);color:var(--color-text-muted);
}
/* a hairline is still useful for structure, but it fades out at both ends
   instead of ruling straight off the edges of the screen */
.bnl-page--home .bnl-foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0,
    color-mix(in srgb, var(--color-primary) 46%, transparent) 26%,
    color-mix(in srgb, var(--color-pink) 46%, transparent) 74%,
    transparent 100%);
  opacity:.5;
}
/* rev45 · the floor of the page is lit */
.bnl-page--home .bnl-foot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:78%;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(78% 100% at 50% 118%, rgba(122,59,255,.26) 0%, transparent 66%),
    radial-gradient(52% 78% at 14% 108%, rgba(0,169,181,.16) 0%, transparent 70%),
    radial-gradient(52% 78% at 86% 112%, rgba(227,5,107,.16) 0%, transparent 70%);
}
.bnl-page--home .bnl-foot > *{position:relative;z-index:1;}

.bnl-page--home .bnl-foot__inner{max-width:var(--width-content);margin:0 auto;display:grid;gap:var(--space-lg);}
@media (min-width:768px){ .bnl-page--home .bnl-foot__inner{grid-template-columns:1.4fr 1fr 1fr;} }

.bnl-page--home .bnl-foot h3{font-family:var(--font-heading-proposed);font-size:var(--text-small);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text);margin:0 0 var(--space-md);}
.bnl-page--home .bnl-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.bnl-page--home .bnl-foot a{color:var(--color-text-muted);text-decoration:none;}
.bnl-page--home .bnl-foot a:hover{color:var(--color-primary);}
.bnl-page--home .bnl-foot__legal{max-width:var(--width-content);margin:var(--space-lg) auto 0;padding-top:var(--space-md);border-top:1px solid color-mix(in srgb, var(--color-border) 50%, transparent);}

/* ======================= STICKY MOBILE CTA ======================= */
.bnl-page--home .bnl-sticky-cta{display:none;}
@media (max-width:767px){
  .bnl-page--home .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--home[data-state="public"] .bnl-sticky-cta a.bnl-btn[data-when~="public"],
  .bnl-page--home[data-state="contractor"] .bnl-sticky-cta a.bnl-btn[data-when~="contractor"],
  .bnl-page--home[data-state="distributor"] .bnl-sticky-cta a.bnl-btn[data-when~="distributor"]{display:block;}
}

/* ======================= STATE-AWARE (Blueprint §8) ======================= */
/* Hidden by default; each state reveals only its own elements.
   Displays are set explicitly per element type — `revert` would flatten
   the flex containers (memberbar) to block. */
.bnl-page--home [data-when]{display:none;}
.bnl-page--home[data-state="public"] a[data-when~="public"],
.bnl-page--home[data-state="contractor"] a[data-when~="contractor"],
.bnl-page--home[data-state="distributor"] a[data-when~="distributor"]{display:inline-block;}
.bnl-page--home[data-state="public"] a.bnl-prevhdr__pill[data-when~="public"],
.bnl-page--home[data-state="contractor"] a.bnl-prevhdr__pill[data-when~="contractor"],

.bnl-page--home[data-state="public"] .bnl-memberbar[data-when~="public"],
.bnl-page--home[data-state="contractor"] .bnl-memberbar[data-when~="contractor"],
.bnl-page--home[data-state="distributor"] .bnl-memberbar[data-when~="distributor"]{display:flex;}
/* Light Genie panel: tier blocks and the tier label in its header */
.bnl-page--home[data-state="public"] div[data-when~="public"],
.bnl-page--home[data-state="contractor"] div[data-when~="contractor"],
.bnl-page--home[data-state="distributor"] div[data-when~="distributor"]{display:block;}
.bnl-page--home[data-state="public"] span[data-when~="public"],
.bnl-page--home[data-state="contractor"] span[data-when~="contractor"],
.bnl-page--home[data-state="distributor"] span[data-when~="distributor"]{display:inline;}
.bnl-memberbar{
  max-width:var(--width-content);margin:0 auto var(--space-md);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px var(--space-md);border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  background:color-mix(in srgb, var(--color-primary) 8%, transparent);
  font-family:var(--font-heading-proposed);font-size:var(--text-small);
}
.bnl-memberbar b{color:var(--color-primary);}

/* ======================= LEARNING CENTER (rev2 · BRI-276) ======================= */
/* .bnl-learn grid removed in rev40 — the guides are on a rail now. */
.bnl-page--home .bnl-learn__q li:nth-child(n+3){display:none;}
.bnl-learn__card{
  position:relative;display:flex;flex-direction:column;
  padding:var(--space-ml);border-radius:var(--radius-md);text-decoration:none;color:inherit;
  background:color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  border:1px solid var(--color-border);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bnl-learn__card:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:var(--glow-ambient-teal);}
.bnl-learn__card--first{border-color:color-mix(in srgb, var(--color-primary) 45%, var(--color-border));}
.bnl-learn__flag{
  align-self:flex-start;font-family:var(--font-heading-proposed);font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);
  color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);margin-bottom:12px;
}
.bnl-learn__t{
  font-family:var(--font-heading-proposed);font-weight:700;font-size:var(--text-h3);
  letter-spacing:-.015em;color:#fff;margin:0 0 8px;line-height:1.25;
}
.bnl-learn__d{font-size:var(--text-small);color:var(--color-text-muted);margin:0 0 var(--space-md);}
.bnl-learn__q{list-style:none;padding:0;margin:0 0 var(--space-md);font-size:var(--text-small);}
.bnl-learn__q li{
  padding:6px 0;color:var(--color-text-muted);
  border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
}
.bnl-learn__go{margin-top:auto;font-family:var(--font-heading-proposed);font-weight:600;font-size:var(--text-small);color:var(--color-primary);}

/* ======================= LIGHT GENIE (rev2 · BRI-191) ======================= */
/* .bnl-genie-launch moved to bnl-genie-launcher.css (site-wide, BRI-302).
   It was styled here and its ART was scoped to .bnl-page--home, so the genie
   was the icon on this page only and every other page fell back to a bulb
   glyph. Scoping a site-wide component to a page was the defect. */
@keyframes bnl-genie-pulse{0%{transform:scale(.9);opacity:.7;}70%{transform:scale(1.25);opacity:0;}100%{opacity:0;}}

.bnl-genie{
  position:fixed;right:16px;bottom:156px;z-index:46;width:min(360px, calc(100vw - 32px));
  border-radius:var(--radius-md);overflow:hidden;display:none;
  background:color-mix(in srgb, var(--color-bg) 96%, transparent);
  backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  box-shadow:var(--glow-ambient-teal), var(--shadow-sm);
}
.bnl-genie[data-open="true"]{display:block;}
@media (min-width:768px){ .bnl-genie{bottom:96px;right:24px;} }
.bnl-genie__hd{
  display:flex;align-items:center;gap:10px;padding:14px var(--space-md);
  border-bottom:1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  background:color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.bnl-genie__mark{
  width:30px;height:30px;flex:none;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:color-mix(in srgb, var(--color-primary) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.bnl-genie__mark svg{width:16px;height:16px;}
.bnl-genie__name{font-family:var(--font-heading-proposed);font-weight:700;font-size:14px;letter-spacing:-.01em;margin:0;}
.bnl-genie__tier{font-size:11px;color:var(--color-primary);font-family:var(--font-heading-proposed);letter-spacing:.08em;text-transform:uppercase;}
.bnl-genie__x{
  margin-left:auto;background:transparent;border:0;color:var(--color-text-muted);
  font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:var(--radius-sm);
}
.bnl-genie__x:hover{color:#fff;}
.bnl-genie__body{padding:var(--space-md);max-height:min(52vh,420px);overflow-y:auto;}
.bnl-genie__note{
  font-size:11px;color:#7d7d7d;font-family:var(--font-heading-proposed);
  letter-spacing:.04em;margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
}
.bnl-genie__lbl{
  font-family:var(--font-heading-proposed);font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 8px;
}
.bnl-genie__lbl--yes{color:#00C48C;}
.bnl-genie__lbl--no{color:var(--color-error);}
.bnl-genie__list{list-style:none;padding:0;margin:0 0 var(--space-md);display:grid;gap:6px;}
.bnl-genie__list li{position:relative;padding-left:18px;font-size:13px;color:var(--color-text-muted);line-height:1.45;}
.bnl-genie__list--yes li::before{content:"✓";position:absolute;left:0;color:#00C48C;font-weight:700;}
.bnl-genie__list--no li::before{content:"✕";position:absolute;left:0;color:var(--color-error);font-weight:700;}
.bnl-genie__cta{
  display:block;text-align:center;text-decoration:none;
  font-family:var(--font-heading-proposed);font-weight:600;font-size:13px;
  padding:12px;border-radius:var(--radius-pill);
  color:#fff;border:1.5px solid var(--color-pink);box-shadow:var(--glow-ambient-pink);
}
.bnl-genie__cta:hover{background:color-mix(in srgb, var(--color-pink) 12%, transparent);}


/* =====================================================================
   FOUR PATHS — coverflow rotator (rev9)
   Every card is TILTED on two axes, including the front one, so each reads
   as a physical object rather than a flat panel. Techniques applied, from
   current premium-card practice (CodeFronts 2026, Framer GlassDepth,
   Codrops coverflow):
     1. multi-axis tilt (rotateY + rotateX) on all cards
     2. internal translateZ parallax — icon, verb, hook and CTA float above
        the card surface inside a preserve-3d chain
     3. cursor-tracked specular glare on the front card
     4. directional shadow separation, offset against the tilt
     5. fixed rim light so a tilted card catches an edge highlight
     6. idle float on touch devices, where there is no cursor to track
   All of it degrades: no pointer = baked tilt still reads 3D; reduced
   motion = flat and still.
===================================================================== */
@property --bnl-ry{syntax:'<angle>';initial-value:0deg;inherits:false;}
@property --bnl-rx{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* ---- the card ---- */
.bnl-page--home .bnl-dcard{transform-style:preserve-3d;}
.bnl-page--home .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--home .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--home .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--home .bnl-dcard__head{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.bnl-page--home .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--home .bnl-dcard__ic svg{width:15px;height:15px;}
.bnl-page--home .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--home .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--home .bnl-dcard__verb span{display:inline;}
.bnl-page--home .bnl-dcard__rule{height:2px;width:52px;border-radius:2px;margin:0 0 9px;background:linear-gradient(90deg,currentColor,transparent);}
.bnl-page--home .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--home .bnl-dcard__list{display:none;}
.bnl-page--home .bnl-dcard__cta{
  margin-top:auto;align-self:stretch;padding:11px var(--space-md);min-height:40px;font-size:12.5px;
}
.bnl-page--home .bnl-dcard__login{display:none;}

@media (min-width:860px){
  .bnl-page--home .bnl-dcard__body{padding:18px 20px 20px;}
  .bnl-page--home .bnl-dcard__ic{width:36px;height:36px;}
  .bnl-page--home .bnl-dcard__ic svg{width:17px;height:17px;}
  .bnl-page--home .bnl-dcard__who{font-size:11px;}
  .bnl-page--home .bnl-dcard__verb{font-size:34px;margin-bottom:9px;letter-spacing:-.052em;}
  .bnl-page--home .bnl-dcard__rule{width:62px;margin-bottom:11px;}
  .bnl-page--home .bnl-dcard__hook{font-size:16px;margin-bottom:12px;}
  .bnl-page--home .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--home .bnl-dcard__list li{padding:5px 0;border-top:1px solid color-mix(in srgb, var(--color-border) 45%, transparent);}
  .bnl-page--home .bnl-dcard__list li:nth-child(n+3){display:none;}
  .bnl-page--home .bnl-dcard__cta{font-size:13px;}
  .bnl-page--home .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--home .bnl-dcard--design .bnl-dcard__login:hover{text-decoration:underline;}
}

/* each path card carries its own distinctly tinted gradient ground */
.bnl-page--home .bnl-dcard--live .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#0d1a1d 46%,#101010 100%);
}
.bnl-page--home .bnl-dcard--install .bnl-dcard__inner{
  background:linear-gradient(158deg,#2e0620 0%,#1d0d16 46%,#101010 100%);
}
.bnl-page--home .bnl-dcard--sell .bnl-dcard__inner{
  background:linear-gradient(158deg,#331904 0%,#1f1409 46%,#101010 100%);
}
.bnl-page--home .bnl-dcard--design .bnl-dcard__inner{
  background:linear-gradient(158deg,#062a30 0%,#1a0d28 42%,#2b0722 72%,#101010 100%);
}

/* ---- per-path accents ---- */
.bnl-page--home .bnl-dcard--live .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-primary) 48%, var(--color-border));}
.bnl-page--home .bnl-dcard--live .bnl-dcard__verb,
.bnl-page--home .bnl-dcard--live .bnl-dcard__who,
.bnl-page--home .bnl-dcard--live .bnl-dcard__ic,
.bnl-page--home .bnl-dcard--live .bnl-dcard__rule{color:var(--color-primary);}
.bnl-page--home .bnl-dcard--install .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 48%, var(--color-border));}
.bnl-page--home .bnl-dcard--install .bnl-dcard__verb,
.bnl-page--home .bnl-dcard--install .bnl-dcard__who,
.bnl-page--home .bnl-dcard--install .bnl-dcard__ic,
.bnl-page--home .bnl-dcard--install .bnl-dcard__rule{color:var(--color-pink);}
.bnl-page--home .bnl-dcard--sell .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-orange) 48%, var(--color-border));}
.bnl-page--home .bnl-dcard--sell .bnl-dcard__verb,
.bnl-page--home .bnl-dcard--sell .bnl-dcard__who,
.bnl-page--home .bnl-dcard--sell .bnl-dcard__ic,
.bnl-page--home .bnl-dcard--sell .bnl-dcard__rule{color:var(--color-orange);}
.bnl-page--home .bnl-dcard--design .bnl-dcard__inner{border-color:color-mix(in srgb, var(--color-pink) 52%, var(--color-primary));}
.bnl-page--home .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--home .bnl-dcard--design .bnl-dcard__who,
.bnl-page--home .bnl-dcard--design .bnl-dcard__ic{color:var(--color-primary);}
.bnl-page--home .bnl-dcard--design .bnl-dcard__rule{background:var(--gradient-brand);}

/* ---- the stage ---- */
#doors .bnl-rot{margin:var(--space-ml) 0 0;}
#doors .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;
}
#doors .bnl-rot__stage.is-drag{cursor:grabbing;}
#doors .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%);
}
#doors .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;
}
#doors .bnl-rot__stage.is-drag .bnl-rot__item{transition:none;}

/* ---- coverflow geometry — EVERY card tilted on two axes ---- */
#doors .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;
}
#doors .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;
}
#doors .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;
}
#doors .bnl-rot__item[data-pos="2"],
#doors .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;
}
#doors .bnl-rot__item[data-pos="0"] .bnl-dcard__inner{pointer-events:auto;}
#doors .bnl-rot__item:not([data-pos="0"]) .bnl-dcard__inner{pointer-events:none;}

/* pointer tracking wants a short transition, not the 660ms travel curve */
#doors .bnl-rot__item.is-tracking{transition:transform .12s linear;}

/* ---- directional shadow separation on the front card ---- */
#doors .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;
}
#doors .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);}
#doors .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);}
#doors .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);}
#doors .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 ---- */
#doors .bnl-rot__item[data-pos="0"] .bnl-dcard__head{transform:translateZ(30px);}
#doors .bnl-rot__item[data-pos="0"] .bnl-dcard__verb{transform:translateZ(24px);}
#doors .bnl-rot__item[data-pos="0"] .bnl-dcard__rule{transform:translateZ(18px);}
#doors .bnl-rot__item[data-pos="0"] .bnl-dcard__hook{transform:translateZ(13px);}
#doors .bnl-rot__item[data-pos="0"] .bnl-dcard__list{transform:translateZ(8px);}
#doors .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:translateZ(20px);}

/* ---- cursor-tracked specular glare ---- */
#doors .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;
}
#doors .bnl-rot__item[data-pos="0"].is-tracking .bnl-dcard__inner::after{opacity:1;}

/* ---- idle float where there's no cursor to track ---- */
@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;}
  }
  #doors .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 */
#doors .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;
}
#doors .bnl-rot__stage.is-drag .bnl-rot__shadow{transition:none;}

/* ---- nav ---- */
#doors .bnl-rot__nav{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;}
#doors .bnl-rot__arrows{display:flex;align-items:center;justify-content:center;gap:10px;}
#doors .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;
}
#doors .bnl-rot__arrow--prev{
  border-color:color-mix(in srgb, var(--color-pink) 70%, transparent);
  color:#fff;box-shadow:var(--glow-ambient-pink);
}
#doors .bnl-rot__arrow--prev:hover{box-shadow:var(--hglow-pink-hi);background:color-mix(in srgb, var(--color-pink) 14%, transparent);}
#doors .bnl-rot__arrow--next{
  border-color:color-mix(in srgb, var(--color-primary) 70%, transparent);
  color:#fff;box-shadow:var(--glow-ambient-teal);
}
#doors .bnl-rot__arrow--next:hover{box-shadow:var(--hglow-teal-hi);background:color-mix(in srgb, var(--color-primary) 14%, transparent);}
#doors .bnl-rot__dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
#doors .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;
}
#doors .bnl-rot__dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;}
#doors .bnl-rot__dot:hover{color:#fff;border-color:var(--color-text-muted);}
#doors .bnl-rot__dot[aria-selected="true"]{color:var(--dot,#fff);border-color:var(--dot,#fff);box-shadow:0 0 14px -2px var(--dot,#fff);}
#doors .bnl-rot__dot[aria-selected="true"]::before{opacity:1;}
#doors .bnl-rot__hint{text-align:center;color:var(--color-text-muted);font-size:11px;margin-top:7px;}
#doors .bnl-rot.is-manual .bnl-rot__hint{opacity:.4;}

@media (min-width:560px){ #doors .bnl-rot__item{--w:300px;} }
@media (min-width:860px){
  #doors .bnl-rot__stage{height:452px;perspective:1500px;}
  #doors .bnl-rot__item{--w:352px;height:424px;}
  #doors .bnl-rot__item[data-pos="1"]{transform:translateX(76%) translateZ(-170px) rotateY(-44deg) rotateX(4deg) scale(.9);}
  #doors .bnl-rot__item[data-pos="-1"]{transform:translateX(-76%) translateZ(-170px) rotateY(30deg) rotateX(4deg) scale(.9);}
  #doors .bnl-rot__item[data-pos="2"],#doors .bnl-rot__item[data-pos="-2"]{transform:translateX(0) translateZ(-440px) rotateY(-9deg) rotateX(3deg) scale(.82);}
  #doors .bnl-rot__shadow{top:428px;width:300px;margin-left:-150px;height:30px;}
  #doors .bnl-rot__glow{height:360px;}
  #doors .bnl-rot__dot{font-size:12px;padding:9px 15px;}
  #doors .bnl-rot__arrow{width:42px;height:42px;}
}

@media (prefers-reduced-motion:reduce){
  .bnl-page--home *,.bnl-page--home *::before{animation:none!important;transition:none!important;}
  .bnl-door:hover,.bnl-learn__card:hover{transform:none;}   /* launcher handles its own reduced-motion — bnl-genie-launcher.css */
  #doors .bnl-rot__stage{perspective:none;}
  #doors .bnl-rot__item{animation:none!important;filter:none!important;}
  #doors .bnl-rot__item[data-pos="1"],#doors .bnl-rot__item[data-pos="-1"],
  #doors .bnl-rot__item[data-pos="2"],#doors .bnl-rot__item[data-pos="-2"]{transform:none;opacity:0;pointer-events:none;}
  #doors .bnl-rot__item[data-pos="0"]{transform:none;}
  #doors .bnl-rot__item[data-pos="0"] .bnl-dcard__head,
  #doors .bnl-rot__item[data-pos="0"] .bnl-dcard__verb,
  #doors .bnl-rot__item[data-pos="0"] .bnl-dcard__rule,
  #doors .bnl-rot__item[data-pos="0"] .bnl-dcard__hook,
  #doors .bnl-rot__item[data-pos="0"] .bnl-dcard__list,
  #doors .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:none;}
  #doors .bnl-rot__item[data-pos="0"] .bnl-dcard__inner::after{display:none;}
}

/* ============================================================================
   rev18 · LIVING GRADIENTS
   Every gradient-filled word drifts. Out-and-back (0->100%->0) so the loop has
   no seam, slow enough to read as moving light rather than a flashing effect.
   All of it sits inside the global prefers-reduced-motion kill-switch.
============================================================================ */
@keyframes bnl-grad-drift{
  0%,100%{background-position:0% 50%;}
  50%    {background-position:100% 50%;}
}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-gradient-text,
  .bnl-page--home .bnl-silver-blue,
  .bnl-page--home .bnl-silver-pink,
  .bnl-page--home .bnl-alu,
  .bnl-cycle__w--design{
    background-size:230% 100%;
    animation:bnl-grad-drift 9s ease-in-out infinite;
  }
  /* brushed metal reads best slower — light crawling across a milled face */
  .bnl-page--home .bnl-silver-blue{animation-duration:13s;}
  .bnl-page--home .bnl-silver-pink{animation-duration:12s;}
  .bnl-page--home .bnl-alu{animation-duration:15s;}
  /* the header cycler word is small and already changing, so keep it quick */
  .bnl-cycle__w--design{animation-duration:7s;background-size:210% 100%;}
  /* the closer headline is the last word on the page: give it its own tempo */
  .bnl-page--home .bnl-closer__title .bnl-gradient-text{animation-duration:11s;}
  /* rules and dividers that carry the brand gradient can drift too */
  .bnl-page--home .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--home .bnl-dcard__inner{
  background-clip:padding-box;
  isolation:isolate;
}
.bnl-page--home .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 */
#doors .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));}
#doors .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));}
#doors .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));}
#doors .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));}
#doors .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--home .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--home .bnl-dcard--live   {--bnl-cardfloor:color-mix(in srgb, var(--color-primary) 22%, transparent);}
.bnl-page--home .bnl-dcard--install{--bnl-cardfloor:color-mix(in srgb, var(--color-pink) 22%, transparent);}
.bnl-page--home .bnl-dcard--sell   {--bnl-cardfloor:color-mix(in srgb, var(--color-orange) 20%, transparent);}
.bnl-page--home .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 */
#doors .bnl-rot__item:not([data-pos="0"]) .bnl-dcard{--bnl-cardfloor:transparent;}

/* ============================================================================
   rev19 · MOBILE VIEWPORT RECOVERY   (mobile is ~70% of traffic)

   Measured on iPhone 14/15 (390x844) before this block:
     sticky header .............. 161px
     fixed bottom CTA ........... 102px
     ---------------------------------
     permanent chrome ........... 263px  =  31% of the screen, forever

   A phone reader was getting 69% of their own display. Two changes:

   1 · The header keeps its full three-row lockup while the page is at rest —
       that first screenful is the identity moment and it has earned the space.
       The moment you scroll it condenses to a single 56px row: mark, wordmark,
       nothing else. The strap, the cycler and the pills all belong to the
       arrival, not to the journey.

   2 · The bottom CTA no longer sits on top of the hero's own identical CTA.
       It stays hidden until the hero button leaves the screen, then slides up.
       Same action, one instance at a time.

   After: 56 + 78 = 134px = 16%. The reader gets 84% of their phone back.
============================================================================ */
@media (max-width:767px){

  /* ---- 1 · condensing header ---- */

  .bnl-prevhdr__strap,


  .bnl-prevhdr.is-condensed .bnl-prevhdr__strap,

  /* grid gap has to go too or it leaves two ghost rows behind */

  /* the mark shrinks with it, so the row reads as one deliberate bar */





  /* ---- 2 · bottom CTA: trimmer, and it waits its turn ---- */
  .bnl-page--home .bnl-sticky-cta{
    padding:9px var(--space-md);
    padding-bottom:max(9px, env(safe-area-inset-bottom));
    transform:translateY(102%);
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .bnl-page--home .bnl-sticky-cta.is-revealed{transform:translateY(0);}
  .bnl-page--home .bnl-sticky-cta .bnl-btn{
    padding:13px 18px;font-size:15px;
  }
  /* The launcher was overlapping the sticky CTA bar. The page no longer reaches
     into the component to move it — it publishes an offset and the component
     reads it. This is the only handle a page is allowed on the launcher; the
     alternative is every page re-declaring `bottom` on a shared component and
     the last stylesheet loaded winning. */
  .bnl-page--home{
    --bnl-cta-offset:calc(-10px + env(safe-area-inset-bottom));
  }
  .bnl-page--home:not(.is-cta-shown){
    --bnl-cta-offset:calc(-70px + env(safe-area-inset-bottom));
  }
  .bnl-genie-launch{transition:bottom .3s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, transform .25s ease;}
}

/* no-JS and reduced-motion both need the bar visible without a scroll event */
@media (max-width:767px){
  .bnl-page--home.no-js .bnl-sticky-cta{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .bnl-prevhdr,.bnl-prevhdr__strap,.bnl-prevhdr__pills,
  .bnl-page--home .bnl-sticky-cta{transition:none!important;}
}

/* ============================================================================
   rev20 · MOBILE TOUCH ERGONOMICS

   Audited every interactive element at 390px against the 44px minimum. The
   offenders, measured:

     footer phone / email links ....... 15px  <- the highest-intent tap on the
                                               whole page, and it was 15 pixels
     "Read the report" stat notes ..... 21px
     colour slider .................... 34px  (a *drag* target, so worse)
     carousel + rail arrows ........... 38px
     path pills ....................... 35px
     header pill labels ............... 11.3px type on a primary CTA

   Everything below raises the touch area without changing how anything looks:
   padding and min-height do the work, the ink stays where it was.
============================================================================ */
@media (max-width:900px){

  /* --- footer contact: the money tap --- */
  .bnl-page--home .bnl-foot__contact a,
  .bnl-page--home .bnl-foot a[href^="tel:"],
  .bnl-page--home .bnl-foot a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
    padding:2px 2px;font-size:15px;
    color:color-mix(in srgb,#fff 86%,var(--color-text-muted));
  }
  .bnl-page--home .bnl-foot a[href^="tel:"]{font-weight:700;}

  /* footer nav links are lists of taps, so they need vertical room too */
  .bnl-page--home .bnl-foot ul a{
    display:inline-flex;align-items:center;min-height:40px;
  }
  .bnl-page--home .bnl-foot ul{gap:2px;}

  /* --- inline "read the report" style notes --- */
  .bnl-page--home .bnl-stats__note{
    min-height:44px;display:inline-flex;align-items:center;
  }

  /* --- the colour slider is dragged, not tapped: give it real depth --- */
  .bnl-page--home .bnl-cs__range{height:44px;}
  .bnl-page--home .bnl-cs__range::-webkit-slider-thumb{width:30px;height:30px;}
  .bnl-page--home .bnl-cs__range::-moz-range-thumb{width:30px;height:30px;}

  /* --- carousel and rail arrows --- */
  #doors .bnl-rot__arrow,
  .bnl-page--home .bnl-sysrail__arrow{width:44px;height:44px;}

  /* --- path pills under the carousel --- */
  #doors .bnl-rot__dot{min-height:42px;}

  /* --- header pills: three across now, so the type has to come down to stop
         them wrapping to three lines in a 115px column. 44px min-height is
         kept for the tap target; the label simply centres inside it. --- */



  /* --- swatch chips in the colour selector --- */
  .bnl-page--home .bnl-cs__chip{min-height:44px;}

  /* legal row lives in a div, not the ul, so it needs its own rule */
  .bnl-page--home .bnl-foot__legal a{
    display:inline-flex;align-items:center;min-height:40px;padding:0 2px;
  }
}

/* the eyebrow is no longer an h1, so stop it inheriting heading margins */
.bnl-page--home p.bnl-hero__eyebrow{margin-top:0;}

/* rev21: the comparison frames are real photography now, not placeholder
   boxes. Both halves must crop identically or the wipe reveals a mismatch. */
.bnl-page--home .bnl-ba-slider .bnl-slot{
  background-size:cover;background-position:center center;
  border:0;border-radius:0;height:100%;aspect-ratio:auto;
}
.bnl-page--home .bnl-ba-slider{aspect-ratio:5/4;max-height:46vh;}
.bnl-page--home .bnl-ba-slider .bnl-slot{background-position:center 46%;}
@media (min-width:560px){
  .bnl-page--home .bnl-ba-slider{aspect-ratio:3/2;max-height:52vh;}
}
@media (min-width:820px){
  .bnl-page--home .bnl-ba-slider{aspect-ratio:16/9;max-height:none;}
  .bnl-page--home .bnl-ba-slider .bnl-slot{background-position:center 42%;}
}

/* ============================================================================
   rev22 · HERO VIDEO ON MOBILE  +  RENDER COST
============================================================================ */
.bnl-page--home .bnl-hero__frame{position:relative;}
.bnl-page--home .bnl-hero__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;padding:0 22px 0 18px;
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--font-heading-proposed);
  font-size:14px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:color-mix(in srgb, var(--color-black-true) 62%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid color-mix(in srgb, #fff 30%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color-primary) 26%, transparent),
             0 10px 34px rgba(0,0,0,.55);
}
.bnl-page--home .bnl-hero__play-ic{
  display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--color-primary), var(--color-pink));
  color:#0A0A0A;
}
.bnl-page--home .bnl-hero__play-ic svg{width:16px;height:16px;margin-left:1px;}
.bnl-page--home .bnl-hero__play:focus-visible{
  outline:2px solid var(--color-primary);outline-offset:3px;
}

/* Below-fold sections do not need to be laid out until they are approached.
   Works with CSS background photography, which native lazy-loading does not
   reach — and this page carries 24 images that way. contain-intrinsic-size
   keeps the scrollbar honest so the page does not jump. */
@media (max-width:767px){
  .bnl-page--home #systems,
  .bnl-page--home #colour,
  .bnl-page--home #app,
  .bnl-page--home #steps,
  .bnl-page--home #proof,
  .bnl-page--home #learn,
  .bnl-page--home #reviews,
  .bnl-page--home #academy,
  .bnl-page--home #compare{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
}

/* ============================================================================
   rev23 · LIVE STRING LIGHTS
   The bulb coordinates were read out of the photograph — local brightness
   maxima against a blurred version of itself — so each point sits on a real
   bulb and carries that bulb's own sampled colour. Screen blend means they
   add light rather than paint dots on top.
   Only opacity and transform animate, so the whole field composites on the
   GPU and costs nothing on the main thread.
============================================================================ */
.bnl-page--home .bnl-app__shot{position:relative;overflow:hidden;}
.bnl-page--home .bnl-twinkle{
  position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:screen;
}
.bnl-page--home .bnl-twinkle i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--sz);aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  /* a bokeh disc: near-flat body, soft shoulder, no hard rim — the shape a
     defocused bulb actually makes on a sensor */
  background:radial-gradient(circle,
    color-mix(in srgb, var(--c) 82%, #fff) 0%,
    var(--c) 30%,
    color-mix(in srgb, var(--c) 88%, transparent) 52%,
    color-mix(in srgb, var(--c) 40%, transparent) 72%,
    color-mix(in srgb, var(--c) 12%, transparent) 88%,
    transparent 100%);
  opacity:var(--o);
  will-change:opacity, transform;
}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-twinkle i{
      animation:bnl-twinkle var(--d) cubic-bezier(.4,0,.5,1) var(--dl) infinite;
  }
}
/* shimmer, not blink. Strings settle and swell; they do not flash on and off,
   and a 0.2-to-1.0 opacity swing is the giveaway of a fake. */
@keyframes bnl-twinkle{
  0%,100%{opacity:var(--o);            transform:scale(1);}
  30%    {opacity:calc(var(--o) * 1.9);transform:scale(1.16);}
  55%    {opacity:calc(var(--o) * 1.2);transform:scale(1.04);}
  78%    {opacity:calc(var(--o) * 2.2);transform:scale(1.22);}
}
/* a slow warm bloom over the whole roofline, so the field breathes together
   underneath the individual twinkles rather than reading as 120 separate ticks */
.bnl-page--home .bnl-app__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(140% 62% at 50% 6%,
    color-mix(in srgb, #FFD9A0 13%, transparent), transparent 66%);
}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-app__shot::after{animation:bnl-bloom 8.5s ease-in-out infinite;}
}
@keyframes bnl-bloom{0%,100%{opacity:.55;}50%{opacity:1;}}

/* ============================================================================
   rev26 · THE LIGHT GENIE ARRIVES
   He was simply present on the page. Now he rises out of the bulb when the
   section is reached — the smoke trail already resolves into the bulb, so the
   bulb is the lamp and the motion just makes that legible.
   The whole unit — heading, line, artwork, ask box — is sized to land inside
   one iPhone viewport rather than spilling across two.
============================================================================ */
.bnl-page--home .bnl-genieart{transform-origin:50% 92%;}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-genieart[data-summon="idle"]{
    opacity:0;transform:translateY(9%) scale(.55);filter:blur(9px);
  }
}
@keyframes bnl-summon{
  0%  {opacity:0;transform:translateY(7%) scale(.62);filter:blur(7px);}
  55% {opacity:1;transform:translateY(-1%) scale(1.03);filter:blur(0);}
  100%{opacity:1;transform:translateY(0)   scale(1);   filter:blur(0);}
}

/* ---- ask box ---- */
.bnl-page--home .bnl-genieask{margin:var(--space-sm) 0 var(--space-md);}
.bnl-page--home .bnl-genieask__l{
  display:block;font-family:var(--font-display);
  font-size:clamp(19px,5.4vw,26px);font-weight:800;letter-spacing:-.04em;
  color:#fff;margin-bottom:9px;text-align:center;
}
.bnl-page--home .bnl-genieask__row{
  display:flex;gap:8px;align-items:stretch;
}
.bnl-page--home .bnl-genieask__in{
  flex:1;min-width:0;min-height:48px;padding:0 15px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--color-black-true) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  color:#fff;font-size:15px;font-family:var(--font-body, inherit);
}
.bnl-page--home .bnl-genieask__in::placeholder{color:var(--color-text-muted);}
.bnl-page--home .bnl-genieask__in:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.bnl-page--home .bnl-genieask__go{
  flex:none;width:48px;min-height:48px;border-radius:var(--radius-pill);cursor:pointer;
  display:grid;place-items:center;color:#0A0A0A;border:0;
  background:linear-gradient(135deg, var(--color-primary), var(--color-pink));
}
.bnl-page--home .bnl-genieask__go svg{width:20px;height:20px;}
.bnl-page--home .bnl-genieask__go:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ---- one screenful on a phone ---- */
@media (max-width:767px){
  .bnl-page--home .bnl-genieblk{padding:var(--space-md);}
  .bnl-page--home .bnl-genieart{max-height:38vh;}
  .bnl-page--home .bnl-genieblk__k{margin-top:2px;}
}

/* the launcher art override moved with it — see above. */

/* ============================================================================
   rev26 · ACADEMY EDGE
   The photograph used to stop dead and a flat scrim took over. The cut now
   lands under the headline and resolves through a warm metal — black into
   bronze into a pale champagne — so the join reads as a finished edge rather
   than a crop.
============================================================================ */




/* ============================================================================
   rev27 · THE ACADEMY PILL IS METAL
   Teal reads homeowner and pink reads action, so the Academy needed to belong
   to neither. Brushed titanium: a cool grey ramp with an off-axis highlight,
   a hairline top bevel, and a sheen that crosses on hover. It sits between the
   two coloured pills without competing with either.
============================================================================ */


.bnl-prevhdr__pill--academy:hover::after,


@media (min-width:768px){
  /* on desktop the pills sit in a single header row beside the nav, so equal
     thirds squeezed them to 125px and forced three-line labels. Sizing to
     content instead lets each one stay on a single line. */


}


/* ============================================================================
   rev27 · THE GENIE COMES AND GOES
   He withdraws into the bulb on the way out and rises again on the way back.
   The transform origin sits at the bulb, so both directions look like the lamp
   is doing the work.
============================================================================ */
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-genieart[data-summon]{
    transition:opacity .62s ease, transform .78s cubic-bezier(.19,.9,.28,1),
               filter .62s ease;
  }
  .bnl-page--home .bnl-genieart[data-summon="out"]{
    opacity:0;transform:translateY(9%) scale(.55);filter:blur(9px);
  }
  .bnl-page--home .bnl-genieart[data-summon="in"]{
    opacity:1;transform:translateY(0) scale(1);filter:blur(0);
    animation:none;
  }
}

/* ============================================================================
   rev29 · THREE FIXES
============================================================================ */

/* --- 1 · photographs were tiling ------------------------------------------
   Every filled slot computed background-repeat:repeat. `.bnl-slot` declares a
   `background:` shorthand, and a shorthand resets every sub-property it does
   not name — repeat included — so it was quietly undoing the no-repeat that
   `.bnl-ph` sets earlier in the sheet. Equal specificity, later rule wins.
   It stayed invisible until the palm photograph, whose 2.76:1 frame leaves
   enough vertical room inside a contained slot for a second copy to show. */
.bnl-page--home .bnl-slot--filled,
.bnl-page--home .bnl-sysc__media .bnl-slot,
.bnl-page--home .bnl-ba-slider .bnl-slot{
  background-repeat:no-repeat;
}
.bnl-page--home .bnl-sysc__media .bnl-slot{background-color:#050505;}

/* --- 2 · the gold bar had nowhere to go -----------------------------------
   It ramped up to champagne and then stopped dead against the body colour.
   That edge is the harshness. It now peaks and falls back into black before
   the copy begins, so it reads as light lying along the seam rather than a
   band that got cut off. */

/* the lit hairline moves to the crest of the ramp instead of the very bottom */

/* and the body picks the seam up in black so there is no second edge */


/* --- 3 · the Academy pill was unreadable ----------------------------------
   Polished aluminium put the plate around L*70–80 with white type on it, which
   is roughly 2:1 contrast — below any usable threshold. Dropped to gunmetal so
   the label clears 4.5:1 while the brand hues stay in the polish. Titanium is
   dark metal anyway; the previous ramp was closer to chrome. */




/* ============================================================================
   rev30 · THREE FIXES
============================================================================ */

/* --- 1 · the palm strip was floating in its slot ---------------------------
   The photograph is 2.76:1 and the card slot is roughly 1.33:1, so `contain`
   fitted it to the width and parked it at the top with a third of the slot
   left as black. Cover fills the frame; the strip has nine identical palms so
   cropping the outer ones costs nothing. */
.bnl-page--home .bnl-sysc__media .bnl-slot[style*="--img-sys-flood"]{
  background-size:cover !important;
  background-position:center center !important;
}

/* --- 2 · the gold had to flow, not stop -----------------------------------
   Two separate problems were reading as one. The body carried its own black
   gradient, which drew a hard rectangle across the photograph. And the gold
   ramp ended at the banner's edge, so it hit the card colour as a cut.

   The banner no longer clips, and the light now runs as a single element from
   inside the photograph down through the copy — crest at the seam, then a long
   even decay past the buttons. One gradient, one flow, no second edge. */





/* copy sits above the light */

.bnl-page--home .bnl-academy{overflow:hidden;}

/* ============================================================================
   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.
============================================================================ */
#doors .bnl-rot__item{--w:74vw;height:348px;}
#doors .bnl-rot__stage{height:372px;perspective-origin:50% 44%;}
#doors .bnl-rot__shadow{top:348px;}
#doors .bnl-rot__nav{margin-top:2px;gap:8px;}
#doors .bnl-rot__hint{margin-top:5px;}

@media (min-width:560px){ #doors .bnl-rot__item{--w:352px;} }
@media (min-width:820px){
  #doors .bnl-rot__stage{height:534px;}
  #doors .bnl-rot__item{--w:412px;height:506px;}
  #doors .bnl-rot__shadow{top:510px;width:352px;margin-left:-176px;}
}

/* ---- a livelier idle ------------------------------------------------------
   The float was +/-3.5deg over 7s, which on a phone reads as almost nothing.
   Doubled the yaw, widened the pitch, and added a slow vertical drift so the
   card looks buoyant rather than merely tilted. Still one card only — the back
   cards staying still is what makes the front one read as lifted. */
@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;}
  }
  #doors .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;}
#doors .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;}
  }
  #doors .bnl-rot__shadow{animation:bnl-card-shadow 9s ease-in-out infinite;}
}

/* ============================================================================
   rev31 · SCROLL-IN REVEAL
   Blueprint §3.6: "Motion earns its keep. Opacity + 8-16px rise on scroll-in."
   It was specified and never built. Applied to the elements that carry meaning
   — kickers, headings, ledes, cards, media — and deliberately not to the
   carousel, the rails or the review wall, all of which are already moving.
   One-shot: a section that keeps re-animating on every pass is a distraction.
============================================================================ */
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home [data-rise]{
    opacity:0;transform:translateY(14px);
    transition:opacity .62s cubic-bezier(.22,.61,.36,1),
               transform .62s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--rise-d, 0ms);
    will-change:opacity, transform;
  }
  .bnl-page--home [data-rise].is-in{opacity:1;transform:translateY(0);}
}

/* ============================================================================
   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.
============================================================================ */
#doors .bnl-rot__item .bnl-dcard{height:100%;}
#doors .bnl-rot__item{height:330px;}
#doors .bnl-rot__stage{height:352px;}
#doors .bnl-rot__shadow{top:330px;}
#doors .bnl-rot__nav{margin-top:0;}

/* the extra room is spent on the content, not left as air inside the card */
#doors .bnl-rot__item .bnl-dcard__body{padding:20px 20px 20px;gap:2px;}
#doors .bnl-rot__item .bnl-dcard__hook{margin-bottom:14px;}
#doors .bnl-rot__item .bnl-dcard__cta{margin-top:auto;min-height:46px;}

@media (min-width:820px){
  #doors .bnl-rot__item{height:430px;}
  #doors .bnl-rot__stage{height:456px;}
  #doors .bnl-rot__shadow{top:430px;}
  #doors .bnl-rot__item .bnl-dcard__body{padding:26px 26px 24px;}
}

/* ============================================================================
   rev33 · THE LIGHT WAS IN THE WRONG PLACE
   The photograph's lower edge sits at 16.1% of the gradient element, but the
   crest was written at 32% — 77px further down, which put the brightest part
   of the ramp directly behind the body copy. Light grey text on near-white
   gold is what made that paragraph disappear.

   The crest now lands on the seam itself, and the ramp is dark again well
   before the copy begins. The heading still crosses the lit zone, but it is
   large, white and bold, which is exactly the type that survives it.
============================================================================ */



/* and the copy gets enough weight to survive whatever it crosses */


/* ============================================================================
   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.
============================================================================ */
#doors .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;
}
#doors .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);
}
#doors .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 */
#doors .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;
}
#doors .bnl-rot__item .bnl-dcard__list li:first-child::before{top:calc(0.66em + 2px);}
#doors .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:none;}
@media (min-width:820px){
  #doors .bnl-rot__item .bnl-dcard__list{font-size:12.8px;margin:10px 0 14px;}
  #doors .bnl-rot__item .bnl-dcard__list li:nth-child(n+3){display:list-item;}
  #doors .bnl-rot__item .bnl-dcard__list li:nth-child(n+5){display:none;}
}
/* the bullet text stays neutral; only the marker carries the accent */
#doors .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.
============================================================================ */
#doors .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){
  #doors .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 */
#doors .bnl-rot__item .bnl-dcard__verb span:first-child{font-weight:500;letter-spacing:-.03em;}
#doors .bnl-rot__item .bnl-dcard__verb span:last-child{font-weight:800;}

/* the rule under it becomes a lit bar rather than a fade */
#doors .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 */
#doors .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 */
#doors .bnl-rot__item .bnl-dcard__inner{background:#101214;}


/* ============================================================================
   rev37 · THE CERTIFICATION SEAL + STAMP PRESS
   Ported from The Masters of Lighting Academy rev10, per its DECISIONS §3.
   That record documents three separate bugs already paid for on that page.
   They are not re-derived here — they are obeyed:

     (a) Arc text overflowed its path, so both arcs carry an explicit
         textLength with lengthAdjust="spacing". ⚠️ MEASURED AGAINST SORA.
         Change the heading font and the arc text stops fitting its arc.

     (b) The mark must NOT be a <symbol>. A <use> of a symbol maps its viewBox
         into the use element's viewport, silently rescaling by 1.31579 and
         shifting +21.05 in x before any transform of ours runs. Three
         revisions did arithmetic against content that had already moved.

     (c) The true centre is not the viewBox centre. Stroke padding applies only
         to the bulb arc; the base and filaments are unstroked fills, so
         padding the whole artwork produces a false y-centre.

   ⚠️ DIVERGENCE FROM ACADEMY rev10 — read before reconciling the two pages.
   The Academy seal carries `bn-mark` as vector geometry. That geometry lives
   inside academy-rev10-06-handoff-FOLDER.zip and could not be opened from
   here, so this seal places the raster mark (home-logo-mark.webp, 240×278)
   instead. The box is set explicitly rather than by eye, reproducing the
   radius the Academy record verified by rasterising: half-height 34.7u, so
   height 69.4 and width 69.4 × 240/278 = 59.9, against an inner ring of 54
   and a die of 60. Same footprint, different substrate.

   When the vector mark is available, swap the <image> for the group and use
   the Academy's transform verbatim:
       translate(100,100) scale(.50) translate(-60,-85.22)
   Do not re-centre it by eye, and do not re-centre it against the viewBox.
============================================================================ */

.bnl-page--home .bnl-stamp{
  --stamp-gold:#E9E0C8;
  --stamp-gold-deep:#B39A66;
  position:relative;
  display:block;width:clamp(116px,30vw,152px);
  margin:0 auto var(--space-sm,14px);
  aspect-ratio:1/1;
  z-index:3;
}
.bnl-page--home .bnl-stamp svg{display:block;width:100%;height:100%;overflow:visible;}

.bnl-page--home .bnl-stamp__die{
  fill:none;
  stroke:url(#bnl-seal-ramp);
  stroke-width:2.4;
}
.bnl-page--home .bnl-stamp__ring{
  fill:none;
  stroke:color-mix(in srgb,var(--stamp-gold-deep) 62%,transparent);
  stroke-width:.9;
}
.bnl-page--home .bnl-stamp__arc{
  font-family:var(--font-heading-proposed,"Sora",sans-serif);
  font-weight:700;
  font-size:15.5px;
  letter-spacing:.02em;
  fill:var(--stamp-gold);
}
.bnl-page--home .bnl-stamp__tick{
  fill:color-mix(in srgb,var(--stamp-gold) 70%,transparent);
}
.bnl-page--home .bnl-stamp__mark{opacity:.96;}

/* CERTIFIED sits BENEATH the die, never inside it. Academy DECISIONS §3:
   inside, it collided with the lower arc. */
.bnl-page--home .bnl-stamp__word{
  display:block;text-align:center;
  margin-top:-2px;
  font-family:var(--font-heading-proposed,"Sora",sans-serif);
  font-weight:800;font-size:11px;
  letter-spacing:.30em;text-indent:.30em;
  color:var(--stamp-gold);
  opacity:.92;
}

/* --- the press -------------------------------------------------------------
   The stamper falls, lands, and its cast shadow SWELLS on impact. The swell is
   the whole effect — without it this is a fade-in wearing a seal costume. */
.bnl-page--home .bnl-stamp{
  transform:scale(1.72) rotate(-13deg);
  opacity:0;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.62));
  transition:none;
}
.bnl-page--home .bnl-stamp.is-stamped{
  animation:bnl-stamp-press .52s cubic-bezier(.18,.84,.32,1) forwards;
}
@keyframes bnl-stamp-press{
  0%  {transform:scale(1.72) rotate(-13deg);opacity:0;
       filter:drop-shadow(0 26px 30px rgba(0,0,0,.62));}
  62% {opacity:1;}
  78% {transform:scale(.965) rotate(-3.6deg);opacity:1;
       filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));}
  100%{transform:scale(1) rotate(-3.6deg);opacity:1;
       filter:drop-shadow(0 9px 20px rgba(0,0,0,.42));}
}
/* the impact ring — pushed outward by the landing, then gone */
.bnl-page--home .bnl-stamp::after{
  content:"";position:absolute;inset:6%;
  border-radius:50%;pointer-events:none;
  border:1.5px solid color-mix(in srgb,var(--stamp-gold) 52%,transparent);
  opacity:0;
}
.bnl-page--home .bnl-stamp.is-stamped::after{
  animation:bnl-stamp-shock .62s ease-out .30s forwards;
}
@keyframes bnl-stamp-shock{
  0%  {transform:scale(.94);opacity:.85;}
  100%{transform:scale(1.42);opacity:0;}
}

/* reduced motion: it lands, it just does not travel to get there */
@media (prefers-reduced-motion:reduce){
  .bnl-page--home .bnl-stamp{transform:none;opacity:1;filter:drop-shadow(0 9px 20px rgba(0,0,0,.42));}
  .bnl-page--home .bnl-stamp.is-stamped{animation:none;}
  .bnl-page--home .bnl-stamp.is-stamped::after{animation:none;}
}
/* no JS: the seal must still be there */
.bnl-page--home .bnl-stamp.is-static{transform:none;opacity:1;filter:drop-shadow(0 9px 20px rgba(0,0,0,.42));}

/* the banner's gold ramp crests right about here, so the seal needs its own
   ground to stay legible against it */



/* ============================================================================
   rev40 · THE PILLS BREATHE
   Every pill carried a static ambient glow, which at rest is indistinguishable
   from a border treatment. The glow now swells and falls so the button reads as
   lit rather than outlined.

   Built on box-shadow rather than a filter or a pseudo-element: filter would
   blur the label with it, and a pseudo-element under a transparent pill shows
   its edge through the fill. Two layers — a tight core and a wide bloom — so
   the swell reads as light leaving the object rather than the object resizing.

   The two stacked pills run the same cycle offset by 1.4s. In lockstep they
   pulse as one block and the pair reads as a single flashing slab.

   Hover and focus take over completely: the animation is dropped so a pointer
   never fights the cycle for control of the same property.
============================================================================ */
@keyframes bnl-pill-breathe-pink{
  0%,100%{ box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-pink) 22%, transparent),
      0 0 14px color-mix(in srgb, var(--color-pink) 34%, transparent),
      0 0 34px color-mix(in srgb, var(--color-pink) 14%, transparent); }
  50%    { box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-pink) 48%, transparent),
      0 0 26px color-mix(in srgb, var(--color-pink) 62%, transparent),
      0 0 68px color-mix(in srgb, var(--color-pink) 34%, transparent); }
}
@keyframes bnl-pill-breathe-teal{
  0%,100%{ box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent),
      0 0 14px color-mix(in srgb, var(--color-primary) 34%, transparent),
      0 0 34px color-mix(in srgb, var(--color-primary) 14%, transparent); }
  50%    { box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-primary) 48%, transparent),
      0 0 26px color-mix(in srgb, var(--color-primary) 62%, transparent),
      0 0 68px color-mix(in srgb, var(--color-primary) 34%, transparent); }
}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-btn--primary  { animation:bnl-pill-breathe-pink 3.4s ease-in-out infinite; }
  .bnl-page--home .bnl-btn--secondary{ animation:bnl-pill-breathe-teal 3.4s ease-in-out infinite; animation-delay:-1.4s; }
  /* the per-system button on the cards keeps its own smaller cycle */
  .bnl-page--home .bnl-sysc__go{ animation:bnl-pill-breathe-teal 4.2s ease-in-out infinite; animation-delay:-.7s; }
  .bnl-page--home .bnl-btn--primary:hover, .bnl-page--home .bnl-btn--primary:focus-visible,
  .bnl-page--home .bnl-btn--secondary:hover, .bnl-page--home .bnl-btn--secondary:focus-visible,
  .bnl-page--home .bnl-sysc:hover .bnl-sysc__go{ animation:none; }
}
/* The sticky bar is on screen at every scroll position on a phone. A pill that
   pulses permanently in the corner of the eye is nagging rather than inviting,
   so it runs at roughly half amplitude and half speed. */
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-sticky-cta .bnl-btn--primary{
    animation-duration:5.6s;
    animation-name:bnl-pill-breathe-pink-soft;
  }
}
@keyframes bnl-pill-breathe-pink-soft{
  0%,100%{ box-shadow:0 0 12px color-mix(in srgb, var(--color-pink) 28%, transparent); }
  50%    { box-shadow:0 0 24px color-mix(in srgb, var(--color-pink) 46%, transparent),
                      0 0 48px color-mix(in srgb, var(--color-pink) 20%, transparent); }
}

/* ============================================================================
   rev40 · THE FOUR GUIDES GO ON THE RAIL
   They were a stacked grid: four tall cards, one under another, ~2.5 phone
   screens for four links. Now the same rail the seven systems use — auto-
   scrolling, swipeable, arrows and a hint underneath.

   Deliberately reusing .bnl-sysrail rather than writing a second rail. The rail
   JS was rewritten in this revision to drive every instance on the page instead
   of the first one it finds, so both rails share one implementation and one set
   of bugs. A parallel .bnl-learnrail with its own script is how a page ends up
   with two carousels that behave differently.
============================================================================ */
.bnl-page--home .bnl-learnrail .bnl-learn__card{
  flex:0 0 78%;scroll-snap-align:center;
  min-height:100%;
}
@media (min-width:640px){ .bnl-page--home .bnl-learnrail .bnl-learn__card{flex:0 0 46%;} }
@media (min-width:1100px){ .bnl-page--home .bnl-learnrail .bnl-learn__card{flex:0 0 30%;} }
.bnl-page--home .bnl-learnrail .bnl-sysrail__track{align-items:stretch;}
/* the third question comes back — there is room on a card that is not stacked */
.bnl-page--home .bnl-learnrail .bnl-learn__q li:nth-child(n+3){display:list-item;}


/* ============================================================================
   rev41 — superseded by rev46. Its rules are gone; this note remains only to
   record that "third and final placement" was neither. See DECISIONS §3a.
============================================================================ */



/* A dark disc behind it. Without this the top half of the seal disappears into
   a lit photograph and the bottom half into the gold crest — the two brightest
   things on the block, meeting exactly where the seal sits. */


/* The body no longer carries the seal, so its overlap comes back — otherwise
   the heading would sit half a seal lower than rev18 intended. */


/* CERTIFIED sits under the die and has to survive the gold crest */



/* ============================================================================
   rev42 — superseded. Its rules were removed in rev46 along with rev37/39/41's;
   the surviving comment described selectors that no longer exist, which is
   exactly the dead weight the standard warns about. History for this block now
   lives in one place: DECISIONS §3a and the rev46 block at the foot of this
   file. The one durable fact worth carrying forward is why the gold went — the
   ramp existed to hide a hard cut at the bottom of the photograph, and the
   photograph is framed now, so there is no cut to hide.
============================================================================ */
.bnl-page--home .bnl-academy{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg,20px);
  background:
    radial-gradient(120% 62% at 50% 100%, rgba(122,59,255,.20) 0%, transparent 62%),
    radial-gradient(90% 46% at 50% 46%, rgba(227,5,107,.13) 0%, transparent 68%),
    linear-gradient(180deg, #0B0C0E 0%, #0A0A0A 58%, #08090B 100%);
  border:1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}
/* a single hairline of brand across the top, instead of a gold slab */


/* rev45 · NO FADE ON THE PHOTOGRAPH.
   rev42 masked its lower edge so it dissolved into the page. Austen wants the
   picture shown as a picture: hard edge, border, done. The mask is gone and
   nothing replaces it — the seal already separates the photo from the copy, so
   there is no seam left that needed hiding. */



/* SEAL ROW — under the photo, over the page, not across a seam */




/* the body sits BELOW the picture now — no overlap to fight */

@media (min-width:820px){
}

/* SEAL, in platinum. The gold die on a gold ramp was one material doing two
   jobs; against the brand ramp it read as a third colour arguing with both.
   ⚠️ This diverges from the Academy page's gold seal — BRI-343 already tracks
   confirming that seal, so settle both in one pass. */



/* rev43: CERTIFIED was landing on the kicker. The seal row is a flex item with
   no bottom margin, so the word and the eyebrow beneath it were sharing the
   same band of space. */



/* ============================================================================
   rev42 · THE COMPARE HANDLE LOOKS LIKE A HANDLE
   It was a 3px rule and a small glyph, so the control read as a seam in the
   photograph rather than as something to grab. It is a real knob now, with
   both directions shown, and it opens at 70% unlit so the lit state is
   something you reveal rather than something already spent.
============================================================================ */
.bnl-page--home .bnl-ba-slider__divider{
  width:2px;
  background:linear-gradient(180deg, transparent, #fff 12%, #fff 88%, transparent);
  box-shadow:0 0 12px rgba(0,0,0,.9), 0 0 22px rgba(255,255,255,.35);
}
.bnl-page--home .bnl-ba-slider__knob{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-size:0;
  background:rgba(12,14,16,.86);
  border:2px solid #fff;
  box-shadow:0 0 0 6px rgba(10,10,10,.34), 0 6px 20px rgba(0,0,0,.6),
             0 0 26px color-mix(in srgb,var(--color-primary) 42%,transparent);
  backdrop-filter:blur(2px);
}
/* two chevrons, so the affordance states the axis */
.bnl-page--home .bnl-ba-slider__knob::before,
.bnl-page--home .bnl-ba-slider__knob::after{
  content:"";position:absolute;top:50%;width:8px;height:8px;
  border-top:2.2px solid #fff;border-right:2.2px solid #fff;
}
.bnl-page--home .bnl-ba-slider__knob::before{left:11px;transform:translateY(-50%) rotate(-135deg);}
.bnl-page--home .bnl-ba-slider__knob::after {right:11px;transform:translateY(-50%) rotate(45deg);}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-ba-slider__knob{animation:bnl-knob-nudge 3.6s ease-in-out infinite;}
}
@keyframes bnl-knob-nudge{
  0%,100%{box-shadow:0 0 0 6px rgba(10,10,10,.34), 0 6px 20px rgba(0,0,0,.6),
                     0 0 22px color-mix(in srgb,var(--color-primary) 36%,transparent);}
  50%    {box-shadow:0 0 0 8px rgba(10,10,10,.30), 0 6px 20px rgba(0,0,0,.6),
                     0 0 38px color-mix(in srgb,var(--color-primary) 66%,transparent);}
}

/* ============================================================================
   rev43 · YOUR SUCCESS IS OUR MISSION
   Adapted from the ABC Supply co-branded sales sheet Austen supplied. Three
   things were deliberately NOT carried across:

     · the ABC Supply logo and the "available at ABC" lock-up — the standard
       forbids burning a third-party logo into a page, and the homepage is not
       the place to name one distributor when the whole argument is "buy through
       the distributor you already use"
     · "Master of Lighting Representative" — that programme is discontinued and
       the term is not public (DECISIONS §5). It appears on the flyer as a job
       title under a named person
     · the named headshots — four identifiable people, one of them a partner's
       employee, is a permissions question the homepage does not need

   What carried across is the part that is true regardless of who stocks it:
   five support promises and the line that closes them.

   Placed after the Academy and before Compare, which is where the contractor
   argument already lives — a homeowner scrolling past has met the credential
   and is about to see the comparison table.
============================================================================ */
.bnl-page--home .bnl-mission{
  list-style:none;padding:0;margin:var(--space-lg) 0 0;
  display:grid;gap:10px;
}
@media (min-width:700px){ .bnl-page--home .bnl-mission{grid-template-columns:repeat(2,1fr);gap:12px;} }
@media (min-width:1060px){ .bnl-page--home .bnl-mission{grid-template-columns:repeat(5,1fr);} }

.bnl-page--home .bnl-mission__item{
  position:relative;
  padding:16px 16px 18px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  border:1px solid var(--color-border);
  border-top:2px solid var(--m, var(--color-primary));
}
/* the five run the brand ramp left to right, so the row reads as one gradient
   rather than five identical tiles */
.bnl-page--home .bnl-mission__item:nth-child(1){--m:var(--color-primary);}
.bnl-page--home .bnl-mission__item:nth-child(2){--m:#2FB6C9;}
.bnl-page--home .bnl-mission__item:nth-child(3){--m:#7A3BFF;}
.bnl-page--home .bnl-mission__item:nth-child(4){--m:var(--color-pink);}
.bnl-page--home .bnl-mission__item:nth-child(5){--m:var(--color-orange);}

.bnl-page--home .bnl-mission__ic{
  display:grid;place-items:center;
  width:38px;height:38px;margin-bottom:10px;
  border-radius:50%;color:var(--m);
  border:1.5px solid color-mix(in srgb, var(--m) 55%, transparent);
  background:color-mix(in srgb, var(--m) 10%, transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--m) 22%, transparent);
}
.bnl-page--home .bnl-mission__ic svg{width:19px;height:19px;}
.bnl-page--home .bnl-mission__t{
  font-family:var(--font-heading-proposed);font-weight:700;
  font-size:14.5px;letter-spacing:-.012em;color:var(--color-text);margin:0 0 5px;
}
.bnl-page--home .bnl-mission__d{
  font-size:12.8px;line-height:1.45;color:var(--color-text-muted);margin:0;
}
.bnl-page--home .bnl-mission__close{
  text-align:center;margin:var(--space-ml) 0 var(--space-md);
  font-family:var(--font-heading-proposed);font-weight:700;
  font-size:clamp(16px,4.2vw,21px);letter-spacing:-.02em;color:var(--color-text);
}


/* ============================================================================
   rev45 · THE CONTACT DETAILS GET A CARD
   Company name, city, phone and email sat as naked paragraphs under the logo —
   the two highest-intent taps on the page presented as body copy. A card gives
   them an edge, and each line becomes a full-width row so the tap target is the
   row rather than the string.
============================================================================ */
.bnl-page--home .bnl-foot__card{
  margin-top:14px;padding:14px 15px 12px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-bg-elevated) 74%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  backdrop-filter:blur(3px);
  max-width:340px;
}
.bnl-page--home .bnl-foot__co{
  margin:0 0 2px;font-family:var(--font-heading-proposed);font-weight:700;
  font-size:14px;letter-spacing:-.01em;color:var(--color-text);
}
.bnl-page--home .bnl-foot__where{
  margin:0 0 10px;font-size:12.5px;color:var(--color-text-muted);
}
.bnl-page--home .bnl-foot__line{
  display:flex;align-items:center;gap:10px;
  min-height:44px;                       /* the money taps, per BRI-281 */
  padding:2px 4px;margin:0 -4px;
  border-radius:var(--radius-sm,8px);
  font-size:15px;font-weight:600;
  color:color-mix(in srgb,#fff 90%,var(--color-text-muted));
  text-decoration:none;
}
.bnl-page--home .bnl-foot__line + .bnl-foot__line{
  border-top:1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.bnl-page--home .bnl-foot__line:hover{color:#fff;background:color-mix(in srgb, var(--color-primary) 9%, transparent);}
.bnl-page--home .bnl-foot__lic{
  display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;
  border-radius:50%;color:var(--color-primary);
  border:1px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
  background:color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.bnl-page--home .bnl-foot__lic svg{width:14px;height:14px;}


/* ============================================================================
   rev46 · THE ACADEMY BLOCK, FOURTH STRUCTURE — and the first that does not
   put the seal and the photograph in the same argument.

   rev37 put the seal inside the body: it straddled the seam.
   rev39 moved it below the kicker: same seam, one line lower.
   rev41 gave it its own row centred ON the seam: a medal across a join.
   rev44 dropped it fully below the picture: legible, but still a photograph
         with a badge hanging off it.

   All four treated the seal as something to position against the photo. It is
   not. It is a separate object with its own job, so it gets its own plate:

       FIGURE   framed photograph + caption. Finished, self-contained.
       PLATE    seal LEFT, words RIGHT, then the lede, then the actions.

   Nothing overlaps. Reading order is mark → meaning → detail → action, which is
   the order a credential is read anywhere else.

   The lockup does NOT stack on mobile. A 96px mark beside two lines of type is
   more legible at 390px than a centred mark with the type pushed underneath it,
   and it keeps the seal at a size where the arc text can still be read.
============================================================================ */
.bnl-page--home .bnl-academy{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg,20px);
  padding:var(--space-ml);
  background:
    radial-gradient(112% 58% at 50% 104%, rgba(122,59,255,.20) 0%, transparent 64%),
    radial-gradient(84% 42% at 12% 0%,  rgba(0,169,181,.13) 0%, transparent 66%),
    radial-gradient(84% 42% at 92% 8%,  rgba(227,5,107,.11) 0%, transparent 66%),
    linear-gradient(180deg,#0C0D10 0%,#0A0A0C 62%,#08090B 100%);
  border:1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}
@media (min-width:820px){ .bnl-page--home .bnl-academy{padding:var(--space-lg);} }

/* --- the photograph is a photograph -------------------------------------- */
.bnl-page--home .bnl-academy__figure{margin:0;}
.bnl-page--home .bnl-academy__figure .bnl-slot{
  aspect-ratio:1452/1083;height:auto;
  border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  box-shadow:0 12px 38px rgba(0,0,0,.55);
  background-size:cover;background-position:center;
  mask-image:none;-webkit-mask-image:none;
}
.bnl-page--home .bnl-academy__cap{
  margin:9px 2px 0;
  font-family:var(--font-heading-proposed);
  font-size:11px;letter-spacing:.05em;line-height:1.4;
  color:color-mix(in srgb,#fff 46%,transparent);
}

/* --- the credential plate ------------------------------------------------- */
.bnl-page--home .bnl-academy__plate{
  margin-top:var(--space-ml);
  padding:var(--space-ml) var(--space-md) var(--space-md);
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-bg-elevated) 62%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  border-top:2px solid transparent;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-bg-elevated) 62%, transparent),
                    color-mix(in srgb, var(--color-bg-elevated) 62%, transparent)),
    linear-gradient(90deg, var(--color-primary), #7A3BFF 52%, var(--color-pink));
  background-origin:border-box;
  background-clip:padding-box, border-box;
  backdrop-filter:blur(3px);
}
@media (min-width:820px){
  .bnl-page--home .bnl-academy__plate{padding:var(--space-lg) var(--space-ml) var(--space-ml);}
}

/* seal left, words right — at every width */
.bnl-page--home .bnl-academy__lockup{
  display:flex;align-items:center;gap:14px;
  text-align:left;
}
@media (min-width:820px){ .bnl-page--home .bnl-academy__lockup{gap:22px;} }

.bnl-page--home .bnl-academy__lockup .bnl-stamp{
  flex:0 0 auto;width:clamp(88px,23vw,124px);margin:0;
  --stamp-gold:#EAF2F4;--stamp-gold-deep:#7E8A90;
}
.bnl-page--home .bnl-academy__lockup .bnl-stamp__die{stroke:url(#bnl-seal-ramp);stroke-width:2.8;}
.bnl-page--home .bnl-academy__lockup .bnl-stamp__word{
  margin-top:2px;color:#EAF2F4;font-size:9px;letter-spacing:.26em;text-indent:.26em;
}
.bnl-page--home .bnl-academy__lockup-text{min-width:0;}
.bnl-page--home .bnl-academy__eyebrow{
  margin:0 0 4px;
  font-family:var(--font-heading-proposed);font-weight:800;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-primary);
}
.bnl-page--home .bnl-academy__h{
  margin:0;text-align:left;
  font-size:clamp(23px,6.1vw,38px);line-height:1.04;letter-spacing:-.03em;
}
.bnl-page--home .bnl-academy__lede{
  margin:var(--space-md) 0 0;
  font-size:14.5px;line-height:1.55;color:var(--color-text-muted);
  text-align:left;
}
@media (min-width:820px){
  .bnl-page--home .bnl-academy__lede{font-size:15.5px;max-width:62ch;}
}
.bnl-page--home .bnl-academy__cta{margin-top:var(--space-ml);justify-content:flex-start;}
@media (max-width:600px){
  .bnl-page--home .bnl-academy__cta{justify-content:stretch;}
  .bnl-page--home .bnl-academy__cta .bnl-btn{flex:1 1 100%;}
}

/* --- desktop: photograph and plate sit side by side ----------------------- */
@media (min-width:1000px){
  .bnl-page--home .bnl-academy{
    display:grid;grid-template-columns:1.15fr .85fr;
    gap:var(--space-lg);align-items:center;
  }
  .bnl-page--home .bnl-academy__plate{margin-top:0;}
}


/* ============================================================================
   rev47 · THE GUIDE CARDS
   They were flat panels: one flat fill, one hairline border, a tinted string
   for an action. On a rail they read as four identical grey slabs sliding past.

   Sharper here means: a lit ground behind the rail so the cards sit ON
   something, a per-card accent so the four are distinguishable at a glance
   mid-scroll, a real top-edge gradient rather than a border colour, and the
   action promoted from a string to a pill with the same glow the system cards
   got in rev39.
============================================================================ */
#learn{position:relative;overflow:hidden;}
#learn::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 52% at 50% 106%, rgba(0,169,181,.16) 0%, transparent 66%),
    radial-gradient(70% 44% at 8% 8%,   rgba(122,59,255,.13) 0%, transparent 68%),
    radial-gradient(70% 44% at 94% 22%, rgba(227,5,107,.10) 0%, transparent 68%);
}
#learn > *{position:relative;z-index:1;}

.bnl-page--home .bnl-learnrail .bnl-learn__card{
  padding:18px 17px 16px;
  border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb, var(--lc, var(--color-primary)) 26%, var(--color-border));
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--lc, var(--color-primary)) 9%, #131619) 0%,
      #101315 44%, #0C0E10 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lc, var(--color-primary)) 34%, transparent),
    0 10px 30px rgba(0,0,0,.5);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bnl-page--home .bnl-learnrail .bnl-learn__card:nth-child(1){--lc:var(--color-primary);}
.bnl-page--home .bnl-learnrail .bnl-learn__card:nth-child(2){--lc:#42D696;}
.bnl-page--home .bnl-learnrail .bnl-learn__card:nth-child(3){--lc:#7A3BFF;}
.bnl-page--home .bnl-learnrail .bnl-learn__card:nth-child(4){--lc:var(--color-orange);}
.bnl-page--home .bnl-learnrail .bnl-learn__card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--lc) 62%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--lc) 50%, transparent),
    0 14px 40px rgba(0,0,0,.6),
    0 0 26px color-mix(in srgb, var(--lc) 22%, transparent);
}
.bnl-page--home .bnl-learnrail .bnl-learn__t{
  font-size:17px;letter-spacing:-.02em;line-height:1.15;margin-bottom:7px;
}
.bnl-page--home .bnl-learnrail .bnl-learn__d{font-size:13px;line-height:1.5;}
.bnl-page--home .bnl-learnrail .bnl-learn__q li{
  font-size:12.5px;line-height:1.4;
  border-top:1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  padding:9px 0;
}
.bnl-page--home .bnl-learnrail .bnl-learn__flag{
  background:color-mix(in srgb, var(--lc) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--lc) 48%, transparent);
  color:var(--lc);
}

/* the action is a pill now, matching the system cards */
.bnl-page--home .bnl-learnrail .bnl-learn__go{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:9px 16px;
  border-radius:var(--radius-pill,999px);
  font-family:var(--font-heading-proposed);font-weight:600;
  font-size:12.5px;letter-spacing:.01em;
  color:var(--lc);
  border:1.5px solid color-mix(in srgb, var(--lc) 62%, transparent);
  background:color-mix(in srgb, var(--lc) 8%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--lc) 18%, transparent);
  transition:background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bnl-page--home .bnl-learnrail .bnl-learn__card:hover .bnl-learn__go{
  background:color-mix(in srgb, var(--lc) 16%, transparent);
  border-color:var(--lc);
  box-shadow:0 0 24px color-mix(in srgb, var(--lc) 34%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  .bnl-page--home .bnl-learnrail .bnl-learn__go{
    animation:bnl-guidepill 4.4s ease-in-out infinite;
  }
  .bnl-page--home .bnl-learnrail .bnl-learn__card:hover .bnl-learn__go{animation:none;}
}
@keyframes bnl-guidepill{
  0%,100%{box-shadow:0 0 12px color-mix(in srgb, var(--lc) 16%, transparent);}
  50%    {box-shadow:0 0 24px color-mix(in srgb, var(--lc) 40%, transparent),
                     0 0 46px color-mix(in srgb, var(--lc) 16%, transparent);}
}

/* ============================================================================
   rev47 · THE PAGE STOPS ENDING ON A LINE
   rev45 lit the footer, but the ramp still resolved at a fixed 150px and the
   bloom started at a fixed 78%, so two horizontal edges landed in the dead band
   between the closer and the logo — visible as a seam across an otherwise empty
   stretch. Both are percentage-based and overlapping now, and the closer hands
   its own glow downward instead of stopping at its boundary.
============================================================================ */
.bnl-page--home .bnl-closer{padding-bottom:calc(var(--space-2xl) + 40px);}
.bnl-page--home .bnl-closer__bg{
  background:
    radial-gradient(80% 120% at 50% 116%, color-mix(in srgb, var(--color-pink) 20%, transparent), transparent 72%),
    radial-gradient(60% 90% at 20% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%);
}
.bnl-page--home .bnl-foot{
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(9,9,12,.35) 14%,
    rgba(10,10,13,.72) 34%,
    #0A0A0D 56%,
    #0B0A11 78%,
    #0C0A13 100%);
}
.bnl-page--home .bnl-foot::after{
  height:100%;
  background:
    radial-gradient(88% 74% at 50% 112%, rgba(122,59,255,.30) 0%, transparent 68%),
    radial-gradient(58% 60% at 10% 100%, rgba(0,169,181,.18) 0%, transparent 72%),
    radial-gradient(58% 60% at 90% 104%, rgba(227,5,107,.18) 0%, transparent 72%),
    radial-gradient(120% 40% at 50% -6%, rgba(227,5,107,.10) 0%, transparent 70%);
}


/* ============================================================================
   rev48 · THE SYSTEMS REEL
   Sits in the gap between the four steps and the Proof heading.

   Sized so it CANNOT dominate a phone. 16:9 at the content width of a 390px
   iPhone is about 358x201 — roughly a quarter of the viewport height, which is
   a window into the product rather than a takeover. Capped at 640px on desktop
   so it stays a window there too.
============================================================================ */
.bnl-page--home .bnl-reel-sec{
  position:relative;overflow:hidden;
  padding-top:var(--space-lg);padding-bottom:var(--space-lg);
}
.bnl-page--home .bnl-reel-sec::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(78% 70% at 50% 50%, rgba(93,157,255,.13) 0%, transparent 70%),
    radial-gradient(60% 50% at 12% 90%, rgba(122,59,255,.10) 0%, transparent 72%);
}
.bnl-page--home .bnl-reel-sec > *{position:relative;z-index:1;}

.bnl-page--home .bnl-reel{
  position:relative;
  max-width:640px;margin:0 auto;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid color-mix(in srgb, #5D9DFF 34%, var(--color-border));
  box-shadow:
    0 14px 44px rgba(0,0,0,.6),
    0 0 34px rgba(93,157,255,.14);
  background:#08090B;
}
.bnl-page--home .bnl-reel__v{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;background:#08090B;
}
/* a soft inner vignette so the clip's own edges meet the frame instead of
   ending on a hard rectangle */
.bnl-page--home .bnl-reel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,.55);
  border-radius:inherit;
}
@media (prefers-reduced-motion:reduce){
  .bnl-page--home .bnl-reel__v{display:none;}
  .bnl-page--home .bnl-reel{
    aspect-ratio:16/9;
    background:url("/wp-content/uploads/2026/08/home-reel-poster.jpeg") center/cover no-repeat;
  }
}