/* ============================================================================
   Hayaanshufiya — השכבה העריכותית
   ============================================================================

   עשרה לוחות בקנבס אינם מדברים באוצר המילים של האפליקציה. דף הבית, דף
   הנחיתה, צור קשר, קורות חיים והתבנית המשפטית בנויים כ״נייר ודיו״.
   הטוקנים שלהם — --paper, --ink, --rule, --mark — מוגדרים ב‑components.css
   תחת ‎.hay-ed; זה גיליון הרכיבים שמשתמש בהם.

   מאיפה זה הגיע
   --------------
   ‎landing-page-v2.php החזיק 26KB של ‎<style> מוטבע, והוא הלוח היחיד
   שהוטמע. לוח שני שהיה מועתק ממנו היה מייצר עותק שני שנפרד ממנו — בדיוק
   מה שקרה בין pricing-page.php ל‑guide-page.php וילד את page.css.

   התיחום, וגם בתוך ה‑@media
   --------------------------
   כל חוק תחום ל‑.hay-ed, כולל אלה שבתוך שאילתות המדיה. זה לא פרט: הכללים
   המקוריים היו גלובליים, מה שנכון למסמך עצמאי אחד ושגוי לגיליון משותף.
   ‎.card, .btn, .num ו‑.rule הם שמות גנריים שיתנגשו עם ווקומרס, אלמנטור
   ואסטרה. הכללים ברמת המסמך — html, body, *, a, img — הפכו לכללים על
   ‎.hay-ed עצמו. ‎@keyframes נשארות גלובליות כי שמות אנימציה אינם סלקטורים.

   שימוש: ‎<div class="hay-ed"> סביב הקטע, ‎<div class="hay-ed hay-ed--deep">
   לניב של דף הנחיתה. תלוי ב‑tokens.css וב‑components.css.
   ========================================================================= */

/* ══════════════════════════════════════════════════════════════════
       TOKENS — carried over verbatim from the canvas
       ══════════════════════════════════════════════════════════════════ */
    

    .hay-ed, .hay-ed *, .hay-ed::before, .hay-ed *::before, .hay-ed::after, .hay-ed *::after { box-sizing: border-box; }
    .hay-ed { scroll-behavior: smooth; overflow-x: hidden; }
    .hay-ed {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      direction: rtl;
      font-family: 'Heebo', 'Assistant', system-ui, sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    .hay-ed a { color: inherit; text-decoration: none; }
    .hay-ed a:hover, .hay-ed a:focus { text-decoration: none; }
    .hay-ed img { max-width: 100%; height: auto; }
    .hay-ed :focus-visible { outline: 3px solid var(--mark-ui); outline-offset: 3px; }

    /* ── motion: lines uncover from a mask, rules draw themselves ── */
    @keyframes uncover { from { transform: translateY(102%); } to { transform: none; } }
    @keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
    @keyframes dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }
    @keyframes drop { 0%,100% { transform: scaleY(.35); opacity: .5 } 50% { transform: scaleY(1); opacity: 1 } }
    @keyframes slide { to { transform: translateX(50%); } }

    .hay-ed .up { animation: up .8s cubic-bezier(.16,1,.3,1) both; }
    .hay-ed .u1 {animation-delay:.5s}.hay-ed .u2 {animation-delay:.6s}.hay-ed .u3 {animation-delay:.7s}
    .hay-ed .u4 {animation-delay:.8s}.hay-ed .u5 {animation-delay:.9s}

    /* ── type ── */
    .hay-ed .h2 { font-size: 58px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
    .hay-ed .lede { font-size: 19px; line-height: 1.7; color: var(--ink2); font-weight: 400; margin: 0; }
    .hay-ed .cap { font-size: 12px; font-weight: 700; color: var(--mark-d);
            display: inline-flex; align-items: center; gap: 10px; }
    .hay-ed .cap::before { content: ''; width: 34px; height: 2px; background: var(--mark); display: block; }
    .hay-ed .num { font-variant-numeric: tabular-nums; }
    .hay-ed .rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

    .hay-ed .btn-ed {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 62px; padding: 0 36px; border: 0; border-radius: 0;
      font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
      background: var(--ink); color: var(--paper);
      transition: transform .16s, background .16s;
    }
    .hay-ed .btn-ed:hover { transform: translateY(-2px); }
    .hay-ed .btn-ed--mark { background: var(--mark); color: #1F1914; }
    .hay-ed .btn-ed--mark:hover { background: var(--mark-ui); }
    .hay-ed .btn-ed--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

    .hay-ed .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7;
          stroke-linecap: round; stroke-linejoin: round; }
    .hay-ed .ic-sm { width: 17px; height: 17px; }

    /* ── page furniture ── */
    .hay-ed .wrap { max-width: 1440px; margin: 0 auto; }
    .hay-ed .sec { padding-inline: var(--gutter); }
    .hay-ed .tint { background: var(--paper2); }
    .hay-ed .band { background: var(--ink); color: var(--paper); }
    .hay-ed .band .lede { color: var(--rule); }

    /* ══════════════════════════════════════════════════════════════════
       HEADER
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .site-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 20px; padding: 26px var(--gutter); border-bottom: 1px solid var(--rule);
      background: var(--paper);
    }
    /* min-height 44: קישור בגובה 28px נופל מתחת לרצפת מטרת המגע.
       הכיתוב עצמו לא זז — inline-flex ממרכז אותו בתוך הגובה הגדול יותר. */
    .hay-ed .brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
             font-size: 17px; font-weight: 800;
             letter-spacing: -.02em; color: var(--ink); }
    .hay-ed .brand .logo-mark { display: block; flex: none; }
    .hay-ed .site-foot .brand { color: var(--ink); }
    .hay-ed .site-nav { display: flex; gap: 26px; font-size: 15px; color: var(--ink2); align-items: center; }
    .hay-ed .site-nav-links { display: flex; gap: 26px; align-items: center; }
    /* פריטי הניווט היו 22px גובה. הריפוד האנכי לא משנה את המרווח האופקי
       שהעיצוב קבע, ורק מגדיל את שטח הלחיצה. */
    .hay-ed .site-nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .hay-ed .site-nav a:hover { color: var(--ink); }
    .hay-ed .site-head .btn-ed { min-height: 44px; padding: 0 20px; font-size: 15px; }

    /* ══════════════════════════════════════════════════════════════════
       HERO — the hero is a question
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .h-wrap { padding: 52px var(--gutter) 0; }
    .hay-ed .h-head { display: flex; align-items: baseline; justify-content: space-between;
              gap: 30px; padding-bottom: 46px; }
    .hay-ed .h-head .fine { font-size: 14px; color: var(--ink3); }
    .hay-ed .h-grid { display: grid; grid-template-columns: 1fr 604px; gap: 64px; align-items: stretch; }
    .hay-ed .h-copy { display: flex; flex-direction: column; align-items: flex-start; }
    .hay-ed .h-copy > *:not(.h-stats) { max-width: 100%; }

    .hay-ed .h-type { font-size: 104px; font-weight: 900; line-height: .94;
              letter-spacing: -.035em; margin: 0 0 26px; text-align: start; }
    .hay-ed .h-type > span { display: block; overflow: hidden; }
    .hay-ed .h-type > span > b { display: block; font-weight: inherit;
                         animation: uncover 1.15s cubic-bezier(.16,1,.3,1) both; }
    .hay-ed .h-type > span:nth-child(1) > b { animation-delay: .06s }
    .hay-ed .h-type > span:nth-child(2) > b { animation-delay: .19s }
    .hay-ed .h-dot { color: var(--mark-ui); display: inline-block; animation: dot 2.6s ease-in-out infinite; }

    .hay-ed .h-lede { font-size: 20px; max-width: 520px; margin: 0 0 26px; }
    .hay-ed .h-cta { min-height: 64px; padding: 0 34px; font-size: 17px; }
    .hay-ed .h-fine { font-size: 14px; color: var(--ink3); margin-top: 16px; }

    .hay-ed .h-stats { align-self: stretch; margin-top: auto; padding-top: 28px;
               border-top: 1px solid var(--rule); display: flex; gap: 30px; }
    .hay-ed .h-stats > div { flex: 1; }
    .hay-ed .h-stats b { display: block; font-size: 34px; font-weight: 900; line-height: 1;
                 letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
    .hay-ed .h-stats span { display: block; font-size: 13px; color: var(--ink2); margin-top: 6px; }

    .hay-ed .h-foot { display: flex; align-items: center; justify-content: space-between;
              gap: 40px; padding: 40px 0 0; border-top: 1px solid var(--rule); margin-top: 52px; }
    .hay-ed .h-foot .fine { font-size: 14px; color: var(--ink3); }
    .hay-ed .h-scroll { display: inline-flex; align-items: center; gap: 10px;
                font-size: 13px; font-weight: 700; color: var(--ink3); }
    .hay-ed .h-scroll i { width: 1px; height: 30px; background: var(--ink3); display: block;
                  animation: drop 2.2s ease-in-out infinite; transform-origin: top; }

    /* ── the hero question: a flat offset block, not a blurred shadow ── */
    .hay-ed .hq {
      background: var(--paper); border: 1px solid var(--ink3);
      padding: 32px 32px 28px; position: relative;
      box-shadow: -16px 16px 0 var(--paper2);
      animation: up .85s cubic-bezier(.16,1,.3,1) .42s both;
    }
    .hay-ed .hq-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
              font-size: 12px; font-weight: 700; color: var(--mark-d);
              padding-bottom: 15px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
    .hay-ed .hq-lab em { font-style: normal; color: var(--ink3); }
    .hay-ed .hq-q { direction: ltr; text-align: left; font-size: 25px; line-height: 1.5;
            font-weight: 700; margin: 0 0 22px; }
    .hay-ed .hq-q u { text-decoration: none; border-bottom: 3px solid var(--mark-ui); padding: 0 34px; }

    .hay-ed .hq input { position: absolute; opacity: 0; pointer-events: none; }
    .hay-ed .hq-opts { display: flex; flex-direction: column; gap: 9px; }
    .hay-ed .hq-opt { display: flex; align-items: center; gap: 14px; cursor: pointer;
              padding: 13px 16px; border: 2px solid var(--ink3); background: var(--paper);
              transition: border-color .18s, background .18s; }
    .hay-ed .hq-key { width: 30px; height: 30px; flex: none; display: inline-flex;
              align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
              background: #E6DED5; color: var(--ink2); }
    .hay-ed .hq-txt { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; }
    .hay-ed .hq-mark { font-size: 13px; font-weight: 700; flex: none; opacity: 0; }

    .hay-ed #hq-b:checked ~ .hq-opts label[for="hq-b"] { border-color: var(--ok); background: var(--ok-bg); }
    .hay-ed #hq-b:checked ~ .hq-opts label[for="hq-b"] .hq-key { background: var(--ok); color: var(--paper); }
    .hay-ed #hq-b:checked ~ .hq-opts label[for="hq-b"] .hq-mark { opacity: 1; color: var(--ok-ink); }
    .hay-ed #hq-a:checked ~ .hq-opts label[for="hq-a"], .hay-ed #hq-c:checked ~ .hq-opts label[for="hq-c"], .hay-ed #hq-d:checked ~ .hq-opts label[for="hq-d"] { border-color: var(--no); background: var(--no-bg); }
    .hay-ed #hq-a:checked ~ .hq-opts label[for="hq-a"] .hq-key, .hay-ed #hq-c:checked ~ .hq-opts label[for="hq-c"] .hq-key, .hay-ed #hq-d:checked ~ .hq-opts label[for="hq-d"] .hq-key { background: var(--no); color: var(--paper); }
    .hay-ed #hq-a:checked ~ .hq-opts label[for="hq-a"] .hq-mark, .hay-ed #hq-c:checked ~ .hq-opts label[for="hq-c"] .hq-mark, .hay-ed #hq-d:checked ~ .hq-opts label[for="hq-d"] .hq-mark { opacity: 1; color: var(--no-ink); }
    /* a wrong pick also reveals which one was right */
    .hay-ed #hq-a:checked ~ .hq-opts label[for="hq-b"], .hay-ed #hq-c:checked ~ .hq-opts label[for="hq-b"], .hay-ed #hq-d:checked ~ .hq-opts label[for="hq-b"] { border-color: var(--ok); }

    /* hint and explanation share one reserved block, so answering never
       shoves the page down under the reader's cursor */
    .hay-ed .hq-resp { min-height: 128px; }
    .hay-ed .hq-hint { font-size: 14px; color: var(--ink3); margin: 18px 0 0; }
    .hay-ed .hq-why { display: none; }
    .hay-ed .hq:has(input:checked) .hq-why { display: block; animation: up .5s cubic-bezier(.16,1,.3,1) both; }
    .hay-ed .hq:has(input:checked) .hq-hint { display: none; }
    .hay-ed .hq-foot { margin-top: 18px; border-top: 2px solid var(--mark-ui); padding-top: 16px; }
    .hay-ed .hq-why p:first-child { font-size: 16px; line-height: 1.75; margin: 0 0 12px; }
    .hay-ed .hq-why p:last-child { font-size: 15px; color: var(--ink2); margin: 0; }

    /* ══════════════════════════════════════════════════════════════════
       THE QUESTION-TYPE STRIP
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .h-strip { padding: 16px 0; border-block: 1px solid var(--ink3); background: var(--paper2);
               overflow: hidden;
               mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
               -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
    .hay-ed .h-strip .marquee { display: flex; flex-wrap: nowrap; width: max-content; white-space: nowrap;
                        animation: slide 40s linear infinite; }
    .hay-ed .h-strip .tag { color: var(--ink2); font-size: 15px; font-weight: 700; padding: 0 28px; }

    /* ══════════════════════════════════════════════════════════════════
       THREE WAYS IN
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .routes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
    .hay-ed .route { padding: 36px 32px 32px; border-inline-end: 1px solid var(--rule);
             display: flex; flex-direction: column; gap: 12px; color: inherit;
             transition: background .2s; }
    .hay-ed .route:last-child { border-inline-end: 0; }
    .hay-ed .route:hover { background: var(--paper2); }
    .hay-ed .route:hover .route-go { transform: translateX(-6px); }
    .hay-ed .route-n { font-size: 42px; font-weight: 900; color: var(--mark-d); line-height: 1;
               font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: 4px; }
    .hay-ed .route h3 { font-size: 27px; font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -.015em; }
    .hay-ed .route p { font-size: 16px; line-height: 1.65; color: var(--ink2); margin: 0; flex: 1; }
    .hay-ed .route-go { color: var(--mark-d); font-size: 15px; font-weight: 700; margin-top: 6px;
                display: inline-flex; align-items: center; gap: 8px; transition: transform .2s; }

    /* ══════════════════════════════════════════════════════════════════
       FOUR SCREENS, ONE ENGINE — CSS tabs
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .sec-head { display: flex; align-items: flex-end; justify-content: space-between;
                gap: 40px; margin-bottom: 28px; }
    .hay-ed .sec-head > div { max-width: 640px; }
    .hay-ed .sec-head .h2 { margin-top: 18px; }
    .hay-ed .sec-head > .lede { max-width: 340px; flex: none; }

    .hay-ed .tabs > input { position: absolute; opacity: 0; pointer-events: none; }
    .hay-ed .tabbar { display: flex; border-bottom: 1px solid var(--rule); }
    .hay-ed .tabbar label { padding: 16px 22px; cursor: pointer; font-size: 17px; font-weight: 700;
                    color: var(--ink2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
    .hay-ed .tabbar label:hover { color: var(--ink); }
    .hay-ed .tabpane { display: none; padding-top: 30px;
               grid-template-columns: 360px 1fr 132px; gap: 40px; align-items: center; }
    .hay-ed #ht1:checked ~ .tabbar label[for="ht1"], .hay-ed #ht2:checked ~ .tabbar label[for="ht2"], .hay-ed #ht3:checked ~ .tabbar label[for="ht3"], .hay-ed #ht4:checked ~ .tabbar label[for="ht4"] { color: var(--ink); border-bottom-color: var(--mark-d); }
    .hay-ed #ht1:checked ~ .tabpane-1, .hay-ed #ht2:checked ~ .tabpane-2, .hay-ed #ht3:checked ~ .tabpane-3, .hay-ed #ht4:checked ~ .tabpane-4 {
      display: grid; animation: up .5s cubic-bezier(.16,1,.3,1) both;
    }
    .hay-ed .tabpane h3 { font-size: 30px; font-weight: 800; margin: 0 0 14px; line-height: 1.15; }
    .hay-ed .tabpane .lede { max-width: 480px; }
    .hay-ed .tabpane .owl { width: 132px; height: 132px; justify-self: center; }

    /* a framed look at a real product surface */
    .hay-ed .spec { background: var(--paper); border: 1px solid var(--ink3);
            padding: 18px; display: flex; flex-direction: column; gap: 10px; }
    .hay-ed .tint .spec { border-color: var(--ink3); }
    .hay-ed .spec-bar { height: 8px; border-radius: 9999px; background: #E6DED5; overflow: hidden; }
    .hay-ed .spec-bar > i { display: block; height: 100%; background: var(--mark-d); border-radius: 9999px; }
    .hay-ed .spec-cap { font-size: 12px; color: var(--ink3); }

    .hay-ed .wave { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 22px; }
    .hay-ed .wave i { flex: 1; background: var(--mark-d); opacity: .9; display: block; }
    .hay-ed .wave i.dim { opacity: .3; }

    /* the chat surface: in a column flex under rtl, flex-start resolves RIGHT */
    .hay-ed .chat { display: flex; flex-direction: column; gap: 10px; }
    .hay-ed .chat p { margin: 0; max-width: 84%; padding: 12px 15px; font-size: 15px; line-height: 1.6; }
    .hay-ed .chat .me { align-self: flex-start; background: var(--ink); color: var(--paper);
                border-radius: 14px 14px 4px 14px; }
    .hay-ed .chat .ai { align-self: flex-end; background: var(--paper2); color: var(--ink);
                border: 1px solid var(--rule); border-radius: 14px 14px 14px 4px; }

    /* ══════════════════════════════════════════════════════════════════
       FOUR STEPS
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .step { display: flex; align-items: baseline; gap: 26px;
            padding: 26px 0; border-top: 1px solid var(--rule); transition: background .18s; }
    .hay-ed .step:hover { background: var(--paper2); }
    .hay-ed .step-n { font-size: 15px; font-weight: 900; color: var(--mark-d); width: 34px; flex: none;
              font-variant-numeric: tabular-nums; }
    .hay-ed .step-t { flex: 1; min-width: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
    .hay-ed .step-s { font-size: 15px; color: var(--ink2); flex: none; }

    /* ══════════════════════════════════════════════════════════════════
       PROOF — the three real recordings
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .hay-ed .vid { border: 1px solid var(--rule); background: var(--paper2); }
    /* the three recordings are 1920×1080 masters, so the frame takes their own
       ratio — cropping them into the artboard's 16:10 only ate the speaker */
    .hay-ed .vid video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1F1914; }
    .hay-ed .vid-cap { padding: 14px 18px 16px; }
    .hay-ed .vid-name { display: block; font-size: 19px; font-weight: 800; }
    .hay-ed .vid-meta { display: block; font-size: 13px; color: var(--ink2); margin-top: 4px; }

    /* ══════════════════════════════════════════════════════════════════
       WHY US — the dark band
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .whys { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 26px; }
    .hay-ed .why { padding: 30px 0; border-top: 1px solid #4C4039;
           display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; }
    /* orange-800 is the paper value; on the dark band the numeral flips to orange-300 */
    .hay-ed .why-n { font-size: 15px; font-weight: 900; color: #F8B772;
             font-variant-numeric: tabular-nums; padding-top: 6px; }
    .hay-ed .why h3 { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
    .hay-ed .why p { font-size: 15px; color: var(--rule); line-height: 1.65; margin: 0; }

    /* ══════════════════════════════════════════════════════════════════
       PRICING
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .plan-row { display: flex; align-items: baseline; gap: 24px;
                padding: 26px 0; border-top: 1px solid var(--rule);
                transition: background .18s; color: inherit; }
    .hay-ed .plan-row:hover { background: var(--paper2); }
    .hay-ed .plan-row--best { background: var(--paper2); padding-inline: 24px; }
    .hay-ed .plan-name { flex: 1; min-width: 0; font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
    .hay-ed .plan-name em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--mark-d); }
    .hay-ed .plan-week { font-size: 15px; color: var(--ink2); flex: none; }
    .hay-ed .plan-sum { font-size: 40px; font-weight: 900; letter-spacing: -.02em; flex: none;
                 font-variant-numeric: tabular-nums; }
    .hay-ed .incl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 28px; }
    .hay-ed .incl > div { display: flex; gap: 10px; align-items: flex-start;
                  font-size: 15px; line-height: 1.55; color: var(--ink2); }
    .hay-ed .incl .ic { color: var(--mark-d); flex: none; margin-top: 2px; }

    /* the side offer */
    .hay-ed .offer-box { background: var(--paper2); padding: 36px 40px; display: flex;
                 align-items: center; justify-content: space-between; gap: 40px; }
    .hay-ed .offer-box h3 { font-size: 30px; font-weight: 800; margin: 14px 0 8px; letter-spacing: -.015em; }
    .hay-ed .offer-go { color: var(--mark-d); font-size: 16px; font-weight: 700; flex: none;
                display: inline-flex; align-items: center; gap: 8px; transition: transform .2s; }
    .hay-ed .offer-box:hover .offer-go { transform: translateX(-6px); }

    /* ══════════════════════════════════════════════════════════════════
       FAQ
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .qa-wrap { max-width: 980px; margin-top: 22px; }
    .hay-ed details.qa { border-top: 1px solid var(--rule); padding: 22px 0; }
    .hay-ed details.qa > summary {
      list-style: none; cursor: pointer; display: flex; align-items: center;
      justify-content: space-between; gap: 20px; min-height: 44px;
      font-size: 22px; font-weight: 700; line-height: 1.35;
    }
    .hay-ed details.qa > summary::-webkit-details-marker { display: none; }
    .hay-ed details.qa > summary::after { content: '+'; font-size: 26px; font-weight: 400;
                                  color: var(--mark-d); flex: none; }
    .hay-ed details.qa[open] > summary::after { content: '−'; }
    .hay-ed details.qa > summary:hover { color: var(--mark-d); }
    .hay-ed details.qa > p { font-size: 17px; line-height: 1.75; color: var(--ink2);
                     margin: 14px 0 0; max-width: 720px; }

    /* ══════════════════════════════════════════════════════════════════
       THE CLOSING BAND — the one flooded field
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .end-sec { background: var(--mark); color: var(--ink); padding: 76px var(--gutter); }
    .hay-ed .end { display: flex; align-items: center; justify-content: space-between; gap: 56px; }
    .hay-ed .end-owl { width: 220px; height: 220px; flex: none; }
    .hay-ed .end p { font-size: 18px; line-height: 1.7; margin: 16px 0 26px; max-width: 560px; }

    /* ══════════════════════════════════════════════════════════════════
       FOOTER
       ══════════════════════════════════════════════════════════════════ */
    .hay-ed .site-foot { padding: 54px var(--gutter) 44px; border-top: 1px solid var(--rule);
                 display: flex; justify-content: space-between; gap: 48px; align-items: flex-start; }
    .hay-ed .foot-brand { max-width: 300px; }
    .hay-ed .foot-brand p { font-size: 14px; color: var(--ink3); line-height: 1.7; margin: 12px 0 0; }
    .hay-ed .foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
    .hay-ed .foot-col { display: flex; flex-direction: column; gap: 0; }
    .hay-ed .foot-col > span { font-size: 13px; font-weight: 700; }
    /* אותו תיקון בפוטר: אחת‑עשרה שורות בגובה 21px. ה‑gap של הטור יורד מ‑10
       ל‑0 כדי שהרשימה לא תתארך — הגובה עצמו כבר מפריד ביניהן. */
    .hay-ed .foot-col a { display: flex; align-items: center; min-height: 44px;
                  font-size: 14px; color: var(--ink2); }
    .hay-ed .foot-col a:hover { color: var(--ink); }
    .hay-ed .foot-legal { padding: 0 var(--gutter) 34px; font-size: 13px; color: var(--ink3); }

    /* ══════════════════════════════════════════════════════════════════
       RESPONSIVE — the mobile artboard's own decisions
       ══════════════════════════════════════════════════════════════════ */
    @media (max-width: 1180px) {
      /* השוליים משתנים עם הרוחב. היו על ‎:root, וכאן הם על שורש
         התיחום — אחרת הם מחלחלים החוצה לכל העמוד. */
      .hay-ed { --gutter: 40px; }


      
      .hay-ed .h-grid { grid-template-columns: 1fr 520px; gap: 44px; }
      .hay-ed .h-type { font-size: 82px; }
      .hay-ed .h2 { font-size: 46px; }
      .hay-ed .tabpane { grid-template-columns: 300px 1fr; }
      .hay-ed .tabpane .owl { display: none; }
    
}

    @media (max-width: 900px) {
      /* השוליים משתנים עם הרוחב. היו על ‎:root, וכאן הם על שורש
         התיחום — אחרת הם מחלחלים החוצה לכל העמוד. */
      .hay-ed { --gutter: 20px; }


      
      .hay-ed .site-head { padding: 18px var(--gutter); }
      .hay-ed .site-nav-links { display: none; }
      .hay-ed .site-head .btn-ed { padding: 0 16px; font-size: 14px; }
      .hay-ed .brand { font-size: 16px; gap: 8px; }

      .hay-ed .h-wrap { padding: 30px var(--gutter) 0; }
      .hay-ed .h-head { padding-bottom: 22px; flex-direction: column; align-items: flex-start; gap: 10px; }
      .hay-ed .h-grid { grid-template-columns: 1fr; gap: 34px; }
      .hay-ed .h-type { font-size: clamp(40px, 13vw, 60px); margin: 22px 0 20px; }
      .hay-ed .h-lede { font-size: 18px; }
      .hay-ed .h-cta { width: 100%; }
      .hay-ed .h-stats { gap: 16px; flex-wrap: wrap; }
      .hay-ed .h-stats > div { flex: 1 1 40%; }
      .hay-ed .h-stats b { font-size: 28px; }
      .hay-ed .h-foot { margin-top: 30px; padding-top: 22px; flex-direction: column;
                align-items: flex-start; gap: 14px; }
      .hay-ed .hq { padding: 22px 20px 20px; box-shadow: -10px 10px 0 var(--paper2); }
      .hay-ed .hq-q { font-size: 20px; }
      .hay-ed .hq-resp { min-height: 0; }

      .hay-ed .h2 { font-size: 34px; }
      .hay-ed .lede { font-size: 17px; }
      .hay-ed .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
      .hay-ed .sec-head > .lede { max-width: none; }

      /* routes become a stack, dividers turn horizontal */
      .hay-ed .routes { grid-template-columns: 1fr; }
      .hay-ed .route { border-inline-end: 0; border-top: 1px solid var(--rule); padding: 26px 20px; }
      .hay-ed .route:first-child { border-top: 0; }
      .hay-ed .route h3 { font-size: 23px; }

      .hay-ed .tabbar { flex-wrap: wrap; }
      .hay-ed .tabbar label { padding: 13px 14px; font-size: 15px; }
      .hay-ed .tabpane { grid-template-columns: 1fr; gap: 26px; }
      .hay-ed .tabpane .owl { display: block; width: 104px; height: 104px; }
      .hay-ed .tabpane h3 { font-size: 24px; }

      /* the step rows stack so the title never shrinks to 39px */
      .hay-ed .step { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
      .hay-ed .step-t { font-size: 22px; }
      .hay-ed .step-s { grid-column: 2; }

      .hay-ed .vids { grid-template-columns: 1fr; }
      .hay-ed .whys { grid-template-columns: 1fr; gap: 0; }
      .hay-ed .incl { grid-template-columns: 1fr; gap: 14px; }

      .hay-ed .plan-row { flex-wrap: wrap; gap: 8px 16px; }
      .hay-ed .plan-name { flex: 1 1 100%; font-size: 22px; }
      .hay-ed .plan-sum { font-size: 32px; margin-inline-start: auto; }

      .hay-ed .offer-box { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px; }
      .hay-ed .offer-box h3 { font-size: 24px; }

      .hay-ed details.qa > summary { font-size: 19px; }
      .hay-ed details.qa > p { font-size: 16px; }

      .hay-ed .end-sec { padding: 44px 24px; }
      .hay-ed .end { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
      .hay-ed .end-owl { width: 150px; height: 150px; }
      .hay-ed .end p { margin-inline: auto; }

      .hay-ed .site-foot { flex-direction: column; gap: 30px; padding: 34px var(--gutter) 24px; }
      .hay-ed .foot-cols { gap: 34px; }
      .hay-ed .foot-legal { padding: 0 var(--gutter) 28px; }
    
}

    @media (prefers-reduced-motion: reduce) {

      .hay-ed .h-type > span > b, .hay-ed .h-dot, .hay-ed .h-scroll i, .hay-ed .h-strip .marquee, .hay-ed .hq, .hay-ed .up {
        animation: none !important;
      }
      .hay-ed .hq, .hay-ed .up { opacity: 1; transform: none; }
    
}