.gx {
  position: relative; z-index: 3; isolation: isolate;
  margin: 0 12px;
  border-radius: 28px;
  background:
    radial-gradient(60% 55% at 50% 96%, var(--gx-lit) 0%, transparent 72%),
    var(--gx-ground);
  color: var(--gx-ink);
}
.gx--high {
  background:
    radial-gradient(70% 60% at 50% 74%, var(--gx-lit) 0%, transparent 72%),
    var(--gx-ground);
}
.gx--top {
  background:
    radial-gradient(60% 55% at 50% 4%, var(--gx-lit) 0%, transparent 72%),
    var(--gx-ground);
}
.gx--right {
  background:
    radial-gradient(45% 70% at 78% 60%, var(--gx-lit) 0%, transparent 72%),
    var(--gx-ground);
}
.gx--sides {
  background:
    radial-gradient(11% 60% at 0% 70%, var(--gx-lit) 0%, transparent 100%),
    radial-gradient(11% 60% at 100% 70%, var(--gx-lit) 0%, transparent 100%),
    var(--gx-ground);
}
.gx__glass {
  position: absolute; inset: 0; z-index: -1;
  display: block; width: 100%; height: 100%;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
}
.gx__glass.is-live { opacity: 1; }
.gx--pin { background: var(--gx-ground); }
.gx__pin {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; overflow: clip;
}
.gx__fix {
  position: sticky; top: 65px; isolation: isolate;
  height: calc(100vh - 65px);
  background:
    radial-gradient(60% 55% at 50% 96%, var(--gx-lit) 0%, transparent 72%),
    var(--gx-ground);
}
.gx--right .gx__fix {
  background:
    radial-gradient(30% 55% at 84% 50%, var(--gx-lit) 0%, transparent 72%),
    var(--gx-ground);
}
.gx::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image: var(--grain); background-size: 200px 200px;
  opacity: .2; mix-blend-mode: overlay;
}

.gx--dark {
  --gx-ink: #fff;
  --gx-sub: rgb(255 255 255 / .74);
  --gx-mute: rgb(255 255 255 / .56);
  --gx-line: rgb(255 255 255 / .16);
}
.gx--light {
  --gx-ink: var(--ink, #0b0d12);
  --gx-sub: #4f5461;
  --gx-mute: #7d818c;
  --gx-line: rgb(11 13 18 / .09);
}
.gx--light::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgb(11 13 18 / .06);
}
.gx--light::after { opacity: .1; mix-blend-mode: multiply; }

.page .hero:has(> .gx) { padding-top: 0; }
.gx > .hero__head { padding-top: 88px; padding-bottom: 80px; }
.gx--clip { overflow: hidden; }

.gx .gk-hero__title,
.gx .hero__title,
.gx .pg-wall__title { color: var(--gx-ink); }
.gx .gk-hero__sub,
.gx .hero__sub,
.gx .pg-wall__sub { color: var(--gx-sub); }
.gx .pg-crumbs,
.gx .pg-hero__note,
.gx .pg-wall__foot { color: var(--gx-mute); }
.gx .pg-crumbs a:hover,
.gx .pg-crumbs [aria-current],
.gx .pg-hero__rating { color: var(--gx-ink); }
.gx .pg-crumbs li + li::before { color: var(--gx-line); }
.gx .eyebrow { color: var(--gx-mute); }

.gx--dark .btn--primary { background: #fff; color: #0b0d12; }
.gx--dark .btn--primary:hover { background: #eef0f6; }
.gx--dark .btn--outline {
  background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .24); color: #fff;
}
.gx--dark .btn--outline:hover { background: rgb(255 255 255 / .12); }
.gx--light .btn--outline { background: #fff; }
.gx--light .btn--outline:hover { background: #f7f7f8; }

.gx .gk-stagerow { border-color: transparent; }
.gx .gk-tray {
  background: rgb(255 255 255 / .42);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
}
.gx--dark .gk-tray {
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13);
}
.gx--light .gk-tray {
  background: rgb(238 240 244 / .58);
  box-shadow: inset 0 0 0 1px rgb(11 13 18 / .06);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}
.gx .gk-hero__copy { padding-bottom: 8px; }
.gx > :last-child { margin-bottom: 0; }
.gx-foot { height: 56px; }

@media (max-width: 760px) {
  .gx { margin: 0 8px; border-radius: 22px; }
  .gx-foot { height: 32px; }
  .gx > .hero__head { padding-top: 56px; padding-bottom: 48px; }
}

.nav { transition: border-color .2s ease; }
body:has(.page > .hero > .gx) .nav:not(.is-stuck) { border-bottom-color: transparent; }