/* Ubuntu: fonte do texto (igual ao Canva). Só as letras latinas, que cobrem os 4 idiomas. */
@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fonts/Ubuntu/Ubuntu-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Reenie Beanie";
  src: url("../assets/fonts/Reenie_Beanie/ReenieBeanie-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Cores da paleta do Seego. A página tem um visual só (claro), igual ao Canva. */
:root {
  --charcoal-blue: #1f536b;
  --cerulean: #207ea1;
  --blue-green: #4193b4;
  --blue-green-2: #4699ba;
  --sky-blue-light: #94c2d5;
  --golden-orange: #ea9f34;
  --navajo-white: #fbdeb1;
  --papaya-whip: #fdefd8;
  --alabaster-grey: #dce0e4;
  --graphite: #343232;

  --white: #ffffff;
  --skip-red: #d62b2b;
  --skip-red-dark: #a50f14;
  --grey-text: #8a8a8a;

  --font-hand: "Reenie Beanie", "Bradley Hand", cursive;
  --font: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Texto e destaque como no Canva. */
  --text: #000000;
  --highlight: #4699ba;
  /* 1 pixel do Canva (página de 380px de largura). Só funciona dentro das seções
     que são "container" (.intro e .s1): lá, 380 * --u = largura da tela. */
  --u: calc(100cqw / 380);
  --gutter: 16px;
  /* Coluna do blog: no celular ocupa a tela toda; no tablet e no computador
     fica centralizada com no máximo 640px, mantendo as proporções do Canva
     (página de 380px). Fora dela fica branco. */
  --max-width: 640px;
  --tap: 48px;
  /* Texto normal de todas as seções: 16px no celular, 17px no tablet, 18px no desktop. */
  --text-size: 1rem;
  --hover-grey: #f1f2f3;

  color-scheme: light;
}

@media (min-width: 600px) {
  :root {
    --text-size: 1.0625rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-size: 1.125rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Tira o quadrado azul que o celular desenha ao tocar num botão. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* O braço da mão passa da coluna: corta só na borda da tela. */
.screen {
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* <picture> só escolhe o arquivo (AVIF ou webp, grande ou pequeno): não ocupa
   lugar no layout, quem conta é o <img> dentro dele. */
picture {
  display: contents;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* Conteúdo centralizado. Respeita o notch e a barra do celular. */
/* overflow-x: clip corta o que passa da coluna (o braço da mão e o papel)
   bem na borda dela, então no tablet o corte fica reto, com branco dos lados. */
.page {
  overflow-x: clip;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 32px);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Topo: BLOGPOST + botão de pular, e a frase com a seta embaixo ---------- */

/* O topo cresce junto com a seção 0 no tablet: --tu é 1 pixel do Canva calculado
   sobre a largura do topo (a margem de 16px de cada lado entra na conta). */
.topbar {
  --tu: calc((100cqw + 2 * var(--gutter)) / 380);
  position: relative;
  z-index: 3;
  container-type: inline-size;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: calc(env(safe-area-inset-top) + 12px);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Linha 1: os dois bem no topo, um em cada canto. */
.topbar__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.topbar__blogpost {
  width: calc(62 * var(--tu));
  margin-top: calc(4 * var(--tu));
}

.topbar__skip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Uma linha só em todos os idiomas: pode passar para a esquerda do botão. */
.topbar__skipLabel {
  color: var(--grey-text);
  font-size: calc(11.7 * var(--tu));
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

/* Linha 2: frase alinhada à direita, numa linha só. A seta começa logo depois
   da última palavra e sobe até o botão. */
.topbar__hint {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: calc(31.2 * var(--tu));
  padding-right: calc(var(--arrow-room) * var(--tu));
  --arrow-room: 76;
}

.topbar__hintText {
  min-width: 0;
  color: var(--skip-red);
  font-size: calc(12.7 * var(--tu));
  line-height: 1.35;
  text-align: right;
}

/* Ponto de largura zero no fim da frase: é ali que fica o rabinho da seta. */
.topbar__arrowAnchor {
  position: relative;
  flex: 0 0 0;
  width: 0;
  height: 0;
  /* Na altura do meio da última linha (meia altura de linha acima do fim do texto). */
  margin-bottom: calc(12.7 * var(--tu) * 1.35 / 2);
}

/* No desenho, o rabinho fica a 5% da esquerda e 26% do topo da imagem.
   A imagem é posicionada para esse ponto cair na âncora e gira em volta dele. */
.topbar__arrow {
  position: absolute;
  left: calc(-0.053 * var(--arrow-w));
  top: calc(-0.26 * var(--arrow-w) * 211 / 360);
  width: var(--arrow-w);
  max-width: none;
  --arrow-w: calc(42 * var(--tu));
  transform-origin: 5.3% 26%;
  transform: translateX(calc(2 * var(--tu))) rotate(-52deg);
}

.skipButton {
  min-height: max(var(--tap), calc(46.8 * var(--tu)));
  min-width: calc(93.6 * var(--tu));
  padding: calc(7.8 * var(--tu)) calc(23.4 * var(--tu));
  border: 0;
  border-radius: calc(13.6 * var(--tu));
  background: linear-gradient(180deg, var(--skip-red), var(--skip-red-dark));
  box-shadow: 0 4px 10px rgb(165 15 20 / 0.35);
  color: var(--white);
  font: inherit;
  font-size: calc(15.6 * var(--tu));
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

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

/* ---------- Seção 0: título + papel ----------
   Posições tiradas do Canva (claude_EN_Onboarding), em pixels do Canva (--u).
   A seção ocupa a tela toda (sem a margem lateral da página), como no Canva. */

.intro,
.s1 {
  container-type: inline-size;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
}

/* Título: as 4 imagens (uma por idioma) foram cortadas rente ao desenho e têm
   a mesma proporção, então usam o mesmo tamanho e posição em todos os idiomas.
   Começa sempre 10px depois da linha do botão de pular, qualquer que seja a
   altura dela (no alemão, por exemplo, a frase ocupa mais linhas). */
.intro__title {
  position: relative;
  z-index: 2;
  width: calc(411.7 * var(--u));
  max-width: none;
  margin: calc(10 * var(--u)) 0 0 calc(20.5 * var(--u));
  pointer-events: none;
}

.intro__title img {
  width: 100%;
  max-width: none;
}

/* ---------- Papel com as informações e o player ---------- */

/* O papel sobe por baixo do título (como no Canva) e passa um pouco da tela à direita. */
.paper {
  position: relative;
  z-index: 1;
  width: calc(420.25 * var(--u));
  /* O papel começa 23.6px acima do fim da palavra amarela, como no Canva.
     A palavra amarela fica mais baixa nos títulos traduzidos. */
  margin: calc(var(--paper-up) * var(--u)) 0 0 calc(-1.91 * var(--u));
}

:root { --paper-up: -96.1; }
html[lang="pt-BR"] { --paper-up: -70; }
html[lang="de"] { --paper-up: -58.9; }
html[lang="es-419"] { --paper-up: -70.8; }

.paper__background {
  max-width: none;
}

.paper__sheet {
  position: relative;
  container-type: inline-size;
}

.paper__background {
  width: 100%;
}

/* As 3 linhas ficam na altura dos 3 ícones desenhados no papel. */
.paper__info {
  position: absolute;
  top: 21%;
  left: 12%;
  right: 50%;
  height: 62%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--graphite);
  /* Exceção ao mínimo de 16px: o papel é baixo demais no celular (ver relatório). */
  font-size: clamp(0.625rem, 2.6cqw, 1rem);
  font-weight: 500;
  line-height: 1.15;
}

/* O player fica sempre em cima do papel, à direita, igual ao Canva.
   Os tamanhos seguem a largura do papel (cqw), então encolhem no celular. */
/* Mesma caixa do player no Canva, em % do papel. */
.player {
  position: absolute;
  top: 24.5%;
  left: 44.7%;
  width: 43.4%;
  height: 51%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player__progress {
  --filled: 0%;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.player__progress::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--charcoal-blue) var(--filled), var(--papaya-whip) var(--filled));
}

.player__progress::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--charcoal-blue);
  -webkit-appearance: none;
}

.player__progress::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--papaya-whip);
}

.player__progress::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--charcoal-blue);
}

.player__progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--charcoal-blue);
}

/* Botão de velocidade: o número escrito no lugar do ícone. */
.player__speed {
  font-family: var(--font);
  font-size: clamp(0.6875rem, 2.6cqw, 0.9375rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* "10" dentro da seta de voltar/avançar 10 segundos. */
.player__button text {
  font-family: var(--font);
  font-size: 7.5px;
  font-weight: 700;
  fill: currentColor;
}

/* Player preso no topo: depois que a pessoa aperta play e rola a página para
   baixo do papel, o mesmo player fica fixo em cima (botões à esquerda, barra
   à direita). O main.js põe a classe isPinned e o "top" (abaixo dos botões de
   idioma, enquanto eles existirem). */
.player.isPinned {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 50%;
  width: min(100%, var(--max-width));
  height: auto;
  flex-direction: row-reverse;
  align-items: center;
  gap: 16px;
  padding: 8px max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left));
  background: var(--white);
  border-bottom: 1px solid var(--alabaster-grey);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateX(-50%);
  animation: playerPinIn 0.2s ease-out;
}

/* O papel tem z-index 1 e o player fica "dentro" dessa camada: sem isso, os
   desenhos e textos das seções de baixo (com z-index) passam por cima dele. */
.paper.hasPinnedPlayer {
  z-index: 30;
}

.player.isPinned .player__bar {
  flex: 1;
  min-width: 0;
}

.player.isPinned .player__buttons {
  gap: 4px;
}

@keyframes playerPinIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .player.isPinned { animation: none; }
}

/* Tempo embaixo da barra: o que já tocou à esquerda, o total à direita. */
.player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.1em;
  color: var(--graphite);
  font-size: clamp(0.625rem, 2.2cqw, 0.875rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.player__buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.player__button {
  display: grid;
  place-items: center;
  width: clamp(30px, 8cqw, 48px);
  height: clamp(30px, 8cqw, 48px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal-blue);
  cursor: pointer;
}

.player__button:hover,
.player__button:active {
  background: var(--hover-grey);
}

.player__button svg {
  width: 60%;
  height: 60%;
  fill: currentColor;
}

.player__button--main {
  width: clamp(34px, 9cqw, 52px);
  height: clamp(34px, 9cqw, 52px);
  background: var(--charcoal-blue);
  color: var(--white);
}

.player__button--main:hover,
.player__button--main:active {
  background: var(--charcoal-blue);
  box-shadow: 0 0 0 4px var(--hover-grey);
}

.player__button--main svg {
  width: 55%;
  height: 55%;
}

.skipButton:focus-visible,
.player__button:focus-visible,
.player__progress:focus-visible {
  outline: 3px solid var(--cerulean);
  outline-offset: 3px;
}

/* ---------- Destaque do que o áudio está lendo ---------- */

/* A frase que está sendo lida fica marcada como com marca-texto.
   ::highlight usa a CSS Custom Highlight API (o main.js marca a frase).
   .isReading é para navegadores sem essa API (marca o parágrafo todo).
   Desenhos não são marcados (pedido dela): só o texto. */
::highlight(reading) {
  background-color: var(--navajo-white);
}

.isReading:not(img) {
  background-color: var(--navajo-white);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Partes usadas em todas as seções ---------- */

.highlight {
  color: var(--highlight);
  font-weight: 700;
}

/* ---------- Seção 1 ----------
   Tudo em pixels do Canva (--u): margens, larguras e espaços entre os blocos. */

/* O texto cresce junto com as imagens: 16px do Canva vezes a escala da tela.
   (Em celular de 390px dá ~16px; na coluna máxima de 480px, ~20px.)
   Fica nos filhos porque --u só vale dentro da seção. */
.s1 > * {
  font-size: calc(16 * var(--u));
}

.s1 p {
  margin: 0;
}

/* Caixa do título igual ao Canva: 217 x 46.7, e cada parte na posição medida lá. */
.s1__heading {
  position: relative;
  width: calc(217 * var(--u));
  height: calc(46.7 * var(--u));
  margin: calc(23 * var(--u)) 0 0 calc(8 * var(--u));
  font-weight: 400;
}

.s1__headingNumber,
.s1__headingStripe {
  position: absolute;
  max-width: none;
}

.s1__headingNumber {
  top: calc(7.7 * var(--u));
  left: calc(1.3 * var(--u));
  width: auto;
  height: calc(26.7 * var(--u));
}

.s1__headingStripe {
  top: calc(9.3 * var(--u));
  left: calc(22.3 * var(--u));
  width: calc(170 * var(--u));
  height: calc(26.7 * var(--u));
}

.s1__headingText {
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(28.3 * var(--u));
  color: #000000;
  font-family: var(--font-hand);
  font-size: calc(28.7 * var(--u));
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

/* "Dear Diary" riscado + as 3 primeiras frases. */
.s1__diary {
  display: flex;
  flex-direction: column;
  margin-top: calc(10 * var(--u));
  padding: 0 calc(23.6 * var(--u));
}

/* "Hi there! Welcome to Seego." é um pouco maior que o resto (17.3px no Canva). */
.s1__hello {
  font-size: 1.083em;
}

/* Polaroid à esquerda; o texto à direita passa um pouco por cima dela. */
.s1__me {
  display: grid;
  grid-template-columns:
    calc(8 * var(--u)) calc(186 * var(--u)) calc(31.4 * var(--u))
    minmax(0, 1fr) calc(20.2 * var(--u));
  margin-top: calc(30.3 * var(--u));
}

.s1__polaroid {
  grid-column: 2 / 4;
  grid-row: 1;
  width: 100%;
}

.s1__meText {
  position: relative;
  grid-column: 3 / 5;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  margin-top: calc(21 * var(--u));
  text-align: right;
}

/* Nos outros idiomas as frases são mais longas: o texto começa depois da foto,
   para não passar por cima dela. */
html:not([lang="en"]) .s1__meText {
  grid-column: 4 / 5;
  margin-left: calc(6 * var(--u));
}

.s1__professional {
  display: inline-block;
}

.s1__professional img {
  display: block;
  width: calc(75.5 * var(--u));
  max-width: none;
  margin-left: auto;
  opacity: 0.55;
}

.s1__comparison {
  width: calc(351.6 * var(--u));
  margin: calc(33 * var(--u)) 0 0 calc(12.9 * var(--u));
}

.s1__thanks {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  width: calc(342 * var(--u));
  margin: calc(14.2 * var(--u)) 0 0 calc(12 * var(--u));
}

/* Menu de ajuda centralizado; o megafone vem embaixo, mais para a esquerda. */
.s1__reachOut {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(28.5 * var(--u));
}

.s1__helpMenu {
  align-self: center;
  width: calc(283.6 * var(--u));
  max-width: none;
  margin-top: calc(4 * var(--u));
}

.s1__megaphone {
  align-self: flex-start;
  width: calc(48.4 * var(--u));
  margin: calc(-4 * var(--u)) 0 0 calc(40 * var(--u));
}

/* Nos outros idiomas o megafone é deitado, com a frase ao lado ("pode chamar"). */
html:not([lang="en"]) .s1__megaphone {
  width: calc(130 * var(--u));
  margin-top: calc(6 * var(--u));
}

/* ---------- Seção 2 ----------
   Medidas em pixels do Canva (--u), contadas a partir do topo da seção.
   Os espaços entre os blocos são os do inglês; nos outros idiomas os textos
   são mais longos e empurram o resto para baixo sem encavalar. */
.s2 {
  container-type: inline-size;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  padding: calc(10 * var(--u)) 0 calc(50 * var(--u));
}

.s2 > :where(*) {
  font-size: calc(16 * var(--u));
}

/* :where() deixa as margens de cada bloco valerem sem brigar com esta regra. */
:where(.s2) p {
  margin: 0;
}

.s2__top {
  position: relative;
  height: calc(60.7 * var(--u));
}

.s2__heading {
  position: relative;
  width: calc(212 * var(--u));
  margin: 0 0 0 calc(12 * var(--u));
  font-weight: 400;
}

.s2__headingImage {
  display: block;
  width: 100%;
}

.s2__headingText {
  position: absolute;
  top: calc(1 * var(--u));
  left: calc(28 * var(--u));
  color: #000000;
  font-family: var(--font-hand);
  font-size: calc(23 * var(--u));
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.s2__typewriter {
  position: absolute;
  top: calc(16.8 * var(--u));
  left: calc(276.7 * var(--u));
  width: calc(115 * var(--u));
  max-width: none;
}

/* "First struggle:" e "Second:" na cor de aviso, letra à mão. */
.s2__label {
  margin-left: calc(var(--label-left) * var(--u));
  color: #ea9f34;
  font-family: var(--font-hand);
  font-size: calc(27.2 * var(--u));
  line-height: 1.2;
  --label-left: 19.7;
}

.s2__label--second {
  margin-top: calc(48.8 * var(--u));
  font-size: calc(29.2 * var(--u));
  line-height: 1.175;
  --label-left: 12.8;
}

.s2__text {
  width: calc(346 * var(--u));
  margin-left: calc(var(--left, 17.4) * var(--u));
  line-height: 1.4;
}

.s2__struggle {
  margin-top: calc(11.4 * var(--u));
  --left: 20.6;
}

.s2__tried {
  display: block;
  width: calc(356.5 * var(--u));
  max-width: none;
  margin: calc(7 * var(--u)) 0 0 calc(12.9 * var(--u));
}

.s2__someGood {
  margin-top: calc(55.2 * var(--u));
}

.s2__algorithm {
  margin-top: calc(12 * var(--u));
  --left: 17;
}

/* A carinha fica logo depois do "???", presa ao fim da frase. */
.s2__faceAnchor,
.s2__figureAnchor {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: top;
}

.s2__face {
  position: absolute;
  top: calc(1.2 * var(--u));
  left: calc(var(--face-gap) * var(--u));
  width: calc(36.7 * var(--u));
  max-width: none;
  --face-gap: 27.1;
}

.s2__sign {
  position: relative;
  width: calc(267 * var(--u));
  margin: calc(27.8 * var(--u)) 0 0 calc(59.4 * var(--u));
}

.s2__sign img {
  display: block;
  width: 100%;
}

.s2__signText {
  position: absolute;
  top: calc(28 * var(--u));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(298 * var(--u));
  transform: translateX(-50%);
  color: var(--charcoal-blue);
  font-size: calc(15.95 * var(--u));
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.s2__travel {
  position: relative;
  min-height: calc(190.1 * var(--u));
  margin-top: calc(38.5 * var(--u));
}

.s2__travelText {
  display: flex;
  flex-direction: column;
  gap: calc(var(--travel-gap) * var(--u));
  width: calc(185.8 * var(--u));
  margin-left: calc(10.9 * var(--u));
  line-height: 1.58;
  --travel-gap: 41.3;
}

.s2__postcards {
  position: absolute;
  top: calc(0.3 * var(--u));
  left: calc(203.3 * var(--u));
  width: calc(185.5 * var(--u));
}

.s2__postcards img {
  display: block;
  width: 100%;
  max-width: none;
}

/* Bilhete à mão, girado como no Canva. */
.s2__postcardNote {
  position: absolute;
  top: calc(8 * var(--u));
  left: calc(0.3 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(168.5 * var(--u));
  height: calc(75.6 * var(--u));
  transform: rotate(10.8deg);
  color: #737373;
  font-family: var(--font-hand);
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  text-align: center;
}

.s2__dailyLife {
  width: calc(356.5 * var(--u));
  margin-top: calc(var(--daily-gap) * var(--u));
  line-height: 1.58;
  --left: 12;
  --daily-gap: 26;
}

.s2__collage {
  display: block;
  width: calc(406 * var(--u));
  max-width: none;
  margin: calc(17.4 * var(--u)) 0 0 calc(-15.5 * var(--u));
}

.s2__saving {
  margin-top: calc(13.3 * var(--u));
  line-height: 1.58;
  --left: 13.6;
}

.s2__figure {
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(var(--figure-gap) * var(--u));
  width: calc(32 * var(--u));
  max-width: none;
  --figure-gap: 40.5;
}

.s2__justify {
  line-height: 1.58;
  text-align: justify;
}

.s2__useless {
  position: relative;
  min-height: calc(98.8 * var(--u));
  margin-top: calc(60.2 * var(--u));
}

.s2__useless .s2__justify {
  width: calc(219.4 * var(--u));
  margin-left: calc(145.5 * var(--u));
}

.s2__uselessSign {
  position: absolute;
  top: calc(56.35 * var(--u));
  left: calc(74.8 * var(--u));
  width: calc(112.5 * var(--u));
  max-width: none;
  transform: translate(-50%, -50%);
}

.s2__justWanted {
  width: calc(345.3 * var(--u));
  margin: calc(30.5 * var(--u)) 0 0 calc(19.7 * var(--u));
}

.s2__born {
  position: relative;
  margin-top: calc(25.28 * var(--u));
  line-height: 1.58;
}

.s2__born p {
  margin-left: calc(66.7 * var(--u));
}

/* Ajustes por idioma: frases mais longas que no inglês. */
html[lang="de"] .s2__headingText {
  font-size: calc(19.5 * var(--u));
  top: calc(3 * var(--u));
}

html[lang="pt-BR"] .s2__figure {
  --figure-gap: 8;
}

html[lang="de"] .s2__born p {
  margin-left: calc(35 * var(--u));
}

html[lang="de"] .s2__phone {
  left: calc(248 * var(--u));
}

/* "E foi assim que... nasceu o Seego." é bem mais longa: começa mais à
   esquerda e o celular vai um pouco para a direita, para não encostar. */
html[lang="pt-BR"] .s2__born p {
  margin-left: calc(20 * var(--u));
}

html[lang="pt-BR"] .s2__phone {
  left: calc(250 * var(--u));
}

.s2__phone {
  position: absolute;
  top: calc(-45.9 * var(--u));
  left: calc(231.8 * var(--u));
  width: calc(122.2 * var(--u));
  max-width: none;
}
/* ---------- Seção 3 ----------
   Mesmas regras da seção 2: medidas do Canva em --u, a partir do topo da seção. */
.s3 {
  container-type: inline-size;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  padding: calc(21 * var(--u)) 0 calc(50 * var(--u));
}

.s3 > :where(*) {
  font-size: calc(16 * var(--u));
}

:where(.s3) p {
  margin: 0;
}

.s3__heading {
  position: relative;
  height: calc(34.3 * var(--u));
  margin: 0;
  font-weight: 400;
}

.s3__headingImage {
  position: absolute;
  top: calc(0.4 * var(--u));
  left: calc(17.8 * var(--u));
  width: calc(263.8 * var(--u));
  max-width: none;
}

.s3__headingText {
  position: absolute;
  top: 0;
  left: calc(41.9 * var(--u));
  color: #000000;
  font-family: var(--font-hand);
  font-size: calc(28.7 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

.s3__text {
  width: calc(347 * var(--u));
  margin-left: calc(var(--left) * var(--u));
  line-height: 1.58;
}

.s3__map {
  margin-top: calc(12.9 * var(--u));
  --left: 17.5;
}

.s3__permissions {
  margin-top: calc(20.8 * var(--u));
  --left: 18.3;
}

.s3__decide {
  margin-top: calc(13.3 * var(--u));
  --left: 17.9;
}

/* Bonequinho com o controle remoto: sobe para o lado da última linha do
   parágrafo, como no Canva. Por isso, em todos os idiomas, a última linha
   desse parágrafo precisa terminar antes de uns 240px. */
.s3__youRow {
  position: relative;
  height: 0;
}

.s3__you {
  position: absolute;
  top: calc(-29.7 * var(--u));
  left: calc(250.7 * var(--u));
  width: calc(71 * var(--u));
  max-width: none;
}

.s3__notes {
  position: relative;
  height: calc(95 * var(--u));
  margin-top: calc(16 * var(--u));
}

.s3__notSelling,
.s3__worksWithout {
  position: absolute;
}

.s3__notSelling img,
.s3__worksWithout img {
  display: block;
  width: 100%;
  max-width: none;
}

.s3__notSelling {
  top: 0;
  left: calc(145.2 * var(--u));
  width: calc(225.8 * var(--u));
}

.s3__notSelling p {
  position: absolute;
  top: calc(9.5 * var(--u));
  left: calc(28.4 * var(--u));
  width: calc(150 * var(--u));
  transform: rotate(-1.6deg);
  /* Quebra de linha fixa (vem do texto de cada idioma). Se mesmo assim não
     couber, o main.js diminui a letra até caber no box. */
  white-space: pre;
  color: var(--charcoal-blue);
  font-size: calc(16 * var(--u));
  line-height: 1.2;
}

.s3__notSelling strong {
  text-decoration: underline var(--skip-red) calc(1.9 * var(--u));
  text-underline-offset: calc(2 * var(--u));
}

.s3__worksWithout {
  top: calc(17.6 * var(--u));
  left: calc(3 * var(--u));
  width: calc(194 * var(--u));
}

.s3__worksWithout p {
  position: absolute;
  top: calc(43.6 * var(--u));
  left: calc(56.9 * var(--u));
  color: #ffffff;
  width: calc(128 * var(--u));
  font-size: calc(10.3 * var(--u));
  line-height: 1.58;
  white-space: nowrap;
}


/* ---------- Seção 4 ----------
   Cada desenho fica preso ao parágrafo do lado dele (.s4__block), então nos
   idiomas com texto mais longo eles descem junto com o texto. */
.s4 {
  container-type: inline-size;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  padding: calc(21.5 * var(--u)) 0 calc(40 * var(--u));
}

.s4 > :where(*) {
  font-size: calc(16 * var(--u));
}

:where(.s4) p {
  margin: 0;
  line-height: 1.58;
}

.s4__heading {
  position: relative;
  height: calc(45.9 * var(--u));
  margin: 0;
  font-weight: 400;
}

.s4__headingImage {
  position: absolute;
  top: calc(0.7 * var(--u));
  left: calc(15 * var(--u));
  width: calc(184 * var(--u));
  max-width: none;
}

.s4__headingText {
  position: absolute;
  top: calc(15.8 * var(--u));
  left: calc(54.5 * var(--u));
  color: #000000;
  font-family: var(--font-hand);
  font-size: calc(28.7 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

.s4__block {
  position: relative;
}

.s4__block img {
  position: absolute;
  max-width: none;
}

.s4__free {
  margin-top: calc(30.3 * var(--u));
}

.s4__free p {
  width: calc(269.7 * var(--u));
  margin-left: calc(21.7 * var(--u));
}

.s4__badge {
  top: calc(2.2 * var(--u));
  left: calc(279.8 * var(--u));
  width: calc(79.75 * var(--u));
}

.s4__noNeed {
  margin-top: calc(29.3 * var(--u));
}

.s4__noNeed p {
  position: relative;
  z-index: 1;
  width: calc(347.5 * var(--u));
  margin-left: calc(21.6 * var(--u));
}

.s4__gears {
  top: calc(16.95 * var(--u));
  left: calc(240.7 * var(--u));
  width: calc(179.5 * var(--u));
}

.s4__however {
  min-height: calc(109.7 * var(--u));
  margin-top: calc(30.3 * var(--u));
}

.s4__however p {
  width: calc(245 * var(--u));
  margin-left: calc(121.8 * var(--u));
}

/* No inglês o Canva usa uma caixa um pouco mais larga (4 linhas). */
html[lang="en"] .s4__however p {
  width: calc(261.4 * var(--u));
}

.s4__pointing {
  top: calc(-1.35 * var(--u));
  left: calc(-27.9 * var(--u));
  width: calc(142.25 * var(--u));
}

.s4__costs {
  margin-top: calc(38.6 * var(--u));
}

.s4__costs > p:first-child {
  position: relative;
  z-index: 1;
  width: calc(347.7 * var(--u));
  margin-left: calc(19.5 * var(--u));
}

/* Mãos com as moedas: passam da borda direita, como no Canva. */
.s4__hands {
  top: calc(6.85 * var(--u));
  left: calc(272.95 * var(--u));
  width: calc(142.75 * var(--u));
}

/* "Money does make things easier.": etiqueta em cima das mãos. */
.s4__moneyNote {
  position: absolute;
  z-index: 1;
  top: calc(84 * var(--u));
  /* Preso pela direita e com a largura do próprio texto: se o celular
     aumentar a letra, o fundo branco cresce junto e a etiqueta cresce
     para a esquerda, sem sair da tela. */
  right: calc(20 * var(--u));
  width: max-content;
  padding: calc(0.8 * var(--u)) calc(1.5 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(13.8deg);
  color: #030303;
  font-size: calc(4.32 * var(--u));
  line-height: 1.4;
  text-align: center;
  /* Duas linhas fixas (vêm do texto), para caber inteira antes da borda da tela. */
  white-space: pre;
}

/* No celular: mais para cima e mais perto da borda direita da tela. */
@media (max-width: 599px) {
  .s4__moneyNote {
    top: calc(74 * var(--u));
    right: calc(8 * var(--u));
  }
}

.s4__anyway {
  position: relative;
  z-index: 1;
  width: calc(347.8 * var(--u));
  margin: calc(37.2 * var(--u)) 0 0 calc(17.1 * var(--u));
}

.s4__quote {
  position: relative;
  width: calc(271 * var(--u));
  margin: calc(4.6 * var(--u)) 0 0 calc(59.2 * var(--u));
}

.s4__quote img {
  display: block;
  width: 100%;
}

.s4__quote p {
  position: absolute;
  top: calc(10.55 * var(--u));
  left: calc(67.1 * var(--u));
  width: calc(147.6 * var(--u));
  font-size: calc(12 * var(--u));
  text-align: center;
  white-space: pre;
}

/* O espaço da direita é do bonequinho feliz, que vem logo depois da frase:
   se a frase for longa (alemão), ela quebra a linha em vez de empurrar o
   bonequinho para fora da tela. */
.s4__happy {
  margin: calc(33.25 * var(--u)) 0 0 calc(12.8 * var(--u));
  padding-right: calc(60 * var(--u));
}

.s4__happyAnchor {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: top;
}

.s4__happyFigure {
  position: absolute;
  top: calc(12 * var(--u));
  left: calc(var(--happy-gap) * var(--u));
  width: calc(48 * var(--u));
  max-width: none;
  --happy-gap: 0;
}

/* ---------- Seção 5 ----------
   Medidas do Canva em --u, a partir do topo do título "The end". */
.s5 {
  container-type: inline-size;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  padding: calc(30 * var(--u)) 0 calc(60 * var(--u));
}

.s5 > :where(*) {
  font-size: calc(16 * var(--u));
}

:where(.s5) p {
  margin: 0;
  line-height: 1.58;
}

.s5__heading {
  position: relative;
  height: calc(34.3 * var(--u));
  margin: 0;
  font-weight: 400;
}

.s5__headingImage {
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(17.5 * var(--u));
  width: calc(171.5 * var(--u));
  max-width: none;
}

.s5__headingText {
  position: absolute;
  top: 0;
  left: calc(42.7 * var(--u));
  width: calc(85 * var(--u));
  color: #ea9f34;
  font-family: var(--font-hand);
  font-size: calc(28.7 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.s5__tried {
  position: relative;
  z-index: 1;
  width: calc(346 * var(--u));
  margin: calc(25.3 * var(--u)) 0 0 calc(18.8 * var(--u));
}

/* Mão com o celular e a linha tracejada: passa da borda direita, como no Canva. */
.s5__phone {
  position: relative;
  width: calc(396.7 * var(--u));
  margin: calc(-19.95 * var(--u)) 0 0 calc(44.05 * var(--u));
}

.s5__phone img {
  display: block;
  width: 100%;
  max-width: none;
}

.s5__phoneText {
  position: absolute;
  top: calc(64.25 * var(--u));
  left: calc(128.55 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(120.1 * var(--u));
  height: calc(60.7 * var(--u));
  color: #343232;
  font-family: var(--font-hand);
  font-size: calc(13.98 * var(--u));
  line-height: 1.3;
  text-align: center;
}

/* Ordem da seção: "Enfim..." com o blá-blá-blá, "Eu tentei..." com a mão e
   o celular, o parágrafo da ajuda, o obrigada e a assinatura. */
/* Texto à esquerda e o blá-blá-blá à direita, centralizado na altura do
   parágrafo (se o texto ficar mais longo, o desenho continua no meio). */
.s5__talk {
  display: flex;
  align-items: center;
  margin-top: calc(14 * var(--u));
}

.s5__talk p {
  flex: none;
  width: calc(165 * var(--u));
  margin-left: calc(18.8 * var(--u));
}

.s5__blah {
  flex: none;
  width: calc(191 * var(--u));
  max-width: none;
  margin-left: calc(4 * var(--u));
}

.s5__haveFun {
  width: calc(346.6 * var(--u));
  margin: calc(25 * var(--u)) 0 0 calc(18.1 * var(--u));
  text-align: justify;
}

/* "Thanks for giving Seego a try." com os corações, centralizados juntos. */
.s5__thanks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4.85 * var(--u));
  margin-top: calc(23.4 * var(--u));
}

.s5__hearts {
  flex: none;
  width: calc(45.5 * var(--u));
  max-width: none;
  margin-top: calc(-4.5 * var(--u));
}

.s5__signed {
  margin: calc(42.8 * var(--u)) 0 0 calc(21 * var(--u));
}

.s5__signature {
  width: calc(319.25 * var(--u));
  max-width: none;
  margin: calc(28.9 * var(--u)) 0 0 calc(25.65 * var(--u));
}

/* Provisório: troca o idioma para conferir as traduções. Tirar antes de lançar. */
.langSwitch {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 6px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--alabaster-grey);
}

.langSwitch button {
  min-width: 48px;
  min-height: 40px;
  border: 1px solid var(--alabaster-grey);
  border-radius: 999px;
  background: var(--white);
  color: var(--graphite);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.langSwitch button[aria-pressed="true"] {
  background: var(--charcoal-blue);
  border-color: var(--charcoal-blue);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}