/* Homepage on the new dark marketing design (from the jukehouse-website concept).
   Motion comes from js/jh-motion.js through data-m-* attributes; this file holds the resting look. */

:root {
  --jh-ink: #0A0F0E;
  --jh-card: #0F1716;
  --jh-tile: #0B1312;
  --jh-teal: #44BBA4;
  --jh-teal-deep: #1B6B5D;
  --jh-coral: #E94F37;
  --jh-white: #FFFFFF;
  --jh-text: #E8E8E8;
  --jh-muted: #B8B8B8;
  --jh-dim: #8B8B8B;
  --jh-faint: #6B6B6B;
  --jh-line: rgba(255, 255, 255, 0.08);
  --jh-bg: #0A0F0E;
  --jh-strong: #FFFFFF;
  --jh-line-2: rgba(255, 255, 255, 0.12);
  --jh-line-3: rgba(255, 255, 255, 0.22);
  --jh-line-4: rgba(255, 255, 255, 0.45);
  --jh-cnr-def: rgba(255, 255, 255, 0.5);
  --jh-card-edge: #2A2A2A;
  --jh-card-shadow: none;
  --jh-ghost-bg: rgba(10, 15, 14, 0.5);
  --jh-chip-bg: rgba(10, 15, 14, 0.72);
  --jh-plan-bg: rgba(255, 255, 255, 0.07);
  --jh-tiles-gap: #1A2422;
  --jh-nav-bg: rgba(10, 15, 14, 0.78);
  --jh-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --jh-mono: 'Space Mono', ui-monospace, monospace;
  --jh-gutter: clamp(20px, 4vw, 48px);
  --jh-max: 1280px;
  --jh-glass: rgba(26, 26, 26, 0.38);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.jh-site {
  margin: 0;
  background: var(--jh-bg);
  color: var(--jh-text);
  font-family: var(--jh-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.jh-site h1,
.jh-site h2,
.jh-site h3,
.jh-site p,
.jh-site ul,
.jh-site ol,
.jh-site dl,
.jh-site dd,
.jh-site figure {
  margin: 0;
}

.jh-site ul,
.jh-site ol {
  padding: 0;
  list-style: none;
}

.jh-site a {
  color: var(--jh-teal);
  text-decoration: none;
}

.jh-site a:hover {
  color: var(--jh-text);
}

.jh-site ::selection {
  background: var(--jh-teal);
  color: #1A1A1A;
}

.jh-site img {
  display: block;
}

.jh-site :focus-visible {
  outline: 2px solid var(--jh-teal);
  outline-offset: 3px;
}

.jh-site .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.jh-site .marketing-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--jh-teal);
  color: var(--jh-ink);
}

.jh-site .marketing-skip-link:focus {
  top: 12px;
}

.jh-main:focus {
  outline: none;
}

/* Anchor jumps land below the fixed nav. */
.jh-main [id] {
  scroll-margin-top: calc(60px + var(--staging-banner-height, 0px));
}

/* Shared pieces ---------------------------------------------------------- */

.jh-wrap {
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: 0 var(--jh-gutter);
}

.jh-wrap-narrow {
  max-width: 1240px;
}

.jh-section {
  padding: clamp(96px, 10vw, 144px) 0;
}

.jh-teal { color: var(--jh-teal); }
.jh-coral { color: var(--jh-coral); }

.jh-mono {
  font-family: var(--jh-mono);
}

.jh-eyebrow {
  margin-bottom: 24px !important;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.jh-label {
  margin-bottom: 10px !important;
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-display {
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.jh-h2 { font-size: clamp(40px, 5vw, 72px); }
.jh-h2-lg { font-size: clamp(44px, 5.6vw, 84px); }
.jh-h2-xl { font-size: clamp(48px, 6.6vw, 104px); }
.jh-h3 { font-size: clamp(28px, 2.8vw, 40px); margin: 8px 0 16px; }

.jh-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
}

.jh-mono-link {
  font-family: var(--jh-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-m-nudge] {
  display: inline-block;
}

.jh-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--jh-teal);
  box-shadow: 0 0 0 4px rgba(68, 187, 164, 0.2);
}

.jh-dot-light {
  width: 7px;
  height: 7px;
  background: var(--jh-text);
  box-shadow: none;
}

.jh-fine {
  margin-top: 16px !important;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--jh-dim);
}

/* Corner brackets: one pseudo-element draws all four corners. Set --cnr for the colour. */
.jh-cnr {
  position: relative;
  --cnr: var(--jh-cnr-def);
}

.jh-cnr::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--cnr), var(--cnr)) top left / 7px 2px no-repeat,
    linear-gradient(var(--cnr), var(--cnr)) top left / 2px 7px no-repeat,
    linear-gradient(var(--cnr), var(--cnr)) top right / 7px 2px no-repeat,
    linear-gradient(var(--cnr), var(--cnr)) top right / 2px 7px no-repeat,
    linear-gradient(var(--cnr), var(--cnr)) bottom left / 7px 2px no-repeat,
    linear-gradient(var(--cnr), var(--cnr)) bottom left / 2px 7px no-repeat,
    linear-gradient(var(--cnr), var(--cnr)) bottom right / 7px 2px no-repeat,
    linear-gradient(var(--cnr), var(--cnr)) bottom right / 2px 7px no-repeat;
}

/* Buttons */
.jh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jh-site .jh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  border: 1px solid transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 150ms, color 150ms;
}

.jh-site .jh-btn-coral {
  --cnr: var(--jh-ink);
  color: var(--jh-ink);
  background: var(--jh-coral);
  border-color: var(--jh-coral);
}

.jh-site .jh-btn-coral:hover {
  color: var(--jh-white);
}

.jh-site .jh-btn-ghost {
  --cnr: var(--jh-strong);
  color: var(--jh-strong);
  font-weight: 500;
  background: var(--jh-ghost-bg);
  border-color: var(--jh-line-3);
}

.jh-site .jh-btn-ghost:hover {
  color: var(--jh-strong);
  background: rgba(68, 187, 164, 0.16);
}

.jh-site .jh-btn-plain {
  --cnr: transparent;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
  color: var(--jh-strong);
  background: var(--jh-line-2);
}

.jh-site .jh-btn-plain:hover {
  color: var(--jh-strong);
  background: var(--jh-line-3);
}

.jh-site .jh-btn-caps {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Scrolling royalty-statement texture; marketing-home.js fills it. */
.jh-ledger {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.3;
  color: var(--jh-teal);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.55) 38%, #000 70%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.55) 38%, #000 70%);
}

.jh-ledger-roll {
  position: absolute;
  top: 0;
  left: var(--jh-gutter);
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 20px;
  white-space: pre;
}

.jh-ledger-roll div {
  opacity: 0.55;
}

.jh-ledger-roll div:nth-child(5n + 3) {
  opacity: 1;
}

.jh-ledger-roll.is-moving {
  animation: jh-rise 216s linear infinite;
}

.jh-dash .jh-ledger {
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.jh-ledger-white {
  opacity: 0.16;
  color: var(--jh-white);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, #000 55%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, #000 55%);
}

@keyframes jh-rise { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes jh-spin { to { transform: rotate(360deg); } }

/* Navigation -------------------------------------------------------------- */

.jh-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--jh-nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--jh-line);
}

.has-staging-environment-banner .jh-nav {
  top: var(--staging-banner-height, 0px);
}

.jh-nav-inner {
  max-width: var(--jh-max);
  height: 60px;
  margin: 0 auto;
  padding: 0 var(--jh-gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.jh-nav-logo {
  flex-shrink: 0;
}

.jh-nav-logo img {
  width: 132px;
  height: 22px;
}

.jh-nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 28px;
}

.jh-nav-primary {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.jh-site .jh-nav-links a {
  font-size: 15px;
  line-height: 20px;
  color: var(--jh-text);
}

.jh-site .jh-nav-links a:hover {
  color: var(--jh-teal);
}

/* The section you're in gets the concept's coral underline. */
.jh-site .jh-nav-primary a[aria-current="page"] {
  position: relative;
}

.jh-site .jh-nav-primary a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--jh-coral);
}

.jh-site .jh-nav-links .jh-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jh-ink);
  background: var(--jh-coral);
  transition: color 150ms;
}

.jh-site .jh-nav-links .jh-nav-cta:hover {
  color: var(--jh-white);
}

.jh-nav-toggle {
  display: none;
  margin-left: auto;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--jh-line-3);
  background: var(--jh-ghost-bg);
  color: var(--jh-strong);
  font-size: 20px;
  cursor: pointer;
}

@media (max-width: 768px) {
  /* marketing.js adds .js-navigation and runs the menu button. Without it the links stay
     in the page flow under the logo instead of in a dropdown nothing can close. */
  .jh-site:not(.js-navigation) .jh-nav {
    position: relative;
  }

  .jh-site:not(.js-navigation) .jh-nav-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
    padding-top: 14px;
  }

  .jh-site:not(.js-navigation) .jh-hero {
    padding-top: clamp(40px, 5vw, 72px);
  }

  .js-navigation .jh-nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  .jh-nav-links {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0 24px;
  }

  .js-navigation .jh-nav-links {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    /* The nav is fixed, so page scrolling can't reach links below the screen; the menu scrolls instead. */
    max-height: calc(100vh - 60px - var(--staging-banner-height, 0px));
    max-height: calc(100dvh - 60px - var(--staging-banner-height, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--jh-gutter) 24px;
    background: var(--jh-bg);
    border-top: 1px solid var(--jh-line);
  }

  .js-navigation .jh-nav-links:not(.active) {
    display: none;
  }

  .jh-nav-primary {
    flex-direction: column;
    gap: 0;
  }

  .jh-site .jh-nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--jh-line);
    font-size: 20px;
    line-height: 24px;
    color: var(--jh-strong);
  }

  .jh-site .jh-nav-primary a[aria-current="page"] {
    color: var(--jh-teal);
  }

  .jh-site .jh-nav-primary a[aria-current="page"]::after {
    display: none;
  }

  .jh-site .jh-nav-links .jh-nav-cta {
    justify-content: center;
    height: 48px;
    margin-top: 16px;
    border: 0;
    font-size: 16px;
  }
}

@media (min-width: 769px) and (max-width: 1000px) {
  .jh-nav-inner,
  .jh-nav-links,
  .jh-nav-primary {
    gap: 18px;
  }
}

/* Hero ----------------------------------------------------------------------- */

.jh-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(68, 187, 164, 0.45), rgba(68, 187, 164, 0) 65%),
    linear-gradient(160deg, #155247, #0F2A26 55%, #0A1513);
  padding: calc(76px + var(--staging-banner-height, 0px) + clamp(40px, 5vw, 72px)) max(var(--jh-gutter), calc((100% - 1184px) / 2)) clamp(40px, 5vw, 72px);
}

.jh-hero-inner {
  position: relative;
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.jh-hero-copy {
  flex: 1 1 420px;
  min-width: 0;
}

.jh-hero-title {
  margin-bottom: 36px !important;
  font-size: clamp(40px, 5.1vw, 96px);
}

.jh-line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0 0.14em;
  margin: -0.08em 0 -0.14em;
}

.jh-line > span {
  display: block;
}

.jh-hero-lead {
  max-width: 480px;
  margin-bottom: 36px !important;
  font-size: 17px;
  line-height: 1.55;
  color: var(--jh-text);
}

.jh-hero-card-wrap {
  flex: 0 1 420px;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.jh-catalog {
  width: 100%;
  max-width: 440px;
  background: rgba(10, 15, 14, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--jh-line-2);
}

.jh-catalog-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--jh-line);
  white-space: nowrap;
}

.jh-catalog-bar img {
  width: 90px;
  height: 15px;
}

.jh-catalog-area {
  font-size: 13px;
  color: var(--jh-dim);
}

.jh-catalog-demo {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-catalog-body {
  padding: 22px;
}

.jh-catalog-song {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.jh-catalog-song .jh-label {
  margin-bottom: 6px !important;
}

.jh-catalog-art {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--jh-teal), var(--jh-teal-deep));
  color: var(--jh-white);
  font-size: 26px;
}

.jh-catalog-title {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--jh-strong);
  white-space: nowrap;
}

.jh-catalog-artist {
  margin-top: 4px !important;
  font-size: 14px;
  color: var(--jh-dim);
}

.jh-split {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}

.jh-split span {
  height: 4px;
}

.jh-split-a { flex: 60; background: var(--jh-teal); }
.jh-split-b { flex: 40; background: var(--jh-coral); }

.jh-split-names {
  display: flex;
  justify-content: space-between;
  margin-bottom: 26px !important;
  font-size: 13px;
  white-space: nowrap;
}

.jh-reg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--jh-line);
  font-size: 16px;
  line-height: 20px;
  color: var(--jh-strong);
}

.jh-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jh-muted);
}

.jh-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--jh-dim);
}

.jh-status-on {
  color: var(--jh-teal);
}

.jh-status-on::before {
  background: var(--jh-teal);
  box-shadow: 0 0 0 4px rgba(68, 187, 164, 0.18);
}

/* Collection societies ------------------------------------------------------- */

.jh-societies {
  padding: clamp(80px, 9vw, 128px) 0;
}

.jh-society-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  border-top: 1px solid var(--jh-line);
  border-left: 1px solid var(--jh-line);
}

.jh-society-grid a {
  position: relative;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--jh-line);
  border-bottom: 1px solid var(--jh-line);
  transition: background 200ms;
}

.jh-society-grid a:hover {
  background: rgba(68, 187, 164, 0.08);
}

.jh-society-grid img {
  opacity: 0.82;
}

.jh-society-territory {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--jh-mono);
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-faint);
}

.jh-flow-target-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.jh-flow-target {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  padding: 14px 22px;
  background: var(--jh-chip-bg);
  border: 1px solid rgba(68, 187, 164, 0.32);
}

.jh-flow-target .jh-mono {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jh-muted);
}

.jh-flow-amount {
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--jh-strong);
  font-variant-numeric: tabular-nums;
}

.jh-flow-target .jh-flow-example {
  font-size: 10px;
  color: var(--jh-faint);
}

/* The old way ------------------------------------------------------------------ */

.jh-shatter span {
  display: block;
}

.jh-grad-a,
.jh-grad-b {
  width: fit-content;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.jh-grad-a { background-image: linear-gradient(to right, #E94F37, #44BBA4, #E94F37); }
.jh-grad-b { background-image: linear-gradient(to right, #44BBA4, #E94F37, #44BBA4); }

.jh-broken .jh-head {
  margin-bottom: 56px;
}

.jh-cards3 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.jh-story-card {
  flex: 1 1 280px;
  min-width: 0;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--jh-card);
  border: 1px solid var(--jh-card-edge);
  box-shadow: var(--jh-card-shadow);
}

.jh-story-card.jh-cnr {
  --cnr: var(--jh-cnr-def);
  border-color: transparent;
}

.jh-bracket {
  font-family: var(--jh-mono);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jh-text);
}

.jh-story-art {
  flex: 1;
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jh-story-line {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--jh-strong);
}

.jh-swap {
  display: grid;
}

.jh-swap > * {
  grid-area: 1 / 1;
}

.jh-swap > [data-m-swap-b] {
  opacity: 0;
}

/* Black box waveform */
.jh-bb {
  position: relative;
  width: 100%;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.jh-bb > span:not(.jh-bb-song):not(.jh-bb-box) {
  width: 2px;
  background: var(--jh-line-4);
}

.jh-bb > .jh-bb-hot {
  background: rgba(233, 79, 55, 0.55) !important;
}

.jh-bb-song,
.jh-bb-box {
  position: absolute;
  padding: 8px 18px;
  border-radius: 9999px;
  color: var(--jh-white);
  font-size: 16px;
  white-space: nowrap;
}

.jh-bb-song {
  left: 12%;
  background: rgba(40, 40, 40, 0.9);
  border: 1px solid var(--jh-line-4);
}

.jh-bb-box {
  right: 10%;
  background: var(--jh-coral);
}

/* Middlemen radar */
.jh-radar {
  position: relative;
  width: min(260px, 100%);
  aspect-ratio: 1 / 1;
}

.jh-ring,
.jh-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
}

.jh-ring-1 { width: 100%; height: 100%; border: 1px solid var(--jh-line); }
.jh-ring-2 { width: 73%; height: 73%; border: 1px solid var(--jh-line-2); }
.jh-ring-3 { width: 46%; height: 46%; border: 1px solid var(--jh-line-2); }

.jh-sweep {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(233, 79, 55, 0) 0deg, rgba(233, 79, 55, 0) 240deg, rgba(233, 79, 55, 0.06) 280deg, rgba(233, 79, 55, 0.38) 357deg, rgba(233, 79, 55, 0.95) 359.5deg, rgba(233, 79, 55, 0) 360deg);
  animation: jh-spin 3.6s linear infinite;
}

.jh-node {
  width: 46px;
  height: 46px;
  transform-origin: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #393E41;
  box-shadow: 0 0 0 6px var(--jh-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--jh-strong);
}

.jh-node-you {
  background: linear-gradient(160deg, #FFFFFF, #9A9A9A);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--jh-ink);
}

.jh-node-1 { left: 18%; top: 38%; }
.jh-node-2 { left: 80%; top: 26%; }
.jh-node-3 { left: 50%; top: 82%; }
.jh-node-hot { background: var(--jh-coral); }

.jh-gain {
  background: #262626;
  border: 1px solid rgba(68, 187, 164, 0.65);
  box-shadow: 0 0 0 6px rgba(68, 187, 164, 0.12);
  opacity: 0;
  pointer-events: none;
}

.jh-gain-tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  transform-origin: 0 50%;
  padding: 3px 7px;
  background: var(--jh-teal);
  color: var(--jh-ink);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
}

/* Twelve months later */
.jh-late {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jh-late-dot {
  position: absolute;
  left: 12px;
  top: 8%;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border-radius: 9999px;
  background: var(--jh-coral);
  box-shadow: 0 0 0 4px rgba(233, 79, 55, 0.22);
  opacity: 0;
  pointer-events: none;
}

.jh-late-rail {
  position: absolute;
  left: 12px;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--jh-line-3);
}

.jh-late-row,
.jh-late-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: 36px;
  padding: 12px;
  border: 1px solid var(--jh-line);
}

.jh-late-row {
  opacity: 0.25;
}

.jh-late-row > span {
  width: 34px;
  height: 34px;
  background: var(--jh-line-3);
}

.jh-late-check {
  background: var(--jh-line);
  border-color: var(--jh-line-3);
}

.jh-late-art {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--jh-coral), #393E41);
}

.jh-late-text {
  flex: 1 1 120px;
  min-width: 0;
}

.jh-late-text span {
  display: block;
  font-size: 15px;
  color: var(--jh-strong);
}

.jh-late-text span + span {
  font-size: 12px;
  color: var(--jh-muted);
}

.jh-late-review {
  padding: 6px 12px;
  background: var(--jh-line-2);
  color: var(--jh-strong);
  font-size: 13px;
}

/* Comparison --------------------------------------------------------------------- */

.jh-compare {
  padding: 0 0 clamp(96px, 10vw, 144px);
}

.jh-compare-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.jh-panel {
  position: relative;
  flex: 1 1 360px;
  min-width: 0;
  padding: clamp(28px, 3vw, 44px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.jh-panel-teal {
  --cnr: var(--jh-teal);
  background: radial-gradient(90% 70% at 100% 0%, rgba(68, 187, 164, 0.18), rgba(68, 187, 164, 0) 60%), var(--jh-card);
  border-color: rgba(68, 187, 164, 0.35);
}

.jh-panel-lead {
  margin-bottom: 24px !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.jh-steps-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--jh-line);
  font-size: 18px;
  line-height: 24px;
  color: var(--jh-strong);
}

.jh-steps-list small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-step-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jh-coral);
  color: var(--jh-coral);
  font-family: var(--jh-mono);
  font-size: 13px;
}

.jh-panel-teal .jh-step-box {
  border-color: var(--jh-teal);
  color: var(--jh-teal);
}

.jh-race {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(24px, 3vw, 40px);
}

.jh-race > .jh-label {
  margin: 0 !important;
  color: var(--jh-text);
}

.jh-race-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jh-race-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.jh-race-head .jh-label {
  margin: 0 !important;
}

.jh-race-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.jh-race-count [data-m-race-n] {
  min-width: 1.2em;
  text-align: right;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--jh-strong);
}

.jh-race-count .jh-mono {
  min-width: 5.2em;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-race-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  height: 32px;
}

.jh-race-empty {
  border: 1px solid var(--jh-line);
  background: repeating-linear-gradient(135deg, var(--jh-line) 0 2px, transparent 2px 7px);
}

.jh-race-pay {
  background: var(--jh-teal);
  transform-origin: 50% 100%;
}

.jh-race-old {
  background: var(--jh-coral);
}

.jh-race-headline {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 2px;
  background: var(--jh-strong);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}

.jh-race-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-race .jh-fine {
  margin-top: 0 !important;
}

/* Dashboard preview ---------------------------------------------------------- */

.jh-dash {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 10vw, 140px) 0 0;
  background: linear-gradient(180deg, #0A0F0E, #1B6B5D 45%, #0F2A26);
}

.jh-dash-inner {
  position: relative;
  text-align: center;
}

.jh-dash-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: 980px;
  margin: 36px auto 48px;
}

.jh-dash-logos img {
  opacity: 0.9;
}

.jh-dash-stage {
  perspective: 1800px;
  margin-top: 56px;
}

.jh-dash-frame {
  transform: rotateX(20deg) rotateZ(-3deg);
  transform-origin: 50% 0;
  padding: 20px clamp(16px, 2.4vw, 32px) 64px;
  text-align: left;
  background: linear-gradient(180deg, #2D2D2D, #262626 70%);
  border: 1px solid var(--jh-line-2);
  border-bottom: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.jh-dash-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.jh-dash-dots {
  display: flex;
  gap: 6px;
}

.jh-dash-dots span {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--jh-line-4);
}

.jh-dash-tabs {
  display: flex;
  gap: 4px;
  margin: 0 auto;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
}

.jh-dash-tabs span {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--jh-strong);
}

.jh-dash-tabs .is-on {
  background: var(--jh-line-2);
}

.jh-dash-action {
  padding: 7px 14px;
  background: var(--jh-teal);
  color: #0F0F0F;
  font-size: 13px;
  font-weight: 600;
}

.jh-dash-greeting {
  margin-bottom: 20px !important;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--jh-strong);
}

.jh-dash-tiles,
.jh-dash-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jh-dash-tiles {
  margin-bottom: 12px;
}

.jh-dash-tiles > div,
.jh-dash-panels > div {
  min-width: 0;
  background: linear-gradient(170deg, #FFFFFF, #D9E2DF);
  color: #1A1A1A;
}

.jh-dash-tiles > div {
  flex: 1 1 140px;
  padding: 14px 16px;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.5);
}

.jh-dash-tiles p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 22px;
  line-height: 26px;
}

.jh-dash-tiles p:first-child {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #55595C;
}

.jh-dash-tiles p > span,
.jh-dash-big > span {
  font-size: 12px;
  font-weight: 600;
}

.jh-up {
  color: var(--jh-teal);
}

.jh-dash-panels > div {
  padding: 18px;
}

.jh-dash-chart {
  flex: 2 1 320px;
}

.jh-dash-mix {
  flex: 1 1 220px;
}

.jh-dash-panels p {
  font-size: 13px;
  color: #55595C;
}

.jh-dash-chart > p:first-child {
  margin-bottom: 4px;
}

.jh-dash-mix > p {
  margin-bottom: 14px;
}

.jh-dash-chart .jh-dash-big {
  margin-bottom: 16px;
  font-size: 24px;
  color: #1A1A1A;
}

.jh-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 90px;
}

.jh-dash-bars span {
  flex: 1;
  background: rgba(68, 187, 164, 0.45);
}

.jh-dash-bars span:last-child {
  background: var(--jh-teal);
}

.jh-dash-mix > div {
  margin-bottom: 12px;
}

.jh-dash-mix > div p {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #1A1A1A;
}

.jh-meter {
  display: block;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
}

.jh-meter span {
  display: block;
  height: 100%;
  background: var(--jh-teal);
}

.jh-meter .jh-meter-coral {
  background: var(--jh-coral);
}

/* How it works ----------------------------------------------------------------- */

.jh-how {
  padding: clamp(104px, 11vw, 168px) 0;
}

.jh-how-head {
  margin-bottom: clamp(48px, 5.5vw, 72px);
  text-align: center;
}

.jh-how-head .jh-eyebrow {
  margin-bottom: 18px !important;
  letter-spacing: 0.1em;
}

.jh-how-head h2 {
  margin-bottom: 20px;
  font-size: clamp(44px, 5vw, 68px);
}

.jh-how-head > p:last-child {
  max-width: 520px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.55;
  color: var(--jh-muted);
}

.jh-how-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.jh-how-steps > li {
  flex: 1 1 240px;
  min-width: 0;
}

.jh-how-art {
  --g: linear-gradient(165deg, #5FD0B9 0%, #2A7F6F 55%, #1F4E46 100%);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.06;
  background: var(--g);
}

/* "Example" marks every made-up figure on the page: small, quiet, always in the same corner. */
.jh-example-tag {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 3px 8px;
  background: rgba(10, 15, 14, 0.45);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.jh-example-tag--inline {
  position: static;
  margin-left: auto;
  padding: 0;
  background: none;
  color: var(--jh-dim);
}

.jh-how-art-2 { --g: linear-gradient(165deg, #44BBA4 0%, #23705F 50%, #1A2E2B 100%); }
.jh-how-art-3 { --g: linear-gradient(165deg, #7FE3CF 0%, #2A7F6F 60%, #22403B 100%); }

.jh-how-art > img {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(1.08) blur(1.5px);
}

.jh-how-art-2 > img {
  object-position: center 30%;
  filter: grayscale(1) contrast(1.15) brightness(1.62) blur(1.5px);
}

/* Tint the photo: colour blend, multiply, then a soft top light. */
.jh-how-art::before,
.jh-how-art::after {
  content: "";
  position: absolute;
  inset: 0;
}

.jh-how-art::before {
  background: var(--g);
  mix-blend-mode: color;
}

.jh-how-art::after {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--jh-line-3), rgba(255, 255, 255, 0) 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28)),
    var(--g);
  background-blend-mode: normal, normal, multiply;
  opacity: 0.75;
  mix-blend-mode: multiply;
}

.jh-glass {
  background: var(--jh-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--jh-line-3);
  box-shadow: inset 0 1px 0 var(--jh-line-2), 0 16px 40px -16px rgba(0, 0, 0, 0.55);
  color: var(--jh-strong);
}

.jh-how-scene {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

.jh-how-scene-1 {
  top: 22%;
  width: 214px;
}

.jh-glass-icons {
  display: flex;
  gap: 18px;
}

.jh-glass-icons .jh-glass {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.jh-tree {
  position: relative;
  width: 174px;
  height: 26px;
  margin-left: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) 57px 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) 115px 0 / 1px 100% no-repeat;
}

.jh-stem {
  width: 0;
  height: 24px;
  margin-left: 106.5px;
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
}

.jh-glass-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 0 auto;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.jh-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid var(--jh-teal);
  border-top-color: transparent;
  animation: jh-spin 1s linear infinite;
}

.jh-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.jh-chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border: 1px dashed var(--jh-line-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--jh-strong);
}

.jh-how-scene-2 {
  bottom: 9%;
  width: 86%;
  max-width: 320px;
  padding: 16px;
}

.jh-scene-top,
.jh-scene-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.jh-scene-top {
  align-items: flex-start;
  margin-bottom: 20px;
}

.jh-scene-bottom {
  align-items: flex-end;
}

.jh-scene-title {
  margin-bottom: 4px !important;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.jh-scene-sub {
  font-size: 11px;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.jh-scene-sub .jh-teal {
  font-weight: 600;
}

.jh-scene-pill {
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid var(--jh-line-3);
  font-size: 10px;
  line-height: 14px;
}

.jh-scene-big {
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.jh-scene-bottom .jh-scene-sub {
  margin-top: 6px !important;
}

.jh-dot-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.jh-dot-bars span {
  width: 3px;
  background: radial-gradient(circle, rgba(68, 187, 164, 0.85) 1.5px, transparent 1.6px) 0 100% / 3px 6px repeat-y;
}

.jh-dot-bars span:last-child {
  background-image: radial-gradient(circle, var(--jh-teal) 1.5px, transparent 1.6px);
}

.jh-how-scene-3 {
  top: 30%;
  width: 84%;
  max-width: 320px;
}

.jh-glass-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 7px 12px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
}

.jh-glass-card {
  padding: 18px;
}

.jh-scene-label {
  margin-bottom: 4px !important;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.jh-glass-card .jh-scene-big {
  margin-bottom: 14px !important;
  font-size: 34px;
}

.jh-scene-lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--jh-line-2);
}

.jh-scene-lines p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.jh-scene-lines span {
  flex: 1;
}

.jh-scene-lines strong {
  font-weight: 600;
  color: var(--jh-strong);
}

.jh-how-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  margin-top: 24px;
}

.jh-how-num {
  font-size: 13px;
  line-height: 28px;
  font-weight: 600;
  color: var(--jh-teal);
  font-variant-numeric: tabular-nums;
}

.jh-how-copy h3 {
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--jh-strong);
}

.jh-how-copy p {
  grid-column: 2;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--jh-muted);
}

/* New to publishing -------------------------------------------------------------- */

.jh-guide {
  border-top: 1px solid var(--jh-line);
}

.jh-guide-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

.jh-guide-grid > div:first-child {
  flex: 1 1 300px;
  min-width: 0;
}

.jh-guide-body {
  flex: 1.3 1 380px;
  min-width: 0;
  padding-top: 8px;
}

.jh-guide-lead {
  margin-bottom: 32px !important;
  font-size: 19px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.jh-royalty-types {
  display: grid;
  gap: 1px;
  margin-bottom: 24px !important;
  background: var(--jh-line);
  border: 1px solid var(--jh-line);
  box-shadow: var(--jh-card-shadow);
}

.jh-royalty-types > div {
  padding: 24px;
  background: var(--jh-card);
}

.jh-royalty-types .is-ours {
  background: radial-gradient(90% 90% at 100% 0%, rgba(68, 187, 164, 0.16), rgba(68, 187, 164, 0) 60%), var(--jh-card);
}

.jh-royalty-types dt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 20px;
  color: var(--jh-strong);
}

.jh-royalty-types dt .jh-mono {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-royalty-types .is-ours dt .jh-mono {
  color: var(--jh-teal);
}

.jh-royalty-types dd {
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.jh-guide-pro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  margin-bottom: 32px;
  padding: 24px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line);
  border-top: 2px solid var(--jh-coral);
  box-shadow: var(--jh-card-shadow);
}

.jh-guide-pro-icon {
  font-size: 22px;
  line-height: 1.2;
  color: var(--jh-coral);
}

.jh-guide-pro-title {
  margin-bottom: 8px !important;
  font-size: 18px;
  color: var(--jh-strong);
}

.jh-guide-pro p:not(.jh-guide-pro-title) {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.jh-guide-pro-link {
  font-size: 15px;
  color: var(--jh-teal);
  text-decoration: none;
}

.jh-guide-pro-link:hover,
.jh-guide-pro-link:focus-visible {
  text-decoration: underline;
}

/* Teal band ----------------------------------------------------------------------- */

.jh-band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding: clamp(56px, 7vw, 104px) max(var(--jh-gutter), calc((100% - 1184px) / 2));
  background: var(--jh-teal);
  color: var(--jh-ink);
}

.jh-band-copy {
  flex: 1 1 360px;
  min-width: 0;
}

.jh-band .jh-display {
  color: var(--jh-ink);
}

.jh-band-copy p {
  max-width: 460px;
  margin-top: 20px !important;
  font-size: 19px;
  line-height: 1.5;
}

.jh-band-card {
  --cnr: rgba(255, 255, 255, 0.6);
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: rgba(10, 15, 14, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--jh-line-2);
  color: var(--jh-strong);
}

.jh-band-card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.jh-band-card > p:nth-child(2) {
  font-size: 16px;
  line-height: 1.55;
  color: var(--jh-text);
}

.jh-band-card .jh-btn {
  height: 56px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jh-band-fine {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--jh-text);
}

/* Plan fact tiles ----------------------------------------------------------- */

.jh-tiles-section {
  padding: clamp(96px, 10vw, 144px) var(--jh-gutter) 0;
}

.jh-tiles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  max-width: 1184px;
  margin: 0 auto;
  background: var(--jh-tiles-gap);
}

.jh-span-4 { grid-column: span 4; }
.jh-span-5 { grid-column: span 5; }
.jh-span-7 { grid-column: span 7; }

.jh-tile {
  min-height: clamp(260px, 24vw, 340px);
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
}

.jh-tile-teal {
  background: var(--jh-teal);
  color: var(--jh-ink);
}

.jh-tile-dark {
  position: relative;
  background: var(--jh-tile);
  color: var(--jh-strong);
}

.jh-tile-num {
  font-size: clamp(52px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.jh-tile-what {
  margin-top: 12px !important;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.jh-tile-note {
  margin-top: auto !important;
  padding-top: 28px;
  font-size: 15px;
  line-height: 22px;
  opacity: 0.72;
}

.jh-tile-statement {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #1A1A1A;
}

.jh-tile-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px !important;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-text);
}

.jh-tile-headline {
  max-width: 620px;
  margin-bottom: 36px !important;
  font-size: clamp(36px, 4.4vw, 64px);
}

@media (max-width: 979px) {
  .jh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jh-span-4,
  .jh-span-5 { grid-column: auto; }
  .jh-span-7 { grid-column: span 2; }
}

@media (max-width: 639px) {
  .jh-tiles { grid-template-columns: minmax(0, 1fr); }
  .jh-span-7 { grid-column: auto; }
}

/* Pricing ------------------------------------------------------------------------- */

.jh-pricing {
  position: relative;
  overflow: hidden;
  margin-top: clamp(96px, 10vw, 144px);
  background:
    radial-gradient(140% 55% at 50% 118%, rgba(68, 187, 164, 0.55), rgba(68, 187, 164, 0.35) 40%, rgba(68, 187, 164, 0) 70%),
    linear-gradient(180deg, #050B0A, #0B1C1A 55%, #15463E);
}

/* Star field: a fixed scatter of one-pixel dots. */
.jh-pricing::before {
  content: "";
  position: absolute;
  inset: 0 0 30% 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 14% 22%, #fff, transparent),
    radial-gradient(1px 1px at 91% 37%, #fff, transparent),
    radial-gradient(1px 1px at 47% 18%, #fff, transparent),
    radial-gradient(1px 1px at 87% 46%, #fff, transparent),
    radial-gradient(1px 1px at 74% 12%, #fff, transparent),
    radial-gradient(1px 1px at 65% 45%, #fff, transparent),
    radial-gradient(1px 1px at 36% 1%, #fff, transparent),
    radial-gradient(1px 1px at 95% 65%, #fff, transparent),
    radial-gradient(1px 1px at 64% 67%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 91% 44%, #fff, transparent),
    radial-gradient(1px 1px at 27% 65%, #fff, transparent),
    radial-gradient(1px 1px at 7% 59%, #fff, transparent),
    radial-gradient(1px 1px at 23% 22%, #fff, transparent),
    radial-gradient(1px 1px at 42% 32%, #fff, transparent),
    radial-gradient(1px 1px at 15% 5%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 87% 21%, #fff, transparent),
    radial-gradient(1px 1px at 1% 46%, #fff, transparent),
    radial-gradient(1px 1px at 46% 50%, #fff, transparent),
    radial-gradient(1px 1px at 26% 21%, #fff, transparent),
    radial-gradient(1px 1px at 15% 48%, #fff, transparent),
    radial-gradient(1px 1px at 98% 4%, #fff, transparent),
    radial-gradient(1px 1px at 59% 52%, #fff, transparent),
    radial-gradient(1px 1px at 57% 6%, #fff, transparent),
    radial-gradient(1px 1px at 9% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 25%, #fff, transparent),
    radial-gradient(1px 1px at 10% 14%, #fff, transparent),
    radial-gradient(1px 1px at 28% 52%, #fff, transparent),
    radial-gradient(1px 1px at 32% 53%, #fff, transparent),
    radial-gradient(1px 1px at 40% 22%, #fff, transparent),
    radial-gradient(1px 1px at 68% 16%, #fff, transparent),
    radial-gradient(1px 1px at 18% 10%, #fff, transparent),
    radial-gradient(1px 1px at 8% 36%, #fff, transparent),
    radial-gradient(1px 1px at 83% 37%, #fff, transparent),
    radial-gradient(1px 1px at 54% 18%, #fff, transparent),
    radial-gradient(1px 1px at 86% 34%, #fff, transparent),
    radial-gradient(1px 1px at 66% 39%, #fff, transparent),
    radial-gradient(1px 1px at 20% 41%, #fff, transparent),
    radial-gradient(1px 1px at 31% 30%, #fff, transparent),
    radial-gradient(1px 1px at 39% 60%, #fff, transparent),
    radial-gradient(1px 1px at 42% 15%, #fff, transparent),
    radial-gradient(1px 1px at 84% 65%, #fff, transparent),
    radial-gradient(1px 1px at 94% 32%, #fff, transparent),
    radial-gradient(1px 1px at 55% 24%, #fff, transparent),
    radial-gradient(1px 1px at 61% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 59% 46%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 3% 23%, #fff, transparent),
    radial-gradient(1px 1px at 24% 9%, #fff, transparent),
    radial-gradient(1px 1px at 33% 62%, #fff, transparent),
    radial-gradient(1px 1px at 79% 6%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 27% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 5% 67%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 47% 48%, #fff, transparent);
}

.jh-pricing .jh-wrap {
  position: relative;
}

.jh-pricing-lead {
  max-width: 560px;
  margin: 24px 0 96px !important;
  font-size: 18px;
  line-height: 1.5;
  color: var(--jh-muted);
}

.jh-plans {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
}

.jh-plan-wrap {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.jh-plan-wrap-pro {
  margin-top: -44px;
}

.jh-plan-flag {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jh-coral);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--jh-ink);
}

.jh-plan {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--jh-plan-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.jh-plan-pro {
  border-color: var(--jh-coral);
}

.jh-plan h3 {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 400;
  color: var(--jh-strong);
}

.jh-plan-desc {
  min-height: 46px;
  margin-bottom: 28px !important;
  font-size: 16px;
  line-height: 1.45;
  color: var(--jh-muted);
}

.jh-plan-price {
  margin-bottom: 28px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--jh-line-2);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--jh-strong);
}

.jh-plan-price-word {
  font-size: 40px;
  letter-spacing: -0.03em;
}

.jh-plan-price span {
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--jh-muted);
}

.jh-checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px !important;
}

.jh-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--jh-text);
}

.jh-checks li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 9999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%230A0F0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
    var(--jh-teal);
}

.jh-plan-terms {
  flex: 1;
  margin-bottom: 28px !important;
  font-size: 13px;
  line-height: 1.55;
  color: var(--jh-dim);
}

.jh-plan .jh-btn {
  width: 100%;
  padding: 15px;
  font-size: 16px;
}

.jh-pricing-terms {
  display: inline-block;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .jh-plan-wrap-pro {
    margin-top: 0;
  }
}

/* Questions ------------------------------------------------------------------------ */

.jh-faq-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

.jh-faq-grid > div:first-child {
  flex: 1 1 300px;
  min-width: 0;
}

.jh-faq-lead {
  max-width: 380px;
  margin-top: 24px !important;
  font-size: 18px;
  line-height: 1.5;
  color: var(--jh-muted);
}

.jh-faq-list {
  flex: 1.4 1 420px;
  min-width: 0;
  border-top: 1px solid var(--jh-line-2);
}

.jh-faq-list details {
  border-bottom: 1px solid var(--jh-line-2);
}

.jh-faq-list summary {
  position: relative;
  padding: 24px 48px 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  line-height: 1.35;
  color: var(--jh-strong);
  transition: color 150ms;
}

.jh-faq-list summary::-webkit-details-marker {
  display: none;
}

.jh-faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--jh-mono);
  font-size: 22px;
  color: var(--jh-teal);
  transition: transform 200ms;
}

.jh-faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.jh-faq-list summary:hover {
  color: var(--jh-teal);
}

.jh-faq-list details p {
  max-width: 680px;
  padding-bottom: 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--jh-muted);
}

/* Contact ------------------------------------------------------------------------ */

.jh-contact {
  border-top: 1px solid var(--jh-line);
}

.jh-contact-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.jh-contact-grid > div:first-child {
  flex: 1 1 360px;
  min-width: 0;
}

.jh-contact-lead {
  max-width: 460px;
  margin-top: 24px !important;
  font-size: 18px;
  line-height: 1.5;
  color: var(--jh-muted);
}

.jh-contact-links {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jh-site .jh-contact-links a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  font-size: 19px;
  color: var(--jh-strong);
  transition: border-color 150ms, background 150ms;
  box-shadow: var(--jh-card-shadow);
}

.jh-site .jh-contact-links a:hover {
  background: rgba(68, 187, 164, 0.08);
  border-color: rgba(68, 187, 164, 0.4);
}

.jh-contact-links .jh-mono {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-contact-links [data-m-nudge] {
  color: var(--jh-teal);
}

/* Mobile app ------------------------------------------------------------------- */

.jh-mobile {
  border-top: 1px solid var(--jh-line);
}

.jh-mobile-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.jh-mobile-grid > div:first-child > p:not(.jh-eyebrow):not(.jh-fine) {
  margin-top: 20px;
  font-size: 18px;
  color: var(--jh-muted);
}

.jh-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.jh-site .jh-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1px solid var(--jh-line-3);
  background: var(--jh-ghost-bg);
  color: var(--jh-strong);
  --cnr: var(--jh-strong);
}

.jh-store i {
  font-size: 28px;
}

.jh-store small {
  display: block;
  font-size: 11px;
  color: var(--jh-muted);
}

.jh-store strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

/* Final call to action --------------------------------------------------------- */

.jh-final {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 144px) max(var(--jh-gutter), calc((100% - 1184px) / 2));
  background: var(--jh-coral);
  color: var(--jh-white);
}

.jh-final-inner {
  position: relative;
}

.jh-final-kicker {
  margin-bottom: 24px !important;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jh-final-title {
  font-size: clamp(56px, 9.2vw, 122px);
  line-height: 0.86;
  letter-spacing: -0.04em;
}

.jh-final-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  align-items: end;
  gap: clamp(24px, 4vw, 72px);
  margin-top: clamp(40px, 5vw, 80px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.jh-final-row > p {
  max-width: 520px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
}

.jh-final-box {
  --cnr: var(--jh-white);
  display: flex;
  padding: 8px;
  background: var(--jh-ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.jh-final-box .jh-btn {
  flex: 1;
  height: 56px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  --cnr: transparent;
}

.jh-final-fine {
  margin-top: 18px !important;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.06em;
}

/* Footer -------------------------------------------------------------------------- */

.jh-footer {
  padding: clamp(80px, 8vw, 120px) 0 0;
  background: var(--jh-bg);
  color: var(--jh-text);
}

.jh-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 32px;
  padding-bottom: 48px;
}

.jh-footer-brand {
  flex: 1.3 1 200px;
}

.jh-footer-brand img {
  width: 156px;
  height: 26px;
  margin-bottom: 28px;
}

.jh-footer-brand p {
  white-space: nowrap;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.jh-footer-col {
  flex: 1 1 108px;
}

.footer-phone {
  white-space: nowrap;
}

.jh-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jh-footer-col h4 {
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-site .jh-footer-col a {
  font-size: 16px;
  color: var(--jh-strong);
}

.jh-site .jh-footer-col a:hover {
  color: var(--jh-coral);
}

.jh-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--jh-line-2);
  font-size: 15px;
  color: var(--jh-dim);
}

.jh-footer-lang {
  margin: 0;
}

.jh-footer-lang-select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--jh-line-3);
  background: var(--jh-bg);
  color: var(--jh-text);
  font: inherit;
  font-size: 14px;
}

/* Light theme. html[data-theme] comes from the head script and the footer toggle. */
html[data-theme="light"] {
  --jh-bg: #F6F5F4;
  --jh-card: #FFFFFF;
  --jh-tile: #FFFFFF;
  --jh-strong: #0A0F0E;
  --jh-text: #1F2624;
  --jh-muted: #4A5250;
  --jh-dim: #6B7270;
  --jh-faint: #8B918F;
  --jh-line: rgba(10, 15, 14, 0.08);
  --jh-line-2: rgba(10, 15, 14, 0.12);
  --jh-line-3: rgba(10, 15, 14, 0.2);
  --jh-line-4: rgba(10, 15, 14, 0.35);
  --jh-cnr-def: rgba(10, 15, 14, 0.45);
  --jh-card-edge: rgba(10, 15, 14, 0.1);
  --jh-card-shadow: 0 1px 2px rgba(10, 15, 14, 0.04), 0 12px 32px -20px rgba(10, 15, 14, 0.18);
  --jh-ghost-bg: rgba(255, 255, 255, 0.72);
  --jh-chip-bg: #FFFFFF;
  --jh-plan-bg: #FFFFFF;
  --jh-tiles-gap: #DCE3E1;
  --jh-nav-bg: rgba(246, 245, 244, 0.86);
  color-scheme: light;
}

/* The hero, dashboard, teal-band card, coral close and step photos stay dark in both themes. */
html[data-theme="light"] :is(.jh-hero, .jh-dash, .jh-band-card, .jh-final, .jh-how-art, .jh-tile-statement) {
  --jh-card: #0F1716;
  --jh-tile: #0B1312;
  --jh-text: #E8E8E8;
  --jh-muted: #B8B8B8;
  --jh-dim: #8B8B8B;
  --jh-faint: #6B6B6B;
  --jh-line: rgba(255, 255, 255, 0.08);
  --jh-bg: #0A0F0E;
  --jh-strong: #FFFFFF;
  --jh-line-2: rgba(255, 255, 255, 0.12);
  --jh-line-3: rgba(255, 255, 255, 0.22);
  --jh-line-4: rgba(255, 255, 255, 0.45);
  --jh-cnr-def: rgba(255, 255, 255, 0.5);
  --jh-card-edge: #2A2A2A;
  --jh-card-shadow: none;
  --jh-ghost-bg: rgba(10, 15, 14, 0.5);
  --jh-chip-bg: rgba(10, 15, 14, 0.72);
  --jh-plan-bg: rgba(255, 255, 255, 0.07);
  --jh-tiles-gap: #1A2422;
  --jh-nav-bg: rgba(10, 15, 14, 0.78);
  color-scheme: dark;
}

html[data-theme="light"] .jh-pricing {
  background:
    radial-gradient(140% 55% at 50% 118%, rgba(68, 187, 164, 0.35), rgba(68, 187, 164, 0.16) 40%, rgba(68, 187, 164, 0) 70%),
    linear-gradient(180deg, #F6F5F4, #EEF4F2 55%, #DDEDE8);
}

html[data-theme="light"] .jh-pricing::before {
  display: none;
}

/* The society logos are white artwork; turn them dark on light cards. */
html[data-theme="light"] .jh-society-grid img {
  filter: invert(1);
  opacity: 0.78;
}

/* Each logo file suits one background. */
.jh-site .jh-logo-light {
  display: none;
}

html[data-theme="light"] .jh-site .jh-logo-light {
  display: block;
}

html[data-theme="light"] .jh-site .jh-logo-dark {
  display: none;
}

/* Theme switch in the footer. */
.jh-footer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jh-theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jh-line-3);
  background: transparent;
  color: var(--jh-text);
  font-size: 18px;
  cursor: pointer;
}

.jh-theme-toggle:hover {
  color: var(--jh-teal);
}

/* Dark shows the sun (switch to light); light shows the moon. */
.jh-theme-toggle .theme-icon-light,
html[data-theme="light"] .jh-theme-toggle .theme-icon-dark {
  display: none;
}

html[data-theme="light"] .jh-theme-toggle .theme-icon-light {
  display: inline;
}

/* Bar heights for the illustrations; the template carries no inline styles. */
.jh-bb > span:nth-child(1) { height: 20%; }
.jh-bb > span:nth-child(2) { height: 70%; }
.jh-bb > span:nth-child(3) { height: 91%; }
.jh-bb > span:nth-child(4) { height: 73%; }
.jh-bb > span:nth-child(5) { height: 36%; }
.jh-bb > span:nth-child(6) { height: 31%; }
.jh-bb > span:nth-child(7) { height: 33%; }
.jh-bb > span:nth-child(8) { height: 23%; }
.jh-bb > span:nth-child(9) { height: 33%; }
.jh-bb > span:nth-child(10) { height: 21%; }
.jh-bb > span:nth-child(11) { height: 55%; }
.jh-bb > span:nth-child(12) { height: 85%; }
.jh-bb > span:nth-child(13) { height: 83%; }
.jh-bb > span:nth-child(14) { height: 45%; }
.jh-bb > span:nth-child(15) { height: 49%; }
.jh-bb > span:nth-child(16) { height: 87%; }
.jh-bb > span:nth-child(17) { height: 87%; }
.jh-bb > span:nth-child(18) { height: 56%; }
.jh-bb > span:nth-child(19) { height: 21%; }
.jh-bb > span:nth-child(20) { height: 38%; }
.jh-bb > span:nth-child(21) { height: 29%; }
.jh-bb > span:nth-child(22) { height: 28%; }
.jh-bb > span:nth-child(23) { height: 28%; }
.jh-bb > span:nth-child(24) { height: 37%; }
.jh-bb > span:nth-child(25) { height: 71%; }
.jh-bb > span:nth-child(26) { height: 87%; }
.jh-bb > span:nth-child(27) { height: 66%; }
.jh-bb > span:nth-child(28) { height: 24%; }
.jh-bb > span:nth-child(29) { height: 74%; }
.jh-bb > span:nth-child(30) { height: 94%; }
.jh-bb > span:nth-child(31) { height: 75%; }
.jh-bb > span:nth-child(32) { height: 35%; }
.jh-bb > span:nth-child(33) { height: 35%; }
.jh-bb > span:nth-child(34) { height: 39%; }
.jh-bb > span:nth-child(35) { height: 23%; }
.jh-bb > span:nth-child(36) { height: 29%; }
.jh-bb > span:nth-child(37) { height: 22%; }
.jh-bb > span:nth-child(38) { height: 54%; }
.jh-bb > span:nth-child(39) { height: 82%; }
.jh-bb > span:nth-child(40) { height: 79%; }
.jh-bb > span:nth-child(41) { height: 41%; }
.jh-bb > span:nth-child(42) { height: 53%; }
.jh-bb > span:nth-child(43) { height: 90%; }
.jh-bb > span:nth-child(44) { height: 89%; }
.jh-bb > span:nth-child(45) { height: 55%; }
.jh-bb > span:nth-child(46) { height: 24%; }
.jh-dash-bars span:nth-child(1) { height: 38%; }
.jh-dash-bars span:nth-child(2) { height: 42%; }
.jh-dash-bars span:nth-child(3) { height: 40%; }
.jh-dash-bars span:nth-child(4) { height: 51%; }
.jh-dash-bars span:nth-child(5) { height: 56%; }
.jh-dash-bars span:nth-child(6) { height: 60%; }
.jh-dash-bars span:nth-child(7) { height: 67%; }
.jh-dash-bars span:nth-child(8) { height: 72%; }
.jh-dash-bars span:nth-child(9) { height: 70%; }
.jh-dash-bars span:nth-child(10) { height: 81%; }
.jh-dash-bars span:nth-child(11) { height: 88%; }
.jh-dash-bars span:nth-child(12) { height: 96%; }
.jh-dot-bars span:nth-child(1) { height: 18px; }
.jh-dot-bars span:nth-child(2) { height: 24px; }
.jh-dot-bars span:nth-child(3) { height: 18px; }
.jh-dot-bars span:nth-child(4) { height: 30px; }
.jh-dot-bars span:nth-child(5) { height: 24px; }
.jh-dot-bars span:nth-child(6) { height: 36px; }
.jh-dot-bars span:nth-child(7) { height: 30px; }
.jh-dot-bars span:nth-child(8) { height: 42px; }
.jh-dot-bars span:nth-child(9) { height: 36px; }
.jh-dot-bars span:nth-child(10) { height: 48px; }
.jh-dot-bars span:nth-child(11) { height: 42px; }
.jh-dot-bars span:nth-child(12) { height: 54px; }
.jh-w-59 { width: 59%; }
.jh-w-33 { width: 33%; }
.jh-w-8 { width: 8%; }

/* Reduced motion: hold everything at its resting state. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .jh-sweep,
  .jh-spinner,
  .jh-ledger-roll.is-moving {
    animation: none;
  }
}

@media print {
  .jh-nav,
  .jh-ledger {
    display: none;
  }
}