/* "One platform, every surface." (Figma: home / Section 6755:3751). */

.fl-platform {
  box-sizing: border-box;
  width: 100%;
  padding: 0 40px;
  font-family: var(--fl-font-sans);
}

.fl-platform__title {
  margin: 0;
  color: var(--fl-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 61.2px;
}

.fl-platform__script {
  color: var(--fl-green);
  font-family: var(--fl-font-script);
  font-weight: 700;
}

.fl-platform__lede {
  max-width: 768px;
  margin: 16px 0 0;
  color: var(--fl-text-muted);
  font-size: 16px;
  line-height: 24px;
}

.fl-platform__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 260px));
  row-gap: 32px;
  column-gap: 20px;
  margin-top: 56px;
}

.fl-platform__card {
  position: relative;
  box-sizing: border-box;
  height: 340px;
  overflow: hidden;
  border: 2px solid var(--fl-ink);
  border-radius: 6px;
  background: #fbfcfd;
  box-shadow: var(--fl-shadow-lg);
}

/* Hover lift 20px (Figma 6755:3751). Uses translate so entrance animation
   transform does not block hover. */
@media (hover: hover) {
  .fl-platform__card {
    transition: translate 0.2s ease;
  }

  .fl-platform__card:hover {
    translate: 0 -20px;
  }
}

/* Each illustration keeps the exact size and offset it has in the design. */
.fl-platform__art {
  position: absolute;
  top: var(--art-top);
  left: var(--art-left);
  width: var(--art-width);
  height: var(--art-height);
}

.fl-platform__text {
  position: absolute;
  top: 189px;
  right: 20px;
  left: 20px;
}

.fl-platform__card-title {
  margin: 0;
  align-self: stretch;
  color: #151a26;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 30px;
}

.fl-platform__card-body {
  margin: 4px 0 0;
  color: var(--fl-text-muted);
  font-size: 14px;
  line-height: 22.75px;
}

/* Section reveal — the heading and the line under it rise in one after the
   other, then the cards follow. The grid fills in DOM order, which runs left
   to right across the top row and then the second, so it reads top to bottom.

   The cards follow in a compact stagger once the heading starts to settle. */
.fl-platform--armed .fl-platform__title,
.fl-platform--armed .fl-platform__lede,
.fl-platform--armed .fl-platform__card {
  opacity: 0;
}

.fl-platform--play .fl-platform__title,
.fl-platform--play .fl-platform__lede {
  animation: fl-platform-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fl-platform--play .fl-platform__lede {
  animation-delay: 120ms;
}

.fl-platform--play .fl-platform__card {
  animation: fl-platform-card-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fl-platform--play .fl-platform__card:nth-child(1) {
  animation-delay: 240ms;
}

.fl-platform--play .fl-platform__card:nth-child(2) {
  animation-delay: 360ms;
}

.fl-platform--play .fl-platform__card:nth-child(3) {
  animation-delay: 480ms;
}

.fl-platform--play .fl-platform__card:nth-child(4) {
  animation-delay: 600ms;
}

.fl-platform--play .fl-platform__card:nth-child(5) {
  animation-delay: 720ms;
}

.fl-platform--play .fl-platform__card:nth-child(6) {
  animation-delay: 840ms;
}

.fl-platform--play .fl-platform__card:nth-child(7) {
  animation-delay: 960ms;
}

@keyframes fl-platform-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fl-platform-card-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-platform--armed .fl-platform__title,
  .fl-platform--armed .fl-platform__lede,
  .fl-platform--armed .fl-platform__card,
  .fl-platform--play .fl-platform__title,
  .fl-platform--play .fl-platform__lede,
  .fl-platform--play .fl-platform__card {
    opacity: 1;
    animation: none;
  }

  .fl-platform__card:hover {
    translate: none;
  }
}

@media (max-width: 1219px) {
  .fl-platform {
    padding: 0;
    text-align: center;
  }

  .fl-platform__lede {
    margin-left: auto;
    margin-right: auto;
  }

  .fl-platform__grid {
    grid-template-columns: repeat(auto-fit, minmax(232px, 260px));
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .fl-platform {
    padding: 0;
  }

  .fl-platform__title {
    font-size: clamp(40px, 6.5vw, 60px);
    line-height: 1.02;
  }

  .fl-platform__grid {
    margin-top: 40px;
  }
}

@media (max-width: 600px) {
  .fl-platform__grid {
    grid-template-columns: minmax(0, 260px);
    justify-content: center;
  }
}