/* =========================================================================
   Active Directory Reminders & Follow-ups — page CSS
   Scoped to #ad-reminder-main-container. No droid-* class redefinitions.
   ========================================================================= */

#ad-reminder-main-container {
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #363636;
}


#ad-reminder-main-container .highlighted-title {
    color: #6fb4ff;
}

/* =========================================================================
   SECTION 1 — Hero banner (dark)
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-banner-section {
    background: linear-gradient(135deg, #1a2844 0%, #24203e 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

#ad-reminder-main-container .ad-rmd-banner-container {
    text-align: center;
    padding: 50px 15px 0px;
}

#ad-reminder-main-container .ad-rmd-banner-container > div {
    display: inline-block;
    vertical-align: middle;
}

#ad-reminder-main-container .ad-rmd-banner-content,
#ad-reminder-main-container .ad-rmd-banner-img {
    width: 40%;
    max-width: 620px;
    min-width: 280px;
    margin: 20px 24px;
    text-align: left;
}

#ad-reminder-main-container .ad-rmd-banner-img {
    max-width: 560px;
}

#ad-reminder-main-container .ad-rmd-banner-main-title {
    color: #ffffff;
}

#ad-reminder-main-container .ad-rmd-banner-title-hl {
    color: #befb98;
}

#ad-reminder-main-container .ad-rmd-banner-desc {
    color: #d6deea;
}

#ad-reminder-main-container .ad-rmd-banner-desc .work-sans-medium {
    color: #befb98;
}

#ad-reminder-main-container .ad-rmd-banner-img img {
    width: 100%;
    height: auto;
}


/* =========================================================================
   SECTION 3 — Capabilities (dark glassmorphism, 2x3 grid)
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-capabilities-section {
    background-color: #eef3fb;
    color: #14253d;
    padding: 20px 15px;
}

#ad-reminder-main-container .ad-rmd-capabilities-container {
    max-width: 1400px;
    margin: 0 auto;
}

#ad-reminder-main-container .ad-rmd-capabilities-title {
    color: #14253d;
}

#ad-reminder-main-container .capabilities-title-highlight {
    color: #0052aa;
}

#ad-reminder-main-container .ad-rmd-capabilities-quote {
    max-width: 900px;
    margin: 10px auto 0;
    padding: 0 20px;
    text-align: center;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    font-style: italic;
    color: #4a5568;
}

#ad-reminder-main-container .ad-rmd-capabilities-quote i {
    color: #9aa7bd;
    margin-right: 8px;
}

#ad-reminder-main-container .ad-rmd-capabilities-quote .highlighted-title {
    color: #0052aa;
}

/* Make the section quotes read clearly as quotes — enlarge the opening quote
   mark so it's recognizable at a glance (each section keeps its own accent). */
#ad-reminder-main-container .ad-rmd-capabilities-quote i,
#ad-reminder-main-container .ad-rmd-agents-quote i,
#ad-reminder-main-container .ad-rmd-console-quote i,
#ad-reminder-main-container .ad-rmd-strategy-quote i {
    font-size: 1.8em;
    vertical-align: -6px;
    margin-right: 10px;
    opacity: 0.9;
}

#ad-reminder-main-container .ad-rmd-capabilities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 20px;
    text-align: left;
}

#ad-reminder-main-container .ad-rmd-capability-card {
    width: calc((100% - 44px) / 3);
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(20, 35, 70, 0.08);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(20, 35, 70, 0.08), 0 2px 4px rgba(20, 35, 70, 0.04);
    padding: 24px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.3s ease, background 0.3s ease;
}

#ad-reminder-main-container .ad-rmd-capability-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    flex-shrink: 0;
    font-size: 26px;
}

#ad-reminder-main-container .ad-rmd-capability-content {
    flex: 1;
    min-width: 0;
}

#ad-reminder-main-container .ad-rmd-capability-icon.capability-one { background: rgba(203, 0, 148, 0.18); }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-two { background: rgba(37, 144, 30, 0.18); }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-three { background: rgba(132, 36, 195, 0.18); }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-four { background: rgba(20, 184, 166, 0.18); }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-five { background: rgba(56, 174, 254, 0.18); }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-six { background: rgba(255, 178, 50, 0.18); }

#ad-reminder-main-container .capability-one-highlight { color: #cb0094; }
#ad-reminder-main-container .capability-two-highlight { color: #1f8f1a; }
#ad-reminder-main-container .capability-three-highlight { color: #8424c3; }
#ad-reminder-main-container .capability-four-highlight { color: #0d9488; }
#ad-reminder-main-container .capability-five-highlight { color: #0a72c9; }
#ad-reminder-main-container .capability-six-highlight { color: #b9760f; }

/* Entire card title in the card's single accent colour (not just a highlighted phrase). */
#ad-reminder-main-container .ad-rmd-capability-icon.capability-one ~ .ad-rmd-capability-content .ad-rmd-capability-card-title { color: #cb0094; }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-two ~ .ad-rmd-capability-content .ad-rmd-capability-card-title { color: #1f8f1a; }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-three ~ .ad-rmd-capability-content .ad-rmd-capability-card-title { color: #8424c3; }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-four ~ .ad-rmd-capability-content .ad-rmd-capability-card-title { color: #0d9488; }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-five ~ .ad-rmd-capability-content .ad-rmd-capability-card-title { color: #0a72c9; }
#ad-reminder-main-container .ad-rmd-capability-icon.capability-six ~ .ad-rmd-capability-content .ad-rmd-capability-card-title { color: #b9760f; }


#ad-reminder-main-container .ad-rmd-capability-card-desc {
    color: #4a5568;
    line-height: 1.6em;
}

/* =========================================================================
   SECTION 4 — Reminder agents
   Copied from AdOverviewStyle.css .active-dir-reporting-content / .active-dir-reporting-card
   (lines 960–1068 in /active-directory-all-in-one-tool). Prefix renamed to ad-rmd-agent-*.
   2-col card grid (48% width), icon-circle absolutely positioned top-right, 5-color
   cycling accents (border-left + icon-bg + title color) via :nth-child(5n+N).
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-agents-section {
    background-color: #001C35;
    padding: 40px 15px;
    overflow: hidden;
}

#ad-reminder-main-container .ad-rmd-agents-title {
    color: #ffffff;
}

#ad-reminder-main-container .agents-title-highlight {
    color: #6fb4ff;
}

#ad-reminder-main-container .ad-rmd-agents-quote {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    color: #c5d2e6;
    font-style: italic;
}

#ad-reminder-main-container .ad-rmd-agents-quote .work-sans-medium {
    color: #6fb4ff;
}

#ad-reminder-main-container .ad-rmd-agents-quote i {
    color: #8294b0;
    margin-right: 8px;
}

/* =========================================================================
   Mirrors .delegation-manage-content-wrapper / .delegation-manage-hex-layer-*
   from DelegationStyle.css (lines 620-766), used on /microsoft-365-delegation.
   Hexagonal icon on the left, white content card on the right with overlap,
   per-card colored hex + colored title-pill gradient.
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-agent-content {
    margin: 30px auto 0;
}

#ad-reminder-main-container .ad-rmd-agent-hex-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:not(:first-child) {
    margin-top: 20px;
}

#ad-reminder-main-container .ad-rmd-agent-hex-layer-1 {
    position: relative;
    left: 10px;
    width: 76px;
    height: 86px;
    background-color: #64C7CC;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Perfect regular hexagon with rounded corners (stroke-linejoin: round). */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100.6 114'%3E%3Cpolygon points='50.3,7 93.6,32 93.6,82 50.3,107 7,82 7,32' fill='%23fff' stroke='%23fff' stroke-width='14' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100.6 114'%3E%3Cpolygon points='50.3,7 93.6,32 93.6,82 50.3,107 7,82 7,32' fill='%23fff' stroke='%23fff' stroke-width='14' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 3;
}

#ad-reminder-main-container .ad-rmd-agent-hex-layer-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

#ad-reminder-main-container .ad-rmd-agent-hex-layer-2 i {
    font-size: 2em;
    color: white;
}


#ad-reminder-main-container .ad-rmd-agent-hex-content {
    text-align: left;
    width: 85%;
    max-width: 890px;
    position: relative;
    box-shadow: 0 6px 18px rgba(20, 35, 70, 0.08), 0 2px 4px rgba(20, 35, 70, 0.04);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: white;
    left: -28px;
    padding: 15px 15px 15px 55px;
    border-radius: 4px;
}

#ad-reminder-main-container .ad-rmd-agent-hex-content-title {
    position: relative;
    align-self: flex-start;
    padding-left: 10px;
    border-radius: 3px;
}

#ad-reminder-main-container .ad-rmd-agent-hex-content-desc {
    color: rgb(61, 58, 58);
    margin: 8px 0 0;
}

#ad-reminder-main-container .ad-rmd-agent-hex-content .hlt-txt { color: #11a73b; }

/* Per-card hex color (mirrored colors 1-5 from reference) */
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(1) .ad-rmd-agent-hex-layer-1 { background-color: #33b467; }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(2) .ad-rmd-agent-hex-layer-1 { background-color: #e7657d; }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(3) .ad-rmd-agent-hex-layer-1 { background-color: #6c88ce; }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(4) .ad-rmd-agent-hex-layer-1 { background-color: #daa243; }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(5) .ad-rmd-agent-hex-layer-1 { background-color: #d060d8; }

/* Per-card title-pill gradient (mirrored) */
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(1) .ad-rmd-agent-hex-content-title { background: linear-gradient(to right, #97f8c5, transparent); }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(2) .ad-rmd-agent-hex-content-title { background: linear-gradient(to right, #ffbfc9, transparent); }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(3) .ad-rmd-agent-hex-content-title { background: linear-gradient(to right, #bbcdf6, transparent); }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(4) .ad-rmd-agent-hex-content-title { background: linear-gradient(to right, #fce0c5, transparent); }
#ad-reminder-main-container .ad-rmd-agent-hex-wrapper:nth-child(5) .ad-rmd-agent-hex-content-title { background: linear-gradient(to right, #f5bdfa, transparent); }

/* =========================================================================
   SECTION 5 — Take Full Command (SlidesJS with accordion-paired slides)
   Copied verbatim from /active-directory-change-auditor + Ad-object-change.css
   lines 295–700, and the skew-right/skew-left 3D transforms from
   AdOverviewStyle.css lines 805–838. Function classes (obj-cng-card,
   user-mng-card, container, skew-right, slide-wrapper, expand-view-div,
   popup-container, close, icon-expand) are kept verbatim because the
   accordion-bridging JS targets them by name; everything is scoped under
   #ad-reminder-main-container so the rules don't leak.
   ========================================================================= */
/* Entire section is dark themed (header included). The showcase card sits a
   shade lighter than the section so it still reads as a raised console panel. */
#ad-reminder-main-container .ad-rmd-console-section {
    background: linear-gradient(180deg, #0c1729 0%, #0a1322 100%);
    padding: 56px 15px 28px;
    overflow: hidden;
}

/* Section kicker pill above the H2 (dark section). */
#ad-reminder-main-container .ad-rmd-console-kicker {
    display: inline-block;
    font-family: poppins-medium, sans-serif;
    font-size: 0.85em;
    color: #6fb4ff;
    background: rgba(78, 166, 255, 0.12);
    padding: 6px 16px;
    border-radius: 14px;
    margin-bottom: 14px;
}

#ad-reminder-main-container .ad-rmd-console-title {
    color: #ffffff;
}

#ad-reminder-main-container .console-title-highlight {
    background: linear-gradient(90deg, #4ea6ff, #1dc8d0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4ea6ff;
}

#ad-reminder-main-container .ad-rmd-console-quote {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    color: #b6c2d6;
    font-style: italic;
}

#ad-reminder-main-container .ad-rmd-console-quote i {
    color: #5f6f92;
    margin-right: 8px;
}

#ad-reminder-main-container .ad-rmd-console-quote .work-sans-medium {
    color: #befb98;
}

/* ---------- Content partition (image left, accordion right) ---------- */
#ad-reminder-main-container .obj-cng-content-partition {
    margin: 0 auto;
    max-width: 1250px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    overflow: visible !important;
    /* Fixed height so the section does not jump as different strategy cards
       expand/collapse or as the slide image swaps (desktop side-by-side only;
       reset below 1024px where the layout stacks vertically). */
    min-height: 500px;
}

#ad-reminder-main-container .obj-cng-content-part {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    width: 50%;
}

/* ---------- Accordion cards (obj-cng-card) ---------- */
#ad-reminder-main-container .obj-cng-card {
    cursor: pointer;
    opacity: 0.7 !important;
}

#ad-reminder-main-container .obj-cng-card .droid-section-sub-title {
    font-size: 1.15em;
}

#ad-reminder-main-container .obj-cng-card.active {
    opacity: 1 !important;
}

#ad-reminder-main-container .obj-cng-card .icon-expand {
    transition: 0.3s ease-in-out;
}

#ad-reminder-main-container .obj-cng-card.active .icon-expand {
    transform: rotate(90deg);
}

#ad-reminder-main-container .obj-cng-card .droid-section-sub-title-desc {
    display: none;
}

#ad-reminder-main-container .container .obj-cng-card-title {
    text-align: left;
    padding: 0 0 10px 10px;
    font-size: 1.15em;
}

#ad-reminder-main-container .container .obj-cng-card-desc {
    text-align: left;
    margin-bottom: 10px;
    display: none;
}

/* ---------- Card outer shell + 5-color cycling active state (user-mng-card) ---------- */
#ad-reminder-main-container .ad-rmd-console-card.user-mng-card,
#ad-reminder-main-container .ad-rmd-console-card {
    width: 100%;
    min-width: 280px;
    max-width: 650px;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: relative;
}

#ad-reminder-main-container .ad-rmd-console-card:nth-child(1).active { background-color: #deefff; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(2).active { background-color: #e2f8ff; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(3).active { background-color: #fef9ff; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(4).active { background-color: #f5f4ff; }

#ad-reminder-main-container .ad-rmd-console-card:nth-child(1).active .user-mng-card-header { border-left: 2px solid #0052aa; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(2).active .user-mng-card-header { border-left: 2px solid #1099b5; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(3).active .user-mng-card-header { border-left: 2px solid #b825d3; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(4).active .user-mng-card-header { border-left: 2px solid #5e37ba; }

#ad-reminder-main-container .ad-rmd-console-card:nth-child(1).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-console-card:nth-child(1).active .user-mng-card-icon { color: #0052aa; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(2).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-console-card:nth-child(2).active .user-mng-card-icon { color: #00768e; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(3).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-console-card:nth-child(3).active .user-mng-card-icon { color: #a63aba; }
#ad-reminder-main-container .ad-rmd-console-card:nth-child(4).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-console-card:nth-child(4).active .user-mng-card-icon { color: #5e37ba; }

#ad-reminder-main-container .user-mng-card-header {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 2px solid transparent;
    position: relative;
    left: -15px;
    padding: 0 0 0 15px;
}

#ad-reminder-main-container .user-mng-card-title {
    display: flex;
    align-items: center;
    margin: 0;
}

#ad-reminder-main-container .user-mng-card-icon {
    font-size: 1.6em;
    position: relative;
    right: 5px;
}

#ad-reminder-main-container .ad-rmd-console-card .ad-rmd-console-card-desc {
    z-index: 1;
    position: relative;
    text-align: left;
}

/* =========================================================================
   Console section — dark "console card" tabbed product showcase.
   The section stays light (alternates into the dark CTA below); the showcase
   itself is a dark rounded console card so the light product screenshots pop.
   Horizontal tab row + one large app-window screenshot/description per tab.
   Per-tab accent theming via --ad-accent (bright on dark) on tab + panel.
   ========================================================================= */
/* Flat container — no card background/border/shadow. The panels sit directly
   on the one-colour dark section (no box-in-a-box separation). */
#ad-reminder-main-container .ad-rmd-console-showcase {
    position: relative;
    max-width: 1400px;
    margin: 30px auto 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ---- Tab row ---- */
#ad-reminder-main-container .ad-rmd-console-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

#ad-reminder-main-container .ad-rmd-console-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: none;
    background: transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

#ad-reminder-main-container .ad-rmd-console-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

#ad-reminder-main-container .ad-rmd-console-tab.active {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 -3px 0 0 var(--ad-accent) inset;
}

#ad-reminder-main-container .ad-rmd-tab-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15em;
    color: var(--ad-accent);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.25s ease, color 0.25s ease;
}

#ad-reminder-main-container .ad-rmd-console-tab.active .ad-rmd-tab-ico {
    background: var(--ad-accent);
    color: #0c1628;
}

#ad-reminder-main-container .ad-rmd-tab-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#ad-reminder-main-container .ad-rmd-tab-name {
    font-family: poppins-medium, sans-serif;
    font-size: 1.02em;
    color: #aeb9cc;
    line-height: 1.2;
    transition: color 0.25s ease;
}

#ad-reminder-main-container .ad-rmd-console-tab.active .ad-rmd-tab-name {
    color: #ffffff;
}

#ad-reminder-main-container .ad-rmd-tab-sub {
    color: #6c7c95;
    line-height: 1.2;
}

/* ---- Panels ---- */
#ad-reminder-main-container .ad-rmd-console-panels {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 44px 8px;
}

/* All four feature blocks shown statically (stacked), alternating image/text,
   separated by a hairline divider on the dark card. */
#ad-reminder-main-container .ad-rmd-console-panel {
    display: flex;
    align-items: center;
    gap: 56px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

#ad-reminder-main-container .ad-rmd-console-panel:first-child {
    border-top: none;
}

#ad-reminder-main-container .ad-rmd-console-panel:nth-child(even) {
    flex-direction: row-reverse;
}

/* Framed screenshot — translucent matte frame. */
#ad-reminder-main-container .ad-rmd-console-media {
    flex: 1 1 56%;
    max-width: 56%;
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
    background: #ffffff1a;
    border: 1px solid var(--ad-accent-border);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
}

/* Mac-style window chrome removed per request. */
#ad-reminder-main-container .ad-rmd-console-window {
    display: none;
}

#ad-reminder-main-container .ad-rmd-win-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #44506a;
}
#ad-reminder-main-container .ad-rmd-win-dot:nth-child(1) { background: #ff5f57; }
#ad-reminder-main-container .ad-rmd-win-dot:nth-child(2) { background: #febc2e; }
#ad-reminder-main-container .ad-rmd-win-dot:nth-child(3) { background: #28c840; }

#ad-reminder-main-container .ad-rmd-win-title {
    margin-left: 10px;
    font-family: poppins-medium, sans-serif;
    color: #8b9bb4;
}

/* Natural aspect ratio — no forced crop/stretch. */
#ad-reminder-main-container .ad-rmd-console-media img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 6px;
    cursor: zoom-in;
    /* readable alt text if the image fails to load (dark section bg) */
    color: #d6deea;
}

/* ---- Image popup (same pattern as /free-tools-for-admins) ---- */
#ad-reminder-main-container .popup-container {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 61;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #0000004d;
}

#ad-reminder-main-container .popup-container-overlay {
    position: fixed;
    inset: 0;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #06060647;
    cursor: zoom-out;
}

#ad-reminder-main-container .expand-img-container {
    padding: 20px;
    width: 65%;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    border-radius: 10px;
    background: rgba(153, 157, 163, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: zoom-out;
}

#ad-reminder-main-container .expand-img-container img {
    border-radius: 5px;
    display: block;
    width: 100%;
}

#ad-reminder-main-container .expand-img-container .close {
    color: #6a6a6a;
    font-size: 1.5em;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: aliceblue;
    width: 30px;
    border-radius: 0% 20% 0 20%;
    text-align: center;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

#ad-reminder-main-container .expand-img-container .close:hover {
    color: #383838;
}

/* Panel text (on dark) */
#ad-reminder-main-container .ad-rmd-console-text {
    flex: 1 1 44%;
    max-width: 44%;
    text-align: left;
}

#ad-reminder-main-container .ad-rmd-console-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: poppins-medium, sans-serif;
    line-height: 1;
    color: var(--ad-accent);
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    border-radius: 5px;
    margin-bottom: 16px;
}

#ad-reminder-main-container .ad-rmd-console-eyebrow i {
    font-size: 1.1em;
    color: var(--ad-accent);
    flex-shrink: 0;
}

#ad-reminder-main-container .ad-rmd-console-text .droid-section-sub-title {
    color: #ffffff;
    line-height: 1.32em;
    font-size: 1.3em;
}

#ad-reminder-main-container .ad-rmd-console-text .droid-section-sub-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 13px 0 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ad-accent), transparent);
}

#ad-reminder-main-container .ad-rmd-console-text .droid-section-sub-title-desc {
    color: #b6c2d6;
    line-height: 1.72em;
    margin: 0 0 22px;
}

#ad-reminder-main-container .ad-rmd-console-showcase .hlt-txt {
    color: var(--ad-accent);
    font-family: poppins-medium, sans-serif;
}

/* Pull-quote on dark */
#ad-reminder-main-container .ad-rmd-console-row-quote {
    position: relative;
    padding: 13px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--ad-accent);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: baseline;
    font-style: italic;
    color: #cdd8e8;
    font-size: 1em;
    line-height: 1.6em;
}

#ad-reminder-main-container .ad-rmd-console-row-quote i {
    color: var(--ad-accent);
    font-size: 1.05em;
    margin-right: 8px;
    vertical-align: -2px;
    opacity: 0.9;
}


/* Per-block accent palette — brightened for the dark card (blue / cyan /
   green / purple). --ad-accent drives text/quote/underline; --ad-accent-border
   is a milder (translucent) version used for the screenshot frame border. */
#ad-reminder-main-container .ad-rmd-console-panel-1 { --ad-accent: #4ea6ff; --ad-accent-border: rgba(78, 166, 255, 0.45); }
#ad-reminder-main-container .ad-rmd-console-panel-2 { --ad-accent: #1dc8d0; --ad-accent-border: rgba(29, 200, 208, 0.45); }
#ad-reminder-main-container .ad-rmd-console-panel-3 { --ad-accent: #3ddc84; --ad-accent-border: rgba(61, 220, 132, 0.45); }
#ad-reminder-main-container .ad-rmd-console-panel-4 { --ad-accent: #c08cff; --ad-accent-border: rgba(192, 140, 255, 0.45); }

/* ---------- Image part + slider ---------- */
#ad-reminder-main-container .obj-cng-img-part {
    max-width: 550px;
    width: 100%;
    padding: 0 !important;
    min-width: 280px;
    position: relative;
}

#ad-reminder-main-container .obj-cng-img-part img {
    min-width: 350px;
    max-width: 100%;
    height: 100%;
    cursor: zoom-in;
}

#ad-reminder-main-container .obj-cng-img-part .slide-wrapper {
    overflow: visible !important;
}

#ad-reminder-main-container .slide-wrapper img {
    display: none;
}

#ad-reminder-main-container .feature-img .slide-wrapper {
    overflow: visible !important;
    position: relative;
    pointer-events: auto;
}

/* The .skew-right / .skew-left classes remain on .container in markup (kept
   to match the change-auditor SlidesJS pattern), but the 3D rotateY/rotateX
   transforms are intentionally omitted per developer request — slider sits
   flat. Keep backface-visibility so any residual transforms in browsers do
   not flicker, and keep the small pagination margin-left for spacing. */
#ad-reminder-main-container .skew-right .slidesjs-container,
#ad-reminder-main-container .skew-left .slidesjs-container {
    backface-visibility: hidden;
    pointer-events: auto;
}

#ad-reminder-main-container .skew-right .slidesjs-pagination {
    margin-left: 15px;
}

#ad-reminder-main-container .feature-img .slidesjs-container {
    box-shadow: 0 0 0 10px #e3ebf1, 0 0 18px 15px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    margin-bottom: 20px;
    background: #ffffff;
}

#ad-reminder-main-container .feature-img .slidesjs-control {
    cursor: zoom-in;
}

#ad-reminder-main-container .obj-cng-img-part .slidesjs-navigation {
    font-size: 1.25em !important;
    color: rgba(113, 153, 188, 0.7) !important;
    pointer-events: auto;
    top: unset;
    position: absolute;
    cursor: pointer;
}

#ad-reminder-main-container .cust-quote-nav:hover {
    color: rgb(72, 140, 186) !important;
}

#ad-reminder-main-container .obj-cng-img-part .skew-right .slidesjs-navigation.slidesjs-previous { right: 45px; bottom: -4px; }
#ad-reminder-main-container .obj-cng-img-part .skew-right .slidesjs-navigation.slidesjs-next { right: 20px; bottom: -4px; }
#ad-reminder-main-container .obj-cng-img-part .skew-left .slidesjs-navigation.slidesjs-previous { right: 45px; bottom: -7px; }
#ad-reminder-main-container .obj-cng-img-part .skew-left .slidesjs-navigation.slidesjs-next { right: 20px; bottom: -7px; }

#ad-reminder-main-container .obj-cng-content-partition .slidesjs-pagination {
    text-align: left;
    margin-top: 5px;
    pointer-events: none;
    list-style: none;
    padding: 0;
}

#ad-reminder-main-container .obj-cng-content-partition .slidesjs-pagination li {
    display: inline-block;
    pointer-events: auto;
    margin: 0;
}

#ad-reminder-main-container .obj-cng-content-partition .slidesjs-pagination li a {
    display: inline-block;
    background-color: rgba(99, 170, 190, 0.2);
    font-size: 10px;
    padding: 3px;
    border-radius: 2px;
    line-height: 0.7em;
    margin: 0 2px;
    transition: background-color 0.3s linear;
    color: transparent;
    width: 12px;
}

#ad-reminder-main-container .obj-cng-content-partition .slidesjs-pagination li a.active,
#ad-reminder-main-container .obj-cng-content-partition .slidesjs-pagination li a:hover.active {
    background-color: rgba(100, 192, 208, 0.85);
}

#ad-reminder-main-container .slidesjs-play,
#ad-reminder-main-container .slidesjs-stop {
    display: none !important;
}

#ad-reminder-main-container .obj-cng-slider-image-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Expand hint "Click image to expand" — verbatim copy from
   /active-directory-change-auditor (Ad-object-change.css lines 518–570). */

#ad-reminder-main-container .expand-view-div {
    font-size: 1.15em;
    position: absolute;
    display: flex;
    align-items: center;
    top: 6px;
    z-index: 12;
    background-color: #313951;
    right: 5px;
    border-radius: 3px;
    color: aliceblue;
    padding: 2px 5px;
    box-shadow: 0px 0px 5px 0px #444444;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
}

#ad-reminder-main-container .expand-icon {
    font-size: 1.35em;
    display: flex;
}

#ad-reminder-main-container .expand-view-div .expand-text {
    font-size: 0.85em;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    margin: 0;
    transition: max-width 300ms ease-in-out, margin 300ms ease-in-out;
}

#ad-reminder-main-container .container:hover .expand-view-div .expand-text {
    animation: viewtext 3s 1;
    transition: max-width 300ms ease-in-out, margin 300ms ease-in-out;
}

@keyframes viewtext {
    0% {
        max-width: 0;
        margin-left: 0;
    }

    50% {
        max-width: 150px;
        margin-left: 8px;
    }

    100% {
        max-width: 0;
        margin-left: 0;
    }
}

/* ---------- SLIDER POPUP STYLES — verbatim copy of /active-directory-change-auditor
   from Ad-object-change.css lines 1657–1786. Every selector + property + value
   is identical; only addition is the #ad-reminder-main-container ancestor scope. */

#ad-reminder-main-container .feature-img.popup-container {
    color: white;
    position: fixed !important;
    top: 4%;
    left: 0;
    background-color: rgba(16, 25, 34, 0.9);
    z-index: 10;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100% !important;
    width: 100% !important;
    max-width: unset;
    cursor: zoom-out;
}

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

#ad-reminder-main-container .feature-img.popup-container .obj-cng-card-title {
    padding: 0;
    min-height: unset;
}

#ad-reminder-main-container .feature-img.popup-container .obj-cng-card-desc {
    display: block;
    margin-bottom: 10px;
}

#ad-reminder-main-container .feature-img.popup-container img {
    width: 100%;
    display: block;
    cursor: zoom-out;
}

#ad-reminder-main-container .feature-img.popup-container img:hover {
    transform: none;
}

#ad-reminder-main-container .feature-img.popup-container .container {
    background: #f0f8ff1a;
    padding: 20px !important;
    border-radius: 10px;
    border: 1px solid #757575;
    position: relative;
    width: 50% !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#ad-reminder-main-container .popup-container.feature-img .slidesjs-container {
    box-shadow: none;
    border-radius: 8px;
}

#ad-reminder-main-container .popup-container .expand-view-div {
    display: none;
}

#ad-reminder-main-container .feature-img .close {
    display: none;
    color: #6a6a6a;
    font-size: 2em;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: aliceblue;
    width: 30px;
    text-align: center;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.5019607843);
    cursor: pointer;
    border-radius: 0% 20% 0 20%;
}

#ad-reminder-main-container .feature-img .close:hover {
    color: #383838;
}

#ad-reminder-main-container .feature-img.popup-container .close {
    display: block;
}

#ad-reminder-main-container .feature-img.popup-container .slidesjs-container,
#ad-reminder-main-container .feature-img.popup-container .slidesjs-control {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
}

#ad-reminder-main-container .feature-img.popup-container .slidesjs-navigation {
    font-size: 3.15em !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

#ad-reminder-main-container .feature-img.popup-container .slidesjs-navigation:hover {
    color: rgb(255, 255, 255) !important;
}

#ad-reminder-main-container .feature-img.popup-container .slidesjs-navigation.slidesjs-previous {
    left: -70px;
    bottom: 50%;
    right: auto;
}

#ad-reminder-main-container .feature-img.popup-container .slidesjs-navigation.slidesjs-next {
    right: -70px;
    bottom: 50%;
}

#ad-reminder-main-container .feature-img.popup-container .slidesjs-pagination {
    margin-top: 18px;
    cursor: pointer;
}
/* SLIDER POPUP STYLES END */


/* =========================================================================
   SECTION 6 — Tailor Your Reminder Follow-Up Strategy
   Same SlidesJS-with-accordion-paired pattern as section 5, alternated to
   image-RIGHT + skew-left (so the two sliders mirror each other) and re-
   coloured with a LIGHT theme: ice-gray bg + teal accent. Per-card cycling
   active colours use a teal/blue family scoped under .ad-rmd-strategy-section
   so they never collide with section 5's purple-family cycling.
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-strategy-section {
    background-color: #f3f6fb;
    padding: 20px 15px;
    overflow: hidden;
}

#ad-reminder-main-container .ad-rmd-strategy-title {
    color: #14253d;
}

#ad-reminder-main-container .strategy-title-highlight {
    color: #00659c;
}

#ad-reminder-main-container .ad-rmd-strategy-quote {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    color: #3c4a63;
    font-style: italic;
}

#ad-reminder-main-container .ad-rmd-strategy-quote i {
    color: #7a8aa3;
    margin-right: 8px;
}

#ad-reminder-main-container .ad-rmd-strategy-quote .work-sans-medium {
    color: #00659c;
}

/* ---------- Per-card cycling active state (teal/blue family) ---------- */
#ad-reminder-main-container .ad-rmd-strategy-card.user-mng-card,
#ad-reminder-main-container .ad-rmd-strategy-card {
    width: 100%;
    min-width: 280px;
    max-width: 650px;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: relative;
}

#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(1).active { background-color: #e0f3f8; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(2).active { background-color: #d7eff5; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(3).active { background-color: #def0ff; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(4).active { background-color: #e5ecff; }

#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(1).active .user-mng-card-header { border-left: 2px solid #00659c; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(2).active .user-mng-card-header { border-left: 2px solid #0a8c9b; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(3).active .user-mng-card-header { border-left: 2px solid #0052aa; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(4).active .user-mng-card-header { border-left: 2px solid #3a5bbf; }

#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(1).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(1).active .user-mng-card-icon { color: #00659c; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(2).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(2).active .user-mng-card-icon { color: #0a8c9b; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(3).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(3).active .user-mng-card-icon { color: #0052aa; }
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(4).active .user-mng-card-title span,
#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card:nth-child(4).active .user-mng-card-icon { color: #3a5bbf; }

#ad-reminder-main-container .ad-rmd-strategy-section .ad-rmd-strategy-card .ad-rmd-strategy-card-desc {
    z-index: 1;
    position: relative;
    text-align: left;
}

/* =========================================================================
   SECTION 7 — 3-step strip (Why-It-Matters trio)
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-steps-section {
    background-color: #FBFCFE;
    padding: 20px 15px;
    overflow: hidden;
}

#ad-reminder-main-container .ad-rmd-steps-title {
    color: #14253d;
}

#ad-reminder-main-container .steps-title-highlight {
    color: #0052aa;
}

#ad-reminder-main-container .ad-rmd-steps-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
    text-align: left;
}

#ad-reminder-main-container .ad-rmd-step-card {
    width: calc((100% - 40px) / 3);
    box-sizing: border-box;
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    padding: 50px 24px 40px;
    box-shadow: 0 4px 14px rgba(20, 37, 61, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ad-reminder-main-container .ad-rmd-step-card-icon {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #56c0ff 0%, #0052aa 100%);
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(0, 82, 170, 0.28);
}

#ad-reminder-main-container .ad-rmd-step-card-title {
    color: #14253d;
}

#ad-reminder-main-container .ad-rmd-step-card-desc {
    color: #4a5568;
}

/* Big faded "Step 0X" watermark, bottom-right of each card (per reference). */
#ad-reminder-main-container .ad-rmd-step-num {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    line-height: 1;
    pointer-events: none;
}

#ad-reminder-main-container .ad-rmd-step-num b {
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    vertical-align: -3px;
}

/* Per-step accent colours — icon tile, title and the step number. */
#ad-reminder-main-container .ad-rmd-step-card-1 .ad-rmd-step-card-icon { background: linear-gradient(135deg, #2dd4bf 0%, #0e9e90 100%); box-shadow: 0 6px 16px rgba(14, 158, 144, 0.30); }
#ad-reminder-main-container .ad-rmd-step-card-1 .ad-rmd-step-card-title { color: #0e9e90; }
#ad-reminder-main-container .ad-rmd-step-card-1 .ad-rmd-step-num { color: rgba(45, 212, 191, 0.35); }

#ad-reminder-main-container .ad-rmd-step-card-2 .ad-rmd-step-card-icon { background: linear-gradient(135deg, #56c0ff 0%, #0052aa 100%); box-shadow: 0 6px 16px rgba(0, 82, 170, 0.28); }
#ad-reminder-main-container .ad-rmd-step-card-2 .ad-rmd-step-card-title { color: #0052aa; }
#ad-reminder-main-container .ad-rmd-step-card-2 .ad-rmd-step-num { color: rgba(0, 82, 170, 0.24); }

#ad-reminder-main-container .ad-rmd-step-card-3 .ad-rmd-step-card-icon { background: linear-gradient(135deg, #6fcf57 0%, #2f9e44 100%); box-shadow: 0 6px 16px rgba(47, 158, 68, 0.28); }
#ad-reminder-main-container .ad-rmd-step-card-3 .ad-rmd-step-card-title { color: #2f9e44; }
#ad-reminder-main-container .ad-rmd-step-card-3 .ad-rmd-step-num { color: rgba(47, 158, 68, 0.30); }

/* =========================================================================
   SECTION 8 — Why AdminDroid (differentiators)
   Copied from AdOverviewStyle.css .active-dir-reporting-content / .active-dir-reporting-card
   (lines 960–1068 in /active-directory-all-in-one-tool). Prefix renamed to ad-rmd-advantage-*.
   2-col card grid (48% width), icon-circle absolutely positioned top-right, 5-color
   cycling accents via :nth-child(5n+N). Six cards = 3 rows × 2 cols, balanced.
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-advantages-section {
    background-color: #ffffff;
    padding: 20px 15px;
}

#ad-reminder-main-container .ad-rmd-advantages-title {
    color: #14253d;
}

#ad-reminder-main-container .advantages-title-highlight {
    color: #0052aa;
}

#ad-reminder-main-container .ad-rmd-advantage-content {
    gap: 1.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding-top: 40px;
}

#ad-reminder-main-container .ad-rmd-advantage-card {
    padding: 1.3em 2.3em 1.3em 1.5em;
    border-radius: 8px;
    position: relative;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    overflow: hidden;
    background-color: #fff;
    width: 48%;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ad-reminder-main-container .ad-rmd-advantage-card-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    right: -30px;
    top: -38px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    font-size: 1.5em;
    color: #ffffff;
    border: 3px solid #ffffff10;
    padding: 0.7em;
}

#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 1) .ad-rmd-advantage-card-icon-wrapper { background-color: #4253dad1; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 2) .ad-rmd-advantage-card-icon-wrapper { background-color: #ebc028d1; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 3) .ad-rmd-advantage-card-icon-wrapper { background-color: #42da4dd1; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 4) .ad-rmd-advantage-card-icon-wrapper { background-color: #a94fd7d1; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 5) .ad-rmd-advantage-card-icon-wrapper { background-color: #2aaad1d1; }

#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 1) .ad-rmd-advantage-card-title,
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 1) span { color: #606fe0 !important; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 2) .ad-rmd-advantage-card-title,
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 2) span { color: #cca92d !important; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 3) .ad-rmd-advantage-card-title,
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 3) span { color: #39c243 !important; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 4) .ad-rmd-advantage-card-title,
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 4) span { color: #aa48da !important; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 5) .ad-rmd-advantage-card-title,
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 5) span { color: #3098b7 !important; }

#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 1) { border-left: 3px solid #4473b0; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 2) { border-left: 3px solid #d09539; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 3) { border-left: 3px solid #19ab73; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 4) { border-left: 3px solid #A835D6; }
#ad-reminder-main-container .ad-rmd-advantage-card:nth-child(5n + 5) { border-left: 3px solid #42AECE; }

#ad-reminder-main-container .ad-rmd-advantage-card-desc {
    color: rgb(61, 58, 58);
}

/* =========================================================================
   SECTION 9 — CTA section (dark; simple dual-button variant)
   ========================================================================= */
#ad-reminder-main-container .ad-rmd-cta-section {
    background-color: #ffffff;
    padding: 24px 15px;
}

#ad-reminder-main-container .ad-rmd-cta-container {
    max-width: 1300px;
    margin: 0 auto;
    background: linear-gradient(135deg, #e9f1ff 0%, #eef0ff 50%, #f3ecff 100%);
    border: 4px solid #ffffff;
    border-radius: 20px;
    padding: 42px 44px;
    color: #14253d;
    box-shadow: rgb(144 144 144 / 35%) 0px 2px 13px 2px;
    display: flex;
    align-items: center;
    gap: 40px;
}

#ad-reminder-main-container .ad-rmd-cta-content {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

#ad-reminder-main-container .ad-rmd-cta-illustration {
    flex: 0 0 auto;
    max-width: 320px;
    display: flex;
    justify-content: center;
}

#ad-reminder-main-container .ad-rmd-cta-illustration img {
    width: 100%;
    height: auto;
    max-width: 320px;
}

#ad-reminder-main-container .ad-rmd-cta-content .droid-section-main-title {
    color: #14253d;
}

#ad-reminder-main-container .cta-title-highlight {
    color: #14253d;
}

#ad-reminder-main-container .ad-rmd-cta-desc {
    padding: 0;
    color: #4a5568;
    margin: 12px 0 20px;
}

#ad-reminder-main-container .ad-rmd-cta-desc .work-sans-medium {
    color: #8424C3;
}

#ad-reminder-main-container .ad-rmd-cta-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 14px;
}

#ad-reminder-main-container .ad-rmd-cta-demo-link {
    color: #4a5568;
    text-align: left;
}

#ad-reminder-main-container .ad-rmd-cta-demo-link p {
    display: inline;
    margin: 0 6px 0 0;
    color: #5e6b80;
}

#ad-reminder-main-container .ad-rmd-cta-demo-link a.interlinking {
    color: #0052aa;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 82, 170, 0.4);
}

#ad-reminder-main-container .ad-rmd-cta-demo-link a.interlinking:hover {
    border-bottom-color: #0052aa;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
    #ad-reminder-main-container .ad-rmd-capability-card {
        width: calc((100% - 22px) / 2);
    }

    #ad-reminder-main-container .ad-rmd-step-card {
        width: calc((100% - 20px) / 2);
    }

    #ad-reminder-main-container .ad-rmd-steps-content {
        justify-content: center;
        gap: 48px 20px;
    }

    #ad-reminder-main-container .ad-rmd-advantage-card {
        width: 80%;
    }

    #ad-reminder-main-container .ad-rmd-agent-mini-card {
        width: 50%;
    }

    #ad-reminder-main-container .ad-rmd-agent-mini-card:nth-child(2n)::after {
        border-right: none;
    }

    #ad-reminder-main-container .obj-cng-content-partition {
        flex-direction: column;
        align-items: center;
        min-height: 0;
    }

    #ad-reminder-main-container .obj-cng-img-part,
    #ad-reminder-main-container .obj-cng-content-part {
        width: 100%;
        max-width: 600px;
    }

    /* Console showcase — each stacked panel collapses to screenshot-over-text. */
    #ad-reminder-main-container .ad-rmd-console-panel,
    #ad-reminder-main-container .ad-rmd-console-panel:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    #ad-reminder-main-container .ad-rmd-console-media,
    #ad-reminder-main-container .ad-rmd-console-text {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }
}


@media (max-width: 768px) {
    /* disable click-to-expand popup for product screenshots on small screens */
    #ad-reminder-main-container .ad-rmd-console-media img {
        pointer-events: none;
        cursor: default;
    }

    #ad-reminder-main-container .ad-rmd-capability-card,
    #ad-reminder-main-container .ad-rmd-step-card {
        width: 100%;
    }

    #ad-reminder-main-container .ad-rmd-advantage-card {
        width: 95%;
    }

    #ad-reminder-main-container .ad-rmd-agent-mini-card {
        width: 100%;
    }

    #ad-reminder-main-container .ad-rmd-agent-mini-card::after {
        border-right: none;
    }

    #ad-reminder-main-container .ad-rmd-console-tabs {
        padding: 12px;
        gap: 8px;
    }

    #ad-reminder-main-container .ad-rmd-console-tab {
        flex: 1 1 100%;
        padding: 12px 14px;
    }

    #ad-reminder-main-container .ad-rmd-console-panels {
        padding: 26px 22px 30px;
    }

    #ad-reminder-main-container .ad-rmd-cta-container {
        padding: 36px 24px;
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    #ad-reminder-main-container .ad-rmd-cta-content {
        text-align: center;
    }

    #ad-reminder-main-container .ad-rmd-cta-illustration {
        display: none;
    }

    #ad-reminder-main-container .ad-rmd-cta-links {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        justify-content: center;
    }

    #ad-reminder-main-container .ad-rmd-cta-demo-link {
        text-align: center;
    }
}

@media (max-width: 697px) {
    #ad-reminder-main-container .ad-rmd-banner-container {
        text-align: left;
    }

    #ad-reminder-main-container .ad-rmd-banner-content,
    #ad-reminder-main-container .ad-rmd-banner-img {
        margin-left: 0;
        margin-right: 0;
    }

    #ad-reminder-main-container .ad-rmd-banner-container .ad-rmd-banner-img {
        display: none;
    }

    #ad-reminder-main-container .ad-rmd-banner-content {
        width: 100%;
        max-width: none;
    }

    #ad-reminder-main-container .ad-rmd-banner-btn-wrap {
        text-align: left;
    }
}