/* Mobile overrides, targeted by stable classes (see class names below) rather
   than matching literal inline `style="..."` text. The site's own JS
   framework re-serializes every element's style attribute at runtime
   (adding spaces after `:`/`,`/`;`, and fully expanding+reordering shorthand
   properties like `animation`), so any selector written against the raw
   HTML's inline-style text silently stops matching once the page has
   loaded. Classes are untouched by that re-serialization, so they're the
   only reliable way to target elements here. */
/* Hamburger nav: CSS-only (checkbox inside the label + :has()), because the
   site's CSP has no 'unsafe-inline' for scripts, so inline onclick handlers
   would be blocked. Hidden on desktop; the regular link row shows there. */
.m-burger,.m-cta-mobile{display:none}
.m-navtoggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

@media (max-width: 780px){
nav{flex-wrap:nowrap !important;position:sticky !important}
.m-cta-desktop{display:none !important}
.m-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin:0;padding:0 10px;box-sizing:border-box;cursor:pointer;border:1px solid #e2e8ec;border-radius:8px;background:#fff}
.m-burger-bar{display:block;height:2px;background:#101d33;border-radius:2px;transition:transform .2s,opacity .2s}
nav:has(.m-navtoggle:checked) .m-burger-bar:nth-child(2){transform:translateY(7px) rotate(45deg)}
nav:has(.m-navtoggle:checked) .m-burger-bar:nth-child(3){opacity:0}
nav:has(.m-navtoggle:checked) .m-burger-bar:nth-child(4){transform:translateY(-7px) rotate(-45deg)}
.m-navlinks{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0 !important;padding:6px 16px 14px;background:#fff;border-bottom:1px solid #e8ecef;box-shadow:0 14px 30px rgba(16,29,51,0.10);font-size:16px !important}
nav:has(.m-navtoggle:checked) .m-navlinks{display:flex !important}
.m-navlinks > a{display:block;padding:14px 4px !important;border-bottom:1px solid #eef1f4;color:#101d33 !important;font-weight:500 !important}
.m-navlinks > a[style*="border-bottom"]{border-bottom:1px solid #eef1f4 !important;color:#1ba99a !important;font-weight:700 !important}
.m-navlinks > a.m-cta-mobile{display:block !important;margin-top:12px;padding:14px 18px !important;border:none !important;background:#101d33;color:#fff !important;text-align:center;font-weight:700 !important;font-family:'Spline Sans Mono',monospace;font-size:14px !important}

.m-rail{grid-template-columns:1fr !important}
.m-rail > div:first-child{display:none !important}
nav{padding:10px 16px !important}
nav img{height:54px !important;margin:0 !important}
.m-pad88{padding:56px 20px !important}
.m-pad96{padding:56px 20px !important}
.m-pad80{padding:48px 20px !important}
.m-pad110{padding:56px 20px !important}
.m-pad72{padding:40px 20px !important}
.m-pad64{padding:36px 20px !important}
footer{padding:24px 20px !important}
/* 44px-class tap targets: footer links were 16px tall on phones. */
footer a{display:block !important;padding:10px 0 !important;margin:-6px 0 !important}
.m-h1-76{font-size:42px !important;letter-spacing:-1.5px !important}
.m-h1-100{font-size:50px !important;letter-spacing:-2px !important}
.m-h1-84{font-size:42px !important;letter-spacing:-1.5px !important}
.m-h1-72{font-size:36px !important;letter-spacing:-1.5px !important}
.m-h1-68{font-size:34px !important;letter-spacing:-1.25px !important}
.m-h2-72{font-size:36px !important;letter-spacing:-1.5px !important}
.m-h2-52{font-size:31px !important;letter-spacing:-1px !important}
.m-h2-44{font-size:27px !important;letter-spacing:-1px !important}
.m-h2-42{font-size:26px !important;letter-spacing:-1px !important}
.m-grid4{grid-template-columns:1fr 1fr !important}
.m-grid3{grid-template-columns:1fr !important}
.m-grid2{grid-template-columns:1fr !important}
.m-split-82{grid-template-columns:1fr !important;gap:28px !important}
.m-split-21{grid-template-columns:1fr !important}
.m-row4a{grid-template-columns:1fr !important;gap:10px !important;padding:22px 0 !important}
.m-row4a-right{text-align:left !important}
.m-sidebar2{grid-template-columns:1fr !important}
.m-sidebar2 > div:first-child{position:static !important;height:auto !important}
.m-sidebar2 > div{min-width:0 !important}
.m-row4b{grid-template-columns:1fr !important}
.m-row3a{grid-template-columns:1fr !important}
.m-split-11{grid-template-columns:1fr !important}
.m-split-31{grid-template-columns:1fr !important}
/* Homepage scroll-story ("what we build") on phones. Keep the pinned story,
   but fit it: the desktop padding left only 278px of width, the devices
   scaled to ~38% and hung off the bottom of a 100vh box (which on iOS is
   taller than the visible area), and 620vh meant ~5000px of scrolling.
   The JS scales the devices from the stage's real width, so widening the
   stage is what makes them bigger. */
#rl-showcase{height:340vh !important}
.m-split-hero{grid-template-columns:1fr !important;grid-template-rows:auto minmax(0,1fr) !important;align-items:start !important;gap:8px !important;padding:96px 20px 16px !important;height:100vh !important;height:100svh !important}
.m-split-hero > div:last-child{height:auto !important;min-height:0 !important;align-self:stretch !important}
/* The devices are absolutely positioned inside the stage and the JS only
   ever sets their transform/opacity, so `top` is ours to set: anchor them
   just under the caption so they sit mid-screen instead of at the bottom. */
#rl-laptop,#rl-ipad,#rl-phoneL,#rl-phoneR,#rl-flow{top:12px !important;bottom:auto !important;transform-origin:50% 0 !important}
.m-row4c{grid-template-columns:1fr !important}
.m-row4d{grid-template-columns:1fr !important}
.m-minicard{grid-template-columns:1fr !important}
.m-grid12{grid-template-columns:1fr !important}
.m-col-a{grid-column:1/-1 !important}
.m-col-b{grid-column:1/-1 !important}
.m-caption-box{height:222px !important;min-height:0 !important}
}