/* A porta de fora do Prospect (26/09/2026, refeita no mesmo dia): a gramática do site da obliq
   (obliqstudios.com.br). A barra fixa com ícones a lápis, a coluna de 1088 px, papel com grão, as seções
   alternando papel e papel-2 com um fio entre elas, as provas em moldura com "dados de exemplo", o título
   misto (Fraunces no que pesa, Hanken no resto) e o botão azul com sombra. O Ponto mora nas provas, e o
   fecho é o do site: o O de flores que vai ao q e vira "obliq." (public/landing/assinatura.js). */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/landing/fontes/fraunces.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/landing/fontes/fraunces-italic.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/landing/fontes/hanken.woff2') format('woff2'); }

:root {
  --papel: #FAF7F0;
  --papel-2: #F1ECE1;
  --branco: #FFFFFF;
  --tinta: #1B1814;
  --tinta-2: #5A564D;
  --tinta-3: #8A857A;
  --linha: rgba(27, 24, 20, 0.12);
  --azul: #2946D8;
  --verde: #2F7D55;
  --display: 'Fraunces', Georgia, serif;
  --ui: 'Hanken Grotesk', system-ui, sans-serif;
  --lado: clamp(20px, 4vw, 32px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; color: var(--tinta); font-family: var(--ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  /* o grão do papel, como no site da obliq: ruído fino por cima da cor */
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
em { font-style: italic; color: var(--azul); }
h1, h2, h3 { margin: 0; font-weight: 600; }
.miolo { width: 100%; max-width: 1088px; margin: 0 auto; padding: 0 var(--lado); }

/* os ícones a lápis: o desenho pronto; com o ponteiro em cima de quem os tem, a linha fica viva */
.il { --il-s: 20px; --il-p: 6; display: inline-block; flex: none; width: var(--il-s); height: var(--il-s); background-repeat: no-repeat; background-size: auto 100%; background-position: calc(var(--il-s) * var(--il-p) * -1) 0; vertical-align: middle; }
.il-32 { --il-s: 32px; }
a:hover .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
@keyframes ilVivo { from { background-position: calc(var(--il-s) * var(--il-p) * -1) 0; } to { background-position: calc(var(--il-s) * (var(--il-p) + 3) * -1) 0; } }
/* o desenho da entrada: o lápis traça o ícone quando a seção aparece */
.il.desenha { animation: ilDesenho 875ms steps(7, jump-none) both; }
@keyframes ilDesenho { from { background-position: 0 0; } to { background-position: calc(var(--il-s) * var(--il-p) * -1) 0; } }

/* ---------- a barra ---------- */
.barra { position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; background: var(--papel); border-bottom: 1px solid transparent; }
.barra.rolou { border-bottom-color: var(--linha); }
.barra-miolo { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; max-width: 1088px; margin: 0 auto; padding: 0 var(--lado); }
.marca { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; }
.marca-nome { font-family: var(--display); font-weight: 700; font-size: 22px; font-variation-settings: 'SOFT' 55, 'opsz' 40; letter-spacing: -0.02em; }
.marca-by { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.marca-obliq { font-family: var(--display); font-weight: 700; font-size: 15px; font-variation-settings: 'SOFT' 55, 'opsz' 24; }
.marca-ponto { color: var(--azul); }
.barra-links { display: flex; align-items: center; gap: 26px; }
.barra-links a { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--tinta-2); text-decoration: none; }
.barra-links a:hover { color: var(--tinta); }
.barra-conta { display: flex; align-items: center; gap: 16px; }
.link { font-weight: 600; font-size: 15px; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-sublinhado { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; transition: transform .12s steps(2, end); }
.botao:hover { transform: translateY(-1px); }
.botao-tinta { background: var(--tinta); color: var(--papel); padding: 9px 18px; font-size: 14.5px; }
.botao-azul { background: var(--azul); color: #fff; padding: 15px 28px; font-size: 16px; box-shadow: 0 10px 24px -8px rgba(41, 70, 216, .55); }
.botao-contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao:focus-visible, .link:focus-visible, .copiar:focus-visible, .boneco:focus-visible, .periodo button:focus-visible, summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* ---------- 1. a abertura ---------- */
.abre { padding: 124px 0 48px; border-bottom: 1px solid var(--linha); }
.abre-grade { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.abre h1 { font-family: var(--display); font-size: clamp(46px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 55, 'opsz' 80; }
.abre-sub { margin: 22px 0 0; font-size: 17.5px; color: var(--tinta-2); max-width: 470px; }
.abre-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.abre-nota { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 14px; color: var(--tinta-2); }
.abre-nota a { font-weight: 600; color: var(--tinta); text-underline-offset: 3px; }
.abre-rodape { margin: 36px auto 0; font-size: 19px; color: var(--tinta-2); }
.abre-rodape b { font-family: var(--display); font-weight: 700; color: var(--tinta); }

/* as provas: a tela de verdade numa moldura branca, com a legenda embaixo */
.prova { position: relative; margin: 0; }
.prova-moldura { padding: 8px; background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 20px 40px -24px rgba(27, 24, 20, .35); }
.prova-moldura img { display: block; width: 100%; height: auto; border-radius: 3px; background: var(--papel); }
.prova figcaption { margin: 10px 2px 0; font-size: 13px; color: var(--tinta-2); }

/* o Ponto em cima da moldura da abertura: anda na borda, olha, pula; a fala é um balão de papel,
   sempre por cima de tudo (o contraste que faltava quando ela caía em cima do desenho) */
.prova-ponto { position: absolute; left: 0; right: 0; top: -64px; height: 64px; z-index: 3; pointer-events: none; }
.boneco { position: absolute; bottom: -3px; left: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; line-height: 0; pointer-events: auto; will-change: transform; }
.ponto { display: inline-block; line-height: 0; }
.ponto svg { display: block; shape-rendering: crispEdges; }
.pt-b { fill: var(--azul); }
.pt-s { fill: #1E36A8; }
.pt-k { fill: var(--tinta); }
.pt-g { fill: var(--tinta-2); }
.pt-l { fill: color-mix(in srgb, var(--azul) 42%, var(--papel)); }
.boneco .ponto svg { width: 96px; height: 64px; }
.fala { position: absolute; bottom: 72px; left: 0; max-width: 300px; margin: 0; padding: 9px 14px; background: var(--branco); color: var(--tinta); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 8px 22px -12px rgba(27, 24, 20, .35); font-size: 14.5px; line-height: 1.4; white-space: nowrap; }
.fala::after { content: ''; position: absolute; left: 40px; bottom: -6px; width: 10px; height: 10px; background: var(--branco); border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); transform: rotate(45deg); }
.fala.entra { animation: sobe 500ms steps(1, end) both; }
/* no celular: ao lado do Ponto, na altura dele, com o bico apontando para ele */
.fala.ao-lado { bottom: 8px; white-space: normal; font-size: 13.5px; padding: 8px 12px; }
.fala.ao-lado::after { left: -6px; bottom: 16px; transform: rotate(135deg); }
.fala.ao-lado.a-esquerda::after { left: auto; right: -6px; transform: rotate(-45deg); }
.fala .quem { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.ponto-sentado { position: absolute; top: -46px; right: 18px; z-index: 2; cursor: pointer; }
.ponto-sentado svg { width: 72px; height: 48px; }

/* a entrada da casa: de baixo, assentando em poses de 125 ms */
@keyframes sobe { 0% { opacity: 0; transform: translateY(12px); } 25% { opacity: 1; transform: translateY(2.6px); } 50% { opacity: 1; transform: translateY(.8px); } 75% { opacity: 1; transform: translateY(.2px); } 100% { opacity: 1; transform: none; } }
.revela { opacity: 0; }
.revela.visivel { animation: sobe 500ms steps(1, end) both; }

/* ---------- os blocos ---------- */
.bloco { position: relative; padding: 88px 0; border-bottom: 1px solid var(--linha); overflow: hidden; }
.bloco-papel { background: color-mix(in srgb, var(--papel-2) 88%, transparent); }
.titulo-misto { font-family: var(--ui); font-weight: 400; font-size: clamp(34px, 4.2vw, 50px); line-height: 1.12; letter-spacing: -0.01em; }
.titulo-misto b { font-family: var(--display); font-weight: 700; font-variation-settings: 'SOFT' 55, 'opsz' 80; letter-spacing: -0.02em; }
.titulo-centro { text-align: center; }
.titulo-sub { margin: 14px 0 0; font-size: 22px; color: var(--tinta-2); min-height: 1.5em; }
.titulo-sub .palavra { display: inline-block; opacity: 0; }
.titulo-sub .palavra.visivel { animation: sobe 500ms steps(1, end) both; }
.bloco-texto { margin: 16px 0 0; font-size: 17px; color: var(--tinta-2); max-width: 470px; }
.planta { position: absolute; top: 0; height: 100%; width: 110px; pointer-events: none; }
.planta-esq { left: 0; }
.planta-dir { right: 0; }

/* 2. os passos: nome, texto e a prova, com um fio entre eles */
.passo { display: grid; grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; align-items: start; padding: 40px 0; border-top: 1px solid var(--linha); }
.passo:first-of-type { margin-top: 36px; }
.passo-nome .il { margin-bottom: 10px; }
.passo-nome h3 { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; font-variation-settings: 'SOFT' 55, 'opsz' 60; }
.passo-rotulo { margin: 8px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.passo-texto { margin: 0; font-size: 16px; color: var(--tinta-2); }

/* 3. o caminho desenhado: ícones a lápis e a seta a mão entre eles */
.caminho-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.caminho { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.caminho li { position: relative; display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 12px; padding: 10px 0 18px; }
.caminho li .il { grid-row: 1 / 3; }
.caminho strong { font-family: var(--display); font-weight: 700; font-size: 19px; }
.caminho small { font-size: 14px; color: var(--tinta-2); }
.caminho li:nth-child(even) { margin-left: 64px; }
.caminho li:not(:last-child)::after { content: ''; position: absolute; left: 30px; bottom: -6px; width: 40px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M3 2c4 9 14 17 30 18M27 15l7 5-8 3' fill='none' stroke='%235A564D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.caminho li:nth-child(even):not(:last-child)::after { left: -30px; transform: scaleX(-1); }

/* 4. instalar */
.instalar-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.instalar { display: grid; gap: 10px; }
.baixar { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--tinta); color: var(--papel); border-radius: 14px; text-decoration: none; }
.baixar .il { filter: invert(1) sepia(.25) brightness(1.04); }
.baixar strong { display: block; font-size: 16px; }
.baixar small { display: block; font-size: 13px; opacity: .7; }
.instalar-ou { margin: 6px 2px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
/* o comando numa linha só, inteiro, embaixo do rótulo e do botão (27/09/2026: quebrava em três linhas e o botão
   mudava de largura ao trocar o rótulo) */
.comando { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'onde btn' 'cmd cmd'; gap: 8px 12px; align-items: center; padding: 12px 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; }
.comando-onde { grid-area: onde; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.comando code { grid-area: cmd; display: block; padding: 8px 10px; border-radius: 8px; background: var(--papel); font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12.5px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.comando code::-webkit-scrollbar { display: none; }
.copiar { grid-area: btn; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 132px; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px solid var(--tinta); background: transparent; color: var(--tinta); font: 600 13px var(--ui); cursor: pointer; }
.copiar .il { --il-s: 18px; }
.copiar:hover .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }

/* 5. planos: o seletor anual ou mensal, e o preço grande */
.periodo { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 28px auto 34px; padding: 4px; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 999px; }
.periodo button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--tinta-2); font: 600 14.5px var(--ui); cursor: pointer; }
.periodo button.ativo { background: var(--branco); color: var(--tinta); box-shadow: 0 1px 3px rgba(27, 24, 20, .15); }
.periodo-selo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--verde) 14%, transparent); color: color-mix(in srgb, var(--verde) 72%, #000); }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plano { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; }
.plano-destaque { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta), 0 24px 44px -28px rgba(27, 24, 20, .45); }
.plano-breve { background: transparent; border-style: dashed; }
.plano-nome { margin: 0; font-weight: 700; font-size: 15px; }
.plano-rotulo { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.plano-preco { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; }
.plano-preco b { font-family: var(--display); font-weight: 600; font-size: 50px; line-height: 1; letter-spacing: -0.03em; font-variation-settings: 'SOFT' 55, 'opsz' 80; font-variant-numeric: tabular-nums; }
.plano-preco s { font-size: 18px; color: var(--tinta-3); }
.plano-preco s:empty { display: none; }
.plano-preco small { font-size: 15px; color: var(--tinta-2); }
.plano-breve .plano-preco b { font-size: 34px; color: var(--tinta-2); }
.plano-conta { margin: 6px 0 16px; font-size: 13.5px; color: var(--tinta-3); min-height: 1.4em; }
.plano ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--tinta-2); }
.plano li { position: relative; padding-left: 22px; }
/* o que vem e o que não vem, com os ícones a lápis da casa (30/09/2026): o visto no que vem, o X no que não vem,
   com o texto mais claro. Parados, na pose pronta (a 6 de 7, 20 px). */
.plano li { padding-left: 28px; }
.plano li::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; background: url(/icones-lapis/visto-20.svg) no-repeat -120px 0 / auto 100%; }
.plano li.nao { color: var(--tinta-3); }
.plano li.nao::before { background-image: url(/icones-lapis/fechar-20.svg); opacity: .6; }
.plano .botao { margin-top: auto; align-self: stretch; }
/* os botões dos planos do mesmo tamanho (30/09/2026: o azul, com o padding e a sombra do botão grande, virava uma bola) */
.plano .botao, .plano .botao-azul { padding: 11px 20px; font-size: 15px; }
.plano .botao-azul { box-shadow: 0 6px 14px -8px rgba(41, 70, 216, .5); }
/* o lançamento em destaque: o selo azul em cima do cartão; o preço grande já é o de lançamento */
.plano-selo-lancamento { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(41, 70, 216, .6); }
.plano-destaque .plano-preco b { color: var(--azul); font-size: 58px; }
.plano-depois { margin: 6px 0 0; font-size: 14px; color: var(--tinta-2); }
.plano-depois s { color: var(--tinta-3); margin-right: 2px; }
.plano .troca { display: inline-block; }
.plano .troca.entra { animation: sobe 500ms steps(1, end) both; }

/* 6. dúvidas */
.duvidas-grade { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
.duvidas details { border-top: 1px solid var(--linha); padding: 16px 0; }
.duvidas details:last-child { border-bottom: 1px solid var(--linha); }
.duvidas summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: '+'; font-family: var(--display); font-size: 22px; line-height: 1; color: var(--tinta-3); }
.duvidas details[open] summary::after { content: '\2212'; }
.duvidas p { margin: 10px 0 0; color: var(--tinta-2); max-width: 640px; }

/* ---------- 7. o fecho: o do site da obliq, com o Ponto virando o ponto ---------- */
.fecho { position: relative; display: flex; flex-direction: column; align-items: center; padding: 48px var(--lado) 80px; text-align: center; }
.fecho-palco { position: relative; width: min(640px, 100%); }
.fecho-frase { margin: 14px 0 0; font-size: 21px; color: var(--tinta-2); }
.fecho-frase b { font-family: var(--display); font-weight: 700; color: var(--tinta); }
.fecho-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 26px; }
.ponto-fim { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }

.pe { border-top: 1px solid var(--linha); padding: 22px 0 26px; font-size: 13px; color: var(--tinta-2); }
.pe-miolo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.pe-links { display: flex; gap: 22px; }
.pe a { text-decoration: none; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--tinta); }
.pe a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* nada passa da largura da tela no celular: a página não rola de lado (clip não cria rolagem, o sticky segue) */
html, body { overflow-x: clip; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .barra-links { display: none; }
  .abre { padding-top: 96px; }
  .abre-grade, .caminho-grade, .instalar-grade, .duvidas-grade { grid-template-columns: 1fr; gap: 40px; }
  .prova-abre { margin-top: 56px; }
  .passo { grid-template-columns: 1fr; gap: 14px; }
  .planos { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plano-destaque { order: -1; }
  .planta { display: none; }
  .fala { white-space: normal; max-width: 230px; }
}
@media (max-width: 480px) {
  .barra-conta .link { display: none; }
  .marca-by, .marca-obliq { display: none; }
  .abre h1 { font-size: 44px; }
  .caminho li:nth-child(even) { margin-left: 32px; }
  .bloco { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela, .titulo-sub .palavra { opacity: 1; animation: none !important; }
  .fala.entra, .il.desenha { animation: none; }
}

/* os ícones a lápis dos planos, como no app */
.plano-icone { margin-bottom: 10px; }

/* o aviso antes de baixar: uma folha de papel por cima, com o Ponto espiando da borda */
.aviso-fundo { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(27, 24, 20, .38); }
.aviso-fundo[hidden] { display: none; }
.aviso { position: relative; width: min(560px, 100%); max-height: calc(100svh - 40px); overflow: auto; padding: 30px 28px 24px; background: var(--papel); border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(27, 24, 20, .45); animation: sobe 500ms steps(1, end) both; }
.aviso h3 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2; margin: 6px 0 10px; font-variation-settings: 'SOFT' 55, 'opsz' 60; }
.aviso p { margin: 0 0 10px; color: var(--tinta-2); font-size: 15px; }
.aviso p b { color: var(--tinta); }
.aviso-rotulo { display: flex; align-items: center; gap: 8px; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3) !important; }
.aviso-ponto { position: absolute; top: -34px; right: 36px; }
.aviso-ponto svg { width: 72px; height: 48px; }
.aviso-fechar { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--tinta-2); cursor: pointer; }
.aviso-opcao { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--linha); }
.aviso-opcao-rotulo { margin: 0 0 4px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3) !important; }
.aviso .comando { margin-top: 6px; }
.aviso .comando code { font-size: 12.5px; }
.aviso-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }
.aviso-depois { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--tinta); }
/* escala inteira (3): em 2,5 as juntas entre os pixels do Ponto apareciam */
.aviso-ponto { top: 8px; right: 50px; }
.aviso-ponto svg { width: 72px; height: 48px; }
.aviso-rotulo { padding-right: 110px; }
#aviso-ia { font-family: var(--ui); font-size: 14px; line-height: 1.5; white-space: normal; overflow: visible; background: transparent; padding: 0; }

/* a bolinha em que o Ponto vira antes de assentar no lugar do ponto */
.ponto-bola { position: absolute; left: 0; top: 0; z-index: 5; border-radius: 50%; background: var(--azul); pointer-events: none; }

/* ---------- 0. a carta da obliq (30/09/2026) ----------
   Na landing, uma notificação no jeito dos avisos da Anthropic; em /carta, a carta inteira. Nos dois, o lápis
   da casa escreve a assinatura no alto e no centro, num medalhão de papel, em destaque. Papelaria: folha
   branca com um fio por dentro, a capitular azul, a escada de preço em degraus e o visto a lápis. */
.il-64 { --il-s: 64px; }
.il-n12 { --il-p: 11; }
/* a assinatura de 64 tem 12 poses: o lápis chega, escreve e descansa (1,5 s); depois o vivo breve, ~2 s */
.il-escreve { animation: ilEscreve 1500ms steps(12, jump-none) both, ilVivo 250ms steps(3, jump-end) 1375ms 7.5; }
@keyframes ilEscreve { from { background-position: 0 0; } to { background-position: calc(var(--il-s) * var(--il-p) * -1) 0; } }
.carta-lapis { display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto; padding: 0; border: 1px solid var(--linha); border-radius: 50%; background: var(--papel); box-shadow: 0 14px 28px -18px rgba(27, 24, 20, .45), inset 0 0 0 6px var(--papel), inset 0 0 0 7px var(--linha); color: inherit; }
button.carta-lapis { cursor: pointer; }
button.carta-lapis:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.carta-rotulo { display: block; margin: 18px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.carta-rotulo time { letter-spacing: .08em; }

/* a notificação no topo da landing: o medalhão senta na borda de cima da folha */
.aviso-carta { padding: 132px 0 0; }
.aviso-carta + .abre { padding-top: 56px; }
.aviso-carta-folha { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 620px; margin: 0 auto; padding: 0 36px 28px; text-align: center; text-decoration: none; color: var(--tinta); background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 24px 48px -30px rgba(27, 24, 20, .4); }
.aviso-carta-folha::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--linha); border-radius: 3px; pointer-events: none; }
.aviso-carta-folha .carta-lapis { position: relative; z-index: 1; margin-top: -52px; }
.aviso-carta-titulo { display: block; margin: 10px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 31px); line-height: 1.15; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 55, 'opsz' 80; text-wrap: balance; }
.aviso-carta-texto { display: block; margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); max-width: 460px; }
.aviso-carta-ler { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.aviso-carta-folha:hover .aviso-carta-ler { text-decoration-thickness: 2px; }
.aviso-carta-folha:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }

/* a carta na aba cheia */
.carta-pagina { padding: 132px var(--lado) 24px; }
.carta-topo { max-width: 760px; margin: 0 auto; text-align: center; }
.carta-titulo { text-wrap: balance; margin: 14px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 55, 'opsz' 80; }
.carta-texto { max-width: 680px; margin: 48px auto 0; padding-top: 36px; border-top: 1px solid var(--linha); }
.carta-texto h2 { margin: 36px 0 8px; font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.carta-texto p { margin: 0 0 14px; font-size: 17px; line-height: 1.75; color: var(--tinta-2); }
.carta-texto a { color: var(--tinta); font-weight: 600; text-underline-offset: 3px; }
.carta-abre { font-size: 19px !important; line-height: 1.65 !important; color: var(--tinta) !important; }
/* a carta abre com a marca do produto como ela é na barra: prospect (Fraunces 22), BY (10, caixa alta, tinta-3)
   e obliq. (Fraunces 15, o ponto azul), na mesma linha de base. Classes próprias: as da barra somem no celular. */
.marca-texto { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; line-height: 1; }
.mt-nome { font-family: var(--display); font-weight: 700; font-size: 22px; font-variation-settings: 'SOFT' 55, 'opsz' 40; letter-spacing: -0.02em; color: var(--tinta); }
.mt-by { font-family: var(--ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.mt-obliq { font-family: var(--display); font-weight: 700; font-size: 15px; font-variation-settings: 'SOFT' 55, 'opsz' 24; color: var(--tinta); }
.carta-tag { display: inline-flex; align-items: center; padding: 1px 7px; margin-left: 6px; border: 1px solid var(--linha); border-radius: 5px; background: var(--papel); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); vertical-align: 2px; }
.carta-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin: 44px 0 64px; }

/* a escada: cada degrau sobe um passo, com o piso e o espelho em tinta */
.escada { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 12px; padding: 0; border-bottom: 1px solid var(--linha); }
.degrau { padding: 14px 12px 18px 12px; border-top: 1.5px solid var(--tinta); border-left: 1.5px solid var(--tinta); }
.degrau:nth-child(1) { margin-top: 90px; }
.degrau:nth-child(2) { margin-top: 60px; }
.degrau:nth-child(3) { margin-top: 30px; }
.degrau-breve { border-top: 1.5px dashed var(--tinta-3); border-left: 1.5px dashed var(--tinta-3); border-right: 1.5px dashed var(--tinta-3); }
.carta-texto .degrau p { margin: 0; }
.carta-texto .degrau-preco { display: flex; align-items: baseline; gap: 4px; }
.degrau-preco b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.03em; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 80; font-variant-numeric: tabular-nums; white-space: nowrap; }
.degrau:nth-child(3) .degrau-preco b { color: var(--azul); }
.degrau-preco small { font-size: 13px; color: var(--tinta-2); }
.carta-texto .degrau-nome { margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.carta-texto .degrau-texto { margin-top: 6px; font-size: 14px; line-height: 1.5; }

/* as promessas: uma folha com três colunas e um fio entre elas; cada uma com o seu ícone a lápis, que se
   desenha quando a folha aparece e ferve com o ponteiro em cima */
.promessas { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 26px; padding: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 18px 36px -28px rgba(27, 24, 20, .4); }
.promessa { padding: 22px 20px 22px; }
.promessa + .promessa { border-left: 1px solid var(--linha); }
.promessa .il { margin-bottom: 12px; }
.promessa:hover .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.carta-texto .promessa-titulo { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 17.5px; line-height: 1.25; letter-spacing: -0.01em; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.carta-texto .promessa-texto { margin: 0; font-size: 14.5px; line-height: 1.6; }
/* o "em breve" apoiado no piso do degrau, alinhado à direita, cobrindo o tracejado */
.degrau { position: relative; }
.degrau-selo { position: absolute; top: -11px; right: 10px; margin: 0; }

.carta-assina { display: flex; flex-direction: column; gap: 6px; margin-top: 32px !important; }
/* a assinatura é a marca como ela é, sem mudança nenhuma (obliq-site-ponto/brand/pfp.html, guideline §2):
   "obliq." em Fraunces 700 com SOFT 55 e opsz 80, tracking -0.015em, tinta, e o ponto final azul.
   Sem itálico, sem STUDIOS, sem cor nova. */
.lockup { display: inline-block; font-size: 40px; line-height: 1; }
.lockup-obliq { font-family: var(--display); font-weight: 700; font-style: normal; font-variation-settings: 'SOFT' 55, 'opsz' 80; letter-spacing: -0.015em; color: #1B1814; }
.lockup-ponto { color: #2946D8; }
.carta-assina-quem { font-size: 13.5px; color: var(--tinta-3); }

/* os planos (30/09/2026): três pagos em cartões largos, e o grátis numa faixa embaixo deles */
.planos { max-width: 1040px; margin: 0 auto; }
@media (min-width: 901px) { .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.plano { padding: 28px 28px 26px; }
.planos .plano-preco b { font-size: 48px; white-space: nowrap; }
.planos .plano-destaque .plano-preco b { font-size: 54px; }
.planos .plano-breve .plano-preco b { font-size: 40px; }
.plano-faixa { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; max-width: 1040px; margin: 20px auto 0; padding: 28px 28px; }
/* a cabeça baixa: o ícone ao lado do nome, do preço e da conta */
.faixa-cabeca { display: grid; grid-template-columns: 32px auto; column-gap: 14px; align-items: center; }
.faixa-cabeca .plano-icone { grid-row: 1 / span 3; margin: 0; align-self: center; }
.plano-faixa .plano-preco { margin-top: 2px; }
.plano-faixa .plano-preco b { font-size: 36px; }
.plano-faixa .plano-conta { margin: 2px 0 0; min-height: 0; }
/* a lista numa grade só: os vistos em cima, o fio, os X embaixo, nas mesmas colunas e com o mesmo respiro */
.plano-faixa .faixa-lista { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 12px 24px; margin: 0; }
.plano-faixa li { white-space: nowrap; }
.plano-faixa li.faixa-fio { grid-column: 1 / -1; height: 1px; padding: 0; background: var(--linha); }
.plano-faixa li.faixa-fio::before { display: none; }
.plano-faixa .botao { margin-top: 0; min-width: 150px; align-self: center; }
/* a lista numa linha própria, com a largura toda: ao lado do nome e do botão ela ficava sem ar (30/09/2026) */
@media (min-width: 701px) {
  .plano-faixa { grid-template-columns: minmax(0, 1fr) auto; row-gap: 22px; }
  .plano-faixa .faixa-lista { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding-top: 20px; border-top: 1px solid var(--linha); }
}
@media (max-width: 900px) {
  .aviso-carta { padding-top: 116px; }
  .aviso-carta + .abre { padding-top: 44px; }
  .carta-pagina { padding-top: 112px; }
}
@media (max-width: 700px) {
  .aviso-carta-folha { padding: 0 20px 24px; }
  .aviso-carta-folha::before { inset: 5px; }
  .escada { grid-template-columns: 1fr; border-bottom: 0; }
  .degrau:nth-child(n) { margin-top: 0; }
  .degrau:nth-child(2) { margin-left: 14px; }
  .degrau:nth-child(3) { margin-left: 28px; }
  .degrau:nth-child(4) { margin-left: 42px; }
  .degrau-breve { margin-top: 12px !important; }
  .promessas { grid-template-columns: 1fr; }
  .plano-faixa { grid-template-columns: 1fr; }
  .plano-faixa .faixa-lista { grid-template-columns: 1fr; }
  .plano-faixa { max-width: 460px; }
  .promessa + .promessa { border-left: 0; border-top: 1px solid var(--linha); }
}
@media (prefers-reduced-motion: reduce) { .il-escreve { animation: none; } }

/* ---------- os termos de uso (30/09/2026): o essencial em seis cartões e o texto com o índice ao lado ---------- */
.termos .carta-titulo { max-width: 760px; margin-left: auto; margin-right: auto; }
.termos-sub { max-width: 600px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: var(--tinta-2); text-wrap: balance; }
.termos-sub a { color: var(--tinta); font-weight: 600; text-underline-offset: 3px; }
.termos-rotulo { margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.termos-essencial { max-width: 1000px; margin: 56px auto 0; }
.essencial { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 18px 36px -28px rgba(27, 24, 20, .4); }
.essencial li { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 26px; }
.essencial li:nth-child(n+4) { border-top: 1px solid var(--linha); }
.essencial li:not(:nth-child(3n+1)) { border-left: 1px solid var(--linha); }
.essencial .il { margin-bottom: 8px; }
.essencial li:hover .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.essencial strong { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.essencial span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }

.termos-corpo { display: grid; grid-template-columns: 220px minmax(0, 680px); justify-content: center; gap: 56px; max-width: 1000px; margin: 64px auto 0; }
.termos-indice { position: sticky; top: 96px; align-self: start; }
.termos-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: sec; }
.termos-indice li { counter-increment: sec; }
.termos-indice a { display: grid; grid-template-columns: 24px 1fr; padding: 5px 8px; border-radius: 5px; font-size: 14px; line-height: 1.35; color: var(--tinta-2); text-decoration: none; }
.termos-indice a::before { content: counter(sec); font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.termos-indice a:hover { color: var(--tinta); background: color-mix(in srgb, var(--papel-2) 70%, transparent); }
.termos-indice a.agora { color: var(--tinta); font-weight: 600; background: var(--branco); box-shadow: 0 0 0 1px var(--linha); }

.carta-texto.termos-texto { max-width: none; margin: 0; padding-top: 0; border-top: 0; }
.termos-texto ul { margin: 0 0 12px; padding: 0 0 0 20px; display: grid; gap: 8px; }
.termos-texto ul li { font-size: 16.5px; line-height: 1.7; color: var(--tinta-2); padding-left: 4px; }
.termos-texto ul li::marker { color: var(--tinta-3); }
.termos-destaque { margin-top: 18px !important; font-weight: 600; color: var(--tinta) !important; }
.termos-tabela { margin: 6px 0 16px; overflow-x: auto; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); }
.termos-tabela table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.termos-tabela th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 1px solid var(--linha); }
.termos-tabela td { padding: 11px 14px; vertical-align: top; color: var(--tinta-2); line-height: 1.5; }
.termos-tabela tr + tr td { border-top: 1px solid var(--linha); }
.termos-tabela td:first-child, .termos-tabela td:nth-child(2) { color: var(--tinta); font-weight: 600; white-space: nowrap; }
.termos-passos { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 0; counter-reset: passo; }
.termos-passos li { counter-increment: passo; position: relative; padding: 12px 0 12px 44px; font-size: 16px; line-height: 1.6; color: var(--tinta-2); }
.termos-passos li + li { border-top: 1px dashed var(--linha); }
.termos-passos li::before { content: counter(passo); position: absolute; left: 0; top: 11px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--tinta); border-radius: 5px; rotate: -3deg; font-size: 13px; font-weight: 700; color: var(--tinta); }
.termos-passos strong { display: block; color: var(--tinta); }
.termos-historico { list-style: none; margin: 0; padding: 0; }
.termos-historico li { display: grid; grid-template-columns: 90px 200px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--linha); font-size: 15px; color: var(--tinta-2); }
.termos-historico li:last-child { border-bottom: 1px solid var(--linha); }
.termos-versao { font-weight: 700; color: var(--tinta); }

@media (max-width: 900px) {
  .essencial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .essencial li:not(:nth-child(3n+1)) { border-left: 0; }
  .essencial li:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .essencial li:nth-child(2n) { border-left: 1px solid var(--linha); }
  .termos-corpo { grid-template-columns: 1fr; gap: 32px; }
  .termos-indice { position: static; }
  .termos-indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .essencial { grid-template-columns: 1fr; }
  .essencial li:nth-child(2n) { border-left: 0; }
  .essencial li:nth-child(n+2) { border-top: 1px solid var(--linha); }
  .termos-indice ol { grid-template-columns: 1fr; }
  .termos-historico li { grid-template-columns: 1fr; gap: 2px; }
}

/* as seções dos termos como folhas (30/09/2026, o Vitor: "depois do hero perde a qualidade obliq"): a folha branca
   com o fio por dentro, o medalhão com o ícone a lápis, o número grande em Fraunces e a frase-resumo num bilhete */
.termos-texto { display: grid; gap: 18px; }
.termos-texto section { position: relative; padding: 28px 32px 22px; background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 16px 32px -26px rgba(27, 24, 20, .38); scroll-margin-top: 88px; }
.termos-texto section::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--linha); border-radius: 4px; pointer-events: none; }
.termos-cabeca { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; margin-bottom: 14px; }
.termos-medalha { grid-row: 1 / 3; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--linha); border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 4px var(--papel), inset 0 0 0 5px var(--linha); }
.termos-texto section:hover .termos-medalha .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.termos-n { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--tinta-3); font-variation-settings: 'SOFT' 55, 'opsz' 80; font-variant-numeric: tabular-nums; }
.termos-cabeca h2 { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.carta-texto .termos-frase { display: grid; gap: 2px; margin: 0 0 16px; padding: 12px 16px; background: var(--papel); border-radius: 6px; font-size: 15.5px; line-height: 1.5; color: var(--tinta); }
.termos-frase span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
@media (max-width: 600px) {
  .termos-texto section { padding: 22px 18px 16px; }
  .termos-medalha { width: 50px; height: 50px; }
  .termos-n { font-size: 24px; }
  .termos-cabeca h2 { font-size: 20px; }
}
.aviso-nota { margin: 10px 0 0 !important; font-size: 13.5px !important; }
.aviso-nota a { color: var(--tinta); font-weight: 600; text-underline-offset: 3px; }