/* pages.css — הרכיבים המשותפים לארבעת דפי הנחיתה.
 *
 * למה קובץ ולא העתקה: «אחידות» שנשמרת בהעתק-הדבק נשברת בעדכון
 * הראשון — מתקנים בדף אחד, שלושה נשארים מאחור, ותוך חודשיים
 * זה נראה כמו ארבעה אתרים של ארבעה אנשים. כאן זה מקום אחד.
 *
 * החלוקה:
 *   tokens.css   — צבע, מידה, מרווח, גופן
 *   atelier.css  — פרימיטיבים: band, wrap, lead, panel, btn, badge
 *   motion.css   — חשיפה, קו-חיבור, סרגל התקדמות
 *   pages.css    — זה. רכיבים שחוזרים בין הדפים אבל אינם פרימיטיבים
 *   <style> בדף  — רק מה שקיים בדף אחד בלבד
 *
 * האישיות של כל דף לא נמצאת כאן אלא בשני מקומות: הרקע של הירו,
 * והמנגנון שהמבקר מפעיל. השלד זהה בכולם, ובכוונה.
 */

/* ============================================================
   0 · הטיפוגרפיה של המותג
   ============================================================
   `--disp` מוגדר ב-tokens.css כ-Heebo, שהוא ברירת המחדל של
   עברית ברשת. כאן הוא נדרס בסריף — החתימה שמוגדרת ב-HEADQUARTERS.
   חייב לשבת **לפני** שאר הקובץ ואחרי tokens, כי סדר גובר.

   והמידות מכוילות מחדש: מרווח האותיות היה -0.025em, שהתאים
   לגרוטסק. בסריף זה נראה דחוס, כי לסריף יש כבר תגים שממלאים
   את הרווח. נמדד בעין על כותרת אמיתית. */
:root {
  --disp: 'Secular One', 'Sec-fb', 'Segoe UI Semibold', system-ui, sans-serif;
}
/* h2 יורש את --disp מ-atelier, אבל h1 ⛔ אינו: הוא נשאר על גופן
   הגוף, וכל כותרת ראשית בכל דף רצה ב-Assistant בזמן שהמשניות
   כבר היו בסריף. נמדד ב-getComputedStyle, לא בעין — ההפרש בין
   שני גופנים באותו דף כמעט ⛔ אינו נראה עד שמסתכלים עליו יחד. */
h1, h2, h3 { font-family: var(--disp); }
.lead, h1, h2 { letter-spacing: -.008em; }
.lead { line-height: 1.12; }
.lrow__b, .tier__who, .step__t, .q summary, .foot__brand, .door__t, .bundle__t {
  letter-spacing: -.004em;
}

/* ============================================================
   1 · דו-כיווניות
   ============================================================
   מספר בפסקה עברית הוא תו ניטרלי בקצוות שלו, ולכן סכום עם סימן
   מטבע וטווח כמו «11-25» נפתרים לכיוון הפסקה ומצוירים הפוך.
   נבדק במדידת מיקום הגליף, לא בקריאת טקסט. */
.num, .rng, .val { direction: ltr; unicode-bidi: isolate; }

/* ============================================================
   2 · יעדי מגע
   ============================================================
   נמדד על הדפים החיים: קישורי הפוטר יצאו 14-28px גובה. באצבע
   זו החטאה. הרצפה כאן 46px, ובלי לשנות את המראה. */
.foot a, .nav__brand { display: inline-flex; align-items: center; min-block-size: 46px; }

/* ============================================================
   3 · הפוטר
   ============================================================
   `.foot` אינו קיים ב-atelier.css — הוא ישב בתוך ה-style של
   qr.html, ולכן דף אח שהעתיק את ה-markup בלבד קיבל פוטר חשוף. */
.foot {
  padding-block: var(--s7) calc(var(--s6) + 20px);
  border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--muted); background: var(--bg2);
}
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--s5);
}
@media (max-width: 760px) { .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }
.foot__brand { font-family: var(--disp); font-weight: 900; font-size: 17px; color: var(--text); }
.foot__blurb { margin-block-start: var(--s3); max-inline-size: 34ch; line-height: 1.55; }
.foot__k {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-block-end: var(--s2);
}
.foot ul { display: grid; gap: 2px; }
.foot a { color: var(--sec); text-decoration: none; }
.foot a:hover { color: var(--accent-hi); }
.foot__end {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between;
  margin-block-start: var(--s6); padding-block-start: var(--s4);
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--faint);
}

/* ============================================================
   4 · רשתות
   ============================================================ */
.duo  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 860px) { .duo  { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .trio { grid-template-columns: minmax(0, 1fr); } }
.duo > *, .trio > * { min-inline-size: 0; }

/* ============================================================
   5 · שורת-מלאי ממוספרת
   ============================================================
   לא רשת של כרטיסים זהים. פריטים בגריד אחיד טוענים שכולם שווי
   ערך, וזה כמעט תמיד שקר: אחד מהם הוא הסיבה שקונים. */
.ledger { display: grid; gap: var(--s3); }
.lrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4); align-items: baseline;
  padding: var(--s4) var(--s5);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); border-inline-start: 2px solid var(--border-hi);
}
.lrow--key { border-inline-start-color: var(--accent); background: var(--panel-hi); }
.lrow__n { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.lrow__b { font-family: var(--disp); font-weight: 700; font-size: clamp(15.5px, 1.9vw, 18px); }
.lrow__b em { font-style: normal; color: var(--accent-hi); }
.lrow__d {
  display: block; font-family: var(--font); font-weight: 400; font-size: 13.5px;
  color: var(--muted); margin-block-start: 5px; line-height: 1.45;
}
.lrow__m {
  display: block; font-family: var(--mono); font-size: 11.5px;
  color: var(--faint); margin-block-start: 7px;
}

/* ============================================================
   6 · מדרגות מחיר
   ============================================================ */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.tier {
  display: grid; align-content: start; gap: var(--s2);
  padding: var(--s5); background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.tier--mine { border-color: var(--accent); background: var(--panel-hi); }
.tier__k { font-size: 12px; color: var(--muted); letter-spacing: .07em; }
.tier__who { font-family: var(--disp); font-weight: 700; font-size: 17px; }
.tier__p {
  font-family: var(--mono); font-size: clamp(28px, 4vw, 38px); color: var(--accent-hi);
  letter-spacing: -.03em; margin-block-start: var(--s2);
}
.tier__p--word { font-family: var(--disp); font-size: clamp(20px, 2.6vw, 26px); }
.tier__u { font-size: 12.5px; color: var(--faint); }
.tier ul { display: grid; gap: 6px; margin-block-start: var(--s3); font-size: 13.5px; color: var(--sec); }
.tier li { padding-inline-start: 15px; position: relative; }
.tier li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent);
}

/* ============================================================
   7 · מספרים שנמדדו
   ============================================================
   נתון בלי מקור הוא קישוט. הרכיב הזה קיים כדי לשאת מספר
   שאפשר לאמת, ולידו מה הוא סופר. */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 860px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fig { padding-inline-start: var(--s4); border-inline-start: 2px solid var(--border-hi); }
.fig b {
  display: block; font-family: var(--mono); font-size: clamp(24px, 3.4vw, 34px);
  color: var(--accent-hi); letter-spacing: -.03em; line-height: 1;
}
.fig span { display: block; font-size: 12.5px; color: var(--muted); margin-block-start: 8px; line-height: 1.4; }
/* וריאנט של שתי עמודות, כמחלקה ולא ב-style בשורה. סגנון בשורה
   גובר על שאילתת מדיה תמיד, ולכן וריאנט inline נשאר דו-עמודתי
   גם בטלפון — וזה בדיוק מה שגרם לשתי עמודות לדרוס זו את זו
   במצגת. נתפס על מכשיר אמיתי. */
.figs--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .figs, .figs--pair { grid-template-columns: minmax(0, 1fr); } }


/* ============================================================
   8 · שלבים
   ============================================================ */
.steps { display: grid; gap: 0; border-block-start: 1px solid var(--border); }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4) var(--s5); padding-block: var(--s5);
  border-block-end: 1px solid var(--border); align-items: baseline;
}
.step__n {
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  inline-size: 2.6ch; text-align: start;
}
.step__t { font-family: var(--disp); font-weight: 700; font-size: clamp(16px, 2vw, 19px); }
.step__d { font-size: 14px; color: var(--muted); margin-block-start: 6px; line-height: 1.5; max-inline-size: 64ch; }
.step__d b { color: var(--sec); font-weight: 600; }

/* ============================================================
   9 · שאלות
   ============================================================ */
.qs { display: grid; gap: 0; border-block-start: 1px solid var(--border); }
.q { border-block-end: 1px solid var(--border); }
.q summary {
  cursor: pointer; list-style: none; padding-block: var(--s4); min-block-size: 46px;
  font-family: var(--disp); font-weight: 700; font-size: clamp(15.5px, 1.9vw, 18px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ''; inline-size: 9px; block-size: 9px; flex: none;
  border-inline-end: 1.5px solid var(--accent); border-block-end: 1.5px solid var(--accent);
  transform: rotate(45deg); transition: transform var(--dur-lead) var(--ease);
}
.q[open] summary::after { transform: rotate(-135deg); }
.q p { padding-block-end: var(--s5); color: var(--sec); max-inline-size: 62ch; line-height: 1.6; }

/* ============================================================
   10 · הירו
   ============================================================
   שלד אחד לארבעת הדפים. מה שמשתנה בין דף לדף הוא **מה יושב
   בעמודה השנייה** — מחשבון, אתר חי, או שלוש דלתות. */
.hero { padding-block: clamp(64px, 12vh, 132px) clamp(40px, 7vh, 84px); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.hero__lead { font-size: clamp(29px, 3.9vw, 46px); }
.hero__sub { max-inline-size: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s6); }
.hero__note {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-block-start: var(--s5); font-size: 12.5px; color: var(--faint);
}
.hero__note span { display: flex; align-items: center; gap: 7px; }
.hero__note span::before {
  content: ''; inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* ── היררכיית כותרות ─────────────────────────────────────────────
   ⚠️⚠️ הבאג: `atelier.css` נותן ל-`h2` גודל של clamp(23px,2.9vw,32px),
   אבל `.lead` (פסקת פתיח, 18px) יושבת עליו — **בסגוליות**, כי מחלקה
   גוברת על אלמנט בלי קשר לסדר. ⇒ בשלושה מארבעת הדפים כל כותרת מקטע
   נצבעה ב-18px, בדיוק בגודל של טקסט רגיל, והדפים נקראו שטוחים.
   ⛔ הבעיה ⛔ אינה סדר בקובץ — היא בחירת הסלקטור.
   ⇒ `h2.lead` הוא 0-1-1 ולכן גובר על `.lead` שהוא 0-1-0.
   ⚠️ הכותרת הראשית פטורה: `.hero__lead` כבר נותן לה 46-58px. */
h2.lead, h3.lead {
  font-size: clamp(23px, 2.9vw, 32px);
  line-height: 1.16;
  color: var(--text);
}
h3.lead { font-size: clamp(19px, 2.1vw, 23px); }

/* ── ריווח-אותיות בעברית ─────────────────────────────────────────
   ⚠️⚠️ `.eyebrow` נשא `letter-spacing: .12em` + `text-transform:
   uppercase` — **שתי מוסכמות לטיניות**. ב-Latin רווח כזה על ראשי-תיבות
   קטנים עוזר; בעברית הוא **מפרק את צורת המילה**, כי האותיות ממילא
   נפרדות והעין קוראת מתאר. נמדד: 1.68px על גופן 14px.
   ⇒ מעל ~0.05em העברית מתחילה להתפרק. ⛔ לא מבטלים לגמרי — קצת ריווח
   עדיין מסמן «תווית» ולא «טקסט». */
.door__k, .foot__k, .expose__k, .calc__state,
.tier__k, .board__k, .rt__srck, .shot__cap {
  letter-spacing: .035em;
}