/* v52 final Kevin fixes
   - Section 1 mobile: close logo-to-kicker gap and place hero image between H1 and paragraph.
   - Section 4 all sizes: use the real timer icon asset and remove arrowhead/triangle entirely. */

.hero__mobile-image {
  display: none;
}

/* Section 4: global clean line, no arrowhead, real timer icon */
.workflow-timer-icon {
  background: transparent url('./assets/timer-icon-white-v51.png') center center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)) !important;
}

.workflow-timer-icon::before,
.workflow-timer-icon::after,
.workflow-diagram::after,
.workflow-line,
.workflow-line::after {
  content: none !important;
  display: none !important;
}

.workflow-diagram::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #11998e 0%, #38ef7d 100%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 18px 44px rgba(56,239,125,.20) !important;
}

@media (min-width: 1041px) {
  .workflow-timer-icon {
    left: 24px !important;
    top: 0 !important;
    width: clamp(78px, 6.6vw, 96px) !important;
    height: clamp(78px, 6.6vw, 96px) !important;
  }

  .workflow-diagram::before {
    left: 64px !important;
    top: 104px !important;
    bottom: 138px !important;
  }
}

@media (max-width: 1040px) {
  .workflow-timer-icon {
    left: 20px !important;
    top: 0 !important;
    width: 48px !important;
    height: 48px !important;
  }

  .workflow-diagram::before {
    left: 42px !important;
    top: 60px !important;
    bottom: 104px !important;
    width: 5px !important;
  }
}

/* Section 1 mobile composition */
@media (max-width: 860px) {
  .hero {
    padding-top: 74px !important;
  }

  .hero__content {
    padding-top: 14px !important;
  }

  .hero__eyebrow {
    margin-bottom: 24px !important;
  }

  .hero__media {
    display: none !important;
  }

  .hero__mobile-image {
    display: block !important;
    width: 100% !important;
    max-width: 620px !important;
    aspect-ratio: 16 / 10 !important;
    margin: 22px 0 22px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 70px rgba(91,58,31,.15) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    background: #f5eee7 !important;
  }

  .hero__mobile-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: .94 !important;
    filter: saturate(1.04) contrast(1.02) !important;
  }

  .hero__subheadline {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero {
    padding-top: 68px !important;
  }

  .hero__content {
    padding-top: 10px !important;
  }

  .hero__eyebrow {
    margin-bottom: 20px !important;
  }

  .hero__mobile-image {
    aspect-ratio: 4 / 3 !important;
    margin-top: 18px !important;
    margin-bottom: 20px !important;
    border-radius: 24px !important;
  }
}