.product-page .page { position: relative; z-index: 1; padding-top: 0; }
.product-backdrop {
  position: fixed; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #02070b 4%, rgb(2 7 11 / .88) 28%, rgb(2 7 11 / .18) 66%),
    linear-gradient(180deg, rgb(2 7 11 / .3), transparent 48%, #02070b),
    var(--product-photo) center calc(50% + 7svh) / cover no-repeat;
  opacity: var(--product-photo-opacity, 1);
  filter: saturate(.35) brightness(.8);
}
.product-mini { --product-photo: url('/illustrations/product-smash-front.png'); --product-photo-focus: 70%; }
.product-web { --product-photo: url('/illustrations/product-smash-back.png'); --product-photo-focus: 72%; }
.product-page .product-hero {
  position: relative;
  min-height: 100svh; max-width: none; display: flex;
  flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 140px 0 100px;
}
.product-hero .product-display {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 12px 22px;
  margin: 0; max-width: 100%; font-family: 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', sans-serif;
  color: #f1f8fa; font-size: clamp(34px, 4.3vw, 62px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em;
}
.product-display .product-brand { font-size: 1em; font-weight: 600; }
.product-brand b { font-weight: inherit; font-style: italic; }
.product-brand em { font-weight: inherit; font-style: normal; color: var(--cyan); }
.product-display .product-edition {
  font-size: .8em; font-weight: 500; letter-spacing: .01em; color: #e4ecef;
}
.product-hero .product-lead { max-width: 38ch; margin-top: 36px; color: #aebdc5; }
.product-page .tour { margin-top: 0; }
.product-scroll {
  position: absolute; bottom: 32px; left: 0; display: inline-flex; gap: 18px;
  color: #aebdc5; font-size: 14px; text-decoration: none;
}
.product-scroll:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
.product-page .site-footer { position: relative; }
@media (max-width: 720px) {
  .product-backdrop {
    background-position: center, center, var(--product-photo-focus) calc(50% + 10svh);
    background-image:
      linear-gradient(90deg, rgb(2 7 11 / .8), rgb(2 7 11 / .4)),
      linear-gradient(180deg, rgb(2 7 11 / .25), rgb(2 7 11 / .12) 45%, #02070b),
      var(--product-photo);
  }
  .product-page .product-hero { padding: 150px 0 90px; }
  .product-hero .product-display { gap: 10px 14px; }
  .product-hero .product-lead { max-width: 30ch; margin-top: 28px; }
}