/* V77 — mobile layer relationship + icon lock
   1. Mobile connected ecosystem uses a central connection spine with branches.
   2. Software cards have room to breathe and preserve logo aspect ratio.
   3. UI action icons are SVG line icons — no emoji glyphs.
*/

.layer-action-icon,.layer-action-arrow{display:grid;place-items:center;flex:0 0 auto}
.layer-action-icon{width:48px;height:48px;border:2px solid #ff8a00;border-radius:50%;box-shadow:0 0 16px rgba(255,138,0,.45)}
.layer-action-icon svg{width:25px;height:25px;fill:none;stroke:#f7f8fa;stroke-width:1.8}
.layer-action-icon svg path{fill:#f7f8fa;stroke:none}
.layer-action-arrow svg{width:24px;height:24px;fill:none;stroke:#f7f8fa;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:760px){
  /* Keep the three people cards readable, then clearly show the A layer as a bridge. */
  .live-layer{padding:0 18px 12px!important;overflow:visible!important}
  .layer-people{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .layer-people span{min-width:0!important;padding:12px 5px!important;font-size:.72rem!important;line-height:1.15!important}
  .layer-people span svg{width:30px!important;height:30px!important;margin-bottom:7px!important}
  .layer-flows-top{height:58px!important;padding:0!important;gap:8px!important}

  .layer-platform{min-height:168px!important;width:calc(100% + 18px)!important;margin:-5px -9px 0!important;border-radius:48% 48% 18% 18% / 28% 28% 18% 18%!important}
  .layer-platform img{width:92px!important;max-width:92px!important;height:auto!important}

  /* Mobile relationship diagram: one glowing spine from the layer, then a branch to every app. */
  .layer-flows-bottom{display:none!important}
  .layer-systems{
    position:relative!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 26px!important;
    padding:58px 4px 8px!important;
    margin-top:0!important;
    isolation:isolate;
  }
  .layer-systems:before{
    content:"";position:absolute;z-index:0;top:0;bottom:34px;left:50%;width:2px;transform:translateX(-50%);
    background:linear-gradient(180deg,#ffb45f 0,#ff8a00 62%,rgba(255,138,0,.18) 100%);
    box-shadow:0 0 10px rgba(255,138,0,.6);
  }
  .layer-systems:after{
    content:"CONNECTED SOFTWARE";position:absolute;top:25px;left:50%;transform:translateX(-50%);z-index:2;
    color:#ffb15e;font:700 .58rem/1 var(--display);letter-spacing:.18em;white-space:nowrap;
  }
  .layer-systems span,.layer-systems span:nth-child(n){
    position:relative!important;z-index:2;grid-column:auto!important;min-width:0!important;min-height:78px!important;
    padding:12px 8px!important;border-radius:13px!important;overflow:visible!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  }
  .layer-systems span:before{
    content:"";position:absolute;top:50%;height:2px;width:calc(50% + 14px);z-index:-1;
    background:linear-gradient(90deg,rgba(255,138,0,.15),#ff8a00);box-shadow:0 0 8px rgba(255,138,0,.45);
  }
  .layer-systems span:after{
    content:"";position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#fff0d7;border:2px solid #ff8a00;box-shadow:0 0 10px #ff8a00;
  }
  .layer-systems span:nth-child(odd):before{right:100%}
  .layer-systems span:nth-child(odd):after{right:calc(100% + 50% + 8px);transform:translate(50%,-50%)}
  .layer-systems span:nth-child(even):before{left:100%;transform:scaleX(-1)}
  .layer-systems span:nth-child(even):after{left:calc(100% + 50% + 8px);transform:translate(-50%,-50%)}

  /* Final card sits centered on the connection spine. */
  .layer-systems span:nth-child(7){grid-column:1 / -1!important;width:58%!important;justify-self:center!important}
  .layer-systems span:nth-child(7):before{display:none!important}
  .layer-systems span:nth-child(7):after{left:50%!important;right:auto!important;top:-13px!important;transform:translate(-50%,-50%)!important}

  .layer-systems img{display:block!important;max-width:104px!important;max-height:34px!important;width:auto!important;height:auto!important;object-fit:contain!important}
  .layer-systems .system-m365 img,.layer-systems .system-google img,.layer-systems .system-crm img{max-width:42px!important}
  .layer-systems small{font-size:.53rem!important;line-height:1.1!important;white-space:normal!important;text-align:center!important}
  .layer-systems .system-more b{font-size:1.15rem!important;letter-spacing:.18em!important;color:#ff8a00!important}

  .layer-mobile-close{padding-top:24px!important}
  .layer-action{min-height:72px!important;padding:10px 18px!important;gap:14px!important}
  .layer-action strong{font-size:1.12rem!important}
  .layer-action-icon{width:46px;height:46px}
  .layer-action-arrow{margin-left:auto}
}

@media(max-width:430px){
  .live-layer{padding-inline:13px!important}
  .layer-systems{gap:16px 20px!important;padding-inline:0!important}
  .layer-systems span,.layer-systems span:nth-child(n){min-height:74px!important;padding:10px 6px!important}
  .layer-systems img{max-width:92px!important;max-height:31px!important}
}