/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · light theme · /partner   (the $1,000 referral page)
   The dark theme is a "monochrome pass" built on !important, so this layer uses it too.
   hero ........ the figure is the whole page: huge ink numeral, a faint lavender/peach wash where the dark theme has glows
   steps ....... three hairline cards on white, dashed connectors in ink at low alpha
   ══════════════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .ref-hero { background: linear-gradient(180deg, transparent 72%, #fff 100%), radial-gradient(90% 70% at 50% 0%, #ffffff 0%, #f7f7f8 52%, #efeff1 100%); }
html[data-theme="light"] .ref-hero::before { opacity: .045; mix-blend-mode: multiply; }
html[data-theme="light"] .ref-hero::after { background: var(--lt-line); }
html[data-theme="light"] .ref-amount { color: var(--lt-ink) !important; text-shadow: none; }
html[data-theme="light"] .ref-per { color: #55555c !important; }   /* AA on the studio ground, which is a touch greyer than plain white */
html[data-theme="light"] .ref-hero-body { color: var(--lt-body) !important; }
html[data-theme="light"] .ref-hero-note { color: var(--lt-meta) !important; }
/* the single commit action on the page (email the intro): the deep-ember CTA with white text, the same rule as the nav CTA and the contact submit. Tried an orange numeral too: it reads
   as a payout banner; the ink numeral is the quieter, more credible one, and the dark theme's monochrome pass says the same. */
html[data-theme="light"] .ref-hero-cta {
  background: var(--lt-cta) !important; color: var(--lt-cta-fg) !important; border: 1px solid var(--lt-cta); border-radius: 768px !important; box-shadow: var(--lt-cta-sh) !important;
}
html[data-theme="light"] .ref-hero-cta:hover { background: var(--lt-cta-hover) !important; border-color: var(--lt-cta-hover); box-shadow: var(--lt-cta-sh-h) !important; }
html[data-theme="light"] .ref-hero-cta svg rect, html[data-theme="light"] .ref-hero-cta svg path { stroke: var(--lt-cta-fg) !important; }

html[data-theme="light"] .ref-hiw { background: #fff !important; }
html[data-theme="light"] .ref-hiw-eyebrow { color: var(--lt-meta) !important; }
html[data-theme="light"] .ref-hiw-hdr h2 { color: var(--lt-ink) !important; }
html[data-theme="light"] .ref-step { background: #f7f7f8 !important; border: 1px solid var(--lt-line) !important; box-shadow: none !important; }
html[data-theme="light"] .ref-step:hover { background: #fff !important; border-color: var(--lt-line-2) !important; box-shadow: 0 24px 50px -26px rgba(14, 14, 14, .22) !important; }
html[data-theme="light"] .ref-step-icon { background: #fff !important; box-shadow: inset 0 0 0 1px var(--lt-line); }
html[data-theme="light"] .ref-step-icon svg { stroke: var(--lt-ink) !important; }
html[data-theme="light"] .ref-step h3 { color: var(--lt-ink) !important; }
html[data-theme="light"] .ref-step p { color: var(--lt-body) !important; }
html[data-theme="light"] .ref-step-conn svg { opacity: .5 !important; }
html[data-theme="light"] .ref-step-conn svg path, html[data-theme="light"] .ref-step-conn svg line { stroke: rgba(14, 14, 14, .55) !important; }