/* NOSE hero — dark "loudness" treatment with animated equalizer.
   External file: CSP is style-src 'self', so no inline styles anywhere.
   Everything is scoped under .hero so the rest of the page is untouched. */

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(130% 80% at 50% 108%, rgba(47,97,68,.22), transparent 55%),
    linear-gradient(180deg,#0F150F 0%,#101710 60%,#0d130d 100%);
  border-bottom:1px solid rgba(233,238,233,.14);
}

/* DESKTOP: the band is anchored to the BOTTOM of the hero, so the bars sit
   flush against the bottom edge of the dark banner. Height controls how tall
   the band is; the JS measures this element, so changing it here is enough. */
.hero-eq{
  position:absolute; left:0; right:0; bottom:0; top:auto; z-index:0;
  width:100%; height:64%;
  /* fade only at the TOP — the bottom must reach the banner edge cleanly */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 46%);
}

/* legibility scrim over the copy area */
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,21,15,.90) 0%,rgba(15,21,15,.55) 34%,rgba(15,21,15,.05) 62%,transparent 78%),
    linear-gradient(90deg,rgba(15,21,15,.55) 0%,transparent 46%);
}

/* lift real content above canvas + scrim */
.hero > .wrap,
.hero .hero-grid{ position:relative; z-index:2; }

/* type, recoloured for the dark field */
.hero .eyebrow{ color:#82C59A; letter-spacing:.2em; }
.hero h1{ color:#E9EEE9; letter-spacing:-.045em; line-height:.98; max-width:15ch; }
.hero .hero-copy{ color:#cdd7ce; }
.hero .hero-note{ color:#93A497; }

/* buttons on dark */
.hero .button-primary{ background:#82C59A; color:#0d130d; }
.hero .button-secondary{
  background:#1b2a20; color:#E9EEE9;
  border:1px solid rgba(233,238,233,.16);
}
.hero .button:focus-visible{ outline:2px solid #82C59A; outline-offset:3px; }

/* the demo card stays light and floats on the dark field */
.hero .demo-card{
  position:relative; z-index:3;
  background:#fff;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.75);
  border-color:rgba(233,238,233,.10);
}

/* MOBILE: the demo card stacks under the copy, so a percentage height can
   never land in the right place. Anchor the band to the TOP and let the JS
   set an exact pixel height that stops just above the card. */
@media (max-width:640px){
  .hero-eq{ top:0; bottom:auto; height:50%; }   /* JS overrides height in px */

  /* Pull the copy up under the nav so the reclaimed space goes to the bars. */
  .hero{ min-height:auto; padding-top:14px; padding-bottom:0; }

  /* Reserve a clean strip between the last line of copy and the demo card.
     The JS sizes the band to end just above the card and caps the bars at
     150px, so ~166px of clearance keeps them off the note text entirely. */
  .hero .hero-note{ margin-bottom:132px; }
  .hero-scrim{
    background:linear-gradient(180deg,rgba(15,21,15,.92) 0%,rgba(15,21,15,.5) 34%,transparent 62%);
  }
  .hero h1{ max-width:none; }

  /* Centre the hero copy on phones (desktop keeps its left-aligned column). */
  .hero .eyebrow,
  .hero h1,
  .hero .hero-copy,
  .hero .hero-note{ text-align:center; margin-left:auto; margin-right:auto; }
  .hero .button-row{ justify-content:center; }
}