/* =========================================================================
   AppsKeep — "Our Apps" spotlight carousel
   Progressive enhancement:
     - no html.js  -> all six apps render as a stacked list of cards
     - html.js     -> one-at-a-time spotlight with controls + icon rail
   Breakpoints: desktop >=1024 side-by-side | tablet 640–1023 stacked |
                mobile <640 stacked, compact art, horizontally scrollable rail
   ========================================================================= */
.ak-spot{
  --ak-navy:#031B35; --ak-brand:#0DA495; --ak-link:#07716f; --ak-link-dark:#085958; --ak-tint:#f4fbfb;
  --ak-ink:#111827; --ak-text:#374151; --ak-muted:#4b5563; --ak-subtle:#6b7280; --ak-faint:#9ca3af;
  --ak-line:#e5e7eb; --ak-line-soft:#f3f4f6;
  --ak-ease:cubic-bezier(.22,.7,.2,1); --ak-fade:.6s;
  --ak-shadow:0 18px 40px -18px rgba(3,27,53,.28),0 4px 12px -6px rgba(3,27,53,.10);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ak-text); line-height:1.5; text-align:left;
}
.ak-spot *,.ak-spot *::before,.ak-spot *::after{box-sizing:border-box}
.ak-spot :where(img){display:block;max-width:100%}
.ak-spot :where(p,h3,ul){margin:0;padding:0}
.ak-spot :where(a){text-decoration:none}
.ak-spot :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ak-spot :focus{outline:none}
.ak-spot :focus-visible{outline:3px solid var(--ak-brand);outline-offset:3px;border-radius:8px}
.ak-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Slide content (shared by both modes) ---------- */
.ak-spot__stage{
  position:relative; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(70% 70% at 92% 105%,rgba(13,164,149,.55),rgba(13,164,149,0) 70%),
    radial-gradient(50% 60% at 0% 0%,rgba(13,164,149,.14),rgba(13,164,149,0) 70%),
    linear-gradient(145deg,#031B35 0%,#05263f 60%,#073a4c 100%);
}
.ak-spot__art{
  width:auto; height:auto; max-width:100%; max-height:300px; object-fit:contain;
  border-radius:12px; background:#0b2a44;
  box-shadow:0 28px 50px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
}
.ak-spot__copy{display:flex;flex-direction:column;padding:28px 24px}
.ak-spot__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ak-link)}
.ak-spot__eyebrow img{width:24px;height:24px;border-radius:7px}
.ak-spot__name{margin-top:12px;font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--ak-ink)}
.ak-spot__tagline{margin-top:6px;font-size:16.5px;font-weight:600;color:var(--ak-link-dark)}
.ak-spot__desc{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ak-muted)}
.ak-spot__features{list-style:none;margin-top:18px;display:grid;gap:9px}
.ak-spot__features li{position:relative;padding-left:32px;font-size:15px;line-height:21px;color:var(--ak-text)}
.ak-spot__features li::before{
  content:""; position:absolute; left:0; top:0; width:21px; height:21px; border-radius:50%;
  background:var(--ak-link) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.ak-spot__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ak-spot__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border-radius:8px;font-size:15.5px;font-weight:600;transition:background-color .2s,color .2s,border-color .2s}
.ak-spot__btn--primary{background:var(--ak-link);color:#fff}
.ak-spot__btn--primary:hover{background:var(--ak-link-dark);color:#fff}
.ak-spot__btn--ghost{border:2px solid var(--ak-link);color:var(--ak-link)}
.ak-spot__btn--ghost:hover{background:var(--ak-tint);color:var(--ak-link-dark)}

/* ---------- No-JS / base: stacked list of all six ---------- */
.ak-spot__slides{display:grid;gap:24px}
.ak-spot__slide{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--ak-line-soft);border-radius:20px;overflow:hidden;box-shadow:var(--ak-shadow)}
.ak-spot__ctrl,.ak-spot__rail{display:none}
@media (min-width:1024px){
  .ak-spot__slide{grid-template-columns:55% 45%}
  .ak-spot__stage{padding:34px 36px}
  .ak-spot__art{max-height:354px}
  .ak-spot__copy{padding:40px 48px 36px 46px}
  .ak-spot__name{font-size:34px}
}

/* ---------- Enhanced: spotlight carousel (html.js) ---------- */
.js .ak-spot__panel{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ak-line-soft);border-radius:20px;overflow:hidden;box-shadow:var(--ak-shadow);touch-action:pan-y}
.js .ak-spot__slides{order:1;display:grid;gap:0}
/* every slide shares one grid cell -> panel height = tallest slide, so no layout shift on change */
.js .ak-spot__slide{grid-area:1/1;border:0;border-radius:0;box-shadow:none;opacity:0;visibility:hidden;
  transition:opacity var(--ak-fade) var(--ak-ease),visibility 0s linear var(--ak-fade)}
.js .ak-spot__slide.is-active{opacity:1;visibility:visible;transition:opacity var(--ak-fade) var(--ak-ease),visibility 0s}
.js .ak-spot__art{transform:translateX(-14px) scale(.985);opacity:.6;transition:transform .9s var(--ak-ease),opacity .9s var(--ak-ease)}
.js .ak-spot__slide.is-active .ak-spot__art{transform:none;opacity:1}
.js .ak-spot__ctas{margin-top:auto;padding-top:24px}

/* controls: light bar under the slide on tablet/mobile */
.js .ak-spot__ctrl{order:2;display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--ak-line-soft);color:var(--ak-navy)}
.ak-spot__count{font-size:14px;color:var(--ak-subtle);font-variant-numeric:tabular-nums;white-space:nowrap}
.ak-spot__count b{color:var(--ak-navy);font-weight:700}
.ak-spot__bar{flex:1;height:3px;border-radius:3px;background:var(--ak-line);overflow:hidden}
.ak-spot__bar span{display:block;height:100%;background:var(--ak-brand);transform-origin:left center;transform:scaleX(0)}
.ak-spot__ctl{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ak-line);color:var(--ak-navy);transition:background-color .2s,border-color .2s,color .2s}
.ak-spot__ctl:hover{background:var(--ak-tint);border-color:#cdeaea}
.ak-spot__ctl--toggle{width:34px;height:34px;color:var(--ak-subtle)}
.ak-spot__ctl--toggle .ak-spot__icon-play{display:none}
.ak-spot__ctl--toggle[data-state="paused"] .ak-spot__icon-play{display:block}
.ak-spot__ctl--toggle[data-state="paused"] .ak-spot__icon-pause{display:none}

/* rail */
.js .ak-spot__rail{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:22px;
  background:linear-gradient(var(--ak-line),var(--ak-line)) left bottom/100% 1px no-repeat}
.ak-spot__tab{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 15px;border-radius:12px 12px 0 0;text-align:center;transition:background-color .25s}
.ak-spot__tab:hover{background:#f9fafb}
.ak-spot__tab img{width:52px;height:52px;border-radius:13px;margin-bottom:6px;filter:saturate(.55);opacity:.72;transition:filter .3s,opacity .3s,transform .3s}
.ak-spot__tab-name{font-size:14px;font-weight:600;line-height:1.2;color:var(--ak-muted);white-space:nowrap}
.ak-spot__tab-cat{font-size:12px;line-height:1.2;color:var(--ak-faint)}
.ak-spot__tab::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--ak-brand);transform:scaleX(0);transition:transform .45s var(--ak-ease)}
.ak-spot__tab[aria-current="true"]{background:var(--ak-tint)}
.ak-spot__tab[aria-current="true"] img{filter:none;opacity:1;transform:translateY(-2px)}
.ak-spot__tab[aria-current="true"] .ak-spot__tab-name{color:var(--ak-link-dark)}
.ak-spot__tab[aria-current="true"] .ak-spot__tab-cat{color:var(--ak-link)}
.ak-spot__tab[aria-current="true"]::after{transform:scaleX(1)}

/* desktop: side-by-side, controls overlaid on the bottom of the art stage */
@media (min-width:1024px){
  .js .ak-spot__slides{min-height:500px}
  .js .ak-spot__stage{padding:34px 36px 86px}
  .js .ak-spot__ctrl{position:absolute;z-index:2;left:0;bottom:0;width:55%;padding:0 36px 22px;border:0;gap:16px;color:#fff}
  .js .ak-spot__count{color:rgba(255,255,255,.6)}
  .js .ak-spot__count b{color:#fff}
  .js .ak-spot__bar{background:rgba(255,255,255,.18)}
  .js .ak-spot__ctl{border-color:rgba(255,255,255,.28);color:#fff}
  .js .ak-spot__ctl:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
  .js .ak-spot__ctl--toggle{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
}
/* tablet: stacked panel; rail becomes a 3 x 2 grid of horizontal tabs */
@media (min-width:640px) and (max-width:1023px){
  .js .ak-spot__rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;background:none}
  .ak-spot__tab{display:grid;grid-template-columns:44px 1fr;column-gap:12px;row-gap:2px;align-items:center;text-align:left;padding:10px 12px 12px;border-bottom:1px solid var(--ak-line)}
  .ak-spot__tab img{grid-row:1 / span 2;width:44px;height:44px;border-radius:11px;margin:0}
  .ak-spot__tab-name{grid-column:2;align-self:end}
  .ak-spot__tab-cat{grid-column:2;align-self:start}
  .ak-spot__tab::after{left:0;right:0;bottom:-1px}
  .ak-spot__tab[aria-current="true"] img{transform:none}
}
/* mobile: compact art, horizontally scrollable rail */
@media (max-width:639px){
  .js .ak-spot__rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:116px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  .js .ak-spot__rail::-webkit-scrollbar{display:none}
  .ak-spot__tab{scroll-snap-align:center}
  .ak-spot__stage{padding:16px}
  .ak-spot__art{max-height:210px;border-radius:9px}
  .ak-spot__copy{padding:22px 18px 20px}
  .ak-spot__name{font-size:26px}
  .ak-spot__features li{font-size:14.5px}
  .ak-spot__btn{flex:1 1 auto}
  .js .ak-spot__ctrl{padding:10px 12px;gap:10px}
  .js .ak-spot__rail{margin-left:-16px;margin-right:-16px;padding:0 16px;scroll-padding:0 16px}
  .ak-spot__tab img{width:44px;height:44px;border-radius:11px}
  .ak-spot__tab-name{font-size:13px}
}

/* reduced motion: no autoplay (JS), no progress, near-instant swaps */
@media (prefers-reduced-motion:reduce){
  .ak-spot *,.ak-spot *::before,.ak-spot *::after{transition-duration:.01ms!important}
  .ak-spot__ctl--toggle,.ak-spot__bar{visibility:hidden}
  .js .ak-spot__art{transform:none;opacity:1}
}
/* print: show every app */
@media print{
  .js .ak-spot__slide{grid-area:auto;opacity:1;visibility:visible}
  .js .ak-spot__slides{gap:16px}
  .ak-spot__ctrl,.ak-spot__rail{display:none!important}
}

/* full-bleed "panel" art: the image supplies its own gradient and composition */
.ak-spot__stage--panel{position:relative;padding:0;overflow:hidden;background:#031B35}
.js .ak-spot__stage--panel{padding:0}
.ak-spot__stage--panel .ak-spot__art{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:50% 42%;border-radius:0;box-shadow:none;background:none}
.js .ak-spot__stage--panel .ak-spot__art{transform:scale(1.04);opacity:1}
.js .ak-spot__slide.is-active .ak-spot__stage--panel .ak-spot__art{transform:none}
@media (max-width:1023px){.ak-spot__stage--panel{width:100%;aspect-ratio:16/9}}
@media (max-width:639px){.ak-spot__stage--panel{aspect-ratio:4/3}}