/* ==========================================================================
   SafePoint — Base · v2
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--sp-font-body);
  font-size: var(--sp-text-md);
  font-weight: var(--sp-weight-regular);
  line-height: var(--sp-leading-normal);
  color: var(--sp-text);
  background-color: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; transition: color var(--sp-duration-fast) var(--sp-ease-out); }

hr { border: none; border-top: 1px solid var(--sp-rule); margin-block: var(--sp-space-12); }

::selection { background-color: var(--sp-purple-200); color: var(--sp-purple-900); }

:focus-visible {
  outline: 1.5px solid var(--sp-border-focus);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   טיפוגרפיה — Light וגדול. הניגוד נוצר מגודל ומרווח, לא ממשקל ומצבע.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sp-font-display);
  color: var(--sp-neutral-900);
  text-wrap: balance;
}

h1 {
  font-size: var(--sp-text-5xl);
  font-weight: var(--sp-weight-light);
  line-height: var(--sp-leading-tight);
  letter-spacing: var(--sp-tracking-tight);
}
h2 {
  font-size: var(--sp-text-4xl);
  font-weight: var(--sp-weight-light);
  line-height: var(--sp-leading-snug);
  letter-spacing: var(--sp-tracking-tight);
}
h3 {
  font-size: var(--sp-text-2xl);
  font-weight: var(--sp-weight-regular);
  line-height: var(--sp-leading-snug);
  letter-spacing: var(--sp-tracking-snug);
}
h4 { font-size: var(--sp-text-xl); font-weight: var(--sp-weight-medium); line-height: var(--sp-leading-snug); }
h5 { font-size: var(--sp-text-lg); font-weight: var(--sp-weight-medium); }
h6 { font-size: var(--sp-text-md); font-weight: var(--sp-weight-semibold); }

p { text-wrap: pretty; }

/* פסקת פתיחה */
.sp-lead {
  font-size: var(--sp-text-lg);
  font-weight: var(--sp-weight-light);
  line-height: var(--sp-leading-relaxed);
  color: var(--sp-text-muted);
}

/* תווית זעירה באותיות רווחות — המפריד הטיפוגרפי המרכזי באתר */
.sp-eyebrow {
  display: block;
  font-size: var(--sp-text-2xs);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-wider);
  text-transform: uppercase;
  color: var(--sp-text-subtle);
}

/* מספור מקטע — 01 / 02 */
.sp-index {
  font-size: var(--sp-text-2xs);
  font-weight: var(--sp-weight-medium);
  letter-spacing: var(--sp-tracking-wide);
  color: var(--sp-neutral-400);
  font-variant-numeric: tabular-nums;
}

/* רגע מותג יחיד — Peleg. להשתמש במשורה. */
.sp-accent-type { font-family: var(--sp-font-accent); font-weight: var(--sp-weight-regular); }

.sp-small  { font-size: var(--sp-text-sm); }
.sp-muted  { color: var(--sp-text-muted); }
.sp-subtle { color: var(--sp-text-subtle); }

.sp-price {
  font-size: var(--sp-text-lg);
  font-weight: var(--sp-weight-medium);
  color: var(--sp-neutral-900);
  font-variant-numeric: tabular-nums;
}
.sp-price__was {
  font-size: var(--sp-text-sm);
  font-weight: var(--sp-weight-regular);
  color: var(--sp-text-subtle);
  text-decoration: line-through;
  margin-inline-start: var(--sp-space-2);
}

/* --------------------------------------------------------------------------
   פריסה
   -------------------------------------------------------------------------- */
.sp-container {
  inline-size: 100%;
  max-inline-size: var(--sp-container);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.sp-container--narrow { max-inline-size: var(--sp-container-narrow); }
.sp-container--wide   { max-inline-size: var(--sp-container-wide); }

.sp-section { padding-block: var(--sp-section-y); }
.sp-section--tight  { padding-block: var(--sp-section-y-tight); }
.sp-section--subtle { background: var(--sp-bg-subtle); }
.sp-section--ink    { background: var(--sp-bg-ink); color: var(--sp-text-inverse); }
.sp-section--ink h1, .sp-section--ink h2, .sp-section--ink h3 { color: var(--sp-text-inverse); }
.sp-section--ink .sp-eyebrow { color: var(--sp-purple-300); }
.sp-section--ink .sp-lead    { color: rgba(255,255,255,.72); }

/* קו שיער עליון למקטע — מפריד במקום רקע צבעוני */
.sp-section--ruled { border-block-start: 1px solid var(--sp-rule); }

.sp-stack { display: flex; flex-direction: column; }
.sp-stack--2 { gap: var(--sp-space-2); }
.sp-stack--3 { gap: var(--sp-space-3); }
.sp-stack--4 { gap: var(--sp-space-4); }
.sp-stack--5 { gap: var(--sp-space-5); }
.sp-stack--6 { gap: var(--sp-space-6); }
.sp-stack--8 { gap: var(--sp-space-8); }
.sp-stack--12 { gap: var(--sp-space-12); }

.sp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-4); }

.sp-grid { display: grid; gap: var(--sp-space-8); }
.sp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* כותרת מקטע — יישור לימין, לא ממורכזת. פחות "אתר תבנית". */
.sp-section-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: var(--sp-space-6) var(--sp-space-12);
  padding-block-end: var(--sp-space-6);
  border-block-end: 1px solid var(--sp-rule);
  margin-block-end: var(--sp-space-10);
}
/* רוחב ב-rem ולא ב-ch: יחידת ch נמדדת מול גופן האלמנט (15px) ולא מול ה-h2 (46px),
   ומצרה את הכותרת בטעות לשתי שורות. */
.sp-section-head__title { display: flex; flex-direction: column; gap: var(--sp-space-3); max-inline-size: 30rem; }
/* טור צדדי נפתח רק כשיש בו תוכן — אחרת הכותרת נחנקת במיכל צר */
.sp-section-head:has(.sp-section-head__aside) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
}
.sp-section-head__aside { padding-block-end: 0.35em; }
@media (max-width: 780px) {
  .sp-section-head { grid-template-columns: 1fr; align-items: start; }
}

.sp-visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}