/* ============================================================
   השוואת מבטחים — עמודות ברוחב מלא, בשפת העיצוב הקיימת של האתר.

   המבנה נלקח מ-safe4you/calculator אחרי פירוק ה-DOM: שורת עמודות,
   וכל עמודה בנויה לוגו ← מחיר ← תכונות ← כפתורים בתחתית.

   למה עמודות ולא רשימה: ביטוח לא נבחר לפי מחיר בלבד. השתתפות עצמית
   ואופן קבלת הכסף משנים את העסקה יותר מכמה דולרים. עמודות שמות את
   אותה תכונה באותו גובה בכל החברות, ולכן אפשר לסרוק שורה אחת לרוחב.
   היישור נאכף ב-subgrid ולא בגובה מינימלי — גובה מינימלי הוא ניחוש
   שנשבר ברגע שטקסט אחד ארוך מהשאר.

   כל הצבעים, הגופן והרדיוסים הם טוקנים קיימים מ-styles.css.
   הזוכה מקבל את הכרטיס החתום של האתר: גרדיאנט נייבי ו-CTA זהוב.

   ---- על התנועה ----
   כשמסמנים כיסוי הדירוג משתנה, ועמודה עוברת מקום. בלי אנימציה היא
   פשוט מופיעה במקום אחר, והעין מאבדת אותה — צריך לחפש מחדש מי זה מי.
   לכן המעבר הוא FLIP: העמודה מחליקה מהמקום הישן לחדש, והעין עוקבת.

   העקומות אינן ברירות המחדל של CSS. ease-out המובנה חלש מדי, ו-ease-in
   מרגיש איטי דווקא ברגע שהמשתמש מסתכל — בהתחלה. משך התנועה נשאר מתחת
   ל-300ms, חוץ מהסידור מחדש שהוא תנועה על המסך ולכן מקבל ease-in-out.
   ============================================================ */

:root{
  /* עקומות חזקות. ה-cubic-bezier המובנים של CSS חלשים מכדי להרגיש מכוונים. */
  --cmp-out:cubic-bezier(.23,1,.32,1);
  --cmp-in-out:cubic-bezier(.77,0,.175,1);
  --cmp-press:140ms;
  --cmp-fast:180ms;
  --cmp-move:420ms;
}

/* ---------- הרצועה ברוחב מלא ----------
   ההשוואה פורצת את --wrap במכוון. חמש עמודות בתוך 1180px נדחסות עד
   שהתכונות נחתכות, וברגע שהן נחתכות זו כבר לא השוואה. */
.cmp-bleed{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(5,39,77,.045) 0%, transparent 62%),
    var(--bg-2);
  border-block:1px solid var(--line);
  padding-block:44px 52px;
}
.cmp-inner{max-width:1640px;margin-inline:auto;padding-inline:clamp(16px,3.2vw,48px)}

/* ---- הפריסה: שורה לכל חברה ----
   קודם היו כאן חמש עמודות בגולל אופקי. נמדד: רק ב-1440px כל החמש
   נכנסו — ב-1280 נראו ארבע, ב-1024 שלוש, במובייל אחת. חברה שיושבת
   מחוץ למסך באתר שכל תפקידו להשוות היא כשל, ולא ניואנס.

   שורות לא גולשות באף רוחב, נותנות לטקסט מקום, ומתרחבות לחברה
   שישית בלי לשנות דבר. היתרון היחיד שאבד — חמישה מחירים במבט אחד —
   הוחזר ברצועת הדירוג שמעליהן. */
.cmp-grid{
  display:flex;flex-direction:column;
  gap:12px;
  padding:6px 2px 14px;
}

/* ---- רצועת הדירוג ---- */
/* ---- באנר הדוגמה ----
   שקוף לגבי מה שהוא: מחיר חי, נוסע מדומה. חם אבל שקט — רקע שמש
   מדולל וקו דק, לא קופסה צועקת. הכפתור הוא ההמשך הטבעי של המשפט. */
.cmp-demo{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-block-end:14px;padding:12px 18px;
  background:color-mix(in srgb,var(--sun) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--sun) 38%,transparent);
  border-radius:var(--r);
}
.cmp-demo p{margin:0;font-size:14.5px;color:var(--ink);line-height:1.55}
.cmp-demo-go{
  flex:none;border:0;border-radius:999px;cursor:pointer;
  padding:9px 18px;font-family:inherit;font-size:14px;font-weight:600;
  background:var(--grad-navy);color:#fff;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),box-shadow 160ms;
  box-shadow:var(--sh-1);
}
.cmp-demo-go:hover{box-shadow:var(--sh-2)}
.cmp-demo-go:active{transform:scale(.97)}
.cmp-demo-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* הפער בין הזול ליקר — שורה אחת, המספר בזהב החתום של הכתר */
.cmp-spread{
  margin:0 0 10px;font-size:14.5px;color:var(--ink-2);
}
.cmp-spread b{
  color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--sun) 24%,transparent);
  padding:1px 7px;border-radius:6px;
}

.cmp-rank{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-block-end:16px;
}
.cmp-rank[hidden]{display:none}
.rk{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 14px;min-block-size:44px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;cursor:pointer;
  transition:box-shadow var(--cmp-fast) var(--cmp-out),
             border-color var(--cmp-fast) var(--cmp-out);
}
.rk-n{font-size:16px;font-weight:600;color:var(--deep);font-variant-numeric:tabular-nums}
.rk-name{font-size:13px;color:var(--muted)}
.rk[data-best]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.rk[data-best] .rk-n{color:var(--brand)}
@media (hover:hover) and (pointer:fine){ .rk:hover{box-shadow:var(--sh-1)} }
.rk:active{transform:scale(.97)}
.rk:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- השורה ----
   ארבעה אזורים: מותג · מחיר · תכונות · פעולה. התכונות לוקחות את מה
   שנשאר, ולכן משפט שלם נכנס בשורה אחת במקום להישבר לשלוש. */
.cmp-row{
  display:grid;
  grid-template-columns:minmax(140px,175px) minmax(130px,165px) 1fr auto;
  align-items:center;gap:22px;
  padding:14px 20px;
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  transition:box-shadow var(--cmp-fast) var(--cmp-out),
             transform var(--cmp-fast) var(--cmp-out);
}
@media (hover:hover) and (pointer:fine){
  .cmp-row:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
}
.cmp-row.is-best{
  background:var(--grad-navy);color:#fff;
  box-shadow:0 8px 18px rgba(5,39,77,.2), 0 30px 60px -26px rgba(5,39,77,.55);
}
@media (hover:hover) and (pointer:fine){
  .cmp-row.is-best:hover{box-shadow:0 10px 22px rgba(5,39,77,.24), 0 36px 70px -28px rgba(5,39,77,.62)}
}
.cmp-row.is-est{box-shadow:var(--sh-1)}

/* הבזק קצר כשמגיעים לשורה מרצועת הדירוג */
.cmp-row.is-flash{box-shadow:var(--sh-3), 0 0 0 2px var(--sun)}

/* בזמן סידור מחדש מכבים את המעברים המקומיים, כדי שה-FLIP לא יתנגש בהם. */
.cmp-grid.is-sorting .cmp-row{transition:none}

/* ---- אזור המותג ---- */
.cmp-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- טאבלט: הפעולה יורדת לשורה שנייה ---- */
@media (max-width:900px){
  .cmp-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;gap:14px 18px;
  }
  .cmp-row .cmp-attrs{grid-column:1 / -1}
  .cmp-row .cmp-actions{grid-column:1 / -1}
}
@media (max-width:560px){
  .cmp-row{grid-template-columns:1fr;padding:16px 18px}
  .cmp-rank{gap:6px}
  .rk{padding:7px 11px}
  .rk-name{font-size:12px}
}

/* ---------- המותג ---------- */
/* גובה נעול כדי שסמלים בפרופורציות שונות ייראו שווי משקל */
.cmp-logo{
  block-size:34px;inline-size:auto;max-inline-size:150px;
  object-fit:contain;object-position:right center;
}
.cmp-row.is-best .cmp-logo{filter:brightness(0) invert(1);opacity:.96}
.cmp-row.is-est .cmp-logo{opacity:.7}

/* נפילה כשאין קובץ לוגו. אותו גובה, כדי שהשורה לא תקפוץ. */
.cmp-word{
  display:flex;align-items:center;block-size:34px;
  font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--deep);
}
.cmp-row.is-best .cmp-word{color:#fff}
.cmp-row.is-est .cmp-word{color:var(--ink-2)}

.cmp-tag{
  flex:none;
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;
  padding:4px 11px;border-radius:var(--r-sm);
  background:var(--bg-3);color:var(--muted);
  white-space:nowrap;
}
.cmp-row.is-best .cmp-tag{
  background:var(--sun);color:var(--deep);
  box-shadow:0 2px 8px rgba(217,164,65,.4);
}

/* ---------- המחיר ---------- */
.cmp-price{min-inline-size:0}
.cmp-val{
  display:flex;align-items:flex-start;gap:4px;
  font-weight:600;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:var(--deep);line-height:.95;
}
/* המספר החדש נכנס מלמטה והישן יוצא למעלה — הכיוון עצמו אומר
   "התעדכן". טשטוש היה כאן קודם; הוא הפך שני מספרים ברורים לכתם. */
.cmp-val .n{
  display:inline-block;
  transition:transform var(--cmp-fast) var(--cmp-out), opacity var(--cmp-fast) var(--cmp-out);
}
.cmp-val.is-in .n{transform:translateY(.3em);opacity:0}
.cmp-val .cur{font-size:17px;color:var(--muted-2);margin-block-start:4px}
.cmp-val .n{font-size:clamp(30px,2.6vw,38px)}
.cmp-row.is-best .cmp-val{color:#fff}
.cmp-row.is-best .cmp-val .cur{color:rgba(255,255,255,.55)}
.cmp-row.is-best .cmp-val .n{font-size:clamp(34px,3vw,44px)}
.cmp-row.is-est .cmp-val{color:var(--ink-2)}

.cmp-perday{margin:9px 0 0;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cmp-row.is-best .cmp-perday{color:rgba(255,255,255,.68)}

.cmp-sub{
  margin:10px 0 0;font-size:13.5px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--muted);
}
.cmp-row.is-best .cmp-sub{color:var(--sun)}

/* ---------- התכונות ----------
   בשורה הן יושבות זו לצד זו ולוקחות את הרוחב שנשאר, ולכן משפט שלם
   נכנס בשורה אחת במקום להישבר לשלוש כמו בעמודה של 240px. */
.cmp-attrs{
  margin:0;min-inline-size:0;
  display:flex;flex-wrap:wrap;align-content:center;gap:10px 34px;
  border-inline-start:1px solid var(--line);padding-inline-start:22px;
}
.cmp-row.is-best .cmp-attrs{border-inline-start-color:rgba(255,255,255,.16)}

.cmp-attr{margin:0;min-inline-size:0;flex:0 1 auto;max-inline-size:34ch}
.cmp-attr dt{font-size:12px;color:var(--muted);margin-block-end:3px}
.cmp-attr dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink);font-weight:500}
.cmp-attr dd small{display:block;font-weight:400;font-size:13.5px;color:var(--muted);line-height:1.65}
.cmp-row.is-best .cmp-attr dt{color:rgba(255,255,255,.56)}
.cmp-row.is-best .cmp-attr dd{color:#fff}
.cmp-row.is-best .cmp-attr dd small{color:rgba(255,255,255,.72)}

/* ---------- הפעולה, בקצה השורה ---------- */
.cmp-actions{display:flex;gap:10px;flex:none}

.cmp-pick{
  font-family:inherit;font-size:15px;font-weight:500;
  padding:12px 22px;min-block-size:46px;
  border:1px solid var(--brand);border-radius:var(--r-sm);
  background:#fff;color:var(--brand);cursor:pointer;
  transition:background var(--cmp-fast) var(--cmp-out),
             box-shadow var(--cmp-fast) var(--cmp-out),
             transform var(--cmp-press) var(--cmp-out);
}
@media (hover:hover) and (pointer:fine){
  .cmp-pick:hover{background:var(--brand-050);box-shadow:var(--sh-1)}
}
/* משוב מיידי ללחיצה. בלי זה הכפתור מרגיש כאילו לא שמע. */
.cmp-pick:active{transform:scale(.97)}
.cmp-row.is-best .cmp-pick{
  background:var(--sun);border-color:var(--sun);color:var(--deep);
  box-shadow:0 4px 12px rgba(217,164,65,.3), 0 16px 32px -12px rgba(217,164,65,.55);
}
@media (hover:hover) and (pointer:fine){
  .cmp-row.is-best .cmp-pick:hover{background:var(--sun-soft)}
}
.cmp-pick:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cmp-row.is-best .cmp-pick:focus-visible{outline-color:#fff}

/* מתג הפירוט: שקט, יושב עם הצ'יפים, לא מתחרה בכפתור הבחירה */
.cmp-detail-toggle{
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:13.5px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
  min-block-size:44px;padding:6px 10px;
  margin-inline-start:auto;
  transition:color var(--cmp-fast) var(--cmp-out);
}
.cmp-detail-toggle[aria-pressed="true"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .cmp-detail-toggle:hover{color:var(--ink)} }

/* השורות הנוספות חולקות את תא ה-attrs — מוסתרות יחד, נפתחות יחד */
.cmp-extra[hidden]{display:none}

.cmp-more{
  background:none;border:0;cursor:pointer;
  /* גובה מגע 44px בלי לשנות את המראה: הריפוד גדל, הטקסט נשאר */
  min-block-size:44px;padding:6px 10px;
  font-family:inherit;font-size:13.5px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--cmp-fast) var(--cmp-out), transform var(--cmp-press) var(--cmp-out);
}
.cmp-more:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .cmp-more:hover{color:var(--ink)} }
.cmp-row.is-best .cmp-more{color:rgba(255,255,255,.72)}
@media (hover:hover) and (pointer:fine){ .cmp-row.is-best .cmp-more:hover{color:#fff} }

/* ---------- סרגל התנאים והמסננים ---------- */
.cmp-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;
  margin-block-end:20px;font-size:15px;color:var(--muted);
}
.cmp-bar b{color:var(--ink);font-weight:500}
.cmp-bar span{display:inline-flex;align-items:center;gap:7px}
/* הסמל עוזר לסרוק, לא מתחרה בטקסט */
.bar-ic{flex:none;opacity:.55}

.cmp-filters{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-block-end:26px}
.cmp-chip{
  font-family:inherit;font-size:14.5px;
  padding:10px 18px;min-block-size:44px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink-2);cursor:pointer;
  transition:background var(--cmp-fast) var(--cmp-out),
             color var(--cmp-fast) var(--cmp-out),
             box-shadow var(--cmp-fast) var(--cmp-out),
             transform var(--cmp-press) var(--cmp-out);
}
@media (hover:hover) and (pointer:fine){ .cmp-chip:hover{box-shadow:var(--sh-1)} }
.cmp-chip:active{transform:scale(.97)}
.cmp-chip[aria-pressed="true"]{
  background:var(--brand-050);color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand);border-color:transparent;
}
.cmp-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- כניסה ראשונה, מדורגת ----------
   רק בטעינה. סידור מחדש משתמש ב-FLIP ולא בזה. */
.cmp-grid.is-first .cmp-row{
  animation:cmp-rise .34s var(--cmp-out) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes cmp-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* תנועה מופחתת: שומרים על שקיפות וצבע, מוותרים על תזוזה. */
@media (prefers-reduced-motion:reduce){
  .cmp-grid.is-first .cmp-row{animation:none}
  .cmp-row{transition:box-shadow var(--cmp-fast) linear}
  .cmp-row:hover{transform:none}
  .cmp-val .n{transition:opacity 150ms linear}
  .cmp-val.is-in .n{transform:none;opacity:.35}
}

html.a11y-contrast .cmp-row{box-shadow:inset 0 0 0 1px var(--ink)}
html.a11y-contrast .cmp-row.is-best{box-shadow:inset 0 0 0 3px var(--sun)}

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

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

.cmp-row.is-picked{box-shadow:var(--sh-3), inset 0 0 0 2px var(--brand)}
.cmp-row.is-best.is-picked{box-shadow:0 8px 18px rgba(5,39,77,.2), 0 44px 84px -28px rgba(5,39,77,.62), inset 0 0 0 2px var(--sun)}

.cmp-check{
  display:none;
  inline-size:16px;block-size:16px;flex:none;
  border-radius:50%;
  background:var(--brand);color:#fff;
  align-items:center;justify-content:center;
  font-size:12px;line-height:1;
}
.cmp-row.is-picked .cmp-check{display:inline-flex}
.cmp-row.is-best .cmp-check{background:var(--sun);color:var(--deep)}

.cmp-row.is-picked .cmp-pick{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.cmp-row.is-best.is-picked .cmp-pick{background:var(--sun);border-color:var(--sun);color:var(--deep)}

/* ---------- סרגל הבחירה ----------
   נצמד לתחתית המסך אחרי בחירה, כדי שההמשך יהיה זמין בלי לגלול חזרה. */
.cmp-tray{
  position:sticky;inset-block-end:0;z-index:20;
  margin-block-start:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  padding:16px 20px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--sh-3);
  /* נכנס מלמטה, יוצא מהר יותר משנכנס */
  transition:opacity var(--cmp-fast) var(--cmp-out), transform var(--cmp-fast) var(--cmp-out);
}
.cmp-tray[hidden]{display:none}
.cmp-tray.is-in{opacity:1;transform:none}
.cmp-tray:not(.is-in){opacity:0;transform:translateY(10px)}

.cmp-tray-txt{flex:1 1 240px;font-size:15px;color:var(--ink)}
.cmp-tray-txt b{font-weight:500}
.cmp-tray-txt small{display:block;font-size:13px;color:var(--muted);margin-block-start:2px}
.cmp-tray .btn{flex:none}

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

.cmp-agent{
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:22px 24px;
  margin-block-end:24px;
}
.cmp-agent-head{display:flex;align-items:center;gap:10px;margin-block-end:6px}
.cmp-agent-head h3{margin:0;font-size:17px;font-weight:500;color:var(--deep)}
.cmp-agent-lede{margin:0 0 16px;font-size:14.5px;color:var(--muted);line-height:1.65}

.cmp-agent-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.cmp-agent-row textarea{
  flex:1 1 320px;min-inline-size:0;
  font-family:inherit;font-size:15.5px;line-height:1.6;
  padding:13px 15px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);color:var(--ink);
  resize:vertical;min-block-size:78px;
  transition:box-shadow var(--cmp-fast) var(--cmp-out), background var(--cmp-fast) var(--cmp-out);
}
.cmp-agent-row textarea:focus{
  outline:0;background:#fff;
  box-shadow:inset 0 0 0 2px var(--brand);
}
.cmp-agent-row textarea::placeholder{color:var(--muted-2)}

.cmp-agent-go{
  flex:none;align-self:flex-start;
  font-family:inherit;font-size:15.5px;font-weight:500;
  padding:14px 26px;min-block-size:50px;
  border:0;border-radius:var(--r-sm);
  background:var(--brand);color:#fff;cursor:pointer;
  transition:background var(--cmp-fast) var(--cmp-out), transform var(--cmp-press) var(--cmp-out);
}
@media (hover:hover) and (pointer:fine){ .cmp-agent-go:hover{background:var(--brand-600)} }
.cmp-agent-go:active{transform:scale(.97)}
.cmp-agent-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- מה שהסוכן הבין ---------- */
.cmp-reasons{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.cmp-reasons[hidden]{display:none}
.cmp-reason{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 14px;border-radius:var(--r);
  background:var(--brand-050);
  font-size:14.5px;line-height:1.55;color:var(--ink);
  animation:cmp-reason-in .28s var(--cmp-out) both;
  animation-delay:calc(var(--i,0) * 45ms);
}
.cmp-reason b{font-weight:500}
.cmp-reason small{display:block;color:var(--muted);font-size:13.5px;margin-block-start:2px}
/* אזהרה, לא בחירה: משהו שאדם צריך לבדוק ולא משהו שסימנּו */
.cmp-reason.is-warn{background:#FDF3E5;color:#8A4B12}
.cmp-reason.is-warn small{color:#A8681F}
@keyframes cmp-reason-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* צ'יפ שהסוכן סימן נראה אחרת מצ'יפ שהלקוח סימן, כדי שיהיה ברור
   מה נבחר עבורך ומה בחרת בעצמך. */
.cmp-chip[data-auto="true"]{
  background:var(--brand-050);color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand), 0 0 0 3px rgba(5,39,77,.07);
  border-color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .cmp-reason{animation:none}
  .cmp-tray{transition:opacity 150ms linear}
}

/* ============================================================
   הכותרת של הרצועה, ורגע ההגעה
   ============================================================ */
.cmp-head{max-width:62ch;margin-block-end:28px}
.cmp-head .eyebrow{margin:0 0 8px}
.cmp-head h2{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);font-weight:500;line-height:1.25;color:var(--deep)}
.cmp-head .lede{margin:0;color:var(--muted);font-size:16.5px;line-height:1.7}

.cmp-foot{
  margin-block-start:20px;font-size:13px;color:var(--muted);
  line-height:1.75;max-width:88ch;
}

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

   animation-timeline: view() עושה את זה בלי JavaScript ובלי מאזין
   גלילה, ולכן הוא לא מתחרה על ה-thread הראשי בזמן שהמשתמש גולל. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .cmp-bleed .cmp-row{
      animation:cmp-arrive linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%;
    }
    @keyframes cmp-arrive{
      from{opacity:0;transform:translateY(26px) scale(.97)}
      to{opacity:1;transform:none}
    }
    /* ההשהיה הופכת חשיפה אחת לרצף. 55ms הוא מספיק כדי להיקרא כרצף
       ולא מספיק כדי להרגיש איטי. */
    .cmp-bleed .cmp-row:nth-child(2){animation-delay:55ms}
    .cmp-bleed .cmp-row:nth-child(3){animation-delay:110ms}
    .cmp-bleed .cmp-row:nth-child(4){animation-delay:165ms}
    .cmp-bleed .cmp-row:nth-child(5){animation-delay:220ms}

    /* הכותרת והסוכן עולים לפניהן, כדי שהעין תגיע מוכנה. */
    .cmp-bleed .cmp-head,
    .cmp-bleed .cmp-agent{
      animation:cmp-arrive linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 18%;
    }
  }
}

/* בלי תמיכה, התוכן פשוט שם. אף פעם לא מסתירים תוכן מאחורי אנימציה. */
@supports not (animation-timeline: view()){
  .cmp-bleed .cmp-row,
  .cmp-bleed .cmp-head,
  .cmp-bleed .cmp-agent{opacity:1;transform:none}
}

/* הכניסה המדורגת של הטעינה הראשונה לא מתנגשת עם חשיפת הגלילה. */
.cmp-grid.is-first .cmp-row{animation-timeline:auto}

/* ============================================================
   שורת החברות
   ============================================================
   החליפה באנר של מבטח יחיד. הלוגואים נעולים לגובה אחיד עם
   object-fit:contain, כדי שסמלים בפרופורציות שונות ייקראו שווי
   משקל — אחרת הגדול שבהם נראה כמו החברה המועדפת. */
.insurers{padding-block:clamp(32px,4vw,52px);background:var(--bg)}
.ins-lead{
  margin:0 0 22px;text-align:center;
  font-size:14px;color:var(--muted);
}
.ins-row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,4vw,56px);
}
.ins-row li{display:flex;align-items:center}
.ins-row img{
  block-size:34px;inline-size:auto;max-inline-size:150px;
  object-fit:contain;
  /* אפור עדין: השורה הזאת אומרת "אלה החברות", לא "תסתכלו על הלוגו".
     הצבע חוזר בריחוף. */
  filter:grayscale(1);opacity:.62;
  transition:filter 220ms cubic-bezier(.23,1,.32,1), opacity 220ms cubic-bezier(.23,1,.32,1);
}
@media (hover:hover) and (pointer:fine){
  .ins-row li:hover img{filter:none;opacity:1}
}
.ins-word{
  font-size:21px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink-2);opacity:.72;
}
.ins-note{
  margin:22px 0 0;text-align:center;
  font-size:12.5px;color:var(--muted-2);line-height:1.6;
}


/* ---- פאנל "עוד כיסויים" ---- */
.cmp-more-wrap{position:relative;display:inline-flex}
.cmp-chip-more[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);font-weight:500}
.cmp-more-pop{
  /* הצ'יפ אחרון בשורה (הקצה השמאלי ב-RTL) — הפאנל נפתח פנימה, לכיוון
     מרכז העמוד, אחרת הוא בורח מהמסך. */
  position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);
  z-index:6;
  inline-size:min(400px, calc(100vw - 40px));
  max-block-size:min(430px, 60vh);overflow-y:auto;
  background:#fff;border-radius:16px;padding:8px 14px 12px;
  box-shadow:0 2px 6px rgba(5,39,77,.08), 0 18px 44px -12px rgba(5,39,77,.28);
}
.cmw-group{
  margin:12px 0 4px;font-size:12.5px;font-weight:600;color:var(--muted);
}
.cmw-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:8px 6px;border-radius:10px;cursor:pointer;
  transition:background 130ms;
}
.cmw-row:hover{background:var(--bg-2)}
.cmw-row input{inline-size:17px;block-size:17px;accent-color:var(--brand);cursor:pointer}
.cmw-name{font-size:14px;color:var(--ink);line-height:1.4}
.cmw-price{font-size:13.5px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmw-note{
  margin:12px 0 2px;padding-block-start:10px;border-block-start:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.55;
}
@media (max-width:640px){
  .cmp-more-wrap{position:static}
  .cmp-more-pop{inset-inline:16px;inline-size:auto}
  .cmp-filters{position:relative}
}


/* ---- העמודות בזמן שמחיר חדש בדרך ----
   הרשת מעומעמת מעט ולא ניתנת ללחיצה, כדי שאיש לא יבחר חברה על סמך
   מחיר שכבר לא תקף. אין כאן שלד מרצד: המחירים הקודמים עדיין קריאים,
   רק מסומנים כלא-סופיים. */
.cmp-grid.is-pending{opacity:.62;pointer-events:none;transition:opacity 180ms ease}
@media (prefers-reduced-motion:reduce){ .cmp-grid.is-pending{transition:none} }


/* פתיחה וסגירה עם מעבר, בלי לגעת ב-JS: התכונה hidden נשארת מקור
   האמת, ו-allow-discrete מחליף את display רק בקצה המעבר. יציאה
   מהירה מכניסה — כך זה מרגיש מגיב ולא מתמהמה. */
.cmp-more-pop{
  opacity:1;transform:none;
  transition:opacity var(--cmp-fast) var(--cmp-out),
             transform var(--cmp-fast) var(--cmp-out),
             display var(--cmp-fast) allow-discrete;
}
.cmp-more-pop[hidden]{display:none;opacity:0;transform:translateY(-6px);transition-duration:120ms}
@starting-style{.cmp-more-pop:not([hidden]){opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  .cmp-more-pop,.cmp-more-pop[hidden]{transition:none;transform:none}
}

/* פוקוס בתוך פאנל הכיסויים: תיבת סימון של 17px קטנה מכדי להיקרא
   כממוקדת לבדה, ולכן כל השורה נדלקת איתה. */
.cmw-row:focus-within{background:var(--bg-2)}
.cmw-row input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* עמודה שלא החזירה מחיר נשארת במקומה ומסבירה את עצמה, במקום להיעלם
   ולהשאיר את הרושם שהחברה לא קיימת. */
.cmp-row.is-nop{opacity:.72}
.cmp-row.is-nop .cmp-logo,.cmp-row.is-nop .cmp-word{opacity:.55}
.cmp-nop{margin:0;font-size:15px;color:var(--muted);line-height:1.5}
.cmp-retry{
  margin-block-start:10px;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 16px;min-block-size:44px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--brand);
  transition:background var(--cmp-fast) var(--cmp-out);
}
.cmp-retry:hover{background:var(--brand-050)}
.cmp-retry:active{transform:scale(.97)}
.cmp-retry:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* צ'יפ שיש לו הסבר מסומן בקו תחתון מנוקד — רמז שקט שיש מה לרחף עליו,
   בלי אייקון ⓘ שמוסיף פריט רביעי לכל צ'יפ. */
.cmp-chip[title]{text-decoration:underline dotted var(--line);text-underline-offset:4px}


/* ---- שורת הלוגואים בזמן חיפוש ----
   הזכוכית עוברת מלוגו ללוגו, וכל אחד מקבל את הצבע שלו כשהיא מגיעה
   אליו. זה לא קישוט: כל החברות באמת נבדקות, והשורה הזאת אומרת את
   זה בלי מילה. כשהמחירים מגיעים הכל חוזר לאפור השקט. */
.ins-row{position:relative}
.ins-row.is-searching img{filter:grayscale(1);opacity:.35}
.ins-row.is-searching li.is-on img{filter:none;opacity:1}
.ins-row.is-searching li.is-on .ins-word{color:var(--brand);opacity:1}

.ins-glass{
  position:absolute;inset-block-start:50%;
  inline-size:26px;block-size:26px;margin-block-start:-13px;
  background:url("assets/facts/search.webp") center/contain no-repeat;
  opacity:0;pointer-events:none;
  transition:inset-inline-start 420ms cubic-bezier(.45,0,.55,1),
             opacity 220ms ease;
}
.ins-row.is-searching .ins-glass{opacity:1}

.ins-searching-note{
  margin:14px 0 0;text-align:center;
  font-size:12.5px;color:var(--muted);
  min-block-size:1.4em;
}

@media (prefers-reduced-motion:reduce){
  .ins-glass{transition:opacity 220ms ease}
  .ins-row.is-searching img{filter:grayscale(1);opacity:.62}
  .ins-row.is-searching li.is-on img{filter:none;opacity:1}
}

/* מחיר שמור: מוצג במלואו, אבל מסומן כלא-חי — לא מעומעם עד כדי
   חוסר קריאות, ולא מוצג כאילו הוא ציטוט של הרגע. */
.cmp-row.is-cached .cmp-tag{background:#FBF1DC;color:#7A5A1B}
.cmp-row.is-cached .cmp-val{color:var(--ink-2)}