/* =====================================================================
   bnl-components.css — v2.0
   ALIGNED TO home-RENDERED-rev34.html (the master reference)

   v1.0 was extracted from the product pages (roofline rev33 era). The
   homepage has moved a long way past those. Every value below was read
   out of rev34, not carried over from the product pages.

   WHAT CHANGED FROM v1.0 — and why it mattered:
   1. FONT. rev34 defines --font-display: 'Bricolage Grotesque','Sora',…
      and points --font-heading-proposed at it. v1.0 pointed at Sora
      directly, so every heading on the four Brighter pages rendered in
      the WRONG TYPEFACE. Biggest fix in the file.
   2. GRADIENT TEXT. rev34 uses the 4-stop --gradient-lux and ANIMATES it
      (background-size 230%, bnl-grad-drift 9s). v1.0 used the flat 2-stop
      --gradient-brand with no motion.
   3. BUTTONS. rev34 buttons are gradient-bordered pills (padding-box /
      border-box) over a near-black fill with a top gloss. v1.0 had flat
      1.5px solid borders and teal-on-transparent secondaries.
   4. HEADINGS. rev34 is tighter and heavier: -.048em / 1.02 / 800 /
      text-wrap:balance. v1.0 was -0.015em / 1.18 / 700.
   5. MOTION POLICY. rev34 gates animation ON behind
      (prefers-reduced-motion: no-preference) rather than switching it off
      behind (reduce). Safer: motion never starts for users who opted out.
   6. Coming-soon uses rev34's existing a[aria-disabled="true"] pattern.
      v1.0 invented a parallel .bnl-eco-soon component. Deleted.

   BUG FOUND IN rev34 — FIXED HERE, STILL BROKEN ON THE HOMEPAGE:
      --hglow-teal-hi and --hglow-teal-soft are referenced on four hover
      states (.bnl-btn--secondary:hover, .bnl-sysrail__arrow:hover,
      .bnl-genie-launch:hover, #doors .bnl-rot__arrow--next:hover) but are
      never defined anywhere in the file. Those hovers silently do nothing.
      Both are defined below.

   DEPENDS ON: tokens.css v1.1 (Mateo owns :root).
   LOAD ORDER: tokens.css -> bnl-components.css -> page overrides.
   WORDPRESS: enqueue, never <link>.

   FONT LOADING is a theme responsibility, not this file's. Required:
     Bricolage Grotesque  opsz,wght@12..96,400..800
     Inter                400;600;700
     Chakra Petch         400;600;700   (tokens.css fallback chain)
===================================================================== */

/* ---------------------------------------------------------------
   TOKENS v1.2 PROPOSAL — mirrors rev34 exactly.
   Promote into tokens.css and delete this block.
--------------------------------------------------------------- */
.bnl-page {
  --font-display: 'Bricolage Grotesque', 'Sora', var(--font-heading), sans-serif;
  --font-heading-proposed: var(--font-display);

  --gradient-lux: linear-gradient(100deg,#00A9B5 0%,#8FE3E9 24%,#E3056B 68%,#FF74AE 100%);
  --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%);

  --glow-ambient-teal: 0 0 48px -12px color-mix(in srgb, var(--color-primary) 55%, transparent);
  --glow-ambient-pink: 0 0 56px -10px color-mix(in srgb, var(--color-pink) 45%, transparent);

  --hglow-teal:    0 0 14px rgba(0,169,181,.5),  0 0 40px rgba(0,169,181,.32);
  --hglow-pink:    0 0 14px rgba(227,5,107,.55), 0 0 44px rgba(227,5,107,.38);
  --hglow-pink-hi: 0 0 18px rgba(227,5,107,.75), 0 0 60px rgba(227,5,107,.5);
  /* the two rev34 references but never defines */
  --hglow-teal-hi:   0 0 18px rgba(0,169,181,.7),  0 0 60px rgba(0,169,181,.45);
  --hglow-teal-soft: 0 0 12px rgba(0,169,181,.35), 0 0 30px rgba(0,169,181,.22);
}

/* ---------------------------------------------------------------
   PAGE SHELL
--------------------------------------------------------------- */
.bnl-page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  overflow-x: clip;
}
.bnl-page img { max-width: 100%; }
.bnl-page section[id] { scroll-margin-top: 90px; }
.bnl-sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.bnl-page :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---------------------------------------------------------------
   BREADCRUMBS
--------------------------------------------------------------- */
.bnl-crumbs { padding: var(--space-md) var(--space-md) 0; max-width: var(--width-content); margin: 0 auto; }
.bnl-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs);
  font-size: var(--text-small); color: var(--color-text-muted); margin: 0; padding: 0;
}
.bnl-crumbs li + li::before { content: "/"; margin: 0 var(--space-xs); color: var(--color-border); }
.bnl-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.bnl-crumbs a:hover { color: var(--color-primary); }
.bnl-crumbs [aria-current] { color: var(--color-text); }

/* ---------------------------------------------------------------
   SECTIONS — rev34 uses --space-xl vertical, not --space-lg
--------------------------------------------------------------- */
.bnl-section { padding: var(--space-xl) var(--space-md); }
.bnl-section__inner { max-width: var(--width-content); margin: 0 auto; }
.bnl-section--alt {
  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%);
}
@media (min-width: 768px) { .bnl-section { padding: var(--space-xl) var(--space-lg); } }

/* ---------------------------------------------------------------
   TYPE — rev34 scale
--------------------------------------------------------------- */
.bnl-heading {
  font-family: var(--font-heading-proposed);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.048em;
  text-wrap: balance;
  margin: 0 0 var(--space-ml);
}
.bnl-heading--section { font-size: clamp(31px, 5vw, 52px); }
.bnl-heading--xl      { font-size: clamp(35px, 6vw, 64px); letter-spacing: -.052em; }
.bnl-heading--center  { text-align: center; }

.bnl-gradient-text {
  background: var(--gradient-lux);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--color-pink);
  -webkit-text-fill-color: transparent;
  overflow-wrap: break-word; /* BRI-449 guard: an over-constrained gradient
    heading breaks its word (visible, caught in review) instead of the
    glyphs silently never being drawn past the box edge (invisible,
    shipped) -- background-clip:text has no fallback paint for transparent
    fill-color once content overflows, unlike a solid color which keeps
    rendering past the box. */
}

.bnl-lede { color: var(--color-text-muted); margin: 0 0 var(--space-lg); }
.bnl-lede--center { text-align: center; max-width: 66ch; margin-left: auto; margin-right: auto; }
.bnl-link { color: var(--color-primary); }

/* KICKER — rev34's eyebrow. Hairline rules either side, wide tracking. */
.bnl-kicker {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading-proposed);
}
.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-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);
}
.bnl-kicker--center { justify-content: center; }
.bnl-kicker--center::before { display: none; }
.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));
}

/* Plain eyebrow label — rev34 keeps this alongside the kicker */
.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);
}

.bnl-subhead { text-align: center; max-width: 60ch; margin: 0 auto var(--space-lg); }
.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-subhead__d { font-size: 13.5px; color: var(--color-text-muted); margin: 0; }

/* MICROPROOF — small dotted proof strip under a hero */
.bnl-microproof {
  display: flex; flex-wrap: wrap; gap: 10px var(--space-md); align-items: center;
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  font-size: 11.5px; color: var(--color-text-muted);
}
.bnl-microproof b { color: var(--color-text); font-weight: 600; }
.bnl-microproof span { display: inline-flex; align-items: center; gap: 7px; }
.bnl-microproof span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-primary); box-shadow: var(--hglow-teal);
}

/* ---------------------------------------------------------------
   BUTTONS — rev34: gradient border over near-black fill + top gloss
--------------------------------------------------------------- */
.bnl-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  isolation: isolate;
  overflow: hidden;
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: box-shadow .25s ease;
}
.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-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-btn--primary:hover { box-shadow: 0 0 34px -4px color-mix(in srgb, var(--color-pink) 92%, transparent); }
.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-btn--secondary:hover { box-shadow: 0 0 34px -4px color-mix(in srgb, var(--color-primary) 92%, transparent); }

.bnl-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
@media (max-width: 767px) {
  .bnl-btn-row { justify-content: center; }
  .bnl-btn-row .bnl-btn { width: 100%; }
}

/* ---------------------------------------------------------------
   FRAMES + CARDS
   .bnl-card does not exist on rev34 — the homepage uses purpose-built
   cards (.bnl-dcard, .bnl-sysc, .bnl-tiers). It IS a real product-page
   component, so it stays, restyled to rev34's surface treatment.
--------------------------------------------------------------- */
.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);
}
.bnl-frame-card {
  border: 1px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
  padding: var(--space-lg);
}
.bnl-frame-card > :last-child { margin-bottom: 0; }

.bnl-grid { display: grid; gap: var(--space-ml); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bnl-card {
  position: relative;
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-ml);
  box-shadow: var(--glow-ambient-teal);
  transition: box-shadow .25s ease;
}
.bnl-card:hover { box-shadow: var(--hglow-teal); }
.bnl-card__title {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
}
.bnl-card__body { margin: 0; color: var(--color-text-muted); }

/* ---------------------------------------------------------------
   CHECK LIST — rev34 uses an icon chip, not a pseudo-element tick
--------------------------------------------------------------- */
.bnl-checks { list-style: none; padding: 0; margin: 0 0 var(--space-lg); display: grid; gap: 12px; }
.bnl-checks li {
  display: flex; gap: 12px; align-items: center;
  font-size: var(--text-small); color: var(--color-text);
}
.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) 34%, transparent);
}
.bnl-checks__ic svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .bnl-checks { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------
   NUMBERED STEPS — rev34: carded, big gradient numeral in flow
--------------------------------------------------------------- */
.bnl-steps { list-style: none; counter-reset: bnlstep; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.bnl-steps__item {
  counter-increment: bnlstep;
  position: relative;
  padding: var(--space-ml);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.bnl-steps__item::before {
  content: counter(bnlstep);
  display: block;
  font-family: var(--font-heading-proposed);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: var(--space-sm);
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: var(--color-pink); -webkit-text-fill-color: transparent;
}
.bnl-steps__title {
  display: block;
  font-family: var(--font-heading-proposed);
  font-weight: 700;
  font-size: var(--text-h3);
  letter-spacing: -.015em;
  color: var(--color-text);
  margin-bottom: 6px;
}
@media (min-width: 900px) {
  .bnl-steps--3 { grid-template-columns: repeat(3, 1fr); }
  .bnl-steps--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------
   STATS — rev34: carded items
--------------------------------------------------------------- */
.bnl-stats { display: grid; gap: var(--space-md); grid-template-columns: 1fr 1fr; }
.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-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-stats__label { display: block; margin-top: 10px; font-size: var(--text-small); color: var(--color-text-muted); }
.bnl-stats__note {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 6px; font-size: var(--text-small);
  color: var(--color-text-muted); text-decoration: underline;
}
.bnl-stats__note:hover { color: var(--color-primary); }
@media (min-width: 900px) { .bnl-stats { grid-template-columns: repeat(4, 1fr); } }

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

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

/* ---------------------------------------------------------------
   ECOSYSTEM LINK PILLS
   Coming-soon = rev34's a[aria-disabled="true"] pattern. No new component.
--------------------------------------------------------------- */
.bnl-eco-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); }
.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; gap: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.bnl-eco-links a:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-glow-teal); }
.bnl-eco-links a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.bnl-eco-links__tag {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: var(--radius-pill); padding: 2px 8px;
}

/* ---------------------------------------------------------------
   CTA BAND
--------------------------------------------------------------- */
.bnl-cta-band {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(70% 42% at 36% 30%, color-mix(in srgb, var(--color-pink) 10%, transparent), transparent 60%),
    radial-gradient(70% 42% at 66% 44%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
    linear-gradient(180deg, transparent 0%,
      color-mix(in srgb, var(--color-bg-elevated) 55%, transparent) 16%,
      color-mix(in srgb, var(--color-bg-elevated) 90%, transparent) 42%,
      color-mix(in srgb, var(--color-bg-elevated) 90%, transparent) 70%,
      color-mix(in srgb, var(--color-bg-elevated) 45%, transparent) 88%,
      transparent 100%);
}
.bnl-cta-band .bnl-section__inner { position: relative; }
.bnl-cta-band .bnl-btn-row { justify-content: center; }
.bnl-cta-band .bnl-lede { margin-left: auto; margin-right: auto; max-width: 66ch; }

/* ---------------------------------------------------------------
   MEDIA SLOTS — rev34 treatment
--------------------------------------------------------------- */
.bnl-slot {
  position: relative;
  display: grid; place-items: center; text-align: center;
  padding: 1rem;
  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% 0%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
    var(--color-bg-elevated);
}
.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; color: var(--color-text); }
.bnl-slot__note { font-size: 11px; color: var(--color-text-muted); font-style: italic; margin-top: 4px; }
.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; }

/* ---------------------------------------------------------------
   MOTION — gated ON, matching rev34's policy.
   Nothing animates unless the user has expressed no preference.
--------------------------------------------------------------- */
@keyframes bnl-grad-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: no-preference) {
  .bnl-gradient-text {
    background-size: 230% 100%;
    animation: bnl-grad-drift 9s ease-in-out infinite;
  }
  /* closer headings drift slower so two gradients on screen never sync */
  .bnl-cta-band .bnl-gradient-text { animation-duration: 11s; }
}