/* ═══════════════════════════════════════════════════════════════════════
   02 HERO — porte da seção "hero" do template Relay (getlayers.ai) para a
   home da Arpier. Página clara; a janela de produto e o nó-gatilho são as
   únicas superfícies escuras (placa NIGHT). Composição e movimento do Relay
   preservados; a coluna de texto virou fluxo (a cópia em pt-BR é mais longa)
   e a janela continua absolutamente posicionada por quadro.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* página clara */
  --hero-ink: var(--text);
  --hero-chip-fill: var(--glass-fill);
  --hero-chip-border: rgba(0, 77, 211, 0.45);          /* SKY a 45% (era lime .45) */
  --hero-tick: var(--hairline-strong);
  --hero-glow: radial-gradient(ellipse at 50% 50%, rgba(0, 77, 211, 0.12) 0%, rgba(0, 77, 211, 0.05) 36%, rgba(0, 77, 211, 0) 68%);

  /* a placa da janela */
  --hero-window: var(--plate);
  --hero-window-border: var(--plate-hairline-strong);
  --hero-window-shadow: var(--shadow-plate);
  /* anel: SKY no canto superior esquerdo → transparente a 60% (era lime → branco .07) */
  --hero-window-ring: linear-gradient(to bottom right, rgba(0, 77, 211, 0.95) 0%, rgba(0, 77, 211, 0.62) 22%, rgba(0, 77, 211, 0.22) 44%, rgba(0, 77, 211, 0) 60%);
  --hero-grid-dot: rgba(237, 237, 237, 0.08);
  --hero-rule: var(--plate-hairline);
  --hero-bar-divider: var(--plate-hairline-strong);
  --hero-corner-dot: var(--plate-hairline-strong);
  --hero-tool-fill: rgba(237, 237, 237, 0.05);
  --hero-tool-border: var(--plate-hairline);
  --hero-tool-active-fill: rgba(237, 237, 237, 0.10);
  --hero-tool-active-border: var(--plate-hairline-strong);
  --hero-zoom-fill: rgba(237, 237, 237, 0.06);
  --hero-zoom-border: var(--plate-hairline);
  --hero-node: var(--plate-card);
  --hero-node-solid: var(--plate-2);                   /* o nó-gatilho, que cavalga a borda da janela */
  --hero-node-border: var(--plate-hairline);
  --hero-node-shadow: var(--shadow-float);
  --hero-node-glow: 0 0 1rem 0 rgba(110, 155, 255, 0.18), 0 0.625rem 1.375rem -0.25rem rgba(0, 0, 0, 0.55);
  --hero-run-live: var(--plate-accent);
  --hero-run-idle: var(--plate-muted);
  --hero-wait-dot: var(--plate-dim);
  --hero-connector: var(--plate-accent);
  --hero-connector-grey: rgba(237, 237, 237, 0.35);
  --hero-packet: var(--plate-accent);
  --hero-packet-halo: rgba(110, 155, 255, 0.28);
  --hero-packet-grey: var(--plate-muted);
  --hero-packet-grey-halo: rgba(237, 237, 237, 0.16);

  /* tipografia (Relay: 72/84 · 44/52 · 36/46 · 28/38). Em 1440 o título em
     pt-BR fica em 64/75: a 72 ele quebra em 4 linhas e empurra a nota para
     fora da primeira tela; a 64, com as quebras controladas (.hero-br), fecha
     em 3 linhas com folga (medido). */
  --hero-type-title: 3.75rem;
  --hero-line-title: 4.375rem;
  --hero-type-note: 0.75rem;
  --hero-line-note: 1.3;

  /* cantos */
  --hero-corner-wait: 0.375rem;
  --hero-corner-chip: 0.5rem;
  --hero-corner-tool: 0.625rem;
  --hero-corner-node: 1rem;
  --hero-corner-window: var(--radius-window);

  /* primeira tela: o quadro (712 / 712 / 976 / 949) é o mínimo; a sobra da
     viewport é repartida acima e abaixo */
  --hero-frame: 44.5rem;
  --hero-extra: max(0px, 100svh - var(--nav-h) - var(--hero-frame));
}
@media (width <= 1200px) {
  :root { --hero-type-title: 2.75rem; --hero-line-title: 3.25rem; }
}
@media (width <= 900px) {
  :root { --hero-type-title: 2.25rem; --hero-line-title: 2.875rem; --hero-frame: 61rem; --hero-connector-grey: rgba(237, 237, 237, 0.28); }
}
@media (width <= 580px) {
  :root { --hero-type-title: 1.75rem; --hero-line-title: 2.375rem; --hero-frame: 59.3125rem; }
}

/* ── quadro ───────────────────────────────────────────────────────────── */
.hero, .hero * { box-sizing: border-box; }
.hero { position: relative; min-height: calc(100svh - var(--nav-h)); padding-top: calc(var(--hero-extra) / 2); padding-bottom: 8rem; } /* 8rem = os 128px que o site.css antigo dava a todo <section> */
.hero-frame { position: relative; min-height: var(--hero-frame); }
.hero-abs { position: absolute; }
.hero-fill { position: absolute; inset: 0; }
.hero-label { font-size: var(--type-label); line-height: var(--line-label); }
.hero-nowrap { white-space: nowrap; }

/* ── coluna de texto, em fluxo (chip → h1 → lead → ações → nota) ───────── */
.hero-copy {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start;
  margin-left: var(--page-inset); width: 35rem; max-width: calc(100% - 2 * var(--page-inset));   /* 35: termina antes do nó-gatilho (40.625rem), que cavalga a borda da janela */
  padding: 5.5rem 0 4rem;
}
.hero-chip-wrap { max-width: 100%; }
.hero-chip {
  display: flex; height: 2.25rem; max-width: 100%; align-items: center; gap: 0.75rem; overflow: clip; margin: 0;
  border-radius: var(--hero-corner-chip); border: 1px solid var(--hero-chip-border); background: var(--hero-chip-fill);
  -webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem);
  padding: 0.4375rem 0.8125rem 0.4375rem 0.6875rem;
}
.hero-chip-dot { width: 0.375rem; height: 0.375rem; flex-shrink: 0; background: var(--accent); }
.hero-chip-390 { display: none; }
.hero-chip-text { color: var(--hero-ink); }
.hero-title-wrap { margin-top: 2rem; width: 100%; }
.hero-title { margin: 0; font-size: var(--hero-type-title); line-height: var(--hero-line-title); }
.hero-title .display-title-accent { font-size: inherit; font-weight: inherit; font-style: normal; }
.hero-br { display: inline; }
.hero-tagline {
  margin: 0.875rem 0 0; font-family: var(--font-d); font-weight: 600; font-size: 1.25rem; line-height: 1.625rem;
  letter-spacing: -0.01em; color: var(--text-muted); text-wrap: balance;   /* 20/26: cabe numa linha nos 35rem da coluna; se quebrar, quebra em duas linhas iguais */
}
.hero-subhead {
  margin: 1.75rem 0 0; width: 33rem; max-width: 100%;
  font-family: var(--font-b); font-size: 1.0625rem; line-height: 1.625rem; color: var(--text-muted);
}
.hero-subhead p { margin: 0; }
.hero-subhead p + p { margin-top: 0.75rem; }
.hero-actions { margin-top: 2rem; display: flex; align-items: center; gap: 0.75rem; }
.hero-arrow { width: 1rem; height: 1rem; flex-shrink: 0; }
.hero-note-wrap { margin-top: 1.5rem; }
.hero-note { display: flex; }
.hero-note-1024 { display: none; }
.hero-note-390 { display: none; width: 13.5625rem; }
.hero-note-line { display: flex; }
.hero-note-text { margin: 0; color: var(--text-muted); }
.hero-note-390 .hero-note-line { justify-content: center; }
.hero-note-390 .hero-note-text { font-size: var(--hero-type-note); line-height: var(--hero-line-note); }

/* marcas de campo (Relay 3488:21953 / 21954 / 21956) */
.hero-marks { pointer-events: none; position: absolute; inset: 0; }
.hero-tick { position: absolute; top: 38.75rem; left: 73.75rem; height: 0.5rem; width: 1px; background: var(--hero-tick); }
.hero-mark { position: absolute; width: 0.75rem; height: 0.75rem; }
.hero-mark-1 { top: 42rem; left: 55rem; }
.hero-mark-2 { top: 41.75rem; left: 80.625rem; }

/* ── grupo da janela: tilt pelo cursor, camadas em paralaxe ───────────── */
.hero-tilt { pointer-events: none; position: absolute; inset: 0; transform-origin: 68.75rem 22.25rem; }
.hero-glow-layer { pointer-events: none; position: absolute; inset: 0; overflow: clip; }
.hero-glow { position: absolute; top: 0.25rem; left: 25rem; width: 60rem; height: 44rem; background: var(--hero-glow); }
.hero-window-box { position: absolute; top: 2.75rem; left: 47.5rem; height: 39rem; width: 42.5rem; }
/* o diagrama inteiro (janela + nós + pacotes) 14% menor, preso ao canto superior direito da janela: pedido dos sócios em 2026-10-16 ("chama muita atenção") */
.hero-flow-root { transform: scale(0.86); transform-origin: 90rem 2.75rem; }
.hero-window {
  overflow: clip; border-radius: var(--hero-corner-window) 0 0 var(--hero-corner-window);
  border: 1px solid var(--hero-window-border); background: var(--hero-window);
  box-shadow: var(--hero-window-shadow);
}
.hero-window-ring {
  pointer-events: none; padding: 1px; border-radius: var(--hero-corner-window) 0 0 var(--hero-corner-window);
  background: var(--hero-window-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* o grid de pontos (era hero-canvas-grid.svg): 24 × 21.03 a partir de (15, 13.15) */
.hero-grid-wave {
  background-image: radial-gradient(circle, var(--hero-grid-dot) 1px, transparent 1.6px);
  background-size: 1.5rem 1.3146rem; background-position: 0.9375rem 0.8216rem;
}
.hero-corner { position: absolute; width: 0.25rem; height: 0.25rem; border-radius: 9999px; background: var(--hero-corner-dot); }
.hero-corner-1 { top: 0.9375rem; left: 0.9375rem; }
.hero-corner-2 { top: 37.6875rem; left: 0.9375rem; }
.hero-corner-3 { top: -0.0625rem; left: 31.1875rem; display: none; }
/* barra: título · divisor · meta (fluxo, para o título em pt-BR não cruzar o divisor) */
.hero-win-bar { position: absolute; top: 2.4375rem; left: 2.4375rem; right: 9.5rem; height: 1.5rem; display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.hero-win-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-b); font-size: var(--type-body); line-height: var(--line-body); color: var(--plate-muted); }
.hero-win-divider { flex-shrink: 0; height: 0.875rem; width: 1px; background: var(--hero-bar-divider); }
.hero-win-meta { margin: 0; flex-shrink: 0; color: var(--plate-text); }
.hero-win-status { position: absolute; top: 2.5625rem; right: 2.5625rem; margin: 0; text-align: right; color: var(--plate-accent); }
.hero-win-rule { position: absolute; top: 5.4375rem; left: -1px; height: 1px; width: 42.5rem; background: var(--hero-rule); }
.hero-tools { position: absolute; top: 6.9375rem; left: 2.4375rem; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.hero-tools li { position: relative; width: 2.25rem; height: 2.25rem; }
.hero-tool { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; overflow: clip; border-radius: var(--hero-corner-tool); border: 1px solid var(--hero-tool-border); background: var(--hero-tool-fill); }
.hero-tool-active { border-color: var(--hero-tool-active-border); background: var(--hero-tool-active-fill); }
.hero-tool img { width: 1.25rem; height: 1.25rem; opacity: 0.7; }
.hero-tool-active img { opacity: 1; }
.hero-zoom-wrap { position: absolute; top: 6.9375rem; left: 36.3125rem; }
.hero-zoom { position: relative; overflow: clip; margin: 0; border-radius: var(--hero-corner-chip); border: 1px solid var(--hero-zoom-border); background: var(--hero-zoom-fill); padding: 0.3125rem 0.6875rem; color: var(--plate-muted); }
/* fluxo */
.hero-flow-inner { position: absolute; inset: 0; }
.hero-conn { position: absolute; }
.hero-conn-left { top: 11.8125rem; left: 5.5625rem; height: 11.25rem; width: 5rem; }
.hero-conn-right { top: 11.8125rem; left: 23.6875rem; height: 11.25rem; width: 5rem; }
.hero-conn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-conn-wide { display: block; }
.hero-conn-narrow { display: none; }
.hero-conn path { stroke-width: 2; stroke-linecap: round; opacity: 0; }
.hero-conn .hero-conn-grey { stroke: var(--hero-connector-grey); }
.hero-packets { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-node {
  position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; overflow: clip;
  border-radius: var(--hero-corner-node); border: 1px solid var(--hero-node-border); background: var(--hero-node);
  padding: 0.9375rem 1rem; white-space: nowrap; box-shadow: var(--hero-node-shadow); opacity: 0;
}
.hero-node p { margin: 0; }
.hero-node-glow { box-shadow: var(--hero-node-glow); }
.hero-node-title { font-family: var(--font-b); font-size: var(--type-label); line-height: var(--line-label); font-weight: 500; letter-spacing: -0.005em; color: var(--plate-text); }
.hero-node-source { color: var(--plate-dim); }
.hero-node-condition { top: 10.125rem; left: 10.5625rem; width: 13.125rem; }
.hero-node-log { top: 20.125rem; left: 10.5625rem; width: 13.125rem; }
.hero-node-approval { top: 15.125rem; left: 28.6875rem; width: 12.75rem; padding-inline: 0.875rem; }
.hero-node-trigger { top: 18rem; left: 40.625rem; width: 12.5rem; background: var(--hero-node-solid); }
.hero-wait-wrap { position: absolute; top: 20.5rem; left: 28.6875rem; }
.hero-wait {
  position: relative; display: flex; align-items: center; gap: 0.5rem; overflow: clip; margin: 0; border-radius: var(--hero-corner-wait);
  border: 1px solid var(--hero-zoom-border); background: var(--hero-node);
  padding: 0.1875rem 0.6875rem;
}
.hero-wait-dot { width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 9999px; background: var(--hero-wait-dot); }
.hero-wait-text { color: var(--plate-muted); }
.hero-branch {
  position: absolute; overflow: clip; margin: 0; border-radius: var(--hero-corner-wait); border: 1px solid var(--hero-node-border); background: var(--hero-node);
  padding: 0.1875rem 0.4375rem; white-space: nowrap; color: var(--plate-muted);
}
.hero-branch-yes { top: 13.5rem; left: 6.5rem; }
.hero-branch-no { top: 19.625rem; left: 6.5rem; }
.hero-flash { position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--hero-packet); opacity: 0; }
.hero-port { position: absolute; display: block; width: 0.5rem; height: 0.5rem; opacity: 0; }
.hero-port img { display: block; width: 100%; height: 100%; }
.hero-port-1 { top: 12.1875rem; left: 10.3125rem; }
.hero-port-2 { top: 22.1875rem; left: 10.3125rem; }
.hero-port-3, .hero-flash-condition { top: 12.1875rem; left: 23.4375rem; }
.hero-port-4, .hero-flash-log { top: 22.1875rem; left: 23.4375rem; }
.hero-port-5, .hero-flash-approval { top: 17.1875rem; left: 28.4375rem; }
.hero-flash-trigger, .hero-port-trigger { top: 20rem; left: 52.875rem; }
.hero-port-overhang { top: 20.0625rem; left: 40.375rem; }
/* últimas execuções */
.hero-runs-rule { position: absolute; top: 27.5625rem; left: 2.4375rem; height: 1px; width: 37.5rem; background: var(--hero-rule); }
.hero-runs-label { position: absolute; top: 28.8125rem; left: 2.4375rem; margin: 0; color: var(--plate-dim); }
.hero-win-note { position: absolute; right: 2.5625rem; bottom: 1rem; margin: 0; font-size: 0.75rem; line-height: 1rem; white-space: nowrap; color: var(--plate-dim); }
.hero-runs { position: absolute; top: 30.875rem; left: 2.4375rem; height: 5.5625rem; width: 37.5rem; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.hero-runs-clip { clip-path: inset(0 -1rem 0 -1rem); }
.hero-run { position: absolute; left: 0; right: 0; top: 0; height: 1.3125rem; }
.hero-run-2 { top: 2.125rem; }
.hero-run-3 { top: 4.25rem; }
.hero-run-dot { position: absolute; top: 0.5rem; left: 0; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--hero-run-idle); }
.hero-run-dot-live { background: var(--hero-run-live); }
.hero-run-time { position: absolute; top: 0.0625rem; left: 1.25rem; color: var(--plate-dim); }
.hero-run-name { position: absolute; top: 0; left: 6.875rem; color: var(--plate-muted); }
.hero-run-duration { position: absolute; top: 0.0625rem; right: 0; text-align: right; color: var(--plate-dim); }

/* ── 1024 ─────────────────────────────────────────────────────────────── */
@media (width <= 1200px) {
  .hero-copy { width: 28rem; padding-top: 10.125rem; }
  .hero-chip { padding-right: 0.9375rem; }
  /* o chip (29,5rem) passa da coluna de 28rem em vez de cortar "SOLUTIONS"; a janela começa depois */
  .hero-chip-wrap, .hero-chip { max-width: none; }
  .hero-title-wrap { margin-top: 1.75rem; }
  .hero-subhead { margin-top: 1.25rem; width: 28rem; }
  .hero-tagline { font-size: 1.125rem; line-height: 1.5rem; }
  .hero-actions { margin-top: 2rem; }
  .hero-note-wrap { margin-top: 1.25rem; }
  .hero-note { display: none; }
  .hero-note-1024 { display: block; }
  .hero-tick { top: 34.125rem; left: 60.9375rem; }
  .hero-mark { display: none; }
  .hero-tilt { transform-origin: 47.875rem 22.28125rem; }
  .hero-glow { top: 0.28125rem; left: 15.875rem; width: 48rem; height: 44rem; }
  .hero-window-box { top: 1.6875rem; left: 31.75rem; height: 41.1875rem; width: 32.25rem; }
  .hero-flow-root { transform-origin: 64rem 1.6875rem; }
  .hero-corner-1, .hero-corner-2 { display: none; }
  .hero-corner-3 { display: block; }
  .hero-win-bar { top: 1.4375rem; left: 1.4375rem; right: 7.125rem; gap: 0.75rem; }
  .hero-win-title { font-size: var(--type-label); line-height: var(--line-label); }
  .hero-win-status { top: 1.5625rem; right: 1.5625rem; }
  .hero-win-rule { top: 3.9375rem; width: 32.25rem; }
  .hero-tools { top: 4.75rem; left: 1.4375rem; flex-direction: row; }
  .hero-zoom-wrap { top: 4.75rem; left: 27rem; }
  .hero-zoom { padding-top: 0.4375rem; padding-bottom: 0.4375rem; }
  .hero-conn-left { left: 8.9375rem; height: 4.25rem; width: 14.25rem; }
  .hero-conn-right { top: 19.8125rem; left: 8.9375rem; height: 4.25rem; width: 14.25rem; }
  .hero-conn-wide { display: none; }
  .hero-conn-narrow { display: block; }
  .hero-node { align-items: center; gap: 0; padding: 0.6875rem 0.8125rem; }
  .hero-node-condition { top: 16.0625rem; left: 3.0625rem; width: 11.75rem; }
  .hero-node-log { top: 16.0625rem; left: 17.3125rem; width: 11.75rem; }
  .hero-node-approval { top: 24.0625rem; left: 9.8125rem; width: 12.5rem; }
  .hero-node-trigger { top: 9.6875rem; left: 42rem; width: 11.75rem; }
  .hero-wait-wrap { top: 28.8125rem; left: 13.25rem; }
  .hero-branch-yes { top: 13rem; left: 10.875rem; }
  .hero-branch-no { top: 13rem; left: 18rem; }
  .hero-port { display: none; }
  .hero-flash-condition { top: 15.8125rem; left: 8.6875rem; }
  .hero-flash-log { top: 15.8125rem; left: 22.9375rem; }
  .hero-flash-approval { top: 23.8125rem; left: 15.8125rem; }
  .hero-flash-trigger, .hero-port-trigger { top: 13.3125rem; left: 47.625rem; }
  .hero-runs-rule { top: 31.5625rem; left: 1.4375rem; width: 29.25rem; }
  .hero-runs-label { top: 32.625rem; left: 1.4375rem; }
  .hero-win-note { right: 1.5625rem; bottom: 0.375rem; }
  .hero-runs { top: 34.875rem; left: 1.4375rem; height: 4.75rem; width: 29.25rem; }
  .hero-run { height: 1.25rem; }
  .hero-run-2 { top: 1.75rem; }
  .hero-run-3 { top: 3.5rem; }
  .hero-run-dot { top: 0.4375rem; }
  .hero-run-time { top: 0; left: 1.125rem; }
  .hero-run-name { left: 6.25rem; }
  .hero-run-duration { top: 0; }
}

/* ── 768: texto centrado, janela abaixo (em fluxo) ────────────────────── */
@media (width <= 900px) {
  .hero-flow-root { transform: none; }   /* celular e tablet: o diagrama fica abaixo do texto, no tamanho original */
  .hero { padding-bottom: 5rem; }
  .hero-frame { padding-bottom: 2rem; }
  .hero-copy { margin-inline: auto; width: 100%; max-width: 100%; align-items: center; text-align: center; padding: 2.5rem 0 0; }
  .hero-title-wrap { margin-top: 1.5rem; width: 26rem; max-width: 100%; }
  .hero-subhead { margin-top: 0.75rem; width: 30.0625rem; }
  .hero-tagline { font-size: 1.125rem; line-height: 1.5rem; }
  .hero-actions { margin-top: 1.5rem; }
  .hero-note-wrap { margin-top: 1rem; }
  .hero-note { display: flex; }
  .hero-note-1024 { display: none; }
  .hero-marks { display: none; }
  /* o grupo da janela entra no fluxo; coordenadas re-baseadas no topo da janela (Relay 768: 22.125rem) */
  .hero-tilt { position: relative; inset: auto; height: 36.875rem; margin-top: 2rem; transform-origin: 50% 50%; }
  .hero-glow { top: 0.4375rem; left: 4rem; width: 40rem; height: 36rem; }
  .hero-window-box { top: 0; left: 7.875rem; height: 36.875rem; }
  .hero-window, .hero-window-ring { border-radius: var(--hero-corner-window); }
  .hero-grid-wave { background-position: 0.9375rem 0.5rem; }
  .hero-conn-left { top: 11.875rem; left: 9.5625rem; height: 4rem; width: 13rem; }
  .hero-conn-right { top: 19.625rem; left: 9.5625rem; height: 4rem; width: 13rem; }
  .hero-node { padding-top: 0.5625rem; padding-bottom: 0.5625rem; }
  /* nós de 11.5rem (Relay 10.75): "Registrar no data lake" e "Estoque projetado D+7" não cabem em 10.75; centros mantidos nos eixos do leque */
  .hero-node-condition { top: 15.875rem; left: 3.8125rem; width: 11.5rem; }
  .hero-node-log { top: 15.875rem; left: 16.8125rem; width: 11.5rem; }
  .hero-node-approval { top: 23.625rem; left: 9.8125rem; width: 12.5rem; }
  .hero-node-trigger { top: 8.1875rem; left: 18.25rem; height: 3.75rem; width: 11.5rem; padding-top: 0.6875rem; }
  .hero-wait-wrap { top: 28.375rem; }
  .hero-branch-yes { top: 12.9375rem; left: 10.625rem; }
  .hero-branch-no { top: 12.9375rem; left: 18.1875rem; }
  .hero-port { display: block; }
  .hero-port-overhang { display: none; }
  .hero-port-1 { top: 19.375rem; left: 9.3125rem; }
  .hero-port-2 { top: 19.375rem; left: 22.3125rem; }
  .hero-port-3, .hero-flash-condition { top: 15.625rem; left: 9.3125rem; }
  .hero-port-4, .hero-flash-log { top: 15.625rem; left: 22.3125rem; }
  .hero-port-5, .hero-flash-approval { top: 23.375rem; left: 15.8125rem; }
  .hero-flash-trigger, .hero-port-trigger { top: 11.6875rem; left: 23.75rem; }
  .hero-runs-rule { top: 31.25rem; }
  .hero-runs-label { top: 32.0625rem; }
  .hero-runs { top: 34.0625rem; height: 1.25rem; }
  .hero-run-2, .hero-run-3 { display: none; }
}

/* ── 390 ─────────────────────────────────────────────────────────────── */
@media (width <= 580px) {
  .hero-frame { padding-bottom: 0.75rem; }
  .hero-copy { padding-top: 2rem; }
  .hero-chip { height: auto; min-height: 2rem; gap: 0.5rem; padding: 0.375rem 0.625rem 0.375rem 0.5rem; }
  .hero-chip-text { font-size: var(--hero-type-note); line-height: 1.25rem; letter-spacing: 0; }
  .hero-chip-wrap > .hero-chip:not(.hero-chip-390) { display: none; }
  .hero-chip-wrap > .hero-chip-390 { display: flex; }
  .hero-chip-390 { display: flex; height: auto; flex-direction: column; align-items: center; gap: 0; padding: 0.5rem 0.875rem; }
  .hero-chip-390 .hero-chip-line { display: flex; align-items: center; gap: 0.5rem; }
  .hero-chip-390 .hero-chip-line + .hero-chip-line { padding-left: 0.875rem; }
  .hero-title-wrap { margin-top: 1.5rem; width: 21.875rem; }
  .hero-subhead { margin-top: 0.75rem; width: 20.5rem; font-size: var(--type-body); line-height: var(--line-body); }
  .hero-tagline { font-size: 1rem; line-height: 1.375rem; }
  .hero-actions { margin-top: 2.5rem; width: 21.875rem; max-width: 100%; flex-direction: column; }
  .hero-actions .pill { width: 100%; justify-content: center; }
  .hero-note-wrap { margin-top: 0.875rem; }
  .hero-note { display: none; }
  .hero-note-390 { display: block; }
  .hero-br { display: none; }
  /* 390 (2026-10-17, pedido do Lucas: "o problema da primeira tela é o diagrama no celular"): a janela
     vai para logo depois do título (o JS move .hero-tilt), de borda a borda (24.375rem), sem a barra de
     ferramentas, o zoom e o registro; o leque sobe e cresce para 0.9 (de 0.8158). Nada muda no desktop. */
  .hero-tilt { width: 100%; align-self: stretch; height: 25rem; margin-top: 1.25rem; }
  .hero-glow { top: 0.09375rem; left: -1rem; width: 24rem; height: 25rem; }
  .hero-window-box { left: -1.25rem; height: 25rem; width: 24.375rem; }
  .hero-window, .hero-window-ring { border-radius: 0; }
  .hero-grid-wave { background-position: 0.9375rem 0.25rem; }
  .hero-corner-3 { left: 23.3125rem; }
  .hero-win-bar { left: 1.25rem; right: 7rem; }
  .hero-win-divider, .hero-win-meta { display: none; }
  .hero-win-status { right: 1.25rem; }
  .hero-win-rule { width: 24.375rem; }
  .hero-tools, .hero-zoom-wrap, .hero-runs-rule, .hero-runs-label, .hero-runs { display: none; }
  /* o leque de 768 escalado 0.9 em torno de (67, 130); −24 px à esquerda e −66 px para cima (medido: nós a 18 px das bordas), para começar
     logo abaixo do nó-gatilho. `translate` / `scale` são propriedades próprias: o `transform` das molas não as sobrescreve. */
  .hero-flow-inner { transform-origin: 4.1875rem 8.125rem; translate: -1.5rem -4.125rem; scale: 0.9; }
  .hero-node-trigger { top: 4rem; left: 7rem; transform-origin: top left; scale: 0.9; }
  .hero-flash-trigger, .hero-port-trigger { top: 7.1875rem; left: 12rem; width: 0.4375rem; height: 0.4375rem; }
  .hero-win-note { top: auto; right: 1.25rem; bottom: 0.625rem; }
  .hero-subhead { margin-top: 1.5rem; }
  .hero-actions { margin-top: 1.5rem; }
}

/* ── Pano da entrada (hero): as curvas de nível da Arpier em movimento ──
   Canvas 2D em `assets/home/25-curvas.js`. O pano sangra até as bordas da viewport e
   clareia o fundo (branco → LIGHT); linhas finas não brigam com o texto, então a máscara
   só suaviza a coluna de texto e o topo (sob o menu). As curvas se apagam no início da
   seção do o9; dali para baixo (o9, vão e integrações) o fundo é LIGHT chapado. */
.entrada { position: relative; }
.entrada > .hero, .entrada > .o9, .entrada > .o9 + .gap, .entrada > [data-scroll-blur] { position: relative; z-index: 1; }
/* a cobertura LIGHT sangra até as bordas da viewport como o pano (senão, abaixo de 1440,
   as curvas aparecem nas laterais e a seção vira um cartão) */
.entrada > .o9::before, .entrada > .o9 + .gap::before, .entrada .integ::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  z-index: -1; pointer-events: none; background: var(--bg);
}
.entrada > .o9::before { background: linear-gradient(180deg, transparent 0, var(--bg) 4rem); }
.hero-curvas {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  z-index: 0; overflow: clip; pointer-events: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F8 45%, var(--bg) 100%);
}
.hero-curvas canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.8) 40%, #000 62%), linear-gradient(180deg, transparent 0%, #000 10%, #000 76%, rgba(0,0,0,.45) 92%, transparent 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.8) 40%, #000 62%), linear-gradient(180deg, transparent 0%, #000 10%, #000 76%, rgba(0,0,0,.45) 92%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero-curvas canvas.on { opacity: 1; }
.hero-curvas[hidden] { display: none; }
.hero > .hero-frame { position: relative; z-index: 1; }
/* o campo de pontos estático do pano de fundo recua na entrada (o pano assume) */
html.home .backdrop-dots { opacity: 0.35; }
@media (width <= 900px) {
  .hero-curvas canvas {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.6) 45%, #000 62%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.6) 45%, #000 62%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-curvas canvas { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   02 o9 — "Pioneiros em o9 no Brasil e na América Latina." O pilar
   principal, logo depois do primeiro frame. Superfície clara (o fundo
   LIGHT de borda a borda vem de 25-curvas.css). Faixa de três fatos sob a
   régua. Mapa de horizontes num cartão de papel: colunas tracejadas
   (estratégico · tático · operacional) e uma barra por módulo, a do
   S&OP/IBP em SKY cheio, as demais em SKY suave, a do suporte automatizado
   tracejada (cobre tudo). As barras crescem da esquerda uma vez, ao entrar
   na tela. Módulos à direita como acordeão (título + o que faz sempre
   visíveis; a ficha "a Arpier entrega / precedente" abre num por vez, com
   a altura animada pela grade 0fr → 1fr). Linha do tempo embaixo, com fio
   e pontos que surgem em sequência.
   ═══════════════════════════════════════════════════════════════════════ */
.o9, .o9 * { box-sizing: border-box; }
.o9 { position: relative; padding: 2.5rem var(--page-inset) 1rem; }   /* o fundo LIGHT de borda a borda vem de 25-curvas.css */
.o9-head { padding-bottom: 2rem; }
.o9-head h2, .o9-head p { margin: 0; }
.o9-head h2 { text-wrap: balance; }   /* "…no Brasil / e na América Latina." sem órfã */
.o9-head .section-head-aside { width: 33rem; text-wrap: pretty; }
.o9-rule { display: block; height: 1px; width: 100%; background: var(--hairline); }

/* ── faixa de fatos ───────────────────────────────────────────────────── */
.o9-stats { display: flex; flex-wrap: wrap; gap: 1rem 3.5rem; margin: 0; padding: 1.25rem 0 0; }
.o9-stat { display: grid; gap: 0.125rem; margin: 0; }
.o9-stat dd { grid-row: 1; margin: 0; font-family: var(--font-d); font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; color: var(--text); }
.o9-stat dt { grid-row: 2; font-size: 0.75rem; line-height: 1rem; color: var(--text-dim); }
.o9-stat-m { display: none; }   /* a frase de uma linha do celular */

.o9-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; padding-top: 2rem; }

/* ── mapa de horizontes ───────────────────────────────────────────────── */
.o9-mapa { position: sticky; top: calc(var(--nav-h, 5.5rem) + 1rem); margin: 0; padding: 1.25rem 1.5rem 1rem; border: 1px solid var(--hairline-strong); border-radius: 1rem; background: var(--paper); }   /* fica à vista enquanto o acordeão cresce */
.o9-mapa-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.o9-mapa-title, .o9-mapa-note { margin: 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.o9-mapa-note { color: var(--text-dim); white-space: nowrap; }
.o9-row {
  --lbl: 9.5rem;
  display: grid; grid-template-columns: var(--lbl) repeat(3, minmax(0, 1fr)); align-items: center; min-height: 3rem;
  /* as três divisórias tracejadas dos horizontes, contínuas de linha a linha */
  background-image:
    repeating-linear-gradient(to bottom, var(--hairline-strong) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(to bottom, var(--hairline-strong) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(to bottom, var(--hairline-strong) 0 3px, transparent 3px 7px);
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
  background-position: var(--lbl) 0, calc(var(--lbl) + (100% - var(--lbl)) / 3) 0, calc(var(--lbl) + (100% - var(--lbl)) * 2 / 3) 0;
  transition: opacity 200ms var(--ease-entrance);
}
.o9-row[data-mod] { cursor: pointer; outline: none; }   /* clicar na linha abre a ficha do módulo */
.o9-row-head { min-height: 0; align-items: end; padding-bottom: 0.5rem; }
.o9-lbl { grid-column: 1; padding-right: 0.75rem; font-family: var(--font-b); font-weight: 500; font-size: var(--type-label); line-height: var(--line-label); color: var(--text); transition: color 200ms var(--ease-entrance); }
.o9-hz { grid-column: var(--c); padding: 0 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text); }
.o9-hz small { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--text-dim); }
.o9-bar {
  grid-column: var(--c); display: flex; align-items: center; min-width: 0; height: 2rem; margin: 0 0.375rem; padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 0.5rem; background: var(--accent-soft);
  font-size: 0.75rem; line-height: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent);
  transform-origin: left center;
  transition: background-color 200ms var(--ease-entrance), color 200ms var(--ease-entrance), border-color 200ms var(--ease-entrance), box-shadow 200ms var(--ease-entrance);
}
.o9-bar > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.o9-bar-core { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.o9-bar-dash { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.o9-short { display: none; }   /* rótulo curto da barra estreita no celular */
/* entrada: as barras crescem da esquerda, em cascata; o texto aparece depois */
html.js .o9-bar { transform: scaleX(0); }
html.js .o9-bar > span { opacity: 0; }
html.js .o9-mapa.is-on .o9-bar { transform: none; transition: transform 700ms var(--ease-entrance) calc(var(--i) * 90ms), background-color 200ms var(--ease-entrance), color 200ms var(--ease-entrance), border-color 200ms var(--ease-entrance), box-shadow 200ms var(--ease-entrance); }
html.js .o9-mapa.is-on .o9-bar > span { opacity: 1; transition: opacity 300ms var(--ease-entrance) calc(500ms + var(--i) * 90ms); }
/* a linha do módulo aberto fica marcada no mapa */
.o9-row.is-open .o9-lbl { color: var(--accent); }
.o9-row.is-open .o9-bar { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── os módulos (acordeão) ────────────────────────────────────────────── */
.o9-mods { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.o9-mods li { padding: 0.8125rem 0; border-bottom: 1px solid var(--hairline); transition: opacity 200ms var(--ease-entrance); }
.o9-mod-h { margin: 0; }
.o9-mod {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1rem; gap: 0.75rem; align-items: start; width: 100%; margin: 0; padding: 0.125rem 0;
  border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.o9-mod:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0.25rem; }
.o9-idx { padding-top: 0.125rem; font-size: 0.75rem; line-height: 1.25rem; letter-spacing: 0.0625rem; color: var(--accent); }
.o9-track, .o9-track-legend { display: none; }   /* a régua de horizontes de cada módulo só aparece no celular, no lugar do mapa */
.o9-mod-title { font-family: var(--font-d); font-weight: 700; font-size: 1.0625rem; line-height: 1.5rem; letter-spacing: -0.01em; color: var(--text); transition: color 200ms var(--ease-entrance); }
.o9-chev { width: 1rem; height: 1rem; margin-top: 0.25rem; color: var(--text-dim); transition: color 200ms var(--ease-entrance); }
.o9-chev-v { transform-origin: 8px 8px; transition: transform 300ms var(--ease-entrance); }
.o9-mods li.is-open .o9-chev-v { transform: scaleY(0); }   /* o "+" vira "−" */
.o9-mods li.is-open .o9-chev { color: var(--accent); }
.o9-mod-what { margin: 0.125rem 0 0 3.25rem; font-family: var(--font-b); font-size: 0.9375rem; line-height: 1.375rem; color: var(--text-muted); }
/* a ficha abre pela grade (0fr → 1fr), sem medir altura */
.o9-ficha { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-entrance); }
.o9-ficha > div { overflow: hidden; min-height: 0; }
.o9-mods li.is-open .o9-ficha { grid-template-rows: 1fr; }
.o9-ficha-rows { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0.875rem 0 0.25rem 3.25rem; padding: 0.875rem 1rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: var(--paper); }
.o9-ficha-rows > div { display: contents; }
.o9-ficha-rows dt { font-size: 0.75rem; line-height: 1.375rem; color: var(--text-dim); }
.o9-ficha-rows dd { margin: 0; font-family: var(--font-b); font-size: 0.9375rem; line-height: 1.375rem; color: var(--text); }

/* hover num módulo: a barra e o item dele acendem, o resto recua */
.o9.is-focus [data-mod]:not(.is-hot) { opacity: 0.45; }
.o9-row.is-hot .o9-bar { background: var(--accent); border-color: var(--accent); border-style: solid; color: var(--on-accent); }
.o9-mods li.is-hot .o9-mod-title { color: var(--accent); }

/* ── linha do tempo e pílulas ─────────────────────────────────────────── */
.o9-proof { display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.o9-linha { display: flex; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.o9-linha li { position: relative; flex: 1; min-width: 0; padding: 1.125rem 1.25rem 0 0; }
.o9-linha li::before { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; height: 1px; background: var(--hairline-strong); transform-origin: left center; }
.o9-linha li:last-child::before { display: none; }
.o9-linha li::after { content: ""; position: absolute; left: 0; top: 0; width: 0.5625rem; height: 0.5625rem; border-radius: 9999px; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.o9-ano { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--accent); }
.o9-marco { display: block; margin-top: 0.125rem; font-family: var(--font-b); font-weight: 500; font-size: var(--type-label); line-height: var(--line-label); color: var(--text); text-wrap: pretty; }
/* entrada: fio e pontos surgem em sequência, o texto logo atrás */
html.js .o9-linha li::before { transform: scaleX(0); }
html.js .o9-linha li::after { transform: scale(0); }
html.js .o9-linha li .o9-ano, html.js .o9-linha li .o9-marco { opacity: 0; }
html.js .o9-proof.is-on .o9-linha li::before { transform: none; transition: transform 520ms var(--ease-entrance) calc(200ms + var(--i) * 260ms); }
html.js .o9-proof.is-on .o9-linha li::after { transform: none; transition: transform 360ms var(--ease-entrance) calc(var(--i) * 260ms); }
html.js .o9-proof.is-on .o9-linha li .o9-ano, html.js .o9-proof.is-on .o9-linha li .o9-marco { opacity: 1; transition: opacity 360ms var(--ease-entrance) calc(120ms + var(--i) * 260ms); }
.o9-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; padding-top: 0.75rem; }
.o9-arrow { width: 1rem; height: 1rem; flex-shrink: 0; }
.o9-actions .pill-glass { gap: 0.5rem; }

/* ── 1024 ─────────────────────────────────────────────────────────────── */
@media (width <= 1200px) {
  .o9-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; }
  .o9-row { --lbl: 8rem; }
  .o9-stats { gap: 1rem 2.5rem; }
  .o9-proof { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .o9-linha li { padding-right: 1rem; }
  .o9-actions { padding-top: 0; }
}
/* ── 768 e 390 ────────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .o9 { padding-top: 2rem; }
  .o9-head { padding-bottom: 1.5rem; }
  .o9-head .section-head-aside { width: 35rem; }
  .o9-body { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-top: 1.5rem; }
  .o9-mapa { position: static; }
  .o9-ficha-rows { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
@media (width <= 580px) {
  .o9 { padding-top: 1.5rem; }
  .o9-mapa { padding: 1rem 1rem 0.75rem; }
  .o9-mapa-top { flex-direction: column; gap: 0.25rem; }
  /* o rótulo sobe para uma linha própria e as barras ocupam a largura toda */
  .o9-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.25rem; padding: 0.375rem 0;
    background-position: 0 0, calc(100% / 3) 0, calc(200% / 3) 0; }
  .o9-row-head { padding: 0 0 0.5rem; }
  .o9-row-head .o9-lbl { display: none; }
  .o9-lbl { grid-column: 1 / -1; padding: 0; font-size: 0.8125rem; line-height: 1.125rem; }
  .o9-hz, .o9-bar { grid-column: var(--cm); }
  .o9-hz { padding: 0 0.375rem; font-size: 0.6875rem; }
  .o9-hz small { font-size: 0.625rem; }
  .o9-bar { height: 1.75rem; margin: 0 0.25rem; padding: 0 0.5rem; font-size: 0.6875rem; }
  .o9-full { display: none; }
  .o9-short { display: inline; }
  /* uma lista só: o mapa some e cada módulo ganha a régua de três células (estratégico · tático · operacional) */
  .o9-mapa { display: none; }
  .o9-track-legend { display: flex; gap: 1rem; margin: 0 0 0.5rem; font-size: 0.6875rem; line-height: 1rem; color: var(--text-dim); }
  .o9-track-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
  .o9-track-legend i { width: 0.5rem; height: 0.5rem; border-radius: 0.125rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
  .o9-track-legend span:nth-child(2) i { background: color-mix(in srgb, var(--accent) 55%, var(--paper)); }
  .o9-track-legend span:nth-child(3) i { background: var(--accent); }
  .o9-mod { grid-template-columns: 2rem minmax(0, 1fr) auto 1rem; gap: 0.5rem; align-items: center; }
  .o9-track { display: inline-flex; gap: 0.1875rem; }
  .o9-track i { width: 0.75rem; height: 0.5rem; border-radius: 0.125rem; border: 1px solid var(--hairline-strong); background: transparent; }
  .o9-track i.is-on { background: var(--accent); border-color: var(--accent); }
  .o9-track i.is-on:nth-child(1) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .o9-track i.is-on:nth-child(2) { background: color-mix(in srgb, var(--accent) 55%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 55%, var(--paper)); }
  .o9-track i.is-dash { border-style: dashed; background: transparent !important; border-color: var(--accent) !important; }
  /* fechado: só nome e régua; a frase do módulo entra na ficha */
  .o9-mods li { padding: 0.625rem 0; }
  .o9-mods li:not(.is-open) .o9-mod-what { display: none; }
  .o9-mods li.is-open .o9-mod-what { margin-top: 0.5rem; }
  .o9-mod-what, .o9-ficha-rows { margin-left: 2.5rem; }
  /* fatos em três linhas */
  .o9-stats { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; }
  .o9-stat { display: block; }
  .o9-stat dt, .o9-stat dd { display: none; }
  .o9-stat-m { display: flex; align-items: flex-start; gap: 0.625rem; font-family: var(--font-b); font-size: 0.9375rem; line-height: 1.375rem; color: var(--text-muted); }
  .o9-stat-m::before { content: ""; flex-shrink: 0; width: 0.375rem; height: 0.375rem; margin-top: 0.5rem; border-radius: 9999px; background: var(--accent); }
  .o9-stat-m > span { min-width: 0; text-wrap: pretty; }
  .o9-stat-m b { font-weight: 600; color: var(--text); }
  /* uma pílula principal e um link de texto */
  .o9-actions { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .o9-actions .pill-cta { width: 100%; justify-content: center; }
  .o9-actions .pill-glass { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); }
  .o9-actions .pill-glass .pill-glass-ring { display: none; }
  .o9-ficha-rows { grid-template-columns: minmax(0, 1fr); gap: 0.125rem 0; padding: 0.75rem 0.875rem; }
  .o9-ficha-rows > div + div { margin-top: 0.5rem; }
  .o9-ficha-rows dt { line-height: 1rem; }
  /* linha do tempo em coluna, com o fio na vertical */
  .o9-linha { flex-direction: column; }
  .o9-linha li { padding: 0 0 1rem 1.25rem; }
  .o9-linha li::before { left: 0.25rem; right: auto; top: 0.3125rem; bottom: -0.3125rem; width: 1px; height: auto; transform-origin: center top; }
  .o9-linha li::after { top: 0.3125rem; }
  html.js .o9-linha li::before { transform: scaleY(0); }
  .o9-actions { flex-wrap: wrap; }
}

/* ── movimento reduzido: tudo já no lugar ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.js .o9-bar, html.js .o9-mapa.is-on .o9-bar { transform: none; transition: none; }
  html.js .o9-bar > span, html.js .o9-mapa.is-on .o9-bar > span { opacity: 1; transition: none; }
  html.js .o9-linha li::before, html.js .o9-proof.is-on .o9-linha li::before { transform: none; transition: none; }
  html.js .o9-linha li::after, html.js .o9-proof.is-on .o9-linha li::after { transform: none; transition: none; }
  html.js .o9-linha li .o9-ano, html.js .o9-linha li .o9-marco, html.js .o9-proof.is-on .o9-linha li .o9-ano, html.js .o9-proof.is-on .o9-linha li .o9-marco { opacity: 1; transition: none; }
  .o9-row, .o9-mods li, .o9-ficha, .o9-chev-v, .o9-bar, .o9-lbl, .o9-mod-title { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   03 INTEGRAÇÕES — "Seu ecossistema, conectado." Direção A: esteira de
   dados validada. Superfície clara (LIGHT chapado; as curvas da entrada
   já se apagaram no o9); o único bloco escuro é a placa do Nexus no
   meio do quadro. Camadas: pistas (SVG) < pacotes (SVG) < nós e placa
   (HTML) < vistos da placa (SVG). Os pacotes passam POR TRÁS da placa:
   entram como etiqueta com o nome do dado e saem validados como um ponto
   SKY; o que não passa para na entrada, tracejado, com o motivo. A volta
   do plano (o9 → ERP) contorna o quadro em OCEAN tracejado. Cor nunca é
   o único sinal: legenda, rótulos, traço e sentido do movimento.
   ═══════════════════════════════════════════════════════════════════════ */
.integ, .integ * { box-sizing: border-box; }
.integ {
  position: relative; padding: 2.5rem var(--page-inset) 2.5rem;   /* o fundo LIGHT de borda a borda vem de 25-curvas.css */
}
.integ-head { padding-bottom: 2rem; }
.integ-head h2, .integ-head p { margin: 0; }
.integ-rule { display: block; height: 1px; width: 100%; background: var(--hairline); }

/* ── barra: legenda, rótulo e pausa (em cima, longe da pílula fixa da agente) ── */
.integ-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.25rem; }
.integ-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-muted); }
.integ-legend > span { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.integ-lg { display: inline-block; flex-shrink: 0; }
.integ-lg-in { width: 1.375rem; height: 0.75rem; border-radius: 0.25rem; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: var(--paper); }
.integ-lg-ok { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--accent); }
.integ-lg-held { width: 1.375rem; height: 0.75rem; border-radius: 0.25rem; border: 1px dashed var(--text-dim); background: transparent; }
.integ-lg-back { width: 1.375rem; height: 0; border-top: 2px dashed var(--accent-deep); }
.integ-bar-end { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.integ-example { font-size: 0.75rem; line-height: 1rem; color: var(--text-dim); white-space: nowrap; }
.integ-ciclo { gap: 0.5rem; border: 0; }
.integ-ciclo-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.integ-ciclo-toca { display: none; }
.integ-ciclo[hidden] { display: none; }
.integ-ciclo[aria-pressed="true"] .integ-ciclo-pausa { display: none; }
.integ-ciclo[aria-pressed="true"] .integ-ciclo-toca { display: block; }

/* ── o quadro ─────────────────────────────────────────────────────────── */
.integ-board {
  position: relative; display: grid; align-items: stretch;
  grid-template-columns: 13rem minmax(5rem, 1fr) 12rem minmax(5rem, 1fr) 13rem;
  margin-top: 1.25rem; padding: 0.5rem 2rem 4.25rem;   /* laterais e base: espaço para a volta do plano */
}
.integ-lanes, .integ-traffic, .integ-checks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.integ-lanes { z-index: 0; }
.integ-traffic { z-index: 1; }
.integ-col { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.integ-checks { z-index: 3; }
.integ-src { grid-column: 1; }
.integ-gatecol { grid-column: 3; }
.integ-dst { grid-column: 5; }
.integ-col-label { margin: 0; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0625rem; color: var(--text-dim); white-space: nowrap; }
.integ-gatecol .integ-col-label { text-align: center; }
.integ-dst .integ-col-label { text-align: left; }

/* pistas */
.integ-lane { fill: none; stroke: rgba(12, 12, 12, 0.22); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 200ms var(--ease-entrance), stroke-width 200ms var(--ease-entrance), opacity 200ms var(--ease-entrance); }
.integ-loop { fill: none; stroke: color-mix(in srgb, var(--accent-deep) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 200ms var(--ease-entrance); }
/* entrada: cada pista se desenha da origem para o destino, uma vez (pathLength="1") */
html.js .integ-board .integ-lane { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.js .integ-board.is-drawn .integ-lane { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-entrance), stroke 200ms var(--ease-entrance), stroke-width 200ms var(--ease-entrance), opacity 200ms var(--ease-entrance); }
html.js .integ-board .integ-loop { opacity: 0; }
html.js .integ-board.is-drawn .integ-loop { opacity: 1; transition: opacity 600ms var(--ease-entrance) 500ms; }
/* o tráfego aparece depois que as pistas se desenham */
html.js .integ-traffic { opacity: 0; transition: opacity 400ms var(--ease-entrance); }
html.js .integ-board.is-live .integ-traffic { opacity: 1; }

/* foco num sistema: as pistas dele ficam inteiras, o resto recua */
.integ-board.is-focus .integ-lane:not(.is-hot), html.js .integ-board.is-drawn.is-focus .integ-loop:not(.is-hot), .integ-board.is-focus .integ-loop:not(.is-hot) { opacity: 0.3; }
.integ-board.is-focus .integ-lane.is-hot { stroke: var(--accent); stroke-width: 1.5; }
.integ-board.is-focus .integ-pkt:not(.is-hot) { opacity: 0.25; }
.integ-pkt { transition: opacity 200ms var(--ease-entrance); }

/* pacotes: etiqueta antes da placa, ponto depois dela */
.integ-chip-box { fill: var(--paper); stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 1; }
.integ-chip-led { fill: var(--accent); }
.integ-chip-txt { font-family: var(--font-b); font-size: 0.6875rem; font-weight: 500; font-variant-numeric: tabular-nums; fill: var(--text); dominant-baseline: central; }
.integ-pkt.is-held .integ-chip-box { fill: var(--bg); stroke: var(--text-dim); stroke-dasharray: 3 2.5; }
.integ-pkt.is-held .integ-chip-led { fill: var(--text-dim); }
.integ-pkt.is-held .integ-chip-txt { fill: var(--text-muted); }
.integ-dot { fill: var(--accent); }
.integ-dot-back { fill: var(--accent-deep); }

/* nós */
.integ-nodes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.integ-dst .integ-nodes { flex: 1; justify-content: center; gap: 2.25rem; }
.integ-node {
  position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; height: 3rem; margin: 0; padding: 0 0.875rem 0 0.375rem;
  border: 1px solid var(--hairline-strong); border-radius: 0.875rem; background: var(--paper);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  transition: border-color 200ms var(--ease-entrance), background-color 200ms var(--ease-entrance), opacity 200ms var(--ease-entrance);
}
.integ-dst .integ-node { padding: 0 0.375rem 0 0.875rem; }
.integ-node:focus-visible, .integ-gate:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.integ-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem;
  border-radius: 0.625rem; background: var(--bg); color: var(--text-muted);
  transition: color 200ms var(--ease-entrance), background-color 200ms var(--ease-entrance);
}
.integ-icon svg { width: 1.25rem; height: 1.25rem; display: block; }
.integ-name { flex: 1; min-width: 0; font-family: var(--font-b); font-weight: 500; font-size: var(--type-label); line-height: var(--line-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integ-name-short { display: none; }
/* LED: aceso por 240 ms quando o nó envia (SKY) ou recebe (SKY; OCEAN quando é o plano de volta) */
.integ-led { flex-shrink: 0; width: 0.4375rem; height: 0.4375rem; border-radius: 9999px; background: rgba(12, 12, 12, 0.18); transition: background-color 240ms var(--ease-entrance); }
.integ-led.is-tx, .integ-led.is-rx { background: var(--accent); }
.integ-led.is-back { background: var(--accent-deep); }
@media (hover: hover) and (pointer: fine) {
  .integ-node:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  .integ-node:hover .integ-icon { color: var(--accent); background: var(--accent-soft); }
}
.integ-node.is-hot { border-color: var(--accent); }
.integ-node.is-hot .integ-icon { color: var(--accent); background: var(--accent-soft); }
.integ-board.is-focus .integ-node:not(.is-hot) { opacity: 0.55; }
.integ-node[aria-pressed="true"] { background: var(--accent-soft); }

/* a placa do Nexus: o único bloco escuro do quadro; os pacotes passam por trás dela */
.integ-gate {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
  width: 100%; margin: 0; padding: 1rem; border: 1px solid var(--plate-hairline-strong); border-radius: 1rem;
  background: var(--plate); color: var(--plate-text); font: inherit; text-align: center; cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: border-color 200ms var(--ease-entrance);
}
.integ-gate-kicker { font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.0625rem; color: var(--plate-dim); }
.integ-gate-title { font-family: var(--font-d); font-weight: 700; font-size: 1.25rem; line-height: 1.5rem; letter-spacing: -0.01em; color: var(--plate-text); }
.integ-gate-sub { font-size: 0.6875rem; line-height: 1rem; color: var(--plate-accent); }
@media (hover: hover) and (pointer: fine) { .integ-gate:hover { border-color: color-mix(in srgb, var(--plate-accent) 60%, transparent); } }
.integ-gate[aria-pressed="true"], .integ-gate.is-hot { border-color: var(--plate-accent); }
/* vistos logo depois da saída da placa (um por pista): o ponto validado passa por baixo do carimbo */
.integ-check-ring { fill: var(--paper); stroke: var(--hairline-strong); stroke-width: 1; transition: stroke 200ms var(--ease-entrance), fill 200ms var(--ease-entrance); }
.integ-check-mark { fill: none; stroke: var(--on-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 160ms var(--ease-entrance); }
.integ-check.is-ok .integ-check-ring { fill: var(--accent); stroke: var(--accent); }
.integ-check.is-ok .integ-check-mark { opacity: 1; }
.integ-check.is-held .integ-check-ring { stroke: var(--text-muted); stroke-dasharray: 2 2; }

.integ-loop-tag { position: absolute; z-index: 3; transform: translate(-50%, -50%); padding: 0 0.5rem; background: var(--bg); font-size: 0.6875rem; line-height: 1rem; color: var(--accent-deep); white-space: nowrap; pointer-events: none; }

/* ── legenda do sistema e registro ────────────────────────────────────── */
.integ-foot { display: grid; grid-template-columns: minmax(0, 1fr) 28rem; gap: 3rem; align-items: start; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.integ-caption { min-width: 0; min-height: 4.5rem; }
.integ-route { margin: 0; font-size: var(--type-label); line-height: var(--line-label); color: var(--accent); }
.integ-desc { margin: 0.25rem 0 0; max-width: 40rem; font-family: var(--font-b); font-size: var(--type-body); line-height: var(--line-body); color: var(--text-muted); }
.integ-logbox { border: 1px solid var(--plate-hairline-strong); border-radius: 0.875rem; background: var(--plate); padding: 0.75rem 1rem 0.625rem; }
.integ-log-head { display: flex; justify-content: space-between; margin: 0 0 0.375rem; font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.0625rem; color: var(--plate-dim); }
.integ-log { margin: 0; padding: 0; list-style: none; }
.integ-log li { display: grid; grid-template-columns: 4.25rem 7.5rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: baseline; min-height: 1.5rem; padding: 0.125rem 0; border-top: 1px solid var(--plate-hairline); font-size: 0.75rem; line-height: 1.25rem; color: var(--plate-muted); }
.integ-log li:first-child { border-top: 0; }
.integ-log .t { color: var(--plate-dim); }
.integ-log .r { color: var(--plate-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integ-log .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integ-log .s-ok { color: var(--plate-accent); white-space: nowrap; }
.integ-log .s-held { color: var(--plate-muted); white-space: nowrap; }
html.js .integ-log li.is-new { animation: integ-entra 220ms var(--ease-entrance) 1; }
@keyframes integ-entra { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: none; } }

/* ── 1024 ─────────────────────────────────────────────────────────────── */
@media (width <= 1200px) {
  .integ-board { grid-template-columns: 11.5rem minmax(4rem, 1fr) 10.5rem minmax(4rem, 1fr) 11.5rem; padding-inline: 1.75rem; }
  .integ-foot { grid-template-columns: minmax(0, 1fr) 25rem; gap: 2rem; }
  .integ-log li { grid-template-columns: 4rem 6.5rem minmax(0, 1fr) auto; }
}

/* ── 768 e 390: a esteira desce de cima para baixo; pacotes só como pontos ── */
@media (width <= 900px) {
  .integ { padding-top: 2rem; }
  .integ-head { padding-bottom: 1.5rem; }
  .integ-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .integ-board {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 3.5rem auto 3.5rem auto;
    padding: 1.25rem 0 0.75rem 1.75rem;   /* à esquerda: a volta do plano */
  }
  .integ-src { grid-row: 1; grid-column: 1; }
  .integ-gatecol { grid-row: 3; grid-column: 1; }
  .integ-dst { grid-row: 5; grid-column: 1; }
  .integ-gatecol .integ-col-label { display: none; }
  .integ-src .integ-col-label, .integ-dst .integ-col-label { text-align: left; }
  .integ-dst .integ-col-label { order: 2; }
  .integ-nodes, .integ-dst .integ-nodes { flex-direction: row; justify-content: space-between; gap: 0.5rem; }
  .integ-nodes > li { flex: 1 1 0; min-width: 0; }
  .integ-node, .integ-dst .integ-node { flex-direction: column; justify-content: center; gap: 0.375rem; height: auto; padding: 0.625rem 0.25rem 0.5rem; text-align: center; }
  .integ-dst .integ-node .integ-led { order: 3; }
  .integ-name { flex: none; width: 100%; font-size: 0.8125rem; line-height: 1rem; text-align: center; }
  .integ-gate { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 0.75rem; min-height: 4.5rem; padding: 0.75rem 1rem; }
  .integ-gate-title { font-size: 1.125rem; line-height: 1.375rem; }
  .integ-loop-tag { display: none; }
  .integ-foot { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .integ-caption { min-height: 0; }
}
@media (width <= 580px) {
  .integ { padding-top: 1.5rem; }
  .integ-board { padding-left: 1.5rem; }
  .integ-nodes, .integ-dst .integ-nodes { gap: 0.375rem; }
  .integ-node { border-radius: 0.75rem; }
  .integ-icon { width: 2rem; height: 2rem; }
  .integ-name { font-size: 0.75rem; }
  .integ-name-full { display: none; }
  .integ-name-short { display: inline; }
  .integ-legend { gap: 0.5rem 1rem; }
  .integ-log li { grid-template-columns: 3.75rem minmax(0, 1fr) auto; }
  .integ-log .d { display: none; }
}

/* ── movimento reduzido: o JS desenha um quadro parado; aqui, sem transições ── */
@media (prefers-reduced-motion: reduce) {
  .integ-lane, .integ-loop, .integ-pkt, .integ-node, .integ-icon, .integ-led, .integ-gate, .integ-check-ring, .integ-check-mark { transition: none; }
  html.js .integ-board .integ-lane, html.js .integ-board.is-drawn .integ-lane { stroke-dashoffset: 0; transition: none; }
  html.js .integ-board .integ-loop, html.js .integ-board.is-drawn .integ-loop { opacity: 1; transition: none; }
  html.js .integ-log li.is-new { animation: none; }
  html.js .integ-traffic, html.js .integ-board.is-live .integ-traffic { opacity: 1; transition: none; }
}

/* ── 04 pilares ───────────────────────────────────────────────────────────
   Porte de src/style/sections/product.css (Relay) para a home da Arpier.
   Três linhas de recurso, cada uma com um cartão vivo (.card): gráfico
   isométrico, trace e aprovação em chat. Fundo transparente sobre a página
   clara; as classes mantêm o prefixo product- para o JS portar quase
   verbatim. Medidas em rem (px ÷ 16) na grade de quadros 1440/1024/768/390.
   A seção tem altura automática (no Relay era fixa por quadro). */
:root {
  /* tokens da seção — todos derivados de 00-base.css */
  --product-hairline: var(--hairline);                                        /* hairlines entre linhas, eixo do trace */
  --product-card-rule: var(--hairline);                                       /* régua sob a cabeça do cartão */
  --product-trace-rule: color-mix(in srgb, var(--text) 6%, transparent);      /* réguas entre passos do trace */
  --product-chart-baseline: var(--hairline);
  --product-tick: var(--hairline-strong);
  --product-index: var(--accent);                                             /* índice 01/02/03 */
  --product-span-from: var(--plate-accent);                                   /* #6E9BFF → SKY no span longo */
  --product-span-to: var(--accent);
  --product-span-short: color-mix(in srgb, var(--text) 55%, transparent);     /* spans brancos do Relay → NIGHT 55% */
  --product-pending: var(--accent-soft);                                      /* preenchimento do passo pendente */
  --product-pending-border: color-mix(in srgb, var(--accent) 55%, transparent);
  --product-type-row-title: 1.625rem; --product-line-row-title: 2rem;
  --product-type-card: 0.875rem;      --product-line-card: 1.25rem;
  --product-type-button: 0.875rem;    --product-line-button: 1.25rem;
  --product-letter-spacing-index: 0.0625rem;
  --product-corner-span: 0.25rem;
  --product-corner-button: 0.5rem;
  --product-pad-top: 6rem;
}
@media (width <= 1200px) { :root { --product-type-row-title: 1.5rem; --product-corner-span: 0.1736875rem; --product-pad-top: 5rem; } }
@media (width <= 900px)  { :root { --product-type-row-title: 1.25rem; --product-line-row-title: 1.75rem; --product-pad-top: 2.75rem; } }
@media (width <= 580px)  { :root { --product-type-row-title: 1.125rem; --product-line-row-title: 1.5rem; --product-type-card: 0.75rem; --product-line-card: 1.125rem; --product-type-button: 0.8125rem; --product-line-button: 1rem; --product-corner-span: 0.125rem; --product-corner-button: 0.25rem; --product-pad-top: 3rem; } }

/* layout — 1440: conteúdo 1280 a partir de x80 */
.product { position: relative; display: flex; flex-direction: column; padding: var(--product-pad-top) var(--page-inset) 0; }
.product-head { padding-bottom: 4rem; }
.product-head-title, .product-head-aside { margin: 0; }
.product-hairline { display: block; flex-shrink: 0; height: 1px; width: 100%; background: var(--product-hairline); transform-origin: left; }
.product-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 3rem 0; }
.product-row.is-flip { flex-direction: row-reverse; }
.product-row:last-of-type { padding-bottom: 0; }
.product-copy { display: flex; width: 27.5rem; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 1rem; }
.product-index { margin: 0; font-size: var(--type-label); line-height: var(--line-label); letter-spacing: var(--product-letter-spacing-index); color: var(--product-index); }
.product-index-strip { display: flex; }
.product-index-char { display: block; height: 1lh; overflow: clip; }
.product-index-char > span { display: block; }
.product-index-char > span > span { display: block; }
.product-row-title {
  margin: 0; font-family: var(--font-d); font-weight: 600; font-size: var(--product-type-row-title); line-height: var(--product-line-row-title);
  letter-spacing: -0.02em; color: var(--text); text-wrap: balance;
}
.product-body { margin: 0; font-family: var(--font-b); font-size: var(--type-body); line-height: var(--line-body); color: var(--text-muted); }
/* link da linha (novo, não existe no Relay): Inter 500 14/20 em SKY; a seta desliza 4px no hover por mola (JS) */
.product-link {
  display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-b); font-size: var(--type-label); line-height: var(--line-label);
  font-weight: 500; color: var(--accent); text-decoration: none;
}
.product-link-arrow { display: inline-block; }
.product-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.25rem; border-radius: 0.125rem; }
html:not(.js) .product-link:hover .product-link-arrow { transform: translate3d(4px, 0, 0); }
.product-card-wrap { flex-shrink: 0; }
.product-card { position: relative; width: 47.5rem; height: 20.5rem; flex-shrink: 0; margin: 0; overflow: clip; }
.product-mono { font-size: var(--product-type-card); line-height: var(--product-line-card); }
.product-card p, .product-card dl, .product-card ul, .product-card figcaption { margin: 0; padding: 0; list-style: none; }
.product-card img { display: block; max-width: none; }

/* cartão trace (linha 02, Visual 3888:5827) */
.product-trace-run { position: absolute; top: 2.0625rem; left: 1.9375rem; white-space: nowrap; color: var(--text); }
.product-trace-summary { position: absolute; top: 2.0625rem; right: 2.0625rem; width: 17.5rem; text-align: right; white-space: nowrap; color: var(--text-dim); }
.product-typed { position: relative; }
.product-typed-rest { color: transparent; }
.product-trace-head-rule { position: absolute; top: 3.9375rem; left: 1.9375rem; height: 1px; width: 43.5rem; background: var(--product-card-rule); }
.product-trace-rule { position: absolute; left: 1.9375rem; height: 1px; width: 43.5rem; background: var(--product-trace-rule); }
.product-trace-rule-1 { top: 7.5625rem; } .product-trace-rule-2 { top: 10.1875rem; } .product-trace-rule-3 { top: 12.8125rem; }
.product-trace-icon { position: absolute; left: 1.9375rem; width: 1rem; height: 1rem; color: var(--accent); }
.product-trace-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.product-trace-icon img { width: 100%; height: 100%; }
.product-trace-clock { opacity: 0; }
.product-trace-label { position: absolute; left: 3.6875rem; white-space: nowrap; color: var(--text); }
.product-trace-label.is-pending { color: var(--text-muted); }
.product-trace-span { position: absolute; height: 0.75rem; transform-origin: left; border-radius: var(--product-corner-span); transform: scaleX(0); }
.product-trace-span svg { display: block; width: 100%; height: 100%; }
.product-trace-span-0 { background: linear-gradient(to right, var(--product-span-from), var(--product-span-to)); }
.product-trace-span-1, .product-trace-span-2 { background: var(--product-span-short); }
.product-trace-dash { fill: var(--product-pending); stroke: var(--product-pending-border); }
.product-trace-value { position: absolute; right: 2.0625rem; width: 7.5rem; text-align: right; white-space: nowrap; color: var(--text-dim); opacity: 0; }
.product-trace-value.product-trace-pending-value { width: auto; } /* vence os width por quadro: "com o planejador" é mais longo que "on Dana" */
.product-trace-icon-0 { top: 5.75rem; } .product-trace-label-0, .product-trace-value-0 { top: 5.6875rem; } .product-trace-value-0 { top: 5.75rem; }
.product-trace-span-0 { top: 5.9375rem; left: 13.9375rem; width: 14.25rem; }
.product-trace-icon-1 { top: 8.375rem; } .product-trace-label-1 { top: 8.3125rem; } .product-trace-value-1 { top: 8.375rem; }
.product-trace-span-1 { top: 8.5625rem; left: 28.1875rem; width: 0.9375rem; }
.product-trace-icon-2 { top: 11rem; } .product-trace-label-2 { top: 10.9375rem; } .product-trace-value-2 { top: 11rem; }
.product-trace-span-2 { top: 11.1875rem; left: 29.125rem; width: 0.375rem; }
.product-trace-icon-3 { top: 13.625rem; } .product-trace-label-3 { top: 13.5625rem; } .product-trace-value-3 { top: 13.625rem; }
.product-trace-span-3 { top: 13.8125rem; left: 29.25rem; width: 3.75rem; }
.product-trace-axis { position: absolute; top: 16.4375rem; left: 13.9375rem; height: 1px; width: 23.75rem; background: var(--product-hairline); }
.product-trace-tick { position: absolute; top: 16.5rem; height: 0.3125rem; width: 1px; background: var(--product-tick); }
.product-trace-tick-label { position: absolute; top: 17.0625rem; width: 3.75rem; transform: translateX(-50%); text-align: center; white-space: nowrap; color: var(--text-dim); }
.product-trace-tick-0, .product-trace-tick-label-0 { left: 13.9375rem; }
.product-trace-tick-1, .product-trace-tick-label-1 { left: 19.875rem; }
.product-trace-tick-2, .product-trace-tick-label-2 { left: 25.8125rem; }
.product-trace-tick-3, .product-trace-tick-label-3 { left: 31.75rem; }
.product-trace-tick-4, .product-trace-tick-label-4 { left: 37.6875rem; }

/* cartão de aprovação em chat (linha 03, 3888:5885) */
.product-approval-channel { position: absolute; top: 1.9375rem; left: 1.9375rem; font-family: var(--font-b); font-size: var(--type-label); line-height: var(--line-label); font-weight: 500; white-space: nowrap; color: var(--text); }
.product-approval-day { position: absolute; top: 1.9375rem; right: 1.9375rem; width: 7.5rem; text-align: right; color: var(--text-dim); }
.product-approval-rule { position: absolute; top: 3.9375rem; left: 1.9375rem; height: 1px; width: 43.5rem; background: var(--product-card-rule); }
.product-approval-typing { position: absolute; top: 7.75rem; left: 4.4375rem; display: flex; gap: 0.25rem; opacity: 0; }
.product-approval-typing span { display: block; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--text-dim); }
.product-approval-message { position: absolute; inset: 0; opacity: 0; }
/* avatar: quadrado 28×28, cantos 8, SKY com "N" branco (substitui o SVG do Relay) */
.product-approval-avatar {
  position: absolute; top: 4.75rem; left: 1.9375rem; display: flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center;
  border-radius: 0.5rem; background: var(--accent); color: var(--on-accent); font-family: var(--font-d); font-weight: 700; font-size: 0.9375rem; line-height: 1;
}
.product-approval-sender { position: absolute; top: 5rem; left: 4.4375rem; font-family: var(--font-b); font-size: var(--type-label); line-height: var(--line-label); font-weight: 500; white-space: nowrap; color: var(--text); }
.product-approval-time { position: absolute; top: 5rem; right: 1.9375rem; white-space: nowrap; color: var(--text-dim); }
.product-approval-text { position: absolute; top: 7.1875rem; left: 4.4375rem; width: 41rem; font-family: var(--font-b); font-size: var(--type-body); line-height: var(--line-body); color: var(--text-muted); }
.product-approval-bar { position: absolute; top: 9.6875rem; left: 4.4375rem; height: 5rem; width: 0.1875rem; border-radius: 9999px; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.product-approval-field { position: absolute; inset: 0; opacity: 0; }
.product-approval-key { position: absolute; left: 5.5rem; white-space: nowrap; color: var(--text-dim); }
.product-approval-val { position: absolute; left: 12rem; margin: 0; font-family: var(--font-b); font-weight: 500; white-space: nowrap; color: var(--text); }
.product-approval-key-0 { top: 9.6875rem; } .product-approval-val-0 { top: 9.6875rem; font-size: var(--type-label); line-height: var(--line-label); }
.product-approval-key-1 { top: 11.4375rem; } .product-approval-val-1 { top: 11.4375rem; font-size: var(--type-label); line-height: var(--line-label); }
.product-approval-key-2 { top: 13.3125rem; } .product-approval-val-2 { top: 13.1875rem; font-size: var(--type-body); line-height: var(--line-body); }
.product-mini {
  position: absolute; top: 15.6875rem; display: flex; align-items: center; gap: 0.5rem; overflow: clip;
  border-radius: var(--product-corner-button); font-family: var(--font-b); font-size: var(--product-type-button); line-height: var(--product-line-button);
  font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-float); opacity: 0;
}
.product-mini img { width: 0.875rem; height: 0.875rem; }
.product-mini-approve { left: 4.4375rem; background: var(--accent); padding: 0.75rem 1rem; color: var(--on-accent); }
.product-mini-hold { left: 12.125rem; border: 1px solid var(--hairline-strong); background: var(--paper); padding: 0.6875rem 0.9375rem; color: var(--text); }
.product-approval-waiting { position: absolute; top: 17.1875rem; right: 1.9375rem; width: 10rem; text-align: right; white-space: nowrap; color: var(--text-dim); opacity: 0; }

/* cartão do gráfico isométrico (linha 01, 3888:5910) */
.product-cube { position: absolute; width: 4.75rem; transform-origin: 50% 100%; transform: scaleY(0); }
.product-cube img { width: 100%; height: 100%; }
.product-cap { position: absolute; height: 2rem; width: 3.75rem; opacity: 0; }
.product-cap img { height: 2rem; width: 3.75rem; }
.product-cap-glow { position: absolute; margin-top: -1.25rem; margin-left: -1.25rem; height: 4.5rem; width: 6.25rem; opacity: 0; }
.product-cap-glow img { height: 4.5rem; width: 6.25rem; }
.product-cube-0 { top: 9.0625rem; left: 2.0625rem; height: 6.75rem; } .product-cap-0 { top: 9.0625rem; left: 2.5625rem; }
.product-cube-1 { top: 7.8125rem; left: 9.75rem; height: 8rem; } .product-cap-1 { top: 7.8125rem; left: 10.25rem; }
.product-cube-2 { top: 6.4375rem; left: 17.4375rem; height: 9.375rem; } .product-cap-2 { top: 6.4375rem; left: 17.9375rem; }
.product-cube-3 { top: 4.9375rem; left: 25.125rem; height: 10.875rem; } .product-cap-3 { top: 4.9375rem; left: 25.625rem; }
.product-cube-4 { top: 3.4375rem; left: 32.8125rem; height: 12.375rem; } .product-cap-4 { top: 3.4375rem; left: 33.3125rem; }
.product-cube-5 { top: 1.9375rem; left: 40.5625rem; height: 13.875rem; } .product-cap-5, .product-cap-glow { top: 1.9375rem; left: 41.0625rem; }
.product-chart-baseline { position: absolute; top: 16.1875rem; left: 1.9375rem; height: 1px; width: 43.5rem; background: var(--product-chart-baseline); }
.product-day { position: absolute; top: 17.1875rem; width: 5rem; transform: translateX(-50%); text-align: center; color: var(--text-dim); }
.product-day.is-today { color: var(--accent); }
.product-day-0 { left: 4.4375rem; } .product-day-1 { left: 12.125rem; } .product-day-2 { left: 19.8125rem; }
.product-day-3 { left: 27.5rem; } .product-day-4 { left: 35.1875rem; } .product-day-5 { left: 42.9375rem; }
/* legenda em fluxo (no Relay eram dois absolutos): a cópia pt-BR é mais longa */
.product-chart figcaption { position: absolute; top: 1.9375rem; left: 1.9375rem; display: flex; gap: 1rem; white-space: nowrap; }
.product-chart-caption { color: var(--text-muted); }
.product-chart-average { color: var(--text-dim); }

/* sem JS: quadro de repouso */
html:not(.js) .product-trace-span, html:not(.js) .product-cube, html:not(.js) .product-approval-bar { transform: none; }
html:not(.js) .product-trace-value, html:not(.js) .product-trace-clock, html:not(.js) .product-approval-message, html:not(.js) .product-approval-field,
html:not(.js) .product-mini, html:not(.js) .product-approval-waiting, html:not(.js) .product-cap { opacity: 1; }
html:not(.js) .product-check { opacity: 1; stroke-dashoffset: 0; }

/* 1024 (3888:10220) — conteúdo 928 a partir de x48; cartões 528 a 0.695 */
@media (width <= 1200px) {
  .product-head { padding-bottom: 2rem; }
  .product-head-aside { width: 30rem; }
  .product-row { padding: 2rem 0; }
  .product-copy { width: 22.5rem; }
  .product-card { width: 33rem; }
  .product-trace { height: 20.25rem; }
  .product-trace-run { top: 1.4375rem; left: 1.4375rem; }
  .product-trace-summary { top: 1.4375rem; right: 1.4375rem; width: 9.75rem; }
  .product-trace-head-rule { top: 3.4375rem; left: 1.4375rem; width: 30rem; }
  .product-trace-rule { left: 1.4375rem; width: 30rem; }
  .product-trace-rule-1 { top: 6.9375rem; } .product-trace-rule-2 { top: 9.6875rem; } .product-trace-rule-3 { top: 12.4375rem; }
  .product-trace-icon { left: 1.4375rem; width: 0.6875rem; height: 0.6875rem; }
  .product-trace-label { left: 2.8125rem; font-size: 0.8125rem; } /* pt-BR: "ramo: acima do limite" precisa parar antes do eixo */
  .product-trace-span { height: 0.5rem; }
  .product-trace-value { right: 1.4375rem; width: 4rem; }
  .product-trace-icon-0 { top: 5.1875rem; } .product-trace-label-0, .product-trace-value-0 { top: 4.9375rem; }
  .product-trace-span-0 { top: 5.3125rem; left: 11.8125rem; width: 9.875rem; }
  .product-trace-icon-1 { top: 7.9375rem; } .product-trace-label-1, .product-trace-value-1 { top: 7.6875rem; }
  .product-trace-span-1 { top: 8.0625rem; left: 11.8125rem; width: 0.625rem; }
  .product-trace-icon-2 { top: 10.6875rem; } .product-trace-label-2, .product-trace-value-2 { top: 10.4375rem; }
  .product-trace-span-2 { top: 10.8125rem; left: 11.8125rem; width: 0.25rem; }
  .product-trace-icon-3 { top: 13.4375rem; } .product-trace-label-3, .product-trace-value-3 { top: 13.1875rem; }
  .product-trace-span-3 { top: 13.5625rem; left: 11.8125rem; width: 2.625rem; }
  .product-trace-axis { top: 16.9375rem; left: 11.8125rem; width: 13.75rem; }
  .product-trace-tick { top: 17rem; height: 0.1875rem; }
  .product-trace-tick-label { top: 17.4375rem; }
  .product-trace-tick-0, .product-trace-tick-label-0 { left: 11.8125rem; }
  .product-trace-tick-1, .product-trace-tick-label-1 { left: 15.25rem; }
  .product-trace-tick-2, .product-trace-tick-label-2 { left: 18.6875rem; }
  .product-trace-tick-3, .product-trace-tick-label-3 { left: 22.0625rem; }
  .product-trace-tick-4, .product-trace-tick-label-4 { left: 25.5rem; }
  .product-approval { height: 20rem; }
  .product-approval-channel { top: 1.4375rem; left: 1.4375rem; }
  .product-approval-day { top: 1.4375rem; right: 1.4375rem; }
  .product-approval-rule { top: 3.4375rem; left: 1.4375rem; width: 30rem; }
  .product-approval-typing { top: 7.125rem; left: 3.9375rem; }
  .product-approval-avatar { top: 4.6875rem; left: 1.4375rem; }
  .product-approval-sender { top: 4.9375rem; left: 3.9375rem; }
  .product-approval-time { top: 4.9375rem; right: 1.4375rem; }
  .product-approval-text { top: 6.375rem; left: 3.9375rem; width: 27.625rem; font-size: var(--type-label); line-height: var(--line-label); } /* pt-BR: duas linhas de 14/20 */
  .product-approval-bar { top: 8.9375rem; left: 3.9375rem; height: 5.75rem; }
  .product-approval-key { left: 5.0625rem; }
  .product-approval-val { left: 10.8125rem; }
  .product-approval-key-0 { top: 9.1875rem; } .product-approval-val-0 { top: 9.0625rem; }
  .product-approval-key-1 { top: 11.0625rem; } .product-approval-val-1 { top: 10.9375rem; }
  .product-approval-key-2 { top: 12.9375rem; } .product-approval-val-2 { top: 12.8125rem; }
  .product-mini-approve { left: 3.9375rem; }
  .product-mini-hold { left: 11.625rem; }
  .product-approval-waiting { top: 16.4375rem; right: 1.4375rem; }
  .product-chart { height: 20rem; }
  .product-cube { width: 3.5625rem; }
  .product-cap { height: 1.5rem; width: 2.8125rem; } .product-cap img { height: 1.5rem; width: 2.8125rem; }
  .product-cap-glow { margin-top: -0.9375rem; margin-left: -0.9375rem; height: 3.375rem; width: 4.6875rem; } .product-cap-glow img { height: 3.375rem; width: 4.6875rem; }
  .product-cube-0 { top: 10.0625rem; left: 1.4375rem; height: 5.75rem; } .product-cap-0 { top: 10.0625rem; left: 1.8125rem; }
  .product-cube-1 { top: 9rem; left: 6.75rem; height: 6.8125rem; } .product-cap-1 { top: 9rem; left: 7.125rem; }
  .product-cube-2 { top: 7.8125rem; left: 12.0625rem; height: 8rem; } .product-cap-2 { top: 7.8125rem; left: 12.4375rem; }
  .product-cube-3 { top: 6.5rem; left: 17.3125rem; height: 9.3125rem; } .product-cap-3 { top: 6.5rem; left: 17.6875rem; }
  .product-cube-4 { top: 5.25rem; left: 22.5625rem; height: 10.5625rem; } .product-cap-4 { top: 5.25rem; left: 22.9375rem; }
  .product-cube-5 { top: 4rem; left: 27.875rem; height: 11.875rem; } .product-cap-5, .product-cap-glow { top: 4rem; left: 28.25rem; }
  .product-chart-baseline { top: 16.375rem; left: 1.4375rem; width: 30rem; }
  .product-day-0 { left: 3.1875rem; } .product-day-1 { left: 8.5rem; } .product-day-2 { left: 13.8125rem; }
  .product-day-3 { left: 19.0625rem; } .product-day-4 { left: 24.3125rem; } .product-day-5 { left: 29.625rem; }
  .product-chart figcaption { top: 1.4375rem; left: 1.4375rem; }
}
/* 768 (3832:7487) — conteúdo 688 a partir de x40; as linhas empilham a cópia sobre um cartão de 528 centrado */
@media (width <= 900px) {
  .product { gap: 1rem; }
  .product-head { padding-bottom: 1rem; }
  .product-head-stack { gap: 1rem; }
  .product-head-aside { width: 32.5rem; }
  .product-row, .product-row.is-flip { flex-direction: column; justify-content: flex-start; gap: 2rem; }
  .product-copy { width: 32.5rem; align-items: center; text-align: center; }
  .product-index-strip { justify-content: center; }
  .product-trace { height: 20.0625rem; }
  .product-trace-rule-1 { top: 6.75rem; } .product-trace-rule-2 { top: 9.5625rem; } .product-trace-rule-3 { top: 12.375rem; }
  .product-trace-icon-0 { top: 5rem; } .product-trace-label-0, .product-trace-value-0 { top: 4.75rem; } .product-trace-span-0 { top: 5.125rem; }
  .product-trace-icon-1 { top: 7.8125rem; } .product-trace-label-1, .product-trace-value-1 { top: 7.5625rem; } .product-trace-span-1 { top: 7.9375rem; }
  .product-trace-icon-2 { top: 10.625rem; } .product-trace-label-2, .product-trace-value-2 { top: 10.375rem; }
  .product-trace-icon-3 { top: 13.4375rem; } .product-trace-label-3, .product-trace-value-3 { top: 13.1875rem; }
  .product-trace-axis { top: 16.75rem; }
  .product-trace-tick { top: 16.8125rem; }
  .product-trace-tick-label { top: 17.25rem; }
  .product-approval { height: 20.0625rem; }
  .product-approval-typing { top: 7.8125rem; }
  .product-approval-avatar { top: 4.75rem; }
  .product-approval-sender { top: 5rem; }
  .product-approval-time { top: 5rem; }
  .product-approval-text { top: 6.75rem; }
  .product-approval-bar { top: 9.5rem; height: 5rem; }
  .product-approval-key { left: 4.625rem; }
  .product-approval-val { left: 10.375rem; }
  .product-approval-key-0, .product-approval-val-0 { top: 9.5rem; }
  .product-approval-key-1, .product-approval-val-1 { top: 11.25rem; }
  .product-approval-key-2 { top: 13.125rem; } .product-approval-val-2 { top: 13rem; }
  .product-mini { top: 15.75rem; }
  .product-approval-waiting { top: 17.25rem; }
  .product-chart { height: 20.0625rem; }
  .product-cube { width: 3.75rem; }
  .product-cap { height: 1.5625rem; width: 2.9375rem; } .product-cap img { height: 1.5625rem; width: 2.9375rem; }
  .product-cap-glow { margin-top: -1rem; margin-left: -1rem; height: 3.5rem; width: 4.9375rem; } .product-cap-glow img { height: 3.5rem; width: 4.9375rem; }
  .product-cube-0 { top: 10.1875rem; left: 1.4375rem; height: 5.25rem; } .product-cap-0 { top: 10.1875rem; left: 1.8125rem; }
  .product-cube-1 { top: 9.25rem; left: 6.6875rem; height: 6.1875rem; } .product-cap-1 { top: 9.25rem; left: 7.0625rem; }
  .product-cube-2 { top: 8.1875rem; left: 11.9375rem; height: 7.25rem; } .product-cap-2 { top: 8.1875rem; left: 12.3125rem; }
  .product-cube-3 { top: 7rem; left: 17.1875rem; height: 8.4375rem; } .product-cap-3 { top: 7rem; left: 17.5625rem; }
  .product-cube-4 { top: 5.875rem; left: 22.4375rem; height: 9.5625rem; } .product-cap-4 { top: 5.875rem; left: 22.8125rem; }
  .product-cube-5 { top: 4.6875rem; left: 27.6875rem; height: 10.75rem; } .product-cap-5, .product-cap-glow { top: 4.6875rem; left: 28.0625rem; }
  .product-chart-baseline { top: 16.4375rem; }
  .product-day { top: 17.25rem; }
  .product-day-0 { left: 3.3125rem; } .product-day-1 { left: 8.5625rem; } .product-day-2 { left: 13.8125rem; }
  .product-day-3 { left: 19.0625rem; } .product-day-4 { left: 24.3125rem; } .product-day-5 { left: 29.5625rem; }
}
/* 390 (3893:3087) — conteúdo 350 a partir de x20 */
@media (width <= 580px) {
  .product { gap: 2rem; }
  .product-head { padding-bottom: 0; }
  .product-head-aside { width: 100%; }
  .product-hairline-inner { display: none; }
  .product-row, .product-row.is-flip { gap: 1.5rem; padding: 0; }
  .product-copy { width: 100%; }
  .product-index { margin-bottom: -0.5rem; }
  .product-card { width: 21.875rem; }
  .product-trace { height: 15.5625rem; }
  .product-trace-run { top: 1.1875rem; left: 1.1875rem; }
  .product-trace-summary { top: 1.1875rem; right: 1.1875rem; width: 8.375rem; }
  .product-trace-head-rule { top: 3.0625rem; left: 1.1875rem; width: 19.375rem; }
  .product-trace-rule { left: 1.1875rem; width: 19.375rem; }
  .product-trace-rule-1 { top: 5.625rem; } .product-trace-rule-2 { top: 7.8125rem; } .product-trace-rule-3 { top: 10rem; }
  .product-trace-icon { left: 1.1875rem; width: 0.4375rem; height: 0.4375rem; }
  .product-trace-label { left: 2.0625rem; font-size: var(--product-type-card); }
  .product-trace-span { height: 0.3125rem; }
  .product-trace-value { right: 1.1875rem; width: 3.25rem; }
  .product-trace-icon-0 { top: 4.375rem; } .product-trace-label-0, .product-trace-value-0 { top: 4rem; }
  .product-trace-span-0 { top: 4.40625rem; left: 9.125rem; width: 6.375rem; }
  .product-trace-icon-1 { top: 6.5625rem; } .product-trace-label-1, .product-trace-value-1 { top: 6.1875rem; }
  .product-trace-span-1 { top: 6.59375rem; left: 9.3125rem; width: 0.4375rem; }
  .product-trace-icon-2 { top: 8.75rem; } .product-trace-label-2, .product-trace-value-2 { top: 8.375rem; }
  .product-trace-span-2 { display: none; }
  .product-trace-icon-3 { top: 10.9375rem; } .product-trace-label-3, .product-trace-value-3 { top: 10.5625rem; }
  .product-trace-span-3 { top: 10.96875rem; left: 9.125rem; width: 1.6875rem; }
  .product-trace-axis { top: 12.5rem; left: 9.3125rem; width: 11.25rem; }
  .product-trace-tick { top: 12.5625rem; height: 0.125rem; }
  .product-trace-tick-label { top: 13.125rem; }
  .product-trace-tick-0 { left: 9.3125rem; } .product-trace-tick-label-0 { left: 9.625rem; }
  .product-trace-tick-1 { left: 12.125rem; } .product-trace-tick-label-1 { display: none; }
  .product-trace-tick-2 { left: 14.9375rem; } .product-trace-tick-label-2 { left: 15.03125rem; }
  .product-trace-tick-3 { left: 17.75rem; } .product-trace-tick-label-3 { display: none; }
  .product-trace-tick-4 { left: 20.5rem; } .product-trace-tick-label-4 { left: 19.28125rem; }
  .product-approval { height: 19.8125rem; } /* pt-BR: "aguardando NN min" ganha a própria linha sob os botões */
  .product-approval-channel { top: 1.1875rem; left: 1.1875rem; line-height: var(--product-line-card); }
  .product-approval-day { top: 1.1875rem; right: 1.1875rem; }
  .product-approval-rule { top: 2.9375rem; left: 1.1875rem; width: 19.375rem; }
  .product-approval-typing { top: 6.5rem; left: 1.1875rem; }
  .product-approval-avatar { top: 3.625rem; left: 1.1875rem; }
  .product-approval-sender { top: 3.9375rem; left: 3.4375rem; line-height: var(--product-line-card); }
  .product-approval-time { top: 3.9375rem; right: 1.1875rem; }
  .product-approval-text { top: 6.125rem; left: 1.1875rem; width: 19.375rem; font-size: var(--type-label); line-height: var(--product-line-card); }
  .product-approval-bar { top: 9.375rem; left: 1.1875rem; height: 5.5rem; width: 0.125rem; }
  .product-approval-key { left: 1.8125rem; }
  .product-approval-val { left: 7.3125rem; }
  .product-approval-key-0, .product-approval-val-0 { top: 9.375rem; } .product-approval-val-0 { line-height: var(--product-line-card); }
  .product-approval-key-1, .product-approval-val-1 { top: 11rem; } .product-approval-val-1 { line-height: var(--product-line-card); }
  .product-approval-key-2, .product-approval-val-2 { top: 12.625rem; }
  .product-approval-val-2 { width: 13.375rem; white-space: normal; font-size: var(--type-label); line-height: var(--product-line-card); } /* pt-BR: a regra quebra em duas linhas */
  .product-mini { top: 15.5rem; gap: 0.375rem; }
  .product-mini-approve { left: 1.1875rem; padding: 0.375rem 0.75rem; }
  .product-mini-hold { left: 7.75rem; padding: 0.3125rem 0.6875rem; }
  .product-approval-waiting { top: 17.5rem; right: 1.1875rem; }
  .product-chart { height: 16.4375rem; }
  .product-cube { width: 2.6875rem; }
  .product-cap { height: 1.125rem; width: 2.125rem; } .product-cap img { height: 1.125rem; width: 2.125rem; }
  .product-cap-glow { margin-top: -0.6875rem; margin-left: -0.6875rem; height: 2.5rem; width: 3.5625rem; } .product-cap-glow img { height: 2.5rem; width: 3.5625rem; }
  .product-cube-0 { top: 8.9375rem; left: 1.1875rem; height: 3.75rem; } .product-cap-0 { top: 8.9375rem; left: 1.46875rem; }
  .product-cube-1 { top: 8.1875rem; left: 4.5rem; height: 4.4375rem; } .product-cap-1 { top: 8.1875rem; left: 4.78125rem; }
  .product-cube-2 { top: 7.4375rem; left: 7.8125rem; height: 5.25rem; } .product-cap-2 { top: 7.4375rem; left: 8.09375rem; }
  .product-cube-3 { top: 6.625rem; left: 11.125rem; height: 6.0625rem; } .product-cap-3 { top: 6.625rem; left: 11.40625rem; }
  .product-cube-4 { top: 5.75rem; left: 14.4375rem; height: 6.875rem; } .product-cap-4 { top: 5.75rem; left: 14.71875rem; }
  .product-cube-5 { top: 4.9375rem; left: 17.75rem; height: 7.75rem; } .product-cap-5, .product-cap-glow { top: 4.9375rem; left: 18.03125rem; }
  .product-chart-baseline { top: 13.3125rem; left: 1.1875rem; width: 19.375rem; }
  .product-day { top: 14.125rem; width: 2.6875rem; line-height: 1rem; }
  .product-day-0 { left: 2.53125rem; } .product-day-1 { left: 5.84375rem; } .product-day-2 { left: 9.15625rem; }
  .product-day-3 { left: 12.46875rem; } .product-day-4 { left: 15.78125rem; } .product-day-5 { left: 19.09375rem; }
  .product-chart figcaption { top: 1.1875rem; left: 1.1875rem; flex-direction: column; gap: 0.25rem; }
  .product-chart-caption, .product-chart-average { line-height: 1rem; }
}

/* ── Blocky Grid (getlayers.ai) atrás dos três pilares ──
   Um plano LIGHT, liso, que vira azulejos de vidro onde o cursor passa, com SKY por baixo.
   O pano sangra até as bordas da viewport e esmaece no topo e no pé para se fundir à página. */
.bloco-pilares { position: relative; }
.bloco-pilares > [data-scroll-blur] { position: relative; z-index: 1; }
/* o pano fica grudado na viewport enquanto os pilares rolam por cima (como um fundo fixo);
   assim a câmera enquadra o campo na proporção da tela, como no original */
.pilares-grade {
  position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
  margin-left: calc(50% - 50vw); width: 100vw;
  z-index: 0; overflow: clip; pointer-events: none;
}
.pilares-grade canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.pilares-grade canvas.on { opacity: 1; }
.pilares-grade[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pilares-grade canvas { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   05 NEXUS — a placa de contraste. Porte da seção "statement" do Relay
   (getlayers.ai, licença Full Stack): lá uma placa verde-limão, aqui a
   ÚNICA placa escura da página (NIGHT). Composição e movimento do Relay;
   pele da Arpier. Tokens só de 00-base.css; os --statement-* derivam deles.
   Raiz: <section id="nexus" class="statement on-plate">.
   ═══════════════════════════════════════════════════════════════════════ */
.statement {
  /* placa: NIGHT com um gradiente muito sutil para o canto inferior direito
     (tom entre --plate e --plate-2) */
  --statement-plate-to: #121216;
  --statement-dot: rgba(237, 237, 237, 0.14);           /* campo de pontos (LIGHT a 14%) */
  --statement-ink-muted: var(--plate-muted);            /* kicker, legenda, horas */
  --statement-flash: var(--plate-muted);                /* anel que sai de "agora" */
  --statement-mark-from: var(--accent);                 /* tile: SKY → OCEAN */
  --statement-mark-to: var(--accent-deep);
  --statement-mark-border: rgba(255, 255, 255, 0.18);
  --statement-stem-from: rgba(237, 237, 237, 0.85);     /* haste: LIGHT 85% → 20% */
  --statement-stem-to: rgba(237, 237, 237, 0.2);
  --statement-corner-plate: 2rem;                       /* 32 */
  --statement-corner-mark: 1.5rem;                      /* 24 */
  --statement-kicker-size: var(--type-label);
  --statement-kicker-line: var(--line-label);
  --statement-title-line: var(--line-section-title);

  /* a placa: 1440 × 552, 1024 × 528, 768 × 528, 390 × 371 */
  position: relative;
  height: 34.5rem;
  overflow: clip;
  border-radius: var(--statement-corner-plate);
  background: linear-gradient(135deg, var(--plate) 0%, var(--plate) 45%, var(--statement-plate-to) 100%);
  box-shadow: var(--shadow-plate);
  color: var(--plate-text);
}
@media (width <= 900px) {
  .statement { --statement-title-line: 2.5rem; }
}
@media (width <= 580px) {
  .statement {
    --statement-kicker-size: 0.75rem;
    --statement-kicker-line: 1rem;
    --statement-title-line: var(--line-section-title);
  }
}

/* campo de pontos — 3px numa grade de 48px: um pattern SVG + um canvas por
   cima (os pontos perto do ponteiro incham; só com pointer fino) */
.statement-dots {
  position: absolute; top: 0; left: 0;
  height: 34.25rem; width: 90rem; max-width: none;
  color: var(--statement-dot); pointer-events: none;
}
.statement-dots-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; color: var(--statement-dot);
}

/* rótulo que se digita na linha do tempo da placa (meio pixel de folga para
   o erro de float nunca engolir o último glifo) */
.statement-type {
  position: relative; display: inline-block; --typed: 0;
  clip-path: inset(0 calc(100% - round(down, calc(var(--typed) * 1ch + 0.5px), 1ch) - 0.1ch) 0 0);
}
.statement-type[data-hidden] { visibility: hidden; }

.statement-kicker {
  position: absolute; top: 4rem; left: 5rem; height: 1.25rem; width: 80rem; margin: 0;
  text-align: center;
  font-size: var(--statement-kicker-size); line-height: var(--statement-kicker-line);
  color: var(--statement-ink-muted);
}

/* título: Rethink Sans 700 via .display-title; o acento em --plate-accent via
   .on-plate .display-title-accent — mesma família e peso, sem itálico */
.statement-title {
  position: absolute; top: 6.75rem; left: 5rem; width: 80rem; margin: 0;
  text-align: center;
  font-size: var(--type-section-title); line-height: var(--statement-title-line);
}
.statement-title > span { display: block; }
.statement-word { display: inline-block; }
.statement-word-accent {
  transform-origin: bottom left;
  font-family: var(--font-d); font-weight: 700; font-style: normal;
}

/* a marca: tile 76 × 76 com a harpia em branco; a haste desce até "agora" */
.statement-mark {
  position: absolute; top: 18.25rem; left: 42.625rem; width: 4.75rem; height: 4.75rem;
}
.statement-mark-tile {
  position: relative; width: 100%; height: 100%; overflow: clip; box-sizing: border-box;
  border-radius: var(--statement-corner-mark);
  border: 1px solid var(--statement-mark-border);
  background: linear-gradient(135deg, var(--statement-mark-from), var(--statement-mark-to) 71%);
}
.statement-mark-harpy {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent);
}
.statement-mark-glyph { display: block; width: 2.625rem; height: 2.4375rem; }
.statement-stem {
  position: absolute; top: 23rem; left: 45rem; height: 6.375rem; width: 1px;
  transform-origin: top;
  background: linear-gradient(to bottom, var(--statement-stem-from), var(--statement-stem-to));
}

/* a régua */
.statement-caption {
  position: absolute; top: 28rem; left: 5rem; height: 1.25rem; margin: 0;
  font-size: var(--type-label); line-height: var(--line-label);
  white-space: nowrap; color: var(--statement-ink-muted);
}
.statement-ticks {
  position: absolute; top: 30.25rem; left: 4.9375rem; height: 1.125rem; width: 80.125rem;
  max-width: none; overflow: visible; color: var(--plate-text);
}
.statement-ticks path { transform-box: fill-box; transform-origin: bottom; }
.statement-now {
  position: absolute; top: 29.375rem; left: 43.125rem; height: 1.25rem; width: 3.75rem; margin: 0;
  text-align: center;
  font-size: var(--type-label); line-height: var(--line-label); color: var(--plate-text);
}
.statement-dot {
  position: absolute; top: 30.8125rem; left: 44.6875rem; width: .625rem; height: .625rem;
}
.statement-dot-ring {
  position: absolute; inset: 0; border-radius: 9999px;
  border: 1px solid var(--statement-flash);
}
.statement-dot-bump { display: block; width: 100%; height: 100%; }
.statement-dot-bump img { display: block; width: 100%; height: 100%; }
.statement-hours { margin: 0; padding: 0; list-style: none; }
.statement-hours li {
  position: absolute; top: 31.75rem; height: 1.25rem; width: 5rem;
  font-size: var(--type-label); line-height: var(--line-label);
  color: var(--statement-ink-muted); text-align: center;
}
.statement-hour-0 { left: 5rem; text-align: left; }
.statement-hour-1 { left: 18.5rem; }
.statement-hour-2 { left: 34.5rem; }
.statement-hour-3 { left: 50.5rem; }
.statement-hour-4 { left: 66.5rem; }
.statement-hour-5 { left: 80rem; text-align: right; }

@media (width <= 1200px) {
  .statement { height: 33rem; }
  .statement-kicker { top: 3rem; left: 3rem; width: 58rem; }
  .statement-title { top: 5.25rem; left: 3rem; width: 58rem; }
  .statement-mark { top: 14.5rem; left: 29.625rem; }
  .statement-stem { top: 19.25rem; left: 32rem; height: 8.625rem; }
  .statement-caption { top: 25.375rem; left: 3rem; }
  .statement-ticks { top: 28rem; left: 2.9375rem; width: 58.125rem; }
  .statement-now { top: 29.75rem; left: 30.125rem; }
  .statement-dot { top: 27.5625rem; left: 31.6875rem; }
  .statement-hours li { top: 29.75rem; }
  .statement-hour-0 { left: 3rem; }
  .statement-hour-1 { left: 11.8125rem; }
  .statement-hour-2 { left: 20.6875rem; }
  .statement-hour-3 { left: 38.3125rem; }
  .statement-hour-4 { left: 47.1875rem; }
  .statement-hour-5 { left: 56rem; }
}
@media (width <= 900px) {
  .statement-kicker { top: 2.5rem; left: 2.5rem; width: 43rem; }
  .statement-title { top: 4.75rem; left: 2.5rem; width: 43rem; }
  .statement-mark { top: 12.75rem; left: 21.625rem; }
  .statement-stem { top: 18rem; left: 24rem; height: 9.75rem; }
  .statement-caption { top: 24.875rem; left: 2.5rem; }
  .statement-ticks { top: 27.625rem; left: 2.4375rem; width: 43.125rem; }
  /* "agora" é mais largo que "now": caixa de 3rem centrada na haste (24rem) */
  .statement-now { top: 29.25rem; left: 22.5rem; width: 3rem; }
  .statement-dot { top: 27.4375rem; left: 23.75rem; }
  .statement-hours li { top: 29.25rem; width: 2.75rem; }
  .statement-hour-0 { left: 2.5rem; }
  .statement-hour-1 { left: 9.1875rem; }
  .statement-hour-2 { left: 15.9375rem; }
  .statement-hour-3 { left: 29.3125rem; }
  .statement-hour-4 { left: 36.0625rem; }
  .statement-hour-5 { left: 42.75rem; }
}
@media (width <= 580px) {
  .statement { height: 23.1875rem; }
  .statement-kicker { top: 1.25rem; left: 1.25rem; height: 1rem; width: 21.875rem; }
  .statement-title { top: 3rem; left: 1.25rem; width: 21.875rem; }
  .statement-mark { top: 11rem; left: 9.8125rem; }
  .statement-stem { top: 15.75rem; left: 12.1875rem; height: 3rem; }
  /* a legenda em pt-BR quebra em duas linhas, no corpo do kicker (12/16),
     numa caixa que termina antes do tile e acima da régua */
  .statement-caption {
    top: 15.3125rem; left: 1.25rem; height: auto; width: 8.25rem; white-space: normal;
    font-size: var(--statement-kicker-size); line-height: var(--statement-kicker-line);
  }
  .statement-ticks { top: 18.8125rem; left: 1.1875rem; width: 22rem; }
  .statement-now { top: 20.6875rem; left: 10.6875rem; }
  .statement-dot { top: 18.625rem; left: 11.875rem; width: .6875rem; height: .6875rem; }
  .statement-hours li { top: 20.6875rem; }
  .statement-hour-0 { left: 1.25rem; }
  .statement-hour-1 { left: 5.25rem; }
  .statement-hour-2 { display: none; }
  .statement-hour-3 { left: 16.375rem; }
  .statement-hour-4 { left: 20.375rem; text-align: right; }
  .statement-hour-5 { display: none; }
}

/* ── 08 Prova / Cases ────────────────────────────────────────────────────
   Porte da seção Proof do Relay (1440 × 884 / 1024 × 816 / 768 × 906 /
   390 × 1706) para a home clara da Arpier. Fundo transparente, sem os dois
   blooms. Ficam as duas hairlines e as três colunas (rótulo · número ·
   legenda · visual · pílula · citação). As colunas são um grid com subgrid:
   as sete linhas alinham entre as três colunas, a hairline inferior corre
   contínua sob elas (linha 6 do grid) e cada tick marca o início da citação.
   Os offsets absolutos do Relay viraram margens de fluxo; só o box do visual
   mantém a altura fixa de 56. Altura da seção automática. */

.proof {
  /* tokens da seção, todos derivados de 00-base.css */
  --proof-hairline: var(--hairline);
  --proof-tick: var(--hairline-strong);
  --proof-trend-border: rgba(0, 77, 211, 0.45);      /* SKY a 45 %, só na coluna 1 */
  --proof-trend-border-quiet: var(--hairline);
  --proof-trend-fill: var(--paper);
  --proof-hour-dim: var(--hairline);
  --proof-track: rgba(12, 12, 12, 0.08);
  --proof-fill-from: var(--plate-accent);            /* #6E9BFF */
  --proof-fill-to: var(--accent);                    /* #004DD3 */
  --proof-type-stat: 3.5rem;  --proof-line-stat: 3.75rem;
  --proof-corner-trend: 0.5rem;
  --proof-corner-hour: 0.375rem;
  --proof-col: 24rem;  --proof-col-gap: 4rem;

  position: relative;
  padding: 6rem var(--page-inset);
  font-family: var(--font-b);
  color: var(--text);
}
/* autossuficiente: não depende do reset global da página */
.proof, .proof *, .proof ::before, .proof ::after { box-sizing: border-box; }

/* cabeça: o layout vem das primitivas .section-head / .section-head-stack /
   .section-head-aside; aqui só as margens default do h2 e do p */
.proof-title, .proof-aside { margin: 0; }

/* hairlines */
.proof-rule { display: block; height: 1px; width: 100%; border-radius: 9999px; background: var(--proof-hairline); }
.proof-rule-top { margin-top: 2.75rem; }

/* as três colunas: grid de 3 × 7 com subgrid por coluna */
.proof-columns {
  position: relative; margin-top: 2rem;
  display: grid; grid-template-columns: repeat(3, var(--proof-col)); column-gap: var(--proof-col-gap);
  grid-template-rows: repeat(7, auto);
}
.proof-column { position: relative; display: grid; grid-template-rows: subgrid; grid-row: 1 / span 7; align-items: start; }
.proof-column-1 { grid-column: 1; }
.proof-column-2 { grid-column: 2; }
.proof-column-3 { grid-column: 3; }
/* a hairline inferior ocupa a linha 6 do grid, sob as três colunas */
.proof-rule-bottom { grid-column: 1 / -1; grid-row: 6; align-self: start; margin-top: 2.375rem; }

/* linha 1 — rótulo mono que se digita */
.proof-label { margin: 0; font-size: var(--type-label); line-height: var(--line-label); white-space: nowrap; color: var(--text-muted); }
.proof-type { position: relative; display: inline-block; white-space: nowrap; }
/* linha 2 — o número (não numérico: entra em foco, nunca conta) */
.proof-stat {
  margin: 0.75rem 0 0; font-family: var(--font-d); font-weight: 700;
  font-size: var(--proof-type-stat); line-height: var(--proof-line-stat);
  letter-spacing: var(--letter-spacing-title); white-space: nowrap; color: var(--text);
}
/* linha 3 — legenda */
.proof-caption { margin: 0.75rem 0 0; font-size: var(--type-label); line-height: var(--line-label); color: var(--text-muted); }
/* linha 4 — o mini visual, único box de altura fixa (56) */
.proof-visual { position: relative; height: 3.5rem; width: 100%; margin-top: 1.5rem; }
.proof-sparkline { display: block; height: 3.5rem; width: 24rem; }
.proof-hours { position: absolute; top: 0; left: 0; display: block; height: 3.5rem; width: 18.75rem; }
.proof-hour-dim { position: absolute; top: 1.375rem; height: 2.125rem; width: 1.25rem; border-radius: var(--proof-corner-hour); background: var(--proof-hour-dim); }
.proof-hour-dim-1 { left: 19.25rem; }
.proof-hour-dim-2 { left: 21rem; }
.proof-hour-dim-3 { left: 22.75rem; }
.proof-progress { position: absolute; inset: 0; }
.proof-track { position: absolute; top: 1.25rem; left: 0; height: 0.875rem; width: 100%; overflow: clip; border-radius: 9999px; background: var(--proof-track); }
.proof-fill { width: 100%; height: 100%; background: linear-gradient(175.82deg, var(--proof-fill-from) 27.819%, var(--proof-fill-to) 66.696%); }
/* linha 5 — pílula de tendência: SKY só na coluna 1, hairline nas outras */
.proof-trend {
  justify-self: start; margin: 1.375rem 0 0; overflow: clip;
  border-radius: var(--proof-corner-trend); border: 1px solid var(--proof-trend-border-quiet);
  background: var(--proof-trend-fill); padding: 0.3125rem 0.6875rem;
  font-size: var(--type-label); line-height: var(--line-label); white-space: nowrap; color: var(--text-muted);
}
.proof-column-1 .proof-trend { border-color: var(--proof-trend-border); color: var(--accent); }
/* linha 6 — o tick sobre a hairline inferior (a hairline por cartão só aparece em 390) */
.proof-rule-row { position: relative; height: 0.125rem; margin-top: 2.3125rem; }
.proof-card-rule { display: none; height: 1px; width: 100%; border-radius: 9999px; background: var(--proof-hairline); }
.proof-tick { position: absolute; top: 0; left: 0; display: block; height: 0.125rem; width: 1.75rem; border-radius: 9999px; background: var(--proof-tick); }
/* linha 7 — citação, nome e cargo */
.proof-quote { display: flex; flex-direction: column; margin: 1.9375rem 0 0; }
.proof-quote blockquote { margin: 0; font-family: var(--font-b); font-size: var(--type-body); line-height: var(--line-body); color: var(--text); }
.proof-quote blockquote p { margin: 0; }
.proof-quote figcaption { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--type-label); line-height: var(--line-label); }
.proof-quote-name { font-family: var(--font-b); font-weight: 500; white-space: nowrap; color: var(--text); }
.proof-quote-role { white-space: nowrap; color: var(--text-dim); }
.proof-focus {
  mask-image: linear-gradient(90deg, black calc(var(--reveal) - 40%), transparent var(--reveal));
  -webkit-mask-image: linear-gradient(90deg, black calc(var(--reveal) - 40%), transparent var(--reveal));
}

/* a coluna só é .card em 390; nos quadros maiores a pele do cartão sai */
@media (width > 580px) {
  .proof-column.card { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
}
/* sem subgrid as linhas não alinham: a hairline inferior vira uma por coluna */
@supports not (grid-template-rows: subgrid) {
  .proof-rule-bottom { display: none; }
  .proof-card-rule { display: block; }
  .proof-rule-row { height: auto; }
  .proof-tick { top: -1px; }
}

/* 1024 */
@media (width <= 1200px) {
  .proof {
    --proof-type-stat: 2.75rem; --proof-line-stat: 3rem;
    --proof-col: 17.375rem; --proof-col-gap: 2.875rem;
    padding-top: 2.5rem; padding-bottom: 2.5rem;
  }
  .proof-rule-top { margin-top: 2rem; }
  .proof-columns { margin-top: 3.0625rem; }
  .proof-stat { margin-top: 0.5rem; }
  .proof-caption { margin-top: 1rem; }
  .proof-sparkline { width: 17.375rem; }
  .proof-hours { width: 13.625rem; }
  .proof-hour-dim { width: 1rem; }
  .proof-hour-dim-1 { left: 13.875rem; }
  .proof-hour-dim-2 { left: 15.125rem; }
  .proof-hour-dim-3 { left: 16.375rem; }
  .proof-fill { background: linear-gradient(174.24deg, var(--proof-fill-from) 27.819%, var(--proof-fill-to) 66.696%); }
  .proof-trend { justify-self: stretch; display: flex; min-height: 4rem; width: 100%; align-items: center; margin-top: 1.5rem; padding: 0.6875rem 0.9375rem; white-space: normal; }
  .proof-rule-row { margin-top: 2.9375rem; }
  .proof-rule-bottom { margin-top: 3rem; }
  .proof-quote { margin-top: 2rem; }
  .proof-quote figcaption { margin-top: 1.5rem; gap: 0.25rem; }
}
/* 768 */
@media (width <= 900px) {
  .proof {
    --proof-type-stat: 2.25rem; --proof-line-stat: 2.75rem;
    --proof-col: 13.625rem; --proof-col-gap: 1rem;
  }
  .proof-caption { margin-top: 0.75rem; }
  .proof-sparkline { width: 13.625rem; }
  .proof-hours { width: 10.6518rem; }
  .proof-hour-dim { width: 0.75rem; }
  .proof-hour-dim-1 { left: 10.875rem; }
  .proof-hour-dim-2 { left: 11.875rem; }
  .proof-hour-dim-3 { left: 12.875rem; }
  .proof-fill { background: linear-gradient(172.67deg, var(--proof-fill-from) 27.819%, var(--proof-fill-to) 66.696%); }
  .proof-rule-row { margin-top: 4.3125rem; }
  .proof-rule-bottom { margin-top: 4.375rem; }
  .proof-quote figcaption { margin-top: 1rem; }
  .proof-quote-name, .proof-quote-role { white-space: normal; }
}
/* 390: cartões empilhados */
@media (width <= 580px) {
  .proof {
    --proof-type-stat: 1.75rem; --proof-line-stat: 2.125rem;
    --proof-corner-trend: 0.375rem;
    padding-top: 3rem; padding-bottom: 3rem;
  }
  .proof-rule-top, .proof-rule-bottom { display: none; }
  .proof-columns { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
  /* padding 20 menos a borda do .card: o interior fica nos 19.375rem dos visuais */
  .proof-column { display: block; grid-row: auto; width: 100%; padding: calc(1.25rem - 1px); }
  .proof-stat { margin-top: 0.5rem; }
  .proof-caption { margin-top: 0.75rem; }
  .proof-visual { margin-top: 1.5rem; }
  .proof-visual-progress { height: 0.875rem; }
  .proof-sparkline { width: 19.375rem; }
  .proof-hours { width: 15.16345rem; }
  .proof-hour-dim { width: 1.125rem; }
  .proof-hour-dim-1 { left: 15.4423rem; }
  .proof-hour-dim-2 { left: 16.84615rem; }
  .proof-hour-dim-3 { left: 18.25rem; }
  .proof-track { top: 0; }
  .proof-fill { background: linear-gradient(174.83deg, var(--proof-fill-from) 27.819%, var(--proof-fill-to) 66.696%); }
  .proof-trend { margin-top: 1.5rem; width: 100%; }
  .proof-rule-row { margin-top: 1.5rem; height: auto; }
  .proof-card-rule { display: block; }
  .proof-tick { top: -1px; }
  .proof-column-2 .proof-tick, .proof-column-3 .proof-tick { display: none; }
  .proof-quote { margin-top: 1.5rem; }
  .proof-quote figcaption { margin-top: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   09 ATUAÇÃO GLOBAL — direção B: cartão de papel (como o mapa de
   horizontes do o9) com o mapa-múndi em matriz de pontos NIGHT (canvas;
   mais escuros do lado da noite), bases em SKY com anel de papel, arcos
   em SKY e pacotes SKY com rastro; a rota dos EUA em OCEAN tracejado,
   forte. Embaixo do mapa, a barra com a legenda da base em foco e as
   notas. As quatro colunas (papel, cidade, hora local, régua do dia)
   seguem abaixo. Tudo que corre só corre com .glb.is-live.
   ═══════════════════════════════════════════════════════════════════════ */
.glb, .glb * { box-sizing: border-box; }
.glb { position: relative; padding: 0 var(--page-inset); }
.glb-head { padding-bottom: 2rem; }
.glb-head h2, .glb-head p { margin: 0; }
.glb-head .section-head-aside { width: 33rem; text-wrap: pretty; }
.glb-rule { display: block; height: 1px; width: 100%; background: var(--hairline); }

/* ── o cartão ─────────────────────────────────────────────────────────── */
.glb-plate {
  --glb-corner: 1rem;
  position: relative; margin-top: 2rem; overflow: clip; border-radius: var(--glb-corner);
  border: 1px solid var(--hairline-strong); background: var(--paper); color: var(--text);
}
.glb-map { position: relative; margin: 0; aspect-ratio: 285 / 103.75; overflow: hidden; }
.glb-terra { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
html.js .glb-terra { opacity: 0; }
html.js .glb-map.is-on .glb-terra { opacity: 1; transition: opacity 900ms var(--ease-entrance); }
.glb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.glb-grid { fill: none; stroke: var(--hairline); stroke-width: 1; }
.glb-eq { fill: none; stroke: var(--hairline-strong); stroke-width: 1; }
.glb-tick { font-family: var(--font-b); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.02em; fill: var(--text-dim); stroke: var(--paper); stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }   /* halo de papel: lê por cima dos pontos */

/* arcos: SKY a meia-força; a rota dos EUA em OCEAN tracejado, forte, correndo quando a seção está viva */
.glb-arc { fill: none; stroke: var(--accent); stroke-opacity: 0.55; stroke-width: 1.5; stroke-linecap: round; transition: opacity 200ms var(--ease-entrance), stroke-width 200ms var(--ease-entrance), stroke-opacity 200ms var(--ease-entrance); }
.glb-arc-next { stroke: var(--accent-deep); stroke-opacity: 0.9; stroke-width: 1.5; stroke-dasharray: 5 5; }
html.js .glb-arc:not(.glb-arc-next) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.js .glb-map.is-on .glb-arc:not(.glb-arc-next) { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-entrance) calc(500ms + var(--i) * 220ms), opacity 200ms var(--ease-entrance), stroke-width 200ms var(--ease-entrance), stroke-opacity 200ms var(--ease-entrance); }
html.js .glb-arc-next { opacity: 0; }
html.js .glb-map.is-on .glb-arc-next { opacity: 1; transition: opacity 600ms var(--ease-entrance) 1300ms; }
.glb.is-live .glb-arc-next { animation: glb-rota 1.6s linear infinite; }
@keyframes glb-rota { to { stroke-dashoffset: -20; } }

/* tráfego: rastro (trecho do próprio arco) em SKY e cabeça SKY com borda de papel */
.glb-pkt { transition: opacity 200ms var(--ease-entrance); }
.glb-pkt-rastro { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; opacity: 0.8; }
.glb-pkt-halo { fill: var(--accent-soft); }
.glb-pkt-ponto { fill: var(--accent); stroke: var(--paper); stroke-width: 1.5; }

/* bases: SKY com anel de papel fino e halo; a sede é maior */
.glb-pt { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 1; width: 0; height: 0; --r: 0.3125rem; }
.glb-pt-sede { --r: 0.4375rem; }
.glb-pt i { position: absolute; left: calc(-1 * var(--r)); top: calc(-1 * var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 9999px; background: var(--accent); box-shadow: 0 0 0 2px var(--paper), 0 0 0 0.4375rem var(--accent-soft); transition: box-shadow 200ms var(--ease-entrance); }
/* pulso de chegada: um anel que abre e some */
.glb-pt i::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--accent); opacity: 0; pointer-events: none; }
.glb-pt.is-ping i::after { animation: glb-ping 950ms var(--ease-entrance); }
@keyframes glb-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
/* rótulo com halo de papel no texto: pontos e arcos passam por baixo sem cortar o nome */
.glb-pt b { position: absolute; left: 0.875rem; top: -0.75rem; display: flex; flex-direction: column; padding: 0.125rem 0.25rem; white-space: nowrap;
  text-shadow: 0 0 0.25rem var(--paper), 0 0 0.25rem var(--paper), 0 0 0.125rem var(--paper), 0 0 0.0625rem var(--paper);
  font-family: var(--font-b); font-weight: 600; font-size: 0.8125rem; line-height: 1rem; color: var(--text); transition: color 200ms var(--ease-entrance); }
.glb-pt small { font-weight: 500; font-size: 0.6875rem; line-height: 0.875rem; color: var(--text-muted); }
.glb-pt-l b { left: auto; right: 0.875rem; text-align: right; align-items: flex-end; }
.glb-pt-next i { background: var(--paper); border: 1.5px dashed var(--accent-deep); box-shadow: 0 0 0 2px var(--paper); }
.glb-pt-next b { color: var(--text-muted); }
/* entrada: as bases surgem em sequência (sem passar do tamanho final), o rótulo vem logo atrás */
html.js .glb-pt i { transform: scale(0); }
html.js .glb-pt b { opacity: 0; transform: translateY(0.25rem); }
html.js .glb-map.is-on .glb-pt i { transform: none; transition: transform 500ms var(--ease-entrance) calc(400ms + var(--d) * 170ms), box-shadow 200ms var(--ease-entrance); }
html.js .glb-map.is-on .glb-pt b { opacity: 1; transform: none; transition: opacity 400ms var(--ease-entrance) calc(520ms + var(--d) * 170ms), transform 400ms var(--ease-entrance) calc(520ms + var(--d) * 170ms), color 200ms var(--ease-entrance); }

/* barra do cartão: legenda da base em foco à esquerda, notas à direita */
.glb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 1.5rem; border-top: 1px solid var(--hairline); font-size: 0.75rem; line-height: 1rem; }
.glb-caption { margin: 0; min-width: 0; color: var(--text-muted); transition: color 200ms var(--ease-entrance); }
.glb-caption.is-hot { color: var(--text); }
.glb-bar-notes { display: flex; flex-shrink: 0; gap: 1.5rem; margin: 0; color: var(--text-dim); }
.glb-bar-notes span { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.glb-lg { display: inline-block; flex-shrink: 0; }
.glb-lg-night { width: 1rem; height: 0.625rem; border-radius: 0.1875rem; background: radial-gradient(circle, rgba(12, 12, 12, 0.58) 0 1px, transparent 1.5px) 0 0 / 4px 4px; border: 1px solid var(--hairline-strong); }

/* ── as quatro bases ──────────────────────────────────────────────────── */
.glb-sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.glb-site { padding: 1.25rem 1.5rem 1.25rem 0; transition: opacity 200ms var(--ease-entrance); }
.glb-site + .glb-site { padding-left: 1.5rem; border-left: 1px solid var(--hairline); }
.glb-role { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0625rem; color: var(--accent); }
.glb-site h3 { margin: 0.5rem 0 0; font-family: var(--font-d); font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; color: var(--text); }
.glb-where { margin: 0.125rem 0 0; font-family: var(--font-b); font-size: 0.9375rem; line-height: 1.375rem; color: var(--text-muted); }
.glb-clock { display: flex; align-items: baseline; gap: 0.625rem; margin: 1rem 0 0; min-height: 2.25rem; }
/* LED da coluna: pisca quando um pacote sai (tx) ou chega (rx) nesta base */
.glb-led { flex-shrink: 0; width: 0.4375rem; height: 0.4375rem; border-radius: 9999px; background: var(--hairline-strong); transition: background-color 240ms var(--ease-entrance), box-shadow 240ms var(--ease-entrance); }
.glb-led.is-tx, .glb-led.is-rx { background: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.glb-led-next { background: transparent; border: 1px dashed var(--accent-deep); }
.glb-time { font-size: 1.75rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.glb.is-live .glb-colon { animation: glb-pisca 1s linear infinite; }
@keyframes glb-pisca { 0%, 55% { opacity: 1; } 60%, 100% { opacity: 0.25; } }
.glb-off { font-size: 0.75rem; line-height: 1rem; color: var(--text-dim); }
.glb-soon { font-size: 0.875rem; line-height: 2.25rem; color: var(--text-dim); }
/* régua do dia: 00h–24h, horário comercial 09h–18h, "agora" na hora local */
.glb-day { position: relative; display: block; height: 0.625rem; margin-top: 0.75rem;
  background: linear-gradient(var(--hairline-strong), var(--hairline-strong)) 0 50% / 100% 1px no-repeat; }
.glb-day-work { position: absolute; left: 37.5%; width: 37.5%; top: 0.125rem; height: 0.375rem; border-radius: 0.1875rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.glb-day-now { position: absolute; left: calc(var(--now, -1) * 100%); top: 0; width: 0.625rem; height: 0.625rem; margin-left: -0.3125rem; border-radius: 9999px; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--accent); }
.glb-site:not(.is-time) .glb-day-now { display: none; }
.glb-site-next .glb-role { color: var(--text-dim); }
.glb-site-next .glb-day { background: repeating-linear-gradient(90deg, var(--hairline-strong) 0 3px, transparent 3px 7px) 0 50% / 100% 1px no-repeat; }

.glb-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1rem; color: var(--text-dim); }
.glb-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.glb-lg-work { width: 1rem; height: 0.375rem; border-radius: 0.1875rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.glb-lg-now { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--accent); }

/* hover numa coluna ou numa base: as rotas dela acendem e o resto recua */
.glb.is-focus .glb-site:not(.is-hot) { opacity: 0.45; }
.glb.is-focus .glb-pt:not(.is-hot) b { color: var(--text-dim); }
.glb.is-focus .glb-pt.is-hot i { box-shadow: 0 0 0 2px var(--paper), 0 0 0 0.75rem var(--accent-soft); }
.glb.is-focus .glb-arc:not(.is-hot), html.js .glb.is-focus .glb-map.is-on .glb-arc:not(.is-hot) { opacity: 0.25; }
.glb.is-focus .glb-arc.is-hot { stroke-width: 2; stroke-opacity: 0.95; }
.glb.is-focus .glb-pkt:not(.is-hot) { opacity: 0.2; }

/* ── 1024 ─────────────────────────────────────────────────────────────── */
@media (width <= 1200px) {
  .glb-site { padding-right: 1rem; }
  .glb-site + .glb-site { padding-left: 1rem; }
  .glb-site h3 { font-size: 1.25rem; line-height: 1.625rem; }
  .glb-time { font-size: 1.5rem; }
}
/* ── 768 e 390 ────────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .glb-head { padding-bottom: 1.5rem; }
  .glb-head .section-head-aside { width: 35rem; }
  .glb-plate { margin-top: 1.5rem; }
  .glb-bar { padding: 0.625rem 1.25rem; }
  .glb-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glb-site:nth-child(odd) { padding-left: 0; border-left: 0; }
  .glb-site:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}
@media (width <= 580px) {
  .glb-plate { --glb-corner: 0.75rem; }
  .glb-map { aspect-ratio: 220 / 103.75; }   /* o JS recorta a projeção para 110°O–110°L nesta largura */
  .glb-tick-lon { display: none; }
  .glb-pt { --r: 0.25rem; }
  .glb-pt-sede { --r: 0.3125rem; }
  .glb-pt b { left: 0.625rem; top: -0.625rem; padding: 0.0625rem 0.1875rem; font-size: 0.6875rem; line-height: 0.875rem; }
  .glb-pt small { font-size: 0.625rem; line-height: 0.75rem; }
  .glb-pt-l b { left: auto; right: 0.625rem; }
  .glb-bar { flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: 0.625rem 1rem 0.75rem; font-size: 0.6875rem; }
  .glb-bar-notes { gap: 1rem; }
  .glb-site { padding: 1rem 0.75rem 1rem 0; }
  .glb-site:nth-child(even) { padding-left: 0.75rem; }
  .glb-site h3 { font-size: 1.0625rem; line-height: 1.375rem; }
  .glb-where { font-size: 0.8125rem; line-height: 1.125rem; }
  .glb-clock { margin-top: 0.75rem; gap: 0.375rem; min-height: 1.75rem; }
  .glb-time { font-size: 1.25rem; line-height: 1.75rem; }
  .glb-off { font-size: 0.6875rem; }
  .glb-soon { font-size: 0.75rem; line-height: 1.75rem; }
}

/* ── movimento reduzido: tudo já no lugar, nada corre ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.js .glb-terra, html.js .glb-map.is-on .glb-terra { opacity: 1; transition: none; }
  html.js .glb-arc:not(.glb-arc-next), html.js .glb-map.is-on .glb-arc:not(.glb-arc-next) { stroke-dashoffset: 0; transition: none; }
  html.js .glb-arc-next, html.js .glb-map.is-on .glb-arc-next { opacity: 1; transition: none; }
  html.js .glb-pt i, html.js .glb-map.is-on .glb-pt i { transform: none; transition: none; }
  html.js .glb-pt b, html.js .glb-map.is-on .glb-pt b { opacity: 1; transform: none; transition: none; }
  .glb-arc-next, .glb.is-live .glb-arc-next, .glb.is-live .glb-colon, .glb-pt.is-ping i::after { animation: none; }
  .glb-site, .glb-led, .glb-pkt, .glb-caption { transition: none; }
}