/* בר נוי · דף הרשמה להדרכה + דף צפייה. מימוש של קובץ הפיגמה rtRKLG352oOxhcK0awPh7r
   כל מידה כתובה בפיקסלים של הפריים בפיגמה ומוכפלת ב-‎--u:
   דסקטופ = פריים 1920, מובייל = פריים 393 (עם תקרה בטאבלט, והעיצוב ממורכז). */

@font-face { font-family: "Reisinger Yonatan"; src: url("fonts/Reisinger-Yonatan-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OS Condensed"; src: url("fonts/OpenSans_Condensed-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "OS Condensed"; src: url("fonts/OpenSans_Condensed-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OS Condensed"; src: url("fonts/OpenSans_Condensed-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "OS Condensed"; src: url("fonts/OpenSans_Condensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "OS Field"; src: url("fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --plum: #705781;
  --plum-deep: #5d436f;
  --violet: #573e76;
  --ink: #241742;
  --mist: #f4f4f4;
  --lilac-text: #f6e9ff;
  --ph-dark: rgba(242, 223, 255, .4);
  --ph-light: #c0adcd;
  --field-fill: rgba(220, 217, 217, .16);
  --error: #ffc2c2;
  --error-on-light: #b3261e;

  --u: calc(100vw / 1920);
  --side: 0px;               /* במובייל: השוליים כשהמסך רחב מ-393 בסקאלה */
  --display: "Reisinger Yonatan", "OS Condensed", sans-serif;
  --text: "OS Condensed", "Arial Narrow", sans-serif;
  --field: "OS Field", Arial, sans-serif;
}
@media (max-width: 1023px) {
  :root { --u: min(calc(100vw / 393), 1.4px); --side: calc((100vw - 393 * var(--u)) / 2); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: #fff; color: var(--ink); font-family: var(--text); overflow-x: hidden; }
img { display: block; }
button, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.only-m { display: none; }
.only-m-img { display: none !important; }
@media (max-width: 1023px) { .only-d, .only-d-img { display: none !important; } .only-m { display: inline; } .only-m-img { display: block !important; } }

/* ── שדות, כפתור, הסכמה (משותף) ───────────────────── */
.field {
  display: block; width: 100%; min-width: 0;
  background: transparent; border: 1px solid #fff; border-radius: 0;
  text-align: center; font-family: var(--field); color: #fff; outline: none;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.field::placeholder { color: var(--ph-dark); opacity: 1; }
.field:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.field[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

.cta {
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  width: 100%; border: 0; border-radius: 0; cursor: pointer;
  background: #fff; color: var(--plum); line-height: 1;
  transition: transform .12s, filter .12s, opacity .12s;
}
.cta img { transform: scaleX(-1); flex: none; height: auto; transition: transform .15s; }
.cta:hover { filter: brightness(.95); }
.cta:hover img { transform: scaleX(-1) translateX(calc(4 * var(--u))); }
.cta:active { transform: scale(.985); }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cta[aria-busy="true"] { opacity: .7; cursor: progress; }

.consent { display: flex; align-items: flex-start; gap: calc(9 * var(--u)); cursor: pointer; }
.consent input {
  appearance: none; -webkit-appearance: none; flex: none; border: 1px solid currentColor; border-radius: 0; background: transparent; cursor: pointer;
  display: grid; place-content: center;
}
.consent input:checked::after { content: ""; width: calc(8 * var(--u)); height: calc(7 * var(--u)); background: currentColor; }
.consent input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.consent input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

.form-status:empty { display: none; }
.form-status[data-tone="error"] { color: var(--error); }

/* ── לוגו: שם (חתוך מהקובץ כמו בפיגמה) + סמל ─────── */
.logo { display: flex; align-items: flex-start; direction: ltr; }
.logo__img { display: block; width: 100%; height: auto; }
/* על הרקע הסגול: אותו לוגו בלבן */
.logo--light .logo__img { filter: brightness(0) invert(1); }

/* ════════════════ דף 1 · הרשמה להדרכה ════════════════ */
.optin { display: grid; grid-template-columns: 1fr calc(11 * var(--u)) calc(989 * var(--u)); grid-template-rows: auto 1fr; min-height: calc(1080 * var(--u)); }
.optin__media { grid-column: 3; grid-row: 1 / span 2; position: relative; overflow: hidden; background: #150022; }
.optin__media img { position: absolute; top: calc(-23 * var(--u)); left: calc(-151 * var(--u)); height: calc(1126 * var(--u)); width: calc(2000.7 * var(--u)); max-width: none; }
.optin__intro { grid-column: 1; grid-row: 1; background: var(--mist); padding: calc(156 * var(--u)) calc(66 * var(--u)) calc(90 * var(--u)) calc(64 * var(--u)); display: flex; flex-direction: column; }
.optin__intro .logo { align-self: flex-start; width: calc(263 * var(--u)); }
.optin__copy { margin-top: calc(42 * var(--u)); margin-right: calc(19 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.optin__title { font-family: var(--display); font-weight: 400; color: var(--plum); font-size: calc(50 * var(--u)); line-height: 1.2; }
.optin__lead { font-weight: 400; font-size: calc(32 * var(--u)); line-height: 1.36; color: var(--ink); }

.optin__form-wrap { grid-column: 1; grid-row: 2; position: relative; overflow: hidden; isolation: isolate; background: var(--plum-deep); color: #fff; padding: calc(48 * var(--u)) calc(85 * var(--u)) calc(48 * var(--u)) calc(64 * var(--u)); }
.optin__form-wrap::before { content: ""; position: absolute; left: 0; top: 0; width: calc(959 * var(--u)); height: calc(1151 * var(--u)); background: url("assets/texture.jpg") calc(-.5 * var(--u)) calc(-522.8 * var(--u)) / calc(960 * var(--u)) calc(1673.8 * var(--u)) no-repeat; mix-blend-mode: soft-light; z-index: -1; pointer-events: none; }
.optin__form-title { font-weight: 500; font-size: calc(32 * var(--u)); line-height: 1.36; color: #f3f3f3; }
.optin__grid { margin-top: calc(14 * var(--u)); display: grid; grid-template-columns: calc(295 * var(--u)) calc(366 * var(--u)); justify-content: start; column-gap: calc(18 * var(--u)); row-gap: calc(19 * var(--u)); }
.optin__grid .field { height: calc(59 * var(--u)); font-size: calc(18 * var(--u)); }
.optin__grid .cta { justify-self: end; height: calc(58.5 * var(--u)); width: calc(357.4 * var(--u)); font-weight: 700; font-size: calc(31 * var(--u)); }
.optin__grid .cta img { width: calc(20.2 * var(--u)); }
.optin .consent { grid-column: 1 / -1; margin-top: calc(11 * var(--u)); font-weight: 300; font-size: calc(18 * var(--u)); line-height: 1.1; color: #fff9f9; max-width: calc(399 * var(--u)); }
.optin .consent input { width: calc(14 * var(--u)); height: calc(13 * var(--u)); margin-top: calc(4 * var(--u)); }
.optin .form-status { grid-column: 1 / -1; font-size: calc(20 * var(--u)); }

@media (max-width: 1023px) {
  .optin { display: flex; flex-direction: column; min-height: 0; }
  .optin__intro { display: contents; }
  .optin__intro .logo { order: 1; align-self: stretch; width: auto; justify-content: flex-end; background: var(--mist); height: calc(172 * var(--u)); padding: calc(50 * var(--u)) calc(var(--side) + 49 * var(--u)) 0 0; }
  .optin__intro .logo .logo__img { width: calc(263 * var(--u)); flex: none; }
  .optin__media { order: 2; height: calc(672 * var(--u)); }
  .optin__media img { top: 0; left: calc(var(--side) - 154 * var(--u)); height: calc(702 * var(--u)); width: calc(1246 * var(--u)); }
  .optin__copy { order: 3; margin: 0; position: relative; overflow: hidden; isolation: isolate; background: var(--plum-deep); gap: calc(16 * var(--u));
    padding: calc(67 * var(--u)) calc(var(--side) + 39 * var(--u)) calc(80 * var(--u)) calc(var(--side) + 23 * var(--u)); }
  .optin__copy::before { content: ""; position: absolute; top: 0; left: calc(var(--side) - 138 * var(--u)); width: calc(699 * var(--u)); height: calc(699 * var(--u)); opacity: .8;
    background: url("assets/texture.jpg") calc(15.1 * var(--u)) calc(-305.2 * var(--u)) / calc(699.8 * var(--u)) calc(1220.8 * var(--u)) no-repeat; mix-blend-mode: soft-light; z-index: -1; pointer-events: none; }
  .optin__title { color: #fff; font-size: calc(45 * var(--u)); }
  .optin__lead { color: #f7f4fc; font-size: calc(32 * var(--u)); }

  .optin__form-wrap { order: 4; background: #fff; color: var(--plum); padding: calc(45 * var(--u)) 0 calc(58 * var(--u)); display: flex; justify-content: center; }
  .optin__form-wrap::before { display: none; }
  .optin__form { width: calc(273 * var(--u)); position: relative; left: calc(8 * var(--u)); }
  .optin__form-title { color: var(--plum); font-size: calc(32 * var(--u)); line-height: 1.34; width: calc(217 * var(--u)); }
  .optin__grid { margin-top: calc(24 * var(--u)); grid-template-columns: 1fr; row-gap: calc(21 * var(--u)); }
  .optin__grid .field { height: calc(44 * var(--u)); font-size: calc(16 * var(--u)); font-family: var(--text); font-weight: 300; text-align: right; padding-inline: calc(15 * var(--u)); border-color: var(--plum); color: var(--plum); }
  .optin__grid .field::placeholder { color: var(--ph-light); }
  .optin__grid .field:focus-visible { box-shadow: 0 0 0 2px rgba(112, 87, 129, .3); }
  .optin__grid .field[aria-invalid="true"] { border-color: var(--error-on-light); box-shadow: 0 0 0 1px var(--error-on-light); }
  .optin__grid .f-name { order: 1; } .optin__grid .f-phone { order: 2; } .optin__grid .f-email { order: 3; }
  .optin .consent { order: 4; margin-top: calc(-7 * var(--u)); font-size: calc(16 * var(--u)); color: var(--plum); max-width: none; }
  .optin .consent input { margin-top: calc(3 * var(--u)); }
  .optin .consent input[aria-invalid="true"] { outline-color: var(--error-on-light); }
  .optin__grid .cta { order: 5; width: 100%; margin-top: calc(-4 * var(--u)); background: var(--plum-deep); color: #fff; font-weight: 400; }
  .optin__grid .cta:focus-visible { outline-color: var(--plum); }
  .optin__grid .cta img { width: calc(15.8 * var(--u)); }
  .optin .form-status { order: 6; font-size: calc(16 * var(--u)); text-align: center; }
  .optin .form-status[data-tone="error"] { color: var(--error-on-light); }
}

/* ════════════════ דף 2 · צפייה + שיחת ייעוץ ════════════════ */
.watch { position: relative; overflow: hidden; isolation: isolate;
  /* הטקסטורה דועכת לפני שמופיע הים שבתחתית התמונה; מתחתיה זוהר רך כדי שהשאלון לא ישב על צבע שטוח */
  background: radial-gradient(70% 40% at 50% 100%, rgba(150, 118, 200, .32), transparent 70%), radial-gradient(60% 30% at 50% 62%, rgba(132, 100, 186, .18), transparent 70%), var(--violet); color: var(--lilac-text); min-height: 100vh; min-height: 100dvh;
  padding: calc(180 * var(--u)) calc(313 * var(--u)) calc(144 * var(--u)) calc(292 * var(--u)); }
.watch::before { content: ""; position: absolute; left: calc(-39 * var(--u)); top: calc(-44 * var(--u)); width: calc(1960 * var(--u)); height: calc(1760 * var(--u));
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
  background: url("assets/texture.jpg") calc(-1 * var(--u)) calc(-1068.7 * var(--u)) / calc(1962.2 * var(--u)) calc(3421.7 * var(--u)) no-repeat; mix-blend-mode: soft-light; z-index: -1; pointer-events: none; }
.watch .logo { display: none; }
.watch__title { font-weight: 700; font-size: calc(64.8 * var(--u)); line-height: 1.27; text-align: center; width: calc(923 * var(--u)); margin-inline: auto; position: relative; left: calc(-9 * var(--u)); }
.watch__title > span { display: block; }
.watch__video { position: relative; margin: calc(103 * var(--u)) auto 0; left: 0; width: calc(1331.5 * var(--u)); aspect-ratio: 1331.5 / 752.4; background: #1d1326; overflow: hidden; }
.watch__video img, .watch__video iframe, .watch__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.watch__play { position: absolute; inset: 0; display: grid; place-content: center; background: transparent; border: 0; cursor: pointer; }
.watch__play span { width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-content: center; transition: transform .15s; }
.watch__play span::after { content: ""; border-style: solid; border-width: calc(16 * var(--u)) 0 calc(16 * var(--u)) calc(26 * var(--u)); border-color: transparent transparent transparent var(--plum); margin-left: calc(6 * var(--u)); }
.watch__play:hover span { transform: scale(1.06); }
.watch__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.watch__soon { position: absolute; inset: auto 0 0 0; margin: 0; padding: calc(20 * var(--u)) calc(24 * var(--u)); background: rgba(36, 23, 66, .78); color: #fff; font-size: calc(30 * var(--u)); text-align: center; }
.privacy-link { display: block; margin-top: calc(10 * var(--u)); font-size: calc(18 * var(--u)); color: inherit; opacity: .85; }
.optin .privacy-link { grid-column: 1 / -1; margin-top: calc(-12 * var(--u)); }
@media (max-width: 1023px) { .optin .privacy-link { order: 4; margin-top: calc(-14 * var(--u)); } }
@media (max-width: 1023px) { .watch__soon { font-size: max(14px, calc(15 * var(--u))); padding: 8px 12px; } .privacy-link { font-size: max(13px, calc(13 * var(--u))); } }
.watch__arrow { display: block; margin: calc(87 * var(--u)) auto 0; position: relative; left: calc(10.5 * var(--u)); width: calc(55 * var(--u)); height: auto; transform: rotate(90deg); }
.watch__form { margin-top: calc(72 * var(--u)); }
.watch__form-title { font-weight: 400; font-size: calc(34 * var(--u)); line-height: 1.2; text-align: right; }
.watch__row { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(22 * var(--u)); }
.watch .field { height: calc(81 * var(--u)); background: var(--field-fill); font-size: calc(23 * var(--u)); }
.watch .cta { align-self: flex-end; width: calc(357.4 * var(--u)); height: calc(81 * var(--u)); font-weight: 500; font-size: calc(31 * var(--u)); }

/* ── שאלון ── */
.quiz { margin-top: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(48 * var(--u)); }
.quiz__q { display: flex; flex-direction: column; gap: calc(16 * var(--u)); border: 0; min-width: 0; }
fieldset.quiz__q { display: block; }
.quiz__label { display: block; padding: 0; text-wrap: balance; font-weight: 500; font-size: calc(30 * var(--u)); line-height: 1.25; color: var(--lilac-text); text-align: right; }
fieldset.quiz__q > .quiz__label { width: 100%; margin-bottom: calc(16 * var(--u)); }
.quiz__choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(22 * var(--u)); }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { text-wrap: balance; display: flex; align-items: center; justify-content: center; height: calc(72 * var(--u)); padding-inline: calc(12 * var(--u)); text-align: center;
  border: 1px solid #fff; background: var(--field-fill); color: rgba(255, 255, 255, .85); font-family: var(--field); font-size: calc(23 * var(--u)); line-height: 1.1;
  transition: background-color .15s, color .15s, box-shadow .15s; }
.chip:hover span { background: rgba(255, 255, 255, .26); }
.chip input:checked + span { background: #fff; color: var(--plum); }
.chip input:focus-visible + span { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.chip:active span { scale: .98; }
.quiz__q[aria-invalid="true"] .chip span { border-color: var(--error); }
.watch .field--area { height: calc(150 * var(--u)); resize: vertical; text-align: right; padding: calc(18 * var(--u)) calc(22 * var(--u)); line-height: 1.45; }
.watch .consent { font-weight: 300; font-size: calc(18 * var(--u)); line-height: 1.2; color: var(--lilac-text); max-width: calc(560 * var(--u)); }
.watch .consent input { width: calc(14 * var(--u)); height: calc(13 * var(--u)); margin-top: calc(4 * var(--u)); }
.watch .cta img { width: calc(33.7 * var(--u)); }
.watch .form-status { margin-top: calc(14 * var(--u)); font-size: calc(22 * var(--u)); text-align: right; }
.watch__done { font-size: calc(34 * var(--u)); text-align: right; margin-top: calc(26 * var(--u)); }

@media (max-width: 1023px) {
  .watch { padding: calc(103 * var(--u)) 0 calc(85 * var(--u)); display: flex; flex-direction: column; align-items: center; }
  .watch::before { left: calc(var(--side) - 1008 * var(--u)); top: calc(-97 * var(--u)); width: calc(2429 * var(--u)); height: calc(2140 * var(--u));
    background-position: calc(-1.2 * var(--u)) calc(-1324.9 * var(--u)); background-size: calc(2431.7 * var(--u)) calc(4241.9 * var(--u)); }
  .watch .logo { display: block; width: calc(254 * var(--u)); }
  .watch__title { margin-top: calc(110 * var(--u)); left: 0; width: calc(317 * var(--u)); font-size: calc(33 * var(--u)); line-height: .98; color: #fff; display: flex; flex-direction: column; gap: calc(32.3 * var(--u)); }
  .watch__video { margin-top: calc(44 * var(--u)); left: 0; width: calc(344 * var(--u)); }
  .watch__play span { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .watch__play span::after { border-width: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(16 * var(--u)); margin-left: calc(4 * var(--u)); }
  .watch__arrow { margin-top: calc(47.3 * var(--u)); }
  .watch__form { margin-top: calc(64 * var(--u)); width: calc(276 * var(--u)); position: relative; left: calc(5.5 * var(--u)); }
  .watch__form-title { font-size: calc(34 * var(--u)); line-height: 1.096; text-align: right; width: calc(317 * var(--u)); margin: 0; }
  .watch__form-title span { display: block; }
  .watch__row { grid-template-columns: 1fr; row-gap: calc(23 * var(--u)); }
  .quiz { margin-top: calc(57.5 * var(--u)); gap: calc(40 * var(--u)); }
  .quiz__label { font-size: calc(24 * var(--u)); text-align: right; text-wrap: pretty; }
  fieldset.quiz__q > .quiz__label { margin-bottom: calc(14 * var(--u)); }
  .quiz__choices { grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
  .chip span { height: calc(56 * var(--u)); font-size: calc(19 * var(--u)); }
  .watch .field.field--area { height: calc(120 * var(--u)); font-size: calc(19 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
  .watch .consent { font-size: calc(15 * var(--u)); max-width: none; }
  .watch .consent input { margin-top: calc(3 * var(--u)); }
  .watch .field { height: calc(50 * var(--u)); font-size: calc(19 * var(--u)); text-align: right; padding-inline: calc(16 * var(--u)); }
  .watch .cta { align-self: center; margin-top: 0; height: calc(70.5 * var(--u)); font-size: calc(25 * var(--u)); width: calc(275 * var(--u)); position: relative; left: calc(3.5 * var(--u)); }
  .watch .form-status, .watch__done { text-align: right; font-size: calc(20 * var(--u)); }
}

/* ── הנפשות כניסה ─────────────────────────────────────
   רק opacity / translate / scale (מאפיינים נפרדים מ-transform, כדי לא לדרוס
   את הסיבוב של החץ ואת הלחיצה של הכפתור). app.js מוסיף .in ומסיר את data-r בסיום. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
.motion [data-r] { opacity: 0; translate: 0 calc(22 * var(--u)); }
.motion [data-r="zoom"] { translate: none; scale: 1.07; }
.motion [data-r="soft"] { translate: 0 calc(16 * var(--u)); scale: .975; }
.motion [data-r].in {
  opacity: 1; translate: none; scale: none;
  transition: opacity .9s var(--ease-out), translate 1.1s var(--ease-out), scale 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion [data-r="zoom"].in { transition: opacity 1.2s ease-out, scale 2.2s var(--ease-out); }
.motion [data-r="soft"].in { transition-duration: 1s, 1.3s, 1.3s; }
.motion-off [data-r] { opacity: 1 !important; translate: none !important; scale: none !important; }

/* החץ ממשיך לנשום בעדינות אחרי שנכנס, כהזמנה לגלול לטופס */
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(8 * var(--u)); } }
.watch__arrow.bob { animation: bob 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .motion [data-r] { translate: none; scale: none; }
  .motion [data-r].in { transition: opacity .5s ease-out !important; transition-delay: 0ms !important; }
  .watch__arrow.bob { animation: none; }
}