/* Based on the homepage hero and its piano accordion in template/index.html. */

.hero-homepage__copy,
.hero-homepage__content,
.hero-homepage-product {
  min-width: 0;
}

.hero-homepage__intro > :first-child { margin-top: 0; }
.hero-homepage__intro > :last-child { margin-bottom: 0; }

.hero-homepage__intro a {
  color: var(--color-primary, #1b5bff);
  text-underline-offset: 0.18em;
}

.hero-homepage__features,
.hero-homepage-product__features {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.hero-homepage-product {
  --product-background: #0b1220;
  --product-accent: #9fc1ff;
  --product-dot: #6fa2ff;
  --product-feature: #dce6fa;
  --product-border: rgba(159, 193, 255, 0.35);
  --product-border-strong: rgba(159, 193, 255, 0.5);
  --product-label-background: rgba(8, 13, 24, 0.42);
  --product-status-background: rgba(27, 45, 90, 0.62);
  --product-badge-background: rgba(27, 91, 255, 0.22);
  --product-cta: #1b5bff;
  --product-cta-hover: #0f47e6;
  --product-gradient-mid: rgba(8, 13, 24, 0.66);
  --product-gradient-end: rgba(7, 11, 20, 0.97);
  flex: 1 1 0%;
  background: var(--product-background);
  box-shadow: 0 18px 44px rgba(10, 14, 22, 0.13);
}

.hero-homepage-product.is-active {
  flex: 3.4 1 0%;
  box-shadow: 0 24px 60px rgba(10, 14, 22, 0.16);
}

.hero-homepage-product__image {
  object-position: 50% 15%;
}

.hero-homepage-product__overlay {
  background: linear-gradient(180deg, transparent 16%, var(--product-gradient-mid) 40%, var(--product-gradient-end) 60%);
  pointer-events: none;
}

.hero-homepage-product__number {
  border: 1px solid var(--product-border);
  background: var(--product-label-background);
}

.hero-homepage-product__status {
  border: 1px solid var(--product-border-strong);
  color: var(--product-feature);
  background: var(--product-status-background);
}

.hero-homepage-product__selector {
  z-index: 2;
  opacity: 1;
}

.hero-homepage-product.is-active .hero-homepage-product__selector {
  opacity: 0;
  pointer-events: none;
}

.hero-homepage-product.is-active .hero-homepage-product__selector:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.hero-homepage-product__accent {
  color: var(--product-accent);
}

.hero-homepage-product__dot {
  background: var(--product-dot);
}

.hero-homepage-product__detail {
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.hero-homepage-product.is-active .hero-homepage-product__detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-homepage-product__headline {
  margin-bottom: 0;
}

.hero-homepage-product__feature {
  border: 1px solid var(--product-border);
  color: var(--product-feature);
  white-space: nowrap;
}

.hero-homepage-product__coming-soon {
  border: 1px solid var(--product-border-strong);
  color: var(--product-feature);
  background: var(--product-badge-background);
}

.hero-homepage-product__cta {
  background: var(--product-cta);
}

.hero-homepage-product__cta:hover {
  background: var(--product-cta-hover);
}

.hero-homepage-product--green {
  --product-background: #0a1712;
  --product-accent: #8fe8c3;
  --product-dot: #4ec694;
  --product-feature: #d9f2e6;
  --product-border: rgba(122, 222, 180, 0.4);
  --product-border-strong: rgba(122, 222, 180, 0.5);
  --product-label-background: rgba(7, 18, 13, 0.42);
  --product-status-background: rgba(12, 52, 36, 0.62);
  --product-badge-background: rgba(23, 138, 87, 0.24);
  --product-cta: #178a57;
  --product-cta-hover: #0f6b42;
  --product-gradient-mid: rgba(7, 18, 13, 0.66);
  --product-gradient-end: rgba(6, 15, 11, 0.97);
}

.hero-homepage-product--orange {
  --product-background: #16100a;
  --product-accent: #f7c695;
  --product-dot: #f09a4e;
  --product-feature: #fae6d2;
  --product-border: rgba(245, 178, 120, 0.4);
  --product-border-strong: rgba(245, 178, 120, 0.5);
  --product-label-background: rgba(20, 13, 7, 0.42);
  --product-status-background: rgba(70, 42, 14, 0.62);
  --product-badge-background: rgba(222, 118, 38, 0.24);
  --product-cta: #de7626;
  --product-cta-hover: #c2621b;
  --product-gradient-mid: rgba(20, 13, 7, 0.66);
  --product-gradient-end: rgba(16, 11, 6, 0.97);
}

.hero-homepage-product--gray {
  --product-background: #101216;
  --product-accent: #d7dde8;
  --product-dot: #aeb6c6;
  --product-feature: #e4e8f0;
  --product-border: rgba(198, 204, 216, 0.4);
  --product-border-strong: rgba(198, 204, 216, 0.5);
  --product-label-background: rgba(13, 15, 19, 0.42);
  --product-status-background: rgba(40, 44, 52, 0.66);
  --product-badge-background: rgba(58, 65, 80, 0.4);
  --product-cta: #3a4150;
  --product-cta-hover: #262b35;
  --product-gradient-mid: rgba(13, 15, 19, 0.66);
  --product-gradient-end: rgba(11, 13, 16, 0.97);
}

.hero-homepage-product--red {
  --product-background: #170b0e;
  --product-accent: #f5b3be;
  --product-dot: #e2596e;
  --product-feature: #fbd9de;
  --product-border: rgba(240, 156, 169, 0.4);
  --product-border-strong: rgba(240, 156, 169, 0.55);
  --product-label-background: rgba(22, 10, 13, 0.42);
  --product-status-background: rgba(194, 69, 87, 0.62);
  --product-badge-background: rgba(194, 69, 87, 0.28);
  --product-cta: #c24557;
  --product-cta-hover: #a23345;
  --product-gradient-mid: rgba(22, 10, 13, 0.66);
  --product-gradient-end: rgba(18, 8, 9, 0.97);
}

.hero-homepage a:focus-visible,
.hero-homepage button:focus-visible {
  outline: var(--focus-ring, 3px solid #1b5bff);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .hero-homepage .u-grid-template-columns-0-92fr-1-08fr {
    grid-template-columns: 1fr !important;
    gap: 46px !important;
  }
}

@media (max-width: 640px) {
  .hero-homepage {
    padding-top: 114px !important;
    padding-bottom: 58px !important;
  }

  .hero-homepage .u-padding-0-32px {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .hero-homepage .u-line-height-1-07 {
    font-size: 33px !important;
  }

  .hero-homepage [data-r="trust"] {
    gap: 10px 18px !important;
    margin-top: 30px !important;
  }

  .hero-homepage__products {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }

  .hero-homepage-product,
  .hero-homepage-product.is-active {
    flex: 0 0 auto !important;
    height: 520px !important;
  }

  .hero-homepage-product__selector {
    display: none !important;
  }

  .hero-homepage-product__detail {
    right: 18px !important;
    left: 18px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-homepage *,
  .hero-homepage *::before,
  .hero-homepage *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}