/* ==========================================================================
   NEBULA — "Event Horizon"
   Layered over v3's "Chrome & Ink" and bound by its rule: the interface has
   no hue of its own. What Horizon adds is depth and motion - the galaxy from
   the box art drawn live behind the page, the wordmark in orbit, surfaces
   that answer the pointer - so the shop reads as the world the product boxes
   come from rather than a list with pictures in it.

   Nothing here hides content unless horizon.v1.js ran (`.hz-js` is set by
   an inline script in the head, before first paint), and everything that
   moves stops under prefers-reduced-motion.
   ========================================================================== */

:root {
  --f-display: 'Michroma', 'Instrument Sans', system-ui, sans-serif;

  --hz-glass: rgba(14, 14, 19, 0.62);
  --hz-glass-strong: rgba(16, 16, 22, 0.82);
  --hz-chrome: linear-gradient(180deg, #ffffff 0%, #ececf2 36%, #8e8e9b 58%, #f6f6fa 100%);
  --hz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html,
body {
  overflow-x: clip;
}

/* v3's single top light gives way to the canvas. */
body::before {
  display: none;
}

::selection {
  background: rgba(255, 255, 255, 0.9);
  color: #07070a;
}

/* --------------------------------------------------------------------------
   §1  THE COSMOS
   -------------------------------------------------------------------------- */

#hz-cosmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hz-grain {
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A vignette so the edges of the page fall away into space. */
.hz-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* --------------------------------------------------------------------------
   §2  THE BAR — floats, and stays
   -------------------------------------------------------------------------- */

.hz-top {
  display: contents;
}

.nb-bar {
  position: sticky;
  top: 12px;
  z-index: 40;
  background: var(--hz-glass);
  border-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.nb-bar.is-scrolled {
  background: var(--hz-glass-strong);
  border-color: var(--c-line-2);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* The hairline under the bar catches light as it scrolls. */
.nb-bar::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  opacity: 0;
  transition: opacity var(--t-slow);
}

.nb-bar.is-scrolled::after {
  opacity: 1;
}

/* ---- The bar, refined: a HUD strip rather than a row of tabs ----------- */

.nb-bar {
  min-height: 64px;
  background: linear-gradient(180deg, rgba(22, 22, 29, 0.66), rgba(12, 12, 16, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -32px rgba(0, 0, 0, 0.9);
}

.nb-bar.is-scrolled {
  background: linear-gradient(180deg, rgba(20, 20, 27, 0.9), rgba(11, 11, 15, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 50px -24px rgba(0, 0, 0, 0.95);
}

.nb-nav {
  gap: 6px;
}

.nb-nav-link {
  position: relative;
  height: 40px;
  padding: 0 14px;
  font-family: var(--f-display);
  font-size: 0.65625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-2);
  background: transparent !important;
  transition: color var(--t-base), text-shadow var(--t-base);
}

/* A hairline that grows from the centre under the pointer. */
.nb-nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: scaleX(0);
  transition: transform 0.45s var(--hz-ease);
}

.nb-nav-link:hover {
  color: var(--c-text-1);
}

.nb-nav-link:hover::after {
  transform: scaleX(1);
}

/* The page you are on: lit, with an indicator light beneath it. */
.nb-nav-link.is-active {
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}

.nb-nav-link.is-active::after {
  left: 50%;
  right: auto;
  bottom: 4px;
  width: 14px;
  height: 2px;
  margin-left: -7px;
  background: #fff;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.8), 0 0 18px 2px rgba(255, 255, 255, 0.35);
  transform: none;
}

/* Controls on the right: one height, one glass. */
.nb-bar-end {
  gap: 8px;
}

.nb-cred,
.nb-icon-btn,
.nb-bar-end .currency-selector select,
.nb-bar-end .choices__inner {
  height: 38px !important;
  min-height: 38px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color var(--t-base), box-shadow var(--t-base), color var(--t-base);
}

.nb-cred {
  gap: 10px;
  padding: 0 14px;
}

.nb-cred i {
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.nb-icon-btn {
  width: 38px;
  color: var(--c-text-1);
}

.nb-icon-btn:hover,
.nb-bar-end .choices:hover .choices__inner {
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 22px -6px rgba(255, 255, 255, 0.35);
}

.nb-bar-end .choices__inner {
  display: flex !important;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nb-cart-count {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.hz-brand-word {
  font-family: var(--f-display);
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.26em !important;
  background: var(--hz-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nb-brand img {
  transition: transform 1.2s var(--hz-ease);
}

.nb-brand:hover img {
  transform: rotate(-180deg);
}

/* --------------------------------------------------------------------------
   §3  THE HERO
   -------------------------------------------------------------------------- */

/* The hero is the wordmark, two actions and the three numbers — no tagline
   and no paragraph. Its height follows that: 88vh was sized for copy that is
   no longer there and would have left the catalog below the fold for nothing. */
.hz-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(62vh, 600px);
  padding: 48px 0 0;
  text-align: center;
}

.hz-hero-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 14px;
  font-family: var(--f-num);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--c-line-1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* The one hue on the hero, and it is state: the shop is live. */
.hz-eyebrow-dot {
  position: relative;
  width: 6px;
  height: 6px;
  background: var(--c-ok);
  box-shadow: 0 0 10px var(--c-ok);
}

.hz-eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--c-ok);
  opacity: 0;
  animation: hz-ping 2.4s var(--hz-ease) infinite;
}

.hz-hero-mark {
  position: relative;
  width: min(1040px, 100%);
  margin: 40px auto 18px;
}

.hz-orbit {
  position: absolute;
  top: 50%;
  left: -3%;
  width: 106%;
  height: 170%;
  overflow: visible;
  transform: translateY(-50%) rotate(-7deg);
  pointer-events: none;
}

.hz-comet {
  filter: drop-shadow(0 0 6px #fff);
}

.hz-wordmark {
  position: relative;
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(3rem, 12.5vw, 10rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.1em;
}

/* The trailing tracking would push the word off centre. */
.hz-wordmark-text {
  position: relative;
  display: inline-block;
  margin-right: -0.1em;
  background: var(--hz-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 48px rgba(255, 255, 255, 0.14)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
}

/* A band of light that crosses the chrome every few seconds. */
.hz-wordmark-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hz-sweep 7s var(--hz-ease) 2.2s infinite;
}

.hz-tagline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 0;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

.hz-tagline > span:nth-child(2) {
  margin-right: -0.62em;
}

.hz-tagline-rule {
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
}

.hz-tagline-rule:last-child {
  transform: scaleX(-1);
}

.hz-hero-text {
  max-width: 560px;
  margin: 28px auto 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text-2);
}

.hz-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* ---- Buttons ---------------------------------------------------------- */

.hz-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  overflow: hidden;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base);
}

.hz-btn--sm {
  height: 38px;
  padding: 0 16px;
  font-size: var(--fs-xs);
}

.hz-btn i {
  font-size: 0.85em;
}

.hz-btn-arrow {
  transition: transform var(--t-base);
}

.hz-btn:hover .hz-btn-arrow {
  transform: translateX(4px);
}

.hz-btn--chrome,
.nb-btn--primary {
  color: var(--c-on-chrome) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9e1 100%) !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 14px 44px -16px rgba(255, 255, 255, 0.55);
}

.hz-btn--chrome:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 18px 60px -14px rgba(255, 255, 255, 0.75);
}

/* A glint that runs across chrome on hover. */
.hz-btn--chrome::before,
.nb-btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--hz-ease);
  pointer-events: none;
}

.nb-btn--primary {
  position: relative;
  overflow: hidden;
}

.hz-btn--chrome:hover::before,
.nb-btn--primary:hover::before,
.hz-card:hover .nb-btn--primary::before {
  left: 130%;
}

.hz-btn--ghost {
  color: var(--c-text-1);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--c-line-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hz-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-line-3);
  transform: translateY(-1px);
}

/* ---- Stats: an instrument readout -------------------------------------- */

.hz-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(640px, 100%);
  margin: 44px auto 0;
  border-top: 1px solid var(--c-line-1);
  border-bottom: 1px solid var(--c-line-1);
}

.hz-stat {
  position: relative;
  padding: 18px 12px 16px;
}

.hz-stat + .hz-stat::before {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 0;
  width: 1px;
  background: var(--c-line-1);
}

.hz-stat dd {
  order: -1;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--c-text-1);
}

.hz-stat dt {
  margin-top: 6px;
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.hz-stat {
  display: flex;
  flex-direction: column;
}

.hz-stat-star {
  margin-left: 8px;
  font-size: 0.55em;
  vertical-align: 0.35em;
  color: var(--c-text-1);
}

/* ---- Ticker ------------------------------------------------------------ */

.hz-ticker {
  position: relative;
  width: 100vw;
  margin: 64px calc(50% - 50vw) 0;
  overflow: hidden;
  background: rgba(10, 10, 14, 0.55);
  border-top: 1px solid var(--c-line-1);
  border-bottom: 1px solid var(--c-line-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.hz-ticker-track {
  display: flex;
  width: max-content;
  animation: hz-marquee 48s linear infinite;
}

.hz-ticker-set {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 15px 14px;
  list-style: none;
  font-family: var(--f-num);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-2);
}

.hz-ticker-set i {
  margin-right: 10px;
  color: var(--c-text-1);
}

.hz-ticker-star {
  color: var(--c-text-3);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   §4  SECTIONS
   -------------------------------------------------------------------------- */

.hz-index {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--f-num);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.hz-index::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent);
}

/* The stock components' page titles (reviews, status, blog) speak the same
   display voice as the sections. */
.component > .py-6 > h2:first-child,
.component > .py-6 > h1:first-child {
  padding-left: 0;
  border-left: 0;
}

.component > .py-6 > h2:first-child,
.component > .py-6 > h1:first-child,
.nb-section-head h2 {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--hz-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nb-products {
  scroll-margin-top: 96px;
}

.hz-hero + .nb-products,
.hz-hero ~ .nb-products {
  padding-top: 96px;
}

/* --------------------------------------------------------------------------
   §5  CARDS — physical, lit by the pointer
   -------------------------------------------------------------------------- */

.hz-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(180deg, rgba(22, 22, 29, 0.86), rgba(11, 11, 15, 0.92));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transform-style: preserve-3d;
  transition: transform 0.7s var(--hz-ease), border-color var(--t-base), box-shadow var(--t-slow);
  will-change: transform;
}

.hz-card.is-tilting {
  transition: transform 0.12s linear, border-color var(--t-base), box-shadow var(--t-slow);
}

.hz-card:hover {
  --lift: -6px;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1), 0 0 60px -30px rgba(255, 255, 255, 0.25);
}

/* v3 clips the card for its radius; the media clips instead, so the corner
   ticks can sit on the edge. */
.hz-card .nb-card-media {
  overflow: hidden;
}

/* The border that lights where the pointer is. */
.hz-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.85), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity var(--t-slow);
  pointer-events: none;
}

.hz-card:hover::after {
  opacity: 1;
}

.hz-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.09), transparent 45%);
  opacity: 0;
  transition: opacity var(--t-slow);
  pointer-events: none;
}

.hz-card:hover .hz-light {
  opacity: 1;
}

/* Crop marks, as on a proof: quiet at rest, bright under the pointer. */
.hz-ticks {
  position: absolute;
  inset: -5px;
  z-index: 4;
  pointer-events: none;
}

.hz-ticks i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(255, 255, 255, 0.28);
  border-style: solid;
  border-width: 0;
  transition: border-color var(--t-base), transform var(--t-slow);
}

.hz-ticks i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hz-ticks i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hz-ticks i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hz-ticks i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hz-card:hover .hz-ticks i {
  border-color: #fff;
}

.hz-card:hover .hz-ticks i:nth-child(1) { transform: translate(-3px, -3px); }
.hz-card:hover .hz-ticks i:nth-child(2) { transform: translate(3px, -3px); }
.hz-card:hover .hz-ticks i:nth-child(3) { transform: translate(-3px, 3px); }
.hz-card:hover .hz-ticks i:nth-child(4) { transform: translate(3px, 3px); }

/* The art sits deeper than the card and drifts against the tilt. */
.hz-card .nb-card-media > img {
  transform: scale(1.06) translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px));
  transition: transform 0.7s var(--hz-ease), filter var(--t-slow);
  filter: brightness(0.92) contrast(1.04);
}

.hz-card.is-tilting .nb-card-media > img {
  transition: transform 0.12s linear, filter var(--t-slow);
}

.hz-card:hover .nb-card-media > img {
  transform: scale(1.1) translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px));
  filter: brightness(1.05) contrast(1.06);
}

/* An orbit ring that closes around the box on hover. */
.hz-halo {
  position: absolute;
  inset: 22% 4%;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-16deg) scale(1.25);
  transition: opacity 0.6s var(--hz-ease), transform 0.9s var(--hz-ease);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hz-halo::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.8);
}

.hz-card:hover .hz-halo {
  opacity: 1;
  transform: rotate(-16deg) scale(1);
}

.hz-card .nb-card-media > img,
.hz-card .nb-card-placeholder {
  position: relative;
  z-index: 0;
}

.hz-card .nb-badges {
  z-index: 3;
}

.hz-card .nb-badge {
  background: rgba(8, 8, 11, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Media darkens into the body instead of stopping at a line. */
.hz-card .nb-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(11, 11, 15, 0.9));
  pointer-events: none;
}

.hz-card .nb-card-body {
  position: relative;
  z-index: 2;
  transform: translateZ(24px);
}

.hz-card .nb-card-body h3 {
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   §6  VOICES — reviews that drift
   -------------------------------------------------------------------------- */

.hz-voices {
  padding: 112px 0 24px;
}

@media (min-width: 768px) {
  .hz-voices .nb-section-head {
    align-items: flex-end;
  }
}

.hz-voices-score {
  color: var(--c-text-1);
  font-weight: 600;
}

.hz-marquee {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 8px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hz-voices .nb-section-head + .hz-marquee {
  margin-top: 28px;
}

.hz-marquee-track {
  display: flex;
  width: max-content;
  animation: hz-marquee 80s linear infinite;
}

.hz-marquee--reverse .hz-marquee-track {
  animation-direction: reverse;
  animation-duration: 96s;
}

.hz-marquee:hover .hz-marquee-track {
  animation-play-state: paused;
}

.hz-marquee-set {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}

.hz-voice {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 340px;
  margin: 0;
  padding: 20px 22px 18px;
  background: linear-gradient(180deg, rgba(20, 20, 26, 0.78), rgba(12, 12, 16, 0.78));
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color var(--t-base), transform var(--t-slow);
}

.hz-voice:hover {
  border-color: var(--c-line-3);
  transform: translateY(-3px);
}

.hz-voice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hz-voice-stars {
  display: inline-flex;
  gap: 3px;
  font-size: 0.75rem;
  color: #fff;
}

.hz-voice-stars .is-off {
  opacity: 0.18;
}

.hz-voice-date {
  font-size: var(--fs-label);
  color: var(--c-text-3);
}

.hz-voice blockquote {
  display: -webkit-box;
  flex: 1;
  margin: 14px 0 18px;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text-1);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.hz-voice blockquote::before { content: "\201C"; color: var(--c-text-3); }
.hz-voice blockquote::after { content: "\201D"; color: var(--c-text-3); }

.hz-voice figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  border-top: 1px solid var(--c-line-1);
}

.hz-voice-dot {
  width: 5px;
  height: 5px;
  background: var(--c-text-2);
}

/* --------------------------------------------------------------------------
   §7  THE HORIZON — the footer's wordmark
   -------------------------------------------------------------------------- */

.hz-foot-mark {
  margin: 120px 0 -0.14em;
  overflow: hidden;
  line-height: 0.82;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.hz-foot-mark span {
  display: inline-block;
  margin-right: -0.06em;
  font-family: var(--f-display);
  font-size: clamp(3rem, 13.2vw, 12.5rem);
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 55%, transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
}

.nb-foot {
  position: relative;
  background: var(--hz-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------------
   §8  PRODUCT PAGE
   -------------------------------------------------------------------------- */

.hz-stage {
  position: relative;
  overflow: hidden;
}

/* The left column is type, picture, text and nothing else. It used to be a
   card in three bordered slices, and the 1px grey rule cut straight across
   the box art, which already has edges of its own. The picture now sits on
   the page; the vignette below is what ends it. */
.hz-pd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.hz-pd-head h1 {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* v3 gave the artwork a sunken panel the full width of the column and centred
   the picture inside it. With the border gone that panel is just a faint grey
   rectangle, and a centred picture under a left-aligned title drifts. The
   stage is now the width of the artwork and sits on the page: title, picture
   and list all start on the same rail. */
[data-component-id="product-page"] .hz-pd-stage {
  width: 540px;
  max-width: 100%;
  background: none;
}

[data-component-id="product-page"] .hz-pd-stage img {
  margin-inline: 0;
}

/* The box art's own black is a shade lighter than the page, so with no border
   its rectangle was still legible as an edge. The stage vignette now closes
   on the canvas colour instead of stopping at 55%, and the picture ends by
   fading into the page rather than by stopping against it. */
[data-component-id="product-page"] .hz-pd-stage::after {
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 35%), rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, var(--c-canvas) 94%);
}

.hz-pd-body {
  padding-top: 1.75rem;
}

/* No tabs left to separate the picture from the text, so the text keeps its
   own measure instead of running the full width of the picture. */
.hz-pd-body .editor {
  max-width: 62ch;
}

.hz-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 35%), rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(7, 7, 10, 0.55) 100%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hz-buy-col > :first-child {
    position: sticky;
    top: 96px;
  }
}

.nb-buy-price {
  background: var(--hz-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   §9  ENTRANCES
   -------------------------------------------------------------------------- */

.hz-js .hz-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 1s var(--hz-ease), transform 1s var(--hz-ease), filter 1s var(--hz-ease);
  transition-delay: var(--hz-delay, 0ms);
}

.hz-js .hz-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* The hero assembles itself on load: the wordmark condenses out of the
   dark, then everything under it rises in order. */
.hz-js .hz-wordmark-text {
  animation: hz-condense 1.8s var(--hz-ease) both;
}

.hz-js .hz-orbit {
  animation: hz-orbit-in 2.2s var(--hz-ease) 0.3s both;
}

.hz-js .hz-eyebrow,
.hz-js .hz-tagline,
.hz-js .hz-hero-text,
.hz-js .hz-hero-actions,
.hz-js .hz-stats,
.hz-js .hz-ticker {
  animation: hz-rise 1.1s var(--hz-ease) both;
}

.hz-js .hz-eyebrow { animation-delay: 0.1s; }
.hz-js .hz-tagline { animation-delay: 0.9s; }
.hz-js .hz-hero-text { animation-delay: 1.05s; }
.hz-js .hz-hero-actions { animation-delay: 1.2s; }
.hz-js .hz-stats { animation-delay: 1.35s; }
.hz-js .hz-ticker { animation-delay: 1.5s; }

@keyframes hz-condense {
  from {
    opacity: 0;
    letter-spacing: 0.42em;
    filter: blur(18px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.1em;
    filter: drop-shadow(0 0 48px rgba(255, 255, 255, 0.14)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
  }
}

@keyframes hz-orbit-in {
  from {
    opacity: 0;
    transform: translateY(-50%) rotate(-22deg) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) rotate(-7deg) scale(1);
  }
}

@keyframes hz-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hz-sweep {
  0% { background-position: 130% 0; }
  45%, 100% { background-position: -30% 0; }
}

@keyframes hz-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

@keyframes hz-ping {
  0% { opacity: 0.9; transform: scale(0.6); }
  80%, 100% { opacity: 0; transform: scale(1.6); }
}

/* --------------------------------------------------------------------------
   §10  SMALL SCREENS · STILLNESS
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .hz-hero {
    min-height: auto;
    padding-top: 48px;
  }

  .hz-hero-mark {
    margin-top: 32px;
  }

  .hz-tagline {
    gap: 10px;
    letter-spacing: 0.42em;
  }

  .hz-tagline > span:nth-child(2) {
    margin-right: -0.42em;
  }

  .hz-stats {
    margin-top: 40px;
  }

  .hz-stat {
    padding: 14px 6px 12px;
  }

  .hz-stat dt {
    letter-spacing: 0.08em;
  }

  .hz-ticker {
    margin-top: 44px;
  }

  .hz-voice {
    width: 280px;
  }

  .hz-voices {
    padding-top: 80px;
  }

  .hz-foot-mark {
    margin-top: 80px;
  }

  .nb-bar {
    top: 8px;
  }

  /* The links scroll sideways on a phone; the fade says there is more. */
  .nb-nav {
    gap: 0;
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  .nb-nav-link {
    padding: 0 9px;
    font-size: 0.59375rem;
    letter-spacing: 0.1em;
  }

  .nb-nav-link::after {
    left: 9px;
    right: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hz-js .hz-wordmark-text,
  .hz-js .hz-orbit,
  .hz-js .hz-eyebrow,
  .hz-js .hz-tagline,
  .hz-js .hz-hero-text,
  .hz-js .hz-hero-actions,
  .hz-js .hz-stats,
  .hz-js .hz-ticker,
  .hz-wordmark-text::after,
  .hz-eyebrow-dot::after {
    animation: none;
  }

  .hz-comet {
    display: none;
  }

  .hz-ticker-track,
  .hz-marquee-track {
    animation: none;
  }

  .hz-marquee {
    overflow-x: auto;
  }

  .hz-card,
  .hz-card:hover {
    transform: none;
  }
}