/* ═══════════════════════════════════════════════════════════════════════
   legacy.css — folhas ainda não migradas para os primitivos .ds-* — encolhe a cada rodada

   Concatenação na ordem EXATA em que o index.html carregava cada folha.
   Mexer nessa ordem muda qual regra vence.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── landing.css ───────────────────────────────────────────────── */
/* Landing Prospectfy - direção branco/preto minimalista.
   Neutros na escala da Apple (#1D1D1F, #6E6E73, #86868B, #D2D2D7, #F5F5F7):
   o contraste entre seções vem de degrau de fundo, não de borda em tudo.
   O roxo da marca aparece poucas vezes e sempre como detalhe: filete do kicker,
   botão principal, rótulo de etapa e marcador de FAQ aberto. */

.marketing-shell {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F5F5F7;
  --fg: #1D1D1F;
  --fg-secondary: #6E6E73;
  --fg-tertiary: #86868B;
  --border: #D2D2D7;
  --border-strong: #B8B8BF;
  --accent: oklch(0.47 0.21 286);
  --accent-hover: oklch(0.4 0.19 286);
  --accent-soft: oklch(0.96 0.02 286);
  --ink: #1D1D1F;
  --wrap: min(100% - 40px, 1100px);
  --pill: 980px;
  min-height: 100dvh;
  color: var(--fg);
  color-scheme: light;
  background: var(--bg);
  font-family: "Figtree", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.011em;
}

.marketing-shell .button {
  min-height: 46px;
  padding-inline: 24px;
  border-radius: var(--pill);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -.008em;
}
.marketing-shell .button--primary {
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
.marketing-shell .button--primary:hover { color: #FFFFFF; background: var(--accent-hover); border-color: var(--accent-hover); }
.marketing-shell .button--ghost { color: var(--fg); background: transparent; border-color: var(--border); box-shadow: none; }
.marketing-shell .button--ghost:hover { color: var(--fg); background: var(--surface-alt); border-color: var(--border-strong); }

/* ── Navegação ────────────────────────────────────────────── */

.marketing-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  width: 100%;
  min-height: 52px;
  padding-inline: max(20px, calc((100% - 1100px) / 2));
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.marketing-nav .brand-lockup__image { width: 150px; }
.marketing-nav__links { display: flex; align-items: center; gap: 30px; }
.marketing-nav__links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--fg-secondary); font-size: 13px; font-weight: 450; text-decoration: none; transition: color 140ms ease; }
.marketing-nav__links a:hover { color: var(--fg); }
.marketing-nav__login { justify-self: end; min-height: 34px; padding: 0 15px; border: 0; border-radius: var(--pill); color: #FFFFFF; background: var(--accent); font-size: 13px; font-weight: 550; cursor: pointer; transition: background 140ms ease; }
.marketing-nav__login:hover { background: var(--accent-hover); }

/* ── Hero ─────────────────────────────────────────────────── */
/* Copy centrada e imagem embaixo, em largura cheia: é a composição de página
   de produto da Apple, e foi o que o briefing pediu. */

.marketing-hero {
  width: var(--wrap);
  margin: auto;
  padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(40px, 5vw, 64px);
  text-align: center;
}
.marketing-hero__copy { max-width: 780px; }
.marketing-kicker {
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -.005em;
}
.marketing-kicker::before { content: ""; width: 20px; height: 1.5px; border-radius: 2px; background: var(--accent); }
.marketing-hero h1 {
  margin: 0;
  font-size: clamp(36px, 4.7vw, 64px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.marketing-hero h1 span { display: block; }
.marketing-hero__target { color: var(--accent); font-weight: 560; }
.marketing-hero__example { margin: 12px auto 0; max-width: 60ch; color: var(--fg-secondary); font-size: 13px; line-height: 1.5; }
.marketing-hero__lede { max-width: 44ch; margin: 20px auto 0; color: var(--fg-secondary); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; letter-spacing: -.012em; }
.marketing-hero__actions { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.marketing-hero__visual { position: relative; width: 100%; min-width: 0; margin: 0; }
.marketing-hero__image-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 22px;
  background: var(--surface-alt);
}
.marketing-hero__image-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ── Flutuação do visual do hero ──────────────────────────────────────────
   Três peças, e as três importam:

   1. Curva quase-senoidal. `ease-in-out` trava nos extremos e o movimento
      lê como mecânico; cubic-bezier(.45,0,.55,1) passa pelos vértices sem
      parar, que é como uma coisa flutuando de verdade se comporta.
   2. Sombra de contacto no chão, que ENCOLHE e CLAREIA conforme o objeto
      sobe. É ela que dá a altura — o olho lê distância pela sombra.
   3. Sombra na imagem reduzida ao mínimo. A profundidade vem do chão, não
      de uma sombra dura colada no objeto.

   Ambas as animações têm a MESMA duração e a MESMA curva, então sobem e
   descem em fase. Só `transform` e `opacity` são animados. */

.marketing-hero__visual {
  --float-rise: 22px;
  --float-dur: 5s;
  --float-ease: cubic-bezier(.45, 0, .55, 1);
  /* tilt — valores do card-tilt de transitions.dev */
  --tilt-perspective: 1000px;
  --tilt-return: 900ms;
  --tilt-follow: 260ms;
  --tilt-ease: cubic-bezier(.22, 1, .36, 1);
  --tilt-glare-opacity: .28;
}

/* Camada 1: flutua. Só translate. */
.marketing-hero__float {
  animation: hero-float var(--float-dur) var(--float-ease) infinite;
  will-change: transform;
}

/* Camada 2: inclina em direção ao ponteiro. As rotações vêm do JS por
   custom property; sem JS o quadro fica reto e nada quebra. */
.marketing-hero__image-frame {
  box-shadow: 0 18px 40px -24px rgb(29 29 31 / .28);
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-ease);
}
.marketing-hero__image-frame.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-ease);
  will-change: transform;
}

/* Brilho que acompanha o cursor: círculos suaves somados como luz (screen).
   Só opacity anima. */
.marketing-hero__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 110px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgb(255 255 255 / .46), rgb(255 255 255 / .06) 52%, transparent 84%),
    radial-gradient(circle 240px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgb(255 255 255 / .20), rgb(255 255 255 / .04) 58%, transparent 78%);
  transition: opacity 300ms var(--tilt-ease);
}
.marketing-hero__visual.is-hover .marketing-hero__glare { opacity: var(--tilt-glare-opacity); }

/* O chão. Elipse por gradiente, sem filter: blur() — um blur num elemento
   que anima custa raster a cada quadro; o gradiente não custa nada. */
.marketing-hero__visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 78%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(29 29 31 / .38) 0%, rgb(29 29 31 / .16) 45%, transparent 72%);
  animation: hero-contact var(--float-dur) var(--float-ease) infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

@keyframes hero-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, calc(var(--float-rise) * -1), 0); }
}

/* Sobe → sombra menor e mais clara. Desce → maior e mais densa. */
@keyframes hero-contact {
  0%, 100% { transform: translateX(-50%) scale(1);        opacity: 1; }
  50%      { transform: translateX(-50%) scale(.84, .72); opacity: .45; }
}

/* No mobile o curso encurta: a mesma amplitude numa tela pequena vira
   balanço, não flutuação. */
@media (max-width: 767px) {
  .marketing-hero__visual { --float-rise: 10px; }
  .marketing-hero__visual::after { bottom: -18px; height: 18px; width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-hero__float,
  .marketing-hero__visual::after { animation: none; will-change: auto; }
  .marketing-hero__image-frame { transform: none !important; transition: none !important; will-change: auto; }
  .marketing-hero__glare { display: none; }
}

/* ── Faixa de capacidades ─────────────────────────────────── */

.marketing-capability-strip {
  width: var(--wrap);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.marketing-capability-strip span {
  min-height: 56px;
  padding: 16px 18px;
  display: grid;
  place-items: center;
  color: var(--fg-tertiary);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}
.marketing-outcome-note { width: var(--wrap); margin: 14px auto 0; color: var(--fg-tertiary); font-size: 11.5px; line-height: 1.6; text-align: center; }

/* ── Revelação ao rolar ───────────────────────────────────── */
/* Só quando o JS marca .has-reveal, para que sem script a página continue
   completa e legível já no primeiro quadro. */

.marketing-shell.has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(.16, 1, .3, 1), transform 600ms cubic-bezier(.16, 1, .3, 1); }
.marketing-shell.has-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ── landing-search.css ────────────────────────────────────────── */
.marketing-search {
  width: min(100%, 980px);
  padding: 18px;
  background: var(--surface-alt);
  border-radius: 22px;
}

.marketing-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.marketing-search__field { display: grid; gap: 6px; text-align: left; }
.marketing-search__field span { color: var(--fg-secondary); font-size: 11px; font-weight: 600; }
.marketing-search__field input {
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  background: var(--surface);
  font: inherit;
}
.marketing-search__field input:focus { outline: 2px solid color-mix(in oklch, var(--accent) 35%, transparent); outline-offset: 1px; border-color: var(--accent); }
.marketing-search__submit { min-height: 46px; }
.marketing-search__notice, .marketing-search__feedback { margin: 10px 2px 0; color: var(--fg-tertiary); font-size: 12px; text-align: left; }
.marketing-search__feedback[data-tone="error"] { color: var(--red); }
.marketing-search__feedback[data-tone="success"] { color: var(--green); }

.marketing-search__results { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left; }
.marketing-search__results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.marketing-search__results-heading > div > span, .marketing-search__locked > div > span { color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.marketing-search__results h2, .marketing-search__locked h3 { margin: 4px 0 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.025em; }
.marketing-search__live-label { padding: 6px 9px; color: var(--fg-secondary); background: var(--surface); border-radius: 99px; font-size: 11px; font-weight: 550; white-space: nowrap; }

.marketing-search__lead-list { display: grid; gap: 8px; margin-top: 16px; }
.marketing-search__lead { padding: 13px 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: var(--surface); border-radius: 12px; }
.marketing-search__lead strong { display: block; color: var(--fg); font-size: 14px; }
.marketing-search__lead small { display: block; margin-top: 3px; color: var(--fg-secondary); font-size: 12px; }
.marketing-search__lead-status { color: var(--accent); font-size: 11px; font-weight: 650; text-align: right; }

.marketing-search__locked { position: relative; margin-top: 16px; padding: 22px; overflow: hidden; background: var(--ink); border-radius: 16px; }
.marketing-search__locked > div:first-child { position: relative; z-index: 2; max-width: 34ch; }
.marketing-search__locked > div:first-child > span { color: var(--accent-light); }
.marketing-search__locked h3 { color: #fff; }
.marketing-search__locked p { margin: 8px 0 0; color: #c4c4cb; font-size: 13px; line-height: 1.5; }
.marketing-search__locked .button { position: relative; z-index: 2; margin-top: 16px; }
.marketing-search__blurred-list { position: absolute; inset: 12px -30px -46px auto; width: 46%; display: grid; gap: 8px; opacity: .48; filter: blur(5px); transform: rotate(-5deg); }
.marketing-search__blurred-list span { padding: 10px; color: #a6a6af; background: #29292d; border-radius: 9px; font-size: 11px; }

@media (max-width: 767px) {
  .marketing-search { padding: 14px; border-radius: 18px; }
  .marketing-search__form { grid-template-columns: 1fr; }
  .marketing-search__submit { width: 100%; }
  .marketing-search__results-heading { align-items: flex-start; flex-direction: column; }
  .marketing-search__live-label { white-space: normal; }
  .marketing-search__lead { grid-template-columns: 1fr; }
  .marketing-search__lead-status { text-align: left; }
  .marketing-search__blurred-list { width: 56%; opacity: .25; }
}

/* ── landing-sections.css ──────────────────────────────────────── */
/* Seções da landing — branco/preto, ar generoso, pouca borda.
   As seções alternam fundo branco e #F5F5F7 em largura total; a borda fina só
   aparece onde separa itens de uma mesma lista. */

.marketing-tension,
.marketing-showcase,
.marketing-process,
.marketing-benefits,
.marketing-goal,
.marketing-faq,
.marketing-final-cta { width: var(--wrap); margin-inline: auto; }

.marketing-tension,
.marketing-process,
.marketing-benefits,
.marketing-faq { padding-block: clamp(64px, 7vw, 104px); }

/* Degrau de fundo em largura total, sem borda: é assim que a Apple separa
   seções. O padding lateral do container é preservado pelo width acima. */
.marketing-tension,
.marketing-faq {
  width: 100%;
  padding-inline: max(20px, calc((100% - 1100px) / 2));
  background: var(--surface-alt);
}

.marketing-section-intro { max-width: 760px; margin-inline: auto; text-align: center; }
.marketing-section-intro--narrow { max-width: 660px; }
.marketing-section-intro h2,
.marketing-section-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.026em;
  text-wrap: balance;
}
.marketing-section-intro p,
.marketing-section-heading > p { max-width: 56ch; margin: 16px auto 0; color: var(--fg-secondary); font-size: 16px; line-height: 1.55; }

/* ── Tensão: mensagem genérica × demonstração ─────────────── */

.marketing-tension__grid { max-width: 1100px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.marketing-message {
  min-height: 212px;
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
}
.marketing-message > span { color: var(--fg-tertiary); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.marketing-message p { max-width: 22ch; margin: 28px 0 16px; font-size: clamp(19px, 1.9vw, 26px); font-weight: 580; line-height: 1.2; letter-spacing: -.022em; }
.marketing-message small { color: var(--fg-secondary); font-size: 13.5px; line-height: 1.5; }
.marketing-message--muted { background: color-mix(in srgb, var(--surface-alt) 55%, #FFFFFF); }
.marketing-message--muted p { color: var(--fg-tertiary); text-decoration: line-through; text-decoration-thickness: 1px; }
.marketing-message--accent > span { color: var(--accent); }

/* ── Showcase / VSL ───────────────────────────────────────── */

.marketing-showcase { padding-block: clamp(64px, 7vw, 104px); }
.marketing-showcase__media { max-width: 1100px; margin: 40px auto 0; overflow: hidden; border: 0; border-radius: 22px; background: var(--surface-alt); }
.marketing-showcase__media img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.marketing-showcase__media figcaption {
  min-height: 58px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  color: var(--fg-tertiary);
  background: var(--surface-alt);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}

/* ── Processo ─────────────────────────────────────────────── */

.marketing-process { display: grid; grid-template-columns: minmax(250px, .66fr) minmax(0, 1.34fr); gap: clamp(40px, 6vw, 88px); }
.marketing-section-heading { align-self: start; position: sticky; top: 96px; text-align: left; }
.marketing-section-heading h2 { text-align: left; }
.marketing-section-heading > p { margin-inline: 0; }
.marketing-section-heading--compact { position: static; max-width: 620px; }
.marketing-process__list { margin: 0; padding: 0; list-style: none; }
.marketing-process__list > li { padding: 22px 0; display: grid; grid-template-columns: 92px 1fr; gap: 20px; border-bottom: 1px solid var(--border); }
.marketing-process__list > li:first-child { padding-top: 0; }
.marketing-process__list > li:last-child { border-bottom: 0; }
.marketing-process__list > li > strong { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding-top: 2px; }
.marketing-process__list h3 { margin: 0 0 6px; font-size: 18px; font-weight: 580; letter-spacing: -.018em; }
.marketing-process__list p { max-width: 58ch; margin: 0; color: var(--fg-secondary); font-size: 14.5px; line-height: 1.6; }

/* ── Benefícios ───────────────────────────────────────────── */

.marketing-benefits__grid { max-width: 1100px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.marketing-benefit {
  grid-column: span 12;
  min-height: 190px;
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 0;
  border-radius: 18px;
  background: var(--surface-alt);
}
.marketing-benefit--wide { grid-column: span 7; grid-row: span 2; min-height: 396px; }
.marketing-benefit--accent, .marketing-benefit--dark { grid-column: span 5; }
.marketing-benefit--accent { background: var(--accent-soft); }
/* Um único bloco em tinta na página inteira, e ele fecha o argumento. */
.marketing-benefit--dark { color: #F5F5F7; background: var(--ink); }
.marketing-benefit > span { margin-bottom: auto; color: var(--fg-tertiary); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; }
.marketing-benefit--accent > span { color: var(--accent); }
.marketing-benefit--dark > span { color: #86868B; }
.marketing-benefit h3 { max-width: 19ch; margin: 26px 0 8px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; line-height: 1.14; letter-spacing: -.024em; }
.marketing-benefit p { max-width: 46ch; margin: 0; color: var(--fg-secondary); font-size: 14.5px; line-height: 1.55; }
.marketing-benefit--dark p { color: #A1A1A6; }

/* ── Meta ─────────────────────────────────────────────────── */

.marketing-goal {
  min-height: 0;
  padding: clamp(36px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  border: 0;
  border-radius: 22px;
  background: var(--surface-alt);
}
.marketing-goal h2 { max-width: 20ch; margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 620; line-height: 1.1; letter-spacing: -.026em; }
.marketing-goal p { max-width: 54ch; margin: 14px 0 0; color: var(--fg-secondary); font-size: 15.5px; line-height: 1.55; }

/* ── FAQ ──────────────────────────────────────────────────── */

.marketing-faq { display: grid; grid-template-columns: minmax(240px, .64fr) minmax(0, 1.36fr); gap: clamp(40px, 6vw, 88px); }
.marketing-faq__list { max-width: 780px; }
.marketing-faq details { border-bottom: 1px solid var(--border); }
.marketing-faq details:first-child { border-top: 1px solid var(--border); }
.marketing-faq summary { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 16px; font-weight: 550; letter-spacing: -.014em; cursor: pointer; list-style: none; }
.marketing-faq summary::-webkit-details-marker { display: none; }
.marketing-faq summary::after { content: "+"; color: var(--fg-tertiary); font-size: 22px; font-weight: 300; }
.marketing-faq details[open] summary::after { content: "−"; color: var(--accent); }
.marketing-faq details p { max-width: 62ch; margin: -4px 40px 24px 0; color: var(--fg-secondary); font-size: 15px; line-height: 1.6; }

/* ── CTA final ────────────────────────────────────────────── */

.marketing-final-cta {
  min-height: 0;
  margin-bottom: 72px;
  padding: clamp(44px, 5.5vw, 76px) clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  color: #F5F5F7;
  background: var(--ink);
  border-radius: 22px;
  text-align: center;
}
.marketing-final-cta h2 { max-width: 17ch; margin: 0; font-size: clamp(30px, 3.8vw, 50px); font-weight: 620; line-height: 1.08; letter-spacing: -.03em; }
.marketing-final-cta p { max-width: 46ch; margin: 14px auto 0; color: #A1A1A6; font-size: 16px; line-height: 1.55; }
.marketing-final-cta .button { color: var(--ink); background: #FFFFFF; border-color: #FFFFFF; box-shadow: none; }
.marketing-final-cta .button:hover { color: var(--ink); background: #E8E8ED; border-color: #E8E8ED; }

/* ── Rodapé ───────────────────────────────────────────────── */

.marketing-footer { width: var(--wrap); min-height: 96px; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-top: 1px solid var(--border); }
.marketing-footer p, .marketing-footer button, .marketing-footer a { color: var(--fg-tertiary); font-size: 12.5px; font-weight: 450; }
.marketing-footer p { margin: 0; }
.marketing-footer button { min-height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.marketing-footer__links { justify-self: end; display: flex; align-items: center; gap: 4px; }
.marketing-footer__links a { min-height: 44px; padding: 10px; display: inline-flex; align-items: center; text-decoration: none; }
.marketing-footer__links a:hover, .marketing-footer__links a:focus-visible, .marketing-footer__links button:hover { color: var(--fg); }

/* ── shell.css ─────────────────────────────────────────────────── */
.shell { min-height: 100vh; display: grid; grid-template-columns: 272px minmax(0,1fr); background: var(--bg); }
.rail { position: sticky; top: 0; z-index: var(--z-nav); height: 100vh; padding: 24px 18px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; background: var(--sidebar-bg); border-right: 1px solid var(--border); }
.rail__logo-wrapper { padding: 6px 8px 12px; }
.rail__copy { margin: 8px 0 0; padding-inline: 8px; color: var(--fg-secondary); font-size: 12px; line-height: 1.55; }
.rail__nav { display: flex; flex-direction: column; gap: 3px; }
.nav__link { min-height: 42px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; color: var(--fg-secondary); background: transparent; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; }
.nav__link svg { flex: 0 0 auto; margin-right: 0 !important; }
.nav__link:hover { color: var(--fg); background: var(--surface); }
.nav__link.active { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in oklch,var(--accent) 18%,transparent); }
.nav__link--help { color: var(--accent); }
.quota-widget { margin-top: auto; padding: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.quota-widget__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-secondary); font-size: 10px; }
.quota-widget__bar-bg { height: 4px; margin-top: 10px; overflow: hidden; background: var(--surface-alt); border-radius: 99px; }
.quota-widget__bar { width: 0; height: 100%; background: var(--accent); transition: width 180ms ease; }
.whatsapp-status-indicator { padding: 9px 11px; display: flex; align-items: center; gap: 8px; color: var(--fg-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 10px; font-weight: 650; }
.whatsapp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-tertiary); }
.whatsapp-status-indicator[data-connected="true"] { color: var(--green); background: var(--green-soft); }
.whatsapp-status-indicator[data-connected="true"] .whatsapp-status-dot { background: var(--green); }

.mobile-app-header, .mobile-rail-close, .rail-overlay, .mobile-tab-bar { display: none; }
.board { width: 100%; max-width: 1660px; margin: auto; padding: 28px clamp(20px,3vw,44px) 80px; }

.workflow-rail { margin-bottom: 20px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.workflow-rail__heading { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.workflow-rail__heading p { margin: 0 0 3px; color: var(--fg-secondary); font-size: 11px; font-weight: 700; }
.workflow-rail__heading h1 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.workflow-rail ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); list-style: none; border-top: 1px solid var(--border); }
.workflow-rail li { padding: 17px 14px 0 0; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; }
.workflow-rail li + li { padding-left: 14px; border-left: 1px solid var(--border); }
.workflow-rail li > span { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; color: var(--fg-secondary); background: var(--surface-alt); border-radius: 50%; font-size: 10px; font-weight: 800; }
.workflow-rail li strong { font-size: 12px; }
.workflow-rail li small { color: var(--fg-tertiary); font-size: 10px; }
.workflow-rail li.is-current > span, .workflow-rail li.is-complete > span { color: var(--surface); background: var(--accent); }

.search-collapsible-wrapper { margin-bottom: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.search-toggle-btn { width: 100%; min-height: 52px; padding: 12px 18px; display: flex; align-items: center; gap: 8px; color: var(--fg); background: transparent; border: 0; font-weight: 700; text-align: left; cursor: pointer; }
.search-toggle-btn:hover { background: var(--surface-alt); }
.search-collapsible-content { max-height: 560px; padding: 18px; opacity: 1; border-top: 1px solid var(--border); transition: max-height 180ms cubic-bezier(.16,1,.3,1), opacity 160ms ease, padding 180ms ease; }
.search-collapsible-content.collapsed { max-height: 0; padding-block: 0; opacity: 0; overflow: hidden; pointer-events: none; border-top-color: transparent; }
.search-panel { padding: 20px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.search-panel--board { padding: 0; border: 0; }
.search-panel__grid { display: flex; gap: 16px; flex-wrap: wrap; }
.search-panel__side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }

.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.metric { min-height: 86px; padding: 17px 20px; background: transparent; }
.metric + .metric { border-left: 1px solid var(--border); }
.metric__label { display: block; color: var(--fg-secondary); font-size: 10px; font-weight: 750; }
.metric__value { display: block; margin-top: 4px; font-size: 24px; letter-spacing: -.03em; }

.bento-filters { margin: 8px 0 18px; padding: 5px; display: flex; gap: 5px; flex-wrap: wrap; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); }
.filter-pill { min-height: 36px; padding: 6px 12px; color: var(--fg-secondary); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; cursor: pointer; }
.filter-pill:hover { color: var(--fg); }
.filter-pill.active { color: var(--accent); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.batch-select-container { border-color: var(--border) !important; }
.select-all-label { min-height: 36px; }

/* ── leads.css ─────────────────────────────────────────────────── */
.tickets { margin-top: 22px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.tickets__header { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tickets__eyebrow { margin: 0; color: var(--fg-secondary); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.tickets__title { margin: 2px 0 0; color: var(--fg); font-size: 23px; letter-spacing: -.035em; }
.mobile-kanban-tabs { display: none; }
#kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-behavior: smooth; }
.kanban-column { flex: 0 0 390px; width: 390px; min-width: 390px; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kanban-column > h3, .kanban-column > div:first-child { min-height: 36px; }
.kanban-dropzone { min-height: 200px; display: flex; flex-direction: column; gap: 12px; }
.count-badge { color: var(--fg-secondary); font-size: 11px; }

.ticket { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ticket:hover { border-color: var(--border-strong); }
.ticket__body { padding: 16px; }
.ticket__topline { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-secondary); font-size: 10px; }
.ticket__status, .ticket__source-badge, .ticket__wa-sent-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ticket__status { color: var(--orange); background: var(--orange-soft); }
.ticket[data-status="approved"] .ticket__status, .ticket[data-status="site_created"] .ticket__status { color: var(--green); background: var(--green-soft); }
.ticket[data-status="rejected"] .ticket__status { color: var(--red); background: var(--red-soft); }
.ticket__source-badge { color: var(--fg-secondary); background: var(--surface-alt); }
.ticket__wa-sent-badge { color: var(--green); background: var(--green-soft); }
.ticket__main-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.ticket__title { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; }
.ticket__opportunity-badge { display: inline-flex; padding: 2px 7px; vertical-align: middle; color: var(--orange); background: var(--orange-soft); border: 1px solid color-mix(in oklch,var(--orange) 28%,var(--border)); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.ticket__phone { margin: 4px 0 0; color: var(--fg-secondary); font-size: 12px; }
.ticket__site_links:empty { display: none; }
.ticket__site_links > div { margin: 4px 0 !important; background: var(--surface-alt) !important; }
.ticket__actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ticket__action-group { display: flex; gap: 8px; flex-wrap: wrap; }
.ticket__action-group.primary-actions { display: grid; grid-template-columns: 1fr auto; }
.ticket__action-group.secondary-links .button { min-height: 36px; font-size: 11px; }
.ticket__more { padding-top: 10px; border-top: 1px solid var(--border); }
.ticket__more summary { min-height: 34px; display: flex; align-items: center; justify-content: space-between; color: var(--fg-secondary); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.ticket__more summary::-webkit-details-marker { display: none; }
.ticket__more summary::after { content: "+"; color: var(--accent); font-size: 18px; }
.ticket__more[open] summary::after { content: "−"; }
.ticket__meta { margin: 8px 0; color: var(--fg-secondary); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.ticket__more-actions { padding-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.ticket__more-actions .button { min-height: 34px; font-size: 11px; }
.ticket__select-box input { min-width: 24px; min-height: 24px; }
.ticket.draggable-card { cursor: grab; }
.ticket.dragging { opacity: .55; }
.kanban-dropzone.drag-over { background: var(--accent-soft); }

.empty-state { min-height: 290px; padding: 34px !important; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left !important; color: var(--fg) !important; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.empty-state__eyebrow { color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.empty-state h3 { margin: 8px 0 6px; font-size: 20px; letter-spacing: -.025em; }
.empty-state p { max-width: 42ch; margin: 0; color: var(--fg-secondary); line-height: 1.55; }
.empty-state__actions { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }

.batch-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay); min-height: 74px; padding: 10px 24px; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px oklch(0.2 0.02 278 / .06); transform: translateY(110%); transition: transform 180ms cubic-bezier(.16,1,.3,1), opacity 140ms ease, visibility 0s linear 180ms; }
.batch-action-bar.active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.batch-action-bar__content { width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.batch-action-bar__info { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.batch-action-bar__count { padding: 2px 9px; color: var(--surface); background: var(--accent); border-radius: 999px; font-size: 11px; }
.batch-action-bar__actions { display: flex; gap: 8px; }

.card--generating { border-color: var(--accent); }
.generating-status-container { width: 100%; margin: 12px 0; padding: 10px; display: flex; align-items: center; gap: 8px; color: var(--accent); background: var(--accent-soft); border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }
.generating-spinner, .spinner { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.highlight-pulse { outline: 3px solid var(--accent); outline-offset: 3px; }
.google-maps-attribution {
  margin: -4px 0 14px;
  color: #5e5e5e;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
}

.google-maps-attribution span { white-space: nowrap; }

/* ── features.css ──────────────────────────────────────────────── */
.copy-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.copy-card { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.copy-card h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.copy-desc { color: var(--fg-secondary); font-size: 13px; line-height: 1.6; }
.copy-text { max-height: 260px; margin: 16px 0; padding: 16px; overflow-y: auto; white-space: pre-wrap; color: var(--fg-secondary); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 12px; line-height: 1.65; }

.admin-grid { align-items: start; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { color: var(--fg-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.admin-table th, .admin-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.admin-table tr:hover { background: var(--surface-alt); }
.admin-action-btn { min-height: 32px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg-secondary); background: var(--surface); cursor: pointer; }

.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); width: min(390px,calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { padding: 14px; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); pointer-events: auto; }
.toast--success { border-color: color-mix(in oklch,var(--green) 45%,var(--border)); }
.toast--error { border-color: color-mix(in oklch,var(--red) 45%,var(--border)); }
.toast__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toast__title { font-size: 13px; font-weight: 800; }
.toast__message { margin-top: 4px; color: var(--fg-secondary); font-size: 12px; line-height: 1.5; }
.toast__click-hint { min-height: 32px; margin-top: 6px; padding: 0; color: var(--accent); background: transparent; border: 0; font: inherit; font-size: 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toast__close { min-width: 32px; min-height: 32px; border: 0; border-radius: 50%; background: var(--surface-alt); cursor: pointer; }

.skeleton-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.skeleton-box { position: relative; overflow: hidden; background: var(--surface-alt); border-radius: var(--radius-sm); }
.skeleton-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,oklch(1 0 0 / .6),transparent); transform: translateX(-100%); animation: shimmer 1.5s infinite; }
.skeleton-title { width: 55%; height: 18px; margin-bottom: 14px; }
.skeleton-text { width: 100%; height: 11px; margin-bottom: 8px; }
.skeleton-text-short { width: 62%; height: 11px; margin-bottom: 18px; }
.skeleton-button { width: 100%; height: 36px; }
@keyframes shimmer { to { transform: translateX(100%); } }

#manual-dropzone { display: block; }
#manual-file-name:empty { display: none; }
#wa-qr-container { color: var(--fg); }
#campaign-log { color: var(--fg-secondary) !important; background: var(--surface-alt) !important; border-color: var(--border) !important; }

.ticket__source-badge, .status-pill { white-space: nowrap; }
.status-pill { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; }
.status-pill--approved { color: var(--green); background: var(--green-soft); }
.status-pill--pending { color: var(--orange); background: var(--orange-soft); }

/* ── onboarding.css ────────────────────────────────────────────── */
/* Modais de entrada e cadastro.
   Ficam fora de .marketing-shell, então declaram o próprio escopo de tokens
   para acompanhar a direção da landing em vez de herdar o violeta saturado
   de tokens.css. Cabeçalho alinhado à esquerda: formulário centralizado
   inteiro lê como template; alinhado lê como produto. */

.auth-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 12px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 24px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 500; }
.auth-google img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.auth-google:hover { background: #f8faff; }
.auth-modal-wrapper {
  --auth-surface: #FFFFFF;
  --auth-surface-alt: #F5F5F7;
  --auth-fg: #1D1D1F;
  --auth-fg-secondary: #6E6E73;
  --auth-fg-tertiary: #86868B;
  --auth-border: #D2D2D7;
  --auth-border-strong: #B8B8BF;
  --auth-accent: oklch(0.47 0.21 286);
  --auth-accent-hover: oklch(0.4 0.19 286);
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: rgba(29, 29, 31, .48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: "Figtree", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
.auth-modal-wrapper[aria-hidden="true"] { display: none; }

.auth-modal-container {
  position: relative;
  width: min(100%, 452px);
  margin: auto;
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--auth-fg);
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(29, 29, 31, .18);
}
.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--auth-fg-tertiary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.auth-modal-close:hover { color: var(--auth-fg); background: var(--auth-surface-alt); }

.auth-modal-header { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.auth-modal-header .brand-lockup { margin-bottom: 14px; }
.auth-modal-header .brand-lockup__mark { background: var(--auth-fg); border-radius: 7px; font-size: 14px; }
.auth-modal-header .brand-lockup__name { color: var(--auth-fg); font-size: 12.5px; font-weight: 700; letter-spacing: .09em; }
.auth-modal-title { margin: 0; font-size: 23px; font-weight: 620; line-height: 1.14; letter-spacing: -.028em; }
.auth-modal-subtitle { margin: 0; color: var(--auth-fg-secondary); font-size: 14px; line-height: 1.55; }

.auth-modal-card { display: flex; flex-direction: column; gap: 15px; }
.auth-modal-card .field > span { color: var(--auth-fg-secondary); font-size: 12.5px; font-weight: 560; letter-spacing: 0; }
.auth-modal-card .field > small { color: var(--auth-fg-tertiary); font-size: 11.5px; }
.auth-modal-card :is(input, select) {
  min-height: 44px;
  color: var(--auth-fg);
  background: var(--auth-surface);
  border: 1px solid var(--auth-border-strong);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 150ms ease;
}
.auth-modal-card :is(input, select):hover { border-color: var(--auth-fg-tertiary); }
.auth-modal-card :is(input, select):focus { border-color: var(--auth-accent); }
.auth-modal-card input::placeholder { color: var(--auth-fg-tertiary); }

.auth-btn {
  width: 100%;
  min-height: 48px;
  color: oklch(0.99 0 0);
  background: var(--auth-accent);
  border: 1px solid var(--auth-accent);
  border-radius: 980px;
  box-shadow: none;
  font-size: 14.5px;
  font-weight: 550;
}
.auth-btn:hover { color: oklch(0.99 0 0); background: var(--auth-accent-hover); border-color: var(--auth-accent-hover); }

/* .auth-btn define fundo de acento e vem depois de base.css na ordem de
   import, então a variante fantasma precisa ser reafirmada aqui. */
.button--ghost.auth-btn { color: var(--auth-fg-secondary); background: transparent; border-color: var(--auth-border-strong); }
.button--ghost.auth-btn:hover { color: var(--auth-fg); background: var(--auth-surface-alt); border-color: var(--auth-fg-tertiary); }

/* Nota de preço junto do botão: o valor precisa estar visível na hora da
   decisão, não só dentro do rótulo do botão. */
.auth-price-note {
  margin: -4px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--auth-fg-secondary);
  font-size: 12.5px;
  line-height: 1.5;
}
.auth-price-note strong { color: var(--auth-fg); font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums; }

.auth-modal-footer-text { margin: 0; color: var(--auth-fg-secondary); font-size: 13px; text-align: center; }
.auth-modal-footer-text a, .auth-modal-footer-text button { color: var(--auth-accent); font-weight: 600; }

/* Paywall: um aviso, não um cartaz. */
.auth-modal-container--notice { width: min(100%, 428px); }
.auth-notice-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 4px 10px;
  color: oklch(0.46 0.16 40);
  background: oklch(0.96 0.03 60);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.paywall-trial-balance { margin: 0; padding: 12px 14px; color: var(--auth-fg); background: var(--auth-surface-alt); border: 1px solid var(--auth-border); border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.paywall-price-note { margin: -9px 0 0; color: var(--auth-fg-secondary); font-size: 12px; line-height: 1.45; text-align: center; }
#modal-paywall .auth-notice-flag { color: var(--auth-accent); background: color-mix(in srgb, var(--auth-accent) 9%, white); }
#modal-paywall .auth-modal-container { width: min(100%, 480px); gap: 20px; }
#modal-paywall .auth-notice-flag { align-self: flex-start; }
#modal-paywall .auth-modal-title { font-size: 28px; line-height: 1.15; }
#modal-paywall .auth-modal-subtitle { margin-top: 6px; }
#modal-paywall .auth-btn { border-radius: 12px; padding: 12px; white-space: normal; }
.paywall-benefits { margin: 16px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; color: var(--auth-fg); font-size: 13px; }
.paywall-benefits li::before { content: "✓"; margin-right: 10px; color: var(--auth-accent); font-weight: 700; }
#modal-paywall .paywall-trial-balance { font-weight: 500; border-color: var(--auth-border); }

.product-tour { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-tour); width: min(390px,calc(100vw - 32px)); padding: 20px; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.product-tour__topline, .product-tour__actions, .product-tour__actions > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-tour__topline > span { color: var(--accent); font-size: 11px; font-weight: 800; }
.product-tour__topline button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-alt); cursor: pointer; }
.product-tour h2 { margin: 14px 0 7px; font-size: 21px; letter-spacing: -.025em; }
.product-tour p { margin: 0; color: var(--fg-secondary); font-size: 13px; line-height: 1.55; }
.product-tour__actions { margin-top: 20px; }
.product-tour__actions button { min-height: 38px; padding: 0 12px; color: var(--fg-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; }
.product-tour__actions #btn-tour-next { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.tour-target { position: relative; z-index: calc(var(--z-overlay) - 1) !important; outline: 3px solid var(--accent) !important; outline-offset: 5px !important; }

.workflow-rail__activation { margin-top: 18px; padding: 16px; display: grid; grid-template-columns: minmax(220px,.85fr) minmax(0,1.4fr); gap: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--border)); border-radius: var(--radius-md); }
.workflow-rail__activation p { margin: 0 0 3px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.workflow-rail__activation h2 { margin: 0; font-size: 14px; letter-spacing: -.015em; }
.workflow-rail__activation > div > span { display: block; margin-top: 5px; color: var(--fg-secondary); font-size: 11px; line-height: 1.45; }
.workflow-rail__activation ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; list-style: none; }
.workflow-rail__activation li { min-width: 0; padding: 9px; display: grid; grid-template-columns: 20px 1fr; gap: 0 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.workflow-rail__activation li > span { width: 20px; height: 20px; display: grid; place-items: center; color: var(--fg-secondary); background: var(--surface-alt); border-radius: 50%; font-size: 10px; font-weight: 800; }
.workflow-rail__activation li strong { align-self: center; font-size: 11px; line-height: 1.25; }
.workflow-rail__activation li button { grid-column: 2; justify-self: start; margin-top: 5px; padding: 0; color: var(--accent); background: transparent; border: 0; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.workflow-rail__activation li.is-complete { border-color: color-mix(in oklch, var(--green) 45%, var(--border)); }
.workflow-rail__activation li.is-complete > span { color: #fff; background: var(--green); }
.workflow-rail__activation li button:disabled { color: var(--green); cursor: default; }
@media (max-width: 880px) { .workflow-rail__activation { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .workflow-rail__activation ul { grid-template-columns: 1fr; } }

.tutorial-container { max-width: 1100px; margin: auto; padding: 24px 16px; }
.tutorial-header { margin-bottom: 28px; }
.tutorial-title { margin: 0 0 8px; color: var(--fg); font-size: 28px; letter-spacing: -.035em; }
.tutorial-subtitle { max-width: 70ch; margin: 0; color: var(--fg-secondary); font-size: 15px; line-height: 1.6; }
.tutorial-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; }
.bento-card { grid-column: span 6; padding: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bento-card--full { grid-column: span 12; }
.bento-card--badge { float: right; padding: 3px 8px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-size: 10px; font-weight: 750; }
.bento-card__step { margin-bottom: 8px; display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.bento-card__title { margin: 0 0 10px; font-size: 19px; letter-spacing: -.02em; }
.bento-card__desc, .bento-card p { color: var(--fg-secondary); font-size: 13px; line-height: 1.6; }

.mockup-window { margin-top: 14px; overflow: hidden; border: 1px solid oklch(0.31 0.025 278); border-radius: var(--radius-md); }
.tutorial-terminal__header { padding: 8px 12px; display: flex; align-items: center; gap: 6px; background: oklch(0.25 0.025 278); }
.tutorial-terminal__body { padding: 16px; overflow-x: auto; color: oklch(0.93 0.01 278); background: oklch(0.2 0.025 278); font-family: ui-monospace,"Cascadia Code",monospace; font-size: 12px; line-height: 1.65; }
.tutorial-terminal__dot { width: 9px; height: 9px; border-radius: 50%; }
.tutorial-terminal__dot--red { background: var(--red); }
.tutorial-terminal__dot--yellow { background: var(--orange); }
.tutorial-terminal__dot--green { background: var(--green); }
.code-inline { padding: 2px 5px; color: var(--accent); background: var(--accent-soft); border-radius: 4px; font-family: ui-monospace,"Cascadia Code",monospace; }
.visual-flow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.flow-step { flex: 1; min-width: 120px; padding: 14px; text-align: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); }
.flow-arrow { color: var(--fg-secondary); font-size: 18px; }

/* ── plan.css ──────────────────────────────────────────────────── */
/* Tela "Meu Plano".
   Vive dentro de #app-shell, então herda os tokens do painel — o objetivo aqui
   é parecer parte do produto, não da landing. O badge de status recebe cor
   inline do app.js conforme o estado da assinatura; esta folha cuida só do
   layout e deixa o preenchimento para o script. */

.plan-lede { max-width: 60ch; margin: 6px 0 20px; color: var(--fg-secondary); font-size: 14px; line-height: 1.6; }

.plan-card {
  max-width: 1000px;
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.1fr);
  grid-template-areas: "head head" "price benefits" "caption benefits" "actions benefits" "trust benefits" "facts facts" "note note";
  column-gap: 48px;
  row-gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.plan-card__head {
  grid-area: head;
  padding-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-light, var(--border));
}
.plan-card__name { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.plan-card__desc { max-width: 44ch; margin: 0; color: var(--fg-secondary); font-size: 13px; line-height: 1.55; }

.plan-status {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

.plan-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.plan-fact { padding: 14px 16px; background: var(--surface); }
.plan-fact dt { margin: 0 0 3px; color: var(--fg-tertiary); font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.plan-fact dd { margin: 0; color: var(--fg); font-size: 17px; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-fact dd span { color: var(--fg-secondary); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }

.plan-note { margin: 0; color: var(--fg-tertiary); font-size: 12px; line-height: 1.55; }

.plan-actions { display: flex; flex-direction: column; gap: 10px; }
.plan-actions:empty { display: none; }

.plan-eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.plan-price { grid-area: price; color: var(--fg); font-size: clamp(44px, 4vw, 64px); font-weight: 750; letter-spacing: -.05em; line-height: 1.05; }
.plan-price > span { font-size: 22px; letter-spacing: -.02em; }
.plan-price small { color: var(--fg-secondary); font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.plan-price-caption { grid-area: caption; margin: -4px 0 0; color: var(--fg-secondary); font-size: 13px; }
.plan-benefits { grid-area: benefits; display: grid; align-content: center; gap: 24px; padding: 0 0 0 28px; margin: 0; list-style: none; border-left: 1px solid var(--border); }
.plan-benefits li { display: flex; align-items: flex-start; gap: 12px; }
.plan-benefits li > span { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.plan-benefits strong { display: block; color: var(--fg); font-size: 15px; }
.plan-benefits p { margin: 5px 0 0; color: var(--fg-secondary); font-size: 13px; line-height: 1.5; }
.plan-facts { grid-area: facts; margin-top: 10px; }
.plan-note { grid-area: note; }
.plan-actions { grid-area: actions; }
.plan-actions > .button { min-height: 48px; border-radius: 12px; font-size: 14px; font-weight: 650; }
.plan-trust { margin: 0; color: var(--fg-tertiary); font-size: 12px; line-height: 1.6; }
.plan-card > .plan-trust { grid-area: trust; }
#plan-activation-dialog { padding: 0; border: 1px solid var(--border); width: min(480px, calc(100vw - 32px)); border-radius: 24px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.plan-checkout-shell { padding: 32px; position: relative; color: var(--fg); background: var(--surface); }
.plan-checkout-shell h2 { margin: 0; font-size: 27px; line-height: 1.12; letter-spacing: -.035em; }
#plan-activation-description { color: var(--fg-secondary); font-size: 14px; line-height: 1.5; }
.plan-checkout-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: var(--surface-alt); border-radius: 50%; color: var(--fg-secondary); cursor: pointer; font-size: 22px; }
.plan-checkout-total { display: flex; align-items: center; justify-content: space-between; background: var(--surface-alt); padding: 16px; border-radius: 12px; margin: 20px 0; font-size: 13px; }
.plan-checkout-total strong { font-size: 24px; letter-spacing: -.03em; }
#plan-activation-form { display: grid; gap: 16px; }
#plan-activation-form[hidden], #plan-checkout-result[hidden] { display: none; }
#plan-activation-form input { min-height: 46px; }
#plan-activation-form .feedback { margin: 0; min-height: 0; }
#plan-activation-form .button, #plan-checkout-result .button { min-height: 46px; width: 100%; border-radius: 12px; white-space: normal; }
.plan-checkout-shell > .plan-trust { margin-top: 20px; }
.pix-checkout-qr { display: block; width: min(220px, 100%); aspect-ratio: 1; height: auto; margin: 0 auto 18px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.pix-checkout-status { padding: 12px; background: var(--accent-soft); border-radius: 10px; color: var(--accent); font-size: 13px; line-height: 1.5; margin: 14px 0; }
.pix-checkout-code { width: 100%; min-height: 60px; font-family: monospace; font-size: 11px; resize: vertical; margin: 8px 0; }
.pix-checkout-help { font-size: 13px; color: var(--fg-secondary); line-height: 1.5; }
.pix-checkout-success { text-align: center; padding: 20px 0; }
.pix-checkout-success strong { font-size: 23px; color: var(--accent); }
@media (max-width: 800px) {
  .plan-card { grid-template-columns: 1fr; grid-template-areas: "head" "price" "caption" "benefits" "actions" "trust" "facts" "note"; padding: 24px; }
  .plan-benefits { padding: 12px 0; border: 0; }
}
@media (max-width: 560px) {
  .plan-card__head { flex-direction: column; }
  .plan-facts { grid-template-columns: 1fr; }
  .plan-checkout-shell { padding: 28px 20px 20px; }
}

/* ── finance.css ───────────────────────────────────────────────── */
.finance { max-width: 1200px; margin: 0 auto; }
.finance-demo-banner { display:inline-block; padding:6px 12px; margin:0 0 20px; background:var(--accent-soft); color:var(--accent); border-radius:6px; font-size:12px; font-weight:600; line-height:1.6; }
.finance-demo-banner[hidden] { display:none; }
#app-rail .sidebar-group { border-bottom:1px solid var(--border-light); padding:8px 0; }
#app-rail .sidebar-group > summary { display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; padding:10px 12px; font-size:12px; font-weight:650; color:var(--fg-secondary); border-radius:8px; }
#app-rail .sidebar-group > summary::-webkit-details-marker { display:none; }
#app-rail .sidebar-group > summary::after { content:'›'; font-size:18px; transform:rotate(0); transition:transform .15s; }
#app-rail .sidebar-group[open] > summary::after { transform:rotate(90deg); }
#app-rail .sidebar-group.has-active > summary { color:var(--accent); }
#app-rail .sidebar-group > summary:hover { background:var(--surface-alt); }
#app-rail .sidebar-group > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#app-rail .sidebar-subnav { display:grid; gap:2px; padding:0 0 4px 8px; }
#app-rail .sidebar-subnav .nav__link { min-height:38px; font-size:12px; }
#app-rail #nav-support { text-decoration:none; }
@media(max-width:990px) { #app-shell #app-main.board { padding-top:76px; } }
.finance-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
#app-shell .finance h1 { font-size:clamp(26px,3vw,36px); letter-spacing:-.04em; margin:0 0 8px; line-height:1.15; }
.finance-header p:not(.plan-eyebrow), .finance-register header p { margin:0; color:var(--fg-secondary); font-size:14px; line-height:1.6; }
.finance .button { min-height:42px; border-radius:10px; white-space:normal; }
.finance .button { scroll-margin-top:90px; }
.finance-header > div { flex:1; }
.finance-guide { padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:24px; }
.finance-guide summary { cursor:pointer; font-size:13px; color:var(--fg-secondary); font-weight:550; }
.finance-guide summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.finance-guide p { font-size:13px; line-height:1.6; color:var(--fg-secondary); margin:5px 0 0; max-width:90ch; }
.finance-filters { display:flex; gap:12px; align-items:end; }
.finance label { display:flex; flex-direction:column; gap:7px; color:var(--fg-secondary); font-size:12px; font-weight:550; }
.finance input, .finance select, .finance textarea { width:100%; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); color:var(--fg); font:inherit; font-size:14px; min-height:42px; padding:10px 12px; box-sizing:border-box; }
.finance input:focus-visible, .finance select:focus-visible, .finance textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.finance-search { flex:1; }
.finance-period-note, .finance-footnote { font-size:12px; line-height:1.6; color:var(--fg-tertiary); margin:12px 0 24px; }
.finance-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-bottom:16px; }
.finance-stat { padding:24px; border-right:1px solid var(--border); }
.finance-stat:last-child { border:0; }
.finance-stat:first-child { background:var(--accent-soft); }
.finance-stat span { display:block; font-size:12px; color:var(--fg-secondary); margin-bottom:12px; }
.finance-stat strong { display:block; font-size:clamp(22px,2.2vw,32px); font-variant-numeric:tabular-nums; letter-spacing:-.045em; color:var(--fg); white-space:nowrap; }
.finance-stat small { display:block; font-size:11px; color:var(--fg-tertiary); margin-top:10px; line-height:1.5; }
.finance-collection { display:flex; align-items:center; gap:20px; padding:0 4px 20px; color:var(--fg-secondary); font-size:12px; }
.finance-collection p { margin:0; }
.finance-collection progress { flex:1; min-width:60px; height:6px; appearance:none; border:0; border-radius:3px; background:var(--border); accent-color:var(--accent); }
.finance-collection progress::-webkit-progress-bar { background:var(--border); border-radius:3px; }
.finance-collection progress::-webkit-progress-value { background:var(--accent); border-radius:3px; }
.finance-collection progress::-moz-progress-bar { background:var(--accent); border-radius:3px; }
@media(max-width:600px) { .finance-collection { flex-wrap:wrap; gap:10px; } .finance-collection p { width:100%; } }
.finance-insights { display:flex; flex-wrap:wrap; gap:10px 24px; margin:0 0 28px; font-size:12px; color:var(--fg-secondary); }
.finance-insights strong { color:var(--fg); }
.finance-register { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.finance-register > header { display:flex; align-items:center; justify-content:space-between; padding:24px; gap:16px; }
.finance-register h2 { font-size:18px; margin:0 0 4px; letter-spacing:-.025em; }
#finance-count { font-size:12px; white-space:nowrap; color:var(--fg-secondary); }
.finance-row { display:grid; grid-template-columns:minmax(160px,1.4fr) minmax(120px,.85fr) minmax(110px,.75fr) minmax(140px,1fr) auto; align-items:center; gap:16px; padding:20px 24px; border-top:1px solid var(--border); }
.finance-row h3 { font-size:14px; margin:0 0 6px; word-break:break-word; }
.finance-row a { color:var(--accent); font-size:12px; text-decoration:none; }
.finance-row a:hover { text-decoration:underline; }
.finance-row small { display:block; color:var(--fg-tertiary); font-size:11px; line-height:1.6; }
.finance-row .finance-money { font-size:14px; color:var(--fg); font-variant-numeric:tabular-nums; }
.finance-stage { display:inline-block; font-size:11px; font-weight:600; padding:5px 9px; border-radius:6px; background:var(--surface-alt); color:var(--fg-secondary); }
.finance-stage[data-status=negotiating] { background:var(--accent-soft); color:var(--accent); }
.finance-stage[data-status=won] { background:color-mix(in srgb,var(--green) 10%,transparent); color:var(--green); }
.finance-row .finance-overdue { color:var(--red); }
.finance-pagination { display:flex; justify-content:flex-end; align-items:center; gap:16px; padding:16px 24px; border-top:1px solid var(--border); font-size:12px; }
#finance-feedback:not(:empty) { padding:24px; background:var(--surface-alt); font-size:14px; line-height:1.7; }
#finance-dialog { width:min(600px,calc(100vw - 32px)); box-sizing:border-box; border:1px solid var(--border); border-radius:20px; padding:28px; max-height:calc(100dvh - 32px); overflow:auto; color:var(--fg); background:var(--surface); }
#finance-dialog::backdrop { background:rgba(20,20,28,.4); backdrop-filter:blur(4px); }
.finance-editor-head { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:24px; }
.finance-editor-head h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.finance-editor-head button { font-size:22px; }
.finance-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
#finance-editor > .button { width:100%; }
#finance-editor-feedback { font-size:13px; line-height:1.5; color:var(--red); }
@media(max-width:1100px) { .finance-summary { grid-template-columns:1fr 1fr; } .finance-stat:nth-child(2) { border-right:0; } .finance-stat:nth-child(-n+2) { border-bottom:1px solid var(--border); } .finance-row { grid-template-columns:1fr 1fr; } .finance-row > :first-child { grid-column:1/-1; } }
@media(max-width:600px) { .finance-header { flex-wrap:wrap; align-items:start; gap:12px; } .finance-header > div { flex-basis:100%; } .finance-header > button { font-size:12px; padding:8px 12px; } .finance-guide { padding:16px; } .finance-filters { display:grid; grid-template-columns:1fr 1fr; } .finance-search { grid-column:1/-1; } .finance-filters > button { grid-column:1/-1; } .finance-stat { padding:16px; } .finance-stat strong { font-size:23px; } .finance-register > header,.finance-row { padding:20px 16px; } .finance-register header { align-items:start; flex-direction:column; } .finance-editor-grid { grid-template-columns:1fr; } #finance-dialog { padding:20px; } }

/* ── commercial.css ────────────────────────────────────────────── */
.commercial-header{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:28px}.commercial-header h1{font-size:clamp(25px,3vw,36px);letter-spacing:-.035em;margin:6px 0 10px}.commercial-header p{color:var(--fg-secondary);max-width:680px}.insight-selector{display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin:24px 0}.insight-selector label{display:grid;gap:8px;flex:1;min-width:200px;font-size:13px;font-weight:600}.insight-selector input,.insight-selector select{padding:12px;background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;color:var(--fg);min-width:0;width:100%}.insight-metrics,.insight-checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.insight-metrics article,.insight-checks article{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.insight-metrics article{display:grid;gap:12px}.insight-metrics strong{font-size:28px;font-variant-numeric:tabular-nums}.insight-metrics span,.insight-metrics>p{font-size:12px;color:var(--fg-secondary)}.insight-metrics>p{grid-column:1/-1;margin:0}.insight-report{display:grid;gap:28px}.insight-report p,.insight-report li{color:var(--fg-secondary);font-size:14px;line-height:1.65}.insight-report h2{font-size:21px}.insight-report h3{font-size:16px;margin:12px 0}.insight-tag{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}.insight-version{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}.insight-version>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.insight-report footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px;font-size:12px}.insight-feedback{min-height:24px;font-size:14px}.insight-quality{margin-top:20px}.insight-version code{font-size:11px;color:var(--fg-secondary)}
@media(max-width:1000px){.insight-metrics,.insight-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.commercial-header,.insight-version{flex-direction:column}.insight-checks{grid-template-columns:1fr}.insight-version>div:last-child{width:100%}.insight-version button{flex:1}.insight-selector label{min-width:100%}}
@media print{body *{visibility:hidden}#view-insights,#view-insights *{visibility:visible}#view-insights{position:absolute;left:0;top:0;width:100%;background:white;color:black}#view-insights button,#view-insights form{display:none}.insight-checks{grid-template-columns:repeat(2,1fr)}.insight-report section{break-inside:avoid}}

/* ── pipeline.css ──────────────────────────────────────────────── */
.pipeline{max-width:1240px;margin:0 auto;color:var(--fg,#202329);font-family:inherit;min-width:0}
.pipeline *{box-sizing:border-box}
.pipeline-header,.pipeline-actions,.pipeline-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pipeline-header{margin-bottom:20px}
.pipeline h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.035em;margin:4px 0 10px}
.pipeline h2{font-size:23px;margin:0;overflow-wrap:anywhere}
.pipeline h3{font-size:15px;margin:0 0 8px;overflow-wrap:anywhere}
.pipeline-header p,.pipeline-note,.pipeline small{color:var(--fg-secondary,#62666c);line-height:1.6}
.pipeline-note{font-size:13px}
.pipeline button{font:inherit;font-size:13px;min-height:42px;padding:10px 14px;cursor:pointer;border:1px solid var(--border-strong,#ccc);border-radius:9px;background:var(--surface,#fff);color:var(--fg,#202329)}
.pipeline button:hover{background:var(--surface-alt,#f4f4f4)}
.pipeline button:disabled{opacity:.5;cursor:default}
.pipeline :is(button,input,select,textarea):focus-visible{outline:2px solid var(--accent,#6659cf);outline-offset:3px}
.pipeline-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0}
.pipeline .pipeline-stat{padding:18px;min-width:0;border:1px solid var(--border,#ddd);background:var(--surface,#fff);border-radius:12px;text-align:left}
.pipeline-stat span{display:block;font-size:12px;color:var(--fg-secondary,#62666c);margin-bottom:10px}
.pipeline-stat strong{display:block;font-size:clamp(18px,2vw,26px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pipeline-filters{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
.pipeline label{display:flex;flex-direction:column;gap:7px;font-size:12px;min-width:0}
.pipeline :is(input,select,textarea){width:100%;min-width:0;min-height:42px;padding:10px;border:1px solid var(--border-strong,#ccc);border-radius:8px;font:inherit;font-size:14px;color:var(--fg,#202329);background:var(--surface,#fff)}
.pipeline-list{border:1px solid var(--border,#ddd);border-radius:12px;background:var(--surface,#fff)}
.pipeline-list:empty{display:none}
.pipeline-row{display:grid;grid-template-columns:1.5fr 1fr 1fr .8fr auto;gap:18px;align-items:center;padding:20px;border-bottom:1px solid var(--border,#ddd);overflow-wrap:anywhere}
.pipeline-row:last-child{border-bottom:0}
.pipeline-row>div{min-width:0}
.pipeline-row small{display:block;margin-top:5px;font-size:12px}
.pipeline-stage{font-size:12px;display:inline-block;background:var(--surface-alt,#f1f1f3);padding:6px 8px;border-radius:6px}
.pipeline-row .pipeline-overdue{color:var(--red,#b42318)}
.pipeline-pagination{justify-content:flex-end;margin:18px 0;font-size:13px}
#pipeline-feedback,#pipeline-editor-feedback,#pipeline-history-feedback{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
#pipeline-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:24px;border:1px solid var(--border,#ddd);border-radius:16px;color:var(--fg,#202329);background:var(--surface,#fff);overflow:auto}
#pipeline-dialog::backdrop{background:rgb(10 15 25 / .45)}
.pipeline-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pipeline-wide{grid-column:1/-1}
#pipeline-editor>[type=submit]{width:100%;background:var(--accent,#6659cf);color:var(--on-accent,#fff)}
#pipeline-history{padding-left:20px;font-size:13px}
#pipeline-history li{border-bottom:1px solid var(--border,#ddd);padding:12px 0;overflow-wrap:anywhere}
#pipeline-history p{margin:7px 0;white-space:pre-wrap;color:var(--fg-secondary,#62666c)}
.pipeline [hidden]{display:none!important}
@media(max-width:1000px){.pipeline-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.pipeline-row{grid-template-columns:repeat(2,minmax(0,1fr))}.pipeline-row>div:first-child{grid-column:1/-1}.pipeline-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pipeline-header{align-items:flex-start}.pipeline-actions{gap:8px}.pipeline-stat strong{font-size:20px}.pipeline .pipeline-stat{padding:14px}.pipeline-filters,.pipeline-editor-grid{grid-template-columns:minmax(0,1fr)}.pipeline-row{gap:12px;padding:16px}.pipeline-row>button{grid-column:1/-1}.pipeline-pagination{gap:8px;justify-content:center}#pipeline-dialog{padding:18px}.pipeline-wide{grid-column:auto}}

/* ── whatsapp-outreach.css ─────────────────────────────────────── */
#view-outreach { color: var(--fg); }
.outreach-shell { max-width: 1280px; margin: 0 auto; padding: clamp(16px, 3vw, 36px); }
.outreach-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.outreach-header h1 { margin: 4px 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.025em; }
.outreach-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.outreach-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.outreach-card { min-width: 0; padding: 24px; border: 1px solid var(--border-color, #d5dedc); border-radius: 16px; background: var(--bg-card, #fff); margin-bottom: 20px; }
.outreach-card h2 { margin-top: 0; font-size: 1.1rem; }
.outreach-shell button { padding: 10px 14px; border: 1px solid var(--border-color, #aabbb4); border-radius: 8px; background: var(--bg-card, #fff); color: inherit; cursor: pointer; min-height: 44px; font: inherit; font-size: .85rem; }
.outreach-shell button:disabled { opacity: .5; cursor: default; }
.outreach-shell button[type=submit] { background: #16654d; color: #fff; border-color: #16654d; }
.outreach-shell :focus-visible { outline: 3px solid #279376; outline-offset: 3px; }
.outreach-shell input:not([type=checkbox]), .outreach-shell textarea, .outreach-shell select { display: block; box-sizing: border-box; width: 100%; padding: 11px; color: inherit; background: var(--bg-primary, #f8faf9); border: 1px solid var(--border-color, #c3cfca); border-radius: 8px; font: inherit; margin: 6px 0 14px; }
.outreach-shell input[type=checkbox] { accent-color: #16654d; width: 18px; height: 18px; flex-shrink: 0; }
.outreach-shell fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.outreach-shell label { font-size: .88rem; }
.outreach-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.outreach-row input { flex: 1; min-width: 100px; }
.outreach-help, .outreach-card > p, .outreach-header p, .outreach-shell small { color: var(--text-secondary, #52635e); font-size: .83rem; line-height: 1.6; }
.outreach-lead { padding: 14px 0; border-bottom: 1px solid var(--border-color, #d5dedc); display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.outreach-lead label { display: flex; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; }
.outreach-lead small { display: block; }
.outreach-lead button { flex-shrink: 0; font-size: .72rem; padding: 8px; max-width: 118px; }
.outreach-shell pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .88rem; line-height: 1.7; }
.outreach-preview { padding: 18px; border-left: 3px solid #279376; background: var(--bg-primary, #f1f6f3); min-height: 75px; }
.outreach-consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; margin: 20px 0; }
.outreach-controls { justify-content: flex-start; margin-top: 16px; }
.outreach-history { padding: 0; list-style: none; }
.outreach-history li { padding: 18px 0; border-bottom: 1px solid var(--border-color, #d5dedc); overflow-wrap: anywhere; }
.outreach-history li > div { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.outreach-state { font-size: .75rem; font-weight: 600; }
.outreach-state[data-state=uncertain] { color: #ad6412; }
.outreach-shell summary { cursor: pointer; margin-top: 10px; font-size: .85rem; }
.outreach-shell [data-wa=feedback]:not(:empty) { padding: 12px; border: 1px solid var(--border-color, #c3cfca); border-radius: 8px; }
@media (min-width: 980px) { .outreach-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
@media (max-width: 480px) { .outreach-card { padding: 16px; } .outreach-header { flex-direction: column; } }

/* ── admin.css ─────────────────────────────────────────────────── */
/* Painel administrativo.
   O markup era quase todo estilo inline, e as abas eram pintadas pelo JS —
   o que impedia qualquer folha de estilo de agir. Aqui o JS volta a cuidar só
   do estado (classe e aria-selected) e a aparência vem daqui. */

#app-shell .admin-head { margin-bottom: 18px; }
#app-shell .admin-head h2 { margin: 0 0 4px; }
#app-shell .admin-head p { max-width: 62ch; margin: 0; color: var(--fg-secondary); font-size: 14px; line-height: 1.55; }

/* Controle segmentado no lugar das abas sublinhadas. */
#app-shell .admin-tabs {
  width: fit-content;
  margin-bottom: 20px;
  padding: 3px;
  display: flex;
  gap: 3px;
  background: var(--surface-alt);
  border: 0;
  border-radius: 999px;
}
#app-shell .admin-tabs .tab-button {
  min-height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--fg-secondary);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
#app-shell .admin-tabs .tab-button:hover { color: var(--fg); }
#app-shell .admin-tabs .tab-button[aria-selected="true"] {
  color: var(--fg);
  background: var(--surface);
  font-weight: 620;
  box-shadow: 0 1px 3px rgba(29, 29, 31, .1);
}

/* Cartões. */
#app-shell .admin-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
#app-shell .admin-card__title { margin: 0 0 4px; font-size: 15px; font-weight: 620; letter-spacing: -.016em; }
#app-shell .admin-card__hint { max-width: 64ch; margin: 0 0 16px; color: var(--fg-secondary); font-size: 12.5px; line-height: 1.55; }
#app-shell .admin-card--scroll { overflow-x: auto; }
#app-shell .admin-card--narrow { max-width: 620px; }

#app-shell .admin-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
#app-shell .admin-form { display: flex; flex-direction: column; gap: 13px; }
#app-shell .admin-form .button { width: 100%; }
#app-shell .admin-feedback { min-height: 16px; margin: 0; font-size: 12px; }

/* Tabela de clientes. */
#app-shell .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
#app-shell .admin-table th {
  padding: 0 10px 10px;
  color: var(--fg-tertiary);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
#app-shell .admin-table td { padding: 11px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
#app-shell .admin-table tr:last-child td { border-bottom: 0; }
#app-shell .admin-table tbody tr:hover { background: var(--surface-alt); }
#app-shell .admin-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#app-shell .admin-table__actions { text-align: right; white-space: nowrap; }

/* Selo de status: usado pelo app.js e, até aqui, sem estilo nenhum — os
   status apareciam como texto solto no meio da tabela. */
#app-shell .admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 620;
  white-space: nowrap;
}
#app-shell .admin-badge--active { color: var(--green); background: var(--green-soft); }
#app-shell .admin-badge--inactive { color: var(--red); background: var(--red-soft); }

/* Chaves de integração: rótulo e estado numa linha, campo e teste embaixo. */
#app-shell .admin-key { display: flex; flex-direction: column; gap: 7px; }
#app-shell .admin-key__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#app-shell .admin-key__label { color: var(--fg); font-size: 13px; font-weight: 550; }
#app-shell .admin-key__label code { color: var(--fg-tertiary); font-size: 11.5px; font-weight: 450; }
#app-shell .admin-key__status { color: var(--fg-tertiary); font-size: 11px; font-weight: 600; white-space: nowrap; }
#app-shell .admin-key__status[data-state="ok"] { color: var(--green); }
#app-shell .admin-key__status[data-state="error"] { color: var(--red); }
#app-shell .admin-key__row { display: flex; gap: 8px; }
#app-shell .admin-key__row input { flex: 1; min-width: 0; min-height: 38px; }
#app-shell .admin-key__row .button { min-height: 38px; padding-inline: 15px; white-space: nowrap; }

@media (max-width: 1180px) {
  #app-shell .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #app-shell .admin-key__row { flex-direction: column; }
  #app-shell .admin-key__row .button { width: 100%; }
}

/* ── responsive.css ────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .marketing-nav { grid-template-columns: 1fr auto; }
  .marketing-nav__links { display: none; }
  .marketing-hero { min-height: auto; gap: 44px; }
  .marketing-hero__copy { max-width: 720px; }
  .marketing-hero__visual { width: 100%; justify-self: center; }
  .marketing-process, .marketing-faq { grid-template-columns: 1fr; }
  .marketing-section-heading { position: static; }
  .marketing-section-heading h2 { max-width: 18ch; }
  .admin-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 990px) {
  .shell { display: block; }
  .mobile-app-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: 58px; padding: 0 14px; display: flex; align-items: center; gap: 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .mobile-app-header__toggle { min-width: 42px; min-height: 42px; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
  .mobile-app-header__title { font-size: 13px; font-weight: 800; letter-spacing: .05em; }
  .rail { position: fixed; inset: 0 auto 0 0; z-index: calc(var(--z-overlay) + 1); width: min(310px,88vw); height: 100dvh; display: flex; transform: translateX(-102%); transition: transform 180ms cubic-bezier(.16,1,.3,1); box-shadow: var(--shadow-lg); }
  .rail.open { transform: translateX(0); }
  .mobile-rail-close { position: absolute; top: 14px; right: 14px; min-width: 38px; min-height: 38px; display: grid; place-items: center; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: 50%; font-size: 22px; cursor: pointer; }
  .rail-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: block; opacity: 0; pointer-events: none; background: oklch(0.22 0.02 278 / .5); transition: opacity 160ms ease; }
  .rail-overlay.open { opacity: 1; pointer-events: auto; }
  .board { padding-top: 76px; }
}

@media (max-width: 767px) {
  .marketing-nav { width: 100%; padding-inline: 14px; min-height: 52px; }
  .marketing-nav__login { min-width: 76px; min-height: 40px; }
  .marketing-hero, .marketing-capability-strip, .marketing-outcome-note, .marketing-showcase, .marketing-process, .marketing-benefits, .marketing-goal, .marketing-final-cta, .marketing-footer { width: min(100% - 28px, 1100px); }
  .marketing-tension, .marketing-faq { width: 100%; padding-inline: 14px; }
  .marketing-hero { min-height: auto; padding-block: 40px 56px; gap: 36px; }
  .marketing-hero h1 { max-width: 16ch; font-size: clamp(33px, 8.6vw, 46px); line-height: 1.06; }
  .marketing-hero__target { font-size: .82em; line-height: 1.05; white-space: normal; }
  .marketing-hero__lede { font-size: 17px; }
  .marketing-hero__actions { align-items: stretch; }
  .marketing-capability-strip { grid-template-columns: 1fr 1fr; }
  .marketing-capability-strip span { padding: 14px 8px; }
  .marketing-capability-strip span:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .marketing-capability-strip span:nth-child(4) { border-top: 1px solid var(--border); }
  .marketing-outcome-note { margin-top: 14px; }
  .marketing-tension, .marketing-process, .marketing-benefits, .marketing-faq { padding-block: 60px; }
  .marketing-tension__grid { grid-template-columns: 1fr; }
  .marketing-message { min-height: 190px; }
  .marketing-showcase { padding-block: 60px; }
  .marketing-showcase__media { margin-top: 36px; }
  .marketing-process__list > li { grid-template-columns: 88px 1fr; gap: 18px; }
  .marketing-benefits__grid { grid-template-columns: 1fr; }
  .marketing-benefit, .marketing-benefit--wide, .marketing-benefit--accent, .marketing-benefit--dark { grid-column: 1; grid-row: auto; min-height: 216px; }
  .marketing-goal { min-height: auto; grid-template-columns: 1fr; align-items: start; border-radius: 20px; }
  .marketing-goal .button { justify-self: start; }
  .marketing-final-cta { min-height: 0; padding: 44px 24px; border-radius: 20px; }
  .marketing-footer { grid-template-columns: 1fr auto; }
  .marketing-footer p { display: none; }

  .shell { padding-bottom: 66px; }
  .board { padding: 72px 14px 84px; }
  .mobile-tab-bar { position: fixed; inset: auto 0 0; z-index: var(--z-nav); height: 66px; display: grid; grid-template-columns: repeat(5,1fr); background: var(--surface); border-top: 1px solid var(--border); }
  .mobile-tab-btn { min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--fg-secondary); background: transparent; border: 0; font-size: 9px; font-weight: 700; cursor: pointer; }
  .mobile-tab-btn svg { width: 19px; height: 19px; }
  .mobile-tab-btn.active { color: var(--accent); }
  .workflow-rail { padding: 17px; }
  .workflow-rail__heading { align-items: center; }
  .workflow-rail ol { display: flex; overflow-x: auto; }
  .workflow-rail li { flex: 0 0 142px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .metric:nth-child(4) { border-top: 1px solid var(--border); }
  .tickets { padding: 14px; }
  .tickets__header { align-items: flex-start; flex-direction: column; }
  .tickets__header > div:last-child { width: 100%; }
  #local-search { flex: 1; width: auto !important; min-height: 42px; }
  .mobile-kanban-tabs { margin-bottom: 14px; padding: 4px; display: flex; gap: 4px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); }
  .mobile-kanban-tab-btn { flex: 1; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--fg-secondary); background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; }
  .mobile-kanban-tab-btn.active { color: var(--accent); background: var(--surface); }
  .kanban-column { display: none; flex: 1 1 auto; width: 100%; min-width: 100%; }
  .kanban-column.active-tab { display: flex; }
  .batch-action-bar { bottom: 66px; min-height: 82px; padding: 10px 12px; }
  .batch-action-bar__content { align-items: stretch; flex-direction: column; gap: 8px; }
  .batch-action-bar__actions { overflow-x: auto; }
  .product-tour { right: 16px; bottom: 78px; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .bento-card, .bento-card--full { grid-column: 1; }
  .visual-flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
}

@media (max-width: 480px) {
  .marketing-hero__actions { flex-direction: column; }
  .marketing-hero__actions .button { width: 100%; }
  .marketing-showcase { padding-block: 48px; }
  .marketing-showcase__media figcaption { grid-template-columns: 1fr; padding-block: 4px; }
  .marketing-showcase__media figcaption span { min-height: 40px; display: grid; place-items: center; }
  .marketing-showcase__media figcaption span + span { border-left: 0; border-top: 1px solid var(--border); }
  .marketing-process__list > li { grid-template-columns: 1fr; gap: 10px; }
  .marketing-goal .button, .marketing-final-cta .button { width: 100%; }
  .marketing-footer { min-height: 160px; grid-template-columns: 1fr; align-content: center; }
  .marketing-footer__links { justify-self: start; flex-wrap: wrap; }
  .workflow-rail__heading h1 { font-size: 19px; }
  .ticket__action-group.primary-actions { grid-template-columns: 1fr; }
  .product-tour { left: 12px; right: 12px; width: auto; }
}

/* ── legal.css ─────────────────────────────────────────────────── */
.legal-page {
  min-height: 100vh;
  color: var(--fg);
  background: var(--bg);
}

.legal-header,
.legal-main,
.legal-footer {
  width: min(100% - 40px, 860px);
  margin-inline: auto;
}

.legal-header {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}

.legal-header a,
.legal-footer a { color: inherit; }

.legal-back {
  color: var(--fg-secondary) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.legal-main { padding-block: 72px 96px; }

.legal-main > p:first-of-type {
  max-width: 680px;
  color: var(--fg-secondary);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
}

.legal-main h1 {
  max-width: 720px;
  margin: 18px 0 22px;
  font-size: clamp(38px, 7vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
}

.legal-main h2 {
  margin: 46px 0 12px;
  font-size: 21px;
  letter-spacing: -.025em;
}

.legal-main p,
.legal-main li {
  color: var(--fg-secondary);
  font-size: 15px;
  line-height: 1.75;
}

.legal-main ul { padding-left: 20px; }
.legal-main a { color: var(--accent); }
.legal-meta { color: var(--fg-tertiary) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; }
.legal-callout { margin-top: 40px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.legal-footer { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); color: var(--fg-tertiary); font-size: 12px; }

@media (max-width: 640px) {
  .legal-header, .legal-footer { align-items: flex-start; flex-direction: column; justify-content: center; }
  .legal-main { padding-block: 48px 72px; }
}