/* Homepage v3 (10-04): course-led sections reuse course-shop.css (walkthrough, journey, Suite try-it). */

/* Course: the three numbers under the walkthrough */
.hm-stats { list-style: none; max-width: 1120px; margin: clamp(26px, 3vw, 40px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.hm-stats li { display: grid; gap: 6px; padding: clamp(20px, 2.2vw, 28px); border-radius: 26px; background: #fff; box-shadow: var(--soft); }
.hm-stats b { font: 800 clamp(40px, 4vw, 56px)/.9 var(--f-disp); letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: var(--g-sun); padding-bottom: .06em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-stats span { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink-soft); }

/* Price row closing the course story */

/* E-books: a real shelf, covers big enough to read */
.hm-books { background: linear-gradient(180deg, var(--paper) 0%, #FFF1D2 100%); }
.hm-books-head { max-width: 1240px; margin: 0 auto clamp(30px, 3.6vw, 48px); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; }
.hm-books-head .display { margin: 0; font-size: clamp(32px, 3.8vw, 54px); }
.hm-books-side p { margin: 0 0 20px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--ink-soft); }
.hb-shelf { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.hb-book { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.hb-cover { display: block; aspect-ratio: 720 / 1180; overflow: hidden; border-radius: 14px; background: #FFE9BD; box-shadow: 0 26px 40px -24px rgba(90, 45, 0, .6), 0 2px 6px rgba(90, 45, 0, .12); transition: transform .5s var(--spring), box-shadow .5s; }
.hb-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hb-book:hover .hb-cover { transform: translateY(-8px); box-shadow: 0 36px 50px -24px rgba(90, 45, 0, .65), 0 2px 6px rgba(90, 45, 0, .12); }
.hb-book small { margin-top: 16px; font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #C26A00; }
.hb-book b { margin-top: 6px; font: 800 clamp(16px, 1.3vw, 19px)/1.15 var(--f-disp); letter-spacing: -.03em; }
.hb-line { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }
.hb-price { margin-top: 10px; align-self: flex-start; padding: 6px 11px; border-radius: 999px; background: #fff; font: 700 13px/1 var(--f-mono); box-shadow: 0 6px 14px -8px rgba(90, 45, 0, .45); }

@media (max-width: 900px) {
  .hm-stats { grid-template-columns: 1fr; }
  .hm-books-head { grid-template-columns: 1fr; }
  .hb-shelf { display: flex; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hb-shelf::-webkit-scrollbar { display: none; }
  .hb-book { flex: none; width: 58%; max-width: 230px; scroll-snap-align: start; }
}
/* The closing invitation shares one expansive scene with the copy. */
.hm-final { isolation: isolate; min-height: clamp(600px, 49vw, 780px); display: flex; align-items: center; background: #FFF4DA; padding: clamp(72px, 7vw, 110px) var(--gutter); }
.hm-final-scene { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hm-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 246, 222, .76) 0%, rgba(255, 246, 222, .48) 34%, rgba(255, 246, 222, 0) 58%); pointer-events: none; }
.hm-final .final-inner { display: block; width: 100%; }
.hm-final .final-copy { width: 52%; max-width: 650px; }
.hm-final .final-title { font-size: clamp(38px, 4.3vw, 66px); }
.hm-final .final-title .ht-accent { color: #F16B16; text-shadow: none; }
@media (max-width: 900px) {
  .hm-final { display: block; min-height: 0; padding: 0 0 56px; }
  .hm-final-scene { position: relative; inset: auto; z-index: 0; display: block; height: clamp(300px, 72vw, 480px); object-position: right center; }
  .hm-final::before { display: none; }
  .hm-final .final-inner { padding: 30px var(--gutter) 0; }
  .hm-final .final-copy { width: auto; max-width: 600px; margin: 0 auto; }
  .hm-final .final-title { font-size: clamp(38px, 6.5vw, 56px); }
}

@media (prefers-reduced-motion: reduce) { .hb-cover { transition: none; } .hb-book:hover .hb-cover { transform: none; } }

/* the Suite ends on one button, and the testers follow close behind */
.hm-page .cs-suite { padding-bottom: clamp(44px, 5vw, 70px); }
.hm-page .hm-px { padding-top: clamp(40px, 4.6vw, 64px); }
.hm-suite-cta { margin-top: clamp(26px, 3vw, 40px); }
.hm-course .cs-head h2 .grad { display: inline; }