/* Layout: a pure white stage where the four friends live full size and play under the headline, then quiet
   sections that each show one part of the team at work, ending on one big Download for Mac. */
/* The hidden attribute always wins, even over a class that sets display (the waitlist swaps its form and thank-you this way). */
[hidden]{display:none!important}
:root{
 --bg:#ffffff;--ink:#0a1633;--dim:#5a6482;--line:#e7eaf3;--soft:#f5f7fc;--card:#ffffff;
 --btn:#0b1d4a;--btn-ink:#ffffff;--btn-hover:#16306e;
 --blue:#0058fe;--green:#01d796;--orange:#fe6543;--purple:#7e30fd;--red:#f2363d;--red-soft:#fff1f1;--red-ink:#c4161d;
 --amber-soft:#fff6e3;--amber-ink:#9a5b00;--green-soft:#e6fbf4;--green-ink:#00865d;--blue-soft:#eaf1ff;--blue-ink:#0047cc;
 --shadow:rgba(10,22,51,.14);--glass:rgba(255,255,255,.82);--wall1:#dfe9ff;--wall2:#eee6ff;--wall3:#ffe9df;
 --display:"Urbanist","Avenir Next","Century Gothic",system-ui,sans-serif;
 --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --bg:#0a1330;--ink:#eef2ff;--dim:#9aa5c4;--line:#1f2c55;--soft:#0f1b3e;--card:#111e44;
 --btn:#ffffff;--btn-ink:#0a1330;--btn-hover:#dfe6ff;
 --red-soft:#3a1229;--red-ink:#ff8a8f;--amber-soft:#36290f;--amber-ink:#ffc766;--green-soft:#0b3333;--green-ink:#4ff0bd;--blue-soft:#13265c;--blue-ink:#8fb2ff;
 --shadow:rgba(0,0,0,.45);--glass:rgba(10,19,48,.82);--wall1:#12245a;--wall2:#24164f;--wall3:#3a1d2c;color-scheme:dark}}
:root[data-theme="dark"]{
 --bg:#0a1330;--ink:#eef2ff;--dim:#9aa5c4;--line:#1f2c55;--soft:#0f1b3e;--card:#111e44;
 --btn:#ffffff;--btn-ink:#0a1330;--btn-hover:#dfe6ff;
 --red-soft:#3a1229;--red-ink:#ff8a8f;--amber-soft:#36290f;--amber-ink:#ffc766;--green-soft:#0b3333;--green-ink:#4ff0bd;--blue-soft:#13265c;--blue-ink:#8fb2ff;
 --shadow:rgba(0,0,0,.45);--glass:rgba(10,19,48,.82);--wall1:#12245a;--wall2:#24164f;--wall3:#3a1d2c;color-scheme:dark}
.logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-dark{display:block}:root:not([data-theme="light"]) .logo-light{display:none}}
:root[data-theme="dark"] .logo-dark{display:block}:root[data-theme="dark"] .logo-light{display:none}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--glass)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.025em}
h2{font-size:clamp(34px,4.6vw,60px);font-weight:800;line-height:1}
h3{font-size:22px;font-weight:800;line-height:1.15}
p{margin:0}
a{color:inherit}
.eyebrow{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--dim);max-width:58ch}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:10px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--body);padding:16px 24px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .18s cubic-bezier(.2,.9,.3,1.4),background .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:var(--btn);color:var(--btn-ink)}.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
.btn-xl{font-size:clamp(18px,2vw,22px);padding:22px 36px}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;padding-block:14px}
.brand{display:block;flex:none;line-height:0}.brand img{height:34px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font:600 15px var(--body)}
.nav-links a{text-decoration:none;color:var(--dim)}.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:12px 18px;font-size:14px}
@media (max-width:820px){.nav-links{display:none}.nav .btn{margin-left:auto}.brand img{height:28px}}

/* Hero stage: the friends live here */
.stage{position:relative;overflow:hidden;min-height:clamp(640px,88vh,880px);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-copy{position:relative;z-index:2;padding-block:clamp(40px,8vh,96px) 0;pointer-events:none;display:grid;gap:22px;justify-items:start}
.hero-copy a,.hero-copy button{pointer-events:auto}
.hero h1{font-size:clamp(46px,7.2vw,104px);font-weight:900;line-height:.92;letter-spacing:-.04em;max-width:9.5em}
.hero h1 span{white-space:nowrap}
.hero .lede{max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ground{position:absolute;left:0;right:0;bottom:0;height:var(--floor,26px);z-index:0;background:linear-gradient(var(--bg),var(--soft))}
.friend{position:absolute;left:0;top:0;z-index:4;cursor:grab;touch-action:none;will-change:transform;-webkit-tap-highlight-color:transparent}
.friend.held{cursor:grabbing;z-index:6}
.friend .living-art{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.shade{position:absolute;left:0;top:0;z-index:1;height:16px;border-radius:50%;background:radial-gradient(closest-side,var(--shadow),transparent);will-change:transform,opacity;pointer-events:none}
.say{position:absolute;left:0;top:0;z-index:7;pointer-events:none;background:var(--card);color:var(--ink);font:700 15px/1.25 var(--body);padding:10px 14px;border-radius:18px;box-shadow:0 10px 30px var(--shadow),0 0 0 1px var(--line);max-width:240px;opacity:0;transform-origin:50% 100%;transition:opacity .2s}
.say.on{opacity:1}
.say::after{content:"";position:absolute;left:var(--tail,50%);bottom:-6px;width:13px;height:13px;margin-left:-6px;background:var(--card);transform:rotate(45deg);border-radius:3px;box-shadow:1px 1px 0 var(--line)}
.play-hint{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(var(--floor,26px) + 10px);z-index:3;font:600 13px var(--body);color:var(--dim);pointer-events:none;transition:opacity .4s}
.play-hint.gone{opacity:0}
@media (max-width:640px){.stage{min-height:0}.hero-copy{padding-bottom:var(--play,300px)}.play-hint{display:none}}

/* Works with */
.works{border-block:1px solid var(--line);background:var(--bg)}
.works .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-block:22px}
.works .eyebrow{flex:none}
.works ul{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0;font:800 19px var(--display);letter-spacing:-.01em;color:var(--ink)}

/* Sections */
section.band{padding-block:clamp(72px,11vw,140px)}
.band-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:760px}

/* How it works */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding-block:22px;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s);font:800 22px/1 var(--display);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink)}
.steps h3{margin-bottom:6px}
.steps p{color:var(--dim);font-size:16px}
.chat{background:var(--soft);border-radius:28px;padding:22px;display:grid;gap:14px;position:sticky;top:96px}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 14px var(--body);color:var(--dim);padding:2px 4px 6px}
.chat-head b{color:var(--ink);font:800 17px var(--display)}
.live-dot{display:inline-flex;align-items:center;gap:6px}.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 25%,transparent)}
.msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start}
.av{width:40px;height:40px;display:block}
.av .living-art{width:100%;height:100%;display:block;overflow:visible}
.bub{background:var(--card);border-radius:18px;border-top-left-radius:6px;padding:10px 14px;box-shadow:0 1px 0 var(--line);min-width:0}
.who{font:800 14px var(--display);display:flex;gap:8px;align-items:baseline}
.who small{font:500 12px var(--body);color:var(--dim)}
.bub p{font-size:15px;line-height:1.45}
.reacts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.react{font:600 13px/1 var(--body);padding:5px 9px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;display:inline-flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums}
.react[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft)}
.tag{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--body);padding:6px 10px;border-radius:999px;letter-spacing:.01em}
.tag.red{background:var(--red-soft);color:var(--red-ink)}
.tag.amber{background:var(--amber-soft);color:var(--amber-ink)}
.tag.green{background:var(--green-soft);color:var(--green-ink)}
.tag.blue{background:var(--blue-soft);color:var(--blue-ink)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* Meet the friends */
.cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.member{display:grid;gap:10px;align-content:start;padding:8px 6px 6px}
.member .spot{width:min(190px,100%);aspect-ratio:1;display:block;cursor:pointer;margin:0 auto 4px;border:0;background:none;padding:0;border-radius:24px}
.member .spot .living-art{width:100%;height:100%;display:block;overflow:visible}
.member h3{font-size:30px;display:flex;align-items:center;gap:10px}
.member h3 i{width:12px;height:12px;border-radius:50%;flex:none}
.member p{color:var(--dim);font-size:16px}
.runs{font:600 13px var(--body);color:var(--dim)}.runs b{color:var(--ink)}
.cast-note{margin-top:clamp(28px,4vw,44px);padding:22px 26px;border-radius:22px;background:var(--soft);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.cast-note p{max-width:68ch;color:var(--dim)}.cast-note b{color:var(--ink)}
@media (max-width:980px){.cast{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}

/* Approvals */
.approvals{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.rules{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.inbox{border-radius:28px;background:var(--soft);padding:18px;display:grid;gap:12px}
.inbox-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 4px;font:800 20px var(--display)}
.count{font:700 13px/1 var(--body);background:var(--red);color:#fff;border-radius:999px;padding:6px 10px;font-variant-numeric:tabular-nums}
.count.zero{background:var(--green);color:#00321f}
.ask{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--card);border-radius:20px;padding:14px 16px;box-shadow:0 1px 0 var(--line);transition:opacity .3s,transform .3s}
.ask .av{width:44px;height:44px}
.ask h4{margin:0 0 4px;font:700 16px/1.3 var(--body)}
.ask .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--dim)}
.ask .acts{display:flex;gap:6px}
.ask .acts button{font:700 13px/1 var(--body);padding:10px 14px;border-radius:999px;border:0;cursor:pointer}
.ask .yes{background:var(--btn);color:var(--btn-ink)}
.ask .no{background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1.5px var(--line)}
.ask.done{opacity:.55}.ask.done .acts{display:none}
.ask .result{display:none;font:700 13px var(--body);color:var(--green-ink)}.ask.done .result{display:block}.ask.held .result{color:var(--dim)}
.budgets{display:grid;gap:14px;background:var(--card);border-radius:20px;padding:16px 18px;box-shadow:0 1px 0 var(--line)}
.budgets h4{margin:0;font:700 14px var(--body);color:var(--dim)}
.meter{display:grid;gap:6px}.meter div{display:flex;justify-content:space-between;font-size:14px;font-variant-numeric:tabular-nums}
.meter span{color:var(--dim)}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;border-radius:99px}
@media (max-width:900px){.how,.approvals{grid-template-columns:1fr}.chat{position:static}}
@media (max-width:520px){.ask{grid-template-columns:36px minmax(0,1fr)}.ask .av{width:36px;height:36px}.ask .acts,.ask .result{grid-column:2}}

/* Features */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.feat{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:2px solid var(--ink)}
.feats{row-gap:clamp(32px,4vw,48px)}
.feat p{color:var(--dim);font-size:16px}
@media (max-width:980px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.feats{grid-template-columns:1fr}}

/* Beacon */
.beacon{background:var(--soft)}
.beacon-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.net{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,84px) 18px;padding:12px 0}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wires path{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9;opacity:.55;transition:stroke .3s,opacity .3s}
.wires path.down{stroke:#ff4d4f;opacity:.45;stroke-dasharray:1 14}
.pc{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;text-align:center;z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0;border-radius:18px}
.main-pc{grid-column:1 / -1;cursor:default}
.screen{width:min(190px,100%);aspect-ratio:16/11;border-radius:16px;background:var(--card);box-shadow:0 0 0 2px var(--ink);display:grid;place-items:center;position:relative;margin-bottom:22px}
.screen::after{content:"";position:absolute;left:33%;bottom:-18px;width:34%;height:12px;border-radius:0 0 8px 8px;background:var(--ink);opacity:.9}
.main-pc .screen{width:min(240px,100%)}
.pc-friend{width:72%;aspect-ratio:1;display:block;margin-top:-4%}
.pc-friend .living-art{width:100%;height:100%;display:block;overflow:visible}
.pc b{font:800 18px var(--display)}.pc small{font:600 13px var(--body);color:var(--dim)}
.pc-status{margin-top:8px;font:700 13px/1.3 var(--body);padding:6px 11px;border-radius:14px;background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line);max-width:100%;transition:background .25s,color .25s}
.pc-status.work{background:var(--blue-soft);color:var(--blue-ink);box-shadow:none}
.pc-status.ok{background:var(--green-soft);color:var(--green-ink);box-shadow:none}
.pc-status.down{background:var(--red-soft);color:var(--red-ink);box-shadow:none}
.packet{position:absolute;left:0;top:0;z-index:3;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(0,88,254,.22);opacity:0;pointer-events:none}
.packet.back{background:var(--green);box-shadow:0 0 0 5px rgba(1,215,150,.25)}
.net-note{grid-column:1 / -1;text-align:center;font-size:13px;color:var(--dim)}
@media (max-width:900px){.beacon-grid{grid-template-columns:1fr}}

/* Final call */
.finale{text-align:center}
.finale .wrap{display:grid;justify-items:center;gap:26px}
.finale h2{font-size:clamp(44px,7vw,96px);font-weight:900;letter-spacing:-.04em;line-height:.95}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(640px,100%)}
.row4 button{aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;border-radius:20px}
.row4 .living-art{width:100%;height:100%;display:block;overflow:visible}
.fine{font-size:14px;color:var(--dim)}

.dl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;width:100%;margin-top:12px;text-align:left}
.dl{display:grid;gap:22px;align-content:space-between;padding:clamp(22px,3vw,34px);border-radius:28px;background:var(--soft)}
.dl.main{background:var(--card);box-shadow:0 0 0 2px var(--ink)}
.dl-top{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center}
.dl-top h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:6px}.dl-top p{color:var(--dim);font-size:16px}
.dl-icon{width:72px;height:auto;display:block}
.tower-mini{height:72px}.tower-mini .living-art{width:100%;height:100%;display:block;overflow:visible}
.dl-btns{display:flex;flex-wrap:wrap;gap:10px}
.dl .btn-xl{font-size:18px;padding:18px 26px}
.fit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.fit li{display:grid;gap:10px;align-content:start}
.fit-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 22px/1 var(--display);background:var(--btn);color:var(--btn-ink)}
.fit p{color:var(--dim);font-size:16px}
.map{display:flex;align-items:center;margin-top:clamp(36px,5vw,56px);padding:clamp(18px,3vw,28px);border-radius:28px;background:var(--soft)}
.map .node{flex:1 1 0;min-width:0;display:grid;gap:4px;padding:16px 18px;border-radius:18px;background:var(--card);box-shadow:0 1px 0 var(--line);text-align:center}
.map .node b{font:800 18px var(--display)}.map .node span{font-size:14px;color:var(--dim)}
.map .hub{box-shadow:0 0 0 2px var(--blue)}
.map .wire{flex:0 0 clamp(20px,5vw,64px);height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--blue) 0 8px,transparent 8px 14px);background-size:28px 3px;animation:flow 1.2s linear infinite}
@keyframes flow{to{background-position:28px 0}}
@media (max-width:900px){.dl-grid,.fit{grid-template-columns:1fr}}
@media (max-width:640px){.map{flex-direction:column;align-items:stretch}.map .wire{flex:0 0 26px;width:3px;height:auto;align-self:center;background:repeating-linear-gradient(180deg,var(--blue) 0 8px,transparent 8px 14px);background-size:3px 28px;animation:flowv 1.2s linear infinite}}
@keyframes flowv{to{background-position:0 28px}}
@media (prefers-reduced-motion:reduce){.map .wire{animation:none}}
/* Mini Chief demo: a pretend desktop the Chief floats over */
.minimode{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,64px);align-items:center}
.minimode .lede{margin-top:4px}
.mini-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.mini-facts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:16px;color:var(--dim);transition:color .2s}
.mini-facts li b{color:var(--ink)}
.mini-facts li::before{content:"";width:12px;height:12px;margin:6px 0 0 8px;border-radius:50%;background:var(--line);transition:background .2s,transform .25s cubic-bezier(.2,.9,.3,1.6)}
.mini-facts li.on{color:var(--ink)}.mini-facts li.on::before{background:var(--blue);transform:scale(1.35)}
.desk{position:relative;width:100%;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,var(--wall1),var(--wall2) 55%,var(--wall3));box-shadow:0 30px 80px var(--shadow),0 0 0 1px var(--line);user-select:none;-webkit-user-select:none}
.menubar{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:600 12px var(--body);color:var(--ink);z-index:2}
.menubar img{height:14px;width:auto}.menubar .clock{margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums}
.fakewin{position:absolute;border-radius:12px;background:var(--card);box-shadow:0 14px 40px var(--shadow);overflow:hidden}
.fakewin::before{content:"";position:absolute;left:10px;top:9px;width:34px;height:9px;background:radial-gradient(circle at 4px 4.5px,#ff5f57 3.4px,transparent 3.8px),radial-gradient(circle at 16px 4.5px,#febc2e 3.4px,transparent 3.8px),radial-gradient(circle at 28px 4.5px,#28c840 3.4px,transparent 3.8px)}
.fakewin .lines{position:absolute;inset:32px 16px 16px;display:grid;gap:9px;align-content:start}
.fakewin .lines i{display:block;height:7px;border-radius:4px;background:var(--line)}
.w-code{left:6%;top:15%;width:50%;height:58%}.w-web{left:42%;top:34%;width:46%;height:52%}
.mwrap{position:absolute;left:0;top:0;z-index:4;cursor:grab;touch-action:none;will-change:transform;filter:drop-shadow(0 8px 14px rgba(0,30,90,.22))}
.mwrap.held{cursor:grabbing}
.mhost{display:block;width:100%;height:100%}.mhost .living-art{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.mbadge{position:absolute;right:9%;top:8%;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff4d4f;color:#fff;font:800 12px/22px var(--body);text-align:center;box-shadow:0 0 0 2.5px #fff;pointer-events:none;font-variant-numeric:tabular-nums}
.mbadge.pop{animation:pop .42s cubic-bezier(.2,.9,.3,1.8)}
@keyframes pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
.msay{position:absolute;left:0;top:0;z-index:5;max-width:min(230px,70%);padding:9px 13px;border-radius:16px;background:var(--card);color:var(--ink);font:700 13px/1.3 var(--body);box-shadow:0 10px 26px var(--shadow);pointer-events:none;opacity:0;transition:opacity .2s}
.msay.on{opacity:1}
.msay::after{content:"";position:absolute;left:var(--tail,40px);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--card);transform:rotate(45deg);border-radius:2px}
.mapp{position:absolute;left:18%;top:16%;width:64%;height:70%;z-index:3;border-radius:14px;background:var(--card);box-shadow:0 24px 60px var(--shadow);transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(.05);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.15),opacity .25s;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.mapp.open{transform:none;opacity:1}
.mapp header{display:flex;align-items:center;gap:8px;padding:10px 14px 10px 56px;border-bottom:1px solid var(--line);font:800 13px var(--display);position:relative}
.mapp header::before{content:"";position:absolute;left:12px;top:13px;width:34px;height:9px;background:radial-gradient(circle at 4px 4.5px,#ff5f57 3.4px,transparent 3.8px),radial-gradient(circle at 16px 4.5px,#febc2e 3.4px,transparent 3.8px),radial-gradient(circle at 28px 4.5px,#28c840 3.4px,transparent 3.8px)}
.mapp .rows{display:grid;gap:8px;padding:12px 14px;align-content:start}
.mapp .row{display:flex;gap:8px;align-items:center;font:600 12px/1.3 var(--body);padding:8px 10px;border-radius:10px;background:var(--soft)}
.mapp .row i{width:10px;height:10px;border-radius:50%;flex:none}
.mapp .row.need{background:var(--red-soft);color:var(--red-ink)}
.cursor{position:absolute;left:0;top:0;z-index:9;width:22px;height:22px;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.cursor svg{width:100%;height:100%;display:block;transition:transform .12s}
.cursor.down svg{transform:scale(.82)}
.desk-note{margin-top:12px;font-size:13px;color:var(--dim);text-align:center}
@media (max-width:900px){.minimode{grid-template-columns:1fr}}
@media (max-width:640px){.desk{aspect-ratio:4/5}.w-code{width:78%;height:40%}.w-web{left:14%;top:52%;width:76%;height:38%}}
.goals{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.goals .lede+.lede{margin-top:-4px}
.board{border-radius:28px;background:var(--soft);padding:20px;display:grid;gap:16px}
.board-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:4px 6px}
.board-top h3{font-size:24px;margin-top:6px}
.leads{display:flex;align-items:center;gap:2px}.leads small{margin-left:8px;font:600 12px var(--body);color:var(--dim)}
.lead{width:34px;height:34px;display:block}.lead .living-art{width:100%;height:100%;display:block;overflow:visible}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.col{background:var(--card);border-radius:18px;padding:12px;min-width:0;min-height:220px;box-shadow:0 1px 0 var(--line)}
.col h4{margin:0 0 10px;font:800 14px var(--display);display:flex;justify-content:space-between;color:var(--dim)}
.col h4 span{font-variant-numeric:tabular-nums;color:var(--ink)}
.tcards{display:grid;gap:8px}
.tc{display:grid;gap:6px;padding:10px 11px;border-radius:12px;background:var(--soft);font-size:13px;line-height:1.3;animation:tcIn .4s cubic-bezier(.2,.9,.3,1.3) both}
.tc b{font-weight:700}.tc span{display:flex;gap:6px;align-items:center;color:var(--dim);font-size:12px}.tc span i{width:8px;height:8px;border-radius:50%;flex:none}
#cDone .tc{background:var(--green-soft)}#cDone .tc b{color:var(--green-ink)}
@keyframes tcIn{from{transform:scale(.9);opacity:.3}to{transform:none;opacity:1}}
.board-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:4px 4px 0}
.dots{display:inline-flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .15s}.dots i.on{background:currentColor}
@media (max-width:900px){.goals{grid-template-columns:1fr}}
@media (max-width:560px){.cols{grid-template-columns:1fr}.col{min-height:0}}
@media (prefers-reduced-motion:reduce){.tc{animation:none}}
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;padding-block:28px 40px;font-size:14px;color:var(--dim)}
footer img{height:28px;width:auto}
footer nav{display:flex;gap:20px;flex-wrap:wrap}footer nav a{text-decoration:none}footer nav a:hover{color:var(--ink)}


@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.ask{transition:none}}

/* Waitlist: Download opens this until the apps ship */
.wl{border:0;padding:0;border-radius:28px;background:var(--card);color:var(--ink);width:min(460px,calc(100% - 32px));box-shadow:0 30px 90px var(--shadow);overflow:visible}
.wl::backdrop{background:rgba(10,22,51,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.wl[open]{animation:wlIn .35s cubic-bezier(.2,.9,.3,1.25)}
@keyframes wlIn{from{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.wl-form,.wl-done{position:relative;display:grid;gap:10px;padding:64px 28px 26px}
.wl-done{justify-items:center;text-align:center;padding-top:96px}
.wl-friend{position:absolute;left:50%;top:-58px;width:112px;height:112px;margin-left:-56px;display:block}
.wl-friend.big{width:150px;height:150px;margin-left:-75px;top:-70px}
.wl-friend .living-art{width:100%;height:100%;display:block;overflow:visible}
.wl-soon{justify-self:start}
.wl h3{font-size:28px;line-height:1.05}
.wl-sub{color:var(--dim);font-size:16px;margin-bottom:6px}
.wl-label{font:700 13px var(--body);color:var(--dim);margin-top:4px}
.wl-input{font:500 17px var(--body);color:var(--ink);background:var(--soft);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;width:100%}
.wl-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,88,254,.15)}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-error{color:var(--red-ink);background:var(--red-soft);border-radius:12px;padding:10px 12px;font:600 14px var(--body)}
.wl-go{justify-content:center;margin-top:8px}
.wl-go[disabled]{opacity:.6;cursor:progress}
.wl-fine{font-size:13px;color:var(--dim);text-align:center}
.wl-x{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);font:600 22px/1 var(--body);cursor:pointer}
@media (prefers-reduced-motion:reduce){.wl[open]{animation:none}}