/* ═══════════════════════════════════════════════════════════════════════
   TIPMARKET — SITE LAYER
   Extends the base layer (assets/base.css). Nothing here invents a new
   token: every value below is lifted from the design system's
   LAYER B (surfaces + motion), LAYER D (brand CTA recolour) and
   LAYER E (typography), plus the site-only compositions prefixed .tm-*.
   Base reset, .label, .cta-btn, .btn-outline, [data-reveal], pills-left,
   hiw-glow and the Multima @font-face all come from base.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LAYER B · tokens ─────────────────────────────────────────────── */
:root {
  --bg:      #07070a;
  --surface: #0f0f16;
  --accent:  #8ac5fa;
  --text:    #f5f7fa;
  --muted:   #8a909b;
  --yes:     #2ebd85;
  --no:      #e5484d;
  --border:  #ffffff14;
  --section-space: 80px;
}

.tm-section-top { padding-top:var(--section-space) }
.tm-section-bottom { padding-bottom:var(--section-space) }
@media (max-width:639px) {
  :root { --section-space:48px }
}

/* ── LAYER E · typography ─────────────────────────────────────────── */
.ds-h2        { font-size:clamp(32px,4vw,60px); line-height:1.1  }
.ds-h3        { font-size:clamp(28px,4vw,40px); line-height:1.2  }
.ds-h4        { font-size:20px; line-height:1.3  }
.ds-bold-m    { font-size:16px; line-height:1.62; font-weight:500 }
.ds-bold-s    { font-size:14px; line-height:1.57; font-weight:500 }
.ds-paragraph { font-size:16px; line-height:1.62 }
.ds-regular-l { font-size:14px; line-height:1.57 }
.ds-regular-m { font-size:12px; line-height:1.5  }

.ds-code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
           font-size:11px; line-height:1.5; letter-spacing:0 }

/* ── LAYER B · surfaces & atmosphere ──────────────────────────────── */
.v2-aurora  { pointer-events:none; position:absolute; filter:blur(80px);
              background:radial-gradient(closest-side,#8ac5fa4d,#0000 70%); border-radius:50% }
.v2-grid-bg { pointer-events:none; position:absolute; inset:0;
              background-image:radial-gradient(#ffffff0e 1px,#0000 0); background-size:26px 26px;
              -webkit-mask-image:radial-gradient(70% 60% at 50% 38%,#000 0,#0000 78%);
                      mask-image:radial-gradient(70% 60% at 50% 38%,#000 0,#0000 78%) }
.v2-gradient-text {
  color:#0000;
  background:linear-gradient(110deg,#cfeaff,#8ac5fa 38%,#9fdcff 64%,#8ac5fa) 0 0/220% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:v2Sheen 7s ease-in-out infinite alternate
}
.v2-shiny { color:var(--accent) }

/* ── LAYER B · buttons ────────────────────────────────────────────── */
.v2-cta {
  background:var(--accent); color:var(--bg);
  border-radius:9999px; justify-content:center; align-items:center; gap:.5rem;
  font-weight:600; display:inline-flex; position:relative; overflow:hidden;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
  box-shadow:0 10px 36px -8px #8ac5fa8c, 0 0 0 1px #8ac5fa40
}
.v2-cta:hover { transform:translateY(-1px) scale(1.02);
                box-shadow:0 14px 44px -8px #8ac5faa6, 0 0 0 1px #8ac5fa59 }
.v2-cta:after { content:""; pointer-events:none; position:absolute; inset:0; transform:translate(-130%);
                background:linear-gradient(115deg,#0000 32%,#fff9 50%,#0000 68%) }
.v2-cta:hover:after { animation:v2Shine .9s cubic-bezier(.16,1,.3,1) }
.v2-cta:active { transform:translateY(0) scale(.99) }
.v2-cta:focus-visible { outline:none;
  box-shadow:0 10px 36px -8px #8ac5fa8c, 0 0 0 2px var(--bg), 0 0 0 4px #8ac5fa }

/* ── LAYER B · market chip ────────────────────────────────────────── */
.v2-chip {
  color:#e7e9ea; white-space:nowrap; display:flex; align-items:center; gap:8px;
  height:32px; padding:0 6px 0 11px; font-size:13px;
  background:linear-gradient(#ffffff0d,#fff0 55%),#16181c;
  border:1px solid #ffffff17; border-radius:999px;
  box-shadow:inset 0 1px #ffffff0d, 0 1px 2px #00000073, 0 6px 16px -8px #00000080
}

/* ── LAYER B · keyframes ──────────────────────────────────────────── */
@keyframes v2Sheen  { 0%{background-position:0} to{background-position:100%} }
@keyframes v2Shine  { to{transform:translate(130%)} }
@keyframes breathe  { 0%,to{transform:scale(1)} 50%{transform:scale(1.03)} }
@keyframes pulseDot { 0%,to{opacity:1;box-shadow:0 0 #8ac5fa80} 50%{opacity:.7;box-shadow:0 0 0 5px #8ac5fa00} }
@keyframes shimmerSweep { 0%{transform:translate(-110%)} 55%,to{transform:translate(120%)} }

.ds-dot     { width:8px; height:8px; border-radius:50%; background:var(--accent);
              animation:pulseDot 2s ease-in-out infinite }
.ds-breathe { animation:breathe 3.4s ease-in-out infinite }
.ds-lift    { transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease }
.ds-lift:hover { transform:translateY(-4px); box-shadow:0 20px 50px -20px rgba(138,197,250,0.45) }


/* ═══════════════════════════════════════════════════════════════════════
   SITE COMPOSITIONS — .tm-*
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero surface — the operator's own front end, light theme ──────
   The headline promises two things at once: every market your customer
   wants, AND under your brand. The picture answers both with the real
   product screen (demo.372.one) rather than an impression of one.

   Two decisions carry this:

   1. TRUE SCALE. The previous pass squeezed a ~900px app into a 470px
      frame; a product at half size stops looking like the product. Here
      the app runs at its own size and the frame simply crops it, so the
      top of the screen — header, search, category rail, the Featured
      cards, the start of Explore — is exactly what it is in the app.
   2. LIGHT THEME on a dark bezel. The app ships light and dark; light
      against the dark ground reads as a lit screen in a frame, and it
      solves the flatness of the old dark-app-on-dark-banner, which had
      almost no contrast to give.

   The colour split is copied from the product, not invented here. The
   app tokenises --primary / --sidebar-primary / --ring off one brand
   hue and hard-codes --success, --danger and the seven --cat-* hues, so
   the rotation repaints the mark, the active nav, the buttons, the pills
   and the accent word — and never Sim/Não or a category. Everything is
   drawn from type and token; no photography, no screenshots.        */
:root {
  /* :root[data-theme=light] in the product, verbatim, so the mock cannot
     drift from the app it is claiming to be */
  --tm-canvas:  #f6f7f9;
  --tm-surf:    #ffffff;
  --tm-surf-2:  #f1f3f6;
  --tm-line:    #0000001f;
  --tm-ink:     #14161a;
  --tm-soft:    #585f6b;
  --tm-faint:   #616875;
  --tm-field:   #00000008;
  --tm-yes:     #096e4a;
  --tm-no:      #b32b28;
  --tm-card-sh: 0 1px 2px #1018280f, 0 8px 24px -12px #10182824;
}

/* The stage runs wider than the text column and its screen is cut off in a
   straight line by the bottom of the bezel — no fade. A fade announces an
   ending, and mine was announcing it directly over the Sim/Não, which is
   the one thing in the picture a reader is trying to read. The reference does the
   honest version: hard crop, rounded on top only, and the next section
   rides up over it (.tm-overlap) so the screen disappears under the page
   rather than dissolving into it. That is what reads as continuing.   */
.tm-stage { margin-top:44px; padding:0 clamp(16px,3.4vw,52px) }
.tm-bezel {
  position:relative; overflow:hidden;
  max-width:1420px; margin:0 auto;
  border-radius:24px 24px 0 0;
  padding:0 10px;
  /* Grafite e não o #07070a do resto do site: entre o herói branco e a
     tela quase branca do app, preto puro dá 20:1 de contraste e a
     moldura vira a coisa mais alta da dobra — justamente ela, que só
     precisa dizer "isto é uma tela". O grafite mantém a leitura de
     aparelho e cede o palco ao produto. O brilho ficou um pouco mais
     fraco porque sobre um fundo mais claro ele rende mais.          */
  background:#292d34;
  background-image:radial-gradient(closest-side,#8ac5fa42,#0000 70%);
  background-size:150% 150%; background-position:center top;
  background-repeat:no-repeat;
}
/* the crop itself: fixed height, square-bottomed, contents overflow past it */
.tm-screen {
  /* --brand mora aqui, e não em .tm-surface, porque o portão de login, a
     folha, o atalho e a barra do telefone são IRMÃOS da superfície — não
     filhos. Declarada lá embaixo, a cor não chegava neles e os botões
     azuis saíam brancos. No palco ela alcança o app inteiro, que é o que
     "a tela é do operador" quer dizer de qualquer forma. */
  --brand:#3a80c8;
  /* O produto é Poppins de ponta a ponta — o mock estava em Inter, que é
     a fonte de texto da PÁGINA, não do app. Declarada no palco, ela
     pega o app, o portão, as folhas e o atalho de uma vez. */
  font-family:Poppins, Inter, Arial, sans-serif;
  position:relative; z-index:1;
  /* praticamente fixa de propósito: escalar a altura com vw fazia o corte
     passear pelo conteúdo, e entre ~1100 e ~1250px ele caía em cima da
     pergunta ou dos botões. Altura estável = corte previsível. */
  --tm-crop:clamp(706px,49vw,730px);
  height:var(--tm-crop);
  overflow:hidden;
  border-radius:14px 14px 0 0;
}
/* Products overlaps the screen while keeping the shared section spacing. */
.tm-overlap { position:relative; z-index:3; margin-top:-84px; padding-top:var(--section-space) }
.tm-banner-head {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 14px;
}
.tm-banner-note { display:flex; align-items:center; gap:7px;
                  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
                  /* subiu de #6d7686: no grafite aquele cinza caía para
                     2,6:1 e a linha sumia */
                  color:#9aa3b2 }
.tm-banner-live { width:5px; height:5px; border-radius:50%; background:#8ac5fa;
                  box-shadow:0 0 0 3px #8ac5fa1f; animation:tmPulse 2.6s ease-in-out infinite }
@keyframes tmPulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
@media (max-width:1023px) { .tm-banner-note { display:none } }

.tm-surface {
  /* Um azul só, o da Tipmarket em fundo claro — o mesmo #3a80c8 que a
     página usa nos eyebrows, nos pontos e nos links sobre branco. O
     produto tokeniza esta cor como --primary/--sidebar-primary/--ring,
     então trocá-la aqui repinta a barra, o Sign up, o Trade, o "view
     all" e a rosca dos Featured de uma vez. Yes/No e os --cat-* não
     dependem dela de propósito: a marca é sua, ler um mercado não é. */
  width:100%; min-height:100%;
  background:var(--tm-canvas); color:var(--tm-ink);
  display:flex; align-items:stretch;
  font-size:13px;
}

/* ── sidebar — nearly everything in here is brand ─────────────────── */
/* Altura do corte e grudada no topo, como no produto: a barra não rola
   com o conteúdo. Antes ela era min-height:100% e crescia com a Home —
   então o `margin-top:auto` do cartão de saldo empurrava o cartão para o
   pé da BARRA, uns 60px abaixo do pé visível do quadro, e o corte comia
   o Deposit/Withdraw. Com a altura do corte, o pé da barra é o pé que se
   vê. */
.tm-side { width:228px; flex-shrink:0; background:var(--tm-surf);
           border-right:1px solid var(--tm-line);
           position:sticky; top:0; height:var(--tm-crop);
           display:flex; flex-direction:column; gap:14px; padding:14px 12px }
.tm-side-brand { display:flex; align-items:center; gap:9px; padding:2px 4px 2px }
/* a lockup inteira no lugar do par marca+nome que girava */
.tm-side-logo { height:21px; width:auto; display:block; flex-shrink:0 }

.tm-side-burger { margin-left:auto; color:var(--tm-faint); flex-shrink:0;
                  display:inline-flex; align-items:center }
.tm-side-burger svg { width:15px; height:15px }

.tm-side-nav { display:flex; flex-direction:column; gap:1px }

/* Os dois botões que o produto passou a ancorar no pé da barra. O Sign up
   é o segundo lugar da tela onde a marca se pinta sozinha — entra no
   repaint pelo mesmo --brand do botão do cabeçalho.                   */
/* O margin-bottom não é decoração: colado no pé da barra, o par ficava
   sob a sobreposição da Quebra 2 e aparecia por 8px — meio-botão lê como
   defeito de render, e o resto do quadro segue a regra de que nada é
   mostrado pela metade. O valor acompanha o -84px de .tm-overlap. Abaixo
   de 1024px a barra vira trilho de ícones e o par sai de cena.       */
.tm-side-auth { margin-top:auto; margin-bottom:92px;
                display:flex; flex-direction:column; gap:8px; padding:0 2px 2px }
.tm-side-signup, .tm-side-login {
  display:flex; align-items:center; justify-content:center;
  height:34px; border-radius:9px; font-size:12.5px; font-weight:700
}
.tm-side-signup { background:var(--brand); color:#fff;
                  transition:background-color .55s ease }
.tm-side-login  { color:var(--tm-ink); border:1px solid var(--tm-line);
                  background:var(--tm-surf) }
.tm-side-item { display:flex; align-items:center; gap:10px; padding:8px 10px;
                border-radius:9px; font-size:12.5px; color:var(--tm-soft);
                white-space:nowrap;
                transition:background-color .55s ease, color .55s ease }
.tm-side-item i { font-style:normal }
.tm-side-item svg { width:16px; height:16px; flex-shrink:0 }
.tm-side-item.is-dim { color:#a7adb8 }
/* --sidebar-accent / --sidebar-accent-foreground in the app */
.tm-side-item.is-on { background:color-mix(in srgb, var(--brand) 10%, #fff);
                      color:var(--brand); font-weight:600 }

/* ── main column ──────────────────────────────────────────────────── */
.tm-main { flex:1; min-width:0; display:flex; flex-direction:column;
           padding:0; background:var(--tm-canvas) }
/* Nothing in the column may shrink. The whole point of this picture is
   that the app runs at its own size and the frame crops it — let a flex
   child compress to fit and the Featured rail collapses to nothing,
   which is exactly the squeezed-app problem this pass exists to fix. */
.tm-main > * { flex-shrink:0 }

/* `relative` + z-index: o cabeçalho é moldura, e nada da cena
   pinta por cima dele */
.tm-main-head { position:relative; z-index:2;
                display:flex; align-items:center; gap:8px;
                padding:13px 22px 12px; background:var(--tm-surf) }
.tm-main-title { font-size:19px; font-weight:800; color:var(--tm-ink);
                 letter-spacing:-.03em; margin-right:auto }
.tm-icon-btn { width:30px; height:30px; border-radius:50%; flex-shrink:0;
               display:inline-flex; align-items:center; justify-content:center;
               border:1px solid var(--tm-line); color:var(--tm-soft);
               background:var(--tm-surf) }
.tm-icon-btn svg { width:14px; height:14px }
.tm-btn-ghost, .tm-btn-brand { font-size:12px; font-weight:600; padding:7px 15px;
                               border-radius:15px; white-space:nowrap }
.tm-btn-ghost { color:var(--tm-ink); border:1px solid var(--tm-line);
                background:var(--tm-surf) }
.tm-btn-brand { background:var(--brand); color:#fff;
                transition:background-color .55s ease }

.tm-search-row { display:flex; align-items:center; gap:8px;
                 padding:0 22px 11px; background:var(--tm-surf) }
.tm-search { flex:1; min-width:0; display:flex; align-items:center; gap:9px;
             border:1px solid var(--tm-line); border-radius:14px;
             padding:10px 14px; font-size:12.5px; color:var(--tm-faint);
             background:var(--tm-field); white-space:nowrap; overflow:hidden }
.tm-search svg { width:15px; height:15px; flex-shrink:0 }

.tm-tabs { display:flex; align-items:center; gap:19px; white-space:nowrap;
           padding:0 22px; background:var(--tm-surf);
           border-bottom:1px solid var(--tm-line) }
.tm-tab { display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
          color:var(--tm-soft); padding:0 0 10px; position:relative }
.tm-tab svg { width:13px; height:13px }
.tm-tab.is-on { color:var(--tm-ink); font-weight:700 }
.tm-tab.is-on::after { content:''; position:absolute; left:0; right:0; bottom:-1px;
                       height:2px; border-radius:2px; background:var(--brand);
                       transition:background-color .55s ease }

/* ── the Featured cards — the premium rail above Explore ──────────── */
.tm-feat { display:flex; gap:14px; padding:16px 0 0 22px; position:relative;
           overflow:hidden }
.tm-fcard { position:relative; overflow:hidden; flex:0 0 auto;
            display:flex; flex-direction:column;
            width:clamp(248px,34%,352px); height:158px;
            background:var(--tm-surf); border:1px solid var(--tm-line);
            border-radius:16px; padding:13px 15px;
            box-shadow:var(--tm-card-sh);
            --gauge-bg:var(--tm-surf); --gauge-track:#e1e5ea;
            --gauge-arc:var(--brand) }

/* A foto do evento, ocupando o card inteiro. `cover` porque a proporção
   do card muda com a largura da tela e a do arquivo não; o brilho desce
   um pouco para a foto não competir com o texto que mora em cima. */
.tm-fcard-art { position:absolute; inset:0; z-index:0; width:100%; height:100%;
                object-fit:cover; filter:brightness(.92) saturate(.94);
                pointer-events:none }
.tm-fcard--dark { color:#fff; border-color:#ffffff26;
                  --gauge-bg:#0f141b; --gauge-track:#ffffff2e;
                  --gauge-arc:color-mix(in srgb, var(--brand) 62%, #fff) }
/* O véu rebaixa a foto, não a apaga. Com desenho bastava um gradiente
   fraco, porque a arte já escurecia sozinha para baixo; foto não faz
   isso — a cúpula do Capitólio e os refletores do estádio são as áreas
   mais claras do quadro e caem justamente onde o texto branco mora.

   São dois: um vertical, que segura as duas pontas — a pílula e a
   pergunta em cima, o medidor e o Trade embaixo — e um diagonal pela
   esquerda, que é por onde a pergunta se estende. O miolo à direita
   fica aberto, e é ali que a foto se vê.                            */
.tm-fcard--dark::after { content:''; position:absolute; inset:0; z-index:0;
                         background:
                           linear-gradient(180deg,#080c11c4 0%,#080c1166 32%,
                                                   #080c1180 58%,#080c11ec 100%),
                           linear-gradient(102deg,#080c11a8 0%,#080c1138 56%,#080c1100 100%) }
.tm-fcard--dark .tm-fcard-q { color:#fff }
.tm-fcard--dark .tm-feat-pill { color:#e4f1ff; background:#ffffff24 }
.tm-fcard--dark .tm-feat-save { background:#ffffff2b }
.tm-fcard--dark .tm-fcard-cap { color:#ffffffa8 }
.tm-fcard--dark .tm-mult { color:#e4f1ff; background:#ffffff1f }
.tm-feat-pill { display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
                font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px;
                color:var(--brand); background:color-mix(in srgb, var(--brand) 11%, #fff);
                transition:color .55s ease, background-color .55s ease }
.tm-feat-pill svg { width:11px; height:11px }
.tm-feat-save { position:absolute; top:11px; right:12px;
                width:26px; height:26px; border-radius:50%;
                display:inline-flex; align-items:center; justify-content:center;
                background:#2c3138; color:#fff }
.tm-feat-save svg { width:12px; height:12px }
.tm-feat-pill, .tm-fcard-q { position:relative; z-index:1 }
.tm-fcard-q { margin:12px 0 0; font-size:15.5px; font-weight:800; line-height:1.26;
              letter-spacing:-.02em; color:var(--tm-ink); max-width:82%;
              display:-webkit-box; -webkit-box-orient:vertical;
              -webkit-line-clamp:2; line-clamp:2; overflow:hidden }
.tm-feat-save { z-index:1 }

/* ── o rodapé do card: medidor, multiplicador e o botão ───────────
   O produto trocou a marca-d'água por este bloco: uma rosca com a
   probabilidade dentro, o multiplicador ao lado e a legenda do que a
   porcentagem quer dizer — que muda por tipo de evento ("Yes chance"
   num sim/não, "Larson leads" numa disputa de vários concorrentes).

   Ele ocupa espaço real (margin-top:auto), não position:absolute. Preso
   à base por absolute ele não empurrava nada: quando o card encolheu no
   telefone e a pergunta passou a ocupar duas linhas, a rosca subia por
   cima dos descendentes do título. Em fluxo, o título sempre reserva a
   altura dele e o clamp de 2 linhas resolve o que sobra.            */
.tm-fcard-foot { position:relative; z-index:1; margin-top:auto;
                 display:flex; align-items:center; gap:10px }
.tm-gauge { position:relative; width:42px; height:42px; border-radius:50%;
            flex-shrink:0; display:grid; place-items:center; --p:45;
            background:conic-gradient(var(--gauge-arc) calc(var(--p) * 3.6deg),
                                      var(--gauge-track) 0);
            transition:background .55s ease }
.tm-gauge::before { content:''; position:absolute; inset:4px; border-radius:50%;
                    background:var(--gauge-bg) }
.tm-gauge i { position:relative; font-style:normal; font-size:11px; font-weight:800;
              letter-spacing:-.03em }
.tm-fcard-meta { display:flex; flex-direction:column; align-items:flex-start;
                 gap:3px; min-width:0 }
.tm-mult { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px;
           color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, #fff);
           transition:color .55s ease, background-color .55s ease }
.tm-fcard-cap { font-size:10px; color:var(--tm-faint); white-space:nowrap }
.tm-fcard-cta { margin-left:auto; flex-shrink:0;
                font-size:12px; font-weight:700; color:#fff;
                background:var(--brand); padding:7px 17px; border-radius:999px;
                transition:background-color .55s ease }
.tm-feat-next { position:absolute; z-index:2; right:14px; top:50%; transform:translateY(-50%);
                width:28px; height:28px; border-radius:50%;
                display:inline-flex; align-items:center; justify-content:center;
                background:var(--tm-surf); border:1px solid var(--tm-line);
                color:var(--tm-ink); box-shadow:var(--tm-card-sh) }
.tm-feat-next svg { width:13px; height:13px }

.tm-dots { display:flex; align-items:center; justify-content:center; gap:5px;
           padding:11px 0 0 }
.tm-dots i { width:5px; height:5px; border-radius:999px; background:#c8ccd3 }
.tm-dots i.is-on { width:15px; background:var(--tm-ink) }

.tm-explore { display:flex; align-items:baseline; justify-content:space-between;
              gap:12px; padding:14px 22px 0 }
.tm-explore-t { font-size:16px; font-weight:800; color:var(--tm-ink);
                letter-spacing:-.03em }
.tm-explore-t i { font-style:italic; color:var(--brand); transition:color .55s ease }
.tm-explore-n { font-size:11px; color:var(--tm-faint) }

/* ── Explore: colunas por categoria ──────────────────────────────
   O produto deixou de listar tudo numa grade uniforme: agora separa por
   categoria em colunas, cada uma com o seu "view all", e usa dois tipos
   de card. Evento agrupado traz uma linha por resultado possível; o
   binário traz as duas faixas de preço. Os dois cabem aqui porque a
   diferença entre eles é o argumento — "todo mercado que seu cliente
   deseja" vai de jogo com três resultados a sim/não.

   auto-fit em vez de duas colunas fixas: a mesma regra dá duas colunas
   ao lado da barra, uma quando o quadro estreita, sem breakpoint
   decidindo.                                                        */
.tm-cols { display:grid; gap:14px 18px; padding:12px 22px 0;
           grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.tm-col { display:flex; flex-direction:column; gap:9px; min-width:0 }
.tm-col-head { display:flex; align-items:center; justify-content:space-between;
               gap:12px }
.tm-col-t { display:inline-flex; align-items:center; gap:6px;
            font-size:13.5px; font-weight:800; font-style:italic;
            letter-spacing:-.02em; color:var(--tm-ink) }
/* o ponto herda a cor fixa da categoria, não a da marca */
.tm-col-t i { width:5px; height:5px; border-radius:50%; background:var(--cat) }
.tm-col-all { display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
              font-size:11px; font-weight:600; color:var(--brand);
              transition:color .55s ease }
.tm-col-all svg { width:12px; height:12px }

/* fixo por categoria — o app trava --cat-esportes, --cat-cripto … então
   estes são os tokens que ficam parados enquanto a marca se repinta */
.tm-card-icon { width:28px; height:28px; border-radius:9px; flex-shrink:0;
                display:inline-flex; align-items:center; justify-content:center;
                color:var(--cat);
                background:color-mix(in srgb, var(--cat) 11%, #fff);
                box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat) 26%, #fff) }
.tm-card-icon svg { width:15px; height:15px }
/* A marca do mercado. Logo respira dentro do ladrilho tingido — é o
   contraste entre os dois que faz a marca ler; foto sangra até a borda,
   e aí o tingimento só sujaria. O anel fino fica nos dois casos, porque
   é ele que fecha o quadrado quando a imagem é clara. */
.tm-card-icon img { width:100%; height:100%; padding:16%; box-sizing:border-box;
                    object-fit:contain }
.tm-card-icon.is-photo { overflow:hidden; background:var(--tm-surf-2);
                         box-shadow:inset 0 0 0 1px #1018281f }
.tm-card-icon.is-photo img { padding:0; object-fit:cover }
/* Na página do mercado ela cresce, que é o que a fonte faz: o mesmo
   ladrilho, do tamanho do bloco de título. */
.tm-card-icon.is-big { width:46px; height:46px; border-radius:13px }
/* Selo tem detalhe demais para 28px: em linha preta sobre ladrilho claro
   ele vira um disco sujo. Invertido sobre azul institucional a leitura
   inverte junto — o que sobra no tamanho pequeno e a silhueta clara do
   brasao, que e o que se reconhece. */
.tm-card-icon.is-seal { background:#14294a; box-shadow:inset 0 0 0 1px #14294a }
.tm-card-icon.is-seal img { padding:9%; filter:invert(1) brightness(1.45) }

.tm-ev, .tm-bin { border:1px solid var(--tm-line); border-radius:14px;
                  background:var(--tm-surf); padding:11px 12px;
                  display:flex; flex-direction:column; gap:9px;
                  box-shadow:var(--tm-card-sh) }

/* ── evento agrupado ─────────────────────────────────────────────── */
.tm-ev-head { display:flex; align-items:center; gap:9px }
.tm-ev-q { margin:0; flex:1; min-width:0; font-size:12.5px; font-weight:700;
           line-height:1.25; letter-spacing:-.02em; color:var(--tm-ink);
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tm-ev-n { font-size:10px; color:var(--tm-faint); white-space:nowrap; flex-shrink:0 }
.tm-ev-chev { width:12px; height:12px; flex-shrink:0; color:var(--tm-faint) }

.tm-ev-rows { display:flex; flex-direction:column; gap:6px }
.tm-ev-row  { display:flex; align-items:center; gap:8px; font-size:11.5px }
.tm-ev-av   { width:17px; height:17px; border-radius:50%; flex-shrink:0;
              display:inline-flex; align-items:center; justify-content:center;
              font-style:normal; font-size:8.5px; font-weight:800;
              color:var(--tm-faint); background:var(--tm-surf-2);
              box-shadow:inset 0 0 0 1px var(--tm-line) }
.tm-ev-row b { flex:1; min-width:0; font-weight:600; color:var(--tm-ink);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tm-ev-mult { font-size:10.5px; color:var(--tm-faint); flex-shrink:0 }
/* verde e vermelho travados: --color-success / --color-danger do tema
   claro, verbatim. É a divisão que sustenta a seção — a marca é sua,
   ler um mercado não é.                                             */
.tm-ev-y  { flex-shrink:0; min-width:38px; text-align:center;
            font-size:11px; font-weight:800; padding:3px 7px; border-radius:7px;
            color:var(--tm-yes); background:#096e4a1a;
            border:1px solid color-mix(in srgb, var(--tm-yes) 22%, transparent) }
.tm-ev-n2 { flex-shrink:0; font-size:11px; font-weight:700; padding:3px 9px;
            border-radius:7px; color:var(--tm-no); background:#b32b281a;
            border:1px solid color-mix(in srgb, var(--tm-no) 22%, transparent) }

.tm-ev-foot { display:flex; align-items:center; justify-content:space-between;
              gap:10px; font-size:10px; color:var(--tm-faint) }
.tm-ev-more { color:var(--brand); font-weight:600; flex-shrink:0;
              transition:color .55s ease }

/* ── mercado binário ─────────────────────────────────────────────── */
.tm-bin-head { display:flex; align-items:flex-start; gap:9px }
.tm-bin-q { margin:0; flex:1; min-width:0; font-size:12.5px; font-weight:700;
            line-height:1.28; letter-spacing:-.02em; color:var(--tm-ink);
            display:-webkit-box; -webkit-box-orient:vertical;
            -webkit-line-clamp:2; line-clamp:2; overflow:hidden }
.tm-bin-pct { display:flex; flex-direction:column; align-items:flex-end;
              gap:1px; flex-shrink:0 }
.tm-bin-pct b { font-size:14.5px; font-weight:800; letter-spacing:-.03em;
                color:var(--tm-ink) }
.tm-bin-pct i { font-style:normal; font-size:10px; color:var(--brand);
                transition:color .55s ease }

/* a faixa é uma barra de probabilidade, não um botão: o preenchimento
   claro atrás do preço é o próprio preço lido como largura */
.tm-bin-bars { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.tm-bin-bar  { position:relative; overflow:hidden; border-radius:9px;
               display:flex; align-items:center; justify-content:space-between;
               gap:8px; padding:8px 10px; font-size:11.5px; font-weight:700 }
.tm-bin-bar > * { position:relative; z-index:1 }
.tm-bin-fill { position:absolute; left:0; top:0; bottom:0; z-index:0; width:45%;
               transition:width .8s cubic-bezier(.16,1,.3,1) }
.tm-bin-y { color:var(--tm-yes); background:#096e4a12;
            border:1px solid color-mix(in srgb, var(--tm-yes) 20%, transparent) }
.tm-bin-y .tm-bin-fill { background:#096e4a26 }
.tm-bin-n { color:var(--tm-no); background:#b32b2812;
            border:1px solid color-mix(in srgb, var(--tm-no) 20%, transparent) }
.tm-bin-n .tm-bin-fill { background:#b32b2826 }

/* ── narrower frames ──────────────────────────────────────────────── */
@media (max-width:1279px) { .tm-tab:nth-child(n+6) { display:none } }

@media (max-width:1023px) {
  /* the sidebar collapses to the icon rail the app itself uses */
  .tm-screen  { --tm-crop:clamp(640px,80vw,704px) }
  .tm-overlap { margin-top:-76px; padding-top:var(--section-space) }
  .tm-side { width:50px; padding:14px 7px }
  .tm-side-brand { justify-content:center }
  /* a lockup inteira não cabe em 50px; recortada pela esquerda ela vira
     a marca sozinha, sem precisar de um segundo arquivo */
  .tm-side-logo { width:21px; object-fit:cover; object-position:left center }
  .tm-side-item { justify-content:center; padding:8px 0 }
  .tm-side-item i { display:none }
  .tm-tab:nth-child(n+5) { display:none }
  .tm-main-head, .tm-search-row, .tm-tabs, .tm-feat, .tm-explore, .tm-cols {
    padding-left:16px; padding-right:16px;
  }
  /* na barra reduzida a ícones não cabe rótulo de botão: some o par
     daqui — mas entrar é a ação principal de quem chega, então o Log in
     não pode sumir da tela junto. Ele fica no cabeçalho, ao lado do
     Sign up, que é onde o produto o mostra quando não há barra. */
  .tm-side-burger, .tm-side-auth { display:none }
  /* em 50px não cabe cartão: o rodapé de dinheiro vira o disco do
     depósito, que é o único alvo que o filme precisa ter aqui */
  .tm-surface.is-authed .tm-side-money {
    border:0; box-shadow:none; padding:0; background:none;
    display:flex; justify-content:center;
  }
  .tm-side-money em, .tm-side-money b, .tm-money-wd { display:none }
  .tm-side-money .tm-money-btns { margin-top:0 }
  .tm-money-dep {
    width:34px; height:34px; flex:none; border-radius:50%; padding:0;
    display:grid; place-items:center; font-size:0;
  }
  .tm-money-dep::before { content:'+'; font-size:19px; line-height:1; font-weight:400 }
  .tm-btn-ghost { padding:7px 13px }
}

/* ── phones ───────────────────────────────────────────────────────────
   A phone is portrait, so the screen gets TALLER here rather than
   shorter — that is what buys a market row its full Sim/Não instead of
   slicing it. The order of what survives is deliberate: the brand (the
   claim), then a complete market row (the product), then the Featured
   rail, then search. Nothing is half-shown; whatever does not fit falls
   past the crop and under Quebra 2, same as on desktop.              */
@media (max-width:767px) {
  .tm-stage   { margin-top:30px; padding:0 12px }
  .tm-bezel   { padding:0 7px; border-radius:20px 20px 0 0 }
  .tm-banner-head { padding-inline:8px; gap:10px }
  .tm-screen  { --tm-crop:clamp(568px,152vw,640px); border-radius:12px 12px 0 0 }
  .tm-overlap { margin-top:-62px; padding-top:var(--section-space) }

  .tm-surface { font-size:12px }
  .tm-side { display:none }

  .tm-main-head { padding:11px 14px 9px; gap:7px }
  .tm-main-title { font-size:15.5px }
  .tm-icon-btn { display:none }
  /* sem a barra lateral, a marca precisa estar em algum lugar — e agora
     que ela é uma só, cabe a própria logo em vez de um quadrado de cor */
  .tm-main-head::before {
    content:''; width:19px; height:19px; flex-shrink:0;
    background:url(logo-mark.svg) center/contain no-repeat;
  }
  /* sem barra lateral o cabeçalho é o único lugar onde entrar existe;
     os dois cabem folgados em 360px porque o par de ícones já saiu */
  .tm-btn-ghost { padding:6px 11px; font-size:11.5px }
  .tm-btn-brand { padding:6px 12px; font-size:11.5px }

  .tm-search-row { padding:0 14px 9px }
  .tm-search { padding:8px 11px; font-size:11.5px; border-radius:11px }
  .tm-tabs { gap:15px; padding:0 14px }
  .tm-tab { font-size:11.5px; padding-bottom:8px }
  .tm-tab:nth-child(n+4) { display:none }

  /* one card, and the next one entering the crop on the right — a rail
     has to still read as a rail or the carousel stops being one */
  .tm-feat { padding:12px 0 0 14px; gap:10px }
  /* 138 e não 122: a pergunta quebra em duas linhas nesta largura, e
     122 punha a rosca 2,5px POR CIMA do descendente. 138 devolve ao
     rodapé a mesma folga proporcional que ele tem no desktop. */
  .tm-fcard { width:76%; height:138px; padding:11px 13px; border-radius:14px }
  .tm-fcard-q { font-size:13px; margin-top:8px; max-width:74% }
  .tm-feat-save { width:23px; height:23px; top:9px; right:10px }
  .tm-fcard-cta { padding:6px 14px; font-size:11.5px }
  /* nada de left/right/bottom aqui: o rodapé é relative agora, e esses
     valores viravam deslocamento, jogando a rosca por cima do título.
     O recuo horizontal já vem do padding do card. */
  .tm-fcard-foot { gap:8px }
  .tm-gauge { width:36px; height:36px }
  .tm-gauge i { font-size:10px }
  .tm-fcard-cap { display:none }
  .tm-feat-next { display:none }
  .tm-dots { padding-top:9px }

  .tm-explore { padding:12px 14px 0 }
  .tm-explore-t { font-size:14.5px }
  .tm-explore-n { display:none }

  /* uma coluna no telefone: duas deixariam ~160px por card, que nenhuma
     pergunta de mercado em português sobrevive */
  .tm-cols { padding:9px 14px 0; gap:12px; grid-template-columns:1fr }
  .tm-ev, .tm-bin { padding:10px 11px; gap:8px }
  .tm-ev-q, .tm-bin-q { font-size:12px }
  .tm-card-icon { width:26px; height:26px; border-radius:8px }
  .tm-bin-bars { gap:7px }
  .tm-bin-bar { padding:7px 9px; font-size:11px }
}

/* ═══════════════════════════════════════════════════════════════════
   A JORNADA (Quebra 1) — o mock do herói virou filme
   ═══════════════════════════════════════════════════════════════════
   O quadro mostrava uma tela. Uma tela prova que o produto existe; ela
   não prova que a operação fecha. O que o herói precisa provar é o
   caminho inteiro — entrar, pôr dinheiro, opinar, operar, e ver a
   posição na carteira — porque é isso que o operador está comprando.

   A peça é a mesma ideia da Quebra 4, com uma diferença que muda tudo:
   lá o widget é o objeto e a página é cenário; aqui o APP é o objeto, e
   o que segura a leitura é a moldura ficar de pé entre as cenas. A barra
   lateral, o título do cabeçalho e o saldo não são desenho de cada
   tela: são um só, e mudam de estado conforme o filme anda. É isso que
   faz o olho ler "a pessoa navegou" em vez de "passou um slideshow".

   As telas são as do produto (demo.372.one), no tema claro, incluindo o
   par de assinaturas que ele repete: uma linha azul em itálico por cima
   do título ("Welcome back.", "Your call.", "Your money.") e o rodapé
   de saldo com Deposit/Withdraw. Vetor e tipo, como o resto do mock —
   nenhuma captura de tela.                                          */

/* ── as cenas ──────────────────────────────────────────────────────
   Empilhadas em absoluto e sem `bottom`: a cena mais alta continua
   passando pelo corte do bezel, que é o comportamento que o quadro já
   tinha. Com `inset:0` ela seria cortada na altura do palco e o corte
   deixaria de acontecer na moldura.                                */
/* O palco das cenas rola: no telefone o corte tem ~570px e o que a peça
   precisa mostrar — o painel do atalho, as linhas do livro, a posição na
   carteira — cai abaixo dele.

   Quem rola é a CENA; o palco fica parado e é ele quem recorta. Rolar o
   palco parecia dar no mesmo e não dava: a caixa dele subia junto com o
   conteúdo, levando o próprio recorte, e a cena passava a ser escrita
   por cima do cabeçalho — "Your call." saía em cima de "Binary market".
   Com o recorte numa caixa que não se move, o conteúdo desliza por
   baixo da moldura, que é o que um app faz quando a pessoa arrasta. */
.tm-app-scenes { position:relative; flex:1; min-width:0; overflow:hidden }
.tm-app-scene {
  position:absolute; top:0; left:0; right:0;
  opacity:0; transform:translateX(14px);
  pointer-events:none;
  transition:opacity .34s ease, transform .44s cubic-bezier(.22,1,.28,1);
}
/* a cena no ar troca a curva: aqui `transform` deixa de ser a entrada
   lateral e passa a ser a rolagem, que pede um tempo mais longo */
.tm-app-scene.is-on  { opacity:1; transform:none; position:relative;
                       transition:opacity .34s ease,
                                  transform .62s cubic-bezier(.33,1,.36,1) }
.tm-app-scene.is-out { opacity:0; transform:translateX(-14px) }

/* ── o cabeçalho, agora com estado ────────────────────────────────
   O título troca por cena e ganha uma seta quando a cena é filha de
   outra — é o que o produto faz em "‹ Binary market" e "‹ Profile". */
.tm-main-head .tm-app-back {
  width:26px; height:26px; flex-shrink:0; display:none;
  align-items:center; justify-content:center;
  border:1px solid var(--tm-line); border-radius:50%;
  color:var(--tm-soft); background:var(--tm-surf);
}
.tm-main-head .tm-app-back svg { width:13px; height:13px }
.tm-main-head.has-back .tm-app-back { display:flex }

/* O par Log in/Sign up é de quem não entrou. Depois do login o lugar
   dele é o saldo — e a troca em si é meia prova: a mesma tela serve
   visitante e cliente. */
.tm-app-anon { display:flex; align-items:center; gap:8px }
.tm-surface.is-authed .tm-app-anon { display:none }
.tm-app-bal {
  display:none; align-items:center; gap:8px; flex-shrink:0;
  padding:5px 6px 5px 13px; border-radius:999px;
  background:color-mix(in srgb, var(--brand) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--brand) 26%, #fff);
}
.tm-surface.is-authed .tm-app-bal { display:flex }
/* empilhados: no produto o rótulo fica ACIMA do valor, não ao lado */
.tm-app-bal-txt { display:flex; flex-direction:column; line-height:1.05 }
.tm-app-bal em { font-style:normal; font-size:8px; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--brand); opacity:.85 }
.tm-app-bal b  { font-size:13.5px; font-weight:700; color:var(--tm-ink);
                 font-variant-numeric:tabular-nums }
.tm-app-bal i  { width:21px; height:21px; border-radius:50%; flex-shrink:0;
                 background:var(--brand); color:#fff; font-style:normal;
                 display:grid; place-items:center; font-size:14px; line-height:1 }
/* o saldo pisca quando muda: sem isso o número troca e ninguém vê */
.tm-app-bal.is-bump { animation:tmAppBump .62s cubic-bezier(.22,1,.28,1) }
@keyframes tmAppBump {
  0%   { transform:none }
  30%  { transform:scale(1.07) }
  100% { transform:none }
}

/* ── o rodapé da barra: saldo + as duas ações de dinheiro ─────────
   No produto ele fica colado no pé da barra lateral e é de onde sai o
   depósito. Ocupa o lugar do par Log in/Sign up depois do login.    */
/* O recuo é o que a Quebra 1.5 cobre da base do palco, com folga: sem
   ele o corte caía sobre o Deposit/Withdraw e o cartão aparecia sem as
   duas ações que são a razão de ele existir. */
.tm-side-money { display:none; margin-top:auto; margin-bottom:76px;
                 border:1px solid var(--tm-line); border-radius:14px;
                 padding:12px; background:var(--tm-surf); box-shadow:var(--tm-card-sh) }
.tm-surface.is-authed .tm-side-money { display:block }
.tm-surface.is-authed .tm-side-auth  { display:none }
.tm-side-money em { display:block; font-style:normal; font-size:8.5px;
                    letter-spacing:.14em; text-transform:uppercase;
                    color:var(--tm-faint) }
.tm-side-money b  { display:block; font-size:19px; font-weight:600; margin-top:3px;
                    font-variant-numeric:tabular-nums }
.tm-side-money .tm-money-btns { display:flex; gap:7px; margin-top:10px }
.tm-money-dep, .tm-money-wd {
  flex:1; text-align:center; padding:7px 0; border-radius:999px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.tm-money-dep { background:var(--brand); color:#fff }
.tm-money-wd  { border:1px solid var(--tm-line); color:var(--tm-ink) }

/* ── a barra de baixo, do telefone ───────────────────────────────
   O produto troca a barra lateral por esta no telefone, com o Deposit
   promovido a botão redondo no meio. Ela só existe abaixo de 768px,
   onde a lateral já saía de cena.                                 */
.tm-appbar { display:none }
@media (max-width:767px) {
  /* `~` e nao `+`: as duas barras sao irmas da superficie, e a ordem
     entre elas nao pode decidir qual estado aparece */
  .tm-surface.is-authed ~ .tm-appbar--auth { display:flex }
  .tm-surface:not(.is-authed) ~ .tm-appbar--anon { display:flex }
  .tm-appbar {
    /* bottom:62px, e não 0: a Quebra 2 sobe 62px por cima do palco
       (.tm-overlap) e engolia exatamente a linha dos rótulos. Aqui a
       barra encosta na borda VISÍVEL do corte, que é onde ela precisa
       estar — a barra é moldura, e moldura cortada lê como bug. */
    /* O fundo encosta na base real do palco — a barra bleeda sob a
       página como o resto do quadro — mas o CONTEÚDO sobe os 62px que a
       Quebra 1.5 cobre (.tm-overlap), senão os rótulos ficam escondidos.
       Padding, e não offset: errar por excesso dá folga, errar por falta
       corta a moldura. */
    position:absolute; left:0; right:0; bottom:0; z-index:4;
    align-items:flex-end; justify-content:space-around; gap:2px;
    padding:7px 10px calc(9px + 62px); background:var(--tm-surf);
    border-top:1px solid var(--tm-line);
  }
  .tm-appbar span {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:9px; color:var(--tm-faint);
  }
  .tm-appbar span svg { width:17px; height:17px }
  .tm-appbar span.is-on { color:var(--brand) }
  /* o disco do Deposit sobe acima da barra, como no produto */
  .tm-appbar .tm-appbar-fab { position:relative; top:-14px; gap:2px }
  .tm-appbar .tm-appbar-fab i {
    width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:var(--brand); color:#fff; font-style:normal;
    box-shadow:0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent);
  }
  .tm-appbar .tm-appbar-fab i svg { width:16px; height:16px }
  .tm-appbar .tm-appbar-fab b { font-size:8.5px; font-weight:600; color:var(--brand) }
}

/* ── o portão: login e código ─────────────────────────────────────
   Medido na tela real (demo.372.one/login, tema claro), não estimado:
   cartão de 400px com raio 20 e 24 de padding, campo de 56px com raio
   14, botão 15,5px/800 com raio 15, e a assinatura azul em itálico 800
   de 20px por cima do título. Os números anteriores eram todos meus.

   Duas coisas que eu tinha errado de forma: a barra é TRANSPARENTE (não
   um cabeçalho branco com fio) e os quatro elementos dela — volta,
   marca, nome e tema — andam juntos, centrados como um grupo. E o
   cartão fica no alto, a ~11% da altura, não centrado: eu havia
   centrado para o quadro não parecer vazio, mas o vazio embaixo é o que
   a página realmente tem.                                          */
.tm-gate {
  position:absolute; inset:0; z-index:6;
  background:var(--tm-canvas); color:var(--tm-ink);
  display:flex; flex-direction:column;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.28,1);
}
.tm-gate.is-off { opacity:0; transform:scale(1.015); pointer-events:none }
.tm-gate-bar {
  display:flex; align-items:center; justify-content:center; gap:12px;
  height:64px; flex-shrink:0; padding:0 24px;
}
.tm-gate-bar .tm-gate-back, .tm-gate-bar .tm-gate-theme {
  width:32px; height:32px; flex-shrink:0; display:grid; place-items:center;
  border:1px solid var(--tm-line); border-radius:50%;
  color:var(--tm-soft); background:var(--tm-surf);
}
.tm-gate-bar svg { width:14px; height:14px }
.tm-gate-logo { height:20px; width:auto; display:block }
.tm-gate-body { flex:1; display:flex; justify-content:center; padding:33px 18px 0 }
.tm-gate-col  { width:100%; max-width:400px; align-self:flex-start }
.tm-gate-card {
  width:100%; background:var(--tm-surf);
  border-radius:20px; padding:24px;
  box-shadow:0 0 0 1px #0000001f, 0 1px 2px #1018280f, 0 8px 24px -12px #10182824;
}
/* a assinatura do produto: linha azul em itálico por cima do título */
.tm-kicker { display:block; font-style:italic; font-weight:800;
             font-size:20px; line-height:1.08; color:var(--brand) }
.tm-gate-card h4 { font-size:20px; font-weight:800; line-height:1.08; color:#0b0d12 }
.tm-gate-card p  { font-size:13px; line-height:1.62; color:var(--tm-soft); margin-top:8px }
.tm-gate-card p b { color:var(--tm-ink); font-weight:600 }
.tm-gate-lbl { display:block; font-size:12.5px; font-weight:600;
               color:var(--tm-soft); margin:18px 0 7px }
.tm-gate-btn {
  display:block; width:100%; text-align:center; margin-top:14px;
  padding:15px 0; border-radius:15px; background:var(--brand); color:#f6f7f9;
  font-size:15.5px; font-weight:800; line-height:1.1;
}
.tm-gate-btn.is-off { background:color-mix(in srgb, var(--brand) 42%, #fff) }
.tm-gate-foot { text-align:center; font-size:12.5px; color:var(--tm-soft); margin-top:20px }
.tm-gate-foot b { color:var(--tm-ink); font-weight:700; text-decoration:underline }
.tm-gate-legal { text-align:center; font-size:11px; color:var(--tm-faint); margin-top:16px }
.tm-gate-legal b { color:var(--tm-faint); font-weight:400; text-decoration:underline }
/* as seis casas do código, na mesma métrica do campo de e-mail */
.tm-gate-code { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:16px }
.tm-gate-code i {
  height:52px; border:.8px solid #00000033; border-radius:14px;
  background:#00000008; display:grid; place-items:center;
  font-style:normal; font-size:18px; font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s ease, background .2s ease, box-shadow .3s ease;
}
.tm-gate-code i.is-in { border-color:var(--brand);
                        background:color-mix(in srgb, var(--brand) 8%, #fff);
                        box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
                        animation:tmAppPop .34s cubic-bezier(.3,1.5,.5,1) }
@keyframes tmAppPop { 0% { transform:scale(.84) } 100% { transform:scale(1) } }

/* o campo digitado, compartilhado pelo portão e pelas folhas */
.tm-inp {
  display:flex; align-items:center; height:56px; padding:0 16px;
  border:.8px solid #00000033; border-radius:14px;
  background:#00000008; font-size:15px; color:var(--tm-ink);
  transition:border-color .25s ease, box-shadow .3s ease, background .25s ease;
}
.tm-inp.is-focus { border-color:var(--brand); background:var(--tm-surf);
                   box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent) }
.tm-inp .tm-ph   { color:#a3a9b4 }
.tm-inp.is-amount { font-size:17px; font-weight:600;
                    font-variant-numeric:tabular-nums }
.tm-inp .tm-cur  { color:var(--tm-soft); margin-right:5px }
.tm-caret { width:1.5px; height:16px; background:var(--brand); margin-left:1px; opacity:0 }
.tm-inp.is-focus .tm-caret { animation:tmAppCaret 1.05s steps(1) infinite }
@keyframes tmAppCaret { 0%,50% { opacity:1 } 50.01%,100% { opacity:0 } }

/* ── a folha: depósito e ordem ────────────────────────────────────
   Um só componente para os dois, porque o produto usa o mesmo: cartão
   centrado sobre a tela escurecida. No telefone ele sobe pela base,
   também como no produto.                                          */
.tm-sheet-wrap {
  position:absolute; inset:0; z-index:5; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:#10182800; pointer-events:none;
  transition:background .34s ease;
}
.tm-sheet-wrap.is-on { background:#1018285c; pointer-events:auto }
.tm-sheet {
  width:100%; max-width:392px; background:var(--tm-surf);
  border-radius:16px; padding:22px; box-shadow:0 30px 70px -24px #10182859;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .3s ease, transform .42s cubic-bezier(.22,1,.28,1);
}
.tm-sheet-wrap.is-on .tm-sheet { opacity:1; transform:none }
.tm-sheet-head { display:flex; align-items:flex-start; gap:10px }
.tm-sheet-head h4 { font-size:17px; font-weight:700; line-height:1.25 }
.tm-sheet-head .tm-sheet-x { margin-left:auto; color:var(--tm-faint); flex-shrink:0 }
.tm-sheet-head .tm-sheet-x svg { width:14px; height:14px }
.tm-sheet-sub { font-size:11.5px; color:var(--tm-soft); margin-top:4px }
.tm-sheet-sub b { color:var(--tm-ink); font-weight:600 }
.tm-sheet-lbl { display:block; font-size:11.5px; font-weight:600; margin:15px 0 6px }
.tm-sheet-note { font-size:10.5px; color:var(--tm-faint); margin-top:6px }
/* ── o depósito é um endereço, não um valor ────────────────────────
   Conferido no site logado. Não há campo de quantia nem fichas: o
   produto entrega QR + address USDC na Polygon, avisa que outra rede é
   irrecuperável, e credita sozinho quando a transferência chega.    */
.tm-qr { width:132px; height:132px; margin:14px auto 0; padding:7px;
         background:#fff; border:1px solid var(--tm-line); border-radius:10px }
.tm-qr svg { display:block; width:100%; height:100% }
.tm-addr { display:flex; align-items:center; gap:9px;
           border:.8px solid #00000033; border-radius:12px; padding:11px 13px;
           background:#00000008 }
.tm-addr span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
                white-space:nowrap; font-size:11px; color:var(--tm-ink);
                font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.tm-addr i { flex-shrink:0; color:var(--tm-faint) }
.tm-addr i svg { width:14px; height:14px; display:block }
/* o aviso de rede, em âmbar como no produto */
.tm-sheet-warn { display:flex; gap:9px; margin-top:13px; padding:11px 13px;
                 border-radius:11px; background:#fdf6e8; color:#8a6d31;
                 font-size:11px; line-height:1.5 }
.tm-sheet-warn svg { width:14px; height:14px; flex-shrink:0; margin-top:1px }
.tm-sheet-warn b { color:#6f5622; font-weight:700 }
/* o status: espera, e vira crédito sozinho */
.tm-dep-status { margin-top:10px; padding:11px 13px; border-radius:11px;
                 background:var(--tm-surf-2) }
.tm-dep-status b { display:flex; align-items:center; gap:7px;
                   font-size:12px; font-weight:700 }
.tm-dep-status .ds-dot { width:6px; height:6px; background:#c99a2e;
                         animation:pulse 1.8s ease-in-out infinite }
.tm-dep-status em { display:block; font-style:normal; margin-top:3px;
                    font-size:10.5px; color:var(--tm-soft) }
.tm-dep-status.is-ok { background:color-mix(in srgb, var(--tm-yes) 9%, #fff) }
.tm-dep-status.is-ok b { color:var(--tm-yes) }
.tm-dep-status.is-ok .ds-dot { background:var(--tm-yes); animation:none }
.tm-dep-foot { text-align:center; margin-top:11px }

/* as fichas de valor: $10 · $50 · $100 */
.tm-chips { display:flex; gap:7px; margin-top:9px }
.tm-chips span {
  flex:1; text-align:center; padding:8px 0; border-radius:10px;
  border:1px solid var(--tm-line); background:var(--tm-surf);
  font-size:12px; font-weight:600;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.tm-chips span.is-on { border-color:var(--brand); color:var(--brand);
                       background:color-mix(in srgb, var(--brand) 9%, #fff) }
/* os pares de alternância: Buy|Sell, Yes|No, Market|Limit */
.tm-seg { display:flex; gap:7px; margin-top:8px }
.tm-seg span {
  flex:1; text-align:center; padding:8px 0; border-radius:9px;
  background:var(--tm-surf-2); font-size:12px; font-weight:600; color:var(--tm-soft);
}
.tm-seg span.is-on { background:color-mix(in srgb, var(--brand) 13%, #fff);
                     color:var(--brand); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 34%, #fff) }
.tm-seg-row { display:flex; align-items:center; gap:10px; margin-top:12px }
.tm-seg-row > em { font-style:normal; font-size:11.5px; font-weight:600; flex-shrink:0 }
.tm-seg-row .tm-seg { margin-top:0; flex:1; max-width:172px; margin-left:auto }
.tm-sheet-btn {
  display:block; width:100%; text-align:center; margin-top:16px;
  padding:12px 0; border-radius:10px; background:var(--brand); color:#fff;
  font-size:13.5px; font-weight:700;
  transition:background .25s ease, color .25s ease;
}
.tm-sheet-btn.is-off { background:color-mix(in srgb, var(--brand) 42%, #fff) }
.tm-sheet-cash {
  display:flex; align-items:center; gap:10px; margin-top:11px;
  border:1px solid var(--tm-line); border-radius:999px; padding:6px 6px 6px 14px;
  font-size:11.5px; color:var(--tm-soft);
}
.tm-sheet-cash b { color:var(--tm-ink); font-weight:600 }
.tm-sheet-cash i { margin-left:auto; font-style:normal; padding:6px 13px;
                   border-radius:999px; background:color-mix(in srgb, var(--brand) 13%, #fff);
                   color:var(--brand); font-weight:700 }
/* cinza, e não azul: no produto esta linha é nota de rodapé, não link */
.tm-sheet-ioc { font-size:10px; color:var(--tm-faint); text-align:center; margin-top:9px }
.tm-sheet-note .tm-mult { font-style:normal; margin-left:5px; padding:2px 7px;
                          border-radius:6px; font-size:10.5px; font-weight:700;
                          background:color-mix(in srgb, var(--brand) 12%, #fff);
                          color:var(--brand) }
.tm-sheet-rule { height:1px; background:var(--tm-line); margin:16px -22px 0 }
/* o fecho: ordem executada */
.tm-sheet-ok { text-align:center; padding:6px 0 2px }
.tm-sheet-ok .tm-ok-tick {
  width:46px; height:46px; border-radius:50%; margin:0 auto 12px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--tm-yes) 12%, #fff); color:var(--tm-yes);
  animation:tmAppPop .5s cubic-bezier(.3,1.5,.5,1);
}
.tm-sheet-ok .tm-ok-tick svg { width:21px; height:21px }
.tm-sheet-ok h4 { font-size:17px; font-weight:700 }
.tm-sheet-ok p  { font-size:12px; color:var(--tm-soft); margin-top:5px }

@media (max-width:767px) {
  .tm-sheet-wrap { align-items:flex-end; padding:0 0 62px }
  .tm-sheet { max-width:none; border-radius:18px 18px 0 0; padding:18px 16px 22px }
  .tm-sheet-wrap.is-on .tm-sheet { transform:none }
  .tm-sheet::before { content:''; display:block; width:38px; height:4px;
                      border-radius:99px; background:var(--tm-line); margin:0 auto 13px }
}

/* ── o quick trade: a contracapa do card ──────────────────────────
   No produto tocar no Yes GIRA o card: ele rotaciona no eixo Y com
   perspectiva e o painel de valores está do outro lado, na mesma vaga e
   na mesma largura. Duas coisas que eu tinha errado:

   · o painel era um elemento solto, posicionado por medição sobre a
     superfície — então ele flutuava POR CIMA do card de baixo em vez de
     trocar de lugar com o seu próprio card. Agora ele mora dentro do
     card, como contracapa, e a coluna reflui como deve;
   · não havia giro nenhum, era um fade.

   A troca de quem está no fluxo acontece no meio do giro, com o card de
   perfil — é o instante em que nada está visível, e é por isso que a
   mudança de altura entre frente e contracapa não aparece.          */
.tm-flip { perspective:1000px }
.tm-flip-in { position:relative; transform-style:preserve-3d;
              transition:transform .54s cubic-bezier(.4,0,.2,1) }
.tm-flip.is-flipped .tm-flip-in { transform:rotateY(180deg) }
.tm-flip-face, .tm-qt { backface-visibility:hidden }
/* de saída a frente dita a altura e a contracapa fica sobreposta */
.tm-qt { position:absolute; inset:0; transform:rotateY(180deg) }
/* virado, os papéis se invertem: a contracapa passa a ditar a altura */
.tm-flip.is-back .tm-flip-face { position:absolute; inset:0 }
.tm-flip.is-back .tm-qt { position:relative; inset:auto }

.tm-qt {
  /* branco, como no site: eu tinha posto o cinza --tm-surf-2 pelo nome da
     classe que li no DOM, mas na tela o painel e branco e quem e cinza e
     o campo de valor. Trocado, o painel parava de parecer desabilitado. */
  z-index:2; background:var(--tm-surf);
  border:1px solid var(--tm-line); border-radius:14px; padding:13px;
}
.tm-qt-head { display:flex; align-items:flex-start; gap:9px }
.tm-qt-q { font-size:12.5px; font-weight:600; line-height:1.35 }
.tm-qt-x { margin-left:auto; color:var(--tm-faint); flex-shrink:0 }
.tm-qt-x svg { width:12px; height:12px }
.tm-qt-row { display:flex; align-items:center; gap:7px; margin-top:11px }
.tm-qt-side {
  flex-shrink:0; padding:8px 11px; border-radius:9px; font-size:12px; font-weight:600;
  background:color-mix(in srgb, var(--tm-yes) 11%, #fff); color:var(--tm-yes);
}
/* O campo do atalho e branco com borda visivel, e o valor vem em NEGRITO
   escuro. O meu herdava o .tm-inp do portao — fundo cinza, texto normal —
   e o numero, que e a unica coisa editavel do painel, lia como desligado. */
.tm-qt-amt { flex:1; min-width:0; height:42px; padding:0 13px;
             background:var(--tm-surf); border-color:#00000026 }
.tm-qt-amt .tm-typed { font-weight:700; color:var(--tm-ink) }
.tm-qt-amt .tm-cur { color:var(--tm-soft); font-weight:400 }
.tm-qt-adds { display:flex; gap:5px; flex-shrink:0 }
.tm-qt-adds span {
  padding:7px 8px; border-radius:8px; font-size:11px; font-weight:600;
  background:color-mix(in srgb, var(--brand) 11%, #fff); color:var(--brand);
  transition:transform .18s cubic-bezier(.22,1,.28,1);
}
.tm-qt-adds span.is-press { transform:scale(.9) }
/* o trilho do valor */
.tm-qt-slider { position:relative; height:4px; border-radius:99px;
                background:#00000014; margin:13px 0 9px }
.tm-qt-slider i { position:absolute; left:0; top:0; bottom:0; border-radius:99px;
                  background:var(--brand); width:10%;
                  transition:width .5s cubic-bezier(.22,1,.28,1) }
.tm-qt-slider b { position:absolute; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
                  border-radius:50%; background:var(--brand); left:10%;
                  box-shadow:0 1px 4px #10182833;
                  transition:left .5s cubic-bezier(.22,1,.28,1) }
.tm-qt-meta { display:flex; justify-content:space-between; gap:10px; font-size:10.5px;
              color:var(--tm-faint) }
/* a linha inteira do retorno e verde e negrito, nao so o numero */
.tm-qt-meta > span:last-child { color:var(--tm-yes); font-weight:700 }
.tm-qt-meta b { color:var(--tm-yes); font-weight:700 }
.tm-qt-btns { display:flex; gap:7px; margin-top:11px }
.tm-qt-btns span {
  flex:1; text-align:center; padding:9px 0; border-radius:9px;
  font-size:12px; font-weight:600;
  transition:background .25s ease, color .25s ease;
}
.tm-qt-cancel  { border:1px solid var(--tm-line); color:var(--tm-ink) }
.tm-qt-confirm { background:var(--brand); color:#fff }
/* estado final: o painel vira recibo */
.tm-qt-done { display:none; align-items:center; gap:9px; font-size:12px; font-weight:600 }
.tm-qt-done i { width:24px; height:24px; border-radius:50%; flex-shrink:0;
                display:grid; place-items:center; font-style:normal;
                background:color-mix(in srgb, var(--tm-yes) 12%, #fff); color:var(--tm-yes) }
.tm-qt-done i svg { width:12px; height:12px }
.tm-qt-done em { font-style:normal; margin-left:auto; color:var(--tm-faint); font-weight:400;
                 font-size:10.5px }
.tm-qt.is-done .tm-qt-head, .tm-qt.is-done .tm-qt-row,
.tm-qt.is-done .tm-qt-slider, .tm-qt.is-done .tm-qt-meta,
.tm-qt.is-done .tm-qt-btns { display:none }
.tm-qt.is-done .tm-qt-done { display:flex }

@media (max-width:767px) {
  .tm-qt-adds span { padding:7px 7px }

  /* No login o grupo NAO e centrado como no desktop: volta e marca a
     esquerda, o tema empurrado para a direita. */
  .tm-gate-bar { justify-content:flex-start }
  .tm-gate-bar .tm-gate-theme { margin-left:auto }

  /* O cartao "Place an order" nao existe no telefone: quem faz o papel
     dele e a .tm-ev2-mobbar, irma da tab bar. */
  .tm-ev2-rail { display:none }
  .tm-screen[data-scene="event"] .tm-ev2-mobbar { display:flex }
}

/* ── a cena do evento ─────────────────────────────────────────────
   O mercado binário aberto: pergunta, preço, gráfico, livro e a rampa
   de vida do mercado. O trilho da direita é onde a ordem nasce.     */
.tm-ev2 { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px;
          padding:14px 22px 0 }
.tm-ev2-t { display:flex; align-items:flex-start; gap:11px }
.tm-ev2-t .tm-card-icon { flex-shrink:0 }
.tm-ev2-h { font-size:17px; font-weight:700; line-height:1.25 }
.tm-ev2-meta { display:flex; align-items:center; gap:7px; font-size:10px;
               color:var(--tm-faint); margin-top:5px }
.tm-ev2-meta .ds-dot { width:5px; height:5px; background:#c0553f }
.tm-ev2-meta em { font-style:normal; letter-spacing:.1em; text-transform:uppercase;
                  color:#c0553f; font-weight:600 }
.tm-ev2-card { background:var(--tm-surf); border:1px solid var(--tm-line);
               border-radius:13px; padding:15px; box-shadow:var(--tm-card-sh);
               margin-top:12px }
.tm-ev2-px { display:flex; align-items:center; gap:9px }
.tm-ev2-px strong { font-size:31px; font-weight:700; line-height:1;
                    font-variant-numeric:tabular-nums }
.tm-ev2-mult { padding:3px 8px; border-radius:7px; font-size:11px; font-weight:600;
               background:color-mix(in srgb, var(--brand) 12%, #fff); color:var(--brand) }
.tm-ev2-chips { margin-left:auto; display:flex; gap:7px }
.tm-ev2-chips span { padding:5px 10px; border-radius:8px; font-size:10.5px;
                     border:1px solid var(--tm-line); color:var(--tm-soft) }
.tm-ev2-chips b { color:var(--tm-ink); font-weight:600 }
.tm-ev2-sub { font-size:10.5px; color:var(--tm-faint); margin-top:5px }
/* as três abas do cartão */
.tm-ev2-tabs { display:flex; gap:7px; margin-top:12px; background:var(--tm-surf-2);
               border-radius:10px; padding:3px }
.tm-ev2-tabs span { flex:1; text-align:center; padding:7px 0; border-radius:8px;
                    font-size:11.5px; font-weight:600; color:var(--tm-soft);
                    transition:background .25s ease, color .25s ease }
.tm-ev2-tabs span.is-on { background:color-mix(in srgb, var(--brand) 13%, #fff);
                          color:var(--brand) }
/* o gráfico e o livro dividem o mesmo palco: um por vez */
.tm-ev2-panel { position:relative; margin-top:11px; min-height:150px }
.tm-ev2-view { position:absolute; inset:0; opacity:0; pointer-events:none;
               transition:opacity .3s ease }
.tm-ev2-view.is-on { opacity:1; position:relative }
.tm-ev2-chart { position:relative }
.tm-ev2-chart svg { display:block; width:100%; height:126px; overflow:visible }
/* `non-scaling-stroke` e o que salva este grafico. O SVG desenha num
   viewBox de 320 e e esticado ate a largura do painel — quase 2,5x no
   eixo x e 1x no y. Sem isso a ESPESSURA estica junto: trecho vertical
   sai com 5px de largura, trecho horizontal com 2, e uma serie cheia de
   degraus vira um borrao. Com isso a espessura e medida em pixel de
   tela, e 1,75px e 1,75px em qualquer direcao. */
.tm-ev2-chart .tm-ev2-line { fill:none; stroke:var(--brand); stroke-width:1.75;
                             vector-effect:non-scaling-stroke;
                             stroke-linecap:round; stroke-linejoin:round }
/* A linha se desenhava por tracejado — dasharray 1 1 sobre pathLength 1,
   o offset descendo de 1 a 0. Com `non-scaling-stroke` isso deixa de
   funcionar: o tracejado passa a ser medido em pixel de tela, e 1px de
   risco com 1px de vao devolve uma linha pontilhada em vez de uma linha
   crescendo. As duas coisas nao convivem.

   Quem desenha agora e uma cortina sobre o SVG inteiro. Sai mais barato
   (uma propriedade, sem tocar na geometria), independe da espessura, e
   revela linha e area juntas — que e como grafico de verdade aparece. */
.tm-ev2-chart svg { clip-path:inset(0 100% 0 0) }
.tm-ev2-chart.is-drawn svg { clip-path:inset(0 0 0 0);
                             transition:clip-path 1.5s cubic-bezier(.4,0,.3,1) }
.tm-ev2-chart .tm-ev2-fill { fill:color-mix(in srgb, var(--brand) 11%, transparent);
                             opacity:0; transition:opacity .7s ease .5s }
.tm-ev2-chart.is-drawn .tm-ev2-fill { opacity:1 }
/* a grade pelo mesmo motivo: esticado, o tracejado de 3/4 virava 7/10 e
   a grade competia com a linha em vez de ficar atras dela */
.tm-ev2-chart .tm-ev2-grid { stroke:var(--tm-line); stroke-width:1;
                             vector-effect:non-scaling-stroke;
                             stroke-dasharray:2 5 }
.tm-ev2-chart .tm-ev2-dot  { position:absolute; left:var(--dot-x); top:var(--dot-y);
                             width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
                             border-radius:50%; background:var(--brand);
                             box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
                             opacity:0; transition:opacity .3s ease 1.4s }
.tm-ev2-chart.is-drawn .tm-ev2-dot { opacity:1 }
.tm-ev2-xs { display:flex; justify-content:space-between; font-size:9px;
             color:var(--tm-faint); margin-top:4px }
/* o preço corrente mora na ponta da linha, não numa legenda: é assim no
   site, e é o que faz o gráfico ler como leitura e não como enfeite */
.tm-ev2-now { position:absolute; right:-2px; top:var(--tm-now-y,8px); line-height:1.15;
              font-size:9.5px; font-weight:700; color:var(--brand); text-align:left }
.tm-ev2-now b { display:block; font-size:11px }
.tm-ev2-ranges { display:flex; gap:6px; justify-content:center; margin-top:9px }
.tm-ev2-ranges span { padding:4px 10px; border-radius:999px; font-size:10px;
                      font-weight:600; color:var(--tm-soft); background:var(--tm-surf-2) }
.tm-ev2-ranges span.is-on { background:var(--brand); color:#fff }
/* o livro de ofertas — conferido no site, e eu tinha errado três coisas:
   faltava a fileira de rótulos Price/Shares/Total, faltava o lado da
   compra (o livro tem os dois) e a barra de profundidade cresce da
   ESQUERDA, proporcional ao total acumulado. A minha crescia da
   direita, o que invertia a leitura do livro.                      */
.tm-ev2-book-h { font-size:10.5px; color:var(--tm-soft) }
.tm-ev2-book-h b { color:var(--tm-ink); font-weight:600 }
.tm-ev2-book-seg { display:flex; gap:7px; margin:9px 0 }
.tm-ev2-book-seg span { flex:1; text-align:center; padding:7px 0; border-radius:9px;
                        font-size:11.5px; font-weight:600 }
.tm-ev2-book-seg .is-yes { background:color-mix(in srgb, var(--tm-yes) 10%, #fff);
                           color:var(--tm-yes) }
.tm-ev2-book-seg .is-no  { border:1px solid var(--tm-line); color:var(--tm-soft) }
.tm-ev2-book { border:1px solid var(--tm-line); border-radius:11px; overflow:hidden }
.tm-ev2-book-t { display:flex; align-items:center; gap:7px; padding:8px 11px;
                 font-size:10.5px; font-weight:600;
                 background:color-mix(in srgb, var(--tm-no) 7%, #fff); color:var(--tm-no) }
.tm-ev2-book-t.is-bid { background:color-mix(in srgb, var(--tm-yes) 8%, #fff);
                        color:var(--tm-yes) }
.tm-ev2-book-t .ds-dot { width:5px; height:5px; background:currentColor }
/* o chevron de recolher, que o site tem em cada banda */
.tm-ev2-book-cv { margin-left:auto; width:7px; height:7px; flex-shrink:0;
                  border-left:1.5px solid currentColor; border-top:1.5px solid currentColor;
                  transform:rotate(45deg) }
/* As tres colunas — Price, Shares, Total — sao :nth-of-type e nao
   :nth-child de proposito. A barra de profundidade e um <i> e ele conta
   como primeiro FILHO da linha: com :nth-child a largura do preco caia
   em nada e a das cotas ia para o span errado, o que colava $0.45 em
   4 shares num unico bloco. Contando por TIPO, o <i> sai da conta. */
.tm-ev2-book-hd { display:flex; padding:6px 11px; font-size:9.5px; color:var(--tm-faint);
                  border-top:1px solid var(--tm-line); background:#00000005 }
.tm-ev2-book-r { position:relative; display:flex; align-items:center;
                 padding:6px 11px; font-size:10.5px;
                 border-top:1px solid var(--tm-line);
                 font-variant-numeric:tabular-nums }
.tm-ev2-book-r i { position:absolute; left:0; top:0; bottom:0;
                   background:color-mix(in srgb, var(--tm-no) 9%, transparent) }
.tm-ev2-book-r.is-bid i { background:color-mix(in srgb, var(--tm-yes) 10%, transparent) }
.tm-ev2-book-r span { position:relative; z-index:1 }
/* uma grade so para o cabecalho e para as linhas */
.tm-ev2-book-hd span:nth-of-type(1),
.tm-ev2-book-r  span:nth-of-type(1) { width:34%; flex:none }
.tm-ev2-book-hd span:nth-of-type(2),
.tm-ev2-book-r  span:nth-of-type(2) { width:34%; flex:none }
.tm-ev2-book-hd span:nth-of-type(3),
.tm-ev2-book-r  span:nth-of-type(3) { margin-left:auto; text-align:right }
.tm-ev2-book-r span:nth-of-type(1) { color:var(--tm-no); font-weight:700 }
.tm-ev2-book-r.is-bid span:nth-of-type(1) { color:var(--tm-yes) }
.tm-ev2-book-r span:nth-of-type(2) { color:var(--tm-soft) }
.tm-ev2-book-r span:nth-of-type(3) { color:var(--tm-ink) }
.tm-ev2-book-sp { padding:6px 11px; font-size:9.5px; color:var(--tm-faint);
                  border-top:1px solid var(--tm-line); background:var(--tm-surf-2) }
/* a rampa: o que ainda vai acontecer com este mercado */
.tm-ev2-tl { margin-top:12px; background:var(--tm-surf); border:1px solid var(--tm-line);
             border-radius:13px; padding:15px; box-shadow:var(--tm-card-sh) }
.tm-ev2-tl h5 { font-size:14px; font-weight:700 }
.tm-ev2-tl div { display:flex; gap:10px; margin-top:11px; font-size:11px }
/* anéis vazados e sem fio entre eles: o site não desenha o conector, e
   o meu fio fazia a rampa ler como progresso já andado */
.tm-ev2-tl div i { flex-shrink:0; width:10px; height:10px; border-radius:50%; margin-top:3px;
                   border:1.5px solid #00000029; background:var(--tm-surf) }
.tm-ev2-tl div:first-of-type i { border-color:var(--brand); background:var(--brand) }
.tm-ev2-tl b { display:block; font-weight:600 }
.tm-ev2-tl em { font-style:normal; color:var(--tm-faint); font-size:10.5px }
/* o trilho da direita: onde a ordem nasce */
.tm-ev2-rail { background:var(--tm-surf); border:1px solid var(--tm-line);
               border-radius:13px; padding:15px; box-shadow:var(--tm-card-sh);
               align-self:start }
.tm-ev2-rail h5 { font-size:14.5px; font-weight:700 }
.tm-ev2-rail > p { font-size:10.5px; color:var(--tm-faint); margin-top:4px }
/* O rótulo senta num bloco mais fundo, ocupando o terço da esquerda —
   detalhe do site que eu tinha achatado num texto solto. */
.tm-ev2-side {
  position:relative; display:flex; align-items:center; gap:10px; margin-top:10px;
  border-radius:11px; font-weight:700; overflow:hidden;
  transition:box-shadow .25s ease, transform .2s cubic-bezier(.22,1,.28,1);
}
.tm-ev2-side strong { padding:11px 0; width:34%; text-align:center; flex-shrink:0 }
.tm-ev2-side.is-yes strong { background:color-mix(in srgb, var(--tm-yes) 13%, transparent) }
.tm-ev2-side.is-no  strong { background:color-mix(in srgb, var(--tm-no) 11%, transparent) }
.tm-ev2-side u { padding-right:13px }
.tm-ev2-side.is-yes { background:color-mix(in srgb, var(--tm-yes) 10%, #fff);
                      color:var(--tm-yes) }
.tm-ev2-side.is-no  { background:color-mix(in srgb, var(--tm-no) 8%, #fff);
                      color:var(--tm-no) }
.tm-ev2-side u { margin-left:auto; text-align:right; text-decoration:none }
.tm-ev2-side strong { font-size:13.5px }
.tm-ev2-side u b  { display:block; font-size:12.5px; font-variant-numeric:tabular-nums }
/* a seta é SVG: o subset latin das fontes não traz U+2192, e a do sistema
   destoava no meio do número */
.tm-ev2-arr { display:inline-block; width:.85em; height:.85em; vertical-align:-.1em; margin:0 1px }
.tm-ev2-side u em { font-style:normal; display:block; font-size:8.5px;
                    letter-spacing:.1em; text-transform:uppercase; opacity:.72;
                    font-weight:600 }
.tm-ev2-side.is-press { transform:scale(.985) }
.tm-ev2-facts { margin-top:13px; border-top:1px solid var(--tm-line) }
.tm-ev2-facts div { display:flex; justify-content:space-between; gap:12px;
                    padding:8px 0; font-size:11px; border-bottom:1px solid var(--tm-line) }
.tm-ev2-facts div:last-child { border-bottom:0 }
.tm-ev2-facts em { font-style:normal; color:var(--tm-soft) }
.tm-ev2-facts b  { font-weight:600 }
.tm-ev2-hint { display:flex; gap:8px; margin-top:12px; padding:10px 12px;
               border-radius:10px; font-size:10px; line-height:1.5;
               background:color-mix(in srgb, var(--brand) 8%, #fff); color:var(--brand) }
.tm-ev2-hint svg { width:12px; height:12px; flex-shrink:0; margin-top:1px }

@media (max-width:1023px) {
  .tm-ev2 { grid-template-columns:minmax(0,1fr) 250px; gap:13px; padding:12px 16px 0 }
  .tm-ev2-tl { display:none }
}
@media (max-width:767px) {
  /* no telefone o produto empilha, e o trilho da ordem vem primeiro:
     é a ação, e a ação não espera o gráfico rolar */
  .tm-ev2 { grid-template-columns:1fr; padding:11px 14px 0 }
  .tm-ev2-rail { order:-1 }
  .tm-ev2-h { font-size:15px }
  .tm-ev2-px strong { font-size:26px }
  /* Spread e Liquidity descem para uma linha propria em vez de sumir:
     eles sao a leitura de liquidez do mercado, e eu os escondia. */
  .tm-ev2-px { flex-wrap:wrap }
  .tm-ev2-chips { margin-left:0; width:100%; margin-top:9px }
}

/* ── os lados, no telefone ──────────────────────────────────────── */
.tm-ev2-mobbar { display:none; position:absolute; left:0; right:0; z-index:3;
                 gap:8px; padding:10px 14px;
                 /* 62px que a Quebra 1.5 cobre + a altura da tab bar */
                 bottom:calc(62px + 76px) }
.tm-ev2-mobbar .tm-ev2-side { flex:1; margin-top:0; padding:0;
                              box-shadow:0 8px 22px -12px #1018284d }
.tm-ev2-mobbar .tm-ev2-side strong { width:auto; flex:none; background:none;
                                     padding:12px 0 12px 13px }
.tm-ev2-px2 { margin-left:auto; padding-right:13px; font-style:normal;
              font-weight:700; font-variant-numeric:tabular-nums }

/* ── a cena do perfil ────────────────────────────────────────────── */
.tm-prof { max-width:520px; margin:0 auto; padding:16px 22px 0 }
.tm-prof-card { display:flex; align-items:center; gap:13px;
                background:var(--tm-surf); border:1px solid var(--tm-line);
                border-radius:13px; padding:15px; box-shadow:var(--tm-card-sh) }
.tm-prof-av { width:46px; height:46px; border-radius:50%; flex-shrink:0;
              display:grid; place-items:center; font-size:14px; font-weight:700;
              background:color-mix(in srgb, var(--brand) 13%, #fff); color:var(--brand) }
.tm-prof-mail { font-size:11.5px; color:var(--tm-soft) }
.tm-prof-since { font-size:11px; color:var(--tm-faint); margin-top:1px }
.tm-prof-vf { display:inline-flex; align-items:center; gap:5px; margin-top:6px;
              padding:4px 9px; border-radius:999px; font-size:10px; font-weight:600;
              background:color-mix(in srgb, var(--brand) 11%, #fff); color:var(--brand) }
.tm-prof-vf svg { width:10px; height:10px }
.tm-prof-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:11px }
.tm-prof-stats div { background:var(--tm-surf); border:1px solid var(--tm-line);
                     border-radius:12px; padding:13px 0; text-align:center;
                     box-shadow:var(--tm-card-sh) }
.tm-prof-stats b { display:block; font-size:19px; font-weight:700;
                   font-variant-numeric:tabular-nums }
.tm-prof-stats em { font-style:normal; font-size:10.5px; color:var(--tm-soft) }
.tm-prof-list { margin-top:11px; background:var(--tm-surf); border:1px solid var(--tm-line);
                border-radius:13px; overflow:hidden; box-shadow:var(--tm-card-sh) }
.tm-prof-list div { display:flex; align-items:center; gap:11px; padding:12px 15px;
                    border-bottom:1px solid var(--tm-line) }
.tm-prof-list div:last-child { border-bottom:0 }
.tm-prof-ic { width:28px; height:28px; border-radius:9px; flex-shrink:0;
              display:grid; place-items:center;
              background:color-mix(in srgb, var(--brand) 10%, #fff); color:var(--brand) }
.tm-prof-ic svg { width:14px; height:14px }
.tm-prof-list b { display:block; font-size:12px; font-weight:600 }
.tm-prof-list em { font-style:normal; display:block; font-size:10.5px; color:var(--tm-soft) }
.tm-prof-list .tm-prof-arw { margin-left:auto; color:var(--tm-faint); flex-shrink:0 }
.tm-prof-list .tm-prof-arw svg { width:12px; height:12px }
/* borda neutra, não vermelha: no produto só o texto e o ícone são
   vermelhos — a caixa é um cartão como os de cima */
.tm-prof-out { display:flex; align-items:center; justify-content:center; gap:8px;
               margin-top:11px; padding:13px 0;
               background:var(--tm-surf); border:1px solid var(--tm-line);
               border-radius:13px; color:var(--tm-no); font-size:12.5px; font-weight:700;
               box-shadow:var(--tm-card-sh) }
.tm-prof-out svg { width:14px; height:14px; flex-shrink:0 }

/* ── a cena da carteira ──────────────────────────────────────────── */
.tm-pf { padding:16px 22px 0 }
.tm-pf-bal { background:var(--tm-surf); border:1px solid var(--tm-line);
             border-radius:13px; padding:16px; margin-top:12px;
             box-shadow:var(--tm-card-sh); display:flex; align-items:flex-start; gap:16px }
.tm-pf-bal em { display:block; font-style:normal; font-size:8.5px; letter-spacing:.14em;
                text-transform:uppercase; color:var(--tm-faint) }
.tm-pf-bal strong { display:block; font-size:27px; font-weight:700; margin-top:3px;
                    font-variant-numeric:tabular-nums }
.tm-pf-bal .tm-pf-sub { font-size:10.5px; color:var(--tm-faint); margin-top:2px }
.tm-pf-pl { margin-left:auto; text-align:right }
.tm-pf-pl strong { color:var(--tm-yes) }
.tm-pf-btns { display:flex; gap:9px; margin-top:13px }
.tm-pf-btns span { padding:9px 22px; border-radius:999px; font-size:12.5px; font-weight:600 }
.tm-pf-dep { background:var(--brand); color:#fff }
.tm-pf-wd  { border:1px solid var(--tm-line); color:var(--tm-ink) }
.tm-pf-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px;
              margin-top:13px; align-items:start }
.tm-pf-tabs { display:flex; gap:7px; background:var(--tm-surf-2); border-radius:10px;
              padding:3px }
.tm-pf-tabs span { flex:1; text-align:center; padding:7px 0; border-radius:8px;
                   font-size:11.5px; font-weight:600; color:var(--tm-soft) }
.tm-pf-tabs span.is-on { background:color-mix(in srgb, var(--brand) 13%, #fff);
                         color:var(--brand) }
.tm-pf-pos { background:var(--tm-surf); border:1px solid var(--tm-line);
             border-radius:13px; padding:14px; margin-top:11px;
             box-shadow:var(--tm-card-sh) }
.tm-pf-pos-q { font-size:12px; font-weight:600; line-height:1.35 }
.tm-pf-pos-r { display:flex; justify-content:space-between; gap:12px; margin-top:9px;
               padding-top:9px; border-top:1px solid var(--tm-line); font-size:11px }
.tm-pf-pos-r em { font-style:normal; color:var(--tm-soft) }
.tm-pf-pos-r b { font-weight:600; font-variant-numeric:tabular-nums }
.tm-pf-pos-r b.is-yes { color:var(--tm-yes) }
.tm-pf-chart { background:var(--tm-surf); border:1px solid var(--tm-line);
               border-radius:13px; padding:14px; box-shadow:var(--tm-card-sh) }
.tm-pf-chart-h { display:flex; align-items:flex-start; gap:9px }
.tm-pf-chart-h em { font-style:normal; font-size:11px; color:var(--tm-soft) }
.tm-pf-chart-h .ds-dot { width:5px; height:5px; background:var(--tm-yes) }
.tm-pf-chart-h b { display:block; font-size:19px; font-weight:700; margin-top:2px;
                   font-variant-numeric:tabular-nums }
.tm-pf-chart-h .tm-pf-ranges { margin-left:auto; display:flex; gap:5px }
.tm-pf-ranges span { padding:3px 8px; border-radius:999px; font-size:9.5px; font-weight:600;
                     color:var(--tm-soft); background:var(--tm-surf-2) }
.tm-pf-ranges span.is-on { background:var(--brand); color:#fff }
/* eixo y rotulado, como no produto: sem os valores o gráfico é enfeite */
.tm-pf-plot { position:relative; margin-top:9px; padding-left:30px }
.tm-pf-ys { position:absolute; left:0; top:0; bottom:0; width:28px;
            display:flex; flex-direction:column; justify-content:space-between;
            text-align:right }
.tm-pf-ys em { font-style:normal; font-size:8.5px; color:var(--tm-faint); line-height:1 }
.tm-pf-chart svg { display:block; width:100%; height:104px; overflow:visible }
.tm-pf-chart .tm-pf-grid-l { stroke:var(--tm-line); stroke-width:1;
                             vector-effect:non-scaling-stroke; stroke-dasharray:2 5 }
/* mesma historia do grafico do evento: esticado, o traco engrossava so
   na vertical. Aqui a serie e curta e o defeito era discreto, mas e o
   mesmo defeito. */
.tm-pf-chart .tm-pf-line { fill:none; stroke:var(--tm-yes); stroke-width:1.9;
                           vector-effect:non-scaling-stroke; stroke-linecap:round;
                           stroke-linejoin:round }
.tm-pf-chart svg { clip-path:inset(0 100% 0 0) }
.tm-pf-chart.is-drawn svg { clip-path:inset(0 0 0 0);
                           transition:clip-path 1.4s cubic-bezier(.4,0,.3,1) }

@media (max-width:1023px) {
  .tm-prof, .tm-pf { padding-left:16px; padding-right:16px }
  .tm-pf-grid { grid-template-columns:1fr }
}
@media (max-width:767px) {
  .tm-prof, .tm-pf { padding-left:14px; padding-right:14px }
  .tm-pf-bal { flex-direction:column; gap:9px }
  .tm-pf-pl { margin-left:0; text-align:left }
  .tm-prof-stats b { font-size:17px }
}

/* ── o cursor e o toque ──────────────────────────────────────────── */
.tm-app-cursor {
  position:absolute; left:0; top:0; z-index:8; width:13px; height:19px;
  pointer-events:none; opacity:0;
  transform:var(--tma-pos,translate(0,0));
  transition:transform .45s cubic-bezier(.33,1,.36,1), opacity .3s ease;
  filter:drop-shadow(0 2px 5px #10182859);
}
.tm-app-cursor.is-on { opacity:1 }
.tm-app-cursor svg { display:block; width:100%; height:100% }
.tm-app-cursor.is-tap { transform:var(--tma-pos,translate(0,0)) scale(.82) }
.tm-app-ripple {
  position:absolute; left:0; top:0; z-index:7; width:16px; height:16px;
  margin:-8px 0 0 -8px; border-radius:50%; pointer-events:none;
  background:color-mix(in srgb, var(--brand) 34%, transparent);
  animation:tmAppRipple .62s cubic-bezier(.22,1,.28,1) forwards;
}
@keyframes tmAppRipple {
  0%   { opacity:.75; transform:var(--tma-pos) scale(.35) }
  100% { opacity:0;   transform:var(--tma-pos) scale(3.4) }
}
/* o aviso de boas-vindas do produto, que aparece no login */
.tm-app-toast {
  position:absolute; left:50%; bottom:22px; z-index:5;
  transform:translate(-50%,14px); opacity:0;
  display:flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:var(--tm-surf); border:1px solid var(--tm-line);
  box-shadow:0 12px 30px -12px #10182859;
  font-size:11.5px; font-weight:600; white-space:nowrap;
  transition:opacity .34s ease, transform .44s cubic-bezier(.22,1,.28,1);
}
.tm-app-toast.is-on { opacity:1; transform:translate(-50%,0) }
.tm-app-toast i { width:16px; height:16px; border-radius:50%; flex-shrink:0;
                  display:grid; place-items:center; font-style:normal;
                  background:color-mix(in srgb, var(--tm-yes) 13%, #fff); color:var(--tm-yes) }
.tm-app-toast i svg { width:9px; height:9px }

/* ── o controle ──────────────────────────────────────────────────
   Mesmo botão da Quebra 4, no mesmo lugar relativo: fora do quadro,
   discreto, e só existe para quem quiser parar e olhar um passo.   */
.tm-banner-right { display:flex; align-items:center; gap:14px; flex-shrink:0 }
.tm-app-ctl {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:3px 11px; border-radius:999px; border:1px solid #ffffff2b;
  background:#ffffff0f; color:#c6cbd4; font-size:10px; line-height:1.4;
  cursor:pointer;
  transition:color .25s ease, background-color .25s ease, border-color .25s ease;
}
.tm-app-ctl:hover { color:#fff; background:#ffffff1a; border-color:#ffffff42 }
.tm-app-ctl:focus-visible { outline:none; border-color:var(--accent);
                            box-shadow:0 0 0 3px #8ac5fa2e }
.tm-app-ctl::before { content:''; width:7px; height:8px; flex-shrink:0;
                      border-left:2px solid currentColor; border-right:2px solid currentColor }
.tm-app-ctl.is-paused::before { border:0; width:0; height:0;
                      border-left:7px solid currentColor;
                      border-top:4.5px solid transparent; border-bottom:4.5px solid transparent }

/* Quem pediu menos movimento recebe o fim, não o filme: a carteira com
   a posição aberta, que é onde a jornada chega. */
@media (prefers-reduced-motion:reduce) {
  .tm-app-scene, .tm-gate, .tm-sheet, .tm-sheet-wrap, .tm-qt, .tm-flip-in,
  .tm-app-cursor, .tm-app-toast, .tm-ev2-view { transition:none }
  .tm-gate-code i.is-in, .tm-sheet-ok .tm-ok-tick { animation:none }
  .tm-inp.is-focus .tm-caret { animation:none; opacity:1 }
  .tm-ev2-chart svg, .tm-pf-chart svg { clip-path:none }
  .tm-ev2-chart .tm-ev2-fill, .tm-ev2-chart .tm-ev2-dot { opacity:1 }
  .tm-app-ctl { display:none }
}

/* ── Browser chrome frame (BackOffice + widget mocks) ─────────────── */
.tm-frame       { position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#07070a;
                  box-shadow:0 40px 90px -40px rgba(7,7,10,.7) }
.tm-frame-bar   { display:flex; align-items:center; gap:12px; padding:13px 18px;
                  border-bottom:1px solid var(--border); background:rgba(255,255,255,.02) }
.tm-frame-dots  { display:flex; gap:6px }
.tm-frame-dots span { width:9px; height:9px; border-radius:50%; background:#2e3542 }
.tm-frame-url   { flex:1; max-width:320px; padding:5px 12px; border-radius:6px;
                  background:rgba(255,255,255,.04); color:var(--muted) }
.tm-frame--light                     { background:#f6f6f4; border-color:rgba(0,0,0,.1) }
.tm-frame--light .tm-frame-bar       { background:#eeeeeb; border-bottom-color:rgba(0,0,0,.08) }
.tm-frame--light .tm-frame-dots span { background:#cfcfca }
.tm-frame--light .tm-frame-url       { background:#fff; color:#8a8a85 }

/* ── The four proofs (Quebra 2) ────────────────────────────
   One object at three densities: a row of four on the desktop, 2×2 on
   the tablet, and on the phone that same row — swiped, not stacked.
   Stacked, four short sentences cost a full screen of scroll.

   Below 640px the track bleeds past the section padding to both edges
   of the viewport. A card that stops short of the edge reads as a
   broken grid; one that runs off it reads as something you can drag.
   The sliver of the next card is the whole affordance — no arrows.  */
.tm-proofs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.tm-proof  { display:flex; flex-direction:column; gap:12px; padding:20px;
             background:#fff; border:1px solid #edf0f2; border-radius:18px }

@media (max-width:1023px) {
  .tm-proofs { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:639px) {
  .tm-proofs {
    display:flex; gap:12px;
    margin-inline:calc(50% - 50vw);   /* section is px-6 here, so −24px a side */
    padding-inline:24px;              /* first card stays on the text's margin */
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:24px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tm-proofs::-webkit-scrollbar { display:none }
  .tm-proofs > .tm-proof { flex:0 0 80%; scroll-snap-align:start }
  /* tail room, so the last card can snap flush left like the others
     instead of jamming against the end of the track */
  .tm-proofs::after { content:""; flex:0 0 calc(20% - 12px) }
}

/* The position indicator exists only where the rail does: four cards
   have to read as four, and a scrollbar is hidden.                   */
.tm-proof-dots, .tm-step-dots { display:none }
@media (max-width:639px) {
  .tm-proof-dots, .tm-step-dots { display:flex; justify-content:center; gap:2px }
  .tm-proof-dot, .tm-step-dot   { width:24px; height:24px; padding:0; border:0;
                                  background:none; cursor:pointer;
                                  display:grid; place-items:center }
  .tm-proof-dot::before, .tm-step-dot::before {
                          content:""; width:6px; height:6px; border-radius:50%;
                          background:#c4c8d0;
                          transition:background-color .3s ease,
                                     transform .3s cubic-bezier(.16,1,.3,1) }
  .tm-proof-dot[aria-current="true"]::before,
  .tm-step-dot[aria-current="true"]::before { background:#3a80c8; transform:scale(1.5) }
  .tm-proof-dot:focus-visible, .tm-step-dot:focus-visible { outline:none }
  .tm-proof-dot:focus-visible::before,
  .tm-step-dot:focus-visible::before { box-shadow:0 0 0 3px rgba(138,197,250,.55) }
}

/* ── The line that closes the thesis (Quebra 2) ─────────────────
   Everything above this line is evidence; this is the verdict, and it
   should arrive like one. The rule draws itself down the margin, the
   wash follows it across, and only then does the sentence settle:
   mark, highlight, statement — in that order, inside 800ms. One
   gesture in three beats, not three animations.

   The wash is deliberately not a card. Four white cards sit directly
   above it, and a fifth would read as one more proof instead of the
   conclusion drawn from all of them. So it stays a tint on the
   section's own grey, and the rule does the pointing.

   The resting state IS the finished state — the hidden state exists
   only while .is-armed is on, and only JS ever puts it there. If the
   script never runs, the sentence is simply there, which is the one
   outcome that must not depend on a script.                        */
.tm-close { position:relative; padding:14px 22px 14px 26px; border-radius:0 12px 12px 0 }

.tm-close::before, .tm-close::after { content:""; position:absolute; pointer-events:none }

/* the rule: 2px in the margin, drawn top-down */
.tm-close::before { left:0; top:0; bottom:0; width:2px; background:#3a80c8;
                    transform:scaleY(1); transform-origin:top;
                    transition:transform .46s cubic-bezier(.16,1,.3,1) }

/* the wash: laid left-to-right, behind the sentence */
.tm-close::after  { inset:0; z-index:0; border-radius:inherit;
                    background:linear-gradient(90deg,
                      rgba(58,128,200,.10), rgba(58,128,200,.02) 78%, transparent);
                    transform:scaleX(1); transform-origin:left;
                    transition:transform .62s cubic-bezier(.16,1,.3,1) .14s }

/* positioned, or the absolutely-placed ::after would paint over it */
.tm-close > p { position:relative; z-index:1; opacity:1; transform:none;
                transition:opacity .52s cubic-bezier(.16,1,.3,1) .22s,
                           transform .52s cubic-bezier(.16,1,.3,1) .22s }

.tm-close.is-armed::before { transform:scaleY(0) }
.tm-close.is-armed::after  { transform:scaleX(0) }
.tm-close.is-armed > p     { opacity:0; transform:translateY(6px) }

/* ── BackOffice mock (Quebra 2) ───────────────────────────
   Tema claro, e tudo aqui sai de tokens locais em vez de cores soltas:
   trocar o painel de tema é reescrever este bloco de seis linhas, não
   caçar #fff pelo HTML. Foi assim que ele nasceu escuro e virou claro.

   --brand cai de #8ac5fa para #3a80c8 no claro pelo mesmo motivo que o
   próprio app derruba a cor de marca no tema light: beam sobre branco
   não passa em contraste no momento em que vira texto de botão ou
   número de tabela. É a mesma nota que o herói já carrega.

   O que a marca pinta: nav ativo, botão primário, chip ativo, as
   sparklines, o preço do Sim, a barra de probabilidade. O que ela não
   pinta: as variações (alta verde, baixa vermelha), os pontos de
   categoria e as luzes de status. Sua marca colore o produto, ela não
   recolore o que um número significa — mesma regra do Sim/Não.

   Os contadores nos chips são a fila de "precisa de ação" do BackOffice
   real, dobrada dentro da linha de filtros. Um dashboard mostra
   números; isto mostra que há trabalho a fazer.                     */
#tm-backoffice {
  --bo-bg:      #ffffff;   /* corpo            */
  --bo-panel:   #fafbfc;   /* barra lateral    */
  --bo-tile:    #fbfcfd;   /* cartões de KPI   */
  --bo-line:    #e6e9ed;   /* bordas e réguas  */
  --bo-text:    #14161a;   /* texto principal  */
  --bo-dim:     #5a6070;   /* texto secundário */
  --bo-faint:   #6f7788;   /* rótulos          */
  --bo-onbrand: #ffffff;   /* sobre a marca    */
  --bo-up:      #0d7a55;
  --bo-due:     #a3670b;   /* espera por gente, não pelo mercado */
  --brand:      #3077bf;
}

/* a moldura, em claro */
.tm-frame--bo { background:var(--bo-bg); border-color:var(--bo-line);
                box-shadow:0 30px 70px -34px rgba(20,32,54,.28) }
.tm-frame--bo .tm-frame-bar       { background:#f4f6f8; border-bottom-color:var(--bo-line) }
.tm-frame--bo .tm-frame-dots span { background:#ccd2da }
.tm-frame--bo .tm-frame-url       { background:#fff; color:var(--bo-faint);
                                    border:1px solid var(--bo-line) }

.tm-bo-side  { background:var(--bo-panel) }
.tm-bo-rule  { border-color:var(--bo-line) !important }

/* cabeçalho */
.tm-bo-head  { display:flex; align-items:flex-start; justify-content:space-between;
               gap:14px; flex-wrap:wrap }
.tm-bo-title { font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--bo-text) }
.tm-bo-sub   { font-size:12px; line-height:1.5; color:var(--bo-dim); margin-top:3px }
.tm-bo-acts  { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.tm-bo-btn   { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
               border-radius:8px; font-size:12.5px; font-weight:500; white-space:nowrap }
.tm-bo-btn svg { width:13px; height:13px; flex-shrink:0 }
.tm-bo-btn--ghost   { border:1px solid var(--bo-line); color:var(--bo-dim); background:#fff }
.tm-bo-btn--primary { background:var(--brand); color:var(--bo-onbrand) }

/* menu lateral */
.tm-bo-nav     { display:flex; flex-direction:column; gap:1px }
.tm-bo-navitem { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px;
                 font-size:13px; color:var(--bo-dim) }
.tm-bo-navitem svg   { width:14px; height:14px; flex-shrink:0; opacity:.8 }
.tm-bo-navitem.is-on { background:color-mix(in srgb, var(--brand) 12%, transparent);
                       color:var(--brand); font-weight:600 }
.tm-bo-navitem.is-on svg { opacity:1 }

/* filtros — a fila da operação */
.tm-bo-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:1px }
.tm-bo-chips::-webkit-scrollbar { display:none }
.tm-bo-chip  { display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 11px;
               border-radius:999px; border:1px solid var(--bo-line); background:#fff;
               color:var(--bo-dim); font-size:11.5px; white-space:nowrap; flex-shrink:0 }
.tm-bo-chip b        { font-variant-numeric:tabular-nums; font-weight:600; color:var(--bo-text) }
.tm-bo-chip.is-on    { border-color:color-mix(in srgb, var(--brand) 45%, transparent);
                       background:color-mix(in srgb, var(--brand) 10%, transparent); color:var(--brand) }
.tm-bo-chip.is-on b  { color:var(--brand) }
.tm-bo-chip.is-due b { color:var(--bo-due) }

/* KPIs */
.tm-bo-kpis  { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.tm-bo-kpi   { display:flex; flex-direction:column; gap:9px; min-width:0;
               padding:13px 14px; border-radius:11px;
               border:1px solid var(--bo-line); background:var(--bo-tile) }
.tm-bo-kpi-l { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bo-faint) }
.tm-bo-kpi-v { font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--bo-text);
               font-variant-numeric:tabular-nums; line-height:1 }
.tm-bo-kpi-f { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto }
.tm-bo-delta { display:inline-flex; align-items:center; gap:3px; font-size:10.5px;
               font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap }
.tm-bo-delta svg     { width:11px; height:11px }
.tm-bo-delta i       { font-style:normal; font-weight:400; color:var(--bo-faint) }
.tm-bo-delta.is-up   { color:var(--bo-up) }

.tm-spark    { display:block; width:54px; height:20px; flex-shrink:0; margin-left:auto; overflow:visible }
.tm-spark path           { fill:none; stroke:var(--brand); stroke-width:1.5;
                           stroke-linecap:round; stroke-linejoin:round }
.tm-spark .tm-spark-fill { stroke:none; fill:color-mix(in srgb, var(--brand) 14%, transparent) }

/* tabela — a grade vive aqui, e não em classe utilitária, porque no
   telefone ela perde duas colunas em vez de virar rolagem lateral: a
   moldura já é uma imagem larga num aparelho estreito, e uma segunda
   coisa para arrastar dentro dela ninguém encontra. Categoria e Volume
   saem; Mercado, Preço Sim e Status sustentam a leitura sozinhos.    */
.tm-bo-table   { border:1px solid var(--bo-line); border-radius:10px; overflow-x:auto }
.tm-bo-tbody   { min-width:600px }
.tm-bo-thead,
.tm-bo-tr      { display:grid; grid-template-columns:2.5fr 1.1fr 1fr .9fr .9fr;
                 gap:12px; padding:12px 16px; align-items:center }
.tm-bo-thead   { border-bottom:1px solid var(--bo-line); color:var(--bo-faint); font-size:9.5px }
.tm-bo-tr      { border-bottom:1px solid var(--bo-line); color:var(--bo-text); font-size:13.5px }
.tm-bo-tr:last-child { border-bottom:0 }
.tm-bo-vol     { color:var(--bo-dim) }
.tm-bo-price   { color:var(--brand); font-weight:600 }
.tm-bo-tag     { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--bo-dim) }
.tm-bo-tag i   { width:6px; height:6px; border-radius:2px; display:block; flex-shrink:0 }
.tm-bo-status  { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; white-space:nowrap }
.tm-bo-status i { width:5px; height:5px; border-radius:50%; display:block; flex-shrink:0 }
.tm-bo-status.is-open    { color:var(--bo-dim) }   .tm-bo-status.is-open i    { background:var(--bo-up) }
.tm-bo-status.is-due     { color:var(--bo-due) }   .tm-bo-status.is-due i     { background:var(--bo-due) }
.tm-bo-status.is-settled { color:var(--bo-faint) } .tm-bo-status.is-settled i { background:#c3c9d2 }
.tm-bo-bar   { height:3px; border-radius:2px; margin-top:6px; overflow:hidden; background:var(--bo-line) }
.tm-bo-bar i { display:block; height:100%; border-radius:2px; background:var(--brand) }

/* ── O BackOffice no telefone ───────────────────────────────
   Não é o painel de desktop espremido: é a versão mobile dele. A
   moldura de navegador some (contradiz um app), a lateral vira barra
   de topo, o menu desce para uma barra de abas no rodapé — onde a mão
   procura — e a tabela deixa de ser tabela.

   Linha de tabela em 340px não existe. Cada mercado vira um card de
   duas linhas: nome e preço em cima, categoria, volume e status
   embaixo. Assim Categoria e Volume, que eu tinha escondido para caber
   na largura, voltam — a lista ganhou altura e sobra espaço.       */
.tm-bo-only-sm { display:none }
.tm-bo-tabs    { display:none }

@media (max-width:1023px) {
  .tm-bo-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tm-frame--bo .tm-frame-bar { display:none }   /* app não tem barra de navegador */
  .tm-bo-only-sm { display:flex }
  .tm-bo-side svg { width:20px; height:20px; color:var(--bo-dim) }
  .tm-bo-avatar   { width:28px; height:28px; border-radius:50%; background:#eef1f4;
                    align-items:center; justify-content:center; flex-shrink:0 }
  .tm-bo-avatar svg { width:16px; height:16px }

  .tm-bo-tabs { display:grid; grid-template-columns:repeat(4,1fr);
                border-top:1px solid var(--bo-line); background:#fff }
  .tm-bo-tab  { display:flex; flex-direction:column; align-items:center; gap:4px;
                padding:9px 4px 11px; color:var(--bo-faint) }
  .tm-bo-tab svg { width:18px; height:18px }
  .tm-bo-tab i   { font-style:normal; font-size:10px; letter-spacing:-.01em }
  .tm-bo-tab.is-on { color:var(--brand) }
  .tm-bo-tab.is-on i { font-weight:600 }
}

@media (max-width:639px) {
  .tm-bo-hide-sm { display:none }
  .tm-bo-tbody   { min-width:0 }
  .tm-bo-table   { border:0; border-radius:0 }
  .tm-bo-thead   { display:none }               /* lista não tem cabeçalho de tabela */

  .tm-bo-tr { grid-template-columns:auto 1fr auto;
              grid-template-areas:"name name price" "tag vol status";
              gap:6px 10px; padding:13px 14px; align-items:center }
  .tm-bo-tr > :nth-child(1) { grid-area:name }
  .tm-bo-tr > .tm-bo-tag    { grid-area:tag }
  .tm-bo-tr > .tm-bo-vol    { grid-area:vol; font-size:11px }
  .tm-bo-tr > .tm-bo-price  { grid-area:price; justify-self:end; font-size:16px }
  .tm-bo-tr > .tm-bo-status { grid-area:status; justify-self:end }
  /* nome de mercado cabe em duas linhas aqui; cortar com reticências
     perderia justamente a palavra que diz do que o mercado trata */
  .tm-bo-tr .truncate { white-space:normal; overflow:visible }
  .tm-bo-status  { white-space:normal; line-height:1.25 }

  .tm-bo-kpi   { padding:11px 12px }
  .tm-bo-kpi-l { min-height:3em }
  .tm-bo-kpi-v { font-size:18px }
  .tm-bo-kpi-f { flex-direction:column; align-items:stretch }
  .tm-bo-delta { flex-wrap:wrap }
  .tm-bo-delta i { flex-basis:100% }
  .tm-spark { align-self:flex-end }
  .tm-bo-head  { gap:10px }
}

/* A seção de baixo abre o topo para o painel pousar nela. Sem isso o
   "Produto 01" nasceria debaixo da moldura.                        */
.tm-under { position:relative; padding-top:calc(var(--section-space) + 48px) }
/* Abaixo de 1024px nada atravessa, então o topo volta ao normal. */
@media (max-width:1023px) { .tm-under { padding-top:var(--section-space) } }

/* ── e a seção de cima precisa estar acima ─────────────────────
   Abrir o topo da Quebra 3 não basta: ela é .tm-under, ou seja
   position:relative, e vem depois no DOM. Sem z-index de nenhum lado,
   a ordem de pintura é a do documento e a seção escura passa por cima
   da base do painel — a imagem deixa de sair da seção e vira imagem
   comida pela seguinte.

   Não resolve pelo .tm-bo-tilt: o .tm-bo-stage tem perspective, que
   abre contexto de empilhamento próprio, então o z-index:1 de lá só
   vale dentro do palco. Quem tem de subir é a seção.

   Isto vinha de graça enquanto o painel morava na Quebra 2, que já era
   .tm-overlap (z-index:3) por causa do corte do herói. Ao passar o
   .tm-overlap para a Quebra 1.5, o z-index foi junto e o painel ficou
   sem cobertura. Agora é explícito e mora ao lado do vazamento que ele
   protege, em vez de ser efeito colateral de outro gesto.

   Mesmo 3 do .tm-overlap: as duas disputam com vizinhos em auto, e um
   valor diferente sugeriria uma hierarquia entre elas que não existe. */
.tm-bo-over { position:relative; z-index:3 }

/* ── a faixa da Quebra 2.5 ─────────────────────────────────────
   Três blocos claros seguidos — 1.5, 2 e 2.5 — no mesmo #f2f4f6, e o
   rótulo da 2.5 não tinha moldura a que pertencer: ele abria uma seção
   nova dentro de um campo cinza que não havia terminado. Pior, o
   veredito da Quebra 2 (.tm-close, com o fio azul) ficava parado logo
   acima dele, então a seção lia como reprise e não como movimento novo.

   A faixa é o que o próprio artefato usa neste lugar: um tom abaixo do
   resto e um fio no topo. O fio é quem faz o trabalho — entre #f2f4f6 e
   #edf0f2 há cinco pontos, que sozinhos não marcam nada.

   Fio só no topo: embaixo a seção encontra a Quebra 3, escura, e é por
   ali que o painel do BackOffice sai. Um fio ali cruzaria a imagem no
   meio do vazamento.

   O tom mais fundo ainda rende de graça para o painel: sobre #edf0f2 a
   moldura branca do BackOffice separa mais do que sobre #f2f4f6.    */
.tm-band { background:#edf0f2; border-top:1px solid #e0e5e9 }

/* ── O palco do BackOffice (Quebra 2) ─────────────────────────
   Duas ideias foram testadas e descartadas aqui, e vale registrar por
   quê. A primeira foi cortar o painel com a Quebra 3, como o herói faz
   com a Quebra 2: repetido, o mesmo gesto deixava as duas seções
   idênticas, e no herói ele só funciona porque a tela é enorme e cortar
   diz "não cabe" — numa moldura menor dizia "faltou pedaço". A segunda
   foi inclinar 9 graus só no eixo X: inclinação pequena não lê como
   decisão, lê como torto. Ou o painel está reto, ou está claramente em
   perspectiva; o meio-termo parece defeito.

   O que ficou assume a diagonal e assume o custo dela. Gira no Y (a
   lateral fica perto e grande, a direita recua), deita no X, e um Z
   mínimo tira a horizontal da horizontal. Depois desce: a seção fecha
   antes da base do painel, e o resto pousa sobre a Quebra 3. Não é a
   seção comendo a imagem — é a imagem saindo dela.

   O custo é legibilidade na borda que recua, e é exatamente por isso
   que o cartão de aprovação existe: reto, na frente, fora da
   perspectiva. O painel dá volume; o cartão dá o recado.           */
.tm-bo-stage { position:relative; perspective:1600px; perspective-origin:32% 46%;
               padding:20px 0 40px;
               /* A seção fecha 56px acima da base do painel, e só esses
                  56px pousam sobre a Quebra 3 — com o giro em Z o canto
                  direito desce mais uns 16px, então é ele que atravessa
                  de fato. Mais do que isso deixa de ser um canto saindo
                  da seção e vira imagem plantada na seção errada.     */
               margin-bottom:-56px }

/* Da referência veio isto: o painel não flutua no vazio, ele fica num
   ambiente. Grade fina e um halo quente/frio dando volume ao cinza. */
.tm-bo-grid  { position:absolute; z-index:0; pointer-events:none;
               left:-6%; right:-6%; top:-6%; bottom:70px;
               background-image:radial-gradient(rgba(20,32,54,.10) 1px, transparent 0);
               background-size:26px 26px;
               -webkit-mask-image:radial-gradient(66% 62% at 50% 46%,#000 0,transparent 76%);
                       mask-image:radial-gradient(66% 62% at 50% 46%,#000 0,transparent 76%) }

/* O halo desce com o painel e passa a ser a única pista de
   profundidade na parte de baixo: sombra escura sobre uma seção
   #07070a simplesmente não aparece — luz aparece.                  */
.tm-bo-glow  { position:absolute; z-index:0; pointer-events:none;
               left:-4%; right:8%; top:4%; bottom:-26%;
               background:radial-gradient(50% 50% at 30% 40%, rgba(58,128,200,.24), transparent 68%),
                          radial-gradient(44% 46% at 78% 70%, rgba(232,144,74,.17), transparent 70%),
                          radial-gradient(58% 30% at 46% 96%, rgba(138,197,250,.22), transparent 72%);
               filter:blur(56px) }

.tm-bo-tilt  { position:relative; z-index:1;
               transform:rotateY(-17deg) rotateX(7deg) rotateZ(1.4deg) scale(1.06);
               transform-origin:24% 58%;
               /* sombra deslocada para a direita e para baixo: é para onde
                  o painel recua, e sombra centrada denuncia o truque */
               box-shadow:46px 70px 96px -58px rgba(20,32,54,.55),
                          14px 26px 50px -36px rgba(20,32,54,.3);
               transition:transform 1.05s cubic-bezier(.16,1,.3,1),
                          opacity .75s cubic-bezier(.16,1,.3,1) }

/* o cartão do primeiro plano — reto, fora da perspectiva */
/* entrada: chega mais deitado e assenta. Estado de repouso é o estado
   final — só o JS arma o inicial, então sem script nada some.      */
.tm-bo-stage.is-armed .tm-bo-tilt  { transform:translateY(26px) rotateY(-25deg) rotateX(12deg)
                                               rotateZ(2.4deg) scale(1.01); opacity:0 }

/* Abaixo de 1024px não há palco: a moldura já ocupa a tela inteira e
   inclinar só rouba altura e nitidez. Fica reta, e o cartão sai.    */
@media (max-width:1023px) {
  /* Sem palco não há travessia: aqui a moldura é reta e frontal, e um
     retangulo branco plantado no preto só parece erro de margem. A
     margem positiva devolve o rodapé que a seção abriu mão (pb-0) para
     o desktop poder transbordar. */
  .tm-bo-stage { perspective:none; padding-bottom:0; margin-bottom:var(--section-space) }
  .tm-bo-tilt  { transform:none;
                 box-shadow:0 30px 60px -38px rgba(20,32,54,.34) }
  .tm-bo-stage.is-armed .tm-bo-tilt { transform:translateY(20px); opacity:0 }
  .tm-bo-grid, .tm-bo-glow { display:none }
}

/* ── Bento de capacidades (Quebra 3) ────────────────────────────
   Três versões desta seção morreram antes desta, e cada morte ensinou
   uma coisa.

   A primeira eram seis cards iguais, cada um com eyebrow + visor +
   título + parágrafo + nota. Custava ~1000px no desktop e ~2200px no
   telefone, e o visor era cortado em 104px: pagava-se a altura de um
   card inteiro por um fragmento pequeno demais para ler.

   A segunda trocou os seis cards por um trilho com um palco só. Cortava
   a altura, mas errava o alvo por outro motivo: continuava tratando a
   seção como um catálogo a ser percorrido. O trabalho dela não é
   enumerar especificação — é transmitir segurança e abrir apetite. Quem
   quiser a lista tem a Quebra 5 e a conversa.

   Esta é o bento da referência de mercado, que acerta os dois de
   uma vez. Quatro tiles, cada um com uma frase e uma imagem:

   · O tile largo é o equivalente do "Direct link to live markets" deles
     — título grande, uma linha, e um pedaço do produto de verdade
     sangrando pela borda do card. Ali vai o livro de ofertas, que é a
     peça que mais vende a categoria e a única que precisa ser mostrada
     em detalhe, porque mercado vazio é a razão número um de fracasso.

   · O tile de acento é o Payments & Compliance deles quase literal: uma
     faixa de pílulas engolindo uma lista inteira de fornecedores sem
     travar número em lugar nenhum. Este engole três dos seis cards
     antigos — pagamentos, identidade e compliance — mais toda a lista
     do antigo rodapé "o que ninguém lembra de orçar". É a consolidação
     que faz a seção caber.

   · Os outros dois têm imagem atmosférica, não infográfico. A curva
     sangra pela base sem eixo e sem legenda; o ciclo é quatro linhas.

   O acento é azul e não laranja porque o laranja é da referência. O
   gradiente sai do sweep de botão que já existe no design system
   (#5296d4 → #2d6ab4), empurrado para o fundo até o branco por cima
   passar de 5,5:1 em toda a extensão.

   Verde e vermelho seguem reservados a bid/ask e aprovado/negado.   */
.tm-bento { display:grid; gap:16px; grid-template-columns:1fr }

.tm-bx { position:relative; display:flex; flex-direction:column; gap:12px;
         overflow:hidden; padding:24px 22px 0;
         border:1px solid var(--border); border-radius:22px; background:#0b0b11;
         transition:border-color .4s ease, transform .4s cubic-bezier(.16,1,.3,1),
                    box-shadow .4s ease }
.tm-bx:hover { border-color:rgba(138,197,250,.34); transform:translateY(-3px);
               box-shadow:0 26px 64px -30px rgba(138,197,250,.4) }

.tm-bx-txt   { display:flex; flex-direction:column; gap:11px; max-width:44ch }
.tm-bx-title { font-size:clamp(23px,2.1vw,29px); line-height:1.16;
               letter-spacing:-.02em; text-wrap:balance }
.tm-bx-title--lg { font-size:clamp(29px,6vw,38px); line-height:1.1 }
.tm-bx-lead  { color:rgba(255,255,255,.66); font-size:15px; line-height:1.55 }

/* ── o tile de acento ─────────────────────────────────────── */
.tm-bx--accent { border-color:transparent;
                 background:linear-gradient(158deg,#2d6ab4 0%,#1a4478 100%) }
.tm-bx--accent::before { content:""; position:absolute; inset:0; pointer-events:none;
                 background-image:radial-gradient(#ffffff14 1px, transparent 0);
                 background-size:20px 20px;
                 -webkit-mask-image:linear-gradient(200deg,#000,transparent 62%);
                         mask-image:linear-gradient(200deg,#000,transparent 62%) }
.tm-bx--accent:hover { border-color:transparent;
                 box-shadow:0 26px 64px -30px rgba(45,106,180,.75) }
.tm-bx--accent .tm-bx-txt,
.tm-bx--accent .tm-pills { position:relative; z-index:1 }
.tm-bx--accent .tm-bx-lead { color:rgba(255,255,255,.82) }

/* as pílulas herdam a faixa que já existia; só trocam de pele para
   pousar no azul em vez de no fundo do abismo */
.tm-bx .tm-pills--accent { margin:18px -22px 24px; padding:0 }
.tm-bx .tm-pills--accent::before { background:linear-gradient(to right,#28619f,transparent) }
.tm-bx .tm-pills--accent::after  { background:linear-gradient(to left,#1d4a80,transparent) }
.tm-bx .tm-pills--accent .tm-pill { color:#fff; border-color:rgba(255,255,255,.26);
                             background:rgba(255,255,255,.13) }

/* ── o tile largo, com o produto sangrando ────────────────── */
.tm-bx--wide .tm-bx-txt { max-width:38ch }
/* No telefone a janela entra no fluxo e termina inteira. Sangrar aqui não
   funciona: sem largura sobrando, o corte cai no meio de uma linha do
   livro e lê como bug de render, não como enquadramento. O sangramento
   volta a partir do tablet, onde há espaço para cortar num lugar que
   pareça escolhido. */
.tm-bx-bleed { position:relative; flex:1; margin:0 0 24px }

.tm-glass { position:relative; display:flex; flex-direction:column; overflow:hidden;
            border:1px solid rgba(255,255,255,.09); border-radius:14px;
            background:#0e0e16;
            box-shadow:0 -8px 40px -12px rgba(138,197,250,.22),
                       0 24px 60px -24px rgba(0,0,0,.7) }
.tm-glass-bar { display:flex; align-items:center; flex-shrink:0; height:36px;
                padding:0 14px; border-bottom:1px solid rgba(255,255,255,.07);
                background:rgba(255,255,255,.03); font-size:9.5px;
                letter-spacing:.16em; text-transform:uppercase; color:#6b7484;
                white-space:nowrap }
.tm-glass-bar::before { content:""; flex-shrink:0; width:6px; height:6px;
                margin-right:28px; border-radius:50%; background:#242b38;
                box-shadow:11px 0 0 #242b38, 22px 0 0 #242b38 }
.tm-glass-in  { padding:12px 14px }

/* dois níveis a menos no telefone — sete já dizem "os dois lados estão
   cheios", e o livro passa a caber inteiro */
@media (max-width:699px) {
  .tm-bx--wide .tm-ob-row:first-child,
  .tm-bx--wide .tm-ob-row:last-child { display:none }
}
.tm-bx--wide .tm-ob       { gap:2px; font-size:12px }
.tm-bx--wide .tm-ob-row   { padding:3px 9px }
.tm-bx--wide .tm-ob-mid   { padding:3px 9px; font-size:9px }

/* ── o tile alto: o ciclo ─────────────────────────────────── */
.tm-bx--cycle::after { content:""; position:absolute; z-index:0; left:50%; bottom:14%;
                    width:118%; aspect-ratio:1; transform:translateX(-50%);
                    border-radius:50%; pointer-events:none;
                    background:radial-gradient(closest-side,rgba(138,197,250,.13),transparent 70%) }
.tm-bx--cycle > *  { position:relative; z-index:1 }
/* os quatro visores encostam na base do tile: a curva, a faixa de
   pílulas, o livro e o ciclo. Alinhados, a fileira lê como uma coisa
   só em vez de quatro composições diferentes. */
.tm-bx-art--steps { flex:1; display:flex; align-items:flex-end;
                    padding:4px 0 24px }
.tm-bx--cycle .tm-steps  { gap:14px; font-size:13px }
.tm-bx--cycle .tm-step::before { top:-14px; height:19px }

/* ── o tile de infra: a curva sangra pela base ────────────── */
.tm-bx--infra { padding-bottom:0 }
.tm-bx-curvewrap { position:relative; margin:auto -23px -1px; flex-shrink:0 }
.tm-bx-curve  { display:block; width:100%; height:102px }
.tm-bx-cap    { position:absolute; right:23px; top:15.2%;
                transform:translateY(-130%); font-size:9px;
                letter-spacing:.14em; text-transform:uppercase;
                color:#5c6472; white-space:nowrap }

/* ── a linha de fecho · 1:1 com o .wl-close do artefato v2 ──── */
.tm-wl-close   { margin-top:44px; text-align:center;
                 font-size:clamp(20px,2.6vw,26px); line-height:1.4;
                 color:rgba(255,255,255,.7) }
.tm-wl-close b { color:#fff; font-weight:600 }

/* ── tablet: duas colunas, o largo por cima ───────────────── */
@media (min-width:700px) {
  .tm-bento { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tm-bx { min-height:300px; padding:26px 26px 0; gap:14px }
  .tm-bx .tm-pills--accent { margin:auto -26px 26px }
  .tm-bx--cycle .tm-steps { gap:22px; font-size:13.5px }
  .tm-bx--cycle .tm-step::before { top:-22px; height:27px }
  .tm-bx-art--steps { padding:6px 0 30px }
  .tm-bx-curvewrap { margin:auto -27px -1px }
  .tm-bx-curve { height:128px }
  .tm-bx-cap   { right:27px }
  /* dois largos e dois quadrados: o alto virava uma coluna de 625px com
     300px de nada dentro quando esticava por duas linhas */
  .tm-bx--wide   { grid-column:1 / 3; grid-row:1 }
  .tm-bx--accent { grid-column:1; grid-row:2 }
  .tm-bx--cycle   { grid-column:2; grid-row:2 }
  .tm-bx--infra  { grid-column:1 / 3; grid-row:3 }
  /* a largura do texto é percentual, não em ch: em ch ela encostava na
     janela e o parágrafo sumia por baixo do livro */
  .tm-bx--wide .tm-bx-txt { max-width:38% }
  .tm-bx-bleed { position:absolute; inset:0; flex:none; margin:0; min-height:0;
                 pointer-events:none }
  .tm-glass { position:absolute; left:auto; right:24px; top:auto; bottom:-38px;
              width:min(48%,352px); border-radius:14px 14px 0 0 }
  .tm-bx--wide { min-height:286px }
}

/* ── desktop: o molde da referência — três em cima, largo embaixo ─ */
@media (min-width:1024px) {
  .tm-bento { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
  /* três iguais em cima, o produto largo embaixo. O tile do ciclo já
     esticou por duas linhas, como na referência, e virava 635px com 260px de
     buraco no meio: o vão que dá charme lá só funciona com uma imagem
     grande dentro, e a imagem grande é justamente o que esta seção não
     quer. Fileira reta, e o largo ganha o dobro de palco. */
  .tm-bx--infra  { grid-column:1; grid-row:1 }
  .tm-bx--accent { grid-column:2; grid-row:1 }
  .tm-bx--cycle  { grid-column:3; grid-row:1 }
  .tm-bx--wide   { grid-column:1 / -1; grid-row:2 }
  .tm-bx         { min-height:326px; padding:30px 30px 0 }
  .tm-bx--wide   { min-height:296px }
  .tm-bx--wide .tm-bx-txt { max-width:40% }
  .tm-bx .tm-pills--accent { margin:auto -30px 30px }
  .tm-glass  { left:auto; right:30px; top:auto; bottom:-44px; width:min(48%,568px) }
  .tm-bx-curvewrap { margin:auto -31px -1px }
  .tm-bx-curve { height:140px }
  .tm-bx-cap   { right:31px }
}

/* ── o tile da API ─────────────────────────────────────────────
   Único do bento que fecha o próprio padding-bottom: os outros quatro
   abrem a base para a arte sangrar, e aqui não há arte para sangrar —
   o bloco de rotas é texto, e texto cortado pela borda lê como bug.

   O min-height:0 é obrigatório e vem depois dos dois blocos de
   breakpoint do bento de propósito: .tm-bx sobe para 300px no tablet e
   326px no desktop, e quatro linhas de mono num tile de largura cheia
   deixariam 200px de vazio embaixo. Mesma especificidade, então quem
   vem depois na folha ganha.

   A cor do verbo é a única roxa da página. Verde e vermelho estão
   reservados a bid/ask, e azul é a marca — num bloco de código o
   método precisa se separar da rota sem sequestrar nenhum dos dois
   significados que a página já ensinou.                            */
.tm-bx--api { padding-bottom:24px }

.tm-api      { display:flex; flex-direction:column; gap:7px;
               padding:16px; border-radius:14px;
               border:1px solid rgba(255,255,255,.09); background:#0e0e16;
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
               font-size:12.5px; line-height:1.45; color:#8a909b;
               overflow-x:auto; scrollbar-width:none }
.tm-api::-webkit-scrollbar { display:none }
.tm-api-row  { display:flex; align-items:baseline; gap:10px; white-space:nowrap }
.tm-api-row b { color:#8ac5fa; font-weight:500 }
.tm-api-verb, .tm-api-ok { flex-shrink:0; min-width:36px; font-style:normal;
                           font-weight:600; letter-spacing:.02em }
.tm-api-verb { color:#c3a2e8 }
.tm-api-ok   { color:#2ebd85 }
/* a resposta não é mais uma rota: a régua separa o que você pede do que
   volta, e é ela que faz o "4ms" ser um resultado e não mais um dado */
.tm-api-row.is-ok { margin-top:3px; padding-top:11px;
                    border-top:1px solid rgba(255,255,255,.07) }

@media (min-width:700px) {
  .tm-bx--api { grid-column:1 / 3; grid-row:4; min-height:0;
                flex-direction:row; align-items:center; gap:28px;
                padding-bottom:26px }
  /* 54/46 e não 44/52: em 700px exatos o bloco de rotas ficava com
     227px de área útil para 262px de rota e comia o padding da direita.
     O texto cede porque ele quebra de graça; a rota não quebra.     */
  .tm-bx--api .tm-bx-txt { flex:1 1 46%; max-width:46ch }
  .tm-bx--api .tm-api    { flex:1 1 54%; min-width:0 }
}
@media (min-width:1024px) {
  .tm-bx--api { grid-column:1 / -1; grid-row:3; min-height:0;
                gap:40px; padding-bottom:30px }
}

/* No telefone o bloco encolhe um passo e a linha da resposta deixa de
   ser flex: ela é frase, não rota, e em 360px o "4ms" era cortado pela
   borda. Com a barra de rolagem escondida (é o que o overflow-x:auto
   aqui é: rede de segurança, não afordância) um corte no meio de um
   token lê como bug, não como "continua para o lado".

   As três rotas seguem em nowrap de propósito: quebrar um endpoint no
   meio é o que faria o bloco parar de ler como endpoint.            */
@media (max-width:479px) {
  .tm-api      { font-size:11.5px; padding:14px 13px; gap:6px }
  .tm-api-verb { min-width:32px }
  .tm-api-row.is-ok { display:block; white-space:normal }
  .tm-api-row.is-ok .tm-api-ok { min-width:0; margin-right:9px }
}
/* 320px: em 11,5px a rota mais longa comia o padding da direita inteiro
   e o `}` encostava na borda. Mesma escada do .tm-railcta, que já cede
   escala nesta faixa antes de ceder o próprio botão.               */
@media (max-width:359px) {
  .tm-api      { font-size:10px; padding:12px 11px; gap:5px }
  .tm-api-row  { gap:7px }
  .tm-api-verb { min-width:27px }
}

/* ── fragmento: livro de ofertas ───────────────────────────── */
.tm-ob      { display:flex; flex-direction:column; gap:2px;
              font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-variant-numeric:tabular-nums; font-size:11px }
.tm-ob-row  { position:relative; display:flex; justify-content:space-between;
              padding:2px 8px; border-radius:3px; overflow:hidden }
.tm-ob-row i { position:absolute; inset:0 auto 0 0; border-radius:3px }
.tm-ob-row b, .tm-ob-row em { position:relative; font-style:normal; font-weight:500 }
.tm-ob-row em { color:#8a909b }
.is-ask i   { background:rgba(229,72,77,.16) }   .is-ask b  { color:#e5484d }
.is-bid i   { background:rgba(46,189,133,.16) }  .is-bid b  { color:#2ebd85 }
.tm-ob-mid  { display:flex; align-items:center; gap:8px; padding:3px 8px;
              font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
              color:#6b7484 }
.tm-ob-mid::before, .tm-ob-mid::after { content:""; flex:1; height:1px;
              background:var(--border) }

/* ── fragmento: ciclo de vida ──────────────────────────── */
.tm-steps    { display:flex; flex-direction:column; gap:3px; font-size:11.5px }
.tm-step     { position:relative; display:flex; align-items:center; gap:10px;
               padding-left:2px; color:#6b7484 }
.tm-step i   { width:9px; height:9px; border-radius:50%; flex-shrink:0;
               border:1.5px solid #2a3140; background:#0d0d15 }
.tm-step::before { content:""; position:absolute; left:6px; top:-3px; width:1.5px;
                   height:8px; background:#2a3140 }
.tm-step:first-child::before { display:none }
.tm-step.is-done       { color:#c8cdd6 }
.tm-step.is-done i     { background:#8ac5fa; border-color:#8ac5fa }
.tm-step.is-done::before { background:#8ac5fa }

/* ── a faixa de pílulas ──────────────────────────────── */
.tm-pills      { position:relative; display:flex; flex-direction:column; gap:10px;
                 overflow:hidden; margin:0 -20px -18px; padding-bottom:18px }
.tm-pills::before, .tm-pills::after { content:""; position:absolute; top:0; bottom:0;
                 width:56px; z-index:2; pointer-events:none }
.tm-pills::before { left:0;  background:linear-gradient(to right,#0b0b11,transparent) }
.tm-pills::after  { right:0; background:linear-gradient(to left,#0b0b11,transparent) }
.tm-pill-row   { overflow:hidden }
.tm-pill-track { display:flex; gap:9px; width:max-content }
.tm-pill-track.to-left  { animation:pills-left  34s linear infinite }
.tm-pill-track.to-right { animation:pills-right 40s linear infinite }
.tm-pill       { flex-shrink:0; padding:0 14px; height:33px; display:flex;
                 align-items:center; border-radius:999px; font-size:12.5px;
                 color:#a8b0bd; border:1px solid var(--border);
                 background:rgba(255,255,255,.035) }

/* ── O widget simulado (Quebra 4) ────────────────────────────────
   A seção vende um produto que só convence em movimento: o argumento não
   é "existe um mercado na sua página", é "seu leitor entra, deposita e
   opera sem sair dela". Isso é sequência, e sequência não cabe em foto.

   A primeira versão encenava os passos certos e mesmo assim saía robótica,
   porque toda a animação era a mesma: cada tela entrava com o mesmo fade
   de 7px e o cursor ia de A a B sempre na mesma duração. O que conserta
   isso não é mais movimento, é movimento com hierarquia:

   · as telas deslizam na direção do avanço — entra pela direita, sai pela
     esquerda — então o olho lê "navegou", não "trocou de div";
   · o cursor tem duração proporcional à distância e passa um fio do alvo
     antes de assentar, que é como a mão se comporta;
   · o clique deixa uma onda no ponto de contato;
   · o sucesso tem mola e clarão, porque é o pico emocional da peça.

   Duas decisões estruturais seguram tudo: o corpo tem altura fixa (sem
   isso o frame pulsa a cada troca e lê como bug), e o cursor é posicionado
   em coordenada calculada em tempo de execução, não em pixel fixo, porque
   o mesmo widget tem três larguras.

   Roda como um gif: em laço, sem controle visível. As duas defesas que
   sobram são as que atuam sozinhas — prefers-reduced-motion congela tudo
   na posição aberta, que é o final feliz, e o laço só corre com o widget
   em cena. Ver a nota em initWidgetDemo sobre o que isso custa.       */
/* ── o palco: a matéria atrás, o widget ancorado no canto ─────────
   Recolhido, o widget é só a barra — é o estado que a própria plataforma
   tem, e é o que prova que ele não toma a página do cliente. Ao abrir,
   cresce e apaga o fundo.

   O desfoque é do conteúdo da matéria, não do frame: a barra de URL e os
   pontinhos ficam nítidos, porque numa sobreposição real o navegador não
   desfoca junto. É esse detalhe que mantém a cena crível.

   A altura do palco é fixa e dimensionada para o widget aberto, senão o
   frame do navegador saltaria de tamanho a cada abertura.            */
.tm-w-stage { position:relative; min-height:498px; padding:0 }
.tm-w-page  { transition:filter .55s ease, opacity .55s ease }
.tm-w-stage.is-open .tm-w-page { filter:blur(3.5px); opacity:.42 }

/* ── a página do portal por baixo ─────────────────────────────────
   Ela não é cenário: é o argumento. O widget ocupa um slot de anúncio
   que o portal já vende, então o diretor consegue comparar com o que
   aquele espaço rende hoje. Por isso o rótulo "Publicidade" — é o que
   os portais brasileiros põem em cima de todo espaço vendido.      */
.tm-p-bar   { display:flex; align-items:center; gap:12px; height:36px;
              padding:0 16px; background:#14161a; color:#fff }
.tm-p-menu  { width:14px; height:9px; flex-shrink:0;
              border-top:2px solid #fff; border-bottom:2px solid #fff;
              box-shadow:inset 0 0 0 1px transparent, 0 3.5px 0 -1px #fff }
.tm-p-logo  { font-size:12.5px; font-weight:300; letter-spacing:-.01em }
.tm-p-logo b{ font-weight:700 }
.tm-p-nav   { margin-left:auto; display:inline-flex; align-items:center; gap:6px;
              font-size:10.5px; color:#9a9a93 }

.tm-p-grid  { display:grid; grid-template-columns:minmax(0,1fr) 300px;
              gap:26px; padding:20px 16px 22px }
.tm-p-tags  { display:flex; align-items:center; gap:9px; margin-bottom:9px }
.tm-p-live  { display:inline-flex; align-items:center; gap:5px;
              font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:9px; letter-spacing:.1em; text-transform:uppercase;
              color:#fff; background:#c1352c; border-radius:4px; padding:3.5px 7px 3px }
.tm-p-live::before { content:""; width:5px; height:5px; border-radius:50%;
              background:#fff; animation:pulse 1.6s ease-in-out infinite }
.tm-p-kicker{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
              color:#b4413e }
.tm-p-h     { font-family:Georgia,'Times New Roman',serif; font-size:22px;
              line-height:1.2; font-weight:700; letter-spacing:-.005em;
              color:#1c1c26; margin-bottom:8px }
.tm-p-byline{ font-size:10.5px; color:#9a9a93; margin-bottom:13px }
/* capa da matéria: foto de verdade, recortada no quadro. O crédito por cima
   é o que um portal faz — e é ele que satisfaz a atribuição da licença */
.tm-p-hero  { position:relative; height:168px; border-radius:8px; margin:0 0 14px;
              overflow:hidden; background:#0e1830 }
.tm-p-hero img { display:block; width:100%; height:100%; object-fit:cover }
.tm-p-hero-cred { position:absolute; left:9px; bottom:8px; font-size:9px;
              letter-spacing:.02em; color:rgba(255,255,255,.75);
              background:rgba(0,0,0,.42); padding:3px 7px; border-radius:4px }
.tm-p-lead  { font-size:12.5px; line-height:1.6; color:#14161a; margin-bottom:11px }
.tm-p-txt   { font-size:11.5px; line-height:1.75; color:#7a7f88; margin-bottom:9px }

.tm-p-side  { display:flex; flex-direction:column }
.tm-p-adlabel { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
              color:#b4b4ae; margin-bottom:5px }
/* o buraco que o widget preenche: existe para reservar a altura do slot */
.tm-p-slot  { height:236px; margin-bottom:16px }
.tm-p-card  { display:flex; gap:9px; padding-top:11px;
              border-top:1px solid #eeeeea; margin-bottom:11px }
.tm-p-thumb { width:52px; height:40px; flex-shrink:0; border-radius:5px;
              display:block; object-fit:cover; background:#dfe3e8 }
.tm-p-ct    { font-size:11.5px; line-height:1.34; font-weight:600; color:#14161a }

.tm-w { position:absolute; z-index:2;
        left:8%; width:84%; top:44px;
        border:1px solid #e2e2dd; border-radius:13px; overflow:hidden;
        background:linear-gradient(180deg,#fff 0%,#fcfcfb 100%);
        box-shadow:0 22px 54px -16px rgba(20,22,26,.34);
        transition:left .6s cubic-bezier(.22,1,.28,1),
                   width .6s cubic-bezier(.22,1,.28,1),
                   top .6s cubic-bezier(.22,1,.28,1),
                   box-shadow .6s ease }
/* encaixado no retângulo da direita: os valores acompanham
   .tm-p-grid (300px de coluna, 16px de padding, 26px de gap) */
.tm-w.is-mini { left:auto; right:16px; width:300px; top:73px;
        box-shadow:0 6px 18px -8px rgba(20,22,26,.26) }

/* tudo o que se dobra: some por altura, não por display, para a abertura
   ter o que animar */
.tm-w-fold { max-height:120px; opacity:1; overflow:hidden;
        transition:max-height .6s cubic-bezier(.22,1,.28,1),
                   opacity .34s ease }
.tm-w.is-mini .tm-w-fold { max-height:0; opacity:0 }
/* no slot mostra só o essencial do mercado; o resto é do estado aberto */
.tm-w.is-mini .tm-w-body   { height:166px }
.tm-w.is-mini .tm-w-meta,
.tm-w.is-mini .tm-w-hint,
.tm-w.is-mini .tm-w-dots   { display:none }
.tm-w.is-mini .tm-w-q      { font-size:14px; margin-bottom:11px }
.tm-w.is-mini .tm-w-side   { padding:9px 11px }
.tm-w.is-mini .tm-w-side-v { font-size:17px }
.tm-w.is-mini .tm-w-screen { padding:13px 14px }

/* a seta gira: recolhido aponta para cima, aberto para baixo */
.tm-w-chev { width:9px; height:9px; flex-shrink:0; margin-left:9px;
        border-right:1.6px solid #9a9a93; border-bottom:1.6px solid #9a9a93;
        transform:rotate(-135deg) translate(-1px,-1px);
        transition:transform .5s cubic-bezier(.22,1,.28,1) }
.tm-w:not(.is-mini) .tm-w-chev { transform:rotate(45deg) translate(-2px,-2px) }

/* ── cabeçalho: o slot de marca do parceiro ───────────────────────── */
.tm-w-head   { display:flex; align-items:center; gap:10px;
               padding:11px 16px; border-bottom:1px solid #eeeeea;
               transition:background .3s ease }
.tm-w.is-mini .tm-w-head { border-bottom-color:transparent }
.tm-w-head.is-press { background:#f4f4f1 }
.tm-w.is-mini .tm-w-brand { font-size:11.5px }
.tm-w.is-mini .tm-w-bal   { font-size:10.5px; padding:2px 8px }
.tm-w-avatar { width:22px; height:22px; border-radius:50%; flex-shrink:0;
               display:flex; align-items:center; justify-content:center;
               background:linear-gradient(160deg,#4f95dc,#2f6fb4);
               color:#fff; font-size:11px; font-weight:600;
               box-shadow:0 2px 6px rgba(47,111,180,.34) }
.tm-w-brand  { font-size:13px; font-weight:600; color:#14161a;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tm-w-bal    { margin-left:auto; padding:3px 10px; border-radius:999px;
               border:1px solid #e2e2dd; background:#fafaf8; color:#14161a;
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
               font-size:11px; transition:color .4s ease, background .4s ease,
               border-color .4s ease }
.tm-w-bal.is-funded { color:#096e4a; background:#eaf5ef; border-color:#c6e3d3 }
@keyframes tmwPulse {
  0%   { box-shadow:0 0 0 0 rgba(58,128,200,.5) }
  70%  { box-shadow:0 0 0 7px rgba(58,128,200,0) }
  100% { box-shadow:0 0 0 0 rgba(58,128,200,0) }
}

/* ── abas ─────────────────────────────────────────────────────────── */
.tm-w-tabs { display:flex; align-items:center; gap:20px; padding:0 16px;
             border-bottom:1px solid #eeeeea }
.tm-w-tab  { padding:10px 0; font-size:12px; color:#9a9a93;
             box-shadow:inset 0 -2px 0 transparent;
             transition:color .35s ease, box-shadow .45s cubic-bezier(.22,1,.28,1) }
.tm-w-tab.is-on { color:#14161a; font-weight:600; box-shadow:inset 0 -2px 0 #3a80c8 }
.tm-w-rules { margin-left:auto; font-size:11px; color:#9a9a93 }
.tm-w-rules::before { content:"\24D8"; margin-right:4px }

/* ── a trilha de passos ───────────────────────────────────────────
   Quatro rótulos custam 20px e mudam a leitura da peça inteira: sem
   eles o espectador conta telas e a jornada parece longa; com eles
   conta passos, e quatro passos é pouco. O ponto preenchido marca o
   que já passou, então a barra também comunica "falta pouco".      */
.tm-w-steps { display:flex; align-items:center; gap:6px;
              padding:9px 16px; border-bottom:1px solid #eeeeea }
.tm-w-steps span { display:flex; align-items:center; gap:5px; flex:1;
              font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
              color:#b4b4ae; white-space:nowrap;
              transition:color .4s ease }
.tm-w-steps span::before { content:""; width:6px; height:6px; flex-shrink:0;
              border-radius:50%; background:#e2e2dd;
              transition:background .4s ease, box-shadow .4s ease }
.tm-w-steps span.is-done { color:#8a8a85 }
.tm-w-steps span.is-done::before { background:#9dc4e8 }
.tm-w-steps span.is-on { color:#2b6cb0 }
.tm-w-steps span.is-on::before { background:#3a80c8;
              box-shadow:0 0 0 3px rgba(58,128,200,.18) }

/* ── o palco: altura fixa, telas deslizando na direção do avanço ──── */
.tm-w-body   { position:relative; height:250px }
.tm-w-screen { position:absolute; inset:0; padding:18px 20px;
               display:flex; flex-direction:column;
               opacity:0; visibility:hidden;
               transform:translateX(30px) scale(.99);
               transition:opacity .34s ease,
                          transform .5s cubic-bezier(.22,1,.28,1),
                          visibility .5s }
.tm-w-screen.is-on  { opacity:1; visibility:visible; transform:none }
.tm-w-screen.is-out { opacity:0; visibility:visible;
                      transform:translateX(-30px) scale(.99) }

/* os filhos da tela ativa entram escalonados: dá cadência à leitura */
.tm-w-screen.is-on > * { animation:tmwRise .46s cubic-bezier(.22,1,.28,1) both }
.tm-w-screen.is-on > :nth-child(1) { animation-delay:.04s }
.tm-w-screen.is-on > :nth-child(2) { animation-delay:.10s }
.tm-w-screen.is-on > :nth-child(3) { animation-delay:.16s }
.tm-w-screen.is-on > :nth-child(4) { animation-delay:.22s }
.tm-w-screen.is-on > :nth-child(5) { animation-delay:.28s }
@keyframes tmwRise { from { opacity:0; transform:translateY(9px) }
                     to   { opacity:1; transform:none } }

/* ── 1 · mercado ──────────────────────────────────────────────────── */
.tm-w-q      { font-size:16px; line-height:1.28; font-weight:600;
               letter-spacing:-.015em; color:#14161a; margin-bottom:14px }
.tm-w-sides  { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px }
.tm-w-side   { display:block; width:100%; text-align:left; padding:11px 13px;
               border-radius:9px; border:1px solid #e2e2dd; background:#f6f6f3;
               transition:transform .3s cubic-bezier(.22,1,.28,1),
                          box-shadow .3s ease, border-color .3s ease }
.tm-w-side.is-yes { background:linear-gradient(170deg,#eef8f2,#e3f2ea);
                    border-color:#bfe0cd }
.tm-w-side.is-no  { background:linear-gradient(170deg,#fdf0f0,#f9e5e5);
                    border-color:#eecccc }
.tm-w-side.is-picked { border-color:#3a80c8; transform:translateY(-3px);
                    box-shadow:0 6px 18px -6px rgba(58,128,200,.5),
                               0 0 0 3px rgba(58,128,200,.15);
                    animation:tmwPick .7s cubic-bezier(.22,1,.28,1) }
@keyframes tmwPick {
  0%   { box-shadow:0 0 0 0 rgba(58,128,200,.45), 0 0 0 0 rgba(58,128,200,.2) }
  100% { box-shadow:0 6px 18px -6px rgba(58,128,200,.5),
                    0 0 0 3px rgba(58,128,200,.15) }
}
.tm-w-side-l { display:block; font-size:12.5px; color:#5c6270; margin-bottom:3px }
.tm-w-side-l b { font-weight:600 }
.tm-w-side-v { display:block; font-size:19px; font-weight:500;
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.is-yes .tm-w-side-l b, .is-yes .tm-w-side-v { color:#0a7a52 }
.is-no  .tm-w-side-l b, .is-no  .tm-w-side-v { color:#b4413e }
.tm-w-side.is-picked { border-color:#0a7a52 }

/* o relógio do produto: mesmo componente, estado não-urgente */
.tm-w-clock { align-self:flex-start; display:inline-flex; align-items:center;
              gap:5px; margin-bottom:9px; padding:3px 9px; border-radius:999px;
              background:#f4f4f1; color:#6a6f78;
              font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:10.5px }
.tm-w-clock svg { width:11px; height:11px }

/* ── 4 · atalhos de valor: a tela em que se toca, não se digita ──── */
.tm-w-sum    { border-radius:9px; padding:9px 11px; margin-bottom:10px;
               background:linear-gradient(170deg,#eef5fc,#e4eff9);
               border:1px solid #cfe2f4 }
.tm-w-sum-q  { font-size:12px; line-height:1.32; font-weight:600; color:#14161a;
               margin-bottom:4px }
.tm-w-sum-r  { display:flex; align-items:baseline; justify-content:space-between }
.tm-w-sum-r b{ font-size:12px; font-weight:600; color:#2b6cb0 }
.tm-w-sum-r i{ font-style:normal; font-size:10.5px; color:#8a8a85;
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.tm-w-bal-row{ display:flex; justify-content:space-between; align-items:baseline;
               font-size:11.5px; color:#6a6f78; margin-bottom:7px }
.tm-w-bal-row b { font-weight:600; color:#14161a;
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.tm-w-field.is-amount em { font-style:normal; color:#9a9a93; margin-right:7px }
.tm-w-quick  { display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
               margin-bottom:9px }
.tm-w-quick span { display:flex; align-items:center; justify-content:center;
               height:30px; border-radius:8px; border:1px solid #e2e2dd;
               background:#fafaf8; color:#5c6270; font-size:12px;
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
               transition:background .3s ease, border-color .3s ease,
                          color .3s ease, transform .3s cubic-bezier(.22,1,.28,1) }
.tm-w-quick span::before { content:"$"; opacity:.55 }
.tm-w-quick span.is-on { background:linear-gradient(170deg,#eef8f2,#e3f2ea);
               border-color:#bfe0cd; color:#0a7a52; transform:translateY(-1px) }
.tm-w-fee    { font-size:10.5px; color:#9a9a93; text-align:center;
               margin-bottom:9px; opacity:0; transition:opacity .35s ease }
.tm-w-fee.is-in { opacity:1 }
.tm-w-back   { align-self:center; margin-top:9px; font-size:11.5px; color:#8a8a85 }
.tm-w-meta   { display:flex; justify-content:space-between;
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
               font-size:10px; letter-spacing:.1em; color:#9a9a93 }
.tm-w-hint   { margin-top:auto; font-size:11.5px; color:#3a80c8 }

/* ── textos comuns ────────────────────────────────────────────────── */
.tm-w-t { font-size:16.5px; font-weight:600; letter-spacing:-.018em;
          color:#14161a; margin-bottom:5px }
.tm-w-s { font-size:12.5px; line-height:1.5; color:#6a6f78; margin-bottom:14px }

/* ── campos ───────────────────────────────────────────────────────── */
.tm-w-field { display:flex; align-items:center; height:42px; padding:0 13px;
              border:1px solid #e2e2dd; border-radius:9px; background:#fafaf8;
              font-size:13.5px; color:#14161a; margin-bottom:12px;
              transition:border-color .3s ease, box-shadow .35s ease,
                         background .3s ease }
.tm-w-field.is-amount { font-size:19px; font-weight:500;
              font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }

/* ── botão ────────────────────────────────────────────────────────── */
.tm-w-btn { margin-top:auto; height:40px; border-radius:9px; border:0;
            background:linear-gradient(170deg,#22252b,#101216); color:#fff;
            font-size:13px; font-weight:500;
            box-shadow:0 4px 14px -6px rgba(20,22,26,.7);
            transition:transform .22s cubic-bezier(.22,1,.28,1),
                       box-shadow .22s ease, filter .22s ease,
                       background .35s ease, color .35s ease;
            transition:transform .22s cubic-bezier(.22,1,.28,1),
                       box-shadow .22s ease, filter .22s ease }
.tm-w-btn.is-press { transform:scale(.965) translateY(1px);
            filter:brightness(1.5); box-shadow:0 2px 7px -4px rgba(20,22,26,.7) }
.tm-w-btn.is-buy { background:linear-gradient(170deg,#3f8ad4,#2566ab);
            box-shadow:0 4px 14px -6px rgba(37,102,171,.8) }
.tm-w-btn.is-off { background:#eeeeea; color:#a8a8a2; box-shadow:none }

/* ── 6 · depósito ─────────────────────────────────────────────────── */
.tm-w-net   { display:flex; gap:7px; margin-bottom:12px }
.tm-w-chip  { padding:4px 11px; border-radius:999px; font-size:11.5px;
              background:#f4f4f1; color:#5c6270; border:1px solid #e2e2dd }
.tm-w-chip.is-on { background:linear-gradient(170deg,#eef5fc,#e4eff9);
              color:#2b6cb0; border-color:#b9d5f0 }
.tm-w-addr  { display:flex; align-items:center; gap:10px; height:42px;
              padding:0 13px; border:1px dashed #d4d4ce; border-radius:9px;
              background:#fafaf8; margin-bottom:12px;
              font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:13px; color:#14161a }
.tm-w-addr i { width:13px; height:13px; margin-left:auto; border-radius:3px;
              border:1.5px solid #9a9a93; box-shadow:3px -3px 0 -1.5px #fafaf8,
              3px -3px 0 0 #9a9a93 }
.tm-w-status { margin-top:auto; font-size:12px; color:#6a6f78;
              display:flex; align-items:center; gap:8px }
.tm-w-status::before { content:""; width:7px; height:7px; border-radius:50%;
              background:#c9a227; flex-shrink:0;
              animation:tmwWait 1.5s ease-out infinite }
@keyframes tmwWait {
  0%   { box-shadow:0 0 0 0 rgba(201,162,39,.55) }
  70%  { box-shadow:0 0 0 7px rgba(201,162,39,0) }
  100% { box-shadow:0 0 0 0 rgba(201,162,39,0) }
}
.tm-w-status.is-ok { color:#096e4a; font-weight:500 }
.tm-w-status.is-ok::before { background:#096e4a; animation:none }

/* ── 7 · executada: o pico emocional, com mola e clarão ───────────── */
.tm-w-check { position:relative; width:40px; height:40px; border-radius:50%;
              flex-shrink:0; display:flex; align-items:center;
              justify-content:center; background:#e6f3ec; color:#096e4a;
              margin-bottom:13px }
.tm-w-check svg { width:20px; height:20px; position:relative; z-index:1 }
.tm-w-check::after { content:""; position:absolute; inset:-6px; border-radius:50%;
              background:radial-gradient(closest-side,rgba(9,110,74,.28),transparent 72%) }
.tm-w-screen.is-on .tm-w-check { animation:tmwPop .6s cubic-bezier(.3,1.6,.45,1) both }
@keyframes tmwPop { 0%   { transform:scale(.35); opacity:0 }
                    62%  { transform:scale(1.14); opacity:1 }
                    100% { transform:scale(1) } }
.tm-w-screen.is-on .tm-w-check::after { animation:tmwBloom .85s ease-out both }
@keyframes tmwBloom { 0% { transform:scale(.4); opacity:0 }
                      45% { opacity:1 }
                      100% { transform:scale(1.9); opacity:0 } }
[data-screen="done"] { align-items:flex-start; justify-content:center }

/* ── 8 · a posição ────────────────────────────────────────────────── */
.tm-w-pos     { border:1px solid #eeeeea; border-radius:10px;
                background:linear-gradient(180deg,#fff,#fafaf8); padding:13px;
                box-shadow:0 3px 12px -8px rgba(20,22,26,.4) }
.tm-w-pos-q   { font-size:13px; font-weight:600; line-height:1.3;
                color:#14161a; margin-bottom:10px }
.tm-w-pos-r   { display:flex; justify-content:space-between; align-items:baseline;
                padding-top:8px; border-top:1px solid #eeeeea; font-size:12.5px }
.tm-w-pos-r:first-of-type { border-top:0; padding-top:0 }
.tm-w-pos-side{ color:#2b6cb0; font-weight:600 }
.tm-w-pos-val { color:#14161a; font-weight:500;
                font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.tm-w-pos-dim { color:#6a6f78 }
.tm-w-pos-win { color:#096e4a; font-weight:600;
                font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }

/* ── bolinhas ─────────────────────────────────────────────────────── */
.tm-w-dots   { display:flex; align-items:center; justify-content:center;
               gap:6px; padding-bottom:14px; transition:opacity .3s ease }
.tm-w-dots i { width:5px; height:5px; border-radius:999px; background:#d8d8d2;
               transition:width .35s cubic-bezier(.22,1,.28,1), background .3s ease }
.tm-w-dots i.is-on { width:16px; background:#3a80c8 }
.tm-w.is-flow .tm-w-dots { opacity:0 }

/* ── cursor e a onda do clique ────────────────────────────────────── */
.tm-w-cursor { position:absolute; top:0; left:0; width:13px; height:19px;
               pointer-events:none; z-index:6; opacity:0;
               filter:drop-shadow(0 3px 5px rgba(20,22,26,.3));
               transition:transform .55s cubic-bezier(.32,1.06,.36,1),
                          opacity .35s ease }
.tm-w-cursor.is-on  { opacity:1 }
.tm-w-cursor.is-tap { transform:var(--tmw-pos) scale(.78) }
.tm-w-cursor svg    { width:100%; height:100% }

.tm-w-ripple { position:absolute; top:0; left:0; width:0; height:0; z-index:5;
               pointer-events:none }
.tm-w-ripple::after { content:""; position:absolute; left:-3px; top:-3px;
               width:6px; height:6px; border-radius:50%;
               border:1.5px solid rgba(58,128,200,.75);
               animation:tmwRipple .62s cubic-bezier(.22,1,.28,1) forwards }
@keyframes tmwRipple {
  0%   { transform:scale(1);  opacity:.9 }
  100% { transform:scale(7.5); opacity:0 }
}

/* ── o cartão de fecho ────────────────────────────────────────────
   A peça inteira prova que é fácil para o leitor; o cartão traduz isso
   para quem decide. Vem escuro sobre a página clara e desfocada porque
   o corte precisa ser sentido: até aqui era o site do cliente, daqui em
   diante é a Tipmarket falando.

   Os filhos entram escalonados — marca, frase, prova — para o fecho ter
   cadência em vez de aparecer de bloco. O tempo aqui é mais largo que o
   do resto da simulação de propósito: o filme corria porque estava
   provando rapidez, e esta é a única parte que quer ser lida.        */
.tm-w-outro { position:absolute; inset:0; z-index:6; display:flex;
              flex-direction:column; align-items:center; justify-content:center;
              gap:13px; padding:30px; text-align:center;
              background:radial-gradient(120% 90% at 50% 0%,#141420,#07070a 70%);
              opacity:0; visibility:hidden;
              transition:opacity .9s ease, visibility .9s }
.tm-w-outro.is-on { opacity:1; visibility:visible }
.tm-w-outro > *   { opacity:0; transform:translateY(10px) }
.tm-w-outro.is-on > * { animation:tmwRise .9s cubic-bezier(.22,1,.28,1) both }
.tm-w-outro.is-on > :nth-child(1) { animation-delay:.20s }
.tm-w-outro.is-on > :nth-child(2) { animation-delay:.55s }
.tm-w-outro.is-on > :nth-child(3) { animation-delay:.90s }

.tm-w-outro-mark { width:132px; height:auto; margin-bottom:4px; opacity:.95 }
.tm-w-outro-h    { font-size:clamp(30px,3.4vw,44px); line-height:1.06;
                   font-weight:600; letter-spacing:-.03em; color:#fff }
.tm-w-outro-s    { font-size:14.5px; line-height:1.55; max-width:34ch;
                   color:rgba(255,255,255,.66) }
@media (max-width:639px) {
  .tm-w-outro    { gap:11px; padding:24px }
  .tm-w-outro-mark { width:112px }
  .tm-w-outro-s  { font-size:13.5px }
}
@media (prefers-reduced-motion:reduce) {
  .tm-w-outro, .tm-w-outro > * { transition:none; animation:none }
  .tm-w-outro > * { opacity:1; transform:none }
}

/* ── o controle de pausa ──────────────────────────────────────────
   Voltou a pedido, para permitir examinar a peça quadro a quadro. Ele
   também devolve a conformidade com a WCAG 2.2.2, que pede mecanismo de
   pausa para movimento automático acima de cinco segundos — ver a nota
   em initWidgetDemo.                                                 */
.tm-w-ctl { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
            padding:5px 11px 5px 9px; border-radius:999px;
            border:1px solid #edf0f2; background:#fff;
            font-size:11.5px; color:#5c6270; cursor:pointer;
            transition:border-color .25s ease, color .25s ease,
                       box-shadow .25s ease }
.tm-w-ctl:hover { border-color:#c4c8d0; color:#14161a;
            box-shadow:0 3px 10px -5px rgba(20,22,26,.35) }
.tm-w-ctl::before { content:""; width:9px; height:10px; flex-shrink:0;
            border-left:3px solid currentColor; border-right:3px solid currentColor }
.tm-w-ctl.is-paused::before { border:0; width:0; height:0;
            border-left:9px solid currentColor;
            border-top:5.5px solid transparent; border-bottom:5.5px solid transparent }

@media (max-width:639px) {
  .tm-w-stage { min-height:620px }
  .tm-p-grid  { grid-template-columns:minmax(0,1fr); gap:18px }
  .tm-p-side  { order:-1 }
  .tm-w { left:4%; width:92%; top:150px }
  .tm-w.is-mini { left:16px; right:16px; width:auto; top:74px }
  .tm-w-fold { max-height:450px }
  .tm-w-body { height:262px }
  .tm-w-tabs { gap:14px }
  .tm-w-rules { display:none }
  .tm-w-q    { font-size:15px }
  .tm-w-steps span { font-size:8px; letter-spacing:.06em }
}

@media (prefers-reduced-motion:reduce) {
  .tm-w, .tm-w-fold, .tm-w-page, .tm-w-chev { transition:none }
  .tm-w-screen, .tm-w-cursor, .tm-w-side, .tm-w-btn, .tm-w-tab { transition:none }
  .tm-w-screen.is-on > *, .tm-w-screen.is-on .tm-w-check,
  .tm-w-screen.is-on .tm-w-check::after,
  .tm-w-status::before, .tm-w-side.is-picked { animation:none }
}

/* ── Numerals & rules ─────────────────────────────────────────────── */
.tm-step-num { display:inline-block; width:60px; text-align:center; border-radius:18px;
               padding:4px 8px; background:#f2f4f6; color:#0e0e14;
               font-size:14px; line-height:1.57 }

/* ── o selo no pé do cartão de etapa (Quebra 5) ─────────────────
   O slot dizia "Step 1", que o numeral grande no topo do mesmo cartão
   já diz — dois rótulos para a mesma informação, e o de baixo era o
   inútil. Agora carrega o que a etapa entrega, que é a única coisa que
   um cartão de processo tem para prometer.

   Verde, e é a exceção deliberada à regra de que verde é bid/ask: um
   tique é literalmente "aprovado", que é o outro significado que a
   página já dá à cor. O tom é o #0d7a55 que o BackOffice usa em --bo-up
   e não o --yes #2ebd85: sobre branco o token do produto cai para
   2,2:1 e não serve para texto.                                    */
.tm-tick     { display:inline-flex; align-items:center; gap:8px;
               font-size:13.5px; line-height:1.4; font-weight:500;
               color:#0d7a55 }
.tm-tick svg { width:15px; height:15px; flex-shrink:0 }
.tm-mono     { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
               font-variant-numeric:tabular-nums }
.tm-eyebrow  { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase }

/* ── Painel de afiliados (Quebra 6) ────────────────────────────────
   Contido em fundo claro, não sangrando: escura de ponta a ponta ela
   grudaria na chamada final, que também é escura, e as duas virariam um
   bloco só. Contida, ela lê como encarte — que é o que é.

   Duas colunas com um fio entre elas: à esquerda o argumento, à direita
   só o número. O fio existe para o olho não ler as duas como um
   parágrafo contínuo.                                                */
.tm-aff { position:relative; overflow:hidden; border-radius:28px;
          padding:clamp(30px,4vw,54px);
          background:radial-gradient(120% 120% at 88% 0%,#16161f,#07070a 62%);
          box-shadow:0 40px 90px -50px rgba(7,7,10,.8) }
/* Empilhado, a ordem é a do HTML: rótulo e promessa, o número, o como e
   a ação. No desktop as duas colunas se formam por posição explícita —
   cabeça e cauda uma sobre a outra na coluna 1, o número sozinho na 2.

   O número atravessa as duas linhas mas não manda nelas: com as linhas
   automáticas, um item que as cruza empurra a altura das duas, e a
   cabeça ficava com 190px para um conteúdo de 113px — um vão de 70px
   até a cauda. As linhas ganharam min-content, que as prende ao próprio
   conteúdo e deixa o número apenas ocupar o espaço que sobra.       */
.tm-aff-in { position:relative; z-index:2; display:grid; gap:26px;
             grid-template-columns:1fr }
@media (min-width:900px) {
  .tm-aff-in   { grid-template-columns:1fr auto;
                 grid-template-rows:min-content min-content;
                 column-gap:clamp(36px,5vw,72px); row-gap:20px;
                 align-items:start }
  .tm-aff-head { grid-column:1; grid-row:1 }
  .tm-aff-tail { grid-column:1; grid-row:2 }
  .tm-aff-num  { grid-column:2; grid-row:1 / span 2; align-self:center }
  /* o fio só existe onde há duas colunas para separar */
  .tm-aff-num::before { content:""; position:absolute; left:calc(-1 * clamp(18px,2.5vw,36px));
                        top:2px; bottom:2px; width:1px; background:var(--border) }
}

.tm-aff-head { display:flex; flex-direction:column; gap:14px; min-width:0 }
.tm-aff-tail { display:flex; flex-direction:column; align-items:flex-start;
               gap:20px; min-width:0 }
.tm-aff-cta  { height:52px; padding:0 24px; font-size:16px;
               line-height:1.62; white-space:nowrap }

/* ── o número ───────────────────────────────────────────────────── */
.tm-aff-num { position:relative; display:flex; flex-direction:column;
              align-items:flex-start; gap:2px; min-width:0 }
.tm-aff-upto { font-size:13px; letter-spacing:.02em; color:rgba(255,255,255,.5) }
/* O padding não é espaçamento: .v2-gradient-text pinta por
   background-clip:text, e com line-height .9 a caixa de fundo fica mais
   baixa que os glifos — o topo do 40% e o pé do % ficavam sem gradiente
   e liam como corte. O padding estica a caixa pintada; a margem
   negativa devolve o espaço, então nada se move de lugar. O lado
   direito entra na conta porque o letter-spacing negativo se aplica
   também ao último caractere e encolhia a caixa por cima do %.      */
.tm-aff-pct  { font-size:clamp(66px,8vw,104px); line-height:.9; font-weight:600;
               letter-spacing:-.05em;
               padding:.14em .09em; margin:-.14em -.09em }
.tm-aff-lab  { margin-top:4px; font-size:15px; font-weight:500; color:#fff }
.tm-aff-plus { margin-top:12px; padding:6px 13px; border-radius:999px;
               font-size:12.5px; font-weight:600; color:#cfe6fb;
               border:1px solid rgba(138,197,250,.32);
               background:rgba(138,197,250,.09) }

@media (max-width:899px) {
  .tm-aff-pct { font-size:clamp(58px,15vw,84px) }
}

/* ── Header rail ───────────────────────────────────────────────────
   Rente às bordas sobre o fundo abyss, não uma pílula de vidro
   flutuante. A orientação corria nos numerais 01..05 ao lado de cada
   rótulo; eles saíram, e sobrou um indicador de posição mais quieto e
   igualmente legível: o rótulo da seção em que você está fica branco e
   ganha um fio embaixo. A profundidade de rolagem segue na aresta de
   baixo.                                                             */
.tm-topbar {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(7,7,10,.86);
  backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid var(--border)
}
.tm-topbar-inner { height:64px }
@media (min-width:768px) { .tm-topbar-inner { height:72px } }

.tm-navlink { position:relative; display:inline-flex; align-items:center; padding:8px 0 }
.tm-navlink-label { font-size:14px; line-height:1.4; color:rgba(255,255,255,.7); transition:color .3s ease }
.tm-navlink::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.16,1,.3,1)
}
.tm-navlink:hover .tm-navlink-label,
.tm-navlink.is-active .tm-navlink-label { color:#fff }
.tm-navlink:hover::after, .tm-navlink.is-active::after { transform:scaleX(1) }
.tm-navlink:focus-visible { outline:none }
.tm-navlink:focus-visible .tm-navlink-label { color:#fff; text-decoration:underline; text-underline-offset:4px }

.tm-progress {
  position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--accent); box-shadow:0 0 10px 0 #8ac5fa73;
  transition:width .12s linear
}

/* Rail CTA — hairline while the hero's own CTA is still on screen, then
   it fills with beam once you scroll past it and becomes the only one.
   Hover always resolves to that same beam fill, so pointing at it in
   either state gives the identical answer. The bloom is tighter than
   .v2-cta's so it stays inside the bar instead of bleeding onto the
   hero below.                                                        */
.tm-railcta {
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  border-radius:9999px; padding:9px 18px; font-size:14px; font-weight:600;
  border:1px solid #ffffff2b; color:#fff; background:#ffffff08;
  position:relative; overflow:hidden;
  transition:background-color .35s ease, border-color .35s ease, color .35s ease,
             box-shadow .35s ease, transform .2s cubic-bezier(.16,1,.3,1)
}

/* the beam state — reached by hover, or by scrolling past the hero */
.tm-railcta:hover,
.tm-topbar.is-past-hero .tm-railcta {
  background:var(--accent); color:var(--bg); border-color:transparent;
  box-shadow:0 4px 16px -6px #8ac5fa9e, 0 0 0 1px #8ac5fa40
}
/* already beam, so hover still has somewhere to go */
.tm-topbar.is-past-hero .tm-railcta:hover {
  background:#9fd2fc; box-shadow:0 6px 20px -6px #8ac5fabf, 0 0 0 1px #8ac5fa66
}
.tm-railcta:active { transform:translateY(1px) }
.tm-railcta:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px #8ac5fa2e }

.tm-railcta::after {
  content:""; pointer-events:none; position:absolute; inset:0; transform:translate(-130%);
  background:linear-gradient(115deg,#0000 32%,#ffffff8c 50%,#0000 68%)
}
.tm-railcta:hover::after { animation:v2Shine .9s cubic-bezier(.16,1,.3,1) }

/* menu mobile — sangrando sobre o fundo abyss. Os numerais saíram
   junto com os do rail: é a mesma navegação, e numerar uma e não a
   outra seria o pior dos dois mundos.                               */
#mobile-menu { background:#07070a }
.tm-sheet-item {
  display:flex; align-items:center; padding:22px 0;
  border-bottom:1px solid var(--border)
}
.tm-sheet-label { font-family:'Multima',Georgia,serif; font-weight:300; font-size:30px;
                  line-height:1.1; color:#fff }
.tm-sheet-label.v2-shiny { color:var(--accent) }

/* Com a Revenue o sheet passou de seis linhas para sete: 658px contra os
   640px de um Android comum. Ele rola (overflow-y:auto no HTML), mas o
   item que ficava fora da dobra era justamente o CTA — o único que
   alguém abre o menu para procurar. Numa lista de navegação, rolar para
   achar a ação é o mesmo que esconder a ação.

   Então em tela baixa as linhas encolhem em vez de sair de cena: sete
   linhas de 62px mais 88px de topo dão 522px, que cabe até em 568px. A
   escada é a mesma do rail no topo — primeiro cede a escala, e só
   depois o conteúdo. O gatilho é max-height e não max-width porque o
   problema é de altura: um telefone deitado tem 360px de altura e
   largura de tablet.                                                 */
@media (max-height:700px) {
  #mobile-menu    { padding-top:88px }
  .tm-sheet-item  { padding:16px 0 }
  .tm-sheet-label { font-size:26px }
}

/* ── Logo ──────────────────────────────────────────────────────────
   The lockup is now vector (assets/logo*.svg), rebuilt from the source
   bitmap: the mark redrawn as geometry, the wordmark as real Poppins
   Bold outlines. It used to be set in Plus Jakarta Sans, which was the
   wrong typeface — see the note in the SVG header.                    */
.tm-logo     { display:inline-flex; align-items:center; flex-shrink:0 }
.tm-logo img { display:block; height:28px; width:auto }
@media (min-width:768px) { .tm-logo img { height:30px } }

/* ── a barra do topo no telefone ──────────────────────────────────────
   O .tm-railcta tinha 165px fixos dentro de um grupo flex-shrink-0, e a
   lockup ao lado tem 126px. Em 360px isso somava mais que a tela: o
   grupo transbordava para a direita e o hambúrguer saía do viewport —
   inteiro em 320px, onde o menu ficava literalmente inalcançável, já
   que o body corta o excesso com overflow-x:hidden em vez de rolar.

   A ordem do que cede é a mesma do resto da página: primeiro o supérfluo
   (a seta), depois a escala (fonte e vão), e só então o próprio botão.
   Abaixo de 340px ele sai — o Start operating continua no sheet do menu
   e no herói logo abaixo, então nada se perde.

   A especificidade é dupla de propósito: o gap vem de uma classe do
   Tailwind, que é injetada depois desta folha e empataria em .tm-*. */
@media (max-width:639px) {
  .tm-topbar .tm-topbar-inner { gap:12px }
  .tm-railcta { padding:7px 13px; font-size:12.5px; gap:.35rem }
  .tm-railcta svg { display:none }
}
@media (max-width:389px) { .tm-logo img { height:24px } }
@media (max-width:339px) { .tm-railcta { display:none } }

/* ── Animated logo mark (Quebra 6) ────────────────────────────────── */
.tm-logo-anim .tm-logo-line { stroke-dasharray:36; stroke-dashoffset:36;
                              animation:tmDraw 4.6s cubic-bezier(.16,1,.3,1) infinite }
.tm-logo-anim .tm-logo-head { transform-origin:center;
                              animation:tmHead 4.6s cubic-bezier(.16,1,.3,1) infinite }
.tm-logo-anim .tm-logo-glow { animation:tmGlow 4.6s ease-in-out infinite }
@keyframes tmDraw { 0%{stroke-dashoffset:36} 40%,86%{stroke-dashoffset:0} 100%{stroke-dashoffset:36} }
@keyframes tmHead { 0%,16%{opacity:0} 44%,86%{opacity:1} 100%{opacity:0} }
@keyframes tmGlow { 0%,100%{opacity:.2} 50%{opacity:.7} }

/* ── Os quatro passos (Quebra 5) ──────────────────────────────────
   Mesmo objeto em três densidades que a prova da Quebra 2: fileira de
   quatro no desktop, 2×2 no tablet e, no telefone, essa mesma fileira
   arrastada de lado. As medidas do trilho são as de lá na íntegra —
   80% de largura, 12px de gap, recuo de 24px — para que os dois
   trilhos da página sejam o mesmo gesto e não dois parecidos.

   O nome é .tm-step-rail, e não .tm-steps, porque .tm-steps já é a
   lista de etapas do box "ciclo" da Quebra 3 — e aquela regra traz
   flex-direction:column, que sobrevivia a este bloco e empilhava os
   cartões no telefone. Colisão de classe não dá erro, dá layout
   errado num breakpoint só.                                        */
.tm-step-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }

@media (max-width:1023px) {
  .tm-step-rail { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:639px) {
  .tm-step-rail {
    display:flex; gap:12px;
    margin-inline:calc(50% - 50vw);   /* a seção é px-6 aqui, −24px de cada lado */
    padding-inline:24px;              /* o primeiro cartão fica na margem do texto */
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:24px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tm-step-rail::-webkit-scrollbar { display:none }
  .tm-step-rail > .tm-step-card { flex:0 0 80%; scroll-snap-align:start }
  /* folga no fim, para o último cartão encostar à esquerda como os
     outros em vez de travar no fim da pista */
  .tm-step-rail::after { content:""; flex:0 0 calc(20% - 12px) }
}

/* Os quatro títulos não têm o mesmo comprimento, e numa fileira isso
   empurra o corpo de uns 26px abaixo do corpo de outros. A reserva de
   duas linhas alinha o início de todos os parágrafos sem obrigar o
   texto a caber num tamanho que não é o dele.

   Só a partir de sm: no trilho os cartões são lidos um por vez, e ali a
   reserva viraria buraco embaixo dos títulos de uma linha.          */
@media (min-width:640px) {
  .tm-step-card h3 { min-height:2.6em }
}

/* ── Ticking numerals ─────────────────────────────────────────────── */
.tm-tick { font-variant-numeric:tabular-nums; transition:color .35s ease }
.tm-tick.is-up   { color:#2ebd85 }

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA DE CONTATO (contato.html)
   ═══════════════════════════════════════════════════════════════════ */

/* ── o terreno ─────────────────────────────────────────────────────
   Papel morno em vez de branco, como no artefato. Não é decoração: é
   o que faz o formulário e a coluna da direita lerem como cartões
   apoiados na página. Em branco sobre branco a borda tinha de fazer
   sozinha um trabalho que o contraste de fundo faz de graça.       */
.tm-paper { background:#f7f7f4 }

/* ── o cabeçalho ───────────────────────────────────────────────────
   Números do artefato, não os do design system da home: aqui o
   cabeçalho divide a tela com um formulário, e o ds-h1 (que foi
   dimensionado para um herói de página inteira) empurrava tudo para
   baixo antes de a pessoa ver o primeiro campo.                   */
.tm-lead-h1   { font-size:clamp(38px,5.5vw,58px); line-height:1.14;
                letter-spacing:-.015em; color:#14171d }
.tm-lead-lede { font-size:18.5px; line-height:1.6; color:#5b6069 }
.tm-lead-lede .text-ink { color:#14171d }

/* ── o cartão do formulário ─────────────────────────────────────── */
.tm-lead-form { display:flex; flex-direction:column; gap:22px;
                background:#fff; border:1px solid #e4e4de; border-radius:28px;
                padding:34px }
@media (max-width:639px) { .tm-lead-form { padding:24px; border-radius:22px } }

/* ── campos ────────────────────────────────────────────────────────
   .field-input é do design system e até agora só existia lá dentro,
   porque o site não tinha formulário. Trazido na íntegra — foco, erro
   e desabilitado — para o contrato do campo ser um só nos dois lugares
   em vez de duas cópias que divergem na primeira mexida.            */
.tm-lead-form .field-input {
  width:100%; border:1px solid #e4e4de; border-radius:14px; background:#fdfdfc;
  padding:15px 16px; font-size:16px; line-height:1.4; color:#14171d;
  transition:border-color .15s ease, box-shadow .15s ease }
.tm-lead-form .field-input::placeholder { color:#a8adb5 }
.tm-lead-form textarea.field-input      { min-height:120px; resize:vertical }
.field-input:focus    { outline:none; border-color:#4f7df0;
                        box-shadow:0 0 0 3px rgba(79,125,240,.15) }
.field-error          { border-color:#e5484d !important }
.field-error:focus    { border-color:#e5484d; box-shadow:0 0 0 3px rgba(229,72,77,.12) }
.field-input:disabled { background:#f2f4f6; color:#c4c8d0; cursor:default;
                        box-shadow:none; border-color:#edf0f2 }

.tm-field       { display:flex; flex-direction:column; gap:9px; min-width:0; border:0; padding:0; margin:0 }
/* o rótulo é escuro e pesado, não uma legenda cinza: numa coluna só,
   é ele que marca onde começa cada campo */
.tm-field-label { font-size:13.5px; line-height:1; font-weight:600; color:#14171d; padding:0 }
/* Fieldset legends sit outside the flex layout and need their own spacing. */
.tm-field > legend.tm-field-label { margin-bottom:12px }
.tm-field-req   { color:#4f7df0; margin-left:3px }
.tm-field-opt   { margin-left:6px; font-size:13px; font-weight:400;
                  letter-spacing:0; color:#9aa0a8 }

/* A linha de erro já não reserva espaço. Ela reservava porque os campos
   vinham em grade 2×2, onde um campo que cresce desalinha a fileira
   inteira. Em coluna única não existe fileira para desalinhar — e a
   linha vazia debaixo de cada campo somava 16px em cada um dos cinco,
   que era o que fazia o formulário ler esparramado ao lado do
   artefato. Quem cresce agora empurra só o que vem abaixo.        */
.tm-field-err   { display:none; font-size:12px; line-height:1.33; color:#e5484d }
.tm-field.is-invalid .tm-field-err { display:block }

/* ── a escolha de produto ──────────────────────────────────────────
   Rádios de verdade por baixo: teclado, leitor de tela e o required do
   grupo continuam sendo os nativos. O visual é o rótulo, e o estado
   marcado chega por classe do JS em vez de :has(), como o resto do
   site já faz.                                                      */
/* Uma coluna, como no artefato: esta é a pergunta que decide o resto da
   página, e empilhada ela vira uma lista de caminhos para ler em vez de
   uma grade de botões para varrer. Em 2×2 as quatro competiam no olho. */
.tm-choice { display:grid; grid-template-columns:1fr; gap:10px }
.tm-choice-opt {
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:15px 16px; text-align:center;
  border:1px solid #e4e4de; border-radius:14px; background:#fdfdfc;
  font-size:14.5px; font-weight:600; line-height:1.2; color:#14171d; cursor:pointer;
  transition:border-color .12s ease, background-color .12s ease, color .12s ease
}
.tm-choice-opt input { position:absolute; inset:0; opacity:0; margin:0;
                       width:100%; height:100%; cursor:pointer }
.tm-choice-opt:hover { border-color:#c9cfd8 }
.tm-choice-opt.is-on { border-color:#4f7df0; background:#edf2fd; color:#2b4fa8 }
.tm-choice-opt:focus-within { border-color:#4f7df0;
                              box-shadow:0 0 0 3px rgba(79,125,240,.15) }
.tm-field.is-invalid .tm-choice-opt:not(.is-on) { border-color:#e5484d }

/* ── envio ─────────────────────────────────────────────────────────
   Pílula cheia, escura, com a seta como glifo na própria linha do
   texto. O .cta-btn da home traz um disco de ícone que serve a um CTA
   de navegação; aqui o botão é o fim do formulário, e o disco fazia a
   linha inteira ler como link e não como envio.                    */
.tm-hp { position:absolute; width:1px; height:1px; overflow:hidden;
         clip-path:inset(50%); white-space:nowrap }

.tm-lead-submit {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; border:0; border-radius:999px; background:#14171d; color:#fff;
  font-size:16.5px; font-weight:600; line-height:1; padding:19px; cursor:pointer;
  transition:background-color .15s ease }
.tm-lead-submit:hover { background:#4f7df0 }
.tm-lead-submit:focus-visible { outline:3px solid #4f7df0; outline-offset:2px }
.tm-lead-submit .tm-lead-arrow { font-size:15px; line-height:1 }
.tm-lead-submit[disabled] { background:#5b6069; cursor:default }

.tm-lead-consent { font-size:12.5px; line-height:1.5; color:#8a9099; text-align:center }

.tm-lead-status         { display:none; color:#e5484d; text-align:center }
.tm-lead-status.is-on   { display:block }

/* ── o cartão de enviado ───────────────────────────────────────────
   Vem escuro sobre a página clara pelo mesmo motivo que o cartão de
   fecho do widget na Quebra 4: até aqui a página era um formulário,
   daqui em diante é a Tipmarket falando. É o único instante em que a
   marca conversa em primeira pessoa com alguém que acabou de virar
   cliente, e um retângulo branco com um tique dentro desperdiça isso.

   A coluna do "o que esperar" sai junto. Aquele texto existia para
   convencer alguém a preencher o formulário; depois do envio não há
   mais ninguém para convencer, e mantê-lo ao lado da confirmação só
   divide a atenção do único recado que ainda importa.               */
.tm-lead-ok { display:none; position:relative; overflow:hidden;
              border-radius:24px; padding:56px 40px 52px; text-align:center;
              scroll-margin-top:104px;
              background:radial-gradient(120% 90% at 50% 0%,#151522,#07070a 68%);
              box-shadow:0 30px 70px -40px rgba(7,7,10,.75) }
.tm-lead.is-sent .tm-lead-form { display:none }
.tm-lead.is-sent .tm-lead-ok   { display:block }
.tm-lead-ok:focus { outline:none }
.tm-lead-ok:focus-visible { outline:none;
                            box-shadow:0 30px 70px -40px rgba(7,7,10,.75),
                                       0 0 0 2px rgba(138,197,250,.55) }

.tm-lead-ok-inner { position:relative; z-index:2; display:flex; flex-direction:column;
                    align-items:center; gap:18px }

.tm-lead-check { display:inline-flex; align-items:center; justify-content:center;
                 width:56px; height:56px; border-radius:50%; color:#8ac5fa;
                 background:rgba(138,197,250,.12);
                 border:1px solid rgba(138,197,250,.28);
                 box-shadow:0 0 0 8px rgba(138,197,250,.05),
                            0 12px 34px -14px rgba(138,197,250,.7) }
.tm-lead-check svg { width:26px; height:26px }

.tm-lead-ok-h { font-size:clamp(30px,3.2vw,42px); line-height:1.06;
                letter-spacing:-.03em; color:#fff; margin-top:2px }
.tm-lead-ok-p { max-width:44ch; font-size:15.5px; line-height:1.6;
                color:rgba(255,255,255,.68) }

/* o e-mail devolvido no texto: destacado para ser conferido de relance,
   sem virar link — clicar nele não deveria abrir nada */
.tm-lead-ok-mail { font-weight:600; color:#fff; overflow-wrap:anywhere }

.tm-lead-ok-link { display:inline-flex; align-items:center; gap:8px; margin-top:6px;
                   height:46px; padding:0 22px; border-radius:999px;
                   font-size:14.5px; font-weight:500; color:#cfe6fb;
                   border:1px solid rgba(255,255,255,.16);
                   transition:color .25s ease, background-color .25s ease,
                              border-color .25s ease, transform .2s cubic-bezier(.16,1,.3,1) }
.tm-lead-ok-link svg { width:15px; height:15px;
                       transition:transform .25s cubic-bezier(.16,1,.3,1) }
.tm-lead-ok-link:hover { color:#fff; background:rgba(138,197,250,.10);
                         border-color:rgba(138,197,250,.45) }
.tm-lead-ok-link:hover svg { transform:translate(2px,-2px) }
.tm-lead-ok-link:focus-visible { outline:none; border-color:#8ac5fa;
                                 box-shadow:0 0 0 3px rgba(138,197,250,.22) }

/* sem a coluna da direita, a confirmação assume a largura toda — e é
   contida no centro, senão vira uma faixa de 1280px com três linhas */
.tm-lead-shell.is-sent .tm-aside { display:none }
.tm-lead-shell.is-sent .tm-lead  { width:100%; max-width:680px; margin:0 auto }
@media (min-width:1024px) { .tm-lead-shell.is-sent { grid-template-columns:1fr } }

/* A troca é instantânea no DOM, e instantânea ela lê como recarregamento
   de página. Meio segundo de subida diz que a mesma coisa mudou de
   estado — e o tique chega depois, escalonado com o texto, porque é ele
   que responde à pergunta que a pessoa está fazendo.               */
.tm-lead.is-sent .tm-lead-ok { animation:tmLeadOk .58s cubic-bezier(.16,1,.3,1) both }
.tm-lead.is-sent .tm-lead-ok-inner > * { animation:tmLeadRise .55s cubic-bezier(.22,1,.28,1) both }
.tm-lead.is-sent .tm-lead-check          { animation:tmLeadTick .55s cubic-bezier(.22,1,.28,1) .16s both }
.tm-lead.is-sent .tm-lead-ok-inner > :nth-child(2) { animation-delay:.30s }
.tm-lead.is-sent .tm-lead-ok-inner > :nth-child(3) { animation-delay:.40s }
.tm-lead.is-sent .tm-lead-ok-inner > :nth-child(4) { animation-delay:.52s }
@keyframes tmLeadOk   { from { opacity:0; transform:translateY(14px) }
                        to   { opacity:1; transform:none } }
@keyframes tmLeadRise { from { opacity:0; transform:translateY(9px) }
                        to   { opacity:1; transform:none } }
@keyframes tmLeadTick { 0%   { opacity:0; transform:scale(.55) }
                        62%  { opacity:1; transform:scale(1.1) }
                        100% { opacity:1; transform:scale(1) } }

@media (max-width:639px) {
  .tm-lead-ok   { padding:42px 24px 40px }
  .tm-lead-ok-p { font-size:14.5px }
}

/* ── a coluna do que esperar ───────────────────────────────────────
   Três cartões, como no artefato: sobre o papel morno cada bloco fica
   sendo uma resposta fechada em si — "o que acontece depois", "o que a
   gente cobre", "para time técnico" — em vez de um texto corrido em
   que os três assuntos se encostam.                                */
.tm-aside       { display:grid; gap:16px; align-content:start }
.tm-aside-block { display:flex; flex-direction:column; gap:10px;
                  background:#fff; border:1px solid #e4e4de; border-radius:18px;
                  padding:26px 28px }
.tm-aside-h     { font-size:19px; line-height:1.25; color:#14171d }
.tm-aside-block p { font-size:15px; line-height:1.6; color:#5b6069 }
/* o rótulo mono que abre cada bloco: diz de que assunto é o parágrafo
   antes de a pessoa começar a ler. Azul, como no artefato — em cinza
   ele lia como aviso legal em vez de índice. */
.tm-aside-badge { color:#4f7df0; font-size:11px; letter-spacing:.2em }
/* o último é escuro: é o fecho da coluna, e o contraste marca que ali
   a Tipmarket fala em primeira pessoa */
.tm-aside-block--dark { background:#0a0e15; border-color:#0a0e15; color:#f2f4f8 }
.tm-aside-block--dark p { color:#98a2b3 }
.tm-aside-block--dark .tm-aside-badge { color:#8cc5f2 }
.tm-aside-block--dark .tm-em { color:#fff; font-weight:600 }

.tm-aside-list        { display:grid; gap:10px; margin:0; padding:0; list-style:none }
.tm-aside-list li     { position:relative; padding-left:17px;
                        font-size:15px; line-height:1.5; color:#5b6069 }
.tm-aside-list li::before { content:""; position:absolute; left:0; top:.5em;
                            width:7px; height:7px; border-radius:50%; background:#4f7df0 }

/* ── o "voltar ao site" do rail ────────────────────────────────────
   Ocupa o lugar do "Quero operar", que na página de contato apontaria
   para ela mesma. É discreto de propósito: aqui a única coisa que deve
   pedir clique é o submit.                                          */
.tm-railback {
  align-items:center; gap:.5rem; white-space:nowrap;
  border-radius:9999px; padding:9px 16px; font-size:14px;
  color:rgba(255,255,255,.7); border:1px solid transparent;
  transition:color .25s ease, background-color .25s ease, border-color .25s ease
}
.tm-railback:hover { color:#fff; background:#ffffff0d; border-color:#ffffff2b }
.tm-railback:focus-visible { outline:none; border-color:var(--accent);
                             box-shadow:0 0 0 3px #8ac5fa2e }

/* ── A logo se montando (Quebra 7) ────────────────────────────────────
   Um rastro de luz atravessa a seção ondulando, revela o nome ao passar
   por cima dele e, na ponta esquerda, enrola num laço que se aperta até
   virar o contorno do ícone — que então acende.

   A pista é a largura da viewport, não a da lockup: a fita cruza a
   seção inteira, e um canvas do tamanho da logo cortaria a viagem. Daí
   o left:50% + translateX(-50%), que centra uma faixa de 100vw sobre um
   elemento que está no meio de uma coluna centralizada.

   Não intercepta ponteiro e sai de cena quando termina.            */
.tm-logo-anim { position:relative }
.tm-logo-particles {
  /* width/height explícitos: <canvas> é elemento replaced — sem largura
     declarada ele ignora left/right e fica no buffer intrínseco. */
  position:absolute; left:50%; transform:translateX(-50%);
  width:100vw; max-width:100vw; height:340px; top:50%; margin-top:-170px;
  pointer-events:none; z-index:2;
  opacity:0; transition:opacity .3s ease;
}
.tm-logo-anim.is-assembling .tm-logo-particles { opacity:1 }
/* no telefone a faixa é mais baixa: a seção é estreita e uma pista alta
   levaria a fita por cima do headline */
@media (max-width:639px) {
  .tm-logo-particles { height:210px; margin-top:-105px }
}
.tm-logo-anim.is-done       .tm-logo-particles { opacity:0 }

/* O ícone espera apagado e só acende no fim, quando o laço fecha.

   O NOME não entra aqui de propósito: ele fica em opacity 1 o tempo
   todo e quem o esconde é uma máscara em gradiente que o JS vai abrindo
   conforme a fita passa por cima. Com opacity ele acenderia inteiro de
   uma vez; com máscara, acende a parte por onde a luz já passou. */
.tm-logo-anim > span { transition:opacity .42s ease }
.tm-logo-anim.is-assembling > span { opacity:0 }

@media (prefers-reduced-motion: reduce) {
  .v2-gradient-text, .ds-dot, .ds-breathe, .tm-pill-track, .tm-logo-anim *,
  .tm-lead.is-sent .tm-lead-ok, .tm-lead.is-sent .tm-lead-check,
  .tm-lead.is-sent .tm-lead-ok-inner > *,
  .hiw-glow-1, .hiw-glow-2, .hiw-glow-3, .hiw-glow-4 { animation:none !important }
  [data-reveal] { opacity:1; transform:none }
}

/* ── HERO · tipografia 1:1 com o artefato v2 ───────────────────────────
   O artefato compoe o hero em Poppins 600 (titulo, com a segunda frase
   em azul) e Inter 19px (lede). A mesma dupla Poppins/Inter agora cobre
   o site inteiro via .font-display / .font-body (base.css); as regras
   abaixo só existem porque o hero usa um tamanho e peso próprios, fora
   do padrão ds-h2/ds-h3 do resto das seções.
   ═══════════════════════════════════════════════════════════════════ */
.tm-hero-h1 {
  font-family: Poppins, Inter, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: #14171D;
}
.tm-hero-h1 .hl { color: #4F7DF0 }

.tm-hero-lede {
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #5B6069;
  max-width: 56ch;
}
.tm-hero-lede b { color: #14171D; font-weight: 600 }

/* ── BANNER DE CONTATO · SBC Summit Lisbon ─────────────────────────────
   Vem do pacote "tipmarket-banner-clicavel" (trecho de incorporar), mas
   na escala do site e não na do pacote, que foi desenhado como peça
   solta de 1440×480 e, dentro da página, gritava mais alto que o hero:

   · Sem as @font-face em base64 do pacote. Os dois arquivos embutidos
     são byte a byte o Poppins-700-latin e o Inter-latin-var que o
     fonts.css já serve.
   · Sem o logo do pacote. Logo abaixo do rail ele repetia a lockup que
     já está na barra, e as duas empilhadas liam como marca duplicada.
   · Sem o min-height:480px. Ele centralizava o conteúdo numa caixa
     maior que o próprio conteúdo, e a sobra virava vão em cima e
     embaixo; agora a altura é o conteúdo mais 40px de cada lado.
   · Tamanhos tirados das mesmas réguas do resto da página: título na
     do .ds-h3, evento na do .ds-h4, e-mail na do .ds-paragraph, os
     rótulos são .tm-eyebrow (no HTML) e os pesos são 600, como os
     títulos. Os canais viraram pílulas de 52px com texto de 16px, a
     medida dos CTAs do hero e do .v2-cta, em vez de cartões de 76px.
   · A faixa sangra de ponta a ponta, e o conteúdo usa o mesmo recuo do
     rail em qualquer largura (px-6/px-8 dentro de max-w-[1280px]):
     texto e botões do banner alinham com o logo e o CTA do rail.
   · O wrap empurra o banner para baixo do rail fixo (64/72px + fio) e
     pinta o fundo atrás dele, para o rail translúcido continuar lendo
     escuro no topo da página.
   Classes isoladas por .tm-contact-banner; nenhuma colide com o resto. */
.tm-contact-banner-wrap { background:#07070a; padding-top:65px }
@media (min-width:768px) { .tm-contact-banner-wrap { padding-top:73px } }
/* O hero traz padding-top:128px inline para caber sob o rail. Com o
   banner no meio ele já não fica sob o rail, e os 128px viravam um vão
   branco; aqui ele volta ao mesmo respiro que tinha abaixo da barra
   (128px menos a altura do rail). O !important é para vencer o inline;
   pelo "+" isto some sozinho se o banner sair.                        */
.tm-contact-banner-wrap + #hero > div { padding-top:calc(128px - 65px) !important }
@media (min-width:768px) {
  .tm-contact-banner-wrap + #hero > div { padding-top:calc(128px - 73px) !important }
}

.tm-contact-banner, .tm-contact-banner * { box-sizing:border-box }
.tm-contact-banner {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  align-items:center; gap:28px 64px;
  /* o mesmo recuo do rail: 32px, e acima de 1280px o miolo de 1216px */
  padding:40px max(32px,calc((100% - 1216px) / 2));
  color:#f5f7fa; font-family:'Inter',Arial,sans-serif;
  background:radial-gradient(ellipse at 97% 0%,#1a4b7b 0%,#0c2038 24%,transparent 58%),#07070a;
  isolation:isolate; overflow:hidden
}
.tm-contact-banner .tm-copy    { min-width:0 }
.tm-contact-banner .tm-heading { margin:0 0 4px; font-family:'Poppins',Arial,sans-serif; font-weight:600;
                                 font-size:clamp(28px,4vw,40px); line-height:1.2; letter-spacing:.01em; color:#fff }
.tm-contact-banner .tm-event   { margin:0; font-family:'Poppins',Arial,sans-serif; font-weight:600;
                                 font-size:20px; line-height:1.3; color:#8ac5fa }
.tm-contact-banner .tm-email   { margin:22px 0 0 }
.tm-contact-banner .tm-label   { display:block; margin:0 0 2px; color:#a8b2c0 }
.tm-contact-banner .tm-email a { font-size:16px; line-height:1.62; color:#f5f7fa; text-decoration:none;
                                 text-underline-offset:4px; overflow-wrap:anywhere }
.tm-contact-banner .tm-email a:hover { text-decoration:underline; color:#8ac5fa }

.tm-contact-banner .tm-actions      { display:flex; flex-direction:column; gap:12px }
.tm-contact-banner .tm-action-title { margin:0 0 2px; color:#8ac5fa }
/* primário no molde do .v2-cta, secundário no do .tm-railcta em repouso */
.tm-contact-banner .tm-channel {
  display:flex; align-items:center; gap:12px; min-height:52px; padding:0 20px 0 22px;
  border:1px solid transparent; border-radius:9999px;
  font-size:16px; font-weight:600; line-height:1.3; text-decoration:none;
  color:#07070a; background:#8ac5fa;
  box-shadow:0 10px 36px -8px #8ac5fa8c, 0 0 0 1px #8ac5fa40;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease,
             transform .2s cubic-bezier(.16,1,.3,1)
}
.tm-contact-banner .tm-channel:hover { background:#9fd2fc; transform:translateY(-1px);
                                       box-shadow:0 14px 44px -8px #8ac5faa6, 0 0 0 1px #8ac5fa59 }
.tm-contact-banner .tm-channel-secondary       { color:#fff; background:#ffffff08; border-color:#ffffff2b; box-shadow:none }
.tm-contact-banner .tm-channel-secondary:hover { background:#8ac5fa14; border-color:#8ac5fa80; box-shadow:none }
.tm-contact-banner .tm-icon  { width:18px; height:18px; flex:0 0 auto }
.tm-contact-banner .tm-arrow { width:16px; height:16px; margin-left:auto; flex:0 0 auto }
.tm-contact-banner a:focus-visible { outline:2px solid #fff; outline-offset:3px }

@media (max-width:1100px) {
  .tm-contact-banner { grid-template-columns:minmax(0,1fr) minmax(220px,300px); column-gap:40px;
                       padding-top:32px; padding-bottom:32px }
}
/* abaixo de 768px o rail passa a px-6 */
@media (max-width:767px) {
  .tm-contact-banner { padding-left:24px; padding-right:24px }
}
@media (max-width:720px) {
  .tm-contact-banner { grid-template-columns:1fr; gap:24px; padding-top:28px; padding-bottom:32px;
                       background:radial-gradient(ellipse at 110% 0%,#194875 0%,transparent 65%),#07070a }
  .tm-contact-banner .tm-event   { font-size:18px }
  .tm-contact-banner .tm-email   { margin-top:18px }
  .tm-contact-banner .tm-actions { gap:10px }
}
@media (prefers-reduced-motion:reduce) {
  .tm-contact-banner .tm-channel,
  .tm-contact-banner .tm-channel:hover { transition:none; transform:none }
}