/* Home page presentation. Shared header geometry lives in site-header.css. */
html:has(.page-home),
body:has(.page-home),
body:has(.page-home)::before {
  background: #f7f9fb;
}

body:has(.page-home) {
  overflow: hidden;
}

.page-home,
.home-hero,
.home-hero__content {
  min-height: calc(100dvh - var(--global-header-offset));
}

.page-home {
  color: #111217;
}

.home-hero::before,
.home-hero::after {
  display: none;
}

.home-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: var(--standalone-content-inset) var(--site-page-inline-padding) 0;
  overflow: hidden;
}

.home-hero h1 {
  max-width: 24ch;
  margin: 0;
  color: #09090b;
  font-family: Gazpacho, Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 4.5vw, 5.9rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.055em;
  text-align: center;
  text-wrap: balance;
}

.home-hero__lede {
  max-width: 38rem;
  margin: clamp(.9rem, 1.8vh, 1.5rem) 0 0;
  color: #647084;
  font-size: clamp(1rem, 1.2vw, 1.5rem);
  line-height: 1.35;
  text-align: center;
}

.home-hero__actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .8rem;
  margin-top: clamp(1.2rem, 2.6vh, 2.2rem);
}

.home-preview-figure {
  width: min(100%, 70rem);
  margin: clamp(4.15rem, 2.35vh, 5.8rem) 0 0;
}

.home-preview-figure__caption {
  margin: 0 0 .4rem;
  /* padding-left: clamp(.22rem, .75vw, .6rem); */
  color: #7a8494;
  font-size: clamp(.68rem, .72vw, .78rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  opacity: .5;
  mix-blend-mode: multiply;
}

.home-laptop {
  --laptop-bezel: clamp(.22rem, .75vw, .6rem);
  --laptop-screen-radius: clamp(.4rem, 1.05vw, .9rem);
  --laptop-chassis-bottom: clamp(-1.05rem, -1.1vw, -.5rem);
  --laptop-chassis-height: clamp(.82rem, 1.5vw, 1.42rem);
  --laptop-notch-height: clamp(.45rem, .42vw, .7rem);
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--laptop-bezel) var(--laptop-bezel) 0;
  overflow: visible;
  border-radius:
    calc(var(--laptop-screen-radius) + var(--laptop-bezel))
    calc(var(--laptop-screen-radius) + var(--laptop-bezel))
    clamp(.25rem, .6vw, .5rem)
    clamp(.25rem, .6vw, .5rem);
  background: linear-gradient(145deg, #fff 0%, #dadbdc 46%, #fff 100%);
  box-shadow: 0 1.4rem 3.5rem rgba(57, 59, 66, .15), 0 .15rem .28rem rgba(30, 31, 35, .12);
}

.home-laptop::before,
.home-laptop::after {
  content: "";
  position: absolute;
  left: 50%;
}

.home-laptop::before {
  z-index: 3;
  left: -4%;
  right: -4%;
  bottom: var(--laptop-chassis-bottom);
  height: var(--laptop-chassis-height);
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #f0f0f1 0%, #c4c5c8 48%, #aeb0b5 100%);
  box-shadow: 0 clamp(.55rem, .95vw, .95rem) clamp(1rem, 1.65vw, 1.65rem) rgba(55, 57, 65, .2);
}

.home-laptop::after {
  z-index: 4;
  bottom: calc(var(--laptop-chassis-bottom) + var(--laptop-chassis-height) - var(--laptop-notch-height));
  width: clamp(4rem, 12%, 7.5rem);
  height: var(--laptop-notch-height);
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, rgba(106, 109, 115, .3), rgba(255, 255, 255, .4));
}

.home-preview__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border-radius: var(--laptop-screen-radius) var(--laptop-screen-radius) 0 0;
  background: #f7f9fb;
}

.home-preview--fallback {
  display: none;
}

@media (min-width: 1180px) {
  .home-hero h1 {
    font-size: clamp(3rem, 3.25vw, 4rem);
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  body:has(.page-home) {
    overflow: auto;
  }

  .home-hero h1 {
    font-size: clamp(2.65rem, 12vw, 4rem);
  }

  .home-preview-figure {
    width: 100%;
    /* margin-top: 1rem; */
  }

  .home-preview-figure__caption {
    padding-left: clamp(.22rem, 1vw, .42rem);
  }

  .home-laptop {
    --laptop-bezel: clamp(.22rem, 1vw, .42rem);
    --laptop-screen-radius: clamp(.4rem, 1.8vw, .65rem);
  }
}