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

@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 {
  --blush: #fff9fc;
  --pink: #ec88b7;
  --pink-light: #f1c6dc;
  --pink-text: #eb8abf;
  --night: #150022;
  --ink: #090909;
  --black: #040707;
  --lilac-text: #f6e9ff;
  --ph: rgba(78, 78, 78, .4);
  --error: #b3261e;

  --u: calc(100vw / 1920);
  --side: 0px;               /* במובייל: השוליים כשהמסך רחב מ-390 בסקאלה */
  --text: "OS Condensed", "Arial Narrow", sans-serif;
  --field: "OS Field", Arial, sans-serif;
  --pink-surface: linear-gradient(var(--pink), var(--pink-light));
}
@media (max-width: 1023px) {
  :root { --u: min(calc(100vw / 390), 1.4px); --side: calc((100vw - 390 * 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; }
@media (max-width: 1023px) { .only-d { display: none !important; } .only-m { display: inline; } }

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

.cta {
  display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  width: 100%; border: 0; border-radius: 0; cursor: pointer;
  background: var(--black); 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(1.35); }
.cta:hover img { transform: scaleX(-1) translateX(calc(4 * var(--u))); }
.cta:active { transform: scale(.985); }
.cta:focus-visible { outline: 2px solid var(--black); 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); }

/* ════════════════ דף 1 · הרשמה להדרכה ════════════════ */
.optin { display: grid; grid-template-columns: 1fr calc(1022 * var(--u)); grid-template-rows: calc(708 * var(--u)) 1fr; min-height: calc(1080 * var(--u)); }
.optin__media { grid-column: 2; grid-row: 1 / span 2; position: relative; overflow: hidden; background: var(--night); }
.optin__media img { position: absolute; top: calc(-220 * var(--u)); left: calc(-64 * var(--u)); width: calc(1086 * var(--u)); height: calc(1448 * var(--u)); max-width: none; }
.optin__intro { grid-column: 1; grid-row: 1; position: relative; background: var(--blush); padding: calc(277 * var(--u)) calc(81 * var(--u)) 0 0; }
.optin__intro .logo { position: absolute; top: calc(75 * var(--u)); right: calc(43 * var(--u)); width: calc(253 * var(--u)); height: auto; }
.optin__copy { display: flex; flex-direction: column; gap: calc(19 * var(--u)); }
.optin__title { font-weight: 700; font-size: calc(50 * var(--u)); line-height: 1.2; color: #000; white-space: nowrap; }
.optin__title > span { display: block; }
.optin__lead { font-weight: 400; font-size: calc(34 * var(--u)); line-height: 1.4; width: calc(760 * var(--u)); margin-right: calc(2 * var(--u)); color: var(--ink); }

.optin__form-wrap { grid-column: 1; grid-row: 2; padding: calc(43 * var(--u)) calc(85 * var(--u)) calc(48 * var(--u)) 0; }
.optin__form-wrap { position: relative; overflow: hidden; isolation: isolate; background: var(--pink-surface); }
.optin__form-wrap::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(1151 * var(--u)); mix-blend-mode: soft-light; z-index: -1; pointer-events: none;
  background: url("assets/texture.jpg") calc(-22.5 * var(--u)) calc(-522.8 * var(--u)) / calc(960.1 * var(--u)) calc(1673.8 * var(--u)) no-repeat; }
.optin__form-title { font-weight: 500; font-size: calc(32 * var(--u)); line-height: 1.36; color: #020202; }
.optin__grid { margin-top: calc(19 * 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)); background: rgba(253, 253, 253, .38); }
.optin__grid .cta { height: calc(59 * var(--u)); color: var(--pink-text); font-weight: 700; font-size: calc(31 * var(--u)); }
.optin__grid .cta img { width: calc(19.5 * var(--u)); }
.optin .consent { grid-column: 1 / -1; margin-top: calc(5 * var(--u)); font-weight: 300; font-size: calc(18 * var(--u)); line-height: 1.1; color: #000; 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; position: static; align-self: stretch; width: 100%; height: calc(112 * var(--u)); object-fit: contain; object-position: right center;
    background: var(--blush); padding: calc(20 * var(--u)) calc(var(--side) + 24 * var(--u)) calc(16 * var(--u)); }
  .optin__media { order: 2; height: calc(440 * var(--u)); }
  .optin__media img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
  .optin__copy { order: 3; background: var(--blush); gap: calc(16 * var(--u)); padding: calc(32 * var(--u)) calc(var(--side) + 24 * var(--u)) calc(40 * var(--u)); }
  .optin__title { font-size: calc(27 * var(--u)); line-height: 1.2; }
  .optin__title > span + span { margin-top: calc(4 * var(--u)); }
  .optin__lead { width: auto; margin: 0; font-size: calc(22 * var(--u)); line-height: 1.5; text-wrap: pretty; }

  .optin__form-wrap { order: 4; padding: calc(36 * var(--u)) calc(var(--side) + 24 * var(--u)) calc(44 * var(--u)); }
  .optin__form-wrap::before { height: 100%; background-position: center 40%; background-size: calc(390 * var(--u)) auto; }
  .optin__form-title { font-size: calc(25 * var(--u)); line-height: 1.25; text-wrap: balance; }
  .optin__grid { margin-top: calc(20 * var(--u)); grid-template-columns: 1fr; row-gap: calc(12 * var(--u)); }
  .optin__grid .field { height: calc(52 * var(--u)); font-size: calc(17 * var(--u)); background: rgba(253, 253, 253, .5); }
  .optin__grid .f-name { order: 1; } .optin__grid .f-phone { order: 2; } .optin__grid .f-email { order: 3; }
  .optin__grid .cta { order: 4; height: calc(56 * var(--u)); margin-top: calc(4 * var(--u)); font-size: calc(25 * var(--u)); }
  .optin__grid .cta img { width: calc(17 * var(--u)); }
  .optin .consent { order: 5; margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.2; max-width: none; }
  .optin .consent input { margin-top: calc(2 * var(--u)); }
  .optin .form-status { order: 6; font-size: calc(17 * var(--u)); text-align: center; }
}

/* ════════════════ דף 2 · צפייה + שיחת ייעוץ ════════════════ */
.watch { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #000; }
.watch__top { display: flex; flex-direction: column; align-items: center; padding: calc(199 * var(--u)) 0 calc(36 * var(--u)); color: #fff; }
.watch__title { width: calc(923 * var(--u)); text-align: center; font-weight: 400; font-size: calc(82.8 * var(--u)); line-height: 1.054; }
.watch__title > span, .watch__title > strong { display: block; }
.watch__title > strong { font-weight: 700; }
.watch__video { position: relative; margin-top: calc(106.8 * var(--u)); width: calc(1331.5 * var(--u)); aspect-ratio: 1331.5 / 752.4; background: #1a1a1a; 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(--black); 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__arrow { margin-top: calc(87 * var(--u)); width: calc(55 * var(--u)); height: auto; transform: rotate(90deg); }

.watch__bottom { flex: 1; display: flex; justify-content: center; padding: calc(81.6 * var(--u)) 0 calc(158 * var(--u)); }
.watch__bottom { position: relative; overflow: hidden; isolation: isolate; background: var(--pink-surface); }
.watch__bottom::before { content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light; z-index: -1; pointer-events: none;
  background: url("assets/texture.jpg") calc(-27 * var(--u)) calc(-1214 * var(--u)) / calc(1974.2 * var(--u)) calc(3445 * var(--u)) no-repeat; }
.watch__form { width: calc(1315 * var(--u)); }
.watch__form-title { font-weight: 500; font-size: calc(48 * var(--u)); line-height: 1.1; color: var(--lilac-text); text-align: right; }
.watch__row { margin-top: calc(35.6 * var(--u)); display: grid; grid-template-columns: calc(276 * var(--u)) calc(276 * var(--u)) calc(335 * var(--u)) calc(357.4 * var(--u)); justify-content: space-between; }
.watch .field { height: calc(81 * var(--u)); font-size: calc(23 * var(--u)); background: rgba(241, 198, 220, .43); border: 1px solid #fff; }
.watch .field::placeholder { color: rgba(79, 79, 79, .4); }
.watch .cta { height: calc(81 * var(--u)); color: #fff; font-weight: 500; font-size: calc(31 * var(--u)); }
.watch .cta img { width: calc(32 * var(--u)); }
.watch .consent { margin-top: calc(20 * var(--u)); font-weight: 300; font-size: calc(20 * var(--u)); line-height: 1.2; color: #000; max-width: calc(690 * var(--u)); }
.watch .consent input { width: calc(16 * var(--u)); height: calc(15 * var(--u)); margin-top: calc(4 * 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)); color: #000; }

@media (max-width: 1023px) {
  .watch__top { padding: calc(64 * var(--u)) calc(var(--side) + 24 * var(--u)) calc(28 * var(--u)); }
  .watch__title { width: auto; font-size: calc(38 * var(--u)); line-height: 1.1; }
  .watch__title > strong { margin-top: calc(4 * var(--u)); }
  .watch__video { margin-top: calc(32 * var(--u)); width: calc(342 * 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(36 * var(--u)); width: calc(40 * var(--u)); }

  .watch__bottom { padding: calc(40 * var(--u)) calc(var(--side) + 24 * var(--u)) calc(56 * var(--u)); }
  .watch__bottom::before { background-position: center 30%; background-size: calc(390 * var(--u)) auto; }
  .watch__form { width: 100%; }
  .watch__form-title { font-size: calc(30 * var(--u)); line-height: 1.15; }
  .watch__row { margin-top: calc(24 * var(--u)); grid-template-columns: 1fr; row-gap: calc(12 * var(--u)); }
  .watch .field { height: calc(54 * var(--u)); font-size: calc(17 * var(--u)); }
  .watch .cta { margin-top: calc(4 * var(--u)); height: calc(58 * var(--u)); font-size: calc(25 * var(--u)); }
  .watch .cta img { width: calc(26 * var(--u)); }
  .watch .consent { margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.2; max-width: none; }
  .watch .consent input { width: calc(14 * var(--u)); height: calc(13 * var(--u)); margin-top: calc(2 * var(--u)); }
  .watch .form-status, .watch__done { font-size: calc(19 * 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; }
}