/* Hallmark · pre-emit critique: P4 H5 E3 S5 R5 V4
 * Hallmark · genre: modern-minimal · macrostructure: Component Playground (adaptada a API: cada bloco = intenção → trecho real de requisição/resposta → prosa) · knobs: blocks=6, layout=prosa 5/7 código alternado, copy-button=nenhum (sem JS novo), preview=<pre class="code"> com rótulo e régua hairline
 * hero: tipográfico, left-bias, sem enrichment (os trechos de código são a imagem da página)
 * theme: custom "ForSign" (herdado de tokens.css) · nav: N5 · footer: Ft2 · sistema compartilhado com a home
 * motion: revelação one-shot dos blocos · lift do CTA grande (2 primitivas)
 * 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); } }

/* ---------- Trecho de API — <pre> com moldura tipográfica, sem chrome de janela (regra de home.css) ---------- */
.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); }

/* Código inline na prosa (mesmo papel do <pre>: código) */
.block code:not(.code) { font-family: var(--font-mono); font-size: 0.9em; color: var(--color-ink); background: var(--color-paper-2); border-radius: var(--radius-sm); padding: 0 var(--space-2xs); overflow-wrap: anywhere; }
.block--band code:not(.code) { background: var(--color-paper-3); }

/* ---------- Bloco do playground: intenção → código → prosa ---------- */
.block { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl) var(--space-3xl); }
.block--band { border-top: 0; background: var(--color-paper-2); }
.block--band + .block { border-top: 0; }

.play { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.play__text { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.play__text h2 { font-size: var(--text-display-s); max-width: 16ch; }
.play__text h3 { font-size: var(--text-lg); max-width: 20ch; }
.play__text p { color: var(--color-ink-2); max-width: 52ch; }
.play__text .link-arrow { justify-self: start; }
.play__code { display: grid; gap: var(--space-lg); min-width: 0; align-content: start; }
.play__wide { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 60rem) {
  .play { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); align-items: start; }
  .play--flip .play__text { order: 2; }
  .play--flip .play__code { order: 1; }
}

/* Cabeçalho de seção com dois sub-blocos (integrações) */
.block__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.block__head h2 { font-size: var(--text-display-s); max-width: 18ch; }
.block__head p { color: var(--color-ink-2); max-width: 52ch; }
.play + .play { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule-2); }

/* ---------- Ilustrações do produto (mesmo vocabulário da home: cartão Papel, régua 1px, acento único) ---------- */
.play__art { margin: 0; min-width: 0; display: grid; align-content: start; color: var(--color-ink); }
.devcard, .sbx, .flow, .opcard, .sdkcard, .hookcard {
  width: 100%; max-width: 36rem;
  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);
  font-size: var(--text-sm);
}
.block--band .devcard, .block--band .sbx, .block--band .flow, .block--band .sdkcard { background: var(--color-paper); }
.pill {
  display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 var(--space-sm); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); white-space: nowrap;
  border: var(--rule-hair) solid var(--color-rule);
}
.pill--on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.pill--off { background: transparent; color: var(--color-muted); border-style: dashed; }
.pill--ghost { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }

/* Painel do desenvolvedor */
.devcard { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.devcard__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); }
.devcard__mark { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); flex: none; }
.devcard__title { white-space: nowrap; font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
.devcard__meta { display: none; margin-left: auto; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-paper-2); }
.keyrow__txt { display: grid; gap: var(--space-3xs); margin-right: auto; min-width: 9.5rem; }
.keyrow__label { font-size: var(--text-xs); color: var(--color-muted); }
.keyrow__key { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; }
.keyrow.is-old { background: transparent; border: var(--rule-hair) dashed var(--color-rule); }
.keyrow.is-old .keyrow__key { color: var(--color-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.upload { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
.upload__hdr { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-deep); }
.upload__row { display: grid; grid-template-columns: minmax(0, auto) minmax(2rem, 1fr) minmax(0, auto); align-items: center; gap: var(--space-sm); }
.upload__file, .upload__id { display: grid; gap: var(--space-3xs); font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
.upload__file { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xs); align-items: center; }
.upload__file svg { grid-row: 1 / span 2; color: var(--color-ink); }
.upload__file small, .upload__id small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
.upload__id { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.upload__arrow { position: relative; height: 1.5px; background: var(--color-accent); }
.upload__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--color-accent); border-right: 1.5px solid var(--color-accent); transform: translateY(-50%) rotate(45deg); transform-origin: center; }

@media (min-width: 40rem) { .devcard__meta { display: block; } }

/* Operação criada: documento com tags + participantes em ordem */
.opcard { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.opcard__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); min-width: 0; }
.opcard__title { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcard__meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.opcard__body { display: grid; gap: var(--space-md); }
.opdoc { position: relative; display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-md); min-height: 11rem; background: var(--color-paper-2); border-radius: var(--radius-md); }
.opdoc__line { display: block; height: 6px; border-radius: 3px; background: var(--color-paper-3); }
.opdoc__line--m { width: 70%; } .opdoc__line--s { width: 44%; }
.opdoc__tag { justify-self: start; display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 var(--space-xs); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-deep); }
.opdoc__tag--sig { margin-top: var(--space-sm); background: var(--color-accent-soft); border: var(--rule-hair) dashed var(--color-accent); min-height: 2.4rem; padding: 0 var(--space-md); }
.opdoc__tag--rub { background: transparent; border: var(--rule-hair) dashed var(--color-accent); }
.opmembers { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.opmembers__label { font-size: var(--text-xs); color: var(--color-muted); }
.opmembers ol { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.opmembers li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); grid-template-areas: "n name" "n sub" "n how"; column-gap: var(--space-sm); row-gap: var(--space-3xs); padding: var(--space-sm); border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-rule); }
.opm__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); background: var(--color-accent-soft); color: var(--color-accent-deep); }
.opm__name { grid-area: name; font-family: var(--font-display); font-weight: 500; color: var(--color-ink); }
.opm__sub { grid-area: sub; font-size: var(--text-xs); color: var(--color-muted); }
.opm__how { grid-area: how; font-size: var(--text-xs); color: var(--color-accent-deep); font-family: var(--font-display); font-weight: 500; }
.opcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
.opcard__link { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); min-width: 0; overflow-wrap: anywhere; }
.opcard__id { margin-left: auto; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 40rem) { .opcard__body { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); align-items: stretch; } }

/* SDKs oficiais: pacotes + ciclo coberto */
.sdkcard { padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.sdkpkg { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.sdkpkg__lang { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-deep); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.sdkpkg__txt { display: grid; gap: var(--space-3xs); min-width: 0; }
.sdkpkg__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink); overflow-wrap: anywhere; }
.sdkpkg__meta { font-size: var(--text-xs); color: var(--color-muted); }
.sdklife { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
.sdklife__label { font-size: var(--text-xs); color: var(--color-muted); }
.sdklife ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-2xs) var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: sdk; }
.sdklife li { counter-increment: sdk; display: flex; align-items: center; gap: var(--space-xs); min-height: 2.25rem; font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink); }
.sdklife li::before { content: counter(sdk); flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-deep); font-weight: 600; font-size: var(--text-xs); }
.sdkcheck { display: flex; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.sdkcheck svg { flex: none; margin-top: 2px; color: var(--color-accent); }
.block--band .sdkcheck { background: var(--color-paper-2); }

/* Entrega de webhook + histórico */
.hookcard { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.hookcard__main { display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-accent-soft); }
.hookcard__what { font-family: var(--font-display); font-weight: 600; color: var(--color-accent-deep); }
.hookcard__sub { font-size: var(--text-xs); color: var(--color-accent-deep); }
.hookcard__ext { font-family: var(--font-mono); }
.hooklog { display: grid; gap: var(--space-xs); }
.hooklog__label { font-size: var(--text-xs); color: var(--color-muted); }
.hooklog ul { margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.hooklog li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hooklog__t { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.hooklog__ev { margin-right: auto; font-family: var(--font-display); font-weight: 500; color: var(--color-ink); min-width: 0; overflow-wrap: anywhere; }

/* Diagrama do kit SAP */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-paper-2); box-shadow: none; }
.flow__node { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "s t"; align-items: center; column-gap: var(--space-md); gap: var(--space-3xs) var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }
.flow__node--fs { background: var(--color-accent-soft); border-color: transparent; }
.flow__name { grid-area: n; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.2; color: var(--color-ink); }
.flow__node--fs .flow__name { color: var(--color-accent-deep); }
.flow__sub { grid-area: s; font-size: var(--text-xs); color: var(--color-muted); }
.flow__node--fs .flow__sub { color: var(--color-accent-deep); }
.flow__tag { grid-area: t; justify-self: end; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; }
.flow__node--fs .flow__tag { border-color: color-mix(in oklch, var(--color-accent-deep) 35%, transparent); color: var(--color-accent-deep); }
/* conectores: ida sólida (→), volta tracejada (←) */
.flow__link { display: flex; justify-content: center; gap: var(--space-2xl); padding-block: var(--space-2xs); }
.flow__a { position: relative; display: grid; align-items: center; min-height: 2.5rem; padding-left: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-2); font-family: var(--font-display); font-weight: 500; white-space: nowrap; }
.flow__a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--color-accent); }
.flow__a::after { content: ""; position: absolute; left: -3.25px; width: 7px; height: 7px; border-right: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent); }
.flow__a--go::after { bottom: 1px; transform: rotate(45deg); }
.flow__a--back::before { border-left-style: dashed; border-left-color: var(--color-ink-2); }
.flow__a--back::after { top: 1px; transform: rotate(-135deg); border-color: var(--color-ink-2); }
.flow__a--back { color: var(--color-muted); }
/* Contrato de teste com marca d'água + limites do plano Sandbox */
.sbx { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); background: var(--color-paper-2); box-shadow: none; }
.sbx__doc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); min-height: 14rem; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); box-shadow: 0 16px 32px -24px color-mix(in oklch, var(--color-shadow) 50%, transparent); }
.sbx__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); margin-bottom: var(--space-2xs); }
.sbx__line { display: block; height: 6px; border-radius: 3px; background: var(--color-paper-3); }
.sbx__line--m { width: 72%; }
.sbx__line--s { width: 46%; }
.sbx__sig { align-self: flex-start; width: 96px; height: 32px; color: var(--color-ink); margin-top: var(--space-md); margin-bottom: var(--space-md); flex: none; }
.sbx__chip { align-self: flex-start; white-space: nowrap; margin-top: auto; padding: 0 var(--space-xs); min-height: 1.6rem; display: inline-flex; align-items: center; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent-deep); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); }
.sbx__mark { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-24deg); font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; letter-spacing: 0.06em; color: color-mix(in oklch, var(--color-accent) 16%, transparent); border: 3px solid color-mix(in oklch, var(--color-accent) 16%, transparent); border-radius: var(--radius-md); padding: 0 var(--space-md); pointer-events: none; user-select: none; }
.sbx__limits { margin: 0; display: grid; align-content: center; }
.sbx__limits > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sbx__limits > div:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
.sbx__limits dt { color: var(--color-ink-2); font-size: var(--text-sm); }
.sbx__limits dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.sbx__limits .is-zero { flex-wrap: wrap; row-gap: var(--space-3xs); }
.sbx__limits .is-zero dt { flex: 1 0 100%; }
.sbx__limits .is-zero dd { color: var(--color-muted); }
.sbx__limits dd small { margin-left: var(--space-xs); font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 40rem) { .sbx { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: stretch; } }

/* ---------- Webhooks: lista de eventos + linha do tempo das retentativas ---------- */
.hookgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-md); }
.hookgrid h3 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.hookgrid > div > p { color: var(--color-ink-2); max-width: 52ch; margin-top: var(--space-md); }
@media (min-width: 60rem) { .hookgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); } }

.events { display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.events li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs) var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.events li code { justify-self: start; }
.events__note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); max-width: 52ch; }
@media (min-width: 40rem) { .events li { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; } }

.retry { display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.retry li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.retry__t { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.retry li.is-end .retry__t { color: var(--color-accent-deep); }

/* ---------- 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); }
.faq dd code { font-family: var(--font-mono); font-size: 0.9em; color: var(--color-ink); background: var(--color-paper-2); border-radius: var(--radius-sm); padding: 0 var(--space-2xs); }

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