/* ═══════════════════════════════════════════════════════════════════════════
   PV4 · camada de layout "banana" sobre os tokens da THE

   O esqueleto vem da referência bananaads.com.br: hero centralizado, features
   em zigue-zague, marquee infinito, filosofia em 2 colunas, comparativo com
   card vencedor, ilha dark de oferta, cards de autoria com tilt 3D, footer
   minimalista. A pele é a da THE: dourado, Funnel Display, Plus Jakarta.

   Carrega DEPOIS de v4-soft-premium.min.css e pv4-base-pv2.css.
   Tudo aqui usa o prefixo .bn- para não colidir com os componentes herdados
   da PV2 (vsx, story-card, auth-mq, rgc, pipe, mkt, guard, offer-*, faq).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fundo: campo de sinal (atmosfera dourada + linhas de ledger leves).
      Sem pontinhos SaaS e sem grão — conversa com dado/relatório da THE. ── */
html{ background:var(--bg); overflow-x:clip }
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 95% 60% at 50% -12%, rgba(255,195,15,.13), transparent 62%),
    radial-gradient(ellipse 48% 42% at 100% 28%, rgba(252,113,72,.055), transparent 58%),
    radial-gradient(ellipse 42% 38% at 0% 78%, rgba(204,153,0,.07), transparent 55%),
    linear-gradient(rgba(19,32,46,.045) 1px, transparent 1px);
  background-size:auto, auto, auto, 52px 52px;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-attachment:scroll
}

:root{
  --bn-maxw:1200px;
  --bn-r:24px;                        /* visual de feature, card de marquee, comparativo */
  --bn-r-sm:16px;                     /* point-card, faq, nós do mock */
  --bn-r-island:32px;                 /* ilha dark de oferta */
  --bn-gap-feat:8rem;                 /* respiro entre blocos do zigue-zague */
  --bn-sect:6rem;                     /* bloco de trabalho */
  --bn-sect-air:8rem;                 /* bloco de respiro */
  --bn-shadow:0 20px 40px rgba(19,32,46,.09);
  --bn-shadow-lift:0 26px 56px rgba(19,32,46,.14);
  --bn-shadow-gold:0 20px 60px rgba(204,153,0,.18);
  --bn-ease:cubic-bezier(.16,1,.3,1);
}

.bn-wrap{ max-width:var(--bn-maxw); margin:0 auto; padding:0 var(--gutter); width:100% }
.bn-sect{ padding:var(--bn-sect) 0; position:relative }
.bn-sect--air{ padding:var(--bn-sect-air) 0 }

/* Ritmo de fundo. Seções claras transparentes deixam o campo de sinal
   do body aparecer; contraste vem de blocos pontuais de papel branco puro. */
section.white.bn-sect,
section.neutral.bn-sect,
section.neutral.bn-island-sect,
#caminhos.bn-sect{ background:transparent }        /* #caminhos tem fundo por id na PV2 */

/* Papel branco: precisa vir depois e empatar em especificidade com as regras
   acima, senão a transparência ganha. */
section.white.bn-paper,
section.neutral.bn-paper,
#mercado-profissao.bn-paper{
  background:var(--white);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)
}

/* Eyebrow discreto, sem pill — o banana usa nos blocos internos */
.bn-eyebrow{
  display:block; font-family:var(--fm); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:14px
}
section.dark .bn-eyebrow{ color:var(--mut-d) }

/* Pill sólido, versão dourada do pill amarelo do banana */
.bn-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 18px; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  color:#0a0c14; font-family:var(--fb); font-weight:700;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(204,153,0,.28)
}
.bn-pill-dot{
  width:7px; height:7px; border-radius:50%; background:#0a0c14; opacity:.55
}

/* Marca-texto: barra dourada atrás da palavra, igual ao .highlight do banana */
.bn-hl{ position:relative; display:inline-block; z-index:0 }
.bn-hl::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.06em;
  height:.38em; background:rgba(255,195,15,.42); border-radius:3px; z-index:-1
}
section.dark .bn-hl::after{ background:rgba(255,195,15,.28) }

/* Peso leve dentro do título, contraste interno do H1 do banana */
.bn-light{ font-weight:300; color:var(--mut) }

/* ═══════════════ 1 · HERO ═══════════════ */
.bn-hero{
  position:relative; padding:clamp(96px,11vw,140px) 0 clamp(40px,5vw,64px);
  overflow:hidden
}
.bn-hero .bn-wrap{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:clamp(28px,4vw,40px)
}
.bn-hero-vsl{
  width:min(920px,100%);
  margin:0 auto;
}
.bn-post-vsl{
  padding:clamp(48px,7vw,88px) 0;
}
.bn-post-vsl .bn-wrap{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:clamp(36px,5vw,56px);
}
.bn-hero-copy{ max-width:840px; display:flex; flex-direction:column; align-items:center; gap:26px }
/* O piso do clamp precisa acompanhar a viewport: em 390px um mínimo de 2.5rem
   estoura a caixa em palavras longas ("Implemente", "permitindo"). */
.bn-hero h1{
  font-size:clamp(1.95rem,7.4vw,4.3rem); line-height:1.06; letter-spacing:-.035em;
  margin:0; overflow-wrap:break-word
}
.bn-hero-sub{
  font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.6; color:var(--ink-soft);
  max-width:60ch; margin:0
}
/* Typewriter: largura reservada para a frase mais longa não empurrar o layout */
.bn-tw{ font-weight:600 }
.bn-tw-cursor{
  display:inline-block; width:.55ch; color:var(--gold);
  animation:bnBlink 1.05s step-end infinite
}
@keyframes bnBlink{ 0%,100%{opacity:1} 50%{opacity:0} }

.bn-hero-actions{ display:flex; flex-direction:column; align-items:center; gap:14px }
.bn-hero-micro{ font-size:.86rem; color:var(--mut); margin:0 }

/* Barra de prova: 3 números lado a lado */
.bn-proof{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(22px,4vw,54px); padding-top:8px
}
.bn-proof-cell{ display:flex; flex-direction:column; gap:4px; min-width:96px }
.bn-proof-n{
  font-family:var(--fd); font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--ink); letter-spacing:-.03em; line-height:1
}
.bn-proof-n .u{ font-size:.62em; color:var(--gold) }
.bn-proof-l{
  font-family:var(--fm); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut)
}

/* Mock do hero: janela em perspectiva, igual ao dashboard-mock do banana */
.bn-mock-persp{ width:100%; max-width:940px; perspective:1000px }
.bn-mock{
  position:relative; border-radius:var(--bn-r); overflow:hidden;
  background:linear-gradient(155deg,#FFFFFF,#F4EFE4);
  border:1px solid var(--line); box-shadow:var(--bn-shadow);
  transform:rotateX(5deg); transform-origin:center top;
  transition:transform .6s var(--bn-ease), box-shadow .6s var(--bn-ease)
}
.bn-mock-persp:hover .bn-mock{ transform:rotateX(0) scale(1.02); box-shadow:var(--bn-shadow-lift) }
.bn-mock-bar{
  display:flex; align-items:center; gap:7px; padding:13px 18px;
  border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.7)
}
.bn-mock-dot{ width:11px; height:11px; border-radius:50% }
.bn-mock-dot:nth-child(1){ background:#FC7148 }
.bn-mock-dot:nth-child(2){ background:#FFC30F }
.bn-mock-dot:nth-child(3){ background:#58D417 }
.bn-mock-title{
  margin-left:10px; font-family:var(--fm); font-size:.7rem;
  letter-spacing:.06em; color:var(--mut)
}
.bn-mock-body{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(14px,3vw,34px); padding:clamp(26px,4vw,44px) clamp(20px,3.5vw,40px)
}
.bn-node{
  display:flex; flex-direction:column; gap:8px; padding:20px 22px;
  border-radius:var(--bn-r-sm); background:#FFFFFF;
  border:1px solid var(--line); box-shadow:0 6px 18px rgba(19,32,46,.06);
  animation:bnFloat 4s ease-in-out infinite
}
.bn-node--out{ animation-delay:2s; border-color:rgba(204,153,0,.34) }
.bn-node-lab{
  font-family:var(--fm); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut)
}
.bn-node-val{
  font-family:var(--fd); font-weight:600; font-size:clamp(1rem,2vw,1.3rem);
  color:var(--ink); letter-spacing:-.02em; line-height:1.15
}
.bn-node--out .bn-node-val{ color:var(--gold-d) }
.bn-node-sub{ font-size:.82rem; color:var(--mut); line-height:1.45 }
.bn-mock-link{ width:clamp(40px,7vw,90px); color:var(--gold); flex:none }
.bn-mock-link svg{ width:100%; height:auto; display:block }
.bn-mock-link path{
  stroke:currentColor; stroke-width:2; fill:none; stroke-dasharray:7 6;
  stroke-linecap:round
}
@keyframes bnFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ═══════════════ 3 e 7 · FEATURES EM ZIGUE-ZAGUE ═══════════════ */
.bn-feats{ display:flex; flex-direction:column; gap:var(--bn-gap-feat) }
.bn-feat{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(38px,5vw,80px); align-items:center
}
.bn-feat--rev .bn-feat-copy{ order:2 }
.bn-feat--rev .bn-feat-visual{ order:1 }
.bn-feat-copy{ display:flex; flex-direction:column; gap:20px; min-width:0 }
.bn-feat-tag{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; border-radius:var(--r-pill);
  background:rgba(204,153,0,.12); color:var(--gold-d);
  font-family:var(--fb); font-weight:700; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase
}
section.dark .bn-feat-tag{ background:rgba(255,195,15,.14); color:var(--gold-bright) }
.bn-feat-copy h3{
  font-family:var(--fd); font-weight:600; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(1.7rem,3.1vw,2.5rem); color:var(--ink); margin:0
}
section.dark .bn-feat-copy h3{ color:var(--sand) }
.bn-feat-desc{ font-size:1.06rem; line-height:1.62; color:var(--ink-soft); margin:0 }
section.dark .bn-feat-desc{ color:var(--sand-soft) }

/* Lista numerada com contador CSS, igual ao .feature-steps do banana */
.bn-steps{ list-style:none; counter-reset:bnstep; display:flex; flex-direction:column; gap:14px }
.bn-steps li{
  counter-increment:bnstep; display:flex; gap:14px; align-items:flex-start;
  font-size:.99rem; line-height:1.55; color:var(--ink-soft)
}
.bn-steps li::before{
  content:counter(bnstep,decimal-leading-zero);
  flex:none; width:1.85rem; height:1.85rem; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(204,153,0,.16); color:var(--gold-d);
  font-family:var(--fm); font-size:.76rem; font-weight:700
}
section.dark .bn-steps li{ color:var(--sand-soft) }
section.dark .bn-steps li::before{ background:rgba(255,195,15,.16); color:var(--gold-bright) }

/* Micro-depoimento com borda dourada só à esquerda */
.bn-quote{
  background:#FFFFFF; border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0; padding:18px 22px;
  box-shadow:0 6px 18px rgba(19,32,46,.06)
}
.bn-quote p{ font-size:.98rem; line-height:1.55; color:var(--ink-soft); margin:0 }
.bn-quote-who{
  display:block; margin-top:9px; font-family:var(--fm); font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--mut)
}
section.dark .bn-quote{ background:var(--panel-d); box-shadow:none }
section.dark .bn-quote p{ color:var(--sand-soft) }

/* Visual: altura fixa, vidro colorido, conteúdo em cover */
.bn-feat-visual{
  position:relative; min-height:420px; border-radius:var(--bn-r);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  padding:22px; box-shadow:var(--bn-shadow); border:1px solid var(--line)
}
.bn-feat-visual.g-gold  { background:linear-gradient(135deg,rgba(255,195,15,.26),rgba(255,255,255,.85)) }
.bn-feat-visual.g-copper{ background:linear-gradient(135deg,rgba(252,113,72,.22),rgba(255,255,255,.85)) }
.bn-feat-visual.g-blue  { background:linear-gradient(135deg,rgba(23,150,212,.2),rgba(255,255,255,.85)) }
.bn-feat-visual.g-green { background:linear-gradient(135deg,rgba(88,212,23,.18),rgba(255,255,255,.85)) }
.bn-feat-visual.g-sand  { background:linear-gradient(135deg,rgba(235,216,199,.62),rgba(255,255,255,.9)) }
.bn-feat-visual.g-night { background:linear-gradient(135deg,var(--panel-d),var(--night)); border-color:var(--line-d) }
.bn-feat-visual--flush{ padding:0 }

.bn-shot{
  width:100%; max-height:100%; border-radius:14px; overflow:hidden;
  box-shadow:0 14px 34px rgba(19,32,46,.16);
  transform:perspective(1000px) rotateY(-2deg) rotateX(2deg);
  transition:transform .6s var(--bn-ease)
}
.bn-feat:hover .bn-shot{ transform:perspective(1000px) rotateY(0) rotateX(0) scale(1.02) }
.bn-shot img,.bn-shot video{ width:100%; height:auto; display:block }
.bn-shot--tall img{ max-height:376px; width:auto; margin:0 auto; object-fit:contain }

/* Moldura de vídeo dentro do visual (loops da seção de entrega) */
.bn-vframe{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:14px;
  overflow:hidden; background:#0a0c14; box-shadow:0 14px 34px rgba(19,32,46,.18)
}
.bn-vframe video,.bn-vframe iframe,.bn-vframe img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0
}
.bn-vframe--contain{ background:transparent; box-shadow:none }
.bn-vframe--contain img{ object-fit:contain }

/* Etiqueta de bônus */
.bn-bonus{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#0a0c14;
  font-family:var(--fb); font-weight:700; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase
}
.bn-feat-list{ list-style:none; display:flex; flex-direction:column; gap:12px }
.bn-feat-list li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:.99rem; line-height:1.55; color:var(--ink-soft)
}
.bn-feat-list li::before{
  content:"✓"; flex:none; color:var(--gold-d); font-weight:700; line-height:1.55
}

/* ═══════════════ 4 · MARQUEE ═══════════════ */
.bn-mq-sect{ padding:var(--bn-sect) 0 calc(var(--bn-sect) + 1rem) }
/* O fade precisa ser exatamente o preto que a seção pinta (#06060A no override
   da PV2), senão aparece uma faixa mais clara nas bordas. */
.bn-mq{ position:relative; overflow:hidden; width:100%; --bn-mq-bg:#06060A }
.bn-mq::before,.bn-mq::after{
  content:""; position:absolute; top:0; bottom:0; width:9%; z-index:3; pointer-events:none
}
.bn-mq::before{ left:0;  background:linear-gradient(to right,var(--bn-mq-bg),transparent) }
.bn-mq::after { right:0; background:linear-gradient(to left, var(--bn-mq-bg),transparent) }
.bn-mq-track{
  display:flex; gap:22px; width:max-content;
  animation:bnScroll 46s linear infinite
}
.bn-mq:hover .bn-mq-track{ animation-play-state:paused }
/* O track tem 2 cópias do conjunto; deslocar 50% fecha a volta sem emenda. */
@keyframes bnScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.bn-mq-item{
  flex:none; width:270px; display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:var(--bn-r-sm);
  background:rgba(255,255,255,.04); border:1px solid var(--line-d);
  transition:transform .35s var(--bn-ease), border-color .35s
}
.bn-mq-item:hover{ transform:translateY(-4px); border-color:rgba(255,195,15,.34) }
.bn-mq-avatar{
  flex:none; width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:1.5px solid rgba(255,195,15,.34)
}
.bn-mq-name{ display:block; font-weight:600; font-size:.96rem; color:var(--sand); line-height:1.25 }
.bn-mq-niche{ display:block; font-size:.8rem; color:var(--mut-d); line-height:1.35; margin-top:3px }
.bn-mq-cap{
  text-align:center; max-width:56ch; margin:clamp(30px,4vw,44px) auto 0;
  font-size:1.06rem; line-height:1.6; color:var(--sand-soft)
}

/* ═══════════════ 5 · FILOSOFIA (2 colunas) ═══════════════ */
.bn-philo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,72px); align-items:flex-start }
.bn-philo h2{ margin-bottom:clamp(28px,3.4vw,40px) }
.bn-points{ display:flex; flex-direction:column; gap:16px }
.bn-point{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 22px; border-radius:var(--bn-r-sm);
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(19,32,46,.05);
  transition:transform .35s var(--bn-ease), border-color .35s, box-shadow .35s
}
.bn-point:hover{ transform:translateY(-4px); border-color:rgba(204,153,0,.45); box-shadow:var(--bn-shadow) }
.bn-point-ic{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(204,153,0,.12); color:var(--gold-d)
}
.bn-point-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.bn-point-tx{ font-size:1rem; line-height:1.55; color:var(--ink-soft); margin:0 }
.bn-point-tx b{ color:var(--ink); font-weight:600 }

/* Coluna direita: a balança do banana vira o "antes e depois" da prateleira */
.bn-philo-visual{
  position:sticky; top:90px; min-height:440px; border-radius:var(--bn-r-island);
  background:linear-gradient(150deg,rgba(255,195,15,.16),rgba(255,255,255,.9));
  border:1px solid var(--line); box-shadow:var(--bn-shadow);
  display:flex; flex-direction:column; justify-content:center; gap:20px; padding:clamp(26px,3.4vw,42px)
}
.bn-shelf{
  display:flex; align-items:flex-start; gap:16px; padding:18px 20px;
  border-radius:var(--bn-r-sm); background:rgba(255,255,255,.75); border:1px solid var(--line)
}
.bn-shelf--now{ opacity:.72 }
.bn-shelf--next{
  background:var(--night); border-color:rgba(255,195,15,.4);
  box-shadow:var(--bn-shadow-gold)
}
.bn-shelf-lab{
  flex:none; font-family:var(--fm); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); padding-top:5px
}
.bn-shelf--next .bn-shelf-lab{ color:var(--gold-bright) }
.bn-shelf-val{
  font-family:var(--fd); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.6rem);
  letter-spacing:-.025em; color:var(--ink); line-height:1.15
}
.bn-shelf--next .bn-shelf-val{ color:var(--sand) }
.bn-shelf-sub{ display:block; font-size:.84rem; color:var(--mut); margin-top:3px }
.bn-shelf--next .bn-shelf-sub{ color:var(--mut-d) }
.bn-shelf-arrow{ align-self:center; color:var(--gold); font-size:1.5rem; line-height:1 }

/* ═══════════════ 6 · COMPARATIVO ═══════════════ */
.bn-cmp-head{ text-align:center; max-width:44ch; margin:0 auto clamp(38px,4.6vw,60px) }
.bn-cmp{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px); align-items:center; max-width:1120px; margin:0 auto
}
.bn-cmp-card{
  position:relative; display:flex; flex-direction:column; gap:16px;
  padding:clamp(28px,3vw,38px) clamp(22px,2.4vw,30px);
  border-radius:var(--bn-r); background:#F1EEE7; border:1px solid rgba(19,32,46,.14);
  color:var(--mut); transition:transform .4s var(--bn-ease), box-shadow .4s
}
.bn-cmp-card h3{ font-size:1.2rem; color:var(--ink-soft); margin:0 }
.bn-cmp-card p{ font-size:.96rem; line-height:1.55; margin:0 }
.bn-cmp-num{
  font-family:var(--fm); font-size:.72rem; letter-spacing:.14em; color:var(--mut)
}
.bn-cmp-mk{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:rgba(19,32,46,.08); color:var(--mut); flex:none
}
.bn-cmp-mk svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round }
.bn-cmp-top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.bn-cmp-out{
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(19,32,46,.1)
}
.bn-cmp-out-lab{
  display:block; font-family:var(--fm); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut); margin-bottom:6px
}

/* Card vencedor: branco, borda dourada, um degrau à frente */
.bn-cmp-card--win{
  background:var(--white); border:2px solid var(--gold);
  color:var(--ink-soft); box-shadow:var(--bn-shadow-gold); transform:scale(1.035); z-index:2
}
.bn-cmp-card--win:hover{ transform:scale(1.055) translateY(-5px) }
.bn-cmp-card--win h3{ color:var(--ink) }
.bn-cmp-card--win .bn-cmp-mk{ background:rgba(204,153,0,.16); color:var(--gold-d) }
.bn-cmp-card--win .bn-cmp-out{ border-top-color:rgba(204,153,0,.28) }
.bn-cmp-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  padding:6px 16px; border-radius:var(--r-pill); white-space:nowrap;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#0a0c14;
  font-family:var(--fb); font-weight:700; font-size:.68rem;
  letter-spacing:.09em; text-transform:uppercase; box-shadow:0 6px 16px rgba(204,153,0,.32)
}
.bn-cmp-verdict{
  text-align:center; max-width:58ch; margin:clamp(34px,4vw,48px) auto 0;
  font-size:1.06rem; line-height:1.6; color:var(--ink-soft)
}

/* ═══════════════ 9 · ILHA DARK (ancoragem + oferta + garantia) ═══════════════ */
.bn-island-sect{ padding:var(--bn-sect-air) 0 }
.bn-island{
  position:relative; overflow:hidden; max-width:1000px; margin:0 auto;
  border-radius:var(--bn-r-island); background:var(--night);
  border:1px solid var(--line-d2); box-shadow:0 24px 60px rgba(6,6,10,.45);
  padding:clamp(34px,4.4vw,64px); color:var(--sand-soft)
}
.bn-island h2,.bn-island h3{ color:var(--sand) }
.bn-island strong{ color:var(--sand) }
.bn-island .em-gold{ color:var(--gold-bright) }
.bn-glow{
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,195,15,.09), transparent 58%);
  animation:bnGlow 10s ease-in-out infinite alternate
}
@keyframes bnGlow{ from{opacity:.5; transform:scale(.94)} to{opacity:1; transform:scale(1.06)} }
.bn-island > *:not(.bn-glow){ position:relative; z-index:1 }
.bn-island-head{ text-align:center; max-width:46ch; margin:0 auto clamp(28px,3.4vw,40px) }
.bn-island-head .dek{ color:var(--mut-d); margin-top:14px }
.bn-div{
  height:1px; border:0; margin:clamp(30px,3.6vw,44px) 0;
  background:linear-gradient(90deg,transparent,rgba(217,200,183,.24),transparent)
}

/* Stack de valor */
.bn-stack{ display:flex; flex-direction:column; gap:2px }
.bn-stack-row{
  display:grid; grid-template-columns:22px 1fr auto; gap:14px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid rgba(217,200,183,.1)
}
.bn-stack-row .ck{ color:var(--gold-bright); font-weight:700; line-height:1.5 }
.bn-stack-row b{ display:block; color:var(--sand); font-weight:600; font-size:1rem }
.bn-stack-row span.d{ display:block; font-size:.89rem; color:var(--mut-d); line-height:1.5; margin-top:3px }
.bn-stack-row .val{
  font-family:var(--fm); font-size:.92rem; color:var(--sand-soft); white-space:nowrap; padding-top:2px
}
.bn-stack-tag{
  margin:22px 0 10px; font-family:var(--fm); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-bright)
}
.bn-stack-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,195,15,.28)
}
.bn-stack-total-lab{ font-size:.94rem; color:var(--mut-d) }
.bn-stack-total-val{
  font-family:var(--fd); font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--sand); letter-spacing:-.03em; text-decoration:line-through;
  text-decoration-color:rgba(252,113,72,.75)
}

/* Preço */
.bn-price{ text-align:center; display:flex; flex-direction:column; gap:6px }
.bn-price-was{ font-size:.95rem; color:var(--mut-d); text-decoration:line-through }
.bn-price-inst{ font-size:.98rem; color:var(--sand-soft) }
.bn-price-now{
  font-family:var(--fd); font-weight:700; letter-spacing:-.04em; line-height:1;
  font-size:clamp(3rem,7vw,4.6rem); color:var(--gold-bright)
}
.bn-price-cash{ font-size:1.05rem; color:var(--sand) }
.bn-price-actions{ margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:12px }
.bn-price-actions .btn{ width:100%; max-width:460px }
.bn-price-micro{ font-size:.86rem; color:var(--mut-d) }

/* Grid 2 colunas dos itens inclusos */
.bn-incl{ display:grid; grid-template-columns:1fr 1fr; gap:14px 26px }
.bn-incl li{ display:flex; gap:11px; align-items:flex-start; font-size:.96rem; line-height:1.5 }
.bn-incl li::before{ content:"✓"; flex:none; color:var(--gold-bright); font-weight:700 }
.bn-incl-head{
  text-align:center; font-family:var(--fm); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut-d); margin-bottom:20px
}

/* A troca (ROI) dentro da ilha */
.bn-swap{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2.4vw,26px); align-items:stretch }
.bn-swap-card{
  display:flex; flex-direction:column; gap:8px; padding:24px 22px;
  border-radius:var(--bn-r-sm); background:rgba(255,255,255,.03); border:1px solid var(--line-d)
}
.bn-swap-card--in{ border-color:rgba(255,195,15,.3); background:rgba(255,195,15,.05) }
.bn-swap-kicker{
  font-family:var(--fm); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut-d)
}
.bn-swap-price{
  font-family:var(--fd); font-weight:600; font-size:clamp(1.5rem,3vw,2rem);
  color:var(--sand); letter-spacing:-.03em; line-height:1
}
.bn-swap-card--in .bn-swap-price{ color:var(--gold-bright) }
.bn-swap-price span{ font-size:.5em; color:var(--mut-d); letter-spacing:0 }
.bn-swap-what{ font-size:.94rem; color:var(--sand-soft); line-height:1.5 }
.bn-swap-note{ font-size:.84rem; color:var(--mut-d); line-height:1.5; margin-top:auto; padding-top:8px }
.bn-swap-list{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:4px }
.bn-swap-list li{ font-size:.9rem; color:var(--sand-soft); display:flex; gap:9px }
.bn-swap-list li::before{ content:"·"; color:var(--gold-bright) }
.bn-swap-arrow{ align-self:center; color:var(--gold-bright); font-size:1.6rem }
.bn-swap-foot{
  margin-top:20px; font-size:.84rem; color:var(--mut-d); text-align:center; line-height:1.55
}

/* Garantias */
.bn-guard{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px) }
.bn-guard-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:26px 22px; border-radius:var(--bn-r-sm);
  background:rgba(255,255,255,.03); border:1px solid var(--line-d)
}
.bn-guard-seal{ width:110px; height:auto }
.bn-guard-title{ font-family:var(--fd); font-weight:600; font-size:1.12rem; color:var(--sand) }
.bn-guard-text{ font-size:.94rem; line-height:1.55; color:var(--sand-soft) }
.bn-guard-note{ text-align:center; max-width:56ch; margin:26px auto 0 }
.bn-guard-note-em{ color:var(--gold-bright); font-weight:600; margin-top:10px }

/* ═══════════════ 10 · ESPECIALISTA (card com tilt 3D) ═══════════════ */
.bn-crew{ display:flex; justify-content:center; perspective:1000px }
.bn-crew-card{
  position:relative; width:min(460px,100%); height:660px; border-radius:20px;
  overflow:hidden; background:var(--panel-d); border:1px solid var(--line-d);
  transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .4s var(--bn-ease)
}
.bn-crew-card::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(800px circle at var(--bn-mx,50%) var(--bn-my,50%),
             rgba(255,195,15,.14), transparent 42%);
  transition:opacity .35s
}
.bn-crew-card:hover::after{ opacity:1 }
.bn-crew-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(32%); transform:scale(1.05);
  transition:filter .55s var(--bn-ease), transform .55s var(--bn-ease)
}
.bn-crew-card:hover .bn-crew-photo{ filter:grayscale(0); transform:scale(1.1) }
.bn-crew-shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(6,6,10,.97) 30%, rgba(6,6,10,.78) 55%, transparent 82%)
}
.bn-crew-body{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:6px
}
.bn-crew-role{
  font-family:var(--fm); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-bright)
}
.bn-crew-name{
  font-family:var(--fd); font-weight:700; font-size:clamp(1.8rem,3.6vw,2.5rem);
  letter-spacing:-.03em; color:var(--sand); line-height:1.05
}
.bn-crew-sub{ font-size:.9rem; color:var(--mut-d) }
/* A referência esconde a bio até o hover. Aqui ela fica sempre visível: é
   onde estão os 163+ projetos, os 4,1mi de leads e os R$107mi monitorados,
   e esconder o argumento de autoridade atrás de um hover custa caro. */
.bn-crew-bio{ margin-top:12px }
.bn-crew-bio p{ font-size:.93rem; line-height:1.6; color:var(--sand-soft) }
/* O card é escuro mas vive numa seção clara, então o <strong> global (navy)
   sumiria justo em cima dos números de autoridade. */
.bn-crew-body strong{ color:var(--gold-bright); font-weight:600 }
.bn-crew-bio p + p{ margin-top:9px }

/* ═══════════════ 11 · FAQ, FECHAMENTO E FOOTER ═══════════════ */
.bn-faq{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px }
.bn-faq details{
  background:var(--white); border:1px solid var(--line); border-radius:var(--bn-r-sm);
  padding:0 22px; transition:border-color .3s, box-shadow .3s
}
.bn-faq details[open]{ border-color:rgba(204,153,0,.4); box-shadow:var(--bn-shadow) }
.bn-faq summary{
  list-style:none; cursor:pointer; padding:20px 0; display:flex;
  align-items:center; justify-content:space-between; gap:18px;
  font-family:var(--fd); font-weight:600; font-size:1.06rem;
  letter-spacing:-.02em; color:var(--ink)
}
.bn-faq summary::-webkit-details-marker{ display:none }
.bn-faq summary .pm{
  flex:none; width:22px; height:22px; position:relative; color:var(--gold-d)
}
.bn-faq summary .pm::before,.bn-faq summary .pm::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .3s var(--bn-ease)
}
.bn-faq summary .pm::before{ width:13px; height:2px }
.bn-faq summary .pm::after { width:2px; height:13px }
.bn-faq details[open] summary .pm::after{ transform:translate(-50%,-50%) scaleY(0) }
.bn-faq .ans{
  padding:0 0 20px; font-size:.99rem; line-height:1.65; color:var(--ink-soft);
  max-width:66ch
}

.bn-foot{
  background:var(--white); border-top:1px solid var(--line);
  padding:clamp(44px,5vw,64px) 0 clamp(40px,5vw,56px); text-align:center
}
.bn-foot-in{ display:flex; flex-direction:column; align-items:center; gap:16px }
.bn-foot-brand{
  font-family:var(--fd); font-weight:600; font-size:1.15rem;
  letter-spacing:-.02em; color:var(--ink)
}
.bn-foot-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px }
.bn-foot-nav a{ font-size:.9rem; color:var(--ink-soft); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line) }
.bn-foot-nav a:hover{ color:var(--gold-d) }
.bn-foot-legal{ font-size:.82rem; color:var(--mut); line-height:1.6; max-width:66ch }

/* ═══════════════ Cabeçalhos de seção ═══════════════ */
.bn-head{ max-width:52ch; margin-bottom:clamp(38px,4.6vw,60px) }
.bn-head--center{ text-align:center; margin-left:auto; margin-right:auto }
.bn-head h2{ margin:0 }
.bn-head .dek{
  margin-top:16px; font-size:1.06rem; line-height:1.62; color:var(--ink-soft)
}
section.dark .bn-head .dek{ color:var(--sand-soft) }
.bn-cta{ text-align:center; margin-top:clamp(36px,4.4vw,52px) }

/* ═══════════════ Responsivo ═══════════════ */
@media (max-width:1000px){
  .bn-cmp{ grid-template-columns:1fr; max-width:520px }
  .bn-cmp-card--win{ transform:none; order:-1 }
  .bn-cmp-card--win:hover{ transform:translateY(-5px) }
  /* Empilhado, o vencedor sobe para o topo e os ordinais saem de ordem. */
  .bn-cmp-num{ display:none }
  .bn-philo{ grid-template-columns:1fr }
  .bn-philo-visual{ position:static; min-height:0 }
  .bn-swap{ grid-template-columns:1fr }
  .bn-swap-arrow{ transform:rotate(90deg) }
}
@media (max-width:860px){
  :root{ --bn-gap-feat:4.5rem; --bn-sect:4.2rem; --bn-sect-air:5rem }
  .bn-feat{ grid-template-columns:1fr; gap:28px }
  .bn-feat--rev .bn-feat-copy{ order:0 }
  .bn-feat--rev .bn-feat-visual{ order:0 }
  .bn-feat-visual{ min-height:0; padding:16px }
  .bn-shot{ transform:none }
  .bn-mock-body{ grid-template-columns:1fr; gap:14px; justify-items:stretch }
  /* Girar o SVG largo em 90° o faz invadir os cards; empilhado vira uma seta simples. */
  .bn-mock-link{ width:auto; height:auto; justify-self:center }
  .bn-mock-link svg{ display:none }
  .bn-mock-link::after{ content:"↓"; font-size:1.4rem; line-height:1; color:var(--gold) }
  .bn-mock{ transform:none }
  .bn-incl{ grid-template-columns:1fr }
  .bn-guard{ grid-template-columns:1fr }
  .bn-crew-card{ height:auto; min-height:560px }
  .bn-stack-row{ grid-template-columns:20px 1fr; }
  .bn-stack-row .val{ grid-column:2; padding-top:6px }
}
@media (max-width:520px){
  .bn-island{ padding:26px 20px }
  .bn-faq summary{ font-size:.99rem }

  /* Prova: 3 colunas não cabem em 390px sem cortar os rótulos. */
  .bn-proof{ gap:16px 14px }
  .bn-proof-cell{ min-width:0; flex:1 1 30% }
  .bn-proof-l{ font-size:.6rem; letter-spacing:.06em }

  /* Typewriter: a reserva em ch é maior que a tela e força overflow. */
  .bn-tw{ min-width:0 !important }

  .bn-hero-copy{ gap:20px }
  .bn-hero{ padding:clamp(64px,14vw,96px) 0 clamp(32px,8vw,48px) }
}

/* Toque: sem hover, o card do especialista já nasce aberto e sem tilt */
@media (hover:none),(pointer:coarse){
  .bn-crew-card{ transform:none !important }
  .bn-crew-card::after{ display:none }
  .bn-crew-photo{ filter:grayscale(0) }
}

@media (prefers-reduced-motion: reduce){
  .bn-node,.bn-glow,.bn-mq-track{ animation:none }
  .bn-tw-cursor{ animation:none }
  .bn-mock,.bn-shot,.bn-crew-photo,.bn-point,.bn-cmp-card{ transition:none }
}


/* ══════════════════════════════════════════════════════════════════════════
   PV5 · camada do reposicionamento
   Componentes que a PV4 não tinha. Tudo aqui serve ao mesmo eixo: tempo até
   o cliente estar no ar. Nada abaixo redefine seletor da PV4.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────── Cronômetro: variante do .bn-mock da faixa pós-VSL ───────────
   Mesmo chrome de janela, mas os rótulos dos nós viram timestamp. */
.bn-mock--clock .bn-node-lab{
  font-family:var(--fm); font-size:1rem; font-weight:700; letter-spacing:.02em;
  color:var(--mut); text-transform:none
}
.bn-mock--clock .bn-node--out .bn-node-lab{ color:var(--gold-d) }

/* ─────────── A demonstração: mídia + timeline de marcos ─────────── */
.bn-run{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px); align-items:start; max-width:1120px; margin:0 auto
}
.bn-run-frame{
  position:relative; border-radius:var(--bn-r); overflow:hidden;
  background:var(--night-2); border:1px solid var(--line);
  box-shadow:var(--bn-shadow); aspect-ratio:16/10
}
.bn-run-vid{ width:100%; height:100%; object-fit:cover; display:block }
.bn-run-cap{
  margin-top:12px; font-family:var(--fm); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); text-align:center
}

.bn-run-marks{ list-style:none; display:flex; flex-direction:column; gap:8px; counter-reset:none }
.bn-run-mark{
  width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px;
  align-items:baseline; text-align:left; cursor:pointer;
  padding:15px 18px; border-radius:var(--bn-r-sm);
  background:transparent; border:1px solid var(--line-2); color:var(--mut);
  font:inherit; transition:background .3s var(--bn-ease), border-color .3s, transform .3s var(--bn-ease)
}
.bn-run-mark:hover{ background:var(--bg-2); border-color:var(--line); transform:translateX(3px) }
.bn-run-mark:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.bn-run-t{
  font-family:var(--fm); font-size:.9rem; font-weight:700; letter-spacing:.02em;
  color:var(--mut); flex:none
}
.bn-run-tx{ font-size:.95rem; line-height:1.55 }
.bn-run-tx b{ color:var(--ink-soft); font-weight:700 }

/* Marco ativo: o dourado marca onde o vídeo está */
.bn-run-mark.is-on{
  background:var(--white); border-color:rgba(204,153,0,.42);
  box-shadow:var(--bn-shadow-gold); color:var(--ink-soft)
}
.bn-run-mark.is-on .bn-run-t{ color:var(--gold-d) }
.bn-run-mark.is-on .bn-run-tx b{ color:var(--ink) }

/* O último marco é o destino, então fica marcado mesmo sem estar ativo */
.bn-run-mark--goal{ border-color:rgba(204,153,0,.26) }
.bn-run-mark--goal .bn-run-t{ color:var(--gold-d) }

.bn-run-foot{
  text-align:center; max-width:60ch; margin:clamp(30px,3.6vw,44px) auto 0;
  font-size:1.02rem; line-height:1.6; color:var(--ink-soft)
}

/* ─────────── O loop: aplica e aprende ─────────── */
.bn-loop{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px); align-items:stretch; max-width:1120px; margin:0 auto
}
.bn-loop-card{
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(26px,2.8vw,34px) clamp(22px,2.4vw,28px);
  border-radius:var(--bn-r); background:var(--white);
  border:1px solid var(--line); color:var(--mut);
  transition:transform .4s var(--bn-ease), box-shadow .4s
}
.bn-loop-card:hover{ transform:translateY(-4px); box-shadow:var(--bn-shadow-lift) }
.bn-loop-card h3{ font-size:1.16rem; color:var(--ink-soft); margin:0 }
.bn-loop-card p{ font-size:.95rem; line-height:1.58; margin:0 }
.bn-loop-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line-2)
}
.bn-loop-n{
  font-family:var(--fm); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut)
}
/* O tempo caindo de card em card é o argumento inteiro da seção */
.bn-loop-t{
  font-family:var(--fd); font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.5rem,3.2vw,2.1rem); color:var(--ink-soft)
}
.bn-loop-out{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2);
  font-size:.88rem; line-height:1.5; color:var(--mut)
}
.bn-loop-card--goal{
  background:var(--white); border:2px solid var(--gold); box-shadow:var(--bn-shadow-gold)
}
.bn-loop-card--goal h3{ color:var(--ink) }
.bn-loop-card--goal .bn-loop-t{ color:var(--gold-d) }
.bn-loop-card--goal .bn-loop-out{ border-top-color:rgba(204,153,0,.28) }
.bn-loop-foot{
  text-align:center; max-width:62ch; margin:clamp(32px,3.8vw,46px) auto 0;
  font-size:1.06rem; line-height:1.6; color:var(--ink-soft)
}

/* ─────────── A sequência: aula → entregável ─────────── */
.bn-seq{
  max-width:1000px; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--bn-r);
  background:var(--white); overflow:hidden
}
.bn-seq-head{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(16px,2.4vw,32px); padding:16px clamp(20px,2.4vw,30px);
  background:var(--bg-2); border-bottom:1px solid var(--line);
  font-family:var(--fm); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut)
}
.bn-seq-row{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(16px,2.4vw,32px); padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--line-2); transition:background .3s var(--bn-ease)
}
.bn-seq-row:last-child{ border-bottom:0 }
.bn-seq-row:hover{ background:var(--bg-2) }
.bn-seq-in{
  display:flex; gap:14px; align-items:baseline;
  font-size:.98rem; line-height:1.5; color:var(--ink-soft); font-weight:600
}
.bn-seq-n{
  font-family:var(--fm); font-size:.76rem; font-weight:700; letter-spacing:.06em;
  color:var(--gold-d); flex:none
}
/* A coluna da direita é o que o comprador está comprando, então ela lidera
   visualmente mesmo sendo a "resposta" da linha. */
.bn-seq-out{
  font-size:.95rem; line-height:1.6; color:var(--mut);
  padding-left:clamp(16px,2vw,26px); border-left:2px solid rgba(204,153,0,.24)
}
.bn-seq-row--goal{ background:rgba(204,153,0,.05) }
.bn-seq-row--goal:hover{ background:rgba(204,153,0,.08) }
.bn-seq-row--goal .bn-seq-out{ border-left-color:var(--gold); color:var(--ink-soft) }
.bn-seq-foot{
  text-align:center; max-width:62ch; margin:clamp(30px,3.6vw,44px) auto 0;
  font-size:1.02rem; line-height:1.6; color:var(--ink-soft)
}

/* ─────────── Cabeçalho de grupo dentro da entrega ─────────── */
.bn-group-head{
  max-width:52ch; margin:0 auto clamp(38px,4.4vw,56px); text-align:center
}
/* Entre o primeiro e o segundo grupo o respiro é maior: são duas naturezas
   diferentes de entrega, não continuação da mesma lista. */
.bn-feats + .bn-group-head{ margin-top:var(--bn-gap-feat) }
.bn-group-n{
  display:block; font-family:var(--fm); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-d); margin-bottom:12px
}
.bn-group-head h3{ margin:0; font-size:clamp(1.5rem,3.2vw,2.05rem) }
.bn-group-head p{ margin-top:12px; font-size:1rem; line-height:1.6; color:var(--mut) }

/* ─────────── A troca de tempo, dentro da ilha dark ─────────── */
.bn-swap-time{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2.4vw,26px); align-items:stretch;
  margin-bottom:clamp(30px,3.6vw,44px)
}
.bn-swap-time-cell{
  display:flex; flex-direction:column; gap:8px; padding:22px 20px;
  border-radius:var(--bn-r-sm); background:rgba(255,255,255,.03);
  border:1px solid var(--line-d)
}
.bn-swap-time-cell--in{ border-color:rgba(255,195,15,.3); background:rgba(255,195,15,.05) }
.bn-swap-time-lab{
  font-family:var(--fm); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut-d)
}
.bn-swap-time-n{
  font-family:var(--fd); font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.7rem,3.6vw,2.4rem); color:var(--sand)
}
.bn-swap-time-cell--in .bn-swap-time-n{ color:var(--gold-bright) }
.bn-swap-time-sub{ font-size:.88rem; line-height:1.5; color:var(--mut-d) }
.bn-swap-time-arrow{ align-self:center; color:var(--gold-bright); font-size:1.6rem }

/* ═══════════════ Responsivo da camada PV5 ═══════════════ */
@media (max-width:1000px){
  /* A timeline embaixo do vídeo: em coluna estreita os marcos ficam ilegíveis. */
  .bn-run{ grid-template-columns:1fr; max-width:640px }
  .bn-loop{ grid-template-columns:1fr; max-width:520px }
  .bn-loop-card--goal{ order:-1 }
  .bn-swap-time{ grid-template-columns:1fr }
  .bn-swap-time-arrow{ transform:rotate(90deg) }
}
@media (max-width:860px){
  /* Aula e entregável empilhados: a resposta fica recuada sob a pergunta. */
  .bn-seq-head{ display:none }
  .bn-seq-row{ grid-template-columns:1fr; gap:10px }
  .bn-seq-out{ margin-left:calc(.76rem + 14px) }
}
@media (max-width:520px){
  .bn-run-mark{ grid-template-columns:1fr; gap:6px; padding:14px 16px }
  .bn-run-t{ font-size:.82rem }
  /* Quatro células de prova em 390px: duas linhas de duas. */
  .bn-proof-cell{ flex:1 1 40% }
}

@media (prefers-reduced-motion: reduce){
  .bn-run-mark,.bn-loop-card,.bn-seq-row{ transition:none }
  .bn-run-mark:hover{ transform:none }
  .bn-loop-card:hover{ transform:none }
}