@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600.woff2) format('woff2');
}

:root{color-scheme:light;--ink:#1a1a1a;--muted:#686868;--accent:#087a91;--line:#e5e5e5;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{min-width:320px;background:#fff}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-60px;left:16px;z-index:5;padding:12px 18px;border-radius:8px;background:var(--ink);color:white}.skip-link:focus{top:12px}
.header{position:relative;display:flex;justify-content:center;align-items:center;width:100%;max-width:1440px;margin:0 auto;padding:29px 40px 0}
.brand{display:block;padding:23px}.brand img{display:block;width:330px;height:auto}
.language{position:absolute;right:48px;top:44px;display:flex;gap:2px;align-items:center;color:#a0a0a0;font-size:12px}
.language button{padding:10px 8px;border:0;background:transparent;color:#767676;font-size:12px;font-weight:500;cursor:pointer;min-height:40px;min-width:34px;border-radius:4px}
.language button[aria-pressed="true"]{color:var(--ink)}.language button:hover{color:var(--accent)}
main{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:21px 24px 45px}
h1{margin:0;max-width:100%;font-size:clamp(30px,3.1vw,42px);font-weight:600;line-height:1.2;letter-spacing:-.04em;text-wrap:balance}
.subtitle{margin:12px 0 0;max-width:900px;color:#656565;font-size:clamp(23px,2.2vw,30px);font-weight:400;line-height:1.35;letter-spacing:-.03em;text-wrap:balance}
.demo{width:min(920px,100%);margin:34px 0 0}
.video-frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#000;isolation:isolate;box-shadow:0 0 0 1px #00000008,0 18px 50px -22px #00000040}
video{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;background:#000}
.video-frame:fullscreen{width:100vw;height:100vh;border-radius:0;aspect-ratio:auto}.video-frame:fullscreen video{object-fit:contain}
.video-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff24;pointer-events:none}.video-progress span{display:block;width:0;height:100%;background:#0b95b0}
.film-summary{display:grid;grid-template-columns:88px minmax(0,1fr) 88px;align-items:center;gap:16px;margin-top:21px}
.film-copy{grid-column:2;text-align:center}
.film-title{margin:0;font-size:25px;font-weight:500;letter-spacing:-.035em;line-height:1.3}
.video-transport{grid-column:3;display:flex;justify-self:end;gap:8px}
.video-transport button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #dedede;border-radius:50%;color:var(--ink);background:white;cursor:pointer;transition:background .2s,border-color .2s}
.video-transport button:hover{background:#f4f4f4;border-color:#bbb}.video-toggle .icon-pause{display:none}.video-toggle.is-playing .icon-play{display:none}.video-toggle.is-playing .icon-pause{display:block}
.downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:100%;margin-top:24px}
/* Store badges: official artwork, never altered; App Store first; both at the same height
   (Apple: at least 40px on screen, clear space a quarter of the height). A store that isn't
   live shows a quiet "Coming soon" outline at the same size instead of a badge. */
:root{--badge-h:48px}
.store{display:flex}
.store-badge{display:none;border-radius:8px;transition:transform .2s}
.store-badge:hover{transform:translateY(-1px)}.store-badge:active{transform:translateY(0)}
.store-badge img{display:block;height:var(--badge-h);width:auto}
.store.is-live .store-badge{display:block}.store.is-live .store-soon{display:none}
.store-soon{display:flex;flex-direction:column;justify-content:center;gap:3px;height:var(--badge-h);min-width:150px;padding:0 17px;border:1px solid #dedede;border-radius:9px;text-align:left;cursor:default}
.store-status{font-size:10px;line-height:1.2;font-weight:400;color:var(--muted)}.store-name{font-size:17px;line-height:1.15;font-weight:500;letter-spacing:-.025em;white-space:nowrap}
.footer{display:grid;grid-template-columns:160px minmax(0,1fr) auto;align-items:center;gap:32px;width:calc(100% - 96px);max-width:1120px;margin:0 auto;padding:30px 0 34px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.endorsement{display:block;justify-self:start;padding:4px 0}.endorsement img{display:block;width:122px;height:auto}
.use-note{margin:0;text-align:center;line-height:1.55}.use-note p{margin:0}.use-note .use-title{margin-bottom:5px;color:#343434;font-size:15px;font-weight:500}
.contact{justify-self:end;display:flex;flex-direction:column;gap:7px;padding:8px 0}.contact-title{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--ink);font-size:19px;font-weight:500;letter-spacing:-.025em}.contact-email{font-size:13px;color:#595959}.footer a:hover .contact-title,.footer a:hover .contact-email{color:var(--accent)}
@media(min-width:1600px) and (min-height:1000px){.header{padding-top:45px}main{padding-top:28px}.demo{width:980px;margin-top:40px}}
@media(max-width:850px){.footer{grid-template-columns:130px minmax(0,1fr);gap:24px}.use-note{text-align:right}.contact{grid-column:1/-1;justify-self:center;align-items:center}.contact-title{justify-content:center}}
@media(max-width:700px){.header{padding:50px 14px 0}.brand{padding:20px}.brand img{width:290px;max-width:calc(100vw - 68px)}.language{top:10px;right:16px}main{padding:19px 20px 36px}h1{font-size:32px;line-height:1.22;letter-spacing:-.04em;max-width:520px}.subtitle{font-size:24px;line-height:1.35;max-width:470px;margin-top:13px}.demo{width:min(460px,100%);margin-top:28px}.video-frame,video{aspect-ratio:3/4}.video-frame{border-radius:14px}.film-summary{grid-template-columns:1fr;gap:12px;margin-top:18px}.film-copy{grid-column:1}.film-title{font-size:22px}.video-transport{grid-column:1;justify-self:center}.video-transport button{width:36px;height:36px}.downloads{margin-top:24px}.footer{width:calc(100% - 40px);grid-template-columns:1fr;justify-items:center;gap:25px;padding:28px 0 32px}.endorsement{justify-self:center}.endorsement img{width:120px}.use-note{text-align:center}.use-note .use-title{font-size:15px}.contact{grid-column:auto}.contact-title{font-size:20px}.contact-email{font-size:14px}}
@media(max-width:380px){h1{font-size:29px}.subtitle{font-size:22px}.brand img{width:260px}.film-title{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Offline export: fluid sizing, comfortable touch targets and phone safe areas. */
html{min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;min-height:100vh;min-height:100svh}
.header,main,.footer,.demo,.film-copy,.use-note{min-width:0}
.brand{max-width:100%}
.brand img{max-width:100%}
h1,.subtitle,.film-title,.use-note,.contact-email{overflow-wrap:break-word}
.language button{min-width:44px;min-height:44px;touch-action:manipulation}
.video-transport button{width:44px;height:44px;touch-action:manipulation}
.film-summary{grid-template-columns:96px minmax(0,1fr) 96px}
.footer{padding-bottom:max(34px,env(safe-area-inset-bottom))}
@media(max-width:700px){
  .header{padding:calc(52px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
  .brand{width:min(330px,100%);padding:20px}
  .brand img{width:100%;max-width:100%;height:auto}
  .language{top:calc(6px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
  main{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  h1{font-size:clamp(28px,8.2vw,32px);max-width:100%}
  .subtitle{font-size:clamp(21px,6.2vw,24px);max-width:min(470px,100%)}
  .demo{width:min(460px,100%)}
  .film-summary{grid-template-columns:minmax(0,1fr)}
  .film-title{font-size:clamp(20px,5.65vw,22px)}
  .video-transport button{width:44px;height:44px}
  .footer{width:auto;max-width:none;margin-left:max(20px,env(safe-area-inset-left));margin-right:max(20px,env(safe-area-inset-right));padding-bottom:max(32px,env(safe-area-inset-bottom))}
  .contact{max-width:100%;min-height:44px}
}
@media(max-width:360px){
  :root{--badge-h:40px}
  .store-soon{min-width:120px;padding:0 12px}
  .store-name{font-size:15px}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .header{justify-content:space-between;padding-top:calc(8px + env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  .brand{width:270px;max-width:calc(100% - 108px);min-width:0;padding:12px 20px}
  .brand img{width:230px;max-width:100%}
  .language{position:static;flex:none}
  main{padding-top:12px;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  .demo{width:min(680px,100%);margin-top:22px}
  .video-frame{height:75vh;height:75svh;aspect-ratio:auto}
  .video-frame video{height:100%;width:100%;object-fit:contain}
  .video-frame:fullscreen{height:100vh}
}