/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Conversational FAQ · knobs: open Q/A (sem accordion), divider=hairline, pergunta à esquerda/resposta à direita a partir de 60rem, 1 ilustração pequena por resposta
 * hero: tipográfico, left-bias, sem enrichment (a arte fica nas respostas)
 * theme: custom "ForSign" (herdado de tokens.css) · nav: N5 · footer: Ft2 · sistema compartilhado com a home
 * motion: revelação one-shot de cada pergunta · lift do CTA grande (2 primitivas; nada de expandir/colapsar)
 * studied: no · context: explicit · v1.1.0
 */

/* ---------- Hero tipográfico (mesma regra da landing 1) ---------- */
.lhero { padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-lg); display: grid; gap: var(--space-lg); min-height: clamp(50vh, 62dvh, 72dvh); align-content: center; }
.lhero__kicker { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-accent-deep); }
.lhero h1 { font-size: var(--text-display); max-width: 14ch; }
.lhero .lede { max-width: 46ch; }
.lhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.lhero__jump { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.lhero__jump a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--color-ink-2); text-decoration: none; }
.lhero__jump a:hover { color: var(--color-ink); text-decoration: underline; }
@media (min-width: 60rem) { .lhero { padding-block: calc(var(--nav-height) + var(--space-3xl)) var(--space-xl); } }

/* ---------- Entrevista: Conversational FAQ, perguntas abertas ---------- */
.interview { border-top: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-xl); }

.qa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-2xl); scroll-margin-top: calc(var(--nav-height) + var(--space-xl)); }
.qa + .qa { border-top: var(--rule-hair) solid var(--color-rule); }
.qa__q { font-size: var(--text-display-s); max-width: 18ch; }
.qa__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); min-width: 0; }
.qa__a { display: grid; gap: var(--space-md); align-content: start; }
.qa__a p { color: var(--color-ink-2); max-width: 58ch; }
.qa__a .link-arrow { justify-self: start; }
.qa__fig { color: var(--color-ink); display: grid; align-content: start; justify-items: start; min-width: 0; }

@media (min-width: 40rem) {
  .qa__body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-xl); }
  .qa__fig { justify-items: end; max-width: 14.5rem; }
}
@media (min-width: 60rem) {
  .qa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); padding-block: var(--space-3xl); }
  .qa__q { max-width: 14ch; }
  .qa__body { grid-template-columns: minmax(0, 1fr); }
  .qa__fig { justify-items: start; max-width: none; padding-top: var(--space-xs); }
}

/* Ilustrações à mão: traço 1.5px currentColor, preenchimentos em accent-soft/paper */
.art { max-width: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art text { fill: var(--color-ink); stroke: none; font-family: var(--font-display); }
.art .art__muted { fill: var(--color-muted); }
.art .art__mono { font-family: var(--font-mono); font-weight: 500; }
.art rect { fill: var(--color-paper); }
.art .art__fill { fill: var(--color-accent-soft); stroke: none; }
.art .art__dot { fill: currentColor; stroke: none; }
.art .art__check { stroke: var(--color-accent); stroke-width: 2.2; }
.art .art__track { fill: var(--color-paper-3); stroke: none; }
.art .art__bar { fill: var(--color-accent); stroke: none; }
.art .art__field { fill: var(--color-paper); stroke: var(--color-rule); }
.art--code .is-cursor { stroke: var(--color-accent); stroke-width: 2; }
.art--geo path { stroke: currentColor; }
/* O único botão amarelo desenhado da página: o "Confirmar" do diálogo de desbloqueio, igual ao botão primário do app */
.art .art__signal { fill: var(--color-signal); stroke: var(--color-ink); }

/* Política por participante (ilustração só com CSS) */
.policy { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); width: 100%; max-width: 22rem; }
.policy li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm); }
.policy__who { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.policy__what { color: var(--color-ink); }
.policy__what--none { color: var(--color-muted); }

/* Eventos da trilha (ilustração só com CSS; mono só nos horários) */
.trail { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; font-size: var(--text-sm); width: 100%; max-width: 22rem; border-top: var(--rule-hair) solid var(--color-rule); }
.trail li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.trail__t { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }

/* ---------- Perguntas ---------- */
.faq { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-lg); }
.faq h2 { font-size: var(--text-display-s); }
.faq dl { margin: 0; display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.faq dt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); padding-top: var(--space-lg); }
.faq dd { margin: 0; padding: var(--space-xs) 0 var(--space-lg); color: var(--color-ink-2); max-width: 64ch; border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq dd a { color: var(--color-accent-deep); }

/* ---------- CTA final (mesmo bloco da home) ---------- */
.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); }