/* ──────────────────────────────────────────────────────────────────────
   PAGE — landing. Layout-only. No colors, no font sizes, no raw px.
   Anything visual lives in tokens/components. This file just arranges.
   ────────────────────────────────────────────────────────────────────── */

/* Hero band — gradient backdrop is a landing-only flourish, so it stays here. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-page);
  text-align: center;
  padding: var(--space-11) var(--page-padding-x) var(--space-9);
}
.hero__title  { margin: 0 auto var(--space-5); max-width: var(--content-max-wide); }
.hero__title em { color: var(--color-amber-900); font-style: italic; }
.hero__lede   { margin: 0 auto var(--space-7); max-width: var(--content-max-narrow); }
.hero__cta    { margin-bottom: var(--space-9); }

/* Hero book strip — decorative, landing-specific. */
.hero__books {
  display: flex;
  gap: 10px;
  justify-content: center;
  opacity: 0.9;
}
.book-cover {
  width: 100px;
  height: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-cover);
  transition: transform var(--ease-base);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
}
.book-cover__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.9);
  line-height: 14px;
}
.book-cover__author {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-1);
}

/* Steps grid — uses .grid-3 from layouts.css, this just adds the numeral color. */
.step__number {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  color: var(--color-amber-500);
  line-height: 1;
}

/* Stack card — variant of .card with book thumbnails inside. */
.stack-card__books {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-5);
}
.stack-book {
  width: 56px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-cover);
}
.stack-book img { width: 100%; height: 100%; object-fit: cover; }
.stack-book__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-1);
}
.stack-book__title {
  font-family: var(--font-display);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 11px;
}

/* CTA strip at bottom of stacks band. */
.cta-strip {
  text-align: center;
  padding: 60px 0;
  border-top: 1px solid var(--color-border);
}

/* ── Responsive ──────────────────────────────────────────────────────
   Page padding is handled by the token override in tokens.css. What's
   left is type that outgrows small screens and grids that must stack.
   Grid overrides live here rather than in layouts.css to keep the
   shared layer byte-identical to the app's copy. */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* .display--xl hard-codes an 80px line-height that overflows here. */
  .display--xl { font-size: var(--text-5xl); line-height: 1.15; }
  .display--lg { font-size: var(--text-5xl); }
  .display--md { font-size: var(--text-4xl); }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .row-equal { flex-direction: column; }

  /* Cover strip scrolls instead of squashing; edge-to-edge past the
     hero's padding so it reads as a deliberate rail. */
  .hero__books {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--page-padding-x);
    margin-inline: calc(var(--page-padding-x) * -1);
  }
  .hero__books::-webkit-scrollbar { display: none; }

  .modal-form { flex-direction: column; }
  .cta-strip { padding: var(--space-7) 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}