/* ==========================================================================
   home.css - page-specific styles for index.html
   Figma frame "First Page" 383:3698 (1920 x 13591).
   ========================================================================== */

/* ==========================================================================
   Build your WorkFlow
   ========================================================================== */

.workflow__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-6);
}

.workflow__lede {
  /* Figma: Poppins Light 18 */
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-ink-strong);
  max-width: 617px;
  margin-bottom: var(--sp-8);
}

.workflow__media img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Explore LivexFlow - green band
   ========================================================================== */

.explore {
  position: relative;
  background-color: var(--c-green-400);
  padding-block: var(--sp-14);
  color: var(--c-white);
  isolation: isolate;
}

.explore__eyebrow,
.explore__title,
.explore__lede {
  color: var(--c-white);
}

.explore__lede {
  max-width: 943px;
}

.explore__cta {
  margin-top: var(--sp-6);
  color: var(--c-green-400);
}

/* Figma cards: 542 x 709, r55; first white, the other two #f8f8f8. */
.explore__grid {
  gap: 47px;
  margin-top: var(--sp-12);
  align-items: stretch;
}

.explore-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  height: 100%;
  padding: var(--sp-9) var(--sp-8) var(--sp-8);
  border-radius: 55px;
  background-color: var(--c-surface-alt);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.explore-card:first-child {
  background-color: var(--c-white);
}

.explore-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-xl);
}

.explore-card__title {
  /* Figma: Poppins Medium 35 */
  font-family: var(--ff-ui);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  color: var(--c-ink-strong);
}

.explore-card__body {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-ink-600);
}

/* In Figma the artwork is wider than the 542px card and bleeds past its edges. */
.explore-card__media {
  margin-top: var(--sp-6);
  width: 112%;
  margin-inline: -6%;
}

.explore-card__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* Pill link at the foot of each card. */
.explore-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: var(--tap-target);
  padding: var(--sp-3) var(--sp-8);
  border: var(--bw-hairline) solid var(--c-green-500);
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-green-400);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.explore-card__link:hover {
  background-color: var(--c-green-400);
  color: var(--c-white);
}

/* ==========================================================================
   Sign-off
   ========================================================================== */

.signoff__title {
  max-width: none;
}

.signoff__lede {
  /* Figma: Poppins Light 22 / #000 */
  font-family: var(--ff-ui);
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  color: var(--c-ink-strong);
  max-width: 1121px;
}

.signoff__media {
  margin: 0;
}

.signoff__media img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1400px) {
  .explore__grid { gap: var(--sp-7); }
}

@media (max-width: 1024px) {
  .explore-card { border-radius: var(--r-xl); }
}

@media (max-width: 768px) {
  .workflow__lede { max-width: none; }
}

@media (max-width: 480px) {
  .explore-card { padding: var(--sp-7) var(--sp-6); }
}