/* ========================================================================
   AeolusGTM subpage layer — insights, articles, reports
   Extends /v3/assets/css/aeolus.css exactly the way /Assets/home.css does
   for the homepage: same grain, same nav dock behavior, same night-sky
   dark + warm-cream light treatments. Never redefine aeolus.css identity.
   Load order on every subpage:
     <link rel="stylesheet" href="/v3/assets/css/aeolus.css">
     <link rel="stylesheet" href="/Assets/site.css">
   ======================================================================== */

:root {
  --night: #070a12; /* same value as home.css --v10-night (hero/story base) */
}

/* Required brand grain: quiet enough to preserve contrast, fixed to avoid repaints. */
body::before {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

[id] { scroll-margin-top: 112px; }

/* Nav hardening — identical rationale to home.css: center via inset+auto
   margins (transform halves available width before layout), never wrap links. */
.site-nav { z-index: 300; }
.site-nav { left: 0; right: 0; transform: none; margin-inline: auto; width: fit-content; }
.site-nav .nav-logo { flex-shrink: 0; }
.site-nav .nav-links a { white-space: nowrap; }
.site-nav .nav-links li { flex-shrink: 0; }
.nav-burger { color: inherit; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
  border-radius: 6px;
}

.site-nav .nav-links a,
.footer-nav-list a { text-underline-offset: 4px; }

/* Mobile menu must be fully opaque (home.css parity). */
.mobile-menu { background: #0b101c; }
.mobile-menu a:not(.nav-cta) { color: var(--tx-on-dark); }
.mobile-menu a:not(.nav-cta):hover { color: var(--gold-bright); }

/* vertical rhythm (v8's tightened scale, same as home.css) */
main .section { padding-top: clamp(3rem, 4.6vw, 4.8rem); padding-bottom: clamp(3rem, 4.6vw, 4.8rem); }
main .sec-head { margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem); }

/* ------------------------------------------------------------------------
   Celestial seams (home.css parity) — the only sanctioned light/dark
   transition. seam-sunrise: night above → cream below (after a dark hero);
   seam-sunset: cream above → night below (before a dark CTA band).
   ------------------------------------------------------------------------ */
.seam { display: block; width: 100%; pointer-events: none; }
.seam-sunset { height: clamp(105px, 13.5vh, 165px);
  background:
    radial-gradient(1.3px 1.3px at 17% 90%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 85%,      rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 92%,      rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 81%,      rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 77%,      rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 74%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 46% at 50% 44%, rgba(243,208,106,0.14), transparent 60%),
    linear-gradient(to bottom,
      #F3EFE7 0%, #efe6d4 15%, #e6cda0 29%, #cfa066 42%, #9c7a52 53%,
      #5b5550 64%, #2e3550 76%, #16203a 88%, #0a0f1a 100%); }
.seam-sunrise { height: clamp(105px, 13.5vh, 165px);
  background:
    radial-gradient(1.3px 1.3px at 17% 10%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 15%,      rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 8%,       rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 19%,      rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 23%,      rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 26%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 46% at 50% 50%, rgba(243,208,106,0.14), transparent 60%),
    linear-gradient(to bottom,
      #0a0f1a 0%, #16203a 12%, #2e3550 24%, #5b5550 36%, #9c7a52 47%,
      #cfa066 58%, #e6cda0 71%, #efe6d4 85%, #F3EFE7 100%); }

/* Flatten a canvas section that borders a seam so the gradient meets a solid
   edge of the exact same value (the homepage's #seam-transitions technique). */
.canvas-flat-dark { background: var(--bg-dark) !important; }
.canvas-flat-dark::before, .canvas-flat-dark::after { content: none !important; }
.canvas-flat-light { background: var(--bg-atmospheric) !important; }
.canvas-flat-light::before, .canvas-flat-light::after { content: none !important; }

/* ------------------------------------------------------------------------
   Constellation hero (.hero-night) — the homepage hero treatment for
   subpage heroes: layered night sky, dense starfield, the dormant sails
   constellation (drawn in by site.js via /v3/assets/js/constellation-v3.js),
   and a bottom fade to FLAT var(--bg-dark) so the sections below (which
   must be .canvas-flat-dark solid) continue with no visible seam — the
   same technique the homepage uses for its dark runs.
   ------------------------------------------------------------------------ */
.hero-night {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(500px, 62vh, 680px);
}
.hero-night .sky-base {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 70% 32%, rgba(55,85,155,.08), transparent 70%),
    radial-gradient(ellipse 35% 30% at 60% 22%, rgba(75,55,135,.06), transparent 65%),
    radial-gradient(ellipse 55% 45% at 76% 52%, rgba(45,75,135,.05), transparent 72%),
    var(--bg-dark);
}
.hero-night .sky-stars {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 3% 7%,   rgba(254,254,254,.60), transparent 100%),
    radial-gradient(1px 1px at 7% 24%,       rgba(254,254,254,.32), transparent 100%),
    radial-gradient(1px 1px at 11% 48%,      rgba(254,254,254,.25), transparent 100%),
    radial-gradient(1.2px 1.2px at 5% 68%,   rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 14% 14%,      rgba(195,215,255,.28), transparent 100%),
    radial-gradient(1px 1px at 17% 55%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1px 1px at 21% 35%,      rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1.3px 1.3px at 2% 86%,   rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 24% 78%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1px 1px at 27% 6%,       rgba(195,215,255,.26), transparent 100%),
    radial-gradient(1px 1px at 31% 46%,      rgba(254,254,254,.20), transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 22%,  rgba(254,254,254,.42), transparent 100%),
    radial-gradient(1px 1px at 37% 70%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1px 1px at 41% 16%,      rgba(195,215,255,.24), transparent 100%),
    radial-gradient(1.4px 1.4px at 44% 52%,  rgba(254,254,254,.32), transparent 100%),
    radial-gradient(1px 1px at 47% 36%,      rgba(254,254,254,.24), transparent 100%),
    radial-gradient(1px 1px at 51% 84%,      rgba(254,254,254,.20), transparent 100%),
    radial-gradient(1.2px 1.2px at 54% 9%,   rgba(254,254,254,.45), transparent 100%),
    radial-gradient(1px 1px at 57% 60%,      rgba(254,254,254,.24), transparent 100%),
    radial-gradient(1px 1px at 61% 29%,      rgba(195,215,255,.30), transparent 100%),
    radial-gradient(1px 1px at 64% 48%,      rgba(254,254,254,.20), transparent 100%),
    radial-gradient(1.3px 1.3px at 67% 73%,  rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 71% 14%,      rgba(254,254,254,.42), transparent 100%),
    radial-gradient(1px 1px at 74% 40%,      rgba(195,215,255,.26), transparent 100%),
    radial-gradient(1.4px 1.4px at 77% 66%,  rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 81% 24%,      rgba(254,254,254,.28), transparent 100%),
    radial-gradient(1px 1px at 84% 53%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1.2px 1.2px at 87% 80%,  rgba(254,254,254,.32), transparent 100%),
    radial-gradient(1px 1px at 91% 33%,      rgba(195,215,255,.28), transparent 100%),
    radial-gradient(1px 1px at 94% 62%,      rgba(254,254,254,.24), transparent 100%),
    radial-gradient(1px 1px at 97% 11%,      rgba(254,254,254,.38), transparent 100%);
}
/* readability scrim behind the copy (left side) */
.hero-night .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 58% 82% at 17% 60%, rgba(6,9,16,.78), transparent 62%);
}
/* bottom fade back to the flat base so the next section continues seamlessly */
.hero-night::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,15,26,0), var(--bg-dark) 92%);
}
/* full width inside the flex hero — auto margins otherwise shrink-fit the
   inner and let long text paint past the viewport */
.hero-night .page-hero-inner { position: relative; z-index: 2; width: 100%; }

/* constellation: right portion, dormant until hovered (site.js draws it) */
.hero-night .constellation-wrap {
  position: absolute; left: 42%; right: 0; top: 0; bottom: 0;
  z-index: 1; pointer-events: none; opacity: .94; overflow: hidden;
}
.hero-night .constellation-inner { width: 100%; height: 100%; }
.hero-night .g-edges { opacity: .78; transition: filter 1.2s ease; }
.hero-night.lit .g-edges { filter: drop-shadow(0 0 5px rgba(243,208,106,.18)); }
.hero-night .g-trails { opacity: .26; transition: opacity 1.6s ease; }
.hero-night.lit .g-trails { opacity: .70; }
.hero-night .g-sur { opacity: .50; transition: opacity 1.4s ease; }
.hero-night.lit .g-sur { opacity: 1; }
.hero-night .g-stars { opacity: .82; transition: opacity 1.4s ease; }
.hero-night.lit .g-stars { opacity: 1; }
/* invisible hover zone over the sky (clear of nav + copy) */
.hero-night .sky-zone { position: absolute; left: 46%; top: 0; right: 0; bottom: 0; z-index: 3; }

@media (max-width: 920px) {
  .hero-night { min-height: 0; }
  .hero-night .constellation-wrap { left: 4%; opacity: .5; }
  .hero-night .sky-zone { display: none; }
  .hero-night .hero-scrim { background: radial-gradient(ellipse 130% 70% at 50% 70%, rgba(6,9,16,.82), transparent 68%); }
}

/* ------------------------------------------------------------------------
   Page hero — night sky header shared by articles, the insights hub and
   report landing pages. Rides on .aeolus-canvas-dark (starfield + glows).
   ------------------------------------------------------------------------ */
.page-hero {
  padding: clamp(8.5rem, 16vh, 11rem) var(--pad) clamp(3.2rem, 6vh, 4.5rem);
}
.page-hero-inner { max-width: var(--max); margin: 0 auto; }
.page-hero-inner.narrow { max-width: var(--max-article); }

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--tx-on-dark-3);
}
.crumbs a { color: var(--tx-on-dark-2); transition: color var(--transition-base); }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs .crumb-sep { color: var(--tx-on-dark-3); opacity: 0.6; }

.page-hero .hero-kicker {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--tx-on-dark-label);
}
.page-hero .hero-kicker::before { content: ""; width: 38px; height: 1px; background: var(--gold-bright); opacity: .6; }

.page-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--tx-on-dark);
  max-width: 24ch;
}
/* Headline split rule (sitewide): the gold italic <em> always sits on its own
   line(s) — never inline-wrapped into a white line. White line(s), then gold. */
.page-hero h1 em { display: block; font-style: italic; color: var(--gold-bright); text-shadow: 0 0 30px rgba(243,208,106,.22), 0 0 70px rgba(243,208,106,.10); }
.page-hero .hero-sub {
  margin: clamp(18px, 2.2vw, 26px) 0 0; max-width: 58ch;
  font-size: clamp(0.98rem, 1.1vw, 1.12rem); line-height: 1.66; color: var(--tx-on-dark-2); font-weight: 300;
}

.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem;
  margin-top: clamp(1.3rem, 2.4vw, 1.8rem);
  font-size: 0.8rem; letter-spacing: 0.03em; color: var(--tx-on-dark-3);
}
.article-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--tx-on-dark-3); opacity: 0.6; }
.article-meta .byline { color: var(--tx-on-dark-2); }

/* ------------------------------------------------------------------------
   Article canvas — warm cream reading surface. The typography primitives
   (.article-body, .pullquote, .data-table-wrap) live in aeolus.css.
   ------------------------------------------------------------------------ */
.article-section { padding: clamp(3.2rem, 6vw, 5rem) var(--pad); }
.article-body .article-close { font-weight: 600; color: var(--tx); }

/* ------------------------------------------------------------------------
   FAQ — native <details> accordion (home.css parity; base .faq-* in aeolus.css)
   ------------------------------------------------------------------------ */
.faq-head { max-width: var(--max-article); margin: 0 auto 1.8rem; }
.faq-item > summary { list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-item .faq-a { max-height: none; overflow: visible; }
.faq-item:not([open]) .faq-a { display: none; }
.faq-a-inner { padding-top: .1rem; }

/* ------------------------------------------------------------------------
   Dark CTA band — report CTA on articles, final CTA on hub/report pages.
   ------------------------------------------------------------------------ */
.cta-band { text-align: center; }
.cta-band-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.cta-band .label { display: block; margin-bottom: 1.1rem; }
.cta-band h2, .cta-band h3 { margin: 0 0 1.2rem; }
.cta-band .cta-sub { max-width: 54ch; margin: 0 auto 2rem; color: var(--tx-on-dark-2); font-size: clamp(0.95rem, 1.1vw, 1.08rem); line-height: 1.68; font-weight: 300; }
.cta-trust { display: flex; justify-content: center; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.cta-trust span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; color: var(--tx-on-dark-3); }
.cta-trust span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright); opacity: 0.6; }

/* ------------------------------------------------------------------------
   Insight cards (v7 treatment, shared with the homepage's Research section)
   ------------------------------------------------------------------------ */
.ins-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; max-width: 1040px; margin: 0 auto; }
@media (max-width: 820px) { .ins-grid { grid-template-columns: 1fr; } }
.ins-card { display: flex; flex-direction: column; padding: 1.6rem; min-height: 196px; text-decoration: none; }
.ins-card .label { margin-bottom: 0.9rem; }
.ins-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--tx); line-height: 1.2; margin: 0 0 0.6rem; }
.ins-card p { font-size: 0.9rem; line-height: 1.55; color: var(--tx2); flex: 1; margin: 0; }
.ins-card .read { margin-top: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--gold); }
.ins-card .read .arrow { transition: transform .3s var(--ease-spring); display: inline-block; }
.ins-card:hover .read .arrow { transform: translateX(5px); }

/* Hub variant: 2-across article cards (use when the card count is even). */
.ins-grid.ins-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .ins-grid.ins-grid-2 { grid-template-columns: 1fr; } }

/* Hub: featured (report) card spans the full row and reads as the flagship. */
.ins-grid .ins-featured { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2rem; min-height: 0; }
.ins-featured h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.ins-featured > div { flex: 1; }
@media (max-width: 820px) { .ins-grid .ins-featured { flex-direction: column; align-items: stretch; gap: 0; } }

/* Related insights — article footer grid (three cards, same card language) */
.related-section { padding: clamp(3rem, 5.5vw, 4.5rem) var(--pad); }
.related-inner { max-width: var(--max); margin: 0 auto; }
.related-inner > .label { display: block; margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------------
   Insight library (dark hub) — glass cards with an inset data-viz well.
   Card anatomy: .lib-meta (category · date · read time) → .lib-viz (chart)
   → h3 → .lib-preview (article hook, clamped) → .read
   ------------------------------------------------------------------------ */
.lib-section { padding-top: clamp(1rem, 2.4vw, 2rem); }
.lib-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.1rem, 1.8vw, 1.5rem);
  max-width: 1080px; margin: 0 auto;
}
.lib-card {
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2vw, 1.65rem);
  border-radius: 18px;
  background: rgba(16,24,44,0.45);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(254,254,254,0.09);
  box-shadow: var(--elev-dark-2), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--tx-on-dark);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-glass), border-color var(--transition-base);
}
.lib-card:hover {
  transform: translateY(-2px);
  border-color: rgba(243,208,106,0.38);
  box-shadow: var(--elev-dark-3), var(--shadow-dark-glow-gold), inset 0 1px 0 rgba(255,255,255,0.07);
}
.lib-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 1.1rem;
  font: 600 0.66rem/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-on-dark-3);
}
.lib-meta .lib-cat { color: var(--gold-bright); }
.lib-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--tx-on-dark-3); }

/* Headline sits ABOVE the viz. Reserve two lines so every card's chart,
   preview and read-link land at the same heights across a row. */
.lib-card h3 {
  margin: 0 0 1rem;
  min-height: 2.4em;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -0.012em;
  color: var(--tx-on-dark);
}
.lib-preview {
  margin: 0; flex: 1;
  font-size: 0.9rem; line-height: 1.62; font-weight: 300;
  color: var(--tx-on-dark-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-card .read { margin-top: 1.15rem; font: 600 0.8rem/1 var(--font-body); color: var(--gold-bright); }
.lib-card .read .arrow { display: inline-block; transition: transform .3s var(--ease-spring); }
.lib-card:hover .read .arrow { transform: translateX(5px); }

/* The viz well — recessed panel the mini-chart sits in. Fixed min-height so
   every card's chart block is the same size; .viz-body centers the chart. */
.lib-viz {
  display: flex; flex-direction: column;
  min-height: 168px;
  margin-bottom: 1.15rem;
  padding: 0.95rem 1.05rem 1.05rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--inset-dark);
}
.viz-label {
  display: block; margin-bottom: 0.85rem;
  font: 700 0.6rem/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tx-on-dark-label);
}
.viz-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Status rows: field on the left, colored verdict on the right */
.viz-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.viz-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  font: 500 0.78rem/1.2 var(--font-body); color: var(--tx-on-dark-2);
}
.viz-row b { font: 700 0.62rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.viz-row b.crit { color: var(--sev-critical); }
.viz-row b.warn { color: var(--sev-warning); }
.viz-row b.okay { color: var(--connected-green); }

/* Gauge rows: label + value, gold (or red .bad) bar underneath */
.viz-gauge { display: flex; flex-direction: column; gap: 0.7rem; }
.viz-g .g-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.35rem;
  font: 500 0.76rem/1.2 var(--font-body); color: var(--tx-on-dark-2);
}
.viz-g .g-top b { font: 600 0.9rem/1 var(--font-body); color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.viz-g i {
  display: block; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.viz-g i::after {
  content: ""; position: absolute; inset: 0; width: var(--w, 50%);
  border-radius: 999px; background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(243,208,106,0.35);
}
.viz-g.bad .g-top b { color: var(--sev-critical); }
.viz-g.bad i::after { background: var(--sev-critical); box-shadow: 0 0 10px rgba(248,113,113,0.28); }

/* Sparkline trend (inline SVG; values labeled, so the shape is honest) */
.viz-spark svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-spark .spark-line { fill: none; stroke: var(--gold-bright); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(243,208,106,.25)); }
.viz-spark .spark-dot { fill: var(--gold-bright); }
.viz-spark .spark-dot.bad { fill: var(--sev-critical); filter: drop-shadow(0 0 5px rgba(248,113,113,.45)); }
.viz-spark .spark-val { fill: var(--tx-on-dark); font: 600 13px var(--font-body); }
.viz-spark .spark-val.bad { fill: var(--sev-critical); }
.viz-spark .spark-cap { fill: rgba(254,254,254,.38); font: 600 8.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* Donut ring + legend (conic gradient, values in the legend) */
.viz-ring-row { display: flex; align-items: center; gap: 1.15rem; }
.viz-ring {
  position: relative; flex-shrink: 0;
  width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(var(--ring, var(--gold-bright)) 0deg, rgba(255,255,255,0.10) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #fff calc(100% - 10px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #fff calc(100% - 10px));
}
.viz-ring-wrap { position: relative; flex-shrink: 0; }
.viz-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.viz-ring-center b { font: 600 1.5rem/1 var(--font-display); color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.viz-ring-center span { margin-top: 2px; font: 600 .56rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-on-dark-3); }

/* Timeline: dots on a line, story reads left to right */
.viz-timeline { position: relative; padding: 0.4rem 0 0; }
.viz-tl-track { position: relative; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; margin: 1.5rem 6px 0.7rem; }
.viz-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 60%); background: var(--gold-bright); border-radius: 2px; box-shadow: 0 0 8px rgba(243,208,106,.35); }
.viz-tl-node { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(243,208,106,.14); }
.viz-tl-node.bad { background: var(--sev-critical); box-shadow: 0 0 0 3px rgba(248,113,113,.14); }
.viz-tl-flag {
  position: absolute; bottom: calc(100% + 7px); transform: translateX(-50%);
  white-space: nowrap;
  font: 600 .6rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-bright);
}
.viz-tl-labels { display: flex; justify-content: space-between; font: 500 .64rem/1.3 var(--font-body); color: var(--tx-on-dark-3); }
.viz-tl-labels span { max-width: 9ch; }
.viz-tl-labels span:nth-child(2) { text-align: center; }
.viz-tl-labels span:last-child { text-align: right; }
.viz-tl-note { margin-top: 0.75rem; font: 500 .7rem/1.4 var(--font-body); color: var(--tx-on-dark-2); }
.viz-tl-note b { color: var(--gold-bright); font-weight: 600; }

/* Chip collapse: many redundant chips resolve into one owned field */
.viz-chip-stat { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .8rem; font: 500 .76rem/1 var(--font-body); color: var(--tx-on-dark-2); }
.viz-chip-stat b { font: 600 1.25rem/1 var(--font-display); color: var(--tx-on-dark); font-variant-numeric: tabular-nums; }
.viz-chip-stat .to { color: var(--gold-bright); }
.viz-chip-stat b.after { color: var(--gold-bright); }
.viz-chips { display: flex; align-items: center; gap: .6rem; }
.viz-chip-cloud { display: flex; flex-wrap: wrap; gap: 4px; max-width: 150px; }
.viz-chip-cloud i {
  width: 17px; height: 11px; border-radius: 3px;
  background: rgba(248,113,113,0.14); border: 1px solid rgba(248,113,113,0.4);
}
.viz-chips .to-arrow { color: var(--gold-bright); font: 600 .95rem/1 var(--font-body); flex-shrink: 0; }
.viz-chip-one {
  padding: 4px 11px; border-radius: 5px; flex-shrink: 0;
  background: rgba(243,208,106,0.12); border: 1px solid rgba(243,208,106,0.55);
  color: var(--gold-bright);
  font: 700 .62rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 10px rgba(243,208,106,.15);
}
.viz-chip-cap { margin-top: .75rem; font: 500 .7rem/1.4 var(--font-body); color: var(--tx-on-dark-2); }

/* Checklist: the test itself, unchecked, with the pass-rate underneath */
.viz-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; }
.viz-check { display: flex; align-items: center; gap: .55rem; font: 500 .76rem/1.2 var(--font-body); color: var(--tx-on-dark-2); }
.viz-check i {
  width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid rgba(243,208,106,0.55);
  background: rgba(243,208,106,0.06);
  position: relative;
}
.viz-check i::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 8px var(--font-mono); color: var(--gold-bright); opacity: .75; }
.viz-check-cap { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.07); font: 500 .7rem/1.4 var(--font-body); color: var(--tx-on-dark-2); }
.viz-check-cap b { color: var(--sev-critical); font-weight: 600; }

/* Stacked allocation bar + legend */
.viz-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.06); }
.viz-stack i { display: block; height: 100%; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin-top: 0.75rem; font: 500 0.68rem/1.2 var(--font-body); color: var(--tx-on-dark-3); }
.viz-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.viz-legend em { font-style: normal; display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* Big stat headline inside a viz */
.viz-stat { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.9rem; }
.viz-stat b {
  font: 600 2.5rem/1 var(--font-display);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(243,208,106,0.25);
}
.viz-stat span { font: 400 0.78rem/1.35 var(--font-body); color: var(--tx-on-dark-2); max-width: 20ch; }

/* Reports access card — full-width, gold-tinted, sits at the END of the grid.
   Deliberately different from the paper cards: horizontal, compact, one CTA. */
.lib-reports {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.3rem, 2.2vw, 1.9rem);
  border-color: rgba(200,154,58,0.32);
  background: linear-gradient(150deg, rgba(30,40,64,0.5), rgba(11,16,27,0.42));
}
.lib-reports:hover { border-color: rgba(243,208,106,0.5); }
.lib-reports .lib-meta { margin-bottom: 0.55rem; }
.lib-reports h3 { margin: 0 0 0.35rem; min-height: 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.lib-reports .lib-preview { flex: none; -webkit-line-clamp: 2; max-width: 62ch; }
.lib-reports-cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--bd-dark-gold);
  border-radius: var(--radius-md);
  background: rgba(10,15,26,0.4);
  font: 600 0.82rem/1 var(--font-body); letter-spacing: 0.03em;
  color: var(--gold-bright);
  white-space: nowrap;
  transition: border-color var(--transition-base), background var(--transition-glass), box-shadow var(--transition-glass);
}
.lib-reports:hover .lib-reports-cta {
  border-color: rgba(243,208,106,0.5);
  background: var(--glass-dark-gold-tint);
  box-shadow: var(--shadow-dark-glow-gold);
}
.lib-reports-cta .arrow { display: inline-block; transition: transform .3s var(--ease-spring); }
.lib-reports:hover .lib-reports-cta .arrow { transform: translateX(5px); }

@media (max-width: 900px) {
  .lib-reports { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-preview { -webkit-line-clamp: 5; }
  .lib-card h3 { min-height: 0; }
  .lib-viz { min-height: 0; }
}

/* ------------------------------------------------------------------------
   Responsive + motion discipline (home.css parity)
   ------------------------------------------------------------------------ */
.m-only { display: none !important; }

@media (max-width: 820px) {
  .m-only { display: block !important; }
  .d-only { display: none !important; }
  main .section { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  main .sec-head { margin-bottom: 1.4rem; }
  .page-hero { padding-top: clamp(7rem, 14vh, 8.5rem); }
}

@media (max-width: 640px) {
  .cta-trust { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; row-gap: .7rem; }
}

@media (max-width: 768px) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal,
  .reveal-scale { opacity: 1 !important; transform: none !important; }
  .glass-card,
  .glass-card-dark,
  .glass-card-dark-strong,
  .site-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav { background: rgba(12,17,28,.94); }
}