/* ============================================================
   NEO — styles
   ------------------------------------------------------------
   אין כאן ולו ערך צבע, מרווח או גודל אחד שנכתב קשיח.
   הכל מגיע מ-tokens.css, וכל רכיב יורש את הצבעים מההקשר
   שהוא יושב בו (.on-sheet או .on-plate), ולכן אין לאף רכיב
   גרסה שנייה.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-4);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-weight: var(--w-reg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold-mark, var(--gold-200));
  outline-offset: 3px;
  border-radius: var(--r-hair);
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: var(--sp-1);
  z-index: var(--z-skip);
  background: var(--gold-100); color: var(--bone);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-hair);
}
.skip:focus { inset-inline-start: var(--sp-2); }

.shell {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: var(--z-body);
}

/* ============================================================
   הגיליון: קווי הגריד ברקע
   ------------------------------------------------------------
   זה מה שהופך את הרקע לגיליון שרטוט במקום למשטח ריק.
   דהוי מאוד בכוונה. אם רואים אותו, הוא חזק מדי.
   ============================================================ */

.plate, .sheet, .foot { position: relative; }

.rules {
  position: absolute; inset: 0; z-index: var(--z-grid);
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--sp-4) var(--sp-4);
}

/* רדיד זהב על הפלטה. שתי הילות רחבות מאוד ורכות מאוד,
   שנותנות לשחור עומק במקום להיראות כמו מלבן שטוח. */
.foil {
  position: absolute; inset: 0; z-index: var(--z-grid);
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 52% at 50% -8%,  rgba(45,123,255,.14), transparent 62%),
    radial-gradient(ellipse 46% 40% at 92% 18%,  rgba(95,165,255,.07), transparent 68%),
    radial-gradient(ellipse 58% 46% at 6% 96%,   rgba(22,82,204,.09),  transparent 70%);
}

.plate { background: var(--plate); color: var(--bone); overflow: hidden; }
.sheet { background: var(--sheet); color: var(--ink); overflow: hidden; }

/* ============================================================
   הערות שוליים בכתב מונו
   ============================================================ */

.anno {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-3);
  direction: ltr;
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--hair-soft);
}
:dir(rtl) .anno { justify-content: flex-end; }

/* ============================================================
   ניווט
   ============================================================ */

.nav { padding-block: var(--sp-3); position: relative; z-index: var(--z-nav); }
.nav-in { display: flex; align-items: center; gap: var(--sp-3); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--fg); flex: none; }
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-lg);
  letter-spacing: .06em;
  line-height: 1;
  direction: ltr;
}

.nav-end { display: flex; align-items: center; gap: var(--sp-3); margin-inline-start: auto; }

.lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--fg-3); direction: ltr;
}
.lang button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--fg-3); padding: 4px 2px;
  border-bottom: 1px solid transparent;
  position: relative;
  transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
/* מרחיב את אזור הלחיצה ל-44 פיקסל בלי להזיז דבר ויזואלית.
   הקו התחתון הוא סמן המצב הפעיל, ולכן אסור לרפד אותו כלפי מטה. */
.lang button::before { content: ""; position: absolute; inset: -9px -14px; }
.lang button[aria-pressed="true"] { color: var(--gold-text); border-bottom-color: var(--gold-mark); }
@media (hover: hover) and (pointer: fine) { .lang button:hover { color: var(--fg); } }

/* ============================================================
   כפתורים
   ------------------------------------------------------------
   btn-gold הוא המקום היחיד בכל האתר שבו הזהב מלא ומוצק,
   ולכן הוא תמיד הדבר הבוהק ביותר על המסך.
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1);
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm);
  padding: 14px 28px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-tap) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
.btn:active { transform: scale(.975); }
.btn-sm { padding: 10px 20px; font-size: var(--t-xs); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-100), var(--gold-300) 46%, var(--gold-500));
  color: #04101F;
  box-shadow: var(--glow-gold);
}
.btn-line { background: transparent; border-color: var(--hair); color: var(--fg); }

@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-200), var(--gold-400) 46%, var(--gold-600));
    box-shadow: var(--glow-gold-strong);
  }
  .btn-line:hover { border-color: var(--gold-mark); color: var(--gold-text); }
}

/* ============================================================
   היירו
   ============================================================ */

.hero { padding-block: var(--sp-3) var(--sp-4); }

h1 {
  font-weight: var(--w-light);
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  max-width: 15ch;
}
h1 .l1, h1 .l2 { display: block; }
h1 .l2 { font-weight: var(--w-bold); }

.hero-sub {
  max-width: 46ch;
  font-size: var(--t-md);
  font-weight: var(--w-light);
  color: var(--fg-2);
}

.hero-cta {
  display: inline-flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3);
}

/* ============================================================
   המדידה
   ============================================================ */

.proof { padding-block: var(--sp-3) var(--sp-4); }
.metric { display: flex; flex-direction: column; gap: var(--sp-1); }

.metric-n {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-4xl);
  line-height: 1;
  letter-spacing: var(--ls-display);
  direction: ltr;
  font-variant-numeric: tabular-nums;
  color: var(--gold-400);
}
:dir(rtl) .metric-n { text-align: right; }

.metric-k { font-size: var(--t-base); font-weight: 600; color: var(--fg); }
.metric-note { font-size: var(--t-sm); font-weight: var(--w-light); color: var(--fg-3); max-width: 34ch; }

/* ============================================================
   מקטעים על הגיליון
   ============================================================ */

.sec { padding-block: var(--sec-y); border-top: 1px solid var(--hair-soft); }
.sec:first-of-type { border-top: 0; }

h2 {
  font-weight: var(--w-bold);
  /* גדול בהרבה מקודם, אבל תמיד מתחת לכותרת הראשית. הכותרת
     הראשית חיה בתוך מסך הלפטופ ולכן היא חסומה בכ-64px, ו-t-3xl
     המלא היה מטפס מעליה והופך את ההיררכיה. */
  font-size: clamp(2.3rem, 4.9vw, 3.55rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  max-width: 20ch;
  text-wrap: balance;
}

/* --- הניגוד: שני טורים --- */

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.split-col {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-top: var(--sp-3); border-top: 1px solid var(--hair);
}
.split-col p { max-width: 42ch; font-weight: var(--w-light); color: var(--fg-2); }
.split-col.is-lead { border-top-color: var(--gold-mark); border-top-width: 2px; }
.split-col.is-lead p { color: var(--fg); }

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

   הטור של ההצעה הוא הבהיר משניהם. הטור השני מתאר את הבעיה
   ולכן הוא משני, והכחול לא נכנס לכאן בכוונה: הצ׳יפים מתחת
   לכותרת של ההצעה כבר כחולים, וכותרת כחולה מעליהם הייתה
   מחזירה את שני הדברים לאותו גוש. */
.col-k {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg-2);
}
.is-lead .col-k { color: var(--fg); }

.lead-line {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg) !important;
}
.day { direction: rtl; }
:dir(ltr) .day { direction: ltr; }

/* ============================================================
   שאלות
   ============================================================ */

.faq { margin-top: var(--sp-4); border-top: 1px solid var(--hair); }

.faq details { border-bottom: 1px solid var(--hair-soft); }

.faq summary {
  list-style: none; cursor: pointer;
  padding-block: var(--sp-3);
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--w-bold); font-size: var(--t-md);
  line-height: var(--lh-snug); color: var(--fg);
  transition: color var(--dur-hover) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }

/* סימן פלוס שהופך לקו, בנוי משני גרדיאנטים ובלי ספריית אייקונים */
.faq summary::after {
  content: ""; flex: none; margin-inline-start: auto;
  width: 12px; height: 12px; align-self: center;
  background:
    linear-gradient(var(--gold-mark), var(--gold-mark)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--gold-mark), var(--gold-mark)) center / 1.5px 12px no-repeat;
  transition: transform var(--dur-hover) var(--ease-out);
}
.faq details[open] summary::after {
  transform: rotate(90deg);
  background: linear-gradient(var(--gold-mark), var(--gold-mark)) center / 12px 1.5px no-repeat;
}
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--gold-text); } }

.faq .ans { padding-bottom: var(--sp-3); }
.faq .ans p {
  max-width: 62ch; font-weight: var(--w-light); color: var(--fg-2);
}

/* ============================================================
   פוטר
   ============================================================ */

.foot { background: var(--plate); color: var(--bone); padding-block: var(--sp-4); overflow: hidden; }
.foot-in { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.foot-nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--t-sm); }
.foot-nav a {
  color: var(--fg-2); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover { color: var(--fg); border-bottom-color: var(--gold-mark); }
}

.foot-tel {
  position: relative;
  font-family: var(--font-mono); font-size: var(--t-sm);
  color: var(--gold-text); direction: ltr;
  border-bottom: 1px solid var(--hair-gold); padding-bottom: 2px;
  margin-inline-start: auto;
}

/* יעדי נגיעה. הפסאודו מרחיב את האזור הלחיץ ל-44px בלי לגעת
   בפריסה ובלי לשנות שום דבר במראה. */
.foot-tel::before,
.brand::before { content: ""; position: absolute; inset: -10px -6px; }
.brand { position: relative; }
/* הלוגו המלא בפוטר. הקובץ מחזיק כתר, שם וקו זיהוי בחתיכה אחת,
   ולכן אין פה לוקאפ מורכב אלא תמונה אחת שמרכזת את עצמה.

   הרוחב גדול מזה שבתפריט הצד, כי כאן הזהב עומד על רקע נקי בלי
   קישורים סביבו, ובגודל קטן הקווים הדקים של הכתר מתחילים
   להתאחד ולהיראות מרוחים. */
.foot-mark {
  display: block;
  width: min(58vw, 200px);
  margin-inline: auto;
}
.foot-mark img { width: 100%; height: auto; display: block; }

.foot-anno { width: 100%; margin-top: var(--sp-3); border-bottom: 0; border-top: 1px solid var(--hair-soft); padding-top: var(--sp-2); padding-bottom: 0; }

/* ============================================================
   רציף צף
   ============================================================ */

.dock {
  position: fixed;
  bottom: max(var(--sp-3), env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--sp-3);
  z-index: var(--z-dock);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-hover) var(--ease-out),
              transform var(--dur-enter) var(--ease-out),
              visibility var(--dur-enter);
}
.dock.show { opacity: 1; visibility: visible; transform: none; }

/* ============================================================
   כניסות
   ------------------------------------------------------------
   רכה מאוד ופעם אחת בלבד לכל אלמנט. בלי אפקטים בגלילה חוזרת,
   כי חזרה על אנימציה היא מה שגורם לאתר להרגיש זול.
   ============================================================ */

/* ============================================================
   כניסה
   ------------------------------------------------------------
   CSS טהור, בלי JavaScript, בלי משקיפים ובלי מאזיני גלילה.

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

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

/* בהיירו אין יותר אלמנט להנפיש: הוא תמונה אחת בלבד. */

/* מנפיש תזוזה בלבד ולעולם לא שקיפות.
   אם האנימציה לא תרוץ מסיבה כלשהי, הכשל הגרוע ביותר הוא
   שהטקסט יושב 14 פיקסל נמוך יותר. אין תרחיש שבו הוא נעלם. */
@keyframes rise {
  from { transform: translateY(14px); }
}

/* ============================================================
   מקום שמור לתיק עבודות
   ============================================================ */

.work {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-4);
}
.work a { border: 1px solid var(--hair); border-radius: var(--r-hair); overflow: hidden; display: block; }
.work img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ============================================================
   רספונסיבי
   ============================================================ */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-3); }
}

@media (max-width: 620px) {
  .hero-cta .btn { width: 100%; }
  .nav-in { gap: var(--sp-2); }
  .nav-end { gap: var(--sp-2); }
  .foot-tel { margin-inline-start: 0; }
  .foot-nav { width: 100%; }
  .dock { inset-inline: var(--sp-2); }
  .rules { background-size: var(--sp-3) var(--sp-3); }
}

@media (prefers-reduced-motion: no-preference) {
}

@keyframes draw {
  0%   { opacity: 0;   transform: scaleX(.06); }
  14%  { opacity: .85; transform: scaleX(1); }
  58%  { opacity: .85; transform: scaleX(1); }
  100% { opacity: 0;   transform: scaleX(1); }
}
@keyframes tick {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  58%  { opacity: 1; }
  100% { opacity: 0; }
}

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

.plate {
  --mx: 50%;
  --my: 30%;
}

.gleam {
  position: absolute; inset: 0; z-index: var(--z-grid);
  pointer-events: none;
  background: radial-gradient(
    460px circle at var(--mx) var(--my),
    rgba(95,165,255,.13),
    rgba(45,123,255,.05) 42%,
    transparent 70%);
  transition: opacity 600ms var(--ease-out);
}

/* ============================================================
   הכתר הגדול
   ============================================================ */

.crest {
  width: clamp(46px, 5.4vw, 72px);
  height: auto;
  color: var(--gold-mark);
  display: block;
  margin-bottom: var(--sp-2);
  filter: drop-shadow(0 0 22px rgba(45,123,255,.4));
}
/* בלי margin auto: הוא דחף את הכתר לקצה ההפוך ב-RTL */

/* ============================================================
   מסגרת הגיליון
   ------------------------------------------------------------
   קו זהב דק בשוליים עם סימני פינה, כמו בגיליון שרטוט אמיתי.
   הוא ממלא את השוליים הריקים במבנה במקום בכלום.
   ============================================================ */


/* ============================================================
   עבודות
   ------------------------------------------------------------
   סטודיו שבונה אתרים חייב להראות אתר. המסגרות הן מה שהופך
   צילום מסך לאובייקט, ובלעדיהן הוא נראה כמו תמונה שהודבקה.
   ============================================================ */

.work-sec { background: var(--sheet-raised); }

.case {
  margin: 0;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-4);
}

.case-stage { position: relative; padding-bottom: var(--sp-3); }

/* חלון הדפדפן */
.win {
  border-radius: 8px;
  overflow: hidden;
  background: var(--plate);
  border: 1px solid var(--hair);
  box-shadow: 0 30px 70px -34px rgba(2,6,14,.75), 0 2px 8px -3px rgba(2,6,14,.4);
}
.win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--plate-raised);
  border-bottom: 1px solid rgba(242,247,255,.08);
  direction: ltr;
}
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242,247,255,.2); flex: none; }
.win-url {
  margin-inline-start: 10px;
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--bone-3);
  background: rgba(242,247,255,.05);
  padding: 3px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(242,247,255,.06);
}
.win img { width: 100%; height: auto; display: block; }

/* הטלפון, חופף לפינה */
.phone {
  position: absolute;
  bottom: 0;
  inset-inline-end: -18px;
  width: 19%;
  min-width: 108px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--plate);
  border: 3px solid var(--plate-raised);
  box-shadow: 0 24px 50px -22px rgba(2,6,14,.8);
}
.phone img { width: 100%; height: auto; display: block; }

/* הטקסט לצד התצוגה */
.case-meta { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
/* "אירוח · טבריה" במונו עם ריווח אותיות של 0.14em נקרא כמו
   מחרוזת בקוד, והנקודה באמצע נראית כמו תו הפרדה של מכונה.
   אותו תיקון כמו בכל שאר התוויות באתר: גופן הגוף, גודל
   אמיתי, בלי ריווח ובלי אותיות גדולות. */
.case-k {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gold-text);
}
.case-meta h3 {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--t-xl); line-height: var(--lh-display); color: var(--fg);
}
.case-p { font-weight: var(--w-light); color: var(--fg-2); max-width: 40ch; }

.case-list { display: flex; flex-direction: column; gap: 7px; margin-top: var(--sp-1); }
.case-list li {
  position: relative; padding-inline-start: 18px;
  font-size: var(--t-sm); font-weight: var(--w-light); color: var(--fg-2);
}
.case-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .68em;
  width: 6px; height: 6px; background: var(--gold-mark);
}
.case-link { margin-top: var(--sp-2); }

@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; gap: var(--sp-3); }
  .phone { width: 22%; inset-inline-end: -10px; }
}

@media (max-width: 620px) {
}

/* ============================================================
   כרטיסים
   ------------------------------------------------------------
   קודם אלה היו טורי טקסט חשופים עם קו דק מעליהם, וזה נקרא
   כמו מסמך ולא כמו אתר. כרטיס נותן לתוכן גוף, וגוף הוא מה
   שהעין תופסת לפני שהיא קוראת מילה.
   ============================================================ */

.cards li {
  padding: var(--sp-3);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--gold-mark);
  border-radius: var(--r-hair);
  background: var(--bg-raised);
  gap: var(--sp-1);
  transition: transform var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cards li:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -26px rgba(2,6,14,.6);
  }
}

/* ============================================================
   הלוגו המלא ליד הכותרת
   ------------------------------------------------------------
   הלוקאפ המקורי, בלי שחזורים. הוא אנכי ולכן הוא יושב לצד
   הכותרת ולא מעליה, וכך הוא גם ממלא את החצי שהיה ריק.
   ============================================================ */

.hero-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: clamp(var(--sp-3), 4vw, var(--sp-5));
  align-items: center;
}

@media (max-width: 860px) {
  .hero-row { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ============================================================
   קישורי הניווט בבר העליון
   ============================================================ */

/* הקישורים לוקחים את השטח הפנוי שבין הלוגו לכפתור ומתפרסים
   בו, במקום להתקבץ ליד הכפתור ולהשאיר את הלוגו לבד בקצה
   השני. הרווח ביניהם גדל גם הוא. */
.nav-links {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: clamp(var(--sp-3), 2.6vw, var(--sp-4));
  margin-inline-start: var(--sp-3);
  font-size: var(--t-sm);
}
.nav-links a {
  color: var(--fg-2);
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: 1px; background: var(--gold-mark);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-hover) var(--ease-out);
}
:dir(ltr) .nav-links a::after { transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--fg); }
  .nav-links a:hover::after { transform: scaleX(1); }
}

.nav-end { margin-inline-start: auto; }

/* ============================================================
   התפריט במסך צר
   ------------------------------------------------------------
   קודם הקישורים פשוט נעלמו מתחת ל-980, ובנייד נשארו רק
   הלוגו, הכפתור והשפה. זה אומר שמי שנכנס מהטלפון, כלומר רוב
   הנכנסים, לא יכול היה לדעת שיש בעמוד עבודות או שאלות.

   חמישה קישורים לא נכנסים בשורה אחת לצד הלוגו והכפתור ברוחב
   390, ולכן הם יורדים לשורה משלהם וממורכזים בה. */
@media (max-width: 980px) {
  .nav-in { flex-wrap: wrap; row-gap: var(--sp-2); }
  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-inline-start: 0;
    gap: clamp(9px, 3.2vw, var(--sp-3));
    font-size: var(--t-xs);
  }
}

/* מתחת ל-620 הכל חוזר לשורה אחת, כמו במחשב. זה נכנס רק אחרי
   שכל רכיב מתכווץ: הקישורים ל-11, הכפתור והשפה ל-11, והריפוד
   של הגיליון מ-18 ל-11. */
@media (max-width: 620px) {
  .nav-in {
    flex-wrap: nowrap;
    gap: 6px;
    padding-inline: 8px;
  }
  .nav-links {
    order: 0;
    width: auto;
    justify-content: flex-start;
    margin-inline-start: 6px;
    gap: 6px;
    font-size: var(--t-2xs);
  }
  .nav-links a { padding-block: 9px; }
  .nav-end { gap: 6px; }
  .nav-end .btn { padding: 8px 10px; font-size: var(--t-2xs); }
  .lang { font-size: var(--t-2xs); gap: 4px; }
}

/* ------------------------------------------------ רספונסיבי */

@media (max-width: 760px) {
  /* מתחת לרוחב הזה ההטיה הופכת את הטקסט לקשה לקריאה,
     ולכן המסך מתיישר והלפטופ נשאר רק כמסגרת. */
  .laptop, :dir(ltr) .laptop { transform: none; }
  .stage3d { perspective: none; padding-block: var(--sp-3) var(--sp-4); }
  .lid-screen { grid-template-columns: 1fr; min-height: 0; }
  .lid-screen .lockup { max-width: 148px; justify-self: start; }
  :dir(rtl) .lid-screen .lockup { justify-self: end; }
  .lid-screen h1 { max-width: none; }
  .glowfloor { display: none; }
}

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

/* ============================================================
   מקטעים כהים
   ------------------------------------------------------------
   הגריד ירד. במקומו, קצב: בהיר, כהה, בהיר, כהה. זה מה שמונע
   מהעמוד להרגיש כמו מסמך אחד ארוך.
   ============================================================ */

.sec.dark {
  background: var(--plate);
  color: var(--bone);
  border-top: 0;
  position: relative;
  overflow: hidden;
}
.sec.dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 54% at 78% -6%, rgba(45,123,255,.11), transparent 64%),
    radial-gradient(ellipse 46% 32% at 10% 48%, rgba(22,82,204,.085), transparent 70%);
}
.sec.dark > .shell { position: relative; }
.sec.dark + .sec.dark { border-top: 1px solid var(--line-bone); }

/* המקטע הכהה לא צריך רקע מוגבה לכרטיסים, הוא כבר כהה */
.sec.dark .cards li { background: rgba(242,247,255,.028); }

/* ============================================================
   האובייקטים הוויזואליים
   ------------------------------------------------------------
   אתר שמוכר אתרים צריך להראות אתר, לא לכתוב עליו. שלושת
   האובייקטים מצוירים ב-CSS בלבד: אפס תמונות, אפס בקשות רשת,
   וחדים בכל רזולוציה.
   ============================================================ */

.viz {
  position: relative;
  height: 132px;
  margin-bottom: var(--sp-3);
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(165deg, #14171C, #0A0C0F);
  box-shadow: inset 0 0 0 1px rgba(45,123,255,.2), 0 14px 30px -20px rgba(0,0,0,.9);
}
.viz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% -12%, rgba(45,123,255,.14), transparent 66%);
}

/* ------------------------------------------------------------
   01 אתר — כמה מגיעים, פעולה אחת

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

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

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

.viz-site i {
  position: absolute;
  left: 50%;
  bottom: calc(24% + 9px);
  /* האורך והזווית נבחרו יחד כדי שהדמות תשב במרכז האנכי:
     הקווים עולים 50% מהגובה, והצומת יושב ב-24% מלמטה. */
  height: 68%;
  width: 1.5px;
  margin-left: -0.75px;
  transform-origin: 50% 100%;
  background: linear-gradient(to top,
    var(--gold-300),
    rgba(45, 123, 255, .50) 70%,
    rgba(45, 123, 255, .32) 100%);
}
.viz-site i:nth-child(1) { transform: rotate(-42deg); }
.viz-site i:nth-child(2) { transform: rotate(-21deg); }
.viz-site i:nth-child(3) { transform: rotate(0deg); }
.viz-site i:nth-child(4) { transform: rotate(21deg); }
.viz-site i:nth-child(5) { transform: rotate(42deg); }

/* הנקודות יושבות בקצה של כל קו. המיקומים מחושבים ולא
   משוערים: הקו יוצא מ-(50%, 76%) באורך 68% מהגובה, ולכן
   הקצה הוא 50% ± 68%·sin(θ)·0.625 ברוחב, ו-76% − 68%·cos(θ)
   בגובה. לכן הן נשארות מוצמדות לקצוות בכל גודל מסך. */
.viz-site u {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-300);
  background: rgba(45, 123, 255, .12);
}
.viz-site u:nth-of-type(1) { left: 21.6%; top: 22.5%; }
.viz-site u:nth-of-type(2) { left: 35.8%; top: 12.4%; }
.viz-site u:nth-of-type(3) { left: 50%;   top:  8.9%; }
.viz-site u:nth-of-type(4) { left: 64.2%; top: 12.4%; }
.viz-site u:nth-of-type(5) { left: 78.4%; top: 22.5%; }

/* הפעולה. אותו צומת בדיוק שבמרכז שני האובייקטים האחרים,
   כדי ששלושתם יישמעו כמו קול אחד. */
.viz-site b {
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 26px;
  height: 26px;
  margin: 0 0 -13px -13px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-200), var(--gold-500));
  box-shadow: 0 0 18px -2px rgba(45, 123, 255, .6);
}

/* ------------------------------------------------------------
   02 מערכת — מרכז וסובבים

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

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

   הזוויות והאורכים הם אחוזים מהרוחב, והמכל נעול על 16:10,
   ולכן הצורה נשארת זהה בכל גודל מסך בלי שאלה של יחס.
   ------------------------------------------------------------ */

.viz-app i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32.4%;
  height: 1.5px;
  margin-top: -0.75px;
  transform-origin: 0 50%;
  /* נמוג בשני הקצוות, ולכן הוא לא נוגע לא במרכז ולא בלוויין
     ואין צורך לחשב איפה בדיוק להפסיק אותו */
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-300) 34%,
    var(--gold-300) 66%,
    transparent 100%);
}
.viz-app i:nth-child(1) { transform: rotate(-27.6deg); }
.viz-app i:nth-child(2) { transform: rotate(27.6deg); }
.viz-app i:nth-child(3) { transform: rotate(207.6deg); }
.viz-app i:nth-child(4) { transform: rotate(152.4deg); }

.viz-app span {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-300);
  background: rgba(45, 123, 255, .1);
}
.viz-app span:nth-child(5) { left: 78.75%; top: 26%; }
.viz-app span:nth-child(6) { left: 78.75%; top: 74%; }
.viz-app span:nth-child(7) { left: 21.25%; top: 26%; }
.viz-app span:nth-child(8) { left: 21.25%; top: 74%; }

.viz-app b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-200), var(--gold-500));
  box-shadow: 0 0 18px -2px rgba(45, 123, 255, .6);
}

/* ------------------------------------------------------------
   התנועה בשני האובייקטים הראשונים

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

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

   הנקודה הנעה היא ‎::before‎ בתוך הקו עצמו, ולכן היא יורשת את
   הסיבוב שלו ואין צורך לחשב לה מסלול. כל התנועה עטופה
   בהעדפת התנועה של המשתמש, ובלעדיה שלושתן עומדות.
   ------------------------------------------------------------ */

.viz-site i::before,
.viz-app i::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-100);
  box-shadow: 0 0 9px 1px rgba(70, 214, 255, .65);
  opacity: 0;
}

/* הקו של האתר עומד: הנקודה יורדת בו מהקצה אל הצומת */
.viz-site i::before { left: 50%; top: 0; margin: -2.5px 0 0 -2.5px; }

/* הקו של המערכת שוכב: הפעימה יוצאת מהמרכז אל היושב */
.viz-app i::before { top: 50%; left: 0; margin: -2.5px 0 0 -2.5px; }

@keyframes fall {
  0%        { top: 0;    opacity: 0; }
  9%        { opacity: 1; }
  46%       { top: 100%; opacity: 1; }
  55%, 100% { top: 100%; opacity: 0; }
}

@keyframes reach {
  0%        { left: 0;    opacity: 0; }
  6%        { opacity: 1; }
  22%       { left: 100%; opacity: 1; }
  30%, 100% { left: 100%; opacity: 0; }
}

/* היושב נדלק ברגע שהפעימה מגיעה אליו */
@keyframes wake {
  0%, 36%, 100% {
    box-shadow: inset 0 0 0 1.5px var(--gold-300);
    background: rgba(45, 123, 255, .1);
  }
  23% {
    box-shadow: inset 0 0 0 2px var(--gold-100), 0 0 16px 0 rgba(45, 123, 255, .75);
    background: rgba(120, 180, 255, .55);
  }
}

/* הצומת נושם. הוא לא מגיב לכל נחיתה בנפרד — חמש תגובות
   נפרדות היו קופצניות — אלא מחזיק פעימה אחת רגועה מתחת. */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 18px -2px rgba(45, 123, 255, .60); }
  50%      { box-shadow: 0 0 25px  0px rgba(45, 123, 255, .80); }
}

@media (prefers-reduced-motion: no-preference) {
  /* העיתויים לא אחידים: 0.7 ‏1.5 ‏2.4 ‏3.2 שניות, ומתחילים
     מהאמצע החוצה. קצב קבוע נקרא כמטרונום. */
  .viz-site i::before { animation: fall 4.2s var(--ease-io) infinite; }
  .viz-site i:nth-child(3)::before { animation-delay: 0s; }
  .viz-site i:nth-child(1)::before { animation-delay: .7s; }
  .viz-site i:nth-child(4)::before { animation-delay: 1.5s; }
  .viz-site i:nth-child(2)::before { animation-delay: 2.4s; }
  .viz-site i:nth-child(5)::before { animation-delay: 3.2s; }

  .viz-site b { animation: breathe 4.2s var(--ease-io) infinite; }

  /* סיבוב עם כיוון השעון: ימין-עליון, ימין-תחתון, שמאל-תחתון,
     שמאל-עליון. הקו והיושב חולקים השהיה, ולכן הוא נדלק
     בדיוק כשהפעימה נוגעת בו. */
  .viz-app i::before { animation: reach 5.2s var(--ease-io) infinite; }
  .viz-app span      { animation: wake  5.2s var(--ease-io) infinite; }

  .viz-app i:nth-child(1)::before,
  .viz-app span:nth-child(5) { animation-delay: 0s; }
  .viz-app i:nth-child(2)::before,
  .viz-app span:nth-child(6) { animation-delay: 1.3s; }
  .viz-app i:nth-child(4)::before,
  .viz-app span:nth-child(8) { animation-delay: 2.6s; }
  .viz-app i:nth-child(3)::before,
  .viz-app span:nth-child(7) { animation-delay: 3.9s; }
}

/* --- 03 אוטומציה --- */
.viz-flow span {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gold-300);
  background: rgba(45,123,255,.1);
  top: 50%; transform: translateY(-50%);
}
.viz-flow .n1 { inset-inline-start: 15%; }
.viz-flow .n2 { inset-inline-start: 50%; margin-inline-start: -13px;
  background: linear-gradient(140deg, var(--gold-200), var(--gold-500));
  box-shadow: 0 0 18px -2px rgba(45,123,255,.6); }
.viz-flow .n3 { inset-inline-end: 15%; }
.viz-flow i {
  position: absolute; top: 50%; height: 1.5px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
}
.viz-flow .w1 { inset-inline-start: calc(15% + 26px); width: calc(35% - 39px); }
.viz-flow .w2 { inset-inline-end: calc(15% + 26px); width: calc(35% - 39px); }
.viz-flow .pulse {
  position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-600); box-shadow: 0 0 10px 2px rgba(70,214,255,.7);
  inset-inline-start: 18%;
}
@media (prefers-reduced-motion: no-preference) {
  .viz-flow .pulse { animation: travel 3.4s var(--ease-io) infinite; }
}
@keyframes travel {
  0%, 8%    { inset-inline-start: 20%;  opacity: 0; }
  16%       { opacity: 1; }
  50%       { inset-inline-start: 50%; opacity: 1; }
  84%       { inset-inline-start: 79%; opacity: 1; }
  92%, 100% { inset-inline-start: 79%; opacity: 0; }
}

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

.stack {
  display: flex; flex-direction: column-reverse; gap: 3px;
  margin: var(--sp-2) 0 var(--sp-3);
  direction: ltr;
}
.stack li {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: var(--r-hair);
  white-space: nowrap;
}

/* הכבדה: אפורה, דחוסה, ונמשכת מטה */
.stack.heavy li {
  background: rgba(230,238,249,.05);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px rgba(230,238,249,.08);
}
.stack.heavy li:nth-child(n+9) { opacity: .55; }

/* הקלה: כחולה, שלושה חלקים, ונגמרת */
.stack.light li {
  background: linear-gradient(100deg, rgba(22,82,204,.16), rgba(45,123,255,.06));
  color: var(--gold-400);
  box-shadow: inset 0 0 0 1px rgba(45,123,255,.38);
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .stack li { animation: stackin 420ms var(--ease-out) both; }
  .stack li:nth-child(1){animation-delay:40ms}   .stack li:nth-child(2){animation-delay:80ms}
  .stack li:nth-child(3){animation-delay:120ms}  .stack li:nth-child(4){animation-delay:160ms}
  .stack li:nth-child(5){animation-delay:200ms}  .stack li:nth-child(6){animation-delay:240ms}
  .stack li:nth-child(7){animation-delay:280ms}  .stack li:nth-child(8){animation-delay:320ms}
  .stack li:nth-child(9){animation-delay:360ms}  .stack li:nth-child(10){animation-delay:400ms}
  .stack li:nth-child(11){animation-delay:440ms} .stack li:nth-child(12){animation-delay:480ms}
}
@keyframes stackin { from { transform: translateY(6px); } }


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

::selection {
  background: rgba(45,123,255,.34);
  color: var(--bone);
}

html {
  caret-color: var(--gold-300);
  accent-color: var(--gold-200);
  scrollbar-width: thin;
  scrollbar-color: #1E3559 var(--plate);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--plate); }
::-webkit-scrollbar-thumb {
  background: #1E3559;
  border: 3px solid var(--plate);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover { background: #2A4B7A; }

/* ספרות ברוחב אחיד בכל מקום שבו מספר נקרא כנתון, כדי שהוא
   לא ירקוד כשהערך מתחלף. טבעת הפוקוס כבר מוגדרת בראש הקובץ
   ופותרת לאותו כחול, ולכן אין כאן כלל שני. */
.metric-n, .spec-sheet dd, .track-day, .win-url, .foot-tel {
  font-variant-numeric: tabular-nums;
}


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

.offer {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.offer-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(var(--sp-3), 5vw, var(--sp-5));
  /* בלי קו מפריד. שלוש השורות מופרדות ברווח בלבד, ולכן
     הרווח גדל: קו עושה את ההפרדה בשביל העין, ובלעדיו
     המרחק צריך לעשות אותה לבדו. אבל לא כפול — הקפיצה
     מ-45 ל-84 פירקה את המקטע לשלושה מקטעים נפרדים במקום
     לשמור אותו כאחד. הביניים הוא הטווח שבין שני הערכים. */
  padding-block: clamp(var(--sp-4), 4.4vw, var(--sp-5));
}
.offer-row:first-child { padding-top: 0; }
.offer-row:last-child  { padding-bottom: 0; }

/* הצד מתחלף בכל שורה שנייה */
.offer-row:nth-child(even) .offer-art { order: 2; }

.offer-art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: var(--r-hair);
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(45,123,255,.10), transparent 68%),
    var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
  overflow: hidden;
}
/* האובייקט המצויר תופס את השורה, במקום להצטמצם לאייקון */
.offer-art .viz {
  width: 78%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 0;
}

.offer-txt h3 {
  font-size: var(--t-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.offer-txt p {
  font-weight: var(--w-light);
  color: var(--fg-2);
  max-width: 46ch;
}

@media (max-width: 780px) {
  .offer { gap: var(--sp-4); }
  .offer-row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }
  .offer-row:nth-child(even) .offer-art { order: 0; }
  .offer-art .viz { width: 86%; }

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

     הפריסה עצמה משתנה. האיור מצטמצם לתג מרובע של 104 והוא
     יושב בשורה אחת עם הכותרת, והפסקה נפרסת מתחתיהם על כל
     הרוחב. שתי עמודות בשורה העליונה ואחת בתחתונה, כלומר
     הרכב ולא רשימה. גם הפסקה מרוויחה: היא מקבלת 390 במקום
     חצי מהם. */
  .offer-row {
    /* הכותרת הארוכה מכולן, "אתרים ודפי נחיתה", היא 131
       פיקסלים בגופן של האתר. הרוחב כאן הוא 200, והמרווח בין
       השניים ירד מ-13 ל-9 כדי לממן את זה, כך שלכותרת נשארים
       145 ומהם 14 פנויים. */
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas:
      "art head"
      "text text";
    column-gap: 9px;
    row-gap: var(--sp-2);
    align-items: center;
  }
  .offer-art {
    grid-area: art;
    /* גובה קבוע ולא יחס. עם יחס, כל פיקסל שהרוחב מקבל מוסיף
       גם לגובה, והמסגרת גדלה לשני הכיוונים במקום לאחד.
       154 הוא הגובה שהיה כשהרוחב היה 192. */
    /* הרוחב האחרון שאפשר לקחת בלי לגעת בכותרת: המסגרת יוצאת
       אל תוך שוליי הגיליון ונוגעת בשפת המסך. 18 פיקסלים
       נוספים שלא באו מאף אחד. הפינות שנוגעות בשפה מיושרות,
       כי עיגול על קצה המסך נקרא כחיתוך. */
    width: calc(100% + var(--pad-x));
    height: 154px;
    margin-inline-start: calc(-1 * var(--pad-x));
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  /* הצמתים באיורים הם 26 פיקסלים קבועים, ולכן במסגרת של 104
     הם תפסו רבע מהרוחב ושני עיגולים נגעו זה בזה. האיור נשאר
     בגודל שבו הוא מתוכנן ומוקטן כיחידה אחת, כך שכל היחסים
     שבתוכו נשמרים. */
  .offer-art .viz {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    margin: 0;
    /* ההקטנה קרתה סביב הקצה השמאלי ולא סביב המרכז, ולכן
       שני שלישים מהאיור נחתכו מחוץ למסגרת. מיקום מוחלט עם
       תזוזה של חצי קובע את המרכז ולא משאיר את זה לפריסה. */
    transform: translate(-50%, -50%) scale(.80);
    transform-origin: center center;
  }
  .offer-txt { display: contents; }
  .offer-txt h3 { grid-area: head; margin-bottom: 0; font-size: var(--t-md); }
  .offer-txt p { grid-area: text; max-width: none; }
  .offer-row:nth-child(even) .offer-art { order: 0; }
}

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

.track {
  position: relative;
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  list-style: none;
}

/* הציר עצמו. נמשך על פני שלושת השלבים ונמוג בקצה, כי
   התיקונים ממשיכים גם אחרי העלייה לאוויר. */
.track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  /* הציר נמדד מראש ה-track, והצמתים יושבים בתוך ה-li שמתחיל
     רק אחרי ה-padding. בלי ההזחה הזאת הם ריחפו 45 פיקסלים
     מתחת לקו, והציר נקרא כקישוט ולא כציר. */
  top: calc(var(--sp-4) + 6px);
  height: 1px;
  background: linear-gradient(
    to var(--track-dir, left),
    var(--gold-300) 0%,
    var(--gold-300) 68%,
    var(--hair) 100%);
}
:dir(ltr) .track { --track-dir: right; }

.track li { position: relative; }

/* הנקודה על הציר */
.track li::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--gold-300);
}
.track li:first-child::before { background: var(--gold-300); box-shadow: none; }

.track-day {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  /* התווית היא מה שהופך שלוש עמודות לשלושה שלבים. בגודל
     הקודם היא נקראה כהערת שוליים ולא כסימון על ציר. */
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}
.track h3 {
  margin-top: var(--sp-1);
  font-size: var(--t-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.track p {
  margin-top: var(--sp-2);
  font-weight: var(--w-light);
  color: var(--fg-2);
  max-width: 34ch;
}

@media (max-width: 720px) {
  .track {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-top: 0;
    padding-inline-start: var(--sp-3);
  }
  /* בנייד הציר מסתובב ויורד, כי שלוש עמודות על מסך צר
     מוחצות את הטקסט לשתי מילים בשורה */
  .track::before {
    inset-inline: auto;
    inset-inline-start: 6px;
    top: 6px; bottom: 0;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-300) 74%, var(--hair) 100%);
  }
  .track li { padding-inline-start: var(--sp-3); }

  .track::before { top: 6px; }
  .track::after  { display: none; }
  .track li::before { inset-inline-start: 0; top: 4px; }
  .track-day { margin-top: 0; }
}

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

.proof-lead {
  display: flex;
  align-items: baseline;
  gap: clamp(var(--sp-3), 3vw, var(--sp-4));
  flex-wrap: wrap;
}
.proof-say {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-1);
}

.spec-sheet {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.spec-sheet > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
}
.spec-sheet dt {
  font-size: var(--t-sm);
  font-weight: var(--w-light);
  color: var(--fg-3);
}
.spec-sheet dd {
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  font-weight: var(--w-med);
  color: var(--gold-text);
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
:dir(rtl) .spec-sheet dd { text-align: right; }

@media (max-width: 620px) {
  .spec-sheet { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}


/* ============================================================
   היירו: התמונה היא הכותרת
   ------------------------------------------------------------
   הכותרת שרואים צרובה בתוך התמונה, ולכן אין כאן טקסט מעליה.
   הלפטופ שהיה מצויר ב-CSS ירד: התמונה כבר מציגה מחשב, ושניים
   באותו מסך זה אחד יותר מדי.
   ============================================================ */

/* מוסתר לעין, קיים לגוגל ולמנוע ההקראה */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero { padding-block: var(--sp-3) var(--sp-5); }

/* ============================================================
   התמונה כרקע, לא ככרזה
   ------------------------------------------------------------
   נמתחת על כל רוחב המסך ויוצאת מהמכל של התוכן. קודם היא ישבה
   ממורכזת ברוחב 760 עם שוליים משני הצדדים, וזה קרא ככרטיס
   תלוי ולא כרקע.

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

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

/* התמונה תופסת את כל רוחב העמוד. הגבלה ל-760 השאירה פס
   כהה משני צדדיה, ובנייד, שבו העמוד כולו מוקטן, הפסים האלה
   בלטו יותר מהתמונה עצמה. */
.hero-shot {
  margin: 0 auto;
  max-width: 760px;
}
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-hair);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95);
}

.hero .hero-sub {
  margin: var(--sp-4) auto 0;
  max-width: 52ch;
  text-align: center;
}
.hero .hero-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-3);
}

/* ============================================================
   התפריט נדבק לראש העמוד
   ------------------------------------------------------------
   בעמוד ארוך, תפריט שנעלם בגלילה מאלץ לחזור למעלה כדי ליצור
   קשר. הרקע מופיע רק אחרי שהגלילה מתחילה, כדי שמעל התמונה
   הוא יישאר שקוף ולא יחתוך אותה בפס.
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  /* הגובה מוצהר, כדי שתמונת ההיירו תוכל להחסיר אותו מגובה
     המסך ולמלא בדיוק את מה שנשאר */
  --nav-h: 90px;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  /* התפריט הוצא מתוך .plate. אב עם overflow: hidden שובר
     position: sticky, ולכן בתוכו התפריט נעלם יחד עם ההיירו
     במקום ללוות את כל הגלילה. */
  background: var(--plate);
  transition: box-shadow var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.nav.is-stuck {
  background: rgba(3, 7, 14, .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 var(--hair-soft), 0 14px 34px -24px rgba(0,0,0,.95);
}

@media (max-width: 620px) {
  /* התמונה נראית במלואה ולא נחתכת. קודם היא הייתה בגובה מסך
     מלא עם cover, וזה חתך משני הצדדים: הלפטופ יצא מהמסגרת
     מימין. עכשיו היא ברוחב מלא ובגובה הטבעי שלה, כלומר בדיוק
     מה שרואים במחשב. */
  .hero { padding-block: 0 var(--sp-4); }
  .hero-shot {
    max-width: 100%;
    height: auto;
  }
  .hero-shot img {
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .hero .hero-cta { flex-direction: column; }
}

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

   עכשיו התמונה מתחילה בשורה הראשונה של העמוד, והתפריט צף
   עליה בלי רקע משלו. אפשר לעשות את זה בלי הצללה כי ראש
   התמונה כהה בפועל: 128 השורות הראשונות שלה נעות בין 6 ל-19
   בהירות מתוך 255, והכיתוב הבהיר שבתוכה מתחיל רק אחריהן,
   בדיוק מתחת לקו התחתון של התפריט.

   הרקע של התפריט חוזר ברגע שמתחילים לגלול, כי משם והלאה הוא
   עומד מעל תוכן משתנה שאי אפשר להסתמך על הבהירות שלו.
   ============================================================ */

/* הפלטה נמשכת אל מתחת לתפריט. התפריט עדיין תופס מקום בזרימה,
   ולכן ההזזה שווה בדיוק לגובה שלו והתמונה נוחתת על אפס. */
.plate { margin-top: calc(-1 * var(--nav-h)); }

.nav {
  background: transparent;
  /* בלי הרקע, מה שמחזיק את התפריט מעל התמונה הוא רק ה-z */
  z-index: var(--z-nav);
}

.hero { padding-block: 0 var(--sp-5); }

/* הפינות העליונות מיושרות: התמונה נוגעת בקצה העמוד, ועיגול
   שם היה נקרא כמו כרטיס שהונח על הדף. */
.hero-shot img {
  border-radius: 0 0 var(--r-hair) var(--r-hair);
}

@media (max-width: 620px) {
  /* התפריט צף על התמונה גם כאן, בדיוק כמו במחשב, והתמונה
     מתחילה בשורה הראשונה של העמוד.

     החשבון: ברוחב 390 התמונה מוקטנת פי 2.79, והוורדמארק
     "NEO Studio" שיושב בשורה 215 שלה עולה ל-77 פיקסלים.
     בגובה תפריט של 90 הוא היה מכוסה. השורה האחת מכילה טקסט
     של 11 ולכן היא לא צריכה 90, ובגובה 56 היא נגמרת 21
     פיקסלים לפני הוורדמארק. */
  /* מוצהר בשני מקומות: ב-‎:root‎ בשביל ההזזה של הפלטה, ועל
     ‎.nav‎ עצמו כי שם יש הצהרה מקומית שגוברת על השורש. */
  :root { --nav-h: 56px; }
  .nav { --nav-h: 56px; }
  .hero-shot img { border-radius: 0; }
}

/* ============================================================
   התחתית של ההיירו: המסה, ועליה כפתור אחד
   ------------------------------------------------------------
   קודם התמונה נגמרה בקצה חד, ומתחתיה ישבו משפט ושני כפתורים.
   שני כפתורים זה שתי החלטות, וכשמבקשים שתיים מקבלים פחות
   מאחת. נשאר כפתור אחד, והוא עבר אל תוך התמונה.

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

.hero { padding-block: 0; }

.hero-shot { position: relative; }

.hero-dissolve {
  position: absolute;
  inset-inline: 0;
  /* פיקסל אחד מתחת לקצה, כדי שעיגול פינות לא ישאיר חוט בהיר */
  bottom: -1px;
  height: 17%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(3, 7, 14)         0%,
    rgba(3, 7, 14, .96)  16%,
    rgba(3, 7, 14, .85)  32%,
    rgba(3, 7, 14, .64)  48%,
    rgba(3, 7, 14, .40)  64%,
    rgba(3, 7, 14, .19)  80%,
    rgba(3, 7, 14, .05)  92%,
    rgba(3, 7, 14, 0)   100%);
}

/* התמונה כבר לא צריכה צל: היא לא מונחת על הדף, היא נמסה לתוכו */
.hero-shot img { box-shadow: none; }


/* ============================================================
   המקטע הראשון אחרי ההיירו
   ------------------------------------------------------------
   ההילה של מקטע כהה ממורכזת בדרך כלל מעל הקצה העליון שלו
   (‎at 78% -6%‎), ואז ‎overflow: hidden‎ חותך אותה בקו ישר. בכל
   מקטע אחר זה בסדר, כי מעליו יש גבול ממילא. כאן אין: התמונה
   נמסה אל תוך המקטע הזה, ולכן ההילה מוזזת פנימה ואינה נחתכת.
   ============================================================ */

#build::before {
  background:
    radial-gradient(ellipse 66% 52% at 78% 38%, rgba(45,123,255,.10), transparent 66%),
    radial-gradient(ellipse 46% 32% at 10% 48%, rgba(22,82,204,.085), transparent 70%);
}


/* ============================================================
   אליפסת האור שחוצה את התפר
   ------------------------------------------------------------
   המסה לבדה נקראת כמו סוף. מה שהופך אותה למעבר הוא שיש משהו
   שממשיך דרכה: אליפסה רחבה של האור הכחול של המותג, שממורכזת
   בדיוק על הקו שבו התמונה נגמרת. חצי ממנה יושב על התחתית
   המומסת של התמונה, וחצי כבר בתוך המקטע הבא.

   בגלל שהצבע משני צידי הקו זהה (‎#03070E‎ בשניהם), האליפסה
   נקראת כגוף אחד ולא כשתי שכבות שנפגשות, והעין לא מוצאת את
   הקו כי אין קו למצוא. זה גם קשור לתמונה עצמה: מקור האור
   שם הוא מסך הלפטופ, וזו פשוט אותה תאורה שנמשכת החוצה.
   ============================================================ */

/* הפלטה כבר לא צריכה לחתוך: שתי שכבות ההילה שהיו בה נמחקו,
   והיא מחזיקה רק את התמונה. בלי החיתוך האור יכול לרדת אל
   מתחת לקצה שלה, וה-z מרים אותו מעל המקטע הבא. */
.plate { overflow: visible; z-index: 1; }

.hero-glow {
  position: absolute;
  inset-inline: 0;
  /* חצי מעל הקו וחצי מתחתיו */
  bottom: -130px;
  height: 260px;
  pointer-events: none;
  z-index: 1;
  /* שבעה עוצרים ולא שלושה. על רקע כמעט שחור, רדיאל עם מעט
     עוצרים מייצר טבעות — הצבע קופץ בין ערך לערך והעין תופסת
     את הקפיצות כמעגלים. עקומה צפופה לא משאירה לזה מקום. */
  background: radial-gradient(
    ellipse 38% 50% at 50% 50%,
    rgba(45, 123, 255, .115),
    rgba(45, 123, 255, .092) 22%,
    rgba(45, 123, 255, .066) 40%,
    rgba(40, 110, 235, .042) 55%,
    rgba(34,  96, 216, .023) 68%,
    rgba(28,  84, 200, .010) 80%,
    rgba(22,  82, 204, .003) 90%,
    transparent 100%);
}
@media (max-width: 620px) {
  .hero-glow { bottom: -92px; height: 184px; }
}

/* חוט אור אחד על הקו עצמו. הבריכה לבדה היא כתם, ומה שהופך
   אותה לדבר מכוון הוא קצה: פיקסל אחד שבוהק במרכז ונגמר
   בכלום בשני הצדדים, כמו הקצה של משטח מואר. */
.hero-glow::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(95, 165, 255, .04) 14%,
    rgba(95, 165, 255, .19) 28%,
    rgba(120, 180, 255, .40) 40%,
    rgba(170, 208, 255, .58) 50%,
    rgba(120, 180, 255, .40) 60%,
    rgba(95, 165, 255, .19) 72%,
    rgba(95, 165, 255, .04) 86%,
    transparent 100%);
}
/* ============================================================
   המעבר בין מקטע כהה למקטע בהיר
   ------------------------------------------------------------
   שני הרקעים נפגשו בקו ישר, וקו ישר בין שני שטחים אחידים
   נקרא כמו שתי רצועות שהודבקו זו לזו. במקום זה, כל מקטע
   שמגיע אחרי מקטע בגוון אחר פותח ברצועה שמתחילה בגוון
   הקודם ונמוגה אל תוך שלו.

   שמונה עוצרים ולא שניים. שני הגוונים כהים וקרובים
   (‎#03070E‎ מול ‎#0C1728‎), ודווקא בגלל שההפרש ביניהם קטן כל
   מדרגת שקיפות נראית, ומעבר לינארי היה מייצר טבעות. עקומה
   צפופה לא משאירה לזה מקום.

   הבורר מזהה את המעבר ולא את המקטע: רק מקטע שקודמו בגוון
   אחר מקבל רצועה. המקטע הראשון ב-main כהה בדיוק כמו הפלטה
   שמעליו, ולכן הוא לא נבחר וממילא אין שם מה לרכך.
   ============================================================ */

.sec { position: relative; }
.sec > .shell { position: relative; z-index: 1; }

/* הרצועה מחליפה את קו ההפרדה, ולכן הוא יורד */
.sec.dark + .sec:not(.dark),
.sec:not(.dark) + .sec.dark { border-top: 0; }

.sec.dark + .sec:not(.dark)::after,
.sec:not(.dark) + .sec.dark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 160px;
  pointer-events: none;
  z-index: 0;
}

/* בהיר שבא אחרי כהה: מתחיל בכהה */
.sec.dark + .sec:not(.dark)::after {
  background: linear-gradient(to bottom,
    rgb(3, 7, 14)        0%,
    rgba(3, 7, 14, .95) 11%,
    rgba(3, 7, 14, .85) 24%,
    rgba(3, 7, 14, .68) 38%,
    rgba(3, 7, 14, .47) 53%,
    rgba(3, 7, 14, .27) 69%,
    rgba(3, 7, 14, .11) 84%,
    rgba(3, 7, 14, .02) 94%,
    rgba(3, 7, 14, 0)  100%);
}

/* כהה שבא אחרי בהיר: מתחיל בבהיר */
.sec:not(.dark) + .sec.dark::after {
  background: linear-gradient(to bottom,
    rgb(12, 23, 40)        0%,
    rgba(12, 23, 40, .95) 11%,
    rgba(12, 23, 40, .85) 24%,
    rgba(12, 23, 40, .68) 38%,
    rgba(12, 23, 40, .47) 53%,
    rgba(12, 23, 40, .27) 69%,
    rgba(12, 23, 40, .11) 84%,
    rgba(12, 23, 40, .02) 94%,
    rgba(12, 23, 40, 0)  100%);
}

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

   הכיוון נגזר מכיוון הכתיבה: ‎inset-inline-start‎ הופך לבד
   בין עברית לאנגלית, ולכן הפעימה תמיד נעה מהשלב הראשון
   לאחרון ולא מימין לשמאל תמיד.
   ============================================================ */

.track li::before {
  /* הציר יושב ב-top 6px בגובה 1px, כלומר מרכזו ב-6.5.
     צומת של 15 פיקסל שמתחיל ב--1 מתמרכז בדיוק שם. */
  top: -1px;
  width: 15px;
  height: 15px;
}

.track::after {
  content: "";
  position: absolute;
  top: calc(var(--sp-4) + 3px);
  inset-inline-start: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-100);
  box-shadow: 0 0 12px 2px rgba(70, 214, 255, .55);
  opacity: 0;
  pointer-events: none;
}

@keyframes track-run {
  0%, 5%     { inset-inline-start: 0;    opacity: 0; }
  12%        { opacity: 1; }
  84%        { inset-inline-start: 100%; opacity: 1; }
  92%, 100%  { inset-inline-start: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .track::after { animation: track-run 6.4s var(--ease-io) infinite; }
}

/* מקטע העבודות צבוע ב---sheet-raised ולא ב---sheet, ולכן המעבר
   ממנו אל המקטע שאחריו הוא שינוי גוון בפני עצמו. שני המקטעים
   בהירים, ולכן הכלל הכללי שלמעלה לא חל עליהם. */
.work-sec + .sec { border-top: 0; }
.work-sec + .sec::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 160px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom,
    rgb(18, 32, 54)        0%,
    rgba(18, 32, 54, .95) 11%,
    rgba(18, 32, 54, .85) 24%,
    rgba(18, 32, 54, .68) 38%,
    rgba(18, 32, 54, .47) 53%,
    rgba(18, 32, 54, .27) 69%,
    rgba(18, 32, 54, .11) 84%,
    rgba(18, 32, 54, .02) 94%,
    rgba(18, 32, 54, 0)  100%);
}

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

   הכפתורים הם ‎button‎ עם ‎aria-pressed‎ ולא ‎radio‎ מוסתר,
   כי הם באמת מתנהגים כמתג דו-מצבי: הקשה שנייה על אותה
   בחירה מבטלת אותה. רדיו לא יודע לחזור למצב ריק.
   ============================================================ */

.brief-lead {
  margin-top: var(--sp-2);
  max-width: 52ch;
  font-weight: var(--w-light);
  color: var(--fg-2);
}

.brief {
  margin-top: var(--sp-4);
  display: grid;
  /* השאלות נוכחות יותר עכשיו, ולכן הן צריכות יותר מרחק זו
     מזו כדי שכל שאלה תיקרא עם התשובות שלה ולא עם השכנה */
  gap: var(--sp-4);
}

/* התווית שמעל תצוגת ההודעה. מונו זעיר מתאים לה כי היא באמת
   תווית: היא מסמנת מה בא אחריה ולא מבקשת שיקראו אותה. */
/* התווית האחרונה באתר שנשארה במונו עם ריווח אותיות. בעברית
   הריווח מפרק את המילה, והמונו הופך אותה לשם משתנה. אותו
   תיקון כמו בכל השאר: גופן הגוף, גודל אמיתי, בלי ריווח. */
.brief-k {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gold-text);
}

/* ------------------------------------------------------------
   השאלות עצמן.

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

   שאלה היא לא תווית. צריך לקרוא אותה, ולכן היא בגופן הגוף,
   בגודל הגוף, ובצבע המלא.
   ------------------------------------------------------------ */
.brief-ask {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  /* הצבע חוזר לזה של התווית. מה שהיה שבור שם היה הגופן,
     הגודל וריווח האותיות, לא הצבע. */
  color: var(--gold-text);
}

.chips {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips button {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: var(--w-light);
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  /* 44 פיקסלים גובה מינימלי, שזה יעד המגע התקני */
  padding: 11px 20px;
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .chips button:hover { border-color: var(--gold-mark); color: var(--fg); }
}

.chips button[aria-pressed="true"] {
  color: var(--bone);
  border-color: transparent;
  background: linear-gradient(140deg, var(--gold-200), var(--gold-500));
  color: #04101F;
  font-weight: 600;
}

.brief-out {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hair-soft);
}

/* ההודעה מוצגת כפי שהיא תישלח, כולל שבירות השורה. מי
   שרואה בדיוק מה יוצא לוחץ בלי היסוס. */
.brief-say {
  margin-top: var(--sp-2);
  white-space: pre-line;
  /* לא מונו. ל-IBM Plex Mono אין עברית, ולכן העברית נופלת
     לגופן מונו של המערכת ומקבלת מרווחי אותיות שנראים שבורים.
     במקום זה הגופן הרגיל, וההיכר של "זו ההודעה עצמה" נעשה
     בקו שמצדה ובמרווח השורות. */
  font-size: var(--t-sm);
  font-weight: var(--w-light);
  line-height: 1.85;
  color: var(--fg);
  padding-inline-start: var(--sp-2);
  border-inline-start: 2px solid var(--gold-mark);
  max-width: 46ch;
}

.brief-out .btn { margin-top: var(--sp-3); }

.brief-note {
  margin-top: var(--sp-2);
  font-size: var(--t-xs);
  font-weight: var(--w-light);
  color: var(--fg-3, var(--fg-2));
  max-width: 46ch;
}

/* שדה החופשי שנפתח מתחת ל"משהו אחר". הוא לא קיים עד שבוחרים
   בו, כי שדה טקסט שמופיע מראש מזמין להתחיל להקליד ומבטל את
   כל היתרון של אפיון שכולו הקשות. */
.brief-other {
  margin-top: 10px;
}

.brief-other input {
  width: min(100%, 40ch);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: var(--w-light);
  color: var(--fg);
  background: var(--bg-raised, rgba(242, 247, 255, .04));
  border: 1px solid var(--hair);
  border-radius: var(--r-hair);
  padding: 11px 16px;
  transition: border-color var(--dur-hover) var(--ease-out);
}

.brief-other input::placeholder { color: var(--fg-2); opacity: .7; }

.brief-other input:focus {
  outline: none;
  border-color: var(--gold-mark);
}

/* שני הכפתורים זה לצד זה, ובמסך צר זה מעל זה. הטלפון הוא
   קו בלבד ולא מלא, כי הוא הדרך השנייה ולא הראשונה. */
.brief-cta {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.brief-out .brief-cta .btn { margin-top: 0; }

@media (max-width: 620px) {
  .brief-cta { flex-direction: column; }
  .brief-cta .btn { width: 100%; }
}

/* ------------------------------------------------------------
   המעבר אל הפוטר

   מקטע הסיום ירד, ולכן המקטע האחרון בעמוד הוא בהיר והפוטר
   כהה. הפוטר אינו ‎.sec‎, ולכן הכלל הכללי של המעברים לא חל
   עליו, והוא צריך רצועה משלו — אותה עקומה, מתחילה בגוון של
   הגיליון ונמוגה אל תוך הפלטה.
   ------------------------------------------------------------ */
.foot { position: relative; }
.foot > * { position: relative; z-index: 1; }

.foot::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 160px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom,
    rgb(12, 23, 40)        0%,
    rgba(12, 23, 40, .95) 11%,
    rgba(12, 23, 40, .85) 24%,
    rgba(12, 23, 40, .68) 38%,
    rgba(12, 23, 40, .47) 53%,
    rgba(12, 23, 40, .27) 69%,
    rgba(12, 23, 40, .11) 84%,
    rgba(12, 23, 40, .02) 94%,
    rgba(12, 23, 40, 0)  100%);
}

/* ------------------------------------------------------------
   שני תיקונים שנוצרו כשמקטע הסיום ירד
   ------------------------------------------------------------ */

/* בין מקטע בהיר למקטע בהיר נשאר קו הפרדה. אחרי שהורדנו את
   הקווים בשאר העמוד, הוא היחיד שנשאר ולכן הוא בולט. שני
   המקטעים באותו גוון ממילא, אז אין מה לרכך — פשוט אין קו. */
.sec:not(.dark) + .sec:not(.dark) { border-top: 0; }

/* הפוטר הוא עכשיו הדבר האחרון בעמוד, והוא כהה. הרקע שמתחתיו
   היה בגוון הגיליון, ולכן במסך גבוה מהעמוד נראתה רצועה בהירה
   מתחת לפוטר. הרקע של המסמך עובר לפלטה, וגוף העמוד ממשיך
   לצבוע את עצמו בגיליון. */
html { background: var(--plate); }

/* הכותרת של האפיון יורדת שורה בין המשפטים */
#brief-h span { display: block; }


/* התהליך והמקטע הזה שניהם כהים ונוגעים זה בזה. הם גם קשורים:
   האחד נגמר ב"מה קורה אחרי", והשני עונה. קו ביניהם היה מפריד
   שני חלקים של אותה תשובה. */
.sec.dark + .sec.dark { border-top: 0; }


/* ההילה של מקטע כהה ממורכזת מעל הקצה העליון שלו, ו-overflow
   חותך אותה שם בקו. במקטע שמגיע אחרי מקטע בגוון אחר הרצועה
   מכסה את זה, אבל שני מקטעים כהים ברצף אין ביניהם רצועה,
   ולכן ההילה מוזזת פנימה — בדיוק כמו במקטע הראשון. */
.sec.dark + .sec.dark::before {
  background:
    radial-gradient(ellipse 66% 52% at 78% 38%, rgba(45,123,255,.10), transparent 66%),
    radial-gradient(ellipse 46% 32% at 10% 48%, rgba(22,82,204,.085), transparent 70%);
}



/* ‎dd‎ מקבל מהדפדפן ‎margin-inline-start: 40px‎ כברירת מחדל.
   בעמודה של 108 פיקסלים זה השאיר 68, ו"1,500 ₪" נשבר לשתי
   שורות — המספר בשורה אחת וסימן השקל בשורה שאחריה. במסך
   רחב זה לא התגלה כי היה מספיק מקום גם אחרי החיסור. */
.spec-sheet dd, .spec-sheet dt { margin: 0; }

/* ערך ויחידה הם דבר אחד ואסור שייפרדו */
.spec-sheet dd { white-space: nowrap; }

/* ============================================================
   ואחרי שזה באוויר
   ------------------------------------------------------------
   שתי האפשרויות הן שני לוחות בשפה שכבר קיימת באתר: אותו רקע
   מורם, אותו קו שיער פנימי, אותה פינה של שני פיקסלים כמו
   במסגרות של האיורים. קודם הן היו שני טורים ריקים עם קו דק
   מעליהם, והטור השמאלי נשאר עם חלל של מאתיים פיקסלים מתחת
   לפסקה. לוח הוא דבר שאפשר לבחור בו; טור הוא פסקה עם קו.

   שני הלוחות בגובה זהה ושורת המחיר בשניהם נדחפת לתחתית,
   ולכן העין רואה אפס מול 290 באותו קו. זה מה שהופך את זה
   להשוואה במקום לפסקה מול טבלה.
   ============================================================ */

.care-lead {
  margin-top: var(--sp-3);
  max-width: 48ch;
  font-size: var(--t-md);
  color: var(--fg-2);
}

.care-fork {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  align-items: stretch;
}

.care-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) clamp(var(--sp-3), 2.4vw, var(--sp-4));
  border-radius: var(--r-hair);
  background:
    radial-gradient(84% 90% at 50% 0%, rgba(45,123,255,.07), transparent 70%),
    var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
}

/* הלוח שהוא ההצעה מסומן בפס עליון ובזוהר עדין, ולא בטקסט
   גדול יותר ולא בתג "מומלץ". האפשרות השנייה היא אפשרות
   אמיתית ולא נחמה, ולכן היא לא נראית פחות. */
.care-opt.is-lead {
  background:
    radial-gradient(84% 90% at 50% 0%, rgba(45,123,255,.14), transparent 70%),
    var(--bg-raised);
  box-shadow:
    inset 0 0 0 1px var(--hair-gold),
    0 26px 64px -46px rgba(45,123,255,.85);
}
.care-opt.is-lead::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  border-radius: var(--r-hair) var(--r-hair) 0 0;
  background: linear-gradient(to left,
    transparent 0%,
    var(--gold-200) 20%,
    var(--gold-500) 50%,
    var(--gold-200) 80%,
    transparent 100%);
}

.care-k {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.care-p {
  max-width: 42ch;
  font-size: var(--t-base);
  color: var(--fg-2);
}

/* השורה הזאת נושאת מידע אמיתי בשני הלוחות — מתי אפשר לעצור,
   ומה קורה אם צריך שינוי — ולכן היא קטנה מהפסקה אבל לא חיוורת
   ממנה. אותו שיקול כמו במחירים: אי אפשר להחליט לפי משהו שצריך
   להתאמץ כדי לקרוא. */
.care-fine {
  max-width: 40ch;
  font-size: var(--t-sm);
  color: var(--fg-2);
}

/* margin-top: auto דוחף את שורת המחיר לתחתית הלוח, וזה מה
   שמיישר את האפס מול ה-290 בשני הלוחות בלי לקבע גבהים. */
.care-plans {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hair-soft);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.care-plans.is-one { grid-template-columns: 1fr; }

.care-plans li { display: flex; flex-direction: column; gap: 4px; }

/* בכיוון ימין-לשמאל הפריט השני יושב משמאל לראשון, ולכן
   inline-start שלו הוא הצד שפונה אל השכן — שם הקו. */
.care-plans li + li {
  padding-inline-start: var(--sp-2);
  border-inline-start: 1px solid var(--hair-soft);
}

/* התוויות כאן לא בסגנון התווית הזעירה של שאר האתר. אותו שיקול
   כמו בשאלות של האפיון: מונו עם ריווח אותיות של 0.14em מפרק
   מילה עברית לאותיות בודדות, ו"חצי שנתי" ב-11 פיקסלים הופך
   לשתי ערימות. כאן צריך לקרוא מה קונים, לא להתרשם. */
.plan-k {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fg-2);
}

/* המספר וסימן המטבע הם שני אלמנטים בשורת פלקס, ולא מחרוזת
   אחת. בגרסה הקודמת הם היו מחרוזת, והאלגוריתם הדו-כיווני
   העיף את השקל לצד השני של המספר עם רווח שלם באמצע. פלקס
   קובע את הסדר, ואין למי להתווכח איתו. */
.plan-v {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}
.plan-v b {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-xl);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.plan-v i {
  font-style: normal;
  font-size: var(--t-base);
  font-weight: var(--w-med);
  color: var(--gold-text);
}

.plan-s {
  font-size: var(--t-xs);
  font-weight: var(--w-light);
  color: var(--fg-3);
}

@media (max-width: 880px) {
  .care-fork { grid-template-columns: 1fr; gap: var(--sp-2); }
}

@media (max-width: 620px) {
  /* שלושת המסלולים נשארים זה לצד זה גם בנייד, כי כל הטעם
     שלהם הוא ההשוואה. מה שקטן זה המספר. */
  .care-opt { padding: var(--sp-3); }
  .care-plans { gap: var(--sp-1); }
  .care-plans li + li { padding-inline-start: var(--sp-1); }
  .plan-v b { font-size: var(--t-lg); }
  .plan-v i { font-size: var(--t-sm); }
  .plan-s { font-size: 11px; }
}

/* ============================================================
   מהתהליך אל מה שאחריו: המשך, לא מקטע חדש
   ------------------------------------------------------------
   שני המקטעים עונים על אותה שאלה. התהליך נגמר ב"תיקונים
   ממשיכים גם אחרי", והמקטע שאחריו הוא מה שקורה אחרי.

   מה שהפריד ביניהם היה קו לרוחב כל העמוד מתחת לתווית הקטנה.
   קו לרוחב העמוד הוא האיתות המובהק ביותר של "כאן מתחיל משהו
   אחר", ולכן הוא יורד כאן בלבד. שאר האתר ממשיך להשתמש בו.

   בנוסף חצי מהאוויר שביניהם יורד. הרווח לבדו עדיין מפריד,
   וזה רצוי: המשך הוא לא אותו דבר.
   ============================================================ */

#how  { padding-bottom: var(--sp-4); }
#care { padding-top: var(--sp-4); }

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

   היא גם עוברת לגופן הכותרות. בגופן הגוף היא נראתה כמו
   הערה שנשארה בסוף; בסריף, ממורכזת ובשורות מאוזנות, היא
   ציטוט מסכם.

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

.bottom-line {
  position: relative;
  margin: var(--sp-5) auto 0;
  padding-top: var(--sp-3);
  max-width: 44ch;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: var(--w-reg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

/* הסימון מעליה הוא צומת על ציר: קו שנמוג לשני הצדדים ונקודה
   מוארת במרכזו. זה בדיוק הרכיב שמסמן שלב בציר התהליך שמתחת
   ובאיורים של המקטע הראשון, ולכן הוא שייך לאתר הזה ולא נראה
   כמו קו מפריד שנלקח מכל מקום. */
.bottom-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--hair-gold) 34%,
    var(--hair-gold) 66%,
    transparent 100%);
}

.bottom-line::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 14px -1px rgba(45, 123, 255, .95);
}

.bottom-line b {
  font-weight: var(--w-bold);
  color: var(--gold-text);
}

@media (max-width: 620px) {
  .bottom-line {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    font-size: var(--t-md);
  }
}

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

   הכפתורים עברו לשורה משלהם מתחת לטקסט. קודם הם נדחפו לקצה
   הנגדי, והחלל באמצע הוא מה שגרם ללוח להיראות מתוח ולא בנוי.
   ============================================================ */

.brief-skip {
  padding: var(--sp-3);
  border-radius: var(--r-hair);
  background:
    radial-gradient(88% 100% at 50% 0%, rgba(45, 123, 255, .10), transparent 74%),
    var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
}

.brief-skip-k {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-md);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.brief-skip-p {
  margin-top: var(--sp-1);
  max-width: 52ch;
  font-size: var(--t-sm);
  font-weight: var(--w-light);
  color: var(--fg-2);
}

/* בעמודה צרה שני הכפתורים נערמים ותופסים את מלוא הרוחב.
   זה גם מה שנותן להם את הנוכחות שכפתור בגודל טבעי לא היה
   מקבל בתוך 300 פיקסלים. */
.brief-skip-a {
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-1);
}
.brief-skip-a .btn { width: 100%; padding-inline: var(--sp-2); }

/* שני האייקונים משורטטים באותה מערכת, שניהם SVG שיורש את צבע
   הכפתור. אימוג׳י צבעוני ליד לוגו מונוכרום היה מציב שני
   סגנונות גרפיים זה לצד זה באותה שורה. */
.brief-skip-a svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* הירוק הוא הירוק של וואטסאפ עצמו. הוא לא ממלא את הכפתור אלא
   רק צובע אותו, כי הפעולה המלאה של המקטע היא הכפתור שבסוף
   השאלות, וכפתור ירוק מלא כאן היה חזק ממנו. */
.btn-wa {
  background: rgba(37, 211, 102, .10);
  border-color: rgba(37, 211, 102, .45);
  color: #3DE07A;
}

.btn-tel svg { color: var(--gold-text); }

@media (hover: hover) and (pointer: fine) {
  .btn-wa:hover {
    background: rgba(37, 211, 102, .18);
    border-color: rgba(37, 211, 102, .75);
    color: #5BE892;
  }
}

/* ============================================================
   האפיון בשתי עמודות
   ------------------------------------------------------------
   השאלות בצד הקריאה, והלוח של "לא חייבים" בעמודה שלידן.
   מעל השאלות הוא הציע לדלג לפני שבכלל ראו על מה, ובתחתית
   הוא היה מגיע מאוחר מדי למי שכבר יצא. בצד הוא גלוי כל הזמן
   ולא עומד בדרך.

   הוא נדבק למסך, ולכן הוא זמין גם בשאלה השישית בלי שיצטרכו
   לגלול חזרה. ההיצמדות מתחילה מתחת לתפריט, שגם הוא דבוק.
   ============================================================ */

.brief-grid {
  margin-top: var(--sp-4);
  /* הגריד צר מהגיליון. ברוחב מלא עמודת השאלות יצאה 836
     פיקסלים והצ׳יפים מילאו ממנה כ-500, כך שנפער חלל באמצע
     בין הלוח לשאלות. כאן העודף עובר לשוליים החיצוניים, ושם
     הוא נקרא כמרווח ולא כחור. */
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(var(--sp-4), 4vw, var(--sp-5));
  align-items: start;
}

.brief-main { min-width: 0; }
.brief-main > .brief { margin-top: 0; }

.brief-grid .brief-skip {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-2));
}

@media (max-width: 900px) {
  /* אין צד, ולכן הלוח יורד מתחת לשאלות ומפסיק להידבק.
     לא מעליהן: בנייד הוא היה דוחף את השאלות אל מחוץ למסך
     ומשאיר את המקטע בלי מה שהוא בא לעשות. */
  .brief-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .brief-grid .brief-skip { position: static; }
}

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

   הכיוון נשאר משמאל לימין כי כל התוכן בהן אנגלי, והסדר הפוך
   כמו במחשב: ‎wrap-reverse‎ מחזיק את הבסיס למטה, כמו שערימה
   נבנית באמת. */
@media (max-width: 780px) {
  .stack {
    flex-direction: row;
    flex-wrap: wrap-reverse;
    gap: 5px;
    justify-content: flex-start;
  }
  .stack li { font-size: 10.5px; padding: 4px 9px; }

  /* בערימה הכבדה כל תג הוא פריט בפני עצמו, ולכן העמעום של
     המחצית העליונה מאבד את המשמעות שלו כשהם באותה שורה. */
  .stack.heavy li:nth-child(n+9) { opacity: .75; }
}

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

   התווית היא המילה שמופיעה בתפריט, כך שמי שלחץ שם נוחת על
   אותו שם בדיוק. היא לא בסגנון התווית הזעירה של מונו עם
   ריווח אותיות, כי בעברית זה מפרק את המילה.
   ============================================================ */

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

   הצבע הוא נחלת גיבוי: אם ‎background-clip: text‎ לא נתמך,
   ‎color‎ נשאר הכחול הרגיל והמילה פשוט מוצגת בו. */
.sec-k {
  display: block;
  width: fit-content;
  margin: 0 auto var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--gold-text);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .sec-k {
    background-image: linear-gradient(100deg,
      var(--gold-500) 0%,
      var(--gold-200) 52%,
      var(--gold-400) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(45, 123, 255, .38));
  }
}


/* ============================================================
   תפריט הצד בנייד
   ------------------------------------------------------------
   כפתור התפריט קיים רק מתחת ל-780, ומעליו הקישורים חוזרים
   לשורה שלהם. שלוש השורות של האייקון מצוירות ב-CSS: אחת היא
   האלמנט, ושתיים הן הפסאודו שלו. אין ספריית אייקונים באתר
   הזה, וגם הכתר והפלוס של השאלות מצוירים ידנית.

   הפאנל נכנס מצד הקריאה. ‎inset-inline-start‎ מציב אותו מימין
   בעברית ומשמאל באנגלית בלי גרסה שנייה של הכלל.
   ============================================================ */

.nav-burger { display: none; }

.drawer[hidden] { display: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-skip);
}

/* השכבה שמאחורי הפאנל. היא כפתור ולא div, כדי שלחיצה עליה
   תסגור גם במקלדת ולא רק בעכבר. */
.drawer-veil {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 7, 14, .72);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}

.drawer-sheet {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: min(84vw, 340px);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(45, 123, 255, .12), transparent 70%),
    var(--plate);
  box-shadow: 0 0 60px -10px rgba(0, 0, 0, .9);
  transform: translateX(calc(100% * var(--slide, 1)));
  transition: transform var(--dur-enter) var(--ease-out);
  overflow-y: auto;
}
:dir(ltr) .drawer-sheet { --slide: -1; }

.drawer.is-open .drawer-veil { opacity: 1; }
.drawer.is-open .drawer-sheet { transform: translateX(0); }

.drawer-nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
}

/* כל קישור הוא שורה מלאה. זה מה שנותן לו שטח נגיעה של 52
   פיקסלים במקום 30, וזה כל הטעם של המהלך הזה. */
.drawer-nav a {
  padding-block: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  border-bottom: 1px solid var(--hair-soft);
}
.drawer-nav a:last-child { border-bottom: 0; color: var(--gold-text); }

/* ============================================================
   הלוגו המקורי בתחתית תפריט הצד
   ------------------------------------------------------------
   margin-top: auto דוחף אותו לרצפת הגיליון, כך שהוא נשען על
   התחתית ולא נגרר אחרי הקישורים.

   ההפרדה מהקישורים היא רווח ולא קו, כי לקישורים כבר יש קווים
   תחתונים ועוד אחד היה נראה כמו שורה שביעית ריקה.

   הרוחב נגזר מגובה הגיליון ולא רק מרוחבו, כי במסכים נמוכים
   הלוגו הוא הראשון שנלחץ. min() מוריד אותו לבד במקום לדרוש
   שאילתת מדיה נפרדת.
   ============================================================ */

.drawer-mark {
  margin-top: auto;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-1);
  display: flex;
  justify-content: center;
  user-select: none;
}

.drawer-mark img {
  width: min(62%, 26vh, 176px);
  height: auto;
  display: block;
}

/* איקס מצויר משני קווים על אותו אלמנט */
.drawer-x {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}
.drawer-x i,
.drawer-x i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 1.5px;
  background: var(--fg-2);
}
.drawer-x i { transform: translate(-50%, -50%) rotate(45deg); }
.drawer-x i::after { top: 0; left: 0; transform: rotate(-90deg); transform-origin: center; }

@media (max-width: 780px) {
  /* התפריט חוזר לשורה נקייה: לוגו, כפתור, שפה, ותפריט. */
  .nav-links { display: none; }
  .nav-burger {
    display: block;
    position: relative;
    width: 34px;
    height: 34px;
    flex: none;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-burger i,
  .nav-burger i::before,
  .nav-burger i::after {
    content: "";
    position: absolute;
    inset-inline: 8px;
    height: 1.5px;
    background: var(--fg);
    border-radius: 2px;
  }
  .nav-burger i { top: 50%; margin-top: -.75px; }
  .nav-burger i::before { top: -6px; inset-inline: 0; }
  .nav-burger i::after  { top:  6px; inset-inline: 0; }

  /* עם התפריט בצד אין יותר לחץ על השורה, והיא חוזרת לנשום */
  .nav-in { gap: var(--sp-2); padding-inline: var(--pad-x); }
  .nav-end { gap: var(--sp-2); }
  .nav-end .btn { padding: 10px 16px; font-size: var(--t-xs); }
  .lang { font-size: var(--t-xs); gap: 5px; }
  .nav { --nav-h: 72px; }
  :root { --nav-h: 72px; }
}

@media (min-width: 781px) {
  .drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-sheet, .drawer-veil { transition: none; }
}

/* ============================================================
   הכותרת של מקטע ההשוואה
   ------------------------------------------------------------
   ממורכזת, ולא כמו שאר הכותרות באתר. זו הכותרת היחידה שמעליה
   מבנה סימטרי: שני טורים שעומדים זה מול זה. כותרת מיושרת
   לקצה מעל שני טורים שווים נראית כאילו היא שייכת לאחד מהם.

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

.vs-h {
  text-align: center;
  max-width: none;
  margin-inline: auto;
}
.vs-h span { display: block; }
.vs-brand {
  color: var(--gold-text);
  /* השם באותיות לטיניות גדולות, ולכן הוא סובל ריווח קל
     שהיה מפרק מילה עברית */
  letter-spacing: .02em;
}

/* ============================================================
   כל הכותרות ממורכזות
   ------------------------------------------------------------
   ‎h2‎ מוגבל ל-20 תווים רוחב, ולכן ‎text-align‎ לבדו לא היה מזיז
   אותו: הוא מרכז את הטקסט בתוך קופסה שנשארת בקצה. ‎margin-inline:
   auto‎ הוא מה שמרכז את הקופסה עצמה.
   ============================================================ */

.sec h2 {
  text-align: center;
  margin-inline: auto;
}

/* שתי פסקאות הפתיחה יושבות ישירות מתחת לכותרת ושייכות לבלוק
   שלה. כותרת ממורכזת ופסקה בצד נקראות כשני יישורים שנפלו
   בטעות אחד ליד השני. שאר הטקסט בעמוד נשאר בצד, כי שם הוא
   גוף לקריאה ולא פתיח. */
.care-lead,
.brief-lead {
  text-align: center;
  margin-inline: auto;
}

/* ============================================================
   החתימה בשוליים של ההיירו
   ------------------------------------------------------------
   התמונה לאורך והמסך לרוחב, ולכן נשאר שחור בשני הצדדים.
   הוא לא מולא: השחור הוא המסגרת, והוא מה שגורם לתמונה
   להיקרא כנושא. מה שכן נכנס לתוכו הוא שורה אחת, בצד אחד,
   ודהויה.

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

   ‎writing-mode‎ מסובב את הזרימה, וסיבוב של 180 מעלות הופך
   אותה מלמעלה-למטה למטה-למעלה.
   ============================================================ */

.hero { position: relative; }

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

   זה בדיוק הרכיב שכבר קיים בתמונה עצמה: "NEO Studio" עם קו
   משני צדדיו. כאן הוא מסובב ב-90 מעלות, ולכן הוא נקרא כשייך
   ולא כתוספת. */
.hero-mark {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
  user-select: none;
}

.hero-mark i {
  flex: none;
  width: 1px;
  height: clamp(38px, 8vh, 92px);
}
.hero-mark i:first-child {
  background: linear-gradient(to bottom, transparent, var(--hair-gold));
}
.hero-mark i:last-child {
  background: linear-gradient(to bottom, var(--hair-gold), transparent);
}

/* גופן הכותרות בנטוי, בדיוק כמו הטאגליין בפוטר. סאנס עם
   ריווח אותיות רחב הוא הברירה שכל אתר בוחר; סריף נטוי נקרא
   כחתימה, וזה מה שהמשפט הזה אמור להיות. */
.hero-mark > span {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-light);
  font-size: var(--t-sm);
  letter-spacing: .2em;
  white-space: nowrap;
  color: var(--fg-2);
  opacity: .8;
}

/* שני הצדדים משקפים זה את זה: בצד הקריאה הכיתוב יורד מלמעלה
   למטה, ובצד הנגדי הוא עולה מלמטה למעלה. */
.hero-mark.is-start { right: clamp(16px, 3.4vw, 40px); }
.hero-mark.is-end   { left:  clamp(16px, 3.4vw, 40px); }
.hero-mark.is-end > span { transform: rotate(180deg); }

/* בלי שוליים אין לה מקום, והיא הייתה נוחתת על התמונה עצמה */
@media (max-width: 1100px) {
  .hero-mark { display: none; }
}

/* כותרת המשנה של לוח הריטיינר. אותה משפחה של הכותרת שמעליה
   אבל דקה, קטנה וכחולה, כך שהיא נקראת כהמשך שלה ולא כשורת
   טקסט חדשה. המרווח השלילי מבטל את הרווח שהלוח נותן בין כל
   שני ילדים, כי השתיים האלה הן בלוק אחד. */
.care-sub {
  margin-top: calc(-1 * var(--sp-2) + 4px);
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-md);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--gold-text);
}

/* ============================================================
   כותרת השאלות
   ------------------------------------------------------------
   ‎FAQ‎ ישב בסוף השורה השנייה, כלומר בגובה השורה התחתונה בלבד.
   כאן הוא יחידה נפרדת בשורת פלקס, ו-‎align-items: center‎ ממקם
   אותו בדיוק באמצע שתי השורות שלצידו.

   שתי שורות העברית מוצהרות ולא נשברות מאליהן, אחרת נקודת
   השבירה משתנה עם הרוחב והמרכז זז איתה.
   ============================================================ */

.faq-h {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.faq-h-lines span { display: block; }
.faq-h-tag { flex: none; }

/* באנגלית ‎FAQ‎ ו-‎Frequently asked questions‎ הן אותן מילים,
   ולכן שם הוא לא מופיע כלל */
html[lang="en"] .faq-h-tag { display: none; }

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

.foot-in {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}

.foot-in .foot-tel { margin: 0; }

/* הניווט מקבל את המרווח הגדול משני צדדיו, כי הוא הדבר היחיד
   כאן שנועד ללחיצה ולא לקריאה */
.foot-in .foot-nav {
  justify-content: center;
  margin-block: var(--sp-2);
  gap: clamp(var(--sp-2), 2.2vw, var(--sp-4));
}

.foot-in .foot-anno {
  justify-content: center;
  margin-top: var(--sp-3);
}

/* יעד נגיעה. הקישור הצר ביותר כאן הוא 33 פיקסלים והטקסט 20
   לגובה, הרבה מתחת ל-44 המומלצים. הפסאודו מרחיב את האזור
   הלחיץ בלי לגעת בפריסה, אותו פתרון שכבר קיים ללוגו ולטלפון
   בפוטר. */
.foot-nav a { position: relative; }
.foot-nav a::before { content: ""; position: absolute; inset: -12px -7px; }

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

   ‎5%‎ מלמטה: ההמסה תופסת 17 אחוז מגובה התמונה, וב-5 היא כבר
   כהה מספיק כדי שהאותיות יישבו על שטח נקי ולא על העיפרון
   והשולחן. גבוה מזה והן נופלות על תוכן, נמוך מזה והן נבלעות.
   ============================================================ */

.hero-sig {
  position: absolute;
  inset-inline: 0;
  bottom: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-2), 2vw, var(--sp-3));
  pointer-events: none;
  user-select: none;
}

.hero-sig i {
  flex: none;
  width: clamp(26px, 6vw, 88px);
  height: 1px;
}
.hero-sig i:first-child { background: linear-gradient(to right, transparent, rgba(140,190,255,.55)); }
.hero-sig i:last-child  { background: linear-gradient(to right, rgba(140,190,255,.55), transparent); }

.hero-sig > span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-light);
  font-size: clamp(var(--t-xs), 1.45vw, var(--t-base));
  letter-spacing: .2em;
  white-space: nowrap;
  direction: ltr;
  /* בהיר מהסימנים שבשוליים, כי ההמסה נמשחת מעל האותיות
     ומחווירה אותן בעצמה. בגוון המשני הן היו נעלמות. */
  color: var(--fg);
  opacity: .92;
}

@media (max-width: 780px) {
  /* בנייד התמונה נמוכה יותר, ולכן חמישה אחוזים נופלים כבר בלב
     ההמסה והאותיות כמעט נמחקות. תשעה אחוזים מחזירים אותן
     לשוליים העליונים שלה, שם הן עדיין נקראות ועדיין נבלעות. */
  .hero-sig { bottom: 9%; }
  .hero-sig > span { opacity: 1; letter-spacing: .16em; }
}