/* Marketing homepage and the visual /how-it-works page.
   Tokens come from styles.css. Kept separate so the book form is untouched. */

.home-page { overflow-x: clip; }

.home-wrap {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.home-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--plum);
}

.home-section {
  padding: 72px 0;
}

.home-section h2 {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}

.home-lead {
  margin: 0;
  max-width: 38em;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.home-section-head {
  max-width: 40em;
  margin: 0 0 36px;
}

.home-section-head.center {
  margin: 0 auto 36px;
  text-align: center;
}

.home-lead.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------------------------------------------------------- hero */
.home-hero {
  padding: 36px 0 72px;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

.home-hero-copy {
  max-width: 36em;
  margin: 0 auto;
  text-align: center;
}

.home-hero-actions { justify-content: center; }

@media (min-width: 1180px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
  }
  .home-hero-copy {
    max-width: none;
    margin: 0;
    text-align: left;
  }
  .home-hero-actions { justify-content: flex-start; }
}

.home-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 18px;
}

.home-hero-sub {
  margin: 0 0 28px;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.home-hero-actions .btn-primary,
.home-hero-actions .btn-ghost {
  text-decoration: none;
}

/* Future product video drops into this frame; the open book is the stand-in. */
.home-stage {
  position: relative;
  min-height: 320px;
  padding: 28px 18px 8px;
}

.home-stage-glow {
  position: absolute;
  inset: 8% 6% auto;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(245, 181, 68, .22), transparent 70%);
  pointer-events: none;
}

.home-book {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 28px 40px rgba(60, 40, 80, .28));
}

.home-book-spread {
  display: flex;
  width: min(100%, 520px);
  aspect-ratio: 2 / 1.28;
}

.home-book-page {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #1e1528;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.home-book-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-book-page-left {
  border-radius: 10px 0 0 10px;
  box-shadow: inset -14px 0 22px -16px rgba(30, 16, 40, .45);
}

.home-book-page-right {
  border-radius: 0 10px 10px 0;
  box-shadow: inset 14px 0 22px -16px rgba(30, 16, 40, .45);
}

.home-book-spine {
  width: 16px;
  flex: none;
  background:
    linear-gradient(90deg, #2a1c38, #4a3168 40%, #3a2553 60%, #2a1c38);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .35);
}

.home-book-leaf {
  position: absolute;
  width: 34%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transform: rotate(8deg);
  z-index: -1;
}

.home-book-leaf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-book-leaf { display: none; }
.home-book-leaf-a { right: 4%; top: 0; }
.home-book-leaf-b { left: 2%; bottom: 4%; transform: rotate(-8deg); }

@media (min-width: 1180px) {
  .home-book-leaf { display: block; }
}

/* ---------------------------------------------------------- transform */
.home-transform { padding-top: 24px; }

.home-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}

/* The three frames are deliberately different shapes -- a square polaroid, a
   portrait page, a landscape spread -- so left to themselves their headings
   land at three different heights. Bottom-aligning the frame inside a row that
   takes the slack puts "A photo of your child", "Your child, in the story" and
   "Their illustrated storybook" on one line, which is what makes the row read
   as one sentence rather than three cards. */
.home-flow-step {
  margin: 0;
  text-align: center;
  display: grid;
  grid-template-rows: 1fr auto auto;
}

.home-flow-step .home-flow-frame { align-self: end; }

.home-flow-frame {
  display: block;
  margin: 0 auto 16px;
  width: min(100%, 220px);
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.home-flow-photo {
  padding: 12px 12px 36px;
  transform: rotate(-3deg);
}

.home-flow-photo-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 42%, #f3e8da, #efe1d0);
  color: var(--ink-soft);
}

.home-flow-photo-slot span {
  font-size: 13px;
  font-weight: 800;
}

.home-flow-photo-slot::before {
  content: "📷";
  font-size: 36px;
  display: block;
  margin-bottom: 6px;
}

.home-flow-art {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3 / 4;
}

.home-flow-art img,
.home-flow-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}

.home-flow-mini {
  display: flex;
  aspect-ratio: 2 / 1.28;
  overflow: hidden;
  border-radius: 12px;
}

.home-flow-mini span { flex: 1; min-width: 0; overflow: hidden; }

.home-flow-step h3 {
  font-family: var(--display);
  font-size: 20px;
  margin: 0 0 6px;
}

.home-flow-step p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.home-flow-arrow {
  align-self: center;
  color: var(--plum);
  font-size: 28px;
  line-height: 1;
  padding-top: 70px;
}

/* --------------------------------------------------------------- cast */
.home-cast-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 22px;
  align-items: stretch;
}

.home-cast-hero,
.home-cast-side {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.home-cast-hero img,
.home-cast-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-cast-side img { object-position: left center; }

.home-cast-hero { aspect-ratio: 4 / 3; }
.home-cast-side { aspect-ratio: 4 / 3; }

.home-cast-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}

.home-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 800;
  color: var(--plum);
}

/* ------------------------------------------------------------- listen */
.home-listen {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.home-listen-panel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: #1e1528;
}

.home-listen-panel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 420px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.home-listen-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255, 253, 249, .94);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.home-listen-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--coral), #ff9a5b);
  color: #fff;
  font-size: 16px;
  flex: none;
}

.home-listen-bar strong {
  display: block;
  font-size: 14px;
}

.home-listen-bar span {
  font-size: 12px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------- adventure */
.home-adventure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-adventure-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s;
}

.home-adventure-card:hover,
.home-adventure-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  outline: none;
}

.home-adventure-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}

.home-adventure-card h3 {
  font-family: var(--display);
  font-size: 22px;
  margin: 16px 18px 6px;
}

.home-adventure-card p {
  margin: 0 18px 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------------------------------------------------------- features */
.home-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-feature {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.home-feature img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.home-feature h3 {
  font-family: var(--display);
  font-size: 20px;
  margin: 0 0 6px;
}

.home-feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------------------------------------------------------- showcase */
.home-showcase-grid {
  margin-top: 8px;
}

.home-more {
  margin: 28px 0 0;
  text-align: center;
}

.home-more .btn-ghost { text-decoration: none; }

/* ------------------------------------------------------------- steps */
.home-steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-step-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 20px 24px;
  box-shadow: var(--shadow-sm);
}

.home-step-card span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--plum), #8d63b8);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
}

.home-step-card h3 {
  font-family: var(--display);
  font-size: 20px;
  margin: 0 0 8px;
}

.home-step-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* -------------------------------------------------------------- final */
.home-final {
  padding: 28px 0 88px;
}

.home-final-band {
  text-align: center;
  padding: 48px 28px;
  border-radius: 28px;
  background: #4a3168;
  color: #fffdf9;
  box-shadow: var(--shadow-lg);
}

.home-final-band h2 {
  color: inherit;
  margin-bottom: 10px;
}

.home-final-band .home-lead {
  color: rgba(255, 253, 249, .8);
  margin-bottom: 26px;
}

.home-final-band .btn-primary { text-decoration: none; }

/* --------------------------------------------------------------- faq */
.home-faq {
  padding: 0 0 80px;
}

.home-faq .faq-list { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------ how-it-works */
.how-page { max-width: none; }

.how-page > h1,
.how-page > .how-intro {
  max-width: 40em;
}

.how-intro { margin: 0 0 32px; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

.how-visual {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.how-visual-step {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}

.how-visual-media {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
}

.how-visual-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.how-visual-copy { display: grid; gap: 6px; padding-right: 10px; }

.how-visual-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--plum), #8d63b8);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.how-visual-copy strong {
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink);
}

.how-visual-copy span { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

.how-more { max-width: 40em; }

/* -------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .home-cast-grid,
  .home-listen,
  .home-adventure-grid,
  .home-features-grid,
  .home-steps-grid {
    grid-template-columns: 1fr;
  }

  .home-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .home-flow-arrow {
    padding: 0;
    text-align: center;
    transform: rotate(90deg);
    font-size: 22px;
  }

  .home-hero { padding-top: 18px; }

  .home-book-leaf { display: none; }

  .home-feature { grid-template-columns: 88px minmax(0, 1fr); }
  .home-feature img { width: 88px; height: 88px; }

  .how-visual-step { grid-template-columns: 1fr; gap: 12px; }
  .how-visual-media { max-height: 220px; }
}

@media (max-width: 720px) {
  .home-wrap { width: calc(100% - 32px); }
  .home-section { padding: 52px 0; }
  .home-hero { padding: 20px 0 48px; }
  .home-stage { padding: 4px 0 0; min-height: 0; }
  .home-book-spread { width: 100%; }
  .home-hero-actions .btn-primary,
  .home-hero-actions .btn-ghost,
  .home-final-band .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .home-listen-panel img { max-height: 300px; aspect-ratio: 4 / 3; }
  .home-cast-hero,
  .home-cast-side { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .home-book-spread,
  .home-book-page-left,
  .home-book-page-right,
  .home-flow-photo,
  .home-adventure-card {
    transform: none;
  }
}

/* ------------------------------------------------- trust row, under the hero
   Three short promises the code actually keeps (home.php only prints the ones
   whose setting is on). It sits under the buttons rather than in a section of
   its own because the objection it answers -- "what happens to a photograph of
   my child" -- is the one a parent has at the moment they read the button. */
.home-trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.home-trust li { display: flex; align-items: center; gap: 7px; }

.home-trust li::before {
  content: "✓";
  color: var(--plum);
  font-weight: 800;
}

/* The flow's first frame, once there is a real sample photograph to put in it
   instead of the grey "your photo goes here" slot. */
.home-flow-photo-slot.has-photo {
  aspect-ratio: 1;
  background: var(--cream-2);
  overflow: hidden;
}

.home-flow-photo-slot.has-photo::before { content: none; }

.home-flow-photo-slot.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* ------------------------------------------------------- the worked example
   /sample-book. Shares this stylesheet rather than getting its own because
   AccountPage::render() already loads home.css on every server-rendered page,
   and one more <link> for one page is a request nobody needs. */
/* The heading block above the flipbook on a published example's own URL. It
   replaces the generic "AI Story Studio" hero that /book/view used to carry —
   see index.php — and it is the page's only h1. */
.sample-intro { padding: 26px 0 4px; text-align: center; }
.sample-intro h1 {
  font-family: var(--display);
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.15;
  margin: 0 0 12px;
}
.sample-intro-lead {
  margin: 0 auto;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* The book again, laid out, below the flipbook. A plain section rather than a
   card: it sits inside .container next to <section class="preview">, which is
   not a card either, and a card here would read as a second page. */
.sample-book {
  margin: 8px auto 0;
  max-width: 1040px;
  padding: 34px 0 10px;
  border-top: 1px solid var(--border);
}

.sample-swap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 28px 0 0;
}

/* Both halves are `1fr`, but a grid item's automatic minimum is its content's
   -- so the 900px photo took a wider column than the 760px page and the
   before/after came out lopsided. */
.sample-swap > * { min-width: 0; }

.sample-swap-photo { margin: 0; }

/* Cropped to the shape of a page rather than shown at its own 4:3, so the two
   halves of the before/after are the same size and the eye compares the child
   rather than the two frames. object-position keeps the face off the top edge
   -- a portrait crop of a landscape photo otherwise cuts the forehead. */
.sample-swap-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.sample-swap-photo figcaption,
.sample-swap-caption {
  margin: 10px 2px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}

.sample-swap-caption { margin-bottom: 0; }

.sample-swap-arrow { font-size: 26px; color: var(--plum); }

.sample-facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.sample-facts li {
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}

.sample-facts strong { display: block; font-family: var(--display); font-size: 17px; line-height: 1.25; }
.sample-facts span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }

.sample-book-sub { font-family: var(--display); font-size: 22px; margin: 38px 0 6px; }

.sample-book-pages {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.sample-page-item { margin: 0; }

/* One page of the book. The words are NOT in the JPEG -- see src/SampleBook.php
   for why -- so the card below is laid over the picture in the same place, and
   at the same proportions, that PageComposer::compose() burns it into a real
   reader's page: 4.5% margin, 3% padding, a 2.2% radius, all of the frame's own
   width. cqw rather than % or vw so a page reads identically at any size it is
   shown at, which is exactly what PageComposer's relative geometry does. */
.sample-page-sheet {
  container-type: inline-size;
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: var(--cream-2);
}

.sample-page-sheet img { display: block; width: 100%; height: auto; }

/* The fade PageComposer paints under the card, so light artwork cannot bleed
   into the words. */
.sample-page-sheet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(24, 16, 30, 0), rgba(24, 16, 30, .22));
  pointer-events: none;
}

.sample-page-words {
  position: absolute;
  z-index: 2;
  left: 4.5cqw;
  right: 4.5cqw;
  bottom: 4.5cqw;
  padding: 3cqw;
  border-radius: 2.2cqw;
  background: rgba(255, 253, 249, .88);
  color: #2e2636;
  font-size: clamp(11px, 3.1cqw, 16px);
  line-height: 1.45;
  font-weight: 600;
  text-align: left;
}

/* PageComposer puts the number in the same corner, white with a drop shadow.
   A shadow alone disappears on pale artwork -- half these pages are a sunlit
   wood -- so the web version sits on a soft disc instead. */
.sample-page-no {
  position: absolute;
  z-index: 2;
  top: 3.4cqw;
  right: 3.4cqw;
  min-width: 6cqw;
  padding: 1cqw 1.6cqw;
  border-radius: 999px;
  background: rgba(24, 16, 30, .38);
  font-size: clamp(10px, 2.2cqw, 14px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #fff;
}

.sample-honesty,
.sample-privacy {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.sample-privacy { margin-top: 8px; }

.sample-book-cta {
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.sample-book-cta .btn-primary,
.sample-book-cta .btn-ghost { text-decoration: none; }

@media (max-width: 720px) {
  .sample-swap { grid-template-columns: 1fr; gap: 12px; }
  .sample-swap-arrow { transform: rotate(90deg); justify-self: center; }
  /* Stacked, a full-width 3:4 frame is most of a phone screen each, so the
     reader scrolls past the "before" without ever seeing it beside the
     "after" -- which is the whole comparison. Capped so both fit one look. */
  .sample-swap-photo,
  .sample-swap-page { width: 100%; max-width: 340px; margin-inline: auto; }
  .sample-book-pages { grid-template-columns: 1fr; }
  .sample-book-cta .btn-primary,
  .sample-book-cta .btn-ghost { width: 100%; justify-content: center; text-align: center; }
}