/* ── hero seda + celular (padrão da Home do site Tiix: silk-phone) ──
   Wrap 100vh SEM overflow:hidden — o vídeo da mão pode ultrapassar a base.
   O .join-phone-hero interno tem overflow:hidden p/ o shader não vazar. */
.join .page-header{position:absolute;inset:0 0 auto;z-index:10}
/* nav escura sobre o hero claro em qualquer largura (era só desktop) */
.join .page-header--light{color:var(--red)}
.join .page-header--light .page-logo{filter:none}
.join-hero-wrap{
  position:relative;
  height:100vh;
  height:100svh;
  /* dvh por último (pedido do Lucas 2026-07-28): no Safari iOS a barra de
     endereço soma/some sozinha (autoplay, primeiro scroll) — com só svh
     (fixo no tamanho "com barra"), assim que a barra some o viewport real
     fica maior que o hero, e a seção seguinte "vaza" por baixo dele bem
     no começo do scroll (parecia o celular encolhendo pra debaixo do
     texto). dvh acompanha o viewport visível em tempo real. */
  height:100dvh;
}
/* linha fina visível entre o fim do hero pinado (190vh no desktop) e a
   seção seguinte (pedido do Lucas 2026-07-28) — arredondamento de
   sub-pixel no fim do pin/sticky deixa uma fresta de 1px. Como as duas
   áreas são vermelho da mesma família, um overlap negativo cobre a
   fresta sem gerar diferença visível. */
.join .strategy{margin-top:-2px}
.join-phone-hero{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#fbf6f5;
}
/* seda/overlay escuros ficam fora em qualquer largura (pedido do Lucas
   2026-07-28: hero claro igual ao desktop também no mobile) — quem pinta
   o fundo agora é a camada .jp-grad logo abaixo. */
.jp-silk,.jp-overlay{display:none}
/* camada de fundo claro, sempre visível (antes só existia no desktop):
   no desktop o JS reescreve seu background a cada tick de scroll (ver
   timeline() em junte-se.html); no mobile fica parado nesse tom claro. */
.jp-grad-zone{position:absolute;inset:0;z-index:1;pointer-events:none}
.jp-grad{position:sticky;top:0;height:100%;background:#fbf6f5}
.jp-content{
  position:absolute;
  top:0;right:0;bottom:0;left:46%;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:24px;
  text-align:center;
  padding:0 clamp(24px,5vw,76px) 0 0;
  color:#fff;
}
.jp-content h1{
  margin:0;
  max-width:14ch;
  font-size:clamp(38px,4.2vw,64px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.02em;
}
.jp-content p{
  margin:0;
  max-width:30rem;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.6;
  font-weight:300;
  color:rgba(255,255,255,.7);
}
.jp-content h1,.jp-content p{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.jp-content p{transition-delay:140ms}
.jp-content.is-ready h1,.jp-content.is-ready p{opacity:1;transform:translateY(0)}
.jp-content.is-ready p{opacity:1}
.jp-scroll-cue{display:none}
.jp-scroll-target{display:block;position:relative;top:-2px}
/* ── celulares 3D (three.js, js/tiix-phones-3d.js) dentro do hero ──
   Full-bleed: a cena pinta o fundo light (silk próprio) e a sombra dos
   celulares tem espaço sem cortar; a câmera é deslocada no init p/ os
   celulares ficarem à esquerda. !important porque o script aplica
   position:relative e height:100vh inline no host. */
.tiix-phones-3d{
  position:absolute !important;
  height:auto !important;
  inset:0;
  z-index:2;
  /* ligada também no mobile (pedido do Lucas 2026-07-28) — antes era
     display:none abaixo de 768px e o fallback plano em CSS assumia; a cena
     3D roda em qualquer largura (o script já define a altura do host via
     JS), então o gate por viewport saiu daqui. */
  display:block;
  pointer-events:none;
}
/* .tiix-phones dobrado p/ vencer o display:flex do bloco base abaixo — a
   cena 3D substitui esse fallback em qualquer largura agora. */
.tiix-phones.tiix-phones--hero{display:none}
@media (min-width:768px){
  /* animação amarrada ao scroll: o wrap vira a pista e o visual do hero
     fica pinado; o host 3D cobre a pista inteira (inset:0) — é da altura
     dele que o script tira o progresso 0→1. Era 260vh; reduzido a pedido
     do Lucas 2026-07-29 — saída do texto/celulares/seção estava lenta
     (a pista mais curta acelera toda a coreografia proporcionalmente,
     já que os cortes em timeline() no HTML são frações 0→1 desse valor). */
  .join .join-hero-wrap{height:190vh}
  /* sticky cria stacking context: o hero (texto) sobe p/ z3 acima do canvas
     (host z2) e fica transparente — quem pinta o fundo light é a cena */
  .join .join-phone-hero{position:sticky;top:0;height:100svh;z-index:3;background:transparent}
  /* overflow-x:hidden global (pages.css) quebra position:sticky; clip
     corta igual sem criar scroll container — escopado só a esta página */
  html:has(body.join){overflow-x:clip}
  body.join{overflow-x:clip}
  /* tempo 2 (scroll): degradê da home sobe do rodapé; texto e botão
     entram por cima dele, guiados pela timeline (opacity/transform inline) */
  /* texto ENTRA vermelho (sobre o fundo claro); o JS interpola p/ branco
     conforme o degradê vermelho o alcança */
  .join .jp-content{
    left:0;
    color:var(--red);
    justify-content:flex-end;
    align-items:flex-start;
    text-align:left;
    gap:14px;
    padding:0 clamp(40px,8vw,120px) clamp(28px,4vh,48px);
  }
  .join .jp-content h1{
    width:min(100%,742px);
    max-width:none;
    font-size:54px;
  }
  @media (min-width:840px){
    .join .jp-content h1{white-space:nowrap}
  }
  @media (min-width:840px) and (max-width:1024px){
    .join .jp-content{padding-right:40px;padding-left:40px}
    .join .jp-content h1{width:100%}
  }
  .join .jp-content p{max-width:42rem}
  .join .jp-content p{color:rgba(135,19,18,.75)}
  .join .jp-cta{display:inline-flex;margin-top:10px;pointer-events:auto}
  /* correção rápida (pedido do Lucas 2026-07-28): a timeline de scroll que
     ia interpolar cor do texto + subir o degradê vermelho (ver comentários
     acima) nunca foi implementada — a regra antiga deixava h1/p/cta em
     opacity:0 pra sempre, um bug visível (nada aparecia no desktop). Por
     ora título/descrição/botão só ficam visíveis de imediato, igual ao
     fallback de reduced-motion logo abaixo. A timeline completa (gradiente
     + interpolação de cor) fica pendente como tarefa maior à parte. */
  .join .jp-content h1,.join .jp-content p,.join .jp-cta{opacity:0}
}
/* botão do hero só existe no desktop */
.jp-cta{display:none}
/* reduced-motion: sem timeline de scroll — scrim estático + texto visível */
@media (prefers-reduced-motion:reduce){
  .join .jp-content h1,.join .jp-content p,.join .jp-cta{opacity:1 !important;transform:none !important}
  .join .jp-grad{background:#fbf6f5 !important}
}
/* ── 3 celulares (animação estilo C6) dentro do hero ──
   Central sobe → laterais saem de trás dele girando e abrem pros lados.
   No desktop foi substituído pela cena 3D acima; segue ativo no mobile. */
.tiix-phones--hero{
  position:absolute;
  top:0;bottom:0;left:0;
  width:54%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 0 24px;
  pointer-events:none;
}
.tiix-phones__stage{
  position:relative;
  width:min(560px,46vw);
  height:clamp(400px,66vh,640px);
  perspective:2400px;
  transform-style:preserve-3d;
}
.tph{
  position:absolute;top:50%;left:50%;
  width:clamp(150px,13.5vw,220px);
  aspect-ratio:300/640;
  background:linear-gradient(145deg,#54545b 0%,#2a2a2e 42%,#17171a 100%);
  border-radius:14%/6.6%;
  padding:2.6%;
  box-shadow:0 34px 70px -24px rgba(20,20,25,.45),0 0 0 1.4px rgba(0,0,0,.18) inset;
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
.tph__island{
  position:absolute;top:3.1%;left:50%;transform:translateX(-50%);
  width:30%;height:3.3%;min-height:15px;background:#000;
  border-radius:40px;z-index:5;
}
.tph__screen{
  width:100%;height:100%;
  border-radius:11.5%/5.4%;
  overflow:hidden;background:#fff;position:relative;
}

/* ---- tela recriada (Meus pagamentos) ---- */
.tscr{position:absolute;inset:0;display:flex;flex-direction:column;
  background:#fff;color:#1c1c1e;container-type:inline-size;
  font-family:'Outfit',system-ui,sans-serif}
.tscr__status{display:flex;justify-content:space-between;align-items:center;
  padding:6% 8% 2%;font-size:3.6cqw;font-weight:700;color:#000}
.tscr__icons{display:inline-flex;align-items:center;gap:1.5cqw;color:#000}
.tscr__icons svg{height:3cqw;width:auto;display:block;fill:#000}
.tscr__head{display:flex;align-items:center;justify-content:center;position:relative;
  padding:1% 8% 3%;font-size:5cqw;font-weight:700}
.tscr__chev{position:absolute;left:8%;font-size:6cqw;font-weight:400}
.tscr__body{flex:1;background:#F5F5F8;padding:5% 6%;overflow:hidden}
.tscr__title{font-size:5.4cqw;font-weight:900}
.tscr__sub{font-size:2.9cqw;color:#8a8f98;margin:1.2% 0 5%}
.tscr__cards{display:grid;grid-template-columns:1fr 1fr;gap:3.5%}
.tcard{background:#fff;border-radius:4cqw;padding:4.5% 5%}
.tcard__label{font-size:2.7cqw;color:#9aa0a8}
.tcard__row{display:flex;align-items:center;justify-content:space-between;margin-top:3%}
.tcard__num{font-size:6cqw;font-weight:900;letter-spacing:-.02em}
.tcard__badge{font-size:2.3cqw;font-weight:700;padding:1% 2.4%;border-radius:10cqw}
.tbadge--down{color:#e0453d;background:#fde6e5}
.tbadge--up{color:#17a866;background:#dff5ea}
.tchart{background:#fff;border-radius:5cqw;margin-top:4%;padding:7% 5% 5%;
  display:flex;flex-direction:column;align-items:center}
.tdonut{position:relative;width:46cqw;height:46cqw;border-radius:50%;
  background:conic-gradient(#2f6bff 0 43%,#e23b3b 43% 57%,#29c17f 57% 77%,
    #f2b53b 77% 85%,#7c4dff 85% 92%,#4db6ff 92% 100%);
  -webkit-mask:radial-gradient(circle 14.5cqw at 50% 50%,transparent 98%,#000 100%);
          mask:radial-gradient(circle 14.5cqw at 50% 50%,transparent 98%,#000 100%)}
.tdonut__c{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.tdonut__n{font-size:6.5cqw;font-weight:900}
.tdonut__t{font-size:2.8cqw;color:#9aa0a8}
.tlegend{width:100%;margin-top:6%;display:grid;grid-template-columns:1fr 1fr;
  gap:3.5% 5%;font-size:3cqw}
.tlg{display:flex;align-items:center;gap:4%;color:#4a4f57}
.tlg i{width:3cqw;height:3cqw;border-radius:50%;flex:0 0 auto}

/* ===== camadas 3D + coreografia ===== */
.tph--center{z-index:3;width:clamp(160px,14.5vw,236px)}
.tph--left,.tph--right{z-index:1}
.tph--center{transform:translate(-50%,-50%) translateZ(40px) translateY(155px);opacity:0;
  transition:transform 1.25s cubic-bezier(.19,1,.22,1),opacity .9s ease}
.tph--left{transform:translate(-50%,-50%) translateZ(-130px) rotateY(-152deg) scale(.9);opacity:0;
  transition:transform 1.9s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.tph--right{transform:translate(-50%,-50%) translateZ(-130px) rotateY(152deg) scale(.9);opacity:0;
  transition:transform 1.9s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.is-in .tph--center{
  transform:translate(-50%,-50%) translateZ(40px) translateY(0);opacity:1;transition-delay:.15s}
.is-in .tph--left{
  transform:translate(-50%,-50%) translateZ(-130px) translateX(-98%) rotateY(28deg) scale(.94);
  opacity:1;transition-delay:1.35s}
.is-in .tph--right{
  transform:translate(-50%,-50%) translateZ(-130px) translateX(98%) rotateY(-28deg) scale(.94);
  opacity:1;transition-delay:1.35s}
@media (prefers-reduced-motion:reduce){
  .tph--center,.tph--left,.tph--right{transition:none}
  .is-in .tph--center,.is-in .tph--left,.is-in .tph--right{transition-delay:0s}
}
/* a seção seguinte (silk zone clara) precisa cobrir os 64px de overflow do vídeo */
.join-silk-zone{z-index:3}
@media (prefers-reduced-motion:reduce){
  .jp-content h1,.jp-content p{opacity:1;transform:none;transition:none}
  .jp-scroll-cue{animation:none}
}
@media (max-width:767px){
  /* mesmo esquema claro do desktop (pedido do Lucas 2026-07-28): fundo
     claro (.jp-grad acima) + texto vermelho, não branco */
  /* faixa vermelha no fim do hero (pedido do Lucas 2026-07-28): a .strategy
     não tem cor própria (herda o vermelho do body.join só onde nada mais
     pinta por cima) — no trecho em que ela sobrepõe o hero (margin-top
     negativo, abaixo), o que estava atrás era o creme claro do hero, e o
     título branco da .strategy perdia contraste. Aqui a própria .jp-grad
     já nasce vermelha nesse trecho final, então o título já entra sobre
     vermelho antes mesmo da sobreposição — sem precisar mexer no palco 3D
     nem na .strategy. Fica bem acima do chevron (que some do jeito dele). */
  .join-hero-wrap{
    min-height:780px;
    --jp-mobile-top:clamp(196px,27svh,244px);
    --jp-mobile-bottom:clamp(172px,24svh,214px);
  }
  .jp-grad{background:#fbf6f5}
  .jp-content{
    left:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    align-content:stretch;
    justify-items:center;
    padding:max(98px,calc(env(safe-area-inset-top) + 82px)) 24px
      max(76px,calc(env(safe-area-inset-bottom) + 62px));
    text-align:center;
    color:var(--red);
    pointer-events:none;
  }
  .jp-content h1{
    grid-row:1;
    align-self:start;
    max-width:17ch;
    font-size:clamp(30px,8.2vw,42px);
    text-wrap:balance;
  }
  .jp-content p{
    position:static;
    grid-row:3;
    align-self:end;
    width:auto;
    max-width:36ch;
    margin:0 auto;
    font-size:clamp(15px,4.35vw,17px);
    line-height:1.48;
    color:rgba(135,19,18,.82);
    text-wrap:pretty;
  }
  /* O canvas deixa de ocupar a mesma área dos textos. A câmera continua
     animando normalmente, mas dentro de um palco central dedicado. */
  .tiix-phones-3d{
    top:var(--jp-mobile-top);
    right:0;
    bottom:var(--jp-mobile-bottom);
    left:0;
  }
  .tiix-phones--hero{
    width:100%;
    top:auto;
    bottom:0;
    height:56%;
    padding:0 0 16px;
  }
  .tiix-phones__stage{width:92vw;height:clamp(300px,48vh,460px)}
  .tph{width:clamp(108px,26vw,170px)}
  .tph--center{width:clamp(120px,29vw,184px)}
  .is-in .tph--left{
    transform:translate(-50%,-50%) translateZ(-90px) translateX(-62%) rotateY(26deg) scale(.9)}
  .is-in .tph--right{
    transform:translate(-50%,-50%) translateZ(-90px) translateX(62%) rotateY(-26deg) scale(.9)}
  /* Aproxima a próxima seção sem alterar o palco usado pela câmera 3D
     (pedido do Lucas 2026-07-28: diminuir ainda mais o vazio entre a
     descrição e a seta — chevron e puxão da próxima seção sobem juntos,
     mesma distância entre eles, só mais perto do texto). */
  .join .strategy{
    position:relative;
    z-index:4;
    margin-top:0;
  }
  .jp-scroll-cue{
    position:absolute;
    left:50%;
    bottom:max(18px,env(safe-area-inset-bottom));
    z-index:5;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--red);
    opacity:.58;
    transform:translateX(-50%);
    animation:jp-cue-breathe 1.9s ease-in-out infinite;
  }
  .jp-scroll-cue svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .jp-scroll-cue:focus-visible{outline:2px solid var(--red);outline-offset:2px;opacity:1}
}
@keyframes jp-cue-breathe{
  0%,100%{transform:translate(-50%,0);opacity:.42}
  50%{transform:translate(-50%,5px);opacity:.72}
}
@media (max-width:359px){
  /* O título passa a três linhas nas telas mais estreitas. O subtítulo
     acompanha a compensação vertical aplicada à câmera dos celulares. */
  .join-hero-wrap{min-height:820px}
  .jp-content{
    padding-inline:18px;
  }
  .jp-content h1{font-size:clamp(28px,8.5vw,34px)}
}
.join-silk-zone{
  position:relative;
  overflow:hidden;
  background:#fbf6f5;
}
.join-silk-zone>canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.dashboard--silk-story{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:clamp(32px,5vw,84px);
  padding:clamp(90px,10vh,132px) clamp(24px,5vw,76px);
  text-align:left;
}
.dashboard__copy h1,
.dashboard__copy h2{
  margin:0;
  font-size:clamp(40px,4.6vw,72px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.02em;
  max-width:12ch;
}
.hl-word{display:inline-block;white-space:nowrap}
.hl-ch{
  display:inline-block;
  opacity:0;
  filter:blur(12px);
  transform:translateY(.4em);
  will-change:transform,opacity,filter;
}
.dashboard--silk-story.is-revealed .hl-ch{
  animation:join-ch-in 1.1s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes join-ch-in{
  to{opacity:1;filter:blur(0);transform:translateY(0)}
}
.dashboard__copy p{
  margin:26px 0 0;
  max-width:31rem;
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.55;
  font-weight:300;
  color:rgba(41,52,61,.72);
  opacity:0;
  transform:translateY(16px);
}
.dashboard--silk-story.is-revealed .dashboard__copy p{
  animation:join-sub-in .9s ease .55s both;
}
@keyframes join-sub-in{
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .hl-ch{opacity:1;filter:none;transform:none;animation:none}
  .dashboard__copy p{opacity:1;transform:none;animation:none}
  .dashboard--silk-story .dashboard-showcase{opacity:1;transform:none;transition:none}
}

.join-silk-zone .dashboard{
  position:relative;
  z-index:2;
  background:transparent;
}
.dashboard--silk-story .dashboard-showcase{
  width:100%;
  min-width:0;
  opacity:0;
  transform:translate3d(56px,32px,0) scale(.97);
  transition:opacity 1.15s ease .2s,transform 1.35s cubic-bezier(.22,.9,.3,1) .2s;
}
.dashboard--silk-story.is-revealed .dashboard-showcase{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.dashboard{padding-top:72px;padding-bottom:72px}
.dashboard h2{margin-bottom:54px;font-size:clamp(40px,3.4vw,54px);line-height:1.08}
.dashboard-showcase{
  width:min(1160px,94vw);
  margin-inline:auto;
  display:block;
}
.dashboard-screen{
  width:100%;
  margin-inline:auto;
  aspect-ratio:1.82;
  overflow:hidden;
  border:18px solid #1d1d20;
  border-radius:18px;
  background:#f7f7fb;
  box-shadow:0 24px 34px rgba(25,33,61,.2),0 -18px 30px rgba(25,33,61,.13);
}

@media(min-width:768px) and (max-width:1199px){
  .dashboard--silk-story{
    grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
    gap:32px;
    padding-inline:36px;
  }
  .dashboard__copy h1,
  .dashboard__copy h2{font-size:clamp(42px,5.2vw,60px)}
  .dashboard-screen{border-width:12px}
}
.dashboard .dashboard__preview{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
}
.dashboard h3{margin-top:50px;font-size:30px}
.dashboard>p{margin:14px auto 0;max-width:820px;font-size:clamp(20px,2vw,29px);line-height:1.45}
/* ── services-list + iMac interativo ─────────────────────────────────
   No desktop, o palco ocupa exatamente uma viewport. O iMac usa toda a
   altura restante depois do título e dos respiros, sem cortar o chassi. */
.laptop--services{
  position:relative;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  background:var(--white);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:clamp(92px,12vh,120px) 12px clamp(12px,2vh,20px);
}
/* Chassi fixo e tela intercambiável em duas imagens empilhadas: somente o
   conteúdo do display faz crossfade quando o serviço ativo muda. */
.laptop-stage{
  position:relative;
  flex:0 0 auto;
  /* 1492 / 1054 = 1.4156. A altura disponível desconta 140px reservados
     ao título e aos respiros; convertida pela proporção, vira a largura
     máxima segura do iMac para qualquer viewport desktop. */
  width:min(1440px,98vw,calc(141.56svh - 198px));
}
.laptop-stage__chassis{position:relative;z-index:2;width:100%;height:auto;display:block;pointer-events:none}
.laptop-stage__screen{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;transition:opacity .18s ease}
.laptop-services{
  position:static;
  width:min(1060px,92vw);
  color:var(--red);
}
.laptop-services h2{
  position:absolute;
  top:clamp(32px,4vw,56px);
  left:50%;
  width:min(575px,calc(100% - 48px));
  transform:translateX(-50%);
  margin:0;
  text-align:center;
  font-size:45px;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.01em;
  /* halo claro (não sombra escura): o texto cai sobre a vinheta escura
     do mockup — sombra escura some, precisa de luz atrás das letras */
  text-shadow:0 1px 3px rgba(255,255,255,.9),0 2px 18px rgba(255,255,255,.6);
}
.laptop-services ul{
  min-height:170px;
  margin:0;
  padding:0;
  list-style:none;
  display:block;
}
/* Conteúdo preservado para reativação futura; por enquanto, somente o
   título e a descrição de cada serviço ficam fora da apresentação. */
#laptopServicos{display:none}
.laptop-services li{display:none;border:0}
.laptop-services li.is-active{display:block}
.laptop-services button{
  appearance:none;
  background:none;
  border:0;
  width:100%;
  text-align:center;
  cursor:default;
  font:inherit;
  padding:0;
  position:relative;
  font-size:inherit;
  font-weight:300;
  color:rgba(135,19,18,.82);
  text-shadow:0 1px 3px rgba(255,255,255,.9),0 2px 14px rgba(255,255,255,.55);
  transition:color .18s ease;
}
.laptop-service__name{
  display:block;
  font-size:clamp(30px,3.2vw,46px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
}
.laptop-service__desc{
  display:block;
  max-width:58ch;
  margin:18px auto 0;
  color:rgba(135,19,18,.72);
  font-size:clamp(18px,1.55vw,24px);
  font-weight:300;
  line-height:1.55;
  transition:color .18s ease;
}
.laptop-services button:hover .laptop-service__desc,
.laptop-services button.is-active .laptop-service__desc{color:rgba(135,19,18,.82)}
.laptop-services li.is-active>button{animation:laptopServiceIn .62s cubic-bezier(.22,1,.36,1) both}
@keyframes laptopServiceIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.laptop-services button::before{display:none}
.laptop-services button:hover{color:var(--red)}
.laptop-services button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.laptop-services button.is-active{color:var(--red);font-weight:500}
.laptop-service-dots{
  position:absolute;
  left:50%;
  bottom:clamp(28px,4vh,48px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transform:translateX(-50%);
}
.laptop-service-dots button{
  width:10px;
  height:10px;
  padding:0;
  border:1px solid rgba(135,19,18,.75);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:width .24s ease,background .24s ease,border-color .24s ease;
}
.laptop-service-dots button.is-active{
  width:28px;
  border-color:var(--red);
  border-radius:999px;
  background:var(--red);
}
.laptop-service-dots button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

.strategy-card>span,
.capabilities .quote>span{
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
}

/* Estratégia: quatro módulos com a mesma geometria, independentemente da
   quantidade de linhas do título ou do texto. */
.strategy-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  align-items:stretch;
}
.strategy-card{
  width:100%;
  height:100%;
  min-height:380px;
  display:grid;
  grid-template-rows:auto minmax(108px,auto) 1fr;
  align-content:start;
}
.strategy-card h3{
  margin:34px 0 22px;
  font-size:clamp(25px,2vw,28px);
}
.strategy-card p{margin:0}
.strategy-dots{display:none}
.capabilities .quote{
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:center;
}
.capabilities .quote>span.quote__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:120px;
  height:120px;
  margin-bottom:auto;
  color:var(--red);
}
.capabilities .quote__icon svg{width:120px;height:120px;stroke-width:1.1}
.capabilities .quote h3{
  margin:18px 0 8px;
  color:#29343d;
  font-size:23px;
  font-weight:500;
}
.capabilities .quote p{
  margin:0;
  color:#5f6872;
  font-size:16px;
  line-height:1.5;
}

@media(max-width:767px){
  .join-hero-video__stage{height:520px}
  .jv-copy{min-height:0;padding:40px 24px 48px}
  .laptop--services{height:auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 20px 34px}
  .laptop-stage{
    width:calc(100% + 84px);
    max-width:none;
    margin:0 -42px;
  }
  .laptop-services{width:100%;text-align:center}
  .laptop-services h2{
    position:static;
    width:auto;
    transform:none;
    margin:0 auto 24px;
    text-align:center;
    font-size:clamp(30px,10vw,38px);
  }
  .laptop-services ul{min-height:104px;margin:0;display:block}
  .laptop-services li{display:none;border:0}
  .laptop-services li:first-child{border:0}
  .laptop-services li.is-active{display:block}
  .laptop-services button{
    padding:10px 8px;
    text-align:center;
    font-size:19px;
    font-weight:500;
    pointer-events:none;
  }
  .laptop-service__name{font-size:22px;line-height:1.2}
  .laptop-service__desc{max-width:30ch;margin:7px auto 0;font-size:14px;line-height:1.4}
  .laptop-services button::before{display:none}
  .laptop-service-dots{
    position:static;
    gap:10px;
    transform:none;
    margin-top:18px;
  }
  .laptop-service-dots button{
    width:9px;
    height:9px;
    padding:0;
    border:1px solid var(--red);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    pointer-events:auto;
    transition:width .24s ease,background .24s ease,border-color .24s ease;
  }
  .laptop-service-dots button.is-active{
    width:24px;
    border-color:var(--red);
    border-radius:999px;
    background:var(--red);
  }
  .laptop-service-dots button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
  .dashboard--silk-story{
    min-height:100svh;
    grid-template-columns:1fr;
    gap:34px;
    padding:88px 20px 56px;
    text-align:center;
  }
  .dashboard__copy h1,
  .dashboard__copy h2{max-width:14ch;margin-inline:auto;font-size:clamp(36px,10vw,48px)}
  .dashboard__copy p{margin:18px auto 0;font-size:16px}
  .strategy-grid{
    overflow-y:hidden;
    scrollbar-width:none;
    scrollbar-color:transparent transparent;
    -ms-overflow-style:none;
  }
  .strategy-grid::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .strategy-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:24px;
  }
  .strategy-dots button{
    width:9px;
    height:9px;
    padding:0;
    border:1px solid rgba(255,255,255,.82);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    transition:width .24s ease,background .24s ease,border-color .24s ease;
  }
  .strategy-dots button.is-active{
    width:24px;
    border-color:#fff;
    border-radius:999px;
    background:#fff;
  }
  .strategy-dots button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
  .dashboard{padding-block:50px}
  .dashboard h2{margin-bottom:34px}
  .dashboard-showcase{width:100%}
  .dashboard-screen{grid-row:1;border-width:9px;border-radius:10px}
  .dashboard h3{margin-top:30px;font-size:25px}
  .dashboard>p{font-size:18px}
  .dashboard>p br{display:none}
}