/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · F4 knobs: stages=5 (ordem real do link), numeral=display-s na coluna esquerda, rule=2px ink entre estágios, art=Tier A/B por estágio
 * hero: tipográfico, left-bias, sem enrichment (a arte vive nos estágios)
 * theme: custom "ForSign" (herdado de tokens.css) · nav: N5 · footer: Ft2 · sistema compartilhado com a home
 * motion: revelação one-shot dos estágios e blocos · lift do CTA grande (2 primitivas; a sequência é 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); } }

/* ---------- Narrative Workflow · a jornada do link (F4) ---------- */
.journey { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xl); }
.journey__head { display: grid; gap: var(--space-md); }
.journey__head h2 { font-size: var(--text-display-s); max-width: 18ch; }
.journey__head p { color: var(--color-ink-2); max-width: 52ch; }

.stages { display: grid; gap: 0; }
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md);
  padding-block: var(--space-xl) var(--space-2xl);
  border-top: 2px solid var(--color-ink);   /* régua grossa numerada: a assinatura do Narrative Workflow */
}
.stage__n { font-family: var(--font-display); font-weight: 600; font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.stage__body { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.stage__body h3 { font-size: var(--text-xl); max-width: 18ch; }
.stage__body p { color: var(--color-ink-2); max-width: 52ch; }
.stage__body ul { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); max-width: 52ch; }
.stage__body li { padding-left: var(--space-md); position: relative; }
.stage__body li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.stage__body .link-arrow { justify-self: start; }
.stage__art { min-width: 0; color: var(--color-ink); display: grid; align-content: start; gap: var(--space-sm); }
.stage__art svg text { font-family: var(--font-display); fill: currentColor; }

@media (min-width: 40rem) {
  .stage { grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--space-lg); }
  .stage__art { grid-column: 2; }
}
@media (min-width: 60rem) {
  .stage { grid-template-columns: 5rem minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-2xl); }
  .stage__art { grid-column: 3; grid-row: 1; align-self: center; }
}

/* Estágio 1 · link curto + código */
.linkchip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); font-size: var(--text-sm); max-width: 100%; }
.linkchip__origin { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-accent-deep); background: var(--color-accent-soft); border-radius: var(--radius-pill); padding: 0 var(--space-xs); line-height: 1.6; white-space: nowrap; }
.linkchip__url { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); overflow-wrap: anywhere; }
.otp { display: grid; gap: var(--space-xs); padding: var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); }
.otp__label { font-size: var(--text-xs); color: var(--color-muted); }
.otp__boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 2.4rem)); gap: var(--space-xs); }
.otp__boxes span { aspect-ratio: 1; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); }
.otp__boxes span.is-filled { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-deep); }
.otp__foot { font-size: var(--text-xs); color: var(--color-ink-2); }

/* Estágio 2 · formulário com campo condicional */
.fform { 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); }
.fform__title { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.ffield { 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); }
.ffield__label { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-xs); }
.ffield__value { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 500; color: var(--color-ink); min-width: 0; }
.ffield__value--empty { color: var(--color-muted); font-weight: 400; }
.ffield__ok { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-accent-deep); white-space: nowrap; }
.ffield__ok svg { color: var(--color-accent); }
.ffield__hint { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-accent-deep); }
.ffield.is-conditional { background: var(--color-accent-soft); }
.ffield.is-conditional .ffield__label { color: var(--color-accent-deep); }

/* Estágio 3 · slots de anexo */
.slots { display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; 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); }
.slot__name { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); min-width: 0; }
.slot__meta { grid-column: 1; color: var(--color-muted); font-size: var(--text-xs); }
.slot__state { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-sm); white-space: nowrap; }
.slot__state.is-ok { background: var(--color-accent); color: var(--color-accent-ink); }
.slot__state.is-redo { border: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); }
.slot__reason { color: var(--color-ink-2); }

/* Estágio 4 · documentos em ordem + botão do app */
.signart { display: grid; gap: var(--space-md); justify-items: start; }
.docs { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); width: 100%; max-width: 22rem; }
.docs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; 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); color: var(--color-ink-2); }
.docs__n { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.docs__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs__state { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.docs li.is-done .docs__state { color: var(--color-accent-deep); }
.docs li.is-now { border-color: var(--color-ink); color: var(--color-ink); }
.docs li.is-now .docs__n { color: var(--color-ink); }
.mockbtn rect { fill: var(--color-signal); stroke: var(--color-ink); }   /* o botão real do app: amarelo com borda preta (único uso desenhado na página) */
.mockbtn text { fill: var(--color-ink); }

/* Estágio 5 · o pacote que chega */
.bundle { display: grid; gap: 0; font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.bundle li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); align-items: baseline; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.bundle__file { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink); white-space: nowrap; }
.bundle__meta { color: var(--color-muted); font-size: var(--text-xs); min-width: 0; }
@media (max-width: 40rem) { .bundle li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Para quem cria a operação (fundo paper-2) ---------- */
.builder { background: var(--color-paper-2); padding-block: var(--space-2xl) var(--space-3xl); }
.builder__inner { display: grid; gap: var(--space-xl); }
.builder__head { display: grid; gap: var(--space-md); }
.builder__head h2 { font-size: var(--text-display-s); max-width: 18ch; }
.builder__head p { color: var(--color-ink-2); max-width: 52ch; }
.builder__head .link-arrow { justify-self: start; }

/* Livro-razão das cinco etapas do assistente */
.ledger { display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); counter-reset: etapa; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); counter-increment: etapa; }
.ledger__step { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); display: flex; align-items: baseline; gap: var(--space-sm); }
.ledger__step::before { content: counter(etapa); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ledger p { color: var(--color-ink-2); max-width: 60ch; }
@media (min-width: 40rem) { .ledger li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }

/* Modelos e biblioteca: três tiles */
.kit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.kit .tile { background: var(--color-paper); }
.kit .tile__body h3 { font-size: var(--text-md); }
.kit .tile__body p { font-size: var(--text-base); }
.kit__note { font-size: var(--text-sm); color: var(--color-muted); }
.kit .tile__art { padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
.kit .tile__art svg { width: 100%; max-width: 16rem; height: auto; color: var(--color-ink); }
.kit .tile__art svg text { font-family: var(--font-display); fill: currentColor; }
.kit .tile__art svg .soft { fill: var(--color-accent-soft); }
.kit .tile__art svg .line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kit .tile__art svg .accent { stroke: var(--color-accent); }
@media (min-width: 60rem) { .kit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
.kit .tile__body .link-arrow { white-space: normal; }

/* ---------- Regras condicionais ---------- */
.rules { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xl); }
.rules__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.rules__copy { display: grid; gap: var(--space-md); align-content: start; }
.rules__copy h2 { font-size: var(--text-display-s); max-width: 18ch; }
.rules__copy p { color: var(--color-ink-2); max-width: 52ch; }
.actions { display: grid; gap: var(--space-xs); }
.actions li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-md); color: var(--color-ink-2); }
.actions__name { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.rules__art { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }

/* Cartão SE / ENTÃO */
.rulecard { display: grid; gap: var(--space-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-lg); font-size: var(--text-sm); box-shadow: 0 24px 48px -32px color-mix(in oklch, var(--color-shadow) 45%, transparent); }
.rulecard__title { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.rulecard__row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.rulecard__kw { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-accent-deep); padding-top: 0.35em; }
.rulecard__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.rulecard__chip { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0 var(--space-sm); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); white-space: nowrap; }
.rulecard__chip--op { border-style: dashed; color: var(--color-ink-2); }
.rulecard__chip--action { background: var(--color-accent); border-color: transparent; color: var(--color-accent-ink); }

/* Tabela de operadores por tipo de campo */
.ops { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ops caption { text-align: left; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); padding-bottom: var(--space-xs); }
.ops tr { border-top: var(--rule-hair) solid var(--color-rule); }
.ops tr:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.ops th, .ops td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; }
.ops th { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); width: 38%; }
.ops td { color: var(--color-ink-2); }
@media (max-width: 40rem) {
  .ops tr { display: grid; padding-block: var(--space-xs); }
  .ops th, .ops td { padding: var(--space-3xs) 0; width: auto; }
}
@media (min-width: 60rem) { .rules__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); } }

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