/* ═══════════════════════════════════════════════════════════════════
   VEYA — העמודים הפנימיים של האתר (יכולות, סוגי אירוע, מדריכים,
   מחשבונים, הודעות). דף הבית (`index.html`) נשאר עם CSS מוטמע משלו.

   השפה: "הרשימה והשורה התחתונה" (אוקטובר 2026).
   האתר מסודר כמו פנקס עברי מסודר היטב, לא כמו תבנית:
     · טיפוגרפיה — Frank Ruhl Libre לתצוגה, גדולה ומיושרת לימין;
       IBM Plex Sans Hebrew לגוף ולממשק, 18px.
     · גריד עם "עמודת שוליים" ימנית: כותרת הסקשן בשוליים, התוכן לצידה.
     · סימן חתימה אחד: הקו הכפול של סיכום (border: 3px double) — רק
       מתחת למספר או למשפט שהם באמת שורה תחתונה.
     · בלי צל במנוחה, בלי גרדיאנט, בלי תווית מעל כותרת, בלי כרטיסים
       מעוגלים לכל דבר. חיתוך חד בין שנהב לדיו.

   ⚠️ צבעי המותג נעולים: אותם ערכים בדיוק כמו ב-index.html. משתנה רק
   איפה משתמשים בהם. אין כאן אף צבע מותג חדש.
   ═══════════════════════════════════════════════════════════════════ */

:root {
        --ivory: #fbf6ee;
        --ivory-2: #f6efe2;
        --cream: #ffffff;
        --gold: #c9a227;
        --gold-light: #e4c96b;
        /* גוון זהב כהה לטקסט — מותאם לניגודיות WCAG AA על רקע שנהב (≥4.5:1) */
        --gold-deep: #836a26;
        --charcoal: #2b2620;
        --ink: #17130d;
        --ink-2: #211b12;
        --body: #4a4438;
        /* אפור-חום משני מותאם לניגודיות AA (≥4.5:1) */
        --muted: #6a6252;
        --line: #e5dec9;
        --green: #2f9e5f;
        --cream-text: #f5efe2;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

        /* ── טקסט על דיו: נגזר מ-cream-text, לא גוון חדש ── */
        --on-ink: var(--cream-text);
        --on-ink-2: #cabfa9;   /* 9.6:1 על --ink */
        --on-ink-3: #a99d86;   /* 6.6:1 על --ink */

        /* ── סולם טיפוגרפי: חמש מדרגות ── */
        --t-display: clamp(2.125rem, 5.2vw, 4.625rem);
        --t-h2: clamp(1.75rem, 3.3vw, 2.875rem);
        --t-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
        --t-body: 1.125rem;
        --t-small: 0.9375rem;

        --f-display: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
        --f-text: 'IBM Plex Sans Hebrew', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;

        /* ── מקצב ── */
        --gutter: clamp(20px, 4vw, 40px);
        --section-y: clamp(60px, 8vw, 112px);
        --col-gap: clamp(36px, 6vw, 104px);
        --radius: 6px;
      }

/* ── בסיס ─────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
        font-family: var(--f-text);
        font-size: var(--t-body);
        background: var(--ivory);
        color: var(--body);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }
::selection { background: rgba(201, 162, 39, 0.3); color: var(--charcoal); }
input, select, textarea { caret-color: var(--gold-deep); }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--charcoal); line-height: 1.2; text-wrap: balance; }
h3 { font-weight: 600; }
p { text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--section-y) 0; }
.tone-light { background: var(--ivory); }
.tone-alt, .features, .showcase, .faq-wrap { background: var(--ivory-2); }

/* ── כפתורים: מילוי שטוח, פינה אחת, משוב בלחיצה ───────────────── */
.btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        min-height: 50px; padding: 0 26px; border-radius: var(--radius);
        font-family: var(--f-text); font-weight: 600; font-size: 1.0625rem; line-height: 1;
        text-decoration: none; cursor: pointer; border: 1px solid transparent;
        transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
      }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary .arw { transition: transform 160ms var(--ease-out); }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: rgba(43, 38, 32, 0.32); }
.on-dark .btn-ghost, .band .btn-ghost, .cookie-banner-static .btn-ghost { color: var(--on-ink); border-color: rgba(245, 239, 226, 0.36); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--gold-light); }
  .btn-primary:hover .arw { transform: translateX(-4px); }
  .btn-ghost:hover { border-color: var(--charcoal); }
  .on-dark .btn-ghost:hover, .band .btn-ghost:hover { border-color: var(--gold-light); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── כותרת האתר: רצועת דיו מוצקה ─────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.header-logo { height: 48px; width: auto; display: block; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .btn { min-height: 42px; padding: 0 18px; font-size: 1rem; }
.link-quiet { color: var(--on-ink-2); text-decoration: none; font-weight: 500; font-size: 1rem; padding: 6px 4px; border-radius: 4px; transition: color 160ms var(--ease-out); }
.link-quiet:hover { color: var(--on-ink); }

/* ── תוויות מעל כותרות: אין. הכותרת נושאת את עצמה. ───────────── */
.eyebrow, .kicker { display: none; }

/* ── כותרת עמוד ───────────────────────────────────────────────────
   שנהב ברוחב מלא (לא קופסה כהה), כותרת גדולה מימין, פסקה בעמודה
   צרה מתחתיה. כשיש לעמוד פיסת מוצר — היא יושבת בעמודה השמאלית. */
.page-hero { background: var(--ivory); color: var(--charcoal); padding: clamp(36px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: start; }
.page-hero .wrap > * { grid-column: 1; }
.page-hero .crumbs { grid-column: 1 / -1; }
.page-hero .wrap > h1 {
        font-family: var(--f-display); font-weight: 500; font-size: var(--t-display);
        line-height: 1.06; letter-spacing: -0.012em; color: var(--charcoal);
        max-width: 17ch; margin: 0 0 clamp(20px, 2.4vw, 32px); grid-column: 1 / -1;
      }
.page-hero .lead { font-size: var(--t-lead); line-height: 1.65; color: var(--body); max-width: 46ch; margin: 0; }
.page-hero .cta-row { margin-top: clamp(28px, 3vw, 40px) !important; }
.page-hero .hero-media { grid-column: 2; grid-row: 3 / span 3; align-self: start; margin: 8px 0 0; }
.page-hero .hero-media img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(23, 19, 13, 0.1); }
.page-hero .hero-media figcaption { margin-top: 10px; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 860px) {
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .page-hero .hero-media { grid-column: 1; grid-row: auto; margin-top: 40px; }
}

/* ── פירורי לחם ── */
.crumbs { font-size: var(--t-small); color: var(--muted); margin-bottom: clamp(32px, 5vw, 64px); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { margin: 0 8px; opacity: 0.6; }

/* ── כותרת סקשן ── */
.section-head { max-width: 640px; margin: 0 0 clamp(32px, 4vw, 48px); text-align: start; }
.section-title {
        font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2);
        line-height: 1.12; letter-spacing: -0.008em; color: var(--charcoal); margin: 0 0 16px;
      }
.section-sub { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; max-width: 42ch; margin: 0; }

/* ── עמודת השוליים ────────────────────────────────────────────────
   בכל סקשן שיש לו כותרת: הכותרת יושבת בשוליים הימניים ונשארת במקום
   בזמן שהתוכן גולל לצידה. בטלפון — כותרת רגילה מעל. */
@media (min-width: 980px) {
  section:has(> .wrap > .section-head) > .wrap {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--col-gap); align-items: start;
  }
  section:has(> .wrap > .section-head) > .wrap > * { grid-column: 2; min-width: 0; }
  section:has(> .wrap > .section-head) > .wrap > .section-head {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 108px; margin: 0;
  }
}

/* ── הצהרה: כותרת על כל הרוחב, הטקסט נכנס בעמודה השמאלית ── */
.why { background: var(--ivory); }
.why-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--col-gap); text-align: start; }
.why-inner > * { grid-column: 2; }
.why-inner .section-title { grid-column: 1 / -1; font-size: clamp(1.75rem, 4.4vw, 3.75rem); line-height: 1.08; max-width: 20ch; margin-bottom: clamp(28px, 3.4vw, 48px); }
.why-inner p { font-size: var(--t-lead); line-height: 1.7; max-width: 52ch; margin: 0 0 18px; }
@media (max-width: 860px) {
  .why-inner { grid-template-columns: minmax(0, 1fr); }
  .why-inner > * { grid-column: 1; }
}

/* ── החתימה: הקו הכפול של סיכום ──────────────────────────────────
   כמו בפנקס חשבונות, מתחת לשורה תחתונה. משמש רק כשהמשפט או המספר
   הם באמת התוצאה. נמתח פעם אחת מימין (veya-motion.js מוסיף .is-drawn);
   בלי JS או בתנועה מופחתת — פשוט שם. */
.why .why-punch, .rsvp-band .why-punch, .commit .why-punch, .after .why-punch, .flow-punch, .dbl {
        position: relative; display: inline-block; padding-bottom: 12px;
        font-family: var(--f-display); font-weight: 500; font-size: clamp(1.375rem, 2.2vw, 1.875rem);
        line-height: 1.3; color: var(--charcoal); margin: 22px 0 0; text-align: start;
      }
.why-punch::after, .flow-punch::after, .dbl::after {
        content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 5px;
        border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
        transform-origin: right center;
      }
html.js .why-punch::after, html.js .flow-punch::after, html.js .dbl::after { transform: scaleX(0); transition: transform 700ms var(--ease-out); }
html.js .is-drawn::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .why-punch::after, html.js .flow-punch::after, html.js .dbl::after { transform: none; transition: none; }
}

/* ── רצף שלבים: מספור אמיתי, כי הסדר הוא המידע ── */
.flow { background: var(--ivory); }
.flow-steps { list-style: none; max-width: 640px; margin: 0; padding: 0; counter-reset: fs; }
.flow-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 34px; counter-increment: fs; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before { content: ""; position: absolute; inset-inline-start: 12px; top: 48px; bottom: 8px; width: 1px; background: var(--line); }
.flow-step:last-child::before { content: none; }
.flow-dot { width: 52px; display: block; font-family: var(--f-display); font-size: 2.25rem; line-height: 1; color: var(--gold-deep); font-variant-numeric: lining-nums; }
.flow-dot::before { content: counter(fs); }
.flow-dot svg { display: none; }
.flow-step h3 { font-size: 1.25rem; margin: 2px 0 6px; }
.flow-step p { font-size: 1.0625rem; color: var(--muted); margin: 0; }
.flow-step p em { font-style: normal; color: var(--charcoal); font-weight: 600; }
.flow-step-last .flow-dot { color: var(--charcoal); }
.flow-step-last p { color: var(--body); }
.flow-punch { display: table; margin-top: 40px; }

/* ── טבלת מספרים: דף בפנקס, לא כרטיס ── */
.numcard { max-width: 640px; margin: 0; background: none; border-top: 2px solid var(--charcoal); }
.numcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.numcard-head h3 { font-size: 1.0625rem; margin: 0; }
.numcard-tag { font-size: var(--t-small); color: var(--muted); }
.numcard dl { margin: 0; }
.numrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.numrow dt { font-size: 1.0625rem; color: var(--body); margin: 0; }
.numrow dd { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.numrow.is-key dt { font-weight: 600; color: var(--charcoal); }
.numrow.is-key dd { color: var(--gold-deep); }
.numrow.is-key { border-bottom: 3px double var(--gold); }
.numcard-note { padding: 18px 0 0; font-size: 1rem; line-height: 1.7; color: var(--muted); margin: 0; }
.numcard-note b { color: var(--charcoal); }

/* ── שני מספרים זה לצד זה ── */
.steps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 720px; margin: 28px 0 0; border-top: 2px solid var(--charcoal); }
.step-two { padding: 20px 0 20px 24px; border-bottom: 1px solid var(--line); }
.step-two + .step-two { padding-inline-start: 24px; border-inline-start: 1px solid var(--line); }
.step-two .lbl { display: block; font-size: var(--t-small); font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.step-two .big { display: block; font-family: var(--f-display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; color: var(--charcoal); margin-bottom: 6px; }
.step-two p { font-size: 1rem; color: var(--muted); margin: 0; }
@media (max-width: 620px) {
  .steps-two { grid-template-columns: 1fr; }
  .step-two + .step-two { padding-inline-start: 0; border-inline-start: 0; }
}

/* ── רשימת יכולות: שתי עמודות, אייקון בתוך השורה ולא באריח ── */
.supporting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; margin-top: 44px; }
.supporting-item { display: block; }
.supporting-item:has(> .ic) { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.supporting-item .ic { grid-row: 1 / span 2; width: 24px; height: 24px; margin-top: 3px; color: var(--gold-deep); }
.supporting-item .ic svg { width: 22px; height: 22px; }
.supporting-item h3 { font-size: 1.125rem; margin: 0 0 6px; }
.supporting-item p { font-size: 1rem; color: var(--body); margin: 0; }
@media (max-width: 640px) { .supporting-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── טקסט קטן, הערה, קריאה לפעולה בתוך סקשן ── */
.fineprint { font-size: var(--t-small); color: var(--muted); line-height: 1.7; max-width: 60ch; margin: 18px 0 0; }
.fineprint a, .section-sub a, .why-inner a, .numcard-note a, .flow-step a, .supporting-item a { color: var(--gold-deep); text-underline-offset: 3px; }
.section-cta { margin-top: 36px; }
.section-cta .cta-hint { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 12px; }
.callout { background: var(--cream); border-radius: var(--radius); padding: 22px 24px; margin-top: 32px; max-width: 640px; }
.callout p { margin: 0; font-size: 1.0625rem; color: var(--charcoal); }
.callout p + p { margin-top: 10px; }
.callout a { color: var(--gold-deep); text-underline-offset: 3px; }
.callout .callout-h { font-weight: 600; color: var(--charcoal); }

/* ── שאלות נפוצות: רשימה עם קווים, לא כרטיסים ── */
.faq { max-width: 720px; margin: 0; }
details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
details summary {
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        padding: 22px 0; cursor: pointer; list-style: none;
        font-family: var(--f-text); font-weight: 600; font-size: 1.125rem; color: var(--charcoal);
        transition: color 160ms var(--ease-out);
      }
details summary::-webkit-details-marker { display: none; }
details summary .chev { color: var(--gold-deep); flex-shrink: 0; transition: transform 240ms var(--ease-out); }
details[open] summary .chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { details summary:hover { color: var(--gold-deep); } }
details p { font-size: 1.0625rem; line-height: 1.75; color: var(--body); margin: 0; padding: 0 0 26px; max-width: 62ch; }
details p a { color: var(--gold-deep); text-underline-offset: 3px; }

/* ── רצועת הסגירה: פחם ברוחב מלא, כותרת מימין ופעולה משמאל ── */
.band-wrap { background: var(--charcoal); color: var(--on-ink); padding: clamp(72px, 9vw, 120px) 0; }
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--col-gap); align-items: end; text-align: start; }
.band > * { grid-column: 1; }
.band h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.1; color: var(--on-ink); margin: 0 0 16px; max-width: 18ch; }
.band p, .band .band-more { font-size: var(--t-lead); line-height: 1.65; color: var(--on-ink-2); max-width: 48ch; margin: 0; }
.band .btn, .band .cta-row { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
@media (max-width: 760px) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .band .btn, .band .cta-row { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 30px; }
}

/* ── תחתית ── */
.site-footer { background: var(--ink); color: var(--on-ink-3); padding: clamp(56px, 7vw, 88px) 0 28px; }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--col-gap); align-items: start; }
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-logo { height: 56px; width: auto; }
.footer-tag { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.5; color: var(--on-ink-2); max-width: 26ch; }
.footer-legal { grid-column: 1 / -1; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(245, 239, 226, 0.12); font-size: 0.875rem; color: var(--on-ink-3); }
@media (max-width: 860px) {
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ── באנר העוגיות (משותף לכל האתר) ── */
.cookie-banner-static { position: fixed; inset-inline: 0; bottom: 0; z-index: 100; background: var(--ink); border-top: 1px solid rgba(201,162,39,0.35); padding: env(safe-area-inset-bottom, 0px) 0 0; }
.cookie-banner-static-inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; }
.cookie-banner-static-inner p { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--on-ink-2); flex: 1 1 320px; }
.cookie-banner-static-inner a { color: var(--gold-light); margin: 0 4px; }
.cookie-banner-static-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── מוזמנים ותגיות ── */
.note-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.note-chip { font-size: var(--t-small); color: var(--body); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.rsvp-band { background: var(--ivory-2); }
.rsvp-inner { max-width: 680px; }
.rsvp-inner p { font-size: var(--t-lead); }
.rsvp-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.rsvp-list li { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; color: var(--charcoal); }
.rsvp-list svg { color: var(--green); flex-shrink: 0; }
.why .why-list { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.55; color: var(--charcoal); }
.quote-line { font-style: italic; }
.quote-line::before { content: "\201D"; }
.quote-line::after { content: "\201C"; }

/* ── אינדקס: סוגי אירוע, מדריכים, מחשבונים — שורות, לא כרטיסים ── */
.evt-grid, .calc-grid { display: block; border-top: 2px solid var(--charcoal); }
.guide-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--charcoal); }
a.evt-card, .guide-list a {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
        padding: 22px 0; text-decoration: none; background: none;
        border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
      }
a.evt-card > *, .guide-list a > * { grid-column: 1; }
a.evt-card::after, .guide-list a::after {
        content: "←"; grid-column: 2; grid-row: 1 / span 2; font-size: 1.375rem; color: var(--gold-deep);
        transition: transform 200ms var(--ease-out);
      }
a.evt-card h3, .guide-list h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; margin: 0 0 4px; transition: color 160ms var(--ease-out); }
a.evt-card p, .guide-list p { font-size: 1rem; color: var(--muted); margin: 0; max-width: 68ch; }
@media (hover: hover) and (pointer: fine) {
  a.evt-card:hover h3, .guide-list a:hover h3 { color: var(--gold-deep); }
  a.evt-card:hover::after, .guide-list a:hover::after { transform: translateX(-6px); }
}
.guide-cluster { margin-top: 56px; }
.guide-cluster:first-child { margin-top: 0; }
.guide-cluster > h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.625rem, 2.6vw, 2.125rem); margin: 0 0 6px; }
.guide-cluster > p { color: var(--muted); font-size: 1.0625rem; margin: 0 0 22px; max-width: 56ch; }

/* ── מאמר ── */
.article-wrap { background: var(--ivory); padding: clamp(24px, 3vw, 40px) 0 clamp(72px, 9vw, 128px); }
.article { max-width: 70ch; margin-inline: 0 auto; }
.article > * + * { margin-top: 20px; }
.article h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.2; margin-top: 64px; }
.article h3 { font-size: 1.25rem; margin-top: 36px; }
.article p, .article li { font-size: var(--t-body); line-height: 1.85; color: var(--body); }
.article ul, .article ol { padding-inline-start: 22px; }
.article li + li { margin-top: 8px; }
.article li::marker { color: var(--gold-deep); }
.article strong { color: var(--charcoal); font-weight: 600; }
.article a:not(.btn) { color: var(--gold-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article p.article-lead { font-family: var(--f-display); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.65; color: var(--charcoal); }
.article p.article-meta { font-size: var(--t-small); color: var(--muted); display: flex; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 8px; }
.table-scroll { overflow-x: auto; border-top: 2px solid var(--charcoal); margin-top: 26px; }
.article table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.article th { text-align: right; font-weight: 600; color: var(--charcoal); padding: 14px 14px 14px 0; border-bottom: 1px solid var(--charcoal); white-space: nowrap; }
.article td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.mistakes { list-style: none; padding: 0; border-top: 2px solid var(--charcoal); }
.mistakes li { padding: 18px 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.mistakes b { display: block; color: var(--charcoal); margin-bottom: 4px; }
.article-cta { margin-top: 64px; padding: 32px; background: var(--ivory-2); border-radius: var(--radius); text-align: start; }
.article-cta h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.article-cta p { margin: 0 0 22px; color: var(--muted); font-size: 1.0625rem; }

/* צילומי מוצר בתוך טקסט: מסך אמיתי עם כיתוב, בלי צל צף */
.shot-tall { max-width: 340px; margin: 32px 0 0; }
.shot-tall img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(23, 19, 13, 0.12); }
.shot-tall figcaption, .g-shot figcaption { margin-top: 12px; font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
.g-shot { margin: 34px 0; }
.g-shot .mk-browser { margin: 0; }
.sc-shot { margin: 8px 0 0; }

/* קבוצות המוזמנים ותבנית ההוצאות בעמוד סוג אירוע */
.evt-groups, .evt-exp { margin: 32px 0; padding: 0; border-top: 2px solid var(--charcoal); }
.evt-groups-k, .evt-exp-k { margin: 0; padding: 16px 0 14px; font-size: 1.0625rem; font-weight: 600; color: var(--charcoal); }
.evt-groups-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.evt-groups-list li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-small); color: var(--charcoal); }
.evt-groups-note, .evt-exp-note { margin: 16px 0 0; font-size: var(--t-small); line-height: 1.65; color: var(--muted); }
.evt-exp dl { margin: 0; }
.evt-exp-row { display: grid; grid-template-columns: 10rem 1fr; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.evt-exp-row dt { font-weight: 600; font-size: 1rem; color: var(--charcoal); }
.evt-exp-row dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--body); }
@media (max-width: 560px) { .evt-exp-row { grid-template-columns: 1fr; gap: 2px; } }

/* ── מחשבון ── */
.calc { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; gap: 32px; } }
.calc-form { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: sticky; top: 92px; }
@media (max-width: 860px) { .calc-form { position: static; padding: 22px; } }
.calc-field { display: block; margin-bottom: 18px; }
.calc-field > span { display: block; font-size: 1rem; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
.calc-field .hint { display: block; font-weight: 400; font-size: var(--t-small); color: var(--muted); margin-top: 4px; }
.calc-field input, .calc-field select {
  width: 100%; min-height: 50px; font: inherit; font-size: 1.0625rem; padding: 0 14px;
  border: 1px solid #cfc5ac; border-radius: var(--radius); background: var(--ivory);
  color: var(--charcoal); font-variant-numeric: tabular-nums;
}
.calc-field input:focus-visible, .calc-field select:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 1px; border-color: var(--gold); }
.calc-form .btn { width: 100%; margin-top: 8px; }
.calc-error { border: 1px solid; border-radius: var(--radius); padding: 12px 14px; font-size: 1rem; margin-bottom: 14px; }
.calc-out { min-width: 0; }
.calc-headline { background: var(--ink); color: var(--on-ink); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); margin-bottom: 24px; }
.calc-headline .lbl { display: block; font-size: 1rem; color: var(--gold-light); font-weight: 600; margin-bottom: 10px; }
.calc-headline .big { display: inline-block; position: relative; padding-bottom: 12px; font-family: var(--f-display); font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.1; color: var(--on-ink); font-variant-numeric: tabular-nums; border-bottom: 3px double var(--gold); }
.calc-headline p { margin: 16px 0 0; font-size: 1.0625rem; color: var(--on-ink-2); line-height: 1.7; }
.calc-empty { background: var(--ivory-2); border-radius: var(--radius); padding: 40px 28px; color: var(--muted); font-size: 1.0625rem; }
.calc-note { font-size: var(--t-small); color: var(--muted); line-height: 1.7; margin-top: 18px; }
.calc-note b { color: var(--charcoal); }

/* ── ציר הזמן של המחשבון ── */
.tl-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--charcoal); }
.tl-item .ico { font-size: 1.125rem; line-height: 1; }
.tl-item .nm { font-size: 1.0625rem; color: var(--charcoal); }
.tl-item .nm small { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
.tl-item .dt { font-size: 1.0625rem; font-weight: 600; color: var(--charcoal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-item.is-final .dt { color: var(--gold-deep); }

/* ── חשיפה בגלילה (דף הבית) ── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

@media (max-width: 600px) {
  :root { --t-body: 1.0625rem; }
  .header-actions { gap: 6px; }
  .header-logo { height: 38px; }
  .header-actions .link-quiet { font-size: 0.9375rem; padding: 12px 6px; }
  .header-actions .btn { padding: 0 14px; font-size: 0.9375rem; white-space: nowrap; }
}

/* ===== VEYA BRAND LAYER — START (generated, do not edit here) ===== */
.tl-item {
  position: relative; display: block;
  padding: 0 0 20px 34px; padding-inline-start: 34px; padding-inline-end: 0;
}/* ═══════════════════════════════════════════════════════════════════════
   VEYA — שכבת המותג
   ═══════════════════════════════════════════════════════════════════════

   מקור אחד לטוקנים, לחתימה הוויזואלית ולשפת התנועה. הקובץ הזה מוזרק
   אוטומטית בזמן build לשני המקומות (`scripts/build-site-pages.mjs`):

     · frontend/public/veya-site.css   — כל העמודים הפנימיים
     · frontend/index.html — בלוק הסגנון המוטמע של דף הבית (נשאר מוטמע, LCP)

   לכן אין לערוך את הבלוק הזה באף אחד מהם ישירות — רק כאן.

   מה זה **לא**: לא Design System חדש. הצבעים, הגופנים והרכיבים הקיימים
   נשארים בדיוק כפי שהם. מה שנוסף כאן הוא מה שחסר: סולם רדיוסים אחיד
   (היו 12 ערכים שונים), סולם צללים, טוקני תנועה, וטיפול במספרים.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── רדיוס ──────────────────────────────────────────────────────────
     ארבעה ערכים במקום שנים־עשר. המיפוי נבחר כך שרוב הרכיבים הקיימים
     לא זזים ויזואלית: 11-14 → md, 16-20 → lg, 28 → xl. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── צללים ──────────────────────────────────────────────────────────
     רכים ונמוכי-אטימות. VEYA לא משתמשת בצל ככלי היררכיה ראשי — הגבול
     (--line) עושה את זה. הצל רק מרים אלמנט אחד מעל השאר. */
  --shadow-sm: 0 1px 2px rgba(43, 38, 32, 0.05);
  --shadow-md: 0 14px 30px -22px rgba(43, 38, 32, 0.40);
  --shadow-lg: 0 26px 60px -30px rgba(43, 38, 32, 0.38);

  /* ── תנועה ──────────────────────────────────────────────────────────
     שלושה משכים בלבד. `--ease-out` ו-`--ease-in-out` כבר קיימים
     ונשארים מקור האמת לעקומות. */
  --motion-fast: 180ms;
  --motion-normal: 420ms;
  --motion-slow: 620ms;

  /* ── צבעים סמנטיים ──
     `--green` הקיים נשאר כפי שהוא לשימושי **אייקון** (וי ירוק ברשימות):
     3.16:1 מספיק לגרפיקה אך **לא** לטקסט. לכן יש טוקן טקסט נפרד שעובר
     AA, וזה מה שמשמש כל הודעת הצלחה כתובה.
     כל הערכים נבדקו מול הרקע השנהב (--ivory). */
  --success: #1f7a45;        /* 4.97:1 — טקסט הצלחה */
  --warning: #a1541a;        /* 5.14:1 — נבדל מהזהב בכוונה */
  --error: #8f3226;          /* 6.80:1 — טקסט שגיאה */
  --error-bg: #fbeae7;
  --error-border: #dda99f;   /* חוזק מ-#e6b9b1 כדי שהגבול ייראה */

  /* ── סולם טיפוגרפיה ──
     היו 33 גדלי font-size שונים בגיליון, רובם שכנים במרחק 0.3–0.5px
     זה מזה (13 · 13.5 · 13.8 · 14 · 14.3 · 14.5 …). ההבדלים האלה אינם
     נראים לעין אבל הם בדיוק מה שגורם לעמודים להרגיש כמו תבניות שונות.
     הסולם מאחד אותם ל-15 מדרגות. אף ערך לא זז ביותר מ-1px. */
  --fs-2xs: 0.781rem;
  --fs-xs: 0.844rem;
  --fs-sm: 0.906rem;
  --fs-md: 0.969rem;
  --fs-base: 1.031rem;
  --fs-lg: 1.063rem;
  --fs-xl: 1.156rem;
  --fs-2xl: 1.313rem;
  --fs-3xl: 1.875rem;

  /* מדרגות תצוגה — נשארות fluid, כי כותרת חייבת להתכווץ במובייל. */
  --fd-xs: clamp(1rem, 2.2vw, 1.188rem);
  --fd-sm: clamp(1.125rem, 2.3vw, 1.375rem);
  --fd-md: clamp(1.188rem, 2.6vw, 1.5rem);
  --fd-lg: clamp(1.313rem, 3vw, 1.688rem);
  --fd-num: clamp(1.375rem, 4vw, 2rem);
  --fd-xl: clamp(1.625rem, 4.2vw, 2.5rem);
  --fd-2xl: clamp(1.875rem, 5.2vw, 2.875rem);

  /* ── טיפוגרפיה ──────────────────────────────────────────────────────
     ארבעה משקלים בלבד (400/500/600/700). משקל 300 הוסר מהטעינה —
     הוא לא היה בשימוש באף מקום ורק הוסיף בקשת רשת. */
  --font-body: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --font-num: 'Assistant', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   חתימה ויזואלית #1 — המספר

   המספרים הם הליבה של VEYA: 500 · 463 · 37 · 45 ₪. הם צריכים להיקרא
   כנתוני מערכת ולא כטקסט רגיל. ארבעה כללים:
     · ספרות טבלאיות — כדי שמספר שמשתנה לא יזיז את מה שלידו
     · מרווח אותיות שלילי קל — מספרים גדולים מתפזרים בלי זה
     · הגופן התצוגתי לספרות הגדולות
     · תווית מתחת, לא לצד — כך אפשר לסרוק עמודה של מספרים
   ═══════════════════════════════════════════════════════════════════════ */

.num,
.num-value,
.numrow dd,
.calc-headline .big,
.step-two .big,
.tl-item .dt {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* בלוק מספר עצמאי: ערך גדול + תווית מתחתיו. */
.num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.num-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fd-2xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  /* המרת ספרות אינה מזיזה את מה שסביבה */
  font-variant-numeric: tabular-nums lining-nums;
}
.num-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.num-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}
.num.is-accent .num-value { color: var(--gold-deep); }
.num.is-muted .num-value { color: var(--muted); }
.on-dark .num-value { color: var(--cream-text); }
.on-dark .num-label { color: #b6aa93; }

/* שורת מספרים — 500 · 463 · 37. הכלי שמסביר את הפער בלי משפט אחד. */
.num-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 14px;
  align-items: start;
}
.num-row .num {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 18px 16px;
}
.num-row .num.is-gap {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.06);
}
.on-dark .num-row .num {
  background: rgba(245, 239, 226, 0.04);
  border-color: rgba(201, 162, 39, 0.18);
}

/* המחבר בין שני מספרים: 463 ← 464 */
.num-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fd-num);
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}
.num-arrow .arrow {
  color: var(--gold-deep);
  font-size: 0.8em;
  /* RTL: החץ מצביע שמאלה, כלומר "קדימה" בעברית */
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   חתימה ויזואלית #2 — הקו
   ציר אנכי עם נקודות. כבר קיים ב-.flow-steps; כאן רק מה שהופך אותו
   לשפה: מצב "פעיל" לשלב, ומצב "יעד" לשלב האחרון.
   ═══════════════════════════════════════════════════════════════════════ */

.flow-step .flow-dot {
  transition: border-color var(--motion-normal) var(--ease-out),
              background var(--motion-normal) var(--ease-out),
              box-shadow var(--motion-normal) var(--ease-out);
}
.flow-step.is-target .flow-dot {
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.18);
}
.flow-step.is-target h3 { color: var(--gold-deep); }
.on-dark .flow-step.is-target h3 { color: var(--gold-light); }

/* ═══════════════════════════════════════════════════════════════════════
   חתימה ויזואלית #3 — אחידות הכרטיס והתג
   הרדיוסים מיושרים לסולם. הערכים נבחרו כך שהשינוי הוויזואלי מינימלי.
   ═══════════════════════════════════════════════════════════════════════ */

.numcard,
.calc-form,
.calc-headline,
.calc-empty,
.article-cta,
.evt-card,
.guide-list a,
.mistakes li,
.step-two,
.prep-card { border-radius: var(--radius-lg); }

.callout,
.table-scroll,
.note-chip,
.prep-chip,
.calc-field input,
.calc-field select,
.calc-error { border-radius: var(--radius-md); }

.numcard-tag,
.trust-chip { border-radius: var(--radius-pill); }
/* כפתור ולא גלולה: אותה פינה מתונה כמו בכפתורי המוצר עצמו (App.css). */
.btn { border-radius: 10px; }

.band { border-radius: var(--radius-xl); }

/* ═══════════════════════════════════════════════════════════════════════
   חתימה ויזואלית #4 — מיקרו-אינטראקציות
   שינוי אחד לכל מצב, ולא ערימה. הכול על transform/opacity/color בלבד.
   ═══════════════════════════════════════════════════════════════════════ */

.btn { transition: transform var(--motion-fast) var(--ease-out),
                   box-shadow var(--motion-fast) var(--ease-out),
                   border-color var(--motion-fast) var(--ease-out),
                   background var(--motion-fast) var(--ease-out); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary .arw { transition: transform var(--motion-fast) var(--ease-out); }
@media (hover: hover) {
  .btn-primary:hover .arw { transform: translateX(-3px); }  /* RTL: קדימה = שמאלה */
}

.evt-card, .guide-list a {
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
@media (hover: hover) {
  .evt-card:hover, .guide-list a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

.article a:not(.btn), .callout a, .crumbs a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--motion-fast) var(--ease-out);
}

details summary { transition: color var(--motion-fast) var(--ease-out); }
details summary .chev { transition: transform var(--motion-normal) var(--ease-out); }

/* מצב פוקוס אחיד לכל האתר — נראה, ולא מסתמך על צבע בלבד. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   חתימה ויזואלית #5 — חשיפה בגלילה
   שפת תנועה אחת לכל האתר: אטימות + הזזה קטנה כלפי מעלה. אין bounce,
   אין סיבוב, אין zoom. הכול transform/opacity — בלי layout מחדש.
   ═══════════════════════════════════════════════════════════════════════ */

.v-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-out);
  transition-delay: var(--v-delay, 0ms);
}
.v-reveal.is-in { opacity: 1; transform: none; }

/* ── כיבוד העדפת תנועה מופחתת ──
   לא "פחות אנימציה" אלא **בלי**: כל מה שאמור להיראות, נראה מיד. */
@media (prefers-reduced-motion: reduce) {
  .v-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:active { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   סצנות — התנועה שמסבירה את המוצר

   כל צעד בסצנה מתחיל מוסתר-חלקית ונחשף בתורו (`.is-on` מגיע מ-
   `veya-motion.js`). **התוכן עצמו תמיד ב-HTML** — הסצנה רק קובעת קצב.
   מי שאין לו JS, או שביקש תנועה מופחתת, רואה את הכול מיד.
   ═══════════════════════════════════════════════════════════════════════ */

.scene-step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--motion-normal) var(--ease-out),
              transform var(--motion-normal) var(--ease-out);
}
.scene-step.is-on { opacity: 1; transform: none; }

/* השלב האחרון בציר מקבל את ההדגשה רק כשהסצנה מגיעה אליו — כך העין
   נמשכת אל "מועד סגירת הרשימה" אחרי שהבינה את הרצף שהוביל אליו. */
.flow-step.is-target-on-play.is-on .flow-dot {
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.18);
}
.flow-step.is-target-on-play.is-on h3 { color: var(--gold-deep); }
.on-dark .flow-step.is-target-on-play.is-on h3 { color: var(--gold-light); }

/* בציר עם סצנה, הקו המחבר נמתח יחד עם הצעד שנחשף. */
.flow-steps[data-scene] .flow-step::before { transform: scaleY(0); }
.flow-steps[data-scene] .flow-step.is-on::before {
  transform: scaleY(1);
  transition: transform var(--motion-slow) var(--ease-out);
}

/* גוף כרטיס שמכיל שורת מספרים במקום רשימת dl */
.numcard-body { padding: 20px; }

/* המדרגה: 463 ← 464 */
.step-two .num-arrow { margin-bottom: 10px; }
.step-two .num-arrow .num-value { color: var(--gold-deep); }

@media (prefers-reduced-motion: reduce) {
  .scene-step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .flow-steps[data-scene] .flow-step::before { transform: scaleY(1) !important; }
}

/* ── תוצאת המחשבון כעוגן ויזואלי ──
   המספר הגדול הוא הדבר היחיד במסך שהעין צריכה למצוא. */
.calc-headline .big.num-value {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--cream-text);
}

/* ── הודעת שגיאה במחשבון — עוברת לטוקנים הסמנטיים ──
   היה המקום היחיד באתר שבו צבע נושא משמעות נכתב כ-hex קשיח. */
.calc-error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}

/* ── תיקון היררכיה במאמר ──
   `.article p, .article li` (ספציפיות 0,2,0) גבר על `.article-lead`
   ו-`.article-meta` (0,1,0), ולכן פסקת הפתיחה ושורת המטא־דאטה הוצגו
   בגודל הגוף. הכלל כאן מיישר ספציפיות ומחזיר את ההיררכיה. */
.article p.article-lead { font-size: var(--fs-xl); }
.article p.article-meta { font-size: var(--fs-xs); }

/* ═══════════════════════════════════════════════════════════════════════
   Header — "נאסף" בגלילה

   בראש העמוד ה-header משולב בהירו הכהה. ברגע שהמשתמש מתחיל לגלול הוא
   מתכווץ ומקבל רקע משלו, כי מאותו רגע הוא צף מעל תוכן בהיר וצריך גבול
   משלו כדי להיקרא.

   שינוי גובה בלבד — לא transform — ולכן הוא לא גורם ל-layout shift:
   ה-header הוא `position: sticky` ותופס את מקומו בזרימה מלכתחילה.
   ═══════════════════════════════════════════════════════════════════════ */

.site-header {
  transition: background var(--motion-normal) var(--ease-out),
              box-shadow var(--motion-normal) var(--ease-out),
              border-color var(--motion-normal) var(--ease-out);
}
.site-header .wrap {
  transition: height var(--motion-normal) var(--ease-out);
}
.site-header.is-compact {
  background: rgba(23, 19, 13, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(201, 162, 39, 0.22);
  box-shadow: var(--shadow-sm);
}
.site-header.is-compact .wrap { height: 58px; }
.site-header.is-compact .header-logo { height: 28px; }
.site-header .header-logo { transition: height var(--motion-normal) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .wrap, .site-header .header-logo { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Footer — היררכיה במקום רשימה שטוחה
   ═══════════════════════════════════════════════════════════════════════ */

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(201, 162, 39, 0.14);
}
.footer-col h3 {
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--gold-light);
  margin: 0 0 12px;
  font-family: var(--font-body);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 0; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  min-width: 44px;
  color: #b6aa93;
  text-decoration: none;
  font-size: var(--fs-xs);
  transition: color var(--motion-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--cream-text); }
.footer-col a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ── נגישות: דילוג לתוכן וטקסט לקוראי מסך ─────────────────────── */
.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: 16px;
  transform: translateY(-160px);
  z-index: 200;
  background: var(--gold);
  color: var(--charcoal);
  font-family: 'Assistant', sans-serif;
  font-weight: 600;
  font-size: var(--fs-md);
  padding: 13px 24px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--shadow-lifted);
  /* transform, לא top: אנימציה על מאפיין פריסה מכריחה layout בכל פריים. */
  transition: transform var(--motion-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── משוב מגע: תגובה בלחיצה, לא בשחרור ─────────────────────────── */
a.evt-card:active, .guide-list a:active, .footer-col a:active { transform: translateY(1px); }
a.evt-card, .guide-list a { transition: border-color var(--motion-normal) var(--ease-out),
  box-shadow var(--motion-normal) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.footer-col a { transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }

/* ── העדפות מערכת: שקיפות וניגודיות ───────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .site-header.is-compact { background: var(--ink); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header,
  .site-header.is-compact { background: var(--ink); backdrop-filter: none; border-bottom-color: var(--gold); }
  .btn-ghost { border-color: var(--charcoal); }
  .footer-col a { color: var(--cream-text); }
  .link-quiet { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  a.evt-card:active, .guide-list a:active, .footer-col a:active { transform: none; }
}

/* ── יעד מגע לקישור הלוגו בהדר ─────────────────────────────────────
   הלוגו עצמו 34px (ו-28px במצב מכווץ), ולכן העוגן שעוטף אותו היה
   נמוך מ-44px. מרכזים אותו בתוך יעד תקין בלי לשנות את גודל הלוגו. */
.site-header .wrap > a:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── בלוקים ויזואליים במדריכים (§13) ───────────────────────────────
   שלושה רכיבים שמפרקים קיר טקסט: משפט שצריך לזכור, קומפוזיציית
   מספרים, ושרשרת שלבים. כולם נכתבים ב-Markdown ולא ב-HTML ידני. */
.article .callout {
  margin: 26px 0;
  padding: 18px 20px;
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius-md);
  background: var(--ivory-2);
}
.article .callout p { margin: 0; color: var(--charcoal); font-size: var(--fs-lg); }

.g-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 28px 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.g-num { display: grid; gap: 3px; padding: 18px 16px; background: var(--ivory); text-align: center; }
.g-num-v {
  font-family: var(--font-display); font-size: var(--fd-lg); line-height: 1.05;
  color: var(--gold-deep); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.g-num-l { font-size: var(--fs-sm); color: var(--muted); }

.g-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px;
  margin: 26px 0; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--ivory-2);
}
.g-flow-s {
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--ivory); border: 1px solid var(--line);
  color: var(--charcoal); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.g-flow-s:last-child { border-color: rgba(201, 162, 39, 0.45); background: rgba(201, 162, 39, 0.1); }
.g-flow-a { color: var(--gold); opacity: 0.6; }

/* ── יעד מגע לקישור הכניסה בהדר ────────────────────────────────────
   ``.link-quiet`` הוא קישור טקסט עם padding קטן, ולכן יצא 38px גובה —
   מתחת למינימום. מרכזים אותו בתוך יעד תקין בלי לשנות את הטיפוגרפיה.
   ``gap`` הכרחי כאן: ה-flex הופך את ``.lq-long`` לפריט בלוקי, וה-
   רווח שבתחילת הטקסט שלו ("␣למערכת") נחתך כרווח מוביל של בלוק —
   בלעדיו "כניסה" ו"למערכת" נדבקים למילה אחת. */
.site-header .link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
}

/* ── כרטיס הספירה: פעימה קצרה בכל מעטפה חדשה ───────────────────── */


/* ── עמודת השיוך בדוח המתנות ───────────────────────────────────────
   לא "סטטוס": שדה הסטטוס קיים רק בשורת אשראי, והשירות ההוא לא שוחרר.
   מה שכן אמיתי ומעניין הוא שהמעטפה נמצאה ברשימת המוזמנים — וזה בדיוק
   המסר: VEYA מחברת בין המתנה למי שנתן אותה. */

/* ── רשימת המוזמנים בסקשן אישורי ההגעה ─────────────────────────────
   מציגה סטטוסים, לא כמויות. שורה אחת מחליפה סטטוס בגלילה — ההמחשה
   של "מוזמן עונה והמערכת מתעדכנת" בלי להסביר אותה במילים. */
.gl {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ivory);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: var(--ivory-2);
}
.gl-title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--charcoal); }
.gl-sub { font-size: var(--fs-xs); color: var(--muted); }
.gl-list { list-style: none; margin: 0; padding: 0; }
.gl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line);
}
.gl-row:last-child { border-bottom: 0; }
.gl-who { display: grid; gap: 1px; min-width: 0; }
.gl-name { color: var(--charcoal); font-weight: 600; }
.gl-grp { font-size: var(--fs-2xs); color: var(--muted); }
.gl-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: 600;
  border: 1px solid currentColor;
}
.gl-ok    { color: var(--success); }
.gl-wait  { color: var(--warning); }
.gl-maybe { color: var(--muted); }
.gl-no    { color: var(--muted); }

/* החלפת הסטטוס: שתי התוויות באותו תא, כך שאין קפיצת פריסה. */
.gl-swap { position: relative; display: inline-grid; }
.gl-swap > * { grid-area: 1 / 1; transition: opacity 420ms var(--ease-out); }
.gl-after  { opacity: 0; }
.gl[data-scene] .scene-step.is-on .gl-after  { opacity: 1; }
.gl[data-scene] .scene-step.is-on .gl-before { opacity: 0; }
.gl-row-live { background: rgba(201, 162, 39, 0.05); }

@media (max-width: 460px) {
  .gl-row { flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-swap > * { transition: none; }
}

/* ── שלוש שכבות ההתחייבות ──────────────────────────────────────────
   מה שנחתם, מה שמתברר, ומה שנכנס לחשבון. בלי כמויות: המנגנון הוא
   שההתחייבות היא רצפה ולא תקרה, וזה נאמר במילים ובהיררכיה. */
.cm {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 14px;
  margin-top: 34px;
}
.cm-row {
  display: grid; gap: 5px; align-content: start;
  padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--ivory);
}
.cm-key { background: rgba(201, 162, 39, 0.08); border-color: rgba(201, 162, 39, 0.4); }
.cm-tag {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.cm-what { font-family: var(--font-display); font-size: var(--fd-sm); color: var(--charcoal); line-height: 1.15; }
.cm-key .cm-what { color: var(--gold-deep); }
.cm-note { font-size: var(--fs-sm); color: var(--muted); }
.cm-arrow { display: grid; place-items: center; color: var(--gold); font-size: var(--fd-sm); }

@media (max-width: 900px) {
  .cm { grid-template-columns: 1fr; }
  .cm-arrow { transform: rotate(-90deg); padding: 2px 0; }
}

/* ── עמודי סוג אירוע: מה בולט בכל אירוע, במילים ─────────────────────
   במקום שורת מספרים — שלושה דברים שמאפיינים את סוג האירוע. */
.evt-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 880px; margin: 0 auto; }
.evt-f { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ivory); box-shadow: var(--shadow-sm); }
.evt-f-h { font-family: var(--font-display); font-size: var(--fd-md); color: var(--charcoal); line-height: 1.2; }
.evt-f-d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
@media (max-width: 720px) { .evt-focus { grid-template-columns: 1fr; gap: 10px; } }

/* ═══════════════════════════════════════════════════════════════════════
   מוקאפים — שפה אחת לכל האתר
   ───────────────────────────────────────────────────────────────────────
   שני רכיבים בלבד: .mk-phone לכל צילום מובייל, .mk-browser לכל צילום
   דסקטופ. כל מה שבפנים הוא צילום מסך אמיתי (או הדגמה חיה) של VEYA, והמעטפת
   לא משנה אותו — רק ממסגרת. אין כאן אנימציה, זוהר או שקיפות: מכשיר
   אמיתי, אור אחד מלמעלה, צל אחד על המשטח.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── אייפון ──────────────────────────────────────────────────────────────
   שכבות של מכשיר אמיתי, מבחוץ פנימה: מסגרת מתכת עם ברק בקצוות → שוליים
   שחורים דקים → מסך בפינות רציפות → Dynamic Island. הפרופורציות לקוחות
   מ-iPhone 17 (‏71.5×149.6 מ"מ, מסך 19.5:9, אי ברוחב כשליש מהמסך),
   ולכן הכול נגזר מ-‎--ph-w ולא מפיקסלים קבועים.
   משתנים: ‎--ph-w רוחב · ‎--ph-screen רקע שורת הסטטוס/שוליים · ‎--ph-ink צבע
   השעה והאייקונים. ‎.mk-phone--fit מציג צילום ארוך במלואו (בלי לחתוך). */
.mk-phone {
  --ph-w: 222px;
  --ph-screen: #fbf7ee;
  --ph-ink: #111;
  position: relative; width: var(--ph-w); max-width: 100%;
  padding: calc(var(--ph-w) * 0.014);
  border-radius: calc(var(--ph-w) * 0.162);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 7%, rgba(255, 255, 255, 0) 93%, rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, #d9d4cb 0%, #8f897e 9%, #a9a397 50%, #8a8479 91%, #cfc9bf 100%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 0 0 0.5px rgba(23, 19, 13, 0.4),
    0 1px 2px rgba(23, 19, 13, 0.16),
    0 12px 20px -12px rgba(23, 19, 13, 0.34),
    0 46px 64px -38px rgba(23, 19, 13, 0.62);
}
/* המסך: השוליים השחורים הם ה-border של הצילום עצמו, כך שהפינה הפנימית
   נגזרת מהחיצונית ונשארת מקבילה לה. מעל התוכן — אזור שורת הסטטוס, כמו
   בדפדפן אמיתי בטלפון, כדי שהאי לא יישב על כותרת. */
.mk-phone-screen {
  position: relative; z-index: 1; display: block; box-sizing: border-box;
  width: 100%; height: auto; aspect-ratio: 471 / 1000;
  border: calc(var(--ph-w) * 0.022) solid #050506;
  border-radius: calc(var(--ph-w) * 0.148);
  padding-top: calc(var(--ph-w) * 0.142);
  background: var(--ph-screen);
  object-fit: cover; object-position: top;
}
.mk-phone--fit .mk-phone-screen { object-fit: contain; }
.mk-phone-island {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  top: calc(var(--ph-w) * 0.062);
  width: calc(var(--ph-w) * 0.3); height: calc(var(--ph-w) * 0.086);
  border-radius: 999px; background: #000;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
}
.mk-phone-island::after {
  content: ""; position: absolute; top: 50%; right: 18%; transform: translateY(-50%);
  width: 21%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #262c38 0 9%, #0b0d12 40%, #000 72%);
}
.mk-phone-status {
  position: absolute; z-index: 3; direction: ltr; pointer-events: none;
  top: calc(var(--ph-w) * 0.066); left: calc(var(--ph-w) * 0.1); right: calc(var(--ph-w) * 0.085);
  height: calc(var(--ph-w) * 0.078);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ph-ink);
}
.mk-phone-time {
  font: 600 calc(var(--ph-w) * 0.052)/1 -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em; padding-inline-start: calc(var(--ph-w) * 0.03);
}
.mk-phone-icons { width: calc(var(--ph-w) * 0.2); height: auto; }
.mk-phone-glare {
  position: absolute; z-index: 2; pointer-events: none;
  inset: calc(var(--ph-w) * 0.036);
  border-radius: calc(var(--ph-w) * 0.126);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0) 40%);
}
.mk-phone-glare::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--ph-w) * 0.022);
  width: 36%; height: calc(var(--ph-w) * 0.016); border-radius: 999px;
  background: var(--ph-ink); opacity: 0.82;
}
.mk-phone-keys::before, .mk-phone-keys::after {
  content: ""; position: absolute; width: 3px;
  background: linear-gradient(90deg, #7d776d, #b7b1a6);
}
.mk-phone-keys::before {
  left: -2.5px; top: 18%; height: 29%; border-radius: 2px 0 0 2px;
  -webkit-mask: linear-gradient(#000 0 17%, transparent 17% 31%, #000 31% 62%, transparent 62% 69%, #000 69% 100%);
  mask: linear-gradient(#000 0 17%, transparent 17% 31%, #000 31% 62%, transparent 62% 69%, #000 69% 100%);
}
.mk-phone-keys::after {
  right: -2.5px; top: 27%; height: 15%; border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #7d776d, #b7b1a6);
}

/* ── דפדפן ───────────────────────────────────────────────────────────────
   חלון Safari על macOS, במצב בהיר: רמזורים, חצי ניווט, שדה כתובת עם
   מנעול, וכלים בצד. הסרגל תמיד LTR — כמו במחשב אמיתי, גם כשהאתר בעברית.
   הגודל של כל הסרגל נגזר מרוחב החלון (container query), כך שחלון קטן
   במובייל מקבל סרגל קטן ולא סרגל של דסקטופ על מסך צר. */
.mk-browser {
  container-type: inline-size;
  position: relative; width: 100%; overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 0 0 0.5px rgba(23, 19, 13, 0.22),
    0 1px 2px rgba(23, 19, 13, 0.08),
    0 18px 36px -20px rgba(23, 19, 13, 0.32),
    0 60px 90px -54px rgba(23, 19, 13, 0.5);
}
.on-dark .mk-browser {
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.6),
    0 18px 36px -18px rgba(0, 0, 0, 0.55),
    0 60px 90px -50px rgba(0, 0, 0, 0.7);
}
.mk-browser-bar {
  direction: ltr;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(8px, 1.8cqi, 18px);
  height: clamp(30px, 4.6cqi, 46px);
  padding-inline: clamp(10px, 1.6cqi, 16px);
  background: linear-gradient(180deg, #f7f5f2, #efece7);
  border-bottom: 0.5px solid rgba(23, 19, 13, 0.16);
  color: #6f6a62;
}
.mk-browser-lights { display: inline-flex; gap: clamp(5px, 0.8cqi, 8px); }
.mk-browser-lights i {
  width: clamp(8px, 1.25cqi, 12px); aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.16);
}
.mk-browser-lights i:nth-child(1) { background: #ff5f57; }
.mk-browser-lights i:nth-child(2) { background: #febc2e; }
.mk-browser-lights i:nth-child(3) { background: #28c840; }
.mk-browser-nav, .mk-browser-tools { display: inline-flex; align-items: center; gap: clamp(6px, 1.2cqi, 14px); }
.mk-browser-nav svg, .mk-browser-tools svg { width: clamp(10px, 1.5cqi, 15px); height: auto; }
.mk-browser-nav svg + svg { opacity: 0.4; }
.mk-browser-url {
  justify-self: center; width: min(100%, 440px);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: clamp(20px, 3cqi, 28px); padding-inline: 10px;
  border-radius: 7px; background: rgba(23, 19, 13, 0.06);
  font: 500 clamp(9px, 1.3cqi, 13px)/1 -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: #3f3b35; white-space: nowrap; overflow: hidden;
}
.mk-browser-url svg { width: clamp(7px, 1cqi, 10px); height: auto; flex: none; color: #7c776e; }
.mk-browser-view { position: relative; background: var(--ivory, #fbf7ee); }
.mk-browser-view > img { display: block; width: 100%; height: auto; }
/* צילום ביחס קבוע (16:10) — ממלא את החלון מלמעלה */
.mk-browser--fixed .mk-browser-view { aspect-ratio: 16 / 10; }
.mk-browser--fixed .mk-browser-view > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top; }
.mk-browser-view > iframe { display: block; width: 100%; border: 0; }
@container (max-width: 520px) {
  .mk-browser-nav, .mk-browser-tools { display: none; }
  .mk-browser-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mk-browser-bar::after { content: ""; width: clamp(34px, 9cqi, 44px); }
}

/* ===== VEYA BRAND LAYER — END ===== */

/* ═══════════════════════════════════════════════════════════════════
   השפה החדשה מעל שכבת המותג — לעמודים הפנימיים בלבד.

   שכבת המותג (הבלוק שלמעלה) משותפת גם לדף הבית ונוצרת אוטומטית, ולכן
   לא נוגעים בה כאן. מה שבא אחריה מנצח אותה באותה ספציפיות: פינות,
   צללים וגרדיאנטים של רכיבים משותפים, כפי שהם נראים בעמודים הפנימיים.
   ═══════════════════════════════════════════════════════════════════ */

:root { --font-body: var(--f-text); --font-display: var(--f-display); --font-num: var(--f-text); }

.btn { border-radius: var(--radius); }
.btn:active { transform: scale(0.98); }
.band { border-radius: 0; }
.numcard, .calc-form, .calc-headline, .calc-empty, .article-cta, .step-two { border-radius: var(--radius); }
.numcard, .step-two, .mistakes li { border-radius: 0; }
a.evt-card, .guide-list a { border-radius: 0; box-shadow: none; }
.callout, .calc-error, .calc-field input, .calc-field select { border-radius: var(--radius); }
.table-scroll { border-radius: 0; }
@media (hover: hover) {
  .evt-card:hover, .guide-list a:hover { transform: none; box-shadow: none; }
}
.skip-link { font-family: var(--f-text); border-radius: var(--radius); }

/* רצף שלבים: היעד מודגש בטיפוגרפיה, לא בעיגול זוהר */
.flow-step.is-target .flow-dot,
.flow-step.is-target-on-play.is-on .flow-dot { background: none; box-shadow: none; color: var(--charcoal); }

/* שורת מספרים: תאים בטבלה, לא אריחים */
.num-row { gap: 0; border-top: 2px solid var(--charcoal); }
.num-row .num { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 0 16px; }
.num-row .num + .num { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.num-row .num.is-gap { background: none; border-bottom: 3px double var(--gold); }
.num-value { font-weight: 500; }
.num-label { letter-spacing: 0; font-size: var(--t-small); }

/* כותרת האתר: מוצקה, בלי זכוכית */
.site-header.is-compact { background: var(--ink); backdrop-filter: none; box-shadow: none; }
.site-header.is-compact .wrap { height: 60px; }
.site-header.is-compact .header-logo { height: 38px; }

/* תחתית */
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 32px 24px; margin: 0; padding: 0; border: 0; }
.footer-col h3 { font-family: var(--f-text); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--on-ink); margin: 0 0 8px; }
.footer-col a { min-height: 40px; font-size: var(--t-small); color: var(--on-ink-3); }
.footer-col a:hover { color: var(--gold-light); }
@media (max-width: 860px) { .footer-cols { margin-top: 40px; } }

/* בלוקים במדריכים */
.article .callout { margin: 30px 0; padding: 22px 24px; border: 0; border-radius: var(--radius); background: var(--ivory-2); }
.article .callout p { color: var(--charcoal); font-size: 1.125rem; }
.g-numbers { gap: 0; background: none; border: 0; border-top: 2px solid var(--charcoal); border-radius: 0; margin: 32px 0; }
.g-num { background: none; text-align: start; padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.g-num + .g-num { padding-inline-start: 18px; border-inline-start: 1px solid var(--line); }
.g-num-v { font-size: clamp(1.75rem, 3vw, 2.375rem); }
.g-flow { padding: 0; border: 0; background: none; border-radius: 0; margin: 28px 0; }
.g-flow-s { background: none; }
.g-flow-s:last-child { background: none; border-color: var(--gold); color: var(--gold-deep); }

/* רשימת המוזמנים, שכבות ההתחייבות, מוקדי סוג האירוע — שטוחים */
.gl { box-shadow: none; border-radius: var(--radius); }
.cm-row, .evt-f { border-radius: var(--radius); box-shadow: none; }
.cm-tag { letter-spacing: 0; text-transform: none; font-size: var(--t-small); }
.evt-focus { margin: 0; max-width: none; }

/* צילומי מוצר: מסגרת דקה במקום צל צף */
.mk-browser { border-radius: 8px; box-shadow: 0 0 0 1px rgba(23, 19, 13, 0.14); }
.on-dark .mk-browser { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.mk-browser-bar { background: #f2efea; }

/* שכבת המותג מגדירה מחדש את גודל פסקת הפתיחה; כאן היא חוזרת להיות גדולה */
.article p.article-lead { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.65; }
.article p.article-meta { font-size: var(--t-small); }

/* תחתית: חמש עמודות בדסקטופ, שלוש בטאבלט, שתיים בטלפון */
.footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* כותרת קצרה מקבלת את כל הגודל: היא הדבר היחיד במסך */
.page-hero .wrap > h1.is-short { font-size: clamp(2.75rem, 7.4vw, 6.5rem); line-height: 1.02; letter-spacing: -0.02em; max-width: none; }
/* צילום לאורך בכותרת: נחתך ל-4:5 כדי שלא ידחוף את הכול למטה */
.page-hero .hero-media.is-tall img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.page-hero .hero-media { max-width: 520px; justify-self: end; width: 100%; }
@media (max-width: 860px) { .page-hero .hero-media { justify-self: stretch; max-width: none; } }
@media (min-width: 980px) {
  section:has(> .wrap > .section-head) .section-head .section-title { font-size: clamp(1.75rem, 2.7vw, 2.625rem); }
}

/* ── פריסת מאמר: טקסט ברוחב קריאה, ולצידו עמודת ניווט ── */
.article-layout { display: grid; grid-template-columns: minmax(0, 70ch) minmax(0, 1fr); column-gap: var(--col-gap); align-items: start; }
.article-layout > .article { max-width: none; margin: 0; min-width: 0; }
.article h2[id] { scroll-margin-top: 96px; }
.article-aside { position: sticky; top: 104px; display: grid; gap: 44px; padding-top: 8px; max-width: 300px; }
.aside-h { font-weight: 600; font-size: 1rem; color: var(--charcoal); margin: 0 0 12px; }
.aside-block ol, .aside-block ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--line); }
.aside-block a {
  display: block; padding: 7px 18px; margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  font-size: var(--t-small); line-height: 1.45; color: var(--muted); text-decoration: none;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.aside-block a:hover { color: var(--charcoal); }
.aside-block a[aria-current="page"] { color: var(--charcoal); font-weight: 600; border-inline-start-color: var(--gold); }
@media (max-width: 979px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; max-width: none; margin-top: 64px; padding-top: 28px; border-top: 2px solid var(--charcoal); }
  .aside-toc { display: none; }
  .aside-types ul { border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .aside-types a { margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-small); }
  .aside-types a[aria-current="page"] { border-color: var(--gold); background: rgba(201, 162, 39, 0.1); }
}
/* כותרת שאחריה בא מאמר: המאמר מתחיל מיד, לא אחרי מסך ריק */
.page-hero:has(+ .article-wrap) { padding-bottom: clamp(28px, 3.5vw, 52px); }