/* ============================================================================
   Trail blog - folha compartilhada do indice e dos artigos.

   Mora em arquivo proprio (e nao dentro do HTML, como na pagina de vendas) porque
   sao muitas paginas: uma folha so mantem todas identicas e o navegador guarda ela
   depois do primeiro artigo. A CSP do vhost permite (style-src 'self').

   Os tokens sao COPIA da pagina de vendas (site/index.html). Nao ha import entre as
   duas: se um hex mudar la, tem que mudar aqui. Escala de PRETO com um toque de azul
   em cada degrau, indigo so em acao, canto reto, sem glow - o contrato da marca.
   ========================================================================= */

:root {
  --canvas: #08090a;
  --panel: #101218;
  --raise: #161922;
  --sunk: #0b0c0e;
  --card: rgba(255, 255, 255, 0.035);
  --surface: rgba(255, 255, 255, 0.062);
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.082);
  --ink: #f7f8f8;
  --body: #dde1e8;
  --muted: #b6bcc7;
  --faint: #99a0ac;
  --accent: #5e6ad2;
  --accent-lift: #828fff;
  --dim: #98a1b5;

  --st-backlog: #8a8f98;
  --st-todo: #5093f8;
  --st-doing: #bb8d00;
  --st-blocked: #e26680;
  --st-done: #06a231;

  --maxw: 1160px;
  --readw: 700px;
  --gutter: clamp(20px, 5vw, 60px);
  --s-sec: clamp(64px, 8vw, 104px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: 'Space Grotesk', Inter, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* O `height: auto` NAO e enfeite. As fotos trazem width/height no proprio HTML (que e o que
   impede a pagina de pular enquanto elas carregam), e sem esta linha o navegador OBEDECE a
   altura escrita la: a capa saia com 900px de altura em qualquer largura, esticada, inclusive
   no celular. Com ela, a proporcao 16:9 volta a mandar. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: rgba(94, 106, 210, 0.4);
  color: #fff;
}

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

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------- nav
   Mesmo cabecalho da pagina de vendas, com duas diferencas deliberadas: os links
   apontam pra pagina de vendas (nao pra ancora desta), e nao ha seletor de idioma -
   o blog e so em ingles, e um seletor que nao troca nada seria mentira na tela. */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 66px;
  display: flex;
  align-items: center;
  background: rgba(8, 9, 10, 0.84);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav .wrap {
  display: flex;
  align-items: center;
  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--brand);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.028em;
  font-size: 21px;
  line-height: 1;
}

.nav .brand {
  font-size: 24px;
}

.nav .brand svg {
  width: 36px;
  height: 36px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 14.5px;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 1px;
  background: var(--accent-lift);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav-links a:hover,
.nav-links a.on {
  color: var(--ink);
}

.nav-links a.on::after {
  transform: scaleX(1);
}

.nav-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin-inline: 8px;
}

.nav-login {
  font-size: 14.5px;
  white-space: nowrap;
  color: var(--muted);
  padding: 8px 4px;
  transition: color 0.2s var(--ease);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}

.btn:hover {
  background: #6b76dd;
}

.btn:active {
  transform: translateY(1px);
}

.btn-lg {
  height: 48px;
  padding: 0 26px;
  font-size: 15.5px;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------- tipografia */

.display {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 550;
  color: var(--ink);
  text-wrap: balance;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--faint);
}

.lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- rodape */

footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 44px 52px;
  margin-top: var(--s-sec);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}

.foot-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}

.foot a,
.foot p {
  font-size: 13.5px;
  color: var(--faint);
}

.foot a:hover {
  color: var(--body);
}

/* ============================================================================
   INDICE DO BLOG
   Lista editorial, nao grade de cartoes: o contrato da marca reprova moldura de
   cartao repetida. O primeiro artigo e grande; o resto sao fileiras separadas por
   um risco fino. A diferenca de altura entre os dois e o que da ritmo a pagina.
   ========================================================================= */

.blogx {
  padding-top: clamp(56px, 8vw, 96px);
}

/* Mesma regra do artigo: a largura limita o TEXTO, nao a caixa. Limitando a caixa, ela se
   centraliza sozinha e a abertura do blog nasce 170px a direita da lista que vem abaixo. */
.blog-head {
  padding-bottom: clamp(44px, 6vw, 76px);
}

.blog-head > * {
  max-width: 820px;
}

.blog-head .label {
  margin-bottom: 20px;
}

.blog-head .display {
  font-size: clamp(34px, 5vw, 60px);
}

.blog-head .lede {
  margin-top: 26px;
  max-width: 62ch;
}

.dim {
  color: var(--dim);
}

.lead-post {
  display: grid;
  gap: clamp(24px, 3.4vw, 46px);
  align-items: center;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.lead-img,
.row-img {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--sunk);
  border: 1px solid var(--line-soft);
}

/* A foto e clara e a pagina e preta. Sem esta camada ela vira um retangulo aceso
   colado no escuro. O veu escurece o pe e um leve dessaturado tira o brilho de
   banco de imagem, entao ela pertence a pagina em vez de estar por cima dela. */
.lead-img::after,
.row-img::after,
.hero-fig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0.1) 0%, rgba(8, 9, 10, 0.46) 100%);
  pointer-events: none;
}

/* Na capa do artigo o veu e mais leve: ali nao ha texto por cima pra proteger, e o unico
   trabalho dele e costurar o pe da foto no preto da pagina. Com o veu da lista, a foto
   sumia. */
.hero-fig::after {
  background: linear-gradient(180deg, rgba(8, 9, 10, 0) 42%, rgba(8, 9, 10, 0.34) 100%);
}

.lead-img img,
.row-img img,
.rel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04) brightness(0.92);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}

.lead-post:hover .lead-img img,
.row:hover .row-img img {
  transform: scale(1.028);
  filter: saturate(0.98) contrast(1.04) brightness(1);
}

.lead-img {
  aspect-ratio: 16 / 10;
}

.row-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.lead-txt h2 {
  margin-top: 18px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 550;
  color: var(--ink);
  text-wrap: balance;
}

.lead-txt > p:last-of-type {
  margin-top: 16px;
  color: var(--muted);
  max-width: 54ch;
  text-wrap: pretty;
}

.lead-txt h2 a:hover,
.row-txt h2 a:hover {
  color: var(--accent-lift);
}

.lead-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent-lift);
}

.lead-go svg {
  transition: transform 0.3s var(--ease);
}

.lead-post:hover .lead-go svg {
  transform: translateX(4px);
}

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

.row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
  padding-block: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--line-soft);
}

.row-img {
  aspect-ratio: 16 / 10;
}

.row-txt h2 {
  margin-top: 13px;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 550;
  color: var(--ink);
  text-wrap: balance;
}

.row-txt > p:last-child {
  margin-top: 11px;
  font-size: 16px;
  color: var(--faint);
  max-width: 62ch;
  text-wrap: pretty;
}

@media (min-width: 860px) {
  .lead-post {
    grid-template-columns: 1.15fr 1fr;
  }
}

@media (max-width: 620px) {
  .row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .row-img {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================================
   ARTIGO
   ========================================================================= */

.post {
  padding-top: clamp(40px, 5vw, 68px);
}

/* TUDO QUE E TEXTO COMECA NA MESMA LINHA VERTICAL: titulo, corpo e perguntas. E a mesma
   borda esquerda da foto, do convite e do rodape - ou seja, a pagina inteira tem UMA margem
   esquerda, nao tres. A largura e que muda: o texto para em 700px porque linha mais longa
   que isso cansa; a foto e o convite ocupam a coluna toda. Esse contraste de largura e o que
   da ritmo, do mesmo jeito que a pagina de vendas alterna secao cheia e secao vazia. */
.post-head > * {
  max-width: var(--readw);
}

.crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 22px;
}

.crumb a:hover {
  color: var(--body);
}

.crumb span {
  margin-inline: 6px;
  color: var(--line);
}

.post-head .display {
  font-size: clamp(31px, 3.6vw, 46px);
}

.stand {
  margin-top: 22px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 54ch;
  text-wrap: pretty;
}

.byline {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero-fig {
  position: relative;
  margin: clamp(34px, 4vw, 52px) auto 0;
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gutter);
}

.hero-fig img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  filter: saturate(0.9) contrast(1.03) brightness(0.98);
}

.hero-fig::after {
  left: var(--gutter);
  right: var(--gutter);
  bottom: auto;
  aspect-ratio: 16 / 9;
}

.hero-fig figcaption {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--faint);
}

.hero-fig figcaption a {
  border-bottom: 1px solid var(--line);
}

.hero-fig figcaption a:hover {
  color: var(--body);
}

/* --------------------------------------------------------- corpo do artigo */

.body {
  padding-top: clamp(40px, 5vw, 64px);
  font-size: 18px;
  line-height: 1.72;
  color: var(--body);
}

.body > * {
  max-width: var(--readw);
}

.body > p,
.body > ul,
.body > ol,
.body > blockquote,
.body > figure,
.body > .tablewrap,
.body > pre,
.body > dl {
  margin-top: 22px;
}

.body > h2 {
  margin-top: clamp(46px, 5vw, 68px);
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.028em;
  font-weight: 550;
  color: var(--ink);
  text-wrap: balance;
  scroll-margin-top: 90px;
}

.body > h3 {
  margin-top: 38px;
  font-size: 19.5px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  scroll-margin-top: 90px;
}

.body a {
  color: var(--accent-lift);
  border-bottom: 1px solid rgba(130, 143, 255, 0.32);
  transition: border-color 0.2s var(--ease);
}

.body a:hover {
  border-bottom-color: var(--accent-lift);
}

.body strong {
  color: var(--ink);
  font-weight: 600;
}

.body ul,
.body ol {
  padding-left: 22px;
}

.body li {
  margin-top: 9px;
}

.body li::marker {
  color: var(--faint);
}

.body blockquote {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 22px;
  color: var(--muted);
}

.body code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--sunk);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 1px 5px;
  color: #cdd3e0;
}

.body pre {
  background: var(--sunk);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
}

.body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

/* Tabela: e o formato que os buscadores e as respostas de IA mais citam, entao ela
   precisa ser legivel de verdade, nao um enfeite. Rola sozinha no celular. */
.body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  margin-top: 24px;
}

.body th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 14px 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}

.body td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  vertical-align: top;
}

.body td:first-child {
  color: var(--ink);
  font-weight: 500;
}

.body figure {
  margin-inline: 0;
}

.body figure img {
  width: 100%;
  border: 1px solid var(--line-soft);
}

.body figcaption {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  line-height: 1.55;
  color: var(--faint);
}

/* Figura larga: sai da coluna de leitura e ocupa a largura toda do conteudo. Serve pra foto
   e pra print de tela, que ficam ilegiveis espremidos em 700px. */
.body > .wide {
  max-width: none;
  width: 100%;
}

/* --------------------------------------------------- a resposta curta (GEO)
   Vai ANTES do texto e responde a pergunta do titulo em duas ou tres frases. Serve
   duas plateias ao mesmo tempo: quem chegou pelo buscador e quer a resposta agora,
   e o motor de resposta de IA, que cita um paragrafo autocontido muito mais do que
   cita um artigo inteiro. */
.answer {
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(94, 106, 210, 0.09), rgba(94, 106, 210, 0));
  padding: 20px 24px 22px;
  margin-bottom: 8px;
}

.answer .label {
  margin-bottom: 11px;
}

.answer p {
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.6;
}

.answer p + p {
  margin-top: 12px;
  color: var(--muted);
}

.takeaways {
  max-width: var(--readw);
  margin-top: clamp(46px, 5vw, 64px);
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.takeaways .label {
  margin-bottom: 16px;
}

.takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.takeaways li {
  position: relative;
  padding-left: 24px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.takeaways li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 11px;
  height: 1px;
  background: var(--accent-lift);
}

/* ------------------------------------------------------------------- FAQ */

.faq {
  max-width: var(--readw);
  margin-top: clamp(56px, 6vw, 84px);
  border-top: 1px solid var(--line);
  padding-top: 30px;
}

.faq > h2 {
  font-size: clamp(22px, 2vw, 27px);
  letter-spacing: -0.026em;
  font-weight: 550;
  color: var(--ink);
  margin-bottom: 8px;
}

.qa {
  border-bottom: 1px solid var(--line-soft);
}

.qa summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

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

.qa summary h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--body);
  transition: color 0.2s var(--ease);
}

.qa summary:hover h3,
.qa[open] summary h3 {
  color: var(--ink);
}

.qa-mark {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  margin-left: auto;
}

.qa-mark::before,
.qa-mark::after {
  content: '';
  position: absolute;
  inset: 6px 0 auto;
  height: 1px;
  background: var(--faint);
  transition: transform 0.3s var(--ease);
}

.qa-mark::after {
  transform: rotate(90deg);
}

.qa[open] .qa-mark::after {
  transform: rotate(0deg);
}

.qa-a {
  padding: 0 34px 20px 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.68;
}

.qa-a p + p {
  margin-top: 14px;
}

.qa-a a {
  color: var(--accent-lift);
  border-bottom: 1px solid rgba(130, 143, 255, 0.32);
}

/* --------------------------------------------------------------- o convite
   Um so por pagina, no fim, e quieto. O texto do artigo tem que valer sozinho pra
   quem nunca vai comprar - senao o artigo e so anuncio disfarcado e nao ranqueia. */

.cta {
  margin-top: clamp(56px, 6vw, 84px);
}

.cta-in {
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(94, 106, 210, 0.14), rgba(94, 106, 210, 0.03) 62%);
  padding: clamp(28px, 3.4vw, 44px);
}

.cta-say {
  margin-top: 16px;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}

.cta-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 26px;
}

.cta-more {
  font-size: 14.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

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

.cta-fine {
  margin-top: 16px;
  font-size: 13px;
  color: var(--faint);
}

/* ------------------------------------------------------------ relacionados */

.relateds {
  margin-top: clamp(56px, 6vw, 80px);
}

.relateds .label {
  margin-bottom: 20px;
}

.rel-list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line-soft);
}

.rel {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 20px;
  align-items: center;
  padding-block: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.rel img {
  width: 128px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--line-soft);
}

.rel b {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--body);
  transition: color 0.2s var(--ease);
}

.rel:hover b {
  color: var(--accent-lift);
}

.rel i {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 560px) {
  .rel {
    grid-template-columns: 96px 1fr;
    gap: 15px;
  }

  .rel img {
    width: 96px;
    height: 54px;
  }
}

/* ------------------------------------------------- indice lateral do artigo
   So aparece onde ha margem sobrando de verdade. Abaixo disso ele brigaria com a
   coluna de leitura, e a coluna de leitura ganha sempre. */

.rail {
  display: none;
}

/* A CONTA DA POSICAO, pra ele nunca encostar no texto: o indice fica exatamente uma
   largura-dele-mais-um-respiro a esquerda de onde o texto comeca. Com a posicao anterior
   (presa na borda da tela) ele terminava a 8px do artigo em telas de 1440, que e a largura
   de laptop mais comum - de perto, parecia colado. */
@media (min-width: 1440px) {
  .rail {
    position: fixed;
    top: 128px;
    left: max(20px, calc((100vw - var(--maxw)) / 2 + var(--gutter) - 174px));
    z-index: 55;
    display: block;
    width: 148px;
  }

  .rail .label {
    margin-bottom: 14px;
  }

  .rail a {
    display: block;
    padding: 6px 0 6px 13px;
    border-left: 1px solid var(--line-soft);
    font-size: 13px;
    line-height: 1.4;
    color: var(--faint);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  }

  .rail a:hover {
    color: var(--body);
    border-left-color: var(--accent-lift);
  }
}

/* ---------------------------------------------------------------- movimento
   Sem script nenhum: a entrada e presa a rolagem pelo proprio CSS. Onde o
   navegador nao souber fazer isso, o conteudo simplesmente ja esta la - que e o
   estado correto. Nada em laco, nada que repita no hover. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* O TITULO DE SECAO DO TEXTO FICOU DE FORA DE PROPOSITO. Ele chegava apagado e so
       acendia com a rolagem - e quem clica num item do indice lateral cai direto num titulo
       que ainda nao acendeu, ou seja, num vazio. Num texto longo o titulo tem que estar la,
       sempre. O movimento fica onde ele nao atrapalha a leitura: a lista do blog e os dois
       blocos do fim. */
    /* CONTEUDO NAO DESAPARECE. Estes blocos so SOBEM ao entrar na tela - nunca partem de
       transparente. Motivo pratico: numa lista de oito artigos, seis ficariam invisiveis no
       primeiro desenho da pagina, e quem le a pagina por robo (buscador, resposta de IA) ve
       exatamente esse primeiro desenho. Movimento que esconde texto num site que existe pra
       ser lido e movimento errado. */
    .row,
    .lead-post,
    .relateds {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }

    /* O convite pode aparecer: ele nao e conteudo, e oferta. */
    .cta-in {
      animation: risein linear both;
      animation-timeline: view();
      /* A FAIXA TERMINA EM "entry", nao em "cover". Com "cover" um bloco colado no fim da
         pagina pode nunca completar a animacao - nao ha rolagem sobrando - e fica apagado
         pra sempre. O convite do fim do artigo e exatamente esse caso. Terminando na
         entrada, qualquer elemento que apareca na tela chega a 100%. */
      animation-range: entry 0% entry 62%;
    }
  }
}

@keyframes risein {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes subir {
  from {
    transform: translateY(16px);
  }

  to {
    transform: none;
  }
}

/* A barra de progresso da leitura. Tambem sem script: a linha do topo do artigo
   acompanha a rolagem da propria pagina. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 70;
  transform-origin: 0 50%;
  background: var(--accent-lift);
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .progress {
    animation: fill linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* --------------------------------------------------- o numero em destaque
   UM por artigo: o fato mais citavel do texto, tirado do paragrafo e posto de pe,
   com a fonte ao lado. E o pedaco que um motor de resposta de IA copia inteiro. */

.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 34px;
  padding: 24px 26px;
  border: 1px solid var(--line-soft);
  background: var(--sunk);
}

.callout-stat {
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 550;
  color: var(--accent-lift);
  white-space: nowrap;
}

.callout-label {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 520px) {
  .callout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* A tabela rola dentro do proprio envelope. Sem isto a pagina inteira rola de lado
   no celular, que e o defeito mais facil de deixar passar num texto longo. */
/* A TABELA SAI DA COLUNA DE LEITURA. Ela e o pedaco mais copiado e mais citado de um texto
   de comparacao, e espremida em 700px as colunas quebram o cabecalho em tres linhas e o
   conteudo vira sopa. Aqui ela usa a largura toda do conteudo, comecando na mesma margem
   esquerda do texto. No celular continua rolando dentro do proprio envelope. */
.tablewrap {
  overflow-x: auto;
  margin-top: 28px;
  max-width: none;
}

.tablewrap table {
  margin-top: 0;
  min-width: 520px;
}

/* -------------------------------------------------------------- estreito
   Abaixo de 900px o menu do topo nao cabe (quatro secoes + entrar + botao) e empurrava a
   pagina inteira pra direita: dava 714px de largura numa tela de 390. Some com o menu e
   deixa o essencial. O caminho de volta continua existindo: a marca leva pra pagina do
   produto, a migalha no topo do artigo leva pro indice do blog, e o rodape tem os dois. */

@media (max-width: 900px) {
  .nav-links,
  .nav-sep,
  .nav-login {
    display: none;
  }

  .nav .wrap {
    gap: 12px;
    justify-content: space-between;
  }

  .nav .brand {
    font-size: 21px;
  }

  .nav .brand svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 720px) {
  .foot {
    gap: 16px;
  }

  .foot-links {
    margin-left: 0;
    gap: 16px;
  }

  .body {
    font-size: 17px;
  }
}