/*
 * Homepage first-fold fit and products handoff.
 *
 * This final, narrowly scoped layer keeps the complete hero visible on
 * practical desktop screens while preserving natural document flow on
 * mobile and at extreme browser zoom levels.
 */

/* The products section follows the orange stage on a light page. Explicit
   tokens prevent it from inheriting the legacy dark homepage palette. */
.site-home--cf-v2 #products.mailcore-products {
  --surface-base: #fff;
  --text-strong: #151414;
  --text-subtle: #5f5551;
  --line: #dedbd9;
  border-block-start: 0;
  color: var(--cf2-ink);
  background: var(--cf2-paper);
}

.site-home--cf-v2 #products .mailcore-products__head .type-h2 {
  color: var(--cf2-ink-deep);
}

.site-home--cf-v2 #products .mailcore-products__head .lead {
  color: var(--cf2-body);
}

.site-home--cf-v2 #products .mailcore-product-card {
  border-color: var(--cf2-line);
  color: var(--cf2-ink);
  background: #fff;
}

.site-home--cf-v2 #products .mailcore-product-card--api {
  border-color: #e3a165;
  background: #fffaf6;
}

.site-home--cf-v2 #products .mailcore-product-card h3 {
  color: var(--cf2-ink-deep);
}

.site-home--cf-v2 #products .mailcore-product-card__label,
.site-home--cf-v2 #products .mailcore-product-card > p:not(.mailcore-product-card__label) {
  color: #5f5551;
}

@media (min-width: 64rem) and (min-height: 37.5rem) {
  .site-home--cf-v2 .hero {
    padding-block: 8px;
  }

  .site-home--cf-v2 .hero__surface {
    grid-template-rows: minmax(0, 1fr) clamp(108px, 18svh, 176px);
    height: calc(100svh - var(--header-height) - 16px);
    min-height: 0;
    padding: 0;
  }

  .site-home--cf-v2 .hero__copy {
    align-self: center;
    inset-block-start: 0;
    padding: clamp(16px, 4svh, 40px) 0 clamp(8px, 1.6svh, 16px);
  }

  .site-home--cf-v2 .hero .type-h1 {
    font-size: clamp(2.75rem, min(4.5vw, 7svh), 4rem);
  }

  .site-home--cf-v2 .hero .lead {
    margin-top: clamp(14px, 2.6svh, 26px);
    font-size: clamp(1rem, min(1.5vw, 2.2svh), 1.25rem);
    line-height: 1.45;
  }

  .site-home--cf-v2 .hero__actions {
    margin-top: clamp(16px, 3.2svh, 30px);
  }

  .site-home--cf-v2 .hero__price-line {
    margin-top: clamp(8px, 2svh, 18px);
  }

  .site-home--cf-v2 .hero-mail {
    position: relative;
    grid-row: 2;
    inset: auto;
    width: 100%;
    height: 100%;
  }
}

@media (forced-colors: active) {
  .site-home--cf-v2 #products.mailcore-products,
  .site-home--cf-v2 #products .mailcore-product-card {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }
}