/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Catalogue · tiles=7 (3 full + 2×2), rows=hairline-gap, link=card-internal
 * hero: H2 diptych · knobs: ratio=6/6, right=Tier-A/B CSS+SVG art (cartão do link do assinante), divider=negative-space
 * theme: custom · vibe: "verde-petróleo, austero, prova do processo" · paper: oklch(98% 0.004 185) · accent: oklch(45% 0.08 185)
 * display: General Sans · body: Switzer · mono: JetBrains Mono (outlier: valores da spec sheet e trecho de API) · axes: light / geometric-sans / chromatic-other (verde-petróleo ~185°)
 * nav: N5 Floating pill · footer: Ft2 Inline single line (2 linhas) · enrichment: E5 custom illustration, Tier A/B, sem chrome
 * motion: revelação one-shot (hero + tiles) · traço da assinatura no hero (stroke-dashoffset, 1 vez) · lift do CTA grande (3 primitivas)
 * studied: no · context: explicit (público, ação, tom e cor respondidos pelo dono) · v1.1.0
 */

/* ---------- Hero — H2 diptych 6/6 ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: calc(var(--nav-height) + var(--space-2xl)) calc(var(--space-4xl) + var(--space-lg));  /* base pesada: fim ≥ 1,3× início */
  min-height: clamp(60vh, 78dvh, 88dvh);
}
.hero__copy { display: grid; gap: var(--space-lg); align-content: center; }
.hero h1 { font-size: var(--text-display-l); max-width: 20ch; }
.hero .lede { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xs); }

@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: calc(var(--nav-height) + var(--space-3xl)) calc(var(--space-4xl) + var(--space-2xl)); }
}

/* Cartão do link do assinante — Tier A CSS + Tier B SVG, sem chrome de navegador */
.hero__art { justify-self: center; width: 100%; max-width: 30rem; }
.linkcard {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -32px color-mix(in oklch, var(--color-shadow) 45%, transparent);
  padding: var(--space-lg);
  display: grid; gap: var(--space-md);
  font-size: var(--text-sm);
}
.linkcard__head { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.linkcard__mark { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); flex: none; }
.linkcard__title { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkcard__meta { margin-left: auto; color: var(--color-muted); white-space: nowrap; font-size: var(--text-xs); }
.linkcard__foot { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); }

.steps { display: grid; gap: var(--space-xs); }
.step {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "n t c" "n s c";
  column-gap: var(--space-sm); align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
}
.step__n { grid-area: n; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
.step__t { grid-area: t; font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
.step__s { grid-area: s; color: var(--color-muted); font-size: var(--text-xs); }
.step__check { grid-area: c; color: var(--color-accent); }
.step.is-done .step__n { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-deep); }
.step.is-now { background: var(--color-paper-2); grid-template-columns: 1.6rem minmax(0, 1fr); grid-template-areas: "n t" "n s" "sig sig"; row-gap: var(--space-xs); }
.step.is-now .step__n { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.sig { grid-area: sig; color: var(--color-ink); width: 140px; height: 52px; margin-left: 1.6rem; }
.sig__stroke { stroke-dasharray: 420; stroke-dashoffset: 420; animation: sig-draw 900ms var(--ease-out) 600ms forwards; }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }

.chip {
  display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 var(--space-xs);
  border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.01em; white-space: nowrap;
}

/* ---------- Logo wall — T2, células com hairline ---------- */
.logos { padding-block: var(--space-xl) var(--space-2xl); }
.logos__label { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.logos__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule); border-left: var(--rule-hair) solid var(--color-rule); }
.logos__list li { display: grid; place-items: center; padding: var(--space-md); min-height: 4.5rem; border-right: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); }
.logos__list img { width: auto; max-width: 100%; max-height: 28px; height: auto; filter: grayscale(1); opacity: 0.72; transition: opacity var(--dur-short) var(--ease-out); }
.logos__list li:hover img { opacity: 1; }
@media (min-width: 40rem) { .logos__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .logos__list { grid-template-columns: repeat(7, minmax(0, 1fr)); } .logos__list img { max-height: 32px; } }

/* Parceiros — 8 logos, grade em 4 colunas (2 linhas) em vez das 7 dos clientes */
.logos--partners { padding-top: 0; }
@media (min-width: 60rem) { .logos__list--partners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Prova em números — quarteto tipográfico separado por réguas ---------- */
.numbers { padding-bottom: var(--space-xl); }
.numbers__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xl);
}
.numbers__item { display: grid; gap: var(--space-2xs); margin: 0; }
.numbers__figure { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4vw + 1rem, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); }
.numbers__q { display: grid; gap: var(--space-3xs); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-2); }
.numbers__sub { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 40rem) { .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .numbers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .numbers__item { padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule-2); }
  .numbers__item:first-child { padding-left: 0; border-left: none; }
}

/* ---------- Tecnologia de alta performance — 6 quadrantes ---------- */
.quadrants { padding-bottom: var(--space-xl); }
.quadrants__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.quadrant { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: var(--space-xs); align-content: start; }
.quadrant__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-deep); }
.quadrant__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.02em; }
.quadrant__text { color: var(--color-ink-2); }
@media (min-width: 40rem) { .quadrants__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .quadrants__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }

/* ---------- Catálogo de tiles ---------- */
.head-hang { padding-block: var(--space-3xl) var(--space-xl); display: grid; gap: var(--space-xs); }
.head-hang h2 { font-size: var(--text-display-s); max-width: 20ch; }

.tiles { padding-bottom: var(--space-xl); }
.tiles__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.tile--full { display: grid; grid-template-columns: minmax(0, 1fr); }
.tile--full .tile__art { padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
.tile--half .tile__art { padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
.tile--half .tile__body h2 { font-size: var(--text-lg); }

@media (min-width: 60rem) {
  .tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .tile--full { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; min-height: 26rem; }
  .tile--full .tile__body h2 { font-size: var(--text-2xl); }
  .tile--full .tile__art { padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) 0; }
  .tile--half { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .tile--half .tile__art { align-items: end; }
}

/* Amostras de assinatura */
.specimen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); color: var(--color-ink); }
.specimen li { display: grid; gap: var(--space-xs); align-content: end; min-height: 6rem; padding: var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); }
.specimen__label { font-size: var(--text-xs); color: var(--color-muted); }
.specimen__text { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.1; }
.specimen svg { max-width: 100%; }

/* Formulário com regra condicional */
.formcard { display: grid; gap: var(--space-xs); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); padding: var(--space-md); font-size: var(--text-sm); }
.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); align-items: center; padding: var(--space-sm); border-radius: var(--radius-sm); }
.field__label { color: var(--color-muted); font-size: var(--text-xs); grid-column: 1 / -1; }
.field__value { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
.field__hint { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-accent-deep); }
.field.is-conditional { background: var(--color-accent-soft); }
.field--file .chip { justify-self: end; }

/* Lista de verificações antifraude */
.checklist { display: grid; gap: var(--space-2xs); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; min-height: 2.4rem; }
.checklist li + li { border-top: var(--rule-hair) solid var(--color-rule-2); }
.checklist svg { color: var(--color-accent); }
.checklist__v { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }

/* Linha do tempo da trilha */
.timeline { display: grid; gap: 0; font-size: var(--text-sm); border-left: var(--rule-hair) solid var(--color-rule); margin-left: var(--space-xs); }
.timeline li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) 0 var(--space-xs) var(--space-md); position: relative; color: var(--color-ink-2); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 0.95rem; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.timeline__t { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); padding-top: 0.15rem; }

/* Diagrama do Monitor */
.flow { width: 100%; max-width: 22rem; color: var(--color-ink); font-family: var(--font-display); }

/* Trecho de API — <pre> com moldura tipográfica, sem chrome de janela */
.code {
  margin: 0; padding: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55; color: var(--color-ink-2);
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.code__label { display: block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-xs); }

/* Marcas */
.brands { display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.brands li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); }
.brands__dot { grid-row: 1 / span 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.brands__dot--a { background: var(--color-accent); }
.brands__dot--b { background: var(--color-signal); }
.brands__name { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
.brands__meta { color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- Central de ajuda ---------- */
.help { padding-bottom: var(--space-3xl); }
.help__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-lg); }
.help__list li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.help__list a { display: flex; align-items: center; min-height: 3.25rem; padding-block: var(--space-sm); text-decoration: none; font-family: var(--font-display); font-weight: 500; color: var(--color-ink-2); transition: color var(--dur-short) var(--ease-out); }
.help__list a:hover { color: var(--color-accent-deep); }
@media (min-width: 60rem) { .help__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }

/* ---------- Planos + CTA ---------- */
.plans { background: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-4xl); }
.plans__inner { display: grid; gap: var(--space-lg); max-width: 56rem; }
.plans h2 { font-size: var(--text-display-s); max-width: 24ch; }
.plans .lede { max-width: 52ch; }
.plans__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sig__stroke { animation: none; stroke-dashoffset: 0; }
}