/* MultiModel site styles. Tokens first, then one block per component. Nothing below re-declares a token. */
:root{color-scheme:dark;--ground:#0d1117;--ground-sunken:#0a0e13;--panel:#151b23;--panel-raised:#1c2430;--terminal:#0b0f14;--line:#293442;--line-strong:#5e6f86;--ink:#f1f5f9;--ink-2:#94a3b8;--ink-3:#7f8ea3;--brand-a:#8cb7df;--brand-b:#b59fcc;--on-brand:#0b1220;--terminal-ink:#dce5ee;--terminal-ink-2:#7f8ea3;--signal:#12dcee;--focus:#8cb7df;--shadow-float:0 24px 80px #000000b3}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-24:96px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-frame:22px;--radius-pill:999px;--font-display:"Instrument Serif","Iowan Old Style",Georgia,serif;--font-sans:"Geist","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;--font-mono:"Geist Mono","Cascadia Mono",Consolas,monospace}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0;background:var(--ground)}
body{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
@property --mm-a{syntax:"<angle>";inherits:false;initial-value:0deg}

.mm{background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:24px;-webkit-font-smoothing:antialiased}
.mm *,.mm *::before,.mm *::after{box-sizing:border-box}
.mm :where(a){color:inherit}
.mm :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mm h2{text-wrap:balance}

/* ---------- Label (eyebrow) ---------- */
.mm-label{display:inline-flex;align-items:center;gap:var(--space-2);font:500 11px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mm-label i{display:inline-block;width:6px;height:6px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--brand-a),var(--brand-b));font-style:normal}

/* ---------- SignalMark: the logo, drawn as a live graph. The gradient is set inline per mark so two marks on one page never share an id. ---------- */
.mm-mark{display:block;overflow:visible}
.mm-mark .tile{fill:var(--terminal);stroke:var(--line-strong);stroke-width:6}
.mm-mark .edge{fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100;stroke-dashoffset:100;animation:mm-draw 1.35s cubic-bezier(.65,0,.35,1) .2s forwards}
.mm-mark .node{fill:var(--terminal);stroke-width:12;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:mm-pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
.mm-mark .node:nth-of-type(1){animation-delay:.25s}.mm-mark .node:nth-of-type(2){animation-delay:.55s}.mm-mark .node:nth-of-type(3){animation-delay:.85s}.mm-mark .node:nth-of-type(4){animation-delay:1.1s}
.mm-mark .core{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:mm-pop .6s cubic-bezier(.34,1.56,.64,1) 1.3s forwards}
.mm-mark .sig{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-dasharray:10 120;opacity:0}
.mm-mark .sig.in{animation:mm-receive 3s linear 1.9s infinite}
.mm-mark .sig.out{animation:mm-send 3s linear 1.9s infinite}
.mm-mark .echo{fill:none;stroke:var(--brand-b);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:mm-echo 3s cubic-bezier(.16,1,.3,1) 1.9s infinite}
@keyframes mm-draw{0%{stroke-dashoffset:100;opacity:0}3%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes mm-pop{to{transform:scale(1)}}
@keyframes mm-receive{0%,7%{stroke-dashoffset:12;opacity:0}12%{opacity:.9}42%{stroke-dashoffset:-100;opacity:.9}45%,100%{stroke-dashoffset:-112;opacity:0}}
@keyframes mm-send{0%,57%{stroke-dashoffset:-112;opacity:0}61%{opacity:.75}89%{stroke-dashoffset:0;opacity:.75}94%,100%{stroke-dashoffset:12;opacity:0}}
@keyframes mm-echo{0%,42%{transform:scale(.95);opacity:0}48%{opacity:.5}65%,100%{transform:scale(1.8);opacity:0}}

/* ---------- RepairText: a headline that breaks and is mended by the Sentinel caret ---------- */
.mm-repair{position:relative;margin:0;font:400 76px/.98 var(--font-display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.mm-repair em{font-style:italic}
.mm-repair .ch{display:inline-block;white-space:pre;transition:color .3s,transform .3s,opacity .3s,filter .3s}
.mm-repair .ch.broken{color:var(--ink-3);opacity:.55;transform:translateY(.05em) skewX(-10deg);filter:blur(.5px)}
.mm-repair .ch.healed{background:linear-gradient(135deg,var(--brand-a),var(--brand-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.mm-repair .caret{position:absolute;left:0;top:0;width:3px;height:.86em;border-radius:2px;background:linear-gradient(180deg,var(--brand-a),var(--brand-b));opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.65,0,.35,1),opacity .3s}
.mm-repair .caret::after{content:"sentinel";position:absolute;left:6px;top:-1.5em;font:500 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--brand-a);white-space:nowrap}
.mm-repair .caret.on{opacity:1}
@media (max-width:1100px){.mm-repair{font-size:64px}}
@media (max-width:640px){.mm-repair{font-size:46px}}

/* ---------- Buttons: DownloadButton (ink fill, one orbiting light) and the quiet outline ---------- */
.mm-dl{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--space-3);height:52px;padding:0 22px 0 18px;border-radius:var(--radius-md);background:var(--ink);color:var(--ground);font:600 15px/1 var(--font-sans);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.mm-dl::before{content:"";position:absolute;inset:-4px;z-index:-1;border-radius:calc(var(--radius-md) + 4px);padding:1.5px;background:conic-gradient(from var(--mm-a),transparent 0 62%,var(--brand-a) 78%,var(--brand-b) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mm-orbit 3.6s linear infinite}
.mm-dl .arrow{width:18px;height:18px;overflow:hidden;display:grid;flex:none}
.mm-dl .arrow svg{grid-area:1/1;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.mm-dl .arrow svg+svg{transform:translateY(-120%)}
.mm-dl:hover .arrow svg:first-child{transform:translateY(120%)}
.mm-dl:hover .arrow svg+svg{transform:translateY(0)}
.mm-dl:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
@keyframes mm-orbit{to{--mm-a:360deg}}
/* Prelaunch state of the Store button: no light, no link, until data-store-id is filled in. */
.mm-dl.is-soon{background:var(--panel-raised);color:var(--ink-2);cursor:default;border:1px solid var(--line-strong)}
.mm-dl.is-soon::before{display:none}
.mm-quiet{display:inline-flex;align-items:center;gap:var(--space-2);height:52px;padding:0 18px;border-radius:var(--radius-md);border:1px solid var(--line-strong);color:var(--ink);font:500 15px/1 var(--font-sans);text-decoration:none;transition:background .2s}
.mm-quiet:hover{background:var(--panel-raised)}
.mm-meta{font:400 12px/18px var(--font-mono);color:var(--ink-3)}

/* ---------- Hero frame with the signal loop behind it ---------- */
.mm-hero{position:relative;overflow:hidden;max-width:1120px;margin:0 auto;padding:var(--space-12);border:1px solid var(--line);border-radius:var(--radius-frame);background:var(--panel);box-shadow:var(--shadow-float);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center;min-height:600px}
.mm-hero>*{position:relative;z-index:1}
.mm-hero .lead{margin:var(--space-6) 0 var(--space-8);max-width:30em;font-size:18px;line-height:28px;color:var(--ink-2)}
.mm-hero .ctas{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.mm-hero .brandline{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-8)}
.mm-hero .brandline b{font:600 15px/1 var(--font-sans);letter-spacing:-.01em}
.mm-hero .mm-hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;background:var(--terminal)}
.mm-hero .mm-hero-fade{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 70%,transparent) 38%,transparent 64%)}
/* Capability chips: one line each, only for things the app verifiably does. */
.mm-caps{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.mm-caps li{display:inline-flex;align-items:center;gap:var(--space-2);padding:5px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);font:400 11px/16px var(--font-mono);color:var(--ink-2);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.mm-caps li::before{content:"";width:5px;height:5px;border-radius:var(--radius-pill);background:var(--signal);opacity:.8}
.mm-hero .mm-meta{margin-top:var(--space-4)}
@media (max-width:900px){
  .mm-hero{grid-template-columns:1fr;min-height:0;padding:var(--space-8) var(--space-8) 0;gap:var(--space-6)}
  /* Phones and tablets read the headline first; the loop follows and fades into the frame's bottom edge. */
  .mm-hero .mm-hero-video{position:relative;inset:auto;order:2;width:calc(100% + 2 * var(--space-8));height:auto;aspect-ratio:16/9;margin:0 calc(var(--space-8) * -1);object-position:66% 50%;-webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
  .mm-hero .mm-hero-fade{display:none}
}
@media (max-width:640px){.mm-hero{padding:var(--space-8) var(--space-4) 0;border-radius:14px}.mm-hero .mm-hero-video{width:calc(100% + 2 * var(--space-4));margin:0 calc(var(--space-4) * -1)}}

/* ---------- Section headings shared by the showcase, Sentinel, how-it-works, pricing and download blocks ---------- */
.mm-section{max-width:1120px;margin:0 auto}
.mm-section h2{margin:var(--space-2) 0 var(--space-8);font:400 44px/1.05 var(--font-display)}
.mm-section h2 em{font-style:italic;color:var(--ink-2)}
.mm-section .lead{max-width:40em;margin:calc(var(--space-6) * -1) 0 var(--space-8);color:var(--ink-2);font:400 17px/1.5 var(--font-sans)}
@media (max-width:760px){.mm-section h2{font-size:34px}}

/* ---------- Showcase: the real app inside a window frame, three captures behind tabs ---------- */
.mm-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.mm-tabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;max-width:300px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink-2);font:500 13px/18px var(--font-sans);transition:border-color .2s,color .2s,background .2s}
.mm-tabs button small{font:400 11px/16px var(--font-mono);color:var(--ink-3)}
.mm-tabs button:hover{color:var(--ink);border-color:var(--line-strong)}
.mm-tabs button[aria-selected="true"]{color:var(--ink);background:var(--panel);border-color:var(--line-strong)}
.mm-tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mm-window{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-frame);background:var(--panel);box-shadow:var(--shadow-float);transition:border-color .4s,box-shadow .4s}
.mm-window:hover{border-color:var(--line-strong);box-shadow:var(--shadow-float),0 0 0 1px color-mix(in srgb,var(--brand-b) 30%,transparent),0 0 90px -30px color-mix(in srgb,var(--brand-b) 55%,transparent)}
.mm-window .bar{display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-4);border-bottom:1px solid var(--line);font:400 12px/1 var(--font-mono);color:var(--ink-3);white-space:nowrap;overflow:hidden}
.mm-window .bar .title{overflow:hidden;text-overflow:ellipsis}
.mm-window .bar .win{margin-left:auto;display:flex;gap:var(--space-4);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.mm-window .shot{display:block;width:100%;height:auto;aspect-ratio:1800/1031;background:var(--terminal)}
.mm-show-cap{margin:var(--space-4) 0 0;color:var(--ink-2);font-size:14px;line-height:22px;min-height:44px}
@media (max-width:640px){.mm-window{border-radius:14px}.mm-window .bar{height:34px;padding:0 var(--space-3)}.mm-window .bar .win{display:none}.mm-tabs button{max-width:none;flex:1 1 100%}}
@supports (animation-timeline:view()){
  .mm-window{animation:mm-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@keyframes mm-arrive{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- Sentinel demo: failure on the left, recovery on the right ---------- */
.mm-sent{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:stretch}
.mm-side{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.mm-side .cap{margin:0;color:var(--ink-2);font-size:14px;line-height:22px}
.mm-side .cap b{color:var(--ink);font-weight:500}
@media (max-width:900px){.mm-sent{grid-template-columns:1fr;gap:var(--space-8)}}

/* PaneGrid: the product, in miniature */
.mm-panes{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:150px 160px;gap:var(--space-3);font:400 12px/18px var(--font-mono)}
.mm-pane{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--terminal);border:1px solid #ffffff14;color:var(--terminal-ink)}
.mm-pane.wide{grid-column:1/-1}
.mm-pane header{display:flex;align-items:center;gap:var(--space-2);height:28px;padding:0 10px;border-bottom:1px solid #ffffff10;color:var(--terminal-ink-2);font-size:11px}
.mm-pane header .dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--terminal-ink-2)}
.mm-pane header .dot.live{background:var(--signal);box-shadow:0 0 0 3px #12dcee22}
.mm-pane header .dot.fail{background:var(--terminal-ink-2);animation:mm-blink 1s steps(2) infinite}
.mm-pane .body{padding:8px 10px;white-space:pre;color:var(--terminal-ink-2)}
.mm-pane .body b{font-weight:400;color:var(--terminal-ink)}
.mm-pane .type{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:pre;width:0;animation:mm-type 2.4s steps(var(--n,30)) forwards;animation-delay:var(--d,0s)}
@keyframes mm-type{to{width:calc(var(--n,30) * 1ch)}}
@keyframes mm-blink{50%{opacity:.2}}
/* Phones: one column, so no terminal line is cut off at the pane's edge. */
@media (max-width:640px){.mm-panes{grid-template-columns:1fr;grid-template-rows:auto;font-size:11px}.mm-pane{min-height:112px}.mm-pane.wide{min-height:130px}}
/* The app's error notice, with Ask for help on it, appears once the handoff fails. */
.mm-notice{display:flex;align-items:center;gap:var(--space-3);padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);font:400 12px/18px var(--font-mono);color:var(--ink-2);opacity:0;animation:mm-fade .4s ease 5.2s forwards}
.mm-notice b{color:var(--ink);font-weight:500}
.mm-notice .btn{margin-left:auto;flex:none;padding:4px 10px;border-radius:var(--radius-sm);background:var(--ink);color:var(--ground);font:600 11px/18px var(--font-sans)}
@keyframes mm-fade{to{opacity:1}}
/* Sentinel panel: the assistant dock, gradient-edged like the app's helper panes */
.mm-sentinel{position:relative;flex:1;display:flex;flex-direction:column;min-height:322px;border-radius:var(--radius-lg);border:1px solid transparent;background:linear-gradient(var(--terminal),var(--terminal)) padding-box,linear-gradient(135deg,var(--brand-a),var(--brand-b)) border-box;color:var(--terminal-ink);font:400 12px/18px var(--font-mono)}
.mm-sentinel header{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 10px;border-bottom:1px solid #ffffff10;font-size:11px;color:var(--terminal-ink-2)}
.mm-sentinel header span{background:linear-gradient(135deg,var(--brand-a),var(--brand-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.mm-sentinel .body{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px 12px;color:var(--terminal-ink-2)}
.mm-sentinel .ln{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-2);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.mm-sentinel .ln.on{opacity:1;transform:none}
.mm-sentinel .ln b{font-weight:400;color:var(--brand-a)}
.mm-sentinel .ln .ok{color:var(--signal)}
.mm-sentinel .ln .you{color:var(--terminal-ink)}
.mm-sentinel footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:8px 10px;border-top:1px solid #ffffff10;font-size:11px;color:var(--terminal-ink-2)}
.mm-sentinel footer .btn{flex:none;padding:4px 10px;border-radius:var(--radius-sm);background:var(--signal);color:var(--on-brand);font:600 11px/18px var(--font-sans);opacity:.3;transition:opacity .3s,transform .2s}
.mm-sentinel.ready footer .btn{opacity:1}
.mm-sentinel.pressed footer .btn{transform:scale(.96);opacity:.6}

/* ---------- How it works: four stages, then the numbered rows ---------- */
.mm-stages{list-style:none;margin:0 0 var(--space-12);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.mm-stages li{position:relative;padding-top:var(--space-4);border-top:1px solid var(--line);min-width:0}
.mm-stages li::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.mm-stages .num{font:500 11px/16px var(--font-mono);letter-spacing:.12em;color:var(--ink-3)}
.mm-stages h3{margin:var(--space-2) 0;font:400 26px/1.1 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.mm-stages p{margin:0;color:var(--ink-2);font-size:14px;line-height:22px}
@media (max-width:900px){.mm-stages{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mm-stages{grid-template-columns:1fr;gap:var(--space-4)}}
.mm-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.3fr);gap:var(--space-6);padding:var(--space-8) 0}
.mm-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.mm-row:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.mm-row .num{font:500 11px/24px var(--font-mono);letter-spacing:.12em;color:var(--ink-3)}
.mm-row h3{margin:0;font:600 15px/24px var(--font-sans);color:var(--ink)}
.mm-row h3 small{display:block;font:500 11px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--space-1)}
.mm-row p{margin:0;color:var(--ink-2)}
.mm-row:hover .num{background:linear-gradient(135deg,var(--brand-a),var(--brand-b));-webkit-background-clip:text;background-clip:text;color:transparent}
@supports (animation-timeline:view()){
  .mm-row::before{animation:mm-rule linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  .mm-row>*,.mm-stages li>*{animation:mm-rise linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
}
@keyframes mm-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mm-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:760px){.mm-row{grid-template-columns:1fr;gap:var(--space-2)}}

/* ---------- PriceTable ---------- */
.mm-prices .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-8)}
.mm-prices .head h2{margin-bottom:0}
.mm-prices .head .mm-meta{margin-top:var(--space-3);max-width:40em}
.mm-toggle{display:inline-flex;padding:3px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font:500 12px/1 var(--font-mono)}
.mm-toggle button{all:unset;cursor:pointer;padding:8px 14px;border-radius:var(--radius-pill);color:var(--ink-2)}
.mm-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.mm-toggle button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mm-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mm-plan{position:relative;padding:var(--space-8) var(--space-6) var(--space-8) 0;display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.mm-plan+.mm-plan{padding-left:var(--space-6);border-left:1px solid var(--line)}
.mm-plan .name{font:600 15px/24px var(--font-sans)}
.mm-plan .price{font:400 52px/1 var(--font-display);letter-spacing:-.01em}
.mm-plan .price small{font:400 12px/18px var(--font-mono);color:var(--ink-3);margin-left:var(--space-2);letter-spacing:0}
.mm-plan ul{margin:0;padding:0;list-style:none;color:var(--ink-2)}
.mm-plan li{padding:6px 0;border-top:1px dashed var(--line)}
.mm-plan .go{align-self:flex-start;height:40px;font-size:14px}
.mm-plan .mm-dl.go{height:40px;padding:0 16px}
/* Pro is the pick: a brand rule on top, a raised ground, and the founding offer folded in below its own terms. */
.mm-plan.pick{padding-right:var(--space-6);background:linear-gradient(180deg,var(--panel),transparent 85%)}
.mm-plan.pick::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.mm-plan .tag{position:absolute;top:var(--space-8);right:var(--space-6);font:500 10px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--brand-a),var(--brand-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.mm-plan .founder{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--space-3)}
.mm-plan .founder .fprice{font:400 34px/1 var(--font-display);letter-spacing:-.01em}
.mm-plan .founder .fprice small{font:400 12px/18px var(--font-mono);color:var(--ink-3);margin-left:var(--space-2);letter-spacing:0}
.mm-plan .founder p{margin:0;color:var(--ink-2);font-size:14px;line-height:22px}
@media (max-width:820px){.mm-plans{grid-template-columns:1fr}.mm-plan,.mm-plan+.mm-plan{padding:var(--space-6) 0;border-left:0;border-top:1px solid var(--line)}.mm-plan.pick{padding:var(--space-6) var(--space-4)}.mm-plan .tag{top:var(--space-6);right:var(--space-4)}}

/* ---------- Download and trust ---------- */
.mm-get{padding-top:var(--space-12);border-top:1px solid var(--line);scroll-margin-top:var(--space-8)}
.mm-get-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.mm-trust{list-style:none;margin:var(--space-12) 0 0;padding:var(--space-8) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) var(--space-6)}
.mm-trust li{min-width:0}
.mm-trust h3{margin:0 0 var(--space-2);font:500 11px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mm-trust p{margin:0;color:var(--ink-2);font-size:14px;line-height:22px;overflow-wrap:anywhere}
.mm-trust a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.mm-trust a:hover{border-color:var(--ink)}
.mm-trust code{font:400 12px/18px var(--font-mono);color:var(--ink)}
@media (max-width:820px){.mm-trust{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mm-trust{grid-template-columns:1fr;gap:var(--space-6)}}

/* ---------- Footer ---------- */
.mm-foot{background:var(--ground-sunken);border-top:1px solid var(--line)}
.mm-foot .in{max-width:1120px;margin:0 auto;padding:var(--space-12) var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:space-between;align-items:end}
.mm-foot .big{margin:0;font:400 32px/1.1 var(--font-display);max-width:18em;text-wrap:balance}
.mm-foot .big a{background:linear-gradient(135deg,var(--brand-a),var(--brand-b));-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;border-bottom:1px solid var(--brand-b);overflow-wrap:anywhere}
.mm-legal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.mm-legal nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.mm-legal nav a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.mm-legal nav a:hover{color:var(--ink)}
@media (max-width:640px){.mm-foot .big{font-size:26px}}

/* ---------- Page ---------- */
.mm-page{padding:var(--space-12) max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px))}
.mm-page>section+section{margin-top:var(--space-24)}
.mm-page>.mm-foot{margin:var(--space-24) calc(max(16px,env(safe-area-inset-left,0px)) * -1) 0 calc(max(16px,env(safe-area-inset-right,0px)) * -1)}
.mm-page>section{scroll-margin-top:var(--space-8)}
@media (max-width:640px){.mm-page{padding-top:var(--space-6)}.mm-page>section+section{margin-top:var(--space-12)}.mm-page>.mm-foot{margin-top:var(--space-12)}}

/* ---------- Reduced motion: nothing moves, every demo shows its finished state ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mm *,.mm *::before,.mm *::after{animation:none!important;transition:none!important}
  .mm-mark .edge{stroke-dashoffset:0}.mm-mark .node,.mm-mark .core{transform:none}
  .mm-pane .type{width:auto}
  .mm-notice{opacity:1}
  .mm-sentinel .ln{opacity:1;transform:none}
  .mm-sentinel footer .btn{opacity:1}
  .mm-window{opacity:1;transform:none}
  .mm-hero .mm-hero-video{display:none}
  .mm-hero{background:var(--panel) var(--mm-poster,none) 62% 50%/cover no-repeat}
  .mm-hero .mm-hero-fade{display:block}
  /* Narrow layouts gave their bottom edge to the loop; with the poster behind the text instead, restore the padding and drop the side fade. */
  @media (max-width:900px){.mm-hero{padding-bottom:var(--space-8);background-position:70% 100%}.mm-hero .mm-hero-fade{display:block;background:linear-gradient(180deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 80%,transparent) 60%,color-mix(in srgb,var(--panel) 40%,transparent) 100%)}}
}