/* ===========================================================================
   aiads.co.il
   ---------------------------------------------------------------------------
   העולם נגזר משלושת האתרים שמתן הביא: K Logic, אנגורה מדיה ו-KlientBoost.
   מה שמשותף לשלושתם, ומה שקובע כאן הכול:

   1. רקע לבן. שלושתם. לא נייר, לא כהה, לא שמנת.
   2. סאנס גיאומטרי כבד מאוד לכותרות. אפס סריפים בשלושתם.
   3. צבע רווי ועליז כשדות, לא כקו דק ולא כגרדיינט מעושן.
   4. כותרת ממורכזת וגדולה, ומתחתיה כפתור אחד גדול בצבע חם.
   5. אופי משוחק: אריחים גיאומטריים, צורות, ביטחון עצמי בלי כובד.

   מה שלא נלקח מהם: אנגורה מוכרת ברשת מספרי לקוחות. כאן אסור להזכיר לקוחות
   ואסור להמציא מספרים, ולכן ההוכחה כאן היא עבודה ולא אחוזים.

   הגופנים: Rubik במשקל 800 לכותרות, והוא הקרוב ביותר בעברית לאופי הגיאומטרי
   החם של GT Walsheim שמריץ K Logic ולמשקל שמריץ KlientBoost. Assistant לגוף,
   כי גוף וכותרת באותו גופן מוחקים את ההבחנה ביניהם.
   =========================================================================== */

/* --------------------------------------------------------------- הגופנים */

@font-face {
  font-family: "Assistant";
  src: url("/assets/fonts/assistant-var-hebrew.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  src: url("/assets/fonts/assistant-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-400-hebrew.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-700-hebrew.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-800-hebrew.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-800-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-900-hebrew.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-900-latin.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ---------------------------------------------------------------- הצבע */

:root {
  --bg:#FFFFFF;
  --bg-2:#F4F6FB;
  --ink:#10131A;
  --ink-2:#48505F;
  /* נמדד: 5.01 על הרקע השני, 5.42 על לבן. הערך הקודם נפל ל-4.40. */
  --ink-3:#626A7D;

  /* חמישה צבעים רוויים, בדיוק כמו אריחי K Logic. הם שדות, לא קווים. */
  --blue:#2563FF;
  --coral:#FF5A5A;
  --yellow:#FFC531;
  --mint:#25C8A5;
  --violet:#8B5CF6;

  /* הכפתור החם והמנוגד, אותו תפקיד שהאלמוג ממלא ב-KlientBoost. */
  --cta:#FF5A5A;
  --cta-ink:#7A1414;

  /* הגוון העמוק של כל צבע: צל הדפוס המוזז שכל צורה באתר נושאת. */
  --blue-deep:#173FBF;
  --coral-deep:#C43C3C;
  --yellow-deep:#D69C10;
  --mint-deep:#178E76;
  --violet-deep:#5F35CC;
  /* סגול כשדה עם טקסט לבן צריך להיות כהה במעט מהאריח כדי לעבור AA (5.14). */
  --violet-field:#7C4DE8;
  /* גוון בהיר של כל צבע: קרקע של כרטיס שנושא את צבע הקבוצה שלו. */
  --blue-tint:#E9EFFF;
  --coral-tint:#FFE7E7;
  --yellow-tint:#FFF3CF;
  --mint-tint:#DCF6EF;
  --violet-tint:#EEE8FE;
  /* טקסט משני על שדה צבע: גוון של אותו שדה, לא אפור. */
  --on-ink:#C9CEDA;
  --ease-out:cubic-bezier(.16,.84,.3,1);
  --ease-pop:cubic-bezier(.34,1.5,.64,1);
  --rule5: linear-gradient(90deg,
    var(--blue) 0 20%, var(--mint) 20% 40%, var(--yellow) 40% 60%,
    var(--coral) 60% 80%, var(--violet) 80% 100%);

  --edge:#E3E8F2;
  --radius:14px;
  --radius-lg:24px;
  --gut:clamp(16px, 4vw, 40px);
  --measure:66ch;
  --shadow:0 2px 0 rgba(16,19,26,.06), 0 12px 28px -14px rgba(16,19,26,.35);
}

/* --------------------------------------------------------------- הבסיס */

*,*::before,*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 92px;
  background: var(--bg);
  color: var(--ink);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Assistant", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 17.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1180px, 100% - var(--gut) * 2); margin-inline: auto; }

::selection { background: var(--blue); color: #fff; }
:root { caret-color: var(--blue); accent-color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { inset-inline-start: 0; }

/* ------------------------------------------------------- טיפוגרפיה */

h1, h2, h3, h4 {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(36px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.026em; }
h2 { font-size: clamp(27px, 3.6vw, 44px); letter-spacing: -0.02em; }
h3 { font-size: clamp(20px, 2.1vw, 25px); }

/* יותר אוויר מעל כותרת מאשר מתחתיה: הכותרת שייכת למה שבא אחריה. */
main h2 { margin: 2.4em 0 .45em; }
main h3 { margin: 1.8em 0 .4em; }

/* ספרות: כל מספר שמוצג כמספר (תאריך, מונה, שלב) יושב ב-Rubik כבד עם
   ספרות טבלאיות, כך שהוא נקרא כאובייקט ולא כמילה. */
.num, time, .card-meta, .tl-num, .gl-n, .step-n, .flow-num {
  font-variant-numeric: tabular-nums;
}
.num { font-family: "Rubik", sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
main > p, main > ul, main > ol { max-width: var(--measure); }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }

ul, ol { max-width: var(--measure); padding-inline-start: 1.15em; margin: 0 0 1.2em; }
li { margin-bottom: .45em; }
li::marker { color: var(--blue); }

code {
  font-family: ui-monospace, Menlo, monospace; font-size: .87em;
  background: var(--bg-2); border: 1px solid var(--edge);
  border-radius: 6px; padding: .1em .38em;
}

blockquote { margin: 1.4em 0; padding: 1em 1.2em; background: var(--bg-2); border-radius: var(--radius); }

.answer { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.6; font-weight: 500; max-width: 58ch; margin: 0 0 1.4em; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--ink-2); max-width: 60ch; margin: .6em 0 1.2em; }
.stamp, .checked { font-size: 13px; color: var(--ink-3); display: inline-block; }
.dateline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: .5em 0 1em; font-size: 13.5px; color: var(--ink-3); max-width: none; }
.dateline b { font-weight: 700; color: var(--ink-2); }

/* ---------------------------------------------------------- הכותרת */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--edge);
}
/* חמשת הצבעים כסרגל בראש העמוד. אותו מהלך כמו אריחי הגיבור, בשלושה
   פיקסלים, והוא מה שהופך את הפס הזה לחלק מהעולם ולא להפרדה לבנה. */
.site-head::before {
  content: ""; display: block; height: 5px; background: var(--rule5);
  background-size: 200% 100%; animation: rule-shift 40s linear infinite;
}
.head-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px; padding: 12px 0;
}
/* הכותרת מתכווצת אחרי שגוללים: צל עדין והלוגו קטן במידה, על transform
   בלבד, כי שינוי גובה של כותרת דביקה מזיז את כל העמוד מתחתיה בכל פריים.
   הסקריפט מסמן את html, ובלי סקריפט הכותרת פשוט נשארת כמו שהיא. */
.site-head { transition: box-shadow .28s var(--ease-out); }
html.is-scrolled .site-head { box-shadow: 0 12px 30px -20px rgba(16,19,26,.35); }
html.is-scrolled .logo-mark { transform: scale(.82); }
html.is-scrolled .brand:hover .logo-mark { transform: scale(.82) translateY(-2px) rotate(-4deg); }
/* מד קריאה בעמודי מדריך ומונח: קו כחול בתחתית הכותרת שנמתח עם הגלילה.
   הסקריפט מציב אותו רק כשיש מה לקרוא, ומזיז אותו על scale בלבד. */
.read-progress {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--blue); transform-origin: 100% 50%; scale: 0 1;
  pointer-events: none;
}
/* כרטיסים נוטים מעט אל הסמן. הסקריפט כותב את שתי הזוויות, וכאן רק
   מיושמת הפרספקטיבה. */
.tilt-live.is-tilting { transition: transform .08s linear !important; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px) !important; }
.step-n { transition: transform .5s var(--ease-pop); }
.js-reveal .step.rv .step-n { transform: scale(.4) rotate(-20deg); }
.js-reveal .step.rv.is-in .step-n { transform: none; }
/* הקישורים היו אפורים וקטנים ברצועה רחבה וריקה, עם המותג בקצה אחד
   והבקשה בקצה השני ובלי שום דבר שמחזיק את האמצע. עכשיו הם נושאים משקל
   ויושבים כקבוצה אחת ליד הבקשה, ולא מפוזרים לאורך כל הרוחב. */
.head-inner .site-nav { justify-content: flex-end; gap: 2px; }
.head-inner { gap: clamp(12px, 2vw, 28px); }
@media (min-width: 721px) {
  .head-inner { grid-template-columns: auto 1fr auto; }
  .site-nav { padding-inline-end: 6px; margin-inline-end: 6px; border-inline-end: 1px solid var(--edge); }
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink);
}
.logo-mark { width: 42px; height: 42px; flex: none; display: block; overflow: visible; }
/* הלוקאפ: סימן, שם, ומתחתיו שורת "by boostit" באותו גובה כמו הסימן (42).
   היחס קבוע בכותרת, בפוטר ובתמונת השיתוף. */
.logo-text { display: flex; flex-direction: column; align-items: flex-start; direction: ltr; line-height: 1; }
.logo-word {
  font-family: "Rubik", sans-serif; font-weight: 800; font-size: 26px;
  line-height: 1; letter-spacing: -0.035em;
}
/* נמדד: 5.42 על לבן, ומעל 6 על הדיו בגרסה הבהירה. לא יורד מ-11 פיקסל. */
.logo-by {
  font-family: "Assistant", sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .13em; color: var(--ink-3); margin-top: 4px; white-space: nowrap;
}
.brand:hover .logo-mark { transform: translateY(-2px) rotate(-4deg); }
.logo-mark { transition: transform .28s var(--ease-out); transform-origin: 50% 50%; }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.site-nav a {
  position: relative; font-size: 16.5px; font-weight: 700;
  text-decoration: none; color: var(--ink);
  padding: 9px 15px; border-radius: 10px;
  transition: color .14s ease, background .14s ease;
}
.site-nav a:hover { color: var(--ink); }
/* הקו האלמוגי נמתח מהצד בריחוף ונשאר במקומו בעמוד הנוכחי. */
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 2px;
  height: 3px; border-radius: 3px; background: var(--coral);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ------------------------------------------------------------ הכפתור */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5ch;
  font-family: "Assistant", sans-serif; font-weight: 800; font-size: 17.5px;
  line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 17px 34px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--ink); color: #fff;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease,
              background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .06s; }
/* הכפתור הראשי חייב להיות הדבר הכי בולט במסך שהוא נמצא בו. הצל הכתום
   הוא מה שמרים אותו מהלבן, ובלעדיו הוא נקרא כתווית ולא כהזמנה.
   לבן על האלמוג נמדד 3.06, ולכן התווית היא תמיד טקסט גדול: 19 פיקסל
   במשקל 800, בכל מקום, כולל הכותרת והטופס. */
.btn-primary {
  font-size: 19px; font-weight: 800;
  background: var(--cta); color: #fff; border-color: var(--cta);
  box-shadow: 0 14px 30px -10px rgba(255,90,90,.75);
}
.btn-primary:hover { background: #F04A4A; border-color: #F04A4A; box-shadow: 0 22px 40px -12px rgba(255,90,90,.85); }
/* הכפתור המשני מלא תמיד: דיו על לבן, ולבן על שדה צבעוני. קו מתאר שקוף נפסל. */
.btn-ghost { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 12px 26px -14px rgba(16,19,26,.6); }
.btn-ghost:hover { background: #262C3A; border-color: #262C3A; color: #fff; box-shadow: 0 18px 32px -14px rgba(16,19,26,.7); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0 0; }
.cta-row-mid { justify-content: center; }
/* גודל אחד לכפתור הראשי בכל מקום, כולל הגיבור: 19 פיקסל, 800, אותו ריפוד.
   מה שמשתנה בגיבור הוא המרחק סביבו, לא הכפתור. */
.btn-primary { padding: 18px 38px; }

/* -------------------------------------------------------------- הגיבור */

.hero-wrap { position: relative; overflow: hidden; padding: clamp(44px, 8vw, 116px) 0 clamp(36px, 5vw, 72px); }
.hero { position: relative; z-index: 1; text-align: center; }
.hero h1 {
  margin-inline: auto; max-width: 15ch;
  font-size: clamp(42px, 6.6vw, 94px); line-height: .98; letter-spacing: -0.03em;
}
/* מילת המפתח מקבלת סימון מרקר צהוב שנמתח אחרי שהכותרת נחתה. צבע כשדה,
   לא כצבע אות. */
.hl { position: relative; z-index: 0; display: inline-block; padding: 0 .12em; color: var(--ink); }
/* הכוונון האנכי של הסרגל הוא עניין עברי. נמדד על הפיקסלים בשלושה
   רוחבים: בערכים הקודמים (.08em למעלה, .04em למטה) הסרגל התחיל 11
   פיקסל מעל ראש האות ב-1440 וסיים 5 פיקסל בלבד מתחת לרגל של הכ"ף
   הסופית - 2 פיקסל בלבד ב-390. כלומר הוא ישב גבוה מדי ונגמר בדיוק על
   האות היורדת, וזה נקרא כחיתוך. בעברית הרצועה צריכה להתחיל נמוך יותר
   וגם להיגמר נמוך יותר. הגובה הכולל של הרצועה כמעט לא משתנה - זה אותו
   ציור, מוזז. */
.hl::before {
  content: ""; position: absolute; z-index: -1; inset: .112em -.04em .008em;
  background: var(--yellow); border-radius: .14em;
  transform: rotate(-1.6deg) scaleX(0); transform-origin: 100% 50%;
  animation: mark .55s cubic-bezier(.2,.8,.2,1) .5s forwards;
}
/* המשפט הראשון הוא טענה עם תאריך, וב-46ch הוא נשבר כך שמילה אחת
   נופלת לבד בראש השורה השנייה. 54 מחזיק אותו שלם, וה-balance מאזן את שאר
   השורות במקום להשאיר זנב קצר. */
.hero-sub { margin: 1.1em auto 0; max-width: 54ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.hero-sub strong { color: var(--ink); }
.hero .cta-row { justify-content: center; margin-top: 2em; }

/* שדות הצבע: שני אשכולות גדולים משני צידי הכותרת. כל צורה נושאת צל דפוס
   מוזז בגוון עמוק של עצמה, וזו שפת האיור של כל האתר, מכאן ועד שלוש הסצנות.
   דקורטיבי בלבד: מוסתר מקוראי מסך, ונעלם בצמצום תנועה. */
.hero-field {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  /* נמדד מול תיבת הכותרת ב-1000, 1200 ו-1440: האשכול נגמר לפני שהיא מתחילה. */
  width: clamp(150px, 16vw, 300px);
}
.hero-field-s { inset-inline-start: 1vw; }
.hero-field-e { inset-inline-end: 1vw; }
.hf {
  position: absolute; display: block; aspect-ratio: 1;
  rotate: var(--r, 0deg);
  /* קפיצה פנימה על scale ו-rotate, ואחריה ריחוף איטי על translate בלבד:
     שתי אנימציות על מאפיינים שונים, ולכן הן לא נלחמות זו בזו. לכל צורה
     מחזור משלו, ולכן האשכול נושם ולא מתקתק. */
  animation: pop .8s cubic-bezier(.34,1.5,.64,1) var(--d, 0ms) both,
             drift var(--dur, 11s) ease-in-out calc(var(--d, 0ms) + .8s) infinite alternate;
}
.hf-sq { border-radius: 22%; }
.hf-ci { border-radius: 50%; }
.hf-qc { border-radius: 50% 50% 12% 50%; }
.hf-pill { border-radius: 999px; aspect-ratio: 1 / 1.75; }
.hf-blue   { background: var(--blue);   box-shadow: -10px 12px 0 var(--blue-deep); }
.hf-coral  { background: var(--coral);  box-shadow: -10px 12px 0 var(--coral-deep); }
.hf-yellow { background: var(--yellow); box-shadow: -10px 12px 0 var(--yellow-deep); }
.hf-mint   { background: var(--mint);   box-shadow: -10px 12px 0 var(--mint-deep); }
.hf-violet { background: var(--violet); box-shadow: -10px 12px 0 var(--violet-deep); }
/* בטלפון האשכולות נעלמים, ופס אחד של חמש הצורות יושב מתחת לכפתור. */
.hero-band { display: none; }
.hero-band .hf { position: static; width: 52px; }
.hero-band .hf-pill { width: 40px; }

/* ---------------------------------------------------- הלוח, מוקטן בכוונה */

.board { padding: clamp(24px, 4vw, 44px) 0; background: var(--bg-2); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 1em; }
.board-head h2 { font-size: clamp(21px, 2.3vw, 27px); margin: 0; }

.pf-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pf-card {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 12px 14px; text-decoration: none; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.pf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pf-top { display: contents; }
.mono { font-family: "Rubik", sans-serif; font-size: 12px; background: var(--ink); color: #fff; border-radius: 7px; padding: 4px 7px; min-width: 3.4ch; text-align: center; }
.pf-id { display: flex; flex-direction: column; line-height: 1.25; }
.pf-id b { font-weight: 700; font-size: 16px; }
.pf-id span { font-size: 12.5px; color: var(--ink-3); }
.pill { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 11px; white-space: nowrap; margin-inline-start: auto; }
.pill-live { background: rgba(37,200,165,.18); color: #0A5F4E; }
.pill-abroad { background: var(--bg-2); color: var(--ink-3); }
.pill-closed { background: rgba(255,90,90,.18); color: var(--cta-ink); }
.pf-metric { display: none; }
.board-foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 1em; font-size: 13.5px; color: var(--ink-3); }

/* -------------------------------------------------------------- טבלאות */

.table-scroll { overflow-x: auto; margin: 1.4em 0 2em; }
table.status { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 15px; }
table.status th, table.status td { text-align: start; vertical-align: top; padding: 14px; background: #fff; border-block: 1px solid var(--edge); }
table.status th:first-child, table.status td:first-child { border-inline-start: 1px solid var(--edge); border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
table.status th:last-child, table.status td:last-child { border-inline-end: 1px solid var(--edge); border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
table.status thead th { background: transparent; border: 0; font-family: "Rubik", sans-serif; font-size: 13px; color: var(--ink-3); padding-block: 0; }
table.status tr.row-live th, table.status tr.row-live td { background: rgba(37,200,165,.09); border-color: rgba(37,200,165,.45); }

.row-id { display: flex; align-items: flex-start; gap: 10px; }
.pf-name { font-weight: 700; font-size: 16px; display: block; }
.pf-note { font-size: 12.5px; color: var(--ink-3); display: block; }
.pf-more { font-size: 12.5px; display: inline-block; margin-top: 6px; }
.cell-detail { max-width: 46ch; }
.cell-meta { max-width: 26ch; font-size: 13.5px; color: var(--ink-2); }
.cell-meta .checked { display: block; margin-top: 5px; }

.tbl { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--edge); border-radius: var(--radius-lg); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: start; vertical-align: top; padding: 13px 14px; border-bottom: 1px solid var(--edge); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl thead th { background: var(--bg-2); font-family: "Rubik", sans-serif; font-size: 13px; }

/* -------------------------------------------------------------- כרטיסים */

.cards, .grid-2, .grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 1.3em 0 2em; }
article.card, .card {
  position: relative; background: #fff; border: 1.5px solid var(--edge); border-radius: 26px;
  padding: 30px 22px 22px;
  transition: transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .22s ease, border-color .22s ease;
}
/* לשונית צבע תלויה מהקצה העליון של כל כרטיס, בסבב של חמשת הצבעים.
   בריחוף היא נמשכת כלפי מטה. */
.card::before {
  content: ""; position: absolute; top: -1.5px; inset-inline-start: 22px;
  width: 36px; height: 10px; border-radius: 0 0 9px 9px; background: var(--blue);
  transform-origin: 50% 0; transition: transform .25s cubic-bezier(.34,1.5,.64,1);
}
.cards > :nth-child(5n+2)::before, .grid-2 > :nth-child(5n+2)::before { background: var(--mint); }
.cards > :nth-child(5n+3)::before, .grid-2 > :nth-child(5n+3)::before { background: var(--yellow); }
.cards > :nth-child(5n+4)::before, .grid-2 > :nth-child(5n+4)::before { background: var(--violet); }
.cards > :nth-child(5n+5)::before, .grid-2 > :nth-child(5n+5)::before { background: var(--coral); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { transform: scaleY(1.8); }
.card h3 { margin: 0 0 .35em; font-size: 19.5px; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: none; }
.card-link {
  text-decoration: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 92% / 0 2.5px;
  transition: background-size .32s var(--ease-out);
}
.card:hover .card-link, .trust > div:hover .card-link { background-size: 100% 2.5px; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-meta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: .7em; font-size: 12.5px; color: var(--ink-3); }
.card-kicker { font-weight: 700; color: var(--blue); }

/* --------------------------------------------------------------- ניווט */

.crumbs { font-size: 13px; color: var(--ink-3); margin: 1.2em 0 .3em; }
.crumbs a { color: var(--ink-3); }
.toc { background: var(--bg-2); border-radius: var(--radius-lg); padding: 18px 22px; margin: 1.6em 0; }
.toc-t { font-family: "Rubik", sans-serif; font-size: 14px; margin: 0 0 .5em; }
.toc ol { margin: 0; padding-inline-start: 1.2em; columns: 2; column-gap: 34px; max-width: none; }
.toc li { font-size: 14.5px; break-inside: avoid; }
.prevnext { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--edge); font-size: 14.5px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 2.2em; }
.section-head h2 { margin: 0 0 .4em; }
.more { font-size: 14px; }
.page-top { padding-top: .4em; }
.post { max-width: none; }
.card-body { display: block; }


/* -------------------------------------------------------------- מילון */

.gterm { display: block; padding: 13px 16px; margin-bottom: 8px; background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.gterm:hover { border-color: var(--blue); }
.gterm b { font-weight: 700; }
.gterm span { color: var(--ink-3); font-size: 13.5px; }

/* ------------------------------------------------------- ווידג'טים */

.w { background: var(--bg-2); border-radius: var(--radius-lg); padding: clamp(18px, 2.6vw, 28px); margin: 2em 0; }
.w h3 { margin: 0 0 .3em; }
.w-lede { font-size: 15px; color: var(--ink-2); max-width: 58ch; }
.w-note { font-size: 13px; color: var(--ink-3); margin: 1em 0 0; max-width: none; }
.w-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: .9em 0; }
.w-input { flex: 1 1 260px; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--ink); background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); padding: 12px 14px; min-height: 46px; resize: vertical; }
.w-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(37,99,255,.15); }
.w-input.is-code { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; direction: ltr; text-align: left; }
.w-out { margin-top: 1em; }
.w-empty { color: var(--ink-3); font-size: 15px; }
.w-verdict { display: inline-flex; flex-direction: column; gap: 7px; font-weight: 700; font-size: 15px; border-radius: var(--radius); padding: 10px 16px; margin-bottom: .8em; background: rgba(37,200,165,.18); color: #0A5F4E; }
.w-verdict.is-warn { background: rgba(255,197,49,.26); color: #6B4C00; }
.w-verdict.is-bad { background: rgba(255,90,90,.18); color: var(--cta-ink); }
.w-gauge { display: block; height: 8px; border-radius: 999px; background: rgba(16,19,26,.12); }
.w-gauge > span { display: block; height: 100%; border-radius: 999px; width: calc(var(--v,0) * 100%); background: currentColor; }
.w-checks { list-style: none; padding: 0; margin: 0; max-width: none; }
.w-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--edge); font-size: 14.5px; }
.w-checks li:last-child { border-bottom: 0; }
.w-checks li.is-ok { color: var(--ink-2); }
.w-checks li.is-bad { color: var(--ink); font-weight: 500; }
.w-mark { width: 1.05em; height: 1.05em; flex: none; margin-top: .35em; }
.w-checks li.is-ok .w-mark { color: var(--mint); }
.w-checks li.is-bad .w-mark { color: var(--coral); }

.flow-track { display: grid; gap: 8px; margin: 1em 0; }
.flow-step { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); padding: 12px 14px; }
.flow-num { font-family: "Rubik", sans-serif; font-size: 13px; background: var(--bg-2); border-radius: 999px; padding: 3px 10px; }
.flow-step[aria-current="step"] { border-color: var(--blue); }
.flow-step[aria-current="step"] .flow-num { background: var(--blue); color: #fff; }
.flow-body { font-size: 14.5px; }

.tl { display: grid; gap: 6px; margin-top: 1em; }
.tl-row { display: grid; grid-template-columns: 9ch 1fr 2fr; gap: 12px; align-items: center; font-size: 14px; }
.tl-date { font-size: 12.5px; color: var(--ink-3); }
.tl-barwrap { display: flex; align-items: center; gap: 8px; }
.tl-bar { height: 10px; border-radius: 999px; width: var(--w); min-width: 4px; background: var(--blue); }
.tl-down .tl-bar { background: var(--coral); }
.tl-num { font-weight: 700; font-size: 14px; }
.tl-label { color: var(--ink-2); }

/* ---------------------------------------------------------- טופס הליד */

/* התוויות יושבות בתוך השדות, כמו שמתן ביקש. הן לא נמחקות: כל שדה שומר
   תווית אמיתית שמוסתרת ויזואלית, כך שקורא מסך עדיין מכריז אותה. placeholder
   לבדו אינו תווית. */
.lead { position: relative; background: var(--bg-2); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); margin: 1.6em 0; }
.lead-intro { font-size: 15px; color: var(--ink-2); max-width: 52ch; }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 10px; }
.lead label, .lead-wide { display: block; }
.lead label > span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lead input, .lead textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  padding: 15px 16px; min-height: 54px;
  transition: box-shadow .14s ease, background .14s ease;
}
.lead textarea { min-height: 104px; resize: none; line-height: 1.55; }
.lead input::placeholder, .lead textarea::placeholder { color: var(--ink-3); opacity: 1; }
.lead input:hover, .lead textarea:hover { box-shadow: inset 0 0 0 1.5px #C9D3E6; }
.lead input:focus, .lead textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(37,99,255,.14);
}
.lead input[type="email"], .lead input[type="url"], .lead input[type="tel"] {
  direction: ltr; text-align: right;
}
.lead input[type="email"]::placeholder, .lead input[type="url"]::placeholder,
.lead input[type="tel"]::placeholder { direction: rtl; text-align: right; }
.lead .btn { margin-top: 14px; }
.lead-trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-note { font-size: 14.5px; margin: .9em 0 0; }
.lead-note.is-bad { color: var(--cta-ink); font-weight: 500; }
.lead-note.is-ok { color: #0A5F4E; font-weight: 700; }
.lead-legal { font-size: 12.5px; color: var(--ink-3); margin: 1em 0 0; line-height: 1.5; }

/* ------------------------------------------------- שירותים ותהליך */

/* שני שדות צבע גדולים, כחול ומנטה, מיד אחרי הגיבור. לא כרטיסים על רקע אפור
   אלא שני משטחים שכל אחד נושא צבע משלו, צורה משלו וכפתור משלו. */
.svc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; margin: clamp(8px, 2vw, 24px) 0 clamp(28px, 4vw, 48px);
}
.svc-col {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.6vw, 48px); border-radius: 34px; min-height: 340px;
  background: var(--blue); color: #fff;
}
.svc-col:nth-child(2) { background: var(--mint); color: var(--ink); }
/* הכותרת פותחת. הצורה הייתה 62 פיקסל של צבע רווי מעל הכותרת, כך שהדבר
   הראשון שהעין נחתה עליו לא נשא מידע, והמשפט שאומר מה השירות הגיע שני.
   היא עוברת לפינה כמבטא. */
.svc-col h2 {
  font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 .5em; color: inherit;
  letter-spacing: -0.022em; max-width: 13ch; padding-inline-end: 74px;
}
.svc-col h2, .svc-col p, .svc-col .btn { position: relative; z-index: 1; }
.svc-mark {
  position: absolute; inset-block-start: clamp(28px, 3.6vw, 48px);
  inset-inline-end: clamp(28px, 3.6vw, 48px);
  width: 54px; height: 54px; z-index: 1;
}
/* בלי opacity. הטקסט בעמודה הכחולה היה לבן ב-92 אחוז, וזה נמדד 4.37 על
   הכחול. עכשיו לבן מלא, 4.88. בעמודה המנטה זה דיו מלא במקום 92 אחוז,
   שממילא עבר (7.75). ה-opacity הזה גם יצר הקשר ערימה מיותר על אלמנט
   שסצנת החשיפה מזיזה. */
.svc-col p { color: inherit; font-size: 17px; max-width: 38ch; margin-bottom: 1.4em; }
.svc-col::after {
  content: ""; position: absolute; z-index: -1;
  inset-inline-end: -18%; bottom: -34%; width: 68%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(255,255,255,.14);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.svc-col:nth-child(2)::after { background: rgba(16,19,26,.08); border-radius: 30%; transform: rotate(12deg); }
.svc-col { transition: transform .18s cubic-bezier(.16,.84,.3,1), box-shadow .18s ease; }
.svc-col:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(16,19,26,.55); }
.svc-col:hover::after { transform: scale(1.12); }
.svc-col:nth-child(2):hover::after { transform: rotate(20deg) scale(1.1); }
.svc-mark { display: block; width: 84px; height: 84px; transition: transform .35s cubic-bezier(.34,1.5,.64,1); }
.svc-col:hover .svc-mark { transform: rotate(-12deg) scale(1.12); }
.svc-blue { background: var(--yellow); border-radius: 50% 50% 12% 50%; box-shadow: -8px 10px 0 var(--yellow-deep); }
.svc-coral { background: var(--coral); border-radius: 12% 50% 50% 50%; box-shadow: -8px 10px 0 var(--coral-deep); }
.svc-col .btn-ghost { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
.svc-col .btn-ghost:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.svc-col:nth-child(2) .btn-ghost { background: var(--ink); border-color: var(--ink); color: #fff; }
.svc-col:nth-child(2) .btn-ghost:hover { background: #262C3A; border-color: #262C3A; color: #fff; }

/* ארבעת השלבים נערמים: כל שלב נדבק לראש המסך והבא עולה עליו, כך שהגלילה
   עצמה הופכת לרצף. זה הרגע הדביק היחיד באתר. */
.steps { display: grid; gap: 18px; margin: 1.4em 0 clamp(40px, 6vw, 80px); counter-reset: st; }
.step {
  --stick: 0px;
  position: sticky; top: calc(92px + var(--stick)); isolation: isolate;
  counter-increment: st;
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: clamp(16px, 2.6vw, 34px);
  border-radius: 30px; overflow: hidden;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 42px);
}
.step:nth-child(2) { --stick: 16px; }
.step:nth-child(3) { --stick: 32px; }
.step:nth-child(4) { --stick: 48px; }
.step h3 { margin: 0 0 .3em; font-size: clamp(23px, 2.7vw, 32px); color: inherit; }
/* אותו דין כמו בעמודת השירות: הטקסט בשלב הכחול היה לבן ב-94 אחוז ונמדד
   4.49 על הכחול, כלומר נכשל AA בשערה. בלי אלפא הוא 4.88. */
.step p { margin: 0; max-width: 56ch; font-size: 16.5px; color: inherit; }
.step-n {
  font-family: "Rubik", sans-serif; font-weight: 800; font-size: clamp(22px, 2.4vw, 30px);
  background: var(--ink); color: #fff;
  width: 1.9em; height: 1.9em; border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: -6px 8px 0 rgba(16,19,26,.22);
}
/* הספרה הגדולה ברקע: אותו מספר, מודפס בענק בפינה. */
.step::after {
  content: counter(st); position: absolute; z-index: -1;
  inset-inline-end: -.04em; bottom: -.3em;
  font-family: "Rubik", sans-serif; font-weight: 800; line-height: 1;
  font-size: clamp(120px, 16vw, 220px); color: rgba(255,255,255,.34);
}
.step-mint { background: var(--mint); color: var(--ink); }
.step-yellow { background: var(--yellow); color: var(--ink); }
.step-violet { background: var(--violet-field); color: #fff; }
.step-blue { background: var(--blue); color: #fff; }
.step-violet .step-n, .step-blue .step-n { background: #fff; color: var(--ink); box-shadow: -6px 8px 0 rgba(16,19,26,.3); }
.step-violet::after, .step-blue::after { color: rgba(16,19,26,.18); }

/* ---------------------------------------------------- עמודי מכירה */

/* עומד בפני עצמו. כשהוא ישב בתוך הניווט הוא ירש ממנו את הפינה המעוגלת
   ואת ביטול הקו התחתון, וברגע שיצא משם הוא חזר להיות מלבן עם קו תחתון.
   19 פיקסל כמו כל כפתור ראשי: לבן על האלמוג עובר רק כטקסט גדול. */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cta); color: #fff; font-weight: 800;
  font-family: "Assistant", sans-serif; font-size: 19px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  padding: 11px 22px; border-radius: 999px; margin-inline-start: 8px;
  box-shadow: 0 8px 18px -8px rgba(255,90,90,.8);
  transition: background .14s ease, transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .14s ease;
}
.nav-cta:hover { background: #F04A4A; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(255,90,90,.9); }

/* גיבור של עמוד שירות: טענה גדולה מצד אחד, כרזה מהצד השני. */
.sell-hero {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(28px, 5vw, 72px) 0 clamp(20px, 3vw, 40px);
}
.sell-hero h1 { font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -0.03em; line-height: 1; }
.sell-hero .lede { font-size: clamp(18px, 2vw, 21.5px); margin-top: .8em; max-width: 44ch; }
.sell-hero .cta-row { margin-top: 1.4em; }

/* הסצנה: כרטיס לבן על צל דיו, ומאחוריו שדה צבע מוטה. בגיבור השדה רווי,
   בשורת יכולת הוא גוון בהיר של אותו צבע. הצורות בפנים קופצות פנימה
   כשהסצנה נכנסת למסך. */
.art { position: relative; isolation: isolate; padding: 4% 3% 5% 2%; }
.art svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; overflow: visible; }
.art::before {
  content: ""; position: absolute; z-index: 0; inset: 8% -3% 2% 3%;
  border-radius: 44px; transform: rotate(-3deg);
  background: rgba(37,99,255,.10);
}
.art-two::before { background: rgba(139,92,246,.13); transform: rotate(2.5deg); }
.art-account::before { background: rgba(37,200,165,.16); }
.sell-hero .art-answer::before { background: var(--yellow); }
.sell-hero .art-two::before { background: var(--violet); }
.sell-hero .art-account::before { background: var(--mint); }
.art g { transform-box: fill-box; transform-origin: 50% 60%; }

/* שורת יכולת: איור וטקסט לסירוגין. */
.feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
  margin: clamp(40px, 6vw, 88px) 0;
}
.feature:nth-of-type(even) .art { order: 2; }
.feature h2 { margin: 0 0 .4em; }
.feature p { font-size: 16.5px; color: var(--ink-2); }
.feature ul { margin-top: .8em; }
.feature li { font-size: 16px; }

/* בלוקי הביטחון: שלושה שדות צבע, לא שלושה כרטיסים על אפור. כחול עם
   טקסט לבן, צהוב ומנטה עם דיו, בסבב. לכל שדה צורה משלו בפינה עם צל דפוס,
   וצורת רפאים גדולה שנחתכת בקצה, כמו בשדות השירות שמתחת לגיבור. הפינה
   החדה נשארת: זה שדה, לא כרטיס תבניתי. */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 1.6em 0 2.6em; }
.trust > div {
  --f: var(--blue); --f-deep: var(--blue-deep);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--f); color: #fff;
  border-radius: 30px 30px 30px 10px;
  padding: 84px 26px 28px; min-height: 250px;
  transition: transform .26s var(--ease-pop), box-shadow .26s ease;
}
.trust > div::before {
  content: ""; position: absolute; top: 24px; inset-inline-start: 26px;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--yellow); box-shadow: -6px 7px 0 var(--yellow-deep);
  transform: rotate(-8deg);
  transition: transform .4s var(--ease-pop);
}
.trust > div::after {
  content: ""; position: absolute; z-index: -1;
  inset-inline-end: -16%; bottom: -30%; width: 54%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(255,255,255,.14);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.trust > div:nth-child(4n+2) { --f: var(--yellow); --f-deep: var(--yellow-deep); color: var(--ink); }
.trust > div:nth-child(4n+2)::before { background: var(--coral); border-radius: 50%; box-shadow: -6px 7px 0 var(--coral-deep); }
.trust > div:nth-child(4n+2)::after { background: rgba(16,19,26,.08); border-radius: 28%; transform: rotate(14deg); }
.trust > div:nth-child(4n+3) { --f: var(--mint); --f-deep: var(--mint-deep); color: var(--ink); }
.trust > div:nth-child(4n+3)::before { background: var(--violet); border-radius: 50% 50% 12% 50%; box-shadow: -6px 7px 0 var(--violet-deep); }
.trust > div:nth-child(4n+3)::after { background: rgba(16,19,26,.09); border-radius: 50% 50% 8% 50%; transform: rotate(-20deg); }
.trust > div:nth-child(4n+4) { --f: var(--violet-field); --f-deep: var(--violet-deep); color: #fff; }
.trust > div:nth-child(4n+4)::before { background: var(--mint); border-radius: 999px; width: 30px; height: 46px; box-shadow: -6px 7px 0 var(--mint-deep); }
.trust > div:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(16,19,26,.55); }
.trust > div:hover::before { transform: rotate(10deg) scale(1.18); }
.trust > div:hover::after { transform: scale(1.14); }
.trust > div:nth-child(4n+2):hover::after { transform: rotate(22deg) scale(1.12); }
.trust > div:nth-child(4n+3):hover::after { transform: rotate(-30deg) scale(1.12); }
.trust h3 { font-size: 23px; margin: 0 0 .35em; color: inherit; letter-spacing: -0.018em; }
/* טקסט משני על שדה צבע: לבן מלא על כחול ועל סגול (נמדד 4.88 ו-5.14; כל
   גוון בהיר יותר נפל מתחת ל-4.5), ודיו על צהוב ועל מנטה. ההבדל מהכותרת
   הוא גודל ומשקל, לא צבע. */
.trust > div p { margin: 0; font-size: 16px; line-height: 1.6; color: #fff; max-width: none; }
.trust > div:nth-child(4n+2) p, .trust > div:nth-child(4n+3) p { color: var(--ink); }
.trust a:not(.btn) { color: inherit; }
/* הכפתור המשני בתוך שדה: לבן על כחול וסגול, דיו על צהוב ומנטה. */
.trust .btn-ghost { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
.trust .btn-ghost:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.trust > div:nth-child(4n+2) .btn-ghost, .trust > div:nth-child(4n+3) .btn-ghost { background: var(--ink); border-color: var(--ink); color: #fff; }
.trust > div:nth-child(4n+2) .btn-ghost:hover, .trust > div:nth-child(4n+3) .btn-ghost:hover { background: #262C3A; border-color: #262C3A; }

/* ----- הוואריאנט הרצף: .trust.steps
   שני בלוקים באותו עמוד שאומרים שני דברים שונים לא יכולים להיראות אותו דבר.
   "איך זה עובד אצלנו" הוא רצף שצריך לקרוא לפי סדר, ו"למי זה מתאים"
   הוא שלוש אפשרויות מקבילות. לכן הרצף הוא מסלול על נייר: מספר ממוספר,
   קרקע בהירה ופינה חדה בצד השני, ושדות הצבע הרוויים נשמרים לקבוצה שאינה רצף. */
.trust.steps { counter-reset: st; }
.trust.steps > div {
  counter-increment: st;
  background: var(--blue-tint); color: var(--ink);
  border-radius: 10px 30px 30px 30px;
  padding: 26px 26px 28px; min-height: 0;
}
.trust.steps > div:nth-child(4n+2) { background: var(--mint-tint); }
.trust.steps > div:nth-child(4n+3) { background: var(--yellow-tint); }
.trust.steps > div:nth-child(4n+4) { background: var(--violet-tint); }
/* הצורה המופשטת מתחלפת במספר השלב, והוא בזרם הרגיל ולא ממוקם מוחלט. */
.trust.steps > div::before {
  content: counter(st, decimal-leading-zero) "";
  position: static; width: auto; height: auto;
  background: none; box-shadow: none; border-radius: 0;
  transform: none; transition: transform .3s var(--ease-pop);
  font-size: 15px; font-weight: 800; letter-spacing: .06em;
  line-height: 1; color: var(--blue-deep);
  display: block; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 2px solid currentColor;
  width: 2.6em; /* הקו נעצר אחרי המספר, ולא חוצה את הכרטיס. */
}
.trust.steps > div:nth-child(4n+2)::before { color: var(--mint-deep); }
.trust.steps > div:nth-child(4n+3)::before { color: var(--yellow-deep); }
.trust.steps > div:nth-child(4n+4)::before { color: var(--violet-deep); }
/* צורת הרפאים שייכת לשפת השדות, ולכן אינה מופיעה כאן. */
.trust.steps > div::after { display: none; }
.trust.steps > div p, .trust.steps > div:nth-child(4n+2) p,
.trust.steps > div:nth-child(4n+3) p { color: var(--ink-2); }
.trust.steps h3 { font-size: 21px; }
.trust.steps > div:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -24px rgba(16,19,26,.5); }
.trust.steps > div:hover::before { transform: none; }
.trust.steps .btn-ghost, .trust.steps > div:nth-child(4n+2) .btn-ghost,
.trust.steps > div:nth-child(4n+3) .btn-ghost {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* ---------------------------------------------- לאן זה הולך */

/* רצועת דיו ברוחב המסך כולו, עם קצה אלכסוני למעלה ולמטה. זה השבר היחיד
   בקצב העמוד, ולכן הוא היחיד שיוצא מהמידה. */
.future {
  position: relative; background: var(--ink); color: #fff;
  padding: calc(clamp(28px, 4.4vw, 60px) + 3.5vw) var(--gut);
  margin: clamp(40px, 6vw, 88px) 0;
  clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
}
@supports (width: 1cqw) {
  body { container-type: inline-size; }
  .future { width: 100cqw; margin-inline: calc(50% - 50cqw); }
}
.future > * { width: min(1180px, 100%); margin-inline: auto; }
.future h2 { color: #fff; margin: 0 0 .4em; font-size: clamp(28px, 3.8vw, 48px); }
.future > p { color: rgba(255,255,255,.78); max-width: 58ch; font-size: 17px; margin-bottom: 1.8em; }
.future-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.6vw, 32px); }
.future-grid > div::before { content: ""; display: block; width: 40px; height: 12px; border-radius: 6px; background: var(--blue); margin-bottom: 16px; box-shadow: -4px 5px 0 var(--blue-deep); }
.future-grid > div:nth-child(2)::before { background: var(--coral); box-shadow: -4px 5px 0 var(--coral-deep); }
.future-grid > div:nth-child(3)::before { background: var(--yellow); box-shadow: -4px 5px 0 var(--yellow-deep); }
.future-grid > div:nth-child(4)::before { background: var(--mint); box-shadow: -4px 5px 0 var(--mint-deep); }
.future-grid h3 { color: #fff; font-size: 19px; margin: 0 0 .3em; }
.future-grid p { color: rgba(255,255,255,.72); font-size: 15px; margin: 0; max-width: none; }
.future .cta-row { margin-top: 1.8em; }
.future-src { font-size: 13.5px; color: rgba(255,255,255,.6); margin: 1.8em auto 0; max-width: 72ch; }
.future-src a { color: rgba(255,255,255,.85); }

/* ------------------------------------------------------ יצירת קשר */

/* הבקשה, בכל עמוד: שדה כחול, טופס פתוח על כרטיס לבן, ואריח צהוב מוטה
   מאחוריו. אותה שפה כמו הגיבור, כי זה הבלוק שנראה יותר מכל בלוק אחר. */
.contact {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
  background: var(--blue); color: #fff;
  border-radius: 36px;
  padding: clamp(30px, 4.4vw, 64px) clamp(26px, 3.6vw, 56px);
  margin: clamp(40px, 6vw, 88px) 0 1em;
}
.contact::before {
  content: ""; position: absolute; z-index: -1;
  width: 200px; aspect-ratio: 1; border-radius: 50%;
  background: var(--violet); box-shadow: -10px 12px 0 var(--violet-deep);
  inset-inline-start: -70px; top: -80px;
}
.contact::after {
  content: ""; position: absolute; z-index: -1;
  width: 150px; aspect-ratio: 1; border-radius: 26%;
  background: var(--mint); box-shadow: -10px 12px 0 var(--mint-deep);
  inset-inline-start: 34%; bottom: -70px; transform: rotate(16deg);
}
.contact h2 { color: #fff; margin: 0 0 .4em; font-size: clamp(30px, 4.2vw, 52px); }
.contact > div > p { color: #fff; font-size: 17.5px; max-width: 40ch; }
.contact-alt { font-size: 15px; color: #fff; margin-top: 1.4em; }
.contact-alt a { color: #fff; }
.contact-points { list-style: none; padding: 0; margin: 1.3em 0 0; max-width: none; }
/* לבן מלא, בלי אלפא. נמדד על הפיקסלים עצמם: 94 אחוז לבן נופל על הכחול
   (2563FF) ל-4.49, כלומר חסר מאית כדי לעבור AA, וזה חוזר על 335 עמודים.
   לבן מלא על אותו כחול מודד 4.88. שקיפות כאן היא לא "עדינות", היא כשל. */
.contact-points li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 16.5px; color: #fff; margin-bottom: .55em;
}
.contact-points li::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px;
  background: var(--yellow); margin-top: .45em; box-shadow: -3px 4px 0 var(--yellow-deep);
}
.contact-points li:nth-child(2)::before { background: var(--coral); border-radius: 50%; box-shadow: -3px 4px 0 var(--coral-deep); }
.contact-points li:nth-child(3)::before { background: var(--mint); border-radius: 50% 50% 4px 50%; box-shadow: -3px 4px 0 var(--mint-deep); }

/* הטופס: כרטיס לבן על אריח צהוב מוטה, בתוך השדה הכחול. */
.contact .lead {
  position: relative; background: #fff; border-radius: 24px;
  padding: clamp(20px, 2.4vw, 30px); margin: 0;
  box-shadow: 0 24px 54px -26px rgba(0,0,0,.55);
}
.contact .lead::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: var(--yellow); transform: rotate(-2.4deg) translate(-12px, 12px);
}
.contact .lead-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.contact .lead input, .contact .lead textarea {
  background: var(--bg-2); box-shadow: inset 0 0 0 1.5px transparent;
  font-size: 15.5px; min-height: 50px; padding: 14px 15px;
}
.contact .lead input:hover, .contact .lead textarea:hover { box-shadow: inset 0 0 0 1.5px #D6DEEE; }
.contact .lead input:focus, .contact .lead textarea:focus {
  background: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(37,99,255,.16);
}
.contact .lead textarea { min-height: 92px; }
.contact .lead .btn { width: 100%; justify-content: center; margin-top: 12px; }
.contact .lead-note { color: var(--ink-2); }
/* המצב חייב לנצח את ההקשר. לשני הכללים הייתה אותה ספציפיות, ולכן סדר
   הקובץ הכריע, וההודעות נצבעו באפור של השורה המשפטית שמעליהן. הודעת
   שגיאה שנראית כמו טקסט עזר היא הודעה שלא נמסרה. */
.lead .lead-note.is-bad, .contact .lead-note.is-bad {
  color: #C81E1E; font-weight: 700;
}
.lead .lead-note.is-ok, .contact .lead-note.is-ok {
  color: #0A5F4E; font-weight: 800;
}
.contact .lead-legal a { color: var(--ink-2); }

/* --------------------------------------------- ראש עמוד תוכן */

.page-head {
  padding: clamp(26px, 4vw, 52px) 0 clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--edge);
  margin-bottom: clamp(20px, 2.6vw, 34px);
}
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-bottom: .5em; }
.page-head .stamp { display: block; }

/* בלוק הפנייה בתחתית מדריך: אותו שדה כחול, בגרסה שקטה יותר. */
.cta-block {
  background: var(--blue); color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.6vw, 46px); margin: 3em 0 1em;
  text-align: center;
}
.cta-block h2 { color: #fff; margin: 0 0 .4em; font-size: clamp(24px, 2.8vw, 34px); }
.cta-block p { margin: 0 auto 1.3em; max-width: 52ch; color: rgba(255,255,255,.88); font-size: 16.5px; }

/* ------------------------------------- מידת השורה בעמודי מכירה */

/* עמוד מדריך נקרא לרוחב שורה של מדריך. עמוד בית ועמוד מכירה לא:
   שם המידה הצרה נצמדת לימין ומשאירה חצי מסך ריק. */
.home > p, .home > ul, .home > ol,
.sell > p, .sell > ul, .sell > ol {
  max-width: 64ch; margin-inline: auto;
}
.home > h2, .sell > h2, .home > h3, .sell > h3 { text-align: center; }
.home > h2, .sell > h2 { margin-top: 2.6em; }
.home > p, .sell > p { text-align: center; }
.home > ul, .sell > ul { text-align: start; }

/* בתוך רכיב מעוצב המידה נקבעת ברכיב עצמו, לא כאן. */
.home .feature p, .sell .feature p,
.home .trust p, .sell .trust p,
.home .future p, .sell .future p,
.home .contact p, .sell .contact p,
.home .closer p, .sell .closer p { text-align: start; margin-inline: 0; }
.home .closer p, .sell .closer p, .home .future > p, .sell .future > p { margin-inline: auto; }
.home .feature h2, .sell .feature h2,
.home .trust h3, .sell .trust h3,
.home .future h2, .sell .future h2,
.home .contact h2, .sell .contact h2 { text-align: start; }
.home .closer h2, .sell .closer h2 { text-align: center; }

/* ------------------------------------------- עמוד קריאה */

/* המכל הוא מידת השורה, והיא אחת: 800 פיקסל. ב-Assistant בגודל 17.5 זה
   כשמונים תווים בעברית, מידה של מדריך ולא של עיתון. שום דבר בעמוד קריאה
   לא פורץ החוצה: לא טבלה, לא כרטיסים, לא הטופס. טבלה רחבה נגללת לרוחב
   בתוך המידה. עמוד המונח נושא את אותה עמודה, כדי ששני עמודי הקריאה יהיו
   מערכת אחת. */
main.doc { width: min(800px, 100% - var(--gut) * 2); }
main.doc p, main.doc ul, main.doc ol, main.doc .lede, main.doc .answer { max-width: none; }
main.doc .page-head h1 { max-width: none; }
/* הביטול שמעל נחוץ לכל רכיב שיושב בתוך עמוד הקריאה: כרטיס, שדה צבע,
   טבלה ורצועה קובעים מידה משלהם. אבל הוא גם ביטל את המידה על הפרוזה
   עצמה, ואז 800 פיקסל הם 101 תווים בממוצע ו-115 בשיא, ולא כשמונים כמו
   שכתוב כאן למעלה. ch ב-Assistant 17.5 הוא 8.61 פיקסל, ולכן 66ch הם
   568 פיקסל, שהם כ-72 תווים בעברית. המידה חוזרת על זרם הקריאה בלבד:
   ילדים ישירים של עמוד המדריך, ופסקאות ורשימות בתוך סעיף מונח. העמודה
   נשארת 800, הגופן נשאר 17.5, והטבלאות והאריחים לא זזים.
   חמשת הסעיפים המעוצבים (tsec-example וחבריו) מוחרגים במכוון: הם
   כרטיסים, והמידה בתוך כרטיס נקבעת בכרטיס. נמדד: בלי ההחרגה כל אחד
   מהם מתארך ב-30 עד 116 פיקסל, וזה שינוי בציור ולא בשורה. */
main.doc > p, main.doc > ul, main.doc > ol,
main.term .tsec:not([class*="tsec-"]) > p,
main.term .tsec:not([class*="tsec-"]) > ul,
main.term .tsec:not([class*="tsec-"]) > ol {
  max-width: var(--measure);
}
main.doc .tbl, main.doc .table-scroll { width: 100%; margin-inline: 0; overflow-x: auto; }
main.doc .contact, main.term .contact { grid-template-columns: 1fr; }
main.doc .contact::after, main.term .contact::after { display: none; }

/* ------------------------------------------------------------ שאלות */

/* לא אקורדיון חשוף: כל שאלה היא שורה רכה על הרקע השני, והשאלה הפתוחה
   מתהפכת לדיו עם טקסט לבן. כך העין מוצאת את מה שנפתח בלי לחפש. */
.faq { margin: 1.4em 0 2.6em; display: grid; gap: 10px; }
.faq details {
  background: var(--bg-2); border-radius: 22px; overflow: hidden;
  transition: background .22s ease, color .22s ease, transform .22s var(--ease-pop);
}
.faq details:hover { transform: translateX(-4px); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.25; color: var(--ink);
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-inline-start: auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-size: 13px 2.5px, 2.5px 13px;
  background-position: center, center;
  background-repeat: no-repeat;
  box-shadow: -3px 4px 0 rgba(16,19,26,.14);
  transition: transform .3s var(--ease-pop), background-color .2s ease, box-shadow .2s ease;
}
.faq summary:hover::after { transform: rotate(90deg); }
.faq details[open] { background: var(--ink); color: #fff; }
.faq details[open] summary { color: #fff; }
.faq details[open] summary::after {
  transform: rotate(45deg); background-color: var(--yellow);
  box-shadow: -3px 4px 0 var(--yellow-deep);
}
.faq .faq-a { padding: 0 24px 26px; margin: 0; color: var(--on-ink); font-size: 16.5px; max-width: 62ch; }
.faq details[open] .faq-a a { color: var(--yellow); }

/* --------------------------------------------------------------- הפוטר */

/* דיו כהה, לא עוד שדה אפור. הפוטר הוא הדבר האחרון שקוראים לפני שיוצאים,
   ולכן הוא נושא את אותה בקשה כמו כל שאר האתר ולא רק רשימת קישורים. */
.site-foot {
  margin-top: clamp(48px, 7vw, 96px);
  background: var(--ink); color: rgba(255,255,255,.72);
  font-size: 15px;
}
.site-foot::before { content: ""; display: block; height: 6px; background: var(--rule5); }
.foot-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: clamp(22px, 3vw, 46px);
  padding: clamp(38px, 5vw, 66px) 0 clamp(28px, 3.5vw, 44px);
}
.foot-about .brand { color: #fff; margin-bottom: 14px; }
.foot-about .logo-by { color: rgba(255,255,255,.66); }
.foot-about p { max-width: 38ch; color: rgba(255,255,255,.66); font-size: 15px; margin: 0 0 16px; }
.foot-mail { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,.3); padding-bottom: 2px; }
.foot-mail:hover { border-bottom-color: var(--coral); color: var(--coral); }
.foot-h {
  font-family: "Assistant", sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  /* נמדד 6.36 על הדיו. הערך הקודם, .45, נפל ל-4.45. */
  text-transform: uppercase; color: rgba(255,255,255,.56);
  margin: 0 0 14px;
}
.foot-col a {
  display: block; color: rgba(255,255,255,.78); text-decoration: none;
  padding: 5px 0; transition: color .12s ease;
}
.foot-col a:hover { color: #fff; }
.foot-ask p { color: rgba(255,255,255,.66); margin: 0 0 16px; max-width: 26ch; }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-items: baseline; justify-content: space-between;
  padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.12);
}
.foot-by { margin: 0; font-size: 14px; color: rgba(255,255,255,.55); }
.foot-by a { color: rgba(255,255,255,.85); }
.foot-bottom .copy { margin: 0; font-size: 13px; color: rgba(255,255,255,.55); }
/* שלושת הקישורים המשפטיים: שורה שקטה, אבל קריאה. נדרשים בחוק ולא קישוט. */
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.foot-legal a { color: rgba(255,255,255,.78); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 1px; transition: color .12s ease, border-color .12s ease; }
.foot-legal a:hover { color: #fff; border-bottom-color: var(--coral); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------------------------------------------------- מובייל */

/* מתחת ל-980 אין מספיק שוליים לאשכולות הצד, ובמקומם נכנס פס הצורות. */
@media (max-width: 980px) {
  .hero-field { display: none; }
  .hero-band { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-top: 40px; }
}

@media (max-width: 860px) {
  .toc ol { columns: 1; }
  .tl-row { grid-template-columns: 8ch 1fr; }
  .tl-label { grid-column: 1 / -1; }
  .sell-hero, .feature { grid-template-columns: 1fr; }
  .feature:nth-of-type(even) .art { order: 0; }
  .sell-hero .art, .feature .art { width: 100%; max-width: 440px; margin-inline: auto; }
  .contact { grid-template-columns: 1fr; }
  .contact .lead-grid { grid-template-columns: 1fr; }
  .contact::after { display: none; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 116px; }
  /* שתי שורות בטלפון: המותג והבקשה למעלה, והקישורים נגללים מתחתם.
     כשהכפתור היה הפריט האחרון בתוך הגלילה הוא נח על x=-3 ונחתך. */
  .head-inner { grid-template-columns: auto auto; grid-template-areas: "brand cta" "nav nav"; gap: 10px 12px; }
  .head-inner .brand { grid-area: brand; }
  .head-inner .logo-word { font-size: 23px; }
  .head-inner .logo-by { font-size: 11px; margin-top: 3px; }
  .head-inner .nav-cta { grid-area: cta; justify-self: end; }
  .site-nav { grid-area: nav; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .cell-detail, .cell-meta { max-width: none; }
  table.status { min-width: 860px; }
  .scroll-hint { display: block; }
  /* בטלפון השלבים לא נערמים: אין גובה מסך לזה. relative ולא static, כי
     הספרה הגדולה ממוקמת אבסולוטית ובלי עוגן היא בורחת לקצה העמוד. */
  .step { position: relative; top: auto; }
  .svc-col { min-height: 0; }
  .future { clip-path: polygon(0 18px, 100% 0, 100% calc(100% - 18px), 0 100%); padding-block: calc(clamp(28px, 4.4vw, 60px) + 18px); }
  /* בלוקי הביטחון הופכים למסילה אופקית עם הצצה לבלוק הבא. */
  .trust {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; margin-inline: calc(var(--gut) * -1);
    padding: 6px var(--gut) 18px; scrollbar-width: none;
  }
  .trust::-webkit-scrollbar { display: none; }
  .trust > div { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
  /* בעמודי קריאה המסילה נשארת בתוך המידה, כמו כל השאר. */
  main.doc .trust, main.term .trust { margin-inline: 0; padding-inline: 0; }
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .btn { width: 100%; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; }
  .step::after { font-size: 120px; }
  .contact { border-radius: 26px; }
  .contact .lead::before { transform: rotate(-2deg) translate(-8px, 8px); }
}

/* ----------------------------------------------------------- תנועה */

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; scale: .7; rotate: calc(var(--r, 0deg) - 8deg); } to { opacity: 1; scale: 1; rotate: var(--r, 0deg); } }
@keyframes drift { from { translate: 0 0; } 50% { translate: 5px -12px; } to { translate: -4px 7px; } }
/* פס חמשת הצבעים זז לאט מאוד: מחזור של ארבעים שניות על רצועה של חמישה פיקסלים. */
@keyframes rule-shift { from { background-position: 0 0; } to { background-position: 200% 0; } }
/* הטופס מתיישב על האריח הצהוב שלו כשהבלוק נכנס למסך. */
/* האריח זז, לא הכרטיס. תזוזה על הכרטיס יוצרת הקשר ערימה, וההקשר הזה
   העלה את האריח הצהוב מעל הרקע הלבן של הכרטיס ב-335 עמודים. */
@keyframes settle { from { translate: 12px -12px; } to { translate: 0 0; } }
/* תנועה אחת בכל סצנה, בלולאה עם הפסקה. */
@keyframes mv-pulse { 0%, 62%, 100% { scale: 1; } 72% { scale: 1.05; } 84% { scale: 1; } }
@keyframes mv-walk { 0%, 20% { translate: 0 0; } 45% { translate: 40px 0; } 55% { translate: 40px 0; } 80%, 100% { translate: 0 0; } }
@keyframes mv-draw { 0% { stroke-dashoffset: 1; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes mv-tilt { 0%, 55%, 100% { rotate: 0deg; } 70% { rotate: -5deg; } 85% { rotate: 2deg; } }
@keyframes mv-dot { 0%, 100% { opacity: .75; translate: 0 0; } 50% { opacity: .35; translate: 0 -5px; } }
.art .mv-pulse { transform-box: fill-box; transform-origin: center; animation: mv-pulse 4.2s ease-in-out infinite; }
.art .mv-walk { transform-box: fill-box; animation: mv-walk 6s cubic-bezier(.4,0,.2,1) infinite; }
.art .mv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mv-draw 5s ease-out infinite; }
.art .mv-tilt { transform-box: fill-box; transform-origin: 50% 80%; animation: mv-tilt 5.5s ease-in-out infinite; }
.art .mv-dot { transform-box: fill-box; animation: mv-dot 1.8s ease-in-out infinite; }
.art .mv-dot:nth-of-type(2) { animation-delay: .22s; }
.art .mv-dot:nth-of-type(3) { animation-delay: .44s; }
.js-reveal .contact.rv.is-in .lead::before { animation: settle 1s cubic-bezier(.16,.84,.3,1) .25s both; }
@keyframes mark { to { transform: rotate(-1.6deg) scaleX(1); } }

.hero h1, .hero-sub, .hero .cta-row { animation: rise .6s cubic-bezier(.16,.84,.3,1) both; }
.hero-sub { animation-delay: .08s; }
.hero .cta-row { animation-delay: .16s; }

/* חשיפה בגלילה: הסקריפט מסמן את הבלוקים הגדולים, והם עולים פעם אחת
   כשהם נכנסים למסך. בלי סקריפט הכול גלוי מההתחלה. */
.js-reveal .rv { opacity: 0; }
.js-reveal .rv.is-in { opacity: 1; animation: rise .6s cubic-bezier(.16,.84,.3,1) var(--d, 0ms) backwards; }
.js-reveal .art.rv { opacity: 1; }
.js-reveal .art.rv.is-in { animation: none; }
/* רק קבוצות הרמה הראשונה קופצות; קבוצה מקוננת היא האלמנט שממשיך לזוז
   בסצנה, והוא לא יורש את הקפיצה. */
.js-reveal .art.rv svg > g { opacity: 0; }
.js-reveal .art.rv.is-in svg > g { opacity: 1; animation: pop .7s cubic-bezier(.34,1.45,.64,1) backwards; }
.js-reveal .art.rv.is-in svg > g:nth-child(2) { animation-delay: 90ms; }
.js-reveal .art.rv.is-in svg > g:nth-child(3) { animation-delay: 180ms; }
.js-reveal .art.rv.is-in svg > g:nth-child(4) { animation-delay: 270ms; }
.js-reveal .art.rv.is-in svg > g:nth-child(5) { animation-delay: 360ms; }
.js-reveal .art.rv.is-in svg > g:nth-child(6) { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover, a.pf-card:hover, .trust > div:hover { transform: none; }
  .hf, .hero-band .hf, .site-head::before, .art .mv-pulse, .art .mv-walk, .art .mv-draw,
  .art .mv-tilt, .art .mv-dot, .contact .lead, .gl-big, .lost-num i, .thanks-scene i { animation: none !important; }
  .art .mv-draw { stroke-dashoffset: 0; }
  .tilt-live.is-tilting { transform: none !important; }
  .read-progress { scale: 1 1; }
  .hl::before { animation: none; transform: rotate(-1.6deg) scaleX(1); }
  .js-reveal .rv, .js-reveal .art.rv svg > g { opacity: 1; animation: none; }
}

@media print { .site-nav, .cta-row, .skip, .hero-field, .hero-band { display: none; } body { font-size: 11pt; } }

/* ------------------------------------------------- אחידות ההנעה לפעולה */

/* כל קישור משני באתר לובש את אותו כפתור. בתוך כרטיס הכפתור קטן במידה
   אחת, אבל הוא עדיין אותו כפתור. */
.svc-col .btn, .card .btn, .trust .btn { margin-top: auto; align-self: flex-start; }
.trust .btn-ghost, .svc-col .btn-ghost, .card .btn-ghost { font-size: 16px; padding: 13px 26px; margin-top: 18px; }

/* על רקע כהה הצל הכתום נקרא כזוהר מרוח ולא כהרמה, כי אין לו לבן להפריד
   ממנו. שם הוא מתהדק ומתכהה. */
.site-foot .btn-primary, .future .btn-primary { box-shadow: 0 10px 22px -12px rgba(0,0,0,.85); }
.site-foot .btn-primary:hover, .future .btn-primary:hover { box-shadow: 0 14px 28px -12px rgba(0,0,0,.9); }
/* על שדה צבעוני הכפתור המשני לבן מלא. שקוף למחצה נפסל. */
.future .btn-ghost, .cta-block .btn-ghost { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
.future .btn-ghost:hover, .cta-block .btn-ghost:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

/* ------------------------------------------------------------- המילון */

/* המילון הוא כלי עיון, והחיפוש הוא המרכז שלו: כרטיס לבן גבוה על אריח
   כחול מוטה, באותה שפה כמו הטופס. המספר 138 יושב לצד הכותרת כאריח צהוב
   עם ספרה ענקית. כל קבוצה היא שדה צבע משלה, והכרטיסים שלה נושאים גוון
   בהיר של אותו צבע ומתמלאים בו בריחוף, עם צל דפוס. */
.gl-head { position: relative; max-width: none; border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.gl-head h1 { max-width: 14ch; }
.gl-head .lede { max-width: 56ch; }
.gl-big {
  position: absolute; inset-inline-end: 2%; top: 0;
  width: 196px; aspect-ratio: 1; border-radius: 30px;
  background: var(--yellow); box-shadow: -12px 14px 0 var(--yellow-deep);
  transform: rotate(6deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink); text-align: center; margin: 0;
  animation: pop .8s var(--ease-pop) .15s both;
}
.gl-big b { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 84px; line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.gl-big span { font-weight: 700; font-size: 16px; margin-top: 6px; }
/* בלי isolation: פסאודו עם z-index שלילי חייב ליפול מתחת לרקע של ההורה
   שלו, וזה קורה רק כשההורה אינו הקשר ערימה בעצמו. */
.gl-search { position: relative; margin: 1.8em 0 .8em; max-width: 640px; }
.gl-search::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 22px;
  background: var(--blue); transform: rotate(-1.6deg) translate(-10px, 10px);
}
.gl-search svg {
  position: absolute; inset-inline-start: 22px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: var(--ink); pointer-events: none;
}
.gl-search input {
  width: 100%; font-family: inherit; font-size: 19px; font-weight: 600; color: var(--ink);
  background: #fff; border: 0; border-radius: 22px;
  box-shadow: 0 26px 50px -26px rgba(16,19,26,.55), inset 0 0 0 1.5px var(--edge);
  padding: 18px 22px 18px 22px; padding-inline-start: 58px; min-height: 66px;
  transition: box-shadow .14s ease;
}
.gl-search input::placeholder { color: var(--ink-3); font-weight: 500; }
.gl-search input:focus {
  outline: none;
  box-shadow: 0 26px 50px -26px rgba(16,19,26,.55), inset 0 0 0 2.5px var(--ink);
}
.gl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gl-status { font-size: 14.5px; color: var(--ink-3); min-height: 1.2em; margin: 0 0 1.2em; }

.gl-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 .4em; }
.gl-jump a {
  --g: var(--blue); --g-tint: var(--blue-tint); --g-ink: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
  color: var(--ink); background: var(--g-tint);
  padding: 8px 14px; border-radius: 999px;
  transition: background .16s ease, color .16s ease, transform .2s var(--ease-pop);
}
.gl-jump a::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--g); transform: rotate(-8deg); }
.gl-jump a:hover { background: var(--g); color: var(--g-ink); transform: translateY(-2px); }
.gl-jump a:hover::before { background: currentColor; }
.gl-jump b { font-size: 12.5px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gl-jump a:hover b { color: inherit; }

/* צבע לכל קבוצה, פעם אחת, ומכאן הכול נגזר: הצ'יפ, ראש הקבוצה, הכרטיסים. */
.gl-group, .gl-jump a { --g: var(--blue); --g-deep: var(--blue-deep); --g-tint: var(--blue-tint); --g-ink: #fff; --g-sub: #fff; }
#model, .gl-jump a[href="#model"], #commerce, .gl-jump a[href="#commerce"] { --g: var(--violet-field); --g-deep: var(--violet-deep); --g-tint: var(--violet-tint); --g-ink: #fff; --g-sub: #fff; }
#visibility, .gl-jump a[href="#visibility"], #privacy, .gl-jump a[href="#privacy"] { --g: var(--coral); --g-deep: var(--coral-deep); --g-tint: var(--coral-tint); --g-ink: var(--ink); --g-sub: var(--ink); }
#technical, .gl-jump a[href="#technical"], #trust, .gl-jump a[href="#trust"] { --g: var(--mint); --g-deep: var(--mint-deep); --g-tint: var(--mint-tint); --g-ink: var(--ink); --g-sub: var(--ink); }
#measure, .gl-jump a[href="#measure"], #business, .gl-jump a[href="#business"] { --g: var(--yellow); --g-deep: var(--yellow-deep); --g-tint: var(--yellow-tint); --g-ink: var(--ink); --g-sub: var(--ink); }

.gl-group { margin: clamp(40px, 5vw, 72px) 0 0; scroll-margin-top: 108px; }
.gl-group-head {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--g); color: var(--g-ink);
  border-radius: 30px 30px 30px 10px;
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 38px);
  padding-inline-end: clamp(150px, 20vw, 240px);
  margin-bottom: 18px;
}
.gl-group-head::before {
  content: ""; position: absolute; z-index: -1;
  inset-inline-end: -10%; bottom: -60%; width: 40%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(255,255,255,.16);
}
#visibility .gl-group-head::before, #technical .gl-group-head::before, #measure .gl-group-head::before,
#trust .gl-group-head::before, #privacy .gl-group-head::before, #business .gl-group-head::before { background: rgba(16,19,26,.08); }
.gl-group-head h2 { margin: 0; font-size: clamp(26px, 3.2vw, 40px); color: inherit; letter-spacing: -0.022em; }
.gl-group-head p { margin: .35em 0 0; color: var(--g-sub); font-size: 16.5px; max-width: 58ch; }
/* המונה: ספרה ענקית בקצה השדה, כמו הספרה ברקע השלבים. */
.gl-n {
  position: absolute; inset-inline-end: clamp(22px, 3vw, 38px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  color: inherit; font-weight: 700; font-size: 13.5px;
}
.gl-n b { font-family: "Rubik", sans-serif; font-weight: 800; font-size: clamp(56px, 6vw, 84px); letter-spacing: -0.04em; line-height: .9; margin-bottom: 8px; }

.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.gterm {
  display: block; text-decoration: none; color: inherit;
  background: var(--g-tint); border: 0; border-radius: 18px;
  padding: 20px 22px;
  transition: transform .18s var(--ease-pop), box-shadow .18s ease, background .18s ease, color .18s ease;
}
.gterm:hover {
  transform: translate(3px, -4px); background: var(--g); color: var(--g-ink);
  box-shadow: -7px 8px 0 var(--g-deep);
}
.gterm h3 { font-size: 19.5px; margin: 0; letter-spacing: -0.012em; color: inherit; }
/* המונח האנגלי: ink-3 נבחר כשהכרטיס היה לבן, ושם הוא מודד 5.42. אחרי
   שהכרטיסים קיבלו את גוון הקבוצה הוא יושב על חמישה שדות ואף אחד מהם
   אינו לבן. נמדד על הפיקסלים: 4.71 על הכחול, 4.76 על המנטה, 4.89 על
   הצהוב, 4.60 על האלמוג ו-4.54 על הסגול. עובר, אבל ב-12.5 פיקסל זה
   מרווח של ארבע מאיות. ink-2 על אותם חמישה: 7.05 / 7.14 / 7.33 / 6.89
   / 6.80. הגודל נשאר, רק הדיו מתכהה. */
.gterm .lat { display: block; font-family: "Rubik", sans-serif; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 8px; }
.gterm p { font-size: 15px; color: var(--ink-2); margin: 0; max-width: none; }
.gterm:hover .lat, .gterm:hover p { color: inherit; }
.gterm[hidden] { display: none; }

/* --------------------------------------------------------- עמוד מונח */

/* עמוד מונח על מסך רחב: עמודת קריאה של 800 ומסילת תוכן דביקה לצידה,
   שעוקבת אחרי הסעיף שעל המסך. מתחת ל-1100 המסילה נעלמת והעמוד חוזר
   להיות עמודת קריאה אחת. */
main.term { width: min(800px, 100% - var(--gut) * 2); }
main.term p, main.term ul, main.term ol { max-width: none; }
@media (min-width: 1100px) {
  main.term {
    width: min(1180px, 100% - var(--gut) * 2);
    display: grid; grid-template-columns: 800px 240px;
    column-gap: clamp(40px, 5vw, 96px); align-items: start;
  }
  /* הכול בעמודת הקריאה, גם הכותרת וגם הטופס: מידה אחת מהקצה לקצה.
     רק המסילה יושבת בעמודה השנייה, לצד גוף המונח. */
  main.term > * { grid-column: 1; }
  main.term > .term-rail { grid-column: 2; grid-row: 3; position: sticky; top: 104px; }
}
.term-rail { display: none; margin-top: .4em; }
@media (min-width: 1100px) { .term-rail { display: block; } }
.term-rail-t { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 13px; color: var(--ink-3); margin: 0 0 .8em; letter-spacing: .02em; }
.term-rail ol { list-style: none; padding: 0; margin: 0; max-width: none; border-inline-start: 2px solid var(--edge); }
.term-rail li { margin: 0; }
.term-rail a {
  --c: var(--ink);
  position: relative; display: block; text-decoration: none;
  font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink-3);
  padding: 7px 0 7px 16px; padding-inline-start: 18px; margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease, padding .2s var(--ease-out);
}
.term-rail a:hover { color: var(--ink); padding-inline-start: 22px; }
.term-rail a[aria-current="true"] { color: var(--ink); font-weight: 800; border-color: var(--c); }
.term-rail a[aria-current="true"]::before {
  content: ""; position: absolute; inset-inline-start: 10px; top: .78em;
  width: 0; height: 0;
}
.term-rail .r-example { --c: var(--blue); }
.term-rail .r-practice { --c: var(--violet); }
.term-rail .r-check { --c: var(--mint); }
.term-rail .r-watch { --c: var(--yellow); }
.term-rail .r-notfor { --c: var(--coral); }

/* מתחת ל-1100 המסילה הייתה נעלמת ושום דבר לא בא במקומה: 187 עמודי מונח,
   כעשרת אלפים פיקסל וחמישה עשר סעיפים, בלי שום דרך לדעת מה יש בעמוד -
   וזה בדיוק סוג העמוד שנוחתים עליו משאלה אחת. היא חוזרת כאן, אבל לא
   כרשימה אנכית: רשימה של 13 פריטים פתוחה הייתה דוחפת את הפסקה הראשונה
   כ-400 פיקסל למטה. במקומה מסילה אופקית עם הצצה לפריט הבא, בדיוק כמו
   שבלוקי הביטחון מתנהגים בטלפון, ובצ'יפים של המילון. שורה אחת, כ-105
   פיקסל, והסקריפט שמסמן aria-current ממשיך לעבוד ומסמן איפה הקורא נמצא.
   הערה: קיפול אמיתי (details) דורש סימון שאין בתבנית, ולכן לא נעשה כאן. */
@media (max-width: 1099.98px) {
  .term-rail { display: block; margin: 1.5em 0 .2em; }
  .term-rail-t { margin: 0 0 .55em; }
  .term-rail ol {
    display: flex; gap: 8px; border-inline-start: 0;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut) 10px;
  }
  .term-rail ol::-webkit-scrollbar { display: none; }
  main.term .term-rail ol { margin-inline: 0; padding-inline: 0; }
  .term-rail li { flex: none; scroll-snap-align: start; }
  .term-rail a {
    --c: var(--blue);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    min-height: 44px; padding: 10px 16px; margin-inline-start: 0;
    border-inline-start: 0; border-radius: 999px;
    background: var(--blue-tint); color: var(--ink); font-weight: 700;
  }
  .term-rail a:hover { padding-inline-start: 16px; }
  /* הצורה הקטנה בפתח הצ'יפ היא אותה צורה של המילון. בשולחן העבודה
     הפסאודו הזה הוא סמן בגודל אפס, ולכן צריך להחזיר לו מידות כאן. */
  .term-rail a::before,
  .term-rail a[aria-current="true"]::before {
    content: ""; position: static; inset: auto;
    width: 10px; height: 10px; border-radius: 3px;
    background: var(--c); transform: rotate(-8deg);
  }
  .term-rail a[aria-current="true"] { background: var(--blue); color: #fff; }
  .term-rail a[aria-current="true"]::before { background: #fff; }
}

.term-head { margin: 0 0 1.6em; }
.term-group {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
  text-decoration: none; color: var(--ink); background: var(--blue-tint);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 16px;
  transition: background .16s ease, color .16s ease;
}
.term-group::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); transform: rotate(-8deg); }
.term-group:hover { background: var(--blue); color: #fff; }
.term-group:hover::before { background: #fff; }
.term-head h1 { font-size: clamp(34px, 5vw, 64px); margin: 0; max-width: 18ch; }
.term-en { font-family: "Rubik", sans-serif; font-weight: 400; font-size: 17px; color: var(--ink-3); margin: 8px 0 0; }
/* ההגדרה: שדה כחול על אריח צהוב מוטה, כמו הטופס. זו הפסקה שהעמוד
   קיים בשבילה, והיא נראית כך. */
.term-def {
  position: relative;
  font-size: clamp(19px, 2.1vw, 23px); line-height: 1.55; font-weight: 500; color: #fff;
  margin: 1.4em 0 0; padding: clamp(24px, 3vw, 34px) clamp(26px, 3vw, 36px);
  background: var(--blue); border-radius: 26px 26px 26px 10px;
  max-width: 34em;
}
.term-def::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: var(--yellow); transform: rotate(-1.6deg) translate(-10px, 10px);
}
.term-def a { color: #fff; }
.term-def strong { color: #fff; }

.tsec { margin: 2.6em 0; scroll-margin-top: 110px; }
.tsec > h2 { margin: 0 0 .5em; font-size: clamp(25px, 3vw, 36px); }
.tsec p { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.tsec p strong { color: var(--ink); }

/* חמשת הסעיפים שאינם פרוזה הם אובייקטים: כרטיס לבן על אריח צבע מוטה,
   עם צורה בצבע הסעיף שיושבת על הקצה העליון ונושאת צל דפוס. לכל סעיף
   צבע וצורה משלו, וההטיה מתחלפת בין סעיף לסעיף כדי שלא ייראו מוטבעים. */
.tsec-example, .tsec-check, .tsec-watch, .tsec-notfor, .tsec-practice {
  --c: var(--blue); --c-deep: var(--blue-deep); --tilt: -1.4deg;
  position: relative;
  background: #fff; border: 1.5px solid var(--edge);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 34px);
  border-radius: 26px; margin: 3.2em 0;
}
.tsec-example::before, .tsec-check::before, .tsec-watch::before, .tsec-notfor::before, .tsec-practice::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: var(--c); transform: rotate(var(--tilt)) translate(-12px, 12px);
}
.tsec-example::after, .tsec-check::after, .tsec-watch::after, .tsec-notfor::after, .tsec-practice::after {
  content: ""; position: absolute; top: -16px; inset-inline-start: 30px;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--c); box-shadow: -6px 7px 0 var(--c-deep); transform: rotate(-8deg);
}
.tsec-practice { --c: var(--violet); --c-deep: var(--violet-deep); --tilt: 1.4deg; }
.tsec-practice::after { border-radius: 50%; }
.tsec-check { --c: var(--mint); --c-deep: var(--mint-deep); --tilt: -1.2deg; }
.tsec-check::after { border-radius: 50% 50% 12% 50%; }
.tsec-watch { --c: var(--yellow); --c-deep: var(--yellow-deep); --tilt: 1.6deg; }
.tsec-watch::after { border-radius: 999px; width: 32px; height: 50px; top: -20px; }
.tsec-notfor { --c: var(--coral); --c-deep: var(--coral-deep); --tilt: -1.6deg; }
.tsec-notfor::after { border-radius: 50%; }
.tsec-example > h2, .tsec-check > h2, .tsec-watch > h2,
.tsec-notfor > h2, .tsec-practice > h2 { font-size: clamp(22px, 2.4vw, 29px); }
.tsec-example > p:last-child, .tsec-check > p:last-child, .tsec-watch > p:last-child,
.tsec-notfor > p:last-child, .tsec-practice > p:last-child { margin-bottom: 0; }

.tsteps { counter-reset: s; list-style: none; padding: 0; margin: .8em 0 0; }
.tsteps li {
  counter-increment: s; position: relative;
  padding-inline-start: 46px; margin-bottom: .9em;
  font-size: 17px; color: var(--ink-2); line-height: 1.7;
}
.tsteps li:last-child { margin-bottom: 0; }
.tsteps li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--ink); color: #fff; box-shadow: -3px 4px 0 var(--mint);
  font-family: "Rubik", sans-serif; font-weight: 800; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
.term-body .source {
  font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--edge);
  padding-top: 1.2em; margin-top: 2.4em;
}

/* ------------------------------------------------- כרטיסי עדכונים */

/* עדכון: הכותרת נושאת, ומתחתיה שורת תאריך עם היום כספרה גדולה, החודש
   והשנה לצידו, וצ'יפ פלטפורמה בגוון משלה. */
.card-news .card-body { display: flex; flex-direction: column; height: 100%; }
.card-news .card-meta { margin-top: auto; padding-top: 16px; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card-date { display: inline-flex; align-items: baseline; gap: 7px; color: var(--ink-2); text-decoration: none; }
.card-date b { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 30px; line-height: .9; letter-spacing: -0.03em; color: var(--ink); }
.card-date span { font-size: 13px; font-weight: 600; }
.card-kicker {
  font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--bg-2);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.card-kicker[data-pf="chatgpt"] { background: var(--mint-tint); color: #0A5F4E; }
.card-kicker[data-pf="google"] { background: var(--blue-tint); color: var(--blue-deep); }
.card-kicker[data-pf="perplexity"] { background: var(--violet-tint); color: var(--violet-deep); }
.card-kicker[data-pf="other"] { background: var(--yellow-tint); color: #6B4C00; }
.card-news:hover .card-date b { color: var(--blue); }

/* ----------------------------------------- מאגר הידע: שלוש קבוצות */

/* שלוש קבוצות כרטיסים בעמוד המדריכים, כל אחת על גוון הקבוצה שלה, כדי
   שהעמוד ייקרא כשלושה מדפים ולא כרשת אחת ארוכה של כרטיסים לבנים. */
main.sell > .cards .card { border-color: transparent; }
main.sell > .cards:nth-of-type(1) .card { background: var(--blue-tint); }
main.sell > .cards:nth-of-type(2) .card { background: var(--mint-tint); }
main.sell > .cards:nth-of-type(3) .card { background: var(--violet-tint); }
main.sell > .cards .card:hover { background: #fff; }
main.sell > .cards .card h3 { font-size: 21px; }
main.sell > .cards .card p { color: var(--ink-2); font-size: 15px; }

/* ------------------------------------------------- עמוד צור קשר */

/* שלוש הדרכים: השדות גבוהים יותר, הכותרת גדולה, וכתובת המייל היא קישור
   לבן עם קו שנמתח בריחוף. הטלפון נשאר טקסט, לא כפתור: מי שרוצה לחייג
   רואה מספר. */
.page-contact .trust > div { min-height: 290px; padding-top: 92px; }
.page-contact .trust h3 { font-size: 27px; }
.page-contact .trust > div p { font-size: 16.5px; }
.page-contact .trust a:not(.btn) {
  font-weight: 700; text-decoration: none; direction: ltr; unicode-bidi: isolate;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 100% 2px;
  transition: background-size .28s var(--ease-out);
}
.page-contact .trust a:not(.btn):hover { background-size: 0 2px; }
.page-contact .steps { margin-top: 1.4em; }

/* ------------------------------------------- 404 ותודה: רגעי חן */

/* 404: שלוש ספרות ענק על שלושה שדות צבע שקופצים פנימה, כותרת, וארבעה
   שדות יציאה. העמוד הזה הוא הפעם היחידה שאדם רואה את הספרות בלי הקשר,
   ולכן הן מקבלות את כל הבמה. */
main.lost { width: min(1180px, 100% - var(--gut) * 2); }
.lost { text-align: center; padding: clamp(30px, 5vw, 64px) 0 clamp(16px, 2vw, 28px); }
.lost h1 { margin-inline: auto; max-width: 16ch; }
.lost .lede { margin-inline: auto; max-width: 48ch; text-align: center; }
.lost-num { display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); margin: 0 auto clamp(26px, 4vw, 44px); }
.lost-num i {
  --r: -6deg;
  display: grid; place-items: center; font-style: normal;
  width: clamp(88px, 14vw, 168px); aspect-ratio: 1; border-radius: 26%;
  font-family: "Rubik", sans-serif; font-weight: 800; font-size: clamp(56px, 9vw, 112px); line-height: 1;
  letter-spacing: -0.04em; color: #fff;
  background: var(--blue); box-shadow: -12px 14px 0 var(--blue-deep);
  transform: rotate(var(--r));
  animation: pop .8s var(--ease-pop) var(--d, 0ms) both;
}
.lost-num i:nth-child(2) { --r: 5deg; --d: 110ms; border-radius: 50%; background: var(--yellow); color: var(--ink); box-shadow: -12px 14px 0 var(--yellow-deep); }
.lost-num i:nth-child(3) { --r: -3deg; --d: 220ms; border-radius: 50% 50% 14% 50%; background: var(--violet-field); box-shadow: -12px 14px 0 var(--violet-deep); }
.lost .trust { text-align: start; margin-top: clamp(28px, 4vw, 48px); }
.lost .trust > div { min-height: 200px; padding-top: 76px; }
.lost .trust p { margin-top: 0; }

/* תודה: הצורות החמש עפות פנימה סביב סימן וי במנטה. אין כאן טופס ואין
   בקשה, כי הבקשה כבר נענתה. */
.thanks-hero { padding: clamp(36px, 6vw, 72px) 0 0; overflow: hidden; }
.thanks-scene { position: relative; width: min(420px, 90%); aspect-ratio: 2.2; margin: 0 auto; }
.thanks-scene i {
  position: absolute; display: block; aspect-ratio: 1; width: var(--w, 40px);
  transform: rotate(var(--r, 0deg));
  animation: pop .9s var(--ease-pop) var(--d, 0ms) both;
}
.thanks-scene .t-tick {
  inset-inline-start: 50%; top: 50%; width: 132px; border-radius: 50%;
  background: var(--mint); box-shadow: -10px 12px 0 var(--mint-deep);
  transform: translate(50%, -50%); animation-delay: 0ms;
  display: grid; place-items: center;
}
.thanks-scene .t-tick svg { width: 62%; height: 62%; }
.thanks-scene .t-tick { animation-name: pop-centre; }
@keyframes pop-centre { from { opacity: 0; transform: translate(50%, -50%) scale(.6); } to { opacity: 1; transform: translate(50%, -50%) scale(1); } }
main.thanks .page-head { text-align: center; border-bottom: 0; padding-top: clamp(18px, 2vw, 28px); }
main.thanks .page-head h1 { max-width: none; font-size: clamp(44px, 7vw, 92px); }
main.thanks .page-head .lede { margin-inline: auto; max-width: 48ch; }
main.thanks .page-head .stamp { display: none; }
main.thanks > p, main.thanks > ul { max-width: 62ch; margin-inline: auto; }
main.thanks > h2 { text-align: center; }

@media (max-width: 999px) {
  .gl-big { position: static; width: 150px; border-radius: 24px; margin: 1.2em 0 .4em; transform: rotate(-4deg); box-shadow: -8px 10px 0 var(--yellow-deep); }
  .gl-big b { font-size: 64px; }
  .gl-group-head { padding-inline-end: 24px; }
  .gl-n { position: static; transform: none; flex-direction: row; align-items: baseline; gap: 6px; margin-top: 12px; }
  .gl-n b { font-size: 34px; margin: 0; }
}

/* ------------------------------------------ טלפון: האריחים המוטים */

/* יושב בסוף הקובץ בכוונה: הכללים שהוא דורס מוגדרים אחריו בסדר הקריאה של
   חלקי המילון, ומדיה לבדה לא מנצחת סדר. בטלפון האריח לא מסתובב: סעיף בגובה
   אלף פיקסלים מזיז פינה מסובבת מעבר לשוליים גם במעלה אחת, וההזזה לבדה
   שומרת על הרעיון. */
@media (max-width: 720px) {
  .tsec-example::before, .tsec-check::before, .tsec-watch::before, .tsec-notfor::before, .tsec-practice::before {
    inset: 0 6px; transform: translate(-4px, 8px);
  }
  .term-def::before { inset: 0 6px; transform: translate(-4px, 8px); }
  .gl-search::before { inset: 0 6px; transform: translate(-4px, 8px); }
}

/* -------------------------------------------------------- עמוד צור קשר */
/* "יותר רגיל, כמו שמקובל בשוק": כותרת, שורה אחת, פרטי קשר, והטופס. */
.contact-head { margin-bottom: 1.2em; }
.contact-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 0 0 2em; padding: 0;
}
.contact-details > div {
  background: var(--bg-2); border-radius: var(--radius); padding: 18px 20px;
}
.contact-details dt { font-size: 13px; font-weight: 700; color: var(--ink-3); margin: 0 0 4px; }
.contact-details dd { margin: 0; font-family: "Rubik", sans-serif; font-weight: 800; font-size: 20px; }
.contact-details dd a { color: var(--ink); text-decoration: none; }
.contact-details dd a:hover { color: var(--blue); }

/* ================================================== נגישות והסכמה לקוקיז */

.a11y-fab {
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff;
  background: var(--blue); color: #fff; cursor: pointer; padding: 11px;
  box-shadow: 0 10px 26px -10px rgba(16,19,26,.6);
  transition: transform .16s cubic-bezier(.34,1.5,.64,1), background .14s ease;
}
.a11y-fab:hover { transform: scale(1.07); background: #1B52D8; }
.a11y-fab svg { width: 100%; height: 100%; display: block; }

.a11y-panel {
  position: fixed; inset-inline-start: 18px; bottom: 82px; z-index: 61;
  width: min(292px, calc(100vw - 36px));
  background: #fff; color: var(--ink); border-radius: 18px;
  padding: 18px; box-shadow: 0 26px 60px -22px rgba(16,19,26,.55);
  border: 1px solid var(--edge);
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.a11y-head h2 { font-size: 20px; margin: 0; }
.a11y-x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 0 4px; }
.a11y-x:hover { color: var(--ink); }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.a11y-steps { display: flex; align-items: center; gap: 6px; }
.a11y-steps button {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--edge);
  background: #fff; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
}
.a11y-steps button:hover { border-color: var(--ink); }
.a11y-steps output { font-size: 13px; font-weight: 700; min-width: 44px; text-align: center; color: var(--ink-2); }
.a11y-opt, .a11y-reset {
  display: block; width: 100%; text-align: start; font-family: inherit;
  font-size: 15px; font-weight: 600; color: var(--ink);
  background: var(--bg-2); border: 1.5px solid transparent; border-radius: 11px;
  padding: 11px 14px; margin-bottom: 8px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.a11y-opt:hover, .a11y-reset:hover { border-color: var(--ink); }
.a11y-opt[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.a11y-reset { background: #fff; border-color: var(--edge); color: var(--ink-2); margin-top: 4px; }
.a11y-note { font-size: 13.5px; margin: 10px 0 0; text-align: center; }

/* ההעדפות עצמן. הן עובדות מפני שהן משנות את גיליון הסגנון שלנו, ולא
   מציירות שכבה מעל הקוד. */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 140%; }

html.a11y-links a { text-decoration: underline !important; text-underline-offset: .18em; font-weight: 700; }

html.a11y-readable body { letter-spacing: .012em; word-spacing: .07em; line-height: 1.95; }
html.a11y-readable p, html.a11y-readable li { max-width: 62ch; }

html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* ניגודיות גבוהה: רקע לבן, טקסט כמעט שחור, וכל שדה צבע מקבל מסגרת כדי
   שהגבול יישאר נראה גם בלי הצבע. */
html.a11y-contrast body,
html.a11y-contrast .closer, html.a11y-contrast .contact, html.a11y-contrast .future,
html.a11y-contrast .site-foot, html.a11y-contrast .svc-col, html.a11y-contrast .step,
html.a11y-contrast .gl-group-head, html.a11y-contrast .trust > div,
html.a11y-contrast .tsec-example, html.a11y-contrast .tsec-check,
html.a11y-contrast .tsec-watch, html.a11y-contrast .tsec-notfor,
html.a11y-contrast .tsec-practice, html.a11y-contrast .term-def,
html.a11y-contrast .lead, html.a11y-contrast .gterm, html.a11y-contrast .card {
  background: #fff !important; color: #000 !important; border: 1px solid #000 !important;
}
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast dt,
html.a11y-contrast dd, html.a11y-contrast summary, html.a11y-contrast .lede,
html.a11y-contrast .foot-col a, html.a11y-contrast .foot-h,
html.a11y-contrast .site-nav a { color: #000 !important; }
html.a11y-contrast a { color: #0000C0 !important; }
html.a11y-contrast .btn-primary, html.a11y-contrast .nav-cta {
  background: #000 !important; color: #fff !important; border-color: #000 !important; box-shadow: none !important;
}
html.a11y-contrast .btn-ghost { background: #fff !important; color: #000 !important; border-color: #000 !important; }
html.a11y-contrast .hero-field, html.a11y-contrast .tiles,
html.a11y-contrast .art, html.a11y-contrast .svc-mark { display: none !important; }
html.a11y-contrast .lead input, html.a11y-contrast .lead textarea {
  background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 2px #000 !important;
}

/* ---------------------------------------------------------- שורת הקוקיז */

.cookie-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 62;
  background: var(--ink); color: rgba(255,255,255,.82);
  padding: 16px var(--gut); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 12px 24px;
  box-shadow: 0 -12px 30px -18px rgba(0,0,0,.8);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: 14.5px; max-width: 74ch; line-height: 1.6; }
.cookie-bar a { color: #fff; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
.cookie-bar .btn { font-size: 15px; padding: 11px 22px; }
.cookie-bar .btn-ghost { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.cookie-bar .btn-ghost:hover { background: rgba(255,255,255,.24); }
/* כשהשורה פתוחה, כפתור הנגישות עולה מעליה ולא מתחבא מאחוריה. */
/* גובה השורה משתנה לפי רוחב המסך, ולכן המרווח נגזר ממנה בזמן ריצה ולא
   ממספר שנוחש בכתיבה. בטלפון היא 181 פיקסל והכפתור ישב על 104, כך
   שהלחיצה עליו נבלעה בשורה. */
body:has(.cookie-bar:not([hidden])) .a11y-fab {
  bottom: calc(var(--cookie-h, 104px) + 16px);
}
body:has(.cookie-bar:not([hidden])) .a11y-panel {
  bottom: calc(var(--cookie-h, 104px) + 80px);
}

@media (max-width: 620px) {
  .cookie-bar { justify-content: stretch; text-align: start; }
  .cookie-actions { width: 100%; }
  .cookie-bar .btn { flex: 1; }
}
/* שורת הקוקיז והפאנל עצמם חייבים לציית למצב הניגודיות, אחרת הכלל הכללי
   צובע בהם טקסט שחור על רקע כהה. נמדד ותוקן. */
html.a11y-contrast .cookie-bar {
  background: #fff !important; color: #000 !important; border-top: 2px solid #000 !important;
}
html.a11y-contrast .cookie-bar p, html.a11y-contrast .a11y-panel * { color: #000 !important; }
html.a11y-contrast .cookie-bar a { color: #0000C0 !important; }
html.a11y-contrast .cookie-bar .btn-ghost,
html.a11y-contrast .a11y-opt, html.a11y-contrast .a11y-reset,
html.a11y-contrast .a11y-steps button {
  background: #fff !important; color: #000 !important; border: 1.5px solid #000 !important;
}
html.a11y-contrast .a11y-opt[aria-pressed="true"] { background: #000 !important; color: #fff !important; }
html.a11y-contrast .a11y-panel { border: 2px solid #000 !important; }
html.a11y-contrast .a11y-fab { background: #000 !important; color: #fff !important; border-color: #fff !important; }

@media print { .a11y-fab, .a11y-panel, .cookie-bar { display: none !important; } }

/* ------------------------------------------------------- חתימת המחבר */

.byline {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-2); border-radius: var(--radius-lg);
  padding: 20px 22px; margin: 2.6em 0 0;
}
.byline-face { width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover; }
.byline-who { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 17px; margin: 0 0 3px; }
.byline-who a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--coral); }
.byline-who a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.byline-what { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 62ch; }
.byline-date { font-size: 13px; color: var(--ink-3); display: block; margin-top: 6px; }

.author-page { display: grid; grid-template-columns: 180px 1fr; gap: clamp(20px, 3vw, 34px); align-items: start; margin: 0 0 1.4em; }
.author-portrait { width: 180px; height: 180px; border-radius: 22px; object-fit: cover; box-shadow: 0 18px 40px -20px rgba(16,19,26,.5); }
@media (max-width: 620px) {
  .author-page { grid-template-columns: 1fr; }
  .author-portrait { width: 132px; height: 132px; }
  .byline { flex-direction: column; }
}
html.a11y-contrast .byline { background: #fff !important; border: 1px solid #000 !important; }

/* הניווט קיבל פריט חמישי והפסיק להיכנס: 385 פיקסל של תוכן ב-358 של מקום,
   ו"צור קשר" נחתך באמצע המילה. מתחת ל-430 הפריטים מתהדקים כדי להיכנס,
   ומתחת ל-360 נשארת גלילה עם רמז ויזואלי שיש עוד. */
@media (max-width: 430px) {
  .site-nav { gap: 0; }
  .site-nav a { font-size: 14.5px; padding: 7px 8px; }
  .site-nav a[aria-current="page"]::after { inset-inline: 8px; }
}
@media (max-width: 360px) {
  .site-nav { position: relative; -webkit-overflow-scrolling: touch; }
  .site-nav::after {
    content: ""; position: sticky; inset-inline-end: 0; flex: none;
    width: 26px; height: 100%; margin-inline-start: -26px;
    background: linear-gradient(to left, rgba(255,255,255,.96), rgba(255,255,255,0));
    pointer-events: none;
  }
}

/* ------------------------------------------- קטע הטיעון ורצועת המחקר */

/* "למה זה בוער עכשיו" היה עמודת טקסט ממורכזת בין שני שדות רוויים, וזה
   נקרא כפער ולא כקטע. קו צבע אחד והתחלה מיושרת מספיקים כדי שיהיה לו גוף
   בלי להוסיף עוד שדה צבע לעמוד. */
main.doc > h2 + p, main.doc > h2 { text-align: start; }
.home-arg {
  position: relative; margin: clamp(38px, 5vw, 72px) 0;
  padding-inline-start: clamp(18px, 2.4vw, 30px);
}
.home-arg::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px;
  width: 6px; border-radius: 6px;
  background: linear-gradient(var(--coral), var(--yellow));
}
.home-arg h2 { margin: 0 0 .5em; }
.home-arg p { font-size: clamp(18px, 2vw, 20.5px); line-height: 1.75; max-width: 60ch; }
.home-arg p:last-child { margin-bottom: 0; }
.home-arg strong { color: var(--ink); }

.future-head { max-width: 62ch; margin: 0 0 clamp(26px, 3.4vw, 44px); }
.future-kicker {
  font-size: 13px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--yellow); margin: 0 0 10px;
}
.future-lede { font-size: clamp(17px, 1.9vw, 19.5px); line-height: 1.7; color: rgba(255,255,255,.78); margin: 0; }

/* המספר הוא כל העניין, ולכן הוא נראה כמו מספר. קודם הוא היה באותו גודל
   כמו כל השאר בכרטיס. */
.fx { position: relative; padding-top: 6px; }
.fx-n {
  display: block; font-family: "Rubik", sans-serif; font-weight: 800;
  font-size: clamp(42px, 5.2vw, 62px); line-height: .95;
  letter-spacing: -0.04em; margin-bottom: .18em;
  font-variant-numeric: tabular-nums;
}
.fx-1 .fx-n { color: var(--blue); }
.fx-2 .fx-n { color: var(--mint); }
.fx-3 .fx-n { color: var(--yellow); }
.fx-4 .fx-n { color: var(--coral); }
.fx h3 { font-size: 18px; margin: 0 0 .4em; color: #fff; }
.fx p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0; max-width: 34ch; }

.future-point {
  font-size: clamp(18px, 2.1vw, 22px); line-height: 1.6; color: #fff;
  font-weight: 600; max-width: 56ch;
  margin: clamp(26px, 3.4vw, 40px) 0 1.2em;
  padding-inline-start: 18px; border-inline-start: 4px solid var(--coral);
}
html.a11y-contrast .fx-n, html.a11y-contrast .future-kicker { color: #000 !important; }

/* ----------------------------------------------------- מפת האתר */

.sm-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2.6vw, 30px); margin-top: 1.6em; }
.sm-group { background: var(--bg-2); border-radius: var(--radius-lg); padding: 22px 24px; }
.sm-group h2 { font-size: 21px; margin: 0 0 .25em; }
.sm-note { font-size: 14.5px; color: var(--ink-3); margin: 0 0 .9em; max-width: none; }
.sm-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.sm-list li { margin: 0 0 .42em; }
.sm-list a { font-size: 16px; text-decoration: none; border-bottom: 1px solid transparent; }
.sm-list a:hover { border-bottom-color: currentColor; }
html.a11y-contrast .sm-group { background: #fff !important; border: 1px solid #000 !important; }

/* ======================================= יעדי מגע: מינימום 24, ובפאנל 44 */

/* נמדד חי ב-390 וב-320: עד 26 פקדים לעמוד נפלו מתחת ל-24 פיקסל בציר
   אחד. קישור בתוך משפט פטור מהכלל, אבל קישור פירורי לחם (17 פיקסל),
   פריט בתוכן העניינים (19), כתובת המייל בפוטר (22) והקישור "עוד" (23.8)
   הם פקדים עומדים בפני עצמם ואינם פטורים.
   השיטה: ריפוד אנכי על אלמנט inline. תיבת הפגיעה גדלה, תיבת השורה לא
   זזה, כי ריפוד אנכי על inline אינו משתתף בגובה השורה. איפה שהאלמנט
   חייב להיות inline-block נוסף margin שלילי תואם, כדי שהמיקום יישאר. */

/* פירורי לחם: 13 פיקסל הוא הטקסט הקטן ביותר בעמוד, ועולה מדרגה ל-14.
   17 פיקסל של תיבה הופכים ל-28. */
.crumbs { font-size: 14px; }
.crumbs a { padding-block: 5px; }

/* תוכן העניינים: הקישורים ישבו צמודים, ולכן אי אפשר סתם לנפח אותם -
   שתי תיבות פגיעה היו חופפות. הפריטים מקבלים מרווח, ורק אז ריפוד. */
.toc li { margin-bottom: 4px; }
.toc li a { display: inline-block; padding-block: 3px; }

/* הפוטר: לשתיהן יש קו תחתון שהוא חלק מהעיצוב, ולכן הריפוד נוסף מלמעלה
   בלבד - אחרת הקו יורד והקישור נראה שבור. */
.foot-mail { padding-top: 6px; }
.foot-legal a { padding-top: 6px; }
.foot-col a { padding: 7px 0; }

/* "עוד" ישב על 20.9 על 23.8 ב-320: קטן בשני הצירים. ריפוד עם margin
   שלילי תואם, ובלי שבירת שורה שמקטינה אותו עוד. */
.more {
  display: inline-block; white-space: nowrap;
  padding: 3px 4px; margin: -3px -4px;
}

/* פריט רשימה שכולו קישור אחד הוא פקד עומד בפני עצמו, גם אם הוא יושב
   בזרם הקריאה. 23 פיקסל הופכים ל-29, והשורה בת 30.6 הפיקסלים בולעת את
   הריפוד בלי ששתי תיבות פגיעה ייגעו. קישור בתוך משפט אינו מקבל את זה. */
main.doc li > a:only-child, main.term li > a:only-child {
  display: inline-block; padding-block: 3px;
}

.prevnext a { display: inline-block; padding-block: 4px; }
.sm-list a { display: inline-block; padding-block: 3px; }
/* גם כאן קו תחתון מעוצב, ולכן רק מלמעלה. */
.byline-who a { padding-top: 6px; }

/* הפאנל של הנגישות הוא המקום היחיד באתר שבו המינימום הוא 44 ולא 24,
   כי הוא הפקד שנועד למי שהמגע שלו פחות מדויק. כפתורי הגודל עמדו על
   34 על 34 וה-X על 23 על 26, באתר שמפרסם הצהרת נגישות. */
.a11y-steps button { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
.a11y-x {
  width: 44px; height: 44px; padding: 0;
  margin-block: -9px; margin-inline-end: -10px;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
}
.a11y-opt, .a11y-reset { padding-block: 13px; }
.a11y-note a { padding-block: 13px; }

/* ============================== עלות המעבד בטלפון: דילוג על מה שמחוץ למסך */

/* נתוני מעבדה בלבד. הגיליון הוא כ-100 קילובייט שנחשב מחדש מול כל ה-DOM,
   בעוד שרק חמישית ממנו בכלל רלוונטית לעמוד נתון, ובטלפון מוחנק פי ארבעה
   זה זמן חסימה של מאות מילישניות. content-visibility אומר לדפדפן לא
   לחשב סגנון, פריסה וציור לתת-עץ שעוד לא הגיע למסך, ו-contain-intrinsic-size
   שומר לו מקום כדי שהגלילה לא תקפוץ. auto שומר את הגובה האמיתי אחרי
   המדידה הראשונה, ולכן המספר שכאן הוא רק ניחוש לפתיחה.
   מה לא נכנס לכאן, ולמה: content-visibility גורר contain: paint, וזה
   יוצר הקשר ערימה. כל אלמנט שסצנת החשיפה מזיזה (.tsec, .faq details,
   .card, .trust > div, .svc-col, .step, .contact, .gl-group-head) נשאר
   בחוץ - הקשר ערימה על אלמנט כזה הוא בדיוק מה ששבר את כרטיס הטופס
   ב-335 עמודים, כי פסאודו עם z-index שלילי נלכד מעל הרקע במקום מתחתיו.
   זו הסיבה שסעיפי המונח, שהם הגוש הגדול ביותר בעמוד הארוך ביותר, אינם
   כאן. הם דורשים עטיפה שאינה מונפשת, וזו תבנית ולא גיליון סגנונות. */
.site-foot {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.gterm {
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
}
.tbl {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}