/* ═══════════════════════════════════════════════════════════════════════
 * MIDAN DESIGN SYSTEM — locked v1.0 (2026-06-28)
 *
 * This file is the single source of truth for tokens + components.
 * DO NOT MODIFY without operator approval. Pre-commit hook blocks edits
 * unless DESIGN_BIBLE.md is updated in the same commit.
 *
 * Read DESIGN_BIBLE.md before touching this file.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fonts (system stack — no CDN, no font flash) ───────────────────── */
  --font-display: 'SF Pro Display', system-ui, -apple-system, 'Segoe UI',
    'Heebo', 'Assistant', 'Arial Hebrew', Arial, sans-serif;
  --font-body: 'SF Pro Text', system-ui, -apple-system, 'Segoe UI',
    'Heebo', 'Assistant', 'Arial Hebrew', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono',
    Consolas, monospace;

  /* ── Color palette (the only colors allowed on the site) ───────────── */
  --color-bg: #ffffff;
  --color-bg-soft: #fafafa;
  --color-bg-banner: #f4f4f4;
  --color-bg-inverse: #0b0b0b;
  --color-text: #0b0b0b;
  --color-text-secondary: #4a4a4a;
  --color-text-tertiary: #8a8a8a;
  --color-text-inverse: #ffffff;
  --color-accent: #1456f0;
  --color-accent-hover: #0e3fc4;
  --color-accent-soft: #eaf0ff;
  --color-border: #e5e5e5;
  --color-border-strong: #c0c0c0;
  --color-up: #1a7c3a;
  --color-down: #c5222a;
  --color-warn-bg: #fff3cd;
  --color-warn-text: #856404;
  --color-disclosure-bg: #fff8e7;
  --color-disclosure-text: #8a5d0d;
  --color-disclosure-border: #e6c97b;

  /* ── Spacing (8pt scale) ────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Type scale ─────────────────────────────────────────────────────── */
  --type-xs: 11px;
  --type-sm: 13px;
  --type-base: 15px;
  --type-md: 17px;
  --type-lg: 20px;
  --type-xl: 24px;
  --type-2xl: 30px;
  --type-3xl: 40px;
  --type-4xl: 56px;
  --type-lead: clamp(28px, 3.4vw, 44px);
  --type-hero-headline: clamp(34px, 4.5vw, 56px);

  /* ── Line heights ───────────────────────────────────────────────────── */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --max-width: 1320px;
  --gutter: clamp(16px, 3vw, 28px);
  --nav-height: 56px;
}

/* ── BASE ──────────────────────────────────────────────────────────────── */
body {
  direction: rtl;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.wrap { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
a { color: inherit; text-decoration: none; }
a.text-link { color: var(--color-accent); }
a.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
hr.rule { border: 0; border-top: 1px solid var(--color-border); margin: 0; }
.num { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.is-hidden { display: none; }

/* ── BREAKING BAR ──────────────────────────────────────────────────────── */
.breaking-bar { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.breaking-inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); overflow: hidden; }
.breaking-chip { background: var(--color-down); color: var(--color-text-inverse); font-family: var(--font-display); font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.16em; padding: 3px var(--space-2); flex-shrink: 0; }
.breaking-stream { display: flex; gap: var(--space-6); flex: 1; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.breaking-stream::-webkit-scrollbar { display: none; }
.breaking-stream a { color: var(--color-text-inverse); font-size: var(--type-sm); font-weight: 500; flex-shrink: 0; }
.breaking-stream a + a::before { content: '·'; color: var(--color-text-tertiary); margin-inline-end: var(--space-6); }
.breaking-stream a:hover { color: var(--color-down); }

/* ── MARKETS BAR ───────────────────────────────────────────────────────── */
.markets-bar { background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--type-xs); overflow-x: auto; }
.markets-inner { display: flex; gap: var(--space-5); padding-block: var(--space-2); align-items: center; white-space: nowrap; }
.mkt-live { display: flex; align-items: center; gap: var(--space-1); color: var(--color-text); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; }
.mkt-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-down); display: inline-block; }
.mkt-tick { display: flex; align-items: baseline; gap: var(--space-2); flex-shrink: 0; }
.mkt-tick .sym { font-weight: 700; color: var(--color-text); }
.mkt-tick .val { color: var(--color-text-secondary); }
.mkt-tick .chg.up { color: var(--color-up); }
.mkt-tick .chg.down { color: var(--color-down); }

/* ── MASTHEAD ──────────────────────────────────────────────────────────── */
.masthead { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.masthead-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); padding-block: var(--space-5); }
.masthead-right { display: flex; align-items: center; gap: var(--space-4); justify-content: flex-start; }
.masthead-left { display: flex; align-items: center; gap: var(--space-4); justify-content: flex-end; }
.dateline { margin: 0; font-size: var(--type-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); font-feature-settings: 'tnum'; }
.search-trigger { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); background: var(--color-bg); font-size: var(--type-xs); color: var(--color-text-secondary); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
.search-trigger:hover { border-color: var(--color-text); color: var(--color-text); }
.wordmark { font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 56px); font-weight: 900; letter-spacing: -0.025em; line-height: 1; margin: 0; text-align: center; }
.wordmark .dot { color: var(--color-down); margin-inline: 4px; font-weight: 400; }
.wordmark .lat { font-size: 0.45em; font-weight: 700; color: var(--color-text-secondary); margin-inline-start: var(--space-2); letter-spacing: 0; }
.tagline { text-align: center; margin: var(--space-2) 0 0; font-size: var(--type-xs); color: var(--color-text-tertiary); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
@media (max-width: 720px) {
  .masthead-inner { grid-template-columns: 1fr; text-align: center; }
  .masthead-left, .masthead-right { justify-content: center; }
}

/* ── PRIMARY NAV ───────────────────────────────────────────────────────── */
.nav { border-bottom: 2px solid var(--color-text); background: var(--color-bg); position: sticky; top: 0; z-index: 10; }
.nav-inner { display: flex; gap: var(--space-6); padding-block: var(--space-3); align-items: center; overflow-x: auto; scrollbar-width: none; }
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a { font-family: var(--font-display); font-size: var(--type-md); font-weight: 600; color: var(--color-text); padding-block: var(--space-2); flex-shrink: 0; position: relative; }
.nav-inner a.is-current::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -10px; height: 2px; background: var(--color-down); }
.nav-inner a:hover { color: var(--color-accent); }
.nav-inner .nav-rule { width: 1px; align-self: stretch; background: var(--color-border); margin-inline: var(--space-1); }

/* ── EYEBROW / KICKER ──────────────────────────────────────────────────── */
.eyebrow { display: inline-block; font-family: var(--font-display); font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.18em; color: var(--color-text); padding-bottom: var(--space-1); border-bottom: 1px solid currentColor; margin-bottom: var(--space-3); text-transform: uppercase; }
.eyebrow.is-investigation { color: var(--color-down); }
.eyebrow.is-recommend { color: var(--color-text); border-bottom-style: dashed; }

/* ── SECTION HEAD ──────────────────────────────────────────────────────── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6) var(--space-4); border-top: 2px solid var(--color-text); margin-top: var(--space-7); }
.section-head-left { display: flex; align-items: baseline; gap: var(--space-4); }
.section-head h2 { font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.section-head .section-meta { font-size: var(--type-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); font-feature-settings: 'tnum'; }
.section-head .section-more { font-size: var(--type-sm); color: var(--color-accent); font-weight: 600; }
.section-head .section-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── HERO ROW (asymmetric, full bleed photo) ───────────────────────────── */
.hero-section { padding-block: var(--space-7) var(--space-6); }
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr 0.85fr; gap: var(--space-6); }
@media (max-width: 1100px) { .hero-grid { grid-template-columns: 1.5fr 1fr; } .hero-mini { display: none; } }
@media (max-width: 800px)  { .hero-grid { grid-template-columns: 1fr; } }
.hero-lead { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-lead-photo { position: relative; aspect-ratio: 16 / 9; background: var(--color-bg-soft); overflow: hidden; background-image: linear-gradient(180deg, rgba(11,11,11,0) 30%, rgba(11,11,11,0.85) 100%), linear-gradient(135deg, #0a1525 0%, #1e3060 50%, #4a6db0 100%); }
.hero-lead-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); color: var(--color-text-inverse); }
.hero-lead-overlay .eyebrow { color: var(--color-text-inverse); margin-bottom: var(--space-3); }
.hero-lead-overlay h1 { font-family: var(--font-display); font-size: var(--type-hero-headline); font-weight: 900; letter-spacing: -0.02em; line-height: var(--lh-tight); margin: 0; color: var(--color-text-inverse); text-wrap: balance; max-width: 22ch; }
.hero-lead-overlay .hero-credit { margin: var(--space-3) 0 0; font-size: var(--type-xs); color: rgba(255,255,255,0.6); letter-spacing: 0.08em; }
.hero-lead-dek { font-size: var(--type-lg); line-height: var(--lh-relaxed); color: var(--color-text-secondary); margin: 0; max-width: 60ch; }
.hero-lead-meta { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--type-xs); letter-spacing: 0.08em; color: var(--color-text-tertiary); text-transform: uppercase; font-feature-settings: 'tnum'; flex-wrap: wrap; }
.hero-lead-meta .author { color: var(--color-text); font-weight: 700; }
.hero-lead-meta .live { color: var(--color-down); font-weight: 700; }

/* ── HERO SECONDARIES ──────────────────────────────────────────────────── */
.hero-secondaries { display: flex; flex-direction: column; gap: var(--space-5); }
.hero-sec { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-sec + .hero-sec { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.hero-sec-photo { aspect-ratio: 3 / 2; background-image: linear-gradient(135deg, #3a2a4a, #6a4a7c); }
.hero-sec:nth-child(2) .hero-sec-photo { background-image: linear-gradient(135deg, #2a4a3a, #5a8c6e); }
.hero-sec h3 { font-family: var(--font-display); font-size: var(--type-xl); font-weight: 700; letter-spacing: -0.005em; line-height: var(--lh-snug); margin: 0; text-wrap: balance; }
.hero-sec p { font-size: var(--type-base); color: var(--color-text-secondary); line-height: var(--lh-relaxed); margin: 0; }
.hero-sec .meta { font-size: var(--type-xs); letter-spacing: 0.08em; color: var(--color-text-tertiary); text-transform: uppercase; font-feature-settings: 'tnum'; }

/* ── HERO MINI-FEED ────────────────────────────────────────────────────── */
.hero-mini { display: flex; flex-direction: column; border-top: 2px solid var(--color-text); padding-top: var(--space-3); }
.hero-mini-head { font-family: var(--font-display); font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text); margin: 0 0 var(--space-3); }
.hero-mini-list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
.hero-mini-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.hero-mini-list li:last-child { border-bottom: 0; }
.hero-mini-list .stamp { display: block; font-size: var(--type-xs); color: var(--color-text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-1); font-feature-settings: 'tnum'; }
.hero-mini-list a { font-family: var(--font-display); font-size: var(--type-sm); font-weight: 600; line-height: var(--lh-snug); color: var(--color-text); }
.hero-mini-list a:hover { color: var(--color-accent); }

/* ── 4-UP CARD STRIP ───────────────────────────────────────────────────── */
.card-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding-block: var(--space-4) var(--space-6); }
@media (max-width: 1000px) { .card-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .card-strip { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; gap: var(--space-3); }
.card-photo { aspect-ratio: 4 / 3; background: var(--color-bg-soft); background-image: linear-gradient(135deg, #2a3a4a, #5a7a9a); }
.card-eyebrow { font-family: var(--font-display); font-size: var(--type-xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--color-text); }
.card-eyebrow.is-down { color: var(--color-down); }
.card-eyebrow.is-up { color: var(--color-up); }
.card h3 { font-family: var(--font-display); font-size: var(--type-md); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.005em; margin: 0; text-wrap: balance; }
.card .meta { font-size: var(--type-xs); letter-spacing: 0.08em; color: var(--color-text-tertiary); text-transform: uppercase; margin-top: var(--space-1); font-feature-settings: 'tnum'; }

/* ── INVESTIGATIONS BAND (inverse) ────────────────────────────────────── */
.invest-band { background: var(--color-bg-inverse); color: var(--color-text-inverse); padding-block: var(--space-7); margin-block: var(--space-7); }
.invest-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.18); }
.invest-head h2 { font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 800; margin: 0; color: var(--color-text-inverse); }
.invest-head .more { font-size: var(--type-sm); color: rgba(255,255,255,0.6); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.invest-head .more:hover { color: var(--color-text-inverse); }
.invest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .invest-grid { grid-template-columns: 1fr; } }
.invest-card { display: flex; flex-direction: column; gap: var(--space-3); }
.invest-card .eyebrow { color: var(--color-down); border-bottom-color: var(--color-down); }
.invest-card h3 { font-family: var(--font-display); font-size: var(--type-lg); font-weight: 700; line-height: var(--lh-snug); color: var(--color-text-inverse); margin: 0; text-wrap: balance; }
.invest-card p { font-size: var(--type-sm); color: rgba(255,255,255,0.7); line-height: var(--lh-relaxed); margin: 0; }

/* ── RECOMMEND STRIP (double rules) ────────────────────────────────────── */
.recommend { border-top: 4px double var(--color-text); border-bottom: 4px double var(--color-text); padding-block: var(--space-7); margin-block: var(--space-7); }
.recommend-head { text-align: center; margin-bottom: var(--space-6); }
.recommend-head .label { display: inline-block; font-family: var(--font-display); font-size: var(--type-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-3); }
.recommend-head h2 { font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.recommend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
@media (max-width: 900px) { .recommend-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.recommend-item { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.recommend-item .qmark { font-family: var(--font-display); font-size: var(--type-3xl); color: var(--color-text-tertiary); line-height: 0.5; font-weight: 900; }
.recommend-item blockquote { font-family: var(--font-display); font-size: var(--type-lg); line-height: var(--lh-snug); font-weight: 600; margin: 0; color: var(--color-text); text-wrap: balance; }
.recommend-item cite { font-size: var(--type-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); font-style: normal; }

/* ── ARTICLE STREAM (image-right cards) ────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-7); padding-block: var(--space-4) var(--space-7); }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }
.stream-card { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); align-items: start; }
.stream-card:first-child { padding-block-start: 0; }
.stream-card:last-child { border-bottom: 0; }
@media (max-width: 560px) { .stream-card { grid-template-columns: 1fr; } .stream-card .stream-photo { order: -1; aspect-ratio: 16 / 9; } }
.stream-photo { aspect-ratio: 4 / 3; }
.stream-card h3 { font-family: var(--font-display); font-size: var(--type-xl); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.005em; margin: 0; text-wrap: balance; }
.stream-card p { font-size: var(--type-base); line-height: var(--lh-relaxed); color: var(--color-text-secondary); margin: var(--space-2) 0 0; }
.stream-card .meta { font-size: var(--type-xs); color: var(--color-text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--space-2); font-feature-settings: 'tnum'; }

/* ── MOST READ LIST ────────────────────────────────────────────────────── */
.most-read { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--color-text); }
.most-read-head { font-family: var(--font-display); font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: var(--space-3) 0 var(--space-4); }
.most-read li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--color-border); align-items: baseline; }
.most-read li:first-child { border-top: 0; }
.most-read .rank { font-family: var(--font-display); font-size: var(--type-xl); font-weight: 800; color: var(--color-text-tertiary); line-height: 1; font-feature-settings: 'tnum'; }
.most-read a { font-family: var(--font-display); font-size: var(--type-sm); font-weight: 600; line-height: var(--lh-snug); color: var(--color-text); }
.most-read a:hover { color: var(--color-accent); }

/* ── NEWSLETTER STRIP ──────────────────────────────────────────────────── */
.newsletter { background: var(--color-bg-banner); padding-block: var(--space-7); margin-block: var(--space-7) 0; }
.newsletter-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 800px) { .newsletter-inner { grid-template-columns: 1fr; } }
.newsletter h3 { font-family: var(--font-display); font-size: var(--type-xl); font-weight: 800; margin: 0 0 var(--space-2); }
.newsletter p { font-size: var(--type-base); color: var(--color-text-secondary); margin: 0; max-width: 50ch; }
.newsletter-form { display: flex; gap: var(--space-2); }
.newsletter-form input { flex: 1; padding: var(--space-3); border: 1px solid var(--color-border-strong); font-family: inherit; font-size: var(--type-base); background: var(--color-bg); color: var(--color-text); }
.newsletter-form button { padding: var(--space-3) var(--space-5); background: var(--color-text); color: var(--color-text-inverse); font-family: var(--font-display); font-size: var(--type-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 0; cursor: pointer; }
.newsletter-form button:hover { background: var(--color-accent); }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-bg-inverse); color: rgba(255,255,255,0.7); padding-block: var(--space-7) var(--space-5); }
.footer-inner { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-brand .wordmark { text-align: start; color: var(--color-text-inverse); }
.footer-brand p { color: rgba(255,255,255,0.5); font-size: var(--type-sm); max-width: 32ch; margin-top: var(--space-3); }
.footer-col h4 { font-family: var(--font-display); font-size: var(--type-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-inverse); margin: 0 0 var(--space-3); font-weight: 700; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding-block: var(--space-1); }
.footer-col a { color: rgba(255,255,255,0.6); font-size: var(--type-sm); }
.footer-col a:hover { color: var(--color-text-inverse); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-7); padding-top: var(--space-4); font-size: var(--type-xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }

/* ── CONSUMER-PAGE COMPONENTS ──────────────────────────────────────────── */
.sub-nav { background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); }
.sub-nav-inner { display: flex; gap: var(--space-5); padding-block: var(--space-3); align-items: center; overflow-x: auto; }
.sub-nav-label { font-family: var(--font-display); font-size: var(--type-xs); font-weight: 700; color: var(--color-text-tertiary); letter-spacing: 0.16em; text-transform: uppercase; flex-shrink: 0; }
.sub-nav-link { font-size: var(--type-sm); color: var(--color-text-secondary); font-weight: 500; flex-shrink: 0; }
.sub-nav-link:hover { color: var(--color-text); }
.sub-nav-link.is-current { color: var(--color-text); font-weight: 700; }

.page-header { padding-block: var(--space-7) var(--space-6); border-bottom: 1px solid var(--color-border); }
.page-header h1 { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: var(--lh-tight); text-wrap: balance; }
.page-header .lede { margin: var(--space-3) 0 0; font-size: var(--type-lg); color: var(--color-text-secondary); line-height: var(--lh-relaxed); max-width: 70ch; }
.page-header .stamps { display: flex; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.page-header .stamp { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--type-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); font-feature-settings: 'tnum'; }
.page-header .stamp b { color: var(--color-text); font-weight: 700; }

.verdict { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 0; border: 1px solid var(--color-border); margin-block: var(--space-6); }
@media (max-width: 900px) { .verdict { grid-template-columns: 1fr; } }
.verdict-cell { padding: var(--space-6) var(--space-5); border-inline-end: 1px solid var(--color-border); }
.verdict-cell:last-child { border-inline-end: 0; }
@media (max-width: 900px) { .verdict-cell { border-inline-end: 0; border-block-end: 1px solid var(--color-border); } .verdict-cell:last-child { border-block-end: 0; } }
.verdict-cell .label { font-family: var(--font-display); font-size: var(--type-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-tertiary); font-weight: 700; margin-bottom: var(--space-3); }
.verdict-cell.main { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.verdict-cell.main .label { color: rgba(255,255,255,0.6); }
.verdict-cell .answer { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.015em; line-height: var(--lh-tight); margin: 0 0 var(--space-3); }
.verdict-cell.main .answer { color: var(--color-text-inverse); }
.verdict-cell .answer .badge { display: inline-block; background: var(--color-up); color: var(--color-text-inverse); font-size: 0.6em; padding: 4px 10px; letter-spacing: 0.06em; margin-inline-start: var(--space-2); vertical-align: middle; font-weight: 700; }
.verdict-cell .answer .badge.is-down { background: var(--color-down); }
.verdict-cell .detail { font-size: var(--type-sm); color: var(--color-text-secondary); line-height: var(--lh-relaxed); margin: 0; }
.verdict-cell.main .detail { color: rgba(255,255,255,0.7); }
.verdict-cell .big-num { font-family: var(--font-display); font-size: var(--type-4xl); font-weight: 800; letter-spacing: -0.025em; line-height: 1; font-feature-settings: 'tnum'; margin-bottom: var(--space-2); }
.verdict-cell .big-num.is-up { color: var(--color-up); }
.verdict-cell .big-num.is-down { color: var(--color-down); }
.verdict-cell .sub-num { font-size: var(--type-sm); color: var(--color-text-secondary); }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 1px solid var(--color-border); margin-block: var(--space-6); }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi { padding: var(--space-5); border-inline-end: 1px solid var(--color-border); }
.kpi:last-child { border-inline-end: 0; }
.kpi .label { font-family: var(--font-display); font-size: var(--type-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); font-weight: 600; margin-bottom: var(--space-2); }
.kpi .val { font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 800; letter-spacing: -0.015em; line-height: 1; font-feature-settings: 'tnum'; }
.kpi .val.is-down { color: var(--color-down); }
.kpi .val.is-up { color: var(--color-up); }
.kpi .sub { font-size: var(--type-xs); color: var(--color-text-secondary); margin-top: var(--space-2); }

/* ── SHOP PAGE COMPONENTS ──────────────────────────────────────────────── */
.disclosure { background: var(--color-disclosure-bg); color: var(--color-disclosure-text); border: 1px solid var(--color-disclosure-border); padding: var(--space-4) var(--space-5); margin-block: var(--space-6) var(--space-5); display: flex; align-items: flex-start; gap: var(--space-4); }
.disclosure .icon { flex-shrink: 0; font-family: var(--font-display); font-size: var(--type-md); font-weight: 800; width: 28px; height: 28px; border-radius: 50%; background: var(--color-disclosure-text); color: var(--color-disclosure-bg); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.disclosure-body { flex: 1; }
.disclosure h2 { font-family: var(--font-display); font-size: var(--type-sm); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--space-1); }
.disclosure p { font-size: var(--type-sm); margin: 0; line-height: var(--lh-relaxed); }
.disclosure a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

.deal-row { display: grid; grid-template-columns: 80px 2fr 1fr 1fr 1fr 140px; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); align-items: center; }
@media (max-width: 900px) { .deal-row { grid-template-columns: 64px 1fr; gap: var(--space-3); } .deal-row .col-il, .deal-row .col-abroad, .deal-row .col-saving { display: none; } .deal-row .col-cta { grid-column: 2; justify-self: stretch; } }
.deal-img { aspect-ratio: 1 / 1; background-image: linear-gradient(135deg, #2a3a4a, #5a7a9a); width: 80px; height: 80px; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-text); color: var(--color-text-inverse); font-family: var(--font-display); font-size: var(--type-sm); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; width: 100%; }
.cta-btn::after { content: '↗'; font-family: var(--font-mono); }
.cta-btn:hover { background: var(--color-accent); }

/* ── DETAILS / COLLAPSIBLE (consumer power features) ───────────────────── */
details.tool-collapse { margin-block: var(--space-4); border: 1px solid var(--color-border); background: var(--color-bg); }
details.tool-collapse > summary { cursor: pointer; padding: var(--space-4) var(--space-5); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
details.tool-collapse > summary::-webkit-details-marker { display: none; }
details.tool-collapse > summary .left { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
details.tool-collapse > summary h2 { font-family: var(--font-display); font-size: var(--type-lg); font-weight: 700; margin: 0; letter-spacing: -0.005em; }
details.tool-collapse > summary .stamp { font-size: var(--type-xs); color: var(--color-text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; }
details.tool-collapse > summary::after { content: '+'; font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 300; line-height: 1; color: var(--color-text-tertiary); transition: transform 200ms ease-out; }
details.tool-collapse[open] > summary::after { transform: rotate(45deg); }
details.tool-collapse > .body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════════════
 * v1.1 (2026-06-28) — components added during consumer.html porting
 *
 * Added: img-in-photo fills (closes the "background-image inline style"
 * ambiguity Codex flagged on the tech.html port), pulse-grid + pulse-col
 * + pulse-list, news-grid + news-card, comparator (head / pickers /
 * result / comp-side), pikuach table grid, filter-bar + chip.
 *
 * Note: no token changes (:root unchanged). Color/type/space rules
 * unchanged. Only additive components.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── IMAGE FILL ─ how to put a real <img> inside a *-photo container ─── */
.card-photo > img,
.stream-photo > img,
.hero-lead-photo > img,
.hero-sec-photo > img,
.news-photo > img,
.deal-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── PULSE GRID — two-column up/down movers (consumer.html) ──────────── */
.pulse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-block: var(--space-6);
}
@media (max-width: 800px) { .pulse-grid { grid-template-columns: 1fr; } }

.pulse-col {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.pulse-col h3 {
  font-family: var(--font-display);
  font-size: var(--type-base);
  font-weight: 700;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pulse-col h3 .arrow { font-family: var(--font-mono); font-weight: 700; }
.pulse-col.is-up h3 .arrow { color: var(--color-up); }
.pulse-col.is-down h3 .arrow { color: var(--color-down); }
.pulse-list { padding: 0; margin: 0; list-style: none; }
.pulse-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}
.pulse-list li:last-child { border-bottom: 0; }
.pulse-list .item { font-size: var(--type-sm); font-weight: 600; }
.pulse-list .chain {
  display: block;
  font-size: var(--type-xs);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}
.pulse-list .price-block {
  text-align: end;
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}
.pulse-list .price { font-size: var(--type-sm); font-weight: 700; }
.pulse-list .pct {
  display: block;
  font-size: var(--type-xs);
  margin-top: 2px;
  font-weight: 700;
}
.pulse-list .pct.is-up { color: var(--color-up); }
.pulse-list .pct.is-down { color: var(--color-down); }

/* ── NEWS GRID — 3-up cards (consumer page; can be used elsewhere) ──── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
}
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }
.news-card { display: flex; flex-direction: column; gap: var(--space-3); }
.news-photo {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
}
.news-card h3 {
  font-family: var(--font-display);
  font-size: var(--type-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.news-card p {
  font-size: var(--type-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}
.news-card .meta {
  font-size: var(--type-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: 'tnum';
}

/* ── COMPARATOR — two-side chain comparison ─────────────────────────── */
.comparator {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  margin-block: var(--space-6);
}
.comparator-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.comparator-head h2 {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}
.comparator-head .hint {
  font-size: var(--type-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comparator-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-5);
}
@media (max-width: 700px) { .comparator-pickers { grid-template-columns: 1fr; } }
.picker { display: flex; flex-direction: column; gap: var(--space-2); }
.picker label {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.picker select {
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  font-family: inherit;
  font-size: var(--type-base);
}
.swap-btn {
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: 700;
  cursor: pointer;
  align-self: end;
  height: 48px;
}
@media (max-width: 700px) { .swap-btn { display: none; } }
.comparator-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 700px) { .comparator-result { grid-template-columns: 1fr; } }
.comp-side {
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.comp-side.is-winner {
  border-color: var(--color-up);
  border-width: 2px;
}
.comp-side .chain {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}
.comp-side .chain h3 {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}
.comp-side .chain .badge {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  background: var(--color-up);
  color: var(--color-text-inverse);
  padding: 2px var(--space-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.comp-side .total {
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  font-feature-settings: 'tnum';
  margin-bottom: var(--space-2);
}
.comp-side .total.is-up { color: var(--color-up); }
.comp-side .delta-vs {
  font-size: var(--type-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.comp-side .delta-vs strong.is-down { color: var(--color-down); }
.comp-side .delta-vs strong.is-up { color: var(--color-up); }
.comp-side .lines {
  border-block-start: 1px solid var(--color-border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.comp-side .line {
  display: flex;
  justify-content: space-between;
  font-size: var(--type-sm);
  padding-block: 2px;
}
.comp-side .line .item { color: var(--color-text); }
.comp-side .line .price {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  color: var(--color-text-secondary);
}

/* ── PIKUACH TABLE — regulated-price compliance table ──────────────── */
.pikuach { margin-block: var(--space-6); border: 1px solid var(--color-border); }
.pikuach-head {
  padding: var(--space-5);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pikuach-head h2 {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pikuach-head h2 .gov-badge {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: 3px var(--space-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.pikuach-stale {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
  padding: var(--space-3) var(--space-5);
  font-size: var(--type-sm);
  border-bottom: 1px solid var(--color-warn-text);
}
.pikuach-table {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  width: 100%;
}
@media (max-width: 800px) {
  .pikuach-table { grid-template-columns: 1.5fr 1fr 1fr; }
  .pikuach-cell.col-store, .pikuach-cell.col-fresh { display: none; }
}
.pikuach-th, .pikuach-cell {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--type-sm);
  display: flex;
  align-items: center;
}
.pikuach-th {
  background: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--type-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-tertiary);
}
.pikuach-cell { font-feature-settings: 'tnum'; }
.pikuach-cell.col-name { font-weight: 600; }
.pikuach-cell.col-status {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.pikuach-cell.col-status.is-ok { color: var(--color-up); }
.pikuach-cell.col-status.is-violation { color: var(--color-down); }
.pikuach-cell.col-status.is-needs-verify { color: var(--color-warn-text); }
.pikuach-cell.col-status .marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: var(--space-2);
  background: currentColor;
}
.pikuach-cell.col-delta { font-family: var(--font-mono); }
.pikuach-cell.col-delta.is-down { color: var(--color-down); font-weight: 700; }

/* ── FILTER BAR + CHIPS ────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  flex-wrap: wrap;
}
.filter-label {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 700;
}
.chip {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.chip:hover { color: var(--color-text); }
.chip.is-active {
  background: var(--color-text);
  color: var(--color-text-inverse);
  border-color: var(--color-text);
}
.sort {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sort select {
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  font-family: inherit;
  font-size: var(--type-xs);
  background: var(--color-bg);
}