/* ═══════════════════════════════════════════════════════════════════════════
   LATE-NIGHT BROADCAST — restyle layer for contentpad.io
   Appended after the original stylesheet on purpose: every section, link,
   number and word on this page is the original markup, untouched. This layer
   changes only how it looks. Nothing here removes content, so nothing here can
   lose any.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Green-biased neutrals rather than dead grey — a control room is never
     colour-neutral, it is lit by its own screens. */
  --bc-ink:#05060A;
  --bc-ink2:#0A0D13;
  --bc-ink3:#0F131A;
  --bc-tx:#E9EFEB;
  --bc-dim:#7E8D87;
  --bc-mute:#4B5853;
  --bc-line:rgba(120,255,190,.15);
  --bc-line2:rgba(120,255,190,.28);
  --bc-sig:#3DF08A;      /* signal green — the accent */
  --bc-tally:#FF2D2D;    /* reserved: live / on-air only */
  --bc-amber:#FFB23D;    /* meters and figures */
  --bc-disp:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --bc-body:'Syne','Inter',system-ui,sans-serif;
  --bc-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
}

html,body{background:var(--bc-ink)!important;color:var(--bc-tx)!important;font-family:var(--bc-body)!important}
/* The strip is fixed at the top, so the document starts below it and the
   sticky nav comes to rest against its underside rather than through it. */
body{-webkit-font-smoothing:antialiased;padding-top:26px!important}

/* Scanlines and grain over everything, pinned to the viewport so they don't
   scroll with the content — a screen texture, not a page texture. */
body::before{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode:multiply;opacity:.55}
body::after{
  content:'';position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Type ────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4,.proof-n,.tp,.osc-n{font-family:var(--bc-disp)!important;font-weight:400!important;letter-spacing:.01em}
h1{font-size:clamp(56px,9vw,132px)!important;line-height:.9!important;text-transform:uppercase;text-wrap:balance}
h2{font-size:clamp(34px,5vw,68px)!important;line-height:.94!important;text-transform:uppercase;text-wrap:balance}
h3{font-size:clamp(24px,2.6vw,38px)!important;line-height:1!important;text-transform:uppercase}
h4{font-size:19px!important;line-height:1.1!important;text-transform:uppercase;letter-spacing:.03em}
p,li,.sub,.tp-lead,.osc-a,.td{font-family:var(--bc-body)!important}
.sub{font-size:16px!important;line-height:1.6!important;color:var(--bc-dim)!important;max-width:62ch}

/* Every label, eyebrow and caption is machine type. */
.eyebrow,.kicker,.tp-eyebrow,.strip-lbl,.proof-l,.mag-tag,.tn,.tp-cap,.osc-t,.chip,.ns-kick,.shot-bar .u{
  font-family:var(--bc-mono)!important;text-transform:uppercase!important;letter-spacing:.16em!important;
  font-size:10px!important;color:var(--bc-sig)!important}

/* ── Nav: a channel bar ──────────────────────────────────────────────────── */
.nav{background:rgba(5,6,10,.82)!important;backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--bc-line)!important;top:26px!important}
.nav-links a,.nav-drop button{font-family:var(--bc-mono)!important;font-size:11px!important;
  text-transform:uppercase;letter-spacing:.13em;color:var(--bc-dim)!important}
.nav-links a:hover,.nav-drop button:hover{color:var(--bc-sig)!important}
.nav-login{color:var(--bc-tx)!important}
.nav-cta,.btn-primary{
  background:var(--bc-sig)!important;color:#02150B!important;border-radius:0!important;
  font-family:var(--bc-mono)!important;font-weight:700!important;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px!important;border:0!important;
  box-shadow:0 0 0 1px var(--bc-sig),0 0 28px rgba(61,240,138,.28)}
.nav-cta:hover,.btn-primary:hover{background:#6BFFAE!important;box-shadow:0 0 0 1px #6BFFAE,0 0 40px rgba(61,240,138,.45)}
.btn,.btn-ghost{border-radius:0!important;font-family:var(--bc-mono)!important;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px!important;font-weight:700!important}
.btn-ghost{background:transparent!important;border:1px solid var(--bc-line2)!important;color:var(--bc-tx)!important}
.btn-ghost:hover{border-color:var(--bc-sig)!important;color:var(--bc-sig)!important}

/* ── The broadcast strip (injected) ──────────────────────────────────────── */
#bc-strip{position:fixed;top:0;left:0;right:0;height:26px;z-index:60;display:flex;align-items:center;
  gap:18px;padding:0 16px;background:#010204;border-bottom:1px solid var(--bc-line);
  font-family:var(--bc-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-mute)}
#bc-strip .lamp{display:inline-flex;align-items:center;gap:7px;color:var(--bc-tally)}
#bc-strip .lamp i{width:7px;height:7px;border-radius:50%;background:var(--bc-tally);
  box-shadow:0 0 10px var(--bc-tally);animation:bc-pulse 2.4s ease-in-out infinite}
#bc-strip .tc{color:var(--bc-sig)}
#bc-strip .bars{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
#bc-strip .bars i{width:2px;background:var(--bc-sig);opacity:.5;animation:bc-bar 1.1s ease-in-out infinite}
#bc-strip .sp{flex:1}
#bc-strip .rt{color:var(--bc-mute)}
@keyframes bc-pulse{0%,100%{opacity:1}50%{opacity:.32}}
@keyframes bc-bar{0%,100%{height:3px}50%{height:10px}}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-top:96px!important;
  background:radial-gradient(120% 90% at 50% -10%,rgba(61,240,138,.10),transparent 62%),var(--bc-ink)!important}
.hero::before{
  /* width:auto matters: the original sheet already uses this pseudo-element as a
     900px glow, and an explicit width beats left+right every time. */
  content:'';position:absolute;left:0;right:0;top:0;width:auto!important;z-index:0;opacity:.34;
  /* A band, not a fill: the hero runs past 1500px and `cover` on a 16:9 plate
     would zoom it to a meaningless slice. */
  height:min(86vh,940px);
  background:url('/bc-control.webp') center 30% / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%)}
.hero::after{content:'';position:absolute;inset:0;width:auto!important;height:auto!important;z-index:1;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 22%,transparent 40%,rgba(5,6,10,.85) 100%)}
.hero .wrap{position:relative;z-index:2}
/* The loop sits under the still, not over it: the still stays the poster, and
   the video simply becomes visible in the same place once it can play. */
#bc-loop{position:absolute;left:0;top:0;width:100%;height:min(86vh,940px);object-fit:cover;
  z-index:0;opacity:.34;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%)}
.hero .eyebrow{border:1px solid var(--bc-line2)!important;background:transparent!important;border-radius:0!important;
  padding:6px 12px!important;display:inline-block}
.hero h1 span,.hero h1 b{color:var(--bc-sig)!important}
/* The accent word carries a clipped blue-to-purple gradient from the original
   sheet, which outranks a plain colour. The gradient itself has to go. */
.hero h1 span.g{background-image:none!important;-webkit-text-fill-color:var(--bc-sig)!important;
  color:var(--bc-sig)!important}
.hero-note{font-family:var(--bc-mono)!important;font-size:10px!important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bc-mute)!important}
.hero-note a{color:var(--bc-sig)!important}

/* Product screenshots read as monitor feeds. */
.shot{border-radius:0!important;border:1px solid var(--bc-line)!important;background:#04060C!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 40px 120px -30px rgba(0,0,0,.95),0 0 90px -40px rgba(61,240,138,.5)!important;
  position:relative;overflow:hidden}
.shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px)}
.shot-bar{background:#02040A!important;border-bottom:1px solid var(--bc-line)!important}
.shot-bar i{border-radius:0!important;width:7px!important;height:7px!important}
.shot-bar .u{color:var(--bc-mute)!important}

/* ── Proof row: level meters ─────────────────────────────────────────────── */
.proof{background:#02040A!important;border-top:1px solid var(--bc-line)!important;
  border-bottom:1px solid var(--bc-line)!important}
.proof-c{border-left:1px solid var(--bc-line)!important;position:relative;padding-left:18px!important}
.proof-c::before{content:'';position:absolute;left:-1px;top:0;width:1px;height:22px;background:var(--bc-sig);
  box-shadow:0 0 10px var(--bc-sig)}
.proof-n{font-size:clamp(38px,4.4vw,62px)!important;line-height:1!important;color:var(--bc-amber)!important}
.proof-n.b,.proof-n.p,.proof-n.g,.proof-n.gr{color:var(--bc-amber)!important}
.proof-l{color:var(--bc-mute)!important;letter-spacing:.14em!important}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{position:relative;border-top:1px solid var(--bc-line)}
.sec-head{position:relative}
.sec-head .kicker,.sec-head .eyebrow{display:inline-flex;align-items:center;gap:10px}
/* Channel ident down the left edge of every section. */
.sec::before{content:attr(data-ch);position:absolute;left:14px;top:26px;font-family:var(--bc-mono);font-size:10px;
  letter-spacing:.2em;color:var(--bc-mute);writing-mode:vertical-rl;opacity:.75;display:none}
@media(min-width:1400px){.sec::before{display:block}}

/* Plates: photographs as texture behind the content, never as decoration. */
#tour{background:linear-gradient(180deg,rgba(5,6,10,.965),rgba(5,6,10,.995)),url('/bc-monitors.webp') center/cover no-repeat}
#os{background:linear-gradient(180deg,rgba(5,6,10,.95),rgba(5,6,10,.99)),url('/bc-patch.webp') center/cover no-repeat}
#earn{background:linear-gradient(180deg,rgba(5,6,10,.95),rgba(5,6,10,.985)),url('/bc-desk.webp') center/cover no-repeat}
.final{background:linear-gradient(180deg,rgba(5,6,10,.90),rgba(5,6,10,.97)),url('/bc-skyline.webp') center 62%/cover no-repeat}

/* ── Tour tabs: a source-select rail ─────────────────────────────────────── */
.tp-rail{border:1px solid var(--bc-line);background:#02040A;padding:6px!important;gap:0!important;
  display:flex;flex-wrap:wrap}
.tp-tab{border-radius:0!important;background:transparent!important;border:0!important;
  font-family:var(--bc-mono)!important;font-size:10px!important;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--bc-mute)!important;padding:11px 15px!important;position:relative}
.tp-tab:hover{color:var(--bc-tx)!important;background:rgba(61,240,138,.05)!important}
.tp-tab[aria-selected="true"]{color:#02150B!important;background:var(--bc-sig)!important;font-weight:700!important}
.tp-panel{border:1px solid var(--bc-line);background:rgba(4,6,12,.72);padding:26px!important}
.flist li{font-size:14px!important;line-height:1.55!important;color:var(--bc-dim)!important}
.flist li b,.flist li strong{color:var(--bc-tx)!important;font-weight:600!important}
.chip{border-radius:0!important;border:1px solid var(--bc-line2)!important;background:transparent!important;
  color:var(--bc-dim)!important;padding:6px 10px!important}
.tp-cap{color:var(--bc-mute)!important}

/* ── The app census: a rack of channels ──────────────────────────────────── */
.osc-c{border:1px solid var(--bc-line)!important;background:rgba(4,6,12,.6)!important;border-radius:0!important;
  position:relative;transition:border-color .18s,background .18s}
.osc-c::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--bc-sig);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.osc-c:hover{border-color:var(--bc-line2)!important;background:rgba(61,240,138,.04)!important}
.osc-c:hover::before{transform:scaleX(1)}
.osc-n{font-size:44px!important;line-height:1!important;color:var(--bc-amber)!important}
.osc-t{color:var(--bc-tx)!important;font-size:11px!important}
.osc-a{color:var(--bc-mute)!important;font-size:12.5px!important;line-height:1.5!important}
.osc-f{color:var(--bc-dim)!important}
.osc-f b,.osc-f strong{color:var(--bc-sig)!important}

/* ── Industries: eight plates ────────────────────────────────────────────── */
#industries{background:linear-gradient(180deg,rgba(5,6,10,.96),rgba(5,6,10,.99)),url('/bc-backstage.webp') center/cover no-repeat}
.card{border:1px solid var(--bc-line)!important;background:rgba(4,6,12,.74)!important;border-radius:0!important;
  position:relative;overflow:hidden;transition:border-color .18s,transform .18s}
.card::before{content:'';position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,var(--bc-sig),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.card:hover{border-color:var(--bc-line2)!important;transform:translateY(-2px)}
.card:hover::before{transform:scaleX(1)}
.card h4{color:var(--bc-tx)!important}
.card p{color:var(--bc-mute)!important;font-size:13px!important;line-height:1.55!important}
.card-out{font-family:var(--bc-mono)!important;font-size:10px!important;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--bc-tally)!important}
/* The emoji get replaced with drawn marks by the script; this styles the frame. */
.ci{width:34px!important;height:34px!important;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bc-line2);color:var(--bc-sig);font-size:0!important;background:rgba(61,240,138,.05)}
.ci svg{width:17px;height:17px;stroke:var(--bc-sig);fill:none;stroke-width:1.5}

/* ── Earn ────────────────────────────────────────────────────────────────── */
.earn-row .tp-txt h3{color:var(--bc-tx)!important}

/* ── Pricing: a rate card ────────────────────────────────────────────────── */
.tiers{gap:0!important;border:1px solid var(--bc-line)}
.tier{border-radius:0!important;background:transparent!important;border:0!important;
  border-right:1px solid var(--bc-line)!important;transition:background .18s}
.tier:last-child{border-right:0!important}
.tier:hover{background:rgba(61,240,138,.05)!important}
.tier.ent{background:rgba(255,178,61,.05)!important}
.tn{color:var(--bc-mute)!important}
.tp{font-size:42px!important;color:var(--bc-tx)!important;line-height:1!important}
.tier.ent .tp{color:var(--bc-amber)!important}
.td{font-family:var(--bc-mono)!important;font-size:10px!important;letter-spacing:.1em;color:var(--bc-mute)!important}

/* ── Magazine: the wire desk ─────────────────────────────────────────────── */
#magazine{border-top:1px solid var(--bc-line)}
.mag-row{gap:1px!important;background:var(--bc-line)}
.mag-card{border-radius:0!important;border:0!important;background:var(--bc-ink)!important;
  position:relative;overflow:hidden;display:flex;flex-direction:column;transition:background .18s}
.mag-card:hover{background:var(--bc-ink2)!important}
.mag-card .bc-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.32) contrast(1.06) brightness(.94);
  transition:filter .25s,transform .5s}
.mag-card:hover .bc-thumb{filter:grayscale(0) contrast(1.05) brightness(.95);transform:scale(1.03)}
.mag-card .bc-body{padding:16px 18px 20px}
.mag-tag{color:var(--bc-tally)!important}
.mag-card h3{font-size:22px!important;color:var(--bc-tx)!important;margin:8px 0 6px!important}
.mag-card p{color:var(--bc-mute)!important;font-size:13px!important;line-height:1.55!important}
.mag-card .bc-meta{font-family:var(--bc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bc-mute);margin-top:12px;display:flex;gap:10px;align-items:center}
.mag-more{font-family:var(--bc-mono)!important;font-size:11px!important;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--bc-sig)!important;border-bottom:1px solid var(--bc-line2)!important}

/* ── Logo strips ─────────────────────────────────────────────────────────── */
.strip{background:#02040A!important;border-top:1px solid var(--bc-line)!important}
.strip-lbl{color:var(--bc-mute)!important}
.strip-row span{font-family:var(--bc-mono)!important;font-size:11px!important;letter-spacing:.08em;
  color:var(--bc-mute)!important;transition:color .18s}
.strip-row span:hover{color:var(--bc-sig)!important}

/* ── Final + footer ──────────────────────────────────────────────────────── */
.final{border-top:1px solid var(--bc-line)}
.final h2{color:var(--bc-tx)!important}
.foot{background:#010204!important;border-top:1px solid var(--bc-line)!important}
.foot a,.foot div{font-family:var(--bc-mono)!important;font-size:10px!important;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bc-mute)!important}
.foot a:hover{color:var(--bc-sig)!important}

/* ── The opener ──────────────────────────────────────────────────────────── */
.bc-rise{opacity:0;transform:translateY(14px);animation:bc-rise .62s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bc-rise{to{opacity:1;transform:none}}
.bc-d1{animation-delay:.10s}.bc-d2{animation-delay:.20s}.bc-d3{animation-delay:.30s}
.bc-d4{animation-delay:.42s}.bc-d5{animation-delay:.54s}.bc-d6{animation-delay:.66s}

@media (prefers-reduced-motion: reduce){
  .bc-rise{animation:none!important;opacity:1!important;transform:none!important}
  #bc-strip .lamp i,#bc-strip .bars i{animation:none!important}
  .mag-card:hover .bc-thumb{transform:none}
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media(max-width:760px){
  #bc-strip{gap:10px;font-size:9px;padding:0 10px}
  #bc-strip .rt{display:none}
  .hero{padding-top:70px!important}
  .hero::before{opacity:.22}
  #tour,#os,#earn,#industries,.final{background-attachment:scroll!important}
  .tiers{display:grid!important;grid-template-columns:1fr 1fr}
  .tier{border-bottom:1px solid var(--bc-line)!important}
  .proof-c{padding-left:12px!important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   REVISION 01 — appended so it wins the cascade without disturbing anything
   above it. Every rule here answers something seen on the real page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The greys were too dark to read comfortably. Both move up; they stay
   green-biased rather than becoming neutral, which is what kept the palette
   from looking like a default in the first place. */
:root{
  --bc-dim:#AEBCB6;
  --bc-mute:#8A9994;
}

/* The header was 82% opaque with a blur behind it, so the page was faintly
   visible through it as you scrolled. Solid now: content scrolls into the
   header and disappears, which is what a fixed header is supposed to do. */
.nav{background:var(--bc-ink)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ── Type, one step up across the board ──────────────────────────────────── */
h2{font-size:clamp(36px,5.4vw,74px)!important}
h3{font-size:clamp(26px,2.9vw,43px)!important}
h4{font-size:21px!important}
.sub{font-size:18px!important;line-height:1.62!important}
.tp-lead{font-size:17px!important;line-height:1.6!important}
.flist li{font-size:15.5px!important;line-height:1.62!important}
.card p{font-size:14.5px!important;line-height:1.6!important}
.osc-a{font-size:14px!important;line-height:1.55!important}
.osc-n{font-size:48px!important}
.osc-f{font-size:16px!important;line-height:1.6!important}
.mag-card h3{font-size:24px!important}
.mag-card p{font-size:14.5px!important;line-height:1.6!important}
.tp{font-size:46px!important}
.proof-n{font-size:clamp(42px,4.8vw,68px)!important}
.final p{font-size:18px!important;line-height:1.6!important}
/* Machine type comes up too — 10px was legible but mean. */
.eyebrow,.kicker,.tp-eyebrow,.strip-lbl,.proof-l,.mag-tag,.tn,.tp-cap,.osc-t,.chip,.ns-kick{
  font-size:11px!important}
.tp-tab{font-size:11px!important}
.td{font-size:11.5px!important}
.strip-row span{font-size:12.5px!important}
.foot a,.foot div{font-size:11px!important}
.nav-links a,.nav-drop button{font-size:12px!important}
.mag-card .bc-meta{font-size:11px}

/* The headline was loud enough to crowd everything under it. */
h1{font-size:clamp(40px,6.1vw,94px)!important}

/* ── Technology For The Culture ──────────────────────────────────────────── */
/* Sits under the headline as a station slogan, hairline-ruled on both sides so
   it reads as an ident rather than a stray line of copy. */
.bc-tagline{
  display:flex;align-items:center;gap:16px;justify-content:center;
  margin:18px auto 0;max-width:640px;
  font-family:var(--bc-mono);font-size:12px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--bc-sig)}
.bc-tagline::before,.bc-tagline::after{content:'';flex:1 1 auto;height:1px;background:var(--bc-line2)}
@media(max-width:760px){
  .bc-tagline{font-size:10px;letter-spacing:.22em;gap:10px}
}

/* ── Closing the mobile menu ─────────────────────────────────────────────── */
.ns-close{
  position:absolute;top:14px;right:14px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--bc-line2);border-radius:0;
  color:var(--bc-tx);cursor:pointer;padding:0;z-index:5}
.ns-close:hover{border-color:var(--bc-sig);color:var(--bc-sig)}
.ns-close svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none}
.nav-sheet .ns-in{position:relative}

/* ── Mobile header: flush to the top ─────────────────────────────────────── */
/* The on-air strip is a desktop affordance. On a phone it only created a band
   above the header for the page to peek through, so it goes and the header
   sits hard against the top edge. */
@media(max-width:900px){
  #bc-strip{display:none!important}
  body{padding-top:0!important}
  .nav{
    top:0!important;position:sticky!important;
    background:var(--bc-ink)!important;backdrop-filter:none!important;
    padding-top:env(safe-area-inset-top,0px)}

  /* A pinned header must never be able to show a hole above itself. The
     letterbox above is flattened by the rules above, but a cached copy of
     this file, or a notch inset, would open the gap again and the headline
     would slide through it behind the logo. So the bar paints its own ink
     upward: whatever sits above the pin is ink, not page. */
  .nav::before{
    content:'';position:absolute;left:0;right:0;bottom:100%;
    height:140px;background:var(--bc-ink);pointer-events:none}
}

/* ── Catching the Product menu ───────────────────────────────────────────── */
/* The panel opens 12px below its trigger. Measured, not guessed: the trigger
   ends at 79px and the panel starts at 91px. Moving the pointer toward the menu
   crossed that dead space, the hover was lost, and it closed before you could
   reach it. The panel is a child of the trigger, so hovering the panel itself
   was never the problem — only the gap was.

   A transparent bridge across the gap keeps the pointer inside the hover target
   the whole way down. It only exists while hovering, so it never sits over the
   page swallowing clicks. */
.nav-drop{position:relative}
.nav-drop::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:20px;display:none}
.nav-drop:hover::after,.nav-drop:focus-within::after{display:block}


/* ── Revision 02 ─────────────────────────────────────────────────────────── */

/* The green button's label had gone the same muted grey as the nav links: my
   own .nav-links a rule (0,1,1) outranks .nav-cta (0,1,0), so the near-black
   label lost. Name the button explicitly in both places it can be reached. */
.nav-links a.nav-cta,.nav a.nav-cta{color:#02150B!important;font-weight:800!important}
.nav-links a.nav-cta:hover,.nav a.nav-cta:hover{color:#02150B!important}
.nav-links a.nav-login,.nav a.nav-login{color:var(--bc-tx)!important}
.nav-burger{color:var(--bc-tx)!important}

/* The Product panel is closed by the page's own mouseleave handler on
   .nav-drop, and there are thirteen pixels of dead air between the button and
   the panel. Pave them. A pseudo-element hit-tests as part of the element that
   owns it, so crossing the bridge is not leaving .nav-drop and the handler
   never fires. Wide enough that a diagonal run at the far side of the panel
   stays inside it, and held open while the panel itself is open. */
.nav-drop::after{content:'';position:absolute;left:-140px;right:-140px;top:100%;
  height:24px;display:none;background:transparent}
.nav-drop:hover::after,.nav-drop:focus-within::after,.nav-drop[data-open="1"]::after{display:block}