/* =============================================================================
   home.css — homepage-specific layout. Loaded async. Tokens only. Mobile-first.
   ============================================================================= */

/* ---- Hero ---- */
.pd-hero {
  /* slide up under the transparent sticky nav so the gradient covers the top */
  margin-top: calc(-1 * var(--pd-nav-h));
  padding-top: calc(var(--pd-nav-h) + var(--pd-space-12));
  padding-bottom: var(--pd-section-y);
}
.pd-hero__grid { display: grid; gap: var(--pd-space-12); align-items: center; }
.pd-hero__copy h1 { margin-bottom: var(--pd-space-6); }
.pd-hero__copy .pd-lead { margin-bottom: var(--pd-space-8); max-width: 36ch; }
.pd-hero .pd-btn-row { margin-bottom: var(--pd-space-8); }

.pd-hero .pd-trust { gap: var(--pd-space-3) var(--pd-space-6); }
.pd-hero .pd-trust li { display: inline-flex; align-items: center; gap: .45rem; }
.pd-hero .pd-trust svg { color: var(--pd-violet); flex: none; }
.pd-hero__proof { margin-top: var(--pd-space-6); display: flex; flex-wrap: wrap; gap: var(--pd-space-2) var(--pd-space-6); align-items: center; }
.pd-hero__rating { display: inline-flex; align-items: center; gap: .35rem; }
.pd-hero__rating svg { color: var(--pd-warning); }

/* hero crossfade */
.pd-hero__visual { position: relative; aspect-ratio: 16 / 13; }
.pd-hero__frame {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity .8s ease;
}
.pd-hero__frame.is-active { opacity: 1; }
.pd-hero__frame, .pd-hero__frame img { height: 100%; }
.pd-hero__frame img { width: 100%; object-fit: cover; object-position: top center; }
@media (prefers-reduced-motion: reduce) { .pd-hero__frame { transition: none; } }

@media (min-width: 980px) {
  .pd-hero__grid { grid-template-columns: 1fr 1.05fr; gap: var(--pd-space-16); }
}

/* ---- Problem ---- */
.pd-problem h2 { margin-bottom: var(--pd-space-8); }
.pd-problem__points { display: grid; gap: var(--pd-space-4); border-left: 2px solid var(--pd-border-dark); padding-left: var(--pd-space-6); }
.pd-problem__points p { font-size: var(--pd-text-lg); }
.pd-problem__close { margin-top: var(--pd-space-8); color: var(--pd-starlight); font-weight: 500; }

/* ---- Demo ---- */
.pd-demo__row { display: grid; gap: var(--pd-space-8); align-items: center; margin-top: var(--pd-space-16); }
.pd-demo__row:first-of-type { margin-top: var(--pd-space-12); }
.pd-demo__text .pd-eyebrow { margin-bottom: var(--pd-space-2); }
.pd-demo__text h3 { margin-bottom: var(--pd-space-3); }
@media (min-width: 900px) {
  .pd-demo__row { grid-template-columns: 1fr 1fr; gap: var(--pd-space-16); }
  .pd-demo__row.is-reverse .pd-demo__media { order: 2; }
}

/* ---- Comparison links ---- */
.pd-home-compare__links { margin-top: var(--pd-space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-4); justify-content: center; }
.pd-home-compare__links .pd-muted { font-weight: 600; }

/* ---- Final CTA: primary install action leads; Playbook capture is secondary ---- */
.pd-final__grid { display: grid; gap: var(--pd-space-12); }
.pd-final__primary h2 { margin-bottom: var(--pd-space-4); }
.pd-final__primary .pd-lead { margin-bottom: var(--pd-space-8); max-width: 34ch; }
.pd-final__primary .pd-btn { margin-top: var(--pd-space-2); }
.pd-final__note { margin-top: var(--pd-space-4); font-size: var(--pd-text-sm); }
.pd-final__playbook h3 { margin-bottom: var(--pd-space-3); }
.pd-final__playbook .pd-leadform { margin-top: var(--pd-space-6); }
@media (min-width: 900px) {
  .pd-final__grid { grid-template-columns: 1.2fr 1fr; align-items: center; }
}

/* ---- Pillar Free/Pro badge (own line, top of card) ---- */
.pd-pillar .pd-badge { display: flex; width: -moz-fit-content; width: fit-content; margin-bottom: var(--pd-space-3); }

/* ---- Demo eyebrow + Free/Pro badge ---- */
.pd-demo__tag { display: flex; align-items: center; gap: var(--pd-space-3); margin-bottom: var(--pd-space-2); }
.pd-demo__tag .pd-eyebrow { margin-bottom: 0; }

/* ---- Free vs Pro CTA row ---- */
.pd-free-pro__cta { margin-top: var(--pd-space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-4); justify-content: center; }
.pd-free-pro__link { font-weight: 600; }