/* ============================================================
   HyperHedger — landing prototype (Norris-cut, motion v2)
   DNA: editorial luxury × motorsport telemetry × kinetic UI.
   Built around scroll, cursor and time as design surfaces.
   No purple gradients. No Inter. No centered hero stack.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700;800;900&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Tokens */
  --bone:        #E8E1CE;
  --bone-deep:   #D8D0BA;
  --olive:       #34372A;
  --olive-deep:  #1F211A;
  --olive-card:  #1A1C14;
  --ink:         #0B0B07;
  --paper:       #F5F1E5;
  --paper-mute:  rgba(245, 241, 229, 0.62);
  --paper-soft:  rgba(245, 241, 229, 0.14);
  --lime:        #D4FF00;
  --lime-warm:   #E5F756;
  --papaya:      #FF7A00;
  --rule-paper:  rgba(245, 241, 229, 0.16);

  --display: 'Big Shoulders Display', 'Anton', system-ui, sans-serif;
  --sans:    'Bricolage Grotesque', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.6, 0, 0.2, 1);

  /* Cursor-position broadcast — set by app.js */
  --cx: 0px;
  --cy: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--olive); color: var(--paper); }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  cursor: auto;
  overflow-x: hidden;
}
body.lenis.lenis-smooth { scroll-behavior: auto; }
body.lenis.lenis-stopped { overflow: hidden; }

img { display: block; max-width: 100%; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { cursor: pointer; text-decoration: none; color: inherit; }
body.hh-custom-cursor-active,
body.hh-custom-cursor-active button,
body.hh-custom-cursor-active a {
  cursor: auto;
}
body.hh-custom-cursor-active button,
body.hh-custom-cursor-active a {
  cursor: pointer;
}

::selection { background: var(--lime); color: var(--ink); }

/* ------------------------------------------------------------
   BOOT — first-paint splash that resolves on app.js start
   ------------------------------------------------------------ */

.hh-boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out), visibility 0s linear 600ms;
}
.hh-boot.is-done { opacity: 0; visibility: hidden; }
.hh-boot__inner { display: grid; gap: 1rem; justify-items: center; }
.hh-boot__bar {
  width: 220px;
  height: 2px;
  background: rgba(212, 255, 0, 0.18);
  position: relative;
  overflow: hidden;
}
.hh-boot__bar i {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--lime);
  animation: hh-boot 1.4s var(--ease-out) forwards;
}
@keyframes hh-boot { to { inset: 0 0 0 0; } }
.hh-boot__count { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em; }

/* ------------------------------------------------------------
   CUSTOM CURSOR
   ------------------------------------------------------------ */

.hh-cursor {
  position: fixed;
  top: 0; left: 0;
  display: none;
  width: 28px; height: 28px;
  border: 1.5px solid var(--lime);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(var(--cx), var(--cy)) translate(-50%, -50%);
  transition: width 200ms var(--ease-out), height 200ms var(--ease-out), background 200ms, border-color 200ms, mix-blend-mode 200ms;
  mix-blend-mode: difference;
}
body.hh-custom-cursor-active .hh-cursor { display: none; }
.hh-cursor::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 4px; height: 4px;
  background: var(--lime);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
body[data-cursor="link"] .hh-cursor { width: 56px; height: 56px; background: var(--lime); border-color: var(--lime); }
body[data-cursor="link"] .hh-cursor::after { display: none; }
body[data-cursor="text"] .hh-cursor { width: 4px; height: 22px; border-radius: 1px; border-width: 0; background: var(--lime); }
body[data-cursor="text"] .hh-cursor::after { display: none; }
body[data-cursor="drag"] .hh-cursor { width: 64px; height: 64px; background: var(--papaya); border-color: var(--papaya); }
body[data-cursor="drag"] .hh-cursor::after { content: "DRAG"; inset: 50%; width: auto; height: auto; background: none; color: var(--ink); font: 700 0.65rem/1 var(--mono); letter-spacing: 0.12em; }

@media (hover: none), (max-width: 880px) {
  body { cursor: auto; }
  button, a { cursor: pointer; }
  .hh-cursor { display: none; }
}

/* ------------------------------------------------------------
   PERSISTENT CHROME
   ------------------------------------------------------------ */

.hh-wordmark {
  position: fixed;
  top: clamp(1rem, 2.4vw, 2rem);
  left: clamp(1rem, 2.4vw, 2rem);
  z-index: 30;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(0.85rem, 1.05vw, 1.1rem);
  letter-spacing: 0.04em;
  line-height: 0.86;
  color: var(--paper);
  text-transform: uppercase;
  pointer-events: none;
  mix-blend-mode: difference;
  background: rgba(245, 241, 229, 0.7);
  color: var(--ink);
  mix-blend-mode: normal;
  padding: 0.35rem 0.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 4px;
}
.hh-section.is-olive ~ * .hh-wordmark,
body:has(.hh-hero:not(:hover)) .hh-wordmark { /* keep readable on dark */ }
@media (max-width: 880px) {
  .hh-wordmark {
    position: absolute;
    font-size: 0.75rem;
    padding: 0.3rem 0.45rem;
  }
  .hh-pill {
    position: absolute;
    top: 1.05rem;
    right: 0.8rem;
    max-width: calc(100vw - 8.5rem);
    padding: 0.52rem 0.78rem;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
  }
}
.hh-wordmark span { display: block; transition: transform 600ms var(--ease-out); }
.hh-wordmark.is-down span:nth-child(1) { transform: translate(-1px, -1px); }
.hh-wordmark.is-down span:nth-child(2) { transform: translate(1px, 1px); }

.hh-pill {
  position: fixed;
  top: clamp(0.85rem, 2vw, 1.65rem);
  right: clamp(1rem, 2.4vw, 2rem);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  background: var(--lime);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  box-shadow: 0 8px 22px rgba(11, 11, 7, 0.22);
  transition: transform 300ms var(--ease-out), background 300ms var(--ease-out);
}
.hh-pill::before {
  content: "";
  width: 0.55rem; height: 0.55rem;
  background: var(--ink);
  border-radius: 50%;
  flex: none;
  animation: hh-pulse 1.6s ease-in-out infinite;
}
@keyframes hh-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.4; }
}
.hh-pill:hover { transform: translateY(-2px) scale(1.04); background: var(--lime-warm); }
@media (max-width: 880px) {
  .hh-pill {
    position: absolute;
    top: 1.05rem;
    right: 0.8rem;
    max-width: calc(100vw - 8.5rem);
    padding: 0.52rem 0.78rem;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
  }
}

/* ------------------------------------------------------------
   HERO — bone field with live canvas tape and orbiting subject
   ------------------------------------------------------------ */

.hh-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  background: var(--bone);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hh-hero__tape {
  /* Canvas drawn by app.js — live BTC tape with depth */
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.85;
}
.hh-hero__halftone {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(11, 11, 7, 0.06) 0.7px, transparent 0.8px);
  background-size: 14px 14px;
  mix-blend-mode: multiply;
}
.hh-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, var(--bone-deep) 100%);
}

.hh-hero__stage {
  position: relative;
  width: min(94vw, 1320px);
  margin: 0 auto;
  height: 100%;
  z-index: 5;
  display: grid;
  grid-template-rows: 1fr auto;
}

.hh-mark-num {
  position: absolute;
  top: clamp(2.2rem, 5vw, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  border: 2px solid var(--ink);
  z-index: 9;
}
@media (max-width: 540px) {
  .hh-mark-num { display: none; } /* removes overlap with REQUEST ACCESS pill on phone */
  .hh-target-line::before { display: none; }
}
@media (max-width: 880px) {
  .hh-hero {
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 5.25rem 0.9rem 2.1rem;
  }
  .hh-hero__stage {
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 1rem;
  }
}
.hh-mark-num::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(11, 11, 7, 0.32);
  animation: hh-spin 90s linear infinite;
}
@keyframes hh-spin { to { transform: rotate(360deg); } }

/* Subject — concentric mouse-tilted ring system */
.hh-subject-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1400px;
  z-index: 6;
}
.hh-subject {
  position: relative;
  width: clamp(280px, 38vw, 540px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-y)) rotateY(calc(var(--tilt-x) * -1));
  transition: transform 110ms var(--ease-out);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backface-visibility: hidden;
}
.hh-subject:focus-visible {
  outline: 2px solid var(--papaya);
  outline-offset: 12px;
  border-radius: 50%;
}
.hh-subject .ring,
.hh-subject .ring-ghost {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.hh-subject .ring-ghost {
  border-style: dashed;
  border-color: rgba(11, 11, 7, 0.32);
  transform-origin: center;
  animation: hh-spin 80s linear infinite;
}
.hh-subject .ring-ghost.r-2 { inset: 14%; animation-duration: 60s; animation-direction: reverse; border-color: rgba(11, 11, 7, 0.22); }
.hh-subject .ring-ghost.r-3 { inset: 28%; animation-duration: 40s; }
.hh-subject .ring-ghost.r-4 { inset: 42%; animation-duration: 30s; animation-direction: reverse; border-color: rgba(11, 11, 7, 0.45); }
.hh-side-chip {
  position: absolute;
  inset: 34% 28%;
  z-index: 5;
  min-width: 0;
  min-height: 0;
  border: 1.5px solid var(--ink);
  background: rgba(232, 225, 206, 0.96);
  display: grid;
  gap: 0.18rem;
  place-items: center;
  align-content: center;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;
  transform: translateZ(40px);
  box-shadow: 0 28px 56px rgba(11, 11, 7, 0.2);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.hh-side-chip span {
  color: rgba(11, 11, 7, 0.58);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.hh-side-chip strong {
  color: var(--lime);
  font-size: clamp(1.05rem, 3vw, 2.15rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
}
.hh-side-chip small {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: rgba(11, 11, 7, 0.62);
  font-size: clamp(0.55rem, 1.2vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hh-side-chip.is-no strong {
  color: var(--papaya);
}
.hh-side-chip.is-waiting strong {
  color: var(--paper);
}
.hh-order-pop {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, 12px) translateZ(70px);
  opacity: 0;
  pointer-events: none;
  background: var(--lime);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 16px 40px rgba(11, 11, 7, 0.25);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.hh-subject.is-popped .hh-order-pop {
  opacity: 1;
  transform: translate(-50%, -2px) translateZ(70px);
}
.hh-order-mark {
  position: absolute;
  display: none;
  right: 5%;
  top: 48%;
  transform: translate(100%, -50%) translateZ(50px);
  opacity: 0;
  pointer-events: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: 1.6rem;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.hh-order-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--papaya);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 9px rgba(255, 122, 0, 0.22);
  transform: translateY(-50%);
}
.hh-subject.has-order-mark .hh-order-mark {
  opacity: 1;
  transform: translate(104%, -50%) translateZ(50px);
}
@media (max-width: 880px) {
  .hh-order-mark {
    right: 8%;
    top: 82%;
    transform: translate(12%, 0) translateZ(50px);
    background: rgba(232, 225, 206, 0.82);
    border: 1px solid rgba(11, 11, 7, 0.2);
    padding: 0.32rem 0.45rem 0.32rem 1.45rem;
  }
  .hh-subject.has-order-mark .hh-order-mark {
    transform: translate(12%, 0) translateZ(50px);
  }
  .hh-order-mark::before {
    left: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    box-shadow: 0 0 0 6px rgba(255, 122, 0, 0.2);
  }
}
.hh-subject .blip {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 50%;
  transform: translateZ(20px);
  box-shadow: 0 4px 16px rgba(11, 11, 7, 0.28);
}
.hh-subject .blip.b-1 { top: 8%; left: 50%; transform: translateX(-50%) translateZ(28px); animation: hh-blip 3s ease-in-out infinite; }
.hh-subject .blip.b-2 { top: 50%; right: 8%; transform: translateY(-50%) translateZ(20px); background: var(--papaya); animation: hh-blip 4.2s ease-in-out infinite 0.2s; }
.hh-subject .blip.b-3 { bottom: 8%; left: 50%; transform: translateX(-50%) translateZ(14px); animation: hh-blip 3.6s ease-in-out infinite 0.6s; }
.hh-subject .blip.b-4 { top: 50%; left: 8%; transform: translateY(-50%) translateZ(36px); animation: hh-blip 4s ease-in-out infinite 0.4s; }
@keyframes hh-blip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 255, 0, 0.6); }
  50%      { box-shadow: 0 0 0 12px rgba(212, 255, 0, 0); }
}

.hh-target-line {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, var(--ink) 0 34%, transparent 34% 66%, var(--ink) 66% 100%);
  opacity: 0.65;
  transform: translateZ(8px);
}
.hh-target-line::before {
  content: attr(data-target-label);
  position: absolute;
  right: -2px;
  top: -1.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  background: var(--bone);
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--ink);
}

/* Floating telemetry cards */
.hh-ghost-card {
  position: absolute;
  width: 130px;
  background: rgba(11, 11, 7, 0.06);
  border: 1px solid rgba(11, 11, 7, 0.22);
  padding: 0.6rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hh-ghost-card b { display: block; font-weight: 700; font-size: 0.72rem; }
.hh-ghost-card.gc-1 { top: 18%; left: 4%;  transform: rotate(-3deg) translateY(calc(var(--scroll-y, 0px) * -0.05)); }
.hh-ghost-card.gc-2,
.hh-ghost-card.gc-3 { display: none; }
.hh-ghost-card.gc-4 { bottom: 32%; right: 5%; transform: rotate(-2deg) translateY(calc(var(--scroll-y, 0px) *  0.06)); }
@media (max-width: 880px) {
  .hh-ghost-card { display: none; }
}
.hh-ghost-card .row { display: flex; justify-content: space-between; }
.hh-ghost-card .row .v { color: var(--ink); font-weight: 700; }

/* Title block — bottom-anchored, asymmetric */
.hh-hero__title {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  z-index: 12;
  position: relative;
  pointer-events: none;
}
.hh-hero__title h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  /* overflow: hidden was clipping the staggered word-reveal letters at
     wide viewports — let the words extend their box */
}
.hh-hero__title h1 .word { overflow: hidden; }
.hh-hero__title h1 .word {
  display: block;
  overflow: hidden;
}
.hh-hero__title h1 .word > span {
  display: block;
  transform: translateY(110%);
}
.hh-hero__title h1 .tail {
  display: block;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 0.78em;
  color: var(--olive-deep);
}
.hh-hero__subtitle {
  font-family: var(--sans);
  font-size: clamp(0.85rem, 1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  padding-top: 0.85rem;
  max-width: 22ch;
  text-align: right;
}
@media (max-width: 880px) {
  .hh-hero__title {
    align-self: auto;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 0;
    margin-top: -0.2rem;
  }
  .hh-hero__title h1 {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
    max-width: 7ch;
  }
  .hh-hero__subtitle {
    justify-self: end;
    max-width: 18ch;
    font-size: 0.82rem;
    line-height: 1.45;
    padding-top: 0.65rem;
  }
}

/* "Next settlement" card */
.hh-next {
  position: absolute;
  right: clamp(4rem, 7vw, 7rem);
  top: clamp(5.25rem, 9vw, 6.75rem);
  background: var(--ink);
  color: var(--bone);
  padding: 1rem 1.25rem;
  width: clamp(220px, 22vw, 280px);
  z-index: 9;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: transform 400ms var(--ease-out);
}
@media (max-width: 880px) {
  .hh-next {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    align-self: start;
    justify-self: stretch;
    transform: none;
    padding: 0.85rem 1rem;
    order: 1;
  }
  .hh-next:hover { transform: none; }
  .hh-next .name { font-size: 1.2rem; }
  .hh-next .countdown { font-size: 1.1rem; }
  .hh-subject-wrap {
    position: relative;
    inset: auto;
    height: clamp(250px, 74vw, 330px);
    place-items: center;
    order: 2;
  }
  .hh-subject {
    width: min(74vw, 310px);
    transform: none !important;
    transform-style: flat;
    transition: none;
  }
  .hh-hero__title {
    order: 3;
  }
}
.hh-next:hover { transform: translateY(-3px); }
.hh-next .label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.5rem;
}
.hh-next .label::before {
  content: "● ";
  color: var(--lime);
  animation: hh-pulse 1.8s ease-in-out infinite;
}
.hh-next .name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.hh-next .meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--paper-mute);
  display: flex;
  justify-content: space-between;
}
.hh-next .countdown {
  margin-top: 0.65rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--lime);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   TICKER — auto-scrolling kinetic strip after hero
   ------------------------------------------------------------ */

/* Live status strip. NO scrolling — was unreadable as a marquee.
   Now a static, evenly-spaced row of readouts that updates in
   place from the dry-bot poll. On narrow screens it wraps
   gracefully or scrolls horizontally with the user's finger. */
.hh-ticker {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--olive-deep);
  border-bottom: 1px solid var(--olive-deep);
  position: relative;
}
.hh-ticker__track {
  display: flex;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding: 1.1rem clamp(1.25rem, 4vw, 4rem);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.8vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  flex-wrap: wrap;
  justify-content: center;
}
.hh-ticker__track.is-reverse {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.18em;
  padding-top: 0;
  padding-bottom: 0.8rem;
  color: var(--paper-mute);
  justify-content: center;
}
.hh-ticker__track > * { display: inline-flex; align-items: center; gap: 0.85rem; }
.hh-ticker__track > [hidden] { display: none; } /* honour HTML hidden attr */
.hh-ticker__dot { color: var(--lime); font-size: 0.5em; }
.hh-ticker__track.is-reverse > * { gap: 0.5rem; }
/* Hide the duplicate items that existed only to make the marquee loop seamless */
.hh-ticker__track > *:nth-child(n+8) { display: none; }
.hh-ticker__track.is-reverse > *:nth-child(n+2) { display: none; }
@media (max-width: 640px) {
  .hh-ticker__track { font-size: 1rem; gap: 1.2rem; }
  .hh-ticker__track > *:nth-child(n+5) { display: none; }
}

/* ------------------------------------------------------------
   GENERIC SECTIONS
   ------------------------------------------------------------ */

.hh-section {
  position: relative;
  padding: clamp(6rem, 14vw, 11rem) clamp(1.25rem, 4vw, 4rem);
}
.hh-section.is-olive { background: var(--olive); color: var(--paper); }
.hh-section.is-ink   { background: var(--ink);   color: var(--paper); }
.hh-section.is-bone  { background: var(--bone);  color: var(--ink); }

.hh-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.hh-section.is-bone .hh-tag { color: rgba(11, 11, 7, 0.5); }

/* ------------------------------------------------------------
   MISSION — kinetic typography with rotating verb
   ------------------------------------------------------------ */

.hh-mission {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.55fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.hh-mission .kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  border-top: 1px solid var(--lime);
  padding-top: 0.85rem;
}
.hh-mission .body {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.55vw, 1.55rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0;
  max-width: 58ch;
}
.hh-mission .body p { margin-bottom: 1.05em; }
.hh-mission .body p:last-of-type { margin-bottom: 0; }
.hh-mission .body em {
  font-style: italic;
  color: var(--lime);
  font-weight: 500;
}
.hh-mission .body .swap {
  display: inline-block;
  position: relative;
  min-width: 8ch;
  vertical-align: baseline;
  color: var(--lime);
  font-style: italic;
  font-weight: 500;
}
.hh-mission .body .swap b {
  position: absolute;
  inset: 0;
  font-weight: inherit;
  font-style: italic;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.hh-mission .body .swap b.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.hh-mission .signature {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: 'Bricolage Grotesque', cursive;
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--lime);
  transform: rotate(-2deg) translateX(-1rem);
  letter-spacing: -0.02em;
}

@media (max-width: 880px) { .hh-mission { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   LIVE FLOOR — count-up telemetry strip
   ------------------------------------------------------------ */

.hh-floor {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-paper);
  border-bottom: 1px solid var(--rule-paper);
  overflow: hidden;
}
.hh-stat {
  grid-column: span 3;
  padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--rule-paper);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.hh-stat::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--lime);
  transform: translateX(-101%);
  transition: transform 900ms var(--ease-out);
}
.hh-stat.is-in::before { transform: translateX(0); }
.hh-stat:last-child { border-right: 0; }
.hh-stat .stat-code {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}
.hh-stat .stat-value {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 3.75vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: 0;
  font-feature-settings: 'tnum';
  white-space: nowrap;
  max-width: 100%;
}
.hh-stat[data-stat="pnl"] .stat-code,
.hh-stat[data-stat="pnl"] .stat-value {
  color: var(--lime);
}
.hh-stat[data-stat="pnl"].is-neg .stat-value {
  color: var(--papaya);
}
.hh-stat[data-stat="settle"] .stat-code,
.hh-stat[data-stat="settle"] .stat-value {
  color: var(--papaya);
}
.hh-stat[data-stat="settle"]::before {
  background: var(--papaya);
}
.hh-stat .stat-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--paper-mute);
  text-transform: uppercase;
}
.hh-stat .stat-spark {
  margin-top: 0.4rem;
  height: 36px;
  width: 100%;
}

@media (max-width: 880px) {
  .hh-stat { grid-column: span 6; border-bottom: 1px solid var(--rule-paper); }
  .hh-stat:nth-child(even) { border-right: 0; }
}
@media (max-width: 540px) {
  .hh-stat {
    grid-column: span 12;
    border-right: 0;
    padding: 1.15rem 1rem;
  }
  .hh-stat .stat-value { font-size: clamp(2.2rem, 18vw, 4.2rem); }
}

/* ------------------------------------------------------------
   HEDGE HALL — 3D-tilt notched cards
   ------------------------------------------------------------ */

.hh-hall {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--rule-paper);
  border: 1px solid var(--rule-paper);
  perspective: 1400px;
}
.hh-card {
  grid-column: span 4;
  background: var(--olive-card);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  position: relative;
  min-height: clamp(190px, 22vw, 240px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform-style: preserve-3d;
  transform: rotateX(var(--card-tilt-y, 0deg)) rotateY(var(--card-tilt-x, 0deg));
  transition: background 220ms var(--ease-out), transform 120ms var(--ease-out);
}
.hh-card::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 18px; height: 18px;
  background: var(--lime);
  opacity: 0.0;
  transition: opacity 220ms var(--ease-out);
}
.hh-card:hover { background: var(--olive-deep); }
.hh-card:hover::after { opacity: 1; }
.hh-card .glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(220px 180px at var(--mx, 50%) var(--my, 50%), rgba(212, 255, 0, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
}
.hh-card:hover .glow { opacity: 1; }
.hh-card .card-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--paper-mute);
  text-transform: uppercase;
  transform: translateZ(20px);
}
.hh-card .card-side {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 0.95;
  margin-top: auto;
  transform: translateZ(40px);
  white-space: pre-line;
}
.hh-card .card-pnl {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  transform: translateZ(40px);
}
.hh-card .card-pnl.is-win  { color: var(--lime); }
.hh-card .card-pnl.is-loss { color: var(--papaya); }
.hh-card .card-pnl.is-open { color: var(--lime-warm); }
.hh-card.is-loading {
  opacity: 0.72;
}
.hh-card.is-open {
  border-color: rgba(212, 255, 0, 0.42);
}
.hh-card .card-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--paper-mute);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--rule-paper);
  padding-top: 0.6rem;
  transform: translateZ(20px);
}

@media (max-width: 880px) { .hh-card { grid-column: span 6; } }
@media (max-width: 540px) { .hh-card { grid-column: span 12; } }

/* ------------------------------------------------------------
   MECHANIC — scroll-locked 3-step build-up
   ------------------------------------------------------------ */

.hh-mechanic-wrap {
  position: relative;
}
.hh-mechanic {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.hh-mechanic__steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-content: center;
}
.hh-step {
  border-top: 2px solid var(--paper-soft);
  padding-top: 1.25rem;
  opacity: 0.32;
  transition: opacity 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.hh-step.is-active { opacity: 1; border-color: var(--lime); }
.hh-step .step-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
}
.hh-step h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0.5rem 0 0.4rem 0;
}
.hh-step p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper-mute);
}

.hh-mechanic__visual {
  position: sticky;
  top: 8vh;
  align-self: start;
  max-height: 84vh;
  overflow-y: auto;
  background: var(--olive-deep);
  border: 1px solid var(--rule-paper);
  padding: 1.5rem 1.5rem 1.25rem;
  font-family: var(--mono);
  color: var(--paper);
}
.hh-mechanic__visual::-webkit-scrollbar { width: 6px; }
.hh-mechanic__visual::-webkit-scrollbar-thumb { background: rgba(245,241,229,0.15); }

.hh-results__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hh-results__title { display: flex; align-items: center; gap: 0.6rem; color: var(--paper-mute); }
.hh-results__title em { color: var(--lime); font-style: normal; }
.hh-results__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(212,255,0,0.6);
  animation: hh-pulse 1.6s ease-in-out infinite;
}
@keyframes hh-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.hh-results__updated { color: var(--paper-mute); font-size: 0.6rem; }

.hh-results__explainer {
  margin: -0.35rem 0 1rem;
  padding: 0.75rem 0.85rem;
  background: rgba(212,255,0,0.06);
  border: 1px solid rgba(212,255,0,0.18);
  color: rgba(245,241,229,0.72);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
}

.hh-results__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.hh-results__cell {
  background: rgba(11,11,7,0.55);
  border: 1px solid rgba(245,241,229,0.08);
  padding: 0.8rem 0.9rem;
}
.hh-results__label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 0.35rem;
}
.hh-results__big {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--paper);
}
.hh-results__big.is-pos { color: var(--lime); }
.hh-results__big.is-neg { color: var(--papaya); }
.hh-results__delta {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--paper-mute);
}
.hh-results__delta.is-pos { color: var(--lime); }
.hh-results__delta.is-neg { color: var(--papaya); }
.hh-results__sub { margin-top: 0.3rem; font-size: 0.7rem; color: var(--paper-mute); }

.hh-results__spark {
  position: relative;
  background: rgba(11,11,7,0.55);
  border: 1px solid rgba(245,241,229,0.08);
  padding: 0.6rem 0.7rem;
  margin-bottom: 1.25rem;
}
.hh-results__spark svg { display: block; width: 100%; height: 80px; }
[data-results-spark-line] { vector-effect: non-scaling-stroke; }
.hh-results__spark-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-top: 0.4rem;
}

.hh-results__open {
  background: rgba(11,11,7,0.55);
  border: 1px solid rgba(245,241,229,0.08);
  padding: 0.85rem 0.95rem;
  margin-bottom: 1.25rem;
}
.hh-results__open-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  font-size: 0.7rem;
  color: var(--paper);
}
.hh-results__chip {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  background: var(--lime);
  color: var(--ink);
  border-radius: 2px;
}
.hh-results__chip.is-scan { background: var(--paper-mute); }
.hh-results__open-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.85rem;
  font-size: 0.78rem;
}
.hh-results__open-list li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted rgba(245,241,229,0.10);
  padding: 0.18rem 0;
}
.hh-results__open-list span:first-child { color: var(--paper-mute); }
.hh-results__open-list span:last-child { color: var(--paper); font-variant-numeric: tabular-nums; }
.hh-results__open-list .is-pos { color: var(--lime); }
.hh-results__open-list .is-neg { color: var(--papaya); }

.hh-results__daily { margin-bottom: 1.25rem; }
.hh-results__bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.hh-results__bar {
  position: relative;
  height: 56px;
  background: rgba(11,11,7,0.55);
  border: 1px solid rgba(245,241,229,0.08);
  display: flex;
  align-items: flex-end;
  font-size: 0.55rem;
  color: var(--paper-mute);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.hh-results__bar i {
  position: absolute;
  left: 4px; right: 4px;
  bottom: 0;
  background: var(--lime);
  min-height: 2px;
  transition: height 0.4s;
}
.hh-results__bar.is-neg i { background: var(--papaya); top: 50%; bottom: auto; }
.hh-results__bar.is-pos i { bottom: 50%; }
.hh-results__bar b {
  position: absolute;
  bottom: 2px; left: 4px;
  font-family: var(--mono);
  font-weight: normal;
  font-size: 0.55rem;
  color: var(--paper);
  z-index: 2;
}
.hh-results__bar.is-neg b { color: var(--ink); }
.hh-results__bar.is-empty b { color: rgba(245,241,229,0.30); }

.hh-results__cycles {}
.hh-results__cyclelist {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.hh-results__crow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.42rem 0.55rem;
  background: rgba(11,11,7,0.55);
  border: 1px solid rgba(245,241,229,0.08);
  font-size: 0.74rem;
}
.hh-results__crow .hh-results__cnum {
  font-family: var(--mono);
  color: var(--paper-mute);
  letter-spacing: 0.1em;
}
.hh-results__crow .hh-results__cside {
  color: var(--paper);
}
.hh-results__crow .hh-results__cside small {
  color: var(--paper-mute);
  font-size: 0.62rem;
  margin-left: 0.45rem;
}
.hh-results__crow .hh-results__cpnl {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.hh-results__crow.is-win .hh-results__cpnl { color: var(--lime); }
.hh-results__crow.is-loss .hh-results__cpnl { color: var(--papaya); }
.hh-results__crow.is-be .hh-results__cpnl { color: var(--paper-mute); }
.hh-results__crow.is-open {
  border-color: rgba(212,255,0,0.45);
  background: rgba(212,255,0,0.04);
}
.hh-results__crow.is-open .hh-results__cnum { color: var(--lime); }
.hh-results__crow.is-open .hh-results__cpnl { color: var(--lime); }
.hh-results__cyclefoot {
  margin-top: 0.55rem;
  font-size: 0.6rem;
  color: var(--paper-mute);
  line-height: 1.5;
}

@media (max-width: 880px) {
  .hh-mechanic { grid-template-columns: 1fr; }
  .hh-mechanic__visual { position: relative; top: 0; max-height: none; }
}

/* ------------------------------------------------------------
   RISK — fenced editorial copy
   ------------------------------------------------------------ */

.hh-risk {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hh-risk-h {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.7vw, 4.2rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--lime);
  max-width: 9ch;
}
.hh-risk-list { display: flex; flex-direction: column; gap: 0.6rem; }
.hh-risk-list li {
  list-style: none;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--paper);
  padding: 0.95rem 1.1rem;
  background: var(--olive-deep);
  border-left: 3px solid var(--lime);
  position: relative;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.hh-risk-list li b {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.35rem;
}
.hh-risk-list li span {
  display: block;
  color: rgba(245, 241, 229, 0.84);
}
.hh-risk-list li:hover { background: var(--ink); transform: translateX(6px); }
@media (max-width: 880px) { .hh-risk { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   ACCESS — final CTA (bone field, animated underlines)
   ------------------------------------------------------------ */

.hh-access {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hh-access h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.012em;
}
.hh-access p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  margin-top: 0.85rem;
}
.hh-access form { display: grid; gap: 1.15rem; }
.hh-access .field { position: relative; }
.hh-access .field input,
.hh-access .field select {
  font: inherit;
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0.85rem 0.25rem 0.55rem 0.25rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  outline: none;
}
.hh-access .field::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.5px;
  background: var(--ink);
  transform-origin: left;
}
.hh-access .field::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.5px;
  background: var(--papaya);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease-out);
}
.hh-access .field:focus-within::before { transform: scaleX(1); }
.hh-access label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}
.hh-pay-box {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.3rem;
}
.hh-price-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono);
  color: var(--ink);
}
.hh-price-line span {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}
.hh-price-line strong {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.3vw, 2.15rem);
  line-height: 0.9;
}
.hh-pay-btn,
.hh-ask-btn {
  margin-top: 0.5rem;
  background: var(--ink);
  color: var(--lime);
  border: 1.5px solid var(--ink);
  padding: 1rem 1.25rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  transition: background 280ms var(--ease-out), color 280ms var(--ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.hh-pay-btn.is-secondary {
  background: transparent;
  color: var(--ink);
}
.hh-pay-btn span:last-child,
.hh-ask-btn span:last-child {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  opacity: 0.72;
}
.hh-pay-btn::before,
.hh-ask-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform: translateY(101%);
  transition: transform 320ms var(--ease-out);
}
.hh-pay-btn > *,
.hh-ask-btn > * { position: relative; z-index: 1; transition: color 280ms; }
.hh-pay-btn:hover::before,
.hh-ask-btn:hover::before { transform: translateY(0); }
.hh-pay-btn:hover > *,
.hh-ask-btn:hover > * { color: var(--ink); }
.hh-pay-btn:disabled,
.hh-ask-btn:disabled {
  cursor: wait;
  opacity: 0.58;
}
.hh-access-status {
  min-height: 2.8rem;
  margin: 0.3rem 0 0 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 880px) { .hh-access { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.hh-footer {
  background: var(--ink);
  color: var(--paper-mute);
  border-top: 1px solid var(--rule-paper);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4rem) 1.5rem;
  position: relative;
}
.hh-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
.hh-footer-grid h4 {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.85rem;
}
.hh-footer-grid a {
  display: block;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.2rem 0;
  color: var(--paper);
  opacity: 0.78;
  transition: color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.hh-footer-grid a:hover { color: var(--lime); opacity: 1; transform: translateX(4px); }
.hh-footer-mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-transform: uppercase;
}
.hh-footer-tape {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-paper);
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-soft);
}
.hh-footer-tape span::before { content: "// "; color: var(--lime); }
@media (max-width: 880px) {
  .hh-footer-grid { grid-template-columns: 1fr 1fr; }
  .hh-footer-mark { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   LEGAL PAGES (terms / privacy / risk)
   ------------------------------------------------------------ */
.hh-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 8rem 1.5rem 6rem;
}
.hh-legal .hh-tag {
  margin-bottom: 1.5rem;
}
.hh-legal-h {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.0;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.hh-legal-update {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 3rem;
}
.hh-legal h2 {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 2.6rem 0 0.7rem;
}
.hh-legal p {
  font-family: var(--sans);
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0 0 1rem;
}
.hh-legal ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}
.hh-legal li {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.hh-legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hh-legal strong { color: var(--ink); font-weight: 700; }
.hh-legal em { font-style: normal; font-family: var(--mono); padding: 0.05em 0.3em; background: rgba(11,11,7,0.06); }

/* ------------------------------------------------------------
   ACCOUNT PORTAL
   ------------------------------------------------------------ */

.hh-account-page {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(212,255,0,0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(212,255,0,0.035) 1px, transparent 1px),
    var(--olive);
  background-size: 34px 34px;
  color: var(--paper);
}
.hh-account-page .hh-tag {
  position: static;
  top: auto;
  left: auto;
  margin: 0 0 1rem;
  color: var(--lime);
}
.hh-account-wordmark {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 10;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  line-height: 0.86;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--lime);
  padding: 0.45rem 0.58rem;
  border-radius: 4px;
}
.hh-account-main {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(6rem, 10vw, 8rem) 0 5rem;
}
.hh-account-hero {
  min-height: 320px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: end;
  border-bottom: 1px solid rgba(245,241,229,0.16);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.hh-account-hero h1,
.hh-account-shop h2 {
  font-family: var(--display);
  font-size: clamp(3.5rem, 11vw, 9rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--paper);
  max-width: 9ch;
}
.hh-account-shop h2 {
  font-size: clamp(2.6rem, 6vw, 5.25rem);
  max-width: 10ch;
}
.hh-account-hero p,
.hh-account-shop p,
.hh-panel-copy {
  color: rgba(245,241,229,0.72);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.42;
  max-width: 760px;
  margin-top: 1.15rem;
}
.hh-account-summary {
  border: 1px solid rgba(212,255,0,0.42);
  background: rgba(11,11,7,0.72);
  box-shadow: inset 0 0 0 1px rgba(245,241,229,0.06), 0 24px 80px rgba(0,0,0,0.24);
  padding: 1.25rem;
  min-height: 180px;
  display: grid;
  align-content: end;
  gap: 0.55rem;
}
.hh-account-summary span,
.hh-panel-head span,
.hh-step-list b,
.hh-account-facts dt,
.hh-account-mini-form label,
.hh-account-checkout label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,229,0.58);
}
.hh-account-summary strong {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--lime);
}
.hh-account-summary small { color: rgba(245,241,229,0.66); font-size: 0.95rem; }
.hh-account-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
  margin-top: 1rem;
}
.hh-account-panel,
.hh-account-shop {
  border: 1px solid rgba(245,241,229,0.14);
  background: rgba(11,11,7,0.72);
  box-shadow: inset 0 0 0 1px rgba(212,255,0,0.04);
  padding: clamp(1rem, 2vw, 1.45rem);
}
.hh-account-panel--primary {
  min-height: 320px;
}
.hh-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid rgba(245,241,229,0.12);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}
.hh-panel-head b {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--lime);
  border-radius: 999px;
  padding: 0.4rem 0.65rem;
  white-space: nowrap;
}
.hh-account-next {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.2rem;
}
.hh-account-next span {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  line-height: 0.9;
  font-weight: 900;
  text-transform: uppercase;
}
.hh-account-next strong {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(245,241,229,0.72);
}
.hh-step-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.65rem;
  counter-reset: step;
}
.hh-step-list li {
  min-height: 108px;
  border: 1px solid rgba(245,241,229,0.14);
  background: rgba(245,241,229,0.04);
  padding: 0.75rem;
  display: grid;
  align-content: space-between;
  counter-increment: step;
  position: relative;
}
.hh-step-list li::before {
  content: counter(step);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245,241,229,0.08);
  color: var(--paper);
  font: 800 0.78rem/1 var(--mono);
}
.hh-step-list span {
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--paper);
}
.hh-step-list .is-done {
  border-color: rgba(212,255,0,0.48);
  background: rgba(212,255,0,0.1);
}
.hh-step-list .is-done::before {
  content: "OK";
  width: auto;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
}
.hh-step-list .is-current {
  border-color: var(--papaya);
  box-shadow: inset 0 0 0 1px rgba(255,122,0,0.18);
}
.hh-step-list .is-locked { opacity: 0.52; }
.hh-account-facts {
  display: grid;
  gap: 0.75rem;
}
.hh-account-facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(245,241,229,0.09);
  padding-bottom: 0.6rem;
}
.hh-account-facts dd {
  text-align: right;
  color: var(--paper);
  font-weight: 700;
}
.hh-account-actions,
.hh-account-pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}
.hh-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1.5px solid var(--lime);
  background: var(--lime);
  color: var(--ink);
  padding: 0.75rem 1rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.hh-account-btn:hover { transform: translateY(-2px); }
.hh-account-btn.is-secondary {
  background: transparent;
  color: var(--paper);
  border-color: rgba(245,241,229,0.26);
}
.hh-account-mini-form,
.hh-account-checkout {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.hh-account-mini-form input,
.hh-account-checkout input,
.hh-account-checkout select {
  width: 100%;
  margin-top: 0.35rem;
  border: 1px solid rgba(245,241,229,0.18);
  background: rgba(245,241,229,0.08);
  color: var(--paper);
  padding: 0.85rem 0.9rem;
  border-radius: 4px;
  outline: none;
  font-family: var(--sans);
  font-size: 1rem;
}
.hh-account-checkout select option { color: var(--ink); }
.hh-account-mini-form input:focus,
.hh-account-checkout input:focus,
.hh-account-checkout select:focus {
  border-color: var(--lime);
}
.hh-account-form-status {
  color: rgba(245,241,229,0.66);
  min-height: 1.4rem;
  font-size: 0.92rem;
}
.hh-account-shop {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1rem, 4vw, 3rem);
}
@media (max-width: 980px) {
  .hh-account-hero,
  .hh-account-grid,
  .hh-account-shop {
    grid-template-columns: 1fr;
  }
  .hh-step-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .hh-account-wordmark { position: absolute; }
  .hh-account-main { width: min(100% - 1rem, 1180px); padding-top: 5.25rem; }
  .hh-account-panel,
  .hh-account-shop { padding: 1rem; }
  .hh-step-list { grid-template-columns: 1fr; }
  .hh-account-facts div { display: grid; gap: 0.15rem; }
  .hh-account-facts dd { text-align: left; }
}

/* ------------------------------------------------------------
   REVEAL UTILITY
   ------------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}