/* Mimic Pilot website · direction C "Route", depth pass (2026-09-29).
   Product pieces use the app tokens (Shell/ShellTheme.xaml). Depth follows the Store images:
   out-of-focus context at the back, one sharp piece turned slightly in 3D, the strip in front,
   out-of-focus route markers nearest, and a warm light behind. */
:root{
  --bg:#0D0D10; --panel:#141418; --panel-2:#1B1B21; --edge:#24242A; --edge-2:#3A3A42;
  --text:#F3F3F5; --soft:#A5A5B0; --mute:#6E6E78;
  --pill:#16161A; --raise:#232329; --hover:#2B2B32; --line:#34343C; --pmute:#9A9AA5;
  --accent:#FF5A36; --rec:#FF3B5C; --ready:#35D07F;
  --ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","Cascadia Code",ui-monospace,"SF Mono",Consolas,monospace;
  --spring:cubic-bezier(.3,1.25,.5,1);
  --glide:cubic-bezier(.22,.8,.26,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:96px}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.08)}
h1,h2,h3{text-wrap:balance}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
a{color:inherit}
img,svg{display:block}
code{font:.92em var(--mono);background:var(--panel-2);padding:2px 6px;border-radius:6px}
small{font-size:14.5px;color:var(--mute)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative}
.label{font:600 14px/1.4 var(--ui);color:var(--mute)}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px;z-index:10}
.skip-link:focus{top:12px}

/* Buttons */
.btn-site{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:15.5px;text-decoration:none;border:0;cursor:pointer;background:var(--text);color:#16161A;transition:transform .15s ease,filter .15s ease}
.btn-site:hover{filter:brightness(1.08)}
.btn-site:active{transform:translateY(1px)}
.btn-site.o{background:var(--accent);color:#16161A}
.btn-site.ghost{background:transparent;color:var(--text);box-shadow:0 0 0 1.5px var(--edge-2) inset}
.btn-site.light{height:40px;padding:0 18px;font-size:14.5px}
.btn-site.disabled,.btn-site.o.disabled{background:var(--raise);color:var(--soft);cursor:default;filter:none;transform:none}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Header & footer */
/* Header. At the top of the page it has no surface, so the hero's light runs up behind it; once the page
   scrolls it becomes a dark bar with the site's only blur and compacts. The classes come from site.js;
   without scripts the header is always the solid bar. Transitions only run after the first frame (.ready). */
.site-header{position:sticky;top:0;z-index:20;background:rgba(13,13,16,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.site-header.at-top{background:rgba(13,13,16,0);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(255,255,255,0)}
.site-header.ready{transition:background .35s ease,box-shadow .35s ease}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:24px;pointer-events:none}
.header-inner{display:flex;align-items:center;height:72px;gap:28px}
.at-top .header-inner{height:96px}
.ready .header-inner{transition:height .4s var(--glide)}
.brand{display:flex;align-items:center;gap:13px;font:700 22px/1 var(--display);letter-spacing:-.015em;text-decoration:none;margin-right:auto;border-radius:10px}
.brand .mp-logo{width:40px;height:40px}
.at-top .brand{font-size:25px}
.at-top .brand .mp-logo{width:46px;height:46px}
.ready .brand{transition:font-size .4s var(--glide)}
.ready .brand .mp-logo{transition:width .4s var(--glide),height .4s var(--glide)}
.footer-brand .brand{font-size:25px}.footer-brand .brand .mp-logo{width:46px;height:46px}
#main-nav{display:flex;align-items:center;gap:36px}
.nav-links{display:flex;align-items:center;gap:30px}
/* Links read like the app's drawer tabs: text, and a 2 px underline in the text colour for the current page. */
.nav-links a{position:relative;padding:8px 0;font-size:15.5px;font-weight:500;color:var(--soft);text-decoration:none;transition:color .2s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--glide)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--text)}
.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-dl{height:42px;padding:0 18px;font-size:15px;gap:9px}
.menu-toggle{display:none;align-items:center;gap:10px;height:42px;padding:0 14px 0 12px;border:0;border-radius:10px;background:var(--raise);color:var(--text);font:600 15px var(--ui);cursor:pointer;transition:background .2s ease}
.menu-toggle:hover{background:var(--hover)}
.menu-toggle .bars{position:relative;width:18px;height:12px}
.menu-toggle .bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--glide),top .3s var(--glide)}
.menu-toggle .bars i:first-child{top:2px}.menu-toggle .bars i:last-child{top:8px}
.menu-toggle[aria-expanded="true"] .bars i{top:5px}
.menu-toggle[aria-expanded="true"] .bars i:first-child{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars i:last-child{transform:rotate(-45deg)}
.site-header.menu-open{background:var(--bg);box-shadow:0 1px 0 var(--edge);-webkit-backdrop-filter:none;backdrop-filter:none}
html.menu-lock{overflow:hidden}
.site-footer{border-top:1px solid var(--edge);margin-top:40px}
.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-top:48px;padding-bottom:40px}
.footer-main p{color:var(--mute);font-size:15px;margin:14px 0 0}
.footer-main nav{display:grid;gap:10px;align-content:start}
.footer-main nav a{color:var(--soft);text-decoration:none;font-size:15px}
.footer-main nav a:hover{color:var(--text)}
.footer-main nav .label{margin:0 0 4px}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:40px;border-top:1px solid var(--edge);color:var(--mute);font-size:13.5px}

/* ── Product pieces */
.mp-logo{flex:none}
.ic{width:16px;height:16px;flex:none}
.cur{width:22px;height:32px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.pill{font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;height:58px;padding:0 10px 0 20px;border-radius:999px;background:var(--pill);color:var(--text);
  font:500 15px/1 var(--ui);white-space:nowrap;box-shadow:0 22px 44px -14px rgba(0,0,0,.7),0 0 0 1px var(--line) inset}
.pill .seg{display:flex;align-items:center;gap:8px;padding:0 14px;height:100%}
.pill .seg.logo{padding-left:0}
.pill .status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ready)}
.pill .status.run::before{background:var(--accent);box-shadow:0 0 0 4px rgba(255,90,54,.25)}
.pill .status.rec::before{background:var(--rec);box-shadow:0 0 0 4px rgba(255,59,92,.25)}
.pill .div{width:1px;height:26px;background:var(--line)}
.pill .val{font-weight:600}
.pill .caret{display:inline-flex;align-items:center}
.pill .caret::after{content:"";width:5px;height:5px;margin:-3px 0 0 6px;border:solid var(--pmute);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pill .mute{color:var(--pmute);font-weight:400}
.pill .btn{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 18px;margin-left:6px;border-radius:999px;background:var(--raise);font-weight:600}
.pill .btn.go{background:var(--accent);color:#16161A}
.pill .btn.rec{background:rgba(255,59,92,.16);color:#FF8FA3}
.ico-play{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.ico-stop{width:11px;height:11px;border-radius:2px;background:currentColor}
.ico-rec{width:10px;height:10px;border-radius:50%;background:var(--rec);flex:none}
.pill .key{font:600 11px/1 var(--ui);padding:4px 7px;border-radius:6px;background:var(--line)}
.pill .btn.go .key{background:rgba(22,22,26,.16)}
.pill .btn.rec .key{background:rgba(255,59,92,.22)}
.pill .more{display:flex;gap:3px;padding:0 14px}.pill .more i{width:4px;height:4px;border-radius:50%;background:var(--pmute)}
.pill.light{background:#fff;color:#16161A;box-shadow:0 18px 40px -14px rgba(0,0,0,.5),0 0 0 1px #E3E3E8 inset}
.pill.light .div{background:#E3E3E8}.pill.light .btn:not(.go){background:#F1F1F4}.pill.light .btn:not(.go) .key{background:#E3E3E8}
.pop{background:var(--pill);color:var(--text);border-radius:18px;padding:16px;font:14px/1.35 var(--ui);width:100%;max-width:340px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px var(--line) inset}
.cap{font:600 12.5px/1 var(--ui);color:var(--pmute);margin:2px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 13px;border-radius:999px;background:var(--raise);font:500 13px/1 var(--ui)}
.chip.on{background:var(--text);color:#16161A}
.field{display:flex;align-items:center;gap:10px;margin-top:12px}
.field .box{flex:1;height:38px;border-radius:10px;background:var(--raise);box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;padding:0 12px;font:600 15px var(--mono)}
.field .unit{color:var(--pmute);font-size:13px}
.cbx{display:inline-flex;align-items:center;gap:9px;font-size:13.5px}
.cbx i{width:18px;height:18px;border-radius:6px;background:var(--raise);box-shadow:0 0 0 1px var(--line) inset;display:grid;place-items:center}
.cbx.on i{background:var(--text);color:#16161A;box-shadow:none}
.cbx .ic{width:14px;height:14px}
.steps{display:grid;gap:2px;font-variant-numeric:tabular-nums}
.step{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:8px 10px;border-radius:10px;align-items:center;transition:background .3s ease,box-shadow .3s ease}
.step .n{font:13px var(--mono);color:var(--pmute)}
.step .t{font:12px var(--mono);color:var(--pmute)}
.step.sel{background:var(--hover);box-shadow:0 0 0 1px var(--text) inset}
.step.sel .n{color:var(--text)}
.route{position:absolute;inset:0;color:#16161A}
.route svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mk{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#16161A;color:#fff;border:2px solid #fff;
  font:700 11px/22px var(--ui);font-variant-numeric:tabular-nums;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:background .25s ease,box-shadow .25s ease}
.route .mk.done{background:#55555F;color:#fff}
.mk.now{background:var(--accent);color:#16161A;box-shadow:0 0 0 7px rgba(255,90,54,.22),0 0 0 8px rgba(255,90,54,.5)}
.kc{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 12px;border-radius:10px;
  background:linear-gradient(#2B2B32,#1E1E24);color:#fff;font:600 15px/1 var(--ui);box-shadow:0 4px 0 #0A0A0C,0 0 0 1px var(--edge-2) inset}
.kc.big{width:150px;height:150px;border-radius:28px;font-size:54px;box-shadow:0 12px 0 #0A0A0C,0 50px 70px -20px rgba(0,0,0,.9),0 0 0 1px var(--edge-2) inset}

/* The app being clicked: a light window with a plain cell grid. */
.sheet{position:relative;border-radius:12px;background:#FBFBFC;overflow:hidden;color:#16161A;box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.sheet-bar{height:38px;background:#F1F1F4;border-bottom:1px solid #E3E3E8;display:flex;align-items:center;gap:8px;padding:0 14px;font:600 13px var(--ui);color:#55555F}
.sheet-bar i{width:10px;height:10px;border-radius:50%;background:#D5D5DC}
.sheet-bar span{margin-left:10px}
.sheet-body{position:absolute;left:0;right:0;top:38px;bottom:0;background:linear-gradient(#E6E6EC 1px,transparent 1px) 0 0/100% 38px,linear-gradient(90deg,#E6E6EC 1px,transparent 1px) 0 0/72px 100%}

/* The drawer, as in the app: title, text tabs with an underline, rows on raised graphite. */
.drw{background:var(--pill);color:var(--text);border-radius:20px;padding:16px 18px 20px;font:13.5px/1.35 var(--ui);font-variant-numeric:tabular-nums;box-shadow:0 60px 90px -40px rgba(0,0,0,.95),0 0 0 1px var(--line) inset}
.drw-top{display:flex;justify-content:space-between;align-items:center;color:var(--pmute);font-size:13px;margin-bottom:14px}
.drw-tabs{display:flex;gap:18px;color:var(--pmute);margin-bottom:16px}
.drw-tabs span{padding-bottom:6px}
.drw-tabs .on{color:var(--text);font-weight:600;box-shadow:0 2px 0 var(--text)}
.drw-name{display:flex;gap:8px;align-items:center}
.drw-name span{flex:1;height:44px;border-radius:10px;background:var(--raise);box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;padding:0 14px;font-size:18px}
.drw-name .fav{width:44px;height:44px;border-radius:10px;background:var(--raise);display:grid;place-items:center}
.drw-meta{margin:8px 0 4px;color:var(--pmute);font-size:12px}
.drw .cap{margin:16px 0 9px}
.drw-line{margin-top:12px}
.drw-note{margin:0;color:var(--pmute);font-size:12.5px;line-height:1.45}
.srch{height:38px;border-radius:10px;background:var(--raise);box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--pmute);margin-bottom:10px}
.rows{display:grid}
.row{display:grid;gap:2px;padding:9px 14px;border-radius:10px;background:var(--raise);margin-top:6px;overflow:hidden}
.row:first-child{margin-top:0}
.row b{font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
.row b .ic{width:13px;height:13px;color:var(--pmute)}
.row span{font-size:12px;color:var(--pmute);white-space:nowrap}
.row.sel{background:var(--hover);box-shadow:0 0 0 1px var(--text) inset}
.limit{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--soft);overflow:hidden}
.dbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:10px;background:var(--raise);font-weight:600;font-size:13px;transition:color .3s ease}
.dbtn .ico-rec{width:9px;height:9px;transition:opacity .3s ease}
.dbtn.off{color:var(--pmute)}.dbtn.off .ico-rec{opacity:.35}

/* ── Home hero */
/* No overflow clipping here: the warm light must fade out on its own, never end at the section edge.
   main clips sideways (overflow-x: clip), so the scene can still bleed off the right. */
.hero{position:relative;padding:104px 0 150px;min-height:800px}
.hero-copy{z-index:2}
.hero h1{font-size:60px;max-width:600px}
h1{font:700 64px/1.05 var(--display);letter-spacing:-.02em;margin:0;max-width:880px}
.lead{font-size:21px;color:var(--soft);max-width:600px;margin:28px 0 34px}
.hero .lead{max-width:520px}
.hero-depth{position:absolute;left:calc(50% - 50px);top:56px;width:860px;height:680px;--hs:.9;pointer-events:none}
.hero-depth .stage{position:absolute;left:0;top:0;width:860px;height:680px;transform:scale(var(--hs));transform-origin:0 0}
.l{position:absolute}
.l-glow{left:-300px;top:-260px;width:1340px;height:1200px;background:radial-gradient(closest-side,rgba(255,90,54,.19),rgba(255,90,54,.06) 50%,rgba(255,90,54,0))}
.l-back{left:0;top:96px;width:560px;height:340px;filter:blur(2.2px) brightness(.7)}
.l-back .sheet{width:100%;height:100%;transform:scale(.96);transform-origin:70% 30%}
.l-mid{left:376px;top:0;perspective:1500px}
.hero-drw{width:372px;transform:rotateY(-16deg) rotateZ(1.5deg);transform-origin:0 50%}
.l-front{left:96px;top:572px}
.l-front .pill{transform:rotate(-2.5deg)}
/* The strip counter, the selected step row and the orange marker change in the same frame: no cross-fade. */
.hero-depth .mk,.hero-drw .step{transition:none}
.l-near{left:0;top:0;width:100%;height:100%}
.bk{position:absolute;border-radius:50%;background:#3A3A42;border:2px solid #9A9AA5;color:#C9C9D1;display:grid;place-items:center;font-weight:700;filter:blur(var(--b));opacity:.72}

/* ── Home steps: no number badges or spine; headings, spacing and alternating sides carry the order. */
.chapters{padding-top:120px;padding-bottom:40px}
.ch{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;padding-bottom:150px;align-items:center;position:relative}
.ch:nth-of-type(even){grid-template-columns:1.1fr 1fr}
.ch:nth-of-type(even) .ch-copy{order:2}
.ch#last{padding-bottom:60px}
.ch h2,.h2{font:680 36px/1.12 var(--display);letter-spacing:-.02em;margin:4px 0 16px;max-width:720px}
.ch h2{font-size:40px;line-height:1.1}
.ch p{font-size:18.5px;color:var(--soft);margin:0 0 12px;max-width:470px}
/* No frames: every visual builds its own depth on the page. */
.vis{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}

/* 01 Record: clicks land on the dotted screen above the recording strip */
.demo-record{display:grid;justify-items:center;gap:6px;width:100%}
.taps{position:relative;width:100%;height:190px;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.taps i{position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--text);box-shadow:0 0 0 5px rgba(243,243,245,.12);transition:transform .25s var(--spring),opacity .25s ease}
.taps i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--text);opacity:0}
.armed .taps i{opacity:0;transform:scale(.4)}
.armed .taps i.on{opacity:1;transform:none}
.armed .taps i.on::after{animation:ripple .7s ease-out}
@keyframes ripple{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.armed .status.rec::before{animation:recpulse 1.2s ease-in-out 3}
@keyframes recpulse{50%{box-shadow:0 0 0 7px rgba(255,59,92,.08)}}

/* 02 See: the app out of focus, the markers sharp above it */
.demo-see{position:relative;width:100%;height:320px;perspective:1300px}
.see-sheet{position:absolute;left:4%;top:6%;width:92%;height:88%;transform:rotateY(-12deg) rotateX(5deg);filter:blur(1.8px) brightness(.72)}
.demo-see .route{left:4%;right:4%;top:14%;bottom:8%;inset:auto}
.demo-see .route{position:absolute;left:4%;width:92%;top:14%;height:78%}
.demo-see .mk{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:12px;line-height:26px;box-shadow:0 10px 18px -4px rgba(0,0,0,.55)}
.demo-see svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.demo-see.armed svg{clip-path:inset(0 100% 0 0)}
.demo-see.armed .mk{transform:scale(0)}
.demo-see.run svg{animation:draw 2.2s ease-out forwards}
.demo-see.run .mk{animation:pop .35s var(--spring) forwards;animation-delay:calc(var(--i,0)*.44s)}
@keyframes draw{to{clip-path:inset(0 0 0 0)}}
@keyframes pop{to{transform:scale(1)}}

/* 03 Edit: a marker lifted and moved; its step row follows */
.demo-edit{width:100%;display:grid;justify-items:center;gap:8px}
.edit-field{position:relative;width:100%;height:200px;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.edit-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.edit-line line{stroke:var(--text);stroke-opacity:.55;stroke-width:2;stroke-dasharray:7 6;stroke-linecap:round}
.edit-field .mk{background:var(--text);color:#16161A;border-color:var(--bg)}
.edit-field .mk.ghost{background:transparent;color:var(--pmute);border:2px dashed var(--pmute);box-shadow:none}
.edit-field .mk.lift{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:13px;line-height:32px;box-shadow:0 18px 26px -6px rgba(0,0,0,.7),0 0 0 7px rgba(243,243,245,.1)}
.edit-field .mk .cur{position:absolute;left:24px;top:22px}
.edit-row{width:100%;max-width:380px;padding:8px;border-radius:14px;background:var(--pill);box-shadow:0 30px 50px -24px rgba(0,0,0,.9),0 0 0 1px var(--line) inset}
.flash{animation:flash .7s ease-out}
@keyframes flash{from{background:rgba(255,255,255,.16)}}

/* 04 Play: the playback menu turned toward the route rail */
.demo-play{width:100%;max-width:360px;perspective:1100px}
.demo-play .pop{max-width:none}
.pop.tilt{transform:rotateY(14deg) rotateX(5deg);transform-origin:100% 50%}
.rail{display:flex;align-items:center;margin-top:30px}
.rail .mk{position:static;margin:0;flex:none;background:var(--text);color:#16161A;border-color:var(--bg)}
.rail .mk.done{background:#55555F;color:#fff}
.rail .mk.now{background:var(--accent);color:#16161A}
.rail b{flex:1;min-width:8px;border-top:1.6px dashed var(--line)}

/* 05 Stop: the key, in 3D, under a warm light */
.demo-stop{position:relative;display:grid;justify-items:center;gap:34px;padding:20px 0}
.demo-stop::before{content:"";position:absolute;left:50%;top:40%;width:420px;height:320px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,90,54,.16),rgba(255,90,54,0));pointer-events:none}
.kc-3d{perspective:900px}
.kc-3d .kc.big{position:relative;transform:rotateY(-20deg) rotateX(16deg);transition:transform .12s ease,box-shadow .12s ease}
.kc-3d .kc.big.press{transform:rotateY(-20deg) rotateX(16deg) translateY(9px);box-shadow:0 2px 0 #0A0A0C,0 30px 50px -20px rgba(0,0,0,.9),0 0 0 1px var(--edge-2) inset}
.state{position:relative;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;margin:0;color:var(--soft);font-size:15px}
.state i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.state.stopped i{background:var(--ready)}
.state b{color:var(--text)}

/* 06 Keep: the folder on disk */
.demo-keep{width:100%;max-width:470px}
.demo-keep .path{margin:0 0 10px;font:13px var(--mono);color:var(--mute)}
.files{margin:0;border-top:1px solid var(--edge)}
.files div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--edge)}
.files dt{font:600 14px var(--mono);color:var(--text)}
.files dd{margin:0;color:var(--soft);font-size:15px}
.none{display:flex;flex-wrap:wrap;gap:8px 10px;margin:16px 0 0;font-size:15px;color:var(--soft)}
.none b{color:var(--text);font-weight:600;margin-right:18px}
.armed .files div,.armed .none{opacity:0;transform:translateY(8px)}
.run .files div,.run .none{animation:rise .45s ease-out forwards;animation-delay:calc(var(--i,0)*.22s)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes navin{from{opacity:0;transform:translateY(10px)}}

/* Steps reveal once scripts arm them; no-JS and reduced motion see the finished picture. */
.ch .ch-copy,.ch .vis{transition:opacity .6s ease,transform .6s var(--glide)}
.reveal .ch:not(.seen) .ch-copy,.reveal .ch:not(.seen) .vis{opacity:0;transform:translateY(22px)}

/* Page end: left aligned, no band. */
.closing{padding-top:40px;padding-bottom:120px}
.closing h2{font:700 44px/1.08 var(--display);letter-spacing:-.02em;margin:0 0 18px;max-width:760px}
.closing p{color:var(--soft);font-size:18.5px;max-width:640px;margin:0 0 32px}

/* ── Inner pages */
.intro{padding-top:80px;padding-bottom:40px}
.intro h1{font-size:56px}
.intro-pro{padding-bottom:8px}
.intro-pro .lead{max-width:640px;margin-bottom:0}
.block{padding-top:40px;padding-bottom:110px}

/* Product: the strip's anatomy, then one row per feature. The pieces float on the page, like on the home page. */
.anatomy{padding-top:30px;padding-bottom:30px}
.anatomy-pill{display:flex;justify-content:center;padding:40px 0 10px}
.pill.big{transform:scale(1.2);transform-origin:center}
.legend{list-style:none;counter-reset:part;display:grid;grid-template-columns:repeat(4,1fr);gap:26px 36px;margin:60px 0 0;padding:34px 0 0;border-top:1px solid var(--edge)}
.legend li{counter-increment:part;color:var(--soft);font-size:15px}
.legend b{display:block;color:var(--text);font-size:16.5px;margin-bottom:4px}
.features{padding-top:40px;padding-bottom:20px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--edge)}
.feature h2{font:680 32px/1.15 var(--display);letter-spacing:-.02em;margin:0 0 14px}
.feature p{font-size:18px;color:var(--soft);margin:0 0 12px;max-width:470px}
.feature .vis{min-height:240px}
.drawer{background:var(--pill);color:var(--text);border-radius:20px;padding:18px;font:14px/1.35 var(--ui);width:100%;box-shadow:0 40px 70px -30px rgba(0,0,0,.9),0 0 0 1px var(--line) inset}
.drawer .tabs{margin-bottom:12px}
.drawer .name{height:40px;border-radius:12px;background:var(--raise);box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;padding:0 14px;font-size:17px;margin-bottom:8px}
.feature .pop{max-width:340px}
.gap{height:8px}
.slider{height:4px;border-radius:4px;background:var(--line);margin:18px 2px 4px;position:relative}
.slider i{position:absolute;left:0;top:0;bottom:0;width:44%;border-radius:4px;background:var(--text)}
.slider b{position:absolute;left:44%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff}
.keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.keys .then{color:var(--mute);margin:0 6px;font-size:14px}
.stack{display:grid;gap:18px;justify-items:center}.stack .pill{zoom:.82}
/* Area clicks on the product page: a still frame of a scan in progress (the moving one lives on /pro/). */
.area-f{position:relative;width:100%;height:240px;display:grid;place-items:center}
.area-f-box{width:78%;height:78%;border:1.5px dashed var(--pmute);border-radius:10px;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;justify-items:center;background:rgba(243,243,245,.03)}
.area-f-box i{width:10px;height:10px;border-radius:50%;background:var(--text)}
.area-f-box i.done{background:#55555F}
.area-f-box i.now{background:var(--accent);box-shadow:0 0 0 6px rgba(255,90,54,.22)}
.rules{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;max-width:820px}
.rules li{color:var(--soft);font-size:17px;padding-left:18px;position:relative}.rules li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--soft)}
.rules b{color:var(--text);font-weight:600}

/* Support, privacy, what's new, download */
.steps-list{margin:24px 0 0;padding:0 0 0 22px;display:grid;gap:14px;max-width:820px;color:var(--soft);font-size:17px}
.steps-list li::marker{color:var(--text);font-weight:700}.steps-list b{color:var(--text)}
.faqs .h2{margin-bottom:26px}
.faq-group{font:650 20px var(--display);color:var(--text);margin:44px 0 6px}
.faq{border-bottom:1px solid var(--edge)}
.faq summary:hover .chev{border-color:var(--text)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:18px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .chev{flex:none;width:8px;height:8px;margin-top:6px;border:solid var(--mute);border-width:0 1.75px 1.75px 0;transform:rotate(45deg);transition:transform .2s ease}
.faq[open] .chev{transform:rotate(225deg);margin-top:10px}
.faq div{padding:0 0 18px;color:var(--soft);max-width:780px}
.faq p{margin:0}
.callout{margin-top:48px;padding:24px 26px;border-radius:12px;background:var(--panel);box-shadow:0 0 0 1px var(--edge) inset}
.callout h3{margin:0;font-size:18px}.callout p{margin:6px 0 0;color:var(--soft)}
.prose{max-width:820px;padding-bottom:80px}
.prose h2{font:650 28px/1.2 var(--display);letter-spacing:-.02em;margin:44px 0 12px}
.prose p,.prose li{color:var(--soft)}
.prose .updated,.log .updated{margin:0;color:var(--mute);font-size:15px}
.log .entry{padding:30px 0;border-top:1px solid var(--edge)}
.log .entry h2{margin-top:10px}
.download{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;padding-top:90px;padding-bottom:100px}
.download h1{font-size:56px}
.download .lead{margin-bottom:30px}
.facts{margin:44px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}
.facts dt{font:600 14px var(--ui);color:var(--mute)}
.facts dd{margin:4px 0 0;color:var(--soft)}
.facts a{color:var(--text)}
/* The compact strip under the same warm light as the home page, no frame. */
.download-vis{position:relative;display:grid;justify-items:center;gap:36px;padding:70px 20px}
.download-vis::before{content:"";position:absolute;left:50%;top:50%;width:560px;height:460px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,90,54,.16),rgba(255,90,54,0));pointer-events:none}
.download-vis>*{position:relative}
.notfound{padding-top:60px;padding-bottom:110px}

/* ── Basic and Pro: one app, one switch */
.px-band{position:relative;padding:56px 0 90px}
.px{min-height:780px}
.px-back{position:absolute;inset:0;pointer-events:none}
.px-glow{position:absolute;left:380px;top:-200px;width:1120px;height:1040px;background:radial-gradient(closest-side,rgba(255,90,54,.17),rgba(255,90,54,.05) 55%,rgba(255,90,54,0))}
.px-ctx{position:absolute;left:600px;top:150px;width:560px;height:380px;filter:blur(5px) brightness(.45);transform:rotate(-2deg) scale(.94)}
.px-near{position:absolute;inset:0;z-index:7;pointer-events:none}
.px[data-plan="basic"]:not([data-focus]) .p-area{filter:blur(1px) brightness(.72)}
.px-switch{position:relative;z-index:6;width:370px}
.px-switch[hidden]{display:none}
.plan-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--pill);box-shadow:0 0 0 1px var(--line) inset}
.plan-switch button{position:relative;z-index:1;height:42px;min-width:92px;padding:0 24px;border:0;background:none;color:var(--soft);font:600 15px var(--ui);border-radius:999px;cursor:pointer;transition:color .35s ease}
.plan-switch button:hover{color:var(--text)}
.plan-switch button[aria-pressed="true"]{color:#16161A}
.plan-switch .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--text);transition:transform .5s var(--spring)}
[data-plan="pro"] .plan-switch .thumb{transform:translateX(100%)}
.px-state{margin:12px 0 0;color:var(--soft);font-size:15px;min-height:1.55em}
.px-list{list-style:none;margin:40px 0 0;padding:0;width:370px;display:grid;grid-template-columns:minmax(0,1fr);gap:30px;position:relative;z-index:6}
.px-item{outline:none}
.px-text{position:relative;transition:opacity .45s ease}
.px[data-focus] .px-item:not(.on) .px-text{opacity:.42}
.px-text h2{font:650 22px/1.2 var(--display);letter-spacing:-.01em;margin:4px 0 6px}
.px-text p{margin:0;color:var(--soft);font-size:16.5px;line-height:1.5}

/* Pieces of the app, composed in one scene on wide screens */
.px-piece{position:absolute;z-index:2;transition:filter .55s ease,opacity .55s ease,transform .7s var(--glide)}
.p-speed{left:440px;top:0;z-index:4}
.px-strip{transform:scale(.8);transform-origin:0 0}
.spd{position:absolute;left:164px;top:66px;width:304px;--v:1;--t:1;--to:0;--po:0}
.spd-big{display:flex;align-items:baseline;gap:6px;margin:16px 0 4px}
.spd-big b{font:600 44px/1 var(--display);font-variant-numeric:tabular-nums;min-width:2.1ch}
.spd-big span{color:var(--pmute);font-size:16px}
.spd-big em{margin-left:auto;font-style:normal;color:var(--pmute);font-size:12.5px;font-variant-numeric:tabular-nums}
.spd-track{position:relative;height:4px;border-radius:4px;background:var(--line);margin:18px 8px 10px}
.spd-track .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*100%);border-radius:4px;background:var(--text)}
.spd-track .tick{position:absolute;left:calc(var(--t)*100%);top:-6px;width:2px;height:16px;margin-left:-1px;border-radius:2px;background:var(--pmute);opacity:var(--to)}
.spd-track .knob{position:absolute;left:calc(var(--v)*100%);top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.spd-scale{position:relative;height:16px;margin:0 8px;font-size:11.5px;color:var(--pmute);font-variant-numeric:tabular-nums}
.spd-scale span{position:absolute;top:0}
.spd-scale span:first-child{left:0}
.spd-scale .t100{left:calc(var(--t)*100%);transform:translateX(calc(var(--t)*-100%))}
.spd-scale .t500{right:0;opacity:var(--po)}
.spd-hint{margin:12px 0 0;font-size:12.5px;line-height:1.4;color:var(--soft)}
.px-drw{width:330px}
.p-routes{left:952px;top:150px;perspective:1400px;z-index:3}
.p-macros{left:1024px;top:92px;perspective:1400px;z-index:2;filter:blur(1.4px) brightness(.62)}
.p-routes .drw,.p-macros .drw{transform:rotateY(-12deg) rotateZ(1deg);transform-origin:0 50%}
.p-area{left:456px;top:350px;perspective:1400px;z-index:1}
.area-sheet{width:440px;height:300px;transform:rotateY(8deg) rotateX(4deg) rotateZ(-1deg);transform-origin:100% 50%}
.scan{position:absolute;inset:0;transition:opacity .4s ease}
.scan-box{position:absolute;left:10%;top:12%;width:calc(72% * var(--sw,1));height:calc(66% * var(--sh,1))}
.scan-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scan-box rect{fill:rgba(22,22,26,.05);stroke:#16161A;stroke-width:1.6;stroke-dasharray:7 5}
.pts{position:absolute;left:10%;top:12%;width:72%;height:66%}
.pts i{position:absolute;width:11px;height:11px;margin:-5.5px;border-radius:50%;background:#16161A;box-shadow:0 0 0 2px #fff;transition:background .2s ease,box-shadow .2s ease,transform .3s var(--spring)}
.pts i.done{background:#9A9AA5}
.pts i.now{background:var(--accent);box-shadow:0 0 0 2px #fff,0 0 0 7px rgba(255,90,54,.3)}
.scan-tag{position:absolute;left:10%;bottom:7%;padding:6px 11px;border-radius:999px;background:#16161A;color:#fff;font:600 12px/1 var(--ui)}
.scan-cur{position:absolute;left:calc(10% + 72% * var(--sw,1));top:calc(12% + 66% * var(--sh,1));opacity:0}
.drawing .scan-cur{opacity:1}
.drawing .pts i{transform:scale(0)}
.pts.popin i{animation:pop .3s var(--spring) backwards;animation-delay:calc(var(--i,0)*18ms)}
[data-plan="basic"] .scan{opacity:0}

/* Plan states: rows and notes open and close in place */
.only-pro{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-top:0;transition:max-height .45s var(--glide),opacity .35s ease,padding .45s var(--glide),margin .45s var(--glide)}
[data-plan="pro"] .only-pro{max-height:64px;opacity:1;padding-top:9px;padding-bottom:9px;margin-top:6px;transition-delay:calc(var(--d,0ms) + var(--i,0)*110ms)}
.only-basic{max-height:80px;transition:max-height .45s var(--glide),opacity .35s ease,margin .45s var(--glide)}
[data-plan="pro"] .only-basic{max-height:0;opacity:0;margin-top:0}
.p-routes{--d:250ms}.p-macros{--d:700ms}
[data-plan="basic"] .rec-route,[data-plan="basic"] .rec-macro{color:var(--pmute)}
[data-plan="basic"] .rec-route .ico-rec,[data-plan="basic"] .rec-macro .ico-rec{opacity:.35}

/* Focus follows attention: the piece you read about comes forward and sharp, the rest recede. */
.px[data-focus] .px-piece{filter:blur(2.4px) brightness(.55)}
.px[data-focus="speed"] .p-speed,.px[data-focus="routes"] .p-routes,.px[data-focus="area"] .p-area,.px[data-focus="macros"] .p-macros{filter:none;z-index:5}
.px[data-focus="area"] .p-area{transform:translateY(-6px) scale(1.03)}
.px[data-focus="macros"] .p-macros{transform:translate(-86px,70px)}
.px[data-focus="macros"] .p-routes{transform:translate(70px,-56px)}

.same{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;padding-top:64px;padding-bottom:40px}
.same h2{font:680 32px/1.15 var(--display);letter-spacing:-.02em;margin:0;max-width:420px}
.same p{color:var(--soft);font-size:18px;margin:0 0 12px}

/* ── Medium widths: the scenes shrink as one piece */
@media (max-width:1239px){
  .hero h1{font-size:52px;max-width:520px}
  .hero .lead{max-width:470px;font-size:19px}
  .hero-depth{--hs:.8;left:auto;right:-150px}
}
@media (max-width:1179px){
  .px{min-height:0}
  .px-back,.px-near{display:none}
  .px-switch{position:sticky;top:72px;width:auto;padding:14px 0;margin:-14px 0 0;background:var(--bg);box-shadow:0 1px 0 var(--edge)}
  .px-list{width:auto;max-width:640px;gap:64px}
  .px-piece,.p-macros,.p-routes,.p-area{position:relative;left:auto;top:auto;margin:26px 0 0 50px;filter:none!important;transform:none!important}
  .px-strip{transform:none}
  .spd{position:relative;left:0;top:0;margin-top:12px;width:auto;max-width:340px}
  .p-routes .drw,.p-macros .drw,.area-sheet{transform:none}
  .px-drw{width:auto;max-width:380px}
  .area-sheet{width:auto;max-width:480px;height:280px}
}
@media (max-width:980px){
  .hero{padding-bottom:40px;min-height:0}
  .hero-depth{position:relative;left:auto;right:auto;top:auto;width:auto;height:calc(680px * var(--hs));margin-top:48px;--hs:.72}
  .hero-depth .stage{left:50%;margin-left:calc(-430px * var(--hs))}
  .ch,.ch:nth-of-type(even){grid-template-columns:1fr;gap:28px}
  .ch:nth-of-type(even) .ch-copy{order:0}
  .same{grid-template-columns:1fr;gap:18px}
  .legend{grid-template-columns:1fr 1fr}
  .download{grid-template-columns:1fr}
}

/* ── Phones */
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding-left:16px;padding-right:16px}
  .header-inner,.at-top .header-inner{height:68px}
  .brand,.at-top .brand,.footer-brand .brand{font-size:21px;gap:11px}
  .brand .mp-logo,.at-top .brand .mp-logo,.footer-brand .brand .mp-logo{width:38px;height:38px}
  .menu-toggle{display:inline-flex}
  /* The phone menu: a full sheet under the header with large links, then Download. */
  #main-nav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;padding:8px 16px 28px;background:var(--bg);
    visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .3s var(--glide),visibility 0s linear .3s}
  #main-nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .3s var(--glide),visibility 0s}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links a{padding:18px 0;color:var(--text);font:650 30px/1.1 var(--display);letter-spacing:-.02em;border-bottom:1px solid var(--edge)}
  .nav-links a::after{left:0;right:auto;width:28px;bottom:14px;height:3px}
  .nav-links a[aria-current]::after{transform:scaleX(1)}
  #main-nav.open .nav-links a{animation:navin .4s var(--glide) backwards}
  #main-nav.open .nav-links a:nth-child(2){animation-delay:.05s}
  #main-nav.open .nav-links a:nth-child(3){animation-delay:.1s}
  .nav-dl{height:54px;font-size:17px}
  h1,.hero h1,.intro h1{font-size:38px;line-height:1.1}
  .lead,.hero .lead{font-size:17.5px;margin:20px 0 26px}
  .hero{padding-top:36px}
  .actions .btn-site{flex:1 1 100%}
  .hero-depth{--hs:.5;margin-top:28px;margin-right:-16px}
  .hero-depth .stage{left:auto;right:-60px;margin-left:0;transform-origin:100% 0}
  .pill .wide{display:none}
  .stage .pill .seg.wide{display:flex}.stage .pill .div.wide{display:block}
  .vis .pill{zoom:.85}
  .chapters{padding-top:80px}
  .ch{padding-bottom:90px}
  .ch h2,.h2{font-size:30px}
  .ch p{font-size:16.5px}
  .vis{min-height:0}
  .demo-see{height:240px}
  .taps{height:150px}
  .edit-field{height:170px}
  .kc.big{width:120px;height:120px;font-size:44px;border-radius:24px}
  .step{font-size:12.5px;grid-template-columns:26px 1fr auto;padding:8px 6px}
  .files div{grid-template-columns:1fr;gap:2px}
  .closing h2{font-size:32px}
  .closing p{font-size:17px}
  .intro{padding-top:44px}
  .px-band{padding-top:36px}
  .px-switch{top:68px}
  .px-piece,.p-macros,.p-routes,.p-area{margin-left:0}
  .px-strip .seg.speed-seg{display:flex}
  .px-strip .btn:not(.go),.px-strip .more{display:none}
  .same h2{font-size:28px}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column}
  .vis .stack .pill{zoom:.8}
  .vis .stack .pill .btn:not(.go),.vis .stack .pill .more{display:none}
  .feature{grid-template-columns:1fr;gap:20px;padding:40px 0}
  .feature h2{font-size:28px}
  .pill.big{transform:none}
  .anatomy-pill{justify-content:flex-start;overflow-x:auto;padding:24px 0}
  .anatomy .pill .seg.wide{display:flex}.anatomy .pill .div.wide{display:block}
  .legend,.facts{grid-template-columns:1fr}
  .download h1{font-size:38px}
  .area-f{height:200px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal .ch:not(.seen) .ch-copy,.reveal .ch:not(.seen) .vis{opacity:1;transform:none}
}