/* ══════════════════════════════════════════════════════════════════════
   VDClip v2 — camada de tokens e componentes da home nova (fork).
   NÃO é carregado nas 44 páginas existentes: só em template-home-v2.php.

   Fundação derivada do recon de realoficial.com.br, abacatepay.com e
   vizard.ai. Regras que os três repetem:
     · o fundo nunca é branco puro — é tingido na família da marca, para
       que o card branco flutue sem precisar de borda;
     · o CTA nunca usa a cor dominante da marca (contraste, não repetição);
     · a cor da marca vive no TEXTO da manchete, não no botão;
     · botão pílula contra card de canto suave — as formas se opõem;
     · título de seção maior que o H1.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground: cinza quente enviesado para o laranja da marca. Não é branco
        (o card precisa flutuar) e não é creme (clichê de design gerado). ── */
  --v2-bg: #f4f4f5;
  --v2-bg-sunk: #e4e4e8;
  --v2-card: #ffffff;

  /* ── Tinta: near-black quente, não neutro ── */
  --v2-ink: #121215;
  --v2-ink-soft: #3f3f46;
  --v2-muted: #5c5c66;
  --v2-faint: #8b8b96;
  --v2-line: #dededf;
  --v2-line-strong: #c8c8cc;

  /* ── Marca: acento, não botão ── */
  --v2-brand: #e05500;
  --v2-brand-deep: #b84400;
  --v2-brand-tint: rgba(224, 85, 0, 0.09);
  --v2-brand-line: rgba(224, 85, 0, 0.22);
  --v2-brand-grad: linear-gradient(96deg, #b84400 0%, #e05500 38%, #ff7a29 72%, #b84400 100%);

  /* ── CTA: preto. Contraste com a marca, não repetição dela. ── */
  --v2-cta: #121215;
  --v2-cta-hover: #000000;
  --v2-on-cta: #ffffff;

  /* ── Forma: pílula no botão, canto generoso no card ── */
  --v2-r-pill: 999px;
  --v2-r-card: 20px;
  --v2-r-sm: 12px;

  /* ── Ritmo ── */
  --v2-container: 1120px;
  --v2-container-text: 760px;
  --v2-gap: 20px;
  --v2-section: 104px;

  --v2-shadow-card: 0 1px 2px rgba(18, 18, 21, 0.04), 0 12px 32px rgba(18, 18, 21, 0.06);
  --v2-shadow-lift: 0 2px 4px rgba(18, 18, 21, 0.05), 0 24px 56px rgba(18, 18, 21, 0.10);

  /* Palco escuro do hero — fixo, não segue o toggle de tema */
  --v2-stage: #100e0d;
  --v2-stage-text: #f4f1ee;
  --v2-stage-muted: #a89f98;
  --v2-stage-line: rgba(255, 255, 255, 0.12);

  /* Dots do chrome do mockup. Redeclarados aqui porque a home v2 não carrega
     variables.css — ela tem fundação própria (ver functions.php). */
  --vd-chrome-red: #ff5f57;
  --vd-chrome-yellow: #febc2e;
  --vd-chrome-green: #28c840;
}

@media (max-width: 768px) {
  :root { --v2-section: 68px; }
}

/* ══════════ base ══════════ */

/* margin:8px é o padrão do browser e nunca foi zerado: era a borda branca de
   8px em volta da página inteira, impedindo o hero de sangrar até a borda. */
.v2 {
  margin: 0;
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-family: 'Chivo', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 img, .v2 svg { display: block; max-width: 100%; }
/* :not(.v2-btn) — sem isso este seletor (0,1,1) vence .v2-btn-primary (0,1,0)
   e o botão herda a cor do pai: texto escuro sobre fundo escuro. */
/* :not(.v2-nav-flat) — sem isso, essa regra (mais específica que
   `.v2-nav-trigger, .v2-nav-flat`) vencia a cascata e o link "Preços"/
   "Blog" (um <a>) herdava a tinta cheia do body em vez do cinza-médio
   dos botões-dropdown ao lado (um <button>, que essa regra não alcança). */
.v2 a:not(.v2-btn):not(.v2-nav-flat) { color: inherit; }
.v2 a { text-decoration: none; }
.v2 ul { list-style: none; margin: 0; padding: 0; }

.v2-container {
  width: 100%;
  max-width: var(--v2-container);
  margin: 0 auto;
  padding: 0 24px;
}

.v2-narrow { max-width: var(--v2-container-text); }
.v2-section { padding: var(--v2-section) 0; }

/* ══════════ tipografia ══════════
   Display em Archivo (pesada, tracking apertado) contra corpo em Inter.
   O título de SEÇÃO é maior que o H1 — o hero é contido, as seções pesam. */

.v2-display,
.v2-h2,
.v2-h3,
.v2-h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  margin: 0;
  text-wrap: balance;
}

.v2-display {
  font-size: clamp(38px, 5.2vw, 58px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.v2-h2 {
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.06;
}

.v2-h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.22;
}

.v2-h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.v2-lead {
  font-size: 18px;
  line-height: 1.58;
  color: var(--v2-muted);
  margin: 0;
}

.v2-body { font-size: 15.5px; line-height: 1.62; color: var(--v2-muted); margin: 0; }
.v2-small { font-size: 13.5px; line-height: 1.5; color: var(--v2-muted); margin: 0; }

.v2-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--v2-brand-deep);
  margin: 0;
}

/* A cor da marca mora aqui: uma frase da manchete, não a manchete inteira. */
.v2-accent {
  background: var(--v2-brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ══════════ botões ══════════ */

.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--v2-r-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.v2-btn-primary { background: var(--v2-cta); color: var(--v2-on-cta); }
.v2-btn-primary:hover { background: var(--v2-cta-hover); transform: translateY(-1px); }

.v2-btn-outline {
  background: var(--v2-card);
  color: var(--v2-ink);
  border-color: var(--v2-line-strong);
}
.v2-btn-outline:hover { border-color: var(--v2-ink); }

.v2-btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

.v2 a:focus-visible,
.v2 button:focus-visible {
  outline: 2px solid var(--v2-brand);
  outline-offset: 3px;
}

/* ══════════ selo ══════════ */

.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--v2-brand-line);
  border-radius: var(--v2-r-pill);
  background: var(--v2-brand-tint);
  color: var(--v2-brand-deep);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.v2-badge svg { width: 13px; height: 13px; }

/* ══════════ card ══════════
   Branco puro sobre ground tingido: flutua sem depender de borda. */

.v2-card {
  background: var(--v2-card);
  border-radius: var(--v2-r-card);
  box-shadow: var(--v2-shadow-card);
  padding: 26px;
}

/* ══════════ hero ══════════
   Palco escuro com LUZ DIRECIONAL, não mesh/blob. O clichê catalogado de IA é
   a blob mesh (manchas moles sem origem física) — girar o matiz de roxo para
   laranja não desclicheiza, a forma continua a mesma. Luz direcional tem
   origem, ângulo e falloff: é a linguagem de key light / lente / sensor, que é
   o assunto literal do produto.

   Fecha os gradientes em rgba(224,85,0,0) e NUNCA em `transparent`: em alguns
   engines `transparent` é preto-transparente e produz névoa acinzentada no fade. */

.v2-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 var(--v2-section);
  background:
    radial-gradient(72% 56% at 50% -14%, rgba(224, 85, 0, 0.30), rgba(224, 85, 0, 0) 70%),
    radial-gradient(48% 46% at 88% 96%, rgba(224, 85, 0, 0.16), rgba(224, 85, 0, 0) 72%),
    conic-gradient(from 202deg at 50% -22%, rgba(224, 85, 0, 0) 0turn, rgba(224, 85, 0, 0.12) 0.12turn, rgba(224, 85, 0, 0) 0.28turn),
    var(--v2-stage);
  color: var(--v2-stage-text);
}

/* Trocado o grão de filme (feTurbulence) por um segundo glow, mais suave: o
   grão lia como "ruído"/sujeira de tela em vez de textura de fundo. Glow
   duplo (topo + canto inferior direito) dá profundidade sem textura. */

/* Malha técnica bem discreta, só como chão — não como protagonista. */
.v2-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 28% 34%, #000 0%, transparent 76%);
          mask-image: radial-gradient(ellipse 72% 62% at 28% 34%, #000 0%, transparent 76%);
}

.v2-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

@media (max-width: 1000px) {
  .v2-hero-grid { grid-template-columns: 1fr; gap: 52px; }
}

/* A restrição de medida vive no TEXTO, não na coluna — senão o formulário
   herda a largura da manchete e o placeholder trunca. */
.v2-hero-badge { margin-bottom: 20px; }
.v2-hero-copy { min-width: 0; }
.v2-hero-copy h1 { margin: 0 0 18px; max-width: 13ch; }

.v2-hero-lead { max-width: 42ch; margin: 0 0 28px; }
.v2-hero-form { max-width: 480px; }

.v2-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-pill);
  box-shadow: var(--v2-shadow-card);
  transition: border-color 0.2s ease;
}

.v2-field:focus-within { border-color: var(--v2-brand-line); }
.v2-field > svg { width: 17px; height: 17px; color: var(--v2-faint); flex-shrink: 0; }

.v2-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--v2-ink);
  padding: 10px 4px;
}

.v2-field input::placeholder { color: var(--v2-faint); }
.v2-hero-note { margin-top: 12px; font-size: 13px; color: var(--v2-faint); }

@media (max-width: 560px) {
  /* No mobile o campo empilha (input em cima, botão embaixo). Antes o input
     ficava transparente e centralizado — parecia só um texto, não dava pra
     saber que era pra colar o link. Aqui o INPUT vira um campo visível (borda
     + fundo) e o botão fica separado embaixo. */
  .v2-field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0; /* o container era pílula (999px) e "vazava" atrás do
       input retangular — o próprio input já dá a forma agora. */
    box-shadow: none;
  }
  /* !important: uma regra .v2-hero .v2-field fora desta media query (mesma
     especificidade, declarada depois no arquivo) ganhava e devolvia o fundo
     cinza + cantos quadrados por trás do input/botão. */
  .v2-hero .v2-field {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  /* Formato de RETÂNGULO (não pílula) com o ícone de volta, alinhado à
     esquerda — pra não ficar idêntico ao botão pílula embaixo (virava "dois
     botões" em vez de campo + botão). Borda/fundo mais contrastados pra
     realmente parecer um campo editável no tema escuro do hero. */
  .v2-field {
    position: relative;
  }
  .v2-field > svg {
    display: block;
    position: absolute;
    left: 16px;
    top: 15px;
    z-index: 1;
  }
  .v2-field input {
    text-align: left;
    padding: 15px 16px 15px 42px;
    border: 1.5px solid var(--v2-line);
    border-radius: 14px;
    background: var(--v2-card);
  }
  .v2-hero .v2-field input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
  }
  .v2-field input:focus { border-color: var(--v2-brand-line); }
  .v2-field .v2-btn { width: 100%; }
}

.v2-hero-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 26px;
  font-size: 14.5px;
  font-weight: 600;
}

.v2-avatars { display: flex; }

.v2-avatars img {
  width: 28px;
  height: 28px;
  border-radius: var(--v2-r-pill);
  border: 2px solid var(--v2-bg);
  object-fit: cover;
}

.v2-avatars img + img { margin-left: -9px; }
.v2-stars { display: inline-flex; gap: 2px; color: var(--v2-brand); }
.v2-stars svg { width: 14px; height: 14px; }
.v2-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--v2-line-strong); }

/* ── Palco: superfícies de produto em camadas, sangrando à direita ── */

.v2-stage {
  position: relative;
  min-width: 0;
  min-height: 460px;
  /* sangra para fora do container */
  margin-right: calc(50% - 50vw - 24px);
  padding-right: 24px;
}

@media (max-width: 1000px) {
  .v2-stage { margin-right: 0; padding-right: 0; min-height: 0; }
}

.v2-stage-app {
  position: relative;
  /* O sangramento leva o palco até a borda da viewport; sem teto a demo
     (vídeo 16:9 + régua + 4 cortes 9:16) fica com ~700px de altura e empurra
     o hero inteiro para baixo. */
  max-width: 620px;
  border-radius: var(--v2-r-card);
  overflow: hidden;
  background: var(--v2-card);
  box-shadow: var(--v2-shadow-lift);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transform-origin: left center;
}

@media (max-width: 1000px) {
  .v2-stage-app { transform: none; }
}

.v2-stage-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--v2-line);
}

.v2-stage-dot { width: 9px; height: 9px; border-radius: 50%; }

.v2-stage-url {
  margin-left: 10px;
  font-size: 11.5px;
  color: var(--v2-faint);
}

.v2-stage-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--v2-brand-deep);
}

.v2-stage-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-brand);
  animation: v2-pulse 1.8s ease-in-out infinite;
}

@keyframes v2-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }

.v2-stage-app img { width: 100%; height: auto; display: block; }

/* Fragmento flutuante: corte vertical com score, sobrepondo o app */
.v2-float-clip {
  position: absolute;
  left: -46px;
  bottom: 26px;
  width: 132px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--v2-ink);
  box-shadow: 0 18px 44px rgba(18, 18, 21, 0.24);
  border: 3px solid var(--v2-card);
}

.v2-float-clip img { width: 100%; height: 100%; object-fit: cover; }

.v2-float-score {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 2px 7px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-brand);
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.v2-float-cap {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 9px;
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.v2-float-cap u { text-decoration: none; color: #ffcf4a; }

/* Fragmento flutuante: pílula de status. 4 instâncias empilhadas no mesmo
   lugar (uma por nicho, ver .v2-float-pill-cycle mais abaixo) — sem
   opacity:0 na base, a que ainda não começou (dentro do próprio delay)
   herda opacity:1 padrão do CSS e todas ficam visíveis juntas. */
.v2-float-pill {
  position: absolute;
  z-index: 5;
  /* Centralizado sob o card (620px), não sob .v2-stage que sangra até a
     viewport acima de 1439px (override no breakpoint abaixo). */
  left: 310px;
  transform: translateX(-50%);
  bottom: -44px;
  opacity: 0;
  /* Vidro escuro pra não se confundir com os botões brancos do header/CTA. */
  color: var(--v2-stage-text);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border-radius: var(--v2-r-pill);
  background: rgba(16, 14, 13, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.v2-float-pill b {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--v2-brand);
}

/* Contador: os spans ficam empilhados na mesma célula e vão trocando de
   opacidade — mesma técnica das legendas/badges, sem JS. */
/* Contagem via propriedade tipada (interpola inteiro quadro a quadro), em
   vez de crossfade entre valores fixos que "piscava". */
@property --n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

.v2-count {
  --n: 0;
  counter-reset: v2cnt var(--n);
  animation: v2-count-up 30s linear infinite;
  animation-delay: calc(var(--pd, 0s) + 0.1s);
}

.v2-count::before { content: counter(v2cnt); }

@keyframes v2-count-up {
  0%    { --n: 0; }
  2.57%  { --n: var(--target); }
  100%  { --n: var(--target); }
}

@media (max-width: 1000px) {
  .v2-float-pill { left: 50%; }
}

@media (max-width: 600px) {
  .v2-float-clip { width: 88px; }
  .v2-float-pill { font-size: 11.5px; padding: 7px 12px 7px 9px; }
}

/* ══════════ faixa de confiança ══════════ */

.v2-trust {
  padding: 30px 0;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-bg-sunk);
}

.v2-trust-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-muted);
  margin: 0 0 16px;
}

.v2-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 34px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--v2-ink-soft);
}

/* ══════════ cabeçalho de seção ══════════ */

.v2-section-head { text-align: center; margin-bottom: 48px; }
.v2-section-head .v2-eyebrow { margin-bottom: 14px; }
.v2-section-head .v2-lead { margin: 16px auto 0; max-width: 54ch; }

/* ══════════ passos ══════════ */

.v2-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--v2-gap);
}

.v2-step { position: relative; }

.v2-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink);
  color: var(--v2-on-cta);
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.v2-step h3 { margin-bottom: 8px; }

.v2-step-shot {
  margin-top: 18px;
  border-radius: var(--v2-r-sm);
  overflow: hidden;
  border: 1px solid var(--v2-line);
}

/* ══════════ features ══════════ */

.v2-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--v2-gap);
}

.v2-feature-icon { display: none; }
.v2-feature h3 { margin-bottom: 8px; }

/* ══════════ prova ══════════ */

.v2-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--v2-gap);
}

.v2-quote blockquote {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-ink);
  letter-spacing: -0.012em;
}

.v2-quote figcaption { display: flex; align-items: center; gap: 11px; }

.v2-quote img {
  width: 38px;
  height: 38px;
  border-radius: var(--v2-r-pill);
  object-fit: cover;
}

.v2-quote-name { font-size: 14px; font-weight: 700; display: block; }
.v2-quote-role { font-size: 13px; color: var(--v2-muted); }

/* ══════════ métricas ══════════ */

.v2-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--v2-gap);
  text-align: center;
}

.v2-metric-n {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 6px;
}

/* ══════════ FAQ ══════════ */

.v2-faq-item { border-bottom: 1px solid var(--v2-line); }

.v2-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--v2-ink);
  text-align: left;
  cursor: pointer;
  transition: color 0.16s ease;
}

.v2-faq-trigger:hover { color: var(--v2-brand-deep); }
.v2-faq-trigger svg { flex-shrink: 0; width: 18px; height: 18px; transition: transform 0.24s ease; }
/* Era rotate(45deg): o + virava × (dispensar). Agora vira − (recolher). */
.v2-faq-item.is-open .v2-faq-trigger svg line:first-child { opacity: 0; }

.v2-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.v2-faq-item.is-open .v2-faq-panel { grid-template-rows: 1fr; }
.v2-faq-panel > div { overflow: hidden; }
.v2-faq-panel p { padding-bottom: 22px; max-width: 62ch; }

/* ══════════ CTA final ══════════ */

.v2-cta-final { text-align: center; }

.v2-cta-final-box {
  background: var(--v2-ink);
  color: #f7f5f2;
  border-radius: var(--v2-r-card);
  padding: clamp(40px, 6vw, 72px) 28px;
  position: relative;
  overflow: hidden;
}

.v2-cta-final-box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -40%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(224, 85, 0, 0.32) 0%, rgba(224, 85, 0, 0) 66%);
  pointer-events: none;
}

.v2-cta-final-box > * { position: relative; z-index: 1; }
.v2-cta-final-box .v2-h2 { color: #ffffff; }
.v2-cta-final-box .v2-lead { color: #b9b1a9; margin: 16px auto 30px; max-width: 46ch; }

.v2-cta-final-box .v2-btn-primary {
  background: var(--v2-card);
  color: var(--v2-ink);
}
.v2-cta-final-box .v2-btn-primary:hover { background: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Composição das seções — cada uma tem forma PRÓPRIA.
   Três grids de 3 cards iguais empilhados é o que lê como amador.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho de seção alinhado à esquerda, com regra ── */
.v2-head-left {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--v2-line);
}

.v2-head-left .v2-eyebrow { margin-bottom: 12px; }
/* Estava travando TODO H2 na mesma largura: os cinco quebravam em exatamente
   duas linhas no mesmo formato, independentemente de ter 28 ou 36 caracteres.
   Era o tell mais forte da página. Agora cada título quebra onde o texto pede. */
.v2-head-left h2 { max-width: 22ch; text-wrap: balance; }
/* h2 (~700px) + gap 28 + lead (421px) estourava a caixa de 1072px em
   TODOS os viewports — o lead sempre quebrava. */
.v2-head-left .v2-lead { max-width: 32ch; flex: 0 1 340px; }

/* ── Passos: sequência escalonada, não fileira igual ── */
.v2-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v2-gap); }

@media (max-width: 900px) { .v2-flow { grid-template-columns: 1fr; } }

.v2-flow-item {
  position: relative;
  padding: 28px 26px 26px;
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  box-shadow: var(--v2-shadow-card);
}
.v2-flow-item:nth-child(2) { margin-top: 44px; }
.v2-flow-item:nth-child(3) { margin-top: 88px; }

@media (max-width: 900px) {
  .v2-flow-item:nth-child(2), .v2-flow-item:nth-child(3) { margin-top: 0; }
}

/* Era 56px (maior que todo H2) a 1.52:1 — o maior tipo da seção era o menos
   legível dela, e invertia a hierarquia. Agora é indicador, não ornamento. */
.v2-flow-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--v2-r-pill);
  border: 1.5px solid var(--v2-brand);
  background: var(--v2-card);
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: var(--v2-ink);
  margin: 0 0 16px;
}

.v2-flow-item h3 { margin-bottom: 8px; }

.v2-flow-shot {
  margin-top: 20px;
  border-radius: var(--v2-r-sm);
  overflow: hidden;
  box-shadow: var(--v2-shadow-card);
  aspect-ratio: 16 / 10;
}

.v2-flow-shot img { width: 100%; height: 100%; object-fit: cover; }

/* Screenshot real do app, não mock. Miniatura uniforme (mesmo aspect-ratio
   16/10 herdado de .v2-flow-shot) com object-fit:contain — mostra a
   captura INTEIRA, sem cortar nada, com uma faixa neutra preenchendo o
   espaço sobrando (cover cortava, inclusive no meio de uma palavra) — e um
   botão de lupa abre a mesma imagem grande num lightbox, pra quem quiser
   ver o detalhe sem esperar o card crescer. */
.v2-flow-shot-real {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--v2-line);
  background: var(--v2-bg-sunk);
  cursor: zoom-in;
  position: relative;
}

.v2-flow-shot-real img { flex: 1; min-height: 0; object-fit: contain; }

/* Barra de "navegador" — mesma ideia do .v2-editor-bar na seção do editor,
   só que clara (esses cards vivem num fundo branco, não escuro). */
.v2-flow-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-card);
  flex-shrink: 0;
}

.v2-flow-dots { display: inline-flex; gap: 5px; }
.v2-flow-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-line-strong); }

.v2-flow-url {
  font-family: 'Chivo', monospace;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: var(--v2-faint);
}

.v2-flow-zoom-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(16, 14, 13, 0.72);
  color: #fff;
  backdrop-filter: blur(3px);
}

.v2-flow-zoom-icon svg { width: 15px; height: 15px; }

/* ── Lightbox: overlay único, populado por JS com o src clicado ── */
.v2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(10, 9, 8, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.v2-lightbox.is-open { opacity: 1; pointer-events: auto; }

.v2-lightbox img {
  max-width: min(1100px, 100%);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--v2-r-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.v2-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.v2-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.v2-lightbox-close svg { width: 18px; height: 18px; }

/* ── Bento: pesos diferentes, não 6 cards iguais ── */
.v2-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  /* start, não stretch: sem isso o card curto estica até a altura do card
     alto da mesma linha e sobra um vazio embaixo. */
  align-items: start;
}

.v2-bento > * { grid-column: span 4; }
.v2-bento > .is-wide { grid-column: span 7; }
.v2-bento > .is-half { grid-column: span 5; }

/* A primeira fila tinha 431 vs 370px — degrau cru no canto superior direito.
   Estica as duas e deixa a mídia absorver a diferença. */
.v2-bento > .is-wide,
.v2-bento > .is-half {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.v2-bento > .is-half .v2-flow-shot { margin-top: auto; }
.v2-bento > .is-six { grid-column: span 6; }

@media (max-width: 900px) {
  .v2-bento { grid-template-columns: 1fr; }
  .v2-bento > * { grid-column: 1 / -1 !important; }
}

.v2-bento-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 30px 30px 0;
}

.v2-bento-shot {
  border-radius: var(--v2-r-sm) var(--v2-r-sm) 0 0;
  overflow: hidden;
  box-shadow: 0 -1px 0 var(--v2-line);
  margin: 0 -6px;
}

.v2-bento-shot img { width: 100%; height: auto; display: block; }

/* ── Prova: um case grande + citações menores ao lado ── */
.v2-proof-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--v2-gap);
  align-items: stretch;
}

@media (max-width: 900px) { .v2-proof-grid { grid-template-columns: 1fr; } }

.v2-case {
  background: var(--v2-ink);
  color: #f6f3f0;
  border-radius: var(--v2-r-card);
  padding: 38px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.v2-case::after {
  content: '';
  position: absolute;
  right: -20%;
  bottom: -40%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(224, 85, 0, 0.30) 0%, rgba(224, 85, 0, 0) 66%);
  pointer-events: none;
}

.v2-case > * { position: relative; z-index: 1; }

.v2-case-n {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(38px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin: 0 0 10px;
  color: #fff;
}

.v2-case blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: #ded7d1;
}

.v2-case figcaption { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.v2-case img { width: 40px; height: 40px; border-radius: var(--v2-r-pill); object-fit: cover; }
.v2-case-name { font-size: 14.5px; font-weight: 700; display: block; color: #fff; }
.v2-case-role { font-size: 13px; color: #a79d95; }

.v2-quotes-col { display: grid; gap: var(--v2-gap); }

/* Luz seguindo o cursor: --mx/--my vêm do mousemove em animations.js */
.v2-case, .v2-quote {
  position: relative;
}

.v2-case::before,
.v2-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 130, 40, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.v2-case:hover::before,
.v2-quote:hover::before { opacity: 1; }

.v2-quote > * { position: relative; z-index: 1; }

.v2-quote blockquote {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--v2-ink);
  letter-spacing: -0.012em;
}

.v2-quote figcaption { display: flex; align-items: center; gap: 11px; }
.v2-quote img { width: 36px; height: 36px; border-radius: var(--v2-r-pill); object-fit: cover; }
.v2-quote-name { font-size: 14px; font-weight: 700; display: block; }
.v2-quote-role { font-size: 13px; color: var(--v2-muted); }

/* ── Métricas em régua, não em cards ── */
.v2-rule-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}

.v2-rule-metrics > div + div { border-left: 1px solid var(--v2-line); padding-left: 28px; }

@media (max-width: 700px) {
  .v2-rule-metrics > div + div { border-left: 0; padding-left: 0; }
}

.v2-metric-n {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   Vida: demo animada no hero, micro-interações e revelação no scroll.
   Tudo respeita prefers-reduced-motion (regra no fim do arquivo).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Demo: a transformação acontecendo, não um print parado ── */

/* position:relative é obrigatório: sem ele as cenas absolutas ancoram no
   .v2-stage-app e cobrem a barra do painel. */
.v2-demo { position: relative; padding: 14px; background: var(--v2-bg-sunk); }

/* A primeira cena define a altura; as outras se sobrepõem a ela. */
.v2-scene { position: absolute; inset: 0; }
.v2-scene:first-child { position: relative; inset: auto; }

.v2-demo-src {
  position: relative;
  border-radius: var(--v2-r-sm);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: var(--v2-ink);
}

.v2-demo-src img { width: 100%; height: 100%; object-fit: cover; }

/* Linha de varredura: a IA "assistindo" o vídeo */
.v2-demo-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--v2-brand), transparent);
  box-shadow: 0 0 18px 3px rgba(224, 85, 0, 0.55);
  animation: v2-scan 5.5s cubic-bezier(.5,0,.5,1) infinite;
}

@keyframes v2-scan {
  0%   { left: 0%;  opacity: 0 }
  6%   { opacity: 1 }
  60%  { left: 100%; opacity: 1 }
  66%  { opacity: 0 }
  100% { left: 100%; opacity: 0 }
}

/* Régua de tempo com os momentos marcados */
.v2-demo-track {
  position: relative;
  height: 26px;
  margin-top: 12px;
  border-radius: 6px;
  background: var(--v2-line);
  overflow: hidden;
}

.v2-demo-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--v2-brand), var(--v2-brand-deep));
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  animation: v2-seg 5.5s ease-out infinite;
}

@keyframes v2-seg {
  0%, 8%   { opacity: 0; transform: scaleY(0.4) }
  16%      { opacity: 1; transform: scaleY(1) }
  88%      { opacity: 1; transform: scaleY(1) }
  100%     { opacity: 0; transform: scaleY(1) }
}

/* Cartelas de corte: os 4 cortes que SAÍRAM daquele frame, cada um com sua
   própria legenda animada (texto branco + destaque em amarelo, como legenda
   de verdade — não uma chip sólida colorida). Timing fica junto de .v2-scene
   mais abaixo, onde a variável --sd por cena é definida. */
.v2-demo-out {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.v2-demo-clip {
  position: relative;
  /* width fixo de 94px dava min-content de 428px no .v2-demo-out (4x94 + gaps
     + padding). A trilha 1fr do .v2-hero-grid não encolhe abaixo disso, então
     em 375px o CTA principal era pintado 62px FORA da tela — invisível para
     scrollWidth porque .v2-hero tem overflow:hidden. */
  width: 100%;
  /* Corte real sai em 9:16 — altura fixa deixava a proporção quase quadrada
     (largura da coluna variava com o card, altura não). Com aspect-ratio a
     largura de cada coluna do grid é que dita a altura, sempre 9:16. */
  aspect-ratio: 9 / 16;
  min-width: 0;
  border-radius: 9px;
  overflow: hidden;
  background: var(--v2-ink);
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  /* --cd (delay deste card específico) vem inline do PHP; a legenda usa a
     mesma variável pra suas próprias palavras ficarem no compasso do card. */
  animation: v2-pop 30s cubic-bezier(.2,.8,.3,1) infinite;
  animation-delay: var(--cd);
}

@keyframes v2-pop {
  0%, 2.67%  { opacity: 0; transform: translateY(12px) scale(0.95) }
  6%   { opacity: 1; transform: translateY(0) scale(1) }
  14%     { opacity: 1; transform: translateY(0) scale(1) }
  16.67%  { opacity: 0; transform: translateY(0) scale(1) }
  100%    { opacity: 0; transform: translateY(0) scale(1) }
}

/* Deriva sutil no enquadramento durante o corte — não é decoração, é o
   auto-reframe de verdade (o crop "segue" o assunto). Só o eixo X se mexe:
   como a altura do corte já cobre 100% da fonte (ver nota em .v2-demo-cap
   mais abaixo), Y nunca teve efeito visual. */
.v2-demo-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: v2-track 30s ease-in-out infinite;
  animation-delay: var(--cd);
}

@keyframes v2-track {
  0%, 6%  { object-position: var(--ox) 52.5% }
  10%      { object-position: calc(var(--ox) + 3.5%) 52.5% }
  14%        { object-position: var(--ox) 52.5% }
  100%       { object-position: var(--ox) 52.5% }
}

.v2-demo-clip b {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3; /* acima do hook (z-index 2), pra o hook passar por trás */
  padding: 1px 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-brand);
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 800;
}

/* Duração no canto oposto ao score — antes dividia o rodapé com a legenda e
   as duas colidiam (texto sobreposto e ilegível). */
.v2-demo-clip em {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3; /* acima do hook, pra o hook passar por trás */
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(16, 14, 13, 0.72);
  color: #fff;
  font-family: 'Chivo', monospace;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hook: a "manchete" do corte, entra animada igual a legenda (não estática)
   — imita a faixa vermelha estampada de vídeos de reação/talk show,
   contrastando com a legenda palavra a palavra que entra por baixo. */
.v2-demo-hook {
  position: absolute;
  top: 24px;
  left: 5px;
  right: 5px;
  z-index: 2;
  padding: 5px 7px;
  background: rgba(207, 20, 20, 0.92);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 9.5px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  border-radius: 3px;
  opacity: 0;
  animation: v2-hook-in 30s cubic-bezier(.2,.8,.3,1) infinite;
  animation-delay: calc(var(--cd) + 0.15s);
}

/* Paleta alternando por corte — mesma ideia dos presets de legenda, pra não
   repetir sempre a mesma faixa vermelha em todo clipe da tela. */
.v2-demo-hook.is-orange {
  background: rgba(255, 107, 26, 0.95);
  color: #fff;
  /* Contorno escuro em volta das letras (margem) pra a fonte branca destacar
     sobre o laranja. */
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.v2-demo-hook.is-white  { background: rgba(255, 255, 255, 0.96); color: #17171b; }
.v2-demo-hook.is-black  { background: rgba(10, 10, 10, 0.92); color: #fff; }

/* Faixa de papel rasgado (PNG) no lugar do retângulo — texto por cima. Sem
   border-radius (as bordas rasgadas do PNG já dão o recorte) e com um pouco
   mais de padding lateral pra o texto não encostar nas pontas irregulares. */
.v2-demo-hook.is-tape {
  background: url('../img/hook-tape.png') center/100% 100% no-repeat;
  color: #fff;
  border-radius: 0;
  padding: 6px 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Mobile: os cortes ficam estreitos e o hook (9.5px) quebrava em muitas linhas,
   comendo metade do card. Encolhe fonte/padding pra ocupar pouco e ainda
   marcar presença. */
@media (max-width: 560px) {
  .v2-demo-hook {
    top: 12px;
    padding: 2px 4px;
    font-size: 6.5px;
    line-height: 1.15;
    border-radius: 2px;
  }
  .v2-demo-hook.is-tape { padding: 3px 6px; }
  /* No mockup pequeno do mobile, os labels "rosto 0.9x" se sobrepõem e
     poluem — some com eles, as caixas de detecção já contam a história. */
  .v2-scene .v2-box i { display: none; }
}

@keyframes v2-hook-in {
  0%, 2.67% { opacity: 0; transform: translateY(-8px) }
  6%     { opacity: 1; transform: translateY(0) }
  14%       { opacity: 1; transform: translateY(0) }
  16.67%    { opacity: 0; transform: translateY(0) }
  100%      { opacity: 0; transform: translateY(0) }
}

/* Legenda: cada PALAVRA entra sozinha, com estouro de escala tipo legenda de
   corte viral — não o texto inteiro surgindo junto (ficava "parado"). */
.v2-demo-cap {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 6px;
  max-height: 2.3em;
  overflow: hidden;
}

.v2-demo-cap i {
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(6px) scale(0.7);
  animation: v2-word-in 30s cubic-bezier(.2,.8,.3,1) infinite;
}

@keyframes v2-word-in {
  0%, 6.67%  { opacity: 0; transform: translateY(6px) scale(0.75) }
  8.67%      { opacity: 1; transform: translateY(0) scale(1.08) }
  10.66%      { opacity: 1; transform: translateY(0) scale(1) }
  14%        { opacity: 1; transform: translateY(0) scale(1) }
  16%     { opacity: 0; transform: translateY(0) scale(1) }
  100%       { opacity: 0 }
}

/* 4 presets reais do editor (não cores inventadas) — cada corte usa um, pra
   mostrar que o produto tem variedade de estilo de legenda:
   vdclip-impact (laranja), hormozi (amarelo), instagram-story (caixa rosa
   sólida, sem estouro por palavra) e youtube-shorts "stomp" (cai de cima,
   vermelho). Ids batem com vdclip-app/src/features/templates/data/presets.ts. */
.v2-cap-impact i:last-child { color: var(--v2-brand); }
.v2-cap-hormozi i:last-child { color: #ffe000; }

.v2-cap-box {
  /* left:auto + margin:0 auto NÃO centraliza um elemento absolute — sem as
     duas âncoras (left/right) o navegador usa a posição estática (esquerda).
     Centraliza de verdade com left:50% + translateX(-50%) no transform. */
  left: 50%;
  right: auto;
  bottom: 10px;
  width: fit-content;
  max-width: calc(100% - 10px);
  padding: 3px 8px;
  border-radius: 5px;
  background: #e1306c;
  opacity: 0;
  transform: translate(-50%, 10px);
  animation: v2-cap-box-in 30s ease-out infinite;
  animation-delay: var(--cd);
}

/* Preset real (instagram-story) não é maiúsculo nem tem contorno — mas sem
   nenhuma das duas pistas visuais das outras 3, lia como chip de UI, não
   legenda. Mantém a caixa rosa (identidade do preset) e anima palavra por
   palavra também, só sem o bounce (que estourava fora da caixa sólida). */
.v2-cap-box i {
  text-shadow: none;
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  animation: v2-word-box-in 30s ease-out infinite;
}

.v2-cap-box i:last-child { color: #ffe8f1; }

@keyframes v2-cap-box-in {
  0%, 6.67%  { opacity: 0; transform: translate(-58.33%, 10px) }
  8.67%      { opacity: 1; transform: translate(-58.33%, 0) }
  14%        { opacity: 1; transform: translate(-58.33%, 0) }
  16%     { opacity: 0; transform: translate(-58.33%, 0) }
  100%       { opacity: 0 }
}

@keyframes v2-word-box-in {
  0%, 7.33%  { opacity: 0; transform: scale(0.85) }
  9.33%         { opacity: 1; transform: scale(1) }
  14%        { opacity: 1; transform: scale(1) }
  16%     { opacity: 0; transform: scale(1) }
  100%       { opacity: 0 }
}

.v2-cap-stomp i {
  transform: translateY(-10px) scale(0.8);
  animation-name: v2-word-stomp;
}

.v2-cap-stomp i:last-child { color: #ff4d4d; }

@keyframes v2-word-stomp {
  0%, 5.72%  { opacity: 0; transform: translateY(-10px) scale(0.8) }
  7.43%      { opacity: 1; transform: translateY(1px) scale(1.05) }
  9.14%      { opacity: 1; transform: translateY(0) scale(1) }
  12%        { opacity: 1; transform: translateY(0) scale(1) }
  13.71%     { opacity: 0; transform: translateY(0) scale(1) }
  100%       { opacity: 0 }
}

/* ── Micro-interações: os cards reagem ── */

.v2-card,
.v2-flow-item {
  transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s ease, border-color 0.22s ease;
}

a.v2-card:hover,
.v2-bento > .v2-card:hover,
.v2-flow-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--v2-shadow-lift);
}

.v2-flow-item:hover { border-color: var(--v2-brand-line); }

.v2-flow-shot { transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s ease; }
.v2-flow-item:hover .v2-flow-n { color: var(--v2-brand); border-color: var(--v2-brand); transition: color 0.22s ease; }
.v2-flow-n { transition: color 0.22s ease; }

.v2-trust-row span { transition: color 0.18s ease, opacity 0.18s ease; }

/* ── Faixa de plataformas com logo de verdade ── */

.v2-plats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 38px;
}

.v2-plat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--v2-muted);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.18s ease;
}

.v2-plat:hover { color: var(--v2-ink); }
.v2-plat svg { height: 19px; width: auto; flex-shrink: 0; }

/* ── Revelação no scroll. Nunca acima da dobra: só seções abaixo do hero,
      e o estado inicial já é visível se o JS não rodar. ── */

.v2-reveal { opacity: 0; transform: translateY(18px); }

.v2-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .v2-demo-scan, .v2-demo-seg, .v2-demo-clip, .v2-demo-clip img, .v2-demo-cap, .v2-demo-cap i, .v2-float-pill, .v2-count, .v2-stage-live i { animation: none !important; }
  .v2-demo-seg, .v2-demo-clip, .v2-demo-cap, .v2-demo-cap i { opacity: 1; transform: none; }
  /* .v2-cap-box precisa do translateX(-50%) pra ficar centralizado — o
     transform:none genérico acima cairia por cascata (mesma especificidade,
     regra posterior) e destravaria a caixa rosa pra esquerda de novo. */
  .v2-cap-box { opacity: 1; transform: translateX(-50%); }
  .v2-float-pill { opacity: 0; }
  .v2-count { --n: var(--target); }
  /* :first-of-type filtra por TAG (div), não por classe — com 5 divs
     irmãs (.v2-stage-app + 4 .v2-float-pill) ele pegava a primeira, que é
     o card, não a pílula. O seletor de irmã adjacente pega a pílula certa. */
  .v2-stage-app + .v2-float-pill { opacity: 1; }
  .v2-reveal { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Preços — sem card "popular" com fita, sem check verde genérico.
   O plano em destaque é o BLOCO ESCURO, contraste em vez de badge.
   ══════════════════════════════════════════════════════════════════════ */

.v2-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  overflow: hidden;
  background: var(--v2-card);
}

@media (max-width: 980px) { .v2-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-plans { grid-template-columns: 1fr; } }

.v2-plan {
  padding: 30px 24px;
  border-right: 1px solid var(--v2-line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.v2-plan:last-child { border-right: 0; }

@media (max-width: 980px) {
  .v2-plan:nth-child(2n) { border-right: 0; }
  .v2-plan:nth-child(-n+2) { border-bottom: 1px solid var(--v2-line); }
}

@media (max-width: 560px) {
  .v2-plan { border-right: 0; border-bottom: 1px solid var(--v2-line); }
  .v2-plan:last-child { border-bottom: 0; }
}

/* Destaque por inversão de superfície, não por fita "Popular" */
.v2-plan.is-featured {
  background: var(--v2-ink);
  color: #f2f2f4;
}

.v2-plan.is-featured .v2-plan-name,
.v2-plan.is-featured .v2-plan-price { color: #fff; }
.v2-plan.is-featured .v2-plan-desc,
.v2-plan.is-featured li { color: #a9a9b4; }
.v2-plan.is-featured li::before { background: var(--v2-brand); }

.v2-plan.is-featured .v2-btn-primary {
  background: var(--v2-card);
  color: var(--v2-ink);
}

.v2-plan-name {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.v2-plan-price {
  font-family: 'Archivo', sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
}

.v2-plan-price small {
  font-family: 'Chivo', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--v2-muted);
}

.v2-plan.is-featured .v2-plan-price small { color: #a9a9b4; }

/* Linha de cobrança: esclarece se o valor exibido (equivalente mensal) é
   debitado mês a mês (Lite) ou de uma vez no ano (Premium/Ultimate) — a
   pergunta nº1 de quem vê "R$33,33/mês" sem saber quando o cartão é cobrado. */
.v2-plan-billed { margin: -12px 0 0; font-size: 12px; color: var(--v2-faint); }
.v2-plan.is-featured .v2-plan-billed { color: #8f8f9c; }
html:not(.light) .v2-plan.is-featured .v2-plan-billed { color: #6b6b76; }

.v2-plan-desc { font-size: 13.5px; line-height: 1.5; color: var(--v2-muted); margin: 0; }

.v2-plan ul { display: grid; gap: 9px; padding-top: 4px; }
.v2-plan .v2-btn { margin-top: auto; }

.v2-plan li {
  position: relative;
  padding-left: 17px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}

/* Traço, não check verde de ícone genérico */
.v2-plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--v2-brand);
}

.v2-plan .v2-btn { width: 100%; margin-top: auto; }

.v2-plans-note {
  text-align: center;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--v2-muted);
}

.v2-plans-note a { font-weight: 600; border-bottom: 1px solid var(--v2-line-strong); }
.v2-plans-note a:hover { border-bottom-color: var(--v2-ink); }

/* ══════════════════════════════════════════════════════════════════════
   Header / footer universais. Servem TODAS as páginas — os nomes de classe
   com prefixo `vd-` no markup são contratos do assets/js/main.js e não podem
   ser renomeados.
   ══════════════════════════════════════════════════════════════════════ */

.v2-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.v2-skip:focus { left: 16px; }

.v2-header {
  /* Página chrome-only não tem `.v2` no body (ver header-v2.php), então a
     tipografia do header não pode depender de herdar `.v2 { font-family:
     Chivo }` — sem isso, os links do menu renderizavam em Inter (fonte do
     corpo antigo) nessas páginas, enquanto em página 100% v2 (com `.v2` no
     body) o mesmo header já saía em Chivo. Declarado direto aqui garante o
     mesmo resultado nos dois casos. */
  font-family: 'Chivo', system-ui, -apple-system, sans-serif;
  position: sticky;
  top: 0;
  /* Precisa vencer o drawer mobile (.v2-mobile, z-index:90) — senão o drawer
     (fundo opaco) cobre o header inteiro quando abre, escondendo logo e o
     botão de fechar (o mesmo hamburger, agora em X) sem nenhuma affordance
     visível de saída. */
  z-index: 100;
  padding: 12px 0;
  background: color-mix(in srgb, var(--v2-bg) 84%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.v2-header.is-stuck { border-bottom-color: var(--v2-line); }
.v2-header-inner { display: flex; align-items: center; gap: 10px; }

.v2-logo { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--v2-ink); }
.v2-logo svg { height: 29px; width: auto; }

.v2-nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }

.v2-nav-group { position: relative; }

.v2-nav-trigger,
.v2-nav-flat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border: 0;
  border-radius: var(--v2-r-pill);
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.v2-nav-trigger:hover,
.v2-nav-flat:hover,
.v2-nav-group.is-open .v2-nav-trigger { background: var(--v2-bg-sunk); color: var(--v2-ink); }

.v2-nav-trigger svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.v2-nav-group.is-open .v2-nav-trigger svg { transform: rotate(180deg); }

.v2-nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  padding: 10px;
  display: none;
  gap: 2px;
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  box-shadow: var(--v2-shadow-lift);
}

.v2-nav-group.is-open .v2-nav-panel { display: grid; }
.v2-nav-panel[data-cols="1"] { grid-template-columns: 1fr; min-width: 310px; }
.v2-nav-panel[data-cols="2"] { grid-template-columns: 1fr 1fr; min-width: 600px; }

/* O último grupo encosta na direita para não sangrar da viewport */
.v2-nav-group:last-of-type .v2-nav-panel { left: auto; right: 0; }

.v2-nav-panel a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  transition: background-color 0.14s ease;
}

.v2-nav-panel a:hover { background: var(--v2-bg-sunk); }

.v2-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--v2-brand-tint);
  color: var(--v2-brand-deep);
}

.v2-nav-ico svg { width: 16px; height: 16px; }
.v2-nav-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.v2-nav-txt strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--v2-ink);
}

.v2-nav-txt small {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--v2-muted);
}

.v2-nav-panel a:hover .v2-nav-txt strong { color: var(--v2-brand-deep); }

.v2-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.v2-signin { font-size: 14.5px; font-weight: 600; padding: 8px 8px; }

.v2-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  background: var(--v2-card);
  color: var(--v2-ink);
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.v2-icon-btn:hover { border-color: var(--v2-ink); }
.v2-icon-btn svg { width: 17px; height: 17px; }

/* Ícone de tema: espelha o contrato do tema antigo (.light = claro é default) */
.v2-icon-btn .icon-sun { display: none; }
.v2-icon-btn .icon-moon { display: block; }
html.light .v2-icon-btn .icon-sun { display: block; }
html.light .v2-icon-btn .icon-moon { display: none; }

.v2-burger { display: none; }
.v2-burger .icon-close { display: none; }
/* Selector antigo era `.vd-mobile-menu.is-open ~ * .v2-burger .icon-menu`
   (general sibling): nunca casava porque `.vd-mobile-menu` vem DEPOIS do
   `<header>` no DOM (ver header-v2.php), e `~` só olha pra frente. O ícone
   nunca trocava pra X — o main.js já seta `aria-expanded`, só faltava ler
   esse atributo em vez de depender de posição no DOM. */
.v2-burger[aria-expanded="true"] .icon-menu { display: none; }
.v2-burger[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1080px) {
  .v2-nav, .v2-signin { display: none; }
  .v2-burger { display: inline-flex; }
  .v2-header .v2-btn { min-height: 44px; }
  .v2-icon-btn { width: 44px; height: 44px; }
}

/* ── Menu mobile ── */

.v2-mobile {
  /* Mesmo motivo do `.v2-header`/`.v2-footer` — nem todo descendente (ex.:
     o rótulo "Aparência" em `.v2-mobile-row`) tem font-family própria. */
  font-family: 'Chivo', system-ui, -apple-system, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--v2-bg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.v2-mobile.is-open { opacity: 1; visibility: visible; transform: none; }
.v2-mobile-inner { padding: 84px 24px 40px; max-width: var(--v2-container); margin: 0 auto; }

.v2-mobile-group { border-bottom: 1px solid var(--v2-line); }

.v2-mobile-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  border: 0;
  background: none;
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--v2-ink);
  cursor: pointer;
}

.v2-mobile-trigger svg { width: 17px; height: 17px; transition: transform 0.22s ease; }
.v2-mobile-group.is-open .v2-mobile-trigger svg { transform: rotate(180deg); }

.v2-mobile-panel { display: none; padding-bottom: 12px; }
.v2-mobile-group.is-open .v2-mobile-panel { display: grid; gap: 2px; }

.v2-mobile-panel a {
  padding: 10px 0 10px 14px;
  font-size: 15px;
  color: var(--v2-muted);
  border-left: 2px solid var(--v2-line);
}

.v2-mobile-panel a:hover { color: var(--v2-brand-deep); border-left-color: var(--v2-brand); }

.v2-mobile-flat {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--v2-line);
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.v2-mobile-actions { display: grid; gap: 10px; margin-top: 26px; }
.v2-mobile-actions .v2-btn { width: 100%; }

/* ── Footer ──
   Sem textura própria, quebrava com o registro do resto da página: depois do
   CTA final escuro (colagem de foto + grão), a página caía num bloco cinza
   chapado sem nenhum tratamento visual — o degrau mais brusco da página.
   Reusa a malha técnica de --v2-bg-sunk (mesma da faixa de recursos e do
   FAQ) e os títulos de coluna trocam cinza genérico pelo eyebrow laranja
   que o resto do site usa pra rotular blocos. */
.v2-footer {
  /* Mesmo motivo do `.v2-header` acima — não depender de herdar `.v2` do
     body, que página chrome-only não tem. */
  font-family: 'Chivo', system-ui, -apple-system, sans-serif;
  background: var(--v2-bg-sunk);
  border-top: 1px solid var(--v2-line);
  padding: 62px 0 30px;
}

.v2-footer > .v2-container { position: relative; z-index: 1; }

.v2-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 52px;
  padding-bottom: 46px;
}

@media (max-width: 900px) { .v2-footer-top { grid-template-columns: 1fr; gap: 40px; } }

.v2-footer-logo svg { height: 28px; }
.v2-footer-tagline { margin: 16px 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--v2-muted); max-width: 34ch; }

.v2-footer-social { display: flex; gap: 8px; margin-bottom: 20px; }

.v2-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-pill);
  color: var(--v2-muted);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.v2-footer-social a:hover { color: var(--v2-ink); border-color: var(--v2-ink); }
.v2-footer-social svg { width: 16px; height: 16px; }

.v2-footer-app {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  color: var(--v2-ink);
  transition: border-color 0.16s ease;
}

.v2-footer-app:hover { border-color: var(--v2-ink); }
.v2-footer-app svg { width: 19px; height: 19px; }
.v2-footer-app span { display: flex; flex-direction: column; line-height: 1.2; }
.v2-footer-app-sm { font-size: 10px; color: var(--v2-muted); }
.v2-footer-app-lg { font-size: 14px; font-weight: 600; }

.v2-footer-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

@media (max-width: 900px) { .v2-footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .v2-footer-cols { grid-template-columns: repeat(2, 1fr); } }

.v2-footer-col h3 {
  font-family: 'Chivo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--v2-brand-deep);
  margin: 0 0 14px;
}

.v2-footer-col li + li { margin-top: 9px; }
.v2-footer-col a { font-size: 14px; color: var(--v2-ink-soft); transition: color 0.14s ease; }
.v2-footer-col a:hover { color: var(--v2-brand-deep); }

.v2-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--v2-line);
  font-size: 13.5px;
  color: var(--v2-muted);
}

/* ── Seletor de idiomas (markup portado do footer.php — classes são contrato) ── */

.vd-lang-switcher { position: relative; }

.vd-lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  background: var(--v2-card);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v2-ink);
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.vd-lang-current:hover { border-color: var(--v2-ink); }
.vd-lang-current svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.vd-lang-switcher.is-open .vd-lang-current svg { transform: rotate(180deg); }

.vd-lang-dropdown {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  padding: 7px;
  display: none;
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: var(--v2-shadow-lift);
}

.vd-lang-switcher.is-open .vd-lang-dropdown { display: block; }

.vd-lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--v2-ink-soft);
  transition: background-color 0.14s ease;
}

.vd-lang-dropdown a:hover { background: var(--v2-bg-sunk); }
.vd-lang-dropdown .is-active a { background: var(--v2-bg-sunk); font-weight: 600; color: var(--v2-ink); }
.vd-lang-code { margin-left: auto; font-size: 11px; color: var(--v2-faint); text-transform: uppercase; }

/* ── Hero escuro: filhos herdam a superfície do palco, não o tema da página ── */
.v2-hero-grid { position: relative; z-index: 2; }
.v2-hero-copy h1 { color: var(--v2-stage-text); }
.v2-hero-lead { color: var(--v2-stage-muted); }
.v2-hero-proof { color: var(--v2-stage-text); }
.v2-hero-note { color: var(--v2-stage-muted); }
.v2-hero .v2-dot { background: var(--v2-stage-line); }
.v2-hero .v2-avatars img { border-color: var(--v2-stage); }

/* Card do app era branco opaco — troca pro mesmo vidro fosco do .v2-field
   acima, flutuando sobre o palco escuro em vez de um cartão sólido. */
.v2-hero .v2-stage-app {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.v2-hero .v2-demo { background: rgba(0, 0, 0, 0.22); }
.v2-hero .v2-panel-bar { border-bottom-color: rgba(255, 255, 255, 0.14); }
.v2-hero .v2-panel-title { color: var(--v2-stage-text); }
.v2-hero .v2-panel-status { background: rgba(255, 255, 255, 0.12); color: var(--v2-stage-text); }
/* --v2-line é cinza-claro (#dededf) pensado pra fundo branco — na régua da
   timeline isso pintava uma barra quase branca atrás dos segmentos laranja. */
.v2-hero .v2-demo-track { background: rgba(255, 255, 255, 0.08); }

.v2-hero .v2-field {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--v2-stage-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

.v2-hero .v2-field input { color: var(--v2-stage-text); }
.v2-hero .v2-field input::placeholder { color: var(--v2-stage-muted); }
.v2-hero .v2-field > svg { color: var(--v2-stage-muted); }

/* CTA no palco escuro: o preto some, então inverte para superfície clara */
.v2-hero .v2-btn-primary { background: var(--v2-card); color: var(--v2-ink); }
.v2-hero .v2-btn-primary:hover { background: #fff; color: var(--v2-stage); }

/* Header sobre o hero escuro, antes do scroll. Escopado a páginas cuja
   primeira seção dentro de <main> é realmente o hero escuro (.v2-hero) —
   sem isso, páginas com hero claro (vs-hub, vs-competitor, pricing)
   herdavam texto de nav claro sobre fundo claro, quase ilegível antes de
   rolar. :has() já é usado em outros pontos deste arquivo.
   `:not(:has(.v2-mobile.is-open))` — sem isso, abrir o menu mobile ANTES de
   rolar a página (header ainda `:not(.is-stuck)`) deixava logo e botão
   "Começar grátis" em cor clara pensada pro hero escuro, só que por cima do
   fundo BRANCO sólido do drawer mobile — quase invisíveis. O drawer cobre a
   tela toda; a partir do momento em que ele abre, o hero escuro não está
   mais atrás do header, então o header deve voltar ao estilo normal. */
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) { background: transparent; backdrop-filter: none; }
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-logo,
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-nav-trigger,
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-nav-flat,
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-signin { color: var(--v2-stage-text); }

body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-nav-trigger:hover,
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-nav-flat:hover,
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-nav-group.is-open .v2-nav-trigger { background: rgba(255,255,255,0.1); }

/* Sem isso, `.v2-nav-group.is-open .v2-nav-trigger` (fundo claro + texto
   escuro, pensado pro header normal) só tinha a cor do texto sobrescrita
   pela regra acima — sobrava fundo claro com texto claro (quase invisível)
   num dropdown aberto por clique enquanto o mouse passava por outro item
   do menu, ainda sobre o hero escuro. */
body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-nav-group.is-open .v2-nav-trigger { color: var(--v2-stage-text); }

body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--v2-stage-line);
  color: var(--v2-stage-text);
}

body.v2:has(main > .v2-hero:first-child):not(:has(.v2-mobile.is-open)) .v2-header:not(.is-stuck) .v2-btn-primary { background: var(--v2-card); color: var(--v2-ink); }

/* O header é sticky e ocupa fluxo, então o hero começava ABAIXO dele e a barra
   flutuava sobre o fundo claro da página em vez de sobre o palco escuro. Puxa o
   hero para trás do header e compensa no padding. */
.v2-hero {
  margin-top: calc(var(--v2-header-h) * -1);
  padding-top: calc(84px + var(--v2-header-h));
}

:root { --v2-header-h: 66px; }

@media (max-width: 1080px) { :root { --v2-header-h: 70px; } }

/* Em 375px o trio Entrar + CTA + tema + hambúrguer estoura 4px. Abaixo de
   420px o toggle de tema sai do header (segue disponível no menu mobile). */
@media (max-width: 420px) {
  .v2-header-actions { gap: 6px; }
  .v2-header-actions .vd-theme-toggle { display: none; }
  .v2-header .v2-btn-sm { padding: 0 14px; font-size: 13.5px; }
}

.v2-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--v2-line);
  font-size: 15px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   Tema escuro. O sistema do tema usa `.light` no <html> como DEFAULT
   (claro é opt-out), então escuro é a AUSÊNCIA da classe — igual ao
   variables.css do tema antigo. Sem este bloco o botão alternava a classe
   e nada mudava na tela: era o "toggle não funciona".
   ══════════════════════════════════════════════════════════════════════ */

html:not(.light) {
  --v2-bg: #0d0d0f;
  --v2-bg-sunk: #131316;
  --v2-card: #17171b;

  --v2-ink: #f2f2f4;
  --v2-ink-soft: #c9c9d1;
  --v2-muted: #9a9aa6;
  --v2-faint: #71717d;
  --v2-line: #26262c;
  --v2-line-strong: #35353d;

  --v2-brand: #ff6b1a;
  --v2-brand-deep: #ff8340;
  --v2-brand-tint: rgba(255, 107, 26, 0.14);
  --v2-brand-line: rgba(255, 107, 26, 0.3);
  --v2-brand-grad: linear-gradient(96deg, #ff8340 0%, #ff6b1a 38%, #ffa060 72%, #ff8340 100%);

  /* No escuro o CTA preto some no fundo — inverte para superfície clara */
  --v2-cta: #f2f2f4;
  --v2-cta-hover: #ffffff;
  --v2-on-cta: #0d0d0f;

  --v2-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.34);
  --v2-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 56px rgba(0, 0, 0, 0.5);
}

/* Plano em destaque: no claro inverte para escuro; no escuro precisa do oposto */
html:not(.light) .v2-plan.is-featured { background: #f2f2f4; color: #17171b; }
html:not(.light) .v2-plan.is-featured .v2-plan-name,
html:not(.light) .v2-plan.is-featured .v2-plan-price { color: #0d0d0f; }
html:not(.light) .v2-plan.is-featured .v2-plan-desc,
html:not(.light) .v2-plan.is-featured li { color: #55555f; }
html:not(.light) .v2-plan.is-featured .v2-plan-price small { color: #55555f; }
html:not(.light) .v2-plan.is-featured .v2-btn-primary { background: #17171b; color: #f2f2f4; }

/* Case escuro e CTA final: no tema escuro precisam se separar do fundo */
html:not(.light) .v2-case,
html:not(.light) .v2-cta-final-box { background: #1b1b20; border: 1px solid var(--v2-line); }

/* ── Preferências no rodapé: tema + idioma lado a lado ── */
.v2-footer-prefs { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.v2-theme-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  background: var(--v2-card);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v2-ink);
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.v2-theme-btn:hover { border-color: var(--v2-ink); }
.v2-theme-face { display: none; align-items: center; gap: 8px; }
.v2-theme-face svg { width: 15px; height: 15px; }
.v2-theme-btn .icon-moon { display: inline-flex; }
html.light .v2-theme-btn .icon-moon { display: none; }
html.light .v2-theme-btn .icon-sun { display: inline-flex; }

/* ══════════════════════════════════════════════════════════════════════
   Ritmo vertical modulado por PESO de conteúdo, não uniforme.
   O padding de 104px idêntico em 6 seções produzia 208px entre todas —
   funciona onde o fundo muda, e vira vazio morto onde não muda (o buraco
   entre depoimentos e preços era o maior do documento).
   ══════════════════════════════════════════════════════════════════════ */

/* Fronteira sem troca de faixa: metade do respiro, senão vira buraco. */
.v2-section + .v2-section:not([style*="bg-sunk"]) { padding-top: 64px; }

/* Seções densas pedem menos respiro; as leves, mais. */
.v2-section:has(.v2-bento) { padding-block: 88px; }
.v2-section:has(.v2-plans) { padding-top: 64px; padding-bottom: 88px; }
.v2-section:has(.v2-proof-grid) { padding-bottom: 72px; }
.v2-cta-final { padding-block: 88px 104px; }

/* ── Preços: gap real, listas equalizadas, destaque com elevação ── */

.v2-plans {
  gap: 14px;
  border: 0;
  background: none;
  overflow: visible;
  align-items: stretch;
}

.v2-plan {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  background: var(--v2-card);
  padding: 26px 22px;
  transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.v2-plan:last-child, .v2-plan:nth-child(2n), .v2-plan:nth-child(-n+2) { border-right-width: 1px; border-bottom-width: 1px; }

.v2-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow-lift);
  border-color: var(--v2-line-strong);
  z-index: 2;
}

.v2-plan.is-featured:hover { transform: translateY(-11px); }

/* Destaque por elevação + escala + selo, não só inversão de cor */
.v2-plan.is-featured {
  position: relative;
  transform: translateY(-8px);
  padding-bottom: 34px;
  box-shadow: var(--v2-shadow-lift);
  border-color: transparent;
}

@media (max-width: 980px) { .v2-plan.is-featured { transform: none; } }

/* Selo sólido (não um vidro translúcido): precisa se destacar igual nos
   dois fundos possíveis do card em destaque (escuro no tema claro, claro
   no tema escuro), então usa cor fixa em vez das variáveis de tema. */
.v2-plan-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 5px 13px;
  border-radius: var(--v2-r-pill);
  background: #ff6b1a;
  color: #17171b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(255, 107, 26, 0.45);
}

/* Traço lia como "excluído". Check lê como "incluso". */
.v2-plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--v2-brand);
  border-bottom: 2px solid var(--v2-brand);
  transform: rotate(-45deg);
  background: none;
  border-radius: 0;
}

.v2-plan.is-featured li::before { border-color: var(--v2-brand); }
.v2-plan li { padding-left: 20px; }

/* Nota de preços: 151 caracteres por linha, dobro do legível */
.v2-plans-note { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ── FAQ e CTA final voltam para o eixo x das outras seções ── */
.v2-lp-narrow, .v2-faq .v2-container { }
.v2-faq .v2-head-left h2, .v2-cta-final .v2-head-left h2 { text-align: left; }

.v2-cta-final-form { max-width: 480px; margin: 28px auto 0; }

.v2-cta-final-box .v2-field {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.v2-cta-final-box .v2-field input { color: #fff; }
.v2-cta-final-box .v2-field input::placeholder { color: #a9a09a; }
.v2-cta-final-box .v2-field > svg { color: #a9a09a; }

/* ── Os 3 cards de baixo eram só texto (137px) ao lado de dois com imagem:
      duas linguagens de card no mesmo grid, e a de baixo lia como placeholder.
      Ganham um dado concreto que sustenta a afirmação. ── */

.v2-feature-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}

.v2-feature-stat b {
  font-family: 'Archivo', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--v2-brand-deep);
}

.v2-feature-stat span { font-size: 13px; color: var(--v2-muted); }

/* ── Legendas: ciclo automático em CSS puro, não clique-e-compare. A 1ª
   versão pedia clique num preset; não ficou claro como interação (usuário
   reportou "quebrado"). As 2 células de foco principal da seção (esta e o
   rastreamento facial abaixo) precisam de prova visual em MOVIMENTO, sem
   exigir ação de quem tá só rolando a página. ── */
.v2-bento-shot { position: relative; }

.v2-cap-demo-text {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  margin: 0;
  text-align: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.4);
  opacity: 0;
  animation: v2-cap-demo-cycle 8.8s ease infinite;
}

/* 4 presets reais do editor, mesma identidade de cor da vdclip-caption-
   presets skill: impact (branco), hormozi (amarelo com contorno), box
   (rosa sólido, estilo Stories) e stomp (vermelho). */
.v2-cap-demo-hormozi { color: #ffe000; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.v2-cap-demo-stomp { color: #ff4d4d; }

.v2-cap-demo-box {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: fit-content;
  max-width: calc(100% - 20px);
  text-transform: none;
  font-weight: 700;
  background: #e1306c;
  padding: 5px 12px;
  border-radius: 6px;
  text-shadow: none;
}

@keyframes v2-cap-demo-cycle {
  0%, 2% { opacity: 0; }
  6%, 20% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

/* ── Enquadramento automático: a caixa alterna sozinha entre os 2 rostos
   (crossfade, mesma técnica de .v2-panel-status no hero), provando "a
   câmera segue quem fala" em movimento — texto parado não prova isso. ── */
.v2-facetrack-box {
  position: absolute;
  border: 2px solid var(--v2-brand);
  border-radius: 4px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .14);
  opacity: 0;
  animation: v2-facetrack-cycle 6s ease-in-out infinite;
}

.v2-facetrack-b { animation-delay: 3s; }

@keyframes v2-facetrack-cycle {
  0%, 4% { opacity: 0; }
  10%, 42% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

.v2-facetrack-tag {
  position: absolute;
  top: -23px;
  left: -2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  background: var(--v2-brand);
  color: #fff;
  font-style: normal;
  font-family: 'Archivo', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.v2-facetrack-tag svg { width: 9px; height: 9px; }

/* ── Face Motion: antes/depois lado a lado ── */
.v2-facemotion-intro {
  max-width: 62ch;
  margin: 0 auto 44px;
  text-align: center;
}
.v2-facemotion-intro .v2-h2 { margin-top: 14px; }
.v2-facemotion-intro .v2-lead { margin-top: 14px; }

.v2-facemotion-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}

.v2-facemotion-panel {
  margin: 0;
}

.v2-facemotion-panel img,
.v2-facemotion-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--v2-r-card);
  border: 1px solid var(--v2-line);
}

.v2-facemotion-media { position: relative; overflow: hidden; }
.v2-facemotion-media img { border: 0; border-radius: 0; height: 100%; }
/* Aqui o objetivo é o antes/depois estático mostrar a detecção com clareza
   — sem o ciclo de aparecer/sumir de 5s pensado pro hero (.v2-box-in). */
.v2-facemotion-media .v2-box { opacity: 1; animation: none; transform: none; }

.v2-facemotion-panel.is-active img,
.v2-facemotion-panel.is-active .v2-facemotion-media {
  border-color: var(--v2-brand-line);
  box-shadow: 0 0 0 3px var(--v2-brand-tint);
}

.v2-facemotion-panel figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v2-muted);
}

.v2-facemotion-panel.is-active figcaption { color: var(--v2-brand-deep); }

.v2-facemotion-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-brand);
  animation: v2-facemotion-pulse 1.6s ease-in-out infinite;
}

@keyframes v2-facemotion-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.v2-facemotion-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v2-brand);
  color: #fff;
  flex-shrink: 0;
}
.v2-facemotion-arrow svg { width: 20px; height: 20px; }

.v2-facemotion-cta { text-align: center; margin-top: 40px; }

@media (max-width: 720px) {
  .v2-facemotion-compare { grid-template-columns: 1fr; }
  .v2-facemotion-arrow { transform: rotate(90deg); margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-facemotion-dot { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-cap-demo-text, .v2-facetrack-box { animation: none !important; }
  .v2-cap-demo-text:first-child, .v2-facetrack-a { opacity: 1; }
}

/* ── Coerência de fundo: o CTA final passa a falar a mesma língua do hero
      (luz direcional + grão + malha), em vez de ser um bloco preto solto. ── */

.v2-cta-final-box {
  background:
    radial-gradient(78% 62% at 50% -10%, rgba(224, 85, 0, 0.28), rgba(224, 85, 0, 0) 68%),
    var(--v2-stage);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.v2-cta-final-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 78%);
}

.v2-cta-final-box::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E");
  opacity: 0.42;
  mix-blend-mode: soft-light;
  width: auto;
  height: auto;
  inset: 0;
  left: 0;
  top: 0;
  transform: none;
  background-size: auto;
  z-index: 2;
}

.v2-cta-final-box > * { z-index: 3; }
.v2-cta-final-box .v2-h2 { max-width: 16ch; margin-inline: auto; }

/* Mesma malha discreta atrás do case escuro dos depoimentos, para o escuro da
   página inteira ser um sistema e não três blocos pretos diferentes. */
.v2-case { background: var(--v2-stage); }

/* ── Profundidade da plataforma ── */
.v2-platform-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

@media (max-width: 900px) { .v2-platform-grid { grid-template-columns: 1fr; gap: 32px; } }

.v2-frame-dark {
  border-radius: var(--v2-r-card);
  overflow: hidden;
  background: var(--v2-stage);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--v2-shadow-lift);
}

.v2-frame-dark .v2-frame-bar { border-bottom-color: rgba(255, 255, 255, 0.08); }
.v2-frame-dark img { width: 100%; height: auto; display: block; }

.v2-caps { display: grid; gap: 2px; }

.v2-caps li {
  display: grid;
  gap: 3px;
  padding: 14px 0;
  border-bottom: 1px solid var(--v2-line);
}

.v2-caps li:last-child { border-bottom: 0; }

.v2-caps strong {
  font-family: 'Archivo', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.v2-caps span { font-size: 14px; line-height: 1.5; color: var(--v2-muted); }

/* ── B2B ── */
.v2-b2b-box {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  padding: clamp(32px, 4vw, 52px);
  border-radius: var(--v2-r-card);
  background: var(--v2-bg-sunk);
  border: 1px solid var(--v2-line);
}

@media (max-width: 900px) { .v2-b2b-box { grid-template-columns: 1fr; gap: 30px; } }

.v2-b2b-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9c3a00;
}

.v2-b2b-copy h2 { max-width: 16ch; }
.v2-b2b-copy .v2-lead { margin-top: 14px; max-width: 40ch; }
.v2-b2b-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.v2-b2b-actions .v2-btn { white-space: nowrap; }
.v2-b2b-copy { min-width: 0; }

.v2-b2b-list { display: grid; gap: 2px; align-content: center; }

.v2-b2b-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--v2-line-strong);
}

.v2-b2b-list li:last-child { border-bottom: 0; }

.v2-b2b-list li > svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--v2-brand);
}

.v2-b2b-list strong {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.v2-b2b-list span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--v2-muted); }

/* podcast-editor.png é retrato: sem teto, esticava a coluna de mídia inteira
   e desalinhava o grid. Recorta para paisagem, que é a proporção do editor. */
.v2-frame-dark img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 28%;
}

/* ── Nichos: grade em vez de abas. As abas antigas escondiam 5 de 6 atrás de
      JS — custa SEO e esconde justamente a prova numérica que convence. ── */

/* ══════════ Nichos: mosaico editorial ══════════
   A foto é o bloco, não o enfeite de um card. Sem moldura branca, sem
   número: a seção fica entre o bento de recursos e a prova social, as duas
   feitas de cards claros, então qualquer card aqui lia como o terceiro
   grid seguido. Azulejos de tamanhos diferentes quebram a monotonia da
   grade regular. */
.v2-niche-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.v2-niche-tile {
  position: relative;
  grid-column: span 1;
  aspect-ratio: 3 / 4;
  /* A altura da linha é ditada pelo azulejo mais alto; sem height:100% os
     menores param antes e a base da linha fica serrilhada. */
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--v2-stage);
  text-decoration: none;
  isolation: isolate;
}

.v2-niche-tile.is-lg { grid-column: span 2; aspect-ratio: 3 / 2; }

.v2-niche-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
}

.v2-niche-tile:hover img { transform: scale(1.05); }

/* Scrim: sem ele o nome some em foto clara (a de aula é quase branca). */
.v2-niche-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16,14,13,0.88) 0%, rgba(16,14,13,0.45) 34%, rgba(16,14,13,0.05) 62%);
}

.v2-niche-tile-copy {
  position: absolute;
  z-index: 1;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: var(--v2-stage-text);
}

.v2-niche-tile-copy b {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.v2-niche-tile.is-lg .v2-niche-tile-copy b { font-size: 24px; }

.v2-niche-tile-copy em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(244, 241, 238, 0.72);
}

@media (max-width: 900px) {
  .v2-niche-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-niche-tile.is-lg { grid-column: span 2; aspect-ratio: 16 / 9; }
}

@media (max-width: 520px) {
  .v2-niche-mosaic { grid-template-columns: 1fr; }
  .v2-niche-tile, .v2-niche-tile.is-lg { grid-column: span 1; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-niche-tile img { transition: none; }
  .v2-niche-tile:hover img { transform: none; }
}

/* ── Faixa de plataformas agora vive DENTRO do hero, como banda inferior.
      Resolve os 89px de desbalanço entre as colunas com conteúdo real em vez
      de espaçamento, e elimina uma seção solta do empilhamento. ── */

.v2-hero-trust {
  position: relative;
  z-index: 2;
  /* Cortes do mockup viraram 9:16 de verdade (mais altos), a coluna direita
     cresceu e esse espaçamento — antes calibrado pro desbalanço entre as
     colunas — ficou folgado demais. */
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-hero-trust-label {
  text-align: center;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-stage-muted);
}

.v2-hero-trust .v2-plats { gap: 14px 34px; }
.v2-hero-trust .v2-plat { color: var(--v2-stage-muted); }
.v2-hero-trust .v2-plat:hover { color: var(--v2-stage-text); }

/* o hero cresceu com a banda: reduz o respiro de baixo */
.v2-hero { padding-bottom: 56px; }

/* ══════════════════════════════════════════════════════════════════════
   Caixas de detecção sobre o frame do vídeo. Mostra a IA assistindo em vez
   de só afirmar. Componente reutilizável: qualquer imagem dentro de um
   position:relative aceita .v2-box com left/top/width/height em %.
   ══════════════════════════════════════════════════════════════════════ */

.v2-box {
  position: absolute;
  z-index: 3;
  border: 1.5px solid var(--v2-brand);
  border-radius: 3px;
  background: rgba(224, 85, 0, 0.07);
  opacity: 0;
  transform: scale(0.96);
  animation: v2-box-in 5s cubic-bezier(.2,.8,.3,1) infinite;
  pointer-events: none;
}

.v2-box.is-face { border-color: #4da3ff; background: rgba(77, 163, 255, 0.08); }

.v2-box i {
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  transform: translateY(-100%);
  padding: 1px 5px;
  border-radius: 2px 2px 0 0;
  background: var(--v2-brand);
  color: #fff;
  font-family: 'Chivo', monospace;
  font-size: 8.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.v2-box.is-face i { background: #4da3ff; }

/* Label embaixo da caixa (pra rostos no topo do frame, onde o label em cima
   encostaria/cortaria na borda). Ativado pela classe 'label-below'. */
.v2-box.label-below i {
  top: auto;
  bottom: -1.5px;
  transform: translateY(100%);
  border-radius: 0 0 2px 2px;
}

@keyframes v2-box-in {
  0%, 14%  { opacity: 0; transform: scale(0.96) }
  22%      { opacity: 1; transform: scale(1) }
  84%      { opacity: 1; transform: scale(1) }
  100%     { opacity: 0; transform: scale(1) }
}

@media (prefers-reduced-motion: reduce) {
  .v2-box { animation: none; opacity: 1; transform: none; }
}

/* ── FAQ em duas colunas: volta ao eixo x das outras seções e ganha densidade
      (a primeira pergunta nasce aberta, em vez de 5 linhas iguais e vazias). ── */

.v2-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) { .v2-faq-grid { grid-template-columns: 1fr; gap: 30px; } }

.v2-faq-aside { position: sticky; top: calc(var(--v2-header-h) + 28px); }
@media (max-width: 900px) { .v2-faq-aside { position: static; } }

.v2-faq-aside h2 { max-width: 12ch; }
.v2-faq-aside .v2-lead { margin-top: 14px; max-width: 30ch; }

.v2-faq-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--v2-brand-deep);
  transition: gap 0.18s ease;
}

.v2-faq-help svg { width: 14px; height: 14px; }
.v2-faq-help:hover { gap: 12px; }

.v2-faq-list { display: grid; }
/* Só a variante em grid/aside (home v2) não tem cabeçalho .v2-head-left com
   régua própria antes da lista — sem essa borda, a primeira pergunta ficaria
   sem separação nenhuma. Nas páginas com .v2-head-left (pricing, landing),
   duplicar a régua aqui criava um vão vazio que lia como uma segunda lista. */
.v2-faq-grid .v2-faq-item:first-child { border-top: 1px solid var(--v2-line); }
.v2-faq-trigger { padding: 20px 0; font-size: 16.5px; gap: 22px; }
.v2-faq-panel p { padding-bottom: 20px; max-width: 58ch; }

/* ── Cenas: a mesma IA reconhecendo nichos diferentes, uma por vez ── */

.v2-demo-src { position: relative; }

.v2-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: v2-scene 30s ease-in-out infinite;
}

.v2-scene:first-child { position: relative; }
.v2-scene img { width: 100%; height: 100%; object-fit: cover; }

@keyframes v2-scene {
  0%      { opacity: 0 }
  2%   { opacity: 1 }
  14.67%  { opacity: 1 }
  17.34%  { opacity: 0 }
  100%    { opacity: 0 }
}

/* Cada cena tem 5s dentro do ciclo de 30s (6 nichos): a variável --sd carrega
   o mesmo delay do .v2-scene (inline via PHP) para as caixas e os cortes
   tocarem no mesmo compasso. */
.v2-scene:nth-child(1) { --sd: 0.6s; }
.v2-scene:nth-child(2) { --sd: 5.6s; }
.v2-scene:nth-child(3) { --sd: 10.6s; }
.v2-scene:nth-child(4) { --sd: 15.6s; }
.v2-scene:nth-child(5) { --sd: 20.6s; }
.v2-scene:nth-child(6) { --sd: 25.6s; }

.v2-scene .v2-box { animation-duration: 30s; animation-delay: var(--sd); }

@keyframes v2-box-in {
  0%, 1.71%  { opacity: 0; transform: scale(0.96) }
  4%         { opacity: 1; transform: scale(1) }
  12%        { opacity: 1; transform: scale(1) }
  14.29%     { opacity: 0 }
  100%       { opacity: 0 }
}

/* O contador muda de nicho pra nicho: 7 pílulas empilhadas no mesmo lugar,
   cada uma só visível na janela da sua cena — sem JS. */
.v2-float-pill {
  animation: v2-float-pill-cycle 30s ease-in-out infinite;
  animation-delay: var(--pd);
}

@keyframes v2-float-pill-cycle {
  0%      { opacity: 0 }
  2%   { opacity: 1 }
  14.67%  { opacity: 1 }
  17.34%  { opacity: 0 }
  100%    { opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .v2-scene { animation: none; opacity: 0; }
  .v2-scene:first-child { opacity: 1; }
  .v2-scene .v2-box { animation: none; opacity: 1; transform: none; }
}

/* 10 plataformas não cabem numa fila: compacta e deixa quebrar em duas
   linhas centradas, sem cortar. */
.v2-hero-trust .v2-plats { gap: 12px 26px; }
.v2-hero-trust .v2-plat { font-size: 13px; gap: 7px; }
.v2-hero-trust .v2-plat svg { height: 16px; }
.v2-hero { padding-bottom: 44px; }

/* ── Painel de produto no lugar do chrome de browser falso. Um "navegador"
      desenhado é adereço genérico; isto é a interface do que a IA está
      fazendo, que é o que interessa mostrar. ── */

.v2-panel-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--v2-line);
}

.v2-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--v2-ink);
}

.v2-panel-title svg { width: 14px; height: 14px; color: var(--v2-brand-deep); }

/* 4 badges empilhados no mesmo lugar (um por nicho), igual à pílula de
   contagem: cada um só visível na janela da sua cena, via crossfade — mesmo
   keyframe v2-float-pill-cycle já usado lá embaixo. */
.v2-panel-status {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-brand-tint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v2-brand-deep);
  white-space: nowrap;
  animation: v2-float-pill-cycle 30s ease-in-out infinite;
}

.v2-panel-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-brand);
  animation: v2-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .v2-panel-status { animation: none; opacity: 0; }
  .v2-panel-status--first { opacity: 1; }
  .v2-panel-status i { animation: none; }
}


/* ── Free sai da grade: vira faixa horizontal discreta em cima. Os três pagos
      ficam com a grade inteira e ganham peso — antes o Free ocupava 25% da
      atenção da seção sendo o plano que não gera receita. ── */

.v2-free-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 24px;
  margin-bottom: 22px;
  border: 1px dashed var(--v2-line-strong);
  border-radius: var(--v2-r-card);
  background: none;
}

.v2-free-strip .v2-plan-name { display: flex; align-items: baseline; gap: 9px; }

.v2-free-strip .v2-plan-name span {
  font-family: 'Archivo', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--v2-ink);
}

.v2-free-strip .v2-plan-desc { margin-top: 3px; }
.v2-plans { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .v2-plans { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   O corpo claro era cinza chapado do início ao fim. Ganha grão de filme
   e uma malha muito discreta — a mesma linguagem do hero, em intensidade
   menor. Textura, não decoração: nada de blob ou gradiente colorido.
   ══════════════════════════════════════════════════════════════════════ */

/* Tentei grão no corpo inteiro com mix-blend-mode: multiply — em fundo claro
   isso escurece e mancha tudo, deixando a página com cara de superfície suja.
   Removido. A textura fica só onde funciona: nas superfícies ESCURAS (hero e
   CTA final), onde soft-light dá grão de filme sem levantar os pretos. */

/* Malha técnica atrás das seções de fundo rebaixado, para a faixa deixar de
   ser só um degrau de luminância e passar a ter matéria. */
.v2-section[style*="bg-sunk"],
.v2-faq,
.v2-footer,
.vd-pricing-hero {
  position: relative;
}

.v2-section[style*="bg-sunk"]::before,
.v2-faq::before,
.v2-footer::before,
.vd-pricing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(18, 18, 21, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 18, 21, 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 82%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 82%);
}

html:not(.light) .v2-section[style*="bg-sunk"]::before,
html:not(.light) .v2-faq::before,
html:not(.light) .v2-footer::before,
html:not(.light) .vd-pricing-hero::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.v2-section > .v2-container { position: relative; z-index: 1; }

/* ── Créditos como número-herói: é o que realmente separa os planos ── */

.v2-plan-credits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}

.v2-plan-credits-main { display: flex; align-items: baseline; gap: 8px; }

/* Créditos do Premium/Ultimate são o pacote ANUAL inteiro (entregue de uma
   vez), não uma cota mensal — essa linha mostra o ritmo mensal equivalente,
   que é a pergunta real de quem pensa em "quanto uso por mês". */
.v2-plan-credits-sub { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--v2-faint); }
.v2-plan.is-featured .v2-plan-credits-sub { color: #8f8f9c; }
html:not(.light) .v2-plan.is-featured .v2-plan-credits-sub { color: #6b6b76; }

.v2-plan-credits b {
  font-family: 'Archivo', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--v2-ink);
}

.v2-plan-credits span { font-size: 12.5px; line-height: 1.3; color: var(--v2-muted); }

.v2-plan.is-featured .v2-plan-credits { border-color: rgba(255,255,255,0.14); }
.v2-plan.is-featured .v2-plan-credits b { color: #fff; }
.v2-plan.is-featured .v2-plan-credits span { color: #a9a9b4; }

html:not(.light) .v2-plan.is-featured .v2-plan-credits { border-color: rgba(0,0,0,0.12); }
html:not(.light) .v2-plan.is-featured .v2-plan-credits b { color: #0d0d0f; }
html:not(.light) .v2-plan.is-featured .v2-plan-credits span { color: #55555f; }

.v2-plan-soma {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v2-plan.is-featured .v2-plan-soma { color: #8f8f9c; }
.v2-plan ul { margin-top: -4px; }

/* O header é sticky: sem scroll-margin, pular para #precos deixa o título
   escondido atrás dele. Restaura as âncoras que a home antiga tinha
   (#como-funciona, #funcionalidades, #editor, #nichos, #precos, #faq) — o
   menu do site aponta para elas. */
.v2 section[id] { scroll-margin-top: calc(var(--v2-header-h) + 20px); }

/* ── B2B: o conteúdo morava dentro de .v2-b2b-box com 53px de padding, jogando
      o título para x=237 enquanto as outras 9 seções alinham em x=184. Era o
      desalinhamento mais visível da página. Vira faixa full-bleed com o
      conteúdo no container normal. ── */

/* Enterprise é o degrau de maior ticket da página: ganha superfície escura
   própria, como o CTA final, em vez de ser mais um card cinza. O conteúdo
   mantém o eixo x=184 das outras seções porque o padding é simétrico. */
.v2-b2b-box {
  position: relative;
  overflow: hidden;
  /* O padding do painel jogava o título para x=245 enquanto as outras seções
     alinham em x=184. Sangra o painel para FORA na mesma medida, de modo que
     o conteúdo caia no eixo — o painel existe sem quebrar o rendilhado. */
  --b2b-pad: min(24px, clamp(20px, 3.4vw, 48px));
  margin-inline: calc(var(--b2b-pad) * -1);
  padding: clamp(34px, 4.5vw, 56px) clamp(22px, 3.4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--v2-r-card);
  background:
    radial-gradient(74% 60% at 78% -8%, rgba(224, 85, 0, 0.26), rgba(224, 85, 0, 0) 66%),
    var(--v2-stage);
  color: var(--v2-stage-text);
}

.v2-b2b-box::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 0%, transparent 76%);
          mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 0%, transparent 76%);
}

.v2-b2b-box > * { position: relative; z-index: 1; }
.v2-b2b-box .v2-h2 { color: #fff; }
.v2-b2b-box .v2-lead { color: var(--v2-stage-muted); }
.v2-b2b-tag { color: #ff9d5c !important; }

.v2-b2b-list li { border-bottom-color: rgba(255, 255, 255, 0.1); }
.v2-b2b-list strong { color: #fff; }
.v2-b2b-list span { color: var(--v2-stage-muted); }

.v2-b2b-box .v2-btn-primary { background: var(--v2-card); color: var(--v2-ink); }
.v2-b2b-box .v2-btn-primary:hover { background: #fff; color: var(--v2-stage); }

.v2-b2b-box .v2-btn-outline {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.v2-b2b-box .v2-btn-outline:hover { border-color: rgba(255, 255, 255, 0.5); }

/* ── Tema escuro: regressões medidas no CTA final e nos controles ── */

html:not(.light) .v2-cta-final-box {
  background:
    radial-gradient(78% 62% at 50% -10%, rgba(255, 107, 26, 0.24), rgba(255, 107, 26, 0) 68%),
    #060607;
  border-color: rgba(255, 255, 255, 0.12);
}

/* O botão do CTA final ficava rgb(23,23,27) dentro de painel escuro — ~1.4:1.
   É o último CTA de conversão da página; força superfície clara. */
html:not(.light) .v2-cta-final-box .v2-btn-primary {
  background: #f2f2f4;
  color: #0d0d0f;
}
html:not(.light) .v2-cta-final-box .v2-btn-primary:hover { background: #fff; }

/* .v2-btn-outline com borda rgb(53,53,61) sobre rgb(23,23,27) = 1.47:1 */
html:not(.light) .v2-btn-outline {
  background: #1e1e23;
  border-color: #4a4a55;
}
html:not(.light) .v2-btn-outline:hover { border-color: #7a7a88; }

/* .v2-card perdia a borda no escuro (bg 1.09:1 contra a página) */
html:not(.light) .v2-card { border: 1px solid var(--v2-line-strong); }
html:not(.light) .v2-plan { border-color: var(--v2-line-strong); }

/* "TUDO DO LITE, E MAIS:" no card invertido dava 2.86:1 */
html:not(.light) .v2-plan.is-featured .v2-plan-soma { color: #55555f; }

/* Entre ~1024 e ~1440 o sangramento do palco (margin-right negativo em vw)
   empurrava o app 63px para fora em 1280 e 153px em 1100 — a faixa de laptop.
   Abaixo de 1440 o palco deixa de sangrar e fica contido no container. */
@media (max-width: 1439px) {
  .v2-stage { margin-right: 0; padding-right: 0; }
  .v2-stage-app { max-width: 100%; }
  /* Sem sangramento aqui: .v2-stage tem a mesma largura de .v2-stage-app,
     então 50% simples já centraliza sob o card. */
  .v2-float-pill { left: 50%; }
}

/* ── Equivalência do crédito: é a dúvida nº1 de quem compara planos, e a
      página de preços real já explica ("1 crédito = 1 minuto de vídeo
      processado"). Sem isso, "3.600 créditos" não significa nada. ── */

.v2-credit-note {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  background: var(--v2-card);
}

.v2-credit-eq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }

.v2-credit-chip {
  padding: 7px 15px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink);
  color: var(--v2-card);
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.v2-credit-chip.is-alt { background: var(--v2-brand); color: #fff; }

.v2-credit-op {
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--v2-faint);
}

.v2-credit-note p { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--v2-muted); }

/* equivalência em horas dentro de cada card */
.v2-plan-credits span { display: flex; flex-direction: column; gap: 1px; }
.v2-plan-credits em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--v2-brand-deep); }
.v2-plan.is-featured .v2-plan-credits em { color: #ff9d5c; }
html:not(.light) .v2-plan.is-featured .v2-plan-credits em { color: #b84400; }

/* Acima de 900px o container é centralizado com folga sobrando, então o painel
   pode sangrar tanto quanto o próprio padding — assim o conteúdo cai exatamente
   no eixo x das outras seções. No mobile o sangramento fica preso aos 24px do
   container, senão o painel ultrapassa a viewport. */
/* Só a partir de 1220px (container 1120 + 2x48 de sangramento) existe margem
   sobrando para sangrar sem gerar scroll lateral. Abaixo disso o painel fica
   preso ao padding do container. */
@media (min-width: 1220px) {
  .v2-b2b-box { margin-inline: -48px; padding-inline: 48px; }
}

/* imagem no topo do card: entrega a promessa antes do texto explicá-la */
.v2-card.is-media-top { padding-top: 0; }
.v2-card.is-media-top > .v2-bento-shot {
  margin: 0 -30px 22px;
  border-radius: var(--v2-r-card) var(--v2-r-card) 0 0;
  box-shadow: none;
  border-bottom: 1px solid var(--v2-line);
}
.v2-card.is-half.is-media-top { padding: 0 26px 26px; }
.v2-card.is-half.is-media-top > .v2-bento-shot { margin: 0 -26px 20px; }
.v2-card.is-media-top .v2-bento-shot img { aspect-ratio: 16/9; object-fit: cover; }

.v2-plan-cortes {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding-bottom: 4px;
}

.v2-plan-cortes b {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--v2-brand-deep);
}

.v2-plan-cortes span { font-size: 12.5px; color: var(--v2-muted); }
.v2-plan.is-featured .v2-plan-cortes b { color: #ff9d5c; }
.v2-plan.is-featured .v2-plan-cortes span { color: #a9a9b4; }
html:not(.light) .v2-plan.is-featured .v2-plan-cortes b { color: #b84400; }
html:not(.light) .v2-plan.is-featured .v2-plan-cortes span { color: #55555f; }

/* ══════════ Editor: faixa escura com screenshot real do app ══════════
   Depois do hero a página emenda 4 seções claras. Card claro aqui lia como
   repetição dos vizinhos, então esta seção usa o único registro livre: faixa
   escura nos mesmos tokens --v2-stage do hero. Empilhado (texto em cima,
   screenshot em largura total embaixo) em vez de lado a lado: o screenshot
   real tem texto pequeno (legendas, nomes de trilha) que fica ilegível
   espremido numa coluna de ~45% do container. */
.v2-editor {
  background: var(--v2-stage);
  color: var(--v2-stage-text);
}

/* Coluna única (título → lead → CTA), não o .v2-head-left de duas colunas
   dos vizinhos: com um lead longo + CTA a coluna direita ficava mais alta
   que o título, e a régua de largura total do container emoldurava uma
   "caixa" com os dois terços direitos vazios até o screenshot começar — lia
   como inacabado. Régua na largura do próprio texto, sem prometer
   visualmente um conteúdo à direita que não existe. */
.v2-editor-intro {
  max-width: 640px;
  padding-bottom: 28px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--v2-stage-line);
}

.v2-editor-intro .v2-h2 { color: var(--v2-stage-text); max-width: 20ch; }
.v2-editor-intro .v2-lead { color: var(--v2-stage-muted); margin-top: 18px; }
.v2-editor-intro .v2-btn-primary { margin-top: 28px; }

.v2-editor-copy { margin-top: 48px; }

/* .v2 prefixado: `.v2 ul` (topo do arquivo) zera margin/padding de toda ul e
   ganha por especificidade de um seletor de classe simples. */
.v2 .v2-editor-caps {
  list-style: none;
  margin: 0 0 32px;
  display: grid;
  gap: 22px 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) { .v2 .v2-editor-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .v2 .v2-editor-caps { grid-template-columns: 1fr; gap: 12px; } }

.v2-editor-caps li { display: flex; gap: 11px; align-items: flex-start; }

/* No mobile (coluna única) cada capacidade vira um cartão com ícone em selo,
   pra não virar uma lista corrida sem separação. */
@media (max-width: 620px) {
  .v2-editor-caps li {
    padding: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--v2-stage-line);
    border-radius: 14px;
  }
}

.v2-editor-caps svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--v2-brand-deep);
}

@media (max-width: 620px) {
  .v2-editor-caps svg {
    width: 18px;
    height: 18px;
    margin-top: 0;
    padding: 9px;
    box-sizing: content-box;
    border-radius: 50%;
    background: rgba(255, 107, 26, 0.14);
    color: var(--v2-brand);
  }
}

.v2-editor-caps b {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v2-stage-text);
}

.v2-editor-caps span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--v2-stage-muted);
}

.v2-editor .v2-btn-primary { background: var(--v2-card); color: var(--v2-ink); }
.v2-editor .v2-btn-primary:hover { background: #fff; color: var(--v2-stage); }

/* ── Mock do app ── */
/* Vitrine atrás do "navegador": um painel com glow da marca dá profundidade
   e deixa o editor menor e centralizado, com respiro ao redor. */
.v2-editor-showcase {
  margin-top: 40px;
  padding: clamp(20px, 4vw, 48px);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 107, 26, 0.14), transparent 62%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid var(--v2-stage-line);
}

.v2-editor-app {
  max-width: 860px;   /* menor que a largura total — o fundo aparece ao redor */
  margin: 0 auto;
  border-radius: var(--v2-r-card);
  overflow: hidden;
  background: linear-gradient(168deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.v2-editor-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-editor-dots { display: inline-flex; gap: 6px; }
.v2-editor-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }

.v2-editor-file {
  font-family: 'Chivo', monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--v2-stage-muted);
}

/* Vídeo real do editor. O próprio vídeo tem a barra do navegador (aba + URL)
   GRAVADA no topo — chrome duplicado com o .v2-editor-bar do tema. Corta os
   ~13% de cima via aspect-ratio menor + object-position no rodapé (mantém a
   timeline embaixo, remove só a barra gravada). */
.v2-editor-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7.85;
  object-fit: cover;
  object-position: 50% 100%;
}

/* ── Colagem de cortes reais atrás do CTA final: a página fecha mostrando a
      saída do produto. Decorativa (aria-hidden), atrás do conteúdo. ── */

.v2-cta-collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.v2-cta-collage span {
  position: absolute;
  width: clamp(64px, 7vw, 96px);
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0.42;
  animation: v2-cta-float 7s ease-in-out infinite;
  animation-delay: calc(var(--v2-cta-i, 0) * -1.6s);
  --v2-cta-rot: 0deg;
}

.v2-cta-collage span:nth-child(1) { --v2-cta-i: 0; --v2-cta-rot: -8deg; }
.v2-cta-collage span:nth-child(2) { --v2-cta-i: 1; --v2-cta-rot: 5deg; animation-duration: 8.5s; }
.v2-cta-collage span:nth-child(3) { --v2-cta-i: 2; --v2-cta-rot: -4deg; animation-duration: 6.5s; }
.v2-cta-collage span:nth-child(4) { --v2-cta-i: 3; --v2-cta-rot: 7deg; animation-duration: 9s; }

.v2-cta-collage img { width: 100%; height: 100%; object-fit: cover; }

@keyframes v2-cta-float {
  0%, 100% { transform: rotate(var(--v2-cta-rot)) translateY(0); }
  50% { transform: rotate(var(--v2-cta-rot)) translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-cta-collage span { animation: none; }
}

@media (max-width: 760px) { .v2-cta-collage span:nth-child(n+3) { display: none; } }
@media (max-width: 520px) { .v2-cta-collage { display: none; } }

/* ── Tabela comparativa (páginas VDClip vs Concorrente). Reusa a mesma
      marcação/classes que vdclip_vs_cell() já gera (vd-compare-*), só
      envolvida num wrapper v2 pra não duplicar o helper PHP compartilhado. ── */

.v2-compare-table {
  overflow-x: auto;
  border-radius: var(--v2-r-card);
  border: 1px solid var(--v2-line);
}

.v2-compare-table table { width: 100%; border-collapse: collapse; min-width: 480px; }

.v2-compare-table th, .v2-compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--v2-line);
  font-size: 14.5px;
}


.v2-compare-table thead th {
  font-weight: 700;
  color: var(--v2-ink);
  background: var(--v2-bg-sunk);
}
.v2-compare-table th.is-featured, .v2-compare-table td.is-featured { background: var(--v2-brand-tint); }
.v2-compare-table th.is-featured { background: color-mix(in srgb, var(--v2-brand-tint) 60%, var(--v2-bg-sunk)); }
.v2-compare-table tr.vd-compare-group td {
  font-weight: 700;
  color: var(--v2-brand-deep);
  background: var(--v2-bg);
  padding-top: 22px;
}
.v2-compare-table .vd-compare-check { color: var(--v2-brand); display: inline-flex; }
.v2-compare-table .vd-compare-check svg { width: 18px; height: 18px; }
.v2-compare-table .vd-compare-dash { color: var(--v2-faint); }
.v2-compare-table .vd-compare-value { color: var(--v2-ink-soft); }

/* "Em breve": reloginho + as redes onde o recurso vai rodar (respostas/DM). */
.v2-compare-table .vd-compare-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v2-brand-deep);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}
.v2-compare-table .vd-compare-soon svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Primeira coluna (nome do recurso) fixa horizontalmente: numa tabela de
   5 colunas que rola de lado no mobile, perder de vista qual linha é qual
   recurso torna a comparação inútil. */
.v2-compare-table tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--v2-card);
  z-index: 1;
  box-shadow: 1px 0 0 var(--v2-line);
}
.v2-compare-table tr.vd-compare-group td:first-child { background: var(--v2-bg); }
.v2-compare-table thead th:first-child { position: sticky; left: 0; z-index: 3; }

/* ── Card de comparação rápida no hero das páginas VDClip vs Concorrente ── */

.v2-vs-hero-card { background: var(--v2-card); border-radius: var(--v2-r-card); box-shadow: var(--v2-shadow-lift); padding: 24px; }
.v2-vs-hero-card-cols { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--v2-faint); }
.v2-vs-hero-card-cols .is-vd { color: var(--v2-brand); }
.v2-vs-hero-card-rows { list-style: none; margin: 14px 0; padding: 0; }
.v2-vs-hero-card-rows li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--v2-line); font-size: 13.5px; }
.v2-vs-hero-card-rows li:first-child { border-top: none; }
.v2-vs-hero-row-v { text-align: center; min-width: 44px; }
.v2-vs-mini.ok { color: var(--v2-brand); }
.v2-vs-mini.ok svg { width: 16px; height: 16px; }
.v2-vs-mini.no { color: var(--v2-faint); }

/* ── Faixa de plataformas (estática, sem animação de esteira: mesmo
      conteúdo do marquee antigo, sem depender de keyframes novos) ── */

.v2-logos-row { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: center; }
.v2-logos-row svg { width: 22px; height: 22px; color: var(--v2-faint); }
.v2-logo-item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--v2-muted); }

/* ── Grid de veredito: 2 cards lado a lado, o do VDClip com destaque ── */

.v2-verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v2-gap); }
@media (max-width: 760px) { .v2-verdict-grid { grid-template-columns: 1fr; } }
.v2-verdict-card.is-vd { border: 1.5px solid var(--v2-brand-line); background: var(--v2-brand-tint); }
.v2-verdict-card ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-verdict-card li { padding-left: 22px; position: relative; font-size: 14.5px; color: var(--v2-ink-soft); }
.v2-verdict-card li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-faint); }

/* ── Grid de valor (checklist do que se ganha ao trocar de ferramenta) ── */

.v2-value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .v2-value-grid { grid-template-columns: 1fr; } }
.v2-value-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; }
.v2-value-item svg { width: 18px; height: 18px; color: var(--v2-brand); flex-shrink: 0; margin-top: 2px; }

/* ── Ícone inline pequeno reusado em vários pontos das páginas VDClip vs
      Concorrente (checklist, mock de recurso, casos de uso). SVGs sem
      width/height renderizam no tamanho replaced-element padrão (300px)
      sem isso. ── */
.v2-icon-sm { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.v2-icon-sm svg { width: 100%; height: 100%; }
.v2-vs-case-ic { display: inline-flex; width: 28px; height: 28px; color: var(--v2-brand); }
.v2-vs-case-ic svg { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════════════
   Pricing page (.vd-pricing-*, .vd-calc-*, .vd-compare-th-*, .vd-btn,
   .vd-input-link) — classes mantidas intactas porque main.js e
   paddle-pricing.js selecionam por elas (slider, dropdowns, tooltips,
   captura de UTM, preço ao vivo do Paddle). Em vez de reescrever o
   markup, os blocos abaixo foram extraídos de pages.css/layout.css e
   remapeados para os tokens --v2-*; --vd-radius-* e --vd-space-* ficam
   com os valores literais originais (não são cor/tema, não precisam
   de remapeamento). Débito conhecido: as regras originais continuam
   em pages.css/layout.css, agora mortas nesta página (única que usa
   essas classes) — remoção fica para uma limpeza futura dedicada.
   ══════════════════════════════════════════════════════════════ */

body.page-template-template-pricing {
  --vd-bg: var(--v2-bg);
  --vd-card: var(--v2-card);
  --vd-surface: var(--v2-card);
  --vd-stroke: var(--v2-line);
  --vd-text: var(--v2-ink);
  --vd-text-muted: var(--v2-muted);
  --vd-text-faint: var(--v2-faint);
  --vd-primary: var(--v2-brand);
  --vd-primary-subtle: var(--v2-brand-tint);
  --vd-primary-border: var(--v2-brand-line);
  --vd-primary-hover: var(--v2-brand-deep);
  --vd-accent-sky: var(--v2-brand);
  --vd-accent-sky-subtle: var(--v2-brand-tint);
  --vd-accent-violet: var(--v2-brand);
  --vd-accent-violet-subtle: var(--v2-brand-tint);
  --vd-accent-success: var(--v2-brand);
  --vd-hero-primary: var(--v2-brand);
  --vd-hero-primary-border: var(--v2-brand-line);
  --vd-hero-primary-hover: var(--v2-brand-deep);
  --vd-hero-stroke: var(--v2-line);
  --vd-hero-text: var(--v2-ink);
  --vd-hero-text-muted: var(--v2-muted);
  --vd-radius-btn: var(--v2-r-pill);
  --vd-radius-card: var(--v2-r-card);
  --vd-radius-input: var(--v2-r-sm);
  --vd-radius-pill: var(--v2-r-pill);
  --vd-radius-tag: 4px;
  --vd-shadow-lg: var(--v2-shadow-lift);
  --vd-shadow-md: var(--v2-shadow-card);
  --vd-shadow-sm: var(--v2-shadow-card);
  --vd-container-narrow: 960px;
  --vd-space-card: 32px;
  --vd-space-card-inner: 24px;
  --vd-space-comp: 16px;
  --vd-space-container: 48px;
  --vd-space-inner: 8px;
  --vd-space-micro: 4px;
  --vd-space-section: 80px;
  --vd-space-tight: 12px;
}

/* Hero de preços era o único bloco 100% liso da página — nem o brilho radial
   do hero da home nem a malha das faixas rebaixadas (.v2-faq/.v2-footer). A
   malha em si já é reaproveitada via seletor (ver .vd-pricing-hero::before
   acima); aqui só entra o brilho de marca por cima, bem mais discreto que no
   hero escuro porque em fundo claro a mesma opacidade "suja" o branco. */
body.page-template-template-pricing .vd-pricing-hero {
  background: radial-gradient(60% 90% at 50% 0%, rgba(224, 85, 0, 0.10), rgba(224, 85, 0, 0) 74%);
}

body.page-template-template-pricing .vd-pricing-hero::before {
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 0%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 78% 70% at 50% 0%, #000 0%, transparent 80%);
}

body.page-template-template-pricing .vd-pricing-hero > * { position: relative; z-index: 1; }

/* Blocos extraídos de pages.css/layout.css/components.css (ver comentário
   acima do alias --vd-*). Classes e responsivo intactos, só os tokens de
   cor/raio/sombra passam pelo alias. */

@media (max-width: 640px) {
body.page-template-template-pricing .vd-input-link, body.page-template-template-pricing .vd-input-link.vd-input-link-strong, body.page-template-template-pricing .vd-hero .vd-input-link, body.page-template-template-pricing .vd-cta-section .vd-input-link {
    flex-direction: column !important;
    padding: var(--vd-space-inner) !important;
    gap: var(--vd-space-inner) !important;
  }
body.page-template-template-pricing .vd-input-link input {
    width: 100% !important;
    padding: var(--vd-space-tight) !important;
    text-align: center;
    border: 1px solid var(--vd-stroke) !important;
    border-radius: var(--vd-radius-btn) !important;
    background: var(--vd-bg) !important;
  }
body.page-template-template-pricing .vd-input-link .vd-btn-primary {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: var(--vd-space-tight) var(--vd-space-comp) !important;
  }
body.page-template-template-pricing .vd-input-link > svg:first-child {
    display: none !important;
  }
}

body.page-template-template-pricing .vd-calc-box {
  margin-top: var(--vd-space-card);
  padding: 20px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
}

@media (max-width: 380px) {
body.page-template-template-pricing .vd-calc-box {
    padding: var(--vd-space-comp);
  }
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-calc-box {
    padding: var(--vd-space-card);
  }
}

body.page-template-template-pricing .vd-calc-inputs-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vd-space-comp);
}

@media (min-width: 480px) {
body.page-template-template-pricing .vd-calc-inputs-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--vd-space-comp) var(--vd-space-card-inner);
  }
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-calc-inputs-row {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--vd-space-card-inner);
    align-items: end;
  }
}

body.page-template-template-pricing .vd-calc-input-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--vd-space-inner);
}

body.page-template-template-pricing .vd-calc-q-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vd-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Converte o número abstrato de créditos numa grandeza que faz sentido antes
   mesmo de clicar "Calcular" (ver updateClipsHint em main.js). */
body.page-template-template-pricing .vd-calc-clips-hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--vd-text-muted);
}
body.page-template-template-pricing .vd-calc-clips-hint span { font-weight: 700; color: var(--vd-text); }

body.page-template-template-pricing .vd-calc-number-input {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--vd-radius-input);
  overflow: hidden;
  background: var(--vd-bg);
  height: 42px;
}

html.light body.page-template-template-pricing .vd-calc-number-input {
  border-color: var(--vd-stroke);
  background: #fff;
}

body.page-template-template-pricing .vd-calc-number-input span {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--vd-text);
  font-family: 'JetBrains Mono', monospace;
}

body.page-template-template-pricing .vd-calc-minus, body.page-template-template-pricing .vd-calc-plus {
  width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--vd-text);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s;
  border: none;
  font-family: inherit;
}

body.page-template-template-pricing .vd-calc-minus:hover, body.page-template-template-pricing .vd-calc-plus:hover {
  color: var(--vd-primary);
}

body.page-template-template-pricing .vd-calc-dropdown {
  position: relative;
}

body.page-template-template-pricing .vd-calc-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--vd-text);
  background: var(--vd-bg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--vd-radius-input);
  cursor: pointer;
  transition: border-color 0.15s;
}

html.light body.page-template-template-pricing .vd-calc-dropdown-btn {
  background: #fff;
  border-color: var(--vd-stroke);
}

body.page-template-template-pricing .vd-calc-dropdown-btn svg {
  color: var(--vd-text-faint);
  transition: transform 0.2s;
}

body.page-template-template-pricing .vd-calc-dropdown.is-open .vd-calc-dropdown-btn {
  border-color: var(--vd-primary);
}

body.page-template-template-pricing .vd-calc-dropdown.is-open .vd-calc-dropdown-btn svg {
  transform: rotate(180deg);
}

body.page-template-template-pricing .vd-calc-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #111118;
  border: 1px solid rgba(255,255,255,0.1);
  /* Era --vd-radius-btn (o pill dos botões) — numa caixa quase quadrada
     como essa lista, esse raio gigante virava um blob circular por cima
     do resto da calculadora em vez de um menu retangular. */
  border-radius: var(--vd-radius-card);
  padding: var(--vd-space-micro);
  list-style: none;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  translate: 0 -4px;
  transition: opacity 0.15s, visibility 0.15s, translate 0.15s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

html.light body.page-template-template-pricing .vd-calc-dropdown-list {
  background: #fff;
  border-color: var(--vd-stroke);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

body.page-template-template-pricing .vd-calc-dropdown.is-open .vd-calc-dropdown-list {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

body.page-template-template-pricing .vd-calc-dropdown-list li {
  padding: var(--vd-space-inner) var(--vd-space-tight);
  font-size: 14px;
  font-weight: 500;
  color: #ededef;
  border-radius: var(--vd-radius-tag);
  cursor: pointer;
  transition: background 0.1s;
}

html.light body.page-template-template-pricing .vd-calc-dropdown-list li {
  color: #1a1a2e;
}

body.page-template-template-pricing .vd-calc-dropdown-list li:hover {
  background: rgba(255,255,255,0.06);
}

html.light body.page-template-template-pricing .vd-calc-dropdown-list li:hover {
  background: rgba(0,0,0,0.04);
}

body.page-template-template-pricing .vd-calc-dropdown-list li.is-active {
  color: var(--vd-primary);
  font-weight: 600;
}

body.page-template-template-pricing .vd-calc-platforms {
  display: flex;
  gap: var(--vd-space-inner);
  align-items: center;
  height: 42px;
}

body.page-template-template-pricing .vd-calc-platform {
  width: 42px;
  height: 42px;
  border-radius: var(--vd-radius-input);
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--vd-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vd-text-faint);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.4;
}

html.light body.page-template-template-pricing .vd-calc-platform {
  background: #fff;
  border-color: var(--vd-stroke);
}

body.page-template-template-pricing .vd-calc-platform:hover {
  opacity: 0.7;
  color: var(--vd-text);
}

body.page-template-template-pricing .vd-calc-platform.is-active {
  border-color: #22c55e;
  color: #22c55e;
  background: rgba(34,197,94,0.08);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.08);
}

body.page-template-template-pricing .vd-calc-result-bar {
  margin-top: var(--vd-space-card-inner);
  padding-top: var(--vd-space-card-inner);
  border-top: 1px solid var(--vd-stroke);
  display: flex;
  align-items: center;
  gap: var(--vd-space-card);
  flex-wrap: wrap;
}

body.page-template-template-pricing .vd-calc-rec {
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-calc-rec-label {
  display: block;
  font-size: 12px;
  color: var(--vd-text-muted);
  margin-bottom: var(--vd-space-micro);
}

body.page-template-template-pricing .vd-calc-rec-plan {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--vd-primary);
  letter-spacing: -0.5px;
}

body.page-template-template-pricing .vd-calc-rec-plan svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-calc-result-bar > .vd-btn {
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 767px) {
body.page-template-template-pricing .vd-calc-result-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vd-space-comp);
  }
body.page-template-template-pricing .vd-calc-result-bar > .vd-btn {
    margin-left: 0;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
body.page-template-template-pricing .vd-calc-rec-plan {
    font-size: 20px;
  }
}

body.page-template-template-pricing .vd-calc-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vd-space-tight);
  width: 100%;
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-calc-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

body.page-template-template-pricing .vd-calc-metric {
  padding: var(--vd-space-comp);
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--vd-space-inner);
}

html.light body.page-template-template-pricing .vd-calc-metric {
  background: var(--vd-bg);
}

body.page-template-template-pricing .vd-calc-metric-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.page-template-template-pricing .vd-calc-metric-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--vd-text-muted);
  letter-spacing: 0.2px;
}

body.page-template-template-pricing .vd-calc-metric-val {
  font-size: 28px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--vd-text);
  letter-spacing: -1px;
  line-height: 1;
}

body.page-template-template-pricing .vd-calc-metric-sub {
  font-size: 12px;
  color: var(--vd-text-faint);
  line-height: 1.3;
}

body.page-template-template-pricing .vd-calc-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vd-stroke);
  color: var(--vd-text-muted);
  cursor: help;
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

body.page-template-template-pricing .vd-calc-tooltip:hover,
body.page-template-template-pricing .vd-calc-tooltip:focus {
  background: var(--vd-primary);
  color: #fff;
  outline: none;
}

body.page-template-template-pricing .vd-calc-tooltip svg {
  display: none;
}

body.page-template-template-pricing .vd-calc-tooltip::before {
  content: '?';
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Ancorado pela direita do ícone (não centralizado): o ícone sempre fica na
   ponta direita do header do card (`margin-left:auto`), em qualquer coluna
   da grid de métricas (1 a 4 colunas conforme o breakpoint). Um tooltip
   centralizado nele vaza pra fora da viewport sempre que o card está perto
   da borda direita da tela — reproduzido em 320px E em 768/1024px (grid de
   4 colunas). Ancorar pela direita mantém o tooltip dentro da própria
   largura do card em qualquer viewport, sem precisar de breakpoint. */
body.page-template-template-pricing .vd-calc-tooltip-text {
  position: absolute;
  bottom: calc(100% + 10px);
  right: -6px;
  width: 230px;
  max-width: calc(100vw - 32px);
  padding: 11px 13px;
  background: var(--vd-text);
  border-radius: 10px;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--vd-card);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.16s, visibility 0.16s, transform 0.16s;
  pointer-events: none;
  z-index: 10;
}

/* Seta ligando o balão ao ícone "?" (alinhada com ele, na direita). */
body.page-template-template-pricing .vd-calc-tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: var(--vd-text);
}

body.page-template-template-pricing .vd-calc-tooltip:hover .vd-calc-tooltip-text, body.page-template-template-pricing .vd-calc-tooltip:focus .vd-calc-tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.page-template-template-pricing .vd-calc-result-bar {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 640px) {
body.page-template-template-pricing .vd-calc-metrics {
    grid-template-columns: 1fr;
  }
body.page-template-template-pricing .vd-calc-metric-val {
    font-size: 24px;
  }
}

body.page-template-template-pricing .vd-calc-slider-row {
  display: flex;
  align-items: center;
  gap: var(--vd-space-tight);
}

body.page-template-template-pricing .vd-calc-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: var(--vd-radius-tag);
  background: var(--vd-stroke);
  outline: none;
}

body.page-template-template-pricing .vd-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vd-primary);
  cursor: pointer;
  border: 2px solid var(--vd-surface);
  box-shadow: 0 0 0 1px var(--vd-primary);
}

body.page-template-template-pricing .vd-calc-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vd-primary);
  cursor: pointer;
  border: 2px solid var(--vd-surface);
  box-shadow: 0 0 0 1px var(--vd-primary);
}

body.page-template-template-pricing .vd-calc-slider-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--vd-primary);
  min-width: 24px;
  text-align: center;
}

body.page-template-template-pricing .vd-calc-options-multi .vd-calc-opt.is-active {
  background: var(--vd-primary-subtle);
  border-color: var(--vd-primary);
  color: var(--vd-primary);
}

body.page-template-template-pricing .vd-calc-bar-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  min-width: 32px;
  text-align: right;
}

body.page-template-template-pricing .vd-calc-options {
  display: flex;
  gap: var(--vd-space-inner);
  flex-wrap: wrap;
}

body.page-template-template-pricing .vd-calc-opt {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vd-text-muted);
  background: transparent;
  border: 1px solid var(--vd-stroke);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s;
}

body.page-template-template-pricing .vd-calc-opt:hover {
  border-color: var(--vd-text-faint);
  color: var(--vd-text);
}

body.page-template-template-pricing .vd-calc-opt.is-active {
  background: var(--vd-primary);
  border-color: var(--vd-primary);
  color: #fff;
}

body.page-template-template-pricing .vd-calc-answer {
  margin-top: var(--vd-space-card-inner);
  padding: var(--vd-space-card-inner);
  background: var(--vd-bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--vd-radius-card);
  overflow: hidden;
}

@media (max-width: 639px) {
body.page-template-template-pricing .vd-calc-answer {
    padding: var(--vd-space-comp);
  }
}

html.light body.page-template-template-pricing .vd-calc-answer {
  background: #f5f5f5;
  border-color: var(--vd-stroke);
}

body.page-template-template-pricing .vd-calc-answer-inner {
  display: flex;
  align-items: center;
  gap: var(--vd-space-card);
  flex-wrap: wrap;
}

body.page-template-template-pricing .vd-calc-answer-plan {
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-calc-result-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--vd-text-muted);
  margin-bottom: var(--vd-space-micro);
}

body.page-template-template-pricing .vd-calc-result-plan {
  font-size: 28px;
  font-weight: 700;
  color: var(--vd-primary);
  letter-spacing: -0.5px;
}

body.page-template-template-pricing .vd-calc-result-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  white-space: nowrap;
}

body.page-template-template-pricing .vd-calc-result-badge[data-level="comfortable"] { background: rgba(34,197,94,0.12); color: #22c55e; }

body.page-template-template-pricing .vd-calc-result-badge[data-level="perfect"] { background: var(--vd-primary-subtle); color: var(--vd-primary); }

body.page-template-template-pricing .vd-calc-result-badge[data-level="tight"] { background: rgba(239,68,68,0.12); color: #ef4444; }

body.page-template-template-pricing .vd-calc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vd-space-card-inner);
  align-items: flex-end;
}

body.page-template-template-pricing .vd-calc-stat {
  display: flex;
  flex-direction: column;
}

body.page-template-template-pricing .vd-calc-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--vd-text);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

body.page-template-template-pricing .vd-calc-stat-label {
  font-size: 12px;
  color: var(--vd-text-muted);
  margin-top: var(--vd-space-micro);
}

body.page-template-template-pricing .vd-calc-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--vd-space-tight);
}

body.page-template-template-pricing .vd-calc-bar {
  flex: 1;
  height: 8px;
  background: var(--vd-stroke);
  border-radius: var(--vd-radius-tag);
  overflow: hidden;
}

body.page-template-template-pricing .vd-calc-bar-fill {
  height: 100%;
  background: var(--vd-primary);
  border-radius: var(--vd-radius-tag);
  transition: width 0.4s ease;
}

body.page-template-template-pricing .vd-calc-bar-fill[data-level="comfortable"] { background: #22c55e; }

body.page-template-template-pricing .vd-calc-bar-fill[data-level="perfect"] { background: var(--vd-primary); }

body.page-template-template-pricing .vd-calc-bar-fill[data-level="tight"] { background: #ef4444; }

body.page-template-template-pricing .vd-calc-bar-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--vd-text-muted);
  white-space: nowrap;
}

@media (max-width: 767px) {
body.page-template-template-pricing .vd-compare-th-badge {
    font-size: 12px;
    padding: 2px 6px;
    margin-bottom: var(--vd-space-micro);
  }
body.page-template-template-pricing .vd-compare-th-name {
    font-size: 13px;
  }
body.page-template-template-pricing .vd-compare-th-price {
    font-size: 12px;
  }
}

body.page-template-template-pricing .vd-compare-th-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--vd-text);
  letter-spacing: -0.3px;
  margin-bottom: var(--vd-space-micro);
}

body.page-template-template-pricing .vd-compare-th-price {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--vd-text-muted);
}

body.page-template-template-pricing .vd-compare-th-btn {
  display: block;
  margin-top: var(--vd-space-inner);
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 12px;
  padding: 6px 12px;
}

body.page-template-template-pricing .is-featured .vd-compare-th-name {
  color: var(--vd-primary);
}

body.page-template-template-pricing .vd-compare-th-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background-color: var(--vd-primary);
  padding: 3px 12px;
  border-radius: 100px;
  margin-bottom: var(--vd-space-inner);
}

html.light body.page-template-template-pricing .vd-compare-th-badge {
  background-color: var(--vd-primary);
  color: #fff;
}

body.page-template-template-pricing .vd-pricing-hero {
  text-align: center;
  padding-top: var(--vd-space-section);
  padding-bottom: 8px;
}

body.page-template-template-pricing .vd-pricing-hero .vd-h1 {
  margin-bottom: var(--vd-space-tight);
}

body.page-template-template-pricing .vd-pricing-hero .vd-body {
  color: var(--vd-text-muted);
  max-width: 560px;
  margin: 0 auto 20px;
}

body.page-template-template-pricing .vd-pricing-hero .vd-pricing-toggle {
  margin-top: 0;
}

body.page-template-template-pricing .vd-pricing-discount-note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vd-primary);
}

body.page-template-template-pricing .vd-pricing-save {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--vd-primary);
  background-color: var(--vd-primary-subtle);
  padding: 3px 10px;
  border-radius: var(--vd-radius-pill);
  margin-left: var(--vd-space-inner);
  vertical-align: middle;
}

body.page-template-template-pricing .vd-pricing-toggle button.is-active .vd-pricing-save {
  color: var(--vd-primary);
  background: rgba(255,255,255,0.9);
}

body.page-template-template-pricing .vd-article-cta-mobile-inner .vd-btn { margin-top: 16px; }

@media (max-width: 640px) {
body.page-template-template-pricing .vd-pricing-hero .vd-h1 {
    font-size: 28px;
  }
}

body.page-template-template-pricing .vd-tool-hero .vd-input-link {
  margin-top: var(--vd-space-card);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

body.page-template-template-pricing .vd-feat-hero .vd-input-link {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.2);
}

body.page-template-template-pricing .vd-feat-hero .vd-input-link:focus-within {
  border-color: var(--vd-primary-border);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}

html.light body.page-template-template-pricing .vd-feat-hero .vd-input-link {
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  box-shadow: var(--vd-shadow-sm);
  backdrop-filter: none;
}

html.light body.page-template-template-pricing .vd-feat-hero .vd-input-link:focus-within {
  border-color: var(--vd-primary);
  box-shadow: 0 0 0 3px rgba(224,95,0,0.1);
}

@media (max-width: 1023px) {
body.page-template-template-pricing .vd-navbar-actions .vd-btn {
    display: none !important;
  }
}

body.page-template-template-pricing .vd-lp-header .vd-btn {
  min-height: 44px;
}

body.page-template-template-pricing .vd-lp-hero .vd-input-link {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--vd-hero-stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.page-template-template-pricing .vd-lp-hero .vd-input-link input { color: var(--vd-hero-text); }

body.page-template-template-pricing .vd-lp-hero .vd-input-link input::placeholder { color: var(--vd-hero-text-muted); }

body.page-template-template-pricing .vd-lp-hero .vd-input-link svg { color: var(--vd-hero-text-muted); }

body.page-template-template-pricing .vd-lp-hero .vd-btn-primary { background-color: var(--vd-hero-primary); }

body.page-template-template-pricing .vd-lp-hero .vd-btn-primary:hover { background-color: var(--vd-hero-primary-hover); }

body.page-template-template-pricing.page-template-template-home .vd-navbar:not(.is-scrolled) .vd-navbar-link, body.page-template-template-pricing.page-template-template-home .vd-navbar:not(.is-scrolled) .vd-hamburger, body.page-template-template-pricing.page-template-template-home .vd-navbar:not(.is-scrolled) .vd-theme-toggle, body.page-template-template-pricing.page-template-template-home .vd-navbar:not(.is-scrolled) .vd-btn-ghost {
  color: var(--vd-hero-text-muted);
}

body.page-template-template-pricing.page-template-template-home .vd-navbar:not(.is-scrolled) .vd-theme-toggle, body.page-template-template-pricing.page-template-template-home .vd-navbar:not(.is-scrolled) .vd-btn-ghost {
  border-color: var(--vd-hero-stroke);
}

body.page-template-template-pricing .vd-submenu-promo-content .vd-btn {
  margin-top: 8px;
  align-self: flex-start;
}

@media (min-width: 1024px) {
body.page-template-template-pricing .vd-navbar-actions .vd-btn {
    display: inline-flex !important;
  }
}

body.page-template-template-pricing .vd-hero .vd-input-link svg {
  color: var(--vd-hero-text-muted);
}

body.page-template-template-pricing .vd-hero .vd-input-link input {
  color: var(--vd-hero-text);
}

body.page-template-template-pricing .vd-hero .vd-input-link input::placeholder {
  color: var(--vd-hero-text-muted);
}

body.page-template-template-pricing .vd-hero .vd-btn-primary {
  background-color: var(--vd-hero-primary);
}

body.page-template-template-pricing .vd-hero .vd-btn-primary:hover {
  background-color: var(--vd-hero-primary-hover);
}

body.page-template-template-pricing .vd-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
body.page-template-template-pricing .vd-pricing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

body.page-template-template-pricing .vd-pricing-grid-2 {
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
body.page-template-template-pricing .vd-pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.page-template-template-pricing .vd-pricing-grid-3 {
  max-width: 1080px;
  margin: 0 auto;
}

/* 3 colunas só a partir de 1024px: em 768px cada card ficava com ~220px de
   coluna, apertando o card a ponto de quebrar palavra por palavra (descrição
   do plano, linha de estatísticas). 2 colunas em 768-1023px dá espaço real. */
@media (min-width: 768px) {
body.page-template-template-pricing .vd-pricing-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
body.page-template-template-pricing .vd-pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1080px;
  }
}

body.page-template-template-pricing .vd-pricing-grid-4 {
  margin: 0 auto;
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
body.page-template-template-pricing .vd-pricing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

body.page-template-template-pricing .vd-pricing-card-enterprise {
  border-color: rgba(139,92,246,0.2);
}

body.page-template-template-pricing .vd-pricing-card-enterprise .vd-pricing-price-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

body.page-template-template-pricing .vd-pricing-card-enterprise .vd-pricing-feature-check {
  background: rgba(139,92,246,0.1);
  color: #8b5cf6;
}

body.page-template-template-pricing .vd-pricing-enterprise-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--vd-space-tight);
  padding: var(--vd-space-comp);
  background: rgba(139,92,246,0.04);
  border: 1px solid rgba(139,92,246,0.1);
  border-radius: var(--vd-radius-btn);
  margin-top: var(--vd-space-comp);
}

body.page-template-template-pricing .vd-pricing-enterprise-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--vd-space-inner);
}

body.page-template-template-pricing .vd-pricing-enterprise-highlight svg {
  flex-shrink: 0;
  margin-top: 2px;
}

body.page-template-template-pricing .vd-pricing-eh-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  line-height: 1.3;
}

body.page-template-template-pricing .vd-pricing-eh-desc {
  display: block;
  font-size: 12px;
  color: var(--vd-text-muted);
  line-height: 1.4;
}

body.page-template-template-pricing .vd-btn-enterprise {
  background: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}

body.page-template-template-pricing .vd-btn-enterprise:hover {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}

body.page-template-template-pricing .vd-pricing-free {
  display: flex;
  align-items: center;
  gap: var(--vd-space-card);
  padding: var(--vd-space-card) var(--vd-space-container);
  margin-top: var(--vd-space-card);
  background: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-card);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

html.light body.page-template-template-pricing .vd-pricing-free {
  box-shadow: var(--vd-shadow-sm);
}

body.page-template-template-pricing .vd-pricing-free-info {
  display: flex;
  align-items: center;
  gap: var(--vd-space-card);
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-pricing-free-features {
  display: flex;
  align-items: center;
  gap: var(--vd-space-comp);
  flex: 1;
  flex-wrap: wrap;
}
/* "Postar na rede" sempre na própria linha, embaixo dos outros dois selos —
   pedido explícito, não é sobre caber ou não caber na largura. */
body.page-template-template-pricing .vd-pricing-free-features > span:last-child {
  flex-basis: 100%;
}

body.page-template-template-pricing .vd-pricing-free-features span {
  display: inline-flex;
  align-items: center;
  gap: var(--vd-space-micro);
  font-size: 13px;
  color: var(--vd-text-muted);
  white-space: nowrap;
}

body.page-template-template-pricing .vd-pricing-free .vd-btn {
  flex-shrink: 0;
}

@media (max-width: 767px) {
body.page-template-template-pricing .vd-pricing-free {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vd-space-comp);
  }
body.page-template-template-pricing .vd-pricing-free-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vd-space-inner);
  }
body.page-template-template-pricing .vd-pricing-free-features {
    gap: var(--vd-space-inner);
  }
body.page-template-template-pricing .vd-pricing-free .vd-btn {
    text-align: center;
    justify-content: center;
  }
}

body.page-template-template-pricing .vd-pricing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--vd-radius-card);
  border: 1px solid var(--vd-stroke);
  background: var(--vd-card);
  position: relative;
  transition: box-shadow 0.2s;
  padding: 0;
}

html.light body.page-template-template-pricing .vd-pricing-card {
  box-shadow: var(--vd-shadow-sm);
}

body.page-template-template-pricing .vd-pricing-card.is-featured {
  border-color: var(--vd-primary);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--vd-primary-subtle);
}

body.page-template-template-pricing .vd-pricing-badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vd-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--vd-radius-pill);
  white-space: nowrap;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.page-template-template-pricing .vd-pricing-card-top {
  padding: var(--vd-space-card-inner) var(--vd-space-card);
  display: flex;
  flex-direction: column;
  flex: 1;
}

body.page-template-template-pricing .vd-pricing-card-top .vd-pricing-cta {
  margin-top: auto;
  padding-top: 20px;
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-pricing-card-top {
    padding: var(--vd-space-card);
  }
}

body.page-template-template-pricing .vd-pricing-plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vd-space-comp);
}

body.page-template-template-pricing .vd-pricing-plan-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--vd-radius-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-pricing-plan-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: var(--vd-space-micro);
}

body.page-template-template-pricing .vd-pricing-plan-desc {
  font-size: 13px;
  color: var(--vd-text-muted);
  line-height: 1.5;
}

body.page-template-template-pricing .vd-pricing-price {
  margin-top: 20px;
}

body.page-template-template-pricing .vd-pricing-original-price {
  display: flex;
  align-items: center;
  gap: var(--vd-space-inner);
  margin-bottom: 4px;
}

body.page-template-template-pricing .vd-pricing-original-price-value {
  font-size: 14px;
  color: var(--vd-text-muted);
  text-decoration: line-through;
}

body.page-template-template-pricing .vd-pricing-discount {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  padding: 2px 6px;
  border-radius: 6px;
}

html.light body.page-template-template-pricing .vd-pricing-discount {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}

body.page-template-template-pricing .vd-pricing-current-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

body.page-template-template-pricing .vd-pricing-price-value {
  color: var(--vd-text);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1;
}

body.page-template-template-pricing .vd-pricing-price-period {
  color: var(--vd-text-muted);
  font-size: 14px;
}

body.page-template-template-pricing .vd-pricing-billed {
  font-size: 12px;
  color: var(--vd-text-muted);
  margin-top: 6px;
}

body.page-template-template-pricing .vd-pricing-credits-box {
  margin-top: 20px;
  padding: 14px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-btn);
}

body.page-template-template-pricing .vd-pricing-credits-header {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  font-size: 12px;
}

/* Promoção temporária — ver comentário de remoção no topo de template-pricing.php */
body.page-template-template-pricing .vd-pricing-credits-promo-badge {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: rgba(5, 150, 105, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
html:not(.light) body.page-template-template-pricing .vd-pricing-credits-promo-badge {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}
body.page-template-template-pricing #vd-pack-label { margin-left: auto; }

body.page-template-template-pricing .vd-pricing-credits-old {
  display: block;
  font-size: 12px;
  color: var(--vd-text-muted);
  text-decoration: line-through;
  margin-bottom: 1px;
}

body.page-template-template-pricing .vd-pricing-pack-note {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--vd-text-muted);
}
body.page-template-template-pricing .vd-pricing-pack-note s { opacity: 0.7; }

/* Barra de notificação (não um card): ícone à esquerda, texto no meio em
   duas linhas (título + detalhe), prazo destacado num bloco à direita.
   Fundo branco com borda/detalhe laranja — leve, distinto do card sólido
   do Free logo abaixo, sem virar outro "plano" nem uma chapa de cor. */
body.page-template-template-pricing .vd-pricing-promo-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 24px;
  padding: 14px 18px;
  background: var(--vd-card);
  border: 1px solid rgba(224, 85, 0, 0.28);
  border-left: 4px solid var(--vd-primary);
  border-radius: 12px;
  box-shadow: 0 10px 30px -22px rgba(224, 85, 0, 0.6);
}
/* Brilho que varre a faixa de tempos em tempos — chama o olho sem piscar
   nem se mexer o layout. Pausa longa entre passadas pra não distrair. */
body.page-template-template-pricing .vd-pricing-promo-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 138, 61, 0.14), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: vd-promo-shine 6s ease-in-out infinite;
}
/* Varre pra direita, volta pra esquerda e descansa fora da tela (à esquerda)
   até a próxima passada. */
@keyframes vd-promo-shine {
  0%        { left: -50%; }
  16%       { left: 130%; }  /* ida */
  32%       { left: -50%; }  /* volta */
  100%      { left: -50%; }  /* espera */
}
/* Variante no topo da seção (seção tem padding-top:0) — precisa de respiro
   acima pra não colar na seção anterior, e um pouco mais abaixo antes do
   título "Planos disponíveis". */
body.page-template-template-pricing .vd-pricing-promo-banner--top {
  margin: 8px 0 36px;
}
body.page-template-template-pricing .vd-pricing-promo-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vd-primary-subtle);
  color: var(--vd-primary);
}
body.page-template-template-pricing .vd-pricing-promo-banner-icon svg { width: 20px; height: 20px; }

body.page-template-template-pricing .vd-pricing-promo-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-template-template-pricing .vd-pricing-promo-banner-text strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--vd-text);
}
body.page-template-template-pricing .vd-pricing-promo-banner-text span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--vd-text-muted);
}
body.page-template-template-pricing .vd-pricing-promo-banner-text b { color: var(--vd-text); font-weight: 700; }

body.page-template-template-pricing .vd-pricing-promo-banner-deadline {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 16px;
  background: var(--vd-primary);
  border-radius: 10px;
  color: #fff;
  text-align: center;
  animation: vd-promo-pulse 2.6s ease-in-out infinite;
}
/* Pulsa de leve — halo laranja que respira, sem mexer no tamanho (evita
   reflow e o "pulo" que enjoa). */
@keyframes vd-promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 85, 0, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(224, 85, 0, 0); }
}
body.page-template-template-pricing .vd-pricing-promo-banner-deadline small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}
body.page-template-template-pricing .vd-pricing-promo-banner-deadline b {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

@media (max-width: 620px) {
  body.page-template-template-pricing .vd-pricing-promo-banner { flex-wrap: wrap; }
  body.page-template-template-pricing .vd-pricing-promo-banner-deadline {
    flex-direction: row;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding: 6px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-template-pricing .vd-pricing-promo-banner::after,
  body.page-template-template-pricing .vd-pricing-promo-banner-deadline { animation: none; }
}

body.page-template-template-pricing .vd-pricing-credits-label {
  font-weight: 500;
  color: var(--vd-text);
}

body.page-template-template-pricing .vd-pricing-credits-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--vd-primary);
  background: var(--vd-primary-subtle);
  padding: 2px 8px;
  border-radius: 6px;
}

body.page-template-template-pricing .vd-pricing-credits-detail {
  display: flex;
  align-items: center;
  gap: var(--vd-space-inner);
  margin-top: 10px;
}

/* Era `--vd-radius-btn` (pill), virando um círculo solto num box de 32px —
   único ícone da página nesse formato; todo o resto (`.vd-pricing-plan-icon`
   etc.) usa a tile quadrada de `--vd-radius-input`. Alinhado ao padrão. */
body.page-template-template-pricing .vd-pricing-credits-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--vd-radius-input);
  background: rgba(245, 158, 11, 0.1);
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-pricing-credits-icon svg {
  width: 16px;
  height: 16px;
  color: #f59e0b;
  fill: #f59e0b;
}

body.page-template-template-pricing .vd-pricing-credits-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--vd-text);
  line-height: 1.2;
}

body.page-template-template-pricing .vd-pricing-credits-period {
  font-size: 11px;
  color: var(--vd-text-muted);
}

body.page-template-template-pricing .vd-pricing-packs {
  margin-top: 20px;
  padding: 14px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-btn);
}

body.page-template-template-pricing .vd-pricing-packs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

body.page-template-template-pricing .vd-pricing-packs-label {
  font-weight: 500;
  color: var(--vd-text);
}

body.page-template-template-pricing .vd-pricing-packs-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--vd-primary);
  background: var(--vd-primary-subtle);
  padding: 2px 8px;
  border-radius: 6px;
}

body.page-template-template-pricing .vd-pricing-packs-range {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--vd-text-muted);
}

body.page-template-template-pricing .vd-pricing-cta {
  margin-top: 20px;
}

body.page-template-template-pricing .vd-pricing-cta .vd-btn {
  width: 100%;
}

body.page-template-template-pricing .vd-pricing-separator {
  width: 100%;
  height: 1px;
  background: var(--vd-stroke);
}

body.page-template-template-pricing .vd-pricing-card-bottom {
  padding: var(--vd-space-card-inner) var(--vd-space-card);
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
body.page-template-template-pricing .vd-pricing-card-bottom {
    padding: var(--vd-space-card);
  }
}

body.page-template-template-pricing .vd-pricing-features-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vd-text-muted);
}

body.page-template-template-pricing .vd-pricing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--vd-space-comp);
  flex: 1;
}

body.page-template-template-pricing .vd-pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--vd-text);
  line-height: 1.5;
}

body.page-template-template-pricing .vd-pricing-feature.is-muted {
  color: var(--vd-text-muted);
}

body.page-template-template-pricing .vd-pricing-feature-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.1);
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-pricing-feature-check svg {
  width: 12px;
  height: 12px;
  color: #34d399;
}

html.light body.page-template-template-pricing .vd-pricing-feature-check {
  background: rgba(5, 150, 105, 0.1);
}

html.light body.page-template-template-pricing .vd-pricing-feature-check svg {
  color: #059669;
}

body.page-template-template-pricing .vd-pricing-feature-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.1);
  flex-shrink: 0;
}

body.page-template-template-pricing .vd-pricing-feature-soon svg {
  width: 12px;
  height: 12px;
  color: #f59e0b;
}

body.page-template-template-pricing .vd-pricing-extra-separator {
  width: 100%;
  height: 1px;
  background: var(--vd-stroke);
  margin: var(--vd-space-comp) 0;
}

body.page-template-template-pricing .vd-pricing-note {
  text-align: center;
  margin-top: 24px;
}

body.page-template-template-pricing .vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: var(--vd-radius-btn);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
  white-space: nowrap;
}

body.page-template-template-pricing .vd-btn-primary {
  padding: 12px 24px;
  font-size: 14px;
  background-color: var(--vd-primary);
  color: #ffffff;
  transition: background-color 0.2s, transform 0.15s ease, box-shadow 0.2s;
}

body.page-template-template-pricing .vd-btn-primary:hover {
  background-color: var(--vd-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.page-template-template-pricing .vd-btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

body.page-template-template-pricing .vd-btn-ghost {
  padding: 12px 24px;
  font-size: 14px;
  background-color: transparent;
  color: var(--vd-text-muted);
  border: 1px solid var(--vd-stroke);
  transition: border-color 0.2s, transform 0.15s ease;
}

body.page-template-template-pricing .vd-btn-ghost:hover {
  border-color: var(--vd-text-muted);
}

body.page-template-template-pricing .vd-btn-ghost:active {
  transform: scale(0.97);
}

body.page-template-template-pricing .vd-btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

body.page-template-template-pricing .vd-input-link {
  display: flex;
  align-items: center;
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-input);
  padding: 6px 6px 6px 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.page-template-template-pricing .vd-input-link:focus-within {
  border-color: var(--vd-primary-border);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

body.page-template-template-pricing .vd-input-link svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--vd-text-faint);
}

body.page-template-template-pricing .vd-input-link input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--vd-text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
}

body.page-template-template-pricing .vd-input-link input::placeholder {
  color: var(--vd-text-muted);
}

body.page-template-template-pricing .vd-input-link-strong {
  background: var(--vd-surface);
  border: 1px solid var(--vd-stroke);
  box-shadow: var(--vd-shadow-sm);
}

body.page-template-template-pricing .vd-hero .vd-input-link {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.2);
}

body.page-template-template-pricing .vd-hero .vd-input-link:focus-within {
  border-color: var(--vd-hero-primary-border);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

body.page-template-template-pricing .vd-input-link .vd-btn-primary {
  padding: 12px 24px;
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
body.page-template-template-pricing .vd-input-link, body.page-template-template-pricing .vd-input-link.vd-input-link-strong, body.page-template-template-pricing .vd-hero .vd-input-link {
    flex-direction: column !important;
    padding: 8px !important;
    gap: 8px !important;
  }
body.page-template-template-pricing .vd-input-link input {
    width: 100% !important;
    padding: 10px !important;
    text-align: center;
  }
body.page-template-template-pricing .vd-input-link .vd-btn-primary {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }
body.page-template-template-pricing .vd-input-link > svg:first-child {
    display: none !important;
  }
}

body.page-template-template-pricing .vd-mobile-menu-buttons .vd-btn {
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
}

body.page-template-template-pricing .vd-pricing-toggle {
  display: inline-flex;
  gap: 2px;
  background-color: var(--vd-card);
  border: 1px solid var(--vd-stroke);
  border-radius: var(--vd-radius-pill);
  padding: 3px;
}

body.page-template-template-pricing .vd-pricing-toggle button {
  background: transparent;
  border: none;
  padding: 8px 24px;
  border-radius: var(--vd-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--vd-text);
  cursor: pointer;
  transition: all 0.2s;
}

body.page-template-template-pricing .vd-pricing-toggle button.is-active {
  background-color: var(--vd-primary);
  color: #ffffff;
}
body.page-template-template-pricing .vd-cta-input { max-width: 480px; margin: 24px auto 0; }

/* ── Linha de estatísticas do plano (cortes estimados + horas de vídeo),
      mesma informação que a home já mostra na faixa de preços, adicionada
      à página de preços completa por pedido do usuário: a versão anterior
      só mostrava créditos, sem dar noção de "quanto dá pra postar". ── */
body.page-template-template-pricing .vd-pricing-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
body.page-template-template-pricing .vd-pricing-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--vd-bg);
  border-radius: var(--vd-radius-input);
}
body.page-template-template-pricing .vd-pricing-stat svg { width: 16px; height: 16px; color: var(--vd-primary); flex-shrink: 0; }
body.page-template-template-pricing .vd-pricing-stat-num { font-size: 15px; font-weight: 700; color: var(--vd-text); display: block; line-height: 1.15; }
body.page-template-template-pricing .vd-pricing-stat-label { font-size: 11px; color: var(--vd-text-muted); }

/* ── Navegação por categoria da tabela comparativa (7 grupos, ~40 linhas —
      sem atalho, a única forma de achar "Espaço de trabalho em equipe" era
      rolar a página inteira). Âncoras puras, sem JS: cada pill leva direto
      ao `id` do `tr.vd-compare-group` correspondente. ── */
body.page-template-template-pricing .vd-compare-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  margin-top: 20px;
  overflow-x: auto;      /* fallback: rola em vez de quebrar em telas estreitas */
  scrollbar-width: none;
}
body.page-template-template-pricing .vd-compare-nav::-webkit-scrollbar { display: none; }
body.page-template-template-pricing .vd-compare-nav-pill {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--v2-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-ink-soft);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.page-template-template-pricing .vd-compare-nav-pill:hover,
body.page-template-template-pricing .vd-compare-nav-pill:focus-visible {
  border-color: var(--v2-brand);
  color: var(--v2-brand-deep);
  background: var(--v2-brand-tint);
}
/* + var(--vd-compare-sticky-h): altura da barra fixa do cabeçalho da tabela
   (main.js), senão ela cobre a linha logo depois do salto da âncora. */
body.page-template-template-pricing .vd-compare-table tr.vd-compare-group {
  scroll-margin-top: calc(var(--v2-header-h, 66px) + var(--vd-compare-sticky-h, 0px) + 16px);
}

/* Descrição de uma linha sob o nome de cada categoria — o nome sozinho
   ("Editor de Vídeo", "Suporte e API") não dizia o que está sendo comparado
   ali; quem não usa o produto ainda não sabe o que é "expiração de arquivos".
   O flex fica num <div> interno, não no <td> — um <td display:flex> direto
   quebra o cálculo de altura da linha em tabelas com border-collapse. */
body.page-template-template-pricing .vd-compare-group-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Nome da categoria (AI Clipping, AI Captions...) maior pra separar bem os
     blocos da tabela. A descrição tem tamanho próprio (menor), não cresce. */
  font-size: 16.5px;
}
body.page-template-template-pricing .vd-compare-group-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--v2-muted);
}

/* Affordance de scroll horizontal no mobile: sem isso, uma tabela de 5
   colunas que corta na borda da tela não sinaliza que dá pra arrastar. */
body.page-template-template-pricing .vd-compare-scroll-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--v2-muted);
}
body.page-template-template-pricing .vd-compare-scroll-hint svg { width: 15px; height: 15px; flex-shrink: 0; animation: vd-compare-hint-nudge 1.6s ease-in-out infinite; }
@media (max-width: 700px) {
  body.page-template-template-pricing .vd-compare-scroll-hint { display: flex; }
}
@keyframes vd-compare-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-template-pricing .vd-compare-scroll-hint svg { animation: none; }
}

/* ── Clone flutuante do cabeçalho da tabela comparativa, sincronizado por JS
      (ver main.js). Largura/posição de cada `th` são setadas inline por
      script; aqui só o visual base e o empilhamento. ── */
body.page-template-template-pricing .vd-compare-sticky-head {
  position: fixed;
  top: var(--v2-header-h, 66px);
  overflow: hidden;
  z-index: 30;
  border-bottom: 1px solid var(--v2-line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: var(--v2-bg-sunk);
  pointer-events: none;
}
body.page-template-template-pricing .vd-compare-sticky-head table {
  border-collapse: collapse;
}
/* Primeira coluna do clone fixa por sticky, igual à tabela real — sem isso,
   o rótulo do plano no topo desalinhava da coluna de recurso por baixo
   assim que o usuário rolava a tabela pro lado (ver sincronia de scrollLeft
   em main.js, que substitui o transform anterior por essa razão). */
body.page-template-template-pricing .vd-compare-sticky-head thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
body.page-template-template-pricing .vd-compare-sticky-head th {
  padding: 12px 18px;
  text-align: left;
  vertical-align: middle;
  font-weight: 700;
  color: var(--v2-ink);
  background: var(--v2-bg-sunk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-template-template-pricing .vd-compare-sticky-head th.is-featured {
  background: color-mix(in srgb, var(--v2-brand-tint) 60%, var(--v2-bg-sunk));
}
/* Nome e preço lado a lado (não empilhados como no header real) pra manter
   a barra fixa baixa — ela só precisa lembrar qual coluna é qual plano.
   Classes próprias do clone (`.vd-compare-sticky-*`, não `.vd-compare-th-*`):
   ver main.js — reaproveitar as classes originais faria o seletor de preço
   ao vivo do Paddle (`paddle-pricing.js:206`, `querySelector` = primeiro
   match) grudar no clone em vez do cabeçalho real. */
body.page-template-template-pricing .vd-compare-sticky-head .vd-compare-sticky-name {
  display: inline;
  font-size: 14px;
  font-weight: 700;
}
body.page-template-template-pricing .vd-compare-sticky-head .vd-compare-sticky-price {
  display: inline;
  font-size: 12.5px;
  color: var(--v2-ink-soft);
  font-weight: 600;
  margin-left: 8px;
}
body.page-template-template-pricing .vd-compare-sticky-head .vd-compare-th-badge { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   Botões e inputs v2 nas páginas chrome-only (corpo em vd-*, só header/
   footer migrados — ver vdclip_uses_v2_chrome_only() em functions.php).
   O corpo antigo usa `.vd-btn-primary` laranja e `.vd-input-link` com raio
   pequeno; o v2 usa CTA preto (ver nota no topo do arquivo: "o CTA nunca usa
   a cor dominante da marca") e pílula cheia. Sem isso, cada página migrada
   tinha dois sistemas de botão brigando visualmente — header preto/pílula,
   corpo laranja/quadrado. Escopado em `body.v2-chrome` só: não toca páginas
   ainda 100% antigas nem as já 100% v2 (que não carregam vd-btn mesmo).
   `.vd-btn-enterprise` (roxo, um caso isolado) fica de fora de propósito.
   ══════════════════════════════════════════════════════════════════════ */
body.v2-chrome .vd-btn {
  border-radius: var(--v2-r-pill);
  font-family: inherit;
  min-height: 46px;
  padding: 0 24px;
  font-size: 15px;
  letter-spacing: -0.01em;
}
body.v2-chrome .vd-btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

body.v2-chrome .vd-btn-primary {
  background-color: var(--v2-cta);
  color: var(--v2-on-cta);
}
body.v2-chrome .vd-btn-primary:hover { background-color: var(--v2-cta-hover); }

body.v2-chrome .vd-btn-ghost {
  background-color: var(--v2-card);
  color: var(--v2-ink);
  border: 1px solid var(--v2-line-strong);
}
body.v2-chrome .vd-btn-ghost:hover { border-color: var(--v2-ink); }

body.v2-chrome .vd-input-link {
  border-radius: var(--v2-r-pill);
  border-color: var(--v2-line);
  box-shadow: var(--v2-shadow-card);
}
body.v2-chrome .vd-input-link:focus-within {
  border-color: var(--v2-brand-line);
  box-shadow: var(--v2-shadow-card);
}
body.v2-chrome .vd-input-link .vd-btn-primary { border-radius: var(--v2-r-pill); }

/* ── Pricing: hero de decisão ────────────────────────────────────────────
   A home vende o resultado com um palco de produto. Pricing reaproveita a
   mesma lógica em escala menor: resultado concreto à esquerda, redução de
   risco à direita e controles de cobrança só depois do contexto. */
body.page-template-template-pricing .vd-pricing-hero {
  padding-top: clamp(52px, 7vw, 88px);
  padding-bottom: clamp(34px, 5vw, 58px);
  text-align: left;
  background:
    radial-gradient(52% 100% at 78% 0%, rgba(224, 85, 0, 0.11), transparent 72%),
    var(--v2-bg);
}

body.page-template-template-pricing .v2-pricing-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .72fr);
  align-items: center;
  gap: clamp(40px, 8vw, 120px);
}

body.page-template-template-pricing .v2-pricing-hero-copy { min-width: 0; }
body.page-template-template-pricing .v2-pricing-hero-copy .v2-eyebrow,
body.page-template-template-pricing .v2-pricing-plans-intro .v2-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--v2-brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.page-template-template-pricing .v2-pricing-hero-copy .v2-display {
  max-width: 11ch;
  margin: 0;
  text-wrap: balance;
}

body.page-template-template-pricing .v2-pricing-hero-copy .v2-lead {
  max-width: 42ch;
  margin: 20px 0 0;
}

body.page-template-template-pricing .v2-pricing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}

body.page-template-template-pricing .v2-pricing-hero-actions .v2-faq-help {
  margin: 0;
}

body.page-template-template-pricing .v2-pricing-hero-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--v2-r-card);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 56%),
    var(--v2-stage);
  color: var(--v2-stage-text);
  box-shadow: 0 20px 52px rgba(18, 18, 21, .12);
}

body.page-template-template-pricing .v2-pricing-hero-panel::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  bottom: -90px;
  border: 1px solid rgba(255, 157, 92, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 157, 92, .06), 0 0 0 56px rgba(255, 157, 92, .035);
}

body.page-template-template-pricing .v2-pricing-hero-panel > * { position: relative; z-index: 1; }
body.page-template-template-pricing .v2-pricing-hero-panel-top {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ff9d5c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.page-template-template-pricing .v2-pricing-hero-panel-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(224,85,0,.2);
}
body.page-template-template-pricing .v2-pricing-hero-panel-icon svg { width: 16px; height: 16px; }
body.page-template-template-pricing .v2-pricing-hero-panel strong {
  display: block;
  max-width: 16ch;
  margin-top: 24px;
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.06;
  letter-spacing: -.045em;
}
body.page-template-template-pricing .v2-pricing-hero-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.13);
}
body.page-template-template-pricing .v2-pricing-hero-results div { display: grid; gap: 4px; }
body.page-template-template-pricing .v2-pricing-hero-results b { color: #fff; font-size: 19px; letter-spacing: -.04em; }
body.page-template-template-pricing .v2-pricing-hero-results span { color: var(--v2-stage-muted); font-size: 11px; line-height: 1.3; }
body.page-template-template-pricing .v2-pricing-hero-panel p {
  max-width: 34ch;
  margin: 24px 0 0;
  color: var(--v2-stage-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.page-template-template-pricing .v2-pricing-hero-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-top: clamp(40px, 6vw, 64px);
  text-align: center;
}
body.page-template-template-pricing .v2-pricing-hero-controls .vd-pricing-toggle { margin: 0; }
body.page-template-template-pricing .v2-pricing-hero-controls .vd-pricing-discount-note { margin: 0; }

body.page-template-template-pricing .v2-pricing-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--v2-line);
  color: var(--v2-muted);
  font-size: 12px;
}
body.page-template-template-pricing .v2-pricing-trust span { display: inline-flex; align-items: center; gap: 7px; }
body.page-template-template-pricing .v2-pricing-trust svg { width: 15px; height: 15px; color: var(--v2-brand); }

body.page-template-template-pricing .v2-pricing-plans-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}
body.page-template-template-pricing .v2-pricing-plans-intro .v2-eyebrow { margin-bottom: 10px; }
body.page-template-template-pricing .v2-pricing-plans-intro .v2-h2 { margin: 0; }
body.page-template-template-pricing .v2-pricing-plans-intro > p {
  max-width: 38ch;
  margin: 0 0 3px;
  color: var(--v2-muted);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 820px) {
  body.page-template-template-pricing .v2-pricing-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  body.page-template-template-pricing .v2-pricing-hero-copy .v2-display { max-width: 14ch; }
  body.page-template-template-pricing .v2-pricing-hero-panel { max-width: 560px; }
}

@media (max-width: 560px) {
  body.page-template-template-pricing .v2-pricing-hero { padding-top: 42px; }
  body.page-template-template-pricing .v2-pricing-hero-actions { align-items: stretch; flex-direction: column; gap: 16px; }
  body.page-template-template-pricing .v2-pricing-hero-actions .v2-btn { width: 100%; }
  body.page-template-template-pricing .v2-pricing-hero-actions .v2-faq-help { justify-content: center; }
  body.page-template-template-pricing .v2-pricing-hero-results { gap: 8px; }
  body.page-template-template-pricing .v2-pricing-hero-results b { font-size: 17px; }
  body.page-template-template-pricing .v2-pricing-plans-intro { display: block; }
  body.page-template-template-pricing .v2-pricing-plans-intro > p { margin-top: 12px; }
  body.page-template-template-pricing .v2-pricing-trust { justify-content: flex-start; gap: 10px 18px; }
}

/* ── Pricing: decisão em três superfícies ──────────────────────────────── */
body.page-template-template-pricing .v2-pricing-plans-intro,
body.page-template-template-pricing .vd-compare-section-intro,
body.page-template-template-pricing .vd-calc-section-intro { align-items: end; }

/* O Premium é a decisão principal. A inversão cria uma âncora visual clara
   e aproxima os cards da lógica da home, sem alterar preço ou contrato JS. */
body.page-template-template-pricing .vd-pricing-card.is-featured {
  transform: translateY(-8px);
  border-color: var(--v2-stage);
  background: var(--v2-stage);
  box-shadow: 0 20px 44px rgba(18, 18, 21, .18);
}
/* --v2-stage é um preto fixo pensado pra contrastar com a página clara. No
   escuro a página já é quase essa mesma cor — o card Premium quase some e
   fica com um tom quente destoando do cinza frio dos outros dois cards. */
html:not(.light) body.page-template-template-pricing .vd-pricing-card.is-featured {
  border-color: var(--v2-brand-line);
  background: var(--v2-card);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .45);
}
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-card-top,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-card-bottom { color: var(--v2-stage-text); }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-plan-name,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-plan-desc,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-billed,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-features-label,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-feature { color: var(--v2-stage-text); }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-plan-desc,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-billed,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-features-label { color: var(--v2-stage-muted); }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-price-value,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-price-period { color: #fff; }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-original-price-value { color: #8f8f9a; }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-plan-icon { background: rgba(255,255,255,.1) !important; }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-plan-icon svg { stroke: #ff9d5c; }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-credits-box,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-stat { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-credits-label,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-credits-period,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-stat-label { color: #b9b1a9; }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-credits-count,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-stat-num { color: #fff; }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-separator,
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-extra-separator { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-feature-check { background: rgba(255,157,92,.16); color: #ff9d5c; }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-btn-primary { background: #fff; color: var(--v2-stage); }
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-btn-primary:hover { background: #ffede1; }

/* Calculadora: o painel agora tem uma narrativa própria e não parece um
   formulário abandonado entre duas seções. */
body.page-template-template-pricing .vd-calc-section-intro {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}
body.page-template-template-pricing .vd-calc-section-intro .v2-eyebrow,
body.page-template-template-pricing .vd-compare-section-intro .v2-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--v2-brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.page-template-template-pricing .vd-calc-section-intro .v2-h2 { margin: 0; }
body.page-template-template-pricing .vd-calc-section-intro > p {
  max-width: 37ch;
  margin: 0 0 4px;
  color: var(--v2-muted);
  font-size: 14px;
  line-height: 1.55;
}
body.page-template-template-pricing .vd-calc-box {
  position: relative;
  /* overflow:hidden cortava o dropdown "Categoria"/"Visualizações" quando
     ele abre perto do fundo da caixa — o fundo em gradiente já respeita o
     border-radius sozinho (background sempre recorta no border-box), não
     precisa do overflow:hidden pra isso. */
  overflow: visible;
  margin-top: 0;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(224,85,0,.2), transparent 70%),
    var(--v2-stage);
  box-shadow: 0 22px 52px rgba(18,18,21,.16);
}
body.page-template-template-pricing .vd-calc-box > * { position: relative; z-index: 1; }
/* .vd-calc-inputs-row e #vd-calc-btn-wrap são irmãos com o mesmo z-index:1
   acima — empatados, a ordem no DOM decidia, e o botão (que vem depois)
   pintava por cima da linha de inputs inteira, escondendo o dropdown que
   abre por dentro dela (o z-index:20 do dropdown só vale contra irmãos
   dentro da própria linha, não contra esse outro bloco). */
body.page-template-template-pricing .vd-calc-inputs-row { z-index: 2; }

/* .vd-calc-box é sempre escuro, mas as regras html.light do resto do site
   vazavam nesses filhos deixando-os brancos. Mais especificidade (.vd-calc-box
   no seletor) mantém o "vidro escuro" nos dois temas. */
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-number-input,
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-dropdown-btn,
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-platform {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-number-input span,
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-clips-hint span,
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-q-label { color: #fff; }
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-clips-hint { color: #a9a09a; }
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-minus,
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-plus,
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-dropdown-btn svg { color: #c3bdb8; }
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-platform.is-active {
  background: rgba(255,157,92,.13);
  border-color: #ff9d5c;
  color: #ff9d5c;
}
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-dropdown-list {
  background: #111118;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-dropdown-list li { color: #ededef; }
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-dropdown-list li:hover { background: rgba(255,255,255,0.06); }
/* Mesmo problema no bloco de resultado (depois de "Calcular meu plano") */
html.light body.page-template-template-pricing .vd-calc-box .vd-calc-metric { background: rgba(255,255,255,.08); }

/* Valores da tabela comparativa (check/traço/texto) vinham alinhados à
   esquerda dentro de cada coluna de plano — só a coluna "Recursos" faz
   sentido ficar à esquerda. */
body.page-template-template-pricing .v2-compare-table td:not(:first-child) { text-align: center; }
body.page-template-template-pricing .vd-calc-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
body.page-template-template-pricing .vd-calc-box-kicker {
  display: block;
  margin-bottom: 7px;
  color: #ff9d5c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.page-template-template-pricing .vd-calc-box-head strong { color: #fff; font-size: 22px; letter-spacing: -.03em; }
body.page-template-template-pricing .vd-calc-box-step { color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
body.page-template-template-pricing .vd-calc-box-step i { color: #85828a; font-style: normal; }
body.page-template-template-pricing .vd-calc-box .vd-calc-q-label { color: #fff; }
body.page-template-template-pricing .vd-calc-box .vd-calc-clips-hint { color: #a9a09a; }
body.page-template-template-pricing .vd-calc-box .vd-calc-clips-hint span,
body.page-template-template-pricing .vd-calc-box .vd-calc-number-input span { color: #fff; }
body.page-template-template-pricing .vd-calc-box .vd-calc-number-input,
body.page-template-template-pricing .vd-calc-box .vd-calc-dropdown-btn,
body.page-template-template-pricing .vd-calc-box .vd-calc-platform { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
body.page-template-template-pricing .vd-calc-box .vd-calc-minus,
body.page-template-template-pricing .vd-calc-box .vd-calc-plus,
body.page-template-template-pricing .vd-calc-box .vd-calc-dropdown-btn svg { color: #c3bdb8; }
body.page-template-template-pricing .vd-calc-box .vd-calc-platform.is-active { background: rgba(255,157,92,.13); border-color: #ff9d5c; color: #ff9d5c; box-shadow: 0 0 0 3px rgba(255,157,92,.1); }
body.page-template-template-pricing .vd-calc-box #vd-calc-btn-wrap { margin-top: 30px !important; }
body.page-template-template-pricing .vd-calc-box #vd-calc-btn { background: #fff; color: var(--v2-stage); }
body.page-template-template-pricing .vd-calc-box #vd-calc-btn:hover { background: #ffede1; }
body.page-template-template-pricing .vd-calc-assurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 18px;
  color: var(--v2-muted);
  font-size: 12px;
}
body.page-template-template-pricing .vd-calc-assurance span { display: inline-flex; align-items: center; gap: 7px; }
body.page-template-template-pricing .vd-calc-assurance svg { width: 16px; height: 16px; color: var(--v2-brand); }

/* Resultado dentro do mesmo painel: mantém continuidade entre pergunta e
   resposta, com métricas em cards de vidro em vez de outra caixa solta. */
body.page-template-template-pricing .vd-calc-box .vd-calc-result-bar { border-top-color: rgba(255,255,255,.14); }
body.page-template-template-pricing .vd-calc-box .vd-calc-rec-label,
body.page-template-template-pricing .vd-calc-box .vd-calc-metric-title { color: #b9b1a9; }
body.page-template-template-pricing .vd-calc-box .vd-calc-rec-plan,
body.page-template-template-pricing .vd-calc-box .vd-calc-metric-val { color: #fff; }
body.page-template-template-pricing .vd-calc-box .vd-calc-metric { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
body.page-template-template-pricing .vd-calc-box .vd-calc-metric-sub { color: #a9a09a; }
body.page-template-template-pricing .vd-calc-box .vd-calc-result-bar > .vd-btn { background: #fff; color: var(--v2-stage); }

/* Comparador: a tabela vira um módulo de produto, com cabeçalho visual e
   leitura de linhas mais curta. */
body.page-template-template-pricing .vd-compare-section-intro { margin-bottom: 24px; }
body.page-template-template-pricing .vd-compare-section-intro .v2-eyebrow { margin-bottom: 10px; }
body.page-template-template-pricing .vd-compare-nav { margin: 0 0 14px; padding: 7px; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-card); }
body.page-template-template-pricing .vd-compare-nav-pill { border-color: transparent; background: transparent; }
body.page-template-template-pricing .vd-compare-nav-pill:hover,
body.page-template-template-pricing .vd-compare-nav-pill:focus-visible { border-color: var(--v2-brand-line); }
body.page-template-template-pricing .v2-compare-table { border: 1px solid var(--v2-line-strong); border-radius: 24px; background: var(--v2-card); box-shadow: 0 16px 40px rgba(18,18,21,.07); }
body.page-template-template-pricing .v2-compare-table th,
body.page-template-template-pricing .v2-compare-table td { padding: 15px 18px; font-size: 13.5px; }
body.page-template-template-pricing .v2-compare-table thead th { background: var(--v2-stage); color: #fff; border-bottom-color: rgba(255,255,255,.13); }
body.page-template-template-pricing .v2-compare-table thead th:first-child { background: var(--v2-stage); }
body.page-template-template-pricing .v2-compare-table thead th.is-featured { background: var(--v2-brand); }
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-name { color: #fff; }
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-price { color: #c8c2bd; }
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-name,
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-price { color: #fff; }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td { background: var(--v2-brand-tint); }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td:first-child { background: var(--v2-brand-tint); }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td { padding-top: 24px; padding-bottom: 10px; background: var(--v2-bg-sunk); color: var(--v2-brand-deep); border-bottom-color: var(--v2-brand-line); }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:first-child { background: var(--v2-bg-sunk); }
body.page-template-template-pricing .v2-compare-table .vd-compare-group-desc { color: var(--v2-muted); }
body.page-template-template-pricing .v2-compare-table .vd-compare-check { display: inline-grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(224,85,0,.1); }
body.page-template-template-pricing .v2-compare-table .vd-compare-check svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
  body.page-template-template-pricing .vd-pricing-card.is-featured { transform: none; }
  body.page-template-template-pricing .vd-calc-section-intro { display: block; }
  body.page-template-template-pricing .vd-calc-section-intro > p { margin-top: 12px; }
  body.page-template-template-pricing .vd-calc-box-head strong { font-size: 19px; }
  body.page-template-template-pricing .vd-calc-assurance { justify-content: flex-start; }
  body.page-template-template-pricing .vd-compare-section-intro { display: block; }
}

/* ── Ajustes finais da área de escolha ─────────────────────────────────── */
body.page-template-template-pricing .v2-pricing-hero + #vd-pricing-plans { padding-top: 58px !important; }
body.page-template-template-pricing .v2-pricing-plans-intro { align-items: center; margin-bottom: 12px; }
body.page-template-template-pricing .vd-pricing-plans-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  text-align: right;
}
body.page-template-template-pricing .vd-pricing-plans-controls > span {
  width: 100%;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.page-template-template-pricing .vd-pricing-plans-controls .vd-pricing-toggle { margin: 0; }
body.page-template-template-pricing .vd-pricing-plans-controls .vd-pricing-discount-note { margin: 0; font-size: 12px; }
body.page-template-template-pricing .vd-pricing-plans-summary {
  max-width: 48ch;
  margin: 0 0 22px;
  color: var(--v2-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* A opção gratuita funciona melhor como a porta de entrada da escolha, não
   como rodapé depois de três assinaturas. */
body.page-template-template-pricing .vd-pricing-free {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 24px auto 40px;
  padding: 17px 20px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 18px;
  background: var(--v2-card);
  box-shadow: none;
}
body.page-template-template-pricing .vd-pricing-free-info { gap: 14px; }
body.page-template-template-pricing .vd-pricing-free-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--v2-brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.page-template-template-pricing .vd-pricing-free-info .vd-pricing-plan-name { margin: 0; font-size: 18px; }
body.page-template-template-pricing .vd-pricing-free-info .vd-body-sm { color: var(--v2-muted) !important; }
body.page-template-template-pricing .vd-pricing-free-price { white-space: nowrap; font-family: 'Archivo', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
body.page-template-template-pricing .vd-pricing-free-price .vd-body-sm { font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; }
body.page-template-template-pricing .vd-pricing-free-features { justify-content: flex-start; gap: 14px 20px; }
body.page-template-template-pricing .vd-pricing-free-features > span { color: var(--v2-ink-soft); font-size: 12px; }
body.page-template-template-pricing .vd-pricing-free-features svg { width: 15px; height: 15px; fill: none; stroke: var(--v2-brand); stroke-width: 2; flex-shrink: 0; }
body.page-template-template-pricing .vd-pricing-free .vd-btn { min-height: 38px; padding-inline: 17px; }

/* A equivalência vira uma legenda editorial sob os cards, em vez de uma
   pílula competindo com o conteúdo principal. */
body.page-template-template-pricing .vd-pricing-credit-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding: 16px 20px;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}
body.page-template-template-pricing .vd-pricing-credit-equation { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
body.page-template-template-pricing .vd-pricing-credit-equation strong { font-family: 'Archivo', sans-serif; font-size: 20px; letter-spacing: -.04em; }
body.page-template-template-pricing .vd-pricing-credit-equation span { color: var(--v2-muted); font-size: 12px; }
body.page-template-template-pricing .vd-pricing-credit-equation b { margin: 0 5px; color: var(--v2-brand); font-size: 16px; }
body.page-template-template-pricing .vd-pricing-credit-text { max-width: 58ch; }
body.page-template-template-pricing .vd-pricing-credit-note p { margin: 0; color: var(--v2-muted); font-size: 12.5px; line-height: 1.45; text-align: right; }
body.page-template-template-pricing .vd-pricing-credit-validity { margin-top: 4px !important; font-size: 11.5px; opacity: 0.8; }

/* Tabela: separadores de categoria em superfície escura, para a leitura
   deixar de parecer uma planilha contínua. */
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td,
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:first-child {
  background: var(--v2-stage) !important;
  border-bottom-color: rgba(255,255,255,.12);
  color: #fff;
}
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:first-child { padding-top: 18px; padding-bottom: 15px; }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:not(:first-child) { padding: 0; }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-desc { color: #aaa39d; }
body.page-template-template-pricing .v2-compare-table tbody td:first-child { font-weight: 650; color: var(--v2-ink); }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td { background: var(--v2-card); }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured { background: color-mix(in srgb, var(--v2-brand-tint) 72%, var(--v2-card)); }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):nth-child(odd) td:not(.is-featured) { background: color-mix(in srgb, var(--v2-bg-sunk) 46%, var(--v2-card)); }
body.page-template-template-pricing .v2-compare-table .vd-compare-dash { font-size: 18px; opacity: .55; }

/* Entre 801 e 1099px as 3 colunas (info/selos/botão) lado a lado não cabem
   mais — o selo "Postar na rede" ficava sozinho, quebrado numa 2ª linha.
   Reusa o mesmo layout de 2 linhas já usado abaixo de 800px. */
@media (min-width: 801px) and (max-width: 1099px) {
  body.page-template-template-pricing .vd-pricing-free { grid-template-columns: 1fr auto; gap: 14px; }
  body.page-template-template-pricing .vd-pricing-free-features { grid-column: 1 / -1; grid-row: 2; }
  body.page-template-template-pricing .vd-pricing-free .vd-btn { grid-column: 2; grid-row: 1; }
}

@media (max-width: 800px) {
  body.page-template-template-pricing .v2-pricing-hero + #vd-pricing-plans { padding-top: 42px !important; }
  body.page-template-template-pricing .v2-pricing-plans-intro { align-items: center; text-align: center; }
  body.page-template-template-pricing .vd-pricing-plans-controls { justify-content: center; margin-top: 18px; text-align: center; }
  body.page-template-template-pricing .vd-pricing-plans-controls > span { width: 100%; text-align: center; }
  body.page-template-template-pricing .vd-pricing-free { grid-template-columns: 1fr auto; gap: 14px; }
  body.page-template-template-pricing .vd-pricing-free-features { grid-column: 1 / -1; grid-row: 2; }
  body.page-template-template-pricing .vd-pricing-free .vd-btn { grid-column: 2; grid-row: 1; }
  body.page-template-template-pricing .vd-pricing-credit-note { display: block; }
  body.page-template-template-pricing .vd-pricing-credit-text { margin-top: 9px; }
  body.page-template-template-pricing .vd-pricing-credit-note p { text-align: left; }
}

@media (max-width: 480px) {
  body.page-template-template-pricing .vd-pricing-free { grid-template-columns: 1fr; }
  body.page-template-template-pricing .vd-pricing-free .vd-btn,
  body.page-template-template-pricing .vd-pricing-free-features { grid-column: auto; grid-row: auto; }
body.page-template-template-pricing .vd-pricing-free .vd-btn { width: 100%; }
}

/* Tabela comparativa no mobile: a 1ª coluna (nome do recurso) é fixa/sticky
   e comia largura demais, cortando os valores da direita. `max-width` em
   célula de tabela é ignorado no layout automático — então travamos os três
   (width/min/max) iguais + quebra de palavra pra forçar a coluna estreita.
   O tamanho do TEXTO fica igual; o que encolhe é a coluna. */
@media (max-width: 820px) {
  /* `table-layout: fixed` é o que faz a largura da coluna ser respeitada —
     no `auto` o navegador ignora width/max-width das células e usa o
     conteúdo. Com fixed, a 1ª coluna trava em 116px e as demais dividem o
     resto igualmente. O clone do cabeçalho sticky copia as larguras da
     tabela real (syncWidths), então ele acompanha sozinho. */
  body.page-template-template-pricing .v2-compare-table table { table-layout: fixed; }
  body.page-template-template-pricing .v2-compare-table th:first-child,
  body.page-template-template-pricing .v2-compare-table td:first-child {
    width: 132px;
    padding-left: 12px;
    padding-right: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  body.page-template-template-pricing .v2-compare-table th,
  body.page-template-template-pricing .v2-compare-table td {
    padding: 13px 12px;
    overflow-wrap: anywhere;
  }
}

/* O bloco de créditos é informação principal do plano, não um badge. O
   radius de botão herdado deixava a superfície com aparência de cápsula. */
body.page-template-template-pricing .vd-pricing-credits-box {
  border-radius: 16px;
  background: var(--v2-bg-sunk);
  border-color: var(--v2-line);
}
body.page-template-template-pricing .vd-pricing-card.is-featured .vd-pricing-credits-box {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

/* ── Matriz de comparação: mais próxima dos cards, menos cara de planilha ── */
body.page-template-template-pricing .v2-compare-table {
  overflow: auto;
  border-color: var(--v2-line-strong);
  border-radius: 22px;
  background: var(--v2-card);
  box-shadow: 0 14px 34px rgba(18,18,21,.06);
}
body.page-template-template-pricing .v2-compare-table table { min-width: 900px; }
body.page-template-template-pricing .v2-compare-table th,
body.page-template-template-pricing .v2-compare-table td {
  border-bottom-color: var(--v2-line);
}
body.page-template-template-pricing .v2-compare-table thead th,
body.page-template-template-pricing .v2-compare-table thead th:first-child {
  padding-top: 20px;
  padding-bottom: 18px;
  background: var(--v2-bg-sunk);
  color: var(--v2-ink);
  border-bottom: 1px solid var(--v2-line-strong);
}
body.page-template-template-pricing .v2-compare-table thead th:first-child { min-width: 220px; }
body.page-template-template-pricing .v2-compare-table thead th.is-featured {
  background: var(--v2-brand-tint);
  box-shadow: inset 0 3px 0 var(--v2-brand), inset 1px 0 0 var(--v2-brand-line), inset -1px 0 0 var(--v2-brand-line);
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-resource {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-name {
  display: block;
  color: var(--v2-ink);
  font-size: 16px;
  letter-spacing: -.02em;
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-price {
  display: block;
  margin-top: 4px;
  color: var(--v2-muted);
  font-size: 12px;
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-name { color: var(--v2-ink); }
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-price { color: var(--v2-brand-deep); }
body.page-template-template-pricing .v2-compare-table .vd-compare-th-badge {
  margin-bottom: 8px;
  padding: 3px 9px;
  color: #fff;
  background: var(--v2-brand);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn {
  min-height: 28px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v2-ink-soft);
  border-radius: 0;
  background: transparent;
  color: var(--v2-ink);
  font-size: 12px;
  font-weight: 750;
}
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn:hover {
  background: transparent;
  border-color: var(--v2-brand);
  color: var(--v2-brand-deep);
  transform: none;
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-btn {
  border-color: var(--v2-brand);
  color: var(--v2-brand-deep);
}
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td:first-child {
  background: var(--v2-card);
}
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured {
  background: color-mix(in srgb, var(--v2-brand-tint) 60%, var(--v2-card));
  box-shadow: inset 1px 0 0 var(--v2-brand-line), inset -1px 0 0 var(--v2-brand-line);
}
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td:first-child,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td.is-featured {
  background: #fff7f1;
}
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td,
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:first-child {
  padding-top: 16px;
  padding-bottom: 14px;
  background: #fff7f1 !important;
  color: var(--v2-brand-deep);
  border-top: 1px solid var(--v2-brand-line);
  border-bottom: 1px solid var(--v2-brand-line);
}
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:first-child { min-width: 220px; }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:not(:first-child) { background: #fff7f1 !important; }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-head { gap: 3px; }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-head::before {
  content: 'Categoria';
  margin-bottom: 3px;
  color: var(--v2-brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-desc { color: var(--v2-muted); }
body.page-template-template-pricing .v2-compare-table .vd-compare-check {
  background: #e9f8f0;
  color: #15935b;
}

/* ── Alinhamento do formulário ───────────────────────────────────────────
   O primeiro campo tem uma dica extra de horas. Alinhar a grade pelo fim
   fazia os outros labels descerem para acompanhar essa dica. */
body.page-template-template-pricing .vd-calc-inputs-row { align-items: start; }
body.page-template-template-pricing .vd-calc-input-group { justify-content: flex-start; }

/* ── Tabela: paleta única do produto ─────────────────────────────────────
   A tabela usa a mesma combinação da página: superfície clara, carvão e o
   laranja do VDClip. O Premium é destacado por linha e borda, não por uma
   segunda cor de fundo competindo com o restante. */
body.page-template-template-pricing .v2-compare-table thead th,
body.page-template-template-pricing .v2-compare-table thead th:first-child,
body.page-template-template-pricing .v2-compare-table thead th.is-featured {
  background: var(--v2-stage);
  color: #fff;
  border-bottom-color: rgba(255,255,255,.14);
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured {
  box-shadow: inset 0 3px 0 var(--v2-brand), inset 1px 0 0 rgba(255,157,92,.35), inset -1px 0 0 rgba(255,157,92,.35);
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-resource,
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-price {
  color: #b9b1a9;
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-name,
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-name,
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-price { color: #fff; }
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn,
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-btn {
  border-bottom-color: #ff9d5c;
  color: #fff;
}
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn:hover,
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-btn:hover { color: #ffb98b; }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td,
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:first-child,
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:not(:first-child) {
  background: var(--v2-bg-sunk) !important;
  border-top-color: var(--v2-line-strong);
  border-bottom-color: var(--v2-line-strong);
}
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-desc { color: var(--v2-muted); }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td:first-child { background: var(--v2-card); }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured { background: #fffaf5; box-shadow: inset 1px 0 0 var(--v2-brand-line), inset -1px 0 0 var(--v2-brand-line); }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td:first-child,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td.is-featured { background: #fff4ea; }
body.page-template-template-pricing .v2-compare-table .vd-compare-check { background: rgba(224,85,0,.1); color: var(--v2-brand); }

/* ── Direção final da matriz de preços ────────────────────────────────────
   A tabela deve parecer a continuação dos cards acima: superfície branca,
   Premium em carvão e laranja apenas como sinal de ação. As categorias são
   faixas de largura total (o markup usa colspan) para não criar blocos altos
   e quebrados na primeira coluna. Este bloco consolida a direção visual da
   tabela e fica depois dos ajustes históricos acima para manter uma cascata
   previsível. */
body.page-template-template-pricing .v2-compare-table {
  overflow: auto;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-card);
  background: var(--v2-card);
  box-shadow: var(--v2-shadow-card);
}
body.page-template-template-pricing .v2-compare-table table { min-width: 940px; }
body.page-template-template-pricing .v2-compare-table th,
body.page-template-template-pricing .v2-compare-table td {
  border-bottom: 1px solid var(--v2-line);
  vertical-align: middle;
}
body.page-template-template-pricing .v2-compare-table thead th,
body.page-template-template-pricing .v2-compare-table thead th:first-child {
  padding: 20px 18px 18px;
  background: var(--v2-card);
  color: var(--v2-ink);
  border-bottom: 1px solid var(--v2-line-strong);
}
body.page-template-template-pricing .v2-compare-table thead th:first-child {
  min-width: 220px;
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured {
  background: var(--v2-stage);
  color: var(--v2-stage-text);
  box-shadow: inset 0 3px 0 var(--v2-brand), inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(255,255,255,.12);
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-resource {
  color: var(--v2-faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-name {
  color: var(--v2-ink);
  font-size: 17px;
}
body.page-template-template-pricing .v2-compare-table thead .vd-compare-th-price {
  color: var(--v2-muted);
  font-size: 12px;
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-name,
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-price {
  color: var(--v2-stage-text);
}
body.page-template-template-pricing .v2-compare-table .vd-compare-th-badge {
  color: var(--v2-stage);
  background: var(--v2-brand);
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn {
  min-height: 28px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v2-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--v2-ink);
  font-size: 12px;
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-btn {
  border-bottom-color: var(--v2-brand);
  color: var(--v2-stage-text);
}
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn:hover {
  color: var(--v2-brand-deep);
  background: transparent;
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-btn:hover { color: #ffb98b; }

body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td:first-child {
  background: var(--v2-card);
  color: var(--v2-ink);
}
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured {
  background: #1b1816;
  color: var(--v2-stage-text);
  border-left-color: rgba(255,255,255,.08);
  border-right-color: rgba(255,255,255,.08);
}
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured .vd-compare-value { color: #e6dfd9; }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured .vd-compare-dash { color: #8f8780; }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured .vd-compare-check {
  color: #ff9d5c;
  background: rgba(224,85,0,.18);
}
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td,
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td:first-child { background: #fff8f3; }
body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td.is-featured { background: #26211e; }
/* A linha de hover clara acima só funciona no claro: no escuro, o texto em
   var(--v2-ink/-ink-soft) já é claro e some contra o fundo #fff8f3. */
html:not(.light) body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td,
html:not(.light) body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td:first-child { background: #26211e; }
body.page-template-template-pricing .v2-compare-table tbody td:first-child { font-weight: 650; }

body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td,
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td:first-child {
  padding: 16px 22px 15px;
  background: var(--v2-bg) !important;
  color: var(--v2-ink);
  border-top: 1px solid var(--v2-line-strong);
  border-bottom: 1px solid var(--v2-line);
}
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--v2-brand);
}
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-head::before { content: none; }
body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-desc {
  color: var(--v2-muted);
  font-size: 13.5px;
  font-weight: 400;
}

/* O cabeçalho flutuante replica a mesma leitura do cabeçalho real. */
body.page-template-template-pricing .vd-compare-sticky-head {
  background: var(--v2-card);
  border: 1px solid var(--v2-line-strong);
  border-top: 0;
  box-shadow: 0 8px 20px rgba(18,18,21,.12);
}
body.page-template-template-pricing .vd-compare-sticky-head th,
body.page-template-template-pricing .vd-compare-sticky-head thead th:first-child {
  padding: 12px 18px;
  background: var(--v2-card);
  color: var(--v2-ink);
  border-bottom: 0;
}
body.page-template-template-pricing .vd-compare-sticky-head th.is-featured { background: var(--v2-stage); color: var(--v2-stage-text); }
body.page-template-template-pricing .vd-compare-sticky-head .vd-compare-sticky-price { color: var(--v2-muted); }
body.page-template-template-pricing .vd-compare-sticky-head th.is-featured .vd-compare-sticky-price { color: var(--v2-stage-muted); }

@media (max-width: 700px) {
  body.page-template-template-pricing .v2-compare-table tr.vd-compare-group .vd-compare-group-head { flex-direction: column; gap: 3px; }
  body.page-template-template-pricing .v2-compare-table tr.vd-compare-group td { padding-inline: 16px; }
}

/* O Premium já tem presença suficiente no card acima. Na matriz, o destaque
   precisa orientar o olhar sem criar uma segunda faixa preta na página.
   Só se aplica no claro: no escuro, um fundo claro fixo com texto na
   variável de tema (que também vira clara) apagava o conteúdo da coluna —
   o bloco escuro já definido acima na cascata continua valendo por padrão. */
html.light body.page-template-template-pricing .v2-compare-table thead th.is-featured {
  background: #fff1e7;
  color: var(--v2-ink);
  box-shadow: inset 0 3px 0 var(--v2-brand), inset 1px 0 0 var(--v2-brand-line), inset -1px 0 0 var(--v2-brand-line);
}
html.light body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-name { color: var(--v2-ink); }
html.light body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-price { color: var(--v2-brand-deep); }
html.light body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured {
  background: #fffaf5;
  color: var(--v2-ink);
  border-left-color: var(--v2-brand-line);
  border-right-color: var(--v2-brand-line);
}
html.light body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured .vd-compare-value { color: var(--v2-ink-soft); }
html.light body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group) td.is-featured .vd-compare-dash { color: var(--v2-faint); }
html.light body.page-template-template-pricing .v2-compare-table tbody tr:not(.vd-compare-group):hover td.is-featured { background: #fff4ea; }
html.light body.page-template-template-pricing .vd-compare-sticky-head th.is-featured {
  background: #fff1e7;
  color: var(--v2-ink);
  box-shadow: inset 0 3px 0 var(--v2-brand);
}
html.light body.page-template-template-pricing .vd-compare-sticky-head th.is-featured .vd-compare-sticky-price { color: var(--v2-brand-deep); }
body.page-template-template-pricing .vd-compare-sticky-head { pointer-events: auto; }
/* O sticky precisa acomodar a ação em uma segunda linha. Sem este override,
   o `overflow:hidden` e a altura compacta do cabeçalho cortavam os CTAs. */
body.page-template-template-pricing .vd-compare-sticky-head th {
  padding-top: 14px;
  padding-bottom: 14px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
}
body.page-template-template-pricing .vd-compare-sticky-head th:first-child { text-align: left; }
/* Mesma pílula sólida do cabeçalho principal da tabela, só que compacta
   pra caber na barra fixa — não mais o link sublinhado antigo. */
body.page-template-template-pricing .vd-compare-sticky-head .vd-compare-th-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  margin: 6px auto 0;
  padding: 0 14px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  background: var(--v2-card);
  color: var(--v2-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
body.page-template-template-pricing .vd-compare-sticky-head th.is-featured .vd-compare-th-btn {
  border-color: transparent;
  background: var(--v2-brand);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   Contato e vendas — páginas de conversão com o mesmo ritmo da home/pricing.
   O formulário continua usando as classes vd-* porque CF7 e o handler de
   sales dependem delas; o novo layout é aplicado por classes v2 escopadas.
   ══════════════════════════════════════════════════════════════════════ */
body.v2-chrome .v2-contact-page,
body.v2-chrome .v2-sales-page {
  background: var(--v2-bg);
  padding-top: 0;
  padding-bottom: 0;
}
body.v2-chrome .v2-contact-hero,
body.v2-chrome .v2-sales-hero {
  position: relative;
  overflow: hidden;
  padding: 108px 0 88px;
  background:
    radial-gradient(70% 110% at 82% 10%, rgba(224,85,0,.24), transparent 66%),
    var(--v2-stage);
  color: var(--v2-stage-text);
}
body.v2-chrome .v2-contact-hero::after,
body.v2-chrome .v2-sales-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 70% 20%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 100% at 70% 20%, #000, transparent 78%);
}
body.v2-chrome .v2-contact-hero-grid,
body.v2-chrome .v2-sales-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
}
body.v2-chrome .v2-contact-hero-copy,
body.v2-chrome .v2-sales-hero-copy { min-width: 0; }
body.v2-chrome .v2-contact-hero .v2-eyebrow,
body.v2-chrome .v2-sales-hero .v2-eyebrow { color: #ff9d5c; }
body.v2-chrome .v2-contact-hero .v2-h1,
body.v2-chrome .v2-sales-hero .v2-h1 { max-width: 12ch; margin: 16px 0 20px; color: var(--v2-stage-text); }
body.v2-chrome .v2-contact-hero .v2-lead,
body.v2-chrome .v2-sales-hero .v2-lead { max-width: 52ch; color: var(--v2-stage-muted); }
body.v2-chrome .v2-contact-hero-points,
body.v2-chrome .v2-sales-hero-proof { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; color: #d8d0c9; font-size: 13px; }
body.v2-chrome .v2-contact-hero-points span { display: inline-flex; align-items: center; gap: 8px; }
body.v2-chrome .v2-contact-hero-points svg { width: 17px; height: 17px; color: #ff9d5c; }
body.v2-chrome .v2-contact-hero-card,
body.v2-chrome .v2-sales-hero-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--v2-r-card);
  background: rgba(255,255,255,.08);
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
body.v2-chrome .v2-contact-hero-card-kicker,
body.v2-chrome .v2-sales-hero-card-label { color: #ff9d5c; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.v2-chrome .v2-contact-hero-card strong { max-width: 18ch; color: #fff; font-size: 24px; line-height: 1.12; letter-spacing: -.03em; }
body.v2-chrome .v2-contact-hero-card > span:not(.v2-contact-hero-card-kicker) { color: var(--v2-stage-muted); font-size: 13px; line-height: 1.55; }
body.v2-chrome .v2-contact-hero-card .v2-btn { align-self: flex-start; margin-top: 8px; }
body.v2-chrome .v2-contact-hero-card .v2-btn svg { width: 16px; height: 16px; margin-left: 7px; }

body.v2-chrome .v2-contact-workspace,
body.v2-chrome .v2-sales-workspace { background: var(--v2-bg-sunk); }
body.v2-chrome .v2-contact-layout,
body.v2-chrome .v2-sales-layout { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 28px; align-items: start; }
body.v2-chrome .v2-contact-form-card,
body.v2-chrome .v2-sales-form-card { border: 1px solid var(--v2-line); border-radius: var(--v2-r-card); background: var(--v2-card); box-shadow: var(--v2-shadow-card); }
body.v2-chrome .v2-contact-form-card h2,
body.v2-chrome .v2-sales-form-card h2 { color: var(--v2-ink); }
body.v2-chrome .v2-contact-form-card .vd-cf7-wrapper { margin-top: 26px; }
body.v2-chrome .v2-contact-sidebar,
body.v2-chrome .v2-sales-sidebar { gap: 12px; }
body.v2-chrome .v2-contact-sidebar .vd-contact-channel,
body.v2-chrome .v2-sales-sidebar .vd-contact-channel,
body.v2-chrome .v2-sales-sidebar .vd-demo-why-card,
body.v2-chrome .v2-contact-sidebar .vd-contact-channel-social,
body.v2-chrome .v2-contact-sidebar .vd-contact-channel-info {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  background: var(--v2-card);
  box-shadow: none;
}
body.v2-chrome .v2-contact-sidebar .vd-contact-channel:hover,
body.v2-chrome .v2-sales-sidebar .vd-contact-channel:hover { border-color: var(--v2-brand-line); background: var(--v2-brand-tint); transform: translateY(-2px); }
body.v2-chrome .v2-contact-faq { background: var(--v2-card); }
body.v2-chrome .v2-contact-faq .vd-section-header { margin-bottom: 34px; }
body.v2-chrome .v2-contact-faq .vd-accordion-item { border-color: var(--v2-line); }

body.v2-chrome .v2-sales-hero .v2-h1 { max-width: 15ch; }
body.v2-chrome .v2-sales-hero-proof span { padding-left: 13px; border-left: 2px solid var(--v2-brand); }
body.v2-chrome .v2-sales-hero-card ol { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; }
body.v2-chrome .v2-sales-hero-card li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); color: #ded7d0; font-size: 14px; line-height: 1.45; }
body.v2-chrome .v2-sales-hero-card li:first-child { border-top: 0; padding-top: 0; }
body.v2-chrome .v2-sales-hero-card li b { color: #ff9d5c; font-size: 12px; }
body.v2-chrome .v2-sales-form-card { padding: clamp(24px, 4vw, 40px); }
body.v2-chrome .v2-sales-sidebar { position: sticky; top: 94px; }
body.v2-chrome .v2-sales-sidebar .vd-demo-why-card { padding: 24px; }
body.v2-chrome .v2-sales-sidebar .vd-demo-why-list { gap: 16px; }
body.v2-chrome .v2-sales-sidebar .vd-demo-social-proof { padding: 20px; border: 1px solid var(--v2-brand-line); border-radius: var(--v2-r-card); background: var(--v2-brand-tint); }
/* A área do formulário não deve encostar no hero nem deixar um vazio longo
   antes do footer. O inline `padding-top:0` legado é neutralizado aqui. */
body.v2-chrome .v2-sales-workspace {
  padding-top: 72px !important;
  padding-bottom: 52px !important;
}
body.v2-chrome .v2-sales-form-card {
  position: relative;
  overflow: hidden;
}
body.v2-chrome .v2-sales-form-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--v2-brand);
}
body.v2-chrome .v2-sales-form-card h2 { margin-top: 4px; }

@media (max-width: 820px) {
  body.v2-chrome .v2-contact-hero,
  body.v2-chrome .v2-sales-hero { padding: 84px 0 64px; }
  body.v2-chrome .v2-contact-hero-grid,
  body.v2-chrome .v2-sales-hero-grid,
  body.v2-chrome .v2-contact-layout,
  body.v2-chrome .v2-sales-layout { grid-template-columns: 1fr; gap: 28px; }
  body.v2-chrome .v2-contact-hero .v2-h1,
  body.v2-chrome .v2-sales-hero .v2-h1 { max-width: 15ch; }
  body.v2-chrome .v2-sales-sidebar { position: static; }
  body.v2-chrome .v2-sales-workspace { padding-top: 48px !important; padding-bottom: 40px !important; }
}

/* Mantém os dois indicadores dos cards com a mesma altura e evita que a
   descrição de período crie uma terceira linha em larguras intermediárias. */
body.page-template-template-pricing .vd-pricing-stat-label {
  display: -webkit-box;
  min-height: 2.9em;
  max-height: 2.9em;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ── Cabeçalho da tabela comparativa: centralizar e parar de desalinhar
   quando o selo "Popular" aparece ─────────────────────────────────────────
   O selo era só mais um <span> no fluxo normal — na coluna Premium ele
   empurrava nome/preço/botão pra baixo, saindo da linha das outras 3
   colunas. Tira o selo do fluxo (absolute) e reserva o mesmo espaço no
   topo em toda coluna, badge ou não, pra manter as 4 alinhadas. */
body.page-template-template-pricing .v2-compare-table thead th {
  position: relative;
  text-align: center;
}
body.page-template-template-pricing .v2-compare-table thead th:first-child { text-align: left; }
body.page-template-template-pricing .v2-compare-table thead th:not(:first-child) { padding-top: 38px; }
body.page-template-template-pricing .v2-compare-table .vd-compare-th-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}

/* Botão de verdade (pílula sólida), não mais um link sublinhado — igual
   ao resto dos CTAs do site. */
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  background: var(--v2-card);
  color: var(--v2-ink);
  font-size: 12.5px;
  font-weight: 700;
}
body.page-template-template-pricing .v2-compare-table .vd-compare-th-btn:hover {
  border-color: var(--v2-ink);
  background: var(--v2-card);
  color: var(--v2-ink);
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-btn {
  border-color: transparent;
  background: var(--v2-brand);
  color: #fff;
}
body.page-template-template-pricing .v2-compare-table thead th.is-featured .vd-compare-th-btn:hover {
  background: var(--v2-brand-deep);
  color: #fff;
}