/* GENERATED by scripts/build-css.mjs. Do not edit: change the source files listed
   in that script, then run `node scripts/build-css.mjs` and commit. */

/* ==== /v3/assets/css/aeolus.css ==== */
/* ==========================================================================
   AeolusGTM Marketing Site v2 — Design Foundation
   Derived 1:1 from the AeolusGTM Design System (claude.ai/design handoff).
   Light: warm cream atmospheric + frosted glass + gold interactive.
   Dark:  ONE night-sky treatment (#0a0f1a + starfield). No other dark shades.
   Type:  Cormorant Garamond (display) + Outfit (body), self-hosted variable.
   ========================================================================== */

/* ---------- Fonts (variable, same files the portal ships) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/v3/assets/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/v3/assets/fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Surfaces (light) ===== */
  --bg: #F5F4F0;
  --bg-atmospheric: #F3EFE7;
  --surface: #FEFEFE;
  --s2: #ECEAE4;

  /* ===== Borders ===== */
  --bd: #E2DFD8;
  --bd2: #C9C5BB;

  /* ===== Text ===== */
  --tx: #1A1916;
  --tx2: #5A5854;
  --tx3: #9B9890;

  /* ===== Gold ===== */
  --gold: #C5912A;
  --gold-lt: #FBF4E4;
  --gold-bd: #E4C97A;
  --gold-bright: #F3D06A;

  /* ===== Navy ===== */
  --navy: #2C3441;
  --navy-lt: #3D4856;

  /* ===== Status ===== */
  --green: #1A6637;  --green-lt: #EAF3EE;
  --red: #962020;    --red-lt: #FEF0F0;
  --blue: #1A56DB;   --blue-lt: #E8F0FE;

  /* ===== Report severity (matches the live Diagnostic product) ===== */
  --sev-critical: #F87171;
  --sev-warning: #F3D06A;
  --sev-info: #7DB3F5;
  --connected-green: #5FD08A;
  --sage: #A4B7AC;

  /* ===== Glass (light) ===== */
  --glass-white: rgba(255,255,255,0.25);
  --glass-white-strong: rgba(255,255,255,0.65);
  --glass-white-border: rgba(255,255,255,0.4);
  --glass-white-border-strong: rgba(255,255,255,0.8);
  --blob-gold: rgba(243,208,106,0.25);
  --blob-navy: rgba(44,52,65,0.12);

  /* ===== Night sky (the ONLY dark treatment) ===== */
  --bg-dark: #0a0f1a;
  --bg-dark-2: #0e1422;
  --surface-dark: rgba(16,24,44,0.52);
  --bd-dark: rgba(254,254,254,0.08);
  --bd-dark-gold: rgba(200,154,58,0.28);
  --bd-dark-gold-soft: rgba(200,154,58,0.15);
  --tx-on-dark: rgba(254,254,254,0.92);
  --tx-on-dark-2: rgba(254,254,254,0.62);
  --tx-on-dark-3: rgba(254,254,254,0.38);
  --tx-on-dark-label: rgba(254,254,254,0.40);
  --glow-gold-dark: rgba(243,208,106,0.10);
  --glow-navy-dark: rgba(108,138,192,0.08);
  --glass-dark-soft: rgba(10,15,26,0.55);
  --glass-dark-strong: rgba(16,24,44,0.52);
  --glass-dark-gold-tint: rgba(200,154,58,0.12);

  /* ===== Depth ===== */
  --shadow-sm: 0 1px 2px rgba(26,25,22,0.04);
  --shadow-md: 0 2px 8px rgba(26,25,22,0.06), 0 1px 2px rgba(26,25,22,0.04);
  --shadow-lg: 0 8px 24px rgba(26,25,22,0.08), 0 2px 8px rgba(26,25,22,0.04);
  --shadow-xl: 0 12px 24px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.3);
  --shadow-gold: 0 0 0 3px rgba(197,145,42,0.08);
  --elev-1: 0 1px 3px rgba(26,25,22,0.04), 0 1px 2px rgba(26,25,22,0.03);
  --elev-2: 0 4px 16px rgba(26,25,22,0.06), 0 1px 3px rgba(26,25,22,0.04);
  --elev-3: 0 14px 36px rgba(26,25,22,0.10), 0 4px 10px rgba(26,25,22,0.05);
  --inset-soft: inset 0 1px 3px rgba(26,25,22,0.06), inset 0 0 0 1px rgba(255,255,255,0.35);
  --shadow-dark-md: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-dark-lg: 0 24px 64px rgba(0,0,0,0.55);
  --shadow-dark-glow-gold: 0 0 24px rgba(243,208,106,0.12), 0 0 2px rgba(243,208,106,0.30);
  --elev-dark-2: 0 10px 28px rgba(0,0,0,0.45);
  --elev-dark-3: 0 24px 56px rgba(0,0,0,0.55);
  --inset-dark: inset 0 2px 6px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);

  /* ===== Motion ===== */
  --transition-fast: 100ms ease-out;
  --transition-base: 150ms ease-out;
  --transition-slow: 250ms ease-out;
  --transition-glass: 300ms cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.16,1,0.3,1);

  /* ===== Radii ===== */
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ===== Type ===== */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  /* ===== Layout ===== */
  --max: 1200px;
  --max-article: 720px;
  --pad: clamp(1.5rem, 5vw, 5rem);
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 350;
  line-height: 1.65;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: var(--font-body); cursor: pointer; }
::selection { background: rgba(243,208,106,0.45); color: var(--tx); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 3px; }

/* ==========================================================================
   TYPE SYSTEM
   ========================================================================== */
.label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx3);
}
.label-on-dark { color: var(--tx-on-dark-label); }
.label .label-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); margin-right: 0.6rem; vertical-align: 2px;
}

.t-display-hero {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 6.4vw, 5.8rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.t-display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.t-display-md {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.22;
}
.em-gold { font-style: italic; color: var(--gold); font-weight: 400; }
.dark-ctx .em-gold, .em-gold-bright { font-style: italic; color: var(--gold-bright); font-weight: 400; }

.t-lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  font-weight: 300;
  color: var(--tx2);
}
.t-lede b, .t-lede strong { font-weight: 500; color: var(--tx); }
.dark-ctx .t-lede { color: var(--tx-on-dark-2); }
.dark-ctx .t-lede b, .dark-ctx .t-lede strong { color: var(--tx-on-dark); }

.t-stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ATMOSPHERIC CANVASES
   ========================================================================== */
/* Light: warm cream + drifting gold/navy blobs. The texture of the brand. */
.aeolus-canvas {
  position: relative;
  background: var(--bg-atmospheric);
  overflow: hidden;
}
.aeolus-canvas::before,
.aeolus-canvas::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
}
.aeolus-canvas::before {
  top: -10%; right: -8%;
  width: 900px; height: 900px;
  background: var(--blob-gold);
  filter: blur(120px);
}
.aeolus-canvas::after {
  bottom: -10%; left: -8%;
  width: 800px; height: 800px;
  background: var(--blob-navy);
  filter: blur(100px);
}
.aeolus-canvas > * { position: relative; z-index: 1; }

/* Dark: night sky. THE one dark surface. Stars are pure CSS. */
.aeolus-canvas-dark {
  position: relative;
  background: var(--bg-dark);
  color: var(--tx-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.aeolus-canvas-dark::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 95% -5%,  var(--glow-gold-dark), transparent 60%),
    radial-gradient(ellipse 55% 50% at -5% 105%, var(--glow-navy-dark), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%,  transparent 40%, rgba(0,0,0,0.35) 100%);
}
.aeolus-canvas-dark::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(243,208,106,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 72%, rgba(254,254,254,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 8%,  rgba(254,254,254,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 92%, rgba(243,208,106,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 34%, rgba(254,254,254,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 68%, rgba(243,208,106,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 7% 55%,  rgba(254,254,254,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 42%, rgba(243,208,106,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 78%, rgba(254,254,254,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 15%, rgba(243,208,106,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 88%, rgba(254,254,254,0.08) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 50%, rgba(243,208,106,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 82%, rgba(254,254,254,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 3% 35%,  rgba(243,208,106,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 25%, rgba(254,254,254,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 12%, rgba(243,208,106,0.20) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 5%, rgba(254,254,254,0.14) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 62%, rgba(243,208,106,0.18) 0%, transparent 100%),
    radial-gradient(2px 2px at 48% 88%, rgba(254,254,254,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 38%, rgba(243,208,106,0.22) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 72%, rgba(254,254,254,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 22%, rgba(243,208,106,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 48%, rgba(254,254,254,0.10) 0%, transparent 100%),
    radial-gradient(2px 2px at 22% 28%, rgba(243,208,106,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 52%, rgba(254,254,254,0.08) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 14%, rgba(254,254,254,0.13) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 58%, rgba(243,208,106,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 45%, rgba(254,254,254,0.10) 0%, transparent 100%),
    radial-gradient(2px 2px at 5% 82%,  rgba(243,208,106,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 94%, rgba(254,254,254,0.10) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 28%, rgba(243,208,106,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 78%, rgba(254,254,254,0.09) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 5%,  rgba(243,208,106,0.25) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 97% 88%, rgba(254,254,254,0.12) 0%, transparent 100%);
}
.aeolus-canvas-dark > * { position: relative; z-index: 1; }
.aeolus-canvas-dark.quiet::after { opacity: 0.55; }
/* Modifier — drop the central vignette when content needs full edge-to-edge contrast */
.aeolus-canvas-dark.flat::before {
  background:
    radial-gradient(ellipse 60% 45% at 95% -5%,  var(--glow-gold-dark), transparent 60%),
    radial-gradient(ellipse 55% 50% at -5% 105%, var(--glow-navy-dark), transparent 60%);
}

/* ==========================================================================
   GLASS PRIMITIVES
   ========================================================================== */
.glass-card {
  background: var(--glass-white-strong);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--glass-white-border-strong);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-xl);
}
.glass-inner-card {
  background: var(--glass-white-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(26,25,22,0.06), 0 1px 2px rgba(26,25,22,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
  border-radius: var(--radius-lg);
}
.glass-tag {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid var(--glass-white-border);
  border-radius: var(--radius-full);
}
.glass-featured {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(197,145,42,0.3);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(197,145,42,0.08);
  border-radius: var(--radius-xl);
}

.glass-card-dark {
  background: var(--glass-dark-soft);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--bd-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark-md), inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--tx-on-dark);
}
.glass-card-dark-strong {
  background: var(--glass-dark-strong);
  backdrop-filter: blur(32px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.08);
  border: 1px solid var(--bd-dark-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark-lg), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(243,208,106,0.06);
  color: var(--tx-on-dark);
}
.glass-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  background: rgba(10,15,26,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bd-dark-gold-soft);
  border-radius: var(--radius-full);
  color: var(--tx-on-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition-glass), border-color var(--transition-glass), box-shadow var(--transition-glass);
}
.glass-pill-dark:hover, .glass-pill-dark.active {
  background: var(--glass-dark-gold-tint);
  border-color: rgba(243,208,106,0.50);
  box-shadow: var(--shadow-dark-glow-gold);
}
.glass-pill-dark .pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(243,208,106,0.40);
}
.rule-gold { width: 24px; height: 1px; background: var(--gold-bright); opacity: 0.35; border: 0; margin: 0 0 0.8rem; }

/* Elevation ladder (light) */
.layer-panel {
  background: rgba(255,255,255,0.24);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 60px rgba(26,25,22,0.05), 0 4px 16px rgba(26,25,22,0.025), inset 0 1px 0 rgba(255,255,255,0.40);
}
.layer-card {
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.50);
  border-radius: 18px;
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,0.40);
}
.layer-well {
  background: rgba(232,226,215,0.40);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: var(--radius-lg);
  box-shadow: var(--inset-soft);
}
.layer-raise {
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,0.45);
}
.layer-raise.interactive, .layer-card.interactive {
  transition: transform var(--transition-base), box-shadow var(--transition-glass), border-color var(--transition-base);
}
.layer-raise.interactive:hover, .layer-card.interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3), 0 0 0 1px rgba(197,145,42,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Elevation ladder (dark) */
.layer-panel-dark {
  background: rgba(32,41,58,0.62);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-2xl);
  box-shadow: var(--elev-dark-2), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--tx-on-dark);
}
.layer-card-dark {
  background: rgba(44,55,75,0.66);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: var(--elev-dark-2), inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--tx-on-dark);
}
.layer-well-dark {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--inset-dark);
  color: var(--tx-on-dark);
}
.layer-raise-dark {
  background: rgba(56,68,92,0.74);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-dark-2), inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--tx-on-dark);
}
.layer-raise-dark.interactive, .layer-card-dark.interactive {
  transition: transform var(--transition-base), box-shadow var(--transition-glass), border-color var(--transition-base);
  cursor: pointer;
}
.layer-raise-dark.interactive:hover, .layer-card-dark.interactive:hover {
  transform: translateY(-1px);
  border-color: rgba(243,208,106,0.40);
  box-shadow: var(--elev-dark-3), var(--shadow-dark-glow-gold), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Crispy flare — gold gradient edge for hero/featured cards */
.crispy-flare { position: relative; }
.crispy-flare::before {
  content: "";
  position: absolute; inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 40%, rgba(243,208,106,0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.gold-glow { transition: box-shadow var(--transition-glass); }
.gold-glow:hover { box-shadow: 0 0 15px rgba(200,154,58,0.35), 0 0 40px rgba(200,154,58,0.15), 0 0 80px rgba(200,154,58,0.05); }

/* Row hover: gold left border (the signature row treatment) */
.glass-row {
  border-left: 3px solid transparent;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-glass);
}
.glass-row:hover {
  border-left-color: var(--gold);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 0 15px rgba(200,154,58,0.18), 0 0 40px rgba(200,154,58,0.08);
}
.glass-row-dark {
  border-left: 3px solid transparent;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-glass);
}
.glass-row-dark:hover {
  border-left-color: var(--gold-bright);
  background: rgba(255,255,255,0.05);
  box-shadow: var(--shadow-dark-glow-gold);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.9rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-glass), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-glass), border-color var(--transition-base), filter var(--transition-base);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn .arrow { display: inline-block; transition: transform .3s var(--ease-spring); }
.btn:hover .arrow { transform: translateX(5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(197,145,42,0.3), 0 0 0 4px rgba(255,255,255,0.6); }

/* Primary on light: navy, warms to gold */
.btn-primary {
  background: var(--navy);
  color: #FEFEFE;
}
.btn-primary:hover {
  background: var(--gold);
  color: #FEFEFE;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(197,145,42,0.28);
}
/* Primary on dark: bright gold, navy text */
.btn-gold {
  background: var(--gold-bright);
  color: var(--navy);
  font-weight: 600;
}
.btn-gold:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(243,208,106,0.30), 0 0 40px rgba(243,208,106,0.12), 0 8px 32px rgba(0,0,0,0.35);
}
/* Ghost on light */
.btn-ghost {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bd);
  color: var(--tx);
}
.btn-ghost:hover { background: rgba(255,255,255,0.85); border-color: var(--gold-bd); transform: translateY(-2px); }
/* Ghost on dark */
.btn-ghost-dark {
  background: rgba(10,15,26,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bd-dark-gold-soft);
  color: var(--tx-on-dark);
}
.btn-ghost-dark:hover {
  border-color: rgba(243,208,106,0.5);
  background: var(--glass-dark-gold-tint);
  box-shadow: var(--shadow-dark-glow-gold);
  transform: translateY(-2px);
}

/* ==========================================================================
   NAV
   ========================================================================== */
/* One cohesive floating dock: logo · links · CTA in a single centered glass pill */
.site-nav {
  position: fixed;
  top: clamp(0.7rem, 1.4vw, 1.1rem);
  left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 1.5vw, 1.4rem);
  padding: 7px clamp(8px, 1vw, 10px) 7px clamp(14px, 1.6vw, 18px);
  max-width: calc(100vw - 1.6rem);
  border-radius: 18px;
  border: 1px solid var(--nav-dock-bd, rgba(255,255,255,0.42));
  background: var(--nav-dock-bg, rgba(255,255,255,0.42));
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  backdrop-filter: blur(32px) saturate(190%);
  box-shadow: 0 12px 40px rgba(20,22,28,0.18), inset 0 1px 0 rgba(255,255,255,0.50);
}
.site-nav.scrolled { background: var(--nav-dock-bg, rgba(255,255,255,0.42)); }

.nav-logo { display: inline-flex; align-items: center; padding: 4px 0; }
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-logo img.logo-light { display: none; }

/* links row — lives inside the dock, separated by hairlines */
.site-nav .nav-links {
  display: flex; align-items: center; gap: clamp(1.1rem, 1.8vw, 1.8rem);
  list-style: none; margin: 0;
  padding: 4px clamp(16px, 1.9vw, 24px);
  border-inline: 1px solid var(--nav-sep, rgba(20,22,28,0.10));
}
.site-nav .nav-links a {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--tx2);
  transition: color var(--transition-base);
  position: relative;
}
.site-nav .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1px; background: var(--gold);
  transition: right .3s var(--ease-spring);
}
.site-nav .nav-links a:hover::after, .site-nav .nav-links a.active::after { right: 0; }
.site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: var(--tx); }

/* CTA — gold pill nested at the dock's right edge */
.nav-cta {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 9px 18px;
  border-radius: 12px;
  color: var(--navy);
  border: 1px solid var(--nav-cta-bd, rgba(197,145,42,0.45));
  background: var(--nav-cta-bg, rgba(243,208,106,0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform var(--transition-base), box-shadow var(--transition-glass), background var(--transition-glass);
  white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(197,145,42,0.30), inset 0 1px 0 rgba(255,255,255,0.5); }

/* THEME: over the dark hero -> dark frosted glass, light text + light logo */
.site-nav.nav-dark {
  --nav-dock-bg: rgba(12,17,28,0.40);
  --nav-dock-bd: rgba(255,255,255,0.16);
  --nav-sep: rgba(255,255,255,0.14);
  color: var(--tx-on-dark);
}
.site-nav.nav-dark .nav-links a { color: var(--tx-on-dark-2); }
.site-nav.nav-dark .nav-links a:hover,
.site-nav.nav-dark .nav-links a.active { color: var(--tx-on-dark); }
.site-nav.nav-dark .nav-logo img.logo-light { display: block; }
.site-nav.nav-dark .nav-logo img.logo-dark { display: none; }
.site-nav.nav-dark .nav-cta { --nav-cta-bg: rgba(243,208,106,0.92); --nav-cta-bd: rgba(243,208,106,0.55); color: var(--navy); }

/* Mobile nav */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  padding: 8px;
  z-index: 300;
}
.nav-burger span {
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease-spring), opacity .2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 250;
  background: rgba(247,245,240,0.96);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--tx);
}
.mobile-menu .nav-cta { font-family: var(--font-body); font-size: 0.9rem; margin-top: 0.5rem; }
@media (max-width: 920px) {
  .site-nav { gap: 0.9rem; padding: 6px 10px 6px 14px; }
  .site-nav .nav-links { display: none; }
  .site-nav .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ==========================================================================
   SECTION SCAFFOLD
   ========================================================================== */
.section { padding: clamp(4.5rem, 8vw, 8.5rem) var(--pad); }
.section-inner { max-width: var(--max); margin: 0 auto; }
.sec-head { max-width: 860px; margin: 0 auto clamp(2.6rem, 5vw, 4.2rem); text-align: center; }
.sec-head .label { display: block; margin-bottom: 1.1rem; }
.sec-head h2 { margin: 0; }
.sec-head .sec-sub { margin: 1.2rem auto 0; max-width: 58ch; }

/* Section divider — a fine gold hairline with a star */
.sec-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
  padding: 0 var(--pad);
  max-width: 520px;
  margin: 0 auto;
}
.sec-divider::before, .sec-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bd));
}
.sec-divider::after { background: linear-gradient(90deg, var(--gold-bd), transparent); }
.sec-divider .star { color: var(--gold); font-size: 0.7rem; opacity: 0.7; }

/* ==========================================================================
   SEVERITY PILLS + REPORT PRIMITIVES (match the live Diagnostic product)
   ========================================================================== */
.sev-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
}
.sev-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sev-critical { color: var(--sev-critical); background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); }
.sev-warning  { color: var(--sev-warning);  background: rgba(243,208,106,0.10); border: 1px solid rgba(243,208,106,0.25); }
.sev-info     { color: var(--sev-info);     background: rgba(125,179,245,0.10); border: 1px solid rgba(125,179,245,0.25); }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(10,15,26,0.6);
  border: 1px solid var(--bd-dark);
  color: var(--tx-on-dark-2);
}
.status-pill .dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--connected-green);
  box-shadow: 0 0 8px rgba(95,208,138,0.6);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ==========================================================================
   TICKER (marquee)
   ========================================================================== */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  padding: 0.95rem 0;
  border-top: 1px solid var(--bd-dark);
  border-bottom: 1px solid var(--bd-dark);
}
.ticker-track { display: inline-flex; animation: ticker 40s linear infinite; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 1.5rem;
  padding: 0 1.5rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tx-on-dark-3);
}
.ticker-item .tick-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-bright); flex-shrink: 0; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  /* Night-sky base — the SAME dark as every dark section, so the site never
     shows two different "darks". The footer reads as the calm ground below
     the horizon; its gold top-hairline + layout carry the distinction. */
  background: var(--bg-dark);
  color: rgba(254,254,254,0.6);
  padding: clamp(3.2rem, 5vw, 4.5rem) var(--pad) 2rem;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(420px, 60%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243,208,106,0.5), transparent);
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo img { height: 34px; width: auto; }
.footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold-bright); margin-top: 0.8rem; }
.footer-desc { font-size: 0.86rem; line-height: 1.65; margin-top: 0.9rem; max-width: 36ch; font-weight: 300; }
.footer-col-label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(254,254,254,0.38);
  margin-bottom: 1.1rem;
}
.footer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav-list a { font-size: 0.87rem; font-weight: 300; transition: color var(--transition-base); }
.footer-nav-list a:hover { color: var(--gold-bright); }
.footer-bottom {
  max-width: var(--max);
  margin: 2.8rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.76rem;
  color: rgba(254,254,254,0.38);
}
.footer-bottom a:hover { color: var(--gold-bright); }
/* Footer badges (2026-10-23): LinkedIn mark + Startup Fame badge, small and quiet. */
.footer-bottom:has(.footer-badges) { align-items: center; }
.footer-badges { display: inline-flex; align-items: center; gap: 14px; }
.footer-badges a { display: inline-flex; align-items: center; color: rgba(255,255,255,0.55); }
.footer-badges img { display: block; width: auto; height: 34px; opacity: 0.85; transition: opacity .2s ease; }
.footer-badges a:hover img { opacity: 1; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================================
   REVEAL ANIMATIONS (IntersectionObserver adds .in; see site.js)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-spring), transform .9s var(--ease-spring); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-scale { opacity: 0; transform: scale(0.96) translateY(14px); transition: opacity 1s var(--ease-spring), transform 1s var(--ease-spring); }
.reveal-scale.in { opacity: 1; transform: none; }
.reveal-line { position: relative; }
.reveal-line::after {
  content: ""; position: absolute; left: 0; bottom: -8px;
  width: 0; height: 1px; background: var(--gold-bd);
  transition: width 1.1s var(--ease-spring) .3s;
}
.reveal-line.in::after { width: 3rem; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-up { animation: fadeUp 300ms ease-out both; }

/* ==========================================================================
   ARTICLE TYPOGRAPHY (insights pages)
   ========================================================================== */
.article-body {
  max-width: var(--max-article);
  margin: 0 auto;
  font-size: 1.04rem;
  line-height: 1.8;
  font-weight: 350;
  color: var(--tx);
}
.article-body p { margin-bottom: 1.5rem; }
.article-body a {
  color: var(--gold);
  font-weight: 500;
  border-bottom: 1px solid rgba(197,145,42,0.3);
  transition: border-color var(--transition-base), color var(--transition-base);
}
.article-body a:hover { border-bottom-color: var(--gold); }
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 3.2rem 0 1.2rem;
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  margin: 2.4rem 0 1rem;
}
.article-body ul, .article-body ol { margin: 0 0 1.5rem 1.4rem; }
.article-body li { margin-bottom: 0.55rem; }
.article-body strong { font-weight: 600; }

.pullquote {
  position: relative;
  margin: 2.6rem 0;
  padding: 1.8rem 2rem 1.8rem 2.2rem;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.7);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--elev-2);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tx);
  margin: 0;
}
.pullquote .pq-source { font-family: var(--font-body); font-size: 0.74rem; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx3); margin-top: 0.8rem; }

.data-table-wrap {
  margin: 2.6rem 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 2px 8px rgba(26,25,22,0.04), inset 0 1px 0 rgba(255,255,255,0.4);
  overflow-x: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.data-table caption {
  text-align: left;
  padding: 1.1rem 1.4rem 0.2rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tx3);
}
.data-table th {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tx3);
  text-align: left;
  padding: 1.1rem 1.4rem 0.8rem;
  border-bottom: 1px solid var(--bd);
}
.data-table td {
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid rgba(226,223,216,0.45);
  color: var(--tx);
  font-weight: 350;
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--transition-base); }
.data-table tbody tr:hover { background: rgba(255,255,255,0.5); }
.data-table .num { font-variant-numeric: tabular-nums; font-weight: 500; }

/* ==========================================================================
   FAQ (visible accordion — mirrors FAQPage JSON-LD)
   ========================================================================== */
.faq-list { max-width: var(--max-article); margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--bd);
}
.faq-q {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  background: none; border: none;
  text-align: left;
  padding: 1.4rem 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  font-weight: 600;
  color: var(--tx);
  transition: color var(--transition-base);
}
.faq-q:hover { color: var(--gold); }
.faq-q .faq-toggle {
  font-family: var(--font-body);
  font-size: 1.3rem; font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform .35s var(--ease-spring);
}
.faq-item.open .faq-q .faq-toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease-spring);
}
.faq-a-inner { padding: 0 0.2rem 1.5rem; font-size: 0.97rem; line-height: 1.75; color: var(--tx2); max-width: 64ch; }
.faq-a-inner b, .faq-a-inner strong { color: var(--tx); font-weight: 500; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.center { text-align: center; }
.c-gold { color: var(--gold); }
.c-gold-bright { color: var(--gold-bright); }
.c-tx2 { color: var(--tx2); }
.c-tx3 { color: var(--tx3); }
.maxw-prose { max-width: 62ch; }
.mx-auto { margin-left: auto; margin-right: auto; }
.dark-ctx { color: var(--tx-on-dark); }
.dark-ctx .label { color: var(--tx-on-dark-label); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: -48px; left: 16px; z-index: 999;
  background: var(--navy); color: #fff;
  padding: 0.6rem 1.2rem; border-radius: var(--radius-md);
  font-size: 0.85rem;
  transition: top .25s ease;
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   REDUCED MOTION + MOBILE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 768px) {
  .reveal, .reveal-scale { transition-duration: .6s; }
  .section { padding-left: 1.4rem; padding-right: 1.4rem; }
}

/* ===== FOUNDATION animation (ported from Claude Design handoff) =====
   The viz is a wide (2:1) canvas drawn directly on the section — no card chrome.
   The heading is overlaid into the canvas's empty top-left so copy + animation
   read as one unified composition (feed under the header, sail centre, pillars
   upper-right). The animation's own layout constants live in foundation.js. */
.foundation-stage { position: relative; }
/* Scroll-driven "clarity": the Foundation content is blurred as it enters and sharpens
   as you scroll into it. The blur is applied in JS (foundation.js) for reliable cross-
   browser behaviour; this just hints the compositor. */
.foundation-stage { will-change: filter; }
@media (prefers-reduced-motion: reduce) { .foundation-stage { filter: none !important; } }
.foundation-copy {
  position: absolute; top: 0; left: 0; z-index: 6;
  pointer-events: none; width: min(44%, 30rem);
}
.foundation-copy .chapter-head { font-size: clamp(1.9rem, 3.4vw, 3rem); max-width: 15ch; }
.foundation-viz-wrap { width: 100%; }
/* The Foundation continues the HERO's night sky — it is NOT a separate dark panel.
   Same #070a12 base as the hero, a top blend that matches the hero's vignetted bottom
   (so the two read as one continuous background with no line), a faint warm wash behind
   the gauge, and a light star field carried down from the hero. */
#foundation {
  background-color: #070a12;     /* exact hero base, not --bg-dark */
  padding-top: clamp(6.5rem, 12vh, 11rem);   /* gap below the hero before the content (tightened) */
  padding-bottom: clamp(1.25rem, 2.5vh, 2.25rem);
}
#foundation::before {
  background:
    /* bottom: ease toward the next (#0a0f1a) section so we don't create a new line below */
    linear-gradient(to top, var(--bg-dark), rgba(10,15,26,0) 12%),
    /* faint warmth behind the gauge */
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(243,208,106,0.03), transparent 72%);
}
#foundation::after {
  /* light star field — small, faint, white/blue; no big stars or constellations */
  background-image:
    radial-gradient(1.2px 1.2px at 6% 12%,  rgba(254,254,254,.34), transparent 100%),
    radial-gradient(1px 1px at 13% 38%,      rgba(195,215,255,.24), transparent 100%),
    radial-gradient(1px 1px at 9% 66%,       rgba(254,254,254,.20), transparent 100%),
    radial-gradient(1px 1px at 18% 84%,      rgba(254,254,254,.16), transparent 100%),
    radial-gradient(1.2px 1.2px at 24% 22%,  rgba(254,254,254,.28), transparent 100%),
    radial-gradient(1px 1px at 31% 56%,      rgba(195,215,255,.22), transparent 100%),
    radial-gradient(1px 1px at 37% 30%,      rgba(254,254,254,.18), transparent 100%),
    radial-gradient(1px 1px at 43% 74%,      rgba(254,254,254,.16), transparent 100%),
    radial-gradient(1.2px 1.2px at 52% 16%,  rgba(254,254,254,.28), transparent 100%),
    radial-gradient(1px 1px at 58% 48%,      rgba(195,215,255,.20), transparent 100%),
    radial-gradient(1px 1px at 64% 80%,      rgba(254,254,254,.16), transparent 100%),
    radial-gradient(1px 1px at 71% 26%,      rgba(254,254,254,.22), transparent 100%),
    radial-gradient(1.2px 1.2px at 77% 60%,  rgba(254,254,254,.26), transparent 100%),
    radial-gradient(1px 1px at 83% 36%,      rgba(195,215,255,.20), transparent 100%),
    radial-gradient(1px 1px at 89% 72%,      rgba(254,254,254,.18), transparent 100%),
    radial-gradient(1px 1px at 95% 18%,      rgba(254,254,254,.24), transparent 100%),
    radial-gradient(1px 1px at 47% 92%,      rgba(254,254,254,.12), transparent 100%),
    radial-gradient(1px 1px at 27% 8%,       rgba(254,254,254,.18), transparent 100%);
}
/* taller canvas as it narrows so the overlaid heading keeps clear of the feed */
@media (max-width: 1100px) {
  #foundation-viz { aspect-ratio: 1.9; }
}
@media (max-width: 768px) {
  .foundation-copy { position: static; max-width: none; margin-bottom: 0.5rem; }
  #foundation-viz { aspect-ratio: 4 / 5; }
}
@keyframes aeolusSailBreath {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(243,208,106,.30)) drop-shadow(0 0 50px rgba(243,208,106,.12)); }
  50%      { filter: drop-shadow(0 0 28px rgba(243,208,106,.50)) drop-shadow(0 0 88px rgba(243,208,106,.24)); }
}
@media (prefers-reduced-motion: reduce) {
  #foundation-viz img { animation: none !important; }
}

/* ==== /Assets/site.css ==== */
/* ========================================================================
   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); }

/* Ratio: a disproportion you can count. For arguments shaped "N of these per one
   of those", where a bar chart would flatten the whole point. */
.viz-ratio { display: flex; flex-direction: column; gap: .55rem; }
.viz-ratio-row { display: flex; align-items: center; gap: .7rem; }
.viz-ratio-row b {
  font: 500 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-on-dark-3); width: 4.4em; flex-shrink: 0;
}
.viz-ratio-dots { display: flex; gap: .3rem; flex-wrap: wrap; }
.viz-ratio-dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(243,208,106,0.85);
  box-shadow: 0 0 10px rgba(243,208,106,0.28);
}
.viz-ratio-dots.is-human i {
  background: transparent; box-shadow: none;
  border: 1.5px solid rgba(255,255,255,0.55);
}
.viz-ratio-cap { margin-top: .8rem; 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); }
}

/* Mid-article CRM Diagnostic call to action on insight papers: one sentence and a
   button at a section break about two-thirds down the article, never inside the
   FAQ. Tokens only. Clicks send GA4 diagnostic_cta_click through
   [data-cta="diagnostic"] (Assets/site.js, v2/v11.js). */
.paper-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 2.75rem 0;
  padding: 1.5rem 1.6rem;
  background: var(--gold-lt);
  border: 1px solid var(--gold-bd);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.article-body .paper-cta p,
.paper-cta p {
  flex: 1 1 22rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.55;
  color: var(--tx);
}
.article-body .paper-cta .btn,
.paper-cta .btn { flex: 0 0 auto; color: #FEFEFE; text-decoration: none; }
@media (max-width: 600px) {
  .paper-cta .btn { width: 100%; white-space: normal; text-align: center; }
}
@media print { .paper-cta { display: none; } }

/* Publish queue (scripts/publish-due.mjs): a link to an insight paper that has
   not published yet is parked as <a data-queued-href> (no href), so it reads as
   plain text until the paper goes live and the link is restored. A related-reading
   card for an unpublished paper is hidden, and so is the related section when
   none of its cards is live yet. */
a[data-queued-href] { color: inherit !important; text-decoration: none !important; cursor: inherit; pointer-events: none; }
.ins-card[data-queued-href] { display: none !important; }
.related-section:has(.ins-card):not(:has(.ins-card[href])) { display: none; }

/* ==== /v2/assets/self-hosted.css ==== */
/* Source: aeolus-design-system/assets/fonts/self-hosted.css (+ Zodiak face from ds-bundle/fonts/fonts.css) */
/* Self-hosted brand fonts for the design-system bundle.
   General Sans: downloaded from Fontshare (ITF Free Font License).
   IBMPlexMono: downloaded from Google Fonts (OFL). Family name has no
   spaces to match the token stack in src/tokens/index.ts. */

@font-face {
  font-family: 'Zodiak';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/v2/assets/fonts/Zodiak-Variable.woff2') format('woff2-variations'), url('/v2/assets/fonts/Zodiak-Variable.woff2') format('woff2'), url('/v2/assets/fonts/Zodiak-Variable.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/v2/assets/fonts/GeneralSans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/assets/fonts/GeneralSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/v2/assets/fonts/GeneralSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/v2/assets/fonts/GeneralSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/v2/assets/fonts/GeneralSans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/assets/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/v2/assets/fonts/IBMPlexMono-500.woff2') format('woff2');
}

/* ==== /v2/assets/tokens.css ==== */
/* Source: aeolus-design-system/ds-bundle/tokens/tokens.css */
/* ============================================================================
   AeolusGTM Design Tokens
   Extracted 1:1 from Sales Deck v6 + Partner Deck v2-alt3 (Aug 2026).
   Every value below appears verbatim in the decks. Do not "improve" values —
   fidelity to the deck is the contract. See BRAND-SPEC.md for usage rules
   and occurrence counts.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     COLOR — NIGHT (dark surfaces)
     ------------------------------------------------------------------ */
  --aeolus-night-950: #070A12;      /* page base, hero slides, vignette ink */
  --aeolus-night-900: #0B0E16;      /* interior dark surface (one notch lighter) */
  --aeolus-night-800: #0B1020;      /* aurora deep-blue shadow lobe */
  --aeolus-navy-600: #1B4B6B;       /* aurora teal-blue anchor */
  --aeolus-slate-400: #6E97B5;      /* "what the CRM claims" marker; blue-on-light aurora */

  /* ------------------------------------------------------------------
     COLOR — GOLD FAMILY
     ------------------------------------------------------------------ */
  --aeolus-gold-hover: #FFE9A8;     /* link hover only */
  --aeolus-gold-pale: #FFF0C4;      /* gold-slide aurora highlight */
  --aeolus-gold-tint: #FDF3CF;      /* warm star core (constellation) */
  --aeolus-gold-400: #F3D06A;       /* PRIMARY GOLD: links, accent numerals, gold slide bg */
  --aeolus-gold-500: #E8B44A;       /* light-background aurora lobe */
  --aeolus-gold-600: #C5912A;       /* score-ring gradient start; dark aurora gold lobe */
  --aeolus-gold-muted: #B99A45;     /* muted gold: "open pipeline" bars only */
  --aeolus-bronze-light: #A06614;   /* bronze ink accents on cream (italic clause, markers) */
  --aeolus-bronze: #8C5A16;         /* bronze ink on cream: stat numerals, pull-quote, pills */

  /* ------------------------------------------------------------------
     COLOR — LIGHT SURFACES + INK
     ------------------------------------------------------------------ */
  --aeolus-cream: #F1EDE5;          /* light slide base */
  --aeolus-ink: #1A1916;            /* ink on cream */
  --aeolus-ink-gold: #1A1206;       /* warmer ink on gold surfaces */
  --aeolus-white: #FFFFFF;          /* headlines on dark */

  /* ------------------------------------------------------------------
     COLOR — SEMANTIC
     ------------------------------------------------------------------ */
  --aeolus-coral: #F0724E;          /* negative delta / critical finding */
  --aeolus-sage: #8EC4A4;           /* healthy / at Aeolus standard */
  --aeolus-sage-deep: #5F9C7E;      /* sage ring gradient start */
  --aeolus-green: #4ADE80;          /* won money / "Match" status */
  --aeolus-red: #F87171;            /* zero / failure */
  --aeolus-ember: #C96A2E;          /* terracotta aurora lobe (light slides) */
  --aeolus-rust: rgba(178, 58, 22, 0.58); /* coral aurora lobe (dark slides) */

  /* categorical (territories / charts) */
  --aeolus-cat-teal: #13A5B2;
  --aeolus-cat-green: #2B7440;      /* doubles as "Won" bar */
  --aeolus-cat-olive: #B49100;
  --aeolus-cat-violet: #9C84C7;
  --aeolus-cat-maroon: #7A2B2B;     /* "Lost" bar */
  --aeolus-cat-blue: #3A99BA;       /* attribution: paid */
  --aeolus-cat-grey: #9AA1AD;       /* attribution: other */

  /* constellation starlight palette */
  --aeolus-star-core: #FDF3CF;
  --aeolus-star-cool: #DFE8FA;
  --aeolus-star-fill: #CFDAF2;
  --aeolus-star-alt: #C4D8FA;
  --aeolus-star-line: rgba(214, 226, 246, 0.72);
  --aeolus-star-line-faint: rgba(214, 226, 246, 0.26);

  /* ------------------------------------------------------------------
     TEXT ALPHA LADDERS (the deck never uses grey hexes for text)
     Dark surfaces: white at alpha. Light surfaces: ink at alpha.
     ------------------------------------------------------------------ */
  --aeolus-text-on-dark-max: rgba(255, 255, 255, 0.96);   /* stat values */
  --aeolus-text-on-dark: rgba(255, 255, 255, 0.94);       /* section default */
  --aeolus-text-on-dark-2: rgba(255, 255, 255, 0.92);     /* dense sections */
  --aeolus-text-on-dark-body-strong: rgba(255, 255, 255, 0.86);
  --aeolus-text-on-dark-body: rgba(255, 255, 255, 0.82);  /* card body */
  --aeolus-text-on-dark-soft: rgba(255, 255, 255, 0.72);  /* tile body */
  --aeolus-text-on-dark-lede: rgba(255, 255, 255, 0.70);  /* hero lede */
  --aeolus-text-on-dark-muted: rgba(255, 255, 255, 0.62); /* metric labels */
  --aeolus-text-on-dark-label: rgba(255, 255, 255, 0.60); /* 24px mono label */
  --aeolus-text-on-dark-sub: rgba(255, 255, 255, 0.58);   /* montage lede */
  --aeolus-text-on-dark-faint: rgba(255, 255, 255, 0.48); /* micro labels */
  --aeolus-text-on-dark-dim: rgba(255, 255, 255, 0.42);   /* captions */

  --aeolus-text-on-light: #1A1916;
  --aeolus-text-on-light-body-strong: rgba(26, 25, 22, 0.78);
  --aeolus-text-on-light-body: rgba(26, 25, 22, 0.66);
  --aeolus-text-on-light-label: rgba(26, 25, 22, 0.48);
  --aeolus-text-on-light-dim: rgba(26, 25, 22, 0.42);

  --aeolus-text-on-gold: rgba(26, 18, 6, 0.72);           /* body on gold slide */
  --aeolus-text-on-gold-strong: rgba(26, 18, 6, 0.78);
  --aeolus-text-on-gold-label: rgba(26, 18, 6, 0.62);     /* markers on gold */

  /* gold accent alphas */
  --aeolus-gold-marker: rgba(243, 208, 106, 0.78);        /* 01/02/03 numerals */
  --aeolus-gold-label: rgba(243, 208, 106, 0.85);       /* gold label text */
  --aeolus-gold-glow: rgba(243, 208, 106, 0.30);          /* blurred glow rule */
  --aeolus-gold-border: rgba(243, 208, 106, 0.45);        /* CTA card border */
  --aeolus-gold-ring: rgba(243, 208, 106, 0.26);          /* selected tile inset ring */
  --aeolus-gold-fill: rgba(243, 208, 106, 0.12);          /* pill / slab fill */
  --aeolus-gold-wash: rgba(243, 208, 106, 0.09);          /* gold-tint card fill */

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     Families: Zodiak (variable serif) = display; General Sans = body +
     ALL numerals; IBM Plex Mono = in-card labels/pills ONLY (never prose).
     ------------------------------------------------------------------ */
  --aeolus-font-display: 'Zodiak', Georgia, serif;
  --aeolus-font-sans: 'General Sans', system-ui, sans-serif;
  --aeolus-font-mono: 'IBMPlexMono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Deck-native scale (1920x1080 canvas). For web, use the 0.5x web scale
     below; the deck px are the source of truth for ratios. */
  --aeolus-fs-display-hero: 112px;  /* cover H1 (deck) */
  --aeolus-fs-display-xl: 88px;     /* partner cover H1 */
  --aeolus-fs-display-lg: 77px;     /* closing H2 */
  --aeolus-fs-h2: 69px;             /* section H2 */
  --aeolus-fs-h2-sm: 56px;          /* compact / light H2 */
  --aeolus-fs-lede: 30px;
  --aeolus-fs-body: 29px;
  --aeolus-fs-card-body: 24px;
  --aeolus-fs-label: 24px;
  --aeolus-fs-micro: 15px;

  /* Web scale (0.5x deck, rounded to the nearest sensible px) */
  --aeolus-web-fs-display-hero: 56px;
  --aeolus-web-fs-display-xl: 44px;
  --aeolus-web-fs-display-lg: 38px;
  --aeolus-web-fs-h2: 34px;
  --aeolus-web-fs-h2-sm: 28px;
  --aeolus-web-fs-lede: 20px;
  --aeolus-web-fs-body: 16px;
  --aeolus-web-fs-card-body: 15px;
  --aeolus-web-fs-label: 13px;
  --aeolus-web-fs-micro: 11px;

  /* Display type metrics — invariant across every heading in both decks */
  --aeolus-lh-display: 1.14;        /* H2s; cover H1 uses 1.12 */
  --aeolus-lh-hero: 1.12;
  --aeolus-ls-display: -0.015em;    /* ALL headings + ALL big numerals */
  --aeolus-ls-tight: -0.03em;       /* step-card titles only */

  /* Mono label metrics */
  --aeolus-ls-label: 0.1em;       /* 24px mono label tracking */
  --aeolus-ls-micro: 0.06em;        /* 15px micro-label tracking */
  --aeolus-ls-marker: 0.14em;       /* 01/02/03 numeral tracking */

  /* Body line-heights by role */
  --aeolus-lh-lede: 1.5;
  --aeolus-lh-body: 1.48;
  --aeolus-lh-body-light: 1.55;
  --aeolus-lh-card: 1.34;
  --aeolus-lh-stat: 1.14;           /* big numerals share display metrics */

  /* ------------------------------------------------------------------
     RADII — "harder but still slightly round"
     ------------------------------------------------------------------ */
  --aeolus-radius-card: 10px;       /* THE card radius (48x in sales deck) */
  --aeolus-radius-panel: 14px;      /* product-UI mockup shells only */
  --aeolus-radius-row: 11px;        /* findings-row tiles (inside 14px panels) */
  --aeolus-radius-tile: 8px;        /* inner/nested row tiles */
  --aeolus-radius-bar-lg: 6px;      /* stage bars */
  --aeolus-radius-rule: 5px;        /* numbered glow rule */
  --aeolus-radius-bar: 4px;         /* metric bars, label glow rule */
  --aeolus-radius-bar-sm: 3px;      /* quota bars, legend swatches */
  --aeolus-radius-pill: 999px;      /* pills, chips, ring plates */

  /* ------------------------------------------------------------------
     GLASS RECIPES (frosted cards) — see GlassCard.tsx for full recipes.
     Naming: fill + border + blur + shadow always travel together.
     ------------------------------------------------------------------ */
  /* dark glass */
  --aeolus-glass-hero-bg: rgba(255, 255, 255, 0.07);
  --aeolus-glass-hero-border: rgba(255, 255, 255, 0.20);
  --aeolus-glass-hero-blur: blur(26px) saturate(1.35);
  --aeolus-glass-hero-shadow: 0 50px 110px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.06);

  --aeolus-glass-cta-bg: rgba(255, 255, 255, 0.12);
  --aeolus-glass-cta-border: rgba(243, 208, 106, 0.45);
  --aeolus-glass-cta-blur: blur(30px) saturate(1.4);
  --aeolus-glass-cta-shadow: 0 34px 78px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.08);

  --aeolus-glass-dark-bg: rgba(255, 255, 255, 0.10);
  --aeolus-glass-dark-border: rgba(255, 255, 255, 0.22);
  --aeolus-glass-dark-blur: blur(18px) saturate(1.25);
  --aeolus-glass-dark-shadow: 0 36px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);

  --aeolus-glass-subtle-bg: rgba(255, 255, 255, 0.08);
  --aeolus-glass-subtle-border: rgba(255, 255, 255, 0.18);
  --aeolus-glass-subtle-blur: blur(18px) saturate(1.25);
  --aeolus-glass-subtle-shadow: 0 26px 58px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.24);

  --aeolus-glass-goldtint-bg: rgba(243, 208, 106, 0.09);
  --aeolus-glass-goldtint-border: rgba(243, 208, 106, 0.42);

  /* montage focus (top of the elevation ladder) */
  --aeolus-glass-focus-shadow: 0 60px 130px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --aeolus-glass-back-shadow: 0 30px 70px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);

  /* nested tile (no backdrop-filter — hairline inset ring) */
  --aeolus-tile-bg: rgba(255, 255, 255, 0.05);
  --aeolus-tile-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --aeolus-tile-selected-bg: rgba(255, 255, 255, 0.10);
  --aeolus-tile-selected-ring: inset 0 0 0 1px rgba(243, 208, 106, 0.26);

  /* light glass */
  --aeolus-glass-light-bg: rgba(255, 255, 255, 0.48);
  --aeolus-glass-light-border: rgba(255, 255, 255, 0.80);
  --aeolus-glass-light-blur: blur(26px) saturate(1.25);
  --aeolus-glass-light-shadow: 0 34px 70px rgba(26, 25, 22, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);

  --aeolus-glass-light-subtle-bg: rgba(255, 255, 255, 0.34);
  --aeolus-glass-light-subtle-border: rgba(255, 255, 255, 0.70);
  --aeolus-glass-light-subtle-blur: blur(20px);
  --aeolus-glass-light-subtle-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --aeolus-glass-light-card-bg: rgba(255, 255, 255, 0.44);
  --aeolus-glass-light-card-border: rgba(255, 255, 255, 0.76);
  --aeolus-glass-light-card-blur: blur(24px) saturate(1.2);
  --aeolus-glass-light-card-shadow: 0 28px 60px rgba(26, 25, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);

  /* glass on gold surface (warm-tinted shadow — never black on light) */
  --aeolus-glass-gold-bg: rgba(255, 255, 255, 0.38);
  --aeolus-glass-gold-border: rgba(255, 255, 255, 0.72);
  --aeolus-glass-gold-blur: blur(22px) saturate(1.2);
  --aeolus-glass-gold-shadow: 0 26px 54px rgba(90, 50, 10, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* dark card inverted onto a light row */
  --aeolus-glass-inverted-bg: rgba(9, 12, 20, 0.95);
  --aeolus-glass-inverted-border: rgba(255, 255, 255, 0.12);
  --aeolus-glass-inverted-blur: blur(18px) saturate(1.25);
  --aeolus-glass-inverted-shadow: 0 36px 70px rgba(11, 14, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* ------------------------------------------------------------------
     HAIRLINES & DIVIDERS
     ------------------------------------------------------------------ */
  --aeolus-hairline-on-dark: rgba(255, 255, 255, 0.12);      /* border-top rows */
  --aeolus-hairline-on-dark-strong: rgba(255, 255, 255, 0.16);
  --aeolus-hairline-on-dark-faint: rgba(255, 255, 255, 0.08);
  --aeolus-hairline-on-light: rgba(26, 25, 22, 0.10);
  --aeolus-hairline-bronze: linear-gradient(90deg, rgba(160, 102, 20, 0.55) 0%, rgba(160, 102, 20, 0.10) 100%);
  --aeolus-rule-gold: 2px solid rgba(243, 208, 106, 0.45);

  /* ------------------------------------------------------------------
     BACKGROUND LAYERS (the "fractal line" / sailcloth system)
     Compose in order: aurora -> sailcloth -> vignette -> noise.
     See AuroraBackground.tsx.
     ------------------------------------------------------------------ */
  --aeolus-aurora-dark: radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27, 75, 107, 0) 62%), radial-gradient(64% 76% at 60% 98%, rgba(178, 58, 22, 0.58) 0%, rgba(178, 58, 22, 0) 72%), radial-gradient(54% 64% at 82% 14%, rgba(197, 145, 42, 0.52) 0%, rgba(197, 145, 42, 0) 70%), radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11, 16, 32, 0) 66%), #070A12;
  /* Hero-only arrangement (owner ruling 2026-08-25, applied by Argus): rust lobe moved from bottom (60% 98%) to the top-right corner so the hero bottom stays pure night base and flows into the following dark section. Same lobes/colors as aurora-dark otherwise. */
  --aeolus-aurora-dark-hero: radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27, 75, 107, 0) 62%), radial-gradient(48% 60% at 92% 8%, rgba(178, 58, 22, 0.58) 0%, rgba(178, 58, 22, 0) 68%), radial-gradient(54% 64% at 82% 14%, rgba(197, 145, 42, 0.52) 0%, rgba(197, 145, 42, 0) 70%), radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11, 16, 32, 0) 66%), #070A12;
  --aeolus-aurora-dark-cool: radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27, 75, 107, 0) 62%), radial-gradient(64% 76% at 60% 98%, rgba(27, 75, 107, 0.42) 0%, rgba(27, 75, 107, 0) 72%), radial-gradient(54% 64% at 82% 14%, rgba(197, 145, 42, 0.30) 0%, rgba(197, 145, 42, 0) 70%), radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11, 16, 32, 0) 66%), #070A12;
  --aeolus-aurora-cream: radial-gradient(48% 62% at 82% 24%, #E8B44A 0%, rgba(232, 180, 74, 0) 64%), radial-gradient(44% 58% at 96% 76%, #C96A2E 0%, rgba(201, 106, 46, 0) 64%), radial-gradient(40% 54% at 62% 96%, #6E97B5 0%, rgba(110, 151, 181, 0) 66%), #F1EDE5;
  --aeolus-aurora-gold: radial-gradient(56% 74% at 88% 8%, #FFF0C4 0%, rgba(255, 240, 196, 0) 62%), radial-gradient(52% 66% at 12% 92%, #C96A2E 0%, rgba(201, 106, 46, 0) 64%), radial-gradient(46% 60% at 44% 34%, #E8B44A 0%, rgba(232, 180, 74, 0) 66%), #F3D06A;
  --aeolus-aurora-blur: blur(76px) saturate(1.2);
  --aeolus-aurora-blur-light: blur(80px) saturate(1.1);
  --aeolus-aurora-blur-gold: blur(80px) saturate(1.15);

  /* sailcloth texture: dark = overlay, light = soft-light. 13px period. */
  --aeolus-sailcloth-dark-strong: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0px, rgba(255, 255, 255, 0) 3px, rgba(0, 0, 0, 0.30) 8px, rgba(0, 0, 0, 0.05) 12px, rgba(255, 255, 255, 0.13) 13px);
  --aeolus-sailcloth-dark-soft: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0) 3px, rgba(0, 0, 0, 0.18) 8px, rgba(0, 0, 0, 0.03) 12px, rgba(255, 255, 255, 0.07) 13px);
  --aeolus-sailcloth-cream: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.60) 0px, rgba(255, 255, 255, 0) 4px, rgba(26, 25, 22, 0.06) 9px, rgba(255, 255, 255, 0) 12px, rgba(255, 255, 255, 0.60) 13px);
  --aeolus-sailcloth-gold: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0px, rgba(255, 255, 255, 0) 4px, rgba(60, 30, 6, 0.12) 9px, rgba(255, 255, 255, 0) 12px, rgba(255, 255, 255, 0.42) 13px);

  /* vignette: hero (open center) / dense (content slides) / tight (closing) */
  --aeolus-vignette-hero: radial-gradient(ellipse 96% 78% at 46% 50%, rgba(7, 10, 18, 0) 34%, rgba(7, 10, 18, 0.62) 100%);
  --aeolus-vignette-dense: radial-gradient(ellipse 104% 88% at 50% 44%, rgba(7, 10, 18, 0.36) 0%, rgba(7, 10, 18, 0.92) 100%);
  --aeolus-vignette-tight: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(7, 10, 18, 0.55) 0%, rgba(7, 10, 18, 0.82) 100%);

  /* fractal noise grain (dark surfaces only; opacity 0.10 dense / 0.13 / 0.15 hero) */
  --aeolus-noise-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22ng%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23ng)%22/%3E%3C/svg%3E');

  /* scroll-fade overlays are keyed to the interior surface #0B0E16 */
  --aeolus-fade-bottom: linear-gradient(180deg, rgba(11, 14, 22, 0) 0%, rgba(11, 14, 22, 0.72) 100%);
  --aeolus-fade-right: linear-gradient(90deg, rgba(11, 14, 22, 0) 0%, rgba(11, 14, 22, 0.62) 100%);

  /* ------------------------------------------------------------------
     GLOW RULES (the blurred bar after labels / markers)
     ------------------------------------------------------------------ */
  --aeolus-glowrule-neutral: rgba(255, 255, 255, 0.20);   /* h7 r4 blur(3px) */
  --aeolus-glowrule-gold: rgba(243, 208, 106, 0.30);      /* h10 r5 blur(4px) */

  /* ------------------------------------------------------------------
     SCORE RING (viewBox 0 0 350 350, rotate -90deg)
     ------------------------------------------------------------------ */
  --aeolus-ring-track: rgba(255, 255, 255, 0.08);
  --aeolus-ring-plate-bg: rgba(197, 145, 42, 0.12);
  --aeolus-ring-plate-border: rgba(200, 154, 58, 0.28);
  --aeolus-ring-plate-bg-sage: rgba(142, 196, 164, 0.12);
  --aeolus-ring-plate-border-sage: rgba(142, 196, 164, 0.28);

  /* ------------------------------------------------------------------
     MISC
     ------------------------------------------------------------------ */
  --aeolus-avatar-border: 3px solid rgba(255, 255, 255, 0.85);
  --aeolus-avatar-shadow: 0 8px 20px rgba(26, 25, 22, 0.18);
  --aeolus-logo-mute: brightness(0);           /* + opacity 0.55, on light */
  --aeolus-logo-mute-dark: brightness(0) invert(1); /* + opacity 0.85, on dark */
}

/* ==== /v2/assets/backgrounds.css ==== */
/* Source: aeolus-design-system/src/components/Background.tsx + AuroraBackground.tsx */

/*
  Static markup contract:
  <div class="bg-night" aria-hidden="true">
    <div class="bg-aurora"></div><div class="bg-weave"></div>
    <div class="bg-vignette"></div><div class="bg-noise"></div>
    <div class="bg-sky"></div>
  </div>
  The root is the absolute background layer. Keep section content in a sibling
  above it, as SectionNight/Cream/Gold place content at z-index 2.
*/

/* The deck's cream weave is authored at 13px on a 1920px canvas. Preserve
   its exact five stops while scaling only the tile period at desktop display
   widths, so a fitted deck and the web surface have the same visual density. */
:root {
  --v11-sailcloth-cream-scalable: linear-gradient(90deg,
    rgba(255, 255, 255, 0.60) 0%,
    rgba(255, 255, 255, 0) 30.7692%,
    rgba(26, 25, 22, 0.06) 69.2308%,
    rgba(255, 255, 255, 0) 92.3077%,
    rgba(255, 255, 255, 0.60) 100%);
  --v11-light-weave-period: 13px;
}

@media (min-width: 1024px) {
  :root { --v11-light-weave-period: clamp(10px, 0.677083vw, 13px); }
}

.bg-night,
.bg-nightHero,
.bg-nightCool,
.bg-cream,
.bg-gold {
  --bg-base: var(--aeolus-night-950);
  --bg-aurora: var(--aeolus-aurora-dark);
  --bg-aurora-filter: var(--aeolus-aurora-blur);
  --bg-weave: var(--aeolus-sailcloth-dark-soft);
  --bg-weave-blend: overlay;
  --bg-vignette: var(--aeolus-vignette-dense);
  --bg-noise-opacity: 0.10;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  border-radius: inherit;
  background: var(--bg-base);
}

.bg-nightHero {
  /* hero uses the top-right rust arrangement — owner ruling 2026-08-25 */
  --bg-aurora: var(--aeolus-aurora-dark-hero);
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-vignette: var(--aeolus-vignette-hero);
  --bg-noise-opacity: 0.15;
}

.bg-nightCool {
  --bg-aurora: var(--aeolus-aurora-dark-cool);
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-vignette: var(--aeolus-vignette-tight);
  --bg-noise-opacity: 0.13;
}

.bg-cream {
  --bg-base: var(--aeolus-cream);
  --bg-aurora: var(--aeolus-aurora-cream);
  --bg-aurora-filter: var(--aeolus-aurora-blur-light);
  --bg-weave: var(--v11-sailcloth-cream-scalable);
  --bg-weave-size: var(--v11-light-weave-period) 100%;
  --bg-weave-blend: soft-light;
  --bg-vignette: none;
  --bg-noise-opacity: 0;
}

.bg-gold {
  --bg-base: var(--aeolus-gold-400);
  --bg-aurora: var(--aeolus-aurora-gold);
  --bg-aurora-filter: var(--aeolus-aurora-blur-gold);
  --bg-weave: var(--aeolus-sailcloth-gold);
  --bg-weave-blend: soft-light;
  --bg-vignette: none;
  --bg-noise-opacity: 0;
}

.bg-aurora {
  position: absolute;
  inset: -14%;
  background: var(--bg-aurora);
  filter: var(--bg-aurora-filter);
}

.bg-weave {
  position: absolute;
  inset: 0;
  background-image: var(--bg-weave);
  background-size: var(--bg-weave-size, auto);
  background-repeat: repeat;
  mix-blend-mode: var(--bg-weave-blend);
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: var(--bg-vignette);
}

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: var(--bg-noise-opacity);
  mix-blend-mode: overlay;
  background-image: var(--aeolus-noise-image);
}

.bg-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.bg-cream > .bg-vignette,
.bg-cream > .bg-noise,
.bg-gold > .bg-vignette,
.bg-gold > .bg-noise {
  display: none;
}

/* Optional sky host helpers used by constellation-setup.js. */
.bg-sky-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.bg-sky-host--mirrored {
  transform: scale(-1, 1);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 52%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 16%, #000 52%, #000 100%);
}

.bg-sky-host--sail {
  inset: auto;
  border-radius: 10px;
}

/* ==== /v2/assets/glass.css ==== */
/* Source: aeolus-design-system/src/components/GlassCard.tsx + src/tokens/index.ts glass map */

/* Every class below is a complete recipe: fill, blur, border, shadow, and rim. */
.glass-heroDark,
.glass-ctaGold,
.glass-dark,
.glass-darkSubtle,
.glass-goldTint,
.glass-light,
.glass-lightSubtle,
.glass-lightCard,
.glass-onGold,
.glass-inverted {
  --glass-bg: transparent;
  --glass-border: 1px solid transparent;
  --glass-blur: none;
  --glass-shadow: none;
  position: relative;
  border-radius: var(--aeolus-radius-card);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-heroDark {
  --glass-bg: var(--aeolus-glass-hero-bg);
  --glass-border: 1px solid var(--aeolus-glass-hero-border);
  --glass-blur: var(--aeolus-glass-hero-blur);
  --glass-shadow: var(--aeolus-glass-hero-shadow);
}

.glass-ctaGold {
  --glass-bg: var(--aeolus-glass-cta-bg);
  --glass-border: 1px solid var(--aeolus-glass-cta-border);
  --glass-blur: var(--aeolus-glass-cta-blur);
  --glass-shadow: var(--aeolus-glass-cta-shadow);
}

.glass-dark {
  --glass-bg: var(--aeolus-glass-dark-bg);
  --glass-border: 1px solid var(--aeolus-glass-dark-border);
  --glass-blur: var(--aeolus-glass-dark-blur);
  --glass-shadow: var(--aeolus-glass-dark-shadow);
}

.glass-darkSubtle {
  --glass-bg: var(--aeolus-glass-subtle-bg);
  --glass-border: 1px solid var(--aeolus-glass-subtle-border);
  --glass-blur: var(--aeolus-glass-subtle-blur);
  --glass-shadow: var(--aeolus-glass-subtle-shadow);
}

.glass-goldTint {
  --glass-bg: var(--aeolus-glass-goldtint-bg);
  --glass-border: 1px solid var(--aeolus-glass-goldtint-border);
  --glass-blur: var(--aeolus-glass-dark-blur);
  --glass-shadow: var(--aeolus-glass-dark-shadow);
}

.glass-light {
  --glass-bg: var(--aeolus-glass-light-bg);
  --glass-border: 1px solid var(--aeolus-glass-light-border);
  --glass-blur: var(--aeolus-glass-light-blur);
  --glass-shadow: var(--aeolus-glass-light-shadow);
}

.glass-lightSubtle {
  --glass-bg: var(--aeolus-glass-light-subtle-bg);
  --glass-border: 1px solid var(--aeolus-glass-light-subtle-border);
  --glass-blur: var(--aeolus-glass-light-subtle-blur);
  --glass-shadow: var(--aeolus-glass-light-subtle-shadow);
}

.glass-lightCard {
  --glass-bg: var(--aeolus-glass-light-card-bg);
  --glass-border: 1px solid var(--aeolus-glass-light-card-border);
  --glass-blur: var(--aeolus-glass-light-card-blur);
  --glass-shadow: var(--aeolus-glass-light-card-shadow);
}

.glass-onGold {
  --glass-bg: var(--aeolus-glass-gold-bg);
  --glass-border: 1px solid var(--aeolus-glass-gold-border);
  --glass-blur: var(--aeolus-glass-gold-blur);
  --glass-shadow: var(--aeolus-glass-gold-shadow);
}

.glass-inverted {
  --glass-bg: var(--aeolus-glass-inverted-bg);
  --glass-border: 1px solid var(--aeolus-glass-inverted-border);
  --glass-blur: var(--aeolus-glass-inverted-blur);
  --glass-shadow: var(--aeolus-glass-inverted-shadow);
}

/* Split-layer mode for overlapping montage cards. */
.glass-layered {
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--glass-layered-shadow, 0 30px 72px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.28));
}

.glass-layered > .glass-layer-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.glass-layered > .glass-layer-content {
  position: relative;
  z-index: 1;
}

.glass-layered.glass-elevation-back { --glass-layered-shadow: var(--aeolus-glass-back-shadow); }
.glass-layered.glass-elevation-mid { --glass-layered-shadow: 0 30px 72px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.28); }
.glass-layered.glass-elevation-midHeavy { --glass-layered-shadow: 0 34px 80px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.18); }
.glass-layered.glass-elevation-focus { --glass-layered-shadow: var(--aeolus-glass-focus-shadow); }
.glass-layered.glass-elevation-chip { --glass-layered-shadow: 0 24px 56px rgba(0,0,0,0.55); }

/* GlassCard radiusRole="panel": product-UI mockup shells only. */
.glass-panel {
  border-radius: var(--aeolus-radius-panel);
}

/* Nested GlassTile: no backdrop blur, only the deck's inset hairline ring. */
.glass-tile {
  border-radius: var(--aeolus-radius-tile);
  background: var(--aeolus-tile-bg);
  box-shadow: var(--aeolus-tile-ring);
}

.glass-tile.is-selected,
.glass-tile[aria-selected="true"] {
  background: var(--aeolus-tile-selected-bg);
  box-shadow: var(--aeolus-tile-selected-ring);
}

/* ==== /v2/assets/melt.css ==== */
/* Source: aeolus-design-system/src/components/Sections.tsx (SectionTransition, final 2026-08-24 overlay melt) */

/*
  Exact static markup contract. The layers are separate because the source
  applies a different 16-stop mask and blend mode to each one.

  <div class="melt" data-from="night" data-to="cream" aria-hidden="true">
    <div class="melt__composite">
      <div class="melt__field"></div>
      <div class="melt__dark-aurora"></div>
      <div class="melt__light-aurora"></div>
      <div class="melt__dark-weave"></div>
      <div class="melt__light-weave"></div>
      <div class="melt__dark-vignette"></div>
      <div class="melt__dark-noise"></div>
      <div class="melt__stars"></div>
    </div>
  </div>

  --melt-height and --melt-overlap may override the component defaults.
*/

.melt {
  --melt-field: linear-gradient(to bottom,
    var(--aeolus-cream) 0%, var(--aeolus-cream) 26%, #EAD9AE 32%,
    #E8B44A 39%, #C89A3A 46%, #6b5a4e 53%, #2e3550 60%,
    #101830 67%, #070A12 74%, #070A12 100%);
  --melt-dark-aurora:
    radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27,75,107,0) 62%),
    radial-gradient(64% 76% at 60% 98%, rgba(178,58,22,0.58) 0%, rgba(178,58,22,0) 72%),
    radial-gradient(54% 64% at 82% 14%, rgba(197,145,42,0.52) 0%, rgba(197,145,42,0) 70%),
    radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11,16,32,0) 66%);
  --melt-light-aurora:
    radial-gradient(48% 62% at 82% 24%, #E8B44A 0%, rgba(232,180,74,0) 64%),
    radial-gradient(44% 58% at 96% 76%, #C96A2E 0%, rgba(201,106,46,0) 64%),
    radial-gradient(40% 54% at 62% 96%, #6E97B5 0%, rgba(110,151,181,0) 66%);
  --melt-light-weave: var(--v11-sailcloth-cream-scalable, var(--aeolus-sailcloth-cream));
  --melt-light-weave-size: var(--v11-light-weave-period, 13px) 100%;
  --melt-dark-direction: to bottom;
  --melt-light-direction: to top;
  --melt-stars:
    radial-gradient(1.3px 1.3px at 17% 30%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 25%, rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 32%, rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 21%, rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 17%, rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 14%, rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 26% at 50% 48%, rgba(243,208,106,0.12), transparent 60%);
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--melt-height, clamp(340px, 44vh, 460px));
  margin-top: calc(-1 * var(--melt-overlap, clamp(90px, 12vh, 120px)));
  margin-bottom: calc(-1 * var(--melt-overlap, clamp(90px, 12vh, 120px)));
  pointer-events: none;
}

.melt__composite {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.003) 1.47%,
    rgba(0,0,0,0.019) 2.93%, rgba(0,0,0,0.058) 4.40%,
    rgba(0,0,0,0.122) 5.87%, rgba(0,0,0,0.210) 7.33%,
    rgba(0,0,0,0.317) 8.80%, rgba(0,0,0,0.438) 10.27%,
    rgba(0,0,0,0.562) 11.73%, rgba(0,0,0,0.683) 13.20%,
    rgba(0,0,0,0.790) 14.67%, rgba(0,0,0,0.878) 16.13%,
    rgba(0,0,0,0.942) 17.60%, rgba(0,0,0,0.981) 19.07%,
    rgba(0,0,0,0.997) 20.53%, rgba(0,0,0,1.000) 22.00%,
    rgba(0,0,0,1) 50%, rgba(0,0,0,1.000) 78.00%,
    rgba(0,0,0,0.997) 79.47%, rgba(0,0,0,0.981) 80.93%,
    rgba(0,0,0,0.942) 82.40%, rgba(0,0,0,0.878) 83.87%,
    rgba(0,0,0,0.790) 85.33%, rgba(0,0,0,0.683) 86.80%,
    rgba(0,0,0,0.562) 88.27%, rgba(0,0,0,0.438) 89.73%,
    rgba(0,0,0,0.317) 91.20%, rgba(0,0,0,0.210) 92.67%,
    rgba(0,0,0,0.122) 94.13%, rgba(0,0,0,0.058) 95.60%,
    rgba(0,0,0,0.019) 97.07%, rgba(0,0,0,0.003) 98.53%,
    rgba(0,0,0,0.000) 100.00%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.003) 1.47%,
    rgba(0,0,0,0.019) 2.93%, rgba(0,0,0,0.058) 4.40%,
    rgba(0,0,0,0.122) 5.87%, rgba(0,0,0,0.210) 7.33%,
    rgba(0,0,0,0.317) 8.80%, rgba(0,0,0,0.438) 10.27%,
    rgba(0,0,0,0.562) 11.73%, rgba(0,0,0,0.683) 13.20%,
    rgba(0,0,0,0.790) 14.67%, rgba(0,0,0,0.878) 16.13%,
    rgba(0,0,0,0.942) 17.60%, rgba(0,0,0,0.981) 19.07%,
    rgba(0,0,0,0.997) 20.53%, rgba(0,0,0,1.000) 22.00%,
    rgba(0,0,0,1) 50%, rgba(0,0,0,1.000) 78.00%,
    rgba(0,0,0,0.997) 79.47%, rgba(0,0,0,0.981) 80.93%,
    rgba(0,0,0,0.942) 82.40%, rgba(0,0,0,0.878) 83.87%,
    rgba(0,0,0,0.790) 85.33%, rgba(0,0,0,0.683) 86.80%,
    rgba(0,0,0,0.562) 88.27%, rgba(0,0,0,0.438) 89.73%,
    rgba(0,0,0,0.317) 91.20%, rgba(0,0,0,0.210) 92.67%,
    rgba(0,0,0,0.122) 94.13%, rgba(0,0,0,0.058) 95.60%,
    rgba(0,0,0,0.019) 97.07%, rgba(0,0,0,0.003) 98.53%,
    rgba(0,0,0,0.000) 100.00%);
}

.melt__field,
.melt__dark-aurora,
.melt__light-aurora,
.melt__dark-weave,
.melt__light-weave,
.melt__dark-vignette,
.melt__dark-noise,
.melt__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.melt__field {
  inset: -30px -20px;
  background: var(--melt-field);
  filter: blur(14px);
}

.melt__dark-aurora,
.melt__light-aurora {
  overflow: hidden;
}

.melt__dark-aurora::before,
.melt__light-aurora::before {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  height: 130%;
}

.melt__dark-aurora::before {
  top: -12%;
  background: var(--melt-dark-aurora);
  filter: var(--aeolus-aurora-blur);
}

.melt__light-aurora::before {
  bottom: -12%;
  background: var(--melt-light-aurora);
  filter: var(--aeolus-aurora-blur-light);
}

.melt__dark-aurora {
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 34.00%,
    rgba(0,0,0,0.997) 35.87%, rgba(0,0,0,0.981) 37.73%,
    rgba(0,0,0,0.942) 39.60%, rgba(0,0,0,0.878) 41.47%,
    rgba(0,0,0,0.790) 43.33%, rgba(0,0,0,0.683) 45.20%,
    rgba(0,0,0,0.562) 47.07%, rgba(0,0,0,0.438) 48.93%,
    rgba(0,0,0,0.317) 50.80%, rgba(0,0,0,0.210) 52.67%,
    rgba(0,0,0,0.122) 54.53%, rgba(0,0,0,0.058) 56.40%,
    rgba(0,0,0,0.019) 58.27%, rgba(0,0,0,0.003) 60.13%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 34.00%,
    rgba(0,0,0,0.997) 35.87%, rgba(0,0,0,0.981) 37.73%,
    rgba(0,0,0,0.942) 39.60%, rgba(0,0,0,0.878) 41.47%,
    rgba(0,0,0,0.790) 43.33%, rgba(0,0,0,0.683) 45.20%,
    rgba(0,0,0,0.562) 47.07%, rgba(0,0,0,0.438) 48.93%,
    rgba(0,0,0,0.317) 50.80%, rgba(0,0,0,0.210) 52.67%,
    rgba(0,0,0,0.122) 54.53%, rgba(0,0,0,0.058) 56.40%,
    rgba(0,0,0,0.019) 58.27%, rgba(0,0,0,0.003) 60.13%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
}

.melt__light-aurora {
  -webkit-mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.73%, rgba(0,0,0,0.981) 47.47%,
    rgba(0,0,0,0.942) 49.20%, rgba(0,0,0,0.878) 50.93%,
    rgba(0,0,0,0.790) 52.67%, rgba(0,0,0,0.683) 54.40%,
    rgba(0,0,0,0.562) 56.13%, rgba(0,0,0,0.438) 57.87%,
    rgba(0,0,0,0.317) 59.60%, rgba(0,0,0,0.210) 61.33%,
    rgba(0,0,0,0.122) 63.07%, rgba(0,0,0,0.058) 64.80%,
    rgba(0,0,0,0.019) 66.53%, rgba(0,0,0,0.003) 68.27%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.73%, rgba(0,0,0,0.981) 47.47%,
    rgba(0,0,0,0.942) 49.20%, rgba(0,0,0,0.878) 50.93%,
    rgba(0,0,0,0.790) 52.67%, rgba(0,0,0,0.683) 54.40%,
    rgba(0,0,0,0.562) 56.13%, rgba(0,0,0,0.438) 57.87%,
    rgba(0,0,0,0.317) 59.60%, rgba(0,0,0,0.210) 61.33%,
    rgba(0,0,0,0.122) 63.07%, rgba(0,0,0,0.058) 64.80%,
    rgba(0,0,0,0.019) 66.53%, rgba(0,0,0,0.003) 68.27%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
}

.melt__dark-weave {
  background: var(--aeolus-sailcloth-dark-soft);
  mix-blend-mode: overlay;
  /* The web melt is shorter than the component preview. Keep the source
     smootherstep, but finish it at the dark-aurora boundary so overlay weave
     cannot beat against the bright-gold stops on wide screens. */
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.20%, rgba(0,0,0,0.981) 46.40%,
    rgba(0,0,0,0.942) 47.60%, rgba(0,0,0,0.878) 48.80%,
    rgba(0,0,0,0.790) 50.00%, rgba(0,0,0,0.683) 51.20%,
    rgba(0,0,0,0.562) 52.40%, rgba(0,0,0,0.438) 53.60%,
    rgba(0,0,0,0.317) 54.80%, rgba(0,0,0,0.210) 56.00%,
    rgba(0,0,0,0.122) 57.20%, rgba(0,0,0,0.058) 58.40%,
    rgba(0,0,0,0.019) 59.60%, rgba(0,0,0,0.003) 60.80%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.20%, rgba(0,0,0,0.981) 46.40%,
    rgba(0,0,0,0.942) 47.60%, rgba(0,0,0,0.878) 48.80%,
    rgba(0,0,0,0.790) 50.00%, rgba(0,0,0,0.683) 51.20%,
    rgba(0,0,0,0.562) 52.40%, rgba(0,0,0,0.438) 53.60%,
    rgba(0,0,0,0.317) 54.80%, rgba(0,0,0,0.210) 56.00%,
    rgba(0,0,0,0.122) 57.20%, rgba(0,0,0,0.058) 58.40%,
    rgba(0,0,0,0.019) 59.60%, rgba(0,0,0,0.003) 60.80%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
}

.melt__light-weave {
  background-image: var(--melt-light-weave);
  background-size: var(--melt-light-weave-size, auto);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 13.00%,
    rgba(0,0,0,0.997) 14.80%, rgba(0,0,0,0.981) 16.60%,
    rgba(0,0,0,0.942) 18.40%, rgba(0,0,0,0.878) 20.20%,
    rgba(0,0,0,0.790) 22.00%, rgba(0,0,0,0.683) 23.80%,
    rgba(0,0,0,0.562) 25.60%, rgba(0,0,0,0.438) 27.40%,
    rgba(0,0,0,0.317) 29.20%, rgba(0,0,0,0.210) 31.00%,
    rgba(0,0,0,0.122) 32.80%, rgba(0,0,0,0.058) 34.60%,
    rgba(0,0,0,0.019) 36.40%, rgba(0,0,0,0.003) 38.20%,
    rgba(0,0,0,0.000) 40.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 13.00%,
    rgba(0,0,0,0.997) 14.80%, rgba(0,0,0,0.981) 16.60%,
    rgba(0,0,0,0.942) 18.40%, rgba(0,0,0,0.878) 20.20%,
    rgba(0,0,0,0.790) 22.00%, rgba(0,0,0,0.683) 23.80%,
    rgba(0,0,0,0.562) 25.60%, rgba(0,0,0,0.438) 27.40%,
    rgba(0,0,0,0.317) 29.20%, rgba(0,0,0,0.210) 31.00%,
    rgba(0,0,0,0.122) 32.80%, rgba(0,0,0,0.058) 34.60%,
    rgba(0,0,0,0.019) 36.40%, rgba(0,0,0,0.003) 38.20%,
    rgba(0,0,0,0.000) 40.00%, rgba(0,0,0,0) 100%);
}

.melt__dark-vignette {
  background: var(--aeolus-vignette-dense);
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 30.00%,
    rgba(0,0,0,0.997) 32.00%, rgba(0,0,0,0.981) 34.00%,
    rgba(0,0,0,0.942) 36.00%, rgba(0,0,0,0.878) 38.00%,
    rgba(0,0,0,0.790) 40.00%, rgba(0,0,0,0.683) 42.00%,
    rgba(0,0,0,0.562) 44.00%, rgba(0,0,0,0.438) 46.00%,
    rgba(0,0,0,0.317) 48.00%, rgba(0,0,0,0.210) 50.00%,
    rgba(0,0,0,0.122) 52.00%, rgba(0,0,0,0.058) 54.00%,
    rgba(0,0,0,0.019) 56.00%, rgba(0,0,0,0.003) 58.00%,
    rgba(0,0,0,0.000) 60.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 30.00%,
    rgba(0,0,0,0.997) 32.00%, rgba(0,0,0,0.981) 34.00%,
    rgba(0,0,0,0.942) 36.00%, rgba(0,0,0,0.878) 38.00%,
    rgba(0,0,0,0.790) 40.00%, rgba(0,0,0,0.683) 42.00%,
    rgba(0,0,0,0.562) 44.00%, rgba(0,0,0,0.438) 46.00%,
    rgba(0,0,0,0.317) 48.00%, rgba(0,0,0,0.210) 50.00%,
    rgba(0,0,0,0.122) 52.00%, rgba(0,0,0,0.058) 54.00%,
    rgba(0,0,0,0.019) 56.00%, rgba(0,0,0,0.003) 58.00%,
    rgba(0,0,0,0.000) 60.00%, rgba(0,0,0,0) 100%);
}

.melt__dark-noise {
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: var(--aeolus-noise-image);
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 35.00%,
    rgba(0,0,0,0.997) 37.00%, rgba(0,0,0,0.981) 39.00%,
    rgba(0,0,0,0.942) 41.00%, rgba(0,0,0,0.878) 43.00%,
    rgba(0,0,0,0.790) 45.00%, rgba(0,0,0,0.683) 47.00%,
    rgba(0,0,0,0.562) 49.00%, rgba(0,0,0,0.438) 51.00%,
    rgba(0,0,0,0.317) 53.00%, rgba(0,0,0,0.210) 55.00%,
    rgba(0,0,0,0.122) 57.00%, rgba(0,0,0,0.058) 59.00%,
    rgba(0,0,0,0.019) 61.00%, rgba(0,0,0,0.003) 63.00%,
    rgba(0,0,0,0.000) 65.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 35.00%,
    rgba(0,0,0,0.997) 37.00%, rgba(0,0,0,0.981) 39.00%,
    rgba(0,0,0,0.942) 41.00%, rgba(0,0,0,0.878) 43.00%,
    rgba(0,0,0,0.790) 45.00%, rgba(0,0,0,0.683) 47.00%,
    rgba(0,0,0,0.562) 49.00%, rgba(0,0,0,0.438) 51.00%,
    rgba(0,0,0,0.317) 53.00%, rgba(0,0,0,0.210) 55.00%,
    rgba(0,0,0,0.122) 57.00%, rgba(0,0,0,0.058) 59.00%,
    rgba(0,0,0,0.019) 61.00%, rgba(0,0,0,0.003) 63.00%,
    rgba(0,0,0,0.000) 65.00%, rgba(0,0,0,0) 100%);
}

.melt__stars {
  background: var(--melt-stars);
}

/* Dark to light: source orientation, dark at the top. */
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="cream"] {
  --melt-field: linear-gradient(to bottom,
    #070A12 0%, #070A12 26%, #101830 33%, #2e3550 40%,
    #6b5a4e 47%, #C89A3A 54%, #E8B44A 61%, #EAD9AE 68%,
    var(--aeolus-cream) 74%, var(--aeolus-cream) 100%);
}

.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="gold"] {
  --melt-field: linear-gradient(to bottom,
    #070A12 0%, #070A12 26%, #101830 33%, #2e3550 40%,
    #6b5a4e 47%, #C89A3A 54%, #E8B44A 61%,
    var(--aeolus-gold-400) 74%, var(--aeolus-gold-400) 100%);
}

/* Light to dark: flip every source-side mask, layer position, and star field. */
.melt:not([data-from]),
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) {
  --melt-dark-direction: to top;
  --melt-light-direction: to bottom;
  --melt-stars:
    radial-gradient(1.3px 1.3px at 17% 70%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 75%, rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 68%, rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 79%, rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 83%, rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 86%, rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 26% at 50% 52%, rgba(243,208,106,0.12), transparent 60%);
}

.melt:not([data-from]) .melt__dark-aurora::before,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__dark-aurora::before {
  top: auto;
  bottom: -12%;
}

.melt:not([data-from]) .melt__light-aurora::before,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-aurora::before {
  top: -12%;
  bottom: auto;
}

/* The full cream aurora contains a blue lobe at its own bottom edge. Carrying
   that lobe to the melt's light endpoint creates a pale-blue handoff because
   the next cream section starts at the aurora's top edge. Keep the tail over
   the gold portion, then smootherstep it to zero before #EAD9AE -> cream. */
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="cream"] .melt__light-aurora,
.melt[data-from="cream"]:is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-aurora {
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.000) 40.00%,
    rgba(0,0,0,0.003) 40.93%, rgba(0,0,0,0.019) 41.87%,
    rgba(0,0,0,0.058) 42.80%, rgba(0,0,0,0.122) 43.73%,
    rgba(0,0,0,0.210) 44.67%, rgba(0,0,0,0.317) 45.60%,
    rgba(0,0,0,0.438) 46.53%, rgba(0,0,0,0.562) 47.47%,
    rgba(0,0,0,0.683) 48.40%, rgba(0,0,0,0.790) 49.33%,
    rgba(0,0,0,0.878) 50.27%, rgba(0,0,0,0.942) 51.20%,
    rgba(0,0,0,0.981) 52.13%, rgba(0,0,0,0.997) 53.07%,
    rgba(0,0,0,1.000) 54.00%, rgba(0,0,0,1) 58.00%,
    rgba(0,0,0,0.997) 58.80%, rgba(0,0,0,0.981) 59.60%,
    rgba(0,0,0,0.942) 60.40%, rgba(0,0,0,0.878) 61.20%,
    rgba(0,0,0,0.790) 62.00%, rgba(0,0,0,0.683) 62.80%,
    rgba(0,0,0,0.562) 63.60%, rgba(0,0,0,0.438) 64.40%,
    rgba(0,0,0,0.317) 65.20%, rgba(0,0,0,0.210) 66.00%,
    rgba(0,0,0,0.122) 66.80%, rgba(0,0,0,0.058) 67.60%,
    rgba(0,0,0,0.019) 68.40%, rgba(0,0,0,0.003) 69.20%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.000) 40.00%,
    rgba(0,0,0,0.003) 40.93%, rgba(0,0,0,0.019) 41.87%,
    rgba(0,0,0,0.058) 42.80%, rgba(0,0,0,0.122) 43.73%,
    rgba(0,0,0,0.210) 44.67%, rgba(0,0,0,0.317) 45.60%,
    rgba(0,0,0,0.438) 46.53%, rgba(0,0,0,0.562) 47.47%,
    rgba(0,0,0,0.683) 48.40%, rgba(0,0,0,0.790) 49.33%,
    rgba(0,0,0,0.878) 50.27%, rgba(0,0,0,0.942) 51.20%,
    rgba(0,0,0,0.981) 52.13%, rgba(0,0,0,0.997) 53.07%,
    rgba(0,0,0,1.000) 54.00%, rgba(0,0,0,1) 58.00%,
    rgba(0,0,0,0.997) 58.80%, rgba(0,0,0,0.981) 59.60%,
    rgba(0,0,0,0.942) 60.40%, rgba(0,0,0,0.878) 61.20%,
    rgba(0,0,0,0.790) 62.00%, rgba(0,0,0,0.683) 62.80%,
    rgba(0,0,0,0.562) 63.60%, rgba(0,0,0,0.438) 64.40%,
    rgba(0,0,0,0.317) 65.20%, rgba(0,0,0,0.210) 66.00%,
    rgba(0,0,0,0.122) 66.80%, rgba(0,0,0,0.058) 67.60%,
    rgba(0,0,0,0.019) 68.40%, rgba(0,0,0,0.003) 69.20%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
}

.melt[data-from="gold"]:is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) {
  --melt-field: linear-gradient(to bottom,
    var(--aeolus-gold-400) 0%, var(--aeolus-gold-400) 26%,
    #E8B44A 39%, #C89A3A 46%, #6b5a4e 53%, #2e3550 60%,
    #101830 67%, #070A12 74%, #070A12 100%);
}

/* Gold is the light-side composition only in mixed transitions that touch it. */
.melt[data-from="gold"],
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="gold"] {
  --melt-light-aurora:
    radial-gradient(56% 74% at 88% 8%, #FFF0C4 0%, rgba(255,240,196,0) 62%),
    radial-gradient(52% 66% at 12% 92%, #C96A2E 0%, rgba(201,106,46,0) 64%),
    radial-gradient(46% 60% at 44% 34%, #E8B44A 0%, rgba(232,180,74,0) 66%);
  --melt-light-weave: var(--aeolus-sailcloth-gold);
  --melt-light-weave-size: auto;
}

/* The dark-side aurora comes from the source preset; nightCool cools the rust lobe. */
.melt[data-from="nightCool"],
.melt:is([data-from="cream"], [data-from="gold"])[data-to="nightCool"] {
  --melt-dark-aurora:
    radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27,75,107,0) 62%),
    radial-gradient(64% 76% at 60% 98%, rgba(27,75,107,0.42) 0%, rgba(27,75,107,0) 72%),
    radial-gradient(54% 64% at 82% 14%, rgba(197,145,42,0.30) 0%, rgba(197,145,42,0) 70%),
    radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11,16,32,0) 66%);
}

/* Same-family behavior is preserved from SectionTransition. */
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) {
  --melt-field: linear-gradient(to bottom, #070A12 0%, #070A12 100%);
}

.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-aurora,
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-weave {
  display: none;
}

.melt[data-from="cream"][data-to="cream"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-cream) 0%, var(--aeolus-cream) 100%);
}

.melt[data-from="cream"][data-to="gold"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-cream) 0%, var(--aeolus-gold-400) 100%);
}

.melt[data-from="gold"][data-to="cream"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-gold-400) 0%, var(--aeolus-cream) 100%);
}

.melt[data-from="gold"][data-to="gold"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-gold-400) 0%, var(--aeolus-gold-400) 100%);
}

.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-aurora,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-weave,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-vignette,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-noise,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__stars,
.melt[data-stars="false"] .melt__stars,
.melt.melt-no-stars .melt__stars {
  display: none;
}

/* ==== /v2/v11.css ==== */
/* ==========================================================================
   v11.css — the brand layer.

   v11 keeps the v10 layout sheets (/v3/assets/css/aeolus.css + /Assets/home.css)
   because they are almost entirely token-driven: geometry, grid, and the whole
   responsive cascade come free and cannot drift. This file then (1) redefines
   every token those sheets read so no v10 colour or typeface survives, and
   (2) removes the v10 atmosphere so the new surface stack owns every backdrop.

   Load order: self-hosted.css → tokens.css → backgrounds.css → glass.css →
   melt.css → aeolus.css → home.css → THIS FILE (last, always wins).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKEN OVERRIDE — v10 names, v11 values
   -------------------------------------------------------------------------- */
:root {
  /* Type */
  --font-display: 'Zodiak', 'Times New Roman', serif;
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBMPlexMono', ui-monospace, Menlo, Consolas, monospace;

  /* Surfaces */
  --bg: var(--aeolus-cream);
  --bg-atmospheric: var(--aeolus-cream);
  --surface: #FFFFFF;
  --s2: #E9E4D9;
  --bg-dark: var(--aeolus-night-950);
  --bg-dark-2: var(--aeolus-night-900);
  --surface-dark: var(--aeolus-glass-dark-bg);
  --v10-night: var(--aeolus-night-950);

  /* Borders */
  --bd: var(--aeolus-hairline-on-light);
  --bd2: rgba(26,25,22,0.18);
  --bd-dark: var(--aeolus-hairline-on-dark);
  --bd-dark-gold: var(--aeolus-gold-border);
  --bd-dark-gold-soft: var(--aeolus-gold-ring);

  /* Text — alpha ladders, never grey hexes */
  --tx: var(--aeolus-text-on-light);
  --tx2: var(--aeolus-text-on-light-body);
  --tx3: var(--aeolus-text-on-light-label);
  --v10-muted-light: var(--aeolus-text-on-light-dim);
  --tx-on-dark: var(--aeolus-text-on-dark);
  --tx-on-dark-2: var(--aeolus-text-on-dark-lede);
  --tx-on-dark-3: var(--aeolus-text-on-dark-faint);
  --tx-on-dark-label: var(--aeolus-text-on-dark-label);
  --v10-muted-dark: var(--aeolus-text-on-dark-muted);

  /* Gold */
  --gold: var(--aeolus-gold-600);
  --gold-dk: var(--aeolus-gold-600);
  --gold-bright: var(--aeolus-gold-400);
  --gold-bd: var(--aeolus-gold-border);
  --gold-lt: var(--aeolus-gold-wash);

  /* Navy — the deck's ink-on-gold, used for button text */
  --navy: var(--aeolus-ink-gold);
  --navy-lt: var(--aeolus-navy-600);

  /* Status */
  --green: var(--aeolus-sage-deep);
  --red: var(--aeolus-rust);
  --sage: var(--aeolus-sage);
  --sev-critical: var(--aeolus-coral);
  --sev-warning: var(--aeolus-gold-400);
  --connected-green: var(--aeolus-green);

  /* Glass — v10 names resolve to deck recipes so any un-reclassed card
     still reads as brand glass rather than v10 glass. */
  --glass-dark-soft: var(--aeolus-glass-subtle-bg);
  --glass-dark-strong: var(--aeolus-glass-dark-bg);
  --glass-dark-gold-tint: var(--aeolus-glass-goldtint-bg);
  --glass-white: var(--aeolus-glass-light-subtle-bg);
  --glass-white-strong: var(--aeolus-glass-light-bg);
  --glass-white-border: var(--aeolus-glass-light-border);
  --glass-white-border-strong: var(--aeolus-glass-light-card-border);

  /* Blobs — the v10 canvas glows. Zeroed; the aurora layer replaces them. */
  --blob-gold: transparent;
  --blob-navy: transparent;
  --glow-gold-dark: transparent;
  --glow-navy-dark: transparent;

  /* Radii — deck geometry: 10px cards, 14px product panels, 8px tiles */
  --radius-sm: var(--aeolus-radius-tile);
  --radius-md: var(--aeolus-radius-card);
  --radius-lg: var(--aeolus-radius-panel);
  --radius-xl: var(--aeolus-radius-panel);
  --radius-2xl: var(--aeolus-radius-panel);

  /* Motion */
  --transition-base: 200ms cubic-bezier(0.16,1,0.3,1);
  --transition-glass: 260ms cubic-bezier(0.16,1,0.3,1);
}

body { background: var(--aeolus-night-950); }


/* --------------------------------------------------------------------------
   2. STRIP THE v10 ATMOSPHERE

   The old sheets paint their own sky: blob glows, a CSS starfield, a hero
   scrim stack, hard seam gradients and a fixed full-page grain. All of it is
   replaced by the per-surface layer stack, so all of it comes off. The
   classes stay on the DOM (zero deletions) and simply stop painting.
   -------------------------------------------------------------------------- */
.aeolus-canvas::before,
.aeolus-canvas::after,
.aeolus-canvas-dark::before,
.aeolus-canvas-dark::after {
  content: none;
}

.aeolus-canvas,
.aeolus-canvas-dark {
  background: transparent;
  isolation: isolate;
}

/* Grain is per-surface now (.bg-noise, night only). A fixed page-wide grain
   would also sit over cream and gold, which the brand forbids. */
body::before { content: none; }

/* Hero sky: v10's own SKIN layers stay off, because nightHero replaces them.
   .sky-base is a hand-rolled blob-glow night and .sky-stars is a 35-stop CSS
   starfield — both are the old palette painting its own sky, which is exactly
   what the v11 surface stack exists to supersede. */
.sky-base,
.sky-stars { display: none; }

/* .hero-scrim stays off, now on evidence rather than pending it. v10 needed a
   lower-left scrim because its own .sky-base painted a blob glow right where
   the copy sits. The v11 surface does not: measured under the reverted copy
   rect at 1440x900 with the star field fully on, the backdrop is luma 0.0080
   mean and white-at-0.94 contrast is 16.2 mean, with 0.035% of pixels bright
   enough to dip it. Those are individual stars, not a wash. Note the element is
   not in v11's markup at all, so "re-enabling" it would mean adding a div —
   another reason to settle the question by measurement instead of leaving it
   half-open. */
.hero-scrim { display: none; }

/* .hero::after STAYS OFF, and the reasoning is worth keeping because restoring
   it is the obvious-looking move.

   It is v10's 300px bottom fade to flat night, v10's structural answer to the
   hero/story handoff. It was restored here on exactly that logic and then
   measured, and it made the join worse in two ways at once. It paints the
   hero's last 300px to solid --aeolus-night-950, luma 9.94, while #story's
   surface measures 9.1 — so it manufactured a ~1.0 luma step at the boundary
   that is not there without it. Worse, it is opaque, so it buried the weave and
   noise in the hero's last 300px while #story shows them: a texture handoff,
   which is the very defect the join work below exists to remove. v10 could
   afford it because v10 had no weave.

   Nothing replaces it, because nothing needs to. The join system below already
   resolves every structured layer to flat --bg-base by the hero's bottom edge,
   and measured at the row level the boundary is continuous without it: the
   luma delta across the junction is 0.007-0.040 in four column bands, under the
   ambient row-to-row median of 0.061. The hero's last rows land on 9.11-9.14
   and #story opens on 9.09-9.13. v10 needed this fade because v10 had no join
   system; v11 does. */
.hero::after { content: none; }

/* The v10 constellation is restored wholesale: the dormant sails that draw in
   and light on sky hover. home.css already carries its geometry
   (.constellation-wrap left 38%, .sky-zone left 40% at z-3 over content at
   z-2) and its .hero.lit transitions, so un-hiding them is the whole revert on
   the CSS side; the build/hover/draw-in logic is ported into v11.js because
   v11 does not load home.js.

   No bottom mask on the wrap, which is worth stating because it was added and
   then removed on evidence. The reasoning for adding it was that the wrap spans
   the hero top to bottom and carries its own background stars, so the field
   would be cut dead at the join the way .bg-sky's was. Measured at the row
   level, it is not: with and without the mask the junction delta is identical
   to three decimals (0.007-0.040 across four column bands, against an ambient
   row-to-row median of 0.061). 79 background stars spread over 893x900 do not
   move a row average, and the sail's own ink stops ~50px short of the edge.

   The mask also cost something real. The sail's lowest ink sits at 0.862 of the
   wrap height, leaving 13.8% to fade in, and --night-join's 90px floor overruns
   that on short viewports (900x700 left 7px of margin). Below 820px home.css
   lifts the wrap to bottom:46%, where it stops ~390px short of the junction and
   the mask only ate sail: -38px at 390, -42px at 430. An unnecessary fix with a
   real failure mode is worse than no fix. */

/* Hard seams. The markup no longer emits them, but kill the rules so nothing
   reintroduces a banded edge. */
.seam,
.seam-sunset,
.seam-sunrise,
#problem .tone-flip { display: none; background: none; }

/* home.css re-declares --gold-dk on #problem itself, and an id out-ranks the
   :root aliases above, so the v10 value survived inside that whole section.
   #C89A3A is a melt gradient stop, not a UI ink. #problem is cream, and gold
   on cream is bronze. */
#problem { --gold-dk: var(--aeolus-bronze); }

/* Healthy status inside the connect mockup: the v10 mint is not in the
   palette. This one sits on night, so it takes the bright sage. */
.mock-status { color: var(--aeolus-sage); }

/* The v10 card rim: a masked full-opacity white-to-gold hairline. Every element
   carrying it now also carries a glass recipe, whose border and inset rim are
   the brand's own edge; two rims on one card read as a double border, and the
   white stop is off the alpha ladder. */
.crispy-flare::before { content: none; }


/* --------------------------------------------------------------------------
   3. SURFACE STACK PLUMBING

   backgrounds.css makes .bg-* an absolute layer at z-index 0. aeolus.css says
   `.aeolus-canvas-dark > * { z-index: 1 }`, which would lift the backdrop over
   itself, so pin it back down and lift the content wrappers above it.
   -------------------------------------------------------------------------- */
.section,
.hero,
.aeolus-canvas,
.aeolus-canvas-dark { position: relative; overflow: hidden; }

.aeolus-canvas > .bg-night,
.aeolus-canvas > .bg-nightHero,
.aeolus-canvas > .bg-nightCool,
.aeolus-canvas > .bg-cream,
.aeolus-canvas > .bg-gold,
.aeolus-canvas-dark > .bg-night,
.aeolus-canvas-dark > .bg-nightHero,
.aeolus-canvas-dark > .bg-nightCool,
.aeolus-canvas-dark > .bg-cream,
.aeolus-canvas-dark > .bg-gold { z-index: 0; }

.section-inner,
.hero-content,
.pr-inner,
.faq-inner,
.final-cta-inner { position: relative; z-index: 2; }

/* Continuous night runs.

   An earlier pass here claimed two stacked night sections meet cleanly because
   the vignette is painted in night-950, the same ink as the base. The vignette
   does — the aurora does not. --aeolus-aurora-dark ends on
   `radial-gradient(64% 76% at 60% 98%, rgba(178,58,22,0.58) ...)`, a warm red
   glow pinned to the BOTTOM of whatever box paints it, and opens with a #1B4B6B
   blue at 12% 24%, pinned to the top. Every .bg-* box re-runs that gradient
   inside its own bounds, so a night section ends red and the night section under
   it restarts blue. The vignette only reaches 0.92 alpha at its rim, so ~8% of
   the red survives to the edge. That colour step is the divider line.

   No melt belongs at a dark→dark junction, so the fix is to stop each surface's
   decorative layers before they reach it: fade aurora, weave, vignette and noise
   out toward the join and both sections meet on the same flat --bg-base. .bg-sky
   is deliberately excluded — stars are discrete points and cut invisibly, and
   masking it would eat the hero sail.

   A section mid-run (#results) needs both edges, so the two joins are carried as
   separate custom properties and composed into one mask. Zeroed on the base rule
   so the untouched case degrades to a fully opaque mask. */
/* Length chosen by measurement, not by eye. Median-filtered row sampling across
   the hero→#story junction gives a step of <=1/255 at 220px, 140px and 90px
   alike — all three are seamless — but the shorter the fade, the less of the
   surface's atmosphere it eats: the left-to-right tone spread 62px above the
   junction reads 14 at 220px, 18 at 140px and 29 at 90px. So the shortest fade
   that still measures flat is the right one. This matches the melt's own overlap
   scale, which does a comparable job, so the two seam lengths are bound
   together rather than tuned apart. */
:root { --night-join: var(--melt-overlap); }

/* Cream hosts are in the selector too. The system was written for the dark run,
   but the defect it exists to prevent is not a property of dark surfaces — it is
   a property of an aurora that terminates on a section edge. Measured at the
   #resources→#faq junction before this change, the row-to-row step reached 36.0
   luma against an ambient of 0.057, the worst junction on the page, and turning
   .bg-aurora off alone flattened all four column bands to the noise floor. The
   layers are only ever masked where a --join-* is non-zero, so extending the
   selector is a no-op everywhere the adjacency rules below do not fire. */
main > :is(.hero, .aeolus-canvas-dark, .aeolus-canvas)
  > :is(.bg-night, .bg-nightHero, .bg-nightCool, .bg-cream)
  > :is(.bg-aurora, .bg-weave, .bg-vignette, .bg-noise) {
  --join-top: 0px;
  --join-bottom: 0px;
  /* .bg-aurora alone is inset -14%, so its box overhangs the surface by 14% of
     the surface height at each end — 14/128 = 10.9375% of its OWN height, which
     is what a percentage mask stop resolves against. Without this the fade
     finishes below the visible edge and ~60% of the red still reaches the join.
     The other three layers are inset:0 and keep the default of zero. */
  --join-inset: 0%;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent var(--join-inset),
    #000 calc(var(--join-inset) + var(--join-top)),
    #000 calc(100% - var(--join-inset) - var(--join-bottom)),
    transparent calc(100% - var(--join-inset)));
  mask-image: linear-gradient(to bottom,
    transparent var(--join-inset),
    #000 calc(var(--join-inset) + var(--join-top)),
    #000 calc(100% - var(--join-inset) - var(--join-bottom)),
    transparent calc(100% - var(--join-inset)));
}

main > :is(.hero, .aeolus-canvas-dark, .aeolus-canvas)
  > :is(.bg-night, .bg-nightHero, .bg-nightCool, .bg-cream)
  > .bg-aurora { --join-inset: 10.9375%; }

main > :is(.hero, .aeolus-canvas-dark):has(+ .aeolus-canvas-dark)
  > :is(.bg-night, .bg-nightHero, .bg-nightCool)
  > :is(.bg-aurora, .bg-weave, .bg-vignette, .bg-noise) { --join-bottom: var(--night-join); }

main > :is(.hero, .aeolus-canvas-dark) + .aeolus-canvas-dark
  > :is(.bg-night, .bg-nightHero, .bg-nightCool)
  > :is(.bg-aurora, .bg-weave, .bg-vignette, .bg-noise) { --join-top: var(--night-join); }

/* The cream adjacencies are kept as their own pair rather than folded into the
   two rules above, because cream is not symmetrical with dark: only .bg-aurora
   and .bg-weave exist under .bg-cream, and only the aurora carries large-scale
   structure. The weave is a positionless repeating fill, so it is deliberately
   left out and runs straight through the join — the same call D1 made for the
   hero→#story texture, for the same reason. */
main > .aeolus-canvas:has(+ .aeolus-canvas) > .bg-cream
  > .bg-aurora { --join-bottom: var(--night-join); }

main > .aeolus-canvas + .aeolus-canvas > .bg-cream
  > .bg-aurora { --join-top: var(--night-join); }


/* HERO → #story: one continuous surface, not two joined ones.

   The join fade above already made the EDGE seamless — measured step across the
   boundary is 0.5 luma out of 255. The owner still saw a background change,
   because the change is regional, not a line. Profiling 380px either side at
   1440 (8 columns, copy hidden):

     hero,  y-38 : 10.5 13.0 15.1 17.5 19.4 19.0 17.0 15.1   bright centre
     hero,  y-0  :  9.9  9.9 10.2 10.3 10.2 10.2 10.2 10.2   flat, = --bg-base
     story, y+5  : 11.2 10.8 10.7 10.6 10.9 11.1 11.9 12.0
     story, y+62 : 23.4 20.5 18.8 13.1 16.7 27.7 28.1 29.6   bright EDGES

   The luminance distribution inverts: the hero is bright in the middle and dark
   at the rim, and 60px into #story it is dark in the middle and bright at the
   rim. That is --aeolus-aurora-dark restarting inside a new box — its blue is
   pinned to 12% 24% and its red to 60% 98%, so every surface re-runs the same
   sweep from the top. The fade can only hold the first ~100px; past it the
   aurora returns at full strength in a new arrangement, and the eye reads
   "different background" without ever seeing a line.

   So #story stops competing and simply continues. Its aurora and vignette are
   the only two layers with large-scale structure, and both are dropped; base,
   weave and noise carry no position, so what remains is flat --bg-base at luma
   10.0 — which is exactly the value the hero's own bottom row already measures
   (9.9-10.3), because the hero vignette crushes to base there. The two sections
   meet at the same number and #story never leaves it. There is no transition to
   perceive because there is no second surface: the night just keeps going.

   Weave and noise are raised to the hero's own settings for the same reason —
   soft weave beside strong weave is a texture handoff, which is the same defect
   one layer down. This is the "same background" reading of the directive rather
   than the "mirror the edge" fallback; mirroring only fixes the line, and the
   line was never what was wrong. */
#story > .bg-night {
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-noise-opacity: 0.15;
}

#story > .bg-night > .bg-aurora,
#story > .bg-night > .bg-vignette { display: none; }

/* With the structured layers gone, the weave and the noise should no longer be
   faded across this particular join — they should run straight through it.

   The join fade exists to stop two DIFFERENT arrangements meeting. Weave and
   noise have no arrangement: both are positionless repeating fills, identical
   on either side now that #story matches the hero's settings. Fading them out
   and back in gives a ~220px band where the texture thins to nothing and
   returns, which measured as a 0.83 luma sag through the junction — small, but
   it is the last thing there that changes. Carrying them across instead makes
   the texture itself continuous, which is stronger evidence of one surface than
   a matching luma is.

   Scoped to this pair on purpose. Aurora and vignette keep their fade on the
   hero side, and every other dark-to-dark join keeps the generic behaviour
   until the sections-5+ rhythm pass is agreed.

   Both halves are addressed by id. The generic join rule above scores (0,4,1)
   thanks to its `main >` and its four :is() groups, so a plain
   `.hero > .bg-nightHero > .bg-weave` at (0,3,0) silently loses to it — which is
   exactly what happened on the first attempt: #story went flat, the hero kept
   fading, and the junction gained a 1.0 luma step instead of losing one. */
#hero > .bg-nightHero > :is(.bg-weave, .bg-noise),
#story > .bg-night > :is(.bg-weave, .bg-noise) {
  --join-top: 0px;
  --join-bottom: 0px;
}

/* The star layer now needs the bottom fade the others already had.

   The join rule above deliberately excludes .bg-sky, on the grounds that stars
   are discrete points and cut invisibly. That was true while #story had a star
   field of its own for them to continue into. It is not true now: measured at
   1440, the hero's last 60px still carry 13-20 star points per 10k pixels and
   #story carries exactly 0, so the field stops dead on the boundary line — a
   density cliff in the one layer that was left unfaded.

   The exclusion's second reason — that masking .bg-sky would eat the hero sail
   — no longer applies at all. It was written when this layer drew the static
   v11 sail; the v10 hero revert moved the sail into .constellation-wrap and set
   this host to data-sky="stars", so there is nothing in here but the field.
   Masking it can only cost stars, which is the point. */
#hero > .bg-nightHero > .bg-sky {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%);
}


/* FIRST-CARRIER RULE — generalising hero→#story to the page's other two runs.

   The page is five runs, not nine sections: hero+#story, #problem, then
   #diagnostic+#results+#how, then #resources+#faq, then #cta. Within a run the
   OPENER carries the atmosphere and every continuation is flat, so a run reads
   as one surface that keeps going rather than as N surfaces that were joined
   well. No DOM is restructured to do this; it is the same drop-and-continue the
   owner already approved at hero→#story.

   Worth being precise about what this does and does not fix, because the two
   runs were in very different states.

   The dark run's junctions were already edge-clean. Measured row-to-row before
   this change: #diagnostic→#results 0.000 in all four column bands, #results→#how
   0.000-0.213, against an ambient row-to-row median of 0.17-0.40. The generic
   join fade was doing its job. What it could not fix is the thing D1 diagnosed —
   both sides fading to flat --bg-base means the aurora dies and then RESTARTS in
   a new box, and the profile shows exactly that: both sections touch 9.94 at the
   boundary and climb away from it on either side. So this is not a seam fix. It
   trades a double ramp for a single one, and buys continuous texture across the
   whole run.

   The cream run had a real seam, and it was the worst junction on the page:
   #resources→#faq stepped 1.4 / 11.8 / 36.0 / 16.7 luma across the four column
   bands in one row, against an ambient of 0.057. Re-measured row-wise on purpose
   — the 16.68 figure this was first reported at came from a 60px band average,
   which is not an edge measurement, and it happened to understate the worst band
   by more than a factor of two. Isolating layers put all of it on .bg-aurora
   (with it off, every band sat flat at the 0.057 noise floor), and the cause is
   the same restart D1 found on the dark side, minus any fade to soften it:
   cream sections had no join system at all until the selector above was widened.

   #faq drops its aurora and #resources' aurora now fades out into the join, so
   the two meet on flat cream and the run never leaves it. */
#results > .bg-night,
#how > .bg-night {
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-noise-opacity: 0.15;
}

#results > .bg-night > :is(.bg-aurora, .bg-vignette),
#how > .bg-night > :is(.bg-aurora, .bg-vignette) { display: none; }

#faq > .bg-cream > .bg-aurora { display: none; }

/* Texture runs unfaded across the two INTERNAL joins of the dark run, for the
   reason given at hero→#story: weave and noise are positionless repeating fills,
   now identical on all three sections, so fading them out and back in is a
   texture handoff where there is no arrangement to hand off. The run's outer
   edges are untouched — #diagnostic's top and #how's bottom both meet melts, and
   the generic rule leaves those at zero already because their siblings are the
   melt divs, not dark sections.

   Addressed by id because the generic rule scores (0,4,1); a class-only
   selector loses to it silently, which is the exact failure D1 hit. */
#diagnostic > .bg-night > :is(.bg-weave, .bg-noise),
#results > .bg-night > :is(.bg-weave, .bg-noise),
#how > .bg-night > :is(.bg-weave, .bg-noise) {
  --join-top: 0px;
  --join-bottom: 0px;
}


/* --------------------------------------------------------------------------
   4. MELT SEAMS

   The melt overlaps ~100px into each neighbour, so the sections it joins must
   not clip it and must keep their content out of the overlap zone.
   -------------------------------------------------------------------------- */
/* Bound at :root so the clearance below does arithmetic on the same numbers
   melt.css reads. melt.css declares both as var(--melt-height, <default>)
   precisely so authors can bind them.

   --melt-height is an OWNER-ALIGNED DEVIATION from the DS default of
   clamp(340px, 44vh, 460px): at the DS height the flat ends read as ~112px of
   dead colour per end, which reads as empty page and no section padding can
   recover it. Shortening the component is the only lever that touches it.

   --melt-overlap is height/2 — an OWNER DEVIATION (2026-09-03) from the DS
   default of clamp(90px, 12vh, 120px), and it is load-bearing for the veil
   field below: at half the height, the two neighbouring section boxes meet
   edge-to-edge exactly at the melt's vertical midline, so there is no orphan
   strip where only the night body shows behind the melt. The veil dissolve can
   therefore reveal the REAL section background everywhere below the midline.
   Do not lower it: the seam the sections form at the midline is hidden by the
   veil being fully opaque until 49%, and both live only ~1% apart. */
:root {
  --melt-height: clamp(300px, 34vh, 380px);
  --melt-overlap: calc(var(--melt-height) / 2);
}

.melt { position: relative; z-index: 1; }

/* Clearance is measurable, so measure it instead of padding by feel.

   .melt__composite is masked to alpha 0 at both ends and only reaches 1.0 at
   22%; it first crosses ~0.12 (the point content stops being legible under it)
   at 5.87% of the melt's height. The melt's top edge sits one overlap above the
   junction, so the earliest unusable pixel in the section above is
   overlap - 0.0587 x height from its bottom. The mask is symmetric, so the
   section below needs the same. That is the whole requirement — an earlier pass
   used the full overlap plus another 4.5rem on top, which cleared the melt twice
   over and produced the empty cream Sam is seeing.

   Rounded to 0.06 for legibility; the extra ~2px lands in the safety margin.
   The breathing term is the actual gap between the last legible pixel and the
   copy, and is all that is left to taste. */
:root { --melt-clear: calc(var(--melt-overlap) - 0.06 * var(--melt-height)); }
:root { --melt-breathe: clamp(1rem, 2vw, 2rem); }

main > .melt + section,
main > .melt + section#problem { padding-top: calc(var(--melt-clear) + var(--melt-breathe)); }
main > section:has(+ .melt) { padding-bottom: calc(var(--melt-clear) + var(--melt-breathe)); }




/* --------------------------------------------------------------------------
   5. TYPOGRAPHY

   Zodiak carries every headline; General Sans carries body and ALL numerals
   with tabular figures; IBMPlexMono is reserved for in-card data labels.
   -------------------------------------------------------------------------- */
body,
input, button, select, textarea {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4,
.t-display-hero, .t-display-xl, .t-display-lg, .t-display-md {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--aeolus-ls-display);
}

/* Zodiak sits optically larger than Cormorant at the same size and its italic
   is far more assertive, so the hero ladder is retuned rather than inherited. */
.hero h1 { font-weight: 300; line-height: var(--aeolus-lh-hero); }
.hero h1 span { font-weight: 300; line-height: 1.04; }
.hero h1 em {
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.018em;
  text-shadow: none;
}

/* --- The scale -----------------------------------------------------------

   BRAND-SPEC §3 gives a web scale (--aeolus-web-fs-*: hero 56 / xl 44 / lg 38 /
   h2-sm 28 / lede 20). Those are already the design system's own web
   translation, not slide px, so they are the desktop target — every step below
   lands on its token exactly at full width.

   The one deliberate departure is the hero. 56px is right for a slide, where
   the headline owns the whole frame; in a 724px glass card on a 1440px page it
   reads undersized against the 44px H2 one scroll below. The ceiling is 64px,
   which restores a decisive 1.45 top-of-scale step. Everything else is
   untouched deck values, so the departure is one number, not a drift.

   Clamps keep their fluid shape per CLAUDE.md — only ceilings are pinned.
   Floors are set so the hero still fits its measure at 390px. */
.t-display-hero { font-size: clamp(2.15rem, 5.2vw, 64px); line-height: var(--aeolus-lh-hero); }
.t-display-xl   { font-size: clamp(1.95rem, 3.9vw, var(--aeolus-web-fs-display-xl)); }
.t-display-lg   { font-size: clamp(1.65rem, 2.9vw, var(--aeolus-web-fs-display-lg)); }
.t-display-md   { font-size: clamp(1.3rem, 2.1vw, var(--aeolus-web-fs-h2-sm)); }
.t-display-xl,
.t-display-lg,
.t-display-md   { line-height: var(--aeolus-lh-display); }
.t-display-hero, .t-display-xl, .t-display-lg, .t-display-md { letter-spacing: var(--aeolus-ls-display); }

.t-lede { font-size: clamp(1rem, 1.25vw, var(--aeolus-web-fs-lede)); line-height: var(--aeolus-lh-lede); font-weight: 400; }
/* Hero lede. The ceiling was already the deck's 20px lede token, but the 1.15vw
   middle term meant it only reached 20px past 1740px — at 1440 it rendered
   16.6px. 1.45vw lands it on 20px at 1440 and holds the token as the cap. */
.hero-sub {
  font-size: clamp(1rem, 1.45vw, var(--aeolus-web-fs-lede));
  line-height: var(--aeolus-lh-lede);
  color: rgba(255, 255, 255, 0.72);
}

/* --- Headline grammar (mandate §0-2) -------------------------------------

   "Headlines are exactly two lines, one color. Emphasis is weight only: the
   second line is slightly bolder. No two-tone headers." BRAND-SPEC §3.1 also
   notes Zodiak has no italic face, so the browser would be synthesising a
   slant that the brand never uses.

   The v10 markup paints its second lines gold and italic through inline style
   attributes and the .em-gold classes, so these declarations have to out-weigh
   an inline style. That is what !important is for here — it is beating the
   old DOM, not another rule of mine. */
/* Stated structurally rather than as a list of ids: ANY emphasis inside ANY
   heading, plus the two v10 gold-ink classes. An earlier id-by-id version
   missed `#problem .esc-head em` (home.css:316), which is exactly the failure
   mode a list invites. */
:is(h1, h2, h3, h4) :is(em, span, i, b, strong),
.story-tagline,
.em-gold,
.em-gold-bright {
  color: inherit !important;
  font-style: normal !important;
  text-shadow: none;
}

/* The signature two-line headline, named in BRAND-SPEC §3.1 with this page's
   own hero as the example: same size on both lines, 500 over 700.

   RESCALED for the v10 hero revert. The 76px ceiling belonged to concept 1a,
   whose unboxed copy ran across a 1240px grid — there, scale WAS the structure.
   v10 puts the copy back in a 640px column (home.css .hero-copy), and 76px
   cannot fit "We rebuild revenue" in 640px, so the old value would wrap the
   headline to three or four lines and break the two-line mandate outright.

   The target is v10's own footprint, which the owner called correct, expressed
   as ONE size because the mandate forbids the two-size treatment v10 used
   (span clamp(34,4.6vw,60) under em clamp(40,5.9vw,82)). The middle term 4.6vw
   is v10's own; the ceiling sits between v10's two, nearer the larger line
   since that is the one that set the hero's presence.

   Fit is the binding constraint, not taste. Measured for Zodiak 500,
   "We rebuild revenue" needs 9.474 x font-size px; weight 700 on line two is
   wider per character but the string is shorter, so line one governs. 640px
   column / 9.474 = 67.5px, so the ceiling is set below it with slack rather
   than on the line — 1a was nearly lost to sitting exactly on a budget edge.
   Verified by measurement at 1920/1440/1280/1024, not by the arithmetic alone. */
.hero h1 span,
.hero h1 em {
  display: block;
  font-size: clamp(2.15rem, 4.6vw, 64px) !important;
  line-height: var(--aeolus-lh-hero);
  letter-spacing: var(--aeolus-ls-display);
}
.hero h1 span { font-weight: 500 !important; }
.hero h1 em   { font-weight: 700 !important; }

/* Mobile step, at the same 820px breakpoint v10 switches its own hero at.

   A single clamp cannot cover both ends. Below ~750px the 4.6vw middle term
   falls under the floor, so the floor alone governs — and a constant floor
   cannot track a viewport that keeps narrowing. Measured at the 2.15rem floor:
   390px left 16.2px of slack, and 360px went to -13.8px, i.e. the headline
   wrapped to three lines and broke the two-line mandate on a common phone.

   So the mobile term is derived from the fit rule rather than picked. The
   column here is the viewport minus var(--pad) twice, and --pad is pinned to
   its 1.5rem floor at these widths, giving avail = W - 48. With the same 9.474
   ratio the ceiling is (W - 48) / 9.474 = 10.56vw - 5.07px, so the value is set
   just under it at 10vw - 5px, which clears at 320, 360, 390 and 430 rather
   than at the one width it was checked on. 40px cap keeps it from crossing back
   over the desktop curve at the breakpoint. */
@media (max-width: 820px) {
  .hero h1 span,
  .hero h1 em { font-size: clamp(27px, calc(10vw - 5px), 40px) !important; }
}

/* Mid-page headings: 400 on night, 300 on cream (light surfaces take the
   lighter serif), with the emphasis line one step up at 500. */
#story-title,
#diagnostic-title,
#results-title,
#how-title,
#cta-title { font-weight: 400 !important; }

#problem-title,
#resources-title,
#faq-title,
.esc-head { font-weight: 300 !important; }

#story-title em,
#problem-title span:last-child,
#diagnostic-title em,
#results-title em,
#how-title em,
#cta-title em,
#resources-title em,
#faq-title em,
.esc-head em { font-weight: 500 !important; }

/* #problem's heading carries its whole scale inline; bring it onto the deck's
   H2 step so it stops out-ranking the hero. */
#problem-title {
  font-size: clamp(1.95rem, 3.9vw, var(--aeolus-web-fs-display-xl)) !important;
  line-height: var(--aeolus-lh-display) !important;
  letter-spacing: var(--aeolus-ls-display) !important;
}
/* Mandate §0-2: headlines are exactly two lines. These two were single-line
   sentences, so each is split at its phrase boundary into a block span + block
   em. The em keeps a leading space so the heading's text content stays
   byte-identical to v10; it collapses at the start of a block line. */
#resources-title span, #resources-title em,
#faq-title span, #faq-title em { display: block; }

#story-title {
  font-size: clamp(1.95rem, 3.9vw, var(--aeolus-web-fs-display-xl)) !important;
  line-height: var(--aeolus-lh-display) !important;
  letter-spacing: var(--aeolus-ls-display) !important;
}

/* --- No bold emphasis inside paragraphs (mandate §0-3) -------------------
   Again competing with inline font-weight, hence !important. */
p b, p strong,
.t-lede b, .t-lede strong,
.dtl-lede b, .dtl-lede strong,
.faq-a-inner b, .faq-a-inner strong {
  font-weight: inherit !important;
  color: inherit !important;
}

/* Brand copy that carries a pinned size in a style attribute. Matched on the
   attribute itself rather than by position, so the selector says exactly which
   pin it replaces and no markup changes. Each keeps its v10 value as the
   clamp ceiling, so desktop is unchanged and only small screens gain scaling.
   The ~37 remaining pins are all <=11px product-UI mockup micro-labels; those
   stay fixed on purpose and are listed as exemptions in V11_NOTES. */
#story p[style*="350 16px"] {
  font-size: clamp(15px, 1.15vw, var(--aeolus-web-fs-body)) !important;
}
#story div[style*="600 17px"] {
  font-size: clamp(15px, 1.3vw, 17px) !important;
}
#story a[data-booking] span[style*="15px"] {
  font-size: clamp(13px, 1.1vw, 15px) !important;
}
#story span[style*="400 13px"] {
  font-size: clamp(11px, 0.9vw, var(--aeolus-web-fs-label)) !important;
}
/* The four problem-card headlines: display face at a pinned 1.3rem. */
#problem p[style*="font-size:1.3rem"] {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem) !important;
}

/* Fixed 14px narrative type, which the mandate does not exempt.

   home.css:329 sets this with the `font:` shorthand, so the 14px and the 1.5
   line-height arrive together and only font-size needs replacing. It was already
   clamped below 900px by the block underneath, so the pinned value was only ever
   rendering on desktop — which is the range where a fixed size is least
   defensible.

   The term is fitted to meet that block rather than guessed: 0.28vw + 10px
   resolves to 12.52px at 900 and 14.03px at 1440, so it hands over to the mobile
   clamp's 12.5px ceiling at exactly the breakpoint and reaches the deck's 14px
   at the design width. No step at the boundary in either direction. */
#problem .esc-stat p {
  font-size: clamp(12.5px, calc(0.28vw + 10px), 14px) !important;
}

/* owner 2026-08-26 (applied by Argus): the AI-escalation copy was hard to read
   on the cream + aurora wash — lede and stat captions step up one rung of the
   on-light ladder (0.66 → 0.78) and the lede sheds its 350 weight; the mono
   source line rises from label (0.48) to body (0.66) and gains half a point. */
#problem .esc-sub {
  color: var(--aeolus-text-on-light-body-strong);
  font-weight: 400;
}
#problem .esc-stat p { color: var(--aeolus-text-on-light-body-strong); }
#problem .esc-src {
  color: var(--aeolus-text-on-light-body);
  font-size: 10px;
}

/* home.css pins these again inside its mobile block, which is the range the
   clamps exist to serve. It follows this rule in source order, so below 900px
   it still wins at equal specificity — which is the intended handover. */
@media (max-width: 900px) {
  #problem .esc-head { font-size: clamp(1.45rem, 5.2vw, 1.72rem) !important; }
  #problem .esc-sub { font-size: clamp(0.88rem, 3vw, 0.95rem) !important; }
  #problem .esc-stat p { font-size: clamp(11px, 3.2vw, 12.5px) !important; }
  .dtl-step { font-size: clamp(0.68rem, 2.4vw, 0.78rem) !important; }
  .dtl-title { font-size: clamp(1.15rem, 4.4vw, 1.42rem) !important; }
  .dtl-desc { font-size: clamp(0.85rem, 3vw, 0.92rem) !important; }
  .dtl-close { font-size: clamp(1.15rem, 4.3vw, 1.4rem) !important; }
}

/* Data labels: mono, uppercase, letter-spaced. Per mandate §0-1 these survive
   only as data captions inside cards — every label that sat above a headline
   has been removed from the markup. */
.label,
.footer-col-label,
.mock-label,
.eng-when,
.dtl-step {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: var(--aeolus-ls-label);
  text-transform: uppercase;
}

/* Stage timing, demoted into the card (owner ruling on mandate §0-1).

   In v10 this span was a sibling of .eng-card, absolutely positioned at
   `top:0; left:22px` (home.css:487) — sitting ON the timeline rail
   (.eng-stage::after, same left, top 9px) with a background knockout to break
   the rail behind its text. By function that is an axis tick label. By position
   it is four gold mono uppercase labels stacked directly above four headings,
   which is the exact shape §0-1 removes, and it is not inside a product-UI
   mockup, so the exemption does not reach it.

   Demoted rather than deleted: the timing is real data. The span now closes its
   own .eng-card as a caption row, so no label sits above a headline anywhere on
   the page, and the copy is untouched. The rail runs unbroken now that nothing
   is knocked into it, which is what a timeline axis should do — hence no
   knockout background here. margin-top:auto pins the caption to the card floor
   so the four rows align regardless of body-copy length. */
.eng-when {
  position: static;
  margin-top: auto;
  padding: 14px 0 0;
  background: none;
}

/* The deck's 13px mono, held fluid rather than pinned. Deliberately NOT applied
   to .mock-label / .eng-when / .dtl-step — those sit inside product-UI mockups
   where their smaller size is load-bearing. */
.label,
.footer-col-label { font-size: clamp(11px, 0.9vw, var(--aeolus-web-fs-label)); }

/* Display numerals (stat counters, ledger and score readouts) are the display
   serif, sitewide. Owner, 2026-10-23: keep the serif numerals from the v12
   homepage and make every page match. Was General Sans everywhere. */
.stat-num, .pct, .v, [data-count] {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
}


/* --------------------------------------------------------------------------
   6. GLASS ON THE REMAINING v10 CARD CLASSES

   Cards that map 1:1 to a recipe got their class in the markup. These are the
   ones where the recipe depends on position (the "after" stage) or where the
   v10 class is already unique enough to bind by selector.
   -------------------------------------------------------------------------- */
.layer-card,
.layer-card-dark,
.layer-well,
.layer-well-dark,
.layer-panel-dark,
.glass-card,
.ins-card,
.eng-card,
.faq-list { border-radius: var(--aeolus-radius-card); }

/* NESTED SURFACES INSIDE A GLASS PANEL — the story ledger and the logo well.

   Both carried glass-darkSubtle inside the glass-dark panel and both read as
   flat grey slabs. The cause is measured, not taste: Chrome applies the
   parent's backdrop-filter a second time when a backdrop-filtered child sits
   inside it. Night 6,9,16 -> panel's 10% white -> 31,34,40 -> that wash
   applied again -> 53,56,62 -> the child's own 8% -> 69,72,79, which is what
   the screenshot sampled on all three channels. A single correct wash lands
   at 48,52,60. So the nesting was charging a ~17% neutral white wash for an
   8% recipe, and a neutral wash over a near-black field is the definition of
   grey: the sampled chroma fell from the panel's 13 to 9.

   The design system already answers this — tokens.css calls the nested tile
   "no backdrop-filter, hairline inset ring". It suits #story doubly well
   because this section's aurora is display:none (see the hero handoff block
   above), so the panel's backdrop is a flat field: blur has nothing to
   refract and only costs hue. Definition here has to come from edge and
   tint, which is exactly what the tile recipe is.

   .glass-tile declares no backdrop-filter, so it cannot override the one
   .layer-card-dark sets in aeolus.css. Turning it off by name is load-bearing;
   without it the double wash survives the class swap and nothing changes. */
#story .story-ledger,
#story .story-well {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--aeolus-glass-subtle-border);
  border-radius: var(--aeolus-radius-tile);
}

/* Card interiors.

   Most cards on this page get their padding from an inline style, and the
   v10 .layer-* primitives carry none of their own. These three were bare
   layout wrappers in v10 — no visible edge, so no padding — and as glass
   cards their text would otherwise run flush to the rim. max-width is
   widened by the same amount so the text measure is unchanged (box-sizing
   is border-box site-wide). */
/* HERO — concept 1a, unboxed and type-led (owner pick).

   The glass card is gone, not restyled. glass.css builds every recipe out of
   four custom properties and nothing else, so resetting those four is a
   complete un-box: no fill, no rim, no blur, no shadow, and no ::before to
   chase. The class stays on the element (nothing is deleted from the markup)
   but it now paints nothing, and the padding that only existed to hold text off
   a rim goes with it.

   Readability comes from the nightHero vignette. v10 also had .hero-scrim behind
   this copy; it is held off above until contrast says it is needed.

   The card is gone but the COLUMN is v10's. home.css already sets .hero-copy to
   640px and .hero-content to v10's off-centre geometry, so the revert is simply
   to stop overriding them — the only thing left here is the un-box, which v10
   agrees with anyway (its .hero-copy never had a card). */
.hero-copy.glass-heroDark {
  --glass-bg: transparent;
  --glass-border: 1px solid transparent;
  --glass-blur: none;
  --glass-shadow: none;
  padding: 0;
}

.final-cta-inner {
  padding: clamp(30px, 3.6vw, 52px) clamp(26px, 3vw, 44px);
  max-width: 804px;
}
.faq-list { padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px); }

/* Engagement stages: subtle deck cards, with the final "Handoff" stage
   carrying the gold tint as the after-state. */
.eng-card {
  background: var(--aeolus-glass-subtle-bg);
  backdrop-filter: var(--aeolus-glass-subtle-blur);
  -webkit-backdrop-filter: var(--aeolus-glass-subtle-blur);
  border: 1px solid var(--aeolus-glass-subtle-border);
  box-shadow: var(--aeolus-glass-subtle-shadow);
}
/* The stage body copy, also pinned at 14px by a home.css shorthand (line 491)
   and with no mobile block behind it at all, so unlike .esc-stat p this one was
   fixed at every width. Same term, so the two narrative sizes on the page track
   each other instead of drifting apart. */
.eng-what {
  font-size: clamp(12.5px, calc(0.28vw + 10px), 14px);
}

/* The final stage takes the WHOLE goldTint recipe, not just its two colours.

   This previously swapped only background and border-color and left the subtle
   blur and shadow underneath, which is the "recipes travel together" rule
   broken: glass.css:55-60 defines goldTint as goldtint-bg + goldtint-border +
   dark-blur + dark-shadow, and a card wearing two of the four is not a
   documented surface. In this pair the blur tokens happen to be identical
   (blur(18px) saturate(1.25) both), so the only property that actually rendered
   wrong was the shadow — subtle is 0 26px 58px rgba(0,0,0,.38) + inset .24
   against goldTint's 0 36px 70px rgba(0,0,0,.42) + inset .28, so the after-state
   card sat lower and lit flatter than the deck specifies. All four are restated
   anyway: the blur being coincidentally equal today is not a reason to leave the
   recipe half-applied tomorrow. */
.eng-stage:last-child .eng-card {
  background: var(--aeolus-glass-goldtint-bg);
  backdrop-filter: var(--aeolus-glass-dark-blur);
  -webkit-backdrop-filter: var(--aeolus-glass-dark-blur);
  border: 1px solid var(--aeolus-glass-goldtint-border);
  box-shadow: var(--aeolus-glass-dark-shadow);
}

/* Diagnostic timeline: the product-UI preview shell.

   The glass belongs on .dtl-scaler, not .dtl-card. home.css:390 makes .dtl-card
   a bare `width: 100%` layout wrapper spanning a whole grid column with
   `padding-right: var(--conn)` (up to 52px), and home.css:391 makes .dtl-scaler
   the thing with an actual edge — max-width 540px, aspect-ratio 600/560,
   overflow hidden, hairline, shadow. An earlier pass here glassed .dtl-card,
   which painted a ~700px lit slab across the full column behind a 540px mockup
   and offset from it by the connector padding. That extra rectangle, hanging out
   past the mockup's rim on the side the row is NOT on, is the card Sam saw
   floating half outside its frame.

   So the scaler takes the deck's dark-glass edge in place of v10's ad-hoc gold
   hairline and triple drop shadow, and .dtl-card goes back to being invisible.
   No backdrop blur: the iframe covers the box opaquely, so it would cost a
   compositing layer per card and render nothing. */
.dtl-scaler {
  border-radius: var(--aeolus-radius-panel);
  border: 1px solid var(--aeolus-glass-dark-border);
  box-shadow: var(--aeolus-glass-dark-shadow);
}
.mobile-preview { border-radius: var(--aeolus-radius-panel); overflow: hidden; }

/* Nested tiles: no second blur, just the deck's inset hairline ring. */
.glass-tile-light,
.layer-well {
  border-radius: var(--aeolus-radius-tile);
  background: var(--aeolus-tile-bg);
  box-shadow: var(--aeolus-tile-ring);
  border: none;
}

/* Problem-section chrome. */
.fd-drop,
.esc-row {
  border-radius: var(--aeolus-radius-tile);
  background: var(--aeolus-tile-bg);
  box-shadow: var(--aeolus-tile-ring);
}


/* --------------------------------------------------------------------------
   7. MICRO-COMPONENTS
   -------------------------------------------------------------------------- */

/* CTA slab — SOLID gold chip, dark ink, one small radius. OWNER DEVIATION from
   BRAND-SPEC:337-338, which specifies a translucent slab (fill rgba(243,208,106,
   0.12), gold ring, #F3D06A text, radius 10px). That is what this block used to
   be, and it is exactly what the owner rejected: on cream its gold label measures
   1.28:1 against --aeolus-cream, i.e. legally invisible, and even on night the
   12%-alpha fill reads as an outline rather than a button.

   The solid form is ADAPTED from the DS, not invented. glass.css's .glass-ctaGold
   could not be used as-is — it is rgba(255,255,255,0.12) + blur(30px), a
   translucent glass CARD recipe, so it delivers less fill than what it replaces.
   The documented pairing is elsewhere: BRAND-SPEC:112 calls gold-400 a "gold
   surface", BRAND-SPEC:121 calls ink-gold "ink on gold", and glass.css carries an
   onGold recipe for "cards on gold surface". ink-gold on gold-400 measures
   12.39:1.

   --v11-cta-radius is declared here rather than in tokens.css because that file
   is Polaris's. 5px is the midpoint of the owner's 4-6px range and matches
   --aeolus-radius-rule, so the page gains no new geometry. It is the ONLY radius
   any CTA takes, primary or secondary, on every surface. */
:root { --v11-cta-radius: 5px; }

.btn-gold,
.hero-primary,
.nav-cta,
#story a[data-booking] {
  border-radius: var(--v11-cta-radius);
  padding: 12px 26px;
  background: var(--aeolus-gold-400);
  border: none;
  box-shadow: none;
  color: var(--aeolus-ink-gold);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 14px);
}
/* The lift strengthens what the chip IS: a gold surface, so it brightens to the
   next gold up rather than gaining a ring. --aeolus-gold-hover (#FFE9A8) is
   documented as a link hover ink; used as a surface here it only widens the ink
   contrast (12.39:1 -> 14.6:1), so nothing regresses. */
.btn-gold:hover,
.hero-primary:hover,
.nav-cta:hover,
#story a[data-booking]:hover {
  background: var(--aeolus-gold-hover);
  color: var(--aeolus-ink-gold);
  box-shadow: 0 8px 24px var(--aeolus-gold-glow);
  transform: translateY(-1px);
  /* aeolus.css:399 adds filter: brightness(1.06) to .btn-gold:hover. It ties this
     rule on specificity and only loses on source order, so it survives on any
     property this block does not restate. Left alive it would brighten a surface
     that is already stepping up its own gold, i.e. two lift mechanisms stacked.
     Reset so the hover is exactly the one property change described above. */
  filter: none;
}

/* .mobile-menu a (aeolus.css:700) is (0,1,1) and .mobile-menu .nav-cta (:706) is
   (0,2,0), so both out-rank the .nav-cta in the group above. The menu's chip was
   coming out with --tx ink at weight 500 and 0.9rem while the desktop chip took
   ink-gold at 600 — same component, two finishes. Scoped here to match. */
#mobile-menu.mobile-menu .nav-cta {
  color: var(--aeolus-ink-gold);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 14px);
}

/* A solid gold chip is unmissable on night (13.23:1) and on nightCool (12.90:1),
   but on cream the chip's own edge is what disappears: gold-400 against
   --aeolus-cream is 1.28:1, the same 1.28:1 that made the old label unreadable.
   The label is fine — it is dark ink now — so only the boundary needs help. It
   gets a gold-600 ring (1.88:1 against the fill, enough to draw the shape without
   becoming a second colour) and the DS's warm-tinted light shadow. Never a black
   shadow on cream. */
#resources .btn-gold {
  box-shadow: inset 0 0 0 1px var(--aeolus-gold-600), var(--aeolus-glass-gold-shadow);
}
#resources .btn-gold:hover {
  box-shadow: inset 0 0 0 1px var(--aeolus-gold-600), var(--aeolus-glass-light-shadow);
}

/* The story section's booking link carries its whole v10 look in a style
   attribute (solid gold, #241d0c ink, 11px radius), which no stylesheet can
   reach. Matched by attribute so the markup itself stays untouched. Its v10 fill
   was already solid gold, so only the radius and the ink token change here. */
#story a[data-booking] {
  background: var(--aeolus-gold-400) !important;
  color: var(--aeolus-ink-gold) !important;
  border-radius: var(--v11-cta-radius) !important;
  padding: 12px 26px !important;
  font: 600 clamp(13px, 1vw, 14px) var(--font-body) !important;
  box-shadow: none !important;
}
#story a[data-booking]:hover {
  background: var(--aeolus-gold-hover) !important;
  color: var(--aeolus-ink-gold) !important;
  box-shadow: 0 8px 24px var(--aeolus-gold-glow) !important;
}

/* Pills. */
.chip {
  border-radius: var(--aeolus-radius-pill);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: var(--aeolus-ls-micro);
}

/* "Acquired" chip — OWNER OVERRIDE of the Pill.tsx recipe.

   Directive: story-section-polish-brief.png, item 5, relayed 2026-08-25. The
   owner ruled the bronze pill both too quiet and the wrong shape, and asked
   for the CTAs' hard-edge box language and much more prominence. That reverses
   my own earlier ruling, which had put spec fidelity first and left on-dark
   softness to him. This IS that review, so the override stands and the bronze
   note it replaced is retired rather than argued with.

   Shape joins --v11-cta-radius, the page's one CTA shape rule, instead of the
   pill family. Colour goes back to gold and past where v10 had it: the fill
   and border are the design system's goldTint pair, which is 1.75x v10's
   border alpha, and the label is gold-bright at 9.1:1 on the tile beneath it.
   Kept as tinted glass rather than a solid gold fill on purpose - there are
   four of these in one well, and a solid fill would make them read as four
   buttons competing with the section's actual CTA. */
.acq-badge {
  border-radius: var(--v11-cta-radius);
  background: var(--aeolus-glass-goldtint-bg);
  border: 1px solid var(--aeolus-glass-goldtint-border);
  color: var(--gold-bright);
  height: 24px;
  padding: 0 10px;
  font: 600 10px var(--font-mono);
  letter-spacing: var(--aeolus-ls-micro);
}

/* home.css:303 hardcodes #B5432F on 28 rendered chips, and the id-scoped
   selector out-ranks anything unscoped. Same maroon the inline styles took. */
#problem .fd-chips .bad {
  background: rgba(122, 43, 43, 0.08);
  border-color: rgba(122, 43, 43, 0.35);
  color: var(--aeolus-cat-maroon);
}
/* Secondary CTA — a ghost slab, NOT a pill.

   Its class name is the only reason it was grouped with .acq-badge/.chip, and
   that was wrong: it is the hero's secondary button, sitting beside .hero-primary,
   and BRAND-SPEC:336 gives buttons exactly one geometry ("radius 10px, not a
   pill", padding 12px 26px). A 999px pill next to a 10px slab is two shape
   languages in one action row. So it inherits the slab's radius, padding, type
   and hover lift, and differs only in surface: no gold fill, a plain hairline
   ring, body ink. The descendant form matches home.css:200's specificity, which
   would otherwise keep its own padding.

   It now takes --v11-cta-radius, the same 5px as the primary: the owner's shape
   rule is one radius for EVERY CTA, and this button sits directly beside the
   primary in the hero action row, so any difference would read as a mistake.

   Quieter than the primary, but no longer a pale ghost: the ring starts at
   hairline-on-dark-STRONG (0.16) rather than 0.12, and the label starts at full
   --aeolus-text-on-dark instead of the dimmer body ink. That is the rest state
   the hover used to introduce. */
.glass-pill-dark,
.hero-actions .glass-pill-dark {
  border-radius: var(--v11-cta-radius);
  padding: 12px 26px;
  background: var(--aeolus-glass-subtle-bg);
  border: none;
  box-shadow: inset 0 0 0 1px var(--aeolus-hairline-on-dark-strong);
  color: var(--aeolus-text-on-dark);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 14px);
  letter-spacing: normal;
  text-transform: none;
}
/* aeolus.css:386 tints this gold on hover, which would make the secondary compete
   with the primary chip. Held to its own surface: since the rest state took the
   old hover's ring, the lift is now carried by the fill stepping up one rung of
   its own glass family (subtle -> dark) plus the translate. No gold, no ring
   colour change. */
.glass-pill-dark:hover {
  background: var(--aeolus-glass-dark-bg);
  border: none;
  box-shadow: inset 0 0 0 1px var(--aeolus-hairline-on-dark-strong);
  color: var(--aeolus-text-on-dark);
  transform: translateY(-1px);
}

/* Glow rule — the brand's divider is a blurred bar, never a 1px line. */
.rule-gold {
  background: var(--aeolus-glowrule-gold);
  filter: blur(3px);
  border: none;
  height: 7px;
  border-radius: var(--aeolus-radius-rule);
}

/* v10 HOVER RESIDUE on the seven light cards.

   Both card groups wear .glass-lightCard, but neither was getting its own hover
   state, because two older cascades out-specify the recipe and were still
   driving the interaction:

     home.css:285   #problem article.layer-card:hover              (1,2,1)
     aeolus.css:434 .layer-card.interactive:hover                  (0,3,0)

   Both paint a v10 gold ring — rgba(197,145,42,.45) border on the four problem
   cards, a 0 0 0 1px rgba(197,145,42,.18) ring on the three resource cards —
   plus v10's --elev-3. That is the retired navy/gold system reaching through
   into v11 surfaces: gold arrives on hover as a RING around a neutral white
   card, which is not a treatment this brand has, and --elev-3 is not one of the
   glass shadows.

   Worth stating plainly for the record: glass.css defines no hover state for any
   recipe, so there was no canonical hover to copy. This is derived inside the
   system rather than found in it — the card holds its own recipe and moves one
   step up its OWN light shadow family (light-card-shadow 0 28px 60px
   rgba(26,25,22,.12) -> light-shadow 0 34px 70px rgba(26,25,22,.14)), with the
   same restrained lift the buttons use. Border is restated to the recipe's own
   value specifically to cancel the gold, not because it changes.

   That keeps the rule the buttons already follow at line 953: an element lifts
   by strengthening what it already is, and gold stays an ink, not a ring. If the
   owner wants an explicit card-hover recipe in the design system, that is a
   Polaris/glass.css addition and this override should then defer to it. */
#problem article.layer-card.glass-lightCard:hover,
#resources a.ins-card.glass-lightCard:hover {
  transform: translateY(-2px);
  border-color: var(--aeolus-glass-light-card-border);
  box-shadow: var(--aeolus-glass-light-shadow);
}

/* Logos sit muted on dark and lift on hover. */
.client-logo {
  filter: var(--aeolus-logo-mute-dark);
  opacity: 0.85;
}
.client-logo:hover { opacity: 1; }


/* --------------------------------------------------------------------------
   8. NAV + FOOTER
   -------------------------------------------------------------------------- */
.site-nav {
  background: var(--aeolus-glass-dark-bg);
  backdrop-filter: var(--aeolus-glass-dark-blur);
  -webkit-backdrop-filter: var(--aeolus-glass-dark-blur);
  border: 1px solid var(--aeolus-hairline-on-dark);
  /* owner 2026-08-25: dock matches the site's sharp-corner language — panel
     radius (14px), not a pill. */
  border-radius: var(--aeolus-radius-panel);
}
/* The desktop link row's border-inline reads --nav-sep, which aeolus.css:657
   sets on .nav-dark (0,0,2,0) — so the retint has to match that specificity or
   the v10 white stays. Only visible above 920px, where the links render. */
.site-nav.nav-dark { --nav-sep: var(--aeolus-hairline-on-dark); }

/* Owner ruling 2026-08-25 (applied by Argus): the nav CTA fills the capsule's
   right end — flush with the dock, not a floating chip. It stretches to the
   capsule's inner height and pulls into the dock's own padding (7px block,
   clamp(8px,1vw,10px) right) leaving a deliberate 2-4px gap; the right corners
   take the capsule's pill curvature while the left keep the sharp CTA radius.

   Media-gated to the desktop dock, and it MUST stay gated. aeolus.css hides this
   chip under 920px (@media max-width:920px { .site-nav .nav-cta { display:none } })
   so the burger is the only mobile control — but that rule is (0,2,0), exactly tying
   the selector below, which loads later and therefore wins on `display`. Ungated,
   the inline-flex here resurrected the chip at 390px next to the burger (two nav
   controls, and the flush-right fit breaks because the burger takes the corner).
   The geometry is only meaningful where the link row renders, so scoping it to
   min-width:921px restores aeolus.css's hide without touching Polaris's files. */
@media (min-width: 921px) {
  .site-nav .nav-cta {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    margin-block: -2px;
    margin-right: calc(-1 * clamp(8px, 1vw, 10px) + 5px);
    /* owner 2026-08-25: chip starts 5px after the separator line — pull across
       the nav's own flex gap so the left gap matches every other side */
    margin-left: calc(-1 * clamp(0.9rem, 1.5vw, 1.4rem) + 5px);
    /* right corners nest against the 14px dock corner at the 5px gap (14-5=9);
       left corners keep the site CTA radius */
    border-radius: var(--v11-cta-radius) 9px 9px var(--v11-cta-radius);
    padding: 0 28px 0 24px;
    font-size: 15px;
  }

  /* owner 2026-08-25: larger dock, per the reference mock — taller capsule,
     bigger link type, bigger logo. Desktop only; mobile keeps its compact size. */
  .site-nav { padding-block: 13px; }
  .site-nav .nav-links { padding-block: 6px; gap: clamp(1.3rem, 2vw, 2rem); }
  .site-nav .nav-links a { font-size: 0.98rem; }
  /* logo scales up to fill the taller dock without bleeding: 26px → 40px,
     margin-block -4px eats its own 4px padding so the dock height is unchanged */
  .site-nav .nav-logo { padding: 0; margin-block: -4px; }
  .site-nav .nav-logo img { height: 40px; }
}
/* owner 2026-08-25 (applied by Argus): the footer BLEEDS out of #cta — it rides
   a flat nightCool continuation backdrop (markup: .footer-cont inside <footer>)
   instead of its own opaque surface, so there is no edge between the closing
   section and the footer. No border-top, no separate background. Content sits
   above the backdrop via z-index. */
.site-footer { position: relative; background: transparent; border-top: none; }
.site-footer > :not(.footer-cont) { position: relative; z-index: 1; }

/* #cta now has a continuation below it, so its bottom edge became a join.

   The adjacency rules in section 3 can only see siblings inside <main>, and the
   footer is outside it — `:has(+ .aeolus-canvas-dark)` cannot match across that
   boundary, so #cta kept the zero fade it correctly had while it was the last
   thing on the page. Measured at 1440 before this rule, the boundary row stepped
   from 3.06/3.57/3.74 milli-luma on the #cta side to a dead-flat 2.76 in the
   footer: about 3/255 on the right, 1/255 on the left. A step that VARIES along
   the boundary is what actually draws a line — the eye reads the gradient
   terminating, not the absolute delta — and the bar set at hero→#story is <=1/255.

   Addressed by id for the same reason section 3 gives: the generic rule already
   scores (0,3,1), so an id is the honest way to win rather than a longer class
   chain that ties and silently captures the other join properties.

   Only aurora and vignette fade. Weave and noise are positionless repeating
   fills and the footer's nightCool declares the identical pair (sailcloth strong,
   noise 0.13), so fading them out and back in would be a texture handoff where
   there is no arrangement to hand off — the call already made for the two
   internal joins of the dark run. */
#cta > .bg-nightCool > :is(.bg-aurora, .bg-vignette) {
  --join-bottom: var(--night-join);
}

/* Second defect at the same boundary, and the one that actually drew the line.

   .glass-heroDark's shadow is `0 50px 110px rgba(0,0,0,0.50)` — its dark edge
   lands 50px below the card and transitions over the 110px blur, so it reaches
   ~105px past the card before it is spent. `.aeolus-canvas-dark` sets
   overflow:hidden (section 3), so that tail was being cut off flat at #cta's
   bottom edge. At 390 the card clears the edge by only 42px, which leaves the
   shadow at ~0.28 alpha where it is severed: the host paints rgb(7,10,18) and
   the last row of #cta measured rgb(5,7,13) against the footer's rgb(7,10,18)
   — a 0.72x multiplicative step, uniform across the card's width, with all five
   background layers hidden on both sides. That is a hard horizontal edge, and
   no amount of aurora fading touches it because it is not the aurora.

   It was invisible while #cta ended the page — there was nothing below to be
   continuous with. The owner's continuation backdrop is what promoted it.

   The clip has to move rather than the shadow. .bg-nightCool already carries its
   own overflow:hidden (backgrounds.css), so the aurora and the bold sail stay
   clipped to the section either way; only the card's shadow needs out. z-index
   lifts #cta over the footer's backdrop (.footer-cont is z-index 0 in the root
   stacking context, and it is later in the DOM, so it would otherwise paint over
   the spill). The footer's own content is z-index 1 AND later in the DOM, so it
   still wins over the shadow and stays legible.

   The shadow now falls on the footer instead of being amputated at the seam,
   which is what "one continuous surface" means for a card that floats above it.
   DEVIATION — this is a visible change to the top of the footer (a soft, smooth
   darkening where there was a hard edge); flagged for owner review. */
#cta { overflow: visible; z-index: 1; }

/* Lifting #cta also lifted it over the melt that feeds INTO it: .melt is
   z-index 1 (section 5) and hangs --melt-overlap into the section below, so
   with #cta at the same z and later in the DOM, #cta's surface began painting
   over the melt's night tail — measured -3.59 luma at y=350, 6px inside #cta.
   The melt has to stay on top of both sections it bridges, so it goes to 2.
   Scoped to the one melt that borders #cta; the others face sections that are
   still z-index auto and are unaffected. */
.melt:has(+ #cta) { z-index: 2; }

/* The mobile panel is opaque by design (links must stay legible over whatever
   it covers), so it takes the flat night surface rather than a glass recipe. */
.mobile-menu { background: var(--aeolus-night-950); }


/* --------------------------------------------------------------------------
   9. FOCUS + REDUCED MOTION — inherited behaviour, retinted only
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--aeolus-gold-400); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bg-aurora { filter: none; }
}

/* ==========================================================================
   OWNER DEVIATION (2026-09-03): JUNCTIONS ARE INTERPENETRATING SECTIONS,
   NOT A COMPONENT.

   Owner ruling on the approved mockup: the transition must read as the two
   sections merging, with atmosphere passing deep into each neighbour and
   content riding over it — not as a separate band that switches colourways.
   A melt overlay can never do that: it paints ABOVE section content (z-1 vs
   the sections' atomic stacking contexts), which forced the content
   clearance that made the junction a dead zone.

   So for night↔cream junctions the melt paints NOTHING and takes NO space —
   it stays in the DOM purely as a junction marker for the selectors below.
   The two sections meet edge-to-edge, and EACH paints half of the authored
   strip (assets/gen-melt-strips.html) in its own background root, anchored
   at the shared edge: A pushes the image half a span below its bottom edge,
   B half a span above its top edge, so the seam row is the same pixel row of
   the same image — continuous by construction. Because the strip is now part
   of each section's background: section content stacks above it (content can
   sit IN the transition, like the mockup), the sections' own weave/noise/
   aurora flow over their half uninterrupted, and the span can be huge.
   Gold-surface melts keep the DS component behaviour untouched. */
/* 2026-09-25: span tightened from clamp(680px, 84vh, 940px). At the old span
   each junction cost ~800-950px of scroll between the last line of one section
   and the first line of the next, nearly a full desktop screen of transition.
   The strip, layer fades and content clearance all scale off this one value,
   so the dissolve keeps its shape, just compressed. */
:root {
  --junction-span: clamp(420px, 50vh, 560px);
  --junction-span: round(clamp(420px, 50vh, 560px), 2px);
  --junction-breathe: clamp(1rem, 2vw, 2rem);
}

.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="cream"],
.melt[data-from="cream"]:is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) {
  height: 0;
  margin: 0;
}
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="cream"] .melt__composite,
.melt[data-from="cream"]:is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__composite {
  display: none;
}

/* Strip halves. backgrounds.css paints --bg-base via the shorthand on the
   bg root; these longhands add the strip image on top of that base colour
   without disturbing it. */
main > section:has(+ .melt[data-to="cream"]) > :is(.bg-night, .bg-nightHero, .bg-nightCool) {
  background-image: url("/v2/assets/melt-nc.webp?v=7");
  background-repeat: no-repeat;
  background-size: 100% var(--junction-span);
  background-position: center bottom calc(var(--junction-span) / -2);
}
main > .melt[data-to="cream"] + section > .bg-cream {
  background-image: url("/v2/assets/melt-nc.webp?v=7");
  background-repeat: no-repeat;
  background-size: 100% var(--junction-span);
  background-position: center top calc(var(--junction-span) / -2);
}
main > section:has(+ .melt[data-from="cream"]) > .bg-cream {
  background-image: url("/v2/assets/melt-cn.webp?v=7");
  background-repeat: no-repeat;
  background-size: 100% var(--junction-span);
  background-position: center bottom calc(var(--junction-span) / -2);
}
main > .melt[data-from="cream"] + section > :is(.bg-night, .bg-nightHero, .bg-nightCool) {
  background-image: url("/v2/assets/melt-cn.webp?v=7");
  background-repeat: no-repeat;
  background-size: 100% var(--junction-span);
  background-position: center top calc(var(--junction-span) / -2);
}
/* A cream section flanked by junctions on both sides carries both halves
   (#problem today). The single-side rules above would otherwise overwrite
   each other's background-image list. */
main > .melt[data-to="cream"] + section:has(+ .melt[data-from="cream"]) > .bg-cream {
  background-image: url("/v2/assets/melt-nc.webp?v=7"), url("/v2/assets/melt-cn.webp?v=7");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% var(--junction-span), 100% var(--junction-span);
  background-position: center top calc(var(--junction-span) / -2),
                       center bottom calc(var(--junction-span) / -2);
}

/* The bg-aurora child paints its token's trailing OPAQUE base colour over
   the whole section, which buried the strip halves painted on the bg root.
   Junction-adjacent sections swap to base-less lobe sets (the root already
   paints the base), so the strip shows through and aurora/weave/vignette all
   layer OVER the interpenetration field, exactly like everywhere else. */
:root {
  --v11-aurora-dark-lobes:
    radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27, 75, 107, 0) 62%),
    radial-gradient(64% 76% at 60% 98%, rgba(178, 58, 22, 0.58) 0%, rgba(178, 58, 22, 0) 72%),
    radial-gradient(54% 64% at 82% 14%, rgba(197, 145, 42, 0.52) 0%, rgba(197, 145, 42, 0) 70%),
    radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11, 16, 32, 0) 66%);
  --v11-aurora-dark-hero-lobes:
    radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27, 75, 107, 0) 62%),
    radial-gradient(48% 60% at 92% 8%, rgba(178, 58, 22, 0.58) 0%, rgba(178, 58, 22, 0) 68%),
    radial-gradient(54% 64% at 82% 14%, rgba(197, 145, 42, 0.52) 0%, rgba(197, 145, 42, 0) 70%),
    radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11, 16, 32, 0) 66%);
  --v11-aurora-dark-cool-lobes:
    radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27, 75, 107, 0) 62%),
    radial-gradient(64% 76% at 60% 98%, rgba(27, 75, 107, 0.42) 0%, rgba(27, 75, 107, 0) 72%),
    radial-gradient(54% 64% at 82% 14%, rgba(197, 145, 42, 0.30) 0%, rgba(197, 145, 42, 0) 70%),
    radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11, 16, 32, 0) 66%);
  --v11-aurora-cream-lobes:
    radial-gradient(48% 62% at 82% 24%, #E8B44A 0%, rgba(232, 180, 74, 0) 64%),
    radial-gradient(44% 58% at 96% 76%, #C96A2E 0%, rgba(201, 106, 46, 0) 64%),
    radial-gradient(40% 54% at 62% 96%, #6E97B5 0%, rgba(110, 151, 181, 0) 66%);
}
main > section:has(+ .melt[data-to="cream"]) > .bg-night,
main > .melt[data-from="cream"] + section > .bg-night {
  --bg-aurora: var(--v11-aurora-dark-lobes);
}
main > section:has(+ .melt[data-to="cream"]) > .bg-nightHero,
main > .melt[data-from="cream"] + section > .bg-nightHero {
  --bg-aurora: var(--v11-aurora-dark-hero-lobes);
}
main > section:has(+ .melt[data-to="cream"]) > .bg-nightCool,
main > .melt[data-from="cream"] + section > .bg-nightCool {
  --bg-aurora: var(--v11-aurora-dark-cool-lobes);
}
main > section:has(+ .melt[data-from="cream"]) > .bg-cream,
main > .melt[data-to="cream"] + section > .bg-cream {
  --bg-aurora: var(--v11-aurora-cream-lobes);
}



/* Junction-edge fading of the sections' structured layers rides the HOUSE
   --join system (see the night-join block above), which already carries the
   aurora inset compensation and the tested mask shape. These rules only set
   the depth: layers fade out across the strip's dissolve zone so nothing the
   section owns snaps on or off near the seam. Dark sections fade all four
   structured layers; cream fades its aurora AND its weave here —
   unlike cream→cream joins, the junction strip is DARK under the cream weave
   near the seam, and soft-light white ribs over dark read as a texture step
   where the neighbour arrives with its weave already faded.
   A both-sided section (e.g. #problem) gets --join-bottom from one rule and
   --join-top from the other — no special case needed. */
main > section:has(+ .melt[data-to="cream"]) > :is(.bg-night, .bg-nightHero, .bg-nightCool) > .bg-aurora,
main > section:has(+ .melt[data-from="cream"]) > .bg-cream > .bg-aurora {
  --join-bottom: calc(var(--junction-span) * 0.30);
}
main > .melt[data-from="cream"] + section > :is(.bg-night, .bg-nightHero, .bg-nightCool) > .bg-aurora,
main > .melt[data-to="cream"] + section > .bg-cream > .bg-aurora {
  --join-top: calc(var(--junction-span) * 0.30);
}

/* Fractional layout can land the shared edge between device pixels, and the
   two boxes rasterize that row differently — a 1px bright hairline across the
   junction. Overlapping the downstream section by 1px lets its half of the
   strip paint over the seam row (1px of blurred art is invisible). */
main > .melt[data-to="cream"] + section,
main > .melt[data-from="cream"] + section {
  margin-top: -1px;
}

/* Texture layers (weave, vignette, noise) crease if they fade LINEARLY to
   the seam: two linear fades meeting at zero form a V-kink the eye reads as
   a line even when both sides are correct. These eased (smootherstep) masks
   approach zero tangentially at the seam on both sides — no kink. Aurora
   stays on the house join above (soft washes cannot crease). */
main > section:has(+ .melt[data-to="cream"]) > :is(.bg-night, .bg-nightHero, .bg-nightCool) > :is(.bg-weave, .bg-vignette, .bg-noise),
main > section:has(+ .melt[data-from="cream"]) > .bg-cream > .bg-weave {
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1.0) calc(100% - var(--junction-span) * 0.3),
    rgba(0,0,0,0.995) calc(100% - var(--junction-span) * 0.275),
    rgba(0,0,0,0.965) calc(100% - var(--junction-span) * 0.25),
    rgba(0,0,0,0.896) calc(100% - var(--junction-span) * 0.225),
    rgba(0,0,0,0.79) calc(100% - var(--junction-span) * 0.2),
    rgba(0,0,0,0.653) calc(100% - var(--junction-span) * 0.175),
    rgba(0,0,0,0.5) calc(100% - var(--junction-span) * 0.15),
    rgba(0,0,0,0.347) calc(100% - var(--junction-span) * 0.125),
    rgba(0,0,0,0.21) calc(100% - var(--junction-span) * 0.1),
    rgba(0,0,0,0.104) calc(100% - var(--junction-span) * 0.075),
    rgba(0,0,0,0.035) calc(100% - var(--junction-span) * 0.05),
    rgba(0,0,0,0.005) calc(100% - var(--junction-span) * 0.025),
    rgba(0,0,0,0.0) calc(100% - var(--junction-span) * 0.0));
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1.0) calc(100% - var(--junction-span) * 0.3),
    rgba(0,0,0,0.995) calc(100% - var(--junction-span) * 0.275),
    rgba(0,0,0,0.965) calc(100% - var(--junction-span) * 0.25),
    rgba(0,0,0,0.896) calc(100% - var(--junction-span) * 0.225),
    rgba(0,0,0,0.79) calc(100% - var(--junction-span) * 0.2),
    rgba(0,0,0,0.653) calc(100% - var(--junction-span) * 0.175),
    rgba(0,0,0,0.5) calc(100% - var(--junction-span) * 0.15),
    rgba(0,0,0,0.347) calc(100% - var(--junction-span) * 0.125),
    rgba(0,0,0,0.21) calc(100% - var(--junction-span) * 0.1),
    rgba(0,0,0,0.104) calc(100% - var(--junction-span) * 0.075),
    rgba(0,0,0,0.035) calc(100% - var(--junction-span) * 0.05),
    rgba(0,0,0,0.005) calc(100% - var(--junction-span) * 0.025),
    rgba(0,0,0,0.0) calc(100% - var(--junction-span) * 0.0));
}
main > .melt[data-from="cream"] + section > :is(.bg-night, .bg-nightHero, .bg-nightCool) > :is(.bg-weave, .bg-vignette, .bg-noise),
main > .melt[data-to="cream"] + section > .bg-cream > .bg-weave {
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.0) calc(var(--junction-span) * 0.0),
    rgba(0,0,0,0.005) calc(var(--junction-span) * 0.025),
    rgba(0,0,0,0.035) calc(var(--junction-span) * 0.05),
    rgba(0,0,0,0.104) calc(var(--junction-span) * 0.075),
    rgba(0,0,0,0.21) calc(var(--junction-span) * 0.1),
    rgba(0,0,0,0.347) calc(var(--junction-span) * 0.125),
    rgba(0,0,0,0.5) calc(var(--junction-span) * 0.15),
    rgba(0,0,0,0.653) calc(var(--junction-span) * 0.175),
    rgba(0,0,0,0.79) calc(var(--junction-span) * 0.2),
    rgba(0,0,0,0.896) calc(var(--junction-span) * 0.225),
    rgba(0,0,0,0.965) calc(var(--junction-span) * 0.25),
    rgba(0,0,0,0.995) calc(var(--junction-span) * 0.275),
    rgba(0,0,0,1.0) calc(var(--junction-span) * 0.3),
    rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.0) calc(var(--junction-span) * 0.0),
    rgba(0,0,0,0.005) calc(var(--junction-span) * 0.025),
    rgba(0,0,0,0.035) calc(var(--junction-span) * 0.05),
    rgba(0,0,0,0.104) calc(var(--junction-span) * 0.075),
    rgba(0,0,0,0.21) calc(var(--junction-span) * 0.1),
    rgba(0,0,0,0.347) calc(var(--junction-span) * 0.125),
    rgba(0,0,0,0.5) calc(var(--junction-span) * 0.15),
    rgba(0,0,0,0.653) calc(var(--junction-span) * 0.175),
    rgba(0,0,0,0.79) calc(var(--junction-span) * 0.2),
    rgba(0,0,0,0.896) calc(var(--junction-span) * 0.225),
    rgba(0,0,0,0.965) calc(var(--junction-span) * 0.25),
    rgba(0,0,0,0.995) calc(var(--junction-span) * 0.275),
    rgba(0,0,0,1.0) calc(var(--junction-span) * 0.3),
    rgba(0,0,0,1) 100%);
}
main > .melt[data-to="cream"] + section:has(+ .melt[data-from="cream"]) > .bg-cream > .bg-weave {
  /* ONE gradient eased at BOTH ends. Two stacked mask layers UNION by
     default (mask-composite: add), and the union of "faded at top" and
     "faded at bottom" is opaque everywhere — which left #problem's ribs
     switching on at full strength at both of its seams. */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.0) calc(var(--junction-span) * 0.0),
    rgba(0,0,0,0.005) calc(var(--junction-span) * 0.025),
    rgba(0,0,0,0.035) calc(var(--junction-span) * 0.05),
    rgba(0,0,0,0.104) calc(var(--junction-span) * 0.075),
    rgba(0,0,0,0.21) calc(var(--junction-span) * 0.1),
    rgba(0,0,0,0.347) calc(var(--junction-span) * 0.125),
    rgba(0,0,0,0.5) calc(var(--junction-span) * 0.15),
    rgba(0,0,0,0.653) calc(var(--junction-span) * 0.175),
    rgba(0,0,0,0.79) calc(var(--junction-span) * 0.2),
    rgba(0,0,0,0.896) calc(var(--junction-span) * 0.225),
    rgba(0,0,0,0.965) calc(var(--junction-span) * 0.25),
    rgba(0,0,0,0.995) calc(var(--junction-span) * 0.275),
    rgba(0,0,0,1.0) calc(var(--junction-span) * 0.3),
    rgba(0,0,0,1.0) calc(100% - var(--junction-span) * 0.3),
    rgba(0,0,0,0.995) calc(100% - var(--junction-span) * 0.275),
    rgba(0,0,0,0.965) calc(100% - var(--junction-span) * 0.25),
    rgba(0,0,0,0.896) calc(100% - var(--junction-span) * 0.225),
    rgba(0,0,0,0.79) calc(100% - var(--junction-span) * 0.2),
    rgba(0,0,0,0.653) calc(100% - var(--junction-span) * 0.175),
    rgba(0,0,0,0.5) calc(100% - var(--junction-span) * 0.15),
    rgba(0,0,0,0.347) calc(100% - var(--junction-span) * 0.125),
    rgba(0,0,0,0.21) calc(100% - var(--junction-span) * 0.1),
    rgba(0,0,0,0.104) calc(100% - var(--junction-span) * 0.075),
    rgba(0,0,0,0.035) calc(100% - var(--junction-span) * 0.05),
    rgba(0,0,0,0.005) calc(100% - var(--junction-span) * 0.025),
    rgba(0,0,0,0.0) calc(100% - var(--junction-span) * 0.0));
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.0) calc(var(--junction-span) * 0.0),
    rgba(0,0,0,0.005) calc(var(--junction-span) * 0.025),
    rgba(0,0,0,0.035) calc(var(--junction-span) * 0.05),
    rgba(0,0,0,0.104) calc(var(--junction-span) * 0.075),
    rgba(0,0,0,0.21) calc(var(--junction-span) * 0.1),
    rgba(0,0,0,0.347) calc(var(--junction-span) * 0.125),
    rgba(0,0,0,0.5) calc(var(--junction-span) * 0.15),
    rgba(0,0,0,0.653) calc(var(--junction-span) * 0.175),
    rgba(0,0,0,0.79) calc(var(--junction-span) * 0.2),
    rgba(0,0,0,0.896) calc(var(--junction-span) * 0.225),
    rgba(0,0,0,0.965) calc(var(--junction-span) * 0.25),
    rgba(0,0,0,0.995) calc(var(--junction-span) * 0.275),
    rgba(0,0,0,1.0) calc(var(--junction-span) * 0.3),
    rgba(0,0,0,1.0) calc(100% - var(--junction-span) * 0.3),
    rgba(0,0,0,0.995) calc(100% - var(--junction-span) * 0.275),
    rgba(0,0,0,0.965) calc(100% - var(--junction-span) * 0.25),
    rgba(0,0,0,0.896) calc(100% - var(--junction-span) * 0.225),
    rgba(0,0,0,0.79) calc(100% - var(--junction-span) * 0.2),
    rgba(0,0,0,0.653) calc(100% - var(--junction-span) * 0.175),
    rgba(0,0,0,0.5) calc(100% - var(--junction-span) * 0.15),
    rgba(0,0,0,0.347) calc(100% - var(--junction-span) * 0.125),
    rgba(0,0,0,0.21) calc(100% - var(--junction-span) * 0.1),
    rgba(0,0,0,0.104) calc(100% - var(--junction-span) * 0.075),
    rgba(0,0,0,0.035) calc(100% - var(--junction-span) * 0.05),
    rgba(0,0,0,0.005) calc(100% - var(--junction-span) * 0.025),
    rgba(0,0,0,0.0) calc(100% - var(--junction-span) * 0.0));
}

/* Content rides INTO the junction field, mockup-style: clearance is set so
   copy begins just past the fade tail, not exiled from the whole span.
   These selectors match the earlier melt-clear rules and override them. */
main > .melt + section,
main > .melt + section#problem { padding-top: calc(var(--junction-span) * 0.30 + var(--junction-breathe)); }
main > section:has(+ .melt) { padding-bottom: calc(var(--junction-span) * 0.30 + var(--junction-breathe)); }

/* ==== /Assets/site-v11.css ==== */
/* ==========================================================================
   site-v11.css: the v11 "celestial navigation" layer for SUBPAGES.

   The homepage is built as: v10 layout base (aeolus.css + home.css) → v11
   brand layers (/v2/assets/*.css) → /v2/v11.css. Subpages mirror that stack
   exactly, swapping home.css for the subpage layout base and adding this file
   last:

     /v3/assets/css/aeolus.css      v10 primitives (geometry, faq, footer grid)
     /Assets/site.css               v10 subpage layout (crumbs, ins-card, faq)
     /v2/assets/self-hosted.css     Zodiak / General Sans / IBMPlexMono
     /v2/assets/tokens.css          --aeolus-* design tokens
     /v2/assets/backgrounds.css     .bg-night/-nightHero/-nightCool/-cream roots
     /v2/assets/glass.css           .glass-* recipes
     /v2/assets/melt.css            .melt junction markers
     /v2/v11.css                    token override, v10 atmosphere strip, the
                                    junction system, type mandates, CTA chip,
                                    nav + footer. Shared on purpose: every rule
                                    in it that is not id-scoped to the homepage
                                    is structural, so subpages inherit the same
                                    nav, buttons, joins and melts, not a copy.
     /Assets/site-v11.css           THIS FILE: the subpage components only.

   Scripts (defer, in this order): /v2/assets/constellation-v3.js,
   /v2/v11.js (nav theme, mobile menu, booking, reveal, counters),
   /v2/assets/constellation-setup.js (mounts .bg-sky[data-sky]), calendar.js.

   PAGE ANATOMY a subpage adopts (see /crm-diagnostic/ and /about/):

     header.page-hero.aeolus-canvas-dark#top
       > .bg-nightHero (aurora, weave, vignette, noise, .bg-sky[data-sky=stars])
       > .page-hero-inner (crumbs, h1 = line one + <em>line two</em>, .hero-sub)
     section.aeolus-canvas-dark  > .bg-night  (continues the hero: flat)
     .melt[data-from=night][data-to=cream]   (zero-height junction marker)
     section.aeolus-canvas       > .bg-cream  (first cream section: aurora)
     section.aeolus-canvas       > .bg-cream  (continuation: flat cream)
     .melt[data-from=cream][data-to=nightCool]
     section#cta.final-cta       > .bg-nightCool + .final-cta-inner.glass-heroDark
     footer.site-footer          > .bg-nightCool.footer-cont (continues #cta)

   Two structural rules the v11.css junction selectors impose:
   - a melt must sit between two <section> siblings of <main>. The hero is a
     <header>, so it is always followed by a night section, never a melt.
   - cards carry their glass recipe in the markup (glass-lightCard on cream,
     glass-dark / glass-darkSubtle on night), exactly as on the homepage.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SURFACE-AWARE INK
   One set of names that resolves per surface, so page CSS never branches on
   cream vs night. Gold on cream is bronze (BRAND-SPEC 2.2; #problem does the
   same on the homepage): gold-600 on cream is ~2.5:1, bronze is ~5.6:1.
   -------------------------------------------------------------------------- */
main .aeolus-canvas {
  --sv-ink: var(--aeolus-text-on-light);
  --sv-lede: var(--aeolus-text-on-light-body-strong);
  --sv-body: var(--aeolus-text-on-light-body);
  --sv-label: var(--aeolus-text-on-light-label);
  --sv-accent: var(--aeolus-bronze);
  --sv-rule: var(--aeolus-hairline-on-light);
  --gold: var(--aeolus-bronze);
  --gold-dk: var(--aeolus-bronze);
  color: var(--sv-ink);
}
main .aeolus-canvas-dark {
  --sv-ink: var(--aeolus-text-on-dark);
  --sv-lede: var(--aeolus-text-on-dark-lede);
  --sv-body: var(--aeolus-text-on-dark-body);
  --sv-label: var(--aeolus-text-on-dark-label);
  --sv-accent: var(--aeolus-gold-400);
  --sv-rule: var(--aeolus-hairline-on-dark);
  color: var(--sv-ink);
}

/* Body copy at the deck's single body weight. aeolus.css sets body to 350,
   which General Sans (static 300/400/500 files) renders as 300: too thin on
   the textured surfaces. Scoped to <main> so nav and footer stay identical to
   the homepage's. */
main { font-weight: 400; }

/* In-copy links: underlined accent ink, never a bare colour change. */
main :is(.aeolus-canvas, .aeolus-canvas-dark) :is(p, li) a:not([class]) {
  color: var(--sv-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   2. PLUMBING: content above the .bg-* root (v11.css lists the homepage
   wrappers; these are the subpage ones).
   -------------------------------------------------------------------------- */
.page-hero-inner,
.related-inner,
.cta-band-inner { position: relative; z-index: 2; }


/* --------------------------------------------------------------------------
   3. RUNS: the homepage's FIRST-CARRIER RULE, stated structurally.
   Within a run of same-family sections the opener carries the atmosphere and
   every continuation is flat, so a run reads as one surface that keeps going
   (v11.css section 3 has the measurements; the homepage applies it by id to
   #story, #results, #how and #faq). `body` is prepended because the generic
   join rules in v11.css score (0,4,1) and a tie on specificity would be
   decided by source order alone.
   -------------------------------------------------------------------------- */

/* Night continuation: aurora + vignette off, texture matched to the carrier. */
body main > :is(.hero, .aeolus-canvas-dark) + .aeolus-canvas-dark > .bg-night > :is(.bg-aurora, .bg-vignette) {
  display: none;
}
/* A run opened by the hero carries the hero's strong weave and 0.15 noise. */
body main > :has(> .bg-nightHero) + .aeolus-canvas-dark > .bg-night {
  --bg-weave: var(--aeolus-sailcloth-dark-strong);
  --bg-noise-opacity: 0.15;
}
/* Weave and noise are positionless fills, identical on both sides of an
   internal join, so they run straight through it rather than fading out and
   back in (the texture-handoff defect). */
body main > :is(.hero, .aeolus-canvas-dark):has(+ .aeolus-canvas-dark) > :is(.bg-night, .bg-nightHero) > :is(.bg-weave, .bg-noise),
body main > :is(.hero, .aeolus-canvas-dark) + .aeolus-canvas-dark > .bg-night > :is(.bg-weave, .bg-noise) {
  --join-top: 0px;
  --join-bottom: 0px;
}
/* A night carrier that OPENS on a melt and hands on to a continuation needs
   its vignette faded at the bottom as well. v11.css gives melt-adjacent
   texture layers a top-only eased mask, which replaces the generic join mask,
   so the dense vignette stays at full strength on the carrier's last rows and
   dims the weave there; the continuation has no vignette, so the weave
   visibly brightens on the boundary row (measured 0.3-0.8 luma step; the
   homepage's #diagnostic -> #results join shows the same). One mask, eased in
   at the melt end and faded out at the other. The aurora's red lobe sits at
   the bottom of the box and was only hidden by that vignette, so it takes a
   longer fade than the generic --night-join one. Both are smootherstep eased
   at both ends: a linear fade reaching zero on the seam row leaves a slope
   kink the eye reads as a crease (v11.css section 10 has the same note). The
   aurora's stops carry its 10.9375% inset (its box overhangs by 14%). The
   cream carrier of a cream run gets the same aurora mask: its blue lobe is
   pinned to the box bottom and showed the same crease into the flat
   continuation (the homepage's #resources -> #faq shows it too). */

body main > .melt + .aeolus-canvas-dark:has(+ .aeolus-canvas-dark) > .bg-night > .bg-aurora,
body main > .melt + .aeolus-canvas:has(+ .aeolus-canvas) > .bg-cream > .bg-aurora {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(10.9375% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(10.9375% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(10.9375% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(10.9375% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(10.9375% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(10.9375% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(10.9375% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(10.9375% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(10.9375% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 10.9375% - var(--junction-span) * 1.000), rgba(0,0,0,0.984) calc(100% - 10.9375% - var(--junction-span) * 0.875), rgba(0,0,0,0.896) calc(100% - 10.9375% - var(--junction-span) * 0.750), rgba(0,0,0,0.725) calc(100% - 10.9375% - var(--junction-span) * 0.625), rgba(0,0,0,0.500) calc(100% - 10.9375% - var(--junction-span) * 0.500), rgba(0,0,0,0.275) calc(100% - 10.9375% - var(--junction-span) * 0.375), rgba(0,0,0,0.104) calc(100% - 10.9375% - var(--junction-span) * 0.250), rgba(0,0,0,0.016) calc(100% - 10.9375% - var(--junction-span) * 0.125), rgba(0,0,0,0.000) calc(100% - 10.9375% - var(--junction-span) * 0.000));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(10.9375% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(10.9375% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(10.9375% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(10.9375% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(10.9375% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(10.9375% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(10.9375% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(10.9375% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(10.9375% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 10.9375% - var(--junction-span) * 1.000), rgba(0,0,0,0.984) calc(100% - 10.9375% - var(--junction-span) * 0.875), rgba(0,0,0,0.896) calc(100% - 10.9375% - var(--junction-span) * 0.750), rgba(0,0,0,0.725) calc(100% - 10.9375% - var(--junction-span) * 0.625), rgba(0,0,0,0.500) calc(100% - 10.9375% - var(--junction-span) * 0.500), rgba(0,0,0,0.275) calc(100% - 10.9375% - var(--junction-span) * 0.375), rgba(0,0,0,0.104) calc(100% - 10.9375% - var(--junction-span) * 0.250), rgba(0,0,0,0.016) calc(100% - 10.9375% - var(--junction-span) * 0.125), rgba(0,0,0,0.000) calc(100% - 10.9375% - var(--junction-span) * 0.000));
}
body main > .melt + .aeolus-canvas-dark:has(+ .aeolus-canvas-dark) > .bg-night > .bg-vignette {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(0% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(0% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(0% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(0% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(0% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(0% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(0% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(0% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(0% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 0% - var(--junction-span) * .8 * 1.000), rgba(0,0,0,0.984) calc(100% - 0% - var(--junction-span) * .8 * 0.875), rgba(0,0,0,0.896) calc(100% - 0% - var(--junction-span) * .8 * 0.750), rgba(0,0,0,0.725) calc(100% - 0% - var(--junction-span) * .8 * 0.625), rgba(0,0,0,0.500) calc(100% - 0% - var(--junction-span) * .8 * 0.500), rgba(0,0,0,0.275) calc(100% - 0% - var(--junction-span) * .8 * 0.375), rgba(0,0,0,0.104) calc(100% - 0% - var(--junction-span) * .8 * 0.250), rgba(0,0,0,0.016) calc(100% - 0% - var(--junction-span) * .8 * 0.125), rgba(0,0,0,0.000) calc(100% - 0% - var(--junction-span) * .8 * 0.000));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) calc(0% + var(--junction-span) * .3 * 0.000), rgba(0,0,0,0.016) calc(0% + var(--junction-span) * .3 * 0.125), rgba(0,0,0,0.104) calc(0% + var(--junction-span) * .3 * 0.250), rgba(0,0,0,0.275) calc(0% + var(--junction-span) * .3 * 0.375), rgba(0,0,0,0.500) calc(0% + var(--junction-span) * .3 * 0.500), rgba(0,0,0,0.725) calc(0% + var(--junction-span) * .3 * 0.625), rgba(0,0,0,0.896) calc(0% + var(--junction-span) * .3 * 0.750), rgba(0,0,0,0.984) calc(0% + var(--junction-span) * .3 * 0.875), rgba(0,0,0,1.000) calc(0% + var(--junction-span) * .3 * 1.000), rgba(0,0,0,1.000) calc(100% - 0% - var(--junction-span) * .8 * 1.000), rgba(0,0,0,0.984) calc(100% - 0% - var(--junction-span) * .8 * 0.875), rgba(0,0,0,0.896) calc(100% - 0% - var(--junction-span) * .8 * 0.750), rgba(0,0,0,0.725) calc(100% - 0% - var(--junction-span) * .8 * 0.625), rgba(0,0,0,0.500) calc(100% - 0% - var(--junction-span) * .8 * 0.500), rgba(0,0,0,0.275) calc(100% - 0% - var(--junction-span) * .8 * 0.375), rgba(0,0,0,0.104) calc(100% - 0% - var(--junction-span) * .8 * 0.250), rgba(0,0,0,0.016) calc(100% - 0% - var(--junction-span) * .8 * 0.125), rgba(0,0,0,0.000) calc(100% - 0% - var(--junction-span) * .8 * 0.000));
}

/* The hero's star field fades out before the join (v11.css does this for
   #hero): the continuation carries no stars, so an unfaded field would stop
   dead on the boundary row. */
main > .page-hero > .bg-nightHero > .bg-sky {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--night-join)), transparent 100%);
}

/* Cream continuation: drop the aurora (the homepage's #faq). The carrier's
   aurora already fades into the join via v11.css. */
body main > .aeolus-canvas + .aeolus-canvas > .bg-cream > .bg-aurora { display: none; }


/* --------------------------------------------------------------------------
   4. HERO: the homepage hero grammar on a shorter, content-first cover.
   Unboxed copy over nightHero, star field only (no sail: the owner keeps
   constellations sparse; the one sail on a subpage is the closing one).
   -------------------------------------------------------------------------- */
.page-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(560px, 84svh, 840px);
  padding: clamp(7.5rem, 16vh, 10rem) var(--pad) clamp(3.5rem, 8vh, 5.5rem);
}
.page-hero-inner { width: 100%; }

/* Mandate 0-1: no kicker above a headline. Hidden here as well as removed
   from migrated markup, so a page adopting this file cannot regress. */
.page-hero .hero-kicker { display: none; }

.crumbs {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--aeolus-text-on-dark-faint);
}
.crumbs a { color: var(--aeolus-text-on-dark-lede); }
.crumbs a:hover { color: var(--aeolus-gold-400); }

/* The signature two-line headline, same numbers as v11.css `.hero h1`: one
   size for both lines, 500 over 700, one colour. */
.page-hero h1 {
  max-width: none;
  font-size: clamp(2.15rem, 4.6vw, 64px);
  font-weight: 500;
  line-height: var(--aeolus-lh-hero);
  letter-spacing: var(--aeolus-ls-display);
  color: var(--aeolus-text-on-dark);
  text-wrap: balance;
}
.page-hero h1 em {
  display: block;
  font-weight: 700 !important;
  text-shadow: none;
}
/* Fitted, not picked: the longest subpage hero line ("not just advised on
   it." at 700) measures ~11.9 x font-size, and the column is W - 2 x 24px
   below 820px, so (W - 48) / 11.9 = 8.4vw - 4px is the ceiling. */
@media (max-width: 820px) {
  .page-hero h1 { font-size: clamp(25px, calc(8.2vw - 4px), 40px); }
}
.page-hero .hero-sub {
  max-width: 60ch;
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 400;
  line-height: var(--aeolus-lh-lede);
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.page-hero .cta-trust { justify-content: flex-start; }


/* --------------------------------------------------------------------------
   5. SECTION HEADLINES: two lines, one colour, second line one step up.
   Night 400 → 500, cream 300 → 500 (BRAND-SPEC 3.1). The <em> is the second
   line, so it is always its own block.
   -------------------------------------------------------------------------- */
main .aeolus-canvas h2 { font-weight: 300; color: var(--sv-ink); }
main .aeolus-canvas-dark h2 { font-weight: 400; color: var(--sv-ink); }
main :is(.aeolus-canvas, .aeolus-canvas-dark) h2 em {
  display: block;
  font-weight: 500 !important;
}
main :is(.aeolus-canvas, .aeolus-canvas-dark) h2 { text-wrap: balance; }

/* Section ledes. */
main :is(.aeolus-canvas, .aeolus-canvas-dark) .t-lede { color: var(--sv-lede); }

/* Mono is an in-card data caption (mandate 0-1). Inside cards it takes the
   surface's label ink. */
main :is(.aeolus-canvas, .aeolus-canvas-dark) .label { color: var(--sv-label); }
main .label .label-dot { display: none; }

/* In-card list terms read as item titles, not in-paragraph bold (0-3). */
main li > b { font-weight: 500; color: var(--sv-ink); }


/* --------------------------------------------------------------------------
   6. CARDS: glass recipes come from the markup; these add the interior
   grammar the recipes do not carry, and retire the v10 hover ring.
   -------------------------------------------------------------------------- */
main :is(.glass-lightCard, .glass-lightSubtle, .glass-dark, .glass-darkSubtle) h3 {
  color: var(--sv-ink);
}

/* v10 gold ring on hover → the recipe steps up its own shadow family, as on
   the homepage (#resources .ins-card, v11.css section 7). */
main .aeolus-canvas .glass-lightCard.interactive:hover {
  transform: translateY(-2px);
  border-color: var(--aeolus-glass-light-card-border);
  box-shadow: var(--aeolus-glass-light-shadow);
}
main .aeolus-canvas-dark :is(.glass-dark, .glass-darkSubtle).interactive:hover {
  transform: translateY(-2px);
  border-color: var(--aeolus-glass-dark-border);
  box-shadow: var(--aeolus-glass-dark-shadow);
}

/* Insight cards on cream: category is an in-card mono caption; the read
   link takes the cream accent. */
.ins-card .label { font-size: 11px; }
.ins-card .read { color: var(--sv-accent); }

/* The gold CTA chip loses its edge on cream (1.28:1); v11.css rings it on
   #resources: the same fix for any cream section. */
main .aeolus-canvas .btn-gold {
  box-shadow: inset 0 0 0 1px var(--aeolus-gold-600), var(--aeolus-glass-gold-shadow);
}

/* "Acquired" chip on cream: the homepage's CTA-radius chip, in bronze ink. */
main .aeolus-canvas .acq {
  border-radius: var(--v11-cta-radius);
  background: var(--aeolus-gold-wash);
  border: 1px solid rgba(140, 90, 22, 0.35);
  color: var(--aeolus-bronze);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: var(--aeolus-ls-micro);
  text-transform: uppercase;
  padding: 6px 9px;
}

/* Section title for the related-reading row: display face, not a mono
   kicker (it heads cards, it is not a caption inside one). */
main .related-inner > .label {
  display: block;
  max-width: 1040px;
  margin: 0 auto 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, var(--aeolus-web-fs-h2-sm));
  font-weight: 300;
  letter-spacing: var(--aeolus-ls-display);
  text-transform: none;
  color: var(--sv-ink);
}


/* --------------------------------------------------------------------------
   7. FAQ on cream: the homepage list: glass-lightSubtle in markup.
   -------------------------------------------------------------------------- */
main .aeolus-canvas .faq-a-inner { color: var(--sv-body); }


/* --------------------------------------------------------------------------
   8. CLOSING CTA: markup mirrors the homepage #cta (nightCool, bold sail
   fitted behind .final-cta-inner.glass-heroDark). The subpage band keeps its
   own class names; these bring their copy onto the homepage values.
   -------------------------------------------------------------------------- */
.cta-band .label { display: none; } /* mandate 0-1: no eyebrow over the h2 */
.cta-band .cta-sub {
  max-width: 54ch;
  margin: 0 auto 2.2rem;
  font-size: clamp(1rem, 1.25vw, var(--aeolus-web-fs-lede));
  font-weight: 400;
  line-height: var(--aeolus-lh-lede);
  color: var(--aeolus-text-on-dark-lede);
}
.cta-band h2 { margin: 1rem 0 1.3rem; }


/* --------------------------------------------------------------------------
   9. FOOTER: homepage parity: the research column folds away on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .footer-grid > div:nth-child(3) { display: none; }
  .cta-trust { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; row-gap: .7rem; }
  .page-hero .cta-trust { justify-items: start; }
}