/* Cynthia · cynthia.app — Sol de Gravura na web.
   Tokens semânticos da pele aprovada (design/peles/pele-02/tokens.json):
   papel de pão, carimbo de 2px, sombra dura de letterpress, Young Serif na
   manchete e Bitter no miolo. Nenhuma superfície referencia cor direta.

   Dose (painel de UX, 05/set/2026): o card do hero é o único pôster completo
   da página; o resto usa o carimbo calmo (borda 2px + sombra 3px) ou a régua
   de tinta. Um registro deslocado por página (o h1). Três luas, não cinco. */

@font-face {
  font-display: fallback;
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/young-serif-latin.woff2") format("woff2");
}

/* Fallback métrico: a Georgia (e a Noto Serif no Android) esticada até a
   largura da Young Serif, para a manchete não re-quebrar quando a fonte
   chega. Medido com fontTools: largura 1,14×, ascendente 1,046 e
   descendente 0,366 do corpo, divididos pelo size-adjust. */
@font-face {
  font-family: "Young Serif Fallback";
  src: local("Georgia"), local("Noto Serif");
  size-adjust: 114%;
  ascent-override: 91.75%;
  descent-override: 32.1%;
  line-gap-override: 0%;
}

@font-face {
  font-display: swap;
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  src: url("/assets/fonts/bitter-latin.woff2") format("woff2");
}

:root {
  --paper: oklch(0.955 0.02 92);
  --card: oklch(0.98 0.015 95);
  --ink: oklch(0.25 0.03 55);
  --ink2: oklch(0.38 0.025 55);
  --ink3: oklch(0.5 0.02 55);
  --fio: oklch(0.84 0.03 85);
  --realce: oklch(0.5 0.13 45);
  --chip: oklch(0.905 0.03 90);
  /* 0.05em é o "3px 3px 0" de tokens.json na manchete de 60px; escala com o h1. */
  --manchete-sombra: max(2px, 0.05em) max(2px, 0.05em) 0 oklch(0.8 0.09 85);
  --sombra: 3px 3px 0 oklch(0.25 0.03 55 / 0.16);
  --sombra-destaque: 5px 5px 0 oklch(0.25 0.03 55 / 0.16);
  --sombra-botao: 3px 3px 0 oklch(0.25 0.03 55 / 0.16);
  --borda: 2px solid var(--ink);
  --fio-forte: 1px solid var(--ink);
  --rodape: oklch(0.25 0.03 55);
  --rodape-texto: oklch(0.86 0.02 90);
  --rodape-apoio: oklch(0.7 0.02 85);
  /* Realce sobre a faixa escura do rodapé: o terracota do papel não passa AA lá. */
  --rodape-realce: oklch(0.8 0.12 60);
  --display: "Young Serif", "Young Serif Fallback", Georgia, "Times New Roman", serif;
  --leitura: "Bitter", Georgia, "Times New Roman", serif;
  color-scheme: light dark;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(0.225 0.02 58);
    --card: oklch(0.26 0.022 60);
    --ink: oklch(0.94 0.025 90);
    --ink2: oklch(0.82 0.02 90);
    --ink3: oklch(0.68 0.018 80);
    --fio: oklch(0.37 0.02 60);
    --realce: oklch(0.72 0.13 50);
    --chip: oklch(0.295 0.022 60);
    --manchete-sombra: max(2px, 0.05em) max(2px, 0.05em) 0 oklch(0.36 0.09 45);
    --sombra: 3px 3px 0 oklch(0 0 0 / 0.35);
    --sombra-destaque: 5px 5px 0 oklch(0 0 0 / 0.35);
    --sombra-botao: 3px 3px 0 oklch(0 0 0 / 0.35);
    /* No escuro a borda creme brilha mais que o texto: desce um degrau. */
    --borda: 2px solid var(--ink2);
    --fio-forte: 1px solid var(--ink2);
    --rodape: oklch(0.165 0.015 60);
    --rodape-texto: oklch(0.86 0.02 90);
    --rodape-apoio: oklch(0.68 0.018 80);
    --rodape-realce: oklch(0.72 0.13 50);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--leitura);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--realce);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--realce);
  outline-offset: 3px;
}

::selection {
  background: var(--realce);
  color: var(--paper);
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.skip-link {
  background: var(--ink);
  border-radius: 8px;
  color: var(--paper);
  left: 12px;
  padding: 10px 14px;
  position: fixed;
  text-decoration: none;
  top: -80px;
  z-index: 200;
}

.skip-link:focus {
  top: 12px;
}

.shell {
  margin-inline: auto;
  max-width: 1080px;
  padding-inline: 24px;
}

/* ---------- Emblema ---------- */

.emblem {
  display: block;
  flex: none;
}

/* ---------- Cabeçalho ---------- */

.site-header {
  background: var(--paper);
  border-bottom: var(--borda);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-inner {
  align-items: center;
  display: flex;
  gap: 18px;
  min-height: 68px;
}

.wordmark {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-family: var(--display);
  font-size: 24px;
  gap: 10px;
  line-height: 1;
  text-decoration: none;
}

.wordmark:hover {
  color: var(--realce);
}

.header-nav {
  align-items: center;
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.header-nav > a:not(.button) {
  color: var(--ink2);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.header-nav > a:not(.button):hover {
  color: var(--realce);
}

/* ---------- Botões e chips ---------- */

.button {
  align-items: center;
  background: var(--card);
  border: var(--borda);
  border-radius: 8px;
  box-shadow: var(--sombra-botao);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--leitura);
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  min-height: 44px;
  padding: 10px 18px;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.button:hover {
  box-shadow: 1px 1px 0 oklch(0.25 0.03 55 / 0.16);
  color: var(--ink);
  transform: translate(2px, 2px);
}

.button.primary {
  background: var(--ink);
  color: var(--paper);
}

.button.primary:hover {
  color: var(--paper);
}

.language {
  align-items: center;
  background: var(--card);
  border: 1.5px solid var(--ink3);
  border-radius: 6px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}

.language a {
  border-radius: 4px;
  color: var(--ink3);
  font-family: var(--leitura);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: 32px;
  min-width: 40px;
  padding: 8px 9px;
  text-align: center;
  text-decoration: none;
}

.language a[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
}

.chip {
  background: var(--realce);
  border-radius: 6px;
  color: var(--paper);
  display: inline-block;
  font-family: var(--leitura);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 6px 9px;
  text-transform: uppercase;
}

.kicker,
.coming {
  color: var(--realce);
  display: inline-block;
  font-family: var(--leitura);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.kicker {
  margin-bottom: 14px;
}

/* ---------- Carimbo (card da casa) ---------- */

.stamp {
  background: var(--card);
  border: var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 22px 22px 24px;
}

.stamp h3 {
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 8px;
}

.stamp p {
  color: var(--ink2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Hero ---------- */

.hero-inner {
  align-items: center;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  padding-block: 56px 32px;
}

h1 {
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.02;
  margin: 0 0 20px;
  text-shadow: var(--manchete-sombra);
}

.hero-copy {
  color: var(--ink2);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 520px;
}

.hero-manifesto {
  color: var(--ink2);
  font-family: var(--leitura);
  font-size: 17px;
  margin: 0 0 26px;
}

.store-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.store-badge {
  display: inline-flex;
  line-height: 0;
}

.store-badge img {
  display: block;
  height: 48px;
  width: auto;
}

.store-badge.play img {
  height: 57px;
  margin: -4px -8px -5px -8px;
}

.free-note {
  color: var(--ink3);
  font-size: 14px;
  margin: 14px 0 0;
}

/* O card do dia — o produto, desenhado em HTML, sem imagem. É o único lugar
   com a pilha completa da pele: borda, sombra de 5px, moldura interna,
   emblema, chip e assinatura. */

.hero-stage {
  display: flex;
  justify-content: center;
  padding: 16px 12px 8px;
}

.gravura-card {
  background: var(--card);
  border: var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra-destaque);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 342px;
  padding: 32px 28px 24px;
  position: relative;
  transform: rotate(-2deg);
  width: 100%;
}

.gravura-card::before {
  border: 1px solid var(--realce);
  border-radius: 5px;
  content: "";
  inset: 8px;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
}

.gravura-card .emblem {
  margin-inline: auto;
}

.gravura-card .chip {
  align-self: flex-start;
}

.gravura-card h2 {
  font-size: 26px;
  line-height: 1.12;
  margin: 0;
  text-shadow: none;
  text-wrap: pretty;
}

.gravura-card p {
  color: var(--ink2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}

.gravura-card .talisman {
  color: var(--ink3);
  font-size: 13px;
}

.signature {
  color: var(--ink);
  font-family: var(--leitura);
  font-size: 16px;
  font-style: italic;
  font-synthesis: style;
  font-weight: 500;
  margin: 8px 0 0;
  text-align: center;
}

.signature span {
  color: var(--ink3);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 400;
  margin-left: 0.4em;
}

/* ---------- Seções ---------- */

.section {
  padding-block: 72px 8px;
}

/* O cabeçalho é fixo: a âncora precisa parar abaixo dele. */
[id] {
  scroll-margin-top: 84px;
}

.section-heading {
  margin-bottom: 28px;
  max-width: 640px;
}

/* Uma escala só para os títulos de seção; o h1 do hero fica fora dela. */
.section-heading h2,
.who h2,
.cta h2 {
  font-size: clamp(27px, 3.1vw, 36px);
  line-height: 1.08;
}

.section-heading p {
  color: var(--ink2);
  font-size: 16.5px;
  line-height: 1.55;
  margin: 12px 0 0;
}

.grid-3 {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Quem é ela */

.who {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  padding-block: 40px 8px;
}

.who-lead {
  color: var(--ink);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  margin: 18px 0 20px;
}

.who p {
  color: var(--ink2);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0 0 16px;
  max-width: 640px;
}

.pull-quote {
  align-self: center;
  border-block: var(--borda);
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.2;
  margin: 0;
  padding: 20px 0;
  text-align: center;
  text-wrap: balance;
}

/* O combinado: lista com régua, a mesma da privacidade. */

.privacy {
  margin-top: 56px;
}

.privacy h3 {
  font-size: clamp(24px, 2.4vw, 28px);
  line-height: 1.1;
}

.privacy > p {
  color: var(--ink2);
  font-size: 16.5px;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 640px;
}

.privacy-list {
  display: grid;
  gap: 14px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 24px 0 0;
}

.privacy-list div {
  border-top: var(--fio-forte);
  padding-top: 12px;
}

.privacy-list dt {
  font-family: var(--display);
  font-size: 19px;
  margin: 0 0 4px;
}

.privacy-list dd {
  color: var(--ink2);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}

.privacy-lead {
  color: var(--ink2);
  margin: 22px 0 0;
}

.deal-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.deal-list div {
  border-top: var(--borda);
  padding-top: 14px;
}

.deal-list dt {
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 8px;
}

/* O manifesto fecha a página: carimbo calmo, sem repetir o kit do hero. */

.manifesto-card {
  margin: 56px auto 0;
  max-width: 640px;
  padding: 32px 34px 28px;
}

.manifesto-card h3 {
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.12;
  margin: 0 0 18px;
  text-align: center;
}

.manifesto-card p {
  color: var(--ink2);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.manifesto-card p:nth-last-of-type(2) {
  color: var(--ink);
  font-family: var(--display);
  font-size: 21px;
}

/* CTA final */

.cta {
  border-block: var(--borda);
  margin-top: 72px;
}

.cta-inner {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  padding-block: 52px;
}

.cta h2 {
  margin: 0 0 10px;
}

.cta-inner > div > p {
  color: var(--ink2);
  font-size: 16.5px;
  margin: 0;
  max-width: 460px;
}

/* ---------- Rodapé ---------- */

.site-footer {
  background: var(--rodape);
  color: var(--rodape-texto);
}

.footer-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.7fr) minmax(200px, 0.9fr);
  padding-block: 40px 26px;
}

.site-footer .wordmark {
  color: var(--rodape-texto);
}

.site-footer p {
  font-size: 14px;
  line-height: 1.55;
  margin: 12px 0 8px;
  max-width: 360px;
}

.site-footer a {
  color: var(--rodape-texto);
}

.site-footer a:hover,
.site-footer .wordmark:hover {
  color: var(--rodape-realce);
}

.site-footer :focus-visible {
  outline-color: var(--rodape-realce);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 14px;
}

.footer-language {
  background: transparent;
  border-color: var(--rodape-apoio);
}

.footer-language a {
  color: var(--rodape-apoio);
}

.footer-language a[aria-current="true"] {
  background: var(--rodape-texto);
  color: var(--rodape);
}

.copyright {
  border-top: 1px solid color-mix(in oklab, var(--rodape-texto) 20%, transparent);
  color: var(--rodape-apoio);
  font-size: 12px;
  grid-column: 1 / -1;
  padding-top: 14px;
}

/* ---------- Páginas de texto (legal, suporte) ---------- */

.legal-main {
  min-height: 60vh;
  padding-block: 56px 80px;
}

.legal-head {
  border-bottom: var(--borda);
  margin-bottom: 32px;
  max-width: 640px;
  padding-bottom: 24px;
}

.legal-head h1 {
  font-size: clamp(34px, 4.5vw, 48px);
  margin: 0 0 10px;
  text-shadow: none;
}

.legal-head p {
  color: var(--ink3);
  font-size: 14px;
  margin: 0;
}

.legal-copy {
  max-width: 640px;
}

.legal-copy h2 {
  font-size: 25px;
  line-height: 1.15;
  margin: 40px 0 12px;
}

.legal-copy h3 {
  font-size: 19px;
  margin: 28px 0 10px;
}

.legal-copy p,
.legal-copy li {
  color: var(--ink2);
  font-size: 16.5px;
  line-height: 1.65;
}

.legal-copy p {
  margin: 0 0 14px;
}

.legal-copy ul,
.legal-copy ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-copy li + li {
  margin-top: 6px;
}

.legal-copy strong {
  color: var(--ink);
  font-weight: 700;
}

.legal-copy hr {
  border: 0;
  border-top: var(--fio-forte);
  margin: 36px 0 20px;
}

.table-wrap {
  margin-block: 22px;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}

th,
td {
  border: 1px solid var(--fio);
  color: var(--ink2);
  font-size: 14.5px;
  line-height: 1.45;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--chip);
  color: var(--ink);
  font-weight: 700;
}

.support-lead {
  color: var(--ink2);
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 640px;
}

.support-note {
  color: var(--ink3);
  font-size: 14px;
  margin: 16px 0 0;
}

.support-faq {
  font-size: 26px;
  margin: 48px 0 20px;
}

.support-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-grid h3 {
  font-size: 19px;
}

/* Respostas são texto, não produto: fio de tinta, sem sombra. */
.support-grid .stamp {
  border: var(--fio-forte);
  box-shadow: none;
}

/* ---------- Raiz e 404 ---------- */

.root-main {
  align-items: center;
  display: flex;
  min-height: 100svh;
  padding-block: 48px;
}

.root-card {
  margin-inline: auto;
  max-width: 560px;
  padding: 44px 36px 40px;
  text-align: center;
  width: 100%;
}

.root-card .emblem {
  margin: 0 auto 18px;
}

.root-card .wordmark {
  display: inline-flex;
  font-size: 30px;
  margin-bottom: 20px;
}

.root-card h1 {
  font-size: clamp(26px, 5vw, 36px);
  margin-bottom: 12px;
  text-shadow: none;
}

.root-card .root-alt {
  color: var(--ink3);
  font-family: var(--display);
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1.1;
  margin: 0 0 12px;
  text-wrap: balance;
}

.root-card p {
  color: var(--ink2);
  margin: 0 0 8px;
}

.root-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

/* ---------- Responsivo ---------- */

@media (max-width: 920px) {
  .header-nav > a:not(.button) {
    display: none;
  }

  .hero-inner {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  }

  .grid-3,
  .deal-list {
    grid-template-columns: 1fr;
  }

  .who {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .shell {
    padding-inline: 18px;
  }

  .header-inner {
    gap: 10px;
  }

  .header-nav {
    gap: 10px;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    padding-block: 28px 16px;
  }

  .hero-inner > * {
    width: 100%;
  }

  h1 {
    margin-bottom: 14px;
  }

  .hero-copy {
    margin-bottom: 12px;
  }

  .hero-manifesto {
    margin-bottom: 18px;
  }

  .free-note {
    margin-top: 10px;
  }

  .hero-stage {
    padding: 12px 8px 0;
  }

  .gravura-card {
    transform: none;
  }

  .section,
  .who {
    padding-top: 56px;
  }

  .privacy-list,
  .support-grid {
    grid-template-columns: 1fr;
  }

  .cta-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .footer-inner {
    gap: 18px;
    grid-template-columns: 1fr;
    padding-block: 32px 22px;
  }

  /* O seletor do cabeçalho está sempre à vista; o do rodapé sai. */
  .footer-lang-cell {
    display: none;
  }

  .footer-links {
    gap: 2px;
  }

  .footer-links a {
    padding-block: 10px;
  }

  .copyright {
    grid-column: auto;
  }

  .manifesto-card {
    padding: 30px 24px 24px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 36px;
  }

  .header-inner {
    min-height: 56px;
  }

  .wordmark {
    font-size: 23px;
  }

  .language a {
    min-height: 34px;
  }

  .header-nav > .button {
    font-size: 14px;
    min-height: 40px;
    padding: 8px 12px;
  }

  .hero-copy {
    font-size: 17px;
  }

  .who p {
    font-size: 16px;
    line-height: 1.6;
  }

  .section-heading p {
    font-size: 16px;
  }

  .store-badge img {
    height: 44px;
  }

  .store-badge.play img {
    height: 53px;
  }

  .gravura-card {
    gap: 12px;
    padding: 22px 20px 18px;
  }

  .gravura-card .emblem {
    height: 40px;
    width: 40px;
  }

  .gravura-card h2 {
    font-size: 23px;
  }

  .root-card {
    padding: 32px 22px 30px;
  }
}

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

  .button {
    transition: none;
  }

  .button:hover {
    box-shadow: var(--sombra-botao);
    transform: none;
  }
}

/* No escuro, só o pôster do hero e o botão voltam à tinta cheia. Fica no
   fim para vencer .gravura-card e .button por ordem. */
@media (prefers-color-scheme: dark) {
  .gravura-card,
  .button {
    border-color: var(--ink);
  }
}