/**
 * ajuda.css
 * Tela de Ajuda / "Como funciona" (ajuda.js) — mesmo enquadramento do hub.
 */
.help-screen {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto; padding: 28px 22px 80px;
}

.help-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: nowrap; margin-bottom: 18px;
}
.help-top .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.help-top .brand > div { min-width: 0; }
.help-top .brand h1 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 0.04em; margin: 0; line-height: 1; }
.help-top .brand .sub {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grama); margin-top: 3px;
}
.help-top .brand .brand-mark {
  width: 40px; height: 40px; flex-shrink: 0; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.help-top .nav-exit { flex-shrink: 0; }

.help-intro {
  color: rgba(245, 242, 231, 0.8); font-size: 0.95rem; line-height: 1.6;
  margin: 0 0 24px;
}
.help-intro b { color: var(--branco); }

.help-sec { margin-bottom: 22px; }
.help-sec h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 0.03em;
  color: var(--giz); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.help-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--amarelo); color: var(--preto);
  font-size: 0.95rem; flex-shrink: 0;
}
.help-sec ul { margin: 0; padding-left: 20px; }
.help-sec li {
  color: rgba(245, 242, 231, 0.72); font-size: 0.9rem; line-height: 1.6; margin-bottom: 6px;
}
.help-sec li b { color: var(--giz); }
.help-sec code, .help-card code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
  background: rgba(245, 242, 231, 0.1); padding: 1px 5px; border-radius: 4px;
}

.help-premium-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.03em;
  color: var(--amarelo); margin: 34px 0 6px;
}
.help-premium-sub { color: rgba(245, 242, 231, 0.7); font-size: 0.9rem; line-height: 1.6; margin: 0 0 16px; }
.help-premium-sub b { color: var(--branco); }

.help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-card {
  background: var(--giz); color: var(--preto);
  border-radius: 12px; padding: 16px; box-shadow: var(--sombra);
  border-top: 4px solid var(--amarelo);
}
.help-card h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.02em; margin: 0 0 6px; }
.help-card p { font-size: 0.85rem; color: rgba(23, 21, 18, 0.7); line-height: 1.55; margin: 0; }

.help-why {
  margin-top: 24px;
  background: linear-gradient(135deg, var(--terra), #8f4d22);
  border-radius: 12px; padding: 20px; box-shadow: var(--sombra);
}
.help-why h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em; margin: 0 0 10px; }
.help-why ul { margin: 0; padding-left: 20px; }
.help-why li { font-size: 0.9rem; line-height: 1.6; margin-bottom: 6px; color: rgba(255, 253, 248, 0.92); }
.help-why li b { color: var(--branco); }
.help-why-how { font-size: 0.85rem; color: rgba(255, 253, 248, 0.85); margin: 12px 0 0; line-height: 1.55; }

.help-foot { margin-top: 30px; text-align: center; }

@media (max-width: 620px) {
  .help-cards { grid-template-columns: 1fr; }
}