/* ==========================================================================
   HomeEqual — light theme refinement
   Shared by every static marketing page in public/*.html.

   Why this file exists
   --------------------
   The design-tool export ships a light mode derived from the dark palette:
   a warm beige canvas (#F6F4EF) under a cool blue-grey hero, near-white
   panels that never separate from it, a full-page scanline film, and a few
   blanket `[style*="…"]` overrides that fire on whatever inline style
   happens to contain the matched substring. On a light canvas that reads
   washed out and dingy.

   This layer replaces the palette with an "institutional paper" system —
   cool paper canvas, pure-white raised panels, near-black navy ink, one
   teal accent — restores type contrast, and gives the dark "terminal"
   islands a real elevation instead of an offset outline ring.

   Cascade note
   ------------
   Each page's <style> is injected into <head> by the dc-runtime AFTER this
   file loads, so equal-specificity rules there would win. Everything below
   is written `html:root[data-theme="light"]` — (0,2,1) — to out-rank the
   export's `html[data-theme="light"]` — (0,1,1) — even if a future re-export
   reintroduces the old block. Dark mode is never touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Palette
   Superset of the tokens the individual pages declare (index/heloc/about/…
   use --panel-hov/--plate, purchase uses --line/--soft, loan-officers uses
   --muted/--panel-2, mls uses --amber, refinance uses --warn).
   -------------------------------------------------------------------------- */
html:root[data-theme="light"] {
  color-scheme: light;

  /* surfaces — page is off-white, panels are pure white, so a panel always
     reads as raised (mirrors the dark theme, where --panel is lighter than
     --bg rather than darker) */
  --bg: #F2F5F9;
  --bg-rgb: 242, 245, 249;
  --panel: #FFFFFF;
  --panel-hov: #EDF2F8;
  --panel-2: #E6ECF4;
  --plate: #E4EAF2;
  /* --footer stays dark in both themes: every page except loan-officers.html
     hardcodes #04060A on <footer>, and loan-officers' footer type is a fixed
     light ink — a light --footer there renders white-on-white. */
  --footer: #04060A;

  /* ink — darker and slightly blue so every rgba(--ink-rgb, α) muted tone in
     the markup lands at ≥5.5:1 without touching a single inline style */
  --ink: #0C1420;
  --ink-rgb: 12, 20, 32;
  --muted: #4C5766;
  --soft: rgba(12, 20, 32, .68);
  --line: rgba(12, 20, 32, .14);

  /* accent — unchanged hue; 5.4:1 on paper, 6.6:1 for the link tone */
  --accent: #006B92;
  --accent-rgb: 0, 107, 146;
  --accent-2: #075F7A;
  --accent-3: #004C68;
  --accent-hov: #005F80;
  --on-accent: #FFFFFF;

  /* Warm secondary. Measured across the full page, 80% of all chroma sat in a
     single cool family (cyan + azure) — the page had no temperature contrast at
     all, which is most of why it read cold next to the dark theme (41% cyan /
     27% red / 14% orange there, from the sunset).
     This is not decoration: it carries a rule. TEAL means you can act on it —
     links, CTAs, the equal mark. BRONZE means it is an index or a figure. One
     look tells you which. 6.0:1 on paper, so it is legible at 11px mono. */
  --warm: #8A5E06;
  --warm-rgb: 138, 94, 6;

  /* status colors, darkened for a light canvas (the export's values were
     tuned against #05070B and drop under 4:1 on paper) */
  --green: #0A7A55;
  --amber: #8A5E06;
  --warn: #A3401D;
}

/* The one remaining sub-4.5:1 text tone in the markup. Both spellings are
   listed because the runtime re-serializes inline styles with a space after
   the property colon; the source HTML has none. */
html:root[data-theme="light"] [style*="color:rgba(var(--ink-rgb),.5)"],
html:root[data-theme="light"] [style*="color: rgba(var(--ink-rgb),.5)"] {
  color: rgba(var(--ink-rgb), .66) !important;
}
html:root[data-theme="light"] [style*="color:rgba(var(--accent-rgb),.5"],
html:root[data-theme="light"] [style*="color: rgba(var(--accent-rgb),.5"] {
  color: var(--accent-2) !important;
}

/* --------------------------------------------------------------------------
   2 — Undo the export's light-mode hacks
   (also removed from the pages themselves; kept here so a re-export can't
   quietly bring them back)
   -------------------------------------------------------------------------- */

/* full-page scanline film — the single biggest source of the "dirty" look */
html:root[data-theme="light"] body::after {
  content: none !important;
  display: none !important;
}

/* `[style*="clamp(34px"]` painted every 34px-clamped element accent-blue,
   which is why "FL" was blue while "50 STATES" and "14 DAYS" were black.
   Numerals now inherit their own inline color, as they do in dark mode. */

/* --------------------------------------------------------------------------
   3 — Elevation
   One shadow language: a tight contact shadow plus a wide, soft ambient one.
   -------------------------------------------------------------------------- */
html:root[data-theme="light"] [style*="box-shadow"] {
  box-shadow:
    0 1px 2px rgba(12, 20, 32, .05),
    0 16px 40px -20px rgba(12, 20, 32, .30) !important;
}

/* Inside a dark island the inline shadows are accent glows (the live step dot
   on /apply), not elevation — the paper shadow above would erase them. */
html:root[data-theme="light"] [data-dark] [style*="box-shadow"] {
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .6) !important;
}

/* Dark "terminal" islands sitting on paper. The export ringed them with
   `outline: 1px solid …; outline-offset: 7px`, which reads as a focus ring
   or a rendering artifact. They are product surfaces — float them instead. */
html:root[data-theme="light"] [data-dark] {
  outline: none !important;
  box-shadow:
    0 2px 8px rgba(12, 20, 32, .10),
    0 40px 80px -36px rgba(12, 20, 32, .58) !important;
}

/* Sticky header: hairline + a whisper of lift so it detaches from the hero
   photo it scrolls over.
   A hairline alone left the bar on the same visual plane as everything below
   it. Translucency + blur is what makes a header read as a layer ABOVE the
   page rather than the first row of it — the single cheapest depth cue on the
   whole document, and the one every reference site in this category uses. */
html:root[data-theme="light"] header {
  border-bottom-color: rgba(var(--ink-rgb), .09);
  background: rgba(var(--bg-rgb), .78) !important;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 6px 24px -14px rgba(12, 20, 32, .34);
}

/* --------------------------------------------------------------------------
   4 — Home hero
   Scoped to .hero-wrap (index only) so the purchase/refinance/loan-officers
   heroes, which share .hero-actions, are untouched.
   -------------------------------------------------------------------------- */
html:root[data-theme="light"] .hero-wrap {
  border-bottom: 1px solid rgba(var(--ink-rgb), .10);
}

/* The light hero art (assets/hero-franklin-light.webp) is a banknote engraving
   on cream paper with its left third deliberately empty.
   The previous wash carried up to 62% of the page background across 80% of the
   frame — over art that is already pale blue-grey on cream. Net effective
   contrast on the engraving was in the low teens, so the subject read as a
   printing defect rather than an image, and the panel had no light source for
   the eye to settle on. Dark mode never had this problem: its art is a graded
   photograph with a sunset in it.
   The wash now does the opposite of what it did — it goes DEEPER where the copy
   sits (better type contrast than before) and stops before it reaches the
   subject, so the art is allowed to be art. */
html:root[data-theme="light"] #home-hero {
  filter: contrast(1.13) saturate(1.16);
}
html:root[data-theme="light"] .hero-image-overlay {
  background:
    /* 1 — light source. A warm lift behind Franklin gives the panel a centre;
       without it every pixel sits between 85% and 100% lightness and the
       composition has nothing to fix on. */
    radial-gradient(115% 85% at 66% 40%,
      rgba(255, 252, 244, .50) 0%,
      rgba(255, 252, 244, .16) 34%,
      rgba(255, 252, 244, 0) 62%),
    /* 2 — copy scrim. Deeper than before but ends at 58% instead of 80%. */
    linear-gradient(96deg,
      rgba(var(--bg-rgb), .82) 0%,
      rgba(var(--bg-rgb), .66) 24%,
      rgba(var(--bg-rgb), .28) 42%,
      rgba(var(--bg-rgb), .04) 54%,
      rgba(var(--bg-rgb), 0) 58%),
    /* 3 — vignette. Frames the panel so it reads as a lit surface, not a swatch. */
    radial-gradient(135% 105% at 52% 44%,
      rgba(12, 26, 44, 0) 52%,
      rgba(12, 26, 44, .07) 78%,
      rgba(12, 26, 44, .16) 100%),
    /* 4 — seam into the disclosure strip below. */
    linear-gradient(180deg,
      rgba(var(--bg-rgb), .24) 0%,
      rgba(var(--bg-rgb), 0) 18%,
      rgba(var(--bg-rgb), 0) 64%,
      rgba(var(--bg-rgb), .68) 100%);
}

/* type — no halos */
html:root[data-theme="light"] .hero-shell > div,
html:root[data-theme="light"] .hero-intro-row {
  text-shadow: none !important;
}
html:root[data-theme="light"] .hero-title {
  color: var(--ink) !important;
  text-shadow: none !important;
}
html:root[data-theme="light"] .hero-title em {
  color: #00577A !important;
}
html:root[data-theme="light"] .hero-sub {
  color: #2A3543 !important;
  text-shadow: none !important;
}

/* kicker reads as a printed tab, not a translucent smudge */
html:root[data-theme="light"] .hero-kicker {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, .82);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(12, 20, 32, .06), 0 12px 28px -18px rgba(12, 20, 32, .5);
  backdrop-filter: blur(6px);
}

/* CTAs */
html:root[data-theme="light"] .hero-wrap .hero-actions a:first-child {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  box-shadow: 0 10px 26px -14px rgba(var(--accent-rgb), .8);
}
html:root[data-theme="light"] .hero-wrap .hero-actions a:last-child {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(var(--ink-rgb), .26) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(6px);
}
html:root[data-theme="light"] .hero-wrap .hero-actions a:last-child:hover {
  border-color: var(--accent) !important;
  color: var(--accent-3) !important;
}

/* --------------------------------------------------------------------------
   5 — Program-coverage band (index)
   The export authored this section dark-only — `data-dark="1"` plus a hardcoded
   #05070b background — so light mode stopped dead at a full-bleed black chapter
   in the middle of the page. It now follows the same rule as every other
   section: light copy column, dark terminal for the data display. The coverage
   matrix stays dark on purpose (it is the same object as the routing/equity
   terminals) but now floats on paper instead of dissolving into a band.
   -------------------------------------------------------------------------- */
/* THE PAGE'S ONE VALUE ANCHOR.
   Measured across the full document, every section background in light mode sat
   at L=245 and the median pixel lightness was 0.96 — over half the page at 96%
   white or brighter, with no chapter break anywhere. That is what reads as
   lifeless: not an absence of hue, an absence of range.

   The export originally shipped this section dark and it was flattened to paper
   because the execution was a raw #05070b slab that stopped the page dead. The
   answer was never "make it white" — it was "make it a considered chapter".
   #0E1B2B is a deep navy that belongs to the same family as the ink, at L=38.

   This works by re-pointing the section's own token block rather than rewriting
   the ~20 descendant rules below: they all resolve through var(--ink) /
   var(--panel) / var(--accent), so inverting the tokens inverts the section.
   The accent is lifted to #56B6DB because #006B92 on navy is 1.6:1. */
html:root[data-theme="light"] .coverage-section {
  --bg: #0E1B2B;
  --bg-rgb: 14, 27, 43;
  --panel: #16283C;
  --panel-hov: #1D3149;
  --plate: #1D3149;
  --ink: #E8EEF5;
  --ink-rgb: 232, 238, 245;
  --accent: #56B6DB;
  --accent-rgb: 86, 182, 219;
  --accent-2: #7ACBE8;
  --accent-3: #A5DCF0;
  --accent-hov: #7ACBE8;
  --on-accent: #06131F;
  --green: #5FD6A4;

  background: var(--bg);
  color: var(--ink);
  border-bottom-color: rgba(255, 255, 255, .10);
  /* a full-bleed band does not float — cancels the dark-island elevation */
  box-shadow: none !important;
}
html:root[data-theme="light"] .coverage-section::before {
  background: radial-gradient(circle, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), 0) 68%);
}
html:root[data-theme="light"] .coverage-eyebrow { color: rgba(var(--ink-rgb), .66); }
html:root[data-theme="light"] .coverage-eyebrow::before { background: var(--accent); }
html:root[data-theme="light"] .coverage-kicker { color: var(--accent-2); }
html:root[data-theme="light"] .coverage-lead { color: rgba(var(--ink-rgb), .72); }
html:root[data-theme="light"] .coverage-phrase { color: var(--ink); }
html:root[data-theme="light"] .coverage-metrics {
  background: rgba(var(--ink-rgb), .12);
  border-color: rgba(var(--ink-rgb), .12);
}
html:root[data-theme="light"] .coverage-metric { background: var(--panel); }
html:root[data-theme="light"] .coverage-metric strong { color: var(--ink); }
html:root[data-theme="light"] .coverage-metric span { color: rgba(var(--ink-rgb), .66); }
html:root[data-theme="light"] .coverage-action {
  background: var(--panel);
  border-color: rgba(var(--accent-rgb), .42);
  color: var(--accent-2);
}
html:root[data-theme="light"] .coverage-action:hover {
  border-color: var(--accent);
  color: var(--accent-3);
}
html:root[data-theme="light"] .coverage-action--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 26px -14px rgba(var(--accent-rgb), .8);
}
html:root[data-theme="light"] .coverage-action--primary:hover {
  background: var(--accent-hov);
  color: var(--on-accent);
}
html:root[data-theme="light"] .coverage-terminal {
  border-color: rgba(12, 20, 32, .16);
  box-shadow:
    0 2px 8px rgba(12, 20, 32, .10),
    0 40px 80px -36px rgba(12, 20, 32, .58);
}
html:root[data-theme="light"] .coverage-summary { background: rgba(var(--ink-rgb), .12); }
html:root[data-theme="light"] .coverage-summary div { background: var(--panel); }
html:root[data-theme="light"] .coverage-summary dt { color: var(--accent-2); }
html:root[data-theme="light"] .coverage-summary dd { color: rgba(var(--ink-rgb), .72); }
html:root[data-theme="light"] .coverage-disclosure {
  border-top-color: rgba(var(--ink-rgb), .12);
  color: rgba(var(--ink-rgb), .68);
}

/* --------------------------------------------------------------------------
   6 — Proof band + welcome ticker (index, about)
   Four figures in a bare 4-up grid with hairlines: on the dark canvas the glow
   carries it, on paper it reads as an unfinished table. The band becomes a
   printed data plate — white surface, an accent rule per cell, one type size
   across all four figures, and labels pinned to a shared baseline so the row
   stops looking ragged. `[data-mq="g2"]` is the only stable hook the export
   gives this component (the markup is inline-styled and class-less).
   -------------------------------------------------------------------------- */
/* hero → tinted fine-print bar → white data plate → paper ticker, so the plate
   is a distinct object instead of more of the same white */
html:root[data-theme="light"] div:has(> div > .hero-fine) {
  /* !important: the strip carries background:var(--panel) inline */
  background: var(--panel-hov) !important;
  border-bottom-color: rgba(var(--ink-rgb), .10);
}

/* The disclosure has to be here and it has to be complete — it is the NMLS
   licence line and the "not a commitment to lend" language, and neither is
   optional. What was optional was its WEIGHT: ~200 words of tracked monospace
   at .68 ink, full-bleed directly under the headline, made the loudest thing
   on the fold a hedge. Same words, same position, read as a footnote. */
html:root[data-theme="light"] .hero-fine {
  color: rgba(var(--ink-rgb), .5) !important;
  font-size: 10px !important;
  line-height: 1.85 !important;
  letter-spacing: .055em !important;
}
html:root[data-theme="light"] div:has(> [data-mq="g2"]) {
  position: relative;
  z-index: 1;
  background: var(--panel);
  border-bottom-color: rgba(var(--ink-rgb), .10);
  /* lifts the plate off the paper instead of leaving it flush between two
     near-white surfaces */
  box-shadow: 0 22px 44px -34px rgba(12, 20, 32, .55);
}
/* brand rule along the top edge — the plate reads as an instrument panel */
html:root[data-theme="light"] div:has(> [data-mq="g2"])::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .12));
}
html:root[data-theme="light"] [data-mq="g2"] {
  counter-reset: heStat;
}
html:root[data-theme="light"] [data-mq="g2"] > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  counter-increment: heStat;
  padding-top: 38px !important;
  padding-bottom: 40px !important;
  border-right-color: rgba(var(--ink-rgb), .13);
}
/* index each cell the way the capability cards below already are (01/02/03 in
   accent mono) — a numbered series instead of a stray rule */
html:root[data-theme="light"] [data-mq="g2"] > div::before {
  content: "0" counter(heStat);
  display: block;
  margin-bottom: 22px;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--warm);
}
/* Figures move to the display face. Spline Sans Mono only ships 400/500, so a
   44px figure on white paper is a thin, spindly line — it reads as terminal
   output rather than a headline number. Instrument Sans is already loaded
   variable 400..700; at 600 the figures carry the band, and the mono labels
   below them become the caption they were always meant to be. The export's
   per-cell clamps (31px vs 34px) are also why "FL" towered over "50 STATES" —
   one size now. Colors stay inline, so "=" keeps its accent. */
html:root[data-theme="light"] [data-mq="g2"] > div > div:first-of-type {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: clamp(32px, 3.4vw, 48px) !important;
  font-weight: 600 !important;
  line-height: 1;
  letter-spacing: -.022em;
  word-spacing: .08em;
}
/* "=" is a short glyph — at the shared size it reads as an afterthought next to
   the word-figures, so give it the optical weight the others have */
html:root[data-theme="light"] [data-mq="g2"] > div:last-child > div:first-of-type {
  font-size: clamp(42px, 4.4vw, 62px) !important;
  line-height: .78;
}
html:root[data-theme="light"] [data-mq="g2"] > div > div:last-of-type {
  margin-top: 18px !important;
  font-size: 11px !important;
  line-height: 1.62;
  letter-spacing: .14em;
  color: rgba(var(--ink-rgb), .70) !important;
}

/* welcome ticker — words now emerge and exit through a fade instead of being
   guillotined at the viewport edge */
html:root[data-theme="light"] div:has(> [style*="heMarq"]) {
  padding: 22px 0 !important;
  border-bottom-color: rgba(var(--ink-rgb), .10);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* The borrower-paths photography is deliberately left ungraded. A morning
   grade (exposure lift + dawn wash over the dusk frames) was tried and pulled:
   it washed the frames out. Those photos need new source images to read as
   morning, not a filter. */

/* --------------------------------------------------------------------------
   7 — Capability cards
   These are links, and they do not react to the pointer at all: the export
   ships `style-hover="background:rgba(var(--ink-rgb),.025)"` on each one, but
   the runtime strips the attribute without implementing it, so all 74 of them
   sitewide are dead. The runtime does set `transition: all` on the elements,
   so state changes animate for free.

   Cards now sit on a white surface as a defined row, and lift toward the
   pointer with the brand rule sweeping across the top edge and the arrow
   stepping forward. :focus-visible gets the same treatment — the state is
   navigational, not decorative.
   -------------------------------------------------------------------------- */
html:root[data-theme="light"] [data-mq="g1"] > a {
  position: relative;
  background: var(--panel);
  border-right-color: rgba(var(--ink-rgb), .10);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, background .2s ease;
}
html:root[data-theme="light"] [data-mq="g1"] > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .12));
}
html:root[data-theme="light"] [data-mq="g1"] > a:hover,
html:root[data-theme="light"] [data-mq="g1"] > a:focus-visible {
  z-index: 2;
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(12, 20, 32, .05),
    0 28px 52px -26px rgba(12, 20, 32, .45);
}
html:root[data-theme="light"] [data-mq="g1"] > a:hover::before,
html:root[data-theme="light"] [data-mq="g1"] > a:focus-visible::before {
  transform: scaleX(1);
}
/* the "ENTER →" / "EXPLORE →" line is the card's only <span> */
html:root[data-theme="light"] [data-mq="g1"] > a > span {
  display: inline-block;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .2s ease;
}
html:root[data-theme="light"] [data-mq="g1"] > a:hover > span,
html:root[data-theme="light"] [data-mq="g1"] > a:focus-visible > span {
  transform: translateX(6px);
  color: var(--accent-3) !important;
}

/* a wash of brand color in the empty half of the section header, so the
   heading block is not a flat rectangle of paper */
html:root[data-theme="light"] div:has(> [data-mq="g1"] > a) {
  position: relative;
}
html:root[data-theme="light"] div:has(> [data-mq="g1"] > a)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -140px;
  right: -180px;
  width: 980px;
  height: 680px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), 0) 76%);
}

/* Section eyebrows ("/ 01 — CAPABILITIES") carry the brand color rather than
   another grey, which ties them to the 01/02/03 markers on the cards below.
   .22em tracking is the export's signature for this label. */
html:root[data-theme="light"] [style*="letter-spacing: 0.22em"],
html:root[data-theme="light"] [style*="letter-spacing:.22em"] {
  color: var(--accent-2) !important;
}

/* --------------------------------------------------------------------------
   8 — Details
   -------------------------------------------------------------------------- */

/* welcome marquee — the accent text-stroke is a glow trick for dark mode; on
   paper it hollows the words out */
html:root[data-theme="light"] [style*="heMarq"] {
  -webkit-text-stroke: 0 !important;
  color: rgba(var(--ink-rgb), .62) !important;
}

/* Range tracks need a touch more weight on paper than on ink. .equity-range is
   excluded: it lives inside a dark card and is styled in components.css, and
   this rule would otherwise tie with it on specificity. */
html:root[data-theme="light"] input[type="range"]:not(.equity-range)::-webkit-slider-runnable-track {
  background: rgba(var(--ink-rgb), .22);
}
html:root[data-theme="light"] input[type="range"]:not(.equity-range)::-moz-range-track {
  background: rgba(var(--ink-rgb), .22);
}

/* selection stays legible over the paler accent wash */
html:root[data-theme="light"] ::selection {
  background: rgba(var(--accent-rgb), .22);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Hero live card + proof strip — light
   components.css lays these out for the dark canvas they were designed on. On
   paper the card's rgba(9,17,28,.58) surface reads as a grey slab dropped on
   the engraving, so it gets a proper light treatment: white glass, ink type,
   and a shadow soft enough to lift without bruising the art under it.
   -------------------------------------------------------------------------- */
html:root[data-theme="light"] .hero-live-card {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(var(--ink-rgb), .12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 6px -2px rgba(12, 20, 32, .10),
    0 22px 48px -26px rgba(12, 20, 32, .55);
}
html:root[data-theme="light"] .hero-live-card:hover {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 6px -2px rgba(12, 20, 32, .12),
    0 28px 60px -26px rgba(12, 20, 32, .6);
}
html:root[data-theme="light"] .hero-live-badge {
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent-3, var(--accent));
}
html:root[data-theme="light"] .hero-live-copy strong { color: var(--ink); }
html:root[data-theme="light"] .hero-live-copy span   { color: rgba(var(--ink-rgb), .6); }
html:root[data-theme="light"] .hero-live-go {
  background: var(--accent);
  color: var(--on-accent);
}


/* --------------------------------------------------------------------------
   Warm secondary — application
   Teal = interactive. Bronze = index / figure. Nothing else changes hue.
   -------------------------------------------------------------------------- */

/* Capability card markers 01 / 02 / 03. Inline-styled, hence the attribute
   match and !important — the same technique used at the top of this file.
   Scoped away from .coverage-section, whose token block is now a dark chapter
   where bronze would fall to 2.4:1. */
html:root[data-theme="light"] [data-mq="g1"] > a[data-mq="pxc"] > div:first-child {
  color: var(--warm) !important;
}

/* The proof strip's lead. It is a label, not a link, and it runs the full width
   directly under the hero — the one place a warm note registers at page scale
   rather than as a detail. */
html:root[data-theme="light"] .hero-proof-lead {
  color: var(--warm);
}
