/* =========================================================================
   active-directory-group-and-membership-reports
   The page's only stylesheet. It imports nothing: everything the layout
   needs is declared here, and the page leans on the globally loaded sheets
   only for what they already give every page — general.css for the font
   helpers, .droid-banner-title, .droid-container and the buttons, and the
   droid-icons sheet for the glyphs. The expanded-view pop-up is declared
   here in full.

   general.css forces h1–h6 to inherit their font family, so every heading
   takes its face from the wrapper around it.

   Sections: (1) shared pieces, (2) banner, (3) dashboards, (4) free
   edition, (5) report galleries, (6) why AdminDroid, (7) closing CTA,
   (8) related pages, (9) pop-up.
   ========================================================================= */

/* =========================================================================
   1. SHARED PIECES
   Band shell, gradient-ink highlights, and the colour tones that ink the
   glyphs and keywords.
   ========================================================================= */
.ad-grp-rpt-section {
    position: relative;
    padding: 62px 15px 66px;
    text-align: center;
}

.ad-grp-rpt-container {
    max-width: 1400px;
    margin: 0 auto;
}

.ad-grp-rpt-grad-blue,
.ad-grp-rpt-grad-indigo {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.ad-grp-rpt-grad-blue {
    background-image: linear-gradient(90deg, #a9ccff, #2f8cff);
}

.ad-grp-rpt-grad-indigo {
    background-image: linear-gradient(90deg, #4338ca, #6d28d9);
}

/* Each tone sets the glyph / keyword ink. */
.ad-grp-rpt-tone-violet { --ink: #6d28d9; }
.ad-grp-rpt-tone-blue   { --ink: #1a56db; }
.ad-grp-rpt-tone-orange { --ink: #c2410c; }

.ad-grp-rpt-ink {
    color: var(--ink);
}

/* =========================================================================
   2. BANNER
   Copy on the left, the AD overview illustration on the right, over a
   dark navy gradient. .droid-banner-title sets the H1 scale (2.3em,
   1.4em leading); the columns are the inline-block pair the site's
   banners use, so they centre inside the wrap.
   ========================================================================= */
.ad-grp-rpt-banner {
    position: relative;
    z-index: 2;
    color: #ffffff;
    background-image: linear-gradient(
        133deg, #060c2d, #001c29);
}

/* The extra top clears the Active Directory sub-level navigation, which overlays
   <main>; 145px puts the title where the Password Reports tab puts its own. */
.ad-grp-rpt-banner-wrap {
    overflow: hidden;
    padding: 145px 0 70px;
    text-align: center;
}

.ad-grp-rpt-banner-wrap > div {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    width: 43%;
    max-width: 600px;
    margin: 20px;
    text-align: left;
}

/* Large screens: spread the copy and the illustration across the wrap. */
@media only screen and (min-width: 1024px) {
    .ad-grp-rpt-banner-wrap {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

.ad-grp-rpt-banner .ad-grp-rpt-banner-title {
    color: rgba(255, 255, 255, 0.95);
    span{
        font-family: 'poppins-semibold';
    }
}

.ad-grp-rpt-banner-desc {
    margin: 10px 0;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.01em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.ad-grp-rpt-banner .ad-grp-rpt-banner-free {
    margin: 18px 0 30px;
    font-size: 14.3px;
}

.ad-grp-rpt-banner-strong {
    color: #4dc8fce0;
}

.ad-grp-rpt-banner-lead {
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
}

.ad-grp-rpt-banner-free-word {
    color: #4dc8fce0;
}

/* The rotating report family: a one-line slot as tall as the paragraph's
   line, clipping the word as it slides up out of it and up into it from
   below. Its width is set by the page script and eases between words. */
.ad-grp-rpt-rotator {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    transition: width 0.35s ease;
}

.ad-grp-rpt-rotator-word {
    display: inline-block;
    transition: transform 0.35s ease, opacity 0.35s ease;
    background: linear-gradient(90deg, #3496ff, #00c6d7);
    font-family: 'work-sans-semibold';
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.ad-grp-rpt-rotator-word.is-out {
    transform: translateY(-100%);
    opacity: 0;
}

/* The start position for the incoming word, applied without a transition. */
.ad-grp-rpt-rotator-word.is-below {
    transform: translateY(100%);
    opacity: 0;
    transition: none;
}

/* Screen readers get the full list once instead of the moving word. */
.ad-grp-rpt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ad-grp-rpt-rotator,
    .ad-grp-rpt-rotator-word {
        transition: none;
    }
}

.ad-grp-rpt-banner-img {
    display: block;
    width: 480px;
    max-width: 100%;
    height: auto;
    margin: auto;
    object-fit: scale-down;
}

@media only screen and (max-width: 800px) {
    .ad-grp-rpt-banner-wrap {
        padding: 50px 0 7px;
    }
}

@media only screen and (max-width: 767.98px) {
    .ad-grp-rpt-banner {
        padding-bottom: 33px;
    }
}

/* Single column: the copy takes the full width and the illustration drops. */
@media only screen and (max-width: 698px) {
    .ad-grp-rpt-banner-wrap > .ad-grp-rpt-banner-text {
        width: auto;
    }

    .ad-grp-rpt-banner-wrap > .ad-grp-rpt-banner-media {
        display: none;
    }
}

/* =========================================================================
   3. DASHBOARDS BAND
   The microsoft-365-user-login-audit-reports dashboard slider on the light
   band: the two captures in one slidesjs stage, each in a frosted frame,
   with the pagination dots on a dashed rule below; the active slide's title
   and description fade in beside it. Sized like the
   active-directory-password-reports dashboard band: a 720 x 456 capture
   frame and 37% copy, 60px apart, with that band's 23.4px heading and
   13.65px copy. The ~16:9 captures are taller-cropped to the password
   capture's ratio, so the strip lost is on the right; the pop-up shows them
   whole. Below 1024px the pair stacks, slider first, at full width.
   ========================================================================= */
.ad-grp-rpt-dash-section {
    background: #EFF8FF;
}

.ad-grp-rpt-dash {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1240px;
    margin: 0 auto;
    text-align: left;
}

.ad-grp-rpt-dash-media {
    flex: 0 1 720px;
    min-width: 0;
}

.ad-grp-rpt-dash-body {
    flex: 0 0 37%;
    max-width: 37%;
}

.ad-grp-rpt-dash-media .slidesjs-container {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(13, 43, 69, 0.10);
}

.ad-grp-rpt-dash-slide {
    height: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.ad-grp-rpt-dash-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    border: 1px solid rgba(13, 43, 69, 0.08);
    border-radius: 8px;
    cursor: zoom-in;
}

.ad-grp-rpt-dash-media .slidesjs-navigation {
    display: none !important;
}

.ad-grp-rpt-dash-media .slidesjs-pagination {
    position: relative;
    display: block;
    float: right;
    margin: 15px;
    margin-right: 10%;
    -webkit-user-select: none;
    user-select: none;
}

.ad-grp-rpt-dash-media .slidesjs-pagination::after {
    content: "";
    position: absolute;
    top: 61%;
    left: 50%;
    width: 100%;
    border-bottom: 1px dashed #a9bfd4;
    transform: translate(-50%, -50%);
}

.ad-grp-rpt-dash-media .slidesjs-pagination-item {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
}

.ad-grp-rpt-dash-media .slidesjs-pagination-item:not(:last-child) {
    margin-right: 20px;
}

.ad-grp-rpt-dash-media .slidesjs-pagination-item a {
    display: block;
    width: 14px;
    height: 14px;
    padding: 2px;
    line-height: 8px;
    color: transparent;
    background: #6ca6e0;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}

.ad-grp-rpt-dash-media .slidesjs-pagination-item a.active {
    font-size: 0;
    transform: scale(1.6);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.102);
}

/* Hidden until the slider script fades in the active slide's copy. */
.ad-grp-rpt-dash-content {
    display: none;
}

.ad-grp-rpt-dash-title {
    font-size: 23.4px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}

.ad-grp-rpt-dash-title h2 {
    margin: 0;
    font-size: 23.4px;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    color: #1f2c3e;
}

.ad-grp-rpt-dash-key {
    color: #0a7ea4;
}

.ad-grp-rpt-dash-desc {
    margin: 10px 0;
}

.ad-grp-rpt-dash-desc p {
    margin: 0;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    line-height: 21.6775px;
    text-align: left;
    color: #5e5e5e;
}

@media only screen and (max-width: 1023.98px) {
    .ad-grp-rpt-dash {
        flex-direction: column;
        gap: 20px;
    }

    /* In a column the flex basis is a height, so the widths are set directly. */
    .ad-grp-rpt-dash-media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 720px;
    }

    .ad-grp-rpt-dash-body {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 350px) {
    .ad-grp-rpt-dash-media .slidesjs-pagination {
        margin-right: 5%;
    }

    .ad-grp-rpt-dash-media .slidesjs-pagination-item:not(:last-child) {
        margin-right: 12px;
    }

    .ad-grp-rpt-dash-media .slidesjs-pagination-item a {
        width: 10px;
        height: 10px;
    }
}

/* =========================================================================
   4. FREE EDITION BAND
   The active-directory-password-reports free-edition promo: on the light
   blue-to-cream band, one frosted white panel with a static outline, a
   travelling border segment and dot grids fading in at two opposite
   corners. The headline sits centred on top; below it the nine report
   families wrap as a wall of white pills whose glyphs walk blue, violet and
   amber, then a hairline, the two plain taglines and the Download button, all
   centred.
   ========================================================================= */
@property --ad-grp-rpt-free-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.ad-grp-rpt-free-section {
    color: rgb(61, 58, 58);
    background: linear-gradient(134deg, #c6e5ff, #fffed7);
}

.ad-grp-rpt-free-panel {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.2em 1.6em 2em;
    background: #ffffff8f;
    border-radius: 18px;
    box-shadow: rgba(24, 51, 122, 0.1) 0px 12px 30px;
}

/* ::before is the static outline, ::after the travelling segment — both a
   2px ring masked out of a full-size layer. */
.ad-grp-rpt-free-panel::before,
.ad-grp-rpt-free-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ad-grp-rpt-free-panel::before {
    background: #1a56db38;
}

.ad-grp-rpt-free-panel::after {
    background: conic-gradient(from var(--ad-grp-rpt-free-angle), #1a56db00 0deg, #5a85df 22deg, #9463e1 42deg, #6d28d900 62deg, #1a56db00 360deg);
    animation: ad-grp-rpt-free-border 12s linear infinite;
}

@keyframes ad-grp-rpt-free-border {
    to {
        --ad-grp-rpt-free-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ad-grp-rpt-free-panel::after {
        animation: none;
    }
}

.ad-grp-rpt-free-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: radial-gradient(#6d28d9 2.4px, transparent 2.6px);
    background-size: 26px 26px;
    opacity: 0.2;
    -webkit-mask-image: radial-gradient(26% 30% at 0% 0%, #000 0%, transparent 70%),
                        radial-gradient(26% 30% at 100% 100%, #000 0%, transparent 70%);
    mask-image: radial-gradient(26% 30% at 0% 0%, #000 0%, transparent 70%),
                radial-gradient(26% 30% at 100% 100%, #000 0%, transparent 70%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

.ad-grp-rpt-free-panel > :not(.ad-grp-rpt-free-dots) {
    position: relative;
    z-index: 1;
}

.ad-grp-rpt-free-title {
    margin-bottom: 15px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
    font-size: 2.2em;
    letter-spacing: 0.3px;
    text-align: center;
    color: #222222;
}

/* Near-black headline with two semibold highlights in the promo blue. */
.ad-grp-rpt-free-title .ad-grp-rpt-free-count,
.ad-grp-rpt-free-title .ad-grp-rpt-free-zero {
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
    color: #1b6fbf;
}

/* The password page's "Free Edition!" green, one step deeper so the 14px
   label clears 4.5:1 on its tint. */
.ad-grp-rpt-free-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 4px 12px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: normal;
    vertical-align: middle;
    color: #157a2b;
    background: #1a8f331a;
    border: 1px solid #1a8f334d;
    border-radius: 9999px;
}

.ad-grp-rpt-free-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 2em;
}

.ad-grp-rpt-free-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background-color: #ffffff;
    border: 1px solid #e3ecf7;
    border-radius: 999px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 12px;
}

.ad-grp-rpt-free-chip i {
    font-size: 16px;
}

.ad-grp-rpt-free-chip p {
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #454545;
}

.ad-grp-rpt-free-hair {
    width: 100%;
    height: 1px;
    margin: 22px 0;
    background-color: #e3ecf7;
}

.ad-grp-rpt-free-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 32px;
}

.ad-grp-rpt-free-tag p {
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.01em;
    line-height: 1.6;
    text-align: center;
    color: #454545;
}

.ad-grp-rpt-free-sep {
    margin: 0 0.75em;
    color: #b8c4d4;
}

.ad-grp-rpt-free-cta {
    display: flex;
    justify-content: center;
    margin-top: 2.2em;
}

/* .btn-dwn ships a 10px left margin for the banner pair; this one stands alone. */
.ad-grp-rpt .ad-grp-rpt-free-cta .btn-dwn {
    margin-left: 0;
    font-size: 1.15em;
}

/* general.css's a:hover { color: inherit } outranks .btn-df's white and pulls
   in the panel's dark text; keep the label white under .btn-dwn's opacity fade. */
.ad-grp-rpt .ad-grp-rpt-free-cta .btn-dwn:hover,
.ad-grp-rpt .ad-grp-rpt-free-cta .btn-dwn:focus-visible {
    color: #ffffff;
}

@media only screen and (max-width: 767.98px) {
    .ad-grp-rpt-free-panel {
        padding-left: 1.1em;
        padding-right: 1.1em;
    }
}

/* =========================================================================
   5. REPORT GALLERIES (sec-04 to sec-07)
   The active-directory-password-reports gallery, to its numbers: the card
   list (43.4%) beside a sticky capture panel (51.7%) with a 60px gutter,
   joined by a leader-line arrow from the panel to the active card. Bands
   alternate cards-left / cards-right (-rev). Geometry is shared; colour is
   set per gallery by its -light / -dark modifier, which also sets the one
   accent (--gal-accent) the active card, the panel title and the leader line
   (--gal-line) read. The panel sticks at 110px, clear of the site header.
   ========================================================================= */
.ad-grp-rpt-groups-section,
.ad-grp-rpt-membership-section {
    background: #EFF8FF;
}

.ad-grp-rpt-lifecycle-section {
    background: #0a151e;
}

.ad-grp-rpt-manager-section {
    background: #00102c;
}

.ad-grp-rpt-gal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    max-width: 1380px;
    margin: 30px auto 0;
    text-align: left;
}

.ad-grp-rpt-gal-rev {
    flex-direction: row-reverse;
}

.ad-grp-rpt-gal-cards-col {
    flex: 0 0 43.4%;
    max-width: 43.4%;
}

.ad-grp-rpt-gal-panel-col {
    position: sticky;
    top: 110px;
    flex: 0 0 51.7%;
    max-width: 51.7%;
}

/* ---- the column's own heading ---- */
.ad-grp-rpt-gal-head {
    margin: 25px 0 35px;
}

.ad-grp-rpt-gal-head-title {
    display: flex;
    align-items: flex-start;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
    font-size: 23.4px;
}

.ad-grp-rpt-gal-head-icon {
    margin-right: 8px;
    font-size: 28.08px;
    line-height: normal;
}

.ad-grp-rpt-gal-head-title h2 {
    font-size: 23.4px;
    line-height: normal;
    text-align: left;
}

.ad-grp-rpt-gal-head-desc {
    margin: 10px 0;
}

.ad-grp-rpt-gal-head-desc p {
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    line-height: 21.6775px;
    text-align: left;
}

/* ---- the cards ----
   The idle card carries the same 3px transparent left border the active one
   colours in, so activating a card never shifts its text. */
.ad-grp-rpt-gal-card {
    display: inline-block;
    width: 95%;
    max-width: 555px;
    margin: 0 0 30px;
    padding: 10px 15px;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    border-left: 3px solid transparent;
    border-radius: 6.5px;
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out;
}

.ad-grp-rpt-gal-card:hover {
    opacity: 1;
}

.ad-grp-rpt-gal-card.active {
    opacity: 1;
    border-left-color: var(--gal-accent);
    border-radius: 0 6.5px 6.5px 0;
}

.ad-grp-rpt-gal-card-content {
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

.ad-grp-rpt-gal-card h3 {
    margin: 0 0 12px;
    font-size: 15.6px;
    line-height: normal;
    text-align: left;
    transition: color 300ms ease-in-out;
}

.ad-grp-rpt-gal-card-desc {
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    line-height: 20.8px;
    text-align: left;
}

.ad-grp-rpt-gal-card-desc em {
    font-style: italic;
}

/* The doc's bolded phrase in each card, in the band's accent: the colour the
   open card's title turns, 4.5:1 or better on both palettes. */
.ad-grp-rpt-gal-card-desc .ad-grp-rpt-gal-hl {
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    color: var(--gal-accent);
}

/* ---- the demo button, right-aligned ---- */
.ad-grp-rpt-gal-btn-wrap {
    margin: 15px 0 5px;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    font-size: 9.1px;
    text-align: right;
}

.ad-grp-rpt .ad-grp-rpt-gal-card-btn {
    display: inline;
    padding: 5px 10px;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    font-size: 9.1px;
    color: #ffffff;
    background-color: #1361b5;
    border-radius: 3px;
    text-decoration: none;
}

/* ---- the capture panel ---- */
.ad-grp-rpt-gal-panel {
    margin-top: 30px;
    padding: 20px;
    border-radius: 6.5px;
}

.ad-grp-rpt-gal-panel-content {
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

.ad-grp-rpt-gal-panel h3 {
    margin: 0 0 8px;
    font-size: 17.16px;
    line-height: normal;
    text-align: left;
    color: var(--gal-accent);
}

.ad-grp-rpt-gal-shot-wrap {
    position: relative;
    margin-top: 12px;
    font-size: 10.4px;
}

.ad-grp-rpt-gal-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid #dddddd;
    border-radius: 3px;
    box-shadow: rgb(172, 172, 172) 0px 0px 3px 0px;
}

.ad-grp-rpt-gal-shot {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
    transition: opacity 200ms ease-in-out;
}

.ad-grp-rpt-gal-shot.is-loading {
    opacity: 0.35;
}

/* Collapsed to its glyph until the capture is hovered, then the label slides out. */
.ad-grp-rpt-gal-expand {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    padding: 2px 5px;
    font-size: 11.96px;
    text-align: center;
    color: aliceblue;
    background-color: #313951;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: rgb(68, 68, 68) 0px 0px 5px 0px;
    pointer-events: none;
}

.ad-grp-rpt-gal-expand-icon {
    display: flex;
    align-items: center;
    font-size: 16.15px;
    line-height: 1;
}

.ad-grp-rpt-gal-expand-text {
    display: block;
    overflow: hidden;
    max-width: 0;
    font-size: 10.17px;
    line-height: 1.4;
    white-space: nowrap;
    transition: max-width 300ms ease-in-out, padding-left 300ms ease-in-out;
}

.ad-grp-rpt-gal-shot-wrap:hover .ad-grp-rpt-gal-expand-text {
    max-width: 140px;
    padding-left: 5px;
}

/* ---- light galleries (sec-04, sec-06) ----
   A white card at 0.85 opacity on a near-white band barely reads as dimmed,
   so the light band also tints the open card. */
.ad-grp-rpt-gal-light {
    --gal-accent: #1361b5;
    --gal-tint: #eef6ff;
    --gal-line: #1361b5;
}

.ad-grp-rpt-gal-light .ad-grp-rpt-gal-head-icon,
.ad-grp-rpt-gal-light .ad-grp-rpt-gal-key {
    color: #0a7ea4;
}

.ad-grp-rpt-gal-light .ad-grp-rpt-gal-head-title h2 {
    color: #1f2c3e;
}

.ad-grp-rpt-gal-light .ad-grp-rpt-gal-head-desc p {
    color: #5e5e5e;
}

.ad-grp-rpt-gal-light .ad-grp-rpt-gal-card {
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 5px 0px;
}

.ad-grp-rpt-gal-light .ad-grp-rpt-gal-card.active {
    background-color: var(--gal-tint);
}

.ad-grp-rpt-gal-light .ad-grp-rpt-gal-card h3,
.ad-grp-rpt-gal-light .ad-grp-rpt-gal-card-desc {
    color: rgb(69, 69, 69);
}

.ad-grp-rpt-gal-light .ad-grp-rpt-gal-panel {
    background-color: #ffffff;
    box-shadow: rgba(13, 43, 69, 0.12) 0px 0px 15px 0px;
}

/* ---- dark galleries (sec-05, sec-07) ----
   One lifted surface tone; the open card is marked by opacity, the squared
   left corner and the accent bar alone. */
.ad-grp-rpt-gal-dark {
    --gal-accent: #58caff;
    --gal-line: #58caff;
}

.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-head-icon,
.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-key {
    color: #58caff;
}

.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-head-title h2 {
    color: #ffffff;
}

.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-head-desc p {
    color: #d6e2e7;
}

.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-card {
    background-color: #202636;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 5px 0px;
}

.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-card h3 {
    color: #d6e2e7;
}

.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-card-desc {
    color: #c3c3c3;
}

.ad-grp-rpt-gal-dark .ad-grp-rpt-gal-panel {
    background-color: #202636;
    box-shadow: rgb(8, 14, 22) 0px 0px 15px 0px;
}

/* After both palettes, and one class deeper than their resting h3 colour. */
.ad-grp-rpt-gal .ad-grp-rpt-gal-card.active h3 {
    color: var(--gal-accent);
}

@media only screen and (max-width: 1023.98px) {
    .ad-grp-rpt-gal,
    .ad-grp-rpt-gal-rev {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .ad-grp-rpt-gal-cards-col,
    .ad-grp-rpt-gal-panel-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ad-grp-rpt-gal-panel-col {
        position: static;
    }

    .ad-grp-rpt-gal-card {
        width: 100%;
        max-width: 100%;
    }

    .ad-grp-rpt-gal-head {
        margin-top: 0;
    }

    .ad-grp-rpt-gal-panel {
        margin-top: 0;
    }
}

/* =========================================================================
   6. WHY ADMINDROID BAND
   The active-directory-password-reports "Full Potential" card geometry: a
   centred H2 over nine fixed-height (120px) cards, 280-350px wide, wrapping
   three to a row and centred. The band and the card surface are the
   active-directory-reminder-and-follow-up-tool capabilities section's — the
   #eef3fb band, a white card with a faint navy edge, 12px corners and a soft
   two-layer navy shadow — with the white running to an aqua / peach / rose /
   lime tint per card in the password page's order. The reason sits top-left
   in dark text with its keyword in the theme's ink, the glyph is a 6em
   watermark at 15% inside the bottom-right corner (8px / 14px in, so never
   clipped), and a shine sweeps across on hover. The Explore All Reporting
   Capabilities link sits centred underneath.
   ========================================================================= */
.ad-grp-rpt-why-section {
    color: #14253d;
    background-color: #eef3fb;
}

.ad-grp-rpt-why-title {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
    font-size: 2.2em;
    text-align: center;
    color: #0E1742;
}

.ad-grp-rpt-why-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    max-width: 1240px;
    margin: 26px auto 0;
}

.ad-grp-rpt-why-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 280px;
    width: 300px;
    max-width: 350px;
    height: 120px;
    margin: 10px;
    padding: 20px 24px 10px;
    text-align: left;
    background: var(--why-fill);
    border: 3px solid rgb(255 255 255);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(20, 35, 70, 0.08), 0 2px 4px rgba(20, 35, 70, 0.04);
}

.ad-grp-rpt-why-cell .ad-grp-rpt-ink {
    font-family: 'work-sans-semibold', Arial, Helvetica, sans-serif;
}

.ad-grp-rpt-why-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: left 0.5s ease;
}

.ad-grp-rpt-why-cell:hover::before {
    animation: ad-grp-rpt-why-shine 0.5s ease-in-out;
}

@keyframes ad-grp-rpt-why-shine {
    from {
        left: -100%;
    }
    to {
        left: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ad-grp-rpt-why-cell:hover::before {
        animation: none;
    }
}

/* The four gradient variants of the white card: white across the text
   corner, running to the theme's tint at the bottom-right. Each also sets
   the ink for the keyword and the watermark, dark enough for 4.5:1 on the
   tinted end. */
.ad-grp-rpt-why-aqua {
    --why-fill: linear-gradient(135deg, #eff3ff 35%, #e4e7f9 100%);
    --ink: #155e75;
}

.ad-grp-rpt-why-peach {
    --why-fill: linear-gradient(135deg, #f9eed2 35%, #f9e0d2 100%);
    --ink: #9a3412;
}

.ad-grp-rpt-why-rose {
    --why-fill: linear-gradient(135deg, #f2d8dc 35%, #f2d8e2 100%);
    --ink: #86198f;
}

.ad-grp-rpt-why-lime {
    --why-fill: linear-gradient(135deg, #e3eec5 35%, #dcefd4 100%);
    --ink: #3f6212;
}

.ad-grp-rpt-why-cell p {
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    line-height: 1.4em;
    text-align: left;
    color: #34384f;
}

.ad-grp-rpt .ad-grp-rpt-why-mark {
    position: absolute;
    bottom: 8px;
    right: 14px;
    display: block;
    font-size: 5em;
    color: var(--ink);
    opacity: 0.15;
    pointer-events: none;
}

/* The cards that have their own product page carry a "Know more" to it, set
   like the card's text, with the band link's arrow. Pushed to the card's
   foot so the three line up whatever the text length above; positioned so
   the hover shine passes under it rather than over it. */
.ad-grp-rpt .ad-grp-rpt-why-cell-link {
    position: relative;
    z-index: 1;
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    margin-bottom: 4px;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    color: #34384f;
}

/* The active-directory-password-reports band link: centred under the grid,
   in the light bands' blue, with an arrow that shifts on hover. */
.ad-grp-rpt-why-more {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.ad-grp-rpt .ad-grp-rpt-why-link {
    display: inline-block;
    color: #1361b5;
    transition: color 0.3s;
}

.ad-grp-rpt .ad-grp-rpt-why-link:hover {
    color: #0d4a8a;
}

/* inline-block keeps the arrow out of the link's underline. */
.ad-grp-rpt-why-link::after,
.ad-grp-rpt-why-cell-link::after {
    font-family: "office365icons";
    content: "\e054";
    display: inline-block;
    margin-left: -1px;
    font-size: 1.1em;
    vertical-align: middle;
    text-decoration: none;
    transition: transform 0.3s;
}

.ad-grp-rpt-why-link:hover::after,
.ad-grp-rpt-why-cell-link:hover::after {
    transform: translateX(3px);
}

/* =========================================================================
   7. CLOSING CTA
   The active-directory-group-management closing card, ported as-is: a
   navy -> indigo -> teal gradient card on a white band, the white title,
   then the Download button with the Live Demo line stacked under it.
   ========================================================================= */
.ad-grp-rpt-cta {
    position: relative;
    overflow: hidden;
    padding: 64px 30px;
    background: #ffffff;
}

.ad-grp-rpt-cta-card {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    margin: 0 auto;
    padding: 52px 54px;
    border-radius: 20px;
    text-align: left;
    color: #14253d;
    background: linear-gradient(135deg, #00153a 0%, #0c0045 50%, #005247 100%);
}

/* The title wraps across its 816px measure, centred line by line. */
.ad-grp-rpt-cta-title {
    display: flex;
    justify-content: center;
    max-width: 816px;
    margin: auto;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
    font-size: 2.2em;
    text-align: center;
    color: #ffffff;
}

.ad-grp-rpt-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

/* general.css gives .download-btn its gradient and padding but leaves it
   inline-block, so the icon and the label need pairing up. */
.ad-grp-rpt-cta-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    text-decoration: none;
}

/* general.css's a:hover { color: inherit } would pull in the card's dark
   text colour; keep the label white and leave .download-btn's opacity fade. */
.ad-grp-rpt-cta-download:hover,
.ad-grp-rpt-cta-download:focus-visible {
    color: #ffffff;
}

.ad-grp-rpt-cta-demo p {
    margin: 0;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #ffffffe0;
}

.ad-grp-rpt-cta-demo a.interlinking {
    margin-left: 4px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    color: #c7e2ff;
    text-decoration: none;
    border-bottom: 1px solid rgb(216 235 255 / 40%);
}

@media only screen and (max-width: 768px) {
    .ad-grp-rpt-cta-card {
        padding: 36px 24px;
        text-align: center;
    }

    .ad-grp-rpt-cta-title {
        font-size: 21px;
    }

    .ad-grp-rpt-cta-actions {
        gap: 16px;
    }
}

/* =========================================================================
   8. RELATED PAGES
   The active-directory-password-reports related pages band, to its rendered
   numbers: three navy link cards on the dark band, the whole card the link,
   with "Know more" bottom-right and a chevron that shifts on hover.
   ========================================================================= */
.ad-grp-rpt-rel-section {
    background: #00102c;
}

.ad-grp-rpt-rel-title {
    display: flex;
    justify-content: center;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
    font-size: 2.2em;
    line-height: 40px;
    color: #ffffff;
}

.ad-grp-rpt-rel-title h2 {
    margin: 0;
}

.ad-grp-rpt-rel-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1240px;
    margin: 51px auto 0;
}

.ad-grp-rpt-rel-card {
    position: relative;
    flex: 0 1 calc(33.3333% - 16px);
    min-height: 210px;
    padding: 19.2px 19.2px 48px;
    border-radius: 6px;
    text-align: left;
    text-decoration: none;
    background: #0f2140;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: background-color 0.3s;
}

.ad-grp-rpt-rel-card:hover {
    background: #132849;
}

.ad-grp-rpt-rel-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-grp-rpt-rel-icon {
    display: flex;
    padding: 10px;
    border-radius: 6px;
    font-size: 1.7em;
    line-height: 1;
    color: #58caff;
    background: rgba(34, 211, 238, 0.15);
}

/* general.css sets every h3 in poppins-medium with !important; the password
   reports cards render theirs in poppins-regular, so only !important can
   match them. */
.ad-grp-rpt-rel-card h3 {
    margin: 0 0 8px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif !important;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.ad-grp-rpt-rel-card p {
    margin: 12px 0 0;
    font-size: 1.05em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.ad-grp-rpt-rel-more {
    position: absolute;
    right: 19.2px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #58caff;
}

.ad-grp-rpt-rel-more::after {
    content: "\e054";
    font-family: office365icons, sans-serif;
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.3s;
}

/* Underline on the label's own span, so it never runs under the gap or the
   chevron beside it. */
.ad-grp-rpt-rel-card:hover .ad-grp-rpt-rel-more-label {
    text-decoration: underline;
}

.ad-grp-rpt-rel-card:hover .ad-grp-rpt-rel-more::after {
    transform: translateX(3px);
}

@media only screen and (max-width: 1023.98px) {
    .ad-grp-rpt-rel-card {
        flex-basis: calc(50% - 12px);
    }
}

@media only screen and (max-width: 767.98px) {
    .ad-grp-rpt-rel-card {
        flex-basis: 100%;
    }
}

/* =========================================================================
   9. EXPANDED-VIEW POP-UP
   Click any dashboard or gallery capture to open it full size over a
   blurred navy backdrop; a click anywhere but the image, or Escape, closes
   it.
   ========================================================================= */
/* The site header and the Active Directory sub-level navigation stay fixed
   above the pop-up (about 150px tall), so the top padding keeps the frame
   centred in the space below them instead of sliding under them. */
.ad-grp-rpt-popup {
    position: fixed;
    inset: 0;
    z-index: 20;
    box-sizing: border-box;
    padding: 150px 20px 20px;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: rgba(16, 25, 34, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.ad-grp-rpt-popup.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.ad-grp-rpt-popup::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../images/bg/docs-grad-bg.png");
    background-position: bottom;
    opacity: 0.2;
    filter: blur(10px);
    pointer-events: none;
}

.ad-grp-rpt-popup-frame {
    position: relative;
    z-index: 1;
    /* width: 65%; */
    margin: auto;
    padding: 20px;
    background: rgba(153, 157, 163, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: zoom-out;
}

.ad-grp-rpt-popup-close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 30px;
    font-size: 1.5em;
    text-align: center;
    color: #6a6a6a;
    background: aliceblue;
    border: none;
    border-radius: 0 20% 0 20%;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.ad-grp-rpt-popup-close:hover {
    color: #383838;
}

.ad-grp-rpt-popup-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /* What the 170px of pop-up padding leaves, less the frame's 42px of
       padding and border and about 20px of air above and below it. */
    max-height: calc(100vh - 250px);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 5px;
}