/* ============================================================================
   SITE 02 · «ORBIT» — PÁGINA CONTAS  ·  accounts.html
   Autor: Agente da página CONTAS · segunda rodada (reescrito do zero)
   ----------------------------------------------------------------------------
   ESCOPO: exclusivamente `.page-accounts`. Prefixo `.ac-`.
   Sem hex literal · sem !important · sem classe de outra página.
   Mobile-first; breakpoints 640 / 900 / 1200.

   O QUE É PRÓPRIO DESTA PÁGINA
     1. `.ac-scale`   escala curva de depósito mínimo — os cinco tiers em ordem,
                      subindo por um arco. É a quebra de grade da página
                      (vive num `.container--wide` enquanto o resto usa 1280).
     2. `.ac-tier`    progressão de cartões: par de entrada → destaque com a
                      órbita → bloco largo → seção azul-profunda (Institutional).
     3. `.ac-compare` tabela cruzada larga com a primeira coluna fixa.
     4. `.ac-fund`    quatro métodos genéricos, ícones em traço curvo desenhados
                      à mão (nenhuma marca de meio de pagamento).
     5. `.ac-path`    os três passos num trilho em arco pontilhado — tratamento
                      diferente do `.step-card` usado na home.

   CONTRASTE — pares novos, medidos (WCAG 2.1), não estimados:
     `--fg` sobre `--surface`            17.25  (claro)  ·  12.91 (tone-deep)
     `--fg-muted` sobre `--surface`       6.15            ·   7.78
     `--accent` sobre `--surface`         6.50            ·  10.47
     `--accent` sobre `--surface-tint`    5.27  (blue/sky)
     `--fg-muted` sobre `--surface-tint`  4.99
   Dentro de `.tone-deep` NADA aqui usa a paleta crua em texto: só tokens
   semânticos, que já viram `--tint` / `--paper` sozinhos.
   ========================================================================== */


/* ==========================================================================
   §01 · HERO
   ========================================================================== */

.page-accounts .ac-hero .split { gap: var(--gap-lg); }

.page-accounts .ac-hero__device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.page-accounts .ac-hero__device .device--phone {
  width: min(280px, 78vw);
  margin-inline: auto;
}

.page-accounts .ac-hero__device .ticker__note {
  max-width: 100%;
  margin: 0;
  text-align: center;
}


/* ==========================================================================
   §02 · ESCALA CURVA DOS CINCO TIERS
   ----------------------------------------------------------------------------
   Grade de duas linhas. A linha 2 empilha, na MESMA célula, a lista de nós e a
   curva — assim o arco nunca sai do lugar quando o rótulo muda de idioma.
   Cada nó levanta a órbita com `--lift`, que corresponde exatamente à altura
   do ponto no `viewBox` da curva (1 unidade = 1 px, `preserveAspectRatio=none`).
   O texto vem SEMPRE abaixo do arco — nenhum grafismo cruza uma linha de texto.
   ========================================================================== */

.page-accounts .ac-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-8) var(--s-6);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
}

.page-accounts .ac-scale__label {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
}

.page-accounts .ac-scale__grid,
.page-accounts .ac-scale__curve {
  grid-row: 2;
  grid-column: 1;
}

.page-accounts .ac-scale__grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-accounts .ac-scale__node {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}

.page-accounts .ac-scale__lift { display: none; }

.page-accounts .ac-scale__mark {
  flex: 0 0 auto;
  color: var(--accent);
}

.page-accounts .ac-scale__mark--pro { color: var(--accent-strong); }

.page-accounts .ac-scale__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
  color: var(--fg);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease-soft),
    color var(--dur) var(--ease-soft);
}

.page-accounts .ac-scale__link:hover {
  background-color: var(--surface-tint);
  color: var(--accent-strong);
}

.page-accounts .ac-scale__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-tight);
}

.page-accounts .ac-scale__amt {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.page-accounts .ac-scale__curve {
  display: none;
  align-self: start;
  width: 100%;
  height: 104px;
  color: var(--line-2);
  pointer-events: none;
}

@media (min-width: 900px) {
  .page-accounts .ac-scale { padding: var(--s-9) var(--s-8) var(--s-8); }

  .page-accounts .ac-scale__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: var(--s-4);
  }

  .page-accounts .ac-scale__node {
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
  }

  .page-accounts .ac-scale__lift {
    display: block;
    width: 1px;
    height: calc(var(--lift) * 1px);
  }

  .page-accounts .ac-scale__link {
    align-items: center;
    text-align: center;
  }

  .page-accounts .ac-scale__curve { display: block; }

  .page-accounts .ac-scale__node--1 { --lift: 70; }
  .page-accounts .ac-scale__node--2 { --lift: 44; }
  .page-accounts .ac-scale__node--3 { --lift: 26; }
  .page-accounts .ac-scale__node--4 { --lift: 12; }
  .page-accounts .ac-scale__node--5 { --lift: 2;  }
}


/* ==========================================================================
   §03 · TABELA-RESUMO
   ========================================================================== */

.page-accounts .ac-overview-table .data-table thead th:first-child,
.page-accounts .ac-overview-table .data-table tbody th { white-space: nowrap; }

.page-accounts .ac-rowlink {
  color: var(--fg);
  text-decoration: none;
  border-block-end: var(--border) solid var(--line-2);
  padding-block-end: 1px;
}

.page-accounts .ac-rowlink:hover {
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}


/* ==========================================================================
   §04 · OS TIERS — progressão, nunca cinco cartões iguais
   ========================================================================== */

.page-accounts .ac-tier { scroll-margin-block-start: calc(var(--header-h) + var(--s-8)); }

/* Só os blocos de largura inteira recebem respiro no topo — dentro do par de
   entrada quem separa é o `gap` da grade. */
.page-accounts .ac-tier--feature,
.page-accounts .ac-tier--wide { margin-block-start: var(--gap-lg); }

.page-accounts .ac-tier__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.page-accounts .ac-tier__head .eyebrow { margin: 0; }

.page-accounts .ac-tier__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-display-x);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-tight);
}

.page-accounts .ac-tier__name--big { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); }

.page-accounts .ac-price {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-block-start: var(--s-2);
}

.page-accounts .ac-price__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.page-accounts .ac-price__value {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: var(--lh-tight);
  color: var(--fg);
}

.page-accounts .ac-price--big .ac-price__value { font-size: clamp(1.875rem, 3.4vw, 2.75rem); }

.page-accounts .ac-tier__inherit {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--surface-tint);
  color: var(--accent-strong);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}

.page-accounts .tone-deep .ac-tier__inherit {
  background-color: var(--surface);
  color: var(--accent);
}

.page-accounts .ac-tier__list { margin-block-start: var(--s-2); }

.page-accounts .ac-tier__list li { font-size: var(--fs-sm); }

/* Destaque — Professional */
.page-accounts .ac-tier--feature { gap: var(--s-6); }

.page-accounts .ac-tier__ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.page-accounts .ac-tier__ribbon .orbit { color: var(--accent); }

.page-accounts .ac-tier__split { align-items: start; }

/* Elite — bloco largo em tom de realce. O cartão já é `--surface-tint`, então
   a pílula de herança troca para `--surface` para não sumir no próprio fundo.
   `--accent-strong` sobre `--surface` mede 12.91 : 1. */
.page-accounts .ac-tier--wide .ac-tier__inherit {
  margin-block-start: var(--s-2);
  background-color: var(--surface);
}

@media (min-width: 900px) {
  .page-accounts .ac-tier__list--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--s-6);
  }
}

/* Institutional — o topo da linha, dentro do bloco azul-profundo */
.page-accounts .ac-inst { align-items: start; }

.page-accounts .ac-inst .ac-price__value { color: var(--fg); }


/* ==========================================================================
   §05 · COMPARATIVO CRUZADO
   ----------------------------------------------------------------------------
   Primeira coluna fixa ao rolar a tabela de lado. As linhas ímpares recebem o
   fundo da superfície para que o `background-color: inherit` da célula fixa
   nunca deixe o texto passar por baixo. A zebra das linhas pares continua
   vindo do `components.css`.
   ========================================================================== */

.page-accounts .ac-compare tbody tr:nth-child(odd) { background-color: var(--surface); }

.page-accounts .ac-compare thead th:first-child,
.page-accounts .ac-compare tbody th[scope='row'] {
  position: sticky;
  inset-inline-start: 0;
  z-index: var(--z-base);
  background-color: inherit;
  min-width: 15rem;
}

.page-accounts .ac-compare thead th:first-child { background-color: var(--surface-2); }

.page-accounts .ac-compare tbody th[scope='row']::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--border);
  background-color: var(--line);
}

.page-accounts .ac-compare thead th:not(:first-child),
.page-accounts .ac-compare tbody td {
  text-align: center;
}

.page-accounts .ac-compare .tick-yes,
.page-accounts .ac-compare .tick-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  border-radius: var(--radius-pill);
}

.page-accounts .ac-compare .tick-yes { background-color: var(--surface-tint); }

.page-accounts .tone-deep .ac-compare .tick-yes { background-color: var(--surface); }


/* ==========================================================================
   §06 · DEPÓSITOS E SAQUES
   ----------------------------------------------------------------------------
   Ícones desenhados aqui mesmo, em traço curvo de 1.8, com um ponto cheio que
   ecoa a órbita. Nenhuma marca de meio de pagamento — nem no desenho, nem no
   rótulo, nem no `alt`.
   ========================================================================== */

.page-accounts .ac-fund__photo { align-self: start; }

/* Ponto focal — caixa 3/4 sobre foto 3/2: entram só 50% da largura (800 dos
   1600 px) e a altura inteira, então quem manda aqui é o eixo X. A pessoa está
   em x 850–1240: centrado (janela 400–1200) o ombro direito ficava cortado
   rente à borda. 58% abre a janela em 464–1264 e ela entra inteira, com o
   laptop e a janela à esquerda dando o contexto. */
.page-accounts .ac-fund__photo img { object-position: 58% 38%; }

.page-accounts .ac-fund {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .page-accounts .ac-fund { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-accounts .ac-fund__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-soft),
    transform var(--dur) var(--ease-soft);
}

.page-accounts .ac-fund__item:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-3);
}

.page-accounts .ac-fund__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-tint);
  color: var(--accent-strong);
}

/* O `base.css` dá `fill: currentColor` a todo `svg`. Estes ícones são de
   traço: o preenchimento é desligado no contêiner e só o ponto da órbita
   volta a ser cheio, pelo atributo `fill` no próprio `circle`. */
.page-accounts .ac-fund__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
}

.page-accounts .ac-fund__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.page-accounts .ac-fund__name {
  font-weight: var(--fw-bold);
  color: var(--fg);
}

.page-accounts .ac-fund__time {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

.page-accounts .ac-rules { gap: var(--s-4); }

.page-accounts .ac-rules__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tr-h3);
}


/* ==========================================================================
   §07 · OS TRÊS PASSOS — trilho em arco pontilhado
   ----------------------------------------------------------------------------
   Diferente do `.step-card` da home: aqui os passos são nós num arco. A curva
   ocupa somente a faixa das órbitas (44 px) e some abaixo de 900 px, onde o
   trilho vira uma coluna. Em nenhum momento a curva cruza texto.
   ========================================================================== */

.page-accounts .ac-path-wrap { position: relative; }

.page-accounts .ac-path {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-accounts .ac-path__step {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-6);
  background-color: var(--surface-2);
  border-radius: var(--radius-lg);
}

.page-accounts .ac-path__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-block-end: var(--s-2);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
}

.page-accounts .ac-path__n {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.page-accounts .ac-path__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-h3);
}

.page-accounts .ac-path__body { color: var(--fg-muted); }

.page-accounts .ac-path__curve { display: none; }

@media (min-width: 900px) {
  .page-accounts .ac-path {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-lg);
  }

  /* Acima de 900px o passo perde a caixa e vira um nó no arco. */
  .page-accounts .ac-path__step {
    padding: 0;
    background-color: transparent;
  }

  .page-accounts .ac-path__mark { background-color: var(--bg); }

  /* A curva ocupa exatamente a faixa das órbitas (44px a partir do topo do
     trilho). O primeiro texto começa em 52px — o arco nunca alcança linha
     de texto nenhuma. */
  /* O arco começa no centro da primeira órbita (≈2% da largura) e termina no
     centro da terceira (≈72%): com três colunas iguais e o `gap` da grade,
     essa proporção se mantém em qualquer largura acima de 900px. */
  .page-accounts .ac-path__curve {
    display: block;
    position: absolute;
    inset-inline-start: 2%;
    inset-block-start: 0;
    width: 70%;
    height: 44px;
    color: var(--line-2);
    pointer-events: none;
  }
}


/* ==========================================================================
   §08 · O QUE LEVAR PARA O KYC + FOTO EM ARCO
   ========================================================================== */

.page-accounts .ac-step__foot { align-items: start; }

.page-accounts .ac-step__need { gap: var(--s-4); }

.page-accounts .ac-step__photo { align-self: start; }

/* Ponto focal — foto vertical (2/3) numa caixa quadrada: corta na altura.
   45% deixa a pessoa e o laptop no centro do quadro, sem cortar a cabeça. */
.page-accounts .ac-step__photo img { object-position: 50% 45%; }


/* ==========================================================================
   §09 · PERGUNTAS
   ========================================================================== */

.page-accounts .ac-faq { align-items: start; }

@media (min-width: 900px) {
  .page-accounts .ac-faq > :first-child {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-8));
  }
}


/* ==========================================================================
   §10 · FECHO
   ========================================================================== */

.page-accounts .ac-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 46rem;
}

.page-accounts .ac-cta__inner .cluster { margin-block-start: var(--s-2); }


/* ==========================================================================
   §11 · MOVIMENTO REDUZIDO
   ----------------------------------------------------------------------------
   O `base.css` já desliga reveal, parallax, contador e giro da órbita. Aqui só
   garantimos que nada desta página dependa de transform para ser legível.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .page-accounts .ac-fund__item:hover { transform: none; }
}