/* ================================================================
   SPS Post Styles — sps-post.css
   Stiff Person Syndrome dedicated page
   SPSRF blue theme with glassmorphism, animated gradients,
   entrance animations, and full light-mode support
   ================================================================ */


/* ── SPS Accent Tokens ── */
:root {
  --sps-blue:            #2979FF;
  --sps-blue-dim:        #1565C0;
  --sps-blue-glow:       rgba(41, 121, 255, 0.25);
  --sps-blue-subtle:     rgba(41, 121, 255, 0.08);
  --sps-cyan:            #00E5FF;
  --sps-light-blue:      #82B1FF;
  --sps-purple:          #7C4DFF;
  --sps-section-gap:     clamp(4rem, 8vw, 7rem);

  /* Glass system */
  --sps-glass-bg:        rgba(8, 12, 28, 0.58);
  --sps-glass-border:    rgba(41, 121, 255, 0.16);
  --sps-card-shadow:     0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sps-glow-blue:       0 0 20px rgba(41, 121, 255, 0.20), 0 0 40px rgba(41, 121, 255, 0.08);

  /* Treatment tier accent colors */
  --sps-tier-core:       #2979FF;
  --sps-tier-evidence:   #00E5FF;
  --sps-tier-emerging:   #7C4DFF;

  /* Accessible focus ring */
  --sps-focus-ring:        0 0 0 3px rgba(41, 121, 255, 0.6);
  --sps-focus-ring-offset: 0 0 0 1px var(--color-bg-primary, #020617), 0 0 0 4px var(--sps-blue);
}

.mode-light {
  --sps-glass-bg:        rgba(240, 245, 255, 0.82);
  --sps-glass-border:    rgba(21, 101, 192, 0.18);
  --sps-card-shadow:     0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --sps-glow-blue:       0 0 16px rgba(21, 101, 192, 0.12), 0 0 30px rgba(21, 101, 192, 0.06);
  --sps-blue-glow:       rgba(21, 101, 192, 0.18);
  --sps-blue-subtle:     rgba(41, 121, 255, 0.06);
  --sps-focus-ring-offset: 0 0 0 1px var(--color-bg-primary, #F8F8FC), 0 0 0 4px var(--sps-blue-dim);
}


/* ============================================================
   S0 -- ACCESSIBILITY PRIMITIVES
   ============================================================ */

/* -- Focus-Visible -- */
.sps-page *:focus-visible {
  outline: none;
  box-shadow: var(--sps-focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* -- Reduced Motion -- */
@media (prefers-reduced-motion: reduce) {
  .sps-page *,
  .sps-page *::before,
  .sps-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- Forced Colors (high contrast) -- */
@media (forced-colors: active) {
  .sps-page .hero h1,
  .sps-page .section-title,
  .sps-page .subsection-title,
  .sps-page .variant-name,
  .sps-page .tier-badge {
    -webkit-text-fill-color: currentColor;
    background: none;
    animation: none;
    filter: none;
  }

  .sps-page .hero,
  .sps-page .content-section,
  .sps-page .breaking-news,
  .sps-page .sps-toc .byr-toc-inner,
  .sps-page .chrome-border,
  .sps-page .patient-quote,
  .sps-page .metaphor-box,
  .sps-page .info-box,
  .sps-page .warning-box,
  .sps-page .critical-callout,
  .sps-page .treatment-tier,
  .sps-page .resource-card,
  .sps-page .fact-card,
  .sps-page .variant-card {
    background: transparent;
    border: 1px solid ButtonText;
  }

  .sps-page .timeline::before {
    background: ButtonText;
  }

  .sps-page .timeline-marker {
    background: ButtonText;
    border-color: ButtonText;
  }
}


/* ============================================================
   S1 -- KEYFRAMES
   ============================================================ */

/* Animated gradient for hero h1 */
@keyframes sps-title-gradient {
  0%   { background-position: 0%   50%; }
  25%  { background-position: 50%  50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50%  50%; }
  100% { background-position: 0%   50%; }
}

/* Animated gradient for section titles */
@keyframes sps-section-gradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Chrome border gradient rotation */
@keyframes sps-border-flow {
  0%, 100% { background-position: 0%   0%; }
  50%      { background-position: 0% 100%; }
}

/* Breaking news pulsing border */
@keyframes sps-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(41, 121, 255, 0.40), 0 0 12px var(--sps-blue-glow); }
  50%  { box-shadow: 0 0 0 6px rgba(41, 121, 255, 0),    0 0 20px rgba(0, 229, 255, 0.25); }
  100% { box-shadow: 0 0 0 0   rgba(41, 121, 255, 0.40), 0 0 12px var(--sps-blue-glow); }
}

/* Timeline marker pulse */
@keyframes sps-marker-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(41, 121, 255, 0.45), 0 0 12px var(--sps-blue-glow); }
  50%  { box-shadow: 0 0 0 8px rgba(41, 121, 255, 0),    0 0 20px rgba(41, 121, 255, 0.30); }
  100% { box-shadow: 0 0 0 0   rgba(41, 121, 255, 0.45), 0 0 12px var(--sps-blue-glow); }
}

/* Shimmer sweep for hero panel */
@keyframes sps-hero-shimmer {
  0%   { left: -120%; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}


/* ============================================================
   S2 -- PAGE LAYOUT
   ============================================================ */
.sps-page {
  width: 100%;
  max-width: var(--max-content-width, 1200px);
  margin: 0 auto;
  padding: 0;
}


/* ============================================================
   S3 -- HERO SECTION
   ============================================================ */
.sps-page .hero {
  width: 100%;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Glass panel */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--sps-glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--sps-card-shadow);

  /* Entrance animation */
  animation: byr-e-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Radial blue glow from below */
.sps-page .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(41, 121, 255, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% -10%, rgba(0, 229, 255, 0.06) 0%, transparent 60%);
}

/* Single-fire shimmer sweep */
.sps-page .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  width: 60%;
  height: 100%;
  top: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 100%
  );
  animation: sps-hero-shimmer 1.8s ease-out 1.2s 1 both;
}

/* Children above glow layers */
.sps-page .hero > *,
.sps-page .hero-content > * {
  position: relative;
  z-index: 1;
}

.sps-page .hero-content {
  position: relative;
  z-index: 1;
}

/* -- Hero Title -- */
.sps-page .hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: var(--leading-tight, 1.15);
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;

  /* Animated rotating gradient: blue -> cyan -> white -> blue */
  background: linear-gradient(
    125deg,
    #2979FF 0%,
    #448AFF 15%,
    #82B1FF 28%,
    #00E5FF 40%,
    #FFFFFF 52%,
    #00E5FF 64%,
    #82B1FF 76%,
    #2979FF 88%,
    #1565C0 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sps-title-gradient 8s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(41, 121, 255, 0.35));
}

/* -- Hero Subtitle -- */
.sps-page .hero-subtitle {
  font-size: var(--text-xl, 1.375rem);
  color: var(--color-text-secondary, #C7C7D8);
  margin: 0 0 1rem;
  line-height: var(--leading-snug, 1.3);
  text-shadow: 0 0 20px rgba(41, 121, 255, 0.12);
}

/* -- Hero Tagline -- */
.sps-page .hero-tagline {
  font-size: var(--text-lg, 1.125rem);
  font-style: italic;
  color: var(--color-text-primary, #F5F5F8);
  margin: 1rem auto 0;
  max-width: 60ch;
  line-height: var(--leading-relaxed, 1.7);
  text-shadow: 0 0 16px rgba(41, 121, 255, 0.08);
}


/* ============================================================
   S4 -- CONTAINER & TOC LAYOUT
   Grid handled by shared .byr-two-col (10-shared-page-components.css).
   SPS-specific overrides below for blue glassmorphism theme.
   ============================================================ */
.sps-page .container {
  padding: var(--space-xl, 3rem) clamp(1.25rem, 4vw, 2.5rem) 0;
  max-width: var(--max-content-width, 1200px);
  margin: 0 auto;
}

/* -- SPS blue theme on shared TOC -- */
.sps-page .sps-toc {
  scrollbar-width: thin;
  scrollbar-color: rgba(41, 121, 255, 0.25) transparent;
}

.sps-page .sps-toc .byr-toc-inner {
  background: var(--sps-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--sps-glass-border);
  border-left: 3px solid var(--sps-blue);
  box-shadow: var(--sps-card-shadow);
}

.sps-page .sps-toc .byr-toc-label {
  color: var(--sps-blue);
}

.sps-page .sps-toc a {
  color: var(--color-text-muted, #8A8A9A);
  border-left: 2px solid transparent;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.sps-page .sps-toc a:hover {
  color: var(--color-text-primary, #F5F5F8);
  background: var(--sps-blue-subtle);
}

.sps-page .sps-toc a[aria-current="true"] {
  color: var(--sps-blue);
  font-weight: 600;
  border-left-color: var(--sps-blue);
  background: var(--sps-blue-subtle);
  box-shadow: -2px 0 12px rgba(41, 121, 255, 0.15);
}


/* ============================================================
   S5 -- BREAKING NEWS
   ============================================================ */
.sps-page .breaking-news {
  padding: var(--space-lg, 2rem);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sps-section-gap);

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(41, 121, 255, 0.30);
  box-shadow: var(--sps-card-shadow);

  /* Pulsing border glow */
  animation: sps-pulse 3s ease-in-out infinite;
}

/* Radial glow behind content */
.sps-page .breaking-news::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 50% at 50% 100%,
    rgba(0, 229, 255, 0.06) 0%,
    transparent 70%
  );
}

.sps-page .breaking-news > * {
  position: relative;
  z-index: 1;
}

.sps-page .breaking-news-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md, 1.5rem);
  padding-bottom: var(--space-sm, 1rem);
  border-bottom: 1px solid rgba(41, 121, 255, 0.15);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sps-cyan);
}

.sps-page .breaking-news-icon {
  font-size: var(--text-xl, 1.375rem);
  line-height: 1;
}

.sps-page .breaking-news-content h3 {
  font-size: var(--text-2xl, 1.75rem);
  font-weight: 900;
  color: var(--color-heading, #FFFFFF);
  margin: 0 0 var(--space-sm, 1rem);
  line-height: var(--leading-tight, 1.15);
}

.sps-page .breaking-news-content p {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--space-sm, 1rem);
}

.sps-page .breaking-news-content p:last-child {
  margin-bottom: 0;
}

/* -- Stats Grid -- */
.sps-page .breaking-news-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md, 1.5rem);
  margin: var(--space-lg, 2rem) 0;
}

.sps-page .stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm, 1rem);
  border-radius: var(--radius-md);
  background: rgba(41, 121, 255, 0.06);
  border: 1px solid rgba(41, 121, 255, 0.12);
  text-align: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.sps-page .stat-item:hover {
  background: rgba(41, 121, 255, 0.10);
  border-color: rgba(41, 121, 255, 0.25);
}

.sps-page .stat-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--sps-blue);
  line-height: 1;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 0 8px rgba(41, 121, 255, 0.25));
}

.sps-page .stat-label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #C7C7D8);
  line-height: var(--leading-snug, 1.3);
}


/* ============================================================
   S6 -- CONTENT SECTIONS
   ============================================================ */
.sps-page .content-section {
  padding: var(--space-lg, 2rem) var(--space-lg, 2rem);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg, 2rem);

  /* Glass card */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sps-glass-border);
  box-shadow: var(--sps-card-shadow);

  transition: border-color 0.3s ease;
}

.sps-page .content-section:hover {
  border-color: rgba(41, 121, 255, 0.25);
}

/* -- Section Title -- */
.sps-page .section-title {
  font-size: var(--text-2xl, 1.75rem);
  font-weight: 900;
  margin: 0 0 var(--space-md, 1.5rem);
  line-height: var(--leading-tight, 1.15);
  letter-spacing: -0.01em;

  /* Animated gradient: blue -> cyan -> white -> blue */
  background: linear-gradient(
    125deg,
    #2979FF 0%,
    #448AFF 20%,
    #00E5FF 40%,
    #FFFFFF 55%,
    #00E5FF 70%,
    #2979FF 90%,
    #1565C0 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sps-section-gradient 10s ease-in-out infinite;
}

/* -- Subsection Title -- */
.sps-page .subsection-title {
  font-size: var(--text-xl, 1.375rem);
  font-weight: 800;
  color: var(--color-heading, #FFFFFF);
  margin: var(--space-lg, 2rem) 0 var(--space-sm, 1rem);
  padding-left: var(--space-sm, 1rem);
  border-left: 3px solid rgba(41, 121, 255, 0.40);
  line-height: var(--leading-snug, 1.3);
}

/* -- Body Text -- */
.sps-page .content-section p {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--space-sm, 1rem);
  max-width: 70ch;
}

.sps-page .content-section p:last-child {
  margin-bottom: 0;
}

.sps-page .content-section strong {
  color: var(--sps-blue);
  font-weight: 700;
}


/* ============================================================
   S7 -- QUICK FACTS
   ============================================================ */
.sps-page .quick-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md, 1.5rem);
  margin-top: var(--space-md, 1.5rem);
}

.sps-page .fact-card {
  padding: var(--space-md, 1.5rem);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--sps-glass-border);
  box-shadow: var(--sps-card-shadow);

  transition:
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}

/* Blue top accent line */
.sps-page .fact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sps-blue), var(--sps-cyan));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.sps-page .fact-card:hover {
  border-color: rgba(41, 121, 255, 0.35);
  transform: translateY(-3px);
  box-shadow: var(--sps-glow-blue), var(--sps-card-shadow);
}

.sps-page .fact-label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sps-blue);
  margin: 0 0 6px;
}

.sps-page .fact-value {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-normal, 1.5);
}

/* Staggered entrance */
.sps-page .fact-card:nth-child(1) { animation: byr-e-rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both; }
.sps-page .fact-card:nth-child(2) { animation: byr-e-rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both; }
.sps-page .fact-card:nth-child(3) { animation: byr-e-rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both; }
.sps-page .fact-card:nth-child(4) { animation: byr-e-rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both; }


/* ============================================================
   S8 -- CHROME BORDER (Abstract, Moving Forward)
   ============================================================ */
.sps-page .chrome-border {
  position: relative;
  padding: 3px;
  border-radius: calc(var(--radius-lg) + 3px);
  overflow: hidden;

  /* Animated gradient border */
  background: linear-gradient(
    180deg,
    var(--sps-blue) 0%,
    var(--sps-cyan) 25%,
    var(--sps-light-blue) 50%,
    var(--sps-cyan) 75%,
    var(--sps-blue) 100%
  );
  background-size: 100% 300%;
  animation: sps-border-flow 4s ease infinite;
}

.sps-page .chrome-border-inner {
  padding: var(--space-lg, 2rem) var(--space-lg, 2rem);
  border-radius: var(--radius-lg);

  /* Glass interior */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sps-page .chrome-border-inner p {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--space-sm, 1rem);
  max-width: 70ch;
}

.sps-page .chrome-border-inner p:last-child {
  margin-bottom: 0;
}

.sps-page .chrome-border-inner strong {
  color: var(--sps-blue);
  font-weight: 700;
}

.sps-page .chrome-border-inner .content-list {
  margin-top: var(--space-sm, 1rem);
}


/* ============================================================
   S9 -- PATIENT QUOTES
   ============================================================ */
.sps-page .patient-quote {
  position: relative;
  margin: var(--space-lg, 2rem) 0;
  padding: var(--space-md, 1.5rem) var(--space-md, 1.5rem) var(--space-md, 1.5rem) var(--space-lg, 2rem);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--sps-glass-border);
  border-left: none;
  box-shadow: var(--sps-card-shadow);

  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  animation: byr-e-fade 0.8s ease 0.3s both;
}

/* Blue left accent bar */
.sps-page .patient-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--sps-blue) 25%,
    var(--sps-cyan) 50%,
    var(--sps-blue) 75%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: sps-border-flow 3s ease infinite;
}

/* Large decorative blue quote mark */
.sps-page .patient-quote::after {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: 14px;
  font-size: 6rem;
  font-weight: 900;
  color: var(--sps-blue);
  opacity: 0.35;
  line-height: 1;
  pointer-events: none;
}

.sps-page .patient-quote:hover {
  border-color: rgba(41, 121, 255, 0.30);
  box-shadow: var(--sps-glow-blue), var(--sps-card-shadow);
}

.sps-page .quote-text {
  font-size: var(--text-lg, 1.125rem);
  font-style: italic;
  line-height: var(--leading-relaxed, 1.7);
  color: var(--color-text-primary, #F5F5F8);
  margin: 0 0 var(--space-xs, 0.75rem);
}

.sps-page .quote-author {
  font-size: var(--text-sm, 0.875rem);
  color: var(--sps-light-blue);
  font-weight: 600;
  font-style: normal;
  margin: 0;
}


/* ============================================================
   S10 -- METAPHOR BOX
   ============================================================ */
.sps-page .metaphor-box {
  display: flex;
  gap: var(--space-md, 1.5rem);
  align-items: flex-start;
  padding: var(--space-md, 1.5rem);
  margin: var(--space-md, 1.5rem) 0;
  border-radius: var(--radius-lg);

  /* Glass with blue tint */
  background: linear-gradient(
    135deg,
    rgba(41, 121, 255, 0.06) 0%,
    var(--sps-glass-bg) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(41, 121, 255, 0.20);
  box-shadow: var(--sps-card-shadow);

  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sps-page .metaphor-box:hover {
  border-color: rgba(41, 121, 255, 0.35);
  box-shadow: var(--sps-glow-blue), var(--sps-card-shadow);
}

.sps-page .metaphor-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(41, 121, 255, 0.10);
  border: 1px solid rgba(41, 121, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl, 1.75rem);
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.sps-page .metaphor-box:hover .metaphor-icon {
  background: rgba(41, 121, 255, 0.18);
  box-shadow: 0 0 16px rgba(41, 121, 255, 0.20);
}

.sps-page .metaphor-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 800;
  color: var(--sps-blue);
  margin: 0 0 var(--space-2xs, 0.5rem);
  line-height: var(--leading-tight, 1.15);
}

.sps-page .metaphor-text {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0;
}


/* ============================================================
   S11 -- CONTENT LISTS
   ============================================================ */
.sps-page .content-list {
  list-style: none;
  margin: var(--space-sm, 1rem) 0;
  padding: 0 0 0 var(--space-md, 1.5rem);
  border-left: 2px solid rgba(41, 121, 255, 0.15);
}

.sps-page .content-list li {
  position: relative;
  padding: var(--space-2xs, 0.5rem) 0 var(--space-2xs, 0.5rem) var(--space-sm, 1rem);
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
}

/* Custom blue bullet */
.sps-page .content-list li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: calc(var(--space-2xs, 0.5rem) + 0.6em);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sps-blue);
  box-shadow: 0 0 6px rgba(41, 121, 255, 0.30);
  transform: translateY(-50%);
}

.sps-page .content-list li strong {
  color: var(--sps-blue);
  font-weight: 700;
}


/* ============================================================
   S12 -- INFO BOX & WARNING BOX
   ============================================================ */
.sps-page .info-box {
  margin: var(--space-md, 1.5rem) 0;
  padding: var(--space-md, 1.5rem);
  border-radius: var(--radius-md);
  position: relative;

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--sps-glass-border);
  box-shadow: var(--sps-card-shadow);

  /* Blue left accent bar */
  border-left: 4px solid var(--sps-blue);
}

.sps-page .info-box-title {
  font-size: var(--text-md, 1rem);
  font-weight: 800;
  color: var(--sps-blue);
  margin: 0 0 var(--space-xs, 0.75rem);
  line-height: var(--leading-tight, 1.15);
}

.sps-page .info-box p {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0;
}

.sps-page .info-box strong {
  color: var(--sps-blue);
  font-weight: 700;
}

/* Warning variant — amber/orange left bar */
.sps-page .warning-box {
  margin: var(--space-md, 1.5rem) 0;
  padding: var(--space-md, 1.5rem);
  border-radius: var(--radius-md);

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(251, 191, 36, 0.16);
  box-shadow: var(--sps-card-shadow);

  /* Amber left bar */
  border-left: 4px solid #FBB924;
}

.sps-page .warning-box .info-box-title {
  color: #FBB924;
}

.sps-page .warning-box p {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0;
}

.sps-page .warning-box strong {
  color: #FBB924;
  font-weight: 700;
}


/* ============================================================
   S13 -- TIMELINE
   ============================================================ */
.sps-page .timeline {
  position: relative;
  padding-left: 36px;
  margin: var(--space-md, 1.5rem) 0;
}

/* Vertical line */
.sps-page .timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--sps-blue) 0%,
    var(--sps-cyan) 20%,
    var(--sps-blue) 50%,
    rgba(41, 121, 255, 0.35) 80%,
    transparent 100%
  );
}

.sps-page .timeline-item {
  position: relative;
  padding-bottom: var(--space-lg, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--space-sm, 1rem);
  align-items: baseline;
  transition: background 0.3s ease;
}

.sps-page .timeline-item:last-child {
  padding-bottom: 0;
}

/* -- Timeline Marker Dot -- */
.sps-page .timeline-marker {
  position: absolute;
  left: -36px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg-primary, #020617);
  border: 3px solid var(--sps-blue);
  z-index: var(--z-content, 1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Pulse on hover */
.sps-page .timeline-item:hover .timeline-marker {
  background: var(--sps-blue);
  animation: sps-marker-pulse 2s ease-in-out infinite;
}

/* -- Timeline Year -- */
.sps-page .timeline-year {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 800;
  color: var(--sps-blue);
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  grid-column: 1 / -1;
}

/* -- Timeline Content -- */
.sps-page .timeline-content {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-secondary, #C7C7D8);
  line-height: var(--leading-normal, 1.5);
  margin: 0;
  grid-column: 1 / -1;
}

.sps-page .timeline-content strong {
  color: var(--color-heading, #FFFFFF);
  font-weight: 700;
}

/* Hover glow on timeline items */
.sps-page .timeline-item:hover {
  background: rgba(41, 121, 255, 0.035);
  border-radius: var(--radius-md);
  padding-left: var(--space-sm, 1rem);
  margin-left: calc(-1 * var(--space-sm, 1rem));
}


/* ============================================================
   S14 -- VARIANT GRID
   ============================================================ */
.sps-page .variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md, 1.5rem);
  margin-top: var(--space-md, 1.5rem);
}

.sps-page .variant-card {
  padding: var(--space-md, 1.5rem);
  padding-top: calc(var(--space-md, 1.5rem) + 4px);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sps-glass-border);
  box-shadow: var(--sps-card-shadow);

  transition:
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}

/* Colored top accent line cycling through blues/cyans/purples */
.sps-page .variant-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sps-page .variant-card:nth-child(6n+1)::before {
  background: linear-gradient(90deg, #2979FF, #448AFF);
  box-shadow: 0 0 12px rgba(41, 121, 255, 0.40);
}

.sps-page .variant-card:nth-child(6n+2)::before {
  background: linear-gradient(90deg, #00E5FF, #18FFFF);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.40);
}

.sps-page .variant-card:nth-child(6n+3)::before {
  background: linear-gradient(90deg, #7C4DFF, #B388FF);
  box-shadow: 0 0 12px rgba(124, 77, 255, 0.40);
}

.sps-page .variant-card:nth-child(6n+4)::before {
  background: linear-gradient(90deg, #82B1FF, #2979FF);
  box-shadow: 0 0 12px rgba(130, 177, 255, 0.40);
}

.sps-page .variant-card:nth-child(6n+5)::before {
  background: linear-gradient(90deg, #00B8D4, #00E5FF);
  box-shadow: 0 0 12px rgba(0, 184, 212, 0.40);
}

.sps-page .variant-card:nth-child(6n+6)::before {
  background: linear-gradient(90deg, #651FFF, #7C4DFF);
  box-shadow: 0 0 12px rgba(101, 31, 255, 0.40);
}

.sps-page .variant-card:hover {
  border-color: rgba(41, 121, 255, 0.38);
  transform: translateY(-4px);
  box-shadow: var(--sps-glow-blue), var(--sps-card-shadow);
}

.sps-page .variant-name {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 800;
  color: var(--color-heading, #FFFFFF);
  margin: 0 0 var(--space-2xs, 0.5rem);
  line-height: var(--leading-tight, 1.15);
}

.sps-page .variant-description {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-secondary, #C7C7D8);
  line-height: var(--leading-normal, 1.5);
  margin: 0;
}


/* ============================================================
   S15 -- CRITICAL CALLOUT
   ============================================================ */
.sps-page .critical-callout {
  padding: var(--space-lg, 2rem);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg, 2rem);
  position: relative;
  overflow: hidden;

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(239, 68, 68, 0.35);
  box-shadow: var(--sps-card-shadow);

  /* Animated pulsing red/orange border */
  animation: sps-critical-pulse 2.5s ease-in-out infinite;
}

@keyframes sps-critical-pulse {
  0%   { border-color: rgba(239, 68, 68, 0.35); box-shadow: var(--sps-card-shadow), 0 0 0 0 rgba(239, 68, 68, 0.20); }
  50%  { border-color: rgba(251, 146, 60, 0.50); box-shadow: var(--sps-card-shadow), 0 0 20px rgba(239, 68, 68, 0.15); }
  100% { border-color: rgba(239, 68, 68, 0.35); box-shadow: var(--sps-card-shadow), 0 0 0 0 rgba(239, 68, 68, 0.20); }
}

/* Radial red glow */
.sps-page .critical-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 40% at 50% 0%,
    rgba(239, 68, 68, 0.06) 0%,
    transparent 65%
  );
}

.sps-page .critical-callout > * {
  position: relative;
  z-index: 1;
}

.sps-page .critical-callout h3 {
  font-size: var(--text-xl, 1.375rem);
  font-weight: 900;
  color: #EF4444;
  margin: 0 0 var(--space-md, 1.5rem);
  line-height: var(--leading-tight, 1.15);
}

.sps-page .critical-callout-content p {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--space-sm, 1rem);
}

.sps-page .critical-callout-content p:last-child {
  margin-bottom: 0;
}

.sps-page .critical-callout-content strong {
  color: #EF4444;
  font-weight: 700;
}

.sps-page .critical-callout-content .content-list {
  border-left-color: rgba(239, 68, 68, 0.20);
}

.sps-page .critical-callout-content .content-list li::before {
  background: #EF4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.30);
}


/* ============================================================
   S16 -- TREATMENT TIERS
   ============================================================ */
.sps-page .treatment-tier {
  margin: var(--space-md, 1.5rem) 0;
  padding: var(--space-md, 1.5rem);
  border-radius: var(--radius-lg);
  position: relative;

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sps-glass-border);
  box-shadow: var(--sps-card-shadow);

  /* Default left bar — blue */
  border-left: 4px solid var(--sps-blue);

  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sps-page .treatment-tier:hover {
  box-shadow: var(--sps-glow-blue), var(--sps-card-shadow);
}

.sps-page .tier-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 1rem);
  margin-bottom: var(--space-sm, 1rem);
}

.sps-page .tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}

.sps-page .tier-title {
  font-size: var(--text-xl, 1.375rem);
  font-weight: 800;
  color: var(--color-heading, #FFFFFF);
  margin: 0;
  line-height: var(--leading-snug, 1.3);
}

.sps-page .treatment-tier p {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-relaxed, 1.7);
  margin: 0 0 var(--space-sm, 1rem);
}

/* Core tier — blue */
.sps-page .treatment-tier:nth-of-type(1) {
  border-left-color: var(--sps-tier-core);
}

.sps-page .treatment-tier:nth-of-type(1) .tier-badge {
  background: rgba(41, 121, 255, 0.12);
  color: var(--sps-blue);
  border: 1px solid rgba(41, 121, 255, 0.28);
}

/* Evidence-Based tier — cyan */
.sps-page .treatment-tier:nth-of-type(2) {
  border-left-color: var(--sps-tier-evidence);
}

.sps-page .treatment-tier:nth-of-type(2) .tier-badge {
  background: rgba(0, 229, 255, 0.10);
  color: var(--sps-cyan);
  border: 1px solid rgba(0, 229, 255, 0.28);
}

.sps-page .treatment-tier:nth-of-type(2):hover {
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.12), var(--sps-card-shadow);
}

/* Emerging tier — purple */
.sps-page .treatment-tier:nth-of-type(3) {
  border-left-color: var(--sps-tier-emerging);
}

.sps-page .treatment-tier:nth-of-type(3) .tier-badge {
  background: rgba(124, 77, 255, 0.10);
  color: var(--sps-purple);
  border: 1px solid rgba(124, 77, 255, 0.28);
}

.sps-page .treatment-tier:nth-of-type(3):hover {
  box-shadow: 0 0 20px rgba(124, 77, 255, 0.12), var(--sps-card-shadow);
}


/* ============================================================
   S17 -- RESOURCE CARDS
   ============================================================ */
.sps-page .resource-card {
  padding: var(--space-md, 1.5rem);
  padding-top: calc(var(--space-md, 1.5rem) + 4px);
  border-radius: var(--radius-lg);
  margin: var(--space-md, 1.5rem) 0;
  position: relative;
  overflow: hidden;

  /* Glass */
  background: var(--sps-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sps-glass-border);
  box-shadow: var(--sps-card-shadow);

  transition:
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}

/* Blue top accent */
.sps-page .resource-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sps-blue), var(--sps-cyan), var(--sps-light-blue));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sps-page .resource-card:hover {
  border-color: rgba(41, 121, 255, 0.38);
  transform: translateY(-3px);
  box-shadow: var(--sps-glow-blue), var(--sps-card-shadow);
}

.sps-page .resource-name {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 800;
  color: var(--color-heading, #FFFFFF);
  margin: 0 0 var(--space-xs, 0.75rem);
  line-height: var(--leading-tight, 1.15);
}

.sps-page .resource-description {
  font-size: var(--text-md, 1rem);
  color: var(--color-text-secondary, #C7C7D8);
  line-height: var(--leading-normal, 1.5);
  margin: 0 0 var(--space-xs, 0.75rem);
}

.sps-page .resource-description:last-child {
  margin-bottom: 0;
}

/* Resource features list */
.sps-page .resource-features {
  list-style: none;
  margin: var(--space-xs, 0.75rem) 0 0;
  padding: 0;
}

.sps-page .resource-features li {
  position: relative;
  padding: 4px 0 4px var(--space-md, 1.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-primary, #F5F5F8);
  line-height: var(--leading-normal, 1.5);
}

.sps-page .resource-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(4px + 0.55em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sps-light-blue);
  box-shadow: 0 0 4px rgba(130, 177, 255, 0.30);
}


/* ============================================================
   S18 -- UTILITY CLASSES
   ============================================================ */
.sps-page .mt-lg {
  margin-top: var(--space-lg, 2rem);
}

.sps-page .mb-xl {
  margin-bottom: var(--space-xl, 3rem);
}


/* ============================================================
   S19 -- ENTRANCE ANIMATIONS
   ============================================================ */

/* Hero fires immediately */
.sps-page .hero {
  animation: byr-e-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Breaking news */
.sps-page .breaking-news {
  animation: byr-e-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both,
             sps-pulse 3s ease-in-out 1s infinite;
}

/* Content sections — staggered */
.sps-page .content-section:nth-child(1) { animation: byr-e-fade 0.6s ease 0.1s both; }
.sps-page .content-section:nth-child(2) { animation: byr-e-fade 0.6s ease 0.15s both; }
.sps-page .content-section:nth-child(3) { animation: byr-e-fade 0.6s ease 0.20s both; }
.sps-page .content-section:nth-child(n+4) { animation: byr-e-fade 0.6s ease 0.25s both; }

/* Variant cards — staggered */
.sps-page .variant-card:nth-child(1) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both; }
.sps-page .variant-card:nth-child(2) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both; }
.sps-page .variant-card:nth-child(3) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both; }
.sps-page .variant-card:nth-child(4) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both; }
.sps-page .variant-card:nth-child(5) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.50s both; }
.sps-page .variant-card:nth-child(6) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.60s both; }

/* Resource cards — staggered */
.sps-page .resource-card:nth-child(1) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.sps-page .resource-card:nth-child(2) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
.sps-page .resource-card:nth-child(3) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
.sps-page .resource-card:nth-child(4) { animation: byr-e-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both; }


/* ============================================================
   S20 -- RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet and below */
@media (max-width: 768px) {
  .sps-page .hero {
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
  }

  .sps-page .breaking-news-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .sps-page .quick-facts {
    grid-template-columns: 1fr;
  }

  .sps-page .variant-grid {
    grid-template-columns: 1fr;
  }

  .sps-page .content-section {
    padding: var(--space-md, 1.5rem);
  }

  .sps-page .chrome-border-inner {
    padding: var(--space-md, 1.5rem);
  }

  .sps-page .metaphor-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Reduce staggered delays on mobile */
  .sps-page .fact-card:nth-child(n) { animation-delay: 0.05s; }
  .sps-page .variant-card:nth-child(n) { animation-delay: 0.05s; }
  .sps-page .resource-card:nth-child(n) { animation-delay: 0.05s; }
}

/* Phone */
@media (max-width: 480px) {
  .sps-page .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .sps-page .breaking-news {
    padding: var(--space-md, 1.5rem);
  }

  .sps-page .breaking-news-stats {
    grid-template-columns: 1fr;
  }

  .sps-page .stat-value {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  .sps-page .patient-quote::after {
    font-size: 4rem;
  }

  .sps-page .metaphor-icon {
    width: 48px;
    height: 48px;
    font-size: var(--text-xl);
  }

  .sps-page .timeline {
    padding-left: 28px;
  }

  .sps-page .timeline-marker {
    left: -28px;
    width: 14px;
    height: 14px;
  }
}


/* ============================================================
   S21 -- LIGHT MODE OVERRIDES
   ============================================================ */

/* Glass elements get cool white/blue treatment */
.mode-light .sps-page .hero,
.mode-light .sps-page .content-section,
.mode-light .sps-page .breaking-news,
.mode-light .sps-page .sps-toc .byr-toc-inner,
.mode-light .sps-page .patient-quote,
.mode-light .sps-page .metaphor-box,
.mode-light .sps-page .info-box,
.mode-light .sps-page .warning-box,
.mode-light .sps-page .critical-callout,
.mode-light .sps-page .treatment-tier,
.mode-light .sps-page .resource-card,
.mode-light .sps-page .fact-card,
.mode-light .sps-page .variant-card,
.mode-light .sps-page .chrome-border-inner {
  background: rgba(240, 245, 255, 0.82) !important;
  border-color: rgba(21, 101, 192, 0.18) !important;
}

/* Stat items light mode */
.mode-light .sps-page .stat-item {
  background: rgba(41, 121, 255, 0.04);
  border-color: rgba(21, 101, 192, 0.12);
}

/* Text adjustments for light mode */
.mode-light .sps-page .content-section p,
.mode-light .sps-page .chrome-border-inner p,
.mode-light .sps-page .breaking-news-content p,
.mode-light .sps-page .quote-text,
.mode-light .sps-page .metaphor-text,
.mode-light .sps-page .info-box p,
.mode-light .sps-page .warning-box p,
.mode-light .sps-page .content-list li,
.mode-light .sps-page .fact-value,
.mode-light .sps-page .variant-description,
.mode-light .sps-page .timeline-content,
.mode-light .sps-page .resource-features li,
.mode-light .sps-page .treatment-tier p,
.mode-light .sps-page .critical-callout-content p {
  color: var(--color-text-primary-light, #0B1530);
}

.mode-light .sps-page .hero-subtitle,
.mode-light .sps-page .stat-label,
.mode-light .sps-page .resource-description,
.mode-light .sps-page .quote-author {
  color: var(--color-text-secondary-light, #3B425C);
}

.mode-light .sps-page .sps-toc a {
  color: var(--color-text-muted-light, #6B7280);
}

.mode-light .sps-page .sps-toc a[aria-current="true"] {
  color: var(--sps-blue-dim);
}

/* Hero title gradient — darker blues for light mode */
.mode-light .sps-page .hero h1 {
  background: linear-gradient(
    125deg,
    #1565C0 0%,
    #1976D2 25%,
    #0D47A1 50%,
    #1565C0 75%,
    #1976D2 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sps-title-gradient 8s ease-in-out infinite;
  filter: none;
}

/* Section title gradient — darker in light mode */
.mode-light .sps-page .section-title {
  background: linear-gradient(
    125deg,
    #1565C0 0%,
    #1976D2 25%,
    #0D47A1 45%,
    #0097A7 60%,
    #1565C0 80%,
    #1976D2 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sps-section-gradient 10s ease-in-out infinite;
}

/* Hero tagline light mode */
.mode-light .sps-page .hero-tagline {
  color: var(--color-text-primary-light, #0B1530);
  text-shadow: none;
}

/* Headings light mode */
.mode-light .sps-page .subsection-title,
.mode-light .sps-page .breaking-news-content h3,
.mode-light .sps-page .variant-name,
.mode-light .sps-page .resource-name,
.mode-light .sps-page .tier-title,
.mode-light .sps-page .timeline-content strong {
  color: var(--color-heading-light, #111827);
}

/* Strong text accents — slightly darker blue for readability */
.mode-light .sps-page .content-section strong,
.mode-light .sps-page .chrome-border-inner strong,
.mode-light .sps-page .info-box strong {
  color: var(--sps-blue-dim);
}

/* Warning box light mode */
.mode-light .sps-page .warning-box {
  background: rgba(255, 251, 235, 0.82) !important;
  border-color: rgba(180, 130, 0, 0.18) !important;
}

/* Critical callout light mode */
.mode-light .sps-page .critical-callout {
  background: rgba(255, 245, 245, 0.82) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

/* Chrome border light mode — slightly dimmer gradient */
.mode-light .sps-page .chrome-border {
  background: linear-gradient(
    180deg,
    #1565C0 0%,
    #0097A7 25%,
    #42A5F5 50%,
    #0097A7 75%,
    #1565C0 100%
  );
  background-size: 100% 300%;
  animation: sps-border-flow 4s ease infinite;
}

/* Timeline line light mode */
.mode-light .sps-page .timeline::before {
  background: linear-gradient(
    180deg,
    var(--sps-blue-dim) 0%,
    #0097A7 20%,
    var(--sps-blue-dim) 50%,
    rgba(21, 101, 192, 0.35) 80%,
    transparent 100%
  );
}

.mode-light .sps-page .timeline-marker {
  background: var(--color-bg-primary-light, #F8F8FC);
  border-color: var(--sps-blue-dim);
}

/* Content list light mode */
.mode-light .sps-page .content-list {
  border-left-color: rgba(21, 101, 192, 0.18);
}

.mode-light .sps-page .content-list li::before {
  background: var(--sps-blue-dim);
  box-shadow: 0 0 4px rgba(21, 101, 192, 0.20);
}

/* Patient quote light mode */
.mode-light .sps-page .patient-quote::after {
  color: var(--sps-blue-dim);
  opacity: 0.25;
}

.mode-light .sps-page .quote-author {
  color: var(--sps-blue-dim);
}

/* Breaking news header light mode */
.mode-light .sps-page .breaking-news-header {
  color: #0097A7;
  border-bottom-color: rgba(21, 101, 192, 0.15);
}

/* TOC label light mode */
.mode-light .sps-page .sps-toc .byr-toc-label {
  color: var(--sps-blue-dim);
  border-bottom-color: rgba(21, 101, 192, 0.15);
}

/* Stat value light mode */
.mode-light .sps-page .stat-value {
  color: var(--sps-blue-dim);
  filter: none;
}

/* Fact label light mode */
.mode-light .sps-page .fact-label {
  color: var(--sps-blue-dim);
}

/* Timeline year light mode */
.mode-light .sps-page .timeline-year {
  color: var(--sps-blue-dim);
}

/* Info-box title light mode */
.mode-light .sps-page .info-box-title {
  color: var(--sps-blue-dim);
}

/* Metaphor title light mode */
.mode-light .sps-page .metaphor-title {
  color: var(--sps-blue-dim);
}

/* Treatment tier badge light mode adjustments */
.mode-light .sps-page .treatment-tier:nth-of-type(1) .tier-badge {
  background: rgba(41, 121, 255, 0.08);
  color: var(--sps-blue-dim);
  border-color: rgba(21, 101, 192, 0.25);
}

.mode-light .sps-page .treatment-tier:nth-of-type(2) .tier-badge {
  background: rgba(0, 229, 255, 0.06);
  color: #0097A7;
  border-color: rgba(0, 151, 167, 0.25);
}

.mode-light .sps-page .treatment-tier:nth-of-type(3) .tier-badge {
  background: rgba(124, 77, 255, 0.06);
  color: #6200EA;
  border-color: rgba(98, 0, 234, 0.25);
}

/* Resource features bullets light mode */
.mode-light .sps-page .resource-features li::before {
  background: var(--sps-blue-dim);
  box-shadow: 0 0 4px rgba(21, 101, 192, 0.20);
}

/* Resource features text light mode */
.mode-light .sps-page .resource-features li {
  color: var(--color-text-primary-light, #0B1530);
}


/* ============================================================
   S22 -- PRINT STYLES
   ============================================================ */
@media print {
  .sps-page .sps-toc {
    display: none;
  }

  .sps-page .hero,
  .sps-page .content-section,
  .sps-page .breaking-news,
  .sps-page .patient-quote,
  .sps-page .info-box,
  .sps-page .warning-box,
  .sps-page .critical-callout,
  .sps-page .treatment-tier,
  .sps-page .resource-card,
  .sps-page .fact-card,
  .sps-page .variant-card,
  .sps-page .chrome-border,
  .sps-page .chrome-border-inner,
  .sps-page .metaphor-box {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #CCC !important;
    animation: none !important;
    break-inside: avoid;
  }

  .sps-page .hero h1,
  .sps-page .section-title {
    -webkit-text-fill-color: #000 !important;
    background: none !important;
    animation: none !important;
    filter: none !important;
    color: #000 !important;
  }

  .sps-page .hero::before,
  .sps-page .hero::after,
  .sps-page .breaking-news::before,
  .sps-page .critical-callout::before {
    display: none !important;
  }
}