/* Página pública. Mesmas cores e fonte do painel, para a página e os
   pedaços do produto parecerem uma coisa só. */

:root {
  --ground: #f6f6f3;
  --surface: #ffffff;
  --ink: #1b1d1c;
  --soft: #555b58;
  --accent: #17604a;
  --accent-hover: #114c3a;
  --accent-ink: #ffffff;
  --step: #ecece6;
  --step-2: #dfe0d8;
  --deep: #141816;
  --deep-ink: #e8ebe9;
  --deep-soft: #a3aba7;
  --green-1: #d8e9e1;
  --green-2: #c4ddd2;
  --amber: #f4e7cd;
  --ok: #17604a;
  --ok-bg: #e2f0ea;
  --warn: #84500a;
  --warn-bg: #fbefd9;
  --bad: #9e2a22;
  --bad-bg: #f9e7e5;
  --code-bg: #f1f1ec;
  --focus: #2f7dd1;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* taste-skill-ignore: interface do produto (data-ui) */

  /* Cinco tamanhos: interface, texto, frase, título de seção, título da página. */
  --t-ui: 14px;
  --t-body: 17px;
  --t-lead: 20px;
  --t-statement: clamp(21px, 1.9vw, 28px);
  --t-section: clamp(36px, 4.6vw, 72px);
  --t-hero: clamp(48px, 5.2vw, 88px);

  --margin: clamp(20px, 3vw, 44px);
  --gap: clamp(120px, 12vw, 200px);
  --radius: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #111312;
    --surface: #1a1d1c;
    --ink: #e6e8e6;
    --soft: #a2aaa6;
    --accent: #3f9e7d;
    --accent-hover: #4fb38f;
    --accent-ink: #0b1310;
    --step: #1c201e;
    --step-2: #252a28;
    --deep: #090b0a;
    --deep-ink: #e6e8e6;
    --deep-soft: #98a19d;
    --green-1: #16261f;
    --green-2: #1c3229;
    --amber: #2c2416;
    --ok: #6cc6a1;
    --ok-bg: #173028;
    --warn: #e2a853;
    --warn-bg: #33281a;
    --bad: #ee8c83;
    --bad-bg: #3a201e;
    --code-bg: #202523;
    --focus: #6aa8ec;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--t-body) / 1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
}

h2 {
  font-size: var(--t-section);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

code,
pre {
  font-family: var(--mono);
  font-size: 0.86em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- botões ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  border: 0;
  font-size: var(--t-body);
  transition: background 0.15s, transform 0.15s var(--ease);
}

.button:hover {
  background: var(--accent-hover);
}

.button:active {
  transform: translateY(1px) scale(0.98);
}

.button.small {
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--t-ui);
}

.text-link {
  font-weight: 600;
  text-underline-offset: 4px;
  transition: color 0.15s;
}

.text-link:hover {
  color: var(--accent);
}

/* ---------- barra ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px var(--margin);
}

.wordmark {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.bar-links {
  display: flex;
  gap: 24px;
}

.bar-links a {
  text-decoration: none;
  color: var(--soft);
  font-size: var(--t-ui);
  transition: color 0.15s;
}

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

/* ---------- primeira tela ---------- */

/* Itens de grid não passam da coluna (o padrão é a largura do conteúdo). */
.hero > *,
.problem > *,
.tryit > *,
.pricing > *,
.faq > *,
.closing > * {
  min-width: 0;
}

.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  padding: clamp(32px, 6vh, 72px) var(--margin) clamp(64px, 10vh, 120px);
  min-height: calc(100svh - 80px);
}

.hero h1 {
  font-size: var(--t-hero);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.masked .line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.masked .line > span {
  display: inline-block;
}

.lede {
  margin-top: 32px;
  max-width: 38ch;
  font-size: var(--t-lead);
}

.actions {
  margin-top: 32px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.note {
  margin-top: 16px;
  color: var(--soft);
  font-size: var(--t-ui);
}

/* ---------- pedaços do produto (data-ui) ---------- */

.ui {
  font-size: var(--t-ui);
  line-height: 1.45;
}

.ui code,
.ui pre {
  font-size: 12.5px;
}

.ui-panel {
  background: var(--surface);
  border: 1px solid var(--step-2); /* taste-skill-ignore: interface do produto (data-ui) */
  border-radius: var(--radius);
}

.ui-panel + .ui-panel {
  margin-top: 16px;
}

.ui-panel-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--step-2); /* taste-skill-ignore: interface do produto (data-ui) */
}

.ui-muted {
  color: var(--soft);
}

.ui-events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-event {
  display: grid;
  grid-template-columns: 72px 92px 88px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--step); /* taste-skill-ignore: interface do produto (data-ui) */
}

.ui-event:last-child {
  border-bottom: 0;
}

.ui-event.arriving {
  animation: arrive 0.5s var(--ease);
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.ui-time {
  font-variant-numeric: tabular-nums;
  color: var(--soft);
}

.ui-type {
  font-family: var(--mono); /* taste-skill-ignore: interface do produto (data-ui) */
  font-size: 12.5px;
}

.ui-detail {
  color: var(--soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12.5px;
  white-space: nowrap;
  background: var(--step);
  color: var(--soft);
  justify-self: start;
}

.ui-status.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.ui-status.warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.ui-status.bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.ui-fix {
  padding: 16px 18px;
}

.ui-fix-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--soft);
}

.ui-fix-title {
  margin: 8px 0 12px;
  font-size: var(--t-body);
}

.ui-evidence {
  display: flex;
  gap: 24px;
  margin: 0 0 12px;
}

.ui-evidence div {
  display: flex;
  gap: 6px;
}

.ui-evidence dt {
  color: var(--soft);
}

.ui-evidence dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ui-code {
  margin: 0;
  padding: 10px 12px;
  background: var(--code-bg);
  border-radius: 6px;
  overflow-x: auto;
}

.ui-fix-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ui-button {
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent); /* taste-skill-ignore: interface do produto (data-ui) */
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s var(--ease);
}

.ui-button:hover {
  background: var(--accent-hover);
}

.ui-button:active {
  transform: scale(0.97);
}

.ui-button.quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--step-2);
}

.ui-button.quiet:hover {
  background: var(--step);
}

.ui-button.wide {
  width: 100%;
  min-height: 48px;
  font-size: var(--t-body);
}

/* ---------- o problema ---------- */

.problem {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4vw, 72px);
  padding: var(--gap) var(--margin) 0;
  align-items: start;
}

.problem-copy {
  max-width: 34rem;
}

.problem-copy h2 {
  margin-bottom: 32px;
}

.problem-copy p + p {
  margin-top: 16px;
}

.problem-copy .strong {
  font-size: var(--t-statement);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.problem-ui {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ui-json {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--step-2); /* taste-skill-ignore: interface do produto (data-ui) */
  border-radius: var(--radius);
  overflow: hidden;
}

.ui-json figcaption {
  padding: 10px 14px;
  color: var(--soft);
  border-bottom: 1px solid var(--step); /* taste-skill-ignore: interface do produto (data-ui) */
}

.ui-json pre {
  margin: 0;
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}

.ui-json mark {
  color: inherit;
  border-radius: 3px;
  padding: 1px 2px;
}

.ui-json mark.gone {
  background: var(--bad-bg);
  text-decoration: line-through;
  text-decoration-color: var(--bad);
}

.ui-json mark.new {
  background: var(--ok-bg);
}

.ui-reply {
  grid-column: 1 / -1;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--step-2); /* taste-skill-ignore: interface do produto (data-ui) */
  border-radius: var(--radius);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- como funciona ---------- */

.steps {
  margin-top: var(--gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.step {
  position: relative;
  min-height: 84svh;
  padding: 32px clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
}

.step h2 {
  font-size: var(--t-statement);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.step .ui-card {
  margin-top: 32vh;
  margin-inline: auto;
  width: min(100%, 260px);
  transition: transform 0.15s var(--ease);
}

.step:first-child .ui-card {
  margin-top: calc(32vh - 34px);
}

.step:hover .ui-card {
  transform: translateY(-6px);
}

.step .clause {
  margin-top: auto;
  font-size: var(--t-statement);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 16em;
}

.f1 {
  background: var(--step);
}

.f2 {
  background: var(--step-2);
}

.f3 {
  background: var(--green-2);
}

.f4 {
  background: var(--accent);
  color: var(--accent-ink);
}

.ui-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.ui-card-row + .ui-card-row {
  margin-top: 8px;
}

.ui-card-row.big {
  font-size: var(--t-lead);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ui-method {
  font-family: var(--mono); /* taste-skill-ignore: interface do produto (data-ui) */
  font-size: 12px;
  background: var(--step);
  padding: 1px 6px;
  border-radius: 4px;
}

.ui-fields {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}

.ui-fields li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--step); /* taste-skill-ignore: interface do produto (data-ui) */
}

.ui-fields li span,
.ui-fields li {
  color: var(--soft);
}

.ui-fields code {
  color: var(--ink);
}

/* ---------- teste com o seu JSON ---------- */

.tryit {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tryit-in,
.tryit-out {
  position: relative;
  min-height: 90svh;
  padding: clamp(48px, 8vh, 96px) var(--margin) clamp(120px, 16vh, 168px);
}

.tryit-in {
  background: var(--deep);
  color: var(--deep-ink);
}

.tryit-out {
  background: var(--surface);
}

.tryit-form {
  max-width: 36rem;
}

.tryit-form label {
  display: block;
  color: var(--deep-soft);
  margin: 0 0 8px;
}

.tryit-form textarea + label {
  margin-top: 20px;
}

.tryit-form textarea {
  display: block;
  width: 100%;
  resize: vertical;
  background: #ffffff10;
  color: var(--deep-ink);
  border: 0;
  border-radius: var(--radius);
  padding: 14px 16px;
  font: 14px/1.55 var(--mono);
}

.tryit-form textarea:focus {
  background: #ffffff18;
}

.tryit-hint {
  margin-top: 16px;
  color: var(--deep-soft);
  font-size: var(--t-ui);
}

.split-a,
.split-b {
  position: absolute;
  bottom: 40px;
  font-size: var(--t-section);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.split-a {
  left: var(--margin);
}

.split-b {
  right: var(--margin);
}

.ui-result {
  max-width: 520px;
}

.ui-result .ui-panel-head {
  padding-inline: 0;
}

.ui-changes {
  list-style: none;
  margin: 0;
  padding: 12px 0;
}

.ui-changes li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
}

.ui-result .ui-fix {
  margin-top: 4px;
  background: var(--ground);
  border-color: var(--step);
}

.ui-delivered {
  margin-top: 16px;
}

.ui-delivered p {
  color: var(--soft);
  margin-bottom: 6px;
}

.ui-delivered pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--code-bg);
  border-radius: 6px;
  overflow-x: auto;
  max-height: 260px;
}

.ui-delivered mark {
  background: var(--ok-bg);
  color: inherit;
  border-radius: 3px;
}

.ui-error {
  color: var(--bad);
}

.ui-result.loading {
  opacity: 0.6;
  transition: opacity 0.2s;
}

/* ---------- o que vem incluído ---------- */

.bands {
  margin-top: var(--gap);
}

.bands-title {
  padding: 0 var(--margin) 48px;
}

.band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  min-height: 20vh;
  padding: 28px var(--margin);
  transition: background 0.3s var(--ease);
}

.band-copy {
  max-width: 44rem;
}

.band-text {
  font-size: var(--t-statement);
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.3s;
  max-width: 44rem;
}

.band-more {
  margin-top: 0;
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.3s, margin 0.3s;
}


.band.on .band-more {
  margin-top: 10px;
  max-height: 8em;
  opacity: 1;
}

.band.on.b1 {
  background: var(--green-1);
}

.band.on.b2 {
  background: var(--amber);
}

.band.on.b3 {
  background: var(--step-2);
}

.band.on.b4 {
  background: var(--green-2);
}

.band.on.b5 {
  background: var(--step);
}

.ui-toggle {
  position: relative;
  width: 72px;
  height: 40px;
  border-radius: 20px;
  border: 0;
  background: var(--step-2);
  cursor: pointer;
  transition: background 0.2s;
}

.ui-toggle span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 0.25s var(--ease);
}

.ui-toggle[aria-checked="true"] {
  background: var(--accent);
}

.ui-toggle[aria-checked="true"] span {
  transform: translateX(32px);
}

.ui-toggle:active span {
  width: 36px;
}

/* ---------- preços ---------- */

.pricing {
  margin-top: var(--gap);
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: 6fr 1fr 5fr;
}

.plan-names {
  grid-column: 1;
}

.plan-names h2 {
  font-size: var(--t-statement);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.plan-name {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font: inherit;
  font-size: var(--t-section);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.12;
  background: none;
  border: 0;
  padding: 0;
  color: var(--soft);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
}

.plan-name::before {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s;
}

.plan-name:hover {
  opacity: 0.85;
}

.plan-name[aria-pressed="true"] {
  color: var(--ink);
  opacity: 1;
}

.plan-name[aria-pressed="true"]::before {
  background: var(--accent);
}

.plan-stage {
  grid-column: 3;
  align-self: center;
  transition: opacity 0.2s;
}

.plan-stage.swap {
  opacity: 0;
}

.plan-price {
  font-size: var(--t-hero);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plan-price small {
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--soft);
  margin-left: 8px;
}

.plan-includes {
  margin: 24px 0 28px;
  font-size: var(--t-lead);
  max-width: 34ch;
}

.pricing-note {
  grid-column: 1 / -1;
  margin-top: 48px;
  max-width: 62ch;
}

/* ---------- perguntas ---------- */

.faq {
  margin-top: var(--gap);
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 32px;
  align-items: start;
}

.faq h2 {
  position: sticky;
  top: 96px;
}

.faq-list details {
  background: var(--step);
  border-radius: var(--radius);
  transition: background 0.2s;
}

.faq-list details + details {
  margin-top: 8px;
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 0 24px;
  font-size: var(--t-lead);
  font-weight: 550;
}

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

.faq-list summary::after {
  content: "+";
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s var(--ease);
}

.faq-list details[open] {
  background: var(--accent);
  color: var(--accent-ink);
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  padding: 0 24px 24px;
  max-width: 56ch;
}

.faq-list details code {
  background: #ffffff22;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- chamada final ---------- */

.closing {
  margin-top: var(--gap);
  min-height: 72svh;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  grid-template-columns: 6fr 1fr 5fr;
  padding: 64px var(--margin) 40px;
}

.closing-copy {
  grid-column: 1;
  align-self: end;
}

.closing-copy h2 {
  font-size: var(--t-hero);
  line-height: 0.95;
  letter-spacing: -0.045em;
  max-width: 9ch;
}

.closing-copy p {
  margin-top: 24px;
  max-width: 40ch;
}

.ui-dialog {
  grid-column: 3;
  align-self: center;
  width: min(100%, 440px);
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 24px 48px #00000033; /* taste-skill-ignore: interface do produto (data-ui) */
}

.ui-dialog-title {
  font-size: var(--t-lead);
  font-weight: 650;
  margin-bottom: 16px;
}

.ui-dialog label {
  display: block;
  font-weight: 550;
  margin-bottom: 6px;
}

.ui-dialog input {
  width: 100%;
  font: inherit;
  font-size: var(--t-body);
  padding: 10px 12px;
  border: 1px solid var(--step-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.ui-dialog .ui-muted {
  margin: 10px 0 18px;
}

/* ---------- rodapé ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  padding: 8px;
}

.tile {
  border-radius: var(--radius);
  background: var(--step);
  padding: 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tile .small {
  font-size: 14px;
  color: var(--soft);
}

.t-statement {
  grid-column: span 4;
  justify-content: space-between;
}

.t-statement p:first-child {
  font-size: var(--t-lead);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.t-nav {
  grid-column: span 3;
}

.t-nav a {
  text-decoration: none;
  transition: color 0.15s;
}

.t-nav a:hover {
  color: var(--accent);
}

.t-status {
  grid-column: span 2;
  justify-content: space-between;
}

.t-login {
  grid-column: span 3;
  justify-content: space-between;
}

.tile-big-link {
  font-size: var(--t-lead);
  font-weight: 600;
  text-underline-offset: 4px;
}

.t-mark {
  grid-column: span 8;
  min-height: 320px;
  background: var(--ink);
  color: var(--ground);
  align-items: center;
  justify-content: center;
}

.t-mark span {
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.t-cta {
  grid-column: span 4;
  min-height: 320px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  justify-content: space-between;
  transition: background 0.15s;
}

.t-cta span {
  font-size: var(--t-statement);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.t-cta svg {
  align-self: flex-end;
  transition: transform 0.2s var(--ease);
}

.t-cta:hover {
  background: var(--accent-hover);
}

.t-cta:hover svg {
  transform: translate(4px, -4px);
}

/* ---------- entradas (só com script; sem ele tudo aparece) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

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

.js .masked .line > span {
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}

.js .masked.in .line > span {
  transform: none;
}

.js .masked .line:nth-child(2) > span {
  transition-delay: 0.11s;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .masked .line > span {
    transform: none;
    transition: opacity 0.4s;
  }

  .ui-event.arriving {
    animation: none;
  }
}

/* ---------- telas menores ---------- */

@media (max-width: 1100px) {
  .hero,
  .problem {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
  }

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

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

  .tryit-in,
  .tryit-out {
    min-height: 0;
    padding: 56px var(--margin) 112px;
  }

  .tryit-out {
    padding-top: 112px;
  }

  .split-b {
    top: 32px;
    bottom: auto;
    left: var(--margin);
    right: auto;
  }

  /* Frase à esquerda, cartão à direita: a largura toda trabalha. */
  .step {
    min-height: 0;
    padding: 40px var(--margin) 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 32px;
    align-content: center;
  }

  .step h2,
  .step .clause {
    grid-column: 1;
    margin: 0;
    align-self: center;
  }

  .step:first-child h2 {
    margin-bottom: 16px;
    align-self: end;
  }

  .step:first-child .clause {
    align-self: start;
  }

  .step .ui-card,
  .step:first-child .ui-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    align-self: center;
  }

  .step .ui-card,
  .step:first-child .ui-card {
    margin-top: 32px;
    margin-inline: 0;
  }

  .tiles {
    grid-template-columns: repeat(6, 1fr);
  }

  .t-statement,
  .t-nav,
  .t-status,
  .t-login {
    grid-column: span 3;
  }

  .t-mark,
  .t-cta {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  :root {
    --t-ui: 14px;
    --t-lead: 18px;
    --t-statement: 22px;
    --t-section: 11vw;
    --t-hero: 13vw;
  }

  .bar-links {
    display: none;
  }

  .hero {
    padding-top: 24px;
  }

  .ui-event {
    grid-template-columns: 64px 1fr auto;
  }

  .ui-event .ui-detail {
    grid-column: 1 / -1;
  }

  .ui-evidence {
    flex-wrap: wrap;
    gap: 6px 16px;
  }

  .problem-ui {
    grid-template-columns: 1fr;
  }

  .step {
    padding: 32px 20px 40px;
    display: flex;
    flex-direction: column;
  }

  .step .clause {
    order: -1;
    margin: 0 0 24px;
  }

  .step:first-child h2 {
    order: -2;
  }

  .step:first-child h2 {
    margin-bottom: 16px;
  }

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

  .tryit-in,
  .tryit-out {
    min-height: 0;
    padding: 40px 20px 96px;
  }

  .tryit-out {
    padding-top: 96px;
  }

  .split-a {
    bottom: 24px;
  }

  .split-b {
    top: 24px;
    bottom: auto;
    left: 20px;
    right: auto;
  }

  .band {
    min-height: 132px;
    gap: 16px;
  }

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

  .plan-stage {
    grid-column: 1;
    margin-top: 24px;
  }

  .plan-stage .button {
    width: 100%;
  }

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

  .faq h2 {
    position: static;
  }

  .faq-list summary {
    min-height: 64px;
    padding: 12px 20px;
  }

  .faq-list details p {
    padding: 0 20px 20px;
  }

  .closing {
    grid-template-columns: 1fr;
    min-height: 84svh;
    gap: 40px;
    padding: 48px 16px;
  }

  .closing-copy {
    align-self: start;
  }

  .ui-dialog {
    grid-column: 1;
    width: 100%;
    align-self: end;
  }

  .tiles {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
  }

  .tile {
    min-height: 160px;
    padding: 20px;
  }

  .t-mark {
    grid-column: 1 / -1;
    order: -2;
  }

  .t-cta {
    grid-column: 1 / -1;
    order: -1;
    min-height: 180px;
  }

  .t-nav,
  .t-login,
  .t-status,
  .t-statement {
    grid-column: span 1;
  }

  .t-statement {
    grid-column: 1 / -1;
  }
}

/* ---------- Termos e Privacidade ---------- */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 32px var(--margin) 96px;
}

.legal h1 {
  font-size: var(--t-section);
}

.legal h2 {
  font-size: var(--t-statement);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 48px 0 12px;
}

.legal p,
.legal ul {
  margin: 0 0 14px;
}

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

.legal-meta {
  color: var(--soft);
  margin-top: 12px;
}

.legal-draft {
  background: var(--warn-bg);
  color: var(--warn);
  padding: 12px 16px;
  border-radius: var(--radius);
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: 15px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--step-2); /* taste-skill-ignore: tabela de verdade */
}

.legal th {
  color: var(--soft);
  font-weight: 600;
}

.legal-footer {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 32px var(--margin) 48px;
  background: var(--step);
}

@media (max-width: 760px) {
  .legal table,
  .legal tbody,
  .legal tr,
  .legal td {
    display: block;
  }

  .legal thead {
    display: none;
  }

  .legal td {
    padding: 2px 0;
    border: 0;
  }

  .legal tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--step-2); /* taste-skill-ignore: tabela de verdade */
  }

  .legal td:first-child {
    font-weight: 600;
  }
}