/* Homepage decision blocks only. Preserve the approved legacy pricing cards. */
.ord-home #plans .ord-plan-numbers { margin: 0 0 1rem; }
.ord-home #plans .ord-plan-numbers > div { padding-block: .7rem; border-top: 1px solid rgba(21,34,53,.14); }
.ord-home #plans .ord-plan-numbers dt { color: #475667; font-size: var(--fs-12); line-height: 1.45; }
.ord-home #plans .ord-plan-numbers dd { margin: .2rem 0 0; color: #152235; font-size: var(--fs-16); font-weight: var(--fw-600); font-variant-numeric: tabular-nums; }
.ord-home #plans .ord-plan-eligibility { margin: 0 0 1.2rem; color: #475667; font-size: var(--fs-14); line-height: 1.55; }
.ord-home #plans .ord-plan-conditions { margin-top: 1.5rem; padding: clamp(1rem,2vw,1.5rem); border: 1px solid rgba(21,34,53,.14); border-radius: var(--r-md); background: rgba(255,255,255,.5); }
.ord-home #plans .ord-plan-conditions h3 { margin: 0 0 .65rem; color: #152235; font-size: var(--fs-20); }
.ord-home #plans .ord-plan-conditions p { margin: .65rem 0; max-width: 85ch; color: #475667; font-size: var(--fs-16); line-height: 1.65; }
.ord-home #plans .ord-plan-conditions a { display: inline-flex; align-items: center; min-height: 44px; }
.ord-home #plans .ord-plan-conditions { padding: 0; overflow: hidden; }
.ord-home #plans .ord-plan-conditions summary { cursor: pointer; padding: 1.1rem 1.3rem; min-height: 48px; font-weight: var(--fw-600); color: #152235; }
.ord-home #plans .ord-plan-conditions summary:focus-visible,
.ord-home #plans .ord-plan-table-scroll:focus-visible { outline: 2px solid #785b36; outline-offset: -3px; }
.ord-home #plans .ord-plan-conditions-body { padding: 0 1.3rem 1.1rem; }
.ord-home #plans .ord-plan-table-scroll { overflow-x: auto; max-width: 100%; margin-block: 1rem; }
.ord-home #plans .ord-plan-table { border-collapse: collapse; width: 100%; min-width: 850px; font-size: var(--fs-14); }
.ord-home #plans .ord-plan-table caption { text-align: start; padding-block: .65rem; font-weight: var(--fw-600); }
.ord-home #plans .ord-plan-table th, .ord-home #plans .ord-plan-table td { padding: .85rem .8rem; text-align: start; border-bottom: 1px solid rgba(21,34,53,.16); color: #152235; }
.ord-home #plans .ord-plan-table thead th { max-width: 12rem; vertical-align: bottom; background: rgba(21,34,53,.04); font-weight: var(--fw-600); line-height: 1.5; }
.ord-home #plans .ord-plan-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord-home #reserve .ord-treasury-commitment { max-width: 65ch; margin: 1.3rem 0 .7rem; color: var(--ink-inverse); font-size: var(--fs-16); line-height: 1.6; }
.ord-home #reserve .ord-treasury-limit { max-width: 85ch; margin: 0 0 1.8rem; color: #b7c1ce; font-size: var(--fs-14); line-height: 1.6; }
@media (max-width: 1100px) and (min-width: 701px) {
  .ord-home #plans .ord-plan-table { min-width: 850px; }
}
@media (max-width: 700px) {
  .ord-home #plans .ord-plan-conditions-body { padding-inline: 1rem; }
  .ord-home #plans .ord-plan-numbers > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 1rem; }
  .ord-home #plans .ord-plan-numbers dd { margin: 0; }
}

/* Matriz de comparacao do Instant Core (17/09/2026). Substitui cinco cartoes que
   repetiam a mesma lista de regras cinco vezes: o rotulo passa a viver UMA vez, na
   coluna da esquerda, e cada termo explica a si mesmo no hover e no foco. */
/* A TABELA AVISA QUE CONTINUA.
   Medido: 892px de tabela num telefone de 375px, dentro de uma rolagem que
   funciona e que NADA anuncia. Cinco colunas, entre elas o preco, invisiveis
   para quem nao adivinhasse arrastar. Numa firma que vende regra clara, dado
   escondido nao economiza espaco: levanta suspeita.
   A sombra aqui nao e enfeite, e estado: existe quando ha conteudo fora da
   vista e some sozinha na ponta. Sem JavaScript, sem dependencia. */
.ord-home #plans .ord-mx-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 1.1rem;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(244,241,233,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(244,241,233,0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(21,34,53,.22), rgba(21,34,53,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(21,34,53,.22), rgba(21,34,53,0)) right center / 14px 100% no-repeat scroll;
}
.ord-home #plans .ord-mx-scroll:focus-visible { outline: 2px solid #785b36; outline-offset: -3px; }
.ord-home #plans .ord-mx { border-collapse: collapse; width: 100%; min-width: 880px; }
.ord-home #plans .ord-mx caption { text-align: start; padding-block: .2rem .9rem; color: #5d6977; font-size: var(--fs-14); }
.ord-home #plans .ord-mx th, .ord-home #plans .ord-mx td { padding: .8rem .85rem; text-align: start; border-bottom: 1px solid rgba(21,34,53,.12); color: #152235; font-size: var(--fs-14); vertical-align: middle; }
.ord-home #plans .ord-mx tbody td { font-variant-numeric: tabular-nums; font-weight: var(--fw-600); white-space: nowrap; }
.ord-home #plans .ord-mx-corner { border-bottom-color: transparent !important; }
.ord-home #plans .ord-mx-size { border-bottom: 1px solid rgba(21,34,53,.14); }
.ord-home #plans .ord-mx-kicker { display: block; color: #5d6977; font-size: var(--fs-12); font-weight: var(--fw-600); letter-spacing: .12em; text-transform: uppercase; }
.ord-home #plans .ord-mx-size strong { display: block; margin-top: .15rem; font-family: var(--font-serif); font-size: var(--fs-fluid-24-20); font-weight: var(--fw-400); }
.ord-home #plans .ord-mx .is-featured { background: #fffdf8; }
.ord-home #plans .ord-mx thead .is-featured { box-shadow: inset 0 2px 0 var(--gold); }

/* O termo e um botao de verdade: funciona no teclado e no toque, nao so no mouse. */
.ord-home #plans .ord-mx-term { position: sticky; inset-inline-start: 0; z-index: 2; width: 1%; white-space: nowrap; font-weight: var(--fw-600); background: #f4f1e9; }
/* Sem isto, arrastar a tabela no celular deixa "5%", "3%", "95%" soltos na tela:
   o valor fica sem a regra que ele responde. */
.ord-home #plans .ord-mx thead .ord-mx-corner { position: sticky; inset-inline-start: 0; z-index: 2; background: #f4f1e9; }
.ord-home #plans .ord-term { display: inline-flex; align-items: center; gap: .5rem; padding: 0 0 .2rem; border: 0; border-bottom: 1px dashed rgba(21,34,53,.45); background: none; color: inherit; font: inherit; font-weight: var(--fw-600); cursor: help; }
.ord-home #plans .ord-term:hover { opacity: .75; }
.ord-home #plans .ord-term:focus-visible { outline: 2px solid #785b36; outline-offset: 3px; }
.ord-home #plans .ord-term-icon { flex: 0 0 auto; width: 18px; height: 18px; color: #6d7d90; }
.ord-home #plans .ord-term-plain { display: inline-block; font-weight: var(--fw-600); }
.ord-tip { position: absolute; z-index: 30; inset-block-end: calc(100% - .2rem); inset-inline-start: 0; width: max-content; max-width: min(19rem, calc(100vw - 2rem)); padding: .7rem .85rem; border-radius: var(--r-md, 4px); background: #152235; color: #f2ede4; font-size: var(--fs-14); font-weight: var(--fw-400); line-height: 1.5; white-space: normal; box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
/* Fallback para quando o JS nao roda: aqui o balao ainda e irmao do termo.
   O :hover NAO pode valer para o balao ja portado, senao o cursor parado por
   cima dele o mantem pintado depois de o JS ter fechado, e nem Esc nem toque
   fora conseguem apaga-lo. Medido em 17/09/2026. */
.ord-home #plans .ord-term:hover + .ord-tip,
.ord-home #plans .ord-term:focus + .ord-tip,
.ord-tip:not(.is-portaled):hover { opacity: 1; visibility: visible; transform: translateY(0); }
/* O container da tabela rola no eixo X, e o navegador obriga o eixo Y a recortar
   junto: o balao do primeiro termo passava 2px do topo. Com JS ele vira filho do
   body em position:fixed e deixa de depender da caixa que rola. Sem JS, continua
   irmao do termo e o CSS acima ainda o mostra. */
.ord-tip.is-portaled { position: fixed; inset-block-end: auto; inset-inline-start: auto; z-index: 90; max-width: min(19rem, calc(100vw - 2rem)); }
.ord-tip.is-portaled.is-open { opacity: 1; visibility: visible; transform: none; }

.ord-home #plans .ord-mx-fee td { white-space: normal; }
.ord-home #plans .ord-mx .ord-deal-badge { display: inline-block; margin-bottom: .25rem; }
.ord-home #plans .ord-mx-price { display: block; font-size: var(--fs-16); font-weight: var(--fw-700); }
.ord-home #plans .ord-mx-regular { display: block; margin-top: .1rem; color: #5d6977; font-size: var(--fs-12); font-weight: var(--fw-500); }
/* Medido em 17/09/2026 na pagina aberta: o risco do preco cheio saia em
   rgb(21,34,53), a cor do texto, porque a regra de risco vermelho so existia em
   .ord-price-regular s (os cards) e nao acompanhou a tabela nova. Riscado da cor
   da propria letra nao le como desconto, le como erro de tipografia. E o preco
   final saia em 1.1rem, empatado com o cheio: o dono pediu o final EM DESTAQUE,
   entao ele sobe e o cheio desce. */
.ord-home #plans .ord-mx-price { font-size: var(--fs-20); line-height: 1.15; color: #0f1c2e; }
.ord-home #plans .ord-mx-regular s { color: #8b95a3; text-decoration-color: #c0392b; text-decoration-thickness: 2px; }
/* O SELO SUMIA DA TABELA. Medido em 17/09/2026 na pagina aberta: o badge da
   linha de taxa ficava em y = -1476, ou seja, fora da tela, e o cliente via o
   preco final sem nenhuma marca de desconto. Causa: .ord-deal-badge nasceu para
   o CARD, onde ele e position:absolute dentro de um .ord-price-deal que e
   position:relative. Na celula da tabela nao existe ancestral posicionado, entao
   o absolute foi ancorar no viewport. O portao de texto nao pega isto: o
   "&minus;20%" esta no HTML, so nao esta na tela. Aqui ele volta a ser fluxo
   normal. */
.ord-home #plans .ord-mx-fee td .ord-deal-badge { position: static; display: inline-block; margin: 0 0 .28rem; box-shadow: none; }
.ord-home #plans .ord-mx-cta td { border-bottom: 0; }
.ord-home #plans .ord-mx-cta .ord-btn { width: 100%; }
/* Sem escopo de secao: o balao vira filho do body no boot, e um seletor ancorado
   em #plans deixaria de casar exatamente para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .ord-tip { transition: none; transform: none; }
}

/* A SAIDA PARA AS REGRAS INTEIRAS.
   A matriz na frente mostra o que decide a compra: perda maxima, limite
   diario, divisao do lucro, ciclo de pagamento e preco. O resto do
   rulebook vive na propria pagina dele, a um clique. Informacao demais na
   frente nao informa, afasta. */
.ord-home #plans .ord-mx-rules { margin: var(--sec-tight) 0 0; }

/* O BOTAO DE COMPRA NA PROPRIA CELULA DO PRECO.
   Quem decide pelo preco decide olhando para ele; obrigar a pessoa a
   procurar a acao noutro lugar da pagina custa a venda. O link ja leva
   modelo, tamanho e cupom, entao o checkout abre preenchido. */
.ord-home #plans .ord-mx-buy {
  display: inline-flex;
  margin-top: var(--sp-2);
  width: 100%;
  justify-content: center;
  min-height: 44px;
}

/* ==========================================================================
   CADA CONTA VIRA UM CARTAO, E NAO UMA COLUNA DE PLANILHA
   ==========================================================================

   Ordem do proprietario em 18/09/2026, com a FTMO como referencia de ESTRUTURA
   e a identidade da Ordane como referencia de PELE: la sao cinco cartoes
   escuros com selo laranja e botao azul; aqui sao cinco cartoes de papel com
   fio dourado e o preto da marca.

   A tabela CONTINUA sendo tabela. Ela e o que da o alinhamento por linha, a
   leitura de cima para baixo com uma regra so na coluna da esquerda, e a
   semantica que um leitor de tela e um indexador entendem. O que muda e a
   pele: cada coluna ganha fundo, borda e canto, e o vao entre elas passa a
   existir. Trocar a tabela por uma grade de cartoes soltos custaria o
   alinhamento, que e justamente o que faz comparar cinco contas ser possivel.
   ========================================================================== */

.ord-home #plans .ord-mx {
  border-collapse: separate;
  border-spacing: 10px 0;
}

/* A coluna do rotulo nao e cartao: e a legenda que serve os cinco.
   Ela NAO pode ser transparente, e isso custou um defeito no ar em 19/09/2026:
   a coluna e position:sticky, entao no telefone, onde a tabela rola de lado,
   as celulas passavam POR BAIXO dela e apareciam atraves. Medido a 375px com
   scrollLeft 260: "Max trailing loss" e "5%" desenhados um sobre o outro,
   248px de sobreposicao.
   #f4f1e9 e exatamente a cor da secao que fica atras da tabela, medida no
   render, entao no desktop isto e indistinguivel de transparente: nao e um
   cartao novo, e a mesma legenda, agora opaca. O ::after cobre os 6px de
   border-spacing, que ficariam vazando mesmo com a celula pintada. */
.ord-home #plans .ord-mx-term,
.ord-home #plans .ord-mx-corner {
  background: #f4f1e9;
  border: 0;
}

.ord-home #plans .ord-mx-term::after,
.ord-home #plans .ord-mx-corner::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 100%;
  width: 7px;
  background: #f4f1e9;
  pointer-events: none;
}

/* Cada celula de conta ganha as duas laterais; o topo e a base vem das pontas,
   logo abaixo. Assim a coluna inteira lê como um objeto so. */
.ord-home #plans .ord-mx thead th.ord-mx-size,
.ord-home #plans .ord-mx tbody td,
.ord-home #plans .ord-mx tfoot td {
  background: #fffdf8;
  border-inline: 1px solid rgba(21,34,53,.12);
  border-bottom: 1px solid rgba(21,34,53,.07);
}

/* A ponta de cima: canto, borda e o ar que separa do seletor de modelo. */
.ord-home #plans .ord-mx thead th.ord-mx-size {
  border-top: 1px solid rgba(21,34,53,.12);
  border-start-start-radius: var(--ra-10);
  border-start-end-radius: var(--ra-10);
  padding-top: 1.15rem;
}

/* A ponta de baixo e a celula do preco, que e onde a decisao acontece. */
.ord-home #plans .ord-mx-fee td {
  border-bottom: 1px solid rgba(21,34,53,.12);
  border-end-start-radius: var(--ra-10);
  border-end-end-radius: var(--ra-10);
  padding-bottom: 1.15rem;
}

/* A conta em destaque: o dourado da marca no lugar do neon da referencia. */
.ord-home #plans .ord-mx .is-featured {
  background: #fff;
  border-inline-color: var(--gold);
}

.ord-home #plans .ord-mx thead th.ord-mx-size.is-featured {
  border-top: 2px solid var(--gold);
  box-shadow: none;
}

.ord-home #plans .ord-mx-fee td.is-featured {
  border-bottom-color: var(--gold);
}

/* No telefone a tabela ja rola dentro do proprio contêiner; o vao entre
   cartoes encolhe para nao gastar a largura que o conteudo precisa. */
@media (max-width: 47.99rem) {
  .ord-home #plans .ord-mx { border-spacing: 6px 0; }
}

/* O destaque precisava vencer a especificidade da regra da celula: sem isto o
   cartao em evidencia ficava com o mesmo fundo dos outros e so a borda dourada
   o diferenciava, o que e pouco para dizer "e este". */
.ord-home #plans .ord-mx thead th.ord-mx-size.is-featured,
.ord-home #plans .ord-mx tbody td.is-featured,
.ord-home #plans .ord-mx tfoot td.is-featured {
  background: #fff;
  border-inline-color: var(--gold);
}
