/* xvd site: the app's own look. Ground #0a0a0a, one green accent, system type, 4px corners, no third-party requests.
   House rules: no radius above 4px (the iPhone body is a drawing of the device, not a UI corner), no uppercase,
   no dots or glows as decoration, no long dashes in copy. */
:root{color-scheme:dark;--bg:#0a0a0a;--surface:#141414;--surface2:#1c1c1c;--fg:#fff;--fg2:#b3b3b3;--fg3:#7a7a7a;--accent:#19e68c;--ink:#04140c;--line:#262626;--r:4px;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;padding-inline:20px}
a{color:var(--accent)}
img{max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}

/* Header */
.bar{position:sticky;top:0;z-index:10;margin-inline:-20px;padding:14px 20px;background:rgba(10,10,10,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar .in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.brand svg{width:26px;height:26px}.brand b{font-size:19px;letter-spacing:-.5px}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.bar nav a{color:var(--fg2);text-decoration:none;font-size:15px}.bar nav a:hover,.bar nav a[aria-current]{color:var(--fg)}
.bar nav a.switch{border:1px solid var(--line);border-radius:var(--r);padding:5px 10px;font-size:14px}
.bar nav a.switch:hover{border-color:var(--fg3)}

/* Documents: support, privacy, terms */
.doc{max-width:720px;margin:0 auto;padding-block:48px 96px}
.doc h1{font-size:clamp(34px,5vw,44px);letter-spacing:-.035em;line-height:1.1;margin:0 0 8px}
.doc h2{font-size:21px;letter-spacing:-.3px;margin:40px 0 10px}
.doc p,.doc li{color:var(--fg2)}.doc strong{color:var(--fg)}
.doc p.meta{color:var(--fg3);font-size:15px;margin:0 0 32px}
.doc ul{list-style:none;margin:0;padding:0}
.doc li{padding:12px 0;border-top:1px solid var(--line)}
.doc li:last-child{border-bottom:1px solid var(--line)}

/* Hero */
.hero{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-block:56px 80px}
.kicker{color:var(--fg3);font-size:16px;font-weight:600;margin:0 0 18px}
.hero h1{font-size:clamp(44px,6.4vw,78px);line-height:1;letter-spacing:-.045em;font-weight:800;margin:0 0 24px}
.hero h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:20px;color:var(--fg2);max-width:30em;margin:0 0 34px}
.cta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.btn{display:inline-flex;align-items:center;font-weight:700;font-size:16px;padding:14px 20px;border-radius:var(--r);text-decoration:none}
.btn.soon{background:var(--surface2);color:var(--fg);border:1px solid var(--line);cursor:default}
.link{color:var(--fg2);text-decoration:none;font-weight:600}.link:hover{color:var(--fg)}

/* iPhones in perspective */
.stage{position:relative;perspective:1800px;display:grid;place-items:center;min-height:640px}
.phone{--w:290px;position:relative;width:var(--w);aspect-ratio:1320/2868;border-radius:calc(var(--w)*.165);padding:calc(var(--w)*.032);
  background:linear-gradient(145deg,#4a4a4a 0%,#161616 22%,#0c0c0c 60%,#2e2e2e 100%);
  box-shadow:inset 0 0 0 1.5px #5c5c5c,inset 0 0 0 4px #0b0b0b,0 50px 90px -20px rgba(0,0,0,.85)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--w)*.135)}
.phone::after{content:"";position:absolute;inset:calc(var(--w)*.032);border-radius:calc(var(--w)*.135);pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 30%)}
.stage .front{transform:rotateY(-24deg) rotateX(9deg) rotateZ(3deg);animation:float 9s ease-in-out infinite;z-index:2}
.stage .back{position:absolute;--w:250px;transform:translateX(-46%) translateY(6%) rotateY(-24deg) rotateX(9deg) rotateZ(3deg);filter:brightness(.5) saturate(.9);z-index:1}
@keyframes float{0%,100%{transform:rotateY(-24deg) rotateX(9deg) rotateZ(3deg) translateY(0)}50%{transform:rotateY(-20deg) rotateX(7deg) rotateZ(2deg) translateY(-14px)}}

/* Section heads */
.scene,.features,.more,.plans{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line)}
.head{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px;align-items:end;margin-bottom:40px}
.scene h2,.more h2,.plans h2,.feature h2{font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.04em;margin:0}
.head p{color:var(--fg2);font-size:18px;margin:0;max-width:30em}

/* One scene, three languages, three styles: drawn the way the app burns them in */
.scene{padding-block:88px}
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.pic{position:relative;container-type:inline-size;border-radius:var(--r);overflow:hidden;background:#000}
.pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:62% 50%}
.cue{position:absolute;left:7%;right:7%;bottom:8%;margin:0;text-align:center;color:#fff;font-weight:800;font-size:15px;font-size:4.6cqw;line-height:1.22;letter-spacing:-.01em}
.cue.classic,.cue.karaoke{text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 2px 8px rgba(0,0,0,.7)}
.cue.box{line-height:1.5}
.cue.box span{background:rgba(0,0,0,.8);padding:.1em .4em;border-radius:var(--r);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.karaoke .w{animation:sing 4.8s linear infinite;animation-delay:calc(var(--i) * .6s - 4.8s)}
@keyframes sing{0%,12.4%{color:var(--accent)}12.5%,100%{color:#fff}}
.cap{margin:12px 0 0;font-size:15px;color:var(--fg3)}.cap b{color:var(--fg);font-weight:700;margin-right:6px}
.sub{font-size:17px;font-weight:700;margin:48px 0 14px;letter-spacing:-.2px}
.langlist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.langlist li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;font-size:15px;font-weight:600;color:var(--fg2)}
.langlist li.here{background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* Feature rows */
.features{padding-block:8px 24px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:64px}
.feature+.feature{border-top:1px solid var(--line)}
.feature:nth-child(even) .shot{order:2}
.feature .shot{display:grid;place-items:center;perspective:1600px}
.feature .phone{--w:260px}
.feature:nth-child(odd) .phone{transform:rotateY(16deg) rotateX(4deg)}
.feature:nth-child(even) .phone{transform:rotateY(-16deg) rotateX(4deg)}
.feature h2{margin-bottom:16px}
.feature p{color:var(--fg2);font-size:19px;max-width:26em;margin:0}

/* And more */
.more{padding-block:80px}
.more h2{margin-bottom:36px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px}
.grid>div{border-top:1px solid var(--line);padding-top:18px}
.grid h3{font-size:18px;letter-spacing:-.2px;line-height:1.3;margin:0 0 8px}
.grid p{color:var(--fg2);font-size:16px;margin:0}
.tag{display:inline-block;vertical-align:2px;font-size:12px;font-weight:700;color:var(--accent);border:1px solid rgba(25,230,140,.45);border-radius:var(--r);padding:1px 6px;margin-left:4px}

/* Plans */
.plans{padding-block:80px 64px}
.plans h2{margin-bottom:32px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 14px}
.card.pro{border-color:rgba(25,230,140,.5)}
.card h3{margin:0 0 14px;font-size:22px;letter-spacing:-.4px}.card.pro h3{color:var(--accent)}
.card ul{list-style:none;margin:0;padding:0}
.card li{color:var(--fg2);padding:11px 0;border-top:1px solid var(--line)}
.plans p.meta{color:var(--fg3);font-size:15px;margin:18px 0 0}

/* Footer */
.foot{max-width:var(--max);margin:0 auto;padding-block:36px 56px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;color:var(--fg3);font-size:14px}
.foot a{color:var(--fg2);text-decoration:none}.foot a:hover{color:var(--fg)}
.foot .note{flex-basis:100%;margin:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage .front{animation:none}
  .karaoke .w{animation:none}.karaoke .w.on{color:var(--accent)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:32px;gap:8px}
  .stage{min-height:540px}
  .phone{--w:min(250px,62vw)}.stage .back{--w:min(215px,52vw)}
  .head{grid-template-columns:1fr}
  .frames{grid-template-columns:1fr;gap:28px}
  .feature{grid-template-columns:1fr;gap:32px;padding-block:52px}
  .feature:nth-child(even) .shot{order:0}
  .feature .phone{--w:min(230px,60vw)}
  .grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .bar nav{gap:16px}.bar nav .opt{display:none}
  .lead{font-size:18px}
  .scene,.more,.plans{padding-block:64px}
  .grid{grid-template-columns:1fr}
}