/* ========================================================= DevSecOps Loop Section — layout only (typography comes from base.css / .text-subline) ========================================================= */
.devsecops-section{background-color:var(--color-ink-25);}
.devsecops-section .devsecops-section-wrapper{gap:36px;padding-block:var(--section-padding);}
/* ---------- Header ---------- */
.devsecops-section .devsecops-section-wrapper .devsecops-section-header{gap:var(--space-md);max-width:920px;/* Figma hugs the heading at 904px;Google Barlow Condensed needs 917px to stay on one line */
 text-align:center;}
.devsecops-section .devsecops-section-wrapper .devsecops-section-header .devsecops-section-subline{max-width:752px;}
.devsecops-section .devsecops-section-wrapper .devsecops-section-header .devsecops-section-actions{width:100%;}
/* ---------- Diagram ---------- */
.devsecops-section .devsecops-section-wrapper .devsecops-section-diagram{width:100%;}
/* the animation sets its own aspect through the SVG viewBox */
.devsecops-section .devsecops-section-wrapper .devsecops-section-diagram svg{display:block;width:100%;height:auto;}
/* ---------- Large Desktop / Laptop ---------- */
@media (max-width:1199px){.devsecops-section .devsecops-section-wrapper{gap:var(--space-lg);}
}
/* ---------- Tablet ---------- */
@media (max-width:991px){.devsecops-section .devsecops-section-wrapper{gap:var(--space-md);}
.devsecops-section .devsecops-section-wrapper .devsecops-section-header{gap:var(--space-sm);}
}
.devsecops-actions-mobile{display:none !important;}
/* ---------- Mobile ---------- */
@media (max-width:767px){.devsecops-section .devsecops-section-wrapper .devsecops-section-header{text-align:left;align-items:flex-start;}
.devsecops-section .devsecops-section-wrapper{gap:var(--space-md);}
.devsecops-actions-desktop{display:none !important;}
.devsecops-actions-mobile{display:flex !important;width:100%;margin-top:10px;}
}
/* ---------- Small Mobile ---------- */