/* IBM Plex servida daqui, e não do Google Fonts.
   O CSS de lá é um pedido a um terceiro no caminho crítico: o navegador só
   descobre quais arquivos de fonte baixar depois que ele volta. Servindo do
   mesmo domínio, o `preload` do HTML já começa a baixar a fonte junto com a
   folha de estilo — e o visitante deixa de ser contado por outra empresa.
   Só os subconjuntos latin e latin-ext: os três idiomas do site cabem neles. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Folha única para as três páginas de idioma. Gerada a partir do que estava
   embutido no index.html; extraída porque três cópias divergiriam. */

:root{
  --ink:#e9eef6; --dim:#8a95a5; --bg:#0f1319; --card:#161c25;
  --line:#242c38; --amber:#ffb020; --green:#35c759;
  /* Plex, e não a fonte de sistema: ela nasceu num fabricante de teclados, e
     os terminais levemente quadrados dizem "ferramenta" antes de qualquer
     texto ser lido. O mono é da mesma família, então convivem sem briga. */
  --font: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px; margin:0 auto; padding:0 24px}
a{color:var(--amber)}

header{padding:26px 0}
.brand{display:flex; align-items:center; justify-content:space-between; gap:16px}
.marca{
  display:flex; align-items:center; gap:12px; font-weight:600; font-size:19px;
  color:var(--ink); text-decoration:none;
}
.marca img{width:34px; height:34px; border-radius:8px}
/* O seletor de idioma some numa tela estreita? Não: só encolhe. Quem chega
   pela busca em espanhol precisa dele antes de qualquer outra coisa. */
.idiomas{display:flex; gap:14px; font-size:14.5px}
.idiomas a{color:var(--dim); text-decoration:none}
.idiomas a:hover{color:var(--amber)}

.hero{padding:56px 0 42px}
h1{
  font-size:clamp(33px,5vw,50px); line-height:1.1; margin:0 0 20px;
  letter-spacing:-.021em; font-weight:600; text-wrap:balance;
}
h1 .hl{color:var(--amber)}
.lede{font-size:19.5px; color:var(--dim); max-width:62ch; margin:0 0 30px}
.lede strong{color:var(--ink); font-weight:600}

/* O nome não se explica sozinho: "km" lê como quilômetro para quem nunca viu.
   Duas teclas mostram de onde vem, e de quebra repetem as palavras pelas
   quais a pessoa chegou aqui. */
.km{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 22px;
  color:var(--dim); font-size:14.5px; flex-wrap:wrap;
}
.km kbd{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  background:var(--card); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:3px 8px; color:var(--ink);
}
.km b{color:var(--ink); font-weight:600}

.cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{
  display:inline-block; background:var(--amber); color:#171106; font-weight:600;
  padding:14px 26px; border-radius:9px; text-decoration:none; font-size:17px;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.price{color:var(--dim); font-size:15px}

.shot{
  /* As capturas são retrato: esticá-las à largura do texto borra tudo. */
  max-width:520px; margin:44px auto 8px; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; background:var(--card);
}
.shot img{display:block; width:100%; height:auto}
figcaption{color:var(--dim); font-size:14px; padding:12px 16px; border-top:1px solid var(--line)}

section{padding:52px 0; border-top:1px solid var(--line)}
h2{font-size:clamp(24px,3.2vw,32px); letter-spacing:-.016em; margin:0 0 10px; font-weight:600; text-wrap:balance}
.sub{color:var(--dim); max-width:64ch; margin:0 0 30px}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px}
.card h3{margin:0 0 8px; font-size:17px; font-weight:600}
.card p{margin:0; color:var(--dim); font-size:15.5px}

table{width:100%; border-collapse:collapse; font-size:15.5px}
th,td{text-align:left; padding:13px 12px; border-bottom:1px solid var(--line)}
th{
  color:var(--dim); font-weight:500; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.06em;
}
td:first-child{color:var(--dim)}
td{font-variant-numeric:tabular-nums}
.yes{color:var(--green); font-weight:500}
.no{color:#e5675b}
.tbl{overflow-x:auto}

ol.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:14px}
ol.steps li{
  counter-increment:s; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px 18px 62px; position:relative;
}
/* Numeração porque isto é mesmo uma sequência: cada passo depende do
   anterior. Em qualquer outra seção seria enfeite. */
ol.steps li::before{
  content:counter(s); position:absolute; left:20px; top:18px;
  width:24px; height:24px; border-radius:50%; background:var(--amber); color:#171106;
  display:grid; place-items:center; font-weight:600; font-size:13px;
  font-family:var(--mono);
}
ol.steps b{display:block; margin-bottom:2px; font-weight:600}
ol.steps span{color:var(--dim); font-size:15.5px}

details{border-bottom:1px solid var(--line); padding:16px 0}
summary{cursor:pointer; font-weight:600; font-size:17px; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ "; color:var(--amber); font-weight:700}
details[open] summary::before{content:"\2212 "}
details p{color:var(--dim); margin:10px 0 0; max-width:680px}

summary:focus-visible,a:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}

.note{color:var(--dim); font-size:15px; border-left:2px solid var(--line); padding-left:16px}
footer{padding:40px 0 60px; color:var(--dim); font-size:14.5px; border-top:1px solid var(--line)}
footer a{color:var(--dim)}

/* Cartões de download. Moraram só na página de instalação enquanto ela era
   pós-compra; com o teste grátis, baixar virou o primeiro passo e a landing
   passou a precisar deles também. */
.dl{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-bottom:22px}
.dlcard{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:24px}
.dlcard h3{margin:0 0 4px; font-size:19px; font-weight:600}
.dlcard .req{color:var(--dim); font-size:14.5px; margin:0 0 18px}
.tiny{color:var(--dim); font-size:13.5px; margin-top:10px; margin-bottom:0}

/* Pular para o conteúdo.
   Fica fora da tela até receber foco pelo teclado: quem navega por Tab não
   deveria atravessar o cabeçalho inteiro em toda página, e quem usa mouse
   nunca vê o link. */
.pular{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--amber); color:#171106; font-weight:600;
  padding:12px 20px; border-radius:0 0 9px 0; text-decoration:none;
}
.pular:focus{left:0}

/* Visível só para leitor de tela: a legenda da tabela existe para quem não
   enxerga o cabeçalho da seção logo acima. */
.so-leitor{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Quem pediu menos movimento no sistema não deve levar rolagem animada.
   O `scroll-behavior:smooth` lá em cima é agradável para a maioria e
   desconfortável — às vezes nauseante — para quem tem sensibilidade
   vestibular. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}