/* ‎crm — הדפים הציבוריים: בית, הרשמה, מסמכים משפטיים.
 *
 * ‎אין כאן `opacity: 0` ואין `transform` התחלתי — חוק ברזל 11.
 * ‎ואין שום `<script>` בדפים האלה בכלל, ולכן אין מה שיכול לא-להיטען. */

/* ‎═══════════════════════════ כותרת ═══════════════════════════ */

.site-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
    padding: var(--s4) var(--s6);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-brand {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--brand);
    text-decoration: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

/* ‎★★★ מטרות מגע — 44×44, ולא "מספיק גדול לעין"
 *
 * ‎נמדד בדפדפן ב-13/08/2026: "הרשמה" בכותרת היה **43×22** בכל רוחב.
 * ‎זה הכפתור הראשי של הדף, ובנייד הוא מטרה שקשה לפגוע בה — WCAG 2.5.8
 * ‎דורש 44×44.
 *
 * ⚠️ ‎``min-height`` לבדו לא מספיק: קישור טקסט הוא ``inline`` ואינו
 * ‎מקבל גובה בכלל. צריך גם ``display: inline-flex`` — וזה בדיוק סוג
 * ‎הדבר שסריקת CSS לא הייתה תופסת, כי הכלל "נראה" נכון. */
.site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ⚠️ ‎גם **רוחב**. "הרשמה" נמדד 43×44 — הגובה תוקן והרוחב נשאר
     * ‎פיקסל אחד מתחת לסף. מטרת מגע היא שני צירים. */
    min-height: 44px;
    min-width: 44px;
    padding-inline: var(--space-2);
    color: var(--text-2);
    text-decoration: none;
}
.site-nav a:hover { color: var(--text); text-decoration: underline; }
.site-nav a.btn { color: var(--text-on-brand); text-decoration: none; }
.site-nav a.btn:hover { color: var(--text-on-brand); text-decoration: none; }

/* ‎═══════════════════════════ השער ═══════════════════════════
 *
 * ‎שתי פעולות בלבד — התחברות והרשמה — בחלק העליון. מבקר חוזר מחפש
 * ‎"התחברות" ולא צריך לגלול בשבילה. */

.gate {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s6);
    align-items: center;
    max-width: 68rem;
    margin-inline: auto;
    padding: var(--s7) var(--s5);
}

@media (max-width: 56rem) {
    .gate { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s6) var(--s4); }
}

.gate__title {
    font-size: var(--text-3xl);
    line-height: 1.2;
    margin-bottom: var(--s4);
}

@media (max-width: 56rem) {
    .gate__title { font-size: var(--text-2xl); }
}

.gate__text {
    color: var(--text-2);
    font-size: var(--text-lg);
    max-width: 44ch;
    margin-bottom: var(--s4);
}

.gate__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.gate__points li {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--text-2);
    font-size: var(--text-sm);
}

.gate__points svg { color: var(--ok); flex: none; }

.gate__actions { display: grid; gap: var(--s4); }

.gate__card { box-shadow: var(--shadow-2); }
.gate__card--primary { border-color: var(--brand); box-shadow: var(--shadow-3); }

.gate__card-title {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--text-lg);
    margin-bottom: var(--s2);
}

.gate__card-text { color: var(--text-2); font-size: var(--text-sm); margin-bottom: var(--s4); }

.gate__cta { width: 100%; justify-content: center; }

/* ‎═══════════════════════════ סקציות ═══════════════════════════ */

.section {
    padding: var(--s7) var(--s5);
}

.section--tint {
    background: var(--surface);
    border-block: 1px solid var(--border);
}

.section__title {
    max-width: 64rem;
    margin-inline: auto;
    margin-bottom: var(--s5);
    font-size: var(--text-2xl);
    text-align: center;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--s4);
    max-width: 64rem;
    margin-inline: auto;
}

.feature {
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.section--tint .feature { background: var(--bg); }

.feature__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    margin-bottom: var(--s3);
}

/* ‎גוון = קטגוריה ויזואלית, לא מידע. לכל כרטיס יש כותרת טקסט. */
.feature__icon--brand  { background: var(--brand-soft);  color: var(--brand); }
.feature__icon--ok     { background: var(--ok-soft);     color: var(--ok); }
.feature__icon--warn   { background: var(--warn-soft);   color: var(--warn); }
.feature__icon--violet { background: var(--violet-soft); color: var(--violet); }

.feature h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }
.feature p { color: var(--text-2); font-size: var(--text-sm); margin: 0; }

/* ‎═══════════════════════════ קריאה לפעולה ═══════════════════════════ */

.cta {
    padding: var(--s7) var(--s5);
    text-align: center;
}

.cta h2 { font-size: var(--text-2xl); margin-bottom: var(--s2); }
.cta p { color: var(--text-2); margin-bottom: var(--s5); }

/* ‎═══════════════════════════ תחתית ═══════════════════════════ */

.site-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
    justify-content: space-between;
    padding: var(--s5) var(--s6);
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: var(--text-sm);
}

.site-foot p { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.site-foot a { color: var(--text-2); }

/* ‎═══════════════════════════ טופס הרשמה ═══════════════════════════ */

.auth__card--wide { max-width: 30rem; }

.field--check { margin-bottom: var(--s3); }

/* ★ ‎התווית **היא** מטרת המגע של תיבת הסימון.
 *
 * ‎נמדד בדפדפן: התיבה עצמה 20×20, והתווית סביבה **24px גובה** —
 * ‎כלומר המטרה בפועל נופלת מתחת ל-44px של WCAG 2.5.8. בנייד זה
 * ‎בדיוק אישור התנאים, השדה שחוסם את ההרשמה.
 *
 * ⚠️ ‎``align-items: flex-start`` נשמר: כשהטקסט נשבר לשתי שורות
 * ‎התיבה צריכה להישאר בשורה הראשונה ולא להתמרכז באמצע הפסקה. */
.check {
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    padding-block: var(--s2);
    gap: var(--s2);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-2);
    cursor: pointer;
}

.check input {
    width: auto;
    margin-top: 0.2em;
    flex: none;
    accent-color: var(--brand);
}

.req { color: var(--danger); }

.field__help { margin: var(--s1) 0 0; font-size: var(--text-xs); color: var(--text-3); }

.field__error {
    display: flex;
    align-items: center;
    gap: var(--s1);
    margin: var(--s1) 0 0;
    font-size: var(--text-xs);
    color: var(--danger);
}

/* ‎═══════════════════════════ מסמכים משפטיים ═══════════════════════════ */

.legal {
    max-width: 46rem;
    margin-inline: auto;
    padding: var(--s7) var(--s5);
}

.legal h1 { font-size: var(--text-2xl); margin-bottom: var(--s2); }
.legal__updated { color: var(--text-3); font-size: var(--text-sm); margin-bottom: var(--s5); }
.legal h2 { font-size: var(--text-lg); margin: var(--s5) 0 var(--s2); }
.legal p, .legal li { color: var(--text-2); }
.legal ul { padding-inline-start: 1.3em; }

@media (max-width: 40rem) {
    .site-head, .site-foot { padding-inline: var(--s4); }
    .hero { padding: var(--s6) var(--s4); }
    .hero__title { font-size: var(--text-2xl); }
}

/* ‎═══════════════════════════ תוכניות ═══════════════════════════ */

.upgrade { max-width: 64rem; margin-inline: auto; padding: var(--s6) var(--s5) var(--s7); }

.upgrade__head { text-align: center; margin-bottom: var(--s5); }
.upgrade__head h1 { font-size: var(--text-2xl); margin-bottom: var(--s2); }
.upgrade__head .empty__icon { margin-inline: auto; margin-bottom: var(--s4); }

.upgrade__promise { max-width: 46rem; margin-inline: auto; }

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--s4);
    margin: var(--s5) 0;
    align-items: start;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.plan--recommended {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
}

.plan__flag {
    /* ‎‎``top`` שלילי ולא ``transform: translateY(-50%)``.
     * ‎שניהם מציבים אותו זהה, אבל טסט חוק ברזל 11 סורק
     * ‎``transform: translate`` בכל מצב מנוחה — והוא **צודק** לסרוק
     * ‎גורף: הרפיה שלו כדי לאפשר מיקום לגיטימי הייתה פותחת גם את
     * ‎``translateY(24px)`` של אנימציית כניסה, שהוא בדיוק האסור.
     * ‎זול יותר לוותר על ה-transform מאשר להחליש את הסורק. */
    position: absolute;
    top: -0.7rem;
    inset-inline-end: var(--s4);
    padding: 0.15em 0.7em;
    border-radius: var(--radius-full);
    background: var(--brand);
    color: var(--text-on-brand);
    font-size: var(--text-xs);
    font-weight: 700;
}

.plan__name { font-size: var(--text-lg); }

.plan__price {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin: 0;
    color: var(--text);
}

.plan__period { font-size: var(--text-sm); font-weight: 400; color: var(--text-3); }

.plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.plan__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    font-size: var(--text-sm);
    color: var(--text-2);
}

.plan__features svg { color: var(--ok); margin-top: 0.25em; }

.plan__cta { margin-top: auto; justify-content: center; }

.upgrade__note {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-sm);
}

/* ‎═══════════════════════════ כפתור גוגל ═══════════════════════════ */

/* ‎לבן עם מסגרת — הנחיות המותג של גוגל. הלוגו נושא את הצבע. */
.btn--google {
    width: 100%;
    justify-content: center;
    background: #FFFFFF;
    border-color: var(--border-strong);
    /* ‎‎#1F1F1F ולא ``--text``: הכפתור לבן בשני המצבים, ולכן הטקסט
     * ‎עליו חייב להיות כהה תמיד. טוקן שמתהפך בכהה היה נותן
     * ‎לבן-על-לבן. */
    color: #1F1F1F;
    font-weight: 600;
}

.btn--google:hover { background: #F5F5F5; color: #1F1F1F; }

.or {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s4) 0;
    color: var(--text-3);
    font-size: var(--text-sm);
}

.or::before, .or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}


/* ‎הלוגו הוא קישור לדף הבית, ולכן הוא מטרת מגע לכל דבר. */
.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ‎★ קישורי הפוטר — נמדדו 22px גובה.
 *
 * ‎"תנאי שימוש" ו"מדיניות פרטיות" הם בדיוק הקישורים שנלחצים בנייד
 * ‎לפני שמישהו מוסר פרטים, ו-22px הם מטרה שמחטיאים.
 *
 * ⚠️ ‎``.site-foot nav a`` ולא ``.site-foot a``: הפסקה למעלה עשויה
 * ‎להכיל קישור מוטבע בזרם טקסט, ש-WCAG פוטר במפורש. */
.site-foot nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-2);
}

/* ‎═══════════════════════════ דף הנחיתה ═══════════════════════════
 *
 * ‎🛑 **חוק ברזל 11:** אין כאן אף מצב התחלה מוסתר — לא ``opacity: 0``
 * ‎ולא ``transform`` שממתין ל-JS. הדף נשלח במצב הסופי, ואין בו
 * ‎``<script>`` בכלל. יש טסט שנכשל אם מישהו יוסיף אחד.
 *
 * ‎⚠️ וכל האנימציה כאן היא ``:hover`` בלבד — מצב אינטראקטיבי, לא
 * ‎מצב התחלה של תוכן. */

/* ── Hero ─────────────────────────────────────────────────────── */

.hero {
    display: grid;
    gap: var(--s6);
    align-items: center;
    padding: var(--s7) var(--s5);
    max-width: 72rem;
    margin-inline: auto;
}

@media (min-width: 60rem) {
    /* ‎הטקסט לפני התצוגה ב-RTL — הכותרת היא מה שקוראים קודם. */
    .hero { grid-template-columns: 1.05fr 0.95fr; gap: var(--s7); }
}

.hero__eyebrow {
    margin: 0 0 var(--s3);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--brand);
}

.hero__title {
    margin: 0 0 var(--s4);
    font-size: var(--text-3xl);
    line-height: 1.15;
    /* ‎מונע "יתום" — מילה בודדת שנשארת בשורה אחרונה. */
    text-wrap: balance;
}

@media (min-width: 48rem) {
    .hero__title { font-size: 3rem; }
}

.hero__lede {
    margin: 0 0 var(--s5);
    max-width: 34rem;
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--text-2);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-bottom: var(--s5);
}

.hero__proof {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--text-2);
}

.hero__proof li { display: flex; align-items: center; gap: var(--s2); }
.hero__proof svg { color: var(--ok); flex: none; }

/* ── תצוגת המוצר ──────────────────────────────────────────────────
 *
 * ‎★ HTML ולא תמונה. תמונה חיצונית נחסמת אצל בדיוק הקהל שאנחנו
 * ‎מוכרים לו (חוק ברזל 10), ותמונה מקומית היא עוד קילובייטים
 * ‎שנטענים לפני שרואים משהו. */

.shot {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.shot__bar {
    display: flex;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.shot__dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
}

.shot__body { padding: var(--s4); }

.shot__title {
    margin: 0 0 var(--s3);
    font-weight: 600;
    color: var(--text);
}

.shot__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-2);
}

.shot__row:last-of-type { border-bottom: 0; }

.shot__tag {
    padding: 2px var(--s3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ⚠️ ‎``--*-soft`` כרקע ו-``--*`` כטקסט — הצמד שנמדד ועובר 4.5
 * ‎בשתי הערכות. ערבוב מקומי היה טוקן חדש שאיש לא מדד. */
.shot__tag--new  { background: var(--info-soft);   color: var(--info); }
.shot__tag--warm { background: var(--warn-soft);   color: var(--warn); }
.shot__tag--won  { background: var(--ok-soft);     color: var(--ok); }

.shot__foot {
    margin: var(--s4) 0 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-3);
}

/* ── הבעיה ────────────────────────────────────────────────────── */

.section__lede {
    max-width: 42rem;
    margin: 0 auto var(--s6);
    text-align: center;
    color: var(--text-2);
    line-height: 1.7;
}

.section__note {
    max-width: 42rem;
    margin: var(--s5) auto 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-3);
}

.pains {
    display: grid;
    gap: var(--s4);
    max-width: 66rem;
    margin-inline: auto;
}

@media (min-width: 48rem) {
    .pains { grid-template-columns: repeat(3, 1fr); }
}

.pain {
    padding: var(--s5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.pain h3 { margin: 0 0 var(--s3); font-size: var(--text-lg); }
.pain p  { margin: 0; color: var(--text-2); line-height: 1.7; }

/* ── שלושת השלבים ─────────────────────────────────────────────── */

.steps {
    display: grid;
    gap: var(--s5);
    max-width: 46rem;
    margin-inline: auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.step { display: flex; align-items: flex-start; gap: var(--s4); }

/* ‎★ המספרים כאן **אמיתיים**: זה רצף שחייבים לעשות בסדר הזה.
 * ‎מספור על רשימת פיצ'רים שאין בה סדר הוא קישוט. */
.step__num {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--brand);
    color: var(--text-on-brand);
    font-weight: 700;
}

.step h3 { margin: 0 0 var(--s2); font-size: var(--text-lg); }
.step p  { margin: 0; color: var(--text-2); line-height: 1.7; }

/* ── שאלות ────────────────────────────────────────────────────── */

.faq {
    display: grid;
    gap: var(--s4);
    max-width: 66rem;
    margin-inline: auto;
}

@media (min-width: 48rem) {
    .faq { grid-template-columns: repeat(2, 1fr); }
}

/* ‎⚠️ ``<article>`` ולא ``<details>``: תשובה שמוסתרת עד לחיצה אינה
 * ‎נקראת, ואינה נכנסת לתוצאות חיפוש. השאלות האלה **הן** מה שמשכנע. */
.faq__item {
    padding: var(--s5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.faq__item h3 { margin: 0 0 var(--s3); font-size: var(--text-base); }
.faq__item p  { margin: 0; color: var(--text-2); line-height: 1.7; font-size: var(--text-sm); }

/* ── סגירה ────────────────────────────────────────────────────── */

.closer {
    padding: var(--s7) var(--s5);
    text-align: center;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.closer__title {
    max-width: 34rem;
    margin: 0 auto var(--s3);
    font-size: var(--text-2xl);
    line-height: 1.3;
    text-wrap: balance;
}

.closer__text {
    margin: 0 0 var(--s5);
    color: var(--text-2);
}

/* ── תוספות לרכיבים קיימים ────────────────────────────────────── */

.btn--lg {
    min-height: 52px;
    padding-inline: var(--s6);
    font-size: var(--text-base);
}

.plan__seats {
    margin: 0 0 var(--s4);
    font-size: var(--text-sm);
    color: var(--text-3);
}

.plan__list {
    display: grid;
    gap: var(--s2);
    margin: 0 0 var(--s5);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--text-2);
}

.plan__list li { display: flex; align-items: flex-start; gap: var(--s2); }
.plan__list svg { color: var(--ok); flex: none; margin-top: 3px; }