/* Final layout corrections kept separate so they always win the prototype cascade. */
@media (min-width:801px){
  :root{--page:min(1320px,calc(100vw - clamp(144px,15vw,240px)))}
  .site-header{width:min(1460px,calc(100% - clamp(112px,12vw,192px)))}
  .hero-content{align-items:center;padding-top:88px;padding-bottom:38px}
  .hero-copy--mercury{grid-column:3/11;align-self:center;max-width:880px;text-align:center;transform:translateY(calc(var(--hero-progress,0) * -34px));opacity:clamp(0,calc(1 - var(--hero-progress,0) * 1.55),1);will-change:transform,opacity}
  .hero-copy--mercury h1{max-width:none;margin-bottom:20px;font-size:clamp(62px,6vw,94px);font-weight:560;letter-spacing:-.052em;line-height:.96;text-wrap:balance}
  .hero-copy--mercury .hero-summary{max-width:680px;margin:0 auto 30px;color:rgba(255,255,255,.78);font-size:clamp(17px,1.35vw,20px);line-height:1.48;text-wrap:balance}
  .hero-actions--capture{justify-content:center;align-items:center;gap:12px}
  .hero-demo-capture{display:flex;min-width:min(530px,62vw);height:58px;overflow:hidden;border:1px solid rgba(237,237,243,.68);border-radius:16px;background:rgba(10,14,23,.34);backdrop-filter:blur(18px);transition:border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease}
  .hero-demo-capture:focus-within{border-color:rgba(123,230,182,.92);background:rgba(10,18,24,.6);box-shadow:0 0 0 4px rgba(123,230,182,.11)}
  .hero-demo-capture input{min-width:0;flex:1;border:0;outline:0;padding:0 22px;color:#fff;background:transparent;font:500 15px "Satoshi",sans-serif}
  .hero-demo-capture input::placeholder{color:rgba(255,255,255,.56)}
  .hero-demo-capture .button{flex:none;min-width:164px;height:100%;border-radius:14px}
  .hero-actions--capture>.button{min-width:142px;height:58px;border-radius:14px}
  .hero-form-status{min-height:20px;margin:12px 0 0;color:var(--green);font-size:12px;text-align:center}
  .hero-progress{align-self:end;margin-bottom:2px}
  .positioning-title{font-size:clamp(42px,3.8vw,54px)}
  .positioning-title__gradient,.positioning-title__line{white-space:nowrap}
  .positioning-title__line{color:var(--black);background:none;-webkit-text-fill-color:initial}
}

@media (min-width:801px) and (max-width:1100px){
  .positioning-copy{grid-column:1/8;padding-right:28px}
  .editorial-visual--review{grid-column:8/13}
  .positioning-title{font-size:clamp(42px,4.1vw,48px)}
}

@media (max-width:800px){
  .page-grid{width:calc(100% - 32px)}
  .hero-content{align-items:end;padding-bottom:clamp(64px,11svh,128px)}
  .hero-copy--mercury{max-width:600px;text-align:center;transform:translateY(calc(var(--hero-progress,0) * -24px));opacity:clamp(0,calc(1 - (var(--hero-progress,0) - .12) * 1.9),1);will-change:transform,opacity}
  .hero-copy--mercury h1{max-width:520px;margin:0 auto 18px;font-size:clamp(48px,13vw,72px);font-weight:560;line-height:.94}
  .hero-copy--mercury .hero-summary{max-width:460px;margin:0 auto 24px;font-size:15px;line-height:1.45}
  .hero-actions--capture{display:grid;gap:10px}
  .hero-demo-capture{display:flex;width:100%;height:56px;overflow:hidden;border:1px solid rgba(237,237,243,.68);border-radius:16px;background:rgba(5,9,18,.54);backdrop-filter:blur(16px)}
  .hero-demo-capture input{min-width:0;flex:1;border:0;outline:0;padding:0 16px;color:#fff;background:transparent;font:500 14px "Satoshi",sans-serif}
  .hero-demo-capture input::placeholder{color:rgba(255,255,255,.58)}
  .hero-demo-capture .button{flex:none;min-width:138px;height:100%;padding:0 15px;border-radius:14px;font-size:13px}
  .hero-actions--capture>.button{width:100%;height:50px;border-radius:14px}
  .hero-form-status{min-height:18px;margin:9px 0 0;color:var(--green);font-size:11px;text-align:center}
  .positioning-title__gradient,.positioning-title__line{white-space:normal}
  .positioning-title__line{color:var(--black);background:none;-webkit-text-fill-color:initial}
  .service-chain__rail{display:none}
  .service-chain__item:not(:last-child)::after{
    position:absolute;
    z-index:0;
    top:96px;
    bottom:-34px;
    left:47px;
    width:2px;
    background:linear-gradient(180deg,var(--node-color),rgba(112,219,233,.72));
    box-shadow:0 0 14px color-mix(in srgb,var(--node-color) 32%,transparent);
    content:"";
    transform:translateX(-50%);
  }
  .service-chain__item:last-child::after{content:none}
  .service-chain__node{position:relative;z-index:1}
}

@media (max-width:520px){
  .service-chain__item:not(:last-child)::after{top:82px;bottom:-34px;left:41px}
}
/* Mobile + portrait hero: two-frame cinematic push-in.
   Layer 1 (wide dormant scene) is cover-fit and zooms toward the monitor as
   you scroll; layer 2 (lit close-up) fades in over it. The close-up's edges
   are near-black, so contain-fit blends invisibly into the canvas and the
   full lockup stays in frame. Transform/opacity only, no frame decoding. */
@media (max-width:800px), (min-width:801px) and (orientation:portrait){
  .hero-fallback img{
    object-fit:cover;
    object-position:55% center;
    transform:scale(calc(1 + var(--hero-progress,0) * 0.38));
    transform-origin:55% 42%;
    will-change:transform;
  }
  .hero-final-mobile{background:#01030b}
  .hero-final-mobile img{
    object-fit:contain;
    object-position:center 42%;
    transform:scale(calc(.94 + var(--hero-progress,0) * 0.62));
    transform-origin:center 42%;
    will-change:transform;
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-fallback img,.hero-final-mobile img{transform:none}
}
/* Mobile design parity (matches desktop editorial decisions) */
@media (max-width:800px){
  /* Services: same squircle record-tiles as desktop, not circles */
  .service-chain__node{border-radius:30%}
  /* How it works: static stacked stage: card, then caption; the 01-04 chip
     rail is desktop-only (the numbered steps list above already carries it) */
  .record-stage{display:grid;place-items:center;row-gap:16px;top:auto;align-self:auto;height:auto;min-height:auto;max-height:none;padding:30px 0 18px}
  .record-document{position:relative;width:min(330px,86%)}
  .record-stage__label{position:static;bottom:auto;text-align:center}
  .record-stage__timeline{display:none}
}
@media (max-width:800px){
  .service-chain__number{position:static;top:auto;left:auto;grid-column:2;grid-row:1;align-self:end;justify-self:start;margin:0 0 7px;transform:none;font-size:11px;font-weight:700;letter-spacing:.08em}
  .service-chain__label{margin-left:30px}
}
@media (max-width:520px){
  
}
/* Real footage scrub on mobile/portrait: once the first frame is decoded the
   hero gets .hero--scrub, canvas takes over, the two-image crossfade hides.
   Without JS or on decode failure the crossfade below remains the fallback. */
@media (max-width:800px), (min-width:801px) and (orientation:portrait){
  .hero--scrub .hero-canvas{display:block}
  .hero--scrub .hero-fallback,.hero--scrub .hero-final-mobile{display:none}
}