/* ==========================================================================
   Fuller Living — Install the App (PWA)
   Purpose: reduce technology anxiety. Calm, clear, reassuring.
   ========================================================================== */

.install-main > section { position: relative; width: 100%; }
.install-pwa { background-color: var(--color-bg-alt); }
.install-how { background-color: var(--color-bg-alt); }

/* ---------------------------------------------------------------- HERO ---- */
.install-hero { background-color: var(--color-bg); }
.install-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.install-hero h1 { margin: var(--space-sm) 0 var(--space-sm); }
.install-hero__subhead {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--fl-teal-deep);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}
.install-hero__body { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.install-hero__figure { margin: 0; }
.install-hero__figure img {
  width: 100%;
  display: block;
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-lg);
  background-color: var(--fl-sage-tint);
}

/* --------------------------------------------------------- WHAT IS A PWA -- */
.install-pwa__body {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------- WHAT'S INSIDE ---- */
.install-inside__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.install-feature {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.install-feature h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-h4); }
.install-feature p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* -------------------------------------------------------- HOW TO INSTALL -- */
.install-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 60rem;
  margin-inline: auto;
}
.install-steps {
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-card);
}
.install-steps__title {
  margin: 0 0 var(--space-md);
  font-size: var(--text-h4);
}
.install-steps__title span { color: var(--color-text-muted); font-style: italic; }
.install-steps__list {
  list-style: none;
  counter-reset: fl-step;
  margin: 0;
  padding: 0;
  max-width: none;
}
.install-steps__list li {
  counter-increment: fl-step;
  position: relative;
  margin: 0 0 var(--space-md);
  padding-left: 2.75rem;
  color: var(--color-text);
  line-height: var(--leading-snug);
}
.install-steps__list li:last-child { margin-bottom: 0; }
.install-steps__list li::before {
  content: counter(fl-step);
  position: absolute;
  left: 0;
  top: -0.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-pill);
  background-color: var(--fl-teal-tint);
  color: var(--fl-teal-deep);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
}

/* ----------------------------------------------------- NOTIFY / INSTALL --- */
.install-cta { background-color: var(--color-bg); scroll-margin-top: 6rem; }
.install-cta__card {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  text-align: center;
  border-radius: var(--radius-container);
  border: 1px solid var(--color-border);
  background-color: var(--fl-teal-tint);
  background-image:
    radial-gradient(90% 120% at 100% 0%, rgba(109, 148, 116, 0.25) 0%, rgba(109, 148, 116, 0) 60%),
    radial-gradient(90% 120% at 0% 100%, rgba(196, 160, 184, 0.22) 0%, rgba(196, 160, 184, 0) 60%);
}
.install-cta__card h2 { margin-bottom: var(--space-sm); }
.install-cta__card > p { max-width: 44ch; margin: 0 auto var(--space-lg); color: var(--color-text-muted); }
.install-cta__actions { display: flex; justify-content: center; }

/* Inline notify form (email + button) */
.install-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: 30rem;
  margin-inline: auto;
}
.install-cta__pair {
  margin: var(--space-lg) auto 0 !important;
  max-width: 44ch;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}
.install-cta__pair .home-textlink { display: inline-flex; }

/* ---------------------------------------------------------- RESPONSIVE ---- */
@media (min-width: 480px) {
  .install-form { flex-direction: row; }
  .install-form input { flex: 1; }
  .install-form .fl-btn { flex: none; }
}
@media (min-width: 768px) {
  .install-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
  .install-inside__grid { grid-template-columns: repeat(3, 1fr); }
  .install-how__grid { grid-template-columns: 1fr 1fr; }
}