/* ─────────────────────────────────────────────────────────────────────────────
   Packed · landing "coming soon"

   Design system tirado da tela do Figma (frame 1440 × 1024). Os valores
   máximos de cada token são exatamente os do Figma; abaixo de 1440px eles
   descem em linha reta até o mínimo, atingido em 390px (celular).

   Fontes: Forrest (títulos) e General Sans (todo o resto), servidas daqui.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Forrest";
  src: url("./assets/fonts/Forrest-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ⚡ 10/10/2026 (Isa: "pixel perfect"). A Forrest tem a caixa da linha muito
   desigual (sobe 1,36em e desce 0,36em), então o texto sempre parecia ~0,15em
   abaixo do meio de qualquer botão, faixa ou cartão. Esta cópia da mesma fonte
   redistribui a caixa em volta da altura das maiúsculas (0,70em): sobe
   (1 + 0,70) / 2 e desce (1 − 0,70) / 2. Assim o meio da linha é o meio das
   maiúsculas e dos algarismos, e "centralizado" fica centralizado de verdade.
   Usada nas seções novas; o topo com o vídeo continua com a Forrest original,
   que é a que bate com o Figma. */
@font-face {
  font-family: "Forrest Centered";
  src: url("./assets/fonts/Forrest-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 85%;
  descent-override: 15%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "General Sans";
  src: url("./assets/fonts/GeneralSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("./assets/fonts/GeneralSans-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("./assets/fonts/GeneralSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Cor ───────────────────────────────────────────── */
  --color-ink: #151515; /* moldura, texto, botão */
  --color-cream: #fbefdb; /* campo, texto do botão, recheio do logo */
  --color-stroke: #000000; /* borda dos controles */
  --color-card: var(--color-ink); /* atrás do vídeo: sem flash branco enquanto carrega */
  --color-placeholder: #6e675d; /* ink clareado sobre o creme (5:1) */

  /* ── Tipografia ────────────────────────────────────── */
  --font-display: "Forrest", Georgia, "Times New Roman", serif;
  --font-sans: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-display: clamp(2rem, 1.35rem + 2.667vw, 3.75rem); /* 32 → 60 */
  --text-lead: clamp(1.125rem, 0.846rem + 1.143vw, 1.875rem); /* 18 → 30 */
  --text-control: clamp(1.0625rem, 0.877rem + 0.762vw, 1.5625rem); /* 17 → 25 */

  /* ── Forma ─────────────────────────────────────────── */
  --frame-gap-y: clamp(0.75rem, -0.0625rem + 3.333vw, 2.9375rem); /* 12 → 47: moldura escura */
  --frame-gap-x: clamp(0.75rem, -0.109rem + 3.524vw, 3.0625rem); /* 12 → 49 */
  --radius-card: clamp(1rem, 0.907rem + 0.381vw, 1.25rem); /* 16 → 20 */
  --radius-control: 0.875rem; /* 14 */
  --stroke: 2px;

  --control-height: clamp(3.25rem, 2.995rem + 1.048vw, 3.9375rem); /* 52 → 63 */
  --control-pad-x: clamp(1.125rem, 0.9625rem + 0.667vw, 1.5625rem); /* 18 → 25 */
  --button-width: clamp(150px, 134.8px + 3.905vw, 191px); /* 150 → 191 */
  --form-gap: clamp(12px, 9.4px + 0.667vw, 19px); /* 12 → 19 */

  --logo-width: clamp(190px, 154.3px + 9.143vw, 286px);

  /* Espaçamento vertical entre os blocos (logo → título → subtítulo → form) */
  --space-logo: clamp(2.5rem, 2.082rem + 1.714vw, 3.625rem);
  --space-title: clamp(1.25rem, 0.566rem + 2.857vw, 3.125rem); /* 20 → 50 */
  --space-lead: clamp(1.5rem, 1.314rem + 0.762vw, 2rem); /* 24 → 32 */

  /* No Figma o conjunto não está no centro exato do cartão: fica 5,5px abaixo.
     O deslocamento entra como padding no topo (metade dele vira descida). */
  --hero-offset: clamp(0rem, -0.255rem + 1.048vw, 0.6875rem); /* 0 → 11 */

  /* Tamanho do bloco central (logo + textos + form) em relação ao Figma.
     No celular fica 1 (já está no limite de leitura); do tablet para cima
     o bloco inteiro encolhe junto, sem mudar a proporção entre as partes. */
  --hero-scale: 1;

  /* Contorno creme atrás do texto, para ler sobre o vídeo. Em `em` para
     acompanhar o corpo: 1/6 dá 10px no título de 60px e 5px no subtítulo
     de 30px, e continua proporcional no celular. Feito com sombras em
     anel (e não -webkit-text-stroke) para as quinas saírem arredondadas
     como no logo, sem espetar nas serifas da Forrest. */
  --text-outline:
    0.1667em 0.0000em 0 var(--color-cream),
    0.1641em 0.0289em 0 var(--color-cream),
    0.1566em 0.0570em 0 var(--color-cream),
    0.1443em 0.0833em 0 var(--color-cream),
    0.1277em 0.1071em 0 var(--color-cream),
    0.1071em 0.1277em 0 var(--color-cream),
    0.0833em 0.1443em 0 var(--color-cream),
    0.0570em 0.1566em 0 var(--color-cream),
    0.0289em 0.1641em 0 var(--color-cream),
    0.0000em 0.1667em 0 var(--color-cream),
    -0.0289em 0.1641em 0 var(--color-cream),
    -0.0570em 0.1566em 0 var(--color-cream),
    -0.0833em 0.1443em 0 var(--color-cream),
    -0.1071em 0.1277em 0 var(--color-cream),
    -0.1277em 0.1071em 0 var(--color-cream),
    -0.1443em 0.0833em 0 var(--color-cream),
    -0.1566em 0.0570em 0 var(--color-cream),
    -0.1641em 0.0289em 0 var(--color-cream),
    -0.1667em 0.0000em 0 var(--color-cream),
    -0.1641em -0.0289em 0 var(--color-cream),
    -0.1566em -0.0570em 0 var(--color-cream),
    -0.1443em -0.0833em 0 var(--color-cream),
    -0.1277em -0.1071em 0 var(--color-cream),
    -0.1071em -0.1277em 0 var(--color-cream),
    -0.0833em -0.1443em 0 var(--color-cream),
    -0.0570em -0.1566em 0 var(--color-cream),
    -0.0289em -0.1641em 0 var(--color-cream),
    -0.0000em -0.1667em 0 var(--color-cream),
    0.0289em -0.1641em 0 var(--color-cream),
    0.0570em -0.1566em 0 var(--color-cream),
    0.0833em -0.1443em 0 var(--color-cream),
    0.1071em -0.1277em 0 var(--color-cream),
    0.1277em -0.1071em 0 var(--color-cream),
    0.1443em -0.0833em 0 var(--color-cream),
    0.1566em -0.0570em 0 var(--color-cream),
    0.1641em -0.0289em 0 var(--color-cream),
    0.0833em 0.0000em 0 var(--color-cream),
    0.0783em 0.0285em 0 var(--color-cream),
    0.0638em 0.0536em 0 var(--color-cream),
    0.0417em 0.0722em 0 var(--color-cream),
    0.0145em 0.0821em 0 var(--color-cream),
    -0.0145em 0.0821em 0 var(--color-cream),
    -0.0417em 0.0722em 0 var(--color-cream),
    -0.0638em 0.0536em 0 var(--color-cream),
    -0.0783em 0.0285em 0 var(--color-cream),
    -0.0833em 0.0000em 0 var(--color-cream),
    -0.0783em -0.0285em 0 var(--color-cream),
    -0.0638em -0.0536em 0 var(--color-cream),
    -0.0417em -0.0722em 0 var(--color-cream),
    -0.0145em -0.0821em 0 var(--color-cream),
    0.0145em -0.0821em 0 var(--color-cream),
    0.0417em -0.0722em 0 var(--color-cream),
    0.0638em -0.0536em 0 var(--color-cream),
    0.0783em -0.0285em 0 var(--color-cream);

  /* ⚡ 10/10/2026: o mesmo contorno em preto, para o título invertido (letra creme). */
  --text-outline-ink:
    0.1667em 0.0000em 0 var(--color-ink),
    0.1641em 0.0289em 0 var(--color-ink),
    0.1566em 0.0570em 0 var(--color-ink),
    0.1443em 0.0833em 0 var(--color-ink),
    0.1277em 0.1071em 0 var(--color-ink),
    0.1071em 0.1277em 0 var(--color-ink),
    0.0833em 0.1443em 0 var(--color-ink),
    0.0570em 0.1566em 0 var(--color-ink),
    0.0289em 0.1641em 0 var(--color-ink),
    0.0000em 0.1667em 0 var(--color-ink),
    -0.0289em 0.1641em 0 var(--color-ink),
    -0.0570em 0.1566em 0 var(--color-ink),
    -0.0833em 0.1443em 0 var(--color-ink),
    -0.1071em 0.1277em 0 var(--color-ink),
    -0.1277em 0.1071em 0 var(--color-ink),
    -0.1443em 0.0833em 0 var(--color-ink),
    -0.1566em 0.0570em 0 var(--color-ink),
    -0.1641em 0.0289em 0 var(--color-ink),
    -0.1667em 0.0000em 0 var(--color-ink),
    -0.1641em -0.0289em 0 var(--color-ink),
    -0.1566em -0.0570em 0 var(--color-ink),
    -0.1443em -0.0833em 0 var(--color-ink),
    -0.1277em -0.1071em 0 var(--color-ink),
    -0.1071em -0.1277em 0 var(--color-ink),
    -0.0833em -0.1443em 0 var(--color-ink),
    -0.0570em -0.1566em 0 var(--color-ink),
    -0.0289em -0.1641em 0 var(--color-ink),
    -0.0000em -0.1667em 0 var(--color-ink),
    0.0289em -0.1641em 0 var(--color-ink),
    0.0570em -0.1566em 0 var(--color-ink),
    0.0833em -0.1443em 0 var(--color-ink),
    0.1071em -0.1277em 0 var(--color-ink),
    0.1277em -0.1071em 0 var(--color-ink),
    0.1443em -0.0833em 0 var(--color-ink),
    0.1566em -0.0570em 0 var(--color-ink),
    0.1641em -0.0289em 0 var(--color-ink),
    0.0833em 0.0000em 0 var(--color-ink),
    0.0783em 0.0285em 0 var(--color-ink),
    0.0638em 0.0536em 0 var(--color-ink),
    0.0417em 0.0722em 0 var(--color-ink),
    0.0145em 0.0821em 0 var(--color-ink),
    -0.0145em 0.0821em 0 var(--color-ink),
    -0.0417em 0.0722em 0 var(--color-ink),
    -0.0638em 0.0536em 0 var(--color-ink),
    -0.0783em 0.0285em 0 var(--color-ink),
    -0.0833em 0.0000em 0 var(--color-ink),
    -0.0783em -0.0285em 0 var(--color-ink),
    -0.0638em -0.0536em 0 var(--color-ink),
    -0.0417em -0.0722em 0 var(--color-ink),
    -0.0145em -0.0821em 0 var(--color-ink),
    0.0145em -0.0821em 0 var(--color-ink),
    0.0417em -0.0722em 0 var(--color-ink),
    0.0638em -0.0536em 0 var(--color-ink),
    0.0783em -0.0285em 0 var(--color-ink);
}

@media (min-width: 768px) {
  :root {
    --hero-scale: 0.8;
  }
}

/* ── Telas maiores que o frame do Figma (1440 × 1024) ──────────────────────
   Até 1440px os tokens param no valor do Figma. Daqui para cima a página
   inteira cresce na mesma proporção, para um monitor de 27" ver a mesma
   composição que o MacBook, e não um bloco pequeno perdido no meio.

   Cada token vira `valor do Figma × fator`, e o fator é o MENOR entre
   largura/1440 e altura/1024: numa janela larga e baixa quem manda é a
   altura, então o conteúdo nunca estoura o cartão. O `max()` segura o
   valor do Figma como piso. */
@media (min-width: 1441px) {
  :root {
    --frame-gap-y: max(47px, min(3.264vw, 4.59vh));
    --frame-gap-x: max(49px, min(3.403vw, 4.785vh));
    --radius-card: max(20px, min(1.389vw, 1.953vh));
    --text-display: max(60px, min(4.167vw, 5.859vh));
    --text-lead: max(30px, min(2.083vw, 2.93vh));
    --text-control: max(25px, min(1.736vw, 2.441vh));
    --radius-control: max(14px, min(0.972vw, 1.367vh));
    --stroke: max(2px, min(0.139vw, 0.195vh));
    --control-height: max(63px, min(4.375vw, 6.152vh));
    --control-pad-x: max(25px, min(1.736vw, 2.441vh));
    --button-width: max(191px, min(13.264vw, 18.652vh));
    --form-gap: max(19px, min(1.319vw, 1.855vh));
    --logo-width: max(286px, min(19.861vw, 27.93vh));
    --space-logo: max(58px, min(4.028vw, 5.664vh));
    --space-title: max(50px, min(3.472vw, 4.883vh));
    --space-lead: max(32px, min(2.222vw, 3.125vh));
    --hero-offset: max(11px, min(0.764vw, 1.074vh));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

html {
  scroll-behavior: smooth;
}

/* ⚡ 10/10/2026: a página ficou longa. O cartão do vídeo continua ocupando a primeira
   tela inteira (dentro da moldura escura), e as seções novas vêm embaixo dele. */
body {
  margin: 0;
  padding: var(--frame-gap-y) var(--frame-gap-x);
  background: var(--color-ink);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 600;
}

/* ── O cartão (área do vídeo) ──────────────────────── */
.card {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 2 * var(--frame-gap-y));
  min-height: calc(100dvh - 2 * var(--frame-gap-y));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-card);
  /* ⚡ 10/10/2026: em cima e embaixo o cartão reserva a altura da setinha de rolar
     (`.scroll-cue`: 3rem + a distância dela até a borda) mais uma folga mínima de
     1.5rem. Assim a setinha nunca encosta nos ícones das redes; quando a tela é larga
     e baixa e não sobra espaço, o cartão cresce em vez de sobrepor. Reservar dos dois
     lados mantém o bloco no meio, como no Figma. */
  --cue-room: calc(3rem + clamp(0.75rem, 2vw, 1.5rem) + 1.5rem);
  padding: max(2.5rem, var(--cue-room)) clamp(1.25rem, 4vw, 3rem);
  /* Referência de largura da mensagem de envio (`100cqi` em .signup__status). */
  container-type: inline-size;
}

/* O vídeo de fundo fica atrás de tudo e cobre o cartão inteiro. */
.card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* A largura do bloco é a do subtítulo (o texto mais largo). O formulário
     não entra nessa conta (`contain` abaixo), só ocupa 100% dela — assim a
     borda esquerda do campo e a direita do botão alinham com o texto. */
  width: fit-content;
  max-width: 100%;
  zoom: var(--hero-scale);
  padding-top: var(--hero-offset);
  text-align: center;
}

.hero__logo {
  display: block;
  width: var(--logo-width);
  height: auto;
  aspect-ratio: 286 / 210;
  margin: 0 0 var(--space-logo);
}

.hero__title {
  /* ⚡ 10/10/2026 (Isa): invertido. Letra creme com contorno preto. */
  color: var(--color-cream);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: var(--text-outline-ink);
}

.hero__lead {
  margin: var(--space-title) 0 0;
  font-size: var(--text-lead);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: var(--text-outline);
}

/* ── Formulário ────────────────────────────────────── */
.signup {
  position: relative;
  display: flex;
  gap: var(--form-gap);
  width: 100%;
  contain: inline-size;
  margin-top: var(--space-lead);
}

.signup__input,
.signup__button {
  height: var(--control-height);
  border: var(--stroke) solid var(--color-stroke);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--text-control);
  line-height: 1;
}

.signup__input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--control-pad-x);
  background: var(--color-cream);
  color: var(--color-ink);
  appearance: none;
}

.signup__input::placeholder {
  color: var(--color-placeholder);
  font-weight: 500;
  opacity: 1;
}

.signup__input:focus-visible,
.signup__button:focus-visible {
  outline: var(--stroke) solid var(--color-ink);
  outline-offset: 3px;
}

.signup__button {
  flex: none;
  width: var(--button-width);
  padding: 0 1rem;
  background: var(--color-ink);
  color: var(--color-cream);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.signup__button:hover {
  background: #2b2b2b;
}

.signup__button:active {
  transform: translateY(1px);
}

.signup__button:disabled {
  cursor: default;
  transform: none;
}

.signup__button:disabled:hover {
  background: var(--color-ink);
}

/* Mensagem de retorno: fica fora do fluxo para não empurrar o layout. */
/* A mensagem de envio ("Thanks! …", erros).
   ⚡ 27/09/2026: ela ficava `absolute` logo abaixo do campo e, no iPhone, quebrava em
   duas linhas e cobria os ícones das redes. Agora:
   - fica no fluxo, entre o formulário e os ícones: quando aparece, empurra os ícones
     para baixo exatamente o espaço que ocupa; sem mensagem (`:empty`), o espaço entre
     o botão e os ícones continua o de sempre;
   - é SEMPRE uma linha só (`nowrap`), e a fonte encolhe quando a tela é estreita: a
     frase mais longa ("Thanks! We'll let you know as soon as we go live.") mede
     ~22,9em em General Sans Semibold, +contorno ≈ 23,2em. `100cqi / 24` é a largura
     do cartão (o container, ver `.card`) dividida por 24 — cabe com folga, e o
     `min()` só entra em ação quando a fonte normal não caberia. */
.signup__status {
  margin: 0.875rem 0 0;
  white-space: nowrap;
  font-size: min(clamp(0.9375rem, 0.845rem + 0.381vw, 1.125rem), 100cqi / 24);
  line-height: 1.3;
  text-align: center;
}

.signup__status:empty {
  display: none;
}

/* Mesmo contorno creme dos textos, para a mensagem ler sobre o vídeo. */
.hero .signup__status {
  text-shadow: var(--text-outline);
}

/* ── Redes sociais ─────────────────────────────────── */
/* Abaixo do formulário (ou da mensagem de envio, quando ela aparece — ela empurra
   os ícones). Círculos pretos com o glifo creme: o mesmo par do botão "Notify me!". */
.social {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2.75rem, 2.46rem + 1.19vw, 3.5rem);
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 2.63rem + 0.48vw, 3.0625rem); /* 44 → 49 */
  aspect-ratio: 1;
  border: var(--stroke) solid var(--color-stroke);
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-cream);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.social__link svg {
  width: 46%;
  height: 46%;
}

.social__link:hover {
  background: #2b2b2b;
}

.social__link:active {
  transform: translateY(1px);
}

.social__link:focus-visible {
  outline: var(--stroke) solid var(--color-ink);
  outline-offset: 3px;
}

/* Campo-isca: fora da tela e fora da leitura, mas presente no formulário. */
.signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Celular: o botão desce para baixo do campo ─────── */
@media (max-width: 600px) {
  .signup {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Em coluna, `flex: 1` viraria altura 0 + sobra, e o campo achataria. */
  .signup__input {
    flex: none;
  }

  .signup__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signup__button,
  .social__link {
    transition: none;
  }
}


/* ═════════════════════════════════════════════════════════════════════════════
   As seções abaixo do vídeo (⚡ 10/10/2026)

   Visual da plataforma: só as duas cores da marca (creme e preto), painéis com
   cantos arredondados sobre a moldura escura, contorno de 2px, hierarquia por
   peso, tamanho e inversão. Forrest nos títulos, General Sans no resto.
   `.media` marca onde entram fotos e animações (é ali que a cor vai chegar).
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --gap: var(--frame-gap-y);
  --pad-panel: clamp(1.5rem, 0.6rem + 3.8vw, 4.5rem);
  --radius-tile: 1.125rem; /* rounded-2xl da plataforma */
  --wrap: 75rem;
  --text-xl: clamp(2.5rem, 1.5rem + 4.6vw, 6rem);
  --text-lg: clamp(2rem, 1.35rem + 2.8vw, 4rem);
  --text-body: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  --text-small: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border: var(--stroke) solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-ink);
  animation: cue 2.2s ease-in-out infinite;
}

.scroll-cue svg { width: 55%; transition: transform 0.15s ease; }
.scroll-cue:hover svg { transform: scale(1.18); }

@keyframes cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.sections {
  --font-display: "Forrest Centered", "Forrest", Georgia, "Times New Roman", serif;
  display: grid;
  /* Uma coluna que nunca passa da largura da tela: sem o minmax, a faixa larga do
     carrossel (dentro da pista da rolagem fixada) alargava todas as seções. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
  color: var(--color-ink);
}

.panel {
  position: relative;
  overflow: hidden;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-card);
  background: var(--color-cream);
  color: var(--color-ink);
  padding: var(--pad-panel);
}

.panel--ink {
  border-color: var(--color-cream);
  background: var(--color-ink);
  color: var(--color-cream);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1.25rem;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 0.65em;
  aspect-ratio: 1;
  border-radius: 999px;
  background: currentColor;
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.display--xl { font-size: var(--text-xl); }
.display--lg { font-size: var(--text-lg); margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }

.lead {
  margin: 1.5rem 0 0;
  max-width: 38em;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
}

/* Lugar de foto / animação: hachura nas duas cores, com a etiqueta do que vai ali. */
.media {
  position: relative;
  min-height: 12rem;
  border: var(--stroke) solid currentColor;
  border-radius: var(--radius-tile);
  background: repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 14px);
  overflow: hidden;
}

.media__tag {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.3rem 0.75rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Foto real no lugar de um `.media` (⚡ 11/10/2026). Cobre o quadro inteiro, com
   a moldura de 2px da regra, e o recorte segue o ponto de foco de cada foto
   (`--focus`, x% y%: onde estão os rostos e as mãos). Em qualquer proporção de
   quadro, esse ponto fica o mais perto possível do centro. */
.photo {
  position: relative;
  overflow: hidden;
  border: var(--stroke) solid currentColor;
  border-radius: var(--radius-tile);
  background: var(--color-ink);
}

.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* ── 1 · Manifesto ─────────────────────────────────── */
.manifesto__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
}

.manifesto__media { min-height: 22rem; }

.manifesto__motto {
  margin: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--radius-tile);
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

.beliefs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.belief {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 12rem;
  padding: 1.25rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-tile);
}

.belief__n {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.belief p {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.35;
}

.belief strong { font-weight: 600; }

/* ── Faixa que corre ───────────────────────────────── */
.ticker {
  overflow: hidden;
  border-block: var(--stroke) solid var(--color-cream);
  color: var(--color-cream);
  padding: 1rem 0;
  margin-inline: calc(-1 * var(--frame-gap-x));
}

.ticker__track,
.band__track {
  display: flex;
  width: max-content;
  animation: run 40s linear infinite;
}

.ticker__run,
.band__run {
  display: flex;
  align-items: center;
  flex: none;
}

.ticker__run span {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  line-height: 1.1;
  white-space: nowrap;
}

.ticker .star { padding: 0 0.6em; }

@keyframes run {
  to { transform: translateX(-50%); }
}

/* ── 2 · Segurança ─────────────────────────────────── */
.safety .lead { font-size: var(--text-small); max-width: 30em; }

.safety__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.safety .display--lg { margin-bottom: 0; }

/* A frase em três linhas fixas, da mais longa para a mais curta (Isa): "Designed
   for the most vulnerable" / "user, a woman on her own" / "= safer for everyone.".
   Cada linha nunca quebra; em coluna estreita a letra diminui até a primeira linha
   (a mais longa, ~15,7em) caber inteira. A coluna é o container (`cqi`). */
.safety__grid > div:first-child { container-type: inline-size; }

.safety__claim span { display: block; white-space: nowrap; }

.safety__claim {
  margin: 1.75rem 0 0;
  font-size: min(clamp(1.25rem, 1rem + 1vw, 1.75rem), 100cqi / 16);
  font-weight: 500;
  line-height: 1.3;
}

.safety__side { display: grid; gap: 1rem; }

.stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-tile);
  background: var(--color-cream);
  color: var(--color-ink);
}

.stat__n {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
  line-height: 1;
}

.stat__label {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.3;
}

.seal strong {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.seal span { font-weight: 500; line-height: 1.35; }

.seals {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seal {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: var(--stroke) solid var(--color-cream);
  border-radius: var(--radius-tile);
  font-size: var(--text-small);
  font-weight: 500;
}

.seal__icon {
  width: 3rem;
  flex: none;
  transition: transform 0.15s ease;
}

.seal:hover .seal__icon { transform: scale(1.15); }

/* ── 3 · Comparação ────────────────────────────────── */
.cmp {
  width: 100%;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-tile);
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--text-body);
  line-height: 1.4;
}

.cmp th,
.cmp td {
  padding: clamp(0.9rem, 1.6vw, 1.4rem) clamp(1rem, 2vw, 1.75rem);
  text-align: left;
  vertical-align: top;
  font-weight: 500;
}

.cmp thead th {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-weight: 700;
}

.cmp tbody tr > * { border-top: var(--stroke) solid var(--color-ink); }
.cmp tbody tr.cmp__cont > * { border-top-style: dashed; }

.cmp tbody th {
  width: 9.5rem;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp td:last-child,
.cmp thead th:last-child {
  background: var(--color-ink);
  color: var(--color-cream);
}

.cmp td:last-child { border-top-color: var(--color-cream); }
.cmp td:last-child strong { font-weight: 700; }

/* ── 3b · Para os locais ───────────────────────────── */
.locals__lead { margin-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Foto larga entre o texto e os cards. No painel preto a moldura é creme.
   Regra da Isa: os três homens sempre inteiros e a cabeça do camelo nunca cortada.
   Na foto (16:9), isso é a caixa x ~15–90%, y 7–74%. Com o foco em 63% 21%, ela
   cabe com folga em quadros de proporção entre 1,5 e 2,65 (largura ÷ altura):
   21:9 = 2,33, 16:10 = 1,6 e 3:2 = 1,5. Mais estreito que 3:2 corta o camelo. */
.locals__photo {
  aspect-ratio: 21 / 9;
  margin-bottom: 1rem;
}

@media (max-width: 1000px) { .locals__photo { aspect-ratio: 16 / 10; } }
@media (max-width: 640px) { .locals__photo { aspect-ratio: 3 / 2; } }

.gains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gain {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: var(--stroke) solid var(--color-cream);
  border-radius: var(--radius-tile);
}

.gain__icon {
  width: 2.75rem;
  margin-bottom: 0.75rem;
  transition: transform 0.15s ease;
}
.gain:hover .gain__icon { transform: scale(1.15); }

.gain__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.05;
}

.gain p {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.45;
}

.locals__motto {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--radius-tile);
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 1000px) { .gains { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .gains { grid-template-columns: 1fr; } .gain { padding: 1.25rem; } }

/* ── 4 · Bento ─────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-column: span 2;
  min-height: 13rem;
  padding: 1.25rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-tile);
  background: var(--color-cream);
  color: var(--color-ink);
}

.tile--a { grid-column: span 4; }

/* "Stay with locals": formato de antes (foto larga em cima, texto embaixo), pedido
   da Isa. A foto (fachadas com varandas) funciona em qualquer recorte; foco no meio. */
.tile__photo { flex: 1; min-height: 16rem; margin-bottom: 0.75rem; }

/* "Meet people": o arquivo já vem recortado (sem a árvore de Natal, dos ombros para
   cima, com o brinde), em 2:1. O quadro é 2:1 em qualquer tela, então nada mais é
   cortado: as três e as taças aparecem sempre inteiras. */
.tile__photo-wide { aspect-ratio: 2 / 1; margin-bottom: 0.75rem; }
.tile--b { grid-column: span 2; }
.tile--ink { background: var(--color-ink); color: var(--color-cream); }

.tile__media { flex: 1; min-height: 14rem; margin-bottom: 0.75rem; }
.tile .tile__title { margin-top: auto; }

.tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  line-height: 1.05;
}

.tile p,
.person p {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
}

/* ── 5 · Assinaturas ───────────────────────────────── */
.swap { text-align: center; }
.swap .eyebrow { justify-content: center; }

.swap__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.swap__item {
  position: relative;
  padding: 0.55rem 1.1rem;
  border: var(--stroke) solid var(--color-cream);
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
}

/* Quando a seção aparece, cada app é riscado, um depois do outro. */
.swap__item::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  top: 50%;
  height: var(--stroke);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease calc(var(--i) * 70ms);
}

.swap__list.is-on .swap__item::after { transform: scaleX(1); }

/* Passou o cursor por cima: o risco se recolhe para a esquerda e o app aparece
   inteiro de novo; tirou o cursor, ele volta a riscar. Depois da animação de entrada
   (`is-done`, main.js) o risco reage na hora, sem o atraso em cascata. */
.swap__list.is-done .swap__item::after { transition-delay: 0s; transition-duration: 0.3s; }
.swap__list.is-on .swap__item:hover::after { transform: scaleX(0); }
.swap__item { cursor: default; }

.swap__arrow {
  width: 2.5rem;
  margin: 1.5rem auto 0.75rem;
}

.swap__logo {
  display: block;
  width: clamp(9rem, 7rem + 8vw, 13rem);
  height: auto;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.swap__logo:hover { transform: scale(1.06) rotate(-3deg); }

.swap__punch {
  max-width: 22em;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}

.swap__free {
  margin: 1rem 0 0;
  font-size: var(--text-body);
  font-weight: 600;
}

/* Botão de chamada (abre o modal da lista de espera). No painel preto ele é creme. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0 1.75rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-cream);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.cta:hover { transform: scale(1.04); }
.cta:active { transform: scale(0.98); }
.cta:focus-visible { outline: var(--stroke) solid currentColor; outline-offset: 3px; }
.panel--ink .cta { border-color: var(--color-cream); background: var(--color-cream); color: var(--color-ink); }

/* ── Modal ─────────────────────────────────────────── */
/* Como na plataforma: o fundo atrás vira a cor de fundo, chapada, com um leve
   desfoque (sem transparência, regra das duas cores). */
.modal {
  width: min(32rem, calc(100vw - 2rem));
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-card);
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-sans);
}
.modal::backdrop { background: var(--color-cream); }
.modal[open] { animation: modal-in 0.25s ease; }
@keyframes modal-in { from { transform: translateY(12px) scale(0.98); } }

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  padding: 0;
  border: var(--stroke) solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-ink);
  cursor: pointer;
}
.modal__close svg { width: 50%; transition: transform 0.15s ease; }
.modal__close:hover svg { transform: scale(1.2); }

.modal__title {
  margin: 0 3rem 0 0;
  font-family: "Forrest Centered", "Forrest", Georgia, serif;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.05;
}
.modal__lead { margin: 0.75rem 0 1.5rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.modal .signup__status { white-space: normal; font-size: var(--text-small); text-align: left; text-shadow: none; }

@media (max-width: 600px) {
  .modal .signup { flex-direction: column; }
  .modal .signup__input { flex: none; }
  .modal .signup__button { width: 100%; }
}

/* ── 6 · Para quem ─────────────────────────────────── */
.people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.person {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 0.75rem 1.25rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-tile);
}

.person .media,
.person__photo { min-height: 0; aspect-ratio: 4 / 5; margin-bottom: 0.5rem; }
.person .tile__title,
.person p { padding-inline: 0.5rem; }

/* ── 7 · Propósito ─────────────────────────────────── */
/* ⚡ 11/10/2026 (Isa): duas colunas. À esquerda o título, o texto e a foto do time
   embaixo deles; à direita os quatro cards, empilhados. */
.purpose__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.purpose__main .purpose__media { margin-top: 2rem; }
@media (max-width: 1000px) and (min-width: 641px) { .priorities { grid-template-columns: 1fr 1fr; } }

/* Foto do time (⚡ 11/10/2026, Isa): nunca recortada pela página. O arquivo já vem
   cortado acima dos braços (2000 × 830); o quadro tem sempre esse formato e só muda de
   tamanho. */
.purpose__media { aspect-ratio: 2000 / 830; }
.purpose .display--lg { margin-bottom: 0; }

.priorities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.priorities li {
  padding: 1rem 1.1rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-tile);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.4;
}

.priorities strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.25;
}

.signature {
  margin: 1.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

/* ── 8 · Uma espiada ───────────────────────────────── */
.peek { padding-bottom: 0; }

.phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  margin: 0 calc(-1 * var(--pad-panel));
  padding: 1rem var(--pad-panel) 0;
  overflow: hidden;
}

/* Celulares no modo escuro da plataforma: fundo preto, desenho em creme. */
.phone {
  --ph: clamp(16rem, 7rem + 33vw, 46rem);
  position: relative;
  flex: none;
  width: calc(var(--ph) * 0.49);
  height: var(--ph);
  border: 0.45rem solid var(--color-ink);
  border-bottom: 0;
  /* Raio pequeno: o canto do aparelho não pode comer o canto do print. */
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--color-ink);
  overflow: hidden;
  container-type: inline-size;
}

.phone--main { --ph: clamp(19rem, 8rem + 42vw, 56rem); }

/* ── Telas de exemplo ──
   Tudo em `em`, desenhado para um celular de 375px de largura (25em × 15px). O
   tamanho da letra acompanha a largura do aparelho (100cqw / 25), então a tela
   inteira escala junto, como um print. Cores: modo escuro da plataforma. */
.screen {
  --c: var(--color-cream);
  --k: var(--color-ink);
  position: absolute;
  inset: 0;
  /* O contorno creme é a borda da própria tela, e o fundo atrás da barra de cima
     também é creme: assim a curva do canto não tem nenhuma fresta preta. */
  border: var(--stroke) solid var(--color-cream);
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: calc((100cqw - 2 * var(--stroke)) / 25);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c);
  background: linear-gradient(var(--c) 0 4.8em, var(--k) 4.8em);
  border-radius: 0.8rem 0.8rem 0 0;
  /* Letra em pixel inteiro: tamanho quebrado (16,83px…) sai borrado em monitor
     comum. Sem `round()` (navegador antigo) fica o valor exato. */
  font-size: round(down, calc((100cqw - 2 * var(--stroke)) / 25), 1px);
  overflow: hidden;
  text-align: left;
}
.screen p { margin: 0; }
.screen .ic { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.screen .ic.fill { fill: currentColor; }

.s-top { display: flex; align-items: center; gap: 0.5em; flex: none; height: 4.8em; padding: 0.6em 1.07em 0; background: var(--c); color: var(--k); }
.s-top > div { flex: 1; }
.s-top__city { font-size: 0.8em; font-weight: 600; letter-spacing: 0.12em; }
.s-top__hi { font-weight: 700; }
.s-round { display: grid; place-items: center; width: 2.67em; height: 2.67em; border-radius: 99em; }
.s-round .ic { width: 1.44em; height: 1.44em; }

.s-page { flex: 1; display: flex; flex-direction: column; gap: 1.1em; padding: 1.1em 1.07em; overflow: hidden; }
.s-h1 { font-size: 1.07em; font-weight: 700; }
.s-cap { margin-top: -0.7em !important; font-size: 0.93em; }
.s-meta { font-size: 0.87em; }
.s-name { display: flex; align-items: center; gap: 0.35em; flex-wrap: wrap; font-weight: 700; }

.s-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em; padding: 0.3em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--c); font-size: 0.93em; font-weight: 600; line-height: 1.2; text-align: center; }
.s-seg span { padding: 0.55em 0; border-radius: 99em; }
.s-seg .on { background: var(--c); color: var(--k); }

.s-card { flex: none; border: 2px solid var(--c); border-radius: 1.2em; padding: 1.07em; }
.s-cardtitle { font-weight: 700; margin-bottom: 0.7em !important; }

.s-av { display: grid; place-items: center; flex: none; width: 2.93em; height: 2.93em; border-radius: 22%; background: var(--c); color: var(--k); box-shadow: 0 0 0 2px var(--c); font-size: 0.93em; font-weight: 700; }
.s-av--xl { width: 5.33em; height: 5.33em; border-radius: 1.2em; font-size: 1em; }
.s-av--sm { width: 2.13em; height: 2.13em; font-size: 0.75em; }

.s-pill { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.15em 0.6em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--c); font-size: 0.8em; font-weight: 700; }
.s-pill .ic { width: 1em; height: 1em; }
.s-pill--fill { background: var(--c); color: var(--k); box-shadow: none; }

/* Feed: post de lista */
.s-post { padding: 0; overflow: hidden; }
.s-banner { display: flex; align-items: center; gap: 0.45em; padding: 0.8em 1.33em; box-shadow: inset 0 -1px 0 var(--c); }
.s-banner b { font-size: 0.8em; letter-spacing: 0.08em; }
.s-banner span { margin-left: auto; font-size: 0.93em; }
.s-post__body { padding: 1.07em 1.33em 0; }
.s-author { display: flex; gap: 0.7em; align-items: center; }
.s-title { margin-top: 0.9em !important; font-size: 1.07em; font-weight: 700; }
.s-sub { margin-top: 0.3em !important; }
.s-listprev { display: grid; gap: 0.8em; margin: 0.9em 0 0; padding: 1.1em; border-radius: 0.93em; box-shadow: inset 0 0 0 1px var(--c); list-style: none; }
.s-listprev li { display: flex; align-items: center; gap: 0.65em; }
.s-listprev li span { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 99em; background: var(--c); color: var(--k); font-size: 0.8em; font-weight: 700; }
.s-listprev .more { justify-content: center; font-size: 0.93em; font-weight: 600; }
.s-actions { display: flex; align-items: center; gap: 0.45em; margin-top: 1.1em; padding: 0.55em 0.93em; border-top: 1px solid var(--c); }
.s-actions em { font-style: normal; font-size: 0.87em; margin-right: 0.5em; }
.s-actions .push { display: flex; align-items: center; gap: 0.35em; margin-left: auto; }

/* Perfil */
.s-back { display: flex; align-items: center; gap: 0.4em; font-weight: 500; }
.s-prof__head { display: grid; grid-template-columns: auto 1fr; gap: 0 1.07em; }
.s-prof__head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em; }
.s-trust { font-size: 0.87em; font-weight: 500; padding: 0.35em 0.75em; }
.s-trust b { font-weight: 700; }
.s-headline { font-weight: 500; }
.s-loc { display: flex; align-items: center; gap: 0.3em; font-size: 0.93em; }
.s-loc .ic { width: 1.05em; height: 1.05em; }
.s-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em 1.07em; margin-top: 1.1em; }
.s-stats p { display: flex; flex-direction: column; font-size: 0.87em; }
.s-stats b { font-size: 1.15em; }
.s-prof hr { margin: 1.1em 0 0.8em; border: 0; border-top: 1px solid var(--c); }
.s-active { display: flex; align-items: center; gap: 0.45em; font-size: 0.8em; }
.s-active i { width: 0.4em; height: 0.4em; border-radius: 99em; background: var(--c); }
.s-row { display: flex; gap: 0.67em; margin-top: 0.7em; }
.s-row--2 { display: grid; grid-template-columns: 1fr 1fr; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.75em 1.1em; border-radius: 0.93em; box-shadow: inset 0 0 0 1px var(--c); font-size: 0.93em; font-weight: 600; white-space: nowrap; }
.s-row .s-btn:first-child { flex: 1; }
.s-btn--fill { background: var(--c); color: var(--k); box-shadow: none; }
.s-about { display: flex; gap: 0.9em; align-items: flex-start; }
.s-about p { font-size: 0.93em; }
.s-video { position: relative; flex: none; width: 5em; aspect-ratio: 9 / 16; border: 2px solid var(--c); border-radius: 1em; background: repeating-linear-gradient(-45deg, var(--c) 0 1px, transparent 1px 7px); }
.s-play { position: absolute; left: 50%; top: 50%; width: 1.8em; height: 1.8em; translate: -50% -50%; border-radius: 99em; background: var(--c); }
.s-play::after { content: ""; position: absolute; left: 0.68em; top: 0.5em; border-left: 0.6em solid var(--k); border-block: 0.4em solid transparent; }
.s-dur { position: absolute; right: 0.3em; bottom: 0.3em; padding: 0 0.35em; border-radius: 0.4em; background: var(--c); color: var(--k); font-size: 0.7em; font-weight: 700; }

/* Mensagens */
.s-thread__head { display: flex; align-items: center; gap: 0.6em; flex: none; padding: 0.8em 1.07em; border-bottom: 1px solid var(--c); }
.s-thread__head > div { flex: 1; min-width: 0; }
.s-thread__head .s-name { font-size: 1.13em; }
.s-sq { display: grid; place-items: center; width: 2.67em; height: 2.67em; border-radius: 0.93em; box-shadow: inset 0 0 0 1px var(--c); }
.s-thread { gap: 1em; }
.s-started { align-self: center; padding: 0.3em 0.9em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--c); font-size: 0.8em; }
.s-msg { display: flex; align-items: flex-end; gap: 0.5em; max-width: 86%; }
.s-msg.me { align-self: flex-end; text-align: right; }
.s-bub { padding: 0.65em 1.07em; border: 2px solid var(--c); border-radius: 1.2em 1.2em 1.2em 0.4em; text-align: left; }
.s-msg.me .s-bub { border-color: var(--c); background: var(--c); color: var(--k); border-radius: 1.2em 1.2em 0.4em 1.2em; }
.s-time { display: flex; align-items: center; gap: 0.25em; margin-top: 0.3em !important; font-size: 0.8em; }
.s-msg.me .s-time { justify-content: flex-end; }
.s-time .ic { width: 1.1em; height: 1.1em; }
.s-compose { display: flex; gap: 0.6em; flex: none; padding: 0.8em 1.07em; border-top: 1px solid var(--c); }
.s-input { flex: 1; padding: 0.65em 1.07em; border-radius: 0.93em; box-shadow: inset 0 0 0 1px var(--c); font-size: 1em; }
.s-send { display: grid; place-items: center; width: 2.93em; border-radius: 0.93em; background: var(--c); color: var(--k); }

/* Barra de baixo */
.s-nav { display: flex; align-items: flex-end; justify-content: space-around; flex: none; padding: 0.55em 0.5em 1.4em; border-top: 1px solid var(--c); background: var(--k); }
.s-nav__it { display: flex; flex-direction: column; align-items: center; gap: 0.2em; width: 4em; }
.s-nav__it .ic { width: 1.5em; height: 1.5em; }
.s-nav__it b { font-size: 0.73em; font-weight: 500; }
.s-nav__it.on .ic { fill: currentColor; stroke-width: 2.25; }
.s-nav__it.on b { font-weight: 700; }
.s-nav__plus { display: grid; place-items: center; width: 3.73em; height: 3.73em; margin-top: -1.1em; border-radius: 99em; background: var(--c); color: var(--k); }
.s-nav__plus .ic { width: 1.87em; height: 1.87em; stroke-width: 2; }

/* A faixa "COMING SOON": negativo das telas (creme com letra preta), na diagonal. */
.band {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 46%;
  rotate: -8deg;
  overflow: hidden;
  border-block: var(--stroke) solid var(--color-ink);
  background: var(--color-cream);
  color: var(--color-ink);
  padding: 0.85rem 0;
}

.band__track { animation-duration: 28s; }

.band__run span {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.band .star { padding: 0 0.7em; }

/* ── 9 · Membros fundadores ────────────────────────── */
.founders__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.founders .display--lg { margin-bottom: 0; }

/* Formulários das seções: mesmo campo e botão do topo, em tamanho de seção. */
.signup--section {
  margin-top: 0;
  contain: none;
}

.signup--section .signup__input,
.signup--section .signup__button {
  height: 3.5rem;
  font-size: 1.0625rem;
}

.signup--section .signup__button { width: auto; padding: 0 1.5rem; }

.sections .signup__status {
  white-space: normal;
  font-size: var(--text-small);
  text-align: left;
}

.panel--ink .signup__input { border-color: var(--color-cream); }
.panel--ink .signup__button {
  border-color: var(--color-cream);
  background: var(--color-cream);
  color: var(--color-ink);
}
.panel--ink .signup__button:hover,
.panel--ink .signup__button:disabled:hover { background: var(--color-cream); }
.panel--ink .signup__input:focus-visible,
.panel--ink .signup__button:focus-visible { outline-color: var(--color-cream); }

/* ── 10 · Perguntas ────────────────────────────────── */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.faq__list { display: grid; gap: 0.75rem; }

.qa {
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-tile);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa__icon {
  position: relative;
  width: 1.75rem;
  aspect-ratio: 1;
  flex: none;
  border: var(--stroke) solid currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  inset: 50% 25% auto;
  height: var(--stroke);
  translate: 0 -50%;
  background: currentColor;
}

.qa__icon::after { rotate: 90deg; transition: rotate 0.2s ease; }
.qa[open] .qa__icon::after { rotate: 0deg; }
.qa summary:hover .qa__icon { transform: scale(1.15); }

.qa[open] summary { background: var(--color-ink); color: var(--color-cream); border-radius: calc(var(--radius-tile) - var(--stroke)) calc(var(--radius-tile) - var(--stroke)) 0 0; }

.qa p {
  margin: 0;
  padding: 1rem 1.25rem 1.25rem;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
}

/* ── 11 · Chamada final ────────────────────────────── */
.final {
  display: grid;
  place-items: center;
  min-height: clamp(30rem, 72vh, 50rem);
  text-align: center;
  isolation: isolate;
}
.final__inner { position: relative; max-width: 56rem; padding-block: clamp(1rem, 4vw, 3rem); }

/* Foto cobrindo o painel todo, focada nos meninos jogando bola e na areia. */
.final__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
}

/* Título como o do topo: letra creme com contorno preto grosso (em `em`, então
   acompanha o tamanho). */
.final .display {
  color: var(--color-cream);
  text-shadow: var(--text-outline-ink);
}
.final .signup__status { text-shadow: var(--text-outline); font-weight: 600; }
.final__form { max-width: 34rem; margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; }
.final .signup__status { text-align: center; }

/* ── 12 · Rodapé ───────────────────────────────────── */
.footer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
  color: var(--color-cream);
}

.footer__logo { width: 5.5rem; height: auto; }
.footer__copy { margin: 0; font-size: var(--text-small); }

.social--footer { margin: 0 0 0 auto; }
.social--footer .social__link { border-color: var(--color-cream); background: var(--color-cream); color: var(--color-ink); }
.social--footer .social__link:hover { background: var(--color-cream); }
.social--footer .social__link:hover svg,
.social__link:hover svg { transform: scale(1.15); }
.social__link svg { transition: transform 0.15s ease; }
.social--footer .social__link:focus-visible { outline-color: var(--color-cream); }

/* ── Entrada suave ao rolar ────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── Tablet ────────────────────────────────────────── */
@media (max-width: 1000px) {
  .beliefs, .people { grid-template-columns: 1fr 1fr; }
  .safety__grid, .purpose__grid, .founders__grid, .faq__grid { grid-template-columns: 1fr; }
  .manifesto__top { grid-template-columns: 1fr; }
  .manifesto__media { min-height: 0; aspect-ratio: 16 / 10; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile, .tile--a, .tile--b { grid-column: span 1; }
  .tile--a, .tile--b { grid-column: span 2; }
}

/* ── Celular ───────────────────────────────────────── */
@media (max-width: 640px) {
  .manifesto__media { aspect-ratio: 4 / 5; }
  .beliefs { grid-template-columns: 1fr; }
  .belief { min-height: 0; gap: 1.25rem; }
  .people { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .person { padding: 0.5rem 0.5rem 0.9rem; }
  .person .tile__title, .person p { padding-inline: 0.25rem; }
  .bento { grid-template-columns: 1fr; }
  .tile, .tile--a, .tile--b { grid-column: span 1; min-height: 0; }
  .tile__photo { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .tile__media { min-height: 11rem; }
  .priorities { grid-template-columns: 1fr; }
  .phone--side:first-child { display: none; }
  .footer { flex-wrap: wrap; }

  /* A tabela vira uma lista: o tema em cima, o jeito velho e o jeito Packed lado a lado. */
  .cmp thead th:first-child { display: none; }
  .cmp, .cmp tbody, .cmp tr { display: block; }
  .cmp thead tr { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 0.25rem; }
  .cmp tbody th[rowspan] ~ td { border-top-width: 0; }
  .cmp tbody tr > td { border-top: 0; }
  .cmp tbody tr { border-top: var(--stroke) solid var(--color-ink); }
  .cmp tbody tr.cmp__cont { border-top-style: dashed; }
  .cmp tbody tr:not(:has(th)) td { padding-top: 0.9rem; }
  .cmp th, .cmp td { padding: 0.75rem 0.85rem; font-size: 0.9375rem; }
  .cmp thead th { font-size: 1.125rem; }
}

/* ── "Travel is broken": carrossel ──────────────────── */
/* ⚡ 10/10/2026 (Isa): o carrossel substitui a tabela em todos os tamanhos. Ele é
   montado pelo main.js a partir da tabela, que fica no HTML só para quem não tem
   JavaScript (e para leitores de tela antigos); com o carrossel montado, ela some. */
.has-carousel .cmp { display: none; }

/* A faixa de cartões vai de borda a borda do painel (passa da coluna do texto),
   mas o primeiro cartão começa alinhado com o título. `--bleed` é a distância
   entre a coluna (.wrap) e a borda interna do painel: o recuo do painel ou, em tela
   larga, a sobra dos dois lados da coluna de 75rem. */
.compare .wrap {
  /* Sem %: em scroll-padding o % seria da faixa, não da coluna. */
  --bleed: max(var(--pad-panel), (100vw - 2 * var(--frame-gap-x) - 2 * var(--stroke) - var(--wrap)) / 2);
}

.cmpc__chips,
.cmpc__track {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  scroll-padding-inline: var(--bleed);
}
.cmpc__chips::-webkit-scrollbar,
.cmpc__track::-webkit-scrollbar { display: none; }

.cmpc__chips { gap: 0.5rem; padding-bottom: 1.25rem; }

.cmpc__chip {
  flex: none;
  padding: 0.5rem 1rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}
.cmpc__chip.on { background: var(--color-ink); color: var(--color-cream); }
.cmpc__chip:focus-visible { outline: var(--stroke) solid var(--color-ink); outline-offset: 2px; }

.cmpc__track {
  gap: 1rem;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.cmpc__track::after { content: ""; flex: none; width: 1px; }

.cmpc__slide {
  display: flex;
  flex-direction: column;
  flex: none;
  width: clamp(17rem, 26vw, 24rem);
  scroll-snap-align: start;
  border: var(--stroke) solid var(--color-ink);
  border-radius: var(--radius-tile);
  overflow: hidden;
}

.cmpc__topic {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem 1.15rem;
  border-bottom: var(--stroke) solid var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cmpc__icon { width: 1.5rem; height: 1.5rem; flex: none; }

.cmpc__old,
.cmpc__new { flex: 1; padding: 1.15rem; }
.cmpc__new { background: var(--color-ink); color: var(--color-cream); }

.cmpc__old p,
.cmpc__new p { margin: 0; font-size: var(--text-body); line-height: 1.4; }
.cmpc__new strong { font-weight: 700; }

.cmpc__label {
  margin-bottom: 0.5rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cmpc__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.cmpc__dots { display: flex; gap: 0.4rem; }
.cmpc__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border: var(--stroke) solid var(--color-ink);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.cmpc__dots i.on { width: 1.4rem; background: var(--color-ink); }

/* Setas (computador): o mouse não desliza, então elas andam um cartão por vez. */
.cmpc__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  padding: 0;
  border: var(--stroke) solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-ink);
  cursor: pointer;
}
.cmpc__arrow svg { width: 50%; transition: transform 0.15s ease; }
.cmpc__arrow:hover svg { transform: scale(1.2); }
.cmpc__arrow:disabled { border-style: dashed; cursor: default; }
.cmpc__arrow:disabled svg { transform: none; }
.cmpc__arrow:focus-visible { outline: var(--stroke) solid var(--color-ink); outline-offset: 2px; }

.cmpc__hint {
  display: none;
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* Rolagem fixada: a seção gruda na tela e a página anda o carrossel (main.js). A
   faixa deixa de aceitar o deslizar e o encaixe, para não brigar com a rolagem. */
.cmp-pin { min-width: 0; }
.compare.is-pinned { position: sticky; }
.compare.is-pinned .cmpc__track { overflow-x: hidden; scroll-snap-type: none; }

@media (max-width: 640px) {
  .compare .display--lg { margin-bottom: 1.25rem; }
  .cmpc__track { gap: 0.75rem; }
  .cmpc__slide { width: 82%; }
  .cmpc__old p, .cmpc__new p { font-size: 1rem; }
  .cmpc__arrow { display: none; }
  .cmpc__foot { margin-top: 1.1rem; }
  .cmpc__hint { display: block; }
  .compare.is-pinned .cmpc__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue, .ticker__track, .band__track { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .swap__item::after { transition: none; }
  .cmpc__dots i { transition: none; }
  .modal[open] { animation: none; }
}