/* =======================================================================
   SHARED FLAT-IMAGE SECTION
   Reusable across pages. A full-section mockup PNG shown as-is, with
   invisible clickable <a> hotspots overlaid on the baked-in buttons.
   See docs/FLAT-IMAGE-SECTION-RULEBOOK.md
   ======================================================================= */

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* dark section = default; matched to image edge navy */
.flat-section{position:relative;overflow:hidden;padding:0;text-align:center;
  background:linear-gradient(180deg,#011b3b 0%,#00142f 45%,#001026 100%)}
.flat-section--light{background:#fcfcfc}

/* centred column that matches the header width (.header-inner = 1440 / 30px pad) */
.flat-wrap{position:relative;display:block;width:min(1440px, calc(100% - 60px));max-width:none;margin:0 auto;line-height:0;font-size:0}

/* image + 1.6% edge-feather so sides dissolve into the matched background */
.flat-img{display:block;width:100%;height:auto;margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.6%,#000 98.4%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 90.4%,transparent 100%)}

  /* invisible clickable anchor over a baked button (coords set per button, % of image) */
.flat-hotspot{position:absolute;z-index:2;display:block;cursor:pointer;background:transparent;border-radius:7px;
  transition:box-shadow .25s ease,background .25s ease,transform .18s ease}
.flat-hotspot:focus-visible{outline:3px solid #fff;outline-offset:3px}
.flat-hotspot:hover,.flat-hotspot:focus-visible{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  box-shadow:0 0 0 2px rgba(255,214,120,.9),0 10px 30px rgba(246,170,0,.5),0 0 34px rgba(246,170,0,.3)}
.flat-hotspot:active{transform:translateY(1px)}
/* blue glow — for secondary / outline buttons (e.g. "Talk to LEXI") */
.flat-hotspot--blue:hover,.flat-hotspot--blue:focus-visible{
  background:linear-gradient(180deg,rgba(90,150,220,.22),rgba(90,150,220,0));
  box-shadow:0 0 0 2px rgba(120,180,235,.9),0 10px 30px rgba(60,130,210,.55),0 0 34px rgba(60,130,210,.35)}

.application-flat-hotspot--blue:hover,.application-flat-hotspot--blue:focus-visible{
  background:linear-gradient(180deg,rgba(90, 151, 220, 0),rgba(90,150,220,0));
  box-shadow:0 0 0 2px rgba(120, 180, 235, 0),0 10px 30px rgba(60,130,210,.55),0 0 34px rgba(60,130,210,.35)}


@media (max-width:1100px){
  .flat-wrap{width:min(1440px, calc(100% - 48px))}
}
@media (max-width:767px){
  .flat-wrap{width:calc(100% - 28px)}
}
@media (prefers-reduced-motion:reduce){
  .flat-hotspot{transition:none}
}