/* Motion is its own area: violet / magenta on indigo-black (Peel stays teal / blue on navy). */
.peel-site.mo-site { --bg:#0a0812; --panel:#120d1f; --line:#2c2340; --teal:#b28dff; --blue:#ff7ac8; --muted:#c3b8d9; --dim:#9c8fb8; background:var(--bg); }
.peel-site.mo-site .peel-header { background:rgba(10,8,18,.94); }
.peel-site.mo-site .peel-button.primary { background:var(--teal); border-color:var(--teal); color:#150a26; }
.peel-site.mo-site .peel-button.primary:hover { background:#c9b3ff; border-color:#c9b3ff; }
.peel-site.mo-site .peel-button:hover { border-color:var(--blue); background:#1a1230; }
.peel-site.mo-site .grad { background-image:linear-gradient(110deg,#c4a1ff 5%,#ff8ad4 62%,#ffb347); }
.peel-site.mo-site .peel-mark { color:var(--teal); }
.peel-site.mo-site .mo-card, .peel-site.mo-site .mo-oneline { border-color:#2c2340; background:#120d1f; }
.peel-site.mo-site .mo-oneline { color:#f3ecff; }
.peel-site.mo-site .mo-next a { background:#120d1f; border-color:#3a2d55; }
.peel-site.mo-site a:focus-visible, .peel-site.mo-site button:focus-visible { outline-color:var(--teal); }
/* Perslis Motion — shared styles for the motion micro-site (overview + sub-pages). */
.mo-hero h1 { max-width: 16ch; }
.mo-grad { background: linear-gradient(96deg,#c4a1ff 0%,#ff8ad4 55%,#ffb347 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mo-lead-narrow { max-width: 680px; margin-left:auto; margin-right:auto; }
.mo-flow { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin:1.6rem 0; font-family:ui-monospace,Menlo,monospace; font-size:.82rem }
.mo-flow b { background:#101b24; border:1px solid #33465c; border-radius:8px; padding:.5rem .8rem; color:#dbe6f0; font-weight:500; white-space:nowrap }
.mo-flow b.on { border-color:var(--teal); color:#eafff8; box-shadow:inset 0 0 0 1px rgba(130,222,207,.35) }
.mo-flow .ar { color:#5b7085 }
.mo-flow .mo-ai { color:#c2603f; border-color:#5a3a2c; background:#1c1310 }
.mo-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1.4rem; text-align:left }
.mo-card { background:#0b131c; border:1px solid #223142; border-radius:14px; padding:1.1rem 1.2rem }
.mo-card h3 { margin:.1rem 0 .5rem; font-size:1.02rem; color:#eafff8 }
.mo-card p { font-size:.92rem; color:#9fb2c4; margin:0 }
.mo-card .k { font-family:ui-monospace,Menlo,monospace; font-size:.8rem; color:var(--teal) }
.mo-x { color:#ff8a6a } .mo-ok { color:#57e0a2 }
/* interactive demo */
#motion-demo { margin:1.2rem 0 .4rem; text-align:left }
.mf-wrap { background:#080d13; border:1px solid #223142; border-radius:16px; padding:14px }
.mf-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px }
.mf-seg { display:inline-flex; gap:4px; background:#0d151f; border:1px solid #22303f; border-radius:999px; padding:3px }
.mf-seg button { font:12px ui-monospace,Menlo,monospace; color:#9fb2c4; background:transparent; border:0; border-radius:999px; padding:.4rem .8rem; cursor:pointer }
.mf-seg button.on { background:#1e2b3a; color:#eafff8 }
.mf-floor { font:12px ui-monospace,Menlo,monospace; font-weight:700; border-radius:999px; padding:.45rem 1rem; cursor:pointer; border:1px solid }
.mf-floor.on { background:#0e1a17; border-color:#2c5a54; color:#57e0a2 }
.mf-floor.off { background:#1c1310; border-color:#5a3a2c; color:#ff8a6a }
.mf-replay { margin-left:auto; font:12px ui-monospace,Menlo,monospace; background:transparent; border:1px solid #2c3a4d; color:#9fb2c4; border-radius:999px; padding:.4rem .8rem; cursor:pointer }
.mf-canvas { width:100%; display:block; border-radius:10px; background:#0d151f; border:1px solid #17222e }
.mf-status { display:flex; flex-wrap:wrap; gap:1.1rem; margin:10px 2px 0; font:12px ui-monospace,Menlo,monospace; color:#7f93a6 }
.mf-status b { color:#dbe6f0 } .mf-crash{color:#ff5a3c!important} .mf-safe{color:#57e0a2!important} .mf-live{color:#f0c674!important}
.mf-receipts { margin-top:10px; display:flex; flex-direction:column; gap:6px }
.mf-rec-h { font:10.5px ui-monospace,Menlo,monospace; letter-spacing:.06em; color:#5b7085; text-transform:uppercase }
.mf-rec-off { color:#7a5a3c }
.mf-receipt { display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline; font:11px ui-monospace,Menlo,monospace; background:#0b131c; border-left:2px solid #33465c; border-radius:0 8px 8px 0; padding:5px 10px }
.mf-receipt.mf-r-deny { border-left-color:#ff8a6a } .mf-receipt.mf-r-clamp { border-left-color:#f0c674 } .mf-receipt.mf-r-crash { border-left-color:#ff5a3c }
.mf-r-inv { color:var(--blue) } .mf-r-v { font-weight:700; color:#eafff8 } .mf-r-body { color:#7f93a6 }
.mf-r-crash .mf-r-v { color:#ff5a3c }
/* floors + engine */
.mo-floors { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1.4rem; text-align:left }
.mo-floor { background:#0b131c; border:1px solid #223142; border-radius:14px; padding:1.1rem 1.2rem; text-decoration:none; display:block; transition:border-color .2s }
a.mo-floor:hover { border-color:var(--teal) }
.mo-floor .tag { font:10.5px ui-monospace,Menlo,monospace; letter-spacing:.08em; color:var(--teal); text-transform:uppercase }
.mo-floor.soon .tag { color:#7f93a6 }
.mo-floor h3 { margin:.4rem 0 .5rem; font-size:1.04rem; color:#eafff8 }
.mo-floor p { font-size:.9rem; color:#9fb2c4; margin:0 }
.mo-floor .inv { margin-top:.6rem; font:11px ui-monospace,Menlo,monospace; color:#6f8598 }
.mo-unify { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.4rem; text-align:left }
.mo-unify a { display:block; background:#0b131c; border:1px solid #223142; border-radius:14px; padding:1.1rem 1.2rem; text-decoration:none; transition:border-color .2s }
.mo-unify a:hover { border-color:var(--teal) }
.mo-unify .q { font-family:ui-monospace,Menlo,monospace; font-size:.86rem; color:var(--teal); margin-bottom:.35rem }
.mo-unify h3 { margin:0 0 .3rem; font-size:1rem; color:#eafff8 } .mo-unify p { margin:0; font-size:.86rem; color:#9fb2c4 }
.mo-scope { background:#0b131c; border:1px solid #223142; border-radius:14px; padding:1.2rem 1.4rem; margin-top:1.2rem; text-align:left }
.mo-scope p { font-size:.92rem; color:#9fb2c4 } .mo-scope b { color:#dbe6f0 }
.mo-oneline { font-family:var(--serif,Georgia,serif); font-size:clamp(1.15rem,2.6vw,1.5rem); font-style:italic; color:#eafff2; background:#0d1712; border:1px solid #1e3a2c; border-radius:12px; padding:1.2rem 1.5rem; margin:1.7rem auto; max-width:760px }
.mo-next { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.6rem }
.mo-next a { font-family:ui-monospace,Menlo,monospace; font-size:.82rem; color:#9fb2c4; background:#0b131c; border:1px solid #2c3a4d; border-radius:999px; padding:.5rem 1rem; text-decoration:none; transition:border-color .2s,color .2s }
.mo-next a:hover { border-color:var(--teal); color:#eafff8 }
/* galaxy / propulsion background — fixed behind all content */
.motion-bg { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block }
body.peel-site { position:relative; background:#05070c }
.peel-site header.peel-header, .peel-site main, .peel-site footer.site-footer { position:relative; z-index:1 }
.peel-site .peel-hero { background:transparent !important }

/* the harness position band */
.mo-harness .mo-proofs { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.6rem 0 } @media (max-width:860px){ .mo-harness .mo-proofs { grid-template-columns:1fr } }
.mo-harness .mo-card h3 { margin:.3rem 0 .4rem; font-size:1.05rem } .mo-harness .mo-card p { color:#b0bbca; font-size:.92rem; margin:0 }

.mo-list { max-width:820px; margin:1rem auto; padding-left:1.2rem; color:#b0bbca; line-height:1.7 } .mo-list li { margin:.5rem 0 } .mo-list b { color:#eafff2 }