/* ─── LANDING PAGE (public, unauthenticated) ─────────────────────────────
   Extends the existing .hero/.section-header/.card visual system (see
   layout.css/components.css -- both shared with every other page) with
   the handful of rules only this page needs. Nothing here is imported by
   or affects any other page. */

/* Compact Download entry in the public navbar (section 6: header CTA). */
.btn-nav-download {
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
}

/* Decorative preview grid inside the hero's right column -- same
   .hub-grid/.hub-card system as the authenticated Home hub, just
   constrained to the hero column instead of the full page width. */
.landing-preview-grid {
  width: min(100%, 420px);
  aspect-ratio: 4 / 3;
}

/* .hero-text sits directly over .home-bg's full-bleed photo (the same
   background every other page uses, just with far less content over it
   there -- a hub-grid of already-scrimmed cards, not a paragraph of
   text). Over a bright/busy photo, unscrimmed text failed contrast
   badly (confirmed visually, not just in theory). Same frosted-panel
   technique .side-panel already uses (var(--bg-overlay) + blur),
   scoped to .hero-text only so no other page sharing .home-bg is
   affected. */
.hero-text {
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-sm);
}

/* ─── ABOUT ────────────────────────────────────────────────────────────── */
.landing-about-section {
  padding: 1.5rem 5% 2rem;
  max-width: 720px;
  margin: 0 auto;
}

/* Same contrast problem as .hero-text (this section also sits directly
   over .home-bg's photo, confirmed visually) -- same frosted-panel fix. */
.landing-about-card {
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}

.landing-about-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.landing-about-text strong { color: var(--text-primary); font-weight: 600; }

/* ─── DOWNLOAD ─────────────────────────────────────────────────────────── */
.landing-download-section {
  padding: 1rem 5% 2.5rem;
}

.landing-download-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem 2rem;
  text-align: center;
}

.landing-download-card .section-header { margin-bottom: 0.75rem; }
.landing-download-card .landing-about-text { margin-bottom: 1.5rem; }

.landing-download-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── PRINCIPLES (landing-only backing -- .principles-strip itself is
   shared with every media page and stays untouched there) ──────────── */
.landing-principles {
  max-width: fit-content;
  margin: 0 auto 2rem;
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  border-top: none;
  padding: 0.6rem 1.75rem;
  box-shadow: var(--shadow-sm);
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 2.5rem 5% 1.5rem; min-height: 0; }
  .hero-text { max-width: none; text-align: center; }
  .hero-eyebrow { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { order: -1; margin-bottom: 1rem; }
  .landing-preview-grid { width: min(100%, 360px); }
}

@media (max-width: 700px) {
  .navbar-nav { display: none; }
  .landing-download-card { padding: 1.5rem 1.25rem; }
}