/* FURLONG LEDGER — home.
   Editorial financeiro: hierarquia por tamanho e espaco, nao por caixas.
   Poucas superficies, filetes de 1px, numeros tabulares em toda a parte. */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
main section{padding:clamp(52px,7vw,104px) 0;border-top:1px solid var(--hair);
  scroll-margin-top:72px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main section:first-child{border-top:0}
/* o heroi dissolve-se; um filete a seguir leria como a aresta do video */
#proof{border-top:0}

h1{font-size:clamp(27px,8.4vw,68px);letter-spacing:-.045em;line-height:1.03;
  text-wrap:balance;
  margin:16px 0 0;font-weight:600}
h1 .soft{color:var(--ink-3)}
h2{font-size:clamp(21px,2.9vw,32px);letter-spacing:-.032em;margin:8px 0 0;font-weight:600;
  text-wrap:balance}
h3{font-size:15px;font-weight:500;margin:0 0 6px;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:clamp(10px,2.7vw,10px);font-weight:500;
  letter-spacing:clamp(.14em,.9vw,.22em);
  text-transform:uppercase;color:var(--ink-3);margin:0}
.lede{color:var(--ink-2);max-width:52ch;margin:20px 0 0;font-size:16px;line-height:1.6;
  text-wrap:pretty}
.lede.sm{font-size:14px;margin-top:12px}
.note{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin:22px 0 0;max-width:60ch;
  text-wrap:pretty}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- cabecalho ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(10,11,12,.86);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--hair)}
.hbar{display:flex;align-items:center;gap:20px;padding-top:11px;padding-bottom:11px}
.mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--display);font-size:14px;color:var(--ink);margin-right:auto}
.mark .m1{font-weight:600;letter-spacing:.17em}
.mark .m2{font-weight:400;letter-spacing:.17em;color:var(--color-text-secondary)}
.mark .mrule{width:15px;height:1px;background:var(--brass-2);display:inline-block}
.mark.small{font-size:11px}
nav.links{display:flex;gap:2px}
nav.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  text-decoration:none;color:var(--ink-3);font-size:13.5px;
  transition:color .16s var(--ease-io)}
nav.links a:hover{color:var(--ink)}

/* Os botoes vivem em app.css — um sistema, tres niveis, dois tamanhos.
   Aqui ficam apenas ajustes de contexto, nunca um estilo novo. */

/* ---------- heroi ----------
   O VIDEO E O FUNDO DO HEROI, nao um bloco dentro dele.

   Porque se via um rectangulo antes:
     1. .hero-film era width:100vw dentro de um .hero mais estreito com
        overflow:hidden — o corte apanhava a mascara a alpha 0.48, ou seja um
        corte duro a meia opacidade nos dois lados.
     2. o desvanecimento inferior durava 10% da caixa (~31px): curto demais
        para ler como dissolucao, longo o suficiente para ler como linha.
     3. a mediana de luminancia do filme e 110 — imagem cinzenta-media, nao
        escura. Composta sobre #0A0B0C dava uma laje mais clara que a pagina,
        e qualquer fronteira de uma laje mais clara ve-se.

   Como se resolve:
     - a camada de filme e exactamente inset:0 do heroi. O que o overflow corta
       e onde a mascara ja vale zero, portanto nao ha nada para cortar.
     - mascara horizontal na camada EXTERNA (0% e 100% coincidem com as arestas
       do heroi) e vertical na INTERNA. Duas mascaras em dois elementos
       multiplicam-se e sao suportadas em todo o lado — sem mask-composite.
     - a interna tem overscan de 7%: a aresta real do video vive fora do heroi.
     - contrast(1.18) brightness(.5) leva o percentil 5 do filme (38) a 11,
       praticamente o fundo da pagina (10). O preto do video passa a ser o preto
       da pagina, e a laje desaparece mesmo antes da mascara actuar. */
.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;
  align-items:center;min-height:clamp(520px,72vh,720px);
  min-height:clamp(520px,72svh,720px);
  padding:clamp(56px,7vw,96px) 0 clamp(76px,10vw,132px)}
.hero .wrap{position:relative;z-index:2;width:100%}

.hero-film{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 11%,
    #000 26%,#000 78%,rgba(0,0,0,.45) 91%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 11%,
    #000 26%,#000 78%,rgba(0,0,0,.45) 91%,transparent 100%)}
.hero-film-in{position:absolute;inset:-7%;
  background:url(/assets/hero-race-poster.jpg) 55% 60%/cover no-repeat;
  opacity:.68;filter:saturate(.35) contrast(1.18) brightness(.5);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,
    rgba(0,0,0,.22) 26%,rgba(0,0,0,.7) 46%,#000 62%,#000 74%,rgba(0,0,0,.55) 84%,transparent 92%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,
    rgba(0,0,0,.22) 26%,rgba(0,0,0,.7) 46%,#000 62%,#000 74%,rgba(0,0,0,.55) 84%,transparent 92%)}
.hero-film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:55% 60%;border:0;outline:0;box-shadow:none;
  opacity:0;transition:opacity 1.6s var(--ease)}
.hero-film-v.on{opacity:1}

/* veu assimetrico, POR CIMA do filme e fora da sua mascara: o texto fica a
   esquerda no escuro, os cavalos respiram a direita. Nao e um rectangulo
   semi-transparente — sao dois gradientes que nunca fecham numa aresta. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(102deg,var(--bg) 0%,rgba(10,11,12,.88) 24%,rgba(10,11,12,.46) 50%,
      rgba(10,11,12,.1) 76%,transparent 100%),
    linear-gradient(to bottom,var(--bg) 0,rgba(10,11,12,.34) 26%,transparent 52%,
      rgba(10,11,12,.5) 88%,var(--bg) 100%)}

.hero .cta{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
/* sobre o filme, ink-2 dava 4.56:1 contra o fotograma mais claro do loop —
   passa, mas sem margem nenhuma. Escurecer o video para o salvar seria trocar
   a atmosfera pelo texto; sobe o texto e o video fica como esta. */

/* ---------- simulador ---------- */
.simgrid{display:grid;gap:clamp(24px,3.4vw,48px);margin-top:34px;
  grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start}
.field{margin-bottom:26px}
.field label,.field .lbl{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.money{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--hair-2);
  padding-bottom:6px;transition:border-color .16s var(--ease-io)}
.money:focus-within{border-color:var(--brass)}
.money span{font-family:var(--mono);font-size:26px;color:var(--ink-3)}
.money input{background:none;border:0;padding:0;color:var(--ink);width:100%;
  font-family:var(--mono);font-size:30px;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;min-height:44px}
.money input:focus{outline:none}
.money input::-webkit-outer-spin-button,.money input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.money input[type=number]{-moz-appearance:textfield}
.presets{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.presets button{flex:1;min-width:62px;min-height:38px;padding:0 8px;border-radius:5px;
  background:none;border:1px solid var(--hair);color:var(--ink-3);
  font-family:var(--mono);font-size:12px;cursor:pointer;
  transition:border-color .16s var(--ease-io),color .16s var(--ease-io)}
.presets button:hover{border-color:var(--hair-2);color:var(--ink)}
/* seleccionado e um estado, nao um hover: sobrevive ao rato */
.presets button[aria-pressed="true"],
.presets button[aria-pressed="true"]:hover{border-color:var(--color-primary);
  color:var(--color-primary);background:rgba(242,201,76,.08)}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--hair-2);border-radius:6px;padding:3px}
.seg button{position:relative;z-index:1;background:none;border:0;min-height:42px;
  color:var(--ink-3);font-family:var(--display);font-size:13.5px;font-weight:500;
  cursor:pointer;border-radius:4px;transition:color .18s var(--ease-io)}
.seg button[aria-checked="true"]{color:var(--ink)}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  background:var(--surface-2);border-radius:4px;
  transition:transform .22s var(--ease)}
.seg[data-mode="level"] .thumb{transform:translateX(100%)}
.cap{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:12px 0 0;
  line-height:1.5}
.cap b{color:var(--ink);font-weight:500}
.cap i{display:block;font-style:normal;font-family:var(--body);color:var(--ink-3);
  font-size:13px;line-height:1.55;margin-top:6px;max-width:46ch;text-wrap:pretty}

.results .headline{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);
  padding-bottom:22px;border-bottom:1px solid var(--hair)}
.results .big{display:flex;flex-direction:column;gap:7px;min-width:0}
.results .big .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.results .big .v{font-size:clamp(28px,4.6vw,44px);letter-spacing:-.035em;line-height:1;
  color:var(--ink)}
/* a cor nao grita nos numeros grandes — o sinal ja diz a direccao.
   verde e vermelho ficam para os valores pequenos, onde ajudam a varrer. */
.results .big .v.pos,.results .big .v.neg{color:var(--ink)}
.results .mini{display:flex;gap:clamp(18px,4vw,44px);padding:18px 0 0;flex-wrap:wrap}
.results .mini div{display:flex;flex-direction:column;gap:5px}
.results .mini .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.results .mini .v{font-size:17px;letter-spacing:-.02em}
#eq{width:100%;height:clamp(200px,30vw,230px);margin-top:22px;display:block;
  touch-action:pan-y;cursor:crosshair}
/* leitura do grafico: painel fixo. Um balao flutuante seria cortado nas duas
   pontas de um grafico de 256px e obrigaria a reposicionamento constante. */
.eq-read{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;
  align-items:baseline;margin:9px 0 0;padding:9px 0 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink-3);min-height:34px;transition:color .14s var(--ease-io)}
.eq-read[data-scrub="on"]{color:var(--ink-2)}
.eq-read .r-onde{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;align-self:center}
.eq-read .r-onde i{font-style:normal;color:var(--ink-4);margin-left:9px}
.eq-read .r-bank{color:var(--ink);font-size:13px;letter-spacing:-.02em}
.eq-read .r-pl{min-width:78px;text-align:right}
/* Numa largura de 314px a corrida, a data, a banca e o P&L nao cabem numa
   linha — a data era truncada. Duas linhas em vez de reticencias. */
@media(max-width:560px){
  .eq-read{grid-template-columns:minmax(0,1fr) auto;gap:5px 14px}
  .eq-read .r-onde{grid-column:1/3;grid-row:1;white-space:normal;font-size:10px}
  .eq-read .r-bank{grid-column:1;grid-row:2}
  .eq-read .r-pl{grid-column:2;grid-row:2}
}
.eq-read .r-pl i{font-style:normal;color:var(--ink-4)}
.eq-read .r-dica{grid-column:1/-1;color:var(--ink-4);letter-spacing:.06em;
  text-transform:uppercase;font-size:10px;align-self:center}
.eq-read .r-pl b{font-weight:400}
@media(prefers-reduced-motion:reduce){.eq-read{transition:none}}
.warn{margin:14px 0 0;padding:11px 13px;border-left:2px solid var(--neg);
  background:rgba(217,115,107,.07);font-size:13px;color:var(--ink-2);line-height:1.5}
.detail{margin-top:18px;border-top:1px solid var(--hair);padding-top:4px}
.detail summary{cursor:pointer;list-style:none;min-height:42px;display:flex;
  align-items:center;font-size:13px;color:var(--ink-3);gap:8px}
.detail summary::-webkit-details-marker{display:none}
.detail summary::after{content:'+';font-family:var(--mono);color:var(--ink);font-size:16px}
.detail[open] summary::after{content:'\2212'}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 24px;
  margin:6px 0 16px}
.dl div{display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;
  border-bottom:1px solid var(--hair);font-size:13px}
.dl dt{color:var(--ink-3)}
.dl dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- tabelas ---------- */
#curve{width:100%;height:clamp(200px,26vw,220px);margin:26px 0 4px;display:block}
.tbl{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px}
/* Toda a tabela e dados: JetBrains Mono, sem excepcao. A coluna da data estava
   em Inter porque nao tinha a classe .n — a origem do "fontes diferentes". */
.tbl td{font-family:var(--data);font-variant-numeric:tabular-nums}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;text-align:right;padding:0 0 10px;
  border-bottom:1px solid var(--hair-2)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:13px 0;border-bottom:1px solid var(--hair);text-align:right;
  font-variant-numeric:tabular-nums}
.tbl td+td{padding-left:14px}
/* O hover levantava TODAS as celulas para --ink, o que apagava o verde e o
   vermelho do resultado. O realce passa a ser o fundo; a cor semantica fica. */
.tbl tbody tr{transition:background-color .14s var(--ease-io)}
.tbl tbody tr:hover{background:rgba(242,242,239,.032)}
.tbl tbody tr:hover td:not(.pos):not(.neg){color:var(--ink)}
.tbl .n{font-family:var(--data)}
.tbl td:first-child{letter-spacing:.05em;color:var(--ink)}
.pos{color:var(--pos)} .neg{color:var(--neg)} .dim{color:var(--ink-3)}

/* ---------- blocos de texto ---------- */
.defs{display:grid;gap:clamp(20px,3vw,40px) clamp(24px,4vw,56px);margin-top:36px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.defs p{color:var(--ink-2);font-size:14px;line-height:1.62;margin:0}
.steps{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{padding:20px 22px 20px 0;border-top:1px solid var(--hair)}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--brass-2);letter-spacing:.16em;
  display:block;margin-bottom:12px}
.steps p{color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0}
#faq details{border-bottom:1px solid var(--hair)}
#faq summary{cursor:pointer;list-style:none;min-height:56px;display:flex;align-items:center;
  transition:color .16s var(--ease-io);
  justify-content:space-between;gap:20px;font-size:16px;font-family:var(--display);
  font-weight:500}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:'+';font-family:var(--mono);color:var(--ink);font-size:18px}
#faq details[open] summary::after{content:'\2212';color:var(--ink)}
#faq summary:hover{color:var(--ink)}
#faq p{color:var(--ink-2);margin:0 0 20px;font-size:14.5px;line-height:1.65;max-width:60ch}
#faq .eyebrow{margin-bottom:26px}
/* ═══════════════ ACESSO: UM PRODUTO ═══════════════
   Deixou de haver planos. Ha um produto, logo nao ha grelha, nao ha
   comparacao e nao ha nada para escolher — ha uma decisao: comecar ou nao.

   Por isso um painel unico e centrado, e nao um cartao sozinho numa grelha de
   tres colunas: um cartao encalhado num lado le-se como se faltasse alguma
   coisa. A cabeca (nome, preco, ensaio) fica separada do corpo por um filete,
   para o preco ser a primeira coisa que se le. */
#access{text-align:center}
#access .lede{margin-left:auto;margin-right:auto}

.pro{max-width:520px;margin:clamp(30px,4.4vw,48px) auto 0;text-align:left;
  background:var(--surface);border:1px solid rgba(201,159,46,.42);border-radius:12px;
  overflow:hidden}
.pro-head{padding:26px 26px 24px;background:var(--surface-2);
  border-bottom:1px solid var(--hair)}
.pro-name{font-family:var(--display);font-size:13px;font-weight:600;line-height:1.3;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0}
.pro-price{margin:16px 0 0;display:flex;align-items:baseline;gap:2px;white-space:nowrap;
  font-family:var(--data);font-variant-numeric:tabular-nums}
.pro-price .cur{font-size:22px;color:var(--ink-2);letter-spacing:-.02em}
.pro-price .amt{font-size:clamp(38px,9vw,52px);font-weight:500;color:var(--ink);
  letter-spacing:-.045em;line-height:1}
.pro-price .per{font-size:14px;color:var(--ink-2);margin-left:5px}
/* O ensaio usa o acento, mas nao compete com o preco: fica a 13px. */
.pro-trial{margin:11px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.pro-trial b{font-weight:500;color:var(--brass)}

.pro-body{padding:24px 26px 26px}
.pro-desc{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.pro-feats{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.pro-feats li{position:relative;padding-left:19px;font-size:13.5px;line-height:1.5;
  color:var(--ink-2)}
.pro-feats li::before{content:'';position:absolute;left:1px;top:.62em;width:8px;height:1px;
  background:var(--brass-2)}
.pro .btn{width:100%;margin-top:24px}
/* --ink-2 (8.05:1), nunca --ink-3: as condicoes nao vivem em cinzento minusculo */
.pro-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}

@media(max-width:360px){
  .pro-head{padding:20px 18px 18px}
  .pro-body{padding:20px 18px 22px}
}

footer{border-top:1px solid var(--hair);padding:28px 0 40px}
.fbar{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between}
@media(max-width:700px){
  .fbar{flex-direction:column;gap:18px}
  .fbar .note{max-width:none}
}
.fbar .note{margin:0;max-width:52ch}

@media(prefers-reduced-motion:reduce){
  .hero-film-v{display:none}
  .seg .thumb{transition:none}
}
@media(max-width:860px){
  .simgrid{grid-template-columns:1fr}
}
/* alvos de toque: a regra dos 44px aplica-se com a mesma especificidade,
   senao as declaracoes de base ganham */
@media(pointer:coarse),(max-width:820px){
  .btn.sm{min-height:44px;padding:0 16px}
  .presets button{min-height:44px}
  .seg button{min-height:46px}
  .detail summary,#faq summary{min-height:52px}
  .mark{min-height:44px}
}
@media(max-width:640px){
  nav.links{display:none}
  /* Retrato corta a fonte a ~20% da largura, portanto a coluna escolhida tem de
     conter o sujeito. Medido no ficheiro: o desvio-padrao vertical (cavalos
     contra fundo liso) concentra-se entre 25% e 53% da largura. A 62% apanhava
     vazio; 38% centra a janela no grupo. */
  .hero{min-height:clamp(500px,78vh,640px);min-height:clamp(500px,78svh,640px);
    padding-bottom:clamp(64px,14vw,96px)}
  .hero-film-in{inset:-9%;opacity:.72;background-position:38% 60%}
  .hero-film-v{object-position:38% 60%}
  .hero::before{background:
    linear-gradient(to bottom,var(--bg) 0,rgba(10,11,12,.72) 30%,rgba(10,11,12,.3) 58%,
      rgba(10,11,12,.62) 88%,var(--bg) 100%),
    linear-gradient(96deg,var(--bg) 0%,rgba(10,11,12,.6) 30%,rgba(10,11,12,.16) 68%,
      transparent 100%)}
    .results .headline{grid-template-columns:1fr;gap:20px}
  /* tabelas em blocos, nao espremidas.
     display:block e obrigatorio: com display:table o algoritmo de tabela impoe
     uma largura minima a partir do conteudo das celulas, e a tabela media
     363px dentro de um ecra de 320 mesmo com as linhas em grelha. */
  .tbl,.tbl tbody,.runs,.runs tbody{display:block;width:100%;min-width:0}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tbl tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
    padding:14px 0;border-bottom:1px solid var(--hair)}
  .tbl td{border:0;padding:0;text-align:right;font-size:13px}
  .tbl td:first-child{text-align:left;font-family:var(--mono);color:var(--ink-3);
    font-size:11.5px;letter-spacing:.04em}
  .tbl td+td{padding-left:0}
  .tbl td[data-l]::before{content:attr(data-l) " ";color:var(--ink-3);
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    margin-right:8px}
  .tbl.sessions td:nth-child(2),.tbl.sessions td:nth-child(3),
  .tbl.sessions td:nth-child(4){grid-column:1;text-align:left;font-size:12px}
  .runs td:nth-child(2),.runs td:nth-child(3){grid-column:1;text-align:left;font-size:12px}
}

/* ---------- ultimos mercados ----------
   Um mercado = uma entrada. Os corredores sao secundarios e ficam fechados.
   Sem cartoes: hierarquia por tipografia, espaco e um filete de 1px. */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 28px;
  flex-wrap:wrap}
.simtag{display:inline-flex;align-items:center;gap:8px;margin:0;flex-shrink:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-2);
  padding:7px 12px;border:1px solid var(--hair-2);border-radius:999px;
  font-variant-numeric:tabular-nums}
.simtag .dot{width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}

.mkts{list-style:none;margin:26px 0 0;padding:0}
.mkt-day{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:14px;
  margin:26px 0 2px}
.mkts>.mkt-day:first-child{margin-top:0}
.mkt-day::after{content:"";flex:1;height:1px;background:var(--hair)}

.mkt{border-bottom:1px solid var(--hair)}
.mkt-h{width:100%;display:grid;grid-template-columns:1fr auto 16px;
  gap:2px 16px;align-items:center;min-height:64px;padding:13px 8px;
  margin:0 -8px;border-radius:5px;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;
  font:inherit;transition:background-color .14s var(--ease-io)}
.mkt-h:hover{background:rgba(242,242,239,.032)}
.mkt-h:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px}
.mkt-v{grid-column:1;grid-row:1;font-size:15.5px;letter-spacing:-.012em;color:var(--ink);
  display:flex;align-items:baseline;gap:8px}
.mkt-v .sep{color:var(--ink-3)}
.mkt-t{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mkt-s{grid-column:1;grid-row:2;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.mkt-p{grid-column:2;grid-row:1/3;align-self:center;font-size:16px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chev{grid-column:3;grid-row:1/3;align-self:center;color:var(--ink-3);
  transition:transform .22s var(--ease-io),color .16s var(--ease-io)}
.mkt-h:hover .chev{color:var(--ink-2)}
.mkt.open .chev{transform:rotate(180deg);color:var(--brass)}

.mkt-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--ease-io)}
.mkt.open .mkt-b{grid-template-rows:1fr}
.mkt-in{overflow:hidden}
.mkt-in>*{margin-top:0}
/* os corredores sao um nivel abaixo do mercado: encosto de 1px e recuo, em vez
   de mais um cartao. */
.mkt.open .mkt-in{padding:0 0 20px 16px;border-left:1px solid var(--hair-2)}

.runs{width:100%;border-collapse:collapse;font-size:13.5px;
  border-top:1px solid var(--hair);margin-bottom:16px}
.runs th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:right;
  padding:11px 0 8px}
.runs th:first-child,.runs td:first-child{text-align:left}
.runs td{padding:8px 0;text-align:right;color:var(--ink-2);border-bottom:1px solid var(--hair)}
.runs td+td{padding-left:14px}
.runs tbody tr:last-child td{border-bottom:0}
.runs tr.won td:first-child{color:var(--ink)}
.runs .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}

.settle{margin:0;display:grid;gap:7px;padding-top:13px;border-top:1px solid var(--hair)}
.settle>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.settle dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.settle dd{margin:0;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.settle .net{padding-top:9px;margin-top:2px;border-top:1px solid var(--hair)}
.settle .net dt{color:var(--ink-2)}
.settle .net dd{font-size:15.5px;letter-spacing:-.02em}

/* ecra largo: a corrida cabe numa linha so — menos altura, menos percurso do olho */
@media(min-width:760px){
  .mkt-h{grid-template-columns:minmax(0,1fr) auto minmax(96px,auto) 16px;
    min-height:54px;padding:11px 0;gap:0 24px}
  .mkt-v{grid-row:1;grid-column:1}
  .mkt-s{grid-row:1;grid-column:2;align-self:center}
  .mkt-p{grid-row:1;grid-column:3;text-align:right}
  .chev{grid-row:1;grid-column:4}
  .mkt.open .mkt-in{padding-left:22px}
  .runs th:first-child,.runs td:first-child{width:38%}
  .runs th:nth-child(2),.runs td:nth-child(2){width:22%}
  .runs th:nth-child(3),.runs td:nth-child(3){width:18%}
  .settle>div{width:min(420px,100%);margin-left:auto}
}

@media(prefers-reduced-motion:reduce){
  .mkt-b,.chev{transition:none}
}
@media(pointer:coarse){
  .mkt-h{min-height:68px}
}
@media(max-width:640px){
  .sechead{align-items:flex-start}
  .mkt-h{grid-template-columns:1fr auto 16px;gap:3px 12px}
  .mkt-v{font-size:15px;flex-wrap:wrap}
  .mkt-p{font-size:15px}
  .runs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .runs{border-top:0}
  .runs tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
    padding:12px 0;border-bottom:1px solid var(--hair)}
  .runs td{border:0;padding:0;font-size:12.5px}
  .runs tbody tr:last-child{border-bottom:0}
  .runs td:first-child{grid-column:1;grid-row:1;color:var(--ink);font-size:14px}
  .runs td:nth-child(2){grid-column:1;grid-row:2;text-align:left;color:var(--ink-3)}
  .runs td:nth-child(3){grid-column:1;grid-row:3;text-align:left;color:var(--ink-3)}
  .runs td:nth-child(3)::before{content:"stake ";font-size:9.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-4)}
  .runs td:nth-child(4){grid-column:2;grid-row:1/4;align-self:center;font-size:14px}
  .runs td+td{padding-left:0}
}

/* ---------- prova comercial ----------
   Relatorio de desempenho, nao painel de casa de apostas: um numero grande,
   tres linhas de suporte, filetes de 1px e nada mais. */
#proof{padding-top:clamp(34px,4.5vw,58px)}
.proofgrid{display:grid;gap:clamp(30px,4vw,48px)}
.proof-lead .k{font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:clamp(.12em,.8vw,.2em);text-transform:uppercase;color:var(--ink-3);margin:0}
.proof-lead .v{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(46px,9vw,78px);letter-spacing:-.045em;line-height:1;margin:14px 0 0}
.proof-lead .v.pos{color:var(--ink)}
.proof-lead .sub{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(12.5px,3.5vw,14px);
  color:var(--ink-3);margin:16px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.proof-lead .sub .arrow{color:var(--color-text-secondary);font-size:1.25em;
  line-height:1;position:relative;top:.06em}
.proof-lead .sub b{color:var(--ink-2);font-weight:400}

.proof-side{margin:0;display:grid}
.proof-side>div{display:grid;grid-template-columns:1fr auto;gap:2px 20px;
  padding:15px 0;border-top:1px solid var(--hair)}
.proof-side>div:last-child{border-bottom:1px solid var(--hair)}
.proof-side dt{grid-column:1;grid-row:1;font-size:14.5px;color:var(--ink);margin:0;
  letter-spacing:-.01em}
.proof-side dd{margin:0}
.proof-side dd.num{grid-column:2;grid-row:1/3;align-self:center;font-size:17px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.proof-side dd.cap{grid-column:1;grid-row:2;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
#proofnote{max-width:64ch}

@media(min-width:860px){
  .proofgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(40px,6vw,88px);align-items:start}
  .proof-lead{padding-top:4px}
}

/* ---------- estrategias ----------
   Uma entrada por estrategia. Uma segunda estrategia e mais um <li>, nao um
   redesenho do site. */
.strats{list-style:none;margin:30px 0 0;padding:0}
.strat{border-top:1px solid var(--hair);padding:26px 0 28px}
.strat:last-child{border-bottom:1px solid var(--hair)}
.strat-h{display:flex;align-items:baseline;gap:13px;flex-wrap:nowrap}
.strat-h h3{font-family:var(--display);font-size:clamp(20px,3vw,26px);font-weight:600;
  letter-spacing:.05em;margin:0}
.pill{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--hair-2);
  border-radius:999px;padding:4px 10px;line-height:1.4}
.pill.on{color:var(--color-positive);border-color:rgba(79,209,139,.42)}
.strat-s{color:var(--ink-2);max-width:58ch;margin:14px 0 0;font-size:15px;line-height:1.6}
.strat-m{margin:22px 0 0;display:flex;gap:clamp(26px,5vw,54px);flex-wrap:wrap}
.strat-m>div{display:flex;flex-direction:column;gap:5px}
.strat-m dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.strat-m dd{margin:0;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.strat .btn{margin-top:24px}

/* contexto de estrategia no cabecalho de uma seccao */
.strat-of{color:var(--brass);letter-spacing:.16em}
.strat-of::before{content:"· "}

/* ═══════════════ CAMADA MOVEL ═══════════════
   Havia um unico ponto de corte a 640px: de 320 a 640 era tudo igual, e a
   320 partia. Estes escaloes existem para o que efectivamente parte. */

/* --- areas seguras: com viewport-fit=cover a pagina passa por baixo da ilha
   dinamica e do indicador. Sem isto o cabecalho fixo ficava por baixo. --- */
header{padding-top:env(safe-area-inset-top,0px)}
.wrap{padding-left:max(24px,env(safe-area-inset-left,0px));
  padding-right:max(24px,env(safe-area-inset-right,0px))}
footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* --- REGISTO: a tabela de sessoes em movel dava 110px por dia (2423px de
   parede). Duas linhas por sessao: data e resultado em cima, contagens e
   acumulado em baixo. Mesma informacao, um terco da altura. --- */
@media(max-width:640px){
  /* Os prefixos longos ("RUNNING +€255.92") dimensionavam a ultima coluna e
     empurravam-na para fora do ecra a 320. Encurtados, e a coluna do meio
     absorve a folga. */
  .tbl.sessions tr{grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-rows:auto auto;gap:6px 10px;padding:13px 0}
  .tbl.sessions td:nth-child(2)[data-l]::before{content:"MKT "}
  .tbl.sessions td:nth-child(3)[data-l]::before{content:"WON "}
  .tbl.sessions td:nth-child(5)[data-l]::before{content:"RUN "}
  .tbl.sessions td:first-child{grid-area:1/1/2/4;font-size:13px;color:var(--ink);
    letter-spacing:.06em}
  .tbl.sessions td:nth-child(4){grid-area:1/4/2/5;text-align:right;font-size:14.5px}
  .tbl.sessions td:nth-child(2){grid-area:2/1/3/2;text-align:left;font-size:11.5px}
  .tbl.sessions td:nth-child(3){grid-area:2/2/3/3;text-align:left;font-size:11.5px}
  .tbl.sessions td:nth-child(5){grid-area:2/4/3/5;text-align:right;font-size:11.5px}
  .tbl.sessions td:nth-child(4)::before{content:none}
}

/* --- CABECALHO: a 320 "Request access" partia em duas linhas. Aperta-se a
   marca e o botao antes de deixar qualquer um deles embrulhar. --- */
.mark{white-space:nowrap}
.mark .m1,.mark .m2{white-space:nowrap}
header .btn.sm{white-space:nowrap}
@media(max-width:430px){
  .hbar{gap:12px}
  .mark{font-size:12.5px}
  .mark .m1,.mark .m2{letter-spacing:.15em}
  .mark .mrule{width:12px}
  header .btn.sm{font-size:12.5px;padding:0 13px}
}
@media(max-width:360px){
  .mark{font-size:11px}
  .mark .m1,.mark .m2{letter-spacing:.12em}
  .mark .mrule{width:10px}
  header .btn.sm{font-size:12px;padding:0 11px}
  .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));
    padding-right:max(18px,env(safe-area-inset-right,0px))}
}

/* --- PRESETS: com flex-wrap o quarto caia sozinho para uma linha inteira
   (77,77,77 e depois 244). Grelha 2x2 abaixo de 420. --- */
@media(max-width:420px){
  .presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .presets button{width:100%;min-width:0}
}

/* --- HEROI: os dois CTA empilham em vez de partilharem uma linha apertada --- */
@media(max-width:430px){
  .hero .cta{flex-direction:column;align-items:stretch;gap:12px}
  .hero .cta .btn{width:100%}
}

/* --- PAISAGEM: 78svh de altura minima num telemovel deitado enchia o ecra
   inteiro so com o heroi. --- */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:0;padding:clamp(36px,7vh,56px) 0 clamp(44px,9vh,72px)}
  main section{padding:clamp(36px,7vh,64px) 0}
  #eq{height:158px} #curve{height:158px}
}

/* --- ESTRATEGIAS: um nome longo embrulha o proprio texto; a etiqueta fica
   sempre ao lado dele em vez de cair para uma linha so dela. --- */
.strat-h h3{min-width:0;overflow-wrap:anywhere}

/* --- numeros longos nunca partem a meio --- */
.num,.proof-lead .v,.results .big .v,.mkt-p,.settle dd{overflow-wrap:normal;
  word-break:keep-all}

/* --- CABECALHO COM LOGIN: tres coisas onde antes havia duas ---
   A 320 a soma dava 396 num ecra de 320. Aperta-se por esta ordem, da menos
   custosa para a mais: primeiro o padding do Login (e terciario, nao tem
   contorno a perder), depois os gaps, depois a margem da pagina. O rotulo do
   CTA encurta em JS a 400 — ver paintHeader. */
.hdr-login{flex:0 0 auto}
@media(max-width:430px){
  .hdr-login{padding:0 6px}
  .hbar{gap:10px}
}
@media(max-width:360px){
  .hdr-login{padding:0 2px;font-size:12px}
  .hbar{gap:8px}
  header .wrap{padding-left:max(14px,env(safe-area-inset-left,0px));
    padding-right:max(14px,env(safe-area-inset-right,0px))}
}

/* --- QUATRO METRICAS onde antes havia tres ---
   Com flex-wrap simples, o quarto item caia sozinho para uma linha inteira e
   deixava um buraco. Grelha 2x2 abaixo de 560: os pares alinham e o ROI fica
   ao lado do Net Return, que e onde se comparam. */
@media(max-width:560px){
  .results .mini{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  .results .mini div{min-width:0}
}

/* O botao do esqueleto e um <span> com aspecto de botao: reserva os mesmos
   44px sem ser focavel nem clicavel por engano. */
.strat .btn[aria-hidden="true"]{pointer-events:none}