/* ==========================================================================
   Popups + website demo players
   ========================================================================== */
.pop{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:clamp(12px,3vw,40px);pointer-events:none}
.pop.show{pointer-events:auto}
.pop-scrim{position:absolute;inset:0;background:rgba(6,9,10,.72);backdrop-filter:blur(10px);opacity:0;transition:opacity .45s}
.pop.show .pop-scrim{opacity:1}
.pop-card{position:relative;width:min(1180px,100%);max-height:calc(100svh - 24px);overflow:auto;scrollbar-width:none;border-radius:28px;background:#0e1314;color:var(--bone);border:1px solid var(--line-d);box-shadow:0 60px 140px rgba(0,0,0,.6);padding:clamp(20px,2.6vw,34px);display:grid;gap:clamp(14px,2vw,22px);opacity:0;transform:translateY(30px) scale(.97);transition:opacity .45s,transform .7s var(--ease)}
.pop-card::-webkit-scrollbar{display:none}
.pop.show .pop-card{opacity:1;transform:none}
.pop-card::before{content:"";position:absolute;inset:-30% -10% auto auto;width:60%;height:70%;background:radial-gradient(closest-side,rgba(212,255,79,.14),transparent);pointer-events:none}
.pop-x{position:absolute;top:16px;right:16px;z-index:5;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(236,230,218,.08);color:var(--bone);transition:background .25s,color .25s,transform .4s var(--ease)}
.pop-x:hover{background:var(--lime);color:var(--ink);transform:rotate(90deg)}
.pop-x .ic{width:18px;height:18px}
.pop-head{position:relative;padding-right:56px;display:grid;gap:10px}
.pop-head h2{font-size:clamp(28px,3.4vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.02}
.pop-head h2 .serif,.pop-story-t h2 .serif{color:var(--lime)}
.pop-head p{color:var(--mute-d);font-size:16px;max-width:62ch}
.pop-foot{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap}
.pop-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pop-later{height:56px;padding:0 20px;border-radius:999px;border:1px solid var(--line-d);color:var(--bone);font-weight:500;font-size:15px;transition:background .25s,color .25s}
.pop-later:hover{background:var(--bone);color:var(--ink)}
.pop-media video{width:100%;border-radius:18px;display:block}
html.pop-open{overflow:hidden}

/* ---------------- demo player (shared) ---------------- */
.pdm{position:relative;display:grid;gap:14px}
.pdm-screen{position:relative;overflow:hidden;background:#0b0e0f;isolation:isolate}
.pdm-scene{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.pdm-scene.on{opacity:1;z-index:2}
.pdm-scene.was{opacity:0;z-index:1;transition-duration:.9s}
.pdm-scene img{width:100%;height:100%;object-fit:cover;object-position:top center;transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(1.035)}
.pdm-scene.on img{animation:pdmKen 4.2s cubic-bezier(.25,.6,.3,1) forwards}
.pdm-scene.zoom img{animation:pdmZoom 2.4s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes pdmKen{from{transform:scale(1.07) translateY(1.2%)}to{transform:scale(1.015) translateY(0)}}
@keyframes pdmZoom{from{transform:scale(1.03)}to{transform:scale(1.11)}}
.pdm.paused .pdm-scene img,.pdm.paused *{animation-play-state:paused!important}
.pdm-cursor{position:absolute;left:50%;top:60%;z-index:6;width:26px;height:26px;margin:-3px 0 0 -4px;opacity:0;pointer-events:none;transition:left 1s cubic-bezier(.6,0,.2,1),top 1s cubic-bezier(.6,0,.2,1),opacity .4s;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.pdm-cursor svg{width:100%;height:100%;transition:transform .15s}
.pdm-cursor.show{opacity:1}
.pdm-cursor.click svg{transform:scale(.82)}
.pdm-ripple{position:absolute;left:3px;top:2px;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--lime);opacity:0;transform:scale(.2)}
.pdm-cursor.click .pdm-ripple{animation:pdmRipple .7s ease-out forwards}
@keyframes pdmRipple{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.4)}}
[data-scene=intro] .pdm-cursor,[data-scene=outro] .pdm-cursor{opacity:0}

/* intro / outro */
.pdm-intro,.pdm-outro{display:grid;place-items:center;text-align:center;background:radial-gradient(60% 70% at 70% 20%,rgba(212,255,79,.2),transparent 60%),radial-gradient(50% 60% at 20% 90%,rgba(63,208,212,.18),transparent 60%),#0b0e0f}
.pdm-intro > div,.pdm-outro > div{display:grid;justify-items:center;gap:14px;padding:6%}
.pdm-mark{width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:28px;transform:scale(0);transition:transform .7s var(--ease) .1s}
.pdm-word{font-size:clamp(34px,6vw,84px);font-weight:600;letter-spacing:-.07em;line-height:1;display:flex}
.pdm-word i{font-style:normal;display:inline-block;opacity:0;transform:translateY(60%);transition:opacity .5s,transform .7s var(--ease);transition-delay:calc(.25s + var(--j) * .045s)}
.pdm-word em{font-style:normal;color:var(--lime);opacity:0;transition:opacity .4s .9s}
.pdm-intro small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);opacity:0;transition:opacity .6s 1.1s}
.pdm-intro.on .pdm-mark{transform:none}
.pdm-intro.on .pdm-word i{opacity:1;transform:none}
.pdm-intro.on .pdm-word em,.pdm-intro.on small{opacity:1}
.pdm-eb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--lime);color:var(--ink)}
.pdm-outro h3{font-size:clamp(26px,4.4vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1.02;max-width:14ch}
.pdm-outro h3 .serif{color:var(--lime)}
.pdm-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:560px}
.pdm-feats span{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid var(--line-d);background:rgba(236,230,218,.05);font-size:13px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(.4s + var(--j) * .12s)}
.pdm-feats .ic{width:13px;height:13px;color:var(--lime)}
.pdm-outro.on .pdm-feats span{opacity:1;transform:none}
.pdm-outro h3,.pdm-outro .pdm-eb{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .8s var(--ease)}
.pdm-outro.on h3,.pdm-outro.on .pdm-eb{opacity:1;transform:none}

/* captions */
.pdm-caps{position:relative;min-height:62px}
.pdm-cap{position:absolute;inset:0 auto auto 0;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--ease);pointer-events:none}
.pdm-cap.on{opacity:1;transform:none;transition-delay:.15s}
.pdm-cap span{grid-row:span 2;font-family:var(--mono);font-size:12px;color:var(--lime);padding-top:6px}
.pdm-cap b{font-size:clamp(18px,1.8vw,24px);font-weight:500;letter-spacing:-.03em}
.pdm-cap small{color:var(--mute-d);font-size:14px}

/* controls */
.pdm-ctrl{display:flex;align-items:center;gap:8px}
.pdm-ctrl .pdm-segs{flex:1;display:flex;gap:4px}
.pdm-segs > *{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(236,230,218,.16);overflow:hidden;padding:0}
.pdm-ctrl .pdm-segs > button{height:18px;background:none}
.pdm-ctrl .pdm-segs > button::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:4px;background:rgba(236,230,218,.16)}
.pdm-segs b{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:4px;background:var(--lime);transform-origin:left;transform:scaleX(0)}
.pdm-ctrl .pdm-segs b{top:7px;height:4px}
.pdm-segs .done b{transform:none}
.pdm-segs .now b{transform:scaleX(var(--p,0))}
.pdm-btn{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(236,230,218,.08);color:var(--bone);transition:background .25s,color .25s}
.pdm-btn:hover{background:var(--lime);color:var(--ink)}
.pdm-btn .ic{width:17px;height:17px}

/* ---------------- landscape: laptop ---------------- */
.pdm-land .pdm-device{position:relative;width:100%;max-width:min(1040px,calc((100svh - 330px) * 1.6 / 0.93));margin:0 auto}
.pdm-lid{position:relative;padding:2.1% 2.1% 2.6%;border-radius:22px 22px 6px 6px;background:linear-gradient(180deg,#2b3032,#16191a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.pdm-cam{position:absolute;top:.75%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#0b0e0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pdm-land .pdm-screen{aspect-ratio:16/10;border-radius:6px}
.pdm-base{position:relative;height:16px;margin:0 -6%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#c9ccd0,#8f9397 60%,#5d6165);box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
.pdm-base span{position:absolute;left:50%;top:0;width:16%;height:6px;margin-left:-8%;border-radius:0 0 8px 8px;background:#6f7377}
.pdm-land .pdm-caps{max-width:1040px;margin:0 auto;width:100%}

/* ---------------- portrait: phone story ---------------- */
.pop.is-story{padding:0}
.pop.is-story .pop-card{width:min(430px,100%);height:min(100svh,calc(100svh - 0px));max-height:none;border-radius:0;padding:0;gap:0;display:flex;flex-direction:column;border:0;background:#0b0e0f}
@media (min-width:600px){.pop.is-story{padding:20px}.pop.is-story .pop-card{height:min(880px,calc(100svh - 40px));border-radius:34px;border:1px solid var(--line-d)}}
.pop.is-story .pop-card::before{display:none}
.pop.is-story .pop-x{top:calc(22px + env(safe-area-inset-top));right:14px;width:40px;height:40px;background:rgba(11,14,15,.55);backdrop-filter:blur(8px)}
.pop.is-story .pop-media{flex:1;min-height:0;display:flex}
.pdm-port{flex:1;min-height:0;display:flex;flex-direction:column;gap:0}
.pdm-phone{position:relative;flex:1;min-height:0;display:flex}
.pdm-port .pdm-screen{flex:1;min-height:0}
.pdm-story-top{position:absolute;left:0;right:0;top:0;z-index:7;padding:calc(10px + env(safe-area-inset-top)) 12px 30px;background:linear-gradient(rgba(11,14,15,.65),transparent)}
.pdm-story-top .pdm-segs{display:flex;gap:4px;padding-right:0}
.pdm-story-top .pdm-segs > i{height:3px}
.pdm-port .pdm-caps{position:absolute;left:0;right:0;bottom:0;z-index:7;min-height:0;padding:70px 18px 16px;background:linear-gradient(transparent,rgba(11,14,15,.92) 55%);pointer-events:none}
.pdm-port .pdm-cap{position:absolute;left:18px;right:18px;bottom:16px;inset:auto 18px 16px 18px}
.pdm-port .pdm-cap b{font-size:22px}
.pdm-tap{position:absolute;top:60px;bottom:120px;z-index:6;width:35%;background:none;-webkit-tap-highlight-color:transparent}
.pdm-tap.prev{left:0}.pdm-tap.next{right:0;width:65%}
.pdm-port .pdm-ctrl{position:absolute;right:12px;top:calc(26px + env(safe-area-inset-top));z-index:8;gap:6px;margin-right:52px}
.pdm-port .pdm-btn{width:40px;height:40px;background:rgba(11,14,15,.55);backdrop-filter:blur(8px)}
.pop.is-story .pop-foot{flex:none;display:grid;gap:12px;padding:14px 18px calc(16px + env(safe-area-inset-bottom));background:#0b0e0f;border-top:1px solid var(--line-d)}
.pop-story-t{display:grid;gap:4px}
.pop-story-t .eyebrow{font-size:10.5px}
.pop-story-t h2{font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.pop.is-story .pop-acts{display:grid;grid-template-columns:1fr auto;gap:8px}
.pop.is-story .pop-cta{height:52px;justify-content:space-between}
.pop.is-story .pop-later{height:52px;padding:0 16px;font-size:14px}
.pdm-port .pdm-intro .pdm-word{font-size:44px}

@media (max-width:760px){
  .pop-card{border-radius:22px;padding:18px}
  .pop-head{padding-right:46px}
  .pop-x{top:12px;right:12px;width:38px;height:38px}
  .pop-foot .pop-acts{width:100%}
  .pop-foot .pop-cta{flex:1;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.pdm *{transition:none!important;animation:none!important}}

/* ---------------- video (the website film) ---------------- */
.pvid{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line-d)}
.pvid video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;cursor:pointer}
.pvid-ui{position:absolute;left:14px;right:14px;bottom:16px;display:flex;align-items:center;gap:8px;z-index:2}
.pvid-snd{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:999px;background:rgba(11,14,15,.66);backdrop-filter:blur(10px);color:var(--bone);font-size:14px;font-weight:500;border:1px solid rgba(236,230,218,.18);transition:background .25s,color .25s}
.pvid-snd[aria-pressed="false"]{background:var(--lime);color:var(--ink);border-color:var(--lime);animation:pvPulse 2.4s infinite}
@keyframes pvPulse{0%{box-shadow:0 0 0 0 rgba(212,255,79,.45)}70%,100%{box-shadow:0 0 0 14px rgba(212,255,79,0)}}
.pvid-snd .ic,.pvid-btn .ic{width:18px;height:18px}
.pvid-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(11,14,15,.66);backdrop-filter:blur(10px);color:var(--bone);border:1px solid rgba(236,230,218,.18)}
.pvid-btn:hover{background:var(--lime);color:var(--ink)}
.pvid-btn[data-v=play]{margin-left:auto}
.pvid-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(236,230,218,.14);z-index:2}
.pvid-bar i{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}
.pop.is-story .pvid{flex:1;min-height:0;border-radius:0;box-shadow:none;display:flex}
.pop.is-story .pvid video{aspect-ratio:auto;height:100%;width:100%;object-fit:cover}
.pop.is-story .pvid-ui{top:calc(18px + env(safe-area-inset-top));bottom:auto;right:64px}
.pop.is-story .pvid-btn[data-v=play]{margin-left:auto}
@media (prefers-reduced-motion:reduce){.pvid-snd{animation:none}}
@media (max-height:820px) and (min-width:761px){.pop-head p{display:none}.pop-card{gap:12px;padding:20px 24px}.pop-head h2{font-size:clamp(24px,2.6vw,36px)}.pvid video{max-height:calc(100svh - 230px);width:auto;margin:0 auto}.pvid{display:flex;justify-content:center}}
.pop.is-story .pop-acts{grid-template-columns:1fr;gap:8px}
.pop.is-story .pop-later{height:46px;width:100%}
/* story footer: everything centred on one axis */
.pop.is-story .pop-story-t{justify-items:center;text-align:center}
.pop.is-story .pop-story-t h2{text-wrap:balance}
.pop.is-story .pop-cta{justify-content:center;padding:0 60px}
.pop.is-story .pop-cta i{position:absolute;right:7px;top:0;bottom:0;margin:auto 0}
.pop.is-story .pvid video{object-position:50% 0}
.pop.is-story .pop-foot{justify-content:center}