/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · knobs: nodes=4 (linear, HTML+SVG feito à mão), edges=3 (2 contínuas + 1 tracejada), legend=inline, node-links=âncoras das seções
 * hero: tipográfico, left-bias, sem enrichment (o mapa logo abaixo é a arte)
 * componentes: F3 spec sheet (Monitor) · F4 step sequence (fluxo) · F1 bento com .tile (volume) · prosa em colunas + .code (retorno) · FAQ
 * theme: custom "ForSign" (herdado de tokens.css) · nav: N5 · footer: Ft2 · sistema compartilhado com a home
 * motion: revelação one-shot por bloco · lift do CTA grande (2 primitivas; nada novo)
 * 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: 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); } }

/* ---------- Cabeçalhos de seção (compartilhado pelas quatro seções) ---------- */
.sec { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xl); }
.sec__head { display: grid; gap: var(--space-sm); }
.sec__head h2 { font-size: var(--text-display-s); max-width: 20ch; }
.sec__head p { color: var(--color-ink-2); max-width: 56ch; }
.sec__head .link-arrow { justify-self: start; }
.sec--alt { background: var(--color-paper-2); border-top: 0; }
.sec--alt .tile { background: var(--color-paper); }

/* ---------- Mapa (Map / Diagram) ---------- */
.mapsec { padding-block: 0 var(--space-3xl); display: grid; gap: var(--space-xl); }
.map { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); align-items: stretch; }
.map__node {
  display: grid; gap: var(--space-sm); align-content: start; height: 100%;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-lg);
  color: var(--color-ink); text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.map__node:hover { border-color: var(--color-accent); background: var(--color-paper-3); }
.map__node:active { border-color: var(--color-accent-deep); }
.map__where { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); }
.map__node h3 { font-size: var(--text-md); }
.map__node p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 32ch; }
.map__art { color: var(--color-ink); min-height: 4.5rem; display: grid; align-items: center; justify-items: start; }
.map__art svg { width: 100%; max-width: 11rem; height: auto; }
.map__art svg text { font-family: var(--font-display); }
.map__art .fill-soft { fill: var(--color-accent-soft); }
.map__art .fill-paper { fill: var(--color-paper); }
.map__art .mockbtn rect { fill: var(--color-signal); stroke: var(--color-ink); }   /* o botão real do app: amarelo com borda preta */
.map__art .mockbtn text { fill: var(--color-ink); }
.map__more { margin-top: auto; padding-top: var(--space-xs); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-accent); }
.map__more::after { content: " →"; }
.map__node:hover .map__more { text-decoration: underline; text-underline-offset: 0.18em; }

.map__edge { display: grid; justify-items: center; align-content: center; gap: var(--space-2xs); padding-block: var(--space-xs); text-align: center; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); }
.map__edge svg { width: 2.25rem; height: 2.25rem; color: var(--color-ink-2); }
.map__edge .e-h { display: none; }
.map__edge .e-v { display: block; }
.map__edge--back svg path { stroke-dasharray: 3 3; }
.map__edge span { max-width: 14ch; }

.map__foot { display: grid; gap: var(--space-md); align-items: center; }
.map__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.map__legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.map__legend svg { width: 2rem; height: 0.75rem; color: var(--color-ink-2); }
.map__legend .is-dash { stroke-dasharray: 3 3; }
.map__foot .btn { justify-self: start; }

@media (min-width: 60rem) {
  .map { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-xs); }
  .map__edge { width: 5.5rem; padding-block: 0; }
  .map__edge .e-h { display: block; }
  .map__edge .e-v { display: none; }
  .map__foot { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Monitor: spec sheet (F3) ---------- */
.mon__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.sheet { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.sheet tr { border-top: var(--rule-hair) solid var(--color-rule); }
.sheet tr:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: var(--space-md) var(--space-md) var(--space-md) 0; }
.sheet th { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); width: 26%; }
.sheet td { color: var(--color-ink-2); }
.sheet td.muted { font-size: var(--text-sm); color: var(--color-muted); width: 24%; }
.sheet code { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm); padding: 0 var(--space-2xs); white-space: nowrap; }
@media (max-width: 40rem) {
  .sheet tr { display: grid; padding-block: var(--space-sm); }
  .sheet th, .sheet td { padding: var(--space-3xs) 0; width: auto; }
}

/* Aparte: "Instalação acompanhada" */
.aside { display: grid; gap: var(--space-sm); align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--color-paper-2); border-radius: var(--radius-lg); }
.aside h3 { font-size: var(--text-md); }
.aside p { color: var(--color-ink-2); font-size: var(--text-sm); }
.aside .link-arrow { justify-self: start; }
.aside__list { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.aside__list li { padding-left: var(--space-md); position: relative; }
.aside__list 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) {
  .mon__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
}

/* ---------- Fluxos: step sequence (F4) ---------- */
.steps { margin: 0; padding: 0; list-style: none; display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.stage { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-accent-deep); min-width: 2.25rem; padding-top: 0.25em; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-md); }
.steps p { grid-column: 2; color: var(--color-ink-2); max-width: 56ch; }
.steps__tag { grid-column: 2; font-size: var(--text-xs); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; }

/* Trecho de API (mesma regra do .code da home) */
.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); }

@media (min-width: 60rem) {
  }

/* ---------- Volume: bento com .tile (F1) ---------- */
.vol { display: grid; gap: var(--space-xl); }
.vol__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.vol .tile { display: grid; }
.vol .tile__body h3 { font-size: var(--text-lg); }
.vol .tile__body p { color: var(--color-ink-2); max-width: 52ch; }
.vol .tile__body .link-arrow { justify-self: start; }
.tile__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; }
.facts { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.facts li { padding-left: var(--space-md); position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.facts .tnum { font-variant-numeric: tabular-nums; }
.tile__art { padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); color: var(--color-ink); }
.tile__art svg { width: 100%; max-width: 22rem; height: auto; }
.tile__art svg text { font-family: var(--font-display); }
.tile__art .fill-soft { fill: var(--color-accent-soft); }
.tile__art .fill-paper { fill: var(--color-paper); }
.tile__art .ink-soft { stroke: var(--color-rule); }
.tile__art .t-mono { font-family: var(--font-mono); }
.tile__art .t-muted { fill: var(--color-muted); }
.tile__art .t-ink { fill: var(--color-ink); }
.tile__art .t-accent { fill: var(--color-accent-deep); }
@media (min-width: 40rem) {
  .vol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--wide { grid-column: span 2; }
}
@media (min-width: 60rem) {
  .vol__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile--wide { grid-column: span 2; }
}

/* ---------- Retorno: prosa em colunas ---------- */
.back__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.back__col { display: grid; gap: var(--space-md); align-content: start; }
.back__col h3 { font-size: var(--text-md); }
.back__col p { color: var(--color-ink-2); max-width: 52ch; }
.back__col .link-arrow { justify-self: start; }
.back__col .code { margin-top: var(--space-xs); }
@media (min-width: 60rem) { .back__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }

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