/* ---- 00-core.css ---- */
/* Dashivo landing: shared foundation, Angry Owl Labs design system (mt-*). */
:root {
  --mt-bone: #eceae3; --mt-ink: #141416; --mt-brass: #ffff06; --mt-pine: #23262d; --mt-fog: #d6d3ca;
  --mt-stone: #6e6e74; --mt-cloud: #ffffff; --mt-night: #101114;
  --mt-font-d: "Schibsted Grotesk"; --mt-font-dw: 700; --mt-font-b: "Hanken Grotesk"; --mt-font-bw: 400;
  --mt-font-m: "Geist Mono"; --mt-font-mw: 400;
  --mt-mut: color-mix(in srgb, var(--mt-stone) 85%, var(--mt-ink));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { overflow-x: clip; }
/* Safari before 16 has no overflow: clip; the root can hide sideways overflow without breaking position: sticky */
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
body { margin: 0; background: var(--mt-night); color: var(--mt-cloud); font: 400 17px/1.6 var(--mt-font-b), system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.mt { font-family: var(--mt-font-b), system-ui, sans-serif; }
.mt-hd { font-family: var(--mt-font-d), Inter, -apple-system, Arial, sans-serif; font-weight: var(--mt-font-dw); font-size: clamp(44px, 4.6vw, 76px); line-height: 1; letter-spacing: -.035em; margin: 0; }
.mt-hd.xl { font-size: clamp(52px, 7.2vw, 112px); letter-spacing: -.045em; }
.mt-hd.sm { font-size: clamp(34px, 3.4vw, 54px); }
.mtpt.mtpt-leave { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:where(.mt){position:relative;z-index:10}
.mt,.mt *{box-sizing:border-box;min-width:0}
.mt-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important}
/* Trademark sign after "Dashivo": on every lockup (header, footer, hub) and on the first mention in each page's
   own copy (.tm-first). The CTA's mark (.tm-cta) shows only on pages that have no .tm-first (15-cta.css). */
.tm{font-size:.5em;vertical-align:super;line-height:0;margin-left:.04em;font-weight:inherit;letter-spacing:0}
:where(.mt) a{color:inherit}
:where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[role="button"]):focus-visible{outline:3px solid var(--mt-ink,#0F1113)!important;outline-offset:2px!important;box-shadow:0 0 0 2px var(--mt-bone,#ECEAE3)!important}
:where(.mt-dark) :where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:var(--mt-cloud,#FFFFFF)!important;box-shadow:0 0 0 2px var(--mt-night,#0F1113)!important}
:where(.mt-inring) :where(a[href],button):focus-visible{outline-offset:-4px!important;box-shadow:none!important}
.mt-inring:focus-visible{outline-offset:-3px!important;box-shadow:none!important}
.mt-btn{position:relative;display:inline-flex;padding:0;min-height:56px;border-radius:12px;background:var(--base);text-decoration:none;cursor:pointer;isolation:isolate;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:.01em;border:0;color:var(--fg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mt-cap{position:relative;display:inline-flex;align-items:center;gap:12px;width:100%;min-height:inherit;padding:0 10px 0 18px;border-radius:inherit;background:var(--face);translate:0 -4px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 10%,transparent),0 1px 0 color-mix(in srgb,#000 8%,transparent);transition:translate .2s cubic-bezier(.2,.8,.2,1),background .3s}
.mt-btn.mt-noarr .mt-cap{padding-right:22px}
.mt-btn:hover .mt-cap,.mt-btn:focus-visible .mt-cap{translate:0 -6px}
.mt-btn:active .mt-cap{translate:0 -1px;transition-duration:.08s}
.mt-led{width:7px;height:7px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--fg) 22%,transparent);transition:background .25s,box-shadow .25s}
.mt-btn:hover .mt-led,.mt-btn:focus-visible .mt-led{background:var(--led);box-shadow:0 0 0 2px color-mix(in srgb,var(--led) 30%,transparent),0 0 10px var(--led)}
.mt-arr{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;flex:none;background:var(--chip);color:var(--chipfg);transition:translate .5s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.mt-btn:hover .mt-arr{translate:4px 0}
.mt-lbl{position:relative;display:inline-block;line-height:1.2}
.mt-l2{display:none}
.mt-btn.mt-solid{--face:var(--mt-brass);--base:color-mix(in srgb,var(--mt-brass) 62%,var(--mt-ink));--fg:var(--mt-ink);--led:var(--mt-cloud);--chip:var(--mt-ink);--chipfg:var(--mt-brass)}
.mt-btn.mt-ghost{--face:var(--mt-cloud);--base:color-mix(in srgb,var(--mt-ink) 28%,var(--mt-fog));--fg:var(--mt-ink);--led:var(--mt-brass);--chip:var(--mt-bone);--chipfg:var(--mt-ink)}
.mt-btn.mt-quiet{--face:var(--mt-ink);--base:var(--mt-night);--fg:var(--mt-cloud);--led:var(--mt-brass);--chip:color-mix(in srgb,var(--mt-cloud) 12%,transparent);--chipfg:var(--mt-brass)}
@media (max-width:600px),(hover:none){.mt .mt-btn{white-space:normal;text-align:left;line-height:1.25;min-height:52px;max-width:100%} .mt .mt-cap{padding-top:8px;padding-bottom:8px}}
/* Touch screens: the filter chips, tabs and toggles across the pages are at least 44px tall (unchanged with a mouse) */
@media (pointer:coarse){.mtcg-f button,.mtlg-sw button,.apa-seg-ctl button,.apa-chip,.apb-mp-tabs button,.mtcl-f button,.mtsx-f button,.mtg-leg button,.mtlw-fl button,.mtpc-cats button,.mtq-dot{min-height:44px}}
.mt-btn:hover{transform:translate(var(--mx,0px),var(--my,0px))}
.mt-btn:active{transform:translate(var(--mx,0px),var(--my,0px))!important}
.mt-dark .mt-btn.mt-ghost{--face:var(--mt-pine);--base:var(--mt-night);--fg:var(--mt-cloud);--chip:color-mix(in srgb,var(--mt-cloud) 12%,transparent);--chipfg:var(--mt-brass)}
/* TEXT-SAFE accents: amber is a FILL (ink text on it) or an LED; small amber TEXT on light grounds uses the darker --mt-acc. On dark grounds the amber itself reads. */
.mt{--mt-acc:color-mix(in srgb,var(--mt-brass) 46%,var(--mt-ink));--mt-acc-lg:color-mix(in srgb,var(--mt-brass) 62%,var(--mt-ink));--mt-mut:color-mix(in srgb,var(--mt-stone) 85%,var(--mt-ink));--mt-acc-d:var(--mt-brass)}
.mt-lt,.mt .mt-lt{--mt-acc:color-mix(in srgb,var(--mt-brass) 46%,var(--mt-ink));--mt-acc-lg:color-mix(in srgb,var(--mt-brass) 62%,var(--mt-ink));--mt-mut:color-mix(in srgb,var(--mt-stone) 85%,var(--mt-ink))}
.mt-dark,.mt.mt-dark{--mt-acc:var(--mt-brass);--mt-acc-lg:var(--mt-brass);--mt-mut:color-mix(in srgb,var(--mt-stone) 45%,var(--mt-cloud))}
/* LED segment strip (status rows) */
.mt-bar{width:26px;height:10px;flex:none;display:inline-block;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 5px,transparent 5px 6px,currentColor 6px 7px,transparent 7px 9px,currentColor 9px 10px,transparent 10px 12px)}
/* reduced motion: every entrance lands at once (no staggered delays) and a loop plays one tiny pass and stops on its
   last frame, instead of cycling every frame at .01ms (which reads as flicker) */
@media (prefers-reduced-motion:reduce){.mt *,.mt ::before,.mt ::after,.sth *{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}}
.mt-spk{display:block;width:100%;overflow:visible}
.mt-spk .l{fill:none;stroke:var(--mt-brass);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mt-spk .a{fill:color-mix(in srgb,var(--mt-brass) 20%,transparent)}
.mt-bars{display:flex;align-items:flex-end;gap:3px;height:100%}
.mt-bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:var(--mt-brass);opacity:calc(.45 + var(--i)*.04)}
.mt-seg{display:inline-flex;align-items:flex-end;gap:calc(var(--s)*.06);line-height:1}
.mt-seg-d{width:calc(var(--s)*.55);height:var(--s);display:block;overflow:visible}
.mt-seg-d path{fill:color-mix(in srgb,currentColor 10%,transparent);transition:fill .35s}
.mt-seg-d path.on{fill:currentColor}
.mt-seg-t{font-family:var(--mt-font-m,'Geist Mono'),ui-monospace,monospace;font-weight:500;font-size:calc(var(--s)*.62);line-height:1;padding-bottom:calc(var(--s)*.06)}
.mt-scr{display:grid;grid-template-columns:148px 1fr;width:100%;height:100%;background:var(--mt-night);color:var(--mt-cloud);font-size:12px;text-align:left;overflow:hidden}
.mt-scr-side{display:flex;flex-direction:column;gap:3px;padding:16px 10px;border-right:1px solid color-mix(in srgb,var(--mt-cloud) 8%,transparent);background:color-mix(in srgb,var(--mt-pine) 60%,var(--mt-night))}
.mt-scr-side .lg{width:18px;height:18px;border-radius:4px;background:var(--mt-brass);margin:0 0 14px 6px}
.mt-scr-side span{padding:7px 9px;border-radius:6px;font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 58%,transparent)}
.mt-scr-side span.on{background:color-mix(in srgb,var(--mt-cloud) 9%,transparent);color:var(--mt-cloud)}
.mt-scr-main{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.mt-scr-top{display:flex;align-items:center;gap:12px}
.mt-scr-top b{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-right:auto}
.mt-scr-top span{font-size:10.5px;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mt-scr-top .pill{padding:3px 8px;border-radius:99px;background:color-mix(in srgb,#2FBF71 16%,transparent);color:#58D68D}
.mt-scr-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mt-scr-kpi div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent)}
.mt-scr-kpi span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mt-scr-kpi b{font-size:20px;font-weight:700;letter-spacing:-.03em}
.mt-scr-kpi em{font-style:normal;font-size:10.5px}
.mt-scr-kpi .up{color:#58D68D}
.mt-scr-kpi .dn{color:#FF8A7A}
.mt-scr-chart{position:relative;flex:1;min-height:90px;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent)}
.mt-scr-chart .mt-spk{height:100%}
.mt-scr-fc{position:absolute;inset:10px 12px;width:calc(100% - 24px);height:calc(100% - 20px)}
.mt-scr-fc path{fill:color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mt-scr-fc .l{fill:none;stroke:var(--mt-cloud);stroke-dasharray:5 5;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.7}
.mt-scr-thr{position:absolute;left:12px;right:12px;top:40%;border-top:1px dashed color-mix(in srgb,var(--mt-cloud) 45%,transparent)}
.mt-scr-al{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 0 5px color-mix(in srgb,var(--mt-brass) 25%,transparent)}
.mt-scr-dots{display:grid;grid-template-columns:repeat(15,1fr);gap:6px;height:100%;align-content:center}
.mt-scr-dots i{aspect-ratio:1;border-radius:50%;background:#58D68D;opacity:.75}
.mt-scr-dots i.w{background:var(--mt-brass)}
.mt-scr-dots i.r{background:#FF8A7A;opacity:1}
.mt-scr-qa{display:flex;flex-direction:column;gap:10px;height:100%}
.mt-scr-qa p{margin:0;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);color:var(--mt-cloud)}
.mt-scr-qa div{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;flex:1;align-items:end}
.mt-scr-qa span{font-size:12px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mt-scr-rows{display:flex;flex-direction:column;gap:4px}
.mt-scr-rows p{display:flex;align-items:center;gap:8px;margin:0;padding:6px 8px;border-radius:6px;font-size:10.5px;color:color-mix(in srgb,var(--mt-cloud) 75%,transparent);background:color-mix(in srgb,var(--mt-cloud) 3%,transparent)}
.mt-scr-rows i{width:6px;height:6px;border-radius:50%;background:var(--mt-brass)}
.mt-scr-rows span{margin-left:auto;color:#58D68D}
@media (max-width:700px){.mt-scr{grid-template-columns:1fr} .mt-scr-side{display:none} .mt-scr-kpi{gap:6px} .mt-scr-kpi div{padding:8px 9px} .mt-scr-kpi span{font-size:8.5px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mt-scr-kpi b{font-size:15px} .mt-scr-main{padding:12px;gap:10px} .mt-scr-rows p:nth-child(n+3){display:none}}
.mt[data-kb] *,.mt[data-kb] *::before,.mt[data-kb] *::after{transition:none!important}
.mt-sec{position:relative;z-index:10;display:block;width:100%;--sp:.5;--pp:0}
.mt-rev{position:relative;width:100%;--rv:1}
.mt-rev-in{position:relative}
.mt-rev-sp{height:0}
.mt-rev.is-act{--rv:0;--t:min(var(--h),100vh);--t:min(var(--h),100svh);z-index:var(--layer,9);margin-top:calc(var(--t)*-1)}
.mt-rev.is-act>.mt-rev-in{position:sticky;top:calc(100vh - var(--t));top:calc(100svh - var(--t))}
.mt-rev.is-act>.mt-rev-sp{height:var(--t)}
/* the lifting edge throws a shadow on the section beneath, and that section comes out of the dark as it is uncovered */
.mt-rev.is-act>.mt-rev-in::before{content:"";position:absolute;z-index:40;left:0;right:0;top:0;height:120px;translate:0 calc((1 - var(--rv))*var(--t));background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0));opacity:min(1,calc(var(--rv)*(1 - var(--rv))*9));pointer-events:none}
.mt-rev.is-act>.mt-rev-in::after{content:"";position:absolute;z-index:39;left:0;right:0;top:0;height:var(--t);background:#000;opacity:calc((1 - var(--rv))*.16);pointer-events:none}
.mt-wrap{--pad:56px;width:100%;max-width:calc(clamp(1280px, 92vw, 1520px) + var(--pad)*2);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mt-eb{display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:0;padding:7px 14px 7px 10px;border-radius:8px;background:var(--mt-ink);color:var(--mt-bone);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;opacity:0;translate:0 10px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent)}
.mt-eb.is-on{opacity:1;translate:0 0}
.mt-eb i{width:8px;height:8px;display:block;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass);animation:mtLed 2.4s ease-in-out infinite}
.mt-dark .mt-eb{background:var(--mt-night);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 14%,transparent)}
.mt-hd{margin:0;letter-spacing:-.04em;text-wrap:balance}
/* other headings balance their lines too (no lone last word on narrow phones); zero specificity, so any heading
   that sets its own text-wrap keeps it. Browsers without text-wrap simply wrap as before. */
:where(.mt) :where(h1,h2,h3){text-wrap:balance}
.mt-hd-l{display:block}
.mt-hd-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .17em;margin:0 -.05em -.17em;white-space:pre}
.mt-hd-i{position:relative;display:inline-block;translate:0 108%;transition:translate 1s cubic-bezier(.2,.75,.2,1)}
.mt-hd.is-on .mt-hd-i{translate:0 0}
.mt-hd-w.is-accw{overflow:visible}
.mt-hd-w.is-accw .mt-hd-i{translate:0 0}
.mt-flap{display:inline-flex;gap:.04em;vertical-align:-.02em;perspective:900px;perspective-origin:50% 50%}
.mt-fl{position:relative;display:inline-grid;place-items:center;min-width:.74em;padding:0 .04em;height:1.02em;border-radius:.09em;background:var(--mt-ink);color:var(--mt-bone);line-height:1;transform-style:preserve-3d;transform:rotateX(-100deg);transform-origin:50% 50%;opacity:0;transition:transform .55s cubic-bezier(.2,.9,.3,1.15),opacity .3s ease;transition-delay:calc(var(--pd,0ms) + var(--i)*70ms),calc(var(--pd,0ms) + var(--i)*70ms)}
.mt-fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:color-mix(in srgb,var(--mt-bone) 55%,transparent);opacity:.7}
.mt-fl-i{display:block;translate:0 -.02em}
.mt-hd.is-on .mt-fl{transform:rotateX(0deg);opacity:1}
@media (max-width:600px){.mt-flap{gap:.02em} .mt-fl{min-width:.6em;padding:0;border-radius:.07em}}
.mt-dark .mt-fl{background:var(--mt-brass);color:var(--mt-ink)}
.mt-dark .mt-fl::after{background:color-mix(in srgb,var(--mt-ink) 45%,transparent)}
.mt-fl:last-child{background:var(--mt-brass);color:var(--mt-ink)}
.mt-dark .mt-fl:last-child{background:var(--mt-bone);color:var(--mt-ink)}
.mt-um{position:relative;overflow:hidden;transition:clip-path 1.35s cubic-bezier(.7,0,.2,1);background:color-mix(in srgb,var(--mt-stone) 22%,transparent)}
.mt-um img{position:absolute;left:0;top:-9%;width:100%;height:118%;display:block;object-fit:cover;scale:1.28;translate:0 calc((var(--sp,.5) - .5)*var(--par,1)*-7%);transition:scale 1.9s cubic-bezier(.16,.84,.24,1);user-select:none}
.mt-um.is-on img{scale:1}
/* diagonal cuts: the section hangs over its neighbour and is cut on a slope (clip-path, so the neighbour shows through) */
.mt-cut-t{margin-top:calc(var(--cut,7vw)*-1);clip-path:polygon(0 var(--cut,7vw),100% 0,100% 100%,0 100%);padding-top:var(--cut,7vw)}
.mt-cut-b{margin-bottom:calc(var(--cut,7vw)*-1);padding-bottom:var(--cut,7vw)}
.mt-cut-t.mt-cut-b{clip-path:polygon(0 var(--cut,7vw),100% 0,100% calc(100% - var(--cut,7vw)),0 100%)}
.mt-cut-b:not(.mt-cut-t){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut,7vw)),0 100%)}
@media (max-width:1099px){.mt-wrap{--pad:32px}}
@media (max-width:699px){.mt-wrap{--pad:20px}}
@media (prefers-reduced-motion:reduce){.mt-hd-i{translate:0 0!important} .mt-deg{opacity:1!important} .mt-um{clip-path:none!important} .mt-um img{scale:1!important;translate:0 0!important}}
@media (max-width:700px){.mt-scr{grid-template-columns:1fr} .mt-scr-side{display:none} .mt-scr-rows{display:none} .mt-scr-kpi b{font-size:15px}}
@keyframes mthdIn{from{opacity:0;translate:0 -14px}}
@keyframes mthdL{from{opacity:0;translate:0 14px}}
@keyframes mtld-fb{to{opacity:0;visibility:hidden}}
@keyframes mtpt-in{from{transform:rotateX(0)}to{transform:rotateX(92deg);opacity:0}}
@keyframes mtpt-lo{to{opacity:0}}
@keyframes mtLed{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes mthSpin{to{rotate:360deg}}
@keyframes mthPulse{0%{box-shadow:0 0 0 0 #2FBF7166}100%{box-shadow:0 0 0 9px #2FBF7100}}
@keyframes mthCaret{50%{opacity:0}}
@keyframes mtiFlow{to{stroke-dashoffset:-.1}}
@keyframes mtaC{50%{opacity:0}}
@keyframes mtvUp{from{translate:0 0}to{translate:0 calc(-50% - 8px)}}
@keyframes mtvDn{from{translate:0 calc(-50% - 8px)}to{translate:0 0}}
.mtpt{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden;--e:cubic-bezier(.2,.8,.2,1)}
.mtpt-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(7,1fr);gap:3px;perspective:1400px}
.mtpt-t{position:relative;display:block;background:var(--mt-night);border-radius:4px;transform-origin:50% 0;backface-visibility:hidden}
.mtpt-t::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#000;opacity:.6}
.mtpt-lbl{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;justify-items:center;gap:14px;text-align:center;padding:0 20px;width:100%}
.mtpt-k{display:flex;align-items:center;gap:10px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.mtpt-k i{width:9px;height:9px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.mtpt-n{display:flex;gap:.06em;justify-content:center;flex-wrap:wrap;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(34px,6.5vw,92px);font-weight:var(--mt-font-dw);line-height:1;perspective:900px}
.mtpt-f{position:relative;display:inline-grid;place-items:center;width:.74em;height:1.06em;border-radius:.1em;background:var(--mt-ink);color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mtpt-f::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#000;opacity:.6}
.mtpt-f.is-acc{background:var(--mt-brass);color:var(--mt-ink)}
.mtpt-gap{width:.3em}
/* arrival: the wall flips away in a wave from left to right */
.mtpt-enter .mtpt-t{animation:mtpt-in calc(var(--d)*.9) var(--e) calc(var(--x)*var(--d)*.9) both}
.mtpt-enter .mtpt-lbl{animation:mtpt-lo .22s ease both}
/* leaving: tiles flip down to cover, in a wave from the click */
.mtpt-leave .mtpt-t{transform:rotateX(-92deg);opacity:0}
.mtpt-leave .mtpt-lbl{opacity:0}
.mtpt-leave.mtpt-on .mtpt-t{transform:rotateX(0);opacity:1;transition:transform calc(var(--d)*.55) cubic-bezier(.2,.9,.3,1.1) calc(var(--w)*var(--d)*.8),opacity .12s linear calc(var(--w)*var(--d)*.8)}
.mtpt-leave .mtpt-f{transform:rotateX(-90deg);opacity:0}
.mtpt-leave.mtpt-on .mtpt-lbl{opacity:1;transition:opacity .15s ease calc(var(--d)*.6)}
.mtpt-leave.mtpt-on .mtpt-f{transform:rotateX(0);opacity:1;transition:transform .35s cubic-bezier(.2,.9,.3,1.2) calc(var(--d)*.65 + var(--i)*40ms),opacity .15s calc(var(--d)*.65 + var(--i)*40ms)}
@media (prefers-reduced-motion:reduce){.mtpt{display:none}}
/* No eyebrow labels anywhere (owner's call, Sep 28, 2026): the headings carry each section on their own.
   The markup stays so the scripts that light them find what they expect; they're simply never shown. */
.mt-eb,.mtl-l,.mtg-uk,.mts-tag{display:none!important}
/* Power: a section that is off screen (.mt-off, set by 00-core.js) pauses its looping animations. */
.mt-off,.mt-off *,.mt-off ::before,.mt-off ::after{animation-play-state:paused!important}
/* Without JavaScript nothing plays an entrance, so what normally rises in on scroll simply shows (the home hero's
   words, the ticker, scenario cards, the FAQ list, the specs, the closing form). boot.js puts .js on <html> before the
   first paint, so with JavaScript this never applies. */
html:not(.js) :is(.mt-hd-i,.mtl-v,.mtc-side,.mtc-card,.mtf-card,.mtf-q,.mtk-form,.mtk-note,.mtv-body,.mtv-cols,.mtv-rate){opacity:1!important;translate:none!important}

/* ---- 01-loader.css ---- */
/* Boot loader (mtld): a console panel that counts to 100, shuffles the name onto split-flap tiles, then closes to a
   bright line. boot.js puts .mtld-go on <html> before first paint; 01-loader.js runs the sequence. If the script
   never runs, the panel fades out after 8 s. */
.mtld{display:none}
html.mtld-go,html.mtld-lock{overflow:hidden!important}
html.mtld-go .mtld{display:block;animation:mtld-fb .8s ease 8s both}
.mtld.is-out{display:block}
.mtld{position:fixed;inset:0;z-index:9999;pointer-events:auto;cursor:default;background:var(--mt-night);color:var(--mt-cloud);font-family:var(--mt-font-b),system-ui,sans-serif;--e:cubic-bezier(.7,0,.2,1);clip-path:inset(0 0 0 0);transition:clip-path .7s var(--e)}
.mtld *{box-sizing:border-box}
.mtld::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--mt-brass);box-shadow:0 0 30px 6px color-mix(in srgb,var(--mt-brass) 70%,transparent);opacity:0;transition:opacity .2s}
.mtld-open{clip-path:inset(50% 0 50% 0);pointer-events:none}
.mtld-open::after{opacity:1}
.mtld-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,32px);padding:24px;transition:opacity .35s,scale .7s var(--e)}
.mtld-open .mtld-in{opacity:0;scale:1 .6}
.mtld-line{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mtld-line i{width:9px;height:9px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 20%,transparent);transition:background .3s,box-shadow .3s}
.mtld-line i.on{background:var(--mt-brass);box-shadow:0 0 10px var(--mt-brass)}
.mtld-panel{position:relative;width:min(520px,88vw);padding:26px 28px 22px;border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--mt-pine) 90%,#fff),var(--mt-pine) 45%,color-mix(in srgb,var(--mt-pine) 80%,#000));box-shadow:0 40px 80px -30px #000,inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent)}
.mtld-scw{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8d9096,#3b3e45 70%)}
.mtld-scw.a{left:9px;top:9px}
.mtld-scw.b{right:9px;top:9px}
.mtld-scw.c{left:9px;bottom:9px}
.mtld-scw.d{right:9px;bottom:9px}
.mtld-leds{display:flex;gap:4px}
.mtld-leds i{flex:1;height:8px;border-radius:2px;background:color-mix(in srgb,var(--mt-cloud) 9%,transparent);transition:background .12s,box-shadow .12s}
.mtld-leds i.on{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtld-read{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:22px 0 14px;padding:14px;border-radius:12px;background:#0b0c0f;box-shadow:inset 0 3px 10px #000}
.mtld-seg{display:flex;gap:8px}
.mtld-d{width:clamp(36px,6vw,50px);height:clamp(64px,11vw,90px);overflow:visible}
.mtld-d path{fill:color-mix(in srgb,var(--mt-cloud) 7%,transparent)}
.mtld-d path.on{fill:var(--mt-brass);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--mt-brass) 80%,transparent))}
.mtld-read b{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:22px;color:var(--mt-brass);padding-bottom:6px}
.mtld-w{position:relative;height:1.4em;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.mtld-w span{position:absolute;inset:0;opacity:0;translate:0 8px;transition:opacity .2s,translate .3s;overflow:hidden;text-overflow:ellipsis}
.mtld-w span.is-on{opacity:1;translate:0 0}
.mtld-w span.is-past{opacity:0;translate:0 -8px}
/* the console name as split-flap tiles (blank until the shuffle starts); words wrap as whole words on narrow screens */
.mtld-name{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.14em 0;max-width:100%;margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(30px,6vw,72px);line-height:1;perspective:800px;min-height:1.1em}
.mtld-wd{display:inline-flex;gap:6px}
.mtld-t{position:relative;display:inline-grid;place-items:center;width:.74em;height:1.06em;border-radius:.1em;background:color-mix(in srgb,var(--mt-cloud) 6%,transparent);color:var(--mt-bone);transform:rotateX(-80deg);opacity:.2;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .2s,background .3s}
.mtld-t::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#000;opacity:.55}
.mtld-t:not(.is-on)>span{visibility:hidden}
.mtld-t.is-on{transform:rotateX(0);opacity:1;background:var(--mt-ink)}
.mtld-t.is-acc.is-on{background:var(--mt-brass);color:var(--mt-ink)}
.mtld-gap{width:.3em}
@media (max-width:420px){.mtld-wd{gap:4px} .mtld-panel{padding:22px 20px 18px}}
@media (max-height:560px){.mtld-in{gap:12px} .mtld-panel{padding:18px 22px 14px} .mtld-read{margin:12px 0 8px;padding:8px} .mtld-d{width:26px;height:46px} .mtld-name{font-size:clamp(24px,4vw,40px)}}
@media (prefers-reduced-motion:reduce){html.mtld-go .mtld{display:none}}

/* ---- 01c-hudshade.css ---- */
/* 01c · The HUD's text shadow, shared by every HUD the site draws: the home hero, the step and scenario cards, the
   scenario pages, About and the /demo app (docs/app-visuals-registry.md lists them all).
   It copies the apps: no backdrop cards or pills; every readout's text and icons carry a pure black, centred
   shadow, a tight 1 pt edge drawn twice plus a soft glow (HUDView.swift .hudShadow, LumaGrid.swift HudShade.look:
   edge 0.35 to 1.0 over 1 pt, glow 0.25 to 0.85 over 4 to 9 pt; a SwiftUI radius r reads as a CSS blur of 2r).
   The apps set the strength from the picture's brightness; here a HUD picks a level by class: .hs-strong (daylight), .hs-mstrong, .hs-medium (the default), .hs-faint (night).
   --hs-t is the text-shadow, --hs-f the same shadow as a filter for icons and rings. Chips (REC, STOP, mode tags, the
   speed-limit sign) are solid in the app and keep no shadow. */
:root{
  --hs-t-strong:0 0 2px #000,0 0 2px #000,0 0 18.0px rgba(0,0,0,0.85);
  --hs-t-mstrong:0 0 2px rgba(0,0,0,0.84),0 0 2px rgba(0,0,0,0.84),0 0 15.5px rgba(0,0,0,0.70);
  --hs-t-medium:0 0 2px rgba(0,0,0,0.68),0 0 2px rgba(0,0,0,0.68),0 0 13.0px rgba(0,0,0,0.55);
  --hs-t-faint:0 0 2px rgba(0,0,0,0.35),0 0 2px rgba(0,0,0,0.35),0 0 8.0px rgba(0,0,0,0.25);
  --hs-f-strong:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 9.0px rgba(0,0,0,0.85));
  --hs-f-mstrong:drop-shadow(0 0 1px rgba(0,0,0,0.84)) drop-shadow(0 0 1px rgba(0,0,0,0.84)) drop-shadow(0 0 7.8px rgba(0,0,0,0.70));
  --hs-f-medium:drop-shadow(0 0 1px rgba(0,0,0,0.68)) drop-shadow(0 0 1px rgba(0,0,0,0.68)) drop-shadow(0 0 6.5px rgba(0,0,0,0.55));
  --hs-f-faint:drop-shadow(0 0 1px rgba(0,0,0,0.35)) drop-shadow(0 0 1px rgba(0,0,0,0.35)) drop-shadow(0 0 4.0px rgba(0,0,0,0.25));
  --hs-t:var(--hs-t-medium);--hs-f:var(--hs-f-medium)
}
.hs-strong{--hs-t:var(--hs-t-strong);--hs-f:var(--hs-f-strong)}
.hs-mstrong{--hs-t:var(--hs-t-mstrong);--hs-f:var(--hs-f-mstrong)}
.hs-medium{--hs-t:var(--hs-t-medium);--hs-f:var(--hs-f-medium)}
.hs-faint{--hs-t:var(--hs-t-faint);--hs-f:var(--hs-f-faint)}

/* the HUDs */
.mth-hud,.hx,.mtw-hud,.mtc-hud,.mtcl-hud,.mtab-hud,.dmo-hud{text-shadow:var(--hs-t)}
/* their icons and rings */
.mth-hud-top svg,.mth-rail .mth-rb.is-report svg,.mth-gm,.mth-hud-bottom svg:not(.mt-seg-d),.hx-g i,.hx-dim svg,
.dmo-hud .dmo-st .dmo-i,.dmo-hud .dmo-date .dmo-wf,.dmo-hud .dmo-bars,.dmo-hud .dmo-micw,.dmo-hud .dmo-nighttag .dmo-i,
.dmo-hud .dmo-dir-a,.dmo-hud .dmo-hz,.dmo-hud .dmo-g svg{filter:var(--hs-f)}
/* solid chips and signs: no shadow, as in the app */
.mth-rec,.mth-lim,.mth-bar,.hx-rec,.hx-tag,.hx-lim,.mtw-rec,.mtc-rec,.mtc-tag,.mtcl-rec,.mtcl-tag,.mtab-rec{text-shadow:none}

/* ---- 02-header.css ---- */
/* Header (mthd): fixed bar that turns solid once the page scrolls, hides while reading down, returns on the
   way up, and switches light/dark with the section beneath it. Below 1060px the links move into a sheet. */
.mthd{position:fixed;left:0;right:0;top:0;bottom:auto!important;height:auto!important;z-index:1000;color:var(--mt-ink);pointer-events:none;transition:translate .5s cubic-bezier(.2,.8,.2,1),color .4s}
.mthd>*{pointer-events:auto}
.mthd.is-hide{translate:0 -110%}
.mthd-skip{position:absolute;left:12px;top:-60px;z-index:5;padding:10px 14px;border-radius:8px;background:var(--mt-ink);color:var(--mt-cloud);font-size:13px;text-decoration:none}
.mthd-skip:focus{top:10px}
.mthd-bar{position:relative;display:flex;align-items:center;gap:22px;height:78px;margin:0 auto;padding:0 clamp(20px,4vw,56px);transition:background .4s,color .4s,height .4s,box-shadow .4s}
.mthd.is-solid .mthd-bar{height:66px;background:color-mix(in srgb,var(--mt-bone) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--mt-fog)}
.mthd.is-dark{color:var(--mt-cloud)}
.mthd.is-dark.is-solid .mthd-bar{background:color-mix(in srgb,var(--mt-night) 82%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mthd-logo{display:flex;align-items:center;gap:10px;flex:none;min-height:44px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:23px;letter-spacing:-.045em;line-height:1;color:inherit;text-decoration:none}
.mthd-logo i{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:var(--mt-brass);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 16%,transparent)}
.mthd-logo svg{width:20px;height:20px;fill:var(--mt-ink)}
.mthd-nav{margin:0 auto}
.mthd-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 9%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .4s,box-shadow .4s}
.mthd.is-dark .mthd-nav ul{background:color-mix(in srgb,var(--mt-night) 40%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 14%,transparent)}
.mthd-nav a{position:relative;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;color:inherit;text-decoration:none;font-size:14px;font-weight:500;transition:background .25s}
.mthd-nav a:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.mthd-led{position:absolute;left:50%;bottom:3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass);scale:0;transition:scale .35s cubic-bezier(.34,1.56,.64,1)}
.mthd-nav a.is-cur .mthd-led{scale:1}
.mthd-right{display:flex;align-items:center;gap:14px}
.mthd .mthd-bar .mthd-cta{min-height:44px;font-size:13.5px}
.mthd.is-dark .mt-btn.mt-ghost{--face:var(--mt-pine);--base:var(--mt-night);--fg:var(--mt-cloud);--chip:color-mix(in srgb,var(--mt-cloud) 12%,transparent);--chipfg:var(--mt-brass)}
.mthd-burger{display:none;position:relative;width:50px;height:44px;border:0;border-radius:10px;background:var(--mt-ink);color:var(--mt-cloud);cursor:pointer;box-shadow:0 3px 0 #000}
.mthd.is-dark .mthd-burger{background:var(--mt-cloud);color:var(--mt-ink);box-shadow:0 3px 0 var(--mt-fog)}
.mthd-burger i{position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:currentColor}
.mthd-burger i:nth-child(1){top:15px}
.mthd-burger i:nth-child(2){top:21px;right:21px}
.mthd-burger i:nth-child(3){top:27px}
/* the small-screen sheet */
.mthd-sheet{position:fixed;inset:0;z-index:2147482000;display:flex;flex-direction:column;gap:18px;padding:14px 20px 26px;padding-bottom:max(26px,env(safe-area-inset-bottom));background:var(--mt-night);color:var(--mt-cloud);overflow-y:auto;overscroll-behavior:contain;animation:mthdIn .45s cubic-bezier(.2,.8,.2,1)}
.mthd-sheet[hidden]{display:none}
.mthd-sheet .mthd-logo{color:var(--mt-cloud)}
.mthd-shtop{display:flex;align-items:center;justify-content:space-between;height:54px;flex:none}
.mthd-x{border:0;background:var(--mt-cloud);color:var(--mt-ink);border-radius:10px;padding:12px 16px;font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 var(--mt-fog)}
.mthd-sst{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mthd-sst i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:mtLed 2.2s ease-in-out infinite}
.mthd-slinks{list-style:none;margin:0;padding:0}
.mthd-slinks li{animation:mthdL .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*45ms)}
.mthd-slinks a{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent);font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(28px,8.6vw,40px);letter-spacing:-.045em;color:var(--mt-cloud);text-decoration:none}
.mthd-slinks em{min-width:40px;padding:5px 7px;border-radius:6px;background:color-mix(in srgb,var(--mt-cloud) 9%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-style:normal;font-size:12px;letter-spacing:0;text-align:center;color:var(--mt-brass)}
.mthd-slinks a[aria-current] em{background:var(--mt-brass);color:var(--mt-ink)}
.mthd-sfeat p{margin:0 0 10px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mthd-sfeat div{display:flex;flex-wrap:wrap;gap:6px}
.mthd-sfeat span{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);color:var(--mt-cloud);font-size:14px}
.mthd-sfeat span::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e}
.mthd-sfoot{display:grid;gap:14px;margin-top:auto}
.mthd-sfoot .mt-btn{width:100%}
@media (max-width:1280px){.mthd-nav a{padding:9px 10px;font-size:13.5px}}
@media (max-width:1060px){.mthd .mthd-nav,.mthd .mthd-bar .mthd-cta{display:none} .mthd .mthd-bar .mthd-burger{display:block} .mthd-right{margin-left:auto}}
@media (min-width:1061px){.mthd-sheet{display:none!important}}
@media (prefers-reduced-motion:reduce){.mthd,.mthd-bar,.mthd-led{transition:none} .mthd-sheet,.mthd-slinks li{animation:none}}
/* the Hub's "Coming Soon" pill in the nav, and the yellow Download App button kept beside the menu on small screens */
.mthd-nav .mthd-soon{margin-left:2px;padding:1px 6px;font-size:8.5px}
.mthd-slinks .mt-soon{font-size:10px;vertical-align:.5em}
@media (max-width:1060px){.mthd .mthd-bar .mthd-cta{display:inline-flex;min-height:44px;border-radius:10px} .mthd .mthd-bar .mthd-cta .mt-cap{padding:0 14px;font-size:13px} .mthd-right{gap:10px}}
@media (max-width:360px){.mthd .mthd-bar .mthd-cta .mt-led{display:none}}
/* narrow phones: the logo, Download App and the menu button share the bar without squeezing the button or cutting
   the label (the menu button never shrinks; gaps, then padding and the wordmark, tighten below 400px and 340px) */
.mthd-burger{flex:none}
@media (max-width:400px){.mthd-bar{gap:12px} .mthd .mthd-right{gap:8px}}
@media (max-width:340px){.mthd-bar{gap:8px;padding:0 16px} .mthd-bar .mthd-logo{font-size:20px} .mthd .mthd-bar .mthd-cta .mt-cap{padding:0 10px;font-size:12.5px}}

/* ---- drawers (App, Resources): open from the bar on hover or focus, the bar turns bone while one is open ---- */
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mthd.is-mega .mthd-bar{background:var(--mt-bone);color:var(--mt-ink);box-shadow:none}
.mthd.is-mega .mthd-nav ul{background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mthd-nav a[aria-expanded="true"] .mthd-led{scale:1}
.mthd-car{font-size:10px;opacity:.6;transition:rotate .3s}
.mthd-nav a[aria-expanded="true"] .mthd-car{rotate:180deg}
.mthd.is-mega .mt-btn.mt-ghost{--face:var(--mt-cloud);--base:color-mix(in srgb,var(--mt-ink) 28%,var(--mt-fog));--fg:var(--mt-ink);--chip:var(--mt-bone);--chipfg:var(--mt-ink)}
.mthd .mthd-bar .mthd-in{min-height:44px;font-size:13.5px}
.mthd .mthd-bar .mthd-in .mt-cap{padding:0 16px}
.mthd-drawer{position:absolute;left:0;right:0;top:100%;color:var(--mt-ink);background:var(--mt-bone);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--mt-night) 45%,transparent);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s;border-radius:0 0 26px 26px}
.mthd-drawer.is-open{clip-path:inset(0 0 -40px 0);visibility:visible;transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s}
.mthd-drawer.is-swap{transition:none}
.mthd-dr-in{display:grid;grid-template-columns:minmax(0,1fr) 280px 290px;gap:24px;max-width:clamp(1280px,92vw,1520px);margin:0 auto;padding:22px clamp(20px,4vw,56px) 30px;border-top:1px solid var(--mt-fog)}
.mthd-dt{margin:0 0 10px 12px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mthd-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.mthd-list li{opacity:0;translate:0 -10px;transition:opacity .35s ease calc(var(--i)*30ms + 120ms),translate .5s cubic-bezier(.2,.8,.2,1) calc(var(--i)*30ms + 120ms)}
.mthd-drawer.is-open .mthd-list li{opacity:1;translate:0 0}
.mthd-list li a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:1px 12px;align-items:center;padding:9px 12px;border-radius:12px;color:var(--mt-ink);text-decoration:none;transition:background .25s,box-shadow .25s}
.mthd-list a.is-hv,.mthd-list a:focus-visible{background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mthd-fn{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--mt-ink);color:var(--mt-brass);transition:scale .35s cubic-bezier(.34,1.56,.64,1)}
.mthd-list a.is-hv .mthd-fn{scale:1.06}
.mthd-list b{display:flex;align-items:center;gap:4px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:15.5px;letter-spacing:-.02em;line-height:1.25}
.mthd-list b .mt-soon{font-size:8px;padding:1px 6px}
.mthd-ft{font-size:12.5px;line-height:1.35;color:var(--mt-mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mthd-all{display:inline-block;margin:12px 0 0 12px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--mt-fog);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;letter-spacing:.06em;color:var(--mt-ink)}
.mthd-peek{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;background:var(--mt-night);color:var(--mt-cloud)}
.mthd-peek p{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mthd-peek p i{width:7px;height:7px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mthd-pv{margin-top:10px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:44px;letter-spacing:-.05em;line-height:1;color:var(--mt-brass)}
.mthd-pc{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;color:var(--mt-mut)}
.mthd-pv.is-flip,.mthd-pc.is-flip,.mthd-pk.is-flip{animation:mthdPk .45s cubic-bezier(.2,.8,.2,1)}
@keyframes mthdPk{from{opacity:0;translate:0 8px}}
.mthd-leds{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;margin-top:auto;padding-top:18px}
.mthd-leds i{height:8px;border-radius:2px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);transition:background .3s,box-shadow .3s}
.mthd-leds i.on{background:var(--mt-brass);box-shadow:0 0 6px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.mthd-ask{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border-radius:18px;background:var(--mt-brass);color:var(--mt-ink)}
.mthd-ask p{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.mthd-ask p i{width:10px;height:10px;border-radius:3px;background:var(--mt-ink)}
.mthd-ask b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:19px;line-height:1.3;letter-spacing:-.02em}
.mthd-ask .mthd-askb{--face:var(--mt-ink);--base:#000;--fg:var(--mt-cloud);--chip:var(--mt-brass);--chipfg:var(--mt-ink);--led:var(--mt-brass);min-height:46px;font-size:13px}
.mthd-ch{margin-top:auto;display:flex;gap:8px;align-items:center;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11.5px;color:var(--mt-ink);text-decoration:none}
.mthd-ch em{font-style:normal;padding:2px 6px;border-radius:4px;background:var(--mt-ink);color:var(--mt-brass)}
.mthd-ch:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1380px){.mthd-dr-in{grid-template-columns:minmax(0,1fr) 250px} .mthd-ask{display:none}}
@media (max-width:1200px){.mthd .mthd-bar .mthd-in .mt-led{display:none} .mthd .mthd-bar .mthd-in .mt-cap{padding:0 12px}}
@media (max-width:1060px){.mthd .mthd-drawer,.mthd .mthd-bar .mthd-in{display:none}}
@media (prefers-reduced-motion:reduce){.mthd-drawer,.mthd-drawer.is-open,.mthd-list li{transition:none}}
/* the sheet's chip groups: icon chips */
.mthd-sfeat a{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);color:var(--mt-cloud);text-decoration:none;font-size:14px}
.mthd-sfeat a .ico{width:16px;height:16px;color:var(--mt-brass)}
.mthd-sfeat a .mt-soon{font-size:8.5px;padding:1px 6px;margin-left:0}
.mthd-sfeat a[aria-current]{background:var(--mt-brass);color:var(--mt-ink)}
.mthd-sfeat a[aria-current] .ico{color:var(--mt-ink)}
.mthd-peek{position:relative;overflow:hidden}
.mthd-pi{position:absolute;right:-18px;bottom:34px;width:150px;height:150px;color:var(--mt-brass);opacity:.14;stroke-width:1.2;pointer-events:none}
.mthd .mthd-bar .mthd-cta{white-space:nowrap}
/* owner rule: no eyebrow labels, the drawers too: the list title and the cards' small labels go */
.mthd-dt,.mthd-peek>p,.mthd-ask>p{display:none}
.mthd-list{padding-top:4px}
.mthd-pv{margin-top:0}

/* ---- 02b-phone.css ---- */
/* Phone frames (dph) for the real app screenshots, and a stage (dps) that sets one or more phones on a dark field.
   An original CSS drawing: a generic phone with a thin dark band, a punch-hole camera and two side keys. Every
   size is a percentage of the phone itself, so a frame scales from its height (--ph) or width (--pw).
     <figure class="dph"><span class="dph-scr"><img src="/assets/screens/ios-hud.webp" alt="…"></span></figure>
   .is-land turns it sideways; .dph-tag adds a small caption under it. */
.dph{position:relative;flex:none;margin:0;aspect-ratio:100/206.7;height:var(--ph,auto);width:var(--pw,auto);max-width:100%;border-radius:13.5%/6.55%;background:linear-gradient(140deg,#43464f 0%,#17181c 16%,#07080a 52%,#1c1e23 86%,#34373f 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 3px #040405,0 40px 80px -34px rgba(0,0,0,.8),0 14px 28px -16px rgba(0,0,0,.6)}
.dph::before,.dph::after{content:"";position:absolute;right:-.9%;width:1.3%;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#1f2126,#50535c)}
.dph::before{top:19%;height:8%}
.dph::after{top:30%;height:13%}
.dph-scr{position:absolute;inset:2% 4.2%;overflow:hidden;border-radius:10.6%/4.95%;background:#000;isolation:isolate}
.dph-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.dph-scr::before{content:"";position:absolute;z-index:2;left:50%;top:1.25%;width:3.4%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 36% 34%,#34405a 0,#0b0d12 46%,#000 70%);box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.dph-scr::after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;background:linear-gradient(116deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.04) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none}
.dph.is-land{aspect-ratio:206.7/100;border-radius:6.55%/13.5%}
.dph.is-land::before,.dph.is-land::after{right:auto;top:-.9%;height:1.3%;border-radius:3px 3px 0 0;background:linear-gradient(0deg,#1f2126,#50535c)}
.dph.is-land::before{left:19%;width:8%}
.dph.is-land::after{left:30%;width:13%}
.dph.is-land .dph-scr{inset:4.2% 2%;border-radius:4.95%/10.6%}
.dph.is-land .dph-scr::before{left:1.25%;top:50%;width:auto;height:7%;translate:0 -50%}
.dph.is-land .dph-scr img{object-position:0 50%}
.dph-tag{position:absolute;left:50%;top:calc(100% + 14px);translate:-50% 0;display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 9px;border-radius:8px;background:var(--mt-ink);color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.dph-tag i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}

/* the stage: a dark field with a faint road grid and a brass glow; phones sit on it, the middle one tallest */
.dps{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--gap,clamp(14px,3%,40px));height:100%;min-height:0;padding:5% 4%;overflow:hidden;background:radial-gradient(90% 70% at 50% 115%,color-mix(in srgb,var(--mt-brass) 20%,transparent),transparent 62%),radial-gradient(70% 55% at 50% -10%,#232733,transparent 70%),var(--mt-night);isolation:isolate}
.dps::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 79px,color-mix(in srgb,var(--mt-cloud) 5%,transparent) 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,color-mix(in srgb,var(--mt-cloud) 5%,transparent) 79px 80px);-webkit-mask:radial-gradient(80% 70% at 50% 60%,#000,transparent);mask:radial-gradient(80% 70% at 50% 60%,#000,transparent)}
.dps .dph{--ph:88%}
.dps .dph.is-side{--ph:74%}
.dps .dph.is-land{--ph:auto;--pw:min(92%,640px)}
.dps-note{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:10px;background:var(--mt-cloud);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11.5px;line-height:1.3;white-space:nowrap;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.dps-note i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mt-brass)}
.dps-note.is-red i{background:#ef4444;box-shadow:0 0 6px #ef4444}
@media (max-width:700px){
  .dps .dph.is-side{display:none}
  .dps-note{display:none}
}

/* "Coming Soon" / "Coming soon" pill used wherever something isn't in the app yet (the Hub, Cloud plans) */
.mt-soon{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:2px 8px;border-radius:99px;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:9.5px;font-style:normal;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;white-space:nowrap;vertical-align:.14em}
.mt-soon.is-dim{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;opacity:.8}

/* phone stages inside the page windows (product hero, feature rows, feature pages) */
.mtph-scr>.dps,.mtfl-win>.dps,.mtfd-scr>.dps{height:100%}
.mtph-scr .dps{align-items:flex-start;padding-top:4%}
.mtph-scr .dps .dph{--ph:96%}
.mtph-scr .dps .dph.is-side{--ph:84%}
@media (max-width:809px){.mtph-scr .dps .dph{--ph:92%}}

/* ---- 02c-device.css ---- */
/* Device mockups (dvc) and callout diagrams (dco). An original drawing of a modern phone: a thin metal band with
   soft highlights, side keys, a black glass border, the screen at the phone's own aspect ratio (the screenshot
   fills it edge to edge, nothing cropped or letterboxed), the island drawn over it, a glass sheen and a soft
   floor shadow. Sizes are percentages of the phone, so it scales from its width (--dw).

   <figure class="dvc" style="--dw:300px" data-tilt>
     <div class="dvc-tilt"><div class="dvc-body">
       <div class="dvc-scr"><div class="dvc-view">
         <img class="dvc-img" src="/assets/screens/ios18-hud-v3.webp" alt="…" width="1206" height="2622">
       </div></div>
     </div></div>
   </figure>

   Variants: .is-android (generic Android: punch-hole camera, flatter corners, keys on the right), .is-land
   (sideways; a landscape screenshot fills it), .has-road (an illustrated road or a road loop sits behind the screenshot and the
   black camera area becomes see-through: mix-blend-mode screen), data-tilt (a gentle float with the
   scroll; js/02c-device.js), data-in (fades and rises in when it enters). The island, keys, sheen and shadow are
   added by the script when missing, so the markup above is all a page needs.
   Geometry (portrait, % of the body): body 71.9 x 150 (mm), screen inset 3.69% / 1.73%, 1206 x 2622 px screen
   with a 62 pt corner (15.42% x 7.09% of the screen); the island covers the one the simulator draws into its
   captures (x 38.2–61.7%, y 1.6–5.8%). */
.dvc{--dw:300px;--metal-a:#3a3c42;--metal-b:#8d9098;--metal-c:#17181b;position:relative;flex:none;width:var(--dw);width:round(down,var(--dw),2px);max-width:100%;margin:0;aspect-ratio:719/1500;isolation:isolate}
.dvc.is-land{aspect-ratio:1500/719;container-type:size}
/* the scroll motion is a gentle 2D float (no 3D rotation: rotated layers are resampled and the screen text goes soft) */
.dvc-tilt{position:absolute;inset:0}
.dvc[data-tilt] .dvc-tilt{translate:0 calc(var(--tp,0) * -22px);transition:translate .9s cubic-bezier(.2,.8,.2,1)}
/* the body: the metal band is the body's own background, the glass border sits inside it */
.dvc-body{position:absolute;inset:0;border-radius:17.94%/8.6%;background:
  linear-gradient(90deg,var(--metal-b) 0,var(--metal-a) 1.4%,var(--metal-c) 4%,var(--metal-c) 96%,var(--metal-a) 98.6%,var(--metal-b) 100%),var(--metal-c);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.34),inset 0 1.5px 1px rgba(255,255,255,.22),inset 0 -1.5px 1px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.6),0 60px 90px -40px rgba(0,0,0,.75),0 22px 40px -22px rgba(0,0,0,.6)}
.dvc.is-land .dvc-body{inset:auto;left:50%;top:50%;width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(-90deg);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.34),inset 0 1.5px 1px rgba(255,255,255,.22),inset 0 -1.5px 1px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.6),-60px 0 90px -40px rgba(0,0,0,.7)}
.dvc-body::before{content:"";position:absolute;inset:.6% 1.25%;border-radius:17.12%/8.1%;background:#050506;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),0 0 0 .6px rgba(255,255,255,.08)}
/* side keys: action, volume up, volume down (left); side key and the flush camera key (right) */
.dvc-k{position:absolute;width:1.1%;border-radius:2px;background:linear-gradient(90deg,var(--metal-c),var(--metal-b) 55%,var(--metal-a));box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)}
.dvc-k.l{left:-.85%;border-radius:2px 0 0 2px}
.dvc-k.r{right:-.85%;border-radius:0 2px 2px 0;background:linear-gradient(270deg,var(--metal-c),var(--metal-b) 55%,var(--metal-a))}
.dvc-k.k1{top:17.4%;height:4.1%}
.dvc-k.k2{top:25.2%;height:7.4%}
.dvc-k.k3{top:34.2%;height:7.4%}
.dvc-k.k4{top:27.6%;height:11%}
.dvc-k.k5{top:53.4%;height:7.8%;right:-.45%;background:linear-gradient(270deg,#0c0d0f,#3d4046 60%,#26282c)}
/* the screen and what's on it */
.dvc-scr{position:absolute;left:3.69%;right:3.69%;top:1.73%;left:round(nearest,3.69%,1px);right:round(nearest,3.69%,1px);top:round(nearest,1.73%,1px);aspect-ratio:1206/2622;overflow:hidden;border-radius:15.42%/7.09%;background:#000;isolation:isolate;container-type:size}
.dvc-view{position:absolute;inset:0}
.dvc.is-land .dvc-view{inset:auto;left:50%;top:50%;width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(90deg)}
.dvc-img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.dvc-bg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.dvc.has-road .dvc-img{mix-blend-mode:screen}
.dvc-isl{position:absolute;z-index:4;left:50%;top:1.5%;width:24%;height:4.4%;translate:-50% 0;border-radius:99px;background:#000;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07)}
.dvc-isl::after{content:"";position:absolute;right:11%;top:50%;width:21%;aspect-ratio:1;translate:0 -50%;border-radius:50%;background:radial-gradient(circle at 38% 34%,#2d3850 0,#0b0e16 45%,#000 70%);opacity:.9}
.dvc-scr::after{content:"";position:absolute;z-index:5;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 18%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(255,255,255,.035) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 18px rgba(0,0,0,.35)}
/* soft floor shadow */
.dvc::after{content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:-3.2%;height:4.5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));filter:blur(6px);transform:translateY(calc(var(--tp,0) * 8px)) scale(calc(1 - var(--tp,0) * .06));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.dvc.is-land::after{left:8%;right:8%;bottom:-7%;height:9%}
.mt-lt .dvc::after,.dvc.is-lt::after{background:radial-gradient(closest-side,rgba(20,20,22,.34),rgba(20,20,22,0))}
/* generic Android: flatter corners, even thin borders, a punch-hole camera, keys on the right only */
.dvc.is-android{aspect-ratio:758/1574}
.dvc.is-android .dvc-body{border-radius:13.2%/6.35%}
.dvc.is-android .dvc-body::before{inset:.5% 1.05%;border-radius:12.4%/5.95%}
.dvc.is-android .dvc-scr{left:3.17%;right:3.17%;top:1.14%;left:round(nearest,3.17%,1px);right:round(nearest,3.17%,1px);top:round(nearest,1.14%,1px);aspect-ratio:1080/2340;border-radius:10.7%/4.94%}
.dvc.is-android .dvc-isl{top:1.55%;width:3.9%;height:auto;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#2d3850 0,#0b0e16 48%,#000 72%);box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.dvc.is-android .dvc-isl::after{display:none}
.dvc.is-android .dvc-k.l{display:none}
.dvc.is-android .dvc-k.k4{top:21%;height:10.5%}
.dvc.is-android .dvc-k.k5{top:34.5%;height:6%;right:-.85%;background:linear-gradient(270deg,var(--metal-c),var(--metal-b) 55%,var(--metal-a))}
.dvc.is-android.is-land{aspect-ratio:1574/758}
/* entrance: fades and rises (fade-up blocks: opacity .9s ease, 40px over 1s) */
.js .dvc[data-in]:not(.is-on){opacity:0;translate:0 40px}
.dvc[data-in]{transition:opacity .9s ease var(--dl,0ms),translate 1s cubic-bezier(.2,.8,.2,1) var(--dl,0ms)}
/* a caption chip under a phone (eyebrow style) */
.dvc-tag{position:absolute;left:50%;top:calc(100% + 18px);translate:-50% 0;display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 9px;border-radius:8px;background:var(--mt-ink);color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.dvc-tag i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}

/* a row of phones standing free on the page (no backdrop): the middle one in front, the others smaller */
.dvs{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--gap,clamp(14px,3vw,56px));padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,64px)}
.dvs .dvc{--dw:clamp(230px,27vw,440px)}
.dvs .dvc.is-side{--dw:clamp(170px,20vw,330px)}
@media (max-width:809px){.dvs .dvc.is-side:nth-of-type(n+4){display:none} .dvs .dvc.is-side{--dw:clamp(110px,27vw,200px)} .dvs .dvc{--dw:clamp(170px,44vw,300px)} .dvs{gap:10px}}
@media (max-width:520px){.dvs .dvc.is-side:nth-of-type(n+3){display:none} .dvs .dvc{--dw:min(62vw,300px)} .dvs .dvc.is-side{--dw:min(30vw,150px)}}

/* ---- callout diagrams (dco) --------------------------------------------------------------------------------
   <div class="dco" data-dco [data-sides="l|r"] [data-line="ink"]>
     <div class="dco-dev"><figure class="dvc">…</figure></div>
     <ol class="dco-list"><li data-x="50" data-y="12" [data-side="l|r"]><span class="dco-k"><i></i>Speed limit</span>
       <span class="dco-d">The posted limit for the road.</span></li>…</ol>
   </div>
   x, y: the point on the screen, in percent of the screenshot. Wide (is-wide): the labels sit left and right of the
   phone, level with their point where there's room, joined by thin lines (straight, or level-diagonal-level) that
   never cross, drawn in when the diagram enters. Narrow: numbered dots on the screen and a numbered list below. */
.dco{--dw:clamp(280px,33vw,480px);--lc:color-mix(in srgb,var(--mt-cloud) 62%,transparent);--dc:var(--mt-brass);position:relative;display:flex;flex-direction:column;align-items:center;gap:34px}
.dco[data-line="ink"],.mt-lt .dco,.mttr:not(.mt-dark) .dco,.mtfd .dco{--lc:#7c7a73}
.dco[data-line="brass"]{--lc:color-mix(in srgb,var(--mt-brass) 80%,transparent)}
.dco-dev{position:relative;z-index:1}
.dco-dev .dvc{--dw:inherit;width:var(--dw)}
.dco-svg{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dco-svg path{fill:none;stroke:var(--lc);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dco-pt{position:absolute;z-index:6;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid var(--dc);background:color-mix(in srgb,var(--mt-night) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,#000 35%,transparent),0 0 10px color-mix(in srgb,var(--dc) 55%,transparent);pointer-events:none;font-size:0}
.dco-pt::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--dc)}
.dco.is-wide .dco-pt{scale:0;transition:scale .45s cubic-bezier(.34,1.56,.64,1) var(--pd,0ms)}
.dco.is-wide.is-on .dco-pt,.dco.is-done .dco-pt{scale:1}
/* labels */
.dco-list{list-style:none;margin:0;padding:0;counter-reset:dco;width:min(100%,560px);display:grid;gap:14px}
.dco-list li{counter-increment:dco;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start}
.dco-list li::before{content:counter(dco);grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:11.5px}
.dco-k{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:6px 11px 6px 9px;border-radius:8px;background:var(--mt-ink);color:var(--mt-bone);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}
.mt-dark .dco-k{background:var(--mt-pine);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent)}
.dco-k i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass);animation:mtLed 2.4s ease-in-out infinite}
.dco-k .mt-soon{margin-left:2px;font-size:8.5px;padding:1px 6px}
.dco-d{display:block;margin:0;font-size:14.5px;line-height:1.45;color:var(--mt-mut)}
/* narrow: numbered dots on the screen */
.dco:not(.is-wide) .dco-pt{width:20px;height:20px;margin:-10px 0 0 -10px;border:0;background:var(--mt-brass);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4);font:600 10.5px/20px var(--mt-font-m),ui-monospace,monospace;color:var(--mt-ink);text-align:center}
.dco:not(.is-wide) .dco-pt::after{display:none}
.dco:not(.is-wide) .dco-pt::before{content:attr(data-n)}
/* wide: labels placed by the script beside the phone */
.dco.is-wide{display:block;min-height:0}
.dco.is-wide .dco-dev{display:flex;justify-content:center}
.dco.is-wide .dco-list{position:absolute;inset:0;width:auto;display:block;z-index:3;pointer-events:none}
.dco.is-wide .dco-list li{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:var(--lw,250px);pointer-events:auto}
.dco.is-wide .dco-list li::before{display:none}
.dco.is-wide .dco-list li.is-l{align-items:flex-end;text-align:right}
.dco.is-wide .dco-list li{opacity:0;translate:0 10px;transition:opacity .7s ease var(--ld,0ms),translate .8s cubic-bezier(.2,.8,.2,1) var(--ld,0ms)}
.dco.is-wide.is-on .dco-list li,.dco.is-done .dco-list li{opacity:1;translate:0 0}
.dco.is-wide .dco-svg path{transition:stroke-dashoffset .95s cubic-bezier(.2,.8,.2,1) var(--pd,0ms)}
.dco.is-wide .dco-d{font-size:14px;max-width:32ch}
@media (prefers-reduced-motion:reduce){.dvc[data-tilt] .dvc-tilt,.dvc::after{transition:none;transform:none;translate:none} .js .dvc[data-in]:not(.is-on){opacity:1;translate:none}}

/* the road behind a HUD screenshot (a loop, or the illustrated road /assets/art/road-night.svg): dimmed a little, with
   a soft shade at the top and bottom where the readouts sit, so they stay readable over a bright sky (in the app,
   dark pills do this over bright patches) */
.dvc-bg{z-index:0}
.dvc.has-road .dvc-bg{filter:brightness(.78) saturate(1.04)}
.dvc.has-road .dvc-view::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.66) 0,rgba(0,0,0,.34) 15%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.72) 100%)}
.dvc.is-land.has-road .dvc-view::before{background:linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.3) 16%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 58%,rgba(0,0,0,.36) 74%,rgba(0,0,0,.72) 100%),linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 16%,rgba(0,0,0,0) 84%,rgba(0,0,0,.4))}
.dvc-img{z-index:2}
@media (max-width:759px){.dco{--dw:min(84vw,400px)}}
.js .dco:not(.is-on) .dco-dev{opacity:0}
.dco-dev{transition:opacity 1s cubic-bezier(.2,.8,.2,1)}
/* inside a callout diagram the phones only fade (the lines are measured from where they stand) */
.js .dco .dvc[data-in]:not(.is-on){translate:none}
.dco .dvc[data-in]{transition:opacity .9s ease}

/* ---- 02d-stores.css ---- */
/* Store badges (dst, dst-b): Apple's "Download on the App Store" and Google's "Get it on Google Play" artwork exactly
   as supplied (src/assets/stores/): never recoloured, reshaped, animated, put inside our buttons or re-typed.
     <div class="dst">
       <span class="dst-b is-soon" data-store="ios"><img src="/assets/stores/appstore-black.svg" alt="Download on the App Store" width="120" height="40" decoding="async"><em class="mt-soon dst-soon">Coming soon</em></span>
       <span class="dst-b is-soon" data-store="android"><img src="/assets/stores/googleplay-badge.png" alt="Get it on Google Play" width="564" height="168" decoding="async"><em class="mt-soon dst-soon">Coming soon</em></span>
     </div>
   Both show at the same visible height, --bh: 56px, 42px on narrow phones. googleplay-badge.png is Google's
   googleplay.png (646 x 250, its clear space built in) cropped pixel for pixel to the badge itself (564 x 168 from
   41,41), so it needs no clipping box; 168 px / 3 = 56 and / 4 = 42 keep it a clean downscale (188 x 56, 141 x 42).
   The App Store badge is vector (119.66 x 40, so 167.5 x 56). Clear space: at least a quarter of --bh around each
   badge (the gaps below are a half between badges and 0.3 above the tag). On a light background use
   appstore-white.svg; the Google Play badge is the same on every background.
   While a store has no URL (js/02b-stores.js) the badge is a plain image, not a link, a little dimmed, with a
   "Coming soon" tag under it; with a URL the script makes it a link at full opacity and removes the tag. */
.dst{--bh:56px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:calc(var(--bh) * .4) calc(var(--bh) * .5)}
.dst-b{display:inline-flex;flex-direction:column;align-items:flex-start;gap:calc(var(--bh) * .3);color:inherit;text-decoration:none;border-radius:calc(var(--bh) * .2)}
.dst-b img{display:block;flex:none;width:auto;height:var(--bh);max-width:none}
.dst-b.is-soon{cursor:default}
.dst-b.is-soon img{opacity:.55}
.dst-b .dst-soon{margin:0;vertical-align:baseline}
a.dst-b .dst-soon{display:none}
a.dst-b:focus-visible{outline-offset:4px!important}
@media (max-width:439px){.dst{--bh:42px}}

/* ---- 03-hero.css ---- */
/* Hero (mth): the front camera at night. A perspective road with moving lane dashes, a recording HUD framing the
   scene, the headline with a split-flap accent, and three live cards. 03-hero.js adds .is-in once the loader has
   opened and drives --px/--py (pointer depth) and --ex (scroll) for a gentle parallax. */
.mth{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100svh;padding:150px 0;overflow:hidden;background:var(--mt-night);color:var(--mt-cloud);--px:0;--py:0;--ex:0}
.mth::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--mt-night) 0%,transparent 22%,transparent 70%,var(--mt-night) 100%);pointer-events:none}
/* the road */
.mth-road{position:absolute;inset:-40px -40px -90px;overflow:hidden;translate:calc(var(--px)*-18px) calc(var(--py)*-12px + var(--ex)*70px)}
/* real footage behind the hero, shown as filmed: no blur, no dimming, no vignette (owner, Sep 28, 2026). The HUD and
   headline carry their own text shadows. The drawn lane and sky step aside while it is there (the poster shows for
   reduced motion and data saver). */
.mth-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mth-road.has-footage .mth-sky,.mth-road.has-footage .mth-lane{display:none}
.mth-sky{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 108%,#2b2410 0%,transparent 55%),radial-gradient(80% 50% at 50% 38%,#151821 0%,var(--mt-night) 70%)}
.mth-lane{position:absolute;left:-50%;right:-50%;bottom:-8%;height:70%;transform-origin:50% 100%;transform:perspective(520px) rotateX(64deg);background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.05) 30.2%,transparent 30.6%,transparent 69.4%,rgba(255,255,255,.05) 69.8%,transparent 70%),repeating-linear-gradient(0deg,transparent 0 40px,rgba(255,255,255,.025) 40px 41px)}
.mth-lane{container-type:size}
.mth-lane i{position:absolute;top:-12%;left:calc(50% - 7px);will-change:translate;width:14px;height:90px;border-radius:3px;background:linear-gradient(color-mix(in srgb,var(--mt-brass) 70%,#fff),var(--mt-brass));box-shadow:0 0 18px rgba(255, 255, 6,.5);opacity:.85;animation:mthLane 2.4s linear infinite}
.mth-lane i:nth-child(2){animation-delay:-.4s}
.mth-lane i:nth-child(3){animation-delay:-.8s}
.mth-lane i:nth-child(4){animation-delay:-1.2s}
.mth-lane i:nth-child(5){animation-delay:-1.6s}
.mth-lane i:nth-child(6){animation-delay:-2s}
@keyframes mthLane{from{translate:0 0}to{translate:0 112cqh}}
.mth-glow{position:absolute;left:50%;bottom:-30%;width:120%;height:70%;translate:-50% 0;background:radial-gradient(closest-side,rgba(255,214,120,.16),transparent);filter:blur(10px)}
/* the recording HUD */
.mth-hud{position:absolute;inset:96px 32px 34px;z-index:1;pointer-events:none;color:var(--mt-cloud);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.mth-hud-c{position:absolute;width:38px;height:38px;border:2px solid rgba(255,255,255,.55)}
.mth-hud-c.tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.mth-hud-c.tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.mth-hud-c.bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 10px}
.mth-hud-c.br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
.mth-hud-top{position:absolute;top:16px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;letter-spacing:.1em}
.mth-rec{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;background:rgba(239,68,68,.92);font-size:11px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.mth-rec i{width:7px;height:7px;border-radius:50%;background:#fff;animation:mthPulse2 1.2s infinite}
.mth-clock{white-space:nowrap}
/* top row like the app: REC with the resolution and the clip timer; the time over the date, signal and Wi-Fi */
.mth-recrow{display:inline-flex;align-items:center;gap:10px}
/* fixed slots, as in the apps: the camera tag joined to the chip, the timer as wide as 59:59, then the mic */
.mth-clip{display:inline-block;width:calc(5ch + .4em);font-size:12px;letter-spacing:.08em;opacity:.8;white-space:nowrap}
.mth-cam{display:inline-flex;align-items:center;height:24px;margin-left:-16px;padding:0 10px 0 14px;border:1.5px solid rgba(239,68,68,.92);border-radius:0 6px 6px 0;background:rgba(14,15,18,.85);font-size:10.5px;font-weight:700;letter-spacing:.08em;box-sizing:border-box}
.mth-rec{position:relative;z-index:1;height:24px;box-sizing:border-box}
.mth-mic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* the status row: equal columns, each an icon beside its value in a fixed slot, centred under the top row */
.mth-status{position:absolute;top:66px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,calc(6ch + 60px));font-size:13px;font-weight:700;letter-spacing:.06em}
.mth-st{justify-self:center;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.mth-st svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mth-st.on svg,.mth-st.cool{color:#30D158}
.mth-st b{display:inline-flex;align-items:center;gap:4px;width:calc(6ch + .4em);font-weight:700}
.mth-st:nth-child(-n+3) b{width:calc(4ch + .3em)}
.mth-st b i{width:6px;height:6px;border-radius:50%;background:#30D158}
.mth-time{display:grid;justify-items:end;gap:3px}
.mth-time .mth-clock{font-size:20px;font-weight:600;letter-spacing:.04em}
.mth-date{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;opacity:.85}
.mth-sig{display:inline-flex;align-items:center;gap:5px}
.mth-bars{width:15px;height:10px;fill:currentColor}
.mth-sig em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em}
.mth-wifi{width:15px;height:11px;margin-left:3px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mth-wifi path{fill:none}
/* the app's buttons down the sides: POLICE and REPORT on the left, the rest on the right */
.mth-rail{position:absolute;display:grid;gap:14px;justify-items:center}
.mth-rail.l{left:18px;top:31%}
.mth-rail.r{right:14px;top:14%;gap:8px}
/* the side buttons only where the floating cards leave room */
@media (max-width:1279.98px),(max-height:780px){.mth-rail.r{display:none}}
@media (max-height:680px){.mth-rail.l{display:none}}
.mth-rb{display:grid;justify-items:center;gap:5px}
.mth-rb b{font-size:10px;font-weight:600;letter-spacing:.12em}
.mth-rail.r .mth-rb b{color:var(--mt-brass);font-size:9.5px;letter-spacing:.08em;font-weight:700}
.mth-bar{position:relative;display:flex;gap:3px;padding:3px;border-radius:7px;background:#101114;box-shadow:0 2px 0 #000}
.mth-bar i{width:24px;height:14px;border-radius:5px;background:#e5484d;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.mth-bar i+i{background:#2f6bff}
.mth-rail .is-police .mth-bar i{animation:mthLight 1.6s steps(1) infinite}
.mth-rail .is-police .mth-bar i+i{animation-delay:.8s}
@keyframes mthLight{50%{filter:brightness(.55)}}
.mth-rb.is-report svg{width:36px;height:33px}
.mth-rc{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mt-brass);color:#101114;box-shadow:0 0 0 1.5px #101114,0 4px 12px rgba(0,0,0,.45)}
.mth-rc .ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* metric visitors: km/h and the round sign */
.mth-lim.is-round{width:34px;height:34px;padding:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #e5484d,0 0 0 1.5px #fff;display:inline-grid;place-items:center}
.mth-lim.is-round b{display:none}
.mth-lim.is-round em{font-size:14px}
.mth-hud-bottom{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.mth-speed{display:flex;align-items:flex-end;gap:8px;color:var(--mt-brass)}
.mth-speed .mt-seg-d path.on{filter:drop-shadow(0 0 6px color-mix(in srgb,currentColor 45%,transparent))}
.mth-speed small{font-size:12px;letter-spacing:.14em;color:var(--mt-cloud)}
.mth-g{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em}
.mth-g b{display:block;font-size:15px;font-weight:500;letter-spacing:0}
.mth-gm{position:relative;width:38px;height:38px;flex:none;border:1.5px solid rgba(255,255,255,.7);border-radius:50%}
.mth-gm::before,.mth-gm::after{content:"";position:absolute;background:rgba(255,255,255,.3)}
.mth-gm::before{left:50%;top:4px;bottom:4px;width:1px}
.mth-gm::after{top:50%;left:4px;right:4px;height:1px}
.mth-gm i{position:absolute;left:50%;top:50%;z-index:1;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass);animation:mthGdot 5s ease-in-out infinite}
@keyframes mthGdot{0%,100%{transform:translate(0,0)}25%{transform:translate(-7px,-4px)}50%{transform:translate(5px,7px)}75%{transform:translate(8px,-3px)}}
@keyframes mthPulse2{50%{opacity:.35}}
.mth-gps{text-align:right;font-size:13px}
.mth-gps small{display:block;margin-top:3px;font-size:11px;letter-spacing:.12em;opacity:.7}
/* headline, lede and calls to action */
.mth-in{position:relative;z-index:2;display:grid;justify-items:center;max-width:1168px;padding:0 24px;text-align:center;translate:0 calc(var(--ex)*-120px)}
.mth .mt-eb{margin-bottom:26px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);transition-delay:200ms}
.mth .mth-h{width:min(1120px,calc(100vw - 48px));justify-self:center;font-size:clamp(40px,6vw,92px);line-height:.98;letter-spacing:-.045em;color:var(--mt-cloud)}
.mth .mth-h .mt-flap{margin-top:.08em}
.mth .mth-flap2{margin-left:.22em}
.mth-sub{max-width:620px;margin:28px auto 34px;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:rgba(255,255,255,.74)}
/* the footage is shown undimmed, so the words carry their own shade (like the app's HUD text) */
.mth-road.has-footage~.mth-in .mth-sub{color:rgba(255,255,255,.93);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.75),0 0 32px rgba(0,0,0,.55)}
.mth-road.has-footage~.mth-in .mth-h{text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 38px rgba(0,0,0,.5)}
.mth-road.has-footage~.mth-in .mth-h .mt-flap{text-shadow:none}
.mth-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
/* live cards */
.mth-float{position:absolute;z-index:2;display:grid;gap:4px;width:250px;padding:14px 16px;border-radius:14px;color:var(--mt-cloud);background:rgba(20,20,22,.72);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(0,0,0,.4);transform:translate(calc(var(--px)*var(--d,1)*18px),calc(var(--py)*var(--d,1)*12px + var(--ex)*var(--d,1)*-60px))}
.mth-float b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:22px;line-height:1.2;letter-spacing:-.01em}
.mth-float b.mth-mono{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:26px;letter-spacing:0;color:var(--mt-brass);font-variant-numeric:tabular-nums}
.mth-float small{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62)}
.mth-fk{display:inline-flex;align-items:center;gap:8px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.mth-fk i{width:7px;height:7px;border-radius:50%;background:var(--mt-brass)}
.mth-fk i.red{background:#ef4444;box-shadow:0 0 8px #ef4444;animation:mthPulse2 1s infinite}
.mth-f1{left:max(24px,calc(50% - 640px));bottom:160px}
/* the right-hand cards stack just below the headline so they never cross it */
.mth-rcol{position:absolute;z-index:2;right:max(24px,calc(50% - 650px));top:calc(50% + 48px);display:grid;gap:16px;justify-items:end}
.mth-rcol .mth-float{position:relative}
.mth-f3{display:flex;align-items:center;gap:14px}
.mth-f3>span{display:grid;gap:2px}
.mth-ring{width:52px;height:52px;flex:none;rotate:-90deg}
.mth-ring circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5}
.mth-ring .v{stroke:var(--mt-brass);stroke-linecap:round;stroke-dasharray:75.8 113.1}
.js .mth-ring .v{stroke-dasharray:0 113.1;transition:stroke-dasharray 1.6s cubic-bezier(.7,0,.2,1) 1.6s}
.js .mth.is-in .mth-ring .v{stroke-dasharray:75.8 113.1}
/* entrance: waits for the loader to open, then rises in sequence (per-element delay in --dl) */
.mth-rv{opacity:0;translate:0 22px;transition:opacity .9s ease var(--dl,0ms),translate 1s cubic-bezier(.2,.8,.2,1) var(--dl,0ms)}
.mth-float.mth-rv{translate:0 40px}
.mth.is-in .mth-rv{opacity:1;translate:0 0}
.mth:not(.is-in) .mt-hd-w:not(.is-accw) .mt-hd-i{translate:0 108%}
.mth:not(.is-in) .mt-fl{transform:rotateX(-100deg);opacity:0}
.mth.is-in .mth-h .mt-hd-i{translate:0 0}
.mth.is-in .mth-h .mt-fl{transform:rotateX(0deg);opacity:1}
/* no script: everything shows; script present but stalled: everything shows after 6 s */
html:not(.js) .mth .mth-rv,html:not(.js) .mth .mt-eb{opacity:1;translate:none}
html:not(.js) .mth .mt-hd-i{translate:none}
html:not(.js) .mth .mt-fl{transform:none;opacity:1}
.js .mth:not(.is-in) .mth-rv,.js .mth:not(.is-in) .mt-eb,.js .mth:not(.is-in) .mt-hd-i{animation:mthFs .01s linear 6s forwards}
.js .mth:not(.is-in) .mt-fl{animation:mthFsF .01s linear 6s forwards}
@keyframes mthFs{to{opacity:1;translate:0 0}}
@keyframes mthFsF{to{transform:rotateX(0);opacity:1}}
/* tablet and small laptop: the Guard card steps out, the other two sit above the HUD's bottom row */
@media (max-width:1279.98px){
  .mth{padding-bottom:260px}
  .mth-f2{display:none}
  .mth-f1{bottom:124px}
  .mth-rcol{top:auto;bottom:124px}
}
/* phone */
@media (max-width:809.98px){
  .mth{padding:150px 0 150px}
  .mth-hud{inset:84px 12px 16px}
  .mth-hud-top{left:14px;right:14px;font-size:11px}
  .mth-hud-bottom{left:14px;right:14px}
  .mth-gps,.mth-g,.mth-rail,.mth-clip,.mth-cam,.mth-mic,.mth-status{display:none}
  .mth-time .mth-clock{font-size:15px}
  .mth-speed .mt-seg{--s:40px!important}
  .mth-float,.mth-rcol{display:none}
  .mth-in{padding:0 20px}
  .mth .mth-h{font-size:clamp(38px,11vw,64px)}
  .mth .mth-h .mt-flap{font-size:.8em}
  .mth-sub{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .mth-lane i,.mth-gm i,.mth-rec i,.mth-fk i.red,.mth-rail .is-police .mth-bar i{animation:none}
  .mth-lane i:nth-child(1){top:4%} .mth-lane i:nth-child(2){top:21%} .mth-lane i:nth-child(3){top:38%}
  .mth-lane i:nth-child(4){top:55%} .mth-lane i:nth-child(5){top:72%} .mth-lane i:nth-child(6){top:89%}
  .mth-road,.mth-in,.mth-float{translate:none;transform:none}
}
/* the app's speed-limit sign beside the speed, and the small print under the buttons */
.mth-lim{display:inline-grid;justify-items:center;align-self:center;margin-left:6px;padding:4px 5px 3px;border-radius:5px;background:#fff;color:#101114;box-shadow:inset 0 0 0 1.5px #101114,0 0 0 1.5px #fff;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;line-height:1}
.mth-lim b{font-size:6.5px;font-weight:800;letter-spacing:.02em;text-align:center}
.mth-lim em{font-style:normal;font-size:19px;font-weight:850;letter-spacing:-.03em;margin-top:1px}

/* ---- 04-ticker.css ---- */
/* 04 ticker: two rows of fact chips drifting in opposite directions; hover shows the value. */
.mtl{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(60px,6vw,90px) 0 clamp(70px,7vw,100px);overflow:hidden}
.mtl-l{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 30px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut);text-align:center;padding:0 20px}
.mtl-l i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtl-rows{display:flex;flex-direction:column;gap:12px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mtl-row{overflow:hidden}
.mtl-track{display:flex;gap:12px;width:max-content;will-change:transform}
.mtl-chip{position:relative;display:inline-grid;place-items:center;flex:none;height:78px;min-width:220px;padding:0 30px;border-radius:14px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 8%,transparent),0 3px 0 color-mix(in srgb,var(--mt-ink) 10%,transparent);overflow:hidden;cursor:default}
.mtl-n,.mtl-v{grid-area:1/1;white-space:nowrap;transition:translate .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.mtl-n{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:30px;letter-spacing:.02em;text-transform:uppercase;color:var(--mt-ink);-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 62%);mask-image:radial-gradient(circle,#000 58%,transparent 62%);-webkit-mask-size:4px 4px;mask-size:4px 4px}
.mtl-v{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:14px;letter-spacing:.04em;color:var(--mt-ink);translate:0 120%;opacity:0;padding:6px 10px;border-radius:7px;background:var(--mt-brass)}
.mtl-chip:hover .mtl-n,.mtl-chip.is-v .mtl-n{translate:0 -120%;opacity:0}
.mtl-chip:hover .mtl-v,.mtl-chip.is-v .mtl-v{translate:0 0;opacity:1}
/* entrance: label, then the rows */
.js .mtl-l{opacity:0;translate:0 12px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtl-rows{opacity:0;translate:0 20px;transition:opacity .9s ease 160ms,translate 1s cubic-bezier(.2,.8,.2,1) 160ms}
.js .mtl.is-on .mtl-l,.js .mtl.is-on .mtl-rows{opacity:1;translate:0 0}
@media (max-width:809px){
  .mtl-chip{height:62px;min-width:170px;padding:0 20px}
  .mtl-n{font-size:22px}
  .mtl-v{font-size:13px}
}
/* no drift for reduced motion: the chips wrap so every fact stays readable */
@media (prefers-reduced-motion:reduce){
  .mtl-rows{-webkit-mask-image:none;mask-image:none;padding:0 20px}
  .mtl-track{flex-wrap:wrap;justify-content:center;width:auto;transform:none!important}
}

/* ---- 05-product.css ---- */
/* 05 product: a pinned stage; the dashboard window zooms up to fill the screen as the page scrolls. */
.mtz{position:relative;height:300vh;background:var(--mt-bone);color:var(--mt-ink);--z:1;--zt:0}
.mtz-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(90px,12vh,130px)}
.mtz-bg{position:absolute;inset:0;background:var(--mt-night);opacity:calc(var(--zt)*1.4 - .2);pointer-events:none}
.mtz-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;opacity:calc(1 - var(--zt)*2.4);translate:0 calc(var(--zt)*-120px)}
.mtz-copy .mt-eb{margin-bottom:18px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtz-body{margin:20px auto 0;max-width:560px;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.js .mtz-body{opacity:0;translate:0 22px;transition:opacity .9s ease 400ms,translate 1s cubic-bezier(.2,.8,.2,1) 400ms}
.js .mtz.is-on .mtz-body{opacity:1;translate:0 0}
.mtz-win{position:relative;z-index:1;margin-top:clamp(34px,5vh,56px);width:min(1080px,84vw);translate:0 calc(var(--zt)*-22vh)}
.mtz-frame{position:relative;border-radius:calc(18px - var(--zt)*18px);overflow:hidden;background:var(--mt-night);box-shadow:0 50px 100px -40px color-mix(in srgb,var(--mt-ink) 60%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent);transform:scale(var(--z));transform-origin:50% 42%;will-change:transform}
.mtz-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:color-mix(in srgb,var(--mt-pine) 85%,#000);opacity:calc(1 - var(--zt)*3)}
.mtz-bar i{width:10px;height:10px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 18%,transparent)}
.mtz-bar i:first-child{background:var(--mt-brass)}
.mtz-bar span{margin:0 auto;padding:3px 14px;border-radius:6px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtz-scr{aspect-ratio:16/8.6}
.mtz-note{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;margin:0;padding:9px 13px;border-radius:10px;background:var(--mt-cloud);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;line-height:1.3;box-shadow:0 18px 40px -16px color-mix(in srgb,var(--mt-ink) 45%,transparent);white-space:nowrap;opacity:0;scale:.8;transition:opacity .5s,scale .6s cubic-bezier(.34,1.56,.64,1)}
.mtz-note i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mt-brass)}
.mtz.is-on .mtz-note{opacity:calc(1 - var(--zt)*3);scale:1}
.mtz-note.n0{left:-4%;top:18%;transition-delay:.5s}
.mtz-note.n1{right:-5%;top:44%;transition-delay:.7s}
.mtz-note.n2{left:6%;bottom:-5%;transition-delay:.9s}

/* the dashboard inside the window */
.mtz .mt-scr{line-height:1.35}
.mtz .mt-scr-side span,.mtz .mt-scr-top span,.mtz .mt-scr-kpi span,.mtz .mt-scr-kpi em,.mtz .mt-scr-rows p,.mtz-cl,.mtz-cv{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtz .mt-scr-top b,.mtz .mt-scr-kpi b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw)}
.mtz .mt-scr-top span{white-space:nowrap}
.mtz-clk{font-variant-numeric:tabular-nums}
.mtz-ic{display:inline-flex;align-items:center;gap:5px}
.mtz-ic svg{flex:none}
.mtz .mt-scr-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.mtz .mt-scr-kpi b{white-space:nowrap}
.mtz .mt-scr-kpi em:not([class]){color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mtz .mt-scr-kpi em.mtz-lk{color:var(--mt-brass)}
.mtz .mt-scr-chart{padding-top:28px;min-height:0}
.mtz-cl,.mtz-cv{position:absolute;top:10px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.mtz-cl{left:12px;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mtz-cv{right:12px;color:var(--mt-brass)}
.mtz-cd{position:absolute;left:calc(100% - 12px);top:calc(28px + (100% - 38px)*.342);width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--mt-brass) 25%,transparent);opacity:0;scale:.4;transition:opacity .4s ease 1.5s,scale .6s cubic-bezier(.34,1.56,.64,1) 1.5s}
.js .mtz .mt-spk{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.6,0,.2,1) .2s}
.mtz.is-on .mt-spk{clip-path:inset(0 0 0 0)}
.mtz.is-on .mtz-cd,:root:not(.js) .mtz-cd{opacity:1;scale:1}
.mtz .mt-scr-rows i{background:#ef4444;box-shadow:0 0 6px #ef4444;animation:mtzRec 1.8s ease-in-out infinite}
.mtz .mt-scr-rows span{font-size:10px}
@keyframes mtzRec{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:1000px){.mtz-ic{display:none}}

/* still version: reduced motion (the stage simply scrolls) */
.mtz.is-still{height:auto}
.mtz.is-still .mtz-stage{position:relative;height:auto;padding-bottom:100px}
@media (prefers-reduced-motion:reduce){
  .mtz{height:auto}
  .mtz-stage{position:relative;height:auto;padding-bottom:100px}
}

/* phone */
@media (max-width:809px){
  .mtz{height:190vh}
  .mtz-stage{justify-content:center;padding-top:0}
  .mtz .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtz-body{font-size:15px;line-height:1.5;margin-top:16px}
  .mtz-copy{translate:0 calc(var(--zt)*-40px)}
  .mtz-win{width:88vw;margin-top:28px;translate:none}
  .mtz-frame{transform-origin:50% 50%}
  .mtz-scr{aspect-ratio:4/3.6}
  .mtz-note{display:none}
  .mtz-wx{display:none}
  .mtz .mt-scr-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtz.is-still{height:auto}
}
@media (max-width:809px) and (prefers-reduced-motion:reduce){.mtz{height:auto}}
@media (max-width:380px){.mtz-bar span{padding:3px 8px;font-size:10px}}
/* the phone stage inside the zooming frame */
.mtz-scr>.dps{height:100%}
.mtz-scr .dps{--gap:clamp(18px,4%,56px)}

/* two free-standing iPhones (no backdrop): upright on the left, sideways on the right. The frame is only a
   transparent box the scroll scales; the phones grow to about 86% of the viewport height, not to fill it. */
.mtz-win{width:min(1180px,92vw);translate:0 calc(var(--zt)*-38vh)}
.mtz-frame{background:none;box-shadow:none;border-radius:0;overflow:visible;transform-origin:50% 45%}
.mtz-scr.mtz-ph{aspect-ratio:auto;display:flex;align-items:center;justify-content:center;gap:clamp(28px,4.5vw,72px);padding:8px 0 40px}
.mtz-p{--dw:clamp(200px,18.5vw,300px)}
.mtz-l{--dw:clamp(380px,43vw,660px)}
.mtz-note.n0{left:2%;top:34%}
.mtz-note.n1{right:-1%;top:6%}
.mtz-note.n2{left:50%;bottom:-2%;translate:-50% 0}
.mtz-bg{background:#050506}
@media (max-width:809px){
  .mtz,.mtz.is-still{height:auto}
  .mtz-stage{position:relative;height:auto;padding:88px 0 56px}
  .mtz-win{width:92vw;margin-top:32px;translate:none}
  .mtz-frame{transform:none}
  .mtz-scr.mtz-ph{flex-direction:column;gap:34px;padding-bottom:10px}
  .mtz-p{--dw:min(58vw,260px)}
  .mtz-l{--dw:min(90vw,560px)}
  .mtz-bg{opacity:0}
}

/* ---- 06-features.css ---- */
/* 06 features: five module cards pin and stack as the page scrolls; the card underneath settles back
   (scale, lift, shade) while the next one slides over it. Each card carries a live dashboard screen. */
.mts{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(90px,10vw,150px) 0 clamp(90px,10vw,140px)}
.mts-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(40px,5vw,70px)}
.mts-head .mt-eb{margin-bottom:18px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mts-side{max-width:380px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.mts-side p{margin:0;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.js .mts-side{opacity:0;translate:0 22px;transition:opacity .9s ease 360ms,translate 1s cubic-bezier(.2,.8,.2,1) 360ms}
.js .mts.is-on .mts-side{opacity:1;translate:0 0}
.mts-list{display:flex;flex-direction:column;gap:clamp(40px,6vh,80px)}
.mts-card{position:sticky;top:calc(110px + var(--i,0)*22px);z-index:calc(var(--i,0) + 1);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3vw,48px);align-items:stretch;min-height:min(620px,78vh);padding:clamp(22px,2.4vw,36px);border-radius:28px;--k:0;transform-origin:50% 0;transform:scale(calc(1 - var(--k)*.06)) translateY(calc(var(--k)*-14px));box-shadow:0 -20px 60px -20px rgba(0,0,0,.5),inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);will-change:transform}
.mts-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:calc(var(--k)*.5);pointer-events:none;z-index:3}
.mts-card.t0{background:var(--mt-pine);color:var(--mt-cloud)}
.mts-card.t1{background:var(--mt-brass);color:var(--mt-ink)}
.mts-card.t2{background:var(--mt-bone);color:var(--mt-ink)}
.mts-card.t3{background:var(--mt-cloud);color:var(--mt-ink)}
.mts-card.t1 .mts-short,.mts-card.t2 .mts-short,.mts-card.t3 .mts-short{color:color-mix(in srgb,var(--mt-ink) 80%,transparent)}
.mts-card.t1 .mts-detail,.mts-card.t2 .mts-detail,.mts-card.t3 .mts-detail{color:color-mix(in srgb,var(--mt-ink) 76%,transparent)}
.mts-txt{display:flex;flex-direction:column;align-items:flex-start;padding:10px 4px}
.mts-tag{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;width:100%;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mts-tag span{display:grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border-radius:6px;color:inherit;background:color-mix(in srgb,currentColor 14%,transparent)}
.mts-st{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.1em;opacity:.78}
.mts-st::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px color-mix(in srgb,#22c55e 25%,transparent)}
.mts-st.is-b::before{background:var(--mt-brass);box-shadow:0 0 0 2px color-mix(in srgb,var(--mt-brass) 25%,transparent)}
.mts-card.t1 .mts-st::before{background:#15803d;box-shadow:none}
.mts-txt h3{margin:auto 0 0;padding-top:40px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(34px,3.6vw,58px);letter-spacing:-.045em;line-height:1}
.mts-short{margin:18px 0 0;max-width:440px;font-size:18px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 86%,transparent)}
.mts-detail{margin:12px 0 0;max-width:440px;font-size:15px;line-height:1.55;color:var(--mt-mut)}
.mts-met{display:flex;align-items:flex-end;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);width:100%}
.mts-met .mt-seg{color:inherit;flex:none}
.mts-card.t0 .mts-met .mt-seg{color:var(--mt-brass)}
.mts-met span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-bottom:4px;opacity:.75}
.mts-met>span:not(.mt-seg){font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mts-scr{position:relative;border-radius:18px;overflow:hidden;background:var(--mt-night);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);min-height:360px}
.mts-scr::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 8%,transparent);pointer-events:none}
.mts-scr>.mt-scr{position:absolute;inset:0}


/* still version: reduced motion (cards simply scroll) */
.mts.is-still .mts-card{position:relative;top:auto!important;transform:none}
.mts.is-still .mts-card::after{display:none}
@media (prefers-reduced-motion:reduce){
  .mts .mts-card{position:relative;top:auto;transform:none}
  .mts .mts-card::after{display:none}
}

@media (max-width:809px){
  .mts-head{flex-direction:column;align-items:flex-start}
  .mts .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mts-card{top:calc(80px + var(--i,0)*12px);grid-template-columns:1fr;min-height:0;padding:18px;border-radius:22px}
  .mts-txt h3{padding-top:22px}
  .mts-scr{min-height:0;height:360px}
  .mts-detail{display:none}
  .mts-short{font-size:17px;margin-top:14px}
  .mts-met{margin-top:20px;padding-top:16px}
  .mts-met .mt-seg{--s:30px!important}
}
/* the phone stage inside a card */
.mts-scr>.dps{position:absolute;inset:0;height:auto}
.mts-card.t2 .mts-scr,.mts-card.t3 .mts-scr{box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
@media (max-width:809px){.mts-scr{height:420px}}

/* police stop: where the footage goes, two columns of small rows with a status on each */
.mts-dest{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;width:100%}
.mts-dest li{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center}
.mts-di{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--mt-ink);color:var(--mt-brass);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent),0 3px 8px -3px rgba(0,0,0,.45)}
.mts-di .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mts-di.is-logo{background:#fff}
.mts-di.is-logo img{width:19px;height:19px;display:block}
.mts-dest b{font-size:13.5px;line-height:1.25;font-weight:600}
.mts-dest em{font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.mts-dest em.is-soon{opacity:1;color:color-mix(in srgb,currentColor 62%,transparent)}
.mts-dest em.is-soon::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;opacity:.55;vertical-align:1px}
@media (max-width:809px){.mts-dest{grid-template-columns:1fr;gap:9px}}
/* the phone in a card: the device mockup (css/02c-device.css) sized by the stage's height */
.dps .dvc{width:auto;height:88%;max-height:100%}
.dps .dvc.is-side{height:74%}
@media (max-width:700px){.dps .dvc.is-side{display:none}}

/* ---- 06b-roadcabin.css ---- */
/* 06b · Road + cabin (mtrc): the Dash cam's front and rear at once (Pro) for rideshare and delivery drivers, shown with
   an original 3D cutaway (rcd, scratchpad scenes/work/cutaway.py) and the magnetic gooseneck mount (rcm, gmount.py).
   Used on the home page, /app/ (tour), /app/dash-cam/ and /setup/.
   rcd: an image with pins; on wide screens each list item sits over the image as a label with a thin line drawn to
   its pin (inline SVG, % coordinates; each line ends under its label, so it meets the label at any label height).
   Top labels hang from --ly, bottom ones (.is-b) stand on --lb. Hollow rings (.is-alt) mark the other good spots, with
   short tags (.rcd-alt); .rcd-note is a label with no pin. On narrow screens the square image carries numbered pins
   and the rings, and the list, the note and the tags follow below. No script. rcm: an image with arcs (SVG) and tags. */
.mtrc{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(80px,9vw,140px) 0 clamp(70px,8vw,120px);overflow:hidden}
.mtrc-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.mtrc-head .mt-hd{margin:0}
.mtrc-lede{margin:0;font-size:18px;line-height:1.55;color:color-mix(in srgb,var(--mt-cloud) 84%,transparent);max-width:560px}
.mtrc-lede b{color:var(--mt-cloud);font-weight:600}
.mtrc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.mtrc-chips li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 86%,transparent)}
.mtrc-chips li i{width:7px;height:7px;flex:none;border-radius:50%;background:#22c55e}
.mtrc-chips li.is-pro i{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.rc-pro{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:9.5px;font-style:normal;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;vertical-align:.18em}

/* the cutaway with callouts */
.rcd{position:relative;margin:0;isolation:isolate}
.rcd-art{position:relative;border-radius:22px;overflow:hidden;background:#07080a;box-shadow:0 40px 90px -50px rgba(0,0,0,.9),inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.rcd-art picture,.rcd-img{display:block;width:100%;height:auto}
.rcd-ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.rcd-ln path{fill:none;stroke:color-mix(in srgb,var(--mt-cloud) 85%,transparent);stroke-width:1.4;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.rcd-ln path.is-alt{stroke:color-mix(in srgb,var(--mt-cloud) 70%,transparent);stroke-width:1.1;stroke-dasharray:2 3}
.rcd-pt{position:absolute;z-index:2;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid var(--mt-brass);background:color-mix(in srgb,var(--mt-night) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--mt-night) 45%,transparent)}
.rcd-pt::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--mt-brass)}
.rcd-pt b{display:none}
.rcd-ic{display:none;fill:none;stroke:var(--mt-ink);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.rcd-pt.is-alt{width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px dashed color-mix(in srgb,var(--mt-cloud) 90%,transparent);background:color-mix(in srgb,var(--mt-night) 35%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--mt-night) 40%,transparent)}
.rcd-pt.is-alt::after{display:none}
.rcd-list{list-style:none;margin:0;padding:0;counter-reset:rcd}
.rcd-list li{counter-increment:rcd}
.rcd-k{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:6px 11px 6px 9px;border-radius:8px;background:var(--mt-ink);color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.rcd-k i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.rcd-k .rc-pro{margin-left:2px;font-size:8.5px;padding:1px 6px;vertical-align:0}
.rcd-d{display:block;margin:6px 0 0;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
@media (min-width:900px){
  .rcd-list{position:absolute;inset:0;z-index:3;pointer-events:none}
  .rcd-list li,.rcd-note{position:absolute;left:calc(var(--lx) * 1%);top:calc(var(--ly) * 1%);width:min(260px,19%);pointer-events:auto;padding:8px 10px 9px;border-radius:12px;background:color-mix(in srgb,var(--mt-night) 90%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
  .rcd-list li.is-r{translate:-100% 0}
  .rcd-list li.is-b{top:auto;bottom:calc(var(--lb) * 1%)}
  .rcd-note{left:auto;right:2%;top:auto;bottom:3%;z-index:3;margin:0}
  .rcd-list .rcd-k,.rcd-note .rcd-k{background:transparent;box-shadow:none;padding:0}
  .rcd-list .rcd-d,.rcd-note .rcd-d{margin-top:5px;font-size:13px}
  .rcd-alt{position:absolute;inset:0;z-index:3;margin:0;padding:0;list-style:none;pointer-events:none}
  .rcd-alt li{position:absolute;left:calc(var(--tx) * 1%);top:calc(var(--ty) * 1%);translate:0 -50%;padding:4px 9px 4px 8px;border-radius:99px;background:color-mix(in srgb,var(--mt-night) 88%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 22%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--mt-cloud) 88%,transparent)}
  .js .rcd .rcd-list li,.js .rcd .rcd-pt,.js .rcd .rcd-ln,.js .rcd .rcd-note,.js .rcd .rcd-alt li{opacity:0;transition:opacity .7s ease calc(var(--i,0) * 90ms + 200ms)}
  .js .rcd.is-in .rcd-list li,.js .rcd.is-in .rcd-pt,.js .rcd.is-in .rcd-ln,.js .rcd.is-in .rcd-note,.js .rcd.is-in .rcd-alt li{opacity:1}
}
@media (min-width:900px) and (max-width:1199px){
  .rcd-list li,.rcd-note{width:min(230px,22%)}
  .rcd-list li{left:calc(var(--lxm,var(--lx)) * 1%)}
  .rcd-list li.is-w{width:min(260px,25%)}
  .rcd-list .rcd-d,.rcd-note .rcd-d{font-size:12px}
  .rcd-alt li{font-size:9px;padding:3px 7px}
}
@media (max-width:899px){
  .rcd-ln{display:none}
  .rcd-pt{left:calc(var(--mx) * 1%);top:calc(var(--my) * 1%);width:22px;height:22px;margin:-11px 0 0 -11px;border:0;background:var(--mt-brass);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4);display:grid;place-items:center}
  .rcd-pt::after{display:none}
  .rcd-pt b{display:block;font:600 11px/1 var(--mt-font-m),ui-monospace,Menlo,monospace;color:var(--mt-ink)}
  .rcd-list{display:grid;gap:14px;margin-top:22px}
  .rcd-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;align-items:start}
  .rcd-list li::before{content:counter(rcd);grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--mt-brass);color:var(--mt-ink);font:600 11px/1 var(--mt-font-m),ui-monospace,Menlo,monospace}
  .rcd-list .rcd-k{white-space:normal}
  .rcd-list .rcd-d{margin:0}
  .rcd-pt.is-alt{width:12px;height:12px;margin:-6px 0 0 -6px;border:1.5px dashed var(--mt-cloud);background:rgba(0,0,0,.35);box-shadow:0 0 0 2px rgba(0,0,0,.45);display:block}
  .rcd-note{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;margin:14px 0 0}
  .rcd-note .rcd-ic{display:block;grid-row:1/3;width:24px;height:24px;padding:4px;border-radius:7px;background:var(--mt-brass);box-sizing:border-box}
  .rcd-note .rcd-k{white-space:normal}
  .rcd-note .rcd-d{margin:0}
  .rcd-alt{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0 36px;padding:0;list-style:none}
  .rcd-alt li{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 8px;border-radius:99px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 18%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 86%,transparent)}
  .rcd-alt li::before{content:"";flex:none;width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:1.5px dashed var(--mt-cloud)}
}
.rcd-cap{margin:14px 0 0;font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mt-lt .rcd-cap,.rcd-cap.is-lt{color:var(--mt-mut)}
.rcd-cap a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.rcd-cap a:hover{color:var(--mt-brass)}

/* the section body under the cutaway: what the app shows, and the facts */
.mtrc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(50px,6vw,90px)}
.mtrc-dev{display:flex;justify-content:center;gap:clamp(14px,2vw,28px);align-items:flex-end}
.mtrc-dev .dvc{--dw:clamp(230px,24vw,330px)}
.mtrc-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.mtrc-pair figure{margin:0}
.mtrc-pair video,.mtrc-pair img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#000}
.mtrc-pair figcaption{margin-top:8px;font-family:var(--mt-font-m),ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.mtrc-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin:0}
.mtrc-facts div{border-top:1px solid color-mix(in srgb,var(--mt-cloud) 14%,transparent);padding-top:14px}
.mtrc-facts dt{font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:19px;letter-spacing:-.02em;color:var(--mt-cloud)}
.mtrc-facts dd{margin:6px 0 0;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtrc-facts a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.mtrc-facts a:hover{color:var(--mt-brass)}
.mtrc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.rc-tm{margin:clamp(34px,4vw,54px) 0 0;font-size:12px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 48%,transparent)}
.mt-lt .rc-tm,.rc-tm.is-lt{color:var(--mt-stone)}
@media (max-width:1099px){
  .mtrc-head,.mtrc-row{grid-template-columns:1fr}
  .mtrc-row{gap:36px}
}
@media (max-width:599px){
  .mtrc-facts{grid-template-columns:1fr}
  .mtrc-pair{grid-template-columns:1fr}
  .mtrc-dev .dvc{--dw:min(78vw,300px)}
}

/* the mount close-up with its adjustability arcs */
.rcm{position:relative;margin:0}
.rcm-art{position:relative;border-radius:20px;overflow:hidden;background:#07080a;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.rcm-art img{display:block;width:100%;height:auto}
.rcm-arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rcm-arcs path{fill:none;stroke:var(--mt-brass);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.rcm-arcs .hd{fill:var(--mt-brass);stroke:none}
.rcm-tag{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);translate:-50% -50%;padding:4px 9px;border-radius:99px;background:var(--mt-brass);color:var(--mt-ink);font:600 10.5px/1.3 var(--mt-font-m),ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.rcm-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;margin:16px 0 0;padding:0;list-style:none}
.rcm-legend li{font-size:14px;line-height:1.45;color:var(--mt-mut)}
.rcm-legend b{display:block;margin-bottom:2px;font-family:var(--mt-font-m),ui-monospace,Menlo,monospace;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:inherit}
.mt-dark .rcm-legend li{color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.mt-dark .rcm-legend b{color:var(--mt-cloud)}
.rcm-duo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.rcm-snap{margin:0}
.rcm-snap img{display:block;width:100%;height:auto;border-radius:20px;background:#07080a}
.rcm-snap figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--mt-mut)}
.mt-dark .rcm-snap figcaption{color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
@media (max-width:699px){
  .rcm-tag{font-size:9px;padding:3px 7px}
  .rcm-legend{grid-template-columns:1fr}
  .rcm-duo{grid-template-columns:1fr}
}

/* a mount block inside an existing page section (setup, dash cam) */
.rc-mount{margin-top:clamp(28px,4vw,48px)}
.rc-mount h3{margin:0 0 6px;font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.rc-mount>p{margin:0 0 18px;max-width:720px;font-size:16px;line-height:1.55;color:var(--mt-mut)}
.rc-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:22px 0 0;padding:0;list-style:none}
.rc-tips li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--mt-mut)}
.rc-tips li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--mt-brass) 22%,transparent)}
.rc-tips b{color:var(--mt-ink);font-weight:600}
.mt-dark .rc-tips li{color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mt-dark .rc-tips b{color:var(--mt-cloud)}
.rc-tips a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:699px){.rc-tips{grid-template-columns:1fr}}

/* the home steps: a photo in place of the drawing for the Mount step */
.mtw-img.rc-photo{object-fit:cover;object-position:50% 45%}

/* the Dash cam feature card: its road + cabin row spans both columns */
.mts-dest li.rc-wide{grid-column:1/-1;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,currentColor 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 14%,transparent)}
.mts-dest li.rc-wide em.rc-em{color:var(--mt-brass);opacity:1}

@media (prefers-reduced-motion:reduce){.js .rcd .rcd-list li,.js .rcd .rcd-pt,.js .rcd .rcd-ln,.js .rcd .rcd-note,.js .rcd .rcd-alt li{opacity:1;transition:none}}
.mts-detail a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.rc-meta{margin-top:18px}
.apa-opt p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.mtfq-a .mtfq-tm{font-size:12px;opacity:.7}

/* ---- 06c-appgauges.css ---- */
/* 06c · The app's Dashboard gauges and Stopwatch as SVG (/assets/app/gauges.js), shared by the home page's live
   phones (js/06c-livegauges.js) and the /demo/ app. Geist is the apps' own typeface (Geist Mono already comes with the
   site's fonts); the browser only fetches it where one of these drawings shows. */
@font-face{font-family:"Geist";src:url("/assets/demo/fonts/geist-variable.woff2") format("woff2"),url("/assets/demo/fonts/geist-variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
.dg{display:block;width:100%;height:100%;overflow:hidden;background:#000;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;pointer-events:none;user-select:none;-webkit-user-select:none}
.dg .dg-h{font-family:Geist,"Hanken Grotesk",system-ui,-apple-system,sans-serif;font-weight:900}
.dg .dg-b{font-family:Geist,"Hanken Grotesk",system-ui,-apple-system,sans-serif;font-weight:700}
.dg .dg-m{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}
.dg .dg-mb{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}

/* a phone frame (css/02b-phone.css) playing the app live: the drawing over the screenshot it replaces, which stays in
   the page for readers without JavaScript and for reduced motion */
.dph-live{position:absolute;inset:0;z-index:1;background:#000}
.dph.is-live .dph-scr>img{visibility:hidden}

/* ---- 07-signals.css ---- */
/* 07 · Sensors: live signal board (mtg). A light section that hangs over the one above on a slope that
   levels out as you scroll; the chart draws itself behind a scan line, pins alerts as the scan passes them,
   then keeps running live while it is on screen. */
.mtg{position:relative;z-index:12;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(150px,16vw,240px) 0 clamp(100px,11vw,160px);margin-top:-12vw;--sp:.5}
.mtg{clip-path:polygon(0 12vw,100% calc(12vw * min(1, var(--sp) * 2.2)),100% 100%,0 100%)}
.mtg.is-still{clip-path:polygon(0 12vw,100% 0,100% 100%,0 100%)}
.mtg-m{font-family:var(--mt-font-m,"Geist Mono"),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500)}
.mtg :where(button):focus-visible{outline:3px solid var(--mt-ink)!important;outline-offset:2px!important;box-shadow:0 0 0 2px var(--mt-bone)!important}

.mtg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.mtg-head .mt-eb{margin-bottom:18px}
.mtg-head>p{max-width:400px;margin:0;font-size:17px;line-height:1.6;color:var(--mt-mut)}
html.js .mtg .mtg-rv{opacity:0;translate:0 var(--y,22px);transition:opacity .9s ease var(--d,0ms),translate 1s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
html.js .mtg.is-on .mtg-rv{opacity:1;translate:0 0}
html:not(.js) .mtg .mt-eb{opacity:1;translate:0 0}

.mtg-board{margin-top:clamp(40px,5vw,70px);padding:clamp(18px,2vw,28px);border-radius:26px;background:var(--mt-cloud);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--mt-ink) 35%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 7%,transparent)}
.mtg-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mtg-leg button{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:0;border-radius:9px;background:var(--mt-bone);color:var(--mt-ink);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:opacity .3s,background .3s}
.mtg-leg button i{width:18px;height:3px;border-radius:2px}
.mtg-leg .k0 i{background:var(--mt-brass)}
.mtg-leg .k1 i{background:var(--mt-ink)}
.mtg-leg .k2 i{background:#E4572E}
.mtg-leg button.is-off{opacity:.45}
.mtg-leg button:hover{background:var(--mt-fog)}
.mtg-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtg-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:mtLed 1.6s ease-in-out infinite}

/* --dr: how far the chart has drawn (0..1), driven by scroll progress */
.mtg-chart{position:relative;margin-top:18px;height:clamp(260px,32vw,420px);--dr:min(1, max(0, (var(--sp) - .22) * 2.4))}
.mtg-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(-10% calc((1 - var(--dr)) * 100%) -10% 0)}
.mtg-chart .gl{stroke:var(--mt-fog);stroke-width:1;vector-effect:non-scaling-stroke}
.mtg-chart .ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:opacity .4s}
.mtg .ln.k0{stroke:var(--mt-brass);filter:drop-shadow(0 0 .6px rgba(20,20,22,.9)) drop-shadow(0 0 .6px rgba(20,20,22,.9))}
.mtg-leg .k0 i{box-shadow:inset 0 0 0 1px rgba(20,20,22,.55)}
.mtg .ln.k1{stroke:var(--mt-ink)}
.mtg .ln.k2{stroke:#E4572E}
.mtg .ln.is-off{opacity:.08}
.mtg-scan{position:absolute;top:-6px;bottom:-6px;left:calc(var(--dr) * 100%);width:2px;background:var(--mt-ink);opacity:calc(1 - var(--dr) * var(--dr));pointer-events:none}
.mtg-scan::after{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--mt-brass)}

/* pinned alerts; --tx keeps a pinned box inside the chart while its pointer stays on the point */
.mtg-al{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:10px;background:var(--mt-ink);color:var(--mt-cloud);font-size:12px;white-space:nowrap;translate:calc(-50% + var(--tx,0px)) -140%;transform-origin:calc(50% - var(--tx,0px)) 100%;opacity:0;scale:.6;pointer-events:none;transition:opacity .35s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.mtg-al i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--mt-brass) 30%,transparent)}
.mtg-al.a1 i{background:var(--mt-cloud);box-shadow:0 0 0 4px color-mix(in srgb,var(--mt-cloud) 22%,transparent)}
.mtg-al.a2 i{background:#E4572E;box-shadow:0 0 0 4px color-mix(in srgb,#E4572E 30%,transparent)}
.mtg-al::after{content:"";position:absolute;left:calc(50% - var(--tx,0px));bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;rotate:45deg;border-radius:2px}
.mtg-chart .mtg-al{opacity:clamp(0, (var(--dr) - var(--at)) * 20, 1);scale:clamp(.6, .6 + (var(--dr) - var(--at)) * 8, 1)}
.mtg.is-still .mtg-chart,.mtg.is-live .mtg-chart{--dr:1}
.mtg.is-live .mtg-chart .mtg-al{opacity:0;scale:.6}
.mtg.is-live .mtg-chart .mtg-al.is-pop{opacity:1;scale:1}

/* live heads: one dot per signal riding the newest sample at the right edge */
.mtg-tip{position:absolute;z-index:1;left:100%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c);opacity:0;transition:opacity .4s;pointer-events:none}
.mtg-tip::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);animation:mtgPing 1.8s cubic-bezier(.2,.8,.2,1) infinite}
.mtg-tip.k0{--c:var(--mt-brass)}
.mtg-tip.k1{--c:var(--mt-ink)}
.mtg-tip.k2{--c:#E4572E}
.mtg.is-live .mtg-tip{opacity:1}
@keyframes mtgPing{from{scale:1;opacity:.55}to{scale:3.2;opacity:0}}

.mtg.mtg .mtg-chart .mtg-al.is-off,.mtg.is-live .mtg-tip.is-off{opacity:0;scale:.6}

.mtg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--mt-fog)}
.mtg-stats div{margin:0}
.mtg-stats dt{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(28px,2.6vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1.15;white-space:nowrap}
.mtg-stats dd{margin:4px 0 0;font-size:13px;color:var(--mt-mut)}

@media (max-width:809.98px){
  .mtg{margin-top:-18vw;padding-top:clamp(120px,30vw,170px)}
  .mtg .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtg-head{flex-direction:column;align-items:flex-start;gap:24px}
  .mtg-leg button{padding:7px 10px;font-size:11px}
  .mtg-al{font-size:10.5px;padding:6px 9px;gap:7px}
  .mtg-al i{width:7px;height:7px}
  .mtg-stats{grid-template-columns:1fr 1fr;gap:18px 12px}
  .mtg-stats dd{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){ .mtg-tip::after{animation:none} }

/* what the numbers are for: three short cases under the chart */
.mtg-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,3vw,44px)}
.mtg-use{padding:clamp(20px,2vw,28px);border-radius:22px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 8%,transparent),0 24px 50px -34px color-mix(in srgb,var(--mt-ink) 40%,transparent)}
.mtg-uk{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtg-uk i{width:7px;height:7px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--mt-ink) 12%,transparent)}
.mtg-use h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.mtg-use p:last-child{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--mt-mut)}
.mtg-fine{margin:20px 0 0;font-size:12.5px;color:var(--mt-mut)}
@media (max-width:1000px){.mtg-uses{grid-template-columns:1fr}}

/* ---- 08-hardware.css ---- */
/* 08 · Works with (mti). A dark board with the Dashivo app card in the middle and the real integrations round it:
   "Works with today" on the upper arc, "Coming soon" (dimmer, dashed, with a pill) on the lower arc. Each node is a
   zero-size anchor at its ring point (--x/--y: the unit direction, --rx/--ry: the ring radii); its icon is centred on
   that point and its label sits on the side away from the card (data-lp="t": above, "b": below), so no line ever
   crosses a label. 08-hardware.js draws the lines in the board's pixel space and moves the highlight. Under 760px
   the board becomes a stacked list. */
.mti{position:relative;background:var(--mt-cloud);color:var(--mt-ink);padding:clamp(100px,11vw,170px) 0;overflow:hidden}
.mti-m{font-family:var(--mt-font-m,"Geist Mono"),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}
.mti .mt-hd{font-size:clamp(40px,3.6vw,60px)}
.mti p,.mti h3,.mti ul{margin:0}

.mti-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4vw,70px);align-items:center}
.mti-copy{position:relative;z-index:4;display:flex;flex-direction:column;align-items:flex-start}
.mti-copy .mt-eb{margin-bottom:18px}
.mti-lede{margin:22px 0 30px!important;max-width:440px;font-size:17px;line-height:1.6;color:var(--mt-mut)}
html.js .mti .mti-rv{opacity:0;translate:0 22px;transition:opacity .9s ease var(--d,0ms),translate 1s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
html.js .mti.is-on .mti-rv{opacity:1;translate:0 0}
html:not(.js) .mti .mt-eb{opacity:1;translate:0 0}

/* mounting positions: not integrations, just where people put the phone */
.mti-mount{margin-top:44px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--mt-ink) 12%,transparent);max-width:440px}
.mti-mh{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-ink)}
.mti-mount p{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--mt-mut)}
.mti-mount ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;padding:0;list-style:none}
.mti-mount li{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:12px;background:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 8%,transparent);line-height:1.2}
.mti-mount li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mti-mount li b{font-size:13.5px;font-weight:600}
.mti-mount li span span{font-size:12px;color:var(--mt-mut)}
.mti-mount .mti-ico{width:22px;height:22px}

.mti-ico{display:block;flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the board */
.mti-bay{--ic:58px;--rx:39.5%;--ry:34.5%;--line:color-mix(in srgb,var(--mt-cloud) 34%,transparent);--line-soon:color-mix(in srgb,var(--mt-cloud) 26%,transparent);
  position:relative;aspect-ratio:1.08/1;border-radius:28px;background:radial-gradient(70% 62% at 50% 50%,color-mix(in srgb,var(--mt-pine) 70%,var(--mt-night)),var(--mt-night));color:var(--mt-cloud);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 6%,transparent),0 40px 80px -40px color-mix(in srgb,var(--mt-ink) 70%,transparent)}
.mti-bay::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(color-mix(in srgb,var(--mt-cloud) 12%,transparent) 1px,transparent 1.3px);background-size:22px 22px;mask-image:radial-gradient(closest-side,#000 30%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);pointer-events:none}
.mti-cab{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.mti-l{fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round}
.mti-l.is-soon{stroke:var(--line-soon);stroke-linecap:butt}
.mti-pt{fill:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mti-pt.is-soon{fill:color-mix(in srgb,var(--mt-cloud) 38%,transparent)}
.mti-hg path{fill:none;stroke:var(--mt-brass);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.mti-hg .mti-hw{stroke:color-mix(in srgb,var(--mt-brass) 24%,transparent);stroke-width:8}
.mti-hg .mti-hc2{stroke-width:2.5}
.mti-hg.is-soon path{stroke-linecap:butt}
.mti-hg{transition:opacity .35s ease}
.mti-hg.is-off{opacity:0}
.mti-hg.is-rs path{transition:none}
.mti-hpt{fill:var(--mt-brass);transition:opacity .3s ease}
.mti-hg.is-off .mti-hpt{opacity:0}

/* the app card in the middle */
.mti-hub{position:absolute;left:50%;top:50%;z-index:3;translate:-50% -50%;width:clamp(226px,34%,284px);border-radius:20px;color:var(--mt-cloud);
  background:linear-gradient(160deg,color-mix(in srgb,var(--mt-pine) 88%,#fff),var(--mt-pine) 55%,color-mix(in srgb,var(--mt-pine) 80%,#000));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent),0 30px 60px -22px #000,0 3px 0 #000}
.mti-hi{padding:15px 18px 16px}
.mti-hl{display:flex;align-items:center;gap:9px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.mti-logo{width:20px;height:20px;flex:none;fill:var(--mt-brass);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mt-brass) 55%,transparent))}
.mti-hc{margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--mt-cloud) 12%,transparent)}
.mti-hst{display:flex;min-height:18px;align-items:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mti-ok{display:inline-flex;align-items:center;gap:7px}
.mti-ok i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px color-mix(in srgb,#22c55e 70%,transparent)}
.mti-hst .mt-soon{margin-left:0}
.mti-hn{margin-top:6px!important;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.mti-hs{margin-top:6px!important;min-height:calc(4 * 1.42em);font-size:13px;line-height:1.42;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent)}
.mti-hk{display:inline-flex;align-items:center;gap:7px;margin-top:10px;color:var(--mt-brass);font-size:13px;font-weight:600;text-decoration:none}
.mti-hk span{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mt-brass) 45%,transparent);text-underline-offset:3px}
.mti-hk svg{flex:none;transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mti-hk:hover svg{translate:4px 0}
.mti-hc.is-swap>*{animation:mtiSwap .45s cubic-bezier(.2,.8,.2,1) both}
.mti-hc.is-swap>:nth-child(2){animation-delay:.04s}
.mti-hc.is-swap>:nth-child(3){animation-delay:.08s}
.mti-hc.is-swap>:nth-child(4){animation-delay:.12s}
@keyframes mtiSwap{from{opacity:0;translate:0 6px}}

/* group labels, in the board's corners (outside the ring, so no line reaches them) */
.mti-gh{position:absolute;z-index:2;left:22px;display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent);font-weight:500}
.mti-gh i{width:22px;height:0;border-top:1.5px solid var(--line)}
.mti-g-now .mti-gh{top:20px}
.mti-g-soon .mti-gh{bottom:20px}
.mti-g-soon .mti-gh i{border-top-style:dashed;border-color:color-mix(in srgb,var(--mt-cloud) 45%,transparent)}
.mti-ns{padding:0;list-style:none}

/* a node */
.mti-n{position:absolute;z-index:2;left:calc(50% + var(--x) * var(--rx));top:calc(50% + var(--y) * var(--ry));width:0;height:0}
.mti-b{position:absolute;left:0;top:calc(var(--ic) / -2);translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:9px;width:max-content;max-width:150px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% calc(var(--ic) / 2)}
.mti-n[data-lp="t"] .mti-b{top:auto;bottom:calc(var(--ic) / -2);flex-direction:column-reverse;transform-origin:50% calc(100% - var(--ic) / 2)}
.mti-ic{position:relative;display:grid;place-items:center;flex:none;width:var(--ic);height:var(--ic);box-sizing:border-box;border-radius:16px;background:color-mix(in srgb,var(--mt-pine) 85%,#000);color:var(--mt-bone);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 16%,transparent),0 10px 24px -12px #000;transition:background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}
.mti-tx{display:flex;flex-direction:column;align-items:center;gap:4px}
.mti-n[data-lp="t"] .mti-tx{flex-direction:column-reverse}
.mti-nm{font-size:13.5px;font-weight:600;line-height:1.2;letter-spacing:-.005em;color:var(--mt-cloud);transition:color .3s ease}
.mti-sb{font-size:11px;line-height:1.25;color:color-mix(in srgb,var(--mt-cloud) 58%,transparent);white-space:nowrap}
.mti-b .mt-soon{margin-left:0;font-size:9px;padding:1px 7px;vertical-align:0}
.mti-n.is-soon .mti-ic{background:color-mix(in srgb,var(--mt-night) 60%,transparent);border:1.5px dashed color-mix(in srgb,var(--mt-cloud) 34%,transparent);box-shadow:none;color:color-mix(in srgb,var(--mt-bone) 72%,transparent)}
.mti-n.is-soon .mti-nm{color:color-mix(in srgb,var(--mt-cloud) 78%,transparent)}
.mti-b:hover .mti-ic{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-brass) 70%,transparent),0 10px 24px -12px #000}
.mti-n.is-soon .mti-b:hover .mti-ic{border-color:color-mix(in srgb,var(--mt-brass) 70%,transparent);box-shadow:none}
/* the active node lights as the highlight reaches it along its line */
.mti-n.is-hot .mti-ic{background:var(--mt-brass);color:var(--mt-ink);border-color:var(--mt-brass);box-shadow:0 0 0 5px color-mix(in srgb,var(--mt-brass) 15%,transparent),0 0 30px color-mix(in srgb,var(--mt-brass) 38%,transparent);transition-delay:.28s}
.mti-n.is-hot .mti-nm{color:var(--mt-cloud)}
.mti .mti-b:focus-visible{outline:2px solid var(--mt-brass)!important;outline-offset:5px!important;box-shadow:none!important;border-radius:14px}
.mti .mti-hk:focus-visible{outline:2px solid var(--mt-brass)!important;outline-offset:3px!important;box-shadow:none!important;border-radius:4px}
.mti-mount .tm,.mti-b .tm{font-size:.6em}

/* each node's description: read by screen readers on the ring (the card shows it), shown in the list on phones */
@media (min-width:760px){
  .mti-d{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important}
}

/* entrance (scripted only): card, then the lines draw out from it one by one, each node landing as its line arrives */
html.js .mti .mti-hub{opacity:0;transition:opacity .9s ease .15s}
html.js .mti .mti-hi{translate:0 22px;transition:translate 1s cubic-bezier(.2,.8,.2,1) .15s}
html.js .mti.is-on .mti-hub{opacity:1}
html.js .mti.is-on .mti-hi{translate:0 0}
html.js .mti .mti-l{--ld:calc(450ms + var(--i) * 70ms);stroke-dashoffset:var(--off,0);transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1) var(--ld)}
html.js .mti.is-on .mti-l{stroke-dashoffset:0}
html.js .mti .mti-pt{opacity:0;transition:opacity .3s ease calc(450ms + var(--i) * 70ms)}
html.js .mti .mti-pt.is-end{transition-delay:calc(1000ms + var(--i) * 70ms)}
html.js .mti.is-on .mti-pt{opacity:1}
html.js .mti .mti-b{opacity:0;scale:.8;transition:opacity .5s ease calc(950ms + var(--i) * 70ms),scale .6s cubic-bezier(.2,.9,.3,1.2) calc(950ms + var(--i) * 70ms)}
html.js .mti.is-on .mti-b{opacity:1;scale:1}
html.js .mti .mti-gh{opacity:0;transition:opacity .7s ease 1.2s}
html.js .mti.is-on .mti-gh{opacity:1}
html.js .mti.is-still *{transition-delay:0s!important}
/* the active node stays unlit until its highlight has run out to it (without scripts it is lit from the start) */
html.js .mti:not(.is-lit) .mti-n.is-hot .mti-ic{background:color-mix(in srgb,var(--mt-pine) 85%,#000);color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 16%,transparent),0 10px 24px -12px #000}
html.js .mti:not(.is-lit) .mti-n.is-soon.is-hot .mti-ic{background:color-mix(in srgb,var(--mt-night) 60%,transparent);border-color:color-mix(in srgb,var(--mt-cloud) 34%,transparent);box-shadow:none;color:color-mix(in srgb,var(--mt-bone) 72%,transparent)}

/* one column: the copy, then the board, then the mounting row (the copy box dissolves so the row can follow the board) */
@media (max-width:1239.98px){
  .mti-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .mti-copy{display:contents}
  .mti-copy>*{justify-self:start;max-width:640px}
  .mti-lede{margin:22px 0 0!important}
  .mti-cta{margin-top:30px}
  .mti-bay{order:5;margin-top:clamp(44px,6vw,64px);justify-self:center;width:100%;max-width:860px;aspect-ratio:1.16/1;--ic:54px}
  .mti-copy>.mti-mount{order:6;justify-self:center;width:100%;max-width:860px;margin-top:36px;padding-top:0;border-top:0}
}

/* small tablets and phones: a stacked list with each node's status and description (the ring needs a ~700px board) */
@media (max-width:759.98px){
  .mti-bay{--ic:44px;aspect-ratio:auto;display:flex;flex-direction:column;gap:26px;padding:18px 16px 24px;border-radius:24px}
  .mti-cab{display:none}
  .mti-hub{position:relative;left:auto;top:auto;translate:none;width:auto;border-radius:16px}
  .mti-hi{padding:14px 16px}
  .mti-hc{display:none}
  .mti-gh{position:static;padding:0 2px}
  .mti-ns{display:grid;gap:16px;margin-top:14px}
  .mti-n{position:relative;left:auto;top:auto;width:auto;height:auto}
  .mti-n:not(:last-child)::before{content:"";position:absolute;z-index:0;left:calc(var(--ic) / 2 - .75px);top:calc(var(--ic) / 2);bottom:calc(-16px - var(--ic) / 2);border-left:1.5px solid var(--line)}
  .mti-n.is-soon:not(:last-child)::before{border-left-style:dashed;border-color:var(--line-soon)}
  .mti-b,.mti-n[data-lp="t"] .mti-b{position:relative;z-index:1;top:auto;bottom:auto;left:auto;translate:none;flex-direction:row;align-items:center;gap:14px;max-width:none;width:100%;text-align:left;transform-origin:calc(var(--ic) / 2) 50%}
  .mti-ic{border-radius:12px}
  .mti-ico{width:22px;height:22px}
  .mti-tx,.mti-n[data-lp="t"] .mti-tx{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
  .mti-nm{font-size:15px}
  .mti-sb{white-space:normal}
  .mti-d{position:relative;z-index:1;margin:4px 0 0 calc(var(--ic) + 14px)!important;font-size:13px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
  .mti-n.is-soon .mti-d{color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
  .mti:not(.is-picked) .mti-n.is-hot .mti-ic{background:color-mix(in srgb,var(--mt-pine) 85%,#000);color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 16%,transparent)}
  .mti:not(.is-picked) .mti-n.is-soon.is-hot .mti-ic{background:color-mix(in srgb,var(--mt-night) 60%,transparent);border-color:color-mix(in srgb,var(--mt-cloud) 34%,transparent);box-shadow:none;color:color-mix(in srgb,var(--mt-bone) 72%,transparent)}
  html.js .mti .mti-b{transition-delay:calc(250ms + var(--i) * 40ms)}
}
@media (max-width:699.98px){
  .mti .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mti-lede{font-size:16px}
  .mti-mount ul{gap:6px}
  .mti-mount li{flex-direction:column;align-items:flex-start;gap:8px;padding:10px}
  .mti-mount li b{font-size:13px}
}

/* ---- 09-steps.css ---- */
/* 09 · How it works: three steps (mtw). The section rises over the one above with a stepped top edge; each
   footage frame is uncovered by five bars that fall away at different speeds, like a bar chart dropping. */
.mtw{position:relative;z-index:13;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(150px,15vw,220px) 0 clamp(100px,11vw,160px);margin-top:-80px;clip-path:polygon(0 80px,18% 80px,18% 40px,42% 40px,42% 64px,66% 64px,66% 0,86% 0,86% 30px,100% 30px,100% 100%,0 100%);--sp:.5}
.mtw-m{font-family:var(--mt-font-m,"Geist Mono"),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500)}
.mtw-head{max-width:760px}
.mtw-head .mt-eb{margin-bottom:18px}
html:not(.js) .mtw .mt-eb{opacity:1;translate:0 0}
.mtw-steps{list-style:none;margin:clamp(50px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);align-items:start}
.mtw-step{display:flex;flex-direction:column;gap:22px}
.mtw-step.s0{margin-top:180px}
.mtw-step.s1{margin-top:60px}
.mtw-step.s2{margin-top:0}
.mtw-ph{position:relative}
.mtw-mask{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/5;background:var(--mt-fog);container:mtw / inline-size}
.mtw-step.s1 .mtw-mask{aspect-ratio:4/5.6}
.mtw-step.s2 .mtw-mask{aspect-ratio:4/6.2}
.mtw-img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;translate:0 calc((var(--sp) - .5) * -40px);scale:1.18;transition:scale 1.8s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i)*.15s);user-select:none}
.mtw.is-on .mtw-img{scale:1}
.mtw-bar{position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--b)*20%);width:20.5%;background:var(--mt-bone);transform-origin:50% 0;transition:scale 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i)*.18s + var(--b)*.07s + (4 - var(--b))*var(--b)*.02s)}
.mtw.is-on .mtw-bar{scale:1 0}
.mtw.is-on .mtw-bar:nth-child(2){transition-duration:1.4s}
.mtw.is-on .mtw-bar:nth-child(4){transition-duration:.9s}
.mtw-met{position:absolute;z-index:3;left:14px;bottom:14px;padding:7px 11px;border-radius:8px;background:var(--mt-brass);color:var(--mt-ink);font-size:12px;letter-spacing:.06em;opacity:0;translate:0 10px;transition:opacity .5s,translate .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(1.2s + var(--i)*.18s)}
.mtw.is-on .mtw-met{opacity:1;translate:0 0}

/* recording overlay on each frame (screen-space, so it stays put while the picture moves) */
.mtw-hud{position:absolute;z-index:1;inset:12px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;font-size:10px;line-height:1.35;letter-spacing:.05em;color:#fff;pointer-events:none}
.mtw-tl{display:flex;align-items:center;gap:7px;white-space:nowrap}
.mtw-rec{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border-radius:5px;background:#ef4444;color:#fff;text-shadow:none;font-weight:700}
.mtw-rec i{width:6px;height:6px;border-radius:50%;background:#fff;animation:mtLed 1.2s ease-in-out infinite}
.mtw-rec.is-hub{background:var(--mt-brass);color:var(--mt-ink)}
.mtw-rec.is-hub i{background:var(--mt-ink)}
.mtw-ts{margin:5px 0 auto;opacity:.78;white-space:nowrap}
.mtw-br{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap;text-align:right}
.mtw-br b{font-size:1.15em;font-weight:700}
.mtw-gps{opacity:.78}
@container mtw (max-width:300px){ .mtw-hud{inset:10px;font-size:9px} .mtw-gps{display:none} }
.mtw-ring{animation:mtwRing 2.6s ease-in-out infinite;animation-delay:calc(var(--r)*.32s);animation-play-state:paused}
.mtw.is-on .mtw-ring{animation-play-state:running}
@keyframes mtwRing{0%,100%{opacity:.22}35%{opacity:1}}

.mtw-txt{display:flex;flex-direction:column;gap:10px}
html.js .mtw .mtw-rv{opacity:0;translate:0 22px;transition:opacity .9s ease var(--d,0ms),translate 1s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
html.js .mtw.is-on .mtw-rv{opacity:1;translate:0 0}
.mtw-txt .mt-seg{color:var(--mt-ink);--s:40px}
.mtw-txt h3{margin:6px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.1}
.mtw-txt p{margin:0;max-width:360px;font-size:16px;line-height:1.6;color:var(--mt-mut)}
.mtw.is-still .mtw-bar{scale:1 0}
.mtw.is-still .mtw-met{opacity:1;translate:0 0}
.mtw.is-still .mtw-img{scale:1}
html:not(.js) .mtw-bar{display:none}
html:not(.js) .mtw-met{opacity:1;translate:0 0}

@media (max-width:809.98px){
  .mtw{clip-path:polygon(0 50px,30% 50px,30% 20px,65% 20px,65% 0,100% 0,100% 100%,0 100%);margin-top:-50px;padding-top:110px}
  .mtw .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtw-steps{grid-template-columns:1fr;gap:50px}
  .mtw-step.s0,.mtw-step.s1,.mtw-step.s2{margin-top:0}
  .mtw-step .mtw-mask,.mtw-step.s1 .mtw-mask,.mtw-step.s2 .mtw-mask{aspect-ratio:4/3.6}
  .mtw-txt .mt-seg{--s:30px}
}

/* ---- 10-pages.css ---- */
/* 10 · Inside the dashboard: page cards (mtp). On wide screens the stage pins while you scroll and the track of
   screens slides sideways; each card turns toward you as it reaches the middle, which gets a brass ring and
   drives the counter and rail. Phones and reduced motion get a native swipe row instead. */
.mtp{position:relative;background:var(--mt-night);color:var(--mt-cloud);--rail:0;--cw:min(760px,64vw,calc((100vh - 380px) * 1.7))}
.mtp-m{font-family:var(--mt-font-m,"Geist Mono"),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500)}
.mtp-stage{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,44px);overflow:hidden;padding:110px 0}
.mtp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.mtp-head .mt-eb{margin-bottom:16px}
html:not(.js) .mtp .mt-eb{opacity:1;translate:0 0}
.mtp .mt-hd{font-size:clamp(40px,4vw,66px)}
.mtp-count{display:flex;align-items:baseline;gap:8px;min-width:180px;flex-wrap:wrap;justify-content:flex-end}
.mtp-count b{font-size:44px;font-weight:500;color:var(--mt-brass);font-variant-numeric:tabular-nums}
.mtp-count span{font-size:14px;color:var(--mt-mut)}
.mtp-rail{display:block;flex-basis:100%;height:3px;border-radius:2px;background:color-mix(in srgb,var(--mt-cloud) 12%,transparent);overflow:hidden}
.mtp-rail i{display:block;height:100%;width:100%;background:var(--mt-brass);transform-origin:0 50%;scale:var(--rail) 1}

.mtp-view{perspective:1800px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mtp-view::-webkit-scrollbar{display:none}
.mtp-view:focus-visible{outline:3px solid var(--mt-brass)!important;outline-offset:-3px!important;box-shadow:none!important}
.mtp-track{display:flex;gap:clamp(24px,3vw,48px);width:max-content;padding:20px calc(50vw - var(--cw) / 2);will-change:transform}
.mtp-card{--d:0;--ad:0;width:var(--cw);flex:none;scroll-snap-align:center;transform:rotateY(calc(var(--d) * -18deg)) scale(calc(1 - var(--ad) * .14)) translateZ(0);opacity:calc(1 - var(--ad) * .5);transition:opacity .2s}
.mtp-win{border-radius:16px;overflow:hidden;background:var(--mt-night);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);transition:box-shadow .35s}
.mtp-card.is-mid .mtp-win{box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 2px var(--mt-brass)}
.mtp-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:color-mix(in srgb,var(--mt-pine) 85%,#000)}
.mtp-bar i{width:10px;height:10px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 18%,transparent)}
.mtp-bar i:first-child{background:var(--mt-brass)}
.mtp-bar span{margin:0 auto;font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtp-scr{aspect-ratio:16/9.4}

/* caption: number, title and copy, and a seven-segment fact */
.mtp-cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;margin-top:18px;opacity:calc(1 - var(--ad) * 1.6)}
.mtp-no{font-size:12px;letter-spacing:.1em;color:var(--mt-brass)}
.mtp-tx{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;min-width:0}
.mtp-cap h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.mtp-cap p{margin:0;font-size:15px;line-height:1.5;color:var(--mt-mut);flex:1 1 260px}
.mtp-ct{display:flex;flex-direction:column;align-items:flex-end;gap:6px;align-self:end;text-align:right}
.mtp-ct .mt-seg{color:var(--mt-brass)}
.mtp-ct>span:last-child{font-size:11px;letter-spacing:.04em;color:var(--mt-mut);white-space:nowrap}

/* screens: the shared dashboard frame, tuned for the page mocks */
.mtp .mt-scr-side{gap:2px;padding:14px 10px}
.mtp .mt-scr-side span{padding:5px 9px;font-family:var(--mt-font-m),ui-monospace,monospace;white-space:nowrap}
.mtp .mt-scr-main{gap:10px;min-height:0}
.mtp .mt-scr-top b,.mtp .mt-scr-kpi b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif}
.mtp .mt-scr-top span,.mtp .mt-scr-kpi span,.mtp .mt-scr-kpi em{font-family:var(--mt-font-m),ui-monospace,monospace;white-space:nowrap}
.mtp .mt-scr-top .pill{background:color-mix(in srgb,#22c55e 16%,transparent);color:#22c55e}
.mtp-clk{font-variant-numeric:tabular-nums}

.mtp-tabs{display:flex;gap:6px;flex-wrap:wrap}
.mtp-tabs span{padding:4px 9px;border-radius:6px;font-size:10px;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent);background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);white-space:nowrap}
.mtp-tabs span.on{background:var(--mt-brass);color:var(--mt-ink)}
.mtp-vid{position:relative;flex:1;min-height:0;border-radius:9px;overflow:hidden;background:#0c0e13}
.mtp-vid svg,.mtp-th svg,.mtp-map svg{position:absolute;inset:0;width:100%;height:100%}
.mtp-rec{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border-radius:5px;background:#ef4444;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.06em}
.mtp-rec i{width:6px;height:6px;border-radius:50%;background:#fff;animation:mtLed 1.2s ease-in-out infinite}
.mtp-cam{position:absolute;left:62px;top:12px;font-size:9.5px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.mtp-hud{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.mtp-hud span{display:inline-flex;align-items:baseline;gap:4px;padding:5px 8px;border-radius:7px;background:rgba(10,11,14,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.7);text-transform:uppercase}
.mtp-hud b{font-size:14px;font-weight:600;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.mtp-hud span:first-child b{color:var(--mt-brass)}
.mtp-gps{position:absolute;right:10px;top:12px;font-size:9.5px;color:rgba(255,255,255,.8);text-shadow:0 1px 2px rgba(0,0,0,.6)}

.mtp-rc{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px}
.mtp-th{position:relative;border-radius:7px;overflow:hidden;background:#0c0e13;min-height:0}
.mtp-th span{position:absolute;left:6px;top:5px;font-size:8.5px;letter-spacing:.05em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.mtp-th em{position:absolute;right:6px;bottom:5px;font-style:normal;font-size:8.5px;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.6);color:#fff}
.mtp-th b{position:absolute;left:6px;bottom:5px;padding:2px 5px;border-radius:4px;background:var(--mt-brass);color:var(--mt-ink);font-size:8.5px;font-weight:600}
.mtp-rf{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px}
.mtp-play{padding:5px 10px;border-radius:6px;background:var(--mt-brass);color:var(--mt-ink);white-space:nowrap}
.mtp-ok{color:#22c55e;white-space:nowrap}

.mtp-map{position:relative;flex:1;min-height:0;border-radius:9px;overflow:hidden;background:#131417}
.mtp-rt{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--k) * .42s)}
.mtp-card.is-seen .mtp-rt,html:not(.js) .mtp-rt{stroke-dashoffset:0}
.mtp-ev,.mtp-tag{opacity:0;transition:opacity .4s ease 2.1s}
.mtp-card.is-seen .mtp-ev,.mtp-card.is-seen .mtp-tag,html:not(.js) .mtp-ev,html:not(.js) .mtp-tag{opacity:1}
.mtp-leg{position:absolute;left:8px;bottom:8px;display:flex;flex-wrap:wrap;gap:4px 10px;padding:5px 8px;border-radius:6px;background:rgba(10,11,14,.8);font-size:9px;color:rgba(255,255,255,.75)}
.mtp-leg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mtp-leg i{width:12px;height:3px;border-radius:2px;background:var(--c)}

.mtp .mt-scr-kpi .mtp-usd{color:var(--mt-brass)}
.mtp-trips{display:flex;flex-direction:column;gap:4px}
.mtp-trips p{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;margin:0;padding:6px 8px;border-radius:6px;font-size:10px;color:color-mix(in srgb,var(--mt-cloud) 75%,transparent);background:color-mix(in srgb,var(--mt-cloud) 3%,transparent)}
.mtp-trips span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtp-trips b{padding:2px 7px;border-radius:5px;font-size:9px;font-weight:600;white-space:nowrap}
.mtp-trips .biz{background:var(--mt-brass);color:var(--mt-ink)}
.mtp-trips .com{background:color-mix(in srgb,var(--mt-cloud) 14%,transparent);color:var(--mt-cloud)}
.mtp-trips .per{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 30%,transparent);color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtp-exp{display:flex;align-items:center;gap:6px;margin-top:auto;font-size:10px}
.mtp-exp span{padding:5px 9px;border-radius:6px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);white-space:nowrap}
.mtp-exp em{margin-left:auto;font-style:normal;color:var(--mt-brass);white-space:nowrap}

.mtp-drv{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:9px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent)}
.mtp-dh{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.mtp-dh b{color:var(--mt-cloud);font-weight:600}
.mtp-use{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);overflow:hidden}
.mtp-use i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--mt-brass);transform-origin:0 50%;scale:0 1;transition:scale 1.2s cubic-bezier(.2,.8,.2,1) .2s}
.mtp-card.is-seen .mtp-use i,html:not(.js) .mtp-use i{scale:var(--u) 1}
.mtp-hg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mtp-hg p{display:grid;grid-template-columns:auto 1fr;gap:2px 7px;align-items:center;margin:0;padding:8px 10px;border-radius:7px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);font-size:9.5px;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent);min-width:0}
.mtp-hg i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 35%,transparent)}
.mtp-hg i.ok{background:#22c55e;box-shadow:0 0 6px #22c55e}
.mtp-hg b{grid-column:2;font-weight:500;font-size:10.5px;color:var(--mt-cloud);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* pinned mode: tall section, sticky stage, the track moves with scroll (set from script) */
@media (min-width:810px){
  .mtp.is-pin{height:calc(100vh + var(--n, 5) * 70vh)}
  .mtp.is-pin .mtp-stage{position:sticky;top:0;height:100vh;height:100svh;padding:0}
  .mtp.is-pin .mtp-view{overflow:visible;scroll-snap-type:none}
}
@media (max-width:809.98px){
  .mtp{--cw:84vw}
  .mtp-stage{padding:100px 0 80px}
  .mtp .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtp-head{flex-direction:column;align-items:flex-start}
  .mtp-count{display:none}
  .mtp-track{padding:10px 8vw}
  .mtp-card{transform:none;opacity:1}
  .mtp-scr{aspect-ratio:4/4.4}
  .mtp-cap{grid-template-columns:auto minmax(0,1fr);opacity:1}
  .mtp-tx{flex-direction:column;gap:6px}
  .mtp-cap p{flex:none}
  .mtp-ct{grid-column:1 / -1;flex-direction:row;align-items:center;gap:10px;justify-content:flex-start;text-align:left}
  .mtp .mt-scr-top .wx{display:none}
  .mtp .mt-scr-top b{font-size:15px}
  .mtp-rc{grid-template-columns:1fr 1fr}
  .mtp-th:nth-child(n+5){display:none}
  .mtp-trips p{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .mtp-trips .rt{display:none}
  .mtp-hg{grid-template-columns:1fr}
  .mtp-hg p:nth-child(n+5){display:none}
  .mtp-hud span:nth-child(n+3){display:none}
  .mtp-gps{display:none}
}
@media (max-width:420px){
  .mtp-rf .mtp-ok{display:none}
  .mtp .mt-scr-kpi em{display:none}
}
/* real app screens: one phone on a stage inside each card */
.mtp-scr>.dps{height:100%}
.mtp-scr .dps .dph{--ph:90%}
.mtp-win{background:var(--mt-night)}

/* ---- 10b-grid.css ---- */
/* "Everything else" feature grid. */
.mtx { background: var(--mt-night); color: var(--mt-cloud); padding: clamp(90px, 10vw, 140px) max(24px, calc((100vw - 1200px) / 2)); }
.mtx-in { max-width: 1200px; margin: 0 auto; }
.mtx-head { display: grid; justify-items: center; text-align: center; gap: 18px; margin-bottom: 56px; }
.mtx-eb { display: inline-flex; align-items: center; gap: 9px; }
.mtx-eb i { width: 8px; height: 8px; border-radius: 50%; background: var(--mt-brass); box-shadow: 0 0 10px var(--mt-brass); }
.mtx-sub { margin: 0; max-width: 560px; color: color-mix(in srgb, var(--mt-cloud) 64%, transparent); font-size: 18px; }
.mtx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mtx-card { position: relative; padding: 28px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--mt-cloud) 5%, transparent), color-mix(in srgb, var(--mt-cloud) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--mt-cloud) 9%, transparent); overflow: hidden; isolation: isolate;
  transition: border-color .35s, translate .5s cubic-bezier(.2, .8, .2, 1), opacity .7s cubic-bezier(.2, .8, .2, 1); }
.mtx-card::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; z-index: -1; opacity: 0; transition: opacity .45s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mt-brass) 22%, transparent), transparent); }
.mtx-card:hover { border-color: color-mix(in srgb, var(--mt-brass) 45%, transparent); translate: 0 -4px; }
.mtx-card:hover::before { opacity: 1; }
.mtx-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--mt-brass); color: var(--mt-ink); margin-bottom: 22px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--mt-brass) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.mtx-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mtx-card h3 { margin: 0 0 8px; font: var(--mt-font-dw) 21px/1.15 var(--mt-font-d), sans-serif; letter-spacing: -.015em; }
.mtx-card p { margin: 0; color: color-mix(in srgb, var(--mt-cloud) 62%, transparent); font-size: 15.5px; }
.js .mtx-card[data-reveal]:not(.is-in) { opacity: 0; translate: 0 22px; }
.mtx-card:nth-child(3n + 2) { transition-delay: 70ms; } .mtx-card:nth-child(3n + 3) { transition-delay: 140ms; }
@media (max-width: 1000px) { .mtx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mtx-grid { grid-template-columns: 1fr; } .mtx-card { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .js .mtx-card[data-reveal]:not(.is-in) { opacity: 1; translate: none; } }

/* ---- 11-scenarios.css ---- */
/* 11 · Example scenarios (#evidence): staggered cards with illustrated dash cam frames, scroll parallax */
.mtc{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(100px,11vw,170px) 0 clamp(120px,12vw,190px);--sp:.5}
.mtc .mt-eb,.mtc-top,.mtc-met span,.mtc-who,.mtc-hud,.mtc-note{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.mtc-head .mt-eb{margin-bottom:18px}
.mtc-side{max-width:380px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;opacity:0;translate:0 22px;transition:opacity .9s ease .38s,translate 1s cubic-bezier(.2,.8,.2,1) .38s}
.mtc.is-on .mtc-side{opacity:1;translate:0 0}
.mtc-side p{margin:0;font-size:17px;line-height:1.6;color:var(--mt-mut)}

.mtc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(50px,6vw,80px);align-items:start}
.mtc-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:16px 16px 20px;border-radius:14px;background:var(--mt-cloud);color:var(--mt-ink);text-decoration:none;box-shadow:0 1px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent),0 20px 40px -26px color-mix(in srgb,var(--mt-ink) 40%,transparent);opacity:0;translate:0 80px;transform:translateY(calc((var(--sp) - .5) * var(--par) * -120px));transition:opacity .8s ease calc(var(--i)*.12s),translate 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.12s),box-shadow .4s,rotate .5s cubic-bezier(.34,1.56,.64,1)}
.mtc.is-on .mtc-card{opacity:1;translate:0 0}
.mtc-card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--mt-brass);opacity:0;transition:opacity .3s;pointer-events:none}
.mtc-card:hover{rotate:-1deg;box-shadow:0 1px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent),0 40px 70px -30px color-mix(in srgb,var(--mt-ink) 55%,transparent)}
.mtc-card:hover::before,.mtc-card:focus-visible::before{opacity:1}
.mtc-card:focus-visible{outline:3px solid var(--mt-ink);outline-offset:3px}
/* the four cards sit on a wave so the row reads like scattered prints */
.mtc-card.c1{margin-top:110px}
.mtc-card.c2{margin-top:30px}
.mtc-card.c3{margin-top:150px}

.mtc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut);padding-bottom:10px;border-bottom:1px dashed var(--mt-fog)}
.mtc-top span:first-child{display:inline-flex;align-items:center;gap:7px;color:var(--mt-ink)}
.mtc-top span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 0 2px color-mix(in srgb,var(--mt-brass) 28%,transparent)}

.mtc-ph{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/3.4;background:#1b1e27;clip-path:polygon(0 0,0 0,0 0,0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) calc(.3s + var(--i)*.14s)}
.mtc.is-on .mtc-ph{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.mtc-card.c1 .mtc-ph,.mtc-card.c3 .mtc-ph{aspect-ratio:4/4.6}
.mtc-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;scale:1.15;transition:scale 1.6s cubic-bezier(.2,.8,.2,1)}
.mtc.is-on .mtc-art{scale:1.02}
.mtc-card:hover .mtc-art{scale:1.1}

/* HUD burned into the frame, like a real dash cam still */
.mtc-hud{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:9px 10px;color:#fff;font-size:9px;line-height:1.4;letter-spacing:.06em;pointer-events:none}
.mtc-hud>span{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.mtc-hud>span:first-child{align-items:flex-start}
.mtc-rec,.mtc-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border-radius:3px;font-weight:700;letter-spacing:.08em;text-shadow:none}
.mtc-rec{background:#ef4444;color:#fff}
.mtc-rec i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:mtLed 1.4s ease-in-out infinite}
.mtc-tag{margin-left:5px;background:var(--mt-brass);color:var(--mt-ink)}
.mtc-mi{display:flex;width:max-content;margin:0 0 6px;padding:4px 7px}

.mtc-met{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mtc-met b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(34px,3.2vw,50px);font-weight:800;letter-spacing:-.05em;line-height:1}
.mtc-met span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mtc-t{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:20px;font-weight:700;line-height:1.15;letter-spacing:-.025em}
.mtc-q{margin:-4px 0 0;font-size:16px;line-height:1.5;letter-spacing:-.01em}
.mtc-who{margin:0;padding-right:44px;font-size:11.5px;color:var(--mt-mut)}
.mtc-who b{color:var(--mt-ink);font-weight:500}
.mtc-go{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--mt-bone);transition:background .3s,translate .4s cubic-bezier(.34,1.56,.64,1)}
.mtc-card:hover .mtc-go,.mtc-card:focus-visible .mtc-go{background:var(--mt-brass);translate:3px -3px}
.mtc-note{margin:clamp(60px,7vw,110px) 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut);text-align:center}

/* reduced motion: everything in place, no parallax */
.mtc.is-still .mtc-card{opacity:1;translate:0 0;transform:none}
.mtc.is-still .mtc-ph{clip-path:none}
.mtc.is-still .mtc-art{scale:1}
.mtc.is-still .mtc-side{opacity:1;translate:0 0}

/* tablet: two columns, even cards dropped */
@media (max-width:1199.98px){
  .mtc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtc-card.c1,.mtc-card.c2,.mtc-card.c3{margin-top:0}
  .mtc-card:nth-child(even){margin-top:60px}
}
/* phone: one column, no parallax */
@media (max-width:809.98px){
  .mtc .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtc-head{flex-direction:column;align-items:flex-start;gap:28px}
  .mtc-grid{grid-template-columns:minmax(0,1fr)}
  .mtc-card,.mtc-card:nth-child(even){margin-top:0;transform:none}
  .mtc-hud{font-size:9.5px}
}

/* ---- 12-cloudhub.css ---- */
/* 12 · Cloud and Hub (mtch): two columns, Dashivo Cloud (your account in the browser) and the Dashivo Hub (hardware for
   the car, Coming Soon), each with a visual, what it does and a way on. Cards rise in with [data-reveal]. */
.mtch{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(90px,10vw,150px) 0}
.mtch-head{display:grid;justify-items:start;gap:18px;max-width:760px;margin-bottom:clamp(40px,5vw,70px)}
.mtch-head .mt-eb{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
html:not(.js) .mtch .mt-eb{opacity:1;translate:none}
.mtch-sub{margin:0;font-size:18px;line-height:1.6;color:var(--mt-mut)}
.mtch-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.mtch-col{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.4vw,34px);border-radius:26px;background:var(--mt-pine);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),0 40px 80px -50px #000;transition:opacity .8s,translate 1s cubic-bezier(.2,.8,.2,1)}
.mtch-col.is-hub{background:linear-gradient(160deg,#1a1c21,#121317)}
.js .mtch-col[data-reveal]:not(.is-in){opacity:0;translate:0 40px}
.mtch-col.is-hub[data-reveal]{transition-delay:.12s}
.mtch-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mtch-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mt-brass);color:var(--mt-ink)}
.mtch-col.is-hub .mtch-ic{background:var(--mt-ink);color:var(--mt-brass);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-brass) 40%,transparent)}
.mtch-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtch-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:99px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mtch-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mtch-pill.is-on{background:color-mix(in srgb,#22c55e 16%,transparent);color:#4ade80}
.mtch-pill.is-soon{background:var(--mt-brass);color:var(--mt-ink)}
.mtch-col h3{margin:4px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(32px,3vw,46px);letter-spacing:-.04em;line-height:1}
.mtch-lede{margin:0;font-size:17px;line-height:1.55;color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.mtch-vis{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--mt-night);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtch-win{display:flex;flex-direction:column}
.mtch-bar{display:flex;align-items:center;gap:7px;height:32px;flex:none;padding:0 12px;background:color-mix(in srgb,var(--mt-pine) 70%,#000)}
.mtch-bar i{width:9px;height:9px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 18%,transparent)}
.mtch-bar i:first-child{background:var(--mt-brass)}
.mtch-bar span{margin:0 auto;padding:2px 12px;border-radius:6px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent);white-space:nowrap}
.mtch-shot{display:block;flex:1;min-height:0;width:100%;object-fit:cover;object-position:50% 0}
.mtch-mock{flex:1;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(16px,3vw,28px);background:radial-gradient(90% 80% at 100% 0,color-mix(in srgb,var(--mt-brass) 10%,transparent),transparent 60%),var(--mt-night)}
.mtch-mk{padding:4px 9px;border-radius:6px;background:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent)}
.mtch-mock b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em}
.mtch-mg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin-top:auto}
.mtch-mg i{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);font-style:normal;font-size:11.5px;color:var(--mt-mut)}
.mtch-mg em{font-style:normal;font-weight:700;font-size:13px;color:var(--mt-cloud)}
.mtch-art-box .mtch-art{position:absolute;inset:0;width:100%;height:100%}
.mtch-ring{animation:mtwRing 2.6s ease-in-out infinite;animation-delay:calc(var(--r)*.32s)}
.mtch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mtch-list li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtch-list b{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-brass)}
.mtch-list b.mtch-soon{align-self:flex-start;padding:2px 8px;border-radius:99px;background:var(--mt-brass);color:var(--mt-ink)}
.mtch-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:6px}
.mtch-note{margin:clamp(24px,3vw,40px) 0 0;max-width:820px;font-size:15px;line-height:1.6;color:var(--mt-mut)}
.mtch-note b{color:var(--mt-cloud)}
@media (max-width:899px){.mtch-cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.js .mtch-col[data-reveal]:not(.is-in){opacity:1;translate:none} .mtch-ring{animation:none}}

/* ---- 13-specs.css ---- */
/* 13 · Spec sheet: three columns of spec cards drifting up and down, paused on hover and off screen */
.mtv{position:relative;background:var(--mt-cloud);color:var(--mt-ink);padding:clamp(100px,11vw,160px) 0;overflow:hidden}
.mtv .mt-eb,.mtv-card dt span,.mtv-rate p{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtv-sprite{position:absolute;width:0;height:0;overflow:hidden}
.mtv .mt-hd{font-size:clamp(40px,4vw,66px)}
.mtv-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,4vw,70px);align-items:start}
.mtv-side{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start}
.mtv-side .mt-eb{margin-bottom:18px}
.mtv-body{margin:22px 0 0;max-width:340px;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.mtv-rate{display:flex;align-items:flex-end;gap:16px;margin-top:34px;padding-top:24px;border-top:1px solid var(--mt-fog)}
.mtv-rate .mt-seg{color:var(--mt-ink)}
.mtv-rate p{margin:0;max-width:210px;font-size:12.5px;line-height:1.45;color:var(--mt-mut)}
.mtv-body,.mtv-rate{opacity:0;translate:0 22px;transition:opacity .9s ease .4s,translate 1s cubic-bezier(.2,.8,.2,1) .4s}
.mtv-body{transition-delay:.34s}
.mtv.is-on .mtv-body,.mtv.is-on .mtv-rate{opacity:1;translate:0 0}

.mtv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;height:min(760px,90vh);overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);opacity:0;translate:0 30px;transition:opacity .9s ease .3s,translate 1s cubic-bezier(.2,.8,.2,1) .3s}
.mtv.is-on .mtv-cols{opacity:1;translate:0 0}
.mtv-col{overflow:hidden}
.mtv-track{display:flex;flex-direction:column;gap:16px;margin:0;animation:mtvUp 40s linear infinite}
.mtv-col.c1 .mtv-track{animation-name:mtvDn}
.mtv-col:hover .mtv-track,.mtv.is-off .mtv-track{animation-play-state:paused}

.mtv-card{margin:0;padding:clamp(18px,1.6vw,22px);border-radius:16px;background:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 6%,transparent);transition:background .3s,box-shadow .3s,translate .4s cubic-bezier(.34,1.56,.64,1)}
.mtv-card:hover{background:var(--mt-cloud);box-shadow:inset 0 0 0 2px var(--mt-brass);translate:0 -3px}
.mtv-card dt{display:flex;align-items:center;gap:10px}
.mtv-card dt i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:var(--mt-ink);color:var(--mt-brass)}
.mtv-card dt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtv-card dt span{display:flex;flex-direction:column;gap:2px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mtv-card dt b{font-family:var(--mt-font-b),system-ui,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mt-ink)}
.mtv-card dd{margin:16px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(17px,1.5vw,23px);font-weight:700;line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}

/* before the script lays out the columns (or with reduced motion) the sheet is a still grid */
.mtv-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;grid-column:1/-1;align-content:start}
.mtv-cols:not(.is-run),.mtv.is-rm .mtv-cols{height:auto;mask-image:none;-webkit-mask-image:none}
.mtv.is-rm .mtv-track{animation:none}

@media (max-width:1099.98px){
  .mtv-grid{grid-template-columns:minmax(0,1fr)}
  .mtv-side{position:relative;top:auto}
  .mtv-cols{grid-template-columns:repeat(2,minmax(0,1fr));height:640px}
  .mtv-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtv-card dd{font-size:21px}
}
@media (max-width:809.98px){
  .mtv .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtv-rate .mt-seg{--s:44px!important}
  .mtv-cols{grid-template-columns:minmax(0,1fr);height:560px}
  .mtv-list{grid-template-columns:minmax(0,1fr)}
}

/* ---- 14-faq.css ---- */
/* 14 · FAQ (#faq): sticky side card, questions as toggle switches that spring open one at a time */
.mtf{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(100px,11vw,160px) 0}
/* room for the closing call to action, which overlaps this section's foot on a diagonal */
.mtf:has(+ .mtk){padding-bottom:calc(clamp(100px,11vw,160px) + 9vw)}
.mtf .mt-eb,.mtf-open{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtf .mt-hd{font-size:clamp(44px,4.4vw,72px)}
.mtf-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px);align-items:start}
.mtf-side{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start}
.mtf-side .mt-eb{margin-bottom:18px}
.mtf-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:36px;padding:24px;border-radius:22px;background:var(--mt-pine);color:var(--mt-cloud);width:100%;max-width:420px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent);opacity:0;translate:0 30px;transition:opacity .9s ease .38s,translate 1s cubic-bezier(.2,.8,.2,1) .38s}
.mtf.is-on .mtf-card{opacity:1;translate:0 0}
.mtf-card h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.03em}
.mtf-card>p:not(.mtf-open){margin:0 0 6px;font-size:15px;line-height:1.55;color:var(--mt-mut)}
.mtf-open{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mtf-open i{width:8px;height:8px;border-radius:50%;background:var(--mt-mut)}
.mtf-open.is-open{color:var(--mt-cloud)}
.mtf-open.is-open i{background:#22c55e;box-shadow:0 0 8px #22c55e;animation:mtLed 2.4s ease-in-out infinite}

.mtf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mtf-q{border-radius:16px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 6%,transparent),0 3px 0 color-mix(in srgb,var(--mt-ink) 7%,transparent);opacity:0;translate:0 20px;transition:box-shadow .3s,opacity .9s ease var(--d,240ms),translate 1s cubic-bezier(.2,.8,.2,1) var(--d,240ms)}
.mtf.is-on .mtf-q{opacity:1;translate:0 0}
.mtf-q.is-open{box-shadow:inset 0 0 0 2px var(--mt-brass),0 3px 0 color-mix(in srgb,var(--mt-brass) 50%,var(--mt-ink))}
.mtf-q h3{margin:0}
.mtf-q button{display:grid;grid-template-columns:36px minmax(0,1fr) 12px;gap:16px;align-items:center;width:100%;padding:20px 22px;border:0;border-radius:16px;background:none;color:var(--mt-ink);text-align:left;font:inherit;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(17px,1.4vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.02em;cursor:pointer}
.mtf-q button:focus-visible{outline:3px solid var(--mt-ink);outline-offset:2px}
.mtf-sw{position:relative;width:36px;height:22px;border-radius:6px;background:linear-gradient(180deg,#0e0f12,#26282f);box-shadow:inset 0 2px 4px #000}
.mtf-sw b{position:absolute;top:2px;left:2px;width:16px;height:18px;border-radius:4px;background:linear-gradient(180deg,#5b5e67,#3a3d45);transition:translate .25s cubic-bezier(.34,1.56,.64,1),background .25s}
.mtf-q.is-open .mtf-sw b{translate:16px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--mt-brass) 90%,#fff),color-mix(in srgb,var(--mt-brass) 75%,#000))}
.mtf-led{width:9px;height:9px;border-radius:50%;background:var(--mt-fog);transition:background .3s,box-shadow .3s}
.mtf-q.is-open .mtf-led{background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.mtf-q button:hover .mtf-sw b{background:linear-gradient(180deg,#6a6d76,#44474f)}
.mtf-q.is-open button:hover .mtf-sw b{background:linear-gradient(180deg,color-mix(in srgb,var(--mt-brass) 90%,#fff),color-mix(in srgb,var(--mt-brass) 75%,#000))}
.mtf-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.34,1.2,.5,1)}
.mtf-a>div{overflow:hidden;min-height:0}
.mtf-q.is-open .mtf-a{grid-template-rows:1fr}
.mtf-a p{margin:0;padding:0 22px 22px 74px;font-size:16px;line-height:1.6;color:var(--mt-mut)}

@media (max-width:809.98px){
  .mtf:has(+ .mtk){padding-bottom:calc(clamp(100px,11vw,160px) + 16vw)}
  .mtf .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtf-grid{grid-template-columns:minmax(0,1fr)}
  .mtf-side{position:relative;top:auto}
  .mtf-q button{grid-template-columns:36px minmax(0,1fr) 10px;gap:12px;padding:18px 16px}
  .mtf-a p{padding:0 16px 20px 16px}
}

/* ---- 15-cta.css ---- */
/* 15 · Closing call to action: a dash cam frame opens as a circle on scroll behind a diagonal cut;
   the record button lights the scene. */
.mtk{position:relative;z-index:12;overflow:hidden;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(200px,20vw,300px) 0 clamp(140px,14vw,200px);margin-top:-9vw;clip-path:polygon(0 9vw,100% 0,100% 100%,0 100%);--sp:.5;--ir:min(100, max(8, (var(--sp) - .05) * 190))}
.mtk .mt-eb,.mtk-note,.mtk-hud{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtk-ph{position:absolute;inset:0;clip-path:circle(calc(var(--ir) * 1%) at 50% 42%)}
.mtk-art{width:100%;height:100%;max-width:none;scale:calc(1.3 - var(--ir) * .003)}
.mtk.is-still{--ir:100}
/* when the section above has no room at its foot, the cut shows the page instead of overlapping it */
.mtk.mtk-flat{margin-top:0}
.mtk-wash{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 40%,color-mix(in srgb,var(--mt-night) 58%,transparent),color-mix(in srgb,var(--mt-night) 30%,transparent));transition:background .6s}
.mtk.is-lit .mtk-wash{background:radial-gradient(70% 70% at 50% 40%,color-mix(in srgb,var(--mt-brass) 34%,transparent),color-mix(in srgb,var(--mt-night) 88%,transparent))}

/* HUD on the frame: same circle, so it only shows once the frame is open */
.mtk-hud{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:calc(9vw + 22px) clamp(16px,3vw,40px) 24px;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent);font-size:11px;line-height:1.5;letter-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.7);pointer-events:none;clip-path:circle(calc(var(--ir) * 1%) at 50% 42%)}
.mtk-hud>span{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.mtk-hud>span:first-child{align-items:flex-start}
.mtk-rec{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:4px;background:color-mix(in srgb,var(--mt-cloud) 16%,transparent);color:var(--mt-cloud);font-weight:700;letter-spacing:.1em;text-shadow:none;transition:background .3s}
.mtk-rec i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.mtk-rec em{font-style:normal}
.mtk-rec .b{display:none}
.mtk.is-lit .mtk-rec{background:#ef4444}
.mtk.is-lit .mtk-rec i{opacity:1;animation:mtLed 1.2s ease-in-out infinite}
.mtk.is-lit .mtk-rec .a{display:none}
.mtk.is-lit .mtk-rec .b{display:inline}

.mtk-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.mtk-pow{position:relative;width:110px;height:110px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--mt-brass) 90%,#fff),var(--mt-brass) 55%,color-mix(in srgb,var(--mt-brass) 70%,#000));box-shadow:0 8px 0 color-mix(in srgb,var(--mt-brass) 55%,#000),0 30px 60px -20px color-mix(in srgb,var(--mt-brass) 70%,transparent);cursor:pointer;opacity:0;translate:0 30px;transform:translate(var(--mx,0px),var(--my,0px));transition:opacity .9s ease .2s,translate 1s cubic-bezier(.2,.8,.2,1) .2s,box-shadow .15s,transform .5s cubic-bezier(.2,.8,.2,1)}
.mtk.is-on .mtk-pow{opacity:1;translate:0 0}
.mtk.is-on .mtk-pow:active{translate:0 6px;box-shadow:0 2px 0 color-mix(in srgb,var(--mt-brass) 55%,#000);transition-duration:.15s}
.mtk-pow svg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);max-width:none;overflow:visible}
.mtk-pow .r{fill:none;stroke:color-mix(in srgb,var(--mt-cloud) 18%,transparent);stroke-width:2}
.mtk-pow .f{fill:none;stroke:var(--mt-cloud);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;rotate:-90deg;transform-origin:50% 50%;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.mtk-pow:hover .f,.mtk-pow:focus-visible .f,.mtk.is-lit .mtk-pow .f{stroke-dashoffset:0}
.mtk-pow .i{fill:none;stroke:var(--mt-ink);stroke-width:6;stroke-linecap:round;transform:scale(.72);transform-origin:50% 50%}
.mtk.is-lit .mtk-pow{box-shadow:0 8px 0 color-mix(in srgb,var(--mt-brass) 55%,#000),0 0 80px 20px color-mix(in srgb,var(--mt-brass) 60%,transparent)}
.mtk .mt-eb{margin-top:26px}
.mtk .mt-hd{margin-top:18px;font-size:clamp(64px,7.4vw,124px);line-height:.95}
.mtk-body{margin:24px auto 0;max-width:560px;font-size:18px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.mtk-form{display:flex;gap:10px;margin-top:34px;padding:8px;border-radius:16px;background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 18%,transparent)}
.mtk-note{margin:18px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.mtk-body,.mtk-form,.mtk-note{opacity:0;translate:0 22px;transition:opacity .9s ease var(--d),translate 1s cubic-bezier(.2,.8,.2,1) var(--d)}
.mtk-body{--d:.6s}
.mtk-form{--d:.72s}
.mtk-note{--d:.82s}
.mtk.is-on .mtk-body,.mtk.is-on .mtk-form,.mtk.is-on .mtk-note{opacity:1;translate:0 0}
/* "Dashivo" here is the page's first mention (with ™) only where the page's own sections never name it first */
main:has(.tm-first) .tm-cta{display:none}

@media (max-width:809.98px){
  .mtk{margin-top:-16vw;clip-path:polygon(0 16vw,100% 0,100% 100%,0 100%);padding-top:160px}
  .mtk.mtk-flat{margin-top:0}
  .mtk .mt-hd{font-size:clamp(44px,12vw,62px)}
  .mtk-hud{padding-top:calc(16vw + 16px);font-size:9.5px}
  .mtk-pow{width:92px;height:92px}
  .mtk-body{font-size:17px}
  .mtk-form{flex-direction:column;width:100%}
  .mtk-form .mt-btn{width:100%}
  .mtk-form .mt-lbl{flex:1}
}

/* the background is real footage (a video in place of the drawing) */
video.mtk-art{display:block;object-fit:cover}
/* the stamp as it's burned into recorded video: a soft dark band along the bottom, REC and the time on the left,
   speed, G-force and trip on the right, the place below (Geist Mono bold, white with a dark shadow) */
.mtk-stamp{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(40px,6vw,90px) clamp(16px,2.5vw,40px) clamp(14px,1.6vw,24px);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:clamp(10.5px,1.05vw,16px);letter-spacing:.02em;line-height:1.35;text-shadow:0 0 3px #000,0 0 6px rgba(0,0,0,.8);pointer-events:none;opacity:0;transition:opacity 1s ease .4s}
.mtk.is-on .mtk-stamp,.mtk.is-still .mtk-stamp{opacity:1}
.mtk-st1{display:flex;justify-content:space-between;gap:24px}
.mtk-stl{display:inline-flex;align-items:baseline;gap:1.4em}
.mtk-clk,.mtk-str{white-space:pre}
.mtk-srec{display:inline-flex;align-items:center;gap:.55em;font-weight:700}
.mtk-srec i{width:.62em;height:.62em;border-radius:50%;background:#e5484d;box-shadow:0 0 6px rgba(229,72,77,.8);animation:mtLed 1.2s ease-in-out infinite}
.mtk-st2{margin-top:.25em;font-size:.86em;color:rgba(255,255,255,.9)}
@media (max-width:809.98px){.mtk-st1{flex-direction:column;gap:.2em}.mtk-stamp{font-size:10px}}
@media (prefers-reduced-motion:reduce){.mtk-srec i{animation:none}}

/* ---- 16-footer.css ---- */
/* 16 · Footer: status bar with a live clock (the visitor's time), link columns, split-flap wordmark.
   It sits underneath the call to action and is uncovered as that scrolls away (.mt-rev, core). */
.mty{position:relative;background:var(--mt-pine);color:var(--mt-cloud);padding:clamp(60px,6vw,90px) 0 30px;overflow:hidden}
.mty-status,.mty-soc a,.mty-col>p,.mty-legal,.mty-brand span{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mty-status{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--mt-night) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.mty-ok{display:flex;align-items:center;gap:9px;color:var(--mt-cloud)}
.mty-ok i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:mtLed 2s ease-in-out infinite}
.mty-up{display:flex;gap:3px}
.mty-up i{width:5px;height:16px;border-radius:2px;background:#22c55e;opacity:.85;transform-origin:50% 100%;scale:1 0;transition:scale .5s cubic-bezier(.34,1.56,.64,1)}
.mty-up i.w{background:var(--mt-brass)}
.mty-up i.r{background:color-mix(in srgb,var(--mt-cloud) 22%,transparent);opacity:1}
.mty.is-on .mty-up i{scale:1 1}
.mty-clk{margin-left:auto;font-variant-numeric:tabular-nums}

.mty-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:36px;margin-top:clamp(50px,6vw,80px)}
.mty-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--mt-cloud);text-decoration:none}
.mty-brand svg{width:26px;height:26px;fill:var(--mt-brass)}
.mty-brand span{font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.mty-about>p{margin:0;max-width:380px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.mty-about>.mty-by{margin-top:16px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:var(--mt-font-mw);line-height:1.5;letter-spacing:.04em;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.mty-by a{color:var(--mt-brass);text-decoration:none}
.mty-by a:hover{text-decoration:underline}
.mty-soc{display:flex;gap:14px;margin-top:16px}
.mty-soc a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent);text-decoration:none;transition:color .25s}
.mty-soc a:hover{color:var(--mt-cloud)}
.mty-col>p{margin:0 0 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mty-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:15.5px;line-height:1.4;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mty-col a{color:var(--mt-cloud);text-decoration:none;transition:color .25s}
.mty-col a:hover{color:var(--mt-brass)}

/* the wordmark: one big row of flap tiles, all flipping in together */
.mty-word{margin-top:clamp(50px,7vw,100px);display:flex;justify-content:center;overflow:hidden;padding:0 12px}
.mty-word .mt-hd{font-size:min(11.5vw,190px);line-height:1;letter-spacing:0;font-weight:800}
.mty-word .mt-fl{min-width:.72em;border-radius:.06em}
.mty:not(.is-on) .mty-word .mt-fl{transform:rotateX(-100deg);opacity:0}

.mty-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:24px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mty-legal p{margin:0}
.mty-legal p a{color:color-mix(in srgb,var(--mt-cloud) 80%,transparent);text-decoration:none;transition:color .25s}
.mty-legal p a:hover{color:var(--mt-brass)}
.mty-top{display:inline-flex;align-items:center;gap:10px;color:var(--mt-cloud);text-decoration:none}
.mty-top-i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);color:var(--mt-brass);rotate:-90deg;transition:background .3s,color .3s,translate .45s cubic-bezier(.34,1.56,.64,1)}
.mty-top:hover .mty-top-i,.mty-top:focus-visible .mty-top-i{background:var(--mt-brass);color:var(--mt-ink);translate:0 -3px}

@media (max-width:809.98px){
  .mty-grid{grid-template-columns:1fr 1fr;gap:34px 24px}
  .mty-about{grid-column:1/-1}
  .mty-clk{margin-left:0}
  .mty-up,.mty-upl{display:none}
  .mty-about>p{font-size:20px}
  .mty-word .mt-hd{font-size:13.5vw}
  .mty-word .mt-fl{min-width:.66em}
}

@media (min-width:810px) and (max-width:1180px){.mty-grid{grid-template-columns:repeat(4,1fr)} .mty-about{grid-column:1/-1}}

/* the plain strip: the price line on the left, Download App on the right */
.mty-dl{margin-left:auto;color:var(--mt-brass);text-decoration:none;white-space:nowrap}
.mty-dl:hover,.mty-dl:focus-visible{text-decoration:underline}

/* ---- 20-pagehero.css ---- */
/* 20 page hero (mtph): the opening block of every inner page. Breadcrumb with a blinking cursor, eyebrow,
   split-flap headline, sub copy, calls to action, a column of key facts and an optional product window
   that tilts upright as the page scrolls. Add .no-media without the window, .is-dk (+ .mt-dark) for dark. */
.mtph{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(140px,15vw,190px) 0 0;overflow:hidden}
.mtph.no-media{padding-bottom:clamp(70px,8vw,110px)}
.mtph.is-dk{background:var(--mt-night);color:var(--mt-cloud)}
.mtph-cr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12.5px;color:var(--mt-mut)}
.mtph-cr>span:first-child{color:var(--mt-acc)}
.mtph-cr a{color:inherit;text-decoration:none}
.mtph-cr a:hover{color:var(--mt-ink)}
.mtph.is-dk .mtph-cr a:hover{color:var(--mt-cloud)}
.mtph-cr b{font-weight:500;color:var(--mt-ink)}
.mtph.is-dk .mtph-cr b{color:var(--mt-cloud)}
.mtph-cr i{font-style:normal;margin-left:8px}
.mtph-cur{display:inline-block;width:8px;height:14px;background:var(--mt-brass);animation:mtphCur 1s steps(2,end) infinite;opacity:1!important;margin:0!important}
@keyframes mtphCur{50%{opacity:0}}
.mtph-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,90px);align-items:end}
.mtph .mt-eb{margin-bottom:20px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtph .mt-hd{font-size:clamp(54px,5.4vw,90px);line-height:.98}
.mtph-sub{margin:26px 0 0;max-width:620px;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--mt-mut)}
.mtph-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.mtph-facts{display:flex;flex-direction:column;gap:16px;margin:0;padding:0 0 6px;min-width:230px}
.mtph-facts div{display:flex;flex-direction:column;gap:4px;padding-left:14px;border-left:2px solid var(--mt-brass)}
.mtph-facts dt{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(28px,2.6vw,40px);letter-spacing:-.045em;line-height:1}
.mtph-facts dd{margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mtph-media{position:relative;margin-top:clamp(50px,6vw,80px);padding:0 clamp(20px,4vw,56px);perspective:1600px;height:clamp(300px,34vw,520px);overflow:hidden}
.mtph-win,.mtph-img{max-width:1240px;margin:0 auto;border-radius:18px 18px 0 0;overflow:hidden;background:var(--mt-night);box-shadow:0 -10px 60px -20px color-mix(in srgb,var(--mt-ink) 40%,transparent);transform-origin:50% 0;transform:rotateX(calc(18deg - var(--sp,.5)*30deg)) translateY(calc(40px - var(--sp,.5)*60px));transition:opacity 1s ease .5s}
.js .mtph-win,.js .mtph-img{opacity:0}
.js .mtph.is-on .mtph-win,.js .mtph.is-on .mtph-img{opacity:1}
.mtph.is-still .mtph-win,.mtph.is-still .mtph-img{transform:none}
.mtph-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:color-mix(in srgb,var(--mt-pine) 85%,#000)}
.mtph-bar i{width:10px;height:10px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 18%,transparent)}
.mtph-bar i:first-child{background:var(--mt-brass)}
.mtph-bar span{margin:0 auto;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtph-scr{position:relative;height:560px}
.mtph-img{position:relative;height:100%}
.mtph-img>img,.mtph-img>svg{width:100%;height:120%;object-fit:cover}

/* entrance: waits for the page wall, then crumb, eyebrow, headline, facts, copy and buttons in turn */
.js .mtph-cr{opacity:0;translate:0 -8px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtph-sub{opacity:0;translate:0 22px;transition:opacity .9s ease 600ms,translate 1s cubic-bezier(.2,.8,.2,1) 600ms}
.js .mtph-ctas{opacity:0;translate:0 22px;transition:opacity .9s ease 720ms,translate 1s cubic-bezier(.2,.8,.2,1) 720ms}
.js .mtph-facts{opacity:0;translate:0 22px;transition:opacity .9s ease 500ms,translate 1s cubic-bezier(.2,.8,.2,1) 500ms}
.js .mtph.is-on .mtph-cr,.js .mtph.is-on .mtph-sub,.js .mtph.is-on .mtph-ctas,.js .mtph.is-on .mtph-facts{opacity:1;translate:0 0}
.js .mtph:not(.is-on) .mt-hd-w:not(.is-accw) .mt-hd-i{translate:0 108%}
.js .mtph:not(.is-on) .mt-hd .mt-fl{transform:rotateX(-100deg);opacity:0}

@media (max-width:809px){
  .mtph .mt-hd{font-size:clamp(40px,11vw,58px)}
  .mtph-grid{grid-template-columns:1fr}
  .mtph-facts{flex-direction:row;flex-wrap:wrap;gap:14px 18px;min-width:0}
  .mtph-ctas{flex-direction:column;align-items:stretch}
  .mtph-media{height:280px}
  .mtph-scr{height:420px}
}
@media (prefers-reduced-motion:reduce){.mtph-win,.mtph-img{transform:none}}

/* ---- 22-mtfl.css ---- */
/* 22 feature list (mtfl): a sticky index of the modules beside alternating rows of copy, steps, a
   seven-segment figure and a live dashboard screen that opens from its middle as the row arrives. */
.mtfl{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(80px,9vw,130px) 0}
.mtfl-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(30px,4vw,60px)}
.mtfl-idx{position:sticky;top:110px;align-self:start}
.mtfl-idx p{margin:0 0 14px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mtfl-idx ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mtfl-idx a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12.5px;color:var(--mt-mut);text-decoration:none;transition:background .25s,color .25s}
.mtfl-idx a i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-fog);transition:background .25s,box-shadow .25s}
.mtfl-idx a:hover{color:var(--mt-ink)}
.mtfl-idx a.is-cur{background:var(--mt-cloud);color:var(--mt-ink)}
.mtfl-idx a.is-cur i{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtfl-rows{display:flex;flex-direction:column;gap:clamp(80px,9vw,140px)}
.mtfl-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,50px);align-items:center;scroll-margin-top:110px}
.mtfl-row.is-alt .mtfl-txt{order:2}
.mtfl-txt{display:flex;flex-direction:column;align-items:flex-start;gap:16px;transition:opacity .8s,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtfl-row:not(.is-on) .mtfl-txt{opacity:0;translate:0 30px}
.mtfl-row:focus-within .mtfl-txt{opacity:1;translate:0 0;transition:none}
.mtfl-tag{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mtfl-tag span{display:grid;place-items:center;min-width:34px;height:26px;border-radius:6px;background:var(--mt-ink);color:var(--mt-brass)}
.mtfl-txt h2{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(34px,3.4vw,54px);letter-spacing:-.045em;line-height:1}
.mtfl-s{margin:0;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.mtfl-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%}
.mtfl-steps li{display:flex;gap:12px;align-items:baseline;padding:10px 12px;border-radius:10px;background:var(--mt-cloud);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:13px;line-height:1.45}
.mtfl-steps b{flex:none;color:var(--mt-acc);font-weight:500}
.mtfl-met{display:flex;align-items:flex-end;gap:10px}
.mtfl-met .mt-seg{color:var(--mt-ink);flex:none}
.mtfl-met>span:not(.mt-seg){font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut);padding-bottom:3px}
.mtfl-st{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mtfl-st i{width:7px;height:7px;flex:none;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px color-mix(in srgb,#22c55e 25%,transparent)}
.mtfl-st.is-b i{background:var(--mt-brass);box-shadow:0 0 0 2px color-mix(in srgb,var(--mt-brass) 30%,transparent)}
.mtfl-scr{border-radius:20px;overflow:hidden;clip-path:inset(0 0 0 0 round 20px);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) .15s}
.js .mtfl-row:not(.is-on) .mtfl-scr{clip-path:inset(50% 0 50% 0 round 20px)}
.mtfl-row:focus-within .mtfl-scr{clip-path:inset(0 0 0 0 round 20px)}
.mtfl-win{position:relative;height:clamp(380px,34vw,520px);background:var(--mt-night);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--mt-ink) 50%,transparent)}
@media (max-width:999px){
  .mtfl-grid{grid-template-columns:1fr}
  .mtfl-idx{display:none}
  .mtfl-row{grid-template-columns:1fr}
  .mtfl-row.is-alt .mtfl-txt{order:0}
  .mtfl-win{height:420px}
}
@media (max-width:420px){.mtfl-win{height:380px}}

/* ---- 23-mtfd.css ---- */
/* 23 feature detail (mtfd): one module's page. Breadcrumb, tag, big title, copy and a seven-segment figure,
   the live screen in a browser window that settles into place, a rack of numbered steps that slide in,
   the key facts, an honest status panel (working today / in build / roadmap) and keys to the other modules. */
.mtfd{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(140px,14vw,180px) 0 clamp(90px,10vw,140px)}
.mtfd-cr{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:30px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12.5px;color:var(--mt-mut)}
.mtfd-cr>span{color:var(--mt-acc)}
.mtfd-cr a{color:inherit;text-decoration:none}
.mtfd-cr a:hover{color:var(--mt-ink)}
.mtfd-cr b{color:var(--mt-ink);font-weight:500}
.mtfd-cr i{font-style:normal}
.mtfd-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.mtfd-tag{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 18px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mtfd-tag span{display:grid;place-items:center;min-width:34px;height:26px;border-radius:6px;background:var(--mt-ink);color:var(--mt-brass)}
.mtfd h1{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(52px,6vw,100px);letter-spacing:-.05em;line-height:.95;transition:opacity .8s,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtfd:not(.is-on) h1{opacity:0;translate:0 30px}
.mtfd-s{margin:24px 0 0;max-width:640px;font-size:20px;line-height:1.5}
.mtfd-d{margin:12px 0 0;max-width:640px;font-size:16px;line-height:1.6;color:var(--mt-mut)}
.mtfd-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.mtfd-met{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.mtfd-met .mt-seg{color:var(--mt-ink)}
.mtfd-met>span:not(.mt-seg){font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut);text-align:right;max-width:260px}
.mtfd-win{margin-top:clamp(50px,6vw,80px);border-radius:20px;overflow:hidden;background:var(--mt-night);box-shadow:0 50px 90px -40px color-mix(in srgb,var(--mt-ink) 55%,transparent);transition:scale 1.4s cubic-bezier(.2,.8,.2,1) .3s,opacity 1s .3s}
.js .mtfd:not(.is-on) .mtfd-win{scale:.92;opacity:0}
.mtfd-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:color-mix(in srgb,var(--mt-pine) 85%,#000)}
.mtfd-bar i{width:10px;height:10px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 18%,transparent)}
.mtfd-bar i:first-child{background:var(--mt-brass)}
.mtfd-bar span{margin:0 auto;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtfd-scr{position:relative;height:clamp(420px,42vw,640px)}
.mtfd-h2{margin:clamp(70px,8vw,110px) 0 26px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(32px,3vw,48px);letter-spacing:-.04em;line-height:1.05}
.mtfd-rack{list-style:none;margin:0;padding:18px 40px;border-radius:22px;background:var(--mt-pine);display:flex;flex-direction:column;gap:10px}
.mtfd-rack li{position:relative;display:grid;grid-template-columns:60px 1fr 14px;align-items:center;gap:18px;padding:20px 22px 20px 30px;border-radius:12px;background:var(--mt-cloud);transition:opacity .6s calc(.5s + var(--i)*.15s),translate .8s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i)*.15s)}
.js .mtfd:not(.is-on) .mtfd-rack li{opacity:0;translate:-40px 0}
.mtfd-rack b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:22px;color:var(--mt-acc)}
.mtfd-rack p{margin:0;font-size:17px;line-height:1.5}
.mtfd-led{width:10px;height:10px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.mtfd-scw{position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9c6bd,#8a877f)}
/* key facts */
.mtfd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.mtfd-facts div{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:14px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog),0 3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.mtfd-facts dt{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(26px,2.4vw,36px);letter-spacing:-.04em;line-height:1}
.mtfd-facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--mt-mut)}
.mtfd-note{margin:16px 0 0;max-width:760px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--mt-mut)}
/* status */
.mtfd-stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:18px;border-radius:22px;background:var(--mt-pine);color:var(--mt-cloud)}
.mtfd-sc{padding:18px 20px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mtfd-sk{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtfd-sk i{width:9px;height:9px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 30%,transparent)}
.mtfd-sc.is-ok .mtfd-sk i{background:#22c55e;box-shadow:0 0 8px #22c55e}
.mtfd-sc.is-b .mtfd-sk i{background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass);animation:mtLed 2.2s ease-in-out infinite}
.mtfd-sc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mtfd-sc li{font-size:15px;line-height:1.45}
.mtfd-sc li.is-none{color:color-mix(in srgb,var(--mt-cloud) 50%,transparent)}
/* keys to the other modules */
.mtfd-others{display:flex;flex-wrap:wrap;gap:12px}
.mtfd-key{display:flex;flex-direction:column;gap:6px;min-width:220px;padding:18px 20px;border-radius:14px;background:var(--mt-cloud);color:var(--mt-ink);text-decoration:none;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:22px;letter-spacing:-.03em;box-shadow:0 4px 0 color-mix(in srgb,var(--mt-ink) 14%,transparent),inset 0 0 0 1px var(--mt-fog);transition:translate .2s,box-shadow .2s}
.mtfd-key span{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut);font-weight:400}
.mtfd-key svg{align-self:flex-end;margin-top:8px}
.mtfd-key:hover{translate:0 -3px;box-shadow:0 7px 0 color-mix(in srgb,var(--mt-brass) 60%,var(--mt-ink)),inset 0 0 0 2px var(--mt-brass)}
.mtfd-key:active{translate:0 2px;box-shadow:0 1px 0 var(--mt-ink)}
@media (max-width:1099px){.mtfd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the narrowest phones: the title may go below 52px so a long word ("Multi-phone") stays on one line */
@media (max-width:380px){.mtfd h1{font-size:min(52px,14vw)}}
@media (max-width:809px){
  .mtfd-head{grid-template-columns:1fr}
  .mtfd-met{align-items:flex-start}
  .mtfd-met>span:not(.mt-seg){text-align:left}
  .mtfd-met .mt-seg{--s:60px!important}
  .mtfd-s{font-size:18px}
  .mtfd-rack{padding:12px}
  .mtfd-rack li{grid-template-columns:40px 1fr 10px;gap:12px;padding:16px}
  .mtfd-rack p{font-size:15.5px}
  .mtfd-facts,.mtfd-stat{grid-template-columns:1fr}
  .mtfd-stat{padding:12px}
  .mtfd-key{min-width:0;flex:1 1 45%;font-size:19px}
  .mtfd-scr{height:420px}
  .mtfd-ctas{flex-direction:column;align-items:stretch}
}
/* business use, the closing keys section, the Coming soon pill inside a fact */
.mtfd-biz{max-width:780px}
.mtfd-biz>p:first-child{margin:0 0 6px;font-size:19px;line-height:1.6}
.mtfd-biz+.mtfd-stat{margin-top:22px}
.mtfd-facts dt .mt-soon{font-size:9px;vertical-align:.3em}
.mtfd-tail{background:var(--mt-bone);color:var(--mt-ink);padding:0 0 clamp(90px,10vw,140px)}
.mt-dark+.mtfd-tail,.mttr+.mtfd-tail{padding-top:clamp(70px,8vw,110px)}
.mtfd-tail .mtfd-h2{margin-top:0}
/* owner rule: no eyebrow labels; the kicker tag above feature-page titles is hidden */
.mtfd-tag{display:none}

/* ---- 23b-mtscr.css ---- */
/* 23b console screen (mt-scr): the app window's inside on feature pages, as in the original feature-detail design:
   a rail of screens on the left (the current one lit), and a main area with a title row, figures, a chart and rows.
   Example figures carry an "Example" pill; nothing here is live data. Sizes are larger than the original's small
   mock so it reads at a glance. */
.mt-scr{display:grid;grid-template-columns:176px minmax(0,1fr);width:100%;height:100%;background:var(--mt-night);color:var(--mt-cloud);font-size:13px;text-align:left;overflow:hidden}
.mt-scr-side{display:flex;flex-direction:column;gap:3px;padding:18px 12px;border-right:1px solid color-mix(in srgb,var(--mt-cloud) 8%,transparent);background:color-mix(in srgb,var(--mt-pine) 60%,var(--mt-night))}
.mt-scr-side .lg{width:20px;height:20px;border-radius:5px;background:var(--mt-brass);margin:0 0 16px 8px;box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--mt-ink) 18%,transparent)}
.mt-scr-side span{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:12.5px;color:color-mix(in srgb,var(--mt-cloud) 58%,transparent)}
.mt-scr-side span .ico{width:15px;height:15px}
.mt-scr-side span.on{background:color-mix(in srgb,var(--mt-cloud) 9%,transparent);color:var(--mt-cloud)}
.mt-scr-side span.on .ico{color:var(--mt-brass)}
.mt-scr-main{display:flex;flex-direction:column;gap:14px;padding:20px 22px;min-width:0}
.mt-scr-top{display:flex;align-items:center;gap:12px}
.mt-scr-top b{margin-right:auto;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em}
.mt-scr-top span{font-size:11.5px;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mt-scr-top .pill{padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--mt-brass) 16%,transparent);color:var(--mt-brass);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.06em}
.mt-scr-kpi{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:8px}
.mt-scr-kpi div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent)}
.mt-scr-kpi span{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mt-scr-kpi b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.mt-scr-kpi b small{font-size:.55em;font-weight:600;letter-spacing:0;margin-left:3px;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mt-scr-kpi em{font-style:normal;font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mt-scr-chart{position:relative;flex:1;min-height:120px;padding:14px 14px 30px;border-radius:10px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent)}
.mt-scr-chart .mt-bars{height:100%}
.mt-scr-chart .mt-bars i{opacity:.4;transform-origin:50% 100%;transition:scale .9s cubic-bezier(.2,.8,.2,1) calc(var(--i)*40ms + 500ms)}
.mt-scr-chart .mt-bars i.is-today{opacity:1;box-shadow:0 0 12px color-mix(in srgb,var(--mt-brass) 60%,transparent)}
.js .mtfd:not(.is-on) .mt-scr-chart .mt-bars i{scale:1 0}
.mt-scr-ax{position:absolute;left:14px;right:14px;bottom:9px;display:flex;justify-content:space-between;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.06em;color:color-mix(in srgb,var(--mt-cloud) 50%,transparent)}
.mt-scr-rows{display:flex;flex-direction:column;gap:5px}
.mt-scr-rows p{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border-radius:8px;font-size:12.5px;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent);background:color-mix(in srgb,var(--mt-cloud) 3.5%,transparent)}
.mt-scr-rows i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--mt-brass)}
.mt-scr-rows small{color:color-mix(in srgb,var(--mt-cloud) 50%,transparent);font-size:11.5px}
.mt-scr-rows span{margin-left:auto;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mt-brass);white-space:nowrap}
.mtfd-scr>.mt-scr{position:absolute;inset:0}
.mtfd-scr.is-auto{height:auto}
.mtfd-scr.is-auto>.mt-scr{position:relative}
@media (max-width:809px){
  .mt-scr{grid-template-columns:1fr}
  .mt-scr-side{display:none}
  .mt-scr-main{padding:14px;gap:10px}
  .mt-scr-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mt-scr-kpi div{padding:9px 10px}
  .mt-scr-kpi b{font-size:18px}
  .mt-scr-rows p:nth-child(n+3){display:none}
  .mt-scr-rows p{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.mt-scr-chart .mt-bars i{transition:none}}

/* ---- 24-mtq.css ---- */
/* 24 pricing plans (mtq): four plan cards on a 3D ring (Free · Pro · Cloud · Cloud+), centred on Pro, on a dark stage.
   Modes are classes on the section, set by js/24-mtq.js: .is-3d (the stage pins and page scroll turns the ring),
   .is-swipe (a scroll-snap row) and none (a static grid: reduced motion and no JS). The ring only ever animates
   transform and opacity; geometry (--cw card width, --ch card height, --fit, --st, --pin) is set on resize. */
.mtq{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(100px,11vw,160px) 0 clamp(70px,8vw,120px);--sw:min(76vw,360px)}
.mtq-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.mtq-head .mt-eb{margin-bottom:18px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
html:not(.js) .mtq .mt-eb{opacity:1;translate:none}
.mtq-ring{position:relative;margin-top:clamp(44px,5vw,70px)}
.mtq-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4vw,22px);align-items:stretch}
.mtq-floor{display:none}

/* the card: a rack unit (screws, status LED) on the dark stage */
.mtq-card{position:relative;display:flex;border-radius:18px;-webkit-tap-highlight-color:transparent}
.mtq-face{--mt-mut:color-mix(in srgb,var(--mt-stone) 85%,var(--mt-ink));container-type:inline-size;position:relative;z-index:1;display:flex;flex-direction:column;width:100%;padding:26px 24px 22px;border-radius:inherit;background:var(--mt-cloud);color:var(--mt-ink);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 10%,transparent),0 34px 60px -28px #000}
.mtq-card.is-soon .mtq-face{background:color-mix(in srgb,var(--mt-cloud) 88%,var(--mt-fog))}
.mtq-card.is-pop .mtq-face{box-shadow:inset 0 0 0 2px var(--mt-brass),inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 10%,transparent),0 34px 60px -28px #000}
.mtq-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--mt-brass),0 0 28px 2px color-mix(in srgb,var(--mt-brass) 50%,transparent),0 30px 90px -20px color-mix(in srgb,var(--mt-brass) 42%,transparent)}
.mtq-dim{position:absolute;inset:0;z-index:4;border-radius:inherit;background:var(--mt-night);opacity:0;pointer-events:none}
.mtq-screw{position:absolute;top:10px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9c6bd,#8a877f);box-shadow:inset 0 0 0 1px #0002}
.mtq-screw.a{left:10px}
.mtq-screw.b{right:10px}
.mtq-screw::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;background:#0006;rotate:30deg}
.mtq-top{display:flex;align-items:center;gap:10px;min-height:22px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.mtq-nm{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.mtq-top em{margin-left:auto;font-style:normal;font-size:10px;padding:4px 7px;border-radius:5px;background:var(--mt-ink);color:var(--mt-bone);white-space:nowrap}
.mtq-top em.is-soon{background:var(--mt-brass);color:var(--mt-ink)}
.mtq-led{width:9px;height:9px;flex:none;border-radius:50%;background:var(--mt-fog)}
.mtq-led.on{background:var(--mt-brass);box-shadow:0 0 0 1px color-mix(in srgb,var(--mt-ink) 30%,transparent),0 0 8px var(--mt-brass);animation:mtLed 2.2s ease-in-out infinite}

/* Pro: the yellow band says it plainly, the price line repeats it */
.mtq-band{display:flex;align-items:center;justify-content:center;gap:10px;margin:-26px -24px 18px;padding:11px 14px 10px;border-radius:18px 18px 0 0;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;text-align:center;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--mt-ink) 18%,transparent)}
.mtq-band i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--mt-ink);box-shadow:inset 0 1px 0 #fff5}

.mtq-price{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 6px;margin:18px 0 0;line-height:1}
.mtq-price .per{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;letter-spacing:.02em;color:var(--mt-mut);padding:0 0 7px 4px}
.mtq-price .per.is-once{padding:0 0 6px 2px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--mt-ink)}
.mtq-price .per.is-once i{font-style:normal;margin-right:4px;color:var(--mt-mut)}
@container (max-width:286px){.mtq-price .per.is-once{padding-left:0} .mtq-price .per.is-once i{display:none}}
.mtq-price .per.is-once span{padding:0 4px 1px;background:linear-gradient(transparent 56%,var(--mt-brass) 56%,var(--mt-brass) 94%,transparent 94%)}
.mtq-roll{display:inline-flex;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(40px,3.1vw,50px);font-weight:800;letter-spacing:-.04em;height:1em;overflow:hidden;white-space:pre}
.mtq-col{position:relative;display:block;height:1em;overflow:hidden}
.mtq-col>i{display:block;font-style:normal;line-height:1;visibility:hidden}
.mtq-col>span{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center}
.mtq-col b{display:block;height:1em;line-height:1;font-weight:inherit;text-align:center}
.mtq-for{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--mt-mut)}
.mtq-for strong{color:var(--mt-ink);font-weight:600}
.mtq-inc{list-style:none;margin:18px 0 22px;padding:16px 0 0;border-top:1px solid var(--mt-fog);display:flex;flex-direction:column;gap:9px;flex:1}
.mtq-inc li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.42}
.mtq-inc li>span{min-width:0}
.mtq-inc li>i{width:8px;height:8px;margin-top:6px;border-radius:2px;background:var(--mt-brass);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 22%,transparent);flex:none}
.mtq-inc em{font-style:normal;margin-left:6px;padding:2px 6px;border-radius:4px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--mt-ink) 8%,transparent);color:var(--mt-mut);white-space:nowrap;vertical-align:1px}
.mtq-btn{width:100%}
.mtq-rcpt{margin:0 0 18px;padding:10px 12px;border-radius:8px;background:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 10%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.mtq-rcpt div{display:flex;align-items:baseline;gap:8px}
.mtq-rcpt div+div{margin-top:6px;padding-top:6px;border-top:1px dashed color-mix(in srgb,var(--mt-ink) 22%,transparent)}
.mtq-rcpt dt{color:var(--mt-mut)}
.mtq-rcpt dt::after{content:"";display:inline-block;width:0}
.mtq-rcpt dd{margin:0 0 0 auto;color:var(--mt-ink);font-weight:700}
.mtq-rcpt div+div dd{padding:0 4px;border-radius:3px;background:var(--mt-brass)}
/* Cloud+'s add-on line (Fleet): the receipt look, one row, with the Coming soon chip of the plan lists */
.mtq-add div{flex-wrap:wrap;row-gap:4px}
.mtq-add dt em{font-style:normal;margin-left:6px;padding:2px 6px;border-radius:4px;font-size:9.5px;letter-spacing:.08em;background:color-mix(in srgb,var(--mt-ink) 8%,transparent);color:var(--mt-mut);white-space:nowrap;vertical-align:1px}
.mtq-add dd{white-space:nowrap}
/* the buttons sit on white cards inside a dark section: use the light-ground faces and an ink focus ring */
.mtq .mtq-face .mt-btn.mt-ghost{--face:var(--mt-ink);--base:#000;--fg:var(--mt-cloud);--led:var(--mt-brass);--chip:color-mix(in srgb,var(--mt-cloud) 12%,transparent);--chipfg:var(--mt-brass)}
.mtq .mtq-face .mt-btn.mt-ghost.is-off{--face:var(--mt-cloud);--base:color-mix(in srgb,var(--mt-ink) 28%,var(--mt-fog));--fg:var(--mt-ink);--led:var(--mt-fog)}
.mtq .mtq-face a:focus-visible{outline-color:var(--mt-ink)!important;box-shadow:0 0 0 2px var(--mt-cloud)!important}
.mt-btn.is-off{cursor:default;opacity:.7}
.mt-btn.is-off:hover{transform:none}
.mt-btn.is-off .mt-cap{translate:0 -4px}

/* the bar under the ring: position tiles (split-flap style), progress rail, FAQ line */
.mtq-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(30px,4vw,48px)}
.mtq-hint{display:none;align-items:center;gap:10px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mtq-hint span.is-3d,.mtq-hint span.is-sw{display:none}
.mtq.is-3d .mtq-hint,.mtq.is-swipe .mtq-hint{display:inline-flex}
.mtq.is-3d .mtq-hint span.is-3d,.mtq.is-swipe .mtq-hint span.is-sw{display:inline}
.mtq-mouse{position:relative;display:block;width:14px;height:21px;border-radius:8px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-cloud) 45%,transparent)}
.mtq-mouse i{position:absolute;left:50%;top:4px;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:var(--mt-brass);animation:mtqWheel 1.8s cubic-bezier(.2,.8,.2,1) infinite}
.mtq.is-swipe .mtq-mouse{width:22px;height:14px;border-radius:7px}
.mtq.is-swipe .mtq-mouse i{left:5px;top:50%;width:5px;height:2px;margin:-1px 0 0;animation-name:mtqSwipe}
@keyframes mtqWheel{0%{translate:0 0;opacity:1}70%{translate:0 6px;opacity:0}100%{translate:0 0;opacity:0}}
@keyframes mtqSwipe{0%{translate:0 0;opacity:1}70%{translate:9px 0;opacity:0}100%{translate:0 0;opacity:0}}
.mtq-dots{position:relative;display:none;gap:6px;padding:6px 6px 10px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtq.is-3d .mtq-dots,.mtq.is-swipe .mtq-dots{display:flex}
.mtq-dot{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:0;border-radius:7px;background:var(--mt-pine);color:var(--mt-bone);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 2px 0 #000;transform-origin:50% 50%;transition:background .3s,color .3s}
.mtq-dot b{font-weight:500;color:color-mix(in srgb,var(--mt-bone) 45%,transparent);transition:color .3s}
.mtq-dot::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:#000;opacity:.45;pointer-events:none}
.mtq-dot:hover{background:color-mix(in srgb,var(--mt-pine) 80%,var(--mt-cloud))}
.mtq-dot[aria-current="true"]{background:var(--mt-brass);color:var(--mt-ink)}
.mtq-dot[aria-current="true"] b{color:color-mix(in srgb,var(--mt-ink) 55%,transparent)}
.mtq-dot[aria-current="true"]::after{background:color-mix(in srgb,var(--mt-ink) 45%,transparent)}
.mtq-dot.is-flip{animation:mtqFlip .35s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes mtqFlip{from{transform:perspective(300px) rotateX(-100deg)}to{transform:perspective(300px) rotateX(0)}}
.mtq-rail{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);overflow:hidden}
.mtq-rail i{display:block;height:100%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass);transform-origin:0 50%;transform:scaleX(.3333)}
.mtq-faq{margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mtq-faq a{display:inline-flex;align-items:center;gap:6px;margin-left:4px;color:var(--mt-cloud);text-decoration:none;box-shadow:inset 0 -2px 0 var(--mt-brass);transition:box-shadow .25s,color .25s}
.mtq-faq a:hover{box-shadow:inset 0 -1.2em 0 var(--mt-brass);color:var(--mt-ink)}
.mtq-faq svg{transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mtq-faq a:hover svg{translate:3px 0}
.mtq-note{margin:34px auto 0;max-width:760px;text-align:center;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}

/* entrance: the price wheels roll once (never blank: before the roll each wheel shows its final glyph) */
.mtq-card:nth-child(2){--d:50ms}
.mtq-card:nth-child(3){--d:100ms}
.mtq-card:nth-child(4){--d:150ms}
.js .mtq:not(.is-on) .mtq-col>span{translate:0 -90%}
.mtq.is-on .mtq-col>span{transition:translate .34s cubic-bezier(.34,1.2,.5,1) calc(var(--d,0ms) + var(--c,0)*25ms)}

/* static grid (reduced motion, no JS): four across, two by two on tablets, one column on phones */
@media (max-width:1099px){.mtq:not(.is-3d):not(.is-swipe) .mtq-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){
  .mtq:not(.is-3d):not(.is-swipe) .mtq-track{grid-template-columns:minmax(0,1fr)}
  .mtq .mt-hd{font-size:clamp(36px,10vw,48px)}
}

/* 3D ring: the stage pins for --pin px of scroll; cards are absolutely placed, each turned by its own transform
   under the track's perspective (no preserve-3d, so the order is the z-index the script sets) */
.mtq.is-3d{padding:0 0 clamp(60px,7vw,100px)}
.mtq.is-3d .mtq-pin{position:relative;height:calc(100vh + var(--pin,210vh))}
.mtq.is-3d .mtq-stage{position:sticky;top:0;height:100vh;overflow:hidden;overflow:clip;padding-top:var(--st,84px)}
.mtq.is-3d .mtq-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 46% at 50% 56%,color-mix(in srgb,var(--mt-cloud) 7%,transparent),transparent 72%),radial-gradient(30% 16% at 50% calc(var(--st,84px) + var(--hh,120px) + var(--ch,560px)*var(--fit,1)),color-mix(in srgb,var(--mt-brass) 12%,transparent),transparent 70%)}
.mtq.is-3d .mtq-in{position:relative}
.mtq.is-3d .mt-hd{font-size:clamp(34px,3.3vw,54px)}
.mtq.is-3d .mt-hd-l{display:inline}
.mtq.is-3d .mtq-head .mt-eb{margin-bottom:14px}
.mtq.is-3d .mtq-ring{height:calc(var(--ch,560px)*var(--fit,1));margin-top:clamp(18px,3.4vh,34px)}
.mtq.is-3d .mtq-track{display:block;position:absolute;left:0;right:0;top:0;height:var(--ch,560px);transform:scale(var(--fit,1));transform-origin:50% 0;perspective:1500px;perspective-origin:50% 46%}
.mtq.is-3d .mtq-card{position:absolute;left:0;top:0;width:var(--cw,380px);height:var(--ch,560px);transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0)}
.mtq.is-3d .mtq-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mtq.is-3d .mtq-card.is-side{cursor:pointer}
.mtq.is-3d .mtq-card.is-side>*{pointer-events:none}
.mtq.is-3d .mtq-card.is-side:hover .mtq-face{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mt-brass) 70%,var(--mt-ink)),0 34px 60px -28px #000}
.mtq.is-3d .mtq-card.is-gone{pointer-events:none}
.mtq.is-3d .mtq-floor{display:block;position:absolute;left:50%;top:calc(var(--ch,560px)*var(--fit,1) - 96px);width:min(1060px,92%);aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:.6;transform:perspective(1400px) rotateX(80deg)}
.mtq-floor i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -.4deg,color-mix(in srgb,var(--mt-cloud) 26%,transparent) 0 .7deg,transparent .7deg 6deg);-webkit-mask:radial-gradient(closest-side,transparent 93%,#000 93.5%,#000 98%,transparent 98.5%);mask:radial-gradient(closest-side,transparent 93%,#000 93.5%,#000 98%,transparent 98.5%)}
.mtq-floor::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mt-cloud) 12%,transparent);background:repeating-conic-gradient(from -1deg,var(--mt-brass) 0 2deg,transparent 2deg 90deg);-webkit-mask:radial-gradient(closest-side,transparent 91%,#000 91.5%,#000 99%,transparent 99.5%);mask:radial-gradient(closest-side,transparent 91%,#000 91.5%,#000 99%,transparent 99.5%)}
.mtq.is-3d .mtq-bar{margin-top:clamp(16px,3vh,30px)}
.mtq.is-3d .mtq-note{margin-top:0}
@media (max-height:800px){.mtq.is-3d .mtq-head .mt-eb{display:none} .mtq.is-3d .mt-hd{font-size:clamp(30px,2.9vw,44px)}}

/* swipe row: full-bleed scroll-snap track, the centred card turned to face you, its neighbours peeking */
.mtq.is-swipe .mtq-ring{margin-top:clamp(30px,6vw,52px)}
.mtq.is-swipe .mtq-track{display:flex;gap:12px;margin:0 calc(var(--pad,20px)*-1);padding:14px calc(50% + var(--pad,20px) - var(--sw)/2) 30px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mtq.is-swipe .mtq-track::-webkit-scrollbar{display:none}
.mtq.is-swipe .mtq-card{flex:0 0 var(--sw);scroll-snap-align:center;scroll-snap-stop:always}
.mtq.is-swipe .mtq-card:focus-visible{outline-offset:-3px!important}
.mtq.is-swipe .mtq-bar{margin-top:10px}
@media (max-width:520px){
  .mtq.is-swipe .mtq-dot{height:40px;padding:0 11px}
  .mtq.is-swipe .mtq-dot b{display:none}
  .mtq.is-swipe .mtq-face{padding:24px 20px 20px}
  .mtq.is-swipe .mtq-band{margin:-24px -20px 16px}
  .mtq-faq{text-align:center}
}
@media (prefers-reduced-motion:reduce){.mtq-mouse i{animation:none}}

/* ---- 25-mtcp.css ---- */
/* 25 compare table (mtcp): the kits side by side. Sticky column heads with a call to action each, grouped
   rows that rise in one after another, LEDs for "included". Scrolls sideways inside its frame on phones. */
.mtcp{position:relative;background:var(--mt-cloud);color:var(--mt-ink);padding:clamp(100px,11vw,160px) 0}
.mtcp-sub{margin:22px 0 0;max-width:620px;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.mtcp-scroll{position:relative;margin-top:clamp(40px,5vw,60px);overflow-x:auto;border-radius:20px;box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtcp-t{width:100%;min-width:720px;border-collapse:separate;border-spacing:0}
.mtcp-t thead th{position:sticky;top:0;z-index:2;background:var(--mt-bone);padding:20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--mt-fog)}
.mtcp-t thead th b{display:block;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:22px;letter-spacing:-.03em;margin-bottom:14px}
.mtcp-f{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut);font-weight:400}
.mtcp-b{min-height:44px;font-size:13px}
.mtcp .mtcp-b:focus-visible{outline-offset:-3px!important}
.mtcp-t thead th.is-pop{background:var(--mt-ink);color:var(--mt-cloud)}
.mtcp-t tbody th,.mtcp-t tbody td{padding:16px 20px;border-bottom:1px solid var(--mt-fog);text-align:left;font-size:15px;line-height:1.4}
.mtcp-t tbody th{font-weight:500}
.mtcp-t tbody th small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--mt-mut)}
.mtcp-t tbody tr:not(.mtcp-g){transition:opacity .45s calc(min(var(--i),10)*30ms),translate .55s cubic-bezier(.2,.8,.2,1) calc(min(var(--i),10)*30ms)}
.js .mtcp:not(.is-on) .mtcp-t tbody tr:not(.mtcp-g){opacity:0;translate:0 10px}
.mtcp-t tbody tr:not(.mtcp-g):hover{background:var(--mt-bone)}
.mtcp-t td.is-pop{background:color-mix(in srgb,var(--mt-brass) 9%,transparent)}
.mtcp-g th{padding:22px 20px 10px!important;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut);font-weight:400!important;border-bottom:1px solid var(--mt-fog)}
/* "included": a yellow LED with a thin black ring (inset, so the dot keeps its size and place) */
.mtcp-led{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--mt-brass);box-shadow:inset 0 0 0 1px #0a0a0a,0 0 8px var(--mt-brass)}
@media (min-resolution:2dppx){.mtcp-led{box-shadow:inset 0 0 0 1.5px #0a0a0a,0 0 8px var(--mt-brass)}}
.mtcp-no{color:var(--mt-mut)}
.mtcp-tag{display:inline-block;padding:3px 8px;border-radius:5px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--mt-ink) 7%,transparent);color:var(--mt-mut)}
.mtcp-tag.is-b{background:color-mix(in srgb,var(--mt-brass) 22%,transparent);color:var(--mt-ink)}
.mtcp-t td small{display:block;margin-top:3px;font-size:12.5px;color:var(--mt-mut)}
/* "Coming soon": the site's split-flap word (core .mt-flap: black tiles, off-white letters, the hinge line, the last
   tile yellow) set small on the row's baseline, with a visually hidden "Coming soon" for screen readers. "coming soon."
   on wide screens, "soon." where the columns are narrow. The tiles show without JS; with it they flip in once as the
   table appears (core reduced motion makes that instant). */
.mtcp-soon{display:inline-flex;align-items:baseline;vertical-align:-1px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);line-height:1;letter-spacing:0;color:var(--mt-ink)}
.mtcp .mtcp-t td .mtcp-soon,.mtcp .mtcp-t td .mtcp-soon span{font-size:14px}
.mtcp-fw{display:inline-flex;align-items:baseline;white-space:nowrap}
.mtcp-soon .mt-flap{gap:2px}
.mtcp-soon .mt-fl::after{height:1px;margin-top:-.5px;opacity:.45}
.mtcp-soon .mt-fl{min-width:.8em;padding:0 .05em;border-radius:2px;transform:none;opacity:1;transition-delay:calc(160ms + var(--i)*45ms),calc(160ms + var(--i)*45ms)}
.js .mtcp:not(.is-on) .mtcp-soon .mt-fl{transform:rotateX(-100deg);opacity:0}
.mtcp-gap{display:inline-block;width:.3em}
.mtcp-t td span+.mtcp-soon{display:flex;width:max-content;margin-top:7px}
@media (max-width:1099px){.mtcp-soon .is-w1{display:none}}
.mtcp-note{margin:18px 0 0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;color:var(--mt-mut)}
@media (max-width:809px){
  .mtcp .mt-hd{font-size:clamp(36px,10vw,48px)}
  .mtcp-b{display:none}
  .mtcp-t thead th b{margin-bottom:0}
}
.mtcp-t.is-four{min-width:860px}
.mtcp-t.is-four td span{font-size:14px}

/* ---- 26-mtfq.css ---- */
/* 26 FAQ console (mtfq): the feature-detail page (mtfd) with its window turned into the help desk. A rail of topics
   down the left (sticky while you read), the chosen topic on the right: its heading, three facts and the questions
   as rows that open in place. A search box filters every answer at once. Without JavaScript every topic shows. */
.mtfq{interpolate-size:allow-keywords}
.mtfq .mtfd-tag span .ico{width:15px;height:15px}
.mtfq-win{overflow:visible}
.mtfq-win .mtfd-bar{border-radius:20px 20px 0 0}
.mtfq-scr{--sw:248px;display:grid;grid-template-columns:var(--sw) minmax(0,1fr);min-height:640px;border-radius:0 0 20px 20px;color:var(--mt-cloud);font-size:15px;background:linear-gradient(90deg,color-mix(in srgb,var(--mt-pine) 60%,var(--mt-night)) 0 var(--sw),color-mix(in srgb,var(--mt-cloud) 8%,transparent) var(--sw) calc(var(--sw) + 1px),var(--mt-night) calc(var(--sw) + 1px))}
.mtfq-side{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:3px;padding:18px 12px}
.mtfq-side .lg{width:20px;height:20px;border-radius:5px;background:var(--mt-brass);margin:0 0 16px 8px;box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--mt-ink) 18%,transparent)}
.mtfq-tab{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent);text-decoration:none;font-size:13.5px;line-height:1.25;transition:background .25s,color .25s}
.mtfq-tab .ico{width:17px;height:17px;transition:color .25s}
.mtfq-tab em{font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mtfq-tab:hover{background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);color:var(--mt-cloud)}
.mtfq-tab.on{background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);color:var(--mt-cloud)}
.mtfq-tab.on .ico{color:var(--mt-brass)}
.mtfq-tab.on em{background:var(--mt-brass);color:var(--mt-ink)}
.mtfq-main{display:flex;flex-direction:column;gap:14px;padding:18px clamp(16px,2.4vw,30px) 30px;min-width:0}
.mtfq-top{display:flex;align-items:center;gap:12px}
.mtfq-find{flex:1;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:11px;background:color-mix(in srgb,var(--mt-cloud) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent);color:color-mix(in srgb,var(--mt-cloud) 60%,transparent);transition:box-shadow .25s}
.mtfq-find:focus-within{box-shadow:inset 0 0 0 1.5px var(--mt-brass)}
.mtfq-find .ico{width:17px;height:17px}
.mtfq-find input{flex:1;min-width:0;height:42px;border:0;background:none;color:var(--mt-cloud);font:inherit;font-size:16px;outline:none}
.mtfq-find input::placeholder{color:color-mix(in srgb,var(--mt-cloud) 45%,transparent)}
.mtfq-find input::-webkit-search-cancel-button{filter:invert(1)}
.mtfq-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;background:color-mix(in srgb,#22c55e 16%,transparent);color:#6ee7a0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
.mtfq-pill i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}
.mtfq-res{margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mtfq-res:empty{display:none}
.mtfq-cats{display:flex;flex-direction:column;gap:34px}
.js .mtfq:not(.is-search) .mtfq-cat:not(.is-cur){display:none}
.mtfq-cat[hidden]{display:none!important}
.mtfq-cat{scroll-margin-top:100px}
.mtfq-ch{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0 14px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.1}
.mtfq-ch .ico{width:24px;height:24px;color:var(--mt-brass)}
.mtfq-ch em{margin-left:auto;font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mtfq-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.mtfq.is-search .mtfq-kpi{display:none}
.mtfq-kpi div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent)}
.mtfq-kpi span{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mtfq-kpi b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1.05}
.mtfq-kpi em{font-style:normal;font-size:12px;line-height:1.35;color:color-mix(in srgb,var(--mt-cloud) 58%,transparent)}
.mtfq-qs{display:flex;flex-direction:column;gap:6px}
.mtfq-q{border-radius:11px;background:color-mix(in srgb,var(--mt-cloud) 3.5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 4%,transparent);transition:background .25s;scroll-margin-top:110px}
.mtfq-q[hidden]{display:none}
.mtfq-q:hover,.mtfq-q[open]{background:color-mix(in srgb,var(--mt-cloud) 6.5%,transparent)}
.mtfq-q summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:16px;line-height:1.4}
.mtfq-q summary::-webkit-details-marker{display:none}
.mtfq-q summary>i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px color-mix(in srgb,var(--mt-brass) 60%,transparent)}
.mtfq-q summary>span{flex:1}
.mtfq-pl{position:relative;width:22px;height:22px;flex:none;border-radius:6px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);transition:rotate .35s cubic-bezier(.34,1.56,.64,1),background .25s}
.mtfq-pl::before,.mtfq-pl::after{content:"";position:absolute;left:6px;right:6px;top:10.25px;height:1.5px;border-radius:1px;background:var(--mt-cloud)}
.mtfq-pl::after{rotate:90deg}
.mtfq-q[open] .mtfq-pl{rotate:45deg;background:var(--mt-brass)}
.mtfq-q[open] .mtfq-pl::before,.mtfq-q[open] .mtfq-pl::after{background:var(--mt-ink)}
.mtfq-q::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete}
.mtfq-q[open]::details-content{block-size:auto}
.mtfq-a{padding:0 18px 16px 35px}
.mtfq-a p{margin:0 0 10px;max-width:72ch;font-size:15.5px;line-height:1.62;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtfq-a p:last-child{margin-bottom:0}
.mtfq-a a{color:var(--mt-cloud);text-decoration:underline;text-decoration-color:var(--mt-brass);text-underline-offset:3px}
.mtfq-a a:hover{color:var(--mt-brass)}
.mtfq-a .mt-soon{vertical-align:.1em}
.mtfq-a .mtfq-tips{display:grid;gap:8px;max-width:72ch;margin:0 0 12px;padding:0;list-style:none}
.mtfq-tips li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.58;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtfq-tips li::before{content:"";position:absolute;left:3px;top:.64em;width:7px;height:7px;border-radius:2px;background:var(--mt-brass)}
.mtfq-tips b{font-weight:600;color:var(--mt-cloud)}
.mtfq-a .mtfq-tm{font-size:12px;opacity:.7}
.mtfq-none{margin:10px 0 0;padding:18px;border-radius:11px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtfq-none a{color:var(--mt-brass)}
.mtfq .mtfd-rack a{color:inherit;text-decoration:underline;text-decoration-color:var(--mt-brass);text-underline-offset:3px}
@media (max-width:1099px){.mtfq-scr{--sw:212px} .mtfq-kpi em{display:none}}
@media (max-width:809px){
  .mtfq-scr{grid-template-columns:1fr;background:var(--mt-night);min-height:0}
  .mtfq-side{position:sticky;top:0;z-index:2;flex-direction:row;gap:6px;padding:10px;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--mt-pine) 60%,var(--mt-night));border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
  .mtfq-side{transition:top .5s cubic-bezier(.2,.8,.2,1)} html.mthd-on .mtfq-side{top:66px}
  .mtfq-side::-webkit-scrollbar{display:none}
  .mtfq-side .lg{display:none}
  .mtfq-tab{flex:none;grid-template-columns:auto auto auto;padding:8px 10px;white-space:nowrap}
  .mtfq-pill{display:none}
  .mtfq-kpi{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mtfq-kpi div{padding:10px}
  .mtfq-kpi b{font-size:18px}
  .mtfq-a{padding:0 14px 14px 16px}
  .mtfq-tips li{font-size:15px}
  .mtfq-q summary{padding:13px 14px;font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){.mtfq-q::details-content{transition:none}}

/* ---- 26b-osd.css ---- */
/* 26b OS settings diagrams (osd): "where to tap" in a phone's own Settings, drawn by us as small phone screens in a
   row. Not screenshots: no logos, app icons or system glyphs, grey bars stand in for the rows that don't matter, and
   the row to tap is yellow with its step number. Used in the FAQ (Battery, heat & charging) and meant for any other
   steps in a phone's settings (Shortcuts automations, Modes and Routines). Registered in docs/app-visuals-registry.md
   (OS settings visuals): re-check the labels when iOS, One UI or Android rename them.
   Markup (the screens are decoration, aria-hidden; each step's line under its screen is the text people and screen
   readers get, as an ordered list):
   <figure class="osd [is-day]">
     <figcaption class="osd-hd"><b>iPhone 15 and later</b> <span class="osd-os">iOS 27</span></figcaption>
     <ol class="osd-row" role="list">
       <li class="osd-st"><div class="osd-ph" aria-hidden="true"><div class="osd-sc">
         <span class="osd-sb"><i></i><i></i></span>              status bar (abstract)
         <span class="osd-top">                                   the line over the title (leave out on the first page)
           <span class="osd-bk">Settings</span>                   back to the page before
           <span class="osd-bt [is-go|is-also] [is-l]"><i class="osd-n">1</i><i class="osd-plus"></i></span>  a
                                                                  title-bar button: a plus, or a word like Edit
                                                                  (on the right; is-l: on the left)
         </span>
         <span class="osd-tt [is-sk]">Battery</span>              page title (is-sk, empty: a grey bar, title unknown)
         <span class="osd-chart"><i></i>×8</span>                 a grey chart, for pages that open with one
         <span class="osd-tiles"><i></i>×6</span>                 grey tiles (a grid of shortcuts)
         <span class="osd-seg [is-go|is-also]"><span>Modes</span><span class="is-on">Routines</span></span>  tabs
         <span class="osd-car [is-go]"><i class="osd-n">2</i><i class="osd-cv is-l"></i><span>Shortcut</span><i
           class="osd-cv"></i></span><span class="osd-dots"><i></i><i class="is-on"></i><i></i></span>  a swipe card
         <span class="osd-sh">If</span>                           small heading over a group
         <span class="osd-g [has-ic]">                            a group of rows (has-ic: rows with icon squares)
           <span class="osd-r osd-sk"></span>                     a row that doesn't matter (grey bars)
           <span class="osd-r [is-go|is-also|is-col|is-btn]">     is-go: the row to tap (yellow, number first);
                                                                  is-also: check it's on (yellow outline);
                                                                  is-col: label over a slider; is-btn: a centred button
             <i class="osd-n">2</i>                               the step number (is-go rows)
             <i class="osd-ic"></i> <i class="osd-rd [is-on]"></i> icon square · choice
             <span>Charging</span>                                the label, exactly as on the phone
             <em class="osd-v">80%</em> <i class="osd-cv"></i>     value · opens a page
             <i class="osd-sw [is-on]"></i> <i class="osd-ck"></i> switch · tick
             <span class="osd-sl" style="--p:0%"></span><span class="osd-tk"><b>80</b><span>85</span></span>  slider
           </span>
         </span>
       </div></div><p class="osd-do"><b aria-hidden="true">2</b>Tap Charging</p></li>
     </ol>
     <p class="osd-path">Settings <span class="osd-gt">›</span> Battery …</p>
     <p class="osd-note">Our own drawing of iOS 27. Labels can shift a little between versions and models.</p>
   </figure>
   Put a space or a line break between inline blocks that carry text (the FAQ's structured data reads the text as is).
   Wide: the screens sit in one row (up to 230px each). Narrow (the figure under 540px): the row scrolls sideways with
   snap points and the next screen peeking in; js/26b-osd.js makes it keyboard-focusable while it scrolls. The text
   inside a screen scales with the screen (container units). */
.osd{--osd-hi:#ffff06;--osd-ink:#141416;--osd-fg:var(--mt-cloud);--osd-bz:#050507;--osd-bg:#131418;--osd-card:#202127;--osd-tx:#f3f3f5;--osd-mu:#9a9ba3;--osd-sk:rgba(255,255,255,.13);--osd-ln:rgba(255,255,255,.075);--osd-pd:16px;
  container-type:inline-size;position:relative;max-width:980px;margin:16px 0 14px;padding:var(--osd-pd);overflow:hidden;border-radius:14px;background:color-mix(in srgb,var(--osd-fg) 3%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--osd-fg) 9%,transparent);color:var(--osd-fg);text-align:left}
.osd.is-lt{--osd-fg:var(--mt-ink)}
.osd.is-day{--osd-bz:#1b1c20;--osd-bg:#f2f2f5;--osd-card:#fff;--osd-tx:#141416;--osd-mu:#6e6f76;--osd-sk:rgba(20,20,22,.12);--osd-ln:rgba(20,20,22,.08)}
.osd-hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 14px}
.osd-hd b{font-weight:650;font-size:15px;line-height:1.3}
.osd-os{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:99px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--osd-fg) 22%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4;letter-spacing:.03em;color:color-mix(in srgb,var(--osd-fg) 78%,transparent);white-space:nowrap}
.osd-os::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 5px #22c55e}
.osd-row{display:flex;gap:14px;margin:0;padding:0;list-style:none}
.osd-st{display:flex;flex-direction:column;gap:10px;flex:1 1 0;min-width:0;max-width:230px;margin:0;padding:0}
.osd-st::marker{content:none}
/* the phone: a plain dark body with an even bezel, no camera cut-out or buttons */
.osd-ph{container-type:inline-size;position:relative;aspect-ratio:10/15.5;padding:3.2%;border-radius:12% / 7.7%;background:var(--osd-bz);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 16px 30px -20px rgba(0,0,0,.9)}
.osd-sc{display:block;height:100%;overflow:hidden;padding:0 .7em;border-radius:9.4% / 6%;background:var(--osd-bg);color:var(--osd-tx);font:500 10px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:6.3cqi;letter-spacing:0;-webkit-mask-image:linear-gradient(#000 80%,transparent 99%);mask-image:linear-gradient(#000 80%,transparent 99%)}
.osd-sb{display:flex;justify-content:space-between;align-items:center;height:2.4em;padding:0 .45em}
.osd-sb i{display:block;width:2.3em;height:.5em;border-radius:.3em;background:var(--osd-sk)}
.osd-sb i+i{width:3.3em}
.osd-top{display:flex;align-items:center;gap:.4em;min-height:1.6em;margin:0 0 .25em}
.osd-bk{display:block;margin:0 0 .3em;font-size:.84em;line-height:1.3;color:var(--osd-mu)}
.osd-bk::before{content:"";display:inline-block;width:.42em;height:.42em;margin:0 .45em .08em .15em;border:solid currentColor;border-width:0 0 .14em .14em;rotate:45deg}
.osd-tt{display:block;margin:0 0 .5em;padding:0 .12em;font-weight:700;font-size:1.55em;line-height:1.1;letter-spacing:-.01em;overflow-wrap:break-word}
.osd-top .osd-bk{margin:0}
.osd-sb+.osd-tt{margin-top:1.19em}
.osd-tt.is-sk::before{content:"";display:block;width:58%;height:.42em;margin:.3em 0 .3em;border-radius:.3em;background:var(--osd-sk)}
.osd-bt{display:inline-flex;align-items:center;gap:.35em;min-height:1.6em;margin-left:auto;padding:.15em .6em;border-radius:1em;background:var(--osd-card);font-weight:600;font-size:.88em;line-height:1.2}
.osd-bt.is-go{background:var(--osd-hi);color:var(--osd-ink);box-shadow:0 .3em 1em -.2em rgba(255,255,6,.45)}
.osd-bt.is-also{box-shadow:inset 0 0 0 .14em var(--osd-hi)}
.osd-bt.is-l{margin-left:0;margin-right:auto}
.osd-bt .osd-n{width:1.35em;height:1.35em;font-size:.9em}
.osd-plus{display:block;width:.85em;height:.85em;background:linear-gradient(currentColor,currentColor) center/100% .15em no-repeat,linear-gradient(currentColor,currentColor) center/.15em 100% no-repeat}
.osd-sh{display:block;margin:.2em .6em .35em;font-size:.78em;color:var(--osd-mu)}
.osd-chart{display:flex;align-items:flex-end;gap:.3em;height:4.4em;margin:0 0 .55em;padding:.65em .75em;border-radius:.8em;background:var(--osd-card)}
.osd-chart i{flex:1;height:50%;border-radius:.16em .16em 0 0;background:var(--osd-sk)}
.osd-chart i:nth-child(2){height:72%} .osd-chart i:nth-child(3){height:90%} .osd-chart i:nth-child(4){height:64%}
.osd-chart i:nth-child(5){height:38%} .osd-chart i:nth-child(6){height:56%} .osd-chart i:nth-child(7){height:80%} .osd-chart i:nth-child(8){height:30%}
.osd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.45em;margin:0 0 .55em}
.osd-tiles i{position:relative;height:3.3em;border-radius:.7em;background:var(--osd-card)}
.osd-tiles i::before,.osd-tiles i::after{content:"";position:absolute;left:.6em;border-radius:.3em;background:var(--osd-sk)}
.osd-tiles i::before{top:.55em;width:1.1em;height:1.1em}
.osd-tiles i::after{bottom:.6em;width:55%;height:.45em}
.osd-seg{display:flex;gap:.2em;margin:0 0 .55em;padding:.2em;border-radius:.75em;background:var(--osd-card);color:var(--osd-mu)}
.osd-seg>span{flex:1;padding:.4em .2em;border-radius:.58em;text-align:center}
.osd-seg>.is-on{background:var(--osd-bg);color:var(--osd-tx);font-weight:650}
.osd-seg.is-also{box-shadow:inset 0 0 0 .14em var(--osd-hi)}
.osd-car{display:flex;align-items:center;gap:.5em;min-height:4.6em;margin:0 0 .35em;padding:.5em .8em;border-radius:.8em;background:var(--osd-card);font-weight:650;font-size:1.05em}
.osd-car>span{flex:1;text-align:center}
.osd-car.is-go{margin:0 -.4em .35em;background:var(--osd-hi);color:var(--osd-ink);box-shadow:0 .35em 1.1em -.25em rgba(255,255,6,.45)}
.osd-cv.is-l{margin:0 0 0 .2em;rotate:-135deg}
.osd-dots{display:flex;justify-content:center;gap:.35em;margin:0 0 .6em}
.osd-dots i{width:.4em;height:.4em;border-radius:50%;background:var(--osd-sk)}
.osd-dots i.is-on{background:var(--osd-tx)}
.osd-g{display:block;margin:0 0 .55em;border-radius:.8em;background:var(--osd-card)}
.osd-r{position:relative;display:flex;align-items:center;gap:.55em;min-height:2.45em;padding:.42em .7em;border-top:1px solid var(--osd-ln)}
.osd-r:first-child{border-top-color:transparent}
.osd-r>span:not([class]),.osd-lb>span:not([class]){flex:1;min-width:0;overflow-wrap:break-word}
.osd-sk::after{content:"";width:var(--w,58%);height:.55em;border-radius:.3em;background:var(--osd-sk)}
.osd-sk:nth-child(3n+2){--w:70%} .osd-sk:nth-child(3n){--w:46%}
.has-ic>.osd-sk::before,.osd-ic{content:"";flex:none;width:1.45em;height:1.45em;border-radius:.42em;background:var(--osd-sk)}
.osd-cv{flex:none;width:.46em;height:.46em;margin:0 .2em 0 auto;border:solid currentColor;border-width:.14em .14em 0 0;rotate:45deg;opacity:.5}
.osd-v{margin-left:auto;font-style:normal;color:var(--osd-mu);white-space:nowrap}
.osd-n{flex:none;display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--osd-ink);color:var(--osd-hi);font-style:normal;font-weight:750;font-size:.92em;line-height:1}
/* the row to tap, and a row to check */
.osd-r.is-go{z-index:1;margin:0 -.4em;padding-left:.95em;padding-right:1.05em;border-radius:.62em;border-top-color:transparent;background:var(--osd-hi);color:var(--osd-ink);font-weight:650;box-shadow:0 .35em 1.1em -.25em rgba(255,255,6,.45)}
.osd-r.is-also{border-radius:.62em;border-top-color:transparent;box-shadow:inset 0 0 0 .14em var(--osd-hi)}
.osd-r.is-go+.osd-r,.osd-r.is-also+.osd-r{border-top-color:transparent}
.is-go .osd-v{color:inherit;opacity:.78}
.is-go .osd-cv{opacity:.8}
.osd-r.is-btn{justify-content:center;font-weight:600}
.osd-r.is-btn>span{text-align:center}
/* switch, choice, tick */
.osd-sw{flex:none;position:relative;width:2.15em;height:1.22em;margin-left:auto;border-radius:1em;background:var(--osd-sk)}
.osd-sw::after{content:"";position:absolute;top:.16em;left:.16em;width:.9em;height:.9em;border-radius:50%;background:var(--osd-mu)}
.osd-sw.is-on{background:var(--osd-tx)}
.osd-sw.is-on::after{left:auto;right:.16em;background:var(--osd-bg)}
.is-go .osd-sw.is-on{background:var(--osd-ink)} .is-go .osd-sw.is-on::after{background:var(--osd-hi)}
.osd-rd{flex:none;width:1.12em;height:1.12em;border-radius:50%;box-shadow:inset 0 0 0 .13em var(--osd-mu)}
.osd-rd.is-on{box-shadow:inset 0 0 0 .13em currentColor;background:radial-gradient(circle,currentColor 0 34%,transparent 38%)}
.osd-ck{flex:none;width:.42em;height:.78em;margin:0 .25em .15em auto;border:solid currentColor;border-width:0 .15em .15em 0;rotate:45deg}
/* a label over a slider */
.osd-r.is-col{flex-direction:column;align-items:stretch;gap:.5em;padding-top:.6em;padding-bottom:.55em}
.osd-lb{display:flex;align-items:center;gap:.55em}
.osd-sl{position:relative;display:block;height:.3em;margin:.3em .5em 0;border-radius:.2em;background:color-mix(in srgb,currentColor 22%,transparent)}
.osd-sl::after{content:"";position:absolute;top:50%;left:var(--p,0%);width:1.05em;height:1.05em;border-radius:50%;translate:-50% -50%;background:currentColor;box-shadow:0 0 0 .16em var(--osd-card)}
.is-go .osd-sl::after{box-shadow:0 0 0 .16em var(--osd-hi)}
.osd-tk{display:flex;justify-content:space-between;margin:0 .05em;font-size:.72em;line-height:1.2;font-weight:500}
.osd-tk span{opacity:.62}
.osd-tk b{font-weight:800}
/* the text under the screens */
.osd .osd-do{display:flex;align-items:flex-start;gap:8px;max-width:none;margin:0;font-size:13.5px;line-height:1.42;color:color-mix(in srgb,var(--osd-fg) 86%,transparent)}
.osd-do b{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:-1px;border-radius:50%;background:var(--osd-hi);color:var(--osd-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:11px;line-height:1}
.osd .osd-path{max-width:none;margin:16px 0 0;padding:9px 12px;border-radius:9px;background:color-mix(in srgb,var(--osd-fg) 6%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;color:var(--osd-fg);overflow-wrap:break-word}
.osd .osd-path+.osd-path{margin-top:6px}
.osd-gt{color:var(--osd-hi)}
.osd.is-lt .osd-gt{color:color-mix(in srgb,var(--mt-brass) 40%,var(--mt-ink))}
.osd .osd-note{max-width:none;margin:8px 0 0;font-size:12px;line-height:1.5;color:color-mix(in srgb,var(--osd-fg) 60%,transparent)}
.osd-row:focus-visible{outline:2px solid var(--osd-hi);outline-offset:4px;border-radius:6px}
/* narrow: one screen and a bit, swiped sideways */
@container (max-width:540px){
  .osd-row{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--osd-pd);scrollbar-width:none;margin:0 calc(var(--osd-pd) * -1);padding:0 var(--osd-pd) 4px}
  .osd-row::-webkit-scrollbar{display:none}
  .osd-st{flex:0 0 min(72%,230px);max-width:none;scroll-snap-align:start}
}
@container (max-width:300px){.osd-st{flex-basis:84%}}
@supports not (container-type:inline-size){
  @media (max-width:760px){
    .osd-row{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--osd-pd) * -1);padding:0 var(--osd-pd) 4px}
    .osd-st{flex:0 0 72%;max-width:none;scroll-snap-align:start}
  }
}
@media (max-width:699px){.osd{--osd-pd:12px;margin:14px 0 12px}}
@media (forced-colors:active){.osd-r.is-go{forced-color-adjust:none}}

/* ---- 27-mttr.css ---- */
/* 27 feature tour (mttr): one part of the app per section, the phone as the hero. A heading row (eyebrow, split-flap
   headline, a short paragraph, honest status chips and a link to the part's own page), then the callout diagram
   (dco, css/02c-device.css): a big free-standing phone with thin lines to labels on either side. Sections alternate
   light (bone) and dark (.mt-dark); .is-flip swaps the heading row's sides.
   <section class="mt mttr [mt-dark] [is-flip]" data-eb-auto> <div class="mt-wrap"> <div class="mttr-head">
     <p class="mt-eb"><i></i>…</p> <h2 class="mt-hd" data-acc="word">…</h2>
     <div class="mttr-copy"><p>…</p><div class="mttr-meta"><span class="mttr-st">Works today</span>…<a class="mttr-go">…</a></div></div>
   </div> <div class="mttr-fig"><div class="dco" data-dco>…</div></div> </div> </section> */
.mttr{position:relative;padding:clamp(90px,10vw,150px) 0;background:var(--mt-bone);color:var(--mt-ink);overflow:clip}
.mttr.mt-dark{background:var(--mt-night);color:var(--mt-cloud)}
.mttr+.mttr:not(.mt-dark){box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.mttr-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px clamp(30px,5vw,80px);align-items:end}
.mttr-head>.mt-eb{grid-column:1/-1}
.mttr.is-flip .mttr-head{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.mttr.is-flip .mttr-head .mt-hd{order:2;text-align:right}
.mttr.is-flip .mttr-head>.mt-eb{justify-self:end}
.mttr-copy>p{margin:0;max-width:540px;font-size:18px;line-height:1.6;color:var(--mt-mut)}
.mttr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px}
.mttr-st{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;background:color-mix(in srgb,#22c55e 15%,transparent);color:#15803d;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mttr-st::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}
.mt-dark .mttr-st{color:#6ee7a0}
.mttr-st.is-pro{background:var(--mt-ink);color:var(--mt-brass)}
.mttr-st.is-pro::before{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mt-dark .mttr-st.is-pro{background:var(--mt-brass);color:var(--mt-ink)}
.mt-dark .mttr-st.is-pro::before{background:var(--mt-ink);box-shadow:none}
.mttr-st.is-soon{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;opacity:.8}
.mttr-st.is-soon::before{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mttr-go{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;letter-spacing:.06em;color:inherit;text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:5px}
.mttr-go svg{transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mttr-go:hover svg{translate:4px 0}
.mttr-fig{margin-top:clamp(44px,5vw,80px)}
.mttr-note{margin:clamp(28px,3vw,40px) auto 0;max-width:720px;text-align:center;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--mt-mut)}
@media (max-width:900px){
  .mttr-head,.mttr.is-flip .mttr-head{grid-template-columns:1fr}
  .mttr.is-flip .mttr-head .mt-hd{order:0;text-align:left}
  .mttr.is-flip .mttr-head>.mt-eb{justify-self:start}
  .mttr-go{margin-left:0}
}
.mttr-note a{color:inherit;text-decoration:underline;text-decoration-color:var(--mt-brass);text-underline-offset:3px}
/* owner rule: no eyebrow-style chips; only real status (Pro, Coming soon) keeps a chip */
.mttr-st:not(.is-pro):not(.is-soon){display:none}

/* ---- 27b-mtix.css ---- */
/* 27b App index (mtix): every part of the app as a card: an icon chip, the name, one line and an honest status,
   in the key-card language of the feature pages (a raised card that lifts and gets a yellow edge on hover). */
.mtix{padding:clamp(90px,10vw,140px) 0;background:var(--mt-bone);color:var(--mt-ink)}
.mtix-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px 60px;align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.mtix-head>.mt-eb{grid-column:1/-1}
.mtix-head p:not(.mt-eb){margin:0;max-width:520px;font-size:18px;line-height:1.6;color:var(--mt-mut)}
.mtix-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mtix-grid a{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 18px 16px;border-radius:16px;background:var(--mt-cloud);color:var(--mt-ink);text-decoration:none;box-shadow:0 4px 0 color-mix(in srgb,var(--mt-ink) 12%,transparent),inset 0 0 0 1px var(--mt-fog);transition:translate .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.mtix-grid a:hover{translate:0 -3px;box-shadow:0 7px 0 color-mix(in srgb,var(--mt-brass) 60%,var(--mt-ink)),inset 0 0 0 2px var(--mt-brass)}
.mtix-grid a:active{translate:0 2px;box-shadow:0 1px 0 var(--mt-ink)}
.mtix-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.mtix-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--mt-ink);color:var(--mt-brass)}
.mtix-ic .ico{width:21px;height:21px}
.mtix-grid b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:20px;letter-spacing:-.03em;line-height:1.15}
.mtix-grid p{margin:0;font-size:14.5px;line-height:1.5;color:var(--mt-mut)}
.mtix-go{margin-top:auto;padding-top:8px;align-self:flex-end;transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mtix-grid a:hover .mtix-go{translate:4px 0}
.mtix-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,#22c55e 15%,transparent);color:#15803d;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mtix-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e}
.mtix-pill.is-pro{background:var(--mt-ink);color:var(--mt-brass)}
.mtix-pill.is-pro::before{background:var(--mt-brass)}
.mtix-pill.is-soon{background:var(--mt-brass);color:var(--mt-ink)}
.mtix-pill.is-soon::before{background:var(--mt-ink)}
@media (max-width:1180px){.mtix-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.mtix-head{grid-template-columns:1fr}}
@media (max-width:760px){.mtix-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .mtix-grid a{padding:14px 14px 12px} .mtix-grid b{font-size:17px} .mtix-grid p{font-size:13.5px}}
@media (max-width:420px){.mtix-grid{grid-template-columns:1fr}}
/* the resource cards that close the grid: dark */
.mtix-grid a.is-res{background:var(--mt-ink);color:var(--mt-cloud);box-shadow:0 4px 0 #000,inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtix-grid a.is-res p{color:color-mix(in srgb,var(--mt-cloud) 66%,transparent)}
.mtix-grid a.is-res .mtix-ic{background:var(--mt-brass);color:var(--mt-ink)}
.mtix-pill.is-res{background:color-mix(in srgb,var(--mt-cloud) 12%,transparent);color:var(--mt-cloud)}
.mtix-pill.is-res::before{background:var(--mt-brass)}

/* ---- 27c-mtap.css ---- */
/* 27c App page hero: the HUD upright and sideways as a free-standing pair under the headline, callouts around it.
   Wider than the text column so the phones can be big; on phones the pair stacks, upright first. */
.mtap-hero{padding-bottom:clamp(70px,8vw,120px)}
.mtap-pair{position:relative;margin:clamp(44px,5vw,76px) auto 0;width:min(1560px,calc(100vw - 32px))}
.mtap-pair .dco{--dw:auto}
.mtap-pair .dco-dev{display:flex;align-items:center;justify-content:center;gap:clamp(26px,3vw,56px)}
.mtap-pair .dvc:not(.is-land){--dw:clamp(220px,19vw,300px)}
.mtap-pair .dvc.is-land{--dw:clamp(440px,40vw,640px)}
.mtap-cap{margin:clamp(26px,3vw,40px) auto 0;padding:0 20px;max-width:700px;text-align:center;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:var(--mt-mut)}
@media (max-width:1099px){.mtap-pair .dvc:not(.is-land){--dw:clamp(190px,24vw,260px)} .mtap-pair .dvc.is-land{--dw:clamp(360px,50vw,560px)}}
@media (max-width:759px){
  .mtap-pair .dco-dev{flex-direction:column;gap:28px}
  .mtap-pair .dvc:not(.is-land){--dw:min(72vw,340px)}
  .mtap-pair .dvc.is-land{--dw:min(92vw,560px)}
}
/* the App index on a dark ground when it follows a light section */
.mtix.mt-dark{background:var(--mt-night);color:var(--mt-cloud)}
.mtix.mt-dark .mtix-grid a{background:var(--mt-pine);color:var(--mt-cloud);box-shadow:0 4px 0 #000,inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtix.mt-dark .mtix-grid p{color:color-mix(in srgb,var(--mt-cloud) 66%,transparent)}
.mtix.mt-dark .mtix-ic{background:var(--mt-night)}
.mtix.mt-dark .mtix-pill{color:#6ee7a0}
.mtix.mt-dark .mtix-pill.is-pro{background:var(--mt-brass);color:var(--mt-ink)}
.mtix.mt-dark .mtix-pill.is-pro::before{background:var(--mt-ink)}
/* two upright phones side by side in one callout diagram (Dashboard + Stopwatch, the app lock) */
.dco.mtap-two .dco-dev{display:flex;align-items:center;justify-content:center;gap:clamp(24px,3vw,56px)}
.dco.mtap-two .dvc{--dw:clamp(200px,22vw,340px)}
@media (max-width:759px){.dco.mtap-two .dco-dev{flex-direction:column;gap:28px} .dco.mtap-two .dvc{--dw:min(74vw,340px)}}

/* ---- 28-mtsg.css ---- */
/* 28 setup guide (mtsg): the feature-detail head (mtfd) with a route map of the four steps in its window; each step as
   a section with a head row (split-flap step number, heading, lede) and its content full width below, nothing sticky;
   step 2's mount diagram (labels beside what they point at on wide screens, numbered dots and a list on narrow
   ones); the app's Settings as a console window (a rail of groups, rows with the app's own help and choices, the
   default in yellow); the real screens, one callout diagram per phone (mttr + dco). Hidden states sit behind .js;
   without JavaScript everything shows. */

/* ---- hero: the route map in the window ---- */
.mtsg .mtfd-tag span .ico{width:15px;height:15px}
.mtsg-map{padding:clamp(18px,2.4vw,32px);color:var(--mt-cloud);background:radial-gradient(90% 120% at 50% 130%,color-mix(in srgb,var(--mt-brass) 8%,transparent),transparent 62%),var(--mt-night)}
.mtsg-ov{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mtsg-ov>li{position:relative;min-width:0}
.mtsg-ov>li>a{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;padding:22px 20px 18px;border-radius:14px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent);color:inherit;text-decoration:none;transition:background .25s,box-shadow .25s,translate .3s cubic-bezier(.2,.8,.2,1),opacity .7s ease calc(.45s + var(--i)*.12s)}
.mtsg-ov>li>a:hover{background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);box-shadow:inset 0 0 0 1.5px var(--mt-brass);translate:0 -3px}
/* the track: a thin line from each stage's node to the next, filled in yellow as the stages light */
.mtsg-ov{padding-top:7px}
.mtsg-ov>li:not(:last-child)::before,.mtsg-ov>li:not(:last-child)::after{content:"";position:absolute;z-index:2;left:36px;top:-1px;width:100%;height:2px;border-radius:1px;pointer-events:none}
.mtsg-ov>li:not(:last-child)::before{background:color-mix(in srgb,var(--mt-cloud) 14%,transparent)}
.mtsg-ov>li:not(:last-child)::after{background:var(--mt-brass);box-shadow:0 0 8px color-mix(in srgb,var(--mt-brass) 60%,transparent);transform-origin:0 50%;transition:scale .5s cubic-bezier(.4,0,.2,1) calc(1.05s + var(--i)*.42s)}
.mtsg-ov-top{display:flex;align-items:center;gap:10px;min-height:38px}
.mtsg-node{position:absolute;z-index:3;left:22px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--mt-brass) 18%,transparent),0 0 12px var(--mt-brass);transition:background .3s ease calc(.9s + var(--i)*.42s),box-shadow .3s ease calc(.9s + var(--i)*.42s)}
.mtsg-ov-k{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:16px;letter-spacing:0;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mtsg-ov-ic{display:grid;place-items:center;width:38px;height:38px;margin-left:auto;border-radius:10px;background:color-mix(in srgb,var(--mt-brass) 11%,transparent);color:var(--mt-brass)}
.mtsg-ov-ic .ico{width:19px;height:19px}
.mtsg-ov b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(20px,1.7vw,25px);letter-spacing:-.03em;line-height:1.1}
.mtsg-ov ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mtsg-ov ul li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.4;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtsg-ov ul li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;background:var(--mt-brass)}
.mtsg-ready{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:14px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 6%,transparent);transition:opacity .7s ease 2.5s,translate .8s cubic-bezier(.2,.8,.2,1) 2.5s}
.mtsg-rec{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:7px;background:color-mix(in srgb,#ef4444 20%,transparent);color:#ff9a9a;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:11px;letter-spacing:.14em}
.mtsg-rec i{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px #ef4444;animation:mtLed 1.6s ease-in-out infinite}
.mtsg-ready p{flex:1;margin:0;min-width:200px;font-size:14.5px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent)}
.mtsg-ready a{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--mt-brass);text-decoration:none}
.mtsg-ready a svg{transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mtsg-ready a:hover svg{translate:4px 0}
/* hidden until the window settles (the hero's own .is-on, js/23-mtfd.js) */
.js .mtsg:not(.is-on) .mtsg-ov>li>a{opacity:0}
.js .mtsg:not(.is-on) .mtsg-ov>li::after{scale:0 1}
.js .mtsg:not(.is-on) .mtsg-node{background:var(--mt-night);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mt-cloud) 30%,transparent)}
.js .mtsg:not(.is-on) .mtsg-ready{opacity:0;translate:0 10px}

.mtsg.mtfd{padding-bottom:clamp(70px,8vw,110px)}

/* ---- the steps: a head row, then the content full width ---- */
.mtsg-st{position:relative;background:var(--mt-cloud);color:var(--mt-ink);padding:clamp(80px,9vw,130px) 0}
.mtsg-st+.mtsg-st{box-shadow:inset 0 1px 0 var(--mt-fog)}
.mtsg-st.is-last{background:var(--mt-bone)}
.mtsg-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.8fr);align-items:end;gap:22px clamp(28px,4vw,64px);margin-bottom:clamp(36px,4vw,56px)}
.mtsg-no{display:flex;gap:.05em;margin:0;perspective:900px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(64px,6.4vw,104px);line-height:1;letter-spacing:0}
.mtsg-no i{position:relative;display:grid;place-items:center;width:.74em;height:1.02em;border-radius:.09em;background:var(--mt-ink);color:var(--mt-bone);font-style:normal;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.2,.9,.3,1.15) calc(120ms + var(--i)*70ms),opacity .3s ease calc(120ms + var(--i)*70ms)}
.mtsg-no i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:color-mix(in srgb,var(--mt-bone) 55%,transparent);opacity:.6}
.mtsg-no i:last-child{background:var(--mt-brass);color:var(--mt-ink)}
.mtsg-no i:last-child::after{background:color-mix(in srgb,var(--mt-ink) 45%,transparent)}
.js .mtsg-st:not(.is-on) .mtsg-no i{transform:rotateX(-100deg);opacity:0}
.mtsg-head .mt-hd{padding-bottom:.04em}
.mtsg-lede{margin:0;max-width:470px;padding-bottom:4px;font-size:18px;line-height:1.6;color:var(--mt-mut)}
.mtsg-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.mtsg-body>*{transition:opacity .8s ease calc(.2s + var(--k,0)*.08s),translate .9s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--k,0)*.08s)}
.mtsg-body>:nth-child(2){--k:1} .mtsg-body>:nth-child(3){--k:2} .mtsg-body>:nth-child(n+4){--k:3}
.js .mtsg-st:not(.is-on) .mtsg-body>*{opacity:0;translate:0 24px}
.mtsg-body h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);letter-spacing:-.02em;line-height:1.2}
.mtsg-go{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:inherit;text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
.mtsg-go svg{transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mtsg-go:hover svg{translate:4px 0}

/* step 1 */
.mtsg-g3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:12px}
.mtsg-pc{padding:22px 24px 24px;border-radius:16px;background:var(--mt-bone);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtsg-pc h3{font-size:17px}
.mtsg-pc b{display:block;margin:14px 0 10px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(44px,4.2vw,64px);letter-spacing:-.05em;line-height:.95}
.mtsg-pc p{margin:0;max-width:40ch;font-size:15px;line-height:1.55;color:var(--mt-mut)}
.mtsg-soon{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px 24px 24px;border-radius:16px;background:var(--mt-ink);color:var(--mt-cloud)}
.mtsg-soon .mt-soon{margin:0}
.mtsg-soon p{margin:0;font-size:15.5px;line-height:1.55;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent)}
.mtsg-soon p b{color:var(--mt-cloud)}
.mtsg-soon .mtsg-go{margin-top:auto;color:var(--mt-cloud)}
.mtsg-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;margin-top:8px}
.mtsg-ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.mtsg-ticks li{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;font-weight:500}
.mtsg-ticks .ico,.mtsg-list .ico{width:22px;height:22px;flex:none;padding:4px;border-radius:50%;background:var(--mt-brass);color:var(--mt-ink);stroke-width:2.6}
.mtsg-more{margin:0}
.mtsg-more a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--mt-ink);text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:5px}
.mtsg-more a svg{transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mtsg-more a:hover svg{translate:4px 0}

/* step 2: the mount diagram. Narrow: numbered dots on the drawing and a numbered list under it. Wide (1240px and
   up): the list is kept for screen readers only and each part is labelled beside it, a line from the label to its
   point; left labels sit in the board's left margin, right labels in its right margin. */
.mtsg-mt{--m:0px;margin:0;padding:clamp(12px,1.8vw,24px) var(--m) clamp(12px,1.8vw,24px);border-radius:22px;background:var(--mt-night);color:var(--mt-cloud);box-shadow:0 40px 80px -44px color-mix(in srgb,var(--mt-ink) 60%,transparent)}
.mtsg-mt-art{position:relative;max-width:900px;margin:0 auto;aspect-ratio:800/520}
.mtsg-mt-art svg{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;overflow:hidden}
.mtsg-mt-cable{animation:mtsgFlow 1.4s linear infinite}
.mtsg-mt-zone{animation:mtsgFlow 2.6s linear infinite}
.mtsg-mt-cone{transform-origin:420px 258px;transition:opacity 1s ease .5s,scale 1.2s cubic-bezier(.2,.8,.2,1) .5s}
.js .mtsg-st:not(.is-on) .mtsg-mt-cone{opacity:0;scale:.6}
@keyframes mtsgFlow{to{stroke-dashoffset:-32}}
.mtsg-pin{position:absolute;z-index:2;left:calc(var(--x)*1%);top:calc(var(--y)*1%);display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--mt-brass);color:var(--mt-ink);font:700 13px/1 var(--mt-font-m),ui-monospace,monospace;box-shadow:0 0 0 3px var(--mt-night),0 4px 12px rgba(0,0,0,.5);transition:scale .45s cubic-bezier(.34,1.56,.64,1) calc(.6s + var(--i,0)*.1s)}
.mtsg-pin.is-g{background:#22c55e}
.mtsg-pin.is-r{background:#ef4444;color:#fff}
.js .mtsg-st:not(.is-on) .mtsg-pin{scale:0}
.mtsg-tag{display:none}
.mtsg-mt figcaption{margin:clamp(16px,2vw,24px) auto 0;max-width:900px;padding:18px 4px 4px;border-top:1px solid color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mtsg-legend{list-style:none;margin:0;padding:0;counter-reset:mtsglg;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.mtsg-legend li{--c:var(--mt-brass);--cf:var(--mt-ink);counter-increment:mtsglg;position:relative;display:flex;flex-direction:column;gap:4px;padding-left:44px;min-height:30px}
.mtsg-legend li.is-g{--c:#22c55e}
.mtsg-legend li.is-r{--c:#ef4444;--cf:#fff}
.mtsg-legend li::before{content:counter(mtsglg);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:var(--cf);font:700 13px/1 var(--mt-font-m),ui-monospace,monospace}
.mtsg-legend b{font-size:15.5px;font-weight:600}
.mtsg-legend span{font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 66%,transparent)}
@media (min-width:1240px){
  .mtsg-mt{--m:clamp(236px,19vw,280px)}
  .mtsg-pin{display:none}
  .mtsg-mt figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
  .mtsg-tag{--c:var(--mt-brass);position:absolute;z-index:3;top:calc(var(--y)*1%);left:calc(var(--x)*1%);width:calc((100 - var(--x))*1% + var(--m) - 24px);display:flex;flex-direction:row-reverse;align-items:center;translate:0 -50%;pointer-events:none;transition:opacity .6s ease calc(.7s + var(--i)*.12s)}
  .mtsg-tag.is-l{left:auto;right:calc((100 - var(--x))*1%);width:calc(var(--x)*1% + var(--m) - 24px);flex-direction:row}
  .mtsg-tag.is-g{--c:#22c55e}
  .mtsg-tag.is-r{--c:#ef4444}
  .mtsg-tag>i{position:relative;flex:1;height:1.5px;background:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
  .mtsg-tag>i::after{content:"";position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--mt-night),0 0 10px var(--c)}
  .mtsg-tag.is-l>i::after{left:auto;right:0;margin:-6px -6px 0 0}
  .mtsg-tag-t{flex:none;display:flex;flex-direction:column;gap:3px;width:calc(var(--m) - 46px);padding-left:14px}
  .mtsg-tag.is-l .mtsg-tag-t{padding:0 14px 0 0;text-align:right}
  .mtsg-tag-t b{font-size:15.5px;font-weight:700;line-height:1.3;color:var(--c)}
  .mtsg-tag-t em{font-style:normal;font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
  .js .mtsg-st:not(.is-on) .mtsg-tag{opacity:0}
}
.mtsg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mtsg-list li{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:14px;background:var(--mt-bone)}
.mtsg-list li div{display:flex;flex-direction:column;gap:3px}
.mtsg-list b{font-size:16px;font-weight:600}
.mtsg-list span{font-size:14.5px;line-height:1.5;color:var(--mt-mut)}
.mtsg-list a{color:var(--mt-ink);text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap}
.mtsg-wear{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;border-radius:16px;background:var(--mt-ink);color:var(--mt-cloud)}
.mtsg-wear-ic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:12px;background:var(--mt-brass);color:var(--mt-ink)}
.mtsg-wear-ic .ico{width:24px;height:24px}
.mtsg-wear h3{margin:4px 0 8px;font-size:20px;color:var(--mt-cloud)}
.mtsg-wear p{margin:0 0 12px;max-width:80ch;font-size:15.5px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtsg-wear .mtsg-go{color:var(--mt-cloud)}

/* step 3: what the app asks for, the phone check, the mode */
.mtsg-ph{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:12px 14px}
.mtsg-ph h3{font-size:19px}
.mtsg-ph p{margin:0;font-size:13.5px;color:color-mix(in srgb,currentColor 58%,transparent)}
.mtsg-perm{padding:6px 8px 8px;border-radius:18px;background:var(--mt-night);color:var(--mt-cloud)}
.mtsg-perm ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.mtsg-perm li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent)}
.mtsg-pi{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:color-mix(in srgb,var(--mt-brass) 11%,transparent);color:var(--mt-brass)}
.mtsg-pi .ico{width:21px;height:21px}
.mtsg-perm b{font-size:16px;font-weight:600}
.mtsg-perm li p{margin:2px 0 0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 66%,transparent)}
.mtsg-pa{padding:6px 11px;border-radius:99px;background:color-mix(in srgb,var(--mt-cloud) 9%,transparent);color:color-mix(in srgb,var(--mt-cloud) 78%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mtsg-pa.is-y{background:var(--mt-brass);color:var(--mt-ink)}
.mtsg-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mtsg-pck{padding:6px 8px 16px;border-radius:18px;background:#0a0a0c;color:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-brass) 28%,transparent)}
.mtsg-pck-s{margin:0 14px 10px;font-size:14.5px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtsg-pck ul{list-style:none;margin:0 6px;padding:0}
.mtsg-pck li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 8px;border-top:1px solid color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mtsg-pck li b{font-size:15px;font-weight:600;white-space:nowrap}
.mtsg-pck li span{font-size:13.5px;line-height:1.4;text-align:right;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mtsg-scale{display:flex;flex-wrap:wrap;gap:8px;margin:12px 14px 0}
.mtsg-scale span{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.mtsg-scale i{width:7px;height:7px;border-radius:50%}
.mtsg-scale .is-g i{background:#22c55e;box-shadow:0 0 6px #22c55e}
.mtsg-scale .is-y i{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtsg-scale .is-o i{background:#ff7a1a;box-shadow:0 0 6px #ff7a1a}
.mtsg-fine{margin:12px 14px 0;font-size:13.5px;line-height:1.5;color:color-mix(in srgb,currentColor 62%,transparent)}
.mtsg-fine a{color:inherit;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px}
.mtsg-pck .mtsg-fine a{color:var(--mt-cloud)}
.mtsg-mode{padding:6px 8px 16px;border-radius:18px;background:var(--mt-bone);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtsg-mode .mtsg-ph p,.mtsg-mode .mtsg-fine{color:var(--mt-mut)}
.mtsg-mode .mtsg-fine a{color:var(--mt-ink)}
.mtsg-mo{margin:6px 6px 0;padding:14px 16px;border-radius:12px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtsg-mo.is-on{background:var(--mt-brass);box-shadow:0 3px 0 color-mix(in srgb,var(--mt-brass) 50%,var(--mt-ink))}
.mtsg-mo p{margin:0;font-size:14.5px;line-height:1.5;color:var(--mt-mut)}
.mtsg-mo.is-on p{color:color-mix(in srgb,var(--mt-ink) 82%,transparent)}
.mtsg-mo p.mtsg-mo-h{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:19px;letter-spacing:-.02em;color:var(--mt-ink)}
.mtsg-mo-h i{width:16px;height:16px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mt-ink) 45%,transparent)}
.mtsg-mo.is-on .mtsg-mo-h i{background:radial-gradient(circle,var(--mt-ink) 0 3.5px,transparent 4px);box-shadow:inset 0 0 0 2px var(--mt-ink)}

/* ---- the settings that matter: the console ---- */
.mtsg-set{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(90px,10vw,150px) 0;interpolate-size:allow-keywords}
.mtsg-set-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px clamp(30px,5vw,80px);align-items:end}
.mtsg-set-copy p{margin:0;max-width:540px;font-size:18px;line-height:1.6;color:var(--mt-mut)}
.mtsg-set-copy p.mtsg-key{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:var(--mt-ink)}
.mtsg-key .mtsg-cp>span{padding:6px 11px;font-size:12.5px}
.mtsg-win{margin-top:clamp(44px,5vw,72px);border-radius:20px;background:var(--mt-night);box-shadow:0 50px 90px -40px color-mix(in srgb,var(--mt-ink) 55%,transparent);transition:scale 1.3s cubic-bezier(.2,.8,.2,1) .15s,opacity .9s .15s}
.js .mtsg-set:not(.is-on) .mtsg-win{scale:.94;opacity:0}
.mtsg-win .mtfd-bar{border-radius:20px 20px 0 0}
.mtsg-con{--sw:236px;display:grid;grid-template-columns:var(--sw) minmax(0,1fr);min-height:600px;border-radius:0 0 20px 20px;color:var(--mt-cloud);font-size:15px;background:linear-gradient(90deg,color-mix(in srgb,var(--mt-pine) 60%,var(--mt-night)) 0 var(--sw),color-mix(in srgb,var(--mt-cloud) 8%,transparent) var(--sw) calc(var(--sw) + 1px),var(--mt-night) calc(var(--sw) + 1px))}
.mtsg-rail{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:3px;padding:18px 12px}
.mtsg-rail .lg{width:20px;height:20px;margin:0 0 16px 8px;border-radius:5px;background:var(--mt-brass);box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--mt-ink) 18%,transparent)}
.mtsg-tab{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent);text-decoration:none;font-size:13.5px;line-height:1.25;transition:background .25s,color .25s}
.mtsg-tab .ico{width:17px;height:17px;transition:color .25s}
.mtsg-tab em{font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.02em;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);color:color-mix(in srgb,var(--mt-cloud) 60%,transparent);white-space:nowrap}
.mtsg-tab:hover{background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);color:var(--mt-cloud)}
.mtsg-tab.on{background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);color:var(--mt-cloud)}
.mtsg-tab.on .ico{color:var(--mt-brass)}
.mtsg-tab.on em{background:var(--mt-brass);color:var(--mt-ink)}
.mtsg-panes{padding:22px clamp(16px,2.6vw,34px) 30px;min-width:0}
.js .mtsg-set .mtsg-pane:not(.is-cur){display:none}
html:not(.js) .mtsg-pane+.mtsg-pane{margin-top:34px;padding-top:30px;border-top:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtsg-pane{scroll-margin-top:100px}
.mtsg-pt{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0 18px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.1}
.mtsg-pt .ico{width:24px;height:24px;color:var(--mt-brass)}
.mtsg-pt em{margin-left:auto;font-style:normal;font-family:var(--mt-font-b),system-ui,sans-serif;font-weight:500;font-size:13px;letter-spacing:0;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mtsg-sr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 34px;padding:18px 20px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 3.5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 4%,transparent)}
.mtsg-sr+.mtsg-sr{margin-top:8px}
.mtsg-sr.is-dim .mtsg-sr-c,.mtsg-sr.is-dim .mtsg-sr-t p{opacity:.55}
.mtsg-sr-t b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:16.5px;font-weight:600;line-height:1.3}
.mtsg-sr-t b .mt-soon{margin:0}
.mtsg-sr-t small,.mtsg-cp small{padding:2px 7px;border-radius:5px;background:color-mix(in srgb,var(--mt-cloud) 12%,transparent);color:color-mix(in srgb,var(--mt-cloud) 72%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.mtsg-sr-t small.is-pro,.mtsg-cp small.is-pro{background:var(--mt-cloud);color:var(--mt-ink)}
.mtsg-sr-t p{margin:6px 0 0;max-width:64ch;font-size:14.5px;line-height:1.58;color:color-mix(in srgb,var(--mt-cloud) 68%,transparent)}
.mtsg-sr-t a,.mtsg-tip a{color:var(--mt-cloud);text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px}
.mtsg-sr-t a:hover,.mtsg-tip a:hover{color:var(--mt-brass)}
.mtsg-sr-c{display:flex;justify-content:flex-end;min-width:0}
.mtsg-cp{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.mtsg-cp>span{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;background:#24272e;color:var(--mt-cloud);font-size:13.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.mtsg-cp>span.on{background:var(--mt-brass);color:var(--mt-ink)}
.mtsg-cp.is-multi{max-width:360px}
.mtsg-tg{position:relative;display:block;width:52px;height:30px;flex:none;border-radius:99px;background:#3a3d45}
.mtsg-tg i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.35);transition:translate .4s cubic-bezier(.34,1.56,.64,1) .5s}
.mtsg-tg.is-on{background:var(--mt-brass)}
.mtsg-tg.is-on i{translate:22px 0}
.js .mtsg-set:not(.is-on) .mtsg-tg.is-on i{translate:0 0}
.mtsg-sl{display:flex;align-items:center;gap:16px}
.mtsg-sl>span{position:relative;width:clamp(150px,16vw,220px);height:6px;border-radius:3px;background:#3a3d45}
.mtsg-sl>span::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22%;border-radius:inherit;background:var(--mt-brass)}
.mtsg-sl i{position:absolute;left:22%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.mtsg-sl b{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:14px;color:var(--mt-brass);white-space:nowrap}
.mtsg-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.mtsg-kpi div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent)}
.mtsg-kpi span{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 55%,transparent)}
.mtsg-kpi b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1.05}
.mtsg-kpi em{font-style:normal;font-size:12px;line-height:1.35;color:color-mix(in srgb,var(--mt-cloud) 58%,transparent)}
.mtsg-tip{display:flex;align-items:flex-start;gap:11px;margin:14px 0 0;padding:13px 16px;border-radius:10px;background:color-mix(in srgb,var(--mt-brass) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-brass) 14%,transparent);font-size:14px;line-height:1.55;color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.mtsg-tip>i{width:7px;height:7px;flex:none;margin-top:7px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtsg-pane.is-cur .mtsg-sr,.mtsg-pane.is-cur .mtsg-kpi,.mtsg-pane.is-cur .mtsg-tip{animation:mtsgIn .5s cubic-bezier(.2,.8,.2,1) both}
.mtsg-pane.is-cur .mtsg-sr:nth-of-type(2){animation-delay:.05s}
.mtsg-pane.is-cur .mtsg-sr:nth-of-type(3){animation-delay:.1s}
.mtsg-pane.is-cur .mtsg-kpi,.mtsg-pane.is-cur .mtsg-tip{animation-delay:.14s}
@keyframes mtsgIn{from{opacity:0;translate:0 10px}}

/* ---- the real screens: one callout diagram per phone (mttr + dco) ---- */
.mtsg-pair{--dw:clamp(240px,21vw,320px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.mtsg-one{min-width:0}
.mtsg-one-h{width:var(--dw);max-width:100%;margin:0 auto 20px 0;text-align:center;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:20px;letter-spacing:-.02em;color:var(--mt-cloud)}
.mtsg-one:first-child .mtsg-one-h{margin:0 0 20px auto}
.mtsg-pair .dco{--dw:inherit}
.mtsg-pair .dco.is-wide[data-sides="l"] .dco-dev{justify-content:flex-end}
.mtsg-pair .dco.is-wide[data-sides="r"] .dco-dev{justify-content:flex-start}
.mtsg-tour .mttr-note{margin-top:clamp(36px,4vw,56px)}

/* ---- step 4 ---- */
.mtsg-go4{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.mtsg-rack{padding:16px 18px}
.mtsg-rack li{padding:18px 20px 18px 30px}
.mtsg-rack p{font-size:16.5px}
.mtsg-rack p strong{font-weight:700}
.mtsg-rack li.is-red .mtfd-led{background:#ef4444;box-shadow:0 0 8px #ef4444;animation:mtLed 1.6s ease-in-out infinite}
.js .mtsg-st:not(.is-on) .mtsg-rack li{opacity:0;translate:-40px 0}
.mtsg-ios{padding:22px 24px 24px;border-radius:18px;background:var(--mt-ink);color:var(--mt-cloud)}
.mtsg-ios h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:20px;color:var(--mt-cloud)}
.mtsg-ios h3 .ico{width:20px;height:20px;color:var(--mt-brass)}
.mtsg-ios>p{margin:0;font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.mtsg-ios ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mtsg-ios li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 6%,transparent)}
.mtsg-ios li b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:17px;letter-spacing:-.02em}
.mtsg-ios li span{font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 68%,transparent)}
.mtsg-after{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--mt-mut)}
.mtsg-after b{color:var(--mt-ink);font-weight:600}
.mtsg-after a{color:var(--mt-ink);font-weight:600;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px}
.mtsg-end{position:relative}

/* ---- responsive ---- */
@media (max-width:1099px){
  .mtsg-ov{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtsg-ov>li:nth-child(2)::before,.mtsg-ov>li:nth-child(2)::after{display:none}
  .mtsg-con{--sw:206px}
  .mtsg-sr{grid-template-columns:1fr}
  .mtsg-sr-c,.mtsg-cp{justify-content:flex-start}
  .mtsg-cp.is-multi{max-width:none}
  .mtsg-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtsg-soon{grid-column:1/-1}
  .mtsg-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtsg-perm ul{grid-template-columns:1fr}
  .mtsg-go4{grid-template-columns:1fr}
  .mtsg-pair{grid-template-columns:1fr;gap:clamp(56px,8vw,90px)}
  .mtsg-one-h,.mtsg-one:first-child .mtsg-one-h{margin:0 auto 20px}
  .mtsg-pair{--dw:min(62vw,340px)}
  .mtsg-pair .dco-dev{flex-direction:column;align-items:center}
}
@media (max-width:899px){
  .mtsg-head{grid-template-columns:auto minmax(0,1fr)}
  .mtsg-lede{grid-column:1/-1;max-width:600px}
  .mtsg-set-head{grid-template-columns:1fr}
  .mtsg-duo{grid-template-columns:1fr}
}
@media (max-width:809px){
  .mtsg-con{grid-template-columns:1fr;min-height:0;background:var(--mt-night)}
  .mtsg-rail{position:sticky;top:0;z-index:3;flex-direction:row;gap:6px;padding:10px;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--mt-pine) 60%,var(--mt-night));border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
  .mtsg-rail{transition:top .5s cubic-bezier(.2,.8,.2,1)} html.mthd-on .mtsg-rail{top:66px}
  .mtsg-rail::-webkit-scrollbar{display:none}
  .mtsg-rail .lg{display:none}
  .mtsg-tab{flex:none;grid-template-columns:auto auto auto;padding:8px 10px;white-space:nowrap}
  .mtsg-panes{padding:16px 12px 20px}
  .mtsg-sr{padding:16px}
  .mtsg-kpi{gap:6px}
  .mtsg-kpi div{padding:10px}
  .mtsg-kpi b{font-size:17px}
  .mtsg-kpi em{display:none}
  .mtsg-perm li{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px}
  .mtsg-pi{width:40px;height:40px}
  .mtsg-pa{grid-column:2;justify-self:start}
  .mtsg-wear{flex-direction:column;gap:12px;padding:20px}
  .mtsg-rack{padding:10px}
  .mtsg-rack li{padding:16px 16px 16px 30px}
  .mtsg-rack p{font-size:15.5px}
  .mtsg-pair{--dw:min(74vw,320px)}
}
@media (max-width:640px){
  .mtsg-ov{grid-template-columns:1fr;gap:12px}
  .mtsg-ov{padding:0 0 0 22px}
  .mtsg-ov>li:not(:last-child)::before,.mtsg-ov>li:not(:last-child)::after{display:block;left:-16px;top:34px;width:2px;height:calc(100% - 2px)}
  .mtsg-node{left:-22px;top:20px}
  .mtsg-ov>li:not(:last-child)::after{transform-origin:50% 0}
  .js .mtsg:not(.is-on) .mtsg-ov>li::after{scale:1 0}
  .mtsg-ov>li>a{padding:18px 18px 16px}
  .mtsg-ov ul{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
  .mtsg-g3,.mtsg-list,.mtsg-legend{grid-template-columns:1fr}
  .mtsg-pck li{flex-direction:column;gap:2px}
  .mtsg-pck li span{text-align:left}
  .mtsg-mt{border-radius:18px}
  .mtsg-mt-art svg{border-radius:10px}
  .mtsg-pin{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:12.5px}
}
@media (max-width:560px){
  .mtsg-head{grid-template-columns:1fr;gap:18px}
  .mtsg-no{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  .mtsg-mt-cable,.mtsg-mt-zone,.mtsg-rec i{animation:none}
  .mtsg-pane.is-cur .mtsg-sr,.mtsg-pane.is-cur .mtsg-kpi,.mtsg-pane.is-cur .mtsg-tip{animation:none}
}

/* ---- 29-mtlw.css ---- */
/* 29 recording laws (mtlw): the feature-detail head (mtfd) with a yellow "Not legal advice" note and a window holding
   every state as a split-flap tile on a grid map (one-party ink, all-party yellow, a ring where the entry is being
   verified); the short version on dark (video and sound side by side, the people who must agree drawn as tiles, six
   rules of thumb); and the state-by-state table with filters and a search (cards on phones). Hidden states sit
   behind .js; without JavaScript the full table shows. */

/* ---- head ---- */
.mtlw .mtfd-tag span .ico{width:15px;height:15px}
.mtlw.mtfd{padding-bottom:clamp(80px,9vw,120px)}
.mtlw-na{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 24px;align-items:start;margin:clamp(36px,4vw,52px) 0 0;padding:20px 24px;border-radius:16px;background:var(--mt-brass);color:var(--mt-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--mt-brass) 55%,var(--mt-ink))}
.mtlw-na p{margin:0;font-size:15.5px;line-height:1.58}
.mtlw-na p.mtlw-na-k{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:8px;background:var(--mt-ink);color:var(--mt-cloud);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11.5px;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;white-space:nowrap}
.mtlw-na-k i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass);animation:mtLed 1.6s ease-in-out infinite}
.mtlw-na p.mtlw-rev,.mtlw-na span.mtlw-rev{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-ink) 72%,transparent)}
.mtlw-na p.mtlw-rev{margin-top:10px}
.mtlw-na span.mtlw-rev{display:inline-block;margin-left:6px;white-space:nowrap}
.mtlw-na.is-sm{align-items:center;margin-top:clamp(30px,3.4vw,44px);padding:14px 18px}
.mtlw-na.is-sm p{font-size:15px}
.js .mtlw:not(.is-on) .mtlw-na{opacity:0;translate:0 22px}
.mtlw-na{transition:opacity .9s ease .45s,translate 1s cubic-bezier(.2,.8,.2,1) .45s}

/* ---- the map window ---- */
.mtlw-win{margin-top:clamp(28px,3vw,40px)}
.mtlw-mapw{display:grid;grid-template-columns:minmax(0,780px) minmax(240px,320px);justify-content:space-evenly;gap:clamp(24px,3.4vw,64px);align-items:center;padding:clamp(22px,3.2vw,48px);color:var(--mt-cloud);background:radial-gradient(70% 90% at 30% 110%,color-mix(in srgb,var(--mt-brass) 7%,transparent),transparent 65%),var(--mt-night)}
.mtlw-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:clamp(3px,.45vw,7px);perspective:1200px}
.mtlw-map li{grid-column:var(--c);grid-row:var(--r)}
.mtlw-tile{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:clamp(4px,.45vw,8px);font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(10px,1.2vw,18px);line-height:1;letter-spacing:.01em;text-decoration:none;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.2,.9,.3,1.15) calc(.5s + var(--w,0ms)),opacity .3s ease calc(.5s + var(--w,0ms)),box-shadow .2s,translate .2s}
.mtlw-tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#000;opacity:.3;pointer-events:none}
.mtlw-tile.is-one{background:color-mix(in srgb,var(--mt-cloud) 10%,var(--mt-night));color:var(--mt-bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mtlw-tile.is-all{background:var(--mt-brass);color:var(--mt-ink)}
.mtlw-tile.is-all::after{background:color-mix(in srgb,var(--mt-ink) 40%,transparent);opacity:.45}
.mtlw-tile.is-vf::before{content:"";position:absolute;z-index:1;top:12%;right:12%;width:clamp(5px,.5vw,8px);aspect-ratio:1;border-radius:50%;background:var(--mt-cloud);box-shadow:0 0 0 1.5px var(--mt-ink);animation:mtLed 2.2s ease-in-out infinite}
a.mtlw-tile:hover,a.mtlw-tile:focus-visible{translate:0 -2px;box-shadow:0 0 0 2px var(--mt-brass),0 6px 14px rgba(0,0,0,.4)}
.mtlw-tile.is-dim{opacity:.18!important;transition-delay:0s!important}
.js .mtlw:not(.is-on) .mtlw-map .mtlw-tile{transform:rotateX(-100deg);opacity:0}
.mtlw-key{display:flex;flex-direction:column;gap:16px}
.mtlw-key p{margin:0}
.mtlw-kh{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mtlw-kr{display:flex;align-items:flex-start;gap:14px}
.mtlw-kr>div{display:flex;flex-direction:column;gap:3px}
.mtlw-kr b{display:flex;align-items:center;gap:8px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:18px;letter-spacing:-.02em}
.mtlw-kr b em{padding:1px 7px;border-radius:5px;background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:11px;letter-spacing:.04em}
.mtlw-kr span{font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 66%,transparent)}
.mtlw-sw{position:relative;width:32px;height:32px;flex:none;border-radius:7px}
.mtlw-sw::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:#000;opacity:.45}
.mtlw-sw.is-one{background:color-mix(in srgb,var(--mt-cloud) 10%,var(--mt-night));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mtlw-sw.is-all{background:var(--mt-brass)}
.mtlw-sw.is-vf{background:color-mix(in srgb,var(--mt-cloud) 10%,var(--mt-night));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mtlw-sw.is-vf::before{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--mt-cloud);box-shadow:0 0 0 1.5px var(--mt-ink)}
.mtlw-kf{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:color-mix(in srgb,var(--mt-cloud) 48%,transparent)}

/* ---- the short version (dark) ---- */
.mtlw-kn{position:relative;padding:clamp(90px,10vw,150px) 0;background:var(--mt-night);color:var(--mt-cloud)}
.mtlw-kn-head,.mtlw-st-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px clamp(30px,5vw,80px);align-items:end}
.mtlw-kn-head>.mt-eb,.mtlw-st-head>.mt-eb{grid-column:1/-1}
.mtlw-kn-copy p,.mtlw-st-copy p{margin:0;max-width:540px;font-size:18px;line-height:1.6;color:var(--mt-mut)}
.mtlw-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(44px,5vw,72px)}
.mtlw-vc{display:flex;flex-direction:column;gap:16px;padding:clamp(22px,2.6vw,36px);border-radius:20px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mtlw-vc.is-sound{background:linear-gradient(160deg,color-mix(in srgb,var(--mt-brass) 9%,transparent),transparent 55%),color-mix(in srgb,var(--mt-cloud) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-brass) 26%,transparent)}
.mtlw-vc>p,.mtlw-vc h3{margin:0}
.mtlw-vk{display:flex;align-items:center;gap:12px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-brass)}
.mtlw-vk span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--mt-brass) 12%,transparent)}
.mtlw-vk .ico{width:20px;height:20px}
.mtlw-vc h3{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(28px,2.7vw,42px);letter-spacing:-.04em;line-height:1.04}
.mtlw-vc>p:not(.mtlw-vk){max-width:52ch;font-size:16.5px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 76%,transparent)}
.mtlw-ok{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mtlw-ok li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--mt-night);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mtlw-ok li>span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px}
.mtlw-ok .ico{width:17px;height:17px;stroke-width:2.6}
.mtlw-ok .is-y>span{background:color-mix(in srgb,#22c55e 18%,transparent);color:#4ade80}
.mtlw-ok .is-m>span{background:color-mix(in srgb,var(--mt-brass) 16%,transparent);color:var(--mt-brass)}
.mtlw-ok .is-n>span{background:color-mix(in srgb,#ef4444 18%,transparent);color:#f87171}
.mtlw-ok b{font-size:15px;font-weight:600;line-height:1.35}
.mtlw-ok em{font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;text-align:right;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
@media (max-width:640px){.mtlw-ok li{grid-template-columns:30px minmax(0,1fr)} .mtlw-ok em{grid-column:2;text-align:left}}
.mtlw-cons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mtlw-cr{padding:16px;border-radius:14px;background:var(--mt-night);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mtlw-cr p{margin:0}
.mtlw-cl{margin-bottom:12px!important;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.mtlw-ppl{display:flex;flex-wrap:wrap;gap:6px;perspective:900px}
.mtlw-ppl span{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:56px;padding:10px 0 8px;border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);color:color-mix(in srgb,var(--mt-cloud) 42%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;transition:transform .55s cubic-bezier(.2,.9,.3,1.15) calc(.55s + var(--k,0)*70ms),opacity .3s ease calc(.55s + var(--k,0)*70ms)}
.mtlw-ppl span:nth-child(2){--k:1} .mtlw-ppl span:nth-child(3){--k:2}
.mtlw-ppl span.on{background:var(--mt-brass);color:var(--mt-ink)}
.mtlw-ppl .ico{width:22px;height:22px}
.js .mtlw-kn:not(.is-on) .mtlw-ppl span{transform:rotateX(-100deg);opacity:0}
.mtlw-cd{margin-top:12px!important;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtlw-split p{margin:0 0 8px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.mtlw-bar2{display:flex;gap:4px;height:34px}
.mtlw-bar2 span{flex:var(--n) 1 0;display:flex;align-items:center;padding:0 12px;border-radius:8px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:11px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;transform-origin:0 50%;transition:scale .9s cubic-bezier(.2,.8,.2,1) .6s}
.mtlw-bar2 .is-one{background:color-mix(in srgb,var(--mt-cloud) 12%,var(--mt-night));color:var(--mt-bone)}
.mtlw-bar2 .is-all{background:var(--mt-brass);color:var(--mt-ink);transition-delay:.75s}
.js .mtlw-kn:not(.is-on) .mtlw-bar2 span{scale:0 1}
.mtlw-mode{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:auto;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 6%,transparent)}
.mtlw-mode b{padding:5px 9px;border-radius:6px;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mtlw-mode span{font-size:14.5px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.mtlw-rules{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mtlw-rules li{padding:22px 24px 24px;border-radius:16px;background:color-mix(in srgb,var(--mt-pine) 55%,var(--mt-night));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 7%,transparent);transition:opacity .7s ease calc(.3s + var(--i)*.07s),translate .8s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i)*.07s)}
.mtlw-ri{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--mt-brass);color:var(--mt-ink)}
.mtlw-ri .ico{width:21px;height:21px}
.mtlw-rules h3{margin:18px 0 8px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:21px;letter-spacing:-.02em;line-height:1.15}
.mtlw-rules p{margin:0;font-size:15px;line-height:1.58;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtlw-vc{transition:opacity .8s ease .2s,translate .9s cubic-bezier(.2,.8,.2,1) .2s}
.mtlw-vc.is-sound{transition-delay:.3s}
.js .mtlw-kn:not(.is-on) .mtlw-vc,.js .mtlw-kn:not(.is-on) .mtlw-rules li{opacity:0;translate:0 24px}

/* ---- state by state ---- */
.mtlw-st{position:relative;padding:clamp(90px,10vw,150px) 0 clamp(70px,8vw,110px);background:var(--mt-cloud);color:var(--mt-ink)}
.mtlw-bar{position:sticky;top:86px;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:14px;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--mt-bone) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--mt-fog),0 10px 24px -18px color-mix(in srgb,var(--mt-ink) 50%,transparent)}
.mtlw-bar[hidden]{display:none}
.mtlw-fl{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:10px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtlw-fl button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:0;border-radius:7px;background:none;color:var(--mt-mut);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .25s,color .25s}
.mtlw-fl button:hover{color:var(--mt-ink)}
.mtlw-fl button em{padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--mt-ink) 7%,transparent);font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:10.5px}
.mtlw-fl button.on{background:var(--mt-ink);color:var(--mt-cloud)}
.mtlw-fl button.on em{background:var(--mt-brass);color:var(--mt-ink)}
.mtlw-find{flex:1 1 220px;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:10px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog);color:var(--mt-mut);transition:box-shadow .25s}
.mtlw-find:focus-within{box-shadow:inset 0 0 0 1.5px var(--mt-ink)}
.mtlw-find .ico{width:17px;height:17px}
.mtlw-find input{flex:1;min-width:0;height:44px;border:0;background:none;color:var(--mt-ink);font:inherit;font-size:16px;outline:none}
.mtlw-find input::placeholder{color:color-mix(in srgb,var(--mt-ink) 45%,transparent)}
.mtlw-res{margin:0 6px 0 2px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--mt-mut);white-space:nowrap}
.mtlw-tw{position:relative}
.mtlw-scroll{margin-top:14px;border-radius:18px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog);transition:opacity .9s ease .3s,translate 1s cubic-bezier(.2,.8,.2,1) .3s}
.js .mtlw-st:not(.is-on) .mtlw-scroll{opacity:0;translate:0 26px}
.mtlw-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.mtlw-t thead th{padding:16px 20px;border-bottom:1px solid var(--mt-fog);background:var(--mt-bone);text-align:left;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtlw-t thead th:first-child{width:24%;border-radius:18px 0 0 0}
.mtlw-t thead th:nth-child(2){width:15%}
.mtlw-t thead th:nth-child(3){width:25%}
.mtlw-t thead th:last-child{border-radius:0 18px 0 0}
.mtlw-t tbody th,.mtlw-t tbody td{padding:20px;border-bottom:1px solid var(--mt-fog);text-align:left;vertical-align:top;font-size:15px;line-height:1.55}
.mtlw-t tbody tr:last-child>*{border-bottom:0}
.mtlw-t tbody tr{scroll-margin-top:190px;transition:background .3s}
.mtlw-t tbody tr:hover{background:color-mix(in srgb,var(--mt-bone) 55%,transparent)}
.mtlw-t tbody tr:target,.mtlw-t tbody tr.is-hit{background:color-mix(in srgb,var(--mt-brass) 22%,transparent)}
.mtlw-t tbody tr.is-hit{animation:mtlwHit 2.6s ease both}
@keyframes mtlwHit{0%,40%{background:color-mix(in srgb,var(--mt-brass) 34%,transparent)}100%{background:transparent}}
.mtlw-t tbody th{font-weight:600;font-size:16px}
.mtlw-ab{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;margin-right:12px;vertical-align:middle;border-radius:7px;background:var(--mt-ink);color:var(--mt-bone);font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:14px;letter-spacing:.02em}
.mtlw-ab::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#000;opacity:.35}
tr[data-c="all-party"] .mtlw-ab{background:var(--mt-brass);color:var(--mt-ink)}
tr[data-c="all-party"] .mtlw-ab::after{opacity:.2}
.mtlw-nm{vertical-align:middle}
.mtlw-vf{display:flex;align-items:center;gap:7px;width:max-content;margin:10px 0 0 48px;padding:4px 10px 4px 8px;border-radius:99px;background:var(--mt-ink);color:var(--mt-cloud);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.mtlw-vf i{width:7px;height:7px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass);animation:mtLed 2.2s ease-in-out infinite}
.mtlw-bd{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mtlw-bd.is-one{background:var(--mt-ink);color:var(--mt-bone)}
.mtlw-bd.is-all{background:var(--mt-brass);color:var(--mt-ink)}
.mtlw-calls{display:block;margin-top:9px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.45;letter-spacing:.02em;color:var(--mt-mut)}
.mtlw-law{color:var(--mt-ink);font-weight:600;font-size:14.5px;line-height:1.5;text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.mtlw-nw{white-space:nowrap}
.mtlw-law .ico{display:inline-block;width:13px;height:13px;margin-left:5px;vertical-align:-1px;stroke-width:2.2}
.mtlw-law:hover{text-decoration-color:var(--mt-ink)}
.mtlw-t small{display:flex;align-items:center;gap:7px;margin-top:9px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mtlw-t small::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-ink)}
.mtlw-t small.is-sec::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mt-mut)}
.mtlw-t tbody td:last-child{color:color-mix(in srgb,var(--mt-ink) 80%,transparent)}
.mtlw-t tr[hidden]{display:none}
.mtlw-none{margin:14px 0 0;padding:18px 20px;border-radius:14px;background:var(--mt-bone);font-size:15.5px}
.mtlw-none[hidden]{display:none}
.mtlw-none button{padding:0;border:0;background:none;color:var(--mt-ink);font:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.mtlw-src{display:flex;align-items:flex-start;gap:16px;margin-top:22px;padding:20px 24px;border-radius:16px;background:var(--mt-ink);color:var(--mt-cloud)}
.mtlw-src-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:11px;background:var(--mt-brass);color:var(--mt-ink)}
.mtlw-src-ic .ico{width:21px;height:21px}
.mtlw-src p{margin:0;max-width:92ch;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtlw-src b{color:var(--mt-cloud)}
.mtlw-end{position:relative;padding-top:clamp(70px,8vw,110px)}

/* ---- responsive ---- */
@media (max-width:1099px){
  .mtlw-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtlw-cons{grid-template-columns:1fr}
  .mtlw-t thead th:first-child{width:23%}
  .mtlw-t thead th:nth-child(2){width:17%}
  .mtlw-t thead th:nth-child(3){width:26%}
  .mtlw-t tbody th,.mtlw-t tbody td{padding:18px 16px}
  .mtlw-vf{margin-left:0}
}
@media (max-width:899px){
  .mtlw-mapw{grid-template-columns:1fr}
  .mtlw-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .mtlw-kh,.mtlw-kf{grid-column:1/-1}
  .mtlw-kn-head,.mtlw-st-head{grid-template-columns:1fr}
  .mtlw-vs{grid-template-columns:1fr}
}
@media (max-width:809px){
  .mtlw-na{grid-template-columns:1fr;padding:18px}
  .mtlw-na p.mtlw-na-k{justify-self:start}
  .mtlw-bar{position:relative;top:auto;padding:6px}
  .mtlw-fl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .mtlw-fl button{justify-content:center;padding:0 8px;font-size:13px}
  .mtlw-res{display:none}
  .mtlw-scroll{background:none;box-shadow:none}
  .mtlw-t,.mtlw-t tbody{display:block}
  .mtlw-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mtlw-t thead tr{display:flex;width:1px}
  .mtlw-t tbody tr{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:10px;padding:16px;border-radius:14px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
  .mtlw-t tbody tr[hidden]{display:none}
  .mtlw-t tbody th,.mtlw-t tbody td{display:block;padding:0;border:0}
  .mtlw-t tbody th{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
  .mtlw-ab{margin:0}
  .mtlw-vf{margin:0}
  .mtlw-t tbody td:nth-child(2){display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
  .mtlw-calls{margin:0}
  .mtlw-rules{grid-template-columns:1fr}
  .mtlw-key{grid-template-columns:1fr}
  .mtlw-src{flex-direction:column;padding:18px}
}
@media (max-width:480px){
  .mtlw-mapw{padding:16px 12px 20px}
  .mtlw-map{gap:3px}
  .mtlw-tile{font-size:9.5px;border-radius:4px}
  .mtlw-tile.is-vf::before{width:4px;top:8%;right:8%;box-shadow:0 0 0 1px var(--mt-ink)}
  .mtlw-ppl span{width:50px}
}
@media (prefers-reduced-motion:reduce){.mtlw-t tbody tr.is-hit{animation:none}}
.mtlw.is-idle .mtlw-tile{transition-delay:0s}
html:not(.js) .mtlw-kn .mt-eb,html:not(.js) .mtlw-st .mt-eb{opacity:1;translate:none}

/* ---- 29a-appA.css ---- */
/* 29a App sub-pages, batch A (apa): Dash cam, Body cam, Police stop, HUD & speed limits, Dashboard & Stopwatch,
   Night mode (src/sections/app/<slug>.html; behaviour in js/29a-appA.js). The pages are the feature-detail pattern
   (mtfd, mttr, dco phones); this file adds only what they share beyond it:
   .apa-hero     the phones under the page head, wider than the text column (like the App page hero)
   .apa-trio     three short facts in a row, split by thin rules (the police stop's headline promise)
   .apa-opt      two or three option cards (a setting's choices, side by side)
   .apa-stamp    the stamp band, drawn as it sits at the bottom of a recorded frame, with its chips
   .apa-loop     loop recording: the drive in segments sliding through the space you give it
   .apa-tp       Touch protection, a working replica inside a phone frame: hold the pill to unlock
   .apa-tl       the police stop on a timeline: recording as usual, the stop saved piece by piece, the hub and Cloud
   .apa-lim      speed and the posted limit: a slider, the sign rings red past the limit plus 5 mph (8 km/h)
   .apa-runs     the Stopwatch's runs as the app's diamond road signs, mph or km/h
   .apa-ev       night mode's rule on a time chart (8 s dark on, 20 s lit off)
   .apa-warn     a plain warning card (closed courses only)
   Every demo shows a sensible still state without scripts; controls that need a script appear with .js only. */

/* ---- the phones under the head ----------------------------------------------------------------------------- */
.apa-hero{position:relative;margin:clamp(40px,5vw,72px) auto 0;width:min(1560px,calc(100vw - 32px))}
.apa-hero .dco{--dw:clamp(280px,30vw,440px)}
.apa-hero.is-land1 .dco{--dw:clamp(520px,54vw,800px)}
.apa-cap{margin:clamp(26px,3vw,40px) auto 0;padding:0 20px;max-width:720px;text-align:center;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:var(--mt-mut)}
.mttr .apa-cap{margin-top:clamp(28px,3vw,44px)}
@media (max-width:1099px){.apa-hero.is-land1 .dco{--dw:clamp(440px,46vw,560px)}}
@media (max-width:759px){.apa-hero .dco{--dw:min(80vw,380px)} .apa-hero.is-land1 .dco{--dw:min(92vw,560px)}}
/* a row of phones in a mttr section (the Stopwatch's three screens): the dvs row, with a caption chip under each */
.apa-row{padding-bottom:clamp(64px,7vw,90px)}
.apa-ptag{position:absolute;left:50%;top:calc(100% + 16px);translate:-50% 0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.04em;white-space:nowrap;color:var(--mt-mut)}
.mt-dark .apa-ptag{color:color-mix(in srgb,var(--mt-cloud) 66%,transparent)}
.apa-row .dvc{--dw:clamp(200px,22vw,330px)}
.apa-row .dvc.is-side{--dw:clamp(170px,18vw,280px)}
.apa-row .dvc.is-land{--dw:clamp(380px,40vw,620px)}
@media (max-width:809px){.apa-row{flex-wrap:wrap;row-gap:70px} .apa-row .dvc,.apa-row .dvc.is-side{--dw:clamp(140px,40vw,260px)}}
@media (max-width:520px){.apa-row{column-gap:14px} .apa-row .dvc,.apa-row .dvc.is-side{--dw:min(43vw,220px)} .apa-row .dvc.is-land{--dw:88vw} .apa-row .dvc.is-side:nth-of-type(n+3){display:block} .apa-ptag{font-size:10.5px;letter-spacing:0}}

/* ---- three facts in a row ---------------------------------------------------------------------------------- */
.apa-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(44px,5vw,70px) 0 0;padding:0;list-style:none;border-radius:22px;background:var(--mt-ink);color:var(--mt-cloud);overflow:hidden;box-shadow:0 40px 80px -50px color-mix(in srgb,var(--mt-ink) 70%,transparent)}
.apa-trio li{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,34px)}
.apa-trio li+li{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.apa-trio b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(24px,2.2vw,34px);letter-spacing:-.035em;line-height:1.05}
.apa-trio span{font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.apa-trio i{display:block;width:34px;height:4px;border-radius:2px;background:var(--mt-brass);box-shadow:0 0 10px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
@media (max-width:809px){.apa-trio{grid-template-columns:1fr} .apa-trio li+li{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mt-cloud) 10%,transparent)}}

/* ---- option cards ------------------------------------------------------------------------------------------ */
.apa-opt{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.apa-opt li{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;border-radius:16px;background:var(--mt-cloud);color:var(--mt-ink);box-shadow:inset 0 0 0 1px var(--mt-fog),0 3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.apa-opt li.is-on{box-shadow:inset 4px 0 0 var(--mt-brass),inset 0 0 0 1px var(--mt-fog),0 3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.mt-dark .apa-opt li.is-on{box-shadow:inset 4px 0 0 var(--mt-brass),inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.apa-opt b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,1.9vw,28px);letter-spacing:-.035em;line-height:1.1}
.apa-opt p{margin:0;font-size:15px;line-height:1.55;color:var(--mt-mut)}
.apa-opt small{margin-top:auto;padding-top:6px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:var(--mt-mut)}
.mt-dark .apa-opt li{background:var(--mt-pine);color:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mt-dark .mt-dark .apa-opt p,.mt-dark .apa-opt small{color:color-mix(in srgb,var(--mt-cloud) 68%,transparent)}
@media (max-width:809px){.apa-opt{grid-template-columns:1fr}}

/* ---- two-column prose block with a small heading ------------------------------------------------------------ */
.apa-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,70px);align-items:start}
.apa-two>div>p{margin:0 0 12px;font-size:17px;line-height:1.65}
.apa-two>div>p.mtfd-note{font-size:12px}
@media (max-width:809px){.apa-two{grid-template-columns:1fr}}

/* ---- status board variants (only the columns that apply) ------------------------------------------------------ */
.mtfd-stat.apa-s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mtfd-stat.apa-s1{grid-template-columns:1fr}
.mtfd-stat.apa-s1 ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px}
@media (max-width:809px){.mtfd-stat.apa-s2{grid-template-columns:1fr} .mtfd-stat.apa-s1 ul{grid-template-columns:1fr}}

/* ---- the stamp ----------------------------------------------------------------------------------------------- */
.apa-stamp{display:grid;gap:18px}
.apa-frame{position:relative;aspect-ratio:21/9;border-radius:18px;overflow:hidden;background:#07080a;container-type:inline-size;box-shadow:0 50px 90px -40px color-mix(in srgb,var(--mt-ink) 70%,transparent),inset 0 0 0 1px rgba(255,255,255,.06)}
.apa-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.apa-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
/* the band: 10% of the frame's height with a dark fade, as the app burns it in; the mark sits just above it */
.apa-band{position:absolute;left:0;right:0;bottom:0;min-height:10%;padding:1.35cqw 2.5cqw 1.5cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:.5cqw;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:#fff;text-shadow:0 0 .35cqw #000,0 0 .1cqw #000;white-space:nowrap}
.apa-band p{display:flex;align-items:center;gap:1.3cqw;margin:0;font-size:max(9px,1.6cqw);line-height:1.2;letter-spacing:.01em}
.apa-band .r{display:flex;gap:2.2cqw;margin-left:auto}
.apa-band .rec{display:inline-flex;align-items:center;gap:.9cqw}
.apa-band .rec::before{content:"";width:1.15cqw;height:1.15cqw;min-width:6px;min-height:6px;border-radius:50%;background:#e5484d}
.apa-band .loc{font-size:max(8px,1.36cqw);color:rgba(255,255,255,.9)}
.apa-mark{position:absolute;right:3cqw;bottom:calc(100% + 1.4cqw);display:flex;align-items:center;gap:.9cqw;color:rgba(255,255,255,.86);font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:max(9px,2.3cqw);letter-spacing:-.02em;line-height:1;filter:drop-shadow(.12cqw .12cqw 0 rgba(0,0,0,.35))}
.apa-mark svg{width:1.25em;height:1.25em;fill:currentColor}
.apa-mark .tm{font-size:.42em;vertical-align:.95em}
.apa-stamp [data-k]{transition:opacity .35s ease}
.apa-stamp .is-off{display:none}
.apa-band.is-empty{background:none}
@media (max-width:809px){.apa-frame{aspect-ratio:4/3} .apa-band{gap:3px;padding:10px 12px 11px} .apa-band .r{gap:10px} .apa-band p{gap:8px}}
@media (max-width:520px){.apa-band p:not(.loc){flex-wrap:wrap;row-gap:3px} .apa-band .r{margin-left:0;width:100%}}
.apa-chips{display:none;flex-wrap:wrap;align-items:center;gap:8px}
.js .apa-chips{display:flex}
.apa-chips>span{margin-right:6px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.apa-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--mt-ink);color:var(--mt-bone);font:600 14px/1 var(--mt-font-b),system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);transition:background .2s,color .2s,translate .12s}
.apa-chip::before{content:"";width:14px;height:14px;flex:none;border-radius:4px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-bone) 55%,transparent)}
.apa-chip[aria-pressed="true"]{background:var(--mt-brass);color:var(--mt-ink);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 22%,transparent)}
.apa-chip[aria-pressed="true"]::before{box-shadow:none;background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.4' fill='none' stroke='%23141416' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.apa-chip:active{translate:0 1px}
.apa-chip em{font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.1em;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,currentColor 14%,transparent)}
.apa-ex{margin:-6px 0 0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--mt-mut)}
.apa-stamp-note{margin:0;min-height:1.6em;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;color:var(--mt-mut)}

/* ---- loop recording ------------------------------------------------------------------------------------------ */
.apa-loop{position:relative;padding:clamp(22px,2.6vw,34px);border-radius:22px;background:var(--mt-pine);color:var(--mt-cloud);box-shadow:0 40px 80px -50px #000}
.apa-loop-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:18px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.apa-loop-top b{font-weight:500;color:var(--mt-cloud)}
.apa-track{--w:clamp(44px,5.4vw,78px);--g:6px;position:relative;height:clamp(64px,6vw,84px);border-radius:14px;background:var(--mt-night);overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.apa-segs{position:absolute;left:10px;top:10px;bottom:10px;right:calc(var(--w) + 18px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.apa-segs b{position:absolute;right:0;top:0;bottom:0;display:flex;gap:var(--g);animation:apaSlide 3.2s linear infinite}
.apa-segs i{flex:none;width:var(--w);border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 15%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent)}
.apa-segs i:last-child{background:color-mix(in srgb,var(--mt-brass) 30%,var(--mt-pine))}
.apa-now{position:absolute;top:10px;bottom:10px;right:10px;width:var(--w);border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--mt-brass) 12%,var(--mt-night));box-shadow:inset 0 0 0 1.5px var(--mt-brass),0 0 18px color-mix(in srgb,var(--mt-brass) 25%,transparent)}
.apa-now::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--mt-brass);transform-origin:0 50%;animation:apaFill 3.2s linear infinite}
.apa-now span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:10.5px;letter-spacing:.1em;color:var(--mt-cloud)}
.apa-now span::before{content:"";width:7px;height:7px;border-radius:50%;background:#e5484d;box-shadow:0 0 6px #e5484d;animation:mtLed 1.6s ease-in-out infinite}
@keyframes apaSlide{from{translate:calc(var(--w) + var(--g)) 0}to{translate:0 0}}
@keyframes apaFill{from{scale:0 1}to{scale:1 1}}
.apa-loop-ax{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 52%,transparent)}
.apa-loop-ax span:first-child::before{content:"← "}
.apa-loop-ax span:last-child::after{content:" →"}
.apa-loop-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 0}
.apa-loop-dl div{padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent)}
.apa-loop-dl dt{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:22px;letter-spacing:-.03em}
.apa-loop-dl dd{margin:4px 0 0;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 68%,transparent)}
@media (max-width:809px){.apa-loop-dl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.apa-segs b,.apa-now::before{animation:none} .apa-now::before{scale:.6 1}}

/* ---- Touch protection, a working replica ------------------------------------------------------------------- */
.apa-tpw{display:grid;grid-template-columns:auto minmax(0,600px);justify-content:center;gap:clamp(30px,6vw,110px);align-items:center}
.apa-tpw .dvc{--dw:clamp(250px,24vw,340px)}
.apa-tp{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;background:#000;color:#fff;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:opacity .5s ease}
.apa-tp-read{position:absolute;left:50%;top:42%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.apa-tp-rec{display:flex;align-items:center;gap:4cqw;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:700;font-size:16cqw;line-height:1;letter-spacing:-.02em}
.apa-tp-rec i{width:6.5cqw;height:6.5cqw;border-radius:50%;background:#e5484d;animation:apaPulse 1.8s ease-in-out infinite}
@keyframes apaPulse{0%,100%{opacity:1}50%{opacity:.25}}
.apa-tp-t{margin-top:2cqw;font-weight:500;font-size:7.4cqw;letter-spacing:.04em;color:rgba(255,255,255,.92)}
.apa-tp-c{margin-top:4cqw;font-weight:500;font-size:3.2cqw;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.apa-tp-b{margin-top:2cqw;font-size:3cqw;letter-spacing:.1em;color:rgba(255,255,255,.47)}
.apa-hold{position:absolute;left:50%;bottom:6.5%;translate:-50% 0;display:flex;align-items:center;gap:2.5cqw;height:13.4cqw;padding:0 5.5cqw;border:0;border-radius:99px;overflow:hidden;background:rgba(20,21,26,.92);color:#fff;font:700 3.7cqw/1 var(--mt-font-b),system-ui,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-brass) 80%,transparent);touch-action:none;-webkit-tap-highlight-color:transparent}
.apa-hold::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--mt-brass) 32%,transparent);transform-origin:0 50%;scale:var(--p,0) 1;transition:scale .2s ease-out}
.apa-hold.is-down::before{scale:1 1;transition:scale 1.5s linear}
.apa-hold::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.65);opacity:0;transition:opacity .6s ease;pointer-events:none}
.apa-tp.is-sleepy .apa-hold:not(.is-down)::after{opacity:1}
.apa-hold svg{position:relative;width:4.4cqw;height:4.4cqw;flex:none;fill:var(--mt-brass)}
.apa-hold span{position:relative}
.apa-tp-open{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;padding:10cqw;text-align:center;background:radial-gradient(120% 70% at 50% 40%,#1c1f26,#07080a);color:#fff}
.apa-tp-open b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:8cqw;letter-spacing:-.03em;line-height:1.05}
.apa-tp-open span{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:3.3cqw;letter-spacing:.08em;color:rgba(255,255,255,.66);line-height:1.5}
.apa-tp-open i{width:12cqw;height:12cqw;border-radius:50%;display:grid;place-items:center;background:var(--mt-brass);color:var(--mt-ink);font-style:normal;font-size:6cqw;font-weight:700}
.apa-tpv.is-open .apa-tp{opacity:0;pointer-events:none}
.apa-tp-side h3{margin:0 0 12px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em;line-height:1.05}
.apa-tp-side>p:not([class]){margin:0 0 14px;max-width:560px;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.apa-tp-side .mtfd-note{margin-top:14px}
.apa-tp-try{display:none;margin:0 0 14px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.02em;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.js .apa-tp-try{display:block}
@media (max-width:900px){.apa-tpw{grid-template-columns:1fr;justify-items:center} .apa-tp-side{justify-self:stretch}}
@media (prefers-reduced-motion:reduce){.apa-tp-rec i{animation:none} .apa-hold.is-down::before{transition-duration:1.5s}}

/* ---- the police stop on a timeline ---------------------------------------------------------------------------- */
.apa-tl{--pre:24%;position:relative;padding:clamp(22px,2.6vw,36px);border-radius:22px;background:var(--mt-pine);color:var(--mt-cloud);box-shadow:0 40px 80px -50px #000}
.apa-tl-ax{position:relative;display:grid;grid-template-columns:var(--pre) 1fr;margin:0 0 12px 180px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 58%,transparent)}
.apa-tl-ax span:last-child{display:flex;justify-content:space-between;padding-left:14px}
.apa-lane{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:0;padding:12px 0;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.apa-lane>p{margin:0;padding-right:16px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent)}
.apa-lane>p .mt-soon{display:table;margin:6px 0 0}
.apa-bar{position:relative;display:grid;grid-template-columns:var(--pre) 1fr;height:46px;border-radius:10px;background:var(--mt-night);overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 7%,transparent)}
.apa-bar .pre{position:relative;display:flex;align-items:center;padding:0 12px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-ink);background:repeating-linear-gradient(135deg,var(--mt-brass) 0 8px,color-mix(in srgb,var(--mt-brass) 82%,#000) 8px 16px);white-space:nowrap;overflow:hidden}
.apa-bar .pre.is-plain{background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.apa-bar .pre.is-lock{background:color-mix(in srgb,var(--mt-brass) 26%,transparent);color:var(--mt-brass)}
.apa-bar .pre.is-line{background:transparent;color:var(--mt-brass);box-shadow:inset 0 0 0 1.5px var(--mt-brass);border-radius:10px 0 0 10px}
.apa-bar .stop{position:relative;display:flex;align-items:center;padding:7px 36px 7px 14px;overflow:hidden}
.apa-bar .stop::before{content:"";position:absolute;left:0;top:-6px;bottom:-6px;width:3px;background:linear-gradient(180deg,#e5484d 0 50%,#3b82f6 50% 100%);box-shadow:0 0 10px rgba(229,72,77,.6)}
.apa-bar .stop::after{content:"";position:absolute;right:12px;top:50%;width:10px;height:10px;margin-top:-5px;border-top:2px solid color-mix(in srgb,var(--mt-cloud) 55%,transparent);border-right:2px solid color-mix(in srgb,var(--mt-cloud) 55%,transparent);rotate:45deg}
.apa-pcs{position:absolute;left:14px;right:36px;top:7px;bottom:7px;display:flex;gap:3px}
.apa-pcs i{flex:1 1 0;height:100%;border-radius:4px;background:color-mix(in srgb,var(--mt-cloud) 12%,transparent)}
.apa-pcs.lit i{background:var(--mt-brass);box-shadow:0 0 8px color-mix(in srgb,var(--mt-brass) 45%,transparent)}
.js .apa-tl .apa-pcs.lit{clip-path:inset(0 100% 0 0)}
.js .apa-tl.is-on .apa-pcs.lit{animation:apaLit 9s infinite}
@keyframes apaLit10{0%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(10,end)}78%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes apaLit{0%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(20,end)}78%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.apa-bar.is-copy .apa-pcs i{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.apa-bar.is-up .stop{justify-content:flex-start}
.apa-bar.is-up .stop span{position:relative;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent);white-space:nowrap}
.apa-bar .none{display:flex;align-items:center;padding:0 12px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 40%,transparent)}
.apa-tl .s{display:none}
@media (max-width:1199px){.apa-tl .l{display:none} .apa-tl .s{display:inline}}
.apa-tl-key{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;padding:0;list-style:none;font-size:14px;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.apa-tl-key li{display:flex;align-items:center;gap:9px}
.apa-tl-key i{width:22px;height:12px;border-radius:3px;flex:none}
.apa-tl-key .k1{background:color-mix(in srgb,var(--mt-brass) 26%,transparent)}
.apa-tl-key .k2{background:var(--mt-brass)}
.apa-tl-key .k3{box-shadow:inset 0 0 0 1.5px var(--mt-brass)}
.apa-tl-key .k4{width:4px;background:linear-gradient(180deg,#e5484d 0 50%,#3b82f6 50% 100%)}
@media (max-width:809px){
  .apa-tl{--pre:34%;padding:16px}
  .apa-tl-ax{margin-left:0}
  .apa-lane{grid-template-columns:1fr;gap:8px}
  .apa-bar{height:42px}
  .apa-bar .pre{font-size:9px;padding:0 8px}
  .apa-pcs{left:10px;right:28px}
  .js .apa-tl.is-on .apa-pcs.lit{animation-name:apaLit10}
  .apa-pcs i:nth-child(n+11){display:none}
}
@media (prefers-reduced-motion:reduce){.js .apa-tl .apa-pcs.lit,.js .apa-tl.is-on .apa-pcs.lit{animation:none;clip-path:none}}

/* ---- speed and the limit -------------------------------------------------------------------------------------- */
.apa-lim{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.apa-lim-hud{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,2.4vw,34px);padding:clamp(34px,4vw,60px) clamp(20px,3vw,44px);border-radius:26px;background:radial-gradient(120% 90% at 30% 0,#23262d,#0b0c0f 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent),0 50px 90px -50px #000;min-height:clamp(230px,22vw,300px)}
.apa-lim-hud::before{content:"GPS ±16 FT";position:absolute;left:clamp(20px,3vw,44px);top:clamp(18px,2vw,26px);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.apa-lim-hud.is-kmh::before{content:"GPS ±5 M"}
.apa-lim-sp{display:flex;align-items:flex-end;gap:10px;color:var(--mt-brass)}
.apa-lim-sp .mt-seg{--s:clamp(84px,9vw,132px)}
.apa-lim-sp .mt-seg-d path{fill:color-mix(in srgb,var(--mt-brass) 13%,transparent)}
.apa-lim-sp .mt-seg-d path.on{fill:var(--mt-brass);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mt-brass) 45%,transparent))}
.apa-lim-u{padding-bottom:6px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:clamp(13px,1.2vw,17px);letter-spacing:.06em;color:rgba(255,255,255,.8)}
.apa-sign{--z:clamp(72px,7vw,100px);position:relative;flex:none;width:var(--z);height:calc(var(--z) * 1.3);display:grid;place-items:center;transition:opacity .35s,scale .35s}
.apa-sign b{position:absolute;inset:6%;display:flex;flex-direction:column;align-items:center;border-radius:calc(var(--z) * .12);background:#fff;color:#000;box-shadow:inset 0 0 0 calc(var(--z) * .055) #fff,inset 0 0 0 calc(var(--z) * .085) #000;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;line-height:.92;padding-top:calc(var(--z) * .16)}
.apa-sign b small{font-size:calc(var(--z) * .19);letter-spacing:.02em}
.apa-sign b span{margin-top:calc(var(--z) * .05);font-size:calc(var(--z) * .5);letter-spacing:-.03em}
.apa-sign::before{content:"";position:absolute;inset:0;border-radius:calc(var(--z) * .17);box-shadow:inset 0 0 0 calc(var(--z) * .05) #e5484d;opacity:0;transition:opacity .25s}
.apa-sign.is-over::before{opacity:1;animation:apaRing 1.1s ease-in-out infinite}
@keyframes apaRing{50%{box-shadow:inset 0 0 0 calc(var(--z) * .05) #e5484d,0 0 18px rgba(229,72,77,.55)}}
.apa-sign.is-kmh b{inset:8% 4% 22%;border-radius:50%;box-shadow:inset 0 0 0 calc(var(--z) * .12) #dc1a1a;padding:0;justify-content:center}
.apa-sign.is-kmh b small{display:none}
.apa-sign.is-kmh b span{margin:0;font-size:calc(var(--z) * .36)}
.apa-sign.is-kmh::before{inset:4% 0 18%;border-radius:50%}
.apa-sign.is-kmh::after{content:"SPEED LIMIT";position:absolute;bottom:4%;left:50%;translate:-50% 0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:calc(var(--z) * .12);letter-spacing:.14em;color:#c8c8cc;white-space:nowrap}
.apa-sign.is-none{opacity:0;scale:.85}
.apa-lim-ctl{display:grid;gap:18px}
.apa-lim-ctl h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em;line-height:1.05}
.apa-lim-ctl>p:not([class]){margin:0;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.apa-lim-js{display:none;gap:16px}
.js .apa-lim-js{display:grid}
.apa-range{display:grid;gap:8px}
.apa-range label{display:flex;justify-content:space-between;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.apa-range input{width:100%;height:34px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.apa-range input::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--mt-brass) 0 var(--f,33%),color-mix(in srgb,var(--mt-cloud) 16%,transparent) var(--f,33%))}
.apa-range input::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--mt-brass) 0 var(--f,33%),color-mix(in srgb,var(--mt-cloud) 16%,transparent) var(--f,33%))}
.apa-range input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--mt-cloud);box-shadow:0 0 0 4px var(--mt-ink),0 4px 10px rgba(0,0,0,.5)}
.apa-range input::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--mt-cloud);box-shadow:0 0 0 4px var(--mt-ink),0 4px 10px rgba(0,0,0,.5)}
.apa-seg-ctl{display:flex;flex-wrap:wrap;gap:8px}
.apa-seg-ctl button{min-height:40px;padding:0 14px;border:0;border-radius:10px;background:color-mix(in srgb,var(--mt-cloud) 9%,transparent);color:var(--mt-cloud);font:600 14px/1 var(--mt-font-b),system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.apa-seg-ctl button[aria-pressed="true"]{background:var(--mt-brass);color:var(--mt-ink);box-shadow:none}
.mttr:not(.mt-dark) .apa-seg-ctl button{background:var(--mt-cloud);color:var(--mt-ink);box-shadow:inset 0 0 0 1px var(--mt-fog),0 2px 0 color-mix(in srgb,var(--mt-ink) 10%,transparent)}
.mttr:not(.mt-dark) .apa-seg-ctl button[aria-pressed="true"]{background:var(--mt-ink);color:var(--mt-bone);box-shadow:none}
.apa-units{margin-bottom:18px}
.apa-lim-say{display:flex;align-items:center;gap:10px;min-height:48px;margin:0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 6%,transparent);font-size:15px;line-height:1.4}
.apa-lim-say i{width:9px;height:9px;flex:none;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.apa-lim-say.is-over i{background:#ef4444;box-shadow:0 0 8px #ef4444}
.apa-lim-say.is-none i{background:color-mix(in srgb,var(--mt-cloud) 40%,transparent);box-shadow:none}
@media (max-width:900px){.apa-lim{grid-template-columns:1fr}}

/* ---- the Stopwatch's runs as road signs ----------------------------------------------------------------------- */
.apa-runs{display:grid;grid-template-columns:auto minmax(0,560px);justify-content:center;gap:clamp(24px,4vw,64px);align-items:center}
.apa-board{max-width:100%;padding:clamp(20px,2.6vw,34px) clamp(22px,3vw,44px);border-radius:24px;background:#000;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent),0 50px 90px -50px #000}
.apa-board-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.apa-board-h small{font-size:9.5px;letter-spacing:.18em;color:rgba(255,255,255,.5)}
.apa-board [data-set]{display:grid;grid-template-columns:auto auto;justify-content:start;gap:0 clamp(24px,3vw,44px)}
.apa-board.is-metric [data-set="metric"]{display:grid}
.apa-grp{margin:18px 0 0}
.apa-grp:last-child{grid-column:1/-1}
.apa-grp>p{margin:0 0 10px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mt-brass)}
.apa-grp>div{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px)}
.apa-dia{--z:clamp(68px,6.4vw,92px);position:relative;display:grid;place-items:center;width:var(--z);height:var(--z);padding:0;border:0;background:none;color:#000;cursor:pointer;-webkit-tap-highlight-color:transparent}
.apa-dia::before{content:"";position:absolute;inset:14.6%;border-radius:12%;rotate:45deg;background:#fff;box-shadow:inset 0 0 0 calc(var(--z) * .035) #fff,inset 0 0 0 calc(var(--z) * .06) #000,0 3px 0 rgba(255,255,255,.18);transition:background .25s,box-shadow .25s}
.apa-dia[aria-pressed="true"]::before{background:var(--mt-brass);box-shadow:inset 0 0 0 calc(var(--z) * .035) var(--mt-brass),inset 0 0 0 calc(var(--z) * .06) #000,0 0 22px color-mix(in srgb,var(--mt-brass) 55%,transparent)}
.apa-dia>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;line-height:1}
.apa-dia>span i{width:calc(var(--z) * .15);height:calc(var(--z) * .15);margin-bottom:2px}
.apa-dia .go{border-radius:50%;background:radial-gradient(circle at 40% 35%,#86efac,#16a34a 70%);box-shadow:0 0 0 1.5px #000}
.apa-dia .br{background:#dc2626;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.apa-dia .fl{background:conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0 0/50% 50%;box-shadow:0 0 0 1.5px #000}
.apa-dia b{font-size:calc(var(--z) * .17);letter-spacing:-.03em}
.apa-dia.is-long b{font-size:calc(var(--z) * .135)}
.apa-dia small{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:calc(var(--z) * .085);letter-spacing:.08em}
.apa-runs-side h3{margin:0 0 12px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em;line-height:1.05}
.apa-runs-side>p:not([class]){margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--mt-mut)}
.apa-run-say{display:grid;gap:6px;margin:0 0 18px;padding:16px 18px 16px 20px;border-radius:14px;background:var(--mt-cloud);box-shadow:inset 4px 0 0 var(--mt-brass),inset 0 0 0 1px var(--mt-fog)}
.apa-run-say b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:22px;letter-spacing:-.03em;color:var(--mt-ink)}
.mt-dark .apa-run-say b{color:var(--mt-cloud)}
.apa-run-say span{font-size:15px;line-height:1.55;color:var(--mt-mut)}
.mt-dark .apa-run-say{background:color-mix(in srgb,var(--mt-cloud) 6%,transparent);box-shadow:inset 4px 0 0 var(--mt-brass)}
.mt-dark .apa-run-say span{color:color-mix(in srgb,var(--mt-cloud) 74%,transparent)}
.apa-units{display:none}
.js .apa-units{display:flex}
.apa-board [data-set="metric"]{display:none}

.apa-board.is-metric [data-set="us"]{display:none}
@media (max-width:1099px){.apa-runs{grid-template-columns:1fr;justify-items:center} .apa-runs-side{max-width:640px}}

/* ---- night mode's rule ---------------------------------------------------------------------------------------- */
.apa-ev{padding:clamp(20px,2.6vw,34px);border-radius:24px;background:var(--mt-pine);color:var(--mt-cloud);box-shadow:0 50px 90px -50px #000}
.apa-ev-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:14px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.apa-ev-top span:last-child{color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.apa-ev svg{display:block;width:100%;height:auto;overflow:visible}
.apa-ev .grid line{stroke:color-mix(in srgb,var(--mt-cloud) 8%,transparent);stroke-width:1}
.apa-ev .thr{stroke-width:1.2;stroke-dasharray:5 5;fill:none}
.apa-ev .thr.dk{stroke:color-mix(in srgb,var(--mt-cloud) 45%,transparent)}
.apa-ev .thr.lt{stroke:color-mix(in srgb,var(--mt-cloud) 45%,transparent)}
.apa-ev .lbl{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;fill:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.apa-ev .lbl.hi{fill:var(--mt-cloud)}
.apa-ev .ln{fill:none;stroke:var(--mt-cloud);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.apa-ev .ar{fill:color-mix(in srgb,var(--mt-cloud) 7%,transparent)}
.apa-ev .nt{fill:var(--mt-brass)}
.apa-ev .nt-t{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:11px;letter-spacing:.1em;fill:var(--mt-ink)}
.apa-ev .ev-mk{stroke:var(--mt-brass);stroke-width:1.5}
.apa-ev .ev-dot{fill:var(--mt-brass)}
.apa-ev .ev-dot.off{fill:var(--mt-night);stroke:var(--mt-brass);stroke-width:2}
.apa-ev .ev-span{fill:color-mix(in srgb,var(--mt-brass) 14%,transparent)}
.apa-ev .ev-span.no{fill:color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.js .apa-ev .ln{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 3.2s cubic-bezier(.3,.1,.3,1) .2s}
.js .apa-ev.is-on .ln{stroke-dashoffset:0}
.js .apa-ev .nt-g{clip-path:inset(0 100% 0 0);transition:clip-path 3.2s cubic-bezier(.3,.1,.3,1) .2s}
.js .apa-ev.is-on .nt-g{clip-path:inset(0 0 0 0)}
.js .apa-ev .ev-an{opacity:0;transition:opacity .6s ease calc(.2s + var(--t,0) * 3.2s)}
.js .apa-ev.is-on .ev-an{opacity:1}
.apa-ev-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.apa-ev-key li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.apa-ev-key b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:19px;letter-spacing:-.03em;color:var(--mt-cloud)}
.apa-ev-wide{display:block}
.apa-ev-tall{display:none}
@media (max-width:809px){.apa-ev-key{grid-template-columns:repeat(2,minmax(0,1fr))} .apa-ev-wide{display:none} .apa-ev-tall{display:block}}
@media (prefers-reduced-motion:reduce){.js .apa-ev .ln{stroke-dashoffset:0;transition:none} .js .apa-ev .nt-g{clip-path:none;transition:none} .js .apa-ev .ev-an{opacity:1;transition:none}}

/* ---- a plain warning -------------------------------------------------------------------------------------------- */
.apa-warn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-items:start;margin:0;padding:clamp(20px,2.4vw,30px);border-radius:18px;background:var(--mt-ink);color:var(--mt-cloud);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.apa-warn>i{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--mt-brass);color:var(--mt-ink);font-style:normal;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:28px}
.apa-warn b{display:block;margin-bottom:6px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.1}
.apa-warn p{margin:0;font-size:15.5px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 76%,transparent)}
.apa-warn p+p{margin-top:8px}
.mtfd-h2+.apa-warn,.apa-warn+.mtfd-note{margin-top:0}
.apa-warn+.mtfd-note{margin-top:14px}

/* the gap between blocks that follow a heading inside the mtfd body */
.apa-gap{margin-top:clamp(22px,2.4vw,32px)}

/* ---- example files in a window (body cam) ---------------------------------------------------------------------- */
.apa-files{display:flex;flex-direction:column;gap:14px;padding:clamp(16px,2vw,24px);background:var(--mt-night);color:var(--mt-cloud)}
.apa-files .mt-scr-rows p{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.apa-files .mt-scr-rows span{font-size:11px;letter-spacing:.1em}
@media (max-width:809px){.apa-files .mt-scr-top span:not(.pill){display:none} .apa-files .mt-scr-rows p{font-size:11.5px}}

.apa-nw{white-space:nowrap}

/* ---- a lead illustration (body cam: the phone in a shirt pocket), wide on desktop, 4:5 on phones ------------- */
.apa-banner{margin:clamp(44px,5vw,72px) 0 0}
.apa-banner picture{display:block;border-radius:24px;overflow:hidden;background:#0d0f0e;box-shadow:0 60px 100px -50px color-mix(in srgb,var(--mt-ink) 75%,transparent),inset 0 0 0 1px rgba(255,255,255,.04)}
.apa-banner img{display:block;width:100%;height:auto}
@media (min-width:761px){.apa-banner img{aspect-ratio:2/1;object-fit:cover;object-position:58% 38%}}
.apa-banner figcaption{margin:14px 0 0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--mt-mut)}
@media (max-width:760px){.apa-banner picture{border-radius:18px}}

/* ---- 29b-appB.css ---- */
/* 29b App pages, batch B (apb): the parts of the Clips, Reports, Multi-phone, Parked Guard, Privacy and Cloud portal
   pages that the shared feature-page kit (mtfd, mt-scr, mttr, dvc/dco) doesn't draw:
   .apb-cl     the Clips console inside an mtfd window: a list by day and the player, example clips
   .apb-fn     a clip's file name taken apart (date, time to the second, camera)
   .apb-frame  an example frame with the stamp band as the app burns it in, with numbered pins
   .apb-pins / .apb-pin / .apb-legend   numbered points on a picture and the list that names them
   .apb-hc     an honest-note card (yellow edge)
   .apb-mp     the multi-phone car: a top-down car with one to four phones and their views, and a setup switcher
   .apb-pg     Parked Guard's night scene with example alerts (.apb-nt)
   .apb-gate   the alert rules as a column of gates
   .apb-ah     reports ahead: which nearby reports would alert, and why the others wouldn't
   .apb-web    a browser window around a portal screenshot
   .apb-pl     the Cloud and Cloud+ plan cards
   Everything shows without JavaScript; js/29b-appB.js only adds the switcher and pin highlighting. */

/* ---- small shared bits ------------------------------------------------------------------------------------- */
.apb-mono{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.apb-ex{display:inline-block;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.06em;line-height:1.3;color:color-mix(in srgb,currentColor 62%,transparent);white-space:nowrap}
.apb-cap{margin:18px auto 0;max-width:760px;text-align:center;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--mt-mut)}
.apb-h3{margin:0 0 10px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em;line-height:1.1}
.js .apb-rise[data-reveal]:not(.is-in){opacity:0;translate:0 22px}
.apb-rise[data-reveal]{transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.mtfd-key .mt-soon{align-self:flex-start;margin:2px 0 0;font-size:8.5px;padding:1px 7px}
.mtfd-soonline{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:10px 14px;border-radius:10px;width:max-content;max-width:100%;background:var(--mt-ink);color:var(--mt-bone);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;line-height:1.45}
.mtfd-soonline i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass);animation:mtLed 2.2s ease-in-out infinite}
.mtfd-note a{color:inherit;text-decoration:underline;text-decoration-color:var(--mt-acc);text-underline-offset:3px}
.mtfd-facts dd a{color:inherit;text-decoration:underline;text-decoration-color:var(--mt-acc);text-underline-offset:3px}
.mttr-copy p a{color:inherit;text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:4px}

/* ---- the Clips console (inside .mt-scr) -------------------------------------------------------------------- */
.apb-cl .mt-scr-top .apb-cl-rec{color:#ff6b70;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.02em}
.apb-cl-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:18px;align-items:start}
.apb-cl-chips{display:flex;gap:6px;margin-bottom:4px}
.apb-cl-chips span{padding:7px 12px;border-radius:8px;background:#24272e;font-size:12px;font-weight:700;color:var(--mt-cloud)}
.apb-cl-chips span.on{background:var(--mt-brass);color:#000}
.apb-cl-day{margin:14px 0 7px 2px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--mt-brass)}
.apb-cl-row{display:flex;align-items:center;gap:12px;margin-top:6px;padding:8px 10px 8px 8px;border-radius:11px;background:#181a1f;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s}
.apb-cl-row.is-sel{box-shadow:inset 0 0 0 1.5px var(--mt-brass)}
.apb-cl-th{position:relative;flex:none;width:88px;aspect-ratio:16/9;border-radius:6px;background:#000 var(--img) var(--p,50%) 60%/cover no-repeat;overflow:hidden}
.apb-cl-th::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.apb-cl-row>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.apb-cl-row b{font-size:14px;letter-spacing:-.01em}
.apb-cl-row small{font-size:11.5px;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apb-cl-play{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:#000;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.apb-cl-ph{display:flex;align-items:center;gap:10px}
.apb-cl-x{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#24272e;font-size:13px;color:var(--mt-cloud)}
.apb-cl-ph>.apb-cl-t{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.apb-cl-ph b{font-size:13.5px}
.apb-cl-ph small{font-size:11px;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.apb-cl-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;background:#24272e;font-size:11.5px;font-weight:700;white-space:nowrap;box-shadow:0 3px 0 #0b0c0f}
.apb-cl-btn.is-y{background:var(--mt-brass);color:#000;box-shadow:0 3px 0 color-mix(in srgb,var(--mt-brass) 55%,#000)}
.apb-cl-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.apb-cl-vid{position:relative;aspect-ratio:1600/738;border-radius:8px;overflow:hidden;background:#000 var(--img) center/cover no-repeat;container-type:inline-size}
.apb-cl-vid .apb-band{font-size:2.05cqi;gap:.2em 1.2em}
.apb-cl-bar{display:flex;align-items:center;gap:10px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.apb-cl-bar i{position:relative;flex:1;height:4px;border-radius:4px;background:color-mix(in srgb,var(--mt-cloud) 16%,transparent)}
.apb-cl-bar i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34%;border-radius:inherit;background:var(--mt-cloud)}
.apb-cl-bar i::after{content:"";position:absolute;left:34%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--mt-cloud)}
.apb-cl-file{margin:0;padding:8px 10px;border-radius:8px;background:#181a1f;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent);overflow-wrap:anywhere}
.apb-cl-file b{color:var(--mt-brass);font-weight:500}
@media (max-width:1099px){.apb-cl-body{grid-template-columns:1fr}.apb-cl-list .apb-cl-row:nth-of-type(n+5){display:none}}
@media (max-width:809px){.apb-cl-th{width:72px}.apb-cl-chips span{padding:6px 10px;font-size:11.5px}.apb-cl .mt-scr-top .apb-cl-rec{display:none}.apb-cl-list .apb-cl-row+.apb-cl-row{display:none}.apb-cl-ph .apb-cl-btn span{display:none}}

/* ---- the stamp band, as the app burns it in (CameraEngine.swift Stamper: a dark fade, REC and the time on the left,
   speed · G-force · trip on the right, the place underneath; the Dashivo mark just above it on the right) --------- */
.apb-band{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:.2em 1.6em;padding:1.1em 2.5% .9em;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.66));color:#fff;font-family:var(--mt-font-m),"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;line-height:1.25;letter-spacing:.01em;text-shadow:0 0 .15em #000;white-space:nowrap}
.apb-band .apb-b-rec{display:inline-flex;align-items:center;gap:.45em}
.apb-band .apb-b-rec::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#e5484d;box-shadow:0 0 .5em rgba(229,72,77,.8)}
.apb-band .apb-b-t,.apb-band .apb-b-loc{justify-self:start}
.apb-band .apb-b-mo{grid-column:3;justify-self:end;word-spacing:.35em}
.apb-band .apb-b-loc{grid-column:1/-1;font-size:.85em;color:rgba(255,255,255,.9)}
.apb-mark{position:absolute;right:3%;display:inline-flex;align-items:center;gap:.35em;color:rgba(255,255,255,.86);font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:800;letter-spacing:-.01em;filter:drop-shadow(.06em .06em 0 rgba(0,0,0,.35))}
.apb-mark svg{width:1.25em;height:1.25em;fill:currentColor}
.apb-mark sup{font-size:.42em;vertical-align:super;line-height:0}

/* ---- a clip's name, taken apart ------------------------------------------------------------------------------ */
.apb-fn{margin:0;padding:clamp(22px,3vw,40px) clamp(18px,3vw,40px) clamp(20px,2.4vw,30px);border-radius:22px;background:var(--mt-pine);color:var(--mt-cloud)}
.apb-fn-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:clamp(20px,2.4vw,30px);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.apb-fn-top b{font-weight:500;color:var(--mt-cloud)}
.apb-fn-name{display:flex;align-items:flex-start;flex-wrap:nowrap;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:clamp(15px,3.95vw,58px);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.apb-fn-name>i{font-style:normal;color:color-mix(in srgb,var(--mt-cloud) 38%,transparent)}
.apb-fn-p{position:relative;display:flex;flex-direction:column;gap:.34em}
.apb-fn-p b{font-weight:500;padding-bottom:.18em;border-bottom:2px solid currentColor}
.apb-fn-p.is-d b{color:var(--mt-cloud)}
.apb-fn-p.is-t b{color:var(--mt-brass)}
.apb-fn-p.is-c b{color:var(--mt-cloud)}
.apb-fn-p em{font-style:normal;font-size:max(10px,.2em);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 66%,transparent);white-space:normal;max-width:11em;line-height:1.35}
.apb-fn-p.is-t em{color:var(--mt-brass)}
.apb-fn-list{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;gap:4px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.apb-fn-list li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.apb-fn-list li::before{content:"";flex:none;width:14px;height:17px;border-radius:2px 5px 2px 2px;background:color-mix(in srgb,var(--mt-cloud) 22%,transparent);box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.apb-fn-list li span{margin-left:auto;color:color-mix(in srgb,var(--mt-cloud) 50%,transparent);white-space:nowrap}
.apb-fn-list li b{font-weight:500;color:var(--mt-cloud);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:809px){.apb-fn-name{font-size:clamp(12px,4.05vw,40px)}.apb-fn-p em{font-size:9px;letter-spacing:.08em}.apb-fn-list li span{display:none}.apb-fn-list{font-size:11.5px}}

/* ---- an example frame with the stamp -------------------------------------------------------------------------- */
.apb-frame{position:relative;margin:0}
.apb-frame-in{position:relative;aspect-ratio:1600/738;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 50px 90px -40px rgba(0,0,0,.75),inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent);container-type:inline-size}
.apb-frame-in>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.apb-frame-in .apb-band{font-size:clamp(7px,1.55cqi,19px)}
.apb-frame-in .apb-mark{font-size:clamp(9px,2.2cqi,26px);bottom:calc(clamp(7px,1.55cqi,19px) * 4.9)}
@media (max-width:640px){.apb-frame-in{aspect-ratio:4/3}.apb-frame-in .apb-band{grid-template-columns:auto 1fr;font-size:clamp(8px,2.45cqi,13px)}.apb-frame-in .apb-band .apb-b-mo{grid-column:1/-1;justify-self:start;grid-row:2}.apb-frame-in .apb-mark{bottom:calc(clamp(8px,2.45cqi,13px) * 5.6)}}
/* numbered pins on a picture, and the list under it */
.apb-pins{position:absolute;inset:0;z-index:4;pointer-events:none}
.apb-pin{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--mt-brass);color:var(--mt-ink);font:600 11px/1 var(--mt-font-m),ui-monospace,monospace;box-shadow:0 0 0 3px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.45);transition:scale .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.apb-pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--mt-brass);opacity:0;scale:.6;transition:opacity .3s,scale .45s cubic-bezier(.2,.8,.2,1)}
.apb-pin.is-hot{scale:1.18}
.apb-pin.is-hot::after{opacity:1;scale:1}
.js [data-reveal]:not(.is-in) .apb-pin{scale:0}
[data-reveal] .apb-pin{transition-delay:calc(.35s + var(--i,0) * 90ms)}
[data-reveal].is-done .apb-pin{transition-delay:0s}
.apb-legend{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px 18px;counter-reset:apbl}
.apb-legend li{counter-increment:apbl;display:grid;grid-template-columns:24px minmax(0,1fr);gap:3px 12px;align-items:start;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,currentColor 5%,transparent);transition:background .3s,box-shadow .3s}
.apb-legend li::before{content:counter(apbl);grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mt-brass);color:var(--mt-ink);font:600 11px/1 var(--mt-font-m),ui-monospace,monospace}
.apb-legend li b{font-size:15px;line-height:1.3;letter-spacing:-.01em}
.apb-legend li span{font-size:14px;line-height:1.5;color:var(--mt-mut)}
.apb-legend li.is-hot{box-shadow:inset 0 0 0 1.5px var(--mt-brass)}
.apb-legend .mt-soon{font-size:8.5px;padding:1px 6px;vertical-align:.1em}
.apb-legend.is-4{--cols:4}
@media (max-width:1099px){.apb-legend,.apb-legend.is-4{--cols:2}}
@media (max-width:640px){.apb-legend,.apb-legend.is-4{--cols:1}.apb-frame .apb-pin{display:none}.apb-frame .apb-legend li{grid-template-columns:minmax(0,1fr)}.apb-frame .apb-legend li::before{display:none}}

/* ---- an honest note ------------------------------------------------------------------------------------------ */
.apb-hc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,40px);border-radius:22px;background:var(--mt-ink);color:var(--mt-cloud);overflow:hidden}
.apb-hc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--mt-brass)}
.apb-hc-ic{grid-row:1/4;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--mt-brass) 14%,transparent);color:var(--mt-brass)}
.apb-hc-ic .ico{width:24px;height:24px}
.apb-hc h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;line-height:1.1}
.apb-hc p{margin:6px 0 0;max-width:820px;font-size:16.5px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent)}
.apb-hc p b{color:var(--mt-cloud)}
.apb-hc ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.apb-hc li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:9px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);font-size:13.5px;line-height:1.3}
.apb-hc li .mt-soon{margin-left:2px}
.apb-hc li i{width:7px;height:7px;flex:none;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}
.apb-hc li i.is-b{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.apb-hc a{color:var(--mt-cloud);text-decoration:underline;text-decoration-color:var(--mt-brass);text-underline-offset:3px}
@media (max-width:640px){.apb-hc{grid-template-columns:1fr}.apb-hc-ic{grid-row:auto}}

/* ---- two-column text rows (key, text) used for rules and details ------------------------------------------------ */
.apb-rows{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.apb-rows>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:18px 20px;border-radius:14px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog),0 3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.apb-rows dt{display:contents}
.apb-rows dt .ico,.apb-rows dt>span{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--mt-ink);color:var(--mt-brass);padding:11px}
.apb-rows dt b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:19px;letter-spacing:-.02em;line-height:1.25}
.apb-rows dt .mt-soon{font-size:8.5px;padding:1px 6px;vertical-align:.2em}
.apb-rows dd{margin:0;grid-column:2;font-size:15px;line-height:1.55;color:var(--mt-mut)}
.mt-dark .apb-rows>div{background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mt-dark .apb-rows dt .ico,.mt-dark .apb-rows dt>span{background:color-mix(in srgb,var(--mt-brass) 14%,transparent)}
@media (max-width:809px){.apb-rows{grid-template-columns:1fr}}

/* ---- the multi-phone car ------------------------------------------------------------------------------------ */
.apb-mp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,90px);align-items:center;margin-top:clamp(50px,6vw,80px)}
.apb-mp-fig{position:relative;margin:0;justify-self:center;width:min(100%,560px);padding:clamp(14px,2.4vw,34px) clamp(10px,2vw,28px);border-radius:26px;background:radial-gradient(120% 80% at 50% 45%,#16181e 0,var(--mt-night) 70%);box-shadow:0 50px 90px -40px color-mix(in srgb,var(--mt-ink) 55%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 6%,transparent)}
.apb-mp-fig svg{width:100%;height:auto;overflow:visible}
.apb-mp .apb-k{transition:opacity .6s ease}
.apb-mp .apb-cone{transform-box:fill-box;transition:opacity .7s ease,scale .9s cubic-bezier(.2,.8,.2,1)}
.apb-mp .apb-cone.is-up{transform-origin:50% 100%}.apb-mp .apb-cone.is-dn{transform-origin:50% 0}.apb-mp .apb-cone.is-rt{transform-origin:0 50%}.apb-mp .apb-cone.is-lt{transform-origin:100% 50%}
.apb-mp[data-n="1"] .apb-k2,.apb-mp[data-n="1"] .apb-k3,.apb-mp[data-n="1"] .apb-k4,.apb-mp[data-n="2"] .apb-k3,.apb-mp[data-n="2"] .apb-k4{opacity:.16}
.apb-mp[data-n="1"] .apb-cone.apb-k2,.apb-mp[data-n="1"] .apb-cone.apb-k3,.apb-mp[data-n="1"] .apb-cone.apb-k4,.apb-mp[data-n="2"] .apb-cone.apb-k3,.apb-mp[data-n="2"] .apb-cone.apb-k4{opacity:0;scale:.6}
.apb-ph-b{fill:#15171c;stroke:var(--mt-brass);stroke-width:2}
.apb-ph-n{font:700 15px/1 var(--mt-font-m),ui-monospace,monospace;fill:var(--mt-ink)}
.apb-mp-side{display:flex;flex-direction:column;gap:18px}
.apb-mp-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border-radius:14px;background:var(--mt-ink);width:max-content;max-width:100%}
.apb-mp-tabs[hidden]{display:none}
.apb-mp-tabs button{appearance:none;border:0;cursor:pointer;padding:10px 16px;border-radius:9px;background:transparent;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent);font:600 13px/1.2 var(--mt-font-b),system-ui,sans-serif;transition:background .25s,color .25s}
.apb-mp-tabs button:hover{color:var(--mt-cloud)}
.apb-mp-tabs button[aria-pressed="true"]{background:var(--mt-brass);color:var(--mt-ink)}
.apb-mp-tabs button b{font-family:var(--mt-font-m),ui-monospace,monospace;font-weight:600;margin-right:6px}
.apb-mp-panels{display:grid;gap:12px}
.apb-mp-panel{padding:20px 22px;border-radius:16px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog),0 3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.apb-mp-panel :is(h2,h3){display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 8px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.1}
.apb-mp-panel :is(h2,h3) span{font-family:var(--mt-font-b),system-ui,sans-serif;font-weight:500;font-size:16px;letter-spacing:0;color:var(--mt-mut)}
.apb-mp-panel p{margin:0;font-size:16px;line-height:1.6;color:var(--mt-mut)}
.apb-mp-panel ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.apb-mp-panel li{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;background:var(--mt-ink);color:var(--mt-bone);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;letter-spacing:.04em}
.apb-mp-panel li b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--mt-brass);color:var(--mt-ink);font-size:10px}
.apb-mp-panel .apb-mp-plan{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--mt-fog);font-size:14.5px;color:var(--mt-ink)}
.apb-mp-panel .apb-mp-plan .mt-soon{font-size:8.5px;padding:1px 6px}
.apb-mp.is-live .apb-mp-panel{display:none}
.apb-mp.is-live .apb-mp-panel.is-on{display:block;animation:apbIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes apbIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.apb-mp-key{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.apb-mp-key li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:2px 10px;align-items:start;font-size:14px;line-height:1.45;color:var(--mt-mut)}
.apb-mp-key li b{grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mt-ink);color:var(--mt-brass);font:600 11.5px/1 var(--mt-font-m),ui-monospace,monospace}
.apb-mp-key li strong{color:var(--mt-ink);font-weight:600}
@media (max-width:960px){.apb-mp{grid-template-columns:1fr}.apb-mp-fig{width:min(100%,440px)}}
@media (max-width:520px){.apb-mp-key{grid-template-columns:1fr}.apb-mp-tabs button{padding:9px 11px;font-size:12.5px}}

/* ---- Parked Guard: the night scene and example alerts ------------------------------------------------------------ */
.apb-pg{position:relative;margin-top:clamp(50px,6vw,80px);border-radius:24px;overflow:hidden;background:#07080b;color:var(--mt-cloud);box-shadow:0 50px 90px -40px color-mix(in srgb,var(--mt-ink) 55%,transparent);isolation:isolate}
.apb-pg-art{display:block;width:100%;height:auto}
.apb-pg-tags{position:absolute;left:clamp(14px,2vw,26px);top:clamp(14px,2vw,24px);z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--mt-cloud)}
.apb-pg-tags .mt-soon{margin:0;font-size:10px;padding:4px 10px}
.apb-pg-alerts{position:absolute;z-index:3;right:clamp(14px,2.4vw,34px);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:10px;width:min(40%,390px)}
.apb-ring{fill:none;stroke:var(--mt-brass);stroke-width:2;transform-box:fill-box;transform-origin:50% 50%;animation:apbRing 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.apb-ring:nth-of-type(2){animation-delay:1.2s}.apb-ring:nth-of-type(3){animation-delay:2.4s}
@keyframes apbRing{0%{opacity:.85;scale:.15}100%{opacity:0;scale:1}}
.apb-glow{animation:apbGlow 3.6s ease-in-out infinite}
@keyframes apbGlow{0%,100%{opacity:.55}50%{opacity:1}}
.apb-dash{stroke-dasharray:4 7;animation:apbDash 1.6s linear infinite}
@keyframes apbDash{to{stroke-dashoffset:-22}}
/* example notification cards */
.apb-nt{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:start;padding:12px 14px 13px 12px;border-radius:20px;background:rgba(38,40,46,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -16px rgba(0,0,0,.8);color:#fff;text-align:left}
.apb-nt-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--mt-brass);color:var(--mt-ink)}
.apb-nt-ic svg{width:24px;height:24px;fill:currentColor}
.apb-nt-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.apb-nt-h{display:flex;justify-content:space-between;gap:8px;white-space:nowrap;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.apb-nt-tx b{font-size:14.5px;line-height:1.3;letter-spacing:-.005em}
.apb-nt-tx>span:last-child{font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.78)}
.apb-nt.is-sum{background:rgba(24,26,31,.9)}
.apb-nt.is-sum .apb-nt-ic{background:#24272e;color:var(--mt-brass)}
.apb-nt.is-report .apb-nt-ic{background:#1b1d22}
.apb-nt.is-report .apb-nt-ic img{width:30px;height:auto}
.js .apb-pg[data-reveal]:not(.is-in) .apb-nt{opacity:0;translate:24px 0}
.apb-pg .apb-nt{transition:opacity .8s ease calc(.5s + var(--i,0) * .25s),translate 1s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i,0) * .25s)}
.apb-nt-h>span:first-child{overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.apb-pg-art{aspect-ratio:5/4}.apb-pg-alerts{position:relative;right:auto;top:auto;translate:none;width:auto;padding:0 16px 18px;margin-top:-4px}.apb-pg{padding-bottom:2px}}
@media (prefers-reduced-motion:reduce){.apb-ring,.apb-glow,.apb-dash{animation:none}.apb-ring{opacity:.35;scale:.6}.apb-ring:nth-of-type(2){scale:.8;opacity:.2}.apb-ring:nth-of-type(3){scale:1;opacity:.1}}

/* ---- the alert rules as gates ---------------------------------------------------------------------------------- */
.apb-gate{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:apbg;max-width:980px}
.apb-gate li{counter-increment:apbg;position:relative;display:grid;grid-template-columns:54px minmax(0,.9fr) minmax(0,1.3fr);gap:6px 22px;align-items:center;padding:18px 0}
.apb-gate li+li{border-top:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.apb-gate li::before{content:counter(apbg,decimal-leading-zero);display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);font:600 13px/1 var(--mt-font-m),ui-monospace,monospace;color:var(--mt-brass)}
.apb-gate-q{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(19px,1.7vw,24px);letter-spacing:-.025em;line-height:1.2}
.apb-gate-q small{display:block;margin-top:4px;font-family:var(--mt-font-b),system-ui,sans-serif;font-weight:400;font-size:14px;letter-spacing:0;color:var(--mt-mut)}
.apb-gate-a{display:flex;align-items:flex-start;gap:12px;min-width:0;font-size:15.5px;line-height:1.55;color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.apb-gate-a::before{content:"";flex:none;width:9px;height:9px;margin-top:.5em;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 35%,transparent)}
.apb-gate-a q{quotes:"\201C" "\201D";color:var(--mt-cloud)}
.apb-gate li.is-go::before{content:"";background:var(--mt-brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23141416' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 0 18px color-mix(in srgb,var(--mt-brass) 45%,transparent)}
.apb-gate li.is-go .apb-gate-a::before{background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.js .apb-gate[data-reveal]:not(.is-in) li{opacity:0;translate:-24px 0}
.apb-gate[data-reveal] li{transition:opacity .6s ease calc(var(--i,0) * .12s),translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .12s)}
@media (max-width:809px){.apb-gate li{grid-template-columns:44px minmax(0,1fr);gap:8px 14px}.apb-gate-a{grid-column:2}}

/* ---- reports ahead -------------------------------------------------------------------------------------------- */
.apb-ah{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.apb-ah-fig{margin:0;justify-self:center;width:min(100%,520px)}
.apb-ah-fig svg{display:block;width:100%;height:auto}
.apb-ah-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.apb-ah-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.apb-ah-list li>b:first-child{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);font:600 12px/1 var(--mt-font-m),ui-monospace,monospace;color:var(--mt-cloud)}
.apb-ah-list li.is-go>b:first-child{background:var(--mt-brass);color:var(--mt-ink)}
.apb-ah-list li strong{font-size:15.5px;line-height:1.3}
.apb-ah-list li span{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--mt-mut)}
.apb-ah-list li em{grid-row:1/3;grid-column:3;font-style:normal;padding:5px 10px;border-radius:99px;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);color:color-mix(in srgb,var(--mt-cloud) 60%,transparent)}
.apb-ah-list li.is-go em{background:var(--mt-brass);color:var(--mt-ink)}
.apb-ah .apb-nt{margin-top:16px;max-width:420px}
@media (max-width:900px){.apb-ah{grid-template-columns:1fr}.apb-ah-fig{width:min(100%,440px)}}
@media (max-width:420px){.apb-ah-list li{grid-template-columns:32px minmax(0,1fr)}.apb-ah-list li em{grid-row:auto;grid-column:2;justify-self:start;margin-top:6px}}

/* ---- a browser window around a portal screenshot --------------------------------------------------------------- */
.apb-web{margin:clamp(50px,6vw,80px) 0 0}
.apb-web .mtfd-win{margin-top:0}
.apb-web-shot{position:relative;display:block;background:#000}
.apb-web-shot img{display:block;width:100%;height:auto}
.apb-web .mtfd-bar span{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:7px;background:color-mix(in srgb,var(--mt-cloud) 7%,transparent);color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.apb-web .mtfd-bar span::before{content:"";width:9px;height:10px;border:1.6px solid currentColor;border-radius:2px;border-top-width:3.5px;opacity:.8}
.apb-web .mtfd-bar{height:40px}

/* ---- the Cloud plans ------------------------------------------------------------------------------------------ */
.apb-pl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.apb-pl-c{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,32px);border-radius:20px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.apb-pl-c.is-plus{background:color-mix(in srgb,var(--mt-brass) 7%,var(--mt-night));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-brass) 55%,transparent)}
.apb-pl-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.apb-pl-top h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em}
.apb-pl-top .mt-soon{margin:0}
.apb-pl-price{display:flex;align-items:baseline;gap:8px;margin:0}
.apb-pl-price b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(40px,4vw,58px);letter-spacing:-.05em;line-height:1}
.apb-pl-price span{font-family:var(--mt-font-m),ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:var(--mt-mut)}
.apb-pl-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.apb-pl-kpi div{padding:12px 12px 11px;border-radius:11px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent)}
.apb-pl-kpi dt{font-family:var(--mt-font-m),ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.apb-pl-kpi dd{margin:4px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:24px;letter-spacing:-.03em;line-height:1}
.apb-pl-c ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.apb-pl-c li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 84%,transparent)}
.apb-pl-c li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
@media (max-width:809px){.apb-pl{grid-template-columns:1fr}}

/* ---- the dco in a light section, when a phone pair needs a little more room ------------------------------------ */
.apb-pair .dco{--dw:clamp(250px,23vw,370px)}
.apb-pair .dco-dev{display:flex;justify-content:center;gap:clamp(24px,4vw,64px)}
@media (max-width:759px){.apb-pair .dco-dev{flex-direction:column;align-items:center;gap:44px}.apb-pair .dco{--dw:min(74vw,340px)}}

/* ---- pins inside the stamp band, the console's mark, the two-column status board, a row of phones ------------- */
.apb-band>span,.apb-b-mo>span{position:relative}
.apb-band .apb-pin,.apb-mark .apb-pin{left:50%;top:-17px;text-shadow:none;letter-spacing:0}
.apb-mark .apb-pin{top:-20px}
.apb-cl-vid .apb-mark{font-size:3.1cqi;bottom:11.4cqi}
.mtfd-stat.apb-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:809px){.mtfd-stat.apb-two{grid-template-columns:1fr}}
.apb-dvs .dvc.is-land{--dw:clamp(320px,50vw,760px)}
.dvs.apb-dvs .dvc.is-side{--dw:clamp(150px,16vw,260px)}
@media (max-width:809px){.apb-dvs .dvc.is-land{--dw:48vw}.dvs.apb-dvs .dvc.is-side{--dw:clamp(96px,20vw,170px)}}
@media (max-width:520px){.dvs.apb-dvs{flex-wrap:wrap;gap:26px 16px}.dvs.apb-dvs .dvc.is-land{order:-1;--dw:min(92vw,420px)}.dvs.apb-dvs .dvc.is-side,.dvs.apb-dvs .dvc.is-side:nth-of-type(n+3){display:block;--dw:min(40vw,170px)}}
.apb-band .apb-b-loc .apb-pin{left:auto;right:-32px;top:50%;margin-top:-12px}

/* ---- 30-intlist.css ---- */
/* 30 · Integration list (mtil), hardware page: the phones, drives, radios and services Dashivo runs on,
   filtered by category and search, each tile carrying an honest status (Tested / Supported / Planned). */
.mtil{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(70px,8vw,110px) 0 clamp(100px,11vw,150px)}
.mtil-sprite{position:absolute;width:0;height:0;overflow:hidden}
.mtil-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.mtil-cats{display:flex;flex-wrap:wrap;gap:8px}
.mtil-cats button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:10px;background:var(--mt-cloud);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500);font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--mt-ink) 12%,transparent),inset 0 0 0 1px var(--mt-fog);transition:translate .15s,box-shadow .15s,background .2s,color .2s}
.mtil-cats button em{font-style:normal;padding:2px 6px;border-radius:5px;background:var(--mt-bone);font-size:10.5px;transition:background .2s,color .2s}
.mtil-cats button:hover{background:color-mix(in srgb,var(--mt-cloud) 70%,var(--mt-bone))}
.mtil-cats button:active{translate:0 2px;box-shadow:0 1px 0 var(--mt-ink)}
.mtil-cats button.is-on{background:var(--mt-ink);color:var(--mt-cloud);box-shadow:0 3px 0 #000}
.mtil-cats button.is-on em{background:var(--mt-brass);color:var(--mt-ink)}
.mtil-q{display:flex;align-items:center;gap:10px;min-width:280px;padding:0 14px;height:46px;border-radius:10px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog);transition:box-shadow .2s}
.mtil-q:focus-within{box-shadow:inset 0 0 0 2px var(--mt-ink)}
.mtil-q svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--mt-mut);stroke-width:2;stroke-linecap:round}
.mtil-q input{flex:1;min-width:0;border:0;background:none;font-family:var(--mt-font-b),system-ui,sans-serif;font-size:15px;color:var(--mt-ink);outline:none}
.mtil-q input::placeholder{color:var(--mt-mut);opacity:1}

/* status key: what Tested / Supported / Planned mean */
.mtil-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 30px;padding:0;list-style:none;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;line-height:1.45;letter-spacing:.06em;color:var(--mt-mut)}
.mtil-key li{display:flex;align-items:center;gap:8px}
.mtil-key b{font-weight:600;color:var(--mt-ink);text-transform:uppercase;letter-spacing:.1em}

.mtil-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.mtil-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:16px;background:var(--mt-cloud);color:var(--mt-ink);box-shadow:inset 0 0 0 1px var(--mt-fog);animation:mtilDeal .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*40ms);transition:translate .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;--bc:var(--mt-ink);--bt:var(--mt-brass)}
@keyframes mtilDeal{from{opacity:0;scale:.86;translate:0 24px}}
.js .mtil:not(.is-on) .mtil-tile{animation-play-state:paused}
/* without scripts every tile shows and the filter bar (which needs them) is left out */
html:not(.js) .mtil-bar{display:none}
.mtil-tile[hidden],.mtil-empty[hidden]{display:none}
.mtil-tile:hover{translate:0 -4px;box-shadow:inset 0 0 0 2px var(--mt-brass),0 24px 40px -24px color-mix(in srgb,var(--mt-ink) 45%,transparent)}
.mtil-tile.is-planned{--bc:var(--mt-bone);--bt:var(--mt-ink)}
.mtil-mk{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:13px;background:var(--bc);color:var(--bt);box-shadow:0 3px 0 color-mix(in srgb,var(--mt-ink) 10%,transparent)}
.mtil-mk svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mtil-tile.is-planned .mtil-mk{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mt-ink) 22%,transparent)}
.mtil-cat{margin-top:8px;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtil-tile b{font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.03em}
.mtil-tile p{margin:0;font-size:14px;line-height:1.5;color:var(--mt-mut)}
.mtil-sy{margin-top:auto;padding-top:12px;border-top:1px dashed var(--mt-fog);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;line-height:1.45;color:var(--mt-mut)}

/* the status chip sits where the original's arrow button was */
.mtil-st{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:8px;background:var(--mt-bone);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-ink);transition:background .3s}
.mtil-st i,.mtil-key i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mt-stone)}
.mtil-st.is-tested i,.mtil-key .is-tested i{background:#22c55e;box-shadow:0 0 6px color-mix(in srgb,#22c55e 70%,transparent)}
.mtil-st.is-supported i,.mtil-key .is-supported i{background:var(--mt-brass);box-shadow:0 0 6px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.mtil-st.is-planned i,.mtil-key .is-planned i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mt-stone)}
.mtil-tile:hover .mtil-st{background:color-mix(in srgb,var(--mt-brass) 30%,var(--mt-bone))}

.mtil-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:34px;border-radius:18px;background:var(--mt-cloud)}
.mtil-empty b{font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.03em}
.mtil-empty p{margin:0 0 6px;max-width:560px;color:var(--mt-mut)}
.mtil-note{margin:28px 0 0;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}

@media (max-width:1100px){.mtil-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:809.98px){
  .mtil-bar{flex-direction:column;align-items:stretch}
  .mtil-q{min-width:0;width:100%}
  .mtil-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mtil-tile{padding:16px}
  .mtil-tile b{font-size:19px}
  .mtil-sy{display:none}
}
/* phones: one column, mark on the left, so fifteen tiles stay a short scroll */
@media (max-width:559.98px){
  .mtil-cats{gap:6px}
  .mtil-cats button{padding:9px 11px;font-size:11px}
  .mtil-key{flex-direction:column;gap:6px;margin-bottom:22px}
  .mtil-grid{grid-template-columns:1fr}
  .mtil-tile{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;padding:14px 14px 16px}
  .mtil-mk{grid-row:1/span 3;width:44px;height:44px;border-radius:11px}
  .mtil-mk svg{width:22px;height:22px}
  .mtil-cat{margin-top:2px;padding-right:96px}
  .mtil-tile b{font-size:18px}
  .mtil-tile p{font-size:13.5px}
  .mtil-st{right:12px;top:12px}
  .mtil-empty{padding:24px}
}
@media (prefers-reduced-motion:reduce){.mtil-tile{animation:none}}
/* phones page: tier legend, Limited support (orange), Not compatible, and the "Tested by us" badge */
.mtil-st.is-limited i,.mtil-tiers .is-limited i{background:#ff7a1a;box-shadow:0 0 6px color-mix(in srgb,#ff7a1a 70%,transparent)}
.mtil-tile.is-limited{--bc:var(--mt-cloud);--bt:var(--mt-ink)}
.mtil-tile.is-none{--bc:var(--mt-bone);--bt:var(--mt-mut);opacity:.82}
.mtil-st.is-none i{background:transparent;box-shadow:inset 0 0 0 1.5px #ef4444}
.mtil-us{display:inline-flex;margin-left:8px;padding:2px 7px;border-radius:99px;background:var(--mt-ink);color:var(--mt-brass);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:9.5px;font-style:normal;letter-spacing:.1em;text-transform:uppercase;vertical-align:.2em;white-space:nowrap}
.mtil-tiers{list-style:none;margin:0 0 clamp(26px,3vw,40px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mtil-tiers li{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;background:var(--mt-cloud);color:var(--mt-ink);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.mtil-tiers i{width:10px;height:10px;border-radius:50%}
.mtil-tiers .is-tested i{background:#22c55e;box-shadow:0 0 6px color-mix(in srgb,#22c55e 70%,transparent)}
.mtil-tiers .is-supported i{background:var(--mt-brass);box-shadow:0 0 6px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.mtil-tiers .is-planned i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mt-stone)}
.mtil-tiers b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em}
.mtil-tiers span{font-size:14px;line-height:1.5;color:var(--mt-mut)}
.mtil-tiers a{color:var(--mt-ink)}
@media (max-width:999px){.mtil-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mtil-tiers{grid-template-columns:1fr}}

/* ---- 31-scenlist.css ---- */
/* 31 · Example scenarios. The list (mtcl, ported from the customer list: kind filters, a lead report with a
   seven-segment metric, report cards) and the walk-through pages (mtcs, ported from the customer story:
   breadcrumb, report strip, big metric, sticky facts, body sections, plus a step-by-step timeline).
   Photos are replaced by illustrated footage frames: .mtcl-fr = inline SVG + a Geist Mono HUD. */

/* ---- footage frame and HUD (list and walk-through) ---- */
.mtcl-fr{position:absolute;inset:0;overflow:hidden;background:#0c0e13}
.mtcl-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;transition:scale 1.4s cubic-bezier(.2,.8,.2,1)}
.mtcl-hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:clamp(10px,1.3vw,16px);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:clamp(9.5px,.78vw,11px);line-height:1.45;letter-spacing:.06em;text-transform:uppercase;color:#fff;pointer-events:none}
.mtcl-hud>span{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mtcl-hud>span:last-child{align-items:flex-end}
.mtcl-hud>span>span:last-child{flex:none;text-align:right}
.mtcl-rec,.mtcl-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border-radius:5px;font-weight:700;letter-spacing:.08em;text-shadow:none}
.mtcl-rec{background:rgba(239,68,68,.94);color:#fff}
.mtcl-rec i{width:7px;height:7px;flex:none;border-radius:50%;background:#fff;animation:mtclRec 1.2s steps(2,end) infinite}
@keyframes mtclRec{50%{opacity:.25}}
.mtcl-tag{margin-left:6px;background:var(--mt-brass);color:var(--mt-ink)}
.mtcl-tag.is-red{background:#ef4444;color:#fff}

/* seven-segment metrics light up digit by digit once their section is on */
.mtcl-met .mt-seg-d path,.mtcs-met .mt-seg-d path{transition:fill .35s ease var(--sd,.45s)}
.mtcl-met .mt-seg>:nth-child(2) path,.mtcs-met .mt-seg>:nth-child(2) path{--sd:.6s}
.mtcl-met .mt-seg>:nth-child(3) path,.mtcs-met .mt-seg>:nth-child(3) path{--sd:.75s}
.mtcl-met .mt-seg>:nth-child(4) path,.mtcs-met .mt-seg>:nth-child(4) path{--sd:.9s}
.js .mtcl:not(.is-on) .mtcl-met .mt-seg-d path.on,.js .mtcs:not(.is-on) .mtcs-met .mt-seg-d path.on{fill:color-mix(in srgb,currentColor 10%,transparent)}

/* ---- list (mtcl) ---- */
.mtcl{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(70px,8vw,110px) 0 clamp(100px,11vw,150px)}
.mtcl-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.mtcl-f button{padding:10px 14px;border:0;border-radius:10px;background:var(--mt-cloud);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500);font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--mt-ink) 12%,transparent),inset 0 0 0 1px var(--mt-fog);transition:translate .15s,box-shadow .15s,background .2s,color .2s}
.mtcl-f button:hover{background:color-mix(in srgb,var(--mt-cloud) 70%,var(--mt-bone))}
.mtcl-f button:active{translate:0 2px;box-shadow:0 1px 0 var(--mt-ink)}
.mtcl-f button.is-on{background:var(--mt-ink);color:var(--mt-cloud);box-shadow:0 3px 0 #000}
html:not(.js) .mtcl-f{display:none}

.mtcl-lead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:24px;overflow:hidden;background:var(--mt-night);color:var(--mt-cloud);text-decoration:none;box-shadow:0 50px 90px -40px color-mix(in srgb,var(--mt-ink) 60%,transparent);animation:mtclIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes mtclIn{from{opacity:0;translate:0 30px}}
.mtcl-lph{position:relative;min-height:460px;overflow:hidden;clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) .2s}
.js .mtcl:not(.is-on) .mtcl-lph{clip-path:inset(0 100% 0 0)}
.mtcl-lead:hover .mtcl-art,.mtcl-card:hover .mtcl-art{scale:1.05}
.mtcl-ltx{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,44px)}
.mtcl-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;padding-bottom:12px;border-bottom:1px dashed color-mix(in srgb,currentColor 20%,transparent);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtcl-top span:first-child{color:var(--mt-acc)}
.mtcl-lh{margin:8px 0 0;font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:clamp(34px,3.4vw,54px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.mtcl-met{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.mtcl-met .mt-seg{--s:70px;color:var(--mt-brass)}
.mtcl-met>span:last-child{padding-bottom:6px;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mtcl-ltx .mtcl-q{margin:0;font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:600;font-size:clamp(19px,1.6vw,24px);line-height:1.4;letter-spacing:-.02em}
.mtcl-who{margin:0;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:12px;color:var(--mt-mut)}
.mtcl-who b{color:inherit;font-weight:600}
.mtcl-lead .mtcl-who b{color:var(--mt-cloud)}
.mtcl-rd{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 14px;border-radius:9px;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:gap .3s cubic-bezier(.34,1.56,.64,1)}
.mtcl-lead:hover .mtcl-rd{gap:12px}

.mtcl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px;align-items:start}
.mtcl-grid[hidden]{display:none}
.mtcl-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;background:var(--mt-cloud);color:var(--mt-ink);text-decoration:none;box-shadow:0 20px 40px -26px color-mix(in srgb,var(--mt-ink) 40%,transparent);animation:mtclIn .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--i,0)*.1s);transition:translate .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.mtcl-card:nth-child(even){margin-top:50px}
.mtcl-card:hover{translate:0 -6px;box-shadow:inset 0 0 0 2px var(--mt-brass),0 30px 50px -26px color-mix(in srgb,var(--mt-ink) 50%,transparent)}
.js .mtcl:not(.is-on) .mtcl-lead,.js .mtcl:not(.is-on) .mtcl-card{animation-play-state:paused}
.mtcl-ph{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/4.2}
.mtcl-card h3{margin:4px 0 0;font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.03em}
.mtcl-m{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.mtcl-m b{font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.05em}
.mtcl-m span{font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mtcl-card .mtcl-q{margin:0;font-size:14.5px;line-height:1.5}
.mtcl-note{margin:48px 0 0;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mtcl-f button:focus-visible,.mtcl-lead:focus-visible,.mtcl-card:focus-visible,.mtcs-next:focus-visible{outline:3px solid var(--mt-ink);outline-offset:3px}

@media (max-width:1099.98px){.mtcl-card:nth-child(even){margin-top:30px} .mtcl-card h3{font-size:20px} .mtcl-m b{font-size:28px}}
@media (max-width:809.98px){
  .mtcl-lead{grid-template-columns:1fr}
  .mtcl-lph{min-height:300px}
  .mtcl-met .mt-seg{--s:44px}
  .mtcl-grid{grid-template-columns:1fr}
  .mtcl-card:nth-child(even){margin-top:0}
  .mtcl-ph{aspect-ratio:16/11}
}

/* ---- walk-through (mtcs) ---- */
.mtcs{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(140px,14vw,180px) 0 clamp(90px,10vw,140px)}
.mtcs-cr{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500);font-size:12.5px;color:var(--mt-mut)}
.mtcs-cr>span{color:var(--mt-acc)}
.mtcs-cr a{color:inherit;text-decoration:none}
.mtcs-cr a:hover{color:var(--mt-ink)}
.mtcs-cr b{font-weight:500;color:var(--mt-ink)}
.mtcs-cr i{font-style:normal}
.mtcs-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:12px 0;border-top:2px solid var(--mt-ink);border-bottom:1px dashed var(--mt-fog);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mtcs-strip span:first-child{color:var(--mt-ink)}
.mtcs-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:end;margin-top:clamp(40px,5vw,70px)}
.mtcs h1{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw,800);font-size:clamp(44px,6.2vw,108px);line-height:.92;letter-spacing:-.055em;text-wrap:balance;transition:opacity .8s,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtcs:not(.is-on) h1{opacity:0;translate:0 30px}
.mtcs-met{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 14px;margin-top:30px}
.mtcs-met .mt-seg{--s:110px;color:var(--mt-ink)}
.mtcs-met>span:last-child{padding-bottom:10px;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mtcs-lede{margin:24px 0 0;max-width:560px;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--mt-mut)}
.mtcs-ph{position:relative;aspect-ratio:4/4.4;border-radius:18px;overflow:hidden;clip-path:polygon(0 0,200% 0,0 200%);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) .3s}
.js .mtcs:not(.is-on) .mtcs-ph{clip-path:polygon(0 0,0 0,0 0)}
.mtcs-ph>p{position:absolute;z-index:1;left:14px;bottom:14px;display:flex;flex-direction:column;margin:0;padding:10px 12px;border-radius:10px;background:var(--mt-cloud);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;color:var(--mt-mut)}
.mtcs-ph>p b{font-family:var(--mt-font-b),system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--mt-ink)}
.mtcs-ph .mtcl-hud{padding-bottom:84px}

.mtcs-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,5vw,90px);margin-top:clamp(60px,7vw,100px);align-items:start}
.mtcs-main{min-width:0;max-width:700px}
.mtcs .mt-md{font-size:18px;line-height:1.7;color:color-mix(in srgb,var(--mt-ink) 86%,transparent)}
.mtcs .mt-md h2{margin:1.8em 0 .5em;font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.035em;color:var(--mt-ink)}
.mtcs .mt-md h2:first-child{margin-top:0}
.mtcs .mt-md p{margin:0 0 1em}
.mtcs .mt-md ul{list-style:none;margin:0 0 1.2em;padding:0;display:flex;flex-direction:column;gap:10px}
.mtcs .mt-md li{position:relative;padding-left:24px}
.mtcs .mt-md li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--mt-brass);box-shadow:0 0 6px color-mix(in srgb,var(--mt-brass) 60%,transparent)}
.mtcs .mtcs-call{position:relative;margin:1.2em 0 1.4em;padding:22px 26px;border-radius:16px;background:var(--mt-ink);color:var(--mt-cloud);font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:600;font-size:clamp(20px,1.8vw,26px);line-height:1.35;letter-spacing:-.02em}
.mtcs .mtcs-call::before{content:"";position:absolute;left:26px;top:-6px;width:40px;height:12px;border-radius:3px;background:var(--mt-brass)}

/* timeline: a dot per step, and the rail to the next step fills in brass as each step arrives */
.mtcs-tl{margin:6px 0 1.6em;padding:0;list-style:none}
.mtcs-st{position:relative;display:grid;grid-template-columns:144px minmax(0,1fr);gap:6px 20px;padding:0 0 30px 38px}
.mtcs-st:last-child{padding-bottom:6px}
.mtcs-st::before{content:"";position:absolute;left:3px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--mt-bone);box-shadow:inset 0 0 0 2px var(--mt-fog);transition:background .4s,box-shadow .4s}
.mtcs-st.is-in::before,html:not(.js) .mtcs-st::before{background:var(--mt-brass);box-shadow:inset 0 0 0 2px var(--mt-brass),0 0 10px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.mtcs-st:not(:last-child)::after{content:"";position:absolute;left:9px;top:25px;bottom:3px;width:2px;border-radius:2px;background:linear-gradient(var(--mt-brass),var(--mt-brass)) 0 0/100% var(--f,100%) no-repeat,var(--mt-fog);transition:background-size 1.1s cubic-bezier(.2,.8,.2,1) .25s}
.js .mtcs-st:not(.is-in)::after{--f:0%}
.mtcs-t{align-self:start;justify-self:start;margin-top:1px;padding:5px 9px;border-radius:7px;background:var(--mt-ink);color:var(--mt-bone);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mtcs-st h3{margin:0 0 4px;font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.025em}
.mtcs-st p{margin:0;font-size:16.5px;line-height:1.6;color:color-mix(in srgb,var(--mt-ink) 80%,transparent)}
.mtcs-st>*{transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.js .mtcs-st:not(.is-in)>*{opacity:0;translate:0 18px}

.mtcs-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:20px;background:var(--mt-pine);color:var(--mt-cloud)}
.mtcs-side>p{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mtcs-side>p i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtcs-side dl{display:flex;flex-direction:column;margin:0}
.mtcs-side dl div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtcs-side dt{flex:none;padding-top:2px;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtcs-side dd{margin:0;font-size:14px;line-height:1.4;text-align:right}
.mtcs-side .mt-btn{align-self:flex-start;margin-top:6px}

.mtcs-next{display:flex;align-items:center;gap:20px;margin-top:clamp(70px,8vw,110px);padding:26px 28px;border-radius:18px;background:var(--mt-ink);color:var(--mt-cloud);text-decoration:none;transition:background .3s}
.mtcs-next:hover{background:var(--mt-pine)}
.mtcs-next span{flex:none;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-brass)}
.mtcs-next b{margin-right:auto;font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2vw,30px);line-height:1.2;letter-spacing:-.03em}
.mtcs-next svg{flex:none;transition:translate .4s cubic-bezier(.34,1.56,.64,1)}
.mtcs-next:hover svg{translate:4px 0}

@media (max-width:1099.98px){
  .mtcs-body{grid-template-columns:minmax(0,1fr) 300px}
  .mtcs-st{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:809.98px){
  .mtcs-head,.mtcs-body{grid-template-columns:1fr}
  .mtcs-met .mt-seg{--s:56px}
  .mtcs-met>span:last-child{padding-bottom:4px;font-size:11.5px}
  .mtcs-ph{aspect-ratio:4/3.6}
  .mtcs-side{position:relative;top:auto}
  .mtcs-next{flex-wrap:wrap;gap:10px 20px;padding:22px}
  .mtcs .mt-md{font-size:17px}
}
@media (max-width:559.98px){
  .mtcs-strip span:last-child{display:none}
  .mtcs-st{padding-left:34px}
  .mtcs-st h3{font-size:19px}
  .mtcs-st p{font-size:16px}
  .mtcs .mtcs-call{padding:20px}
  .mtcs-side dl div{flex-direction:column;gap:2px}
  .mtcs-side dd{text-align:left}
}
@media (prefers-reduced-motion:reduce){.mtcl-lead,.mtcl-card{animation:none} .mtcl-rec i{animation:none}}

/* ---- 32-scenall.css ---- */
/* 32 · Every scenario (mtsx): category filters over two groups of cards (Situations, Setups). Each card: icon, status
   tag, title, a short story, the features that help (soon ones dimmed) and an optional link. */
.mtsx{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(80px,9vw,130px) 0}
.mtsx-head{display:grid;justify-items:start;gap:18px;max-width:820px}
.mtsx-head .mt-eb{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
html:not(.js) .mtsx .mt-eb{opacity:1;translate:none}
.mtsx-sub{margin:0;font-size:18px;line-height:1.6;color:var(--mt-mut)}
.mtsx-f{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(30px,4vw,48px) 0 18px}
.mtsx-f button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:10px;background:var(--mt-cloud);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--mt-ink) 12%,transparent);transition:translate .2s,background .25s,color .25s}
.mtsx-f button:hover{translate:0 -1px}
.mtsx-f button em{font-style:normal;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.mtsx-f button.is-on{background:var(--mt-ink);color:var(--mt-brass)}
.mtsx-f button.is-on em{background:var(--mt-brass);color:var(--mt-ink)}
.mtsx-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 clamp(26px,3vw,40px);padding:0;list-style:none;font-size:13px;color:var(--mt-mut)}
.mtsx-key li{display:flex;align-items:center;gap:10px}
.mtsx-grp+.mtsx-grp{margin-top:clamp(40px,5vw,70px)}
.mtsx-grp[hidden]{display:none}
.mtsx-g{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em}
.mtsx-g span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--mt-ink);color:var(--mt-brass);font-size:18px;letter-spacing:0}
.mtsx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mtsx-c{display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;border-radius:18px;background:var(--mt-cloud);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent);transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.js .mtsx-c[data-reveal]:not(.is-in){opacity:0;translate:0 24px}
.mtsx-c[hidden]{display:none}
.mtsx-c:hover{box-shadow:inset 0 0 0 2px var(--mt-brass),0 18px 36px -24px rgba(0,0,0,.35)}
.mtsx-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mtsx-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--mt-ink);color:var(--mt-brass)}
.mtsx-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtsx-st{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:99px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mtsx-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mtsx-st.is-ok{background:color-mix(in srgb,#22c55e 15%,transparent);color:#15803d}
.mtsx-st.is-soon{background:var(--mt-brass);color:var(--mt-ink)}
.mtsx-c h3{margin:4px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.025em;line-height:1.15}
.mtsx-c>p{margin:0;font-size:15px;line-height:1.55;color:var(--mt-mut)}
.mtsx-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto!important;padding-top:6px}
.mtsx-h b{margin-right:4px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-ink)}
.mtsx-h span{padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--mt-ink) 7%,transparent);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;white-space:nowrap}
.mtsx-h span.is-soon{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 22%,transparent);color:var(--mt-mut)}
.mtsx-h em{font-style:normal;color:var(--mt-acc)}
.mtsx-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:2px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-ink);text-decoration:none;border-bottom:2px solid var(--mt-brass);padding-bottom:2px}
.mtsx-go:hover{color:var(--mt-acc)}
.mtsx-note{margin:clamp(30px,4vw,50px) 0 0;max-width:860px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:12px;line-height:1.7;letter-spacing:.02em;color:var(--mt-mut)}
@media (max-width:1099px){.mtsx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mtsx-grid{grid-template-columns:1fr} .mtsx-f button{padding:9px 11px;font-size:11px}}
@media (prefers-reduced-motion:reduce){.js .mtsx-c[data-reveal]:not(.is-in){opacity:1;translate:none}}

/* ---- 33-phones.css ---- */
/* 33 · Which phones work (mtpc), phones page: a level index, brand filters and search, a chip legend, then one
   grid of phone cards per support level (Recommended, Supported, Limited support, Not yet tested, Not compatible).
   Each card: an illustrated render on a soft studio backdrop, the model name, its release year, and chips: top
   resolution, expected heat (Cool teal, Warm amber, Hot red, always with the word; a family shows a range on a blend
   of two tints), Night and Front+rear. Heat and resolution filters sit under the brand buttons.
   The renders are <use>s of the symbols in the section's own sprite; a card's <svg> sets --pb (back) and --pf
   (frame), and --ps (the shaded side of the frame) is worked out here. */
.mtpc{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(8px,1.5vw,24px) 0 clamp(100px,11vw,150px)}
.mtpc-sp{position:absolute;width:0;height:0;overflow:hidden}

/* level index: jump links with live counts */
.mtpc-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.mtpc-nav a{display:inline-flex;align-items:center;gap:9px;padding:9px 10px 9px 13px;border-radius:999px;background:var(--mt-cloud);color:var(--mt-ink);text-decoration:none;font-weight:600;font-size:14px;line-height:1.2;box-shadow:inset 0 0 0 1px var(--mt-fog);transition:box-shadow .2s,background .2s}
.mtpc-nav a:hover{box-shadow:inset 0 0 0 2px var(--mt-ink)}
.mtpc-nav a[hidden]{display:none}
.mtpc-nav em{font-style:normal;padding:2px 7px;border-radius:99px;background:var(--mt-bone);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:500}
.mtpc-nav i,.mtpc-th h3 i,.mtpc-lead-t i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--dot);box-shadow:var(--glow)}
.mtpc .is-rec{--dot:#22c55e;--glow:0 0 6px color-mix(in srgb,#22c55e 70%,transparent)}
.mtpc .is-sup{--dot:var(--mt-brass);--glow:0 0 0 1px color-mix(in srgb,var(--mt-ink) 22%,transparent),0 0 6px color-mix(in srgb,var(--mt-brass) 70%,transparent)}
.mtpc .is-lim{--dot:#ff7a1a;--glow:0 0 6px color-mix(in srgb,#ff7a1a 70%,transparent)}
.mtpc .is-unt{--dot:transparent;--glow:inset 0 0 0 1.5px var(--mt-stone)}
.mtpc .is-no{--dot:transparent;--glow:inset 0 0 0 1.5px #ef4444}

/* brand buttons and search (same look as the Hub list) */
.mtpc-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:16px}
.mtpc-cats{display:flex;flex-wrap:wrap;gap:8px}
.mtpc-cats button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:10px;background:var(--mt-cloud);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500);font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--mt-ink) 12%,transparent),inset 0 0 0 1px var(--mt-fog);transition:translate .15s,box-shadow .15s,background .2s,color .2s}
.mtpc-cats button em{font-style:normal;padding:2px 6px;border-radius:5px;background:var(--mt-bone);font-size:10.5px;transition:background .2s,color .2s}
.mtpc-cats button:hover{background:color-mix(in srgb,var(--mt-cloud) 70%,var(--mt-bone))}
.mtpc-cats button:active{translate:0 2px;box-shadow:0 1px 0 var(--mt-ink)}
.mtpc-cats button.is-on{background:var(--mt-ink);color:var(--mt-cloud);box-shadow:0 3px 0 #000}
.mtpc-cats button.is-on em{background:var(--mt-brass);color:var(--mt-ink)}
.mtpc-q{display:flex;align-items:center;gap:10px;min-width:330px;padding:0 14px;height:46px;border-radius:10px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog);transition:box-shadow .2s}
.mtpc-q:focus-within{box-shadow:inset 0 0 0 2px var(--mt-ink)}
.mtpc-q svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--mt-mut);stroke-width:2;stroke-linecap:round}
.mtpc-q input{flex:1;min-width:0;border:0;background:none;font-family:var(--mt-font-b),system-ui,sans-serif;font-size:16px;color:var(--mt-ink);outline:none}
.mtpc-q input::placeholder{color:var(--mt-mut);opacity:1}
html:not(.js) .mtpc-bar{display:none}

/* expected heat and resolution filters: two small button groups under the brands */
.mtpc-fl{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:10px}
.mtpc-fg{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:12px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtpc-fgl{padding:0 6px 0 10px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut);white-space:nowrap}
.mtpc-fg button{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:0;border-radius:8px;background:none;color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw,500);font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.mtpc-fg button.is-rv{text-transform:none}
.mtpc-fg button:hover{background:var(--mt-bone)}
.mtpc-fg button.is-on{background:var(--mt-ink);color:var(--mt-cloud)}
.mtpc-fg button em{font-style:normal;padding:2px 6px;border-radius:5px;background:var(--mt-bone);font-size:10.5px;transition:background .2s,color .2s}
.mtpc-fg button.is-on em{background:var(--mt-brass);color:var(--mt-ink)}
.mtpc-fg button[class*="h-"]::before{content:"";flex:none;width:12px;height:12px;background:var(--hf);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mtpc-fg button.is-on[class*="h-"]::before{background:var(--hl)}
@media (pointer:coarse){.mtpc-fg button{min-height:44px}}

/* chips, and the legend that says what each one means */
.mtpc-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0}
.mtpc-key>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:14px 16px 15px;border-radius:14px;background:color-mix(in srgb,var(--mt-cloud) 50%,transparent);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtpc-key dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--mt-mut)}
.mtpc-key>.mtpc-kh{grid-column:1/-1}
.mtpc-kh dd{display:flex;flex-direction:column;gap:12px}
.mtpc-kh dd p{margin:0;max-width:900px}
.mtpc-tip a{color:var(--mt-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--mt-brass) 55%,var(--mt-ink));text-underline-offset:3px}
.mtpc-tip a:hover{text-decoration-color:var(--mt-ink)}
.mtpc-hl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px;margin:0;padding:0;list-style:none}
.mtpc-hl li{display:flex;flex-direction:column;align-items:flex-start;gap:7px;color:var(--mt-ink)}
.mtpc-hc{font-size:11px;padding:5px 9px 5px 7px}
.mtpc-ch{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.mtpc-ch li,.mtpc-key dt,.mtpc-hc{display:inline-flex;align-items:center;gap:5px;padding:4px 7px 4px 6px;border-radius:6px;background:var(--mt-bone);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:10.5px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mtpc-key dt{background:var(--mt-ink);color:var(--mt-cloud);font-size:11px;padding:5px 9px 5px 7px}
.mtpc-ch li::before,.mtpc-key dt::before,.mtpc-hc::before,.mtpc-us::before{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mtpc-key dt::before{color:var(--mt-brass);background:var(--mt-brass)}
.mtpc .is-n{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 10.1A5.6 5.6 0 1 1 7.4 2.6a4.5 4.5 0 0 0 5.8 7.5z'/%3E%3C/svg%3E")}
.mtpc .is-res{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6V4.5a1 1 0 0 1 1-1H5M11 3.5h1.5a1 1 0 0 1 1 1V6M13.5 10v1.5a1 1 0 0 1-1 1H11M5 12.5H3.5a1 1 0 0 1-1-1V10'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E")}
.mtpc .is-f{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.2' cy='8' r='2.9'/%3E%3Ccircle cx='10.8' cy='8' r='2.9'/%3E%3C/svg%3E")}
.mtpc .is-heat,.mtpc .mtpc-hc,.mtpc-fg button[class*="h-"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.2a1.7 1.7 0 0 1 1.7 1.7v5.2a3.1 3.1 0 1 1-3.4 0V3.9A1.7 1.7 0 0 1 8 2.2z'/%3E%3Cpath d='M8 6.4v4.4'/%3E%3C/svg%3E")}
/* heat colours: --hb the chip's tint, --hf its text and icon (all 5.5:1 or more on the tint, 7:1 on white), --hl the
   icon on a pressed (ink) filter button; a family's range blends two or three tints and keeps ink text */
.mtpc .h-cool{--hb:#d7efe9;--hf:#0d5c54;--hl:#5eead4}
.mtpc .h-warm{--hb:#fbe7c6;--hf:#854200;--hl:#fbbf24}
.mtpc .h-hot{--hb:#fbdad7;--hf:#a8201a;--hl:#fca5a5}
.mtpc .h-cool-warm{--hb:linear-gradient(90deg,#d7efe9,#fbe7c6);--hf:var(--mt-ink);--hi:linear-gradient(180deg,#854200,#0d5c54)}
.mtpc .h-warm-hot{--hb:linear-gradient(90deg,#fbe7c6,#fbdad7);--hf:var(--mt-ink);--hi:linear-gradient(180deg,#a8201a,#854200)}
.mtpc .h-cool-hot{--hb:linear-gradient(90deg,#d7efe9,#fbe7c6,#fbdad7);--hf:var(--mt-ink);--hi:linear-gradient(180deg,#a8201a,#854200,#0d5c54)}
.mtpc-ch li.is-heat,.mtpc-hc{background:var(--hb);color:var(--hf)}
.mtpc-ch li.is-heat::before,.mtpc-hc::before{background:var(--hi,currentColor)}
.mtpc-ch li.is-res{text-transform:none;letter-spacing:.04em}

/* a support level: a rule, the name with its dot, what it means, and how many phones it holds */
.mtpc-tier{margin-top:clamp(48px,5.5vw,80px)}
.mtpc-tier[hidden]{display:none}
.mtpc-th{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;row-gap:10px;align-items:end;margin:0 0 20px;padding-top:22px;border-top:2px solid var(--mt-ink)}
.mtpc-th h3{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:clamp(32px,3.3vw,50px);line-height:1;letter-spacing:-.04em}
.mtpc-th h3 i{width:14px;height:14px}
.mtpc-td{grid-column:1;margin:0;max-width:660px;font-size:15.5px;line-height:1.55;color:var(--mt-mut)}
.mtpc-td a{color:var(--mt-ink)}
.mtpc-tc{grid-column:2;grid-row:1/span 2;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtpc-tc b{font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:800;font-size:clamp(38px,3.6vw,56px);line-height:.9;letter-spacing:-.05em;color:var(--mt-ink)}

/* the grid: five across on desktop, four on a laptop, three on a tablet, two on a phone */
.mtpc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.mtpc-card,.mtpc-lead{--d:0ms;position:relative;border-radius:18px;transition:opacity .55s cubic-bezier(.2,.8,.2,1) var(--d),translate .75s cubic-bezier(.2,.8,.2,1) var(--d),scale .75s cubic-bezier(.2,.8,.2,1) var(--d),transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.mtpc.is-live .mtpc-card:not(.is-in),.mtpc.is-live .mtpc-lead:not(.is-in){opacity:0;translate:0 26px;scale:.94}
.mtpc-card[hidden],.mtpc-lead[hidden],.mtpc-empty[hidden],.mtpc-hit[hidden]{display:none}

/* phone card */
.mtpc-card{display:flex;flex-direction:column;background:var(--mt-cloud);color:var(--mt-ink);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtpc-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--mt-brass),0 26px 40px -26px color-mix(in srgb,var(--mt-ink) 50%,transparent)}
.mtpc-r{order:-1;display:block;width:calc(100% - 16px);height:auto;aspect-ratio:202/184;margin:8px 8px 0;border-radius:12px;overflow:hidden;
  background:radial-gradient(70% 58% at 50% 42%,#fff 0%,color-mix(in srgb,#fff 55%,transparent) 60%,transparent 100%),linear-gradient(180deg,#f7f6f2 0%,#f0eee8 76%,#e6e3da 100%);
  --ps:color-mix(in srgb,var(--pf) 76%,#000)}
.mtpc-tx{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:10px;row-gap:9px;padding:12px 14px 15px}
.mtpc-nm{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.02em}
.mtpc-yr{margin:2px 0 0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.3;letter-spacing:.06em;color:var(--mt-mut);white-space:nowrap}
.mtpc-ch,.mtpc-nt,.mtpc-hit{grid-column:1/-1}
.mtpc-nt{margin:0;font-size:13.5px;line-height:1.5;color:var(--mt-mut)}
.mtpc-hit{margin:0;justify-self:start;padding:4px 8px;border-radius:6px;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;letter-spacing:.04em}
/* a family or a kind of phone: the years (or a requirement) on their own line */
.mtpc-card.is-grp .mtpc-yr{grid-column:1/-1;grid-row:2;margin:0;white-space:normal}
.mtpc-card.is-no .mtpc-r{filter:grayscale(1);opacity:.62}
.mtpc-card.is-no .mtpc-nm{color:var(--mt-mut)}

/* "Tested by us": a badge over the name (the render stays clear), and a darker outline */
.mtpc-card.is-us .mtpc-nm,.mtpc-card.is-us .mtpc-yr{grid-row:2}
.mtpc-card.is-us{box-shadow:inset 0 0 0 2px var(--mt-ink)}
.mtpc-card.is-us:hover{box-shadow:inset 0 0 0 2px var(--mt-ink),inset 0 0 0 4px var(--mt-brass),0 26px 40px -26px color-mix(in srgb,var(--mt-ink) 50%,transparent)}
.mtpc-us{grid-column:1/-1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin:0 0 -1px;padding:6px 10px 6px 8px;border-radius:99px;background:var(--mt-ink);color:var(--mt-brass);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:10px;line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4 6.4 11.4 12.8 4.6'/%3E%3C/svg%3E")}

/* brand card: starts a new row, carries the brand's line from the app's phone check */
.mtpc-lead{grid-column:1;display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;background:var(--mt-ink);color:var(--mt-cloud);overflow:hidden;isolation:isolate}
.mtpc-lead::after{content:"";position:absolute;right:-38px;bottom:-38px;z-index:-1;width:130px;height:130px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--mt-cloud) 12%,transparent);box-shadow:0 0 0 18px color-mix(in srgb,var(--mt-cloud) 3%,transparent)}
.mtpc-lead-t{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.mtpc-lead h4{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:clamp(28px,2.4vw,36px);line-height:1;letter-spacing:-.04em}
.mtpc-lead p:not([class]){margin:0;font-size:14px;line-height:1.55;color:color-mix(in srgb,var(--mt-cloud) 74%,transparent)}
.mtpc-lc{margin:auto 0 0;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--mt-cloud) 20%,transparent);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 62%,transparent)}
.mtpc-lc b{color:var(--mt-brass);font-weight:700}

.mtpc-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:34px;padding:34px;border-radius:18px;background:var(--mt-cloud)}
.mtpc-empty b{font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.03em}
.mtpc-empty p{margin:0 0 6px;max-width:560px;color:var(--mt-mut)}
.mtpc-note{margin:44px 0 0;max-width:980px;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;line-height:1.7;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}

@media (max-width:1199.98px){.mtpc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:999.98px){
  .mtpc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:809.98px){
  .mtpc-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .mtpc-q{min-width:0;width:100%}
  .mtpc-fl{flex:none}
}
/* phones: two across; the brand card becomes a full-width header over its phones */
@media (max-width:699.98px){
  /* the level and brand rows become single lines you can swipe, so the first phones show sooner */
  .mtpc-nav,.mtpc-cats,.mtpc-fl{flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:-6px -20px 0;padding:6px 20px 8px;scrollbar-width:none}
  .mtpc-nav::-webkit-scrollbar,.mtpc-cats::-webkit-scrollbar,.mtpc-fl::-webkit-scrollbar{display:none}
  .mtpc-fl{flex:none}
  .mtpc-fg{flex:none}
  .mtpc-fgl{padding:0 4px 0 8px;font-size:10.5px}
  .mtpc-fg button{padding:8px 9px;font-size:11px}
  .mtpc-nav{margin-bottom:6px}
  .mtpc-nav a,.mtpc-cats button{flex:none}
  .mtpc-nav a{padding:7px 8px 7px 11px;font-size:13px}
  .mtpc-cats button{padding:9px 11px;font-size:11px}
  .mtpc-bar{gap:8px}
  .mtpc-key{grid-template-columns:1fr;gap:6px}
  .mtpc-key>div{flex-direction:row;align-items:flex-start;gap:12px;padding:10px 12px}
  .mtpc-key dt{flex:none;min-width:104px}
  .mtpc-key dd{padding-top:2px;font-size:12.5px;line-height:1.45}
  .mtpc-key>.mtpc-kh{flex-direction:column;gap:10px}
  .mtpc-kh dd{padding-top:0;gap:10px}
  .mtpc-hl{grid-template-columns:1fr;gap:8px}
  .mtpc-hl li{flex-direction:row;align-items:flex-start;gap:10px}
  .mtpc-hc{flex:none;min-width:64px;font-size:10px}
  .mtpc-th{column-gap:16px}
  .mtpc-td{font-size:14.5px}
  .mtpc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mtpc-lead{grid-column:1/-1;padding:18px 18px 16px;gap:10px}
  .mtpc-lead::after{width:110px;height:110px;right:-44px;bottom:-54px}
  .mtpc-lc{margin-top:0;padding-top:10px}
  .mtpc-card,.mtpc-lead{border-radius:15px}
  .mtpc-r{width:calc(100% - 12px);margin:6px 6px 0;border-radius:10px}
  .mtpc-tx{grid-template-columns:minmax(0,1fr);padding:10px 11px 13px;row-gap:7px}
  .mtpc-yr{grid-row:auto;margin:0}
  .mtpc-nm{font-size:15px}
  .mtpc-nt{font-size:12.5px}
  .mtpc-ch{gap:4px}
  .mtpc-ch li{gap:3px;padding:3px 5px 3px 4px;font-size:9.5px;letter-spacing:.02em}
  .mtpc-ch li::before{width:10px;height:10px}
  .mtpc-us{padding:5px 8px 5px 6px;font-size:9px}
  .mtpc-card.is-us .mtpc-yr{grid-row:3}
  .mtpc-empty{padding:24px}
}
@media (prefers-reduced-motion:reduce){.mtpc-card,.mtpc-lead{transition:none}}

/* ---- 40-changelog.css ---- */
/* 40 · Changelog (mtcg): sticky rail with kind filters and the release list, a dotted spine of releases that
   light up in turn. Kinds: New (green LED), Improved (brass), Fixed (white). */
.mtcg{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(40px,5vw,80px) 0 clamp(100px,11vw,150px)}
/* room for the closing call to action, which overlaps this section's foot on a diagonal */
.mtcg:has(+ .mtk){padding-bottom:calc(clamp(100px,11vw,150px) + 9vw)}
.mtcg-rail a,.mtcg-sub,.mtcg-f button,.mtcg-n,.mtcg-h time,.mtcg-k,.mtcg-t,.mtcg-empty{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtcg-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(30px,5vw,80px)}

.mtcg-rail{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:20px}
.mtcg-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mtcg-rail li[hidden]{display:none}
.mtcg-rail a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--mt-mut);text-decoration:none;transition:background .25s,color .25s}
.mtcg-rail a:hover{color:var(--mt-ink)}
.mtcg-rail a span{margin-left:auto;font-size:10.5px}
.mtcg-rail a i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-fog);transition:background .25s,box-shadow .25s}
.mtcg-rail a.is-cur{background:var(--mt-cloud);color:var(--mt-ink)}
.mtcg-rail a.is-cur i{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtcg-sub{font-size:12px;color:var(--mt-ink);text-decoration:none}
.mtcg-sub:hover{text-decoration:underline}
.mtcg-n{margin:-6px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}

.mtcg-f{display:flex;flex-wrap:wrap;gap:6px}
.mtcg-f[hidden]{display:none}
.mtcg-f button{padding:8px 12px;border:0;border-radius:8px;background:var(--mt-cloud);color:var(--mt-ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--mt-ink) 12%,transparent),inset 0 0 0 1px var(--mt-fog);transition:translate .15s,background .2s,color .2s}
.mtcg-f button:hover{translate:0 -1px}
.mtcg-f button:active{translate:0 2px;box-shadow:0 1px 0 color-mix(in srgb,var(--mt-ink) 12%,transparent),inset 0 0 0 1px var(--mt-fog)}
.mtcg-f button.is-on{background:var(--mt-ink);color:var(--mt-cloud);box-shadow:0 3px 0 #000}

.mtcg-spine{position:relative;display:flex;flex-direction:column;gap:clamp(60px,7vw,100px);padding-left:40px}
.mtcg-spine::before{content:"";position:absolute;left:7px;top:10px;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--mt-fog) 0 6px,transparent 6px 12px)}
.mtcg-rel{position:relative;scroll-margin-top:110px;transition:opacity .8s}
.mtcg-rel[hidden],.mtcg-md li[hidden],.mtcg-k[hidden]{display:none}
.js .mtcg-rel{opacity:.25}
.js .mtcg-rel.is-on{opacity:1}
.mtcg-dot{position:absolute;left:-40px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--mt-cloud);box-shadow:inset 0 0 0 2px var(--mt-ink);transition:background .4s,box-shadow .4s}
.mtcg-rel.is-on .mtcg-dot{background:var(--mt-brass);box-shadow:inset 0 0 0 2px var(--mt-ink),0 0 12px var(--mt-brass)}

.mtcg-h{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mtcg-v.mt-hd{font-size:48px;line-height:1;letter-spacing:0}
.mtcg-ks{display:inline-flex;flex-wrap:wrap;gap:6px}
.mtcg-h time{margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mtcg-k{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:6px;background:var(--mt-ink);color:var(--mt-cloud);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.mtcg-k i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}
.mtcg-k.k-improved i{background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.mtcg-k.k-fixed i{background:var(--mt-cloud);box-shadow:0 0 6px var(--mt-cloud)}
.mtcg-rel h3{margin:18px 0 14px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(26px,2.4vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.1}

/* release notes (markdown-style body from the design system, scoped here) */
.mtcg .mt-md{font-size:18px;line-height:1.7;color:color-mix(in srgb,var(--mt-ink) 86%,transparent)}
.mtcg-md{padding:22px 24px;border-radius:16px;background:var(--mt-cloud);font-size:16px}
.mtcg .mtcg-md{font-size:16px;line-height:1.6}
.mtcg-md ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mtcg-md li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:baseline}
.mtcg-t{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut);white-space:nowrap}
.mtcg-t::before{content:"";width:8px;height:8px;border-radius:2px;background:#22c55e;box-shadow:0 0 6px color-mix(in srgb,#22c55e 60%,transparent);translate:0 -1px}
[data-k="improved"]>.mtcg-t::before{background:var(--mt-brass);box-shadow:0 0 6px color-mix(in srgb,var(--mt-brass) 60%,transparent)}
[data-k="fixed"]>.mtcg-t::before{background:var(--mt-ink);box-shadow:none}
.mtcg-empty{margin:0;padding:22px 24px;border-radius:16px;background:var(--mt-cloud);font-size:13px;color:var(--mt-mut)}

@media (max-width:899px){
  .mtcg-grid{grid-template-columns:1fr;gap:28px}
  .mtcg-rail{position:relative;top:auto}
  .mtcg-nav,.mtcg-sub{display:none}
  .mtcg-spine{padding-left:30px}
  .mtcg-dot{left:-30px}
  .mtcg-v.mt-hd{font-size:34px}
  .mtcg-h time{margin-left:0;flex-basis:100%}
}
@media (max-width:600px){
  .mtcg-md{padding:18px}
  .mtcg-md li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:809.98px){
  .mtcg:has(+ .mtk){padding-bottom:calc(clamp(100px,11vw,150px) + 16vw)}
}
@media (prefers-reduced-motion:reduce){.js .mtcg-rel{opacity:1}}

/* ---- 41-about.css ---- */
/* 41 · About (mtab): manifesto lit word by word with reading, seven-segment facts, a dash cam frame that
   opens from a slit with scroll, story blocks, principles on a screwed-down rack, and the status board. */
.mtab{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(80px,9vw,130px) 0 clamp(100px,11vw,150px)}
.mtab .mt-eb,.mtab-st dd,.mtab-hud,.mtab-n,.mtab-ct,.mtab-more a{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtab a{text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px}

.mtab-man{margin:28px 0 0;max-width:1180px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(30px,3.6vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1.12;text-wrap:pretty}
.mtab-man span{color:color-mix(in srgb,var(--mt-ink) 18%,transparent);transition:color .3s}
.mtab-man span.on{color:var(--mt-ink)}

.mtab-st{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:clamp(60px,7vw,100px) 0 0;padding:28px 0 0;border-top:2px solid var(--mt-ink)}
.mtab-st div{margin:0}
.mtab-st dt{min-height:54px}
.mtab-st .mt-seg{color:var(--mt-ink)}
.mtab-st .mt-seg:empty::before{content:attr(data-label);font-family:var(--mt-font-d),Inter,Arial,sans-serif;font-weight:800;font-size:48px;line-height:1;letter-spacing:-.04em}
.mtab-st dd{margin:10px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}

/* the frame: opens from a horizontal slit as it rises into view (--sp is the frame's own scroll progress) */
.mtab-ph{position:relative;margin:clamp(70px,8vw,110px) 0;height:clamp(320px,44vw,640px);overflow:hidden;background:#0c0e13;clip-path:inset(max(0%,calc(50% - var(--sp,.5)*100%)) 0 max(0%,calc(50% - var(--sp,.5)*100%)) 0)}
.mtab.is-still .mtab-ph{clip-path:none}
.mtab-art{position:absolute;left:0;top:-10%;width:100%;height:120%;max-width:none;translate:0 calc((var(--sp,.5) - .5)*-60px)}
.mtab.is-still .mtab-art{translate:none}
.mtab-hud{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto;align-content:space-between;gap:10px 20px;padding:clamp(14px,2.4vw,30px) clamp(16px,3vw,44px);font-size:clamp(10px,1vw,13px);line-height:1.4;letter-spacing:.1em;color:#fff;pointer-events:none}
.mtab-hud>span{display:flex;align-items:center;gap:12px;white-space:nowrap}
.mtab-hud>span:nth-child(even){justify-content:flex-end;text-align:right}
.mtab-rec{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px;background:#ef4444;color:#fff;font-weight:700;text-shadow:none}
.mtab-rec i{width:7px;height:7px;border-radius:50%;background:#fff;animation:mtLed 1.2s ease-in-out infinite}
.mtab-hud::before{content:"";position:absolute;inset:clamp(8px,1.2vw,14px);border:1px solid rgba(255,255,255,.18);border-radius:10px}

/* story */
.mtab-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,100px);align-items:start}
.mtab-sh{position:sticky;top:110px}
.mtab-by{margin:22px 0 0;max-width:380px;font-size:17px;line-height:1.55;color:var(--mt-mut)}
.mtab-by a{color:var(--mt-ink)}
.mtab-blocks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.mtab-blocks li{padding:26px 28px;border-radius:18px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 6%,transparent),0 3px 0 color-mix(in srgb,var(--mt-ink) 7%,transparent);transition:opacity .7s ease calc(var(--i)*.12s),translate .9s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.12s)}
.mtab-n{display:inline-block;padding:4px 8px;border-radius:6px;background:var(--mt-ink);color:var(--mt-brass);font-size:11px;letter-spacing:.12em}
.mtab-blocks h3{margin:14px 0 8px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(24px,2.2vw,32px);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.mtab-blocks p{margin:0;font-size:17px;line-height:1.6;color:color-mix(in srgb,var(--mt-ink) 80%,transparent)}

/* principles rack */
.mtab-h2{margin:clamp(80px,9vw,130px) 0 24px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(32px,3vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.mtab-rack{list-style:none;margin:0;padding:18px 40px;border-radius:22px;background:var(--mt-pine);display:flex;flex-direction:column;gap:10px}
.mtab-rack li{position:relative;display:grid;grid-template-columns:120px 1fr 12px;align-items:center;gap:20px;padding:20px 24px 20px 32px;border-radius:12px;background:var(--mt-cloud);transition:opacity .6s calc(var(--i)*.12s),translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.12s)}
.mtab-rack b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:30px;font-weight:800;letter-spacing:-.04em}
.mtab-rack p{margin:0;font-size:17px;line-height:1.55;color:color-mix(in srgb,var(--mt-ink) 78%,transparent)}
.mtab-rack strong{color:var(--mt-ink);font-weight:700}
.mtab-rack a{color:var(--mt-ink)}
.mtab-rack li>i{width:10px;height:10px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.mtab-scw{position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9c6bd,#8a877f)}

/* status board */
.mtab-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.mtab-col{padding:24px 26px 14px;border-radius:18px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 6%,transparent),0 3px 0 color-mix(in srgb,var(--mt-ink) 7%,transparent);transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.mtab-col:nth-child(2){transition-delay:.12s}
.mtab-col:nth-child(3){transition-delay:.24s}
.mtab-col.is-ok{background:var(--mt-ink);color:var(--mt-cloud)}
.mtab-ct{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mtab-ct i{width:9px;height:9px;border-radius:50%;background:var(--mt-fog)}
.is-ok .mtab-ct i{background:#22c55e;box-shadow:0 0 8px #22c55e}
.is-wip .mtab-ct i{background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass);animation:mtLed 2.4s ease-in-out infinite}
.is-next .mtab-ct i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mt-mut)}
.mtab-col ul{list-style:none;margin:0;padding:0}
.mtab-col li{padding:11px 0;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);font-size:15.5px;line-height:1.45}
.mtab-more{display:flex;flex-wrap:wrap;gap:12px 28px;margin:28px 0 0}
.mtab-more a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-ink);text-decoration:none}
.mtab-more a:hover{text-decoration:underline}

/* entrances (only with JavaScript; everything is visible without it) */
.js .mtab-blocks li,.js .mtab-col{opacity:0;translate:0 24px}
.js .mtab-rack li{opacity:0;translate:-40px 0}
.js .mtab-blocks.is-in li,.js .mtab-rack.is-in li,.js .mtab-stat.is-in .mtab-col{opacity:1;translate:0 0}

/* the ticker that follows on this page runs into the closing call to action's diagonal: give it room */
.mtab~.mtl:has(+ .mtk),.mtab+.mtl:has(+ .mtk){padding-bottom:calc(clamp(70px,7vw,100px) + 9vw)}

@media (max-width:1099px){
  .mtab-stat{grid-template-columns:1fr 1fr}
}
@media (max-width:809.98px){
  .mtab-st{grid-template-columns:1fr 1fr;gap:28px 20px}
  .mtab-st .mt-seg{--s:36px!important}
  .mtab-st dt{min-height:36px}
  .mtab-story{grid-template-columns:1fr}
  .mtab-sh{position:relative;top:auto}
  .mtab-rack{padding:12px}
  .mtab-rack li{grid-template-columns:44px 1fr 10px;gap:14px;padding:16px 16px 16px 26px}
  .mtab-rack b{font-size:22px}
  .mtab-rack p{font-size:16px}
  .mtab-stat{grid-template-columns:1fr}
  .mtab-blocks li{padding:22px 20px}
  .mtab-hud{grid-template-columns:1fr}
  .mtab-hud>span:nth-child(even){justify-content:flex-start;text-align:left}
  .mtab-hud>span:nth-child(3),.mtab-hud>span:nth-child(2){display:none}
  .mtab~.mtl:has(+ .mtk),.mtab+.mtl:has(+ .mtk){padding-bottom:calc(clamp(70px,7vw,100px) + 16vw)}
}
@media (prefers-reduced-motion:reduce){.mtab-ph{clip-path:none}.mtab-art{translate:none}}

/* the story headline and its small label */
.mtab-hd{margin:22px 0 0}
.mtab-lbl{margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}

/* why recording matters: a lead, four situations, the research note */
.mtab-lead{max-width:760px;margin:0 0 28px;font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--mt-mut)}
.mtab-cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mtab-cases li{padding:24px 22px;border-radius:18px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 6%,transparent),0 3px 0 color-mix(in srgb,var(--mt-ink) 7%,transparent)}
.mtab-cases h3{margin:0 0 10px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.mtab-cases p{margin:0;font-size:15px;line-height:1.6;color:var(--mt-mut)}
.mtab-cases a,.mtab-note a,.mtab-opts a{color:var(--mt-ink);text-underline-offset:3px}
.mtab-note{max-width:900px;margin:24px 0 0;font-size:14.5px;line-height:1.65;color:var(--mt-mut)}
/* your footage, your choice: three options, the first marked as ours to recommend */
.mtab-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mtab-opts li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:26px 24px;border-radius:18px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 6%,transparent)}
.mtab-opts li.is-first{background:var(--mt-brass);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--mt-ink) 45%,transparent)}
.mtab-o{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--mt-ink);color:var(--mt-brass);font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:19px;font-weight:800}
.mtab-opts h3{margin:4px 0 10px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.mtab-opts h3 em{display:block;margin-top:6px;font-style:normal;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-ink) 70%,transparent)}
.mtab-opts p{margin:0;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--mt-ink) 76%,transparent)}
.mtab-why-us{margin-top:18px;padding:clamp(24px,2.6vw,36px);border-radius:22px;background:var(--mt-pine);color:var(--mt-cloud)}
.mtab-why-us h3{margin:0 0 12px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.02em}
.mtab-why-us p{max-width:900px;margin:0;font-size:16.5px;line-height:1.7;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
@media (max-width:1100px){.mtab-cases{grid-template-columns:1fr 1fr}.mtab-opts{grid-template-columns:1fr}}
@media (max-width:640px){.mtab-cases{grid-template-columns:1fr}}

/* ---- 42-contact.css ---- */
/* 42 · Contact (mtct): dark page opener with the details on the left and the form console on the right.
   Topics are real radio buttons styled as keys, so the form also works as a plain post. */
.mtct{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(150px,15vw,190px) 0 clamp(100px,11vw,150px)}
.mtct-cr,.mtct-st,.mtct-info dt,.mtct-tp span,.mtct-td,.mtct-err,.mtct-fl>span,.mtct-note,.mtct-ref{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtct-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:start}
.mtct-cr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 28px;font-size:12.5px;color:var(--mt-mut)}
.mtct-cr>span{color:var(--mt-brass)}
.mtct-cr a{color:inherit;text-decoration:none}
.mtct-cr a:hover{color:var(--mt-cloud)}
.mtct-cr i{font-style:normal}
.mtct-cr b{font-weight:500;color:var(--mt-cloud)}
.mtct .mt-hd{font-size:clamp(56px,5.6vw,96px);line-height:.96}
.mtct-sub{margin:24px 0 0;max-width:460px;font-size:18px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtct-st{display:inline-flex;align-items:center;gap:9px;margin:28px 0 0;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-cloud)}
.mtct-st i{width:8px;height:8px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass);animation:mtLed 2.4s ease-in-out infinite}
.mtct-info{margin:34px 0 0;display:flex;flex-direction:column;max-width:460px}
.mtct-info div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtct-info dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtct-info dd{margin:0;text-align:right;font-size:15px}
.mtct-info a{color:var(--mt-brass);text-decoration:none}
.mtct-info a:hover{text-decoration:underline}

.mtct-con{padding:clamp(20px,2.4vw,32px);border-radius:24px;background:var(--mt-pine);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),0 40px 80px -40px rgba(0,0,0,.7)}
.mtct-form{display:flex;flex-direction:column;gap:16px}
.mtct-form[hidden],.mtct-done[hidden],.mtct-err[hidden]{display:none}
.mtct-tp{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.mtct-tp label{position:relative;cursor:pointer}
.mtct-tp input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mtct-tp span{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:10px;background:color-mix(in srgb,var(--mt-cloud) 8%,transparent);color:var(--mt-cloud);font-size:12px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 0 #000;transition:background .2s,color .2s,translate .15s}
.mtct-tp label:hover span{translate:0 -1px}
.mtct-tp span i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--mt-cloud) 20%,transparent)}
.mtct-tp input:checked+span{background:var(--mt-brass);color:var(--mt-ink)}
.mtct-tp input:checked+span i{background:var(--mt-ink)}
.mtct-tp input:focus-visible+span{outline:3px solid var(--mt-cloud);outline-offset:2px}
.mtct-td{margin:0;font-size:12px;letter-spacing:.06em;color:var(--mt-mut)}
.mtct-err{margin:0;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,#ef4444 22%,transparent);color:#fecaca;font-size:12.5px;outline:none}
.mtct-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mtct-fl{display:flex;flex-direction:column;gap:8px}
.mtct-fl>span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mtct-fl input,.mtct-fl textarea{width:100%;padding:14px 16px;border:0;border-radius:12px;background:color-mix(in srgb,var(--mt-night) 70%,transparent);color:var(--mt-cloud);font:inherit;font-size:16px;outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);resize:vertical;transition:box-shadow .2s}
.mtct-fl input{height:52px;padding-top:0;padding-bottom:0}
.mtct-fl textarea{min-height:150px}
.mtct-fl input:focus,.mtct-fl textarea:focus{box-shadow:inset 0 0 0 2px var(--mt-brass)}
.mtct-fl [aria-invalid="true"]{box-shadow:inset 0 0 0 2px #ef4444}
.mtct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mtct-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
.mtct-foot .mt-btn{font-family:inherit;appearance:none;-webkit-appearance:none}
.mtct-foot .mt-btn[aria-disabled="true"]{cursor:progress;opacity:.8}
.mtct-note{margin:0;font-size:11px;letter-spacing:.06em;color:var(--mt-mut)}
.mtct-note a{color:var(--mt-cloud)}
.mtct-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 4px;outline:none;animation:mtctIn .5s cubic-bezier(.2,.8,.2,1)}
.mtct-done>i{width:18px;height:18px;border-radius:50%;background:#22c55e;box-shadow:0 0 16px #22c55e}
.mtct-done h2{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:36px;font-weight:800;letter-spacing:-.04em}
.mtct-done p{margin:0;color:color-mix(in srgb,var(--mt-cloud) 75%,transparent)}
.mtct-done b{color:var(--mt-brass);font-weight:500}
@keyframes mtctIn{from{opacity:0;translate:0 12px}}

/* entrance with JavaScript */
.js .mtct-sub,.js .mtct-info,.js .mtct-con,.js .mtct-cr{opacity:0;translate:0 22px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtct-cr{translate:0 -8px}
.js .mtct-con{translate:0 30px;transition-delay:.3s}
.js .mtct-sub{transition-delay:.4s}
.js .mtct-info{transition-delay:.5s}
.js .mtct.is-on .mtct-sub,.js .mtct.is-on .mtct-info,.js .mtct.is-on .mtct-con,.js .mtct.is-on .mtct-cr{opacity:1;translate:0 0}

@media (max-width:899px){
  .mtct-grid{grid-template-columns:1fr}
  .mtct .mt-hd{font-size:clamp(44px,12vw,62px)}
}
@media (max-width:600px){
  .mtct-row{grid-template-columns:1fr}
  .mtct-foot .mt-btn{width:100%}
}

/* ---- 44-legal.css ---- */
/* 44 · Legal (mtlg): draft banner, Privacy/Terms switch and a sticky numbered contents list beside a readable
   column of numbered sections. Without JavaScript both documents show in turn. */
.mtlg{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(140px,14vw,180px) 0 clamp(90px,10vw,140px)}
.mtlg-cr,.mtlg-up,.mtlg-dk,.mtlg-sw button,.mtlg-toc,.mtlg-dh span,.mtlg .mt-md h3 span{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtlg-cr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 28px;font-size:12.5px;color:var(--mt-mut)}
.mtlg-cr>span{color:var(--mt-acc)}
.mtlg-cr a{color:inherit;text-decoration:none}
.mtlg-cr a:hover{color:var(--mt-ink)}
.mtlg-cr i{font-style:normal}
.mtlg-cr b{font-weight:500;color:var(--mt-ink)}
.mtlg .mt-hd{font-size:clamp(52px,5vw,84px);line-height:.98}
.mtlg-up{margin:18px 0 0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}

.mtlg-draft{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;align-items:start;max-width:1060px;margin:clamp(30px,4vw,44px) 0 0;padding:20px 24px;border-radius:16px;background:var(--mt-brass);color:var(--mt-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--mt-brass) 55%,var(--mt-ink))}
.mtlg-draft p{margin:0;font-size:15.5px;line-height:1.55}
.mtlg-dk{display:inline-flex!important;align-items:center;gap:9px;padding:7px 12px;border-radius:8px;background:var(--mt-ink);color:var(--mt-cloud);font-size:11.5px!important;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mtlg-dk i{width:8px;height:8px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass);animation:mtLed 1.6s ease-in-out infinite}

.mtlg-grid{display:grid;grid-template-columns:260px minmax(0,760px);gap:clamp(30px,6vw,110px);margin-top:clamp(50px,6vw,80px)}
.mtlg-side{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 130px);overflow:auto;padding:2px}
.mtlg-sw{display:flex;padding:4px;border-radius:10px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mtlg-sw[hidden]{display:none}
.mtlg-sw button{flex:1;padding:10px;border:0;border-radius:7px;background:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut);cursor:pointer;transition:background .25s,color .25s}
.mtlg-sw button:hover{color:var(--mt-ink)}
.mtlg-sw button.is-on{background:var(--mt-ink);color:var(--mt-cloud)}
.mtlg-toc[hidden]{display:none}
.mtlg-tt{margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-ink)}
.js .mtlg-tt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mtlg-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.mtlg-toc a{display:flex;gap:10px;padding:6px 8px;border-radius:7px;color:var(--mt-mut);text-decoration:none;transition:background .2s,color .2s}
.mtlg-toc a span{color:var(--mt-acc)}
.mtlg-toc a:hover{color:var(--mt-ink)}
.mtlg-toc a.is-cur{background:var(--mt-cloud);color:var(--mt-ink)}
html:not(.js) .mtlg-toc+.mtlg-toc{margin-top:10px}

.mtlg-doc{scroll-margin-top:110px;outline:none}
.mtlg-doc[hidden]{display:none}
html:not(.js) .mtlg-doc+.mtlg-doc{margin-top:clamp(60px,7vw,100px);padding-top:clamp(40px,5vw,60px);border-top:2px solid var(--mt-ink)}
.mtlg-dh{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:0 0 30px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(30px,2.8vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.mtlg-dh span{padding:5px 9px;border-radius:6px;background:var(--mt-brass);color:var(--mt-ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* document body (markdown-style from the design system, scoped here) */
.mtlg .mt-md{font-size:17px;line-height:1.7;color:color-mix(in srgb,var(--mt-ink) 86%,transparent)}
.mtlg .mt-md section{scroll-margin-top:110px;padding:0 0 8px}
.mtlg .mt-md section+section{margin-top:34px}
.mtlg .mt-md h3{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--mt-ink)}
.mtlg .mt-md h3 span{flex:none;font-size:12px;letter-spacing:.08em;color:var(--mt-acc)}
.mtlg .mt-md p{margin:0 0 1em}
.mtlg .mt-md p:last-child,.mtlg .mt-md ul:last-child{margin-bottom:0}
.mtlg .mt-md ul{list-style:none;margin:0 0 1.2em;padding:0;display:flex;flex-direction:column;gap:10px}
.mtlg .mt-md li{position:relative;padding-left:24px}
.mtlg .mt-md li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--mt-brass);box-shadow:0 0 6px color-mix(in srgb,var(--mt-brass) 60%,transparent)}
.mtlg .mt-md strong{color:var(--mt-ink)}
.mtlg .mt-md a{color:var(--mt-ink);text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:3px}

/* entrance with JavaScript */
.js .mtlg-cr,.js .mtlg-up,.js .mtlg-draft,.js .mtlg-grid{opacity:0;translate:0 22px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtlg-cr{translate:0 -8px}
.js .mtlg-up{transition-delay:.35s}
.js .mtlg-draft{transition-delay:.45s}
.js .mtlg-grid{transition-delay:.55s}
.js .mtlg.is-on .mtlg-cr,.js .mtlg.is-on .mtlg-up,.js .mtlg.is-on .mtlg-draft,.js .mtlg.is-on .mtlg-grid{opacity:1;translate:0 0}

@media (max-width:809.98px){
  .mtlg .mt-hd{font-size:clamp(40px,11vw,56px)}
  .mtlg-grid{grid-template-columns:1fr}
  .mtlg-side{position:relative;top:auto;max-height:none;overflow:visible}
  .mtlg-draft{grid-template-columns:1fr;padding:18px}
  .mtlg-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
}
@media (max-width:480px){.mtlg-toc ol{grid-template-columns:1fr}}

/* ---- 45-notfound.css ---- */
/* 45 · 404 (mtnf): a big split-flap "404" over a road that ends at a barrier under a sodium light. */
.mtnf{position:relative;overflow:hidden;min-height:min(100vh,980px);display:flex;align-items:center;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(140px,14vw,180px) 0 clamp(90px,10vw,140px)}
.mtnf .mt-eb,.mtnf-links a{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtnf-ph{position:absolute;inset:0}
.mtnf-art{width:100%;height:100%;max-width:none}
.mtnf-wash{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--mt-night) 92%,transparent) 0%,color-mix(in srgb,var(--mt-night) 70%,transparent) 45%,color-mix(in srgb,var(--mt-night) 10%,transparent) 100%)}
.mtnf-in{position:relative;z-index:1}
.mtnf .mt-eb{margin-bottom:22px}
.mtnf-h.mt-hd{font-size:clamp(110px,17vw,240px);line-height:.9;letter-spacing:-.02em}
.mtnf-lead{margin:30px 0 0;max-width:640px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.mtnf-sub{margin:16px 0 0;max-width:520px;font-size:17px;line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 75%,transparent)}
.mtnf-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.mtnf-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px}
.mtnf-links a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent);text-decoration:none}
.mtnf-links a:hover{color:var(--mt-brass)}
.js .mtnf-lead,.js .mtnf-sub,.js .mtnf-ctas,.js .mtnf-links{opacity:0;translate:0 20px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.js .mtnf-sub{transition-delay:.12s}
.js .mtnf-ctas{transition-delay:.24s}
.js .mtnf-links{transition-delay:.36s}
.js .mtnf.is-on .mtnf-lead,.js .mtnf.is-on .mtnf-sub,.js .mtnf.is-on .mtnf-ctas,.js .mtnf.is-on .mtnf-links{opacity:1;translate:0 0}
@media (max-width:809.98px){
  .mtnf-wash{background:linear-gradient(180deg,color-mix(in srgb,var(--mt-night) 85%,transparent),color-mix(in srgb,var(--mt-night) 55%,transparent))}
  .mtnf-ctas{flex-direction:column;align-items:stretch}
}

/* ---- 46-download.css ---- */
/* 46 · Download (mtdl, mtdn): the app for iPhone and Android. The opener with the store badges (css/02d-stores.css)
   beside a full phone, then each platform as a pair of free-standing phones (css/02c-device.css, no stage or card
   behind them) with its requirements; then what's free and what's extra, beside the Dashivo Hub waitlist form. */
.mtdl{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(150px,15vw,190px) 0 clamp(80px,9vw,130px);overflow:hidden}
.mtdl::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 0%,color-mix(in srgb,var(--mt-brass) 14%,transparent),transparent 70%);pointer-events:none}
.mtdl .mt-wrap{position:relative}
.mtdl-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,4vw,72px);align-items:center}
.mtdl-intro .mt-eb{margin-bottom:20px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtdl .mt-hd{font-size:clamp(52px,5.6vw,96px);line-height:.96}
.mtdl-sub{margin:24px 0 34px;max-width:640px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mtdl-fine{margin:30px 0 0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11.5px;line-height:1.8;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mtdl-fine a,.mtdl-more a{color:var(--mt-brass);text-decoration:none}
.mtdl-fine a:hover,.mtdl-more a:hover{text-decoration:underline}
.mtdl-hub{white-space:nowrap}
.mtdl-hero{display:flex;justify-content:center;padding:10px 0 30px}
.mtdl-hero .dvc{--dw:clamp(260px,25vw,380px)}
/* each platform: phones on one side, what it needs on the other (Android mirrored) */
.mtdl-plat{display:flex;flex-direction:column;gap:clamp(70px,9vw,140px);margin-top:clamp(80px,9vw,140px)}
.mtdl-p{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,90px);align-items:center}
.mtdl-p.is-flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.mtdl-p.is-flip .mtdl-ph{order:2}
.mtdl .mtdl-ph{margin:0;padding:10px 0 40px;gap:clamp(18px,3vw,48px)}
.mtdl .mtdl-ph .dvc{--dw:clamp(220px,21vw,330px)}
.mtdl .mtdl-ph .dvc.is-side{--dw:clamp(170px,16vw,250px)}
.mtdl-tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:560px}
.mtdl-k{display:inline-flex;align-items:center;gap:9px;margin:0;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-brass)}
.mtdl-k i{width:8px;height:8px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.mtdl-tx h2{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(34px,3.4vw,52px);letter-spacing:-.04em;line-height:1}
.mtdl-req{align-self:stretch;margin:6px 0 18px;display:flex;flex-direction:column}
.mtdl-req div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mtdl-req dt{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut);padding-top:2px}
.mtdl-req dd{margin:0;font-size:15px;line-height:1.45}
.mtdl-more{display:flex;flex-wrap:wrap;gap:10px 36px;margin:clamp(60px,7vw,100px) 0 0;font-size:16px}
/* Apple's and Google's trademark notice for the badges */
.mtdl-legal{margin:18px 0 0;max-width:760px;font-size:12px;line-height:1.6;color:var(--mt-mut)}
@media (max-width:899px){
  .mtdl-head,.mtdl-p,.mtdl-p.is-flip{grid-template-columns:minmax(0,1fr)}
  .mtdl-hero{padding:30px 0 10px}
  .mtdl-hero .dvc{--dw:min(66vw,330px)}
  .mtdl-p.is-flip .mtdl-ph{order:0}
  .mtdl .mtdl-ph{padding:0 0 30px}
  .mtdl .mtdl-ph .dvc{--dw:min(46vw,320px)}
  .mtdl .mtdl-ph .dvc.is-side{--dw:min(35vw,245px)}
  .mtdl-tx{max-width:none}
}
@media (max-width:520px){.mtdl-req div{grid-template-columns:1fr;gap:4px} .mtdl .mtdl-ph{gap:12px}}

.mtdn{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(80px,9vw,130px) 0}
.mtdn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.mtdn .mt-eb{margin-bottom:18px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}
.mtdn-list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mtdn-list li{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;background:var(--mt-cloud);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.mtdn-list li.is-pro{box-shadow:inset 0 0 0 2px var(--mt-brass)}
.mtdn-list b{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em}
.mtdn-list span{font-size:15px;line-height:1.5;color:var(--mt-mut)}
.mtdn-fine{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--mt-mut)}
.mtdn-fine a{color:var(--mt-ink)}
.mtdn-con{position:sticky;top:110px;color:var(--mt-cloud)}
.mtdn-con .mtdn-eb{margin:0 0 2px;font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw);background:var(--mt-night);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 14%,transparent)}
.mtdn-t{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;line-height:1.1}
.mtdn-d{margin:-6px 0 4px;font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mtdn-d a{color:var(--mt-brass);text-decoration:none;white-space:nowrap}
.mtdn-d a:hover{text-decoration:underline}
.mtdn-ok{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent);cursor:pointer}
.mtdn-ok input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--mt-brass)}
@media (max-width:899px){.mtdn-grid{grid-template-columns:1fr} .mtdn-con{position:relative;top:0}}
/* the breadcrumb and form box borrow the contact page's styles, but not its entrance (that waits for .mtct.is-on) */
.js .mtdl .mtct-cr,.js .mtdn .mtct-con{opacity:1;translate:none}
/* the Dashivo Hub card beside the plans: the Custom's render on its studio sweep, then the way to /hub/ */
.mtdn-hub{display:flex;flex-direction:column;gap:14px}
.mtdn-hub-img{display:block;aspect-ratio:16/10;margin:0 0 4px;border-radius:16px;background:radial-gradient(60% 50% at 50% 62%,color-mix(in srgb,var(--mt-brass) 12%,transparent),transparent 70%),radial-gradient(90% 70% at 50% 100%,#2a2d35,transparent 70%),linear-gradient(180deg,#191b20,#121317);overflow:hidden}
.mtdn-hub-img img{width:100%;height:100%;object-fit:cover;scale:1.15}
.mtdn-hub-st{margin:4px 0 -4px}
.mtdn-hub-st .mt-soon{margin:0}
.mtdn-hub .mtdn-d{margin:0}
.mtdn-hub-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media (max-width:600px){.mtdn-hub-ctas{flex-direction:column;align-items:stretch}}

/* ---- 47-hub.css ---- */
/* 47 · The Hub page (mthb): hero with the two models, the configurator, where it goes (top-down car), what happens to
   a clip, compare (mtcp), in the box and specs, the Community edition, the FAQ (mtf) and the preorder terms.
   The renders (src/assets/hub/) have transparent backgrounds with a soft contact shadow: they sit on "stages", a lit
   floor in the section's own colours (--hb-stage: dark on night sections, warm on bone), never on white. */
.mthb-hero,.mthb-bx{--hb-stage:radial-gradient(60% 46% at 50% 62%,color-mix(in srgb,var(--mt-brass) 13%,transparent),transparent 70%),radial-gradient(90% 70% at 50% 100%,#2a2d35,transparent 70%),linear-gradient(180deg,#191b20,#121317)}
.mthb-cf{--hb-stage:radial-gradient(70% 55% at 50% 58%,#fbfaf6,transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--mt-bone) 55%,#fff),color-mix(in srgb,var(--mt-bone) 70%,var(--mt-fog)))}
.mthb-head{max-width:780px;margin-bottom:clamp(36px,4.4vw,60px)}
.mthb-sub{margin:22px 0 0;max-width:640px;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:var(--mt-mut)}
.mthb-h3{margin:0 0 16px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em;line-height:1.1}
.mthb-t,.mthb-hfine,.mthb-mc-st,.mthb-mc-p,.mthb-set legend,.mthb-seg em,.mthb-chips em,.mthb-kind,.mthb-hrs small,.mthb-ship,.mthb-fig-cap,.mthb-t-soon,.mthb-tag,.mthb-st,.mthb-specs dt,.mthb-bx-fig figcaption,.mthb-tm-draft,.mthb-cm-soon{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--mt-font-mw)}

/* ---- hero ---- */
.mthb-hero{padding-bottom:clamp(70px,8vw,120px)}
.mthb-hgrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4.5vw,80px);align-items:end}
.mthb-hero .mt-hd{font-size:clamp(58px,6.4vw,108px)}
.mthb-hero .mt-hd .tm{font-size:.32em;vertical-align:1.6em;margin-left:.06em}
.mthb-line{margin:20px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(26px,2.5vw,40px);line-height:1.08;letter-spacing:-.035em;color:var(--mt-cloud)}
.mthb-hero .mtph-sub{margin-top:18px;max-width:560px}
.mthb-signin{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--mt-mut)}
.mthb-signin a{color:var(--mt-cloud);font-weight:600;text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:2px;text-underline-offset:4px}
.mthb-signin a:hover{color:var(--mt-brass)}
.mthb-hfine{margin:18px 0 0;font-size:11.5px;line-height:1.7;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mthb-diy{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;padding:10px 14px 10px 10px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 12%,transparent);color:var(--mt-cloud);font-size:14.5px;font-weight:600;text-decoration:none;transition:background .25s}
.mthb-diy .mt-soon{margin:0}
.mthb-diy svg{width:12px;height:12px;flex:none;color:var(--mt-brass);transition:translate .4s cubic-bezier(.34,1.56,.64,1)}
.mthb-diy:hover{background:color-mix(in srgb,var(--mt-cloud) 11%,transparent)}
.mthb-diy:hover svg{translate:3px 0}
.mthb-models{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.mthb-mc-a{display:flex;flex-direction:column;height:100%;padding:0 0 20px;border-radius:24px;background:linear-gradient(170deg,#1d1f25,#131418);color:var(--mt-cloud);text-decoration:none;overflow:hidden;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 7%,transparent),0 40px 80px -50px #000;transition:translate .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.mthb-mc-a:hover{translate:0 -6px;box-shadow:0 50px 90px -50px #000,inset 0 0 0 2px var(--mt-brass)}
.mthb-mc-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--hb-stage)}
.mthb-mc-img img{width:100%;height:100%;object-fit:cover;scale:1.12;transition:scale 1.2s cubic-bezier(.2,.8,.2,1)}
.mthb-mc-a:hover .mthb-mc-img img{scale:1.18}
.mthb-mc-st{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:0 18px;padding:4px 10px 4px 8px;border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mthb-mc-st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.mthb-mc-st.is-pre{background:var(--mt-brass);color:var(--mt-ink)}
.mthb-mc-st.is-rsv{background:color-mix(in srgb,var(--mt-cloud) 10%,transparent);color:var(--mt-cloud)}
.mthb-mc-nm{margin:12px 18px 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(18px,1.55vw,23px);letter-spacing:-.03em;line-height:1.1}
.mthb-mc-d{margin:6px 18px 0;font-size:14px;line-height:1.45;color:var(--mt-mut)}
.mthb-mc-p{margin:auto 18px 0;padding-top:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt-mut)}
.mthb-mc-p b{margin-left:4px;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:22px;letter-spacing:-.03em;text-transform:none;color:var(--mt-cloud)}
.js .mthb-hero .mthb-line,.js .mthb-hero .mthb-signin,.js .mthb-hero .mthb-hfine,.js .mthb-hero .mthb-diy{opacity:0;translate:0 22px;transition:opacity .9s ease 560ms,translate 1s cubic-bezier(.2,.8,.2,1) 560ms}
.js .mthb-hero .mthb-signin,.js .mthb-hero .mthb-hfine,.js .mthb-hero .mthb-diy{transition-delay:820ms}
.js .mthb-hero .mthb-mc{opacity:0;translate:0 40px;transition:opacity 1s ease calc(420ms + var(--i)*140ms),translate 1.2s cubic-bezier(.2,.8,.2,1) calc(420ms + var(--i)*140ms)}
.js .mthb-hero.is-on .mthb-line,.js .mthb-hero.is-on .mthb-signin,.js .mthb-hero.is-on .mthb-hfine,.js .mthb-hero.is-on .mthb-diy,.js .mthb-hero.is-on .mthb-mc{opacity:1;translate:0 0}

/* ---- configurator ---- */
.mthb-cf{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(100px,11vw,160px) 0}
.mthb-cfg{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(12px,1.4vw,20px);align-items:start}
html:not(.js) .mthb-cfg{display:none}
.mthb-fig{position:sticky;top:100px;margin:0;aspect-ratio:4/3;border-radius:28px;background:var(--hb-stage);overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-ink) 5%,transparent)}
.mthb-fig-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;transition:opacity .7s ease,scale 1.1s cubic-bezier(.2,.8,.2,1)}
.mthb-fig-img.is-on{opacity:1;scale:1}
.mthb-fig-cap{position:absolute;left:clamp(16px,2vw,26px);bottom:clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.mthb-fig-cap span{padding:7px 11px;border-radius:9px;background:var(--mt-cloud);color:var(--mt-ink);box-shadow:0 8px 20px -12px rgba(0,0,0,.35)}
.mthb-fig-cap span+span{background:var(--mt-ink);color:var(--mt-brass)}
.mthb-fig-cap span+span+span{background:var(--mt-brass);color:var(--mt-ink)}
.mthb-panel{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.4vw,34px);border-radius:28px;background:linear-gradient(160deg,#1b1d22,#111215);color:var(--mt-cloud);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),0 40px 80px -50px #000}
.mthb-screw{position:absolute;top:14px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6a6e78,#2a2d34);box-shadow:inset 0 0 0 1px #0006}
.mthb-screw::after{content:"";position:absolute;left:1.5px;right:1.5px;top:50%;height:1.5px;margin-top:-.75px;background:#15171b;rotate:35deg}
.mthb-screw.a{left:14px}.mthb-screw.b{right:14px}
.mthb-set{margin:0;padding:0;border:0;min-width:0}
.mthb-set legend{margin:0 0 10px;padding:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mthb-seg,.mthb-chips{display:grid;gap:6px}
.mthb-seg{grid-template-columns:repeat(2,minmax(0,1fr));padding:5px;border-radius:15px;background:#0009;box-shadow:inset 0 1px 3px #000}
.mthb-chips{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.mthb-seg label,.mthb-chips label{position:relative;display:block;cursor:pointer}
.mthb-seg input,.mthb-chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.mthb-seg span,.mthb-chips span{display:flex;flex-direction:column;gap:3px;height:100%;border-radius:11px;transition:background .25s,color .25s,box-shadow .25s}
.mthb-seg span{padding:11px 14px}
.mthb-chips span{align-items:center;justify-content:center;padding:12px 4px;text-align:center;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mthb-seg b,.mthb-chips b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:18px;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.mthb-chips b{font-size:17px}
.mthb-seg em,.mthb-chips em{font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut);white-space:nowrap}
.mthb-seg label:hover span,.mthb-chips label:hover span{background:color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mthb-seg input:checked+span{background:var(--mt-cloud);color:var(--mt-ink);box-shadow:0 2px 0 color-mix(in srgb,var(--mt-ink) 30%,transparent)}
.mthb-seg input:checked+span em{color:color-mix(in srgb,var(--mt-ink) 62%,transparent)}
.mthb-chips input:checked+span{background:var(--mt-brass);color:var(--mt-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--mt-brass) 45%,#000)}
.mthb-chips input:checked+span em{color:color-mix(in srgb,var(--mt-ink) 70%,transparent)}
.mthb-seg input:focus-visible+span,.mthb-chips input:focus-visible+span{outline:3px solid var(--mt-cloud);outline-offset:2px}
.mthb-desc{margin:-4px 0 0;min-height:4.5em;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 72%,transparent)}
.mthb-desc b{color:var(--mt-cloud);font-weight:600}
.mthb-pow{display:grid;gap:7px}
.mthb-pow label{position:relative;display:block;cursor:pointer}
.mthb-pow input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.mthb-pow span{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:11px 14px 11px 40px;border-radius:12px;background:color-mix(in srgb,var(--mt-cloud) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 10%,transparent);transition:background .25s,box-shadow .25s}
.mthb-pow span::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mt-cloud) 40%,transparent);transition:box-shadow .2s,background .2s}
.mthb-pow b{grid-column:1;font-size:15px;font-weight:600;line-height:1.3}
.mthb-pow small{grid-column:1;font-size:12.5px;line-height:1.4;color:var(--mt-mut)}
.mthb-pow i{grid-column:2;grid-row:1/span 2;font-style:normal;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:13px;color:color-mix(in srgb,var(--mt-cloud) 80%,transparent)}
.mthb-rec{margin-left:6px;padding:2px 7px;border-radius:99px;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,monospace;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;vertical-align:.12em;white-space:nowrap}
.mthb-pow label:hover span{background:color-mix(in srgb,var(--mt-cloud) 9%,transparent)}
.mthb-pow input:checked+span{background:color-mix(in srgb,var(--mt-brass) 10%,transparent);box-shadow:inset 0 0 0 2px var(--mt-brass)}
.mthb-pow input:checked+span::before{background:var(--mt-brass);box-shadow:inset 0 0 0 4px var(--mt-ink),0 0 0 2px var(--mt-brass)}
.mthb-pow input:focus-visible+span{outline:3px solid var(--mt-cloud);outline-offset:2px}
.mthb-kind{display:flex;align-items:center;gap:8px;margin:-6px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 70%,transparent)}
.mthb-kind::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.mthb-read{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px dashed color-mix(in srgb,var(--mt-cloud) 14%,transparent);border-bottom:1px dashed color-mix(in srgb,var(--mt-cloud) 14%,transparent)}
.mthb-price{display:flex;align-items:flex-start;gap:4px;margin:0;color:var(--mt-brass)}
.mthb-cur{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(24px,2.2vw,32px);line-height:1}
.mthb-price.is-flash .mt-seg{animation:mthbFlash .5s ease}
@keyframes mthbFlash{0%{opacity:.35}100%{opacity:1}}
.mthb-hrs{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0;text-align:right;font-size:14px;line-height:1.35;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent)}
.mthb-hrs b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:20px;letter-spacing:-.02em;color:var(--mt-cloud)}
.mthb-hrs small{margin-top:4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mthb-ship{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;font-size:11px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--mt-cloud) 74%,transparent)}
.mthb-ship li{display:flex;align-items:center;gap:7px}
.mthb-ship li::before{content:"";width:9px;height:5px;flex:none;border-left:2px solid var(--mt-brass);border-bottom:2px solid var(--mt-brass);rotate:-45deg;translate:0 -2px}
.mthb-act{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.mthb-act[hidden],.mthb-act [hidden]{display:none!important}
.mthb-act>.mt-btn{display:flex;width:100%}
.mthb-act .mt-btn .mt-lbl{margin-right:auto}
.mt-btn.is-off{cursor:not-allowed;opacity:.6}
.mt-btn.is-off .mt-cap,.mt-btn.is-off:hover .mt-cap{translate:0 -4px}
.mt-btn.is-off:hover{transform:none}
.mthb-note{margin:0;font-size:13px;line-height:1.5;color:var(--mt-mut)}
.mthb-note a{color:var(--mt-cloud)}
/* every price, and what each size holds (also the page without JavaScript) */
.mthb-all{margin-top:clamp(40px,5vw,64px)}
.mthb-tscroll{position:relative;overflow-x:auto;border-radius:18px;background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
.mthb-t{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:12.5px;letter-spacing:.02em}
.mthb-t th,.mthb-t td{padding:13px 18px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--mt-fog)}
.mthb-t tbody tr:last-child>*{border-bottom:0}
.mthb-t thead th{font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut);background:color-mix(in srgb,var(--mt-bone) 50%,var(--mt-cloud))}
.mthb-t tbody th{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:15px;letter-spacing:-.01em}
.mthb-t tr.is-bb>*{border-top:2px solid var(--mt-ink)}
.mthb-t small{margin-left:4px;font-size:10px;color:var(--mt-mut)}
.mthb-t td a{color:var(--mt-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--mt-brass);text-decoration-thickness:3px;text-underline-offset:4px}
.mthb-t td a:hover{text-decoration-color:var(--mt-ink)}
.mthb-prices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.mthb-t td.is-wrap{white-space:normal;min-width:200px;line-height:1.45}
.mthb-t-soon{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-mut)}
.mthb-tnote{margin:14px 0 0;max-width:860px;font-size:13.5px;line-height:1.6;color:var(--mt-mut)}
/* the reservation form: a card of its own without JavaScript, inside the panel with it */
.mthb-form{display:flex;flex-direction:column;gap:14px}
.mthb-form[hidden]{display:none}
.mthb-rsv-t{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:800;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;line-height:1.1}
.mthb-form .mtct-foot .mt-btn{flex:1 1 auto}
.mthb-done{padding:6px 0}
.mthb-done h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.04em}

/* ---- where it goes ---- */
.mthb-pl{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(100px,11vw,160px) 0}
.mthb-pl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tx fig" "lg fig";grid-template-rows:auto 1fr;column-gap:clamp(30px,5vw,90px);align-items:start}
.mthb-pl-tx{grid-area:tx}
.mthb-legend{grid-area:lg;list-style:none;margin:34px 0 0;padding:0;display:grid;gap:10px;align-content:start}
.mthb-legend li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 7%,transparent);transition:opacity .8s ease calc(200ms + var(--i)*80ms),translate 1s cubic-bezier(.2,.8,.2,1) calc(200ms + var(--i)*80ms)}
.js .mthb-pl:not(.is-on) .mthb-legend li{opacity:0;translate:0 16px}
.mthb-legend b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mt-brass);color:var(--mt-ink);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:14px;font-weight:700}
.mthb-legend li.is-soon b{background:none;color:var(--mt-brass);box-shadow:inset 0 0 0 2px var(--mt-brass)}
.mthb-legend h3{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:3px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:17px;letter-spacing:-.02em;line-height:1.25}
.mthb-legend h3 .mt-soon{margin:0}
.mthb-legend p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--mt-mut)}
.mthb-pl-fig{grid-area:fig;align-self:center;justify-self:center;width:100%;max-width:580px;margin:0}
.mthb-pl-fig svg{width:100%;height:auto;overflow:visible}
.mthb-pl-n{font:700 15px/1 var(--mt-font-m),ui-monospace,monospace;fill:var(--mt-ink);letter-spacing:0}
.mthb-pl-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) .5s}
.js .mthb-pl:not(.is-on) .mthb-pl-draw{stroke-dashoffset:1}
.mthb-pl-lbl,.mthb-pl-soon,.mthb-pl-home,.mthb-pl-wifi,.mthb-pl-arcs,.mthb-pl-glow{transition:opacity .9s ease 1s}
.mthb-pl-soon,.mthb-pl-home{transition-delay:1.5s}
.js .mthb-pl:not(.is-on) :is(.mthb-pl-lbl,.mthb-pl-soon,.mthb-pl-home,.mthb-pl-wifi,.mthb-pl-arcs,.mthb-pl-glow){opacity:0}
.mthb-pl.is-on .mthb-pl-wifi{animation:mthbFlow 1.1s linear infinite}
.mthb-pl.is-on .mthb-pl-arcs path{animation:mthbArc 2.2s ease-in-out infinite;animation-delay:calc(var(--k)*.35s)}
@keyframes mthbFlow{to{stroke-dashoffset:-20}}
@keyframes mthbArc{0%,100%{opacity:.25}50%{opacity:1}}

/* ---- what happens to a clip ---- */
.mthb-fl{position:relative;background:var(--mt-bone);color:var(--mt-ink);padding:clamp(100px,11vw,160px) 0}
.mthb-track{--g:clamp(20px,3vw,48px);--n:64px;position:relative;padding-top:58px}
.mthb-steps{position:relative;z-index:1;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin:0;padding:0}
.mthb-step{display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:opacity .8s ease calc(250ms + var(--i)*140ms),translate 1s cubic-bezier(.2,.8,.2,1) calc(250ms + var(--i)*140ms)}
.js .mthb-fl:not(.is-on) .mthb-step{opacity:0;translate:0 18px}
.mthb-node{display:grid;place-items:center;width:var(--n);height:var(--n);border-radius:50%;background:var(--mt-ink);color:var(--mt-brass);box-shadow:0 0 0 6px var(--mt-bone)}
.mthb-node svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mthb-node.is-hub{background:var(--mt-brass);color:var(--mt-ink)}
.mthb-step.is-soon .mthb-node{background:var(--mt-bone);color:var(--mt-ink);box-shadow:0 0 0 6px var(--mt-bone),inset 0 0 0 2px var(--mt-ink)}
.mthb-st{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:4px 10px 4px 8px;border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mthb-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mthb-st.is-ok{background:color-mix(in srgb,#22c55e 18%,transparent);color:#15803d}
.mthb-st.is-hub{background:var(--mt-ink);color:var(--mt-brass)}
.mthb-st.is-soon{background:var(--mt-brass);color:var(--mt-ink)}
.mthb-step h3{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(21px,1.8vw,26px);letter-spacing:-.03em;line-height:1.12}
.mthb-step p{margin:0;max-width:380px;font-size:15.5px;line-height:1.55;color:var(--mt-mut)}
.mthb-rail{position:absolute;z-index:0;left:calc(var(--n)/2);top:calc(58px + var(--n)/2 - 2px);width:calc((100% + var(--g))*2/3);height:4px;display:flex}
.mthb-rail i{flex:1;height:100%}
.mthb-rail-a{background:linear-gradient(90deg,var(--mt-ink) 0 100%) no-repeat 0 0/var(--rw,100%) 100%,color-mix(in srgb,var(--mt-ink) 12%,transparent);transition:background-size 1.6s cubic-bezier(.6,0,.2,1) .6s}
.js .mthb-fl:not(.is-on) .mthb-rail-a{--rw:0%}
.mthb-rail-b{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--mt-ink) 40%,transparent) 0 8px,transparent 8px 16px)}
.mthb-tag{position:absolute;z-index:2;top:0;left:calc(var(--n)/2);display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:9px;background:var(--mt-ink);color:var(--mt-cloud);font-size:11px;letter-spacing:.04em;white-space:nowrap;translate:-24px 0;transition:left 1.6s cubic-bezier(.6,0,.2,1) .6s}
.mthb-tag::after{content:"";position:absolute;left:24px;top:100%;width:2px;height:12px;margin-left:-1px;background:var(--mt-ink)}
.mthb-tag i{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px #ef4444}
.mthb-fl.is-on .mthb-tag,html:not(.js) .mthb-tag{left:calc(var(--n)/2 + (100% + var(--g))/3)}
.mthb-fl.is-on .mthb-tag i{background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass);transition:background .3s 2.2s,box-shadow .3s 2.2s}
.mthb-urgent{display:flex;align-items:center;gap:14px;max-width:880px;margin:clamp(40px,5vw,64px) 0 0;padding:16px 20px;border-radius:16px;background:var(--mt-cloud);font-size:15.5px;line-height:1.55;color:var(--mt-mut);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--mt-ink) 8%,transparent)}
.mthb-urgent .mt-soon{margin:0;flex:none}
.mthb-urgent b{color:var(--mt-ink)}

/* ---- compare (mtcp) ---- */
.mthb-cp .mtcp-t{min-width:0}
.mthb-cp .mtcp-t th:first-child{width:34%}
.mthb-cp .mtcp-sub{max-width:720px}

/* ---- in the box and specs ---- */
.mthb-bx{position:relative;background:var(--mt-night);color:var(--mt-cloud);padding:clamp(100px,11vw,160px) 0}
.mthb-bx-fig{position:relative;margin:0 0 clamp(40px,5vw,64px);border-radius:28px;overflow:hidden;background:#07080a;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 6%,transparent);transition:opacity 1s ease,translate 1.2s cubic-bezier(.2,.8,.2,1)}
.js .mthb-bx-fig[data-reveal]:not(.is-in){opacity:0;translate:0 40px}
.mthb-bx-fig img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.mthb-bx-fig figcaption{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,22px);padding:7px 11px;border-radius:9px;background:#000a;color:color-mix(in srgb,var(--mt-cloud) 78%,transparent);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.mthb-bx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.mthb-kits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px);margin-bottom:clamp(20px,2.4vw,32px)}
.mthb-kit{display:flex;flex-direction:column;border-radius:26px;background:var(--mt-pine);overflow:hidden;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent),0 40px 80px -50px #000;transition:opacity .9s ease,translate 1.1s cubic-bezier(.2,.8,.2,1)}
.js .mthb-kit[data-reveal]:not(.is-in){opacity:0;translate:0 36px}
.mthb-kit-stage{position:relative;aspect-ratio:16/10;background:var(--hb-stage);overflow:hidden}
.mthb-kit-stage img{position:absolute;width:100%;height:auto;left:0;top:50%;translate:0 -50%}
.mthb-kit-stage.is-pair .mthb-kit-a{width:74%;left:-4%;top:40%}
.mthb-kit-stage.is-pair .mthb-kit-b{width:58%;left:auto;right:-3%;top:62%}
.mthb-kit-tag{position:absolute;right:16px;top:16px;padding:6px 10px;border-radius:9px;background:#000a;color:color-mix(in srgb,var(--mt-cloud) 86%,transparent);font-family:var(--mt-font-m),ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.mthb-kit h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 22px 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.mthb-kit h3 span{font-size:.8em;color:var(--mt-brass)}
.mthb-inc{list-style:none;display:grid;gap:8px;margin:14px 22px 24px;padding:0}
.mthb-inc li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--mt-cloud) 82%,transparent)}
.mthb-inc li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:2px solid var(--mt-brass);border-bottom:2px solid var(--mt-brass);rotate:-45deg}
.mthb-adds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px);margin-bottom:clamp(40px,5vw,64px)}
.mthb-add{padding:clamp(20px,2.2vw,28px);border-radius:22px;background:color-mix(in srgb,var(--mt-cloud) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mthb-add .mthb-h3 small{margin-left:8px;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mut)}
.mthb-addl{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mthb-addl li{display:grid;grid-template-columns:minmax(80px,.32fr) minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 10%,transparent)}
.mthb-addl b{font-weight:600;font-size:15.5px}
.mthb-addl span{font-size:14px;line-height:1.45;color:var(--mt-mut)}
.mthb-addl i{font-style:normal;font-family:var(--mt-font-m),ui-monospace,monospace;font-size:13.5px;color:var(--mt-cloud)}
.mthb-addl li.is-rec b{color:var(--mt-brass)}
.mthb-add-n{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--mt-mut)}
.mthb-add-n b{color:var(--mt-cloud);font-weight:600}
.mthb-add-n .mt-soon{margin-left:2px}
.mthb-specs{margin:0;border-top:1px solid color-mix(in srgb,var(--mt-cloud) 12%,transparent)}
.mthb-specs div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--mt-cloud) 12%,transparent)}
.mthb-specs dt{padding-top:3px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-mut)}
.mthb-specs dd{margin:0;font-size:15.5px;line-height:1.5}
.mthb-specs dd .mt-soon{margin-left:4px}
.mthb-cap{margin-top:0}
.mthb-bx .mthb-tscroll{background:var(--mt-pine);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mthb-bx .mthb-t{min-width:0}
.mthb-bx .mthb-t th,.mthb-bx .mthb-t td{border-bottom-color:color-mix(in srgb,var(--mt-cloud) 8%,transparent)}
.mthb-bx .mthb-t thead th{background:color-mix(in srgb,#000 25%,var(--mt-pine))}
.mthb-cap-t td{width:40%;font-size:14px;color:var(--mt-cloud)}
.mthb-cap-t td i{display:block;height:6px;width:var(--w);min-width:6px;margin-bottom:8px;border-radius:3px;background:var(--mt-brass);box-shadow:0 0 10px color-mix(in srgb,var(--mt-brass) 50%,transparent);transform-origin:0 50%;transition:scale 1.2s cubic-bezier(.2,.8,.2,1) .2s}
.js .mthb-bx:not(.is-on) .mthb-cap-t td i{scale:0 1}
.mthb-cap-t td+td i{background:var(--mt-cloud);box-shadow:none}
.mthb-bx .mthb-tnote{color:var(--mt-mut)}

/* ---- Community edition ---- */
.mthb-cm{position:relative;background:var(--mt-cloud);color:var(--mt-ink);padding:clamp(90px,10vw,150px) 0}
.mthb-cm-card{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(26px,4vw,60px);border-radius:32px;background-color:var(--mt-brass);background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--mt-ink) 16%,transparent) 1.2px,transparent 1.6px);background-size:18px 18px;overflow:hidden;box-shadow:0 50px 90px -60px rgba(0,0,0,.55),inset 0 -4px 0 color-mix(in srgb,var(--mt-ink) 14%,transparent);transition:opacity 1s ease,translate 1.2s cubic-bezier(.2,.8,.2,1)}
.js .mthb-cm:not(.is-on) .mthb-cm-card{opacity:0;translate:0 40px}
.mthb-cm-soon{margin:0 0 20px}
.mthb-cm-soon .mt-soon{margin:0;padding:5px 12px;font-size:11px;background:var(--mt-ink);color:var(--mt-brass)}
.mthb-cm .mt-hd{color:var(--mt-ink)}
.mthb-cm .mt-fl:last-child{background:var(--mt-cloud);color:var(--mt-ink)}
.mthb-cm-lede{margin:18px 0 0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.15}
.mthb-cm-d{margin:12px 0 0;max-width:540px;font-size:16.5px;line-height:1.6;color:color-mix(in srgb,var(--mt-ink) 78%,transparent)}
.mthb-cm-list{list-style:none;display:grid;gap:8px;margin:22px 0 0;padding:0;font-weight:600}
.mthb-cm-list li{display:flex;align-items:center;gap:12px}
.mthb-cm-list i{width:9px;height:9px;flex:none;background:var(--mt-ink);rotate:45deg}
.mthb-cm-box{padding:clamp(22px,2.4vw,32px);border-radius:24px;background:var(--mt-ink);color:var(--mt-cloud);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.mthb-cm-box .mtct-note a{color:var(--mt-cloud)}

/* ---- preorder terms ---- */
.mthb-tm{position:relative;background:var(--mt-cloud);color:var(--mt-ink);padding:clamp(90px,10vw,140px) 0 clamp(100px,11vw,160px)}
.mthb-tm:has(+ .mtk){padding-bottom:calc(clamp(100px,11vw,160px) + 9vw)}
.mthb-tm-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,5vw,90px);align-items:start}
.mthb-tm-side{position:sticky;top:110px}
.mthb-tm-h{margin:0;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:clamp(36px,3.6vw,56px);letter-spacing:-.04em;line-height:1}
.mthb-tm-draft{display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;padding:7px 12px 7px 10px;border-radius:8px;background:var(--mt-ink);color:var(--mt-brass);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mthb-tm-draft i{width:8px;height:8px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 8px var(--mt-brass)}
.mthb-tm-by{margin:18px 0 0;max-width:320px;font-size:14.5px;line-height:1.55;color:var(--mt-mut)}
.mthb-tm-by a{color:var(--mt-ink)}
.mthb-tm-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--mt-fog)}
.mthb-tm-list li{display:grid;grid-template-columns:minmax(150px,.36fr) minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--mt-fog)}
.mthb-tm-list b{font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;font-weight:var(--mt-font-dw);font-size:18px;letter-spacing:-.02em;line-height:1.3}
.mthb-tm-list p{margin:0;font-size:16px;line-height:1.6;color:var(--mt-mut)}

/* ---- narrower screens ---- */
@media (max-width:1099px){
  .mthb-hgrid{grid-template-columns:minmax(0,1fr)}
  .mthb-models{max-width:760px}
  .mthb-cfg{grid-template-columns:minmax(0,1fr)}
  .mthb-fig{position:relative;top:0}
}
@media (max-width:899px){
  .mthb-bx-grid,.mthb-cm-card,.mthb-tm-grid,.mthb-kits,.mthb-adds,.mthb-prices{grid-template-columns:minmax(0,1fr)}
  .mthb-cap{margin-top:clamp(32px,6vw,48px)}
  .mthb-pl-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"tx" "fig" "lg";grid-template-rows:auto}
  .mthb-pl-fig{max-width:520px;margin-top:28px}
  .mthb-tm-side{position:relative;top:0}
  .mthb-steps{grid-template-columns:minmax(0,1fr);gap:34px}
  .mthb-rail,.mthb-tag{display:none}
  .mthb-track{padding-top:0}
  .mthb-step{display:grid;grid-template-columns:var(--n) minmax(0,1fr);column-gap:18px;row-gap:8px;position:relative}
  .mthb-step>*:not(.mthb-node){grid-column:2}
  .mthb-node{grid-row:1/span 3}
  .mthb-step .mthb-st{margin-top:0;justify-self:start}
  .mthb-step:not(:last-child)::before{content:"";position:absolute;left:calc(var(--n)/2 - 2px);top:var(--n);bottom:-34px;width:4px;background:var(--mt-ink)}
  .mthb-step:nth-child(2)::before{background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--mt-ink) 40%,transparent) 0 8px,transparent 8px 16px)}
}
@media (max-width:699px){
  .mthb-hero .mt-hd{font-size:clamp(46px,14vw,64px)}
  .mthb-line{font-size:clamp(24px,7vw,30px)}
  .mthb-models{gap:10px}
  .mthb-mc-a{border-radius:18px;padding-bottom:14px}
  .mthb-mc-st{margin:0 12px;font-size:9px;letter-spacing:.06em;padding:3px 8px 3px 7px}
  .mthb-mc-nm{margin:10px 12px 0;font-size:16px}
  .mthb-mc-d{margin:5px 12px 0;font-size:12.5px}
  .mthb-mc-p{margin:auto 12px 0;padding-top:10px;font-size:10px}
  .mthb-mc-p b{font-size:18px}
  .mthb-diy{font-size:13.5px}
  .mthb-cf .mt-hd,.mthb-pl .mt-hd,.mthb-fl .mt-hd,.mthb-bx .mt-hd{font-size:clamp(40px,11vw,52px)}
  .mthb-cm .mt-hd{font-size:clamp(40px,12vw,54px)}
  .mthb-fig{border-radius:22px}
  .mthb-bx-fig figcaption{position:static;display:block;border-radius:0;background:#07080a;padding:10px 14px 12px}
  .mthb-panel{border-radius:22px;padding:22px 16px 20px}
  .mthb-chips{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mthb-pow span{padding:10px 12px 10px 36px}
  .mthb-pow span::before{left:12px}
  .mthb-chips b{font-size:15px}
  .mthb-chips em{font-size:9.5px;letter-spacing:.04em}
  .mthb-seg b{font-size:16px}
  .mthb-seg em{white-space:normal;line-height:1.35}
  .mthb-fig-cap{left:10px;right:10px;bottom:10px;gap:5px;font-size:9.5px}
  .mthb-fig-cap span{padding:5px 8px;border-radius:7px}
  .mthb-seg span{padding:10px 11px}
  .mthb-read{flex-wrap:wrap;align-items:flex-end}
  .mthb-hrs{align-items:flex-start;text-align:left;width:100%}
  .mthb-hrs{font-size:13px}
  .mthb-hrs b{font-size:18px}
  .mthb-t th,.mthb-t td{padding:11px 12px}
  .mthb-bx .mthb-t th,.mthb-bx .mthb-t td{padding:11px 12px}
  .mthb-specs div{grid-template-columns:minmax(0,1fr);gap:4px}
  .mthb-addl li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .mthb-addl span{grid-column:1/-1;grid-row:2}
  .mthb-kit h3{margin:18px 16px 0}
  .mthb-inc{margin:12px 16px 20px}
  .mthb-add{padding:18px 16px}
  .mthb-cm-card{border-radius:24px;padding:24px 18px}
  .mthb-cm-box{padding:20px 16px}
  .mthb-tm-list li{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
  .mthb-cp .mtcp-t th:first-child{width:38%}
  .mthb-cp .mtcp-t tbody th,.mthb-cp .mtcp-t tbody td{padding:13px 12px;font-size:14px}
  .mthb-cp .mtcp-t thead th{padding:14px 12px}
  .mthb-cp .mtcp-t thead th b{font-size:18px}
  .mthb-urgent{align-items:flex-start;flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .mthb-pl-wifi,.mthb-pl-arcs path{animation:none!important}
  .mthb-tag{transition:none}
}

/* ---- 48-homegfx.css ---- */
/* 48 · Home page graphics: the frames on the step cards (mtw) and the example scenarios (mtc) wear the app's own
   recording HUD (hx: corner brackets, the red REC pill, the clock over the date, yellow seven-segment speed, the
   speed-limit sign, the place), and the Cloud and Hub cards (mtch) show the new portal and the Hub renders on a stage.
   Pictures are original 3D renders, real app captures and the licensed road footage, in assets/home/. */

/* ---- the HUD language, shared */
.hx{font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#fff}
.hx-c{position:absolute;width:20px;height:20px;border:1.5px solid rgba(255,255,255,.62);pointer-events:none}
.hx-c.tl{left:-6px;top:-6px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.hx-c.tr{right:-6px;top:-6px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.hx-c.bl{left:-6px;bottom:-6px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.hx-c.br{right:-6px;bottom:-6px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.hx-rec{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:5px;background:rgba(239,68,68,.94);color:#fff;font-weight:700;letter-spacing:.1em;text-shadow:none;white-space:nowrap}
.hx-rec i{width:6px;height:6px;flex:none;border-radius:50%;background:#fff;animation:mtLed 1.2s ease-in-out infinite}
.hx-rec.is-y{background:var(--mt-brass);color:#101114}
.hx-rec.is-y i{background:#101114}
.hx-rec.is-o{background:rgba(10,11,14,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.hx-rec.is-o i{background:var(--mt-brass);animation:none}
.hx-tag{display:inline-flex;align-items:center;margin-left:5px;padding:3px 7px;border-radius:5px;background:var(--mt-brass);color:#101114;font-weight:700;letter-spacing:.1em;text-shadow:none;white-space:nowrap}
.hx-clk{display:grid;justify-items:end;gap:2px;white-space:nowrap}
.hx-clk b{font-size:1.3em;font-weight:600;letter-spacing:.03em}
.hx-clk small{font-size:.92em;letter-spacing:.12em;opacity:.85}
.hx-spd{display:inline-flex;align-items:flex-end;gap:5px;color:var(--mt-brass);white-space:nowrap}
.hx-spd .mt-seg{--s:24px}
.hx-spd .mt-seg-d path{fill:color-mix(in srgb,currentColor 16%,transparent)}
.hx-spd .mt-seg-d path.on{fill:currentColor;filter:drop-shadow(0 0 4px color-mix(in srgb,currentColor 55%,transparent))}
.hx-spd small{font-size:.9em;font-weight:600;letter-spacing:.14em;color:#fff}
.hx-lim{display:inline-grid;justify-items:center;align-self:center;margin-left:4px;padding:3px 4px 2px;border-radius:4px;background:#fff;color:#101114;box-shadow:inset 0 0 0 1.3px #101114,0 0 0 1.3px #fff;font-family:var(--mt-font-d),Inter,-apple-system,Arial,sans-serif;line-height:1;text-shadow:none}
.hx-lim b{font-size:5px;font-weight:800;letter-spacing:.02em;text-align:center}
.hx-lim em{margin-top:1px;font-style:normal;font-size:14px;font-weight:850;letter-spacing:-.03em}
.hx-place{font-family:var(--mt-font-b),Inter,-apple-system,Arial,sans-serif;font-weight:600;font-size:1.18em;letter-spacing:0}
.hx-dim{opacity:.8;letter-spacing:.1em}
.hx-trip{display:grid;gap:1px;margin-bottom:6px;white-space:nowrap}
.hx-trip small{font-size:.9em;letter-spacing:.14em;opacity:.8}
.hx-trip b{font-size:1.7em;font-weight:700;letter-spacing:.02em;color:var(--mt-brass)}
.hx-g{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hx-g i{position:relative;width:18px;height:18px;flex:none;border:1.3px solid rgba(255,255,255,.75);border-radius:50%}
.hx-g i::after{content:"";position:absolute;left:62%;top:30%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--mt-brass);box-shadow:0 0 6px var(--mt-brass)}
.hx-g b{font-weight:700}

/* ---- step cards: a photo in the frame, the HUD over it */
.mtw-img.hx-photo{object-fit:cover;object-position:50% 50%}
.mtw-hud.hx{inset:20px;font-size:10px}
.mtw-hud.hx .hx-c.tl{left:-8px;top:-8px}.mtw-hud.hx .hx-c.tr{right:-8px;top:-8px}.mtw-hud.hx .hx-c.br{right:-8px;bottom:-8px}
.mtw-hud.hx .mtw-tl{gap:6px}
.mtw-hud.hx .mtw-ts{margin:7px 0 auto;opacity:.85;letter-spacing:.1em}
.mtw-hud.hx .mtw-br{gap:3px}
.mtw-hud.hx .mtw-br>b{font-size:1.1em;letter-spacing:.08em}
.mtw-hud.hx .hx-c.bl{display:none}   /* the step's chip sits in that corner */
.mtw-step.s0 .mtw-mask{background:#050506}
.mtw-step.s2 .mtw-mask{background:#050507}
.mtw-hud.hx .hx-spd .mt-seg{--s:30px}
.mtw-hud.hx .hx-lim em{font-size:16px}
.mtw-hud.hx .hx-lim b{font-size:5.5px}
@container mtw (max-width:300px){ .mtw-hud.hx{inset:14px} .mtw-hud.hx .hx-spd .mt-seg{--s:22px} .mtw-hud.hx .hx-place{font-size:1em} }

/* ---- example scenarios: a photo in the frame, the HUD over it */
.mtc-ph.hx-ph{container:mtc / inline-size;background:#0b0c10}
.mtc-art.hx-photo{object-fit:cover;object-position:50% 50%}
.mtc-hud.hx{inset:9px;padding:6px 7px;font-size:9px;letter-spacing:.06em}
.mtc-hud.hx>span{align-items:flex-end}
.mtc-hud.hx>span:first-of-type{align-items:flex-start}
.mtc-hud.hx .hx-c{width:16px;height:16px;border-width:1.3px}
.mtc-hud.hx .hx-c.tl{left:-3px;top:-3px}.mtc-hud.hx .hx-c.tr{right:-3px;top:-3px}
.mtc-hud.hx .hx-c.bl{left:-3px;bottom:-3px}.mtc-hud.hx .hx-c.br{right:-3px;bottom:-3px}
.mtc-hud.hx .hx-spd .mt-seg{--s:21px}
.mtc-hud.hx .hx-bl{display:grid;gap:3px;justify-items:start;line-height:1.45}
.mtc-hud.hx .hx-br{display:grid;gap:5px;justify-items:end}
.mtc-hud.hx .hx-top{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px}
.mtc-hud.hx .hx-top .hx-tag{margin-left:0}
@container mtc (max-width:250px){ .mtc-hud.hx{font-size:8px} .mtc-hud.hx .hx-spd .mt-seg{--s:17px} .mtc-hud.hx .hx-lim em{font-size:12px} .mtc-hud.hx .hx-trip b{font-size:1.5em} }

/* ---- Cloud and Hub */
.mtch-win .mtch-shot{object-position:0 0}
.mtch-stage{background:radial-gradient(70% 62% at 50% 0,color-mix(in srgb,var(--mt-brass) 16%,transparent),transparent 70%),radial-gradient(60% 30% at 50% 78%,rgba(255,255,255,.07),transparent 70%),linear-gradient(180deg,#121317 0,#0b0c0f 58%,#16171b 58.2%,#0d0e11 100%)}
.mtch-stage::before{content:"";position:absolute;left:8%;right:8%;top:58%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.mtch-stage img{position:absolute;height:auto;max-width:none;user-select:none;pointer-events:none}
.mtch-stage .mtch-hb{right:1%;bottom:21%;width:52%;filter:brightness(.78) saturate(.9)}
.mtch-stage .mtch-hc{left:2%;bottom:-3%;width:70%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.mtch-chip{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:99px;background:rgba(16,17,20,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-family:var(--mt-font-m),ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;color:var(--mt-cloud);white-space:nowrap}
.mtch-chip i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
@media (max-width:420px){ .mtch-chip{left:10px;top:10px;font-size:9.5px;padding:5px 9px} }

/* ---- 49-spin.css ---- */
/* 49 · Icon spin (ic-spin): the first time an icon tile scrolls into view its glyph turns twice (720°) with a smooth
   ease-out and settles at 0°. js/49-spin.js adds .is-spun once per tile and staggers a grid 80 ms apart. The glyph turns,
   not the tile, so the tile's shadow stays put. Off screen it pauses with everything else (.mt-off, 00-core.css); with
   reduced motion it never runs. */
.ic-spin>svg{transform-origin:50% 50%}
.ic-spin.is-spun>svg{animation:icSpin 1.2s cubic-bezier(.12,.72,.18,1) var(--spin-d,0ms) backwards}
@keyframes icSpin{from{transform:rotate(0deg)}to{transform:rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.ic-spin.is-spun>svg{animation:none}}

/* ---- 99-legacy.css ---- */
/* 99 · Older browsers (Safari and iOS before 16: no color-mix(), no container units). Nothing here applies to a
   browser that has them. Where a color-mix() value is dropped, the earlier value or the browser's default button
   colours show instead (white text on white, a see-through header over the page); these give the same colours as
   plain rgba. Where container units are dropped, a phone on its side has no size at all and the stamp and screen
   mock-ups lose their proportions; --cq here stands for 1% of that container's width. Keep them in step with the
   rules they shadow: 02-header, 26-mtfq, 28-mtsg, 29-mtlw, 29a-appA, 29b-appB and 02c-device. */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .mthd.is-solid .mthd-bar{background:rgba(236,234,227,.9)}
  .mthd.is-dark.is-solid .mthd-bar{background:rgba(16,17,20,.82)}
  .mthd.is-mega .mthd-bar{background:var(--mt-bone)}
  .mthd-nav ul{background:rgba(255,255,255,.55)}
  .mthd.is-dark .mthd-nav ul{background:rgba(16,17,20,.4)}
  .mthd.is-mega .mthd-nav ul{background:var(--mt-cloud)}
  .mtlw-bar{background:rgba(236,234,227,.92)}
  @media (max-width:809px){.mtfq-side,.mtsg-rail{background:#1b1e23}}
  .apa-seg-ctl button{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .mttr:not(.mt-dark) .apa-seg-ctl button{background:var(--mt-cloud);box-shadow:inset 0 0 0 1px var(--mt-fog)}
  .mttr:not(.mt-dark) .apa-seg-ctl button[aria-pressed="true"],.apa-seg-ctl button[aria-pressed="true"]{box-shadow:none}
  .apb-mp-tabs button{color:rgba(255,255,255,.7)}
  .apb-mp-tabs button:hover{color:var(--mt-cloud)}
  .apb-mp-tabs button[aria-pressed="true"]{color:var(--mt-ink)}
  .mt-dark .apb-rows>div{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
  .mt-dark .apb-rows dt .ico,.mt-dark .apb-rows dt>span{background:rgba(255,255,6,.14)}
}
@supports not (width:1cqw){
  /* a phone on its side: the body is the frame's height wide and its width tall (then turned), the view the
     screen's height wide and its width tall (719/1500 and 1206/2622 are the frame's and the screen's proportions) */
  .dvc.is-land .dvc-body{width:47.9333%;height:208.6231%}
  .dvc.is-land .dvc-view{width:217.4129%;height:45.9954%}
  /* 1% of a phone screen (the screen is 92.62% of the phone's width), of the stamp frame and of the clips mock-up */
  .dvc-scr{--cq:calc(var(--dw) * .009262)}
  .apa-frame,.apb-frame-in{--cq:calc((min(100vw,1632px) - 112px) / 100)}
  .apb-cl-vid{--cq:5.5px}
  @media (max-width:1099px){.apa-frame,.apb-frame-in{--cq:calc((100vw - 64px) / 100)}}
  @media (max-width:809px){.apb-cl-vid{--cq:2.98px}}
  @media (max-width:699px){.apa-frame,.apb-frame-in{--cq:calc((100vw - 40px) / 100)}}
  .apa-band{padding:calc(1.35*var(--cq)) calc(2.5*var(--cq)) calc(1.5*var(--cq));gap:calc(.5*var(--cq));text-shadow:0 0 calc(.35*var(--cq)) #000,0 0 calc(.1*var(--cq)) #000}
  .apa-band p{gap:calc(1.3*var(--cq));font-size:max(9px,calc(1.6*var(--cq)))}
  .apa-band .r{gap:calc(2.2*var(--cq))}
  .apa-band .rec{gap:calc(.9*var(--cq))}
  .apa-band .rec::before{width:calc(1.15*var(--cq));height:calc(1.15*var(--cq))}
  .apa-band .loc{font-size:max(8px,calc(1.36*var(--cq)))}
  .apa-mark{right:calc(3*var(--cq));bottom:calc(100% + 1.4*var(--cq));gap:calc(.9*var(--cq));font-size:max(9px,calc(2.3*var(--cq)))}
  .apa-tp-rec{gap:calc(4*var(--cq));font-size:calc(16*var(--cq))}
  .apa-tp-rec i{width:calc(6.5*var(--cq));height:calc(6.5*var(--cq))}
  .apa-tp-t{margin-top:calc(2*var(--cq));font-size:calc(7.4*var(--cq))}
  .apa-tp-c{margin-top:calc(4*var(--cq));font-size:calc(3.2*var(--cq))}
  .apa-tp-b{margin-top:calc(2*var(--cq));font-size:calc(3*var(--cq))}
  .apa-hold{gap:calc(2.5*var(--cq));height:calc(13.4*var(--cq));padding:0 calc(5.5*var(--cq));font:700 calc(3.7*var(--cq))/1 var(--mt-font-b),system-ui,sans-serif}
  .apa-hold svg{width:calc(4.4*var(--cq));height:calc(4.4*var(--cq))}
  .apa-tp-open{gap:calc(3*var(--cq));padding:calc(10*var(--cq))}
  .apa-tp-open b{font-size:calc(8*var(--cq))}
  .apa-tp-open span{font-size:calc(3.3*var(--cq))}
  .apa-tp-open i{width:calc(12*var(--cq));height:calc(12*var(--cq));font-size:calc(6*var(--cq))}
  .apb-cl-vid .apb-band{font-size:calc(2.05*var(--cq))}
  .apb-cl-vid .apb-mark{font-size:calc(3.1*var(--cq));bottom:calc(11.4*var(--cq))}
  .apb-frame-in .apb-band{font-size:clamp(7px,1.55*var(--cq),19px)}
  .apb-frame-in .apb-mark{font-size:clamp(9px,2.2*var(--cq),26px);bottom:calc(clamp(7px,1.55*var(--cq),19px) * 4.9)}
  @media (max-width:640px){.apb-frame-in .apb-band{font-size:clamp(8px,2.45*var(--cq),13px)} .apb-frame-in .apb-mark{bottom:calc(clamp(8px,2.45*var(--cq),13px) * 5.6)}}
}