/* ──────────────────────────────────────────────────────────────────────────
   home.css — the public homepage (public/home.html, Task 74). Layout only:
   every colour, the type and the buttons come from app.css's tokens, so the
   homepage is the same numiVeda, light or dark as the device asks. Phone first;
   one max-width and a two-column tile grid from 640px.
   ────────────────────────────────────────────────────────────────────────── */

body.home { min-height: auto; }
.home a:not(.btn) { color: var(--accent); }
.home .btn { text-decoration: none; text-align: center; }
/* The buttons keep app.css's own colours: warm CTA ink on the CTA, violet on the ghost. */
.home .btn-primary { color: var(--cta-ink); }
.home .btn-ghost { color: var(--accent); }

.home-bar {
  max-width: 880px; margin: 0 auto; padding: calc(10px + var(--safe-t)) var(--pad) 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.home-brand { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink) !important; text-decoration: none; }
.home-bar .btn-link { display: inline-flex; align-items: center; text-decoration: none; }

.home main { max-width: 880px; margin: 0 auto; padding: 0 var(--pad); }

.home-hero { padding: 40px 0 28px; }
.home-hero h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px; }
.home-lede { font-size: 17px; color: var(--ink-soft); margin: 0 0 6px; max-width: 640px; }
.home-cta { display: grid; gap: 0; max-width: 420px; }
.home-cta .btn { margin-top: 12px; }
.home-note { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; max-width: 560px; }

.home-section { padding: 28px 0; border-top: 1px solid var(--line); }
.home-section h2 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 14px; }
.home-section p { color: var(--ink-soft); max-width: 680px; }

.home-steps { padding-left: 22px; margin: 0; max-width: 680px; }
.home-steps li { color: var(--ink-soft); margin-bottom: 10px; }
.home-steps strong { color: var(--ink); }

.home-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.home-tiles li {
  border: 1px solid var(--line); border-radius: var(--round); background: var(--surface);
  padding: 14px 16px; display: grid; gap: 4px;
}
.home-tiles strong { color: var(--ink); }
.home-tiles span { color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.home-more { font-size: 15px; margin-top: 14px; }

.home .pricing { width: 100%; max-width: 560px; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.home .pricing th, .home .pricing td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.home .pricing th { color: var(--ink); font-weight: 600; }
.home .pricing td { color: var(--ink-soft); }

.home-trust { border-left: 3px solid var(--accent); padding-left: 14px; border-top: 0; margin: 12px 0 8px; }
.home-trust h2 { margin-top: 0; }

.home-footer {
  max-width: 880px; margin: 24px auto 0; padding: 20px var(--pad) calc(28px + var(--safe-b));
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint);
}
.home-footer p { margin: 6px 0; }
.home-footer strong { color: var(--ink-soft); }
.home-footer-links { line-height: 2; }

@media (min-width: 640px) {
  .home-hero { padding: 64px 0 40px; }
  .home-hero h1 { font-size: 44px; }
  .home-cta { grid-template-columns: repeat(3, auto); gap: 12px; max-width: none; justify-content: start; }
  .home-cta .btn { width: auto; padding: 12px 22px; }
  .home-tiles { grid-template-columns: 1fr 1fr; }
}