/* Cadastro Habitacional — landing page layout glue.
   Built only from design-system tokens (ds/colors_and_type.css + ds/components.css, loaded first).
   The design system ships no global reset. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
[id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.btn, .nav__link { min-height: 44px; }
.nav__link { display: inline-flex; align-items: center; }
.product .btn:focus-visible {
  outline-color: var(--theme-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

/* ---- Nav --------------------------------------------------------------- */
.nav__brand { min-height: 44px; }

.nav__links { gap: var(--sp-2); }
@media (max-width: 860px) { .nav__links .nav__link { display: none; } }
@media (max-width: 420px) { .nav__cta { display: none; } }

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__inner { max-width: 56rem; text-align: center; display: grid; gap: var(--sp-6); justify-items: center; }
.hero__inner h1 { margin: 0; }
.hero__inner .lead { margin: 0; max-width: 44rem; }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.hero__facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5);
  font-size: var(--text-sm); color: var(--ink-soft);
}
.hero__facts li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__facts .icon { color: var(--theme-accent); }
@media (prefers-color-scheme: dark) {
  .hero__title-accent { background-image: linear-gradient(110deg, var(--brand-blue) 0%, var(--accent-bright) 100%); }
}

/* ---- Sections ---------------------------------------------------------- */
.stack { display: grid; gap: var(--sp-8); }
.stack h2 { margin: 0; }
.section-lead { margin: var(--sp-3) 0 0; max-width: 44rem; color: var(--ink-soft); }
.center { text-align: center; justify-items: center; gap: var(--sp-4); }
.center p { margin: 0; max-width: 40rem; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-5); }
.grid-cards .card { display: grid; align-content: start; gap: var(--sp-3); }
.grid-cards .card h3 { margin: 0; font-size: var(--text-lg); }
.grid-cards .card p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.grid-cards .icon-tile { width: 40px; height: 40px; display: grid; place-items: center; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-6); }

.step { display: grid; gap: var(--sp-3); align-content: start; }
.step h3 { margin: 0; font-size: var(--text-lg); }
.step p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.step__n {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--theme-accent) 14%, transparent);
  color: var(--theme-accent); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-soft); }
.checklist .icon { color: var(--theme-accent); margin-top: 0.2em; }
.checklist strong { color: var(--ink); font-weight: var(--fw-semibold); }

/* ---- Access form ------------------------------------------------------- */
.access { width: 100%; max-width: 34rem; text-align: left; display: grid; gap: var(--sp-2); }
.access__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.access__row .field { flex: 1 1 14rem; }
.access .field-hint, .access .field-msg--error { margin: 0; }
.access .field-msg--error[hidden] { display: none; }
.mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.92em; }

/* ---- Footer ------------------------------------------------------------ */
.footer__title { margin: 0; font-weight: var(--fw-semibold); }
.footer__legal a { color: inherit; }