/*
Theme Name: AI Vartha Editorial
Version: 3.1.1
Description: v3.1.1 — topbar nowrap fix
*/

/* ──────────────────────────────────────────────────────────────────────
   AI Vartha — Design System Foundation
   Type + Color + Spacing tokens.
   Mirrors wordpress_theme/style.css :root, refined for world-class
   FT / Bloomberg / CNN-grade hierarchy. Includes semantic styles.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* ── BRAND PALETTE ────────────────────────────────────────────────── */
  --cream:        #FFF9F4;   /* page background (FT salmon-cream cousin) */
  --cream-2:      #FFF3E6;
  --cream-3:      #FFEEDB;
  --cream-border: #EAD9C8;

  --navy:         #0F1E33;   /* primary brand — deeper than v1 */
  --navy-2:       #1B2E45;   /* original */
  --navy-3:       #2E4D6B;
  --navy-4:       #4A6F8E;

  --amber:        #C4820A;   /* accent / CTA */
  --amber-2:      #E0A030;
  --amber-3:      #9E6808;
  --amber-soft:   #FFF3DC;

  /* Semantic */
  --up:           #1A7A4A;   /* green — gains */
  --up-soft:      #E8F5E9;
  --down:         #C0392B;   /* red — losses */
  --down-soft:    #FEE2E2;
  --breaking:     #C0392B;
  --info:         #1565C0;
  --warn:         #B8860B;

  /* Category palette — desaturated, editorial */
  --cat-markets:  #1565C0;
  --cat-policy:   #6A1B9A;
  --cat-banking:  #1B5E20;
  --cat-economy:  #C4820A;
  --cat-global:   #BF360C;
  --cat-budget:   #00695C;
  --cat-opinion:  #4527A0;

  /* ── SURFACES ─────────────────────────────────────────────────────── */
  --bg:           #FFF9F4;
  --surface:      #FFFFFF;
  --surface-2:    #FFFCF9;
  --surface-hover:#FFF3E6;
  --border:       #E8D8C4;
  --border-2:     #F0E6D8;
  --border-strong:#D4BFA5;

  /* ── TEXT ────────────────────────────────────────────────────────── */
  --fg:           #0F1E33;
  --fg-2:         #2C3E50;
  --fg-3:         #4A6070;
  --fg-muted:     #7A93A3;
  --fg-on-dark:   rgba(255,255,255,0.92);
  --fg-on-dark-2: rgba(255,255,255,0.62);
  --fg-on-dark-3: rgba(255,255,255,0.40);

  /* ── TYPOGRAPHY ───────────────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'DM Mono', 'Courier New', monospace;
  --font-ml:      'Noto Sans Malayalam', var(--font-sans);
  --font-hi:      'Noto Sans Devanagari', var(--font-sans);
  --font-te:      'Noto Sans Telugu', var(--font-sans);

  /* Type ramp — modular scale 1.25 (major third) */
  --t-xs:    11px;   /* labels / tags */
  --t-sm:    13px;
  --t-base:  15px;   /* body */
  --t-md:    17px;
  --t-lg:    19px;
  --t-xl:    22px;   /* card titles */
  --t-2xl:   28px;
  --t-3xl:   34px;   /* section heads */
  --t-4xl:   42px;
  --t-5xl:   52px;   /* hero */
  --t-display: 68px;

  /* ── SPACING (4px base) ──────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* ── RADIUS ──────────────────────────────────────────────────────── */
  --r-xs: 3px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 9999px;

  /* ── SHADOWS / ELEVATION ─────────────────────────────────────────── */
  --s-xs:  0 1px 2px rgba(15,30,51,0.06);
  --s-sm:  0 2px 8px rgba(15,30,51,0.07);
  --s:     0 4px 16px rgba(15,30,51,0.09);
  --s-lg:  0 8px 32px rgba(15,30,51,0.12);
  --s-xl:  0 16px 48px rgba(15,30,51,0.16);
  --s-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ── LAYOUT ──────────────────────────────────────────────────────── */
  --max-w:        1240px;
  --max-w-wide:   1480px;
  --max-w-prose:  720px;
  --gap:          24px;
  --header-h:     62px;
  --topbar-h:     38px;
  --ticker-h:     34px;
  --breaking-h:   38px;

  /* ── MOTION ──────────────────────────────────────────────────────── */
  --t-fast: 120ms cubic-bezier(.4,.0,.2,1);
  --t-med:  220ms cubic-bezier(.4,.0,.2,1);
  --t-slow: 380ms cubic-bezier(.4,.0,.2,1);
  --t-out:  300ms cubic-bezier(.16,1,.3,1);
}

/* ──────────────────────────────────────────────────────────────────────
   SEMANTIC TYPE STYLES
   Used directly as classes or via element selectors.
   ──────────────────────────────────────────────────────────────────── */

.t-display, h1.t-display {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(40px, 5.4vw, var(--t-display));
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--fg);
}

.t-h1, h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, var(--t-4xl));
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.t-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, var(--t-3xl));
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.t-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, var(--t-xl));
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--fg);
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.t-kicker {            /* the small uppercase line above a heading */
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--amber-3);
}

.t-deck, .t-lead {     /* article deck / lead paragraph */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--fg-3);
  font-style: italic;
}

.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--fg-2);
}

.t-body-serif {        /* long-form article body */
  font-family: var(--font-serif);
  font-size: var(--t-md);
  line-height: 1.75;
  color: var(--fg-2);
}

.t-small, small {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg-3);
}

.t-meta, .t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

.t-label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
}

.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.t-num {                /* numbers in tables, tickers */
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

/* Indic script overrides */
:lang(ml) { font-family: var(--font-ml); line-height: 1.95; }
:lang(hi) { font-family: var(--font-hi); line-height: 1.85; }
:lang(te) { font-family: var(--font-te); line-height: 1.95; }
:lang(ml) h1, :lang(ml) h2, :lang(ml) h3,
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3,
:lang(te) h1, :lang(te) h2, :lang(te) h3 { line-height: 1.4; }


/* ──────────────────────────────────────────────────────────────────────
   AI Vartha — UI Kit Styles
   Extends colors_and_type.css with component-level CSS.
   Mirrors wordpress_theme/style.css but cleaner and more refined.
   ──────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--amber); }
ul, ol { list-style: none; }
button { cursor: pointer; border: 0; background: 0; font: inherit; color: inherit; }
input, textarea, select { font: inherit; }
svg { display: block; flex-shrink: 0; }
figure { margin: 0; }

/* ── Layout container ──────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap-wide { max-width: var(--max-w-wide); margin-inline: auto; padding-inline: 24px; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ TOP BAR
   ──────────────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--navy);
  color: var(--fg-on-dark-2);
  display: flex; align-items: center;
  font-size: var(--t-xs);
  position: relative; z-index: 300;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-date { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-date svg { width: 12px; height: 12px; opacity: .55; }
.topbar-edition {
  display: flex; align-items: center; gap: 5px;
  padding: 0 14px;
  border-left: 1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(255,255,255,.12);
  font-weight: 700; color: var(--amber-2);
  font-size: 10px; letter-spacing: .10em; text-transform: uppercase;
  white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-langs { display: flex; align-items: center; gap: 4px; }
.lang-pill {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-xs);
  letter-spacing: .04em;
  background: transparent; color: var(--fg-on-dark-3);
  transition: all var(--t-fast);
}
.lang-pill:hover { color: var(--fg-on-dark); background: rgba(255,255,255,.06); }
.lang-pill.active { background: var(--amber); color: #fff; }
.topbar-social { display: flex; align-items: center; gap: 14px; }
.topbar-social a { color: var(--fg-on-dark-3); display: flex; align-items: center; }
.topbar-social a:hover { color: var(--amber-2); }
.topbar-social svg { width: 14px; height: 14px; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ MARKET TICKER
   ──────────────────────────────────────────────────────────────────── */
.market-strip {
  background: var(--navy-2);
  height: var(--ticker-h);
  display: flex; align-items: stretch; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.market-label {
  background: var(--amber); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; padding: 0 16px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.market-label svg { width: 11px; height: 11px; }
.ticker-track { flex: 1; overflow: hidden; position: relative; }
.ticker-inner {
  display: flex; width: max-content;
  animation: scroll-left 70s linear infinite;
  height: var(--ticker-h); align-items: center;
}
.ticker-inner:hover { animation-play-state: paused; }
.ticker-item {
  display: flex; align-items: center; gap: 8px;
  padding: 0 22px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-on-dark); height: 100%;
  border-right: 1px solid rgba(255,255,255,.05);
  white-space: nowrap;
}
.ticker-item .t-name {
  color: var(--fg-on-dark-2); font-size: 10px;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  font-family: var(--font-sans);
}
.ticker-item .t-price { color: #fff; font-weight: 600; }
.t-up { color: #4ADE80; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.t-dn { color: #F87171; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.t-up svg, .t-dn svg { width: 10px; height: 10px; }

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ──────────────────────────────────────────────────────────────────────
   ▸ SITE HEADER
   ──────────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  transition: box-shadow var(--t-med);
}
.site-header.is-scrolled { box-shadow: var(--s-sm); }
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--header-h);
  gap: 28px;
}

.site-logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 38px; height: 38px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-size: 22px; font-weight: 900;
  color: var(--navy); letter-spacing: -.04em;
}
.logo-name em { color: var(--amber); font-style: normal; }
.logo-sub {
  font-size: 9.5px; color: var(--fg-muted);
  letter-spacing: .14em; text-transform: uppercase;
  margin-top: 3px; font-weight: 600;
}

/* Primary navigation */
.primary-nav { display: flex; align-items: center; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 1px; }
.nav-list a {
  display: block; padding: 8px 10px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-3); border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
  white-space: nowrap;
}
.nav-list a:hover { background: var(--amber-soft); color: var(--navy); }
.nav-list a.is-active { color: var(--navy); font-weight: 700; }
.nav-list a.is-active::after {
  content: ''; position: absolute;
  left: 13px; right: 13px; bottom: -1px;
  height: 2px; background: var(--amber);
}

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--fg-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--amber-soft); color: var(--navy); }
.icon-btn svg { width: 18px; height: 18px; }

.btn-subscribe {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  background: var(--navy); color: #fff;
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--r-sm);
  letter-spacing: .02em;
  transition: background var(--t-fast);
}
.btn-subscribe:hover { background: var(--navy-2); color: #fff; }
.btn-subscribe svg { width: 13px; height: 13px; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ BREAKING BAR
   ──────────────────────────────────────────────────────────────────── */
.breaking-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
  height: var(--breaking-h);
  display: flex; align-items: stretch; overflow: hidden;
}
.breaking-pill {
  background: var(--breaking); color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase;
  padding: 0 16px; display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; position: relative;
}
.breaking-pill svg { width: 11px; height: 11px; }
.breaking-pill::after {
  content: ''; width: 6px; height: 6px;
  background: #fff; border-radius: 50%;
  margin-left: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.breaking-scroll { flex: 1; overflow: hidden; }
.breaking-inner {
  display: flex; align-items: center; height: 100%;
  width: max-content; animation: scroll-left 50s linear infinite;
}
.breaking-inner:hover { animation-play-state: paused; }
.b-item {
  display: flex; align-items: center;
  font-size: 13px; color: var(--fg-3); white-space: nowrap;
}
.b-item a {
  padding: 0 32px 0 0; display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.b-item a::before { content: '▸'; color: var(--amber); font-size: 11px; }
.b-item a:hover { color: var(--fg); }

/* ──────────────────────────────────────────────────────────────────────
   ▸ CATEGORY BADGE
   ──────────────────────────────────────────────────────────────────── */
.cat-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: var(--amber-soft); color: var(--amber-3);
  white-space: nowrap;
  transition: opacity var(--t-fast);
}
.cat-tag:hover { opacity: .85; color: var(--amber-3); }
.cat-tag.cat-markets  { background: #E3F0FF; color: var(--cat-markets); }
.cat-tag.cat-policy   { background: #F3E8FF; color: var(--cat-policy); }
.cat-tag.cat-banking  { background: #E8F5E9; color: var(--cat-banking); }
.cat-tag.cat-economy  { background: var(--amber-soft); color: var(--amber-3); }
.cat-tag.cat-global   { background: #FBE9E7; color: var(--cat-global); }
.cat-tag.cat-tech     { background: #E1F5FE; color: #01579B; }
.cat-tag.cat-foreign  { background: #EFEBE9; color: #4E342E; }
.cat-tag.cat-opinion  { background: #EDE7F6; color: var(--cat-opinion); }
.cat-tag.cat-breaking { background: #FEE2E2; color: var(--breaking); }

/* dark variant (sits on imagery) */
.cat-tag.on-dark { background: rgba(255,255,255,.94); color: var(--navy); backdrop-filter: blur(2px); }

/* ──────────────────────────────────────────────────────────────────────
   ▸ POST META
   ──────────────────────────────────────────────────────────────────── */
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--fg-muted); }
.meta-i { display: inline-flex; align-items: center; gap: 4px; }
.meta-i svg { width: 12px; height: 12px; opacity: .7; }
.meta a:hover { color: var(--amber); }

/* ──────────────────────────────────────────────────────────────────────
   ▸ SECTION HEADER (the "broadsheet rule")
   ──────────────────────────────────────────────────────────────────── */
.sec-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.sec-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.sec-title::before {
  content: ''; display: block;
  width: 4px; height: 16px; background: var(--amber);
  border-radius: 1px;
}
.sec-title-large { font-size: 18px; letter-spacing: .06em; }
.sec-more {
  font-size: 12px; font-weight: 700; color: var(--amber-3);
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.sec-more:hover { gap: 8px; color: var(--navy); }
.sec-more svg { width: 12px; height: 12px; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ HERO BLOCK
   ──────────────────────────────────────────────────────────────────── */
.hero-block {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 2px; background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 40px;
}
.hero-main {
  position: relative; min-height: 500px;
  display: flex; align-items: flex-end;
  background: var(--navy); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 7s ease;
}
.hero-main:hover .hero-bg { transform: scale(1.04); }
.hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(14,24,38,.97) 0%,
    rgba(14,24,38,.65) 45%,
    rgba(14,24,38,.10) 100%);
}
.hero-body { position: relative; z-index: 2; padding: 36px 32px; width: 100%; }
.hero-body .cat-tag { margin-bottom: 14px; }
.hero-body h2 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900; color: #fff;
  line-height: 1.12; margin-bottom: 14px;
  letter-spacing: -.035em;
  max-width: 92%;
}
.hero-body h2 a { color: inherit; }
.hero-body h2 a:hover { color: var(--amber-2); }
.hero-deck {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: rgba(255,255,255,.78);
  line-height: 1.55; max-width: 540px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 16px;
}
.hero-body .meta { color: rgba(255,255,255,.6); margin-bottom: 18px; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; background: var(--amber); color: #fff;
  font-size: 13px; font-weight: 700;
  border-radius: var(--r-full);
  transition: background var(--t-fast), gap var(--t-fast);
  white-space: nowrap;
}
.hero-cta:hover { background: var(--amber-3); color: #fff; gap: 10px; }
.hero-cta svg { width: 13px; height: 13px; }

/* Right side mini boxes (4×) */
.hero-side {
  display: grid; grid-template-rows: repeat(4, 1fr);
  gap: 2px; background: var(--border);
}
.mini-box {
  background: var(--surface); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
  transition: background var(--t-fast);
  cursor: pointer;
}
.mini-box:hover { background: var(--surface-hover); }
.mini-box::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--amber-soft);
  transition: background var(--t-fast);
}
.mini-box:hover::before { background: var(--amber); }
.mini-box .cat-tag { font-size: 9.5px; }
.mini-box-title {
  font-size: 14.5px; font-weight: 700; line-height: 1.4;
  color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px;
}
.mini-box:hover .mini-box-title { color: var(--navy); }
.mini-box .meta { font-size: 11px; margin-top: auto; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ CARD STRIP (4-col)
   ──────────────────────────────────────────────────────────────────── */
.card-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-bottom: 44px;
}
.card-strip-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ POST CARD
   ──────────────────────────────────────────────────────────────────── */
.post-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med);
  cursor: pointer;
}
.post-card:hover {
  box-shadow: var(--s-sm); transform: translateY(-2px);
  border-color: var(--cream-border);
}
.card-img {
  aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  position: relative; flex-shrink: 0;
}
.card-img img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease; }
.post-card:hover .card-img img { transform: scale(1.06); }
.card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.15);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
}
.card-img-placeholder svg { width: 44px; height: 44px; }
.card-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.card-body .cat-tag { align-self: flex-start; }
.card-title {
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-title a:hover { color: var(--navy); }
.card-excerpt {
  font-size: 13px; color: var(--fg-muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--border-2);
}

/* ──────────────────────────────────────────────────────────────────────
   ▸ HOMEPAGE GRID
   ──────────────────────────────────────────────────────────────────── */
.home-grid {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 40px; align-items: start;
  margin-top: 36px;
}

/* ──────────────────────────────────────────────────────────────────────
   ▸ NEWS ROWS
   ──────────────────────────────────────────────────────────────────── */
.news-rows { display: flex; flex-direction: column; }
.news-row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 18px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--border-2);
  cursor: pointer; transition: background var(--t-fast);
}
.news-row:first-child { padding-top: 0; }
.news-row:last-child { border-bottom: 0; }
.news-row:hover .news-row-title { color: var(--navy); }
.news-row-img {
  aspect-ratio: 4/3; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
}
.news-row-img img { width: 100%; height: 100%; object-fit: cover; }
.news-row-body { display: flex; flex-direction: column; gap: 6px; }
.news-row-body .cat-tag { align-self: flex-start; }
.news-row-title {
  font-size: 17px; font-weight: 700; line-height: 1.35;
  color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-fast);
  letter-spacing: -0.01em;
}
.news-row-excerpt {
  font-size: 13.5px; color: var(--fg-3); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────
   ▸ SIDEBAR / WIDGETS
   ──────────────────────────────────────────────────────────────────── */
.site-sidebar { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.widget {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.widget-hd {
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 7px;
}
.widget-hd svg { width: 12px; height: 12px; opacity: .65; }
.widget-body { padding: 16px 18px; }

/* About widget */
.widget-about p { font-size: 13px; line-height: 1.7; color: var(--fg-3); margin-bottom: 14px; }
.sidebar-socials { display: flex; gap: 8px; }
.sidebar-socials a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-2); border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--fg-3);
  transition: all var(--t-fast);
}
.sidebar-socials a:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
.sidebar-socials svg { width: 14px; height: 14px; }

/* Trending list */
.sidebar-post { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border-2); cursor: pointer; }
.sidebar-post:first-child { padding-top: 0; }
.sidebar-post:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-num {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: var(--amber); line-height: 1; padding-top: 2px;
  min-width: 22px;
}
.sp-content { display: flex; gap: 10px; flex: 1; min-width: 0; }
.sp-img { flex-shrink: 0; width: 72px; height: 54px; border-radius: var(--r-xs); overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-3)); }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-text { min-width: 0; flex: 1; }
.sp-title {
  display: block; font-size: 13px; font-weight: 700;
  line-height: 1.4; color: var(--fg); margin-bottom: 4px;
  transition: color var(--t-fast);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-post:hover .sp-title { color: var(--amber); }
.sp-text .meta { font-size: 11px; }

/* Categories list */
.cat-list { list-style: none; }
.cat-list li { border-bottom: 1px solid var(--border-2); }
.cat-list li:last-child { border-bottom: 0; }
.cat-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 0;
  font-size: 13.5px; font-weight: 600; color: var(--fg-2);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.cat-list a:hover { color: var(--amber); padding-left: 4px; }
.cat-list a svg { width: 12px; height: 12px; color: var(--amber); opacity: .7; }
.cat-list a span:first-of-type { flex: 1; }
.cat-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 2px 8px; background: var(--cream-2); border: 1px solid var(--border);
  border-radius: var(--r-full); color: var(--fg-muted);
}

/* Market table widget */
.mkt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mkt-table tr { border-bottom: 1px solid var(--border-2); }
.mkt-table tr:last-child { border-bottom: 0; }
.mkt-table td { padding: 9px 0; vertical-align: middle; }
.mkt-name {
  font-weight: 700; color: var(--fg);
  font-size: 11.5px; letter-spacing: .02em;
}
.mkt-price {
  font-family: var(--font-mono); color: var(--fg-3); font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mkt-table .t-up, .mkt-table .t-dn {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 11.5px;
  justify-content: flex-end;
  color: var(--up); padding-left: 12px;
}
.mkt-table .t-dn { color: var(--down); }
.mkt-table .t-up svg, .mkt-table .t-dn svg { width: 11px; height: 11px; }

/* Newsletter */
.nl-form { display: flex; flex-direction: column; gap: 8px; }
.nl-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; background: var(--cream);
  color: var(--fg);
  transition: border-color var(--t-fast);
}
.nl-input:focus { outline: none; border-color: var(--amber); background: #fff; }
.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; background: var(--amber); color: #fff;
  border-radius: var(--r-sm); font-weight: 700; font-size: 13px;
  transition: background var(--t-fast);
}
.nl-btn:hover { background: var(--amber-3); }
.nl-btn svg { width: 13px; height: 13px; }
.widget-newsletter p { font-size: 12.5px; color: var(--fg-3); margin-bottom: 12px; line-height: 1.6; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ FOOTER
   ──────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: var(--fg-on-dark-2); margin-top: 0; }
.footer-top { padding: 56px 0 40px; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer-logo-block { max-width: 320px; }
.footer-logo-block img { height: 40px; margin-bottom: 16px; }
.footer-desc { font-size: 13px; line-height: 1.7; color: var(--fg-on-dark-2); margin-bottom: 20px; }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: var(--fg-on-dark-2);
  border-radius: var(--r-xs);
  transition: background var(--t-fast), color var(--t-fast);
}
.footer-socials a:hover { background: var(--amber); color: #fff; }
.footer-socials svg { width: 15px; height: 15px; }
.footer-col-title {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13px; color: var(--fg-on-dark-2);
  display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--amber-2); }
.footer-links a svg { width: 10px; height: 10px; opacity: .5; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
}
.footer-bottom .wrap {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--fg-on-dark-3); flex-wrap: wrap; gap: 12px;
}

/* ──────────────────────────────────────────────────────────────────────
   ▸ ARTICLE
   ──────────────────────────────────────────────────────────────────── */
.reading-progress {
  position: fixed; top: 0; left: 0; z-index: 999;
  height: 3px; width: 0%; background: var(--amber);
  transition: width .1s linear;
}

.art-head { padding: 32px 0 0; }
.art-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--fg-muted);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 16px;
}
.art-breadcrumb a:hover { color: var(--amber); }
.art-breadcrumb svg { width: 10px; height: 10px; opacity: .5; }

.art-head-inner { max-width: 820px; margin: 0 auto; }

.art-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--fg); margin: 14px 0 18px;
}
.art-deck {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.55;
  color: var(--fg-3); margin-bottom: 24px;
  max-width: 680px;
}

.art-meta-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); margin-bottom: 24px;
  flex-wrap: wrap;
}
.art-author { display: flex; align-items: center; gap: 10px; }
.author-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-soft), var(--amber-2));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--amber-3); font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.author-info { display: flex; flex-direction: column; }
.author-info .author-name {
  font-size: 13.5px; font-weight: 700; color: var(--fg);
}
.author-info .author-role {
  font-size: 11px; color: var(--fg-muted);
  letter-spacing: .03em;
}
.art-meta-spacer { width: 1px; height: 24px; background: var(--border); }
.art-meta .meta-i { font-size: 12px; }

.art-share { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-xs);
  font-size: 12px; font-weight: 700;
  transition: opacity var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}
.share-btn svg { width: 14px; height: 14px; }
.share-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.share-fb { background: #1877f2; color: #fff; }
.share-tw { background: #000; color: #fff; }
.share-wa { background: #25d366; color: #fff; }
.share-bookmark {
  background: var(--cream-2); color: var(--fg-3);
  border: 1px solid var(--border);
}
.share-bookmark:hover { background: var(--amber-soft); color: var(--amber-3); }

.art-hero-img {
  margin: 0 0 24px;
  border-radius: var(--r); overflow: hidden;
  aspect-ratio: 16/8;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
}
.art-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.art-img-caption {
  font-size: 12px; color: var(--fg-muted);
  padding: 10px 14px; background: var(--cream-2);
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* Article layout */
.art-layout {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 48px; align-items: start; margin-top: 32px;
}
.art-body { min-width: 0; max-width: 740px; margin: 0 auto; width: 100%; }

.art-body p {
  font-family: var(--font-serif);
  font-size: 18px; line-height: 1.75;
  color: var(--fg-2); margin-bottom: 22px;
}
.art-body p:first-of-type::first-letter {
  font-size: 60px; font-weight: 800; color: var(--navy);
  float: left; line-height: 0.9; margin: 6px 8px 0 0;
  font-family: var(--font-sans);
}
.art-body h2 {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25;
  margin: 36px 0 16px; color: var(--fg);
}
.art-body h3 {
  font-family: var(--font-sans);
  font-size: 19px; font-weight: 700;
  margin: 28px 0 12px; color: var(--fg);
}
.art-body ul, .art-body ol { padding-left: 24px; margin-bottom: 22px; font-family: var(--font-serif); font-size: 17px; }
.art-body ul { list-style: disc; }
.art-body ol { list-style: decimal; }
.art-body li { line-height: 1.7; margin-bottom: 6px; color: var(--fg-2); }
.art-body blockquote {
  border-left: 4px solid var(--amber);
  background: var(--cream-2);
  margin: 32px 0;
  padding: 22px 26px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-serif);
  font-size: 22px; font-style: italic; line-height: 1.5;
  color: var(--navy);
}
.art-body blockquote cite {
  display: block; margin-top: 12px;
  font-family: var(--font-sans); font-style: normal;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted);
}
.art-body a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--amber);
}
.art-body a:hover { color: var(--amber-3); }
.art-body strong { font-weight: 700; color: var(--fg); }

/* Inline chart embed within article */
.art-chart-embed {
  margin: 32px 0; padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.art-chart-embed .chart-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-2);
}
.art-chart-embed .chart-hd-left { display: flex; flex-direction: column; gap: 6px; }
.art-chart-embed .chart-title {
  font-family: var(--font-sans); font-size: 16px; font-weight: 800;
  color: var(--fg); letter-spacing: -.015em;
}
.art-chart-embed .chart-sub {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--fg-muted); letter-spacing: .02em;
}
.art-chart-embed .chart-value {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: var(--fg); line-height: 1; font-variant-numeric: tabular-nums;
}
.art-chart-embed .chart-change {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
}
.art-chart-embed .chart-change.up { color: var(--up); }
.art-chart-embed .chart-change.down { color: var(--down); }
.art-chart-embed .chart-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-2);
  font-size: 11px; color: var(--fg-muted);
  font-family: var(--font-sans); letter-spacing: .02em;
}
.art-chart-embed .chart-foot a { color: var(--amber-3); font-weight: 700; }

/* Sidebar inline pull quote */
.pull-quote {
  margin: 32px 0; padding: 20px 0;
  border-top: 3px solid var(--navy);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans); font-weight: 800;
  font-size: 24px; line-height: 1.3;
  letter-spacing: -.02em; color: var(--navy);
}

/* In-article data table */
.art-table {
  margin: 28px 0; width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans); font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden;
}
.art-table th {
  background: var(--navy); color: #fff;
  padding: 10px 14px; text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800;
}
.art-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  font-variant-numeric: tabular-nums;
}
.art-table td:not(:first-child) { font-family: var(--font-mono); text-align: right; }
.art-table tr:nth-child(even) td { background: var(--cream); }
.art-table tr:last-child td { border-bottom: 0; }

/* Article tags + share */
.art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; }
.art-tags > svg { width: 14px; height: 14px; color: var(--fg-muted); }
.art-tag-pill {
  display: inline-flex; padding: 5px 12px;
  background: var(--cream-2); border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; color: var(--fg-3);
  transition: all var(--t-fast);
}
.art-tag-pill:hover { background: var(--amber); border-color: var(--amber); color: #fff; }

.art-share-bottom {
  margin-top: 32px; padding: 18px 20px;
  background: var(--cream-2); border-radius: var(--r-sm);
  border: 1px solid var(--border);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.share-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-muted);
  margin-right: 8px;
}

/* Author box */
.author-box {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px;
  margin: 40px 0 0;
}
.author-box-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-soft), var(--amber-2));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--amber-3); font-weight: 900; font-size: 22px;
  flex-shrink: 0;
}
.author-box-info .author-name { font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--fg); }
.author-box-info .author-role { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber-3); margin-bottom: 8px; }
.author-box-info .author-bio { font-size: 13.5px; line-height: 1.65; color: var(--fg-3); }

/* Related */
.related-section { margin-top: 56px; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ MARKETS DASHBOARD
   ──────────────────────────────────────────────────────────────────── */
.markets-hero {
  padding: 32px 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff;
  border-bottom: 4px solid var(--amber);
}
.markets-hero .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.markets-hero .arc-kicker { color: var(--amber-2); }
.markets-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 42px); }
.markets-hero p { color: rgba(255,255,255,.7); max-width: 540px; font-size: 14px; margin-top: 6px; }
.market-time {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: 6px;
}
.market-time .live-dot { width: 8px; height: 8px; background: #4ADE80;
  border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }

.market-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin: -32px 0 0;
  position: relative; z-index: 5;
}
.mkt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--s-sm);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.mkt-card:hover { transform: translateY(-2px); box-shadow: var(--s); }
.mkt-card-name {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-muted);
}
.mkt-card-value {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  line-height: 1; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.mkt-card-change {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.mkt-card-change.up { color: var(--up); }
.mkt-card-change.down { color: var(--down); }
.mkt-card-spark {
  margin-top: 4px; width: 100%; height: 36px;
}

.markets-main {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 36px; align-items: start;
  margin-top: 40px;
}

.markets-table {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.markets-table-hd {
  background: var(--navy); color: #fff;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.markets-table-hd h3 {
  font-size: 12px; font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase; color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
}
.markets-tabs { display: flex; gap: 2px; background: rgba(255,255,255,.06);
  padding: 3px; border-radius: var(--r-sm); }
.markets-tab {
  padding: 5px 12px; font-size: 11px; font-weight: 700;
  color: var(--fg-on-dark-2); letter-spacing: .04em;
  border-radius: var(--r-xs);
  transition: all var(--t-fast);
}
.markets-tab.active { background: var(--amber); color: #fff; }
.markets-tab:hover:not(.active) { color: #fff; }

.mkt-table-full { width: 100%; border-collapse: collapse; font-size: 13px; }
.mkt-table-full thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-muted); text-align: left;
  padding: 12px 18px; background: var(--cream-2);
  border-bottom: 1px solid var(--border);
  font-weight: 800;
}
.mkt-table-full thead th:not(:first-child) { text-align: right; }
.mkt-table-full tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-2);
}
.mkt-table-full tbody tr:last-child td { border-bottom: 0; }
.mkt-table-full tbody tr:hover { background: var(--cream); cursor: pointer; }
.mkt-row-name {
  font-weight: 700; color: var(--fg); font-size: 13.5px;
  display: flex; flex-direction: column; gap: 2px;
}
.mkt-row-name span:last-child {
  font-size: 11px; color: var(--fg-muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.mkt-table-full tbody td:not(:first-child) {
  font-family: var(--font-mono); text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.mkt-table-full .col-up { color: var(--up); }
.mkt-table-full .col-down { color: var(--down); }
.mkt-spark-cell { width: 80px; }
.mkt-spark-cell svg { display: block; margin-left: auto; }

/* Movers */
.movers-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; margin-bottom: 24px;
}
.movers-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--cream-2);
}
.movers-hd h3 {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
  display: inline-flex; align-items: center; gap: 6px;
}
.movers-hd svg { width: 13px; height: 13px; color: var(--amber); }
.movers-list { padding: 6px 0; }
.mover-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
}
.mover-row:hover { background: var(--cream); }
.mover-info {
  display: flex; flex-direction: column;
}
.mover-info .mover-name { font-size: 12.5px; font-weight: 700; color: var(--fg); }
.mover-info .mover-sym { font-size: 10.5px; color: var(--fg-muted); letter-spacing: .04em; font-weight: 600; }
.mover-right {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.mover-right .mover-price { font-size: 13px; font-weight: 600; color: var(--fg); }
.mover-right .mover-change { font-size: 11px; font-weight: 700; }
.mover-change.up { color: var(--up); }
.mover-change.down { color: var(--down); }

/* ──────────────────────────────────────────────────────────────────────
   ▸ ARCHIVE BANNER
   ──────────────────────────────────────────────────────────────────── */
.archive-head {
  padding: 32px 0 28px;
  border-bottom: 2px solid var(--amber);
  margin-bottom: 32px;
}
.arc-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber-3); margin-bottom: 8px;
}
.arc-title {
  font-size: clamp(28px, 3.5vw, 40px); font-weight: 900;
  letter-spacing: -.03em; color: var(--fg); margin-bottom: 10px;
}
.arc-desc { font-size: 15px; color: var(--fg-3); max-width: 640px; line-height: 1.55; }

/* ──────────────────────────────────────────────────────────────────────
   ▸ KIT NAV (top-of-prototype sample nav)
   ──────────────────────────────────────────────────────────────────── */
.kit-nav {
  background: #0a1320; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px; z-index: 1000;
  font-family: var(--font-sans); font-size: 12px;
  border-bottom: 2px solid var(--amber);
  gap: 16px;
}
.kit-nav-left { display: flex; align-items: center; gap: 12px; font-weight: 700; white-space: nowrap; }
.kit-nav-left .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.kit-nav-right { display: flex; align-items: center; gap: 4px; }
.kit-nav-btn {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  color: var(--fg-on-dark-2); border-radius: var(--r-xs);
  cursor: pointer; transition: all var(--t-fast);
  letter-spacing: .02em;
}
.kit-nav-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.kit-nav-btn.active { background: var(--amber); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   ▸▸▸ EDITORIAL HOMEPAGE — v2 ("out of the box")
   ══════════════════════════════════════════════════════════════════════ */

/* Editorial dateline — broadsheet feel above the masthead */
.dateline-strip {
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--fg-3);
  height: 30px;
}
.dateline-strip .wrap { display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; gap: 24px; height: 100%; flex-wrap: nowrap; overflow: hidden; }
.dateline-left { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; min-width: 0; }
.dateline-left .vol {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 600; color: var(--navy);
}
.dateline-left .sep { color: var(--border-strong); }
.dateline-right { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.dateline-right .pulse {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--up); font-weight: 700;
}
.dateline-right .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up); animation: pulse 1.5s ease-in-out infinite;
}

/* ── Front Page hero — asymmetric editorial ─────────────────────────── */
.front-page {
  margin: 28px 0 48px;
  padding-bottom: 36px;
  border-bottom: 3px double var(--navy);
}
.front-page-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 28px;
}
.front-page-eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 12px;
  margin-bottom: 0;
  gap: 24px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.front-page-eyebrow .left {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber-3);
  white-space: nowrap;
}
.front-page-eyebrow .left .pip { color: var(--down); font-size: 8px; }
.front-page-eyebrow .left em {
  font-style: normal; font-weight: 600;
  color: var(--fg-muted); letter-spacing: .08em;
}
.front-page-eyebrow .right {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-muted); letter-spacing: .06em;
  white-space: nowrap;
}

.front-page-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 0;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.front-page-grid > * {
  background: var(--bg);
  padding: 28px 28px 24px;
}
.front-page-grid > *:not(:last-child) {
  border-right: 1px solid var(--border);
}

.fp-lead {
  display: flex; flex-direction: column; gap: 14px;
}
.fp-lead .fp-image {
  aspect-ratio: 16/9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: linear-gradient(135deg, #1B2E45 0%, #2E4D6B 100%);
  position: relative;
  margin-bottom: 4px;
}
.fp-lead .fp-cat {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cat-policy);
  display: inline-flex; align-items: center; gap: 8px;
}
.fp-lead .fp-cat::after {
  content: ''; display: block; height: 1px; flex: 1;
  background: var(--border-strong);
  max-width: 80px;
}
.fp-lead h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--fg);
}
.fp-lead h1 em {
  font-style: italic; font-weight: 700;
  color: var(--amber-3);
}
.fp-lead .fp-deck {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.55;
  color: var(--fg-3);
  font-style: italic;
}
.fp-lead .fp-byline {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
  font-size: 12px; color: var(--fg-muted);
}
.fp-lead .fp-byline strong {
  color: var(--fg); font-weight: 700; font-size: 12.5px;
}
.fp-lead .fp-byline-dot { width: 3px; height: 3px; background: var(--border-strong); border-radius: 50%; }

.fp-mid {
  display: flex; flex-direction: column; gap: 14px;
}
.fp-mid .fp-image-sm {
  aspect-ratio: 4/3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: linear-gradient(135deg, #2E4D6B 0%, #4A6F8E 100%);
}
.fp-mid .fp-cat { color: var(--cat-markets); }
.fp-mid h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px; line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--fg);
}
.fp-mid .fp-deck { font-size: 14px; color: var(--fg-3); line-height: 1.6; }

.fp-right {
  display: flex; flex-direction: column; gap: 18px;
}
.fp-right-item {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-2);
}
.fp-right-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fp-right-item .fp-cat { font-size: 10px; color: var(--cat-banking); margin-bottom: 6px; }
.fp-right-item.cat-global .fp-cat { color: var(--cat-global); }
.fp-right-item.cat-opinion .fp-cat { color: var(--cat-opinion); }
.fp-right-item.cat-economy .fp-cat { color: var(--cat-economy); }
.fp-right-item h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px; line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--fg);
  margin-bottom: 6px;
}
.fp-right-item .meta { font-size: 11px; }

/* ── Leaderboard ad slot ────────────────────────────────────────────── */
.ad-slot {
  background: repeating-linear-gradient(
    45deg, var(--cream-2), var(--cream-2) 6px,
    var(--cream-3) 6px, var(--cream-3) 12px
  );
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
}
.ad-slot::before {
  content: 'ADVERTISEMENT';
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: .14em;
  color: var(--fg-muted);
  background: var(--bg);
  padding: 2px 8px; border-radius: 100px;
  border: 1px solid var(--border);
}
.ad-leaderboard { height: 100px; margin: 0 0 44px; }
.ad-mpu { aspect-ratio: 300/250; max-width: 300px; margin: 0 auto; }
.ad-skyscraper { aspect-ratio: 160/600; max-width: 160px; }
.ad-content-inner {
  display: flex; align-items: center; gap: 22px;
  background: var(--surface);
  padding: 16px 26px;
  border-radius: var(--r-sm);
  box-shadow: var(--s-xs);
  max-width: 88%;
}
.ad-content-inner .ad-logo {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 900; color: #fff;
  flex-shrink: 0;
  font-size: 18px;
}
.ad-content-inner h4 {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.2; font-weight: 700;
  color: var(--fg); margin-bottom: 4px;
}
.ad-content-inner p { font-size: 12.5px; color: var(--fg-3); line-height: 1.4; max-width: 420px; }
.ad-content-inner .ad-cta {
  margin-left: 16px; padding: 9px 16px;
  background: var(--navy); color: #fff;
  border-radius: var(--r-sm); font-weight: 700;
  font-size: 12px; white-space: nowrap;
}

/* MPU vertical layout */
.ad-mpu .ad-content-inner {
  flex-direction: column; gap: 12px;
  padding: 18px; text-align: center;
  max-width: none; width: 100%;
}
.ad-mpu .ad-content-inner h4 { font-size: 15px; }
.ad-mpu .ad-content-inner p { font-size: 11.5px; max-width: none; }
.ad-mpu .ad-content-inner .ad-cta { margin-left: 0; }

/* Native ad (sponsored card — looks editorial but labeled) */
.native-ad-card {
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber-3);
  border-radius: var(--r);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  align-items: center;
  margin: 28px 0;
  position: relative;
}
.native-ad-card .native-label {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: .12em;
  color: var(--fg-muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 100px;
}
.native-ad-card .sponsor-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.native-ad-card .sponsor-logo {
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 11px;
}
.native-ad-card h3 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 22px; line-height: 1.18;
  color: var(--fg); margin-bottom: 8px;
  letter-spacing: -.015em;
}
.native-ad-card p {
  font-family: var(--font-sans); font-size: 13.5px;
  color: var(--fg-3); line-height: 1.6;
  max-width: 540px;
}
.native-ad-card .ad-cta-row {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  font-size: 12px; font-weight: 700;
  color: var(--amber-3);
}
.native-ad-card .sponsor-graphic {
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
}

/* ── MARKETS PULSE — sector heatmap ─────────────────────────────────── */
.pulse-band {
  margin: 0 0 52px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.pulse-hd {
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
}
.pulse-hd-left {
  display: inline-flex; align-items: center; gap: 14px;
}
.pulse-hd .live-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 3px 8px; background: rgba(74,222,128,.18);
  border-radius: 100px; color: #4ADE80;
}
.pulse-hd .live-tag .dot { width: 6px; height: 6px; background: #4ADE80; border-radius: 50%; animation: pulse 1.5s infinite; }
.pulse-hd h2 {
  font-family: var(--font-sans); font-size: 14px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.pulse-hd .pulse-tabs { display: flex; gap: 2px; background: rgba(255,255,255,.06);
  padding: 3px; border-radius: var(--r-sm); }
.pulse-hd .pulse-tabs button {
  padding: 5px 12px; font-size: 10.5px; font-weight: 700;
  color: var(--fg-on-dark-2); border-radius: var(--r-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pulse-hd .pulse-tabs button.active { background: var(--amber); color: #fff; }

.pulse-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
.pulse-body > * { padding: 24px; }
.pulse-body > *:first-child { border-right: 1px solid var(--border); }

/* Heatmap */
.heatmap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 4px;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: var(--r-xs);
  padding: 9px 10px 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast);
}
.heatmap-cell:hover { transform: scale(1.05); z-index: 1; box-shadow: var(--s); }
.heatmap-cell .hm-name {
  font-size: 10px; font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.15;
}
.heatmap-cell .hm-pct {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Large cells (mega-cap) span 2 */
.heatmap-cell.lg { grid-column: span 2; grid-row: span 2; padding: 16px; aspect-ratio: 1; }
.heatmap-cell.lg .hm-name { font-size: 13px; font-weight: 800; }
.heatmap-cell.lg .hm-pct { font-size: 22px; }
.heatmap-cell.lg .hm-sub { font-size: 10px; font-family: var(--font-mono); opacity: .8; margin-top: 4px; }

.pulse-side {
  display: flex; flex-direction: column;
  background: var(--cream-2);
}
.pulse-side h3 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-strong);
}
.pulse-indices {
  display: grid; gap: 14px;
}
.pulse-index {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.pulse-index-left {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.pulse-index-name {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg);
}
.pulse-index-value {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: var(--fg); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pulse-index-chg {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 10px; border-radius: var(--r-xs);
}
.pulse-index-chg.up { background: var(--up-soft); color: var(--up); }
.pulse-index-chg.down { background: var(--down-soft); color: var(--down); }
.pulse-index-spark {
  width: 80px; height: 36px;
  flex-shrink: 0;
}

/* ── BRIEFING — numbered editorial list ─────────────────────────────── */
.briefing-band {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 44px;
  margin: 0 0 52px;
}
.briefing-hd {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy);
}
.briefing-hd h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 32px; letter-spacing: -.025em;
  color: var(--navy);
}
.briefing-hd h2 em { font-style: italic; color: var(--amber-3); font-weight: 700; }
.briefing-hd p {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--fg-muted);
}
.briefing-list { display: flex; flex-direction: column; }
.briefing-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
}
.briefing-item:first-child { padding-top: 4px; }
.briefing-item:last-child { border-bottom: 0; }
.briefing-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 52px; line-height: 1;
  color: var(--amber);
  letter-spacing: -.04em;
  font-feature-settings: "lnum" 1;
}
.briefing-body {
  display: flex; flex-direction: column; gap: 6px;
}
.briefing-cat {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted);
}
.briefing-body h3 {
  font-family: var(--font-serif);
  font-weight: 700; font-size: 22px;
  line-height: 1.22; letter-spacing: -.015em;
  color: var(--fg);
  transition: color var(--t-fast);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.briefing-item:hover .briefing-body h3 { color: var(--amber-3); }
.briefing-body p {
  font-family: var(--font-sans); font-size: 13.5px;
  color: var(--fg-3); line-height: 1.55;
  max-width: 540px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.briefing-body .meta .meta-i { white-space: nowrap; }
.briefing-body .meta { margin-top: 4px; }

/* Briefing sidebar */
.briefing-side { display: flex; flex-direction: column; gap: 28px; }

/* By the Numbers — data card */
.numbers-card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  padding: 26px 24px 22px;
  position: relative; overflow: hidden;
}
.numbers-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--amber) 0%, transparent 70%);
  opacity: .25;
}
.numbers-card .nc-hd {
  font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-2);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 8px;
}
.numbers-card .nc-hd::before {
  content: ''; width: 4px; height: 4px; background: var(--amber-2); border-radius: 50%;
}
.numbers-stack { display: flex; flex-direction: column; gap: 18px; position: relative; }
.numbers-item {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.numbers-item:last-child { border-bottom: 0; padding-bottom: 0; }
.numbers-figure {
  font-family: var(--font-serif);
  font-weight: 700; font-size: 32px; line-height: 1;
  color: #fff; letter-spacing: -.03em;
}
.numbers-figure.up { color: #4ADE80; }
.numbers-figure.down { color: #F87171; }
.numbers-figure em { font-style: italic; color: var(--amber-2); }
.numbers-label {
  font-size: 11px; color: rgba(255,255,255,.55);
  line-height: 1.4;
}
.numbers-label strong { color: rgba(255,255,255,.85); font-weight: 600; }

/* ── SECTION BANDS ──────────────────────────────────────────────────── */
.section-band {
  margin: 0 0 56px;
  padding: 32px 0;
  position: relative;
}
.section-band.dark {
  background: var(--cream-2);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 40px 0;
}
.section-band.dark .wrap { padding: 0 24px; }
.section-band-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px; gap: 18px;
}
.section-band-hd-left { display: inline-flex; align-items: baseline; gap: 18px; }
.section-band-hd h2 {
  font-family: var(--font-serif);
  font-weight: 700; font-size: 30px;
  letter-spacing: -.025em; color: var(--navy);
}
.section-band-hd h2::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 8px; height: 8px;
  background: var(--amber);
  margin-right: 12px; margin-top: -4px;
  transform: rotate(45deg);
}
.section-band-hd .tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--fg-muted);
  max-width: 320px;
}
.section-band-hd .sec-more { font-size: 12px; }

/* Banking band - feature + 3 list */
.banking-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.banking-feature {
  display: flex; flex-direction: column; gap: 14px;
}
.banking-feature .bf-image {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
  border-radius: var(--r-sm);
  position: relative; overflow: hidden;
}
.banking-feature .fp-cat { color: var(--cat-banking); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.banking-feature .fp-cat::after {
  content: ''; height: 1px; flex: 1; max-width: 80px;
  background: var(--border-strong);
}
.banking-feature h3 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 26px; line-height: 1.18;
  letter-spacing: -.02em; color: var(--fg);
}
.banking-feature p {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--fg-3); line-height: 1.6;
}
.banking-list { display: flex; flex-direction: column; gap: 18px; }
.banking-row {
  display: grid; grid-template-columns: 1fr 110px; gap: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border-2);
  align-items: start; cursor: pointer;
}
.banking-row:last-child { border-bottom: 0; padding-bottom: 0; }
.banking-row .br-text { display: flex; flex-direction: column; gap: 6px; }
.banking-row .br-text .briefing-cat { color: var(--cat-banking); }
.banking-row .br-text h4 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 16px; line-height: 1.3;
  letter-spacing: -.01em; color: var(--fg);
}
.banking-row:hover .br-text h4 { color: var(--cat-banking); }
.banking-row .br-image {
  aspect-ratio: 4/3; border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  overflow: hidden;
}

/* Global band - 4-card grid with map watermark */
.global-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.global-cell {
  background: var(--bg);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: background var(--t-fast);
  position: relative;
}
.global-cell:hover { background: var(--surface); }
.global-cell:not(:last-child) { border-right: 1px solid var(--border); }
.global-cell .gc-region {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cat-global);
}
.global-cell .gc-flag {
  width: 14px; height: 10px; border-radius: 1px;
  display: inline-block; flex-shrink: 0;
}
.global-cell h4 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 16px; line-height: 1.25; letter-spacing: -.012em;
  color: var(--fg);
}
.global-cell .gc-stat {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--fg-3); font-weight: 600; letter-spacing: -.01em;
  display: inline-flex; gap: 6px; align-items: center;
  margin-top: auto;
}
.global-cell .gc-stat .up { color: var(--up); }
.global-cell .gc-stat .down { color: var(--down); }

/* ── AUTHOR VOICES ──────────────────────────────────────────────────── */
.voices-band { margin: 0 0 56px; }
.voices-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.voice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast);
}
.voice-card:hover { border-color: var(--amber-2); transform: translateY(-2px); }
.voice-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.voice-meta > div:last-child { min-width: 0; flex: 1; }
.voice-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-soft), var(--amber-2));
  color: var(--amber-3); font-weight: 900; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.voice-name {
  font-size: 12.5px; font-weight: 800; color: var(--fg);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice-role {
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--amber-3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice-card h4 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 15px; line-height: 1.35; letter-spacing: -.01em;
  color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.voice-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; margin-top: auto;
  border-top: 1px solid var(--border-2);
  font-size: 11px; color: var(--fg-muted);
  gap: 8px;
}
.voice-foot > span:last-child { white-space: nowrap; }
.voice-tag {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-xs);
  background: var(--cream-2);
  color: var(--amber-3);
}

/* ── NEWSLETTER BAND (full-width) ───────────────────────────────────── */
.newsletter-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  margin: 0 0 0;
  padding: 56px 0 60px;
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.newsletter-band::before {
  content: ''; position: absolute; top: -120px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--amber) 0%, transparent 60%);
  opacity: .12;
}
.newsletter-band .wrap {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px; align-items: center;
  padding: 0 24px; position: relative;
}
.newsletter-band .nb-eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-2); margin-bottom: 14px;
}
.newsletter-band .nb-eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 24px; height: 1px; background: var(--amber-2);
  margin-right: 8px; transform: translateY(-2px);
}
.newsletter-band h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.02em; line-height: 1.18;
  color: #fff; margin-bottom: 18px;
}
.newsletter-band h2 em {
  font-style: italic; color: var(--amber-2);
}
.newsletter-band p {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.7);
  max-width: 540px; margin-bottom: 22px;
}
.newsletter-band .nb-stats {
  display: flex; gap: 32px; margin-top: 26px;
  font-family: var(--font-sans);
}
.newsletter-band .nb-stat .num {
  font-family: var(--font-serif); font-size: 28px;
  font-weight: 700; color: var(--amber-2);
  letter-spacing: -.02em; line-height: 1;
}
.newsletter-band .nb-stat .lbl {
  font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin-top: 4px;
}
.newsletter-band .nb-form {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  padding: 28px 24px;
  backdrop-filter: blur(8px);
}
.newsletter-band .nb-form h3 {
  font-family: var(--font-sans); font-size: 13px;
  font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  margin-bottom: 16px;
}
.newsletter-band .nb-input {
  width: 100%; padding: 12px 14px;
  background: rgba(0,0,0,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm); font-size: 14px;
  margin-bottom: 12px;
}
.newsletter-band .nb-input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-band .nb-input:focus { outline: none; border-color: var(--amber); }
.newsletter-band .nb-select {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-bottom: 14px;
}
.newsletter-band .nb-option {
  font-size: 11px; font-weight: 700; text-align: center;
  padding: 8px 6px; border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm); cursor: pointer;
  color: rgba(255,255,255,.7);
  transition: all var(--t-fast);
}
.newsletter-band .nb-option.active {
  background: var(--amber); border-color: var(--amber); color: #fff;
}
.newsletter-band .nb-cta {
  width: 100%; padding: 13px 16px;
  background: var(--amber); color: #fff;
  border-radius: var(--r-sm); font-weight: 800;
  font-size: 14px; letter-spacing: .02em;
  transition: background var(--t-fast);
}
.newsletter-band .nb-cta:hover { background: var(--amber-3); }
.newsletter-band .nb-fineprint {
  margin-top: 10px; font-size: 10.5px;
  color: rgba(255,255,255,.4); text-align: center; letter-spacing: .02em;
}

/* ── STICKY BOTTOM AD ───────────────────────────────────────────────── */
.sticky-ad {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(15,30,51,.08);
  z-index: 100;
  padding: 10px 0;
  transform: translateY(100%);
  transition: transform var(--t-slow);
}
.sticky-ad.is-visible { transform: translateY(0); }
.sticky-ad .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.sticky-ad-content {
  display: flex; align-items: center; gap: 16px; flex: 1;
}
.sticky-ad-content .ad-logo {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 14px;
  flex-shrink: 0;
}
.sticky-ad-text strong { font-size: 13px; color: var(--fg); }
.sticky-ad-text .sub { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.sticky-ad-label {
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: .12em;
  color: var(--fg-muted);
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--cream-2);
}
.sticky-ad-cta {
  padding: 8px 16px; background: var(--navy); color: #fff;
  border-radius: var(--r-sm); font-weight: 700;
  font-size: 12px; white-space: nowrap;
}
.sticky-ad-close {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); border-radius: var(--r-xs);
  cursor: pointer;
}
.sticky-ad-close:hover { background: var(--cream-2); color: var(--fg); }

/* ── INDEX-LED STORIES STRIP ────────────────────────────────────────── */
.idx-stories {
  margin: 0 0 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  background: var(--border);
}
.idx-cell {
  background: var(--bg);
  padding: 22px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: background var(--t-fast);
  position: relative; min-height: 220px;
}
.idx-cell:not(:last-child) { border-right: 1px solid var(--border); }
.idx-cell:hover { background: var(--surface); }
.idx-cell .idx-symbol {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .08em; color: var(--fg-muted);
  font-weight: 700;
}
.idx-cell .idx-value {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 22px; line-height: 1; letter-spacing: -.02em;
  color: var(--fg);
  font-feature-settings: "lnum" 1; font-variant-numeric: tabular-nums;
}
.idx-cell .idx-change {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
}
.idx-cell .idx-change.up { color: var(--up); }
.idx-cell .idx-change.down { color: var(--down); }
.idx-cell .idx-story-cat {
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-3); margin-top: 10px;
}
.idx-cell .idx-story-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 14px; line-height: 1.35; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idx-cell:hover .idx-story-title { color: var(--amber-3); }

/* Skyscraper ad layout */
.three-col-with-ad {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  gap: 32px;
  margin: 0 0 56px;
}
.three-col-with-ad .three-col-stack { display: flex; flex-direction: column; gap: 22px; }

/* ══════════════════════════════════════════════════════════════════════
   ▸ RESPONSIVE — mobile-first across 1100 / 900 / 768 / 480
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1100px — laptop / small desktop ──────────────────────────────── */
@media (max-width: 1100px) {
  :root { --max-w: 100%; }
  .wrap { padding-inline: 24px; }

  /* Editorial homepage */
  .front-page-grid { grid-template-columns: 1.5fr 1fr; }
  .front-page-grid .fp-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--border);
    border-top: 1px solid var(--border);
  }
  .front-page-grid .fp-right .fp-right-item {
    background: var(--bg);
    padding: 22px 24px;
    border-bottom: 0;
  }
  .front-page-grid .fp-right .fp-right-item:nth-child(odd):not(:last-child) {
    border-right: 1px solid var(--border);
  }
  .front-page-grid .fp-right .fp-right-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  .briefing-band { gap: 32px; }
  .briefing-num { font-size: 44px; }
  .briefing-item { grid-template-columns: 52px 1fr; }

  .voices-grid { grid-template-columns: repeat(2, 1fr); }
  .global-grid { grid-template-columns: repeat(2, 1fr); }
  .global-grid > *:nth-child(2) { border-right: 0; }
  .global-grid > *:nth-child(-n+2) { border-bottom: 1px solid var(--border); }

  .idx-stories { grid-template-columns: repeat(5, 1fr); }

  .card-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .market-grid { grid-template-columns: repeat(2, 1fr); }
  .markets-main { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr 260px; gap: 28px; }

  /* Header nav — tighter spacing */
  .nav-list a { padding: 7px 8px; font-size: 12.5px; }
  .header-inner { gap: 16px; }

  /* Newsletter band */
  .newsletter-band .wrap { gap: 40px; }
  .newsletter-band h2 { font-size: 32px; }
}

/* ── 900px — tablet landscape / large mobile landscape ────────────── */
@media (max-width: 900px) {
  .wrap { padding-inline: 20px; }

  /* Hide some dateline pieces for breathing room */
  .dateline-strip { height: auto; padding: 8px 0; }
  .dateline-strip .wrap {
    flex-wrap: wrap; gap: 8px 14px;
    padding-block: 4px;
  }
  .dateline-left { flex-wrap: wrap; gap: 8px 12px; font-size: 10.5px; }
  .dateline-right { font-size: 10.5px; }
  .dateline-right > span:not(.pulse) { display: none; }
  .dateline-left .vol { font-size: 12px; }

  /* Front page — stack into 2 cols, then 1 */
  .front-page-grid {
    grid-template-columns: 1fr;
    background: transparent;
    border-top: 0; border-bottom: 0;
  }
  .front-page-grid > *:not(:last-child) { border-right: 0; }
  .front-page-grid .fp-lead { padding: 0 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
  .front-page-grid .fp-mid { padding: 0 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
  .front-page-grid .fp-right {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0;
  }
  .front-page-grid .fp-right .fp-right-item:nth-child(odd):not(:last-child) {
    border-right: 1px solid var(--border);
  }
  .fp-lead h1 { font-size: clamp(28px, 5vw, 38px); }
  .fp-lead .fp-image { aspect-ratio: 16/9; }

  /* Markets pulse */
  .pulse-body { grid-template-columns: 1fr; }
  .pulse-body > *:first-child { border-right: 0; border-bottom: 1px solid var(--border); }
  .heatmap { grid-template-columns: repeat(4, 1fr); }
  .heatmap-cell.lg { grid-column: span 2; grid-row: span 2; }

  /* Briefing — stack the side card below */
  .briefing-band { grid-template-columns: 1fr; gap: 36px; }
  .briefing-side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Banking */
  .banking-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Voices stay at 2 cols */
  .voices-grid { grid-template-columns: repeat(2, 1fr); }

  /* Global — already 2 col from 1100 */
  /* Index stories collapse to horizontal scroll */
  .idx-stories {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-sm);
  }
  .idx-stories::-webkit-scrollbar { height: 4px; }
  .idx-stories::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
  .idx-cell {
    flex: 0 0 64%;
    min-height: 220px;
    scroll-snap-align: start;
    border-right: 1px solid var(--border);
  }
  .idx-cell:last-child { border-right: 0; }

  /* News rows / archive */
  .hero-block { grid-template-columns: 1fr; }
  .hero-side { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .home-grid, .art-layout, .markets-main { grid-template-columns: 1fr; }
  .news-row { grid-template-columns: 120px 1fr; gap: 14px; }

  /* Sidebar collapses below content on home/archive */
  .home-grid > .site-sidebar { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 8px; }
  /* On single article, hide sidebar to give the body full width */
  .art-layout .site-sidebar { display: none; }

  /* Newsletter band — stack */
  .newsletter-band {
    padding: 44px 0;
  }
  .newsletter-band .wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .newsletter-band h2 { font-size: 28px; }
  .newsletter-band .nb-stats { gap: 24px; }

  /* Section bands */
  .section-band-hd { flex-wrap: wrap; }
  .section-band-hd-left { flex-wrap: wrap; gap: 8px 14px; }
  .section-band-hd h2 { font-size: 26px; }
  .section-band-hd .tagline { font-size: 13px; }
  .section-band.dark { padding: 32px 0; }
  .section-band { margin: 0 0 40px; }

  /* Markets dashboard cards */
  .markets-table-hd { flex-wrap: wrap; gap: 8px; }
  .mkt-card-value { font-size: 24px; }
  .market-grid { gap: 10px; }

  /* Topbar — hide social on tablet to keep room */
  .topbar-social { display: none; }
  .topbar-edition { font-size: 9.5px; }
}

/* ── 768px — tablet portrait / phone landscape ─────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-h: 56px;
    --topbar-h: 0px;
    --gap: 16px;
  }
  .wrap { padding-inline: 16px; }

  /* HIDE chrome strips that won't fit */
  .topbar { display: none; }
  .market-strip { height: 30px; }
  .market-label { padding: 0 12px; font-size: 9px; }
  .ticker-item { font-size: 11px; padding: 0 16px; }
  .ticker-item .t-name { font-size: 9px; }

  /* Header — show hamburger, hide nav */
  .primary-nav { display: none; }
  .hamburger { display: flex; }
  .header-inner { grid-template-columns: auto 1fr auto; gap: 12px; }
  .header-actions .btn-subscribe { display: none; }
  .logo-name { font-size: 18px; }
  .logo-sub { display: none; }
  .logo-mark { width: 34px; height: 34px; }

  /* Nav open state */
  .primary-nav.nav-open,
  .primary-nav.is-open {
    display: flex !important; flex-direction: column;
    position: fixed; inset: 0; top: var(--header-h);
    background: var(--surface); z-index: 190;
    padding: 16px; overflow-y: auto;
    border-top: 1px solid var(--border);
    box-shadow: var(--s-lg);
  }
  .primary-nav.nav-open .nav-list,
  .primary-nav.is-open .nav-list { flex-direction: column; gap: 2px; align-items: stretch; }
  .primary-nav.nav-open .nav-list a,
  .primary-nav.is-open .nav-list a {
    font-size: 15px; padding: 14px 16px;
    border-radius: var(--r-sm); display: block;
  }

  /* Dateline */
  .dateline-strip { font-size: 10px; }
  .dateline-left { gap: 6px 10px; }
  .dateline-left > span:nth-child(n+4) { display: none; }
  .dateline-right .pulse { font-weight: 800; }

  /* Breaking bar */
  .breaking-bar { height: 34px; }
  .breaking-pill { font-size: 9px; padding: 0 12px; }
  .b-item a { font-size: 12px; padding-right: 22px; }

  /* Front page eyebrow + grid */
  .front-page-eyebrow {
    flex-wrap: wrap; gap: 6px;
    font-size: 9.5px;
    padding: 8px 0 10px;
  }
  .front-page-eyebrow .left { gap: 8px; }
  .front-page-eyebrow .left em { display: none; }
  .front-page-eyebrow .right { font-size: 9.5px; }

  .front-page {
    margin: 16px 0 36px;
    padding-bottom: 28px;
    border-bottom-width: 2px;
  }
  .fp-lead h1 { font-size: 26px; line-height: 1.1; }
  .fp-lead .fp-deck { font-size: 15px; }
  .fp-lead .fp-byline { font-size: 11px; flex-wrap: wrap; gap: 6px; }
  .fp-lead .fp-byline-dot:nth-of-type(n+2) { display: none; }
  .fp-lead .fp-byline > span:nth-child(n+5) { display: none; }
  .fp-mid h2 { font-size: 20px; }
  .fp-mid .fp-deck { font-size: 13px; }
  .front-page-grid .fp-right { grid-template-columns: 1fr; }
  .front-page-grid .fp-right .fp-right-item:nth-child(odd):not(:last-child) { border-right: 0; }
  .front-page-grid .fp-right .fp-right-item { padding: 18px 20px; }
  .front-page-grid .fp-right .fp-right-item:not(:last-child) { border-bottom: 1px solid var(--border); }
  .fp-right-item h3 { font-size: 15px; }

  /* Markets pulse */
  .pulse-hd { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; }
  .pulse-hd .pulse-tabs {
    width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pulse-body > * { padding: 16px; }
  .heatmap { grid-template-columns: repeat(3, 1fr); }
  .heatmap-cell.lg { grid-column: span 2; grid-row: span 2; }
  .heatmap-cell .hm-pct { font-size: 12px; }
  .heatmap-cell .hm-name { font-size: 9px; }
  .heatmap-cell.lg .hm-pct { font-size: 18px; }
  .heatmap-cell.lg .hm-name { font-size: 11px; }

  /* Pulse indices stack tightly */
  .pulse-index { gap: 8px; }
  .pulse-index-value { font-size: 15px; }
  .pulse-index-spark { width: 60px; }

  /* Briefing */
  .briefing-hd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .briefing-hd h2 { font-size: 26px; }
  .briefing-hd p { font-size: 13px; }
  .briefing-item { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; }
  .briefing-num { font-size: 36px; }
  .briefing-body h3 { font-size: 18px; }
  .briefing-body p { font-size: 13px; }
  .briefing-side { grid-template-columns: 1fr; gap: 20px; }
  .numbers-card { padding: 20px 18px 18px; }
  .numbers-figure { font-size: 26px; }

  /* Banking */
  .banking-feature h3 { font-size: 22px; }
  .banking-feature p { font-size: 13px; }
  .banking-row { grid-template-columns: 1fr 88px; gap: 14px; padding-bottom: 14px; }
  .banking-row .br-text h4 { font-size: 14.5px; }

  /* Voices — 1 col */
  .voices-grid { grid-template-columns: 1fr; gap: 14px; }
  .voice-card { padding: 16px; }

  /* Global — 1 col, stacked */
  .global-grid {
    grid-template-columns: 1fr;
    border-radius: var(--r-sm);
  }
  .global-cell { border-right: 0 !important; border-bottom: 1px solid var(--border); }
  .global-cell:last-child { border-bottom: 0; }

  /* Index stories — tighter scroll */
  .idx-cell { flex: 0 0 75%; padding: 18px 16px 16px; }
  .idx-cell .idx-value { font-size: 20px; }

  /* Newsletter band */
  .newsletter-band { padding: 36px 0; }
  .newsletter-band .wrap { padding: 0 16px; gap: 24px; }
  .newsletter-band h2 { font-size: 24px; }
  .newsletter-band p { font-size: 14px; }
  .newsletter-band .nb-stats { gap: 18px 24px; flex-wrap: wrap; }
  .newsletter-band .nb-stat .num { font-size: 24px; }
  .newsletter-band .nb-form { padding: 22px 18px; }

  /* Card strip */
  .card-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-strip-3 { grid-template-columns: 1fr; }
  .post-card .card-title { font-size: 14px; }

  /* News rows / archive */
  .news-row { grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 0; }
  .news-row-title { font-size: 15px; -webkit-line-clamp: 3; }
  .news-row-excerpt { display: none; }
  .news-row-img { aspect-ratio: 1; }

  /* Article */
  .art-title { font-size: 26px; line-height: 1.15; }
  .art-deck { font-size: 16px; }
  .art-body p { font-size: 16px; line-height: 1.7; }
  .art-body p:first-of-type::first-letter { font-size: 48px; }
  .art-body h2 { font-size: 20px; }
  .art-body h3 { font-size: 17px; }
  .art-body blockquote { font-size: 18px; padding: 18px 20px; }
  .art-meta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .art-share { margin-left: 0; }
  .art-chart-embed { padding: 18px; margin: 24px 0; }
  .art-chart-embed .chart-hd { flex-direction: column; align-items: flex-start; gap: 10px; }
  .art-chart-embed .chart-value { font-size: 18px; }

  /* Markets dashboard */
  .market-grid { grid-template-columns: repeat(2, 1fr); }
  .mkt-table-full { font-size: 12px; }
  .mkt-table-full thead th { padding: 10px 12px; font-size: 9.5px; }
  .mkt-table-full tbody td { padding: 10px 12px; }
  .mkt-row-name span:last-child { display: none; }
  .mkt-spark-cell { display: none; }
  .markets-hero { padding: 24px 0; }
  .markets-hero h1 { font-size: 24px; }

  /* Footer */
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .footer-top { padding: 36px 0 24px; }
  .footer-bottom .wrap { font-size: 11px; gap: 6px; }

  /* Section spacing */
  .section-band, .pulse-band, .briefing-band, .voices-band, .news-section { margin-bottom: 32px; }
  .section-band-hd h2 { font-size: 22px; }
}

/* ── 480px — phone portrait ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --header-h: 52px; }
  .wrap { padding-inline: 14px; }

  /* Header */
  .logo-name { font-size: 16px; }
  .logo-mark { width: 32px; height: 32px; }
  .header-inner { gap: 8px; }
  .icon-btn { width: 34px; height: 34px; }

  /* Front page */
  .front-page { margin: 12px 0 24px; padding-bottom: 20px; }
  .front-page-eyebrow .right { display: none; }
  .fp-lead h1 { font-size: 22px; letter-spacing: -.025em; }
  .fp-lead .fp-cat { font-size: 10px; }
  .fp-lead .fp-deck { font-size: 14px; line-height: 1.5; }
  .fp-lead .fp-byline { font-size: 10.5px; gap: 4px 8px; }
  .fp-lead .fp-byline > span:nth-child(n+3) { display: none; }
  .fp-mid h2 { font-size: 18px; }

  /* Markets pulse */
  .pulse-hd h2 { font-size: 12px; letter-spacing: .06em; }
  .pulse-hd .live-tag { font-size: 9px; padding: 2px 6px; }
  .heatmap { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .heatmap-cell { padding: 7px 8px 6px; }
  .heatmap-cell .hm-pct { font-size: 10.5px; }
  .heatmap-cell .hm-name { font-size: 8.5px; letter-spacing: 0; }
  .heatmap-cell.lg { padding: 11px; }
  .heatmap-cell.lg .hm-pct { font-size: 16px; }
  .heatmap-cell.lg .hm-name { font-size: 10px; }
  .heatmap-cell.lg .hm-sub { font-size: 9px; }
  .pulse-index-name { font-size: 10.5px; }

  /* Briefing */
  .briefing-band { gap: 28px; }
  .briefing-hd h2 { font-size: 22px; }
  .briefing-item { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px 0; }
  .briefing-num { font-size: 28px; }
  .briefing-body h3 { font-size: 16px; line-height: 1.25; }
  .briefing-body p { font-size: 12.5px; line-height: 1.5; }
  .briefing-body .meta { font-size: 10.5px; gap: 8px; flex-wrap: wrap; }
  .numbers-figure { font-size: 22px; }

  /* Banking */
  .banking-feature h3 { font-size: 19px; }
  .banking-row { grid-template-columns: 1fr 72px; }
  .banking-row .br-text h4 { font-size: 14px; }
  .banking-feature .bf-image { aspect-ratio: 4/3; }

  /* Newsletter */
  .newsletter-band { padding: 28px 0; }
  .newsletter-band h2 { font-size: 22px; line-height: 1.2; }
  .newsletter-band p { font-size: 13px; }
  .newsletter-band .nb-stats { gap: 14px 22px; }
  .newsletter-band .nb-stat .num { font-size: 22px; }
  .newsletter-band .nb-stat .lbl { font-size: 9.5px; }
  .newsletter-band .nb-form { padding: 18px 16px; border-radius: var(--r-sm); }
  .newsletter-band .nb-select { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .newsletter-band .nb-option { font-size: 10px; padding: 7px 4px; }

  /* Card strip */
  .card-strip { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }

  /* News rows */
  .news-row { grid-template-columns: 80px 1fr; gap: 10px; padding: 12px 0; }
  .news-row-img { aspect-ratio: 1; border-radius: var(--r-xs); }
  .news-row-title { font-size: 14px; }
  .news-row-body .meta { font-size: 10.5px; gap: 6px 10px; }

  /* Article */
  .art-head { padding: 16px 0 0; }
  .art-title { font-size: 22px; line-height: 1.15; }
  .art-deck { font-size: 15px; line-height: 1.5; }
  .art-body p { font-size: 15px; line-height: 1.65; }
  .art-body p:first-of-type::first-letter { font-size: 40px; margin: 4px 6px 0 0; }
  .art-body h2 { font-size: 18px; margin: 28px 0 12px; }
  .art-body h3 { font-size: 16px; margin: 22px 0 10px; }
  .art-body blockquote { font-size: 16px; padding: 14px 16px; margin: 20px 0; }
  .art-chart-embed { padding: 14px; }
  .art-chart-embed .chart-title { font-size: 14px; }
  .art-table { font-size: 11.5px; }
  .art-table th, .art-table td { padding: 8px 10px; }
  .pull-quote { font-size: 19px; margin: 24px 0; }
  .author-box { padding: 18px; gap: 14px; }
  .author-box-avatar { width: 52px; height: 52px; font-size: 18px; }
  .post-nav { grid-template-columns: 1fr; gap: 1px; }
  .post-nav-next a { align-items: flex-start; }

  /* Markets */
  .market-grid { grid-template-columns: 1fr; }
  .markets-hero { padding: 20px 0; }
  .markets-hero h1 { font-size: 22px; }
  .markets-hero p { font-size: 13px; }
  .markets-table-hd { padding: 12px 14px; }
  .markets-tabs { width: 100%; overflow-x: auto; }
  .mkt-table-full thead th, .mkt-table-full tbody td { padding: 9px 10px; }
  .mkt-row-name { font-size: 12.5px; }
  .markets-main { gap: 24px; }

  /* Native ad card stacks */
  .native-ad-card {
    grid-template-columns: 1fr; gap: 16px;
    padding: 18px 20px;
  }
  .native-ad-card .sponsor-graphic { aspect-ratio: 16/9; }
  .native-ad-card h3 { font-size: 18px; }

  /* Index stories */
  .idx-cell { flex: 0 0 84%; min-height: 200px; padding: 16px 14px 14px; }
  .idx-cell .idx-value { font-size: 18px; }

  /* Footer */
  .footer-top { padding: 28px 0 20px; }
  .footer-logo-block img { height: 32px; }
  .footer-bottom { padding: 14px 0; }
  .footer-bottom .wrap { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Voices card */
  .voice-card h4 { font-size: 14px; }

  /* Section heads */
  .section-band-hd h2 { font-size: 20px; }
  .section-band-hd .tagline { font-size: 12px; }
}

/* ── Larger displays — keep generous gutters ──────────────────────── */
@media (min-width: 1480px) {
  :root { --max-w: 1320px; }
}

/* ══════════════════════════════════════════════════════════════════════
   STOCK PANELS — markets-pulse Analyse buttons
   ══════════════════════════════════════════════════════════════════════ */
.pulse-stocks { padding: 24px 28px 28px; border-top: 1px solid var(--border); }
.pulse-stocks-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pulse-stocks-hd h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.pulse-see-all { font-size: 12px; color: var(--amber); text-decoration: none; font-weight: 600; }
.pulse-see-all:hover { text-decoration: underline; }
.pulse-stock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pulse-stock-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s; }
.pulse-stock-card:hover { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.pulse-stock-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pulse-stock-ticker { display: block; font-size: 13px; font-weight: 800; color: var(--fg); font-family: var(--mono); }
.pulse-stock-name { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pulse-stock-sector { font-size: 10px; color: var(--muted); background: var(--bg); padding: 2px 7px; border-radius: 99px; white-space: nowrap; flex-shrink: 0; }
.pulse-stock-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pulse-stock-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pulse-stock-chg { font-size: 12px; font-weight: 600; }
.pulse-stock-chg.up { color: var(--green); }
.pulse-stock-chg.down { color: var(--red); }
.btn-analyse { font-size: 11px; font-weight: 700; padding: 5px 12px; background: var(--amber); color: var(--navy); border-radius: var(--r-sm); text-decoration: none; white-space: nowrap; transition: opacity .15s; letter-spacing: .03em; }
.btn-analyse:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════════════════
   STOCK ANALYSIS PAGE (.sa-*)
   ══════════════════════════════════════════════════════════════════════ */
.sa-page { padding: 28px 0 60px; }

/* Hero */
.sa-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sa-ticker-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; font-family: var(--mono); color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); padding: 4px 12px; border-radius: 99px; letter-spacing: .04em; }
.sa-exchange { font-size: 10px; color: var(--muted); font-weight: 600; }
.sa-company { font-size: 28px; font-weight: 900; margin: 8px 0 6px; line-height: 1.1; }
.sa-sector-tag { font-size: 12px; color: var(--muted); }
.sa-hero-right { text-align: right; }
.sa-price { font-size: 36px; font-weight: 900; font-variant-numeric: tabular-nums; display: block; }
.sa-change { font-size: 16px; font-weight: 700; display: block; margin-top: 4px; }
.sa-hero-meta { display: flex; gap: 20px; margin-top: 12px; font-size: 13px; color: var(--muted); justify-content: flex-end; flex-wrap: wrap; }
.sa-hero-meta strong { color: var(--fg); }
.sa-up { color: var(--green); }
.sa-dn { color: var(--red); }

/* Tabs */
.sa-tabs { display: flex; gap: 4px; margin: 20px 0; background: var(--surface); padding: 4px; border-radius: var(--r-sm); width: fit-content; }
.sa-tab { font-size: 12px; font-weight: 700; padding: 6px 14px; border: none; background: none; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; transition: background .15s, color .15s; letter-spacing: .04em; }
.sa-tab.active, .sa-tab:hover { background: var(--amber); color: var(--navy); }

/* Charts row */
.sa-charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.sa-chart-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.sa-chart-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sa-chart-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.sa-return { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.sa-return.sa-up { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.sa-return.sa-dn { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.sa-canvas { width: 100% !important; height: 180px !important; display: block; background: var(--bg); border-radius: var(--r-sm); }
.sa-chart-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.sa-leg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Data row */
.sa-data-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.sa-ohlcv-card, .sa-metrics-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; }
.sa-card-hd { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.sa-ohlcv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.sa-ohlcv-item { display: flex; flex-direction: column; gap: 2px; }
.sa-ohlcv-item span { font-size: 11px; color: var(--muted); }
.sa-ohlcv-item strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.sa-metric { display: flex; flex-direction: column; gap: 2px; }
.sa-metric span { font-size: 11px; color: var(--muted); }
.sa-metric strong { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Technical row */
.sa-technical-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.sa-tech-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; }

/* Support & Resistance */
.sa-pivot-tabs { display: flex; gap: 4px; }
.sa-pivot-tabs button { font-size: 10px; padding: 3px 8px; border: 1px solid var(--border); background: none; color: var(--muted); border-radius: 99px; cursor: pointer; }
.sa-pivot-tabs button.active, .sa-pivot-tabs button:hover { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.sa-sr-ladder { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sa-sr-row { display: grid; grid-template-columns: 28px 1fr 70px 50px; align-items: center; gap: 8px; font-size: 12px; }
.sa-sr-label { font-weight: 700; font-family: var(--mono); }
.sa-sr-res .sa-sr-label { color: var(--red); }
.sa-sr-sup .sa-sr-label { color: var(--green); }
.sa-sr-cmp .sa-sr-label { color: var(--amber); font-size: 11px; }
.sa-sr-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.sa-sr-bar span { display: block; height: 100%; border-radius: 2px; }
.sa-sr-res .sa-sr-bar span { background: var(--red); }
.sa-sr-sup .sa-sr-bar span { background: var(--green); }
.sa-sr-cmp-bar span { background: var(--amber); }
.sa-sr-val { font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: right; }
.sa-sr-strength { font-size: 10px; color: var(--muted); }

/* Moving averages */
.sa-ma-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sa-ma-row { display: grid; grid-template-columns: 70px 70px 50px 1fr; align-items: center; gap: 8px; font-size: 12px; }
.sa-ma-name { font-weight: 600; font-family: var(--mono); }
.sa-ma-val { font-family: var(--mono); color: var(--muted); }
.sa-ma-pos { font-size: 10px; font-weight: 700; }
.sa-ma-summary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }
.sa-bull-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.sa-bull-bar div { height: 100%; background: var(--green); border-radius: 3px; }

/* Signal badges */
.sa-signal-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sa-signal-badge.bullish, .sa-signal-badge.buy, .sa-signal-badge.strong-buy { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.sa-signal-badge.bearish, .sa-signal-badge.sell, .sa-signal-badge.strong-sell { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.sa-signal-badge.neutral, .sa-signal-badge.hold, .sa-signal-badge.mixed { background: color-mix(in srgb, #94A3B8 18%, transparent); color: #94A3B8; }
.sa-signal-badge.overbought { background: color-mix(in srgb, #F59E0B 18%, transparent); color: #F59E0B; }
.sa-signal-badge.trending { background: color-mix(in srgb, #6366F1 18%, transparent); color: #6366F1; }
.sa-signal-badge.large { font-size: 13px; padding: 5px 16px; }

/* Momentum */
.sa-momentum-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sa-ind-row { display: grid; grid-template-columns: 90px 60px 1fr; align-items: center; gap: 8px; font-size: 12px; }
.sa-ind-name { font-weight: 600; }
.sa-ind-val { font-family: var(--mono); color: var(--muted); }
.sa-momentum-verdict { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.sa-verdict-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* Alerts */
.sa-alerts-row { display: flex; gap: 12px; margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-alert-card { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; min-width: 220px; flex: 1; }
.sa-alert-breakout { border-left: 3px solid var(--green); }
.sa-alert-pattern  { border-left: 3px solid #F59E0B; }
.sa-alert-volume   { border-left: 3px solid #6366F1; }
.sa-alert-icon { font-size: 20px; flex-shrink: 0; }
.sa-alert-title { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.sa-alert-desc { font-size: 13px; font-weight: 500; margin-top: 3px; line-height: 1.4; }

/* Verdict box */
.sa-verdict-box { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--amber); border-radius: var(--r-md); padding: 24px 28px; margin: 24px 0; }
.sa-verdict-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.sa-verdict-brand { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.sa-verdict-body { display: flex; flex-direction: column; gap: 18px; }
.sa-verdict-metrics { display: flex; gap: 32px; flex-wrap: wrap; }
.sa-verdict-metric { display: flex; flex-direction: column; gap: 4px; }
.sa-verdict-metric span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sa-verdict-metric strong { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sa-verdict-metric em { font-size: 12px; color: var(--muted); font-style: normal; }
.sa-verdict-quote { font-size: 15px; line-height: 1.6; color: var(--fg); border-left: 2px solid var(--border); padding-left: 16px; margin: 0; font-style: italic; }
.sa-verdict-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sa-btn-primary { background: var(--amber); color: var(--navy); font-weight: 700; padding: 10px 22px; border-radius: var(--r-sm); text-decoration: none; font-size: 14px; transition: opacity .15s; }
.sa-btn-primary:hover { opacity: .85; }
.sa-btn-outline { background: none; color: var(--fg); font-weight: 600; padding: 10px 22px; border-radius: var(--r-sm); text-decoration: none; font-size: 14px; border: 1px solid var(--border); transition: border-color .15s; }
.sa-btn-outline:hover { border-color: var(--amber); }

/* News section */
.sa-news-section { margin: 32px 0; }
.sa-news-hd { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.sa-news-scroll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sa-news-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color .15s; }
.sa-news-card:hover { border-color: var(--amber); }
.sa-news-img img { width: 100%; height: 140px; object-fit: cover; display: block; }
.sa-news-body { padding: 14px 16px; }
.sa-news-cat { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.sa-news-body h3 { font-size: 14px; font-weight: 700; line-height: 1.35; margin: 6px 0 10px; }
.sa-news-body h3 a { color: var(--fg); text-decoration: none; }
.sa-news-body h3 a:hover { color: var(--amber); }
.sa-news-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.sa-sentiment-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 99px; letter-spacing: .04em; }
.sa-sentiment-badge.positive { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.sa-sentiment-badge.negative { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.sa-sentiment-badge.neutral  { background: color-mix(in srgb, #94A3B8 15%, transparent); color: #94A3B8; }

/* ── Responsive: Stock Analysis ───────────────────────────────────── */
@media (max-width: 1100px) {
  .pulse-stock-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sa-charts-row, .sa-technical-row { grid-template-columns: 1fr 1fr; }
  .sa-news-scroll { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sa-hero { flex-direction: column; gap: 16px; }
  .sa-hero-right { text-align: left; }
  .sa-hero-meta { justify-content: flex-start; }
  .sa-price { font-size: 28px; }
  .sa-charts-row, .sa-technical-row, .sa-data-row { grid-template-columns: 1fr; }
  .sa-news-scroll { grid-template-columns: 1fr; }
  .pulse-stock-grid { grid-template-columns: 1fr 1fr; }
  .sa-verdict-metrics { gap: 20px; }
  .sa-verdict-metric strong { font-size: 18px; }
}
@media (max-width: 480px) {
  .pulse-stock-grid { grid-template-columns: 1fr; }
  .sa-tabs { overflow-x: auto; width: 100%; }
  .sa-ma-row { grid-template-columns: 60px 60px 45px 1fr; }
  .sa-ind-row { grid-template-columns: 80px 55px 1fr; }
}