/* ============================================================================
   MAXIMIZE — camada de PÁGINAS
   ----------------------------------------------------------------------------
   As páginas internas nasceram no sistema anterior e usam o vocabulário dele
   (.section, .hud, .eyebrow, .readout-strip…). Esta camada traduz esse
   vocabulário para o mundo INSTRUMENTO, em vez de reescrever 13 arquivos linha
   a linha — o que multiplicaria o risco sem melhorar o resultado.

   Carrega DEPOIS de instrument.css: herda os mesmos tokens, a mesma escala e a
   mesma amplitude de valor, então as internas passam a respirar como a home.

   Aqui também vivem os componentes que só as internas usam: planos, FAQ,
   traçado SVG, fachada de vídeo e o painel fixo de listagem.
   ========================================================================== */

/* ============================================================================
   1. ESTRUTURA — o vocabulário antigo, traduzido
   ========================================================================== */

.section-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  position: relative;
  padding-block: var(--space-9);
}
@media (min-width: 900px) {
  .section {
    padding-block: var(--space-10);
  }
}
.section--tight {
  padding-block: var(--space-8);
}

/* A alternância de fundo que as páginas faziam por style inline vira ritmo de
   verdade: seções ímpares descem ao vácuo, pares sobem ao aço. */
main > .section:nth-of-type(odd) {
  background: linear-gradient(180deg, var(--n-950), var(--n-900));
}
main > .section:nth-of-type(even) {
  background: var(--surface-deep);
}
main > .section + .section {
  border-top: 1px solid var(--border-subtle);
}

.column {
  max-width: 780px;
  margin-inline: auto;
}

.section-head {
  max-width: 720px;
}
.section-head h2 {
  margin-top: var(--space-4);
}
.section-head p {
  margin-top: var(--space-5);
}

/* ---- EYEBROW ----------------------------------------------------------
   O piso de craft bane o rótulo decorativo acima do título. Nas internas ele
   existe em 63 lugares e carrega, quase sempre, o NOME da seção — informação.
   Em vez de apagá-lo (o que exigiria reescrever cada página), ele deixa de ser
   um enfeite colorido acima do h2 e vira o que sempre deveria ter sido: uma
   etiqueta de canal, discreta, alinhada à régua do instrumento. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--lh-label);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent-deep);
  flex: none;
}

.data-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--lh-label);
}

.body-muted {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: var(--lh-body);
  max-width: 72ch;
}

/* ============================================================================
   2. HUD → PAINEL
   ========================================================================== */

.hud {
  position: relative;
  background: linear-gradient(180deg, var(--n-850), var(--n-900));
  border: 1px solid var(--border-default);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  padding: var(--space-6);
}
.hud::before,
.hud::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--accent);
  opacity: 0.45;
  pointer-events: none;
}
.hud::before {
  top: 8px;
  left: 8px;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
}
.hud::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
}
.hud--accent {
  border-color: var(--border-accent);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(34, 224, 232, 0.07), transparent 62%),
    linear-gradient(180deg, var(--n-850), var(--n-900));
}
.hud--warn {
  border-color: rgba(245, 177, 60, 0.34);
  background: linear-gradient(180deg, #16130d, #100e0a);
}
.hud--warn::before,
.hud--warn::after {
  border-color: var(--warn);
}
.hud--ok {
  border-color: rgba(47, 224, 138, 0.32);
}
.hud--ok::before,
.hud--ok::after {
  border-color: var(--ok);
}
.hud--bad {
  border-color: rgba(255, 77, 94, 0.34);
}
.hud--bad::before,
.hud--bad::after {
  border-color: var(--bad);
}
.hud--sm {
  --cut: 9px;
  padding: var(--space-5);
}
.hud--sm::before,
.hud--sm::after {
  width: 8px;
  height: 8px;
}
.hud--sm::before {
  top: 6px;
  left: 6px;
}
.hud--sm::after {
  bottom: 6px;
  right: 6px;
}

.hud-signal {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.hud-hover {
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.hud-hover:hover {
  transform: translateY(-3px);
  border-color: var(--border-accent);
}

/* ============================================================================
   3. GRADES E CARTÕES
   ========================================================================== */

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid--half {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}

.feature-card h3 {
  margin-top: var(--space-4);
}
.feature-card p {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}
.feature-icon {
  color: var(--accent);
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
}
.check-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-4);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}
.check-list svg {
  margin-top: 3px;
  color: var(--accent);
  flex: none;
}
.check-list strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================================================
   4. LEITURAS
   ========================================================================== */

.readout-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}
@media (min-width: 860px) {
  .readout-strip--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.readout-cell {
  min-width: 0;
}
.readout-cell .readout {
  font-size: var(--text-lg);
  color: var(--accent);
  text-shadow: 0 0 18px rgba(34, 224, 232, 0.45);
}
.readout-cell .data-label {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}

/* ============================================================================
   5. LISTA DE OTIMIZAÇÕES (vocabulário antigo)
   ========================================================================== */

.opt-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.22s ease;
}
.opt-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.28s var(--ease-out);
}
.opt-row:hover {
  background: rgba(34, 224, 232, 0.04);
}
.opt-row:hover::before {
  transform: scaleY(1);
}
.opt-row:last-child {
  border-bottom: 0;
}
.opt-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* painel fixo ao lado de uma listagem longa */
.pin-grid {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 1000px) {
  .pin-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: var(--space-9);
    align-items: start;
  }
  .pin-sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
}

/* ============================================================================
   6. PLANOS
   ========================================================================== */

.price-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.plan--anchor {
  border-color: var(--border-accent);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(34, 224, 232, 0.1), transparent 62%),
    linear-gradient(180deg, var(--n-850), var(--n-900));
}
.plan--anchor .plan-price {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(34, 224, 232, 0.5);
}
.plan-period {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.plan ul {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.plan ul li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.plan ul li::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}
.plan .btn {
  margin-top: var(--space-6);
}
.plan-foot {
  margin-top: auto;
  padding-top: var(--space-5);
}

/* ============================================================================
   7. FAQ — <details> nativo
   ========================================================================== */

/* `.disclosure` é o mesmo componente fora de uma seção de FAQ — usado, por
   exemplo, para recolher os períodos de preço secundários. Sete opções lado a
   lado paralisam a decisão; recolher não é esconder. */

.faq details,
details.disclosure {
  border-bottom: 1px solid var(--border-default);
  transition: background-color 0.25s ease;
}
.faq details[open],
details.disclosure[open] {
  background: rgba(34, 224, 232, 0.025);
}
details.disclosure {
  border: 1px solid var(--border-default);
  border-radius: 2px;
  padding-inline: var(--space-2);
}
.faq summary,
details.disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-snug);
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
  justify-content: space-between;
  min-height: 44px;
  transition: color 0.2s ease;
}
.faq summary:hover,
details.disclosure > summary:hover {
  color: var(--accent);
}
.faq summary::-webkit-details-marker,
details.disclosure > summary::-webkit-details-marker {
  display: none;
}
.faq summary::after,
details.disclosure > summary::after {
  content: '+';
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--text-md);
  flex: none;
  line-height: 1;
}
.faq details[open] summary::after,
details.disclosure[open] > summary::after {
  content: '\2212';
}
.faq details > div,
details.disclosure > div {
  padding: 0 var(--space-4) var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  max-width: 70ch;
}
.faq details > div > * + *,
details.disclosure > div > * + * {
  margin-top: var(--space-4);
}

/* ============================================================================
   8. TRAÇADO SVG (páginas que ilustram frametime)
   ========================================================================== */

.trace {
  width: 100%;
  height: auto;
  overflow: visible;
}
.trace-before {
  stroke: var(--bad);
  stroke-width: 1.4;
  fill: none;
  opacity: 0.7;
}
.trace-after {
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.trace-grid {
  stroke: var(--border-subtle);
  stroke-width: 1;
}
.trace-pulse {
  fill: var(--accent-core);
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .trace-pulse {
    animation: tracePulse 2.6s ease-in-out infinite;
  }
}
@keyframes tracePulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.6);
  }
}
.trace-draw .trace-before,
.trace-draw .trace-after {
  stroke-dasharray: var(--len, 1400);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.has-sda .trace-draw .trace-before,
    html.has-sda .trace-draw .trace-after {
      stroke-dashoffset: var(--len, 1400);
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 88%;
    }
    html.has-sda .trace-draw .trace-after {
      animation-range: entry 24% entry 96%;
    }
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ============================================================================
   9. FACHADA DE VÍDEO — nenhum player carrega antes do clique
   ========================================================================== */

.vsl {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(34, 224, 232, 0.12), transparent 62%),
    linear-gradient(180deg, var(--n-850), var(--n-900));
  display: grid;
  place-items: center;
  border: 1px solid var(--border-accent);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.vsl::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(34, 224, 232, 0.03) 0px,
    rgba(34, 224, 232, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}
.vsl-play {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: none;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  min-height: 44px;
}
.vsl-play .disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: rgba(34, 224, 232, 0.08);
  transition: transform 0.3s var(--ease-out), background-color 0.3s ease;
}
.vsl-play:hover .disc {
  transform: scale(1.09);
  background: rgba(34, 224, 232, 0.18);
}
@media (prefers-reduced-motion: no-preference) {
  .vsl-play .disc::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    animation: discRipple 2.8s ease-out infinite;
    pointer-events: none;
  }
}
@keyframes discRipple {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}
.vsl-play .label {
  font-size: var(--text-sm);
  font-weight: 700;
}
.vsl-play .sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vsl video,
.vsl iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================================
   10. FAIXA DE DETECÇÃO (vocabulário antigo) + ATMOSFERA DE HERO
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-5);
  background: var(--surface-deep);
  border-block: 1px solid var(--border-subtle);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-7);
  align-items: center;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.marquee-item::after {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--accent-deep);
  transform: rotate(45deg);
  flex: none;
  opacity: 0.7;
}
.marquee-item:hover {
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: busSlide 62s linear infinite;
  }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track {
    animation-play-state: paused;
  }
  .marquee--reverse .marquee-track {
    animation-direction: reverse;
    animation-duration: 74s;
  }
}

/* atmosfera de hero das internas */
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.fx-grid {
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 15%, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .fx-grid {
    animation: gridDrift 26s linear infinite;
  }
}
@keyframes gridDrift {
  to {
    transform: translate3d(-48px, -48px, 0);
  }
}
.fx-glow {
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(1100px, 135%);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(
    circle,
    rgba(34, 224, 232, 0.15) 0%,
    rgba(34, 224, 232, 0.05) 32%,
    transparent 62%
  );
}
@media (prefers-reduced-motion: no-preference) {
  .fx-glow {
    animation: glowBreathe 9s ease-in-out infinite;
  }
}
@keyframes glowBreathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.09);
  }
}
.fx-sweep {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(34, 224, 232, 0.06), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .fx-sweep {
    animation: sweepAcross 8.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
}
@keyframes sweepAcross {
  0% {
    transform: translate3d(-130%, 0, 0);
  }
  62%,
  100% {
    transform: translate3d(270%, 0, 0);
  }
}

/* grão, com o nome antigo */
.fx-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ============================================================================
   11. HERO DAS INTERNAS
   ----------------------------------------------------------------------------
   O hero interno NÃO imita o da home: sem campo WebGL, sem painel de app. Ele é
   mais baixo e mais tipográfico — é uma capa de capítulo, não uma capa de livro.
   ========================================================================== */

/* O cabeçalho das internas envolve seu conteúdo em .section-container, não em
   .wrap--wide: sem esta regra ele perde o flex, a marca some e as ações
   quebram para uma segunda linha por cima do conteúdo. */
.site-header > .section-container {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--container-wide);
}

.hero {
  position: relative;
  /* min-height e display vêm do hero da HOME em instrument.css e precisam ser
     desfeitos aqui: sem isto toda interna abre com 92svh de altura mínima e
     ganha centenas de pixels de vazio abaixo de um conteúdo curto. */
  min-height: 0;
  display: block;
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
  background: var(--surface-deep);
}
.hero > .section-container {
  position: relative;
  z-index: 2;
}

/* Capa de capítulo, não capa de livro: o H1 interno é uma escala abaixo do da
   home. Se toda página abrir no mesmo tamanho da home, todas viram a home. */
.hero > .section-container h1 {
  font-size: clamp(2.25rem, 5.4vw, var(--text-2xl));
  line-height: var(--lh-tight);
}
.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
  }
}
.hero h1 .accent-line {
  display: block;
  color: var(--accent);
  text-shadow: 0 0 42px rgba(34, 224, 232, 0.42);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ============================================================================
   12. MIUDEZAS
   ========================================================================== */

td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary);
}
.row-anchor td {
  background: rgba(34, 224, 232, 0.07);
}
.row-anchor td:first-child {
  color: var(--accent);
}

.vs-row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.stack-lg > * + * {
  margin-top: var(--space-7);
}

/* ============================================================================
   13. AS NOVE ABERTURAS
   ----------------------------------------------------------------------------
   O problema que esta seção resolve: as internas eram clones — todas abriam com
   o mesmo hero, a mesma luz e o mesmo respiro, e todas pareciam a home.

   Cada página passa a ter uma abertura derivada do que ELA trata. Não é cor
   trocada: muda a direção da luz, o padrão de fundo, a altura e a densidade.
   Todas continuam dentro do mundo travado (obsidiana + fósforo).
   ========================================================================== */

/* --- MODO DE JOGO — a plataforma sob carga -------------------------------
   Luz vinda de baixo à esquerda, como um gabinete aceso no chão. Gratícula
   vertical densa: colunas de canal, não malha. */
.hero--rig {
  padding-block: var(--space-10) var(--space-9);
  background:
    radial-gradient(ellipse 70% 60% at 12% 100%, rgba(34, 224, 232, 0.2), transparent 62%),
    linear-gradient(180deg, var(--n-0), var(--n-950));
}
.hero--rig::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 40px 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}

/* --- LIMPEZA — estratos que somem ---------------------------------------
   Bandas horizontais empilhadas, como camadas de disco sendo raspadas. A luz
   entra por cima e o fundo clareia à medida que "limpa". */
.hero--strata {
  padding-block: var(--space-9);
  background:
    linear-gradient(180deg, rgba(34, 224, 232, 0.1), transparent 42%),
    linear-gradient(180deg, var(--n-950), var(--n-880));
}
.hero--strata::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(130, 195, 215, 0.06) 0px,
    rgba(130, 195, 215, 0.06) 1px,
    transparent 1px,
    transparent 14px
  );
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

/* --- HARDWARE — a leitura do sensor --------------------------------------
   Anéis concêntricos: o mostrador redondo de um instrumento. Luz quente,
   vinda da direita, onde o painel de sensores fica. */
.hero--sensor {
  padding-block: var(--space-9);
  background:
    radial-gradient(circle at 78% 42%, rgba(34, 224, 232, 0.16), transparent 46%),
    linear-gradient(180deg, var(--n-0), var(--n-900));
}
.hero--sensor::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 6%;
  width: min(720px, 60vw);
  aspect-ratio: 1;
  translate: 0 -50%;
  pointer-events: none;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0px,
    transparent 43px,
    rgba(130, 195, 215, 0.075) 43px,
    rgba(130, 195, 215, 0.075) 44px
  );
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}

/* --- MANUTENÇÃO — a rotina que passa ------------------------------------
   Varredura diagonal repetida: a passagem periódica de uma tarefa agendada. */
.hero--rota {
  padding-block: var(--space-9) var(--space-8);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(10, 166, 201, 0.16), transparent 60%),
    linear-gradient(180deg, var(--n-900), var(--n-950));
}
.hero--rota::before {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    118deg,
    transparent 0px,
    transparent 46px,
    rgba(130, 195, 215, 0.055) 46px,
    rgba(130, 195, 215, 0.055) 47px
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 76%);
}

/* --- SEGURANÇA — o perímetro --------------------------------------------
   A página mais escura do site, de propósito: é a que fala de recusar coisas.
   Camadas concêntricas de perímetro, luz mínima e fria. */
.hero--shield {
  padding-block: var(--space-10) var(--space-9);
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34, 224, 232, 0.08), transparent 58%),
    var(--n-0);
}
.hero--shield::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, transparent 12%, #000 62%, transparent 92%);
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, transparent 12%, #000 62%, transparent 92%);
}

/* --- PREÇOS — a âncora ---------------------------------------------------
   Uma coluna de luz vertical no centro: o plano âncora, antes de qualquer
   número aparecer. É a única interna que usa luz centralizada. */
.hero--anchor {
  padding-block: var(--space-9);
  background:
    linear-gradient(180deg, var(--n-950), #061a20 92%),
    var(--n-950);
}
.hero--anchor::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 44%, rgba(34, 224, 232, 0.16) 50%, transparent 56%),
    radial-gradient(ellipse 40% 70% at 50% 100%, rgba(34, 224, 232, 0.22), transparent 66%);
}

/* --- DOWNLOAD — o terminal ----------------------------------------------
   Linhas de varredura de console e um bloco de luz no rodapé, como um prompt
   esperando. A página que o visitante chega para EXECUTAR algo. */
.hero--term {
  padding-block: var(--space-9) var(--space-8);
  background:
    linear-gradient(180deg, var(--n-0) 0%, var(--n-950) 70%),
    var(--n-0);
}
.hero--term::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(34, 224, 232, 0.045) 0px,
    rgba(34, 224, 232, 0.045) 1px,
    transparent 1px,
    transparent 4px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%);
  mask-image: linear-gradient(180deg, transparent, #000 62%);
}
.hero--term::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

/* --- FAQ — o índice ------------------------------------------------------
   Quase sem luz e quase sem padrão: réguas tipográficas horizontais. É uma
   página de LEITURA, e trata a si mesma como tal. */
.hero--index {
  padding-block: var(--space-8) var(--space-7);
  background: var(--n-950);
  border-bottom: 1px solid var(--border-default);
}
.hero--index::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 31px,
    rgba(130, 195, 215, 0.05) 31px,
    rgba(130, 195, 215, 0.05) 32px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
}

/* --- LEGAL — o documento -------------------------------------------------
   Sem brilho, sem padrão, sem acento no fundo. Um contrato não pisca. */
.hero--doc {
  padding-block: var(--space-8) var(--space-7);
  background: var(--n-900);
  border-bottom: 1px solid var(--border-default);
}
.hero--doc h1 {
  font-size: clamp(1.75rem, 3.6vw, var(--text-xl)) !important;
}
.hero--doc .accent-line {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

/* As internas não repetem a atmosfera da home: onde a página tem abertura
   própria, as camadas genéricas de fx saem de cena. */
.hero--rig .fx-layer,
.hero--strata .fx-layer,
.hero--sensor .fx-layer,
.hero--rota .fx-layer,
.hero--shield .fx-layer,
.hero--anchor .fx-layer,
.hero--term .fx-layer,
.hero--index .fx-layer,
.hero--doc .fx-layer {
  display: none;
}

/* ============================================================================
   14. A LANDING PAGE — abertura de resposta direta
   ----------------------------------------------------------------------------
   A LP não é uma página do site: ela tem UMA ação e nenhuma rota de fuga. A
   abertura reflete isso — linhas que convergem para o centro-baixo, onde a
   oferta está, e a luz mais intensa de todo o projeto. O site institucional
   convida a explorar; esta página aponta.
   ========================================================================== */

.hero--offer {
  padding-block: var(--space-9) var(--space-8);
  background:
    radial-gradient(ellipse 55% 70% at 50% 118%, rgba(34, 224, 232, 0.34), transparent 60%),
    linear-gradient(180deg, var(--n-0) 0%, var(--n-950) 45%, #061a20 100%);
}
/* linhas de convergência: apontam para a ação, não decoram a moldura */
.hero--offer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 130%,
    rgba(130, 195, 215, 0.075) 0deg,
    rgba(130, 195, 215, 0.075) 0.35deg,
    transparent 0.35deg,
    transparent 5deg
  );
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 120%, #000 12%, transparent 74%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 120%, #000 12%, transparent 74%);
}
.hero--offer .fx-layer {
  display: none;
}

/* Numa página de resposta direta o preço é matéria de primeira linha, não
   letra miúda: ele ganha escala de mostrador. */
.hero--offer .plan-price,
#oferta .plan--anchor .plan-price {
  font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
  line-height: 1;
}

/* A LP não tem navegação: o cabeçalho carrega só marca e ação. */
.lp .site-nav,
.lp .menu-toggle {
  display: none !important;
}

/* ============================================================================
   15. COMPOSIÇÕES — nove estruturas, não nove fundos
   ----------------------------------------------------------------------------
   A rodada anterior deu a cada página uma ATMOSFERA própria, mas manteve o
   mesmo esqueleto nas nove: rótulo → h1 de duas linhas → parágrafo → dois
   botões à esquerda, painel de números à direita. Trocar a luz não resolve
   isso: quem abre quatro páginas em sequência lê a mesma forma quatro vezes.

   Aqui cada página ganha uma ESTRUTURA derivada do que ela trata. O eixo, a
   hierarquia e o que domina o primeiro viewport mudam de página para página.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base: os heros compostos abandonam o .hero-grid de duas colunas.
   ------------------------------------------------------------------------- */
.hero--comp > .section-container {
  position: relative;
  z-index: 2;
}
.hero--comp .hero-grid {
  display: block;
}
.hero--comp .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ===========================================================================
   1. MODO DE JOGO — a MESA DE CANAIS
   O título ocupa a largura toda; embaixo, 47 canais em pé, como um mixer.
   A página é sobre alavancas individuais: elas aparecem como alavancas.
   ========================================================================= */

.hero--rig.hero--comp {
  padding-block: var(--space-9) 0;
}
.rig-head {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}
@media (min-width: 1000px) {
  .rig-head {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-8);
  }
}
.hero--rig.hero--comp h1 {
  font-size: clamp(2.5rem, 6.4vw, var(--text-3xl)) !important;
  line-height: 0.98;
}

/* a mesa: 47 canais, os 10 primeiros acesos (o plano grátis) */
.channels {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 132px;
  margin-top: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
/* Escala, nunca altura. Transicionar a propria altura em 47 irmaos relayouta
   a faixa inteira a cada quadro; scaleY roda no compositor e nao toca o
   layout. Mesma razao pela qual nada neste projeto anima padding ou margem. */
.channels i {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--n-700);
  height: 100%;
  transform: scaleY(var(--s, 0.4));
  transform-origin: 50% 100%;
  position: relative;
  transition: background-color 0.3s var(--ease-out), transform 0.45s var(--ease-out);
}
.channels i.on {
  background: linear-gradient(180deg, var(--accent-core), var(--accent-deep));
  box-shadow: 0 0 10px var(--accent-glow);
}
.channels i.pro {
  background: linear-gradient(180deg, var(--accent), var(--ph-800));
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.has-sda .channels i {
      animation: chRise var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
      animation-delay: calc(var(--ci, 0) * 12ms);
    }
  }
}
@keyframes chRise {
  from { transform: scaleY(0.04); }
  to   { transform: scaleY(var(--s, 0.4)); }
}
.channels-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.channels-legend b {
  color: var(--accent);
  font-weight: 400;
}

/* ===========================================================================
   2. LIMPEZA — a COLUNA DE DISCO
   Uma barra vertical alta na borda esquerda, cheia de segmentos por categoria:
   o disco. O texto vive ao lado dela. Nada é simétrico.
   ========================================================================= */

.hero--strata.hero--comp .strata-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .hero--strata.hero--comp .strata-grid {
    grid-template-columns: 76px minmax(0, 1fr) minmax(0, 0.62fr);
    gap: var(--space-8);
  }
}

/* o disco em pé */
.disk {
  display: none;
  flex-direction: column;
  gap: 3px;
  height: 340px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 5px;
  background: var(--n-0);
}
@media (min-width: 900px) {
  .disk {
    display: flex;
  }
}
.disk i {
  display: block;
  border-radius: 2px;
  flex: 0 0 var(--seg, 12%);
  background: var(--n-700);
}
.disk i.hot {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: inset 0 0 12px rgba(214, 254, 255, 0.35);
}
.disk i.warm {
  background: var(--ph-800);
}
.disk i.free {
  flex: 1 1 auto;
  background: repeating-linear-gradient(
    45deg,
    rgba(130, 195, 215, 0.07) 0 4px,
    transparent 4px 8px
  );
}
.disk-cap {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin-top: var(--space-3);
}

/* ===========================================================================
   3. HARDWARE — a HIERARQUIA INVERTIDA
   O instrumento lidera. O título é pequeno e serve ao painel, não o contrário.
   É a única página onde o texto NÃO é o maior elemento do primeiro viewport.
   ========================================================================= */

.hero--sensor.hero--comp {
  padding-block: var(--space-8) var(--space-9);
}
.hero--sensor.hero--comp h1 {
  font-size: clamp(1.75rem, 3.2vw, var(--text-lg)) !important;
  line-height: var(--lh-snug);
  max-width: 26ch;
}
.hero--sensor.hero--comp .lede {
  font-size: var(--text-sm);
  max-width: 52ch;
}

/* mostradores de arco */
.gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.gauge {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--n-880), var(--n-900));
  overflow: hidden;
}
.gauge::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--p, 0.5));
  transform-origin: 0 50%;
  box-shadow: 0 0 10px var(--accent-glow);
}
.gauge svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.gauge .arc-bg {
  fill: none;
  stroke: rgba(130, 195, 215, 0.12);
  stroke-width: 6;
  stroke-linecap: round;
}
.gauge .arc-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: calc(var(--len, 200) * (1 - var(--p, 0.5)));
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.has-sda .gauge .arc-fg {
      animation: arcSweep var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }
  }
}
@keyframes arcSweep {
  from { stroke-dashoffset: var(--len, 200); }
  to   { stroke-dashoffset: calc(var(--len, 200) * (1 - var(--p, 0.5))); }
}
.gauge-val {
  position: absolute;
  left: 0;
  right: 0;
  /* dentro do vao do arco, nao em cima da linha dele */
  top: 44%;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.03em;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(34, 224, 232, 0.45);
}
.gauge-lab {
  margin-top: var(--space-5);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ===========================================================================
   4. MANUTENÇÃO — a ESPINHA
   Uma linha vertical com paradas: a rotina que passa periodicamente. O
   conteúdo pende dela, deslocado à direita. Nada centralizado.
   ========================================================================= */

.hero--rota.hero--comp .spine {
  position: relative;
  padding-left: var(--space-8);
}
.hero--rota.hero--comp .spine::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep) 55%, transparent);
}
.spine-stop {
  position: relative;
  padding-bottom: var(--space-7);
}
.spine-stop::before {
  content: '';
  position: absolute;
  left: calc(var(--space-8) * -1 + 3px);
  top: 9px;
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--accent-glow);
}
.spine-stop:last-child {
  padding-bottom: 0;
}
.spine-stop .label {
  margin-bottom: var(--space-3);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.has-sda .spine-stop::before {
      animation: stopLight var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 8% entry 60%;
    }
  }
}
@keyframes stopLight {
  from { transform: rotate(45deg) scale(0.2); opacity: 0; }
  to   { transform: rotate(45deg) scale(1); opacity: 1; }
}

/* ===========================================================================
   5. SEGURANÇA — o PERÍMETRO
   A ÚNICA página simétrica do site. Título centralizado, anéis concêntricos,
   coluna estreita. Simetria aqui carrega sentido: é uma postura defensiva.
   ========================================================================= */

.hero--shield.hero--comp {
  padding-block: var(--space-10) var(--space-9);
  text-align: center;
}
.hero--shield.hero--comp .shield-core {
  max-width: 720px;
  margin-inline: auto;
}
.hero--shield.hero--comp h1 {
  font-size: clamp(2.25rem, 5.4vw, var(--text-2xl)) !important;
}
.hero--shield.hero--comp .lede,
.hero--shield.hero--comp .prose {
  margin-inline: auto;
  max-width: 58ch;
}
.hero--shield.hero--comp .eyebrow {
  justify-content: center;
}
.hero--shield.hero--comp .hero-actions {
  justify-content: center;
}
/* a postura como anel de itens, não como painel */
.perimeter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.perimeter span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.perimeter span::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.perimeter span:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

/* ===========================================================================
   6. PREÇOS — o PREÇO LIDERA
   O maior elemento do primeiro viewport é o número, não a frase. Numa página
   de preço, esconder o preço atrás de uma manchete é fingimento.
   ========================================================================= */

.hero--anchor.hero--comp {
  padding-block: var(--space-9);
  text-align: center;
}
.hero--anchor.hero--comp h1 {
  font-size: clamp(1.5rem, 2.8vw, var(--text-md)) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  max-width: 34ch;
  margin-inline: auto;
}
.hero--anchor.hero--comp .eyebrow {
  justify-content: center;
}
.price-hero {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(3.25rem, 12vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: var(--accent);
  text-shadow: 0 0 60px rgba(34, 224, 232, 0.5);
}
.price-hero .cur {
  font-size: 0.3em;
  letter-spacing: 0;
  vertical-align: 0.9em;
  margin-right: 0.08em;
  color: var(--accent-bright);
}
/* Os centavos sobem para a linha do topo do numeral inteiro. Pendurados na
   base eles se descolam do preço e viram um segundo número. */
.price-hero .cents {
  font-size: 0.34em;
  vertical-align: 0.78em;
  letter-spacing: -0.02em;
}
.price-sub {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero--anchor.hero--comp .hero-actions {
  justify-content: center;
  margin-top: var(--space-7);
}

/* ===========================================================================
   7. DOWNLOAD — o TERMINAL
   O hero É um console. A página onde o visitante vem EXECUTAR algo se
   apresenta como a coisa que executa.
   ========================================================================= */

.hero--term.hero--comp {
  padding-block: var(--space-8) var(--space-9);
}
.term {
  max-width: 940px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--n-0);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 50px -24px var(--accent-glow);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  background: var(--n-850);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.term-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-600);
  flex: none;
}
.term-body {
  padding: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.75;
}
.term-body .ln {
  display: block;
  color: var(--text-secondary);
}
.term-body .ln::before {
  content: '$ ';
  color: var(--accent-deep);
}
.term-body .out {
  display: block;
  color: var(--text-muted);
  padding-left: var(--space-4);
}
.term-body .out::before {
  content: '';
}
.term-body .ok {
  color: var(--ok);
}
.hero--term.hero--comp h1 {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 4.2vw, var(--text-xl)) !important;
  margin-bottom: var(--space-3);
}
.term-cursor {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  background: var(--accent);
  vertical-align: -0.16em;
  margin-left: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .term-cursor {
    animation: caret 1.05s steps(2, start) infinite;
  }
}
@keyframes caret {
  50% { opacity: 0; }
}

/* ===========================================================================
   8. FAQ — o ÍNDICE DE DUAS COLUNAS
   Uma página de leitura ganha aparato de leitura: contagem, índice saltável.
   ========================================================================= */

.hero--index.hero--comp .index-grid {
  display: grid;
  gap: var(--space-7);
  align-items: end;
}
@media (min-width: 900px) {
  .hero--index.hero--comp .index-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--space-9);
  }
}
.jump {
  display: grid;
  gap: var(--space-2);
  border-left: 1px solid var(--border-default);
  padding-left: var(--space-5);
}
.jump a {
  position: relative;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  padding-block: 3px;
  transition: color 0.2s ease;
}
/* Marcador que ESCALA, no lugar de um padding que empurra o layout. */
.jump a::before {
  content: '';
  position: absolute;
  left: calc(var(--space-5) * -1 - 1px);
  top: 50%;
  width: 2px;
  height: 14px;
  margin-top: -7px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.25s var(--ease-out);
}
.jump a:hover {
  color: var(--accent);
}
.jump a:hover::before {
  transform: scaleY(1);
}
.jump .label {
  margin-bottom: var(--space-2);
}

/* ===========================================================================
   9. LEGAL — o DOCUMENTO COM CABEÇALHO FACTUAL
   Um contrato se identifica: versão, vigência, escopo. Em lista de definição.
   ========================================================================= */

.hero--doc.hero--comp .doc-meta {
  display: grid;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.doc-meta dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.doc-meta dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.doc-meta dd b {
  color: var(--text-primary);
  font-weight: 600;
}

/* ===========================================================================
   ESTRUTURA DE CORPO — a espinha de manutenção reaproveitada nas frentes
   ========================================================================= */

.stops {
  position: relative;
  padding-left: var(--space-8);
  margin-top: var(--space-8);
}
.stops::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-deep) 12%, var(--accent-deep) 88%, transparent);
}
.stop {
  position: relative;
  padding-bottom: var(--space-8);
}
.stop:last-child {
  padding-bottom: 0;
}
.stop::before {
  content: '';
  position: absolute;
  left: calc(var(--space-8) * -1 + 3px);
  top: 10px;
  width: 9px;
  height: 9px;
  background: var(--n-900);
  border: 1.5px solid var(--accent);
  transform: rotate(45deg);
}
.stop h3 {
  font-size: var(--text-md);
}
.stop p {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  max-width: 64ch;
}
.stop .label {
  margin-bottom: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .channels i,
  .gauge .arc-fg,
  .spine-stop::before {
    animation: none !important;
  }
  .term-cursor {
    animation: none !important;
  }
}

/* Escala do mostrador. Sem ela o arco é decoração vestida de instrumento: o
   ângulo não correspondia ao valor (frametime 8,3 ms desenhava 42% do arco,
   ping 14 ms desenhava 28%). Agora --p sai de um mínimo e um máximo, e os dois
   ficam impressos sob o número — que é o que separa medir de enfeitar. */
.gauge-scale {
  margin-top: var(--space-1);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.72;
}


/* ============================================================================
   O LABORATÓRIO — /o-que-funciona/
   ----------------------------------------------------------------------------
   Um traço de frametime e os interruptores das otimizações que este produto
   removeu. Ler que "a fila de entrada descarta cliques" convence pouco; ver o
   pico de DPC e o ponto vermelho aparecerem no traço convence.

   Sem JS o canvas fica vazio, e é por isso que a tabela completa dos casos vive
   ABAIXO, em HTML — o argumento inteiro é legível sem uma linha de script.
   ========================================================================== */
.lab {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .lab { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--space-7); }
}

.lab-screen {
  position: relative;
  background: linear-gradient(180deg, var(--n-900), var(--n-950));
  border: 1px solid var(--border-strong);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  padding: var(--space-5);
}
.lab-screen canvas {
  display: block;
  width: 100%;
  height: 260px;
}
.lab-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 185, 205, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 185, 205, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.lab-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.lab-readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
@media (min-width: 560px) {
  .lab-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lab-readouts .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.lab-readouts .readout { margin: 0; font-size: var(--text-lg); line-height: 1.05; }
.lab-readouts .readout.is-bad { color: var(--bad); }

/* ---- os interruptores: cada um é uma coisa que saiu do produto ---- */
.lab-switch {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: inherit;
  font: inherit;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.lab-switch + .lab-switch { margin-top: var(--space-3); }
.lab-switch:hover { border-color: var(--border-accent); }
.lab-switch[aria-checked='true'] {
  border-color: var(--bad);
  background: linear-gradient(90deg, rgba(255, 77, 94, 0.07), transparent 70%);
}
.lab-switch .name { display: block; font-weight: 600; color: var(--text-primary); }
.lab-switch code {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.lab-switch .box {
  flex: none;
  width: 44px;
  height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(125, 185, 205, 0.1);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  position: relative;
  transition: background-color 0.24s var(--ease-out);
}
.lab-switch .box::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--text-muted);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  transition: transform 0.24s var(--ease-out), background-color 0.2s;
}
.lab-switch[aria-checked='true'] .box { background: var(--bad); box-shadow: none; }
.lab-switch[aria-checked='true'] .box::after {
  transform: translateX(20px);
  background: var(--n-950);
}

/* a nota que explica o que acabou de acontecer no traço */
.lab-nota {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-left: 2px solid var(--bad);
  background: rgba(255, 77, 94, 0.05);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.lab-nota.is-null { border-left-color: var(--accent); background: rgba(34, 224, 232, 0.05); }
.lab-nota strong { color: var(--text-primary); }

/* ---- cartões de autópsia: Parecia / Aconteceu / Status ---- */
.autopsy { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .autopsy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.autopsy-card {
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.autopsy-card > code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding: 2px 8px;
  border: 1px solid var(--border-accent);
}
.autopsy-card h3 { margin: var(--space-4) 0 var(--space-4); }
.autopsy-card dl { margin: 0; display: grid; gap: var(--space-3); }
.autopsy-card dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.autopsy-card dd { margin: 0 0 var(--space-3); color: var(--text-secondary); }
.autopsy-card dd:last-child { margin-bottom: 0; }
.autopsy-card dd strong { color: var(--text-primary); }
.autopsy-card .verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bad);
  border: 1px solid rgba(255, 77, 94, 0.35);
  background: rgba(255, 77, 94, 0.07);
}

/* ---- variante do interruptor para /privacidade-windows-11/ ----
   No laboratório, ligar o interruptor devolve algo NOCIVO — por isso vermelho.
   Aqui é o contrário: ligar o interruptor DESLIGA a telemetria. A mesma cor nos
   dois lugares diria coisas opostas. */
.lab-switch--ok[aria-checked='true'] {
  border-color: var(--border-accent);
  background: linear-gradient(90deg, rgba(34, 224, 232, 0.07), transparent 70%);
}
.lab-switch--ok[aria-checked='true'] .box { background: var(--accent); box-shadow: none; }
.lab-switch .tally {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
  margin-left: 4px;
}
.lab-switch--ok[aria-checked='true'] .tally { color: var(--text-muted); }
.readout.is-ok { color: var(--ok); }
#shield { height: 300px; }

/* No telefone o índice da FAQ é a navegação principal da página, e 30px de
   altura só atende o piso do AA (24px). Aqui ele passa a ser alvo cheio. */
@media (max-width: 740px) {
  .jump a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
}

/* ============================================================================
   OS DOIS COMPONENTES QUE FALTAVAM NA OFERTA (skill OFFERS, anatomia de 6)
   ----------------------------------------------------------------------------
   Escassez e bônus eram os dois ausentes. A skill é explícita: "most weak offers
   fail on bonuses (none), guarantees (none or wrong type), or scarcity (none, or
   fake)" — o site falhava em dois dos três.
   ========================================================================== */

/* ---- lote: escassez REAL, com a consequência publicada ----
   O número é estático e trocado à mão (data-lote-restantes), pelo mesmo motivo
   que data-checkout existe: sem gateway, um contador que se decrementa sozinho
   seria mentira mecânica — e a skill proíbe escassez falsa em letras maiúsculas. */
.lote {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  background: rgba(245, 177, 60, 0.06);
  border: 1px solid rgba(245, 177, 60, 0.28);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}
.lote strong { color: var(--text-primary); }
.lote-n {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 62px;
  padding: var(--space-3) var(--space-2);
  background: rgba(245, 177, 60, 0.12);
  border: 1px solid rgba(245, 177, 60, 0.35);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--warn);
  text-align: center;
}
.lote-n b { display: block; font-size: var(--text-lg); line-height: 1; font-weight: 800; }

/* ---- bônus: nomeados, nunca precificados ----
   A skill pede enquadramento de valor e proíbe inflar. A âncora de valor deste
   site continua sendo a tabela de preços públicos dos concorrentes, que é real. */
.bonus {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border-accent);
}
.bonus-head {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.bonus ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.bonus li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}
.bonus li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
}
.bonus li b { color: var(--text-primary); font-weight: 700; }

/* ---- palco do VSL: o zoom ao rolar ----
   Pedido do dono: dar foco ao vídeo quando a seção chega. Feito com
   animation-timeline: view(), que o site já usa no reveal — nenhum JS novo, e o
   navegador roda no compositor. Quem pediu menos movimento não recebe nenhum. */
.vsl-stage { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .vsl-stage {
      animation: vslZoom linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 42%;
    }
  }
}
@keyframes vslZoom {
  from { transform: scale(0.9); opacity: 0.55; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ---- os 7 beats: o argumento do vídeo, legível sem assistir ---- */
.beats { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); counter-reset: b; }
.beats li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.beats li:last-child { border-bottom: 0; }
.beat-n {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-deep);
}
.beats b { color: var(--text-primary); font-size: var(--text-sm); }
.beats li > span:last-child { grid-column: 2; font-size: var(--text-sm); color: var(--text-muted); }

/* O disco tinha a ondulação (::after) mas nenhum símbolo de play: um círculo
   vazio não diz "assista". O triângulo entra em ::before, que estava livre. */
.vsl-play .disc::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 21px solid var(--accent);
  transition: border-left-color 0.3s ease;
}
.vsl-play:hover .disc::before { border-left-color: var(--accent-bright); }

/* O <h3> dentro do <summary> existe para dar estrutura de documento à FAQ — a
   página mais rica em conteúdo do site não tinha heading nenhum além do H1.
   Visualmente ele não muda nada: herda o que o summary já era. */
summary > .q {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* rótulo da reprodução do app: era <h3> e criava salto H1→H3 na home */
.appui-h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink, #fff);
}