/* Homepage hero: a swipe between the new book (How Money Works for Special Needs Families) and the
   original "We teach people how money works." header. Native horizontal scroll-snap does the swiping
   (touch, trackpad); /js/hmw-hero.js adds the dots, arrows and a gentle auto-advance.
   Both slides share one grid row, so they are always the same height (the original header sets it). */
/* capped and centred like the original header and the sections below it (90rem), so on wide screens both slides,
   the arrows and the dots stay inside the page instead of running to the window's edges */
.hmw-hero { position: relative; max-width: 90rem; margin-left: auto; margin-right: auto; --hmw-hero-orange: #F1672A; --hmw-hero-ink: #1C1B1A; }
.hmw-hero-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hmw-hero-track::-webkit-scrollbar { display: none; }
.hmw-hero-slide { min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
/* the original header would shrink to its content inside the track; full width keeps its own 90rem cap */
.hmw-hero-track > .header { width: 100%; }

/* slide 1: the new book */
.hmw-hero-snf {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 41%);
  background: var(--hmw-hero-orange) url('/images/hmw4snf/orange-pattern.svg') 50% 50% / cover no-repeat;
  color: #fff; overflow: hidden;
}
.hmw-hero-snf-copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  /* the left edge lines up with the page's container, but never under the prev arrow (20px + 52px); the
     bottom stays clear of the four-books picture that the next section lays over the hero's lower left corner */
  padding: 64px 48px 150px max(92px, calc((min(100vw, 90rem) - 73.25rem) / 2 + 20px));
}
.hmw-hero-eyebrow { margin: 0 0 18px; color: var(--hmw-hero-ink); font-size: 15px; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
.hmw-hero-headline { margin: 0; color: #fff; font-family: Proximasoft, sans-serif; font-size: clamp(46px, 6.1vw, 92px); font-weight: 700; letter-spacing: -.015em; line-height: .98; }
.hmw-hero-headline span { display: block; color: var(--hmw-hero-ink); }
.hmw-hero-title { margin: 34px 0 6px; color: #fff; font-size: clamp(21px, 1.95vw, 28px); font-weight: 600; line-height: 1.22; }
.hmw-hero-by { margin: 0; color: #fff; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.3; }
.hmw-hero-text { max-width: 28em; margin: 16px 0 30px; color: #fff; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; }
.hmw-hero-snf .button.hmw-hero-button { background-color: var(--hmw-hero-ink); border-color: var(--hmw-hero-ink); color: #fff; }
.hmw-hero-snf .button.hmw-hero-button:hover { background-color: #3a3735; border-color: #3a3735; }
.hmw-hero-snf .button.hmw-hero-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hmw-hero-snf-photo { position: relative; min-height: 100%; }
.hmw-hero-snf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* The next section's four-books picture is pulled up over the hero's lower left corner (margin-top: -132px
   on desktop). The hero is positioned (for its arrows and dots), so it would paint over the books; lift them back
   above it, as on the original page. */
.hmw-hero ~ .main .home-cta---left-image { position: relative; z-index: 4; }

/* arrows and dots */
.hmw-hero-arrow {
  position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--hmw-hero-ink); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transition: background-color .2s, transform .2s;
}
.hmw-hero-arrow:hover { background: #fff; transform: scale(1.05); }
.hmw-hero-arrow:focus-visible { outline: 3px solid var(--hmw-hero-ink); outline-offset: 3px; }
.hmw-hero-arrow.is-prev { left: 20px; }
.hmw-hero-arrow.is-next { right: 20px; }
.hmw-hero-dots { position: absolute; left: 50%; bottom: 26px; z-index: 3; display: flex; gap: 12px; transform: translateX(-50%); }
.hmw-hero-dot {
  width: 14px; height: 14px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: transparent; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: background-color .2s;
}
.hmw-hero-dot[aria-current="true"] { background: #fff; }
.hmw-hero-dot:focus-visible { outline: 3px solid var(--hmw-hero-ink); outline-offset: 3px; }

@media screen and (max-width: 991px) {
  .hmw-hero-snf { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); }
  .hmw-hero-snf-copy { padding: 56px 32px 64px 32px; }
  .hmw-hero-arrow { display: none; }
}
@media screen and (max-width: 767px) {
  .hmw-hero-snf { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(260px, 1fr); }
  .hmw-hero-snf-copy { padding: 44px 20px 30px; }
  .hmw-hero-title { margin-top: 24px; }
  .hmw-hero-text { margin-bottom: 24px; }
  .hmw-hero-snf-photo img { object-position: 50% 38%; }
  .hmw-hero-dots { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hmw-hero-track { scroll-behavior: auto; }
  .hmw-hero-arrow, .hmw-hero-dot { transition: none; }
}