/* ==========================================================================
   Homepage - from the "CrickHunt Homepage" design (hero: Ecosystem wall,
   display font: Teko, footer: Stadium).

   Everything is scoped under .ch-hm so the header and every other page keep
   the styling they already have. The canvas computes its layout in JS at
   mob < 760 and tab < 1100; those are the two breakpoints used throughout.
   ========================================================================== */

.ch-hm {
  --hm-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --hm-display: "Teko", "Nunito Sans", sans-serif;

  --hm-navy: #081226;
  --hm-navy-2: #0b1733;
  --hm-card: #0e1b36;
  --hm-ink: #0f172a;
  --hm-body-c: #475569;
  --hm-muted: #64748b;
  --hm-line: #e2e8f0;
  --hm-line-soft: #eef2f7;
  --hm-page: #f0f3f8;

  --hm-amber: #fbbf24;
  --hm-amber-d: #d97706;
  --hm-blue: #2557a7;
  --hm-blue-l: #60a5fa;
  --hm-green: #16a34a;
  --hm-green-l: #34d399;
  --hm-purple: #7c3aed;
  --hm-purple-l: #c4b5fd;
  --hm-teal: #0d9488;
  --hm-teal-l: #2dd4bf;
  --hm-orange: #ea580c;
  --hm-red: #dc2626;

  background: var(--hm-page);
  font-family: var(--hm-body);
  color: #1e293b;
}

/* the theme gives every section 60px of vertical padding and justifies topic
   copy - the design sets its own, so clear the inherited rules first */
.ch-hm section {
  padding: 0;
  margin: 0;
}

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

.ch-hm p,
.ch-hm li,
.ch-hm span,
.ch-hm div {
  text-align: left;
}

.ch-hm img {
  max-width: 100%;
}

.ch-hm button,
.ch-hm input,
.ch-hm select {
  font-family: inherit;
}

.ch-hm a {
  text-decoration: none;
}

.ch-hm a:hover,
.ch-hm a:focus {
  text-decoration: none;
}

.ch-hm :focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

/* the theme underlines every focused button, which leaves a stray underline on
   the tab rails and steppers after a click. The ring above is the affordance. */
.ch-hm button:focus,
.ch-hm button:focus-visible {
  text-decoration: none;
}

/* ---------- shared shell ---------- */

.hm-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* scoped with .ch-hm so it outweighs the `.ch-hm section { padding: 0 }` reset
   above, which clears the theme's own 60px and would otherwise win on specificity */
.ch-hm .hm-sec {
  padding-top: clamp(56px, 6.5vw, 88px);
  padding-bottom: clamp(56px, 6.5vw, 88px);
}

.hm-sec--light {
  background: #fff;
}

.hm-sec--tint {
  background: #f7f9fc;
}

.hm-sec--dark {
  background: var(--hm-navy-2);
  color: #fff;
}

/* section heads */
.hm-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(26px, 3vw, 40px);
  max-width: 760px;
}

.hm-head--center {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}

.hm-head--center p {
  text-align: center;
}

.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-blue);
}

.hm-head--center .hm-eyebrow {
  align-self: center;
}

.ch-hm .hm-h2 {
  margin: 0;
  font-family: var(--hm-display);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--hm-ink);
  text-wrap: balance;
}

/* every section that paints on a dark ground takes the light heading */
.hm-sec--dark .hm-h2,
.hm-auction .hm-h2,
.hm-pros .hm-h2,
.hm-liveSec .hm-h2,
.hm-connect .hm-h2,
.hm-price .hm-h2,
.hm-dl .hm-h2 {
  color: #fff;
}

.ch-hm .hm-lead {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--hm-body-c);
  text-wrap: pretty;
}

.hm-sec--dark .hm-lead {
  color: #c7d4ea;
}

/* buttons */
.ch-hm .hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s, color .2s;
}

.ch-hm .hm-btn--amber {
  background: var(--hm-amber);
  color: var(--hm-navy-2);
}

.ch-hm .hm-btn--amber:hover,
.ch-hm .hm-btn--amber:focus {
  background: #f59e0b;
  color: var(--hm-navy-2);
  transform: translateY(-1px);
}

.ch-hm .hm-btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, .28);
  color: #fff;
  background: transparent;
  padding: 0 22px;
  font-weight: 800;
}

.ch-hm .hm-btn--ghost:hover,
.ch-hm .hm-btn--ghost:focus {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.ch-hm .hm-btn--blue {
  background: var(--hm-blue);
  color: #fff;
}

.ch-hm .hm-btn--blue:hover,
.ch-hm .hm-btn--blue:focus {
  background: #173d7a;
  color: #fff;
  transform: translateY(-1px);
}

.ch-hm .hm-btn--line {
  border: 1.5px solid var(--hm-line);
  background: #fff;
  color: var(--hm-ink);
}

.ch-hm .hm-btn--line:hover,
.ch-hm .hm-btn--line:focus {
  border-color: var(--hm-ink);
  color: var(--hm-ink);
}

/* The demos swap these values on a timer, and the longer ones take a second
   line on a narrow card. Holding both lines open means a value changing can no
   longer resize the card - which otherwise moves every section below it. */
.hm-twoline {
  min-height: 2lh;
}

/* ==========================================================================
   01 Hero - "Ecosystem wall"
   ========================================================================== */

.hm-hero {
  position: relative;
  background: var(--hm-navy);
  color: #fff;
  overflow: hidden;
}

.hm-hero__glow,
.hm-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hm-hero__glow {
  background:
    radial-gradient(900px 480px at 6% -14%, rgba(47, 111, 208, .42), transparent 62%),
    radial-gradient(620px 340px at 102% -6%, rgba(251, 191, 36, .11), transparent 60%);
}

.hm-hero__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.hm-hero__inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(36px, 5.5vw, 76px) 20px clamp(44px, 6vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.hm-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.ch-hm .hm-hero__title {
  margin: 0;
  font-family: var(--hm-display);
  /* the ceiling is what sets the line break: above it "CRICKET. ONE" no longer
     fits the 5fr column and the headline runs to five lines */
  font-size: clamp(54px, 7.4vw, 96px);
  line-height: .9;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}

.ch-hm .hm-hero__title em {
  font-style: normal;
  color: var(--hm-amber);
}

.ch-hm .hm-hero__lead {
  margin: 0;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  color: #c7d4ea;
  max-width: 540px;
  text-wrap: pretty;
}

.hm-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hm-hero__jump {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.hm-hero__jump > span {
  font-size: 13px;
  font-weight: 800;
  color: #8aa0c4;
}

.hm-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ch-hm .hm-chip-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 800;
  transition: background .2s, color .2s;
}

.ch-hm .hm-chip-dark:hover,
.ch-hm .hm-chip-dark:focus {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* ---------- the preview wall ---------- */

.hm-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.hm-wall__card {
  background: var(--hm-card);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  scroll-snap-align: start;
}

.hm-wall__card--auction {
  grid-area: a;
  padding: 16px 18px;
  gap: 14px;
}

.hm-wall__card--match { grid-area: b; gap: 8px; }
.hm-wall__card--book  { grid-area: c; }
.hm-wall__card--tour  { grid-area: d; gap: 8px; }
.hm-wall__card--player { grid-area: e; }
.hm-wall__card--pro   { grid-area: f; }
.hm-wall__card--biz   { grid-area: g; }
.hm-wall__card--exp   { grid-area: h; }

.hm-wall {
  grid-template-areas:
    "a a a a b b"
    "a a a a c c"
    "d d e e f f"
    "g g g h h h";
}

.hm-wall__kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8aa0c4;
}

/* the live mark is a capsule, so it reads the same wherever it sits and does not depend on
   the kicker above it for its weight and tracking */
.hm-live {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 9px;
  border: 1px solid rgba(239, 68, 68, .45);
  border-radius: 999px;
  background: rgba(239, 68, 68, .16);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fca5a5;
}

@media (prefers-reduced-motion: reduce) {
  .ch-hm *,
  .ch-hm *::before,
  .ch-hm *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* auction card */
.hm-auc {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 150px;
}

.hm-auc__shirt {
  width: 112px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(165deg, #24467f, #0b1733 75%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hm-auc__no {
  position: absolute;
  top: 4px;
  right: 8px;
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .25);
}

.hm-auc__ini {
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 44px;
  color: #fff;
  margin-bottom: 12px;
}

.hm-auc__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hm-auc__name { font-size: 19px; font-weight: 900; line-height: 1.15; }
.hm-auc__role { font-size: 13px; color: #9fb2d3; font-weight: 700; }
.hm-auc__base { font-size: 12px; color: #8aa0c4; font-weight: 700; }

.hm-auc__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.hm-auc__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #8aa0c4;
  margin-bottom: 6px;
}

.hm-auc__bid {
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: clamp(40px, 4vw, 54px);
  line-height: 1;
  color: var(--hm-amber);
}

.hm-auc__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.hm-auc__status {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(220, 38, 38, .16);
  color: #fca5a5;
}

.hm-auc__lead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
}

.hm-auc__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* match card */
.hm-m__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hm-m__runs {
  font-family: var(--hm-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.hm-m__ov { font-size: 13px; color: #9fb2d3; font-weight: 700; }
.hm-m__need { font-size: 13px; font-weight: 800; color: var(--hm-amber); }

.hm-m__balls {
  display: flex;
  gap: 5px;
  margin-top: auto;
}

.hm-m__ball {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* booking card */
.hm-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.hm-slot {
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 8px;
}

.hm-slot--gone {
  background: rgba(255, 255, 255, .04);
  color: var(--hm-muted);
  text-decoration: line-through;
}

.hm-slot--open {
  background: var(--hm-teal);
  color: #fff;
}

.hm-slot--free {
  border: 1px solid rgba(94, 234, 212, .4);
  color: #ccfbf1;
}

/* tournament card */
.hm-t__name { font-size: 16px; font-weight: 900; }

.hm-t__tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(245, 158, 11, .16);
  color: #fcd34d;
}

.hm-t__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  color: #9fb2d3;
}

.hm-t__bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}

.hm-t__bar > span {
  display: block;
  width: 75%;
  height: 100%;
  border-radius: 99px;
  background: #f59e0b;
}

/* player / pro / business cards */
.hm-idrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hm-idrow__av {
  width: 38px;
  height: 38px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
  color: #fff;
}

.hm-idrow__av--sq { border-radius: 10px; }
.hm-idrow__av--biz { border-radius: 8px; background: #fff; color: var(--hm-blue); font-size: 18px; font-weight: 800; }

.hm-idrow__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 900;
}

.hm-idrow__sub { font-size: 12px; color: #9fb2d3; }

.hm-ministats {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.hm-ministats > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hm-ministats b {
  font-family: var(--hm-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.hm-ministats i {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  color: #8aa0c4;
}

.hm-avail {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #86efac;
}

.hm-avail__dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #22c55e;
}

.hm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hm-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  color: #cbd5e1;
}

/* explorer card */
.hm-exp__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
}

.hm-exp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hm-exp__stack { display: flex; }

.hm-exp__stack span {
  width: 26px;
  height: 26px;
  border-radius: 99px;
  border: 2px solid var(--hm-card);
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hm-exp__stack span + span { margin-left: -8px; }

.hm-exp__n { font-size: 12px; font-weight: 800; color: #86efac; }

/* ---------- hero responsive ---------- */

@media all and (max-width: 1099px) {
  .hm-hero__inner {
    grid-template-columns: 1fr;
  }
}

@media all and (max-width: 759px) {
  .hm-wall {
    grid-template-areas: none;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  .hm-wall__card--auction,
  .hm-wall__card--match,
  .hm-wall__card--book,
  .hm-wall__card--tour,
  .hm-wall__card--player,
  .hm-wall__card--pro,
  .hm-wall__card--biz,
  .hm-wall__card--exp {
    grid-area: auto;
  }

  .hm-auc__shirt { width: 92px; }

  .ch-hm .hm-btn { width: 100%; }

  .hm-hero__ctas > .hm-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   02 Trust
   ========================================================================== */

.hm-trust {
  background: #f4f6fa;
  border-bottom: 1px solid #e6ebf2;
}

.hm-trust__wrap {
  padding-top: clamp(28px, 3.4vw, 44px);
  padding-bottom: clamp(28px, 3.4vw, 44px);
}

.hm-trust__grid {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}

.hm-trust__cell {
  flex: 1 1 260px;
  min-width: 0;
  background: #fff;
  padding: 20px 22px;
  margin: 0 -1px -1px 0;
  border-right: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background .2s;
}

.hm-trust__cell:hover { background: #fbfcfe; }

.hm-trust__ico {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hm-trust__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hm-trust__text b {
  font-family: var(--hm-display);
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #0b1428;
}

.hm-trust__text i {
  font-style: normal;
}

.hm-trust__text > span {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-body-c);
}

/* ==========================================================================
   03 Ecosystem
   ========================================================================== */

.hm-eco {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.hm-eco__tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}

.ch-hm .hm-eco__tab {
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  flex-shrink: 0;
  transition: background .25s, border-color .25s, box-shadow .25s;
}

.ch-hm .hm-eco__tab.is-on {
  background: #fff;
  border-color: var(--hm-line);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.hm-eco__num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 99px;
  background: #e8edf5;
  color: var(--hm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hm-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding-top: 3px;
  transition: background .25s, color .25s;
}

.hm-eco__tab.is-on .hm-eco__num {
  background: var(--hm-eco-acc);
  color: #fff;
}

.hm-eco__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hm-eco__label b { font-size: 19px; font-weight: 900; color: var(--hm-ink); }
.hm-eco__label i { font-style: normal; font-size: 14px; color: var(--hm-muted); font-weight: 600; }

.hm-eco__panel {
  border-radius: 20px;
  padding: clamp(20px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: center;
}

.hm-eco__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hm-eco__kicker {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-eco-acc);
}

.ch-hm .hm-eco__head {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  font-weight: 900;
  color: var(--hm-ink);
  text-wrap: balance;
}

.ch-hm .hm-eco__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ch-hm .hm-eco__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  color: var(--hm-ink);
  font-size: 16px;
  font-weight: 800;
}

.ch-hm .hm-eco__list a:hover,
.ch-hm .hm-eco__list a:focus { color: var(--hm-blue); }

.ch-hm .hm-eco__list a > span { color: var(--hm-eco-acc); }

/* The copy column is a fixed 353px on every desktop width, which is narrower than the two
   buttons at their natural size - so they share the row in equal halves and shrink together
   rather than one dropping under the other. A label that runs out of room wraps inside its
   own button, and both buttons keep the same height. */
.hm-eco__ctas {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

.ch-hm .hm-eco__ctas--pair > .hm-eco__cta {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  justify-content: center;
  gap: 5px;
  padding: 7px 9px;
  font-size: 13.5px;
  line-height: 1.25;
  text-align: center;
}

.ch-hm .hm-eco__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--hm-eco-acc);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  transition: opacity .2s;
}

.ch-hm .hm-eco__cta:hover,
.ch-hm .hm-eco__cta:focus { opacity: .92; color: #fff; }

/* the second button is the quiet one: the tab accent on white, outlined */
.ch-hm .hm-eco__cta--alt {
  border: 1.5px solid var(--hm-eco-acc);
  background: #fff;
  color: var(--hm-eco-acc);
}

.ch-hm .hm-eco__cta--alt:hover,
.ch-hm .hm-eco__cta--alt:focus {
  background: #fff;
  color: var(--hm-eco-acc);
  opacity: .92;
}

/* ---------- the little product window each tab shows ---------- */

.hm-eco__shot {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .1), 0 0 0 1px rgba(15, 23, 42, .04);
  overflow: hidden;
}

.hm-shot__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--hm-line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.hm-shot__head--plain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.hm-shot__title { font-size: 15px; font-weight: 900; color: var(--hm-ink); }
.hm-shot__sub { font-size: 12px; color: var(--hm-muted); font-weight: 700; }

.hm-shot__kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
}

.hm-pill {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

.hm-pill--amber { background: #fef3c7; color: #92400e; }
.hm-pill--red { background: #fee2e2; color: #b91c1c; }

.hm-shot__tabs {
  display: flex;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid var(--hm-line-soft);
  font-size: 13px;
  font-weight: 800;
  color: var(--hm-muted);
  overflow-x: auto;
}

.hm-shot__tabs span {
  padding: 11px 0;
  white-space: nowrap;
}

.hm-shot__tabs span.is-on {
  border-bottom: 2px solid var(--hm-eco-acc);
  color: var(--hm-ink);
}

.hm-shot__rows { display: flex; flex-direction: column; }

.hm-shot__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}

.hm-shot__row + .hm-shot__row { border-top: 1px solid #f1f5f9; }

.hm-shot__no { font-size: 13px; font-weight: 800; color: #94a3b8; width: 34px; flex-shrink: 0; }
.hm-shot__who { flex: 1; font-size: 14px; font-weight: 800; min-width: 0; }
.hm-shot__won { font-size: 12px; font-weight: 800; color: var(--hm-green); }

.hm-shot__foot {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hm-shot__footrow {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
}

.hm-shot__bar {
  height: 6px;
  border-radius: 99px;
}

.hm-shot__bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
}

.hm-shot__form {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hm-shot__field { display: flex; flex-direction: column; gap: 6px; }
.hm-shot__lbl { font-size: 12px; font-weight: 800; color: var(--hm-muted); }

.hm-shot__input {
  padding: 11px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.hm-shot__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.hm-shot__chips span {
  font-size: 13px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid #dbe4f0;
}

.hm-shot__chips span.is-on { border-color: transparent; color: #fff; }

.hm-shot__fee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #f6f8fc;
}

.hm-shot__fee--plain { background: transparent; padding: 6px 0 0; }
.hm-shot__fee span { font-size: 13px; font-weight: 800; }
.hm-shot__fee b { font-family: var(--hm-display); font-size: 22px; font-weight: 700; }

.hm-shot__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}

.hm-shot__card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--hm-line-soft);
  border-radius: 12px;
}

.hm-shot__av {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex-shrink: 0;
}

.hm-shot__cardbody { flex: 1; min-width: 0; }
.hm-shot__link { font-size: 12px; font-weight: 900; white-space: nowrap; }

.hm-shot__tagrow { display: flex; gap: 8px; flex-wrap: wrap; }

.hm-shot__tagrow span {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 99px;
  background: #f3edfc;
  color: #5b21b6;
}

.hm-shot__turf {
  height: 92px;
  background: repeating-linear-gradient(90deg, #2f7d3a 0 36px, #2a7234 36px 72px);
  position: relative;
}

.hm-shot__turf span {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}

.hm-shot__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.hm-shot__slots span {
  font-size: 13px;
  font-weight: 800;
  padding: 9px;
  border-radius: 8px;
  text-align: center;
}

.hm-shot__slots .is-gone { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
.hm-shot__slots .is-free { border: 1px solid #99f6e4; }
.hm-shot__slots .is-on { background: var(--hm-teal); color: #fff; }

.hm-shot__seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #f1f5f9;
}

.hm-shot__seg span {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  padding: 8px;
  border-radius: 8px;
  color: var(--hm-body-c);
}

.hm-shot__seg span.is-on { background: var(--hm-ink); color: #fff; font-weight: 900; }

.hm-shot__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hm-muted);
}

.hm-shot__roles { display: flex; flex-wrap: wrap; gap: 6px; }

.hm-shot__roles span {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 99px;
  border: 1px solid #d1e7d8;
  background: #f3faf5;
  color: #166534;
}

@media all and (max-width: 1099px) {
  .hm-eco {
    grid-template-columns: 1fr;
  }

  .hm-eco__tabs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ch-hm .hm-eco__tab { min-width: 250px; }
}

@media all and (max-width: 759px) {
  .hm-eco__panel {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Shared: a section head with a button on the right
   ========================================================================== */

.hm-secbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin-bottom: 44px;
}

.hm-secbar .hm-head { margin-bottom: 0; }

.hm-secbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ch-hm .hm-btn--amberd {
  background: var(--hm-amber-d);
  color: #fff;
  min-height: 48px;
}

.ch-hm .hm-btn--amberd:hover,
.ch-hm .hm-btn--amberd:focus {
  background: #b45309;
  color: #fff;
}

/* tone pills shared by the journey panel */
.hm-tone-g { background: #dcfce7; color: #166534; }
.hm-tone-a { background: #fef3c7; color: #92400e; }
.hm-tone-b { background: #dbeafe; color: #1e40af; }
.hm-tone-r { background: #fee2e2; color: #991b1b; }
.hm-tone-n { background: #f1f5f9; color: #475569; }
.hm-tone-v { background: #ede9fe; color: #5b21b6; }

/* ==========================================================================
   04 Tournaments
   ========================================================================== */

.hm-tour { background: var(--hm-page); }

.hm-jrail {
  overflow-x: auto;
  padding: 8px 0 6px;
  margin: -8px 0 28px;
}

.hm-jrail__inner {
  position: relative;
  min-width: 860px;
}

.hm-jrail__line {
  position: absolute;
  top: 20.5px;
  left: 5.5%;
  right: 5.5%;
  height: 3px;
  background: #dbe2ec;
  border-radius: 99px;
}

.hm-jrail__line > span {
  display: block;
  height: 100%;
  background: var(--hm-amber-d);
  border-radius: 99px;
  transition: width .5s cubic-bezier(.3, .7, .3, 1);
}

.ch-hm .hm-jsteps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.ch-hm .hm-jsteps > li {
  display: flex;
  justify-content: center;
}

.ch-hm .hm-jstep {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.hm-jstep__n {
  width: 44px;
  height: 44px;
  border-radius: 99px;
  background: #fff;
  color: var(--hm-muted);
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hm-display);
  font-size: 18px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px #eff3f8;
  transition: background .35s, color .35s, border-color .35s, transform .35s;
}

.hm-jstep.is-done .hm-jstep__n {
  background: var(--hm-amber-d);
  color: #fff;
  border-color: var(--hm-amber-d);
}

.hm-jstep.is-on .hm-jstep__n { transform: scale(1.12); }

.hm-jstep__k {
  font-size: 14px;
  font-weight: 800;
  color: var(--hm-muted);
  white-space: nowrap;
  transition: color .35s;
}

.hm-jstep.is-on .hm-jstep__k { color: var(--hm-ink); }

.hm-jbody {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: stretch;
}

.hm-jcopy {
  background: var(--hm-ink);
  color: #fff;
  border-radius: 18px;
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hm-jcopy__step {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--hm-amber);
}

.ch-hm .hm-jcopy__head {
  margin: 0;
  font-family: var(--hm-display);
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: .95;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.ch-hm .hm-jcopy__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #cbd5e1;
  text-wrap: pretty;
  /* all nine sentences share one cell, so the paragraph is as tall as the
     longest of them and swapping steps cannot change the section's height */
  display: grid;
}

.hm-jcopy__line {
  grid-area: 1 / 1;
  visibility: hidden;
}

.hm-jcopy__line.is-on {
  visibility: visible;
}

.ch-hm .hm-jcopy__next {
  margin-top: auto;
  align-self: flex-start;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  font-weight: 800;
  font-size: 14px;
  transition: background .2s;
}

.ch-hm .hm-jcopy__next:hover { background: rgba(255, 255, 255, .14); }

.hm-jpanel {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .07);
  overflow: hidden;
  /* the head takes the first row and every step's rows share the second, so the
     panel reserves the step with the most rows once instead of resizing - and
     resizing it would move the whole page below this section */
  display: grid;
  grid-template-rows: auto 1fr;
}

/* the eight inactive sets stay in the layout so the row keeps its size;
   visibility takes them out of sight and out of the accessibility tree, which
   the hidden attribute cannot do here - bootstrap makes that display: none */
.hm-jpanel__rows {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  visibility: hidden;
}

.hm-jpanel__rows.is-on {
  visibility: visible;
}

.hm-jpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hm-line-soft);
}

.hm-jpanel__head span:first-child { font-size: 14px; font-weight: 900; }
.hm-jpanel__head span:last-child { font-size: 12px; font-weight: 800; color: var(--hm-muted); }

.hm-jrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.hm-jrow__main { flex: 1; min-width: 0; }
.hm-jrow__a { font-size: 15px; font-weight: 800; color: var(--hm-ink); }
.hm-jrow__s { font-size: 13px; color: var(--hm-muted); font-weight: 600; }
.hm-jrow__b { font-size: 13px; font-weight: 800; color: #334155; white-space: nowrap; }

.hm-jrow__tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ==========================================================================
   05 Auction
   ========================================================================== */

.hm-auction {
  background: #0b1428;
  color: #fff;
}

.hm-auction .hm-lead { color: #b6c4dd; }

.hm-aucgrid {
  display: grid;
  grid-template-columns: minmax(0, 3.49fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.hm-aucmain {
  background: #101f3f;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* the screenshot fills the card and keeps its own proportions; it sets the height of the
   row, and the team panel beside it scrolls if it has more to show */
.hm-aucmain--shot {
  justify-content: center;
}

.hm-aucmain--shot img {
  display: block;
  width: 100%;
  height: auto;
}

.hm-aucmain__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, .22);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hm-aucmain__league { color: var(--hm-amber); }

.hm-aucmain__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #9fb2d3;
}

.hm-aucmain__body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(18px, 2.4vw, 28px);
}

.hm-aucmain__shirt {
  position: relative;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(165deg, #2a5298 0%, #12254b 60%, #0b1733 100%);
}

.hm-aucmain__no {
  position: absolute;
  top: 6px;
  right: 12px;
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .18);
}

.hm-aucmain__ini {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 76px;
  line-height: 1;
}

.hm-aucmain__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.hm-aucmain__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.hm-aucmain__chip {
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: #cbd5e1;
}

.hm-aucmain__chip--cat {
  background: transparent;
  border: 1px solid rgba(251, 191, 36, .5);
  color: #fcd34d;
}

.hm-aucmain__name {
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
}

.hm-aucmain__stats {
  display: flex;
  gap: 18px;
  font-size: 13px;
  font-weight: 800;
  color: #9fb2d3;
  flex-wrap: wrap;
}

.hm-aucmain__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.hm-aucmain__lbl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #8aa0c4;
  margin-bottom: 8px;
}

.hm-aucmain__base {
  font-family: var(--hm-display);
  font-size: 28px;
  font-weight: 700;
  color: #cbd5e1;
}

.hm-aucmain__bid {
  font-family: var(--hm-display);
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 700;
  line-height: .9;
  color: var(--hm-amber);
}

.hm-aucmain__status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
}

.hm-aucmain__tag {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(220, 38, 38, .18);
  color: #fca5a5;
}

.hm-aucmain__lead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
}

.hm-aucmain__lead span {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.hm-auclog {
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
}

.hm-auclog__lbl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #8aa0c4;
  white-space: nowrap;
}

.hm-auclog__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.hm-auclog__item.is-last { background: rgba(251, 191, 36, .16); }
.hm-auclog__item.is-last b { color: var(--hm-amber); }
.hm-auclog__item b { font-weight: 900; color: #cbd5e1; }

.hm-auclog__dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.hm-aucteams {
  background: #101f3f;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* the board fills its column edge to edge, like the auction screen beside it. Once the
   grid stacks, the column is far wider than the board is, so it is capped at its own size
   and centred rather than blown up */
.hm-aucteams--shot {
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: none;
  border: 0;
}

.hm-aucteams--shot img {
  display: block;
  width: 100%;
  max-width: 441px;
  height: auto;
  border-radius: 20px;
}

.hm-aucteams__head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #8aa0c4;
  padding: 0 10px 8px;
}

.hm-aucteam {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 12px;
}

.hm-aucteam__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hm-aucteam__badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #0b1428;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

.hm-aucteam__body { flex: 1; min-width: 0; }
.hm-aucteam__name { font-size: 14px; font-weight: 900; }

.hm-aucteam__purse {
  font-family: var(--hm-display);
  font-size: 18px;
  font-weight: 700;
  color: #cbd5e1;
}

.hm-aucteam__squad {
  font-family: var(--hm-display);
  font-size: 20px;
  font-weight: 700;
}

.hm-aucteam__bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}

.hm-aucteam__bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
}

@media all and (max-width: 1099px) {
  .hm-jbody,
  .hm-aucgrid { grid-template-columns: 1fr; }
}

@media all and (max-width: 759px) {
  .hm-secbar { margin-bottom: 30px; }
  .hm-aucmain__body { grid-template-columns: 1fr; }
  .hm-aucmain__shirt { height: 200px; }
  .hm-aucmain__status { margin-left: 0; }
}

/* ==========================================================================
   07 Professionals - the Explorer
   ========================================================================== */

.hm-pros { background: #15112a; color: #fff; }
.hm-pros .hm-lead { color: #cfc8ea; }

.ch-hm .hm-btn--violet { background: var(--hm-purple-l); color: #15112a; min-height: 48px; }
.ch-hm .hm-btn--violet:hover,
.ch-hm .hm-btn--violet:focus { background: #ddd6fe; color: #15112a; }

.ch-hm .hm-btn--ghostv {
  border: 1.5px solid rgba(196, 181, 253, .4);
  color: #fff;
  background: transparent;
  min-height: 48px;
}

.ch-hm .hm-btn--ghostv:hover,
.ch-hm .hm-btn--ghostv:focus { background: rgba(196, 181, 253, .1); color: #fff; }

.hm-progrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 428px);
  gap: 20px;
  align-items: stretch;
}

.hm-explorer {
  border-radius: 20px;
  background: #fff;
  color: var(--hm-ink);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hm-explorer__search {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px 170px;
  gap: 8px;
  border-bottom: 1px solid var(--hm-line-soft);
}

.hm-explorer__field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-ink);
}

.hm-explorer__field > span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-explorer__ph { color: #94a3b8; }

.ch-hm .hm-explorer__count {
  margin: 0;
  padding: 12px 18px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hm-muted);
}

.hm-explorer__count b { color: var(--hm-ink); }

.hm-explorer__list {
  display: flex;
  flex-direction: column;
  padding: 4px 8px 8px;
}

.hm-prorow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 12px;
  transition: background .25s;
}

.hm-prorow:hover { background: #f6f8fc; }

/* the row whose profile the card is showing */
.hm-prorow.is-on { background: #eef3fd; }
.hm-prorow.is-on .hm-prorow__chev { color: #2563eb; }

.hm-prorow__av {
  width: 42px;
  height: 42px;
  border-radius: 99px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}

.hm-prorow__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hm-prorow__n {
  font-size: 15.5px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-prorow__s {
  font-size: 13px;
  font-weight: 700;
  color: var(--hm-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-prorow__fee {
  font-size: 14px;
  font-weight: 900;
  color: var(--hm-ink);
  white-space: nowrap;
}

.hm-explorer__foot {
  padding: 14px 18px;
  border-top: 1px solid var(--hm-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hm-body-c);
}

.ch-hm .hm-explorer__foot a { color: #2563eb; font-weight: 900; }
.ch-hm .hm-explorer__foot a:hover { color: #1d4ed8; }

.hm-procard {
  border-radius: 20px;
  background: #fff;
  color: var(--hm-ink);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
}

/* The profile shot is far taller than the list beside it. The box takes its height from the
   grid row - which the list sets, because the scroller inside is taken out of flow and so
   adds nothing to it - and the image scrolls within that box. */
.hm-procard--shot {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.hm-procard__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hm-procard--shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* a quiet scrollbar, so the box does not read as a cropped image */
.hm-procard__scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, .28) transparent;
}

.hm-procard__scroll::-webkit-scrollbar {
  width: 8px;
}

.hm-procard__scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: rgba(15, 23, 42, .28);
  background-clip: content-box;
}

.hm-procard__scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, .45);
  background-clip: content-box;
}

.hm-procard__top {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(180deg, #eef2ff, #fff);
}

.hm-procard__av {
  width: 76px;
  height: 76px;
  border-radius: 99px;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
}

.hm-procard__n { font-size: 22px; font-weight: 900; line-height: 1.15; }
.hm-procard__s { font-size: 14px; font-weight: 700; color: var(--hm-body-c); }

.hm-procard__avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 11px;
  border-radius: 99px;
  background: #dcfce7;
  color: #166534;
}

.hm-procard__avail span {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--hm-green);
}

.hm-procard__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hm-line-soft);
  border-bottom: 1px solid var(--hm-line-soft);
}

.hm-procard__split > div {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hm-procard__split > div:first-child { border-right: 1px solid var(--hm-line-soft); }
.hm-procard__split span { font-size: 12px; font-weight: 800; color: var(--hm-muted); }
.hm-procard__split b { font-size: 20px; font-weight: 900; }

.hm-procard__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hm-procard__lbl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--hm-muted);
}

.hm-procard__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.hm-procard__tags span {
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 99px;
  background: #f4f0fe;
  color: #5b21b6;
}

.hm-procard__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hm-procard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--hm-line);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--hm-ink);
}

.hm-procard__btn--solid {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
  color: #fff;
  font-weight: 900;
}

/* ==========================================================================
   08 Businesses
   ========================================================================== */

.hm-biz {
  background: #fbf7f2;
  border-top: 1px solid #f1e7da;
  border-bottom: 1px solid #f1e7da;
}

.hm-biz__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.hm-biz__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.hm-biz .hm-lead { color: #57534e; }

.hm-biz__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ch-hm .hm-biz__tile {
  font: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #f1e7da;
  min-height: 112px;
  transition: background .22s, border-color .22s, color .22s;
}

.ch-hm .hm-biz__tile:hover { border-color: var(--hm-orange); }

/* the selected business inverts, as the design does */
.ch-hm .hm-biz__tile.is-on {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
}

.hm-biz__tileico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hm-biz-tint);
  color: var(--hm-biz-acc);
  /* the glyph strokes with currentColor, so this carries it across the swap */
  transition: background .22s, color .22s;
}

/* The selected tile inverts. The two tokens are set inline on the button, and
   an inline declaration outranks any rule here, so this paints the icon box
   itself rather than trying to re-point them. */
.ch-hm .hm-biz__tile.is-on .hm-biz__tileico {
  background: rgba(255, 255, 255, .12);
  color: #fbbf24;
}

.hm-biz__tiletext { display: flex; flex-direction: column; gap: 2px; }
.hm-biz__tiletext b { font-size: 15px; font-weight: 900; color: var(--hm-ink); }
.hm-biz__tiletext i { font-style: normal; font-size: 12px; font-weight: 700; color: #78716c; }

.hm-biz__tile.is-on .hm-biz__tiletext b { color: #fff; }
.hm-biz__tile.is-on .hm-biz__tiletext i { color: #cbd5e1; }

.ch-hm .hm-btn--orange { background: var(--hm-orange); color: #fff; min-height: 48px; }
.ch-hm .hm-btn--orange:hover,
.ch-hm .hm-btn--orange:focus { background: #c2410c; color: #fff; }

.ch-hm .hm-btn--orangeline {
  border: 1.5px solid #fed7aa;
  background: #fff;
  color: #c2410c;
  min-height: 48px;
}

.ch-hm .hm-btn--orangeline:hover,
.ch-hm .hm-btn--orangeline:focus { background: #fff7ed; color: #c2410c; }

.hm-bizcard {
  min-width: 0;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #efe4d6;
  box-shadow: 0 40px 80px -48px rgba(68, 40, 10, .45);
}

.hm-bizcard__cover {
  height: 104px;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px);
}

.hm-bizcard__body {
  padding: 0 clamp(20px, 2.4vw, 28px) 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hm-bizcard__idrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.hm-bizcard__logo {
  /* only the logo reaches up into the cover. Pulling the whole row up instead
     puts the business name on the blue band as soon as it wraps, where the
     dark title cannot be read */
  align-self: flex-start;
  margin-top: -24px;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  padding: 5px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35);
}

.hm-bizcard__logo span {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
}

.hm-bizcard__id {
  min-width: 0;
  flex: 1;
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hm-bizcard__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  line-height: 1.2;
}

.ch-hm .hm-bizcard__title h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--hm-ink);
}

.hm-bizcard__v {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: 5px;
  background: #dcfce7;
  color: #166534;
}

.hm-bizcard__meta { font-size: 14px; font-weight: 700; color: var(--hm-muted); }

.hm-bizcard__tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--hm-line-soft);
  font-size: 14px;
  font-weight: 800;
}

.hm-bizcard__tabs span { padding: 0 0 10px; color: #94a3b8; }
.hm-bizcard__tabs span.is-on { color: var(--hm-ink); box-shadow: inset 0 -2px 0 var(--hm-orange); }

.ch-hm .hm-bizcard__svc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch-hm .hm-bizcard__svc li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #faf8f5;
  font-size: 14.5px;
  font-weight: 800;
  color: #1e293b;
}

.hm-bizcard__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hm-bizcard__act {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--hm-line);
  color: var(--hm-ink);
  font-size: 13.5px;
  font-weight: 800;
}

.hm-bizcard__act--solid {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
  color: #fff;
  font-weight: 900;
}

/* ==========================================================================
   09 Booking
   ========================================================================== */

.hm-book { background: #eef3ec; }

.hm-bookgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.hm-ground {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
  display: flex;
  flex-direction: column;
}

.hm-ground__pitch {
  position: relative;
  min-height: 320px;
  flex: 1;
  background: repeating-linear-gradient(90deg, #2f7d3a 0 48px, #2a7234 48px 96px);
  overflow: hidden;
}

.hm-ground__box {
  position: absolute;
  inset: 22px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 10px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 14px 14px;
}

.hm-ground__strip {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 17%;
  height: 56%;
  transform: translateX(-50%);
  background: #c9b27c;
  border-radius: 3px;
  box-shadow: inset 0 3px 0 #fff, inset 0 -3px 0 #fff;
}

.hm-ground__lightL,
.hm-ground__lightR {
  position: absolute;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 99px;
  background: radial-gradient(rgba(255, 255, 230, .35), transparent 65%);
}

.hm-ground__lightL { left: -60px; }
.hm-ground__lightR { right: -60px; }

.hm-ground__badges {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  gap: 6px;
}

.hm-ground__badge {
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 6px;
}

.hm-ground__badge--dark { background: var(--hm-ink); color: #fff; }
.hm-ground__badge--amber { background: var(--hm-amber); color: var(--hm-ink); }

.hm-ground__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 22px 20px;
  background: linear-gradient(transparent, rgba(5, 20, 10, .85));
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ch-hm .hm-ground__caption h3 { margin: 0; font-size: 24px; font-weight: 900; color: #fff; }
.hm-ground__place { font-size: 14px; font-weight: 700; color: #d1fae5; }

.hm-ground__rating {
  font-size: 14px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
}

.hm-ground__tags {
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hm-ground__tags span {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 99px;
  background: #ecf8f6;
  color: #0f766e;
}

.hm-booker {
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hm-booker__step { display: flex; flex-direction: column; gap: 10px; }

.hm-booker__lbl {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--hm-muted);
}

.hm-booker__lblrow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.hm-booker__note { font-size: 12px; font-weight: 800; color: var(--hm-muted); }

.hm-booker__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(52px, 1fr));
  gap: 6px;
  overflow-x: auto;
}

.hm-booker__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--hm-line);
  color: var(--hm-ink);
}

.hm-booker__day.is-on {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
  color: #fff;
}

.hm-booker__day i { font-style: normal; font-size: 11px; font-weight: 800; opacity: .75; }
.hm-booker__day b { font-family: var(--hm-display); font-size: 24px; font-weight: 700; line-height: 1.1; }

.hm-booker__slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.hm-booker__slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--hm-line);
}

.hm-booker__slot b { font-size: 15px; font-weight: 900; }
.hm-booker__slot i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--hm-muted); }

.hm-booker__slot.is-gone { background: #f1f5f9; border-color: #e8edf3; color: #94a3b8; }
.hm-booker__slot.is-gone b { text-decoration: line-through; }
.hm-booker__slot.is-gone i { color: #94a3b8; }

.hm-booker__slot.is-on {
  background: var(--hm-teal);
  border-color: var(--hm-teal);
  color: #fff;
}

.hm-booker__slot.is-on i { color: rgba(255, 255, 255, .85); }

.hm-booker__sum {
  margin-top: auto;
  border-radius: 14px;
  background: #f6f8fc;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hm-booker__sumrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hm-booker__sumday { font-size: 15px; font-weight: 900; }
.hm-booker__sumtime { font-size: 14px; font-weight: 700; color: var(--hm-body-c); }

.hm-booker__price {
  font-family: var(--hm-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.ch-hm .hm-booker__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 12px;
  background: var(--hm-teal);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  transition: background .2s;
}

.ch-hm .hm-booker__pay:hover,
.ch-hm .hm-booker__pay:focus { background: #0f766e; color: #fff; }

.hm-booker__fine { font-size: 12px; font-weight: 700; color: var(--hm-muted); }

/* ---------- 09 Booking on phones ----------
   The seven day cells have a 52px floor, so the strip asks for 400px and, with
   the default min-width:auto, pushed the whole section past the viewport. Below
   576px the week wraps over two rows, which keeps the chosen date on screen,
   and the card tightens up around it. */

@media all and (max-width: 575px) {
  .hm-bookgrid > *,
  .hm-booker__step,
  .hm-booker__days {
    min-width: 0;
  }

  .hm-booker__days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }

  .hm-booker__day { padding: 7px 0; }
  .hm-booker__day b { font-size: 21px; }

  /* the pitch is a decorative header - it does not need a third of the screen */
  .hm-ground__pitch { min-height: 220px; }
  .hm-ground__box { inset: 14px; }

  .hm-ground__caption { padding: 40px 16px 16px; }
  .ch-hm .hm-ground__caption h3 { font-size: 20px; }
  .hm-ground__place { font-size: 13px; }

  .hm-ground__tags { padding: 14px 16px; gap: 6px; }
  .hm-ground__tags span { font-size: 12px; padding: 5px 10px; }

  .hm-booker { padding: 16px; gap: 16px; }
  .hm-booker__sum { padding: 14px; }

  /* the date and the price stop competing for the same line */
  .hm-booker__sumrow { flex-direction: column; gap: 4px; }
  .hm-booker__price { font-size: 28px; }

  .ch-hm .hm-booker__pay { font-size: 15px; text-align: center; }
  .hm-booker__fine { font-size: 11.5px; line-height: 1.45; }
}

@media all and (max-width: 380px) {
  .hm-booker__slots { grid-template-columns: 1fr 1fr; }
  .hm-booker__slot { padding: 8px 10px; }
  .hm-booker__slot b { font-size: 14px; }
}

/* ==========================================================================
   11 Live & broadcast
   ========================================================================== */

.hm-liveSec {
  background: #060a14;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hm-liveSec__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 360px at 80% 0%, rgba(34, 197, 94, .10), transparent 60%);
}

.hm-liveSec .hm-wrap { position: relative; }

.hm-liveSec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: 32px;
}

.hm-liveSec__head .hm-h2 {
  flex: 1 1 100%;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: .9;
}

.hm-liveSec__head .hm-lead { flex: 1 1 360px; max-width: 620px; color: #b6c4dd; }

.ch-hm .hm-pipe {
  list-style: none;
  margin: 0 0 24px;
  padding: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.ch-hm .hm-pipe > li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hm-pipe__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.hm-pipe__chip.is-on {
  background: #22c55e;
  color: #052e16;
  border-color: #22c55e;
}

.hm-pipe__n {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hm-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding-top: 3px;
}

.hm-pipe__chip.is-on .hm-pipe__n { background: #052e16; color: #4ade80; }
.hm-pipe__arrow { color: #475569; font-weight: 900; }

.hm-livegrid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.hm-livephone {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.hm-livephone__shell {
  width: 100%;
  max-width: 340px;
  padding: 10px;
  border-radius: 44px;
  background: #05080f;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.hm-livephone__shell img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
}

.hm-livemain {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.hm-livemain__shot {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.hm-livemain__shot img { display: block; width: 100%; height: auto; }

.hm-livemain__sub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hm-livecard {
  border-radius: 14px;
  background: var(--hm-ink);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hm-livecard--wide { grid-column: span 2; }

.hm-livecard__lbl { font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.hm-livecard__big { font-size: 15px; font-weight: 700; line-height: 1.5; color: #e2e8f0; }
.hm-livecard__mid { font-size: 14px; font-weight: 800; color: #e2e8f0; }
.hm-livecard__sm { font-size: 13px; font-weight: 700; color: #94a3b8; }

/* ==========================================================================
   12 Statistics
   ========================================================================== */

.hm-stats { background: var(--hm-page); }

.hm-statsgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: 16px;
  align-items: stretch;
}

.hm-lb {
  border-radius: 20px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hm-lb__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ch-hm .hm-lb__head h3 { margin: 0; font-size: 17px; font-weight: 900; color: var(--hm-ink); }

.hm-lb__tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: #f1f5f9;
}

.ch-hm .hm-lb__tab {
  font: inherit;
  cursor: pointer;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--hm-body-c);
  transition: background .2s, color .2s;
}

.ch-hm .hm-lb__tab.is-on { background: var(--hm-ink); color: #fff; }

.ch-hm .hm-lb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ch-hm .hm-lb__list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
}

.hm-lb__rank {
  font-family: var(--hm-display);
  font-size: 22px;
  font-weight: 700;
  color: #94a3b8;
}

.hm-lb__who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* the leaderboard shows the numbers, not the names: the avatar and the two text
   lines are shimmer placeholders, as in the design */
@keyframes hmShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hm-lb__sk {
  background: linear-gradient(90deg, #eef2f7 0%, #e2e8f0 20%, #f8fafc 40%, #eef2f7 60%);
  background-size: 200% 100%;
  animation: hmShimmer 1.6s linear infinite;
}

.hm-lb__sk--av {
  width: 26px;
  height: 26px;
  border-radius: 99px;
  flex-shrink: 0;
}

.hm-lb__sk--name {
  height: 12px;
  border-radius: 6px;
}

.hm-lb__sk--sub {
  height: 9px;
  border-radius: 5px;
}

.hm-lb__val {
  font-family: var(--hm-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.hm-lb__meter {
  grid-column: 2 / 4;
  height: 6px;
  border-radius: 99px;
  background: var(--hm-line-soft);
}

.hm-lb__meter > span {
  display: block;
  height: 100%;
  border-radius: 99px;
}

.hm-lb__sub {
  grid-column: 2 / 4;
  font-size: 12px;
  font-weight: 700;
  color: var(--hm-muted);
}

.hm-perf {
  border-radius: 20px;
  background: #0b1428;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hm-perf__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.hm-perf__lbl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #94a3b8;
}

.hm-perf__head .hm-perf__lbl { color: var(--hm-amber); }

.ch-hm .hm-perf__head h3 {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
}

.hm-perf__runs {
  font-family: var(--hm-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--hm-amber);
  line-height: 1;
  white-space: nowrap;
}

.hm-perf__runs i { font-style: normal; font-size: 14px; color: #94a3b8; }

.hm-perf__chart { display: flex; flex-direction: column; gap: 8px; }

.hm-perf__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 110px;
}

.hm-perf__bar {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.hm-perf__bar i { font-style: normal; font-size: 10px; font-weight: 900; color: #cbd5e1; }
.hm-perf__bar b { display: block; width: 100%; border-radius: 4px 4px 0 0; }

.hm-perf__wagon {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hm-perf__wagon svg { flex-shrink: 0; }

.hm-perf__key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #cbd5e1;
}

.hm-perf__key span { display: flex; align-items: center; gap: 8px; }
.hm-perf__key i { width: 14px; height: 3px; display: inline-block; }

.hm-records {
  display: grid;
  /* minmax(0,1fr) rather than 1fr: a plain 1fr floors at min-content, and the
     40px figures inside were pushing this column past the viewport near 1200px */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
}

.hm-statsgrid > * {
  min-width: 0;
}

.hm-record {
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.hm-record__lbl { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--hm-muted); }

.hm-record__v {
  font-family: var(--hm-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.hm-record__v i { font-style: normal; font-size: 18px; }
.hm-record__who { font-size: 12px; font-weight: 700; color: var(--hm-body-c); }

.ch-hm .hm-note {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}

/* ==========================================================================
   13 Who it's for
   ========================================================================== */

.hm-aud__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.ch-hm .hm-aud__tab {
  font: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 18px;
  border-radius: 14px;
  background: #f6f8fc;
  color: var(--hm-ink);
  border: 1.5px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s;
}

.ch-hm .hm-aud__tab:hover { border-color: var(--hm-aud-acc); }

.ch-hm .hm-aud__tab.is-on {
  background: #fff;
  border-color: var(--hm-aud-acc);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

.hm-aud__tab b { font-size: 17px; font-weight: 800; line-height: 1.2; }
.hm-aud__tab i { font-style: normal; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--hm-muted); }

.hm-aud__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: 16px;
  border-radius: 20px;
  background: #f6f8fc;
  padding: clamp(18px, 2.4vw, 28px);
}

.hm-aud__col { display: flex; flex-direction: column; gap: 10px; }

.hm-aud__lbl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--hm-aud-acc);
}

.hm-aud__lbl--muted { color: var(--hm-muted); }

.ch-hm .hm-aud__feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ch-hm .hm-aud__feats li {
  display: flex;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--hm-ink);
}

.ch-hm .hm-aud__feats svg { flex-shrink: 0; margin-top: 1px; }

.ch-hm .hm-aud__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch-hm .hm-aud__steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 800;
}

.ch-hm .hm-aud__steps li span {
  width: 28px;
  height: 28px;
  border-radius: 99px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}

.hm-aud__cta {
  border-radius: 16px;
  color: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.hm-aud__ctahead {
  font-family: var(--hm-display);
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
}

.ch-hm .hm-aud__cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 10px;
  background: #fff;
  color: var(--hm-ink);
  font-weight: 900;
  font-size: 15px;
  text-align: center;
  padding: 0 12px;
  transition: background .2s;
}

.ch-hm .hm-aud__cta a:hover,
.ch-hm .hm-aud__cta a:focus { background: #f1f5f9; color: var(--hm-ink); }

/* ==========================================================================
   14 How it connects
   ========================================================================== */

.hm-connect { background: #0b1428; color: #fff; }
.hm-connect .hm-lead { color: #b6c4dd; }

.hm-lanes {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}

.hm-lanes__inner {
  position: relative;
  min-width: 980px;
  padding: 44px 40px 52px 92px;
}

.hm-lanes__spine {
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 99px;
  background: #22c55e;
}

.hm-lanes__spinelbl {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3em;
  color: #4ade80;
}

.hm-lanes__list {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.hm-lane { position: relative; }

.hm-lane__stub {
  position: absolute;
  left: -52px;
  top: 5px;
  width: 52px;
  height: 4px;
  background: var(--hm-lane);
}

.hm-lane__node {
  position: absolute;
  left: -58px;
  top: -1px;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: #0b1428;
  border: 4px solid #22c55e;
}

.hm-lane__name {
  position: absolute;
  left: 0;
  top: -30px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-lane);
}

.ch-hm .hm-lane__stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}

.ch-hm .hm-lane__stops li {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  flex: 0 0 auto;
}

.ch-hm .hm-lane__stops li.has-line { flex: 1 1 auto; }

/* The last stop has no trailing line, so its li collapsed to the 14px dot and
   its label - centred on that li - ran into the previous one on the nine-stop
   lane. This reserves room for it. Every lane's last li starts at the same
   offset from the right, so the lanes still end in line with each other. */
.ch-hm .hm-lane__stops li:last-child { min-width: 92px; }

.hm-lane__dot {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 99px;
  background: #0b1428;
  border: 3px solid var(--hm-lane);
}

.hm-lane__stop {
  position: absolute;
  top: 24px;
  /* the dot is 14px and sits at the start of the li, so its centre is 7px in */
  left: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  color: #cbd5e1;
}

/* the last stop centres on its dot like every other one - the 92px its li
   reserves is what keeps the label inside the lane */

.ch-hm .hm-lane__stops li { position: relative; }

.ch-hm .hm-lane__stops li.has-line::after {
  content: "";
  flex: 1;
  height: 4px;
  margin-top: 5px;
  background: var(--hm-lane);
}


/* ---------- 14 polish ----------
   The diagram read as four flat lines on a flat ground. It now sits on its own
   lit panel, the lanes glow in their own colour, and hovering one dims the rest
   so a single journey can be followed. Colour comes from --hm-lane, already set
   per lane on the markup, so nothing here needs new classes. */

.hm-connect {
  position: relative;
  overflow: hidden;
}

/* brand light behind the diagram - green from the community spine, blue from
   the player lane */
.hm-connect::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -25%;
  height: 80%;
  background:
    radial-gradient(55% 55% at 16% 30%, rgba(34, 197, 94, .16), transparent 70%),
    radial-gradient(45% 45% at 80% 8%, rgba(96, 165, 250, .13), transparent 70%);
  pointer-events: none;
}

/* the same faint grid the hero carries, so the two dark sections feel related */
.hm-connect::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  pointer-events: none;
}

.hm-connect > .hm-wrap {
  position: relative;
  z-index: 1;
}

/* the diagram becomes a panel rather than loose marks on the page */
.hm-lanes__inner {
  padding: 54px 44px 60px 96px;
  border-radius: 22px;
  border: 1px solid rgba(147, 180, 232, .16);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(34, 197, 94, .09), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow:
    0 40px 80px -52px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.hm-lanes__spine {
  left: 44px;
  top: 20px;
  bottom: 20px;
  background: linear-gradient(180deg, #4ade80, #22c55e 50%, #14b8a6);
  box-shadow: 0 0 18px -2px rgba(34, 197, 94, .6);
}

.hm-lanes__spinelbl {
  left: 6px;
  font-size: 13px;
  letter-spacing: .34em;
  text-shadow: 0 0 14px rgba(34, 197, 94, .45);
}

/* hovering a lane lifts it out of the set */
.hm-lane {
  opacity: 1;
  transition: opacity .3s ease;
}

.hm-lanes__list:hover .hm-lane { opacity: .42; }
.hm-lanes__list .hm-lane:hover { opacity: 1; }

/* a band behind the hovered lane, fading away from the spine */
.hm-lane::before {
  content: "";
  position: absolute;
  inset: -30px -16px -32px -72px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 62%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--hm-lane) 13%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.hm-lane:hover::before { opacity: 1; }

/* the lane name becomes a tinted pill instead of loose coloured text */
.hm-lane__name {
  top: -38px;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  background: color-mix(in srgb, var(--hm-lane) 15%, transparent);
  border: 1px solid rgba(255, 255, 255, .16);
  border-color: color-mix(in srgb, var(--hm-lane) 32%, transparent);
}

.hm-lane__node {
  box-shadow: 0 0 16px -2px rgba(34, 197, 94, .75);
}

.hm-lane__stub {
  border-radius: 99px;
  box-shadow: 0 0 12px -3px var(--hm-lane);
}

/* each stop gets a soft halo in its lane's colour */
.hm-lane__dot {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .06),
    0 0 14px -3px var(--hm-lane);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--hm-lane) 16%, transparent),
    0 0 14px -3px var(--hm-lane);
  transition: transform .3s ease, box-shadow .3s ease;
}

.hm-lane:hover .hm-lane__dot { transform: scale(1.14); }

.ch-hm .hm-lane__stops li.has-line::after {
  border-radius: 99px;
  box-shadow: 0 0 12px -3px var(--hm-lane);
}

.hm-lane__stop {
  color: #c4d2e8;
  transition: color .3s ease;
}

.hm-lane:hover .hm-lane__stop { color: #fff; }

@media all and (max-width: 1099px) {
  .hm-lanes__inner { padding: 48px 32px 54px 88px; }
  .hm-lanes__spine { left: 38px; }
}

@media all and (max-width: 575px) {
  .hm-lanes__inner {
    padding: 44px 24px 50px 80px;
    border-radius: 18px;
  }

  .hm-lanes__spine { left: 32px; }
  .hm-lanes__spinelbl { font-size: 12px; letter-spacing: .28em; }

  /* the pointer-driven dimming has no meaning on a touch screen */
  .hm-lanes__list:hover .hm-lane { opacity: 1; }
  .hm-lane:hover::before { opacity: 0; }
}


/* ---------- 14 declutter ----------
   Each lane becomes its own row: padding above for the name, below for the
   labels, and a faint surface tying the three together. The absolutely placed
   name, stub and node are re-anchored to the new padded box. */

.hm-connect .hm-head { margin-bottom: clamp(32px, 3.6vw, 52px); }

.hm-lanes__inner {
  padding: 34px 40px 34px 100px;
}

.hm-lanes__list { gap: 16px; }

.hm-lane {
  /* top room for the name pill, bottom room for the stop labels */
  padding: 50px 20px 34px 0;
  border-radius: 18px;
}

/* one surface per lane, tinted in the lane's own colour while hovered.
   ::before paints behind the lane's children, so the line and dots stay clear */
.hm-lane::before {
  /* starts just inside the spine so the band never crosses it */
  inset: 0 0 0 -46px;
  border-radius: 18px;
  opacity: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014) 58%, transparent);
  transition: background .3s ease;
}

.hm-lane:hover::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 58%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--hm-lane) 18%, transparent), transparent 62%);
}

/* the row header sits inside its own padding instead of floating between lanes */
.hm-lane__name { top: 12px; }

/* re-anchored to the padded box so they still meet the line */
.hm-lane__stub { top: 55px; }
.hm-lane__node { top: 49px; }

/* 21 labels all at the same weight were competing with the lines; they step
   back now and come forward on the lane being read */
.hm-lane__stop {
  font-size: 13px;
  font-weight: 700;
  color: #9fb2cd;
  letter-spacing: .005em;
}

.hm-lane:hover .hm-lane__stop {
  color: #fff;
  font-weight: 800;
}

@media all and (max-width: 1099px) {
  .hm-lanes__inner { padding: 30px 30px 30px 92px; }
  .hm-lane { padding: 46px 16px 32px 0; }
}

@media all and (max-width: 575px) {
  .hm-lanes__inner {
    padding: 26px 22px 26px 80px;
    border-radius: 18px;
  }

  .hm-lane { padding: 44px 14px 30px 0; }
  .hm-lane::before { inset: 0 0 0 -58px; }
  .hm-lane__stop { font-size: 12.5px; }
  .hm-lanes__list { gap: 12px; }
}

/* ==========================================================================
   15 Mobile app
   ========================================================================== */

.hm-app { background: var(--hm-page); }

.hm-app__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hm-app__copy { display: flex; flex-direction: column; gap: 22px; }

/* the column's own gap already separates the heading from the steps - the
   head's margin on top of it left a 60px hole under the lead */
.hm-app__copy .hm-head { margin-bottom: 0; }

.ch-hm .hm-app__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ch-hm .hm-app__step {
  font: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}

.ch-hm .hm-app__step:hover { background: #fff; }

.ch-hm .hm-app__step.is-on {
  background: #fff;
  border-color: var(--hm-line);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.hm-app__n {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 99px;
  background: #e8edf5;
  color: var(--hm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hm-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding-top: 3px;
}

.hm-app__step.is-on .hm-app__n { background: var(--hm-blue); color: #fff; }

.hm-app__text { display: flex; flex-direction: column; gap: 3px; }
.hm-app__text b { font-size: 16px; font-weight: 900; color: var(--hm-ink); }
.hm-app__text i { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--hm-muted); }

.hm-app__phone { display: flex; justify-content: center; }

.hm-app__shell {
  width: 100%;
  max-width: 340px;
  padding: 10px;
  border-radius: 44px;
  background: #05080f;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
}

/* the six screens stack in the same frame; only the selected one is shown, and
   the frame keeps the phone's aspect so swapping never shifts the layout */
.hm-app__shell {
  position: relative;
  aspect-ratio: 1179 / 2556;
}

.hm-app__shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 34px;
}

.hm-app__shell img[hidden] { display: none; }


/* ---------- 15 polish ----------
   The step list was flat text on a flat ground until a step was selected. Every
   step now sits on a real surface, the selected one is marked by an accent edge
   as well as a fill, and the phone gets light behind it. Styling only - the tab
   behaviour and the is-on class it toggles are untouched. */

.hm-app {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(37, 87, 167, .10), transparent 70%),
    linear-gradient(180deg, #f4f7fc, var(--hm-page));
}

.hm-app > .hm-wrap {
  position: relative;
  z-index: 1;
}

.ch-hm .hm-app__steps { gap: 8px; }

/* a resting surface, so the list reads as steps rather than loose lines */
.ch-hm .hm-app__step {
  position: relative;
  background: rgba(255, 255, 255, .55);
  border-color: rgba(203, 213, 225, .5);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}

.ch-hm .hm-app__step:hover {
  background: #fff;
  border-color: var(--hm-line);
  transform: translateX(2px);
}

.ch-hm .hm-app__step.is-on {
  background: #fff;
  border-color: rgba(37, 87, 167, .22);
  box-shadow: 0 14px 32px -16px rgba(15, 23, 42, .28);
}

/* the accent edge marks the step the phone is showing */
.ch-hm .hm-app__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 99px 99px 0;
  background: var(--hm-blue);
  transform: translateY(-50%);
  transition: height .3s ease;
}

.ch-hm .hm-app__step.is-on::before { height: 56%; }

.hm-app__n { transition: background .3s, color .3s, box-shadow .3s; }

.hm-app__step.is-on .hm-app__n {
  box-shadow: 0 0 0 4px rgba(37, 87, 167, .14);
}

/* light behind the handset, and a crisper frame edge */
.hm-app__phone { position: relative; }

.hm-app__phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 87, 167, .18), transparent 70%);
  pointer-events: none;
}

.hm-app__shell {
  z-index: 1;
  border-color: rgba(15, 23, 42, .18);
  box-shadow:
    0 40px 90px -30px rgba(15, 23, 42, .4),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}

@media all and (max-width: 575px) {
  .ch-hm .hm-app__step { padding: 13px 14px; gap: 13px; }
  .hm-app__n { width: 34px; height: 34px; font-size: 16px; }
  .ch-hm .hm-app__step:hover { transform: none; }
}

/* ==========================================================================
   16 Features
   ========================================================================== */

.hm-feat { background: #f4f6fa; }

.ch-hm .hm-h2--sm { font-size: clamp(36px, 4.2vw, 56px); }
.ch-hm .hm-h2--xs { font-size: clamp(30px, 3.2vw, 42px); line-height: 1; }

.hm-feat__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.hm-feat__grid > * { min-width: 0; }

.ch-hm .hm-feat__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--hm-line);
  color: var(--hm-ink);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ch-hm .hm-feat__card:hover,
.ch-hm .hm-feat__card:focus {
  border-color: #cbd5e1;
  box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .35);
  transform: translateY(-2px);
  color: var(--hm-ink);
}

.hm-feat__head { display: flex; align-items: center; gap: 12px; }

.hm-feat__ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hm-feat__ico svg { display: block; }

.ch-hm .hm-feat__head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--hm-ink);
}

.ch-hm .hm-feat__card ul {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--hm-line-soft);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ch-hm .hm-feat__card li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hm-body-c);
}

.ch-hm .hm-feat__card li svg { flex-shrink: 0; margin-top: 2px; }

.hm-feat__more {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--hm-feat-acc);
}

/* a card with no page behind it keeps its look but drops the lift that says it is clickable */
.ch-hm .hm-feat__card--plain:hover,
.ch-hm .hm-feat__card--plain:focus {
  border-color: var(--hm-line);
  box-shadow: none;
  transform: none;
}

/* five across is the reference layout; below that the row count steps down so
   the cards never fall under a readable width */
@media all and (max-width: 1199px) {
  .hm-feat__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media all and (max-width: 991px) {
  .hm-feat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media all and (max-width: 767px) {
  .hm-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-hm .hm-feat__card { padding: 18px; gap: 14px; }
  .hm-feat__head { gap: 10px; }
  .hm-feat__ico { width: 38px; height: 38px; border-radius: 11px; }
  .ch-hm .hm-feat__head h3 { font-size: 16px; }
}

@media all and (max-width: 479px) {
  .hm-feat__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ==========================================================================
   17 Pricing
   ========================================================================== */

.hm-price { background: var(--hm-blue); color: #fff; }

.hm-price__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

.hm-price__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 680px;
}

.hm-price .hm-h2 { color: #fff; }

.ch-hm .hm-price__copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #dbe7fb;
}

/* ==========================================================================
   18 Testimonials
   ========================================================================== */

.hm-testi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
}

.ch-hm .hm-testi__big {
  margin: 0;
  border-radius: 20px;
  background: #0b1428;
  color: #fff;
  padding: clamp(24px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 300px;
}

.hm-testi__quote {
  font-size: 110px;
  line-height: .6;
  color: var(--hm-amber);
}

.ch-hm .hm-testi__big blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.3;
  font-weight: 800;
  color: #cbd5e1;
  text-wrap: pretty;
}

.ch-hm .hm-testi__big figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hm-testi__av {
  width: 52px;
  height: 52px;
  border-radius: 99px;
  border: 2px dashed #475569;
  flex-shrink: 0;
}

.hm-testi__name { display: block; font-size: 16px; font-weight: 900; }
.hm-testi__role { font-size: 14px; font-weight: 700; color: #94a3b8; }

.hm-testi__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ch-hm .hm-testi__small {
  margin: 0;
  flex: 1;
  border-radius: 20px;
  border: 1.5px dashed #cbd5e1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.ch-hm .hm-testi__small blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 800;
  color: var(--hm-muted);
}

.ch-hm .hm-testi__small figcaption {
  font-size: 14px;
  font-weight: 800;
  color: #94a3b8;
}

/* ==========================================================================
   19 FAQ
   ========================================================================== */

.hm-faq { background: var(--hm-page); }

.hm-faq__grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.hm-faq__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 96px;
}

.hm-faq__help {
  border-radius: 20px;
  background: #0b1428;
  color: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hm-faq__helprow { display: flex; align-items: center; gap: 12px; }

.hm-faq__helpico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(34, 197, 94, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hm-faq__helph { display: block; font-size: 17px; font-weight: 900; }
.hm-faq__helps { font-size: 13.5px; font-weight: 600; color: #94a3b8; }

.hm-faq__helpbtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ch-hm .hm-faq__wa,
.ch-hm .hm-faq__hc {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 10px;
  font-size: 14px;
  transition: background .2s;
}

.ch-hm .hm-faq__wa { background: #22c55e; color: #fff; font-weight: 900; }
.ch-hm .hm-faq__wa:hover,
.ch-hm .hm-faq__wa:focus { background: var(--hm-green); color: #fff; }

.ch-hm .hm-faq__hc { border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 800; }
.ch-hm .hm-faq__hc:hover,
.ch-hm .hm-faq__hc:focus { background: rgba(255, 255, 255, .08); color: #fff; }

.hm-faq__list {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--hm-line);
  overflow: hidden;
}

.hm-faq__item { transition: background .2s; }
.hm-faq__item + .hm-faq__item { border-top: 1px solid var(--hm-line-soft); }
.hm-faq__item[open] { background: #f7faff; }

.ch-hm .hm-faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  color: var(--hm-ink);
}

.ch-hm .hm-faq__item summary::-webkit-details-marker { display: none; }

.hm-faq__num {
  flex-shrink: 0;
  width: 32px;
  font-family: var(--hm-display);
  font-size: 20px;
  font-weight: 800;
  color: #cbd5e1;
}

.hm-faq__item[open] .hm-faq__num { color: var(--hm-blue); }

.ch-hm .hm-faq__item summary h3 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--hm-ink);
}

.hm-faq__plus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 99px;
  background: #f1f5f9;
  color: var(--hm-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s, background .2s, color .2s;
}

.hm-faq__item[open] .hm-faq__plus {
  transform: rotate(45deg);
  background: var(--hm-blue);
  color: #fff;
}

.ch-hm .hm-faq__item > p {
  margin: 0;
  padding: 0 70px 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--hm-body-c);
  text-wrap: pretty;
}

/* the store badges under the answer about the app, at the reading scale of the
   list rather than the full size the Download the app section gives them */
.hm-faq__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.ch-hm .hm-faq__badges a {
  display: block;
  line-height: 0;
  border-radius: 8px;
  transition: opacity .2s;
}

.ch-hm .hm-faq__badges a:hover,
.ch-hm .hm-faq__badges a:focus { opacity: .85; }

.hm-faq__badges img { display: block; height: 44px; width: auto; }

/* ==========================================================================
   20 Download the app
   ========================================================================== */

.hm-dl {
  background: var(--hm-blue);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hm-dl__ring {
  position: absolute;
  right: -80px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 99px;
  border: 60px solid rgba(255, 255, 255, .06);
  pointer-events: none;
}

.hm-dl__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: center;
}

.hm-dl__copy { display: flex; flex-direction: column; gap: 16px; }

.hm-dl__kicker {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fcd34d;
}

.hm-dl .hm-h2 { color: #fff; }
.hm-dl .hm-lead { color: #dbe7fb; max-width: 520px; }

.hm-dl__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}

.ch-hm .hm-dl__badges a {
  display: block;
  line-height: 0;
  border-radius: 8px;
  transition: opacity .2s;
}

.ch-hm .hm-dl__badges a:hover,
.ch-hm .hm-dl__badges a:focus { opacity: .85; }

.hm-dl__badges img { display: block; height: 56px; width: auto; }

.ch-hm .hm-dl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ch-hm .hm-dl__list li {
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hm-dl__k { font-size: 11.5px; font-weight: 900; letter-spacing: .1em; color: #fcd34d; }
.hm-dl__t { font-size: 16px; font-weight: 900; }
.hm-dl__d { font-size: 13px; font-weight: 600; color: #dbe7fb; }

/* ==========================================================================
   21 Final CTA
   ========================================================================== */

.hm-final {
  background: var(--hm-navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hm-final__lines {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(-50%);
  opacity: .5;
  pointer-events: none;
}

.hm-final__lines i { display: block; height: 4px; }

.hm-final__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 22px;
}

.ch-hm .hm-final__title {
  margin: 0;
  font-family: var(--hm-display);
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1.05;
  font-weight: 700;
  text-transform: uppercase;
  max-width: 1100px;
  color: #fff;
  text-align: right;
}

.ch-hm .hm-final__title em { font-style: normal; color: var(--hm-amber); }

.ch-hm .hm-final__lead {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: #c7d4ea;
  max-width: 820px;
  text-align: right;
  text-wrap: balance;
}

.hm-final__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.hm-final__ctas .hm-btn { min-height: 54px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media all and (max-width: 1099px) {
  .hm-progrid,
  .hm-bookgrid,
  .hm-livegrid,
  .hm-aud__panel,
  .hm-faq__grid,
  .hm-testi__grid,
  .hm-dl__grid { grid-template-columns: 1fr; }

  .hm-statsgrid { grid-template-columns: 1fr 1fr; }
  .hm-faq__side { position: static; }

  /* stacked, there is no list beside it to match, so the shot goes back into the flow at
     its own size and shows whole instead of scrolling */
  .hm-procard--shot {
    position: static;
    width: 100%;
    max-width: 428px;
    margin-inline: auto;
  }

  .hm-procard__scroll {
    position: static;
    overflow: visible;
  }
}

/* ---------- 15 the season walkthrough on tablet and phone ----------
   The steps and the phone stay side by side all the way down to 768px, so a tap
   never pushes the screen it changes out of view. The phone column flexes to
   keep both halves comfortable in that range. */

@media all and (min-width: 768px) and (max-width: 1099px) {
  .hm-app__grid {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 32vw, 360px);
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
  }

  .ch-hm .hm-app__step { padding: 12px 14px; gap: 13px; }
  .hm-app__n { width: 34px; height: 34px; font-size: 16px; }
  .hm-app__text b { font-size: 15px; }
  .hm-app__text i { font-size: 13px; }
}

/* Below 768 the column stacks, and the phone is moved into the chosen step by
   the section's script so the screen sits directly under the step it belongs
   to. These rules cover it in that position. */

@media all and (max-width: 767px) {
  .hm-app__grid { grid-template-columns: minmax(0, 1fr); }

  .ch-hm .hm-app__steps li {
    display: flex;
    flex-direction: column;
  }

  .hm-app__phone {
    /* tucked under the step it belongs to */
    margin: 10px 0 2px;
  }

  .hm-app__shell { max-width: 230px; }
}

@media all and (max-width: 759px) {
  .hm-statsgrid,
  .hm-explorer__search,
  .hm-biz__tiles,
  .hm-dl__list,
  .hm-livemain__sub { grid-template-columns: 1fr; }

  .hm-livecard--wide { grid-column: auto; }
  .hm-booker__slots { grid-template-columns: repeat(3, 1fr); }
  .hm-bizcard__actions { grid-template-columns: 1fr; }
  .hm-procard__cta { grid-template-columns: 1fr; }
  .hm-faq__helpbtns { grid-template-columns: 1fr; }

  .ch-hm .hm-faq__item summary { padding: 16px; gap: 12px; }
  .ch-hm .hm-faq__item > p { padding: 0 16px 18px 60px; }

  .hm-final__inner { align-items: flex-start; text-align: left; }
  .ch-hm .hm-final__title,
  .ch-hm .hm-final__lead { text-align: left; }
  .hm-final__ctas { justify-content: flex-start; }
}

@media all and (max-width: 520px) {
  .hm-biz__tiles { grid-template-columns: 1fr 1fr; }
  .hm-booker__slots { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 08 Businesses once the columns stack ----------
   Below 1000px the rail and the profile it drives ended up separated by the CTA
   buttons, so picking a category meant scrolling up and back down. The copy's
   children join the section grid here, which puts the card straight under the
   rail, and the rail becomes one scroll-snapping row rather than a tall stack.
   Must stay after the 759px/520px rules above - same specificity, order wins. */

@media all and (max-width: 999px) {
  .hm-biz__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    align-items: start;
  }

  /* the copy box dissolves so head / rail / card / buttons are all grid items */
  .hm-biz__copy { display: contents; }

  .hm-biz__copy > .hm-head { order: 1; }
  .hm-biz__tiles { order: 2; }
  .hm-bizcard { order: 3; }
  .hm-biz__copy > .hm-secbar__btns { order: 4; }

  /* one swipeable row: six stacked tiles pushed the card off the screen */
  .hm-biz__tiles {
    min-width: 0;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(146px, 1fr);
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* room for the scrollbar without clipping the focus ring */
    padding-bottom: 3px;
    margin-bottom: -3px;
  }

  .hm-biz__tiles::-webkit-scrollbar { display: none; }

  .ch-hm .hm-biz__tile {
    scroll-snap-align: start;
    min-height: 0;
    gap: 10px;
    padding: 12px;
  }

  .hm-biz__tileico { width: 32px; height: 32px; border-radius: 9px; }
  .hm-biz__tiletext b { font-size: 14px; }
  .hm-biz__tiletext i { font-size: 11.5px; }

  /* a short fade marks that the card now belongs to the tile just tapped */
  .hm-bizcard.is-swapped { animation: hmBizSwap .22s ease-out; }
}

@keyframes hmBizSwap {
  from { opacity: .4; }
  to { opacity: 1; }
}