/* Shared marketing components (the classes the guides and other pages use) drawn in the new design.
   Loaded by marketing/jh-base.html after marketing-home.css, whose colour tokens it uses, so the
   light theme comes for free. Pages on marketing-base.html keep the old look from marketing.css. */

/* Page hero ------------------------------------------------------------------- */

.jh-page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(76px + var(--staging-banner-height, 0px) + clamp(40px, 5vw, 72px)) 0 clamp(56px, 6vw, 88px);
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(68, 187, 164, 0.38), rgba(68, 187, 164, 0) 65%),
    linear-gradient(170deg, #12443B, #0F2A26 50%, #0A1513);
}

.jh-page-hero-inner {
  position: relative;
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: 0 var(--jh-gutter);
}

.jh-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px !important;
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-site .jh-crumbs a {
  color: var(--jh-dim);
}

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

.jh-crumbs .eyebrow {
  margin: 0;
  color: var(--jh-teal);
}

.jh-page-title {
  max-width: 920px;
  margin-bottom: 28px !important;
  font-size: clamp(44px, 6vw, 92px);
}

/* The two headline parts run on as one sentence; several guides join them with a comma. */
.jh-page-title > span {
  display: inline;
}

.jh-page-title .accent {
  color: var(--jh-teal);
}

.jh-page-lede {
  max-width: 620px;
  margin-bottom: 32px !important;
  font-size: 18px;
  line-height: 1.55;
  color: var(--jh-text);
}

.jh-page-ctas:empty,
.jh-page-stats:empty {
  display: none;
}

.jh-page-stats {
  margin-top: clamp(40px, 5vw, 64px);
}

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

.marketing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Corner brackets drawn the same way as .jh-cnr in marketing-home.css. */
.jh-site .marketing-button {
  --cnr: var(--jh-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--jh-coral);
  background: var(--jh-coral);
  color: var(--jh-ink);
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  transition: background 150ms, color 150ms;
}

.jh-site .marketing-button::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;
}

.jh-site .marketing-button:hover {
  color: var(--jh-white);
}

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

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

.jh-site .marketing-button--contrast {
  --cnr: var(--jh-white);
  border-color: var(--jh-ink);
  background: var(--jh-ink);
  color: var(--jh-white);
}

.jh-site .marketing-button--contrast:hover {
  background: #1C2422;
  color: var(--jh-white);
}

.jh-site .marketing-button .ph {
  font-size: 16px;
}

/* Sections and the 12-column grid ------------------------------------------------- */

.grid-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--jh-gutter) 0;
}

.jh-page-body > .grid-section:last-child,
.jh-page-body > section:last-child {
  padding-bottom: clamp(72px, 8vw, 120px);
}

.grid-cell { min-width: 0; }
.grid-cell-span-3 { grid-column: span 3; }
.grid-cell-span-4 { grid-column: span 4; }
.grid-cell-span-5 { grid-column: span 5; }
.grid-cell-span-6 { grid-column: span 6; }
.grid-cell-span-7 { grid-column: span 7; }
.grid-cell-span-10 { grid-column: span 10; }
.grid-cell-span-12 { grid-column: span 12; }

/* Narrow cells read as cards, as in the concept; wide ones stay plain columns. */
.grid-cell-span-3,
.grid-cell-span-4 {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.grid-section h2 {
  margin: 0 0 20px;
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.grid-section h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--jh-strong);
}

.grid-section p,
.grid-section li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.grid-section p + p {
  margin-top: 14px;
}

.grid-section .grid-cell-span-3 p,
.grid-section .grid-cell-span-4 p {
  font-size: 14px;
}

.grid-section strong {
  color: var(--jh-strong);
  font-weight: 600;
}

.grid-cell-span-5 h2,
.grid-cell-span-6 h2,
.grid-cell-span-7 h2 {
  font-size: clamp(32px, 3.4vw, 52px);
}

.section-intro {
  max-width: 680px;
  margin-bottom: 32px !important;
  font-size: 18px !important;
  line-height: 1.55;
}

.step-card__title {
  font-size: 20px;
}

.eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

.border-right {
  border-inline-end: 0;
}

/* A dark band in both themes, like the homepage's showcase sections. */
.grid-section.invert {
  max-width: none;
  margin-top: clamp(56px, 7vw, 104px);
  padding: clamp(56px, 7vw, 96px) max(var(--jh-gutter), calc((100% - var(--jh-max)) / 2 + var(--jh-gutter)));
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(68, 187, 164, 0.2), rgba(68, 187, 164, 0) 60%),
    #0F1716;
}

.grid-section.invert + .grid-section {
  padding-top: clamp(56px, 7vw, 104px);
}

@media (max-width: 900px) {
  .grid-cell-span-5,
  .grid-cell-span-6,
  .grid-cell-span-7,
  .grid-cell-span-10 { grid-column: span 12; }
  .grid-cell-span-3,
  .grid-cell-span-4 { grid-column: span 6; }
}

@media (max-width: 560px) {
  .grid-cell-span-3,
  .grid-cell-span-4 { grid-column: span 12; }
}

/* Stats ----------------------------------------------------------------------------- */

.stat-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--jh-line-3);
}

.stat-trio .stat-card {
  padding: 22px 24px 0 0;
}

.stat-trio .stat-card + .stat-card {
  padding-left: 24px;
  border-left: 1px solid var(--jh-line-2);
}

.stat-trio .stat-card__value {
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--jh-strong);
}

.stat-card__label {
  margin-top: 10px;
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.stat-card__sublabel {
  margin-top: 6px;
  font-size: 13px;
  color: var(--jh-faint);
}

/* A figure on its own in a wide column reads large; inside a card the concept sets it as a small mono line. */
.grid-cell > .stat-card__value {
  margin-bottom: 8px;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--jh-strong);
}

.grid-cell-span-3 > .stat-card__value,
.grid-cell-span-4 > .stat-card__value {
  letter-spacing: 0;
  margin-bottom: 12px;
  font-family: var(--jh-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--jh-teal);
}

.grid-cell > .stat-trio {
  margin-top: 24px;
}

/* Tables ----------------------------------------------------------------------------- */

.marketing-table-scroll {
  position: relative;
  overflow-x: auto;
  margin-top: 8px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

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

.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 16px 20px;
  text-align: start;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jh-muted);
}

.data-table thead th {
  font-family: var(--jh-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.data-table tbody tr {
  border-top: 1px solid var(--jh-line);
}

.data-table tbody td:first-child,
.data-table tbody th {
  font-weight: 600;
  color: var(--jh-strong);
}

.publishing-options-label {
  display: block;
  margin-top: 4px;
  color: var(--jh-teal);
}

.data-table__note {
  margin-top: 14px !important;
  font-family: var(--jh-mono);
  font-size: 12px !important;
  color: var(--jh-dim) !important;
}

/* Lists, facts and callouts --------------------------------------------------------- */

.learn-list {
  margin: 16px 0 0 !important;
  border-top: 1px solid var(--jh-line);
  counter-reset: jh-learn;
}

.learn-list li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jh-line);
  color: var(--jh-text);
}

.learn-list li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  border: 1px solid var(--jh-teal);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.4 2.4L12 5.2' fill='none' stroke='%2344BBA4' stroke-width='1.6'/%3E%3C/svg%3E") center / 14px no-repeat;
}

ol.learn-list li {
  counter-increment: jh-learn;
}

ol.learn-list li::before {
  content: counter(jh-learn, decimal-leading-zero);
  width: auto;
  height: auto;
  border: 0;
  background: none;
  font-family: var(--jh-mono);
  font-size: 12px;
  color: var(--jh-teal);
}

.fact-grid {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.fact-grid__heading {
  margin-bottom: 16px !important;
}

.fact-grid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--jh-line);
}

.fact-grid__row dt {
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.fact-grid__row dd {
  margin: 0;
  font-size: 15px;
  color: var(--jh-strong);
}

.callout {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--jh-coral);
}

.callout__kicker {
  display: block;
  margin-bottom: 6px;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-coral);
}

.callout__body {
  color: var(--jh-text) !important;
}

/* FAQ --------------------------------------------------------------------------------- */

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

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

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

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

.marketing-faq 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;
}

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

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

.marketing-faq details > div {
  max-width: 760px;
  padding-bottom: 22px;
}

.marketing-faq details a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Numbered steps -------------------------------------------------------------------- */

.steps-section,
.year-timeline-section,
.related-grid-section {
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--jh-gutter) 0;
}

.steps-section h2,
.year-timeline-section h2,
.related-grid-section h2 {
  margin: 0 0 20px;
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.steps-section .section-intro {
  color: var(--jh-muted);
}

.steps-list {
  max-width: 860px;
}

.step-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
}

.step-row__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.step-rail-line {
  flex: 1;
  width: 0;
  min-height: 24px;
  border-left: 1px dashed var(--jh-line-4);
}

.step-row__body {
  padding: 10px 0 32px;
}

.jh-site .step-row__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  color: var(--jh-strong);
}

.step-row__body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

/* Year timeline --------------------------------------------------------------------- */

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

.year-timeline__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--jh-line-2);
}

.year-timeline__year {
  font-family: var(--jh-mono);
  font-size: 20px;
  color: var(--jh-teal);
}

.year-timeline__body {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

/* Related guides -------------------------------------------------------------------- */

.related-grid-section {
  padding-bottom: clamp(72px, 8vw, 120px);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.jh-site .related-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 24px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
  transition: border-color 150ms, background 150ms;
}

.jh-site .related-card:hover {
  border-color: rgba(68, 187, 164, 0.5);
}

.jh-site .related-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--jh-strong);
}

.related-card__arrow {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

/* Learn: every guide, in three topic rows. */
.jh-guide-index .related-grid-section__head p {
  max-width: 560px;
  margin: 0 0 8px;
  color: var(--jh-text);
}

.jh-site .jh-guide-index__group {
  margin: 40px 0 16px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-muted);
}

.jh-guide-index .related-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jh-site .jh-guide-index .related-card { min-height: 160px; }

@media (max-width: 1100px) {
  .jh-guide-index .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .related-grid,
  .jh-guide-index .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .related-grid,
  .jh-guide-index .related-grid { grid-template-columns: minmax(0, 1fr); }
  .year-timeline__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Closing call to action: the coral band from the concept. ------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  margin-top: clamp(72px, 8vw, 120px);
  padding: clamp(72px, 9vw, 136px) max(var(--jh-gutter), calc((100% - 1184px) / 2));
  background: var(--jh-coral);
  color: var(--jh-white);
}

.cta-band__inner {
  position: relative;
}

.jh-site .cta-band__heading {
  max-width: 1000px;
  margin: 0 0 24px;
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--jh-white);
}

.cta-band__subline {
  max-width: 560px;
  margin-bottom: 32px !important;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--jh-white);
}

.jh-site .cta-band__secondary {
  font-family: var(--jh-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jh-white);
}

.jh-site .cta-band__secondary:hover {
  color: var(--jh-ink);
}

/* Related guides follow the band directly, so the band needs no gap below. */
.cta-band + .related-grid-section {
  padding-top: clamp(56px, 7vw, 104px);
}

/* Light theme: the hero, dark bands and coral band keep their own colours. */
html[data-theme="light"] :is(.jh-page-hero, .grid-section.invert) {
  --jh-bg: #0A0F0E;
  --jh-card: #0F1716;
  --jh-strong: #FFFFFF;
  --jh-text: #E8E8E8;
  --jh-muted: #B8B8B8;
  --jh-dim: #8B8B8B;
  --jh-faint: #6B6B6B;
  --jh-line: rgba(255, 255, 255, 0.08);
  --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-ghost-bg: rgba(10, 15, 14, 0.5);
  --jh-card-shadow: none;
  color-scheme: dark;
}

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

.jh-marquee {
  overflow: hidden;
  padding: 36px 0;
  border-bottom: 1px solid var(--jh-line);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.jh-marquee-track {
  display: flex;
  align-items: center;
  gap: 68px;
  width: max-content;
  animation: jh-marquee 60s linear infinite;
}

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

.jh-marquee img {
  flex-shrink: 0;
  opacity: 0.62;
}

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

.society-filter-bar {
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--jh-gutter) 0;
}

.society-filter-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}

.society-filter-search {
  flex: 1 1 320px;
}

.society-filter-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--jh-line-3);
  background: var(--jh-card);
  color: var(--jh-strong);
  font: inherit;
  font-size: 14px;
}

.society-filter-search input::placeholder {
  color: var(--jh-faint);
}

.society-filter-search input:focus {
  outline: none;
  border-color: var(--jh-teal);
}

.society-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--jh-line-2);
  background: transparent;
  color: var(--jh-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}

.filter-chip:hover {
  color: var(--jh-strong);
  border-color: var(--jh-line-4);
}

.filter-chip.is-active {
  border-color: var(--jh-coral);
  background: rgba(233, 79, 55, 0.12);
  color: var(--jh-strong);
}

.society-hub-list {
  padding-bottom: clamp(24px, 4vw, 48px);
}

.society-hub-region {
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--jh-gutter) 0;
}

.society-hub-region__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.society-hub-region__head h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.society-hub-region__count {
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-coral);
}

.society-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--jh-line-2);
  border-left: 1px solid var(--jh-line-2);
}

.jh-site .society-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 20px;
  border-right: 1px solid var(--jh-line-2);
  border-bottom: 1px solid var(--jh-line-2);
  background: var(--jh-card);
  color: var(--jh-strong);
  transition: background 150ms;
}

.jh-site .society-card:hover {
  background: rgba(68, 187, 164, 0.08);
  color: var(--jh-strong);
}

.society-card[hidden],
.society-hub-region[hidden] {
  display: none;
}

.society-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 22px;
}

.society-card__logo {
  max-height: 32px;
  width: auto;
  opacity: 0.86;
}

.society-card__mark {
  font-family: var(--jh-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--jh-muted);
}

.society-card__type {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--jh-line-3);
  font-family: var(--jh-mono);
  font-size: 10px;
  line-height: 16px;
  color: var(--jh-dim);
}

.jh-site .society-card__acronym {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--jh-strong);
}

.society-card__name {
  font-size: 12px;
  line-height: 1.5;
  color: var(--jh-muted);
}

.society-card__foot {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--jh-line);
  font-family: var(--jh-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.society-card__foot span:last-child {
  color: var(--jh-coral);
}

.society-filter-empty {
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: 48px var(--jh-gutter) 0;
  font-family: var(--jh-mono);
  font-size: 13px;
  color: var(--jh-dim);
}

@media (max-width: 1100px) {
  .society-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .society-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .society-hub-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .jh-marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 28px 48px;
    padding: 0 var(--jh-gutter);
    animation: none;
  }

  /* The second copy only exists to make the loop seamless. */
  .jh-marquee .jh-marquee-copy {
    display: none;
  }
}

/* Society page --------------------------------------------------------------------- */

.jh-society-hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

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

.jh-society-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px !important;
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

.jh-society-title {
  margin-bottom: 14px !important;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.9;
}

.jh-society-fullname {
  margin-bottom: 24px !important;
  font-family: var(--jh-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--jh-teal);
}

.jh-society-card {
  --cnr: rgba(255, 255, 255, 0.5);
  flex: 0 1 420px;
  min-width: 0;
  background: rgba(10, 15, 14, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jh-society-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--jh-line);
}

.jh-society-card-head img {
  max-height: 32px;
  width: auto;
}

.jh-site .jh-society-card-head h2 {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-society-logo-chip {
  display: inline-flex;
  padding: 6px 10px;
  background: #FFFFFF;
}

.jh-society-logo-chip img {
  max-height: 24px;
}

.jh-society-mark {
  font-family: var(--jh-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--jh-strong);
}

.jh-society-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--jh-line);
}

.jh-society-facts > div:first-child {
  border-top: 0;
}

.jh-society-facts dt {
  font-size: 13px;
  color: var(--jh-dim);
}

.jh-society-facts dd {
  margin: 0;
  text-align: end;
  font-size: 13px;
  color: var(--jh-strong);
}

/* Light theme: logos on the hub are white artwork, so darken them on light cards. */
html[data-theme="light"] :is(.society-card__logo, .jh-marquee img) {
  filter: invert(1);
}

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

.jh-page-hero--compact {
  padding-bottom: clamp(36px, 4vw, 56px);
}

.jh-page-hero--compact .jh-page-title {
  font-size: clamp(40px, 5vw, 72px);
}

.jh-page-hero--compact .jh-page-lede {
  margin-bottom: 0 !important;
}

.jh-hero-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.jh-hero-split > div:first-child {
  flex: 1 1 460px;
  min-width: 0;
}

.jh-toc-card {
  --cnr: rgba(255, 255, 255, 0.5);
  flex: 0 1 380px;
  min-width: 0;
  background: rgba(10, 15, 14, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jh-site .jh-toc-card h2 {
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--jh-line);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-toc-card ol {
  counter-reset: jh-toc;
}

.jh-toc-card li {
  counter-increment: jh-toc;
  border-top: 1px solid var(--jh-line);
}

.jh-toc-card li:first-child {
  border-top: 0;
}

.jh-site .jh-toc-card a {
  display: flex;
  gap: 14px;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--jh-strong);
}

.jh-toc-card a::before {
  content: counter(jh-toc, decimal-leading-zero);
  font-family: var(--jh-mono);
  font-size: 11px;
  line-height: 20px;
  color: var(--jh-coral);
}

.jh-site .jh-toc-card a:hover {
  background: rgba(68, 187, 164, 0.08);
  color: var(--jh-strong);
}

.marketing-section {
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--jh-gutter) 0;
}

.marketing-section-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
  margin-bottom: 32px;
}

.marketing-section-heading h2,
.marketing-section > h2 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.marketing-section-heading p {
  max-width: 420px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--jh-muted);
}

.jh-site .marketing-stack > * + * {
  margin-top: 14px;
}

.jh-site .api-guide-section > h2 {
  margin-top: 8px;
}

.marketing-intro-copy {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--jh-muted);
}

.jh-site .marketing-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jh-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

.jh-site .marketing-text-link:hover {
  color: var(--jh-strong);
}

.marketing-guide-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--jh-line-2);
}

.jh-site .marketing-guide-links a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--jh-line-2);
  font-size: 17px;
  color: var(--jh-strong);
}

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

.marketing-guide-links a span[aria-hidden] {
  color: var(--jh-teal);
}

@media (max-width: 640px) {
  .marketing-guide-links { grid-template-columns: minmax(0, 1fr); }
}

/* Spacing and text helpers the shared templates use. */
.jh-site .mt-4 { margin-top: 24px !important; }
.jh-site .mb-2 { margin-bottom: 8px !important; }
.jh-site .pb-4 { padding-bottom: 24px !important; }
.jh-site .p-0 { padding: 0 !important; }
.jh-site .text-decoration-underline { text-decoration: underline; text-underline-offset: 0.2em; }
.jh-site .link-accent { color: var(--jh-teal); }

/* Support close: the coral closing band, with contact rows and a signup card. Every closing band is coral. */
.marketing-support-close {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(32px, 5vw, 80px);
  max-width: none;
  margin-top: clamp(72px, 8vw, 120px);
  padding: clamp(56px, 7vw, 104px) max(var(--jh-gutter), calc((100% - 1184px) / 2));
  background: var(--jh-coral);
  color: var(--jh-white);
}

.marketing-support-close > div:first-child {
  flex: 1.3 1 420px;
  min-width: 0;
}

.marketing-support-close > div:last-child {
  --cnr: rgba(255, 255, 255, 0.6);
  position: relative;
  flex: 1 1 340px;
  min-width: 0;
  align-self: flex-start;
  padding: 32px;
  background: rgba(10, 15, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--jh-white);
}

.jh-site .marketing-support-close h2 {
  margin: 0 0 16px;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-white);
}

.marketing-support-close > div:first-child > p {
  max-width: 520px;
  margin-bottom: 28px !important;
  font-size: 18px;
  line-height: 1.5;
}

.jh-site .marketing-support-close h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--jh-white);
}

.marketing-support-close > div:last-child p {
  margin-bottom: 24px !important;
  font-size: 15px;
  line-height: 1.55;
  color: #E8E8E8;
}

.jh-site .contact-channels a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid;
  font-size: 17px;
}

.contact-channels strong {
  font-family: var(--jh-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Learn ---------------------------------------------------------------------------- */

.learn-royalty-card {
  display: flex;
  flex-direction: column;
}

.learn-royalty-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid var(--jh-teal);
  font-family: var(--jh-mono);
  font-size: 14px;
  color: var(--jh-teal);
}

/* Small sketches on the royalty cards; decoration only. */
.learn-royalty-art {
  height: 72px;
  margin-top: auto;
  padding-top: 24px;
}

.learn-royalty-art--bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.learn-royalty-art--bars span {
  flex: 1;
  background: rgba(68, 187, 164, 0.45);
}

.learn-royalty-art--bars span:nth-child(1) { height: 30%; }
.learn-royalty-art--bars span:nth-child(2) { height: 42%; }
.learn-royalty-art--bars span:nth-child(3) { height: 36%; }
.learn-royalty-art--bars span:nth-child(4) { height: 55%; }
.learn-royalty-art--bars span:nth-child(5) { height: 48%; }
.learn-royalty-art--bars span:nth-child(6) { height: 64%; }
.learn-royalty-art--bars span:nth-child(7) { height: 58%; }
.learn-royalty-art--bars span:nth-child(8) { height: 74%; }
.learn-royalty-art--bars span:nth-child(9) { height: 82%; }
.learn-royalty-art--bars span:nth-child(10) { height: 100%; background: var(--jh-teal); }

.learn-royalty-art--ring span {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--jh-teal) 0 270deg, var(--jh-coral) 270deg 320deg, var(--jh-line-3) 320deg 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 22px, #000 23px);
  mask-image: radial-gradient(circle, transparent 22px, #000 23px);
}

.learn-royalty-art--tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  align-content: end;
}

.learn-royalty-art--tiles span {
  height: 20px;
  background: var(--jh-line-2);
}

.learn-royalty-art--tiles span:nth-child(1),
.learn-royalty-art--tiles span:nth-child(4),
.learn-royalty-art--tiles span:nth-child(8),
.learn-royalty-art--tiles span:nth-child(11) { background: var(--jh-teal); }
.learn-royalty-art--tiles span:nth-child(6) { background: var(--jh-coral); }

/* Legal pages ---------------------------------------------------------------------- */

.jh-legal-title {
  max-width: 1000px;
  margin-bottom: 20px !important;
  font-size: clamp(40px, 5.4vw, 84px);
}

.legal-date {
  font-family: var(--jh-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--jh-muted);
}

.jh-legal {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  max-width: var(--jh-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--jh-gutter) clamp(72px, 8vw, 120px);
}

.jh-legal-toc[hidden] + .legal-content {
  grid-column: 1 / -1;
}

.jh-legal-toc {
  position: sticky;
  top: calc(84px + var(--staging-banner-height, 0px));
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.jh-site .jh-legal-toc h2 {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-legal-toc li {
  border-left: 1px solid var(--jh-line-2);
}

.jh-site .jh-legal-toc li a {
  display: block;
  padding: 5px 0 5px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--jh-muted);
}

.jh-site .jh-legal-toc li a:hover {
  color: var(--jh-strong);
}

.jh-site .jh-legal-other {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jh-coral);
}

.legal-content {
  max-width: 780px;
  color: var(--jh-muted);
}

.legal-content p,
.legal-content li {
  font-size: 15px;
  line-height: 1.7;
}

.legal-content strong {
  color: var(--jh-strong);
}

.legal-block + .legal-block {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--jh-line);
}

.legal-agreement {
  margin-top: 28px;
}

.legal-paragraph {
  display: flex;
  gap: 10px;
  margin-top: 12px !important;
}

.legal-marker {
  flex-shrink: 0;
  min-width: 1.6em;
  font-family: var(--jh-mono);
  font-size: 12px;
  line-height: 25px;
  color: var(--jh-teal);
}

.legal-level-1 {
  margin-top: 40px !important;
  padding-top: 28px;
  border-top: 1px solid var(--jh-line);
  font-size: 19px !important;
  font-weight: 600;
  line-height: 1.4 !important;
  color: var(--jh-strong);
}

.legal-level-1 .legal-marker {
  font-size: 14px;
  line-height: 27px;
}

.legal-level-2 { padding-left: 28px; }
.legal-level-3 { padding-left: 56px; }
.legal-level-4 { padding-left: 84px; }

.jh-site .legal-heading {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.legal-list {
  margin-top: 12px !important;
}

.jh-site .legal-subheading {
  margin: 32px 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--jh-strong);
}

.legal-content .marketing-table-scroll {
  margin-top: 16px;
}

.legal-list li {
  position: relative;
  padding-left: 20px;
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--jh-coral);
}

.legal-content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The legal pages' anchors land below the fixed nav like the rest of the site. */
.legal-content [id] {
  scroll-margin-top: calc(76px + var(--staging-banner-height, 0px));
}

@media (max-width: 900px) {
  .jh-legal { grid-template-columns: minmax(0, 1fr); }
  .jh-legal-toc { position: static; max-height: none; }
  .legal-level-2 { padding-left: 16px; }
  .legal-level-3 { padding-left: 32px; }
  .legal-level-4 { padding-left: 48px; }
}

/* Infrastructure ------------------------------------------------------------------- */

.infra-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: calc(76px + var(--staging-banner-height, 0px) + clamp(40px, 5vw, 72px)) max(var(--jh-gutter), calc((100% - 1184px) / 2)) clamp(56px, 6vw, 88px);
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(68, 187, 164, 0.38), rgba(68, 187, 164, 0) 65%),
    linear-gradient(170deg, #12443B, #0F2A26 50%, #0A1513);
}

.infra-hero-copy,
.infra-diagram {
  position: relative;
}

.infra-hero-copy {
  flex: 1 1 440px;
  min-width: 0;
  color: var(--jh-text);
}

.infra-kicker {
  margin-bottom: 18px !important;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

.jh-site .infra-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(48px, 6.4vw, 100px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

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

.infra-lede {
  margin-bottom: 12px !important;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--jh-strong);
}

.infra-hero-copy > p:not(.infra-kicker):not(.infra-lede) {
  max-width: 480px;
  margin-bottom: 32px !important;
  font-size: 17px;
  line-height: 1.55;
}

.infra-diagram {
  flex: 0 1 420px;
  min-width: 0;
}

.infra-layer {
  padding: 18px 22px;
  background: rgba(10, 15, 14, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--jh-strong);
}

.infra-layer-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--jh-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.infra-layer strong {
  display: block;
  font-size: 20px;
}

.infra-layer p,
.infra-layer span:not(.infra-layer-label):not(.infra-period) {
  font-size: 13px;
  color: var(--jh-muted);
}

.infra-layer--engine {
  border-color: rgba(68, 187, 164, 0.5);
}

.infra-layer--engine ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px !important;
}

.infra-layer--engine li {
  padding: 4px 10px;
  border: 1px solid var(--jh-line-3);
  font-family: var(--jh-mono);
  font-size: 11px;
  color: var(--jh-text);
}

.infra-layer--network {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.infra-layer--network strong {
  font-size: 36px;
  letter-spacing: -0.04em;
  color: var(--jh-teal);
}

.infra-connector {
  padding: 6px 0;
  text-align: center;
  font-family: var(--jh-mono);
  color: var(--jh-teal);
}

.infra-paths {
  padding-bottom: 0;
}

.infra-section-heading {
  margin-bottom: 24px;
}

.jh-site .infra-section-heading h2,
.jh-site .infra-developer h2,
.jh-site .infra-close h2 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.infra-path {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--jh-line-2);
}

.infra-number {
  font-family: var(--jh-mono);
  font-size: 13px;
  color: var(--jh-coral);
}

.jh-site .infra-path h3 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.infra-path-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.infra-detail {
  margin-top: 10px !important;
  font-family: var(--jh-mono);
  font-size: 12px !important;
  color: var(--jh-dim) !important;
}

.infra-developer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px clamp(32px, 5vw, 80px);
  max-width: var(--jh-max);
  margin: clamp(56px, 7vw, 104px) auto 0;
  padding: 0 var(--jh-gutter);
}

.infra-developer-copy {
  flex: 1 1 380px;
  min-width: 0;
}

.infra-developer-copy > p:not(.infra-kicker) {
  max-width: 480px;
  margin: 20px 0 28px !important;
  font-size: 17px;
  line-height: 1.55;
  color: var(--jh-muted);
}

.infra-code {
  --cnr: rgba(255, 255, 255, 0.5);
  flex: 1 1 460px;
  min-width: 0;
  background: #0F1716;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E8E8E8;
}

.infra-code-heading,
.infra-code-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8B8B8B;
}

.infra-code-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.infra-code-heading span:last-child {
  color: var(--jh-teal);
}

.infra-code-note {
  justify-content: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.infra-code pre {
  margin: 0;
  padding: 20px 18px;
  overflow-x: auto;
  font-family: var(--jh-mono);
  font-size: 13px;
  line-height: 1.7;
}

.infra-code-accent { color: var(--jh-teal); }
.infra-code-string { color: #F4A99C; }

.infra-close {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  max-width: none;
  margin-top: clamp(72px, 8vw, 120px);
  padding: clamp(56px, 7vw, 104px) max(var(--jh-gutter), calc((100% - 1184px) / 2));
  background: var(--jh-coral);
  color: var(--jh-white);
}

.jh-site .infra-close h2 {
  color: var(--jh-white);
}

.infra-close .infra-kicker {
  color: var(--jh-white);
}

.infra-close > div:first-child > p:last-child {
  max-width: 520px;
  margin-top: 16px !important;
  font-size: 18px;
  line-height: 1.5;
}

.infra-close-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.jh-site .infra-close .marketing-text-link {
  color: var(--jh-white);
}

.jh-site .infra-close .marketing-text-link:hover {
  color: var(--jh-ink);
}

@media (max-width: 760px) {
  .infra-path { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* API guide and reference ---------------------------------------------------------- */

.api-guide-section {
  border-top: 1px solid var(--jh-line);
  margin-top: clamp(56px, 7vw, 104px);
}

.jh-page-hero + .api-guide-section {
  margin-top: 0;
  border-top: 0;
}

.api-guide-eyebrow {
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-coral);
}

.api-guide-section h2 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.api-guide-section p,
.api-guide-section li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--jh-muted);
}

.api-guide-section ol {
  padding-left: 1.3em;
  list-style: decimal;
}

.api-guide-section ol li + li {
  margin-top: 6px;
}

.api-guide-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 4vw, 64px);
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--jh-line);
}

.api-guide-row h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--jh-strong);
}

.api-guide-note {
  position: relative;
  align-self: start;
  padding: 24px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.api-guide-caption {
  font-family: var(--jh-mono);
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jh-dim) !important;
}

.api-guide pre,
.jh-api pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: #0F1716;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E8E8E8;
  font-family: var(--jh-mono);
  font-size: 13px;
  line-height: 1.7;
}

.api-guide code,
.legal-content code {
  font-family: var(--jh-mono);
  font-size: 0.92em;
  color: var(--jh-strong);
}

.api-guide pre code {
  color: inherit;
}

.api-reference-frame {
  max-width: var(--jh-max);
  min-height: 60vh;
  margin: 0 auto;
  padding: 0 var(--jh-gutter) clamp(56px, 6vw, 96px);
}

@media (max-width: 900px) {
  .api-guide-row { grid-template-columns: minmax(0, 1fr); }
}

/* Light theme: the code panels and the teal bands keep their colours; text on cards flips with the tokens. */
html[data-theme="light"] :is(.infra-hero, .jh-toc-card) {
  --jh-strong: #FFFFFF;
  --jh-text: #E8E8E8;
  --jh-muted: #B8B8B8;
  --jh-dim: #8B8B8B;
  --jh-line: rgba(255, 255, 255, 0.08);
  --jh-line-2: rgba(255, 255, 255, 0.12);
  --jh-line-3: rgba(255, 255, 255, 0.22);
  --jh-ghost-bg: rgba(10, 15, 14, 0.5);
}


/* Helper classes ------------------------------------------------------------------ */
/* Copied from marketing.css for the templates (and the calculator's script) that build markup
   from them. The variables they read are set here from the new design's values. */
.jh-site {
  --text-color: var(--jh-strong);
  --grid-line: var(--jh-line-2);
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-5xl: 3rem;
  --font-weight-bold: 700;
  --radius-badge: 0;
  --radius-pill: 9999px;
}

.jh-site .badge { display: inline-block; padding: 0.5rem 1.5rem; background-color: rgba(68, 187, 164, 0.15); color: var(--text-color); border-radius: var(--radius-badge); font-size: 0.9rem; font-weight: 500; margin-top: 0.5rem; }
.jh-site .mt-1 { margin-top: var(--spacing-1); }
.jh-site .mt-2 { margin-top: var(--spacing-2); }
.jh-site .mt-3 { margin-top: var(--spacing-3); }
.jh-site .mb-1 { margin-bottom: var(--spacing-1); }
.jh-site .mb-3 { margin-bottom: var(--spacing-3); }
.jh-site .mb-4 { margin-bottom: var(--spacing-4); }
.jh-site .mb-6 { margin-bottom: var(--spacing-6); }
.jh-site .m-0 { margin: 0; }
.jh-site .text-center { text-align: center; }
.jh-site .text-left { text-align: start; }
.jh-site .text-right { text-align: end; }
.jh-site .d-flex { display: flex; }
.jh-site .d-block { display: block; }
.jh-site .flex-grow-1 { flex-grow: 1; }
.jh-site .justify-content-between { justify-content: space-between; }
.jh-site .align-items-center { align-items: center; }
.jh-site .gap-2 { gap: var(--spacing-2); }
.jh-site .gap-3 { gap: var(--spacing-3); }
.jh-site .fs-xs { font-size: var(--font-size-xs); }
.jh-site .fs-sm { font-size: var(--font-size-sm); }
.jh-site .fs-base { font-size: var(--font-size-base); }
.jh-site .fs-lg { font-size: var(--font-size-lg); }
.jh-site .fs-xl { font-size: var(--font-size-xl); }
.jh-site .fs-2xl { font-size: var(--font-size-2xl); }
.jh-site .fs-5xl { font-size: var(--font-size-5xl); }
.jh-site .fw-bold { font-weight: var(--font-weight-bold); }
.jh-site .w-100 { width: 100%; }
.jh-site .p-3 { padding: var(--spacing-3); }
.jh-site .p-4 { padding: var(--spacing-4); }
.jh-site .px-3 { padding-inline-start: var(--spacing-3); padding-inline-end: var(--spacing-3); }
.jh-site .border-top { border-top: 1px solid var(--grid-line); }
.jh-site .cursor-pointer { cursor: pointer; }
.jh-site .border-bottom { border-bottom: 1px solid var(--grid-line); }
.jh-site .d-none { display: none !important; }
.jh-site .align-items-start { align-items: flex-start !important; }
.jh-site .align-items-baseline { align-items: baseline !important; }
.jh-site .text-start { text-align: start !important; }
.jh-site .text-end { text-align: end !important; }
.jh-site .text-uppercase { text-transform: uppercase !important; }
.jh-site .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jh-site .list-unstyled { padding-inline-start: 0; list-style: none; }
.jh-site .border-0 { border: 0 !important; }
.jh-site .bg-transparent { background-color: transparent !important; }
.jh-site .mb-0 { margin-bottom: 0 !important; }
.jh-site .p-2 { padding: 0.5rem !important; }
.jh-site .pt-1 { padding-top: 0.25rem !important; }
.jh-site .pb-2 { padding-bottom: 0.5rem !important; }
.jh-site .py-1 { padding-block: 0.25rem !important; }
.jh-site .py-2 { padding-block: 0.5rem !important; }
.jh-site .px-2 { padding-inline: 0.5rem !important; }
.jh-site .ps-3 { padding-inline-start: 1rem !important; }
.jh-site .badge-pill { border-radius: var(--radius-pill); font-weight: 600; }

.jh-site .text-primary,
.jh-site .text-success { color: var(--jh-teal) !important; }
.jh-site .text-info { color: #7FD6C4 !important; }
.jh-site .text-accent,
.jh-site .text-danger { color: var(--jh-coral) !important; }
.jh-site .text-warning { color: #F2A541 !important; }
.jh-site .text-secondary { color: var(--jh-muted) !important; }
.jh-site .text-tertiary { color: var(--jh-dim) !important; }
.jh-site .fw-semibold { font-weight: 600; }

/* Publishing calculator ------------------------------------------------------------ */

/* Section titles run large; headings inside the two working panels stay small. */
.jh-calc .grid-cell-span-12 > h2.fs-2xl {
  font-size: clamp(32px, 4vw, 56px);
}

.jh-calc #royaltyEstimator > .grid-cell-span-6,
.jh-calc .calculator-workspace > .grid-cell-span-6 {
  position: relative;
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.jh-calc .calculator-workspace > .grid-cell-span-6 > h2,
.jh-calc .calculator-breakdown h3,
.jh-calc .calculator-rule h3 {
  font-family: var(--jh-mono);
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-coral);
}

.jh-calc label,
.jh-calc legend {
  color: var(--jh-strong);
}

.jh-calc input[type="text"],
.jh-calc input[type="number"] {
  border: 1px solid var(--jh-line-3);
  background: var(--jh-bg);
  color: var(--jh-strong);
  font: inherit;
  font-size: 16px;
}

.jh-calc input[type="text"]:focus,
.jh-calc input[type="number"]:focus {
  outline: none;
  border-color: var(--jh-teal);
}

.jh-calc input::placeholder {
  color: var(--jh-faint);
}

.jh-calc input[type="checkbox"],
.jh-calc input[type="radio"] {
  accent-color: var(--jh-teal);
}

.jh-calc input[type="range"] {
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--jh-line-3);
  cursor: pointer;
}

.jh-calc input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--jh-teal);
}

.jh-calc input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--jh-teal);
}

.jh-calc details summary {
  cursor: pointer;
}

.calculator-fieldset {
  margin: 0;
  border: 1px solid var(--jh-line-2);
}

.calculator-fieldset legend {
  font-family: var(--jh-mono);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-calc .form-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.jh-calc .form-check-input {
  flex-shrink: 0;
  margin-top: 4px;
}

.jh-calc .form-check-label {
  cursor: pointer;
  font-size: 14px;
}

/* Deal options read as cards; the chosen one gets the concept's coral outline. */
.deal-type-selector .form-check {
  padding: 14px 16px;
  border: 1px solid var(--jh-line-2);
  transition: border-color 150ms, background 150ms;
}

.deal-type-selector .form-check:hover {
  border-color: var(--jh-line-4);
}

.deal-type-selector .form-check:has(input:checked) {
  border-color: var(--jh-coral);
  background: rgba(233, 79, 55, 0.08);
}

.calculator-rule {
  margin-top: 32px !important;
  padding-top: 28px;
}

.calculator-results {
  margin-bottom: 20px;
  padding: 28px;
  background: var(--jh-teal);
  color: var(--jh-ink);
}

.calculator-results p {
  font-family: var(--jh-mono);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-ink) !important;
}

.jh-site .calculator-results #totalEarnings {
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--jh-ink);
}

.calculator-breakdown {
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid var(--jh-line-2);
}

.calculator-breakdown-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--jh-line);
}

.calculator-breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--jh-strong);
}

.calculator-progress-bar {
  width: 100%;
  height: 4px;
  margin-top: 10px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--jh-line-2);
}

.calculator-progress-bar::-webkit-progress-bar { background: var(--jh-line-2); }
.calculator-progress-bar::-webkit-progress-value { background: var(--jh-teal); }
.calculator-progress-bar::-moz-progress-bar { background: var(--jh-teal); }
.calculator-progress-performance::-webkit-progress-value { background: #7FD6C4; }
.calculator-progress-performance::-moz-progress-bar { background: #7FD6C4; }

.deal-explanation-panel,
.advance-results {
  border: 1px solid var(--jh-line-2);
  background: var(--jh-bg);
}

.deal-explanation-panel h4 {
  font-family: var(--jh-mono);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.deal-explanation-body {
  line-height: 1.6;
}

.advance-results {
  margin-top: 16px;
}

/* Artist search ------------------------------------------------------------------- */

#artistSearchResults:not(:empty) {
  border: 1px solid var(--jh-line-2);
  background: var(--jh-bg);
}

.jh-site .artist-result {
  color: var(--jh-strong);
  cursor: pointer;
  font: inherit;
}

.jh-site .artist-result:hover,
.jh-site .artist-result.is-active {
  background: rgba(68, 187, 164, 0.12) !important;
}

.artist-result-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: cover;
}

.artist-result-thumb-empty {
  background: var(--jh-line-2);
}

.calculator-estimator-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
}

.spinner-border {
  width: 28px;
  height: 28px;
  border: 2px solid var(--jh-teal);
  border-top-color: transparent;
  border-radius: 50%;
  animation: jh-spin 1s linear infinite;
}

.jh-calc .badge {
  margin-top: 0;
  padding: 4px 10px;
  border: 1px solid var(--jh-line-3);
  border-radius: 0;
  background: transparent;
  font-family: var(--jh-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calculator-leakage {
  border-left: 2px solid var(--jh-coral);
  background: rgba(233, 79, 55, 0.08);
  color: var(--jh-strong);
}

#estimateOwnershipTable th,
#estimateOwnershipTable td {
  font-size: 13px;
  color: var(--jh-muted);
}

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

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--jh-line-2);
  background: var(--jh-card);
  box-shadow: var(--jh-card-shadow);
}

.table-scroll table {
  min-width: 640px;
  border-collapse: collapse;
}

.table-scroll td,
.table-scroll th {
  font-size: 14px;
  color: var(--jh-text);
}

.table-scroll thead tr {
  border-bottom: 1px solid var(--jh-line-2);
}

.table-scroll thead th {
  font-family: var(--jh-mono);
  font-size: 11px;
  font-weight: 400 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.row-highlight-pro {
  background: rgba(68, 187, 164, 0.08);
}

.row-highlight-standard {
  background: rgba(233, 79, 55, 0.07);
}

.jh-calc .table-scroll + small,
.jh-calc .table-scroll small {
  font-size: 12px;
}

/* Closing band: coral, like the other pages' closing call to action. */
.conversion-section {
  display: block;
  max-width: none;
  margin-top: clamp(72px, 8vw, 120px);
  padding: clamp(72px, 9vw, 136px) max(var(--jh-gutter), calc((100% - 1184px) / 2));
  background: var(--jh-coral);
  color: var(--jh-white);
}

.jh-site .conversion-content h2 {
  margin: 0;
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--jh-white);
}

.jh-site .conversion-content p {
  max-width: 560px;
  margin: 24px 0 32px !important;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--jh-white);
}

.conversion-section + .grid-section {
  padding-bottom: clamp(72px, 8vw, 120px);
}

/* The deal explainers after the band read as cards, as in the concept. */
.conversion-section + .grid-section > .grid-cell-span-6 {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

@media (max-width: 900px) {
  .jh-calc #royaltyEstimator > .grid-cell-span-6,
  .jh-calc .calculator-workspace > .grid-cell-span-6 {
    grid-column: span 12;
  }
}

/* Plain pages ------------------------------------------------------------------------ */
/* Pages without a designed hero (about, contact, blog, help, forms and messages) get a teal band
   behind the top of the page and large display headings. marketing-home.js adds the texture. */

.jh-plain .jh-main {
  position: relative;
  padding-top: calc(60px + var(--staging-banner-height, 0px));
}

.jh-plain .jh-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(560px, 70vh);
  pointer-events: none;
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(68, 187, 164, 0.32), rgba(68, 187, 164, 0) 65%),
    linear-gradient(180deg, #12443B, #0F2A26 45%, var(--jh-bg));
}

.jh-plain-ledger {
  height: min(560px, 70vh);
  bottom: auto;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

.jh-plain .jh-main > :not(.jh-plain-ledger) {
  position: relative;
}

/* The first section sits closer to the nav than sections further down. Without JavaScript it is
   the first child; with it, the injected texture comes first. */
.jh-plain .jh-main > :first-child,
.jh-plain .jh-main > .jh-plain-ledger + * {
  padding-top: clamp(40px, 5vw, 72px);
}

.jh-site.jh-plain .jh-main h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

/* In the light theme the band turns pale teal and the headings on it turn dark with the tokens. */
html[data-theme="light"] .jh-plain .jh-main::before {
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(68, 187, 164, 0.28), rgba(68, 187, 164, 0) 65%),
    linear-gradient(180deg, #DCEFEA, var(--jh-bg));
}

.jh-site .marketing-stack--intro > h1 + p,
.jh-site .marketing-page-intro-description,
.jh-site .marketing-intro-copy {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--jh-text);
}

.jh-site .marketing-stack--intro > * + * {
  margin-top: 20px;
}

/* Page intro partial (students and others). */
.marketing-page-intro {
  padding-bottom: clamp(24px, 3vw, 48px);
}

.marketing-page-intro--center {
  text-align: center;
}

.marketing-page-intro--center .marketing-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marketing-page-intro-accent {
  color: var(--jh-teal);
}

.marketing-page-intro .marketing-actions {
  margin-top: 28px;
}

/* Contact rows on dark pages; the support band overrides them for teal below. */
.contact-channels {
  max-width: 560px;
  border-top: 1px solid var(--jh-line-2);
}

.jh-site .contact-channels a {
  border-bottom-color: var(--jh-line-2);
  color: var(--jh-strong);
}

.jh-site .contact-channels a:hover {
  color: var(--jh-teal);
}

.marketing-support-close .contact-channels {
  border-top-color: rgba(255, 255, 255, 0.35);
}

.jh-site .marketing-support-close .contact-channels a {
  border-bottom-color: rgba(255, 255, 255, 0.35);
  color: var(--jh-white);
}

.jh-site .marketing-support-close .contact-channels a:hover {
  color: var(--jh-ink);
}

/* Two-column editorial sections (contact). */
.marketing-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px clamp(32px, 5vw, 80px);
}

.marketing-editorial p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.marketing-editorial > div > * + * {
  margin-top: 18px !important;
}

.marketing-editorial h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.marketing-editorial.marketing-surface > div {
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

@media (max-width: 760px) {
  .marketing-editorial { grid-template-columns: minmax(0, 1fr); }
}

/* Message pages (confirmations, email preferences, guides) ------------------------- */

.grid-cell-span-8 { grid-column: span 8; }

.grid-cell-center {
  grid-column: 3 / span 8;
}

.marketing-message {
  --cnr: rgba(255, 255, 255, 0.5);
  position: relative;
  margin-bottom: clamp(56px, 7vw, 104px);
  padding: clamp(28px, 4vw, 56px);
  background: rgba(10, 15, 14, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] .marketing-message {
  background: var(--jh-card);
  border-color: var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.jh-site.jh-message .jh-main h1 {
  font-size: clamp(36px, 4.4vw, 64px);
}

@media (max-width: 900px) {
  .grid-cell-span-8,
  .grid-cell-center { grid-column: span 12; }
}

/* Forms ------------------------------------------------------------------------------ */

.marketing-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.marketing-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jh-site .form-field-label,
.jh-site .marketing-form label:not(.email-list-choice) {
  font-size: 14px;
  font-weight: 600;
  color: var(--jh-strong);
}

.jh-site .marketing-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.jh-site .marketing-form select,
.jh-site .marketing-form textarea,
.jh-site .newsletter-signup input:not([type="hidden"]),
.jh-site .help-search-form input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--jh-line-3);
  background: var(--jh-bg);
  color: var(--jh-strong);
  font: inherit;
  font-size: 16px;
}

.jh-site .marketing-form textarea {
  min-height: 120px;
}

.jh-site .marketing-form :is(input, select, textarea):focus,
.jh-site .newsletter-signup input:focus,
.jh-site .help-search-form input:focus {
  outline: none;
  border-color: var(--jh-teal);
}

.jh-site .marketing-form ::placeholder,
.jh-site .newsletter-signup ::placeholder,
.jh-site .help-search-form ::placeholder {
  color: var(--jh-faint);
}

.jh-site .marketing-form input[type="checkbox"],
.jh-site .marketing-form input[type="radio"] {
  accent-color: var(--jh-teal);
}

.form-field-error,
.marketing-form .errorlist {
  font-size: 13px;
  color: var(--jh-coral) !important;
}

.form-fine-print,
.newsletter-fine-print {
  font-size: 12px;
  color: var(--jh-dim);
}

.email-list-option {
  padding: 14px 16px;
  border: 1px solid var(--jh-line-2);
}

.email-list-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  color: var(--jh-strong);
}

.email-list-description {
  font-size: 14px;
  color: var(--jh-muted);
}

.jh-site .marketing-form .marketing-button {
  align-self: flex-start;
}

/* Reading pages: blog and help centre ---------------------------------------------- */

.marketing-reading-page {
  max-width: 880px;
  padding-bottom: clamp(72px, 8vw, 120px);
}

.marketing-resource-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px !important;
}

.marketing-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px !important;
}

.marketing-resource-card {
  position: relative;
  padding: 22px 24px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
  transition: border-color 150ms;
}

.marketing-resource-card:hover {
  border-color: rgba(68, 187, 164, 0.5);
}

.jh-site .marketing-resource-card h2,
.jh-site .marketing-resource-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: -0.01em;
}

.jh-site .marketing-resource-card a {
  color: var(--jh-strong);
}

.jh-site .marketing-resource-card a:hover {
  color: var(--jh-teal);
}

.marketing-resource-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--jh-muted);
}

.help-article-count,
.help-category-description {
  font-size: 13px;
  color: var(--jh-dim);
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.blog-meta i {
  margin-right: 4px;
}

.help-breadcrumb {
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jh-dim);
}

.jh-site .help-breadcrumb a {
  color: var(--jh-teal);
}

.breadcrumb-separator {
  color: var(--jh-faint);
}

.help-search-form {
  flex-wrap: nowrap;
  max-width: 640px;
}

.jh-site .help-search-form input {
  flex: 1;
}

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

.marketing-help-content {
  margin-top: clamp(32px, 4vw, 56px) !important;
}

/* Long-form body text from the blog and help articles. */
:is(.blog-body, .help-article-body) {
  font-size: 17px;
  line-height: 1.7;
  color: var(--jh-text);
}

:is(.blog-body, .help-article-body) > * + * {
  margin-top: 18px !important;
}

.jh-site :is(.blog-body, .help-article-body) :is(h2, h3, h4) {
  margin-top: 36px !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--jh-strong);
}

.jh-site :is(.blog-body, .help-article-body) h2 { font-size: 28px; text-transform: uppercase; }
.jh-site :is(.blog-body, .help-article-body) h3 { font-size: 22px; }
.jh-site :is(.blog-body, .help-article-body) h4 { font-size: 18px; }

.jh-site :is(.blog-body, .help-article-body) :is(ul, ol) {
  padding-left: 1.4em;
  list-style: disc;
}

.jh-site :is(.blog-body, .help-article-body) ol {
  list-style: decimal;
}

.jh-site :is(.blog-body, .help-article-body) li + li {
  margin-top: 6px;
}

.jh-site :is(.blog-body, .help-article-body) a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:is(.blog-body, .help-article-body) img {
  max-width: 100%;
  height: auto;
}

:is(.blog-body, .help-article-body) blockquote {
  margin: 24px 0;
  padding-left: 20px;
  border-left: 2px solid var(--jh-coral);
  color: var(--jh-strong);
}

:is(.blog-body, .help-article-body) code {
  font-family: var(--jh-mono);
  font-size: 0.9em;
  color: var(--jh-strong);
}

:is(.blog-body, .help-article-body) pre {
  overflow-x: auto;
  padding: 16px 18px;
  background: #0F1716;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E8E8E8;
}

:is(.blog-body, .help-article-body) table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

:is(.blog-body, .help-article-body) :is(th, td) {
  padding: 10px 12px;
  border-top: 1px solid var(--jh-line-2);
  text-align: start;
}

/* Newsletter box (blog posts). */
.newsletter-signup {
  position: relative;
  margin: 40px 0 !important;
  padding: 28px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.jh-site .newsletter-signup h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.newsletter-signup > p {
  font-size: 15px;
  color: var(--jh-muted);
}

.newsletter-signup .form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  margin: 18px 0 10px;
}

@media (max-width: 640px) {
  .newsletter-signup .form-group { grid-template-columns: minmax(0, 1fr); }
}

/* About ------------------------------------------------------------------------------ */

.about-kicker {
  margin-bottom: 18px !important;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

.about-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px clamp(32px, 5vw, 80px);
}

.jh-site.jh-about .about-intro h1 span {
  color: var(--jh-teal);
}

.about-intro-copy p,
.about-principle-copy p,
.about-work-intro > p:not(.about-kicker),
.about-fees p,
.about-people > div > p:not(.about-kicker),
.about-details p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.about-intro-copy > * + *,
.about-principle-copy > * + *,
.about-work-intro > * + *,
.about-fees > div > * + * {
  margin-top: 16px !important;
}

.about-page section h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

/* "marketing-on-dark" sections are a dark band in both themes. */
.about-principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px clamp(32px, 5vw, 80px);
  max-width: none;
  margin-top: clamp(56px, 7vw, 104px);
  padding: clamp(56px, 7vw, 104px) max(var(--jh-gutter), calc((100% - var(--jh-max)) / 2 + var(--jh-gutter)));
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(68, 187, 164, 0.2), rgba(68, 187, 164, 0) 60%),
    #0F1716;
}

html[data-theme="light"] .about-principle {
  --jh-strong: #FFFFFF;
  --jh-muted: #B8B8B8;
}

.about-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 32px clamp(32px, 5vw, 80px);
}

.about-work-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--jh-line-2);
}

.about-work-number {
  font-family: var(--jh-mono);
  font-size: 13px;
  color: var(--jh-coral);
}

.jh-site .about-work-list h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--jh-strong);
}

.about-work-list p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.about-fees,
.about-people,
.about-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px clamp(32px, 5vw, 80px);
}

.about-fees > div,
.about-people-contact {
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.about-licensing {
  margin-top: 18px !important;
  font-size: 14px;
  color: var(--jh-muted);
}

.about-details {
  padding-bottom: clamp(72px, 8vw, 120px);
}

.about-details nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--jh-line-2);
}

.jh-site .about-details nav a {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--jh-line-2);
  color: var(--jh-strong);
}

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

@media (max-width: 860px) {
  .about-intro-grid,
  .about-principle,
  .about-work,
  .about-fees,
  .about-people,
  .about-details { grid-template-columns: minmax(0, 1fr); }
}

/* Students ---------------------------------------------------------------------------- */

.list-none {
  list-style: none;
  padding-left: 0;
}

.student-list li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--jh-line);
  font-size: 17px;
  color: var(--jh-text);
}

.student-list li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 5px;
  border: 1px solid var(--jh-teal);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.4 2.4L12 5.2' fill='none' stroke='%2344BBA4' stroke-width='1.6'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.student-copy {
  font-size: 17px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.student-faq-cta-cell {
  padding: clamp(28px, 4vw, 56px) 0;
}

.marketing-actions--center {
  justify-content: center;
}

/* Radio ------------------------------------------------------------------------------ */

.radio-player-container {
  grid-column: 2 / span 10;
  padding: clamp(24px, 3vw, 40px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.radio-now-playing {
  margin-bottom: 24px;
  text-align: center;
}

.jh-site .radio-song-title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--jh-strong);
}

.radio-song-artist {
  margin-top: 8px !important;
  font-family: var(--jh-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

.radio-progress-container {
  cursor: pointer;
}

.radio-progress-bar {
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--jh-line-2);
}

.radio-progress-bar::-webkit-progress-bar { background: var(--jh-line-2); }
.radio-progress-bar::-webkit-progress-value { background: var(--jh-teal); }
.radio-progress-bar::-moz-progress-bar { background: var(--jh-teal); }

.radio-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 24px 0;
}

.radio-volume-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--jh-muted);
}

.radio-volume-slider,
.radio-volume-control input[type="range"] {
  accent-color: var(--jh-teal);
}

.radio-playlist {
  margin-top: 32px !important;
  border-top: 1px solid var(--jh-line-2);
}

.radio-playlist-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--jh-line);
  cursor: pointer;
  color: var(--jh-text);
}

.radio-playlist-item:hover,
.radio-playlist-item.active {
  background: rgba(68, 187, 164, 0.1);
}

.radio-playlist-item.active .radio-playlist-item-title {
  color: var(--jh-teal);
}

.radio-playlist-item-meta,
.radio-playlist-item-duration {
  font-size: 13px;
  color: var(--jh-dim);
}

.empty-state {
  padding: 40px 0;
  text-align: center;
  color: var(--jh-muted);
}

.empty-state-icon {
  font-size: 40px;
  color: var(--jh-teal);
}

/* Affiliate and referral pages ------------------------------------------------------ */

.section-below-header {
  padding-top: clamp(48px, 6vw, 88px);
}

.affiliate-callout {
  margin: 28px 0 !important;
  padding: 24px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  border-left: 2px solid var(--jh-teal);
  box-shadow: var(--jh-card-shadow);
}

.affiliate-screenshot {
  width: 100%;
  height: auto;
  border: 1px solid var(--jh-line-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.affiliate-steps {
  padding-left: 1.3em;
  list-style: decimal;
}

.affiliate-steps.list-none {
  padding-left: 0;
  list-style: none;
}

.affiliate-steps li {
  padding: 8px 0;
  font-size: 16px;
  color: var(--jh-text);
}

.affiliate-measure,
.affiliate-success-copy {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--jh-text);
}

/* Affiliate application: intro on the left, the form in a card on the right. */
.jh-apply {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-bottom: clamp(72px, 8vw, 120px);
}

.jh-apply-intro {
  position: sticky;
  top: calc(96px + var(--staging-banner-height, 0px));
}

.jh-apply-intro .affiliate-measure {
  margin-top: 20px !important;
}

.jh-site .jh-apply-kicker {
  margin: 36px 0 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-muted);
}

.jh-apply-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: apply-step;
  border-top: 1px solid var(--jh-line-2);
}

.jh-apply-steps li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--jh-line-2);
  font-size: 16px;
  color: var(--jh-text);
  counter-increment: apply-step;
}

.jh-apply-steps li::before {
  content: counter(apply-step, decimal-leading-zero);
  font-family: var(--jh-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--jh-teal);
}

.jh-apply-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jh-apply-tags li {
  padding: 6px 12px;
  border: 1px solid var(--jh-line-3);
  font-size: 14px;
  color: var(--jh-text);
}

.jh-apply-form {
  gap: 0;
  padding: clamp(24px, 3vw, 40px);
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  box-shadow: var(--jh-card-shadow);
}

.jh-apply-form fieldset {
  margin: 0;
  padding: 0 0 28px;
  border: 0;
}

.jh-apply-form fieldset + fieldset {
  padding-top: 28px;
  border-top: 1px solid var(--jh-line-2);
}

/* A floated legend leaves the fieldset border alone instead of sitting on it. */
.jh-apply-form legend {
  float: left;
  width: 100%;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jh-teal);
}

.jh-apply-grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.jh-apply-wide {
  grid-column: 1 / -1;
}

.jh-site .jh-apply-form label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.jh-apply-optional {
  font-family: var(--jh-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jh-faint);
}

.jh-apply-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--jh-muted);
}

.jh-site .marketing-form-field.has-error :is(input, select, textarea) {
  border-color: var(--jh-coral);
}

.jh-apply-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 28px;
  border-top: 1px solid var(--jh-line-2);
}

@media (max-width: 900px) {
  .jh-apply { grid-template-columns: minmax(0, 1fr); }
  .jh-apply-intro { position: static; }
}

@media (max-width: 560px) {
  .jh-apply-grid { grid-template-columns: minmax(0, 1fr); }
}

.affiliate-email-sample {
  padding: 20px 24px;
  background: var(--jh-card);
  border: 1px solid var(--jh-line-2);
  font-family: var(--jh-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--jh-text);
}

.spaced-top-md { margin-top: 32px !important; }
.spaced-top-lg { margin-top: 48px !important; }
.spaced-bottom-md { margin-bottom: 32px !important; }

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