:root{
  --ink:#0b0b0c; --text:#26272b; --muted:#6b6e76; --line:#e5e5e7; --bg:#fff; --alt:#f6f6f7;
  --red:#a32a2a; --navy:#14305c; --navy-h:#0e2447;
  --r:12px; --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font:17px/1.6 "IBM Plex Sans",system-ui,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3,h4,h5,h6{font-family:"Oxygen",system-ui,sans-serif;color:var(--ink);line-height:1.24;margin:0 0 .5em;}
h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:750}
h3{font-size:1.25rem;letter-spacing:-.01em}
.eyebrow{color:var(--red);font-size:1.2rem;font-weight:700;letter-spacing:10%;text-transform:uppercase;margin:0 0 .9rem}
.lede{font-size:clamp(1.1rem,2.2vw,1.35rem);max-width:46rem;color:var(--text)}
.sub{font-size:1.15rem;max-width:44rem;color:var(--muted)}
.micro{font-size:.9rem;color:var(--muted);margin-top:.9rem}

.btn{display:inline-block;font:inherit;font-weight:650;text-decoration:none;border-radius:9px;padding:.85rem 1.5rem;border:1px solid transparent;cursor:pointer;transition:background .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-h)}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-ghost{border-color:#c9c9cd;color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:.5rem 1rem;font-size:.95rem}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:1.5rem;height:64px}
.brand{font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand span{color:var(--red)}
.nav nav{display:flex;gap:1.4rem;margin-left:auto;font-size:.95rem}
.nav nav a{text-decoration:none;color:var(--text)}
.nav nav a:hover{color:var(--red)}

.wordmark{background:var(--ink) repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px);padding:1.2rem 0 1rem;border-bottom:4px solid #b45309;margin-bottom:clamp(2rem,5vw,3.5rem)}
.wordmark .wrap{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.wordmark h1{font-family:"IBM Plex Sans",system-ui,sans-serif;margin:0;font-size:clamp(3.5rem,10vw,6rem);line-height:1;color:#b45309;font-style:italic}
.wordmark small{font:.8rem "Oxygen Mono",ui-monospace,Menlo,Consolas,monospace;color:#8e9098;letter-spacing:.14em;text-transform:uppercase}
.hero{padding:0 0 clamp(3rem,7vw,5rem);background:linear-gradient(#fff,var(--alt))}
.hero-in{padding-bottom:clamp(2rem,5vw,3.5rem)}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

.shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 24px 60px -20px rgba(0,0,0,.28)}
.shot-hero{box-shadow:0 30px 70px -24px rgba(0,0,0,.35)}
.chrome{display:flex;gap:6px;padding:10px 12px;background:#efeff1;border-bottom:1px solid var(--line)}
.chrome i{width:10px;height:10px;border-radius:50%;background:#c7c7cb}
.shot-phone{max-width:280px;margin:0 auto;border-radius:34px;border:8px solid var(--ink)}

.strip{background:var(--ink);color:#d8d8db}
.strip-in{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;align-items:center;padding-top:1.1rem;padding-bottom:1.1rem;font-size:.95rem}
.strip-in span{color:#8e9098;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}
.strip-in strong{color:#fff;font-weight:600}

.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section.alt{background:var(--alt)}
.section.dark{background:var(--ink);color:#d0d0d4}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .sub{color:#a9abb2}
.section.dark .eyebrow{color:#e0605f}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.2rem}
.card .rung{display:block;color:var(--red);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.card{border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;background:#fff}
.card h3{margin-top:0}
.card h3:before{content:"";display:block;width:2.2rem;height:3px;background:var(--red);margin-bottom:1rem}
.card p{margin:.4rem 0 0;color:var(--muted)}

.feature{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;margin-top:clamp(2.5rem,6vw,4.5rem)}
.feature.flip{grid-template-columns:1fr 1.2fr}
.feature.flip .copy{order:2}
.ticks{list-style:none;padding:0;margin:1.2rem 0 0}
.ticks li{position:relative;padding-left:1.7rem;margin:.5rem 0}
.ticks li:before{content:"";position:absolute;left:0;top:.5em;width:.8rem;height:.45rem;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}

.steps{list-style:none;padding:0;margin:2.2rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid #34353a;padding-top:1rem}
.steps li:before{content:"0" counter(s);color:#e0605f;font-weight:700;font-size:.85rem;display:block;margin-bottom:.3rem}
.steps b{display:block;color:#fff;font-size:1.1rem;margin-bottom:.3rem}
.steps span{color:#a9abb2;font-size:.97rem}

.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.photo{margin:0;border-radius:var(--r);overflow:hidden}

.cta-band{background:var(--alt);border-top:1px solid var(--line)}
.demo{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:grid;gap:1rem;box-shadow:0 14px 40px -22px rgba(0,0,0,.3)}
.form label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600;color:var(--ink)}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:.7rem .8rem;border:1px solid #c9c9cd;border-radius:8px;background:#fff;color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy);outline:2px solid rgba(20,48,92,.25)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
#form-status{margin:0;min-height:1.4em;font-size:.95rem}
#form-status.ok{color:#1d6b3a}
#form-status.err{color:var(--red)}

.foot{background:var(--ink);color:#8e9098;font-size:.9rem;padding:1.6rem 0}
.foot .brand{color:#fff}
.foot-in{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

@media (max-width:860px){
  .grid3,.grid4,.steps{grid-template-columns:1fr 1fr}
  .feature,.feature.flip,.about,.demo{grid-template-columns:1fr}
  .feature.flip .copy{order:0}
  .nav nav{display:none}
  .nav-in .btn{margin-left:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid3,.grid4,.steps{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
  .nav-in .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Mono accents: buttons, nav, taglines */
.btn,.nav nav,.eyebrow,.card .rung{font-family:"Oxygen Mono",ui-monospace,Menlo,Consolas,monospace}

/* Scroll-driven rack & pinion: a toothed rail on the right edge slides with scroll and turns the gears.
   --p (0..1) is scroll progress: native animation-timeline where supported, set by site.js otherwise. */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@keyframes rail-progress{to{--p:1}}
@supports (animation-timeline:scroll()){
  :root{animation:rail-progress linear both;animation-timeline:scroll(root)}
}
:root{--rail-w:56px;--rail-reserve:72px}
.wrap{padding-right:max(22px,calc(var(--rail-reserve) + 22px - (100vw - var(--max)) / 2))}
/* Rack body: scrolling mounting holes, two fixed grooves running alongside them, over the base colour. */
.rail{position:fixed;top:0;right:0;bottom:0;width:var(--rail-w);z-index:30;pointer-events:none;
  background:
    var(--holes,none) 0 calc(var(--p) * var(--travel) * -1) / 100% var(--hole-step,1px) repeat-y,
    linear-gradient(90deg,#9a9ca3 0 1px,#f1f1f3 1px 2px) calc(var(--rail-w) * .3 - 1px) 0 / 2px 100% no-repeat,
    linear-gradient(90deg,#9a9ca3 0 1px,#f1f1f3 1px 2px) calc(var(--rail-w) * .7 - 1px) 0 / 2px 100% no-repeat,
    #d6d6d9}
.rail::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:var(--tooth-h);
  background:var(--teeth) 0 calc(var(--p) * var(--travel) * -1) / var(--tooth-h) var(--pitch) repeat-y}
.rail svg{position:absolute;top:0;right:0;overflow:visible}
.rail .g{rotate:calc(var(--p) * var(--deg) + var(--off))}
.rail .gr{fill:#9b9da4;stroke:#6f7178;stroke-width:.6} .rail .gs{fill:#5a5c63} .rail .g2{fill:#4a4c52}
.rail .ax{fill:#2b2c30}
@media (max-width:760px){
  :root{--rail-w:10px;--rail-reserve:16px}
  .rail{background:#d6d6d9}
  .wrap{padding-right:calc(16px + var(--rail-reserve))}
}
@media (prefers-reduced-motion:reduce){:root{animation:none}}

/* Screenshot lightbox */
.shot img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(11,11,12,.92); touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; }
.lb.on { display: flex; }
.lb img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; transform-origin: center;
  will-change: transform; -webkit-user-drag: none; pointer-events: none; }
.lb-x { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lb-x:hover, .lb-x:focus-visible { background: rgba(255,255,255,.28); }
html.lb-open, html.lb-open body { overflow: hidden; }

/* Scroll highlights: <mark><span>…</span></mark> sweeps in as it scrolls into view. */
@property --highlighted{syntax:"<number>";inherits:true;initial-value:1}
mark{--highlight:hsl(48 96% 76%);background:transparent;color:inherit}
mark span{
  background:linear-gradient(120deg,var(--highlight) 50%,transparent 50%) 110% 100%/200% 88% no-repeat;
  background-position:calc((1 - var(--highlighted)) * 110%) 100%;
  transition:background-position 1s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
@keyframes highlight{to{--highlighted:1}}
@supports (animation-timeline:view()){
  mark{--highlighted:0;animation:highlight steps(1) both;animation-timeline:view();animation-range:entry 100% cover 10%}
}
@media (prefers-reduced-motion:reduce){mark span{transition:none}}
/* Dark sections: a deeper gold keeps light text readable. */
.section.dark mark{--highlight:hsl(46 75% 32%)}