/* ==========================================================================
   MSL Design Kit — Source of Truth (utility classes, patterns, components)
   Sprint CSS-A · 2026-05-23
   ==========================================================================
   - Inherits tokens from tokens.css. No :root redefinition here.
   - 0 banned tokens. !important budget: ≤10.
   - This is the SoT. patches/overrides legacy files are deprecated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */
html{ direction: rtl; }
body{
  margin: 0;
  background: var(--msl-cream);
  color: var(--msl-ink);
  font-family: var(--msl-font);
  font-size: var(--msl-size-body);
  line-height: var(--msl-lh-normal);
  font-weight: var(--msl-w-reg);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES — the heart of System F
   -------------------------------------------------------------------------- */
/* Headings */
.msl-display{
  font-family: var(--msl-font);
  font-size: var(--msl-size-display);
  font-weight: var(--msl-w-heavy);
  line-height: var(--msl-lh-tight);
  letter-spacing: var(--msl-ls-display);
  color: var(--msl-ink-strong);
  margin: 0;
}
.msl-h1{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h1);
  font-weight: var(--msl-w-heavy);
  line-height: var(--msl-lh-tight);
  letter-spacing: var(--msl-ls-heading);
  color: var(--msl-ink-strong);
  margin: 0;
}
.msl-h1--xl{ font-size: var(--msl-size-h1-xl); }
.msl-h2{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h2);
  font-weight: var(--msl-w-heavy);
  line-height: var(--msl-lh-snug);
  letter-spacing: var(--msl-ls-heading);
  color: var(--msl-ink-strong);
  margin: 0;
}
.msl-h2--xl{ font-size: var(--msl-size-h2-xl); }
.msl-h3{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h3);
  font-weight: var(--msl-w-bold);
  line-height: var(--msl-lh-snug);
  letter-spacing: var(--msl-ls-tight);
  color: var(--msl-ink-strong);
  margin: 0;
}
.msl-h4{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h4);
  font-weight: var(--msl-w-bold);
  line-height: var(--msl-lh-snug);
  color: var(--msl-ink-strong);
  margin: 0;
}

/* Mixed-weight modifiers — the "wow" pattern.
   Use these as <span> children inside .msl-h1 / .msl-h2 / .msl-display: */
.msl-light{ font-weight: var(--msl-w-thin); color: rgba(31,41,55,0.55); }
.msl-heavy{ font-weight: var(--msl-w-black); }
.msl-amber{ font-weight: var(--msl-w-black); color: var(--msl-amber); }

/* On dark backgrounds, .msl-light fades into white instead of ink */
.msl-on-dark .msl-light{ color: rgba(255,255,255,0.55); }
.msl-on-dark .msl-h1, .msl-on-dark .msl-h2, .msl-on-dark .msl-h3, .msl-on-dark .msl-h4, .msl-on-dark .msl-display{ color:#fff; }

/* Body & supporting text */
.msl-lead{
  font-size: var(--msl-size-sub);
  font-weight: var(--msl-w-thin);
  line-height: var(--msl-lh-normal);
  color: var(--msl-muted);
  margin: 0;
  max-width: 62ch;
}
.msl-lead b{ font-weight: var(--msl-w-bold); color: var(--msl-ink-strong); }
.msl-on-dark .msl-lead{ color: rgba(255,255,255,0.78); }
.msl-on-dark .msl-lead b{ color: #fff; }

.msl-body{
  font-size: var(--msl-size-body);
  font-weight: var(--msl-w-reg);
  line-height: var(--msl-lh-relaxed);
  color: var(--msl-ink);
  margin: 0 0 var(--msl-sp-4);
  max-width: 64ch;
}
.msl-body b{ font-weight: var(--msl-w-bold); color: var(--msl-ink-strong); }

/* Kicker / eyebrow — the small uppercase line above titles */
.msl-kicker{
  font-family: var(--msl-font);
  font-size: var(--msl-size-tiny);
  font-weight: var(--msl-w-bold);
  color: var(--msl-amber);
  letter-spacing: var(--msl-ls-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--msl-sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--msl-sp-3);
}
.msl-kicker::before{
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--msl-amber);
}
.msl-kicker--no-rule::before{ display: none; }

/* Section label (compact eyebrow, no rule) */
.msl-label{
  font-family: var(--msl-font);
  font-size: var(--msl-size-meta);
  font-weight: var(--msl-w-bold);
  letter-spacing: var(--msl-ls-label);
  text-transform: uppercase;
  color: var(--msl-muted);
}

/* Big stat numbers */
.msl-num{
  font-family: var(--msl-font);
  font-size: var(--msl-size-num);
  font-weight: var(--msl-w-black);
  line-height: var(--msl-lh-tight);
  letter-spacing: var(--msl-ls-heading);
  color: var(--msl-ink-strong);
  margin: 0;
}
.msl-num--xl{ font-size: var(--msl-size-num-xl); }
.msl-num--amber{ color: var(--msl-amber); }
.msl-num--accent{ color: var(--msl-down); }
.msl-num--up{ color: var(--msl-up); }
.msl-on-dark .msl-num{ color: #fff; }
.msl-on-dark .msl-num--amber{ color: var(--msl-amber); }

.msl-num .unit{
  font-size: 0.4em;
  font-weight: var(--msl-w-thin);
  color: var(--msl-muted);
  margin-right: 0.2em;
}
.msl-on-dark .msl-num .unit{ color: rgba(255,255,255,0.55); }

/* --------------------------------------------------------------------------
   4. SURFACES & BACKGROUNDS
   -------------------------------------------------------------------------- */
.msl-bg-navy{ background: var(--msl-navy); color: #fff; }
.msl-bg-navy-2{ background: var(--msl-navy-2); color: #fff; }
.msl-bg-cream{ background: var(--msl-cream); color: var(--msl-ink); }
.msl-bg-cream-2{ background: var(--msl-cream-2); color: var(--msl-ink); }
.msl-bg-white{ background: #fff; color: var(--msl-ink); }

/* Add this class to any container with a dark background — it tells
   typography utilities to adjust their default colors */
.msl-on-dark{}

/* Subtle navy glow — use inside hero bands sparingly */
.msl-glow{ position: relative; overflow: hidden; }
.msl-glow::before{
  content: "";
  position: absolute;
  inset: auto -10% -20% auto;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle, rgba(212,160,74,0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.msl-glow > *{ position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. CONTAINERS
   -------------------------------------------------------------------------- */
.msl-container{ max-width: var(--msl-w-content); margin: 0 auto; padding: 0 var(--msl-sp-6); }
.msl-container--reading{ max-width: var(--msl-w-reading); }
.msl-container--wide{ max-width: var(--msl-w-wide); }

/* --------------------------------------------------------------------------
   6. COMPONENTS
   -------------------------------------------------------------------------- */

/* Buttons */
.msl-btn{
  display: inline-flex;
  align-items: center;
  gap: var(--msl-sp-2);
  font-family: var(--msl-font);
  font-size: var(--msl-size-small);
  font-weight: var(--msl-w-heavy);
  letter-spacing: var(--msl-ls-tight);
  padding: 14px 28px;
  border-radius: var(--msl-r);
  border: 0;
  background: var(--msl-ink-strong);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.msl-btn:hover{ transform: translateY(-1px); box-shadow: var(--msl-shadow-1); }
.msl-btn::after{ content: "→"; color: var(--msl-amber); transform: scaleX(-1); }
.msl-btn--amber{ background: var(--msl-amber); color: var(--msl-ink-strong); }
.msl-btn--amber::after{ color: var(--msl-ink-strong); }
.msl-btn--ghost{ background: transparent; color: var(--msl-ink-strong); border: 1px solid var(--msl-line); }
.msl-btn--ghost::after{ color: var(--msl-amber); }
.msl-on-dark .msl-btn--ghost{ color: #fff; border-color: rgba(255,255,255,0.25); }
.msl-btn--sm{ padding: 10px 18px; font-size: var(--msl-size-meta); }

/* Pills */
.msl-pill{
  display: inline-flex;
  align-items: center;
  gap: var(--msl-sp-2);
  font-family: var(--msl-font);
  font-size: var(--msl-size-meta);
  font-weight: var(--msl-w-mid);
  padding: 6px 14px;
  border-radius: var(--msl-r-pill);
  background: #fff;
  color: var(--msl-ink-strong);
  border: 1px solid var(--msl-line);
  cursor: pointer;
}
.msl-pill--active{ background: var(--msl-ink-strong); color: #fff; border-color: var(--msl-ink-strong); }
.msl-pill--amber{ background: var(--msl-amber); color: var(--msl-ink-strong); border-color: var(--msl-amber); }

/* Tags */
.msl-tag{
  display: inline-block;
  font-family: var(--msl-font);
  font-size: 11px;
  font-weight: var(--msl-w-bold);
  letter-spacing: var(--msl-ls-label);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--msl-r-sm);
  background: var(--msl-cream-2);
  color: var(--msl-ink-strong);
}
.msl-tag--amber{ background: var(--msl-amber-soft); color: var(--msl-warn); }
.msl-tag--accent{ background: var(--msl-down-soft); color: var(--msl-down); }
.msl-tag--up{ background: var(--msl-up-soft); color: var(--msl-up); }
.msl-tag--live{ display: inline-flex; align-items: center; gap: 6px; }
.msl-tag--live::before{
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.5;
}

/* Card */
.msl-card{
  background: #fff;
  border: 1px solid var(--msl-line);
  border-radius: var(--msl-r-md);
  padding: var(--msl-sp-5) var(--msl-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--msl-sp-3);
}
.msl-card--dark{ background: var(--msl-navy); color: #fff; border-color: rgba(255,255,255,0.1); }
.msl-card--feature{ padding: var(--msl-sp-6) var(--msl-sp-7); }

.msl-card-hd{
  background: var(--msl-ink-strong);
  color: #fff;
  padding: var(--msl-sp-5) var(--msl-sp-5) var(--msl-sp-4);
  margin: calc(var(--msl-sp-5) * -1) calc(var(--msl-sp-6) * -1) 0;
  border-radius: var(--msl-r-md) var(--msl-r-md) 0 0;
  border-bottom: 0;
}

.msl-card-foot{
  padding-top: var(--msl-sp-3);
  margin-top: auto;
  border-top: 1px solid var(--msl-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--msl-size-meta);
  color: var(--msl-muted);
  font-weight: var(--msl-w-mid);
}
.msl-card-foot .cta{ color: var(--msl-ink-strong); font-weight: var(--msl-w-heavy); }
.msl-card-foot .cta::after{ content: " ←"; color: var(--msl-amber); font-weight: var(--msl-w-black); }

/* Form */
.msl-input, .msl-select{
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--msl-line);
  border-radius: var(--msl-r);
  font-family: var(--msl-font);
  font-size: var(--msl-size-body);
  font-weight: var(--msl-w-mid);
  color: var(--msl-ink-strong);
  background: var(--msl-cream);
  outline: none;
}
.msl-input:focus, .msl-select:focus{ border-color: var(--msl-amber); background: #fff; }
.msl-field{ display: flex; flex-direction: column; gap: 6px; }
.msl-field label{
  font-family: var(--msl-font);
  font-size: var(--msl-size-tiny);
  font-weight: var(--msl-w-bold);
  color: var(--msl-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.msl-field label .v{
  color: var(--msl-ink-strong);
  font-weight: var(--msl-w-black);
  font-size: var(--msl-size-h4);
  letter-spacing: var(--msl-ls-heading);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   7. BLOCK PATTERNS (matches existing WP patterns by name)
   -------------------------------------------------------------------------- */

/* Pattern: Hero
   Use: <section class="msl-pattern-hero msl-bg-navy msl-on-dark msl-glow">
        <div class="msl-container">
          <p class="msl-kicker">מחקר כלכלי</p>
          <h1 class="msl-h1 msl-h1--xl"><span class="msl-light">למה הכל</span> <span class="msl-heavy">יקר ב-</span><span class="msl-amber">13%?</span></h1>
          <p class="msl-lead">...</p>
        </div>
      </section> */
.msl-pattern-hero{ padding: var(--msl-sp-9) 0; }
.msl-pattern-hero .msl-h1{ margin: 0 0 var(--msl-sp-5); }
.msl-pattern-hero .msl-lead{ margin: 0 0 var(--msl-sp-6); }

/* Pattern: CTA Banner */
.msl-pattern-cta{
  background: var(--msl-navy);
  color: #fff;
  padding: var(--msl-sp-8) var(--msl-sp-6);
  text-align: center;
}
.msl-pattern-cta .msl-h2{ color: #fff; margin: 0 0 var(--msl-sp-4); }
.msl-pattern-cta .msl-h2 .msl-light{ color: rgba(255,255,255,0.55); }

/* Pattern: Stat Block */
.msl-pattern-stat{
  background: #fff;
  border: 1px solid var(--msl-line);
  border-radius: var(--msl-r-md);
  padding: var(--msl-sp-5) var(--msl-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--msl-sp-2);
}
.msl-pattern-stat .l{ font-size: var(--msl-size-tiny); color: var(--msl-muted); font-weight: var(--msl-w-bold); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.msl-pattern-stat .n{ font-size: var(--msl-size-num); font-weight: var(--msl-w-black); color: var(--msl-ink-strong); line-height: var(--msl-lh-tight); letter-spacing: var(--msl-ls-heading); margin: 0; }
.msl-pattern-stat .d{ font-size: var(--msl-size-meta); color: var(--msl-muted); margin: 0; }

/* Pattern: Step Block (numbered steps) */
.msl-pattern-step{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--msl-sp-4);
  align-items: start;
}
.msl-pattern-step .n{ font-family: var(--msl-font); font-weight: var(--msl-w-black); font-size: var(--msl-size-h3); color: var(--msl-amber); line-height: 1; letter-spacing: var(--msl-ls-heading); }
.msl-pattern-step h4{ margin: 0 0 var(--msl-sp-1); font-size: var(--msl-size-h4); font-weight: var(--msl-w-heavy); color: var(--msl-ink-strong); }
.msl-pattern-step p{ margin: 0; font-size: var(--msl-size-small); color: var(--msl-muted); }

/* Pattern: Card Grid */
.msl-pattern-cardgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--msl-sp-4); }
.msl-pattern-cardgrid--2col{ grid-template-columns: repeat(2, 1fr); }
.msl-pattern-cardgrid--4col{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .msl-pattern-cardgrid, .msl-pattern-cardgrid--2col, .msl-pattern-cardgrid--4col{ grid-template-columns: 1fr; }
}

/* Pattern: Personas Grid */
.msl-pattern-personas{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--msl-sp-4); }
.msl-pattern-personas .persona{
  background: #fff;
  border: 1px solid var(--msl-line);
  border-radius: var(--msl-r-md);
  padding: var(--msl-sp-5);
}
.msl-pattern-personas .persona h4{ font-size: var(--msl-size-h4); font-weight: var(--msl-w-heavy); margin: 0 0 var(--msl-sp-2); color: var(--msl-ink-strong); }
.msl-pattern-personas .persona p{ font-size: var(--msl-size-small); color: var(--msl-muted); margin: 0; line-height: var(--msl-lh-normal); }

/* Pattern: Disclaimer Note */
.msl-pattern-disclaimer{
  background: var(--msl-warn-bg);
  border-right: 4px solid var(--msl-amber);
  padding: var(--msl-sp-4) var(--msl-sp-5);
  border-radius: var(--msl-r);
  font-size: var(--msl-size-small);
  color: var(--msl-warn);
  line-height: var(--msl-lh-normal);
}
.msl-pattern-disclaimer b{ font-weight: var(--msl-w-heavy); }

/* Pattern: AI Explainer (used in tool result panels) */
.msl-pattern-ai{
  background: var(--msl-cream-2);
  border: 1px solid var(--msl-line);
  border-radius: var(--msl-r-md);
  padding: var(--msl-sp-6) var(--msl-sp-6);
}
.msl-pattern-ai .head{ display: flex; align-items: center; gap: var(--msl-sp-3); margin: 0 0 var(--msl-sp-3); }
.msl-pattern-ai .head .icn{
  width: 32px; height: 32px;
  background: var(--msl-ink-strong); color: var(--msl-amber);
  border-radius: var(--msl-r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--msl-font); font-weight: var(--msl-w-black); font-size: var(--msl-size-small);
}
.msl-pattern-ai .head h3{
  font-family: var(--msl-font); font-size: var(--msl-size-meta); font-weight: var(--msl-w-bold);
  color: var(--msl-ink-strong); letter-spacing: var(--msl-ls-label); text-transform: uppercase; margin: 0;
}
.msl-pattern-ai p{ font-size: var(--msl-size-body); color: var(--msl-ink-strong); line-height: var(--msl-lh-relaxed); margin: 0; }
.msl-pattern-ai p .num{ font-weight: var(--msl-w-black); color: var(--msl-down); }

/* Pattern: FAQ Accordion */
.msl-pattern-faq details{
  border-bottom: 1px solid var(--msl-line);
  padding: var(--msl-sp-4) 0;
}
.msl-pattern-faq summary{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h4);
  font-weight: var(--msl-w-bold);
  color: var(--msl-ink-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.msl-pattern-faq summary::after{
  content: "+";
  color: var(--msl-amber);
  font-size: 1.4em;
  font-weight: var(--msl-w-bold);
  transition: transform 0.2s;
}
.msl-pattern-faq details[open] summary::after{ content: "−"; }
.msl-pattern-faq details p{ margin: var(--msl-sp-3) 0 0; color: var(--msl-ink); }

/* Pattern: Pros/Cons */
.msl-pattern-proscons{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--msl-sp-4); }
.msl-pattern-proscons .col{ padding: var(--msl-sp-5); border-radius: var(--msl-r-md); background: #fff; border: 1px solid var(--msl-line); }
.msl-pattern-proscons .col h4{ font-size: var(--msl-size-tiny); font-weight: var(--msl-w-bold); letter-spacing: var(--msl-ls-label); text-transform: uppercase; margin: 0 0 var(--msl-sp-3); }
.msl-pattern-proscons .col.pros h4{ color: var(--msl-up); }
.msl-pattern-proscons .col.cons h4{ color: var(--msl-down); }
.msl-pattern-proscons ul{ margin: 0; padding-right: var(--msl-sp-4); }
.msl-pattern-proscons li{ font-size: var(--msl-size-small); line-height: var(--msl-lh-normal); margin-bottom: var(--msl-sp-2); }

/* Pattern: Did You Know */
.msl-pattern-didyouknow{
  background: var(--msl-cream-2);
  border-right: 4px solid var(--msl-ink-strong);
  padding: var(--msl-sp-5);
  border-radius: var(--msl-r);
}
.msl-pattern-didyouknow .l{ font-size: var(--msl-size-tiny); font-weight: var(--msl-w-bold); color: var(--msl-amber); letter-spacing: var(--msl-ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--msl-sp-2); }
.msl-pattern-didyouknow p{ font-size: var(--msl-size-body); color: var(--msl-ink-strong); margin: 0; line-height: var(--msl-lh-normal); }

/* Pattern: Chapter Header (for long-form essays) */
.msl-pattern-chapter{ padding: var(--msl-sp-8) 0; border-bottom: 1px solid var(--msl-line); }
.msl-pattern-chapter:last-child{ border-bottom: 0; }
.msl-pattern-chapter .label{ font-family: var(--msl-font); font-size: var(--msl-size-tiny); font-weight: var(--msl-w-bold); color: var(--msl-amber); letter-spacing: var(--msl-ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--msl-sp-3); }
.msl-pattern-chapter p:first-of-type::first-letter{ font-family: var(--msl-font); font-weight: var(--msl-w-black); font-size: 4.5rem; float: right; line-height: .85; margin: 6px 0 0 8px; color: var(--msl-amber); letter-spacing: var(--msl-ls-display); }
.msl-pattern-chapter .pull{ font-size: var(--msl-size-h3); font-weight: var(--msl-w-thin); color: var(--msl-ink-strong); line-height: var(--msl-lh-snug); border-right: 3px solid var(--msl-amber); padding-right: var(--msl-sp-4); margin: var(--msl-sp-6) 0; }
.msl-pattern-chapter .pull b{ font-weight: var(--msl-w-black); }

/* Pattern: Share Buttons */
.msl-pattern-share{ display: flex; gap: var(--msl-sp-2); flex-wrap: wrap; }
.msl-pattern-share a{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--msl-line); border-radius: var(--msl-r); font-size: var(--msl-size-meta); font-weight: var(--msl-w-bold); color: var(--msl-ink-strong); text-decoration: none; background: #fff; }
.msl-pattern-share a:hover{ border-color: var(--msl-amber); }

/* Pattern: Glossary Callout */
.msl-pattern-glossary{
  background: var(--msl-cream-2);
  border-radius: var(--msl-r);
  padding: var(--msl-sp-3) var(--msl-sp-4);
  font-size: var(--msl-size-small);
  display: inline-block;
}
.msl-pattern-glossary b{ color: var(--msl-amber-deep); font-weight: var(--msl-w-heavy); }

/* Pattern: Callout Tip */
.msl-pattern-tip{
  background: #e8f2fc;
  border-right: 4px solid var(--msl-info);
  padding: var(--msl-sp-4) var(--msl-sp-5);
  border-radius: var(--msl-r);
  color: var(--msl-info);
  font-size: var(--msl-size-small);
}
.msl-pattern-tip b{ font-weight: var(--msl-w-heavy); }

/* Pattern: Chart Shell (wraps chart areas) */
.msl-pattern-chartshell{
  background: var(--msl-navy);
  color: #fff;
  border-radius: var(--msl-r-md);
  padding: var(--msl-sp-6);
  margin: var(--msl-sp-5) 0;
}
.msl-pattern-chartshell .title{ font-family: var(--msl-font); font-size: var(--msl-size-h3); font-weight: var(--msl-w-heavy); color: #fff; margin: 0 0 var(--msl-sp-1); letter-spacing: var(--msl-ls-heading); }
.msl-pattern-chartshell .sub{ font-family: var(--msl-font); font-size: var(--msl-size-meta); color: rgba(255,255,255,0.6); margin: 0 0 var(--msl-sp-5); letter-spacing: 0.02em; text-transform: uppercase; font-weight: var(--msl-w-mid); }

/* --------------------------------------------------------------------------
   8. UTILITIES
   -------------------------------------------------------------------------- */
.msl-flex{ display: flex; }
.msl-grid{ display: grid; }
.msl-gap-2{ gap: var(--msl-sp-2); }
.msl-gap-3{ gap: var(--msl-sp-3); }
.msl-gap-4{ gap: var(--msl-sp-4); }
.msl-gap-5{ gap: var(--msl-sp-5); }
.msl-mb-3{ margin-bottom: var(--msl-sp-3); }
.msl-mb-4{ margin-bottom: var(--msl-sp-4); }
.msl-mb-5{ margin-bottom: var(--msl-sp-5); }
.msl-mb-6{ margin-bottom: var(--msl-sp-6); }
.msl-text-center{ text-align: center; }
.msl-text-end{ text-align: end; }

/* --------------------------------------------------------------------------
   9. HUB PAGE UTILITIES · Phase 1 · 2026-05-18
   -------------------------------------------------------------------------- */

/* Stats row inside dark hero */
.msl-hub-statsrow{ display:flex; gap:var(--msl-sp-7); margin-top:var(--msl-sp-7); flex-wrap:wrap; }
.msl-hub-statsrow .stat .n{ font-size:2.75rem; font-weight:var(--msl-w-black); color:#fff; line-height:1; letter-spacing:var(--msl-ls-heading); display:block; }
.msl-hub-statsrow .stat .n .sup{ font-size:.45em; font-weight:var(--msl-w-thin); color:rgba(255,255,255,.55); }
.msl-hub-statsrow .stat .l{ font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold); color:rgba(255,255,255,.6); letter-spacing:var(--msl-ls-label); text-transform:uppercase; display:block; margin-top:4px; }

/* Filter strip band */
.msl-hub-filterstrip{ background:var(--msl-cream-2); border-bottom:1px solid var(--msl-line); padding:var(--msl-sp-4) 0; }
.msl-hub-filterstrip .inner{ display:flex; align-items:center; gap:var(--msl-sp-5); flex-wrap:wrap; }
.msl-hub-filterstrip .flt-label{ font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold); color:var(--msl-muted); letter-spacing:var(--msl-ls-label); text-transform:uppercase; white-space:nowrap; }
.msl-hub-filterstrip .pills{ display:flex; gap:var(--msl-sp-2); flex-wrap:wrap; }

/* Hub section wrapper */
.msl-hub-sec{ padding:var(--msl-sp-7) 0; }
.msl-hub-sec + .msl-hub-sec{ padding-top:0; }
.msl-hub-sec-hd{ margin-bottom:var(--msl-sp-5); }

/* AI badge (SVG bolt) */
.msl-ai-badge{ display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:var(--msl-w-bold); letter-spacing:.08em; text-transform:uppercase; color:var(--msl-amber); background:rgba(212,160,74,.10); border:1px solid rgba(212,160,74,.30); padding:2px 7px 2px 4px; border-radius:var(--msl-r-pill); line-height:1; vertical-align:middle; }
.msl-ai-badge svg{ fill:currentColor; flex-shrink:0; }

/* Tool card — hub variant */
.msl-tool-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; border-radius:var(--msl-r-md); overflow:hidden; border:1px solid var(--msl-line); background:#fff; transition:transform .18s,box-shadow .18s; }
.msl-tool-card:hover{ transform:translateY(-3px); box-shadow:var(--msl-shadow-2); }
.msl-tool-card[hidden]{ display:none !important; }

.msl-tool-card .tc-hd{ background:var(--msl-ink-strong); color:#fff; padding:var(--msl-sp-5); position:relative; overflow:hidden; min-height:110px; display:flex; flex-direction:column; justify-content:flex-end; }
.msl-tool-card .tc-hd::after{ content:""; position:absolute; inset:auto -30% -30% auto; width:140%; height:140%; background:radial-gradient(circle at 30% 70%,rgba(212,160,74,.13),transparent 60%); pointer-events:none; }
.msl-tool-card.tc--featured .tc-hd{ min-height:170px; padding:var(--msl-sp-6); }

.msl-tool-card .tc-cat{ font-size:10px; font-weight:var(--msl-w-bold); color:rgba(255,255,255,.5); letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:var(--msl-sp-2); margin:0 0 var(--msl-sp-2); position:relative; z-index:1; }
.msl-tool-card h3.tc-title{ font-family:var(--msl-font); font-size:var(--msl-size-h3); font-weight:var(--msl-w-thin); line-height:1.05; letter-spacing:var(--msl-ls-heading); color:#fff; margin:0; position:relative; z-index:1; }
.msl-tool-card h3.tc-title .heavy{ font-weight:var(--msl-w-black); }
.msl-tool-card h3.tc-title .amber{ font-weight:var(--msl-w-black); color:var(--msl-amber); }
.msl-tool-card.tc--featured h3.tc-title{ font-size:var(--msl-size-h2); }

.msl-tool-card .tc-body{ padding:var(--msl-sp-4) var(--msl-sp-5); display:flex; flex-direction:column; flex:1; gap:var(--msl-sp-3); }
.msl-tool-card.tc--featured .tc-body{ padding:var(--msl-sp-5) var(--msl-sp-6); }
.msl-tool-card .tc-desc{ font-size:var(--msl-size-small); color:var(--msl-muted); line-height:var(--msl-lh-normal); flex:1; margin:0; }
.msl-tool-card.tc--featured .tc-desc{ font-size:var(--msl-size-body); }

.msl-tool-card .tc-foot{ padding-top:var(--msl-sp-3); border-top:1px solid var(--msl-line); display:flex; justify-content:space-between; align-items:center; }
.msl-tool-card .tc-cta{ font-weight:var(--msl-w-heavy); color:var(--msl-ink-strong); font-size:var(--msl-size-small); }
.msl-tool-card .tc-cta::after{ content:" ←"; color:var(--msl-amber); font-weight:var(--msl-w-black); }
.msl-tool-card .tc-tag-beta{ font-size:9px; font-weight:var(--msl-w-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--msl-muted); background:var(--msl-cream-2); padding:2px 6px; border-radius:var(--msl-r-sm); }

@media(max-width:900px){
  .msl-hub-statsrow{ gap:var(--msl-sp-4); }
  .msl-hub-statsrow .stat .n{ font-size:2rem; }
}
@media(max-width:600px){
  .msl-hub-statsrow{ gap:var(--msl-sp-3); }
  .msl-hub-statsrow .stat .n{ font-size:1.6rem; }
  .msl-hub-filterstrip .inner{ gap:var(--msl-sp-3); }
}
.msl-hub-sec-spacer{ height:var(--msl-sp-5); }


/* --------------------------------------------------------------------------
   END · v1.0
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. CONTENT-ENRICHMENT PATTERNS (research-specific)
   Added v1.1 · 2026-05-17
   -------------------------------------------------------------------------- */

/* Pattern: TL;DR / בקצרה
   Use at the top of research articles. Bulleted summary with amber dots. */
.msl-pattern-tldr{
  background: #fff;
  border: 1px solid var(--msl-line);
  border-right: 4px solid var(--msl-amber);
  padding: var(--msl-sp-6) var(--msl-sp-7);
  border-radius: var(--msl-r-md);
}
.msl-pattern-tldr-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 var(--msl-sp-5);
}
.msl-pattern-tldr h3{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h3);
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  margin: 0;
  letter-spacing: var(--msl-ls-heading);
}
.msl-pattern-tldr .count{
  font-family: var(--msl-font);
  font-size: var(--msl-size-tiny);
  font-weight: var(--msl-w-bold);
  color: var(--msl-muted);
  letter-spacing: var(--msl-ls-eyebrow);
  text-transform: uppercase;
}
.msl-pattern-tldr ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--msl-sp-4);
}
.msl-pattern-tldr li{
  font-family: var(--msl-font);
  font-size: var(--msl-size-body);
  line-height: var(--msl-lh-normal);
  color: var(--msl-ink);
  position: relative;
  padding-right: var(--msl-sp-5);
}
.msl-pattern-tldr li::before{
  content: "";
  position: absolute;
  right: 0; top: 0.65em;
  width: 8px; height: 8px;
  background: var(--msl-amber);
  border-radius: 50%;
}
.msl-pattern-tldr li b{
  font-weight: var(--msl-w-heavy);
  color: var(--msl-amber-deep);
}

/* Pattern: Insight Card (numbered, not sequential)
   Use for "key takeaways" / "תובנות לעיתונאים". Each insight is independent. */
.msl-pattern-insight{
  background: #fff;
  border: 1px solid var(--msl-line);
  border-radius: var(--msl-r-md);
  padding: var(--msl-sp-5) var(--msl-sp-6);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--msl-sp-5);
  align-items: start;
}
.msl-pattern-insight .n{
  font-family: var(--msl-font);
  font-size: 4rem;
  font-weight: var(--msl-w-black);
  color: var(--msl-amber);
  line-height: 1;
  letter-spacing: var(--msl-ls-display);
}
.msl-pattern-insight h4{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h3);
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  margin: 0 0 var(--msl-sp-2);
  letter-spacing: var(--msl-ls-tight);
}
.msl-pattern-insight p{
  font-family: var(--msl-font);
  font-size: var(--msl-size-body);
  line-height: var(--msl-lh-normal);
  color: var(--msl-ink);
  margin: 0;
}
.msl-pattern-insight p b{ font-weight: var(--msl-w-bold); color: var(--msl-ink-strong); }
.msl-pattern-insight--mini{ padding: var(--msl-sp-4) var(--msl-sp-5); grid-template-columns: 56px 1fr; gap: var(--msl-sp-4); }
.msl-pattern-insight--mini .n{ font-size: 2.5rem; }
.msl-pattern-insight--mini h4{ font-size: var(--msl-size-h4); }

/* Pattern: Methodology Note
   Italic note framed by top + bottom rules. Use after charts to explain
   how the data was collected. */
.msl-pattern-methodology{
  background: none;
  border-top: 1px solid var(--msl-line);
  border-bottom: 1px solid var(--msl-line);
  padding: var(--msl-sp-4) 0;
  margin: var(--msl-sp-5) 0;
  font-family: var(--msl-font);
  font-size: var(--msl-size-small);
  color: var(--msl-muted);
  line-height: var(--msl-lh-normal);
}
.msl-pattern-methodology b{
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  letter-spacing: var(--msl-ls-tight);
  display: block;
  font-size: var(--msl-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--msl-ls-label);
  margin: 0 0 var(--msl-sp-1);
}

/* Pattern: Sources List
   Numbered references with amber serif-style numbers. End of research. */
.msl-pattern-sources{ padding: var(--msl-sp-7) 0; border-top: 1px solid var(--msl-line); }
.msl-pattern-sources h2{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h2);
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  margin: 0 0 var(--msl-sp-5);
  letter-spacing: var(--msl-ls-heading);
}
.msl-pattern-sources ol{
  list-style: none;
  counter-reset: src;
  margin: 0; padding: 0;
}
.msl-pattern-sources li{
  font-family: var(--msl-font);
  font-size: var(--msl-size-small);
  color: var(--msl-ink);
  line-height: var(--msl-lh-normal);
  counter-increment: src;
  padding: var(--msl-sp-3) var(--msl-sp-9) var(--msl-sp-3) 0;
  position: relative;
  border-bottom: 1px solid var(--msl-line);
}
.msl-pattern-sources li:last-child{ border-bottom: 0; }
.msl-pattern-sources li::before{
  content: counter(src, decimal-leading-zero);
  position: absolute;
  right: 0; top: var(--msl-sp-3);
  font-family: var(--msl-font);
  font-weight: var(--msl-w-black);
  color: var(--msl-amber);
  font-size: var(--msl-size-h3);
  letter-spacing: var(--msl-ls-heading);
  line-height: 1;
}
.msl-pattern-sources li a{ color: var(--msl-amber-deep); text-decoration: underline; }

/* Pattern: Pull Quote
   Large quote with side rule. Use 1-2x per research. */
.msl-pattern-pullquote{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h3);
  font-weight: var(--msl-w-thin);
  line-height: var(--msl-lh-snug);
  letter-spacing: var(--msl-ls-tight);
  color: var(--msl-ink-strong);
  border-right: 3px solid var(--msl-amber);
  padding-right: var(--msl-sp-5);
  margin: var(--msl-sp-6) 0;
  max-width: 32ch;
}
.msl-pattern-pullquote b{ font-weight: var(--msl-w-black); }
.msl-pattern-pullquote--xl{ font-size: var(--msl-size-h2); }
.msl-on-dark .msl-pattern-pullquote{ color: #fff; }

/* Pattern: Heat Map (categories grid colored by intensity)
   Used for "where does your shekel go" type research. */
.msl-pattern-heatmap{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--msl-sp-2);
}
.msl-pattern-heatmap .cell{
  background: var(--msl-cream-2);
  padding: var(--msl-sp-4) var(--msl-sp-4);
  border-radius: var(--msl-r);
  position: relative;
}
.msl-pattern-heatmap .cell .lbl{
  font-family: var(--msl-font);
  font-size: var(--msl-size-meta);
  color: var(--msl-muted);
  font-weight: var(--msl-w-mid);
  margin: 0 0 var(--msl-sp-2);
}
.msl-pattern-heatmap .cell .val{
  font-family: var(--msl-font);
  font-size: var(--msl-size-num);
  font-weight: var(--msl-w-black);
  color: var(--msl-ink-strong);
  letter-spacing: var(--msl-ls-heading);
  line-height: 1;
  margin: 0 0 var(--msl-sp-1);
}
.msl-pattern-heatmap .cell .delta{
  font-family: var(--msl-font);
  font-size: var(--msl-size-tiny);
  color: var(--msl-muted);
  font-weight: var(--msl-w-mid);
}
.msl-pattern-heatmap .cell--low{ background: #fff; border: 1px solid var(--msl-line); }
.msl-pattern-heatmap .cell--mid{ background: var(--msl-amber-soft); }
.msl-pattern-heatmap .cell--high{ background: #e8b76d; }
.msl-pattern-heatmap .cell--vhigh{ background: var(--msl-amber-deep); color: #fff; }
.msl-pattern-heatmap .cell--vhigh .lbl,
.msl-pattern-heatmap .cell--vhigh .val,
.msl-pattern-heatmap .cell--vhigh .delta{ color: #fff; }
.msl-pattern-heatmap .cell--down{ background: var(--msl-down); color: #fff; }
.msl-pattern-heatmap .cell--down .lbl,
.msl-pattern-heatmap .cell--down .val,
.msl-pattern-heatmap .cell--down .delta{ color: #fff; }

@media (max-width: 720px){ .msl-pattern-heatmap{ grid-template-columns: repeat(2, 1fr); } }

/* Pattern: Bar List (horizontal comparison bars)
   Use for "Israel vs Switzerland vs Germany" style rankings. */
.msl-pattern-barlist{ display: flex; flex-direction: column; gap: var(--msl-sp-3); }
.msl-pattern-barlist .row{
  display: grid;
  grid-template-columns: 100px 1fr 56px;
  gap: var(--msl-sp-4);
  align-items: center;
}
.msl-pattern-barlist .label{
  font-family: var(--msl-font);
  font-weight: var(--msl-w-bold);
  font-size: var(--msl-size-small);
  color: var(--msl-ink-strong);
}
.msl-pattern-barlist .bar{
  height: 14px;
  background: var(--msl-cream-2);
  border-radius: var(--msl-r-sm);
  overflow: hidden;
}
.msl-pattern-barlist .bar > span{
  display: block;
  height: 100%;
  background: var(--msl-amber);
  border-radius: var(--msl-r-sm);
}
.msl-pattern-barlist .val{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h4);
  font-weight: var(--msl-w-black);
  color: var(--msl-ink-strong);
  letter-spacing: var(--msl-ls-heading);
  text-align: left;
}
.msl-pattern-barlist .row--highlight .bar > span{ background: var(--msl-down); }
.msl-pattern-barlist .row--highlight .label,
.msl-pattern-barlist .row--highlight .val{ color: var(--msl-down); }
.msl-pattern-barlist .row--us .bar > span{ background: var(--msl-amber-deep); }
.msl-pattern-barlist .row--us .label,
.msl-pattern-barlist .row--us .val{ color: var(--msl-amber-deep); }
.msl-on-dark .msl-pattern-barlist .bar{ background: rgba(255,255,255,0.08); }
.msl-on-dark .msl-pattern-barlist .label,
.msl-on-dark .msl-pattern-barlist .val{ color: #fff; }

/* Pattern: Stats Row (compact inline metrics)
   Use in hero meta row. 3-5 small stats side by side. */
.msl-pattern-statsrow{
  display: flex;
  gap: var(--msl-sp-6);
  flex-wrap: wrap;
  padding: var(--msl-sp-5) 0 0;
  border-top: 1px solid var(--msl-line);
}
.msl-pattern-statsrow .item{
  font-family: var(--msl-font);
  font-size: var(--msl-size-meta);
  color: var(--msl-muted);
  font-weight: var(--msl-w-mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msl-pattern-statsrow .item b{
  display: block;
  font-family: var(--msl-font);
  font-weight: var(--msl-w-black);
  color: var(--msl-ink-strong);
  font-size: var(--msl-size-h3);
  letter-spacing: var(--msl-ls-heading);
  line-height: 1;
  margin: 0 0 var(--msl-sp-1);
  text-transform: none;
}
.msl-pattern-statsrow .item b .amber{ color: var(--msl-amber); }
.msl-on-dark .msl-pattern-statsrow{ border-color: rgba(255,255,255,0.15); }
.msl-on-dark .msl-pattern-statsrow .item{ color: rgba(255,255,255,0.6); }
.msl-on-dark .msl-pattern-statsrow .item b{ color: #fff; }

/* Pattern: Byline (author/date/reading time)
   Use under research hero. */
.msl-pattern-byline{
  font-family: var(--msl-font);
  font-size: var(--msl-size-meta);
  color: var(--msl-muted);
  display: flex;
  gap: var(--msl-sp-6);
  padding: var(--msl-sp-4) 0;
  border-top: 1px solid var(--msl-line);
  border-bottom: 1px solid var(--msl-line);
  font-weight: var(--msl-w-mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.msl-pattern-byline span b{
  font-family: var(--msl-font);
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  text-transform: none;
  letter-spacing: var(--msl-ls-tight);
}
.msl-on-dark .msl-pattern-byline{ border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); }
.msl-on-dark .msl-pattern-byline span b{ color: #fff; }

/* Pattern: Inline Data Highlight
   For inline emphasis of numbers in body prose. */
.msl-data{
  font-family: var(--msl-font);
  font-weight: var(--msl-w-black);
  color: var(--msl-amber-deep);
  letter-spacing: var(--msl-ls-tight);
  white-space: nowrap;
}
.msl-data--down{ color: var(--msl-down); }
.msl-data--up{ color: var(--msl-up); }

/* --------------------------------------------------------------------------
   END · v1.1
   -------------------------------------------------------------------------- */