/* Public home page (landing.html), loaded only there, after style.css. 2026-11-02, fourth take ("night shift").
   The owner chose a dark, polished product page (Linear / Vercel): a deep navy-black ground made from the brand navy
   #0b1f4b, the real app shown large under one blue light, crisp small text, glass-edged panels. Palette kept: navy
   (the ground and the panels), electric blue #2463eb (actions and the light), light blue #8cc3ff (highlights).
   The page is dark in every theme. Logical properties throughout, so Hebrew mirrors by itself.
   Motion: frontend/src/landing.js (GSAP + ScrollTrigger + SplitText + Lenis). Hidden starting states apply only under
   html.ya-js (landing-head.js; never with reduced motion), so the page reads in full without the script. */

.page-landing, .page-login {
  --g: #040a18;                          /* ground: the brand navy taken almost to black */
  --g2: #071229;                         /* one step up */
  --ink: #eef3ff;
  --ink-2: rgba(214, 226, 255, .66);
  --ink-3: rgba(196, 212, 255, .4);
  --line: rgba(140, 170, 235, .13);
  --line-2: rgba(140, 195, 255, .24);
  --blue: #2463eb; --blue-2: #3b78f6;
  --sky: #8cc3ff;
  --ok: #4fd69b;
  --m: clamp(20px, 4vw, 56px);          /* the page's one pair of outer margins */
  --w: 1200px;                           /* the content column */
  --bar: 64px;
  --sec: clamp(104px, 12vw, 176px);     /* between sections */
  --r: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t1: 15px; --t2: 17px; --t3: clamp(20px, 1.6vw, 22px); --t4: clamp(36px, 4.4vw, 60px);
  color-scheme: dark;
  background: var(--g); color: var(--ink);
}
body.page-landing::before { display: none; }
.page-landing .public-main { display: block; padding: 0; max-width: none; overflow-x: clip; }
.ya { font-size: var(--t2); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.ya :where(h1, h2, h3, p, figure, ol) { margin: 0; }
.ya img { display: block; width: 100%; height: auto; }
.ya ::selection { background: rgba(36, 99, 235, .55); color: #fff; }
.ya-display { font-size: clamp(44px, 7.2vw, 92px); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.ya-h2 { font-size: var(--t4); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
:lang(he) .ya-display, :lang(he) .ya-h2 { letter-spacing: -.015em; line-height: 1.1; }
:lang(he) .ya-display { font-size: clamp(30px, 9.4vw, 84px); }
/* Headings are lit from above: white fading into the soft blue-grey of the text below. */
.ya-h2, .ya-l1 { background: linear-gradient(180deg, #ffffff 30%, #b9c8ea 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; padding-bottom: .06em; }
.ya-l1, .ya-l2 { display: inline-block; padding-bottom: .06em; }
.ya-l2 { background: linear-gradient(100deg, #b8dcff 0%, var(--sky) 30%, var(--blue-2) 75%, #6f8dff 100%); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.ya-head { display: grid; justify-items: center; gap: 18px; max-width: 760px; margin: 0 auto; text-align: center; }
.ya-head p { max-width: 46ch; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); }

/* --- Buttons and links ------------------------------------------------------------------------------------------- */
.ya-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px;
  border-radius: 999px; background: var(--blue); color: #fff; font-size: 15.5px; font-weight: 600; white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(36, 99, 235, .9), 0 8px 28px -8px rgba(36, 99, 235, .9);
  transition: background .2s ease, box-shadow .3s ease, scale .14s var(--ease); }
.ya-btn .chev { width: 17px; height: 17px; color: currentColor; stroke-width: 2.4; transition: translate .4s var(--ease); }
[dir="rtl"] .ya-btn .chev { transform: none; scale: -1 1; }  /* style.css turns .chev in RTL too: once is enough */
.ya-btn:active { scale: .97; }
.ya-btn-lg { height: 54px; padding: 0 28px; font-size: 17px; }
.ya-btn-sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
.ya-btn-ghost { background: rgba(255, 255, 255, .04); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--line-2); }
@media (hover: hover) {
  .ya-btn:hover { background: var(--blue-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px var(--blue-2), 0 10px 40px -6px rgba(59, 120, 246, 1); }
  .ya-btn:hover .chev { translate: 3px 0; }
  [dir="rtl"] .ya-btn:hover .chev { translate: -3px 0; }
  .ya-btn-ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(140, 195, 255, .4); }
}
/* The main call to action (hero and closing; landing.js makes it follow the cursor): a lit blue pill in a soft blue
   ring, the arrow in a white disc at its end pointing onward (left in Hebrew). Hover: a sheen crosses it and the
   arrow leaves forward and comes back from behind. */
.ya-cta { height: 60px; gap: 16px; padding-block: 0; padding-inline: 30px 8px; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #4683f8 0%, #2a69ee 48%, #1f57da 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(140, 195, 255, .5),
    0 0 0 6px rgba(36, 99, 235, .13), 0 16px 44px -12px rgba(36, 99, 235, .95);
  transition: box-shadow .35s var(--ease), scale .14s var(--ease); }
.ya-cta::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, .28), transparent 60%); }
.ya-cta::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32) 50%, transparent); transform: skewX(-18deg);
  opacity: 0; }
.ya-cta-arrow { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; background: #fff; color: var(--blue);
  box-shadow: 0 4px 14px -4px rgba(4, 10, 24, .55), inset 0 -1px 0 rgba(36, 99, 235, .15); }
.ya-cta-arrow .ic { grid-area: 1 / 1; width: 20px; height: 20px; stroke-width: 2.4; transition: translate .5s var(--ease); }
.ya-cta-arrow .ic + .ic { translate: -44px 0; }
[dir="rtl"] .ya-cta-arrow .ic + .ic { translate: 44px 0; }
.ya-cta:active { scale: .97; }
@media (hover: hover) {
  .ya-cta:hover { background: linear-gradient(180deg, #4f8bfa 0%, #3070f2 48%, #2460e0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(160, 205, 255, .75),
      0 0 0 8px rgba(36, 99, 235, .18), 0 20px 56px -12px rgba(59, 120, 246, 1); }
  .ya-cta:hover .ya-cta-arrow .ic:first-child { translate: 44px 0; }
  [dir="rtl"] .ya-cta:hover .ya-cta-arrow .ic:first-child { translate: -44px 0; }
  .ya-cta:hover .ya-cta-arrow .ic + .ic { translate: 0 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ya-cta:hover::after { animation: ya-sheen .9s var(--ease) both; }
}
@keyframes ya-sheen { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 1; } }
.ya-actions .ya-btn-ghost { height: 60px; padding-inline: 30px; }  /* level with the call to action beside it */
@media (max-width: 560px) { .ya-cta { height: 56px; padding-inline: 24px 7px; font-size: 16.5px; } .ya-cta-arrow { width: 42px; height: 42px; }
  .ya-actions .ya-btn-ghost { height: 56px; padding-inline: 24px; } }

.ya-btn:focus-visible, .ya-link:focus-visible, .ya-foot a:focus-visible, .ya-foot-btn:focus-visible, .ya-q summary:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 3px; }
.ya-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 6px; text-decoration-color: var(--line-2); transition: text-decoration-color .18s ease; }
@media (hover: hover) { .ya-link:hover { text-decoration-color: var(--sky); } }

/* --- The bar: clear over the top light, frosted once the page moves ---------------------------------------------- */
.ya-bar { position: fixed; z-index: 30; inset: 0 0 auto; height: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px; padding: 0 var(--m); border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease; }
body.scrolled .ya-bar { background: rgba(4, 10, 24, .9); border-bottom-color: var(--line); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.ya-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 600;
  text-decoration: none; white-space: nowrap; justify-self: start; }
.ya-links { display: flex; gap: 28px; }
.ya-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: color .18s ease; }
.ya-links a.on, .ya-links a:hover { color: var(--ink); }
.ya-bar-end { display: flex; align-items: center; gap: 10px; justify-self: end; }
.ya-bar .lang-switch { height: 38px; border: 0; background: transparent; color: var(--ink-2); box-shadow: none; }
.ya-bar .lang-switch:hover { color: var(--ink); }
@media (max-width: 1023px) { .ya-bar { grid-template-columns: 1fr auto; } .ya-links { display: none; } }
@media (max-width: 380px) {
  .ya-bar { gap: 6px; } .ya-brand { font-size: 15.5px; gap: 8px; } .ya-bar .lang-switch .ic { display: none; }
  .ya-bar .lang-switch { padding: 0 8px; } .ya-bar .ya-btn-sm { padding: 0 13px; }
}

/* === The hero: the offer centred under a blue light, then the real app ============================================ */
.ya-hero { position: relative; padding: calc(var(--bar) + clamp(56px, 9vh, 112px)) 0 0; text-align: center; isolation: isolate; }
.ya-sky { position: absolute; z-index: -1; inset: 0 0 auto; height: 1900px; pointer-events: none; overflow: hidden; }
/* a fine grid, fading out from the top centre */
.ya-grid { position: absolute; inset: 0; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 48% at 50% 0%, #000 0%, transparent 100%); }
/* two beams of light falling from above the headline */
.ya-beam { position: absolute; top: -10%; left: 50%; width: 34vw; max-width: 520px; height: 90%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(140, 195, 255, .2), rgba(36, 99, 235, .06) 45%, transparent 75%);
  filter: blur(28px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.ya-beam.b1 { translate: -78% 0; rotate: 16deg; }
.ya-beam.b2 { translate: -22% 0; rotate: -16deg; }
/* the light behind the product: where the beams land */
.ya-halo { position: absolute; left: 50%; top: 520px; width: min(1500px, 120vw); height: 900px; translate: -50% 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(36, 99, 235, .45), rgba(36, 99, 235, .12) 45%, transparent 70%);
  filter: blur(20px); }
@media (prefers-reduced-motion: no-preference) {
  .ya-beam { animation: ya-beam 9s ease-in-out infinite alternate; }
  .ya-beam.b2 { animation-delay: -4.5s; }
  .motion-paused .ya-beam { animation-play-state: paused; }
}
@keyframes ya-beam { from { opacity: .55; } to { opacity: 1; } }

.ya-hero-text { display: flex; flex-direction: column; align-items: center; padding: 0 var(--m); }
.ya-invite { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 8px 16px; border-radius: 999px;
  background: rgba(36, 99, 235, .14); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 14.5px; text-decoration: none; }
.ya-invite .ic { width: 18px; height: 18px; color: var(--sky); flex: none; }
.ya-lead { margin-top: 26px; max-width: 40ch; color: var(--ink-2); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; }
.ya-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.ya-note { margin-top: 20px; max-width: 46ch; color: var(--ink-3); font-size: 14.5px; }
.ya-install[hidden] { display: none; }
/* "Install the app" (shown only when the browser can install it): a quiet secondary action under the offer. A soft
   glass pill only on hover (style.css paints every button:hover grey, which made a hard square here). */
.ya-install { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 16px; border: 0;
  border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: color .2s ease, background-color .25s ease, box-shadow .25s ease; }
.ya-install .ic { width: 17px; height: 17px; color: var(--sky); transition: translate .4s var(--ease); }
@media (hover: hover) {
  .ya-install:hover { background: rgba(140, 195, 255, .07); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
  .ya-install:hover .ic { translate: 0 2px; }
}
.ya-install:active { scale: .97; }
.ya-install:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* The product, tilted back (landing.js straightens it with the scroll), the phone standing in front of it. */
.ya-show { position: relative; margin-top: clamp(56px, 8vw, 96px); padding: 0 var(--m); perspective: 2000px; perspective-origin: 50% 0; }
.ya-tilt { position: relative; max-width: 1160px; margin: 0 auto; transform-origin: 50% 0; }
.ya-desk { position: relative; padding: 6px; border-radius: 18px; background: linear-gradient(180deg, rgba(140, 195, 255, .16), rgba(140, 195, 255, .03));
  box-shadow: 0 0 0 1px var(--line-2), 0 50px 140px -30px rgba(36, 99, 235, .55), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ya-desk img { border-radius: 13px; }
/* a line of light along its top edge */
.ya-desk::before { content: ""; position: absolute; inset: -1px 12% auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 220, 255, .95), transparent); }
/* and the screen sinking into the page at its foot */
.ya-desk::after { content: ""; position: absolute; inset: auto -2px -2px; height: 34%; border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, transparent, var(--g) 92%); pointer-events: none; }
/* A phone around the real screen: a metal rim, black glass, the status bar and island, side buttons. Sizes are in
   cqi (the phone's own width), so every phone has the same proportions at any size. */
.ya-phone { position: relative; container-type: inline-size; padding: 1.3%; border-radius: 16.5% / 7.6%;
  background: linear-gradient(135deg, #5d6b85 0%, #232c40 18%, #11182a 50%, #2b3550 82%, #6a7894 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .7), 0 50px 90px -30px rgba(0, 0, 0, .9),
    0 0 70px -12px rgba(36, 99, 235, .45); }
/* the buttons on its sides (sized from the phone's own box: % of its width and height) */
.ya-phone::before, .ya-phone::after { content: ""; position: absolute; width: 1.1%; border-radius: 2px; }
.ya-phone::before { inset-inline-start: -.9%; top: 17%; height: 21%;
  background: linear-gradient(180deg, #4a5670 0 16%, transparent 16% 32%, #4a5670 32% 63%, transparent 63% 69%, #4a5670 69% 100%); }
.ya-phone::after { inset-inline-end: -.9%; top: 26%; height: 11%; background: #4a5670; }
.ya-phone-body { display: block; padding: 3.1cqi; border-radius: 15.2cqi; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ya-phone-screen { position: relative; display: block; overflow: hidden; border-radius: 12.2cqi; background: #14223b; }
/* the glass catches a little light */
.ya-phone-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 35%); }
.ya-sb { position: relative; display: flex; align-items: center; justify-content: space-between; height: 12.5cqi; padding: 0 8cqi;
  color: #fff; font-size: 4.1cqi; line-height: 1; }
.ya-sb b { font-weight: 600; letter-spacing: -.01em; }
.ya-island { position: absolute; top: 2.9cqi; left: 50%; width: 29cqi; height: 8.4cqi; translate: -50% 0; border-radius: 99px; background: #000; }
.ya-sb-ic { display: flex; align-items: center; gap: 1.4cqi; }
.ya-sig { width: 4.6cqi; height: 3cqi; background: linear-gradient(#fff, #fff) 0 100% / 18% 40% no-repeat,
  linear-gradient(#fff, #fff) 33% 100% / 18% 62% no-repeat, linear-gradient(#fff, #fff) 67% 100% / 18% 82% no-repeat,
  linear-gradient(#fff, #fff) 100% 100% / 18% 100% no-repeat; }
.ya-bat { position: relative; width: 6.2cqi; height: 3cqi; border-radius: .9cqi; box-shadow: inset 0 0 0 .3cqi rgba(255, 255, 255, .55);
  background: linear-gradient(90deg, #fff 0 78%, transparent 78%) .55cqi .55cqi / calc(100% - 1.1cqi) calc(100% - 1.1cqi) no-repeat; }
.ya-bat::after { content: ""; position: absolute; top: 30%; inset-inline-end: -.9cqi; width: .6cqi; height: 40%; border-radius: 0 .4cqi .4cqi 0;
  background: rgba(255, 255, 255, .55); }
.ya-phone-img { display: grid; }
.ya-phone-img img { grid-area: 1 / 1; }
.ya-phone-hero { position: absolute; z-index: 2; width: 22%; inset-inline-end: -1.5%; bottom: 4%; }
@media (max-width: 767px) {
  .ya-show { overflow: clip; padding: 24px 0 8px; }
  .ya-tilt { width: 170%; margin-inline-start: var(--m); }
  .ya-phone-hero { width: 27%; inset-inline-end: auto; inset-inline-start: 25%; bottom: -2%; }
  .ya-desk::after { height: 50%; }
}

/* === Numbers =================================================================================================== */
.ya-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--w); margin: clamp(40px, 6vw, 72px) auto 0;
  padding: 0 var(--m); box-sizing: content-box; }
.ya-proof p { display: grid; gap: 8px; padding: 28px 16px; border-top: 1px solid var(--line); text-align: center; }
.ya-proof b { font-size: clamp(34px, 3.6vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, #9fb4e4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ya-proof span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-2); font-size: var(--t1); line-height: 1.4; }
.ya-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ya-live-dot { animation: ya-live 2.4s ease-out infinite; }
  .motion-paused .ya-live-dot { animation: none; }
}
@keyframes ya-live { 0% { box-shadow: 0 0 0 0 rgba(79, 214, 155, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(79, 214, 155, 0); } }
@media (max-width: 767px) { .ya-proof p:nth-child(odd) { border-inline-end: 1px solid var(--line); } }
@media (min-width: 768px) {
  .ya-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ya-proof p { border-top: 0; border-inline-start: 1px solid var(--line); }
  .ya-proof p:first-child { border-inline-start: 0; }
}

/* === How it works: the steps beside one held phone ================================================================= */
.ya-how { padding: var(--sec) var(--m) 0; }
.ya-how-grid { max-width: var(--w); margin: clamp(48px, 6vw, 80px) auto 0; }
.ya-steps { list-style: none; padding: 0; display: grid; gap: 72px; }
.ya-step { display: grid; justify-items: start; gap: 12px; }
.ya-step-n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px;
  background: rgba(36, 99, 235, .14); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--sky); font-size: 15px; font-weight: 600;
  transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.ya-step h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }
:lang(he) .ya-step h3 { letter-spacing: -.01em; }
.ya-step p { max-width: 38ch; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); }
.ya-phone-step { width: min(78%, 300px); margin-top: 24px; justify-self: center; }
.ya-hold { display: none; }
@media (min-width: 1024px) {
  .ya-how-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); }
  .ya-steps { gap: 0; }
  .ya-step { min-height: 72vh; align-content: center; transition: opacity .5s ease; }
  .ya-step:not(.on) { opacity: .34; }
  .ya-step.on .ya-step-n { background: var(--blue); color: #fff; box-shadow: 0 0 24px -2px rgba(36, 99, 235, .9); }
  .ya-phone-step { display: none; }
  .ya-hold { position: sticky; top: calc(var(--bar) + 4vh); display: grid; place-items: center; height: calc(100vh - var(--bar) - 8vh); }
  .ya-hold-glow { position: absolute; inset: 10% 0; background: radial-gradient(ellipse 50% 46% at 50% 50%, rgba(36, 99, 235, .4), transparent 70%);
    filter: blur(24px); }
  .ya-phone-held { width: min(340px, calc((100vh - var(--bar) - 150px) / 2.17)); }
  .ya-held { opacity: 0; scale: .97; transition: opacity .6s ease, scale .8s var(--ease); }
  .ya-held.on { opacity: 1; scale: 1; }
  /* the scroll's progress through the steps, a thin rail beside the phone */
  .ya-rail { position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .ya-rail i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky), var(--blue)); transform-origin: 50% 0; transform: scaleY(0); }
}

/* === Features: cards, each with a real piece of the app ============================================================ */
.ya-feat { padding: var(--sec) var(--m) 0; }
.ya-cards { display: grid; gap: 16px; max-width: var(--w); margin: clamp(48px, 6vw, 80px) auto 0; }
.ya-card { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: 28px;
  border-radius: var(--r); background: linear-gradient(180deg, rgba(14, 30, 66, .7), rgba(8, 18, 41, .7));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; isolation: isolate; }
/* the pointer's light: fills the card softly and brightens its edge where the pointer is (landing.js sets --mx/--my) */
.ya-card::before, .ya-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .4s ease; }
.ya-card::before { z-index: -1; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(140, 195, 255, .1), transparent 45%); }
.ya-card::after { z-index: 3; padding: 1px; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(140, 195, 255, .7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) { .ya-card:hover::before, .ya-card:hover::after { opacity: 1; } }
.ya-card-text h3 { font-size: var(--t3); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.ya-card-text p { margin-top: 8px; max-width: 40ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.ya-shot img { border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2), 0 20px 50px -20px rgba(0, 0, 0, .9); }
/* the applications list runs off the card's foot and far edge, like a window behind it */
.ya-shot-list { margin-top: auto; margin-bottom: -28px; margin-inline: 14% -28px; }
.ya-shot-list img { border-start-start-radius: 12px; border-start-end-radius: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
.ya-shot-mail { display: grid; place-items: center; flex: 1; }
.ya-pane { display: grid; place-items: center; flex: 1; }
.ya-pane > * { width: 100%; }
@media (min-width: 768px) { .ya-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ya-card-wide { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .ya-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ya-card-wide { grid-column: span 2; }
  .ya-card { min-height: 420px; }
  .ya-card-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px;
    min-height: 0; padding: 36px; }
  .ya-shot-list { max-height: 330px; overflow: hidden; }
}
/* The panes' pieces of the app (data-ui): the app's own dark panels */
.ya-letter, .ya-form, .ya-vault, .ya-ctl { padding: 18px; border-radius: 14px; background: rgba(4, 10, 24, .7); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font-size: 14.5px; line-height: 1.55; text-align: start; }
.ya-letter { display: grid; gap: 10px; color: var(--ink-2); }
.ya-letter-to { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.ya-letter-to small { color: var(--ok); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ya-form { display: grid; gap: 10px; }
.ya-form-row small { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: 12.5px; }
.ya-form-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 12px;
  border-radius: 9px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; }
.ya-form-in .ic { width: 15px; height: 15px; color: var(--ok); stroke-width: 2.8; flex: none; }
.ya-ctl { display: flex; align-items: center; gap: 18px; padding: 24px 20px; }
.ya-ctl b { display: block; font-size: 18px; }
.ya-ctl small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 14px; }
.ya-ctl-sw { position: relative; flex: none; width: 72px; height: 42px; padding: 0; border: 0; border-radius: 999px; background: var(--blue);
  box-shadow: 0 0 24px -4px rgba(36, 99, 235, .9), inset 0 1px 0 rgba(255, 255, 255, .25); cursor: pointer; transition: background .25s ease, box-shadow .25s ease; }
.ya-ctl-sw i { position: absolute; top: 50%; translate: 0 -50%; inset-inline-end: 4px; width: 34px; height: 34px; border-radius: 50%; background: #fff;
  transition: inset-inline-end .45s var(--ease), scale .14s ease; }
.ya-ctl-sw[aria-checked="false"] { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px var(--line-2); }
.ya-ctl-sw[aria-checked="false"] i { inset-inline-end: 34px; }
.ya-ctl-sw:active i { scale: .92 1; }
.ya-ctl-sw:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
/* style.css paints every button:hover grey: keep the switch's own colours (a touch brighter on hover) */
@media (hover: hover) {
  .ya-ctl-sw:hover { background: var(--blue-2); }
  .ya-ctl-sw[aria-checked="false"]:hover { background: rgba(255, 255, 255, .2); }
}
.ya-vault { display: grid; gap: 2px; padding: 8px; }
.ya-vault-row { display: flex; align-items: center; gap: 12px; padding: 10px; }
.ya-vault-row + .ya-vault-row { border-top: 1px solid var(--line); }
.ya-vault-row > .ic { width: 18px; height: 18px; color: var(--sky); flex: none; }
.ya-vault-row b { display: block; font-size: 14.5px; }
.ya-vault-row small { display: block; color: var(--ink-2); font-size: 13px; }
.ya-vault-tag { margin-inline-start: auto; padding: 2px 10px; border-radius: 999px; background: rgba(79, 214, 155, .12); color: var(--ok);
  font-size: 12.5px; font-weight: 600; }
/* played once the card arrives (landing.js adds .is-in) */
@media (prefers-reduced-motion: no-preference) {
  .ya-js .ya-form-in .ic, .ya-js .ya-vault-tag { scale: 0; transition: scale .5s var(--ease); }
  .ya-js .is-in .ya-form-in .ic, .ya-js .is-in .ya-vault-tag { scale: 1; }
  .ya-js .is-in .ya-form-row:nth-child(2) .ic, .ya-js .is-in .ya-vault-row:nth-child(2) .ya-vault-tag { transition-delay: .25s; }
  .ya-js .is-in .ya-form-row:nth-child(3) .ic, .ya-js .is-in .ya-vault-row:nth-child(3) .ya-vault-tag { transition-delay: .5s; }
  .ya-js .is-in .ya-form-row:nth-child(4) .ic { transition-delay: .75s; }
}

/* === Every field of work ========================================================================================== */
.ya-fields { padding-top: var(--sec); }
.ya-fields .ya-head { padding: 0 var(--m); }
.ya-check { max-width: 640px; margin: 48px auto 0; padding: 0 var(--m); }
.ya-check label { display: block; margin-bottom: 12px; color: var(--ink); font-size: var(--t1); font-weight: 600; text-align: center; }
.ya-check-box { position: relative; border-radius: 16px; isolation: isolate; }
.ya-check-box::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 17px; opacity: .6;
  background: linear-gradient(120deg, rgba(140, 195, 255, .6), rgba(36, 99, 235, .2) 40%, rgba(140, 195, 255, .1) 70%, rgba(36, 99, 235, .6));
  transition: opacity .3s ease; }
.ya-check-box::after { content: ""; position: absolute; inset: 20% 10%; z-index: -2; background: rgba(36, 99, 235, .35); filter: blur(40px);
  opacity: 0; transition: opacity .4s ease; }
.ya-check-box:focus-within::before, .ya-check-box:focus-within::after { opacity: 1; }
.ya-check-box .ic { position: absolute; top: 50%; inset-inline-start: 20px; width: 20px; height: 20px; translate: 0 -50%;
  color: var(--ink-2); pointer-events: none; }
.ya-check input { width: 100%; height: 62px; padding: 0 20px; padding-inline-start: 52px; border: 0; border-radius: 16px;
  background: #081329; color: var(--ink); font: inherit; font-size: 17px; outline: none; }
.ya-check input::placeholder { color: var(--ink-3); }
.ya-check-out { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 88px; margin-top: 16px; align-content: flex-start; }
.ya-check-hint, .ya-check-none, .ya-check-count { color: var(--ink-3); font-size: 14.5px; text-align: center; }
.ya-check-count { margin-top: 4px; }
.ya-hit { display: inline-flex; flex-direction: column; padding: 9px 14px; border-radius: 12px; background: rgba(36, 99, 235, .12);
  box-shadow: inset 0 0 0 1px var(--line-2); line-height: 1.3; text-align: start; }
.ya-hit b { font-size: 15px; font-weight: 600; }
.ya-hit small { color: var(--ink-2); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) { .ya-hit { animation: ya-pop .5s var(--ease) both; } }
@keyframes ya-pop { from { opacity: 0; translate: 0 8px; filter: blur(4px); } }
/* The names of every field drift past, fading at both edges. */
.ya-rows { display: grid; gap: 14px; margin-top: clamp(40px, 6vw, 72px); overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ya-row { display: flex; width: max-content; }
.ya-row p { display: flex; gap: 14px; padding-inline-end: 14px; }
.ya-row span { padding: 10px 20px; border-radius: 999px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); font-size: 16px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .ya-row { animation: ya-drift 70s linear infinite; }
  .ya-row[data-row="2"] { animation-direction: reverse; animation-duration: 80s; }
  [dir="rtl"] .ya-row { animation-name: ya-drift-rtl; }
  .motion-paused .ya-row, .ya-rows:hover .ya-row { animation-play-state: paused; }
}
@keyframes ya-drift { to { translate: -50% 0; } }
@keyframes ya-drift-rtl { to { translate: 50% 0; } }

/* === Pricing: two panels, Pro's edge carries a running light ======================================================= */
.ya-pricing { padding: var(--sec) var(--m) 0; }
.ya-plans { display: grid; gap: 16px; max-width: 980px; margin: clamp(48px, 6vw, 72px) auto 0; }
.ya-plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3vw, 40px); border-radius: 24px;
  background: linear-gradient(180deg, rgba(14, 30, 66, .7), rgba(8, 18, 41, .7)); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.ya-plan-pro { background: radial-gradient(120% 80% at 50% 0%, rgba(36, 99, 235, .28), transparent 60%), linear-gradient(180deg, #0c1a3c, #081329);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 90px -30px rgba(36, 99, 235, .6); }
/* the running light: a conic sweep shown only on the 1px edge */
@property --ya-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ya-beam-edge { position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ya-a), transparent 0deg, transparent 250deg, rgba(140, 195, 255, .9) 320deg, #fff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .ya-beam-edge { animation: ya-spin 6s linear infinite; }
  .motion-paused .ya-beam-edge { animation-play-state: paused; }
}
@keyframes ya-spin { to { --ya-a: 360deg; } }
.ya-plan-name { font-size: clamp(22px, 2vw, 26px); font-weight: 600; letter-spacing: -.015em; }
.ya-plan-for { max-width: 40ch; color: var(--ink-2); font-size: 16px; }
/* both cards end the same way: the price, one small line under it, then the action across the card's width */
.ya-plan-foot { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin-top: auto; padding-top: 20px; }
.ya-plan-foot .ya-btn { width: 100%; }
.ya-price { font-size: clamp(48px, 5vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ya-price small { margin-inline-start: 6px; color: var(--ink-2); font-size: 17px; font-weight: 500; letter-spacing: 0; }
.ya-bill { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; }
.ya-bill s { opacity: .75; }
.ya-period { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line); }
.ya-period input { position: absolute; opacity: 0; pointer-events: none; }
.ya-period label { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  color: var(--ink-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease; }
.ya-period label span { color: var(--sky); }
.ya-period input:checked + label { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.ya-period input:focus-visible + label { outline: 2px solid var(--sky); outline-offset: 2px; }
.ya-pp { display: none; }
.ya-plans:has(#yp-m:checked) .ya-pm, .ya-plans:has(#yp-q:checked) .ya-pq, .ya-plans:has(#yp-y:checked) .ya-py { display: block; }
.ya-plans:not(:has(input:checked)) .ya-pq { display: block; }
@media (prefers-reduced-motion: no-preference) { .ya-pp .ya-price { animation: ya-pop .5s var(--ease) both; } }
@media (min-width: 900px) { .ya-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ya-plan { min-height: 460px; } }
@media (max-width: 899px) { .ya-plan-pro { order: -1; } }

/* === Questions ===================================================================================================== */
.ya-faq { display: grid; gap: 40px; max-width: var(--w); margin: 0 auto; padding: var(--sec) var(--m) 0; box-sizing: content-box; }
.ya-faq-head .ya-link { display: inline-block; margin-top: 20px; font-size: var(--t1); }
.ya-faq-list { border-top: 1px solid var(--line); }
.ya-q { border-bottom: 1px solid var(--line); }
.ya-q summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer;
  font-size: 17.5px; font-weight: 600; line-height: 1.4; transition: color .2s ease; }
.ya-q summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .ya-q summary:hover { color: var(--sky); } }
.ya-q-ic { position: relative; flex: none; width: 14px; height: 14px; }
.ya-q-ic::before, .ya-q-ic::after { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; border-radius: 2px; background: var(--ink-2);
  transition: rotate .35s var(--ease); }
.ya-q-ic::after { rotate: 90deg; }
.ya-q[open] .ya-q-ic::after { rotate: 0deg; }
.ya-q p { padding: 0 0 24px; max-width: 64ch; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
@supports (interpolate-size: allow-keywords) {
  .ya-faq-list { interpolate-size: allow-keywords; }
  .ya-q::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  .ya-q[open]::details-content { height: auto; }
}
@media (min-width: 1024px) {
  .ya-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
}

/* === The close and the footer ====================================================================================== */
.ya-end { position: relative; display: grid; justify-items: center; gap: 22px; margin-top: var(--sec); padding: clamp(96px, 12vw, 168px) var(--m);
  text-align: center; isolation: isolate; overflow: clip; }
.ya-end-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 50% 100%, rgba(36, 99, 235, .5), rgba(36, 99, 235, .1) 50%, transparent 75%); }
.ya-end-sky::before { content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 220, 255, .9), transparent); }
.ya-end-sky::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center bottom;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000, transparent);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000, transparent); }
.ya-end .ya-h2 { font-size: clamp(40px, 5.6vw, 76px); }
.ya-end p { max-width: 36ch; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); }
.ya-end > div { margin-top: 10px; }
.ya-foot { padding: 40px var(--m) 0; overflow: clip; }
.ya-foot-line { display: grid; gap: 16px; max-width: var(--w); margin: 0 auto; color: var(--ink-3); font-size: 14.5px; }
.ya-foot-line nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ya-foot-line a, .ya-foot-btn { color: var(--ink-2); text-decoration: none; transition: color .18s ease; }
.ya-foot-line a:hover, .ya-foot-btn:hover { color: var(--ink); }
.ya-foot-btn:hover { background: none; }  /* not style.css's grey button:hover: a text button, like the links beside it */
.ya-foot-line .ya-brand { color: var(--ink); }
.ya-foot-end { display: flex; align-items: baseline; gap: 22px; }
.ya-foot-btn { padding: 0; border: 0; background: none; font: inherit; line-height: inherit; cursor: pointer; }
.ya-foot-btn .when-paused, .motion-paused .ya-foot-btn .when-moving { display: none; }
.motion-paused .ya-foot-btn .when-paused { display: inline; }
@media (min-width: 1024px) { .ya-foot-line { grid-template-columns: auto 1fr auto auto; align-items: center; gap: 32px; } }
/* the name, huge and dim, cut off by the page's foot */
.ya-word { margin-top: 48px; font-size: clamp(72px, 17vw, 260px); font-weight: 700; line-height: .8; letter-spacing: -.05em; white-space: nowrap;
  text-align: center; background: linear-gradient(180deg, rgba(140, 170, 235, .22), rgba(140, 170, 235, 0) 85%); -webkit-background-clip: text;
  background-clip: text; color: transparent; user-select: none; }
:lang(he) .ya-word { letter-spacing: -.02em; }

/* === Motion: hidden starting states, only when the motion bundle will run them ===================================== */
@media (prefers-reduced-motion: no-preference) {
  /* opacity, not visibility: links and fields inside stay reachable by Tab */
  .ya-js [data-blur], .ya-js [data-rise], .ya-js [data-card], .ya-js .ya-show, .ya-js .ya-proof p { opacity: 0; }
}
/* SplitText words keep the heading's light (a clipped background does not reach words that move on their own layer) */
.ya-h2 .ya-w { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }

/* === Narrow phones (2026-11-02 sweep at 320–430px) ================================================================= */
/* phones and tablets only: desktop keeps its own layout */
@media (max-width: 899px) { .ya-plans { grid-template-columns: minmax(0, 1fr); } }
.ya-vault-row > span { min-width: 0; }
@media (max-width: 1023px) { .ya-foot-line nav a, .ya-foot-end a, .ya-foot-btn { padding-block: 10px; } }
@media (max-width: 440px) {
  /* the period switch: three equal parts, the saving on its own line, so it always fits the card */
  .ya-period { display: flex; align-self: stretch; border-radius: 16px; }
  .ya-period label { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0; height: auto; min-height: 46px; padding: 6px 4px;
    border-radius: 13px; font-size: 13.5px; line-height: 1.25; white-space: normal; text-align: center; }
  .ya-plan { padding: 26px 22px; }
  .ya-price { font-size: 46px; }
  .ya-card { padding: 22px; }
  .ya-shot-list { margin-bottom: -22px; margin-inline-end: -22px; }
}
.ya-pane { grid-template-columns: minmax(0, 1fr); }
.ya-vault-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 440px) { .ya-vault-tag { padding: 2px 8px; } .ya-word { font-size: 17vw; } }