/* ============================================================
   CGS Carbon — applications page styles
   Alternating application sections, in-page jump nav.
   ============================================================ */

.page-hero.on-photo{background-image:url(../img/apps-hero.jpg)}

/* ---------- in-page jump nav ---------- */
.jumpnav{position:sticky;top:82px;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.jumpnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:10px 0;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.jumpnav li{margin:0;flex:none}
.jumpnav a{display:inline-block;padding:9px 16px;border-radius:999px;font-size:.88rem;
  font-weight:600;color:var(--slate);letter-spacing:-.01em;white-space:nowrap}
.jumpnav a:hover{background:var(--tint);color:var(--teal-dark);text-decoration:none}

/* ---------- application sections ---------- */
.app-section{border-top:1px solid var(--line)}
.app-section:first-of-type{border-top:0}
.app-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:600;
  letter-spacing:.185em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.app-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}

@media(max-width:900px){
  .jumpnav{top:72px}
}