/* ═══════════════════════════════════════════════════════════════════════════
   RD-HERO-V2 — the homepage hero rebuild (2026-07-27).

   Loaded LAST so it wins over score-machine.css without forking it. It extends
   the rd-night.css token spine; it does not introduce a second design system.

   WHAT IT FIXES, each one a measurement from the baseline run (18/38 gates):
     · the product card sat at 847px on a 844px viewport, so a phone visitor saw
       ZERO product. The card now comes SECOND in source order on mobile and the
       column above it is budgeted so the card lands inside the first screen.
     · 136 words above the fold at 1440, 64 at 390. Target is 45.
     · text at 8.5 / 9 / 10 / 10.5 / 11px, some at 1:1 and 2.03:1 contrast.
       Floor is now 12px in the hero and 13px inside the card, all >= 4.5:1.
     · the score numeral resolved to rgba(0,0,0,0) mid-animation and depended on
       background-clip:text to exist at all. It now has a real opaque colour and
       the gradient is enhancement only, behind @supports.
     · two concentric ring treatments around one card read as artifacts. One
       instrument now: the gauge. The constellation canvas is gone from the hero.
     · the accent belonged to a secondary headline line, so the eye landed on the
       wrong sentence. The headline is now one colour, full ink; teal belongs to
       the control.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE CLAIM ────────────────────────────────────────────────────────── */
.nw-h1 {
  font-family: var(--disp);
  font-weight: 500;                    /* Fraunces is declared 400-600; never ask for 700 */
  font-size: clamp(38px, 7.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--nw-ink);                /* one colour, 18.0:1 on --nw-bg */
  margin: 0;
  text-wrap: balance;
}
.nw-h1 .st {
  display: inline;
  color: var(--nw-ink) !important;     /* was --nw-ink3 #7A89A6 = 5.73:1, the FAINTEST ink token
                                          on the most important sentence on the site. Now 18.0:1. */
  font-weight: 500;
}
.nw-h1 .pay { display: none; }         /* the second, teal line is retired */

.nw-lede {
  font: 400 clamp(16px, 1.9vw, 20px)/1.5 var(--ui);
  color: var(--nw-ink2);
  max-width: 30ch;
  margin: 18px 0 0;
}
.nw-lede b { color: var(--nw-ink); font-weight: 600; font-family: var(--mono); font-size: .96em; }

/* ── 2. THE CONTROL ──────────────────────────────────────────────────────── */
#hf { margin-top: clamp(22px, 3vw, 30px); }

.hv2-spec {
  margin: 10px 2px 0;
  font: 500 13px/1.5 var(--ui);
  color: var(--nw-ink2);               /* 6.1:1, was --nw-ink3 at 10px */
  letter-spacing: .005em;
}
.hv2-spec a { color: var(--nw-teal); text-decoration: none; border-bottom: 1px solid rgba(22,224,200,.35); }
.hv2-spec a:hover { border-bottom-color: var(--nw-teal); }

/* ── 3. THE INSTRUMENT ───────────────────────────────────────────────────── */
/* One ring only. The card's own conic border and the field bezel were two
   concentric treatments around a single object, which is what read as noise. */
.inst::before, .smx::before { display: none !important; }

/* Never blur or filter a node that shares a compositor layer with the sweeping
   arc; both of these forced a re-blur on every dirty frame of the animation. */
.smx .scorecard { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Type floor inside the card: nothing below 13px, nothing below 4.5:1. */
.smx .hgauge__scale { font-size: 13px !important; color: var(--nw-ink2) !important; letter-spacing: .06em; }
.smx .sc-uplift__lbl { font-size: 13px !important; color: var(--nw-gold) !important; letter-spacing: .04em; }
.smx .sc-uplift__sub { font-size: 13px !important; color: var(--nw-ink2) !important; }
.smx .sc-scope      { font-size: 13px !important; color: var(--nw-ink2) !important; }
.smx .sc-identity, .smx .sc-identity__npi, .smx #sc-specialty, .smx #sc-state {
  font-size: 13.5px !important; color: var(--nw-ink2) !important;
}
.smx .sc-rate-panel__code, .smx .sc-rate-panel__payer { font-size: 13px !important; color: var(--nw-ink2) !important; }
.smx .sc-legend__it { font-size: 13px !important; color: var(--nw-ink2) !important; }
.smx .sc-legend__it b { color: var(--nw-ink) !important; font-weight: 650; }
.smx .sc-insight { font-size: 13.5px !important; color: var(--nw-ink2) !important; }
.smx .sc-btn-yours { font-size: 14px !important; }
.smx .sc-sample-tag, .smx .scorecard__live { font-size: 12px !important; color: var(--nw-ink2) !important; }
.smx .scorecard__brand { font-size: 14px !important; color: var(--nw-ink) !important; }

/* THE SCORE NUMERAL. A real colour first; the gradient is enhancement only, so
   the most important number on the page can never resolve to transparent. */
.smx .hgauge__num,
.smx .sc-uplift__val {
  color: var(--nw-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
.smx .hgauge__num { font-size: clamp(40px, 5vw, 54px) !important; font-variant-numeric: tabular-nums; }
.smx .sc-uplift__val { font-size: clamp(28px, 3.4vw, 38px) !important; color: var(--nw-gold) !important; font-variant-numeric: tabular-nums; }

/* ── 4. THE FIRST SCREEN ─────────────────────────────────────────────────── */
/* Desktop: claim left, instrument right, both optically centred. */
@media (min-width: 941px) {
  .hero-grid { align-items: center; gap: clamp(32px, 4vw, 56px); }
}

/* Mobile is where the old hero failed hardest. Source order puts the words
   first for screen readers and for the LCP; the grid then lifts the card up so
   a 390x844 visitor sees the actual product without scrolling. */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .hv2-say { display: contents; }
  .nw-h1   { order: 1; }
  .nw-lede { order: 2; margin-top: 10px; max-width: 34ch; }
  .hero-grid { gap: 0 !important; }
  /* The field comes BEFORE the card on mobile. Budgeted so both land in the
     first screen at 390x844: claim ~120, lede ~66, field ~56, spec ~20, and the
     card still gets ~440px of runway. The instrument alone was not enough —
     the one primary ask cannot sit below the thing that motivates it. */
  #hf      { order: 3; margin-top: 18px; }
  .hv2-spec { margin-top: 8px; }
  #lockon  { min-height: 0; }
  .inst-wrap { order: 4; margin-top: 16px; }
}
@media (max-width: 940px) {
  /* budget the column so the card clears the fold */
  .nw-h1 { font-size: clamp(34px, 9.2vw, 46px); }
  .nw-lede { font-size: 16px; line-height: 1.45; }
  .smx .hgauge__num { font-size: 44px !important; }
  .smx .sc-insight, .smx .sc-actions { display: none; }   /* card stays compact above the fold */
}

/* The audience doors are no longer an above-the-fold question. */
.hero-doors { margin-top: 34px; }
.hero-doors .hd-lb { font-size: 12px !important; color: var(--nw-ink2) !important; }

/* ── 5. MOTION ───────────────────────────────────────────────────────────── */
/* The claim and the control are the LCP and the primary action; neither ever
   enters on opacity. Only the instrument reveals, once. */
.nw-h1.hnow, #hf.hnow { opacity: 1 !important; transform: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .inst-wrap, .nw-lede { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── 6. THE EMPTY STATE IS ALSO A DESIGN ─────────────────────────────────── */
/* Measured at 1.43:1 and 2.2:1. These are the strings a visitor sees BEFORE the
   card has data, i.e. the very first impression, and they were the least legible
   text on the page. */
.smx .sc-sample-tag { color: var(--nw-ink2) !important; border-color: rgba(159,176,204,.34) !important; }
.smx .sc-rate-panel__code { color: var(--nw-ink) !important; border-color: rgba(22,224,200,.34) !important; }
.smx .sc-btn-yours { color: var(--nw-teal) !important; }
.smx .sc-legend__it { color: var(--nw-ink2) !important; }

/* ── 7. THE COLLISION ────────────────────────────────────────────────────── */
/* Raising the card's type from 8.5-11px to 13px overflowed the two-column band:
   the uplift's qualifier ran under the gauge's scale label. The band aligns to
   the top now and the gauge column is fixed, so neither can climb into the other. */
.smx .sc-band { align-items: start !important; gap: 18px !important; }
.smx .sc-band__g { width: 132px !important; }
.smx .sc-uplift { min-width: 0; }
.smx .sc-uplift__sub { margin-top: 6px; line-height: 1.45; }
.smx .hgauge__scale { margin-top: 10px !important; white-space: normal !important; }

/* ── 8. THE FIRST SCREEN STARTS AT THE TOP OF THE SCREEN ─────────────────── */
/* --beat is 88px at <=640, and the section pad plus the wrap pad pushed the
   headline about 180px down a 844px viewport. That space was doing nothing. */
#instrument { padding-top: clamp(20px, 4vw, 44px) !important; }
@media (max-width: 940px) {
  #instrument { padding-top: 18px !important; padding-bottom: 34px !important; }
}

/* ── 9. ONE TEAL ─────────────────────────────────────────────────────────── */
/* score-machine.css still carries the legacy #00E5FF cyan as its --cyan token and
   in six places besides. The estate has one accent, #16E0C8. Collapsing it here
   rather than editing another lane's component file. */
.smx { --cyan: #16E0C8; }
.smx .scorecard { border-color: rgba(22,224,200,.26) !important; }
.smx .sc-rate-panel__code { background: rgba(22,224,200,.10) !important; border-color: rgba(22,224,200,.28) !important; }
.smx .sc-info:hover { border-color: rgba(22,224,200,.5) !important; }
.smx .sc-meter__mark--top::before { background: linear-gradient(180deg, #16E0C8, #14E09A) !important; box-shadow: 0 0 10px rgba(22,224,200,.6) !important; }
.smx .sc-legend__it--top i { background: #16E0C8 !important; }

/* ── 10. THE PAYWALL MARKS ARE ALSO TEXT ─────────────────────────────────── */
/* Only visible once live data loads, which is why they survived the empty-state
   pass: the PRO badge measured 8.5px at 1.32:1 and the redacted figure 11.5px.
   A gate mark a visitor cannot read is a gate that reads as a rendering fault. */
.smx .sm-protag {
  font-size: 11px !important;
  line-height: 1.4 !important;
  padding: 2px 7px !important;
  color: var(--nw-teal-ink) !important;
  background: var(--nw-teal) !important;
  border-color: transparent !important;
  letter-spacing: .08em;
  font-weight: 700 !important;
}
.smx .sc-legend__it b { font-size: 13px !important; }