/* Folha compartilhada das páginas de conteúdo (as que não são o index).
   O index mantém o CSS inline de propósito — é a página do LCP e não pode
   pagar um request a mais. Estas aqui são páginas de leitura: uma folha
   externa é melhor, porque é a mesma para as seis e o navegador a busca
   uma vez só.

   Os tokens são os mesmos de landing/index.html. Se um valor mudar lá,
   muda aqui — as duas superfícies são o mesmo site. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0B0A0F;
  --panel: #12101A;
  --media: #191527;
  --line: #241F31;
  --line-2: #3A3450;
  --ink: #ECE9F5;
  --ink-2: #9A94AD;
  --ink-3: #8B84A3;
  --accent: #8A5CFF;
  --on-accent: #0B0A0F;
  --warn: #D9A441;
  --error: #EF6B70;
  --scan: rgba(255, 255, 255, .014);
  --head: rgba(11, 10, 15, .9);
  --shadow: rgba(0, 0, 0, .85);

  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max: 1160px;
  --pad: 24px;
  --band: 72px;
}

[data-theme="light"] {
  --bg: #F4F3F7;
  --panel: #FFFFFF;
  --media: #EFEDF4;
  --line: #E0DDE8;
  --line-2: #CFCADA;
  --ink: #16131F;
  --ink-2: #5B5470;
  --ink-3: #5F5975;
  --accent: #5B2FD6;
  --on-accent: #FFFFFF;
  --warn: #8A6316;
  --error: #C0393F;
  --scan: rgba(0, 0, 0, .014);
  --head: rgba(244, 243, 247, .9);
  --shadow: rgba(43, 32, 80, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  background-image: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, ul, ol, dl, dd, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.band { border-top: 1px solid var(--line); }
.band > .wrap { padding-block: var(--band); }
.mono { font-family: var(--mono); }

.label {
  font: 700 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label-accent { color: var(--accent); }

h1 {
  font: 700 clamp(2rem, 1.35rem + 2.2vw, 2.9rem)/1.06 var(--sans);
  letter-spacing: -.03em;
  text-wrap: balance;
}
h2 {
  font: 700 clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem)/1.12 var(--sans);
  letter-spacing: -.025em;
}
h3 { font: 600 1.15rem/1.3 var(--sans); letter-spacing: -.01em; }

.lede {
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 1.05rem;
  text-wrap: pretty;
}
.prose { display: flex; flex-direction: column; gap: 16px; max-width: 68ch; }
.prose p { color: var(--ink-2); text-wrap: pretty; }
.prose strong { color: var(--ink); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.fine { font: 400 12px/1.6 var(--mono); color: var(--ink-3); }
.fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.fine a:hover { color: var(--accent); }

.btn {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  font: 700 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 11px; letter-spacing: .12em; }
.cost { opacity: .72; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.picks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.hair {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--head);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-block: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { display: block; flex: none; }
.brand span { font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.nav-link {
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav-link:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-dot { width: 8px; height: 8px; flex: none; background: var(--accent); }
[data-theme="light"] .theme-dot { border-radius: 50%; }

/* ---------- trilha ---------- */

/* A trilha é o único elemento que diz onde o visitante está: estas páginas
   são o ponto de entrada de quem vem da busca, e ele nunca passou pela home. */
.crumb {
  padding-block: 18px 0;
  font: 500 10px/1.6 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.crumb li { display: flex; gap: 8px; }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--accent); }
.crumb [aria-current] { color: var(--ink); }

/* ---------- topo da página ---------- */

.page-head { padding-block: 40px 56px; display: flex; flex-direction: column; gap: 20px; }
.page-head .actions { margin-top: 4px; }

.key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.key-facts li { display: flex; gap: 10px; }
.key-facts .glyph { color: var(--accent); font: 400 11px/1.6 var(--mono); }
.key-facts strong { font: 700 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.key-facts .detail { font-size: 13px; color: var(--ink-2); }
.key-facts li > span:last-child { display: flex; flex-direction: column; gap: 4px; }

/* ---------- passos ---------- */

.steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 36px; }
.steps li {
  background: var(--panel);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.steps p { font-size: 14px; color: var(--ink-2); text-wrap: pretty; }

/* ---------- listas de formato ---------- */

/* Flex e não grid, apesar do .hair: numa grade, a última linha incompleta
   deixa células vazias — e uma célula vazia sobre o fundo --line lê como um
   cartão em branco, não como espaço. Em flex os itens da última linha
   esticam e não sobra nenhuma. */
.grid-list, .siblings {
  display: flex;
  flex-wrap: wrap;
  margin-top: 32px;
}
.grid-list li {
  flex: 1 1 250px;
  background: var(--panel);
  padding: 18px 20px;
  font-size: 14px;
  color: var(--ink-2);
}
/* O <b> é o rótulo da célula e ocupa a linha inteira; o resto do texto flui
   como prosa, para que um <span class="mono"> no meio da frase continue no
   meio da frase. */
.grid-list b {
  display: block;
  margin-bottom: 6px;
  font: 700 11px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.grid-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tabela de comparação ---------- */

/* Tabela larga rola dentro do próprio contêiner. A página nunca rola na
   horizontal — é a diferença entre "cabe no telefone" e "quase cabe". */
.table-scroll { margin-top: 32px; overflow-x: auto; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
caption { text-align: left; padding: 14px 16px; font: 500 11px/1.5 var(--mono); color: var(--ink-3); border-bottom: 1px solid var(--line); }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
thead th { font: 700 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); background: var(--panel); }
tbody th { font: 500 13px/1.5 var(--mono); color: var(--ink); width: 200px; }
td { color: var(--ink-2); }
td.is-us { color: var(--ink); background: var(--panel); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

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

.faq {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 860px;
  margin-top: 28px;
}
.faq details { background: var(--panel); padding: 18px 20px; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 600 15px/1.4 var(--sans);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin-top: 12px; max-width: 70ch; font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.faq p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.chev { color: var(--accent); font: 400 16px/1 var(--mono); transition: transform 160ms ease; }
details[open] .chev { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
}

/* ---------- páginas irmãs ---------- */

.siblings a {
  flex: 1 1 240px;
  background: var(--panel);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.siblings a:hover { background: var(--media); }
.siblings b { font: 600 15px/1.3 var(--sans); }
.siblings span { font-size: 13px; color: var(--ink-2); }

/* ---------- fechamento e rodapé ---------- */

.closing { background: var(--panel); }
.closing > .wrap { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.closing h2 { max-width: 24ch; }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
  padding-block: 28px 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-3);
}
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-inner a { color: var(--ink-2); }
.footer-inner a:hover { color: var(--accent); }