/* The landing, the privacy notice and the 404 (F22 §10). Only var(--…) from tokens.css: no colour, no family name, no
   pixel size for a font that the tokens already have (check-tokens enforces the first two). Light only, with one dark
   block (ink). Mobile first: 400 px is the base, the rules for wider screens come after. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  /* F27a §9.1: the header is fixed from 48em (about 4.5rem tall); an anchor or a focused control lands below it. */
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  /* F24a §1 (decisão [P2]): the sans token is shared with the portal, unchanged, so the landing uses the
     display token for EVERYTHING, body text included — this file never reads the sans one. */
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}

/* F24a §4: the hero h1 and the section h2 are weight 800 (so the preload of the 800 file is actually used), with
   their own tracking; h1 is also set a bit tighter (0.94). h3 (card and FAQ titles) stays at 700. */
h1 {
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

h2 {
  font-weight: 800;
  letter-spacing: -0.05em;
  font-size: var(--text-display-2-sm);
}

p {
  margin: 0;
}

/* F27b (Lighthouse LCP): the landing draws Schibsted in 400, 600 and 800 only. Bold text is 600 (not the 700 the browser
   would ask for), and what used to be 500 is 400, so two font files (500 and 700, ~70 KB) are not downloaded before the
   first view is complete. */
strong,
b,
th {
  font-weight: 600;
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.2em;
}

.mono {
  font-family: var(--font-mono);
}

.nowrap {
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* F24a §1: the ring sits OUTSIDE the control (outline-offset: 3px), so it is measured against the ground it falls
   on (--color-focus-ring on --color-bg/--color-surface, ~18-19:1) rather than against the control's own colour (a
   cobalto button would drop it to ~1:1). Inside the dark block (.dark) the ink ring would vanish on ink, so that
   block overrides the colour to --color-focus-ring-inverse (never the plain ring there — landingPairs only has the
   dark-block row for the inverse one). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.dark :focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

.skip {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.skip:focus {
  top: var(--space-3);
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--space-4);
}

.narrow {
  max-width: 48rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-touch);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-surface);
}

.btn-lg {
  padding: 0 var(--space-6);
  font-size: var(--text-lg);
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* ---------- Header ---------- */

/* F24a S2 (spec §5 item 1, pedido do Maestro): filete de 2px em tinta embaixo do cabeçalho, nas páginas. F27a: o seletor
   "Para você · Para empresas" entra no cabeçalho de todas, e abaixo de 48em o cabeçalho deixa de ser fixo (3 linhas: logo
   e menu, seletor, ação; fixo, ele comeria a tela). */
.site-header {
  position: static;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-ink);
}

@media (min-width: 48em) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

/* O botão "Seja parceiro" do CABEÇALHO é em tinta (o do herói continua cobalto, --color-primary, intocado — isto
   só sobrescreve a instância de dentro do .site-header). Hover com --color-text-muted, 6,73:1 de branco sobre ela
   (reaproveita um token já medido, nenhum valor novo). */
.site-header .btn-primary {
  background: var(--color-ink);
}

.site-header .btn-primary:hover {
  background: var(--color-text-muted);
}

/* One flex row that wraps: below 48em it is [logo · menu] / [selector] / [action] / [open menu]; from 48em the first
   three share the row and the open menu goes to a row of its own; above 1100 px the page nav sits in the row and the
   menu button is gone (spec §2/§8: the page navigation hides at 1100 px). */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-1);
}

@media (min-width: 48em) {
  .bar {
    min-height: 4rem;
    padding-block: var(--space-2);
  }
}

.bar-fill {
  flex: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  order: 1;
  min-height: var(--size-touch);
  margin-right: auto;
}

.brand img {
  display: block;
  height: 2rem;
  width: auto;
}

/* Present from the first paint but invisible until landing.js adds .menu-ready: a display:none button made the header's
   second row appear after the script ran, and the page below jumped by its height (Lighthouse CLS on the /). */
.menu-btn {
  display: inline-flex;
  align-items: center;
  visibility: hidden;
  order: 4;
  min-height: var(--size-touch);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.menu-ready .menu-btn {
  visibility: visible;
}

/* The selector: a pill with two links, the current one filled in ink. The links keep 44 px (the spec's §9.1 target). */
.persona-switch {
  display: inline-flex;
  flex: 0 0 auto;
  order: 2;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.persona-switch a {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.persona-switch a:hover {
  color: var(--color-primary);
}

.persona-switch a.is-on,
.persona-switch a.is-on:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

.bar > .btn {
  flex: 1 1 0;
  order: 3;
}

/* Hidden until the menu opens: shown by default, the nav stood open (a tall header) until landing.js added .menu-ready,
   and the whole page jumped up when it closed (the Lighthouse CLS). Without script the page nav is simply absent below
   1101 px; the footer carries the same links. */
.nav {
  display: none;
  flex-direction: column;
  order: 5;
  width: 100%;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: var(--size-touch);
  color: var(--color-ink);
  font-weight: 400;
  text-decoration: none;
}

.nav a:hover {
  color: var(--color-primary);
}

.nav a {
  white-space: nowrap;
}

/* The / has two more links ("O que é USDC", "Segurança"); in the header row they fit from 1240 px. Between 1101 and 1239
   px they would wrap the labels or push the action out, so only the menu (<= 1100 px) and the wide row show them. */
@media (min-width: 1101px) and (max-width: 1239px) {
  .nav .nav-wide {
    display: none;
  }
}

.menu-ready .nav {
  display: none;
}

.menu-ready .nav.is-open {
  display: flex;
  padding-bottom: var(--space-3);
}

/* The support pages have no script and no menu button: their short nav shows from 1101 px only. */
@media (max-width: 1100px) {
  .bar-compact .nav {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: var(--space-10) 0 var(--space-8);
}

/* The dotted grid, only here and only faint. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  opacity: 0.25;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.eyebrow {
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1 {
  font-size: var(--text-display-1-sm);
}

h1 .accent {
  color: var(--color-primary);
}

/* Herói (gate do Argus, 2026-10-08): as duas frases aprovadas ("Do real ao dólar digital." / "Em qualquer lugar.") cada
   uma na sua linha — a 2ª é um bloco, não texto corrido — e as linhas equilibradas, sem palavra órfã. Só o herói: as
   outras páginas têm o seu h1. */
.hero h1 {
  text-wrap: balance;
}

.hero h1 .accent {
  display: block;
  color: var(--color-primary);
}

@media (max-width: 29.99em) {
  .hero h1 {
    font-size: var(--text-display-1-xs);
  }
}

/* Tamanhos medidos (Chrome headless, a página construída, 2026-10-08), sempre <= 3 linhas e sem palavra sozinha: 34 px
   abaixo de 480 px (2 linhas a 400); 64 px entre 640 e 767 px (a 78 px o "lugar." ficava sozinho a 640-679 px); 66 px a
   partir de 75em, onde a coluna do herói tem 560 px (a 78 px dava 4 linhas; a 68 px ainda dava 4 a 1200 px). */
@media (min-width: 40em) and (max-width: 47.99em) {
  .hero h1 {
    font-size: var(--text-display-3);
  }
}

@media (min-width: 75em) {
  .hero h1 {
    font-size: var(--text-display-1-md);
  }
}

/* F24a S2 v1.8 (achado 2 do Argus, gate da S2F): a 2ª linha do título de Parceiros (spec §5 item 5) é a ÚNICA
   .accent dentro do bloco escuro — sem esta regra ela herdava a cor do texto (branco), não --color-accent-bright
   (7,57:1 sobre a tinta, já em landingPairs). */
.dark h2 .accent {
  display: block;
  color: var(--color-accent-bright);
}

.lede {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 38rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Linha de provas do herói (2026-10-08): Plex Mono pequeno, no texto secundário (--color-text-muted sobre --color-bg,
   par já medido). SEMPRE empilhada, um item por linha: a coluna do herói tem 560 px em qualquer computador e a frase
   inteira nunca cabe numa linha. Os " · " ficam no HTML (texto e cópia) e se escondem. */
.proof {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.proof .sep {
  display: none;
}

/* F24a §5.2: the small order-book card lives IN the hero's text column (the big section is gone, P4). Two rows,
   marked "exemplo ilustrativo". */
.order-preview {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: 28rem;
}

.order-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.order-preview-title {
  font-weight: 600;
}

.order-preview-caption {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.order-preview-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* F24a §1: the "3/3 pontas" selo, the one place --color-primary-subtle is used (contrast pair in pairs.ts). */
.badge-settled {
  padding: 0 var(--space-2);
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-primary-hover);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- The globe (F24a §6; S1 fills, S2 only lays out the static shell) ---------- */

.globe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* F24a S2 v1.7 (achado b do Argus, 2ª volta — pedido do Maestro): o lado a lado só entra a 75em, não 64em — a
   820 + 560 de texto + 48 de gap + margens dá ~1200px (75em); abaixo disso o globo empilha (100%, até 560px,
   centrado). Isto diverge da spec §5.2 ("abaixo de 64em") por uma razão medida: a 64em a coluna do globo ficava
   espremida a ~368px ao lado do texto fixo de 560px — quase do tamanho de um telefone — deixando os rótulos
   desproporcionais quando dimensionados para caber ali. Meridian registra no changelog. */
.globe-svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 74.99em) {
  .globe-svg {
    max-width: 35rem;
  }
}

.globe-caption {
  max-width: 28rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.globe-halo {
  fill: var(--color-primary);
  opacity: 0.1;
}

.globe-disc {
  fill: var(--color-globe-disc);
}

.globe-shade {
  opacity: 0.35;
}

.globe-shade-stop-near {
  stop-color: var(--color-globe-disc-edge);
  stop-opacity: 0;
}

.globe-shade-stop-far {
  stop-color: var(--color-globe-shade);
  stop-opacity: 1;
}

.globe-rim {
  fill: none;
  stroke: var(--color-globe-rim);
  stroke-width: 1;
}

.globe-graticule {
  fill: none;
  stroke: var(--color-globe-graticule);
  stroke-width: 1;
}

.globe-dots-far {
  stroke: var(--color-globe-dot-far);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}

.globe-dots-mid {
  stroke: var(--color-globe-dot-mid);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}

.globe-dots-near {
  stroke: var(--color-globe-dot-near);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.globe-brazil {
  stroke: var(--color-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
  animation: globe-brazil-blink 5.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .globe-brazil {
    animation: none;
    opacity: 1;
  }
}

@keyframes globe-brazil-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.globe-hub-dot {
  fill: var(--color-primary);
}

/* F24a S2 v1.8 (achado 3 do Argus, gate da S2F — medido ao vivo nas 5 larguras): quatro faixas agora, não três —
   a 3ª (≥75em) crescia sem teto e passava de 16px já a ~1366px (o Argus mediu 16,5 lá, 18,2 a 1440). O --hero
   .wrap tem o seu próprio teto em 92rem (1472px: dist. o conteúdo chega a 816px de globo, perto do viewBox de
   820 — o Argus confirmou "SVG para em 816px" a partir de ~1536px de janela), então a 4ª faixa (≥84em = 1344px)
   cobre esse platô com um valor menor.
   - < 40em (só o hub): o Argus mediu o globo a 328px numa janela de 360px (não 360 — os 2×16px de respiro da
     faixa entram), 368px a 400. 28 unidades: 328×28/820 ≈ 11,2px; 400×28/820 ≈ 13,66px.
   - 40em–74.99em (empilhado, capado em 560px): 18 unidades × 560/820 ≈ 12,3px (medido ao vivo pelo Argus a 1024).
   - 75em–83.99em (lado a lado, 520 a ~1343px de globo): 19 unidades, 12,05 a 15,9px (medido pelo Argus: 12,6 a
     1200, 14,5 a 1280, 15,2 a 1312).
   - ≥ 84em (o platô de 688 a 816px): 15 unidades, 688×15/820 ≈ 12,58px a 1344×15/820, até 816×15/820 ≈ 14,9px no
     teto. Proposta do Argus, aceite pelo Maestro. */
.globe-hub-label {
  fill: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: 0.04em;
}

@media (min-width: 40em) {
  .globe-hub-label {
    font-size: 18px;
  }
}

@media (min-width: 75em) {
  .globe-hub-label {
    font-size: 19px;
  }
}

@media (min-width: 84em) {
  .globe-hub-label {
    font-size: 15px;
  }
}

.globe-arc-glow {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 5;
  stroke-linecap: round;
}

.globe-arc-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.globe-arc-head {
  fill: var(--color-ink);
}

.globe-arc-ping {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
}

.globe-arc-dest {
  fill: var(--color-ink);
}

/* Os rótulos de capital ficam ocultos abaixo de 40em (§6.8, injetado pelo globe.js do Rivet): o valor base aqui
   só importa a partir dos 40em, onde já é igual ao do hub (mesma conta, 18 unidades ≈ 12,3px a 560px). */
.globe-arc-label {
  fill: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.04em;
}

@media (min-width: 75em) {
  .globe-arc-label {
    font-size: 19px;
  }
}

@media (min-width: 84em) {
  .globe-arc-label {
    font-size: 15px;
  }
}

/* ---------- Rails ---------- */

.trails {
  padding: var(--space-5) 0;
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  text-align: center;
}

.trails-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.trails-label {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}


/* ---------- Para quem é (2026-10-08, molde E) ---------- */

.kicker {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

.profiles {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}

.profiles li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.profiles h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.profiles p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

@media (min-width: 48em) {
  .profiles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

/* ---------- The dark block ---------- */

.dark {
  padding: var(--space-18) 0;
  background: var(--color-ink);
  color: var(--color-surface);
  scroll-margin-top: 4rem;
}

.dark h2 {
  max-width: 40rem;
}

.dark a {
  color: var(--color-accent-bright);
}

/* F24a §5 item 4 (pedido do Maestro): "Como funciona" não é mais o bloco escuro — números 01-04 em Plex Mono 500,
   na primária (a escala "número de passo" da spec §4), em LINHAS com filete, não em caixas de grade. */
.steps {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.steps li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.steps li:first-child {
  padding-top: 0;
  border-top: none;
}

.step-n {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
}

/* Linha sob os 4 passos (F25): texto secundário do molde, sem caixa. --color-text-muted sobre --color-bg (par medido:
   6,4:1). Quebra em qualquer largura, sem largura fixa: a 400 px não há rolagem lateral. */
.steps-note {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  overflow-wrap: break-word;
}

/* ---------- Sections ---------- */

.section {
  padding: var(--space-18) 0;
  scroll-margin-top: 4rem;
}

/* F27a §9.2: the alternate section is --color-surface-alt, set off by a soft rule instead of the old white band. */
.section-alt {
  background: var(--color-surface-alt);
  border-block: 1px solid var(--color-rule-soft);
}

/* F24a S2 v1.8 (achado 1 do Argus, gate da S2F — falha AA): --color-text-muted sobre --color-ink mede 2,87:1,
   abaixo do piso de 4,5:1 (só --color-text-on-ink-muted, 9,9:1, vale como texto secundário dentro de .dark — a
   regra geral que prende isso vem logo abaixo). */
.dark .section-lede {
  color: var(--color-text-on-ink-muted);
}

.section-lede {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 38rem;
}

/* F24a §5 item 5 (pedido do Maestro): "Parceiros" é o bloco escuro agora — 4 colunas sem caixa, só um filete
   superior em --color-accent-bright (nunca como texto sobre claro: só vale aqui, dentro de .dark). */
.cols-4 {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}

.cols-4 li {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-accent-bright);
}

.cols-4 h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.cols-4 p {
  margin-top: var(--space-2);
  color: var(--color-text-on-ink-muted);
}

/* F24a §5 item 6 (pedido do Maestro): a tabela de 5 linhas da Segurança — rótulo (th) à esquerda, descrição (td) à
   direita, filete DECORATIVO de --color-rule-subtle entre linhas (nunca borda de campo: §2 do contrato). */
.security-table {
  margin-top: var(--space-8);
  width: 100%;
  border-collapse: collapse;
}

.security-table tr {
  border-top: 1px solid var(--color-rule-subtle);
}

.security-table tr:first-child {
  border-top: none;
}

.security-table th,
.security-table td {
  padding: var(--space-4) 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.security-table th {
  width: 38%;
  padding-right: var(--space-6);
  color: var(--color-ink);
  font-weight: 600;
}

.security-table td {
  color: var(--color-text-muted);
}

@media (max-width: 39.99em) {
  .security-table tr {
    display: grid;
    gap: var(--space-1);
  }

  .security-table th,
  .security-table td {
    display: block;
    width: auto;
    padding: 0;
  }

  .security-table th {
    padding-top: var(--space-4);
  }

  .security-table td {
    padding-bottom: var(--space-4);
  }
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: var(--space-6);
  border-top: 2px solid var(--color-ink);
}

.faq details {
  border-bottom: 1px solid var(--color-rule-soft);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--size-touch);
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex: none;
  color: var(--color-primary);
  font-size: var(--text-2xl);
  line-height: 1;
}

.faq details[open] summary::after {
  content: '\2212';
}

.faq details p {
  max-width: 52rem;
  padding-bottom: var(--space-5);
  color: var(--color-text-2);
}

/* ---------- Form ---------- */

.form-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.form-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
}

.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

/* F24a S2 (spec §5 item 8, pedido do Maestro): campos com SUBLINHADO de 2px em tinta, sem caixa nem raio — o
   sublinhado É a borda do campo (tinta sobre --color-bg/--color-surface passa 3:1 de sobra, 18,44:1). Ids, labels,
   .decoy e o resto do formulário ficam CONGELADOS; só este estilo muda. */
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: var(--size-touch);
  padding: var(--space-2) 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-ink);
  border-radius: 0;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base);
}

.field textarea {
  resize: vertical;
}

/* The native select ignores height and padding on some platforms; the arrow is drawn here with two gradients. */
.field select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-bottom-color: var(--color-danger);
}

.hint {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.field-error,
.form-error {
  margin-top: var(--space-1);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 600;
}

.form-error {
  margin-bottom: var(--space-3);
}

.field-check {
  display: grid;
  grid-template-columns: var(--size-touch) 1fr;
  align-items: start;
}

.field-check input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.6rem auto 0;
  accent-color: var(--color-primary);
}

.field-check label {
  margin: 0;
  padding: var(--space-2) 0;
  font-weight: 400;
}

.field-check .field-error {
  grid-column: 1 / -1;
}

/* The decoy is off the screen, never display:none: a robot that skips hidden fields would skip it, and one that reads
   the page like a person fills it in. */
.decoy {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success {
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.3;
}

.form-success:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* ---------- Final call (F27a: the ink block, copy on the left and the action on the right) ---------- */

.final {
  padding: var(--space-18) 0;
}

.final h2 {
  max-width: 52rem;
  margin: 0;
  font-size: var(--text-display-3-sm);
}

.final-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}

.final-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.final-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
  font-weight: 600;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: var(--space-12) 0 var(--space-6);
  background: var(--color-bg);
  border-top: 2px solid var(--color-ink);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
}

.footer-brand p {
  max-width: 20rem;
  color: var(--color-text-2);
}

/* F27a §2: four columns of links (Produto · Ajuda · Empresa · Legal), 2 × 2 at 1100 px and below, one column at 640. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.footer-title {
  margin-bottom: var(--space-2);
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col a {
  display: flex;
  align-items: center;
  min-height: var(--size-touch);
  color: var(--color-ink);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* The legal block (§4.10), in the eight pages: soft rule above, supporting text. */
.legal-block {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule-soft);
  color: var(--color-text-2);
  font-size: var(--text-sm);
}

.legal-block a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
  color: inherit;
}

.legal {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------- Privacy notice and the 6 support pages (F24a §5.1: molde .prose refeito uma vez) ---------- */

.prose {
  padding-block: var(--space-10);
  max-width: 68ch;
}

.prose-eyebrow {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prose h1 {
  font-size: var(--text-display-3-sm);
}

.prose-head {
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-ink);
}

.version {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* F24a §5.1 (pedido do Maestro): a grade da direção E — título da seção à esquerda (1fr), texto à direita (2fr),
   separados por filetes de 1 px. Vale para o corpo (.prose-body, as seções h2+conteúdo) E para as cláusulas da
   privacidade (.prose ol > li): cada "linha" é a mesma grade de 2 colunas; abaixo de 40em ela empilha. */
.prose ol {
  margin: var(--space-6) 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: clause;
  display: grid;
  gap: 0;
}

.prose ol > li {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  counter-increment: clause;
}

.prose ol > li:first-child {
  padding-top: 0;
  border-top: none;
}

.prose ol > li > h2 {
  grid-column: 1;
}

.prose ol > li > p {
  grid-column: 2;
  margin-top: 0;
}

/* Privacidade e termos (F24a §5.1): o número da cláusula em Plex Mono, na primária, junto do título — a coluna
   da esquerda é o título, então o número entra nele, não num indent avulso. */
.prose ol > li > h2::before {
  content: counter(clause) '.';
  margin-right: 0.4em;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 500;
}

.prose h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.prose p {
  margin-top: var(--space-2);
}

/* F24a §5.1: list markers in cobalt. */
.prose ul {
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: var(--space-5);
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* F23: the four support pages (sobre, seguranca, termos, contato) are sections of h2 + p/ul under one h1 — each
   section is a row of the same 1fr/2fr grid, title left, content right, with a 1px rule between rows. */
.prose-body {
  display: grid;
  gap: 0;
  margin-top: var(--space-8);
}

.prose-body > section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.prose-body > section:first-child {
  padding-top: 0;
  border-top: none;
}

.prose-body > section > h2 {
  grid-column: 1;
}

.prose-body > section > :not(h2) {
  grid-column: 2;
}

/* Contato (F24a §5.1, pedido do Maestro): "linhas de tabela, rótulo mono à esquerda, valor à direita" — mesma
   grade acima, só o h2 de cada linha vira o rótulo mono em vez do título Schibsted das outras 3 páginas. */
.prose-body-table > section > h2 {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prose ul {
  margin: 0;
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

/* The CTA row (sobre.html) has no h2 (no "title" to put on the left): it stays a single flex column, not the
   title/text grid — a higher-specificity override of .prose-body > section's display: grid. */
.prose-body > section.prose-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (max-width: 39.99em) {
  .prose ol > li,
  .prose-body > section {
    grid-template-columns: 1fr;
  }

  .prose ol > li > p,
  .prose-body > section > :not(h2) {
    grid-column: 1;
  }
}

/* ---------- F27c: the legal pages (/privacidade, /termos, /seguranca) ---------- */

/* The shortcuts at the top ("Nesta página"): each link is a 44 px target, and the line wraps instead of overflowing. */
.prose-head nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin-top: var(--space-3);
}

.prose-head nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
}

/* A clause is a title over its text, at every width: the section already has the title/text grid, and a second one inside
   it made 3 nested columns in 665 px (a 248 px paragraph beside a 124 px title). The clause title may be an h2 or an h3. */
.prose-body > section > ol > li {
  grid-template-columns: minmax(0, 1fr);
}

.prose-body > section > ol > li > :is(h2, h3, p) {
  grid-column: 1;
}

.prose ol > li > h3 {
  grid-column: 1;
}

.prose ol > li > h3::before {
  content: counter(clause) '.';
  margin-right: 0.4em;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 500;
}

.prose h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

/* Up to 1100 px the section's own title sits over its clauses; above it there are two columns (section | clauses) on a
   wider page, so the clause paragraph reads at about 65 characters. */
@media (max-width: 1100px) {
  .prose-body > section:has(> ol > li > :is(h2, h3)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .prose-body > section:has(> ol > li > :is(h2, h3)) > :not(h2) {
    grid-column: 1;
  }
}

@media (min-width: 1101px) {
  .prose {
    max-width: 56rem;
  }
}

.lost {
  padding-block: var(--space-12);
}

/* F24a §5.1: "404" enorme em Schibsted 800 na primária, decorativo (aria-hidden; o h1 carrega o sentido). */
.lost-code {
  margin: 0 0 var(--space-4);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.lost .lede {
  margin-top: var(--space-3);
}

@media (min-width: 40em) {
  .lost-code {
    font-size: 200px;
  }
}

/* ---------- Wider screens ---------- */

@media (min-width: 40em) {
  h1 {
    font-size: var(--text-display-1);
  }

  h2 {
    font-size: var(--text-display-2);
  }

  .final h2 {
    font-size: var(--text-display-3);
  }

  .prose h1 {
    font-size: var(--text-display-3);
  }

  .cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48em) {
  .wrap {
    padding-inline: var(--space-6);
  }

  .brand {
    margin-right: 0;
  }

  .persona-switch {
    flex: 0 0 auto;
    order: 2;
    margin-left: var(--space-4);
  }

  .persona-switch a {
    flex: none;
  }

  .bar > .btn {
    flex: 0 0 auto;
    order: 4;
    margin-left: auto;
  }

  .menu-ready .menu-btn {
    order: 5;
  }

  .form-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-10);
  }
}

/* Spec §2/§8: above 1100 px the page navigation sits in the header row and the menu button goes; at 1100 px and
   below, the nav is the open/close menu (the prototype hid it for good, which left "Entrar" unreachable). */
@media (min-width: 1101px) {
  .bar {
    flex-wrap: nowrap;
  }

  .nav,
  .menu-ready .nav,
  .menu-ready .nav.is-open {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-5);
    order: 3;
    width: auto;
    padding: 0;
  }

  .menu-btn,
  .menu-ready .menu-btn {
    display: none;
  }

  .bar > .btn {
    margin-left: var(--space-3);
  }

  .nav-enter {
    color: var(--color-primary);
  }
}

@media (min-width: 64em) {
  .hero {
    padding: var(--space-12) 0 var(--space-10);
  }

  .cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* F24a S2 v1.7 (achado b do Argus, 2ª volta — pedido do Maestro, diverge da spec §5.2 por uma razão medida): o
   lado a lado só entra a 75em (560 de texto + 48 de gap + ~520 de globo + margens ≈ 1200px). Abaixo disso o
   globo empilha, 100% até 560px (.globe-svg), centrado — nunca mais estreito que ~520px quando lado a lado. */
@media (min-width: 75em) {
  .hero-grid {
    grid-template-columns: 560px 1fr;
    gap: var(--space-12);
    align-items: center;
  }

}

/* =====================================================================================================================
   F27a: the two audiences' landings (spec §6, §7, §8, §9.1). Classes below are used by /empresas and by the provisional
   /; the cuts are the spec's: 1100 px, 980 px and 640 px (px, as the spec writes them).
   ===================================================================================================================== */

code {
  padding: 0.1em 0.4em;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* A surface in ink inside a light section (the second path card, the floating card, the beta price card): the dark
   block's colours and focus ring, without the section padding of .dark. */
.on-ink {
  background: var(--color-ink);
  color: var(--color-surface);
}

.dark :focus-visible,
.on-ink :focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

.on-ink a {
  color: var(--color-accent-bright);
}

.btn-light {
  background: var(--color-bg);
  color: var(--color-ink);
}

.btn-light:hover {
  background: var(--color-surface);
}

.dark .btn-light,
.on-ink .btn-light {
  color: var(--color-ink);
}

.btn-icon {
  flex: none;
}

/* The arrow after a label is a separate decorative span: flex drops the space before it, so the gap is explicit. */
.btn,
.final-link,
.strip-link {
  gap: var(--space-2);
}

@media (min-width: 64em) {
  .section,
  .dark,
  .final {
    padding-block: var(--space-28);
  }
}

/* ---------- Hero of the two pages ---------- */

.offer-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-touch);
  margin-bottom: var(--space-5);
  padding: 0 var(--space-3) 0 var(--space-1);
  background: var(--color-surface);
  border: 1.5px solid var(--color-ink);
  border-radius: 999px;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.offer-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.offer-pill b {
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary-fg);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.proof-bar {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.proof-bar li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 400;
}

.icon-check {
  flex: none;
  color: var(--color-primary);
}

/* The visual of /empresas: the globe with two floating cards over its lower corners. Up to 980 px the globe is gone
   and the cards stack (spec §8). */
.hero-visual {
  position: relative;
  display: grid;
  gap: var(--space-3);
}

.float-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.float-card-proof {
  background: var(--color-surface);
  border: 1px solid var(--color-ink);
}

.float-card-ink {
  background: var(--color-ink);
  color: var(--color-surface);
}

.float-label {
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.float-card-ink .float-label {
  color: var(--color-accent-bright);
}

.float-value {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.float-card a {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--size-touch);
  font-size: var(--text-sm);
  font-weight: 600;
}

@media (min-width: 981px) {
  .hero-visual {
    display: block;
    width: 100%;
    max-width: 35rem;
    margin-inline: auto;
  }

  .float-card {
    position: absolute;
    bottom: 3.5rem;
  }

  .float-card-proof {
    left: 0;
    width: 17rem;
  }

  .float-card-ink {
    right: 0;
    bottom: 3rem;
    width: 15.5rem;
  }
}

/* F27a R8: the text column starts where the logo and the sections do (the shared 72rem .wrap); the globe column reaches
   into the right margin by the same amount the old 92rem hero was wider (up to 160 px), so the globe keeps its size. */
@media (min-width: 75em) {
  .hero-visual {
    width: auto;
    max-width: none;
    margin-inline: 0 calc((min(100vw, 92rem) - 72rem) / -2);
  }
}

@media (max-width: 980px) {
  .globe-wrap {
    display: none;
  }
}

/* ---------- Steps of the / (the 4 rows) ---------- */

.steps h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.steps p {
  margin-top: var(--space-1);
  color: var(--color-text-2);
}

.steps-note strong {
  color: var(--color-ink);
}

/* ---------- /empresas: who it is for ---------- */

.audience-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.audience-cards li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-lg);
}

.audience-cards h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.audience-cards p {
  color: var(--color-text-2);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}

/* ---------- /empresas: how it works (3 columns) and the customer's side ---------- */

.steps-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-ink);
}

.steps-cols li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-8) var(--space-2) 0;
}

.steps-cols li + li {
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-rule-soft);
}

.steps-cols h3 {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.steps-cols p {
  color: var(--color-text-2);
}

.customer-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
}

.strip-label {
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.strip-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.strip-n {
  margin-right: var(--space-1);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.strip-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
  margin-left: auto;
  font-weight: 600;
}

/* ---------- /empresas: the portal (ink block with a light mock inside) ---------- */

.dark h2 {
  max-width: 52rem;
}

.portal-mock {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  margin: var(--space-8) 0 0;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-text-2);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
}

.portal-nav {
  padding: var(--space-5) var(--space-3);
  background: var(--color-surface-alt);
  border-right: 1px solid var(--color-rule-soft);
}

.portal-nav ul {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-nav li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-2);
  font-size: var(--text-sm);
  font-weight: 400;
}

.portal-nav li.is-on {
  background: var(--color-ink);
  color: var(--color-bg);
}

.portal-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-6);
}

.portal-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.portal-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.portal-tag {
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.kpi {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-md);
}

.kpi dt {
  color: var(--color-text-2);
  font-size: var(--text-xs);
}

.kpi dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* The table scrolls inside its own box (design.md §3, A6); the box is a focusable region so the keyboard can scroll it. */
.table-scroll {
  /* positioned so the absolutely placed .sr-only text of a cell is clipped with the table, not left at its static x */
  position: relative;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-md);
}

.table-scroll:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.portal-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.portal-table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule-soft);
  color: var(--color-text-2);
  font-size: var(--text-xs);
  font-weight: 400;
  text-align: left;
}

.portal-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-rule-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.portal-table tr:last-child td {
  border-bottom: none;
}

.status {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
}

.status-ok {
  background: var(--color-primary-subtle);
  color: var(--color-primary-hover);
}

.status-wait {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.portal-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.portal-points li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-text-2);
}

.portal-points h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.portal-points p {
  margin-top: var(--space-2);
  color: var(--color-text-on-ink-muted);
}

/* ---------- /empresas: security (three checks) ---------- */

.checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-8) 0 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--color-surface);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
}

.checks li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}

.checks li + li {
  border-left: 1px solid var(--color-rule-soft);
}

.check-tag {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.checks h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.checks p:last-child {
  color: var(--color-text-2);
}

.bullets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.bullets h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.bullets p {
  margin-top: var(--space-2);
  color: var(--color-text-2);
}

/* ---------- Price cards and the facts table (limits) ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
}

.price-card--ink {
  background: var(--color-ink);
  color: var(--color-surface);
}

.price-label {
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.price-card--ink .price-label {
  color: var(--color-accent-bright);
}

.price-big {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.price-big-sm {
  font-size: var(--text-display-2-sm);
}

.price-card p:last-child {
  color: var(--color-text-2);
}

.price-card--ink p:last-child {
  color: var(--color-text-on-ink-muted);
}

.facts-table {
  width: 100%;
  margin-top: var(--space-8);
  border-collapse: collapse;
  border-top: 2px solid var(--color-ink);
}

.facts-table th,
.facts-table td {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule-soft);
  text-align: left;
  vertical-align: top;
}

.facts-table th {
  width: 38%;
  padding-right: var(--space-6);
  color: var(--color-text-2);
  font-weight: 400;
}

.facts-table td {
  font-size: var(--text-lg);
  font-weight: 600;
}

.facts-table td strong {
  color: var(--color-primary);
}

/* ---------- /empresas: the form column ---------- */

.form-side h2 {
  margin-bottom: 0;
}

.next-title {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
}

.next-steps {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-ink);
}

.next-steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule-soft);
}

.next-n {
  padding-top: 0.2em;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

.invite {
  margin-top: var(--space-5);
}

/* ---------- Support pages ---------- */

.contact-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.prose-body > section.contact-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prose-body > section.contact-cols > .contact-col {
  grid-column: auto;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.contact-col h2 {
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.contact-col p {
  margin: 0;
}

.contact-col .btn {
  justify-self: start;
}

.prose-back {
  margin-top: var(--space-8);
}

.prose-back a,
.contact-col p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
}

.notfound .actions {
  align-items: center;
}

/* ---------- Responsive: the spec's cuts (§8) ---------- */

@media (max-width: 1100px) {
  .audience-cards,
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1101px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
}

@media (max-width: 980px) {
  .steps-cols,
  .checks,
  .bullets,
  .portal-points,
  .price-grid,
  .contact-cols,
  .prose-body > section.contact-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps-cols li,
  .steps-cols li + li {
    padding: var(--space-5) 0;
  }

  .steps-cols li + li,
  .checks li + li {
    border-left: none;
    border-top: 1px solid var(--color-rule-soft);
  }

  .portal-mock {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-nav {
    border-right: none;
    border-bottom: 1px solid var(--color-rule-soft);
  }

  .portal-nav ul {
    display: flex;
    flex-wrap: wrap;
  }

  .strip-link {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .wrap {
    padding-inline: var(--space-4);
  }

  .audience-cards,
  .kpis,
  .footer-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-main,
  .price-card {
    padding: var(--space-5);
  }

  .facts-table tr {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-rule-soft);
  }

  .facts-table th,
  .facts-table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
  }

  .price-big {
    font-size: 2.75rem;
  }
}

/* =====================================================================================================================
   F27b: the complete / (spec §4, §5, §9.1): the purchase simulation in the hero, the trails strip, the definition and
   data lists, the proof band and the fixed bar of the phone. The simulation moves only transform and opacity (§5.4), and
   everything it shows or hides is an attribute set by chat-sim.js (the CSP forbids inline style).
   ===================================================================================================================== */

/* ---------- Hero: the simulation on the right ---------- */

.hero-sim {
  max-width: 37.5rem;
}

/* ---------- The simulation: the panel (≥ 641 px) ---------- */

.sim {
  --sim-caption: 2.25rem;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(10rem, 14.25rem) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-3);
  width: min(100%, 37.5rem);
  min-height: calc(40rem + var(--sim-caption));
  margin: 0 auto;
  padding: var(--space-6) 0 calc(var(--sim-caption) + var(--space-4)) var(--space-6);
}

/* The panel itself (border, dotted ground) is the figure's backdrop, so the caption sits below it. */
.sim::before {
  content: '';
  position: absolute;
  inset: 0 0 var(--sim-caption) 0;
  z-index: -1;
  background: radial-gradient(var(--color-globe-rim) 1.1px, transparent 1.3px) 0 0 / 18px 18px, var(--color-surface-sim);
  border: 1.5px solid var(--color-ink);
  border-radius: 22px;
}

.sim__label {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--color-primary-hover);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sim__pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
}

.sim__pulse::after,
.sim__steps [data-state='active'] .sim__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  animation: sim-pulse 1.4s infinite;
}

.sim__steps {
  grid-column: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.sim__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-text-faint);
  border-radius: 50%;
  color: var(--color-primary-fg);
}

.sim__dot svg {
  opacity: 0;
}

.sim__step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sim__step-text strong {
  color: var(--color-text-2);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sim__step-text span {
  color: var(--color-text-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.sim__steps [data-state='active'] .sim__dot {
  background: var(--color-surface);
  border: 6px solid var(--color-primary);
}

.sim__steps [data-state='done'] .sim__dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.sim__steps [data-state='done'] .sim__dot svg {
  opacity: 1;
}

.sim__steps [data-state='active'] strong,
.sim__steps [data-state='done'] strong {
  color: var(--color-ink);
}

.sim__receipt {
  grid-column: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--color-bg);
  opacity: 0;
  transform: translateX(-24px);
}

.sim__receipt[data-show='true'] {
  opacity: 1;
  transform: none;
  animation: sim-slide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sim__receipt-label {
  color: var(--color-accent-bright);
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
}

.sim__receipt strong {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.sim__receipt-to {
  color: var(--color-text-on-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
}

.sim__receipt-link {
  color: var(--color-accent-bright);
  font-size: 0.78125rem;
  font-weight: 600;
}

/* ---------- The simulation: the phone ---------- */

.sim__phone {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  width: min(100%, 300px);
  height: 600px;
  overflow: hidden;
  background: var(--color-chat-bg);
  border: 10px solid var(--color-ink);
  border-radius: 46px;
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  line-height: 1.42;
}

.sim__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3);
  background: var(--color-ink);
  color: var(--color-bg);
}

.sim__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-bg);
  border-radius: 50%;
}

.sim__who {
  display: flex;
  flex-direction: column;
}

.sim__who strong {
  font-size: 0.9375rem;
}

.sim__who span {
  color: var(--color-text-on-ink-muted);
  font-size: 0.6875rem;
}

.sim__toast {
  position: absolute;
  top: 4.25rem;
  left: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-110%);
}

.sim__toast[data-show='true'] {
  opacity: 1;
  transform: none;
  animation: sim-toast 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sim__toast-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-ink);
  border-radius: 9px;
  color: var(--color-bg);
}

.sim__toast-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sim__toast-text span {
  color: var(--color-text-2);
  font-size: 0.6875rem;
}

.sim__phone {
  position: relative;
}

/* The log has a fixed height and grows from the bottom (older bubbles slide out at the top), so nothing around it moves. */
.sim__log {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-3);
  overflow: hidden;
  color: var(--color-ink);
}

.sim__bubble {
  align-self: flex-start;
  display: grid;
  gap: 4px;
  max-width: 88%;
  padding: 9px 11px;
  background: var(--color-surface);
  border-radius: 4px 14px 14px 14px;
  animation: sim-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sim__bubble p {
  margin: 0;
  overflow-wrap: anywhere;
}

.sim__bubble--out {
  align-self: flex-end;
  padding: 8px 12px;
  background: var(--color-bubble-out);
  border-radius: 14px 4px 14px 14px;
  font-weight: 600;
}

.sim__title {
  font-weight: 600;
}

/* Playing: the log is a scroller from the top and chat-sim.js scrolls it to the end after each bubble, so the older bubbles
   keep their layout position (scrolling is not a layout shift). Not playing (no script, reduced motion, ?sim=), the log
   stays bottom-aligned and shows the last frame as the HTML has it. */
.sim[data-playing] .sim__log {
  justify-content: flex-start;
  scroll-behavior: smooth;
}

.sim__bubble--quote {
  width: 88%;
}

.sim__bubble--quote strong,
.sim__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.sim__code {
  display: block;
  margin-top: 6px;
  padding: 7px 8px;
  border: 1px dashed var(--color-globe-dot-near);
  border-radius: 7px;
  color: var(--color-primary-hover);
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim__copy {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-text-2);
  font-weight: 600;
}

.sim__copy[data-copied='true'] {
  color: var(--color-primary-hover);
}

.sim__bubble--done {
  border: 1.5px solid var(--color-primary);
}

.sim__bubble--done .sim__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sim__tick {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary-fg);
}

.sim__tick path {
  transform-box: fill-box;
  transform-origin: left center;
  animation: sim-draw 0.5s 0.2s ease-out both;
}

.sim__tx {
  color: var(--color-primary-hover);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-decoration: underline;
}

.sim__bubble--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}

.sim__typing-dot {
  width: 6px;
  height: 6px;
  background: var(--color-text-2);
  border-radius: 50%;
  animation: sim-dot 1.1s infinite ease-in-out;
}

.sim__typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.sim__typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

.sim__composer {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-chat-bg);
}

.sim__field {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-radius: 999px;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 400;
}

.sim__field [data-composer]:empty::before {
  content: 'Mensagem';
  color: var(--color-text-2);
  font-weight: 400;
}

.sim__caret {
  width: 1.5px;
  height: 16px;
  margin-left: 1px;
  background: var(--color-primary);
  opacity: 0;
}

.sim__composer:has(.sim__send[data-ready='true']) .sim__caret {
  animation: sim-caret 1s steps(1) infinite;
}

.sim__send {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--color-text-faint);
  border-radius: 50%;
  color: var(--color-primary-fg);
}

.sim__send[data-ready='true'] {
  background: var(--color-primary);
}

.sim__cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--color-text-2);
  font-size: var(--text-xs);
  text-align: center;
}

/* The whole panel fades before the loop restarts (§5.3 row 13). */
.sim::before,
.sim > :not(.sim__cap, template) {
  transition: opacity 0.6s;
}

.sim[data-fading='true'] > :not(.sim__cap, template),
.sim[data-fading='true']::before {
  opacity: 0;
}

@keyframes sim-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sim-dot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes sim-toast {
  from {
    opacity: 0;
    transform: translateY(-110%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sim-caret {
  50% {
    opacity: 0;
  }
}

@keyframes sim-draw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sim-pulse {
  from {
    opacity: 0.45;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.1);
  }
}

@keyframes sim-slide {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sim,
  .sim * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Trails strip (§4.2) ---------- */

.trails-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xl);
  font-weight: 600;
}

.trails-flow li + li::before {
  content: '→';
  margin-right: var(--space-3);
  color: var(--color-primary);
  font-weight: 400;
}

/* ---------- What USDC is (§4.4) and the data list (§4.7) ---------- */

.def-list {
  margin: var(--space-8) 0 0;
  border-top: 2px solid var(--color-ink);
}

.def-list > div {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule-soft);
}

.def-list dt {
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.def-list dd {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400;
}

.data-link {
  margin-top: var(--space-4);
  font-weight: 600;
}

.data-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
}

.data-list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-ink);
}

.data-list li {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule-soft);
}

.data-term {
  font-weight: 600;
}

.data-list li p:last-child {
  color: var(--color-text-2);
}

/* ---------- Security: the proof band (§4.5) ---------- */

.proof-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: 600;
}

.proof-band a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
}

.security-line {
  margin-top: var(--space-5);
  color: var(--color-text-2);
}

/* ---------- The fixed bar of the phone (§4.11): always there without script, hidden by landing.js while the hero button shows ---------- */

.sticky-cta {
  display: none;
}

/* Hidden by landing.js while the hero's button is on screen: it keeps its room (visibility, not display), or the whole
   page below it would jump by the bar's height when it appears (Lighthouse CLS). */
@media (max-width: 640px) {
  .sticky-cta[hidden] {
    display: block !important;
    visibility: hidden;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-bottom: 80px;
  }

  .sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-ink);
  }

  .sticky-cta .btn {
    width: 100%;
    min-height: 54px;
  }

  /* The header action steps aside: the bar assumes it (§4.11, B5, the F27a C9 inverted). */
  .site-header .header-buy {
    display: none;
  }
}

/* ---------- Responsive: the cuts of §8 ---------- */

@media (max-width: 980px) {
  .def-list > div,
  .data-list li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ≤ 640 px the panel is only the conversation: no phone frame, no ruler, no receipt (§5.6). */
@media (max-width: 640px) {
  .sim {
    display: block;
    width: 100%;
    max-width: 26.25rem;
    min-height: 0;
    padding: 0 0 var(--sim-caption);
  }

  .sim::before,
  .sim__label,
  .sim__steps,
  .sim__receipt {
    display: none;
  }

  .sim__phone {
    width: 100%;
    height: 540px;
    border-width: 1.5px;
    border-radius: 18px;
    box-shadow: none;
  }

}