/* Site-integration overrides for the Atlas ERP page (not part of the designer prototype). */
.sh-video{cursor:default}
.sh-video video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;background:#000}

/* The site's global reset (src/styles/_reset.scss, _globals.scss) differs from the browser defaults
   the prototype was designed against; restore them. Specificity is just above the site's element
   selectors and below any prototype class rule. */
html body{font-size:14px;line-height:normal}
html body a{display:inline}
html body button{padding:1px 6px}
html body input{font:revert;color:revert}
html body h3,html body h4,html body h5,html body h6{font-weight:700}
html body p{margin-block:1em}
html body button{cursor:default}
html body img{display:inline}
html body h3{font-size:1.17em;margin-block:1em}

/* ROI calculator: prototype clips it to a teaser (700px frame, clipped columns, white fade + blur).
   On the site all 11 fields must be reachable, so show the whole calculator. */
.roi-cols{overflow:visible;max-height:none;align-items:flex-start}
#svRoi .sv-fr{height:auto}
.roi-fade::after,.roi-pb{display:none}
.roi-fade{position:static;height:auto;display:flex;padding:0}
.roi-cta.roi-cta-m{pointer-events:auto}
@media (min-width:1200px){
  .roi-fade{display:none}
  .roi-out{position:sticky;top:24px}
}
.bt-hit{pointer-events:none}

/* "What's inside" desktop step progress + scroll hint (pinned, wheel-driven; hidden on tablet/phone) */
.ins-prog,.ins-hint{display:none}
@media (min-width:1200px){
  .ins-head{position:relative;align-self:stretch}
  .ins-prog{display:flex;align-items:center;gap:16px;position:absolute;right:0;bottom:14px;font:500 14px/1 var(--mono);color:#8a8a8a}
  .ins-prog b{font-weight:500;color:#fff}
  .ip-seg{display:flex;gap:4px}
  .ip-seg i{position:relative;display:block;width:24px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden;cursor:pointer}
  .ip-seg i::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(var(--f,0));transform-origin:0 50%;transition:transform .3s var(--ease)}
  .ins-hint{display:flex;align-items:center;gap:8px;position:absolute;right:0;top:-6px;padding:8px 14px;border-radius:8px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);font:500 13px/1.2 var(--mono);color:#dcdcdc;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
  .ins-hint.on{opacity:1}
}
@media (prefers-reduced-motion:reduce){.ip-seg i::after,.ins-hint{transition:none}}

/* Header sized like the main site header (76px bar, 32px logo, 52px CTA) — the prototype's was 96px / 44px / 56px */
@media (min-width:1200px){
  .sv-topfr{height:76px}
  .er-header{padding:12px 60px}
  .er-header .logo{width:32px;height:32px}
  .er-menu{gap:40px;margin-left:56px}
  .er-menu a{font-size:14px;padding:12px 0}
  .er-hright{gap:16px}
  .dd-trg{height:52px;padding:0 14px;font-size:14px}
  .er-header .contact{box-sizing:border-box;height:52px;padding:0 16px 0 20px;font-size:14px}
}
@media (max-width:1199px){
  .header .logo{width:24px;height:24px}
}

/* CTA: the 3-line caption under the button (277 + 72) ran into the divider at 340 in the prototype */
@media (min-width:1200px){.ct-list{top:376px}}

/* AI flow: the "You ask" → "AI inside" connector (.ln.q) was stroke:none, so the yellow dot travelled through empty space */
.ai-lines .ln.q{stroke:rgba(255,224,27,.7)}

/* "What's inside": flat Figma screenshots, bottom-right of the card, cut by its bottom edge (desktop); full image on tablet/phone */
@media (min-width:1200px){
  .ins .md-img{width:787px;height:254px;overflow:hidden;border-radius:16px 16px 0 0;box-shadow:0 0 0 1px rgba(19,19,19,.1)}
  .ins .md-img img{width:787px;height:auto}
}
@media (max-width:1199px){
  .ins .md-img{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(19,19,19,.1)}
  #mdRow.md-stack .md-img{margin:20px 0 0}
  #mdRow.md-stack .md-img img{width:100%}
}

/* The site's global `a:hover{color:yellow}` (0,1,1) beats prototype rules like `.sq-yel{color:#131313}` (0,1,0) on hover.
   Restore the prototype's hover colors (checked per link against the prototype with forced :hover). */
.mm-item:hover,.mm-card:hover,.mm-cta:hover,.sq-blue:hover,.bt-cap:hover,.p8-mcard:hover,.roi-cta:hover,.ct-btn:hover{color:#fff}
.sq-yel:hover,.ft-soc:hover{color:#131313}
.p6-about:hover,.ft-talk:hover{color:#f6f6f6}