.cap { padding: 84px 0 76px; background: #fff; border-top: 1px solid #e6ece9; border-bottom: 1px solid #e6ece9; overflow: hidden; }
.cap-head { max-width: 760px; margin: 0 auto 48px; padding: 0 20px; text-align: center; }
.cap-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #e8f6f0; border: 1px solid #cfeade; color: #0f7a58; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cap-head h2 { margin: 18px 0 14px; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; letter-spacing: -.02em; color: #0B3D2E; }
.cap-head h2 em { font-style: normal; color: #1A9E72; }
.cap-head p { margin: 0; font-size: 17px; line-height: 1.6; color: #5b6b65; }

.cap-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; border-top: 1px solid #edf1ef; padding: 18px 0; }
.cap-row:last-child { border-bottom: 1px solid #edf1ef; }
.cap-label { padding-left: 28px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0B3D2E; }
.cap-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cap-track { display: flex; width: max-content; animation-duration: var(--cap-dur, 60s); animation-timing-function: linear; animation-iteration-count: infinite; }
.cap-track.cap-l { animation-name: capLeft; }
.cap-track.cap-r { animation-name: capRight; }
.cap-marquee:hover .cap-track { animation-play-state: paused; }
.cap-group { display: flex; flex-shrink: 0; gap: 14px; padding-right: 14px; }
@keyframes capLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes capRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.cap-pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px; background: #fff; border: 1px solid #e3e9e6; box-shadow: 0 1px 2px rgba(11,61,46,.05); font-size: 14px; font-weight: 600; color: #0B3D2E; white-space: nowrap; }
.cap-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1A9E72; flex-shrink: 0; }
.cap-pill.sec { background: #effaf5; border-color: #cfeade; color: #0b5a40; }
.cap-pill.sec::before { content: "\2713"; width: auto; height: auto; background: none; font-size: 13px; font-weight: 700; color: #1A9E72; }

@media (max-width: 700px) {
  .cap { padding: 60px 0 52px; }
  .cap-row { grid-template-columns: 1fr; gap: 12px; }
  .cap-label { padding-left: 20px; }
  .cap-pill { padding: 9px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-track { animation: none; }
  .cap-marquee { overflow-x: auto; }
}


/* dark theme matching the Live Demos section (cap-dark-v2) */
.cap { background-color: #07110e !important; color: #d6e6df;
  background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(26,158,114,.22), transparent 70%), linear-gradient(rgba(26,158,114,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(26,158,114,.07) 1px, transparent 1px) !important;
  background-size: auto, 44px 44px, 44px 44px !important;
  border-top: 1px solid rgba(26,158,114,.35) !important; border-bottom: 1px solid rgba(26,158,114,.35) !important; }
.cap-eyebrow { font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: #3ddba0; border: 1px solid rgba(61,219,160,.5); background: rgba(26,158,114,.08); border-radius: 0; padding: 10px 14px; }
.cap-head h2 { color: #fff; }
.cap-head h2 em { color: #3ddba0; }
.cap-head p { color: #a7c1b6; }
.cap-row { border-top-color: rgba(26,158,114,.28); }
.cap-row:last-child { border-bottom-color: rgba(26,158,114,.28); }
.cap-label { color: #cfe3da; font-family: 'IBM Plex Mono', monospace; }
.cap-pill { background: rgba(26,158,114,.08); border-color: rgba(61,219,160,.35); box-shadow: none; color: #d6e6df; }
.cap-pill::before { background: #3ddba0; }
.cap-pill.sec { background: rgba(26,158,114,.14); border-color: rgba(61,219,160,.5); color: #cfe3da; }
.cap-pill.sec::before { background: none; color: #3ddba0; }

/* dark theme matching the Live Demos section (cap-dark-v2) */
.cap { background-color: #07110e !important; color: #d6e6df;
  background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(26,158,114,.22), transparent 70%), linear-gradient(rgba(26,158,114,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(26,158,114,.07) 1px, transparent 1px) !important;
  background-size: auto, 44px 44px, 44px 44px !important;
  border-top: 1px solid rgba(26,158,114,.35) !important; border-bottom: 1px solid rgba(26,158,114,.35) !important; }
.cap-eyebrow { font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: #3ddba0; border: 1px solid rgba(61,219,160,.5); background: rgba(26,158,114,.08); border-radius: 0; padding: 10px 14px; }
.cap-head h2 { color: #fff; }
.cap-head h2 em { color: #3ddba0; }
.cap-head p { color: #a7c1b6; }
.cap-row { border-top-color: rgba(26,158,114,.28); }
.cap-row:last-child { border-bottom-color: rgba(26,158,114,.28); }
.cap-label { color: #cfe3da; font-family: 'IBM Plex Mono', monospace; }
.cap-pill { background: rgba(26,158,114,.08); border-color: rgba(61,219,160,.35); box-shadow: none; color: #d6e6df; }
.cap-pill::before { background: #3ddba0; }
.cap-pill.sec { background: rgba(26,158,114,.14); border-color: rgba(61,219,160,.5); color: #cfe3da; }
.cap-pill.sec::before { background: none; color: #3ddba0; }

/* gwx-cap-light: site green instead of dark forest for headings and labels in light mode */
html:not(.site-dark) .cap-head h2 { color: #0F7B4F; }
html:not(.site-dark) .cap-head h2 em { color: #1A9E72; }
html:not(.site-dark) .cap-label { color: #0F7B4F; }
/* gwx-cap-white: Capabilities band is white in light mode; dark mode keeps the dark look */
html:not(.site-dark) body .cap { background-color:#ffffff !important; background-image:none !important; color:#2b4339; border-top:1px solid #e6ece9; border-bottom:1px solid #e6ece9; }
html:not(.site-dark) body .cap-eyebrow { color:#0f7a58 !important; background:#e8f6f0 !important; border:1px solid #cfeade !important; }
html:not(.site-dark) body .cap-head h2 { color:#0F7B4F !important; }
html:not(.site-dark) body .cap-head h2 em { color:#1A9E72 !important; }
html:not(.site-dark) body .cap-head p { color:#5b6b65 !important; }
html:not(.site-dark) body .cap-row { border-color:#edf1ef !important; }
html:not(.site-dark) body .cap-label { color:#0F7B4F !important; }
html:not(.site-dark) body .cap-pill { background:#ffffff !important; border-color:#e3e9e6 !important; color:#2b4339 !important; box-shadow:none; }
html:not(.site-dark) body .cap-pill::before { background:#1A9E72 !important; }
html:not(.site-dark) body .cap-pill.sec { background:#effaf5 !important; border-color:#cfeade !important; color:#0b5a40 !important; }
html:not(.site-dark) body .cap-pill.sec::before { background:none !important; color:#1A9E72 !important; }