.hx { position: relative; margin-top: calc(-1 * var(--header-h)); }
.hx__stage { position: relative; isolation: isolate; height: 100svh; min-height: 640px; max-height: 1100px; overflow: hidden;
  background: var(--paper-soft); container: hx / size; }
.hx__set { position: absolute; inset: 0; pointer-events: none; }
.hx__card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; border-radius: 0;
  background: var(--paper-dark); transform-origin: 0 0; will-change: transform, opacity; backface-visibility: hidden; z-index: 1; }
.hx__card--c { z-index: 3; }
.hx__drop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--shade) 20%, transparent), 0 2px 6px color-mix(in srgb, var(--shade) 12%, transparent); }
.hx:not(.is-drawn) .hx__card:not(.hx__card--c), .hx:not(.is-drawn) .hx__drop { opacity: 0; }
.hx__card img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hx__shade { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s var(--ease);
  background: linear-gradient(180deg, color-mix(in srgb, var(--shade) 30%, transparent) 0%,
    color-mix(in srgb, var(--shade) 20%, transparent) 40%, color-mix(in srgb, var(--shade) 50%, transparent) 100%); }
.hx[data-state="b"] .hx__shade { opacity: 0; }
.hx[data-state="a"] .hx__shade { transition-delay: calc(var(--hx-move, 1000ms) * .45); }
.hx__intro { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding-bottom: 56px; text-align: center; color: var(--paper-soft); transform-origin: 0 0; }
@media (min-width: 48rem) { .hx__intro { gap: 48px; } }
.hx__title { max-width: 9em; font-size: 3.1875rem; line-height: 1; letter-spacing: -.01em; font-weight: 400; text-align: center;
  text-wrap: balance; }
@media (min-width: 40rem) { .hx__title { font-size: 4.4375rem; } }
@media (min-width: 64rem) { .hx__title { font-size: 7.5rem; } }
.hx__title em { font-style: italic; }
.hx__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hx__reveal { padding: 48px 24px; text-align: center; container-type: inline-size; }
.hx__lede { max-width: 36em; margin-inline: auto; font-family: var(--font-sans); font-size: clamp(1.0625rem, .875rem + .42vw, 1.3125rem);
  line-height: 1.5; letter-spacing: -.003em; font-weight: 400; color: var(--fg); text-wrap: balance; }
.nobr { white-space: nowrap; }
.hx__meta { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 10px; margin-top: clamp(20px, 3svh, 30px); }
.hx__fact { display: flex; flex-direction: column; gap: 4px; padding-inline: 24px; }
.hx__sep { display: none; }
.hx__sep + .hx__fact { border-left: 1px solid var(--fg-12); }
.hx__fact-k { font-size: .8125rem; line-height: 1.3; letter-spacing: .01em; color: var(--fg-60); }
.hx__fact strong { font-size: 1.0625rem; line-height: 1.3; }
@container (width < 25rem) {   
  .hx__meta { flex-direction: column; align-items: center; row-gap: 6px; }
  .hx__fact { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 6px; padding-inline: 0; }
  .hx__sep + .hx__fact { border-left: 0; }
}
html[data-hero] .hx__reveal { position: absolute; left: var(--hx-rl, 0px); width: var(--hx-rw, 100%); top: var(--hx-reveal-top, 64%);
  z-index: 6; padding: 0; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease-out-cubic); }
.hx[data-state="b"] .hx__reveal { opacity: 1; transform: none; pointer-events: auto; transition-delay: var(--hx-reveal-at, .6s); }
.hx[data-state="b"] .hx__intro { pointer-events: none; }
.hx[data-state="b"] .hx__ctas { visibility: hidden; transition: visibility 0s linear calc(var(--hx-move, 1000ms) * .4); }
.hx[data-state="a"] .hx__stage { touch-action: pinch-zoom; }
html[data-hero="armed"] .hx__intro { opacity: 0; transform: translateY(20px); }
html[data-hero="play"] .hx[data-state="a"]:not(.has-moved) .hx__intro { animation: hx-rise .9s cubic-bezier(.22, 1, .36, 1) .15s backwards; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
html:not([data-hero]) .hx__card:not(.hx__card--c), html:not([data-hero]) .hx__drop { display: none; }
html:not([data-hero]) .hx__stage { height: auto; max-height: none; overflow: visible; container-type: inline-size; }   
html:not([data-hero]) .hx__set, html:not([data-hero]) .hx__intro { height: 100svh; min-height: 640px; max-height: 1100px; }
html:not([data-hero]) .hx__set { position: relative; }
html:not([data-hero]) .hx__intro { top: 0; bottom: auto; justify-content: flex-end; }
.hx + .anchor > .nums, .hx + .anchor > .split { padding-top: 48px; }
@media (min-width: 48rem) { .hx + .anchor > .nums, .hx + .anchor > .split { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .hx__shade, .hx__reveal, .hx__ctas { transition: none !important; }
}