/* /features: the whole app on one page */
.fx{--fx-ink:#242421;--fx-muted:#6f6f6a;--fx-line:#e2e2de;--fx-paper:#f7f7f7;background:var(--fx-paper);color:var(--fx-ink);overflow-x:visible}
.fx-main{overflow:visible}
.fx em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}

.fx-hero{max-width:860px;margin:0 auto;padding:110px 24px 56px;text-align:center}
.fx-eyebrow{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fx-muted);border:1px solid var(--fx-line);border-radius:999px;padding:6px 14px;margin-bottom:26px}
.fx-hero h1{font-size:clamp(44px,6.4vw,84px);line-height:1.02;letter-spacing:-.045em;font-weight:500;margin:0 0 22px;color:var(--fx-ink)}
.fx-hero p{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--fx-muted);max-width:560px;margin:0 auto 32px}
.fx-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fx-btn{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--fx-ink);color:#f7f7f7;font-size:15px;font-weight:500;border:1px solid var(--fx-ink);transition:transform .2s,opacity .2s}
.fx-btn:hover{transform:translateY(-2px)}
.fx-btn.ghost{background:transparent;color:var(--fx-ink);border-color:var(--fx-line)}

.fx-frame{max-width:1120px;margin:0 auto 40px;padding:0 24px;transform:translateY(var(--py,0))}

/* Scroll-built product anatomy. Nine designed cards, one per feature, are pulled
   together into a single app window before the feature catalogue begins. */
.fx-assembly{height:250vh;position:relative;margin:-18px 0 22px;--ap:0;--lock:0}
.fx-assembly-sticky{position:sticky;top:0;height:100vh;min-height:620px;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:var(--fx-paper)}
.fx-assembly-meta{position:absolute;left:max(24px,calc((100vw - 1120px)/2));right:max(24px,calc((100vw - 1120px)/2));top:clamp(88px,12vh,130px);display:flex;align-items:center;justify-content:space-between;z-index:6;color:var(--fx-muted);font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.fx-assembly-state{display:flex;align-items:center;gap:9px}.fx-assembly-state:before{content:'';width:6px;height:6px;border-radius:50%;background:#9c9c96;box-shadow:0 0 0 0 rgba(36,36,33,.2);transition:background .16s}.fx-assembly.locked .fx-assembly-state:before{background:#242421;animation:fx-state-pulse .58s ease-out}
.fx-assembly-scene{width:min(1120px,calc(100vw - 64px));aspect-ratio:2400/1343;position:relative;perspective:1500px}
.fx-assembly-shell{position:absolute;inset:0;container-type:inline-size;transform-style:preserve-3d;border-radius:28px;background:rgba(255,255,255,calc(var(--lock)*.34));border:1px solid rgba(255,255,255,calc(var(--lock)*.84));box-shadow:0 calc(var(--lock)*34px) calc(var(--lock)*90px) rgba(20,20,18,calc(var(--lock)*.18));-webkit-backdrop-filter:blur(calc(var(--lock)*24px)) saturate(1.45);backdrop-filter:blur(calc(var(--lock)*24px)) saturate(1.45);transition:border-color .14s;will-change:transform}
.fx-app{position:absolute;inset:0;padding:1.6em;font-size:calc(100cqw/112);line-height:1.4;display:flex;flex-direction:column;gap:.8em;color:var(--fx-ink);text-align:left}
.fx-app-top{display:flex;gap:.8em;height:4.4em;flex:none}.fx-app-body{display:flex;gap:.8em;flex:1;min-height:0}
.fx-col{display:flex;flex-direction:column;gap:.8em;min-width:0;min-height:0}.fx-col.side{width:19em}.fx-col.mid{flex:1}.fx-col.right{width:25em}
.fx-piece{position:relative;will-change:transform}.fx-p-layouts,.fx-p-folders,.fx-p-split,.fx-p-queue{flex:1;min-height:0;min-width:0}.fx-p-branches{width:25em}.fx-p-luminair{width:19em;flex:none}.fx-p-luminair .fx-pc{display:flex;align-items:center}.fx-p-luminair .fx-u-bar{gap:.8em;padding:0 1em;width:100%}.fx-p-luminair .fx-u-k{white-space:nowrap}.fx-p-layouts .fx-part-label{left:auto;right:12px}
.fx-pc{height:100%;font-size:1.1em;background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.85);border-radius:1.1em;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(20,20,18,.05),0 calc((1 - var(--lock))*1.6em) calc((1 - var(--lock))*3.4em) rgba(20,20,18,calc((1 - var(--lock))*.13));color:#000;font-weight:700}
.fx-pc *{color:#000!important;font-weight:700!important}
.fx-pc ul{list-style:none;margin:0;padding:0}.fx-pc p{margin:0}.fx-pc small{font-size:.82em;color:#a3a39d;font-weight:400}
.fx-u-bar{height:100%;display:flex;align-items:center;gap:1.5em;padding:0 1.3em;color:var(--fx-muted)}.fx-u-bar b{color:var(--fx-ink);font-weight:600}
.fx-u-lights{width:3.4em;height:.8em;flex:none;background:radial-gradient(circle at .4em 50%,#d5d5cf .4em,transparent .43em),radial-gradient(circle at 1.7em 50%,#d5d5cf .4em,transparent .43em),radial-gradient(circle at 3em 50%,#d5d5cf .4em,transparent .43em)}
.fx-u-k{font-size:.82em;line-height:1.25;color:var(--fx-muted)}.fx-u-bar svg{flex:1;height:2.2em}
.fx-pc svg path{fill:none;stroke:var(--fx-ink);stroke-width:1}.fx-pc svg circle{fill:var(--fx-ink)}.fx-pc svg circle.o{fill:#fff;stroke:var(--fx-ink);stroke-width:1}
.fx-u-brand{font-family:var(--mono);font-size:1.3em;padding:.8em 1em .5em}
.fx-u-nav li{display:flex;align-items:center;gap:.9em;padding:.55em 1.2em}.fx-u-nav i{width:.9em;height:.9em;border-radius:.25em;background:var(--fx-ink)}.fx-u-nav li:last-child{padding-bottom:1em}
.fx-u-h{display:flex;align-items:center;gap:.6em;padding:.9em 1.2em .5em;font-weight:600}
.fx-u-dots{display:flex;gap:.4em;padding:.1em 1.2em 1em}.fx-u-dots i{width:.5em;height:.5em;border-radius:50%;background:var(--fx-ink)}.fx-u-dots i.o{background:#b9b9b3}
.fx-u-tree li{display:flex;justify-content:space-between;align-items:center;padding:.3em 1.2em .3em 2.2em;font-size:.92em;color:#55554f}.fx-u-tree li.f{padding-left:1.2em;padding-top:.7em;font-size:1em;font-weight:600;color:var(--fx-ink)}.fx-u-tree li.on{background:#f4f4f1;color:var(--fx-ink)}
.fx-u-panes{height:100%;display:flex}.fx-u-panes section{flex:1;min-width:0;padding:0 1.5em}.fx-u-panes section+section{border-left:1px solid var(--fx-line)}
.fx-u-panes header{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:1.1em 0;margin-bottom:.4em;border-bottom:1px solid var(--fx-line)}.fx-u-panes header b{font-weight:600}
.fx-u-chip{flex:none;font-family:var(--mono);font-size:.8em;padding:.25em .7em;border:1px solid var(--fx-line);border-radius:99em;color:var(--fx-muted)}.fx-u-chip.on,.fx-u-panes .fx-u-chip{color:var(--fx-ink);border-color:#c9c9c3;background:#f4f4f1}
.fx-u-q,.fx-u-a{padding:.75em 0 .75em 1.1em;position:relative}.fx-u-q{color:var(--fx-muted)}.fx-u-q:before{content:'›';position:absolute;left:0}.fx-u-a:before{content:'';position:absolute;left:0;top:.95em;bottom:.95em;width:1.5px;background:var(--fx-ink)}
.fx-u-journal header span{font-family:var(--mono);font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:#a3a39d;white-space:nowrap}.fx-u-journal h4{margin:1em 0 .3em;font-family:var(--mono);font-size:.72em;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.fx-u-journal p{color:var(--fx-muted);line-height:1.45}.fx-u-links{display:flex;flex-wrap:wrap;gap:.45em;margin-top:1em;padding-top:.8em;border-top:1px solid var(--fx-line)}.fx-u-links span{font-size:.78em;color:var(--fx-muted);padding:.25em .5em;border:1px solid var(--fx-line);border-radius:.45em;background:#f4f4f1}
.fx-u-compose{padding:1.1em 1.3em}.fx-u-ph{display:block;color:#a3a39d;margin-bottom:.9em}.fx-u-row{display:flex;align-items:center;gap:.6em}.fx-u-row .fx-u-send{margin-left:auto}
.fx-u-send{flex:none;width:1.8em;height:1.8em;border-radius:50%;background:var(--fx-ink);position:relative}.fx-u-send:after{content:'';position:absolute;left:50%;top:54%;width:.5em;height:.5em;border-left:1.5px solid #fff;border-top:1.5px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
.fx-u-sub{padding:0 1.2em;font-size:.88em;color:var(--fx-muted)}
.fx-u-nums{display:flex;justify-content:space-around;padding:1.2em 1em .2em;text-align:center}.fx-u-nums b{display:block;font-size:2.4em;line-height:1.1;font-weight:500;letter-spacing:-.03em}.fx-u-nums span{font-family:var(--mono);font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:#a3a39d}
.fx-u-fan{display:block;width:100%;padding:.4em 1.2em 1.2em;box-sizing:border-box}.fx-pc .fx-u-fan path{stroke:var(--fx-ink)}.fx-pc .fx-u-fan path.d{stroke-dasharray:2 2.5;opacity:.7}.fx-pc .fx-u-fan circle.o{fill:var(--fx-ink);stroke:none}
.fx-u-queue li{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.95em 1.2em;border-top:1px solid var(--fx-line)}
.fx-part-label{position:absolute;left:12px;top:-24px;z-index:5;padding:7px 11px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.16));-webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);color:#000;font-weight:700;border:1px solid rgba(255,255,255,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(20,20,18,.08),0 10px 28px rgba(20,20,18,.13);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:calc(1 - var(--lock)*1.7);will-change:transform,opacity}
.fx-lock-ring{position:absolute;left:50%;top:50%;width:28px;height:28px;border:1px solid #242421;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.3);pointer-events:none}
.fx-assembly.locked .fx-lock-ring{animation:fx-magnet-lock .55s cubic-bezier(.15,.8,.25,1)}
.fx-assembly-meter{position:absolute;bottom:34px;left:50%;width:min(330px,50vw);height:2px;transform:translateX(-50%);background:#deded9;overflow:hidden}.fx-assembly-meter i{display:block;width:100%;height:100%;background:#242421;transform:scaleX(var(--ap));transform-origin:left center}
@keyframes fx-magnet-lock{0%{opacity:.75;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(12)}}
@keyframes fx-state-pulse{0%{box-shadow:0 0 0 0 rgba(36,36,33,.3)}100%{box-shadow:0 0 0 14px rgba(36,36,33,0)}}

/* floating group nav */
.fx-pill{position:sticky;top:14px;z-index:30;display:flex;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 24px);margin:20px 0 70px max(24px,calc((100vw - 1120px)/2));padding:5px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--fx-line);box-shadow:0 12px 34px -18px rgba(20,20,18,.4);overflow-x:auto;scrollbar-width:none}
.fx-pill::-webkit-scrollbar{display:none}
.fx-pill a,.fx-pill-b{white-space:nowrap;font-size:13.5px;padding:9px 14px;border-radius:999px;color:var(--fx-muted);transition:background .2s,color .2s}
.fx-pill-b{font-weight:600;color:var(--fx-ink);padding-right:8px}
.fx-pill a:hover{color:var(--fx-ink)}
.fx-pill a.on{background:#ececea;color:var(--fx-ink)}
.fx-pill .fx-pill-cta{background:var(--fx-ink);color:#f7f7f7;margin-left:6px}
.fx-pill .fx-pill-cta:hover{color:#fff}

/* groups */
.fx-group{max-width:1180px;margin:0 auto 60px;padding:0 24px;scroll-margin-top:90px}
.fx-gh{text-align:center;max-width:640px;margin:0 auto 64px}
.fx-gn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fx-muted)}
.fx-gh h2{font-size:clamp(34px,4.2vw,54px);letter-spacing:-.035em;line-height:1.05;font-weight:500;margin:12px 0 14px}
.fx-gh p{font-size:17px;line-height:1.6;color:var(--fx-muted);margin:0}

/* zigzag rows */
.fx-row{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;margin-bottom:90px;scroll-margin-top:90px}
.fx-row.flip .fx-media{order:2}
.fx-media{position:relative;container-type:inline-size;isolation:isolate;aspect-ratio:5/4;border-radius:26px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#fbfbfa 0%,#ecece9 55%,#e2e2df 100%);border:1px solid var(--fx-line);display:grid;place-items:center}
.fx-row:nth-child(4n+2) .fx-media{background:radial-gradient(120% 90% at 70% 15%,#fafaf9 0%,#e9e9e6 60%,#dededa 100%)}
.fx-row:nth-child(4n+3) .fx-media{background:radial-gradient(110% 100% at 20% 80%,#f9f9f8 0%,#ebebe8 55%,#e0e0dc 100%)}
.fx-media.mock{padding:28px;place-items:center}
.fx-spl{position:relative;width:86cqw;height:auto;aspect-ratio:16/10;font-size:1.9cqw;line-height:1.4;background:#fff;border:1px solid var(--fx-line);border-radius:var(--pr);overflow:hidden;display:flex;text-align:left;color:var(--fx-ink)}
.fx-spl-side{flex:none;width:30%;padding:1.1em .9em;background:#f4f4f1;border-right:1px solid var(--fx-line);display:flex;flex-direction:column;gap:.35em;min-width:0}
.fx-spl-h{font-family:var(--mono);font-size:.78em;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-muted);margin-bottom:.4em}
.fx-spl-f{font-weight:600;margin-top:.5em}
.fx-spl-s{position:relative;padding:.38em .6em .38em 1.1em;border-radius:.4em;color:#55554f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-spl-s.drag{background:#fff;color:var(--fx-ink);font-weight:600;box-shadow:0 .5em 1.4em rgba(20,20,18,.16),0 0 0 1px rgba(20,20,18,.08);opacity:.55}
.fx-spl-grip{position:absolute;left:.35em;top:50%;width:.35em;height:.9em;transform:translateY(-50%);background:radial-gradient(circle,var(--fx-ink) .12em,transparent .14em) 0 0/.35em .3em}
.fx-spl-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fx-spl-tabs{height:3.2em;box-sizing:border-box;display:flex;gap:1.2em;padding:.9em 1.1em;border-bottom:1px solid var(--fx-line);font-size:.92em;color:#8f8f89;white-space:nowrap;overflow:hidden}.fx-spl-tabs .on{color:var(--fx-ink);font-weight:600;border-bottom:1.5px solid var(--fx-ink);padding-bottom:.5em;margin-bottom:-.9em}
.fx-spl-panes{position:relative;flex:1;display:flex;min-height:0}
.fx-spl-pane{flex:1;min-width:0;padding:.9em 1.1em;position:relative}.fx-spl-pane+.fx-spl-pane{border-left:1px solid var(--fx-line)}
.fx-spl-pane header{font-weight:600;margin-bottom:.6em;font-size:.95em}.fx-spl-pane p{margin:0;padding:.45em 0 .45em .9em;position:relative;font-size:.9em;color:#55554f;line-height:1.4}
.fx-spl-pane p.q:before{content:'›';position:absolute;left:0;color:var(--fx-muted)}.fx-spl-pane p.a:before{content:'';position:absolute;left:0;top:.5em;bottom:.5em;width:1.5px;background:var(--fx-ink)}
/* The drop zone sits over the pane like the app's own indicator: left half, right half, or the tab strip (2.944em = the strip's 3.2em at its .92em type). At rest it shows the right split. */
.fx-spl-drop{position:absolute;inset:0 0 0 50%;background:repeating-linear-gradient(135deg,transparent 0 .9em,rgba(36,36,33,.04) .9em 1.8em) rgba(255,255,255,.74);box-shadow:inset 0 0 0 1.5px var(--fx-ink)}
.fx-spl-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;opacity:0;font-family:var(--mono);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;background:var(--fx-ink);color:#fff;padding:.5em 1em;border-radius:99em}
.fx-spl-ghost{position:absolute;left:12%;top:36%;padding:.4em .9em;background:#fff;border:1px solid var(--fx-line);border-radius:99em;font-weight:600;font-size:.9em;box-shadow:0 .8em 2em rgba(20,20,18,.2);transform:rotate(-2deg);white-space:nowrap}
.fx-spl-tag.r{opacity:1}.fx-spl-tag.t{left:auto;right:.8em;transform:translateY(-50%)}
.fx-spl-cursor{position:absolute;left:80%;top:70%;width:1.1em;height:1.1em;border-radius:50%;background:rgba(36,36,33,.18);border:1.5px solid var(--fx-ink);transform:translate(-50%,-50%);z-index:2}
.fx-spl-cursor b{position:absolute;left:50%;top:150%;transform:translateX(-50%) rotate(-2deg);padding:.3em .85em;background:#fff;border:1px solid var(--fx-line);border-radius:99em;font-style:normal;font-weight:600;font-size:.82em;line-height:1.3;color:var(--fx-ink);white-space:nowrap;box-shadow:0 .6em 1.6em rgba(20,20,18,.2)}
@media (max-width:640px){.fx-spl-cursor b{left:auto;right:20%;transform:rotate(-2deg)}.fx-spl{font-size:2.6cqw}.fx-spl-side{width:26%}.fx-spl-pane p.a{display:none}}
.fx-layout{width:86cqw;aspect-ratio:16/10;display:flex;background:#fff;border:1px solid var(--fx-line);border-radius:var(--pr);overflow:hidden;text-align:left;color:var(--fx-ink);font-size:1.85cqw;line-height:1.35}.fx-layout-list{width:32%;padding:1.15em .85em;background:#f4f4f1;border-right:1px solid var(--fx-line);display:flex;flex-direction:column;gap:.55em}.fx-layout-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-muted);margin-bottom:.45em}.fx-layout-h button{width:1.7em;height:1.7em;border:1px solid var(--fx-line);border-radius:50%;background:#fff;color:var(--fx-ink);font:inherit;line-height:1}.fx-layout-list button{appearance:none;border:0;background:transparent;text-align:left;padding:.65em .7em;border-radius:.55em;color:#696963;display:flex;flex-direction:column;gap:.15em;font:inherit}.fx-layout-list button b{font-size:.95em;font-weight:600}.fx-layout-list button span{font-size:.74em;color:#999992}.fx-layout-list button.on{background:#fff;color:var(--fx-ink);box-shadow:0 .4em 1em rgba(20,20,18,.08)}.fx-layout-work{flex:1;min-width:0;display:flex;flex-direction:column;padding:1.15em}.fx-layout-top{display:flex;gap:.8em;align-items:center;padding-bottom:.9em;border-bottom:1px solid var(--fx-line)}.fx-layout-top b{font-size:1.04em}.fx-layout-top span{font-size:.77em;color:var(--fx-muted)}.fx-layout-top i{margin-left:auto;font-style:normal;color:var(--fx-muted)}.fx-layout-panes{display:flex;gap:.65em;flex:1;min-height:0;padding:.85em 0}.fx-layout-panes section{flex:1;min-width:0;border:1px solid var(--fx-line);border-radius:.55em;padding:.75em;background:#fcfcfb}.fx-layout-panes section:first-child{flex:1.28}.fx-layout-panes small{font-size:.72em;font-weight:600;display:block;margin-bottom:.7em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-layout-panes i{display:block;height:.32em;border-radius:99em;background:#e6e6e2;margin:.48em 0}.fx-layout-panes i:first-of-type,.fx-layout-panes i:nth-of-type(3){width:74%;background:#bdbdb7}.fx-layout-foot{display:flex;gap:.5em;flex-wrap:wrap}.fx-layout-foot span{font-family:var(--mono);font-size:.66em;color:var(--fx-muted);border:1px solid var(--fx-line);padding:.35em .55em;border-radius:99em}
@media (max-width:640px){.fx-layout{font-size:2.5cqw}.fx-layout-list{width:34%}.fx-layout-list button{padding:.45em}.fx-layout-list button span{display:none}.fx-layout-work{padding:.85em}.fx-layout-panes{gap:.45em;padding:.65em 0}.fx-layout-panes section{padding:.55em}.fx-layout-foot span{font-size:.58em}}
.fx-q{width:74cqw;font-size:2.15cqw;line-height:1.4;background:#fff;border:1px solid var(--fx-line);border-radius:var(--pr);text-align:left;color:var(--fx-ink)}
.fx-q-n{font-family:var(--mono);font-size:.8em;color:#8f8f89}.fx-q-auto{margin-left:auto;font-size:.88em;color:var(--fx-muted)}
.fx-q-rows{list-style:none;margin:0;padding:0}.fx-q-rows li{display:flex;align-items:center;gap:.9em;padding:.85em 1.2em;border-top:1px solid var(--fx-line);background:#fff;position:relative}
.fx-q-rows li:last-child{border-radius:0 0 var(--pr) var(--pr)}
.fx-q-grip{flex:none;width:.5em;height:1.1em;background:radial-gradient(circle,#b9b9b3 .11em,transparent .13em) 0 0/.25em .37em}
.fx-q-b{flex:1;min-width:0}.fx-q-b small{display:block;font-family:var(--mono);font-size:.72em;letter-spacing:.06em;color:#8f8f89;margin-bottom:.2em}
.fx-q-ctl{flex:none;width:.9em;height:.9em;box-sizing:border-box}.fx-q-ctl.pause{border-left:.26em solid var(--fx-ink);border-right:.26em solid var(--fx-ink)}.fx-q-ctl.play{border-style:solid;border-width:.45em 0 .45em .8em;border-color:transparent transparent transparent var(--fx-ink)}
.fx-q-rows li.lift{z-index:2;border:1px solid var(--fx-ink);border-radius:.8em;margin:0 -.9em;padding:.85em 2.1em;transform:translateY(-.5em) rotate(-1.2deg);box-shadow:0 1.2em 2.6em rgba(20,20,18,.2)}.fx-q-rows li.lift .fx-q-grip{background-image:radial-gradient(circle,var(--fx-ink) .11em,transparent .13em)}
.fx-q-rows li.held{background:#f4f4f1}.fx-q-rows li.held .fx-q-b{color:#8f8f89}.fx-q-rows li.held .fx-u-send{background:#b9b9b3}
.fx-media.graph .fx-plat .fxo{display:grid;place-items:center;place-content:center;width:84cqw;aspect-ratio:5/4;background:#f7f7f5}.fx-media.graph .fx-plat img{width:70cqw;height:70cqw;background:none}
.fx-jr{width:78cqw;font-size:2.1cqw;line-height:1.45;background:#fff;border:1px solid var(--fx-line);border-radius:var(--pr);overflow:hidden;text-align:left;color:var(--fx-ink)}
.fx-jr-bar{display:flex;align-items:center;gap:.7em;padding:.85em 1.3em;border-bottom:1px solid var(--fx-line);font-size:.86em;color:var(--fx-muted);white-space:nowrap}.fx-jr-bar i{width:.4em;height:.4em;border-right:1px solid #a3a39d;border-top:1px solid #a3a39d;transform:rotate(45deg)}.fx-jr-bar span:nth-of-type(2){color:var(--fx-ink);font-weight:600}
.fx-jr-bar small{margin-left:auto;font-family:var(--mono);font-size:.82em;letter-spacing:.1em;text-transform:uppercase;color:#8f8f89}
.fx-jr-doc{padding:1.3em 1.5em 1.4em}.fx-jr-doc h5{margin:0 0 .3em;font-size:1.7em;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.fx-jr-doc p{margin:0;color:#55554f}.fx-jr-doc p.fx-jr-lede{color:var(--fx-muted);margin-bottom:.2em}
.fx-jr-doc h6{margin:1em 0 .2em;font-family:var(--mono);font-size:.74em;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--fx-ink)}
.fx-jr-links{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.2em;padding-top:1em;border-top:1px solid var(--fx-line)}.fx-jr-links span{font-size:.86em;padding:.25em .75em;border:1px solid #c9c9c3;border-radius:.5em;background:#f4f4f1}.fx-jr-links span:before{content:'[[';color:#a3a39d;margin-right:.15em}.fx-jr-links span:after{content:']]';color:#a3a39d;margin-left:.15em}
.fx-rl{width:84cqw;font-size:2cqw;line-height:1.4;text-align:left;color:var(--fx-ink)}
.fx-rl-stage{position:relative;height:58cqw}
.fx-rl-tab{position:absolute;left:0;top:0;width:76%;height:92%;background:#fff;border:.5em solid #fff;outline:1px solid #c9c9c3;border-radius:1.8em;overflow:hidden;box-shadow:0 2em 4em -2em rgba(20,20,18,.25)}
.fx-rl-ph{position:absolute;right:0;bottom:0;width:33%;height:88%;background:#fff;border:1px solid #c9c9c3;border-radius:2.2em;overflow:hidden;box-shadow:0 2.2em 4em -1.6em rgba(20,20,18,.35);padding-top:.4em}
.fx-rl-bar{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.7em 1em;border-bottom:1px solid var(--fx-line);font-size:.86em;color:var(--fx-muted)}.fx-rl-bar b{color:var(--fx-ink);font-weight:600}.fx-rl-bar span{font-family:var(--mono);font-size:.78em;letter-spacing:.08em;text-transform:uppercase}
.fx-rl-body{padding:1em 1.1em;display:flex;flex-direction:column;gap:.7em}.fx-rl-tab .fx-rl-body{padding-right:30%}.fx-rl-ph .fx-rl-body{font-size:.86em;gap:.6em;padding:.8em .9em}.fx-rl-ph .fx-rl-bar{padding:.7em .9em}.fx-rl-body p{margin:0}
.fx-rl-body .you{background:#f4f4f1;border-radius:.8em;padding:.6em .8em;font-weight:500}
.fx-rl-body .run{font-family:var(--mono);font-size:.8em;color:var(--fx-muted)}
.fx-rl-body .out{padding-left:.9em;border-left:1.5px solid var(--fx-ink);color:#55554f}
.fx-rl-in{margin-top:.4em;padding:.5em .8em;border:1px solid var(--fx-line);border-radius:99em;color:#a3a39d;font-size:.86em}
.fx-rl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1em;font-size:1.05em;color:var(--fx-muted)}.fx-rl-steps li{border-top:1.5px solid var(--fx-ink);padding-top:.7em}.fx-rl-steps b{display:block;color:var(--fx-ink);font-weight:600;margin-bottom:.2em}
@media (max-width:640px){.fx-media.mock:has(.fx-rl){aspect-ratio:auto;padding:12px}.fx-rl{font-size:3.1cqw}.fx-rl-stage{height:auto}.fx-rl-tab{position:relative;width:100%;height:auto}.fx-rl-tab .fx-rl-body{padding-right:1.1em}.fx-rl-tab .fx-rl-body{min-height:0}.fx-rl-ph{position:relative;right:auto;bottom:auto;width:58%;height:auto;margin:-1.2em 0 0 auto;padding-top:.4em}.fx-rl-steps{grid-template-columns:1fr 1fr}}
.fx-sol-sw{flex:none;width:2.1em;height:1.2em;border-radius:99em;background:var(--fx-ink);position:relative}.fx-sol-sw:after{content:'';position:absolute;right:.16em;top:.16em;width:.88em;height:.88em;border-radius:50%;background:#fff}

.fx-k{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-muted);margin-bottom:16px}
.fx-k span{display:inline-grid;place-items:center;min-width:30px;height:22px;border:1px solid var(--fx-line);border-radius:999px;padding:0 8px;color:var(--fx-ink)}
.fx-copy h3{font-size:clamp(28px,2.8vw,38px);letter-spacing:-.03em;line-height:1.08;font-weight:500;margin:0 0 12px}
.fx-lede{font-size:18px;line-height:1.5;color:var(--fx-ink);margin:0 0 12px}
.fx-sub{font-size:15.5px;line-height:1.65;color:var(--fx-muted);margin:0 0 26px;max-width:470px}

.fx-more{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 8px;border-radius:999px;border:1px solid var(--fx-line);background:#fff;color:var(--fx-ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s,transform .2s}
.fx-more:hover{border-color:#c9c9c4;transform:translateY(-1px)}
.fx-ic{position:relative;width:26px;height:26px;border-radius:50%;background:var(--fx-ink);flex:none}
.fx-ic:before,.fx-ic:after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:#fff;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.7,0,.2,1)}
.fx-ic:after{transform:translate(-50%,-50%) rotate(90deg)}
.fx-row.open .fx-ic:after{transform:translate(-50%,-50%) rotate(0deg)}

/* expanding description */
.fx-panel{grid-column:1/-1;order:3;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.7,0,.2,1);margin-top:-30px}
.fx-row.open .fx-panel{grid-template-rows:1fr}
.fx-panel-in{min-height:0;overflow:hidden;opacity:0;transition:opacity .35s ease}
.fx-row.open .fx-panel-in{opacity:1;transition:opacity .45s ease .2s}
.fx-panel-in>*:first-child{margin-top:34px}
.fx-title{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;line-height:1.15;font-weight:500;margin:0 0 24px;padding-top:30px;border-top:1px solid var(--fx-line)}
.fx-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.fx-val{background:#fff;border:1px solid var(--fx-line);border-radius:16px;padding:20px 22px}
.fx-val h4,.fx-deep h4{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.fx-val p,.fx-deep p{margin:0;font-size:14.5px;line-height:1.6;color:var(--fx-muted)}
.fx-val b,.fx-deep b{color:var(--fx-ink);font-weight:600}
.fx-deeps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.fx-deep{border-radius:16px;padding:22px 24px;background:#efefec}
.fx-deep ul{list-style:none;margin:14px 0 0;padding:0}
.fx-deep li{position:relative;padding:7px 0 7px 22px;border-top:1px solid #e0e0dc;font-size:14px;color:var(--fx-ink)}
.fx-deep li:before{content:'';position:absolute;left:2px;top:12px;width:9px;height:5px;border-left:1.5px solid var(--fx-ink);border-bottom:1.5px solid var(--fx-ink);transform:rotate(-45deg)}
.fx-full{display:inline-flex;gap:8px;font-size:14px;font-weight:500;color:var(--fx-ink);border-bottom:1px solid var(--fx-ink);padding-bottom:3px;margin-bottom:6px}
.fx-full i{font-style:normal;transition:transform .2s}
.fx-full:hover i{transform:translateX(4px)}

.fx-end{text-align:center;max-width:760px;margin:40px auto 120px;padding:70px 24px;border-top:1px solid var(--fx-line)}
.fx-end h2{font-size:clamp(36px,4.6vw,60px);letter-spacing:-.04em;line-height:1.04;font-weight:500;margin:0 0 18px}
.fx-end p{font-size:17px;line-height:1.6;color:var(--fx-muted);margin:0 auto 30px;max-width:540px}

/* Luminair: its own closing section. Its panel stays in view on the left while the list of what it does scrolls past. */
.fx-so{background:#fff;border-top:1px solid var(--fx-line);border-bottom:1px solid var(--fx-line);margin:40px 0 0;padding:120px 24px 100px;scroll-margin-top:60px}
.fx-so-in{max-width:1132px;margin:0 auto}
.fx-so-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:end;margin:0 0 64px}
.fx-so-eye{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fx-muted);margin:0 0 22px}
/* Its name is set in the serif the app gives it on its own panel. */
.fx-so-head h2{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-size:clamp(84px,13vw,176px);letter-spacing:-.035em;line-height:.86;font-weight:400;margin:0;color:var(--fx-ink)}
.fx-so-lede{font-size:clamp(21px,2.1vw,28px);line-height:1.25;letter-spacing:-.018em;color:var(--fx-ink);margin:0 0 16px;text-wrap:balance}
.fx-so-sub{font-size:17px;line-height:1.65;color:var(--fx-muted);margin:0;max-width:52ch}
.fx-so-stage{scroll-margin-top:96px;margin:0 0 56px}
.fx-so-shot{position:relative;aspect-ratio:8/5;border-radius:22px;overflow:hidden;background:#b9b9b7;box-shadow:0 0 0 1px rgba(20,20,18,.08),0 50px 90px -50px rgba(20,20,18,.45)}
.fx-so-shot img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
.fx-so-shot img.on{opacity:1}
.fx-so-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;align-items:start;margin:0 0 44px}
.fx-so-c h3{margin:0 0 26px;font:inherit}
.fx-so-pick{position:relative;display:block;width:100%;padding:20px 0 0;border:0;border-top:1px solid var(--fx-line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fx-so-n{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-muted);margin:0 0 12px;transition:color .2s ease-out}
.fx-so-t{display:block;font-size:clamp(21px,1.9vw,25px);letter-spacing:-.025em;line-height:1.15;font-weight:500;color:var(--fx-muted);transition:color .2s ease-out}
.fx-so-c.on .fx-so-t,.fx-so-c.on .fx-so-n{color:var(--fx-ink)}
.fx-so-bar{position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--fx-ink);transform:scaleX(0);transform-origin:0 50%}
.fx-so-c.on .fx-so-bar{transform:scaleX(1)}
/* While it walks the chapters on its own, the bar is the clock: when it fills, the next chapter takes over. */
.fx-so-auto .fx-so-c.on .fx-so-bar{animation:fxSoBar 7s linear both}
.fx-so-auto.fx-so-hold .fx-so-c.on .fx-so-bar{animation-play-state:paused}
@keyframes fxSoBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fx-so-pick:focus-visible{outline:2px solid var(--fx-ink);outline-offset:6px;border-radius:2px}
@media (hover:hover){.fx-so-pick:hover .fx-so-t{color:var(--fx-ink)}}
.fx-so-job{margin:0 0 24px}
.fx-so-job h4{font-size:16.5px;font-weight:600;line-height:1.3;margin:0 0 6px;color:var(--fx-ink)}
.fx-so-job p{font-size:15.5px;line-height:1.65;color:var(--fx-muted);margin:0;max-width:56ch}
.fx-so-job code{font-family:var(--mono);font-size:.9em;color:var(--fx-ink);background:#f1f1ee;border-radius:5px;padding:.1em .4em}
.fx-so+.fx-end{border-top:0;margin-top:0}
@media (max-width:980px){.fx-so{padding:84px 20px 64px}.fx-so-head{grid-template-columns:1fr;gap:28px;margin-bottom:44px}.fx-so-list{grid-template-columns:1fr;gap:36px}.fx-so-stage{margin-bottom:40px}}
/* On a phone the whole window would be unreadable, so the frame closes in on its panel. */
@media (max-width:640px){.fx-so-shot{aspect-ratio:1/1.1;border-radius:16px}.fx-so-shot img{width:auto;height:110%;max-width:none;left:-21%;top:-5%}}
@media (prefers-reduced-motion:reduce){.fx-so-shot img{transition:none}.fx-so-bar{animation:none!important}}

/* reveal */
.fx [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.fx [data-rv].in{opacity:1;transform:none}

@media (max-width:980px){
  .fx-row{grid-template-columns:1fr;gap:28px;margin-bottom:70px}
  .fx-row.flip .fx-media{order:0}
  .fx-panel{margin-top:0}
  .fx-vals,.fx-deeps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fx-hero{padding:72px 20px 40px}
  .fx-pill{margin-bottom:48px}
  .fx-pill-b{display:none}
  .fx-group,.fx-frame{padding:0 18px}
  .fx-gh{margin-bottom:44px}
  .fx-media{border-radius:20px}
  .fx-media.mock{padding:14px}
  .fx-assembly{height:210vh;margin-top:-8px}
  .fx-assembly-sticky{min-height:560px}
  .fx-assembly-scene{width:calc(100vw - 22px)}
  .fx-assembly-meta{left:18px;right:18px;top:88px}
  .fx-part-label{left:4px;top:-13px;font-size:7px;padding:3px 6px}.fx-p-layouts .fx-part-label{right:4px}
  .fx-assembly-scene{aspect-ratio:56/76}.fx-app{font-size:calc(100cqw/56)}
  .fx-app-body{display:grid;grid-template-columns:17em 1fr;grid-template-rows:1fr 21em}.fx-col.side,.fx-col.right{width:auto}.fx-col.right{grid-column:1/-1;flex-direction:row}
  .fx-p-branches{width:17em}.fx-p-branchout{flex:1;min-width:0}.fx-u-panes section{padding:0 1em}.fx-u-fan{max-height:8em}
  .fx-assembly-meter{bottom:22px;width:54vw}
}
@media (prefers-reduced-motion:reduce){
  .fx [data-rv]{opacity:1;transform:none;transition:none}
  .fx-panel,.fx-panel-in,.fx-ic:before,.fx-ic:after{transition:none}
  .fx-plat,.fx-frame{transform:none!important}.fx-spl-ghost{animation:none}
  .fx-assembly{height:auto;margin:0 0 54px}.fx-assembly-sticky{position:relative;height:auto;min-height:0;display:block;padding:0 18px}.fx-assembly-scene{width:min(1120px,100%);margin:auto;transform:none!important;opacity:1!important}.fx-assembly-shell{position:relative;aspect-ratio:2400/1343;background:rgba(255,255,255,.34);border:1px solid var(--fx-line)}.fx-part-label,.fx-assembly-meta,.fx-assembly-meter{display:none}
}
@media (max-width:640px){.fx-pill .fx-pill-cta{display:none}}
/* Frosted platter: every screenshot or mock sits on blurred glass with the same inset on all four sides. */
.fx-media::before,.fx-stage::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(34% 30% at 24% 26%,rgba(255,255,255,.95),transparent 70%),radial-gradient(32% 28% at 80% 74%,rgba(176,176,170,.5),transparent 72%),radial-gradient(24% 22% at 72% 20%,rgba(255,255,255,.85),transparent 70%),radial-gradient(26% 24% at 18% 84%,rgba(196,196,190,.45),transparent 72%)}
.fx-plat{--pp:14px;--pr:12px;position:relative;z-index:1;box-sizing:border-box;padding:var(--pp);border-radius:calc(var(--pr) + var(--pp));background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(20,20,18,.05),0 34px 70px -40px rgba(20,20,18,.42);transform:translateY(var(--py,0));transition:transform .1s linear}
.fx-plat img{display:block;max-width:none;border-radius:var(--pr);border:1px solid var(--fx-line);background:#fff}
/* Micro-motion on the visuals. Captures get small covers and rings laid over the image (.fxo); mocks animate their own parts. features-hub.js sets .fx-run while the visual is on screen. */
.fx-plat .fxo{position:relative;display:block;overflow:hidden;border-radius:var(--pr);border:1px solid var(--fx-line);background:#fff}
.fx-plat .fxo img{border:0;border-radius:0}
.fxo>i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none;opacity:0}
.fxa-dim{border-radius:50%;background:#fcfbfc}
.fxa-ring{border-radius:50%;background:#ec935d}
.fxa-hl{border-radius:5px;background:rgba(36,36,33,.07)}
.fx-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;background:var(--fx-ink);vertical-align:-.16em}
.fx-run .fxa-dim{animation:fxaDim 1.6s ease-in-out var(--d,0s) infinite}
.fx-run .fxa-ring{animation:fxaRing 2.4s ease-out var(--d,0s) infinite}
.fx-run .fxa-hl{animation:fxaHl 3.6s ease-in-out infinite}
/* Multi-model: the selection moves from model to model. Each row is hovered (grey), then picked (outlined pill, as in the app). */
.fxo>i.fxa-cover{opacity:1;background:#fcfcfc}
.fxa-pick{box-sizing:border-box;border:max(1px,.23cqw) solid transparent;border-radius:.65cqw}.fxo>i.fxa-pick.on{opacity:1;border-color:var(--c)}
.fx-run .fxa-pick{animation:fxaPick 9s linear var(--d,0s) infinite}
@keyframes fxaPick{0%{opacity:0;background:rgba(36,36,33,.07);border-color:transparent}2%,7.5%{opacity:1;background:rgba(36,36,33,.07);border-color:transparent}9%,41%{opacity:1;background:transparent;border-color:var(--c)}42.5%,100%{opacity:0;background:transparent;border-color:var(--c)}}
.fx-run .fx-caret{animation:fxaCaret 1.06s steps(1,end) infinite}
/* Split View: the dragged session visits three drop targets in turn (split left, split right, add as tab); the zone snaps as the cursor crosses into it. */
.fx-run .fx-spl-cursor{animation:fxSplCur 9s cubic-bezier(.45,0,.3,1) infinite}
.fx-run .fx-spl-drop{animation:fxSplZone 9s step-end infinite,fxSplFade 9s linear infinite}
.fx-run .fx-spl-tag.l{animation:fxSplL 9s step-end infinite}.fx-run .fx-spl-tag.r{animation:fxSplR 9s step-end infinite}.fx-run .fx-spl-tag.t{animation:fxSplT 9s step-end infinite}
@keyframes fxSplCur{0%,23%{left:47.5%;top:70%}33%,56%{left:80%;top:70%}66%,90%{left:70%;top:5.6%}100%{left:47.5%;top:70%}}
@keyframes fxSplZone{0%,95%{inset:0 50% 0 0}28%{inset:0 0 0 50%}64%{inset:calc(-2.944em - 1px) 0 100% 0;background-color:rgba(255,255,255,.2)}}
@keyframes fxSplFade{0%,26%,31%,62%,67%,93%,98%,100%{opacity:1}28%,64%,95%{opacity:0}}
@keyframes fxSplL{0%,95%{opacity:1}28%{opacity:0}}
@keyframes fxSplR{0%,64%{opacity:0}28%{opacity:1}}
@keyframes fxSplT{0%,95%{opacity:0}64%{opacity:1}}
.fx-run .fx-layout-panes i{animation:fxaSoft 2.4s ease-in-out infinite}
.fx-run .fx-layout-panes i:nth-of-type(2){animation-delay:.2s}.fx-run .fx-layout-panes i:nth-of-type(3){animation-delay:.4s}.fx-run .fx-layout-panes i:nth-of-type(4){animation-delay:.6s}
/* Queue: the lifted request is dragged to the top and dropped, then the top one is picked up and dragged back down; the row it passes slides the other way. */
.fx-run .fx-q-rows li.lift{border-width:1px 0 0;animation:fxQDrag 8s cubic-bezier(.45,0,.25,1) infinite}
.fx-run .fx-q-rows li:first-child{animation:fxQSwap 8s cubic-bezier(.45,0,.25,1) infinite}
.fx-run .fx-q-rows li.lift .fx-q-grip{background-image:radial-gradient(circle,#b9b9b3 .11em,transparent .13em);animation:fxQGrip 8s linear infinite}
@keyframes fxQDrag{
0%,4%,100%{transform:translateY(-.5em) rotate(-1.2deg);margin:0 -.9em;padding:.85em 2.1em;border-radius:.8em;border-color:transparent;box-shadow:0 0 0 1px var(--fx-ink),0 1.2em 2.6em rgba(20,20,18,.2)}
22%,56%{transform:translateY(calc(-100% - .5em)) rotate(-1.2deg);margin:0 -.9em;padding:.85em 2.1em;border-radius:.8em;border-color:transparent;box-shadow:0 0 0 1px var(--fx-ink),0 1.2em 2.6em rgba(20,20,18,.2)}
27%,51%{transform:translateY(-100%) rotate(0deg);margin:0;padding:.85em 1.2em;border-radius:0;border-color:var(--fx-line);box-shadow:0 0 0 1px rgba(36,36,33,0),0 0 0 rgba(20,20,18,0)}
74%{transform:translateY(-.5em) rotate(-1.2deg);margin:0 -.9em;padding:.85em 2.1em;border-radius:.8em;border-color:transparent;box-shadow:0 0 0 1px var(--fx-ink),0 1.2em 2.6em rgba(20,20,18,.2)}
79%,95%{transform:translateY(0) rotate(0deg);margin:0;padding:.85em 1.2em;border-radius:0;border-color:var(--fx-line);box-shadow:0 0 0 1px rgba(36,36,33,0),0 0 0 rgba(20,20,18,0)}
}
@keyframes fxQSwap{0%,9%,69%,100%{transform:none}17%,61%{transform:translateY(100%)}}
@keyframes fxQGrip{0%,22%,56%,74%,100%{filter:brightness(.2)}27%,51%,79%,95%{filter:none}}
/* Second Brain: the same label-free graph as the homepage card, turning slowly; it pauses off screen instead of resetting. */
.fx-media.graph .fx-plat img{animation:fxSpin 110s linear infinite paused}.fx-media.graph.fx-run .fx-plat img{animation-play-state:running}
/* graph3d.js replaces the flat picture with the same graph orbiting in depth; the picture stays as the fallback. */
.fx-media.graph .fx-plat canvas.fx-g3d{display:block;width:70cqw;height:70cqw}.fx-media.graph .fx-plat .fx-g3d-on>img{display:none}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxaDim{0%,100%{opacity:0}50%{opacity:.62}}
@keyframes fxaRing{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(3)}}
@keyframes fxaHl{0%,100%{opacity:0}50%{opacity:1}}
@keyframes fxaCaret{50.01%,100%{opacity:0}}

@keyframes fxaSoft{50%{opacity:.55}}
@keyframes fxaLift{to{translate:0 -.22em}}
@keyframes fxaBreathe{to{transform:scale(1.02)}}
/* Branch-out graph redrawn over the capture (boGraph in build-features.js): work travels out to the agents, a finished agent turns ink. */
.fx-bo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-bo text{font:27px 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;fill:#2c2c2c}
.fx-bo text.bo-k{font:22px var(--mono);letter-spacing:3.1px;fill:#111214}
.fx-bo path{fill:none;stroke-width:2.2}
.fx-bo path.run{stroke:#ff8a3d;opacity:.85}
.fx-bo path.done{stroke:#111214}
.fx-bo path.pend{stroke-dasharray:7 7}
.fx-bo .bo-n.run,.fx-bo .bo-go{fill:#ff8a3d}
.fx-bo .bo-n .h{opacity:.22}
.fx-bo .bo-n.done,.fx-bo .bo-c{fill:#111214}
.fx-bo .bo-ch{fill:rgba(17,18,20,.14)}
.fx-bo .bo-e{fill:rgba(17,18,20,.28)}
.fx-run .fx-bo .bo-n.run{animation:fxBoBlink 1.1s ease-in-out infinite}
.fx-run .fx-bo path.run.pend{animation:fxBoFlow .9s linear infinite}
@keyframes fxBoBlink{50%{opacity:.25}}
@keyframes fxBoFlow{to{stroke-dashoffset:-14}}
@media (prefers-reduced-motion:reduce){.fxo>i,.fx-caret,.fx-media *{animation:none!important}}
@media (prefers-reduced-motion:reduce){.fx-bo .bo-go{display:none}}
.fx-media.tall .fx-plat img{height:64cqw;width:auto}
.fx-media.card .fx-plat img{width:76cqw;height:auto}
.fx-media.wide{place-items:start}
.fx-media.wide .fx-plat{position:absolute;left:14cqw;top:11cqw}
.fx-media.wide .fx-plat img{width:112cqw;height:auto}
.fx-media.zoom .fx-plat{position:absolute;left:7cqw;top:9cqw}
.fx-media.zoom .fx-plat img{width:230cqw;height:auto}
.fx-media.crop .fx-plat{position:absolute;left:19cqw;top:5cqw}
.fx-media.crop .fx-plat img{width:58cqw;height:66cqw;object-fit:cover}
.fx-media.mock>.fx-plat{width:100%;max-width:540px}
/* A mock with its own width is narrower than that plate, which left a wide band on its right. The plate hugs it, so the frame is even on all four sides. */
.fx-media.mock>.fx-plat:has(>.fx-jr,>.fx-q,>.fx-layout,>.fx-spl){width:fit-content}
.fx-plat>.ui{margin:0;border-radius:var(--pr)}
.fx-stage{position:relative;container-type:inline-size;isolation:isolate;overflow:hidden;border-radius:30px;padding:5.5cqw;background:radial-gradient(120% 90% at 30% 20%,#fbfbfa 0%,#ecece9 55%,#e2e2df 100%);border:1px solid var(--fx-line)}
.fx-stage .fx-plat{--pp:18px;--pr:14px}
.fx-stage .fx-plat img{width:100%;height:auto}
@media (max-width:640px){.fx-stage{border-radius:22px}.fx-plat,.fx-stage .fx-plat{--pp:10px;--pr:10px}}
/* Mobile Relay: real tablet and phone captures, same pair as the homepage card */
/* Mobile Relay: one session on a computer, a phone and an iPad. The computer is cropped to a corner, the phone sits in front. */
.fx-plat:has(.fx-rl-sync){padding:0;overflow:hidden}
.fx-rl-sync{width:100%}
.fx-rl-sync .fx-rl-stage{height:auto;aspect-ratio:5/3.6}
.fx-rl-dv{position:absolute;display:block;filter:drop-shadow(0 1.4em 1.6em rgba(20,20,18,.24))}
.fx-plat .fx-rl-dv img{display:block;width:100%;height:auto;border:0;border-radius:0;background:none}
.fx-rl-dv.lap{left:-14.6%;top:5%;width:60%;z-index:1}
.fx-rl-dv.pad{left:61%;top:14%;width:37.5%;z-index:2}
.fx-rl-dv.ph{left:41%;top:42%;width:17.5%;z-index:3}
/* Covers that hide the last reply and its Recap on every screen; features-hub.js wipes them away in step. */
.fx-rl-dv .fx-cv{display:none;position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform-origin:100% 50%;background:#f7f7f7}
.fx-rl-dv.pad .fx-cv{background:#fff}.fx-rl-dv.ph .fx-cv{background:#fcfbfc}
.fx-rl-sync.fx-live .fx-cv{display:block}
/* The link: a line from the computer to the iPad with a stem down to the phone, and data moving along both. */
.fx-rl-link{position:absolute;left:37.9%;top:28%;width:23.1%;z-index:4;border-top:1.5px dashed rgba(20,20,18,.55)}
.fx-rl-link::before,.fx-rl-link::after,.fx-rl-stem::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#141412}
.fx-rl-link::before{left:-3px;top:-4px}.fx-rl-link::after{right:-3px;top:-4px}
.fx-rl-link span{position:absolute;left:50%;top:-.9em;transform:translate(-50%,-100%);white-space:nowrap;font:600 .92em/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;background:#141412;color:#fff;padding:.5em .85em;border-radius:99em}
.fx-rl-stem{position:absolute;left:49.95%;top:28%;height:14%;z-index:4;border-left:1.5px dashed rgba(20,20,18,.55)}
.fx-rl-stem::after{left:-4px;bottom:-3px}
/* Dots on the link, one 5.2s loop. a and b leave the computer together: a runs to the iPad, b turns down the stem to the phone, and both land at 25%.
   Then c comes back from the iPad (31-56%), then d comes back from the phone (62-87%). The end marks pulse as a dot lands on them. */
.fx-rl-go{position:absolute;left:37.9%;top:28%;z-index:5;width:6px;height:6px;margin:-2.5px 0 0 -3px;border-radius:50%;background:#141412;opacity:0;pointer-events:none}
.fx-run .fx-rl-go.a{animation:fxRlGoA 5.2s linear infinite}
.fx-run .fx-rl-go.b{animation:fxRlGoB 5.2s linear infinite}
.fx-run .fx-rl-go.c{animation:fxRlGoC 5.2s linear infinite}
.fx-run .fx-rl-go.d{animation:fxRlGoD 5.2s linear infinite}
.fx-run .fx-rl-link::after,.fx-run .fx-rl-stem::after{animation:fxRlLandOut 5.2s ease-out infinite}
.fx-run .fx-rl-link::before{animation:fxRlLandBack 5.2s ease-out infinite}
@keyframes fxRlGoA{0%{left:37.9%;top:28%;opacity:0}2%{opacity:1}23%{opacity:1}25%,100%{left:61%;top:28%;opacity:0}}
@keyframes fxRlGoB{0%{left:37.9%;top:28%;opacity:0}2%{opacity:1}13.6%{left:49.95%;top:28%}23%{opacity:1}25%,100%{left:49.95%;top:42%;opacity:0}}
@keyframes fxRlGoC{0%,31%{left:61%;top:28%;opacity:0}33%{opacity:1}54%{opacity:1}56%,100%{left:37.9%;top:28%;opacity:0}}
@keyframes fxRlGoD{0%,62%{left:49.95%;top:42%;opacity:0}64%{opacity:1}73.4%{left:49.95%;top:28%}85%{opacity:1}87%,100%{left:37.9%;top:28%;opacity:0}}
@keyframes fxRlLandOut{0%,24%{box-shadow:0 0 0 0 rgba(20,20,18,0)}25%{box-shadow:0 0 0 0 rgba(20,20,18,.38)}40%,100%{box-shadow:0 0 0 7px rgba(20,20,18,0)}}
@keyframes fxRlLandBack{0%,55%{box-shadow:0 0 0 0 rgba(20,20,18,0)}56%{box-shadow:0 0 0 0 rgba(20,20,18,.38)}71%{box-shadow:0 0 0 7px rgba(20,20,18,0)}86%{box-shadow:0 0 0 0 rgba(20,20,18,0)}87%{box-shadow:0 0 0 0 rgba(20,20,18,.38)}100%{box-shadow:0 0 0 7px rgba(20,20,18,0)}}
@media (max-width:640px){.fx-rl-link span{font-size:.68em}}
/* Remote: a phone held sideways in front of a big screen. Each .f is one capture of the real app; later frames sit on top, so a frame only has to appear at its moment.
   One 10s clock: pick a session (10%), pick another (24%), hold the mic (38%), the words build up (44-57%), release (66%), the request lands on the screen (72%). Without motion the last frame of each shows. */
.fx-plat:has(.fx-rm){padding:0;overflow:hidden}
.fx-rm{width:100%}
.fx-rm-stage{position:relative;container-type:inline-size;aspect-ratio:5/3.85}
.fx-rm-tv,.fx-rm-ph{position:absolute;display:block;box-sizing:border-box;background:#141412;filter:drop-shadow(0 1.4cqw 1.8cqw rgba(20,20,18,.26))}
.fx-rm-tv{left:2%;top:2.9%;width:96%;padding:.8cqw;border-radius:1.5cqw;z-index:1}
.fx-rm-tv::before,.fx-rm-tv::after{content:"";position:absolute;top:calc(100% - 1px);width:6%;height:1.7cqw;background:#141412;clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)}
.fx-rm-tv::before{left:9%}.fx-rm-tv::after{right:9%}
.fx-rm-ph{left:21%;top:61.2%;width:58%;padding:1cqw;border-radius:4.6cqw;z-index:3}
.fx-rm-scr{display:block;position:relative;overflow:hidden;background:#f7f7f8}
.fx-rm-tv .fx-rm-scr{aspect-ratio:16/9;border-radius:.7cqw}
.fx-rm-ph .fx-rm-scr{aspect-ratio:1278/590;border-radius:3.6cqw}
.fx-plat .fx-rm img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;border:0;border-radius:0;background:none}
.fx-rm-cv{position:absolute;opacity:0;background:#f7f7f8;transform-origin:100% 50%}
.fx-rm-cv.m{left:57%;top:59.5%;width:31.5%;height:3.8%}
.fx-rm-cv.t{left:58.2%;top:67.8%;width:13.3%;height:5.6%}
.fx-rm-tap{position:absolute;left:77.2%;top:34.5%;width:7%;aspect-ratio:1;border-radius:50%;background:rgba(20,20,18,.3);box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.6);opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.fx-rm-go{position:absolute;left:74.5%;top:91.5%;z-index:4;width:1.5cqw;height:1.5cqw;margin:-.75cqw 0 0 -.75cqw;border-radius:50%;background:#141412;opacity:0;pointer-events:none}
.fx-run .fx-rm-ph .f-r{animation:fxRm10 10s linear infinite}
.fx-run .fx-rm-ph .f-c{animation:fxRm24 10s linear infinite}
.fx-run .fx-rm-ph .f-h{animation:fxRm38 10s linear infinite}
.fx-run .fx-rm-ph .f-s1{animation:fxRm44 10s linear infinite}
.fx-run .fx-rm-ph .f-s2{animation:fxRm50 10s linear infinite}
.fx-run .fx-rm-ph .f-s3{animation:fxRm57 10s linear infinite}
.fx-run .fx-rm-ph .f-z{animation:fxRm66 10s linear infinite}
.fx-run .fx-rm-tv .f-r{animation:fxRm11 10s linear infinite}
.fx-run .fx-rm-tv .f-c{animation:fxRm25 10s linear infinite}
.fx-run .fx-rm-tv .f-s{animation:fxRm72 10s linear infinite}
.fx-run .fx-rm-cv.m{animation:fxRmMsg 10s linear infinite}
.fx-run .fx-rm-cv.t{animation:fxRmThink 10s linear infinite}
.fx-run .fx-rm-tap{animation:fxRmTap 10s linear infinite}
.fx-run .fx-rm-go{animation:fxRmGo 10s linear infinite}
@keyframes fxRm10{0%,9.9%{opacity:0}10%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm24{0%,23.9%{opacity:0}24%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm38{0%,37.9%{opacity:0}38%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm44{0%,43.9%{opacity:0}44%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm50{0%,49.9%{opacity:0}50%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm57{0%,56.9%{opacity:0}57%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm66{0%,65.9%{opacity:0}66%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm11{0%,11%{opacity:0}13%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm25{0%,25%{opacity:0}27%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRm72{0%,71.9%{opacity:0}72%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes fxRmMsg{0%,71.9%{opacity:0;transform:scaleX(1)}72%{opacity:1;transform:scaleX(1);animation-timing-function:steps(9)}77%,100%{opacity:1;transform:scaleX(0)}}
@keyframes fxRmThink{0%,71.9%{opacity:0}72%,79%{opacity:1}79.1%,100%{opacity:0}}
@keyframes fxRmTap{0%,5%{left:77.2%;top:34.5%;opacity:0;transform:translate(-50%,-50%) scale(1.5)}8%{opacity:1;transform:translate(-50%,-50%) scale(1)}10%{opacity:1;transform:translate(-50%,-50%) scale(.78)}14%{left:77.2%;top:34.5%;opacity:0;transform:translate(-50%,-50%) scale(1.4)}14.1%,19%{left:70.4%;top:76.3%;opacity:0;transform:translate(-50%,-50%) scale(1.5)}22%{opacity:1;transform:translate(-50%,-50%) scale(1)}24%{opacity:1;transform:translate(-50%,-50%) scale(.78)}28%{left:70.4%;top:76.3%;opacity:0;transform:translate(-50%,-50%) scale(1.4)}28.1%,33%{left:93.7%;top:86.3%;opacity:0;transform:translate(-50%,-50%) scale(1.5)}36%{opacity:1;transform:translate(-50%,-50%) scale(1)}38%,66%{opacity:1;transform:translate(-50%,-50%) scale(.78)}69%,100%{left:93.7%;top:86.3%;opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes fxRmGo{0%,66%{opacity:0;transform:translate(0,0)}67.5%{opacity:1}71%{opacity:1}72%,100%{opacity:0;transform:translate(-16.2cqw,-34.8cqw)}}