/* Employee-app showcase (views/partials/app-showcase.ejs) + hero phone overlay
   for product landings. Wears the landing's accent (--lp-accent, blue by
   default); phone frames are the site's deep navy so the app's own green UI
   reads as a screen, not as a second brand colour. All rules scoped. */
.app-show{--as-accent:var(--lp-accent,#0C66E4);--as-ink:#172b46;--as-muted:#53647a;--as-line:#dae4f0;background:linear-gradient(180deg,#f3f7fe 0%,#fff 100%);padding:88px 20px 84px}
.app-show__inner{max-width:1180px;margin:0 auto}
.app-show__head{max-width:720px;margin:0 auto 40px;text-align:center}
.app-show__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:#EBF3FE;color:var(--as-accent);font-size:12px;margin-bottom:14px}
.app-show__badge:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--as-accent)}
.app-show h2{font-weight:700;font-size:clamp(22px,2.4vw,32px);line-height:1.7;color:var(--as-ink);margin:0 0 10px}
.app-show__head>p{font-size:15px;line-height:2.05;color:var(--as-muted);margin:0}
.app-show__platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.app-show__platforms li{display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 16px;border-radius:999px;background:#fff;border:1px solid var(--as-line);font-size:13px;font-weight:600;color:var(--as-ink)}
.app-show__platforms svg{width:17px;height:17px;fill:none;stroke:var(--as-accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-show__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;list-style:none;margin:0;padding:0}
.app-show__phone{margin:0 auto 22px;width:min(220px,100%);padding:7px;background:#0f1f38;border-radius:32px;box-shadow:0 34px 50px -30px #0f1f388c}
.app-show__phone img{display:block;width:100%;height:auto;border-radius:26px}
.app-show__text{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.app-show__icon{grid-row:span 2;align-self:start;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--as-line),0 8px 18px -12px #0c66e466}
.app-show__icon svg{width:22px;height:22px;fill:none;stroke:var(--as-accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-show h3{font-size:16px;font-weight:700;line-height:1.7;color:var(--as-ink);margin:0}
.app-show__text p{grid-column:2;font-size:13px;line-height:1.95;color:var(--as-muted);margin:2px 0 0}
.app-show__cta{text-align:center;margin-top:40px}
.app-show__cta a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 26px;border-radius:10px;background:var(--as-accent);color:#fff;font-size:14px;font-weight:700;transition:background .18s}
.app-show__cta a:hover{background:#0956c4}
.app-show :is(a):focus-visible{outline:3px solid var(--as-accent);outline-offset:4px}

/* Hero: the web panel with the app in front of it. */
.lp-hero-stage{position:relative;width:100%;display:flex;justify-content:center}
.lp-hero-phone{position:absolute;bottom:-18px;left:calc(50% - 33.5% - 10px);width:min(150px,15%);padding:5px;background:#0f1f38;border-radius:22px;box-shadow:0 26px 40px -16px #0f1f3899;transform:rotate(-4deg)}
.lp-hero-phone img{display:block;width:100%;height:auto;border-radius:17px}

@media (max-width:1080px){.app-show__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 26px}}
@media (max-width:1023px){.lp-hero-phone{left:calc(50% - 37.5% - 6px)}}
@media (max-width:767px){
  .app-show{padding:56px 0 52px}
  .app-show__head{padding:0 18px;margin-bottom:26px}
  .app-show__head>p{font-size:14px}
  .app-show__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 18px 16px;scrollbar-width:none}
  .app-show__list::-webkit-scrollbar{display:none}
  .app-show__list li{flex:0 0 74%;scroll-snap-align:center}
  .app-show__phone{width:min(220px,100%);margin-bottom:18px}
  .app-show__cta{padding:0 18px;margin-top:22px}
  .app-show__cta a{width:100%}
  .lp-hero-phone{width:22%;left:2%;bottom:-12px;padding:3px;border-radius:13px}
  .lp-hero-phone img{border-radius:10px}
}