/* ResiTrack — site público (ADR-0011, rebrand dark + lima, Trilha 1).
 *
 * Fontes auto-hospedadas + tokens do rebrand. Desde a consolidação de token
 * (DS Frente 1 / Passo 2, ADR-0017) este arquivo importa o `tokens.css` único
 * — o mesmo que o app interno usa. O antigo `tokens-dark.css` foi deletado
 * (era uma cópia paralela da mesma camada semântica). O visual dark do
 * público vem das regras abaixo consumindo os primitivos (`--rt-dark-*`,
 * `--rt-on-dark-*`, `--rt-surface-shell`), não de um re-map de tokens.
 * Ordem: fonts.css (@font-face) → tokens.css (--rt-*) → regras.
 */
@import url("fonts.ea6cfc369836.css");
@import url("tokens.e808a4e1647f.css");

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

html { scroll-behavior: smooth; }

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

.rt-public-body {
  margin: 0;
  background: var(--rt-surface-page-public);
  color: var(--rt-text-secondary);
  font-family: var(--rt-font-sans);
  font-size: var(--rt-text-md);
  line-height: var(--rt-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Links herdam a cor do texto ao redor — MAS com especificidade zero
   (`:where`), senão esta regra (antes 0,0,1,1) vencia `.rt-public-brand`,
   `.rt-link-muted` e `.rt-btn*` (0,0,1,0) e deixava a marca, o "Entrar" e
   os botões primários ilegíveis (cinza do corpo sobre o verde / sobre a
   lima). Agora quem define a própria cor sempre ganha; a nav e o rodapé
   (`.rt-public-nav a`, `.rt-footer-* a`, 0,0,1,1) também. */
.rt-public-body :where(a) { color: inherit; }

:focus-visible {
  outline: var(--rt-focus-light);
  outline-offset: 2px;
}

img,
svg { max-width: 100%; }

/* ============================================================
 * Layout — container
 * ============================================================ */
.rt-hero,
.rt-section,
.rt-page-hero,
.rt-public-messages,
.rt-header-inner,
.rt-footer-inner {
  width: 100%;
  max-width: var(--rt-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rt-gutter);
  padding-right: var(--rt-gutter);
}

/* Faixas que sangram a cor de fundo de ponta a ponta.
   O espaçamento vertical vem do filho (.rt-section / .rt-hero / .rt-page-hero). */
.rt-band--dark {
  background: var(--rt-surface-inverse);
  color: var(--rt-text-on-shell);
}
.rt-band--raised { background: var(--rt-dark-800); color: var(--rt-text-on-shell); }
.rt-band--cream { background: var(--rt-surface-page-public); }
.rt-band--cream-200 { background: var(--rt-cream-200); }

/* Âncoras de seção não ficam escondidas sob o header fixo */
[id] { scroll-margin-top: 84px; }

/* ============================================================
 * Barra de aviso (announcement)
 * ============================================================ */
.rt-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-4);
  padding: 9px var(--rt-gutter);
  background: var(--rt-lime-500);
  color: var(--rt-dark-900);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  text-align: center;
}
.rt-announce-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rt-dark-900);
}

/* ============================================================
 * Header
 * ============================================================ */
.rt-public-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--rt-surface-shell);
  border-bottom: 1px solid var(--rt-border-shell);
}

.rt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-6);
  min-height: 64px;
  padding-top: var(--rt-space-5);
  padding-bottom: var(--rt-space-5);
}

.rt-public-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-3);
  min-width: max-content;
  color: var(--rt-text-on-shell);
  text-decoration: none;
}

/* Símbolo da marca (ADR-0024) — componente ÚNICO, include _brand_mark.html.
   ATENÇÃO: regra duplicada de forma idêntica em resitrack-ui.css (as duas
   folhas não compartilham arquivo de regras; tokens.css só guarda variáveis).
   Alterou aqui, altere lá. */
.rt-brand-symbol {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  --rt-brand-bloco: var(--rt-lime-500);
  --rt-brand-nucleo: var(--rt-dark-900);
}
.rt-brand-symbol--sm { width: 20px; height: 20px; }
.rt-brand-symbol--claro {
  --rt-brand-bloco: var(--rt-dark-900);
  --rt-brand-nucleo: var(--rt-lime-500);
}
.rt-brand-symbol__bloco { fill: var(--rt-brand-bloco); }
.rt-brand-symbol__nucleo { fill: var(--rt-brand-nucleo); }

.rt-public-brand strong {
  font-size: var(--rt-text-19);
  font-weight: var(--rt-weight-bold);
  letter-spacing: var(--rt-tracking-tight);
  line-height: 1;
}
.rt-public-brand strong b { color: var(--rt-lime-500); font-weight: inherit; }
.rt-public-brand small {
  display: block;
  margin-top: 3px;
  color: var(--rt-on-dark-muted);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-2xs);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
}

.rt-public-nav {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  flex: 1;
  justify-content: center;
}
/* "Entrar" só existe dentro do menu mobile (ver @media ≤680px) */
.rt-public-nav-entrar { display: none; }

/* Botão "menu" — some no desktop, aparece no header ≤680px */
.rt-public-nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rt-border-shell);
  border-radius: var(--rt-radius-md);
  background: transparent;
  color: var(--rt-text-on-shell);
  cursor: pointer;
}
.rt-public-nav-toggle .rt-icon-close { display: none; }
.rt-nav-aberto .rt-public-nav-toggle .rt-icon-open { display: none; }
.rt-nav-aberto .rt-public-nav-toggle .rt-icon-close { display: block; }

.rt-public-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: var(--rt-radius-md);
  color: var(--rt-nav-idle-fg);
  padding: var(--rt-space-2) var(--rt-space-4);
  text-decoration: none;
  font-size: var(--rt-text-14);
  font-weight: var(--rt-weight-medium);
  transition: color var(--rt-transition), background var(--rt-transition);
}
.rt-public-nav a:hover { color: var(--rt-lime-500); }
.rt-public-nav a.ativo {
  color: var(--rt-lime-500);
  background: var(--rt-nav-hover-bg);
}

.rt-public-actions {
  display: flex;
  align-items: center;
  gap: var(--rt-space-5);
  min-width: max-content;
}

/* Link secundário sobre o header verde (ex.: "Entrar" / "Abrir sistema").
   Branco a 75% — legível, mas claramente subordinado ao botão lima. */
.rt-link-muted {
  color: var(--rt-text-on-shell-muted);
  text-decoration: none;
  font-size: var(--rt-text-14);
  font-weight: var(--rt-weight-medium);
}
.rt-link-muted:hover { color: var(--rt-lime-500); }

/* ============================================================
 * Botões
 * ============================================================ */
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-3);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--rt-radius-lg);
  padding: 13px 18px;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--rt-text-14);
  font-weight: var(--rt-weight-semibold);
  line-height: 1.15;
  cursor: pointer;
  transition: background var(--rt-transition), border-color var(--rt-transition),
              box-shadow var(--rt-transition);
}

.rt-btn--lg { min-height: 48px; padding: 15px 26px; font-size: var(--rt-text-15); }

.rt-btn-primary,
.rt-btn--primary {
  background: var(--rt-action-primary-bg);
  color: var(--rt-action-primary-fg);
}
.rt-btn-primary:hover,
.rt-btn--primary:hover { background: var(--rt-action-primary-hover-bg); }

.rt-btn--solid {
  background: var(--rt-action-solid-bg);
  color: var(--rt-action-solid-fg);
}
.rt-btn--solid:hover { background: var(--rt-action-solid-hover-bg); }

/* Secundário — herda a superfície: outline claro por padrão */
.rt-btn-secondary,
.rt-btn--outline-light {
  background: transparent;
  border-color: var(--rt-action-outline-border-light);
  color: var(--rt-action-outline-fg-light);
}
.rt-btn-secondary:hover,
.rt-btn--outline-light:hover { border-color: currentColor; }

/* Secundário sobre superfície dark */
.rt-band--dark .rt-btn-secondary,
.rt-band--raised .rt-btn-secondary,
.rt-btn--outline-dark {
  background: transparent;
  border-color: var(--rt-action-outline-border-dark);
  color: var(--rt-action-outline-fg-dark);
}
.rt-band--dark .rt-btn-secondary:hover,
.rt-band--raised .rt-btn-secondary:hover,
.rt-btn--outline-dark:hover { border-color: var(--rt-lime-500); color: var(--rt-lime-500); }

.rt-band--dark :focus-visible,
.rt-band--raised :focus-visible,
.rt-login-shell :focus-visible { outline: var(--rt-focus-dark); }

/* ============================================================
 * Links de conteúdo
 * ============================================================ */
.rt-link {
  color: var(--rt-text-link);
  text-decoration: none;
  font-weight: var(--rt-weight-semibold);
}
.rt-link:hover { color: var(--rt-text-link-hover); text-decoration: underline; }
.rt-band--dark .rt-link,
.rt-band--raised .rt-link { color: var(--rt-lime-500); }
.rt-band--dark .rt-link:hover,
.rt-band--raised .rt-link:hover { color: var(--rt-lime-600); }

/* ============================================================
 * Eyebrow (rótulo mono)
 * ============================================================ */
.rt-eyebrow {
  display: inline-block;
  margin-bottom: var(--rt-space-4);
  color: var(--rt-text-eyebrow);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-semibold);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
}
.rt-band--dark .rt-eyebrow,
.rt-band--raised .rt-eyebrow { color: var(--rt-text-eyebrow-on-shell); }

.rt-eyebrow--pill {
  padding: var(--rt-space-2) var(--rt-space-5);
  border: 1px solid var(--rt-lime-border);
  border-radius: var(--rt-radius-pill);
  color: var(--rt-lime-500);
}

/* ============================================================
 * Títulos
 * ============================================================ */
.rt-hero h1,
.rt-page-hero h1 {
  margin: 0;
  font-size: var(--rt-text-hero);
  line-height: var(--rt-lh-hero);
  letter-spacing: var(--rt-tracking-hero);
  font-weight: var(--rt-weight-bold);
  color: var(--rt-text-on-shell);
  text-wrap: balance;
}
.rt-page-hero h1 { color: var(--rt-text-primary); }
.rt-hero h1 .lime { color: var(--rt-lime-500); }

.rt-section h2,
.rt-section-head h2,
.rt-cta-final h2 {
  margin: 0;
  font-size: var(--rt-text-4xl);
  line-height: var(--rt-lh-title);
  letter-spacing: var(--rt-tracking-title);
  font-weight: var(--rt-weight-bold);
  color: var(--rt-text-primary);
  text-wrap: balance;
}
.rt-band--dark h2,
.rt-band--dark .rt-cta-final h2 { color: var(--rt-text-on-shell); }

.rt-hero p,
.rt-page-hero p,
.rt-section-head p,
.rt-cta-final p {
  color: var(--rt-text-muted);
  font-size: var(--rt-text-md);
  line-height: var(--rt-lh-body);
}
.rt-band--dark .rt-hero p,
.rt-band--dark .rt-section-head p,
.rt-band--dark .rt-cta-final p { color: var(--rt-on-dark-strong); }

.rt-muted { color: var(--rt-text-muted); }

/* ============================================================
 * Hero
 * ============================================================ */
.rt-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--rt-gap-hero);
  align-items: start;
  padding-top: var(--rt-space-15);
  padding-bottom: var(--rt-space-15);
}
.rt-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-9);
  align-items: flex-start;
}
.rt-hero p { max-width: 30em; margin: 0; }

.rt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-5);
}

.rt-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-5) var(--rt-space-8);
  padding-top: var(--rt-space-2);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  letter-spacing: var(--rt-tracking-label);
  color: var(--rt-on-dark-muted);
}
.rt-hero-proof span { display: inline-flex; align-items: center; gap: var(--rt-space-2); }
.rt-hero-proof span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rt-lime-500);
}

/* Grade de fundo do hero */
.rt-hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--rt-lime-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rt-lime-grid) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}
.rt-hero > .rt-hero-copy,
.rt-hero > .rt-hero-visual { position: relative; z-index: 1; }

/* ============================================================
 * Prévia do produto — chrome de browser + screenshot
 * ============================================================ */
.rt-hero-visual { align-self: stretch; }

.rt-product-mock {
  overflow: hidden;
  border: 1px solid var(--rt-lime-border);
  border-radius: var(--rt-radius-2xl);
  background: var(--rt-dark-800);
}

.rt-mock-chrome {
  display: flex;
  align-items: center;
  gap: var(--rt-space-2);
  padding: 11px var(--rt-space-6);
  background: var(--rt-dark-700);
  border-bottom: 1px solid var(--rt-border-shell);
}
.rt-mock-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(251, 250, 247, .22);
}
.rt-mock-url {
  margin-left: var(--rt-space-4);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-2xs);
  color: var(--rt-on-dark-faint);
}

.rt-mock-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 392px;
  background: var(--rt-stripe-dark);
  text-align: center;
}
.rt-mock-screen span {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  line-height: 1.7;
  letter-spacing: var(--rt-tracking-label);
  color: rgba(215, 242, 107, .6);
}

/* ============================================================
 * Seções genéricas
 * ============================================================ */
.rt-section { padding-top: var(--rt-space-14); padding-bottom: var(--rt-space-14); }
/* faixas de mesma cor encostadas: não dobrar o respiro entre elas */
.rt-band--cream + .rt-band--cream > .rt-section { padding-top: 0; }
.rt-section-head { max-width: 44rem; margin-bottom: var(--rt-space-10); }
.rt-section-head--between {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rt-space-9);
}
.rt-section-head--between .rt-section-note {
  max-width: 20rem;
  text-align: right;
  color: var(--rt-text-muted);
  font-size: var(--rt-text-14);
  line-height: var(--rt-lh-body);
}
.rt-band--dark .rt-section-head--between .rt-section-note { color: var(--rt-on-dark-muted); }

/* ============================================================
 * "Feito para" — faixa de setores
 * ============================================================ */
.rt-sectors {
  display: flex;
  align-items: center;
  gap: var(--rt-space-9);
  flex-wrap: wrap;
  padding-top: var(--rt-space-9);
  padding-bottom: var(--rt-space-9);
}
.rt-sectors > .rt-eyebrow { margin-bottom: 0; white-space: nowrap; color: var(--rt-on-dark-muted); }
.rt-sectors ul {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--rt-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-sectors li {
  display: flex;
  align-items: center;
  padding: var(--rt-space-5) var(--rt-space-7);
  border: 1px solid var(--rt-border-shell);
  border-radius: var(--rt-radius-md);
  font-size: var(--rt-text-base);
  font-weight: var(--rt-weight-medium);
  color: var(--rt-on-dark-strong);
}

/* ============================================================
 * "O produto" — bloco de duas colunas
 * ============================================================ */
.rt-product-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rt-space-13);
  align-items: start;
}
.rt-product-block .rt-prose p {
  margin: 0 0 var(--rt-space-8);
  font-size: var(--rt-text-md);
  line-height: var(--rt-lh-relaxed);
  color: var(--rt-text-secondary);
}
.rt-product-block .rt-prose p:last-child { margin-bottom: 0; }

.rt-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-8) var(--rt-space-12);
  margin-top: var(--rt-space-9);
}
.rt-stat { display: flex; flex-direction: column; gap: 2px; }
.rt-stat-value {
  font-size: var(--rt-text-xl);
  font-weight: var(--rt-weight-bold);
  letter-spacing: var(--rt-tracking-tight);
  color: var(--rt-green-700);
}
.rt-stat-label { font-size: var(--rt-text-sm); color: var(--rt-text-muted); }

/* ============================================================
 * Benefícios
 * ============================================================ */
.rt-benefit-list { display: grid; gap: var(--rt-space-5); }
.rt-benefit-list div {
  display: flex;
  gap: var(--rt-space-5);
  align-items: flex-start;
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-xl);
  background: var(--rt-surface-card);
  padding: var(--rt-space-7);
  font-size: var(--rt-text-14);
  color: var(--rt-text-secondary);
}
.rt-benefit-list svg {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  color: var(--rt-green-700);
}

/* ============================================================
 * Grade de módulos (ModuleCard)
 * ============================================================ */
.rt-feature-grid,
.rt-module-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rt-gap-card-public);
}
.rt-module-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.rt-module-card {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-4);
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-xl);
  background: var(--rt-surface-card);
  padding: var(--rt-space-10);
}
.rt-module-card--muted {
  background: var(--rt-surface-card-muted);
}
.rt-module-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-4);
}
.rt-module-card h2,
.rt-module-card h3 {
  margin: 0;
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-semibold);
  color: var(--rt-text-primary);
  line-height: var(--rt-lh-snug);
}
.rt-module-card p {
  margin: 0;
  font-size: var(--rt-text-base);
  line-height: var(--rt-lh-snug);
  color: var(--rt-text-muted);
}

/* Selo de tier de plano (GRATUITO / PRO / ENTERPRISE) */
.rt-tier {
  display: inline-block;
  flex: none;
  padding: 3px 7px;
  border-radius: var(--rt-radius-xs);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-2xs);
  font-weight: var(--rt-weight-semibold);
  letter-spacing: var(--rt-tracking-chip);
  text-transform: uppercase;
  white-space: nowrap;
}
.rt-tier--gratuito   { background: var(--rt-tier-free-bg); color: var(--rt-tier-free-fg); }
.rt-tier--pro        { background: var(--rt-tier-pro-bg);  color: var(--rt-tier-pro-fg); }
.rt-tier--enterprise { background: var(--rt-tier-ent-bg);  color: var(--rt-tier-ent-fg); }

/* ============================================================
 * Ciclo rastreado
 * ============================================================ */
.rt-cycle {
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-2xl);
  overflow: hidden;
}
.rt-cycle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rt-space-5);
  padding: var(--rt-space-9) var(--rt-space-10);
  background: var(--rt-surface-card-muted);
  border-bottom: 1px solid var(--rt-border-default);
}
.rt-cycle-title {
  font-size: var(--rt-text-lg);
  font-weight: var(--rt-weight-semibold);
  color: var(--rt-text-primary);
}
.rt-cycle-lote {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  color: var(--rt-text-muted);
}
.rt-cycle-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.rt-cycle-step {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-3);
  padding: var(--rt-space-10) var(--rt-space-9);
  border-right: 1px solid var(--rt-border-faint);
  background: var(--rt-surface-card);
}
.rt-cycle-step:last-child { border-right: none; }
.rt-cycle-step .num {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  color: var(--rt-text-link);
}
.rt-cycle-step h4 {
  margin: 0;
  font-size: var(--rt-text-15);
  font-weight: var(--rt-weight-semibold);
  color: var(--rt-text-primary);
}
.rt-cycle-step p {
  margin: 0;
  font-size: var(--rt-text-13);
  line-height: var(--rt-lh-app);
  color: var(--rt-text-muted);
}
.rt-cycle-step--final {
  background: var(--rt-green-700);
}
.rt-cycle-step--final .num { color: var(--rt-lime-500); }
.rt-cycle-step--final h4 { color: var(--rt-on-dark); }
.rt-cycle-step--final p { color: rgba(251, 250, 247, .72); }

/* ============================================================
 * Prévias da interface (showcase de vídeo / screenshots)
 * ============================================================ */
.rt-showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--rt-gap-card-public);
}
.rt-showcase-side { display: flex; flex-direction: column; gap: var(--rt-gap-card-public); }
.rt-showcase figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rt-border-strong);
  border-radius: var(--rt-radius-xl);
  overflow: hidden;
  background: var(--rt-surface-card-muted);
}
.rt-showcase-side figure { flex: 1; }
.rt-showcase figcaption {
  padding: var(--rt-space-6) var(--rt-space-8);
  border-top: 1px solid var(--rt-border-default);
  font-size: var(--rt-text-13);
  color: var(--rt-text-secondary);
}

.rt-media-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  background: var(--rt-stripe-cream);
  text-align: center;
}
.rt-media-ph--video { min-height: 330px; }
.rt-showcase-main .rt-media-ph { flex: 1; }
.rt-media-ph span {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  line-height: 1.7;
  color: var(--rt-text-muted);
}

/* ============================================================
 * CTA final
 * ============================================================ */
.rt-cta-final {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rt-space-6);
}
.rt-cta-final p { max-width: 40rem; }

/* ============================================================
 * Page hero (páginas internas do site)
 * ============================================================ */
.rt-page-hero {
  max-width: 52rem;
  text-align: center;
  padding-top: var(--rt-space-15);
  padding-bottom: var(--rt-space-11);
}
.rt-page-hero .rt-eyebrow { display: inline-block; }
.rt-page-hero p { margin: var(--rt-space-6) auto 0; }
.rt-page-hero--narrow { max-width: 42rem; }

/* ============================================================
 * Timeline (Como funciona)
 * ============================================================ */
.rt-timeline { display: grid; gap: var(--rt-space-6); }
.rt-timeline article {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--rt-space-8);
  align-items: start;
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-2xl);
  background: var(--rt-surface-card);
  padding: var(--rt-space-9);
}
.rt-timeline article > span {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--rt-radius-lg);
  background: var(--rt-green-700);
  color: var(--rt-lime-500);
  font-family: var(--rt-font-mono);
  font-weight: var(--rt-weight-semibold);
}
.rt-timeline h2 {
  margin: 0 0 var(--rt-space-2);
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-semibold);
  color: var(--rt-text-primary);
}
.rt-timeline p { margin: 0; color: var(--rt-text-muted); font-size: var(--rt-text-14); }

/* ============================================================
 * Planos (PlanCard)
 * ============================================================ */
.rt-plan-note {
  border: 1px solid var(--rt-border-shell);
  border-radius: var(--rt-radius-xl);
  background: var(--rt-dark-800);
  padding: var(--rt-space-8) var(--rt-space-9);
  margin-bottom: var(--rt-space-9);
  color: var(--rt-on-dark-strong);
  font-size: var(--rt-text-14);
  line-height: var(--rt-lh-body);
}

.rt-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rt-gap-card-public);
  align-items: start;
}
.rt-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-8);
  border: 1px solid var(--rt-border-shell);
  border-radius: var(--rt-radius-2xl);
  background: var(--rt-surface-shell-raised);
  padding: var(--rt-space-10);
  color: var(--rt-on-dark-strong);
}
.rt-plan-head { display: flex; flex-direction: column; gap: var(--rt-space-2); }
.rt-plan-card h2 {
  margin: 0;
  font-size: var(--rt-text-19);
  font-weight: var(--rt-weight-semibold);
  color: var(--rt-on-dark);
}
.rt-plan-card .rt-plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--rt-space-2);
  margin: 0;
}
.rt-plan-card .rt-plan-price b {
  font-size: var(--rt-text-price);
  font-weight: var(--rt-weight-bold);
  letter-spacing: var(--rt-tracking-title);
  color: var(--rt-on-dark);
}
.rt-plan-card .rt-plan-price small { font-size: var(--rt-text-base); color: var(--rt-on-dark-muted); }
.rt-plan-card p { margin: 0; font-size: var(--rt-text-sm); color: var(--rt-on-dark-muted); }
/* "Sem emissão de MTR" etc. — de-ênfase, mas ainda AA (.55 ≈ 5,4:1) */
.rt-plan-item--off { color: var(--rt-on-dark-muted); }
.rt-plan-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  font-size: var(--rt-text-sm);
  line-height: 1.45;
  color: var(--rt-on-dark-strong);
}
.rt-plan-card li { display: flex; gap: var(--rt-space-3); }
.rt-plan-card li::before { content: "\2192"; color: var(--rt-lime-500); }
.rt-plan-card .rt-btn { width: 100%; }

.rt-plan-card.destaque {
  background: var(--rt-surface-accent);
  border-color: transparent;
  color: rgba(11, 42, 36, .8);
}
.rt-plan-card.destaque h2,
.rt-plan-card.destaque .rt-plan-price { color: var(--rt-dark-900); }
/* No card em destaque (fundo lima) o preço e o sufixo herdavam o branco
   das regras genéricas (.rt-plan-price b / small) — ilegível. Força escuro. */
.rt-plan-card.destaque .rt-plan-price b { color: var(--rt-dark-900); }
.rt-plan-card.destaque .rt-plan-price small { color: rgba(11, 42, 36, .72); }
.rt-plan-card.destaque p,
.rt-plan-card.destaque ul { color: rgba(11, 42, 36, .78); }
.rt-plan-card.destaque li::before { color: var(--rt-green-700); }
/* Botão verde sólido sobre o card lima: garante o texto claro (a cor
   herdada do card, rgba(11,42,36,.8), o deixava escuro-sobre-escuro). */
.rt-plan-card.destaque .rt-btn--solid { color: var(--rt-cream-50); }

.rt-plan-badge {
  position: absolute;
  top: -11px;
  left: var(--rt-space-10);
  padding: 4px 10px;
  border-radius: var(--rt-radius-pill);
  background: var(--rt-dark-900);
  color: var(--rt-lime-500);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-2xs);
  letter-spacing: var(--rt-tracking-chip);
  text-transform: uppercase;
}

/* ============================================================
 * Formulário público (Solicitar acesso)
 * ============================================================ */
.rt-form-shell {
  max-width: 58rem;
  margin: 0 auto;
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-2xl);
  background: var(--rt-surface-card);
  box-shadow: var(--rt-shadow-frame);
  padding: var(--rt-space-11);
}
.rt-public-form { margin: 0; }
.rt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rt-space-7);
}
.rt-form-field { display: grid; gap: var(--rt-space-2); align-content: start; }
.rt-form-field.span-2 { grid-column: 1 / -1; }
.rt-form-field label,
.rt-check-line span {
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
  color: var(--rt-text-secondary);
}
.rt-form-field small { font-size: var(--rt-text-xs); color: var(--rt-text-muted); }

.rt-public-input {
  width: 100%;
  min-height: var(--rt-field-h);
  border: 1px solid var(--rt-border-field);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-surface-input);
  color: var(--rt-text-primary);
  padding: 12px 14px;
  font: inherit;
  font-size: var(--rt-text-14);
}
.rt-public-input::placeholder { color: var(--rt-text-disabled); }
textarea.rt-public-input { resize: vertical; min-height: 120px; }
.rt-public-input:focus-visible {
  outline: none;
  border-color: var(--rt-green-700);
  box-shadow: var(--rt-focus-ring-light);
}

.rt-check-line {
  display: flex;
  gap: var(--rt-space-3);
  align-items: flex-start;
  grid-column: 1 / -1;
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-surface-card-muted);
  padding: var(--rt-space-6);
}
.rt-check-line span { color: var(--rt-text-muted); font-weight: var(--rt-weight-regular); line-height: var(--rt-lh-app); }
.rt-public-check { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--rt-green-700); }

.rt-field-error,
.rt-form-alert {
  border: 1px solid var(--rt-feedback-error-border);
  border-radius: var(--rt-radius-md);
  background: var(--rt-feedback-error-bg);
  color: var(--rt-feedback-error-fg);
  padding: var(--rt-space-3) var(--rt-space-4);
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
}
.rt-form-alert { grid-column: 1 / -1; margin-bottom: var(--rt-space-5); }

.rt-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--rt-space-4);
  margin-top: var(--rt-space-9);
}

/* ============================================================
 * Mensagens (django messages)
 * ============================================================ */
.rt-public-messages { padding-top: var(--rt-space-8); }
.rt-public-message {
  display: flex;
  gap: var(--rt-space-3);
  border: 1px solid var(--rt-feedback-success-border);
  border-radius: var(--rt-radius-xl);
  background: var(--rt-feedback-success-bg);
  color: var(--rt-feedback-success-fg);
  padding: var(--rt-space-6) var(--rt-space-7);
  font-size: var(--rt-text-14);
  font-weight: var(--rt-weight-medium);
}
.rt-public-message.error {
  border-color: var(--rt-feedback-error-border);
  background: var(--rt-feedback-error-bg);
  color: var(--rt-feedback-error-fg);
}

/* ============================================================
 * Página "obrigado"
 * ============================================================ */
.rt-thankyou {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rt-space-5);
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-2xl);
  background: var(--rt-surface-card);
  box-shadow: var(--rt-shadow-frame);
  padding: var(--rt-space-13);
}
.rt-thankyou h1 {
  margin: 0;
  font-size: var(--rt-text-3xl);
  font-weight: var(--rt-weight-bold);
  letter-spacing: var(--rt-tracking-title);
  color: var(--rt-text-primary);
}
.rt-thankyou p { margin: 0; color: var(--rt-text-muted); font-size: var(--rt-text-md); }
.rt-thankyou-note {
  margin: 0;
  max-width: 34rem;
  color: var(--rt-text-muted);
  font-size: var(--rt-text-sm);
  line-height: var(--rt-lh-body);
}
.rt-thankyou-note a { color: var(--rt-text-link); font-weight: var(--rt-weight-medium); }
.rt-success-mark {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--rt-green-700);
  color: var(--rt-lime-500);
}
.rt-success-mark svg { width: 26px; height: 26px; }
.rt-hero-actions.centered { justify-content: center; }

/* ============================================================
 * Footer
 * ============================================================ */
.rt-public-footer {
  background: var(--rt-surface-shell);
  color: var(--rt-on-dark-muted);
}
.rt-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--rt-space-12);
  padding-top: var(--rt-space-13);
  padding-bottom: var(--rt-space-13);
}
.rt-footer-brand { display: flex; flex-direction: column; gap: var(--rt-space-5); }
.rt-footer-brand p {
  margin: 0;
  max-width: 18rem;
  font-size: var(--rt-text-13);
  line-height: var(--rt-lh-body);
  color: var(--rt-on-dark-muted);
}
.rt-footer-powered { color: inherit; text-decoration: none; }
.rt-footer-powered:hover { color: var(--rt-lime-500); }
.rt-footer-legal { display: flex; flex-wrap: wrap; gap: var(--rt-space-2); }
.rt-footer-legal a { color: var(--rt-on-dark-muted); text-decoration: none; }
.rt-footer-legal a:hover { color: var(--rt-lime-500); }
.rt-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-4);
  font-size: var(--rt-text-base);
}
.rt-footer-col strong {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-2xs);
  font-weight: var(--rt-weight-semibold);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rt-text-eyebrow-on-shell);
}
.rt-footer-col a { color: var(--rt-on-dark-muted); text-decoration: none; }
.rt-footer-col a:hover { color: var(--rt-lime-500); }

/* ============================================================
 * Login
 * ============================================================ */
.rt-public-body.rt-login-page { background: var(--rt-surface-shell); }

.rt-login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--rt-space-9);
  align-items: stretch;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--rt-space-15) var(--rt-gutter);
}
.rt-login-panel,
.rt-login-card {
  border: 1px solid var(--rt-border-shell);
  border-radius: var(--rt-radius-2xl);
  background: var(--rt-dark-800);
  padding: var(--rt-space-12);
}
.rt-login-panel { display: flex; flex-direction: column; gap: var(--rt-space-6); }
.rt-login-panel h1,
.rt-login-card h1 {
  margin: 0;
  font-size: var(--rt-text-2xl);
  font-weight: var(--rt-weight-bold);
  letter-spacing: var(--rt-tracking-title);
  color: var(--rt-on-dark);
}
.rt-login-panel p,
.rt-login-card p { color: var(--rt-on-dark-muted); font-size: var(--rt-text-14); margin: 0; }
.rt-login-panel .rt-benefit-list div {
  background: transparent;
  border-color: var(--rt-border-shell);
  color: var(--rt-on-dark-strong);
}
.rt-login-panel .rt-benefit-list svg { color: var(--rt-lime-500); }

.rt-login-form { display: grid; gap: var(--rt-space-6); margin-top: var(--rt-space-8); }
.rt-login-field { display: grid; gap: var(--rt-space-2); }
.rt-login-field label {
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
  color: var(--rt-on-dark-strong);
}
.rt-login-field input {
  width: 100%;
  min-height: var(--rt-field-h);
  border: 1px solid var(--rt-border-on-dark-soft);
  border-radius: var(--rt-radius-lg);
  background: rgba(251, 250, 247, .05);
  color: var(--rt-on-dark);
  padding: 12px 14px;
  font: inherit;
  font-size: var(--rt-text-14);
}
.rt-login-field input:focus-visible {
  outline: none;
  border-color: var(--rt-lime-500);
  box-shadow: var(--rt-focus-ring-dark);
}
.rt-login-form .rt-btn { width: 100%; }

.rt-login-alert {
  border: 1px solid var(--rt-feedback-error-border);
  border-radius: var(--rt-radius-md);
  background: var(--rt-feedback-error-bg);
  color: var(--rt-feedback-error-fg);
  padding: var(--rt-space-5);
  font-size: var(--rt-text-14);
  font-weight: var(--rt-weight-medium);
}
.rt-login-note {
  margin-top: var(--rt-space-6);
  padding: var(--rt-space-4);
  border-radius: var(--rt-radius-md);
  background: var(--rt-nav-hover-bg);
  color: var(--rt-on-dark-muted);
  font-size: var(--rt-text-13);
}
.rt-login-links {
  display: flex;
  justify-content: space-between;
  gap: var(--rt-space-5);
  margin-top: var(--rt-space-7);
  font-size: var(--rt-text-14);
}
.rt-login-links a { color: var(--rt-lime-500); font-weight: var(--rt-weight-semibold); text-decoration: none; }
.rt-login-links a:hover { color: var(--rt-lime-600); }
.rt-login-eyebrow { color: var(--rt-text-eyebrow-on-shell); }

.rt-login-foot {
  margin-top: var(--rt-space-8);
  padding-top: var(--rt-space-6);
  border-top: 1px solid var(--rt-border-shell);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  letter-spacing: var(--rt-tracking-label);
  color: var(--rt-on-dark-faint);
}

/* ============================================================
 * Cadastro (Criar conta) — painel esquerdo da tela 02
 * ============================================================ */
.rt-signup {
  max-width: 46rem;
  margin: 0 auto;
  border: 1px solid var(--rt-border-default);
  border-radius: var(--rt-radius-2xl);
  background: var(--rt-surface-card);
  box-shadow: var(--rt-shadow-frame);
  padding: var(--rt-space-12) var(--rt-space-13);
}
.rt-signup-head { display: flex; flex-direction: column; gap: var(--rt-space-2); margin-bottom: var(--rt-space-10); }
.rt-signup-head h1 {
  margin: 0;
  font-size: var(--rt-text-2xl);
  font-weight: var(--rt-weight-bold);
  letter-spacing: var(--rt-tracking-title);
  color: var(--rt-text-primary);
}
.rt-signup-head p { margin: 0; color: var(--rt-text-muted); font-size: var(--rt-text-14); }
.rt-signup-note {
  margin-top: var(--rt-space-4) !important;
  padding: var(--rt-space-5) var(--rt-space-6);
  border: 1px solid var(--rt-border-default);
  border-left: 3px solid var(--rt-green-600);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-surface-card-muted);
  font-size: var(--rt-text-sm) !important;
  line-height: var(--rt-lh-body);
}
.rt-check-line span a { color: var(--rt-text-link); font-weight: var(--rt-weight-medium); }
.rt-form-actions--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--rt-space-5);
  margin-top: var(--rt-space-9);
}
.rt-form-actions--stack .rt-btn { width: 100%; }
.rt-signup-alt { text-align: center; font-size: var(--rt-text-14); color: var(--rt-text-muted); }
.rt-signup-alt a { color: var(--rt-text-link); font-weight: var(--rt-weight-semibold); }

/* Estado ocupado do submit (spec P6-criar-conta §2.6) — sem spinner novo. */
.rt-btn:disabled,
.rt-btn[aria-busy="true"] { opacity: 0.7; cursor: not-allowed; }

/* ------------------------------------------------------------
 * Cadastro — código de convite no topo do form (spec §2.2, §6)
 * Mesma anatomia visual de .rt-signup-note (borda esquerda verde,
 * fundo destacado), só que com espaço pra um input dentro.
 * ------------------------------------------------------------ */
.rt-invite-gate {
  display: grid;
  gap: var(--rt-space-3);
  margin-bottom: var(--rt-space-9);
  padding: var(--rt-space-6) var(--rt-space-7);
  border: 1px solid var(--rt-border-default);
  border-left: 3px solid var(--rt-green-600);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-surface-card-muted);
}
.rt-invite-gate__label {
  margin: 0;
  color: var(--rt-text-secondary);
  font-size: var(--rt-text-sm);
  line-height: var(--rt-lh-body);
}
.rt-invite-gate label[for] {
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
  color: var(--rt-text-secondary);
}
.rt-invite-gate__hint {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: var(--rt-text-xs);
}
.rt-invite-gate__hint a { color: var(--rt-text-link); font-weight: var(--rt-weight-medium); }

/* ------------------------------------------------------------
 * Seções do form público longo (spec §2, §6) — genérico, reaproveitável
 * por qualquer form público futuro com mais de ~5 campos.
 * ------------------------------------------------------------ */
.rt-form-section {
  margin: var(--rt-space-9) 0 0;
  padding: var(--rt-space-8) 0 0;
  border: 0;
  border-top: 1px solid var(--rt-border-default);
}
.rt-form-section:first-of-type { margin-top: var(--rt-space-8); }
.rt-form-section__legend {
  display: block;
  margin: 0 0 var(--rt-space-6);
  padding: 0;
  color: var(--rt-text-eyebrow);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-semibold);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
}

.rt-form-field__optional {
  margin-left: var(--rt-space-2);
  color: var(--rt-text-muted);
  font-weight: var(--rt-weight-regular);
  font-size: var(--rt-text-xs);
  text-transform: none;
}

/* Erro por campo — mesmo token que o app interno já usa pra essa mesma
 * finalidade (.rt-field.is-invalid .rt-field__control em resitrack-ui.css).
 * Aqui o modificador entra no wrapper (.rt-form-field/.rt-invite-gate),
 * não no widget em si — os widgets do site público já vêm com a classe
 * "rt-public-input" fixada em forms.py (fora do escopo desta mudança). */
.rt-form-field.is-invalid .rt-public-input,
.rt-invite-gate.is-invalid .rt-public-input {
  border-color: var(--rt-feedback-error-fg);
}
.rt-check-line.is-invalid { border-color: var(--rt-feedback-error-fg); }

.rt-form-field small a { color: var(--rt-text-link); font-weight: var(--rt-weight-medium); }

/* ------------------------------------------------------------
 * Mostrar/ocultar senha (spec §2.4, §6) — só existe no DOM se o JS
 * injetar o botão (progressive enhancement, public-cadastro.js).
 * ------------------------------------------------------------ */
.rt-password-field { position: relative; }
.rt-password-field .rt-public-input { padding-right: 48px; }
.rt-password-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
  color: var(--rt-text-muted);
  cursor: pointer;
  border-radius: var(--rt-radius-md);
}
.rt-password-toggle:hover { color: var(--rt-text-secondary); }
.rt-password-toggle:focus-visible {
  outline: none;
  box-shadow: var(--rt-focus-ring-light);
}
.rt-password-toggle svg { width: 18px; height: 18px; }

.rt-password-match { display: block; font-size: var(--rt-text-xs); min-height: 1em; }
.rt-password-match.is-match { color: var(--rt-feedback-success-fg); }
.rt-password-match.is-mismatch { color: var(--rt-feedback-error-fg); }

/* ============================================================
 * Páginas legais (Termos de Uso / Política de Privacidade)
 * ============================================================ */
.rt-legal { max-width: 46rem; margin: 0 auto; }
.rt-legal-banner {
  margin: 0 auto var(--rt-space-11);
  max-width: 46rem;
  padding: var(--rt-space-6) var(--rt-space-7);
  border: 1px solid var(--rt-feedback-warning-border);
  border-left: 3px solid var(--rt-alert);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-feedback-warning-bg);
  color: var(--rt-feedback-warning-fg);
  font-size: var(--rt-text-sm);
  line-height: var(--rt-lh-body);
}
.rt-legal h2 {
  margin: var(--rt-space-12) 0 var(--rt-space-5);
  font-size: var(--rt-text-19);
  font-weight: var(--rt-weight-bold);
  letter-spacing: var(--rt-tracking-title);
  color: var(--rt-text-primary);
}
.rt-legal h2:first-child { margin-top: 0; }
.rt-legal h3 {
  margin: var(--rt-space-9) 0 var(--rt-space-3);
  font-size: var(--rt-text-15);
  font-weight: var(--rt-weight-semibold);
  color: var(--rt-text-primary);
}
.rt-legal p,
.rt-legal li {
  font-size: var(--rt-text-14);
  line-height: var(--rt-lh-relaxed);
  color: var(--rt-text-secondary);
}
.rt-legal p { margin: 0 0 var(--rt-space-5); }
.rt-legal ul { margin: 0 0 var(--rt-space-5); padding-left: var(--rt-space-9); }
.rt-legal li { margin-bottom: var(--rt-space-2); }
.rt-legal a { color: var(--rt-text-link); }
.rt-legal-updated {
  margin-top: var(--rt-space-12);
  padding-top: var(--rt-space-6);
  border-top: 1px solid var(--rt-border-default);
  font-size: var(--rt-text-sm);
  color: var(--rt-text-muted);
}

/* ============================================================
 * Responsivo
 * ============================================================ */
@media (max-width: 1000px) {
  .rt-hero { grid-template-columns: 1fr; }
  .rt-product-block,
  .rt-showcase,
  .rt-login-shell { grid-template-columns: 1fr; }
  .rt-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-plan-grid { grid-template-columns: 1fr; }
  .rt-plan-card { max-width: 32rem; }
  .rt-media-ph--video { min-height: 220px; }
  .rt-mock-screen { min-height: 240px; }
  .rt-footer-inner { grid-template-columns: 1fr 1fr; }
  .rt-cycle-track { grid-template-columns: repeat(3, 1fr); }
  .rt-cycle-step { border-right: none; border-bottom: 1px solid var(--rt-border-faint); }
  .rt-sectors { flex-direction: column; align-items: flex-start; }
  .rt-sectors ul { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .rt-section-head--between { flex-direction: column; align-items: flex-start; }
  .rt-section-head--between .rt-section-note { text-align: left; max-width: none; }
}

@media (max-width: 680px) {
  /* Header mobile: marca + botão "menu" + "Criar conta". O "Entrar" some
     do header (vai pro menu). A nav vira um painel que desce do header. */
  .rt-header-inner { flex-wrap: nowrap; gap: var(--rt-space-3); }
  .rt-public-brand { margin-right: auto; }
  .rt-public-nav-toggle { display: inline-flex; }
  .rt-header-inner > .rt-link-muted,
  .rt-public-actions > .rt-link-muted { display: none; }
  .rt-public-actions { gap: var(--rt-space-3); min-width: 0; }

  .rt-public-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--rt-space-2) var(--rt-gutter) var(--rt-space-4);
    background: var(--rt-surface-shell);
    border-bottom: 1px solid var(--rt-border-shell);
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5);
  }
  .rt-nav-aberto .rt-public-nav { display: flex; }
  .rt-public-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: var(--rt-space-2) var(--rt-space-3);
    font-size: var(--rt-text-15);
  }
  .rt-public-nav-entrar {
    display: flex;
    margin-top: var(--rt-space-2);
    border-top: 1px solid var(--rt-border-shell);
    border-radius: 0;
    padding-top: var(--rt-space-3);
  }

  .rt-feature-grid,
  .rt-module-list,
  .rt-showcase,
  .rt-form-grid,
  .rt-plan-grid,
  .rt-cycle-track,
  .rt-sectors ul,
  .rt-footer-inner { grid-template-columns: 1fr; }
  .rt-timeline article { grid-template-columns: 1fr; gap: var(--rt-space-4); }
  .rt-form-actions { flex-direction: column-reverse; }
  .rt-form-actions .rt-btn { width: 100%; }
  .rt-hero-actions .rt-btn { width: 100%; }
  .rt-btn { min-height: var(--rt-tap); }
  .rt-cycle-step { border-bottom: 1px solid var(--rt-border-faint); }
  .rt-cycle-step:last-child { border-bottom: none; }
  .rt-login-links { flex-direction: column; }
}

/* ============================================================
 * ADR-0020 passo 4 — "Esqueci minha senha" e confirmação de e-mail
 * Spec: docs/design/ADR0020-unidade-ativa-telas.md §15.6 e §16.
 * Mesmo visual do login (rt-login-card), só o card, centralizado.
 * Nenhum token novo.
 * ============================================================ */
.rt-login-shell--solo {
  grid-template-columns: minmax(0, 30rem);
  justify-content: center;
}
.rt-login-card .rt-login-eyebrow { display: block; margin-bottom: var(--rt-space-4); }
.rt-login-card h1 + p { margin-top: var(--rt-space-4); }
.rt-login-card .rt-login-alert { margin-top: var(--rt-space-6); }
.rt-login-card .rt-login-note { margin-bottom: 0; }
.rt-login-card .rt-login-form--solto { margin-top: var(--rt-space-7); }
.rt-login-hint {
  margin: 0;
  color: var(--rt-on-dark-muted);
  font-size: var(--rt-text-xs);
  line-height: 1.45;
}
.rt-login-hint ul { margin: var(--rt-space-2) 0 0; padding-left: 18px; }
.rt-login-hint li + li { margin-top: 2px; }
/* erro de campo sobre o card escuro: tom claro do par de erro (alto contraste) */
.rt-login-field__erro {
  margin: 0;
  color: var(--rt-feedback-error-bg);
  font-size: var(--rt-text-13);
  font-weight: var(--rt-weight-medium);
}
.rt-login-field.is-invalid input { border-color: var(--rt-feedback-error-bg); }
.rt-login-field--link { gap: var(--rt-space-1); }
.rt-login-field__link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rt-lime-500);
  font-size: var(--rt-text-14);
  font-weight: var(--rt-weight-semibold);
  text-decoration: none;
}
.rt-login-field__link:hover,
.rt-login-field__link:focus-visible { color: var(--rt-lime-600); text-decoration: underline; }
.rt-login-check {
  display: flex;
  align-items: center;
  gap: var(--rt-space-4);
  min-height: 44px;
  color: var(--rt-on-dark-strong);
  font-size: var(--rt-text-14);
  cursor: pointer;
}
.rt-login-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--rt-lime-500); }
.rt-login-acoes { display: grid; gap: var(--rt-space-5); margin-top: var(--rt-space-7); }
.rt-login-acoes .rt-btn { width: 100%; justify-content: center; }
.rt-login-card .rt-login-links { margin-top: var(--rt-space-6); }
.rt-login-links a { display: inline-flex; align-items: center; min-height: 44px; }
.rt-login-card .rt-login-dados {
  margin: var(--rt-space-6) 0 0;
  padding: var(--rt-space-5) var(--rt-space-6);
  border: 1px solid var(--rt-border-shell);
  border-radius: var(--rt-radius-md);
  color: var(--rt-on-dark);
  font-size: var(--rt-text-14);
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .rt-login-card { padding: var(--rt-space-9); }
  .rt-login-field input { font-size: 16px; min-height: 48px; }
  .rt-login-form .rt-btn,
  .rt-login-acoes .rt-btn { min-height: 48px; }
}
.rt-login-note a { color: var(--rt-lime-500); font-weight: var(--rt-weight-semibold); }

/* Etapa 3 fase 2 (D6): no celular todo campo de digitação tem 16 px. Abaixo
   disso o Safari do iPhone dá zoom ao tocar no campo (confirmado pelo dono).
   `!important` porque telas antigas ainda têm <style> próprio com 11–12 px
   nos filtros; fica restrito a <= 600 px. */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}