/* Machsizer — a guided, editorial product experience. */
:root{--bg:#111212;--panel:#161717;--raised:#1c1d1d;--line:#2d2e2e;--line-strong:#464847;--fg:#f1f3eb;--muted:#a9adaa;--data:#b4f7cc;--data-soft:rgba(180,247,204,.09);--on-fg:#111212;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(17,18,18,.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:#171818;border:1px solid #363837;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:#a9adaa}.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:#363837}.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:#141515;border-radius:3px;border-color:#363837}.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:#161717;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:#eaebe7;color:#1a1c1b;--fg:#1a1c1b;--muted:#555a57;--data:#286442;--line:#cfd1cc;--data-soft:#e0e2dd;--on-fg:#eaebe7;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 #464847;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:#161717;border:1px solid #2d2e2e;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:#151616}.doors{gap:24px}.door{border-radius:4px;padding:40px;background:#151616;min-height:300px;transition:transform .3s,border-color .3s,background .3s}.door:hover{transform:translateY(-7px);border-color:var(--data);background:#1c1d1d}.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:#eaebe7;--fg:#1a1c1b;--muted:#555a57;--data:#286442;--line:#cfd1cc;--line-strong:#8f948f;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,#1f2120,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:#0d0e0e;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:#111212;--panel:#161717;--raised:#1c1d1d;--line:#2d2e2e;--line-strong:#464847;--fg:#f1f3eb;--muted:#a9adaa;--data:#b4f7cc;--data-soft:rgba(180,247,204,.09);--on-fg:#111212;--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:#eaebe7;color:#1a1c1b;--bg:#eaebe7;--panel:#f4f4f1;--raised:#e2e3df;--line:#cfd1cc;--line-strong:#a3a6a2;--fg:#1a1c1b;--muted:#555a57;--data:#286442;--data-soft:#e0e2dd;--on-fg:#eaebe7;--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: #151616; }
.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 #363837; 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: #a9adaa; font: 9px/1.4 var(--f-mono); border-top: 1px solid #2d2e2e; border-right: 1px solid #2d2e2e; }
@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}

/* Centred hero (2026-10-31): copy on top, the recorded app below at full content width so its text is legible. */
.hero2 .wrap{display:flex;flex-direction:column;align-items:center;gap:56px;max-width:1296px}
.hero2 .hero-copy{max-width:900px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero2 h1{max-width:18ch;font-size:clamp(40px,5.4vw,72px);line-height:1.04}
.hero2 .lede{max-width:640px;margin-inline:auto}
.hero2 .cta{justify-content:center}
.hero2 .fine{max-width:none}
.hero2 .demo{width:100%;max-width:1200px}
.hero2 .cues{grid-template-columns:repeat(5,minmax(0,1fr))}
.hero2 .cues li{grid-column:auto}
@media(min-width:961px){.hero2 .demo-toolbar,.hero2 .cue-k,.hero2 .cue-v em{font-size:11px}.hero2 .demo figcaption{font-size:12px}}
@media(max-width:960px){.hero2 .wrap{gap:40px}.hero2 .demo{max-width:none}}
@media(max-width:600px){
.hero2 .wrap{gap:32px}
.hero2 h1{font-size:clamp(36px,10vw,48px)}
.hero2 .cues{grid-template-columns:repeat(6,minmax(0,1fr))}
.hero2 .cues li{grid-column:span 2}.hero2 .cues li:nth-child(n+4){grid-column:span 3}
}

/* Colour use (2026-10-31), as in the app's css/polish.css: near-white --action for what you can do
   (primary buttons, selection, focus, links); mint --data only for figures a run produces and live state. */
:root{--action:#f1f3eb;--action-hover:#fff;--on-action:#111212}
.btn.primary{background:var(--action);color:var(--on-action);border-color:var(--action)}
.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover);opacity:1}
.process-section .btn.primary,.paper .btn.primary{background:#1a1c1b;color:#eaebe7;border-color:#1a1c1b}
::selection{background:var(--action);color:var(--on-action)}
.skip-link{background:var(--action);color:var(--on-action)}
.navlinks a:after{background:var(--action)}
@media(max-width:1250px){nav.top.open .navlinks .nav-signin{color:var(--fg)}}
.video-toggle:hover,.door:hover{border-color:var(--action)}
/* Headings and slogans: no mint */
.hero2 h1 em,.final h2 em{color:var(--muted)}
/* Labels, links and navigation: neutral */
.eyebrow,.process-section .eyebrow,.paper .eyebrow{color:var(--muted)}
.go-link,.door .go,.demo-prompt span:last-child,.hero2 .cta .ghost span{color:var(--fg)}
.rules .k,.step-label,.steps .n{color:var(--muted)}
.why li::before{background:var(--muted)}
.benefits div{border-top-color:var(--line-strong)}
.optional{border-left-color:var(--line-strong);background:var(--panel)}

/* Worn floor grid (2026-10-31): the app canvas's 1 m step (20 px) as hairlines, heavier lines every 5 m (home floor) or 10 m (inner pages).
   Hard-edged gaps from two mask tiles of unrelated sizes, so the wear does not visibly repeat; faded toward
   the edges and behind text. Flat and quiet on inner pages; a floor plane in the home hero. */
:root{--wear-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='263' height='181'%3E%3Cpath fill-rule='evenodd' d='M0 0h263v181H0zM82 60h7v27h-7zM104 127h93v25h-93zM143 2h38v65h-38zM137 49h26v11h-26zM75 33h8v18h-8zM41 154h5v3h-5zM186 90h4v3h-4zM81 12h3v7h-3zM178 130h6v29h-6zM25 20h3v11h-3zM99 85h5v12h-5zM132 25h2v3h-2zM74 108h25v6h-25zM176 161h24v13h-24zM158 108h5v32h-5zM161 111h11v16h-11zM2 47h118v70h-118zM119 59h54v49h-54zM174 100h12v5h-12zM208 29h24v3h-24zM34 89h15v5h-15zM115 38h14v10h-14zM114 59h46v74h-46zM171 11h23v8h-23zM153 118h25v6h-25zM30 68h8v13h-8zM170 113h15v12h-15zM33 58h9v29h-9zM73 86h8v18h-8zM17 45h19v11h-19zM169 12h12v11h-12zM92 89h27v11h-27zM30 97h83v26h-83zM256 48h4v13h-4zM74 29h7v9h-7zM207 168h5v6h-5zM80 24h32v42h-32zM92 138h3v25h-3z'/%3E%3Cpath fill-opacity='.35' d='M186 90h4v3h-4zM81 12h3v7h-3zM25 20h3v11h-3zM176 161h24v13h-24zM158 108h5v32h-5zM161 111h11v16h-11zM171 11h23v8h-23zM33 58h9v29h-9zM17 45h19v11h-19zM92 138h3v25h-3z'/%3E%3C/svg%3E");
--wear-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='419' height='307'%3E%3Cpath fill-rule='evenodd' d='M0 0h419v307H0zM183 207h104v33h-104zM139 282h23v8h-23zM55 78h51v44h-51zM206 115h85v27h-85zM267 254h119v31h-119zM372 49h23v10h-23zM31 77h64v25h-64zM199 200h115v58h-115zM80 259h73v20h-73zM265 50h19v13h-19zM368 124h7v3h-7zM293 133h93v30h-93zM345 234h8v26h-8zM303 134h9v4h-9zM201 92h24v10h-24zM84 197h117v64h-117zM302 97h14v10h-14zM57 37h14v12h-14zM237 40h109v74h-109zM332 274h13v27h-13zM223 180h56v64h-56zM159 30h21v9h-21zM286 204h68v23h-68zM279 122h26v6h-26zM272 226h21v9h-21zM137 79h17v5h-17zM191 120h10v29h-10zM203 250h13v3h-13zM240 154h2v8h-2zM197 71h10v4h-10zM33 129h107v55h-107zM256 71h6v19h-6zM15 111h24v6h-24zM207 228h58v21h-58z'/%3E%3Cpath fill-opacity='.35' d='M183 207h104v33h-104zM139 282h23v8h-23zM372 49h23v10h-23zM31 77h64v25h-64zM80 259h73v20h-73zM345 234h8v26h-8zM57 37h14v12h-14zM223 180h56v64h-56zM286 204h68v23h-68zM137 79h17v5h-17zM191 120h10v29h-10zM240 154h2v8h-2zM33 129h107v55h-107zM15 111h24v6h-24zM207 228h58v21h-58z'/%3E%3C/svg%3E");
--grid-minor:rgba(241,243,235,.04);--grid-major:rgba(241,243,235,.075)}
/* Inner pages: a quiet flat grid, major lines every 10 m, cleared behind the left-aligned heading */
.hero2,.page-first{position:relative;isolation:isolate;overflow-x:clip}
.page-first::before,.hero-copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;
-webkit-mask-image:var(--wear-a),var(--wear-b),var(--grid-fade-x),var(--grid-fade-y);-webkit-mask-composite:source-in;
mask-image:var(--wear-a),var(--wear-b),var(--grid-fade-x),var(--grid-fade-y);mask-composite:intersect;
-webkit-mask-size:263px 181px,419px 307px,100% 100%,100% 100%;mask-size:263px 181px,419px 307px,100% 100%,100% 100%}
.page-first::before{inset:0 0 auto;height:min(480px,100%);
background:linear-gradient(to right,var(--grid-major) 1px,transparent 1px) 50% 0/200px 200px,linear-gradient(to bottom,var(--grid-major) 1px,transparent 1px) 50% 0/200px 200px,linear-gradient(to right,var(--grid-minor) 1px,transparent 1px) 50% 0/20px 20px,linear-gradient(to bottom,var(--grid-minor) 1px,transparent 1px) 50% 0/20px 20px;
--grid-fade-x:linear-gradient(to right,transparent 55%,#000 90%,transparent);--grid-fade-y:linear-gradient(to bottom,#000 25%,transparent 90%)}
@media(max-width:600px){.page-first::before{--grid-fade-x:linear-gradient(to right,transparent 50%,#000);--grid-fade-y:linear-gradient(to bottom,#000 5%,transparent 55%)}}
/* Home hero: the grid as a floor; its near edge meets the top of the video panel and it recedes behind the copy */
.hero2 .hero-copy{position:relative}
.hero-copy::before{left:50%;width:300vw;margin-left:-150vw;bottom:-56px;height:560px;
background:linear-gradient(to right,rgba(241,243,235,.16) 1px,transparent 1px) 50% 100%/100px 100px,linear-gradient(to bottom,rgba(241,243,235,.16) 1px,transparent 1px) 50% 100%/100px 100px,linear-gradient(to right,rgba(241,243,235,.08) 1px,transparent 1px) 50% 100%/20px 20px,linear-gradient(to bottom,rgba(241,243,235,.08) 1px,transparent 1px) 50% 100%/20px 20px;
transform:perspective(800px) rotateX(50deg);transform-origin:50% 100%;
--grid-fade-x:linear-gradient(to top,#000 5%,transparent 75%);
--grid-fade-y:linear-gradient(to right,transparent 30%,#000 40%,transparent 46%,transparent 54%,#000 60%,transparent 70%)}
@media(max-width:960px){.hero-copy::before{bottom:-40px}}
@media(max-width:600px){.hero-copy::before{bottom:-32px;height:360px;--grid-fade-x:linear-gradient(to top,#000 5%,transparent 45%);--grid-fade-y:linear-gradient(to right,transparent 30%,#000 42%,#000 58%,transparent 70%)}}
/* Grain: a very faint fixed noise over everything */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.03;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Dashed hairline frames with a small mono label */
.hero2 .demo{position:relative;overflow:visible;outline:1px dashed var(--line-strong);outline-offset:9px}
.hero2 .demo::before{content:"FIG. 01 · RECORDED IN THE APP";position:absolute;top:-16px;left:14px;padding:0 6px;background:var(--bg);font:500 9px/1 var(--f-mono);letter-spacing:.14em;color:var(--muted);z-index:1}
.compare .tablebox,.vtable,.guide-body .tablebox{outline:1px dashed var(--line);outline-offset:6px}
@media(max-width:600px){.hero2 .demo{outline-offset:6px}.hero2 .demo::before{top:-13px;left:10px}}

/* Headline accent (2026-10-31): a light grey, distinct from the white but clearly readable (11.0:1 on the page). */
.hero2 h1 em,.final h2 em{color:#c4c9c2}

/* Surfaces (2026-10-31): closer to the app's neutral near-black panels, a faint green hint only.
   Mint stays for data figures and the selected chip. */
:root:not(#_){--panel:#161717;--raised:#1c1d1d;--line:#2d2e2e;--line-strong:#464847;--data-soft:rgba(180,247,204,.05)}
.demo{background:#171818;border-color:#363837}
.demo-frame{border-color:#363837}
#who{background:#141515}
.door:hover{background:#1b1c1c}
.final{background:#151616}
.cues li{background:#141515;border-color:#2d2e2e}
.cues li.on{background:#b4f7cc14;border-color:var(--data)}
.why-example{background:#161717;border-color:#2d2e2e}
.door{background:#151616}

/* Keys (2026-10-31): the target chips read as hardware keys. A 1 px highlight on the top edge, a darker
   bottom edge, small corner ticks; selected = pressed in. Crisp: no glow, no glossy gradient. */
.hero2 .cues li{position:relative;border-radius:3px;background:#171818;border:1px solid #2d2e2e;
box-shadow:inset 0 1px 0 rgba(241,243,235,.07),inset 0 -2px 0 rgba(0,0,0,.45);transition:transform 60ms,box-shadow 60ms}
.hero2 .cues li::before,.hero2 .cues li::after{content:"";position:absolute;width:5px;height:5px;pointer-events:none;border:0 solid #5a5c5b}
.hero2 .cues li::before{top:3px;left:3px;border-top-width:1px;border-left-width:1px}
.hero2 .cues li::after{right:3px;bottom:4px;border-right-width:1px;border-bottom-width:1px}
.hero2 .cues li:hover{border-color:#464847}
.hero2 .cues li:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(0,0,0,.4),inset 0 -1px 0 rgba(241,243,235,.04)}
.hero2 .cues li.on{transform:translateY(1px);background:#b4f7cc0f;border-color:var(--data);
box-shadow:inset 0 2px 0 rgba(0,0,0,.5),inset 0 -1px 0 rgba(241,243,235,.04)}
.hero2 .cues li.on::before,.hero2 .cues li.on::after{border-color:var(--data)}
.cue-button:focus-visible{outline:2px solid var(--action);outline-offset:-3px;border-radius:2px}
/* Buttons follow, lightly */
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(17,18,18,.22)}
.btn.ghost,.video-toggle{box-shadow:inset 0 1px 0 rgba(241,243,235,.06),inset 0 -2px 0 rgba(0,0,0,.4)}
.btn:active,.video-toggle:active{transform:translateY(1px);box-shadow:inset 0 2px 0 rgba(0,0,0,.35)}
.btn:focus-visible,.video-toggle:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.btn,.video-toggle{transition:background .15s,border-color .15s,transform 60ms,box-shadow 60ms}

/* Matte housing (2026-10-31): a very fine, even grain like textured dark plastic on the surfaces that hold
   things; the keys sit in it a shade lighter. Static SVG noise tiles, rasterised once. */
:root{--matte:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 3 -1.55'/%3E%3C/filter%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.5'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23l)' opacity='.045'/%3E%3Crect width='128' height='128' filter='url(%23d)' opacity='.28'/%3E%3C/svg%3E")}
.demo,.door,.why-example,.tablebox,.plan{background-image:var(--matte);background-size:128px 128px}
.hero2 .cues li{background-color:#1e1f1f;background-image:var(--matte);background-size:128px 128px;border-color:#363837}
.hero2 .cues li.on{background-color:#18201b}
/* A tiny indicator on the selected key, like an A/C lamp: flat, no glow */
.hero2 .cues li.on .cue-button::after{content:"";position:absolute;top:8px;right:9px;width:4px;height:4px;border-radius:50%;background:var(--data);box-shadow:0 0 0 1px #0b0d0c}
.hero2 .cues .cue-button{position:relative}

/* The same material on every page (2026-10-31): matte housing on dark panels, a lighter grain on the light
   "paper" sections, keys for controls, recessed wells for fields. */
.film,.optional,.formula,.takt-calc,.guide-body .formula,.proof li,.vbox td{background-image:var(--matte);background-size:128px 128px}
:root{--matte-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.5'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23d)' opacity='.12'/%3E%3C/svg%3E")}
.paper .film,.paper .rules li{background-image:var(--matte-paper);background-size:128px 128px}
/* Fields: wells set into the housing */
.takt-calc input{background-color:#0f1010;background-image:var(--matte);background-size:128px 128px;border-color:#363837;
box-shadow:inset 0 2px 0 rgba(0,0,0,.45),inset 0 -1px 0 rgba(241,243,235,.05)}
.takt-calc input:focus-visible{outline:2px solid var(--action);outline-offset:2px}
/* Secondary buttons and the film toggle: lighter keys on the same grain */
.btn.ghost,.video-toggle{background-color:#1e1f1f;background-image:var(--matte);background-size:128px 128px;border-color:#363837}
.btn.ghost:hover,.video-toggle:hover{border-color:#5b5d5c}
.hero2 .cta .btn.ghost{border:1px solid #363837}
/* Keys on the light sections: light keys with dark text (a dark key here hid its label) */
#proof .btn.ghost,.paper .btn.ghost,.process-section .btn.ghost,#proof .video-toggle,.paper .video-toggle,.process-section .video-toggle{
background-color:#f4f4f1;background-image:var(--matte-paper);color:#1a1c1b;border:1px solid #a3a6a2;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(26,28,27,.14)}
#proof .btn.ghost:hover,.paper .btn.ghost:hover,.process-section .btn.ghost:hover,.paper .video-toggle:hover,.process-section .video-toggle:hover{border-color:#555a57}
#proof .btn:focus-visible,.paper .btn:focus-visible,.paper .video-toggle:focus-visible,.process-section .btn:focus-visible{outline-color:#1a1c1b}
/* Unlit keys sit in a dark gap: near-black outline; only the lit (selected) key gets the mint edge */
.hero2 .cues li{border-color:#080808}
.hero2 .cues li:hover{border-color:#000}
.hero2 .cues li::before,.hero2 .cues li::after{border-color:#464847}
.hero2 .cues li.on{border-color:var(--data)}
.hero2 .cues li.on::before,.hero2 .cues li.on::after{border-color:var(--data)}
.btn.ghost,.video-toggle{border-color:#080808}
.btn.ghost:hover,.video-toggle:hover{border-color:#000;background-color:#232424}
#proof .btn.ghost:hover,.paper .btn.ghost:hover,.process-section .btn.ghost:hover,.paper .video-toggle:hover,.process-section .video-toggle:hover{background-color:#f4f4f1;border-color:#555a57}
/* The recorded screen and its panel sit in a dark gap too, like the keys */
.hero2 .demo{border-color:#080808}
.hero2 .demo-frame{border:1px solid #080808}