.home-stage {
  overflow: hidden;
}

.home-stage__stage {
  background-color: var(--color-cyan-light);
  padding-block-start: calc(var(--header-height) + 5rem);
  position: relative;
}

.home-stage__stage-inner {
  display: flex;
  justify-content: space-between;

  @include use-container();
  @include use-responsive-sizing(column-gap, $gaps);
  @include use-responsive-sizing(flex-direction, (xs: column, m: row));
  @include use-responsive-sizing(align-items, (xs: center, m: stretch));
}

.home-stage__stage-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;

  @include use-responsive-sizing(text-align, (xs: center, m: left));
  @include use-responsive-sizing(width, (
    m: column-width(m, 8),
    l: column-width(l, 6),
    xl: column-width(xl, 6),
  ));
}

.home-stage__stage-headline {
  --headline-font-weight: var(--font-weight-light);
  --headline-kicker-font-weight: var(--font-weight-semibold);
  --headline-kicker-letter-spacing: -0.04em;
  --headline-kicker-spacing: 1rem;
  --headline-letter-spacing: -0.02em;

  margin-inline: auto;
  max-inline-size: 90%;

  @include use-responsive-sizing(--headline-kicker-font-size, responsive-map(xs 3.6rem, xl 5.2rem));
  @include use-responsive-sizing(margin-block-start, responsive-map(m 2rem, xl 3rem));

  @include mq($from: m) {
    margin-inline: 0;
    max-inline-size: 55rem;
  }

  @include mq($from: xl) {
    max-inline-size: 80rem;
  }
}

.home-stage__stage-call-to-action {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 50rem;

  @include mq($from: m) {
    margin-block-start: 2rem;
    margin-inline: 0;
  }
}

.home-stage__stage-text {
  --link-color: var(--color-orange);
  --line-underline-color: var(--color-orange);

  font-size: 1.6rem;
  line-height: var(--line-height-body);
  opacity: 0.4;
  transition-property: opacity;

  &:hover {
    opacity: 1;
  }

  @include mq($from: m) {
    margin-block-end: 3rem;
  }
}

.home-stage__stage-image-container {
  @include use-responsive-sizing(width, (
    m: column-width(m, 6),
    l: column-width(l, 6),
    xl: column-width(xl, 6),
  ));

  @include mq($from: m) {
    align-self: flex-end;
  }
}

.home-stage__stage-image {
  margin-block-start: 4rem;
  margin-inline: auto;
  max-inline-size: 80%;

  @include mq($from: m) {
    inline-size: calc(140% + (var(--inner-container-padding) * 2));
    margin-block-start: -6rem;
    margin-inline-end: calc(var(--inner-container-padding) * -2);
    max-inline-size: 60rem;
  }

  @include mq($from: l) {
    inline-size: calc(105% + (var(--inner-container-padding) * 2));
  }

  @include mq($from: xl) {
    inline-size: 100%;
  }
}

.home-stage__benefits {
  position: relative;

  @include use-responsive-sizing(--home-stage-benefits-column-gap, $gaps);
  @include use-responsive-sizing(--home-stage-benefits-inner-gap, responsive-map(xs 3rem, xl 5rem));
  @include use-responsive-sizing(--home-stage-benefits-space, (m: 4rem, l: 6rem, xl: 8rem));
  @include use-responsive-sizing(--home-stage-benefits-row-gap, (xs: 6rem, l: 8rem, xl: 10rem));
}

.home-stage__benefits-inner {
  --home-stage-benefits-padding-inline: calc((var(--home-stage-benefits-column-gap) / 2) + var(--home-stage-benefits-space));

  display: grid;
  grid-template-areas: 'checklist' 'call-to-action' 'offers';
  grid-template-rows: auto auto auto;

  @include use-container($start-breakpoint: m);

  @include mq($from: m) {
    grid-template-areas:
      'checklist checklist call-to-action call-to-action'
      'offers offers offers _';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
  }
}

.home-stage__checklist {
  --bullet-list-spacing: calc(var(--home-stage-benefits-inner-gap) / 2);

  font-weight: var(--font-weight-semibold);
  grid-area: checklist;
  padding-block: var(--home-stage-benefits-row-gap);
  padding-inline: var(--inner-container-padding);

  @include use-responsive-sizing(font-size, responsive-map(xs 2rem, xl 2.2rem));

  @include mq($from: m) {
    padding-block-end: calc(var(--home-stage-benefits-row-gap) * 2);
    padding-inline-end: var(--home-stage-benefits-padding-inline);
    padding-inline-start: 0;
  }
}

.home-stage__call-to-action {
  align-items: center;
  background-color: var(--color-orange-light);
  display: flex;
  flex-direction: column;
  gap: var(--home-stage-benefits-inner-gap);
  grid-area: call-to-action;
  justify-content: center;
  padding-block: var(--home-stage-benefits-row-gap);
  padding-inline: var(--inner-container-padding);
  position: relative;
  text-align: center;

  &::after {
    background-color: var(--color-orange-light);
    content: '';
    inline-size: 100vw;
    inset-block: 0;
    inset-inline-start: 100%;
    position: absolute;
  }

  @include mq($from: m) {
    align-items: flex-start;
    padding-block-end: calc(var(--home-stage-benefits-row-gap) * 2);
    padding-inline-end: 0;
    padding-inline-start: var(--home-stage-benefits-padding-inline);
    text-align: start;
  }
}

.home-stage__call-to-action-icon {
  color: var(--color-orange);
  inset-block-start: 0;
  inset-inline: 50%;
  position: absolute;
  transform: translate(-50%, -50%);

  @include use-responsive-sizing(font-size, responsive-map(xs 6rem, xl 8rem));

  @include mq($from: m) {
    inset-block-start: 50%;
    inset-inline-end: auto;
    inset-inline-start: 0;
    transform: translate(-50%, calc(-50% - (var(--home-stage-benefits-row-gap) / 2)));
  }
}

.home-stage__offers {
  background-color: var(--color-cyan-light);
  display: flex;
  flex-direction: column;
  gap: var(--home-stage-benefits-inner-gap);
  grid-area: offers;
  padding-block: var(--home-stage-benefits-row-gap);
  padding-inline: var(--inner-container-padding);
  position: relative;
  text-align: center;

  &::before {
    background-color: var(--color-cyan-light);
    content: '';
    inline-size: 100vw;
    inset-block: 0;
    inset-inline-end: 100%;
    position: absolute;
  }

  @include mq($from: m) {
    margin-block-start: calc(var(--home-stage-benefits-row-gap) * -1);
    padding-inline-end: var(--home-stage-benefits-padding-inline);
    padding-inline-start: 0;
  }
}

.home-stage__offers-icon {
  color: var(--color-orange);
  inset-block-start: 0;
  inset-inline: 50%;
  position: absolute;
  transform: translate(-50%, -50%) rotate(-45deg);

  @include use-responsive-sizing(font-size, responsive-map(xs 8rem, xl 12rem));

  @include mq($from: m) {
    inset-inline-end: 0;
    inset-inline-start: auto;
    transform: translate(50%, -25%) rotate(0);
  }
}

.home-stage__offers-headline {
  margin-inline: auto;
  max-inline-size: 60rem;
}

.home-stage__offers-grid {
  display: grid;
  row-gap: 3rem;

  @include use-responsive-sizing(column-gap, $gaps);

  @include mq($from: 500px) {
    grid-template-columns: 1fr 1fr;
    row-gap: 4rem;
  }
}

.home-stage__offers-grid-cell {
  display: flex;
  flex-direction: column-reverse;
}

.home-stage__offer {
  --home-stage-offer-color: var(--color-orange);

  display: block;

  &:any-link:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    --home-stage-offer-color: var(--color-midnight);
  }
}

.home-stage__offer-text {
  color: var(--home-stage-offer-color);
  display: block;
  font-family: var(--font-family-indie-flower);
  font-size: 10rem;
  transition-property: color;
}

.home-stage__offer-label {
  display: block;
  font-size: 1.6rem;
  margin-block-start: 1rem;
}