/* =============================================================================
   meusimplesfiscal — layout, componentes e utilitarios (web)
   -----------------------------------------------------------------------------
   Depende de css/tokens.css (carregar ANTES deste arquivo).
   Nenhum hex literal aqui: tudo consome var(--...). As unicas cores escritas
   por extenso sao `white`/`black` dentro de data-URI de icone (mask/marca de
   check), onde a cor e irrelevante para o resultado e nao existe token
   utilizavel — nao sao cores de interface.

   Mobile-first. Todo @media e min-width, exceto os tres pontos onde o
   comportamento e genuinamente "so no celular" (barra fixa e tabela em blocos).

   Estados cobertos em todo elemento interativo:
   default · hover · active · focus-visible · disabled · loading · erro
   ============================================================================= */

/* =============================================================================
   1. UTILITARIOS E LAYOUT BASE
   ============================================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: var(--container-narrow); }

/* Grid de 4 -> 8 -> 12 colunas.
   `minmax(0, 1fr)` e nao `1fr`: sem isso uma tabela ou um bloco longo dentro
   de uma celula estoura o grid e cria scroll horizontal (falha de WCAG 1.4.10). */
.grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* --- Secao ----------------------------------------------------------------- */
.section { padding-block: var(--section-y); }

.section--tint { background: var(--surface-sunken); }
.section--card { background: var(--surface-card); }
.section--page { background: var(--surface-page); }

/* .section--ink NAO pinta fundo sozinha, de proposito: quem remapeia os tokens
   e a classe .on-ink de tokens.css, e o HTML precisa das duas —
   <section class="section section--ink on-ink">. Se .section--ink pintasse o
   fundo escuro por conta propria, esquecer .on-ink produziria texto Ink sobre
   fundo Ink (1:1). Do jeito que esta, o esquecimento degrada para uma secao
   clara normal — falha segura.
   O unico efeito proprio e o respiro extra: o bloco escuro marca "acabou o
   argumento, agora e decisao" e pede mais ar que as demais secoes. */
.section--ink { padding-block: calc(var(--section-y) + var(--space-4)); }

/* Adiar parse/layout do que esta abaixo da dobra (aplicar de S7 em diante).
   `contain-intrinsic-size` e obrigatorio junto: sem ele a barra de rolagem
   pula durante o scroll. */
.section--deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

.section__head {
  margin-bottom: var(--space-12);
  max-width: var(--measure-prose);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);       /* 14px — piso de metadado */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-eyebrow);  /* 0.06em */
  text-transform: uppercase;
  color: var(--text-link);
}

.section__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.section__eyebrow + .section__title { margin-top: var(--space-2); }

.section__sub {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-body);
  max-width: var(--measure-prose);
}

.section__head--center .section__sub { margin-inline: auto; }

/* --- Prosa e medidas de linha ---------------------------------------------- */
.prose > p,
.prose > ul,
.prose > ol { max-width: var(--measure-prose); }

.prose > * + * { margin-top: var(--space-6); }

.prose ul,
.prose ol { padding-inline-start: var(--space-6); }

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }

.measure-prose { max-width: var(--measure-prose); }
.measure-lead  { max-width: var(--measure-lead); }
.measure-card  { max-width: var(--measure-card); }

/* --- Texto ----------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-strong { color: var(--text-strong); }

/* Numeros sempre tabulares (preco, CNPJ, codigo, comparativos). */
.tabular,
.price,
.plan__unit,
.stepper__result,
.compare td,
.trustbar__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

/* Skip link: primeiro elemento focavel do DOM. Visivel no foco, nao sr-only
   puro — quem navega por teclado precisa ver para onde vai. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -100px;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-5);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible,
.skip-link:focus { top: var(--space-2); }

/* --- Foco programatico -----------------------------------------------------
   Tres elementos recebem foco por codigo, nao por teclado: <main tabindex="-1">
   (alvo do skip link), o sumario de erros (apos submit invalido) e o <h1> da
   tela de sucesso. Em foco programatico o anel nao deve aparecer — ele so faz
   sentido quando o usuario esta navegando por teclado.

   `:focus:not(:focus-visible)` e a formulacao precisa disso: suprime APENAS o
   caso nao-teclado. O anel global de tokens.css continua valendo para
   :focus-visible, entao nenhum destes tres perde o indicador quando alcancado
   por Tab. Nao existe nenhum outro `outline: none` no projeto.               */
#conteudo:focus:not(:focus-visible),
.error-summary:focus:not(:focus-visible),
.success__title:focus:not(:focus-visible) { outline: none; }

/* Sentinela de 1px no topo do <main>: alimenta o IntersectionObserver que
   liga a sombra do header e a barra fixa mobile. Nunca listener de scroll. */
.header-sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 100%;
  pointer-events: none;
}

.is-hidden { display: none !important; }

/* --- Icones ---------------------------------------------------------------- */
/* Consumidos por <svg class="icon"><use href="#ic-check"/></svg>.
   Herdam a cor do contexto (currentColor), o que os faz funcionar
   automaticamente dentro de .on-ink sem nenhuma regra extra. */
.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon--sm { width: 1em;    height: 1em; }
.icon--lg { width: 2rem;   height: 2rem; }
.icon--xl { width: 2.5rem; height: 2.5rem; }

/* =============================================================================
   2. BOTOES
   -----------------------------------------------------------------------------
   `min-height`, NUNCA `height`: com o bookmarklet de text-spacing (WCAG 1.4.12)
   o rotulo cresce e um botao de altura fixa corta o texto.
   Nunca CAIXA ALTA — o manual proibe.
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);   /* separa APENAS icone de rotulo — ver .btn__label */
  min-height: var(--control-h);         /* 48px */
  padding-inline: var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn--lg    { min-height: var(--control-h-lg); }  /* 56px — hero e CTA de secao */
.btn--sm    { min-height: var(--tap-min); padding-inline: var(--space-5); }
.btn--block { display: flex; width: 100%; }

/* O rotulo do botao e' SEMPRE um unico item flex.
   Motivo: num container flex, os nos de texto viram itens anonimos e os nos que
   contem so espaco em branco sao DESCARTADOS. Um rotulo escrito solto como
   `Testar <span>15</span> dias gratis` viraria tres itens sem espaco entre eles,
   e o `gap` do .btn entraria no lugar do espaco — grande demais, lendo como
   espaco duplo ("Testar  15  dias"). Com tudo dentro de .btn__label o texto volta
   a ser fluxo inline normal e o gap so faz o que deve: separar icone de rotulo. */
.btn__label { display: inline; }

/* --- Primario: branco sobre indigo = 7.22:1 -------------------------------- */
.btn--primary {
  background-color: var(--surface-brand);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover  { background-color: var(--surface-brand-hover); }  /* 9.20 */
.btn--primary:active { background-color: var(--surface-brand-hover);
                       box-shadow: none;
                       transform: translateY(1px); }

/* --- Secundario (contorno). Nunca verde. ----------------------------------- */
.btn--secondary {
  background-color: var(--surface-card);
  color: var(--text-link);                 /* 9.20 sobre branco */
  border-color: var(--msf-border-control); /* 3.89 — e uma fronteira de controle */
}

.btn--secondary:hover  { background-color: var(--surface-accent);
                         border-color: var(--msf-indigo); }
.btn--secondary:active { background-color: var(--surface-pressed);
                         transform: translateY(1px); }

/* --- Fantasma: peso minimo, sem borda -------------------------------------- */
.btn--ghost { background-color: transparent; color: var(--text-link); }
.btn--ghost:hover  { background-color: var(--surface-accent); }
.btn--ghost:active { background-color: var(--surface-pressed); }

/* --- Sobre fundo Ink ------------------------------------------------------- */
/* O indigo #3A41D6 sobre Ink da 2.50:1 — abaixo do minimo de 3:1 de fronteira
   percebida (WCAG 1.4.11). Dentro de .on-ink o botao primario ganha borda. */
.on-ink .btn--primary {
  border-color: var(--msf-indigo-on-dark);   /* 7.13 sobre Ink */
  box-shadow: none;
}

.on-ink .btn--secondary {
  background-color: transparent;
  color: var(--text-link);                    /* #8E9BFF — 7.13 */
  border-color: var(--msf-ink-border-control);/* #6E78FF — 4.99 */
}

.on-ink .btn--secondary:hover  { background-color: var(--surface-inverse-raised); }
.on-ink .btn--secondary:active { background-color: var(--surface-inverse-pressed); }

/* --- Desabilitado ---------------------------------------------------------- */
/* Politica: preferir NAO renderizar botao desabilitado. O comerciante le botao
   apagado como "o site quebrou". Se for inevitavel, sempre com texto ao lado
   explicando o motivo (o `disabled` e isento de contraste, o texto nao e). */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background-color: var(--surface-brand);
}

.btn--secondary:disabled:hover,
.btn--secondary[aria-disabled="true"]:hover {
  background-color: var(--surface-card);
  border-color: var(--msf-border-control);
}

/* --- Carregando ------------------------------------------------------------ */
/* O JS deve travar `min-width` com a largura medida ANTES de trocar o rotulo,
   senao o botao encolhe e gera CLS. Marcar tambem aria-busy="true". */
.btn.is-loading { cursor: progress; }

.btn__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-pill);
  animation: msf-spin 700ms linear infinite;
  flex: none;
}

@keyframes msf-spin { to { transform: rotate(360deg); } }

/* Sem movimento: o spinner some e quem comunica o estado e o rotulo
   ("Preparando seu codigo...") + aria-busy. Girar 0.01ms seria um artefato
   parado e confuso. */
@media (prefers-reduced-motion: reduce) {
  .btn__spinner { display: none; }
}

/* =============================================================================
   3. LINKS DE TEXTO
   -----------------------------------------------------------------------------
   O sublinhado e PERMANENTE, nao aparece no hover. Cor nunca e o unico
   indicador de link no corpo do texto (WCAG 1.4.1).
   ============================================================================= */

.link {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}

.link:hover {
  color: var(--text-link-hover);
  text-decoration-thickness: 2px;
}

.link:active { color: var(--text-link-hover); }

/* Link com alvo de toque proprio (fora de bloco de prosa). */
.link--tap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
}

/* =============================================================================
   4. CHIPS E BANNERS
   ============================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-caption);   /* 14px — piso de metadado */
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex: none;
}

.chip--brand   { background: var(--surface-accent);  color: var(--text-link); }           /* 7.92 */
.chip--success { background: var(--surface-success); color: var(--text-success-on-tint); }/* 6.53 */
.chip--warning { background: var(--surface-warning); color: var(--text-warning); }        /* 6.34 */
.chip--danger  { background: var(--surface-danger);  color: var(--text-danger-on-tint); } /* 5.52 */

/* Dentro do green-tint o UNICO verde permitido e #07603F.
   #0A8155 ali da 4.20:1 e reprova. */

.on-ink .chip--brand   { background: var(--surface-inverse-raised);
                         color: var(--text-link-on-inverse); }          /* 6.17 */
.on-ink .chip--success { background: var(--surface-inverse-raised);
                         color: var(--text-success-on-inverse); }       /* 7.00 */

/* --- Banners --------------------------------------------------------------- */
.banner {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-inline-start: 4px solid transparent;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.banner__text { max-width: var(--measure-prose); }

.banner__title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}

/* Ambar so como FUNDO com texto Ink (15.94:1). Branco sobre ambar da
   2.15:1 e e proibido em qualquer tamanho. */
.banner--warning {
  background: var(--surface-warning);
  color: var(--text-strong);
  border-inline-start-color: var(--msf-amber);
}

.banner--info {
  background: var(--surface-accent);
  color: var(--text-strong);
  border-inline-start-color: var(--msf-indigo);
}

/* Confirmacao (pedido recebido, reenvio feito). O verde de marca (#0EA572) fica
   SO na borda e no icone — como selo. O texto usa --text-success-on-tint
   (#07603F, 6.53:1 sobre o tint verde), nunca o verde de marca, que da 4.20:1
   e reprova no contrast-check.py. */
.banner--success {
  background: var(--surface-success);
  color: var(--text-success-on-tint);
  border-inline-start-color: var(--msf-green);
}

.banner--danger {
  background: var(--surface-danger);
  color: var(--text-danger-on-tint);
  border-inline-start-color: var(--msf-red-strong);
}

/* Faixa ambar solida (aviso "sem internet"), texto Ink = 8.42:1 */
.banner--solid-warning {
  background: var(--surface-warning-solid);
  color: var(--text-on-warning-solid);
  border-inline-start-color: var(--msf-ink);
}

/* --- Card generico --------------------------------------------------------- */
/* Borda E sombra, sempre. Card branco sobre off-white tem so 1.31:1 de
   diferenca de luminancia e SOME no alto contraste forcado do Windows —
   que e justamente o SO do publico. */
.card {
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.card p { max-width: var(--measure-card); }

.divider {
  border-block-start: var(--border-subtle);
  margin-block: var(--space-6);
}

/* =============================================================================
   5. S0 · HEADER
   ============================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* Fundo SOLIDO desde o pixel 0. Header transparente sobre o hero e o erro
     nº 1 de legibilidade em landing: o contraste varia pixel a pixel. */
  background: var(--surface-page);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  margin-inline-end: auto;
  text-decoration: none;
}

.site-header__brand svg,
.site-header__brand img { height: 1.75rem; width: auto; }  /* 28px mobile */

.site-header__nav { display: none; }

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Alvo de toque: min-height 44px + inline-flex + align-items.
   CORRECAO da auditoria 08 (MEDIA): confiar em padding + line-height dava
   43.2px, abaixo do minimo de 44 que a propria spec adotou. min-height nao
   depende de line-height e nao quebra com o bookmarklet de text-spacing. */
.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  color: var(--text-strong);
  text-decoration: none;
  border-block-end: 2px solid transparent;
}

.site-header__nav-link:hover { color: var(--text-link); }

.site-header__nav-link.is-active {
  font-weight: var(--fw-semibold);
  color: var(--text-link);
  border-block-end-color: var(--msf-indigo);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Link textual do header ("Perdi meu codigo"): mesmo alvo de 44px. */
.site-header__link {
  display: none;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-header__cta { min-height: var(--tap-min); padding-inline: var(--space-5); }

/* --- Menu mobile: <details>, zero JS --------------------------------------- */
.site-header__menu { position: relative; }

.site-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  color: var(--text-strong);
}

.site-header__menu-toggle::-webkit-details-marker { display: none; }
.site-header__menu-toggle:hover { background: var(--surface-accent); }
.site-header__menu[open] .site-header__menu-toggle { background: var(--surface-accent); }

.site-header__menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-2));
  min-width: 15rem;
  padding: var(--space-2);
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.site-header__menu-link {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  text-decoration: none;
}

.site-header__menu-link:hover { background: var(--surface-accent); color: var(--text-link); }
.site-header__menu-link:active { background: var(--surface-pressed); }

.site-header__menu-divider {
  border-block-start: var(--border-subtle);
  margin-block: var(--space-2);
}

@media (min-width: 1024px) {
  .site-header__inner { min-height: var(--header-h-lg); gap: var(--space-8); }
  .site-header__brand svg,
  .site-header__brand img { height: 2rem; }   /* 32px desktop */
  .site-header__nav  { display: block; margin-inline-end: auto; }
  .site-header__brand { margin-inline-end: 0; }
  .site-header__link { display: inline-flex; }
  .site-header__menu { display: none; }
}

/* =============================================================================
   6. S1 · HERO
   ============================================================================= */

.hero {
  /* padding-top reduzido de proposito: o header ja da respiro e cada pixel
     acima da dobra vale. */
  padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: var(--section-y);
  background: var(--surface-page);
}

.hero__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.hero__chip { margin-bottom: var(--space-5); }

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}

/* O lead usa --text-body (Ink), NAO cinza. E o paragrafo mais lido da pagina;
   enfraquece-lo para "criar hierarquia" e trocar conversao por estetica.
   A hierarquia vem do tamanho e do peso. */
.hero__lead {
  margin-top: var(--space-5);
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-body);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__microcopy {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure-lead);
}

.hero__seals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.hero__seal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--text-strong);
}

/* O ponto verde e SELO, nao texto. Sobre off-white usa #0A8155 (4.54),
   nunca o verde de marca #0EA572 (2.93 — reprova ate em AA large). */
.hero__seal-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--text-success);
  flex: none;
}

.hero__media { margin: 0; }

/* viewBox + width:100% da a razao de aspecto antes do layout -> CLS 0 */
.hero__media svg { width: 100%; height: auto; }

.hero__media-crop { display: block; }
.hero__media-full { display: none; }

.hero__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure-card);
}

@media (min-width: 600px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { flex: 1 1 auto; }
}

@media (min-width: 768px) {
  .hero__media-crop { display: none; }
  .hero__media-full { display: block; }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap-grid);
  }
  .hero__body  { grid-column: 1 / span 6; }
  .hero__media { grid-column: 7 / span 6; }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* =============================================================================
   7. S2 · FAIXA DE FATOS (trust bar)
   ============================================================================= */

.trustbar {
  padding-block: var(--space-10);   /* e uma faixa, nao uma secao */
  background: var(--surface-card);
}

.trustbar__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  text-align: center;
}

.trustbar__item { padding-inline: var(--space-2); }

.trustbar__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
}

.trustbar__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 1024px) {
  .trustbar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: start; }
  .trustbar__item + .trustbar__item {
    border-inline-start: var(--border-subtle);
    padding-inline-start: var(--space-6);
  }
}

/* =============================================================================
   8. S3 · COMO FUNCIONA EM PASSOS
   ============================================================================= */

.steps { background: var(--surface-page); }

.steps__grid {
  display: grid;
  gap: var(--gap-grid);
  position: relative;
}

/* Conector tracejado ligando os circulos numerados. Decorativo, aria-hidden.
   So existe >=1024. */
.steps__connector { display: none; }

.step {
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  position: relative;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  color: var(--text-link);           /* 7.92 sobre indigo-tint */
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: 1;
}

/* Numero e icone lado a lado: o numero conta a ordem, o icone diz do que o passo
   trata — lidos juntos, num movimento so, antes do titulo. */
.step__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.step__icon {
  flex: none;
  color: var(--msf-indigo);
  opacity: 0.45;                     /* acento, nao concorrente do numero */
}

.step__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  color: var(--text-strong);
}

.step__text {
  margin-top: var(--space-3);
  max-width: var(--measure-card);
  color: var(--text-body);
}

.step__time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.steps__note {
  margin-top: var(--space-10);
  max-width: var(--measure-prose);
  color: var(--text-body);
}

.steps__cta {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-8);
}

/* 2x2 a partir do tablet, e nunca 3+1: com quatro passos, tres colunas deixam um
   card orfao na segunda linha e a secao perde o prumo. Duas colunas fecham a
   grade e ainda dao mais largura de leitura ao texto de cada passo.
   O conector tracejado sai junto — uma linha horizontal ligando quatro cards em
   duas linhas sugere uma sequencia que a grade nao tem. */
@media (min-width: 768px) {
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__connector { display: none; }
  .step { display: block; }
  /* Cards da mesma linha com a mesma altura, independente do tamanho do texto. */
  .step { height: 100%; }
}

@media (min-width: 1024px) {
  .steps__cta { justify-content: center; }
  .steps__note { margin-inline: auto; text-align: center; }
}

/* =============================================================================
   9. S4-S6 · BLOCOS DE BENEFICIO
   ============================================================================= */

.benefit__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.benefit__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.benefit__text {
  margin-top: var(--space-5);
  max-width: var(--measure-prose);
  color: var(--text-body);
}

.benefit__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  max-width: var(--measure-prose);
}

.benefit__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.55;
  color: var(--text-body);
}

/* Marcador = icone de check em --text-success (#0A8155, 4.54 sobre off-white e
   4.90 sobre branco). NUNCA o verde de marca. Dentro de secao tintada o HTML
   deve usar .benefit__check--on-tint. */
.benefit__check {
  color: var(--text-success);
  margin-top: 0.15em;
}

.benefit__check--on-tint { color: var(--text-success-on-tint); }

.benefit__note { margin-top: var(--space-6); }

.benefit__media { margin: 0; }
.benefit__media svg,
.benefit__media img { width: 100%; height: auto; }

@media (min-width: 1024px) {
  .benefit__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap-grid);
  }
  .benefit__body  { grid-column: 1 / span 5; }
  .benefit__media { grid-column: 7 / span 6; }

  /* Zig-zag. A ordem do DOM NUNCA muda — so a posicao no grid — para que a
     ordem de foco continue igual a ordem de leitura logica. */
  .benefit--reverse .benefit__body  { grid-column: 8 / span 5; }
  .benefit--reverse .benefit__media { grid-column: 1 / span 6; grid-row: 1; }
}

/* =============================================================================
   10. S7 · PROVAS
   ============================================================================= */

.proofs__grid {
  display: grid;
  gap: var(--gap-grid);
}

/* Card BRANCO sobre indigo-tint: separacao real (1.20 de luminancia) + borda.
   Por isso os cards nao sao transparentes. */
.proof {
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.proof__icon { color: var(--msf-indigo); margin-bottom: var(--space-4); }

.proof__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  color: var(--text-strong);
}

.proof__text {
  margin-top: var(--space-3);
  max-width: var(--measure-card);
  color: var(--text-body);
}

.proofs__footer {
  margin-top: var(--space-10);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  color: var(--text-strong);
  max-width: var(--measure-prose);
  margin-inline: auto;
}

.proofs__identity {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  max-width: var(--measure-prose);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .proofs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .proofs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
}

/* =============================================================================
   11. S8 · COMPARATIVO
   ============================================================================= */

/* A tabela fica sobre superficie BRANCA dentro da secao off-white, e a zebra
   usa o proprio off-white. CORRECAO da auditoria 08 (BAIXA): a regra original
   misturava 60% de #F5F6FB com transparente sobre um fundo que ja era
   #F5F6FB — o resultado computado era exatamente #F5F6FB e a faixa alternada
   ficava literalmente invisivel, justo na tabela de 4 colunas e 11 linhas,
   que e onde o rastreamento de linha mais importa. */
.compare-wrap {
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  display: none;
}

.compare {
  width: 100%;
  min-width: 45rem;
  background: var(--surface-card);
  font-size: var(--fs-body-sm);   /* 16px. NUNCA descer para caber mais */
  line-height: 1.5;
}

.compare th,
.compare td {
  padding: var(--space-4);
  text-align: start;
  vertical-align: top;
  /* borda em cada linha: sobrevive ao alto contraste forcado, onde o
     background da zebra e descartado */
  border-block-end: var(--border-subtle);
}

.compare thead th {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.compare tbody th {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.compare tbody td { color: var(--text-body); }

/* Zebra: 1.08:1 de diferenca de luminancia — sutil e visivel, sem mexer no
   contraste do texto (18.08 nas linhas brancas, 16.75 nas off-white). */
.compare tbody tr:nth-child(even) { background: var(--msf-off-white); }

/* Coluna do produto, destacada */
.compare .is-highlight {
  background: var(--surface-sunken);
  border-inline: var(--border-brand-2);
}

.compare thead .is-highlight { border-block-start: var(--border-brand-2); }
.compare tbody tr:last-child .is-highlight { border-block-end: var(--border-brand-2); }
.compare tbody tr:nth-child(even) .is-highlight { background: var(--surface-sunken); }

/* Marcas de sim/nao. Nenhuma celula e SO icone: todo <td> tem texto e o
   icone e aria-hidden (WCAG 1.4.1). */
.mark { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.mark--yes .icon { color: var(--text-success); }
.mark--no  .icon { color: var(--text-muted); }
.compare .is-highlight .mark--yes .icon { color: var(--text-success-on-tint); }

/* --- Versao mobile: 11 blocos empilhados ----------------------------------- */
.compare-cards { display: grid; gap: var(--space-5); }

.compare-card {
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.compare-card__crit {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  padding-bottom: var(--space-3);
  border-block-end: var(--border-subtle);
}

.compare-card__row { padding-block: var(--space-3); }

.compare-card__row--msf {
  background: var(--surface-sunken);
  border-inline-start: 3px solid var(--msf-indigo);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
}

.compare-card__label {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.compare-card__value {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

.compare-notes { display: grid; gap: var(--gap-grid); margin-top: var(--space-12); }

.compare-note {
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.compare-note__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

.compare-note p { margin-top: var(--space-3); color: var(--text-body); }

.compare__cta { display: flex; justify-content: center; margin-top: var(--space-10); }

.compare__source {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .compare-wrap  { display: block; }
  .compare-cards { display: none; }
}

@media (min-width: 1024px) {
  .compare { min-width: 0; }
  .compare-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   12. S9 · O QUE VOCE PRECISA TER
   ============================================================================= */

.reqs__grid { display: grid; gap: var(--space-8); }

/* Nao sao cards com sombra: sao itens de lista com icone. Sombra aqui daria
   peso de "recurso" a algo que e requisito. */
.req { padding-bottom: var(--space-6); border-block-end: var(--border-subtle); }

.reqs__grid .req:last-child { border-block-end: 0; padding-bottom: 0; }

.req__icon { color: var(--msf-indigo); margin-bottom: var(--space-3); }

.req__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

.req__chip { margin-top: var(--space-3); }

.req__text {
  margin-top: var(--space-3);
  max-width: var(--measure-card);
  color: var(--text-body);
}

.reqs__note {
  margin-top: var(--space-10);
  margin-inline: auto;
  max-width: var(--measure-prose);
}

@media (min-width: 1024px) {
  .reqs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
  .req { border-block-end: 0; padding-bottom: 0; }
}

/* =============================================================================
   13. S10 · PRECOS
   ============================================================================= */

/* --- Toggle mensal / anual: dois links, zero JS ---------------------------- */
.pricing-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-card);
  border: var(--border-control);     /* 3.60 — e um controle, nao decoracao */
  border-radius: var(--radius-pill);
}

.pricing-toggle__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);       /* 44px */
  min-width: 5.5rem;                /* 88px */
  padding-inline: var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--text-link);           /* 9.20 sobre branco */
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pricing-toggle__opt:hover  { background: var(--surface-accent); }
.pricing-toggle__opt:active { background: var(--surface-pressed); }

.pricing-toggle__opt.is-on {
  background: var(--surface-brand);
  color: var(--text-on-brand);       /* 7.22 */
}

.pricing-toggle__opt.is-on:hover { background: var(--surface-brand-hover); }

.pricing-toggle__save {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.pricing__toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-10);
}

/* --- Grade de planos ------------------------------------------------------- */
.plans { display: grid; gap: var(--gap-grid); align-items: stretch; }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  position: relative;
}

/* Destaque com 6 sinais, dos quais 5 nao dependem de cor:
   badge textual, borda 2px, elevacao, altura, CTA preenchido — e a cor,
   que e redundante. NAO usar transform:scale: rasteriza o texto em subpixel
   e borra em tela nao-HiDPI, que e o parque de maquinas do publico. */
.plan--featured {
  background: var(--surface-sunken);
  border: var(--border-brand-2);
  box-shadow: var(--shadow-lg);
  padding-block: calc(var(--space-8) + var(--space-6));
}

.plan__badge {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-brand);
  color: var(--text-on-brand);       /* 7.22 */
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.plan__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text-strong);
}

.plan__machines {
  margin-top: var(--space-1);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* O preco e o "total" da marca, e total e Ink. NUNCA verde. */
.price {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}

.price__cur { font-size: 0.55em; margin-inline-end: 0.1em; }

.price__per {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--text-muted);
}

.plan__billed {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* Esta linha e o chamariz do card destacado. */
.plan__unit {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.plan--featured .plan__unit { color: var(--text-link); }  /* 7.92 sobre tint */

/* Chip de economia: indigo, NUNCA verde. Verde e confirmacao fiscal, nao
   realce comercial. */
.plan__save { margin-top: var(--space-3); }

.plan__for {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.plan__alt {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
}

.plan__divider {
  border-block-start: var(--border-subtle);
  margin-block: var(--space-5);
}

.plan--featured .plan__divider { border-block-start-color: var(--msf-border-control); }

.plan__features { display: grid; gap: var(--space-3); }

.plan__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.55;
  color: var(--text-body);
}

.plan__feature .icon { color: var(--text-success); margin-top: 0.15em; }

/* Dentro do card destacado o fundo e indigo-tint: #0A8155 da 4.22 e reprova.
   O unico verde permitido ali e #07603F. */
.plan--featured .plan__feature .icon { color: var(--text-success-on-tint); }

/* CTA colado no rodape do card, para os tres alinharem mesmo com listas de
   tamanhos diferentes. */
.plan__cta { margin-top: auto; padding-top: var(--space-8); width: 100%; }

.plans__note {
  margin-top: var(--space-8);
  text-align: center;
  color: var(--text-muted);
  max-width: var(--measure-prose);
  margin-inline: auto;
}

.pricing__extra-cost {
  margin-top: var(--space-4);
  margin-inline: auto;
  max-width: var(--measure-prose);
  color: var(--text-body);
}

.pricing__footnote {
  margin-top: var(--space-8);
  text-align: center;
  color: var(--text-body);
}

@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Em <1024 o card destacado vem primeiro: o publico chega de celular e o card
   do meio e o alvo. `order` muda a ordem visual, nao a do DOM — seguro aqui
   porque cada plano e um <article> autocontido, sem relacao sequencial. */
@media (max-width: 1023px) {
  .plan--featured { order: -1; }
}

/* --- Stepper de maquinas --------------------------------------------------- */
.stepper {
  margin-top: var(--space-10);
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.stepper__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.stepper__text { margin-top: var(--space-2); color: var(--text-body); max-width: var(--measure-prose); }

.stepper__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);          /* 48x48 fixo */
  border: var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.stepper__btn:hover  { background: var(--surface-accent); border-color: var(--msf-indigo); }
.stepper__btn:active { background: var(--surface-pressed); transform: translateY(1px); }

.stepper__btn:disabled,
.stepper__btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.stepper__count {
  min-width: 8rem;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.stepper__result {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--text-strong);
}

/* Ao bater no limite o botao fica disabled E este texto aparece — `disabled`
   sozinho parece bug para este publico. */
.stepper__limit {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* Fallback sem JS: tabela estatica. O JS substitui pelo stepper, nunca o
   contrario. */
.stepper__fallback { margin-top: var(--space-4); }
.stepper__table { width: 100%; font-size: var(--fs-body-sm); }
.stepper__table th,
.stepper__table td { padding: var(--space-2) var(--space-3); text-align: start;
                     border-block-end: var(--border-subtle); }

/* --- Faixa "o que a gente nao cobra" --------------------------------------- */
.nocharge {
  margin-top: var(--space-10);
  background: var(--surface-success);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.nocharge__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);          /* 15.48 sobre green-tint */
  margin-bottom: var(--space-4);
}

.nocharge__list { display: grid; gap: var(--space-3); }

.nocharge__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-strong);
  line-height: 1.55;
}

/* Dentro do green-tint o unico verde e #07603F (6.53). */
.nocharge__item .icon { color: var(--text-success-on-tint); margin-top: 0.15em; }

@media (min-width: 600px) {
  .nocharge__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .nocharge__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =============================================================================
   14. S11 · MANDA PRO CONTADOR
   ============================================================================= */

.accountant__inner { display: grid; gap: var(--space-10); align-items: center; }

.accountant__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
}

.accountant__text { margin-top: var(--space-5); max-width: var(--measure-prose); }

.accountant__list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }

.accountant__link { margin-top: var(--space-6); display: inline-flex; }

.accountant__media { margin: 0; }
.accountant__media svg,
.accountant__media img { width: 100%; height: auto; }

@media (min-width: 1024px) {
  .accountant__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-grid); }
  .accountant__body  { grid-column: 2 / span 6; }
  .accountant__media { grid-column: 8 / span 5; }
}

/* =============================================================================
   15. S12 · FAQ — <details> nativo, zero JS
   ============================================================================= */

.faq__cols { display: grid; gap: var(--space-8); }

.faq__item { border-block-end: var(--border-subtle); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding-block: var(--space-4);
  padding-inline: var(--space-3);
  cursor: pointer;
  list-style: none;
  color: var(--text-strong);
  border-radius: var(--radius-sm);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q:hover  { background: var(--surface-accent); color: var(--text-link); }
.faq__q:active { background: var(--surface-pressed); }

.faq__q-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: inherit;
}

/* Chevron proprio, substituindo o triangulo nativo. Nunca ficar sem
   indicador de estado. */
.faq__q::after {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  margin-block-end: 0.25rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq__item[open] > .faq__q { color: var(--text-link); }
.faq__item[open] > .faq__q::after { transform: rotate(-135deg); margin-block-end: -0.25rem; }

.faq__answer {
  padding: 0 var(--space-3) var(--space-5);
  color: var(--text-body);
}

.faq__answer > * + * { margin-top: var(--space-4); }
.faq__answer p { max-width: var(--measure-prose); }

@media (min-width: 1024px) {
  .faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
}

/* =============================================================================
   16. S13 · CTA FINAL (bloco Ink)
   -----------------------------------------------------------------------------
   HTML: <section class="section section--ink cta-final on-ink">
   ============================================================================= */

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

.cta-final__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);          /* branco — 18.08 */
}

.cta-final__sub {
  margin-top: var(--space-4);
  margin-inline: auto;
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-muted);           /* #9AA0C8 — 7.09 */
}

.cta-final__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  margin-top: var(--space-8);
}

.cta-final__microcopy {
  margin-top: var(--space-5);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.cta-final__sign {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

@media (min-width: 600px) {
  .cta-final__actions { flex-direction: row; justify-content: center; }
}

/* =============================================================================
   17. S14 · FORMULARIO DE CADASTRO
   -----------------------------------------------------------------------------
   Coluna unica, sempre. Formulario de duas colunas quebra a varredura em Z
   e dobra o tempo de preenchimento.
   ============================================================================= */

.signup { background: var(--surface-page); }

.signup__head { margin-bottom: var(--space-8); }

.signup__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
}

.signup__sub { margin-top: var(--space-4); font-size: var(--fs-lead);
               line-height: var(--lh-lead); color: var(--text-body); }

.signup__badge { margin-top: var(--space-5); }

/* Faixa de pre-requisitos no topo do formulario standalone (/cadastro):
   Windows-only, A1 e CSC. O trafego pago cai direto aqui e nao passa por S9. */
.signup__prereqs { margin-bottom: var(--space-8); }

.form { display: grid; gap: var(--space-6); }

/* --- Campo ----------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }

.field__label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text-strong);
}

.field__req {
  color: var(--text-danger);
  text-decoration: none;
  border-bottom: 0;
  margin-inline-start: 0.15em;
}

.field__control { position: relative; display: block; }

/* Fronteira de controle em #7B8193 (3.60 sobre off-white, 3.89 sobre branco).
   #DEE0EC da 1.22 e SOME — um campo cuja fronteira o usuario nao enxerga e
   um campo que ele nao preenche. */
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  min-height: var(--control-h);       /* 48px */
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);    /* sempre branco: o placeholder so
                                         atinge 4.5:1 sobre branco/off-white */
  color: var(--text-body);
  border: var(--border-control);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;                    /* 16px trava o zoom automatico do
                                         Safari iOS no foco */
  font-weight: var(--fw-medium);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.field-input:hover,
.field-select:hover,
.field-textarea:hover { border-color: var(--text-muted); }

.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible {
  border-color: var(--msf-indigo);
  box-shadow: var(--focus-halo);
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-placeholder);     /* 4.86 sobre branco — piso do sistema */
  opacity: 1;                          /* Firefox aplica opacity por padrao */
}

/* Campo preenchido e valido volta ao default. Sem check verde: poluicao
   visual — a ausencia de erro ja e o sinal. */

/* Erro: borda + icone + texto + aria-invalid. Cor nunca e o unico indicador. */
.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"],
.field.is-invalid .field-input,
.field.is-invalid .field-select { border-color: var(--msf-red-strong); }

.field-input[aria-invalid="true"]:focus-visible,
.field.is-invalid .field-input:focus-visible {
  border-color: var(--msf-red-strong);
  box-shadow: var(--focus-halo-danger);
}

/* Seta do <select>: mask monocromatica que herda um token de cor. Sem hex
   literal e sem depender de background-image colorido. */
.field__control--select::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-4);
  margin-block: auto;
  width: 0.75rem;
  height: 0.5rem;
  background-color: var(--text-muted);
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.field-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--space-10);
}

/* Spinner da consulta de CNPJ, dentro do campo. */
.field__spinner {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-4);
  margin-block: auto;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--msf-border-control);
  border-inline-end-color: transparent;
  border-radius: var(--radius-pill);
  animation: msf-spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .field__spinner { display: none; }
}

/* Ajuda: fica ABAIXO do campo e e lida antes de o usuario errar, nao como
   mensagem de erro. Ligada por aria-describedby. */
.field__hint {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-muted);           /* 5.70 */
  max-width: var(--measure-prose);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--text-danger);          /* 4.63 */
}

.field__error .icon { margin-top: 0.15em; }

/* Resultado da consulta de CNPJ. Falha e SILENCIO: nao existe estado de erro
   aqui, so ok e aviso. */
.field__lookup {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.field__lookup--ok   { color: var(--text-success); font-weight: var(--fw-medium); }
.field__lookup--warn { color: var(--text-warning); font-weight: var(--fw-medium); }

/* --- Fieldset + controle segmentado (quantos computadores) ----------------- */
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }

.fieldset__legend {
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text-strong);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.segmented__opt { position: relative; display: block; }

/* O radio real fica transparente por cima do rotulo: continua focavel, no
   fluxo de acessibilidade e com o alvo de toque inteiro. O anel de foco e
   redesenhado no rotulo pela regra `.segmented__input:focus-visible +
   .segmented__label`, que exige o <input> IMEDIATAMENTE antes do <span>:

     <label class="segmented__opt">
       <input class="segmented__input" type="radio" name="machines" ...>
       <span class="segmented__label">1 computador</span>
     </label>                                                              */
.segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border: var(--border-control);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  text-align: center;
  color: var(--text-link);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.segmented__opt:hover .segmented__label { background: var(--surface-accent);
                                          border-color: var(--msf-indigo); }

.segmented__input:checked + .segmented__label {
  background: var(--surface-brand);
  color: var(--text-on-brand);        /* 7.22 */
  border-color: var(--surface-brand);
}

.segmented__input:focus-visible + .segmented__label {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.segmented__note { margin-top: var(--space-2); font-size: var(--fs-body-sm); }

/* --- Checkbox -------------------------------------------------------------- */
/* O <label> inteiro e clicavel, o que da area de toque de 100% da linha e
   sempre >= 44px de altura. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding-block: var(--space-2);
  cursor: pointer;
  line-height: var(--lh-body);
}

.check__input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.5rem;                      /* 24px visual */
  height: 1.5rem;
  margin: 0;
  margin-top: 0.15em;
  background: var(--surface-card);
  border: 2px solid var(--msf-border-control);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.check:hover .check__input { border-color: var(--msf-indigo); }

.check__input:checked {
  background-color: var(--surface-brand);
  border-color: var(--surface-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
}

.check__input[aria-invalid="true"],
.check.is-invalid .check__input { border-color: var(--msf-red-strong); }

.check__text { font-size: var(--fs-body-sm); color: var(--text-body); }

.check__optional { color: var(--text-muted); font-style: normal; }

.form__consent-note {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: var(--measure-prose);
}

.form__submit { margin-top: var(--space-2); }

.form__microcopy {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure-prose);
}

/* Honeypot: fora da viewport, nunca `display:none` (bot detecta) e nunca
   focavel por teclado. */
.form__honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Sumario de erros ------------------------------------------------------ */
/* SEM role="alert". CORRECAO da auditoria 08 (MEDIA): live region assertiva
   somada a foco programatico no mesmo elemento produz anuncio duplicado em
   NVDA/JAWS, e em algumas versoes um evento cancela o outro e o usuario nao
   ouve nada. E o motivo pelo qual o GOV.UK Design System abandonou o
   role="alert" no error summary. Fica so o container focavel com <h2>. */
.error-summary {
  background: var(--surface-danger);
  border: var(--border-danger);
  border-inline-start: 4px solid var(--msf-red-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--text-danger-on-tint);  /* 5.52 sobre red-tint */
}

.error-summary__title {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text-danger-on-tint);
}

.error-summary__list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }

.error-summary__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text-danger-on-tint);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* =============================================================================
   18. S16 · TELA DE SUCESSO
   -----------------------------------------------------------------------------
   Hierarquia estrita: codigo > download > passo a passo > ajuda > o que vem.
   E um RECIBO, nao uma comemoracao.
   ============================================================================= */

.success { background: var(--surface-page); }

.success__chip { margin-bottom: var(--space-5); }

.success__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
}


.success__sub {
  margin-top: var(--space-4);
  max-width: var(--measure-prose);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* --- Bloco do codigo -------------------------------------------------------
   HTML obrigatorio: <div class="code-block on-ink"> — a classe .on-ink de
   tokens.css e quem remapeia os tokens semanticos para o fundo Ink, e assim
   o botao "Copiar codigo" dentro dele acerta sozinho.                     */
.code-block {
  margin-top: var(--space-8);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.code-block__eyebrow {
  font-size: var(--fs-eyebrow);       /* 14px, nunca 12px */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);           /* #9AA0C8 — 7.09 sobre Ink */
}

.code-block__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  margin-block: var(--space-5);
}

/* O ENTREGAVEL DO FUNIL INTEIRO.
   O fluxo real e transcricao manual: le no celular, digita no PC do caixa.
   Por isso:
   - tabular-nums iguala os avancos (alinhamento em varias linhas);
   - slashed-zero + "zero" 1 desenha o zero CORTADO, que e o que de fato
     distingue 0 de O. CORRECAO da auditoria 08 (MEDIA): a spec afirmava que
     tnum ja resolvia essa ambiguidade — e falso, tnum so iguala larguras e
     nao altera desenho de glifo nenhum;
   - user-select:all faz um clique selecionar o codigo inteiro, inclusive
     sem JS;
   - o tracking largo separa os caracteres. */
.activation-code {
  font-family: var(--font-body);
  font-size: var(--fs-code);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-code);
  color: var(--text-strong);          /* branco sobre Ink — 18.08 */
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;
}

.code-block__copy { flex: none; }

/* Metadados do bloco: 16px, nunca 12/13px. A data de validade nao e
   metadado — e o prazo de uso do unico ativo que o funil entregou. */
.code-block__meta,
.code-block__sent {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);           /* #9AA0C8 — 7.09 */
  max-width: var(--measure-prose);
}

.code-block__sent { margin-top: var(--space-3); }

@media (min-width: 600px) {
  .code-block { padding: var(--space-8); }
  .code-block__row { flex-direction: row; align-items: center;
                     justify-content: space-between; }
}

/* --- Bloco do download ----------------------------------------------------- */
.download {
  margin-top: var(--space-8);
  background: var(--surface-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.download__icon { width: 4rem; height: 4rem; }

.download__cta { width: 100%; }

.download__meta {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.download__note {
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  max-width: var(--measure-prose);
}

/* Aviso "voce esta no celular / no Mac". NUNCA esconde nem bloqueia o botao:
   o caso mais comum e dono num MacBook com o caixa em Windows. */
.download__warn { margin-top: var(--space-2); }

@media (min-width: 600px) {
  .download { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .download__icon { grid-row: 1 / span 3; }
  .download__cta { width: auto; justify-self: start; }
}

/* --- Passo a passo --------------------------------------------------------- */
.howto { margin-top: var(--space-12); }

.howto__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
}

.howto__list { display: grid; gap: var(--space-5); margin-top: var(--space-6); }

.howto__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-accent);
  color: var(--text-link);            /* 7.92 */
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  flex: none;
}

.howto__step-title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--text-strong);
}

.howto__text { margin-top: var(--space-2); max-width: var(--measure-prose);
               color: var(--text-body); }

.howto__banner { margin-top: var(--space-3); }

.howto__after { margin-top: var(--space-6); max-width: var(--measure-prose); }

/* --- Bloco de ajuda -------------------------------------------------------- */
.help-card {
  margin-top: var(--space-12);
  background: var(--surface-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.help-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

.help-card__text { margin-top: var(--space-3); max-width: var(--measure-prose);
                   color: var(--text-body); }

.help-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 600px) {
  .help-card__actions { flex-direction: row; flex-wrap: wrap; }
}

/* --- O que acontece nos proximos dias -------------------------------------- */
.next15 { margin-top: var(--space-12); }

.next15__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

.next15__list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

.next15__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: var(--measure-prose);
  color: var(--text-body);
}

.next15__list .icon { color: var(--msf-indigo); margin-top: 0.15em; }

/* =============================================================================
   19. S15 · FOOTER (Ink)
   -----------------------------------------------------------------------------
   HTML: <footer class="site-footer on-ink" role="contentinfo">
   ============================================================================= */

.site-footer { padding-block: var(--space-16) var(--space-10); }

.site-footer__grid { display: grid; gap: var(--space-10); }

.site-footer__brand svg,
.site-footer__brand img { height: 1.75rem; width: auto; }

.site-footer__tagline {
  margin-top: var(--space-4);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);          /* branco — 18.08 */
}

.site-footer__desc {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);           /* #9AA0C8 — 7.09 */
  max-width: var(--measure-card);
}

.site-footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

.site-footer__list { display: grid; }

/* Alvo de toque: min-height 44px + inline-flex + align-items.
   CORRECAO da auditoria 08 (MEDIA): padding + line-height davam 41.6px,
   abaixo do minimo de 44 declarado pela propria spec. */
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Colunas viram <details> em mobile para nao gerar 20 telas de rodape. */
.site-footer__disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
  cursor: pointer;
  list-style: none;
  color: var(--text-strong);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.site-footer__disclosure > summary::-webkit-details-marker { display: none; }

.site-footer__disclosure > summary::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  margin-block-end: 0.25rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-footer__disclosure[open] > summary::after {
  transform: rotate(-135deg);
  margin-block-end: -0.25rem;
}

/* Aviso legal: 16px. Rodape legal NAO e caption — aviso que ninguem consegue
   ler nao protege ninguem, nem o usuario nem a empresa. */
.site-footer__legal {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-block-start: var(--border-inverse-subtle);
}

.site-footer__legal-title {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}

.site-footer__legal p {
  font-size: var(--fs-body-sm);       /* 16px */
  line-height: var(--lh-body);        /* 1.6  */
  color: var(--text-muted);           /* 7.09 */
  max-width: var(--measure-prose);
  text-align: start;                  /* nunca justificado */
}

.site-footer__legal p + p { margin-top: var(--space-4); }

/* Fica FORA do bloco de colunas (e' o dado cadastral, nao aviso), entao o
   seletor `p + p` acima nao o alcanca — a margem precisa ser explicita. */
.site-footer__identity {
  /* Separado por espaco, nao por regua: o paragrafo e' travado em --measure-prose
     e uma borda superior pararia no meio da faixa, parecendo corte. */
  margin-top: var(--space-10);
}

/* Aviso legal ocupa a largura inteira do rodape, em coluna unica (decisao do
   dono). Por isso a trava de --measure-prose e' liberada aqui: o texto usa toda
   a faixa em vez de deixar metade vazia.
   Os dois seletores precisam do prefixo .site-footer__legal para empatar em
   especificidade com a regra de --measure-prose acima e vencer pela ordem. */
.site-footer__legal .site-footer__legal-body p,
.site-footer__legal .site-footer__identity { max-width: none; }

.site-footer__copy {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-block-start: var(--border-inverse-subtle);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap-grid); }
  .site-footer__disclosure > summary { pointer-events: none; }
  .site-footer__disclosure > summary::after { display: none; }
}

/* =============================================================================
   20. BARRA FIXA DE CTA (mobile)
   -----------------------------------------------------------------------------
   CORRECAO da auditoria 08 (MEDIA): a barra e o unico elemento da pagina
   sobreposto a conteudo que rola por baixo, e a spec original nao lhe dava
   superficie nenhuma. Transparente ou semitransparente, o rotulo passaria por
   cima de texto, de cards brancos, do bloco Ink do S13 e da faixa ambar —
   contraste variavel pixel a pixel, exatamente o "texto sobre imagem" que a
   pagina afirma nao ter, e o unico ponto que o contrast-check.py nao
   conseguiria provar.

   PROIBIDO aqui: backdrop-filter e qualquer rgba com alpha no background.
   Com fundo solido o par auditavel continua sendo branco sobre #3A41D6
   (7.22:1) e a barra permanece verificavel.
   ============================================================================= */

.mobile-cta-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  background: var(--surface-card);            /* SOLIDO */
  border-block-start: var(--border-subtle);
  box-shadow: var(--shadow-bar);
  padding: var(--space-3) var(--container-pad)
           calc(var(--space-3) + env(safe-area-inset-bottom));
  transition: transform var(--dur-base) var(--ease-out);
}

.mobile-cta-bar__text {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}

/* Sem JS a barra fica sempre visivel (degradacao segura). Com JS, `.is-tucked`
   e adicionada no load e removida quando o hero sai da tela. */
.mobile-cta-bar.is-tucked { transform: translateY(110%); }

@media (max-width: 767px) {
  .mobile-cta-bar { display: block; }

  /* Espaco reservado DESDE O INICIO, para a barra nunca empurrar conteudo e
     nunca gerar CLS.

     A reserva vai no FOOTER, nao no <body>. No <body> ela viraria uma faixa
     off-white depois do rodape escuro: a barra tem ~112px e a reserva ~120px,
     entao sobrariam ~8px de off-white claro logo acima da barra, no fim da
     pagina. Estendendo o padding do proprio footer (que e Ink), o excedente
     que aparece acima da barra e a continuacao do rodape — invisivel.
     Toda pagina do site termina em .site-footer. */
  body.has-mobile-cta .site-footer {
    padding-bottom: calc(var(--space-10) + var(--control-h-lg) + var(--space-8)
                         + env(safe-area-inset-bottom));
  }
}

/* =============================================================================
   21. ALTO CONTRASTE FORCADO (Windows)
   -----------------------------------------------------------------------------
   O publico e Windows. O modo de alto contraste e real, nao hipotese.
   Nesse modo o SO descarta background-color e box-shadow, entao tudo que
   dependia so de fundo precisa ganhar borda.
   ============================================================================= */
@media (forced-colors: active) {
  .btn,
  .chip,
  .card,
  .plan,
  .step,
  .proof,
  .compare-card,
  .compare-note,
  .stepper,
  .nocharge,
  .help-card,
  .code-block,
  .download,
  .banner,
  .error-summary,
  .site-header__menu-panel,
  .mobile-cta-bar { border: 1px solid; }

  .segmented__label,
  .pricing-toggle__opt { border: 1px solid; }

  /* Estado selecionado nao pode depender so de cor de fundo. */
  .segmented__input:checked + .segmented__label,
  .pricing-toggle__opt.is-on { border: 3px solid; }

  :focus-visible { outline: 3px solid CanvasText; }

  /* Controles voltam ao desenho nativo do SO: a mask e o background-image do
     check somem em forced-colors. */
  .check__input,
  .field-select {
    appearance: auto;
    -webkit-appearance: auto;
  }

  .field__control--select::after { display: none; }

  /* A zebra da tabela some (background descartado). As bordas por linha, que
     ja estao em .compare th/td, e que garantem o rastreamento. */
  .compare tbody tr { border-block-end: 1px solid; }

  .plan--featured { border: 3px solid; }
}