/* BizPrime — התאמות לאתר החי, מעל v2.css + v3.css (העיצוב מ-design/v3).
   בסבב 2 (23/10) השתנו גם v2.css ו-v3.css עצמם: הגופנים (Heebo / PT Sans), וכל המידות עברו מ-px ל-rem
   (‎16px = 1rem), כדי שקנה המידה של המחשב ייקבע במקום אחד: גודל הגופן של html (סעיף 0).
   0. קנה מידה: טלפון 100%, מחשב 75%.
   1. העמוד נגלל ב-body ולא בתוך #v2-scroller של הקנבס.
   2. כפתור הנגישות: הכפתור של a11y-widget.js, במקום ובמראה של הכפתור הצף שבעיצוב.
   3. בלי JavaScript. */

/* ===== 0. קנה מידה ===== */
/* כל המידות באתר ב-rem. בטלפון ‎1rem = 16px, בדיוק כמו בעיצוב. במחשב (מ-900px) ‎1rem = 12px: כל האתר
   (אותיות, מרווחים, רוחבי מכלים, גבהים, כפתורים) קטן ל-75%, כמו שיגאל ראה בזום 75% בדפדפן.
   באחוזים ולא בפיקסלים, כדי שגודל הגופן שהמשתמש בחר בדפדפן ימשיך להשפיע.
   שוליים של 1–2px (מסגרות, קווים), צללים וטשטוש נשארו בפיקסלים */
html{font-size:100%}
@media (min-width:900px){html{font-size:75%}}

/* ===== 1. גלילה של העמוד עצמו ===== */
/* direction:ltr על html/body (מ-v2.css) נשאר: הסרגל בצד ימין גם בעברית. התוכן עצמו ב-.v2[dir] */
html,body{overflow-x:clip}
/* סבב 2, 7.1: קפיצה מיידית בלחיצה על קישור בתפריט (בלי scroll-behavior:smooth) */
html{scroll-padding-top:var(--hdr)}
body{margin:0}
a{color:inherit}a:hover{color:inherit}
/* ציר הזמן של הגלילה: במקום --page של #v2-scroller — הגלילה של המסמך */
.v2-hdr,.v2-hero-in{animation-timeline:scroll(root block)}

/* חלוניות השיחה: role=tabpanel עבר ל-div שעוטף את הרשימה.
   סבב 2, 3.3: שלוש החלוניות באותו תא של רשת, כך שגובה החלון = גובה השיחה הארוכה מבין השלוש, בכל רוחב
   ובכל שפה, והעמוד לא קופץ במעבר בין התחומים. החלוניות הלא נבחרות מוסתרות ב-visibility (גם מקוראי מסך
   וממקלדת), לא ב-display:none, כדי שימשיכו לתפוס מקום */
.v3-panels{display:grid}
.v3-panels>.v3-panel{grid-area:1 / 1;min-width:0}
.v3-panel[hidden]{display:block;visibility:hidden}

/* ניגודיות: המונה "01 / 08" בכרטיסי "מה המערכת עושה" (‎#A7A9B0) יצא 3.9–4.4 מול רקע הכרטיס, פחות מ-4.5:1.
   הגוון הבהיר של העיצוב עצמו (--t-mid) עובר */
.v2-card-n{color:var(--t-mid)}

/* סבב 2, 6.1: מספר הטלפון טקסט בלבד, לא קישור (בלי tel:). בכרטיס "שיחת היכרות" הוא נשאר לבן ובאותו גובה שורה
   כמו המייל שמתחתיו, רק בלי קו תחתון */
.v2-card-c li>span[dir="ltr"]{color:#FFFFFF;display:inline-flex;align-items:center;min-height:2.75rem}
/* 6.2 המייל בעמודים המשפטיים: הקישור בתוך שורת טקסט היה בגובה 22–25px בטלפון. שטח לחיצה גבוה יותר (44px),
   בלי לשנות את גובה השורה: ריפוד למעלה ולמטה ושוליים שליליים באותה מידה */
.v3-lg-doc a[href^="mailto:"]{display:inline-block;padding-block:.625rem;margin-block:-.625rem}

/* ניגודיות אחרי ההקטנה: "בקרוב –" / «Скоро –» היה 19px מודגש במחשב ("טקסט גדול", מספיק 3:1). ב-75% הוא 14.25px
   וצריך 4.5:1; ב-‎--coral-soft נמדד 4.08:1 ברוסית. גוון בהיר מעט יותר של אותו אלמוגי */
.v2-soon h2 span{color:#F5A08A}

/* ===== 2. כפתור הנגישות הצף (נוצר על ידי a11y-widget.js) ===== */
/* כמו .v2-fab.v2-fab-a11y בעיצוב. בעברית בצד ימין, ברוסית בצד שמאל (data-position), כפתור WhatsApp בצד השני */
body #a11y-trigger.a11y-ui{bottom:1rem;width:3.25rem;height:3.25rem;padding:0;border-radius:50%;cursor:pointer;color:#FFFFFF;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 30px -10px rgba(0,0,0,.6);transition:transform .2s ease}
body #a11y-trigger.a11y-ui.pos-left{left:1rem;right:auto}
body #a11y-trigger.a11y-ui.pos-right{right:1rem;left:auto}
body #a11y-trigger.a11y-ui:hover{background:rgba(255,255,255,.07);transform:scale(1.06)}
body #a11y-trigger.a11y-ui:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;box-shadow:0 0 0 5px rgba(21,22,26,.9)}
/* הסמל מהעיצוב במקום הסמל של הווידג'ט */
body #a11y-trigger.a11y-ui svg{display:none}
body #a11y-trigger.a11y-ui::before{content:"";width:1.75rem;height:1.75rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='1.8' fill='%23000' stroke='none'/%3E%3Cpath d='M5 8.5l7 1.5 7-1.5'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 14.5l-3 6M12 14.5l3 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='1.8' fill='%23000' stroke='none'/%3E%3Cpath d='M5 8.5l7 1.5 7-1.5'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 14.5l-3 6M12 14.5l3 6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:900px){
  body #a11y-trigger.a11y-ui{bottom:1.75rem}
  body #a11y-trigger.a11y-ui.pos-left{left:1.75rem}
  body #a11y-trigger.a11y-ui.pos-right{right:1.75rem}
}
@media (prefers-reduced-motion: reduce){body #a11y-trigger.a11y-ui{transition:none}}

/* ===== 2א. בלי תנועה ===== */
/* v2.css מבטל את כל האנימציות ב-prefers-reduced-motion. בלי תיקון: הכותרות בעברית נשארות כמעט שקופות
   (מצב ההתחלה של המילוי), הכרטיסים בשורות שזזות לצד ("מוכר לכם?", "ליווי") לא נראים אחרי השני,
   והכותרת העליונה נשארת שקופה מעל התוכן. כאן הכול מוצג במצב הסופי, והשורות הופכות לרשת.
   אותו דבר כש"עצירת אנימציות" בתפריט הנגישות פועלת (html.a11y-motion). */
html.a11y-motion .v2 *,html.a11y-motion .v2 *::before,html.a11y-motion .v2 *::after{animation:none !important;transition:none !important}
@media (prefers-reduced-motion: reduce){
  .v2-h2{background-position:var(--fill-to) 0}
  .v2-hdr{background:rgba(21,22,26,.62);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom-color:var(--line-d)}
  .v2-hs{height:auto}
  .v2-hs-sticky{position:relative;top:auto;height:auto;padding-block:4.5rem;overflow:visible}
  .v2-hs-head{position:relative;inset:auto;transform:none;width:auto;max-width:56.25rem;margin-inline:auto;text-align:center}
  .v2-hs-track,.v2-pop .v2-hs-track{width:auto;transform:none;display:grid;grid-template-columns:minmax(0,1fr);padding-inline:1.25rem}
  .v2-hs-card,.v2-pop .v2-hs-card{width:auto;max-width:none}
  .v2-pop .v2-hs-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .v2-pop .v2-hs-card{min-height:12.5rem;padding:1.5rem 1.125rem}
}
html.a11y-motion .v2-h2{background-position:var(--fill-to) 0}
html.a11y-motion .v2-hdr{background:rgba(21,22,26,.62);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom-color:var(--line-d)}
html.a11y-motion .v2-hs{height:auto}
html.a11y-motion .v2-hs-sticky{position:relative;top:auto;height:auto;padding-block:4.5rem;overflow:visible}
html.a11y-motion .v2-hs-head{position:relative;inset:auto;transform:none;width:auto;max-width:56.25rem;margin-inline:auto;text-align:center}
html.a11y-motion .v2-hs-track,html.a11y-motion .v2-pop .v2-hs-track{width:auto;transform:none;display:grid;grid-template-columns:minmax(0,1fr);padding-inline:1.25rem}
html.a11y-motion .v2-hs-card,html.a11y-motion .v2-pop .v2-hs-card{width:auto;max-width:none}
html.a11y-motion .v2-pop .v2-hs-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
html.a11y-motion .v2-pop .v2-hs-card{min-height:12.5rem;padding:1.5rem 1.125rem}
@media (max-width:899px){
  @media (prefers-reduced-motion: reduce){.v2-pop .v2-hs-card{font-size:1.25rem;overflow-wrap:anywhere}}
  html.a11y-motion .v2-pop .v2-hs-card{font-size:1.25rem;overflow-wrap:anywhere}
}
@media (min-width:900px){
  @media (prefers-reduced-motion: reduce){
    .v2-hs-head{padding-inline:3rem}
    .v2-hs-track,.v2-pop .v2-hs-track{max-width:77.5rem;margin-inline:auto;padding-inline:3rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
    .v2-pop .v2-hs-track{grid-template-columns:repeat(4,minmax(0,1fr))}
    .v2-hs-card,.v2-pop .v2-hs-card{min-height:0;padding:2.375rem 2.125rem}
  }
  html.a11y-motion .v2-hs-head{padding-inline:3rem}
  html.a11y-motion .v2-hs-track,html.a11y-motion .v2-pop .v2-hs-track{max-width:77.5rem;margin-inline:auto;padding-inline:3rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  html.a11y-motion .v2-pop .v2-hs-track{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.a11y-motion .v2-hs-card,html.a11y-motion .v2-pop .v2-hs-card{min-height:0;padding:2.375rem 2.125rem}
}

/* ===== 2ב. צבעי תפריט הנגישות ===== */
/* a11y-widget.js מגיע עם הבורדו של המערכת שממנה הועתק. כאן הוא מקבל את הצבעים של BizPrime:
   כותרת בגוון --ink, הדגשה ב---coral-deep (‎#C2412A על לבן = 7.4:1). הלוח עצמו נשאר בהיר, לקריאות */
html body .a11y-ui{font-family:var(--f-t),system-ui,sans-serif;color:#15161A}
html body #a11y-scrim{background:rgba(10,11,14,.5)}
html body #a11y-panel{background:#FFFFFF;border-color:#E5E0DC;box-shadow:0 0 40px rgba(10,11,14,.35)}
html body .a11y-head{background:#15161A}
html body .a11y-group>h3{color:#5C5E66}
html body .a11y-size,html body .a11y-tile{border-color:#E5E0DC}
html body .a11y-step{background:#F6F3F1;border-color:#DDD5D0;color:#15161A}
html body .a11y-size output{color:#C2412A}
html body .a11y-tile{color:#15161A}
html body .a11y-tile:hover{border-color:#F08A70;background:#FFF6F2}
html body .a11y-tile[aria-pressed="true"]{background:#C2412A;border-color:#C2412A;color:#FFFFFF}
html body .a11y-reset{background:#FBF1EC;border-color:#EFD3C7;color:#C2412A}
html body .a11y-reset:hover{background:#F6E3DA}
html body .a11y-foot{background:#FAF8F6;border-color:#E5E0DC}
html body .a11y-foot a{color:#C2412A}
html body .a11y-foot .hint{color:#5C5E66}
html body .a11y-guide-bar{border-color:rgba(194,65,42,.95);background:rgba(232,103,74,.10)}

/* ===== 3. בלי JavaScript ===== */
/* לשוניות סוג העסק לא עובדות בלי סקריפט: מסתירים אותן, והשיחה הראשונה נשארת */
.no-js .v3-ctabs{display:none}

/* ===== 4. טלפון לרוחב (סבב 2, 7.2) ===== */
/* מסך נמוך לרוחב (iPhone 11 = 896×414, טלפון קטן = 667×375): בלי הכלל הזה הכול ענקי, והכרטיסים הדביקים של
   "מה המערכת עושה" גבוהים מהמסך, כך שרוב הכרטיס לא נראה. כאן: קנה מידה 75% (כמו במחשב), כותרת עליונה נמוכה,
   הסעיפים הדביקים מותאמים לגובה, ורשתות במקום טורים כשיש רוחב. חל גם על חלון מחשב נמוך מאוד */
@media (orientation:landscape) and (max-height:500px){
  html{font-size:75%}
  :root,.v2[lang="ru"]{--hdr:4rem}
  /* כותרת עליונה: הלוגו ממורכז לגובה, והשורה שמתחת ללוגו בשורה אחת גם ברוסית */
  .v2-hdr-row,.v2[lang="ru"] .v2-hdr-row{align-items:center}
  .v2[lang="ru"] .v2-logo,.v2-logo{align-self:center;margin-top:0}
  .v2-logo-tag,.v2[lang="ru"] .v2-logo-tag{max-width:none;white-space:nowrap;line-height:1.15}
  .v2-menu-panel{max-height:calc(100vh - var(--hdr) - 1rem);overflow-y:auto}
  /* פתיחה: בלי התגיות הצפות (במסך נמוך הן עולות על הכפתורים), כותרת בשתי שורות, כפתורים בשורה */
  .v2-hero{min-height:100vh;padding:calc(var(--hdr) + 1.5rem) 0 2.5rem}
  .v2-hero-in{gap:1rem}
  .v2-chip{display:none !important}
  .v2-h1,.v2-hero-in .v2-h1{max-width:34em}
  .v2-ctas{flex-direction:row;justify-content:center;width:auto;max-width:none}
  .v2-cue{display:none}
  .v2-sec{padding-block:4rem}
  .v2-stage{min-height:0}
  /* "מה המערכת עושה": הכותרת והלשוניות לא נדבקות; כל כרטיס נדבק מתחת לכותרת העליונה ובגובה המסך */
  .v2-feat-head{position:relative;top:auto}
  .v2-card{top:calc(var(--hdr) + .75rem);min-height:calc(100vh - var(--hdr) - 1.5rem);margin-bottom:1.5rem}
  .v2-card-txt{align-self:center}
  /* "איך זה עובד": הסרטון לא גבוה מהמסך; התמונות-לשוניות והשיחה ברוחב סביר באמצע */
  .v3-video{max-width:calc((100vh - var(--hdr) - 2rem) * 16 / 9);width:100%;margin-inline:auto}
  .v3-ctabs{max-width:30rem;margin-inline:auto}
  .v2-chat-title{margin-bottom:.75rem}
  /* צילומי המסך של Brow Lab: בגובה שנכנס במסך */
  .v3-phw{flex-basis:10.5rem}
}
/* טלפון לרוחב (פריסת טלפון, עד 899px): רשתות במקום טור אחד */
@media (orientation:landscape) and (max-height:500px) and (max-width:899px){
  .v2-gains,.v2-flow-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2-fit{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2-fit li:last-child:nth-child(odd){grid-column:auto}
  .v2-pop .v2-hs-card{width:min(78vw,22rem)}
  .v2-flow-line{display:none}
  .v3-cl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem}
  .v2-about-grid,.v2-contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem}
  .v2-foot-row{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 2rem}
  .v2-foot nav{flex-direction:row;align-items:center}
  .v2-foot nav span[aria-hidden]{display:inline}
}

/* סבב 3, סעיף 2: השיחה לדוגמה בתוך טלפון (אייפון, שיחה בעיצוב כהה ברוח WhatsApp, בלי הלוגו או סימן מסחרי שלהם).
   הכול ב-em, כך שגודל הטלפון כולו נקבע מ-font-size אחד (קטן יותר בטלפון לרוחב). הגוף ירוק, בגוון של המסגרת הקודמת.
   השיחות עצמן (הטקסט, הלשוניות, גובה קבוע, הנגישות) כמו בסבב 2 */
#how .v3-phone{--ph-w:22.5em;font-size:1rem;width:min(var(--ph-w),85vw);max-width:none;margin-inline:auto;padding:.3125em;border-radius:3.25em;position:relative;
  display:flex;flex-direction:column;aspect-ratio:71.6 / 147.6;
  background:linear-gradient(150deg,#3F8C7F 0%,#1D5C53 18%,#123F39 50%,#17504A 82%,#3A8275 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 1px rgba(255,255,255,.35),0 2.5em 4em -1.75em rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.35)}
#how .v3-phone .v2-chat{position:relative;flex:1 0 auto;display:flex;flex-direction:column;border:.5625em solid #050607;border-radius:2.9375em;overflow:hidden;
  background-color:#0B141A;background-image:radial-gradient(rgba(255,255,255,.04) .06em,transparent .09em);background-size:1.125em 1.125em}
/* שורת הסטטוס ו-Dynamic Island */
.v3-ph-bar{position:relative;display:flex;align-items:center;justify-content:space-between;height:2.875em;padding:0 1.5em 0 1.75em;background:#111B21;color:#F2F4F5;flex:none}
.v3-ph-time{font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:.9375em;letter-spacing:-.01em;padding-top:.15em}
.v3-ph-island{position:absolute;top:.6875em;left:50%;width:6.25em;height:1.75em;margin-left:-3.125em;border-radius:1em;background:#000}
.v3-ph-ic{display:flex;align-items:center;gap:.3125em;padding-top:.15em}
.v3-ph-ic svg{display:block;height:.6875em;width:auto}
.v3-ph-ic .v3-sb-bat{height:.8125em}
/* כותרת השיחה */
#how .v3-phone .v2-chat-head{background:#111B21;padding:.375em .75em .625em .5em;gap:.5em;border-bottom:1px solid rgba(255,255,255,.06);flex:none}
.v3-ph-back{display:flex;color:#E9EDEF;flex:none}
.v3-ph-back svg{width:.625em;height:1.0625em}
[dir="rtl"] .v3-ph-back svg{transform:scaleX(-1)}
#how .v3-phone .v2-chat-av{width:2.375em;height:2.375em;background:#1F2A44;overflow:hidden}
#how .v3-phone .v2-chat-av img{display:block;height:1.375em;width:auto}
.v3-ph-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#how .v3-phone .v2-chat-name{font-size:1em}
.v3-ph-on{font-size:.75em;color:#AEBAC1}
#how .v3-phone .v2-chat-label{font-size:.75em;padding:.2em .7em}
/* אזור השיחה: רקע כהה עם נקודות עדינות מאוד (CSS, לא הטפט המקורי), על כל המסך של הטלפון.
   יגאל (סבב 3): ההודעות מתחילות מלמעלה, מתחת לתווית "היום", כמו בסרטון; מה שנשאר ריק נשאר למטה */
#how .v3-phone .v3-panels{flex:1}
.v3-ph-day{display:flex;justify-content:center;padding:.75em 0 0;flex:none}
.v3-ph-day span{font-size:.75em;line-height:1.4;padding:.3em .75em;border-radius:.6em;background:#1D282F;color:#AEBAC1;box-shadow:0 1px .5px rgba(0,0,0,.25)}
#how .v3-phone .v2-msgs{background:none;padding:.625em .875em .75em;gap:.375em}
#how .v3-phone .v2-m{position:relative;max-width:82%;font-size:1em;line-height:1.4;padding:.375em .5625em .3125em;border-radius:.5em;box-shadow:0 1px .5px rgba(0,0,0,.25)}
#how .v3-phone .v2-m-in{border-start-end-radius:0}
#how .v3-phone .v2-m-out{border-start-start-radius:0}
/* הזנב של הבועה, בצד של מי ששולח */
#how .v3-phone .v2-m::before{content:"";position:absolute;top:0;width:0;height:0;border-top:.75em solid}
#how .v3-phone .v2-m-in::before{inset-inline-end:-.5em;border-top-color:#005C4B;border-inline-end:.5em solid transparent}
#how .v3-phone .v2-m-out::before{inset-inline-start:-.5em;border-top-color:#202C33;border-inline-start:.5em solid transparent}
/* שעה ווי כפול: צפים בסוף השורה האחרונה, כמו באפליקציה */
.v3-meta{float:right;display:inline-flex;align-items:center;gap:.25em;margin:.45em 0 -.2em .75em;font-size:.6875em;line-height:1.4;color:rgba(233,237,239,.72);white-space:nowrap}
[dir="rtl"] .v3-meta{float:left;margin:.45em .75em -.2em 0}
.v2-m-in .v3-meta{color:rgba(233,237,239,.8)}
.v3-tick{width:1.4em;height:.9em;color:#53BDEB}
/* תצוגת הקישור: כרטיס כהה בתוך הבועה, כמו תצוגה מקדימה של קישור */
#how .v3-phone .v2-m-link{margin:.5em -.25em .125em;padding:.5em;gap:.625em;border-radius:.375em;background:rgba(0,0,0,.22);border-inline-start:.1875em solid #53BDEB;color:#53BDEB}
#how .v3-phone .v2-m-link svg{width:1.125em;height:1.125em;padding:.4375em;box-sizing:content-box;border-radius:.375em;background:rgba(83,189,235,.12)}
#how .v3-phone .v2-m-link i{height:.4375em;max-width:70%}
/* שורת הכתיבה: לא פעילה, לא ניתנת למיקוד, מוסתרת מקורא מסך */
.v3-ph-input{display:flex;align-items:center;gap:.4375em;padding:.4375em .5625em .375em;background:#111B21;flex:none;pointer-events:none;user-select:none}
.v3-ph-field{flex:1;display:flex;align-items:center;gap:.5em;min-height:2.375em;padding:0 .75em;border-radius:1.25em;background:#1F2C33;color:#8696A0}
.v3-ph-ph{flex:1;font-size:.9375em}
.v3-ph-field svg{display:block;width:1.375em;height:1.375em}
.v3-ph-mic{display:flex;align-items:center;justify-content:center;width:2.375em;height:2.375em;border-radius:50%;background:#00A884;color:#0B141A;flex:none}
.v3-ph-mic svg{width:1.25em;height:1.25em}
.v3-ph-home{display:block;width:8.5em;height:.3125em;margin:.375em auto .5em;border-radius:1em;background:#E9EDEF;opacity:.85;flex:none}
@media (min-width:900px){
  #how .v3-phone{width:min(var(--ph-w),100%)}
}
/* טלפון לרוחב (896×414, 667×375): גם הטלפון בשיחה מסובב לרוחב, כמו אייפון לרוחב (בלי שורת סטטוס, ה-Dynamic Island
   בצד), כדי שהוא לא יהיה גבוה מהמסך. כל הטלפון קטן יחד (font-size אחד) עד שהוא נכנס לגובה המסך פחות הכותרת העליונה */
@media (orientation:landscape) and (max-height:500px) and (max-width:899px){
  #how .v3-phone{--ph-lw:60em;font-size:min(1rem,calc((100vh - var(--hdr) - 1.5rem) / 31.6),calc((100vw - 2.5rem) / 60));width:var(--ph-lw);aspect-ratio:147.6 / 71.6;border-radius:2.75em}
  #how .v3-phone .v2-chat{border-radius:2.4375em}
  .v3-ph-bar{position:absolute;top:0;bottom:0;left:0;z-index:1;width:2.5em;height:auto;padding:0;background:none}
  .v3-ph-time,.v3-ph-ic{display:none}
  .v3-ph-island{top:50%;left:.625em;width:1.75em;height:6.25em;margin:-3.125em 0 0}
  #how .v3-phone .v2-chat-head{padding-left:3em;padding-top:.5em;padding-bottom:.5em}
  .v3-ph-day{padding-top:.375em;padding-left:2.5em}
  #how .v3-phone .v2-msgs{padding-left:3em;padding-right:1.25em;padding-top:.375em;padding-bottom:.5em}
  #how .v3-phone .v2-m{max-width:72%}
  .v3-ph-input{padding-left:3em;padding-right:1.25em}
  .v3-ph-home{margin:.25em auto .375em}
}

/* סבב 5ב, סעיף 2 (24/10, יגאל אישר): סדר הגדלים בכותרות, **בעברית בלבד**. הכותרת הראשית (h1) גדולה מכותרות החלקים:
   --h1 = גודל ה-h1 בפתיחה (כמו ב-v3.css), ו-h2 לכל היותר --h1 × 0.9. כותרות קטנות מהתקרה לא משתנות.
   ברוסית יגאל ביקש להשאיר את כותרות החלקים כמו שהיו (לא להקטין). מה שנשאר ברוסית מהסעיף: במחשב ה-h1 עלה מ-34.5px
   ל-38px (עדיין 3 שורות), כפי שאושר בדף ההדגמה */
:root{--h1:2.375rem}
.v2[lang="he"]{--h2max:calc(var(--h1) * .9)}
@media (min-width:900px){
  :root{--h1:clamp(2.75rem,3.8vw,3.1rem)}
  .v2[lang="ru"] .v2-hero-in .v2-h1{font-size:3.1667rem}
}
@media (min-width:1200px){ :root{--h1:3.625rem} }
.v2[lang="he"] .v2-h2{font-size:min(2.125rem,var(--h2max))}
.v2[lang="he"] .v2-contact .v2-h2{font-size:min(2.25rem,var(--h2max))}
.v2[lang="he"] .v2-stage-h{font-size:min(2rem,var(--h2max))}
.v2[lang="he"] .v2-feat-head .v2-h2{font-size:min(1.75rem,var(--h2max))}
@media (min-width:900px){
  .v2[lang="he"] .v2-h2,.v2[lang="he"] .v2-contact .v2-h2,.v2[lang="he"] .v2-stage-h,
  .v2[lang="he"] .v2-hs-head .v2-h2,.v2[lang="he"] .v2-feat-head .v2-h2{font-size:var(--h2max)}
}

/* סבב 5ב, "איך זה עובד" במחשב במסך נמוך (24/10, יגאל אישר בדף הדגמה). אצל יגאל (מסך 1920×1080, Windows ב-150%) החלון
   הוא בערך 1273×551, והטלפון נחתך. שלושה דברים, מ-900px:
   1. הכותרת "שיחה לדוגמה" מעל הטלפון בלבד, באמצע שלו (קודם באמצע בין התמונות לטלפון). בלי JS הטלפון לבד, אז עמודה 1.
   2. הטלפון בלי היחס הקבוע של אייפון: הגובה לפי השיחה הארוכה מבין השלוש (הלוחות באותו תא, אז הוא לא קופץ). בלי השטח
      הריק בתחתית: בעברית 40.52em (היה 46.4em), ברוסית 41.05em, ברוחב 26em (השיחות ארוכות יותר; ב-22.5em היו 45.78em).
   3. במסך נמוך כל הטלפון (וכך גם הרצועה, שנמתחת לגובהו) קטן יחד: font-size כך שמהכותרת עד תחתית הטלפון ייכנס מתחת
      לכותרת העליונה (4.75rem = הכותרת, הרווח שמתחתיה ו-12px מעל ומתחת). מינימום 10px, מקסימום 1rem (=12px, כמו קודם).
      הסרטון (מ-1200) לא גבוה מהטלפון, כך ששניהם מסתיימים באותו קו.
   width:var(--ph-w) במקום min(var(--ph-w),100%): עם אחוזים העמודה קיבלה את רוחב ההודעות בלי שבירה (438px) */
@media (min-width:900px){
  #how{--ph-hem:40.52}
  .v2[lang="ru"] #how{--ph-hem:41.05}
  .v2[lang="ru"] #how .v3-phone{--ph-w:26em}
  #how .v3-phone{aspect-ratio:auto;width:var(--ph-w);font-size:clamp(.8333rem,calc((100vh - var(--hdr) - 4.75rem) / var(--ph-hem)),1rem)}
  .v3-how-grid .v2-chat-title{grid-column:2;text-align:center;white-space:nowrap}
  .no-js .v3-how-grid .v2-chat-title{grid-column:1}
}
@media (min-width:1200px){
  .v3-video{max-width:calc((100vh - var(--hdr) - 4.75rem) * 16 / 9)}
}

/* סבב 5ב, עובי הכותרות בעברית (24/10, יגאל בחר בדף הדגמה את גרסה ב'). עד עכשיו כל הכותרות בעברית היו Heebo 800
   (ה-@font-face של 700 הצביע לקובץ 800). עכשיו ב-v2.css משקל 700 = הקובץ 700, ונוסף 600 (מ-@fontsource/heebo 5.3.0).
   כותרות החלקים (h2), המשפט בחלק 2, המספרים והשם נשארים במשקל 700. הכותרת הראשית וכותרות המשנה: 600.
   הרוסית לא משתנה (PT Sans, אין לו 600) */
.v2[lang="he"] :is(.v2-h1,.v3-cp-hero h1,.v3-lg-hero h1){font-weight:600}
/* .v2-sup: כרטיסי "ליווי ותמיכה" שהטקסט שלהם הוא הכותרת. לא .v2-hs-card כולו: בכרטיסי "מוכר לכם?" גם הפסקה הייתה יורשת 600 */
.v2[lang="he"] :is(h3,.v2-hs-card.v2-sup){font-weight:600}

/* סבב 5ב: גודל כותרות החלקים ברוסית (יגאל בחר בדף ההדגמה). הכותרת הראשית לא משתנה (28px בטלפון, 38px במחשב).
   טלפון: כותרות החלקים 28px, ובתחתית עמוד הלקוחות 30px. מחשב: 41.4px, ובתחתית עמוד הלקוחות 43.2px.
   "Скоро" (בלי .v2-h2) קטנה יותר ולא נוגעים בה. העובי נשאר 700: ל-PT Sans אין 600 */
.v2[lang="ru"] :is(.v2-h2,.v2-stage-h){font-size:1.75rem}
.v2[lang="ru"] .v3-cp .v2-contact .v2-h2{font-size:1.875rem}
@media (min-width:900px){
  .v2[lang="ru"] :is(.v2-h2,.v2-stage-h){font-size:3.45rem}
  .v2[lang="ru"] .v3-cp .v2-contact .v2-h2{font-size:3.6rem}
}

/* סבב 5ב: שינוי שפה בטלפון מחוץ לתפריט (יגאל בחר גרסה ב': אותיות וקו מפריד ליד כפתור התפריט).
   בטלפון רואים קיצור (ru / he, הקיצור הבינלאומי), והשם המלא מוסתר מהעין אבל נקרא בקורא מסך ("ru Русский").
   במחשב לא משתנה: השם המלא. הקישור יצא מתוך התפריט */
.v2-lang-code{display:none}
@media (max-width:899px){
  .v2-lang{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;height:2.875rem;gap:.75rem;font-size:1.0625rem;font-weight:700;letter-spacing:.02em;text-decoration:none;color:#FFFFFF}
  .v2-lang::after{content:"";display:block;width:1px;height:1.25rem;background:rgba(255,255,255,.4)}
  .v2-lang-code{display:inline}
  .v2-lang-full{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .v2-hdr-end{gap:.25rem}
}
/* בטלפון צר אין מקום ליד הלוגו (עברית מתחת ל-375px, רוסית מתחת ל-384px): הקיצור עובר מתחת לכפתור התפריט, בלי קו */
@media (max-width:374px){
  .v2[lang="he"] .v2-hdr-end{flex-direction:column;gap:0;align-self:flex-start;margin-top:.875rem}
  .v2[lang="he"] .v2-menu{order:-1}
  .v2[lang="he"] .v2-lang{height:1.75rem}
  .v2[lang="he"] .v2-lang::after{display:none}
}
@media (max-width:383px){
  .v2[lang="ru"] .v2-hdr-end{flex-direction:column;gap:0;align-self:flex-start;margin-top:.875rem}
  .v2[lang="ru"] .v2-menu{order:-1}
  .v2[lang="ru"] .v2-lang{height:1.75rem}
  .v2[lang="ru"] .v2-lang::after{display:none}
}

/* סבב 5ג: עמוד "לא נמצא" (404.html). אותו רקע וכותרת כמו בעמודים המשפטיים (.v3-lg-hero), הכול באמצע המסך */
/* העמוד בגובה המסך לפחות: התוכן באמצע, והתחתית צמודה לתחתית המסך (כך הריווח שלה מתחת לכפתורים הצפים עובד כמו בשאר העמודים) */
:is(#nf-he,#nf-ru){min-height:100svh;display:flex;flex-direction:column}
.v3-nf{flex:1;display:flex;flex-direction:column}
.v3-nf-hero{flex:1;display:flex;align-items:center;padding-bottom:3rem}
.v3-nf-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.v3-nf-line{margin:0;max-width:34rem;font-size:1.125rem;line-height:1.6;color:rgba(255,255,255,.86)}
.v3-nf .v2-ctas{margin-top:.75rem}
.v3-nf .v2-btn{min-height:2.75rem}
@media (min-width:900px){ .v3-nf .v2-btn{min-height:3.75rem} .v3-nf-line{font-size:1.5rem} }
/* בלי JavaScript: שורה למעבר לרוסית מתחת לכפתורים */
.v3-nf-alt{display:none;margin:.5rem 0 0;color:rgba(255,255,255,.86)}
.no-js .v3-nf-alt{display:block}
.v3-nf-alt a{color:#FFFFFF;font-weight:700}
/* בכותרת העליונה אין תפריט, אז בלי הקו שמפריד בין השפה לתפריט */
:is(#nf-he,#nf-ru) .v2-lang::before,:is(#nf-he,#nf-ru) .v2-lang::after{display:none}
/* במחשב הכותרת העליונה היא רשת של שלוש עמודות (לוגו, תפריט, שפה); בלי תפריט השפה עדיין בעמודה השלישית, בקצה */
@media (min-width:1200px){ :is(#nf-he,#nf-ru) .v2-hdr-row>.v2-hdr-end{grid-column:3} }