/*
 * GenieFX Academy — Blog & Article Styles
 * Version: 5.0 — Visual Intelligence Implementation
 * ============================================================
 *
 * Every decision here is traceable to the Visual Intelligence Library.
 *
 * SURFACE ELEVATION SYSTEM  (Ref: REF-DR-03, Section 9)
 * ─────────────────────────────────────────────────────
 * L0  Page Base:   var(--bg-base)       #07070A
 * L1  Panel:       var(--bg-surface)    #0E0E12
 * L2  Elevated:    var(--bg-elevated)   #141418
 * L3  Card:        var(--bg-card)       #1A1A20
 * L4  Card Hover:  var(--bg-card-hover) #1F1F26
 * L5  Active:      rgba(1,129,250,0.12) overlay
 *
 * LIGHTING SYSTEM  (Ref: Section 10)
 * ─────────────────────────────────────────────────────
 * Specular top:    inset 0 1px 0 rgba(255,255,255,0.09)
 * Brand ambient:   radial-gradient at 8–10% opacity, upper-right corner
 * Depth shadow:    var(--shadow-md) / var(--shadow-lg)
 *
 * MARKET VISUAL LANGUAGE  (Ref: Section 12, Tier 1)
 * ─────────────────────────────────────────────────────
 * Coordinate grid: SVG background at 2.5% opacity — chart paper feel
 * Abstract trend:  SVG path decoration at 8% opacity in hero
 * Restraint rule:  Never explain — only suggest the market world
 *
 * MOTION SYSTEM  (Ref: Section 8)
 * ─────────────────────────────────────────────────────
 * L1 Ambient:     Hero glow breathe — 20s loop, imperceptible
 * L2 Structural:  Hover elevation 3px Y + shadow increase
 * L3 Narrative:   Grid fade-in on load — 0.4s, once
 *
 * COLOR DISCIPLINE  (Ref: Universal Principle 4, REF-BE-02)
 * ─────────────────────────────────────────────────────
 * #0181FA  → CTAs, active states, accent signals only. Never decorative.
 * #4ade80  → Beginner badges (positive signal)
 * #fbbf24  → Intermediate badges (caution signal)
 * #f87171  → Advanced / risk indicators
 */

/* ──────────────────────────────────────────────
   ACCESSIBILITY UTILITIES
   ────────────────────────────────────────────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--clr-primary);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 9999;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-to-content:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Shared blog-page structural utilities.
   Values mirror prior inline styles exactly; this is maintainability only. */
.nav-logo-img {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
  max-width: 160px;
}

.nav-mobile-platform-link {
  color: var(--clr-primary);
  font-weight: 600;
}

/* ──────────────────────────────────────────────
   AMBIENT MOTION SYSTEM  (Section 8 — Level 1)
   ────────────────────────────────────────────── */
@keyframes hero-ambient-breathe {
  /* Raised floor from 0.75→0.88 — glow never fully dims now */
  0%, 100% { opacity: 0.88; transform: scale(1.00); }
  50%       { opacity: 1.00; transform: scale(1.10); }
}

/* Live-market pulse on section badge dot */
@keyframes hero-badge-pulse {
  0%, 100% { opacity: 1;    transform: scale(1.0); }
  50%       { opacity: 0.45; transform: scale(0.65); }
}

@keyframes blog-grid-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes article-hero-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toc-link-slide {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════
   BLOG LISTING PAGE
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   BLOG HERO
   Ref: Section 6 (editorial layout), Section 7 (atmosphere),
        Section 10 (lighting), Section 12 (market visual language)
        "Precision-Authority Hybrid" recommendation (Section 17)
   ────────────────────────────────────────────── */
.blog-hero {
  position: relative;
  padding: calc(var(--nav-height, 72px) + var(--sp-16, 4rem)) 0 var(--sp-16, 4rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  /*
   * Visible base tint — makes the hero feel "charged" rather than empty.
   * A directional blue-to-transparent that reads as an ambient light source
   * hitting the top-left of the section from off-screen.
   */
  background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(175,218,0,0.05) 0%, transparent 60%);
}

/*
 * Layer 1: Market coordinate grid + abstract trend line
 *
 * Two background layers in one pseudo-element:
 *   [a] Market trend line — abstract upward polyline spanning full hero width.
 *       stroke-opacity 0.07 — faintly visible, immediately signals "trading chart" territory.
 *       Positioned to anchor at the bottom of the hero, trending upward to the right.
 *   [b] Coordinate grid tile — the chart-paper texture.
 *       Increased from 0.025 → 0.05 opacity — now perceptible as a light texture.
 */
/* Chart grid + trend line — DISABLED: replaced by floating icons (particles-canvas) */
.blog-hero::before {
  content: none;
}

/*
 * Layer 2: Brand ambient glow — cross-lit atmosphere
 *
 * Two radial gradients in one pseudo-element:
 *   Primary:   upper-right glow at 0.22 opacity — now visibly perceptible
 *   Secondary: lower-left counter-light at 0.06 — creates cross-lighting depth
 * Together they create an illuminated atmosphere, not a flat dark background.
 */
.blog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 90% at 88% -10%, rgba(1,129,250,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at -5%  110%, rgba(1,129,250,0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  animation: hero-ambient-breathe 20s ease-in-out infinite;
}

.blog-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem;
  animation: article-hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (max-width: 600px) {
  .blog-hero-inner { padding: 0 1.25rem; }
}

/*
 * Abstract candlestick cluster — positioned lower-right of hero content.
 * 5 candles in uptrend formation: bodies + wicks, white at 15–22% opacity.
 * Unambiguously "trading chart" without spelling it out.
 * Hidden on viewports < 960px (collision with centered text).
 */
/* Candlestick cluster — DISABLED: replaced by floating icons (particles-canvas) */
.blog-hero-inner::before { content: none; }
[dir="rtl"] .blog-hero-inner::before { content: none; }

/*
 * Editorial section boundary — the horizontal rule below hero content.
 * Brand-gradient fade: transparent → primary → transparent.
 * Creates a clean visual terminus for the hero, matching financial editorial conventions.
 */
.blog-hero-inner::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--sp-10);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(175,218,0,0.18) 25%,
    rgba(175,218,0,0.18) 75%,
    transparent 100%
  );
}

/*
 * Centering overrides for editorial content inside .blog-hero-inner.
 * The split-layout CSS (further in the file) has flex-start overrides
 * that no longer apply — but these ensure the centered layout is explicit.
 */
.blog-hero-inner .blog-hero-actions {
  justify-content: center;
}
.blog-hero-inner .blog-hero-sub {
  text-align: center;
}

/*
 * Live-market pulse dot on hero badge.
 * The dot signals "active / live" — a trading terminal convention.
 * 2s pulse — noticeable but not distracting.
 */
.blog-hero .section-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #AFDA00;
  margin-right: 8px;
  flex-shrink: 0;
  animation: hero-badge-pulse 2s ease-in-out infinite;
}

[dir="rtl"] .blog-hero .section-badge::before { margin-right: 0; margin-left: 8px; }

/* Section badge — terminal/market data label treatment */
.blog-hero .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #AFDA00;
  background: transparent;
  border: none;
  border-radius: var(--r-full);
  padding: 6px 16px;
  margin-bottom: var(--sp-6);
  /* Specular top — elevated surface feel, lime accent */
  box-shadow: inset 0 1px 0 rgba(175,218,0,0.15);
}

/*
 * Hero title — "The headline is the hero" (Section 11)
 * Cinematic scale contrast. Typography carries authority.
 *
 * Gradient: white at top → cool blue-white (#B9E4FF ≈ var(--clr-light-blue)) at bottom.
 * Simulates screen light illuminating the text from below-right — trading terminal feel.
 * Dramatically more visible than the previous white→slightly-less-white gradient.
 */
.blog-hero-title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
  background: linear-gradient(160deg,
    #ffffff          0%,
    rgba(255,255,255,0.97) 45%,
    rgba(185,228,255,0.88) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[dir="rtl"] .blog-hero-title {
  line-height: 1.2;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
}

.blog-hero-sub {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto var(--sp-6);
}

[dir="rtl"] .blog-hero-sub { line-height: 1.9; }

/*
 * Hero badges — elevated data chip treatment
 * Ref: REF-BE-02 "Credibility signals integrated visually"
 * Styled as trading terminal data points with subtle surface elevation.
 */
.blog-hero-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: 6px 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-full);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.blog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(220, 227, 240, 0.92);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 16px;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* Dot separator between badge items */
.blog-hero-badge--sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
  padding: 0;
  flex-shrink: 0;
  align-self: center;
}

.blog-hero-badge svg {
  color: #AFDA00;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.blog-hero-badge:hover {
  color: rgba(220, 227, 240, 0.92);
}

/*
 * Article count — social proof line
 * Small, muted, lime-tinted. Signals activity without shouting.
 */
.blog-hero-count {
  margin: var(--sp-4) auto 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(175,218,0,0.65);
  text-align: center;
}

/*
 * Hero CTA — single action, clear next step
 */
.blog-hero-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

.blog-hero-btn {
  padding: 13px 32px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-full);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.25),
    0 4px 24px rgba(1,129,250,0.22),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.blog-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.35),
    0 8px 32px rgba(1,129,250,0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ──────────────────────────────────────────────
   SECTION HEADERS
   Editorial treatment: label + title + gradient rule below.
   Mirrors financial research report section conventions.
   ────────────────────────────────────────────── */
.blog-section-header {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  position: relative;
}

/*
 * Section divider rule — brand-gradient line below every section header.
 * Starts at brand-blue intensity on the left (where the section label's
 * accent bar also starts) and fades right, creating editorial coherence.
 */
.blog-section-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(175,218,0,0.22) 0%,
    rgba(255,255,255,0.07) 35%,
    transparent 75%
  );
}

.blog-section-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--sp-2);
}

.blog-section-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.65;
}

/*
 * Section label — the editorial overline/category signal
 * Ref: "Type-first editorial composition" (Section 11)
 * Now with left accent bar — mirrors article h2 treatment for visual consistency.
 */
.blog-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #AFDA00;
  margin-bottom: var(--sp-4);
  padding-left: 10px;
  border-left: 2px solid #AFDA00;
}

[dir="rtl"] .blog-section-label {
  padding-left: 0;
  padding-right: 10px;
  border-left: none;
  border-right: 2px solid #AFDA00;
}

/* ──────────────────────────────────────────────
   CATEGORY FILTER TABS
   "One accent color, used sparingly" (Universal Principle 4)
   ────────────────────────────────────────────── */
.blog-cats {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-6);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.blog-cats::-webkit-scrollbar { display: none; }

.blog-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  /* Specular highlight on all interactive surfaces */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color var(--t-fast), color var(--t-fast),
              background var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
  unicode-bidi: isolate;
}

.blog-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.blog-cat-label {
  min-width: 0;
}

.blog-cat-btn:hover {
  border-color: var(--border-primary);
  color: var(--clr-primary);
  background: rgba(1,129,250,0.06);
  box-shadow: inset 0 1px 0 rgba(1,129,250,0.12);
}

.blog-cat-btn[aria-selected="true"] {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 12px rgba(1,129,250,0.3);
}

.blog-cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.10);
  font-size: 0.65rem;
  font-weight: 700;
}

.blog-cat-btn[aria-selected="true"] .blog-cat-count {
  background: rgba(255,255,255,0.22);
}

/* ──────────────────────────────────────────────
   SEARCH BAR
   ────────────────────────────────────────────── */
.blog-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-5);
  max-width: 580px;
}

.blog-search-icon {
  position: absolute;
  left: 16px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

[dir="rtl"] .blog-search-icon { left: auto; right: 16px; }

.blog-search-input {
  width: 100%;
  padding-block: 12px;
  padding-inline-start: 46px;
  padding-inline-end: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  unicode-bidi: plaintext;
  /* Specular highlight */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.2);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.blog-search-input:focus {
  border-color: rgba(1,129,250,0.45);
  background: var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(1,129,250,0.08);
}

.blog-search-input::placeholder { color: var(--text-muted); }

[dir="rtl"] .blog-search-input {
  text-align: right;
}

/* Bug 3 fix: clear button visible only via .visible class */
.blog-search-clear {
  position: absolute;
  right: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.blog-search-clear.visible { display: flex; }

.blog-search-clear:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

[dir="rtl"] .blog-search-clear { right: auto; left: 12px; }

.blog-search-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

/* ──────────────────────────────────────────────
   FEATURED EDITORIAL SECTION
   Ref: Section 11 "Opening Spread Concept"
   Ref: REF-AW-02 (ORDR) "cinematic compositional approach"
   ────────────────────────────────────────────── */
.blog-featured-wrap {
  margin: var(--sp-10) 0;
}

.blog-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 900px) {
  .blog-featured-grid {
    grid-template-columns: 1.65fr 1fr;
    gap: 20px;
    align-items: stretch;
  }
}

/*
 * Featured main — category hover accent variables (same system as .blog-card).
 * JS renders: <a class="blog-featured-main blog-featured-main--{catKey}">
 */
.blog-featured-main--basics      { --card-accent-rgb: 1, 129, 250; }
.blog-featured-main--smart-money { --card-accent-rgb: 167, 139, 250; }
.blog-featured-main--market-news { --card-accent-rgb: 251, 191, 36; }
.blog-featured-main--risk        { --card-accent-rgb: 248, 113, 113; }
.blog-featured-main--guides      { --card-accent-rgb: 74, 222, 128; }

/*
 * Hero featured card — elevated surface with specular highlight
 * "Cards should feel like active screens with subtle internal light" (REF-BE-04)
 */
.blog-featured-main {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 2px 6px  rgba(0,0,0,0.45),
    0 8px 48px rgba(0,0,0,0.65);
  transition:
    border-color var(--t-base),
    transform var(--t-base),
    box-shadow var(--t-base);
}

.blog-featured-main:hover {
  border-color: rgba(var(--card-accent-rgb, 175,218,0), 0.28);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 12px  rgba(0,0,0,0.55),
    0 16px 60px rgba(0,0,0,0.75),
    0 0   52px  rgba(var(--card-accent-rgb, 175,218,0), 0.10);
}

.blog-featured-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.blog-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}

.blog-featured-main:hover .blog-featured-img img {
  transform: scale(1.04);
}

/* Gradient overlay on image — editorial magazine treatment */
.blog-featured-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(7,7,10,0.35) 100%
  );
  pointer-events: none;
}

.blog-featured-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  color: var(--clr-primary-30);
}

.blog-featured-label {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #AFDA00;
  color: #0A1400;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 11px;
  /*
   * Editorial chip — not a pill. Matches the data-tag visual language.
   * Looks like a Bloomberg "ANALYSIS" or "FEATURED" editorial label.
   */
  border-radius: var(--r-sm);
  box-shadow: 0 2px 12px rgba(175,218,0,0.28);
  z-index: 2;
}

[dir="rtl"] .blog-featured-label { left: auto; right: 14px; }

.blog-featured-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-featured-title {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.blog-featured-excerpt {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: auto;
  unicode-bidi: isolate;
}

.blog-dot { opacity: 0.35; }

.blog-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clr-primary);
  font-weight: 700;
  font-size: 0.83rem;
  margin-top: var(--sp-2);
  transition: gap var(--t-fast);
  unicode-bidi: isolate;
}

.blog-featured-main:hover .blog-featured-cta { gap: 9px; }

/* Secondary picks — category hover accent variables (same system as .blog-card).
   JS now renders: <a class="blog-featured-pick blog-featured-pick--{catKey}"> */
.blog-featured-pick--basics      { --card-accent-rgb: 1, 129, 250; }
.blog-featured-pick--smart-money { --card-accent-rgb: 167, 139, 250; }
.blog-featured-pick--market-news { --card-accent-rgb: 251, 191, 36; }
.blog-featured-pick--risk        { --card-accent-rgb: 248, 113, 113; }
.blog-featured-pick--guides      { --card-accent-rgb: 74, 222, 128; }

/* Secondary picks column */
.blog-featured-secondary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-featured-pick {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 6px  rgba(0,0,0,0.40),
    0 4px 20px rgba(0,0,0,0.50);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.blog-featured-pick:hover {
  border-color: rgba(var(--card-accent-rgb, 175,218,0), 0.24);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(0,0,0,0.55),
    0 8px 32px rgba(0,0,0,0.60),
    0 0  24px rgba(var(--card-accent-rgb, 175,218,0), 0.08);
}

.blog-featured-pick-img {
  width: 88px;
  min-width: 88px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.blog-featured-pick-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-base);
}

.blog-featured-pick:hover .blog-featured-pick-img img {
  transform: scale(1.05);
}

.blog-featured-pick-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-surface);
  color: var(--clr-primary-30);
}

.blog-featured-pick-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.blog-featured-pick-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.blog-featured-meta--sm { font-size: 0.7rem; }


/* ──────────────────────────────────────────────
   ARTICLE GRID
   ────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  /* Level 3 narrative motion — entrance on load */
  animation: blog-grid-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ──────────────────────────────────────────────
   CARD SYSTEM — ILLUMINATED SURFACE ELEVATION
   Ref: REF-BE-04 "illuminated card concept — subtle internal light"
   Ref: REF-DR-03 "5-level elevation within dark gray spectrum"
   Ref: Section 10 "Surface Specular Highlights"
   ────────────────────────────────────────────── */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative; /* required for ::before category accent bar */
  /*
   * Background stepped up to --bg-card (#1A1A20) from --bg-elevated (#141418).
   * This increases luminosity separation from the page base (#07070A),
   * making cards visibly "float" above the surface.
   */
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.11);
  text-decoration: none;
  color: inherit;
  height: 100%;
  /*
   * Shadow stack: wide diffuse shadow for depth + tight close shadow for edge lift.
   * The tight shadow (0 2px 6px) is what makes objects look raised, not just blurred.
   * Specular increased from 0.08 → 0.12 — the lit edge becomes visible.
   */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 2px 6px  rgba(0,0,0,0.40),
    0 6px 28px rgba(0,0,0,0.55);
  transition:
    transform var(--t-base),
    border-color var(--t-base),
    background var(--t-base),
    box-shadow var(--t-base);
}

.blog-card:hover {
  transform: translateY(-4px);
  background: var(--bg-card-hover);
  /*
   * Hover shadow stack: lift shadow + category-matched glow.
   * --card-accent-rgb is declared by each .blog-card--{category} modifier above.
   * The fallback (175,218,0) is lime — covers any unmatched card gracefully.
   */
  border-color: rgba(var(--card-accent-rgb, 175,218,0), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 12px  rgba(0,0,0,0.55),
    0 12px 48px rgba(0,0,0,0.70),
    0 0  36px   rgba(var(--card-accent-rgb, 175,218,0), 0.10);
}

/* Top accent bar reaches full saturation on hover — subtle but intentional */
.blog-card:hover::before {
  opacity: 1;
}

/*
 * ── CATEGORY HOVER ACCENT VARIABLES ────────────────────────────────────────
 * Each modifier class sets --card-accent-rgb to its category RGB triplet.
 * The hover rule (below) reads from this single variable for border-color and
 * box-shadow glow — one rule, five distinct identities, zero redundancy.
 *
 * Fallback: 175,218,0 (lime) covers any unrecognised category key.
 */
.blog-card--basics      { --card-accent-rgb: 1, 129, 250; }   /* blue */
.blog-card--smart-money { --card-accent-rgb: 167, 139, 250; } /* purple */
.blog-card--market-news { --card-accent-rgb: 251, 191, 36; }  /* amber/gold */
.blog-card--risk        { --card-accent-rgb: 248, 113, 113; } /* coral/red */
.blog-card--guides      { --card-accent-rgb: 74, 222, 128; }  /* green */

/*
 * ── CARD CATEGORY TOP ACCENT BARS ──────────────────────────────────────────
 * Each card has a 2px colored stripe at the top edge, matching its category color.
 * Like Bloomberg's section color indicators — immediately signals content type
 * before reading a word.
 * Works because .blog-card has overflow:hidden — the stripe is clipped to the
 * card's border-radius correctly.
 * transition:opacity lets the bar reach full saturation on hover.
 */
.blog-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
  transition: opacity var(--t-base);
}

/* Basics → brand blue */
.blog-card--basics::before     { background: rgba(1,129,250,0.80); }
/* Smart Money → purple */
.blog-card--smart-money::before { background: rgba(167,139,250,0.80); }
/* Market News → amber/gold */
.blog-card--market-news::before { background: rgba(251,191,36,0.80); }
/* Risk & Psychology → coral/red */
.blog-card--risk::before       { background: rgba(248,113,113,0.80); }
/* GenieFX Guides → green */
.blog-card--guides::before     { background: rgba(74,222,128,0.80); }

/* Image wrapper */
.blog-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}

.blog-card:hover .blog-card-img img {
  transform: scale(1.05);
}

/* Subtle bottom gradient on card images — cinematic depth */
.blog-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(7,7,10,0.30) 100%);
  pointer-events: none;
}

.blog-card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  color: var(--clr-primary-30);
}

/*
 * Difficulty badge — semantic color discipline
 * Ref: REF-DR-01 "Green reserved for profit signals, semantic color use"
 * Ref: REF-BE-02 "color system: semantic trading semantics"
 */
.blog-card-diff-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}

.blog-card-diff-badge.beginner {
  background: rgba(34,197,94,0.14);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.2);
}

.blog-card-diff-badge.intermediate {
  background: rgba(251,191,36,0.14);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.2);
}

.blog-card-diff-badge.advanced {
  background: rgba(239,68,68,0.14);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.2);
}

[dir="rtl"] .blog-card-diff-badge { right: auto; left: 10px; }

/* Card body */
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
  gap: 10px;
}

.blog-card-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * Category pill — semantic accent color, minimal usage
 * (Universal Principle 4)
 */
.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(1,129,250,0.10);
  color: var(--clr-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 1px solid rgba(1,129,250,0.15);
  unicode-bidi: isolate;
}

.blog-cat-pill--xs {
  font-size: 0.63rem;
  padding: 2px 8px;
}

/*
 * ── CATEGORY COLOR SYSTEM ──────────────────────────────────────────────────
 * Each category has a distinct semantic color drawn from financial editorial
 * conventions, NOT brand color overuse:
 *
 *   basics      → brand blue  — knowledge / foundational / information
 *   smart-money → purple      — institutional / sophisticated / insider
 *   market-news → amber/gold  — news alert / live / urgency
 *   risk        → coral/red   — caution / risk signal / psychology alert
 *   guides      → green       — growth / actionable / positive outcome
 *
 * Opacity kept at 10% bg, 20% border — present but not dominant.
 * This system matches Bloomberg's sector color coding conventions.
 */
.blog-cat-pill--smart-money {
  color: #A78BFA;
  background: rgba(167,139,250,0.10);
  border-color: rgba(167,139,250,0.22);
}
.blog-cat-pill--market-news {
  color: #FBBF24;
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.22);
}
.blog-cat-pill--risk {
  color: #F87171;
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.22);
}
.blog-cat-pill--guides {
  color: #4ADE80;
  background: rgba(74,222,128,0.10);
  border-color: rgba(74,222,128,0.22);
}
/* basics stays at default brand blue — no override needed */

.blog-card-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  unicode-bidi: isolate;
}

[dir="rtl"] .blog-card-time {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.blog-card-title {
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast);
  overflow-wrap: break-word;
}

.blog-card:hover .blog-card-title { color: #fff; }

.blog-card-excerpt {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  overflow-wrap: break-word;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/*
 * Tabular numerics on all date/time metadata.
 * font-variant-numeric: tabular-nums makes digits monospace-aligned.
 * Mimics trading terminal data readout — numbers feel like data, not labels.
 */
.blog-card-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  unicode-bidi: isolate;
}

.blog-card-cta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: gap var(--t-fast);
  unicode-bidi: isolate;
}

.blog-card:hover .blog-card-cta { gap: 7px; }

/* ──────────────────────────────────────────────
   START HERE SECTION
   ────────────────────────────────────────────── */

/* Remove the lime divider line from the Start Here header — the blue timeline
   below it already serves as the visual separator between header and cards. */
#blog-start-here .blog-section-header::after {
  content: none;
}

/* Section separators — visible editorial page rhythm */
.blog-start-here-section {
  margin: var(--sp-12) 0;
  padding-top: var(--sp-10);
}

.blog-latest-section {
  padding-top: var(--sp-8);
}

.start-here-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px)  { .start-here-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .start-here-grid { grid-template-columns: repeat(4, 1fr); } }

.start-here-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 6px  rgba(0,0,0,0.40),
    0 6px 24px rgba(0,0,0,0.50);
  transition: border-color var(--t-fast), transform var(--t-base), box-shadow var(--t-base);
}

/* Blue accent line at top — Genie brand signal */
.start-here-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(1,129,250,0.85);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.start-here-card:hover {
  border-color: rgba(1,129,250,0.26);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(0,0,0,0.55),
    0 8px 36px rgba(0,0,0,0.60),
    0 0  28px rgba(1,129,250,0.09);
}

.start-here-card:hover::before { opacity: 1; }

/* Large step number — Genie blue gradient beacon, guides reading path */
.start-here-num {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(1,129,250,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(1,129,250,0.28));
}

.start-here-step-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0181FA;
}

.start-here-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.start-here-excerpt {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.start-here-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════
   LEARNING JOURNEY TIMELINE
   A thin horizontal progress bar with four nodes, one per step card.
   Uses the same grid spec as .start-here-grid so nodes align exactly
   with each card's centre column. Desktop only — hidden below 900px.
   ══════════════════════════════════════════════════════════════ */

.start-here-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; /* must match .start-here-grid gap */
  position: relative;
  margin: 0 0 10px; /* gap between timeline row and cards */
}

/*
 * Horizontal connecting line — gradient so edges fade to transparent.
 * The symmetric fade means RTL looks identical: no directional assumption.
 * z-index: 0 so nodes (z-index:1) punch cleanly above it.
 */
.start-here-timeline::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent        0%,
    rgba(1,129,250,0.18)  8%,
    rgba(1,129,250,0.42) 25%,
    rgba(1,129,250,0.42) 75%,
    rgba(1,129,250,0.18) 92%,
    transparent       100%
  );
  pointer-events: none;
  z-index: 0;
}

/*
 * Each node — a flex wrapper that centres the dot within its grid column.
 * height: 22px gives enough vertical clearance for the glow without crowding.
 */
.start-here-node {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  position: relative;
  z-index: 1;
}

/*
 * The dot itself — via ::before so the wrapper stays layout-neutral.
 *
 * Shadow stack:
 *   Layer 1: 2px solid #07070A ring — "punches" the dot clean through the line,
 *            creating clear separation (matches page base background).
 *   Layer 2: 4px halo ring at low opacity — soft outer rim.
 *   Layer 3: ambient glow — whispers "active node" without screaming.
 */
.start-here-node::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(1,129,250,0.72);
  box-shadow:
    0 0 0 2px #07070A,
    0 0 0 4px rgba(1,129,250,0.12),
    0 0 10px rgba(1,129,250,0.32);
  transition:
    transform     var(--t-fast),
    background    var(--t-fast),
    box-shadow    var(--t-fast);
}

/*
 * Hover interaction — card hovered → matching node brightens and scales up.
 * Uses CSS :has() so no JavaScript needed.
 * Wrapped in @supports selector() — safely no-ops on legacy browsers.
 *
 * How it works:
 *   #blog-start-here :has(.start-here-card:nth-child(N):hover) means
 *   "when card N inside this section is hovered" → brighten node N.
 *   nth-child counts DOM order, which matches in both LTR and RTL.
 */
@supports selector(:has(*)) {
  #blog-start-here:has(.start-here-card:nth-child(1):hover) .start-here-node:nth-child(1)::before,
  #blog-start-here:has(.start-here-card:nth-child(2):hover) .start-here-node:nth-child(2)::before,
  #blog-start-here:has(.start-here-card:nth-child(3):hover) .start-here-node:nth-child(3)::before,
  #blog-start-here:has(.start-here-card:nth-child(4):hover) .start-here-node:nth-child(4)::before {
    transform: scale(1.55);
    background: #0181FA;
    box-shadow:
      0 0 0 2px #07070A,
      0 0 0 5px rgba(1,129,250,0.22),
      0 0 16px rgba(1,129,250,0.55);
  }
}

/* Hidden on tablet + mobile — grid drops to 2 or 1 column, nodes no longer align */
@media (max-width: 899px) {
  .start-here-timeline { display: none; }
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .start-here-node::before { transition: none; }
}

/* ──────────────────────────────────────────────
   INLINE CTA CARD  (inside grid, full-width)
   ────────────────────────────────────────────── */
.blog-cta-inline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 28px 32px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(175,218,0,0.07) 0%, rgba(175,218,0,0.03) 100%);
  border: 1px solid rgba(175,218,0,0.15);
  box-shadow: inset 0 1px 0 rgba(175,218,0,0.12);
  flex-wrap: wrap;
}

.blog-cta-inline-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.blog-cta-inline-sub {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* ──────────────────────────────────────────────
   DOWNLOAD CTA BLOCK
   ────────────────────────────────────────────── */
/* .blog-download-cta* — REMOVED: replaced by shared .cta-banner from components.css */

/* ──────────────────────────────────────────────
   EMPTY / ERROR STATES
   ────────────────────────────────────────────── */
.blog-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-muted);
}

.blog-no-results h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0;
}

.blog-no-results p {
  font-size: 0.85rem;
  margin: 0;
  max-width: 360px;
}

.blog-error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px var(--sp-5);
}

.blog-error-state h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-2);
}

.blog-error-state p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE PAGE  —  HIGHEST PRIORITY
   "This is the highest priority. Focus heavily on:
    reading experience, article rhythm, typography hierarchy..."
   ══════════════════════════════════════════════════════════════ */

/*
 * Article page ambient atmosphere
 * Same market grid texture as blog hero — creates visual continuity
 */
.article-page {
  position: relative;
}

.article-page #article-page {
  padding-top: calc(var(--nav-height, 72px) + var(--sp-5));
}

/* Article background: grid increased 0.018→0.04, now faintly perceptible */
.article-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='0.75'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/*
 * Article page ambient glow — fixed radial from upper-right.
 * Stays in place while the user scrolls, creating a persistent "illuminated space"
 * atmosphere rather than a flat dark reading surface.
 * 0.12 opacity — visible as a soft blue-lit corner, not a neon glow.
 */
.article-page::after {
  content: '';
  position: fixed;
  top: -5%;
  right: -8%;
  width: 55%;
  height: 65vh;
  background: radial-gradient(ellipse 60% 70% at top right, rgba(1,129,250,0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ──────────────────────────────────────────────
   READING PROGRESS BAR
   "Ambient market energy" — brand color with glow
   ────────────────────────────────────────────── */
.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--clr-primary);
  z-index: 9999;
  /* Glow — signals active reading state */
  box-shadow: 0 0 10px rgba(1,129,250,0.6), 0 0 24px rgba(1,129,250,0.3);
  transition: width 0.12s linear;
}

/* ──────────────────────────────────────────────
   BREADCRUMB
   ────────────────────────────────────────────── */
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.76rem;
  color: var(--text-muted);
  padding: 0 0 16px;
  position: relative;
  z-index: 1;
}

.article-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}

.article-breadcrumb a:hover { color: var(--clr-primary); }

.breadcrumb-current { color: var(--text-secondary); }

.breadcrumb-chevron {
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

[dir="rtl"] .breadcrumb-chevron { transform: scaleX(-1); }

/* ──────────────────────────────────────────────
   ARTICLE HEADER
   Ref: Section 11 "Opening Spread" — the headline is the hero
   "Scale Contrast — one element significantly larger than everything else"
   ────────────────────────────────────────────── */
.article-header {
  max-width: 800px;
  margin: 0 auto var(--sp-10);
  position: relative;
  z-index: 1;
  animation: article-hero-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.article-header-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

/*
 * Article title — cinematic typographic weight
 * "Large enough to read from a distance, weighted enough to command authority"
 */
.article-title {
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.035em;
  margin: 0 0 var(--sp-4);
  color: var(--text-primary);
}

[dir="rtl"] .article-title {
  letter-spacing: 0;
  line-height: 1.3;
}

/* Lead excerpt — editorial italic, quieter than the headline */
.article-excerpt {
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-5);
  font-style: italic;
  border-left: 2px solid rgba(175,218,0,0.30);
  padding-left: var(--sp-4);
}

[dir="rtl"] .article-excerpt {
  border-left: none;
  border-right: 2px solid rgba(175,218,0,0.30);
  padding-left: 0;
  padding-right: var(--sp-4);
}

.article-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.article-author {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Author avatar — brand identity signal */
.article-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 100%);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(1,129,250,0.3);
  letter-spacing: 0.05em;
}

.article-author-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.article-meta-sep {
  color: var(--border-card);
  font-size: 1.1rem;
}

.article-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Hero image — full editorial treatment */
.article-hero-img {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-surface);
  margin-top: var(--sp-2);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.article-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom gradient overlay — depth + editorial cinematic feel */
.article-hero-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(7,7,10,0.45) 0%, transparent 100%);
  pointer-events: none;
}

.article-hero-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  color: var(--clr-primary-30);
}

/* ──────────────────────────────────────────────
   ARTICLE 3-COLUMN LAYOUT
   ────────────────────────────────────────────── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 210px 1fr 260px;
    align-items: start;
  }
}

/* ──────────────────────────────────────────────
   TABLE OF CONTENTS — PREMIUM
   "Sticky, premium active state, blur depth"
   ────────────────────────────────────────────── */
.article-toc-col { display: none; }

@media (min-width: 1024px) {
  .article-toc-col {
    display: block;
    position: sticky;
    top: calc(var(--nav-height, 72px) + var(--sp-6));
    max-height: calc(100vh - var(--nav-height, 72px) - var(--sp-12));
    overflow-y: auto;
    scrollbar-width: none;
  }

  .article-toc-col::-webkit-scrollbar { display: none; }
}

.article-toc { padding: var(--sp-4) 0; }

.article-toc-title {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  padding-left: 12px;
}

[dir="rtl"] .article-toc-title { padding-left: 0; padding-right: 12px; }

.article-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /*
   * CSS counter for research-report section numbering.
   * Renders as: "01 Introduction", "02 Key Concepts", etc.
   * Mirrors the TOC convention of financial research reports and trade publications.
   */
  counter-reset: toc-section;
}

.article-toc-list > li {
  counter-increment: toc-section;
}

.article-toc-link {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-left: 2px solid rgba(255,255,255,0.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: color var(--t-fast), border-left-color var(--t-fast), background var(--t-fast), padding-left var(--t-base);
}

/* Section number — the research-report counter */
.article-toc-link::before {
  content: counter(toc-section, decimal-leading-zero);
  font-size: 0.60rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1.75;
  min-width: 18px;
}

.article-toc-link.active::before {
  color: var(--clr-primary);
  opacity: 0.85;
}

.article-toc-link:hover {
  color: var(--text-secondary);
  border-left-color: rgba(1,129,250,0.3);
  background: rgba(1,129,250,0.04);
}

/* Active state — full brand signal */
.article-toc-link.active {
  color: var(--clr-primary);
  border-left-color: var(--clr-primary);
  background: rgba(1,129,250,0.07);
  font-weight: 600;
  padding-left: 16px;
  /* Soft brand glow — "active screen with internal light" */
  box-shadow: inset 2px 0 0 rgba(1,129,250,0.4);
}

[dir="rtl"] .article-toc-link {
  border-left: none;
  border-right: 2px solid rgba(255,255,255,0.06);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  padding: 6px 12px;
  flex-direction: row-reverse;
}

[dir="rtl"] .article-toc-link:hover {
  border-right-color: rgba(1,129,250,0.3);
  background: rgba(1,129,250,0.04);
}

[dir="rtl"] .article-toc-link.active {
  border-right-color: var(--clr-primary);
  background: rgba(1,129,250,0.07);
  padding-right: 16px;
  box-shadow: inset -2px 0 0 rgba(1,129,250,0.4);
}

/* ──────────────────────────────────────────────
   ARTICLE BODY — READING EXPERIENCE
   "Bloomberg-level reading comfort"
   "Typography hierarchy — editorial scanning speed"
   ────────────────────────────────────────────── */
.article-body {
  max-width: 740px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Base paragraph — generous reading typography */
.article-body p {
  font-size: 1.0rem;
  line-height: 1.88;
  color: rgba(255,255,255,0.72);
  margin: 0 0 var(--sp-5);
}

/* Lead paragraph — editorial treatment, slightly more prominent */
.article-body > p:first-of-type {
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.80);
}

[dir="rtl"] .article-body > p:first-of-type { font-size: 1.075rem; }

/*
 * Section headings — editorial accent bar treatment
 * The left blue bar is a scanning anchor, not decoration.
 * Every color has a meaning. This one means: "new section, new idea."
 * (Ref: Section 15 — "Typography Built for Data Scanning")
 */
.article-body h2 {
  font-size: clamp(1.15rem, 2.8vw, 1.42rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 52px 0 18px;
  line-height: 1.28;
  /* Accent bar — editorial section signal */
  padding-left: var(--sp-4);
  border-left: 3px solid #AFDA00;
}

[dir="rtl"] .article-body h2 {
  border-left: none;
  border-right: 3px solid #AFDA00;
  padding-left: 0;
  padding-right: var(--sp-4);
}

/* Bullet lists — premium styling
 * CRITICAL: main.css sets `ul, ol { list-style: none }` globally.
 * We must restore disc markers here or no bullets appear at all.
 */
.article-body ul {
  list-style: disc;  /* restore from global reset */
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

[dir="rtl"] .article-body ul {
  padding-left: 0;
  padding-right: var(--sp-6);
  text-align: right;
  list-style-position: inside;
}

.article-body ul li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.70);
}

/* Brand-colored bullets — semantic (positive knowledge signals) */
.article-body ul li::marker { color: #AFDA00; }

/* ──────────────────────────────────────────────
   CALLOUT BLOCK — CINEMATIC EDITORIAL
   Ref: Section 11 "inline educational visual blocks"
   "Premium callout systems"
   The callout-label becomes a badge, not inline text.
   ────────────────────────────────────────────── */
.article-callout {
  position: relative;
  background: linear-gradient(135deg, rgba(175,218,0,0.07) 0%, rgba(175,218,0,0.02) 100%);
  border-left: 3px solid #AFDA00;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 20px 24px 22px;
  margin: 36px 0;
  font-size: 0.925rem;
  line-height: 1.78;
  color: rgba(255,255,255,0.76);
  overflow: hidden;
  /* Specular top line — elevated surface signal */
  box-shadow: inset 0 1px 0 rgba(175,218,0,0.18);
}

/* Corner ambient glow — "illuminated content block" */
.article-callout::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(175,218,0,0.07) 0%, transparent 70%);
  pointer-events: none;
}

[dir="rtl"] .article-callout {
  border-left: none;
  border-right: 3px solid #AFDA00;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

[dir="rtl"] .article-callout::after { right: auto; left: -40px; }

/*
 * Callout label — upgraded from plain text to terminal badge
 * Clearly distinguishes the label from the callout content.
 */
.article-callout-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #AFDA00;
  background: rgba(175,218,0,0.10);
  border: 1px solid rgba(175,218,0,0.22);
  border-radius: var(--r-full);
  padding: 3px 10px;
  margin-bottom: var(--sp-3);
  /* Treat as a block — forces line break before content */
  display: flex;
  width: fit-content;
}

/* ──────────────────────────────────────────────
   WARNING BLOCK
   Amber semantic color — risk signal, not error.
   Mirrors callout structure exactly but with amber palette.
   JS generates: <div class="article-warning"><span class="article-warning-label">Warning</span>text</div>
   ────────────────────────────────────────────── */
.article-warning {
  position: relative;
  background: linear-gradient(135deg, rgba(251,191,36,0.09) 0%, rgba(251,191,36,0.03) 100%);
  border-left: 3px solid #fbbf24;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 20px 24px 22px;
  margin: 36px 0;
  font-size: 0.925rem;
  line-height: 1.78;
  color: rgba(255,255,255,0.76);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(251,191,36,0.22);
}

.article-warning::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(251,191,36,0.07) 0%, transparent 70%);
  pointer-events: none;
}

[dir="rtl"] .article-warning {
  border-left: none;
  border-right: 3px solid #fbbf24;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

[dir="rtl"] .article-warning::after { right: auto; left: -40px; }

.article-warning-label {
  display: flex;
  width: fit-content;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: var(--r-full);
  padding: 3px 10px;
  margin-bottom: var(--sp-3);
}

/* ──────────────────────────────────────────────
   BLOCKQUOTE — EDITORIAL PULL QUOTE
   Ref: Section 11 "Editorial Composition"
   Closer to Bloomberg/FT pull quote treatment
   ────────────────────────────────────────────── */
.article-blockquote {
  position: relative;
  margin: 40px 0;
  padding: 24px 28px 24px 32px;
  background: var(--bg-surface);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  border-left: 2px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), var(--shadow-sm);
}

/* Oversized quote mark — editorial magazine convention */
.article-blockquote::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 18px;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(255,255,255,0.05);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
}

.article-blockquote p {
  font-size: 1.025rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0;
  position: relative;
  z-index: 1;
}

[dir="rtl"] .article-blockquote {
  border-left: none;
  border-right: 2px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  padding: 24px 32px 24px 28px;
}

[dir="rtl"] .article-blockquote::before {
  left: auto;
  right: 18px;
  content: '\201D';
}

/* ──────────────────────────────────────────────
   KEY TAKEAWAYS — ELEVATED PREMIUM SURFACE
   Ref: REF-BE-04 "illuminated card — internal light source"
   The takeaways box should feel like a premium information card.
   ────────────────────────────────────────────── */
.article-takeaways {
  background: var(--bg-elevated);
  border: 1px solid rgba(175,218,0,0.17);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin-bottom: var(--sp-10);
  position: relative;
  overflow: hidden;
  /* Specular top + depth + lime brand glow */
  box-shadow:
    inset 0 1px 0 rgba(175,218,0,0.18),
    var(--shadow-md),
    0 0 40px rgba(175,218,0,0.04);
}

/* Top accent stripe — editorial section marker */
.article-takeaways::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #AFDA00 0%, rgba(175,218,0,0.2) 60%, transparent 100%);
}

/* Corner ambient glow — illuminated panel feel */
.article-takeaways::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(175,218,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.article-takeaways-title {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #AFDA00;
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 1;
}

.article-takeaways ul {
  list-style: disc;  /* restore from global reset */
  padding-left: var(--sp-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}

[dir="rtl"] .article-takeaways ul {
  padding-left: 0;
  padding-right: var(--sp-5);
}

.article-takeaways ul li {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
}

.article-takeaways ul li::marker { color: #AFDA00; }

/* ──────────────────────────────────────────────
   ARTICLE SIDEBAR
   Ref: REF-BE-04 "illuminated card with internal light source"
   ────────────────────────────────────────────── */
.article-sidebar { display: none; }

@media (min-width: 1024px) {
  .article-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--nav-height, 72px) + var(--sp-6));
  }
}

.article-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/*
 * Sidebar CTA — illuminated premium card
 * "Cards that feel like active screens with internal light"
 */
.sidebar-cta {
  background: var(--bg-elevated);
  border: 1px solid rgba(175,218,0,0.16);
  border-radius: var(--r-xl);
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(175,218,0,0.16),
    var(--shadow-md),
    0 0 32px rgba(175,218,0,0.05);
}

/* Internal ambient glow — the "illuminated screen" effect */
.sidebar-cta::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 140px;
  background: radial-gradient(ellipse at center, rgba(175,218,0,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-cta > * { position: relative; z-index: 1; }

.sidebar-cta-icon {
  width: 46px;
  height: 46px;
  background: rgba(175,218,0,0.09);
  border: 1px solid rgba(175,218,0,0.18);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  box-shadow: inset 0 1px 0 rgba(175,218,0,0.12);
}

.sidebar-cta-headline {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.sidebar-cta-sub {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}

.sidebar-cta-btn {
  width: 100%;
  justify-content: center;
}

/* Sidebar related articles label */
.sidebar-related {}

/* ──────────────────────────────────────────────
   ARTICLE DISCLAIMER
   ────────────────────────────────────────────── */
.article-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: var(--sp-10);
  color: var(--text-muted);
  font-size: 0.79rem;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.article-disclaimer[hidden] { display: none; }

.article-disclaimer-text strong { color: var(--text-secondary); }

/* ──────────────────────────────────────────────
   CONTINUE CTA — CONTEXTUAL
   ────────────────────────────────────────────── */
.article-continue-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  background: var(--bg-elevated);
  border: 1px solid rgba(175,218,0,0.16);
  border-radius: var(--r-xl);
  padding: 36px 40px;
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(175,218,0,0.15), var(--shadow-md);
  z-index: 1;
}

.article-continue-cta::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(175,218,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.article-continue-cta > * { position: relative; z-index: 1; }

.article-continue-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #AFDA00;
  margin-bottom: var(--sp-2);
}

.article-continue-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.article-continue-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.article-continue-text {}

/* ──────────────────────────────────────────────
   RELATED ARTICLES SECTION
   ────────────────────────────────────────────── */
.article-related-section {
  margin-bottom: var(--sp-12);
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────
   ARTICLE NOT FOUND
   ────────────────────────────────────────────── */
.article-not-found {
  text-align: center;
  padding: 80px var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  position: relative;
  z-index: 1;
}

.article-not-found[hidden] { display: none; }

.article-not-found h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}

.article-not-found p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  max-width: 380px;
  line-height: 1.65;
}

/* ──────────────────────────────────────────────
   GLOSSARY (hidden — styled for future use)
   ────────────────────────────────────────────── */
.glossary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 640px)  { .glossary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .glossary-grid { grid-template-columns: repeat(3, 1fr); } }

.glossary-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-card);
  background: var(--bg-elevated);
  text-decoration: none;
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.glossary-card:hover {
  border-color: var(--border-primary);
  background: var(--bg-card);
}

.glossary-term {
  font-size: 0.82rem;
  font-weight: 800;
  color: #AFDA00;
  white-space: nowrap;
  min-width: 46px;
  font-variant-numeric: tabular-nums;
}

.glossary-def {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
  flex: 1;
}

.glossary-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform var(--t-fast), color var(--t-fast);
}

.glossary-card:hover .glossary-arrow {
  transform: translateX(3px);
  color: var(--clr-primary);
}

/* ══════════════════════════════════════════════════════════════
   RTL — ARABIC LANGUAGE OVERRIDES
   ══════════════════════════════════════════════════════════════ */

[dir="rtl"] .article-body,
[dir="rtl"] .article-header,
[dir="rtl"] .article-takeaways,
[dir="rtl"] .article-callout,
[dir="rtl"] .article-blockquote,
[dir="rtl"] .article-disclaimer,
[dir="rtl"] .article-continue-cta {
  text-align: right;
}

/* Arabic reading — more generous line height for Arabic script */
[dir="rtl"] .article-body p,
[dir="rtl"] .article-body li {
  font-size: 1.025rem;
  line-height: 1.95;
}

[dir="rtl"] .article-body h2 {
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: 0;
}

[dir="rtl"] .blog-card-body,
[dir="rtl"] .blog-featured-body,
[dir="rtl"] .blog-featured-pick-body,
[dir="rtl"] .start-here-card {
  text-align: right;
}

[dir="rtl"] .blog-card-footer { flex-direction: row-reverse; }

[dir="rtl"] .article-meta-row,
[dir="rtl"] .article-header-top { flex-direction: row-reverse; }

[dir="rtl"] .article-breadcrumb { flex-direction: row-reverse; }

[dir="rtl"] .blog-cat-btn { direction: rtl; }

[dir="rtl"] .glossary-arrow { transform: scaleX(-1); }
[dir="rtl"] .glossary-card:hover .glossary-arrow {
  transform: scaleX(-1) translateX(3px);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — PREMIUM MOBILE READING EXPERIENCE
   "The mobile experience must feel equally premium"
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {

  .blog-hero {
    padding: calc(var(--nav-height, 72px) + var(--sp-10)) 0 var(--sp-10);
  }

  .blog-featured-body {
    padding: 18px 20px 22px;
  }

  .blog-featured-title {
    font-size: 1.1rem;
    -webkit-line-clamp: 2;
  }

  .blog-cta-inline {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .article-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
    letter-spacing: -0.025em;
  }

  .article-excerpt {
    font-size: 0.975rem;
  }

  .article-continue-cta {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }

  .article-takeaways {
    padding: 22px 20px;
  }

  .article-layout {
    gap: var(--sp-6);
  }

  .article-body h2 {
    margin: 36px 0 14px;
  }

  .article-hero-img {
    border-radius: var(--r-lg);
  }

  .start-here-card {
    padding: 18px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════ */
.blog-cat-btn:focus-visible,
.blog-card:focus-visible,
.blog-featured-main:focus-visible,
.blog-featured-pick:focus-visible,
.start-here-card:focus-visible,
.glossary-card:focus-visible,
.article-toc-link:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ══════════════════════════════════════════════════════════════
   AMBIENT MARKET INTELLIGENCE MOTION SYSTEM  v1.0
   Six interlocking systems that make the blog feel alive —
   without noise, cyberpunk, or financial-chaos aesthetics.
   Goal: cinematic, restrained, intelligent market energy.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Animated coordinate grid drift ──────────────────────── */
@keyframes ambient-grid-drift {
  /* First background-layer (trend line SVG) stays at 0 0 — no drift.
     Second layer (40px grid tile) drifts one full tile → seamless loop. */
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 40px 40px; }
}

/* ambient-grid-drift application — DISABLED (chart grid removed) */
/* .blog-hero::before { animation: ambient-grid-drift 55s linear infinite; } */

/* ── 2. Canvas overlay — particles + chart trails ─────────────
   The canvas element is injected by _initAmbientCanvas().
   Positioned absolute, full-bleed, pointer-events off.
   ──────────────────────────────────────────────────────────── */
.blog-ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── 3. Floating market-structure labels ──────────────────────
   BOS, FVG, OB, CHOCH etc. float at near-invisible opacity.
   Each label cycles through a slow 22s breathe loop with
   individual delay offsets for staggered, organic rhythm.
   ──────────────────────────────────────────────────────────── */
.blog-market-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.blog-market-label {
  position: absolute;
  font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
  font-size: 0.575rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: #AFDA00;
  opacity: 0;
  animation: market-label-float 22s ease-in-out infinite;
  white-space: nowrap;
  user-select: none;
}

@keyframes market-label-float {
  0%   { opacity: 0;    transform: translateY(0px);  }
  12%  { opacity: 0.07; transform: translateY(-2px); }
  50%  { opacity: 0.05; transform: translateY(-5px); }
  88%  { opacity: 0.07; transform: translateY(-2px); }
  100% { opacity: 0;    transform: translateY(0px);  }
}

/* ── 4. Hero title ambient glow breathe ───────────────────────
   A very soft radial bloom behind the main headline.
   Pulses on a long cycle — perceptible but not distracting.
   ──────────────────────────────────────────────────────────── */
.blog-hero-title {
  position: relative;
  isolation: isolate;
}

.blog-hero-title::after {
  content: '';
  position: absolute;
  inset: -24px -48px;
  background: radial-gradient(
    ellipse 82% 65% at 50% 55%,
    rgba(1, 129, 250, 0.10) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  animation: title-glow-breathe 7s ease-in-out infinite alternate;
}

@keyframes title-glow-breathe {
  from { opacity: 0.65; transform: scaleX(0.94); }
  to   { opacity: 1.00; transform: scaleX(1.06); }
}

/* ── 5. Featured article ambient pulse ────────────────────────
   A very soft outer glow on the featured card that pulses
   on an 8-second cycle — suggests "this is live / important."
   ──────────────────────────────────────────────────────────── */
.blog-featured-main {
  position: relative; /* ensure ::after anchor */
}

.blog-featured-main::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(1, 129, 250, 0);
  animation: featured-pulse 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes featured-pulse {
  0%   { box-shadow: 0 0  0px  0px rgba(1, 129, 250, 0);    }
  45%  { box-shadow: 0 0 32px  6px rgba(1, 129, 250, 0.08); }
  100% { box-shadow: 0 0  0px  0px rgba(1, 129, 250, 0);    }
}

/* ── 6. Mouse-parallax depth — hero-inner layer ──────────────
   _initHeroParallax() drives this via style.transform.
   will-change promotes to compositor layer for smooth RAF.
   ──────────────────────────────────────────────────────────── */
.blog-hero-inner {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   CINEMATIC CENTERED HERO  v2.0
   Full-viewport atmospheric editorial composition.
   The split dashboard layout has been retired.
   ══════════════════════════════════════════════════════════════ */

/* ── Hero container: centered editorial ─────────────────────── */
.blog-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88vh;
  /* Padding already set in the base .blog-hero block above */
}

/* ── LEFT PANEL: Editorial content (42%) ──────────────────── */
.blog-hero-left {
  flex: 0 0 42%;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height, 72px) + 3rem) 3rem 3rem;
  position: relative;
  z-index: 2;
  border-right: 1px solid rgba(255,255,255,0.045);
}

.blog-hero-left-inner {
  max-width: 460px;
}

/* Badge — left-aligned override */
.blog-hero-left .section-badge {
  margin-left: 0;
  margin-bottom: 1.25rem;
}

/* Title — left-aligned override */
.blog-hero-left .blog-hero-title {
  text-align: left;
  margin-bottom: 1.25rem;
}

/* Hero subheadline — override old centered version for split layout */
.blog-hero-left .blog-hero-sub {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: none;
}

/* CTA button row */
.blog-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* Badge strip — left-aligned */
.blog-hero-left .blog-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: flex-start;
  margin-bottom: 2rem;
  padding: 0;
  background: none;
}


/* ── RIGHT PANEL: Market intelligence (58%) ───────────────── */
.blog-hero-right {
  flex: 0 0 58%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height, 72px) + 2rem) 2.5rem 2rem 2rem;
  overflow: visible;
}

/* Additional atmospheric gradient for right panel */
.blog-hero-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, rgba(1,129,250,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(167,139,250,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── CHART PANEL ───────────────────────────────────────────── */
.blog-chart-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  background: rgba(10,12,20,0.82);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-lg, 12px);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.45),
    0  8px 24px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
  will-change: transform;
}

/* ── TOOLBAR ───────────────────────────────────────────────── */
.bcp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.875rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bcp-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Live pulse dot */
@keyframes bcp-dot-pulse {
  0%, 100% { opacity: 0.9; box-shadow: 0 0 0 0   rgba(74,222,128,0.55); }
  50%       { opacity: 1;   box-shadow: 0 0 0 5px rgba(74,222,128,0);    }
}

.bcp-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: bcp-dot-pulse 2.4s ease-in-out infinite;
}

.bcp-ticker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Timeframe selectors */
.bcp-tf-group {
  display: flex;
  gap: 0.2rem;
}

.bcp-tf {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  cursor: default;
  user-select: none;
}

.bcp-tf-active {
  color: var(--clr-primary);
  background: rgba(1,129,250,0.14);
}

/* OHLC data strip */
.bcp-ohlc {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.bcp-ohlc-item {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.635rem;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bcp-ohlc-item b {
  font-weight: 700;
  color: var(--text-secondary);
}

.bcp-hi { color: #26a69a !important; }
.bcp-lo { color: #ef5350 !important; }
.bcp-cl { color: rgba(255,255,255,0.88) !important; }

.bcp-ohlc-chg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.635rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

.bcp-up   { color: #26a69a; }
.bcp-down { color: #ef5350; }
.bcp-ohlc-chg.bcp-up   { color: #26a69a; background: rgba(38,166,154,0.10); }
.bcp-ohlc-chg.bcp-down { color: #ef5350; background: rgba(239,83,80,0.10);  }

/* ── CHART AREA ────────────────────────────────────────────── */
.bcp-chart-wrap {
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.bcp-svg {
  flex: 1;
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: 262px;
}

/* Price scale column */
.bcp-price-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.3rem 0.55rem 1.65rem 0.35rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.585rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
  border-left: 1px solid rgba(255,255,255,0.05);
}

.bcp-price-current {
  color: var(--text-primary);
  position: relative;
}

.bcp-price-current b {
  color: var(--clr-primary);
}

/* ── FLOATING WIDGETS ──────────────────────────────────────── */
/*
 * Three glassmorphic cards overlay the chart edges.
 * Depth-layered for the parallax system:
 *   price   widget → multiplier ×1.0  (closest to viewer)
 *   note    widget → multiplier ×0.7  (mid layer)
 *   bias    widget → multiplier ×0.4  (furthest, subtlest)
 */
.bcp-widget {
  position: absolute;
  background: rgba(10,12,20,0.90);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);
  min-width: 120px;
  will-change: transform;
}

/* LIVE PRICE — top-left corner */
.bcp-widget-price {
  top: -16px;
  left: -16px;
}

/* MARKET BIAS — bottom-right corner */
.bcp-widget-bias {
  bottom: -16px;
  right: -16px;
  min-width: 150px;
}

/* ANALYST NOTE — vertical mid, right edge */
.bcp-widget-note {
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  max-width: 170px;
}

.bcp-w-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.bcp-w-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.545rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.bcp-w-head > .bcp-w-label { margin-bottom: 0; }

.bcp-w-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: bcp-dot-pulse 2.4s ease-in-out infinite;
  animation-delay: 1.2s;
  flex-shrink: 0;
}

.bcp-w-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.bcp-w-chg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 0.2rem;
}

/* Bias progress bar */
.bcp-bias-track {
  width: 100%;
  height: 5px;
  border-radius: 100px;
  background: rgba(239,83,80,0.20);
  margin: 0.35rem 0 0.3rem;
  overflow: hidden;
}

.bcp-bias-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg,
    rgba(38,166,154,0.50) 0%,
    #26a69a 100%
  );
}

.bcp-bias-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.575rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Analyst note text */
.bcp-w-note-text {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ── RESPONSIVE BREAKPOINTS ────────────────────────────────── */

/* 1360px: hide OHLC strip (too cramped) */
@media (max-width: 1360px) {
  .bcp-ohlc { display: none; }
  .blog-hero-left { padding-inline: 2.5rem; }
}

/* 1100px: compress both panels */
@media (max-width: 1100px) {
  .blog-hero-left  { flex-basis: 48%; padding-inline: 2rem; }
  .blog-hero-right { flex-basis: 52%; padding-inline: 1.5rem; }
  .bcp-widget-note { display: none; }
}

/* 900px: stack & hide right panel */
@media (max-width: 900px) {
  .blog-hero {
    flex-direction: column;
    min-height: auto;
    padding: calc(var(--nav-height, 72px) + 2rem) 0 2.5rem;
    text-align: center;
  }
  .blog-hero-left {
    flex: none;
    width: 100%;
    padding: 0 1.5rem 2rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.045);
    align-items: flex-start;
  }
  .blog-hero-left-inner {
    max-width: 540px;
    margin: 0 auto;
  }
  .blog-hero-left .blog-hero-title  { text-align: center; }
  .blog-hero-actions                 { justify-content: center; }
  .blog-hero-left .blog-hero-badges  { justify-content: center; }
  .blog-hero-right                   { display: none; }
}

/* RTL support */
[dir="rtl"] .blog-hero             { flex-direction: row-reverse; }
[dir="rtl"] .blog-hero-left {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.045);
  text-align: right;
}
[dir="rtl"] .blog-hero-left .blog-hero-title { text-align: right; }
[dir="rtl"] .bcp-widget-price   { left: auto;  right: -16px; }
[dir="rtl"] .bcp-widget-bias    { right: auto; left:  -16px; }
[dir="rtl"] .bcp-widget-note    { right: auto; left:  -18px; }

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   (Ref: Section 8 — "Motion Budget", "Motion Anti-Patterns")
   When the user prefers reduced motion, remove ALL transitions
   and animations. Never let motion be inaccessible.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  .blog-hero::before,
  .blog-hero::after,
  .blog-hero-inner,
  .blog-hero .section-badge::before,
  .blog-hero-title::after,
  .blog-featured-main::after,
  .blog-market-label,
  .article-header,
  .blog-grid {
    animation: none;
  }

  /* Hide JS-injected motion elements entirely */
  .blog-ambient-canvas,
  .blog-market-labels {
    display: none;
  }

  .blog-hero-inner,
  .blog-chart-panel {
    will-change: auto;
    transform: none !important;
  }

  .bcp-live-dot,
  .bcp-w-dot {
    animation: none;
  }

  .bcp-widget {
    will-change: auto;
    transform: none !important;
  }

  .blog-card,
  .blog-featured-main,
  .blog-featured-pick,
  .start-here-card,
  .blog-cat-btn,
  .article-toc-link,
  .glossary-card,
  .glossary-arrow,
  .blog-card-img img,
  .blog-featured-img img,
  .blog-featured-pick-img img,
  .blog-search-input,
  .blog-search-clear,
  .sidebar-cta,
  .article-progress {
    transition: none;
  }

  .blog-card:hover,
  .blog-featured-main:hover,
  .blog-featured-pick:hover,
  .start-here-card:hover {
    transform: none;
  }

  .blog-card:hover .blog-card-img img,
  .blog-featured-main:hover .blog-featured-img img,
  .blog-featured-pick:hover .blog-featured-pick-img img {
    transform: none;
  }

  .blog-card:hover .blog-card-cta,
  .blog-featured-main:hover .blog-featured-cta {
    gap: 4px;
  }
}

/* ══════════════════════════════════════════════════════════════
   GLASS CARD MATERIAL SYSTEM  v2.0
   ──────────────────────────────────────────────────────────────
   Premium neutral-glass surface for Blog listing and Article
   pages. Aligned with register card · homepage · features page:
   white-glass layers · blur-only (no saturate) · blue as accent.

   What is intentionally untouched:
   · --card-accent-rgb hover system (category border/glow colors)
   · Start Here blue numbers / timeline / hover tint
   · Active category pill (solid Genie-blue, not glass)
   · .cta-banner download section
   · .blog-hero / nav / footer
   · Callout & warning semantic gradient tints (lime / amber)
   ══════════════════════════════════════════════════════════════ */


/* ── BLOG LISTING PAGE  (body.blog-listing-page) ────────────── */

/* 1. Article grid cards
   Hover border/glow stays category-based via --card-accent-rgb
   — do NOT override border-color or box-shadow on hover here   */
.blog-listing-page .blog-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 52px rgba(0, 0, 0, 0.34);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-card {
    background: rgba(255, 255, 255, 0.028);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}
/* Hover: neutral background bump only; category system owns border + glow */
.blog-listing-page .blog-card:hover {
  background: rgba(255, 255, 255, 0.052);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-card:hover {
    background: rgba(255, 255, 255, 0.044);
  }
}

/* 2. Featured hero card
   Pulse ::after animation and category hover glow unaffected */
.blog-listing-page .blog-featured-main {
  background: rgba(255, 255, 255, 0.042);
  border-color: rgba(1, 129, 250, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 28px 90px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(1, 129, 250, 0.07);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-featured-main {
    background: rgba(255, 255, 255, 0.034);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
.blog-listing-page .blog-featured-main:hover {
  background: rgba(255, 255, 255, 0.058);
  border-color: rgba(1, 129, 250, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 32px 100px rgba(0, 0, 0, 0.50),
    0 0 44px rgba(1, 129, 250, 0.09);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-featured-main:hover {
    background: rgba(255, 255, 255, 0.048);
  }
}

/* 3. Featured secondary picks */
.blog-listing-page .blog-featured-pick {
  background: rgba(255, 255, 255, 0.038);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 60px rgba(0, 0, 0, 0.38);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-featured-pick {
    background: rgba(255, 255, 255, 0.030);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}
.blog-listing-page .blog-featured-pick:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(1, 129, 250, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 72px rgba(0, 0, 0, 0.44),
    0 0 28px rgba(1, 129, 250, 0.06);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-featured-pick:hover {
    background: rgba(255, 255, 255, 0.044);
  }
}

/* 4. Start Here cards — blue identity fully preserved
   ::before accent bar, blue num gradient, timeline all untouched */
.blog-listing-page .start-here-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 44px rgba(0, 0, 0, 0.32);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .start-here-card {
    background: rgba(255, 255, 255, 0.028);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}
/* Hover: restrained blue tint preserved for Start Here brand identity */
.blog-listing-page .start-here-card:hover {
  background: rgba(1, 129, 250, 0.06);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .start-here-card:hover {
    background: rgba(1, 129, 250, 0.04);
  }
}

/* 5. Inline CTA — lime gradient identity preserved
   Only add blur depth + richer shadow; no background override */
.blog-listing-page .blog-cta-inline {
  box-shadow:
    inset 0 1px 0 rgba(175, 218, 0, 0.14),
    0 8px 40px rgba(0, 0, 0, 0.38);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-cta-inline {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* 6. Glossary cards */
.blog-listing-page .glossary-card {
  background: rgba(255, 255, 255, 0.030);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .glossary-card {
    background: rgba(255, 255, 255, 0.024);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.blog-listing-page .glossary-card:hover {
  background: rgba(255, 255, 255, 0.048);
  border-color: rgba(1, 129, 250, 0.26);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .glossary-card:hover {
    background: rgba(255, 255, 255, 0.040);
  }
}

/* 7. Search input */
.blog-listing-page .blog-search-input {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-search-input {
    background: rgba(255, 255, 255, 0.028);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}
.blog-listing-page .blog-search-input:focus {
  background: rgba(255, 255, 255, 0.050);
  border-color: rgba(1, 129, 250, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 3px rgba(1, 129, 250, 0.08);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-search-input:focus {
    background: rgba(255, 255, 255, 0.042);
  }
}

/* 8. Category filter buttons
   :not([aria-selected="true"]) leaves the solid-blue active pill unchanged */
.blog-listing-page .blog-cat-btn:not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.030);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@supports (backdrop-filter: blur(1px)) {
  .blog-listing-page .blog-cat-btn:not([aria-selected="true"]) {
    background: rgba(255, 255, 255, 0.024);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
/* Active pill: solid Genie-blue — no blur, not glass */
.blog-listing-page .blog-cat-btn[aria-selected="true"] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ── ARTICLE PAGE  (body.article-page) ──────────────────────── */

/* 9. Article hero image frame — no backdrop-filter (image fills it) */
.article-page .article-hero-img {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 50px rgba(0, 0, 0, 0.55),
    0 28px 90px rgba(0, 0, 0, 0.38);
}

/* 10. Key takeaways — lime border / stripe / ambient glow preserved */
.article-page .article-takeaways {
  background: rgba(255, 255, 255, 0.038);
}
@supports (backdrop-filter: blur(1px)) {
  .article-page .article-takeaways {
    background: rgba(255, 255, 255, 0.030);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* 11. Callout — lime semantic gradient kept; blur depth only
   Keeps border-left:#AFDA00, lime label badge, corner glow     */
@supports (backdrop-filter: blur(1px)) {
  .article-page .article-callout {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* 12. Warning — amber semantic gradient kept; blur depth only
   Keeps border-left:#fbbf24, amber label badge, corner glow    */
@supports (backdrop-filter: blur(1px)) {
  .article-page .article-warning {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* 13. Blockquote — editorial pull quote */
.article-page .article-blockquote {
  background: rgba(255, 255, 255, 0.032);
  border-left-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 18px rgba(0, 0, 0, 0.28);
}
@supports (backdrop-filter: blur(1px)) {
  .article-page .article-blockquote {
    background: rgba(255, 255, 255, 0.026);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
/* RTL: border is on the right */
[dir="rtl"] .article-page .article-blockquote {
  border-right-color: rgba(255, 255, 255, 0.16);
}

/* 14. Sidebar CTA — lime border / icon / ambient glow preserved */
.article-page .sidebar-cta {
  background: rgba(255, 255, 255, 0.040);
}
@supports (backdrop-filter: blur(1px)) {
  .article-page .sidebar-cta {
    background: rgba(255, 255, 255, 0.032);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

/* 15. Article continue CTA — lime border / stripe / ambient glow preserved */
.article-page .article-continue-cta {
  background: rgba(255, 255, 255, 0.040);
}
@supports (backdrop-filter: blur(1px)) {
  .article-page .article-continue-cta {
    background: rgba(255, 255, 255, 0.032);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* 16. Disclaimer — deliberately most subtle */
.article-page .article-disclaimer {
  background: rgba(255, 255, 255, 0.020);
  border-color: rgba(255, 255, 255, 0.07);
}
@supports (backdrop-filter: blur(1px)) {
  .article-page .article-disclaimer {
    background: rgba(255, 255, 255, 0.016);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* 17. Related blog cards (article page)
   Category glow via --card-accent-rgb unaffected               */
.article-page .blog-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 52px rgba(0, 0, 0, 0.34);
}
@supports (backdrop-filter: blur(1px)) {
  .article-page .blog-card {
    background: rgba(255, 255, 255, 0.028);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}
/* Hover: neutral background bump only; category system owns border + glow */
.article-page .blog-card:hover {
  background: rgba(255, 255, 255, 0.052);
}
@supports (backdrop-filter: blur(1px)) {
  .article-page .blog-card:hover {
    background: rgba(255, 255, 255, 0.044);
  }
}

/* ── Reduced motion: backdrop-filter is static (not animated),
   so it remains. Transitions are already handled by the
   prefers-reduced-motion block above — no repeat needed.
   ─────────────────────────────────────────────────────────── */