/* Approved motion, scoped to its two homepage cards. */
/* Feature cards v3: a real desktop (wallpaper, Ghostty windows running Claude Code and Codex)
   with Heard's two glass surfaces: the dark status capsule and the Parrot companion pill.
   Scenes are laid out on a 680px stage and scaled to the card, so type keeps real proportions. */
.fm3-visual{padding:clamp(14px,2.2cqw,32px)}
.fm3-frame{position:relative;width:100%;aspect-ratio:1;overflow:hidden}
.fm3-visual{padding:0!important}
:where(.fm3) .stage{position:absolute;left:0;top:0;width:680px;height:680px;transform-origin:0 0;transform:scale(var(--k,1));font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
:where(.fm3) .stage *{box-sizing:border-box}
:where(.fm3) .menubar{position:absolute;inset:0 0 auto;height:26px;display:flex;align-items:center;gap:18px;padding:0 14px;background:#ffffff59;-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);font-size:12.5px;color:#1d1d1f}
:where(.fm3) .menubar b{font-weight:600}
:where(.fm3) .menubar .apple{width:12px;height:14px;background:#1d1d1f;-webkit-mask:url(assets/apple.svg) center/contain no-repeat;mask:url(assets/apple.svg) center/contain no-repeat}
:where(.fm3) .menubar time{margin-left:auto;font-variant-numeric:tabular-nums}/* Ghostty windows */
:where(.fm3) .cam{position:absolute;left:0;top:0;width:680px;height:680px;transform-origin:0 0;will-change:transform}
:where(.fm3) .gw{position:absolute;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;box-shadow:0 14px 34px #2b1e4026,0 0 0 .5px #00000038;transition:box-shadow .4s var(--ease-out),transform .45s var(--ease-out),opacity .4s}
:where(.fm3) .gw .bar{flex:none;height:28px;display:grid;grid-template-columns:60px 1fr 60px;align-items:center;padding:0 10px;font-size:12px;font-weight:500}
:where(.fm3) .gw .bar .lights{display:flex;gap:7px}
:where(.fm3) .gw .bar .lights i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
:where(.fm3) .gw .bar .lights i+i{background:#febc2e}
:where(.fm3) .gw .bar .lights i+i+i{background:#28c840}
:where(.fm3) .gw .bar span{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.fm3) .gw .tty{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 12px 10px;font:11.5px/1.55 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:-.01em}
:where(.fm3) .gw .log{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
:where(.fm3) .gw .log>*{flex:none;white-space:pre;overflow:hidden;text-overflow:ellipsis}
:where(.fm3) .gw .log>.in{animation:fm3-in .22s var(--ease-out)}
@keyframes fm3-in{from{opacity:0;transform:translateY(4px)}}
:where(.fm3) .gw.focus{box-shadow:0 20px 44px #2b1e4038,0 0 0 .5px #00000038}/* Claude Code, light Ghostty theme */
:where(.fm3) .cc{background:#fdfcfa;color:#2b2b2b}
:where(.fm3) .cc .bar{background:#ecebe8;color:#3d3d3d;border-bottom:.5px solid #d9d8d4}
:where(.fm3) .cc .g{color:#2e9e57}
:where(.fm3) .cc .m{color:#8a8a8a}
:where(.fm3) .cc .o{color:#d97757}
:where(.fm3) .cc .p{color:#8159c9}
:where(.fm3) .cc .b{color:#2f6fdb}
:where(.fm3) .cc .del{background:#fde4e4;color:#8f2a2a;display:block}
:where(.fm3) .cc .add{background:#dcf3df;color:#1f6b35;display:block}
:where(.fm3) .cc .rule{height:0;border-top:1px solid #c9c7c2;margin:6px 0 4px}
:where(.fm3) .cc .prompt{color:#2b2b2b}
:where(.fm3) .cc .hint{color:#8159c9;font-size:10.5px}
:where(.fm3) .cc .ask{border:1px solid #d9a283;border-radius:6px;padding:6px 10px;margin:4px 0 2px;white-space:normal}
:where(.fm3) .cc .ask div{white-space:pre}
:where(.fm3) .cc .ask .sel{color:#2f6fdb}/* Codex CLI, dark Ghostty theme */
:where(.fm3) .cx{background:#1c1c1f;color:#d6d6da}
:where(.fm3) .cx .bar{background:#2b2b2f;color:#c5c5cb;border-bottom:.5px solid #000}
:where(.fm3) .cx .g{color:#8bdc9a}
:where(.fm3) .cx .m{color:#7d7d86}
:where(.fm3) .cx .c{color:#6cc3e6}
:where(.fm3) .cx .r{color:#f08c8c}
:where(.fm3) .cx b{color:#fff;font-weight:600}
:where(.fm3) .cx .foot{color:#7d7d86;font-size:10.5px;display:flex;gap:14px}
:where(.fm3) .cx .foot span:last-child{margin-left:auto}
:where(.fm3) .cx .box{color:#e6e6ea;margin:6px 0 4px}/* Parrot companion pill: one glass silhouette (bead + neck + message), shape set by JS. */
:where(.fm3) .cp{position:absolute;z-index:9;top:44px;height:53px;color:#1d1d1f}
:where(.fm3) .cp .glass{position:absolute;inset:0;background:#fbf9fcd9;-webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(1.04);backdrop-filter:blur(22px) saturate(1.8) brightness(1.04)}
:where(.fm3) .cp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
:where(.fm3) .cp svg path{fill:none;stroke:#0000001f;stroke-width:.5}
:where(.fm3) .cp svg path.hi{stroke:#ffffffb3;stroke-width:1}
:where(.fm3) .cp .bead{position:absolute;left:0;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center}
:where(.fm3) .cp .bead i{width:28px;height:28px;background:#1d1d1f;-webkit-mask:url(assets/parrot.png) center/contain no-repeat;mask:url(assets/parrot.png) center/contain no-repeat;transition:transform .5s}
:where(.fm3) .cp.open .bead i{transform:rotate(-5deg)}
:where(.fm3) .cp .body{position:absolute;left:52px;top:0;bottom:0;display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;opacity:0}
:where(.fm3) .cp .sym{width:16px;margin-right:2px;display:grid;place-items:center;font-size:14px;font-weight:600}
:where(.fm3) .cp .sym .dots{width:13px;height:13px;border-radius:50%;border:1.6px dotted currentColor}
:where(.fm3) .cp .txt{display:flex;flex-direction:column;gap:3px;max-width:280px}
:where(.fm3) .cp .txt b{font-size:13px;line-height:16px;font-weight:500}
:where(.fm3) .cp .txt small{font-size:12px;line-height:14px;color:#3c3c4399;white-space:nowrap}
:where(.fm3) .cp .act{flex:none;height:27px;padding:0 12px;display:grid;place-items:center;border-radius:14px;font-size:12px;font-weight:500;background:#00000021;box-shadow:inset 0 0 0 .5px #00000038}
:where(.fm3) .cp .x{width:22px;text-align:center;font-size:12px;color:#3c3c4399}
:where(.fm3) .cp[data-kind=update] .sym,:where(.fm3) .cp[data-kind=update] .act{color:#24502c}
:where(.fm3) .cp[data-kind=ask] .sym,:where(.fm3) .cp[data-kind=ask] .act{color:#6a3a12}
:where(.fm3) .cp[data-kind=tip] .sym{color:#3c3c4399}/* Right ⌘ keycap, light aluminium */
:where(.fm3) .kc{position:absolute;z-index:11;right:18px;bottom:18px;width:64px;height:58px;border-radius:9px;background:linear-gradient(#f9f9f9,#e3e3e5);box-shadow:0 3px 0 #b7b7bb,0 6px 14px #0003,inset 0 0 0 .5px #0000002e;display:flex;flex-direction:column;justify-content:space-between;padding:7px 9px;font-size:11px;color:#3a3a3c;transition:transform .12s,box-shadow .12s}
:where(.fm3) .kc b{align-self:flex-end;font-size:15px;font-weight:400}
:where(.fm3) .kc span{font-size:10px}
.fm3[data-key] .kc{transform:translateY(2.5px);box-shadow:0 .5px 0 #b7b7bb,0 2px 6px #0003,inset 0 0 0 .5px #0000002e}
.fm3 .fade{transition:opacity .4s var(--ease-out)}
.fm3[data-out] .fade{opacity:0}
.fm3.fm-instant *{transition:none!important;animation-play-state:paused!important}/* Talking: subtitles appear word by word, the parrot bobs; details settle in after. */
:where(.fm3) .cp .txt b .w{opacity:.26;transition:opacity .18s}
:where(.fm3) .cp .txt b .w.on{opacity:1}
:where(.fm3) .cp .txt small,:where(.fm3) .cp .act,:where(.fm3) .cp .x{transition:opacity .35s var(--ease-out)}
:where(.fm3) .cp.speaking .txt small,:where(.fm3) .cp.speaking .act{opacity:0}
:where(.fm3) .cp.talking .bead i{animation:fm3-talk .26s ease-in-out infinite alternate}
@keyframes fm3-talk{from{transform:rotate(-9deg) translateY(-1px)}to{transform:rotate(1deg) translateY(.5px)}}
:where(.fm3) .cp[data-kind=you] .sym{color:#1d1d1f}
:where(.fm3) .cp .lb{display:flex;align-items:center;gap:1.5px;height:20px}
:where(.fm3) .cp .lb i{width:3px;height:3px;border-radius:1.5px;background:currentColor;opacity:.75}
:where(.fm3) .cp.listening .lb i{animation:fm3-lb .32s ease-in-out infinite alternate}
:where(.fm3) .cp.listening .lb i:nth-child(2){animation-duration:.24s;animation-delay:-.1s}
:where(.fm3) .cp.listening .lb i:nth-child(3){animation-duration:.36s;animation-delay:-.2s}
:where(.fm3) .cp.listening .lb i:nth-child(4){animation-duration:.28s;animation-delay:-.05s}
@keyframes fm3-lb{from{height:3px}to{height:18px}}/* Push-to-agent dictation box from the launch film: words stream in, agent names become chips,
   then the box folds into its agent's chip and flies to that session. */
:where(.fm3) .dict{position:absolute;z-index:10;left:50%;top:108px;width:max-content;max-width:520px;translate:-50% 0;padding:14px 18px 12px;border-radius:12px;background:#fff;box-shadow:0 12px 30px #2b1e4026,0 0 0 .5px #0000001f;font-size:17px;line-height:1.35;letter-spacing:-.01em;color:#1d1d1f;opacity:0;transform-origin:50% 50%;transition:opacity .25s,padding .35s var(--ease-out),border-radius .35s,background .3s}
:where(.fm3) .dict.on{opacity:1}
:where(.fm3) .dict .w{opacity:0;transition:opacity .15s}
:where(.fm3) .dict .w.on{opacity:1}
:where(.fm3) .dict .w.now{color:#2f2c9a}
:where(.fm3) .dict .nm.on{color:#fff;border-radius:6px;padding:0 5px}
:where(.fm3) .dict .nm.cc{background:#d97757}
:where(.fm3) .dict .nm.cx{background:#111}
:where(.fm3) .dwave{display:flex;align-items:center;gap:2px;height:20px;margin-top:8px}
:where(.fm3) .dwave i{width:2.5px;height:5px;border-radius:1.5px;background:#c7c3d3}
:where(.fm3) .dict.on:not(.fold) .dwave i{animation:fm3-dw .4s ease-in-out infinite alternate}
:where(.fm3) .dwave i:nth-child(3n){animation-duration:.3s!important}
:where(.fm3) .dwave i:nth-child(4n+1){animation-duration:.5s!important;background:#8f8bd8}
:where(.fm3) .dwave i:nth-child(5n+2){animation-delay:-.2s}
@keyframes fm3-dw{to{height:18px}}
:where(.fm3) .dchip{display:none;align-items:center;gap:8px;white-space:nowrap;color:#e9e7ee;font-size:14px}
:where(.fm3) .dchip img{width:18px;height:18px;filter:invert(1)}
:where(.fm3) .dchip b{color:#fff;font-weight:600}
:where(.fm3) .dict.fold{background:#1d1d1f;padding:9px 14px;border-radius:22px}
:where(.fm3) .dict.fold .dw,:where(.fm3) .dict.fold .dwave{display:none}
:where(.fm3) .dict.fold .dchip{display:flex}
:where(.fm3) .gw.ping{box-shadow:0 20px 44px #2b1e4038,0 0 0 2px #8f8bd8}
:where(.fm3) .cp[data-kind=send] .sym,:where(.fm3) .cp[data-kind=send] .act{color:#24502c}/* Push card: the Mac notch the asks fly into (running count left, needs-you right), and the
   receiving terminal lighting up in its agent's colour when the send lands. */
:where(.fm3) .hn{position:absolute;z-index:12;left:50%;top:0;width:210px;height:32px;margin-left:-105px;border-radius:0 0 14px 14px;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:#fff;font-size:11px;font-variant-numeric:tabular-nums}
:where(.fm3) .hn span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid #ffffff40;position:relative}
:where(.fm3) .hn .l i{position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid transparent;border-top-color:#fff;animation:fm2-spin 1s linear infinite}
:where(.fm3) .hn b{font-weight:500}
:where(.fm3) .hn.bump{animation:fm3-bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fm3-bump{0%{transform:scale(1)}35%{transform:scale(1.08,1.18)}100%{transform:scale(1)}}
@keyframes fm2-spin{to{transform:rotate(1turn)}}
:where(.fm3) .cp{top:46px}
:where(.fm3) .gw.lit{animation:fm3-lit 1.6s var(--ease-out) both}
:where(.fm3) .gw.lit-cc{--lit:#d97757}
:where(.fm3) .gw.lit-cx{--lit:#8f8bd8}
:where(.fm3) .gw.lit .bar{animation:fm3-litbar 1.6s var(--ease-out)}
@keyframes fm3-lit{0%{box-shadow:0 14px 34px #2b1e4026,0 0 0 0 var(--lit)}18%{box-shadow:0 14px 34px #2b1e4026,0 0 0 3px var(--lit),0 0 30px 6px var(--lit)}100%{box-shadow:0 14px 34px #2b1e4026,0 0 0 1.5px var(--lit),0 0 0 0 transparent}}
@keyframes fm3-litbar{0%,100%{filter:none}20%{filter:brightness(1.12) saturate(1.4)}}/* Fleet card: session cards in the site's original demo-window style. */
:where(.fm3) .sc{position:absolute;background:#fffdfa;border:1px solid #d8d0df;border-radius:8px;box-shadow:0 8px 24px #362a4e10;overflow:hidden;font-family:Sohne,system-ui,sans-serif}
:where(.fm3) .sc-h{height:48px;padding:0 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e6dfea;font-size:15px;color:#292748}
:where(.fm3) .sc-h img{width:20px;height:20px;object-fit:contain}
:where(.fm3) .sc-h span{margin-left:auto;font-size:12px;color:#93869c}
:where(.fm3) .sc-h i{font-style:normal;color:#a397ab;margin-left:12px}
:where(.fm3) .sc-b{padding:20px 22px 22px;font:13px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}
:where(.fm3) .sc-b .p{display:block;color:#95899e;font-size:12px;margin-bottom:12px}
:where(.fm3) .sc-b .d{color:#9d8990}
:where(.fm3) .sc-b .a{color:#2f2c9a}
:where(.fm3) .sc-b .s{display:flex;flex-direction:column;color:#81788b;margin-top:12px;font-size:12px}
:where(.fm3) .sc-b .q{color:#e8542f}
:where(.fm3) .sc .sc-h{height:56px;font-size:17px;padding:0 24px}
:where(.fm3) .sc .sc-h img{width:22px;height:22px}
:where(.fm3) .sc .sc-h span{font-size:13px}
:where(.fm3) .sc .sc-b{padding:26px 28px;font-size:15px}
:where(.fm3) .sc .sc-b .p,:where(.fm3) .sc .sc-b .s{font-size:14px}
:where(.fm3) .sc{min-height:620px}/* Fleet card v2: one large light Claude Code terminal, cropped, on a soft grey panel. */
.fm3[data-scene=fleet] .cp{top:58px}
:where(.fm3) .bt{position:absolute;left:40px;top:300px;width:760px;height:600px;border-radius:12px;overflow:hidden;background:#fdfcfa;box-shadow:0 18px 44px #1f2a3a1f,0 0 0 .5px #0000002e;font:16px/1.7 "SF Mono",ui-monospace,Menlo,monospace;color:#2b2b2b}
:where(.fm3) .bt-bar{height:36px;display:grid;grid-template-columns:70px 1fr 70px;align-items:center;padding:0 14px;background:#efeeeb;border-bottom:.5px solid #dcdad5;font:500 13px -apple-system,BlinkMacSystemFont,sans-serif;color:#555}
:where(.fm3) .bt-bar .lights{display:flex;gap:8px}
:where(.fm3) .bt-bar .lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
:where(.fm3) .bt-bar .lights i+i{background:#febc2e}
:where(.fm3) .bt-bar .lights i+i+i{background:#28c840}
:where(.fm3) .bt-t{display:flex;align-items:center;justify-content:center;gap:6px}
:where(.fm3) .bt-t img{width:13px;height:13px;filter:invert(48%) sepia(60%) saturate(700%) hue-rotate(335deg)}
:where(.fm3) .bt-b{padding:14px 16px}
:where(.fm3) .bt-b b{font-weight:600}
:where(.fm3) .bt .m{color:#7c7c7c}
:where(.fm3) .bt .m .tx{color:#2b2b2b}
:where(.fm3) .bt .g{color:#2e9e57}
:where(.fm3) .bt .o{color:#d97757}
:where(.fm3) .bt .dot{color:#2b2b2b}
:where(.fm3) .bt .y{color:#b7791f}
:where(.fm3) .bt-welcome{border:1px solid #e3a98d;border-radius:6px;padding:6px 12px;margin-bottom:12px;white-space:pre}
:where(.fm3) .bt-in{margin-top:14px;border:1px solid #cfccc6;border-radius:6px;padding:6px 12px;color:#9a9a9a}
:where(.fm3) .bt-in i{display:inline-block;width:9px;height:18px;vertical-align:-3px;background:#2b2b2b;animation:fm-caret 1s steps(1) infinite}
:where(.fm3) .bt-hint{margin-top:6px;font-size:11.5px;color:#9a9a9a;padding-left:10px}
@keyframes fm-caret{50%{opacity:0}}
:where(.fm3) .bt.bt-cx{left:250px;top:170px;width:560px;height:400px}
:where(.fm3) .bt .cxw{border-color:#cfccc6}
:where(.fm3) .bt-cx .bt-t img{filter:invert(35%)}/* Fleet: the pill is the hero; the sessions behind it step back while Parrot talks. */
:where(.fm3) .cp-shadow{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none}
:where(.fm3) .cp-shadow::before{content:"";position:absolute;left:52px;right:0;top:4px;bottom:4px;border-radius:40px;box-shadow:0 18px 40px #2b1e4030,0 4px 10px #2b1e401a}
:where(.fm3) .cp.open .cp-shadow{opacity:1}
.fm3[data-scene=fleet] .cp{top:84px;transform:scale(1.28);transform-origin:50% 0}
.fm3[data-scene=fleet] .bt{transition:opacity .6s var(--ease-out),filter .6s var(--ease-out)}
.fm3[data-scene=fleet].pill-up .bt{filter:blur(1px) saturate(.7)}
.fm3[data-scene=fleet] .cam::after{content:"";position:absolute;z-index:20;inset:-300px;background:#f0edf3;opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none}
.fm3[data-scene=fleet].pill-up .cam::after{opacity:.5}/* Push card (calm): box centred, chip cross-fades in its place, no bounce on the notch. */
.fm3[data-scene=push] .dict{top:270px;width:440px;transform:translateY(6px);transition:opacity .45s var(--ease-out),transform .55s var(--ease-out)}
.fm3[data-scene=push] .dict.on{transform:none}
.fm3[data-scene=push] .dict .w{transition:opacity .25s}
:where(.fm3) .drow{display:flex;align-items:center;gap:10px;margin-top:8px}
:where(.fm3) .drow .dwave{flex:1;margin:0}
:where(.fm3) .dkey{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#d97757;color:#fff;font-size:13px}
:where(.fm3) .dchip2{position:absolute;z-index:11;left:50%;top:312px;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 14px;border-radius:22px;background:#1d1d1f;color:#e9e7ee;font-size:14px;opacity:0;transform:translate(-50%,0);transition:opacity .45s var(--ease-out)}
:where(.fm3) .dchip2.on{opacity:1}
:where(.fm3) .dchip2 img{width:18px;height:18px;filter:invert(1)}
:where(.fm3) .dchip2 b{color:#fff;font-weight:600}
.fm3[data-scene=push] .hn b{transition:opacity .3s}
.fm3[data-scene=push] .cp{top:52px;transform:scale(1.22);transform-origin:50% 0}
.fm3[data-scene=push] .hn{transform:scale(1.15);transform-origin:50% 0}
.fm3[data-scene=push] .dict{top:230px;width:540px;font-size:21px;padding:18px 22px 14px}
.fm3[data-scene=push] .dchip2{top:282px;font-size:16px;padding:11px 18px}
.fm3[data-scene=push] .dchip2 img{width:20px;height:20px}
.fm3[data-scene=push] .dict .w{transition:opacity .08s}
:where(.fm3) .dict .nm.ge{background:#3b6fd8}
:where(.fm3) .cp .sendarrow{font-size:15px;font-weight:600;line-height:1}/* Placeholder diagram that opens from "Architecture diagram is ready". */
:where(.fm3) .diag{position:absolute;z-index:9;left:50%;top:190px;width:520px;margin-left:-260px;border-radius:12px;background:#fffdfa;border:1px solid #d8d0df;box-shadow:0 18px 44px #2b1e4026;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
:where(.fm3) .diag.on{opacity:1;transform:none}
:where(.fm3) .diag-h{height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #e6dfea;font:500 12px -apple-system,sans-serif;color:#4a4652}
:where(.fm3) .diag-h span:last-child{margin-left:auto;color:#93869c;font-weight:400}
:where(.fm3) .diag-h .lights{display:flex;gap:6px}
:where(.fm3) .diag-h .lights i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
:where(.fm3) .diag-h .lights i+i{background:#febc2e}
:where(.fm3) .diag-h .lights i+i+i{background:#28c840}
:where(.fm3) .diag svg{display:block;width:100%;padding:14px 18px 18px}