/* Device-focused layout with a continuous brand background. */
body{background:#030b25;position:relative;isolation:isolate}
body:before{position:absolute;height:1500px;inset:0 0 auto;background:url('assets/stars.png') top center/cover no-repeat;mask-image:linear-gradient(#000 0%,#000 35%,transparent 100%);opacity:.55;z-index:-1}
.hero{grid-template-columns:1.15fr .85fr;gap:60px;padding-block:64px 80px;min-height:700px}
.hero-art{width:100%;max-width:340px;justify-self:center;filter:drop-shadow(0 28px 35px #0009)}
.device{position:relative;width:100%;aspect-ratio:.445;overflow:hidden}
.device img{position:absolute;max-width:none;width:165%;height:auto;left:-60%;top:-23%;border:0;border-radius:0;box-shadow:none;clip-path:polygon(49% 17.7%,87% 18.3%,92% 19.2%,95% 21.8%,96% 25%,89% 82%,87% 87%,84% 89.7%,78% 90%,42% 87.5%,38% 85.5%,37% 82%,44% 24%,46% 20%)}
.hero-art figcaption{display:none}
.device img[src$="signup.png"]{clip-path:polygon(51% 19.5%,87% 20%,92% 21%,95% 23%,96% 26%,89% 84%,86% 91%,80% 92%,42% 89%,38% 86%,38% 82%,45% 25%,48% 21%)}
.section-heading{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr);align-items:center;gap:64px;margin-bottom:40px}
.section-heading h2{font-size:clamp(30px,3.1vw,42px);letter-spacing:-1.2px}
.section-heading>p{max-width:340px;justify-self:end}
.features{padding-block:65px 75px}
.feature-list{gap:32px}.feature-list article{background:#0b163480;border:1px solid #829aca25;border-radius:14px;padding:26px}
.feature-list h3{font-size:20px}.feature-list p{margin-bottom:0}
.play{background:#080b12;color:white;border:1px solid #8b92a6;border-radius:8px;padding:11px 18px;gap:12px;box-shadow:0 6px 20px #0003;min-height:60px}
.play:hover{background:#171e2c;color:white;transform:translateY(-2px)}
.play span{font-size:22px;font-weight:550;letter-spacing:-.4px}.play small{font-size:9px;font-weight:500;letter-spacing:1.3px}.play-icon{flex:none}
.gallery{gap:40px}.gallery figure{padding:24px 20px;background:radial-gradient(ellipse at 50% 45%,#29378b66,transparent 70%),#070f29;border:1px solid #ffffff14;border-radius:18px}
.gallery .device{max-width:260px;margin:auto}.gallery figcaption{font-size:14px;justify-content:center;text-align:center;padding-top:23px}
.gallery img{border:0;transform:none}.showcase{background:#08112b;padding-block:70px}
.companion{padding-block:75px}.closing{margin-bottom:55px}
@media(max-width:1000px){.hero{gap:30px;min-height:620px}.hero-art{max-width:290px}h1{font-size:clamp(48px,6.5vw,65px);letter-spacing:-2.8px}.section-heading{gap:32px;grid-template-columns:1.3fr 1fr}.feature-list{gap:16px}.feature-list article{padding:20px}.gallery{gap:18px}.gallery figure{padding:16px 10px}.gallery figcaption{font-size:12px;gap:8px}}
@media(max-width:760px){.section-heading{grid-template-columns:1fr;gap:18px}.section-heading>p{justify-self:start;max-width:500px;margin:0}.feature-list{grid-template-columns:1fr}.feature-list article{padding:24px}.feature-list h3 br{display:none}.gallery{grid-template-columns:1fr;max-width:420px;gap:24px}.gallery figure{padding:28px 24px}.gallery .device{max-width:230px}.gallery figcaption{font-size:15px}.companion{gap:28px}.actions{gap:20px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.nav{height:76px}.hero{grid-template-columns:1fr;min-height:0;padding-block:38px 48px;gap:32px;text-align:center}.hero-copy{max-width:440px;margin:auto}.hero h1{font-size:clamp(43px,11.8vw,62px);line-height:1.06;letter-spacing:-2.3px;margin:20px 0}.eyebrow{font-size:9px;letter-spacing:1.4px}.lead{font-size:19px;line-height:1.5;margin-bottom:14px}.intro{font-size:14px;line-height:1.75;margin:0 auto;max-width:330px}.actions{justify-content:center;margin-top:23px;gap:18px}.actions .text-link{display:none}.hero-note{margin-top:15px;font-size:10px}.hero-art{max-width:230px;width:70%;margin:auto}.features{padding-block:40px 45px}.section-heading{gap:15px;margin-bottom:25px}.section-heading h2{font-size:30px;line-height:1.2;letter-spacing:-.8px}.section-heading>p{font-size:14px;line-height:1.7}.feature-list{gap:14px}.feature-list article{padding:22px}.feature-list h3{font-size:19px;margin-block:12px 9px}.feature-list p{font-size:14px}.showcase{padding-block:42px}.gallery figure{padding:22px 18px}.gallery .device{max-width:210px}.companion{padding-block:45px;grid-template-columns:1fr}.viti-copy h2{font-size:29px}.closing{padding:35px 18px 40px;margin-bottom:35px}.closing h2{font-size:36px}.closing .play{margin-top:0}footer{padding-block:24px}.play{min-height:56px;padding:10px 17px}.play span{font-size:21px}}

/* Preserve the complete promotional artwork below the hero. */
.gallery{gap:24px}
.gallery figure{padding:0;background:none;border:0;border-radius:0}
.gallery img{position:static;width:100%;height:auto;max-width:100%;clip-path:none;border:1px solid #ffffff18;border-radius:12px;transform:none}
.gallery figcaption{justify-content:flex-start;text-align:left;padding-top:16px}
@media(max-width:760px){.gallery{max-width:380px;gap:30px}.gallery figure{padding:0}}

/* Follow the app's blue surfaces, purple controls and cyan accents. */
.hero{gap:54px;min-height:660px}
h1{font-size:clamp(45px,5.2vw,70px);font-weight:750;letter-spacing:-2.5px;line-height:1.1}
.hero .lead{font-size:20px;color:#e1e5fb}.hero .intro{max-width:380px}
.nav-download{background:linear-gradient(110deg,#382178,#35258b);border-color:#6450bd;color:#8ff5ee}
.feature-list article{background:linear-gradient(145deg,#073770,#082b5b);border-color:#2366a04d;border-radius:16px}
.feature-list .number{color:#60dce3}.feature-list h3{color:#fff}
.showcase{background:#040d2b}.closing{background:linear-gradient(125deg,#132c73,#34217c);border-color:#5144a8}
.closing .eyebrow{color:#b7fcf8}
@media(max-width:600px){.hero{gap:25px;min-height:0;padding-top:32px}.hero h1{font-size:clamp(36px,10vw,48px);letter-spacing:-1.4px;line-height:1.12}.hero .lead{font-size:17px}.hero .intro{font-size:14px;max-width:310px}.hero-art{max-width:210px}.section-heading h2{font-size:30px}.eyebrow{letter-spacing:1.1px}}

/* User-selected background and original phone-and-Viti hero artwork. */
body{background:#030b25 url('assets/page-background.png') center top/cover fixed no-repeat}
body:before{display:none}
.hero{grid-template-columns:1.05fr 1fr;gap:35px;min-height:580px;padding-block:55px 65px}
.hero h1{font-size:clamp(40px,4.6vw,64px);letter-spacing:-2px}
.brand-hero-art{position:relative;overflow:hidden;width:100%;max-width:550px;aspect-ratio:1.08;filter:none;isolation:isolate;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 95%,transparent)}
.brand-hero-art>img{position:absolute;max-width:none;width:330%;height:auto;left:-212%;top:0;border:0;border-radius:0;box-shadow:none;mask-image:linear-gradient(0deg,transparent,#000 12%,#000 88%,transparent)}
.brand-hero-art{mask-image:linear-gradient(0deg,transparent,#000 12%,#000 86%,transparent),linear-gradient(90deg,transparent,#000 10%,#000 88%,transparent);mask-composite:intersect}
@media(max-width:900px){.hero{gap:18px;min-height:520px}.hero h1{font-size:clamp(36px,5vw,48px)}.brand-hero-art{width:100%}}
@media(max-width:600px){body{background-size:auto 100vh}.hero{grid-template-columns:1fr;gap:15px;min-height:0;padding-block:30px 35px}.hero h1{font-size:clamp(35px,9.5vw,46px);letter-spacing:-1px}.brand-hero-art{width:100%;max-width:380px;aspect-ratio:1.08;margin:auto}.brand-hero-art>img{width:310%;left:-198%;top:-4%}.hero-copy{position:relative;z-index:1}.hero-note{margin-bottom:0}}

/* Transparent phone-and-Viti artwork: no masking or overlays. */
.brand-hero-art{mask-image:none;mask-composite:add;overflow:visible;aspect-ratio:auto;max-width:500px;isolation:auto}
.brand-hero-art>img{position:static;display:block;width:100%;max-width:100%;height:auto;mask-image:none;clip-path:none;opacity:1;filter:none;border:0;box-shadow:none}
@media(max-width:600px){.brand-hero-art{width:85%;max-width:310px;aspect-ratio:auto;margin:12px auto 0}.brand-hero-art>img{width:100%;position:static;mask-image:none}}

.viti-art.viti-cutout{background:none;overflow:visible;border-radius:0;aspect-ratio:auto;width:100%;max-width:340px;justify-self:center}
.viti-art.viti-cutout img{position:static;max-width:100%;width:100%;height:auto;mask-image:none;clip-path:none;filter:none}
.brand-hero-art{max-width:460px}
@media(max-width:600px){.viti-art.viti-cutout{max-width:240px;margin:auto}.brand-hero-art{max-width:300px}}