/* home.css: home page (/) only. Hero spacing, the boxed feature bento, the "Trusted by" two-column block and
   the safety section rhythm. Numbers are the measured bboxes from reference/home (1440 and 390). */

/* ---- Hero: eyebrow, 20px, H1, 10px, intro, 34px, button, 30/20px, video flush to the section bottom ---- */
.home-hero { padding-bottom: 10px; }
/* Phones: the hero and "Learn and Unlock" headings/intros run edge to edge (x=0..390) while the video keeps 10px */
.home-hero .section-title, .home-hero .section-intro,
.home-features .section-title, .home-features .section-intro { margin-inline: calc(-1 * var(--gutter)); max-width: none; }
.home-hero__title { max-width: 750px; margin-top: 20px; }
.home-hero__cta { margin-top: 34px; }
.home-hero .video-block { margin-top: 30px; }
@media (min-width: 768px) {
  .home-hero { padding-bottom: 0; }
  .home-hero .section-title, .home-hero .section-intro,
  .home-features .section-title, .home-features .section-intro { margin-inline: auto; }
  .home-hero .section-intro, .home-features .section-intro { max-width: 563px; }
  .home-hero .home-hero__title { max-width: 750px; }
  .home-hero .video-block { margin-top: 20px; }
}

/* ---- "Learn and Unlock": five boxed cards, 3 then 2 ---- */
.home-features { padding: 32px 0 68px; }
.home-features__grid { row-gap: 60px; margin-top: 55px; padding-inline: 10px; }
.home-features__grid .bento__row { gap: 60px; }
.home-features__card--pad-end { padding-right: 32px; }
.home-features__media--notifications { justify-content: flex-start; }
@media (min-width: 768px) {
  .home-features { padding: 64px 0 80px; }
  .home-features__grid { row-gap: 41px; max-width: 1209px; margin: 54px auto 0; padding-inline: 0; }
  .home-features__grid .bento__row { gap: 20px; }
  .home-features__grid .bento__row--3 { grid-template-columns: 375fr 337fr 376fr; }
  .home-features__grid .bento__row--2 { grid-template-columns: 566fr 583fr; }
  .home-features__media--notifications { justify-content: center; }
}
@media (min-width: 1025px) {
  .home-features { padding: 80px 0 100px; }
  .home-features__grid .bento__row { gap: 60px; }
}

/* ---- "Trusted by": intro column + testimonial carousel (vertical above 1024px) ---- */
.home-trust { padding: 59px 0 60px; }
.home-trust__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 55px; }
.home-trust__intro .stars { display: flex; gap: 1px; }
.home-trust__intro .section-title { margin-top: 20px; }
.home-trust__intro p { max-width: 512px; margin-top: 14px; }
.home-trust__intro .section-title + p { margin-top: 14px; }
.home-trust__carousel .carousel__arrow { width: 24px; }
.home-trust__carousel .carousel__arrow--prev { left: -4px; }
.home-trust__carousel .carousel__arrow--next { right: 6px; }
@media (min-width: 768px) {
  .home-trust { padding: 64px 0; }
  .home-trust__carousel .carousel__arrow { width: 40px; }
  .home-trust__carousel .carousel__arrow--prev { left: -20px; }
  .home-trust__carousel .carousel__arrow--next { right: -20px; }
}
@media (min-width: 1025px) {
  .home-trust { padding: 61px 0 62px; }
  .home-trust__grid { grid-template-columns: 595px 591px; justify-content: space-between; align-items: center; }
  .home-trust__intro .section-title + p { margin-top: 15px; }
  .home-trust__carousel .carousel__arrow { width: 40px; }
}

/* ---- Safety video ---- */
.home-safety { padding: 32px 0 36px; }
.home-safety .video-block { margin-top: 50px; }
@media (min-width: 768px) {
  .home-safety { padding: 64px 0 28px; }
  .home-safety .video-block { margin-top: 40px; }
}
@media (min-width: 1025px) { .home-safety { padding-top: 80px; } }