/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Feature Stack · F2 knobs: pinned=left, content=cards tipográficos + SVG, steps=10/3/6
 * hero: tipográfico, left-bias, sem enrichment (a arte fica nos cards do stack)
 * theme: custom "ForSign" (herdado de tokens.css) · nav: N5 · footer: Ft2 · sistema compartilhado com a home
 * motion: revelação one-shot dos cards · lift do CTA grande (2 primitivas; o sticky/scroll é o movimento)
 * studied: no · context: explicit · v1.1.0
 */

/* ---------- Hero tipográfico ---------- */
.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: 16ch; }
.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); } }

/* ---------- Feature Stack — F2 ---------- */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.stack__pin { display: grid; gap: var(--space-md); align-content: start; }
.stack__pin h2 { font-size: var(--text-display-s); max-width: 16ch; }
.stack__pin p { color: var(--color-ink-2); max-width: 46ch; }
.stack__pin .link-arrow { justify-self: start; }
.stack__scroll { display: grid; gap: var(--space-md); min-width: 0; }

@media (min-width: 60rem) {
  .stack { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
  .stack__pin { position: sticky; top: calc(var(--nav-height) + var(--space-xl)); align-self: start; z-index: var(--z-base); }
}

/* Card de tipo de assinatura */
.tcard {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-paper-2); border-radius: var(--radius-lg);
}
.tcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.tcard h3 { font-size: var(--text-md); }
.tcard__where { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.tcard__beta { font-size: var(--text-xs); font-family: var(--font-display); font-weight: 500; color: var(--color-accent-deep); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); padding: 0 var(--space-xs); line-height: 1.5; }
.tcard p { color: var(--color-ink-2); max-width: 52ch; }
.tcard__art { color: var(--color-ink); display: grid; align-items: center; justify-items: start; min-height: 3rem; }
.tcard__art svg text { font-family: var(--font-display); }
.mockbtn rect { fill: var(--color-signal); stroke: var(--color-ink); }   /* o botão real do app: amarelo com borda preta */
.mockbtn text { fill: var(--color-ink); }
.tcard__text { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; }
.tcard__mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); }
.tcard__seal { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

@media (min-width: 40rem) {
  .tcard { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head art" "body art"; column-gap: var(--space-lg); align-items: center; }
  .tcard__head { grid-area: head; }
  .tcard p { grid-area: body; }
  .tcard__art { grid-area: art; justify-items: end; min-width: 9rem; }
}

/* Lista ordinal (ordem de assinatura) */
.order { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.order 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); }
.order__n { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.order__n.is-last { color: var(--color-accent-deep); }

/* Verificações do carimbo autenticado */
.verify { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.verify li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-height: 2rem; color: var(--color-ink-2); }
.verify svg { color: var(--color-accent); }

/* ---------- Validade jurídica (prosa) ---------- */
.legal { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-lg); }
.legal h2 { font-size: var(--text-display-s); max-width: 18ch; }
.legal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.legal__col { display: grid; gap: var(--space-md); align-content: start; }
.legal__col h3 { font-size: var(--text-md); }
.legal__col p { color: var(--color-ink-2); max-width: 52ch; }
.legal__col ul { display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.legal__col li { padding-left: var(--space-md); position: relative; }
.legal__col li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
@media (min-width: 60rem) { .legal__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); } }

/* ---------- 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); }