/* Animated product examples from the marketing motion mockup. */
.motion-figure{margin:0;min-width:0}.motion-demo{--motion-blue:#2a5bd7;--motion-soft:#f5f5f7;--motion-line:rgba(60,60,67,.16);--motion-muted:#666b75;font-size:14px;color:#16171a;min-width:0}.motion-stage{position:relative;overflow:hidden;border:1px solid var(--motion-line);border-radius:18px;background:#fff;box-shadow:0 24px 48px -30px rgba(0,0,0,.3)}.motion-demo[data-demo="weigh"] .motion-stage{padding:23px;background:var(--motion-soft);border-radius:22px}.motion-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--motion-line);background:var(--motion-soft)}.motion-head strong{font-size:16px}.motion-head small{color:var(--motion-muted)}.motion-control{margin:9px 0 0;padding:5px 0;background:none;border:0;color:#525b6a;font:600 12px -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer}.motion-control:hover,.motion-control:focus-visible{color:var(--motion-blue);text-decoration:underline}.motion-demo [data-ref]{font-variant-numeric:tabular-nums}.motion-spool-area{height:235px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.motion-spool{position:absolute;bottom:103px;width:130px;height:130px;border-radius:50%;background:#f07c2a;box-shadow:inset 0 0 0 10px #d9681b,inset 0 0 0 22px #f07c2a,inset 0 0 0 24px rgba(0,0,0,.12);display:grid;place-items:center;transition:transform .46s cubic-bezier(.22,1.3,.36,1),opacity .18s}.motion-spool:after{content:"";width:38px;height:38px;border-radius:50%;background:var(--motion-soft);box-shadow:inset 0 0 0 4px #d9681b}.motion-plate{width:55%;height:13px;border-radius:8px;background:#d4d4d9}.motion-scale{width:min(100%,320px);min-height:83px;margin-top:6px;padding:0 20px;border-radius:17px;background:#16171a;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px}.motion-scale-status{display:flex;align-items:center;gap:7px;color:#bbb;font:600 10px ui-monospace,Menlo,monospace;letter-spacing:.6px}.motion-dot{width:8px;height:8px;border-radius:50%;background:#34c759}.motion-scale-reading{font:600 clamp(25px,3vw,39px) ui-monospace,Menlo,monospace;white-space:nowrap}.motion-math{display:flex;align-items:center;gap:7px;min-height:74px;margin:12px 0;overflow-x:auto}.motion-math span{display:flex;flex-direction:column;padding:8px 10px;border-radius:10px;background:#fff;white-space:nowrap;transition:opacity .2s,transform .26s cubic-bezier(.34,1.56,.64,1)}.motion-math small{font-size:11px;color:var(--motion-muted)}.motion-math strong{font-size:18px}.motion-math b{font-size:18px;color:#a3a9b2}.motion-math .motion-result{background:#dcf5e3;color:#1e7d34}.motion-meter-card{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:13px;padding:12px}.motion-swatch{display:block;width:20px;height:20px;border-radius:50%;background:#f07c2a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.13)}.motion-meter-card strong{font-size:17px;white-space:nowrap}.motion-meter{display:flex;gap:3px;margin-top:6px}.motion-meter i{height:8px;flex:1;border-radius:5px;background:#f07c2a;transition:background .25s,transform .25s}.motion-table{width:100%}.motion-filter{display:flex;gap:3px;padding:3px;border-radius:10px;background:rgba(118,118,128,.13)}.motion-filter button{border:0;border-radius:8px;background:transparent;color:#656b74;font:600 12px -apple-system,BlinkMacSystemFont,sans-serif;padding:7px 11px;cursor:pointer}.motion-filter button[aria-pressed="true"]{background:#fff;color:#16171a;box-shadow:0 1px 3px rgba(0,0,0,.14)}.motion-filter button:focus-visible,.motion-control:focus-visible{outline:2px solid var(--motion-blue);outline-offset:2px}.motion-row{display:grid;grid-template-columns:20px minmax(0,1.3fr) minmax(0,.8fr) minmax(35px,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:6px 18px;border-bottom:1px solid rgba(60,60,67,.1);transition:opacity .24s,transform .32s,max-height .32s,padding .32s;max-height:70px}.motion-row:last-child{border:0}.motion-row.is-hidden{opacity:0;max-height:0;min-height:0;padding-top:0;padding-bottom:0;overflow:hidden;transform:translateY(-9px);border:0}.motion-row strong{font-size:13px}.motion-row small{display:block;color:var(--motion-muted);font-size:11px}.motion-row .motion-swatch{width:18px;height:18px}.motion-row>span:last-child{font-weight:700;white-space:nowrap}.motion-bar{height:7px;border-radius:5px;background:#e8e9ec;overflow:hidden}.motion-bar i{display:block;height:100%;background:var(--motion-blue);border-radius:5px;transition:width .46s cubic-bezier(.22,1.3,.36,1)}.motion-low{background:#fff0db;color:#a3500a;padding:2px 4px;border-radius:4px;font-size:10px}.motion-dark .motion-stage{background:#24262c;border-color:#424650;color:#fff;padding:20px}.motion-dark .motion-head{padding:0 0 13px;background:transparent;border-color:#4c505b}.motion-dark .motion-head small{color:#b3bbc9}.motion-progress{height:6px;border-radius:5px;background:#454a54;overflow:hidden;margin:17px 0}.motion-progress i{display:block;background:#a9c4ff;height:100%;transition:width .3s linear}.motion-ams-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.motion-ams-slot{min-width:0;padding:9px 6px;border-radius:10px;background:#30343d;text-align:center}.motion-ams-slot .motion-swatch{margin:0 auto 5px}.motion-ams-slot strong,.motion-ams-slot small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motion-ams-slot strong{font-size:12px}.motion-ams-slot small{font-size:10px;color:#bbc2cf}.motion-ams-slot .motion-meter{margin-top:8px}.motion-ams-slot .motion-meter i{height:6px}.motion-confirm{margin-top:15px;padding:12px;border-radius:10px;background:#3a3e47;font-weight:600;transition:background .25s,transform .3s}.motion-stock .motion-stage{padding:18px}.motion-stock-total{display:flex;align-items:baseline;gap:8px;margin:16px 0}.motion-stock-total strong{font-size:54px;line-height:1}.motion-stock-total small{color:var(--motion-muted)}.motion-stock-line{display:grid;grid-template-columns:90px 1fr 30px;gap:10px;align-items:center;margin:11px 0}.motion-stock-line small{color:var(--motion-muted)}.motion-stock-line b{text-align:right}.motion-toast{margin-top:16px;padding:9px 12px;border-radius:9px;background:#e5f5e9;color:#1e7d34;font-weight:600;transition:opacity .2s,transform .2s}.motion-project .motion-stage{padding:18px;background:var(--motion-soft)}.motion-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.motion-project-col{min-height:155px;padding:10px;border-radius:11px;background:#eceef2}.motion-project-col strong{font-size:12px}.motion-project-col small{float:right}.motion-project-card{padding:10px;margin-top:12px;background:#fff;border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.12);font-size:12px}.motion-project-card small{display:block;float:none;color:var(--motion-muted)}.motion-project-moving{position:absolute;top:57px;left:calc(18px + (100% - 52px)/6);width:calc((100% - 52px)/3 - 20px);background:#fff;border-radius:9px;padding:10px;box-shadow:0 7px 20px rgba(0,0,0,.18);font-size:12px;transition:transform .46s cubic-bezier(.22,1.3,.36,1)}.motion-project-moving small{display:block;color:var(--motion-muted)}.motion-steps{display:grid;gap:6px}.motion-step{display:grid;grid-template-columns:33px 1fr;gap:10px;padding:10px;border-radius:12px;transition:background .25s}.motion-step.is-active{background:var(--motion-soft)}.motion-step b{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#eaf0fd;color:var(--motion-blue)}.motion-step.is-active b{background:var(--motion-blue);color:#fff}.motion-step strong{font-size:14px}.motion-step small{display:block;color:var(--motion-muted)}.motion-step i{display:block;height:2px;background:var(--motion-blue);width:0;transition:width .1s linear;margin-top:6px}.motion-mini .motion-stage{padding:15px;min-height:175px;box-shadow:none}.motion-mini .motion-head{margin:-15px -15px 14px;padding:9px 15px}.motion-mini .motion-head strong{font-size:13px}.motion-qr-preview{display:flex;align-items:center;gap:15px}.motion-qr{width:78px;height:78px;flex:none;display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(13,1fr);position:relative;border:5px solid white;box-shadow:0 0 0 1px #cdd2da}.motion-qr i.dark{background:#16171a}.motion-qr-scan{position:absolute;left:0;right:0;height:2px;background:#2a5bd7;box-shadow:0 0 8px #2a5bd7}.motion-qr-details strong,.motion-qr-details small{display:block}.motion-qr-details small{color:var(--motion-muted);margin-top:5px}.motion-color-row{display:grid;grid-template-columns:18px 1fr auto;gap:7px;align-items:center;margin:10px 0;font-size:11px}.motion-color-row .motion-bar{grid-column:2 / -1}.motion-color-row .motion-swatch{width:16px;height:16px}.motion-search{width:100%;padding:10px 12px;border:1px solid #d8dce4;border-radius:9px;font:inherit}.motion-tree-row{display:flex;justify-content:space-between;padding:6px 9px;border-radius:7px;transition:opacity .25s,max-height .25s;max-height:36px;overflow:hidden}.motion-tree-row.is-hidden{opacity:0;max-height:0;padding-top:0;padding-bottom:0}.motion-tree-row.is-match{background:#eaf0fd}.motion-csv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:7px 0;border-bottom:1px solid #eceef2;font-size:12px}.motion-csv-row small{display:block;color:var(--motion-muted)}.motion-csv-flag{font-weight:700;padding:3px 6px;border-radius:5px;background:#e0f5e7;color:#1e7d34}.motion-csv-flag.duplicate{background:#fff0dc;color:#a3500a}.motion-csv-flag.error{background:#ffebeb;color:#c9151e}.motion-terminal{font:12px/1.6 ui-monospace,Menlo,monospace;text-align:left;background:#1b1e25;color:#fff;padding:18px;border-radius:13px;min-height:135px;overflow-wrap:anywhere}.motion-terminal .line{display:block;color:#b3c0d6}.motion-terminal .line.success{color:#6fdc8c}.motion-site-hero>.shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:48px;align-items:center;padding-bottom:65px}.motion-site-hero .motion-hero-copy{text-align:left}.motion-site-hero h1{font-size:clamp(40px,4.2vw,54px);margin:0 0 20px}.motion-site-hero .v2-lede{margin:0 0 24px}.motion-site-hero .actions{justify-content:flex-start}.motion-site-hero .v2-compat{margin-top:18px!important}.motion-site-hero .motion-figure{width:100%}.motion-site-hero .motion-demo{max-width:100%}.motion-feature-pair .motion-demo{width:100%}.motion-feature-pair article{min-width:0}.motion-card-hover{transition:transform .46s cubic-bezier(.22,1.3,.36,1),box-shadow .26s}.motion-card-hover:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(0,0,0,.3)}.motion-page .button{transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s}.motion-page .button:hover{transform:translateY(-1px);box-shadow:0 8px 16px -8px rgba(42,91,215,.7)}.motion-page .button:active{transform:translateY(1px) scale(.97)}
@media(max-width:1000px){.motion-site-hero>.shell{grid-template-columns:1fr}.motion-site-hero .motion-hero-copy{text-align:center}.motion-site-hero .v2-lede{margin-left:auto;margin-right:auto}.motion-site-hero .actions{justify-content:center}.motion-site-hero .motion-figure{max-width:620px;margin:auto}.motion-site-hero h1{max-width:850px;margin-left:auto;margin-right:auto}}
@media(max-width:640px){.motion-site-hero>.shell{gap:28px;padding-bottom:40px}.motion-site-hero .motion-demo[data-demo="weigh"] .motion-stage{padding:14px}.motion-math strong{font-size:15px}.motion-math span{padding:7px}.motion-row{grid-template-columns:18px minmax(0,1fr) auto;gap:7px;padding:6px 10px}.motion-row .motion-location,.motion-row .motion-bar{display:none}.motion-head{padding:12px}.motion-filter button{padding:6px 8px}.motion-ams-grid{gap:4px}.motion-ams-slot{padding:6px 3px}.motion-ams-slot strong{font-size:10px}.motion-ams-slot small{font-size:9px}.motion-project-moving{font-size:10px}.motion-project-col{padding:6px}.motion-project-card{padding:6px;font-size:10px}.motion-stock-total strong{font-size:42px}}
@media(prefers-reduced-motion:reduce){.motion-demo *, .motion-page .button, .motion-card-hover{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.motion-demo[data-demo="stock"] .motion-stage{padding:18px}.motion-demo[data-demo="stock"] .motion-head{margin:-18px -18px 0}.motion-demo[data-demo="ams"].motion-mini .motion-stage{min-height:215px}
.motion-demo[data-demo="filament"] .motion-head>div:first-child{display:flex;flex-direction:column;gap:2px}
.motion-fallback{padding:25px;border:1px solid var(--motion-line);border-radius:13px;background:var(--motion-soft);color:var(--motion-muted)}
.motion-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:28px}.motion-flow-grid article{position:relative;min-height:164px;background:#fff;padding:20px;border-radius:13px;border:1px solid var(--v2-line);transition:transform .46s cubic-bezier(.22,1.3,.36,1),box-shadow .26s,opacity .26s}.motion-flow-grid article.is-active{transform:translateY(-5px);box-shadow:0 0 0 2px var(--v2-blue),0 14px 28px -14px rgba(42,91,215,.5)}.motion-flow-grid article:not(.is-active):not(.is-complete){opacity:.55}.motion-flow-grid small{display:block;color:var(--motion-muted);font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.05em}.motion-flow-grid strong{display:block;font-size:34px;line-height:1.2;margin:9px 0}.motion-flow-grid p{font-size:14px}.motion-flow-grid i{position:absolute;bottom:0;left:0;height:3px;background:var(--v2-blue);border-radius:0 0 13px 13px;transition:width .1s linear}.motion-flow-grid article:last-child{background:#eaf0fd}.motion-flow-grid article:last-child strong{color:var(--v2-blue)}.motion-demo[data-demo="swap"] .motion-stage{padding:14px;min-height:216px}.motion-demo[data-demo="swap"] .motion-head{margin:-14px -14px 12px}.motion-swap-slot{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--motion-line);border-radius:10px;background:var(--motion-soft)}.motion-swap-slot .motion-swatch{width:24px;height:24px}.motion-swap-slot strong,.motion-swap-slot small{display:block}.motion-swap-slot small{font-size:11px;color:var(--motion-muted)}.motion-swap-prompt{display:grid;gap:5px;padding:10px 12px;margin-top:9px;border-radius:9px;background:#eaf0fd;font-size:12px;transition:opacity .2s,transform .26s}.motion-swap-prompt span{color:var(--motion-muted)}.motion-swap-prompt .motion-swap-action{justify-self:start;background:var(--v2-blue);color:white;padding:5px 8px;border-radius:6px;font-weight:700}.motion-demo[data-demo="swap"] .motion-toast{font-size:11px;margin-top:9px}
@media(max-width:850px){.motion-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.motion-flow-grid{gap:8px}.motion-flow-grid article{min-height:145px;padding:13px}.motion-flow-grid strong{font-size:27px}}

/* Keep example labels readable and the board card aligned at every width. */
.motion-head small,.motion-stock-line small,.motion-stock-total small,.motion-project-col small,.motion-project-card small,.motion-project-moving small,.motion-step small,.motion-qr-details small,.motion-csv-row small{font-size:12px;line-height:1.35}
.motion-control{font-size:13px;line-height:1.35}
.motion-row small,.motion-swap-slot small,.motion-swap-prompt,.motion-demo[data-demo="swap"] .motion-toast{font-size:12px;line-height:1.35}
.motion-low,.motion-math small{font-size:12px}
.motion-math b{color:#626873}
.motion-filter button{color:#3f4855}
.motion-scale-status{font-size:12px;color:#d4d7de}
.motion-color-row,.motion-csv-row,.motion-terminal{font-size:13px}
.motion-color-row small{font-size:12px}
.motion-ams-slot strong,.motion-ams-slot small{font-size:12px;line-height:1.35}
.motion-ams-slot small{white-space:normal;overflow-wrap:anywhere}
.motion-flow-grid article:not(.is-active):not(.is-complete){opacity:1}
.motion-flow-grid small{font-size:13px}
.motion-demo[data-demo="project"] .motion-stage{background:var(--motion-soft);min-height:268px}
.motion-project-grid{padding:12px;gap:10px}
.motion-project-col{min-height:224px;padding:10px;min-width:0}
.motion-project-col-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.motion-project-col strong{font-size:13px}
.motion-project-col small{float:none}
.motion-project-card,.motion-project-moving{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.motion-project-card{min-height:56px;margin-top:10px;padding:9px}
.motion-project-moving{left:0;top:0;width:auto;padding:9px;z-index:1}
.motion-project-moving strong{font-size:13px;line-height:1.25;display:block}
.motion-project-moving small{margin-top:4px}
@media(max-width:640px){.motion-ams-slot strong,.motion-ams-slot small{font-size:12px}.motion-project-col{padding:8px}.motion-project-card{font-size:12px;padding:7px}.motion-project-moving,.motion-project-moving strong{font-size:12px}}
@media(max-width:400px){.motion-ams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.motion-demo[data-demo="swap"] .motion-stage{min-height:224px}
.motion-demo[data-demo="swap"] .motion-swap-slot,.motion-demo[data-demo="swap"] .motion-swap-prompt{color:#16171a}
.motion-demo[data-demo="swap"] .motion-swap-prompt,.motion-demo[data-demo="swap"] .motion-toast{position:absolute;left:14px;right:14px;top:121px;margin:0}
.motion-demo[data-demo="swap"] .motion-toast{line-height:1.4}
.v2-dark-panel .motion-control{color:#c9cdd6}
.v2-dark-panel .motion-control:hover,.v2-dark-panel .motion-control:focus-visible{color:#fff}
@media(max-width:350px){.motion-project-grid{grid-template-columns:1fr}.motion-project-col{min-height:145px}.motion-demo[data-demo="project"] .motion-stage{min-height:0}}

/* Match the mockup: only the gray plate dips briefly under the spool. */
.motion-demo[data-demo="weigh"] .motion-plate{transition:transform 180ms cubic-bezier(.34,1.56,.64,1)}
.motion-demo[data-demo="csv"] .motion-csv-row{padding:9px 18px;align-items:center}
.motion-demo[data-demo="csv"] .motion-csv-row>span:first-child{min-width:0}
.motion-demo[data-demo="csv"] .motion-csv-row strong{overflow-wrap:anywhere}
.motion-demo[data-demo="csv"] .motion-csv-flag{white-space:nowrap}
@media(max-width:480px){.motion-demo[data-demo="csv"] .motion-csv-row{padding:8px 12px}}