/* Minification failed. Returning unminified contents.
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1502,68): run-time error CSS1030: Expected identifier, found '.'
(1502,83): run-time error CSS1031: Expected selector, found ')'
(1502,83): run-time error CSS1025: Expected comma or open brace, found ')'
(1614,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1680,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
/* מאמרים מודרניים: פריסה ורכיבים משותפים. נטען opt-in בלבד. */

#main.centerDesign {
width: min(calc(100% - 2rem), 1320px);
            max-width: 1320px;
}

#mainContainer {
width: 100%;
}

.sm-modern-article.main {
display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 1.5rem;
            width: 100%;
            max-width: none;
            height: auto;
            margin: 0;
            float: none;
}

.sm-modern-article>.mainIndex.supermarkerArticle {
flex: 1 1 0;
            min-width: 0;
            width: auto;
            max-width: none;
            height: auto;
            margin: 0;
            padding-left: 1.5rem;
            float: none;
            box-sizing: border-box;
}

.sm-modern-article>.topLeft {
flex: 0 0 300px;
            width: 300px;
            height: auto;
            float: none;
}

.sm-modern-article>.topLeft img {
max-width: 100%;
            height: auto;
}

@media (max-width:991.98px) {
    .sm-modern-article.main {
    display: block;
    }
}

@media (max-width:991.98px) {
    .sm-modern-article>.mainIndex.supermarkerArticle {
    width: 100%;
                    padding-left: 0;
                    border-left: 0;
    }
}

@media (max-width:991.98px) {
    .sm-modern-article>.topLeft {
    width: 100%;
                    max-width: 100%;
                    margin-top: 1.5rem;
    }
}

@media (max-width:991.98px) {
    .sm-modern-article .article table {
    width: 100%;
                    table-layout: fixed;
    }
}

@media (max-width:991.98px) {
    body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width:991.98px) {
    #articleReturnControl {
    --article-return-mobile-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================================
   תמונות בגוף המאמר
   --------------------------------------------------------------------------
   ⚠️ אין להשתמש כאן ב-width:100%. נכסי ההירו הלגאסיים מוגבלים ל-650px רוחב
   (למשל CPI650_L = 650×315), ומתיחה שלהם לעמודה של ~950px מטשטשת — במיוחד
   תמונות שמכילות גרף או טקסט. הכלל הוא max-width בלבד: תמונה קטנה נשארת
   בגודלה הטבעי וממורכזת, תמונה גדולה מתכווצת לרוחב העמודה.
   מאמר שרוצה הירו ברוחב מלא — מייצרים לו נכס ~1440w + srcset (ראה המתכון).
   ========================================================================== */
.sm-modern-article .article img {
    max-width: 100%;
    height: auto;
}

/* וידאו מוטמע (YouTube) — אותו היגיון כמו התמונות ו-.buttonCTA: המאמרים
   הלגאסיים נושאים <iframe width="560"> קשיח, שרחב מעמודת התוכן במובייל
   (~317px) וגורם לגלישה אופקית של הדף כולו. max-width גובר על תכונת
   ה-width של ה-HTML בדיוק כפי שהוא גובר על width inline.
   ⚠️ height נשאר כפי שהוא במכוון: height:auto על iframe נופל ל-150px
   (ברירת המחדל של החלפה) ומועך את הנגן. הווידאו מקבל letterbox קל
   במובייל — עדיף על 206px גלישה. */
.sm-modern-article iframe {
    max-width: 100%;
}

/* תמונה שעומדת בפני עצמה (הירו, איור בין פסקאות) — ממורכזת עם אוויר */
.sm-modern-article .article div > img:only-child {
    display: block;
    margin-inline: auto;
}

/* ==========================================================================
   טבלאות תוכן
   --------------------------------------------------------------------------
   מחליף את המראה הלגאסי של .tableArticle (compareTables.css:6361) — מסגרת
   שחורה 1px סביב כל תא ו-width:99%.
   מוחרגות טבלאות של רכיבים שיש להן עיצוב משלהן: המחשבון (table.table) וטבלת
   השוואת בתי ההשקעות. טבלאות רכיבים אחרות (למשל sm-travel-price-table)
   מוגדרות בהמשך הקובץ ולכן גוברות על הכללים כאן לפי סדר.
   ========================================================================== */
.sm-modern-article .article table:not(.table):not(.investment-comparison-table) {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    background: #fff;
    border: 1px solid #d9e6e1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.sm-modern-article .article table:not(.table):not(.investment-comparison-table) th,
.sm-modern-article .article table:not(.table):not(.investment-comparison-table) td {
    border: 0;
    border-bottom: 1px solid #eef4f2;
    padding: 0.65rem 0.85rem;
    text-align: right;
    vertical-align: top;
    word-wrap: break-word;
}

.sm-modern-article .article table:not(.table):not(.investment-comparison-table) thead th,
.sm-modern-article .article table:not(.table):not(.investment-comparison-table) tr:first-child th {
    background: #eef4f2;
    color: #17765a;
    font-weight: 700;
    border-bottom: 1px solid #d9e6e1;
}

/* .tableArticle הלגאסי בונה את שורת הכותרת מ-<td> ולא מ-<th>, ולכן הכלל שמעל
   לא תופס אותה. המחלקה עצמה מסמנת "טבלת תוכן שהשורה הראשונה בה כותרת". */
.sm-modern-article .article table.tableArticle tr:first-child td {
    background: #eef4f2;
    color: #17765a;
    font-weight: 700;
    border-bottom: 1px solid #d9e6e1;
}

.sm-modern-article .article table:not(.table):not(.investment-comparison-table) tbody tr:nth-child(even) td {
    background: #fafcfb;
}

.sm-modern-article .article table:not(.table):not(.investment-comparison-table) tr:last-child td {
    border-bottom: 0;
}

.sm-modern-article .article-cta-panel {
border: 6px solid #D1E7DD;
            padding: 0.65em 0.9em;
            margin: 1em 0;
}

.sm-modern-article .article-cta-panel p {
margin: 0.35em 0;
}

.sm-modern-article .article-cta-panel .ctaBox {
margin: 0.45em 0 0.65em 0;
                text-align: center;
}

.sm-modern-article .article-cta-button:hover {
color: #fff;
                text-decoration: none;
}

.sm-modern-article .article-cta-button--trading {
background-color: #198754;
}

.sm-modern-article .article-cta-button--trading:hover {
background-color: #157347;
}

.sm-modern-article .article-cta-button--savings {
background-color: #1b3f73;
}

.sm-modern-article .article-cta-button--savings:hover {
background-color: #14325d;
}

.sm-modern-article #calcs .article-calculator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #198754;
    font-size: 28px;
    line-height: 1;
}

.sm-modern-article #calcs .calculator-links-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.2rem;
    color: #17765a;
}

.sm-modern-article #calcs .calculator-links-intro {
    margin: 0 0 0.75rem;
    color: #52665f;
    font-size: 14px;
    line-height: 1.4;
}

.sm-modern-article #calcs .calculator-link-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-modern-article #calcs .calculator-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d1e7dd;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    color: #245044;
    font: 600 15px 'Noto Sans Hebrew', Arial, sans-serif;
    line-height: 1.35;
    text-align: right;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sm-modern-article #calcs .calculator-link__arrow {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eaf5ef;
    color: #17765a;
    font-size: 13px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sm-modern-article #calcs .calculator-link:hover,
.sm-modern-article #calcs .calculator-link:active {
    border-color: #198754;
    background: #eaf5ef;
    color: #0f6048;
}

.sm-modern-article #calcs .calculator-link:hover .calculator-link__arrow,
.sm-modern-article #calcs .calculator-link:active .calculator-link__arrow {
    background: #198754;
    color: #fff;
    transform: translateX(-2px);
}

.sm-modern-article #calcs .calculator-link:focus-visible {
    border-color: #198754;
    outline: 3px solid rgba(25, 135, 84, 0.25);
    outline-offset: 2px;
}

.sm-modern-article #faq-services {
margin: 0 0 30px 0;
            padding-top: 30px;
}

.sm-modern-article #faq-services h3 {
text-align: right;
}

.sm-modern-article .faq-container {
display: flex;
            flex-direction: column;
            gap: 15px;
}

.sm-modern-article .faq-item {
background: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
}

.sm-modern-article .faq-question {
display: flex;
            align-items: center;
            padding: 20px;
            cursor: pointer;
            background: #fff;
            border-bottom: 1px solid #eee;
            transition: background-color 0.3s ease;
}

.sm-modern-article .faq-question:hover {
background: #f5f5f5;
}

.sm-modern-article .faq-question.active {
background: #EAF5EF;
}

.sm-modern-article .faq-icon {
background: #198754;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            margin-right: 1em;
            transition: transform 0.3s ease;
}

.sm-modern-article .faq-question.active .faq-icon {
transform: scale(1.1);
}

.sm-modern-article .faq-text {
flex: 1;
            margin: 0;
            padding: 0;
}

.sm-modern-article h4.faq-text {
margin: 0;
            padding: 0;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            text-align: right;
            direction: rtl;
            width: 100%;
            margin-right: 1em;
}

.sm-modern-article .faq-answer {
max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: #fff;
}

.sm-modern-article .faq-answer.open {
max-height: 1500px;
}

.sm-modern-article .faq-answer p {
padding: 20px;
                margin: 0;
                font-size: 16px;
                line-height: 1.6;
                color: #555;
                text-align: right;
}

.sm-modern-article .faq-answer ul {
padding: 20px;
                margin: 0;
                text-align: right;
                direction: rtl;
}

.sm-modern-article .faq-answer li {
text-align: right;
                direction: rtl;
}

@media (max-width:768px) {
    .sm-modern-article #faq-services {
    padding-top: 20px;
    }
}

@media (max-width:768px) {
    .sm-modern-article .faq-question {
    padding: 15px;
    }
}

@media (max-width:768px) {
    .sm-modern-article .faq-icon {
    width: 25px;
                    height: 25px;
                    font-size: 16px;
                    margin-right: 0.8em;
    }
}

@media (max-width:768px) {
    .sm-modern-article .faq-text h4 {
    font-size: 16px;
    }
}

@media (max-width:768px) {
    .sm-modern-article .faq-answer p {
    padding: 15px;
                    font-size: 16px;
    }
}

@media (max-width:768px) {
    .sm-modern-article .faq-answer ul {
    padding: 15px;
                    text-align: right;
                    direction: rtl;
    }
}

@media (max-width:768px) {
    .sm-modern-article .faq-answer li {
    text-align: right;
                    direction: rtl;
    }
}

/* ==========================================================================
   TravelPriceTable.ascx — טבלת מחירים חיה לביטוח נסיעות.
   namespace עצמאי ואינו תלוי ב-.sm-modern-article: הקומפוננטה נצרכת גם
   בעמודי החברה והיעד שייבנו בשלבים 3-4. יושבת כאן ולא בקובץ render-blocking
   נפרד כי כל צרכניה המתוכננים טוענים ממילא את cssModernArticle; ברגע
   שתופיע בדף שאינו מאמר — לחלץ ל-bundle קטן משלה.
   ========================================================================== */

.sm-travel-price-table {
    margin: 1.25rem 0 1.5rem;
}

.sm-travel-price-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sm-travel-price-table table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    text-align: right;
    direction: rtl;
}

.sm-travel-price-table caption {
    padding: 0 0 0.6rem;
    color: #33475b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: right;
    caption-side: top;
}

.sm-travel-price-table th,
.sm-travel-price-table td {
    padding: 0.6rem 0.7rem;
    border: 1px solid #D1E7DD;
    font-size: 16px;
    line-height: 1.4;
    vertical-align: middle;
}

.sm-travel-price-table thead th {
    background: #EAF5EF;
    color: #17765a;
    font-weight: 700;
}

.sm-travel-price-table tbody th {
    background: #f7fbf9;
    font-weight: 600;
    white-space: nowrap;
}

.sm-travel-price-table tbody td {
    font-weight: 700;
}

.sm-travel-price-table__na {
    color: #6c757d;
    font-weight: 400;
}

.sm-travel-price-table__source {
    margin: 0.6rem 0 0;
    color: #5b6b7a;
    font-size: 14px;
    line-height: 1.5;
}

.sm-travel-price-table a.sm-travel-price-table__cta,
.sm-travel-price-table a.sm-travel-price-table__cta:link,
.sm-travel-price-table a.sm-travel-price-table__cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    background: #198754;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.sm-travel-price-table a.sm-travel-price-table__cta:hover,
.sm-travel-price-table a.sm-travel-price-table__cta:active {
    background: #157347;
    color: #fff;
}

.sm-travel-price-table a.sm-travel-price-table__cta:focus-visible {
    outline: 3px solid #0f6048;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .sm-travel-price-table th,
    .sm-travel-price-table td {
        padding: 0.5rem 0.45rem;
        font-size: 15px;
    }

    .sm-travel-price-table a.sm-travel-price-table__cta {
        width: 100%;
    }
}

/* ==========================================================================
   ריתמוס אנכי בין חלקי המאמר + עמודת הצד.
   ⚠️ opt-in במחלקה .sm-article-rhythm ובכוונה: `.article h3` מקבל margin-top
   רק page-scoped ב-WhatToCompareInTradingAccount, ואילו ETF ו-S&P אינם
   מגדירים אותו כלל. הוספה גורפת לקובץ המשותף הייתה משנה שני מאמרים שכבר
   בייצור ולא נבדקו מחדש. מאמר חדש מוסיף את המחלקה למעטפת ומקבל את הריווח;
   כששלושת הוותיקים ייבדקו אפשר להפוך אותה לברירת מחדל ולמחוק את המחלקה.
   ========================================================================== */

.sm-modern-article.sm-article-rhythm .article h3 {
    margin-top: 2.25rem;
    margin-bottom: 0.8rem;
    line-height: 1.35;
}

.sm-modern-article.sm-article-rhythm .article h4:not(.faq-text) {
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.sm-modern-article.sm-article-rhythm .tableOfContent {
    margin-bottom: 1.75rem;
}

/* הכרטיסייה האחרונה ב-FAQ נשקה לכותרת "סיכום" שאחריה */
.sm-modern-article.sm-article-rhythm .faq-container {
    margin: 1.25rem 0 2.25rem;
}

.sm-modern-article.sm-article-rhythm .article-cta-panel {
    margin: 1.75rem 0;
}

.sm-modern-article.sm-article-rhythm .sm-travel-price-table {
    margin: 1.5rem 0 1.75rem;
}

/* ---- עמודת הצד ---- */

/* כל בלוק בעמודה מקבל אוויר, ומופרד מקודמו בקו דק */
.sm-modern-article.sm-article-rhythm > .topLeft > * + * {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #d9e6e1;
}

/* המפריד הישן (.border-box) מיותר כשהכלל שלמעלה עושה את העבודה */
.sm-modern-article.sm-article-rhythm > .topLeft > .border-box {
    display: none;
}

.sm-modern-article.sm-article-rhythm > .topLeft .h3Heading {
    margin: 0 0 0.75rem;
    line-height: 1.35;
}

/* כרטיס ה-CTA בעמודת הצד. חולץ לכאן מ-<style> של שני מאמרי הנסיעות:
   הוא זהה בשניהם, וגם עמודי החברה והיעד יצרכו אותו. */
.sm-travel-sidebar-cta {
    padding: 1rem;
    border: 1px solid #d9e6e1;
    border-radius: 12px;
    background: #fff;
}

.sm-travel-sidebar-cta h3 {
    margin: 0 0 0.5rem;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.sm-travel-sidebar-cta p {
    margin: 0 0 1rem;
    font-size: 15px;
    line-height: 1.5;
}

a.sm-travel-sidebar-cta__button,
a.sm-travel-sidebar-cta__button:link,
a.sm-travel-sidebar-cta__button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    min-height: 56px;
    padding: 0.65rem 1rem;
    border-radius: 6px;
    background: #198754;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

a.sm-travel-sidebar-cta__button:hover,
a.sm-travel-sidebar-cta__button:active {
    background: #157347;
    color: #fff;
}

a.sm-travel-sidebar-cta__button:focus-visible {
    outline: 3px solid #0f6048;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   כפתורי CTA לגאסיים (.buttonCTA / .buttonCTA2 / .buttonCTA3)
   ---------------------------------------------------------------
   חלק מהמאמרים נושאים width קשיח inline על ה-<a> (למשל style="width: 350px"),
   שרחב מעמודת התוכן במובייל (~317px) ויוצר גלישה אופקית של הדף.
   max-width גובר על width — גם כשה-width הוא inline — ולכן זה מהדק בלי לגעת
   ב-markup של המאמר. תחום ל-.sm-modern-article בלבד: דפים שלא עברו מיגרציה
   אינם מושפעים.
   --------------------------------------------------------------- */
/* ⚠️ הכפתור הראשון בסיידבר נצמד למה שמעליו בלי ריווח. `.ctaMargin` נושא
   `margin-bottom` בלבד (9.6px) ו-`margin-top: 0`, ולכן בין שני כפתורים
   רצופים יש 10px - אבל הכפתור **הראשון** ברצף נדבק לתמונת הטיזר או לתיבת
   ההודעה שמעליו (נמדד GAP=0 בשני המקומות).
   ⚠️ המרווח מתאפס בין כפתורים רצופים כדי לא להכפיל את ה-10px הקיים. */
.sm-modern-article .topLeft .ctaMargin {
    margin-top: 0.75rem;
}

    .sm-modern-article .topLeft .ctaMargin + .ctaMargin {
        margin-top: 0;
    }

/* ⚠️ תיבת ה-CTA בגוף המאמר: הכותרת ירדה לתחתית במקום לשבת מעל הטקסט.
   `.icon1`, `.iconHead` ו-`.divAdjust` כולם inline-level (`.divAdjust`
   מוגדר `display:inline-block` ב-cssSupermarker). בעמודה הצרה של הלגאסי
   ה-`.divAdjust` נשבר לשורה נפרדת מתחת לכותרת, אבל בעמודה הרחבה של המאמר
   המהוגר שלושתם נכנסים לשורה אחת - ואז יישור לפי קו-הבסיס מציב את הכותרת
   הקצרה בתחתית התיבה, לצד הכפתור. נמדד: כותרת top=4923 מול גוף top=4782,
   בעוד בייצור הכותרת מעל (5740 מול 5768).
   ⚠️ זו לא רגרסיה של CSS אלא של **רוחב**: אותו markup, אותו display, תוצאה
   הפוכה. `display: block` מקבע את הסידור בלי תלות ברוחב העמודה.
   ⚠️ `text-align: right !important` של המקור נשמר - לא נוגעים בו. */
.sm-modern-article .article-summary .divAdjust {
    display: block;
}

/* ⚠️ כפתורי ה-CTA בגוף המאמר קיבלו שלושה גדלים שונים באותו מאמר, כי
   `.ctaArticleSmall{width:55%}` נגזר מרוחב **המכל** ולא מהתוכן: מכל של
   441px נתן כפתור 243px, ומכל של 607px נתן 496px. התוצאה - אותו רכיב
   נראה שונה בכל הופעה, וזה מה שרונן תפס ב-CTA הראשון.
   ⚠️ בייצור ההפרש קטן יותר (267 מול 358) אבל קיים; הרוחב הגדול יותר של
   עמודת המאמר המהוגר הקצין אותו.
   הרוחב נגזר עכשיו מהתוכן עם רצפה, כך שכל שלושת ה-CTA נראים אותו רכיב. */
.sm-modern-article .ctaArticleSmall {
    width: auto;
    min-width: 16rem;
    max-width: 100%;
    padding: 0.85rem 1.5rem;
}

.sm-modern-article .buttonCTA,
.sm-modern-article .buttonCTA2,
.sm-modern-article .buttonCTA3 {
    max-width: 100%;
}

/* ==========================================================================
   טיזרי "בחר מוצר להשוואה" — סיידבר ותחתית המאמר
   --------------------------------------------------------------------------
   הלגאסי: ארבעה כפתורים זהים ב-`rgb(66,183,42)` (ירוק צועק, זר לפלטת המותג),
   ‎`font: bold 20px Arial`‎ ורוחב קשיח 250px. השפה המודרנית נלקחה מ-
   `gemel-modern.css` (kg-cta): ירוק מותג `#17765a`, רדיוס 8px, משקל 600.

   ⚠️ ה-!important כאן אינו קיצור דרך — `.ctaWizard2` בקובץ הגלובלי מגדיר
   `background-color: rgb(66,183,42) !important`, ומולו כלל רגיל מפסיד.
   ⚠️ אין נגיעה ב-markup: המחלקות `openLead` ו-`data-position` הן חוזה
   פונקציונלי (פתיחת מודל הליד ומדידת GA) — רק המראה משתנה.
   ========================================================================== */
.sm-modern-article .ctaWizard,
.sm-modern-article .ctaWizard:link,
.sm-modern-article .ctaWizard:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    margin-inline: auto;
    padding: 0.6rem 1rem;
    box-sizing: border-box;
    background-color: #17765a !important;
    border-radius: 8px;
    color: #fff;
    /* ⚠️ בנפרד ולא ב-shorthand: `font: 600 .95rem/1.35 inherit` הוא **הצהרה פסולה**
       (inherit אינו ערך חוקי ל-font-family בתוך shorthand) והדפדפן מתעלם ממנה
       בשקט — הכפתורים נשארו על `bold 20px Arial` של הלגאסי. */
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.sm-modern-article .ctaWizard:hover,
.sm-modern-article .ctaWizard:active,
.sm-modern-article .ctaWizard:focus-visible {
    background-color: #115c46 !important;
    color: #fff;
    text-decoration: none;
}

.sm-modern-article .ctaWizard:focus-visible {
    outline: 3px solid rgba(23, 118, 90, 0.35);
    outline-offset: 2px;
}

/* ריווח אחיד בין הכפתורים — הלגאסי נתן 1em מלמעלה ומלמטה (כפול בין שכנים) */
.sm-modern-article .ctaMargin {
    margin: 0 0 0.6rem;
}

/* כותרות הטיזר — ה-markup נושא `font: bold 20px Arial` inline, ולכן !important */
.sm-modern-article h4[style*="Arial"] {
    font-family: inherit !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #16302a;
    margin: 0 0 0.35rem;
}

.sm-modern-article p[style*="Arial"] {
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #5f6f6b;
    margin: 0 0 0.5rem;
}

/* המפריד הליים הישן (#BCCC00, המיתוג הישן של TheMarker) → קו עדין,
   בהתאם ל-[[feedback-sidebar-modernization-pattern]] */
.sm-modern-article .border-box {
    border-top: 1px solid #d9e6e1 !important;
}

/* ==========================================================================
   בלוק המחשבונים בסיידבר — דפוס pm-calcs
   --------------------------------------------------------------------------
   הועתק מהמימוש הקנוני `PortfolioManagement/css/portfolio-modern.css:775`
   (הדפוס המחייב לפי [[feedback-sidebar-modernization-pattern]]), כדי שגם
   מאמרים מהוגרים יקבלו אותו. מחליף את טבלת הלגאסי (calcTD / calc.png הליים /
   חיצי sprite).
   ⚠️ הסלקטורים תחומים כ-#calcs.pm-calcs במכוון — זהה לקנוני: gemel-modern.css
   מגדיר `#calcs a { display:inline-block; height:36px; line-height:36px }`
   (ספציפיות 1,0,1), ובלי ה-id הכללים כאן היו מפסידים. ה-id נשמר גם כעוגן.
   ⚠️ במאמרים האייקונים הם Font Awesome (כבר נטען בדף) ולא Bootstrap Icons
   כמו בדפי ההשוואה — כדי לא לגרור פונט אייקונים שלישי. ה-CSS אגנוסטי לפונט.
   ========================================================================== */
#calcs.pm-calcs {
    background: #fff;
    border: 1px solid #d9e6e1;
    border-radius: 12px;
    padding: 14px 16px;
}

#calcs.pm-calcs .pm-calcs__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid #d9e6e1;
    color: #16302a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

#calcs.pm-calcs .pm-calcs__title i {
    color: #17765a;
    font-size: 1.15rem;
}

/* reset מלא על ה-<a> — דורס את inline-block/36px של הלגאסי */
#calcs.pm-calcs a.pm-calcs__item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    min-height: 44px;
    line-height: 1.35;
    padding: 5px 4px;
    border-bottom: 1px solid #eef2f0;
    border-radius: 8px;
    color: #16302a;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

#calcs.pm-calcs a.pm-calcs__item:last-child {
    border-bottom: 0;
}

#calcs.pm-calcs .pm-calcs__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f6f9f8;
    color: #17765a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

#calcs.pm-calcs .pm-calcs__label {
    flex: 1 1 auto;
}

/* חץ "המשך" — שמאלה ב-RTL (קדימה בכיוון הקריאה) */
#calcs.pm-calcs .pm-calcs__chevron {
    flex: 0 0 auto;
    color: #9db3ab;
    font-size: 0.78rem;
    transition: transform 0.12s ease, color 0.12s ease;
}

#calcs.pm-calcs a.pm-calcs__item:hover,
#calcs.pm-calcs a.pm-calcs__item:focus-visible {
    background: #f6f9f8;
    color: #0f5340;
}

#calcs.pm-calcs a.pm-calcs__item:hover .pm-calcs__chevron {
    color: #17765a;
    transform: translateX(-3px);
}

#calcs.pm-calcs a.pm-calcs__item:hover .pm-calcs__icon {
    background: #e8f3ef;
}

/* ==========================================================================
   טופס הליד בסיידבר המאמר
   --------------------------------------------------------------------------
   הפלטה לפי [[project-lead-form-visual-system]]: משטח #eef4f1 במקום הטוקן
   החאקי #edf1d8 (גוון ~70° שמתנגש עם ירוק המותג ~163°), ירוק CTA #17765a,
   hover #115c46, שדות לבנים בגובה ≥44px.

   ⚠️ תחימה כפולה במכוון: `leads-bootstrap.js` מעביר בזמן פתיחת המודל את
   #lead אל #leadMobile ומשם אל גוף המודל — כלומר הליד יוצא מתוך
   .sm-modern-article וסלקטורים שתלויים בעטיפת המאמר מפסיקים להתאים.
   לכן כל כלל מופיע גם תחת #leadBootstrapModal. הקובץ הזה נטען opt-in
   במאמרים מהוגרים בלבד, ולכן דפי לגאסי אינם מושפעים.

   ⚠️ התחימה היא דרך #getOffer ולא דרך .leadBox/.tbLead: שמות המחלקות
   בקונטרול גנריים ומתנגשים עם compareTables.css הגלובלי
   ([[project-lead-control-visual]]).
   ========================================================================== */
/* ⚠️⚠️ התנגשות שם מול Bootstrap 5. הקונטרול נושא `class="lead"` במובן
   "ליד מכירה", ובוטסטרפ מגדיר `.lead` כ-utility לפסקת פתיח:
   `font-size:1.25rem; font-weight:300`. במאסטר הישן בוטסטרפ אינו נטען
   וזה היה בלתי מזיק לחלוטין - לכן איש לא שם לב במשך גל שלם.
   על SupermarkerMasterPage הוא חוטף את **כל** הטופס: כל טקסט שאין לו
   כלל מפורש מתנפח ל-20px במשקל 300, והתוצאה נראית שבורה.

   נמדד: בייצור על המאסטר הישן הטופס הוא 12px/400; על החדש 20px/300.
   ⚠️ ההיקף: **51 מאמרים מהוגרים** נושאים `<div id="lead" class="lead">`,
   מהם 22 כבר בייצור - כלומר זה באג חי, לא רגרסיה חדשה.

   הפתרון הוא לנטרל את ה-utility ולא לקבוע גודל משלנו: שאר הכללים בקובץ
   הזה כבר מעצבים את הטופס במכוון (שדות, תוויות, כפתור), והם מניחים בסיס
   שפוי שיורש מ-`.topLeft` (16px/400). */
/* ⚠️ אותה משפחה כמו `.lead`: כותרות **בלי מחלקה** בתוך קונטרול הליד נשלטות
   ע"י ברירת המחדל של בוטסטרפ (`h3 { font-size: 1.75rem }` = 28px), במקום
   להשתלב בטופס. במאסטר הישן בוטסטרפ אינו נטען והן ירשו 12px מהמכל.
   מאפסים לגודל המכל ומשאירים את המשקל, שהוא נושא את ההיררכיה.
   ⚠️ `:not([class])` במכוון - `.h3Title`/`.leadTitle` מעוצבות במפורש למעלה
   ואסור לגעת בהן. */
.sm-modern-article #lead h2:not([class]),
.sm-modern-article #lead h3:not([class]),
.sm-modern-article #lead h4:not([class]),
.sm-modern-article #lead1 h2:not([class]),
.sm-modern-article #lead1 h3:not([class]),
.sm-modern-article #lead1 h4:not([class]),
#leadBootstrapModal #lead h2:not([class]),
#leadBootstrapModal #lead h3:not([class]),
#leadBootstrapModal #lead h4:not([class]),
#leadBootstrapModal #lead1 h2:not([class]),
#leadBootstrapModal #lead1 h3:not([class]),
#leadBootstrapModal #lead1 h4:not([class]) {
    font-size: inherit;
}

/* ⚠️ רוחב קשיח בקונטרול מול מכל מרופד. ארבעה קונטרולי ליד
   (MountainLead, MortgageEntitlementRequest, LeadInsurance, LoanRequest)
   מגדירים ב-<style> הפנימי שלהם `.leadBox1 { width: 300px }`. הסיידבר הוא
   300px ו-`#lead` מוסיף `padding: 1rem`, כלומר תיבת התוכן היא 268px -
   והקופסה גולשת 32px ונראית מוסטת שמאלה ב-RTL. זה מה שרונן תפס.

   ⚠️ ה-`!important` נדרש: `cssSupermarker` מגדיר `.leadBox1 { width: inherit
   !important }`, ובלי important הכלל שלנו מפסיד לו.
   ⚠️ תחום ל-`#lead`/`#lead1` בלבד ולא ל-`.leadBox1` הגלובלי - הקונטרולים
   האלה משרתים גם דפי לגאסי, ושם 300px נכון. */
.sm-modern-article #lead .leadBox,
.sm-modern-article #lead .leadBox1,
.sm-modern-article #lead1 .leadBox,
.sm-modern-article #lead1 .leadBox1,
#leadBootstrapModal #lead .leadBox,
#leadBootstrapModal #lead .leadBox1,
#leadBootstrapModal #lead1 .leadBox,
#leadBootstrapModal #lead1 .leadBox1 {
    width: auto !important;
    max-width: 100%;
}

.sm-modern-article #lead.lead,
.sm-modern-article #lead1.lead,
#leadBootstrapModal #lead.lead,
#leadBootstrapModal #lead1.lead {
    font-size: inherit;
    font-weight: inherit;
}

.sm-modern-article #lead,
#leadBootstrapModal #lead {
    background: #eef4f1;
    border: 1px solid #d9e6e1;
    border-radius: 10px;
    padding: 1rem;
}

/* כותרת הליד — נושקת לקצוות הכרטיס במקום "לצוף" בתוך הריפוד.
   המרג'ין השלילי מבטל את ריפוד ה-#lead; הרדיוס תואם את פינות הכרטיס. */
.sm-modern-article #lead .leadTitle,
#leadBootstrapModal #lead .leadTitle {
    margin: -1rem -1rem 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: 9px 9px 0 0;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
}

.sm-modern-article #lead .leadDescription,
#leadBootstrapModal #lead .leadDescription {
    color: #245044;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
}

/* כפתור השליחה — הלגאסי: `.font3{font:bold 1.4em arial !important}` + `.mobileButton
   {font-size:1.3em}` ⇒ arial 28px bold בתוך כרטיס של 300px (רונן, QA 2026-08-22:
   "לא נראה בחוויה מבחינת גודל פונט וסוג"). הכלל הישן הוא !important, ולכן גם כאן.
   המפרט: פונט האתר, 15px/700, 46px גובה, עד 280px, ירוק הליד #17765a
   ([[project-lead-form-visual-system]]). הטקסט עצמו נקבע פר-דף ב-SubmitButtonText. */
.sm-modern-article #lead #submitLead,
#leadBootstrapModal #lead #submitLead {
    /* לא inherit: הקונטרול יושב מתחת ל-body של המאסטר (system-ui של Bootstrap),
       ואילו המאמר והסיידבר רצים על פונט האתר */
    font-family: 'Noto Sans Hebrew', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    width: 100% !important;
    max-width: 280px;
    min-height: 46px;
    margin: 0.25rem auto 0;
    padding: 10px 14px;
    border: 0 !important;
    border-radius: 8px;
    background-image: none !important;
    background-color: #17765a !important;
    color: #fff !important;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .sm-modern-article #lead #submitLead:hover,
    .sm-modern-article #lead #submitLead:focus-visible,
    #leadBootstrapModal #lead #submitLead:hover,
    #leadBootstrapModal #lead #submitLead:focus-visible {
        background-color: #115c46 !important;
        color: #fff !important;
    }

    .sm-modern-article #lead #submitLead:focus-visible,
    #leadBootstrapModal #lead #submitLead:focus-visible {
        outline: 3px solid rgba(23, 118, 90, 0.35);
        outline-offset: 2px;
    }

/* תוויות — ⚠️ הקונטרול יורש `margin-right: ~32px` מה-CSS הישן, שדוחף כל תווית
   פנימה ומייצר אי-יישור מול השדה שמתחתיה. חובה לאפס. */
.sm-modern-article #getOffer .leadFieldName,
#leadBootstrapModal #getOffer .leadFieldName {
    display: block;
    color: #245044;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.sm-modern-article #getOffer .textRight,
#leadBootstrapModal #getOffer .textRight {
    text-indent: 0;
}

/* שדות — לבן, גובה מגע 44px, פונט 16px כדי ש-iOS לא יזום את הדף באוטומט */
.sm-modern-article #getOffer .tbLead,
#leadBootstrapModal #getOffer .tbLead {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    background: #fff;
    border: 1px solid #9eb8ae;
    border-radius: 6px;
    font-size: 16px;
    color: #1a2b28;
}

.sm-modern-article #getOffer .tbLead:focus,
#leadBootstrapModal #getOffer .tbLead:focus {
    outline: none;
    border-color: #17765a;
    box-shadow: 0 0 0 3px rgba(23, 118, 90, 0.18);
}

/* ⚠️ תאי הטופס יורשים `text-align: center` — לכן תיבת הסימון ושורת התקנון
   לא התיישרו עם השדות. תא כפתור השליחה נושא `text-align:center` **inline**
   ולכן נשאר ממורכז ואינו מושפע. */
/* ⚠️ הגודל נקבע על התא ולא על אחֵי תיבת הסימון: חלק ממשפט ההסכמה הוא **צומת
   טקסט חשוף** ("קראתי את", "ואני מאשר...") ולא אלמנט, ולכן סלקטור כמו
   `#cbTnaim ~ *` פשוט לא נוגע בו — והוא נשאר על 20px שהתא יורש, בזמן
   שהקישורים יורדים ל-13.6px. התוצאה: שני גדלים באותו משפט. */
.sm-modern-article #getOffer .tbLeadTD,
#leadBootstrapModal #getOffer .tbLeadTD {
    padding-bottom: 0.6rem;
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* שורת התקנון — תיבת סימון בגודל אמיתי, טקסט זורם במשפט אחד.
   ⚠️ הקונטרול מזריק <br> אחרי הקישורים ואחרי המשפט, מה שמפצל את ההסכמה
   לשלוש שורות שבורות. התיעוד מחייב רצף ("ואני מאשר..." צמוד לקישורים),
   ולכן מנטרלים את השבירות ב-CSS במקום לגעת בקונטרול המשותף. */
.sm-modern-article #getOffer #cbTnaim,
#leadBootstrapModal #getOffer #cbTnaim {
    width: 18px;
    height: 18px;
    margin: 0 0 0 0.5rem;
    vertical-align: -4px;
}

.sm-modern-article #getOffer #cbTnaim ~ span br,
.sm-modern-article #getOffer #cbTnaim ~ br,
#leadBootstrapModal #getOffer #cbTnaim ~ span br,
#leadBootstrapModal #getOffer #cbTnaim ~ br {
    display: none;
}

/* שם הקישור נשאר יחידה אחת — "ומדיניות הפרטיות" נשבר באמצע בין שתי שורות */
.sm-modern-article #getOffer #cbTnaim ~ span a,
#leadBootstrapModal #getOffer #cbTnaim ~ span a {
    white-space: nowrap;
}

.sm-modern-article #getOffer a[href*="Takanon"],
.sm-modern-article #getOffer a[href*="PrivacyPolicy"],
#leadBootstrapModal #getOffer a[href*="Takanon"],
#leadBootstrapModal #getOffer a[href*="PrivacyPolicy"] {
    color: #17765a;
}

/* כפתור השליחה — ירוק CTA, גובה מגע, רוחב מלא עד 280px */
.sm-modern-article #getOffer #btnSendLid,
#leadBootstrapModal #getOffer #btnSendLid {
    width: 100%;
    max-width: 280px;
    min-height: 46px;
    /* ⚠️ אסור קיצור `background:` כאן. ‏`.ppcButton` (cssSupermarker) מגדיר
       `background-image: url(2leftArrow24.png) !important` ולצדו
       `background-repeat: no-repeat` **בלי** important. קיצור `background`
       מאפס את כל תת-המאפיינים, ולכן ה-repeat חוזר ל-`repeat` בעוד שהתמונה
       שורדת בזכות ה-!important — והחץ מתשבץ על כל רוחב הכפתור.
       נתפס בייצור ע"י רונן ב-`Finance/ConsumerPriceIndex` (2026-08-23).
       הפתרון: longhands, עם `background-image: none !important` שמנצח אותו. */
    background-color: #17765a;
    background-image: none !important;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 8px;
    color: #fff;
    /* ⚠️ ה-!important כאן הכרחי ואינו קיצור דרך: compareTables.css:370 מגדיר
       `.font3 { font: bold 1.4em arial !important }` — shorthand שקובע בבת אחת
       גודל, משקל ומשפחת גופן. מול !important גלובלי אפילו style inline מפסיד,
       ולכן זו הדרך היחידה לגבור בלי לגעת בקונטרול המשותף (25+ דפים).
       גם משפחת הגופן נדרסת: arial על כפתור בעברית חורג משאר האתר. */
    font-size: 1rem !important;
    /* לא `inherit`: הקונטרול יושב מתחת ל-body של המאסטר שעליו Bootstrap מחיל
       system-ui, וכך הכפתור הזה קיבל גופן אחר מכפתור TradingAccountLead. */
    font-family: 'Noto Sans Hebrew', sans-serif !important;
    font-weight: 700;
    cursor: pointer;
}

.sm-modern-article #getOffer #btnSendLid:hover,
.sm-modern-article #getOffer #btnSendLid:focus-visible,
#leadBootstrapModal #getOffer #btnSendLid:hover,
#leadBootstrapModal #getOffer #btnSendLid:focus-visible {
    /* longhand מאותה סיבה כמו בכלל הבסיס — קיצור היה מחזיר את חץ ה-.ppcButton
       המשובץ במעבר עכבר */
    background-color: #115c46;
}

/* הודעת שגיאה — טקסט בלבד, בלי מסגרת או רקע (הדפוס המאושר) */
.sm-modern-article #getOffer #errorSending span,
#leadBootstrapModal #getOffer #errorSending span {
    color: #9f1d14 !important;
    font-size: 14px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   מצבי טעינה והצלחה
   --------------------------------------------------------------------------
   ⚠️ `.loader` הגלובלי (compareTables.css:4326) הוא מלבן קשיח 300×420 ברקע
   `#f9f9f9` — בתוך הכרטיס החדש הוא נראה כקופסה מנותקת עם גבולות שבורים,
   וזה מה שרונן ראה אחרי שליחת הליד.
   הפתרון זהה לזה שאושר ועבר QA ב-[[project-lead-control-visual]] עבור
   `LifeInsuranceLead`: לנטרל את הממדים הקשיחים ולהחליף את ה-gif בטבעת CSS.

   ⚠⚠ **וריאנט המזהה עם סיומת `1`** (רונן, 2026-08-24): הכללים כאן תחומים
   לפי **מזהה** ולא לפי מחלקה, ושני קונטרולים — `MountainLead` ו-
   `MortgageEntitlementRequest` — נושאים `#loader1`/`#successful1` ולא
   `#loader`/`#successful`. לכן הם נפלו הישר ל-`.loader` הגלובלי והמשיכו
   להציג את ה-gif הישן מחוץ לגבולות הכרטיס (נתפס ב-QA של הר הביטוח).
   משקפים שני מזהים ולא עוברים למחלקה `.loader`: היא משמשת גם את
   מסכי הטעינה של דפי ההשוואה, שאינם בתוך כרטיס ליד ולא אמורים להשתנות.
   -------------------------------------------------------------------------- */
.sm-modern-article #loader,
.sm-modern-article #loader1,
.sm-modern-article #successful,
.sm-modern-article #successful1,
#leadBootstrapModal #loader,
#leadBootstrapModal #loader1,
#leadBootstrapModal #successful,
#leadBootstrapModal #successful1 {
    width: auto;
    height: auto;
    min-height: 160px;
    background: transparent;
    padding: 2.25rem 1rem;
    box-sizing: border-box;
    text-align: center;
}

/* ⚠️ ה-gif הישן נושא `position:relative; top:200px; right:115px` **inline** —
   היסטים שחושבו לקופסה הלגאסית ברוחב 300px, ולכן הוא "בורח" מהכרטיס.
   מסתירים אותו ומחליפים בטבעת, במקום להילחם בהיסטים.
   ⚠️⚠️ המירכוז נעשה ב-`margin: 0 auto` בזרימה רגילה ו**לא** ב-flex: jQuery
   `.show()` כותב `display:block` **inline** על `#loader`, ולכן `display:flex`
   מ-stylesheet נדרס ומירכוז flex פשוט לא יחול. גוצ'ה מתועדת ב-
   [[project-lead-control-visual]] שנתפסה כאן שוב באימות. */
.sm-modern-article #loader img,
.sm-modern-article #loader1 img,
#leadBootstrapModal #loader img,
#leadBootstrapModal #loader1 img {
    display: none;
}

.sm-modern-article #loader::before,
.sm-modern-article #loader1::before,
#leadBootstrapModal #loader::before,
#leadBootstrapModal #loader1::before {
    content: '';
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 0.9rem;
    border: 3px solid rgba(23, 118, 90, 0.15);
    border-top-color: #17765a;
    border-radius: 50%;
    animation: smArticleLeadSpin 0.7s linear infinite;
}

@keyframes smArticleLeadSpin {
    to { transform: rotate(360deg); }
}

/* ⚠️ רוחב יציב **במודל בלבד**. `.modal-dialog` הוא shrink-to-fit
   (`max-width:520px` + `width:auto`), ולכן ברגע ש-`#getOffer` מוסתר לטובת
   הטעינה, הדיאלוג מתכווץ לרוחב הטבעי של הטבעת — נמדד **76px**, סרט צר
   שקופץ באמצע המסך. בסיידבר הבעיה אינה קיימת כי העמודה עצמה קבועה, ולכן
   הכלל תחום ל-`#leadBootstrapModal` ואינו נוגע במאמר.
   `max-width` נשמר כדי שב-375px המודל לא יגלוש. */
#leadBootstrapModal #loader,
#leadBootstrapModal #loader1,
#leadBootstrapModal #successful,
#leadBootstrapModal #successful1 {
    min-width: 280px;
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .sm-modern-article #loader::before,
    .sm-modern-article #loader1::before,
    #leadBootstrapModal #loader::before,
    #leadBootstrapModal #loader1::before {
        animation-duration: 2.4s;
    }
}

/* אישור שליחה — ⚠️ `padding-top: 12em` גלובלי (compareTables.css:4364) דחף
   את הטקסט הרחק מטה בתוך הקופסה הקשיחה; מנוטרל לטובת מירכוז אמיתי. */
.sm-modern-article #successful .onLeadNotification,
.sm-modern-article #successful1 .onLeadNotification,
#leadBootstrapModal #successful .onLeadNotification,
#leadBootstrapModal #successful1 .onLeadNotification {
    padding-top: 0;
    color: #17765a;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

/* סימן וי מעל הודעת ההצלחה — חיזוק ויזואלי לסיום מוצלח */
.sm-modern-article #successful .onLeadNotification::before,
.sm-modern-article #successful1 .onLeadNotification::before,
#leadBootstrapModal #successful .onLeadNotification::before,
#leadBootstrapModal #successful1 .onLeadNotification::before {
    content: '';
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: #eaf5ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317765a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
/* ==========================================================================
   רצועת הבלטה במאמר (.sm-article-callout)
   -------------------------------------------------------------------------
   למה בקובץ המשותף ולא page-scoped: זהו דפוס שחוזר בין מאמרים מעצם טבעו
   ("מה חשוב לבדוק", "שימו לב"), ו-§3א ב-travel-content-upgrade-plan אוסר
   לשכפל אותו inline בכל מאמר. הדרישה שהולידה אותו (רונן, 2026-08-18):
   **רוב הגולשים אינם קוראים את כל הפרוזה והולכים להבלטות** — ולכן המלצה
   או אזהרה שנקברת בתוך פסקה שקולה לכך שלא נכתבה.

   שתי וריאציות בלבד, כדי שלא יתרבו:
     ברירת מחדל  = טיפ / מה לבדוק (ירוק, בקו המשפחה של דפי הנסיעות)
     --watch     = שימו לב / מגבלה (ענבר)

   ⚠️ בלי אייקוני פנים או רגש — brief המודרניזציה §13 אוסר אותם בכותרות YMYL.
   ⚠️ הכותרת היא <p class="sm-article-callout__title"> ולא כותרת דרגה, כדי
      שהרצועה לא תיכנס ל-outline של הדף ולא תשבור את היררכיית h3/h4.
   ========================================================================= */
.sm-modern-article .sm-article-callout {
    margin: 1.25rem 0 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid #A3CFBB;
    border-inline-start: 5px solid #198754;
    border-radius: 6px;
    background: #F1F9F5;
}

    .sm-modern-article .sm-article-callout > p.sm-article-callout__title {
        margin: 0 0 0.6rem;
        color: #14654B;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
    }

    .sm-modern-article .sm-article-callout > p:last-child,
    .sm-modern-article .sm-article-callout > ul:last-child,
    .sm-modern-article .sm-article-callout > ol:last-child {
        margin-bottom: 0;
    }

    .sm-modern-article .sm-article-callout ul,
    .sm-modern-article .sm-article-callout ol {
        margin: 0;
        padding-inline-start: 1.25rem;
    }

    .sm-modern-article .sm-article-callout li {
        margin-bottom: 0.45rem;
        line-height: 1.55;
    }

        .sm-modern-article .sm-article-callout li:last-child {
            margin-bottom: 0;
        }

.sm-modern-article .sm-article-callout--watch {
    border-color: #FFE69C;
    border-inline-start-color: #C77700;
    background: #FFF9EC;
}

    .sm-modern-article .sm-article-callout--watch > p.sm-article-callout__title {
        color: #8A5300;
    }

/* --------------------------------------------------------------------------
   אייקונים ברצועת ההבלטה — SVG inline בלבד (הכרעת רונן, 2026-08-18)
   --------------------------------------------------------------------------
   מאמר טוען 3-5 אייקונים בסך הכול, ולכן פונט אייקונים שלם (‏Font Awesome
   ‏~250KB או bootstrap-icons ~215KB) הוא בדיוק העודף שנמנעים ממנו. הציורים
   עצמם הם של Bootstrap Icons (רישיון MIT), מודבקים inline — אפס בקשות רשת,
   והצבע נגזר מהרצועה דרך fill:currentColor על הכותרת ומחלקת הרצועה על
   הפריטים. אוצר האייקונים הסגור ובלוקי ה-SVG להעתקה:
   .agents/skills/article-writing/SKILL.md §4.1.
   דפי אפליקציה (השוואות, wizards) ממשיכים עם פונט bootstrap-icons — שם יש
   עשרות אייקונים והפונט מוצדק. */
.sm-modern-article .sm-article-callout__icon {
    width: 24px;
    height: 24px;
    vertical-align: -5px;
    margin-inline-end: 8px;
    fill: currentColor;
}

.sm-modern-article .sm-article-callout li.sm-callout-item {
    list-style: none;
    position: relative;
    padding-inline-start: 26px;
}

.sm-modern-article .sm-article-callout ul.sm-callout-list,
.sm-modern-article .sm-article-callout ol.sm-callout-list {
    padding-inline-start: 0;
}

.sm-modern-article .sm-article-callout li.sm-callout-item > svg {
    position: absolute;
    inset-inline-start: 0;
    top: 5px;
    width: 17px;
    height: 17px;
    fill: #198754;
}

.sm-modern-article .sm-article-callout--watch li.sm-callout-item > svg {
    fill: #C77700;
}

/* ==========================================================================
   טיזר "בדיקה שנתית לתיק" בסיידבר (div.checkList + .boxMessage1 + .ctaWizard)
   --------------------------------------------------------------------------
   הלגאסי: אייקון PNG של 128px עם padding-top:12em inline, כותרת h3 בת 3 שורות
   עם <br> ידניים, מסגרת 6px ירוק-ליים (#D1F5D1) סביב 4 שאלות ב-1.3em מודגש,
   ושני כפתורים זהים. ~840px גובה ב-300px רוחב.
   הכרעת רונן (2026-08-22): כרטיס רשימת בדיקה, בשפת הרצועות שכבר במאמר
   (clipboard2-check בכותרת, check-circle-fill לפריטים), וראשי+משני בכפתורים.
   ה-markup נשאר כפי שהוא (הוא חי ב-50 דפים, 9 מהוגרים) — הכול ב-CSS: ה-PNG
   וה-padding-top ה-inline מבוטלים ב-!important, ה-<br> מוסתרים, האייקונים
   הם SVG inline כ-data URI (§4.1: אין פונט אייקונים במאמר).
   ⚠️ `.checkList` היא גם מחלקה של 264 <ul> רגילים באתר — לכן הסלקטור הוא
   `div.checkList` בתוך `.topLeft` בלבד, ולא `.checkList` חשוף.
   ========================================================================== */
.sm-modern-article > .topLeft div.checkList {
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 1.25rem;
    background-color: #fff;
    border: 1px solid #d9e6e1;
    border-radius: 12px;
    overflow: hidden;
    text-align: right;
}

/* כותרת: רצועת ראש עם אייקון רשימת הבדיקה; ה-<br> הראשון נעלם, האחרון
   מפריד בין השאלה ל"בדיקה שמומלץ לבצע לפחות פעם בשנה" */
.sm-modern-article > .topLeft div.checkList > h3.h3Heading {
    display: flex;
    flex-direction: row;      /* מפורש: האייקון (::before) תמיד בצד ההתחלה = ימין */
    direction: rtl;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px 12px;
    background: #f6faf8;
    border-bottom: 1px solid #d9e6e1;
    text-align: right !important;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.35;
    color: #16302a;
}

    .sm-modern-article > .topLeft div.checkList > h3.h3Heading::before {
        content: "";
        flex: 0 0 40px;
        height: 40px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317765a'%3E%3Cpath fill-rule='evenodd' d='M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .sm-modern-article > .topLeft div.checkList > h3.h3Heading br {
        display: none;
    }

    .sm-modern-article > .topLeft div.checkList > h3.h3Heading br:last-of-type {
        display: block;
        content: "";
        margin-top: 3px;
    }

    /* שתי דרגות בכותרת: השאלה (מודגשת) ו"בדיקה שמומלץ לבצע לפחות פעם בשנה"
       (משנית). השורה השנייה עטופה ב-<span class="h3Heading__sub"> ב-9 המאמרים
       המהוגרים; מאמר שטרם קיבל את ה-span פשוט מציג את שתי השורות במשקל אחד. */
    .sm-modern-article > .topLeft div.checkList > h3.h3Heading > .h3Heading__sub {
        display: block;
        margin-top: 3px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.35;
        color: #6b7f77;
    }

    .sm-modern-article > .topLeft div.checkList > h3.h3Heading > span.h3Heading__sub ~ br,
    .sm-modern-article > .topLeft div.checkList > h3.h3Heading:has(.h3Heading__sub) br:last-of-type {
        display: none;
    }

/* השאלות: רשימת בדיקה עם check-circle-fill במקום מסגרת ליים ופסקאות מודגשות */
.sm-modern-article > .topLeft div.checkList > .boxMessage1 {
    border: 0;
    margin: 0;
    padding: 12px 16px 4px;
    text-align: right;
}

    .sm-modern-article > .topLeft div.checkList > .boxMessage1 p.font6 {
        position: relative;
        margin: 0 0 9px;
        padding-inline-start: 26px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
        color: #3d524a;
        text-align: right;
    }

        .sm-modern-article > .topLeft div.checkList > .boxMessage1 p.font6::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 3px;
            width: 17px;
            height: 17px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23198754'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") center / contain no-repeat;
        }

        .sm-modern-article > .topLeft div.checkList > .boxMessage1 p.font6 br {
            display: none;
        }

/* הכפתורים: ראשי (ירוק, מהכלל המשותף של .ctaWizard) ואחריו משני (לבן) */
.sm-modern-article > .topLeft div.checkList > .ctaMargin {
    margin: 0 16px 8px;
}

    .sm-modern-article > .topLeft div.checkList > .ctaMargin:first-of-type {
        margin-top: 4px;
    }

    .sm-modern-article > .topLeft div.checkList > .ctaMargin:last-of-type {
        margin-bottom: 16px;
    }

    .sm-modern-article > .topLeft div.checkList > .ctaMargin .ctaWizard br {
        display: none;
    }

    .sm-modern-article > .topLeft div.checkList > .ctaMargin .ctaWizard {
        max-width: none;
        min-height: 46px;
        padding: 0.45rem 0.75rem;
        font-size: 14.5px;
        line-height: 1.3;
    }

    /* המשני: לבן עם מסגרת ירוקה. ה-!important נדרש כי הכלל המשותף של
       .ctaWizard צובע ירוק ב-!important (מול ctaWizard2 הגלובלי). */
    .sm-modern-article > .topLeft div.checkList > .ctaMargin + .ctaMargin .ctaWizard,
    .sm-modern-article > .topLeft div.checkList > .ctaMargin + .ctaMargin .ctaWizard:link,
    .sm-modern-article > .topLeft div.checkList > .ctaMargin + .ctaMargin .ctaWizard:visited {
        background-color: #fff !important;
        color: #17765a;
        border: 1px solid rgba(23, 118, 90, 0.35);
    }

        /* ⚠️ color חייב !important: הכלל הגלובלי `.ctaWizard2:hover{color:#fff !important}`
           (compareTables.css) צובע את הטקסט לבן על רקע לבן — הכיתוב נעלם ב-hover.
           זה הבאג שרונן תפס ב-QA (2026-08-22). */
        .sm-modern-article > .topLeft div.checkList > .ctaMargin + .ctaMargin .ctaWizard:hover,
        .sm-modern-article > .topLeft div.checkList > .ctaMargin + .ctaMargin .ctaWizard:active,
        .sm-modern-article > .topLeft div.checkList > .ctaMargin + .ctaMargin .ctaWizard:focus-visible {
            background-color: #f0faf6 !important;
            color: #14654B !important;
            border-color: rgba(23, 118, 90, 0.6);
        }

/* ==========================================================================
   מודל טופס הליד במאמרים (#leadBootstrapModal)
   --------------------------------------------------------------------------
   ⚠️ עד 2026-08-23 המאמרים קיבלו את המודל **בלי שום עיצוב**. העיצוב חי
   ב-`Gemel/css/gemel-modern.css` וב-`PortfolioManagement/css/portfolio-modern.css`,
   שאף מאמר אינו טוען, ולכן על המאמרים חלו רק ברירות המחדל של Bootstrap:
     · `.modal-dialog` ברוחב קבוע 500px מול טופס של 480px => מסגרת לבנה
       א-סימטרית סביב הטופס (19px מצד אחד, 1px מהשני) - זה מה שרונן ראה.
     · `.btn-close` נשאר `position: static`: במקום להיצמד לפינה הוא נופל
       בזרימה הרגילה, בלי רקע ובלי ניגודיות (opacity ‎0.5) - כפתור סגירה
       שלא רואים ולא לוחצים.
   הכללים כאן מיישרים את המאמרים לדפוס שכבר מוכח בגמל ובניהול תיקים.
   ========================================================================== */

/* הקופסה נצמדת לרוחב הטופס במקום ל-500px קשיחים.
   ⚠️⚠️ **אסור לכתוב כאן `margin` מקוצר.** `.modal-dialog-scrollable` מחשב
   `height: calc(100% - var(--bs-modal-margin) * 2)` ו-`.modal-dialog-centered`
   מחשב `min-height` באותה נוסחה, בעוד `--bs-modal-margin` הוא 1.75rem מעל
   576px. margin קשיח של 1rem משאיר את החישוב על 1.75rem, ולכן הקופסה גבוהה
   ב-24px מהמקום שהוקצה לה. משנים את **המשתנה** ומשאירים לבוטסטרפ לחשב:
   נמדד top=16 / bottom=704 בחלון 720, ו-8 / 804 בחלון 812 - התאמה מדויקת.

   ⚠️ גוצ'ת מדידה: הרנס הדפדפן אינו מרכיב פריימים כשהחלונית מוסתרת, ולכן
   `.modal.fade .modal-dialog{transform:translate(0,-50px)}` **נתקע** ואינו
   מתחלף ב-`transform:none` של `.show`. כל מדידה אנכית יוצאת קטנה ב-50px
   בדיוק (dlgTop=-34 במקום 16), וקל לייחס את זה בטעות ל-CSS. לפני שמאשימים
   כלל - לנטרל: `#leadBootstrapModal .modal-dialog{transition:none;transform:none}`. */
#leadBootstrapModal.modal .lead-modal-dialog {
    --bs-modal-margin: 1rem;
    width: fit-content;
    max-width: 520px;
    margin-inline: auto;
}

#leadBootstrapModal .lead-modal-content {
    position: relative;
    width: 100%;
    /* ⚠️ מפורש: `.modal-content{max-width:600px}` דולף מ-CookieManager.ascx
       בחלק מהדפים, ומרחיב את הקופסה מעבר לטופס. */
    max-width: none;
    direction: rtl;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    /* ⚠️ אותו רקע כמו .modal-body במכוון: הגוף גולל אנכית, ותעלת הגלילה
       (‏15px, ב-RTL בצד שמאל) חושפת את הרקע של .modal-content. כשהוא לבן
       והגוף אפור, הרצועה נקראת כמסגרת לבנה מיותרת לצד הטופס. */
    background-color: #f9f9f9;
    /* visible - כדי שה-X יוכל לשבת על הפינה בלי שייחתך */
    overflow: visible;
}

#leadBootstrapModal .modal-body {
    background: #f9f9f9;
    padding: 0;
    border-radius: 6px;
}

/* כפתור הסגירה - בפינה העליונה, ב-RTL בצד שמאל */
#leadBootstrapModal .lead-modal-close {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: auto;
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background-size: 0.85em;
    opacity: 1;          /* ברירת המחדל 0.5 - חיוור מדי מכדי להיראות */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

    #leadBootstrapModal .lead-modal-close:hover,
    #leadBootstrapModal .lead-modal-close:focus-visible {
        background-color: #f0f0f0;
        border-color: rgba(0, 0, 0, 0.25);
    }

/* ⚠️ יעד מגע 44px נקבע לפי סוג המצביע ולא לפי רוחב המסך - אותו שיקול
   שנסגר בסרגל השיתוף (WCAG 2.5.5 / Apple HIG). טאבלט בפורטרט נכלל. */
@media (pointer: coarse) {
    #leadBootstrapModal .lead-modal-close {
        width: 44px;
        height: 44px;
        background-size: 1em;
    }
}

/* מובייל: הקופסה תופסת את הרוחב הזמין, בלי המסגרת הלבנה מסביב */
@media (max-width: 575.98px) {
    #leadBootstrapModal.modal .lead-modal-dialog {
        --bs-modal-margin: 0.5rem;
        width: auto;
        max-width: none;
        margin-inline: 0.5rem;
    }

    #leadBootstrapModal .lead-modal-content {
        max-width: none;
    }

    /* הטופס עצמו נושא לעיתים רוחב קשיח (480px) שרחב מהמסך */
    #leadBootstrapModal .modal-body > * {
        max-width: 100%;
    }
}

/* ==========================================================================
   קונטרולי ליד ומחשבון — תיחום לפי **מחלקה** ולא לפי מזהה
   --------------------------------------------------------------------------
   ⚠️ למה מחלקה ולא מזהה: המזהים בקונטרולים הם פר-קונטרול ולכן לא מכסים
   (`#getOffer` ב-15, `#getOffer1` ב-3 · `#btnSendLid` ב-16, `#SubmitLead`
   ב-3, `#submitLead` ב-1), בעוד `.tbLead` ו-`.leadBox` קיימות ב-**18 מתוך
   18**. הניסיון לשקף כלל-כלל פר-מזהה ייצר 11 בלוקים כפולים שנועדו לסחוף,
   ולכן נזנח לטובת הבלוק הזה.
   ⚠️ ההערה למעלה מזהירה מתיחום דרך `.leadBox`/`.tbLead` בגלל התנגשות עם
   compareTables.css הגלובלי. זה נכון **גלובלית** — כאן הכל תחום ל-
   `.sm-modern-article`, ונבדק שאף אחת מהמחלקות אינה מופיעה ב-markup של
   מאמר אלא רק מתוך הקונטרולים.

   ⚠️ הכללים כאן **אינם** דורסים את משפחת `#getOffer` שמעליה: מזהה+מחלקה
   (1,1,0) גובר על מחלקה+מחלקה (0,2,0). כלומר 15 הקונטרולים שכבר מעוצבים
   נשארים בדיוק כפי שהם, והבלוק הזה ממלא רק את מי שנפל בין הכיסאות.
   נמדד ב-Loans/CreditScoreAndItsUses, שם שני הקונטרולים חיים זה מעל זה:
   MortgageLead היה 16px/שדה 44px, והמחשבון 20px/תווית 28px arial/שדה 32px.
   ========================================================================== */

/* 1. ניטרול ה-utility `.lead` של בוטסטרפ — גם למכל בלי id (המחשבון). */
.sm-modern-article .lead,
#leadBootstrapModal .lead {
    font-size: 1rem;
    font-weight: 400;
}

/* 2. כרטיס אחיד. הרקע הלגאסי #edf1d8 מוחלף בירוק-בהיר של שאר הסיידבר. */
.sm-modern-article .lead,
#leadBootstrapModal .lead {
    background-color: #eef4f1;
    border: 1px solid #d9e6e1;
    border-radius: 10px;
    padding: 1rem;
}

/* 3. ⚠️ `.font3` הוא `font: bold 1.4em arial !important` ב-cssSupermarker —
   shorthand עם important שקובע גודל, משקל ומשפחה בבת אחת. הוא מה שהפך את
   תוויות המחשבון ל-28px arial. חייב !important כדי לגבור. */
.sm-modern-article .lead .font3,
#leadBootstrapModal .lead .font3 {
    font: 600 1rem/1.4 'Noto Sans Hebrew', sans-serif !important;
}

/* 4א. ⚠️ שדות בחירה שאינם `.tbLead`. ב-YatzranimGemelPensia (משותף לגמל,
   השתלמות, פנסיה וניהול תיקים) שדה הסכום נושא `class="kidomet selectLead"`
   ולא `.tbLead`, ולכן נפל מחוץ לכלל השדות: נמדד **206px מול 264px** של
   השדות מעליו, עם מסגרת אפורה במקום ירוקה-אפורה.
   המקור: `.kidomet{width:22%}` נועד לקידומת טלפון צרה, ו-`.selectLead{width:78%}`
   לשדה הרחב שלצדה (85% במדיה). כאן השדה עומד לבד, ולכן 78% נראה קטוע.
   ⚠️ תוחם ל-`.selectLead` ולא ל-`.kidomet` הבודד: קידומת טלפון אמיתית
   **צריכה** להישאר צרה. נבדק - אין אף `.kidomet` בלי `.selectLead` באף
   מאמר מהוגר (הקונטרול היחיד עם קידומת בודדת, GeneralLeadYeudi, אינו
   מרונדר במאמרים). */
.sm-modern-article .lead .selectLead,
#leadBootstrapModal .lead .selectLead {
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 0.5rem 0.65rem;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #9eb8ae;
    border-radius: 6px;
    box-sizing: border-box;
}

    /* ⚠️ גם הפוקוס: `input:focus, select:focus{border:solid 1px #BCCC00}`
       ב-compareTables צובע ליים-צהבהב שזר לפלטה. */
    .sm-modern-article .lead .selectLead:focus,
    #leadBootstrapModal .lead .selectLead:focus {
        border-color: #17765a;
        outline: 2px solid rgba(23, 118, 90, 0.25);
        outline-offset: 1px;
    }

/* 4. שדות — 44px למגע ו-16px כדי ש-iOS לא יזום את הדף בפוקוס. */
.sm-modern-article .lead .tbLead,
#leadBootstrapModal .lead .tbLead {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #9eb8ae;
    border-radius: 6px;
    box-sizing: border-box;
}

    .sm-modern-article .lead .tbLead:focus,
    #leadBootstrapModal .lead .tbLead:focus {
        border-color: #17765a;
        outline: 2px solid rgba(23, 118, 90, 0.25);
        outline-offset: 1px;
    }

/* 5. כפתור השליחה/החישוב. `.button`+`.button2` נושאים גרדיאנט לגאסי ומסגרת
   זיתנית (#919574). ⚠️ longhands ולא קיצור `background` — ראה הנימוק
   בכלל של #btnSendLid למעלה (החץ של .ppcButton). */
.sm-modern-article .lead .button2,
.sm-modern-article .lead input[type="submit"],
#leadBootstrapModal .lead .button2,
#leadBootstrapModal .lead input[type="submit"] {
    width: 100%;
    min-height: 46px;
    background-color: #17765a;
    background-image: none !important;
    border: 0;
    border-radius: 8px;
    color: #fff;
    /* ⚠️ 15px ולא 17px: הכיתוב הארוך ביותר בקונטרולים האלה, "אני רוצה
       להוציא דוח הר הביטוח", דורש 239px ב-17px מול כפתור של 234px בעמודה
       של 300px - וגלש. ב-15px הוא נכנס, ו-`white-space: normal` מאפשר
       שבירה לשתי שורות במקום חיתוך אם יופיע כיתוב ארוך עוד יותר. */
    font: 700 0.9375rem/1.3 'Noto Sans Hebrew', sans-serif !important;
    white-space: normal;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

    .sm-modern-article .lead .button2:hover,
    .sm-modern-article .lead input[type="submit"]:hover,
    #leadBootstrapModal .lead .button2:hover,
    #leadBootstrapModal .lead input[type="submit"]:hover {
        background-color: #115c46;
    }

/* 6. תוויות השדות — גודל אחיד ומרווח קטן מעל השדה. */
.sm-modern-article .lead label,
#leadBootstrapModal .lead label {
    display: block;
    margin: 0 0 0.25rem;
    color: #245044;
    font-size: 0.875rem;
    font-weight: 600;
}

/* 7. רוחב קשיח בקונטרולים (300px) מול מכל מרופד — ראה הנימוק בכלל
   המקביל למעלה. `!important` נדרש מול `.leadBox1{width:inherit !important}`. */
.sm-modern-article .lead .leadBox,
.sm-modern-article .lead .leadBox1,
#leadBootstrapModal .lead .leadBox,
#leadBootstrapModal .lead .leadBox1 {
    width: auto !important;
    max-width: 100%;
    /* ⚠️ שני צבעים. הקונטרולים צובעים את הקופסה הפנימית ב-#edf1d8 (ירקרק-צהבהב
       לגאסי) ומדביקים לה `background-image: supermarker60X47.png` בפינה. מעל
       הכרטיס המודרני (#eef4f1) זה נקרא כשתי שכבות שלא מסתדרות, ולוגו זעיר
       שנראה כמו תקלה. מבטלים את שתיהן ומשאירים צבע אחד - זה מה שרונן תפס. */
    background-color: transparent;
    background-image: none;
    padding-top: 0;
}

/* 8. כותרות בלי מחלקה בתוך הליד — בוטסטרפ נותן ל-h3 ‏1.75rem. */
.sm-modern-article .lead h2:not([class]),
.sm-modern-article .lead h3:not([class]),
.sm-modern-article .lead h4:not([class]),
#leadBootstrapModal .lead h2:not([class]),
#leadBootstrapModal .lead h3:not([class]),
#leadBootstrapModal .lead h4:not([class]) {
    font-size: inherit;
}

/* 9. המחשבון: המרווח הלגאסי `margin: 2em` דוחק את התוכן בעמודה של 300px. */
.sm-modern-article .lead .calcBox,
#leadBootstrapModal .lead .calcBox {
    margin: 1rem 0;
    /* ⚠️ תיבת התוצאות בקונטרול נושאת `style="height: 120px"` **inline**.
       בלגאסי התוצאות נכנסו בגובה הזה, אבל בטיפוגרפיה של המאמר המהוגר שלוש
       שורות התוצאה דורשות ~271px - והן נשפכו 151px אל מחוץ לכרטיס, על בלוק
       המחשבונים שמתחת. `!important` הכרחי: סגנון inline מנצח כל סלקטור,
       ורק important גובר עליו. `height: auto` ולא min-height, כדי שגם
       תוצאה ארוכה יותר תגדל בלי גלישה. */
    height: auto !important;
}

/* ==========================================================================
   ארבעה תיקוני המשך אחרי QA של רונן
   ========================================================================== */

/* 1. ⚠️⚠️ מצב שגיאה — רגרסיה **שלי**. הכללים הגנריים שהוספתי
   (`.lead label` ו-`.lead .tbLead`) גוברים בספציפיות על תקן האתר
   ב-compareTables.css (`label.error{color:red;font-style:italic}` ו-
   `input.error{border:1px solid red}`), ולכן הודעת השגיאה נצבעה ירוק כהה
   כמו תווית רגילה והשדה הפסול נשאר עם מסגרת אפורה. התוצאה: אי אפשר לראות
   מה לא תקין. מחזירים את התקן, עם ספציפיות שמנצחת את הכללים שלי. */
.sm-modern-article .lead input.error,
.sm-modern-article .lead select.error,
.sm-modern-article .lead .tbLead.error,
#leadBootstrapModal .lead input.error,
#leadBootstrapModal .lead select.error,
#leadBootstrapModal .lead .tbLead.error {
    /* ⚠️ `!important` ולא ספציפיות גבוהה יותר: הכלל המתחרה הוא
       `.sm-modern-article #getOffer .tbLead` — **מזהה** (1,2,0), ומזהה גובר
       על כל מספר מחלקות. כדי לנצח בלי important הייתי חייב לשקף את הכלל
       לכל וריאנט מזהה (#getOffer / #getOffer1) — בדיוק הכפילות שנזנחה.
       מצב שגיאה הוא ממילא דריסה מהותית וקצרת-מועד, ולכן important כאן
       נכון ולא קיצור דרך. */
    border: 2px solid #d93025 !important;
    background-color: #fff8f8 !important;
}

.sm-modern-article .lead label.error,
#leadBootstrapModal .lead label.error {
    display: block;
    margin: 0.25rem 0 0.5rem;
    color: #d93025;
    font-style: italic;
    font-weight: 400;
    font-size: 0.8125rem;
}

/* 2. כותרת הכרטיס נצמדת לקצוות. הכלל המקביל קיים למעלה אבל תחום ל-`#lead`,
   ולכן כרטיסים עם `#lead1` או בלי id קיבלו כותרת של 266px בתוך כרטיס של
   300px — צפה באוויר במקום לשבת על הקצה. המרג'ין השלילי מבטל את ריפוד
   הכרטיס (1rem), והרדיוס תואם את פינותיו. */
.sm-modern-article .lead .leadTitle,
#leadBootstrapModal .lead .leadTitle {
    margin: -1rem -1rem 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: 9px 9px 0 0;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
}

/* 3. מסילות הסליידר במחשבון נשארו על הצהבהב הלגאסי (#f8fbe6) בזמן שהכרטיס
   כבר ירוק-בהיר. שקוף — הכרטיס נראה מבעדן. */
.sm-modern-article .lead .sliderBoxInner,
.sm-modern-article .lead .slideOuter,
#leadBootstrapModal .lead .sliderBoxInner,
#leadBootstrapModal .lead .slideOuter {
    background-color: transparent;
    background-image: none;
    border: 0;
}

/* 4. ⚠️ כפתורי ה-CTA בסוף המאמר חפפו זה את זה ב-11px. `.buttonGoTo` הוא
   `display: inline` בלגאסי, והעוגן שעוטף אותו נשאר בגובה שורה אחת (22px)
   בעוד תיבת הכפתור 86px — כלומר הגובה לא נשמר וההפרש בלע את
   `margin-top: 50px` של האח הבא.
   ⚠️ בייצור אין חפיפה כי שם הכפתור 64px בלבד; הטיפוגרפיה הגדולה יותר של
   המאמר המהוגר היא שהפכה את זה לגלוי. כלומר רגרסיה של המיגרציה.
   `inline-block` גורם לתיבת השורה להכיל את הגובה. `width: auto` במכוון —
   שמירה על הרוחב תלוי-התוכן שיש היום, במקום שה-`width: 30%` הלגאסי יתחיל
   לחול פתאום ויכווץ את הכפתור ל-90px בעמודת מובייל. */
.sm-modern-article .buttonGoTo {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: top;
}

/* ==========================================================================
   ממצאי סריקת המובייל (375) על כל 66 המאמרים
   ========================================================================== */

/* ⚠️ טבלאות לגאסי עם רוחב תא מפורש. `.tableArticle` נושא ב-markup תאים עם
   `width` (נמדד 120/179/179), ועם `table-layout: fixed` **התאים קובעים את
   רוחב הטבלה** - כך שהיא יצאה 479px בתוך עמודה של 317px, וגררה את הדף
   כולו ל-248px גלישה אופקית ב-375. נתפס ב-
   Trip-cancellation-insurance-for-urgent-Reserve-Order.
   ⚠️ תחום ל-`.tableArticle` ולמובייל בלבד: 16 המאמרים האחרים עם המחלקה
   הזאת **אינם** גולשים, ואין סיבה לשנות להם את חלוקת העמודות בדסקטופ.
   `width: auto` מחזיר את חלוקת העמודות לשוויונית, והטקסט נשבר במקום
   לשבור את הדף. */
@media (max-width: 991.98px) {
    /* ⚠️ מוחרגות טבלאות שכבר יושבות במכל גולל: שם **רוצים** לשמר את רוחבי
       התא, כי הטבלה גוללת בתוך התיבה שלה במקום להצטמצם. */
    .sm-modern-article .article :not(.sm-table-scroll) > table.tableArticle th,
    .sm-modern-article .article :not(.sm-table-scroll) > table.tableArticle td {
        width: auto !important;
    }
}

/* מכל גולל לטבלה רחבה. ⚠️ הדפוס כבר קיים בקובץ עבור
   `.sm-travel-price-table__scroll` - זו הגרסה הכללית שלו, לשימוש חוזר.
   עדיף על כיווץ העמודות כשהטבלה באמת רחבה: 4 עמודות ב-317px נותנות
   ~79px לעמודה, והטקסט נשבר לשורות רבות וצפופות. */
.sm-modern-article .sm-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.25rem 0;
}

    /* המרג'ין עובר למכל, אחרת נוצר רווח כפול */
    .sm-modern-article .sm-table-scroll > table {
        margin: 0;
    }

/* ⚠️ `.buttonGoTo` חתך את הכיתוב במובייל: ה-`<span>` שבתוכו גלש 21px מתחת
   לתיבה. אותה משפחה של מידה קשיחה מול טיפוגרפיה גדולה יותר - הפעם הגובה
   הלגאסי של הכפתור מול כיתוב שנשבר לשתי שורות בעמודה צרה. */
@media (max-width: 991.98px) {
    .sm-modern-article .buttonGoTo {
        height: auto;
        min-height: 44px;
        padding: 0.6rem 0.9rem;
    }
}