/* =============================================================================
   Professional home — reading order
   -----------------------------------------------------------------------------
   The Professional overview renders 251 numbers across 4.7 screens. The numbers
   are the product, so the fix is not to remove them; it is to give the page a
   hierarchy so the eye knows where it is.

   Measured before this sheet — five heading treatments, no consistent order:

     "Current market review"          h2    36px / 650 / -1.08px   sentence
     "Where to look for opportunities" h2   22px / 800 / +0.22px   sentence
     "HOME · OPPORTUNITY BOARD"       span  20px / 600 / -0.22px   UPPER
     "CRYPTO · OPPORTUNITY"           span  20px / 600 / -0.22px   UPPER
     "CRYPTO · INDEX & BENCHMARK"     span  16px / 600 / -0.18px   UPPER

   Two peer sections at 36px and 22px; one of them the only element on the page
   with positive tracking and weight 800. A board and a universe inside it at
   identical size. Uppercase headings at 16–20px competing with sentence-case
   ones directly above.

   Three rules below:
     1. Peer sections share a size. Rank is size, not weight or tracking.
     2. A board outranks a universe outranks a panel — one step each.
     3. The uppercase strings are literal in the markup, so rather than fight
        them they are treated as what they read best as: small tracked labels.
        Uppercase works at 12px as a label and stops competing at 20px.
   ========================================================================== */

/* ---- 1 · Peer section headings ----------------------------------------- */

html[data-ui='v2'][data-v2] .hmo-title,
html[data-ui='v2'][data-v2] .hoi-title {
  font-family: var(--v2-sans);
  font-size: var(--v2-t-2xl);
  font-weight: 600;
  letter-spacing: var(--v2-tighter);
  line-height: 1.2;
  color: var(--v2-ink);
  text-transform: none;
}

/* Give the two regions real air between them so the page reads as two parts
   rather than one long scroll. */
html[data-ui='v2'][data-v2] .home-opportunity-intro { margin-top: var(--v2-s9); }
html[data-ui='v2'][data-v2] .hoi-title { margin-bottom: var(--v2-s2); }

/* ---- 2 · Board › universe › panel -------------------------------------- */

/* The board is the page's second region — it gets the largest of the three. */
html[data-ui='v2'][data-v2] .mb-brand-t {
  font-size: var(--v2-t-lg);
  font-weight: 600;
  letter-spacing: var(--v2-wide);
  text-transform: uppercase;
  color: var(--v2-ink-3);
}

/* A universe is a chapter. Bigger than its panels, quieter than the board. */
html[data-ui='v2'][data-v2] .mb-uni-card-title {
  font-size: var(--v2-t-md);
  font-weight: 600;
  letter-spacing: var(--v2-wide);
  text-transform: uppercase;
  color: var(--v2-ink-2);
}

/* ---- 3 · Panel titles as labels ---------------------------------------- */

html[data-ui='v2'][data-v2] .mb-panel-title {
  font-size: var(--v2-t-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .mb-panel-sub {
  font-size: var(--v2-t-xs);
  color: var(--v2-ink-4);
}
/* Label and its caption on one baseline, not stacked — saves a line per panel
   across twelve panels. */
html[data-ui='v2'][data-v2] .mb-panel-head {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s2);
  flex-wrap: wrap;
  margin-bottom: var(--v2-s3);
}

/* ---- 4 · Separate the two universes ------------------------------------ */

html[data-ui='v2'][data-v2] .mb-uni-card + .mb-uni-card { margin-top: var(--v2-s8); }
html[data-ui='v2'][data-v2] .mb-uni-card-head {
  padding-bottom: var(--v2-s3);
  margin-bottom: var(--v2-s4);
  border-bottom: 1px solid var(--v2-line);
}

/* ---- 5 · Let the numbers breathe --------------------------------------- */

/* Figures are the reason this page exists; give them the ink and let the
   labels recede. */
html[data-ui='v2'][data-v2] .mb-stat-value,
html[data-ui='v2'][data-v2] .mb-mval,
html[data-ui='v2'][data-v2] .mb-brd-val {
  color: var(--v2-ink);
  font-variant-numeric: tabular-nums;
}
html[data-ui='v2'][data-v2] .mb-stat-label,
html[data-ui='v2'][data-v2] .mb-brd-label { color: var(--v2-ink-3); }

/* Panels inside a universe card are regions, not cards — hairline separated. */
html[data-ui='v2'][data-v2] .mb-uni-card .mb-panel + .mb-panel {
  padding-top: var(--v2-s5);
  margin-top: var(--v2-s5);
  border-top: 1px solid var(--v2-line);
}