/* חשבונות בנק V2: דף "בנק מול בנק" (Account/BankCompareV2.aspx).
   מקור: .agents/briefs/bank-accounts-v2/mockup.css. הפלטה והצורות לקוחות מדף המסחר העצמאי,
   כדי שהמעבר בין הלשוניות ירגיש כמו אותו אתר. קידומות: ba- = bank accounts, bb- = bank vs bank.
   ⚠️ הכול תחת .ba-page, כדי לא לדלוף לשאר האתר (המאסטר טוען Bootstrap). */
/* QA 27/10 (רונן): גופן בסיס 16px בכל רוחב, טקסט משני לא יורד מ-13px, מספרים 17-18px */
.ba-page { background: #f4f7f6; color: #263d35; font-size: 16px; line-height: 1.55; direction: rtl; text-align: right; }
.ba-page *, .ba-page *::before, .ba-page *::after { box-sizing: border-box; }
.ba-page a { color: var(--ba-brand-dark); }
.ba-page button { font-family: inherit; }
.ba-page h1, .ba-page h2, .ba-page h3, .ba-page h4, .ba-page p { margin: 0; }
.ba-page {
    --ba-brand: #17765a;
    --ba-brand-dark: #0f5a47;
    --ba-bg: #f4f7f6;
    --ba-line: #dce8e3;
    --ba-soft: #eef4f1;
    --ba-ink: #263d35;
    --ba-muted: #5a6e66;
    --ba-note: #8a5a2b;
    --ba-note-bg: #fdf6ec;
    --ba-ad: #f3f1fb;
    --ba-ad-line: #d9d3f0;
    --ba-ad-ink: #4b3f8f;
}

/* ---- מעטפת ---- */
/* QA 27/10 ש-1: הרוחב המלא של הדפוס הרחב (1400, כמו #main.ba-main). דפי הקריאה (narrow) נשארים צרים יותר */
.ba-wrap { max-width: 1400px; margin: 0 auto; padding: 14px 16px 90px; }
.ba-wrap.narrow { max-width: 1160px; }
@media (min-width: 1200px) { .ba-wrap { padding-left: 24px; padding-right: 24px; } }
/* QA רונן 28/10: הפירורים כמו בהשוואת קופות הגמל וניהול התיקים: 16px, קישור ירוק, החץ › (מוצג שמאלה בעברית) */
.ba-crumbs { font-size: 16px; color: var(--ba-ink); margin-bottom: 10px; line-height: 1.5; }
.ba-crumbs a { color: var(--ba-brand); text-decoration: none; }
.ba-crumbs a:hover { text-decoration: underline; }
.ba-crumbs .sep { color: var(--ba-muted); margin: 0 6px; }
.ba-h1 { font-size: 30px; line-height: 1.25; font-weight: 700; margin-bottom: 6px; }
.ba-lede { font-size: 17px; max-width: 900px; color: #33473f; }
.ba-lede b { color: var(--ba-ink); }
.ba-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; color: var(--ba-muted); margin: 10px 0 14px; }
.ba-textbtn { background: none; border: 0; color: var(--ba-brand-dark); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 4px 0; }

/* ---- טאבי הנושא: אותו סרגל מקטעים של דף המסחר, מורחב לחמישה נושאי בנקאות ---- */
.ba-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; padding: 5px; margin: 14px 0 4px; }
.ba-tabs a { flex: 1 1 auto; text-align: center; padding: 9px 14px; border-radius: 10px; text-decoration: none; color: var(--ba-ink); font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.ba-tabs a:hover { background: var(--ba-soft); }
.ba-tabs a.on { background: var(--ba-brand); color: #fff; }
.ba-tabs .soon { font-size: 11.5px; font-weight: 500; background: var(--ba-soft); color: var(--ba-muted); border-radius: 999px; padding: 1px 7px; }

/* ---- תמונת מצב: שלושה נתונים עם מקור ותאריך (גם בלוק תשובה ל-AEO) ---- */

.ba-news { background: #fff8e6; border: 1px solid #f0dca8; border-radius: 12px; padding: 10px 14px; font-size: 15px; color: #5b4a17; margin: 0 0 4px; }
.ba-news a { color: #5b4a17; font-weight: 600; white-space: nowrap; }

/* ---- פריסת דף A: עמודה ראשית + סיידבר ---- */

/* ---- פאנל שליטה ---- */
.ba-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ba-chip { border: 1.5px solid var(--ba-line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 15px; cursor: pointer; min-height: 40px; color: var(--ba-ink); }
.ba-chip:hover { border-color: var(--ba-brand); }
.ba-chip.on { background: var(--ba-brand); border-color: var(--ba-brand); color: #fff; font-weight: 600; }
.ba-chip small { opacity: .8; font-size: 13px; }

/* ---- כרטיס חשבון (A) ---- */
/* QA 27/10 ש-4: הלוגו ממלא את המסגרת (contain), ולא את מאפייני width/height של התג (76x46) ששומרים מקום בלבד.
   ⚠️ קובצי הלוגו הם 110x70 עם שוליים לבנים רחבים; מעבר ל-1x הם מיטשטשים, ולכן המסגרת לא עוברת 110px. */
.ba-logo { display: flex; align-items: center; justify-content: center; width: 112px; height: 70px; margin: 0 auto 6px; border: 1px solid var(--ba-line); border-radius: 8px; background: #fff; overflow: hidden; font-weight: 700; color: var(--ba-brand-dark); font-size: 15px; }
.ba-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ba-check { font-size: 13.5px; color: var(--ba-note); background: var(--ba-note-bg); border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.ba-actions { display: flex; flex-direction: column; gap: 8px; }
/* QA 27/10 ש-2: .ba-page a (0,1,1) גובר על .ba-cta (0,1,0), ולכן הטקסט היה ירוק כהה על ירוק. לבן על #17765a = 5.6:1 (AA) */
.ba-cta, .ba-page a.ba-cta { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--ba-brand); color: #fff; border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 16px; text-decoration: none; min-height: 48px; border: 2px solid var(--ba-brand); }
.ba-cta:hover, .ba-page a.ba-cta:hover { background: var(--ba-brand-dark); border-color: var(--ba-brand-dark); color: #fff; }
.ba-cta.ghost, .ba-page a.ba-cta.ghost { background: #fff; color: var(--ba-brand-dark); border-color: var(--ba-line); font-weight: 600; }
.ba-cta.ghost:hover, .ba-page a.ba-cta.ghost:hover { border-color: var(--ba-brand); background: var(--ba-soft); color: var(--ba-brand-dark); }

/* ---- כרטיס מודעה נייטיבי בתוך הרשימה (מחליף את באנרי 300x300 / 300x600) ---- */

/* ---- סיידבר ---- */

/* ---- בלוקי תוכן מתחת לרשימה ---- */
.ba-sec { background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; padding: 18px 20px; margin-top: 18px; }
.ba-sec h2 { font-size: 22px; margin-bottom: 8px; }
.ba-sec p + p { margin-top: 8px; }
.ba-faq details { border-top: 1px solid var(--ba-line); }
.ba-faq details:first-of-type { border-top: 0; }
.ba-faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 10px; min-height: 44px; align-items: center; }
.ba-faq summary::-webkit-details-marker { display: none; }
.ba-faq summary::after { content: '+'; color: var(--ba-brand); font-size: 20px; }
.ba-faq details[open] summary::after { content: '−'; }
.ba-faq details p { padding: 0 0 14px; color: #33473f; }
.ba-cross { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.ba-cross a { background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--ba-ink); font-weight: 600; font-size: 15.5px; }
.ba-cross a span { display: block; font-weight: 400; font-size: 13.5px; color: var(--ba-muted); margin-top: 2px; }
.ba-disc { font-size: 13.5px; color: var(--ba-muted); margin-top: 14px; }
.ba-author { display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--ba-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ba-line); }
.ba-author i { width: 40px; height: 40px; border-radius: 50%; background: var(--ba-soft); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; color: var(--ba-brand-dark); flex: 0 0 auto; }

/* ---- מגש השוואה ---- */

/* ---- bottom sheet לסינון במובייל ---- */

/* =========================== מוקאפ B: בנק מול בנק =========================== */
.bb-fit { background: #fff; border: 1.5px solid var(--ba-brand); border-radius: 16px; padding: 16px 18px; margin: 14px 0; box-shadow: 0 4px 18px rgba(15, 90, 71, .08); }
.bb-fit h2 { font-size: 19px; margin-bottom: 10px; }
.bb-q { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 8px 0; }
.bb-q + .bb-q { border-top: 1px dashed var(--ba-line); }
.bb-q .q { font-weight: 600; font-size: 15.5px; }
.bb-sum { margin-top: 10px; background: var(--ba-soft); border-radius: 10px; padding: 10px 12px; font-size: 15.5px; }
.bb-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.bb-win { background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.bb-win .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ba-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; color: var(--ba-brand-dark); font-weight: 700; }
.bb-win .k { font-size: 13.5px; color: var(--ba-muted); }
.bb-win .v { font-weight: 700; font-size: 17px; line-height: 1.3; }
.bb-win .s { font-size: 13.5px; color: var(--ba-muted); }
.bb-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; color: var(--ba-muted); }
.bb-table { background: #fff; border: 1px solid var(--ba-line); border-radius: 16px; overflow: hidden; }
.bb-cols, .bb-row-main { display: grid; grid-template-columns: 250px minmax(0, 1.4fr) minmax(118px, .7fr) minmax(118px, .7fr) minmax(96px, .55fr) minmax(96px, .55fr) 190px; gap: 12px; align-items: center; padding: 12px 16px; }
.bb-cols { background: var(--ba-soft); font-size: 13.5px; font-weight: 700; color: var(--ba-muted); padding-top: 9px; padding-bottom: 9px; }
.bb-cols button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 4px 0; text-align: right; }
.bb-cols button.on { color: var(--ba-brand-dark); }
.bb-cols button.on::after { content: ' ▲'; font-size: 9px; }
.bb-row { border-top: 1px solid var(--ba-line); }
.bb-bank { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bb-bank .ba-logo { width: 104px; height: 64px; margin: 0; flex: 0 0 auto; font-size: 13.5px; }
.bb-bank b { display: block; font-size: 16px; line-height: 1.25; }
.bb-bank small { font-size: 13px; color: var(--ba-muted); }
.bb-acc b { display: block; font-size: 15.5px; }
.bb-acc small { font-size: 13px; color: var(--ba-muted); display: block; }
.bb-num { font-weight: 700; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bb-num small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ba-muted); }
.bb-num.best { color: var(--ba-brand); }
.bb-num .lbl { display: none; }
.bb-act { display: flex; flex-direction: column; gap: 4px; }
.bb-act .ba-cta { min-height: 44px; padding: 8px 10px; font-size: 15px; }
/* הערת היציאה: 12.5px ובצבע muted (5.4:1 על לבן; #6b7a80 ב-11.5px היה 4.45:1) */
.bb-adnote { display: block; text-align: center; font-size: 12.5px; color: var(--ba-muted); line-height: 1.3; }
.bb-review { display: block; text-align: center; font-size: 14.5px; font-weight: 600; padding: 4px 0; }
.bb-tog { background: none; border: 0; color: var(--ba-brand-dark); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 32px; }
.bb-more { display: none; padding: 4px 16px 16px; background: #fbfdfc; border-top: 1px dashed var(--ba-line); }
.bb-row.open .bb-more { display: block; }
.bb-more h4 { font-size: 15px; margin: 12px 0 6px; }
.bb-accs { width: 100%; border-collapse: collapse; font-size: 14px; }
.bb-accs th, .bb-accs td { border-bottom: 1px solid var(--ba-line); padding: 7px 8px; text-align: right; }
.bb-accs th { color: var(--ba-muted); font-weight: 600; font-size: 13px; }
.bb-accs tr.me td { background: var(--ba-soft); font-weight: 600; }
.ba-ages { margin-top: 8px; }
.ba-ages caption { caption-side: top; text-align: right; font-size: 13px; color: var(--ba-muted); padding: 0 0 4px; }
.bb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bb-cards div { background: #fff; border: 1px solid var(--ba-line); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.bb-cards span { display: block; color: var(--ba-muted); font-size: 13px; }
.bb-cards b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.bb-cards small { display: block; color: var(--ba-muted); font-size: 12.5px; }
.bb-cards .alt { background: var(--ba-soft); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bb-cards .alt a { font-weight: 600; font-size: 14px; }
.bb-bg b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.bb-chipsrow { display: flex; flex-wrap: wrap; gap: 5px; }
.bb-acchip { border: 1px solid var(--ba-line); background: var(--ba-bg); border-radius: 8px; padding: 3px 8px; font-size: 13px; text-decoration: none; color: var(--ba-muted); line-height: 1.5; }
.bb-acchip b { display: inline; font-size: 13px; color: var(--ba-ink); }
.bb-acchip:hover { border-color: var(--ba-brand); }
.bb-offer { color: var(--ba-brand-dark) !important; font-weight: 600; }
.bb-src { margin-top: 12px; font-size: 13.5px; color: var(--ba-muted); }
.bb-num small { line-height: 1.3; }
.bb-chart { display: grid; gap: 7px; margin-top: 10px; }
.bb-chart div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: 14.5px; }
.bb-chart i { display: block; height: 14px; border-radius: 7px; background: var(--ba-brand); }
.bb-chart .hi i { background: #c05a2e; }
.bb-chart .avg i { background: #9fb3ab; }
.bb-chart b { direction: ltr; text-align: left; }
.bb-fitbar { display: none; }

/* =========================== מובייל =========================== */
@media (max-width: 991.98px) {
    .ba-cross { grid-template-columns: repeat(2, 1fr); }
    .bb-cols { display: none; }
    .bb-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
    .bb-bank, .bb-acc, .bb-act { grid-column: 1 / -1; }
    .bb-num { background: var(--ba-bg); border-radius: 10px; padding: 8px 10px; }
    .bb-num .lbl { display: block; font-weight: 400; font-size: 13px; color: var(--ba-muted); }
    .bb-act { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .bb-act .ba-cta { flex: 1; }
    /* שורה עם כפתור יציאה: הכפתור וההערה ברוחב מלא, ומתחתם הסקירה והפרטים זה לצד זה */
    .bb-act .ba-cta[data-go] { flex: 1 1 100%; }
    .bb-adnote { flex: 1 1 100%; }
    .bb-review { flex: 1; }
    .bb-accs { display: block; overflow-x: auto; white-space: nowrap; }
    .bb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
    .ba-h1 { font-size: 25px; }
    .ba-lede { font-size: 16px; }
    .ba-tabs a { flex: 1 1 30%; padding: 8px 6px; font-size: 14px; }
    /* QA 27/10 ש-4: לוגו של 60px גובה בנייד (היה 46), בכרטיס הבנק ובכותרת דף החשבון */
    .ba-page .ba-logo, .ba-page .bb-bank .ba-logo, .ba-page .bp-hero-id .ba-logo { margin: 0; width: 96px; height: 60px; }
    .bb-bank { gap: 12px; }
    .bb-bank b { font-size: 17px; }
    /* הסינון עובר ל-bottom sheet; בדף נשארת שורת סיכום עם כפתור */
    .ba-cross { grid-template-columns: 1fr; }
    .bb-q { grid-template-columns: minmax(0, 1fr); }
    .bb-wins { grid-template-columns: 1fr; gap: 6px; }
    .bb-win { padding: 8px 12px; }
    .bb-win .ic { width: 36px; height: 36px; font-size: 16px; }
    .bb-bar span + span { display: none; }
    .bb-chart div { grid-template-columns: 96px minmax(0, 1fr) 56px; font-size: 14px; }
    /* ⚠️ fixed ולא sticky (לקחים 52, 84, 88): הסרגל תמיד מחוץ לזרימה, ולכן הופעתו אינה משנה את גובה
       המסמך ואין צורך ב-spacer. הוא נראה רק כשהשאלות יצאו מהמסך והטבלה עדיין בו (bankCompare.js). */
    .bb-fitbar { display: flex; position: fixed; top: 68px; left: 0; right: 0; z-index: 20; height: 44px; box-sizing: border-box; background: #fff; border-bottom: 1px solid var(--ba-line); box-shadow: 0 2px 6px rgba(20, 35, 43, .08); padding: 0 16px; font-size: 14px; align-items: center; gap: 8px; visibility: hidden; opacity: 0; transition: opacity .15s; }
    .bb-fitbar.on { visibility: visible; opacity: 1; }
    .bb-fitbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #fit { scroll-margin-top: 76px; }
    .bb-fitbar a { margin-inline-start: auto; font-weight: 700; white-space: nowrap; }
}
@media (min-width: 760px) {
}

/* ---- התאמות לדף החי ---- */
.bb-perks { margin: 0; padding-inline-start: 18px; font-size: 14.5px; }
.ba-page [hidden] { display: none !important; }
.ba-page .ba-textbtn { text-decoration: underline; }

/* ---- רוחב הדף: הדפוס המתועד ב-docs/compare-pages-wide-layout.md (כמו gemel-compare-wide ו-ti-page-wide).
   #main נעול ל-980px ב-compareTables.css; המחלקות ba-main ו-ba-body מתווספות בסקריפט inline בראש הדף. ---- */
body.ba-body { width: 100% !important; max-width: none !important; background: #f4f7f6; }
#main.ba-main { width: 100% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; font-family: 'Noto Sans Hebrew', Arial, Helvetica, sans-serif; }
#main.ba-main img, #main.ba-main table { max-width: 100%; }
/* דסקטופ צר (992 עד 1199): אותן 7 עמודות, צרות יותר, כדי שעמודת החשבון לא תימעך */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .bb-cols, .bb-row-main { grid-template-columns: 176px minmax(0, 1.3fr) 100px 108px 84px 84px 156px; gap: 10px; }
    .bb-bank .ba-logo { width: 88px; height: 56px; }
    .bb-num { font-size: 17px; }
}
/* ה-H2 של הדף הקיים נשמר כלשונו, ומעוצב כפסקת משנה ולא ככותרת */
.ba-page .ba-sub2 { font-size: 15.5px; font-weight: 400; line-height: 1.55; color: var(--ba-muted); max-width: 900px; margin: 0 0 8px; }
/* ---- בלוקי התוכן שעברו מהדף הקיים: טיפים, מאמרים, מחשבונים, קישורי בנק ---- */
.ba-list { margin: 0; padding-inline-start: 20px; }
.ba-list li + li { margin-top: 6px; }
.ba-linkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.ba-linkgrid a { display: block; padding: 9px 12px; background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: 10px; text-decoration: none; color: var(--ba-ink); font-size: 15px; min-height: 44px; }
.ba-linkgrid a:hover { border-color: var(--ba-brand); background: var(--ba-soft); }
.ba-morelinks { margin-top: 10px; }
.ba-morelinks summary { cursor: pointer; color: var(--ba-brand-dark); font-weight: 600; padding: 8px 0; min-height: 44px; }
.ba-morelinks .ba-linkgrid { margin-top: 6px; }
@media (max-width: 991.98px) { .ba-linkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759.98px) { .ba-linkgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- "דף חי יותר" (הכרעת רונן 27/10/2026): רצועות ברקעים מתחלפים מתחת לטבלה, בדף החשבונות ובפיקדונות. קידומת lv- = lively.
   כיוון 1 (מגזין): טיפים ממוספרים, אריחי קהל, מחשבונים עם אייקון, "מה עוד" צבעוני. כיוון 2 (רצועות): לפי בנק (כהה), מדריכים, מדרגות.
   מוקאפים: .agents/briefs/bank-accounts-v2/mockups-lively/ ---- */
.ba-page .lv-band { border-radius: 18px; padding: 22px 24px; }
.ba-page .lv-soft { background: var(--ba-soft); border-color: transparent; }
.ba-page .lv-deep { background: #0b3d31; border-color: #0b3d31; color: #fff; }
.ba-page .lv-deep h2 { color: #fff; }
.ba-page .lv-plain { background: transparent; border-color: transparent; padding-inline: 0; }
.ba-page .lv-warm { background: #fdf6ec; border-color: #f0dca8; }
.ba-page .lv-sub { color: var(--ba-muted); font-size: 15px; margin: -2px 0 14px; }
.ba-page .lv-deep .lv-sub { color: #bfd8ce; }
.ba-page .lv-head { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.ba-page .lv-head h2 { margin-bottom: 4px; }
.ba-page .lv-ill { flex: none; }
.ba-page .lv-ill svg { width: 84px; height: 84px; display: block; }
.ba-page .lv-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* טיפים ממוספרים (כיוון 1) */
.ba-page .lv-tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: lvt; }
.ba-page .lv-tips li { background: #fff; border-radius: 14px; padding: 14px; font-size: 15px; counter-increment: lvt; }
.ba-page .lv-tips li::before { content: counter(lvt); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ba-brand); color: #fff; font-weight: 700; margin-bottom: 8px; }

/* קהלים (כיוון 1) */
.ba-page .lv-aud { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ba-page .lv-aud a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; padding: 14px 10px 12px; text-decoration: none; color: var(--ba-ink); font-weight: 600; font-size: 15px; }
.ba-page .lv-aud a:hover { border-color: var(--ba-brand); background: var(--ba-soft); }
.ba-page .lv-aud .lv-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--ba-soft); display: grid; place-items: center; color: var(--ba-brand-dark); }
.ba-page .lv-aud .lv-ic svg { width: 24px; height: 24px; }
.ba-page .lv-aud small { font-weight: 400; color: var(--ba-muted); font-size: 13.5px; }

/* לפי בנק: אריחי לוגו על רצועה כהה (כיוון 2) */
.ba-page .lv-banks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ba-page .lv-banks a { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 10px 12px; text-decoration: none; color: var(--ba-ink); min-height: 76px; }
.ba-page .lv-banks a:hover { box-shadow: 0 0 0 3px #c6d92e; }
.ba-page .lv-lg { width: 96px; height: 58px; flex: none; display: grid; place-items: center; overflow: hidden; }
.ba-page .lv-lg img { width: 100%; height: 100%; object-fit: contain; }
.ba-page .lv-banks b { display: block; font-size: 15.5px; line-height: 1.3; }
.ba-page .lv-banks small { display: block; color: var(--ba-muted); font-size: 13.5px; margin-top: 2px; }

/* מדריכים עם אייקון צבעוני (כיוון 2) */
.ba-page .lv-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.ba-page .lv-guides a { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--ba-line); border-radius: 16px; padding: 14px; text-decoration: none; color: var(--ba-ink); }
.ba-page .lv-guides a:hover { border-color: var(--ba-brand); }
.ba-page .lv-guides .lv-ic { width: 64px; height: 64px; flex: none; border-radius: 14px; display: grid; place-items: center; }
.ba-page .lv-guides .lv-ic svg { width: 36px; height: 36px; stroke-width: 1.7; }
.ba-page .lv-guides b { display: block; font-size: 16px; line-height: 1.35; margin-bottom: 4px; }
.ba-page .lv-guides small { display: block; font-size: 14px; color: var(--ba-muted); }
.ba-page .g1 { background: #e3f1ea; color: var(--ba-brand-dark); } .ba-page .g2 { background: #fff3dc; color: #8a5d0f; } .ba-page .g3 { background: #ece8f8; color: #4b3f8f; }
.ba-page .g4 { background: #e4edf9; color: #2b5a9e; } .ba-page .g5 { background: #fbe7e3; color: #a3402c; } .ba-page .g6 { background: #e9f3d6; color: #4d6b12; }
.ba-page .lv-white .ba-morelinks .ba-linkgrid a { background: var(--ba-bg); }

/* מחשבונים + "מה עוד" (כיוון 1) */
.ba-page .lv-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 18px; }
.ba-page .lv-two > .ba-sec { margin-top: 0; }
.ba-page .lv-calcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ba-page .lv-calcs a { display: flex; align-items: center; gap: 10px; background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--ba-ink); font-size: 15px; font-weight: 600; min-height: 54px; }
.ba-page .lv-calcs a:hover { border-color: var(--ba-brand); }
.ba-page .lv-calcs .lv-ic, .ba-page .dp-calcs .lv-ic { width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid var(--ba-line); display: grid; place-items: center; color: var(--ba-brand-dark); flex: none; }
.ba-page .lv-calcs .lv-ic svg, .ba-page .dp-calcs .lv-ic svg { width: 18px; height: 18px; }
.ba-page .lv-cross { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ba-page .lv-cross.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ba-page .lv-cross a { border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--ba-ink); font-weight: 700; font-size: 15.5px; border: 1px solid transparent; }
.ba-page .lv-cross a span { display: block; font-weight: 400; font-size: 14px; color: var(--ba-muted); margin-top: 2px; }
.ba-page .lv-cross .g { background: var(--ba-soft); border-color: #cfe3d9; }
.ba-page .lv-cross .y { background: #fdf6ec; border-color: #f0dca8; }
.ba-page .lv-cross .p { background: #f3f1fb; border-color: #d9d3f0; }
.ba-page .lv-cross .b { background: #eef3fb; border-color: #d3dff2; }
.ba-page .lv-cross a:hover { border-color: var(--ba-brand); }

/* פיקדונות: האלטרנטיבות כמדרגות (כיוון 2). מדרגות 3 ו-4 באותו גובה, שתיהן לטווח בינוני/ארוך (רונן) */
.ba-page .lv-ladder { align-items: end; }
.ba-page .lv-soft .lv-ladder > div { background: #fff; border-color: transparent; }
.ba-page .lv-ladder .lv-lvl { font-size: 13px; font-weight: 700; color: var(--ba-brand-dark); }
.ba-page .lv-ladder > div:nth-child(1) { min-height: 250px; }
.ba-page .lv-ladder > div:nth-child(2) { min-height: 285px; }
.ba-page .lv-ladder > div:nth-child(3), .ba-page .lv-ladder > div:nth-child(4) { min-height: 320px; }
.ba-page .lv-ladder > div .ctaWizard { margin-top: auto !important; }

@media (max-width: 991.98px) {
    .ba-page .lv-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-page .lv-aud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ba-page .lv-banks, .ba-page .lv-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-page .lv-two { grid-template-columns: minmax(0, 1fr); }
    .ba-page .lv-cross.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-page .lv-ladder > div { min-height: 0 !important; }
}
@media (max-width: 759.98px) {
    .ba-page .lv-band { padding: 18px 16px; border-radius: 16px; }
    .ba-page .lv-plain { padding-inline: 0; }
    .ba-page .lv-ill svg { width: 60px; height: 60px; }
    .ba-page .lv-tips, .ba-page .lv-banks, .ba-page .lv-guides, .ba-page .lv-calcs { grid-template-columns: minmax(0, 1fr); }
    .ba-page .lv-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-page .lv-tips li { display: flex; gap: 12px; align-items: flex-start; }
    .ba-page .lv-tips li::before { flex: none; margin: 0; }
}

/* ---- דף החשבון (Account/BankAccountV2.aspx). קידומת bp- = bank product ---- */
.bp-hero { background: #fff; border: 1px solid var(--ba-line); border-radius: 16px; padding: 16px 18px; margin-top: 14px; display: grid; grid-template-columns: 300px minmax(0, 1fr) 210px; gap: 16px; align-items: center; }
.bp-hero-id { display: flex; gap: 12px; align-items: center; }
.bp-hero-id .ba-logo { margin: 0; width: 110px; height: 70px; flex: none; }
.bp-hero-id b { display: block; font-size: 18px; line-height: 1.3; }
.bp-hero-id small { display: block; color: var(--ba-muted); font-size: 13.5px; }
.bp-chip { display: inline-block; margin-top: 4px; background: var(--ba-soft); border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 600; }
.bp-stats b { font-size: 18px; }
.bp-hero-act { display: flex; flex-direction: column; gap: 4px; }
.bp-back { display: block; text-align: center; font-size: 14.5px; font-weight: 600; padding: 4px 0; }
.bp-h3 { font-size: 16px; margin: 16px 0 8px; }
.bp-src small { color: var(--ba-muted); font-size: 13.5px; }
.bp-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bp-alt { display: block; background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--ba-ink); }
.bp-alt:hover { border-color: var(--ba-brand); }
.bp-alt b { display: block; font-size: 16px; }
.bp-alt small { display: block; color: var(--ba-muted); font-size: 13.5px; }
.bp-alt span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ba-brand-dark); font-weight: 600; }
.bp-sticky { display: none; }
@media (max-width: 991.98px) {
    .bp-hero { grid-template-columns: minmax(0, 1fr); }
    .bp-hero-act { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .bp-hero-act .ba-cta { flex: 1 1 100%; }
    .bp-hero-act .bb-adnote, .bp-hero-act .bp-back { flex: 1 1 100%; }
}
@media (max-width: 759.98px) {
    .bp-alts { grid-template-columns: minmax(0, 1fr); }
    /* ⚠️ fixed בתחתית, תמיד מחוץ לזרימה: אינו משנה את גובה המסמך. הריפוד התחתון של .ba-wrap מפנה לו מקום. */
    .bp-sticky { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: #fff; border-top: 1px solid var(--ba-line); box-shadow: 0 -2px 8px rgba(20, 35, 43, .1); padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .bp-sticky .ba-cta { min-height: 46px; padding: 8px 12px; }
}
@media (max-width: 759.98px) {
    /* טבלת הגילים בנייד: בלי גלילה אופקית. הגיל הוא העיקר, ולכן עמודת ההטבה יורדת והשורות נשברות. */
    .ba-ages { display: table; white-space: normal; }
    .ba-ages th:nth-child(5), .ba-ages td:nth-child(5) { display: none; }
    .ba-ages th, .ba-ages td { padding: 7px 4px; }
    .ba-ages td:nth-child(3) { white-space: nowrap; }
    /* QA 27/10 ת-7: יעדי מגע של 44px בנייד (צ'יפים 40px, "כל הפרטים" 32px, צ'יפי החשבונות 26px) */
    .ba-chip, .bb-tog { min-height: 44px; }
    .bb-acchip { display: inline-flex; align-items: center; min-height: 44px; padding: 3px 10px; }
}

/* ---- שטח פרסום (BankPromo.Render). התווית "מודעה" היא חלק מהרכיב ---- */
.ba-promo { margin: 18px auto 0; max-width: 100%; text-align: center; position: relative; width: fit-content; }
.ba-promo a { display: block; line-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--ba-line); }
.ba-promo img { display: block; max-width: 100%; height: auto; }
.ba-promo-tag { display: block; text-align: right; font-size: 12px; color: var(--ba-muted); line-height: 1.6; }

/* ---- דף החשבון העסקי (Account/BankBusinessV2.aspx). קידומת bz- = business ---- */
.bz-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.bz-sizes .ba-chip { text-decoration: none; display: inline-flex; align-items: center; }
/* QA 27/10 ת-1: מעל 760px זו טבלה של ~874px. בין 760 לכ-910 (iPad לאורך) היא רחבה מהמסגרת, ולכן גלילה אופקית ולא חיתוך.
   overflow-x: auto שומר על הפינות העגולות כמו overflow: hidden. */
.bz-tablewrap { background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.bz-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bz-table caption { caption-side: top; text-align: right; font-size: 13px; color: var(--ba-muted); padding: 8px 14px 4px; }
.bz-table th, .bz-table td { padding: 10px 12px; text-align: right; border-top: 1px solid var(--ba-line); vertical-align: middle; }
.bz-table thead th { border-top: 0; background: var(--ba-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.bz-table thead button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ba-ink); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.bz-table thead button.on { color: var(--ba-brand-dark); text-decoration: underline; }
.bz-table tbody th { font-weight: 400; }
.bz-table td { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bz-table td.best { color: var(--ba-brand-dark); background: #f0f8f4; }
.bz-bank { display: flex; gap: 10px; align-items: center; }
.bz-bank .ba-logo { margin: 0; width: 96px; height: 60px; flex: none; }
.bz-bank b { display: block; font-size: 16px; }
.bz-bank small { display: block; color: var(--ba-muted); font-size: 13px; }
.bz-src { font-weight: 400 !important; font-size: 13.5px; }
.bz-table td small { display: block; font-weight: 400; color: var(--ba-muted); font-size: 12.5px; }
.bz-plain { margin-top: 4px; }
.bz-plain > p { margin-top: 10px; }
.bz-src small { display: block; color: var(--ba-muted); font-size: 12.5px; }
@media (min-width: 760px) and (max-width: 959.98px) {
    /* QA 27/10 ת-1: בטווח הזה הטבלה נגללת. ריווח ולוגו קטנים יותר מצמצמים את הגלילה. */
    .bz-table th, .bz-table td { padding: 8px 7px; }
    .bz-bank { gap: 6px; }
    .bz-bank .ba-logo { width: 64px; height: 40px; }
    .bz-table { font-size: 14px; }
}
@media (max-width: 759.98px) {
    /* בנייד כל בנק הוא כרטיס: שם הבנק למעלה, ומתחתיו שורת "תווית: ערך" לכל עמודה. בלי גלילה אופקית. */
    .bz-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .bz-table, .bz-table caption, .bz-table tbody, .bz-table tr, .bz-table th, .bz-table td { display: block; }
    .bz-table tr { border-top: 1px solid var(--ba-line); padding: 10px 12px; }
    .bz-table tbody tr:first-child { border-top: 0; }
    .bz-table th, .bz-table td { border: 0; padding: 4px 0; white-space: normal; }
    .bz-table td { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
    .bz-table td::before { content: attr(data-label); font-weight: 400; color: var(--ba-muted); font-size: 14px; }
    .bz-bank .ba-logo { width: 96px; height: 60px; }
    .bz-table td.best { background: none; }
    .bz-src small { display: inline; margin-inline-start: 6px; }
}

/* =====================================================================
   השוואת פיקדונות V2 (Savings/CompareSavingsV2.aspx). קידומת dp- = deposits, הכול תחת .dp-page.
   מקור: .agents/briefs/deposits-v2/mockup.css (מוקאפ B + המטריצה של A). תוכנית: deposits-v2/plan.md סעיף 7.3.
   ===================================================================== */
.dp-page .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.dp-side { display: flex; flex-direction: column; gap: 14px; }
.dp-sidecard { background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; padding: 14px 16px; }
.dp-sidecard h3 { font-size: 18px; margin-bottom: 6px; }
.dp-sidecard p { font-size: 15px; color: #33473f; margin-bottom: 10px; }
.dp-page #lead.lead { width: auto; margin: 0; float: none; }
/* QA רונן 27/10: טופס הליד כמו בהשוואת קופות הגמל (gemel-modern.css, #main.kg-fbar-page .topLeft #lead): כרטיס לבן, מסגרת ירוקה וצל,
   כותרת ירוקה מיושרת לימין בלי פס רקע. ה-!important מול .leadTitle/.leadH3Title הגלובליים של cssSupermarker */
.dp-page .dp-side #lead.lead { background: #fff !important; border: 2px solid var(--ba-brand) !important; border-radius: 14px; padding: 16px 18px 18px; box-shadow: 0 10px 26px rgba(23, 118, 90, .16); }
.dp-page .dp-side #lead .leadH3Title, .dp-page .dp-side #lead .h3Title { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ba-brand-dark) !important; text-align: right !important; font-size: 18px !important; line-height: 1.3 !important; padding: 0 0 4px !important; margin: 0 !important; min-height: 0; width: auto !important; text-wrap: balance; }
.dp-page .dp-side #lead .leadSubTitle { text-align: right !important; color: var(--ba-muted) !important; font-size: 13.5px !important; line-height: 1.5; padding: 0 !important; margin: 0 0 10px !important; }
.dp-page .dp-side #lead .checkList { margin: 0 0 12px; padding: 0; }
.dp-page .dp-side #lead .checkList li { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; }
/* בחירת החברות לא רלוונטית בדף השוואה, בדיוק כמו בקופות הגמל (.kg-v2-yatzranim, CompareKupotGemel.aspx). אישור רונן 27/10 [lead-change] */
.dp-page .kg-v2-yatzranim { display: none !important; }
.dp-calcs { list-style: none; margin: 0; padding: 0; }
.dp-calcs li + li { border-top: 1px solid var(--ba-line); }
.dp-calcs a { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-size: 15.5px; }

/* ---- בקרה: סכום, תקופה, גמישות, סוג, מטבע, מצטרפים, מיון ---- */
.dp-calc { background: #fff; border: 1.5px solid var(--ba-brand); border-radius: 16px; padding: 16px 18px; margin: 4px 0 14px; box-shadow: 0 4px 18px rgba(15, 90, 71, .08); }
.dp-calc h2 { font-size: 19px; margin-bottom: 8px; }
.dp-q { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 8px 0; }
.dp-q + .dp-q { border-top: 1px dashed var(--ba-line); }
.dp-q .q { font-weight: 600; font-size: 15.5px; }
.dp-q .q small { display: block; font-weight: 400; color: var(--ba-muted); font-size: 13px; }
.dp-amt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dp-amt label { position: relative; }
.dp-amt input { width: 150px; border: 1.5px solid var(--ba-line); border-radius: 10px; padding: 8px 12px 8px 30px; font: inherit; font-size: 16px; font-weight: 700; min-height: 44px; direction: ltr; text-align: left; }
.dp-amt label::after { content: '\20AA'; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ba-muted); font-weight: 700; }
.dp-page.dp-fx-usd .dp-amt label::after { content: '$'; }
.dp-page.dp-fx-eur .dp-amt label::after { content: '\20AC'; }
.dp-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; min-height: 44px; }
.dp-switch input { width: 18px; height: 18px; accent-color: var(--ba-brand); }
.dp-answer { background: var(--ba-soft); border-radius: 12px; padding: 12px 14px; font-size: 16px; margin: 4px 0 10px; }
.dp-answer b { color: var(--ba-brand-dark); }
.dp-why { background: #f6f3fc; border: 1px solid #e3dcf3; border-radius: 12px; padding: 10px 14px; font-size: 14.5px; color: #3f3566; margin: 0 0 12px; }
.dp-why b { color: #4b3f8f; }
.dp-sumbar { display: none; }

/* ---- תוצאות (B) ---- */
.dp-res { background: #fff; border: 1px solid var(--ba-line); border-radius: 16px; overflow: hidden; }
.dp-rcols, .dp-row-main { display: grid; grid-template-columns: 210px minmax(0, 1.3fr) minmax(104px, .55fr) minmax(150px, .8fr) minmax(96px, .5fr) 160px; gap: 12px; align-items: center; padding: 12px 16px; }
.dp-rcols { background: var(--ba-soft); font-size: 13.5px; font-weight: 700; color: var(--ba-muted); padding-top: 9px; padding-bottom: 9px; }
.dp-row { border-top: 1px solid var(--ba-line); }
.dp-row.ad { background: var(--ba-ad); }
.dp-row.join { background: #fffcf3; }
.dp-row.off { color: var(--ba-muted); background: #fafbfa; }
.dp-row.open .dp-more { display: block; }
.dp-more { display: none; background: #fbfdfc; }
.dp-prod b { display: block; font-size: 15.5px; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dp-tag { font-size: 12.5px; border-radius: 999px; padding: 1px 8px; background: var(--ba-bg); border: 1px solid var(--ba-line); color: var(--ba-muted); }
.dp-tag.g { background: var(--ba-soft); border-color: #cfe3d9; color: var(--ba-brand-dark); }
.dp-tag.y { background: #fff8e6; border-color: #f0dca8; color: #5b4a17; }
.dp-num { font-weight: 700; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dp-num small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ba-muted); line-height: 1.3; }
.dp-num .lbl { display: none; }
.dp-num.big { font-size: 20px; color: var(--ba-ink); }
.dp-num.best { color: var(--ba-brand); }
.dp-num .paid, .dp-matrix .paid { color: #6b5aa6; }
.dp-ract { display: flex; flex-direction: column; gap: 4px; }
.dp-ract .ba-cta { min-height: 44px; padding: 8px 10px; font-size: 15px; }
.dp-calc-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--ba-brand); color: var(--ba-brand-dark) !important; background: #fff; border-radius: 12px; padding: 6px 12px; min-height: 44px; font-weight: 700; font-size: 15px; text-decoration: none; }
.dp-calc-link:hover { background: var(--ba-soft); }
/* .ba-page a (0,1,1) גובר על .ba-cta (0,1,0): בלי זה הטקסט בכפתור ירוק כהה על ירוק */
.dp-page a.ba-cta { color: #fff; }
.dp-page a.ba-cta.ghost { color: var(--ba-brand-dark); }
.dp-page .bb-adlab { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ba-ad-ink); background: #fff; border: 1px solid var(--ba-ad-line); border-radius: 999px; padding: 0 7px; margin-inline-start: 6px; vertical-align: middle; }
.dp-page .bb-sep { font-size: 13.5px; color: var(--ba-muted); background: var(--ba-bg); border-top: 1px solid var(--ba-line); padding: 6px 16px; text-align: center; }
.dp-none { font-size: 14px; color: var(--ba-muted); border-top: 1px solid var(--ba-line); padding: 10px 16px; }
.dp-mmf { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px dashed var(--ba-line); background: #f7f9fc; font-size: 14.5px; }
.dp-det { padding: 14px 16px 16px; border-top: 1px dashed var(--ba-line); }
.dp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.dp-facts div { background: #fff; border: 1px solid var(--ba-line); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.dp-facts span { display: block; color: var(--ba-muted); font-size: 13px; }
.dp-facts b { display: block; font-size: 16px; }
.dp-facts small { display: block; color: var(--ba-muted); font-size: 12.5px; line-height: 1.35; }
.dp-src { font-size: 13.5px; color: var(--ba-muted); margin-top: 8px; }

/* ---- המטריצה (A): בנק × תקופה ---- */
.dp-mwrap { background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; overflow: hidden; margin-top: 10px; }
.dp-matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
.dp-matrix caption { caption-side: top; text-align: right; padding: 10px 14px; font-size: 13px; color: var(--ba-muted); background: var(--ba-soft); }
.dp-matrix th, .dp-matrix td { border-top: 1px solid var(--ba-line); padding: 8px 6px; text-align: center; vertical-align: middle; }
.dp-matrix thead th { background: var(--ba-soft); font-size: 13px; color: var(--ba-muted); font-weight: 700; }
.dp-matrix tbody th { text-align: right; padding: 8px 12px; font-weight: 600; white-space: nowrap; }
.dp-matrix td b { display: block; font-size: 16px; direction: ltr; font-variant-numeric: tabular-nums; }
.dp-matrix td small { display: block; font-size: 12.5px; color: var(--ba-muted); line-height: 1.3; }
.dp-matrix td.best b { color: var(--ba-brand); }
.dp-matrix td.best { box-shadow: inset 0 -3px 0 var(--ba-brand); }
.dp-matrix tr.sys th, .dp-matrix tr.sys td { background: #fafbfa; color: var(--ba-muted); }
.dp-termbar { display: none; }

/* ---- FAQ, חלופות, וידאו ---- */
.dp-page .ba-faq summary h3 { font-size: 16px; font-weight: 600; margin: 0; }
.dp-faq-a { padding: 0 0 14px; color: #33473f; }
.dp-faq-a p + p, .dp-faq-a ul { margin-top: 8px; }
.dp-faq-a ul { padding-inline-start: 20px; }
.dp-altgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.dp-altgrid > div { background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 90px; }
.dp-altgrid b { font-size: 16px; }
.dp-altgrid span { font-size: 14px; color: var(--ba-muted); }
.dp-altgrid a { font-size: 14.5px; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.dp-page .dp-altgrid a.ctaWizard { justify-content: center; background: #fff; border: 1.5px solid var(--ba-brand); border-radius: 10px; padding: 6px 8px; text-decoration: none; color: var(--ba-brand-dark); min-height: 44px; margin: 0; width: auto; height: auto; font-size: 14.5px; line-height: 1.3; box-shadow: none; }
/* QA רונן 27/10: ב-hover הטקסט נעלם. הכלל הגלובלי ".ctaWizard:hover { color: #fff !important }" צובע לבן, והרקע שלנו נשאר לבן.
   ב-hover הכפתור מתמלא בירוק. וגובה קבוע לכפתור (שורה אחת או שתיים), כדי שהכפתורים בארבעת הכרטיסים יהיו באותו קו */
.dp-page .dp-altgrid a.ctaWizard:hover, .dp-page .dp-altgrid a.ctaWizard:focus-visible { background: var(--ba-brand) !important; border-color: var(--ba-brand); color: #fff !important; text-decoration: none; }
.dp-page .dp-altgrid a.ctaWizard { height: 54px; min-height: 54px; text-align: center; }
.dp-page .dp-altgrid a.ctaWizard + a { min-height: 44px; line-height: 1.35; }
.dp-mmftext { margin-top: 12px; font-size: 15px; }
.dp-video { position: relative; margin-top: 14px; aspect-ratio: 16 / 9; max-width: 650px; }
.dp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.dp-page .ba-faq details { scroll-margin-top: 90px; }

/* דסקטופ צר (992 עד 1199): עמודות צרות יותר ולוגו קטן יותר. מתחת ל-992 הכללים של הנייד */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .dp-rcols, .dp-row-main { grid-template-columns: 160px minmax(0, 1.2fr) 96px 140px 88px 140px; gap: 10px; }
    .dp-row-main .bb-bank .ba-logo { width: 88px; height: 56px; }
    .dp-num { font-size: 17px; }
}
@media (max-width: 991.98px) {
    .dp-layout { grid-template-columns: minmax(0, 1fr); }
    .dp-rcols { display: none; }
    .dp-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
    .dp-row-main .bb-bank, .dp-prod, .dp-ract { grid-column: 1 / -1; }
    .dp-num { background: var(--ba-bg); border-radius: 10px; padding: 8px 10px; }
    .dp-num .lbl { display: block; font-weight: 400; font-size: 13px; color: var(--ba-muted); }
    .dp-ract { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .dp-ract .ba-cta, .dp-ract .dp-calc-link { flex: 1 1 40%; }
    .dp-ract .bb-adnote { flex: 1 1 100%; }
    .dp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dp-mmf { grid-template-columns: minmax(0, 1fr); }
    .dp-altgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
    .dp-q { grid-template-columns: minmax(0, 1fr); }
    .dp-amt label { flex: 1 1 100%; }
    .dp-amt input { width: 100%; }
    .dp-altgrid { grid-template-columns: minmax(0, 1fr); }
    /* המטריצה בנייד: תקופה אחת בכל פעם (בוחר מעל). הטבלה כולה נשארת ב-HTML, נסתרת רק בתצוגה */
    .dp-termbar { display: flex; margin-top: 8px; }
    .dp-termbar .ba-chip { flex: 1 1 22%; padding: 8px 6px; font-size: 14px; }
    .dp-matrix [data-t] { display: none; }
    .dp-matrix[data-term="d"] [data-t="d"], .dp-matrix[data-term="w"] [data-t="w"], .dp-matrix[data-term="m1"] [data-t="m1"],
    .dp-matrix[data-term="m3"] [data-t="m3"], .dp-matrix[data-term="m6"] [data-t="m6"], .dp-matrix[data-term="y1"] [data-t="y1"],
    .dp-matrix[data-term="y2"] [data-t="y2"], .dp-matrix[data-term="y3"] [data-t="y3"] { display: table-cell; }
    .dp-matrix tbody th { white-space: normal; }
    /* ⚠️ fixed ולא sticky (לקחים 52, 84, 88): מחוץ לזרימה, לא משנה את גובה המסמך. נראה רק כשהבקרה יצאה מהמסך והתוצאות בו */
    .dp-sumbar { display: flex; position: fixed; top: 68px; left: 0; right: 0; z-index: 20; height: 44px; box-sizing: border-box; background: #fff; border-bottom: 1px solid var(--ba-line); box-shadow: 0 2px 6px rgba(20, 35, 43, .08); padding: 0 16px; font-size: 14px; align-items: center; gap: 8px; visibility: hidden; opacity: 0; transition: opacity .15s; }
    .dp-sumbar.on { visibility: visible; opacity: 1; }
    .dp-sumbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dp-sumbar a { margin-inline-start: auto; font-weight: 700; white-space: nowrap; }
    #calc { scroll-margin-top: 76px; }
}

/* QA רונן 27/10: ה-disclaimer כמו בדפים המשודרגים (השוואת קופות גמל): כרטיס אפור בהיר עם פינות מעוגלות, במקום הצהוב-ירוק של cssSupermarker */
.ba-page .SMdisclaimer { box-sizing: border-box; width: 100% !important; max-width: 100%; height: auto; background: #f8f9fa !important; border: 1px solid var(--ba-line) !important; border-radius: 12px; padding: 16px 20px; margin-top: 14px; font-family: inherit; }
.ba-page .SMdisclaimer p { margin: 0; color: var(--ba-muted); font-size: 13.6px; line-height: 1.6; }

/* ---- פיקדונות "דף חי יותר", שלב 2 (QA רונן 27/10, המלצת Fable): החלק התחתון ברוחב מלא, ובקצב של דף החשבונות:
   איך מחשבים (plain, אריחים) · FAQ (plain, כרטיסים) · מדרגות (soft) · קרן כספית (plain) · הריבית בכל בנק (deep) · מאמרים (white) · שתי תיבות ---- */
.dp-page .dp-bottom > .ba-sec, .dp-page .dp-bottom > .lv-two { margin-top: 18px; }
.dp-page .lv-h { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
/* מחשבונים בסיידבר, כמו בקופות הגמל (pm-calcs): אייקון בריבוע, שם, חץ. ⚠️ כלל גלובלי ישן "#calcs a { display:inline-block;
   height:36px; line-height:36px }" דחס את השורה, והאייקון דרס את הטקסט (QA רונן 27/10). ספציפיות גבוהה יותר + reset מפורש */
.dp-page #calcs.dp-calcs a { display: flex; align-items: center; gap: 10px; height: auto; min-height: 48px; line-height: 1.35; width: auto; float: none; padding: 6px 2px; text-decoration: none; color: var(--ba-ink); font-size: 15px; font-weight: 600; background: none; }
.dp-page #calcs.dp-calcs a:hover .dp-cl { color: var(--ba-brand-dark); text-decoration: underline; }
.dp-page #calcs .lv-ic { width: 34px; height: 34px; border-radius: 9px; background: #f6f9f8; border: 1px solid #d9e6e1; color: #17765a; flex: none; display: grid; place-items: center; }
.dp-page #calcs .dp-cl { flex: 1; min-width: 0; }
.dp-page #calcs .dp-chev { flex: none; color: var(--ba-muted); font-size: 20px; line-height: 1; }

/* איך מחשבים: הפסקאות כאריחים ממוספרים, הגילויים ברוחב מלא */
.dp-page #how.lv-plain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: how; }
.dp-page #how > h2, .dp-page #how > .ba-disc, .dp-page #how > .SMdisclaimer { grid-column: 1 / -1; }
.dp-page #how > h2 { margin-bottom: 0; }
.dp-page #how > p:not(.ba-disc) { background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; padding: 14px 16px; margin: 0; font-size: 15px; counter-increment: how; }
.dp-page #how > p:not(.ba-disc)::before { content: counter(how); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ba-brand); color: #fff; font-weight: 700; margin-bottom: 8px; }
.dp-page #how > .ba-disc { margin-top: 4px; }

/* FAQ: כרטיסי אקורדיון בשתי עמודות */
.dp-page #faq.lv-plain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: start; }
.dp-page #faq > h2 { grid-column: 1 / -1; margin-bottom: 0; }
.dp-page #faq details { background: #fff; border: 1px solid var(--ba-line); border-radius: 12px; padding: 0 14px; }
.dp-page #faq details[open] { border-color: var(--ba-brand); }

/* קרן כספית: טקסט וסרטון זה לצד זה */
.dp-page .lv-split { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: center; margin-top: 6px; }
.dp-page .lv-split .dp-mmftext { margin: 0; background: #fff; border: 1px solid var(--ba-line); border-radius: 14px; padding: 16px 18px; font-size: 15.5px; }
.dp-page .lv-split .dp-video { margin: 0; max-width: none; }
.dp-page .lv-split .dp-video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; display: block; }

/* הריבית לשנה בכל בנק: אריחי לוגו על הרצועה הכהה */
.dp-page .lv-rates { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dp-page .lv-rates .lv-rt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: #fff; border-radius: 14px; padding: 12px 10px; color: var(--ba-ink); }
.dp-page .lv-rates .lv-rt.best { box-shadow: 0 0 0 3px #c6d92e; }
.dp-page .lv-rates .lv-lg { width: 88px; height: 44px; }
.dp-page .lv-rates b { font-size: 14.5px; line-height: 1.3; }
.dp-page .lv-rates .lv-rate { font-size: 22px; font-weight: 700; color: var(--ba-brand-dark); direction: ltr; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dp-page .lv-rates .lv-rate.na { font-size: 14px; font-weight: 600; color: var(--ba-muted); direction: rtl; }
.dp-page .lv-rates small { color: #6b5aa6; font-size: 13px; }
.dp-page .lv-deep-foot { margin: 12px 0 0; font-weight: 700; }
.dp-page .lv-rates .lv-join { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px; border-radius: 10px; background: var(--ba-brand); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.25; }
.dp-page .lv-rates .lv-join:hover { background: var(--ba-brand-dark); }
.dp-page .lv-rates .lv-adnote { font-size: 12.5px; color: var(--ba-muted); margin-top: 2px; }
.dp-page .dp-joinlink { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 10px; border-radius: 10px; background: var(--ba-soft); border: 1.5px solid var(--ba-brand); color: var(--ba-brand-dark) !important; font-size: 13.5px; font-weight: 700; text-decoration: none; line-height: 1.25; text-align: center; }
.dp-page .dp-joinlink:hover { background: var(--ba-brand); color: #fff !important; }
.dp-page .dp-joincard h3 { font-size: 17px; margin-bottom: 8px; }
.dp-page .dp-sjoin { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ba-line); }
.dp-page .dp-sjoin .lv-lg { width: 72px; height: 36px; display: grid; place-items: center; }
.dp-page .dp-sjoin .lv-lg img { width: 100%; height: 100%; object-fit: contain; }
.dp-page .dp-sjoin b { display: block; font-size: 17px; color: var(--ba-brand-dark); }
.dp-page .dp-sjoin small { display: block; font-size: 13px; color: var(--ba-muted); }
.dp-page .dp-sjoin .ba-cta { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
.dp-page .dp-joincard .bb-adnote { font-size: 12.5px; color: var(--ba-muted); margin: 6px 0 0; }
.dp-page .lv-deep .lv-deep-foot a { color: #c6d92e; }

@media (max-width: 991.98px) {
    .dp-page .dp-side { position: static; }
    .dp-page .lv-split { grid-template-columns: minmax(0, 1fr); }
    .dp-page .lv-rates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
    .dp-page #how.lv-plain, .dp-page #faq.lv-plain { grid-template-columns: minmax(0, 1fr); }
    .dp-page #how > p:not(.ba-disc) { display: flex; gap: 12px; }
    .dp-page #how > p:not(.ba-disc)::before { flex: none; margin: 0; }
    .dp-page .lv-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* שורות "ממומן" בהשוואת החשבונות (רונן 28/10), באותו סגנון של הפיקדונות: רקע סגול-רך, תווית "ממומן", ופס "תחילת ההשוואה" */
.bb-row.ad { background: var(--ba-ad); border-top-color: var(--ba-ad-line); }
.ba-page .bb-adlab { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ba-ad-ink); background: #fff; border: 1px solid var(--ba-ad-line); border-radius: 999px; padding: 0 7px; margin-inline-start: 6px; vertical-align: middle; }
.ba-page .bb-sep { font-size: 13.5px; color: var(--ba-muted); background: var(--ba-bg); border-top: 1px solid var(--ba-line); padding: 6px 16px; text-align: center; }

/* דף החשבון: טיזר פתיחת חשבון בבנק שותף (רונן 28/10). רצועה ירוקה כהה, ההטבות כצ'יפים וכפתור גדול */
.bp-teaser { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 18px; padding: 20px 24px; border-radius: 18px; background: linear-gradient(135deg, #0f5a47, #17765a); color: #fff; box-shadow: 0 12px 28px rgba(15, 90, 71, .22); }
.bp-teaser-txt b { display: block; font-size: 21px; line-height: 1.35; margin-bottom: 10px; }
.bp-teaser-txt ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bp-teaser-txt li { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 5px 12px; font-size: 15px; font-weight: 600; }
.bp-teaser-txt small { display: block; font-size: 13px; color: #cfe6dc; }
.bp-teaser-act { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ba-page .bp-teaser .ba-cta { background: #c6d92e; color: #0b3d31 !important; border-color: #c6d92e; font-size: 18px; padding: 14px 26px; min-height: 54px; white-space: nowrap; }
.ba-page .bp-teaser .ba-cta:hover { background: #d6e74a; }
.ba-page .bp-teaser .bb-adnote { color: #cfe6dc; }
@media (max-width: 759.98px) {
    .bp-teaser { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
    .ba-page .bp-teaser .ba-cta { width: 100%; white-space: normal; }
}