/* ============================================================
   AD Computer Management — page-scoped styles
   All selectors scoped under #ad-comp-mgmt-main-container
   Reuses framework droid-* classes; no redefinitions here.
   Tone rhythm: dark banner -> light -> dark -> light -> dark -> light CTA
   ============================================================ */

#ad-comp-mgmt-main-container {
    font-size: 13px;
    overflow-x: hidden;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    /* #5e5e5e is the house body/heading grey on light bands
       (active-directory-reporting-tool + -auditing-tool both use it) */
    color: #5e5e5e;
}

/* Multi-line H2s read as oversized at the default `normal` line-height;
   1.4em matches active-directory-automation-tool. */
#ad-comp-mgmt-main-container .droid-section-main-title h2 {
    line-height: 1.4em;
}

#ad-comp-mgmt-main-container h1,
#ad-comp-mgmt-main-container h2,
#ad-comp-mgmt-main-container h3,
#ad-comp-mgmt-main-container h4 {
    margin: 0;
}

#ad-comp-mgmt-main-container p {
    margin: 0;
}

#ad-comp-mgmt-main-container a { text-decoration: none; color: inherit; }

/* ============================================================
   1. HERO BANNER — DARK theme, two-column with a computer-lifecycle
   illustration plate on the right. The dark teal ground is
   /active-directory-contact-management-tool's banner treatment; it opens the
   page's dark → light → dark → light → dark → light rhythm, and sits a shade
   lighter than the lifecycle band so the two darks stay distinguishable.
   ============================================================ */

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-section {
    background: linear-gradient(45deg, #0c0721, #07282e);
    color: #d6e2e7;
    padding: 146px 15px 56px;
    position: relative;
    overflow: hidden;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(31, 140, 224, 0.26), transparent 70%);
    top: -140px;
    right: -120px;
    pointer-events: none;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    max-width: 1300px;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-content {
    flex: 1 1 460px;
    max-width: 640px;
    text-align: left;
}

/* the h1 is split the way the contact-management banner splits its own: ONE size
   throughout (the wrapper's 2.3em = 29.9px), with the product name set apart by
   weight and colour only — no droid-banner-lg-title, which would scale it 1.2x.
   #9de2ff is the same highlight the lifecycle and attribute headings use. */
#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-title {
    color: #ffffff;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-hlt {
    color: #9de2ff;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-quote {
    color: #6fd8ff;
    font-family: poppins-medium, Arial, sans-serif;
    font-style: italic;
    /* border-left: 3px solid rgba(111, 216, 255, 0.5); */
    padding-left: 2px;
    margin: 18px 0 20px;
    line-height: 1.55em;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-desc {
    color: #d6e2e7;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-desc .work-sans-medium {
    color: #4fdde4;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-btn-wrap {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- banner RHS: computer-lifecycle illustration plate ---- */

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-plate {
    flex: 0 1 550px;
    max-width: 550px;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-banner-plate img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   2. SHARED SECTION WRAPPERS
   ============================================================ */

#ad-comp-mgmt-main-container .ad-comp-mgmt-section {
    position: relative;
}

/* ============================================================
   §3 LIFECYCLE (DARK navy band) — design ported from
   /active-directory-user-management §3: centred header, three points beside the
   illustration, the remaining points in a two-column grid below.
   ============================================================ */

#ad-comp-mgmt-main-container .ad-comp-mgmt-subsection {
    padding: 60px 15px;
    position: relative;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-subsection.is-dark {
    background: linear-gradient(135deg, #001C35 0%, #00254a 100%);
    color: #ffffff;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-subsection-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-subsection.is-dark .ad-comp-mgmt-section-title h2 {
    color: #ffffff;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-subsection.is-dark .ad-comp-mgmt-section-desc {
    color: #d9e0ee;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-lifecycle-section .lifecycle-highlight {
    color: #00c5ff;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 48px auto 0;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.media-right {
    flex-direction: row-reverse;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-media img {
    width: 100%;
    height: auto;
    max-width: 500px;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-list {
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    text-align: left;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid #0d2b451a;
}

#ad-comp-mgmt-main-container .is-dark .ad-comp-mgmt-feature-item {
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.is-dense {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: center;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.is-dense .ad-comp-mgmt-feature-list {
    align-self: end;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.is-dense.media-right .ad-comp-mgmt-feature-media {
    grid-column: 2;
    grid-row: 1;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.is-dense.media-right .ad-comp-mgmt-feature-list {
    grid-column: 1;
    grid-row: 1;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-belowgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 40px;
    max-width: 1180px;
    margin: 34px auto 0;
    text-align: left;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-belowgrid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 40px) / 2);
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-icon {
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d2b450f;
}

#ad-comp-mgmt-main-container .is-dark .ad-comp-mgmt-feature-icon {
    background: rgba(255, 255, 255, 0.07);
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-aqua   { --acm-accent: #49f2d6; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-azure  { --acm-accent: #49acf2; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-indigo { --acm-accent: #8888f2; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-orchid { --acm-accent: #bc6ff2; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-coral  { --acm-accent: #f28f49; }

#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-teal   { --acm-accent: #0b5f74; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-blue   { --acm-accent: #1361b5; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-navy   { --acm-accent: #0a3d6e; }

#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-sky    { --acm-accent: #58caff; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-violet { --acm-accent: #c4b5fd; }
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-amber  { --acm-accent: #fcd34d; }

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-item h3,
#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-item .ad-comp-mgmt-feature-icon {
    color: var(--acm-accent);
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-item h3 {
    margin-bottom: 0;
    font-weight: 400;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-item .droid-section-sub-title {
    margin-bottom: 10px;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-item .droid-section-sub-title-desc {
    color: #5e5e5e;
}

#ad-comp-mgmt-main-container .is-dark .ad-comp-mgmt-feature-item .droid-section-sub-title-desc {
    color: #c9d4e8;
}

/* a phrase in the description picks up its own card's heading colour */
#ad-comp-mgmt-main-container .ad-comp-mgmt-feature-item .ad-comp-mgmt-feature-hl {
    color: var(--acm-accent);
}

/* the amber heading glares when it runs across a whole clause of body text, so its
   highlight is the same yellow taken down in saturation */
#ad-comp-mgmt-main-container .ad-comp-mgmt-accent-amber .ad-comp-mgmt-feature-hl {
    color: #e5cd85;
}

/* ============================================================
   §4 GROUP MEMBERSHIP — the ATTRIBUTES section's 2-col layout (LIGHT band)
   The points use §3's feature-item cards in their light-band colours (teal, blue,
   navy accents from /active-directory-group-management's light band).
   ============================================================ */

#ad-comp-mgmt-main-container .ad-comp-mgmt-group-section {
    background-color: #EFF8FF;
    /* 66px, not 70px: the other two bands close at 66 and this one read deeper */
    padding: 62px 15px 66px;
    position: relative;
    text-align: left;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-group-title h2 {
    color: #5e5e5e;
}

/* this band's accent is amber — the one warm note against the blues either side
   of it. #aa5e00 clears 4.5:1 on the #EFF8FF ground. */
#ad-comp-mgmt-main-container .ad-comp-mgmt-group-title span,
#ad-comp-mgmt-main-container .ad-comp-mgmt-group-desc-hl {
    color: #aa5e00;
}

/* centred heading + lead-in, uncapped so the heading starts where the row below
   it starts */
#ad-comp-mgmt-main-container .ad-comp-mgmt-group-header {
    position: relative;
    text-align: center;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-group-main-desc {
    color: #5e5e5e;
    /* 13.65px, as in the Lifecycle band */
    font-size: 1.05em;
    text-align: center;
    padding: 0 20px;
    margin: 28px auto 0;
    max-width: 880px;
}

/* the row below it: point list on the left, illustration on the right, spanning
   the container with no side margin. Safe to run edge to edge because the
   illustration column GROWS into the remainder — with a fixed-width illustration,
   space-between would dump the leftover width into the 50px gutter instead. */
#ad-comp-mgmt-main-container .ad-comp-mgmt-group-content-wrap {
    display: flex;
    /* reversed: the illustration takes the left, the point list the right. Done
       with row-reverse rather than order so the DOM keeps the points first,
       which is the order the mobile stack and a screen reader want. */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
    margin: 40px 0 0;
}

/* the illustration column (transparent PNG, so no frame): the row's remainder */
#ad-comp-mgmt-main-container .ad-comp-mgmt-group-image {
    flex: 1 1 0;
    min-width: 0;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-group-image img {
    width: 100%;
    height: auto;
}

/* the point cards — the row's block, 26px between cards as in §3 */
#ad-comp-mgmt-main-container .ad-comp-mgmt-group-cards {
    flex: 0 1 50%;
    max-width: 50%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
    text-align: left;
}

/* ============================================================
   §5 ATTRIBUTES — 2-col bulleted list + illustration (DARK navy-to-teal band)
   (REUSED from /active-directory-user-management-tool §5, image on the right)
   ============================================================ */

#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-section {
    background: linear-gradient(45deg, #000628, #004f4a);
    padding: 62px 15px 66px;
    position: relative;
    /* h2 #ffffff > sub-heading #9cc9ff > all copy rgb(255 255 255 / 90%).
       Checked against the LIGHTER gradient end (#004f4a), the worst case. */
    color: rgb(255 255 255 / 90%);
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-section .ad-comp-mgmt-section-title h2 {
    color: #ffffff;
}

/* the same cyan as the Lifecycle band: both dark bands share one accent */
#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-section .attributes-highlight {
    color: #9de2ff;
}

/* centred heading + lead-in, uncapped so the heading starts where the row below
   it starts */
#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-header {
    position: relative;
    text-align: center;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-section-desc {
    color: rgb(255 255 255 / 90%);
    /* 13.65px, as in the Lifecycle band */
    font-size: 1.05em;
    text-align: center;
    padding: 0 20px;
    margin: 28px auto 0;
    max-width: 880px;
}

/* the row spans the container with no side margin: point list on the left,
   illustration on the right, the illustration growing into the remainder so the
   50px gutter stays 50px. */
#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
    margin: 40px 0 0;
}

/* the illustration column (transparent PNG, so no frame - unlike a product
   screenshot, which would need one): the row's remainder */
#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-image {
    flex: 1 1 0;
    min-width: 0;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-image img {
    width: 100%;
    height: auto;
}

/* the point cards — the row's block, 26px between cards as in §3 */
#ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-cards {
    flex: 0 1 50%;
    max-width: 50%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
    text-align: left;
}

/* ============================================================
   §6 WHAT MAKES ADMINDROID STAND OUT — tabbed screenshot gallery (LIGHT band)
   Mirrors the section above the CTA on /microsoft-365-reminder-and-follow-up-agents.
   Base layout comes from ComplianceStyle.css, which is authored for a DARK band —
   the overrides below are the same ones reminders-and-followups.css applies to make
   it read on light, and they need !important to beat the inline colours compliance.js
   writes onto the active tab.
   ============================================================ */

#ad-comp-mgmt-main-container .ad-comp-mgmt-standout-section {
    background: #f6f9ff;
    padding: 62px 15px 40px;
    position: relative;
    overflow: hidden;
    color: #5e5e5e;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-standout-header {
    text-align: center;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-standout-title h2 {
    color: #5e5e5e;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-standout-highlight {
    color: #1361b5;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-standout-quote {
    display: inline-block;
    position: relative;
    max-width: 760px;
    margin: 8px auto 0;
    border-radius: 10px;
    font-style: oblique;
    color: #4c718f;
}

/* the glyph is scaled and re-tucked to the sentence's new 14.6px: 3em beside the
   old 17.2px text left it looking oversized and riding too high */
#ad-comp-mgmt-main-container .ad-comp-mgmt-standout-quote i {
    position: absolute;
    top: -5px;
    left: -17px;
    font-size: 2.5em;
    opacity: 0.1;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-standout-quote p {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 6px;
    /* the wrapper carries .work-sans-regular, but droid-section-sub-title sets
       poppins-medium on the <p> itself, and a rule on the element beats the
       family it would otherwise inherit. Its 1.2em goes with it — 1.02em of the
       wrapper's 14.3px lands the sentence at ~14.6px. */
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.02em;
}

/* --- light-band overrides for the shared report-board styles --- */
#ad-comp-mgmt-main-container .compliance-report-board-selection-div {
    display: none;
}

#ad-comp-mgmt-main-container .compliance-report-board-description {
    color: inherit !important;
    text-align: center;
}

/* the shared stylesheet drops the sentence to 0.85em, which reads small against
   this band's lighter ground */
#ad-comp-mgmt-main-container .compliance-report-board-description p span {
    color: inherit !important;
    font-size: 1em;
}

/* the page's own `p { margin: 0 }` reset outranks the shared stylesheet's caption
   margin, so the gap under the screenshot has to be set back here */
#ad-comp-mgmt-main-container .compliance-report-board-description p {
    margin-top: 10px;
    text-align: center;
}

#ad-comp-mgmt-main-container .compliance-rb-screenshot-pane .carousel .carousel-item > img {
    border-radius: 15px;
}

/* the slide tag: each screenshot's short label, lifted out of the caption into a
   chip over the screenshot's top-right corner with a caret pointing down at it.
   Hidden rather than removed off the centred slide, exactly as the caption is,
   so the space stays reserved and every slide's screenshot starts on one line. */
#ad-comp-mgmt-main-container .ad-comp-mgmt-slide-tag {
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
    width: fit-content;
    margin: 0 0 16px auto;
    padding: 9px 17px;
    background-color: #ffffff;
    border: 1px solid rgba(19, 97, 181, 0.18);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(16, 35, 60, 0.10);
    visibility: hidden;
    user-select: none;
}

/* the caret — a rotated square rather than a border triangle, so the chip's
   hairline carries on around the point. Set in from the right so it lands over
   the screenshot rather than on its corner. */
#ad-comp-mgmt-main-container .ad-comp-mgmt-slide-tag::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: -6px;
    width: 11px;
    height: 11px;
    background-color: #ffffff;
    border-right: 1px solid rgba(19, 97, 181, 0.18);
    border-bottom: 1px solid rgba(19, 97, 181, 0.18);
    transform: rotate(45deg);
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-slide-tag i {
    font-size: 17px;
    line-height: 1;
    color: #1361b5;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-slide-tag span {
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    line-height: 1.2;
    color: #10233c;
}

/* compliance.js marks the centred slide .tooltip; fadeIn is the same keyframe the
   shared stylesheet reveals the caption with */
#ad-comp-mgmt-main-container .carousel-item.tooltip .ad-comp-mgmt-slide-tag {
    visibility: visible;
    animation: fadeIn 0.3s ease;
}

/* the chip adds ~55px above the screenshot, and the shared height is an
   !important 440px, so the caption below would fall outside the carousel's
   overflow: hidden without this. Held to the wide layout on purpose: under
   1000px the shared sheet swaps in its own 550px, which the narrower screenshot
   already fits inside, and an ID-scoped rule out here would outrank it.
   490px fits the tallest slide (Flow Agents: chip + 329px screenshot + two-line
   caption + Know more link) with a few px to spare. */
@media (min-width: 1001px) {
    #ad-comp-mgmt-main-container .compliance-rb-screenshot-pane .carousel {
        height: 490px !important;
    }
}

#ad-comp-mgmt-main-container .compliance-rb-screenshot-pane {
    margin-bottom: 0;
}

/* the "Know more" links the spec attaches to Flow Agents and Delegation now sit
   inside each slide's own caption (.compliance-report-board-description) instead
   of a shared row below the gallery, so each only shows with its own slide.
   Same visual treatment the shared row used to carry. display:inline-block so
   the link sizes to its own text rather than the caption's full width, which
   would make the whole line clickable/hoverable as one target. */
#ad-comp-mgmt-main-container .compliance-report-board-description .know-more-link {
    display: inline-block;
    margin-top: 8px;
    color: #0e5aa7;
    font-family: poppins-medium, Arial, sans-serif;
    font-size: 0.85em;
    border-bottom: 1px solid rgba(14, 90, 167, 0.5);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#ad-comp-mgmt-main-container .compliance-report-board-description .know-more-link:hover {
    color: #10233c;
    border-color: #10233c;
}

/* ============================================================
   §7 CTA SECTION — treatment taken from /active-directory-user-management's bottom
   CTA (.ad-user-mgmt-cta-section): a dark navy card on a pale-blue ground, white
   sentence with a lilac highlight, magenta Download, then the demo line. That CTA
   pairs the copy with an illustration; this one has none, so the card centres its
   content and the copy is held to the reference's measure.
   ============================================================ */

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-section {
    background: #EFF8FF;
    padding: 70px 15px;
    color: #1f2c3e;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-container {
    max-width: 1100px;
    margin: 0 auto;
    color: #ffffff;
    background:
        radial-gradient(130% 130% at 88% -10%, rgba(0, 82, 170, 0.55) 0%, rgba(0, 82, 170, 0) 52%),
        radial-gradient(120% 120% at -6% 114%, rgba(213, 155, 255, 0.22) 0%, rgba(213, 155, 255, 0) 50%),
        linear-gradient(135deg, #001C35 0%, #00254a 100%);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 18px 38px rgba(3, 7, 22, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 50px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-content {
    flex: 0 1 820px;
    text-align: center;
    position: relative;
    z-index: 1;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-content h2 {
    color: #ffffff;
}

#ad-comp-mgmt-main-container .cta-title-hl {
    color: #7cc4ff;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-links .download-btn {
    font-size: 1.5em;
    background: linear-gradient(135deg, #c526a9, #8424c3);
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: poppins-medium, Arial, sans-serif;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-links .download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(132, 36, 195, 0.4);
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-demo-link {
    color: #c9d4e8;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-demo-link p {
    display: inline;
    margin: 0 6px 0 0;
    font-size: 0.95em;
    color: #c9d4e8;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-demo-link a.interlinking {
    color: #7cc4ff;
    border-bottom: 1px solid #7cc4ff;
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-cta-demo-link a.interlinking:hover {
    color: #ffffff;
    border-color: #ffffff;
}

/* ============================================================
   §5 EXPANDED-VIEW MODAL — same popup as /active-directory-contact-management-tool
   ============================================================ */

#ad-comp-mgmt-main-container .modal {
    background-color: rgb(16 25 34 / 0.9);
    top: 0px;
    z-index: 1001;
    transition: none;
    backdrop-filter: blur(5px);
    animation: none;
}

#ad-comp-mgmt-main-container .modal::before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--img-bg-docs-grad-bg-png);
    opacity: 0.2;
    background-position: bottom;
    z-index: 0;
    filter: blur(10px);
}

#ad-comp-mgmt-main-container .modal-content {
    background: rgb(153 157 163 / 0.25);
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 10px;
    padding: 20px;
    backdrop-filter: blur(8px);
    overflow: unset;
    width: 50%;
    margin-top: 160px;
    z-index: 1;
}

@media (max-width: 1440px) {
    #ad-comp-mgmt-main-container .modal-content {
        width: 62%;
    }
}

@media (max-width: 1024px) {
    #ad-comp-mgmt-main-container .modal-content {
        width: 75%;
    }
}

#ad-comp-mgmt-main-container .modal .arrow {
    position: absolute;
}

/* the arrows sit outside .modal-content, so a click that just misses the chevron
   lands on the backdrop and compliance.js closes the popup — widen the hit area */
#ad-comp-mgmt-main-container .modal .arrow::before {
    content: "";
    position: absolute;
    inset: -18px;
}

#ad-comp-mgmt-main-container .modal .arrow-right {
    right: -10%;
}

#ad-comp-mgmt-main-container .modal .arrow-left {
    left: -10%;
}

#ad-comp-mgmt-main-container .modal-title {
    position: static;
    background-color: transparent;
    padding: 0 46px 12px 0;
    text-align: left;
}

#ad-comp-mgmt-main-container .modal-title-icon-div {
    display: flex;
    align-items: center;
    gap: 12px;
}

#ad-comp-mgmt-main-container .modal-title-icon-div .compliance-rb-icons-div {
    display: block;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

#ad-comp-mgmt-main-container .modal-title-icon-div .compliance-rb-icons-div i {
    width: 42px;
    height: 42px;
    line-height: 42px;
    padding: 0;
    margin-bottom: 0;
    font-size: 1.35em;
    text-align: center;
    color: #0d2c3b;
    border-radius: 10px;
}

#ad-comp-mgmt-main-container .modal-title-icon-div .compliance-report-board-nav-label {
    width: auto;
    letter-spacing: 0.2px;
}

#ad-comp-mgmt-main-container .modal-title-icon-div .compliance-report-board-nav-label h3 {
    font-size: 1.15em;
}

#ad-comp-mgmt-main-container .modal-title-icon-div .compliance-report-board-nav-label p {
    width: 100%;
    margin-top: 4px;
    color: rgb(255 255 255 / 0.82);
}

#ad-comp-mgmt-main-container .modal-title span.close {
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    padding: 2px 0 0 0px;
    border: 0;
    float: none;
    text-align: center;
    color: #000000a1;
    font-size: 1.6em;
    background: #ffffffeb;
    border-radius: 0 8px 0 8px;
}

#ad-comp-mgmt-main-container .modal-image-div {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

#ad-comp-mgmt-main-container .modal-image {
    display: block;
    border-radius: 8px;
    border: 1px solid rgb(50 50 93 / 0.25);
    box-shadow: rgb(50 50 93 / 0.25) 0px 2px 5px -1px, rgb(0 0 0 / 0.3) 0px 1px 3px -1px;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-modal-dots {
    text-align: center;
    margin-top: 15px;
    line-height: 0;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-modal-dots button {
    display: inline-block;
    width: 12px;
    height: 8px;
    border-radius: 2px;
    border: none;
    margin: 0 1px;
    padding: 0;
    background: rgb(255 255 255 / 26%);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.3s linear;
}

#ad-comp-mgmt-main-container .ad-comp-mgmt-modal-dots button.is-active {
    background: rgb(255 255 255 / 83%);
}

#ad-comp-mgmt-main-container .modal.display-block {
    overflow: auto;
    overscroll-behavior: contain;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* below 1000px only the chip's box tightens — the label and glyph are already
   small enough to carry over unchanged */
@media (max-width: 1000px) {
    #ad-comp-mgmt-main-container .ad-comp-mgmt-slide-tag {
        margin-bottom: 14px;
        padding: 7px 14px;
    }

    /* compliance.js runs one slide at a time here, and the shared sheet's fixed
       550px / 420px track left a tall blank under the shrunken screenshot. Every
       slide is stacked in one grid cell instead, so the track takes the tallest
       slide's own height; the captions stay in flow (hidden, not removed, off the
       centred slide) so that height holds steady from slide to slide. */
    #ad-comp-mgmt-main-container .compliance-rb-screenshot-pane .carousel {
        display: grid;
        height: auto !important;
    }

    #ad-comp-mgmt-main-container .compliance-rb-screenshot-pane .carousel .carousel-item {
        grid-area: 1 / 1;
        position: relative;
        height: auto;
        min-height: 0;
    }

    #ad-comp-mgmt-main-container .compliance-report-board-description {
        position: relative;
    }
}

@media (max-width: 768px) {
    /* §3: the split and the grid below it drop to one column */
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.media-right {
        flex-direction: column;
        gap: 32px;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.is-dense {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.is-dense.media-right .ad-comp-mgmt-feature-media,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-split.is-dense.media-right .ad-comp-mgmt-feature-list {
        grid-column: auto;
        grid-row: auto;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-belowgrid {
        grid-template-columns: 1fr;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-belowgrid > :last-child:nth-child(odd) {
        justify-self: stretch;
        width: auto;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-feature-media {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Once these wrappers flip to a column, a px flex-basis is read as a HEIGHT and
       reserves empty space below short content — reset every stacked child to auto. */
    #ad-comp-mgmt-main-container .ad-comp-mgmt-banner-content,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-group-cards,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-group-image,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-cards,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-image {
        flex-basis: auto;
        max-width: 100%;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-banner-container {
        flex-direction: column;
        gap: 30px;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-banner-plate {
        display: none;
    }

    #ad-comp-mgmt-main-container .ad-comp-mgmt-group-content-wrap,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-content-wrap {
        flex-direction: column;
    }
    /* keep the illustration below the copy on mobile, matching the desktop reading order */
    #ad-comp-mgmt-main-container .ad-comp-mgmt-group-image,
    #ad-comp-mgmt-main-container .ad-comp-mgmt-attributes-image {
        order: 2;
    }
    #ad-comp-mgmt-main-container .ad-comp-mgmt-cta-container {
        padding: 30px 25px;
    }
}

@media (max-width: 697px) {

    #ad-comp-mgmt-main-container .ad-comp-mgmt-banner-section {
        padding: 100px 15px 30px;
    }
}