/* ==========================================================================
   MakeSDR — um produto Make Vendas
   Landing page de conversão da camada de qualificação ativa: IA atendendo
   24/7 e SDR humano retomando quem não respondeu.

   Mesma gramática visual e a mesma arquitetura de componentes da LP
   "Os Mais Bem Avaliados" / Social Leads: tipo Articulat CF, superfícies que
   alternam entre tinta e papel, movimento em GSAP + ScrollTrigger + Lenis,
   peça de hero em Three.js.

   O que muda aqui é o ACENTO. O MakeSDR tem cor própria, e o co-branding
   desta página segue a mesma regra do lockup: a marca do produto manda e a
   assinatura da Make vem atrás do fio. Então o verde do produto conduz a
   página inteira — hero, CTA, destaque, banda — e o laranja da Make fica
   reservado para onde a casa assina: o lockup, o bloco de ecossistema e o
   rodapé. Cor com hierarquia declarada, não duas marcas brigando.

   Tipo:  Articulat CF (display + corpo, kit cnm1gza)
          JetBrains Mono (micro-label, dado técnico) — IDV do ecossistema Make
   Cor:   tinta #00070b · papel #FFFDF8
          verde MakeSDR #65A23D (acento do produto)
          laranja Make #FF7A1A (assinatura da casa)
   ========================================================================== */

:root{
  --ink:#00070b;
  --ink-2:#04101a;
  --ink-3:#071a27;
  --paper:#FFFDF8;
  --paper-2:#D6D9E0;
  --paper-3:#EFEBE3;

  /* acento do produto: o verde do wordmark makeSDR.
     --acc-deep existe porque #65A23D sobre papel cru tem contraste curto para
     rótulo pequeno; a versão funda mantém a mesma família e passa a leitura. */
  --acc:#65A23D;
  --acc-lift:#7CBF4E;
  --acc-deep:#3F7322;

  /* assinatura da casa: só onde a Make assina */
  --orange:#FF7A1A;
  --orange-deep:#E8621F;

  --on-ink:#FFFDF8;
  --on-ink-mute:#8A94A0;
  --on-ink-faint:rgba(255,253,248,.13);
  --on-paper:#161616;
  --on-paper-mute:rgba(22,22,22,.54);
  --on-paper-faint:rgba(22,22,22,.14);

  --sans:"articulat-cf",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","articulat-cf",ui-monospace,monospace;
  --display:"articulat-cf",system-ui,sans-serif;

  --d1:clamp(38px,5.9vw,98px);
  --d2:clamp(36px,5.6vw,86px);
  --d3:clamp(26px,2.4vw,38px);
  --d4:clamp(20px,1.7vw,27px);
  --body:clamp(14px,1vw,16px);
  --micro:11px;

  --gut:clamp(20px,2.4vw,46px);
  --rail:74px;
  --ease:cubic-bezier(.22,1,.36,1);

  --card-bg:rgba(0,7,11,.48);
  --card-blur:blur(10px);
  --card-line:rgba(255,255,255,.07);
  --pill-bg:rgba(255,255,255,.04);
  --pill-line:rgba(255,255,255,.09);
  --r-card:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--on-ink);
  font-family:var(--sans); font-size:var(--body); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:1px solid var(--acc);outline-offset:4px}

/* ---------------------------------------------------------- tipo, papéis */
.d1{font-size:var(--d1); line-height:.94; font-weight:400; letter-spacing:-.048em; text-wrap:balance}
.d2{font-size:var(--d2); line-height:.98; font-weight:400; letter-spacing:-.045em}
.d3{font-size:var(--d3); line-height:1.06; font-weight:400; letter-spacing:-.035em}
.d4{font-size:var(--d4); line-height:1.15; font-weight:400; letter-spacing:-.03em}

.acc{color:var(--acc)}

.lbl{
  font-family:var(--mono); font-size:var(--micro); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-mute);
  line-height:1.8;
}
.on-paper .lbl{color:var(--on-paper-mute)}
.lbl--hot{color:var(--acc)}

.mblock{font-family:var(--mono); font-size:var(--micro); letter-spacing:.07em;
  text-transform:uppercase; line-height:2.1; color:var(--on-ink)}
.on-paper .mblock{color:var(--on-paper)}

/* CTA */
.lnk{
  display:inline-flex; align-items:center; gap:12px;
  padding:19px 32px; border-radius:999px;
  font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:-.015em;
  color:var(--on-ink);
  transition:background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.lnk svg{width:16px;height:16px;flex:none;transition:transform .4s var(--ease)}
.lnk:hover svg{transform:translateX(4px)}
.lnk:active{transform:translateY(1px)}
.lnk--hot{background:var(--acc); color:#08150a}
.lnk--hot:hover{background:var(--acc-lift)}
.lnk--glass{background:var(--pill-bg); border:1px solid var(--pill-line);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur)}
.lnk--glass:hover{background:rgba(255,255,255,.1)}
.on-paper .lnk{color:var(--on-paper)}
.on-paper .lnk--hot{color:#08150a}
.on-paper .lnk--glass{background:rgba(22,22,22,.06); border-color:rgba(22,22,22,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.on-paper .lnk--glass:hover{background:rgba(22,22,22,.11)}

.pill{
  display:inline-flex; align-items:center; gap:.6em; padding:10px 18px; border-radius:999px;
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.pill--solid{background:var(--paper); color:#12100c}
/* o rotulo longo nao cabe ao lado do lockup co-branded em tela estreita: ele
   quebrava em duas linhas e o botao passava por cima da logo da Make */
.pill__s{display:none}
@media (max-width:760px){ .pill__l{display:none} .pill__s{display:inline} }
.pill--solid:hover{background:var(--acc); color:#08150a}

.wrap{padding-inline:var(--gut)}
.on-paper{background:var(--paper); color:var(--on-paper)}

.scene{position:relative; padding-block:clamp(70px,9.5vh,126px)}
.scene__lbl{position:absolute; left:var(--gut); top:clamp(70px,9.5vh,126px)}
.scene__body{padding-left:clamp(0px,10vw,190px)}
@media (max-width:900px){
  .scene__lbl{position:static; display:block; margin-bottom:22px}
  .scene__body{padding-left:0}
}

.vis-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* ================================================================= rail
   Co-branding no ponto mais visto da página: a marca do produto manda e a
   assinatura da Make vem logo atrás, separada por um fio. Não são dois logos
   soltos lado a lado, é um lockup só, com hierarquia declarada. */
.hdr{
  position:fixed; inset:0 0 auto; height:var(--rail); z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding-inline:var(--gut);
  color:var(--on-ink);
  transition:color .5s var(--ease), transform .55s var(--ease);
}
.hdr[data-tone="light"]{color:var(--on-paper)}
/* Fora da hero o conteudo passa por baixo do lockup e a leitura se perde.
   O veu segue o tom da secao, entao ele nunca aparece como faixa de cor
   estranha: ele e a propria superficie da secao esmaecendo. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .45s var(--ease);
  background:linear-gradient(to bottom, rgba(0,7,11,.94) 30%, rgba(0,7,11,0));
}
.hdr[data-tone="light"]::before{
  background:linear-gradient(to bottom, rgba(255,253,248,.94) 30%, rgba(255,253,248,0));
}
.hdr[data-veu="1"]::before{opacity:1}
.hdr[data-hide="1"]{transform:translateY(calc(var(--rail) * -1))}
.hdr__r{display:flex; align-items:center; gap:9px}
.hdr .pill{white-space:nowrap}

.lock{display:flex; align-items:center; gap:clamp(10px,1.2vw,16px)}
.lock__mark{position:relative; display:block; width:clamp(118px,11.5vw,158px); line-height:0}
.lock__mark img{display:block; width:100%; height:auto; transition:opacity .5s var(--ease)}
.lock__escura{position:absolute; inset:0; opacity:0}
.hdr[data-tone="light"] .lock__clara{opacity:0}
.hdr[data-tone="light"] .lock__escura{opacity:1}
.lock__by{display:flex; align-items:center; gap:clamp(8px,.9vw,12px);
  padding-left:clamp(10px,1.2vw,16px); border-left:1px solid currentColor;
  opacity:.5; transition:opacity .4s var(--ease)}
.lock:hover .lock__by{opacity:.95}
.lock__txt{font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap}
.lock__make{position:relative; display:block; width:clamp(56px,5vw,74px); line-height:0}
.lock__make img{display:block; width:100%; height:auto; transition:opacity .5s var(--ease)}
@media (max-width:760px){
  .lock__mark{width:106px}
  .lock__by{padding-left:10px; gap:8px}
  .lock__make{width:50px}
}
/* so o rotulo some no estreito. A regra antiga dizia '.lock__by span' e a
   logo da Make tambem vive num span: o co-branding sumia abaixo de 640px. */
@media (max-width:640px){ .lock__txt{display:none} }

.hdr[data-tone="light"] .pill--solid{background:#161616; color:var(--paper)}
.hdr[data-tone="light"] .pill--solid:hover{background:var(--acc); color:#08150a}

/* ================================================================= hero */
.hero{position:relative; min-height:100dvh; overflow:clip;
  perspective:1500px; perspective-origin:50% 46%}
.hero__vig{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero__vig::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(112% 88% at 60% 44%, transparent 18%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.92) 100%);
}
.hero__vig::after{
  content:""; position:absolute; inset:0;
  background-image:url("../img/noise.svg"); background-size:180px 180px;
  opacity:.055; mix-blend-mode:overlay;
}
#gl{position:fixed; inset:0; width:100%; height:100vh; z-index:0; pointer-events:none}
.hero,.about{background:transparent; position:relative; z-index:1}
.about{isolation:isolate}
main > section:not(.hero):not(.about),.foot{position:relative; z-index:2}
.hero__ui{position:relative; z-index:2; min-height:100dvh; pointer-events:none}
.hero__ui a,.hero__ui button{pointer-events:auto}
.plane__in{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform}

/* A coluna de texto tem MEDIDA, e a headline tem a dela: com 58vw e display
   de 8,2vw a frase quebrava em quatro linhas irregulares e ainda encostava na
   grade 3D. Medida em ch amarra a quebra à própria tipografia, não ao vento. */
/* Esta headline tem 3 versos por projeto: com 4, o painel de números e a
   ressalva caíam abaixo da dobra em 1280x720 e a hero deixava de fechar numa
   tela só. A medida em ch amarra a quebra à própria tipografia; o teto de 50vw
   é o que impede a frase de encostar na peça 3D. */
.hero__head{position:absolute; left:var(--gut); top:clamp(88px,10.5vh,132px); max-width:min(50vw,880px)}
.hero__head .d1{max-width:18ch}
/* A palavra em destaque é quebrada em <span> por caractere para o blast do 3D,
   e caractere em inline-block é ponto de quebra de linha válido: sem isto o
   navegador partia "demanda" em "demand / a" no meio da headline. */
.hero__head .acc{white-space:nowrap}
@media (max-width:900px){ .hero__head{max-width:none; right:var(--gut)} }
.hero__head .d1 .ch{display:inline-block; will-change:transform}
.hero__cycle{
  position:relative; margin-bottom:clamp(12px,1.8vh,24px);
  padding-left:22px; overflow:clip;
  font-family:var(--mono); font-size:13px; font-weight:500;
  line-height:1.7; height:2.1em;
  letter-spacing:.16em; text-transform:uppercase; color:var(--acc);
}
.hero__cycle::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--acc);
}
.hero__cycle span{display:block; line-height:1.7; will-change:transform}
.hero__sub{
  margin-top:clamp(14px,2.1vh,28px); max-width:44ch;
  font-size:clamp(17px,1.5vw,23px); line-height:1.45; color:rgba(255,253,248,.72);
}
.hero__links{display:flex; flex-wrap:wrap; gap:12px 14px; margin-top:clamp(16px,2.6vh,34px)}
.hero__stats{
  margin-top:clamp(20px,3.4vh,48px);
  display:inline-flex; align-items:stretch; border-radius:var(--r-card); overflow:hidden;
  background:var(--card-bg);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--card-line);
}
.hero__stats div{padding:17px 26px; display:flex; flex-direction:column; gap:5px}
.hero__stats div + div{border-left:1px solid var(--card-line)}
.hero__stats b{
  font-weight:500; font-size:clamp(28px,2.9vw,42px); line-height:.92;
  letter-spacing:-.045em; color:var(--paper);
}
.hero__stats b em{font-style:normal; color:var(--acc)}
.hero__stats small{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-ink-mute);
}
.hero__note{
  margin-top:11px; max-width:58ch;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  line-height:1.9; color:rgba(255,253,248,.38);
}
.hero__edge{
  position:absolute; right:calc(var(--gut) - 6px); top:50%; z-index:3;
  transform:translateY(-50%) rotate(90deg); transform-origin:100% 50%;
  display:flex; align-items:center; gap:14px; white-space:nowrap;
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(255,253,248,.24);
}
.hero__edge i{width:34px; height:1px; background:rgba(255,253,248,.24); font-style:normal}
@media (max-width:1200px){ .hero__edge{display:none} }

/* ================================================================ sobre */
.about{padding-block:clamp(76px,10.5vh,136px); min-height:auto; display:flex; align-items:center}
.about .scene__lbl{top:clamp(76px,10.5vh,136px)}
.about .stmt{margin-left:clamp(60px,11vw,190px)}
.rule{position:relative; height:1px; background:rgba(255,253,248,.15);
  margin-top:clamp(40px,5.6vh,76px); margin-left:clamp(60px,11vw,190px);
  transform:scaleX(0); transform-origin:0 50%}
.rule i{position:absolute; left:64%; top:-5px; width:11px; height:11px; color:var(--paper); opacity:0}
.rule i::before,.rule i::after{content:""; position:absolute; background:currentColor}
.rule i::before{left:5px; top:0; width:1px; height:11px}
.rule i::after{left:0; top:5px; width:11px; height:1px}
.about__foot{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,90px); align-items:end;
  margin-top:clamp(40px,6vh,82px); margin-left:clamp(60px,11vw,190px);
}
.about__note{justify-self:end; max-width:38ch}
.about__note p{font-size:clamp(15px,1.15vw,18px); line-height:1.55; color:rgba(255,253,248,.72)}
@media (max-width:900px){
  .about__foot{grid-template-columns:1fr; align-items:start}
  .about__note{justify-self:start}
  .about .stmt,.rule,.about__foot{margin-left:0}
}

/* ======================================================= declaração fixa */
.decl{position:relative; min-height:34dvh; overflow:clip; background:var(--ink); z-index:2}
.decl__light{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; pointer-events:none}
.decl__light i{flex:1; background:var(--paper); transform:scaleY(0); transform-origin:50% 100%}
.decl__light i + i{margin-top:-1px}

/* ============================================================== operação */
.ops__stmt{max-width:26ch; margin-bottom:clamp(48px,7vh,96px)}
.ops{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px)}
.ops__i{
  padding:clamp(28px,2.8vw,44px); border-radius:var(--r-card);
  background:rgba(22,22,22,.045); border:1px solid rgba(22,22,22,.07);
  display:flex; flex-direction:column;
}
.ops__i b{
  display:block; font-size:clamp(52px,6.4vw,96px); font-weight:500; line-height:.88;
  letter-spacing:-.05em; color:var(--on-paper); font-variant-numeric:tabular-nums;
}
.ops__i small{
  display:block; margin-top:16px; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--acc-deep);
}
.ops__i p{margin-top:clamp(20px,2.4vh,32px); font-size:clamp(14px,1.05vw,16px);
  line-height:1.5; color:var(--on-paper-mute)}
.ops__seals{margin-top:clamp(30px,4vh,50px); display:flex; flex-wrap:wrap; gap:10px 12px}
.seal{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  border:1px solid rgba(22,22,22,.13); font-family:var(--mono); font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--on-paper-mute)}
.seal::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--orange-deep)}
@media (max-width:820px){ .ops{grid-template-columns:1fr} }

/* ==================================== fita: as publicações do mês em 3D
   Mesma máquina da LP de referência: hélice desenhada em canvas 2D com
   perspectiva de verdade. O que muda é a carga — aqui não são capturas de
   site, são as oito publicações do mês, desenhadas em tempo real. */
.ribbon{position:relative; min-height:100dvh; overflow:clip;
  background:var(--paper); color:var(--on-paper)}
.ribbon__type{position:absolute; inset:0; z-index:1; pointer-events:none}
.ribbon__phrase{position:absolute; top:50%; left:50%; width:100%;
  transform:translate(-50%,-50%); display:flex; flex-direction:column;
  white-space:nowrap; overflow:visible; pointer-events:none}
.ribbon__a,.ribbon__b{
  /* .88 e nao .8: com acento no segundo verso (MES) o circunflexo batia na
     linha de cima e o par lia como erro de composicao */
  margin:0; text-transform:uppercase; line-height:.88; font-weight:400;
  font-size:clamp(52px,11.6vw,210px); letter-spacing:-.055em; color:#25252A;
  will-change:transform;
}
.ribbon__a{align-self:center; transform:translate3d(var(--tx,-100%),0,0)}
/* o circunflexo de MES sobe acima da caixa de linha: sem esse empurrao ele
   encosta no verso de cima e o par le como erro de composicao */
.ribbon__b{align-self:center; margin-top:.09em; transform:translate3d(var(--bx,100%),0,0)}
.ribbon__stage{position:absolute; inset:0}
.ribbon__stage--tras{z-index:0}
.ribbon__stage--frente{z-index:2}
.ribbon__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.ribbon__foot{position:absolute; left:var(--gut); bottom:clamp(24px,4vh,46px);
  z-index:3; max-width:min(56ch,70vw); padding:18px 22px; border-radius:16px;
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:baseline;
  /* a legenda fica sobre a fita: sem superficie propria, um card laranja
     passando por tras apagava o texto cinza */
  background:var(--paper); border:1px solid rgba(22,22,22,.1);
  box-shadow:0 20px 44px -28px rgba(46,34,18,.45);
  pointer-events:none}
.ribbon__foot p{max-width:46ch; font-size:14px; line-height:1.55; color:var(--on-paper-mute)}

@media (max-width:900px){
  .ribbon{min-height:100dvh; padding-block:clamp(70px,10vh,120px);
    display:grid; place-items:center}
  .ribbon__stage--frente{position:absolute; inset:0; height:auto; z-index:0}
  .ribbon__stage--tras{display:none}
  .ribbon__type{position:absolute; inset:0; z-index:1; display:grid; place-items:center}
  .ribbon__phrase{position:static; transform:none; width:100%}
  .ribbon__a,.ribbon__b{position:static; text-align:center; white-space:normal;
    transform:none !important; opacity:1 !important}
  .ribbon__foot{position:static; margin-top:auto; max-width:none; justify-content:center;
    text-align:center; background:none; border:0; box-shadow:none}
}
.pin-spacer:has(> .ribbon){background:var(--paper)}

/* ================================================= os vazamentos, on-paper
   Três colunas em grade de fio: cada uma é um ponto por onde o lead escapa
   antes de virar reunião. A régua escura embaixo fecha o raciocínio — os três
   vazamentos são o mesmo buraco, que é não ter ninguém qualificando. */
.leak{position:relative; z-index:2; background:var(--paper); color:var(--on-paper);
  padding-block:clamp(62px,8.2vh,110px)}
.leak__head{padding-inline:var(--gut)}
.leak__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.6vw,58px); line-height:1.02;
  letter-spacing:-.038em; max-width:22ch; text-wrap:balance}
.leak__g{margin:clamp(40px,5.4vh,74px) var(--gut) 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:rgba(22,22,22,.12); border-radius:var(--r-card); overflow:clip}
.leak__c{background:var(--paper); padding:clamp(28px,3.2vw,52px)}
.leak__n{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--acc-deep)}
.leak__c h3{margin:14px 0 0; font-weight:400; font-size:clamp(23px,2.4vw,36px);
  line-height:1.06; letter-spacing:-.032em; text-wrap:balance}
.leak__c > p{margin:16px 0 0; font-size:clamp(15px,1.1vw,17px); line-height:1.55;
  color:var(--on-paper-mute); max-width:46ch}
.leak__c > p b{color:var(--on-paper); font-weight:700}
.leak__l{margin-top:clamp(22px,3vh,34px); padding-top:clamp(20px,2.6vh,28px);
  border-top:1px solid rgba(22,22,22,.12); display:grid; gap:11px}
.leak__l li{position:relative; padding-left:24px; font-size:15px; line-height:1.5}
.leak__l li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:2px;
  background:var(--acc-deep)}
.leak__seam{margin:clamp(22px,3vh,34px) var(--gut) 0; padding:clamp(22px,2.6vw,34px);
  border-radius:var(--r-card); background:var(--ink); color:var(--on-ink);
  font-size:clamp(15px,1.18vw,19px); line-height:1.5; max-width:none}
.leak__seam b{color:var(--acc); font-weight:400}
@media (max-width:1040px){ .leak__g{grid-template-columns:1fr} }

.leak__cost{margin-top:clamp(20px,2.6vh,30px); padding-top:16px;
  border-top:1px solid rgba(22,22,22,.12);
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--acc-deep)}

/* ================================================= o que entra no programa
   Índice em escala de display sobre tinta, com curadoria no hover: o item
   apontado fica e os vizinhos recuam. O painel da direita é fixo e resume o
   que os seis itens somam, para a leitura não depender de ler tudo. */
.inc{position:relative; z-index:2; background:var(--ink-2); color:var(--on-ink);
  padding-block:clamp(64px,8.5vh,116px)}
.inc__head{padding-inline:var(--gut)}
.inc__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.5vw,56px); line-height:1.02;
  letter-spacing:-.035em; max-width:24ch; text-wrap:balance}
.inc__sub{margin:18px 0 0; max-width:60ch; font-size:15px; line-height:1.6; color:var(--on-ink-mute)}
.inc__body{margin:clamp(38px,5vh,70px) 0 0; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34%);
  gap:clamp(28px,4vw,72px); align-items:start}
.inc__l{counter-reset:inc}
.inc__i{counter-increment:inc; border-top:1px solid rgba(255,255,255,.08)}
.inc__i:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.inc__a{position:relative; display:grid; align-items:baseline;
  grid-template-columns:minmax(0,1fr) auto; gap:2px clamp(14px,2vw,30px);
  padding:clamp(22px,3vh,34px) 0 clamp(22px,3vh,34px) 3.8em;
  transition:opacity .45s var(--ease)}
.inc__a::before{content:counter(inc,decimal-leading-zero); position:absolute;
  left:0; top:calc(clamp(22px,3vh,34px) + .42em);
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em;
  color:var(--acc)}
.inc__t{font-size:clamp(19px,2.05vw,31px); font-weight:400; line-height:1.06; letter-spacing:-.03em}
.inc__c{justify-self:end; font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--on-ink-mute); transition:color .45s var(--ease)}
.inc__d{grid-column:1 / -1; margin-top:10px; font-size:14.5px; line-height:1.55;
  color:var(--on-ink-mute); max-width:52ch}
.inc__l:hover .inc__a{opacity:.42}
.inc__l .inc__i:hover .inc__a,.inc__l .inc__i:focus-within .inc__a{opacity:1}
.inc__i:hover .inc__c{color:var(--acc)}
.inc__panel{position:sticky; top:calc(var(--rail) + 26px);
  padding:clamp(26px,2.8vw,40px); border-radius:var(--r-card);
  background:rgba(255,255,255,.035); border:1px solid var(--card-line);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur)}
.inc__panel h3{font-weight:400; font-size:clamp(21px,1.9vw,29px); line-height:1.1;
  letter-spacing:-.03em}
.inc__panel p{margin-top:16px; font-size:15px; line-height:1.6; color:var(--on-ink-mute)}
.inc__panel .lnk{margin-top:26px}
.inc__pair{margin-top:26px; padding-top:22px; border-top:1px solid var(--card-line);
  display:grid; grid-template-columns:auto 1fr; gap:9px 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em}
.inc__pair dt{color:var(--on-ink-mute); text-transform:uppercase}
.inc__pair dd{margin:0}
@media (max-width:900px){
  .inc__body{grid-template-columns:1fr}
  .inc__panel{position:relative; top:auto; order:-1; margin-bottom:26px}
  .inc__a{grid-template-columns:1fr; padding-left:0}
  .inc__a::before{position:static; display:block; margin-bottom:6px}
  .inc__c{justify-self:start}
  .inc__l:hover .inc__a{opacity:1}
}

/* ================================================= para quem é / não é */
.fit{position:relative; z-index:2; background:var(--paper); color:var(--on-paper);
  padding-block:clamp(62px,8.2vh,110px)}
.fit__head{padding-inline:var(--gut)}
.fit__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.6vw,58px); line-height:1.02;
  letter-spacing:-.038em; max-width:22ch; text-wrap:balance}
.fit__g{margin-top:clamp(36px,5vh,66px); padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px)}
.fit__c{padding:clamp(24px,2.5vw,36px); border-radius:var(--r-card);
  background:rgba(22,22,22,.04); border:1px solid rgba(22,22,22,.07);
  transition:background-color .5s var(--ease), transform .5s var(--ease)}
.fit__c:hover{background:rgba(22,22,22,.07); transform:translateY(-3px)}
.fit__c h3{font-weight:400; font-size:clamp(19px,1.6vw,25px); line-height:1.1;
  letter-spacing:-.028em; text-wrap:balance}
.fit__c p{margin-top:14px; font-size:15px; line-height:1.55; color:var(--on-paper-mute)}
@media (max-width:1000px){ .fit__g{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .fit__g{grid-template-columns:1fr} }

/* a recusa é a seção mais persuasiva da página: entra sobre tinta, com o
   x em vermelho contido, e o rodapé assume o custo de vender errado */
.nofit{position:relative; z-index:2; background:var(--ink); color:var(--on-ink);
  padding-block:clamp(62px,8.2vh,110px)}
.nofit__head{padding-inline:var(--gut)}
.nofit__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.6vw,58px); line-height:1.02;
  letter-spacing:-.038em; max-width:22ch; text-wrap:balance}
.nofit__l{margin:clamp(36px,5vh,66px) var(--gut) 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:rgba(255,255,255,.08); border-radius:var(--r-card); overflow:clip}
.nofit__i{background:var(--ink-2); padding:clamp(24px,2.5vw,34px);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px;
  transition:background-color .5s var(--ease)}
.nofit__i:hover{background:var(--ink-3)}
.nofit__x{grid-row:span 2; margin-top:.28em; width:18px; height:18px; flex:none; color:#FF7A6A}
.nofit__i h3{font-weight:700; font-size:16.5px; line-height:1.3; letter-spacing:-.012em}
.nofit__i p{font-size:14.5px; line-height:1.55; color:var(--on-ink-mute)}
.nofit__foot{margin:clamp(26px,3.4vh,42px) var(--gut) 0; max-width:74ch;
  font-size:15px; line-height:1.6; color:var(--on-ink-mute)}
.nofit__foot b{color:var(--on-ink); font-weight:700}
@media (max-width:820px){ .nofit__l{grid-template-columns:1fr} }


/* ============================================================ dois turnos
   A seção-assinatura da página: o produto é literalmente dois turnos de
   atendimento sobre o mesmo lead. Então a seção é dois painéis altos sobre
   tinta, separados por um fio, com um selo de horário em cada um. O painel da
   IA acende — ele é o que roda sozinho; o do humano fica em vidro, porque ele
   é a exceção que entra quando o primeiro não resolveu. */
.turn{position:relative; z-index:2; background:var(--ink); color:var(--on-ink);
  padding-block:clamp(62px,8.2vh,110px); overflow:clip}
.turn__head{padding-inline:var(--gut); display:grid; gap:clamp(18px,3vw,60px);
  grid-template-columns:minmax(0,1fr) minmax(0,42ch); align-items:end}
.turn__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.6vw,58px); line-height:1.02;
  letter-spacing:-.038em; max-width:20ch; text-wrap:balance}
.turn__sub{font-size:15px; line-height:1.6; color:var(--on-ink-mute)}
.turn__g{margin:clamp(38px,5.2vh,72px) var(--gut) 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px)}
.turn__c{position:relative; display:flex; flex-direction:column;
  padding:clamp(28px,3vw,48px); border-radius:var(--r-card);
  border:1px solid var(--card-line); background:rgba(255,255,255,.035);
  overflow:clip; transition:border-color .5s var(--ease)}
/* o painel da IA carrega um halo frio no canto: é o que faz um card quase
   preto ler como superfície acesa em vez de retângulo com borda */
.turn__c[data-lit="1"]{border-color:rgba(101,162,61,.34); background:rgba(101,162,61,.07)}
.turn__c[data-lit="1"]::after{content:""; position:absolute; z-index:0; pointer-events:none;
  width:60%; aspect-ratio:1; right:-18%; top:-26%; border-radius:50%;
  background:radial-gradient(circle, rgba(101,162,61,.34), transparent 66%)}
.turn__c > *{position:relative; z-index:1}
.turn__c:hover{border-color:rgba(255,255,255,.17)}
.turn__c[data-lit="1"]:hover{border-color:rgba(101,162,61,.55)}
.turn__n{display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--on-ink-mute)}
.turn__n b{color:var(--acc); font-weight:500}
.turn__c[data-lit="1"] .turn__n{color:rgba(255,253,248,.62)}
.turn__c h3{margin-top:clamp(18px,2.4vh,26px); font-weight:400;
  font-size:clamp(26px,2.9vw,46px); line-height:1.02; letter-spacing:-.038em; text-wrap:balance}
.turn__c > p:not([class]){margin-top:16px; max-width:44ch; font-size:clamp(15px,1.12vw,17px);
  line-height:1.55; color:var(--on-ink-mute)}
.turn__l{margin-top:clamp(22px,3vh,32px); padding-top:clamp(18px,2.4vh,26px);
  border-top:1px solid var(--card-line); display:grid; gap:11px}
.turn__l li{position:relative; padding-left:24px; font-size:15px; line-height:1.5}
.turn__l li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:2px;
  background:var(--acc)}
.turn__when{margin-top:auto; padding-top:clamp(22px,3vh,32px);
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--on-ink-mute)}
.turn__seam{margin:clamp(22px,3vh,34px) var(--gut) 0; padding:clamp(22px,2.6vw,34px);
  border-radius:var(--r-card); background:var(--paper); color:var(--on-paper);
  font-size:clamp(15px,1.18vw,19px); line-height:1.5}
.turn__seam b{color:var(--acc-deep); font-weight:400}
@media (max-width:980px){ .turn__g{grid-template-columns:1fr} .turn__head{grid-template-columns:1fr} }

/* ========================================================= caminho do lead
   Cinco estágios numa trilha horizontal, sobre papel. A linha é desenhada por
   ScrollTrigger e o nó acende quando ela chega nele: o percurso do lead é a
   própria mecânica do produto, então ele precisa ser percorrido, não lido numa
   lista. No estreito a trilha vira vertical — a mesma linha, girada. */
.flow{position:relative; z-index:2; background:var(--paper); color:var(--on-paper);
  padding-block:clamp(62px,8.2vh,110px); overflow:clip}
.flow__head{padding-inline:var(--gut)}
.flow__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.6vw,58px); line-height:1.02;
  letter-spacing:-.038em; max-width:20ch; text-wrap:balance}
.flow__sub{margin:18px 0 0; max-width:64ch; font-size:15px; line-height:1.6;
  color:var(--on-paper-mute)}
.flow__track{position:relative; margin-top:clamp(44px,6vh,84px); padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px)}
/* o trilho vive atrás dos nós e vai de centro de nó a centro de nó, não de
   borda a borda: linha que passa por baixo do primeiro círculo lê como risco */
.flow__rail{position:absolute; left:calc(var(--gut) + 10%); right:calc(var(--gut) + 10%);
  top:17px; height:2px; background:rgba(22,22,22,.12); overflow:clip}
/* o preenchimento é dirigido por --p, não por transform escrito pelo JS: assim
   a mesma variável serve para a trilha deitada e para a trilha em pé sem que o
   script precise saber em qual media query a página está */
.flow__rail i{display:block; height:100%; width:100%; background:var(--acc-deep);
  transform:scaleX(var(--p,0)); transform-origin:0 50%}
.flow__s{position:relative; padding-top:46px; display:flex; flex-direction:column}
.flow__s::before{content:""; position:absolute; left:calc(50% - 18px); top:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--paper); border:2px solid rgba(22,22,22,.14);
  transition:border-color .5s var(--ease), background-color .5s var(--ease)}
.flow__s::after{content:""; position:absolute; left:calc(50% - 5px); top:13px;
  width:10px; height:10px; border-radius:50%; background:rgba(22,22,22,.2);
  transition:background-color .5s var(--ease), transform .5s var(--ease)}
.flow__s[data-on="1"]::before{border-color:var(--acc-deep); background:var(--paper)}
.flow__s[data-on="1"]::after{background:var(--acc-deep); transform:scale(1.25)}
.flow__n{display:block; text-align:center; font-family:var(--mono); font-size:11px;
  font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-paper-mute); transition:color .5s var(--ease)}
.flow__s[data-on="1"] .flow__n{color:var(--acc-deep)}
.flow__s h3{margin-top:12px; text-align:center; font-weight:400;
  font-size:clamp(19px,1.7vw,26px); line-height:1.08; letter-spacing:-.03em; text-wrap:balance}
.flow__s p{margin-top:12px; text-align:center; font-size:14.5px; line-height:1.55;
  color:var(--on-paper-mute)}
.flow__who{display:block; margin-top:auto; padding-top:14px; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-paper-mute)}
.flow__foot{margin:clamp(30px,4vh,50px) var(--gut) 0; max-width:78ch;
  font-size:14px; line-height:1.6; color:var(--on-paper-mute)}
@media (max-width:1040px){
  .flow__track{grid-template-columns:1fr; gap:0; padding-left:calc(var(--gut) + 46px)}
  .flow__rail{left:calc(var(--gut) + 17px); right:auto; top:34px; bottom:34px;
    width:2px; height:auto}
  .flow__rail i{width:100%; height:100%; transform:scaleY(var(--p,0)); transform-origin:50% 0}
  .flow__s{padding:0 0 clamp(26px,3.6vh,40px) 0; text-align:left}
  .flow__s:last-child{padding-bottom:0}
  .flow__s::before{left:-46px; top:0}
  .flow__s::after{left:-33px; top:13px}
  .flow__n,.flow__s h3,.flow__s p,.flow__who{text-align:left}
  .flow__s h3{margin-top:8px}
}

/* ====================================================== antes e depois
   Duas fileiras que se leem de cima para baixo: o dia de hoje e o dia com o
   MakeSDR. A de cima fica esmaecida e riscada no marcador; a de baixo é a
   mesma grade, acesa. O paralelo é a persuasão — por isso as duas têm
   exatamente a mesma medida e a mesma contagem de itens. */
.shift{position:relative; z-index:2; background:var(--paper); color:var(--on-paper);
  padding-block:clamp(62px,8.2vh,110px)}
.shift__head{padding-inline:var(--gut)}
.shift__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.6vw,58px); line-height:1.02;
  letter-spacing:-.038em; max-width:22ch; text-wrap:balance}
.shift__row{margin:clamp(34px,4.6vh,62px) var(--gut) 0; padding:clamp(24px,2.8vw,40px);
  border-radius:var(--r-card); border:1px solid rgba(22,22,22,.1)}
.shift__row + .shift__row{margin-top:clamp(12px,1.6vh,18px)}
.shift__row--now{background:rgba(22,22,22,.035)}
.shift__row--next{background:var(--ink); color:var(--on-ink); border-color:transparent}
.shift__tag{display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--on-paper-mute)}
.shift__tag::before{content:""; width:7px; height:7px; border-radius:50%;
  background:rgba(22,22,22,.3)}
.shift__row--next .shift__tag{color:rgba(255,253,248,.6)}
.shift__row--next .shift__tag::before{background:var(--acc)}
.shift__g{margin-top:clamp(20px,2.6vh,30px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,34px)}
.shift__g p{font-size:clamp(15px,1.15vw,18px); line-height:1.45; letter-spacing:-.012em}
.shift__row--now .shift__g p{color:var(--on-paper-mute)}
.shift__row--next .shift__g p{color:var(--on-ink)}
.shift__row--next .shift__g p b{color:var(--acc); font-weight:400}
@media (max-width:1000px){ .shift__g{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .shift__g{grid-template-columns:1fr; gap:12px} }

/* ========================================================== ecossistema
   Co-branding com função, não selo decorativo: o Social Leads é a porta de
   entrada de um conjunto, e o conjunto precisa aparecer inteiro para a
   promessa de "cresce com você" ter onde crescer. */
.eco{position:relative; z-index:2; background:var(--ink-2); color:var(--on-ink);
  padding-block:clamp(62px,8.2vh,110px)}
.eco__head{padding-inline:var(--gut); display:grid; gap:clamp(18px,3vw,60px);
  grid-template-columns:minmax(0,1fr) minmax(0,40ch); align-items:end}
.eco__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.5vw,56px); line-height:1.02;
  letter-spacing:-.035em; max-width:20ch; text-wrap:balance}
.eco__sub{font-size:15px; line-height:1.6; color:var(--on-ink-mute)}
.eco__g{margin-top:clamp(36px,5vh,66px); padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px)}
.eco__c{position:relative; padding:clamp(24px,2.5vw,34px); border-radius:var(--r-card);
  background:rgba(255,255,255,.035); border:1px solid var(--card-line);
  display:flex; flex-direction:column; min-height:100%;
  transition:background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease)}
.eco__c:hover{background:rgba(255,255,255,.06); border-color:rgba(255,122,26,.34); transform:translateY(-3px)}
.eco__c[data-here="1"]:hover{border-color:rgba(101,162,61,.55)}
.eco__c[data-here="1"] .eco__tag{color:var(--acc)}
.eco__c[data-here="1"]{background:rgba(101,162,61,.12); border-color:rgba(101,162,61,.45)}
.eco__tag{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--orange)}
.eco__c h3{margin-top:14px; font-weight:400; font-size:clamp(21px,1.8vw,28px);
  line-height:1.08; letter-spacing:-.03em}
.eco__c p{margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--on-ink-mute)}
.eco__c .lbl{margin-top:auto; padding-top:22px; color:var(--on-ink-mute)}
@media (max-width:1000px){ .eco__g{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .eco__g{grid-template-columns:1fr} .eco__head{grid-template-columns:1fr} }

/* ========================================================== depoimentos */
.dep{position:relative; z-index:2; background:var(--paper); color:var(--on-paper);
  padding-block:clamp(62px,8.2vh,110px)}
.dep__head{padding-inline:var(--gut)}
.dep__h{margin:14px 0 0; font-weight:400; font-size:clamp(30px,3.6vw,58px);
  line-height:1.02; letter-spacing:-.038em; max-width:24ch; text-wrap:balance}
/* Duas colunas: a citacao manda e a nota editorial fecha a direita. Com uma
   coluna so, a caixa de largura cheia ficava com metade vazia, que e o que faz
   um depoimento parecer banner sem conteudo. */
.dep__big{position:relative; margin:clamp(42px,5.6vh,80px) var(--gut) 0;
  padding:clamp(34px,4.4vw,64px) clamp(26px,3.4vw,56px);
  border-radius:var(--r-card); background:var(--paper-3);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(24px,4vw,72px); align-items:end}
.dep__big blockquote{grid-column:1; margin:0}
.dep__side{grid-column:2; align-self:end; max-width:40ch;
  padding-left:clamp(18px,2vw,30px); border-left:1px solid rgba(22,22,22,.16);
  font-size:clamp(14px,1.05vw,16px); line-height:1.6; color:var(--on-paper-mute)}
.dep__big blockquote p{margin:0; font-weight:400;
  font-size:clamp(21px,2.5vw,38px); line-height:1.16; letter-spacing:-.032em;
  max-width:30ch; text-wrap:balance}
.dep__big blockquote em{font-style:normal; color:var(--acc-deep)}
.dep__big figcaption{grid-column:1; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px clamp(12px,1.6vw,26px); margin-top:clamp(22px,3vh,38px)}
.dep__nome{font-size:16px; font-weight:700; letter-spacing:-.01em}
.dep__emp{font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-paper-mute)}
.dep__l{margin:clamp(36px,5vh,64px) 0 0; padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(28px,4vw,76px); row-gap:clamp(32px,4.4vh,54px)}
.dep__i{margin:0; display:flex; flex-direction:column}
.dep__i blockquote{margin:0}
.dep__i blockquote p{margin:0; font-size:clamp(15px,1.2vw,18px); line-height:1.45;
  letter-spacing:-.012em}
.dep__i figcaption{margin-top:16px; display:flex; flex-direction:column}
.dep__n{font-size:15px; letter-spacing:-.01em}
.dep__e{margin-top:3px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-paper-mute)}
.dep__foot{margin:clamp(34px,4.4vh,56px) 0 0; padding-inline:var(--gut);
  max-width:78ch; font-size:14px; line-height:1.6; color:var(--on-paper-mute)}
@media (max-width:900px){
  .dep__l{grid-template-columns:1fr; row-gap:28px}
  .dep__big{grid-template-columns:1fr; align-items:start}
  .dep__side{grid-column:1; padding-left:0; padding-top:20px; max-width:none;
    border-left:0; border-top:1px solid rgba(22,22,22,.16)}
}

/* ==================================================== banda de chamada */
.ent{position:relative; z-index:2; background:var(--acc); color:#08150a;
  padding-block:clamp(58px,7.5vh,96px)}
.ent__in{padding-inline:var(--gut); display:grid; align-items:end;
  grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,80px)}
.ent__h{margin:0; font-weight:400; font-size:clamp(36px,5.4vw,92px);
  line-height:.96; letter-spacing:-.05em; max-width:16ch}
.ent__sub{margin:clamp(18px,2.4vh,28px) 0 0; max-width:54ch;
  font-size:clamp(14px,1.05vw,16px); line-height:1.55; color:rgba(5,21,7,.76)}
.ent__cta{white-space:nowrap}
.ent .lnk--hot{background:#08150a; color:var(--paper)}
.ent .lnk--hot:hover{background:#13270f}
@media (max-width:900px){
  .ent__in{grid-template-columns:1fr; gap:26px; align-items:start;
    justify-items:center; text-align:center}
  .ent__h{max-width:14ch; margin-inline:auto}
  .ent__sub{margin-inline:auto}
}

/* =========================================================== perguntas */
.qa{display:grid; gap:clamp(26px,3.6vh,52px)}
.qa__i{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,3vw,56px)}
.qa__i h3{font-size:var(--d4); line-height:1.14; font-weight:400; letter-spacing:-.03em}
.qa__i p{font-size:14.5px; line-height:1.62; color:var(--on-paper-mute); max-width:62ch}
.qa__i p + p{margin-top:10px}
@media (max-width:900px){ .qa__i{grid-template-columns:1fr; gap:10px} }

/* ========================================================== fechamento */
.close{position:relative; background:var(--ink); overflow:clip; padding-block:clamp(70px,9.5vh,126px) 0}
.close__grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(30px,5vw,90px);
  align-items:start}
@media (max-width:900px){ .close__grid{grid-template-columns:1fr} }
.close__pts{margin-top:clamp(26px,3.4vh,40px); display:grid; gap:12px; max-width:44ch}
.close__pts li{position:relative; padding-left:24px; font-size:15px; line-height:1.5;
  color:var(--on-ink-mute)}
.close__pts li::before{content:""; position:absolute; left:0; top:.6em; width:12px; height:2px;
  background:var(--acc)}
.form{display:grid; gap:clamp(16px,2vh,24px); margin-top:6px}
.f{display:grid; gap:7px}
.f label{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-ink-mute)}
.f input,.f select,.f textarea{
  width:100%; padding:11px 2px; background:none; border:0;
  border-bottom:1px solid var(--on-ink-faint); color:var(--on-ink);
  font-family:var(--sans); font-size:16px; border-radius:0;
  transition:border-color .35s var(--ease);
}
.f textarea{resize:vertical; min-height:64px}
.f input:hover,.f select:hover,.f textarea:hover{border-color:rgba(255,253,248,.3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--acc)}
.f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-ink-mute) 50%),
                   linear-gradient(135deg,var(--on-ink-mute) 50%,transparent 50%);
  background-position:calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size:5px 5px; background-repeat:no-repeat}
.f select option{background:var(--ink-2); color:var(--on-ink)}
.f .e{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#FF8B78; min-height:1em}
.f[data-bad="1"] input,.f[data-bad="1"] select{border-color:#FF8B78}
.form__end{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.form__ok{display:none; padding:clamp(20px,2.6vh,32px) 0; border-top:1px solid rgba(101,162,61,.38)}
.form__ok b{display:block; font-family:var(--display); font-weight:500; font-size:26px;
  color:var(--acc-lift); letter-spacing:-.03em}
.form__ok p{margin-top:8px; font-size:14px; color:var(--on-ink-mute)}
.form__ok a{color:var(--acc); border-bottom:1px solid rgba(101,162,61,.42)}
[data-state="done"] .form__ok{display:block}
[data-state="done"] .form__in{display:none}
.form[data-state="sending"] .pill--solid{opacity:.55; pointer-events:none}

/* ============================================================== rodapé */
.foot{position:relative; background:var(--ink); padding-top:clamp(50px,7vh,96px); overflow:clip}
.foot__grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);
  gap:clamp(24px,3vw,54px); align-items:start}
@media (max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr} }
.foot__pair{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em}
.foot__pair dt{color:var(--on-ink-mute)}
.foot__pair dd{margin:0}
.foot__soc{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-top:14px; font-size:13px}
.foot__lines{position:relative; margin-top:clamp(28px,4.2vh,58px); height:clamp(130px,17vh,210px)}
.foot__lines canvas{position:absolute; inset:0; width:100%; height:100%}
.foot__lock{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-block:24px; border-top:1px solid var(--on-ink-faint)}
.foot__lock img{width:clamp(110px,10vw,140px); height:auto}
.foot__lock span{font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-ink-mute)}
.foot__lock .make{width:clamp(84px,7vw,104px)}
.foot__legal{display:flex; flex-wrap:wrap; gap:8px 24px; padding-block:24px;
  border-top:1px solid var(--on-ink-faint);
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,253,248,.3)}

/* ============================================================== reveals */
.rv{opacity:0}
.rv.in{opacity:1; transition:opacity 1s var(--ease)}
.ln{display:block; overflow:clip; padding-block:.06em .20em; margin-block:-.06em -.20em}
.ln > *{display:block; will-change:transform}

@media (prefers-reduced-motion:reduce){
  .rv,.rv.in{opacity:1;transition:none}
  .ln > *{transform:none !important}
  .decl__light{display:none}
  .decl{background:var(--paper); min-height:0; height:0}
}
.pin-spacer{max-width:100%; overflow:clip}

/* ---------------------------------------- ajustes de toque e leitura
   Bloco no FIM do arquivo de propósito: as regras de rótulo com font-size de
   9 e 10px aparecem antes e têm a mesma especificidade, então quem vence é a
   última. Um @media colocado acima delas seria simplesmente ignorado. */
@media (max-width:900px){
  .lbl,.f label,.f .e,.foot__pair dt,.foot__pair dd,.lock__by span{font-size:12px; letter-spacing:.07em}
  .hdr .pill,.form__end .pill,.hero__stats small,.ops__i small,.eco__tag,
  .foot__legal span,.foot__lock span,.flow__who,.hero__note{font-size:12px; letter-spacing:.05em}
  .turn__n,.turn__when,.flow__n,.shift__tag,.leak__cost{font-size:12px; letter-spacing:.08em}
  .foot a,.lnk{padding-block:7px}
  /* A peça fica fixa atrás do hero. O respiro embaixo é o palco dela, mas a
     coluna de conversa é mais baixa que a grade 3x3 da referência: com 26vh
     sobrava uma faixa morta entre o painel de números e a seção seguinte. */
  .hero{min-height:auto; padding-block:calc(var(--rail) + 22px) clamp(88px,15vh,170px)}
  .hero__ui{position:relative; inset:auto; min-height:0; padding-inline:var(--gut)}
  .plane__in{position:relative; inset:auto; transform:none !important}
  .hero__head{position:relative; left:auto; top:auto; right:auto; max-width:none; text-align:center}
  .hero__cycle{display:inline-flex; justify-content:center}
  .hero__sub{margin-inline:auto}
  .hero__links{justify-content:center}
  .hero__stats{align-self:center; margin-inline:auto; text-align:center}
  .decl{min-height:12dvh}
  .scene{padding-block:clamp(46px,6.2vh,86px)}
  .scene__lbl{margin-bottom:16px}
}
@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr}
  /* inline-flex dimensiona pelo conteudo e transbordava a goteira: o rotulo
     da segunda coluna saia pela direita da tela */
  .hero__stats{display:flex; flex-direction:column; width:100%; max-width:380px}
  .hero__stats div{padding:18px 22px}
  .hero__stats div + div{border-left:0; border-top:1px solid var(--card-line)}
}