*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0b10;--bg2:#12121a;--line:rgba(255,255,255,.08);
  --text:#f2f2f7;--sub:rgba(242,242,247,.62);
  --violet:#8b7cff;--cyan:#5ad1ff;--green:#34d399;--ruby:#ff4d6d;--amber:#f5b942;--orange:#ffa656;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
img{display:block}

.nav{position:sticky;top:0;z-index:10;background:rgba(11,11,16,.75);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:8px;font-weight:600}
.brand img{width:30px;height:30px;border-radius:8px}
.brand span{margin-left:4px}
.nav nav{display:flex;gap:22px;font-size:14px;color:var(--sub)}
.nav nav a:hover{color:var(--text)}

.hero{padding:96px 20px 64px;text-align:center}
.eyebrow{display:inline-block;font-size:13px;color:var(--sub);border:1px solid var(--line);border-radius:99px;padding:4px 14px;margin-bottom:24px}
h1,.big{font-size:clamp(36px,6.4vw,68px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
h1.eyebrow{font-size:13px;line-height:1.6;letter-spacing:0;font-weight:400}
.grad{color:var(--acc,var(--violet));background:var(--g,linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--green)));-webkit-background-clip:text;background-clip:text}
@supports((-webkit-background-clip:text) or (background-clip:text)){.grad{color:transparent}}
.lead{max-width:620px;margin:22px auto 0;font-size:19px;color:var(--sub)}
.hero-apps{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.pill{display:flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:16px;background:var(--bg2);border:1px solid var(--line);font-weight:600;transition:transform .15s,border-color .15s}
.pill:hover{transform:translateY(-2px)}
.pill.lex:hover{border-color:var(--violet)}.pill.cla:hover{border-color:var(--green)}
.pill img{width:40px;height:40px;border-radius:10px}
.pill small{color:var(--sub);font-weight:400;margin-left:2px}

.app{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:72px 20px;border-top:1px solid var(--line)}
.app.flip .app-text{order:2}
.app-icon{width:76px;height:76px;border-radius:18px;margin-bottom:18px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1.15}
.tag{color:var(--text);font-size:18px;margin:6px 0 14px;font-weight:500}
.app-text>p:not(.tag){color:var(--sub)}
.ticks{list-style:none;margin:20px 0 28px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--sub)}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--violet)}
#clarence .ticks li::before{background:var(--green)}

.store{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#000;border-radius:12px;padding:9px 20px 9px 16px;transition:transform .15s,opacity .15s}
.store:hover{transform:translateY(-2px);opacity:.92}
.store span{display:flex;flex-direction:column;font-size:19px;font-weight:600;line-height:1.05}
.store small{font-size:11px;font-weight:400}

.window{border-radius:16px;background:var(--bg2);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden}
.window.lex{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(139,124,255,.18)}
.window.cla{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(52,211,153,.16)}
.win-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line)}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a44}
.chip{margin-left:auto;font-size:12px;padding:2px 10px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--sub)}
.win-body{padding:22px 22px 24px}
.src{color:var(--sub)}
.win-body hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.out{font-size:19px;font-weight:500}
del{color:#f87171;text-decoration-thickness:2px}
ins{color:var(--green);text-decoration:none;background:rgba(52,211,153,.14);border-radius:4px;padding:0 3px}
.slider{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:12px;color:var(--sub)}
.track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);position:relative}
.knob{position:absolute;left:38%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(52,211,153,.2)}

.private{padding:80px 20px;border-top:1px solid var(--line);text-align:center}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;text-align:start}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px}
.ico{font-size:26px;margin-bottom:10px}
.card h3{font-size:16px;margin-bottom:6px}
.card p{font-size:14px;color:var(--sub)}

.cta{padding:72px 20px 88px;text-align:center;border-top:1px solid var(--line)}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.note{margin-top:22px;font-size:13px;color:var(--sub)}

footer{border-top:1px solid var(--line);padding:26px 0;font-size:12px;color:var(--sub)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:820px){
  .app{grid-template-columns:1fr;gap:36px;padding:56px 20px}
  .app.flip .app-text{order:0}
  .cards{grid-template-columns:1fr 1fr}
  .nav nav{display:none}
  .hero{padding-top:64px}
}
@media(max-width:480px){.cards{grid-template-columns:1fr}}

.store.soon{background:transparent;color:var(--sub);border:1px dashed var(--line);cursor:default}
.store.soon:hover{transform:none;opacity:1}
@supports not (display:grid){.cards,.app{display:block}.card{margin-bottom:16px}}
.out,.chip{transition:opacity .35s ease,transform .35s ease}
.out.fade{opacity:0;transform:translateY(6px)}
.chip.fade{opacity:0}
.out{min-height:3.2em}
.src{transition:opacity .35s ease}.src.fade{opacity:0}.src{min-height:1.7em}
.typing::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:text-bottom;background:currentColor;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.knob{transition:left .5s ease}.slider+*{}
.caret{display:inline-block;width:2px;height:1.1em;margin:0 1px;vertical-align:text-bottom;background:var(--green);animation:blink .8s steps(1) infinite}

.stage{display:block;position:relative}
.stage.anim{padding-top:1.2em}
.hl{display:block;transform-origin:50% 0;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s ease}
.hl.old{position:absolute;left:0;right:0;top:1.2em}
.hl.trail{transform:translateY(-1.05em) scale(.33);opacity:.6}
.hl.gone{transform:translateY(-1.4em) scale(.28);opacity:0}
.ch.h,.gc.h{visibility:hidden}
.gc{background-image:var(--g,linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--green)));background-repeat:no-repeat;color:var(--acc,var(--violet))}
@supports((-webkit-background-clip:text) or (background-clip:text)){.gc{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}}
.big .caret{display:inline-block;position:relative;width:0;height:0;vertical-align:baseline;animation:none}
.big .caret::after{content:"";position:absolute;left:2px;bottom:-.08em;width:3px;height:.85em;background:var(--acc,var(--green));animation:blink .8s steps(1) infinite}

.hero-outer{position:relative;overflow:hidden}
.hero-outer .hero{position:relative;z-index:1}
.faces{position:absolute;inset:0;pointer-events:none;display:none}
.face{position:absolute;top:var(--fy,50%);width:clamp(150px,20vw,300px);aspect-ratio:110/218;transform:translateY(-50%);color:var(--violet)}
.face.L{left:max(12px,calc(50% - 760px))}
.face.R{right:max(12px,calc(50% - 760px));transform:translateY(-50%) scaleX(-1);color:var(--green)}
.face svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0;transition:opacity .6s ease}
.face svg.show{opacity:.55}
.face path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}
.face svg.show path{stroke-dashoffset:0}
@media(min-width:1000px){.faces{display:block}}
.stage.anim .hl{display:flex;align-items:center;justify-content:center;min-height:3.24em}
.fit{display:block;width:100%;font-size:calc(1em * var(--fit,1))}

html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.to-top{position:fixed;right:24px;bottom:24px;z-index:20;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(22,22,31,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s,border-color .15s}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--violet)}

html{scroll-padding-top:60px}
.hero-outer{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center}
.hero-outer .hero{width:100%;padding-top:40px;padding-bottom:70px}
.scroll-hint{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);transition:opacity .4s}
.scroll-hint svg{animation:nudge 1.8s ease-in-out infinite}
.scroll-hint.off{opacity:0;pointer-events:none}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
.js .reveal{opacity:0;transform:translateY(56px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal .app-visual{opacity:0;transform:translateX(40px) scale(.97);transition:opacity .9s ease .2s,transform .9s cubic-bezier(.2,.7,.2,1) .2s}
.js .reveal.flip .app-visual{transform:translateX(-40px) scale(.97)}
.js .reveal.in .app-visual{opacity:1;transform:none}
.js .reveal .card{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in .card{opacity:1;transform:none}
.js .reveal.in .card:nth-child(2){transition-delay:.1s}.js .reveal.in .card:nth-child(3){transition-delay:.2s}.js .reveal.in .card:nth-child(4){transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.js .reveal,.js .reveal .app-visual,.js .reveal .card{transition:none;opacity:1;transform:none}.scroll-hint svg{animation:none}}

/* ── company site: product cards, product pages, footer ── */
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.private .lead{margin-top:14px}
.pcard{display:block;transition:transform .2s,border-color .2s}
.pcard:hover{transform:translateY(-4px)}
.pcard.lex:hover{border-color:var(--violet)}.pcard.cla:hover{border-color:var(--green)}.pcard.pol:hover{border-color:var(--amber)}
.pcard img{width:64px;height:64px;border-radius:15px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pcard h3{font-size:19px;margin-bottom:8px}
.pcard h3 small{color:var(--sub);font-weight:400;font-size:14px;margin-left:6px}
.pcard p{font-size:15px}
.more-link{display:inline-block;margin-top:14px;font-size:14px;color:var(--text)}
.pill.pol:hover{border-color:var(--amber)}
.app.first{min-height:calc(100vh - 60px);border-top:0;padding-top:72px}
.fine{margin-top:14px;font-size:13px;color:var(--sub)}
.window.pol{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(245,185,66,.16)}
.pol-line{min-height:1.7em;font-size:30px;letter-spacing:.01em}
.pol-hint{margin-top:18px;font-size:13px;color:var(--sub);opacity:0;transition:opacity .4s}
.pol-hint.on{opacity:1}
.foot .flinks{display:flex;gap:18px}
.foot .flinks a:hover{color:var(--text)}
.foot .legal{flex-basis:100%;font-size:11px;opacity:.7}
.js .reveal .card.pcard{transition:opacity .7s ease,transform .7s ease,border-color .2s}
.nav nav a[aria-current]{color:var(--text)}
#polly .ticks li::before{background:var(--amber)}

/* ── language switcher, RTL and CJK ── */
.nav nav{align-items:center}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line);border-radius:99px;color:var(--sub);transition:color .15s,border-color .15s}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{color:var(--text);border-color:rgba(255,255,255,.18)}
.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 10px);list-style:none;background:rgba(22,22,31,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:170px;max-height:72vh;overflow:auto;z-index:30;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lang li a{display:block;padding:7px 12px;border-radius:8px;color:var(--sub);white-space:nowrap}
.lang li a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.lang li a[aria-current]{color:var(--text);font-weight:600}
html[dir=rtl] .ticks li{padding-left:0;padding-right:28px}
html[dir=rtl] .ticks li::before{left:auto;right:0}
html[lang=ar] *,html[lang=ja] *,html[lang=ko] *,html[lang=zh] *{letter-spacing:0!important}
.hl[lang=ar],.hl[lang=ja],.hl[lang=ko],.hl[lang=zh],.hl[lang=el]{letter-spacing:0}
html[lang=ja] body,html[lang=zh] body,html[lang=ko] body{line-height:1.7}

/* ── smooth page / language switching ── */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(root){animation-name:vt-out}
::view-transition-new(root){animation-name:vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(site-nav){animation-duration:.4s}
/* fallback for browsers without view transitions */
html.fx-in body{animation:fx-in .4s ease both}
html.fx-out body{opacity:0;transition:opacity .2s ease}
@keyframes fx-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}html.fx-in body{animation:none}html.fx-out body{transition:none;opacity:1}}

.credit{padding:0 20px 56px;font-size:12px;color:var(--sub);opacity:.75;text-align:center;max-width:820px}
.credit a{text-decoration:underline;text-underline-offset:2px}.credit a:hover{color:var(--text)}

/* ── Polly vs. switching by hand ── */
.cmp{margin-top:44px;text-align:start;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg2)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1fr 1fr 1.5fr}
.cmp-head span{padding:16px 24px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.cmp-head .c-polly{color:var(--amber);background:rgba(245,185,66,.07)}
.cmp-row{border-top:1px solid var(--line)}
.cmp-row h3{padding:22px 24px;font-size:15px;font-weight:600}
.cmp-row p{margin:0;padding:22px 24px;font-size:14px;line-height:1.55;color:var(--sub)}
.cmp-row .c-polly{color:var(--text);background:rgba(245,185,66,.07);border-inline-start:2px solid var(--amber)}
.cmp .lbl{display:none}

/* Razzy */
.pill.raz:hover,.pcard.raz:hover{border-color:var(--ruby)}
#razzy .ticks li::before{background:var(--ruby)}
.window.raz{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(255,77,109,.16)}
.tree{list-style:none;font-size:15px;display:grid;gap:9px}
.tree li{display:flex;align-items:center;gap:10px;color:var(--text)}
.tree li::before{content:"";flex:none;width:14px;height:16px;border-radius:3px;background:rgba(255,255,255,.16)}
.tree li.dir::before{width:16px;height:13px;background:var(--ruby);opacity:.85}
.tree .sub{padding-left:24px}.tree .sub2{padding-left:48px}
.tree span{margin-left:auto;font-size:13px;color:var(--sub)}
.raz-bar{margin-top:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.raz-bar i{display:block;height:100%;width:100%;background:var(--ruby);transform-origin:left;animation:raz-fill 5s ease-in-out infinite}
.raz-done{margin-top:14px;font-size:14px;color:var(--sub);animation:raz-done 5s ease-in-out infinite}
@keyframes raz-fill{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes raz-done{0%,55%{opacity:0}62%,94%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.raz-bar i,.raz-done{animation:none}}
@media(max-width:820px){.cards.three{grid-template-columns:1fr}}

/* ── hero scenes (hero.js): one per app, in the app's own colours ── */
.stage[data-k=lexter],.pill.lex{--acc:#8b7cff;--g:linear-gradient(90deg,#5ad1ff,#8b7cff 60%,#b48bff)}
.stage[data-k=clarence],.pill.cla{--acc:#34d399;--g:linear-gradient(90deg,#a7f3d0,#34d399 55%,#10b981)}
.stage[data-k=polly],.pill.pol{--acc:#f5b942;--g:linear-gradient(90deg,#ffe08a,#f5b942 50%,#f08c2e)}
.stage[data-k=razzy],.pill.raz{--acc:#ff4d6d;--g:linear-gradient(90deg,#ff9aae,#ff4d6d 55%,#e0234e)}
.scene{display:block;position:relative}
.scene.s-in{animation:scene-in .6s cubic-bezier(.2,.7,.2,1) both}
.scene.s-out{opacity:0;transform:scale(.55);filter:blur(6px);transition:opacity .38s ease,transform .4s cubic-bezier(.5,0,.8,.3),filter .38s ease;pointer-events:none}
@keyframes scene-in{from{opacity:0;transform:scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.scene .hl.old{top:0}
.hl.gone2{opacity:0;transform:translateY(-.2em)}
.ln{white-space:nowrap}
.faces{transition:opacity .6s ease;opacity:0}
.hero-outer.lex .faces{opacity:1}
.pill{transition:transform .15s,border-color .3s,box-shadow .3s}
.pill.on{border-color:var(--acc);box-shadow:0 10px 34px -14px var(--acc)}
.lead{transition:opacity .25s ease}.lead.fade{opacity:0}
.lead-more{color:var(--text);white-space:nowrap;border-bottom:1px solid var(--acc,var(--line))}
#hero-lead{min-height:3.2em}

/* Clarence: messy draft → clean type, revealed by a sweeping bar */
.cla-box{position:relative;display:inline-grid;justify-items:center;vertical-align:top}
.cla-rough,.cla-clean{grid-area:1/1;transition:clip-path 1.5s cubic-bezier(.6,0,.3,1)}
.cla-rough{color:var(--sub);clip-path:inset(-.3em -.3em -.3em -.3em)}
.cla-clean{clip-path:inset(-.3em 100% -.3em -.3em)}
.cla-box.done .cla-rough{clip-path:inset(-.3em -.3em -.3em 100%)}
.cla-box.done .cla-clean{clip-path:inset(-.3em -.3em -.3em -.3em)}
[dir=rtl] .cla-clean{clip-path:inset(-.3em -.3em -.3em 100%)}
[dir=rtl] .cla-box.done .cla-rough{clip-path:inset(-.3em 100% -.3em -.3em)}
.cla-bar{position:absolute;top:-.12em;bottom:-.12em;left:0;width:3px;border-radius:3px;background:var(--acc);box-shadow:0 0 22px 5px var(--acc);opacity:0;transition:left 1.5s cubic-bezier(.6,0,.3,1)}
.cla-box.done .cla-bar{left:100%;animation:cla-bar 1.5s ease forwards}
[dir=rtl] .cla-bar{left:100%}[dir=rtl] .cla-box.done .cla-bar{left:0}
@keyframes cla-bar{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}
.m{display:inline-block;white-space:pre}
.typo{display:inline-block;padding-bottom:.06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='%23ff6b6b' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100%/.24em .12em}

/* Polly: typed on the wrong layout, then each letter flips into the right one */
.pol-word{display:inline-block;min-width:1ch}
.pol-raw{color:var(--sub);font-weight:500}
.flip{display:inline-block;white-space:pre;animation:flip .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes flip{from{opacity:0;transform:perspective(400px) rotateX(90deg)}to{opacity:1;transform:none}}
.pol-chip{display:inline-block;vertical-align:middle;margin-inline-start:.45em;padding:.3em .75em;border-radius:99px;border:1px solid var(--line);font-size:.24em;font-weight:600;letter-spacing:.04em;color:var(--sub);line-height:1.3;transition:color .3s,border-color .3s,background .3s}
.pol-chip.on{color:#1a1206;background:var(--acc);border-color:var(--acc)}

/* Razzy: letters packed into an archive burst out after a double-click */
.rz-row{position:relative}
.rz{display:inline-block;white-space:pre;transition:transform .75s cubic-bezier(.2,.9,.25,1.12),opacity .45s ease}
.rz-row.packed .rz{transform:translateX(var(--dx)) scale(.08);opacity:0}
.rz-row.now .rz,.rz-row.now .zip{transition:none}
.zip{position:absolute;left:50%;top:50%;width:.82em;height:.98em;margin:-.49em 0 0 -.41em;border-radius:.14em;background:linear-gradient(160deg,#ff9aae,#ff4d6d 45%,#c81d45);box-shadow:0 .1em .5em rgba(255,77,109,.45),inset 0 0 0 .02em rgba(255,255,255,.25);opacity:0;transform:scale(1.8);transition:transform .45s cubic-bezier(.3,.7,.3,1),opacity .35s ease;pointer-events:none}
.rz-row.packed .zip{opacity:1;transform:none}
.zip i{position:absolute;left:50%;top:.1em;bottom:.34em;width:.13em;margin-left:-.065em;background:repeating-linear-gradient(rgba(255,255,255,.7) 0 .045em,transparent .045em .09em)}
.zip::after{content:"";position:absolute;left:50%;bottom:.16em;width:.2em;height:.2em;margin-left:-.1em;border-radius:.05em;background:rgba(255,255,255,.85)}
.zip.tap{animation:tap .38s ease 2}
.zip.tap::before{content:"";position:absolute;inset:-.1em;border-radius:.24em;border:.03em solid var(--acc);animation:ring .38s ease-out 2}
@keyframes tap{50%{transform:scale(.88)}}
@keyframes ring{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.scene.s-in{animation:none}.flip{animation:none}}
@media(max-width:600px){
  .hero-apps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
  .pill{padding:6px 12px 6px 6px;font-size:15px;gap:8px}
  .pill img{width:32px;height:32px;border-radius:8px}
  .pill small{display:none}
  #hero-lead{font-size:17px}
}
/* Scenes other than Lexter take the whole stage, including the room Lexter keeps above for its moving line. */
.scene.full{margin-top:-1.2em}
.stage.anim .scene.full .hl{min-height:4.44em}

/* Viggo: orange, like its icon */
.stage[data-k=viggo],.pill.vig{--acc:#ffa656;--g:linear-gradient(90deg,#ffd2a3,#ffa656 50%,#e8681a)}
.pill.vig:hover,.pcard.vig:hover{border-color:var(--orange)}
#viggo .ticks li::before{background:var(--orange)}
.window.vig{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(255,166,86,.16)}
.vg-row{position:relative}
.vg{display:inline-block;white-space:pre;opacity:0;transform:translateY(.12em);filter:blur(5px);transition:opacity .35s ease,transform .45s ease,filter .35s ease}
.vg-row.on .vg{opacity:1;transform:none;filter:none;transition-delay:var(--d,0ms)}
.vg-badge{position:absolute;left:50%;top:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;border-radius:50%;border:.05em solid var(--acc);background:rgba(255,166,86,.1);transition:opacity .35s ease,transform .45s cubic-bezier(.3,.7,.3,1),background .3s;pointer-events:none}
.vg-badge::before{content:"";position:absolute;left:50%;top:14%;bottom:14%;width:.06em;margin-left:-.03em;border-radius:.03em;background:var(--acc);transform:rotate(45deg);transition:opacity .25s}
.vg-badge::after{content:"";position:absolute;left:39%;top:29%;width:.34em;height:.42em;background:#1d1004;clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;transform:scale(.4);transition:opacity .3s,transform .35s cubic-bezier(.3,.8,.3,1.3)}
.vg-badge.ok{background:var(--acc)}.vg-badge.ok::before{opacity:0}.vg-badge.ok::after{opacity:1;transform:none}
.vg-badge.tap{animation:tap .38s ease 2}
.vg-row.on .vg-badge{opacity:0;transform:scale(1.8)}
.vg-bar{position:absolute;left:0;right:0;bottom:-.1em;height:.045em;border-radius:.05em;background:rgba(255,255,255,.1);overflow:hidden;opacity:0;transition:opacity .3s}
.vg-row.on .vg-bar{opacity:1}
.vg-bar i{display:block;height:100%;background:var(--g);transform-origin:left;transform:scaleX(0)}
[dir=rtl] .vg-bar i{transform-origin:right}
.vg-row.on .vg-bar i{transform:scaleX(1);transition:transform 3.4s linear .4s}
/* Viggo page window: a frame that plays */
.vg-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#2a1a33,#e8681a 65%,#fccb9a)}
.vg-sun{position:absolute;left:62%;top:30%;width:18%;aspect-ratio:1;border-radius:50%;background:#ffe2a8;box-shadow:0 0 40px #ffc46b;animation:vg-sun 6s ease-in-out infinite}
.vg-hill{position:absolute;bottom:-30%;width:90%;aspect-ratio:2;border-radius:50%;background:#1f1330}
.vg-hill.a{left:-20%}.vg-hill.b{right:-30%;bottom:-38%;background:#2b1840}
.vg-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(11,11,16,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:vg-fadeplay 6s ease infinite}
.vg-play::after{content:"";position:absolute;left:21px;top:17px;width:16px;height:20px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.vg-track{margin-top:16px;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.vg-track i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:left;animation:raz-fill 6s linear infinite}
.vg-meta{display:flex;gap:8px;margin-top:14px}
.vg-meta span{font-size:12px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);color:var(--sub)}
@keyframes vg-sun{50%{transform:translateY(12%)}}
@keyframes vg-fadeplay{0%,10%{opacity:1}22%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.vg-sun,.vg-play,.vg-track i{animation:none}}
.utils .cards.two{margin-top:36px}
/* Home: a quiet link from the hero down to the Mac utilities block */
.util-wrap{margin-top:22px}
.util-link{display:inline-flex;align-items:center;gap:12px;padding:7px 18px 7px 8px;border-radius:99px;border:1px solid var(--line);color:var(--sub);font-size:14px;transition:color .2s,border-color .2s,background .2s}
.util-link .ui{display:flex;gap:6px}
.util-link .ui img{width:26px;height:26px;border-radius:7px}
.util-link .ua{transition:transform .2s}
.util-link:hover{color:var(--text);border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg,var(--ruby),var(--orange)) border-box}
.util-link:hover .ua{transform:translateY(2px)}