/* MGS · ערכת צבעים — כמעט־שחור קר, אקווה ופריוויקל
 *
 * **מה הוחלף ולמה.** הזהב על שחור נקרא כ״פרימיום״ גנרי, והוא גם
 * הצבע של כל אתר השקעות אחר. כאן הכיוון **קר ועתידני**: קרקע
 * כמעט־שחורה עם נטייה כחלחלה, קווים דקים במקום מסגרות, ושני
 * גוונים קרים — אקווה ופריוויקל. **אדום וירוק נשמרים לנתוני שוק
 * בלבד** ואינם משמשים לקישוט, כדי שכשהם מופיעים הם אומרים משהו.
 */
:root {
  --bg:      #06080C;
  --bg-2:    #0A0E15;
  --surface: #0B1018;
  --line:    rgba(150,180,212,.11);
  --line-2:  rgba(150,180,212,.22);
  --text:    #E8EEF6;
  --muted:   #8E9CAE;
  --dim:     #5D6878;
  --aqua:    #5EE6D0;
  --aqua-d:  #1F9E8C;
  --peri:    #8193FA;
  --peri-d:  #4A5BD4;
  --up:      #4ADE80;
  --down:    #F87171;
  --warn:    #FBBF4A;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); margin: 0;
  font-family: Heebo, Rubik, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* זוהר רקע עדין — שני מקורות אור קרים, לא גרדיאנט על כל הדף */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(94,230,208,.07), transparent 60%),
    radial-gradient(52rem 38rem at 88% 8%, rgba(129,147,250,.08), transparent 62%);
}
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; position: relative; z-index: 1; }

h1, h2, h3 { font-family: Rubik, Heebo, sans-serif; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem,6vw,4.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
h2 { font-size: clamp(1.5rem,3.8vw,2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
p  { color: var(--muted); line-height: 1.75; }
b, strong { color: var(--text); font-weight: 600; }

.eyebrow, .overline {
  font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--aqua); display: inline-block;
}
.cool-text {
  background: linear-gradient(100deg, var(--aqua) 0%, #BFE9FF 42%, var(--peri) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ===== כפתורים: קו דק שמתמלא, בלי גרדיאנט צועק ===== */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line-2); color: var(--text);
  padding: .95rem 1.9rem; border-radius: 3px; text-decoration: none;
  font-weight: 500; letter-spacing: .01em; position: relative; overflow: hidden;
  isolation: isolate; transition: color .35s, border-color .35s;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--aqua), #9FE9FF 55%, var(--peri));
  transform: translateY(101%); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.btn:hover { color: #04121A; border-color: var(--aqua); }
.btn:hover::before { transform: translateY(0); }
.btn-ghost { border-color: transparent; border-bottom: 1px solid var(--line-2); border-radius: 0; padding-inline: .2rem; }
.btn-ghost::before { display: none; }
.btn-ghost:hover { color: var(--aqua); border-bottom-color: var(--aqua); }

/* ===== כרטיס הזוהר: המסגרת, נקודת האור והרשת עוקבות אחרי העכבר ===== */
.gcard { position: relative; border-radius: 14px; }
.gcard > .edge     { position: absolute; inset: 0; border-radius: 14px; background: var(--line); }
.gcard > .edge-lit { position: absolute; inset: 0; border-radius: 14px; opacity: 0; transition: opacity .45s; }
.gcard > .face {
  position: absolute; inset: 1px; border-radius: 13px;
  background: var(--surface); overflow: hidden;
}
.gcard > .face > .spot, .gcard > .face > .grid { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.gcard > .face > .grid {
  background-image:
    linear-gradient(rgba(190,215,240,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,215,240,.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.gcard.on > .edge-lit, .gcard.on > .face > .spot, .gcard.on > .face > .grid { opacity: 1; }
/* **`min-height` ולא `height`.** עם `height:100%` הגוף ננעל לגובה
   שורת הרשת, התוכן גלש החוצה בלי שהקופסה תגדל, והפסקאות שמתחתיה
   נערמו עליו. `min-height` משאיר את המילוי כשיש מקום ומאפשר
   לקופסה לגדול כשאין. */
.gcard > .body { position: relative; z-index: 2; padding: 1.35rem 1.45rem; min-height: 100%;
  display: flex; flex-direction: column; box-sizing: border-box; }
.gcard h3 { font-size: .86rem; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.gcard .big { font-size: clamp(1.9rem,4.4vw,2.9rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.gcard .cap { font-size: .74rem; color: var(--dim); }
.gcard .hd { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }

.live { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; color: var(--aqua); }
.live i { width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); animation: mp 1.8s ease-in-out infinite; }
@keyframes mp { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ===== בנטו ===== */
.bento { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) {
  /* **`minmax` ולא גובה קבוע.** שורה של 200px קבועים גרמה
     לקופסאות עם תוכן גבוה יותר לדלוף אל הקופסה שמתחתיהן —
     ״חלון 5״ נראה בתוך ״חלון 3״. עכשיו השורה גדלה לפי התוכן
     ולעולם לא מתחת ל-200px, כך שהרשת נשארת אחידה בלי חפיפה. */
  .bento { grid-template-columns: repeat(4,1fr); grid-auto-rows: minmax(200px, auto); }
  .b-2x2 { grid-column: span 2; grid-row: span 2; }
  .b-1x2 { grid-row: span 2; }
  .b-2x1 { grid-column: span 2; }
  .b-4x1 { grid-column: span 4; }
}

.hr { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
section { padding-block: 4.5rem; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== קשת הכרטיסים — הגאומטריה מהקרוסלה, בלי התנועה =====
 *
 * **למה סטטי.** המקור הוא קרוסלה שמזרימה תמונות סביב גליל. כאן
 * התוכן הוא טקסט שצריך לקרוא, **וטקסט שזז ומסתובב אינו קריא** —
 * ולכן נשמרה הגאומטריה (פרספקטיבה, סיבוב סביב ציר הגליל, דהייה
 * בקצוות) והתנועה הוסרה.
 *
 * כל כרטיס מסובב ב-rotateY סביב ציר שיושב מאחורי המסך, כך
 * שהמרכזי פונה ישר והקיצוניים נוטים לאחור. במובייל הקשת נפרסת
 * לרשימה רגילה, כי בפרספקטיבה צרה היא רק מקטינה את הטקסט.
 */
.arc { container-type: inline-size; position: relative; }
.arc-rail {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .arc-rail {
    grid-template-columns: repeat(var(--n, 4), 1fr);
    perspective: 190cqw; perspective-origin: 50% 46%;
    transform-style: preserve-3d;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    padding-inline: 2.5rem;
  }
  .arc-rail > * {
    transform-origin: 50% 50%;
    transform: translateZ(var(--z, 0)) rotateY(var(--ry, 0deg));
    transition: transform .55s cubic-bezier(.16,1,.3,1);
  }
  /* הקצוות נוטים לאחור, המרכז פונה ישר */
  .arc-rail > :nth-child(1) { --ry: 26deg;  --z: -5.5rem; }
  .arc-rail > :nth-child(2) { --ry: 9deg;   --z: -1.2rem; }
  .arc-rail > :nth-child(3) { --ry: -9deg;  --z: -1.2rem; }
  .arc-rail > :nth-child(4) { --ry: -26deg; --z: -5.5rem; }
  /* מי שעומדים עליו מתיישר קדימה */
  .arc-rail > *:hover { --ry: 0deg; --z: 1.5rem; z-index: 3; }
}
.arc-card { display: flex; flex-direction: column; }
.arc-card h3 { font-size: 1.02rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.arc-card p { font-size: .84rem; line-height: 1.8; color: var(--muted); margin-top: .6rem; }
.arc-tag {
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--aqua); margin-bottom: .55rem; display: block;
}

/* ===== מובייל =====
 *
 * שלושה דברים שנשברים במסך צר ואינם נראים בדסקטופ:
 *
 * 1. **min-height על כרטיסים.** 420px נקבע כדי שהכרטיס הגדול יחזיק
 *    גרף בדסקטופ. במובייל התוכן נערם ממילא, והרצפה הזאת רק יוצרת
 *    חור לבן מתחתיו.
 * 2. **minmax(11rem) בגריד הפנימי.** 176px כופה שתי עמודות על מסך
 *    של 390px, ואז כל כרטיסייה מקבלת 170px — צר מדי לשתי שורות
 *    טקסט בעברית.
 * 3. **הפדינג של הכרטיס.** 1.45rem משני הצדדים גוזל 46px ממסך צר.
 */
@media (max-width: 639px) {
  .gcard { min-height: 0 !important; }
  .gcard > .body { padding: 1.1rem 1.15rem; }
  .gcard .big { font-size: clamp(1.7rem, 9vw, 2.3rem); }
  /* הגריד הפנימי יורד לעמודה אחת במקום להידחק לשתיים */
  .gcard [style*="minmax"] { grid-template-columns: 1fr !important; }
  .bento { gap: .7rem; }
  section { padding-block: 3.2rem; }
  .wrap { padding-inline: 1rem; }
  /* מספרים ארוכים לא נשברים באמצע */
  .num { white-space: nowrap; }
}

/* הגרפים: ב-SVG עם preserveAspectRatio="none" הגובה נקבע מהמכולה,
 * ולכן צריך רצפה משלו — אחרת הוא נעלם כשה-min-height מבוטל. */
@media (max-width: 639px) {
  .gcard svg { min-height: 110px; }
}

/* וכל התמונה: שום דבר לא גולש הצידה */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg { max-width: 100%; }


/* ===== שדות טופס הלידים ===== */
.lead-in {
  width: 100%; box-sizing: border-box;
  background: rgba(10,14,21,.75); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 4px;
  padding: .85rem 1rem; font: inherit; font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
}
.lead-in::placeholder { color: var(--dim); }
.lead-in:focus {
  outline: none; border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(94,230,208,.13);
}
.lead-in:user-invalid { border-color: var(--down); }
#lead-msg:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════
   אזור הכאבים — גרף נרות יורד ואינטראקטיבי
   ═══════════════════════════════════════════════════════════════
   **זה גרף רגשי ולא גרף פיננסי.** אין צירים, אין מחירים ואין
   אחוזים, והכתובית מתחתיו אומרת את זה במילים. הצורה היחידה
   שהוא מעביר היא תחושת שחיקה — חמישה נרות אדומים שיורדים.
   כל נר הוא כפתור אמיתי: `role="radio"`, מיקוד מקלדת, חיצים.    */

.pain { background: #04060A; }
.pain-wrap { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
  .pain-wrap { grid-template-columns: 1.35fr 1fr; gap: 2.4rem; }
}

.pain-chart {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  background:
    linear-gradient(rgba(180,205,230,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,205,230,.035) 1px, transparent 1px),
    radial-gradient(60% 70% at 30% 20%, rgba(248,113,113,.07), transparent 70%),
    #05070B;
  background-size: 38px 38px, 38px 38px, 100% 100%, 100% 100%;
  padding: .7rem .4rem .3rem;
}
.pain-chart svg { display: block; width: 100%; height: auto; }

/* הנר עצמו */
.cndl { cursor: pointer; outline: none; }
.cndl .hit { fill: transparent; }
.cndl .wick { stroke: #8E4A46; stroke-width: 2.5; transition: stroke .3s; }
.cndl .body {
  fill: #D9544E; stroke: #FF8A6B; stroke-width: 1;
  transition: fill .3s, stroke .3s, filter .3s, transform .3s;
  transform-box: fill-box; transform-origin: center;
}
.cndl .lab {
  fill: var(--dim); font-size: 12.5px; font-weight: 400;
  transition: fill .3s; pointer-events: none;
}
.cndl:hover .body, .cndl:focus-visible .body { fill: #EE6A60; stroke: #FFA98D; }
.cndl:hover .lab,  .cndl:focus-visible .lab  { fill: var(--muted); }
.cndl:focus-visible .ring { stroke: var(--aqua); stroke-width: 1.5; }

/* הנר הפעיל — זוהר רך, לא זוהר צועק */
.cndl[aria-checked="true"] .body {
  fill: #FF6B5E; stroke: #FFC2AE; stroke-width: 1.6;
  filter: drop-shadow(0 0 9px rgba(255,107,94,.55));
  transform: scaleX(1.12);
}
.cndl[aria-checked="true"] .wick { stroke: #FFA98D; }
.cndl[aria-checked="true"] .lab { fill: var(--text); font-weight: 500; }
.cndl .ring { fill: none; stroke: transparent; }
.cndl[aria-checked="true"] .ring { stroke: rgba(255,138,107,.30); stroke-width: 1; }

.pain-note { font-size: .68rem; color: var(--dim); margin-top: .55rem; text-align: center; }

/* הכרטיס — גובה מינימלי קבוע, כדי שהחלפת תוכן לא תזיז את העמוד */
.pain-card {
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface); padding: 1.7rem 1.75rem;
  min-height: 15.5rem; display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 1024px) { .pain-card { min-height: 19rem; } }
.pain-card .pc-n {
  font-size: .7rem; letter-spacing: .14em; color: var(--down);
  text-transform: uppercase; margin-bottom: .55rem;
}
.pain-card h3 { font-size: clamp(1.25rem,3.2vw,1.65rem); font-weight: 600; color: var(--text); line-height: 1.25; }
.pain-card p { font-size: clamp(1rem,2.2vw,1.1rem); color: var(--muted); font-weight: 300; line-height: 1.75; margin-top: .9rem; }
.pain-item[hidden] { display: none !important; }
.pain-item { animation: pain-in .32s ease-out; }
@keyframes pain-in { from { opacity: 0; transform: translateY(5px) } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .pain-item { animation: none }
  .cndl .body, .cndl .wick, .cndl .lab { transition: none }
  .cndl[aria-checked="true"] .body { transform: none }
}

/* ═══════════════════════════════════════════════════════════════
   המחשות החלונות — אנימציה שמתאימה למלל
   ═══════════════════════════════════════════════════════════════
   **כל ההמחשות מופשטות בכוונה** — אין בהן מספרים, אחוזים או צירים,
   ולכן אי אפשר לקרוא בהן טענה על תשואה.

   **תוקן אחרי בדיקה חזותית.** שלוש תקלות היו בגרסה הראשונה:
   `overflow:visible` נתן לנקודות לברוח מהקופסה ולרחף מעל החלון
   שמתחת; ה-`translateX` נמדד בפיקסלים של המסך ולא ביחידות ה-SVG,
   ולכן הנקודות עפו רחוק מדי; ו-`stroke-dasharray` קבוע לא התאים
   לאורך האמיתי של הקו, כך שהקשת פשוט לא צוירה. כאן זה מתוקן
   עם `transform-box: view-box`, `pathLength` ו-`overflow: hidden`. */

.w-art {
  width: 100%; height: auto; display: block; margin-top: 1rem;
  overflow: hidden;                 /* שום דבר לא בורח מהקופסה */
  max-height: 170px;
}
.w-art .ln { stroke: rgba(150,180,212,.16); stroke-width: 1; }

/* ── חלון 1: רכיבים שנערמים לתיק ── */
.w-build rect { transform-box: fill-box; transform-origin: bottom; }
.w-build .bk { animation: wb-rise 7s ease-in-out infinite; opacity: .9; }
.w-build .bk:nth-of-type(2) { animation-delay: .5s }
.w-build .bk:nth-of-type(3) { animation-delay: 1s }
.w-build .bk:nth-of-type(4) { animation-delay: 1.5s }
@keyframes wb-rise {
  0%, 12%   { transform: scaleY(.06); opacity: .22 }
  38%, 76%  { transform: scaleY(1);   opacity: .95 }
  100%      { transform: scaleY(.06); opacity: .22 }
}

/* ── חלון 2: אותו סכום, שתי עלויות ── */
.w-cost .fill { transform-box: fill-box; transform-origin: bottom; }
.w-cost .a { animation: wc-a 8s ease-in-out infinite }
.w-cost .b { animation: wc-b 8s ease-in-out infinite }
@keyframes wc-a { 0%,100% { transform: scaleY(.95) } 50% { transform: scaleY(1) } }
@keyframes wc-b { 0%,100% { transform: scaleY(.62) } 50% { transform: scaleY(.70) } }
.w-cost .bite { animation: wc-bite 8s ease-in-out infinite }
@keyframes wc-bite { 0%,100% { opacity: .30 } 50% { opacity: .62 } }

/* ── חלון 3: תזרים שיוצא במנות ──
   `view-box` גורם ל-translate להימדד ביחידות ה-viewBox ולא
   בפיקסלים — 236 יחידות הן בדיוק מהתיק עד הקצה השמאלי. */
.w-flow .dot { transform-box: view-box; animation: wf-go 6s linear infinite; opacity: 0 }
.w-flow .dot:nth-of-type(2) { animation-delay: 1.2s }
.w-flow .dot:nth-of-type(3) { animation-delay: 2.4s }
.w-flow .dot:nth-of-type(4) { animation-delay: 3.6s }
.w-flow .dot:nth-of-type(5) { animation-delay: 4.8s }
@keyframes wf-go {
  0%   { transform: translateX(0);      opacity: 0 }
  10%  { opacity: 1 }
  85%  { opacity: 1 }
  100% { transform: translateX(-236px); opacity: 0 }
}

/* ── חלון 4: אופק שמתרחב עם השנים ──
   `pathLength="1"` מנרמל את אורך הקו, ולכן הציור עובד בלי
   לדעת כמה הקו ארוך באמת. */
.w-grow .arc { stroke-dasharray: 1; animation: wg-draw 11s ease-in-out infinite }
@keyframes wg-draw {
  0%        { stroke-dashoffset: 1 }
  45%, 80%  { stroke-dashoffset: 0 }
  100%      { stroke-dashoffset: 1 }
}
.w-grow .nod { animation: wg-pop 11s ease-in-out infinite; opacity: 0 }
.w-grow .nod:nth-of-type(2) { animation-delay: .9s }
.w-grow .nod:nth-of-type(3) { animation-delay: 1.8s }
.w-grow .nod:nth-of-type(4) { animation-delay: 2.7s }
@keyframes wg-pop { 0%,6% { opacity: 0 } 18%,78% { opacity: 1 } 100% { opacity: 0 } }

.w-cap { font-size: .68rem; color: var(--dim); margin-top: .5rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .w-build .bk, .w-cost .a, .w-cost .b, .w-cost .bite,
  .w-flow .dot, .w-grow .arc, .w-grow .nod { animation: none !important }
  .w-build .bk { transform: scaleY(1); opacity: .95 }
  .w-flow .dot, .w-grow .nod { opacity: 1 }
  .w-grow .arc { stroke-dashoffset: 0 }
}


/* ═══ אזור הסימולציה — רשת משלו, ממורכזת ═══
   **תוקן אחרי בדיקה חזותית.** הוא השתמש ברשת הבנטו של ארבע
   עמודות, ושני הכרטיסים תפסו שלוש מהן — כך שנשארה עמודה ריקה
   בצד והאזור נראה דחוף לקצה. כאן יש לו רשת משלו: עמודה אחת
   במובייל, ושתיים ביחס 1:1.55 במסך רחב, עם `max-width` ומירכוז. */
.sim-grid {
  display: grid; gap: .9rem; grid-template-columns: 1fr;
  max-width: 54rem; margin: .5rem auto 0;
}
.sim-grid > .gcard { min-height: 15rem; }
@media (min-width: 820px) {
  .sim-grid { grid-template-columns: 1fr 1.55fr; align-items: stretch; }
  .sim-grid > .gcard { min-height: 20rem; }
  /* הכרטיס הראשי משמאל ב-RTL פירושו עמודה שנייה */
  .sim-grid > .sim-main { grid-column: 2; grid-row: 1; }
  .sim-grid > .gcard:not(.sim-main) { grid-column: 1; grid-row: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * המרקיזה — שלוש המטרות, זוחלות אחת אחרי השנייה
 *
 * **איך הלופ נסגר.** הפס מחזיק את הכרטיסים **פעמיים** ומוסע ב-50%
 * מרוחבו, כך שבסוף המסלול הצמד השני יושב בדיוק במקום שהראשון
 * התחיל בו. **הרווח יושב כ-`margin` על הכרטיס ולא כ-`gap` על הפס** —
 * עם `gap` בין שישה כרטיסים יש **חמישה** רווחים, 50% מהרוחב הם
 * שלושה כרטיסים ועוד שניים וחצי, והתפר קופץ בכל סבב.
 *
 * **ההעתק נושא `aria-hidden`**, אחרת קורא מסך מקריא כל מטרה פעמיים.
 * **והפס נעצר** במעבר עכבר, בפוקוס מקלדת, ולגמרי כשביקשו פחות
 * תנועה — ואז הוא נפרס לרשת רגילה. המלל כאן אינו קישוט.
 * ═══════════════════════════════════════════════════════════════════ */
/* **`max-width` ו-`min-width:0` — ובלעדיהם הדף גולש במובייל.**
   `.mq-rail` רחב `max-content` (כ-2,200px). `overflow:hidden` מסתיר
   אותו, אבל **אינו מונע מהרוחב המינימלי שלו לטפס במעלה העץ** דרך
   מכולות flex/grid, שברירת המחדל שלהן היא `min-width:auto`. התוצאה:
   ההירו נבנה לרוחב הפס ולא לרוחב המסך, והכותרת נחתכת. */
.mq { position: relative; overflow: hidden; width: 100%; max-width: 100%; min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-rail { display: flex; width: max-content;
  animation: mq-run var(--mq-dur, 22s) linear infinite; }
.mq.rev .mq-rail { animation-direction: reverse; }
/* **העצירה רק במכשיר שבאמת מרחף — וזה הבאג שהכרטיסים לא זזו בו.**
 *
 * לכרטיסים יש `tabindex`, ולכן **נגיעה אחת במסך נותנת להם פוקוס**,
 * `:focus-within` נדלק, והפס נעצר. במכשיר מגע הפוקוס לא יורד מעצמו,
 * ולכן הוא נעצר **לתמיד** כבר במגע הראשון. גם `:hover` נדבק ב-iOS
 * אחרי נגיעה ולא משתחרר עד שנוגעים במקום אחר.
 *
 * `(hover: hover) and (pointer: fine)` מגביל את שתי העצירות לעכבר
 * או לטראקפד. במגע הפס פשוט ממשיך לזוז — וזה מה שהיה אמור לקרות. */
@media (hover: hover) and (pointer: fine) {
  .mq:hover .mq-rail,
  .mq:focus-within .mq-rail { animation-play-state: paused; }
}
/* **חיובי, לא שלילי — וזה לא קוסמטיקה.**
 *
 * הפס יושב בהקשר RTL: הכרטיס הראשון בקצה הימני והתוכן נמשך שמאלה
 * אל מחוץ למכולה. `translateX(-50%)` דוחף אותו **עוד שמאלה**, כך
 * שהצד הימני מתרוקן ו**שום דבר לא נכנס במקומו** — הכרטיסים נעלמים
 * ולא חוזרים. בחיובי ההעתק השני, שיושב משמאל, נכנס פנימה ימינה
 * ובסוף המסלול עומד בדיוק במקום שההעתק הראשון התחיל בו.
 *
 * נמדד: ב-25%- הצד הימני ריק, ב-25%+ הפס מלא לכל הרוחב. */
@keyframes mq-run { to { transform: translateX(50%); } }
/* בהקשר LTR הכיוון מתהפך */
[dir="ltr"] .mq-rail { animation-name: mq-run-ltr; }
@keyframes mq-run-ltr { to { transform: translateX(-50%); } }

.mq-card { flex: 0 0 auto; width: min(22rem, 80vw); margin-inline-end: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.3rem 1.4rem; text-align: right;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .3s, background .3s, transform .3s; }
.mq-card:hover, .mq-card:focus-visible {
  border-color: color-mix(in srgb, var(--aqua) 42%, var(--line-2));
  background: color-mix(in srgb, var(--aqua) 4%, var(--surface));
  transform: translateY(-3px); outline: none; }
.mq-card .k { font-size: .62rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--aqua); }
.mq-card h3 { font-size: 1.04rem; font-weight: 700; color: var(--text);
  line-height: 1.3; margin: 0; }
.mq-card p { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .mq { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .mq-rail { animation: none; width: auto; display: grid; gap: 14px;
    grid-template-columns: 1fr; }
  .mq-card { width: auto; margin-inline-end: 0; transition: none; }
  .mq-rail > [aria-hidden="true"] { display: none; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .mq-rail { grid-template-columns: repeat(3, 1fr); }
}

/* ===== MGS Kids — שורות הגיל והפסים ===== */
.kid-row { display: flex; align-items: baseline; gap: .7rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.kid-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kid-row > span { font-size: .9rem; color: var(--muted); min-width: 4.6rem; }
.kid-row > b { font-size: 1.12rem; font-weight: 700; color: var(--text); }
.kid-row > em { margin-inline-start: auto; font-style: normal;
  font-size: .8rem; color: var(--dim); }
.kid-row.on > em { color: var(--aqua); }
.kid-bar-h { display: flex; justify-content: space-between;
  align-items: baseline; gap: .6rem; font-size: .92rem; color: var(--muted); }
.kid-bar-h > b { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.kid-bar { height: 6px; background: rgba(150,180,212,.1);
  border-radius: 3px; margin-top: .4rem; overflow: hidden; }
.kid-bar > i { display: block; height: 100%; border-radius: 3px; }
@media (max-width: 639px) {
  .kid-row > span { min-width: 0; }
  .kid-row > em { flex-basis: 100%; margin-inline-start: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * מובייל — פריט flex שמסרב להתכווץ
 *
 * **הבאג שהיה כאן, והוא לא היה קוסמטי.** ההירו הוא `display:flex`,
 * והמכולה שבתוכו היא פריט flex. לפריט flex יש `min-width: auto`
 * כברירת מחדל, כלומר **הוא לא יורד מתחת לרוחב התוכן שלו** — ולכן
 * הוא נבנה ל-768px גם במסך של 390, והכותרת וכל מה שמתחתיה נחתכו
 * משני הצדדים. `max-width` לא עוזר כאן: הוא מגביל למעלה, והבעיה
 * הייתה למטה.
 *
 * הכלל הזה הוא רשת ביטחון לכל מקטע flex בדף, לא רק להירו. */
section.flex > *, .flex > .max-w-3xl, .flex > .max-w-xl, .flex > .max-w-2xl {
  min-width: 0;
  max-width: 100%;
}
/* ושום דבר לא גולש מהמסך, בשום רוחב */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }