/* ============================================================
   NCRA MEMBER ENGAGEMENT PAGE STYLESHEET
   File: member-engagement.css
   Scope: Page-scoped styles for /membership/member-engagement
   Font: Proxima Nova (site default — inherited, not redeclared)
   No Bootstrap. No inline CSS. Plain CSS only.
   ============================================================ */


/*  Hard coded Hero Breadcrumb ── */
.me-breadcrumb {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
}

.me-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.me-breadcrumb a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.me-breadcrumb strong {
    color: #ffffff;
    font-weight: 700;
}



/* ============================================================
   PASSPORT IMAGE CTA
   ============================================================ */
.me-passport-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 3px solid #e8960a;
    border-radius: 8px;
    vertical-align: bottom;
    outline: 3px solid #1a2e5a;
    outline-offset: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, outline-color 0.2s ease;
}

.me-passport-img:hover,
.me-passport-img:focus {
    transform: scale(1.02);
    outline-color: #e8960a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}


/* ============================================================
   CSS CUSTOM PROPERTIES
   Defined at :root so all variables are available to any
   content block on the page regardless of nesting or placement
   in Sitefinity layout widgets.
   ============================================================ */
:root {
    --me-navy:        #1a2e5a;
    --me-navy-mid:    #243E73;
    --me-navy-deep:   #061a3f;
    --me-teal:        #1FA396;
    --me-teal-dark:   #178a7e;
    --me-gold:        #F2A81D;
    --me-orange:      #DA5334;
    --me-white:       #ffffff;
    --me-gray-light:  #f5f6f8;
    --me-gray-mid:    #e8eaed;
    --me-gray-text:   #555555;
    --me-gray-muted:  #777777;
    --me-radius:      6px;
    --me-section-max: 1200px;
}

/* Section-level base font sizes */
.me-hero-band { font-size: 20px; }

.me-participate-band,
.me-program-section,
.me-faq-section,
.me-terms-section { font-size: 18px; }


/* ============================================================
   SHARED LAYOUT UTILITIES
   ============================================================ */

.me-section-inner {
    max-width: var(--me-section-max);
    margin: 0 auto;
    padding: 0 16px;
}

.me-section-header {
    margin-bottom: 24px;
}

.me-section-header--center {
    text-align: center;
}

.me-section-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.me-section-eyebrow-row--center {
    justify-content: center;
}

.me-section-rule {
    display: inline-block;
    width: 32px;
    height: 2px;
    background-color: #6b7280;
    flex-shrink: 0;
}

.me-section-eyebrow {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #6b7280;
}

.me-section-h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--me-navy);
    margin-bottom: 10px;
    line-height: 1.2;
}

.me-gold-word   { color: var(--me-gold); }
.me-orange-word { color: #DA5334; }

.me-section-lead {
    color: var(--me-gray-text);
    line-height: 1.6;
}

.me-section-header--center .me-section-lead {
    margin: 0 auto;
    text-align: center;
}

/* Reusable alt band */
.me-band-alt {
    background-color: #F4F5F6;
    border-top: 1px solid #edf1f5;
}

/* Reusable detail list */
.me-detail-list {
    margin: 8px 0 14px 0;
    padding-left: 22px;
}

.me-detail-list li {
    font-size: 18px;
    line-height: 1.5;
    color: #555555;
    padding: 3px 0;
}

/* Page-level anchor font inheritance fix */
.me-hero-band a,
.me-participate-band a,
.me-program-section a,
.me-faq-section a,
.me-terms-section a {
    font-family: inherit;
    font-size: inherit;
}


/* ============================================================
   HERO / INTRO BAND
   ============================================================ */
.me-hero-band {
    background: linear-gradient(135deg, #061a3f 0%, #1a2e5a 50%, #243E73 100%);
    padding: 50px 0;
    border-top: 4px solid var(--me-gold);
    border-bottom: 8px solid var(--me-gold);
}

.me-hero-content {
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 48px;
    align-items: center;
}

.me-hero-graphic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px;
    overflow: hidden;
}

.me-hero-img {
    display: block;
    height: auto;
    border-radius: 0;
    clip-path: polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 0.2s ease;
}

/* Eyebrow — confirm if still in use in HTML before removing */
.me-eyebrow {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--me-gold);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.me-eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 2px;
    background-color: var(--me-gold);
    flex-shrink: 0;
}

.me-hero-h1 {
    font-size: 2.872rem;
    font-weight: 300;
    color: #F2A81D;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.me-hero-h1-accent {
    font-weight: 700;
    font-style: italic;
}

.me-hero-tagline {
    font-size: 1.65rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    letter-spacing: 0.01em;
}

.me-hero-intro {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin-bottom: 1.75rem;
}


/* ============================================================
   ANCHOR NAVIGATION (inside hero band)
   ============================================================ */
.me-anchor-nav {
    border-top: none;
    margin-top: 36px;
    padding-top: 4px;
}

.me-anchor-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.me-anchor-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 20px 14px 0;
    margin-right: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.me-anchor-link:hover,
.me-anchor-link:focus {
    color: var(--me-white);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    text-decoration: none;
}


/* ============================================================
   WAYS TO PARTICIPATE — CARDS
   Card row layout handled by me-participate-band + SF flex chain.
   Page-specific styles: icon, badge, corner, jump link only.
   ============================================================ */
.me-participate-band {
    background-color: var(--me-white);
    padding: 32px 0;
}

.me-participate-band .me-section-rule    { background-color: #6b7280; }
.me-participate-band .me-section-eyebrow { color: #6b7280; }
.me-participate-band .me-section-h2      { color: var(--me-navy); }
.me-participate-band .me-section-lead    { color: var(--me-gray-text); }

/* Restore site default font size inside cards.
   18px is inherited from the section grouping rule above. */
.me-participate-band .content-box--card {
    font-size: 20px;
}

/* Card icon wrappers */
.me-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--me-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
    flex-shrink: 0;
}

.me-card-icon--gold { background-color: #FDF3DC; }
.me-card-icon--teal { background-color: #edf1f7; }
.me-card-icon--navy { background-color: #E8ECF5; }

/* Page-scoped border-top color utilities for content-box--card.
   Uses me- prefix to avoid conflict with universal border utilities.
   Hover rules lock the top color so it doesn't shift on card hover. */
.content-box--card.me-border-gold { border-top: 5px solid #e8960a; }
.content-box--card.me-border-teal { border-top: 5px solid #1FA396; }
.content-box--card.me-border-navy { border-top: 5px solid #243E73; }

.content-box--card.me-border-gold:hover { border-top-color: #e8960a; }
.content-box--card.me-border-teal:hover { border-top-color: #1FA396; }
.content-box--card.me-border-navy:hover { border-top-color: #243E73; }

/* Card badges */
.me-card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin: 0 auto 16px auto;
    width: fit-content;
}

.me-card-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.me-card-badge--featured         { background-color: #FDF3DC; color: #7a4f00; }
.me-card-badge--featured::before { background-color: var(--me-gold); }

.me-card-badge--teal             { background-color: #edf1f7; color: var(--me-navy-mid); }
.me-card-badge--teal::before     { background-color: var(--me-teal); }

.me-card-badge--navy             { background-color: #E8ECF5; color: var(--me-navy-mid); }
.me-card-badge--navy::before     { background-color: var(--me-navy-mid); }

/* Card rule divider */
.me-card-rule {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 16px 0;
}

/* Reward row — used in sidebar progress cards */
.me-card-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    margin-bottom: 16px;
    padding-top: 16px;
}

.me-reward-tag {
    background-color: #b57d0a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.4;
}

.me-reward-tag--orange {
    background-color: #243E73;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.4;
}

.me-reward-desc {
    font-size: 16px;
    color: var(--me-navy);
    font-weight: 600;
    text-decoration: none;
}

.me-card-reward--solo {
    justify-content: center;
    margin-top: auto;
    margin-bottom: 4px;
    padding-top: 16px;
    padding-bottom: 4px;
}

.me-card-cta {
    margin-top: auto;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    align-self: stretch !important;
}

/* Card jump link */
.me-card-jump {
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1FA396 !important;
    text-decoration: none;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}

.me-card-jump::after {
    content: ' →';
}

.me-card-jump:hover,
.me-card-jump:focus {
    color: #243E73 !important;
    text-decoration: none;
}

.me-card-prize-wrap {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 16px;
    padding-bottom: 4px;
}

.me-card-title-link {
    color: var(--me-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}

.me-card-title-link:hover {
    color: var(--me-teal);
    text-decoration: underline;
}

.me-card-nudge {
    font-size: 15px;
    color: var(--me-gray-muted);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* Diagonal corner treatment — page-specific.
   border-radius intentionally omitted — inherited from content-box--card (26px). */
.me-card-corner {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 64px !important;
}

.me-corner-label {
    position: absolute;
    bottom: 22px;
    right: -18px;
    width: 96px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-45deg);
    transform-origin: center;
    pointer-events: none;
    line-height: 1.4;
    padding-top: 5px;
    border-top: 1.5px solid currentColor;
}

.me-corner-label--gold { color: #e8960a; }
.me-corner-label--teal { color: #1FA396; }
.me-corner-label--navy { color: #243E73; }


/* ============================================================
   PROGRAM SECTIONS (PASSPORT / SKILLS TEST / WEBINAR)
   ============================================================ */
.me-program-section {
    padding: 40px 0 !important;
    background-color: var(--me-white);
}

#ncra-passport {
    padding: 24px 0;
}

.me-program-section--alt {
    background-color: #f4f7fb;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.me-program-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.me-program-icon-lg {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.me-program-icon-lg--gold { background-color: #FDF3DC; }
.me-program-icon-lg--teal { background-color: #DFF2F0; }
.me-program-icon-lg--navy { background-color: #E8ECF5; }

.me-program-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--me-teal);
    margin-bottom: 4px;
}

.me-program-label--teal { color: var(--me-teal); }
.me-program-label--navy { color: var(--me-navy-mid); }

.me-program-h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--me-navy);
    line-height: 1.15;
    margin: 0;
}

.me-program-sidebar-unit {
    padding-left: 12px;
}

.me-program-intro {
    line-height: 1.7;
    color: var(--me-gray-text);
    margin-bottom: 28px;
}

/* Key statement callout */
.me-key-statement {
    padding: 16px 0 16px 22px;
    margin-bottom: 32px;
    margin-top: 8px;
}

.me-key-statement--teal {
    background-color: transparent;
    border-left: 5px solid #138a7a;
    padding-left: 20px;
}

.me-key-statement--navy {
    background-color: transparent;
    border-left: 5px solid #1a3468;
    padding-left: 20px;
}

.me-key-statement p {
    font-size: 20px;
    font-weight: 600;
    color: var(--me-navy);
    margin: 0;
    line-height: 1.5;
}

.me-key-statement p strong {
    color: var(--me-navy);
}

.me-section-cta {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 36px;
}


/* ============================================================
   PASSPORT ACTIVITY BLOCK
   ============================================================ */
.me-activity-block {
    margin-top: 32px;
    margin-bottom: 32px;
}

.me-activity-heading {
    font-size: 23px;
    font-weight: 800;
    color: var(--me-navy);
    margin-bottom: 8px;
}

.me-activity-note {
    font-size: 17px;
    color: var(--me-gray-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

.me-required-block {
    background-color: #FDF3DC;
    border: 1px solid rgba(242, 168, 29, 0.35);
    border-left: 4px solid var(--me-gold);
    border-radius: var(--me-radius);
    padding: 20px 22px;
    margin-bottom: 24px;
}

.me-required-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.me-required-badge {
    background-color: var(--me-gold);
    color: #4a2e00;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 4px;
}

.me-required-note {
    font-size: 16px;
    color: #7a4f00;
    margin: 0;
    font-weight: 500;
}

.me-required-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 560px;
}

.me-required-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--me-navy);
    font-weight: 600;
    padding: 7px 0;
    border-bottom: 1px solid rgba(242, 168, 29, 0.2);
}

.me-required-list li:last-child {
    border-bottom: none;
}

.me-required-list a {
    color: #243E73;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.me-required-list a:hover,
.me-required-list a:focus {
    color: var(--me-teal);
    text-decoration: underline;
}

.me-check {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.me-check--required {
    background-color: var(--me-gold);
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.me-check--required::after {
    content: '';
    display: block;
    width: 9px;
    height: 6px;
    border-left: 2px solid #4a2e00;
    border-bottom: 2px solid #4a2e00;
    transform: rotate(-45deg) translateY(-1px);
}

.me-optional-block {
    padding: 24px 0 0;
}

.me-optional-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--me-navy);
    margin-bottom: 8px;
}

.me-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    margin-top: 20px;
}

.me-activity-group-heading {
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #444444;
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: none;
}

.me-activity-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.me-activity-list li {
    position: relative;
    padding: 2px 0 2px 16px;
    border-bottom: none;
    font-size: 14px;
    line-height: 1.4;
    color: var(--me-gray-text);
}

.me-activity-list li:last-child {
    border-bottom: none;
}

.me-activity-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 2px;
    color: #888888;
    font-weight: 400;
}

.me-activity-list a {
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
}

.me-activity-list a:hover,
.me-activity-list a:focus {
    text-decoration: underline !important;
}


/* ============================================================
   PROGRAM DETAILS BLOCK
   ============================================================ */
.me-program-details {
    margin-top: 30px;
}

.me-program-details-heading {
    font-size: 24px;
    font-weight: 800;
    color: var(--me-navy);
    margin-bottom: 14px;
    line-height: 1.2;
}

.me-program-details-content {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--me-radius);
    padding: 24px 32px;
}

/* Modifier — removes border when used inside SF tab widgets */
.me-program-details-content.no-border {
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Base rule for all p and li inside program details.
   font-size intentionally has no !important so scoped
   overrides (e.g. me-details-list) can win naturally. */
.me-program-details-content p,
.me-program-details-content li:not(.me-details-list > li) {
    font-size: 18px;
    line-height: 1.65 !important;
    color: #4f5767 !important;
    font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin-bottom: 14px !important;
}

.me-program-details-content li:not(.me-details-list > li) {
    margin-bottom: 10px !important;
}

.me-program-details-content p:last-child {
    margin-bottom: 0 !important;
}

.me-program-details-content strong {
    color: var(--me-navy) !important;
    font-weight: 700 !important;
}

.me-program-details-content a {
    font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    color: var(--me-navy-mid);
    font-weight: 600;
    text-decoration: none;
}

.me-program-details-content a:hover,
.me-program-details-content a:focus {
    color: var(--me-teal);
    text-decoration: underline;
}

/* Scoped list class for required activities at top of passport section.
   Renders larger than me-activity-list to visually distinguish required items.
   Use class="me-details-list" on the outer <ul> only. */
.me-details-list {
    list-style: disc;
    padding-left: 24px;
    margin-top: 12px;
    margin-bottom: 32px;
}

.me-details-list > li,
.me-program-details-content .me-details-list > li,
.me-program-details-content.no-border .me-details-list > li {
    font-size: 20px !important;
    font-weight: 400;
    margin-bottom: 8px;
}

.me-program-details-content .me-details-list > li a {
    font-weight: 400 !important;
    font-size: 20px !important;
    color: #243E73;
    text-decoration: none;
}

.me-program-details-content .me-details-list > li a:hover,
.me-program-details-content .me-details-list > li a:focus {
    color: var(--me-teal);
    text-decoration: underline;
}

.me-details-list ul {
    list-style: square;
    padding-left: 24px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.me-details-list ul li {
    margin-bottom: 6px;
}

/* Ordered steps list — used in How it Works sections */
.me-steps-list {
    padding-left: 20px;
    margin-top: 12px;
    margin-bottom: 28px;
}

.me-steps-list li {
    line-height: 1.6;
    color: var(--me-gray-text);
    margin-bottom: 6px;
}


/* ============================================================
   SIDEBAR CARDS
   ============================================================ */
.me-program-sidebar {
    position: sticky;
    top: 24px;
}

.me-sidebar-card {
    border-radius: 8px;
    padding: 28px;
    border: 1px solid var(--me-gray-mid);
    width: 100%;
}

.me-sidebar-card--passport {
    background-color: var(--me-navy);
    padding: 28px;
    width: 100%;
}

.me-sidebar-card--teal {
    background-color: #f0f4f8;
    border-color: rgba(36, 62, 115, 0.15);
}

.me-sidebar-card--navy {
    background-color: #E8ECF5;
    border-color: rgba(36, 62, 115, 0.2);
    width: 100%;
}

.me-sidebar-card--white {
    background-color: #ffffff;
    border-color: rgba(36, 62, 115, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    width: 100%;
}

.me-sidebar-card-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.me-sidebar-card--passport .me-sidebar-card-label { color: var(--me-gold); }
.me-sidebar-card--teal .me-sidebar-card-label     { color: var(--me-navy-mid); }
.me-sidebar-card--white .me-sidebar-card-label    { color: var(--me-navy-mid); }
.me-sidebar-card--navy .me-sidebar-card-label     { color: var(--me-navy-mid); }


/* ============================================================
   SKILLS TEST: PROGRESS STEPS
   ============================================================ */
.me-progress-visual {
    margin-bottom: 8px;
}

.me-progress-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.me-progress-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(36, 62, 115, 0.12);
}

.me-progress-step:last-child {
    border-bottom: none;
}

.me-step-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.me-progress-step--done .me-step-num   { background-color: #1FA396 !important; color: #ffffff !important; }
.me-progress-step--reward .me-step-num { background-color: #DA5334 !important; color: #ffffff !important; }

.me-step-label {
    font-size: 16px;
    color: var(--me-navy);
    font-weight: 600;
}

.me-step-label--reward {
    font-size: 17px;
    color: #1a2e5a;
    font-weight: 700;
}


/* ============================================================
   WEBINAR PROGRESS DOTS
   ============================================================ */
.me-webinar-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    align-items: center;
}

.me-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.me-dot--done   { background-color: #243E73 !important; }

.me-dot--reward {
    background-color: #DA5334 !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.me-webinar-dots-label {
    font-size: 16px;
    color: var(--me-navy-mid);
    font-weight: 700;
    margin: 0;
    width: 100%;
}


/* ============================================================
   FAQ SECTION
   ============================================================ */
.me-faq-section {
    background-color: #fafbfc;
    padding: 64px 0;
}

.me-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.me-faq-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--me-gray-mid);
}

.me-faq-item:first-child {
    border-top: 1px solid var(--me-gray-mid);
}

.me-faq-q {
    font-size: 20px;
    font-weight: 700;
    color: var(--me-navy);
    margin-bottom: 8px;
    line-height: 1.4;
}

.me-faq-a {
    font-size: 18px;
    color: var(--me-gray-text);
    line-height: 1.65;
    margin: 0;
}

.me-faq-a a {
    color: var(--me-teal);
    font-weight: 600;
    text-decoration: none;
}

.me-faq-a a:hover {
    color: var(--me-navy);
    text-decoration: underline;
}

.me-faq-list-bullets {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.me-faq-list-bullets li {
    font-size: 18px;
    color: var(--me-gray-text);
    line-height: 1.65;
    padding: 4px 0;
}


/* ============================================================
   PROGRAM TERMS SECTION
   ============================================================ */
.me-terms-section {
    background-color: var(--me-white);
    padding: 48px 0 60px;
    border-top: 1px solid var(--me-gray-mid);
}

.me-terms-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--me-gray-muted);
    margin-bottom: 16px;
}

.me-terms-body p {
    font-size: 16px;
    color: var(--me-gray-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.me-terms-body p:last-child {
    margin-bottom: 0;
}

.me-terms-body ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 0;
}

.me-terms-body ul li {
    font-size: 16px;
    color: var(--me-gray-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.me-terms-body ul li:last-child {
    margin-bottom: 0;
}


/* ============================================================
   CARD HEADING STYLE
   Scoped to content-box--card inside participate band.
   Use .align-center utility class in HTML for centered headings.
   ============================================================ */
.me-participate-band .content-box--card h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a2e5a !important;
    line-height: 1.2 !important;
}


/* ============================================================
   RESPONSIVE: TABLET (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    .me-participate-band {
        padding: 32px 0;
    }

    .me-sidebar-card--passport {
        margin: 0 auto;
    }

    .me-hero-h1      { font-size: 2.25rem; }
    .me-hero-tagline { font-size: 1.375rem; }
    .me-program-h2   { font-size: 1.625rem; }

    .me-hero-content {
        grid-template-columns: 60fr 40fr;
        gap: 32px;
    }

    .me-hero-img {
        width: 100%;
    }
}


/* ============================================================
   RESPONSIVE: MOBILE (max-width: 600px)
   ============================================================ */
@media (max-width: 600px) {

    .me-hero-content {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 24px;
    }

    .me-hero-graphic {
        display: flex;
        justify-content: center;
        padding: 6px;
    }

    .me-hero-img {
        clip-path: none;
        max-width: 340px;
        width: 100%;
    }

    .me-hero-h1      { font-size: 1.875rem; }
    .me-hero-tagline { font-size: 1.125rem; }
    .me-hero-intro   { font-size: 1rem; }

    .me-section-h2,
    .me-program-h2   { font-size: 1.5rem; }

    .me-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .me-hero-divider { display: none; }

    .me-program-header {
        flex-direction: column;
        gap: 12px;
    }

    .me-key-statement {
        flex-direction: column;
        gap: 10px;
    }

    .me-required-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .me-anchor-link {
        font-size: 15px;
        padding: 10px 12px 10px 0;
        margin-right: 12px;
    }

  
  .me-sidebar-card {
    margin: 16px auto 0;
}
  
  
    /* Center all sidebar card variants on mobile */
    .me-sidebar-card--passport,
    .me-sidebar-card--teal,
    .me-sidebar-card--navy,
    .me-sidebar-card--white {
        margin: 16px auto 0;
    }

    /* Center passport image on mobile */
    .me-passport-img {
        margin: 16px auto 0;
    }

    .me-activity-grid {
        grid-template-columns: 1fr;
    }
}