/* Os dois chãos são os do app, nos dois modos: --bg é o papel
     (PaperBackground, #F1F3F2 / #080A09) e --bg-alt a superfície elevada
     (raisedSurface, branco / #171B19). O preto nunca é o .black da Apple, que
     ao lado do papel escuro parece um buraco; é quase preto com o mesmo desvio
     de 150° do resto da paleta. A tinta do escuro é o papel do claro, e
     vice-versa — o avesso, como o app faz. */
  :root {
    color-scheme: light; /* SEM ESCURO, por enquanto: era light dark */
    --bg: #F1F3F2;
    --bg-alt: #ffffff;
    --ink: #1d1d1f;
    --ink-2: #6e6e73;
    --ink-3: #86868b;
    --line: rgba(0,0,0,.08);
    --green: #1fad61;
    --green-deep: #157040;
    --green-ink: #0f5d34;
    --green-soft: #e6f6ec;
    --radius: 28px;
    --w: 980px;
    /* O respiro lateral da página. No desktop é largo de propósito: a coluna
       tem 980px, e o que sobra dentro dela é ar. O chrome lê o mesmo token
       através do shadow root, para a barra e o rodapé fecharem onde o texto
       fecha. */
    --gutter: 24px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }
  @media (min-width: 821px) { :root { --gutter: 80px; } }
  /* SEM ESCURO, por enquanto — o bloco volta inteiro quando o escuro voltar.
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #080A09;
      --bg-alt: #171B19;
      --ink: #F1F3F2;
      --ink-2: #9EA59F;
      --ink-3: #6F776F;
      --line: rgba(255,255,255,.10);
      --green-ink: #33C273;
      --green-soft: rgba(31,173,97,.18);
    }
  }
  */
  * { box-sizing: border-box; }
  dindim-chrome { display: block; }

  /* Trocar de página com a barra parada. Tudo isto é CSS: @view-transition nas
     duas páginas faz o navegador tratar a navegação entre elas como uma
     transição, sem uma linha de script.

     O conteúdo faz o cross-fade do navegador; a barra tem nome próprio (ver
     chrome.js), então sai do grupo raiz e vira um grupo só dela — e como as
     duas páginas a desenham igual, esse grupo não se move e o fade entre duas
     imagens idênticas não se vê. O resultado é a barra firme no topo enquanto
     a página troca por baixo.

     Nunca use "animation: none" nos pseudos: isso tira do grupo a animação que
     o navegador usa para lhe dar tamanho e posição, ele colapsa para
     width/height auto e a barra some no meio da troca — o oposto exato do que
     se queria. O mesmo vale para trocar a timing-function por steps(). Para
     encurtar, encurte o tempo (ver a barra logo abaixo).

     Onde não há suporte, a regra é ignorada e a navegação é a de sempre. */
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: 120ms; }
  /* A barra troca de estado de uma vez: encurtar a animação não é o mesmo que
     removê-la — o grupo continua recebendo a geometria do navegador, e só o
     tempo vai a zero. É por isso que isto funciona onde "animation: none"
     apagava a barra. */
  ::view-transition-group(site-bar),
  ::view-transition-old(site-bar),
  ::view-transition-new(site-bar) { animation-duration: 1ms; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.47;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
  p { margin: 0; }
  img { display: block; max-width: 100%; }
  .wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gutter); }


  /* Hero: duas colunas — o texto à esquerda, um iPhone à direita. A ordem do
     texto é a do Things (ícone, nome, o que o app faz, o caminho para dentro),
     o arranjo é o de sempre. */
  /* O hero cabe em 90svh: o padding caiu de 96 para 48 em cima e 56
     embaixo, e ao lado do texto o iPhone encolhe até a altura que sobra —
     largura = (90svh − paddings) × 1380/2880. É svh e não dvh: com a página
     rolando, dvh muda quando a barra do Safari recolhe, e o aparelho mudaria
     de tamanho no meio da rolagem. */
  .hero { padding: 48px 0 56px; }
  .hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
  @media (min-width: 821px) {
    /* 104 de padding do hero, 22 do vão, 42 do controle. */
    .hero-device .phone { --phone-w: min(320px, calc((90svh - 168px) * 0.479)); }
  }
  .hero .icon { width: 96px; height: 96px; margin: 0 0 28px; display: block; filter: drop-shadow(0 10px 22px rgba(21,112,64,.22)); }
  .hero h1 { font-size: clamp(40px, 5vw, 56px); line-height: 1; letter-spacing: -.03em; font-weight: 700; }
  .hero .lede { font-size: 30px; font-weight: 500; line-height: 1.25; color: var(--ink-2); max-width: 26ch; margin: 20px 0 0; letter-spacing: -.014em; text-wrap: balance; }
  /* O SVG guarda 20 de folga de cada lado para o halo; a margem negativa
     devolve o texto ao alinhamento da coluna. No telefone, onde tudo é
     centrado, a linha curta anda metade da diferença para a longa. A largura e a caixa escalam
     juntas, então o borrão do filtro acompanha o tamanho da letra. */
  .soon { margin: 20px 0 0; }
  .soon svg { display: block; width: min(100%, 216px); height: auto; margin-left: -12px; overflow: visible; }
  .soon-calor { filter: url(#soon-calor); }
  /* SEM ESCURO, por enquanto: @media (prefers-color-scheme: dark) { .soon-calor { filter: url(#soon-calor-escuro); } } */
  .soon-tinta { font-weight: 700; font-size: 50px; fill: #fff; stroke: #fff; stroke-width: 2.5px; stroke-linejoin: round; }
  @media (prefers-reduced-motion: reduce) { .soon-tinta { mask: none; } }
  .hero-device { display: flex; flex-direction: column; align-items: center; gap: 22px; }
  /* Os rádios existem para guardar a escolha; quem aparece são os rótulos. Fora
     da vista, não fora da árvore: continuam focáveis e as setas trocam a aba. */
  .hero-device input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* Só a tela escolhida aparece. Sem :has() o navegador fica na primeira, que é
     a Carteira — a mesma que a página mostrava antes de existir o controle. */
  .phone .screen { display: none; }
  .phone .screen[data-tab="carteira"] { display: block; }
  .hero-device:has(#tab-categorias:checked) .screen { display: none; }
  .hero-device:has(#tab-categorias:checked) .screen[data-tab="categorias"] { display: block; }
  .hero-device:has(#tab-agenda:checked) .screen { display: none; }
  .hero-device:has(#tab-agenda:checked) .screen[data-tab="agenda"] { display: block; }
  .hero-device:has(#tab-contatos:checked) .screen { display: none; }
  .hero-device:has(#tab-contatos:checked) .screen[data-tab="contatos"] { display: block; }
  /* O controle: uma calha do papel com o segmento escolhido em superfície
     elevada — a mesma relação cartão/chão do app. */
  .tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.06); }
  .tabs label { padding: 7px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease); user-select: none; }
  .tabs label:hover { color: var(--ink); }
  .hero-device:has(#tab-carteira:checked) label[for="tab-carteira"],
  .hero-device:has(#tab-categorias:checked) label[for="tab-categorias"],
  .hero-device:has(#tab-agenda:checked) label[for="tab-agenda"],
  .hero-device:has(#tab-contatos:checked) label[for="tab-contatos"] { color: var(--ink); background: var(--bg-alt); box-shadow: 0 1px 2px rgba(var(--shadow-ink), .10), 0 2px 6px rgba(var(--shadow-ink), .06); }
  .hero-device input:focus-visible + input + input + input ~ .tabs label[for="tab-carteira"],
  .hero-device input:focus-visible + input + input ~ .tabs label[for="tab-categorias"],
  .hero-device input:focus-visible + input ~ .tabs label[for="tab-agenda"],
  .hero-device input:focus-visible ~ .tabs label[for="tab-contatos"] { outline: 2px solid var(--green); outline-offset: 2px; }
  /* SEM ESCURO, por enquanto: @media (prefers-color-scheme: dark) { .tabs { background: rgba(255,255,255,.08); } } */
  @media (max-width: 820px) {
    .hero { padding: 40px 0 64px; text-align: center; }
    .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
    .hero .icon { margin: 0 auto 24px; }
    .hero .lede { margin-left: auto; margin-right: auto; }
    .soon svg { margin-left: auto; margin-right: auto; }
    .soon-curta { transform: translateX(45.5px); }
    /* No telefone o controle vem antes do aparelho: com tudo empilhado, o
       aparelho é alto, e um controle embaixo dele ficaria fora da vista quando
       se quer trocar de tela. */
    .tabs { order: -1; }
  }

  /* As três portas, abaixo do hero. Cada uma é um bloco inteiro clicável em
     superfície elevada; o que muda no hover é a sombra e a seta, porque é o
     bloco que responde, não uma palavra dentro dele. */
  .portas { padding: 0 0 96px; }
  .portas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .portas a {
    display: flex; flex-direction: column; height: 100%;
    background: var(--bg-alt); border-radius: var(--radius); padding: 30px 28px;
    box-shadow: 0 1px 2px rgba(var(--shadow-ink), .05), 0 8px 24px rgba(var(--shadow-ink), .05);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .portas a:hover { box-shadow: 0 2px 4px rgba(var(--shadow-ink), .07), 0 16px 40px rgba(var(--shadow-ink), .09); transform: translateY(-2px); }
  .portas h2 { font-size: 21px; letter-spacing: -.022em; }
  .portas p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
  .portas p strong { color: var(--ink); font-weight: 600; }
  /* margin-top auto: as setas alinham no pé mesmo com resumos de alturas
     diferentes. */
  .porta-mais { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 600; color: var(--green-ink); }
  .portas a:hover .porta-mais { text-decoration: underline; }
  @media (max-width: 820px) {
    .portas { padding-bottom: 72px; }
    .portas ul { grid-template-columns: 1fr; }
  }

  /* Phone: the iPhone Air bezel over the screenshot. The screen hole in the
     bezel PNG is 1260x2736 at (60,72) of 1380x2880, corner radius ~190px; the mask stays a hair under it so the wall hides the seam. */
  /* A sombra é tingida, não preta: o mesmo quase-preto do papel escuro
     (#080A09, hue 150°), para que o que o aparelho projeta sobre o papel seja
     da mesma família que o papel. Preto puro por cima do papel esverdeado
     puxava para o cinza azulado — o mesmo problema que o app corrige nos
     próprios fios. */
  :root { --phone-w: 320px; --shadow-ink: 8, 10, 9; }
  .phone { position: relative; width: var(--phone-w); aspect-ratio: 1380 / 2880; flex: none; filter:
      drop-shadow(0 1px 1.5px rgba(var(--shadow-ink), .10))
      drop-shadow(0 4px 8px rgba(var(--shadow-ink), .07))
      drop-shadow(0 14px 24px rgba(var(--shadow-ink), .08))
      drop-shadow(0 34px 56px rgba(var(--shadow-ink), .11));
  }
  .phone .screen { position: absolute; left: 4.348%; top: 2.5%; width: 91.304%; height: 95%; object-fit: cover; border-radius: 14.5% / 6.7%; background: #F1F3F2; }
  .phone::after { content: ""; position: absolute; inset: 0; background: url("img/iphone-air-space-black.png") center / 100% 100% no-repeat; pointer-events: none; }
  @media (max-width: 820px) { :root { --phone-w: min(320px, 78vw); } }

  /* Sections */
  .feature { padding: 120px 0; }
  .feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .feature.flip .copy { order: 2; }
  .feature .copy h2 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.028em; }
  .feature .copy p { font-size: 19px; line-height: 1.45; color: var(--ink-2); margin-top: 18px; max-width: 38ch; letter-spacing: -.01em; }
  .feature .art { display: flex; justify-content: center; }
  .feature.alt { background: var(--bg-alt); }
  @media (max-width: 820px) {
    .feature { padding: 80px 0; }
    .feature .wrap { grid-template-columns: 1fr; gap: 40px; }
    .feature.flip .copy { order: 0; }
  }

  /* Privacy */
  .privacy { padding: 120px 0; text-align: center; }
  .privacy h2 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.028em; max-width: 18ch; margin: 0 auto; }
  .privacy > .wrap > p { font-size: 19px; color: var(--ink-2); max-width: 48ch; margin: 18px auto 0; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; text-align: left; }
  .tile { background: var(--bg-alt); border-radius: var(--radius); padding: 30px 28px; }
  .tile .glyph { width: 40px; height: 40px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); display: grid; place-items: center; margin-bottom: 18px; }
  .tile h3 { font-size: 21px; letter-spacing: -.02em; }
  .tile p { color: var(--ink-2); margin-top: 8px; font-size: 16px; }
  @media (max-width: 820px) { .grid3 { grid-template-columns: 1fr; } }

  /* Brasil */
  .brasil { padding: 100px 0; background: var(--green-deep); color: #fff; }
  .brasil h2 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.028em; }
  .brasil ul { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
  .brasil li { font-size: 19px; line-height: 1.4; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); letter-spacing: -.01em; }
  .brasil li b { display: block; font-weight: 600; }
  .brasil li span { opacity: .78; }
  @media (max-width: 720px) { .brasil ul { grid-template-columns: 1fr; } }

  /* More */
  .more { padding: 110px 0; }
  .more h2 { font-size: clamp(28px, 3.6vw, 36px); letter-spacing: -.025em; }
  .more .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
  .more .item { border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px; }
  .more .item h3 { font-size: 17px; letter-spacing: -.015em; }
  .more .item p { color: var(--ink-2); font-size: 15px; margin-top: 6px; line-height: 1.4; }
  @media (max-width: 900px) { .more .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .more .grid { grid-template-columns: 1fr; } }

  /* Final CTA */
  .final { padding: 110px 0 120px; text-align: center; background: var(--bg-alt); }
  .final .icon { width: 72px; height: 72px; margin: 0 auto 24px; display: block; filter: drop-shadow(0 8px 18px rgba(21,112,64,.2)); }
  .final h2 { font-size: clamp(32px, 4.4vw, 46px); letter-spacing: -.028em; }
  .final p { color: var(--ink-2); font-size: 19px; margin-top: 14px; }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* Text pages */
  .doc { padding: 72px 0 110px; }
  .doc .wrap { max-width: 720px; }
  .doc h1 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.028em; }
  .doc .lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin-top: 18px; max-width: 52ch; letter-spacing: -.01em; }
  /* O endereço é o conteúdo da página de ajuda, não um detalhe dela: tamanho
     de título, e a única coisa em verde na coluna. */
  .mailto { margin: 36px 0 0; font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; letter-spacing: -.025em; }
  .mailto a { color: var(--green-ink); }
  .mailto a:hover { text-decoration: underline; }
  .mailto-note { margin: 12px 0 0; color: var(--ink-3); font-size: 16px; max-width: 46ch; }
  .qas-head { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
  .qas-head h2 { font-size: 26px; letter-spacing: -.025em; }
  .qas-head p { color: var(--ink-2); margin-top: 8px; }
  .qas-head + .qas { margin-top: 24px; }
  /* O FAQ é uma pilha de <details>: o elemento guarda o estado de aberto,
     responde a Enter e é anunciado como expansível sem uma linha de ARIA. */
  .qas { margin-top: 56px; border-bottom: 1px solid var(--line); }
  .qa { border-top: 1px solid var(--line); }
  .qa summary {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 20px 0; cursor: pointer;
    font-size: 19px; font-weight: 600; letter-spacing: -.02em;
    list-style: none;  /* Firefox */
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary:hover { color: var(--green-ink); }
  .qa summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
  /* O chevron é duas bordas giradas, e não um SVG repetido sete vezes. Aponta
     para baixo fechado, para cima aberto, e o giro é a resposta ao clique. */
  .qa summary::after {
    content: ""; flex: none;
    width: 9px; height: 9px; margin-right: 3px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .22s var(--ease), border-color .22s var(--ease);
  }
  .qa[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .qa summary:hover::after { border-color: var(--green-ink); }
  .qa p { color: var(--ink-2); margin: 0 0 24px; max-width: 60ch; padding-right: 33px; }
  /* A altura só anima onde o navegador sabe interpolar para auto; onde não
     sabe, abre de uma vez, que é o comportamento nativo. */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .qa::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size .28s var(--ease), content-visibility .28s allow-discrete;
    }
    .qa[open]::details-content { block-size: auto; }
  }
  .callout { margin-top: 20px; background: var(--bg-alt); border-radius: var(--radius); padding: 28px 30px; }
  .callout h2 { font-size: 19px; letter-spacing: -.02em; }
  .callout p { color: var(--ink-2); margin-top: 8px; }
  .callout a { color: var(--green-ink); font-weight: 600; }
  .callout a:hover { text-decoration: underline; }
  .empty { margin-top: 48px; padding: 44px 30px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
  .empty p { color: var(--ink-3); max-width: 44ch; margin: 0 auto; }

  /* Preço, na home, abaixo das portas. Dois blocos lado a lado, e a diferença
     entre eles é a superfície: o que quase todo mundo escolhe fica no branco
     elevado, o opcional fica no papel com um fio em volta. Ninguém precisa ler
     "recomendado". O título e o lede são os de .doc, um passo abaixo — aqui o
     <h1> é o nome do app. */
  .precos { padding: 0 0 110px; }
  .precos h2 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; letter-spacing: -.028em; }
  .precos .lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin-top: 18px; max-width: 52ch; letter-spacing: -.01em; }
  .planos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; align-items: start; }
  .plano { border-radius: var(--radius); padding: 32px 30px; border: 1px solid var(--line); }
  .plano-principal { background: var(--bg-alt); border-color: transparent; box-shadow: 0 1px 2px rgba(var(--shadow-ink), .06), 0 12px 32px rgba(var(--shadow-ink), .07); }
  .plano-tipo { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
  .plano-preco { margin-top: 14px; font-size: 44px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
  /* O cifrão é contexto do número; a periodicidade fica ao lado e quase tão
     grande quanto ele, porque "uma vez" e "por mês" são metade do preço —
     4,90 e 14,90 só se comparam sabendo disso. */
  .plano-preco .moeda { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-right: 3px; vertical-align: 6px; color: var(--ink-2); }
  .plano-preco .periodo { margin-left: 10px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--ink-3); white-space: nowrap; }
  .plano-nota { margin-top: 12px; font-size: 16px; color: var(--ink-2); }
  .plano ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 22px; }
  .plano li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
  /* O tique é duas bordas giradas, como o chevron do FAQ. */
  .plano li::before {
    content: ""; position: absolute; left: 2px; top: 6px;
    width: 10px; height: 6px;
    border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
    transform: rotate(-45deg);
  }
  /* O asterisco não engorda o preço: fica no tamanho do rótulo ao lado e
     levantado, para marcar sem disputar com o número. */
  .plano-preco .asterisco { font-size: 20px; font-weight: 500; color: var(--ink-3); vertical-align: 14px; margin-left: 2px; }
  .precos-rodape { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 62ch; }
  .precos .callout { margin-top: 40px; }
  .precos .callout h3 { font-size: 19px; letter-spacing: -.02em; }
  .precos .callout p + p { margin-top: 12px; }
  @media (max-width: 820px) {
    .precos { padding-bottom: 80px; }
    .planos { grid-template-columns: 1fr; margin-top: 40px; }
  }

  /* A empresa, no fim da home. Mesma abertura do preço — título e lede —,
     separada dele por um fio, porque aqui o assunto muda do app para quem o
     faz. Os princípios são texto solto, sem caixa: caixa na home é porta, e
     estes não levam a lugar nenhum. */
  .empresa { padding: 0 0 110px; }
  .empresa .wrap > h2 { padding-top: 72px; border-top: 1px solid var(--line); font-size: clamp(30px, 4vw, 40px); line-height: 1.1; letter-spacing: -.028em; }
  .empresa .lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin-top: 18px; max-width: 52ch; letter-spacing: -.01em; }
  .principios { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .principios h3 { font-size: 19px; letter-spacing: -.02em; }
  .principios p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
  @media (max-width: 820px) {
    .empresa { padding-bottom: 80px; }
    .empresa .wrap > h2 { padding-top: 56px; }
    .principios { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  }

  /* Fora da vista, dentro da árvore: um título que só o leitor de tela lê. */
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* Blog. Não há página por post — os posts vivem inteiros nesta página, do
     mais novo para o mais velho, separados por um fio e bastante ar. Coluna
     estreita e corpo um pouco maior que o resto do site: aqui a página é só
     texto, e texto que se lê inteiro pede linha mais curta e letra maior do
     que texto que se varre. */
  .blog-index { padding: 24px 0 96px; }
  .blog-index .wrap { max-width: 680px; }
  .post + .post { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--line); }
  .post-date { font-size: 14px; color: var(--ink-3); }
  .post h2 { margin-top: 10px; font-size: clamp(32px, 4.2vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
  .post .lede { font-size: 21px; line-height: 1.5; color: var(--ink-2); margin-top: 18px; letter-spacing: -.012em; }
  .post h3 { margin-top: 44px; font-size: 23px; letter-spacing: -.022em; }
  .post p { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
  .post h3 + p { margin-top: 12px; }
  .post p strong { color: var(--ink); font-weight: 600; }
  .post a { color: var(--green-ink); font-weight: 600; }
  .post a:hover { text-decoration: underline; }
  @media (max-width: 820px) {
    .blog-index { padding: 16px 0 72px; }
    .post + .post { margin-top: 56px; padding-top: 56px; }
  }
  }
  @media (max-width: 820px) { .doc { padding: 48px 0 80px; } }

  /* A abertura de uma página de capítulos: centrada, e estreita o bastante
     para ser lida de uma vez antes do primeiro recurso começar. */
  .page-head { padding: 64px 0 24px; text-align: center; }
  .page-head h1 { font-size: clamp(34px, 4.8vw, 52px); line-height: 1.06; letter-spacing: -.03em; max-width: 16ch; margin: 0 auto; }
  .page-head p { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 54ch; margin: 20px auto 0; letter-spacing: -.01em; }
  @media (max-width: 820px) { .page-head { padding: 40px 0 8px; } }

  /* A página de erro. O número é o maior tipo do site e o mais claro: diz o
     que aconteceu sem pedir que se leia, e o título embaixo diz o mesmo em
     palavras. A saída é o link verde, no mesmo jeito das portas da home. */
  .erro { padding: 120px 0 140px; text-align: center; }
  .erro-codigo { font-size: clamp(88px, 14vw, 144px); font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--ink-3); opacity: .5; }
  .erro h1 { margin-top: 20px; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; letter-spacing: -.028em; }
  .erro-volta { display: inline-block; margin-top: 28px; font-size: 17px; font-weight: 600; color: var(--green-ink); }
  .erro-volta:hover { text-decoration: underline; }
  @media (max-width: 820px) { .erro { padding: 72px 0 96px; } }