/* Isolated prototype: overrides to the copied landing only. */
.header{background:#18191bd9;backdrop-filter:blur(18px)}
.prototype-note{position:fixed;bottom:16px;left:18px;z-index:55;background:#202123cf;backdrop-filter:blur(10px);color:#ffffffb3;border:1px solid #ffffff25;border-radius:4px;padding:6px 9px;font-size:9px;letter-spacing:.13em;pointer-events:none}
.video-hero{position:relative;isolation:isolate;padding:0;background:#242527;overflow:hidden;min-height:690px;height:calc(100svh - 76px);max-height:1050px}
.hero-media,.film-slot,.film-shade{position:absolute;inset:0;pointer-events:none}
.hero-media{z-index:0;overflow:hidden}
.film-slot{opacity:0;transition:opacity .65s ease;overflow:hidden}
.film-slot.is-active{opacity:1}
.film-ambient{position:absolute;inset:0;background:#777673!important;opacity:1}
.film-frame{position:absolute;right:4%;top:0;height:100%;aspect-ratio:var(--ratio,.8);overflow:hidden;mask-image:none}
.film-frame video{position:absolute;left:0;top:var(--top,-20%);width:100%;height:var(--height,140%);max-width:none;object-fit:fill}
.film-shade{background:linear-gradient(90deg,#151618 0%,#151618eb 24%,#15161870 43%,transparent 62%),linear-gradient(0deg,#15161866,transparent 16%)}
.hero-layout{position:relative;z-index:1;height:100%;display:flex;align-items:center;padding-top:45px;padding-bottom:110px}
.video-hero .hero-intro{text-align:left;margin:0;max-width:670px}
.video-hero .hero-intro .eyebrow{justify-content:flex-start;color:#d2d0ca;margin-bottom:30px;font-size:11px;letter-spacing:.16em}
.video-hero h1{font-size:clamp(48px,5.45vw,80px);line-height:1.04;letter-spacing:-.058em;text-wrap:nowrap}
.video-hero h1>span{color:#dbd8d2}
.video-hero .hero-intro p{max-width:440px;font-size:16px;line-height:1.75;color:#c8c7c5;margin:26px 0 30px}
.video-hero .desktop-br{display:none}
.video-hero .hero-intro>.cta{border-radius:3px;min-height:54px;padding-inline:28px}
.video-hero .hero-intro>.micro{font-size:11px;margin-top:15px;color:#b3b1ae}
.hero-bottom{position:absolute;z-index:2;bottom:29px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero-scroll{font-size:11px;letter-spacing:.04em;color:#dedbd6;display:flex;align-items:center;gap:25px}
.hero-scroll span{font-size:23px;font-weight:400}
.film-controls{display:flex;align-items:center;gap:18px;color:#fff}
.film-count{font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.film-dots{display:flex;gap:7px}
.film-dots button{width:33px;height:32px;background:none;border:0;padding:14px 0;position:relative}
.film-dots button:before{content:'';position:absolute;left:0;right:0;top:14px;height:2px;background:#ffffff36}
.film-dots button span{position:relative;display:block;width:var(--progress,0%);height:2px;background:#fff}
.film-pause{border:1px solid #ffffff40;background:#ffffff08;color:white;width:34px;height:34px;border-radius:50%;font-size:13px;display:grid;place-items:center;padding:0}
.buyer-section{padding:90px 0 0;background:#151618;color:white;scroll-margin-top:75px}
.buyer-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:35px}
.buyer-heading .eyebrow{color:#94959b;font-size:10px;margin-bottom:20px;letter-spacing:.16em}
.buyer-heading h2{font-size:clamp(34px,4vw,54px);line-height:1.06}
.buyer-heading p{font-size:15px;line-height:1.7;color:#a6a7ad}
.buyer-section .showcase{margin-top:0}
.prototype-toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:#fff;color:#222;padding:15px 22px;border-radius:8px;box-shadow:0 8px 45px #0003;z-index:200;width:max-content;max-width:calc(100% - 32px);font-size:14px}
@media(min-width:1500px){.film-frame{right:10%}}
@media(max-width:1000px){.video-hero{min-height:670px}.video-hero h1{font-size:58px}.video-hero .hero-intro{max-width:560px}.film-frame{right:-10%}.film-shade{background:linear-gradient(90deg,#151618e6,#151618a6 25%,#15161833 52%,transparent 70%),linear-gradient(0deg,#15161866,transparent 16%)}.film-controls{gap:12px}}

@media(prefers-reduced-motion:reduce){.film-slot{transition:none}}

.header{background:#151618}



/* Keep the film clear; support contrast on the copy itself. */
.video-hero h1,.video-hero .hero-intro p,.video-hero .eyebrow,.video-hero .micro,.hero-bottom{text-shadow:0 2px 12px #0008}


/* Render video frames on the page surface for embedded-browser compatibility. */
.film-frame video{opacity:0}
.film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:none;opacity:1}








/* Mobile: one viewport, edge-to-edge moving video, copy over the film. */
@media(max-width:650px){
  html,body{overflow-x:clip}
  .header{position:absolute;inset:0 0 auto;z-index:50;background:linear-gradient(180deg,#15161885,transparent);border:0;backdrop-filter:none}
  .header:has(.menu[aria-expanded="true"]){background:#151618f5}
  .nav{height:64px;padding-top:env(safe-area-inset-top)}
  
  .menu{margin-left:auto;width:44px;height:44px;flex-shrink:0;background:#15161826}
  .video-hero{height:100vh;height:100svh;min-height:0;max-height:none;padding:0;background:#151618}
  .hero-media{inset:0;width:100%;height:100%;background:#777673}
  .film-frame{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;mask-image:none}
  .film-canvas{width:100%;height:100%;object-fit:cover;object-position:center}
  .film-shade{background:linear-gradient(0deg,#151618ba 0%,#15161870 28%,#1516181a 58%,transparent 74%)}
  .hero-layout{height:100%;display:flex;align-items:flex-end;padding:calc(80px + env(safe-area-inset-top)) 0 calc(84px + env(safe-area-inset-bottom))}
  .video-hero .hero-intro{width:100%;max-width:480px;text-align:left;margin:0 auto}
  .video-hero .hero-intro .eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:12px;color:#fff}
  .video-hero h1{font-size:clamp(30px,8.9vw,46px);line-height:1.07;text-wrap:balance;letter-spacing:-.055em;color:#fff}
  .video-hero h1>span{color:#fff}
  .video-hero .hero-intro p{font-size:14px;line-height:1.55;max-width:390px;margin:16px 0 20px;color:#fff}
  .video-hero .hero-intro>.cta{width:100%;min-height:50px;font-size:14px}
  .video-hero .hero-intro>.micro{color:#e1dfdb;font-size:10px;line-height:1.5;text-align:center;margin-top:10px}
  .hero-bottom{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));height:44px;justify-content:center}
  .hero-scroll{display:none}
  .film-controls{width:100%;max-width:370px;gap:8px;justify-content:space-between}
  .film-count{font-size:10px;flex-shrink:0;letter-spacing:.04em}
  .film-dots{flex:1;justify-content:center;gap:0}
  .film-dots button{width:44px;max-width:20%;height:44px;padding:21px 5px}
  .film-dots button:before{top:21px;left:5px;right:5px}
  .film-pause{width:44px;height:44px;flex-shrink:0;font-size:17px;background:#15161833}
  .buyer-section{padding-top:42px;border-top:1px solid #ffffff17}
  .buyer-heading{display:block;margin-bottom:28px}
  .buyer-heading .eyebrow{font-size:9px;margin-bottom:16px}
  .buyer-heading h2{font-size:34px}
  .buyer-heading p{margin-top:20px;font-size:14px}
  .prototype-note{position:absolute;top:70px;bottom:auto;left:16px;z-index:3;background:#15161866;font-size:7px;padding:3px 5px}
}
@media(max-width:350px){
  .film-count{display:none}
  .film-controls{justify-content:center;gap:7px}
  .film-dots{flex:0 0 220px;width:220px}
  .film-dots button{flex:0 0 44px;width:44px;max-width:none}
}
@media(max-width:650px) and (max-height:650px){
  .hero-layout{padding-bottom:70px}
  .video-hero .hero-intro .eyebrow{margin-bottom:9px;font-size:8px}
  .video-hero h1{font-size:clamp(27px,8.3vw,38px)}
  .video-hero .hero-intro p{font-size:12px;line-height:1.45;margin:11px 0 13px}
  .video-hero .hero-intro>.cta{min-height:44px}
  .video-hero .hero-intro>.micro{font-size:9px;margin-top:8px}
  .hero-bottom{bottom:10px}
}

/* The first screen is a clean video introduction, without CTA or player chrome. */
.video-hero .hero-intro>.cta,.video-hero .hero-bottom{display:none}
@media(max-width:650px){
  .hero-layout{padding-bottom:calc(38px + env(safe-area-inset-bottom))}
  .video-hero .hero-intro>.micro{text-align:left;margin-top:14px}
}
@media(max-width:650px) and (max-height:650px){
  .hero-layout{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* Editorial composition: a quiet, centered caption beneath the model. */
@media(max-width:650px){
  .film-canvas{object-position:center top}
  .hero-layout{width:calc(100% - 40px);padding-bottom:max(30px,5.5svh)}
  .video-hero .hero-intro{max-width:520px;margin:0 auto;text-align:center}
  .video-hero .hero-intro .eyebrow{justify-content:center;gap:8px;margin-bottom:15px;font-size:8px;line-height:1.4;letter-spacing:.15em;color:#e3dfd7;text-shadow:none}
  .video-hero .hero-intro .red-line{width:14px;background:#d7b8a5}
  .video-hero h1{font-size:clamp(30px,8.4vw,45px);font-weight:400;line-height:1.07;letter-spacing:-.045em;text-wrap:initial;text-shadow:0 1px 14px #0003}
  .video-hero h1>span{display:inline-block;color:#fff}
  .video-hero .hero-intro p{max-width:360px;margin:18px auto 0;font-size:13px;line-height:1.65;font-weight:400;color:#eeeae5;text-wrap:pretty;text-shadow:0 1px 8px #0004}
  .film-shade{background:linear-gradient(0deg,#111214c7 0%,#1112148c 18%,#11121433 36%,transparent 56%)}
}
@media(max-width:350px){
  .hero-layout{width:calc(100% - 32px)}
  .video-hero h1{font-size:28px}
  .video-hero .hero-intro p{font-size:12px;line-height:1.6;margin-top:15px}
  .video-hero .hero-intro .eyebrow{font-size:7px;letter-spacing:.12em;margin-bottom:12px}
}
@media(max-width:650px) and (max-height:650px){
  .hero-layout{padding-bottom:24px}
  .video-hero .hero-intro .eyebrow{margin-bottom:10px}
  .video-hero h1{font-size:clamp(28px,7.7vw,39px)}
  .video-hero .hero-intro p{margin-top:13px;font-size:12px;line-height:1.55}
}

.video-hero h1>.hero-ai{display:inline-block;font-size:.62em;line-height:1.25;letter-spacing:-.025em;margin-top:.25em;color:#e6e1d9}

/* A single headline composition, without the explanatory paragraph. */
.video-hero h1>.hero-ai{font-size:.5em;line-height:1.3;letter-spacing:.015em;margin-top:.55em;font-weight:400}
@media(max-width:650px){
  .hero-layout{padding-bottom:max(48px,8svh)}
  .video-hero .hero-intro{max-width:520px}
  .video-hero .hero-intro .eyebrow{margin-bottom:18px;font-size:8px;letter-spacing:.14em}
  .video-hero h1{line-height:1.08}
  .video-hero h1>.hero-ai{font-size:.52em;letter-spacing:.025em;margin-top:.65em;color:#e9e4dc}
  .film-shade{background:linear-gradient(0deg,#111214ad 0%,#11121466 17%,#1112141f 34%,transparent 52%)}
}
@media(max-width:650px) and (max-height:650px){
  .hero-layout{padding-bottom:34px}
  .video-hero .hero-intro .eyebrow{margin-bottom:14px}
}

/* QR story: retain the landing's type scale and quiet secondary text. */
.buyer-heading{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(220px,.85fr);gap:48px;align-items:end;margin-bottom:40px}
.buyer-heading h2{font-size:clamp(34px,3.7vw,52px);line-height:1.1;letter-spacing:-.045em;text-wrap:balance;max-width:850px}
.buyer-heading h2 span{color:#a9aaaf}
.buyer-heading>p{font-size:17px;line-height:1.65;max-width:280px;padding-bottom:4px;margin:0;color:#a6a7ad}
.buyer-heading>p strong{font-weight:400;color:#f0efec}
@media(max-width:900px){
  .buyer-heading{grid-template-columns:1fr;gap:22px}
  .buyer-heading>p{max-width:380px;font-size:16px;padding:0}
}
@media(max-width:650px){
  .buyer-heading{gap:19px;margin-bottom:30px}
  .buyer-heading h2{font-size:clamp(28px,7.5vw,38px);line-height:1.12;letter-spacing:-.04em}
  .buyer-heading .eyebrow{margin-bottom:18px}
  .buyer-heading>p{max-width:330px;font-size:15px;line-height:1.65;margin:0}
}
.buyer-heading h2 span{display:block;margin-top:.1em}
@media(max-width:650px){html{scroll-padding-top:0}.buyer-section{scroll-margin-top:0}}

/* Persistent black navigation above the fullscreen hero and all following sections. */
.header{position:fixed;top:0;left:0;right:0;bottom:auto;background:#151618;backdrop-filter:none;z-index:50;border-bottom:1px solid #ffffff14}
@media(min-width:651px){body{padding-top:76px}}
@media(max-width:650px){
  .header,.header:has(.menu[aria-expanded="true"]){position:fixed;background:#151618}
  .nav{height:calc(64px + env(safe-area-inset-top))}
  .mobile-menu{max-height:calc(100svh - 64px - env(safe-area-inset-top));overflow-y:auto;background:#151618}
  html{scroll-padding-top:calc(64px + env(safe-area-inset-top))}
  .buyer-section{scroll-margin-top:0}
}
@media(min-width:651px) and (max-width:900px){body{padding-top:69px}}

/* Fade the pinned navigation in across the first screen. */
.header{--header-progress:0;background:rgba(21,22,24,var(--header-progress));border-bottom-color:rgba(255,255,255,calc(var(--header-progress)*.08));backdrop-filter:none}
.header:has(.menu[aria-expanded="true"]){background:#151618;border-bottom-color:#ffffff14}
@media(max-width:650px){.header{background:rgba(21,22,24,var(--header-progress))}}
@media(min-width:651px){body{padding-top:0}.video-hero{height:100svh}}

.video-hero .hero-intro .red-line{background:#b26052}

.video-hero h1>.hero-ai{font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin-top:.12em}

/* Compact introduction: the product demo carries the visual emphasis. */
.buyer-section{padding-top:64px}
.buyer-heading-compact{grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:48px;align-items:center;margin-bottom:30px}
.buyer-heading-compact .eyebrow{font-size:10px;letter-spacing:.13em;margin-bottom:12px;color:#909298}
.buyer-heading-compact h2{font-size:clamp(27px,2.8vw,36px);line-height:1.15;letter-spacing:-.04em;text-wrap:balance}
.buyer-explanation p{font-size:15px;line-height:1.65;color:#b2b3b8;margin:0}
.buyer-explanation p+p{margin-top:8px;color:#91939a;font-size:13px}
.buyer-explanation strong{font-weight:400;color:#d8d9dc}
@media(max-width:900px){.buyer-heading-compact{grid-template-columns:1fr;gap:17px}.buyer-explanation{max-width:500px}}
@media(max-width:650px){
  .buyer-section{padding-top:34px}
  .buyer-heading-compact{gap:15px;margin-bottom:24px}
  .buyer-heading-compact .eyebrow{font-size:9px;margin-bottom:10px}
  .buyer-heading-compact h2{font-size:28px;line-height:1.18;text-wrap:initial;letter-spacing:-.04em}
  .buyer-explanation p{font-size:14px;line-height:1.6}
  .buyer-explanation p+p{font-size:12px;line-height:1.6;margin-top:8px}
}

/* Rounded launch action remains visible in the fixed header on phones. */
.header .nav>.cta{display:inline-flex;border-radius:999px;white-space:nowrap;flex-shrink:0}
@media(max-width:650px){.header .nav>.cta{padding-inline:13px}.header .menu{margin-left:0}}

/* Reference variant: bottom-left typography and supporting QR description. */
.video-hero .hero-layout{align-items:flex-end;padding-top:100px;padding-bottom:14px}
.video-hero .hero-intro{width:100%;max-width:920px;margin:0;text-align:left}
.video-hero .hero-intro .eyebrow{justify-content:flex-start;font-weight:600;font-size:12px;letter-spacing:.16em;margin-bottom:32px;color:#eee}
.video-hero h1{font-size:clamp(44px,5.8vw,88px);font-weight:400;line-height:1.06;letter-spacing:-.055em;text-wrap:initial;color:#f7f7f5}
.video-hero h1>span{color:#c9c7c1}
.video-hero h1>.hero-ai{font:inherit;letter-spacing:inherit;color:#f7f7f5;margin-top:0}
.video-hero .hero-intro .hero-description{max-width:760px;margin:32px 0 0;font-size:clamp(17px,1.9vw,26px);line-height:1.5;color:#e2e2df;font-weight:400;text-wrap:pretty}
@media(max-width:650px){
 .video-hero .hero-layout{width:calc(100% - 40px);padding-top:88px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
 .video-hero .hero-intro{max-width:none;text-align:left;margin:0}
 .video-hero .hero-intro .eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:24px;gap:10px}
 .video-hero .hero-intro .red-line{width:18px}
 .video-hero h1{font-size:clamp(27px,8.5vw,53px);line-height:1.08;letter-spacing:-.055em}
 .video-hero .hero-intro .hero-description{font-size:15px;line-height:1.5;margin:22px 0 0;max-width:440px}
 .film-shade{background:linear-gradient(0deg,#111214d9 0%,#1112148c 28%,#11121426 55%,transparent 75%)}
}
@media(max-width:650px) and (max-height:650px){
 .video-hero .hero-layout{padding-bottom:34px}
 .video-hero .hero-intro .eyebrow{margin-bottom:16px}
 .video-hero .hero-intro .hero-description{font-size:13px;margin-top:16px}
}

/* Freeze mobile geometry across browser toolbar resize events. */
@media(max-width:650px){
 .video-hero{height:var(--stable-mobile-height,100svh)}
 .video-hero .hero-layout{padding-bottom:var(--stable-mobile-bottom,calc(40px + env(safe-area-inset-bottom)))}
}