/* Prototype: dive into the monitor, then a camera tour of the whole window. Home page hero (index.html, he/index.html). */
::selection{background:#f3a63a59;color:#171a1b}
html{scrollbar-color:#b9bcb3 transparent}
/* ScrollTrigger measures by jumping the scroll position; CSS smooth scrolling breaks that. Anchors glide via JS instead. */
html.x-js{scroll-behavior:auto}

.x-hero{padding-bottom:0}
.x-hero .hero-intro{margin-bottom:44px}
.x-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.x-line>span{display:block}

.x-unfold{position:relative}
.x-pin{position:relative}
.x-scene,.x-tilt{position:relative}
.x-stack{position:relative;width:min(1152px,calc(100% - 128px));margin-inline:auto;aspect-ratio:1920/1050;border-radius:12px}
.x-base{position:relative;width:100%;height:100%;border-radius:12px;box-shadow:0 30px 70px -28px rgba(23,26,27,.42)}
.x-chassis,.x-shell,.x-mark{display:none}

/* Live (JS + motion allowed) */
.x-unfold.is-live{height:calc(100svh - var(--hdr,76px) + var(--run,0px))}
.x-unfold.is-live .x-pin{position:sticky;top:var(--hdr,76px);height:calc(100svh - var(--hdr,76px));min-height:560px;overflow:hidden}
.x-unfold.is-live .x-scene,.x-unfold.is-live .x-tilt{position:absolute;inset:0}
.x-unfold.is-live .x-stack{position:absolute;top:0;left:0;right:0;overflow:hidden;background:#121416;box-shadow:0 30px 70px -28px rgba(23,26,27,.45)}
.x-unfold.is-live .x-base{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:0;box-shadow:none;transform-origin:0 0}

.x-unfold.is-live .x-shell{display:block;position:absolute;inset:0;width:min(1280px,100%);margin-inline:auto;padding-inline:64px;pointer-events:none}
.x-steps{position:absolute;left:64px;top:50%;width:330px;height:260px;margin-top:-150px}
.x-step{position:absolute;top:0;left:0;right:0;visibility:hidden;opacity:0}
.x-step h2{font-size:clamp(32px,3.1vw,44px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.x-step p{margin-top:18px;font-size:16px;line-height:1.6;color:var(--muted);max-width:31ch}

.x-rail{position:absolute;left:64px;bottom:36px;width:330px;display:grid;grid-template-columns:repeat(4,1fr);row-gap:12px;font-size:12px;letter-spacing:.01em;color:var(--text);opacity:0}
.x-rail span{opacity:.38}
.x-track{grid-column:1/-1;display:block;height:1px;background:var(--line);overflow:hidden}
.x-fill{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

.x-summary .hero-summary{border-top:0}

@media (max-width:820px){
  .x-stack{width:calc(100% - 40px)}
  .x-unfold.is-live .x-shell{padding-inline:20px}
  .x-steps{left:20px;right:20px;width:auto;top:auto;bottom:78px;height:190px;margin-top:0}
  .x-step h2{font-size:28px}
  .x-step p{font-size:15px;margin-top:12px}
  .x-rail{left:20px;right:20px;width:auto;bottom:28px}
}

/* The dive: a musician at the desk; scrolling pushes the camera into the monitor. */
.x-photo{position:relative;height:min(78vh,760px);overflow:hidden;background:#0b0c0d}
.x-lens,.x-cam{position:absolute;inset:0}
.x-room{width:100%;height:100%;object-fit:cover}
.x-screen,.x-hand{display:none}
.x-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,10,11,.9) 0%,rgba(9,10,11,.78) 30%,rgba(9,10,11,.45) 46%,rgba(9,10,11,0) 64%)}
.x-intro{width:min(1280px,100%);margin-inline:auto;padding:56px 64px 48px;display:grid;gap:28px}
.x-intro .hero-copy{margin-left:0;max-width:420px}

.x-unfold.is-live .x-photo{position:absolute;inset:0;height:auto}
.x-unfold.is-live .x-lens{transform:scale(1.03)}
.x-fade{display:none}
.x-unfold.is-live .x-fade{display:block;position:absolute;inset:0;background:#0b0c0d;opacity:1}
.x-unfold.is-live .x-cam{inset:auto;left:0;top:0;width:2400px;height:1920px;transform-origin:0 0}
.x-unfold.is-live .x-room{position:absolute;left:0;top:0;width:2400px;height:1920px;max-width:none;object-fit:fill}
.x-unfold.is-live .x-hand{position:absolute;left:1318px;top:926px;width:224px;height:136px;max-width:none}
.x-unfold.is-live .x-hand{display:block}
.x-unfold.is-live .x-screen{display:block;position:absolute;left:0;top:0;width:1920px;height:1050px;transform-origin:0 0;overflow:hidden}
/* A lit panel in a dark room, not a pasted screenshot: a touch of softness to match the photo,
   blacks lifted by the backlight, light falling off toward the edges and a faint reflection. */
.x-unfold.is-live .x-screen img{display:block;width:1920px;height:1050px;max-width:none;filter:blur(.7px) brightness(.9) contrast(.94) saturate(1.06)}
.x-unfold.is-live .x-lift{position:absolute;inset:0;background:rgba(64,88,102,.13);mix-blend-mode:screen}
.x-unfold.is-live .x-glass{position:absolute;inset:0;background:
  linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 26%,rgba(255,255,255,0) 44%),
  radial-gradient(120% 95% at 50% 46%,rgba(0,0,0,0) 58%,rgba(0,0,0,.36) 100%)}
.x-unfold.is-live .x-intro{position:absolute;z-index:2;left:max(64px,calc((100% - 1280px) / 2 + 64px));top:50%;transform:translateY(-50%);width:480px;padding:0;margin:0;color:var(--on-dark)}
.x-unfold.is-live .x-intro .eyebrow{color:#b8bbb3}
.x-unfold.is-live .x-intro h1{color:#fbfbf7}
.x-unfold.is-live .x-intro .hero-copy>p{color:#d4d6cf}
.x-unfold.is-live .x-intro .film-link,.x-unfold.is-live .x-intro .text-link{color:var(--on-dark)}
.x-unfold.is-live .x-intro .text-link:hover{color:#fff}

@media (max-width:820px){
  .x-intro{padding:36px 20px 32px}
  .x-unfold.is-live .x-scrim{background:linear-gradient(0deg,rgba(9,10,11,.86) 0%,rgba(9,10,11,.55) 42%,rgba(9,10,11,0) 70%)}
  .x-unfold.is-live .x-intro{left:20px;right:20px;width:auto;top:auto;bottom:28px;transform:none}
  .x-unfold.is-live .x-intro .hero-copy>p{font-size:15px}
}

/* Export button, marked in the last step (source px 1822,66 · 90 x 34 of 1920 x 1050). */
.x-unfold.is-live .x-mark{display:block;position:absolute;left:94.9%;top:6.29%;width:4.69%;height:3.24%;border-radius:5px;box-shadow:0 0 0 2px var(--accent);visibility:hidden}

/* Hebrew: the copy and the progress rail sit on the right, the window on the left (hero-dive.js mirrors the dock). */
@media (min-width:821px){html[dir=rtl] .x-steps,html[dir=rtl] .x-rail{left:auto;right:64px}}
html[dir=rtl] .x-fill{transform-origin:100% 50%}

/* Hero actions: the free trial is the primary pill (accent); the film is a quiet outline pill. */
.x-intro .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.x-intro .trial-link,.x-intro .film-link{display:inline-flex;align-items:center;min-height:50px;border-radius:999px;font-size:14px;letter-spacing:-.01em;margin:0;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,transform .2s cubic-bezier(.2,.7,.2,1)}
.x-intro .trial-link{gap:10px;padding:0 24px 0 20px;background:var(--accent);color:#171a1b;font-weight:600}
.x-intro .trial-link:hover{background:#f7b75a}
.x-intro .trial-link .ico svg,.x-intro .trial-link:hover .ico svg{transform:none}
.x-intro .trial-link:hover .ico svg{transform:translateY(1.5px)}
.x-intro .film-link{gap:12px;padding:0 20px 0 7px;font-weight:500;background:#171a1b;color:#fbfbf7}
.x-intro .film-link .play-icon{width:36px;height:36px;border:0;padding:0;border-radius:50%;background:#fbfbf7;color:#171a1b;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.x-intro .film-link .duration{font-family:var(--mono);font-size:12px;font-weight:400;opacity:1;color:#c9cbc4}
.x-intro .film-link:hover .play-icon{transform:scale(1.07);background:#fff;color:#171a1b}
.x-intro .trial-link:active,.x-intro .film-link:active{transform:scale(.98)}
.x-unfold.is-live .x-intro .film-link{background:rgba(251,251,247,.06);color:#fbfbf7;box-shadow:inset 0 0 0 1px rgba(251,251,247,.36);backdrop-filter:blur(6px)}
.x-unfold.is-live .x-intro .film-link:hover{background:rgba(251,251,247,.14)}
.x-unfold.is-live .x-intro .film-link .duration{color:#d9dbd4}
main:focus{outline:none}
.x-intro .hero-copy{max-width:none}.x-intro .hero-copy>p{max-width:420px}