/* Why I built it: one chapter per beat, each with its own picture. */
.why-hero .byline { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 8px 16px 8px 10px; border-radius: 999px; background: #ffffff14; color: var(--night-ink); font-size: .95rem; font-weight: 750; }
.why-line { max-width: 40rem; margin: 26px 0 0; font-size: 1.12rem; line-height: 1.6; color: var(--muted); }

/* 1. The problem: the asks every other app makes, struck out. */
.why-problem h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 0 0 26px; }
.asks { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.asks li { padding: 12px 18px; border-radius: 16px; background: var(--soft); font-weight: 800; rotate: -1.5deg; }
.asks li:nth-child(even) { rotate: 1.5deg; }
.asks s { text-decoration-thickness: 3px; text-decoration-color: #e2553d; }

/* 2. The answer and its proof: words light up on a book page, on the tablet. */
.why-answer.night { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.why-answer .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.answer-copy h2 { margin: 10px 0 14px; color: var(--night-ink); font-size: clamp(2rem, 4vw, 3rem); }
.answer-copy p { margin: 0; color: var(--night-muted); font-size: 1.15rem; line-height: 1.6; }
.read-proof { margin: 0; padding: 18px; border-radius: 28px; background: #ffffff0d; border: 1px solid #ffffff14; }
.read-book img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.read-words { margin: 16px 6px 12px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 900; line-height: 1.4; color: #ffffff59; }
.read-words span { animation: read-light 6s linear infinite; animation-delay: calc(var(--w) * .55s); }
@keyframes read-light { 0% { color: #ffffff59; } 4%, 70% { color: var(--gold); } 90%, 100% { color: #ffffff59; } }
.read-proof figcaption { display: flex; flex-wrap: wrap; gap: 8px; }
.read-proof figcaption span { padding: 5px 12px; border-radius: 999px; background: #ffffff14; color: var(--night-ink); font-size: 13px; font-weight: 800; }
.read-proof figcaption span:last-child { background: var(--gold); color: #2b2a26; }

/* 3. What's free, each with a stamp. */
.why-free h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 0 0 26px; }
.free-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.free-tiles li { position: relative; display: grid; gap: 4px; padding: 26px 16px 22px; border-radius: 22px; background: var(--soft); text-align: center; }
.free-tiles b { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--link); letter-spacing: -.03em; }
.free-tiles span { font-weight: 800; }
.free-tiles i { position: absolute; top: -10px; right: -6px; padding: 4px 10px; border-radius: 999px; background: var(--gold); color: #2b2a26; font-style: normal; font-weight: 900; font-size: 12px; rotate: 8deg; box-shadow: 0 3px 8px #0003; }

/* 4. The one thing that costs, said plainly. */
.cost-card { max-width: 46rem; padding: 30px; border-radius: 26px; border: 2px dashed var(--soft); }
.cost-card h2 { margin: 8px 0 10px; }
.cost-card p { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }

/* 5. Why you're there. */
.why-there .wrap { max-width: 50rem; text-align: center; }
.why-there blockquote { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; line-height: 1.3; }
.sign-off { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0; font-weight: 900; font-size: 1.5rem; }
.sign-off img { animation: float 5.5s ease-in-out infinite; }

@media (max-width: 900px) {
  .why-answer .wrap { grid-template-columns: 1fr; }
  .free-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .free-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-hero .byline { border-radius: 18px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .read-words span { animation: none; color: var(--gold); }
  .sign-off img { animation: none; }
}

/* Back-to-back sections lose their top padding in site.css, so each chapter sets its own. */
.section.why-free { padding-top: clamp(56px, 7vw, 96px); }
.section.why-cost, .section.why-there { padding-top: clamp(40px, 5vw, 72px); }

/* The answer lands on "for good" in gold. */
.answer-copy .gold { color: var(--gold); }

/* What's free: a shelf of real things, each stamped, with the one exception joined underneath. */
.why-free h2 { margin-bottom: 10px; }
.free-line { max-width: 40rem; margin: 0 0 28px; color: var(--muted); font-size: 1.1rem; line-height: 1.55; }
.free-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.free-shelf li { position: relative; border-radius: 22px; background: var(--soft); overflow: visible; }
.free-shelf img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px 22px 0 0; }
.free-shelf div { display: grid; gap: 2px; padding: 14px 16px 18px; }
.free-shelf b { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; color: var(--link); letter-spacing: -.03em; }
.free-shelf span { font-weight: 800; }
.free-shelf i { position: absolute; top: -10px; right: -8px; padding: 5px 11px; border-radius: 999px; background: var(--gold); color: #2b2a26; font-style: normal; font-weight: 900; font-size: 12.5px; rotate: 8deg; box-shadow: 0 3px 10px #0004; }
.exception { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 18px; padding: 18px 22px; border-radius: 20px; background: var(--night); color: var(--night-ink); }
.exception .kicker { color: var(--gold); }
.exception p { margin: 0; flex: 1 1 24rem; color: var(--night-muted); line-height: 1.55; }
.exception b { color: var(--night-ink); }
@media (max-width: 900px) { .free-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .free-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.exception a { color: var(--gold); font-weight: 800; }

/* Six asks in an even grid: three across on a computer, two across on a phone. The strike is
   soft so the words read first. */
.asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.asks li { display: flex; align-items: center; min-height: 58px; }
.asks s { text-decoration-color: #e2553d8c; text-decoration-thickness: 2px; color: var(--ink); }
@media (max-width: 760px) { .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asks li { font-size: 14.5px; padding: 12px 14px; } }

/* The asks get crossed out one by one as they arrive. A drawn line replaces the text strike;
   without script (no .reveal) or with reduced motion it is simply already drawn. */
.asks s { position: relative; text-decoration: none; }
.asks s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 2.5px; border-radius: 2px; background: #e2553dcc; transform: scaleX(1); transform-origin: left center; }
.asks li.reveal s::after { transform: scaleX(0); transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.asks li.reveal.is-in s::after { transform: scaleX(1); transition-delay: calc(var(--ri, 0) * 220ms + 550ms); }
@media (prefers-reduced-motion: reduce) { .asks li.reveal s::after { transform: scaleX(1); transition: none; } }

/* Cards without a count show their name big instead of a number. */
.free-shelf div:has(span:empty) b { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.free-shelf span:empty { display: none; }

/* Made for my kid. Free for yours. Each line pops in a word at a time, the second in gold. */
.why-head .line { display: block; }
.why-head .gold { color: var(--gold); }
/* Steve's voice note, shown once the recording is in place. */
.steve-note { display: inline-flex; align-items: center; gap: 12px; margin: 22px auto 0; padding: 10px 20px 10px 10px; border: 1px solid #ffffff26; border-radius: 999px; background: #ffffff12; color: var(--night-ink); font: inherit; text-align: left; cursor: pointer; transition: background .2s, transform .16s cubic-bezier(.2, .8, .2, 1); }
.steve-note:hover { background: #ffffff1f; }
.steve-note:active { transform: scale(.97); }
.steve-note b { display: block; }
.steve-note small { display: block; color: var(--night-muted); font-size: .85rem; }
.note-dot { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); }
.note-dot::after { content: ""; margin-left: 4px; border-left: 13px solid #2b2a26; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.steve-note.is-playing .note-dot::after { margin: 0; width: 13px; height: 15px; border: 0; background: linear-gradient(90deg, #2b2a26 0 35%, transparent 35% 65%, #2b2a26 65%); }
/* The belief, set large like a line you'd remember. */
.why-belief { text-align: center; }
.why-belief .belief { max-width: 22ch; margin: 0 auto; font-weight: 900; font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.why-belief .belief-line { max-width: 620px; margin: 22px auto 0; color: var(--muted); font-size: 1.15rem; line-height: 1.6; }
/* Signed like a letter. */
.signature { font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--link); line-height: 1; }