/* ============================================================================
   [n]dowed — Site Enhancements (shared)
   Loaded LAST in every <head> so it overrides each page's inline <style>.
   Centralizes the June 2026 readability / hyperlink / mobile / citation
   improvements from the website review so they apply across all pages at once.
   ============================================================================ */

/* ── 1. Brighter body text ───────────────────────────────────────────────────
   The review asked for brighter / whiter type for readability on the dark
   theme. Pages define --silver/--muted at different (often dim) values; we
   lift them to a single, higher-contrast palette here. Because this rule loads
   after the inline <style>, it wins the cascade. */
:root {
  --silver: #C2CCBC;   /* primary body text — was ~#8A9685 / #A8B4A0 */
  --muted:  #97A491;   /* secondary/label text — was ~#5C6D58 / #6B7D68 */
  --link:   #7FB0E6;   /* readable blue for links on the dark background */
  --link-hover: #A7CBF1;
}

/* ── 2. Obvious hyperlinks ───────────────────────────────────────────────────
   Inline prose links should be unmistakably links: underlined + blue.
   Scoped to body copy so navigation, button CTAs, logo links and card links
   (which deliberately remove underlines) are left untouched. */
p a,
li a,
.section-lead a,
.hero-sub a,
.what-body a,
.how-step-body a,
.fine-print a,
.site-footnotes a,
.prose a {
  color: var(--link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
p a:hover,
li a:hover,
.section-lead a:hover,
.hero-sub a:hover,
.what-body a:hover,
.how-step-body a:hover,
.fine-print a:hover,
.site-footnotes a:hover,
.prose a:hover {
  color: var(--link-hover) !important;
}

/* Navigation links live inside <li> too, but they are NOT prose links — keep
   them un-underlined and on their own color scheme (overrides the rule above). */
.ndwtop a { text-decoration: none !important; }
.ndwtop-link { color: var(--ndw-cream) !important; }
.ndwtop-link:hover,
.ndwtop-item.open > .ndwtop-link,
.ndwtop-item.has-menu:hover > .ndwtop-link { color: var(--ndw-gold-light) !important; }
.ndwtop-item.active > .ndwtop-link { color: var(--ndw-gold) !important; }
.ndwtop-drop a { color: inherit !important; }
.ndwtop-cta { color: var(--ndw-ink) !important; }

/* ── 3. Larger type on key sections ──────────────────────────────────────────
   "How it works" and section leads were called out as too small. */
.section-lead { font-size: 18.5px !important; line-height: 1.8 !important; }
.how-step-title { font-size: 19px !important; }
.how-step-body { font-size: 15px !important; line-height: 1.75 !important; }

/* ── 4. Citation markers & fine print ────────────────────────────────────────
   Superscript reference markers used next to performance claims (1–5×, 8%). */
sup.cite {
  font-size: 0.5em;        /* ~half the host text — standard for citation markers */
  line-height: 0;
  position: relative;
  top: -0.55em;            /* lift without inflating the line box */
  vertical-align: baseline;
  color: var(--gold-light, #E5C97A);
  font-weight: 600;
  margin-left: 1px;
}
/* Cap the marker on very large display numbers (hero stats, big values) so it
   stays a small, unobtrusive reference rather than scaling up with the figure. */
.hero-stat-val sup.cite,
.what-highlight sup.cite,
.benefit-highlight sup.cite,
.info-bn-value sup.cite,
.stat-val sup.cite { font-size: 0.32em; top: -1.1em; }
sup.cite a { color: inherit !important; text-decoration: none !important; }

.site-footnotes {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 40px 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.site-footnotes h3 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 14px;
  font-weight: 500;
}
.site-footnotes ol { margin: 0; padding-left: 18px; }
.site-footnotes li { margin-bottom: 8px; }
.site-footnotes li::marker { color: var(--gold-light, #E5C97A); }

/* ── 5. Mobile responsiveness ────────────────────────────────────────────────
   Force the homepage's inline multi-column grids to stack on small screens.
   !important is required because the columns are set via inline style attrs. */
@media (max-width: 720px) {
  #how-overview > .section-inner > div[style*="grid-template-columns"],
  #scenarios > .section-inner > div[style*="grid-template-columns"],
  #stakeholders > .section-inner > div[style*="grid-template-columns"],
  #the-problem > .section-inner > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .section-lead { font-size: 17px !important; }
  .site-footnotes { padding: 32px 22px 8px; }
}

@media (max-width: 480px) {
  .hero h1 { line-height: 1.08; }
  /* Avoid horizontal overflow from wide inline-styled tables/cards */
  .section-inner { overflow-x: hidden; }
}
