:root {
  --bg: #ffffff;
  --fg: #14161b;
  --muted: #5b6472;
  --line: #e6e8ec;
  --card: #f7f8fa;
  --card-line: #eceef2;
  --accent: #0f9d58;
  --dark: #12141a;
  --dark-2: #1b2029;
  --dark-fg: #f2f4f7;
  --dark-muted: #99a2b1;
  --dark-line: rgba(255,255,255,.12);
  --accent-dark: #35d38a;
  --radius: 14px;
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { letter-spacing: -0.022em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(38px, 6.2vw, 68px); font-weight: 750; }
h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 650; }
p { margin: 0 0 18px; }
a { color: inherit; }
code {
  font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,.06); border-radius: 5px; padding: 2px 6px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fg); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------- marca */
.logo {
  display: block; width: 190px; height: 43px; background: currentColor;
  -webkit-mask: url("logo.png?v=e3d29f2f") no-repeat left center;
  mask: url("logo.png?v=e3d29f2f") no-repeat left center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* display:block é obrigatório: largura e altura não valem em elemento inline,
   e sem isso a máscara não tem caixa para pintar — o desenho some. */
.hand {
  display: block;
  width: 100%; height: 100%; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.art { display: block; }
.flip { transform: scaleX(-1); }

/* ------------------------------------------------------------ topo */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(18,20,26,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark-line); color: var(--dark-fg);
}
.top .wrap { display: flex; align-items: center; gap: 22px; height: 72px; }
/* Logo maior sem mexer na altura do cabeçalho: os 72px são fixos, e 54 de
   marca cabem dentro deles com folga. Aumentar a barra junto empurraria todo
   o conteúdo da página para baixo. */
.top .logo { width: 238px; height: 54px; }
.top nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.top nav a { color: var(--dark-muted); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--dark-fg); }
.lang {
  border: 1px solid var(--dark-line); border-radius: 999px;
  padding: 6px 13px; font-size: 14px; text-decoration: none; color: var(--dark-muted);
}
.lang:hover { color: var(--dark-fg); border-color: rgba(255,255,255,.3); }
@media (max-width: 860px) { .top nav .hide-sm { display: none; } }

/* ------------------------------------------------------------ hero */
.hero {
  background: linear-gradient(170deg, var(--dark) 0%, var(--dark-2) 100%);
  color: var(--dark-fg); padding: 96px 0 104px; overflow: hidden;
}
.hero .grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .hero .grid { grid-template-columns: 1fr; gap: 44px; } }
.badge {
  display: inline-block; border: 1px solid var(--dark-line); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; font-weight: 600; color: var(--dark-muted);
  margin-bottom: 26px;
}
.hero .lead { font-size: clamp(17px, 2vw, 20px); color: var(--dark-muted); max-width: 43ch; margin: 24px 0 34px; }
.ctas { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 650; font-size: 16.5px;
  padding: 15px 26px; border-radius: 11px; border: 1px solid transparent;
}
/* Texto branco, e o fluorescente vem do anel e do halo em volta, não do
   preenchimento. Branco sobre verde neon puro (#39ff14) dá 1,36:1 de
   contraste, e o mínimo da norma para este tamanho de texto é 4,5:1. Numa
   página que existe para quem tem dificuldade com interface, o botão principal
   é o último lugar onde um texto ilegível pode aparecer. Este verde fechado dá
   4,83:1 com branco, e o halo entrega a leitura de neon sem tocar no texto. */
.btn-primary {
  background: #008431; color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(180, 255, 205, .5),
    0 0 0 1.5px #5cff8f,
    0 0 16px rgba(92, 255, 143, .6),
    0 0 44px rgba(92, 255, 143, .34);
}
/* O preenchimento não muda no hover, só o halo: assim o contraste do texto é
   o mesmo em todos os estados. */
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(200, 255, 220, .6),
    0 0 0 2px #8dffb2,
    0 0 24px rgba(92, 255, 143, .8),
    0 0 60px rgba(92, 255, 143, .5);
}
.btn-primary:focus-visible {
  outline: 3px solid #b6ffcd; outline-offset: 3px;
}
.btn-ghost { border-color: var(--dark-line); color: var(--dark-fg); }
.btn-ghost:hover { border-color: rgba(255,255,255,.34); }
.cta-note { font-size: 14px; color: var(--dark-muted); margin: 18px 0 0; }
/* O ladrilho de mão é peça compartilhada: nasceu no herói e se repete nos
   blocos de caso e na chamada final, porque quatro formas de mão são o
   vocabulário inteiro do produto e vocabulário se aprende por repetição. */
.tile {
  border-radius: 22px; background: rgba(255,255,255,.055);
  border: 1px solid var(--dark-line); padding: 26px; color: var(--dark-fg);
}
.hero-art { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-art .tile { aspect-ratio: 1; }

/* --------------------------------------------------- tira de poses */
.poses {
  margin-top: 52px; padding-top: 34px;
  border-top: 1px solid var(--dark-line);
}
.poses.compact { margin: 0 0 40px; padding-top: 0; border-top: 0; }
.poserow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 24px 30px; margin-top: 22px;
}
/* Na chamada final as quatro poses são fixas em quatro colunas: com auto-fit,
   uma largura intermediária monta três e deixa a quarta órfã na linha de
   baixo, o que fica torto no meio de uma seção centralizada. */
.poses.compact .poserow {
  margin-top: 0; text-align: left;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .poses.compact .poserow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .poses.compact .poserow { grid-template-columns: 1fr; }
}
.pose { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; }
.pose .tile { width: 62px; height: 62px; border-radius: 16px; padding: 11px; }
.pose-t b { display: block; font-size: 15.5px; font-weight: 650; color: var(--dark-fg); }
.pose-t > span { display: block; margin-top: 3px; font-size: 14px; color: var(--dark-muted); }
.poses-more {
  display: inline-block; margin-top: 26px; font-size: 14px; font-weight: 600;
  color: var(--accent-dark); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.poses-more:hover { color: var(--dark-fg); }
@media (max-width: 620px) {
  .pose { grid-template-columns: 52px 1fr; gap: 13px; }
  .pose .tile { width: 52px; height: 52px; padding: 9px; }
}

/* --------------------------------------------------------- seções */
/* O cabeçalho é fixo: sem esta margem, um link de âncora leva o título para
   debaixo dele e a pessoa cai no meio do parágrafo. */
section { padding: 92px 0; scroll-margin-top: 84px; }
.kicker {
  text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px;
  font-weight: 700; color: var(--accent); margin: 0 0 14px;
}
.measure { max-width: 62ch; }
.measure p { font-size: 18px; color: var(--muted); }
.measure h2 { margin-bottom: 22px; color: var(--fg); }
.alt { background: var(--card); border-block: 1px solid var(--line); }

/* --------------------------------------------------------- gestos */
.hands { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 46px; }
@media (max-width: 860px) { .hands { grid-template-columns: 1fr; } }
.hand-col {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.alt .hand-col { background: var(--bg); }
.hand-col h3 { margin-bottom: 18px; }
.g { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; padding: 12px 0; }
.g + .g { border-top: 1px solid var(--line); }
.g .art { width: 46px; height: 46px; color: var(--fg); }
.g b { display: block; font-weight: 650; font-size: 16px; }
.g span { color: var(--muted); font-size: 14.5px; }
.note {
  margin-top: 26px; display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  align-items: start; background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 22px 24px;
}
.note .art { width: 56px; height: 56px; color: var(--accent); }
.note p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; }

/* ----------------------------------------------------------- print */
.shot { margin: 46px 0 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.13);
}

/* ------------------------------------------------- casos de uso */
/* Imagem de um lado, texto do outro. A proporção das colunas segue o formato
   da foto: a panorâmica de palco pede coluna larga para não virar uma tira
   fina, a quadrada do notebook pede colunas equilibradas. */
.split { display: grid; gap: 52px; align-items: center; }
.split.wide-img { grid-template-columns: 1.25fr 1fr; }
.split.square-img { grid-template-columns: 1fr 1fr; }
/* A foto vertical fica à direita e mais estreita que o texto: em pé ela já tem
   presença, e o argumento ao lado é longo e precisa da largura. O texto vem
   antes no HTML, então quem usa leitor de tela ouve o argumento primeiro. */
.split.tall-img { grid-template-columns: 1fr .78fr; align-items: start; gap: 56px; }
.split.tall-img figure { position: sticky; top: 104px; }
@media (max-width: 940px) {
  .split.wide-img, .split.square-img, .split.tall-img { grid-template-columns: 1fr; gap: 34px; }
  .split.tall-img figure { position: static; }
  /* No celular a imagem vai para cima do texto nos dois blocos, para a leitura
     não começar pelo meio da história. */
  .split.square-img figure { order: -1; }
}
.usecase .measure, .usecase h2 { max-width: none; }
.usecase h2 { margin-bottom: 20px; }
.usecase p { color: var(--muted); font-size: 17px; }
.usecase .shot { margin: 0; }
.usecase .shot img { box-shadow: 0 24px 60px rgba(0,0,0,.22); }

/* A foto panorâmica ocupa a largura inteira: contida numa coluna ela vira uma
   tira baixa e perde a escala do palco, que é justamente o que a torna útil
   ali. `object-fit: cover` limita a altura sem esticar a imagem. */
.bleed-top { padding-top: 0; }
figure.bleed { margin: 0 0 56px; }
/* Foto contida na coluna, inteira: usada quando a própria imagem carrega
   informação nas bordas que um recorte destruiria. A margem precisa da
   especificidade de `.usecase` para vencer o `.usecase .shot { margin: 0 }`. */
.usecase figure.framed { margin: 0 0 72px; }
figure.framed img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
}
figure.bleed img {
  display: block; width: 100%; height: auto;
  max-height: 560px; object-fit: cover; object-position: center 42%;
}

/* Texto em duas colunas sob a foto larga: numa coluna só, a linha atravessaria
   a tela inteira e o olho perderia a volta. */
.mag { columns: 2; column-gap: 46px; max-width: 980px; }
.mag p { break-inside: avoid; }
@media (max-width: 780px) { .mag { columns: 1; } }

.stage-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 34px; max-width: 980px; align-items: start;
}
@media (max-width: 780px) { .stage-foot { grid-template-columns: 1fr; gap: 26px; } }

/* ---------------------------------------------------- casos de uso */
/* Quatro colunas fixas na tela larga. Com auto-fit a quarta caía para baixo e
   a leitura perdia o paralelismo entre as famílias de uso. */
.ugrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 46px; }
@media (max-width: 1040px) { .ugrid { grid-template-columns: 1fr 1fr; gap: 26px 30px; } }
@media (max-width: 620px) { .ugrid { grid-template-columns: 1fr; } }
.ugroup h3 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg); padding-bottom: 11px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
/* Sem marcador: a bolinha custava 22px de recuo em cada linha, e numa coluna
   estreita esse espaço vale mais para o texto do que para o enfeite. A linha
   divisória já separa um item do outro. */
.ugroup ul { list-style: none; margin: 0; padding: 0; }
.ugroup li {
  font-size: 14.5px; line-height: 1.5; color: var(--muted);
  padding: 11px 0; border-bottom: 1px solid var(--card-line);
}
.ugroup li:last-child { border-bottom: 0; }
.ugroup li b { color: var(--fg); font-weight: 650; display: block; }

/* A seção escura deixa a foto de palco — que é azul e escura — encostar no
   fundo em vez de flutuar num retângulo branco. */
.usecase.dark { background: var(--dark); color: var(--dark-fg); }
.usecase.dark h2, .usecase.dark h3 { color: var(--dark-fg); }
.usecase.dark p { color: var(--dark-muted); }
.usecase.dark .kicker { color: var(--accent-dark); }
.usecase.dark .shot img { border-color: var(--dark-line); }
.usecase.dark .ticks li { color: var(--dark-muted); }
.usecase.dark .ticks li::before { background: var(--accent-dark); }

/* O bloco de exposições é rosa por inteiro, na cor da própria obra da foto.
   Como toda a seção lê as mesmas variáveis do tema escuro, basta redefini-las
   aqui: nenhuma regra precisa ser duplicada. O texto secundário vai a 90% de
   branco, e não no cinza do tema escuro, para manter contraste de leitura
   sobre o magenta. */
.usecase.tone-pink {
  background: linear-gradient(168deg, #a3155c 0%, #6d0f3f 100%);
  --accent-dark: #ffd9ea;
  --dark-muted: rgba(255, 255, 255, .9);
  --dark-line: rgba(255, 255, 255, .26);
}
.usecase.tone-pink .honest { background: rgba(0, 0, 0, .22); }
.usecase.tone-pink figure.framed img { box-shadow: 0 26px 60px rgba(0, 0, 0, .38); }

/* O segundo caso é a sala de aula, num azul que puxa para o roxo: a cor da
   própria tela da foto, pelo mesmo critério do rosa acima. */
.usecase.tone-indigo {
  --accent-dark: #cfd6ff;
  --dark-muted: rgba(255, 255, 255, .9);
  --dark-line: rgba(255, 255, 255, .26);
}
.usecase.tone-indigo .honest { background: rgba(0, 0, 0, .26); }
.usecase.tone-indigo figure.framed img { box-shadow: 0 26px 60px rgba(0, 0, 0, .42); }

/* O terceiro caso é o laboratório, num verde-azulado frio: é a cor da bancada
   e da tela clínica da foto, e fecha a volta rosa, violeta, ciano sem que dois
   casos vizinhos se pareçam. */
.usecase.tone-teal {
  --accent-dark: #b3ecf7;
  --dark-muted: rgba(255, 255, 255, .9);
  --dark-line: rgba(255, 255, 255, .26);
}
.usecase.tone-teal .honest { background: rgba(0, 0, 0, .26); }
.usecase.tone-teal figure.framed img { box-shadow: 0 26px 60px rgba(0, 0, 0, .42); }

/* Os dois casos do cotidiano abrem o carrossel em tons quentes, e os três
   institucionais seguem nos frios. Cores vizinhas nunca se repetem: ferrugem,
   verde, rosa, violeta, ciano. */
.usecase.tone-rust,
.usecase.tone-forest {
  --dark-muted: rgba(255, 255, 255, .9);
  --dark-line: rgba(255, 255, 255, .26);
}
.usecase.tone-rust { --accent-dark: #ffd8ca; }
.usecase.tone-forest { --accent-dark: #c8f0d2; }
.usecase.tone-rust .honest,
.usecase.tone-forest .honest { background: rgba(0, 0, 0, .24); }

/* ---------------------------------------------------------------- carrossel

   O fundo não é uma propriedade animada: são camadas empilhadas, uma por caso,
   e o que muda é a opacidade. Gradiente não interpola de forma confiável entre
   navegadores, opacidade interpola em todos, e sem JavaScript a primeira
   camada continua visível. */
.showcase { position: relative; isolation: isolate; overflow: hidden; }
.showcase > .wrap, .showcase .sc-track { position: relative; z-index: 50; }
/* As camadas nunca são apagadas depois de acesas: a nova sobe por cima da
   anterior, que continua opaca embaixo. Se a de baixo desaparecesse junto, no
   meio da transição as duas estariam a meio caminho e o fundo escuro da seção
   apareceria por trás, um piscar cinza entre uma cor e outra. */
.showcase .sc-bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity .6s ease;
}
.showcase .sc-bg.on { opacity: 1; }
.sc-bg-rust { background: linear-gradient(168deg, #a8391d 0%, #63200f 100%); }
.sc-bg-forest { background: linear-gradient(168deg, #2f6b3a 0%, #143a1c 100%); }
.sc-bg-pink { background: linear-gradient(168deg, #a3155c 0%, #6d0f3f 100%); }
.sc-bg-indigo { background: linear-gradient(168deg, #3f3fae 0%, #221a66 100%); }
.sc-bg-teal { background: linear-gradient(168deg, #0e6d80 0%, #063c4c 100%); }
/* A cor do texto acompanha o fundo no mesmo tempo, senão o realce salta antes. */
.showcase .kicker, .showcase .steps li span { transition: color .6s ease, border-color .6s ease; }
.showcase .honest { transition: background-color .6s ease, border-color .6s ease; }

.sc-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 0 0 34px;
}
.sc-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-tab {
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .01em;
  color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.sc-tab:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.sc-tab.on {
  color: #17141c; background: #fff; border-color: #fff;
}
.sc-arrows { display: flex; gap: 8px; }
.sc-arr {
  width: 40px; height: 40px; line-height: 1; font-size: 22px;
  color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  cursor: pointer; transition: background-color .25s ease, color .25s ease;
}
.sc-arr:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.sc-arr[disabled] { opacity: .34; cursor: default; }
.sc-tab:focus-visible, .sc-arr:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}

/* Uma faixa de colunas de 100%: sem script ela rola na horizontal e o encaixe
   por rolagem para em cada caso, então o conteúdo continua alcançável. */
/* A janela do carrossel usa `overflow-x: clip`, e não `auto`. A diferença custou
   caro descobrir: `auto` transforma o elemento num contêiner de rolagem, e o
   Chrome prende a roda do mouse no contêiner sob o cursor. Com a faixa rolável
   na horizontal, girar a roda para baixo em cima do carrossel não rolava a
   página, ela travava. Numa página sobre acessibilidade, uma armadilha de
   rolagem é o pior defeito possível. `clip` recorta sem criar contêiner de
   rolagem, então a roda passa direto para a página, e é o único valor que
   aceita o outro eixo em `visible` sem promovê-lo a rolagem. A troca de caso
   vira um transform na faixa interna. */
.sc-track { overflow-x: clip; overflow-y: visible; }
.sc-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.sc-slide { min-width: 0; }
.sc-slide .wrap { padding-top: 0; padding-bottom: 0; }

/* "Ver a foto": discreto, porque o texto é que conduz o caso agora. */
.sc-photo {
  display: inline-block; margin: 22px 0 0; padding: 9px 18px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  transition: background-color .25s ease, color .25s ease;
}
.sc-photo:hover { color: #fff; background: rgba(255, 255, 255, .17); }
.sc-photo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sc-photo::after { content: " \2197"; opacity: .6; }

/* A foto em tela cheia. O <dialog> modal sobe para a camada de topo do
   navegador, então nem o `overflow: hidden` da seção nem os z-index das
   camadas de cor o recortam, e Esc, foco e fundo inerte vêm de graça. */
.sc-lightbox {
  border: 0; padding: 0; background: transparent; color: #fff;
  width: min(1400px, 94vw); max-width: 94vw; max-height: 92vh;
  overflow: visible;
}
.sc-lightbox::backdrop { background: rgba(8, 6, 14, .88); }
.sc-lightbox img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.sc-cap {
  margin: 16px 4px 0; font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
.sc-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  font-size: 22px; line-height: 1; color: #17141c;
  background: #fff; border: 0;
}
.sc-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 620px) {
  .sc-close { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-rail { transition: none; }
  .showcase .sc-bg { transition: none; }
}

/* A foto tem os quadros numerados; a lista repete os números para que a
   legenda e a imagem se liguem sem depender de ler as duas na ordem. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.steps li {
  position: relative; padding: 8px 0 8px 38px;
  color: var(--dark-muted); font-size: 15.5px;
}
.steps li span {
  position: absolute; left: 0; top: 7px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--accent-dark); color: var(--accent-dark);
  font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}

h3.mini {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em;
  margin: 30px 0 6px; opacity: .8;
}
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding: 7px 0 7px 26px; color: var(--muted); font-size: 15.5px;
}
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 16px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
/* O limite do produto é dito com o mesmo cuidado da promessa — em destaque
   próprio, não numa nota de rodapé que ninguém lê. Sem cor de alerta: é
   informação honesta, não aviso de perigo. */
.honest {
  margin: 0; padding: 18px 20px; border-radius: 0;
  border-left: 2px solid var(--line);
  background: var(--card);
  font-size: 14.5px !important; line-height: 1.65;
}
/* Ocupa a largura inteira abaixo das colunas: é o fecho da seção, não uma
   nota lateral. */
.honest.wide { margin-top: 44px; max-width: none; padding: 22px 26px; }
.honest b { color: var(--fg); font-weight: 650; }
.usecase.dark .honest {
  background: rgba(255,255,255,.05);
  border-left-color: var(--dark-line);
}
.usecase.dark .honest b { color: var(--dark-fg); }
.alt .honest { background: var(--bg); border-color: var(--card-line); }

/* -------------------------------------------------------- objetivos */
.goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 46px; }
.goal { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 26px; }
.goal .n { font: 700 13px ui-monospace, monospace; color: var(--accent); display: block; margin-bottom: 10px; }
.goal p { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }

/* ------------------------------------------------------ privacidade */
.privacy { background: var(--dark); color: var(--dark-fg); }
.privacy h2 { color: var(--dark-fg); }
.privacy .measure p { color: var(--dark-muted); }
.privacy code { background: rgba(255,255,255,.1); color: var(--dark-fg); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 46px; }
.pcard { border: 1px solid var(--dark-line); border-radius: var(--radius); padding: 22px; }
.pcard b { display: block; margin-bottom: 6px; font-size: 16px; }
.pcard span { color: var(--dark-muted); font-size: 14.5px; }
.privacy a.more { color: var(--accent-dark); font-weight: 650; text-decoration: none; }
.privacy a.more:hover { text-decoration: underline; }

/* -------------------------------------------------------------- faq */
details {
  border-bottom: 1px solid var(--line); padding: 20px 0;
}
details summary {
  cursor: pointer; font-weight: 650; font-size: 17.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 22px; }
details[open] summary::after { content: "−"; }
details p { margin: 14px 0 0; color: var(--muted); max-width: 70ch; }

/* --------------------------------------------------------- roadmap */
.road { list-style: none; padding: 0; margin: 30px 0 0; max-width: 62ch; }
.road li {
  padding: 15px 0 15px 34px; border-top: 1px solid var(--line);
  position: relative; color: var(--muted); font-size: 16.5px;
}
.road li::before {
  content: ""; position: absolute; left: 4px; top: 24px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}

/* ----------------------------------------------------- final/rodapé */
.final { background: linear-gradient(170deg, var(--dark-2), var(--dark)); color: var(--dark-fg); text-align: center; }
.final h2 { color: var(--dark-fg); }
.final p { color: var(--dark-muted); max-width: 54ch; margin: 20px auto 32px; font-size: 18px; }
.final .ctas { justify-content: center; }
footer {
  background: var(--dark); color: var(--dark-muted);
  border-top: 1px solid var(--dark-line); padding: 52px 0 60px; font-size: 14.5px;
}
footer .row { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
footer a { color: var(--dark-fg); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .links { display: flex; flex-wrap: wrap; gap: 22px; }
footer .fine { margin-top: 26px; opacity: .7; font-size: 13.5px; }

/* ------------------------------------------------- página da versão de teste */
.bhero { background: linear-gradient(170deg, var(--dark-2), var(--dark)); color: var(--dark-fg); padding: 72px 0 64px; }
.bhero h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; margin: 18px 0 20px; max-width: 18ch; }
.bhero .lead { color: var(--dark-muted); font-size: 18.5px; line-height: 1.65; max-width: 56ch; margin: 0 0 36px; }
.bhero .badge { background: rgba(255,255,255,.08); border-color: var(--dark-line); color: var(--dark-fg); }

/* O cartão de download é a única ação da página, então recebe peso próprio em
   vez de virar mais um botão no meio do texto. */
.dlcard {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: rgba(255,255,255,.05); border: 1px solid var(--dark-line);
  border-radius: 18px; padding: 22px 24px; max-width: 640px;
}
.dlcard .file { font-size: 14.5px; color: var(--dark-muted); }
.dlcard .file b { display: block; color: var(--dark-fg); font-size: 15.5px; font-weight: 650; margin-bottom: 3px; }
.reqs { display: flex; gap: 26px; flex-wrap: wrap; margin: 26px 0 0; padding: 0; list-style: none; }
.reqs li { color: var(--dark-muted); font-size: 14.5px; display: flex; align-items: center; gap: 9px; }
.reqs li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-dark); }

.bmain { padding: 76px 0 0; }
.phase { margin: 0 0 68px; }
.phase > h2 { font-size: clamp(26px, 3vw, 34px); margin: 10px 0 34px; }

/* Cartões numerados: o número é o guia da leitura, e o título de cada passo é a
   ação em si, para quem só varre a página conseguir executar sem ler o corpo. */
.stepcards { display: grid; gap: 18px; counter-reset: sc; }
.stepcard {
  counter-increment: sc; position: relative;
  display: grid; grid-template-columns: 46px 1fr; gap: 20px; align-items: start;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); padding: 24px 26px;
}
.stepcard::before {
  content: counter(sc); grid-row: span 2;
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--fg); color: #fff;
  font-size: 17px; font-weight: 700; display: grid; place-items: center;
}
.stepcard h3 { font-size: 18px; margin: 9px 0 8px; line-height: 1.35; }
.stepcard p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 62ch; }

/* Endereço que precisa ser colado à mão, com botão de copiar: digitar
   "chrome://extensions" é justamente o passo mais penoso para quem tem
   dificuldade motora, que é o público desta extensão. */
.addr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0;
}
.addr code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 14px; font-size: 15px; color: var(--fg);
}
.copybtn {
  font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
  background: var(--fg); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 16px;
}
.copybtn:hover { filter: brightness(1.15); }
.copybtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.okbox {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  background: rgba(15,157,88,.07); border: 1px solid rgba(15,157,88,.28);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 24px 26px; margin: 34px 0 0;
}
.okbox .chk {
  width: 44px; height: 44px; border-radius: 999px; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700;
}
.okbox b { display: block; margin-bottom: 5px; }
.okbox p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.7; }

/* Os gestos em fundo escuro, como no site: é o que a pessoa vai fazer daqui a
   dois minutos, e merece parecer o produto e não uma legenda. */
/* A faixa dos gestos é verde, e não o mesmo cinza do herói. Com os dois
   neutros a página lia como topo repetido no meio do caminho, e esta seção é o
   produto em si, o que a pessoa vai fazer daqui a dois minutos. O verde é o
   mesmo acento do botão de baixar, então a cor amarra as duas pontas da página.
   As variáveis do tema escuro são redefinidas aqui porque o cinza-azulado do
   texto secundário fica sujo sobre verde. */
.bposes {
  background: linear-gradient(168deg, #0e5b3c 0%, #062e1f 100%);
  color: var(--dark-fg); padding: 84px 0 88px; margin: 12px 0 0;
  --dark-muted: rgba(255, 255, 255, .84);
  --dark-line: rgba(255, 255, 255, .2);
  --accent-dark: #7ff0b4;
}
.bposes h2 { color: var(--dark-fg); font-size: clamp(26px, 3vw, 34px); margin: 0 0 16px; }
.bposes > .wrap > p { color: var(--dark-muted); font-size: 17.5px; line-height: 1.65; max-width: 58ch; margin: 0; }
/* Sem a linha divisória daqui: no site ela separa a tira do caso acima dela, e
   aqui a tira é o conteúdo da seção, então a linha inventava uma divisão. */
.bposes .poses { margin-top: 44px; padding-top: 0; border-top: 0; }
/* Duas colunas, e não quatro. Em quatro, a coluna de texto fica com cerca de
   150px e "Indicador para cima" quebra em duas linhas enquanto "Mão aberta"
   não, o que desalinha a fileira inteira. Em duas colunas nada quebra, e os
   quatro gestos leem como um conjunto de quatro em vez de uma tira fina. */
.bposes .poserow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 56px; max-width: 900px;
}
@media (max-width: 700px) {
  .bposes .poserow { grid-template-columns: 1fr; }
}
/* Cada gesto é um bloco próprio, num tom mais escuro que o verde da faixa.
   Solto sobre o gradiente, só o ícone tinha fundo e o texto flutuava, então os
   quatro não liam como quatro coisas separadas. */
.bposes .pose {
  grid-template-columns: 66px 1fr; gap: 18px; align-items: center;
  background: rgba(0, 0, 0, .26); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px; padding: 20px 24px;
}
.bposes .pose .tile {
  width: 66px; height: 66px; padding: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18);
}
.bposes .pose-t b { font-size: 16px; }
@media (max-width: 620px) {
  .bposes .pose { grid-template-columns: 54px 1fr; gap: 14px; padding: 17px 18px; }
  .bposes .pose .tile { width: 54px; height: 54px; padding: 10px; }
}

.bnotes { padding: 72px 0 92px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }
.nbox {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); padding: 24px 26px;
}
.nbox h3 { font-size: 16.5px; margin: 0 0 10px; }
.nbox p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.nbox.wide { grid-column: 1 / -1; }
.nbox.priv { border-left: 3px solid var(--accent); }
.bnotes .duo + .duo { margin-top: 22px; }
.backlink { display: inline-block; margin-top: 40px; color: var(--accent); font-weight: 600; }

@media (max-width: 620px) {
  .stepcard { grid-template-columns: 38px 1fr; gap: 15px; padding: 20px; }
  .stepcard::before { width: 38px; height: 38px; font-size: 15px; }
  .dlcard { gap: 18px; padding: 20px; }
}