/* ==========================================================================
   GFS Design Kit · v1.0 · 2026-05-20 (adapted from MSL v1.0)
   Drop-in stylesheet for the WP theme. Pair with Inter from Google Fonts (English-optimized, same 100-900 weight range as Heebo):
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS variables)
   -------------------------------------------------------------------------- */
:root{
  /* Color · brand */
  --msl-navy:        #06142b;
  --msl-navy-2:      #0b1e3f;
  --msl-navy-3:      #102541;
  --msl-amber:       #d4a04a;
  --msl-amber-soft:  #f4e0b3;
  --msl-amber-deep:  #b88330;
  --msl-cream:       #f6efe2;
  --msl-cream-2:     #ede4cf;

  /* Color · ink */
  --msl-ink:         #1f2937;
  --msl-ink-strong:  #06142b;
  --msl-muted:       #7a8190;
  --msl-line:        rgba(6,20,43,.12);
  --msl-line-light:  rgba(6,20,43,.06);
  --msl-line-dark:   rgba(255,255,255,.12);

  /* Color · semantic */
  --msl-up:          #3b8a4f;
  --msl-up-soft:     #e2efd6;
  --msl-down:        #c93a3a;
  --msl-down-soft:   #fce8e8;
  --msl-warn:        #7a4a00;
  --msl-warn-bg:     #fff8e6;
  --msl-info:        #0c447c;

  /* Typography · family */
  --msl-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typography · weights — the meaningful 5 */
  --msl-w-thin:    200;   /* whispers, supporting words within headlines */
  --msl-w-reg:     400;   /* body text */
  --msl-w-mid:     500;   /* meta, labels, captions */
  --msl-w-bold:    700;   /* sub-headings, emphasis */
  --msl-w-heavy:   800;   /* main headings */
  --msl-w-black:   900;   /* mixed-weight key words, large numbers */

  /* Typography · size scale */
  --msl-size-display:    7.5rem;   /* 120px · hero display */
  --msl-size-h1-xl:      6rem;     /* 96px · big hero */
  --msl-size-h1:         3.75rem;  /* 60px · standard hero */
  --msl-size-h2-xl:      3.5rem;   /* 56px · large section */
  --msl-size-h2:         2.25rem;  /* 36px · standard section */
  --msl-size-h3:         1.5rem;   /* 24px · sub-section */
  --msl-size-h4:         1.125rem; /* 18px · card title */
  --msl-size-sub:        1.3125rem;/* 21px · hero subtitle */
  --msl-size-lead:       1.125rem; /* 18px · lead paragraph */
  --msl-size-body:       1.0625rem;/* 17px · body */
  --msl-size-small:      0.875rem; /* 14px · small */
  --msl-size-meta:       0.8125rem;/* 13px · meta */
  --msl-size-tiny:       0.75rem;  /* 12px · kicker, tag */
  --msl-size-num-xl:     4rem;     /* 64px · big stat number */
  --msl-size-num:        2.5rem;   /* 40px · stat number */

  /* Typography · line-height */
  --msl-lh-tight:        0.95;
  --msl-lh-snug:         1.15;
  --msl-lh-normal:       1.65;
  --msl-lh-relaxed:      1.85;

  /* Typography · letter-spacing */
  --msl-ls-display:     -0.035em;
  --msl-ls-heading:     -0.02em;
  --msl-ls-tight:       -0.01em;
  --msl-ls-normal:      0;
  --msl-ls-eyebrow:     0.22em;
  --msl-ls-label:       0.12em;

  /* Spacing scale (8px base) */
  --msl-sp-1:  0.25rem;   /* 4px */
  --msl-sp-2:  0.5rem;    /* 8px */
  --msl-sp-3:  0.75rem;   /* 12px */
  --msl-sp-4:  1rem;      /* 16px */
  --msl-sp-5:  1.5rem;    /* 24px */
  --msl-sp-6:  2rem;      /* 32px */
  --msl-sp-7:  3rem;      /* 48px */
  --msl-sp-8:  4rem;      /* 64px */
  --msl-sp-9:  5rem;      /* 80px */
  --msl-sp-10: 7.5rem;    /* 120px */

  /* Radii */
  --msl-r-sm:    6px;
  --msl-r:       10px;
  --msl-r-md:    14px;
  --msl-r-lg:    18px;
  --msl-r-xl:    24px;
  --msl-r-pill:  999px;

  /* Shadow (used very sparingly) */
  --msl-shadow-1: 0 4px 14px -8px rgba(6,20,43,.18);
  --msl-shadow-2: 0 16px 40px -20px rgba(6,20,43,.22);

  /* Container widths */
  --msl-w-reading: 720px;     /* long-form essays */
  --msl-w-content: 1100px;    /* standard page content */
  --msl-w-wide:    1440px;    /* dashboards */
}

/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */
html{ direction: ltr; }
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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 3px solid var(--msl-amber); padding-inline-start: 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-inline-start: 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; }

/* --------------------------------------------------------------------------
   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-inline-start: 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-inline-start: 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-inline-start: 3px solid var(--msl-amber);
  padding-inline-start: 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: end;
}
.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
   -------------------------------------------------------------------------- */