/* Machsizer — a guided, editorial product experience. */
:root{--bg:#101413;--panel:#171d1b;--raised:#202824;--line:#303c35;--line-strong:#536158;--fg:#f1f3eb;--muted:#a6b2a9;--data:#b4f7cc;--data-soft:rgba(180,247,204,.09);--on-fg:#101413;color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:150px}body{overflow-x:clip}::selection{background:var(--data);color:var(--bg)}.wrap{max-width:1320px;padding-inline:48px}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--data);color:var(--bg);padding:12px}.skip-link:focus{top:12px}.reading-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--data);z-index:50;pointer-events:none}nav.top{background:rgba(16,20,19,.94);backdrop-filter:blur(18px)}nav.top .wrap{height:84px;gap:20px}.mark .logo{height:27px}.navlinks{gap:18px;font-size:12px}.btn{border-radius:4px;padding:16px 22px;transition:transform .25s,background .25s,box-shadow .25s}.btn.primary{background:var(--data);color:var(--bg)}.btn:hover{transform:translateY(-3px)}.btn.primary:hover{opacity:1;background:#d1ffdf;box-shadow:0 7px 28px #b4f7cc18}.navlinks a{position:relative}.navlinks a:after{content:'';position:absolute;height:1px;background:var(--data);bottom:-7px;left:0;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .25s}.navlinks a:hover:after,.navlinks a[aria-current]:after{transform:scaleX(1)}h1,h2,h3{letter-spacing:-.045em}h2{font-size:clamp(36px,4.4vw,60px);font-weight:500;line-height:1.1}h3{font-weight:500}.eyebrow{font-size:10px;line-height:1.6;letter-spacing:.16em;color:var(--data)}section{padding-block:112px}.sec-head{margin-bottom:48px}.sec-head .eyebrow{margin-bottom:20px}.section-intro{max-width:490px;margin-top:24px;color:var(--muted);font-size:18px}.hero2{position:relative;padding-block:84px 68px;background:radial-gradient(ellipse at 85% 50%,#27423455,transparent 60%)}.hero2:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#b4f7cc06 1px,transparent 1px),linear-gradient(90deg,#b4f7cc06 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,transparent,#000);pointer-events:none}.hero2 .wrap{position:relative;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:52px}.hero2 h1{font-size:clamp(46px,4.8vw,68px);line-height:1.04;font-weight:500;margin-block:24px}.hero2 h1 em,.final h2 em{color:var(--data);font-style:normal}.hero2 .lede{font-size:17px;line-height:1.75;max-width:440px}.hero2 .fine{font-size:11px;color:var(--muted);margin-top:22px}.hero2 .cta{gap:12px;margin-top:32px}.hero2 .cta .ghost{border-color:transparent;padding-inline:4px}.hero2 .cta .ghost span{color:var(--data);margin-left:6px}.demo{padding:12px;background:#1c2520;border:1px solid #405548;border-radius:10px;box-shadow:0 24px 90px #0005;gap:0;transform:perspective(1500px) rotateY(-3deg) rotateX(1deg);transition:transform .6s}.demo:hover{transform:perspective(1500px) rotateY(0) rotateX(0)}.demo-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;font:9px var(--f-mono);letter-spacing:.06em;padding:5px 4px 16px;color:#a6b2a9}.demo-toolbar i{display:inline-block;background:var(--data);width:6px;height:6px;border-radius:50%;margin-right:6px;box-shadow:0 0 12px #b4f7cc66}.demo-frame{border-radius:4px;border-color:#405548}.demo-prompt{display:flex;justify-content:space-between;gap:12px;padding:17px 3px 12px;font-size:11px}.demo-prompt span:last-child{color:var(--data)}.cues{gap:5px}.cues li{padding:0;background:#121914;border-radius:3px;border-color:#35483b}.cue-button{width:100%;height:100%;display:grid;gap:8px;text-align:left;border:0;background:transparent;color:inherit;font:inherit;padding:11px 7px;cursor:pointer}.cue-k{font-size:9px;letter-spacing:0}.cue-v{font-size:10px;line-height:1.5}.cue-v b{font-size:22px}.cue-v em{display:block;font-size:9px}.cues li.on{background:#b4f7cc18;border-color:var(--data)}.demo figcaption{font-size:10px;padding:12px 3px 0;line-height:1.6}.chapter-nav{background:#151b17;border-block:1px solid var(--line);position:sticky;top:84px;z-index:8}.chapter-nav .wrap{display:flex;justify-content:space-between;gap:20px}.chapter-nav a{padding:20px 0;text-decoration:none;font-size:12px;color:var(--muted);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}.chapter-nav a span{font:10px var(--f-mono);margin-right:12px;color:var(--data)}.chapter-nav a:hover,.chapter-nav a.active{color:var(--fg);border-color:var(--data)}.process-section{background:#e9ede3;color:#18281e;--fg:#18281e;--muted:#526357;--data:#286442;--line:#c9d2c7;--data-soft:#dce5d8;--on-fg:#e9ede3;border:0}.process-section .sec-head{display:grid;grid-template-columns:1.2fr 1fr;column-gap:100px;align-items:end}.process-section .eyebrow{grid-column:1/-1}.process-section .section-intro{margin:0;max-width:400px}.benefits{gap:40px}.benefits div{border-top:1px solid #52705c;padding-top:26px}.benefits h3{font-size:24px;margin-bottom:6px}.benefits p{font-size:15px;line-height:1.8}.why-example{margin-top:76px;background:#19221c;border:1px solid #344939;padding:32px;border-radius:8px;gap:28px}.example-heading{display:flex;justify-content:space-between;gap:24px;align-items:end}.example-heading h3{font-size:32px;margin-top:10px}.example-heading>p{font:12px/1.8 var(--f-mono);color:var(--muted)}.improve-grid{grid-template-columns:minmax(0,1fr);gap:24px}.ctable td{padding:17px 15px}.compare .note{max-width:850px;font-size:12px}#who{background:#1c251f}.doors{gap:24px}.door{border-radius:4px;padding:40px;background:#151c17;min-height:300px;transition:transform .3s,border-color .3s,background .3s}.door:hover{transform:translateY(-7px);border-color:var(--data);background:#202e23}.door h3{font-size:32px;max-width:380px;margin:12px 0}.door p{font-size:15px;max-width:440px}.door .go{margin-top:24px}#proof{background:#e9ede3;--fg:#18281e;--muted:#526357;--data:#286442;--line:#c9d2c7;--line-strong:#809a84;color:var(--fg)}#proof h2{margin:20px 0 36px}#proof .proofline{align-items:end}#proof .proofline p{font-size:17px;line-height:1.8}.final{padding-block:100px;text-align:center;background:radial-gradient(ellipse at bottom,#294736,transparent 70%)}.final .wrap{display:block}.final .eyebrow{margin-bottom:22px}.final h2{font-size:clamp(42px,5.8vw,78px);margin-bottom:36px}.final .cta{justify-content:center}footer{background:#0c110e;padding-block:35px}footer .wrap{gap:25px}footer .links{font-size:12px}footer span{font-size:11px}.page-first{padding-top:80px}h1.ph{font-size:clamp(40px,5vw,64px);max-width:900px}.page-first .eyebrow{margin-bottom:20px}.page-first .lede{margin-top:24px}.reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}.reveal.pending{opacity:0;transform:translateY(28px)}.video-toggle{display:block;border:1px solid var(--line-strong);border-radius:3px;background:var(--panel);color:var(--fg);font:11px var(--f-mono);cursor:pointer;padding:8px 12px;margin:10px 0 0 auto}.video-toggle:hover{border-color:var(--data)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.hero-copy{animation:rise .9s both}.demo{animation:rise 1.1s .15s both}}
@media(min-width:1450px){.hero2{padding-block:110px 90px}}
@media(max-width:1250px){.navlinks{display:none}.menu-toggle{display:inline-flex;margin-left:0}nav.top .wrap>.btn.primary{margin-left:auto}nav.top .btn.ghost{display:none}nav.top.open .navlinks{display:grid;position:absolute;top:84px;left:0;right:0;background:var(--bg);padding:16px 48px;gap:0}nav.top.open .navlinks a{padding:12px 0;border-bottom:1px solid var(--line)}.hero2 .wrap{gap:30px}.hero2 h1{font-size:54px}.hero2 .cta .btn{font-size:12px}.cue-v b{font-size:19px}}
@media(max-width:960px){.wrap{padding-inline:28px}.hero2 .wrap{grid-template-columns:1fr;gap:44px}.hero-copy{max-width:700px}.hero2 h1{font-size:clamp(44px,7.8vw,68px)}.hero2 .lede{max-width:600px}.demo{transform:none;max-width:800px}.hero2{padding-block:56px}.cue-button{padding:14px}.cue-k{font-size:11px}.cue-v{font-size:13px}.cue-v b{font-size:27px}.process-section .sec-head{column-gap:35px}.chapter-nav a{font-size:10px}.chapter-nav a span{margin-right:5px}.benefits{gap:25px}.door{padding:28px}.door h3{font-size:28px}section{padding-block:80px}}
@media(max-width:600px){html{scroll-padding-top:130px}.wrap{padding-inline:20px}nav.top .wrap{height:70px;gap:12px}.mark .logo{height:21px}nav.top .btn.primary{font-size:10px;padding:10px}nav.top.open .navlinks{top:70px;padding-inline:20px}.menu-toggle{width:34px;height:34px}.hero2{padding-block:44px}.hero2 h1{font-size:44px}.hero2 .eyebrow{font-size:8px}.hero2 .lede{font-size:15px}.hero2 .cta{gap:14px}.hero2 .fine{font-size:10px}.demo{padding:8px}.demo-toolbar{font-size:7px}.demo-toolbar>span:last-child{display:none}.demo-prompt{font-size:9px}.cues{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.cue-button{padding:10px 4px;gap:5px}.cue-k{font-size:8px}.cue-v{font-size:9px}.cue-v b{display:block;font-size:23px}.cue-v em{font-size:7px}.chapter-nav{top:70px}.chapter-nav .wrap{overflow-x:auto;gap:24px}.chapter-nav a{white-space:nowrap;padding:16px 0}.process-section .sec-head{display:block}.section-intro,.process-section .section-intro{margin-top:22px;font-size:16px}.why-example{padding:16px;margin-top:48px}.example-heading{display:block}.example-heading>p{margin-top:12px}.example-heading h3{font-size:27px}.ctable{font-size:12px}.example-heading .eyebrow{font-size:8px}.doors{gap:16px}.door{min-height:0}.door h3{font-size:28px}.final{padding-block:75px}section{padding-block:64px}h2{font-size:38px}.sec-head{margin-bottom:32px}.proofline .btn{margin-top:12px}footer .wrap{align-items:start}.page-first{padding-top:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.pending{opacity:1;transform:none}.demo{transform:none}}
body{margin:0}.process-section .sec-head{max-width:none}

/* ---- Review fixes ---- */
/* The design is dark: lock the palette so a light OS theme or an explicit light choice cannot mix site.css light tokens with this file's dark surfaces. */
:root:not(#_){--bg:#101413;--panel:#171d1b;--raised:#202824;--line:#303c35;--line-strong:#536158;--fg:#f1f3eb;--muted:#a6b2a9;--data:#b4f7cc;--data-soft:rgba(180,247,204,.09);--on-fg:#101413;--bad:#e6826b;--draft:#e3b55c;--draft-soft:rgba(227,181,92,.12);color-scheme:dark}
body{background:var(--bg);color:var(--fg)}
/* Closing call to action: centre the headline block */
.final h2{margin-inline:auto;text-wrap:balance}
/* Sign in lives in the menu where the bar hides it */
.navlinks .nav-signin{display:none}
@media(max-width:1250px){nav.top.open .navlinks .nav-signin{display:block;color:var(--data)}}
/* Comparison table stacks into cards on phones so Cost and Operators stay visible */
@media(max-width:640px){
.tablebox:has(.ctable){overflow:visible;border:0;background:transparent}
.ctable{min-width:0}.ctable thead{display:none}
.ctable,.ctable tbody,.ctable tr,.ctable td{display:block;width:100%}
.ctable tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--panel);padding:6px 0}
.ctable tr.rec{border-color:var(--data);background:var(--data-soft)}
.ctable td,.ctable tr.rec td{border:0;padding:6px 14px;text-align:left;background:transparent}
.ctable td:first-child{font-weight:500;padding-top:10px}
.ctable td.num{display:flex;justify-content:space-between;gap:12px;text-align:right}
.ctable td.num::before{content:attr(data-k);color:var(--muted);font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
}
/* Smallest type: nothing under 10px */
.eyebrow{font-size:11px}
@media(min-width:961px){.cue-k,.cue-v em,.demo-toolbar{font-size:10px}.demo figcaption{font-size:11px}}
@media(max-width:600px){
.demo-toolbar,.cue-k,.cue-v em,.hero2 .eyebrow,.example-heading .eyebrow{font-size:10px}
.cue-v,.demo-prompt,.hero2 .fine,.chapter-nav a{font-size:11px}
.cues{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.cues li{grid-column:span 2}.cues li:nth-child(n+4){grid-column:span 3}
.cue-button{padding:12px 10px;gap:6px}
}
/* Light sections on sub-pages give them the same dark/light rhythm as the home page */
.paper{background:#e9ede3;color:#18281e;--bg:#e9ede3;--panel:#f3f6ee;--raised:#dfe6d9;--line:#c9d2c7;--line-strong:#9fab9c;--fg:#18281e;--muted:#526357;--data:#286442;--data-soft:#dce5d8;--on-fg:#e9ede3;--bad:#a8432b;border-top:0}
.paper video{background:#0d0d0e}
/* Legal pages */
.legal{max-width:720px;display:grid;gap:8px}
.legal h2{font-size:24px;line-height:1.25;letter-spacing:-.02em;margin:36px 0 4px}
.legal p{color:var(--muted);font-size:16px;line-height:1.75;margin:0}

/* Process: one drawing system and shared text baselines in each row. */
.process-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 32px;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}
.process-track article {
  display: grid;
  grid-template-rows: auto 88px 2.6em 1fr auto;
  gap: 20px;
  padding: 26px;
  min-width: 0;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
@supports (grid-template-rows: subgrid) {
  .process-track article { grid-row: span 5; grid-template-rows: subgrid; }
}
.step-num { font: 500 13px/1.4 var(--f-mono); color: var(--fg); }
.step-num span { color: var(--muted); font-size: 10px; }




.process-track h3 { font-size: 25px; line-height: 1.22; margin: 0; letter-spacing: -.025em; text-wrap: initial; }
.process-track p { font-size: 14px; line-height: 1.75; color: var(--muted); margin: 0; }
.step-label { border-top: 1px solid var(--line); padding-top: 16px; font: 500 10px/1.6 var(--f-mono); letter-spacing: .025em; color: var(--data); }
.process-section .go-link { display: inline-block; padding-block: 8px; }

/* Controls belong to the frame, with their own padded row. */
.video-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
.video-time { font: 400 11px/1.5 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.video-controls .video-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px 14px; min-width: 96px; min-height: 44px; flex-shrink: 0; font: 500 12px/1.3 var(--f-body); background: transparent; }
.video-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.demo .video-controls { margin-top: 14px; padding: 12px 3px 3px; }
.film figcaption { padding: 16px; font-size: 12px; line-height: 1.7; }

/* Quieter surfaces let the product recordings carry the movement. */
.demo, .demo:hover { transform: none; box-shadow: none; }
.hero2 { background: var(--bg); }
.hero2:before { content: none; }
.final { background: #19251d; }
.btn:hover, .door:hover { transform: none; }
.door .go { text-underline-offset: 5px; }
.door:hover .go { text-decoration: underline; }
.hero2 h1 { max-width: 11ch; }
.reveal { transition-duration: .5s; }
.reveal.pending { transform: translateY(12px); }
@media (max-width: 1050px) {
  .process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .process-track article { padding: 20px 16px; gap: 16px; }
  .process-track h3 { font-size: 22px; }
  .process-track p { font-size: 14px; }
  
  .step-label { font-size: 10px; }
  .video-controls { padding: 12px; }
  .film figcaption { padding: 14px; }
  .hero2 h1 { font-size: clamp(38px, 10.5vw, 52px); }
}
@media (max-width: 359px) {
  .process-track { grid-template-columns: 1fr; }
  .process-track article { grid-template-rows: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .reveal.pending { transform: none; } }
@media (max-width: 359px) {
  nav.top .mark .logo { height: 17px; }
  nav.top .wrap { gap: 8px; }
  nav.top .wrap > .btn.primary { padding-inline: 8px; }
}
.btn.primary:hover, .demo-toolbar i { box-shadow: none; }

/* Actual product frames; the viewBox selects the relevant interface. */
.process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-track article { grid-template-rows: auto auto 2.6em 1fr auto; }
@supports (grid-template-rows: subgrid) {
  .process-track article { grid-template-rows: subgrid; }
}
.process-capture { position: relative; display: flex; align-items: center; aspect-ratio: 1.7; min-width: 0; overflow: hidden; border: 1px solid #384139; border-radius: 4px; background: #101110; }
.process-capture svg { display: block; width: 100%; height: 100%; }
.capture-note { position: absolute; bottom: 0; left: 0; padding: 6px 9px; background: #101110; color: #a6b2a9; font: 9px/1.4 var(--f-mono); border-top: 1px solid #303c35; border-right: 1px solid #303c35; }
@media (max-width: 600px) {
  .process-track { grid-template-columns: 1fr; }
  .process-track article { grid-row: auto; grid-template-rows: auto; gap: 18px; padding: 22px; }
  .process-track h3 { font-size: 25px; }
  .process-track p { font-size: 15px; }
}

/* Toned down 2026-10-24: no lift, glow, tilt or progress bar. */
.btn:hover,.door:hover{transform:none}.btn.primary:hover{box-shadow:none}
.demo,.demo:hover{transform:none}
.reading-progress{display:none}
.process-capture img{display:block;width:100%;height:100%;object-fit:cover}