/* ==========================================================
   Hyype · landing "taxa negativa" · /home
   Gerado por /gerar-design: Hero + Dobra 2 (demonstração da linguagem visual).
   Identidade "Cobalto e diagonal" (design/04-identidade.md, design/handoff/tokens.css).
   NÃO linkar o /style.css da raiz do site (template do framework: Inter + índigo).
   ========================================================== */

/* ---------- Fontes (self-hosted, variáveis) ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('/_shared/fonts/manrope-variable.woff2') format('woff2-variations'),
       url('/_shared/fonts/manrope-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/_shared/fonts/geist-variable.woff2') format('woff2-variations'),
       url('/_shared/fonts/geist-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Fallbacks com métricas ajustadas: reduzem o salto de layout enquanto a woff2 chega */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Segoe UI'), local('Arial');
  size-adjust: 103%;
  ascent-override: 104%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  src: local('Segoe UI'), local('Arial');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --cobalto: #0B2FD8;
  --cobalto-hover: #08229E;
  --selecao: #E4E9FF;
  --papel: #F7F5F0;
  --superficie: #FFFFFF;
  --borda: #E4E1DA;
  --tinta: #15161A;
  --sec: #6A6B72;
  --placeholder: #A2A3AA;

  --display: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --ui: 'Geist', 'Geist Fallback', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .6, .2, 1);

  --container: 1280px;
  --gutter: 16px;
  --margem: minmax(168px, 1fr);   /* coluna de margem (rótulos e sinalizadores) */
  --folha: minmax(0, 5fr);        /* coluna de conteúdo */
  --gap-colunas: 32px;
  --num-teto: 160px;              /* teto dos números do H1 */
}
@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }
@media (max-height: 760px) { :root { --num-teto: 120px; } }

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
strong { font-weight: 600; }
blockquote { quotes: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.num, .rs { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; }

/* ---------- Nav ---------- */
/* Barra fixa. No topo é papel sólido; rolando fica translúcida com desfoque.
   Sobre seção escura (dobra 5, fechamento) troca pra versão escura: classes postas pelo script inline. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.nav.is-rolada {
  background: rgba(247, 245, 240, .92);
  border-bottom-color: rgba(21, 22, 26, .08);
}
.nav.nav--escura {
  background: rgba(18, 18, 20, .92);
  border-bottom-color: rgba(255, 255, 255, .1);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav.is-rolada, .nav.nav--escura {
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
            backdrop-filter: saturate(1.4) blur(14px);
  }
  .nav.is-rolada { background: rgba(247, 245, 240, .72); }
  .nav.nav--escura { background: rgba(18, 18, 20, .6); }
}
.nav__logo img { transition: filter 150ms ease; }
.nav--escura .nav__logo img { filter: brightness(0) invert(1); }
.nav.is-rolada .nav__link {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--cobalto);
  color: #FFFFFF;
  font-weight: 600;
  transition: background-color 150ms ease;
}
.nav.is-rolada .nav__link:hover { background: var(--cobalto-hover); text-decoration: none; }
.nav.nav--escura .nav__link { background: #6280FF; color: #121214; }
.nav.nav--escura .nav__link:hover { background: #8FA4FF; }
section[id] { scroll-margin-top: 72px; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav__logo { display: block; }
.nav__logo img { width: 68px; height: 24px; }
.nav__link {
  font: 500 14px/1 var(--ui);
  color: var(--cobalto-hover);
  text-underline-offset: 3px;
}
.nav__link:hover { text-decoration: underline; }

/* ==========================================================
   DOBRA 1 · HERO
   ========================================================== */
.hero {
  background: var(--papel);
  padding-top: clamp(32px, 5vh, 56px);
  padding-bottom: 72px;
  min-height: 560px;
  overflow-x: clip;
}
.hero__grid {
  display: grid;
  grid-template-columns: var(--margem) var(--folha);
  column-gap: var(--gap-colunas);
  align-items: baseline;
}

/* Slot da VSL (futuro). Fica hidden até ter player. */
.hero__vsl {
  grid-column: 2;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
  background: #121214;
  margin-bottom: 32px;
}
.hero__vsl[hidden] { display: none; }
.hero--vsl { --num-teto: 120px; padding-top: 24px; }

/* O H1 é um extrato de duas linhas: rótulo | número */
.extrato {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--margem) var(--folha);
  column-gap: var(--gap-colunas);
  row-gap: 0;
  align-items: baseline;
  font-weight: 400;
}
@supports (grid-template-columns: subgrid) {
  .extrato { grid-template-columns: subgrid; }
}
.extrato__rotulo {
  font: 400 clamp(16px, 1.5vw, 22px) / 1.3 var(--ui);
  color: var(--tinta);
  text-align: right;
}
.extrato__rotulo--total { font-weight: 600; }
.extrato__num {
  font-family: var(--display);
  font-size: clamp(72px, 11vw, var(--num-teto));
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.extrato__num--normal { font-weight: 500; }
.extrato__num--total {
  font-weight: 800;
  border-top: 1px solid var(--borda);   /* fio de planilha, só sob os números */
  padding-top: 16px;
  margin-top: 16px;
}
.rs { font-size: .5em; }

/* O chip do ",27": único ponto de cor além do botão. Corte a 25° (tan 25° = 0,466) no lado esquerdo. */
.cents {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 0 .03em 0 .16em;
  color: var(--cobalto);
}
.cents::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0;
  top: .1em; bottom: -.04em;             /* chip ≈ 1,14em de altura */
  background: var(--selecao);
  clip-path: polygon(.53em 0, 100% 0, 100% 100%, 0 100%);   /* .53em = 0,466 × 1,14em */
}

/* Animação pós-carregamento: a célula é selecionada. Só com JS e sem reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-ready) .cents { color: var(--tinta); }
  html.js:not(.is-ready) .cents::before { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  html.js .cents::before { transition: clip-path 420ms var(--ease); }
  html.js .cents { transition: color 150ms ease 300ms; }
}

/* Texto do hero */
.hero__texto { grid-column: 2; max-width: 620px; margin-top: 32px; }
.hero__sub {
  font: 400 clamp(17px, 1.7vw, 22px) / 1.4 var(--ui);
  color: var(--tinta);
  text-wrap: pretty;
}
.lancamento {
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  font: 400 clamp(17px, 1.4vw, 19px) / 1.4 var(--ui);
  color: var(--sec);
}
.lancamento strong { font-weight: 600; color: var(--tinta); }
.tese {
  margin-top: 16px;
  border-left: 2px solid var(--tinta);
  padding-left: 16px;
  max-width: 34ch;
  font: 500 clamp(16px, 1.3vw, 18px) / 1.45 var(--ui);
  color: var(--tinta);
}
.cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  background: var(--cobalto);
  color: #FFFFFF;
  border-radius: 8px;
  font: 600 14px/1 var(--ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 150ms ease;
}
.cta:hover, .cta:active { background: var(--cobalto-hover); }
.micro { margin-top: 12px; font: 400 13px/1.45 var(--ui); color: var(--sec); }

/* ==========================================================
   DOBRA 2 · A CONTA QUE VOCÊ NUNCA FEZ
   ========================================================== */
.conta {
  background: var(--superficie);        /* folha branca sobre o papel do hero: é o divisor */
  border-top: 1px solid var(--borda);
  padding: 96px 0 112px;
  overflow-x: clip;                     /* clip, nunca hidden: hidden quebra o sticky */
}
.conta__grid {
  display: grid;
  grid-template-columns: var(--margem) var(--folha);
  column-gap: var(--gap-colunas);
  row-gap: 80px;
}
/* Sem sticky: vários rótulos no mesmo grid ficavam presos no mesmo ponto e se empilhavam no scroll */
.conta__margem {
  align-self: start;
  text-align: right;
}
.conta__folha { max-width: 100%; }
.conta__folha > :first-child { margin-top: 0; }

/* Marcador diagonal: o traço "/" do monograma, 22×34, único cobalto da seção */
.marcador {
  display: block;
  width: 22px;
  height: 34px;
  margin-left: auto;
  margin-bottom: 12px;
  background: var(--cobalto);
  clip-path: polygon(15.8px 0, 22px 0, 6.2px 100%, 0 100%);
}
.conta__h2 {
  font: 800 clamp(22px, 2vw, 28px) / 1.05 var(--display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--tinta);
  text-wrap: balance;
}
/* Barra de 2px sob o H2: estática por padrão; cresce com o scroll onde há animation-timeline */
.conta__h2::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 12px;
  background: var(--cobalto);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1px) 100%, 0 100%);
  transform-origin: left;
}
@supports (animation-timeline: view()) {
  .conta__h2::after {
    animation: crescer linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  @keyframes crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.conta__h3 {
  font: 700 clamp(18px, 1.5vw, 22px) / 1.2 var(--display);
  color: var(--tinta);
  text-wrap: balance;
}

/* Prosa e lista de setas */
.prosa {
  margin-top: 16px;
  max-width: 640px;
  font: 400 clamp(18px, 1.6vw, 21px) / 1.5 var(--ui);
  color: var(--tinta);
  text-wrap: pretty;
}
.prosa strong { font-weight: 600; }
.setas { margin-top: 16px; max-width: 640px; display: grid; row-gap: 10px; }
.setas li {
  display: grid;
  grid-template-columns: 28px 1fr;
  font: 400 clamp(18px, 1.6vw, 21px) / 1.5 var(--ui);
  color: var(--tinta);
}
.setas__seta { color: var(--sec); }
.setas strong { font-weight: 600; }

/* A tabela: rigor de extrato impresso. Sem zebra, sem radius, sem sombra, sem cor. */
.tabela-wrap { margin-top: 24px; max-width: 760px; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.tabela th, .tabela td { padding: 0 20px; vertical-align: middle; height: 88px; }
.tabela th:first-child, .tabela td:first-child { padding-left: 0; text-align: left; width: 36%; }
.tabela th:nth-child(2), .tabela td:nth-child(2) { text-align: right; width: 30%; }
.tabela th:nth-child(3), .tabela td:nth-child(3) { text-align: right; width: 34%; background: var(--papel); }  /* coluna calculada */
.tabela thead th {
  height: 44px;
  font: 500 13px/1 var(--ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sec);
  border-bottom: 1px solid var(--tinta);
}
.tabela tbody tr { border-bottom: 1px solid var(--borda); }
.tabela tbody tr:last-child { border-bottom: 1px solid var(--tinta); }
.tabela tbody th, .tabela tbody td {
  font: 500 clamp(20px, 2vw, 24px) / 1 var(--ui);
  color: var(--tinta);
}
/* Seletores com td para vencer a regra genérica da célula acima */
.tabela td.peso { font-family: var(--display); letter-spacing: -.02em; }
.tabela td.peso--normal { font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); color: var(--sec); }
.tabela td.peso--total  { font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); letter-spacing: -.03em; color: var(--tinta); }
.tabela__legenda {
  caption-side: bottom;
  position: relative;
  text-align: left;
  padding: 24px 0 0 40px;
  font: 700 clamp(22px, 2.4vw, 32px) / 1.2 var(--display);
  letter-spacing: -.02em;
  color: var(--tinta);
}
.tabela__legenda strong { font-weight: inherit; }
.tabela__legenda::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(24px + .1em);
  width: 22px;
  height: 34px;
  background: var(--cobalto);
  clip-path: polygon(15.8px 0, 22px 0, 6.2px 100%, 0 100%);
}

/* Coluna selecionada de planilha, para a tabela comparativa das próximas dobras (não usada aqui):
   .tabela .col-hyype { background: var(--selecao); box-shadow: inset 1px 0 var(--cobalto), inset -1px 0 var(--cobalto); }
   .tabela thead th.col-hyype { box-shadow: inset 1px 1px var(--cobalto), inset -1px 0 var(--cobalto); }
   .tabela tbody tr:last-child .col-hyype { box-shadow: inset 1px 0 var(--cobalto), inset -1px -1px var(--cobalto); } */

/* A soma: fio que se desenha e o maior número da página */
.soma__operacao {
  font: 500 clamp(18px, 1.8vw, 24px) / 1.3 var(--ui);
  color: var(--sec);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.soma__fio {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--tinta);
  margin: 20px 0 16px;
  transform-origin: left;
}
.soma__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .15em;
  color: var(--tinta);
}
.soma__total strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(60px, 13vw, 184px);
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.soma__total .rs { font-size: .5em; }
.soma__periodo { font: 500 clamp(18px, 2.4vw, 36px) / 1 var(--ui); color: var(--sec); }
.soma__total + .prosa { margin-top: 24px; }
.soma .prosa + .prosa { margin-top: 12px; }

.soma[data-aos] .soma__fio { transform: scaleX(0); transition: transform 450ms var(--ease) 150ms; }
.soma[data-aos].is-in .soma__fio { transform: scaleX(1); }
.no-js .soma[data-aos] .soma__fio { transform: none; transition: none; }   /* (0,4,0): vence .soma[data-aos] .soma__fio (0,3,0). Sem JS o html fica .no-js e o fio tem de aparecer */

/* Tese final da seção: marcador no lugar da régua */
.tese--marcador {
  position: relative;
  border-left: 0;
  padding-left: 40px;
  max-width: 640px;
  font: 700 clamp(20px, 2vw, 26px) / 1.3 var(--display);
  letter-spacing: -.02em;
}
.tese--marcador::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 34px;
  background: var(--cobalto);
  clip-path: polygon(15.8px 0, 22px 0, 6.2px 100%, 0 100%);
}

/* ==========================================================
   DOBRAS 3 EM DIANTE
   Reaproveitam a estrutura .conta (margem sticky + folha). As seções alternam
   folha branca e papel; .conta--papel é a variação em papel.
   ========================================================== */
.conta--papel { background: var(--papel); }
/* Títulos das dobras novas são mais longos que o da dobra 2: um degrau menor pra caber na margem */
.conta:not(#a-conta) .conta__h2 { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.12; }
.conta .tese--marcador { margin-top: 32px; }

/* Ficha de auditoria: um achado por bloco, separado por fio de planilha */
.ficha { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--borda); max-width: 640px; }
.ficha__titulo {
  font: 700 clamp(18px, 1.6vw, 22px) / 1.25 var(--display);
  letter-spacing: -.01em;
  color: var(--tinta);
}
.ficha__titulo + .prosa { margin-top: 8px; }

/* Citação de documento: corte seco, sem moldura, fonte de sistema */
.citacao {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--superficie);
  border-left: 2px solid var(--sec);
  max-width: 640px;
  font: 400 clamp(16px, 1.4vw, 18px) / 1.5 var(--ui);
  font-style: italic;
  color: var(--tinta);
}
.conta:not(.conta--papel) .citacao { background: var(--papel); }
.citacao strong { font-weight: 700; font-style: normal; }

/* Número de destaque (H1 visual das dobras): mesmo corpo da soma da dobra 2, um degrau abaixo */
.numerao {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .25em;
  color: var(--tinta);
}
.numerao strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 128px);
  line-height: .95;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.numerao__rotulo { font: 600 clamp(20px, 2.4vw, 32px) / 1.1 var(--display); letter-spacing: -.02em; }

/* "R$27 vira R$24 e pouco": duas linhas de extrato */
.vira { margin-top: 32px; max-width: 520px; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.vira__linha {
  display: grid;
  grid-template-columns: 5.5ch 1fr;
  align-items: baseline;
  column-gap: 16px;
  padding: 16px 0;
  font: 400 clamp(18px, 1.6vw, 21px) / 1.3 var(--ui);
}
.vira__linha + .vira__linha { border-top: 1px solid var(--borda); }
.vira dt { font: 500 clamp(24px, 2.4vw, 32px) / 1 var(--display); color: var(--sec); text-decoration: line-through; text-decoration-thickness: 1px; }
.vira dd strong { font: 800 clamp(24px, 2.4vw, 32px) / 1 var(--display); }
.vira + .prosa { margin-top: 20px; }

/* Lista de ✓ (entrega): mesmo desenho das setas, símbolo em tinta */
.checks .setas__seta { color: var(--tinta); font-weight: 700; }

/* Frase com peso de H2 no meio da folha */
.frase-h2 {
  max-width: 640px;
  font: 800 clamp(26px, 3vw, 40px) / 1.1 var(--display);
  letter-spacing: -.02em;
  color: var(--tinta);
  text-wrap: balance;
}
.frase-h2 + .prosa { margin-top: 20px; }
.nota { margin-top: 16px; max-width: 640px; font: 400 13px/1.45 var(--ui); font-style: italic; color: var(--sec); }

/* Tabela comparativa: "é planilha, não infográfico". A coluna Hyype é a coluna selecionada. */
.tabela--comp th:nth-child(3), .tabela--comp td:nth-child(3) { background: none; }
.tabela--comp thead th { height: auto; padding-top: 12px; padding-bottom: 12px; line-height: 1.25; vertical-align: bottom; }
.tabela--comp tbody th { font: 400 clamp(16px, 1.4vw, 18px) / 1.3 var(--ui); color: var(--sec); }
.tabela--comp tbody td { font-weight: 400; }
.tabela--comp td strong { font-weight: 700; }
.tabela--comp .tabela__total th { font-weight: 700; color: var(--tinta); }
.tabela--comp .tabela__total td { font: 600 clamp(24px, 2.6vw, 34px) / 1 var(--display); letter-spacing: -.02em; }
.tabela--comp .tabela__total td.col-hyype { font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); }
.tabela .col-hyype { background: var(--selecao); box-shadow: inset 1px 0 var(--cobalto), inset -1px 0 var(--cobalto); }
.tabela thead th.col-hyype { color: var(--cobalto-hover); box-shadow: inset 1px 1px var(--cobalto), inset -1px 0 var(--cobalto); }
.tabela tbody tr:last-child .col-hyype { box-shadow: inset 1px 0 var(--cobalto), inset -1px -1px var(--cobalto); }

/* Versão de duas colunas (Lá | Aqui) */
.tabela-wrap--curta { max-width: 520px; }
.tabela--duas th, .tabela--duas td,
.tabela--duas th:first-child, .tabela--duas td:first-child,
.tabela--duas th:nth-child(2), .tabela--duas td:nth-child(2) { width: 50%; text-align: right; padding: 0 20px; }
.tabela--duas thead th { text-align: right; }

/* Tabela "Onde | Reclamações": rótulo à esquerda */
.tabela--onde th:first-child, .tabela--onde td:first-child { text-align: left; padding-left: 0; }
.tabela--onde thead th:first-child { text-align: left; }
.tabela--onde th.col-hyype { padding-left: 16px; color: var(--tinta); font-weight: 700; }
.tabela--onde td strong { font: 800 clamp(28px, 3vw, 40px) / 1 var(--display); }

/* Lista de ✗ (não acontece) */
.xis .setas__seta { color: var(--sec); }

.frase-h2--grande { margin-top: 24px; font-size: clamp(32px, 4.4vw, 60px); }
.nota--topo { margin-top: 0; }

/* Linha do tempo: extrato de datas, fio contínuo à esquerda */
.linha-tempo { margin-top: 20px; max-width: 640px; list-style: none; border-left: 1px solid var(--tinta); }
.linha-tempo li {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 16px;
  padding: 12px 0 12px 20px;
  font: 400 clamp(16px, 1.4vw, 19px) / 1.45 var(--ui);
  color: var(--tinta);
}
.linha-tempo li + li { border-top: 1px solid var(--borda); }
.linha-tempo__data { font: 700 15px/1.6 var(--ui); font-variant-numeric: tabular-nums; color: var(--sec); }
.linha-tempo li:last-child .linha-tempo__data { color: var(--tinta); }
.linha-tempo + .prosa { margin-top: 24px; }

/* Lista de ☑ (o que ele já tentou) */
.tentou .setas__seta { color: var(--sec); }

/* Cláusulas numeradas da vaga: número grande na margem interna, fio de planilha entre elas */
.clausulas { margin-top: 32px; max-width: 720px; list-style: none; }
.clausula {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--borda);
}
.clausula:last-child { border-bottom: 1px solid var(--tinta); }
.clausula__n { font: 800 48px/.9 var(--display); letter-spacing: -.04em; color: var(--cobalto); }
.clausula .ficha__titulo { margin-bottom: 4px; }
.clausula .prosa:first-of-type, .clausula .setas:first-child { margin-top: 8px; }

/* Fórmula das vagas: operação em linha, operadores em cobalto */
.formula {
  max-width: 640px;
  padding: 20px 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  font: 500 clamp(18px, 1.8vw, 24px) / 1.4 var(--display);
  color: var(--tinta);
}
.formula__op { display: inline-block; margin: 0 .3em; font-weight: 800; color: var(--cobalto); }
.formula strong { font-weight: 800; }
.formula + .prosa { margin-top: 20px; }

/* FAQ */
.faq { max-width: 720px; border-top: 1px solid var(--tinta); }
.faq__item { border-bottom: 1px solid var(--borda); }
.faq__item:last-child { border-bottom-color: var(--tinta); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font: 700 clamp(18px, 1.6vw, 21px) / 1.3 var(--display);
  color: var(--tinta);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; flex: none; font: 500 24px/1 var(--ui); color: var(--cobalto); }
.faq__item[open] summary::after { content: '−'; }
.faq__item summary:hover { color: var(--cobalto-hover); }
.faq__resp { padding-bottom: 24px; }
.faq__resp > :first-child { margin-top: 0; }

/* Fechamento */
.fechamento { background: var(--superficie); border-top: 1px solid var(--borda); padding: 96px 0 112px; }
.fechamento .frase-h2 { margin-top: 0; }
.fechamento .setas { margin-top: 24px; }
.ps { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--borda); }
.ps .prosa { font-size: clamp(16px, 1.4vw, 18px); color: var(--sec); }
.ps .prosa strong { color: var(--tinta); }
.cta--linha { background: none; color: var(--cobalto); box-shadow: inset 0 0 0 1.5px var(--cobalto); }
.cta--linha:hover, .cta--linha:active { background: var(--selecao); }

/* Rodapé */
.rodape { background: var(--papel); border-top: 1px solid var(--borda); padding: 32px 0; font: 400 13px/1.5 var(--ui); color: var(--sec); }

/* ==========================================================
   REFORMA VISUAL (28/09): marca presente, seção escura, gráficos, moldes por dobra
   ========================================================== */

/* Seção escura: redefine os tokens no escopo, então tabela, listas e teses herdam sozinhas.
   Valores do tema escuro de design/04-identidade.md. Única inversão da página. */
.conta--escura {
  --papel: #1B1B1F;
  --superficie: #1B1B1F;
  --borda: #2A2A30;
  --tinta: #F2F2F5;
  --sec: #A2A3AA;
  --cobalto: #6280FF;
  --cobalto-hover: #8FA4FF;
  --selecao: rgba(98, 128, 255, .16);
  position: relative;
  background: #121214;
  color: var(--tinta);
  border-top: 0;
  overflow: clip;
}
.conta--escura .conta__grid { position: relative; z-index: 1; }
.conta--escura .cta { color: #121214; }
.conta--escura .cta:hover { background: var(--cobalto-hover); }
.conta--escura :focus-visible { outline-color: #FFFFFF; }

/* O raio "hy": máscara com o monograma, aceita qualquer cor. Sempre decorativo e cortado pela borda. */
.raio {
  position: absolute;
  z-index: 0;
  top: 72px;
  right: -72px;
  width: clamp(260px, 30vw, 460px);
  aspect-ratio: 852 / 1404;
  background: #0B2FD8;
  -webkit-mask: url('/images/mono-mask.png') center / contain no-repeat;
          mask: url('/images/mono-mask.png') center / contain no-repeat;
  pointer-events: none;
}

/* Gráfico de barras: escala de 0 a R$105, linha de referência no preço da venda (R$100) */
.barras {
  --escala: 105;
  position: relative;
  max-width: 760px;
  padding: 36px 0 8px;
  display: grid;
  row-gap: 14px;
}
.barras::before {                                /* linha do preço */
  content: '';
  position: absolute;
  top: 28px; bottom: 0;
  left: calc(100% * 100 / var(--escala));
  width: 1px;
  background: var(--tinta);
}
.barras::after {                                 /* rótulo da linha */
  content: attr(data-linha);
  position: absolute;
  top: 0;
  right: calc(100% - 100% * 100 / var(--escala));
  font: 500 12px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sec);
  white-space: nowrap;
}
.barra {
  position: relative;
  height: 56px;
  background:
    linear-gradient(var(--barra-cor, var(--sec)), var(--barra-cor, var(--sec))) left / calc(100% * var(--v) / var(--escala)) 100% no-repeat,
    repeating-linear-gradient(115deg, var(--hachura, var(--sec)) 0 1.5px, transparent 1.5px 7px) calc(100% * var(--v) / (var(--escala) - var(--taxa, 0))) 0 / calc(100% * var(--taxa, 0) / var(--escala)) 100% no-repeat;
}
.barra--hyype { --barra-cor: var(--cobalto); }
.barra::before, .barra::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #121214;
  white-space: nowrap;
}
.barra::before { content: attr(data-rotulo); left: 16px; font: 600 12px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.barra::after  { content: attr(data-valor); right: calc(100% - 100% * var(--v) / var(--escala) + 16px); font: 800 clamp(20px, 2.4vw, 28px) / 1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.barras + .tabela-wrap { margin-top: 32px; }

/* "Ler o porquê": explicação recolhida, texto original inteiro dentro */
.porque { margin-top: 20px; max-width: 640px; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.porque summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font: 600 13px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cobalto-hover);
}
.porque summary::-webkit-details-marker { display: none; }
.porque summary::before { content: 'Ler o porquê'; }
.porque[open] summary::before { content: 'Fechar'; }
.porque summary::after { content: '+'; font: 500 22px/1 var(--ui); }
.porque[open] summary::after { content: '−'; }
.porque > .prosa:first-of-type { margin-top: 0; }
.porque > :last-child { margin-bottom: 20px; }
.porque .prosa { font-size: clamp(16px, 1.4vw, 18px); color: var(--sec); }
.porque .prosa strong { color: var(--tinta); }

/* Blocos que saem do molde margem + folha e ocupam a largura toda */
.largura-total, .lado-a-lado { grid-column: 1 / -1; }

/* Grade de pontos: 25 x 20 = 500 vendas. Os marcados são camadas de fundo, uma por reclamação. */
.pontos-par { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; }
.pontos {
  --ponto: radial-gradient(circle closest-side, var(--borda) 52%, transparent 58%);
  --marca: radial-gradient(circle closest-side, var(--cor-marca) 78%, transparent 84%);
  --cel: 4% 5%;
  position: relative;
  aspect-ratio: 25 / 20;
  margin-top: 28px;
  background: var(--ponto) 0 0 / var(--cel);
}
.pontos::before {                              /* rótulo */
  content: attr(data-rotulo);
  position: absolute;
  left: 0; bottom: calc(100% + 10px);
  font: 600 12px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sec);
}
.pontos::after { content: ''; position: absolute; inset: 0; }
.pontos--la { --cor-marca: var(--tinta); }
.pontos--la::after {
  background:
    var(--marca) calc(100% *  3 / 24) calc(100% *  2 / 19) / var(--cel) no-repeat,
    var(--marca) calc(100% * 17 / 24) calc(100% *  5 / 19) / var(--cel) no-repeat,
    var(--marca) calc(100% *  9 / 24) calc(100% *  9 / 19) / var(--cel) no-repeat,
    var(--marca) calc(100% * 21 / 24) calc(100% * 13 / 19) / var(--cel) no-repeat,
    var(--marca) calc(100% *  6 / 24) calc(100% * 16 / 19) / var(--cel) no-repeat;
}
.pontos--aqui { --cor-marca: var(--cobalto); }
.pontos--aqui::before { color: var(--cobalto-hover); }
.pontos--aqui::after { background: var(--marca) calc(100% * 14 / 24) calc(100% * 8 / 19) / var(--cel) no-repeat; }
.pontos-par + .tabela-wrap { margin-top: 28px; }

/* Fluxo em três passos: etiquetas com corte diagonal */
.fluxo { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 760px; }
.fluxo strong { display: contents; }
.fluxo span {
  padding: 10px 22px 10px 16px;
  background: var(--tinta);
  color: var(--papel);
  font: 700 clamp(15px, 1.4vw, 18px) / 1.2 var(--display);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.fluxo i { font-style: normal; color: var(--sec); }

/* Dois cartões lado a lado: lá x aqui */
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.cartao {
  padding: 32px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.cartao .conta__h3 { font-size: clamp(20px, 1.8vw, 24px); }
.cartao--hyype { background: var(--selecao); border-color: var(--cobalto); }
.cartao .prosa, .cartao .setas li { font-size: clamp(17px, 1.4vw, 19px); }

/* Dobra 9: cláusulas viram cartões 2 x 2 com ícone */
.largura-total .clausulas { max-width: none; margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.largura-total .clausula {
  grid-template-columns: 1fr;
  row-gap: 20px;
  padding: 32px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.largura-total .clausula:last-child { border-bottom: 1px solid var(--borda); }
.largura-total .clausula__n { display: flex; align-items: center; justify-content: space-between; }
.icone { flex: none; width: 28px; height: 28px; color: var(--tinta); }
.largura-total .clausula .prosa, .largura-total .clausula .setas li { font-size: clamp(17px, 1.4vw, 19px); }

.largura-total .clausula { align-content: start; }

/* Dobra 2: fatias. A barra inteira é a venda; o cobalto é quanto a taxa fixa leva. */
.fatias { margin-top: 28px; max-width: 760px; display: grid; row-gap: 12px; }
.fatia {
  position: relative;
  height: 44px;
  border: 1px solid var(--borda);
  background: linear-gradient(var(--cobalto), var(--cobalto)) left / calc(1% * var(--p)) 100% no-repeat var(--papel);
}
.fatia::before, .fatia::after { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.fatia::before { content: 'Venda de ' attr(data-rotulo); right: 16px; font: 500 13px/1 var(--ui); color: var(--sec); }
.fatia::after  { content: attr(data-valor); left: calc(1% * var(--p) + 12px); font: 800 20px/1 var(--display); letter-spacing: -.02em; color: var(--tinta); }
.fatias + .tabela-wrap { margin-top: 28px; }

/* Dobra 3: documentos recortados (canto cortado na diagonal de 25°) */
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.docs .ficha {
  position: relative;
  max-width: none;
  margin-top: 0;
  padding: 32px;
  background: var(--superficie);
  border: 0;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 86px, 100% 100%, 0 100%);
}
.docs .ficha .icone { display: block; margin-bottom: 16px; color: var(--cobalto); }
.docs .ficha .prosa { font-size: clamp(17px, 1.4vw, 19px); }
.docs .citacao { background: var(--papel); border-left-color: var(--cobalto); }
.docs .numerao strong { font-size: clamp(56px, 7vw, 96px); }
/* Cartões curtos (Pix e cartão): os prazos são o conteúdo, então viram números grandes */
.docs .ficha:nth-child(2) .prosa, .docs .ficha:nth-child(3) .prosa { margin-top: 16px; line-height: 1.7; }
.docs .ficha:nth-child(2) .prosa strong, .docs .ficha:nth-child(3) .prosa strong {
  font: 800 clamp(32px, 3.4vw, 48px) / 1 var(--display);
  letter-spacing: -.03em;
  white-space: nowrap;
}
#pra-baixo .vira__linha { grid-template-columns: auto 1fr; }
.docs .ficha:last-child .citacao strong { font: 800 1.5em/1 var(--display); color: var(--cobalto); }

/* Dobra 4: três caminhos, uma direção. A seta → vira ↓ */
.tres-colunas { max-width: 760px; grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
.tres-colunas li { grid-template-columns: 1fr; row-gap: 12px; padding-top: 16px; border-top: 2px solid var(--tinta); font-size: clamp(16px, 1.3vw, 18px); }
.tres-colunas .setas__seta { order: 2; justify-self: start; transform: rotate(90deg); font-size: 28px; line-height: 1; color: var(--cobalto); }
#pra-baixo .vira dd strong, #pra-baixo .vira dt { font-size: clamp(28px, 3vw, 40px); }

/* Dobra 6: linha do tempo horizontal no desktop, "0%" em destaque, regra em cartão */
.linha-tempo li:last-child strong { display: block; font: 800 clamp(32px, 3vw, 44px) / 1 var(--display); letter-spacing: -.03em; margin-bottom: 6px; }
@media (min-width: 1024px) {
  .linha-tempo { display: grid; grid-template-columns: repeat(5, 1fr); max-width: none; border-left: 0; border-top: 1px solid var(--tinta); }
  .linha-tempo li { position: relative; display: block; padding: 20px 20px 0 0; font-size: 16px; }
  .linha-tempo li + li { border-top: 0; }
  .linha-tempo li::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); }
  .linha-tempo li:last-child::before { background: var(--cobalto); box-shadow: 0 0 0 4px var(--selecao); }
  .linha-tempo__data { display: block; margin-bottom: 6px; }
}
#sacar .checks, #testar .checks {
  margin-top: 20px;
  padding: 24px 28px;
  max-width: 640px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cobalto);
  border-radius: 0 12px 12px 0;
}
#testar .tese--marcador { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; }

/* Dobra 8: o que ele tentou (três cartões) x o que ficou de fora (lista em extrato) */
.tentou { max-width: 760px; grid-template-columns: repeat(3, 1fr); column-gap: 16px; }
.tentou li { grid-template-columns: 1fr; row-gap: 10px; align-content: start; padding: 20px; background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; font-size: clamp(16px, 1.3vw, 18px); }
.tentou .setas__seta { font-size: 24px; line-height: 1; color: var(--tinta); }
#tentou .xis { max-width: 640px; row-gap: 0; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
#tentou .xis li { padding: 14px 0; }
#tentou .xis li + li { border-top: 1px solid var(--borda); }

/* Dobra 11: fórmula em tamanho de título e a faixa do critério */
.formula { max-width: none; padding: 28px 0; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
#vagas .frase-h2--grande {
  margin: 32px 0;
  padding: 40px 0;
  max-width: none;
  background: var(--cobalto);
  color: #FFFFFF;
  box-shadow: 0 0 0 100vmax var(--cobalto);      /* faixa de borda a borda */
  clip-path: inset(0 -100vmax);
}

/* Fechamento em cobalto: tokens redefinidos no escopo */
.fechamento {
  --tinta: #FFFFFF;
  --sec: rgba(255, 255, 255, .78);
  --borda: rgba(255, 255, 255, .28);
  --cobalto: #FFFFFF;
  --cobalto-hover: #E4E9FF;
  --selecao: rgba(255, 255, 255, .14);
  position: relative;
  overflow: clip;
  background: #0B2FD8;
  color: #FFFFFF;
  border-top: 0;
}
.fechamento .conta__grid { position: relative; z-index: 1; }
.fechamento .cta { background: #FFFFFF; color: #0B2FD8; }
.fechamento .cta:hover { background: #E4E9FF; }
.fechamento .cta--linha { background: none; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #FFFFFF; }
.fechamento .cta--linha:hover { background: rgba(255, 255, 255, .14); }
.fechamento .ps .prosa strong { color: #FFFFFF; }
.fechamento :focus-visible { outline-color: #FFFFFF; }
.raio--fechamento { top: auto; bottom: -80px; right: -40px; background: #08229E; }
.rodape__marca { display: inline-flex; align-items: center; gap: 10px; }
.raio--mini { position: static; width: 12px; opacity: 1; background: var(--tinta); }

.tese--grande {
  margin-top: 28px;
  max-width: 22ch;
  border-left: 3px solid var(--cobalto);
  padding-left: 20px;
  font: 500 clamp(24px, 2.8vw, 36px) / 1.2 var(--display);
  letter-spacing: -.02em;
}
.tese--grande strong { font-weight: 800; }

/* ==========================================================
   Responsivo
   ========================================================== */
@media (max-width: 1023px) {
  /* Hero: coluna única, rótulo acima do número, fio em largura total */
  .hero { padding: 32px 0 56px; min-height: 0; }
  .hero__grid, .extrato { grid-template-columns: 1fr; }
  .hero__vsl, .hero__texto { grid-column: 1; }
  .extrato__rotulo { text-align: left; margin-bottom: 4px; }
  .extrato__rotulo--total { border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 12px; }
  .extrato__num--total { border-top: 0; padding-top: 0; margin-top: 0; }

  /* Dobra 2: coluna única, sinalizadores viram cabeçalhos, sticky desligado */
  .conta { padding: 72px 0 88px; }
  .conta__grid { grid-template-columns: 1fr; row-gap: 16px; }
  .conta__folha:not(:last-child) { margin-bottom: 32px; }
  .conta__margem { position: static; text-align: left; }
  .conta__margem:has(> .marcador) { display: flex; align-items: flex-start; gap: 10px; }
  .marcador { flex: none; width: 14px; height: 22px; margin: 2px 0 0; clip-path: polygon(10px 0, 14px 0, 4px 100%, 0 100%); }
  .conta__h2::after { max-width: 240px; }
}
@media (max-height: 759px) {
  .conta__margem { position: static; }
}
@media (max-width: 767px) {
  .nav__inner { height: 56px; }
  .nav__logo img { width: 56px; height: 20px; }
  .hero { padding: 24px 0 48px; }
  .cta { width: 100%; padding: 14px 16px; line-height: 1.3; }

  .conta { padding: 64px 0 80px; }
  .conta__grid { row-gap: 12px; }
  .conta__folha:not(:last-child) { margin-bottom: 36px; }
  .conta__h2 { font-size: 22px; }

  /* Tabela sangrando as duas margens: réguas de borda a borda, como extrato no app */
  .tabela-wrap { margin-inline: calc(-1 * var(--gutter)); max-width: none; }
  .tabela th, .tabela td { padding: 0 16px; height: 64px; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
  .tabela thead th { height: 40px; }
  .tabela tbody th, .tabela tbody td { font-size: 18px; }
  .tabela td.peso--normal { font-size: 22px; }
  .tabela td.peso--total { font-size: 36px; }
  .tabela__legenda { padding-inline: 16px; padding-left: 56px; }
  .tabela__legenda::before { left: 16px; }
}
@media (max-width: 1023px) {
  /* No celular o raio fica atrás do texto: menor e apagado, pra não brigar com a leitura */
  .raio { top: 20px; right: -48px; width: 190px; opacity: .3; }
  .barra { height: 48px; }
  .lado-a-lado, .largura-total .clausulas, .docs { grid-template-columns: 1fr; gap: 16px; }
  .cartao, .largura-total .clausula, .docs .ficha { padding: 24px 20px; }
  .largura-total { margin-bottom: 32px; }
  .raio--mini { width: 12px; opacity: 1; }
  .raio--fechamento { top: auto; bottom: -40px; opacity: 1; }
}
@media (max-width: 767px) {
  .tres-colunas, .tentou { grid-template-columns: 1fr; row-gap: 12px; }
  .tres-colunas li { grid-template-columns: 1fr 32px; align-items: start; }
  .tres-colunas .setas__seta { order: 2; justify-self: end; }
  .fatia::before { content: attr(data-rotulo); }
  #sacar .checks, #testar .checks { padding: 20px; }
  #vagas .frase-h2--grande { padding: 32px 0; }
}
@media (max-width: 767px) {
  .pontos-par { gap: 16px; }
}
@media (max-width: 767px) {
  /* Dobras 3+ */
  .fechamento { padding: 64px 0 80px; }
  .fechamento .conta__margem { display: none; }
  .ficha { margin-top: 32px; }
  .clausula { grid-template-columns: 36px 1fr; column-gap: 12px; padding: 24px 0; }
  .clausula__n { font-size: 36px; }
  .linha-tempo li { grid-template-columns: 1fr; row-gap: 2px; padding-left: 16px; }
  .vira__linha { grid-template-columns: 4.5ch 1fr; }
  .citacao { padding: 14px 16px; }

  /* Comparativa de 3 colunas em 375px: rótulo mais estreito, valores menores */
  .tabela--comp th, .tabela--comp td { padding: 0 10px; height: 56px; }
  .tabela--comp th:first-child, .tabela--comp td:first-child { padding-left: 16px; width: 34%; }
  .tabela--comp thead th { font-size: 11px; letter-spacing: .04em; }
  .tabela--comp tbody th { font-size: 14px; }
  .tabela--comp tbody td { font-size: 16px; }
  .tabela--comp .tabela__total td { font-size: 20px; }
  .tabela--comp .tabela__total td.col-hyype { font-size: 24px; }
  .tabela--duas th, .tabela--duas td { padding: 0 16px; }
  .tabela--onde th.col-hyype { padding-left: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tabela th, .tabela td { height: 72px; }
}
@media (max-width: 399px) {
  .cta { font-size: 13px; }
}

/* ---------- Acessibilidade: sem movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .cents, .cents::before, .cta, .nav, .nav__logo img, .nav__link { transition: none !important; }
  .soma__fio { transform: none !important; transition: none !important; }
  .conta__h2::after { animation: none !important; transform: none !important; }
}