/* Responsividade e componentes compartilhados das 3 versões da landing.
   O layout base usa estilos inline, por isso os ajustes abaixo precisam de
   !important pra conseguir sobrescrevê-los. */

html { scroll-behavior: smooth; }
img { max-width: 100%; }

/* As faixas de largura total usam "width: 100%" + padding lateral; sem isso
   elas passam da tela e criam rolagem horizontal (no celular o navegador
   ainda reduz o zoom da página inteira). */
[style*="width: 100%"] { box-sizing: border-box; }

/* O que o Pro tem a mais que o Free (Grupos ilimitados, VCard) */
.lz-pro-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 8px 3px 6px;
  margin-left: -6px;
  border-radius: 6px;
  background: #e6f2ef;
  color: #0b5e54;
  font-weight: 700;
}
.lz-pro-feature::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5e54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Janela de e-mail antes do Checkout (criada pelo site.js) */
.lz-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 17, 20, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.lz-modal {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 20px 50px rgba(16, 17, 20, .2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lz-modal h3 { margin: 0; font-size: 18px; font-weight: 800; color: #101114; }
.lz-modal p { margin: 0; font-size: 14px; line-height: 1.5; color: #565a63; }
.lz-modal input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  font-size: 15px;
}
.lz-modal .lz-modal-msg { min-height: 18px; font-size: 13px; color: #b91c1c; }
.lz-modal .lz-modal-actions { display: flex; gap: 10px; }
.lz-modal .lz-modal-actions .btn { flex: 1; }
.lz-modal .lz-modal-actions [data-cancel] { flex: 0 0 auto; }
.lz-modal .btn[disabled] { opacity: .6; cursor: default; }

/* Páginas legais (privacidade/termos), geradas por scripts/build-legal.py */
.lz-legal h1 { margin: 0 0 8px 0; font-size: 34px; font-weight: 800; color: #101114; line-height: 1.2; }
.lz-legal .lz-legal-updated { margin: 0 0 28px 0; font-size: 14px; color: #8a8f98; }
.lz-legal .lz-legal-updated strong { font-weight: 600; }
.lz-legal h2 { margin: 36px 0 12px 0; font-size: 20px; font-weight: 700; color: #101114; line-height: 1.35; }
.lz-legal p, .lz-legal li { font-size: 15px; line-height: 1.7; color: #33363c; }
.lz-legal p { margin: 0 0 14px 0; }
.lz-legal ul { margin: 0 0 16px 0; padding-left: 22px; }
.lz-legal li { margin-bottom: 8px; }
.lz-legal strong { color: #17171a; }
.lz-legal a { color: #0b5e54; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.lz-footer-links a[aria-current="page"] { color: #ffffff !important; }

@media (max-width: 1024px) {
  .lz-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lz-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 28px !important; }
  .lz-hero-grid { gap: 40px !important; }
  .lz-hero-title { font-size: 40px !important; }
}

@media (max-width: 860px) {
  .lz-nav-links { display: none !important; }
}

@media (max-width: 760px) {
  .lz-nav { padding: 14px 20px !important; }
  .lz-section { padding: 48px 20px !important; }
  .lz-testimonials { padding-top: 0 !important; }
  .lz-hero { padding: 48px 20px 40px 20px !important; }
  .lz-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .lz-hero-title { font-size: 32px !important; }
  .lz-hero-ctas { flex-wrap: wrap; }
  .lz-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
  .lz-section h2 { font-size: 26px !important; }
  .lz-legal h1 { font-size: 28px; }
  .lz-legal h2 { font-size: 18px !important; }
  .lz-footer { flex-direction: column; align-items: flex-start !important; }
  .lz-footer-links { flex-wrap: wrap; gap: 16px !important; }
}

@media (max-width: 560px) {
  .lz-grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .lz-pricing-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .lz-hero-ctas .btn { flex: 1 1 100%; }
  .lz-nav-actions { gap: 10px !important; }
  .lz-nav-actions .btn { padding: 9px 12px !important; font-size: 13px !important; }
}