/* 01-hero.css - P2. Every selector starts with .s-hero, per spec 4.4. */

.s-hero {
  position: relative;
  padding: 96px 0 112px;
}
.s-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--paper));
}

.s-hero__stage {
  position: relative;
  min-height: 560px;
}

.s-hero__text {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.s-hero__text .lede {
  margin: 20px auto 0;
  max-width: 600px;
  text-align: center;
}

.s-hero__who {
  margin: 20px auto 0;
  max-width: 560px;
  text-align: center;
}

.s-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.s-hero__stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.s-hero__stickers .sticker--static {
  position: absolute;
}

/* desktop sticker positions (>= 1200) */
.s-hero__sticker--1 { left: 24px; top: 120px; }
.s-hero__sticker--2 { left: 64px; top: 282px; }
.s-hero__sticker--3 { left: 4px; top: 380px; }
.s-hero__sticker--4 { right: 6px; top: 112px; }
.s-hero__sticker--5 { right: 118px; top: 258px; }
.s-hero__sticker--6 { right: 4px; top: 408px; }

@media (max-width: 1199px) {
  .s-hero__stage {
    min-height: 520px;
  }
  .s-hero__text {
    max-width: 640px;
  }
  .s-hero__stickers .sticker {
    --sk: .8;
    transform: rotate(var(--rot)) scale(var(--sk));
  }
  .s-hero__sticker--1 { left: -8px; top: 96px; }
  .s-hero__sticker--2 { left: 80px; }
  .s-hero__sticker--3 { left: 20px; }
  .s-hero__sticker--4 { right: -8px; top: 88px; }
  .s-hero__sticker--5 { right: 134px; }
  .s-hero__sticker--6 { right: 20px; }
}

/* only the lower part of the tablet bucket is too narrow (640px text column
   plus scaled S1/S4) to fit sticker--1/4 without touching the h1/lede; the
   upper part (1000 to 1199) has room, so the six-sticker collage now shows
   there instead of across the whole 810-1199 range going quiet. */
@media (max-width: 999px) {
  .s-hero__sticker--1,
  .s-hero__sticker--4 {
    display: none;
  }
}

@media (max-width: 809px) {
  .s-hero {
    padding: 56px 0 64px;
  }
  .s-hero__stage {
    min-height: 0;
  }
  .s-hero__stickers {
    position: static;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px;
  }
  .s-hero__stickers .sticker--static {
    position: static;
    transform: rotate(var(--rot)) scale(.8);
  }
  .s-hero__sticker--1 {
    display: block;
  }
  .s-hero__sticker--2,
  .s-hero__sticker--3,
  .s-hero__sticker--4,
  .s-hero__sticker--6 {
    display: none;
  }
}