/* =========================================================================
   active-directory-password-reports

   The page is ordinary markup rather than Droid<X> partials, but it renders
   the same component classes. This file holds (1) the component rules it
   uses, (2) three sanctioned component reach-ins, (3) the shared page
   primitives and (4) the eleven bands.

   Section 4 onwards is what the component build expressed as Config on the
   partials. Config values reach the browser as Tailwind utility classes that
   tools/GenerateTailwindManifest.ps1 generates by scanning `Config = {}`
   blocks; a hand-written class="" attribute is not a Config block, so those
   utilities would silently stop being generated on the next rebuild and the
   page would lose its layout. Every one of them is therefore a rule here,
   keyed off the block's own class name. The markup carries no utility
   classes, and the page root font-size rides inline on the <main> tag.
   ========================================================================= */

/* ---- 1. component CSS this page renders — only the rules its markup uses,
        copied out of the Droid<X>.css files, component.css and general.css
        so the page loads no component stylesheet of its own. ---- */
/* ---- from component.css ---- */
.droid-image {
    width: 100%;
}
.droid-heading-component-wrapper {
    font-family: 'poppins-regular';
}
.droid-heading-component-wrapper:has(h1) {
    font-size: 2.3em;
    line-height: 1.4em;
}
.droid-heading-component-wrapper:has(h2) {
    font-size: 2.2em;
}
.droid-heading-component-wrapper:has(h3) {
    font-size: 1.2em;
}
.droid-heading-component-wrapper {
    display: flex;
}
.droid-description {
    font-size: 1.01em;
}
.droid-button.row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- from DroidMainBanner.css ---- */
.main-banner-section {
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.main-banner-section .banner-img-wrapper {
    position: absolute;
    top: 65%;
    opacity: 0.6;
    width: 100%;
    left: 0;
    max-height: 200px;
    overflow: hidden;
}
.main-banner-section .banner-img-wrapper img {
    width: 100%;
}
.main-banner-section .main-banner-wrap {
    padding: 50px 0px 70px 0px;
}
.main-banner-section .main-banner-wrap > div {
    display: inline-block;
    vertical-align: middle;
    width: 43%;
    max-width: 600px;
    margin: 20px;
    text-align: left;
    position: relative;
    z-index: 1;
}
.main-banner-section .main-banner-wrap .droid-banner-content .droid-description {
    line-height: 1.6em;
}
.main-banner-section .main-banner-wrap:not(:has(.main-banner-img)) {
    text-align: center;
}
.main-banner-section .main-banner-wrap:not(:has(.main-banner-img)) > div {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    display: block;
    text-align: center;
}
.main-banner-section .main-banner-wrap:not(:has(.main-banner-img)) .banner-title,
.main-banner-section .main-banner-wrap:not(:has(.main-banner-img)) .droid-banner-content,
.main-banner-section .main-banner-wrap:not(:has(.main-banner-img)) .banner-button-wrap {
    text-align: center;
}
.main-banner-section .main-banner-wrap:not(:has(.main-banner-img)) .banner-button-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.main-banner-section .main-banner-content .banner-title {
    font-size: unset;
}
@media (max-width: 698px) {
    .main-banner-section .main-banner-content {
        width: auto !important;
    }
}
.main-banner-section .main-banner-img img {
    max-width: 100%;
    display: block;
    height: 400px;
    object-fit: scale-down;
    margin: auto;
}
@media (max-width: 698px) {
    .main-banner-section .main-banner-img {
        display: none !important;
    }
    .main-banner-section .banner-svg {
        display: none !important;
    }
}
@media (max-width:800px) {
    .droid-main-banner.main-banner-section .main-banner-wrap {
        padding: 50px 0px 7px 0px;
    }
}

/* ---- from DroidSection.css ---- */
.droid-section {
    position: relative;
    padding: 40px 15px;
    text-align: center;
}
.droid-section .droid-section-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ---- from DroidSectionIntro.css ---- */
.droid-section-intro {
    margin: 0 auto;
    position: relative;
}
.droid-section-intro .droid-section-intro-text {
    display: inline-block;
    width: 52%;
    max-width: 750px;
    vertical-align: top;
    text-align: left;
    margin: 20px;
    line-height: 40px;
}
.droid-section-intro .droid-heading-component-wrapper {
    align-items: center;
    justify-content: center;
}
.droid-section-intro .droid-heading {
    letter-spacing: 0.3px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}
.droid-section-intro .droid-section-intro-text > .droid-description {
    font-size: 1.1em;
    padding: 5px 0px 5px 20px;
    line-height: 1.6em;
}
.droid-section-intro.droid-section-intro-no-media .droid-section-intro-text {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 10px;
}
@media (max-width: 1085px) {
    .droid-section-intro .droid-section-intro-text {
        width: 95%;
        max-width: 920px;
    }
}

/* ---- from DroidCard.css ---- */
.droid-card .droid-section-sub-title .droid-heading-component-wrapper {
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    font-size: inherit;
}
.droid-card-face.droid-card-face-v11 {
    display: flex;
    flex-direction: column;
    padding: 1.2em 1.8em 3em;
    border-radius: 10px;
    gap: 0.4em;
    position: relative;
    text-align: left;
}
.droid-card-face.droid-card-face-v11 .droid-card__icon {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff1f;
    font-size: 5em;
    flex-shrink: 0;
}
.droid-card-face.droid-card-face-v11.theme-aqua {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08), transparent 60%), linear-gradient(135deg, rgba(132, 207, 207, 0.28) 0%, rgba(139, 161, 231, 0.12) 100%);
    border-color: rgba(132, 207, 207, 0.35);
}
.droid-card-face.droid-card-face-v11.theme-peach {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08), transparent 60%), linear-gradient(135deg, rgba(231, 175, 147, 0.28) 0%, rgba(188, 191, 144, 0.12) 100%);
    border-color: rgba(231, 175, 147, 0.35);
}
.droid-card-face.droid-card-face-v11.theme-rose {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08), transparent 60%), linear-gradient(135deg, rgba(199, 116, 195, 0.28) 0%, rgba(211, 126, 132, 0.12) 100%);
    border-color: rgba(199, 116, 195, 0.35);
}
.droid-card-face.droid-card-face-v11.theme-lime {
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08), transparent 60%), linear-gradient(135deg, rgba(128, 191, 108, 0.28) 0%, rgba(127, 145, 209, 0.12) 100%);
    border-color: rgba(128, 191, 108, 0.35);
}
.droid-card[href] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: block;
}
.droid-card-face.droid-card-face-v30 {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgb(0 0 0 / 9%) 0px 3px 12px;
    color: #5e5e5e;
    text-align: left;
    height: 100%;
}
.droid-card-face.droid-card-face-v30::after {
    content: "\e054";
    font-family: office365icons, sans-serif;
    font-size: 1.5em;
    position: absolute;
    bottom: 8px;
    right: 8px;
    opacity: 0.2;
    transition: 0.3s;
    color: inherit;
}
.droid-card-face.droid-card-face-v30 .droid-card__title {
    display: flex;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    align-items: center;
    gap: 10px;
}
.droid-card-face.droid-card-face-v30 .droid-description-highlight {
    color: #0794a1;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
}
.droid-card-face.droid-card-face-v30.wrapped-icon {
    min-width: 270px;
    padding: 1.2rem;
}
.droid-card-face.droid-card-face-v30.wrapped-icon .droid-card__icon {
    font-size: 1.7em;
    background: #22d3ee26;
    padding: 10px;
    display: flex;
    border-radius: 6px;
}
.droid-card[href]:hover > .droid-card-face-v30::after {
    opacity: 0.6;
    transform: translateX(3px);
}
.droid-card-face {
    height: 100%;
}

/* ---- from DroidCardContainer.css ---- */
.droid-card-container--cols-3 > * {
    flex: 1 1 calc((100% - 2 * var(--droid-card-container-gap)) / 3);
    min-width: 0;
}
@media (max-width: 1024px) {
    .droid-card-container--cols-3 > * {
        flex: 1 1 calc((100% - var(--droid-card-container-gap)) / 2);
        min-width: 0;
    }
}
@media (max-width: 600px) {
    .droid-card-container--cols-3 > * {
        flex: 1 1 100%;
    }
}

/* ---- from DroidCTABanner.css ---- */
.droid-cta {
    padding: 2em;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}
.droid-cta.dark-green {
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e8f7 100%);
}
.droid-cta.dark-green .droid-cta-container {
    background: linear-gradient(135deg, #002a38 0%, #004d63 100%);
}
.droid-cta.dark-green .droid-cta-container::before {
    background-image: radial-gradient(#00ada84d 2px, transparent 0);
    -webkit-mask-image: linear-gradient(237deg, black 0, transparent 60%);
    mask-image: linear-gradient(237deg, black 0, transparent 80%);
}
.droid-cta .droid-cta-container {
    max-width: 1200px;
    padding: 3em 4em;
    margin: 40px auto;
    border-radius: 10px;
    color: #ffffff;
    position: relative;
    z-index: 3;
    overflow: hidden;
}
.droid-cta .droid-cta-container::before {
    content: "";
    position: absolute;
    background-size: 16px 16px;
    background-position: -19px -19px;
    top: 7px;
    right: 10px;
    width: 50%;
    height: calc(100% - 6px);
    pointer-events: none;
    z-index: -1;
}
@media (max-width: 768px) {
    .droid-cta .droid-cta-container .droid-cta-content .droid-heading {
        font-size: 0.8em;
    }
}
.droid-cta .droid-cta-live-demo {
    font-size: 1.1em;
    padding-top: 15px;
}
.droid-cta .droid-cta-live-demo p {
    font-family: 'work-sans-regular', sans-serif;
}
@media (max-width: 768px) {
    .droid-cta .droid-cta-live-demo {
        font-size: 1em;
    }
}

/* ---- from DroidPopup.css ---- */
.popup {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    position: fixed;
    inset: 0;
    background: #0000004d;
    align-items: center;
    z-index: 20;
    font-size: 13px;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
}
.popup.active {
    display: block;
    opacity: 1;
    visibility: visible;
}
.popup .popup-content-wraper {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: max-content;
    margin: auto;
    padding: 20px;
    background: radial-gradient(circle at 12% 28%, rgba(115, 120, 185, 0.65), transparent 55%), radial-gradient(circle at 78% 18%, rgba(95, 165, 200, 0.65), transparent 60%), radial-gradient(circle at 35% 82%, rgba(105, 115, 175, 0.62), transparent 60%), radial-gradient(circle at 88% 72%, rgba(105, 175, 205, 0.62), transparent 65%), radial-gradient(circle at 55% 45%, rgba(115, 145, 205, 0.58), transparent 60%);
    border-radius: 10px;
}
.popup .popup-content-wraper .popup-content {
    z-index: 2;
    width: 100%;
    background: rgb(255 255 255 / 90%);
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    display: flex;
    justify-content: center;
    gap: 3%;
    margin: auto;
}
.popup .popup-content-wraper .popup-content .popup-close {
    position: absolute;
    top: 0%;
    right: 0%;
    font-size: 24px;
    border: none;
    cursor: pointer;
    color: white;
    background: #82aec2;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px 8px 0px 15px;
}
.popup.popup-v2 {
    align-items: center;
    justify-content: center;
    background-color: rgba(16, 25, 34, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.popup.popup-v2.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}
.popup.popup-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/bg/docs-grad-bg.png);
    opacity: 0.2;
    background-position: bottom;
    z-index: 0;
    filter: blur(10px);
    pointer-events: none;
}
.popup.popup-v2 .popup-content-wraper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 65%;
    height: auto;
    padding: 20px;
    border-radius: 5px;
    cursor: zoom-out;
    z-index: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(153, 157, 163, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.popup.popup-v2 .popup-content-wraper .popup-content {
    background: transparent;
    padding: 0;
    border-radius: 5px;
    display: block;
}
.popup.popup-v2 .popup-content-wraper .popup-content img {
    border-radius: 5px;
    display: block;
    width: 100%;
}
.popup.popup-v2 .popup-content-wraper .popup-content .popup-close {
    color: #6a6a6a;
    font-size: 1.5em;
    position: absolute;
    top: 0;
    right: 0;
    background: aliceblue;
    width: 30px;
    height: auto;
    display: block;
    border-radius: 0% 20% 0 20%;
    text-align: center;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.popup.popup-v2 .popup-content-wraper .popup-content .popup-close:hover {
    color: #383838;
}

/* ---- from general.css ---- */
h3 {
    font-family: inherit !important;
    font-weight: inherit !important;
}
.fa-download:before {
    content: "\f019";
}
.fa-expand:before {
    content: "\f065";
}
.droid-banner-title {
    padding: 20px 0px;
    font-size: 2.3em;
    line-height: 1.4em;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}

/* =========================================================================
   2. SANCTIONED COMPONENT REACH-INS — sec-01 and sec-03.
   ========================================================================= */

/* The two-family rule: every .droid-button label otherwise renders system-ui.
   `.btn-df` covers the banner's and the promo panel's preset gradient buttons. */
.ad-pwd-rpt .droid-button.btn-df {
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
}

/* sec-10 keeps the DroidCTABanner dark-green theme's colours and takes the
   active-directory-reporting-tool page's bottom banner layout: everything
   centred, a 2.2em poppins-regular title with no weighted highlight. */
/* Dimensions follow the active-directory-group-management bottom banner:
   section padding 64px 30px; a 1100px-wide card, 302px tall (279px on phones),
   52px 54px padding (36px 24px on phones). Content is centred in that height. */
.ad-pwd-rpt .sec-10 {
    padding: 64px 30px;
}

.ad-pwd-rpt .sec-10 .droid-cta-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    max-width: 1100px;
    min-height: 302px;
    margin: 0 auto;
    padding: 52px 54px;
    border-radius: 20px;
    text-align: center;
}

.ad-pwd-rpt .sec-10 .droid-cta-content {
    max-width: 800px;
    margin: auto;
}

.ad-pwd-rpt .sec-10 .droid-heading-component-wrapper {
    display: flex;
    justify-content: center;
}

.ad-pwd-rpt .sec-10 .droid-cta-content .droid-heading {
    margin: 0 0 15px;
    font-size: 28.6px;
    letter-spacing: 0.3px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif !important;
}

.ad-pwd-rpt .sec-10 .droid-cta-content .droid-heading-highlight {
    color: inherit;
    font-family: inherit !important;
}

.ad-pwd-rpt .sec-10 .droid-cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ad-pwd-rpt .sec-10 .droid-cta-live-demo p {
    font-size: 13px;
}

@media (max-width: 768px) {
    .ad-pwd-rpt .sec-10 .droid-cta-container {
        min-height: 279px;
        padding: 36px 24px;
    }

    .ad-pwd-rpt .sec-10 .droid-cta-content .droid-heading {
        font-size: 23.4px;
    }
}

/* =========================================================================
   3. SHARED PAGE PRIMITIVES
   Blocks that repeat across bands: the rounded icon chip, the inline
   "View demo" link, and the sub-title / sub-title description pair that
   every report row and nav card uses.
   ========================================================================= */

/* Rounded tile holding a single glyph, centred. Its colours follow the
   group-management page: a neutral plate — white at 8% on a dark band, the
   page ink at 6% on a light band — and the glyph in the band's one accent, the
   hue the band's highlight, row headings and links also carry. */
.ad-pwd-rpt .ad-pwd-rpt-icon-chip {
    display: grid;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 6px;
    font-size: 18px;
}

/* The larger chip the promoted cells and the reminder nodes carry. */
.ad-pwd-rpt .ad-pwd-rpt-icon-chip.ad-pwd-rpt-icon-chip-lg {
    width: 44px;
    min-width: 44px;
    height: 44px;
    font-size: 20px;
}

/* The gradient is the tile's own --node-grad, set per tone on
   .ad-pwd-rpt-flow-node. */
.ad-pwd-rpt .sec-08 .ad-pwd-rpt-flow-node .ad-pwd-rpt-icon-chip {
    width: 58px;
    min-width: 58px;
    height: 58px;
    border-radius: 8px;
    font-size: 26px;
    color: #ffffff;
    background-image: var(--node-grad);
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.ad-pwd-rpt .sec-09 .ad-pwd-rpt-icon-chip {
    color: #58caff;
    background-color: #ffffff14;
}

/* The two band links sit in a centring flex row, which blockifies them. */
.ad-pwd-rpt .ad-pwd-rpt-band-link {
    display: inline-block;
}

/* The highlighted run inside each band's heading: the hero's lime, the light
   bands' teal-blue and the dark bands' sky — the three highlight colours the
   group-management page uses. sec-10's highlight is deliberately uncoloured
   and inherits the CTA's own white. */
.ad-pwd-rpt .sec-02 .droid-heading-highlight,
.ad-pwd-rpt .sec-06 .droid-heading-highlight,
.ad-pwd-rpt .sec-08 .droid-heading-highlight {
    color: #0a7ea4;
}

.ad-pwd-rpt .sec-07 .droid-heading-highlight,
.ad-pwd-rpt .sec-09 .droid-heading-highlight {
    color: #58caff;
}

/* =========================================================================
   4. BAND PADDING + BACKGROUNDS
   Nine of the eleven bands are the same shell; sec-04's accordion and sec-05's
   report rail both end tighter, their own bottom margin closing the gap.
   ========================================================================= */
.ad-pwd-rpt .ad-pwd-rpt-section {
    padding-top: 62px;
    padding-bottom: 66px;
}

.ad-pwd-rpt .sec-04,
.ad-pwd-rpt .sec-05 {
    padding-bottom: 66px;
}

/* The grounds follow the group-management page band for band, but every dark
   one is taken down to the catalog's very-dark end. The page's own chrome sets
   the floor: the navbar paints L=0.015 and the footer L=0.021, so a band has to
   sit BELOW those to read as dark rather than as more chrome. The four dark
   bands now run L=0.006-0.007 against the 0.014-0.029 they were. Three tones
   keep them apart: deep navy, ink slate and a blue-violet ink. All are catalog
   rows (color-theme.md 3a). */
.ad-pwd-rpt .sec-02,
.ad-pwd-rpt .sec-04,
.ad-pwd-rpt .sec-06 {
    background: #EFF8FF;
}

.ad-pwd-rpt .sec-08 {
    background: #E6F3FF;
}

.ad-pwd-rpt .sec-07 {
    background: #00102c;
}

.ad-pwd-rpt .sec-03 {
    background: linear-gradient(134deg, #c6e5ff, #fffed7);
    color: rgb(61, 58, 58);
}

.ad-pwd-rpt .sec-05,
.ad-pwd-rpt .sec-09 {
    background: #0a151e;
}

/* =========================================================================
   sec-01 — MAIN BANNER
   ========================================================================= */
/* The two stops are the dark ends of two catalog banner gradients
   (banner-dark-freetools #021018, banner-dark-teal #04141F). Their ratio is the
   same 1.2x the group-management page's #0d2c3b -> #0d363b pair has, so the
   45-degree wash reads the same; it just sits four times darker. */
.ad-pwd-rpt .sec-01 {
    background-image: linear-gradient(45deg, #021018, #04141F);
}

.ad-pwd-rpt .sec-01 .droid-heading-component-wrapper {
    color: #ffffff;
}

.ad-pwd-rpt .sec-01 .droid-description-highlight {
    color: #4ade80;
}

/* Title highlight: soft sky-blue to mint gradient (muted shades, not pure
   blue/green). `clone` keeps the full gradient on each line if it wraps. */
.ad-pwd-rpt .sec-01 .droid-heading-highlight {
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
    background: linear-gradient(90deg, #5bc0eb 0%, #6ddc9a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* DroidMainBanner caps the text column at 600px; this page needs it 2px wider. */
.ad-pwd-rpt .sec-01 .main-banner-wrap > div {
    max-width: 602px;
}

/* Taller than the component's 50/70 padding; above its own 800px break so the
   phone layout keeps the tight bottom it sets there. */
@media (min-width: 801px) {
    .ad-pwd-rpt .sec-01 .main-banner-wrap {
        padding: 110px 0 100px;
    }
}

.ad-pwd-rpt .ad-pwd-rpt-banner-lead {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 640px;
    color: #d6e2e7;
}

/* DroidMainBanner sets 1.6em on every banner description four classes deep, so
   the opening paragraph's looser measure has to be declared at least as deep. */
.ad-pwd-rpt .main-banner-section .main-banner-wrap .droid-banner-content .droid-description.ad-pwd-rpt-banner-lead {
    font-size: 1.05em;
    line-height: 1.7;
}

.ad-pwd-rpt .ad-pwd-rpt-banner-tagline {
    margin-top: 4px;
    margin-bottom: 30px;
    max-width: 640px;
    font-size: 1.02em;
    font-style: italic;
    font-family: 'poppins-regular';
    color: #e7f4ffeb;
}

.ad-pwd-rpt .ad-pwd-rpt-banner-tagline .droid-description-highlight {
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
}

/* DroidMainBanner fixes the banner art at 400px tall; this 440x367 shot is
   shown at its own size instead. The selector has to out-specify
   `.main-banner-section .main-banner-img img`. */
.ad-pwd-rpt .main-banner-img img.ad-pwd-rpt-banner-art {
    width: 440px;
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   SHARED — centred section heading.
   Every band whose heading sits in a DroidSectionIntro centres it. sec-02 is
   the exception: its heading lives in a content body beside the capture, so
   this does not reach it.
   ========================================================================= */
.ad-pwd-rpt .droid-section-intro .droid-section-main-title {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 900px;
    text-align: center;
    justify-content: center;
}

/* =========================================================================
   sec-02 — PASSWORD DASHBOARD
   One capture on the left, the explanation on the right. The gutter and the
   heading metrics are the report galleries' own, so this band still reads as
   the first of the report bands. The capture sits whole and uncropped in a
   720px glass frame whose height follows the image and dominates the row; the
   copy takes the remaining ~37%, and the pair sits centred. Below 1024px the
   two stack.
   ========================================================================= */
.ad-pwd-rpt .ad-pwd-rpt-dash {
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin: 0 auto;
    max-width: 1240px;
}

/* The glass frame: 12px of frosted white around the capture. No glow — the
   shadow is a plain drop. */
.ad-pwd-rpt .ad-pwd-rpt-dash-media {
    flex: 0 0 720px;
    width: 720px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(13, 43, 69, 0.10);
}

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

/* The frame's height follows the image, so it is never taller than the
   capture at any width. */
.ad-pwd-rpt .ad-pwd-rpt-dash-clip {
    overflow: hidden;
    border: 1px solid rgba(13, 43, 69, 0.08);
    border-radius: 8px;
}

.ad-pwd-rpt .ad-pwd-rpt-dash-shot {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

@media (max-width: 1023.98px) {
    .ad-pwd-rpt .ad-pwd-rpt-dash {
        flex-direction: column;
        gap: 30px;
    }

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

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

/* =========================================================================
   sec-03 — FREE EDITION PROMO
   Follows the active-directory-all-in-one-tool free tool banner: the light
   band, a translucent white frame with a static outline and a travelling
   border segment, dot grids fading in at two opposite corners, and a
   gradient title. The nine report families stay a pill wall, as white pills
   with the banner's card border and shadow, their glyphs walking its three
   accents (blue, violet, amber).
   ========================================================================= */
@property --ad-pwd-rpt-promo-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

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

.ad-pwd-rpt .ad-pwd-rpt-promo-panel::before,
.ad-pwd-rpt .ad-pwd-rpt-promo-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-pwd-rpt .ad-pwd-rpt-promo-panel::before {
    background: #1a56db38;
}

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

@keyframes ad-pwd-rpt-promo-border {
    to {
        --ad-pwd-rpt-promo-angle: 360deg;
    }
}

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

.ad-pwd-rpt .ad-pwd-rpt-promo-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-pwd-rpt .ad-pwd-rpt-promo-panel > :not(.ad-pwd-rpt-promo-dots) {
    position: relative;
    z-index: 1;
}

/* general.css forces `h1, h2 { font-family: inherit !important }`, so the
   title's family is set on its wrapper. */
.ad-pwd-rpt .sec-03 .droid-section-main-title {
    text-align: center;
    justify-content: center;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}

/* Near-black title with two semibold highlights: the count in blue and
   "Free Edition!" in green (both >= 3:1 large-text contrast on the panel). */
.ad-pwd-rpt .sec-03 .droid-heading {
    color: #222222;
}

.ad-pwd-rpt .sec-03 .droid-heading-highlight {
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
    color: #1b6fbf;
}

.ad-pwd-rpt .sec-03 .droid-heading-highlight.ad-pwd-rpt-promo-free {
    color: #1a8f33;
}

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

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

.ad-pwd-rpt .ad-pwd-rpt-promo-chip .droid-icon {
    font-size: 16px;
}

.ad-pwd-rpt .sec-03 .ad-pwd-rpt-promo-chip.ad-pwd-rpt-accent-blue .droid-icon {
    color: #1a56db;
}

.ad-pwd-rpt .sec-03 .ad-pwd-rpt-promo-chip.ad-pwd-rpt-accent-violet .droid-icon {
    color: #6d28d9;
}

.ad-pwd-rpt .sec-03 .ad-pwd-rpt-promo-chip.ad-pwd-rpt-accent-amber .droid-icon {
    color: #c2410c;
}

.ad-pwd-rpt .ad-pwd-rpt-promo-chip .droid-description {
    padding-left: 0;
    font-size: 14px;
    text-align: left;
    color: #454545;
}

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

.ad-pwd-rpt .ad-pwd-rpt-promo-note {
    padding-left: 0;
    line-height: 1.6;
    text-align: center;
    color: #454545;
}

.ad-pwd-rpt .sec-03 .droid-description-highlight {
    color: #1a56db;
}

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

.ad-pwd-rpt .ad-pwd-rpt-promo-cta .droid-button {
    font-size: 1.15em;
}

@media (max-width: 768px) {
    .ad-pwd-rpt .ad-pwd-rpt-promo-panel {
        padding-left: 1.1em;
        padding-right: 1.1em;
    }
}

/* general.css gives `.btn-dwn` a 10px left margin for the case where it
   follows the Live Demo button. Standing alone in a centring row that margin
   pushes it 5px off the axis its siblings sit on. */
.ad-pwd-rpt .ad-pwd-rpt-promo-cta .btn-dwn {
    margin-left: 0;
}

/* =========================================================================
   THE REPORT GALLERY — sec-04 to sec-07
   A card list beside a sticky capture panel, joined by a leader-line arrow.
   Measured off the microsoft-365-user-reporting gallery and reproduced to its
   numbers: the 569:677 column ratio, the 60px gutter, and every inner metric.

   Geometry is shared by all four bands. Colour is declared per band underneath:
   sec-04 and sec-06 are light, sec-05 and sec-07 are dark, and the bands
   alternate cards-left / cards-right (`-rev`) down the page.
   Each theme sets one accent as --gal-accent on the gallery, which the active
   state and the leader line both read, so a hue is written once.

   Two numbers are deliberately this page's rather than the reference's: the
   shell stays 1240px so the bands line up with the rest of the page, and the sticky
   offset is 110px because that is what clears THIS page's header (the
   reference's 162px is tuned to its own taller chrome).
   ========================================================================= */
.ad-pwd-rpt .ad-pwd-rpt-gal {
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    margin: 30px auto 0;
    max-width: 1380px;
}

/* Mirrored band: capture left, cards right. The leader line's sockets are
   swapped to match in the driver. */
.ad-pwd-rpt .ad-pwd-rpt-gal-rev {
    flex-direction: row-reverse;
}

/* 569 : 677 in the reference, held as a ratio inside the narrower shell. */
.ad-pwd-rpt .ad-pwd-rpt-gal-cards-col {
    flex: 0 0 43.4%;
    max-width: 43.4%;
}

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

/* ---- the column's own heading, in place of a centred band heading ---- */
.ad-pwd-rpt .ad-pwd-rpt-gal-head {
    margin: 25px 0 35px;
}

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

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

/* general.css forces `font-family: inherit !important` on every heading tag, so
   a face set on the heading alone is discarded. Declared here with !important
   rather than on a wrapper, which would leak the face to the wrapper's other
   children — that was turning the bullet lists poppins. */
.ad-pwd-rpt .ad-pwd-rpt-gal-head-title h2 {
    margin: 0;
    font-size: 23.4px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif !important;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

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

.ad-pwd-rpt .ad-pwd-rpt-gal-head-desc p {
    margin: 0;
    font-size: 1.05em;
    line-height: 21.6775px;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    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-pwd-rpt .ad-pwd-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-pwd-rpt .ad-pwd-rpt-gal-card:hover {
    opacity: 1;
}

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

.ad-pwd-rpt .ad-pwd-rpt-gal-card h3 {
    margin: 0 0 12px;
    font-size: 15.6px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif !important;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    transition: color 300ms ease-in-out;
}

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

.ad-pwd-rpt .ad-pwd-rpt-gal-card-desc .ad-pwd-rpt-attr {
    font-family: work-sans-semibold, Arial, Helvetica, sans-serif;
    font-style: italic;
}

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

.ad-pwd-rpt .ad-pwd-rpt-gal-card .ad-pwd-rpt-gal-btn-wrap {
    font-size: 9.1px;
}

.ad-pwd-rpt .ad-pwd-rpt-gal-card-btn {
    display: inline;
    border-radius: 3px;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.ad-pwd-rpt .ad-pwd-rpt-gal-card-btn {
    padding: 5px 10px;
    font-size: 9.1px;
}

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

.ad-pwd-rpt .ad-pwd-rpt-gal-panel h3 {
    margin: 0 0 8px;
    font-size: 17.16px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif !important;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

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

.ad-pwd-rpt .ad-pwd-rpt-gal-shot {
    display: inline;
    width: 100%;
    height: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
    box-shadow: rgb(172, 172, 172) 0px 0px 3px 0px;
    cursor: zoom-in;
    transition: opacity 200ms ease-in-out;
}

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

/* Collapsed to its glyph until the capture is hovered, then the label slides
   out — the reference keeps the label at max-width 0 for exactly this. */
.ad-pwd-rpt .ad-pwd-rpt-gal-expand {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 5px;
    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;
    font-size: 11.96px;
    text-align: center;
    color: aliceblue;
    pointer-events: none;
}

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

.ad-pwd-rpt .ad-pwd-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-pwd-rpt .ad-pwd-rpt-gal-shot-wrap:hover .ad-pwd-rpt-gal-expand-text {
    max-width: 140px;
    padding-left: 5px;
}

/* =========================================================================
   sec-04 and sec-06 — the light bands' colours
   ========================================================================= */
.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-head-icon,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-head-icon {
    color: #0a7ea4;
}

.ad-pwd-rpt .sec-02 .ad-pwd-rpt-gal-head-title h2,
.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-head-title h2,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-head-title h2 {
    color: #1f2c3e;
}

.ad-pwd-rpt .sec-02 .ad-pwd-rpt-gal-head-title h2 .droid-heading-highlight,
.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-head-title h2 .droid-heading-highlight,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-head-title h2 .droid-heading-highlight {
    color: #0a7ea4;
}

.ad-pwd-rpt .sec-02 .ad-pwd-rpt-gal-head-desc p,
.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-head-desc p,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-head-desc p {
    color: #5e5e5e;
}

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

/* 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. The dark band below does not need
   to — there the opacity step is plainly visible, as in the reference. */
.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-card.active,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-card.active {
    background-color: var(--gal-tint);
}

.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-card h3,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-card h3 {
    color: rgb(69, 69, 69);
}

.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-card-desc,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-card-desc {
    color: rgb(69, 69, 69);
}

.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-card-btn,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-card-btn {
    background-color: #1361b5;
    color: #ffffff;
}

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


/* =========================================================================
   sec-05 and sec-07 — the dark bands' colours
   The reference's own band is dark, so its treatment carries over unchanged:
   the card surface is a single lifted tone and the open card is marked by
   opacity, the squared left corner and the accent bar alone.
   ========================================================================= */
.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-head-icon,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-head-icon {
    color: #58caff;
}

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-head-title h2,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-head-title h2 {
    color: #ffffff;
}

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-head-title h2 .droid-heading-highlight,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-head-title h2 .droid-heading-highlight {
    color: #58caff;
}

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-head-desc p,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-head-desc p {
    color: #d6e2e7;
}

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

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-card h3,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-card h3 {
    color: #d6e2e7;
}

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-card-desc,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-card-desc {
    color: #c3c3c3;
}

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-card-btn,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-card-btn {
    background-color: #1361b5;
    color: #ffffff;
}

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


/* =========================================================================
   THEME ACCENT — one colour per theme, not per card.
   The open card's heading and left bar, its tint on the light bands, the
   panel heading and the leader line all use it. Set on the gallery root so
   every card inherits it.
   ========================================================================= */
.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal {
    --gal-accent: #1361b5;
    --gal-tint: #eef6ff;
    --gal-line: #1361b5;
}

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal {
    --gal-accent: #58caff;
    --gal-line: #58caff;
}

/* =========================================================================
   ACTIVE STATE — after both palettes on purpose.
   Each band sets its cards' resting heading colour at (0,3,1); this has to
   outrank that whichever order the blocks end up in, so it is written one
   class deeper rather than relying on source position.
   ========================================================================= */
.ad-pwd-rpt .ad-pwd-rpt-gal .ad-pwd-rpt-gal-card.active h3 {
    color: var(--gal-accent);
}

/* The panel heading is repainted by the driver on every change; this is only
   its resting colour, before the first card has been activated. */
.ad-pwd-rpt .sec-04 .ad-pwd-rpt-gal-panel h3,
.ad-pwd-rpt .sec-06 .ad-pwd-rpt-gal-panel h3 {
    color: #1361b5;
}

.ad-pwd-rpt .sec-05 .ad-pwd-rpt-gal-panel h3,
.ad-pwd-rpt .sec-07 .ad-pwd-rpt-gal-panel h3 {
    color: #58caff;
}

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

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

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

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

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

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

/* =========================================================================
   sec-08 — SMART REMINDERS
   The active-directory-auditing-tool alerting band's layout on a light
   ground: three stacked tiles with gradient icon plates and one tinted
   phrase each, a right-aligned link, and the reminder illustration beside.
   ========================================================================= */
.ad-pwd-rpt .sec-08 .droid-section-main-title {
    color: #1f2c3e;
}

/* DroidSectionIntro pads every intro description 20px on the left and sets
   1.6em, both three classes deep, so this pair has to be declared deeper. */
.ad-pwd-rpt .droid-section-intro-text > .droid-description.ad-pwd-rpt-rem-quote {
    padding-left: 0;
    font-size: 1.05em;
    line-height: 1.7;
}

.ad-pwd-rpt .ad-pwd-rpt-rem-quote {
    margin-left: auto;
    margin-right: auto;
    max-width: 880px;
    font-style: italic;
    text-align: center;
    color: #5e5e5e;
}

.ad-pwd-rpt .ad-pwd-rpt-rem-split {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    margin: 30px auto 0;
    max-width: 1240px;
}

.ad-pwd-rpt .ad-pwd-rpt-rem-col {
    flex: 1 1 0;
    max-width: 660px;
}

.ad-pwd-rpt .ad-pwd-rpt-rem-media {
    flex: 0 1 480px;
    width: 42%;
}

.ad-pwd-rpt .ad-pwd-rpt-rem-media .droid-image {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: auto;
}

.ad-pwd-rpt .ad-pwd-rpt-flow {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ad-pwd-rpt .ad-pwd-rpt-flow-node {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #d6e6f5;
    border-radius: 8px;
    box-shadow: 0px 0px 12px rgba(13, 43, 69, 0.05);
}

/* The auditing-tool tiles' three plate gradients. Their phrase tints are the
   same hues taken dark enough to read on white. */
.ad-pwd-rpt .ad-pwd-rpt-flow-node.ad-pwd-rpt-rem-tone-1 {
    --node-grad: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
    --node-ink: #c2410c;
}

.ad-pwd-rpt .ad-pwd-rpt-flow-node.ad-pwd-rpt-rem-tone-2 {
    --node-grad: linear-gradient(315deg, #22f7f3 0%, #149fbb 74%);
    --node-ink: #0e7490;
}

.ad-pwd-rpt .ad-pwd-rpt-flow-node.ad-pwd-rpt-rem-tone-3 {
    --node-grad: linear-gradient(135deg, #f13fbf 0%, #a88beb 74%);
    --node-ink: #9333ea;
}

.ad-pwd-rpt .ad-pwd-rpt-flow-node .droid-description {
    margin: 0;
    padding-left: 0;
    font-size: 1.05em;
    line-height: 1.7;
    text-align: left;
    color: #3d4a5c;
}

.ad-pwd-rpt .ad-pwd-rpt-flow-node .droid-description-highlight {
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    color: var(--node-ink);
}

.ad-pwd-rpt .ad-pwd-rpt-rem-cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.ad-pwd-rpt .sec-08 .ad-pwd-rpt-band-link {
    color: #1361b5;
    transition: color 0.3s;
}

.ad-pwd-rpt .sec-08 .ad-pwd-rpt-band-link:hover {
    color: #0d4a8a;
}

/* inline-block keeps the arrow out of the link's underline. */
.ad-pwd-rpt .sec-08 .ad-pwd-rpt-band-link::after,
.ad-pwd-rpt .sec-09 .ad-pwd-rpt-band-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;
}

/* Same arrow-shift hover cue as the Related Pages "Know more" links. */
.ad-pwd-rpt .sec-08 .ad-pwd-rpt-band-link:hover::after,
.ad-pwd-rpt .sec-09 .ad-pwd-rpt-band-link:hover::after {
    transform: translateX(3px);
}

/* =========================================================================
   sec-09 — FULL POTENTIAL
   Nine DroidCard v11s, matching the microsoft-365-reminder-and-follow-up-agents
   page's own "Pre-built Reminder Agent Templates" gallery: the component's
   four solid themes (aqua, peach, rose, lime — the reference's own four
   gradients) in the reference's order, with its box, dark text, large
   low-opacity icon and hover shine. The translucent themes are not used: on
   this dark band they go muddy. No link or button, as the doc gives these
   none.
   ========================================================================= */
.ad-pwd-rpt .sec-09 .droid-section-main-title {
    color: #ffffff;
}

.ad-pwd-rpt .sec-09 .droid-section-intro-text > .droid-description {
    padding-left: 0;
    font-size: 1.05em;
    line-height: 1.6;
    text-align: center;
    color: #d6e2e7;
}

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

.ad-pwd-rpt .ad-pwd-rpt-cap-cards > .droid-card {
    flex: 1 1 280px;
    width: 300px;
    max-width: 350px;
    margin: 10px;
}

/* Coloured glass on the dark band: each theme (above) supplies a translucent
   tint of its old gradient + a matching border; this adds the edge light,
   depth and blur shared by all nine. */
.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11 {
    display: block;
    height: 120px;
    padding: 20px 24px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    color: #d3dde3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card:hover .droid-card-face-v11::before {
    animation: ad-pwd-rpt-shine 0.5s ease-in-out;
}

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

.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11 > .droid-description {
    padding-left: 0;
    font-size: 1em;
    line-height: 1.4em;
    color: #d3dde3;
    font-family: 'work-sans-regular';
}

/* Key phrase in each capability card: medium weight, coloured per theme below. */
.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11 > .droid-description .droid-description-highlight {
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    color: #ffffff;
}

/* Per-theme highlight: a bright tint of each card's glass hue, every one
   >= 5:1 on its glass (glare corner included). The corner watermark icon
   takes the same hue at 0.15 opacity. */
.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-aqua > .droid-description .droid-description-highlight,
.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-aqua > .droid-card__icon {
    color: #8ee8ec;
}

.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-peach > .droid-description .droid-description-highlight,
.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-peach > .droid-card__icon {
    color: #ffc3a1;
}

.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-rose > .droid-description .droid-description-highlight,
.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-rose > .droid-card__icon {
    color: #f7a8f0;
}

.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-lime > .droid-description .droid-description-highlight,
.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11.theme-lime > .droid-card__icon {
    color: #aeea98;
}

.ad-pwd-rpt .ad-pwd-rpt-cap-cards .droid-card-face-v11 .droid-card__icon {
    position: absolute;
    top: auto;
    left: auto;
    bottom: 8px;
    right: 14px;
    width: auto;
    height: auto;
    display: block;
    font-size: 6em;
    opacity: 0.15;
    color: #ffffffa8;
}

.ad-pwd-rpt .ad-pwd-rpt-cap-cta {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.ad-pwd-rpt .sec-09 .ad-pwd-rpt-band-link {
    color: #58caff;
    transition: color 0.3s;
}

.ad-pwd-rpt .sec-09 .ad-pwd-rpt-band-link:hover {
    color: #8adfff;
}

/* =========================================================================
   PER-ITEM ACCENT ROTATION
   The group-management page gives every feature point its own accent, carried
   by the point's glyph and its heading together; seven hues run over its four
   bands. The port collapsed that to one accent per band, which left the 3x3
   capability grid as nine identical glyphs. The rotation is restored here and
   dealt out by position (the class sits on each wrapper), so no item touches
   another of its own hue.

   The bright hues go on the dark bands and the three deep ones on the light
   bands, as the reference splits them. Measured against each item's OWN painted
   fill rather than the band behind it; the lowest pairing on the page is 4.92:1
   and the rest clear 5.4:1.

   This block must stay BELOW the per-band colour rules — both are (0,3,0), so
   source order is what makes an item's accent win over its band's default.
   ========================================================================= */

.ad-pwd-rpt .ad-pwd-rpt-accent-sky .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-sky .droid-section-sub-title {
    color: #58caff;
}

.ad-pwd-rpt .ad-pwd-rpt-accent-violet .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-violet .droid-section-sub-title {
    color: #c4b5fd;
}

.ad-pwd-rpt .ad-pwd-rpt-accent-amber .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-amber .droid-section-sub-title {
    color: #fcd34d;
}

.ad-pwd-rpt .ad-pwd-rpt-accent-mint .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-mint .droid-section-sub-title {
    color: #2feeb9;
}

.ad-pwd-rpt .ad-pwd-rpt-accent-peri .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-peri .droid-section-sub-title {
    color: #81a4ff;
}

.ad-pwd-rpt .ad-pwd-rpt-accent-blue .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-blue .droid-section-sub-title {
    color: #1361b5;
}

.ad-pwd-rpt .ad-pwd-rpt-accent-teal .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-teal .droid-section-sub-title {
    color: #0b5f74;
}

.ad-pwd-rpt .ad-pwd-rpt-accent-navy .droid-icon,
.ad-pwd-rpt .ad-pwd-rpt-accent-navy .droid-section-sub-title {
    color: #0a3d6e;
}


/* =========================================================================
   sec-11 — RELATED PAGES
   Three DroidCard v30 link cards, dark on the dark band with light text, the
   whole card the link. The
   doc gives each a "Know more", so that label sits bottom-right with its own
   chevron, and the face's built-in arrow is switched off so there is one cue,
   not two.
   ========================================================================= */
.ad-pwd-rpt .sec-11 {
    background: #00102c;
}

.ad-pwd-rpt .sec-11 .droid-section-main-title {
    display: flex;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid {
    --droid-card-container-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    margin: 26px auto 0;
    max-width: 1240px;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid > .droid-card {
    flex-grow: 0;
    text-decoration: none;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid .droid-card-face-v30 {
    min-height: 210px;
    padding-bottom: 3rem;
    border-radius: 6px;
    background: #0f2140;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: background-color 0.3s;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid > .droid-card:hover .droid-card-face-v30 {
    background: #132849;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid .droid-card-face-v30::after {
    content: none;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid .droid-card__icon {
    color: #58caff;
    background: rgba(88, 202, 255, 0.12);
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid .droid-section-sub-title {
    font-size: 16px;
    color: #ffffff;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid .droid-section-sub-title-desc {
    margin-top: 12px;
    padding-left: 0;
    font-size: 1.05em;
    line-height: 1.6;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
}

.ad-pwd-rpt .ad-pwd-rpt-rel-more {
    position: absolute;
    right: 1.2rem;
    bottom: 1rem;
    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-pwd-rpt .ad-pwd-rpt-rel-more::after {
    content: "\e054";
    font-family: office365icons, sans-serif;
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.3s;
}

/* Underline scoped to the label text only, in its own span, so it can never
   reach the gap or the arrow's ::after next to it. */
.ad-pwd-rpt .ad-pwd-rpt-rel-grid > .droid-card:hover .ad-pwd-rpt-rel-more-label {
    text-decoration: underline;
}

.ad-pwd-rpt .ad-pwd-rpt-rel-grid > .droid-card:hover .ad-pwd-rpt-rel-more::after {
    transform: translateX(3px);
}

/* =========================================================================
   RESPONSIVE
   The component build expressed these through Config.MaxLg / Config.MaxMd,
   which are Tailwind's `max-lg:` (< 64rem) and `max-md:` (< 48rem) variants.
   They are reproduced at the same thresholds here.
   ========================================================================= */
@media (max-width: 1023.98px) {
    .ad-pwd-rpt .ad-pwd-rpt-banner-lead,
    .ad-pwd-rpt .ad-pwd-rpt-banner-tagline {
        max-width: 100%;
    }

    .ad-pwd-rpt .ad-pwd-rpt-rem-quote {
        max-width: 100%;
    }

}

@media (max-width: 767.98px) {
    .ad-pwd-rpt .ad-pwd-rpt-rem-media {
        display: none;
    }

    .ad-pwd-rpt .ad-pwd-rpt-rem-col {
        max-width: 100%;
    }
}