/* ─────────────────────────────────────────────────────────────────
   Honest Record shop-window (/news/honest-record/)

   Editorial redesign — Financial Times / Bloomberg register. The
   palette pivots away from navy to a charcoal / cream / gold system
   that reads as a statistics publication rather than a betting site.
   No dark backgrounds; every surface sits on cream or paper white.

   Section order (matches the template spine):
     · Hero        — editorial headline + deck + live-updated stamp
     · Dashboard   — 6-up KPI grid, headline stat leads
     · Badge       — "Nothing hidden" trust component
     · Track record summary (existing block)
     · Featured slot + persona rows (existing product cards)
     · Methodology — how we measure
     · Footer
   ─────────────────────────────────────────────────────────────── */

.hr-hub {
  /* Charcoal / cream / gold — the editorial palette. Kept LOCAL to
     .hr-hub so we don't leak tokens onto sibling news pages. */
  --hrh-ink:         #12181f;   /* charcoal — headlines + big numbers */
  --hrh-ink-70:      #3d4655;
  --hrh-ink-50:      #6b7382;
  --hrh-ink-30:      #a4abb8;
  --hrh-paper:       #ffffff;   /* card / stat backgrounds */
  --hrh-cream:       #f7f2e6;   /* page background */
  --hrh-cream-2:     #efe8d6;   /* deeper cream for section tints */
  --hrh-rule:        #dcd5c1;   /* on-cream 1px dividers */
  --hrh-rule-strong: #b5ac91;
  --hrh-gold:        #b8912f;   /* accent — kicker, arrows, borders */
  --hrh-gold-soft:   #d4b25a;
  --hrh-gold-wash:   rgba(184, 145, 47, 0.10);
  --hrh-emerald:     #1a7d4a;
  --hrh-claret:      #a03040;

  /* Persona tints — soft accents on the product cards' left edge. */
  --hrh-sly-tint:   #b95a30;
  --hrh-fox-tint:   #7a4c25;
  --hrh-llama-tint: #52794f;

  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 20px 64px;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  color: var(--hrh-ink);
  background: var(--hrh-cream);
}
.hr-hub a { color: var(--hrh-ink); }

/* ── PUBLICATION MASTHEAD — annual-report cover front ─────────
   Left-aligned masthead. Top strip carries the brand mark + kicker
   on the left and an 'Audited & Verified' pill on the right. Title
   splits into three spans so 'Honest' can tint gold like the mockup.
   Cover panel is 60/40 — big number on the left, label + sentence
   + live pill on the right, divider between them. */
.hr-hub__masthead {
  position: relative;
  background: var(--hrh-cream);
  padding: 26px 40px 40px;
  border-top: 4px solid var(--hrh-ink);
  border-bottom: 1px solid var(--hrh-rule);
  margin: 0 0 32px;
  overflow: hidden;
}

.hr-hub__masthead-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
.hr-hub__masthead-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hr-hub__masthead-rule {
  width: 32px; height: 2px;
  background: var(--hrh-ink);
  display: inline-block;
}
.hr-hub__masthead-mark { display: inline-flex; }
.hr-hub__masthead-mark svg { display: block; }
.hr-hub__masthead-kicker {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hrh-ink);
}
.hr-hub__audited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--hrh-ink-30);
  border-radius: 999px;
  background: var(--hrh-paper);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrh-ink);
}
.hr-hub__audited svg { color: var(--hrh-ink); }

/* Title — HONEST tinted gold; every span same face at same size. */
.hr-hub__masthead-title {
  font-family: 'Playfair Display', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
  font-size: clamp(44px, 8vw, 92px);
  font-weight: 900;
  line-height: 0.95;
  color: var(--hrh-ink);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: flex;
  gap: 0.28em;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.hr-hub__masthead-title-accent { color: var(--hrh-gold); }

.hr-hub__masthead-deck {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hrh-ink-70);
  margin: 0 0 28px;
  position: relative;
  z-index: 2;
}

/* Cover panel — 60/40 split: number + body. Watermark fox on the
   far right at low opacity acts as the third "column". */
.hr-hub__cover {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
}
@media (max-width: 780px) {
  .hr-hub__cover { grid-template-columns: 1fr; gap: 20px; }
}

.hr-hub__cover-number {
  position: relative;
  padding: 12px 0 12px 24px;
  font-family: 'Playfair Display', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
  font-weight: 900;
  color: var(--hrh-ink);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: flex-start;
  justify-self: start;
}
.hr-hub__cover-ring {
  position: absolute;
  top: -4%; bottom: -4%;
  left: -6%;
  aspect-ratio: 1;
  height: 108%;
  border: 1px dashed var(--hrh-gold);
  border-radius: 50%;
  opacity: 0.55;
  z-index: -1;
}
.hr-hub__cover-int {
  font-size: clamp(120px, 20vw, 200px);
  line-height: 0.85;
}
.hr-hub__cover-dec {
  font-size: clamp(120px, 20vw, 200px);
  line-height: 0.85;
  color: var(--hrh-ink);
}
.hr-hub__cover-unit {
  font-size: clamp(48px, 9vw, 100px);
  color: var(--hrh-gold);
  line-height: 1;
  padding-top: 0.15em;
  padding-left: 6px;
  letter-spacing: 0;
  font-style: italic;
}

.hr-hub__cover-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: 22px;
}
.hr-hub__cover-divider {
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--hrh-rule-strong);
}
@media (max-width: 780px) {
  .hr-hub__cover-body { padding-left: 0; }
  .hr-hub__cover-divider { display: none; }
}
.hr-hub__cover-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hrh-gold);
  margin: 0;
}
.hr-hub__cover-sentence {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--hrh-ink);
  margin: 0;
}
.hr-hub__cover-sentence strong {
  font-weight: 900;
  color: var(--hrh-ink);
}

.hr-hub__live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--hrh-emerald);
  border-radius: 999px;
  background: rgba(26, 125, 74, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hrh-emerald);
  align-self: flex-start;
  margin-top: 4px;
}
.hr-hub__live-check { line-height: 1; }

/* Fox watermark — subtle background illustration on the right of
   the cover panel, per the mockup. Rendered as an inline pseudo-
   element so it doesn't need extra markup. */
.hr-hub__masthead::after {
  content: '';
  position: absolute;
  right: -2%;
  top: 8%;
  width: 40%;
  height: 92%;
  background-image:
    radial-gradient(circle at 55% 45%, var(--hrh-gold) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 30%, var(--hrh-ink) 0 3px, transparent 4px);
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'>\
<path d='M 22 40 L 34 8 L 46 40 Z M 78 40 L 66 8 L 54 40 Z\
 M 24 40 Q 32 82 50 96 Q 68 82 76 40 Q 68 62 50 62 Q 32 62 24 40 Z'\
 fill='black'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'>\
<path d='M 22 40 L 34 8 L 46 40 Z M 78 40 L 66 8 L 54 40 Z\
 M 24 40 Q 32 82 50 96 Q 68 82 76 40 Q 68 62 50 62 Q 32 62 24 40 Z'\
 fill='black'/></svg>");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  background-color: var(--hrh-ink);
  background-image: none;
}
@media (max-width: 780px) {
  .hr-hub__masthead::after { display: none; }
}

@media (max-width: 600px) {
  .hr-hub__masthead { padding: 20px 22px 32px; }
  .hr-hub__masthead-title { gap: 0.2em; }
}


/* ── STAT CARDS ROW ────────────────────────────────────────────
   Five white cards in a single row. Each carries a circular icon
   badge in gold-wash, a small-caps label, a big Playfair number, and
   a sub-line beneath. Sits directly under the masthead. */
.hr-hub__cards {
  margin: 0 0 40px;
}
.hr-hub__cards-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1000px) {
  .hr-hub__cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hr-hub__cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hr-hub__stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 18px 20px;
  background: var(--hrh-paper);
  border: 1px solid var(--hrh-rule);
  border-radius: 6px;
  text-align: center;
}
.hr-hub__stat-card-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--hrh-gold-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hrh-gold);
  margin-bottom: 2px;
}
.hr-hub__stat-card-lbl {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrh-ink-50);
}
.hr-hub__stat-card-val {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--hrh-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hr-hub__stat-card--positive .hr-hub__stat-card-val { color: var(--hrh-emerald); }
.hr-hub__stat-card--negative .hr-hub__stat-card-val { color: var(--hrh-claret); }
.hr-hub__stat-card-sub {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  color: var(--hrh-ink-50);
  line-height: 1.35;
}

/* Transparency footer strip — sits directly under the cards row. */
.hr-hub__transparency {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 4px 0;
  border-top: 1px solid var(--hrh-rule);
  margin-top: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.hr-hub__transparency-line {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hrh-ink-70);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hr-hub__transparency-shield {
  display: inline-flex;
  color: var(--hrh-gold);
}
.hr-hub__transparency-est {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hrh-ink);
  margin: 0;
}
.hr-hub__transparency-est time { color: var(--hrh-ink); }

/* ── EDITORIAL SEAL ───────────────────────────────────────────
   Certification ribbon that replaced the earlier "gold checkmark"
   badge. Reads as a notary stamp + editorial credit, not a shiny
   trust widget:
     · Line-only SVG wax-seal on the left, no fills → copies as
       a photocopy would (the whole point of a "sealed record"
       visual metaphor).
     · Cream background with charcoal hairline top+bottom + gold
       underline on the eyebrow.
     · Four promises rendered as an ordered list with numbered
       Playfair markers, so they read as clauses of a certificate
       rather than checkbox marketing bullets.                         */
.hr-hub__seal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  padding: 30px 34px;
  background: var(--hrh-cream);
  border-top: 1px solid var(--hrh-ink-30);
  border-bottom: 1px solid var(--hrh-ink-30);
  margin: 0 0 40px;
  position: relative;
}
.hr-hub__seal::before,
.hr-hub__seal::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--hrh-rule);
}
.hr-hub__seal::before { top: 3px; }
.hr-hub__seal::after  { bottom: 3px; }

.hr-hub__seal-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hrh-ink);
  padding-right: 32px;
  border-right: 1px solid var(--hrh-ink-30);
}
.hr-hub__seal-mark svg { display: block; }

.hr-hub__seal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hr-hub__seal-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hrh-ink);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hrh-gold);
  display: inline-block;
  align-self: flex-start;
}
.hr-hub__seal-promises {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: seal-promise;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 32px;
}
.hr-hub__seal-promises li {
  counter-increment: seal-promise;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hrh-ink-70);
  padding-left: 30px;
  position: relative;
}
.hr-hub__seal-promises li::before {
  content: counter(seal-promise, upper-roman) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: 13px;
  color: var(--hrh-gold);
  letter-spacing: 0.02em;
  min-width: 22px;
}

@media (max-width: 720px) {
  .hr-hub__seal {
    grid-template-columns: 1fr;
    padding: 24px 22px;
    gap: 20px;
    text-align: left;
  }
  .hr-hub__seal-mark {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid var(--hrh-ink-30);
  }
  .hr-hub__seal-promises { grid-template-columns: 1fr; gap: 8px; }
}

/* ── CHARTS ───────────────────────────────────────────────────
   Two hand-rolled SVG charts, side-by-side on desktop, stacked on
   mobile. No JS, no chart library — the service pre-computes SVG
   path strings and axis ticks. The tone modifier (--gold / --green)
   drives the line + area-fill colours. */
.hr-hub__charts {
  margin: 0 0 40px;
  padding: 32px 0 8px;
  border-top: 1px solid var(--hrh-rule);
  border-bottom: 1px solid var(--hrh-rule);
}
.hr-hub__charts-head { margin: 0 0 24px; }
.hr-hub__charts-kicker {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hrh-gold);
  margin: 0 0 8px;
}
.hr-hub__charts-title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 900;
  color: var(--hrh-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.hr-hub__charts-deck {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hrh-ink-70);
  margin: 0;
}
/* Hero/support layout — profit curve (hero) dominates on desktop
   at ~60% of the row, strike rate (support) sits alongside at 40%.
   On tablet + mobile both collapse to full-width stacked, with the
   hero still first so the punchline reads before the context. */
.hr-hub__charts-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .hr-hub__charts-grid { grid-template-columns: 1fr; }
}

.hr-hub__chart {
  background: var(--hrh-paper);
  border: 1px solid var(--hrh-rule);
  padding: 22px 22px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.hr-hub__chart-cap {
  margin: 0 0 12px;
}
.hr-hub__chart-title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--hrh-ink);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.hr-hub__chart-subtitle {
  font-size: 12px;
  color: var(--hrh-ink-50);
  margin: 0;
}

/* Hero — the punchline chart. Bigger type + more chart real estate.
   Also gets a subtle emerald left-edge accent so it's clearly the
   "main event" even before the reader parses the shape. */
.hr-hub__chart--hero {
  padding: 30px 32px 20px;
  border-left: 4px solid var(--hrh-emerald);
}
.hr-hub__chart--hero .hr-hub__chart-title {
  font-size: 24px;
  letter-spacing: -0.01em;
}
.hr-hub__chart--hero .hr-hub__chart-subtitle {
  font-size: 14px;
  max-width: 480px;
}
.hr-hub__chart--hero .hr-hub__chart-svg-wrap {
  min-height: 260px;
  display: flex;
  align-items: center;
}
.hr-hub__chart--hero .hr-hub__chart-line { stroke-width: 3; }

/* Support — the context chart. Smaller, quieter typography;
   stroke thinner so the eye reads it as commentary, not headline. */
.hr-hub__chart--support {
  padding: 20px 22px 14px;
}
.hr-hub__chart--support .hr-hub__chart-title {
  font-size: 15px;
  color: var(--hrh-ink-70);
}
.hr-hub__chart--support .hr-hub__chart-subtitle {
  font-size: 11px;
}
.hr-hub__chart--support .hr-hub__chart-svg-wrap {
  min-height: 180px;
  display: flex;
  align-items: center;
}
.hr-hub__chart--support .hr-hub__chart-line { stroke-width: 2; }

@media (max-width: 620px) {
  .hr-hub__chart--hero { padding: 22px 20px 16px; }
  .hr-hub__chart--hero .hr-hub__chart-title { font-size: 20px; }
  .hr-hub__chart--hero .hr-hub__chart-svg-wrap { min-height: 200px; }
  .hr-hub__chart--support .hr-hub__chart-svg-wrap { min-height: 160px; }
}
.hr-hub__chart-svg-wrap {
  width: 100%;
  overflow: hidden;
}
.hr-hub__chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.hr-hub__chart-gridline {
  stroke: var(--hrh-rule);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.hr-hub__chart-y-label,
.hr-hub__chart-x-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--hrh-ink-50);
}
.hr-hub__chart-line {
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hr-hub__chart-dot {
  fill: transparent;
  transition: fill .12s ease;
}
.hr-hub__chart-dot:hover {
  fill: var(--hrh-ink);
}

.hr-hub__chart--gold .hr-hub__chart-line { stroke: var(--hrh-gold); }
.hr-hub__chart--gold .hr-hub__chart-area {
  fill: var(--hrh-gold);
  opacity: 0.10;
}
.hr-hub__chart--green .hr-hub__chart-line { stroke: var(--hrh-emerald); }
.hr-hub__chart--green .hr-hub__chart-area {
  fill: var(--hrh-emerald);
  opacity: 0.12;
}

/* ── BENCHMARK ROW ────────────────────────────────────────────
   Editorial three-column comparison — Saturday Racing vs Favourite
   vs SP Market. Table styled as a Bloomberg strategy sheet: dense,
   tabular, numbers dominate, tone chips carry the P/L colour. */
.hr-hub__benchmark {
  margin: 0 0 40px;
  padding: 32px 0 8px;
  border-top: 1px solid var(--hrh-rule);
  border-bottom: 1px solid var(--hrh-rule);
}
.hr-hub__benchmark-head { margin: 0 0 24px; }
.hr-hub__benchmark-kicker {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hrh-gold);
  margin: 0 0 8px;
}
.hr-hub__benchmark-title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 900;
  color: var(--hrh-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.hr-hub__benchmark-deck {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hrh-ink-70);
  margin: 0;
}

/* Diverging ROI bar chart — the punchline visual.
   Each row: label · track (with centre axis + coloured fill) · number.
   Positive bars extend RIGHT from centre; negative bars LEFT.
   Widths are set inline on the fill span (0-50% each half).      */
.hr-hub__bench-bars {
  background: var(--hrh-paper);
  border: 1px solid var(--hrh-rule);
  padding: 24px 24px 22px;
  margin: 0 0 18px;
}
.hr-hub__bench-bars-heading {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrh-ink-50);
  margin: 0 0 14px;
}
.hr-hub__bench-bars-scale {
  display: grid;
  grid-template-columns: 140px 1fr 90px;
  align-items: center;
  padding: 0 0 10px;
  border-bottom: 1px dashed var(--hrh-rule);
  margin-bottom: 6px;
}
@media (max-width: 620px) {
  .hr-hub__bench-bars-scale { grid-template-columns: 84px 1fr 68px; }
}
.hr-hub__bench-bars-scale::before { content: ''; }
.hr-hub__bench-bars-tick {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hrh-ink-40);
  grid-column: 2;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.hr-hub__bench-bars-tick--min  { grid-column: 2; justify-self: start; }
.hr-hub__bench-bars-tick--zero { grid-column: 2; justify-self: center; }
.hr-hub__bench-bars-tick--max  { grid-column: 2; justify-self: end; }

.hr-hub__bench-bars-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hr-hub__bench-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 90px;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
}
@media (max-width: 620px) {
  .hr-hub__bench-bar-row { grid-template-columns: 84px 1fr 68px; gap: 10px; }
}
.hr-hub__bench-bar-label {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--hrh-ink);
  line-height: 1.2;
}
.hr-hub__bench-bar-track {
  position: relative;
  height: 32px;
  background: linear-gradient(to right,
    transparent 0 49.5%,
    var(--hrh-rule) 49.5% 50.5%,
    transparent 50.5% 100%);
}
.hr-hub__bench-bar-axis {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 50%;
  width: 1px;
  background: var(--hrh-ink-30);
}
.hr-hub__bench-bar-fill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 2px;
}
.hr-hub__bench-bar-fill--pos {
  left: 50%;
  background: linear-gradient(to right,
    var(--hrh-emerald),
    color-mix(in srgb, var(--hrh-emerald) 70%, white));
}
.hr-hub__bench-bar-fill--neg {
  right: 50%;
  background: linear-gradient(to left,
    var(--hrh-claret),
    color-mix(in srgb, var(--hrh-claret) 70%, white));
}
.hr-hub__bench-bar-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--hrh-ink-30);
}
.hr-hub__bench-bar-val {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 22px;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--hrh-ink);
  letter-spacing: -0.01em;
}
.hr-hub__bench-bar-val--positive { color: var(--hrh-emerald); }
.hr-hub__bench-bar-val--negative { color: var(--hrh-claret); }

/* Collapsed table for Win% / Placed% — details/summary keeps the
   diverging bar the eye anchor without dropping the granular numbers. */
.hr-hub__bench-details {
  margin: 0 0 14px;
}
.hr-hub__bench-details-summary {
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hrh-ink-70);
  padding: 10px 12px;
  border: 1px solid var(--hrh-rule);
  background: var(--hrh-paper);
  list-style: none;
}
.hr-hub__bench-details-summary::-webkit-details-marker { display: none; }
.hr-hub__bench-details-summary::before {
  content: '+ ';
  color: var(--hrh-gold);
  font-weight: 900;
}
.hr-hub__bench-details[open] .hr-hub__bench-details-summary::before {
  content: '– ';
}
.hr-hub__bench-details[open] .hr-hub__bench-details-summary {
  border-bottom: none;
}
.hr-hub__bench-details .hr-hub__benchmark-table {
  border-top: none;
}

.hr-hub__benchmark-table-wrap {
  background: var(--hrh-paper);
  border: 1px solid var(--hrh-rule);
  padding: 8px 16px;
  overflow-x: auto;
}
.hr-hub__benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.hr-hub__benchmark-table thead th {
  padding: 16px 12px 14px;
  text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hrh-ink-50);
  border-bottom: 2px solid var(--hrh-ink);
}
.hr-hub__benchmark-th-metric,
.hr-hub__benchmark-table tbody th {
  text-align: left !important;
}
.hr-hub__benchmark-table tbody th {
  padding: 18px 12px;
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--hrh-ink);
  border-bottom: 1px solid var(--hrh-rule);
  min-width: 140px;
}
.hr-hub__benchmark-cell {
  padding: 18px 12px;
  text-align: right;
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--hrh-ink);
  border-bottom: 1px solid var(--hrh-rule);
  white-space: nowrap;
}
.hr-hub__benchmark-table tbody tr:last-child .hr-hub__benchmark-cell,
.hr-hub__benchmark-table tbody tr:last-child th {
  border-bottom: none;
}

/* ROI row gets bigger type + tonal colouring — this is the punchline. */
.hr-hub__benchmark-row-roi .hr-hub__benchmark-cell {
  font-size: 26px;
  font-weight: 900;
}
.hr-hub__benchmark-cell--positive { color: var(--hrh-emerald); }
.hr-hub__benchmark-cell--negative { color: var(--hrh-claret); }

.hr-hub__benchmark-dash {
  color: var(--hrh-ink-30);
  font-weight: 400;
}

.hr-hub__benchmark-caveat,
.hr-hub__benchmark-note {
  font-size: 12px;
  color: var(--hrh-ink-50);
  margin: 14px 0 0;
  line-height: 1.5;
  font-style: italic;
}
.hr-hub__benchmark-caveat {
  padding: 8px 12px;
  border-left: 3px solid var(--hrh-gold);
  background: var(--hrh-gold-wash);
  font-style: normal;
  font-weight: 700;
  color: var(--hrh-ink-70);
}

@media (max-width: 620px) {
  .hr-hub__benchmark-table thead th,
  .hr-hub__benchmark-cell { padding: 12px 8px; font-size: 18px; }
  .hr-hub__benchmark-row-roi .hr-hub__benchmark-cell { font-size: 20px; }
  .hr-hub__benchmark-table tbody th { padding: 12px 6px; font-size: 13px; min-width: 90px; }
}

/* ── PRODUCTS SECTION (flat grid, single header) ─────────────
   Personas moved INSIDE each card as a small chip, so the products
   render in one flat grid instead of per-persona sections. The
   header sits above the grid; ordering is defined server-side by
   the _PRODUCT_META registration order. */
.hr-hub__products {
  margin: 0 0 40px;
}

/* ── FEATURED TIPS shelf — Fox's shortlist promo ─────────────
   Sits directly under the product grid: dark charcoal card with a
   large fox mark on the left, editorial title in the middle, and a
   4-stat roll-up on the right. The whole card is one link to
   /featured-results/. Gold accents echo the masthead. */
.hr-hub__featured-tips {
  margin: 0 0 40px;
}
.hr-hub__ft-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 24px 30px;
  background: linear-gradient(135deg, #12181f 0%, #1e2733 100%);
  color: var(--hrh-cream);
  border-radius: 16px;
  border: 1px solid var(--hrh-ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.hr-hub__ft-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 45%;
  height: 100%;
  background-image: radial-gradient(circle, var(--hrh-gold) 1.4px, transparent 1.9px);
  background-size: 11px 11px;
  background-position: right top;
  opacity: 0.12;
  mask-image: linear-gradient(225deg, black 4%, transparent 75%);
  -webkit-mask-image: linear-gradient(225deg, black 4%, transparent 75%);
  pointer-events: none;
}
.hr-hub__ft-card:hover,
.hr-hub__ft-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 28px 48px -22px rgba(18, 24, 31, 0.55);
  outline: none;
}
.hr-hub__ft-mark {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(184, 145, 47, 0.10);
  border: 1px solid rgba(184, 145, 47, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hr-hub__ft-mark svg { display: block; }
.hr-hub__ft-mark-img {
  display: block;
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(184, 145, 47, 0.45));
}

.hr-hub__ft-body { min-width: 0; position: relative; z-index: 1; }
.hr-hub__ft-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrh-gold-soft);
  margin: 0 0 8px;
}
.hr-hub__ft-kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hrh-gold);
  box-shadow: 0 0 0 3px rgba(184, 145, 47, 0.22);
}
.hr-hub__ft-title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--hrh-cream);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.hr-hub__ft-deck {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(247, 242, 230, 0.75);
  margin: 0;
  max-width: 52ch;
}

.hr-hub__ft-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
  z-index: 1;
}
.hr-hub__ft-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  min-width: 68px;
}
.hr-hub__ft-stat-val {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1;
  color: var(--hrh-cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hr-hub__ft-stat--profit .hr-hub__ft-stat-val { color: #6fbf8a; }
.hr-hub__ft-stat--loss   .hr-hub__ft-stat-val { color: #d8788a; }
.hr-hub__ft-stat-lbl {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 242, 230, 0.55);
}

.hr-hub__ft-cta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrh-gold);
  position: relative;
  z-index: 1;
}
.hr-hub__ft-cta-arrow { transition: transform .18s ease; display: inline-block; }
.hr-hub__ft-card:hover .hr-hub__ft-cta-arrow,
.hr-hub__ft-card:focus-visible .hr-hub__ft-cta-arrow { transform: translateX(4px); }

/* Mobile — stack fox / body / stats / cta. */
@media (max-width: 720px) {
  .hr-hub__ft-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 22px;
  }
  .hr-hub__ft-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-hub__ft-stat { text-align: left; }
  .hr-hub__ft-mark { width: 88px; height: 88px; }
  .hr-hub__ft-mark svg { width: 72px; height: 72px; }
}
.hr-hub__products-head { margin: 0 0 22px; }
.hr-hub__products-kicker {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hrh-gold);
  margin: 0 0 8px;
}
.hr-hub__products-title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 900;
  color: var(--hrh-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.hr-hub__products-deck {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hrh-ink-70);
  margin: 0;
}

/* Persona mark colour tokens — used inside the card chips. Kept
   under this section so the persona-mark partial retains its
   colour styling now that the row heading is gone. */
.hr-hub__persona-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hrh-ink);
}
.hr-hub__persona-mark--sly_man { color: var(--hrh-sly-tint); }
.hr-hub__persona-mark--mr_fox  { color: var(--hrh-fox-tint); }
.hr-hub__persona-mark--llama   { color: var(--hrh-llama-tint); }

.hr-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px) { .hr-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hr-hub__grid { grid-template-columns: 1fr; } }

/* ── PRODUCT CARD — publication-cover treatment ──────────────
   Each Honest Record product renders as a self-contained editorial
   card: persona chip + LIVE indicator on top, big Playfair title +
   deck + gold rule, huge gold hero number, four coloured stat mini-
   tiles below, and a dark full-width CTA button that reads like the
   cover of a magazine issue. */
.hr-hub-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px 22px;
  background: var(--hrh-paper);
  border: 1px solid var(--hrh-rule);
  border-radius: 16px;
  color: var(--hrh-ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hr-hub-card:hover,
.hr-hub-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 26px 44px -22px rgba(18, 24, 31, 0.22);
  border-color: var(--hrh-rule-strong);
  outline: none;
}

/* Decorative dot-grid — a subtle nod to the mockup's heatmap that
   fades from the top-right corner toward the middle. Uses a radial
   gradient repeated on a small tile, masked to a diagonal fade so
   the dots dissolve into the paper. Tint picks up the persona. */
.hr-hub-card__deco {
  position: absolute;
  top: 0; right: 0;
  width: 62%;
  height: 46%;
  background-image: radial-gradient(circle, var(--hrh-gold) 1.4px, transparent 1.9px);
  background-size: 11px 11px;
  background-position: right top;
  opacity: 0.18;
  pointer-events: none;
  mask-image: linear-gradient(225deg, black 4%, transparent 78%);
  -webkit-mask-image: linear-gradient(225deg, black 4%, transparent 78%);
  z-index: 0;
}
.hr-hub-card--sly_man .hr-hub-card__deco {
  background-image: radial-gradient(circle, var(--hrh-sly-tint) 1.4px, transparent 1.9px);
  opacity: 0.22;
}
.hr-hub-card--mr_fox .hr-hub-card__deco {
  background-image: radial-gradient(circle, var(--hrh-fox-tint) 1.4px, transparent 1.9px);
  opacity: 0.20;
}
.hr-hub-card--llama .hr-hub-card__deco {
  background-image: radial-gradient(circle, var(--hrh-llama-tint) 1.4px, transparent 1.9px);
  opacity: 0.20;
}

/* Head strip — persona chip left, live/opening indicator right. */
.hr-hub-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.hr-hub-card__persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1.5px solid var(--hrh-ink);
  border-radius: 999px;
  background: transparent;
  line-height: 1;
}
.hr-hub-card__persona-mark-wrap {
  display: inline-flex;
  width: 16px; height: 16px;
  color: var(--hrh-gold);
}
.hr-hub-card__persona-mark-wrap .hr-hub__persona-mark {
  width: 16px; height: 16px;
}
.hr-hub-card__persona-mark-wrap .hr-hub__persona-mark svg {
  width: 16px; height: 16px;
}
.hr-hub-card__persona-bolt {
  display: inline-flex;
  color: var(--hrh-gold);
}
.hr-hub-card__persona-lbl {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hrh-ink);
  line-height: 1;
}
/* Persona-specific chip tints — border picks up the persona colour
   so the chip reads as branded without needing a fill. */
.hr-hub-card--sly_man .hr-hub-card__persona-chip { border-color: var(--hrh-sly-tint); }
.hr-hub-card--mr_fox  .hr-hub-card__persona-chip { border-color: var(--hrh-fox-tint); }
.hr-hub-card--llama   .hr-hub-card__persona-chip { border-color: var(--hrh-llama-tint); }

.hr-hub-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrh-ink);
}
.hr-hub-card__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hrh-gold);
  display: inline-block;
}
.hr-hub-card--opening .hr-hub-card__status { color: var(--hrh-ink-50); }
.hr-hub-card--opening .hr-hub-card__status-dot { background: var(--hrh-ink-30); }

/* Editorial title + deck + gold rule. */
.hr-hub-card__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(26px, 2.8vw, 32px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--hrh-ink);
  margin: 8px 0 0;
  letter-spacing: -0.012em;
  position: relative;
  z-index: 1;
}
.hr-hub-card__pitch {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--hrh-ink-70);
  margin: 0;
  max-width: 32ch;
  position: relative;
  z-index: 1;
}
.hr-hub-card__rule {
  display: inline-block;
  width: 46px;
  height: 3px;
  background: var(--hrh-gold);
  border-radius: 2px;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
.hr-hub-card--sly_man .hr-hub-card__rule { background: var(--hrh-sly-tint); }
.hr-hub-card--mr_fox  .hr-hub-card__rule { background: var(--hrh-fox-tint); }
.hr-hub-card--llama   .hr-hub-card__rule { background: var(--hrh-llama-tint); }

/* Hero stat — huge gold number, vertical divider, label + sub. */
.hr-hub-card__hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 0 6px;
  position: relative;
  z-index: 1;
}
.hr-hub-card__hero-num {
  display: inline-flex;
  align-items: baseline;
  color: var(--hrh-gold);
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hr-hub-card__hero-int {
  font-size: clamp(52px, 6vw, 68px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.hr-hub-card__hero-dec {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.hr-hub-card__hero-unit {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 900;
  margin-left: 4px;
}
.hr-hub-card__hero-body {
  border-left: 1px solid var(--hrh-rule);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hr-hub-card__hero-lbl {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrh-ink);
}
.hr-hub-card__hero-sub {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px;
  color: var(--hrh-ink-50);
  text-transform: none;
  letter-spacing: normal;
}

/* Stat mini-tiles — 4-up row, each with a pastel icon badge, big
   serif value, and small-caps label. Auto-fits when a product emits
   fewer than four stats. */
.hr-hub-card__stats {
  list-style: none;
  padding: 16px 0 4px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid var(--hrh-rule);
  position: relative;
  z-index: 1;
}
.hr-hub-card__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.hr-hub-card__stat-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hrh-ink);
  flex-shrink: 0;
}
.hr-hub-card__stat--target .hr-hub-card__stat-icon { background: #f6ded0; color: #b95a30; }
.hr-hub-card__stat--trophy .hr-hub-card__stat-icon { background: #dbe7d8; color: #3f7048; }
.hr-hub-card__stat--medal  .hr-hub-card__stat-icon { background: #dde3ee; color: #3a5077; }
.hr-hub-card__stat--chart  .hr-hub-card__stat-icon { background: #e6ddef; color: #5f4a7e; }
.hr-hub-card__stat-val {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: var(--hrh-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.hr-hub-card__stat-lbl {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hrh-ink-50);
  line-height: 1.2;
}
.hr-hub-card__stat--pnl-pos .hr-hub-card__stat-val { color: var(--hrh-emerald); }
.hr-hub-card__stat--pnl-neg .hr-hub-card__stat-val { color: var(--hrh-claret); }
.hr-hub-card__stat--pnl-flat .hr-hub-card__stat-val { color: var(--hrh-ink-70); }

/* Opening state — no hero, no tiles, just a soft-cream pill. */
.hr-hub-card__opening {
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  border: 1px dashed var(--hrh-rule-strong);
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hrh-ink-70);
  background: var(--hrh-cream);
  align-self: stretch;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Dark full-width CTA bar with fox mark on the right. */
.hr-hub-card__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  background: var(--hrh-ink);
  color: var(--hrh-gold);
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  transition: background .18s ease;
}
.hr-hub-card__cta-lbl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hr-hub-card__cta-arrow { transition: transform .18s ease; display: inline-block; }
.hr-hub-card__cta-mark {
  display: inline-flex;
  color: var(--hrh-ink-70);
  opacity: 0.55;
  transition: color .18s ease, opacity .18s ease;
}
.hr-hub-card:hover .hr-hub-card__cta,
.hr-hub-card:focus-visible .hr-hub-card__cta { background: #1c2530; }
.hr-hub-card:hover .hr-hub-card__cta-arrow,
.hr-hub-card:focus-visible .hr-hub-card__cta-arrow { transform: translateX(3px); }
.hr-hub-card:hover .hr-hub-card__cta-mark,
.hr-hub-card:focus-visible .hr-hub-card__cta-mark {
  color: var(--hrh-gold-soft);
  opacity: 1;
}

/* Mobile — stack the hero + tiles, keep the CTA legible. */
@media (max-width: 520px) {
  .hr-hub-card { padding: 20px 20px 18px; gap: 12px; }
  .hr-hub-card__hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hr-hub-card__hero-body { border-left: 0; padding-left: 0; }
  .hr-hub-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-hub-card__cta { padding: 14px 18px; letter-spacing: 0.14em; }
}

/* ── METHODOLOGY ─────────────────────────────────────────────── */
.hr-hub__method {
  margin: 0 0 40px;
  padding: 32px 0 8px;
  border-top: 1px solid var(--hrh-rule);
}
.hr-hub__method-head { text-align: left; margin-bottom: 24px; }
.hr-hub__method-kicker {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hrh-gold);
  margin: 0 0 8px;
}
.hr-hub__method-title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 900;
  color: var(--hrh-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.hr-hub__method-deck {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hrh-ink-70);
  margin: 0;
}
.hr-hub__method-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
}
@media (max-width: 720px) {
  .hr-hub__method-list { grid-template-columns: 1fr; }
}
.hr-hub__method-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--hrh-rule);
}
.hr-hub__method-num {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--hrh-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.hr-hub__method-list h3 {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--hrh-ink);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.hr-hub__method-list p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hrh-ink-70);
  margin: 0;
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.hr-hub__foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hrh-rule);
  font-size: 13px;
  color: var(--hrh-ink-70);
  text-align: center;
}
.hr-hub__foot a {
  color: var(--hrh-gold);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 600px) {
  .hr-hub { padding: 24px 14px 40px; }
  .hr-hub__hero { padding-top: 6px; padding-bottom: 30px; margin-bottom: 24px; }
  .hr-hub__kpi { min-height: 0; padding: 16px 18px 18px; }
  .hr-hub-card--featured { padding: 22px 20px 20px; }
  .hr-hub-card--featured .hr-hub-card__headline-val { font-size: 38px; }
}