/* ==========================================================================
   FONTES — Geist e Geist Mono (SIL OFL 1.1, Vercel), servidas localmente.
   Pesos 400 e 500 apenas. ZERO requisicao externa.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/geist-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/geist-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/geist-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   FOUNDER VAULT — referencia: ramp.com (home), medida em 2026-09-03
   Container 1312 | texto ate 1050/755/656 | secoes separadas por 128px
   Tinta #0C0A08, cinza = tinta a 60% | acento azul claro #8EC5FF | cartao #F4F2F0
   Borda rgba(33,33,33,.10) | raio 12 (cartoes) e 6 (botoes) | preto #1A1919
   Ordem: 1) reset 2) tokens 3) base 4) a11y 5) motion 6) componentes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

summary {
  list-style: none;
}

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

/* --------------------------------------------------------------------------
   2. TOKENS
   Contraste calculado (WCAG 2.x, luminancia relativa):
     #0C0A08 sobre #FFFFFF ......................... 19.6:1
     #0C0A08 sobre #F4F2F0 ......................... 17.6:1
     #0C0A08 sobre #8EC5FF (azul claro) ............ 10.7:1
     rgba(12,10,8,.6) sobre #FFFFFF  = #6D6C6B ....  5.2:1
     rgba(12,10,8,.6) sobre #F4F2F0  = #696766 ....  4.9:1
     rgba(12,10,8,.6) sobre #EDE8E1  = #666260 ....  4.7:1
     #FFFFFF sobre #1A1919 ......................... 17.5:1
     rgba(255,255,255,.6) sobre #1A1919 = #A3A3A3 .  6.9:1
     Bordas rgba(33,33,33,.1) sao decorativas; o controle de texto e
     marcado por fundo, altura e foco em tinta cheia.
   -------------------------------------------------------------------------- */

:root {
  --white: #ffffff;
  --ink: #0c0a08;
  --ink-60: rgba(12, 10, 8, 0.6);
  --black: #1a1919;
  --on-black-60: rgba(255, 255, 255, 0.6);
  --accent: #8ec5ff;
  --accent-hover: #79b8ff;
  --card: #f4f2f0;
  --sand: #ede8e1;
  --line: rgba(33, 33, 33, 0.1);
  --line-2: rgba(33, 33, 33, 0.2);
  --tint: rgba(33, 33, 33, 0.024);
  --tint-2: rgba(33, 33, 33, 0.05);
  --tint-3: rgba(33, 33, 33, 0.08);

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
    Consolas, 'Liberation Mono', monospace;

  --container: 1312px;
  --gutter: 20px;
  --section-gap: clamp(96px, 10vw, 160px);

  --radius: 12px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 150ms;
  --transition: var(--duration) var(--ease);

  --tap: 44px;
  --announce-h: 40px;
  --header-h: 62px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

html {
  color-scheme: light;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  min-height: 100vh;
  background-color: var(--black); /* o rodape preto aparece sob o main arredondado */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 400;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition), opacity var(--transition);
}

::selection {
  background: var(--accent);
  color: var(--ink);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  margin-top: var(--section-gap);
}

.muted {
  color: var(--ink-60);
}

/* Titulo em dois tons: a primeira frase em tinta, a segunda a 60%. */
.two-tone span {
  color: var(--ink-60);
}

.t-28 { font-size: 24px; line-height: 28px; }
.t-40 { font-size: 32px; line-height: 34px; letter-spacing: -0.005em; }
.t-48 { font-size: 36px; line-height: 38px; letter-spacing: -0.01em; }

@media (min-width: 768px) {
  .t-28 { font-size: 28px; line-height: 32px; }
  .t-40 { font-size: 40px; line-height: 42px; }
  .t-48 { font-size: 48px; line-height: 50px; }
}

.sub {
  font-size: 18px;
  line-height: 24px;
  color: var(--ink-60);
}

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

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  font-size: 16px;
  color: var(--ink-60);
}

.link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition);
}

.link:hover {
  color: var(--ink);
}

.link:hover svg {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   4. ACESSIBILIDADE
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--transition);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.announce :focus-visible,
.site-footer :focus-visible,
.cell-dark :focus-visible {
  outline-color: var(--white);
}

/* --------------------------------------------------------------------------
   5. MOVIMENTO — reveal opt-in (main.js escreve .js-reveal na raiz)
   -------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. BOTOES — 16px, padding 16px, raio 6, altura 44 (alvo de toque)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}

.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent);
}

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

.btn-dark {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn-dark:hover {
  background-color: #2a2929;
  border-color: #2a2929;
}

.btn-ghost {
  background-color: var(--tint-2);
}

.btn-ghost:hover {
  background-color: var(--tint-3);
}

.btn-text:hover {
  background-color: var(--tint-2);
}

.btn-sm {
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   7. HEADER — barra de aviso preta (40px) + barra branca fixa (62px)
   -------------------------------------------------------------------------- */

.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--announce-h);
  padding-inline: var(--gutter);
  background-color: var(--black);
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.announce p {
  display: inline;
}

.announce a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-block: -2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: var(--tap);
  white-space: nowrap;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
}

.nav-links {
  display: none;
  align-items: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--ink);
}

.nav-links a:hover {
  background-color: var(--tint-2);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-actions .btn-accent,
.header-actions .btn-text {
  display: none;
}

/* Menu mobile: <details>, funciona sem JS */
.menu {
  position: relative;
}

.menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu summary:hover {
  background-color: var(--tint-2);
}

.menu summary svg {
  width: 20px;
  height: 20px;
}

.menu .icon-close {
  display: none;
}

.menu[open] .icon-open {
  display: none;
}

.menu[open] .icon-close {
  display: block;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -16px rgba(12, 10, 8, 0.25);
}

.menu-panel a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 16px;
}

.menu-panel a:hover {
  background-color: var(--tint-2);
}

.menu-panel li + li {
  margin-top: 2px;
}

.menu-panel .menu-sep {
  height: 1px;
  margin: 8px 4px;
  background-color: var(--line);
}

@media (min-width: 960px) {
  .nav-links {
    display: flex;
  }

  .header-actions .btn-accent,
  .header-actions .btn-text {
    display: inline-flex;
  }

  .menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. FORMULARIO DE ACESSO — caixa 450x62, raio 12, botao amarelo dentro
   -------------------------------------------------------------------------- */

.access-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  max-width: 450px;
  padding: 5px;
  background-color: #fafaf9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field:focus-within {
  border-color: var(--ink);
}

.input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  padding: 0 12px 0 19px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
}

.input::placeholder {
  color: var(--ink-60);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.input:focus-visible {
  outline: none;
}

.field .btn {
  flex: none;
  min-height: 50px;
  padding-inline: 20px;
}

@media (max-width: 479px) {
  .field {
    flex-direction: column;
  }

  .input {
    padding-inline: 12px;
  }
}

.feedback {
  min-height: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

/* Estados escritos por main.js */
.access-form.is-error .field {
  border-color: #b3261e;
}

.access-form.is-error .feedback {
  color: #b3261e; /* 5.9:1 sobre branco */
}

.access-form.is-success .feedback {
  color: var(--ink);
}

.access-form.is-checking .input,
.access-form.is-success .input {
  color: var(--ink-60);
}

.access-form.is-checking .btn,
.access-form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

@keyframes fv-shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.access-form.is-shaking .field {
  animation: fv-shake 200ms var(--ease);
}

/* Variante da faixa de acesso: painel branco 768px, raio 6, borda cinza */
.access-form-lg .field {
  max-width: 768px;
  padding: 8px;
  background-color: var(--white);
  border-color: #d2cecb;
  border-radius: var(--radius-sm);
}

.access-form-lg .input {
  min-height: 56px;
  font-size: 18px;
}

.access-form-lg .field .btn {
  min-height: 56px;
}

.access-form-lg .feedback {
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. HERO — grade pontilhada atras de tudo; texto; captura 1312x586
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: 40px;
  padding-bottom: 64px;
  background-image: radial-gradient(rgba(12, 10, 8, 0.13) 1px, transparent 1.2px);
  background-size: 16px 16px;
  background-position: 0 0;
}

@media (min-width: 768px) {
  .hero {
    padding-top: 80px;
  }
}

/* Fade branco no fim da grade, como na referencia (200px). */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, var(--white) 89%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.hero-eyebrow .chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background-color: var(--tint-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.hero h1 {
  max-width: 1050px;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 64px;
    line-height: 64px;
  }
}

.hero .sub {
  max-width: 531px;
  margin-top: 24px;
}

.hero .access-form {
  margin-top: 32px;
}

.hero .microcopy {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.shot {
  margin-top: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  overflow: hidden;
}

/* --- Captura do produto (decorativa, HTML/CSS) ------------------------ */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 420px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
}

@media (min-width: 960px) {
  .app {
    grid-template-columns: 216px minmax(0, 1fr);
    min-height: 584px;
  }
}

.app-side {
  display: none;
  flex-direction: column;
  gap: 24px;
  padding: 20px 16px;
  background-color: var(--card);
  border-right: 1px solid var(--line);
}

@media (min-width: 960px) {
  .app-side {
    display: flex;
  }
}

.app-side-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-nav li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  color: var(--ink-60);
}

.app-nav li i {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: 0.7;
}

.app-nav li.is-active {
  background-color: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

.app-side-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--ink-60);
}

.app-side-user b {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

.app-side-user small {
  display: block;
  font-size: 11px;
}

.app-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background-color: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
}

.app-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: var(--white);
}

@media (min-width: 768px) {
  .app-main {
    padding: 24px;
  }
}

.app-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.app-crumb {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
}

.app-top strong {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.app-top-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding-inline: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-60);
  background-color: var(--white);
}

.app-pill .dot,
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
}

.app-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 768px) {
  .app-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
}

.kpi-main {
  background-color: var(--card);
}

.kpi-label,
.kpi-delta {
  font-size: 11px;
  color: var(--ink-60);
}

.kpi-value {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.app-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

@media (min-width: 768px) {
  .app-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
}

.app-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.app-card-head strong {
  font-weight: 500;
}

.app-card-head span {
  font-size: 11px;
  color: var(--ink-60);
}

.app-chart svg {
  width: 100%;
  height: 120px;
}

.app-chart .grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.app-chart .area {
  fill: rgba(142, 197, 255, 0.35);
}

.app-chart .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.app-chart .pt {
  fill: var(--ink);
}

.app-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-60);
}

.app-origins ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-origins li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
}

.app-origins li span {
  color: var(--ink-60);
}

.app-origins li i {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ink) 0 var(--w), var(--card) var(--w) 100%);
}

.app-origins li b {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.app-table table {
  font-size: 11px;
}

.app-table th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-60);
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}

.app-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.app-table tr:last-child td {
  border-bottom: 0;
}

.app-table em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
}

.app-table em::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
}

.app-table em.pending {
  color: var(--ink-60);
}

.app-table em.pending::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

@media (max-width: 559px) {
  .app-table th:nth-child(2),
  .app-table td:nth-child(2),
  .app-table th:nth-child(5),
  .app-table td:nth-child(5) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. PROVA — titulo 28/32 + grade de 8 celulas quadradas com cartao 2x2
   -------------------------------------------------------------------------- */

.proof-head h2 {
  max-width: 656px;
}

.proof-head .link {
  margin-top: 8px;
}

.cell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 48px;
  background-color: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 768px) {
  .cell-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* Parede de marcas: cada origem com um tratamento tipografico proprio,
   em cinza, como a parede de logos da referencia. */
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 12px;
  background-color: var(--white);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-60);
  text-align: center;
}

.cell.is-mono { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.cell.is-caps { font-size: 14px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.cell.is-bold { font-weight: 500; letter-spacing: -0.04em; font-size: 22px; }
.cell.is-lower { text-transform: lowercase; font-size: 22px; }
.cell.is-wide { font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; }
.cell.is-tight { font-weight: 500; letter-spacing: -0.06em; font-size: 24px; }

.cell-dark {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 24px;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.cell-dark .eyebrow {
  margin-bottom: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-black-60);
}

.cell-dark .stat {
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .cell-dark .stat {
    font-size: 48px;
    line-height: 50px;
  }
}

.cell-dark p {
  color: var(--on-black-60);
}

/* --------------------------------------------------------------------------
   11. PRODUTO — titulo 40/42, dois botoes, bento 2 (483) + 3 (526)
   -------------------------------------------------------------------------- */

.section-head h2 {
  max-width: 755px;
}

.section-head .actions {
  margin-top: 24px;
}

.section-head.is-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-head.is-center h2 {
  max-width: 900px;
}

.section-head.is-center .sub {
  max-width: 560px;
  margin-top: 16px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.bento + .bento {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .bento-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
  overflow: hidden;
}

@media (min-width: 768px) {
  .bento-2 .card {
    min-height: 483px;
  }

  .bento-3 .card {
    min-height: 526px;
  }
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 24px 0 32px;
}

.card h3 {
  font-size: 24px;
  line-height: 28px;
  max-width: 22ch;
}

.card h3 span {
  color: var(--ink-60);
}

.card-corner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--ink);
}

.card-corner svg {
  width: 14px;
  height: 14px;
}

/* A midia sangra pela borda inferior do cartao, como na referencia. */
.card-media {
  position: relative;
  flex: 1;
  margin-top: 24px;
  padding-left: 32px;
}

.card-media .screen {
  position: absolute;
  top: 0;
  left: 32px;
  right: -1px;
  bottom: -1px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--radius) 0 0 0;
  background-color: var(--white);
  box-shadow: 0 -8px 24px -16px rgba(12, 10, 8, 0.2);
  font-size: 12px;
  line-height: 16px;
}

.card-media .screen.is-inset {
  right: 32px;
  border-right: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Em telas estreitas a janela entra no fluxo: nada cobre o titulo. */
@media (max-width: 767px) {
  .card {
    min-height: 0;
  }

  .card-media {
    padding-left: 0;
  }

  .card-media .screen {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 -1px -1px 24px;
  }
}

.screen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-60);
}

.screen-bar i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--tint-3);
}

.screen-bar span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
}

.screen .value {
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.screen .label {
  color: var(--ink-60);
}

.row-list {
  display: flex;
  flex-direction: column;
}

.row-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  border-top: 1px solid var(--line);
}

.row-list li:first-child {
  border-top: 0;
}

.row-list li span {
  color: var(--ink-60);
}

.row-list li b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mini-chart {
  width: 100%;
  height: 72px;
}

.mini-chart .bar {
  fill: var(--tint-3);
}

.mini-chart .bar-now {
  fill: var(--accent);
}

.mini-chart .base {
  stroke: var(--line);
  stroke-width: 1;
}

.converge {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: center;
  gap: 12px;
}

.converge ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.converge li {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background-color: var(--white);
  color: var(--ink-60);
}

.converge svg {
  width: 24px;
  height: 24px;
  color: var(--ink-60);
}

.converge .result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background-color: var(--white);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-60);
  background-color: var(--white);
}

.pill-on {
  border-color: transparent;
  background-color: var(--accent);
  color: var(--ink);
}

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

.roles li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-top: 1px solid var(--line);
}

.roles li:first-child {
  border-top: 0;
}

.roles li span {
  font-weight: 500;
}

.roles li div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   12. FAIXA DE ACESSO — largura total, 700px, gradiente cinza, painel 768
   -------------------------------------------------------------------------- */

.access-band {
  position: relative;
  padding-block: 64px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(112deg, #e3e1dd 0%, #f2f1ee 38%, #e9e8e5 62%, #d5d3cf 100%);
  overflow: hidden;
}

/* Duas diagonais claras, como o fundo da referencia. */
.access-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(118deg, transparent 56%, rgba(255, 255, 255, 0.55) 56.15%, transparent 56.7%),
    linear-gradient(118deg, transparent 70%, rgba(255, 255, 255, 0.45) 70.15%, transparent 70.8%);
  pointer-events: none;
}

.access-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.access-inner h2 {
  max-width: 640px;
}

.access-inner .sub {
  max-width: 460px;
  margin-top: 16px;
}

.access-inner .access-form {
  width: 100%;
  max-width: 768px;
  align-items: center;
  margin-top: 40px;
}

.access-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 16px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.access-note a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.access-note a[aria-disabled='true'] {
  cursor: default;
}

/* --------------------------------------------------------------------------
   13. HISTORIA — dois quadros: caos vs. cofre
   -------------------------------------------------------------------------- */

.story-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.story-head h2 {
  max-width: 960px;
}

.story-head .sub {
  max-width: 520px;
  margin-top: 16px;
}

.stage {
  position: relative;
  height: 320px;
  max-width: 1050px;
  margin: 48px auto 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .stage {
    height: 440px;
  }
}

.stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(to top, var(--white), transparent);
  pointer-events: none;
}

.stage-order {
  height: auto;
  overflow: visible;
}

.stage-order::after {
  display: none;
}

.note {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 188px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  box-shadow: 0 16px 32px -20px rgba(12, 10, 8, 0.35);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-60);
  transform: rotate(var(--r, 0deg));
}

.note b {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
}

.note i {
  display: block;
  height: 6px;
  border-radius: 2px;
  background-color: var(--card);
}

.note i + i {
  width: 68%;
}

.stage-chaos .note:nth-of-type(1) { --r: -6deg; top: 6%;  left: 3%; }
.stage-chaos .note:nth-of-type(2) { --r: 4deg;  top: 16%; left: 33%; }
.stage-chaos .note:nth-of-type(3) { --r: -3deg; top: 4%;  right: 5%; }
.stage-chaos .note:nth-of-type(4) { --r: 7deg;  top: 54%; left: 10%; }
.stage-chaos .note:nth-of-type(5) { --r: -5deg; top: 60%; left: 45%; }
.stage-chaos .note:nth-of-type(6) { --r: 3deg;  top: 50%; right: 3%; }

@media (max-width: 767px) {
  .stage-chaos .note:nth-of-type(3),
  .stage-chaos .note:nth-of-type(6) {
    display: none;
  }

  .stage-chaos .note:nth-of-type(2) { left: auto; right: 3%; }
  .stage-chaos .note:nth-of-type(5) { left: auto; right: 6%; }
}

.stage-chaos svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage-chaos path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.vault {
  width: min(560px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: 0 32px 64px -40px rgba(12, 10, 8, 0.4);
}

.vault-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-60);
}

.vault-value {
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .vault-value {
    font-size: 56px;
    line-height: 56px;
  }
}

.vault-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vault-rows div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-60);
}

.vault-rows b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. COFRE — titulo 48 central + linhas 533 | 755 com midia quadrada
   -------------------------------------------------------------------------- */

.rows {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 48px;
}

@media (min-width: 960px) {
  .rows {
    gap: 96px;
  }
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 960px) {
  .row {
    grid-template-columns: minmax(0, 533fr) minmax(0, 755fr);
  }

  .row-flip .row-text {
    order: 2;
  }
}

.row-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.row-text h3 {
  max-width: 464px;
  font-size: 24px;
  line-height: 28px;
}

.row-text h3 span {
  color: var(--ink-60);
}

.row-text p {
  max-width: 464px;
  margin-top: 16px;
  color: var(--ink-60);
}

.row-text .link {
  margin-top: 8px;
}

.row-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* com aspect-ratio + stretch, sem isto a largura derivaria da altura */
  aspect-ratio: 4 / 3;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
}

@media (min-width: 960px) {
  .row-media {
    aspect-ratio: 1; /* 755x755 na referencia */
    padding: 48px;
  }
}

.panel {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: 0 24px 48px -32px rgba(12, 10, 8, 0.35);
  font-size: 13px;
  line-height: 18px;
}

.panel .value {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.panel .label {
  color: var(--ink-60);
}

.ledger {
  font-size: 12px;
  line-height: 16px;
}

.ledger th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-60);
  padding: 6px;
  border-bottom: 1px solid var(--line);
}

.ledger td {
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.ledger tr:last-child td {
  border-bottom: 0;
}

.ledger .mono {
  color: var(--ink-60);
}

@media (max-width: 439px) {
  .ledger th:nth-child(3),
  .ledger td:nth-child(3) {
    display: none;
  }
}

/* Faixa cinza -> amarela, 179px, texto 20 + 16, botao preto */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  min-height: 179px;
  padding: 32px 40px;
  border-radius: var(--radius);
  background:
    linear-gradient(100deg, var(--card) 0%, var(--card) 46%, #dbeeff 70%, var(--accent) 100%);
}

.banner h3 {
  font-size: 20px;
  line-height: 24px;
}

.banner p {
  margin-top: 6px;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   15. PERIMETRO — dois cartoes 644, midia 4:3, titulo 24, texto 60%
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 24px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.duo-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.duo-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
}

.duo-media .panel {
  max-width: 440px;
}

.duo-item h3 {
  margin-top: 24px;
  font-size: 24px;
  line-height: 28px;
}

.duo-item p {
  max-width: 480px;
  margin-top: 12px;
  color: var(--ink-60);
}

.duo-item .link {
  margin-top: 8px;
}

.perimeter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.perimeter-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-pill);
}

.perimeter-ring .panel {
  width: 160px;
  padding: 14px;
  gap: 4px;
  text-align: center;
  box-shadow: none;
}

.perimeter small {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   16. MANIFESTO — tipografico, coluna de 656px
   -------------------------------------------------------------------------- */

.manifesto {
  max-width: 656px;
}

.manifesto .eyebrow {
  display: block;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.manifesto p {
  font-size: 22px;
  line-height: 30px;
  color: var(--ink-60);
}

@media (min-width: 768px) {
  .manifesto p {
    font-size: 28px;
    line-height: 34px;
  }
}

.manifesto p + p {
  margin-top: 28px;
}

.manifesto p.is-key {
  color: var(--ink);
}

.manifesto p.manifesto-close {
  margin-top: 48px;
  font-size: 32px;
  line-height: 34px;
  letter-spacing: -0.005em;
  color: var(--ink);
}

@media (min-width: 768px) {
  .manifesto p.manifesto-close {
    font-size: 40px;
    line-height: 42px;
  }
}

/* --------------------------------------------------------------------------
   17. FECHO — titulo 24 + formulario; fim do main arredondado sobre o preto
   -------------------------------------------------------------------------- */

main {
  position: relative;
  z-index: 1;
  background-color: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
}

.final {
  padding-block: 96px;
}

.final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final-inner h2 {
  max-width: 560px;
  font-size: 24px;
  line-height: 28px;
}

.final-inner .access-form {
  width: 100%;
  max-width: 450px;
  align-items: center;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   18. FOOTER — preto, 6 colunas de 199px, links 14px a 60%
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--black);
  color: var(--white);
  padding-block: 96px 40px;
}

@media (min-width: 768px) {
  .site-footer {
    padding-top: 128px;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 24px;
}

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

.footer-brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-brand {
    grid-column: span 3;
  }
}

.footer-brand p {
  max-width: 300px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-black-60);
}

.footer-head {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 6px;
}

.site-footer nav ul {
  display: flex;
  flex-direction: column;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  font-size: 14px;
  line-height: 20px;
  color: var(--on-black-60);
}

.site-footer nav a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  line-height: 20px;
  color: var(--on-black-60);
}

/* --------------------------------------------------------------------------
   19. FOTOS E BLOCOS HUMANIZADOS — espelham os blocos com pessoas da Ramp
   Contraste: texto branco so sobre a faixa escura do gradiente (>= 85% de
   #0C0A08 na base, > 12:1); nada de texto sobre foto sem faixa.
   -------------------------------------------------------------------------- */

/* Celula de destaque da grade: foto + numero grande */
.cell-feature {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.cell-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cell-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.88) 0%, rgba(12, 10, 8, 0.45) 45%, rgba(12, 10, 8, 0) 75%);
}

.cell-feature-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: 280px;
  padding: 20px;
}

.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: auto;
  min-height: 28px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 12px;
  line-height: 16px;
}

.brand-tag svg {
  width: 14px;
  height: 14px;
}

.cell-feature .stat {
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .cell-feature .stat {
    font-size: 56px;
    line-height: 56px;
  }
}

.cell-feature p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}

/* Linhas do cofre: citacao alinhada ao pe da coluna de texto */
.row {
  align-items: stretch;
}

.row-text {
  display: flex;
  flex-direction: column;
}

.row-quote {
  margin-top: 40px;
}

@media (min-width: 960px) {
  .row-quote {
    margin-top: auto;
    padding-top: 48px;
  }
}

.row-quote p {
  max-width: 464px;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
}

.who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.who b {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.who span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.row-quote .link {
  margin-top: 4px;
  font-size: 14px;
}

/* Midia 1: palavra gigante sobre fundo areia, com brilho amarelo */
.row-media.is-word {
  position: relative;
  padding: 0;
  overflow: hidden;
  background-color: var(--sand);
}

.row-media.is-word::before {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  top: 40%;
  height: 26%;
  background: radial-gradient(closest-side, rgba(142, 197, 255, 0.85), rgba(142, 197, 255, 0));
  filter: blur(18px);
}

.big-word {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  font-size: clamp(56px, 11vw, 132px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.big-word svg {
  width: 0.72em;
  height: 0.72em;
}

.media-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 14px;
}

.media-btn svg {
  width: 14px;
  height: 14px;
}

/* Midia 2: foto com botao de play */
.row-media.is-photo,
.duo-media.is-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
  background-color: var(--black);
}

.row-media.is-photo img,
.duo-media.is-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo-media.is-photo .panel {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  max-width: 300px;
  box-shadow: 0 24px 48px -24px rgba(12, 10, 8, 0.5);
}

/* Midia 3: documento de politica */
.row-media > *,
.duo-media > * {
  min-width: 0;
}

.doc {
  width: 100%;
  min-width: 0;
  max-width: 560px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: 0 24px 48px -32px rgba(12, 10, 8, 0.35);
}

.doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.doc-head h4 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 400;
}

.doc-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  font-size: 13px;
  white-space: nowrap;
}

.doc-file svg {
  width: 14px;
  height: 14px;
}

.doc-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.doc-meta li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-meta svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.doc-meta .avatars {
  display: flex;
}

.doc-meta .avatars img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--white);
  object-fit: cover;
}

.doc-meta .avatars img + img {
  margin-left: -8px;
}

.doc h5 {
  margin-top: 28px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

.doc p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

/* Depoimentos em video */
.receipts-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.receipts-head .kicker {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.receipts-head .actions {
  margin-top: 24px;
}

.receipts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

@media (min-width: 960px) {
  .receipts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

.receipt {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--black);
  color: var(--white);
}

.receipt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.receipt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.9) 0%, rgba(12, 10, 8, 0.5) 40%, rgba(12, 10, 8, 0) 70%);
}

.receipt-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 20px;
}

.receipt-body p {
  font-size: 16px;
  line-height: 22px;
}

.receipt .who {
  margin-top: 12px;
}

.receipt .who span {
  color: rgba(255, 255, 255, 0.8);
}

.receipt .play {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.receipt .play svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.receipt.is-dark::after {
  display: none;
}

.receipt.is-dark .receipt-body {
  justify-content: space-between;
}

.receipt.is-dark .big-quote {
  font-size: 24px;
  line-height: 28px;
}

@media (min-width: 960px) {
  .receipt.is-dark .big-quote {
    font-size: 28px;
    line-height: 32px;
  }
}

/* Formulario no pe do rodape, como na referencia */
.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-cta p {
  font-size: 14px;
  line-height: 20px;
  color: var(--on-black-60);
}

.footer-cta p b {
  font-weight: 400;
  color: var(--white);
}

.site-footer .field {
  background-color: var(--white);
  border-color: rgba(255, 255, 255, 0.2);
}

.site-footer .field:focus-within {
  border-color: var(--accent);
}

.site-footer .feedback {
  color: var(--on-black-60);
}

.site-footer .access-form.is-error .feedback {
  color: #ff8a80; /* 8.6:1 sobre #1A1919 */
}

.site-footer .access-form.is-error .field {
  border-color: #ff8a80;
}

.site-footer .access-form.is-success .feedback {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   20. HERO EM DUAS COLUNAS — texto | cartao 612x612 com feed (ref. Ramp AP)
   -------------------------------------------------------------------------- */

.hero {
  padding-top: 24px;
  padding-bottom: 0;
  background-image: none;
}

.hero::after {
  display: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 24px;
  align-items: stretch;
}

@media (min-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 612px;
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

@media (min-width: 1100px) {
  .hero-copy {
    justify-content: space-between;
    padding-block: 8px;
  }
}

.hero .hero-eyebrow {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-60);
}

.hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-main h1 {
  max-width: 640px; /* duas linhas, como na referencia */
}

.hero .sub {
  max-width: 520px;
}

.btn-outline {
  border-color: var(--line);
  background-color: var(--white);
}

.btn-outline:hover {
  background-color: var(--tint-2);
}

.btn-outline svg {
  width: 14px;
  height: 14px;
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 24px;
  border-radius: var(--radius);
  background-color: var(--card);
  overflow: hidden;
}

@media (min-width: 1100px) {
  .hero-card {
    padding: 32px;
  }
}

.hero-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 20px;
  line-height: 24px;
}

.hero-card-title .spin {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--ink-60);
  animation: fv-spin 6s linear infinite;
}

.hero-card-title .spin svg {
  width: 20px;
  height: 20px;
}

@keyframes fv-spin {
  to { transform: rotate(360deg); }
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.feed-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 68px 78px 66px 18px;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: var(--white);
  box-shadow: 0 1px 2px rgba(12, 10, 8, 0.06);
  font-size: 11px;
  line-height: 14px;
  color: var(--ink);
  animation: fv-rise 400ms var(--ease) both;
}

.feed-row:nth-child(1)  { animation-delay: 60ms; }
.feed-row:nth-child(2)  { animation-delay: 120ms; }
.feed-row:nth-child(3)  { animation-delay: 180ms; }
.feed-row:nth-child(4)  { animation-delay: 240ms; }
.feed-row:nth-child(5)  { animation-delay: 300ms; }
.feed-row:nth-child(6)  { animation-delay: 360ms; }
.feed-row:nth-child(7)  { animation-delay: 420ms; }
.feed-row:nth-child(8)  { animation-delay: 480ms; }
.feed-row:nth-child(9)  { animation-delay: 540ms; }
.feed-row:nth-child(10) { animation-delay: 600ms; }
.feed-row:nth-child(11) { animation-delay: 660ms; }
.feed-row:nth-child(12) { animation-delay: 720ms; }

@keyframes fv-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.feed-row.is-done {
  border-color: #1f7a3a; /* verde de aprovado, so na borda (decorativo) */
}

.feed-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: var(--tint-3);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.feed-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-amt,
.feed-id {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.feed-date,
.feed-id {
  color: var(--ink-60);
  white-space: nowrap;
}

.feed-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background-color: #1f7a3a;
  color: var(--white);
}

.feed-ok svg {
  width: 10px;
  height: 10px;
}

.feed-dot {
  width: 6px;
  height: 6px;
  margin: 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--tint-3);
}

.feed-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tint-3) 0 60%, transparent 60%);
}

@media (max-width: 479px) {
  .feed-row {
    grid-template-columns: 20px minmax(0, 1fr) 68px 18px;
  }

  .feed-date,
  .feed-id {
    display: none;
  }
}

/* Faixa de marcas rolando, largura total, com fade nas bordas */
.logos {
  margin-top: 48px;
}

.logos-caption {
  margin-bottom: 24px;
  padding-inline: var(--gutter);
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  padding-inline: 36px;
  animation: fv-marquee 40s linear infinite;
}

.marquee-track li {
  flex: none;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-60);
  white-space: nowrap;
}

.marquee-track li.is-mono { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.marquee-track li.is-caps { font-size: 14px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.marquee-track li.is-bold { font-weight: 500; letter-spacing: -0.04em; font-size: 22px; }
.marquee-track li.is-lower { font-size: 22px; }
.marquee-track li.is-wide { font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; }
.marquee-track li.is-tight { font-weight: 500; letter-spacing: -0.06em; font-size: 24px; }

@keyframes fv-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 48px;
  }

  .marquee-track li[aria-hidden='true'] {
    display: none;
  }

  .feed-row,
  .hero-card-title .spin {
    animation: none;
  }
}

/* Cabecalho de secao centralizado com kicker (ref. "AI-powered Invoice Processing") */
.section-head .kicker {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.section-head.is-center .actions {
  justify-content: center;
}

/* Abaixo de 1100px o cartao do hero cresce com a lista em vez de cortar. */
@media (max-width: 1099px) {
  .hero-card {
    aspect-ratio: auto;
  }
}

/* --------------------------------------------------------------------------
   21. BRIEF DE CORRECAO (03/09) — hero que resolve no numero, sem fotos,
   origem, migracao, escala de espacamento, botao invertido sobre acento
   -------------------------------------------------------------------------- */

/* Numeros sempre tabulares e com largura reservada: zero CLS na animacao */
.num,
.value,
.kpi-value,
.vault-value,
.feed-amt,
.ledger td,
.row-list b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.result-panel .value {
  min-width: 11ch;
}

/* Regra: em fundo de acento o botao inverte (branco); em fundo neutro, o botao e o acento. */
.btn-white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn-white:hover {
  background-color: #f7f7f5;
  border-color: #f7f7f5;
}

/* Eyebrow -> H2: 12px. Headline -> conteudo: 48px. */
.section-head {
  margin-bottom: 48px;
}

.section-head .kicker {
  margin-bottom: 12px;
}

.story-head {
  margin-bottom: 0;
}

.actions.is-center {
  justify-content: center;
  margin-top: 48px;
}

/* Hero: dominio no topo, feed valida e colapsa no resultado (3,0s, sem loop) */
.hero-card {
  gap: 0;
}

.hero-card-domain {
  align-self: flex-start;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-60);
}

.hero-stage {
  position: relative;
  display: grid;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.hero-stage > * {
  grid-area: 1 / 1;
}

.hero-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  animation: fv-feed-out 320ms var(--ease) 2400ms both;
}

.hero-result {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fv-result-in 420ms var(--ease) 2640ms both;
}

.hero-result .panel {
  max-width: 420px;
}

@keyframes fv-feed-out {
  from { opacity: 1; transform: none; visibility: visible; }
  to   { opacity: 0; transform: translateY(-8px) scale(0.985); visibility: hidden; }
}

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

.feed-st {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

.feed-st .feed-dot {
  margin: 0;
}

.feed-st .feed-ok {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fv-ok 200ms var(--ease) both;
}

@keyframes fv-ok {
  to { opacity: 1; }
}

.feed-row {
  animation: fv-rise 400ms var(--ease) both, fv-border 200ms var(--ease) both;
}

@keyframes fv-border {
  to { border-color: #1f7a3a; }
}

/* Linhas sobem de 60 a 720ms; checks caem de 1000 a 1880ms; saida em 2400ms; resultado em 2640ms. */
.feed-row:nth-child(1)  { animation-delay: 60ms, 1000ms; }
.feed-row:nth-child(2)  { animation-delay: 120ms, 1080ms; }
.feed-row:nth-child(3)  { animation-delay: 180ms, 1160ms; }
.feed-row:nth-child(4)  { animation-delay: 240ms, 1240ms; }
.feed-row:nth-child(5)  { animation-delay: 300ms, 1320ms; }
.feed-row:nth-child(6)  { animation-delay: 360ms, 1400ms; }
.feed-row:nth-child(7)  { animation-delay: 420ms, 1480ms; }
.feed-row:nth-child(8)  { animation-delay: 480ms, 1560ms; }
.feed-row:nth-child(9)  { animation-delay: 540ms, 1640ms; }
.feed-row:nth-child(10) { animation-delay: 600ms, 1720ms; }
.feed-row:nth-child(11) { animation-delay: 660ms, 1800ms; }
.feed-row:nth-child(12) { animation-delay: 720ms, 1880ms; }

.feed-row:nth-child(1)  .feed-ok { animation-delay: 1000ms; }
.feed-row:nth-child(2)  .feed-ok { animation-delay: 1080ms; }
.feed-row:nth-child(3)  .feed-ok { animation-delay: 1160ms; }
.feed-row:nth-child(4)  .feed-ok { animation-delay: 1240ms; }
.feed-row:nth-child(5)  .feed-ok { animation-delay: 1320ms; }
.feed-row:nth-child(6)  .feed-ok { animation-delay: 1400ms; }
.feed-row:nth-child(7)  .feed-ok { animation-delay: 1480ms; }
.feed-row:nth-child(8)  .feed-ok { animation-delay: 1560ms; }
.feed-row:nth-child(9)  .feed-ok { animation-delay: 1640ms; }
.feed-row:nth-child(10) .feed-ok { animation-delay: 1720ms; }
.feed-row:nth-child(11) .feed-ok { animation-delay: 1800ms; }
.feed-row:nth-child(12) .feed-ok { animation-delay: 1880ms; }

.hero-card-title .spin {
  animation: fv-spin 6s linear 3;
}

@media (prefers-reduced-motion: reduce) {
  .hero-feed {
    display: none;
  }

  .hero-result,
  .feed-row,
  .feed-st .feed-ok {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Paineis das linhas: chrome de janela + label mono, sobre superficie neutra */
.row-media .screen.is-panel {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: 0 24px 48px -32px rgba(12, 10, 8, 0.35);
  font-size: 13px;
  line-height: 18px;
}

.row-media .screen.is-panel .value {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.02em;
}

.row-media .screen.is-panel .ledger {
  overflow-x: auto;
}

.ledger em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ledger em::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
}

.ledger em.pending {
  color: var(--ink-60);
}

.ledger em.pending::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

@media (max-width: 559px) {
  .ledger th:nth-child(5),
  .ledger td:nth-child(5) {
    display: none;
  }
}

.doc-meta .avatars i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  background-color: var(--tint-3);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink);
}

.doc-meta .avatars i + i {
  margin-left: -8px;
}

/* Marquee sem serif: variacao so por peso, tamanho e tracking */
.marquee-track li.is-medium { font-weight: 500; font-size: 22px; letter-spacing: -0.03em; }
.marquee-track li.is-light { font-weight: 400; font-size: 24px; letter-spacing: -0.01em; }

/* Origem: coluna de leitura, so texto */
.origin {
  max-width: 60ch;
}

.origin .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.origin h2 + p {
  margin-top: 48px;
}

.origin p {
  font-size: 20px;
  line-height: 30px;
  color: var(--ink-60);
}

.origin p + p {
  margin-top: 24px;
}

.origin .origin-sign {
  margin-top: 40px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

/* Migracao: bloco curto antes do fecho */
.migrate {
  max-width: 60ch;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
}

.migrate p {
  margin-top: 12px;
  color: var(--ink-60);
}

/* Headline -> conteudo = 48px vindo so do section-head; blocos abaixo sem margem propria */
.bento,
.rows,
.duo {
  margin-top: 0;
}

.bento + .bento {
  margin-top: 24px;
}

/* O feed nao dita a altura do palco: quem dita e o resultado (evita cartao alto no mobile) */
.hero-stage {
  min-height: 0;
}

.hero-feed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

@media (min-width: 1100px) {
  .hero-stage {
    height: 100%;
  }
}

/* Origem como peca editorial: coluna de leitura centralizada */
.origin {
  margin-inline: auto;
  text-align: center;
}

.origin p {
  margin-inline: auto;
}

/* Linhas midia + texto: texto centrado na altura do painel */
.row {
  align-items: center;
}

.row-quote {
  display: none;
}

/* Migracao virou secao: o card antigo nao e mais usado */
#migracao .section-head {
  margin-bottom: 0;
}

/* Codigo mascarado nao quebra linha no mobile */
.duo-media .value.mono {
  font-size: clamp(22px, 7.5vw, 40px);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   22. HERO CENTRALIZADO — o cartao saiu; a animacao desceu para a historia
   -------------------------------------------------------------------------- */

.hero-center {
  display: flex;
  justify-content: center;
}

.hero-center .hero-copy {
  align-items: center;
  gap: 32px;
  padding-block: 56px 0;
  text-align: center;
}

.hero-center .hero-main {
  align-items: center;
}

.hero-center .hero-main h1 {
  max-width: 900px;
}

.hero-center .sub {
  margin-inline: auto;
}

.hero-center .access-form {
  align-items: center;
}

.hero-eyebrow .mono {
  color: var(--ink-60);
}

/* Cartao com feed -> resultado, agora na secao "Calculado uma vez" */
.hero-card.is-story {
  max-width: 612px;
  margin: 48px auto 0;
  aspect-ratio: 1;
}

@media (max-width: 1099px) {
  .hero-card.is-story {
    aspect-ratio: auto;
    min-height: 480px;
  }

  .hero-card.is-story .hero-stage {
    min-height: 400px;
  }
}

/* Parede de marcas com logos reais, monocromaticas, na cor secundaria */
.marquee-track {
  gap: 64px;
}

.marquee-track .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-60);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.marquee-track .logo svg {
  display: block;
  height: 24px;
  width: auto;
  flex: none;
}

.marquee-track .logo.is-wm svg {
  height: 26px;
}

.footer-note {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 18px;
  color: var(--on-black-60);
}

/* --------------------------------------------------------------------------
   23. ACABAMENTO — gesto de marca, hover, nav, foco, estados, paginas internas
   -------------------------------------------------------------------------- */

/* Gesto de marca: luz passando pela borda do cartao (compositor, sem JS).
   Aparece em tres lugares: resultado da historia e os dois cartoes de perimetro. */
@property --fv-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.edge-light {
  position: relative;
}

.edge-light::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--fv-angle),
    transparent 0 68%, var(--accent) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fv-edge 7s linear infinite;
  pointer-events: none;
}

@keyframes fv-edge {
  to { --fv-angle: 360deg; }
}

/* Cards reagem ao cursor: sobem 4px e a borda escurece */
.card {
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
  }
}

/* Hero entra em cascata no carregamento */
.hero-center .hero-copy > * {
  animation: fv-rise 480ms var(--ease) both;
}

.hero-center .hero-copy > :nth-child(1) { animation-delay: 40ms; }
.hero-center .hero-copy > :nth-child(2) { animation-delay: 140ms; }
.hero-center .hero-copy > :nth-child(3) { animation-delay: 240ms; }

.hero-center .hero-main > * {
  animation: fv-rise 480ms var(--ease) both;
}

.hero-center .hero-main > :nth-child(1) { animation-delay: 40ms; }
.hero-center .hero-main > :nth-child(2) { animation-delay: 140ms; }
.hero-center .hero-main > :nth-child(3) { animation-delay: 240ms; }

/* Nav translucida; a borda so aparece depois de 80px de scroll */
.header-bar {
  background-color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@supports (animation-timeline: scroll()) {
  .header-bar {
    border-bottom-color: transparent;
    animation: fv-nav-border linear both;
    animation-timeline: scroll();
    animation-range: 0 80px;
  }
}

@keyframes fv-nav-border {
  to { border-bottom-color: var(--line); }
}

/* Foco desenhado: anel de acento por fora, tinta por dentro */
.field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(142, 197, 255, 0.45);
}

.btn:focus-visible,
.link:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(142, 197, 255, 0.45);
}

/* Estado "verificando": ponto pulsando antes da mensagem */
.access-form.is-checking .feedback::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
  vertical-align: middle;
  animation: fv-pulse 900ms var(--ease) infinite;
}

@keyframes fv-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* Numero que conta: largura reservada para nao mover o layout */
[data-count] {
  display: inline-block;
  min-width: var(--count-width, 0);
}

/* Paginas internas: termos, privacidade, convite, 404 */
.page {
  max-width: 60ch;
  padding-block: 64px 96px;
}

.page .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.page h1 {
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -0.01em;
}

.page h2 {
  margin-top: 40px;
  font-size: 24px;
  line-height: 28px;
}

.page p {
  margin-top: 16px;
  color: var(--ink-60);
}

.page p.is-key {
  color: var(--ink);
}

.page .access-form {
  margin-top: 32px;
}

.page .link {
  margin-top: 24px;
}

.page-meta {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-60);
}

@media (prefers-reduced-motion: reduce) {
  .edge-light::before {
    animation: none;
    --fv-angle: 210deg;
  }

  .hero-center .hero-copy > *,
  .hero-center .hero-main > *,
  .access-form.is-checking .feedback::before {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .card:hover {
    transform: none;
  }
}

/* O body e preto (rodape); o header precisa de fundo branco atras da barra translucida */
.site-header {
  background-color: var(--white);
}

/* Luz de borda com 2px: visivel sem gritar */
.edge-light::before {
  inset: -2px;
  padding: 2px;
}

/* --------------------------------------------------------------------------
   24. CAPTURAS REAIS DO PRODUTO (nero, dados de demonstracao)
   -------------------------------------------------------------------------- */

.shot-app {
  margin: 48px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: #0b0b0b;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(12, 10, 8, 0.45);
}

.shot-app img {
  display: block;
  width: 100%;
  height: auto;
}

/* Moldura escura com raio: usada na historia e nas linhas do cofre */
.app-frame {
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #0b0b0b;
  overflow: hidden;
  box-shadow: 0 32px 64px -40px rgba(12, 10, 8, 0.55);
}

.app-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-result .app-frame {
  max-width: 520px;
}

/* Cartoes do bento: a captura sangra pela borda inferior direita */
.card-media .app-shot {
  position: absolute;
  top: 0;
  left: 32px;
  right: -1px;
  bottom: -1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--radius) 0 0 0;
  background-color: #0b0b0b;
  overflow: hidden;
}

.card-media .app-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

@media (max-width: 767px) {
  .card-media .app-shot {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 -1px -1px 24px;
    aspect-ratio: 4 / 3;
  }
}

/* Cartao da historia abraca a captura em vez de ficar quadrado com sobra */
.hero-card.is-story {
  aspect-ratio: auto;
}

.hero-card.is-story .hero-stage {
  min-height: 420px;
}

.hero-result .app-frame {
  max-width: 100%;
}

/* Capturas do prototipo oficial sao claras: molduras claras */
.shot-app,
.app-frame,
.card-media .app-shot {
  background-color: var(--white);
  border-color: var(--line);
}

.app-frame {
  box-shadow: 0 24px 48px -32px rgba(12, 10, 8, 0.35);
}

/* --------------------------------------------------------------------------
   25. ARRUMACAO FINTECH — uma coluna, uma tela por secao, acento unico
   -------------------------------------------------------------------------- */

/* Acento do site vira tinta: preto e a cor de acao; o limao so existe dentro das telas */
:root {
  --accent: #0c0a08;
  --accent-hover: #2a2929;
}

.btn-accent {
  color: var(--white);
}

.pill-on {
  color: var(--white);
}

.field:focus-within {
  box-shadow: 0 0 0 4px rgba(12, 10, 8, 0.12);
}

.btn:focus-visible,
.link:focus-visible,
.nav-links a:focus-visible {
  box-shadow: 0 0 0 6px rgba(12, 10, 8, 0.12);
}

::selection {
  background: var(--ink);
  color: var(--white);
}

.banner {
  background: linear-gradient(100deg, var(--card) 0%, var(--card) 40%, #e6e4e0 100%);
}

.btn-white {
  border-color: var(--line);
}

.edge-light::before {
  background: conic-gradient(from var(--fv-angle),
    transparent 0 68%, rgba(12, 10, 8, 0.55) 84%, transparent 100%);
}

.mini-chart .bar-now,
.app-chart .area {
  fill: rgba(12, 10, 8, 0.85);
}

.feed-row.is-done,
.feed-ok {
  border-color: var(--ink);
  background-color: var(--ink);
}

/* Hero em uma coluna: frase, formulario e a tela inteira embaixo */
.hero-center {
  flex-direction: column;
  align-items: center;
}

.hero-center .hero-copy {
  width: 100%;
  max-width: 900px;
}

.shot-app {
  width: 100%;
  margin-top: 56px;
  box-shadow: 0 48px 96px -48px rgba(12, 10, 8, 0.4);
}

/* Cards do bento: so texto, sem tela dentro de tela */
.card {
  min-height: 0;
  padding-bottom: 32px;
}

.card-text {
  max-width: 40ch;
  margin: 16px 32px 0;
  color: var(--ink-60);
}

@media (min-width: 768px) {
  .bento-2 .card,
  .bento-3 .card {
    min-height: 0;
  }
}

/* Vitrines: frase centralizada, tela larga embaixo, muito branco */
.showcases {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

@media (min-width: 960px) {
  .showcases {
    gap: 128px;
  }
}

.showcase-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.showcase-text h3 {
  max-width: 640px;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .showcase-text h3 {
    font-size: 40px;
    line-height: 42px;
  }
}

.showcase-text h3 span {
  color: var(--ink-60);
}

.showcase-text p {
  max-width: 560px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 24px;
  color: var(--ink-60);
}

.showcase-text .link {
  margin-top: 8px;
}

.showcase-media {
  max-width: 1100px;
  margin: 40px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  overflow: hidden;
  box-shadow: 0 48px 96px -48px rgba(12, 10, 8, 0.35);
}

.showcase-media img {
  display: block;
  width: 100%;
  height: auto;
}

.section-head.is-center .actions {
  margin-top: 24px;
}

/* No mobile o header mostra so o botao preto e o menu */
@media (max-width: 959px) {
  .header-actions .btn-ghost {
    display: none;
  }
}

/* Sem dashboards: vitrines viram tres colunas de texto */
.showcases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 24px;
}

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

.showcase-text {
  align-items: flex-start;
  text-align: left;
}

.showcase-text h3 {
  font-size: 24px;
  line-height: 28px;
}

@media (min-width: 768px) {
  .showcase-text h3 {
    font-size: 28px;
    line-height: 32px;
  }
}

.showcase-text p {
  font-size: 16px;
  line-height: 24px;
}

.hero-result .panel {
  max-width: 420px;
}

/* Manifesto centralizado */
.manifesto {
  margin-inline: auto;
  text-align: center;
}

.manifesto p {
  margin-inline: auto;
}

/* Integracoes sem logo disponivel entram so com o nome, no mesmo peso */
.marquee-track .logo.is-text .logo-name {
  font-size: 20px;
  letter-spacing: -0.03em;
}

/* Faixa com 15 marcas: rolagem mais longa e alturas equalizadas por marca */
.marquee-track {
  animation-duration: 55s;
}

.marquee-track .logo.is-wm svg {
  height: 24px;
}

.marquee-track .logo svg {
  max-width: 160px;
}

/* --------------------------------------------------------------------------
   26. CAOS -> ORDEM — as fontes reais se alinham e se ligam ao cofre,
   dirigidas pelo scroll (animation-timeline: view()). Sem JS.
   Fallback e movimento reduzido: estado final, tudo conectado.
   -------------------------------------------------------------------------- */

.cv {
  position: relative;
  max-width: 1320px;
  margin: 56px auto 0;
  padding-top: 24px;
}

.cv-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  min-height: 120px;
}

.cv-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 132px;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  box-shadow: 0 8px 24px -16px rgba(12, 10, 8, 0.25);
  color: var(--ink-60);
}

.cv-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.cv-logo svg {
  display: block;
  height: 18px;
  width: auto;
  max-width: 120px;
}

.cv-val {
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-60);
}

.cv-lines {
  display: block;
  width: 100%;
  height: 120px;
  margin-top: 8px;
}

.cv-lines path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
}

.cv-vault {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: -8px;
  text-align: center;
}

.cv-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--ink);
  color: var(--white);
}

.cv-mark svg {
  width: 22px;
  height: 22px;
}

.cv-num {
  margin-top: 8px;
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -0.02em;
}

.cv-label {
  font-size: 14px;
  color: var(--ink-60);
}

/* Estado final por padrao (navegador sem scroll-timeline, ou movimento reduzido) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cv-chip {
      animation: cv-settle linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 95%;
      transform: translate(calc(var(--dx) * var(--k, 1)), calc(var(--dy) * var(--k, 1))) rotate(var(--r));
      opacity: 0.55;
    }

    .cv-chip .cv-val {
      animation: cv-fade linear both;
      animation-timeline: view();
      animation-range: entry 60% entry 95%;
    }

    .cv-lines path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: cv-draw linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 35%;
      animation-delay: calc(var(--i) * 0s);
    }

    .cv-vault {
      animation: cv-rise linear both;
      animation-timeline: view();
      animation-range: entry 50% cover 40%;
    }
  }
}

@keyframes cv-settle {
  from { transform: translate(calc(var(--dx) * var(--k, 1)), calc(var(--dy) * var(--k, 1))) rotate(var(--r)); opacity: 0.55; color: var(--ink-60); }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; color: var(--ink); }
}

@keyframes cv-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes cv-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes cv-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .cv-row {
    gap: 8px;
  }

  .cv-chip {
    min-width: 0;
    padding: 10px 12px 8px;
  }

  .cv-logo {
    font-size: 12px;
  }

  .cv-logo svg {
    height: 16px;
    max-width: 96px;
  }

  .cv-lines {
    height: 72px;
  }

  .cv-num {
    font-size: 32px;
    line-height: 34px;
  }
}

/* Timeline unica no container: a cena inteira responde ao scroll do bloco, nao de cada chip */
.cv {
  overflow: clip;
  view-timeline-name: --cv;
  view-timeline-axis: block;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cv-chip {
      animation-timeline: --cv;
      animation-range: entry calc(5% + var(--i) * 2%) cover calc(38% + var(--i) * 1%);
    }

    .cv-chip .cv-val {
      animation-timeline: --cv;
      animation-range: cover 22% cover 40%;
    }

    .cv-lines path {
      animation-timeline: --cv;
      animation-range: cover calc(30% + var(--i) * 1.2%) cover calc(52% + var(--i) * 1.2%);
    }

    .cv-vault {
      animation-timeline: --cv;
      animation-range: cover 42% cover 62%;
    }
  }
}

/* Espalhamento menor em tela estreita */
@media (max-width: 767px) {
  .cv-chip {
    --k: 0.35;
  }
}

/* --------------------------------------------------------------------------
   27. BLOCOS DA REFERENCIA (ramp.com/accounts-payable)
   Grade 1312 | cartoes 421 (3 col) e 644 (2 col) | raio 12 | gap 24
   -------------------------------------------------------------------------- */

/* 6 cartoes: ilustracao no topo, titulo em dois tons, texto */
.fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 700px) {
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.fcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
  overflow: hidden;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}

@media (hover: hover) {
  .fcard:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
  }
}

.fcard-ill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 32px;
  border-bottom: 1px solid var(--line);
  background-color: #efedea;
}

.fcard h3 {
  padding: 24px 24px 0;
  font-size: 20px;
  line-height: 26px;
}

.fcard h3 span {
  color: var(--ink-60);
}

.fcard p {
  padding: 8px 24px 28px;
  color: var(--ink-60);
}

/* Ilustracoes: elementos brancos minimos sobre o cinza */
.ill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}

.ill-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: 0 8px 20px -14px rgba(12, 10, 8, 0.3);
}

.ill-pill.is-muted {
  color: var(--ink-60);
  box-shadow: none;
}

.ill-pill b {
  margin-left: auto;
  font-weight: 500;
  color: var(--ink);
}

.ill-num {
  justify-content: space-between;
  min-height: 48px;
}

.ill-num b {
  font-size: 18px;
}

.ill-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
  padding: 0 4px;
}

.ill-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px;
  background-color: rgba(12, 10, 8, 0.12);
}

.ill-bars i.is-on {
  background-color: var(--ink);
}

.ill-conv {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.ill-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ill-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--ink-60);
  white-space: nowrap;
}

.ill-chip.is-on {
  border-color: var(--ink);
  background-color: var(--ink);
  color: var(--white);
  font-weight: 500;
}

.ill-arrow {
  display: inline-flex;
  color: var(--ink-60);
}

.ill-arrow svg {
  width: 20px;
  height: 20px;
}

.ill-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
}

.ill-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background-color: var(--tint-3);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
}

.ill-tag {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-60);
  white-space: nowrap;
}

.ill-tag.is-on {
  border-color: var(--ink);
  background-color: var(--ink);
  color: var(--white);
}

.ill-ring {
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 176px;
}

.ill-ringline {
  position: absolute;
  width: 176px;
  height: 176px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-pill);
}

.ill-ring .ill-pill {
  font-size: 12px;
}

/* Origem: faixa de largura total, areia -> limao suave, texto centrado */
.origin-band {
  padding-block: 96px;
  background: linear-gradient(110deg, #ece9e3 0%, #f4f2ee 45%, #eef1d0 100%);
}

@media (min-width: 768px) {
  .origin-band {
    padding-block: 128px;
  }
}

.origin-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.origin-inner .eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.origin-body {
  margin-top: 24px;
  font-size: 20px;
  line-height: 30px;
  color: var(--ink-60);
}

@media (min-width: 768px) {
  .origin-body {
    font-size: 24px;
    line-height: 34px;
  }
}

.origin-inner .origin-sign {
  margin-top: 28px;
  font-size: 16px;
  color: var(--ink-60);
}

.origin-inner .origin-sign b {
  margin-right: 10px;
  font-weight: 500;
  color: var(--ink);
}

.origin-inner .btn {
  margin-top: 32px;
}

/* Faixa escura de numeros */
.dark-band {
  padding-block: 96px;
  background-color: var(--black);
  color: var(--white);
}

@media (min-width: 768px) {
  .dark-band {
    padding-block: 128px;
  }
}

.dark-band .kicker {
  color: var(--on-black-60);
}

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

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

.stat {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
}

.stat-kicker {
  font-size: 14px;
  color: var(--on-black-60);
}

.stat-num {
  margin-top: auto;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat-desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-black-60);
}

.stats-note {
  margin-top: 24px;
  font-size: 12px;
  color: var(--on-black-60);
}

.dark-band :focus-visible {
  outline-color: var(--white);
}

/* Cartao grande: texto a esquerda, ilustracao a direita, 520px */
.bigcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
  overflow: hidden;
}

@media (min-width: 960px) {
  .bigcard {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    min-height: 520px;
    padding: 40px;
  }

  .bigcard.is-flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }
}

.bigcard-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bigcard-text .kicker {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--ink-60);
}

.bigcard-text h3 {
  max-width: 420px;
  font-size: 28px;
  line-height: 32px;
}

@media (min-width: 768px) {
  .bigcard-text h3 {
    font-size: 32px;
    line-height: 36px;
  }
}

.bigcard-text h3 span {
  color: var(--ink-60);
}

.bigcard-text p {
  max-width: 440px;
  margin-top: 16px;
  color: var(--ink-60);
}

.bigcard-text .link {
  margin-top: 8px;
}

/* Fluxo de regras sobre grade pontilhada */
.flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 24px;
  border-radius: var(--radius);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
  font-size: 13px;
  line-height: 18px;
}

.flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.flow-row.is-sub {
  padding-left: 24px;
}

.flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: var(--tint-3);
  color: var(--ink-60);
  font-size: 12px;
  font-weight: 500;
}

.flow-ico svg {
  width: 14px;
  height: 14px;
}

.flow-text {
  color: var(--ink-60);
}

.flow-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: 0 6px 16px -12px rgba(12, 10, 8, 0.3);
  white-space: nowrap;
}

.flow-box.is-input {
  font-family: var(--font-mono);
  font-size: 12px;
}

.flow-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: var(--tint-3);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
}

.flow-plus {
  color: var(--ink-60);
}

/* Meio-cartoes: titulo, texto e painel no rodape */
.halfcard {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
}

.halfcard h3 {
  font-size: 24px;
  line-height: 28px;
}

.halfcard p {
  max-width: 440px;
  margin-top: 12px;
  color: var(--ink-60);
}

.halfcard-media {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.halfcard-media .panel {
  max-width: 400px;
}

.duo {
  margin-top: 24px;
}

.duo-item {
  display: none;
}

/* Migracao: ilustracao planilha -> cofre */
.migrate-ill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 220px;
  padding: 24px;
  border-radius: var(--radius);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
  font-size: 13px;
  line-height: 18px;
}

.migrate-ill .ill-pill {
  min-height: 44px;
}

.ill-file .ill-tag {
  margin-left: 6px;
}

.ill-vault {
  border-color: var(--ink);
}

.ill-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--ink);
  color: var(--white);
}

.ill-mark svg {
  width: 14px;
  height: 14px;
}

.ill-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
  color: var(--white);
}

.ill-ok svg {
  width: 12px;
  height: 12px;
}

/* FAQ: acordeao nativo, sem JS */
.faq-title {
  margin-bottom: 40px;
}

.faq {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 16px 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
}

.faq-item summary::after {
  content: '';
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0a08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item p {
  max-width: 70ch;
  padding: 0 0 24px;
  color: var(--ink-60);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fcard:hover {
    transform: none;
  }
}

/* Migracao: fluxo vertical, planilha -> cofre */
.migrate-ill {
  flex-direction: column;
}

.migrate-ill .ill-arrow svg {
  transform: rotate(90deg);
}

/* Selo ativo dentro de lista: a cor do item nao pode vencer a do selo */
.row-list li .pill-on,
.mini-row .pill-on {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   28. GLIFOS PROPRIOS — traco 1,5px, cantos redondos, um detalhe em preto
   cheio por glifo; um gesto de 400ms no hover, so o detalhe se mexe.
   -------------------------------------------------------------------------- */

.fcard-ill {
  min-height: 220px;
  padding: 24px;
}

.glyph {
  width: 96px;
  height: 96px;
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.glyph .f {
  fill: currentColor;
  stroke: none;
}

.glyph .t {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.glyph .g-needle,
.glyph .g-second,
.glyph .g-ring,
.glyph .g-stamp {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 400ms var(--ease);
}

.glyph .g-needle {
  transform-origin: 50% 100%;
  transform: rotate(38deg);
}

.glyph .g-second {
  transform-origin: 50% 100%;
}

.glyph .g-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 400ms var(--ease);
}

.glyph .g-dash {
  stroke-dasharray: 0.06 0.04;
  transition: stroke-dashoffset 400ms var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fcard:hover .g-needle { transform: rotate(62deg); }
  .fcard:hover .g-second { transform: rotate(90deg); }
  .fcard:hover .g-ring { transform: rotate(30deg); }
  .fcard:hover .g-stamp { transform: scale(0.96); }
  .fcard:hover .g-dash { stroke-dashoffset: -0.1; }
}

/* --------------------------------------------------------------------------
   29. RITMO DO HERO = RAMP (medido em 1440): h1 a 230px do nav, 32 ate o
   subtitulo, 32 ate o formulario, 156 ate o botao, 24 ate o fim; hero 725;
   faixa de logos com 40 em cima; proxima secao 128 depois.
   -------------------------------------------------------------------------- */
.hero {
  min-height: 725px;
  padding: 0;
}

.hero-center .hero-copy {
  gap: 0;
  padding: 230px 0 24px;
  animation: none;
}

.hero-center .hero-main {
  gap: 0;
}

.hero-center .sub {
  margin-top: 32px;
}

.hero-center .access-form {
  margin-top: 32px;
}

.hero-center .hero-explore {
  margin-top: 156px;
}

.logos {
  margin-top: 0;
  padding-top: 40px;
}

.logos-caption {
  margin-bottom: 24px;
}

@media (min-width: 1280px) {
  :root {
    --section-gap: 128px;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 0;
  }

  .hero-center .hero-copy {
    padding-top: 96px;
  }

  .hero-center .hero-explore {
    margin-top: 64px;
  }
}

/* 156px liquidos entre o formulario e o botao (o feedback ocupa 28px) */
.hero-center .hero-explore {
  margin-top: 128px;
}

/* Marca branca dentro do botao preto */
.btn-mark {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Componente real no resultado: sem borda escura, raio 12 */
.hero-result .app-frame {
  max-width: 560px;
  border-color: var(--line);
  background-color: var(--white);
}

/* Header estreito: botao com marca cabe em 375px */
@media (max-width: 419px) {
  .header-actions {
    gap: 6px;
  }

  .header-actions .btn-sm {
    padding-inline: 12px;
  }
}

/* --------------------------------------------------------------------------
   30. SELO — a historia resolve num icone proprietario, sem caixa cinza
   -------------------------------------------------------------------------- */
.hero-card.is-story {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
}

.hero-card.is-story .hero-stage {
  min-height: 460px;
}

.hero-card.is-story .hero-feed {
  padding: 24px;
}

.seal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 40px;
}

.seal-ring {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-pill);
}

.seal-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background-color: var(--ink);
  color: var(--white);
  box-shadow: 0 32px 64px -32px rgba(12, 10, 8, 0.5);
}

.seal-mark svg {
  width: 56px;
  height: 56px;
}

.seal-num {
  margin-top: 64px;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .seal-num {
    font-size: 72px;
    line-height: 76px;
  }
}

.seal-meta {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   31. FOUNDERS — quatro retratos 3:4, cantos 12, etiqueta de segmento
   -------------------------------------------------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 900px) {
  .people {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

.person {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--card);
}

.person img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform 600ms var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .person:hover img {
    transform: scale(1.03);
  }
}

.person-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 12px;
  line-height: 16px;
}

.people-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   32. TRILHO DE MODULOS — rolagem lateral com snap, setas opcionais
   -------------------------------------------------------------------------- */
.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.rail-head h2 {
  max-width: 640px;
}

.rail-head .kicker {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--ink-60);
}

.rail-head .sub {
  margin-top: 12px;
}

.rail-nav {
  display: none;
  gap: 8px;
}

@media (min-width: 768px) {
  .rail-nav {
    display: flex;
  }
}

.rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background-color: var(--white);
  color: var(--ink);
  transition: background-color var(--transition), border-color var(--transition);
}

.rail-btn:hover {
  background-color: var(--tint-2);
  border-color: var(--line-2);
}

.rail-btn svg {
  width: 16px;
  height: 16px;
}

.rail {
  position: relative;
}

.rail-track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.rail-track::-webkit-scrollbar {
  display: none;
}

.rail-list {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
}

.mod {
  display: flex;
  flex-direction: column;
  width: 336px;
  min-height: 440px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--card);
  scroll-snap-align: start;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}

@media (min-width: 768px) {
  .mod {
    width: 421px;
  }
}

@media (hover: hover) {
  .mod:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
  }
}

.mod:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.mod-idx {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-60);
}

.mod h3 {
  margin-top: 40px;
  font-size: 24px;
  line-height: 28px;
}

.mod h3 span {
  display: block;
  color: var(--ink-60);
}

.mod-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.mod-feats li {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--white);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .mod:hover,
  .person:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   33. ORDEM FINAL — hero em duas colunas com dispersao; modulos em grade
   -------------------------------------------------------------------------- */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 24px;
  align-items: stretch;
}

@media (min-width: 1100px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) 612px;
  }
}

.hero-split .hero-copy {
  align-items: flex-start;
  text-align: left;
  padding: 40px 0 24px;
}

@media (min-width: 1100px) {
  .hero-split .hero-copy {
    justify-content: center;
  }
}

.hero-split .hero-main {
  align-items: flex-start;
}

.hero-split .hero-main h1 {
  max-width: 12ch;
}

.hero-split .sub {
  margin-inline: 0;
  max-width: 460px;
}

.hero-split .hero-explore {
  margin-top: 48px;
}

.who-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.who-chips li {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--white);
  font-size: 13px;
  color: var(--ink);
}

/* Diagrama de dispersao: as quinze fontes soltas, cada uma com o seu numero */
.disperse {
  position: relative;
  min-height: 420px;
  border-radius: var(--radius);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
  overflow: hidden;
}

@media (min-width: 1100px) {
  .disperse {
    min-height: 612px;
  }
}

.dp {
  position: absolute;
  inset: 0;
}

.dp-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--white);
  box-shadow: 0 8px 24px -16px rgba(12, 10, 8, 0.25);
  color: var(--ink-60);
  transform: rotate(var(--r));
}

.dp-chip .cv-logo svg {
  height: 16px;
  max-width: 96px;
}

.dp-chip .cv-logo {
  font-size: 12px;
}

@media (max-width: 1099px) {
  .disperse {
    display: none;
  }
}

/* Card Fonte unica: numeros fundidos */
.fcard-stats {
  padding: 0 24px 24px;
  margin-top: -12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-60);
}

.fcard-stats b {
  font-weight: 500;
  color: var(--ink);
}

/* Modulos em grade de tres colunas, seis linhas */
.mods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 700px) {
  .mods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.mods .mod {
  width: auto;
  min-height: 0;
  scroll-snap-align: none;
}

.mods .mod h3 {
  margin-top: 24px;
}

.mod.is-dark {
  justify-content: space-between;
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.mod.is-dark .mod-idx,
.mod.is-dark h3 span {
  color: var(--on-black-60);
}

.mod.is-dark .btn {
  align-self: flex-start;
  margin-top: 32px;
}

.rail-head {
  margin-bottom: 40px;
}

/* Headline do hero em tres linhas; chips da dispersao dentro da caixa */
.hero-split .hero-main h1 {
  max-width: 15ch;
}

.dp-chip {
  max-width: 150px;
}

/* --------------------------------------------------------------------------
   34. MODULOS EM LINHAS — nome + argumento, duas colunas, sem inventario
   -------------------------------------------------------------------------- */
.modlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 48px;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .modlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.modlist li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 60px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.modlist .mod-idx {
  flex: none;
  width: 28px;
}

.modlist h3 {
  font-size: 18px;
  line-height: 24px;
}

.modlist h3 span {
  color: var(--ink-60);
}

.modcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 24px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background-color: var(--black);
  color: var(--white);
}

.modcta h3 {
  font-size: 22px;
  line-height: 28px;
}

.modcta h3 span {
  color: var(--on-black-60);
}

.modcta .btn-white {
  border-color: var(--white);
}

.modcta :focus-visible {
  outline-color: var(--white);
}

/* Perimetro mais apertado */
@media (min-width: 960px) {
  .bigcard {
    min-height: 400px;
    padding: 32px 40px;
  }
}

.flow {
  padding: 24px;
}

.halfcard {
  padding: 28px;
}

.halfcard-media {
  margin-top: 24px;
}

.halfcard-media .panel {
  padding: 16px;
  gap: 8px;
}

.halfcard-media .panel .value {
  font-size: 28px;
  line-height: 32px;
}

/* Meio-cartoes do perimetro: glifos proprios no lugar dos paineis */
.halfcard-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin-top: 28px;
  border-radius: var(--radius-sm);
  background-color: #efedea;
}

.glyph-lg {
  width: 128px;
  height: 128px;
}

.glyph .t {
  font-size: 7px;
}

.is-ticket .t {
  font-size: 11px;
  letter-spacing: 0.1em;
}

.glyph .g-perf {
  stroke-dasharray: 0.08 0.06;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .halfcard:hover .g-dash { stroke-dashoffset: -0.1; }
  .halfcard:hover .g-stamp { transform: scale(0.96); }
}

.hglyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hglyph-cap {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-60);
}

.is-ticket .t {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.glyph-lg {
  width: 144px;
  height: 144px;
}

.is-ticket .t {
  font-size: 12px;
}

.origin-body + .origin-body {
  margin-top: 16px;
}

.origin-body.is-key {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   35. PASSADA MOBILE — ajustes medidos em 390px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Barra de aviso em uma linha: sem o link, que ja existe no botao do header */
  .announce {
    min-height: 32px;
    font-size: 12px;
    line-height: 16px;
    padding-block: 6px;
  }

  .announce a {
    display: none;
  }

  /* Hero: menos ar entre formulario, botao e faixa de logos */
  .hero-split .hero-copy {
    padding: 40px 0 8px;
  }

  .hero-split .hero-main h1 {
    max-width: none;
  }

  .hero-split .hero-explore {
    margin-top: 28px;
  }

  .logos {
    padding-top: 32px;
  }

  /* Cena de convergencia: menos altura morta */
  .cv {
    margin-top: 40px;
  }

  .cv-lines {
    height: 56px;
  }

  /* Cartoes: ilustracao mais baixa */
  .fcard-ill {
    min-height: 180px;
  }

  /* Fluxo de regras: linhas ocupam a largura toda */
  .flow {
    padding: 20px 16px;
    font-size: 12px;
  }

  .flow-row.is-sub {
    padding-left: 0;
  }

  .flow-box {
    min-height: 34px;
    padding: 0 10px;
  }

  /* Migracao: pilula do arquivo nao estoura */
  .migrate-ill {
    padding: 20px 16px;
    min-height: 0;
  }

  .migrate-ill .ill-pill {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    text-align: center;
  }

  .ill-file .mono {
    font-size: 11px;
  }

  /* Cartao grande e meio-cartoes mais compactos */
  .bigcard {
    padding: 24px 20px;
    gap: 24px;
  }

  .halfcard {
    padding: 24px 20px;
  }

  .halfcard-media {
    min-height: 180px;
  }

  .glyph-lg {
    width: 112px;
    height: 112px;
  }

  /* Origem: leitura mais confortavel */
  .origin-band {
    padding-block: 72px;
  }

  .origin-body {
    font-size: 18px;
    line-height: 27px;
  }

  /* Lista de modulos */
  .modlist li {
    min-height: 52px;
    padding: 12px 0;
  }

  .modlist h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .modcta {
    padding: 24px 20px;
  }

  /* FAQ: pergunta e seta */
  .faq-item summary {
    font-size: 15px;
    line-height: 22px;
    min-height: 64px;
  }

  /* Faixa de acesso: nota e link em bloco */
  .access-band {
    padding-block: 56px;
  }

  .access-note {
    flex-direction: column;
    gap: 4px;
  }

  /* Rodape */
  .site-footer {
    padding-block: 64px 32px;
  }

  .footer-grid {
    gap: 32px 20px;
  }

  .footer-bottom {
    margin-top: 40px;
  }
}

@media (max-width: 419px) {
  .hero-split .hero-main h1 {
    font-size: 40px;
    line-height: 42px;
  }

  .t-48 {
    font-size: 32px;
    line-height: 36px;
  }
}

/* Header em telas de 360px: marca e botao menores para caber com o menu */
@media (max-width: 399px) {
  .brand {
    font-size: 15px;
  }

  .brand-mark {
    width: 20px;
    height: 20px;
  }

  .header-inner {
    gap: 8px;
  }

  .header-actions .btn-sm {
    font-size: 13px;
    padding-inline: 10px;
  }

  .header-actions .btn-mark {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   36. MOBILE FIRST — correcoes da auditoria em 390x844
   -------------------------------------------------------------------------- */
/* Area segura dos iPhones com notch */
:root {
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
}

@media (min-width: 768px) {
  :root {
    --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

/* Aviso: uma frase curta no celular, a longa no desktop */
.announce-short {
  display: none;
}

@media (max-width: 767px) {
  .announce-long {
    display: none;
  }

  .announce-short {
    display: inline;
  }

  .announce {
    min-height: 28px;
    padding-block: 4px;
  }
}

/* Hero: o grid nao soma folga com a margem do botao */
.hero-split .hero-copy {
  gap: 0;
}

@media (max-width: 767px) {
  .hero-split .hero-copy {
    padding: 32px 0 0;
  }

  .hero-split .hero-explore {
    margin-top: 20px;
  }

  .hero .feedback:empty {
    display: none;
  }

  .hero .access-form {
    margin-top: 24px;
  }

  /* Cartoes: ilustracao menor, secao mais curta */
  .fcard-ill {
    min-height: 140px;
    padding: 16px;
  }

  .glyph {
    width: 80px;
    height: 80px;
  }

  .fcard h3 {
    padding: 20px 20px 0;
  }

  .fcard p {
    padding: 8px 20px 22px;
  }

  /* Um formulario so no fim: o do rodape sai no celular */
  .footer-cta {
    display: none;
  }

  /* Fluxo de regras: caixas menores, linhas cabem */
  .flow-box {
    font-size: 12px;
    padding: 0 8px;
    gap: 6px;
  }

  .flow-ico {
    width: 24px;
    height: 24px;
  }

  .flow-row {
    gap: 6px;
  }
}

/* ==========================================================================
   37. SISTEMA — uma regua para a pagina inteira (auditoria de 04/09)
   Escala tipografica: 12 · 14 · 16 · 18 · 24 · 32 · 48 · 64 (40 so no
   h1 mobile). Tracking preso ao tamanho. Duas superficies off-white,
   um preto, dois raios, uma regra de alinhamento, uma escala de padding.
   ========================================================================== */

/* ---- Tokens fechados ----------------------------------------------------- */
:root {
  --black: #0c0a08;          /* um preto so: superficie escura = tinta */
  --card: #f4f2f0;           /* off-white 1: cartoes e faixas */
  --sand: #ece9e3;           /* off-white 2: fundo das faixas e areas de glifo */
  --radius: 12px;            /* cartoes, faixas, paineis */
  --radius-sm: 6px;          /* controles, chips, caixas pequenas */
  --radius-xs: 6px;
  --space-section: 64px;     /* metade do vao de 128 entre secoes */
  --ls-64: -0.02em;
  --ls-48: -0.02em;
  --ls-32: -0.015em;
  --ls-24: -0.01em;
  --ls-body: 0;
  --ls-mono: 0.02em;
  --ls-caps: 0.04em;
}

@media (max-width: 767px) {
  :root {
    --space-section: 48px;
  }
}

/* ---- Tipografia: tamanho -> tracking, sem excecao ------------------------ */
h1 {
  font-size: 64px;
  line-height: 64px;
  letter-spacing: var(--ls-64);
}

.t-48,
.t-40 {
  font-size: 48px;
  line-height: 50px;
  letter-spacing: var(--ls-48);
}

.t-28,
.bigcard-text h3 {
  font-size: 32px;
  line-height: 36px;
  letter-spacing: var(--ls-32);
}

.fcard h3,
.halfcard h3,
.modcta h3,
.origin-body,
.page h2,
.rail-head .sub {
  letter-spacing: var(--ls-24);
}

.fcard h3,
.halfcard h3,
.modcta h3,
.page h2 {
  font-size: 24px;
  line-height: 28px;
}

.origin-body {
  font-size: 24px;
  line-height: 34px;
}

.sub,
.rail-head .sub,
.modlist h3,
.origin-inner .origin-sign {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: var(--ls-body);
}

body,
.btn,
.link,
.fcard p,
.halfcard p,
.bigcard-text p,
.faq-item summary,
.faq-item p,
.brand,
.cv-logo,
.dp-chip .cv-logo,
.flow-box,
.flow-text,
.ill-pill,
.page p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--ls-body);
}

.btn-sm,
.nav-links a,
.menu-panel a,
.announce,
.kicker,
.rail-head .kicker,
.bigcard-text .kicker,
.footer-head,
.site-footer nav a,
.footer-brand p,
.footer-cta p,
.feedback,
.access-note,
.who span,
.who b,
.flow-ico,
.pill,
.ill-tag,
.cv-val,
.stat-kicker,
.stat-desc,
.people-note,
.mod-feats li,
.dp-chip .cv-logo {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: var(--ls-body);
}

.mono,
.mod-idx,
.hero-eyebrow .chip,
.footer-bottom,
.footer-note,
.stats-note,
.page-meta,
.hglyph-cap,
.seal-meta,
.eyebrow,
.origin-inner .eyebrow,
.page .eyebrow,
.hero-card-domain,
.app-crumb,
.chip {
  font-size: 12px;
  line-height: 16px;
}

.mono,
.mod-idx,
.cv-val,
.footer-bottom,
.footer-note,
.stats-note,
.page-meta,
.flow-box.is-input {
  letter-spacing: var(--ls-mono);
}

.eyebrow,
.origin-inner .eyebrow,
.page .eyebrow,
.seal-meta,
.hero-eyebrow {
  letter-spacing: var(--ls-caps);
}

.cv-val {
  font-size: 12px;
  line-height: 16px;
}

.flow-ico {
  font-size: 12px;
}

@media (max-width: 767px) {
  h1 {
    font-size: 40px;
    line-height: 42px;
  }

  .t-48,
  .t-40 {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: var(--ls-32);
  }

  .bigcard-text h3,
  .t-28 {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: var(--ls-24);
  }

  .origin-body {
    font-size: 18px;
    line-height: 27px;
    letter-spacing: var(--ls-body);
  }
}

/* ---- Superficies: duas off-whites, um preto ------------------------------ */
.field,
.access-form-lg .field {
  background-color: var(--white);
}

.fcard-ill,
.halfcard-media {
  background-color: var(--white);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

.origin-band {
  background: linear-gradient(110deg, var(--sand) 0%, var(--card) 55%, var(--white) 100%);
}

.access-band {
  background: linear-gradient(112deg, var(--sand) 0%, var(--card) 45%, var(--sand) 100%);
}

.announce,
.site-footer,
.modcta,
.seal-mark,
.btn-dark,
.cv-mark,
.ill-mark,
.ill-ok,
.mod.is-dark {
  background-color: var(--black);
}

body {
  background-color: var(--black);
}

/* ---- Raios: 12 para cartao, 6 para controle ------------------------------ */
.flow-box,
.ill-pill,
.faq-item summary::after,
.flow-av,
.flow-ico,
.ill-chip,
.ill-tag,
.pill,
.app-pill,
.person-tag,
.who .avatar,
.hero-eyebrow .chip,
.dp-chip,
.cv-chip,
.mod-feats li,
.who-chips li {
  border-radius: var(--radius-sm);
}

.seal-mark,
.hglyph,
.rail-btn {
  border-radius: var(--radius);
}

/* ---- Alinhamento: cabecalho de secao centrado; dentro de cartao, a esquerda */
.rail-head {
  justify-content: center;
  text-align: center;
}

.rail-head > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rail-head h2 {
  max-width: 22ch;
}

.faq-title {
  text-align: center;
}

.faq {
  max-width: 900px;
  margin-inline: auto;
}

/* ---- Espacamento: toda secao com o mesmo padding, sem margem solta ------ */
.section {
  margin-top: 0;
  padding-block: var(--space-section);
}

.hero {
  padding-bottom: var(--space-section);
}

.logos {
  padding-top: 0;
  padding-bottom: var(--space-section);
}

.origin-band,
.access-band {
  padding-block: calc(var(--space-section) * 2);
}

.section-head,
.rail-head {
  margin-bottom: 48px;
}

.section-head .kicker,
.rail-head .kicker {
  margin-bottom: 12px;
}

.rail-head .sub,
.section-head .sub {
  margin-top: 12px;
}

/* ---- Mesmo componente, mesma ordem: glifo em cima, titulo, texto -------- */
.halfcard-media {
  order: -1;
  margin: 0 0 24px;
  min-height: 200px;
  border-radius: var(--radius-sm);
}

.halfcard p {
  margin-top: 8px;
}

/* ---- Marca: hero e faixa de logos com o mesmo ritmo ---------------------- */
.hero-split .hero-copy {
  padding-top: 0;
}

@media (min-width: 1100px) {
  .hero {
    min-height: 0;
  }

  .hero-split .hero-copy {
    padding-block: 40px 24px;
  }
}

/* Ultimos orfaos da escala */
.marquee-track .logo,
.marquee-track .logo-name {
  font-size: 18px;
  letter-spacing: var(--ls-body);
}

.cv-num {
  font-size: 48px;
  line-height: 50px;
  letter-spacing: var(--ls-48);
}

.flow-av {
  font-size: 12px;
}

.flow-plus {
  font-size: 14px;
}

.glyph .t,
.is-ticket .t {
  letter-spacing: var(--ls-caps);
}

/* --------------------------------------------------------------------------
   38. AUDITORIA 2 — oito itens medidos
   -------------------------------------------------------------------------- */
/* 3. Titulo maior, tracking mais fechado que o menor */
.hero h1,
.hero-split .hero-main h1 {
  letter-spacing: var(--ls-64);
}

/* 2. Tracking de mono nao vaza para sans de 12px */
.footer-bottom,
.footer-note,
.stats-note {
  letter-spacing: var(--ls-body);
}

/* 4. Borda do campo com 3:1 sobre branco (WCAG 1.4.11): rgba .28 = #B0B0B0, 3.1:1 */
.field,
.access-form-lg .field {
  border-color: rgba(33, 33, 33, 0.28);
}

/* 5. Faixas chapadas, sem gradiente nem diagonal decorativa */
.origin-band,
.access-band {
  background: var(--card);
}

.access-band::before {
  display: none;
}

/* 6. Vao entre secao e faixa igual ao vao padrao: 64 + 64 = 128 */
.origin-band,
.access-band {
  padding-block: var(--space-section);
}

/* 7. Ancora para no topo visual da secao, logo abaixo do header fixo */
html {
  scroll-padding-top: 8px;
}

/* Mobile: chips da cena em 14px, quatro por linha; o "+" do fluxo some quando quebra */
@media (max-width: 767px) {
  .cv-logo,
  .cv-chip .cv-logo {
    font-size: 14px;
    line-height: 20px;
  }

  .cv-chip {
    padding: 8px 10px 6px;
  }

  .cv-logo svg {
    height: 14px;
    max-width: 84px;
  }

  .flow-plus {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   39. FALLBACK DA CENA — sem animation-timeline, o JS escreve --cvp (0 a 1)
   e estas regras desenham o mesmo caos -> ordem. So transform e opacity.
   -------------------------------------------------------------------------- */
.cv-js {
  --cvp: 0;
}

.cv-js .cv-chip {
  animation: none;
  opacity: calc(0.55 + 0.45 * var(--cvp));
  transform:
    translate(
      calc(var(--dx) * var(--k, 1) * (1 - var(--cvp))),
      calc(var(--dy) * var(--k, 1) * (1 - var(--cvp)))
    )
    rotate(calc(var(--r) * (1 - var(--cvp))));
  color: var(--ink);
  transition: none;
}

.cv-js .cv-chip .cv-val {
  animation: none;
  opacity: calc(1 - var(--cvp) * 1.6);
}

.cv-js .cv-lines path {
  animation: none;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--cvp) - 0.45) * 2.2, 1));
}

.cv-js .cv-vault {
  animation: none;
  opacity: clamp(0, (var(--cvp) - 0.55) * 3, 1);
  transform: translateY(calc(12px * (1 - clamp(0, (var(--cvp) - 0.55) * 3, 1))));
}

/* Hero no celular: 48px entre o header e a headline (o sistema tinha zerado) */
@media (max-width: 1099px) {
  .hero-split .hero-copy {
    padding-top: 48px;
  }
}

/* --------------------------------------------------------------------------
   40. FORMULARIO DE ACESSO ANTECIPADO — qualificacao da marca
   -------------------------------------------------------------------------- */
.page-form {
  max-width: 760px;
}

.lead-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 40px;
}

.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
}

@media (min-width: 640px) {
  .lead-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-field.is-full {
    grid-column: 1 / -1;
  }
}

.lead-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lead-field label {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.lead-input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(33, 33, 33, 0.28);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ink);
}

.lead-input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(12, 10, 8, 0.12);
}

select.lead-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0a08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.lead-form.is-error .lead-input:invalid {
  border-color: #b3261e;
}

.lead-form.is-error .feedback {
  color: #b3261e;
}

.lead-form .feedback:empty {
  display: none;
}

.lead-note {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.lead-form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}