/* ==========================================================================
   Dislexfy — site oficial
   Identidade: amarelo #F8D832 + preto #0D0D0D, neo-brutalismo caloroso.
   Regra de ouro: sem JS (ou com prefers-reduced-motion) a página é 100%
   completa e estática — nenhum estado inicial escondido vive neste CSS.
   ========================================================================== */

/* ---------- Fontes (as mesmas que a ferramenta oferece) ---------- */
@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/fonts/opendyslexic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --yellow: #F8D832;
  --black: #0D0D0D;
  --cream: #FBF6E7;
  --white: #FFFDF6;
  --p-yellow: #FDE68A;
  --p-blue: #BFDBFE;
  --p-pink: #FBCFE8;
  --ink-soft: rgba(13, 13, 13, 0.72);
  --cream-soft: rgba(251, 246, 231, 0.78);

  --font-display: "Archivo Black", "Arial Black", "Arial Bold", sans-serif;
  --font-body: "Lexend", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --t-hero: clamp(2.55rem, 10vw, 8.75rem);
  --t-sec: clamp(2rem, 5.5vw + 0.5rem, 4.25rem);
  --t-sub: clamp(1.35rem, 2.6vw + 0.5rem, 2.4rem);
  --t-card: clamp(1.3rem, 1.4vw + 0.8rem, 1.7rem);
  --t-body: clamp(1.1rem, 0.35vw + 1rem, 1.25rem);
  --t-mega: clamp(4.5rem, 12vw, 11rem);

  --border-w: 3px;
  --border: var(--border-w) solid var(--black);
  --shadow-pop: 6px 6px 0 var(--black);
  --shadow-pop-lg: 10px 10px 0 var(--black);
  --r-card: 24px;
  --r-pill: 999px;
  --space: clamp(4.5rem, 10vw, 9rem);
  --nav-h: 76px;
  --maxw: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* o atributo hidden sempre vence display:flex/inline-block de classes */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 40px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* o botão de animações (data-motion) tem prioridade sobre o sistema */
html[data-motion="on"] { scroll-behavior: smooth; }
html[data-motion="off"] { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, h4 { margin: 0 0 0.45em; line-height: 1.1; }
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--black); color: var(--yellow); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--black); color: var(--yellow);
  font-family: var(--font-ui); font-weight: 700;
  padding: 12px 20px; border-radius: 12px; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 6px;
}
.sec--black :focus-visible,
.footer :focus-visible,
.navbar :focus-visible,
.marquee :focus-visible {
  outline-color: var(--yellow);
}

/* ---------- Seções (cores chapadas) ---------- */
.sec { padding-block: var(--space); }
.sec--yellow { background: var(--yellow); color: var(--black); }
.sec--cream  { background: var(--cream); color: var(--black); }
.sec--black  { background: var(--black); color: var(--cream); position: relative; }
/* grão de filme sutil só nas seções pretas */
.sec--black::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sec-head { max-width: 820px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.sec-head--left { margin-inline: 0; text-align: left; }
.sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-sec);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.sec-lead { font-size: var(--t-body); max-width: 58ch; }
.sec-head:not(.sec-head--left) .sec-lead { margin-inline: auto; }

.eyebrow {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.14em;
  margin: 0 0 18px;
}
.eyebrow--ondark { color: var(--yellow); }
.sec--black .eyebrow { color: var(--yellow); }

/* Realces (a assinatura visual do produto) */
.hl {
  color: var(--black);
  padding: 0.02em 0.16em;
  border-radius: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl--yellow { background: var(--p-yellow); }
.hl--blue   { background: var(--p-blue); }
.hl--pink   { background: var(--p-pink); }
.hl-cycle { animation: hl-cycle 7.5s step-end infinite; background: var(--p-yellow); }
.hl-cycle--2 { animation-delay: -3.75s; }
@keyframes hl-cycle {
  0%      { background-color: var(--p-yellow); }
  33.33%  { background-color: var(--p-blue); }
  66.66%  { background-color: var(--p-pink); }
}
@media (prefers-reduced-motion: reduce) {
  .hl-cycle { animation: none; }
}
:root[data-motion="off"] .hl-cycle { animation: none; }
:root[data-motion="on"] .hl-cycle { animation: hl-cycle 7.5s step-end infinite; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem;
  min-height: 48px; padding: 12px 26px;
  border: var(--border); border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  background: var(--white); color: var(--black);
  box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--black); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--black); }
.btn--primary { background: var(--black); color: var(--yellow); }
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--outline { background: transparent; }
.btn--lg { min-height: 58px; padding: 15px 34px; font-size: 1.12rem; }
.btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed;
  transform: none !important; box-shadow: 4px 4px 0 var(--black) !important;
}
.btn--locked { opacity: 0.72; cursor: not-allowed; }
.btn--locked:hover { transform: none; box-shadow: 4px 4px 0 var(--black); }
.sec--black .btn--outline { color: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 rgba(251, 246, 231, 0.35); }
/* dentro do card amarelo do Apoiar, o outline volta ao padrão preto */
.sec--black .support-card .btn--outline { color: var(--black); border-color: var(--black); box-shadow: 4px 4px 0 var(--black); }

/* ---------- Stickers & chips ---------- */
.sticker {
  display: inline-block;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--black);
  padding: 8px 16px;
  border: 2.5px solid var(--black); border-radius: var(--r-pill);
  box-shadow: 3px 3px 0 var(--black);
  rotate: -3deg;
}
.sticker--blue   { background: var(--p-blue); }
.sticker--pink   { background: var(--p-pink); rotate: 2.5deg; }
.sticker--yellow { background: var(--p-yellow); rotate: -1.5deg; }
.sticker--white  { background: var(--white); rotate: 2deg; }

.chip {
  display: inline-block;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.88rem;
  padding: 5px 14px;
  background: var(--white);
  border: 2px solid var(--black); border-radius: var(--r-pill);
}

/* ---------- Cards ---------- */
.card-pop {
  background: var(--white);
  border: var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: clamp(24px, 3vw, 36px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
article.card-pop:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-pop-lg); }
.card--white { background: var(--white); }
.card--blue  { background: var(--p-blue); }
.card--pink  { background: var(--p-pink); }
.card--soft  { background: var(--p-yellow); }
.card-pop h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-card); line-height: 1.12;
}
.card-pop p { color: var(--ink-soft); margin-bottom: 0; }
.card-pop p + p, .card-pop p + ul { margin-top: 16px; }
.card__ico {
  width: 58px; height: 58px; display: grid; place-items: center;
  background: var(--yellow); color: var(--black);
  border: 2.5px solid var(--black); border-radius: 16px;
  margin-bottom: 20px;
}
.card--soft .card__ico { background: var(--white); }
.card__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.card__demo {
  font-family: var(--font-ui); font-size: 1.15rem; color: var(--black) !important;
  margin-top: 18px !important; padding-top: 16px;
  border-top: 2.5px solid rgba(13, 13, 13, 0.12);
}

/* micro-vida: ícone dá uma sacudida no hover do card */
@media (prefers-reduced-motion: no-preference) {
  .card-pop:hover .card__ico svg { animation: ico-wiggle 0.5s ease; }
}
:root[data-motion="on"] .card-pop:hover .card__ico svg { animation: ico-wiggle 0.5s ease; }
:root[data-motion="off"] .card-pop:hover .card__ico svg { animation: none; }
@keyframes ico-wiggle {
  0% { transform: rotate(0); }
  30% { transform: rotate(-9deg); }
  65% { transform: rotate(7deg); }
  100% { transform: rotate(0); }
}

/* com efeitos de ponteiro ativos (JS), o transform fica por conta do GSAP
   (magnetic/tilt) e o hover CSS cuida só de sombra/cor */
html.fx-pointer .btn:hover { transform: none; }
html.fx-pointer article.card-pop:hover { transform: none; }
html.fx-pointer .reader-mock, html.fx-pointer article.card-pop { will-change: transform; }

/* ==========================================================================
   GOOEY / PROGRESSO / SPARKLES (camadas de vida do site)
   ========================================================================== */
.gooey-defs { position: absolute; width: 0; height: 0; }

/* barra de progresso do scroll */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: 5px; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--yellow);
  transform: scaleX(0); transform-origin: left center;
}

/* estágio do gooey dentro do hero — só o JS (com movimento pleno) exibe */
.hero__gooey {
  position: absolute; inset: 0; z-index: 2;
  display: none;
  align-items: center; justify-content: center;
  filter: url(#gooey-threshold);
  pointer-events: none;
}
.hero__gooey span {
  position: absolute;
  width: 100%; padding-inline: 6vw;
  text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 5.2rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--cream);
  -webkit-user-select: none;
  user-select: none;
}

/* sparkles decorativos */
.spark {
  position: absolute; z-index: 0;
  font-size: clamp(14px, 1.8vw, 26px);
  color: var(--yellow);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.spark--1 { top: 16%; left: 9%; color: var(--p-pink); }
.spark--2 { top: 24%; right: 12%; color: var(--yellow); }
.spark--3 { top: 55%; left: 5%; color: var(--yellow); }
.spark--4 { top: 64%; right: 7%; color: var(--p-blue); }
.spark--5 { top: 12%; left: 56%; color: var(--p-blue); }
.spark--6 { top: 72%; left: 22%; color: var(--p-pink); }
.spark--s1 { top: -14px; left: 8%; color: var(--black); font-size: 30px; }
.spark--s2 { bottom: -10px; right: 10%; color: var(--black); font-size: 24px; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: fixed; inset: 20px 0 auto; z-index: 70;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-inline: clamp(18px, 4vw, 56px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.32s ease;
}
.brand, .motion-toggle { pointer-events: auto; }
.brand__mark {
  border: 2.5px solid var(--black); border-radius: 13px;
  box-shadow: 3px 3px 0 rgba(13, 13, 13, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brand:hover .brand__mark { transform: translate(-2px, -2px) rotate(-4deg); box-shadow: 5px 5px 0 rgba(13, 13, 13, 0.28); }
/* some ao rolar pra baixo, volta ao rolar pra cima (JS) */
.navbar--hidden { transform: translateY(-160%); }
.navbar--hidden:focus-within { transform: none; }

/* ---------- Abertura focada: trava a página e esconde o resto ---------- */
html.is-intro, html.is-intro body { overflow: hidden; }
html.is-intro .navbar,
html.is-intro .scroll-progress { opacity: 0; pointer-events: none; }
html.is-intro .hero__marquee,
html.is-intro .hero .spark,
html.is-intro .mobileapp { opacity: 0; pointer-events: none; }
.hero__marquee, .hero .spark, .mobileapp { transition: opacity 0.6s ease; }
.intro-skip {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  display: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem;
  color: var(--cream); background: transparent;
  border: 2px solid rgba(251, 246, 231, 0.42); border-radius: var(--r-pill);
  padding: 10px 20px; min-height: 44px; cursor: pointer;
}
html.is-intro .intro-skip { display: inline-flex; }
.intro-skip:hover { border-color: var(--yellow); color: var(--yellow); }
.navbar__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(14px, 2.5vw, 34px);
  background: var(--yellow); color: var(--black);
  border: 2px solid var(--black); border-radius: var(--r-pill);
  padding: 7px 18px 7px 9px;
  max-width: 100%;
  transition: transform 0.25s ease;
}
.navbar__inner.is-scrolled { transform: scale(0.93); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { border-radius: 9px; display: block; }
.brand__name {
  font-family: var(--font-display); font-size: 1.22rem; letter-spacing: 0.01em;
}
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }
.nav-links a:not(.btn) {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.98rem;
  color: var(--black); text-decoration: none;
  padding: 8px 2px;
}
.nav-links a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.nav-links__cta { display: none; }
.navbar__actions { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.navbar__pill {
  background: var(--yellow); color: var(--black);
  border: 2px solid var(--black); box-shadow: none;
  min-height: 52px; padding: 10px 26px;
}
.navbar__pill:hover { background: var(--black); color: var(--yellow); border-color: var(--yellow); transform: none; box-shadow: none; }
.navbar__pill:active { transform: translate(1px, 1px); box-shadow: none; }
.navbar__pill--pro { padding-inline: 20px; }
.nav-burger {
  display: none;
  width: 46px; height: 46px;
  background: var(--black); color: var(--yellow);
  border: 2px solid var(--black); border-radius: 50%;
  cursor: pointer; place-items: center;
}
/* alternador de animações (respeita o sistema por padrão; visitante decide) */
.motion-toggle {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center; position: relative;
  background: var(--black); color: var(--yellow);
  border: 2px solid var(--black); border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.motion-toggle:hover { background: transparent; color: var(--black); }
.motion-toggle svg { display: block; }
.motion-toggle[data-state="off"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
  height: 2.5px; border-radius: 2px; background: currentColor;
  transform: translateY(-1px) rotate(-45deg);
}

/* Menu mobile: overlay creme em tela cheia */
@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 10px;
    position: fixed; inset: 0; z-index: -1;
    background: var(--cream);
    padding: calc(var(--nav-h) + 40px) clamp(24px, 8vw, 64px) 48px;
  }
  .nav-links.open a:not(.btn) {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2rem, 9vw, 3.4rem); text-transform: uppercase;
    color: var(--black); padding: 6px 0;
  }
  .nav-links.open a:not(.btn):hover { color: var(--black); text-decoration-thickness: 6px; }
  .nav-links.open .nav-links__cta { display: inline-flex; }
  .nav-links.open a:not(.btn) + .nav-links__cta { margin-top: 28px; }
}
@media (max-width: 640px) {
  .navbar__actions { display: none; }
  .navbar__inner { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   HERO (escuro, centralizado, marquee na base)
   ========================================================================== */
.hero {
  position: relative;
  overflow: clip;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + clamp(36px, 6vh, 72px)) 0 clamp(150px, 20vh, 220px);
}
.hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}
.hero__brand { margin: 0 0 clamp(20px, 3.5vh, 40px); }
.hero__wordmark {
  display: block;
  width: min(760px, 88vw); height: auto;
  color: var(--yellow);
}
.hero__sub {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-sub);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--cream);
  max-width: 30ch;
  margin-bottom: 0.9em;
}
.hero__lead { max-width: 52ch; color: var(--cream-soft); margin-inline: auto; margin-bottom: 2em; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.hero__marquee {
  position: absolute; z-index: 0;
  left: 0; right: 0; bottom: 0;
  background: var(--yellow); color: var(--black);
  border-bottom: 0;
}
.hero__marquee .marquee__item { color: var(--black); }

/* mascote abelhinha */
.hero__bee {
  position: absolute; z-index: 3;
  right: clamp(-6px, 4vw, 80px);
  bottom: clamp(70px, 11vw, 170px);
  width: clamp(170px, 27vw, 400px); height: auto;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
html.is-intro .hero__bee { opacity: 0; }
@media (max-width: 720px) {
  .hero__bee { width: 150px; right: -6px; bottom: 20px; opacity: 0.85; z-index: 0; }
}

/* ---------- Bloco mobile: o app está chegando + acesso antecipado ---------- */
.mobileapp { display: none; }
@media (max-width: 720px) {
  /* no celular o hero foca no app; CTAs de extensão/desktop somem */
  .hero__lead, .hero__ctas { display: none; }
  .mobileapp {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    width: 100%; margin-top: 10px;
    background: rgba(251, 246, 231, 0.05);
    border: 2.5px solid var(--yellow); border-radius: var(--r-card);
    padding: 22px 20px;
  }
  .mobileapp__badge { align-self: flex-start; }
  .mobileapp__title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.55rem, 7vw, 2.15rem); line-height: 1.05;
    text-transform: uppercase; color: var(--cream); margin: 0;
  }
  .mobileapp__lead { color: var(--cream-soft); margin: 0; }
  .mobileapp__lead strong { color: var(--yellow); }
  .mobileapp__cta { width: 100%; }
  .mobileapp__note { font-size: 0.82rem; color: rgba(251, 246, 231, 0.55); margin: 0; }
  /* seções focadas em desktop/extensão não fazem sentido no celular */
  #instalar { display: none; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  overflow: clip;
  padding-block: clamp(16px, 2.5vw, 26px);
  border-block: var(--border);
}
.marquee__track { display: flex; width: max-content; }
.marquee__item {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 3rem);
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}
.marquee__item i { font-style: normal; color: var(--p-pink); padding-inline: 0.35em; }

/* ==========================================================================
   DEMO MOCKUP
   ========================================================================== */
.demo { position: relative; }
/* no desktop a seção ocupa a tela: conteúdo em cima, faixa de voo livre embaixo.
   Padding enxuto para que grid + faixa caibam inteiros na dobra. */
@media (min-width: 1024px) {
  .demo {
    min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--nav-h) + 20px); padding-bottom: 22px;
  }
}
.demo__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.demo__note { font-size: 0.9rem; color: var(--ink-soft); margin: 14px 0 0; }
#demoPlay { margin-top: 10px; }

/* trilha de voo da abelhinha — bloco no fluxo, DEPOIS do grid (nunca sobre o texto).
   Só no desktop, onde há espaço vertical. */
.demo__flight {
  display: none; position: relative; z-index: 0;
  width: 100%; height: clamp(150px, 19vh, 210px);
  margin-top: clamp(2.5rem, 5.5vh, 4.5rem);
  overflow: visible; pointer-events: none;
}
html[data-motion="on"] .demo__flight { display: block; }
@media (max-width: 1023px) { .demo__flight { display: none !important; } }
.demo__path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.demo__bee {
  position: absolute; bottom: 0; left: 0;
  width: clamp(120px, 12.5vw, 210px); height: auto;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28));
  will-change: transform;
}

.reader-mock { padding: 0; overflow: hidden; }
.rm-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: var(--p-yellow);
  border-bottom: var(--border);
}
.rm-bar i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--black); display: block;
}
.rm-bar i:nth-child(1) { background: var(--p-pink); }
.rm-bar i:nth-child(2) { background: var(--p-blue); }
.rm-bar i:nth-child(3) { background: var(--white); }
.rm-bar__title { margin-left: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 0.88rem; }
.rm-body { padding: clamp(24px, 3vw, 36px); }
.rm-title { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin-bottom: 16px; }
.rm-text {
  font-family: var(--font-ui);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  line-height: 2;
  letter-spacing: 0.02em;
  margin: 0;
}
.w { padding: 1px 4px; border-radius: 6px; }
.w-on {
  background: var(--p-yellow);
  box-shadow: 0 2.5px 0 rgba(217, 119, 6, 0.85);
}
.rm-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px;
  border-top: 2.5px solid rgba(13, 13, 13, 0.12);
}
.rm-play {
  width: 46px; height: 46px; flex: none; padding: 0;
  display: grid; place-items: center;
  background: var(--black); color: var(--yellow);
  border: 2px solid var(--black); border-radius: 50%;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.rm-play:hover { transform: scale(1.07); }
.rm-play:active { transform: scale(0.94); }
.rm-play.is-loading { animation: rm-pulse 0.9s ease-in-out infinite; }
@keyframes rm-pulse { 50% { opacity: 0.55; } }
.rm-chip { font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; border: 2px solid var(--black); border-radius: var(--r-pill); padding: 5px 13px; background: var(--white); }
.rm-chip--btn { cursor: pointer; transition: background 0.14s ease, transform 0.14s ease; }
.rm-chip--btn:hover { background: var(--p-yellow); }
.rm-chip--btn:active { transform: translateY(1px); }
.rm-wave { margin-left: auto; width: clamp(90px, 12vw, 140px); height: 30px; }
.rm-wave rect { transform-origin: center; transform-box: fill-box; transition: transform 0.05s linear; }

/* ==========================================================================
   RECURSOS — BENTO
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2vw, 26px); }
.bento > * { grid-column: span 3; display: flex; flex-direction: column; align-items: flex-start; }
.bento > .bento__big:nth-child(1) { grid-column: span 7; }
.bento > .bento__big:nth-child(2) { grid-column: span 5; }
.bento .card__demo, .bento .card__chips { margin-top: auto; padding-top: 18px; }
@media (max-width: 1024px) {
  .bento > *, .bento > .bento__big:nth-child(1), .bento > .bento__big:nth-child(2) { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bento > *, .bento > .bento__big:nth-child(1), .bento > .bento__big:nth-child(2) { grid-column: span 12; }
}

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.step-row {
  position: relative;
  display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: clamp(24px, 5vw, 72px); align-items: center;
  padding-block: clamp(32px, 5vw, 56px);
}
.step-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-mega); line-height: 0.9;
  color: var(--yellow);
}
@supports (-webkit-text-stroke: 3px #000) {
  .step-num--outline { color: transparent; -webkit-text-stroke: 3px var(--yellow); }
}
.step-body h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.3rem); text-transform: uppercase;
  color: var(--cream);
}
.step-body p { color: var(--cream-soft); max-width: 46ch; margin: 0; }
.step-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--yellow); display: block;
  transform-origin: left center;
}
@media (max-width: 640px) {
  .step-row { grid-template-columns: 1fr; gap: 8px; }
  .step-num { font-size: clamp(3.5rem, 18vw, 5.5rem); }
}

/* ==========================================================================
   FONTES & ACESSIBILIDADE
   ========================================================================== */
.a11y__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.a11y__note {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem;
  background: var(--p-yellow);
  border: var(--border); border-radius: 16px;
  box-shadow: var(--shadow-pop);
  padding: 18px 22px;
  margin-top: 28px;
  max-width: 46ch;
}
.fontlab__label { font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; }
.fontlab__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.fchip {
  font-weight: 400; font-size: 1.02rem;
  padding: 10px 20px; min-height: 46px;
  background: var(--white);
  border: 2.5px solid var(--black); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fchip:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--black); }
.fchip.is-active { background: var(--black); color: var(--yellow); }
.fchip--lexend { font-family: "Lexend", sans-serif; }
.fchip--atkinson { font-family: "Atkinson Hyperlegible", sans-serif; }
.fchip--dyslexic { font-family: "OpenDyslexic", sans-serif; }
.fontlab__preview {
  font-size: 21px; line-height: 1.8; min-height: 6.2em;
  border-top: 2.5px solid rgba(13, 13, 13, 0.12);
  padding-top: 20px; margin-bottom: 20px;
}
.fontlab__preview[data-font="lexend"]  { font-family: "Lexend", sans-serif; }
.fontlab__preview[data-font="atkinson"] { font-family: "Atkinson Hyperlegible", sans-serif; }
.fontlab__preview[data-font="dyslexic"] { font-family: "OpenDyslexic", sans-serif; line-height: 1.9; }
.fontlab__sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fslider { display: grid; gap: 8px; }
.fslider span { font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.fslider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer;
}
.fslider input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; background: var(--black); border-radius: var(--r-pill);
}
.fslider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; margin-top: -8px;
  background: var(--yellow); border: 3px solid var(--black); border-radius: 50%;
}
.fslider input[type="range"]::-moz-range-track {
  height: 8px; background: var(--black); border-radius: var(--r-pill);
}
.fslider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--yellow); border: 3px solid var(--black); border-radius: 50%;
}
@media (max-width: 1024px) {
  .a11y__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PLATAFORMAS (roadmap)
   ========================================================================== */
.platforms { padding: 0; }
.platforms__pin { padding-block: var(--space); }
/* layout default: vertical (mobile, teclado, reduced-motion, sem JS) */
.plat-track {
  display: grid; gap: clamp(20px, 3vw, 32px);
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}
.plat-card { position: relative; isolation: isolate; overflow: clip; }
.plat-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase;
  margin-top: 14px;
}
.plat-card p { max-width: 44ch; }
.plat-card .btn { margin-top: 20px; }
.plat-card .card__chips { margin-top: 18px; }
.plat-icons { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px; }
.plat-ico {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  color: var(--black); background: var(--white);
  border: 2.5px solid var(--black); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--black);
}
.plat-ico svg { width: 25px; height: 25px; display: block; }
.plat-num {
  position: absolute; z-index: -1;
  top: -0.18em; right: 6px;
  font-family: var(--font-display); font-size: clamp(6rem, 10vw, 10rem);
  line-height: 1; color: rgba(13, 13, 13, 0.09);
  pointer-events: none;
}
.plat-sticker { position: relative; }
.plat-progress { display: none; }

/* layout horizontal: aplicado via JS (desktop + motion) */
.platforms.is-horizontal .platforms__pin {
  overflow: clip;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 20px) 0 20px;
  display: flex; flex-direction: column; justify-content: center;
}
.platforms.is-horizontal .sec-head { margin-bottom: 8px; }
.platforms.is-horizontal .plat-track {
  display: flex; align-items: stretch;
  gap: clamp(24px, 3vw, 40px);
  max-width: none; width: max-content;
  padding-inline: max(clamp(20px, 4vw, 48px), calc((100vw - var(--maxw)) / 2 + clamp(20px, 4vw, 48px)));
  margin-top: clamp(24px, 4vw, 48px);
}
.platforms.is-horizontal .plat-card {
  width: min(64vw, 620px); flex: none;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: min(52vh, 460px);
}
.platforms.is-horizontal .plat-progress {
  display: block;
  width: min(360px, 56%);
  height: 12px;
  margin: clamp(28px, 5vh, 48px) auto 0;
  background: var(--cream);
  border: 2.5px solid var(--black); border-radius: var(--r-pill);
  overflow: hidden;
}
.platforms.is-horizontal .plat-progress span {
  display: block; width: 0%; height: 100%;
  background: var(--black);
}

/* ==========================================================================
   INSTALAR
   ========================================================================== */
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.install-grid h3 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-card);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.install-grid .btn { margin-top: 18px; }
.install-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.install-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; color: var(--ink-soft); }
.install-steps li .n {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--yellow); color: var(--black);
  font-family: var(--font-ui); font-weight: 700;
  border: 2.5px solid var(--black); border-radius: 50%;
}
@media (max-width: 860px) {
  .install-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PLANOS
   ========================================================================== */
.billing-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px;
}
.bchip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  padding: 10px 22px; min-height: 46px;
  background: var(--white); color: var(--black);
  border: 2.5px solid var(--black); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bchip.is-active { background: var(--black); color: var(--yellow); }
.bchip__save {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--p-pink); color: var(--black);
  border: 1.5px solid var(--black); border-radius: var(--r-pill);
  padding: 2px 10px;
}
.pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 30px);
  align-items: stretch;
}
.price-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.price-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-card); text-transform: uppercase; }
.price-card__tag { color: var(--ink-soft); margin-bottom: 6px; }
.price-card__price {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 2.6vw, 2.9rem); line-height: 1;
  color: var(--black) !important;
  margin: 12px 0 22px;
}
.price-card__price span {
  display: block; margin-top: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.98rem;
  color: var(--ink-soft);
}
.price-card__list {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid; gap: 11px;
}
.price-card__list li { position: relative; padding-left: 32px; font-size: 1.02rem; }
.price-card__list li::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.78rem;
  background: var(--p-yellow); color: var(--black);
  border: 2px solid var(--black); border-radius: 50%;
}
.price-card .btn { margin-top: auto; }
.price-card__badge { position: absolute; top: -19px; right: 22px; }
/* destaque Pro: card preto */
.price-card--pro { background: var(--black); border-color: var(--black); box-shadow: 8px 8px 0 var(--p-pink); }
article.price-card--pro:hover { box-shadow: 12px 12px 0 var(--p-pink); }
.price-card--pro h3 { color: var(--yellow); }
.price-card--pro .price-card__tag { color: var(--cream-soft); }
.price-card--pro .price-card__price { color: var(--cream) !important; }
.price-card--pro .price-card__price span { color: var(--cream-soft); }
.price-card--pro .price-card__list li { color: var(--cream); }
.price-card--pro .price-card__list li::before { background: var(--yellow); }
/* alternância mensal/anual (sem animação — troca instantânea) */
.pricing .price--anual { display: none; }
.pricing[data-billing="anual"] .price--anual { display: block; }
.pricing[data-billing="anual"] .price--mensal { display: none; }
@media (max-width: 1000px) {
  .pricing__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .price-card--pro { order: -1; }
}

/* ==========================================================================
   APOIAR
   ========================================================================== */
#apoiar { scroll-margin-top: calc(var(--nav-h) + 24px); }
.support-card {
  position: relative; z-index: 1;
  background: var(--yellow); color: var(--black);
  border: var(--border); border-radius: 32px;
  box-shadow: 12px 12px 0 var(--p-pink);
  padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 80px);
  text-align: center;
}
.support-card .eyebrow { color: var(--black); }
.support-card__lead { max-width: 60ch; margin: 0 auto 2em; color: rgba(13, 13, 13, 0.8); }
.support-card__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
@media (max-width: 640px) {
  .support-card { margin-top: 40px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-top: var(--space); overflow: clip; }
.footer__top {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.footer__col h3 {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--yellow); margin-bottom: 14px;
}
.footer__col a {
  display: block; padding: 7px 0;
  color: var(--cream-soft); text-decoration: none;
  font-family: var(--font-ui); font-weight: 700;
}
.footer__col a:hover { color: var(--cream); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; }

/* social + CTA (canto direito, como na referência) */
.footer__cta { display: flex; align-items: center; gap: 16px; justify-self: end; flex-wrap: wrap; }
.footer__social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__social a {
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--black); background: var(--p-pink);
  border: 2.5px solid var(--black); border-radius: 50%;
  transition: transform 0.16s ease, background 0.16s ease;
}
.footer__social li:nth-child(2) a { background: var(--p-blue); }
.footer__social li:nth-child(3) a { background: var(--p-yellow); }
.footer__social a:hover { transform: translateY(-3px) rotate(-6deg); }

/* wordmark gigante (desenha da esquerda pra direita) */
.footer__wordmark {
  position: relative; z-index: 1;
  margin-top: clamp(40px, 7vw, 90px);
  padding-inline: 1vw;
  color: var(--yellow);
}
.footer__wordmark svg { display: block; width: 100%; height: auto; }

/* meta: powered à esquerda, links legais à direita */
.footer__meta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-block: 26px 34px;
}
.powered {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem;
  color: var(--cream); text-decoration: none;
  border: 2.5px solid rgba(251, 246, 231, 0.3); border-radius: var(--r-pill);
  padding: 10px 18px;
}
.powered:hover { border-color: var(--yellow); color: var(--yellow); }
.powered b { color: var(--yellow); }
.footer__legal {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--font-ui); font-size: 0.86rem;
}
.footer__legal a { color: var(--cream-soft); text-decoration: none; }
.footer__legal a:hover { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal span { color: rgba(251, 246, 231, 0.55); }
@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__cta { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .footer__meta { justify-content: flex-start; }
}

/* ==========================================================================
   BOTÃO ENTRAR (nav) + DOWNLOAD + AVISO DE PLANOS
   ========================================================================== */
.navbar__enter {
  min-height: 44px; padding: 8px 18px; gap: 8px;
  background: var(--yellow); color: var(--black);
  border: 2px solid var(--black); box-shadow: none;
}
.navbar__enter:hover { background: var(--black); color: var(--yellow); border-color: var(--yellow); transform: none; box-shadow: none; }
.navbar__enter:active { transform: translate(1px, 1px); box-shadow: none; }
@media (max-width: 520px) { .navbar__enter-label { display: none; } .navbar__enter { padding: 8px 12px; } }

.install-download { margin: 4px 0 8px; }
.pricing__note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 640px; margin: clamp(28px, 4vw, 44px) auto 0;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem;
  color: var(--black); text-align: center;
  background: var(--white); border: 2.5px solid var(--black); border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop); padding: 12px 22px;
}
.pricing__note svg { flex: none; }

/* ==========================================================================
   PÁGINA DA CONTA (conta.html)
   ========================================================================== */
.account { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.account__intent {
  display: inline-block;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; color: var(--black);
  background: var(--p-yellow); border: 2px solid var(--black); border-radius: var(--r-pill);
  padding: 8px 16px; margin: 4px 0 6px;
}
.account__perks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.account__perks li { position: relative; padding-left: 30px; color: var(--cream-soft); }
.account__perks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; display: grid; place-items: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem;
  background: var(--yellow); color: var(--black); border-radius: 50%;
}
.auth-card h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 22px; }
.auth-providers { display: grid; gap: 12px; }
.provider-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 12px 20px;
  font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem;
  background: var(--white); color: var(--black);
  border: 2.5px solid var(--black); border-radius: 14px;
  cursor: pointer; box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.provider-btn:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--black); }
.provider-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--black); }
.auth-card__legal { margin: 20px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.auth-card__legal a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.auth-card__soon {
  margin: 16px 0 0; padding: 12px 16px;
  background: var(--p-yellow); border: 2.5px solid var(--black); border-radius: 12px;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; color: var(--black);
}
/* login por e-mail */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-soft); font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 2px; background: rgba(13, 13, 13, 0.12); }
.auth-email { display: flex; flex-direction: column; gap: 10px; }
.auth-email__input {
  width: 100%; min-height: 52px; padding: 12px 18px;
  font-family: var(--font-body); font-size: 1.02rem;
  border: 2.5px solid var(--black); border-radius: 14px; background: var(--white); color: var(--black);
}
.auth-email__input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.auth-email__btn { width: 100%; }
.auth-msg { margin: 12px 0 0; font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem; color: var(--black); min-height: 1.2em; }
.authed-card .authed__label { font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0; }
.authed-card .authed__email { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 4px 0 14px; word-break: break-all; }
.authed-card .authed__plan { margin: 0 0 20px; }
.badge--pro { background: var(--yellow) !important; }
@media (max-width: 900px) { .account { grid-template-columns: 1fr; } }

.preview-banner {
  margin-bottom: clamp(32px, 5vw, 56px); padding: 14px 20px;
  background: var(--p-blue); border: 2.5px solid var(--black); border-radius: 14px;
  box-shadow: var(--shadow-pop);
  font-family: var(--font-ui); font-size: 0.98rem; color: var(--black);
}
.dash { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 28px); }
.dash-card { display: flex; flex-direction: column; align-items: flex-start; }
.dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 12px; }
.dash-card__head h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; margin: 0; }
.dash-card p { color: var(--ink-soft); }
.dash-card .btn { margin-top: auto; }
.badge {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 12px; border: 2px solid var(--black); border-radius: var(--r-pill);
}
.badge--free { background: var(--p-yellow); color: var(--black); }
.dash-list { margin: 0 0 18px; display: grid; gap: 10px; }
.dash-list div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid rgba(13,13,13,0.08); padding-bottom: 8px; }
.dash-list dt { font-family: var(--font-ui); font-weight: 700; color: var(--black); margin: 0; }
.dash-list dd { margin: 0; color: var(--ink-soft); }
.dash-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 18px; font-family: var(--font-ui); font-weight: 700; }
.switch {
  flex: none; width: 52px; height: 30px; padding: 0;
  background: var(--white); border: 2.5px solid var(--black); border-radius: var(--r-pill);
  cursor: pointer; position: relative;
}
.switch span { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: var(--black); border-radius: 50%; transition: transform 0.18s ease; }
.switch[aria-checked="true"] { background: var(--yellow); }
.switch[aria-checked="true"] span { transform: translateX(22px); }
.ext-note { margin-top: clamp(24px, 3vw, 36px); }
.ext-note h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; }
.ext-note p { color: var(--ink-soft); margin: 0; max-width: 70ch; }
@media (max-width: 720px) { .dash { grid-template-columns: 1fr; } }

/* ==========================================================================
   CONTA v2 — autenticação (abas/senha) + área logada (sidebar + painéis)
   ========================================================================== */
.auth-wrap { max-width: 460px; margin-inline: auto; }

/* abas Entrar / Criar */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; min-height: 46px; padding: 10px 14px;
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  background: var(--white); color: var(--black);
  border: 2.5px solid var(--black); border-radius: 12px; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.auth-tab.is-active { background: var(--black); color: var(--yellow); }
.auth-tab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* forms com rótulo em cima */
.auth-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.auth-form label { font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; color: var(--black); margin-top: 6px; }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-hint { font-weight: 400; color: var(--ink-soft); }

.auth-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 14px; }
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; color: var(--black);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink-soft); }
.linkish:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.auth-msg.is-error { color: #b3261e; }

/* shell logado */
.account-shell { display: grid; grid-template-columns: 260px 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.acct-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.acct-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-bottom: 18px; border-bottom: 2px solid rgba(13,13,13,0.1); }
.acct-avatar {
  width: 72px; height: 72px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; color: var(--black);
  background: var(--yellow); border: 3px solid var(--black); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--black); margin-bottom: 4px;
}
.acct-profile__name { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; margin: 4px 0 0; }
.acct-profile__email { font-size: 0.84rem; color: var(--ink-soft); margin: 0; word-break: break-all; }

.acct-nav { display: flex; flex-direction: column; gap: 8px; }
.acct-nav__item {
  width: 100%; text-align: left; padding: 12px 16px;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.98rem; color: var(--black);
  background: var(--white); border: 2.5px solid var(--black); border-radius: 12px; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.acct-nav__item:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--black); }
.acct-nav__item.is-active { background: var(--yellow); box-shadow: 4px 4px 0 var(--black); }
.acct-nav__item:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.acct-nav__item--danger { color: #b3261e; margin-top: 6px; }

.acct-panel { width: 100%; }
.acct-panel[hidden] { display: none; }
.acct-panel:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.acct-panel .auth-form, .acct-panel .dash-list, .acct-panel .acct-payments-wrap { width: 100%; }
.acct-subhead { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; margin: 24px 0 12px; }

.acct-payments-wrap { overflow-x: auto; }
.acct-payments { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.acct-payments th, .acct-payments td { text-align: left; padding: 10px 12px; border-bottom: 2px solid rgba(13,13,13,0.1); }
.acct-payments th { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--black); }
.acct-payments td { color: var(--ink-soft); }

@media (max-width: 900px) {
  .account-shell { grid-template-columns: 1fr; }
  .acct-sidebar { position: static; }
}

.acct-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 100; opacity: 0; pointer-events: none;
  max-width: min(92vw, 520px);
  background: var(--black); color: var(--cream);
  font-family: var(--font-ui); font-weight: 700;
  border: 3px solid var(--yellow); border-radius: var(--r-pill);
  box-shadow: 6px 6px 0 rgba(13, 13, 13, 0.35);
  padding: 14px 24px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.acct-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   SUBPÁGINAS (Créditos, Termos)
   ========================================================================== */
.navbar__right { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.subnav-link {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem;
  color: var(--cream); text-decoration: none;
  padding: 8px 4px;
}
.sec--cream .subnav-link, .sec--yellow .subnav-link { color: var(--black); }
.subnav-link:hover { color: var(--yellow); }
.sec--cream .subnav-link:hover, .sec--yellow .subnav-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.subhero { padding-top: calc(var(--nav-h) + clamp(40px, 8vw, 90px)); position: relative; overflow: clip; }
.subhero__inner { position: relative; z-index: 1; }
.subhero__title { color: var(--cream); max-width: 16ch; }
.subhero__lead { color: var(--cream-soft); max-width: 56ch; }
.subhero__stats {
  list-style: none; display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px);
  margin: 40px 0 0; padding: 0;
}
.subhero__stats li { display: flex; flex-direction: column; }
.subhero__stats strong {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--yellow); line-height: 1;
}
.subhero__stats span {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--cream-soft); margin-top: 6px;
}
.center-narrow { max-width: 760px; margin-inline: auto; text-align: center; }
.center-narrow .sec-lead { margin-inline: auto; }
.center-narrow .btn { margin-top: 12px; }

/* time */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.team-card { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.team-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-card); text-transform: uppercase; margin-top: 4px; }
.team-card p { color: var(--ink-soft); margin-bottom: 0; }
.team-card .btn { margin-top: 20px; }
.team-card__role { margin: 0 0 16px; }
.team-ava {
  width: 92px; height: 92px; margin-bottom: 20px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 400; font-size: 2.1rem;
  color: var(--black);
  border: 3px solid var(--black); border-radius: 26px;
  box-shadow: var(--shadow-pop);
}
.team-ava--yellow { background: var(--yellow); }
.team-ava--pink { background: var(--p-pink); }
.team-ava--outline { background: transparent; border-style: dashed; }
.team-card--join { border-style: dashed; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* prosa legal */
.legal { max-width: 760px; margin-inline: auto; }
.legal__body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem); text-transform: uppercase;
  margin: 2em 0 0.5em; scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body li { color: var(--ink-soft); font-size: 1.08rem; }
.legal__body ul { padding-left: 1.2em; display: grid; gap: 10px; margin: 0 0 1em; }
.legal__body a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.legal__body a:hover { background: var(--p-yellow); }
.legal__note {
  margin-top: 2.5em; padding: 16px 20px;
  background: var(--p-yellow); border: 2.5px solid var(--black); border-radius: 14px;
  font-size: 0.95rem !important; color: var(--black) !important;
}

/* ==========================================================================
   TOAST (?welcome=1)
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 100; display: none;
  max-width: min(92vw, 560px);
  background: var(--black); color: var(--cream);
  font-family: var(--font-ui); font-weight: 700;
  border: 3px solid var(--yellow); border-radius: var(--r-pill);
  box-shadow: 6px 6px 0 rgba(13, 13, 13, 0.35);
  padding: 15px 26px;
}

/* ==========================================================================
   RESPONSIVO — ajustes gerais
   ========================================================================== */
@media (max-width: 1024px) {
  .demo__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --shadow-pop: 5px 5px 0 var(--black); --shadow-pop-lg: 8px 8px 0 var(--black); }
  .hero__title { max-width: none; }
  .fontlab__sliders { grid-template-columns: 1fr; }
}