:root {
      --navy:        #1b2a4e;
      --navy-dark:   #16233f;
      --green:       #2aa05c;
      --green-dark:  #228a4d;
      --blue:        #1f57a6;
      --light:       #eef1f7;
      --muted:       #6b7280;
      --border:      #e3e7ef;
      --text:        #2b3445;
    }

    * { box-sizing: border-box; }

    body {
      font-family: 'Assistant', system-ui, -apple-system, "Segoe UI", sans-serif;
      color: var(--text);
      background: #fff;
    }

    h1, h2, h3, h4, h5, h6 { letter-spacing: -.2px; }

    /* ============================ כפתורים ============================ */
    .btn-green {
      background: var(--green); border: 1px solid var(--green); color: #fff;
      font-weight: 600; padding: .68rem 1.7rem; border-radius: 8px;
      transition: background .15s, border-color .15s;
    }
    .btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

    .btn-ghost-light {
      background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff;
      font-weight: 600; padding: .68rem 1.7rem; border-radius: 8px;
      transition: background .15s;
    }
    .btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }

    .btn-outline-navy {
      background: #fff; border: 1px solid var(--navy); color: var(--navy);
      font-weight: 600; padding: .68rem 1.7rem; border-radius: 8px;
      transition: background .15s, color .15s;
    }
    .btn-outline-navy:hover { background: var(--navy); color: #fff; }

    /* ============================ Navbar ============================ */
    .site-nav {
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding-top: .7rem; padding-bottom: .7rem;
    }
    .site-nav .nav-link {
      color: var(--text); font-weight: 500; font-size: .97rem; padding: .4rem .85rem;
    }
    .site-nav .nav-link:hover,
    .site-nav .nav-link.active { color: var(--blue); }

    .brand { text-align: left; line-height: 1.05; direction: ltr; }
    .brand .brand-name { font-size: 1.55rem; font-weight: 800; color: var(--navy); }
    .brand .brand-name .tld { font-weight: 600; color: var(--muted); font-size: 1.1rem; }
    .brand .brand-tag { font-size: .72rem; color: var(--muted); direction: rtl; }

    /* ====== כפתור התחברות / לוח בקרה בנאבבר ====== */
    .header__profile { display: flex; align-items: center; }
    .header__sign-in {
      display: inline-flex; align-items: center; gap: .5rem;
      background: var(--green); border: 1px solid var(--green); color: #fff;
      font-weight: 600; font-size: .95rem; padding: .5rem 1.2rem; border-radius: 8px;
      text-decoration: none; white-space: nowrap;
      transition: background .15s, border-color .15s, color .15s;
    }
    .header__sign-in:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
    .header__sign-in i { font-size: 1.05rem; }
    /* מצב מחובר – כפתור משני (לוח בקרה) */
    .header__sign-in--user { background: #fff; border-color: var(--navy); color: var(--navy); }
    .header__sign-in--user:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

    /* ============================ Hero ============================ */
    .hero { background: var(--navy); color: #fff; padding: 4.5rem 0; }
    .hero h1 { font-weight: 800; font-size: 2.75rem; line-height: 1.25; margin-bottom: 1.2rem; }
    .hero .hero-lead { color: rgba(255,255,255,.78); font-size: 1.1rem; line-height: 1.7; max-width: 92%; }

    .hero-feat .feat-icon {
      width: 48px; height: 48px; border-radius: 11px; background: rgba(255,255,255,.08);
      display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
      color: #fff; margin-bottom: .6rem;
    }
    .hero-feat .feat-txt { font-size: .82rem; color: rgba(255,255,255,.82); line-height: 1.35; }

    /* ============= קופסת תמונה (placeholder) ============= */
    .img-ph {
      background: #f3f5f9; border: 1px dashed #c2ccdd; border-radius: 14px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: .6rem; color: #9aa4b6; width: 100%; min-height: 360px; text-align: center; padding: 1.5rem;
    }
    .img-ph i { font-size: 2.8rem; }
    .img-ph .ph-label { font-size: .9rem; font-weight: 600; }

    /* קופסת תמונה לבנה ע"ג רקע כהה (כמו כרטיס הדוח ב-Hero) */
    .img-ph.card-ph {
      background: #fff; border: 1px solid rgba(255,255,255,.25);
      box-shadow: 0 24px 60px rgba(0,0,0,.25); min-height: 400px;
    }

    /* ============================ Sections ============================ */
    .section { padding: 4.5rem 0; }
    .section-light { background: var(--light); }
    .section h2 { font-weight: 800; font-size: 2rem; color: var(--navy); margin-bottom: 1rem; }
    .lead-txt { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

    /* כרטיסי מידע (שתי קוביות) */
    .info-card {
      background: #fff; border: 1px solid var(--border); border-radius: 16px;
      padding: 2.4rem; height: 100%;
    }
    .info-card.tinted { background: #fbfcfe; }
    .info-card h3 { font-weight: 700; font-size: 1.45rem; color: var(--navy); margin-bottom: 1rem; }
    .info-card p { color: var(--muted); line-height: 1.7; }
    .info-illu { color: var(--blue); font-size: 3.2rem; line-height: 1; }
    .FinStart-mark { font-size: 1.9rem; font-weight: 800; color: var(--blue); }
    .FinStart-mark .fs-accent { color: var(--green); }

    /* ============== מסלול ההכנה – קוביות/כפתורים ============== */
    .track-card {
      display: flex; flex-direction: column; width: 100%; height: 100%; text-decoration: none;
      background: #fff; border: 1px solid var(--border); border-radius: 14px;
      padding: 1.7rem 1.5rem; text-align: right;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .track-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 30px rgba(20,30,60,.12);
      border-color: var(--blue);
    }
    .track-card:focus-visible { outline: 3px solid rgba(31,87,166,.4); outline-offset: 2px; }
    .track-number {
      width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff;
      font-weight: 700; font-size: .98rem; display: flex; align-items: center; justify-content: center;
      align-self: flex-start;
    }
    .track-card h5 { font-weight: 700; color: var(--navy); font-size: 1.15rem; margin: 1.1rem 0 .55rem; }
    .track-card .track-desc { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0; }
    .track-icon { color: var(--blue); font-size: 1.9rem; margin-top: auto; padding-top: 1.4rem; }

    /* ============== למה האתר קיים – רשימות ✓ / ✗ ============== */
    .why-list { list-style: none; padding: 0; margin: .5rem 0 0; }
    .why-list li { display: flex; align-items: flex-start; gap: .55rem; padding: .4rem 0; font-size: 1rem; }
    .why-list.do  li { color: var(--text); }
    .why-list.do  i { color: var(--green); }
    .why-list.dont i { color: #d64545; }
    .why-list i { font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }
    .sub-head { font-weight: 700; color: var(--navy); font-size: 1.15rem; margin-top: 1.6rem; }
    .why-illu { color: #c7d0e0; font-size: 7rem; line-height: 1; text-align: center; }

    /* ============================ גילוי נאות ============================ */
    .disclaimer {
      background: var(--light); border-top: 1px solid var(--border);
      padding: 1.6rem 0; font-size: .86rem; color: var(--muted); line-height: 1.6;
    }
    .disclaimer strong { color: var(--navy); }

    /* ============================ Footer ============================ */
    .site-footer { background: var(--navy); color: rgba(255,255,255,.78); padding: 3rem 0 1.3rem; }
    .site-footer h6 { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 1.1rem; }
    .site-footer a {
      color: rgba(255,255,255,.72); text-decoration: none; display: table;
      padding: .26rem 0; font-size: .93rem; transition: color .15s;
    }
    .site-footer a:hover { color: #fff; }
    .footer-logo { font-size: 1.55rem; font-weight: 800; color: #fff; text-align: right; }
    .footer-logo .tld { font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,.6); }
    .footer-tag { font-size: .72rem; color: rgba(255,255,255,.62); text-align: right; }
    .footer-desc { font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.62); text-align: right; }
    .social-row { display: flex; gap: .6rem; flex-wrap: wrap; }
    .social-ico {
      width: 42px; height: 42px; border-radius: 9px; background: rgba(255,255,255,.1);
      display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem;
      transition: background .15s;
    }
    .social-ico:hover { background: rgba(255,255,255,.2); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.2rem; padding-top: 1.2rem;
      text-align: center; font-size: .85rem; color: rgba(255,255,255,.6);
    }

    /* ============================ רספונסיביות ============================ */
    @media (max-width: 991.98px) {
      .hero { padding: 3rem 0; text-align: center; }
      .hero h1 { font-size: 2.1rem; }
      .hero .hero-lead { max-width: 100%; }
      .hero-buttons, .hero-feat-row { justify-content: center; }
      .img-ph { margin-top: 2rem; }
      .section h2, .section { text-align: center; }
      .why-illu { margin-top: 1.5rem; }
      .header__profile { margin-top: .6rem; width: 100%; }
      .header__sign-in { width: 100%; justify-content: center; }
    }
    @media (max-width: 575.98px) {
      .hero h1 { font-size: 1.8rem; }
      .section h2 { font-size: 1.6rem; }
    }

.footer i {
    color: #c9a227;
    width: 20px;
    margin-left: 8px;
    text-align: center;
}



    /* ============================ דף מסמך ============================ */
    :root { --gold:#c2a155; --gold-dark:#a8883f; --cream:#fbf5e6; }

    .guide-topbar { display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between;
                    align-items:center; padding:1.1rem 0 .3rem; }
    .crumbs { font-size:.82rem; color:var(--muted); }
    .crumbs a { color:var(--muted); text-decoration:none; }
    .crumbs a:hover { color:var(--blue); }
    .crumbs .sep { color:#b7c0d0; margin:0 .35rem; font-size:.7rem; }
    .crumbs .current { color:var(--navy); font-weight:600; }
    .back-link { font-size:.85rem; color:var(--navy); font-weight:600; text-decoration:none; white-space:nowrap; }
    .back-link i { font-size:.7rem; }
    .back-link:hover { color:var(--gold-dark); }

    .guide-hero-band { background:#f7f9fc; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .guide-hero { padding:2.6rem 0; }
    .gh-title { font-weight:800; font-size:2.25rem; color:var(--navy); line-height:1.25; margin-bottom:1rem; }
    .gh-lead { color:var(--muted); font-size:1.02rem; line-height:1.75; margin:0; }
    .policy-meta { font-size:.85rem; color:var(--muted); margin-top:.9rem; }
    .policy-meta i { color:var(--gold-dark); }
    .guide-hero-img { background:linear-gradient(135deg,#e9edf4,#d9e0ec); border-radius:14px; min-height:250px;
                      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:#94a1ba; }
    .guide-hero-img i { font-size:3rem; }
    .guide-hero-img span { font-size:.8rem; }
    .cat-badge { display:inline-block; background:var(--cream); color:var(--gold-dark);
                 font-weight:700; font-size:.8rem; padding:.3rem .95rem; border-radius:50px; margin-bottom:1rem; }

    /* גוף המסמך */
    .guide-body { padding:2.6rem 0 .5rem; }
    .art-intro { color:var(--text); font-size:.98rem; line-height:1.85; margin-bottom:1rem; }
    .art-note { color:var(--muted); font-size:.9rem; line-height:1.75; margin-bottom:1.4rem;
                border-inline-start:3px solid var(--gold); padding-inline-start:.9rem; }
    .art-h { font-weight:800; color:var(--navy); font-size:1.42rem; margin:2.3rem 0 .9rem; scroll-margin-top:90px;
             display:flex; align-items:baseline; gap:.55rem; }
    .art-h:first-of-type { margin-top:.4rem; }
    .art-h .h-num { color:var(--gold-dark); font-size:1.05rem; font-weight:700; flex-shrink:0; }
    .art-sub { font-weight:700; color:var(--navy); font-size:1.08rem; margin:1.5rem 0 .5rem; }
    .art-p { color:var(--text); font-size:.98rem; line-height:1.85; margin-bottom:1rem; }
    .art-p a { color:var(--blue); }

    .art-tip, .art-example { background:var(--cream); border-radius:12px; padding:1.05rem 1.25rem;
                             display:flex; align-items:flex-start; gap:.9rem; margin:1.2rem 0; }
    .art-tip p, .art-example p { margin:0; color:var(--text); font-size:.92rem; line-height:1.7; flex:1; }
    .art-tip .b-ico, .art-example .b-ico { color:var(--gold-dark); font-size:1.35rem; flex-shrink:0; line-height:1.4; }

    .art-list { padding-inline-start:0; padding-inline-end:1.25rem; margin:.4rem 0 1rem; }
    .art-list li { color:var(--text); font-size:.96rem; line-height:1.75; margin-bottom:.45rem; }

    /* רשימת הגדרות */
    .def-list { margin:.4rem 0 1rem; }
    .def-list dt { font-weight:700; color:var(--navy); font-size:.99rem; margin-top:1.1rem; }
    .def-list dt:first-child { margin-top:0; }
    .def-list dd { margin:.3rem 0 0; color:var(--text); font-size:.95rem; line-height:1.75; }

    /* סרגל צד – תוכן עניינים */
    .toc-side { position:sticky; top:88px; }
    .side-box { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.35rem; margin-bottom:1.5rem; }
    .side-box h4 { font-weight:700; color:var(--navy); font-size:1.08rem; margin-bottom:.6rem; }
    .toc-list { display:flex; flex-direction:column; max-height:calc(100vh - 190px); overflow:auto; }
    .toc-list a { color:var(--muted); text-decoration:none; font-size:.86rem; padding:.4rem .45rem;
                  border-bottom:1px solid #f0f2f6; border-radius:6px; transition:color .15s, background .15s; }
    .toc-list a:last-child { border-bottom:0; }
    .toc-list a:hover { color:var(--gold-dark); background:#faf7ef; }
    .toc-list a.active { color:var(--navy); font-weight:700; background:var(--cream); }

    .side-cta { background:var(--navy); border-radius:14px; padding:1.5rem 1.35rem; }
    .side-cta h4 { color:#fff; font-weight:800; font-size:1.12rem; margin-bottom:.5rem; }
    .side-cta p { color:rgba(255,255,255,.72); font-size:.87rem; line-height:1.6; margin-bottom:1.15rem; }
    .side-cta .btn { width:100%; }

    /* כפתורים */
    .btn-gold { background:var(--gold); border:1px solid var(--gold); color:#fff; font-weight:700;
                padding:.65rem 1.5rem; border-radius:8px; }
    .btn-gold:hover { background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }

    @media (min-width:992px){
      .guide-body > article { padding-right:2.5rem; }
    }
    @media (max-width:991.98px){
      .gh-title { font-size:1.9rem; }
      .guide-hero-img { margin-top:1.6rem; min-height:200px; }
      .toc-side { position:static; }
      .toc-list { max-height:none; }
    }
    @media (max-width:575.98px){
      .gh-title { font-size:1.6rem; }
      .art-h { font-size:1.25rem; }
    }


   /* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #1b2a4e;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1b2a4e;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #1b2a4e transparent;
}