/* Secretus - העיצוב של האתר (index.html, privacy.html, accessibility.html).
   הצבעים והפונט של "מסמך תיאור השירות": כתום #D97757, טורקיז #399D9D, רקע מנטה #F1F7F7 ולבן, קווים #DDE6E8,
   טקסט כהה #0A2532. המבנה הוא של אתר ולא של מסמך (21.10.2026): בלי מספרי פרקים ובלי קו ליד הכותרות, ולכל אזור
   פריסה משלו (פיצול, כרטיסים, שאלות ותשובות פתוחות, שאלות נפוצות, שלבים ומשטח סוגר). בלי מחירים (21.10.2026).
   הכתום והטורקיז לא מגיעים ל-4.5:1 על לבן, ולכן הם רק בכותרות גדולות, אייקונים, קווים ורקע של כפתורים
   (על הכפתור הטקסט כהה). לטקסט קטן יש גוונים כהים יותר.
   פונט: Heebo בלבד (400, 500, 700), מאוחסן מקומית.
   הנגן של הדוגמאות (showcase.css) משתמש באותם משתנים: הצבעים, הפונט, הפינות ומשתני התנועה. */

/* ===== פונטים ===== */
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/heebo-hebrew-400-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/heebo-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/heebo-hebrew-500-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/heebo-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/heebo-hebrew-700-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/heebo-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== צבעים ===== */
:root {
  --coral: #D97757;        /* כפתורים, הסמל והדגשות. טקסט עליו: --ink (5.1:1) */
  --coral-hover: #E58F72;
  --teal: #399D9D;         /* קווים, אייקונים, עיגולי הסימון */
  --teal-ink: #237272;     /* קישורים, אייקונים וטקסט קטן בטורקיז (5:1 ומעלה) */
  --teal-soft: #9CCBCB;
  --teal-tint: #E3F0F0;    /* העיגולים של האייקונים */
  --mint: #F1F7F7;
  --white: #FFFFFF;
  --line: #DDE6E8;
  --line-mint: #D5E2E4;    /* קו דק על רקע מנטה, ומסגרת של כרטיס לבן על מנטה */
  --line-strong: #C7D4D8;  /* קו בולט יותר, בנגן: תיבת הכתיבה והנקודות בפס העליון של החלון */
  --line-field: #7D9199;   /* מסגרת של שדה: 3:1 על לבן */
  --ink: #0A2532;          /* כותרות */
  --ink-2: #24394A;        /* טקסט רץ */
  --muted: #56707A;        /* טקסט משני: 4.8:1 על מנטה */
  --coral-tint: #FBF1EC;   /* רקע בהיר לכתום: הודעות בטופס, סימון ממתין, ו"טיוטה לבדיקת עורך הדין" בנגן */
  --error: #A8382C;
  --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ===== מערכת העיצוב: פריסה, טיפוגרפיה, פינות, עומק ותנועה ===== */
:root {
  --content: 1200px;
  --narrow: 820px;         /* טור צר: הפתיח של כל אזור והשאלות הנפוצות */
  --mid: 1040px;           /* טור בינוני: הכרטיסים של "למי זה מתאים". כל השאר ברוחב התוכן */
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;
  --band-y: clamp(72px, 5vw + 48px, 128px);
  --head-gap: clamp(32px, 3vw, 56px);   /* מהפתיח של אזור עד התוכן שלו */
  --gap: clamp(16px, 1.8vw, 24px);
  --pad: clamp(22px, 2.4vw, 36px);
  /* סולם טיפוגרפי */
  --fs-h1: clamp(34px, 2.8vw + 23px, 64px);
  --fs-h2: clamp(28px, 1.5vw + 22px, 46px);
  --fs-h3: clamp(18px, .2vw + 17.2px, 20px);
  --fs-lead: clamp(17.5px, .35vw + 16.2px, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-micro: 13.5px;
  /* פינות. --r-xl למשטחים הגדולים: הבמה של הדוגמאות, השאלות באבטחה, השלבים, "מה מקבלים בהקמה" והמשטח של יצירת הקשר */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  /* עומק: המשטחים שטוחים (קו דק, בלי צל). צל קטן רק לכפתור הראשי */
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 14px -10px rgba(217, 119, 87, .7);
  /* תנועה: רק transform, opacity ו-clip-path */
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* שלוש עקומות נוספות, רק ללולאה של הסמל בפתיח: --ease-in-out לכרטיס ולשורות שנכתבות, --ease-in לנקודות שמאיצות
     אל החוגה, --ease-snap לקליק של החוגה ולסימן האישור (מתחיל לאט, נתפס, וקופץ קצת מעבר) */
  --ease-in-out: cubic-bezier(.45, 0, .3, 1);
  --ease-in: cubic-bezier(.4, 0, .8, .45);
  --ease-snap: cubic-bezier(.5, 0, .25, 1.4);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 760ms;
  --rise: 18px;
  --stagger: 80ms;
}
@media (max-width: 959px) {
  :root { --header-h: 60px; }
}
@media (max-width: 480px) {
  :root { --fs-body: 16.5px; --fs-small: 14.5px; }
}

/* ===== בסיס ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--white); }
body { margin: 0; background: var(--white); color: var(--ink-2); font-family: var(--font); font-size: var(--fs-body); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button, input { font: inherit; color: inherit; }
::selection { background: rgba(57, 157, 157, .22); }
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.nb { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; inset-inline-start: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm); background: var(--ink); color: var(--white); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.container { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* רצועות לכל הרוחב, מנטה ולבן לסירוגין. קישור לאזור (הניווט והכפתורים) נוחת קרוב לכותרת שלו ולא בראש
   הריווח של הרצועה, כדי שהנגן ב"דוגמאות" ייכנס למסך */
.band { padding-block: var(--band-y); scroll-margin-top: calc(var(--head-gap) - var(--band-y)); }
.band--white { background: var(--white); }
.band--mint { background: var(--mint); }

/* הפתיח של אזור: כותרת גדולה וממורכזת ושורה אחת מתחתיה. בלי מספר ובלי קו */
.intro { max-width: var(--narrow); margin-inline: auto; text-align: center; }
.h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.02em; }
.lead { max-width: 40em; margin: 16px auto 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; text-wrap: balance; }
.intro + * { margin-top: var(--head-gap); }
.card-title { font-size: var(--fs-h3); line-height: 1.35; }

/* ===== כפתורים וקישורים ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.btn .icon { width: 20px; height: 20px; stroke-width: 2; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--coral); color: var(--ink); box-shadow: var(--shadow-btn); }
.btn-sm.btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; }
.btn-primary:hover { background: var(--coral-hover); }
.btn-quiet { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--teal-soft); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--dur-1) var(--ease); }
  .btn:active { transform: translateY(1px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .icon { transform: translateX(-3px); }
  .btn .icon { transition: transform var(--dur-2) var(--ease); }
}
.link { color: var(--teal-ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(35, 114, 114, .35); text-underline-offset: 4px; }
.link:hover { text-decoration-color: currentColor; }
/* מספר טלפון או מייל (.ltr) בתוך קישור: inline, כדי שהקו של הקישור יעבור גם מתחתיו */
a .ltr { display: inline; white-space: nowrap; }
/* קישור עם חץ: "לתיאום הדגמה" ליד השאלות באבטחה, ו"חזרה לדף" בעמודי המידע המשפטי */
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-ink); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .text-link .icon { transition: transform var(--dur-2) var(--ease); }
  .text-link:hover .icon { transform: translateX(-3px); }
}

/* אייקון בעיגול טורקיז בהיר */
.ic-circle { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
.ic-circle--sm { width: 38px; height: 38px; }

/* ===== כותרת עליונה ===== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--mint); }
/* הרקע הלבן והקו נכנסים בשקיפות כשגוללים. בלי JS הם תמיד שם */
.site-header::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px -16px rgba(10, 37, 50, .4); transition: opacity var(--dur-2) var(--ease); }
.at-top .site-header::before { opacity: 0; }
.header-inner { position: relative; display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 30px; height: 30px; }
/* Secretus באותיות לטיניות, Heebo 700. הסמל גדול פי 1.36 בערך מגודל המילה */
.logo-word { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: clamp(18px, 2vw, 32px); }
.nav a { display: block; padding: 8px 0; border-radius: 4px; color: var(--ink-2); font-size: 15.5px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--teal-ink); }
.header-cta { margin-inline-start: 8px; }
/* התפריט בטלפון ובטאבלט: details, כך שהוא נפתח גם בלי JS. נפתח מתחת לכותרת, לכל הרוחב */
.mnav { display: none; }
.mnav-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; list-style: none; }
.mnav-btn::-webkit-details-marker { display: none; }
.mnav-btn::marker { content: ''; }
.mnav-btn:hover { box-shadow: inset 0 0 0 1px var(--teal-soft); }
.mnav-btn .icon { stroke-width: 2; }
.mnav-close, .mnav[open] .mnav-open { display: none; }
.mnav[open] .mnav-close { display: block; }
.mnav-panel { position: absolute; top: 100%; inset-inline: 0; padding: 4px var(--gutter) 12px; border-bottom: 1px solid var(--line); background: var(--white); box-shadow: 0 6px 20px -16px rgba(10, 37, 50, .4); }
.mnav-panel a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 17px; font-weight: 500; text-decoration: none; }
.mnav-panel li:last-child a { border-bottom: 0; }
.mnav-panel a:hover { color: var(--teal-ink); }
@media (max-width: 959px) {
  .nav { display: none; }
  .mnav { display: block; }
  .header-inner { gap: 8px; }
  .header-cta { min-height: 44px; margin-inline-start: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .mnav[open] .mnav-panel { animation: qa-in var(--dur-2) var(--ease); }
}

/* ===== פתיח ===== */
.hero { position: relative; overflow: clip; background: var(--mint); padding-block: clamp(28px, 4.4vw, 64px) clamp(56px, 6vw, 104px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hero-copy { padding-top: 8px; }
/* "מבוסס על Claude של Anthropic": תגית לבנה עם נקודה כתומה */
.badge { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; margin-bottom: 22px; padding-inline: 14px 16px; border: 1px solid var(--line-mint); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-size: var(--fs-small); font-weight: 500; line-height: 1.2; }
.badge-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(217, 119, 87, .18); }
.hero-title { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -.02em; }
.hero-sub { max-width: 34em; margin-top: 20px; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.65; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* שלוש נקודות קצרות מתחת לכפתורים */
.hero-points { display: grid; gap: 12px; margin-top: 32px; }
.hero-points li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.35; }
.pt-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--white); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line-mint); }
@media (max-width: 479px) {
  .hero-ctas .btn { width: 100%; }
}
@media (min-width: 640px) {
  .hero-points { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 36px; }
}

/* הסמל: החוגה במרכז, מסלולים ורשת של נקודות מחוברות, ובלולאה גם כרטיס של טיוטה שיוצא מהחוגה.
   כאן התמונה הסטטית (בלי JS ובפחות תנועה): התוויות, החוגה והכרטיס השלם. הלולאה עצמה: "הלולאה של הסמל", בהמשך הקובץ */
.art { position: relative; width: min(100%, 280px); aspect-ratio: 1; margin: 28px auto 0; }
.art::before { content: ''; position: absolute; inset: -6%; background-image: radial-gradient(rgba(57, 157, 157, .3) 1.1px, transparent 1.7px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); }
.art-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit { fill: none; stroke: var(--teal-soft); }
.orbit--1 { stroke-width: 1.2; opacity: .9; }
.orbit--2 { stroke-width: 1.6; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .9; }
.orbit--3 { stroke-width: 1; opacity: .55; }
.mesh-links path { fill: none; stroke: var(--teal); stroke-width: 1.1; opacity: .38; }
.node { fill: var(--teal); }
.node--sm { fill: var(--teal-soft); }
.node--soft { fill: var(--teal-soft); }
.node--coral { fill: var(--coral); }
.halo { fill: var(--teal); opacity: .14; }
.art-spokes line { stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .6; }
/* הנקודה שעוברת אל החוגה, עם זנב קצר */
.pulse { opacity: 0; }
.pulse circle { fill: var(--coral); }
.pulse rect { fill: url(#art-tail); }
#art-tail stop { stop-color: var(--coral); }
.art-ripple { fill: none; stroke: var(--coral); stroke-width: 2; opacity: 0; }
/* הזוהר של המרכז: טבעת כתומה ברווח שבין העיגול הכתום לשנתות, כך שחור המנעול נשאר לבן */
.art-core { fill: none; stroke: var(--coral); stroke-width: 3.4; opacity: 0; }
/* כרטיס הטיוטה (180 על 100): לבן, קו דק, שורות, סימן אישור ו"טיוטה לבדיקה" בטורקיז כהה על מנטה (5.2:1).
   בפינה הפנויה, משמאל למטה (בטלפון, בלי התוויות: מתחת לחוגה), וגדל כשהסמל קטן, כדי שהתווית לא תהיה קטנה מ-11px.
   (--card-dx, --card-dy): מהמקום של הכרטיס אל מרכז החוגה, ביחידות של הכרטיס: (240 - x) / scale - 90, (240 - y) / scale - 50.
   משם הוא יוצא בלולאה */
.art-card-pos { --card-dx: 0px; --card-dy: -100.6px; transform: translate(96px, 321px) scale(1.6); }
.art-card-bg { fill: var(--white); stroke: var(--line); }
.art-ln { fill: var(--line-strong); }
.art-ln--1 { fill: var(--ink); opacity: .78; }
.art-tag rect { fill: var(--mint); }
.art-tag text { fill: var(--teal-ink); font-size: 13px; font-weight: 500; }
.art-ok circle { fill: var(--teal); }
.art-ok-mark { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* הריבוע שמכסה את הסימן עד שהוא "נכתב". בלי תנועה הוא ברוחב 0, כלומר לא קיים */
.art-ok-cover { fill: var(--teal); transform-box: fill-box; transform-origin: right center; transform: scaleX(0); }
/* --ax: התווית בקצה השמאלי זזה מעט פנימה, כדי שלא תצא מהעמודה; הקו עדיין נכנס אליה מלמטה */
.art-chip { position: absolute; left: var(--x); top: var(--y); transform: translate(var(--ax, -50%), -50%); display: none; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; }
.art-chip-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
/* ההדגשה של תווית בלולאה: מסגרת טורקיז וטבעת בהירה, שקופות עד שהתווית נדלקת */
.art-chip::after { content: ''; position: absolute; inset: -1px; border: 1.5px solid var(--teal); border-radius: inherit; box-shadow: 0 0 0 4px var(--teal-tint); opacity: 0; pointer-events: none; }
/* עצירת הלולאה (WCAG 2.2.2): כפתור קטן בפינה הפנויה של הסמל, משמאל למעלה. מוצג רק כשיש תנועה (בהמשך הקובץ).
   בעצירה הסמל חוזר לתמונה השלמה (.is-still, main.js), והבחירה נשמרת בדפדפן */
.art-ctl { position: absolute; left: 0; top: 0; z-index: 1; display: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink-2); cursor: pointer; }
.art-ctl:hover { border-color: var(--teal-soft); color: var(--ink); }
.art-ctl .icon { width: 14px; height: 14px; }
.art-ctl .art-ic-play, .is-still .art-ctl .art-ic-pause { display: none; }
.is-still .art-ctl .art-ic-play { display: block; }
@media (max-width: 559px) {
  .art-spokes line { display: none; }
}
@media (min-width: 560px) {
  .art { width: min(100%, 380px); }
  .art-chip { display: inline-flex; }
  .art-card-pos { --card-dx: 111.8px; --card-dy: -159.1px; transform: translate(18px, 360px) scale(1.1); }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
  .hero-copy { padding-block: 24px; }
  .art { width: min(100%, 480px); margin: 0 auto; }
}
@media (min-width: 960px) and (max-width: 1149px) {
  .art-card-pos { --card-dx: 103.2px; --card-dy: -150px; transform: translate(12px, 358px) scale(1.18); }
}
@media (min-width: 1150px) {
  .art-card-pos { --card-dx: 126px; --card-dy: -170px; transform: translate(24px, 360px); }
}

/* ===== למי זה מתאים (#industries): ארבעה כרטיסים, אחד לכל סוג ארגון =====
   רצועת מנטה מיד אחרי הפתיח, עם קו דק ביניהם, כך שמ"דוגמאות" והלאה הרצועות נשארות לבן ומנטה לסירוגין.
   הכרטיסים לבנים, כמו היתרונות ב"מה שונה": אייקון בעיגול טורקיז בהיר, השם, מי עובד במערכת, ומתחת לקו "למשל"
   ושלוש משימות. בכרטיס של משרדי עורכי הדין גם שורת האתיקה, בתחתית, קטנה ועם קו טורקיז בצד, כדי שהכרטיס שלידו
   (פיננסים) לא יישאר עם חלל גדול מתחת למשימות. בטלפון טור אחד, ומ-768px שניים על שניים, גם במחשב, בטור הבינוני
   (--mid). ארבעה בשורה נבדקו, והכרטיסים היו צרים מדי (כמעט כל משימה בשתי שורות, וחלל ריק מתחת
   לשלושה כרטיסים). גם שניים על שניים מ-640px היה צר מדי: עד 767px רוב השמות נשברו לשתי שורות. כשהכרטיסים זה ליד זה,
   החלקים שלהם על רשת משותפת (subgrid), כך שהקו ו"למשל" באותו גובה בשני הכרטיסים שבשורה. מתחת, שורה סוגרת לכל ארגון אחר */
.hero + .band--mint { border-top: 1px solid var(--line-mint); }
.inds { display: grid; gap: 12px; max-width: var(--mid); margin-inline: auto; }
.ind { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line-mint); border-radius: var(--r-xl); background: var(--white); }
.ind-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; align-content: start; }
.ind-head .ic-circle { grid-row: span 2; align-self: start; }
.ind-head .icon { stroke-width: 1.6; }
.ind-who { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.ind-body { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ind-eg { color: var(--teal-ink); font-size: var(--fs-micro); font-weight: 700; line-height: 1.4; }
.ind-tasks { display: grid; gap: 8px; margin-top: 10px; }
.ind-tasks li { position: relative; padding-inline-start: 18px; color: var(--ink-2); font-size: 16px; line-height: 1.5; text-wrap: balance; }
.ind-tasks li::before { content: ''; position: absolute; inset-inline-start: 1px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
/* שורת האתיקה: בתחתית הכרטיס, קטנה ובכהה, עם קו טורקיז בצד (בלי קו מעליה ובלי אייקון של אישור, כדי שלא תיראה כמו חותמת) */
.ind-note { margin-top: 16px; padding-inline-start: 12px; border-inline-start: 2px solid var(--teal); color: var(--ink); font-size: var(--fs-micro); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.ind-more { max-width: 34em; margin: clamp(28px, 3vw, 44px) auto 0; color: var(--ink); font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; text-align: center; text-wrap: balance; }
@media (min-width: 640px) {
  .ind { padding: 26px; }
}
@media (min-width: 768px) {
  .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  @supports (grid-template-rows: subgrid) {
    .ind { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .ind > * { align-self: start; }
    .ind-note { align-self: end; }
  }
}
@media (min-width: 1024px) {
  .ind { padding: 30px 32px; }
  .ind-head { column-gap: 18px; }
  .ind-head .ic-circle { width: 52px; height: 52px; }
}

/* ===== דוגמאות: הנגן (#sc-slot) על משטח מנטה =====
   #sc-slot ריק עד שהנגן נבנה בתוכו, ואז לא תופס מקום. בלי JS רשימת המשימות היא התוכן.
   בטלפון בלי משטח, כדי שלחלון יהיה כל הרוחב. מ-768px המשטח עוטף את הנגן, ושורת הלשוניות (עד 1100px,
   שבו היא שורה שנגללת לרוחב) נמתחת עד הקצוות שלו ולא עד קצה המסך */
.demo { --demo-pad: 0px; }
.slot:empty { display: none; }
.slot:not(:empty) + .tasks { margin-top: var(--gap); }
@media (min-width: 768px) {
  .demo { --demo-pad: clamp(24px, 3vw, 44px); padding: var(--demo-pad); border: 1px solid var(--line-mint); border-radius: var(--r-xl); background: var(--mint); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .demo .sc-tabs { margin-inline: calc(-1 * var(--demo-pad)); padding-inline: var(--demo-pad); scroll-padding-inline: var(--demo-pad); }
}

/* "דוגמה ממשרד עורכי דין, בנתונים מדומים": תגית מתחת לשורה של הדוגמאות, כי הסרטונים הם של משרד עורכי דין והדף לכל הארגונים */
.intro-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin-top: 18px; padding-inline: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-size: var(--fs-small); font-weight: 500; line-height: 1.3; }
.intro-tag .icon { color: var(--teal-ink); }

.tasks { display: grid; gap: 12px; }
.task { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.task .ic-circle { width: 46px; height: 46px; }
.task-title { font-size: var(--fs-h3); line-height: 1.35; }
.task p { margin-top: 4px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (min-width: 640px) {
  .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 1024px) {
  .tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task { padding: 26px; }
}

/* "כל תוצר הוא טיוטה": שורה ממורכזת עם אייקון, מתחת לנגן */
.draft-note { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: clamp(24px, 2.6vw, 36px) auto 0; color: var(--ink); font-weight: 500; line-height: 1.5; }
.draft-note .icon { color: var(--teal-ink); }
.draft-note span { text-wrap: balance; }

/* ===== מה שונה (#service): המשפט המרכזי מימין ושלושת היתרונות משמאל. שורת האתיקה עברה ל"למי זה מתאים" ===== */
.svc { display: grid; gap: clamp(32px, 4vw, 48px); }
.svc-copy { max-width: 40em; }
/* הכותרת בשתי שורות קבועות מ-560px: "Claude עצמו, עם כל היכולות שלו," / "כמערכת פרטית של הארגון". מתחת לזה השורות
   מתמזגות, והכותרת מאוזנת (text-wrap: balance של h2), עם רווחים קשיחים בין זוגות המילים ב-index.html. בפיצול (מ-1024px)
   הטור צר יותר, והשורה הראשונה (כ-13.9em) נכנסת בו רק כשהכותרת קצת קטנה משאר הכותרות (--fs-h2): עד 43px, ובין 1024
   ל-1280 לפי רוחב המסך. בלי nowrap: בגודל רגיל השורות נכנסות בכל רוחב, וכשמגדילים רק את הטקסט הן נשברות ולא גולשות */
.svc-title { max-width: 15em; }
@media (min-width: 560px) {
  .svc-title { max-width: none; }
  .svc-line { display: block; }
}
.svc-lead { margin-top: 22px; color: var(--ink); font-size: var(--fs-lead); line-height: 1.6; }
.svc-copy > p:not(.svc-lead) { margin-top: 14px; color: var(--ink-2); }
.benefits { display: grid; gap: 12px; }
.benefit { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border: 1px solid var(--line-mint); border-radius: var(--r-lg); background: var(--white); }
.benefit p { margin-top: 4px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
/* בטאבלט שלושת היתרונות בשורה, האייקון מעל הטקסט, כדי שלא ייראו כמו שורות של טבלה */
@media (min-width: 768px) and (max-width: 1023px) {
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .benefit { flex-direction: column; gap: 14px; padding: 22px 20px; }
}
@media (min-width: 1024px) {
  .svc { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; }
  .svc-title { font-size: min(var(--fs-h2), 3.3vw, 43px); }
  .benefit { padding: 24px 26px; }
}

/* ===== אבטחת מידע ופרטיות: ארבע שאלות ותשובות פתוחות (לא אקורדיון, כדי שלא ייראו כמו השאלות הנפוצות) =====
   רצועה לבנה (מ-21.10.2026, אחרי "מה שונה" שבמנטה), והשאלות על משטח מנטה אחד, כמו הנגן והשלבים ברצועות הלבנות.
   הפתיח: מגן בתוך שני מסלולים, בתוך הילה של נקודות (כמו החוגה ביצירת הקשר והסמל בפתיח), הכותרת והשורה שמתחתיה.
   בכל שאלה: אייקון בעיגול לבן והשאלה בכהה, ובתשובה התשובה הקצרה בכהה והפירוט אחריה. מתחת, קישור לתיאום הדגמה.
   הפתיח ממורכז מעל המשטח והקישור מתחתיו, בכל רוחב. בטלפון טור אחד, והתשובה ברוחב המשטח, מתחת לאייקון. מ-720px
   שתיים על שתיים, עם קו בין השורות. מ-1024px התשובה מתחת לשאלה, באותו קו */
.sec { --m: 50px; display: grid; gap: var(--head-gap); }
.sec-intro { max-width: var(--narrow); margin-inline: auto; text-align: center; }
/* --m: הקוטר של העיגול. המסלולים ב-1.44 וב-1.92 ממנו, והמשטח של הסמל ב-2.3 */
.sec-art { position: relative; display: grid; place-items: center; width: calc(var(--m) * 2.3); aspect-ratio: 1; margin: 0 auto 18px; }
.sec-art::before { content: ''; position: absolute; inset: -12%; background-image: radial-gradient(rgba(57, 157, 157, .32) 1.1px, transparent 1.7px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(closest-side, transparent 34%, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 34%, #000 58%, transparent 100%); }
.sec-mark { position: relative; display: grid; place-items: center; width: var(--m); height: var(--m); border-radius: 50%; background: var(--mint); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line-mint); }
.sec-mark::before, .sec-mark::after { content: ''; position: absolute; border-radius: 50%; }
.sec-mark::before { inset: calc(var(--m) * -.22); border: 1px solid var(--teal-soft); }
.sec-mark::after { inset: calc(var(--m) * -.46); border: 1.5px dotted var(--teal-soft); }
.sec-mark .icon { width: calc(var(--m) * .5); height: calc(var(--m) * .5); stroke-width: 1.6; }
/* נקודה כתומה על המסלול החיצוני ונקודה טורקיז על הפנימי, באלכסון. על שכבה בלי פינות עגולות, כדי שלא ייחתכו */
.sec-art::after { content: ''; position: absolute; inset: calc(var(--m) * .19); background: radial-gradient(circle at 85.36% 14.64%, var(--coral) 0 4px, transparent 4.5px), radial-gradient(circle at 23.48% 76.52%, var(--teal) 0 3px, transparent 3.5px); }
.sec-lead { max-width: 40em; margin: 16px auto 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; text-wrap: balance; }
.sec-qa { padding-inline: var(--pad); border: 1px solid var(--line-mint); border-radius: var(--r-xl); background: var(--mint); }
.sec-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; column-gap: 14px; padding-block: 22px; }
.sec-item + .sec-item { border-top: 1px solid var(--line-mint); }
.sec-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line-mint); }
.sec-q { font-size: var(--fs-h3); line-height: 1.4; }
/* pretty ולא balance: שתיים מהתשובות ארוכות (שלושה משפטים), ו-balance היה מצר אותן לשורה נוספת */
.sec-a { grid-column: 1 / -1; align-self: start; margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.sec-a strong { color: var(--ink); font-weight: 500; }
.sec-cta { margin-top: calc(clamp(24px, 2.6vw, 36px) - var(--head-gap)); text-align: center; }
.sec-cta .text-link { min-height: 44px; }
/* שתיים על שתיים, וקו מעל השורה השנייה, מ-720px (מתחת לזה הטורים צרים מדי לתשובות, ולכן טור אחד כמו בטלפון).
   כל שאלה תופסת שתי שורות של הרשת (subgrid): השאלה והתשובה. כך השאלות שבאותה שורה חולקות גובה, וגם כששאלה אחת נשברת
   לשתי שורות (עד כ-940px) והשנייה לא, התשובות מתחילות באותו גובה. דפדפן בלי subgrid מקבל את הפריסה בלי היישור הזה */
@media (min-width: 720px) {
  .sec-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
  .sec-item { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding-block: 26px; }
  .sec-item + .sec-item { border-top: 0; }
  .sec-item:nth-child(n + 3) { border-top: 1px solid var(--line-mint); }
}
/* במחשב הפתיח ממורכז מעל המשטח (בלי הפיצול שהיה כאן עם שש שאלות: בטור הצר של הפיצול התשובות הארוכות נשברו לחמש
   שורות), והתשובה מתחת לשאלה, באותו קו */
@media (min-width: 1024px) {
  .sec { --m: 64px; }
  .sec-art { margin-bottom: 22px; }
  .sec-qa { padding-inline: clamp(32px, 3.4vw, 56px); column-gap: clamp(48px, 5vw, 80px); }
  .sec-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding-block: 30px; }
  .sec-ic { width: 44px; height: 44px; }
  .sec-a { grid-column: 2; margin-top: 4px; }
}

/* ===== שאלות נפוצות: details ו-summary, עובד בלי JS ובמקלדת ===== */
.faq { display: grid; gap: 12px; max-width: var(--narrow); margin-inline: auto; }
.qa { border: 1px solid var(--line-mint); border-radius: var(--r-lg); background: var(--white); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 14px; padding-inline: 22px 16px; border-radius: var(--r-lg); color: var(--ink); font-size: clamp(16.5px, .2vw + 15.8px, 18px); font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ''; }
.qa summary:focus-visible { outline-offset: 2px; }
.qa summary:hover .qa-q { color: var(--teal-ink); }
.qa-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
.qa-ic .icon { stroke-width: 2; }
.qa[open] .qa-ic { transform: rotate(180deg); }
.qa-a { padding: 0 22px 22px; color: var(--ink-2); }
.qa-a > * + * { margin-top: 10px; }
.dots { display: grid; gap: 8px; }
.dots li { position: relative; padding-inline-start: 20px; line-height: 1.6; }
.dots li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.faq-more { margin-top: clamp(24px, 2.6vw, 36px); color: var(--ink-2); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .qa-ic { transition: transform var(--dur-2) var(--ease); }
  .qa[open] .qa-a { animation: qa-in var(--dur-2) var(--ease); }
}
@keyframes qa-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ===== איך זה עובד: בסוף הדף, מיד לפני יצירת הקשר (21.10.2026). שלושה שלבים על משטח מנטה ברוחב התוכן, עם אייקון
   וקו מקווקו שמחבר ביניהם, ומתחתם "מה מקבלים בהקמה" =====
   בטלפון השלבים בטור ובלי משטח (כמו הנגן של הדוגמאות), כדי שלטקסט יהיה רוחב, והקו יורד מאייקון לאייקון.
   מ-560px על משטח, ומ-900px בשורה, והקו עובר בין האייקונים. הקישור לתיאום הדגמה שהיה מתחת לשלבים ירד: הטופס מיד אחריהם */
.flow { --ic: 64px; --fgap: clamp(28px, 4vw, 64px); --fgap-y: 32px; display: grid; gap: var(--fgap-y); padding: clamp(24px, 4vw, 56px); border: 1px solid var(--line-mint); border-radius: var(--r-xl); background: var(--mint); }
.flow-step { position: relative; display: grid; grid-template-columns: var(--ic) minmax(0, 1fr); align-content: start; gap: 20px; }
.flow-ic { position: relative; z-index: 1; display: grid; place-items: center; width: var(--ic); height: var(--ic); border-radius: 50%; background: var(--white); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line-mint); }
.flow-body { padding-top: 6px; }
.flow-body p { margin-top: 6px; color: var(--ink-2); }
.flow-step:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: calc(var(--ic) / 2 - 1px); top: calc(var(--ic) + 8px); bottom: calc(8px - var(--fgap-y)); border-inline-start: 2px dashed var(--teal-soft); }
@media (max-width: 559px) {
  .flow { --ic: 52px; --fgap-y: 28px; padding: 0; border: 0; border-radius: 0; background: none; }
  .flow-step { gap: 16px; }
  .flow-ic { background: var(--mint); }
  .flow-body { padding-top: 2px; }
}
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--fgap); }
  .flow-step { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; text-align: center; }
  .flow-body { max-width: 22em; padding-top: 0; }
  .flow-step:not(:last-child)::after { top: calc(var(--ic) / 2 - 1px); bottom: auto; inset-inline-start: calc(50% + var(--ic) / 2 + 14px); inset-inline-end: calc(-50% - var(--fgap) + var(--ic) / 2 + 14px); border-inline-start: 0; border-top: 2px dashed var(--teal-soft); }
}

/* "מה מקבלים בהקמה": משטח לבן עם קו דק, בין המשטח של השלבים למשטח של יצירת הקשר (שניהם במנטה). הרשימה מכרטיס ההקמה
   שירד מהדף עם המחירים (21.10.2026), בלי מחירים ובלי כמויות, עם סימן אישור בעיגול טורקיז בהיר. בטלפון הכותרת מעל
   רשימה בטור אחד, ומ-640px הרשימה בשני טורים. ליד הכותרת האייקון של שלב ההקמה */
.setup { display: grid; gap: 20px; margin-top: var(--gap); padding: var(--pad); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); }
.setup-head { display: flex; align-items: center; gap: 14px; }
.setup-title { font-size: clamp(20px, .5vw + 17.5px, 24px); line-height: 1.3; }
.setup-list { display: grid; gap: 12px; }
.setup-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.tick { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-ink); }
.tick svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) {
  .setup-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--gap); }
}
@media (min-width: 1024px) {
  .setup { gap: 24px; padding: 36px clamp(32px, 3vw, 48px) 40px; }
  .setup-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .setup-list { gap: 16px clamp(32px, 3.6vw, 56px); }
}

/* ===== יצירת קשר: משטח סוגר במנטה. מעל הכותרת החוגה בתוך שני מסלולים, ובצד של הטופס רשת נקודות עדינה,
   כמו בסמל שבפתיח. מ-21.10.2026 רק הטופס, בלי טלפון, מייל ווואטסאפ =====
   הרצועה לבנה, כמו "איך זה עובד" שלפניה, ולכן בלי הריווח העליון שלה: בין המשטח של "מה מקבלים בהקמה" למשטח של יצירת
   הקשר יש ריווח אחד של רצועה, ולא שניים */
/* קישור לטופס נוחת קצת מתחת לכותרת העליונה, ולא בתוך הריווח שאין כאן (ראו .band) */
.band--white + .band--white { padding-top: 0; scroll-margin-top: 16px; }
.cta-panel { position: relative; overflow: hidden; display: grid; gap: 32px; padding: clamp(24px, 4.4vw, 72px); border: 1px solid var(--line-mint); border-radius: var(--r-xl); background: var(--mint); }
.cta-panel::before { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: min(100%, 640px); background-image: radial-gradient(rgba(57, 157, 157, .32) 1.1px, transparent 1.7px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle at 0 100%, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 0 100%, #000 10%, transparent 70%); pointer-events: none; }
.cta-mark { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 26px 26px 34px; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-mint); }
.cta-mark::before, .cta-mark::after { content: ''; position: absolute; border-radius: 50%; }
.cta-mark::before { inset: -12px; border: 1px solid var(--teal-soft); }
.cta-mark::after { inset: -26px; border: 1.5px dotted var(--teal-soft); }
.cta-copy, .form-card { position: relative; }
.cta-lead { margin-top: 16px; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.6; text-wrap: balance; }
.form-card { padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--line-mint); border-radius: var(--r-lg); background: var(--white); }
.lead-form { display: grid; gap: 16px; }
.form-title { color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.45; }
.field { display: grid; gap: 6px; }
.field label { color: var(--ink); font-size: var(--fs-small); font-weight: 500; }
.input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line-field); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 16px; }
.input:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 1px; border-color: var(--teal-ink); }
.input[dir="ltr"] { text-align: right; }
.field.is-invalid .input { border-color: var(--error); }
.field-err { color: var(--error); font-size: var(--fs-small); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-alert { padding: 12px 14px; border-inline-start: 3px solid var(--coral); border-radius: var(--r-sm); background: var(--coral-tint); color: var(--ink); font-size: var(--fs-small); }
.form-alert a { color: var(--ink); font-weight: 700; }
/* התשובה אחרי השליחה (main.js): הצלחה בטורקיז, כישלון בכתום. ריקה, היא מחוץ לזרימה ולא תופסת מקום, אבל נשארת בדף
   (ולא display: none), כדי שקוראי מסך יקריאו אותה כשהיא מתמלאת */
.form-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-alert--ok { border-inline-start-color: var(--teal); background: var(--teal-tint); }
/* ההודעה לפי תיקון 13 (מסירה לא חובה, למה, מי מקבל, ספקים בחו"ל, עיון ותיקון), מתחת לכפתור, עם קו דק מעליה */
.form-note { padding-top: 14px; border-top: 1px solid var(--line-mint); color: var(--muted); font-size: 14px; line-height: 1.65; }
.form-note a { color: var(--teal-ink); font-weight: 500; }
/* בטלפון בלי המשטח, כדי שלטופס יהיה רוחב (השדות 280px ומעלה ב-360px). הטופס עצמו בכרטיס מנטה */
@media (max-width: 559px) {
  .cta-panel { overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; }
  .cta-panel::before { display: none; }
  .form-card { background: var(--mint); }
}
@media (min-width: 960px) {
  .cta-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
  .cta-panel::before { width: 50%; -webkit-mask-image: radial-gradient(circle at 0 0, #000 10%, transparent 75%); mask-image: radial-gradient(circle at 0 0, #000 10%, transparent 75%); }
}

/* ===== פוטר: מנטה. הלוגו, קישורים לאזורים ומידע משפטי (בדף, מ-21.10.2026, בלי עמודת יצירת קשר) ===== */
.site-footer { border-top: 1px solid var(--line-mint); background: var(--mint); }
.footer-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-block: clamp(40px, 4.4vw, 64px) 36px; }
.footer-brand { grid-column: 1 / -1; }
.footer-desc { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-small); }
.footer-h { margin-bottom: 12px; color: var(--ink); font-size: var(--fs-small); font-weight: 700; }
.footer-col ul { display: grid; gap: 8px; }
.footer-col a { color: var(--ink-2); font-size: var(--fs-small); text-decoration: none; }
.footer-col a:hover { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-col a[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* בטלפון ובטאבלט כל קישור בגובה 44px, כדי שיהיה נוח ללחוץ */
@media (max-width: 899px) {
  .footer-h { margin-bottom: 2px; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
}
.footer-legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-mint); }
.footer-legal p { color: var(--muted); font-size: 14px; }
.footer-legal p + p { margin-top: 4px; }
/* במחשב הלוגו ועוד עמודה לכל רשימה: בדף שתיים (באתר, מידע משפטי), ובעמודי המידע המשפטי, שעוד יש בהם עמודת
   יצירת קשר, שלוש */
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .footer-inner:has(> .footer-col:nth-child(4)) { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}

/* ===== עמודי המידע המשפטי (privacy.html, accessibility.html) =====
   פתיח קצר במנטה, כמו בדף, ואחריו טור טקסט אחד: כותרות עם קו דק מעליהן, ורשימות עם נקודה טורקיז */
.page-col { max-width: calc(760px + 2 * var(--gutter)); }
.page-hero { border-bottom: 1px solid var(--line-mint); background: var(--mint); padding-block: clamp(32px, 4.4vw, 72px) clamp(32px, 3.6vw, 56px); }
.page-hero .badge { margin-bottom: 16px; }
.page-title { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.015em; }
.page-meta { margin-top: 12px; color: var(--muted); font-size: var(--fs-small); }
/* מה שעוד מחכה לאישור: רקע כתום בהיר, טקסט כהה */
mark.pending { padding: 1px 4px; border-radius: 4px; background: var(--coral-tint); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.prose { padding-block: clamp(40px, 4vw, 72px) var(--band-y); }
.prose > * + * { margin-top: 12px; }
.prose h2 { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); font-size: var(--fs-h3); line-height: 1.35; }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-inline-start: 20px; line-height: 1.6; }
.prose ul li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.prose a { color: var(--teal-ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(35, 114, 114, .35); text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose .prose-intro { color: var(--ink); font-size: var(--fs-lead); line-height: 1.65; }
.prose-back { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose .text-link { font-weight: 700; text-decoration: none; }
.prose .text-link:hover { text-decoration: underline; }

/* ===== חשיפה בגלילה: עלייה קלה ושקיפות. רק עם JS ובלי בקשה להפחתת תנועה ===== */
.motion [data-reveal],
.motion [data-reveal-group] > * { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.motion [data-reveal="panel"] { transform: translateY(calc(var(--rise) * 1.6)); }
.motion .is-in,
.motion [data-reveal].is-in,
.motion [data-reveal-group] > .is-in { opacity: 1; transform: none; }
/* מה שיש בתוכו פוקוס מוצג מיד, בלי מעבר (גם מעבר שכבר התחיל נעצר), גם לפני החשיפה. main.js מסמן אותו גם ב-is-in,
   כדי שיישאר מוצג אחרי שהפוקוס עובר הלאה. כך המסגרת של הפוקוס תמיד נראית */
.motion [data-reveal]:focus-within,
.motion [data-reveal-group] > :focus-within { opacity: 1; transform: none; transition: none; }

/* ===== הלולאה של הסמל: 9 שניות, כמו GIF. רק עם JS (.motion) ובלי בקשה להפחתת תנועה, ונעצרת כשהסמל לא על
   המסך או כשנגן מתנגן (.is-paused, main.js) =====
   לכל שכבה @keyframes אחד באורך הלולאה (--art-loop), והאחוזים הם ציר הזמן המשותף (שנייה = 11.1%). התוויות, הנקודות
   והשורות באותו ציר, באיחור של --i. ב-0% וב-100% כל שכבה במצב המנוחה, ולכן אין קפיצה בין סיבוב לסיבוב.
   0-0.4 שקט. 0.4-1.1 התוויות נדלקות אחת אחרי השנייה, ומכל אחת נקודה עוברת אל החוגה ונבלעת בה (1.45, 1.8, 2.15).
   עם כל נקודה הטבעת מסתובבת שנתה (40 שנתות, 9 מעלות, כך ש-27 מעלות נראות בדיוק כמו 0) והסמן נלחץ פנימה. 2.2-3.8
   המרכז זוהר וטבעת דקה מתרחבת. 3-3.8 הכרטיס יוצא מתחת לחוגה, 3.55-5.15 השורות נכתבות, "טיוטה לבדיקה"
   וסימן האישור. 7.2-7.75 הכרטיס נעלם. 7.75-9 שקט.
   הרשת והנקודות החיצוניות מסתובבות ברקע (180 ו-270 שניות, כפולות של הלולאה), וההילות נושמות פעמיים בכל לולאה.
   רק transform ו-opacity: הכתיבה של השורות והסימן בלי clip-path, כדי שהלולאה לא תחשב מחדש את הדף בכל פריים.
   התוויות לא קיימות מתחת ל-560px, ולכן main.js מיישר את השעון שלהן כשהמסך עובר את הרוחב הזה (סיבוב של הטלפון).
   .is-still (הכפתור בפינה): הלולאה עוצרת והסמל חוזר לתמונה השלמה. ההפעלה מתחילה את כל השכבות יחד מההתחלה. */
@media (prefers-reduced-motion: no-preference) {
  .motion .art { --art-loop: 9s; --art-step: .35s; }
  .motion .art-mesh, .motion .art-outer { transform-box: view-box; transform-origin: 240px 240px; }
  .motion .art-mesh { animation: art-spin 180s linear infinite; }
  .motion .art-outer { animation: art-spin 270s linear infinite reverse; }
  .motion .halo { transform-box: fill-box; transform-origin: center; animation: art-breathe calc(var(--art-loop) / 2) ease-in-out var(--d, 0s) infinite; }
  .motion .art-chip { animation: art-chip var(--art-loop) var(--ease) calc(var(--i) * var(--art-step)) infinite both; }
  .motion .art-chip::after { animation: art-chip-ring var(--art-loop) ease-in-out calc(var(--i) * var(--art-step)) infinite both; }
  .motion .pulse { animation: art-dot var(--art-loop) var(--ease-in) calc(var(--i) * var(--art-step)) infinite both; }
  .motion .art-ticks { transform-box: fill-box; transform-origin: center; animation: art-turn var(--art-loop) var(--ease-snap) infinite both; }
  .motion .art-pointer { animation: art-tap var(--art-loop) var(--ease) infinite both; }
  .motion .art-core { animation: art-core var(--art-loop) ease-in-out infinite both; }
  .motion .art-ripple { transform-box: fill-box; transform-origin: center; animation: art-ripple var(--art-loop) var(--ease) infinite both; }
  .motion .art-card { transform-box: fill-box; transform-origin: center; animation: art-card var(--art-loop) var(--ease-in-out) infinite both; }
  .motion .art-ln { transform-box: fill-box; transform-origin: right center; animation: art-write var(--art-loop) var(--ease-in-out) calc(var(--i) * 2 * var(--stagger)) infinite both; }
  .motion .art-tag { animation: art-tag var(--art-loop) var(--ease) infinite both; }
  .motion .art-ok { transform-box: fill-box; transform-origin: center; animation: art-ok var(--art-loop) var(--ease-snap) infinite both; }
  .motion .art-ok-cover { animation: art-ok-cover var(--art-loop) var(--ease-in-out) infinite both; }
  .motion .art-ctl { display: grid; }
  .motion .is-paused *, .motion .is-paused *::after { animation-play-state: paused; }
  .motion .is-still .art-chip, .motion .is-still .art-chip::after, .motion .is-still .pulse, .motion .is-still .art-ticks,
  .motion .is-still .art-pointer, .motion .is-still .art-core, .motion .is-still .art-ripple, .motion .is-still .art-card,
  .motion .is-still .art-ln, .motion .is-still .art-tag, .motion .is-still .art-ok, .motion .is-still .art-ok-cover { animation: none; }
  .motion .is-still * { animation-play-state: paused; }
}
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-breathe {
  0%, 100% { opacity: .08; transform: scale(.7); }
  50% { opacity: .26; transform: scale(1.25); }
}
/* התווית נדלקת: דחיפה קטנה בגודל, ומסגרת טורקיז עד שהנקודה שלה מגיעה לחוגה */
@keyframes art-chip {
  0%, 4.4% { transform: translate(var(--ax, -50%), -50%) scale(1); }
  7.8% { transform: translate(var(--ax, -50%), -50%) scale(1.06); }
  12.2%, 100% { transform: translate(var(--ax, -50%), -50%) scale(1); }
}
@keyframes art-chip-ring {
  0%, 4.4% { opacity: 0; }
  8.3%, 17.8% { opacity: 1; }
  24.4%, 100% { opacity: 0; }
}
/* הנקודה: מופיעה ליד התווית, מאיצה אל החוגה ונבלעת, עם הזנב, מאחורי העיגול הלבן שלה */
@keyframes art-dot {
  0%, 5.6% { opacity: 0; transform: translateX(0); }
  8.3% { opacity: 1; transform: translateX(-6px); }
  17.2% { opacity: 1; transform: translateX(calc(-1 * var(--len) - 36px)); }
  17.3%, 100% { opacity: 0; transform: translateX(calc(-1 * var(--len) - 36px)); }
}
/* קליק של כספת: שנתה אחת (9 מעלות) ברגע שנקודה נבלעת בחוגה, בעקומה של --ease-snap (מתחילה לאט, נתפסת וקופצת קצת
   מעבר), כדי שהעין תספיק לראות את הסיבוב. באותם רגעים הסמן נלחץ פנימה וחוזר */
@keyframes art-turn {
  0%, 16.1% { transform: rotate(0deg); }
  19.4%, 20% { transform: rotate(9deg); }
  23.3%, 23.9% { transform: rotate(18deg); }
  27.2%, 100% { transform: rotate(27deg); }
}
@keyframes art-tap {
  0%, 16.1% { transform: none; }
  17.5% { transform: translateY(1.3px); }
  19.4%, 20% { transform: none; }
  21.4% { transform: translateY(1.3px); }
  23.3%, 23.9% { transform: none; }
  25.3% { transform: translateY(1.3px); }
  27.2%, 100% { transform: none; }
}
/* אחרי הקליק השלישי: המרכז זוהר, וטבעת דקה מתרחבת מהחוגה */
@keyframes art-core {
  0%, 24.4% { opacity: 0; }
  28.3% { opacity: .55; }
  42%, 100% { opacity: 0; }
}
@keyframes art-ripple {
  0%, 27.2% { opacity: 0; transform: scale(1); }
  27.3% { opacity: .75; transform: scale(1); }
  39%, 100% { opacity: 0; transform: scale(1.32); }
}
/* הכרטיס יוצא מתחת לחוגה (שם הוא מוסתר, קטן, מאחורי העיגול הלבן), נשאר עד 7.2 שניות ונעלם במקום */
@keyframes art-card {
  0%, 33.3% { opacity: 0; transform: translate(var(--card-dx), var(--card-dy)) scale(.5); }
  33.4% { opacity: 1; transform: translate(var(--card-dx), var(--card-dy)) scale(.5); }
  42.2% { transform: none; }
  80% { opacity: 1; transform: none; }
  86.1% { opacity: 0; transform: scale(.97); }
  100% { opacity: 0; transform: translate(var(--card-dx), var(--card-dy)) scale(.5); }
}
/* השורות נכתבות מימין לשמאל (גדלות מהקצה הימני), אחת אחרי השנייה, ואחריהן "טיוטה לבדיקה" וסימן האישור */
@keyframes art-write {
  0%, 39.4% { transform: scaleX(0); }
  45%, 86.6% { transform: none; }
  87.2%, 100% { transform: scaleX(0); }
}
@keyframes art-tag {
  0%, 48.3% { opacity: 0; transform: translateY(4px); }
  52.2%, 86.6% { opacity: 1; transform: none; }
  87.2%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes art-ok {
  0%, 51.7% { opacity: 0; transform: scale(.4); }
  55.6%, 86.6% { opacity: 1; transform: none; }
  87.2%, 100% { opacity: 0; transform: scale(.4); }
}
/* הסימן נכתב משמאל לימין: הריבוע שמעליו מתכווץ אל הקצה הימני. מ-87.2% הסימן כבר שקוף, והריבוע חוזר למקומו */
@keyframes art-ok-cover {
  0%, 53.3% { transform: none; }
  57.2%, 86.6% { transform: scaleX(0); }
  87.2%, 100% { transform: none; }
}

/* ===== פחות תנועה: שום דבר לא זז, גם לא מעבר קצר ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}