/* Scambio launch page (v4). Pinned 3D hero with download/waitlist buttons, demo, how it works + Linux mocks, download, compatibility, benefits, platforms, form, FAQ, privacy. */
:root{
  --bg:#0A0D14;--surface:#141B27;--ink:#F1F4F9;--ink-muted:#8E98AA;--accent:#4A78FF;--btn:#3C69F5;--rail:#66718A;--lens:#9FD8FF;
  --line:rgba(142,152,170,.2);--line-2:rgba(142,152,170,.36);
  --accent-soft:rgba(74,120,255,.14);--accent-glow:rgba(74,120,255,.42);--on-accent:#FFFFFF;
  --ready:#34C77B;--ready-soft:rgba(52,199,123,.13);--coming:#F5B13D;--coming-soft:rgba(245,177,61,.13);--error:#FF5A5F;
  --halo:#162036;--shadow:rgba(0,0,0,.55);--frame:#1A1F29;--frame-hi:#38425A;--smoke:#151B26;
  --tgl:rgba(142,152,170,.34);--knob:#FFFFFF;--tl1:#FF5F57;--tl2:#FEBC2E;--tl3:#28C840;
  --display:"Plus Jakarta Sans","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --native:-apple-system,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F4F6FA;--surface:#FFFFFF;--ink:#0E1420;--ink-muted:#5B6576;--accent:#2A55E8;--btn:#2A55E8;--rail:#8A93A3;--lens:#0B86C6;
    --line:rgba(91,101,118,.2);--line-2:rgba(91,101,118,.34);
    --accent-soft:rgba(42,85,232,.09);--accent-glow:rgba(42,85,232,.3);
    --ready:#17924F;--ready-soft:rgba(23,146,79,.1);--coming:#A86A00;--coming-soft:rgba(168,106,0,.1);--error:#D92D3A;
    --halo:#FFFFFF;--shadow:rgba(14,20,32,.16);--frame:#1F2531;--frame-hi:#46506A;--smoke:#2A3242;--tgl:rgba(91,101,118,.3);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F4F6FA;--surface:#FFFFFF;--ink:#0E1420;--ink-muted:#5B6576;--accent:#2A55E8;--btn:#2A55E8;--rail:#8A93A3;--lens:#0B86C6;
  --line:rgba(91,101,118,.2);--line-2:rgba(91,101,118,.34);
  --accent-soft:rgba(42,85,232,.09);--accent-glow:rgba(42,85,232,.3);
  --ready:#17924F;--ready-soft:rgba(23,146,79,.1);--coming:#A86A00;--coming-soft:rgba(168,106,0,.1);--error:#D92D3A;
  --halo:#FFFFFF;--shadow:rgba(14,20,32,.16);--frame:#1F2531;--frame-hi:#46506A;--smoke:#2A3242;--tgl:rgba(91,101,118,.3);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
p{margin:0}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.wrap{width:100%;max-width:74rem;margin-inline:auto;padding-inline:clamp(16px,4.5vw,48px)}
h2.title{font:800 clamp(2rem,4.2vw,3.2rem)/1.05 var(--display);letter-spacing:-.025em;margin:0;overflow-wrap:break-word}
h3{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:0 1.6rem;border-radius:999px;border:0;background:var(--btn);color:var(--on-accent);font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;box-shadow:0 10px 30px -10px var(--accent-glow);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 14px 34px -10px var(--accent-glow)}
.btn:active{transform:none}
.btn svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
section.band{padding-block:clamp(4.5rem,10vw,8rem)}
.kicker{font:600 .8rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.9rem}

/* top bar */
.topbar{position:absolute;top:0;left:0;right:0;z-index:6}
.strip{font-size:.8rem;color:var(--ink-muted);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;gap:.55rem;align-items:center;justify-content:center;padding-block:.45rem;text-align:center}
.strip .wrap::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--coming)}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.1rem}
.mark{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font:800 1.25rem/1 var(--display);letter-spacing:-.02em}
.mark svg{height:.7rem;width:auto}
.mark .ml{fill:var(--rail)}
.mark .md{fill:var(--accent)}
.langs{display:flex;gap:.15rem;padding:.2rem;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.langs button{font:600 .75rem/1 var(--body);letter-spacing:.06em;background:none;border:0;color:var(--ink-muted);min-width:2.75rem;min-height:2.75rem;cursor:pointer;border-radius:999px}
.langs button:hover{color:var(--ink)}
.langs button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink)}

/* scene: static layout by default, pinned when .has3d */
.scene{position:relative}
.stage{position:relative;background:radial-gradient(110% 80% at 60% 46%,var(--halo) 0%,var(--bg) 64%);overflow:hidden}
.copy-in{max-width:34rem}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .9rem .42rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.86rem;font-weight:500;color:var(--ink-muted)}
.eyebrow::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--lens);box-shadow:0 0 0 3px var(--accent-soft)}
h1{font:800 clamp(2.6rem,6.4vw,5.4rem)/1.02 var(--display);letter-spacing:-.035em;margin:1.3rem 0 1.2rem;overflow-wrap:break-word;text-wrap:balance}
.sub{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.55;color:var(--ink-muted);max-width:31rem}
/* hero buttons: Linux pair by default, Mac/Windows pair when boot.js sets .pf-desk (brief §2-B) */
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin-top:2rem}
.cta-alt{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;font-size:.98rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1.5px;text-underline-offset:.32em}
.cta-alt:hover{text-decoration-color:currentColor}
html:not(.pf-desk) [data-pf="desk"],.pf-desk [data-pf="lin"]{display:none}
/* English in the HTML is the no-JS fallback: hidden until app.js has rendered Italian or German */
.l10n [data-k]{visibility:hidden}
.still{position:relative}
.still svg{display:block;width:100%;height:auto;overflow:visible}
.stag{position:absolute;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.85rem;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px -12px var(--shadow)}
.stag svg{width:1rem;height:1rem;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stag .dt{width:.45rem;height:.45rem;border-radius:50%;background:var(--ink-muted)}
.stag.p{left:0;top:52%;transform:translateY(-100%);color:var(--ink-muted)}
.stag.l{right:0;top:50%;transform:translateY(-100%);border-color:var(--accent-glow)}
#stillSvg:empty~.stag{display:none} /* no JS: no drawing, so no labels */
.s-dev{fill:var(--surface);stroke:var(--ink-muted);stroke-width:1.5}
.s-scr{fill:var(--bg)}
.s-on .s-dev{stroke:var(--accent)}
.s-on .s-scr{fill:url(#sgScr)}
.s-eq{fill:var(--accent)}
.s-arc{fill:none;stroke:url(#sgArc);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--accent-glow))}
.s-ghost{fill:none;stroke:var(--ink-muted);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round;opacity:.6}
.c-a{stop-color:var(--accent)}.c-l{stop-color:var(--lens)}.c-f1{stop-color:var(--frame-hi)}.c-f2{stop-color:var(--frame)}
.c-s1{stop-color:var(--smoke);stop-opacity:.95}.c-s2{stop-color:var(--lens);stop-opacity:.55}
.c-h{stop-color:var(--accent);stop-opacity:.35}.c-z{stop-color:var(--accent);stop-opacity:0}
.c-sh{stop-color:var(--shadow)}.c-sz{stop-color:var(--shadow);stop-opacity:0}
.c-sc1{stop-color:var(--accent);stop-opacity:.28}.c-sc2{stop-color:var(--accent);stop-opacity:.04}

html:not(.has3d) .stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(1.5rem,4vw,3rem);padding:clamp(7.5rem,14vh,9rem) clamp(16px,4.5vw,48px) 4rem;max-width:none;min-height:min(100vh,56rem)}
html:not(.has3d) .copy .wrap{padding:0}
html:not(.has3d) #gl,html:not(.has3d) .ov,html:not(.has3d) .tag,html:not(.has3d) .endc,html:not(.has3d) .hint{display:none}

.has3d .scene{height:250vh}
.has3d .stage{position:sticky;top:0;height:100vh;height:100svh}
.has3d .still{display:none}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.ready #gl{opacity:1}
.poster{position:absolute;left:0;top:0;width:0;height:auto;display:block;overflow:visible;pointer-events:none;transition:opacity .6s ease}
html:not(.has3d) .poster{display:none}
.ready .poster{opacity:0}
.stage:not(.ready) .ov{visibility:hidden}
.ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.has3d .copy{position:absolute;inset:0;display:flex;align-items:center;z-index:3;pointer-events:none;padding-top:3rem}
.has3d .copy-in{pointer-events:auto}
.arc{fill:none;stroke-width:2.5;stroke-linecap:round}
.arc-h{fill:none;stroke-width:9;stroke-linecap:round}
.head-h{fill:var(--accent)}
.head{fill:var(--lens)}
.ring{fill:none;stroke:var(--accent);stroke-width:1.5}
.dev{transition:filter .5s ease;filter:blur(1.4px)}
.dev.on{filter:none}
.dev .body{fill:var(--surface);stroke:var(--ink-muted);stroke-width:1.5;transition:stroke .4s}
.dev.on .body{stroke:var(--accent)}
.dev .scr{fill:var(--bg);transition:fill .4s}
.dev.on .scr{fill:url(#gScr)}
.dev .eq rect{fill:var(--accent);opacity:0;transition:opacity .3s;transform-box:fill-box;transform-origin:50% 100%}
.dev.on .eq rect{opacity:1;animation:eq 1s ease-in-out infinite}
.dev.on .eq rect:nth-child(2){animation-delay:-.35s}.dev.on .eq rect:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.halo{opacity:0;transition:opacity .5s}
.dev.on .halo{opacity:1}
.tag{position:absolute;left:0;top:0;z-index:4;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 30px -14px var(--shadow);font-size:.92rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none}
.tag svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tag .dt{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.endc{position:absolute;left:0;right:0;top:60%;z-index:3;text-align:center;opacity:0;visibility:hidden}
.endc .endh{font:800 clamp(2rem,4.6vw,3.6rem)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 1.5rem}
.hint{position:absolute;left:50%;bottom:1.4rem;z-index:3;width:1.5rem;height:2.3rem;margin-left:-.75rem;border-radius:999px;border:1.5px solid var(--line-2)}
.hint::after{content:"";position:absolute;left:50%;top:.45rem;width:3px;height:.45rem;margin-left:-1.5px;border-radius:2px;background:var(--ink-muted);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(.55rem);opacity:0}100%{opacity:0}}

/* demo: 16:9 frame for the loop (fixed size: no layout jump); until the video exists it frames the settings window */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.demo-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem clamp(2rem,6vw,5rem);align-items:end}
.demo-side .lead{color:var(--ink-muted);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:32rem}
.demo-frame{position:relative;margin:clamp(2rem,4vw,2.8rem) 0 0;aspect-ratio:16/9;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(80% 90% at 50% 30%,var(--halo) 0%,var(--bg) 72%);box-shadow:0 30px 70px -40px var(--shadow)}
.demo-ph{position:absolute;left:50%;top:7%;width:min(36%,24rem);transform:translateX(-50%);filter:drop-shadow(0 24px 40px var(--shadow))}
.demo-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--bg)}
.demo-video::cue{font:500 1rem/1.4 var(--body);color:#FFFFFF;background:rgba(10,13,20,.78)}
.demo-toggle{position:absolute;left:1rem;bottom:1rem;z-index:2;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 8px 24px -10px var(--shadow);transition:transform .18s ease}
.demo-toggle svg{width:1.1rem;height:1.1rem;fill:currentColor}
.demo-toggle .i-play,.paused .demo-toggle .i-pause{display:none}
.paused .demo-toggle .i-play{display:block}
.paused .demo-toggle{left:50%;top:50%;bottom:auto;width:4.5rem;height:4.5rem;border:0;margin:-2.25rem 0 0 -2.25rem;background:var(--btn);color:var(--on-accent);box-shadow:0 14px 34px -10px var(--accent-glow)}
.paused .demo-toggle svg{width:1.6rem;height:1.6rem;margin-left:.2rem}
.demo-toggle:hover{transform:scale(1.05)}
.demo-more{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;margin-top:.9rem;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.32em}
.demo-more:hover{text-decoration-color:currentColor}
.demo-more svg{flex:none;width:1.15rem;height:1.15rem;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-dialog{width:min(64rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 40px 90px -30px var(--shadow);overflow:hidden}
.demo-dialog::backdrop{background:rgba(10,13,20,.8)}
.dlg-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.2rem}
.dlg-bar h2{margin:0;font:700 1rem/1.3 var(--display);letter-spacing:-.01em}
.dlg-close{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:var(--accent-soft);color:var(--ink);cursor:pointer}
.dlg-close svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.demo-full{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}

/* how it works + native mocks */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.9rem}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start}
.si{position:relative;width:3.1rem;height:3.1rem;border-radius:14px;background:var(--accent-soft);display:grid;place-items:center}
.si svg{width:1.6rem;height:1.6rem;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.si .n{position:absolute;top:-.45rem;right:-.45rem;min-width:1.35rem;height:1.35rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 .72rem/1.35rem var(--display);text-align:center}
.si .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
.si .drain{stroke-dasharray:44;animation:drain 4s linear infinite}
.si .cap{animation:press 2.2s ease-in-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.5);opacity:0}}
@keyframes drain{from{stroke-dashoffset:0}to{stroke-dashoffset:44}}
@keyframes press{0%,60%,100%{transform:none}70%,80%{transform:translateY(1.5px)}}
.steps h3{font:700 1.18rem/1.3 var(--display);letter-spacing:-.01em;margin:.15rem 0 .35rem}
.steps p{color:var(--ink-muted)}
.mocks{display:grid;font-family:var(--native);font-variant-numeric:tabular-nums;position:relative}
.mocks::before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(closest-side,var(--accent-soft),transparent);pointer-events:none}
.mock{grid-area:1/1;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px var(--shadow);font-size:13px;line-height:1.35;color:var(--ink)}
.m-menu{justify-self:start;align-self:end;width:min(18rem,86%);margin-bottom:1.2rem;z-index:2}
/* the real settings window (Linux), its cut bottom edge faded out; the shadow sits on the wrapper so the mask does not clip it */
.m-shot{grid-area:1/1;justify-self:end;align-self:start;width:min(20rem,74%);filter:drop-shadow(0 22px 34px var(--shadow))}
.m-shot img,.demo-ph img{display:block;width:100%;height:auto;border-radius:10px;-webkit-mask-image:linear-gradient(#000 76%,transparent 99%);mask-image:linear-gradient(#000 76%,transparent 99%)}
.menubar{display:flex;justify-content:flex-end;align-items:center;gap:.8rem;padding:.42rem .8rem;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-muted)}
.menubar i{display:block;height:.4rem;border-radius:2px;background:var(--line-2)}
.menubar i:nth-child(1){width:1.3rem}.menubar i:nth-child(2){width:.8rem}
.mb-app{display:grid;place-items:center;width:1.5rem;height:1.2rem;border-radius:5px;background:var(--accent-soft);color:var(--ink)}
.mb-app svg{width:.95rem;height:.95rem}
.dd{padding:.35rem}
.dd-head{padding:.5rem .65rem .6rem}
.dd-name{display:block;font-weight:600;font-size:13px}
.dd-status{display:flex;align-items:center;gap:.45rem;color:var(--ink-muted);margin-top:.15rem;transition:opacity .3s}
.st{flex:none;position:relative;width:.5rem;height:.5rem;border-radius:50%;background:var(--ink-muted);transition:background .4s}
.go .st{background:var(--ready);box-shadow:0 0 0 3px var(--ready-soft)}
.sw .dd-status{opacity:.55}
.sw .st{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-muted);border-top-color:transparent;animation:spin .8s linear infinite}
.sw .st::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.sep{height:1px;background:var(--line);margin:.3rem .65rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.42rem .65rem;border-radius:6px;min-width:0}
.row>span:first-child{min-width:0}
.row.hl{background:var(--accent);color:var(--on-accent)}
.row.hl .kbd{color:var(--on-accent);opacity:.85}
.kbd{color:var(--ink-muted);letter-spacing:.06em;white-space:nowrap}
.tgl{flex:none;position:relative;width:1.9rem;height:1.1rem;border-radius:999px;background:var(--tgl)}
.tgl::after{content:"";position:absolute;top:.12rem;left:.12rem;width:.86rem;height:.86rem;border-radius:50%;background:var(--knob);box-shadow:0 1px 2px var(--shadow)}
.tgl.on{background:var(--accent)}
.tgl.on::after{left:auto;right:.12rem}

/* benefits */
.alt{background:var(--surface)}
.alt .tile{background:var(--bg)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.6rem}
.tile{border-radius:20px;padding:1.6rem 1.5rem 1.8rem;border:1px solid var(--line);min-width:0}
.ico{width:2.9rem;height:2.9rem;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:1.4rem}
.ico svg{width:1.5rem;height:1.5rem;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font:700 1.15rem/1.25 var(--display);letter-spacing:-.01em;margin-bottom:.55rem}
.tile p{color:var(--ink-muted);font-size:1rem}

/* platforms */
.plats{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.plats li{border-radius:20px;padding:1.6rem 1.5rem 1.8rem;background:var(--surface);border:1px solid var(--line);min-width:0}
.plats li.later{background:transparent;border:1.5px dashed var(--line-2)}
.plats li.ready{border-color:var(--ready-soft);box-shadow:inset 0 0 0 1px var(--ready-soft)}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.02em}
.pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
/* state colour on the dot and the tint, text in --ink: green or amber text on its tint is under 4.5:1 in the light theme */
.ready .pill{color:var(--ink);background:var(--ready-soft)}
.ready .pill::before{background:var(--ready)}
.coming .pill{color:var(--ink);background:var(--coming-soft)}
.coming .pill::before{background:var(--coming)}
.later .pill{color:var(--ink-muted);border:1px dashed var(--line-2)}
.later .pill::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.plats h3{font:800 1.5rem/1.2 var(--display);letter-spacing:-.02em;margin:1.2rem 0 .45rem}
.plats p{color:var(--ink-muted);font-size:1rem}
.later h3{color:var(--ink-muted)}

/* download */
.alt .plats li{background:var(--bg)}
.dl-req{color:var(--ink-muted);margin-top:1.2rem;max-width:46rem}
.plats.dl{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem}
.plats.dl h3{margin-top:0}
.plats.dl .btn{margin:1.1rem 0 .9rem}
.dl-notes{list-style:none;margin:1rem 0 0;padding:1.25rem 1.5rem;border-radius:20px;border:1px solid var(--line);display:grid;gap:1rem}
.dl-notes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;color:var(--ink-muted)}
.dl-notes svg{width:1.35rem;height:1.35rem;margin-top:.1rem;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dl-notes a,.dl-ver a,.compat-outro a,.tile a,details .a a{color:var(--ink)}
.dl-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;margin-top:1.6rem}
.dl-ver{color:var(--ink-muted);font-size:.95rem}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{filter:none;box-shadow:none;border-color:var(--ink-muted)}

/* compat: four levels, state colour on the dot, the tint and the bar; text in --ink for contrast */
.compat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.compat-head .lead{margin-top:1.2rem;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.compat-intro{margin-top:1rem;color:var(--ink-muted)}
.levels{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.lv{position:relative;display:grid;gap:.65rem;justify-items:start;padding:1.15rem 1.35rem 1.25rem 1.6rem;border-radius:18px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.lv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lv)}
.lv-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .75rem;border-radius:999px;background:var(--lv-soft);color:var(--ink);font:600 .86rem/1.25 var(--body);letter-spacing:.01em}
.lv-tag::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--lv)}
.lv p{color:var(--ink-muted);font-size:1rem}
.lv-tested{--lv:var(--ready);--lv-soft:var(--ready-soft);border-color:var(--ready-soft)}
.lv-should{--lv:var(--accent);--lv-soft:var(--accent-soft)}
.lv-might{--lv:var(--ink-muted);--lv-soft:var(--line)}
.lv-skip{--lv:transparent;--lv-soft:transparent;background:transparent;border:1.5px dashed var(--line-2)}
.lv-skip .lv-tag{box-shadow:inset 0 0 0 1px var(--line-2)}
.lv-skip .lv-tag::before{box-shadow:inset 0 0 0 1.5px var(--ink-muted)}
.compat-outro{margin-top:1.4rem;color:var(--ink-muted)}
.fine{margin-top:1rem;font-size:.82rem;color:var(--ink-muted)}

/* join */
.join .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.join .lead{color:var(--ink-muted);margin-top:1.2rem;max-width:26rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(1.25rem,4vw,2.4rem);box-shadow:0 30px 70px -40px var(--shadow)}
.field{margin:0 0 1.4rem;border:0;padding:0;min-width:0}
.field>label,.field legend{display:block;font-size:.92rem;font-weight:600;margin-bottom:.55rem;padding:0}
.inp{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:14px;padding:0 1rem;min-height:3.2rem;transition:border-color .18s,box-shadow .18s}
.inp::placeholder{color:var(--ink-muted);opacity:.8}
.inp:hover{border-color:var(--ink-muted)}
.inp:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.inp[aria-invalid="true"]{border-color:var(--error)}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{position:relative}
.opt input{position:absolute;z-index:1;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt label{position:relative;display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:0 1.15rem 0 .85rem;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);font-size:.95rem;font-weight:500;cursor:pointer;transition:border-color .18s,background .18s}
.opt input:hover+label{border-color:var(--ink-muted)}
.opt input:checked+label{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.opt label::before{content:"";flex:none;width:1.05rem;height:1.05rem;border-radius:5px;border:1.5px solid var(--line-2);background:var(--surface);transition:background .18s,border-color .18s}
.opt label::after{content:"";position:absolute;left:1.2rem;top:50%;width:.3rem;height:.55rem;margin-top:-.36rem;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .15s}
.opt input:checked+label::before{background:var(--accent);border-color:var(--accent)}
.opt input:checked+label::after{opacity:1}
.hint-s{font-size:.82rem;color:var(--ink-muted);margin-top:.55rem}
.opt input:focus-visible+label{outline:2px solid var(--accent);outline-offset:3px}
.opt input[aria-invalid="true"]+label{border-color:var(--error)}
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start;font-size:.9rem;line-height:1.5;color:var(--ink-muted)}
.consent input{appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;margin:.1rem 0 0;border:1.5px solid var(--ink-muted);border-radius:6px;background:var(--bg);cursor:pointer;display:grid;place-items:center}
.consent input::after{content:"";width:.35rem;height:.65rem;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.consent input:checked{background:var(--accent);border-color:var(--accent)}
.consent input:checked::after{opacity:1}
.consent input[aria-invalid="true"]{border-color:var(--error)}
.consent a{color:var(--ink)} /* --accent on --surface is 4.45:1 in the dark theme */
.err{color:var(--error);font-size:.88rem;font-weight:500;margin-top:.5rem}
.consent+.err{padding-left:2.05rem}
.err:empty{display:none}
#submit{width:100%;margin-top:.4rem}
.done{outline:none;padding-block:1rem}
.done .ok{width:3rem;height:3rem;border-radius:50%;background:var(--ready-soft);display:grid;place-items:center;margin-bottom:1.3rem}
.done .ok svg{width:1.5rem;height:1.5rem;fill:none;stroke:var(--ready);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.done h3{font:800 clamp(1.7rem,3.4vw,2.3rem)/1.1 var(--display);letter-spacing:-.02em;margin-bottom:.7rem}
.done p{color:var(--ink-muted)}

/* faq */
.faqwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2rem,6vw,5rem)}
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.3rem 0;font:700 1.08rem/1.35 var(--display);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:linear-gradient(var(--accent),var(--accent)) center/.75rem 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px .75rem no-repeat,var(--accent-soft);transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
summary:hover{color:var(--accent)}
details .a{padding:0 3rem 1.5rem 0;color:var(--ink-muted);max-width:42rem}

/* privacy + footer */
.privacy{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem)}
.privacy h2{font:700 1rem/1.3 var(--display);margin:0 0 1.2rem;color:var(--ink-muted)}
.privacy .body{white-space:pre-line;font-size:.86rem;line-height:1.7;color:var(--ink-muted);max-width:46rem;overflow-wrap:anywhere}
footer{border-top:1px solid var(--line);padding-block:2.2rem 3rem;font-size:.85rem;color:var(--ink-muted);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:start}
footer .meta{display:flex;gap:1.5rem;flex-wrap:wrap}
footer .company{display:grid;gap:.35rem}
footer .company p:first-child{font-weight:600;color:var(--ink)}
footer .company a{color:inherit}
footer .company .disclaimer{margin-top:.6rem}

@media (max-width:1060px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .how,.join .wrap,.faqwrap,.compat,.demo-head{grid-template-columns:minmax(0,1fr)}
  .plats{grid-template-columns:minmax(0,1fr)}
  html:not(.has3d) .stage{grid-template-columns:minmax(0,1fr);padding-top:7.5rem;min-height:0}
}
@media (max-width:760px){
  .has3d .scene{height:180vh}
  .has3d .copy{align-items:flex-start;padding-top:7.2rem}
  .endc{top:52%}
}
@media (max-width:600px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .plats.dl{grid-template-columns:minmax(0,1fr)}
  .demo-frame:not(.has-video){aspect-ratio:4/3}
  .demo-ph{width:62%;top:8%}
  .demo-frame{border-radius:18px}
  .dl-notes{padding:1.1rem 1.1rem 1.15rem}
  .lv{padding:1rem 1.1rem 1.1rem 1.35rem}
  .m-menu{width:min(18rem,92%)}
  .m-shot{width:min(17.5rem,80%)}
  footer{grid-template-columns:minmax(0,1fr)}
  .top{padding-block:.8rem}
  .langs button{min-width:2.6rem}
  .stag{font-size:.78rem;padding:.32rem .65rem}
  .still{margin-bottom:2.5rem}
  .stag.p,.stag.l{top:auto;bottom:-2.2rem;transform:none}
}
/* short screens (small phones, phones in landscape): keep headline, CTA and the glasses in the first frame */
@media (max-width:760px) and (max-height:640px){
  .has3d .copy{padding-top:5.6rem}
  .has3d h1{font-size:2.2rem;margin:.9rem 0 .8rem}
  .has3d .sub{font-size:.98rem}
  .has3d .ctas{margin-top:1.1rem;row-gap:.2rem}
}
@media (orientation:landscape) and (max-height:500px){
  .has3d .copy{align-items:center;padding-top:3.4rem}
  .has3d .copy-in{max-width:min(26rem,48%)}
  .has3d .eyebrow{display:none}
  .has3d h1{font-size:2.1rem;margin:0 0 .6rem}
  .has3d .sub{font-size:.95rem}
  .has3d .ctas{margin-top:1rem;row-gap:.1rem}
  .has3d .ctas .btn{min-height:2.9rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

#website{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.download-command{display:block;overflow-wrap:anywhere;margin-top:1rem}