/* THE MAC VIEW OF /download — 2026-10-25, the public launch. The Windows view's twin (dl-rec.css):
   same left column, and a stage drawn in code — no Apple artwork, our paper and ink with the few
   colours a Mac visitor recognises (window lights, the blue of a default button, a folder).
   World: 100 × 80 units (--u), like .dlr. One loop = --mdl. The still frame (reduced motion, and
   before the loop starts) is the drag: base styles below ARE that frame; the keyframes move off it.
   Shown on a real Mac once the .dmg files are hosted: html.lf-os-mac[data-mac-dl=open] (site.js). */

:root{--mdl:16s;--mdl-ease:cubic-bezier(.45,0,.25,1)}
.mdl-page{display:none!important}
html.lf-os-mac[data-mac-dl=open] .mdl-page{display:flex!important}
html.lf-os-mac[data-mac-dl=open] #mac{display:none!important}
/* the page margins of the Windows view: waitlist.css takes them away from every non-Windows page
   (.os-notwin #main.v2dl{padding:0}) because the waitlist's photo runs edge to edge */
html.lf-os-mac[data-mac-dl=open] #main.v2dl{padding:0 40px}
html.lf-os-mac[data-mac-dl=open] #main.v2dl+.foot{padding-top:clamp(96px,calc(22svh - 50px),170px)}
@media(max-width:900px){html.lf-os-mac[data-mac-dl=open] #main.v2dl{padding:0 24px}html.lf-os-mac[data-mac-dl=open] #main.v2dl+.foot{padding-top:clamp(120px,22svh,220px)}}
@media(max-width:520px){html.lf-os-mac[data-mac-dl=open] #main.v2dl{padding:0 16px}}

/* the left column, as .os-win does it in dl-rec.css */
.mdl-page .w-steps{margin-top:40px}
.mdl-page .w-step{padding:14px 0}
.mdl-page .w-stage{justify-self:end;width:100%}
.mdl-page .v2-act{margin-top:32px}
.mdl-page .v2-act .v-dl{font-size:18px}
.mdl-status .mdl-st-pick,.mdl-status.is-pick .mdl-st-go{display:none}
.mdl-status.is-pick .mdl-st-pick{display:inline}
.mdl-status.is-pick .w-live{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.mdl-get{display:contents}
.mdl-pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mdl-pick .v-dl{font-size:18px}
.mdl-hint{flex-basis:100%;max-width:440px;font-size:18px;line-height:1.45;color:#15151599}
.mdl-hint b{font-weight:600;color:var(--ink)}
.mdl-pick:not([style*="none"])+.tl{flex-basis:100%}
html.mdl-go .mdl-steps .w-step{cursor:pointer}

/* ── the stage ─────────────────────────────────────────────────────────── */
.mdl{position:relative;width:100%;aspect-ratio:5/4;margin:0;border-radius:24px;overflow:hidden;isolation:isolate;background:#a96f28;container-type:size;cursor:default;user-select:none;-webkit-user-select:none;
  --u:min(1cqw,1.25cqh);--pp:#fdfcf8;--ik:#151515;--sd:#f3efe5;--blue:#0a6cff;--mac:-apple-system,BlinkMacSystemFont,"SF Pro Text",Figtree,system-ui,sans-serif;
  --z0:translate(0px,0px) scale(1);--z1:translate(-10cqw,-8.25cqh) scale(1.22);--z2:translate(-26.4cqw,-20.5cqh) scale(1.35)}
.mdl:after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;border:1px solid rgba(21,21,21,.1);pointer-events:none}
.mdl-cam{position:absolute;inset:0;transform-origin:0 0}
.mdl-ph{position:absolute;inset:0;z-index:0;background:#a96f28}
.mdl-ph picture,.mdl-ph img{display:block;width:100%;height:100%;object-fit:cover}
.mdl-ph img{transform:scale(1.3);transform-origin:50% 34%}
.mdl-world{position:absolute;z-index:2;left:50%;top:50%;width:calc(var(--u)*100);height:calc(var(--u)*80);translate:-50% -50%;font:400 max(calc(var(--u)*1.7),10px)/1.3 var(--mac);color:var(--ik)}
.mdl-world>*{position:absolute}
.mdl-world svg{display:block;overflow:visible}

/* menu bar + Dock */
.mdl-menu{left:calc((var(--u)*100 - 100cqw) / 2);width:100cqw;top:0;height:calc(var(--u)*3.4);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*2.2);background:#fdfcf8c7;border-bottom:1px solid rgba(21,21,21,.06);white-space:nowrap;font-size:max(calc(var(--u)*1.5),9px)}
.mdl-mb{display:flex;align-items:center;gap:calc(var(--u)*1.9)}
.mdl-mb span{color:#151515b3}
.mdl-logo{display:block;width:calc(var(--u)*1.3);height:calc(var(--u)*1.3);border-radius:50%;background:var(--ik)}
.mdl-mr{color:#151515b3}
.mdl-dock{left:calc(var(--u)*31);top:calc(var(--u)*71.4);width:calc(var(--u)*38);height:calc(var(--u)*6.6);border-radius:calc(var(--u)*2);background:#fdfcf8bf;outline:1px solid rgba(21,21,21,.1);outline-offset:-1px}
.mdl-dock>i{position:absolute;top:calc(var(--u)*.9);width:calc(var(--u)*4.8);height:calc(var(--u)*4.8);border-radius:calc(var(--u)*1.2);background:var(--c);outline:1px solid rgba(21,21,21,.08);outline-offset:-1px}
.mdl-dock>i:nth-child(1){left:calc(var(--u)*1.4)}.mdl-dock>i:nth-child(2){left:calc(var(--u)*7.4)}.mdl-dock>i:nth-child(3){left:calc(var(--u)*13.4)}.mdl-dock>i:nth-child(4){left:calc(var(--u)*19.4)}.mdl-dock>i:nth-child(5){left:calc(var(--u)*25.4)}
.mdl-dk{position:absolute;left:calc(var(--u)*31.4);top:calc(var(--u)*.9);width:calc(var(--u)*4.8);height:calc(var(--u)*4.8);transform-origin:50% 100%;opacity:0;transform:scale(.2)}
.mdl-run{position:absolute;left:calc(var(--u)*33.5);top:calc(var(--u)*5.9);width:calc(var(--u)*.6);height:calc(var(--u)*.6);border-radius:50%;background:var(--ik);opacity:0}

/* the app icon: our L-wave, paper on ink */
.mdl-app{display:grid;place-items:center;width:100%;height:100%;border-radius:22%;background:var(--ik);box-shadow:0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(21,21,21,.18)}
.mdl-mark{width:32%;height:auto;fill:var(--pp)}

/* a window */
.mdl-dmg,.mdl-set,.mdl-copy,.mdl-gk,.mdl-wl{background:#fbfaf8;border-radius:calc(var(--u)*1.2);outline:1px solid rgba(21,21,21,.14);outline-offset:-1px;box-shadow:0 calc(var(--u)*1.2) calc(var(--u)*4) rgba(30,18,6,.28)}
.mdl-bar{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*4.2);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(21,21,21,.07)}
.mdl-tl{position:absolute;left:calc(var(--u)*1.6);top:calc(var(--u)*1.45);display:flex;gap:calc(var(--u)*.8)}
.mdl-tl i{display:block;width:calc(var(--u)*1.3);height:calc(var(--u)*1.3);border-radius:50%;background:#ff5f57}
.mdl-tl i:nth-child(2){background:#febc2e}.mdl-tl i:nth-child(3){background:#28c840}
.mdl-tt{font-weight:600;color:#151515b3}

/* the .dmg window — what the real one shows (app/build/dmg-background.tiff) */
.mdl-dmg{left:calc(var(--u)*14);top:calc(var(--u)*9);width:calc(var(--u)*62);height:calc(var(--u)*42)}
.mdl-dmg>*{position:absolute}
.mdl-dh{left:0;right:0;top:calc(var(--u)*7);text-align:center;font:400 max(calc(var(--u)*2.6),12px)/1.2 var(--v-serif);letter-spacing:-.01em;white-space:nowrap}
.mdl-dhi{font-style:italic;color:#034f46}
.mdl-i{top:calc(var(--u)*15);width:calc(var(--u)*11);height:calc(var(--u)*11)}
.mdl-i1{left:calc(var(--u)*12)}
.mdl-i2{left:calc(var(--u)*39);transform-origin:50% 60%}
.mdl-lb{position:absolute;left:-50%;right:-50%;top:calc(100% + var(--u)*1.1);text-align:center;white-space:nowrap;font-size:max(calc(var(--u)*1.6),9px)}
.mdl-arw{left:calc(var(--u)*24.5);top:calc(var(--u)*17.5);width:calc(var(--u)*13);height:calc(var(--u)*3.3);fill:none;stroke:var(--ik);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mdl-folder{position:absolute;inset:4% 0 0;width:100%;height:auto}
.mdl-fb{fill:#6aa7e6}.mdl-ff{fill:#8ec0f2}.mdl-fa{fill:none;stroke:#3f7fc4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mdl-dz{position:absolute;inset:-14%;border-radius:22%;background:rgba(21,21,21,.1);opacity:0}
.mdl-dn{left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*34);height:calc(var(--u)*5.2);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*1);background:var(--sd);white-space:nowrap;color:#151515b3;font-size:max(calc(var(--u)*1.45),9px)}
.mdl-dn b{font-weight:600;color:var(--ik)}

/* the drag: the icon under the cursor (still frame: half way) */
.mdl-ghost{left:0;top:0;width:calc(var(--u)*11);height:calc(var(--u)*11);margin:calc(var(--u)*-5.5) 0 0 calc(var(--u)*-5.5);opacity:.78;translate:calc(var(--u)*45) calc(var(--u)*29.5)}

/* copying */
.mdl-copy{left:calc(var(--u)*33);top:calc(var(--u)*42);width:calc(var(--u)*34);height:calc(var(--u)*9);opacity:0}
.mdl-copy>*{position:absolute}
.mdl-cpt{left:calc(var(--u)*2);top:calc(var(--u)*1.8);white-space:nowrap;font-size:max(calc(var(--u)*1.6),9px)}
.mdl-cpb{left:calc(var(--u)*2);right:calc(var(--u)*2);top:calc(var(--u)*5.4);height:max(calc(var(--u)*.55),3px);border-radius:3px;background:#eeebe3;overflow:hidden}
.mdl-cpb i{position:absolute;inset:0;background:var(--blue);transform-origin:0 50%;transform:scaleX(.3)}

/* "Not Opened" — the alert of the first open */
.mdl-gk{left:calc(var(--u)*35);top:calc(var(--u)*16);width:calc(var(--u)*30);height:calc(var(--u)*33);opacity:0;transform-origin:50% 45%}
.mdl-gk>*{position:absolute}
.mdl-gki{left:calc(var(--u)*12);top:calc(var(--u)*3);width:calc(var(--u)*6);height:calc(var(--u)*6)}
.mdl-gkh{left:0;right:0;top:calc(var(--u)*11);text-align:center;font-weight:700;white-space:nowrap;font-size:max(calc(var(--u)*1.9),10px)}
.mdl-gkl{left:calc(var(--u)*(15 - var(--w) / 2));top:calc(var(--u)*var(--y));width:calc(var(--u)*var(--w));height:calc(var(--u)*1.05);border-radius:calc(var(--u)*.55);background:rgba(21,21,21,.1)}
.mdl-gb{top:calc(var(--u)*26.8);width:calc(var(--u)*13);height:calc(var(--u)*3.8);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*.9);white-space:nowrap;font-weight:500;font-size:max(calc(var(--u)*1.6),9px)}
.mdl-trash{left:calc(var(--u)*1.6);background:rgba(21,21,21,.07)}
.mdl-done{left:calc(var(--u)*15.4);background:var(--blue);color:#fff}
.mdl-nt{left:calc(var(--u)*58);top:calc(var(--u)*12.4);height:calc(var(--u)*6.4);display:flex;align-items:center;padding:0 calc(var(--u)*2.4) 0 calc(var(--u)*2.2);border-radius:calc(var(--u)*3.2);background:var(--pp);outline:1px solid rgba(21,21,21,.16);outline-offset:-1px;font:600 max(calc(var(--u)*3.5),17px)/1 var(--v-hand);color:var(--ik);white-space:nowrap;rotate:-2.5deg;transform-origin:0 50%;opacity:0}
.mdl-nt>span{display:block;padding-bottom:.08em}

/* System Settings › Privacy & Security */
.mdl-set{left:calc(var(--u)*12);top:calc(var(--u)*9);width:calc(var(--u)*76);height:calc(var(--u)*52);overflow:hidden;opacity:0}
.mdl-set>*{position:absolute}
.mdl-set .mdl-bar{border:0;width:calc(var(--u)*21);background:transparent}
.mdl-side{left:0;top:0;bottom:0;width:calc(var(--u)*21);background:#efebe2;border-right:1px solid rgba(21,21,21,.07)}
.mdl-side>*{position:absolute}
.mdl-srch{left:calc(var(--u)*1.4);right:calc(var(--u)*1.4);top:calc(var(--u)*5.4);height:calc(var(--u)*2.7);border-radius:calc(var(--u)*.8);background:rgba(21,21,21,.07)}
.mdl-row{left:calc(var(--u)*1.2);right:calc(var(--u)*1.2);top:calc(var(--u)*(10 + var(--y) * 3.7));height:calc(var(--u)*3);display:flex;align-items:center;gap:calc(var(--u)*.9);padding-left:calc(var(--u)*.9);border-radius:calc(var(--u)*.8);white-space:nowrap;font-size:max(calc(var(--u)*1.5),9px)}
.mdl-row:before{content:"";flex:none;width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);border-radius:calc(var(--u)*.45);background:rgba(21,21,21,.18)}
.mdl-row:after{content:"";width:calc(var(--u)*var(--w,0));height:calc(var(--u)*.95);border-radius:calc(var(--u)*.5);background:rgba(21,21,21,.1)}
.mdl-row.mdl-on{background:var(--blue);color:#fff;font-weight:500}
.mdl-row.mdl-on:before{background:#ffffffb3}
.mdl-row.mdl-on:after{display:none}
.mdl-row.mdl-on i{display:none}
.mdl-sh{left:calc(var(--u)*24.5);top:calc(var(--u)*6.4);font-weight:700;white-space:nowrap;font-size:max(calc(var(--u)*2.3),11px)}
.mdl-sl{left:calc(var(--u)*24.5);top:calc(var(--u)*var(--y));width:calc(var(--u)*var(--w));height:calc(var(--u)*1.05);border-radius:calc(var(--u)*.55);background:rgba(21,21,21,.09)}
.mdl-sg{left:calc(var(--u)*24.5);top:calc(var(--u)*25.6);font-weight:700;white-space:nowrap;color:#151515b3}
.mdl-box{left:calc(var(--u)*24.5);right:calc(var(--u)*3);top:calc(var(--u)*29);height:calc(var(--u)*13);border-radius:calc(var(--u)*1);background:rgba(21,21,21,.04);outline:1px solid rgba(21,21,21,.08);outline-offset:-1px}
.mdl-box>*{position:absolute}
.mdl-bt{left:calc(var(--u)*2);top:calc(var(--u)*2.2);white-space:nowrap}
.mdl-oa{right:calc(var(--u)*2);top:calc(var(--u)*6.8);height:calc(var(--u)*3.8);padding:0 calc(var(--u)*2);display:flex;align-items:center;border-radius:calc(var(--u)*.9);background:#fff;outline:1px solid rgba(21,21,21,.16);outline-offset:-1px;white-space:nowrap;font-weight:500}

/* LoudFlow's welcome, as in dl-rec.css */
.mdl-wl{left:calc(var(--u)*28);top:calc(var(--u)*13);width:calc(var(--u)*44);height:calc(var(--u)*42);opacity:0;transform-origin:50% 50%}
.mdl-wl>*{position:absolute}
.mdl-wlh{left:0;right:0;top:calc(var(--u)*7.4);text-align:center;font:400 max(calc(var(--u)*3.7),16px)/1.12 "EB Garamond",var(--v-serif);color:#16150f;letter-spacing:-.01em}
.mdl-wlh .v-hand{font-size:1.18em;line-height:1}
.mdl-wll{left:calc(var(--u)*10);width:calc(var(--u)*24);top:calc(var(--u)*19.4);height:calc(var(--u)*1.1);border-radius:calc(var(--u)*.6);background:#16150f1a}
.mdl-wlb{left:calc(var(--u)*6);width:calc(var(--u)*32);top:calc(var(--u)*23.2);height:calc(var(--u)*4.8);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*.8);background:#fff;outline:1px solid rgba(22,21,15,.2);outline-offset:-1px;font-family:Figtree,system-ui,sans-serif;white-space:nowrap}
.mdl-wld{left:calc(var(--u)*6);width:calc(var(--u)*32);top:calc(var(--u)*31.4);height:1px;background:#16150f1f}
.mdl-wlf{left:calc(var(--u)*6);width:calc(var(--u)*32);top:calc(var(--u)*33.6);height:calc(var(--u)*4.8);border-radius:calc(var(--u)*.8);outline:1px solid rgba(22,21,15,.14);outline-offset:-1px}
.mdl-wlf i{position:absolute;left:calc(var(--u)*1.8);top:calc(50% - var(--u)*.5);width:calc(var(--u)*13);height:calc(var(--u)*1);border-radius:calc(var(--u)*.5);background:#16150f1a}
.mdl-pill{left:calc(var(--u)*43.5);top:calc(var(--u)*63.6);width:calc(var(--u)*13);height:calc(var(--u)*5);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*.62);border:1px solid rgba(253,252,248,.24);border-radius:calc(var(--u)*2.5);background:var(--ik);opacity:0}
.mdl-pill i{display:block;width:max(calc(var(--u)*.42),2.5px);height:calc(var(--u)*.85);border-radius:2px;background:var(--pp)}

/* cursor + clicks (the still frame: mid-drag) */
.mdl-cur{left:0;top:0;width:calc(var(--u)*2.1);height:calc(var(--u)*3.15);margin:calc(var(--u)*-.15) 0 0 calc(var(--u)*-.15);fill:var(--ik);stroke:#fff;stroke-width:1.1;stroke-linejoin:round;transform-origin:calc(var(--u)*.15) calc(var(--u)*.15);translate:calc(var(--u)*45) calc(var(--u)*29.5)}
.mdl-rip{left:0;top:0;width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);margin:calc(var(--u)*-2.2) 0 0 calc(var(--u)*-2.2);border-radius:50%;border:max(1.5px,calc(var(--u)*.26)) solid rgba(21,21,21,.4);opacity:0}
.mdl-r1{left:calc(var(--u)*31.5);top:calc(var(--u)*29.5)}
.mdl-r2{left:calc(var(--u)*58.5);top:calc(var(--u)*29.5)}
.mdl-r3{left:calc(var(--u)*64.8);top:calc(var(--u)*74.7)}
.mdl-r4{left:calc(var(--u)*56.9);top:calc(var(--u)*44.7);border-color:#ffffffbf}
.mdl-r5{left:calc(var(--u)*76.5);top:calc(var(--u)*46.8)}

/* ── the loop ──────────────────────────────────────────────────────────── */
/* 0–33 % step 1: drag into Applications, copy · 34–55 % step 2: open from the Dock, "Not Opened", Done
   · 56–70 % step 3: Privacy & Security › Open Anyway · 71–96 % LoudFlow opens: Welcome, then the pill. */
.mdl-go :is(.mdl-cam,.mdl-dmg,.mdl-dz,.mdl-i2,.mdl-ghost,.mdl-copy,.mdl-cpb i,.mdl-dk,.mdl-run,.mdl-gk,.mdl-done,.mdl-nt,.mdl-nt>span,.mdl-set,.mdl-oa,.mdl-wl,.mdl-pill,.mdl-pill i,.mdl-rip,.mdl-cur),.mdl-go .mdl-steps .w-step,.mdl-go .mdl-steps .w-n{animation-duration:var(--mdl);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:var(--mdl-ease);animation-delay:var(--mdl-at,0s)}
.mdl-pause .mdl *,.mdl-pause .mdl-steps :is(.w-step,.w-n),.mdl-hold .mdl *,.mdl-hold .mdl-steps :is(.w-step,.w-n){animation-play-state:paused!important}

.mdl-go .mdl-cam{animation-name:mdlZoom}
@keyframes mdlZoom{0%,3%{transform:var(--z0)}8%,25%{transform:var(--z1)}31%,57%{transform:var(--z0)}61%,69%{transform:var(--z2)}73%,to{transform:var(--z0)}}

.mdl-go .mdl-dmg{animation-name:mdlDmg}
@keyframes mdlDmg{0%,33.5%{opacity:1;transform:none}35.5%,96.5%{opacity:0;transform:scale(.985)}99%,to{opacity:1;transform:none}}

.mdl-go .mdl-ghost{animation-name:mdlGhost}
@keyframes mdlGhost{0%,8.9%{opacity:0;translate:calc(var(--u)*31.5) calc(var(--u)*29.5);scale:1}
  9.6%{opacity:.78;translate:calc(var(--u)*31.5) calc(var(--u)*29.5);scale:1}
  21%{opacity:.78;translate:calc(var(--u)*58.5) calc(var(--u)*29.5);scale:1}
  23%,to{opacity:0;translate:calc(var(--u)*58.5) calc(var(--u)*29.5);scale:.55}}
.mdl-go .mdl-dz{animation-name:mdlDz}
@keyframes mdlDz{0%,18.5%{opacity:0}20%,22.4%{opacity:1}23.5%,to{opacity:0}}
.mdl-go .mdl-i2{animation-name:mdlDrop}
@keyframes mdlDrop{0%,22%{transform:none}23.4%{transform:scale(1.1)}25%,to{transform:none}}

.mdl-go .mdl-copy{animation-name:mdlCopy}
@keyframes mdlCopy{0%,23.5%{opacity:0;transform:translateY(calc(var(--u)*.6))}25%,31.5%{opacity:1;transform:none}33%,to{opacity:0;transform:none}}
.mdl-go .mdl-cpb i{animation-name:mdlCpb}
@keyframes mdlCpb{0%,24.5%{transform:scaleX(0)}31%,to{transform:scaleX(1)}}

.mdl-go .mdl-dk{animation-name:mdlDk}
@keyframes mdlDk{0%,30.5%{opacity:0;transform:scale(.2)}32.5%,38.6%{opacity:1;transform:none}
  39.8%{opacity:1;transform:translateY(calc(var(--u)*-2.2))}41%{opacity:1;transform:none}42.2%{opacity:1;transform:translateY(calc(var(--u)*-1.4))}43.4%,70%{opacity:1;transform:none}
  71.2%{opacity:1;transform:translateY(calc(var(--u)*-2.2))}72.4%,96.5%{opacity:1;transform:none}98%,to{opacity:0;transform:scale(.2)}}
.mdl-go .mdl-run{animation-name:mdlRun}
@keyframes mdlRun{0%,39.5%{opacity:0}40.5%,96.5%{opacity:1}98%,to{opacity:0}}

.mdl-go .mdl-gk{animation-name:mdlGk}
@keyframes mdlGk{0%,43%{opacity:0;transform:scale(.965)}45%,52.5%{opacity:1;transform:none}54.5%,to{opacity:0;transform:scale(.985)}}
.mdl-go .mdl-done{animation-name:mdlDone}
@keyframes mdlDone{0%,51%{filter:none}51.4%,52.2%{filter:brightness(.82)}52.6%,to{filter:none}}
.mdl-go .mdl-nt{animation-name:mdlNt}
@keyframes mdlNt{0%,45.5%{opacity:0;transform:scale(.92)}47%,52.5%{opacity:1;transform:none}54.5%,to{opacity:0;transform:none}}
.mdl-go .mdl-nt>span{animation-name:mdlNtW}
@keyframes mdlNtW{0%,45.7%{clip-path:inset(-30% 100% -30% 0)}49.5%,to{clip-path:inset(-30% 0 -30% 0)}}

.mdl-go .mdl-set{animation-name:mdlSet}
@keyframes mdlSet{0%,55%{opacity:0;transform:scale(.975)}57%,68.5%{opacity:1;transform:none}70.5%,to{opacity:0;transform:scale(.985)}}
.mdl-go .mdl-oa{animation-name:mdlOa}
@keyframes mdlOa{0%,64.2%{background:#fff;color:var(--ik)}64.6%,67.5%{background:var(--blue);color:#fff}68.5%,to{background:#fff;color:var(--ik)}}

.mdl-go .mdl-wl{animation-name:mdlWl}
@keyframes mdlWl{0%,73%{opacity:0;transform:scale(.975)}75%,86%{opacity:1;transform:none}88%,to{opacity:0;transform:translateY(calc(var(--u)*14)) scale(.4)}}
.mdl-go .mdl-pill{animation-name:mdlPill}
@keyframes mdlPill{0%,87.5%{opacity:0;transform:translateY(calc(var(--u)*2))}89.5%,96%{opacity:1;transform:none}97.5%,to{opacity:0;transform:none}}
.mdl-go .mdl-pill i{animation-name:mdlWave;animation-timing-function:ease-in-out;animation-delay:calc(var(--mdl-at,0s) + var(--j,0) * 70ms)}
.mdl-pill i:nth-child(2){--j:1}.mdl-pill i:nth-child(3){--j:2}.mdl-pill i:nth-child(4){--j:3}.mdl-pill i:nth-child(5){--j:4}
@keyframes mdlWave{0%,90.5%{transform:none}91.3%{transform:scaleY(2.6)}92.1%{transform:scaleY(1.5)}92.9%{transform:scaleY(2.3)}93.7%{transform:scaleY(1.3)}94.5%{transform:scaleY(2.4)}95.3%,to{transform:none}}

.mdl-go .mdl-world .mdl-rip{animation-timing-function:cubic-bezier(.2,.7,.3,1)}
.mdl-go .mdl-r1{animation-name:mdlR1}.mdl-go .mdl-r2{animation-name:mdlR2}.mdl-go .mdl-r3{animation-name:mdlR3}.mdl-go .mdl-r4{animation-name:mdlR4}.mdl-go .mdl-r5{animation-name:mdlR5}
@keyframes mdlR1{0%,8.7%{opacity:0;transform:scale(.3)}8.95%{opacity:1;transform:scale(.35)}11.8%,to{opacity:0;transform:scale(1.5)}}
@keyframes mdlR2{0%,21.8%{opacity:0;transform:scale(.3)}22.05%{opacity:1;transform:scale(.35)}24.9%,to{opacity:0;transform:scale(1.5)}}
@keyframes mdlR3{0%,38.4%{opacity:0;transform:scale(.3)}38.65%{opacity:1;transform:scale(.35)}41.5%,to{opacity:0;transform:scale(1.5)}}
@keyframes mdlR4{0%,51.2%{opacity:0;transform:scale(.3)}51.45%{opacity:1;transform:scale(.35)}54.3%,to{opacity:0;transform:scale(1.5)}}
@keyframes mdlR5{0%,64.3%{opacity:0;transform:scale(.3)}64.55%{opacity:1;transform:scale(.35)}67.4%,to{opacity:0;transform:scale(1.5)}}

.mdl-go .mdl-cur{animation-name:mdlCur,mdlPress}
@keyframes mdlCur{0%,1%{translate:calc(var(--u)*62) calc(var(--u)*60);opacity:1}
  8%,9.6%{translate:calc(var(--u)*31.5) calc(var(--u)*29.5);opacity:1}
  21%,23%{translate:calc(var(--u)*58.5) calc(var(--u)*29.5);opacity:1}
  29%{translate:calc(var(--u)*66) calc(var(--u)*56);opacity:1}
  37%,39%{translate:calc(var(--u)*64.8) calc(var(--u)*74.7);opacity:1}
  48%,52.5%{translate:calc(var(--u)*56.9) calc(var(--u)*44.7);opacity:1}
  62%,66.5%{translate:calc(var(--u)*76.5) calc(var(--u)*46.8);opacity:1}
  71%,97%{translate:calc(var(--u)*82) calc(var(--u)*58);opacity:0}
  98.5%,to{translate:calc(var(--u)*62) calc(var(--u)*60);opacity:1}}
@keyframes mdlPress{0%,8.6%{scale:1}9%{scale:.84}9.4%,21.7%{scale:1}22.1%{scale:.84}22.6%,38.3%{scale:1}38.7%{scale:.84}39.2%,51.1%{scale:1}51.5%{scale:.84}52%,64.2%{scale:1}64.6%{scale:.84}65.1%,to{scale:1}}

.mdl-go .mdl-steps .w-step:nth-child(1){animation-name:mdlS1}
.mdl-go .mdl-steps .w-step:nth-child(2){animation-name:mdlS2}
.mdl-go .mdl-steps .w-step:nth-child(3){animation-name:mdlS3}
@keyframes mdlS1{0%,33%{color:var(--ink)}34%,98.6%{color:var(--mute)}99.5%,to{color:var(--ink)}}
@keyframes mdlS2{0%,33%{color:var(--mute)}34%,55%{color:var(--ink)}56%,to{color:var(--mute)}}
@keyframes mdlS3{0%,55%{color:var(--mute)}56%,98.6%{color:var(--ink)}99.5%,to{color:var(--mute)}}

/* ── narrower windows: the Windows view's order (dl-rec.css ≤ 1180 px) ─── */
@media(min-width:1181px)and (max-height:820px){.mdl-page .w-h{margin-top:14px}.mdl-page .w-steps{margin-top:28px}.mdl-page .w-step{padding:10px 0}.mdl-page .dlr-why{margin-top:16px}.mdl-page .v2-act{margin-top:24px}}
@media(max-width:1180px){
  .v2dl .mdl-page{max-width:720px;padding:112px 0 0}
  .mdl-page .w-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .mdl-page .w-text{display:contents}
  .mdl-page .w-status{order:1}.mdl-page .w-h{order:2;font-size:clamp(42px,6vw,56px)}
  .mdl-page .w-stage{order:3;margin-top:32px;justify-self:stretch}
  .mdl-page .w-steps{order:4;margin-top:20px;max-width:none}
  .mdl-page .dlr-why{order:4;max-width:none}
  .mdl-page .v2-act{order:6;margin-top:32px}
  .mdl-page .w-meta{order:7}}
@media(max-width:600px){
  .v2dl .mdl-page{max-width:none}
  .mdl-page .w-stage{margin-top:22px}
  /* a narrow window: the world is drawn larger and cropped at the sides (66 of 100 units show),
     so the buttons keep readable words; it sits 2 units left of centre, where Open Anyway is */
  .mdl{aspect-ratio:4/5;border-radius:20px;--u:calc(100cqw / 66);--z1:var(--z0);--z2:translate(-18cqw,-11.6cqh) scale(1.2)}
  .mdl-world{translate:calc(var(--u)*-52) -50%}
  .mdl-page .w-step{font-size:20px;padding:12px 0;grid-template-columns:28px 1fr}
  .mdl-page .dlr-why{margin-top:14px}}
@media(max-width:520px){.v2dl .mdl-page{padding-top:92px}.mdl-page .w-h{font-size:clamp(38px,10.4vw,44px)}
  /* waitlist.css hides .v-dl here (a phone gets "send the link"); this view only shows on a Mac */
  .mdl-page .v2-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}.mdl-page .v2-act .v-dl{display:inline-flex;flex:0 1 auto}}
@media(max-width:380px){.mdl-page .w-status{white-space:normal;align-items:flex-start}.mdl-page .w-live{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.mdl *,.mdl-steps :is(.w-step,.w-n){animation:none!important}}
.mdl-ready .mdl-status:not(.is-pick) .w-live:after{animation:dlrPing 1.6s cubic-bezier(.22,1,.36,1) .5s 2}