/* "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));
  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);
}

/* 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 are 220ms apart and start at 640ms, once the headings have settled. */
.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 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

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

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

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

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

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

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

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

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

@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;
  }
}

@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;
  }
}