/**
 * MPN Widgets - Elementor Widget Styles
 * Version: 3.16.0
 * Updated: Added Article Hero, Articles Grid, Single Article, and Related Articles widget styles.
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --mpn-navy: #102a43;
    --mpn-navy-light: #243b53;
    --mpn-gold: #c59d32;
    --mpn-gold-light: #d6b356;
    --mpn-slate-dark: #486581;
    --mpn-slate: #627d98;
    --mpn-slate-light: #829ab1;
    --mpn-slate-lighter: #9fb3c8;
    --mpn-slate-lightest: #bcccdc;
    --mpn-grey-light: #d9e2ec;
    --mpn-grey-lightest: #f0f4f8;
    --mpn-white: #ffffff;
    --mpn-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mpn-font-logo: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ==========================================================================
   HEADER WIDGET
   --------------------------------------------------------------------------
   All colour, font, background, and border properties use !important to
   prevent Hello Elementor's reset.css (a { color:#c36 }), its button
   styles (button { border:1px solid #c36 }), and Elementor's global
   .elementor-widget-container a { color: var(--e-global-color-accent) }
   from overriding the MPN design tokens.
   ========================================================================== */

/* ---- Bar ---- */
.mpn-header {
    position: sticky;
    top: 0;
    z-index: 99999;
    background-color: var(--mpn-white) !important;
    height: 80px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.05);
    font-family: var(--mpn-font-body);
}

.mpn-header *,
.mpn-header *::before,
.mpn-header *::after {
    box-sizing: border-box;
}

.mpn-header__container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

/* ---- Logo ---- */
.mpn-header a.mpn-header__logo,
.mpn-header a.mpn-header__logo:hover,
.mpn-header a.mpn-header__logo:visited {
    font-size: 24px;
    font-family: var(--mpn-font-logo) !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}

.mpn-header .mpn-header__logo-highlight {
    color: var(--mpn-gold) !important;
}

/* ---- Desktop Navigation ---- */
.mpn-header__nav {
    display: none;
    align-items: center;
    gap: 32px;
}

.mpn-header a.mpn-header__nav-link,
.mpn-header a.mpn-header__nav-link:visited {
    font-size: 14px;
    font-weight: 500 !important;
    font-family: var(--mpn-font-body) !important;
    color: var(--mpn-slate-dark) !important;
    text-decoration: none !important;
    padding: 8px 0;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.mpn-header a.mpn-header__nav-link:hover,
.mpn-header a.mpn-header__nav-link:active {
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
}

/* Parent link with chevron */
.mpn-header a.mpn-header__nav-link--parent {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mpn-header__chevron {
    color: var(--mpn-slate-lighter) !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.mpn-header__dropdown:hover .mpn-header__chevron {
    color: var(--mpn-navy) !important;
    transform: rotate(180deg);
}

/* ---- Dropdown Panel ---- */
.mpn-header__dropdown {
    position: relative !important;
}

.mpn-header__dropdown-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px;
    width: 224px;
    background-color: var(--mpn-white) !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 4px 6px -2px rgba(0, 0, 0, 0.03);
    padding: 8px 0;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

.mpn-header__dropdown:hover>.mpn-header__dropdown-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

.mpn-header a.mpn-header__dropdown-link,
.mpn-header a.mpn-header__dropdown-link:visited {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--mpn-font-body) !important;
    color: var(--mpn-slate) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mpn-header a.mpn-header__dropdown-link:hover,
.mpn-header a.mpn-header__dropdown-link:active {
    background-color: #f8fafc !important;
    color: var(--mpn-navy) !important;
}

/* ---- Desktop Actions ---- */
.mpn-header__actions {
    display: none;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.mpn-header a.mpn-header__login,
.mpn-header a.mpn-header__login:visited {
    font-size: 14px;
    font-weight: 600 !important;
    font-family: var(--mpn-font-body) !important;
    color: var(--mpn-slate-dark) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.mpn-header a.mpn-header__login:hover,
.mpn-header a.mpn-header__login:active {
    color: var(--mpn-navy) !important;
}

.mpn-header a.mpn-header__join,
.mpn-header a.mpn-header__join:visited {
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 10px 24px;
    border-radius: 9999px;
    border: none !important;
    font-size: 14px;
    font-weight: 500 !important;
    font-family: var(--mpn-font-body) !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
    transition: all 0.3s ease;
    display: inline-block;
    line-height: 1.5;
}

.mpn-header a.mpn-header__join:hover,
.mpn-header a.mpn-header__join:active {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

/* ---- Dropdown hover bridge ----
   Transparent pseudo-element that bridges the 4px gap between the
   nav-link and the dropdown panel, preventing the :hover from
   dropping when the cursor moves between them.                    */
.mpn-header__dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    pointer-events: auto;
}

/* ---- Mobile Toggle Button ---- */
.mpn-header button.mpn-header__toggle,
.mpn-header button.mpn-header__toggle:hover,
.mpn-header button.mpn-header__toggle:focus {
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin: 0;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--mpn-navy) !important;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.mpn-header__toggle-close {
    display: none;
}

.mpn-header__toggle[aria-expanded="true"] .mpn-header__toggle-open {
    display: none;
}

.mpn-header__toggle[aria-expanded="true"] .mpn-header__toggle-close {
    display: block;
}

/* Small mobile: tighter header */
@media (max-width: 479px) {
    .mpn-header {
        height: 64px;
    }

    .mpn-header__container {
        padding: 0 16px;
        gap: 16px;
    }

    .mpn-header a.mpn-header__logo,
    .mpn-header a.mpn-header__logo:hover,
    .mpn-header a.mpn-header__logo:visited {
        font-size: 20px;
    }
}

@media (max-width: 1023px) {

    .mpn-header button.mpn-header__toggle,
    .mpn-header button.mpn-header__toggle:hover,
    .mpn-header button.mpn-header__toggle:focus {
        display: flex !important;
    }
}

@media (min-width: 1024px) {

    .mpn-header__nav,
    .mpn-header__actions {
        display: flex !important;
    }

    .mpn-header button.mpn-header__toggle,
    .mpn-header button.mpn-header__toggle:hover,
    .mpn-header button.mpn-header__toggle:focus {
        display: none !important;
    }
}

/* ---- Elementor Editor ----
   No forced overrides.  The natural 1024 px breakpoint handles all
   device preview modes accurately.  If the desktop preview pane is
   narrower than 1024 px (small laptop + sidebar), the hamburger
   shows, which is the correct representation at that width.       */

/* ==========================================================================
   HEADER WIDGET - Mobile Menu Overlay
   --------------------------------------------------------------------------
   Rendered outside the header bar so it can cover the full viewport.
   Uses the same nav_items repeater data as the desktop menu, keeping the
   two in sync automatically.
   ========================================================================== */
/* Base: hidden on desktop.  On mobile (<1024px) the overlay is shown
   as a fixed full-screen panel.  JavaScript moves the element to
   <body> on init so it escapes any Elementor stacking context.     */
.mpn-header__mobile {
    display: none;
    font-family: var(--mpn-font-body);
}

@media (max-width: 1023px) {
    .mpn-header__mobile {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99998;
        background-color: var(--mpn-white) !important;
        padding: 96px 24px 40px;
        overflow-y: auto;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .mpn-header__mobile--open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Hide desktop elements on mobile (belt-and-braces) */
    .mpn-header__nav,
    .mpn-header__actions {
        display: none !important;
    }
}

/* ---- WordPress admin bar offset ----
   The admin bar pushes the header down by 32 px (desktop) or 46 px
   (mobile ≤782 px).  The overlay is position:fixed so it ignores
   that shift; we must add extra padding so the first heading is
   not hidden behind the header + admin bar.                       */
body.admin-bar .mpn-header {
    top: 32px;
}

body.admin-bar .mpn-header__mobile {
    padding-top: 128px;
}

@media (max-width: 782px) {
    body.admin-bar .mpn-header {
        top: 46px;
    }

    body.admin-bar .mpn-header__mobile {
        padding-top: 142px;
    }
}

/* Small mobile: match shorter 64px header */
@media (max-width: 479px) {
    .mpn-header__mobile {
        padding: 80px 16px 32px;
    }

    body.admin-bar .mpn-header__mobile {
        padding-top: 112px;
    }
}

/* No Elementor-editor hide rule for the mobile overlay.
   All device previews use the real responsive breakpoints.        */

.mpn-header__mobile *,
.mpn-header__mobile *::before,
.mpn-header__mobile *::after {
    box-sizing: border-box;
}

.mpn-header__mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 480px;
    margin: 0;
}

/* Mobile grouped navigation */
.mpn-header__mobile-group {
    display: flex;
    flex-direction: column;
}

.mpn-header__mobile a.mpn-header__mobile-heading,
.mpn-header__mobile a.mpn-header__mobile-heading:visited {
    font-family: var(--mpn-font-logo) !important;
    font-size: 20px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
    margin-bottom: 12px;
    display: block;
}

.mpn-header__mobile a.mpn-header__mobile-heading:hover,
.mpn-header__mobile a.mpn-header__mobile-heading:active {
    color: var(--mpn-gold) !important;
}

.mpn-header__mobile-children {
    padding-left: 16px;
    border-left: 2px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mpn-header__mobile a.mpn-header__mobile-link,
.mpn-header__mobile a.mpn-header__mobile-link:visited {
    font-family: var(--mpn-font-body) !important;
    font-size: 16px;
    font-weight: 400 !important;
    color: var(--mpn-slate) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: block;
}

.mpn-header__mobile a.mpn-header__mobile-link:hover,
.mpn-header__mobile a.mpn-header__mobile-link:active {
    color: var(--mpn-navy) !important;
}

.mpn-header__mobile-divider {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 0;
    padding: 0;
    height: 0;
}

.mpn-header__mobile a.mpn-header__mobile-login,
.mpn-header__mobile a.mpn-header__mobile-login:visited {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600 !important;
    font-family: var(--mpn-font-body) !important;
    color: var(--mpn-slate-dark) !important;
    text-decoration: none !important;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.mpn-header__mobile a.mpn-header__mobile-login:hover,
.mpn-header__mobile a.mpn-header__mobile-login:active {
    color: var(--mpn-navy) !important;
}

.mpn-header__mobile a.mpn-header__mobile-join,
.mpn-header__mobile a.mpn-header__mobile-join:visited {
    display: block;
    text-align: center;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 16px;
    border-radius: 12px;
    border: none !important;
    font-size: 14px;
    font-weight: 700 !important;
    font-family: var(--mpn-font-body) !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
}

.mpn-header__mobile a.mpn-header__mobile-join:hover,
.mpn-header__mobile a.mpn-header__mobile-join:active {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
}

/* Prevent body scroll when mobile menu is open */
body.mpn-header--menu-open {
    overflow: hidden !important;
}

/* ==========================================================================
   HERO WIDGET
   ========================================================================== */
.mpn-hero {
    position: relative;
    padding: 80px 0 128px;
    background-color: rgba(240, 244, 248, 0.5);
    overflow: hidden;
    font-family: var(--mpn-font-body);
}

.mpn-hero__bg-decor-1,
.mpn-hero__bg-decor-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.5;
    pointer-events: none;
}

.mpn-hero__bg-decor-1 {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    width: 800px;
    height: 800px;
    background-color: var(--mpn-grey-lightest);
}

.mpn-hero__bg-decor-2 {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    width: 600px;
    height: 600px;
    background-color: #fbf9f0;
}

.mpn-hero__container {
    position: relative;
    z-index: 10;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center;
}

.mpn-hero__content {
    order: 1;
}

.mpn-hero__title {
    font-size: 48px;
    font-weight: 700;
    color: var(--mpn-navy);
    margin: 0 0 32px 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-family: var(--mpn-font-body);
}

.mpn-hero__title-highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

/* SVG underline sits inside the span; no ::after needed. */
.mpn-hero__title-underline {
    position: absolute;
    width: 100%;
    height: 0.15em;
    bottom: -0.04em;
    left: 0;
    color: var(--mpn-gold-light);
    opacity: 0.4;
    pointer-events: none;
}

.mpn-hero__description {
    font-size: 20px;
    color: #64748b;
    margin: 0 0 40px 0;
    line-height: 1.6;
    font-weight: 300;
    max-width: 512px;
    font-family: var(--mpn-font-body);
}

.mpn-hero__buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
}

.mpn-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body);
}

.mpn-hero__btn--primary {
    background-color: var(--mpn-navy);
    color: var(--mpn-white);
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
}

.mpn-hero__btn--primary:hover {
    background-color: var(--mpn-navy-light);
    color: var(--mpn-white);
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

.mpn-hero__btn--primary svg {
    color: var(--mpn-white);
    stroke: var(--mpn-white);
}

.mpn-hero__btn--secondary {
    background-color: var(--mpn-white);
    color: var(--mpn-navy);
    border: 1px solid #e2e8f0;
}

.mpn-hero__btn--secondary:hover {
    background-color: #f8fafc;
    color: var(--mpn-navy);
    border-color: var(--mpn-slate-lighter);
}

.mpn-hero__image-wrapper {
    order: 2;
    position: relative;
    /* No extra padding on mobile; ring is hidden below 768px */
}

.mpn-hero__image-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(16, 42, 67, 0.25);
}

.mpn-hero__image {
    width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 5;
}

.mpn-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 42, 67, 0.4), transparent, transparent);
    pointer-events: none;
}

.mpn-hero__card {
    position: absolute;
    bottom: 32px;
    left: 32px;
    background-color: rgba(6, 23, 41, 0.3);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    padding: 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mpn-hero__card-avatars {
    display: flex;
}

.mpn-hero__card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--mpn-navy);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mpn-hero__card-avatar:nth-child(2) {
    margin-left: -12px;
}

.mpn-hero__card-avatar--placeholder {
    background-color: var(--mpn-white);
    color: var(--mpn-navy);
}

.mpn-hero__card-avatar--icon {
    background-color: var(--mpn-gold);
    color: var(--mpn-white);
}

.mpn-hero__card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpn-hero__card-title {
    color: var(--mpn-white);
    font-weight: 700;
    font-size: 14px;
    font-family: var(--mpn-font-body);
}

.mpn-hero__card-subtitle {
    color: var(--mpn-slate-lightest);
    font-size: 12px;
    font-family: var(--mpn-font-body);
}

.mpn-hero__ring {
    display: none;
    position: absolute;
    z-index: -1;
    border: 2px solid var(--mpn-grey-light);
    border-radius: 24px;
    pointer-events: none;
}

/* Small mobile */
@media (max-width: 479px) {
    .mpn-hero {
        padding: 48px 0 64px;
    }

    .mpn-hero__container {
        padding: 0 16px;
        gap: 40px;
    }

    .mpn-hero__title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .mpn-hero__description {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .mpn-hero__buttons {
        margin-bottom: 32px;
    }

    .mpn-hero__btn {
        padding: 14px 24px;
        font-size: 13px;
    }

    .mpn-hero__image-container {
        border-radius: 16px;
    }

    .mpn-hero__card {
        bottom: 16px;
        left: 16px;
        padding: 12px;
        border-radius: 12px;
        gap: 12px;
    }

    .mpn-hero__card-avatar {
        width: 32px;
        height: 32px;
    }

    .mpn-hero__card-title {
        font-size: 12px;
    }

    .mpn-hero__card-subtitle {
        font-size: 10px;
    }
}

@media (min-width: 640px) {
    .mpn-hero__buttons {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .mpn-hero__ring {
        display: block;
        bottom: -12px;
        right: -12px;
        width: 100%;
        height: 100%;
    }

    .mpn-hero__image {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 1024px) {
    .mpn-hero__container {
        grid-template-columns: 1fr 1fr;
        gap: 72px;
    }

    .mpn-hero__title {
        font-size: clamp(48px, 4.2vw, 64px);
    }

    .mpn-hero__image {
        aspect-ratio: 1 / 1;
    }

    .mpn-hero__ring {
        bottom: -24px;
        right: -24px;
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   FOOTER WIDGET
   ========================================================================== */
.mpn-footer {
    background-color: var(--mpn-navy);
    padding: 64px 0;
    font-family: var(--mpn-font-body);
}

.mpn-footer__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.mpn-footer__logo {
    font-size: 24px;
    font-weight: 700;
    display: block;
    margin-bottom: 24px;
    text-decoration: none;
    font-family: var(--mpn-font-logo);
    color: var(--mpn-white);
}

.mpn-footer__logo:hover {
    color: var(--mpn-white);
}

.mpn-footer__logo-highlight {
    color: var(--mpn-gold);
}

.mpn-footer__description {
    max-width: 384px;
    line-height: 1.6;
    font-size: 14px;
    color: var(--mpn-slate-lighter);
    margin: 0;
}

.mpn-footer__heading {
    font-weight: 700;
    margin: 0 0 24px 0;
    color: var(--mpn-white);
    font-size: 16px;
    font-family: var(--mpn-font-body);
}

.mpn-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mpn-footer__links li {
    margin-bottom: 12px;
}

.mpn-footer__link {
    color: var(--mpn-slate-light);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.mpn-footer__link:hover {
    color: var(--mpn-gold-light);
}

.mpn-footer__socials {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.mpn-footer__social {
    color: var(--mpn-slate-light);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpn-footer__social:hover {
    color: var(--mpn-gold-light);
}

.mpn-footer__social svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mpn-footer__social-placeholder {
    color: var(--mpn-slate);
    font-size: 12px;
    font-style: italic;
}

.mpn-footer__bottom {
    border-top: 1px solid var(--mpn-navy-light);
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    font-size: 12px;
}

.mpn-footer__copyright {
    color: var(--mpn-slate);
    margin: 0;
}

.mpn-footer__legal {
    display: flex;
    gap: 24px;
}

.mpn-footer__legal-link {
    color: var(--mpn-slate);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mpn-footer__legal-link:hover {
    color: var(--mpn-white);
}

/* Small mobile: tighter footer */
@media (max-width: 479px) {
    .mpn-footer {
        padding: 48px 0;
    }

    .mpn-footer__container {
        padding: 0 16px;
    }

    .mpn-footer__grid {
        gap: 32px;
        margin-bottom: 32px;
    }

    .mpn-footer__logo {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .mpn-footer__description {
        font-size: 13px;
    }

    .mpn-footer__heading {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .mpn-footer__bottom {
        padding-top: 24px;
        gap: 12px;
    }

    .mpn-footer__legal {
        gap: 16px;
    }
}

@media (min-width: 768px) {
    .mpn-footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .mpn-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ==========================================================================
   ABOUT WIDGET
   ========================================================================== */
.mpn-about {
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    border-top: 1px solid #f1f5f9;
    font-family: var(--mpn-font-body);
}

.mpn-about__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-about__content {
    order: 1;
}

.mpn-about__image-wrapper {
    order: 2;
}

.mpn-about__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--mpn-navy);
    margin: 0 0 8px 0;
    font-family: var(--mpn-font-body);
}

.mpn-about__subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #a68023;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body);
}

.mpn-about__description {
    color: #64748b;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body);
}

.mpn-about__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--mpn-navy);
    color: var(--mpn-white);
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body);
}

.mpn-about__btn:hover {
    background-color: var(--mpn-navy-light);
    color: var(--mpn-white);
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

.mpn-about__btn svg {
    color: var(--mpn-white);
    stroke: var(--mpn-white);
}

.mpn-about__image-container {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-about__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
    .mpn-about__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-about__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   LEARN WIDGET
   ========================================================================== */
.mpn-learn {
    padding: 80px 0;
    background-color: var(--mpn-white);
    border-top: 1px solid #f1f5f9;
    font-family: var(--mpn-font-body);
}

.mpn-learn__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-learn__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-learn__content {
    order: 1;
}

.mpn-learn__image-wrapper {
    order: 2;
}

.mpn-learn__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--mpn-navy);
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body);
}

.mpn-learn__description {
    color: #64748b;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body);
}

.mpn-learn__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--mpn-navy);
    color: var(--mpn-white);
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body);
}

.mpn-learn__btn:hover {
    background-color: var(--mpn-navy-light);
    color: var(--mpn-white);
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

.mpn-learn__btn svg {
    color: var(--mpn-white);
    stroke: var(--mpn-white);
}

.mpn-learn__image-container {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-learn__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
    .mpn-learn__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-learn__image-wrapper {
        order: 1;
    }

    .mpn-learn__content {
        order: 2;
    }

    .mpn-learn__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   COMMUNITY WIDGET
   ========================================================================== */
.mpn-community {
    padding: 80px 0;
    background-color: var(--mpn-white);
    border-top: 1px solid #f1f5f9;
    font-family: var(--mpn-font-body);
}

.mpn-community__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-community__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-community__content {
    order: 1;
}

.mpn-community__image-wrapper {
    order: 2;
}

.mpn-community__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--mpn-navy);
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body);
}

.mpn-community__description {
    color: #64748b;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body);
}

.mpn-community__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--mpn-navy);
    color: var(--mpn-white);
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body);
}

.mpn-community__btn:hover {
    background-color: var(--mpn-navy-light);
    color: var(--mpn-white);
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

.mpn-community__btn svg {
    color: var(--mpn-white);
    stroke: var(--mpn-white);
}

.mpn-community__image-container {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-community__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
    .mpn-community__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-community__image-wrapper {
        order: 1;
    }

    .mpn-community__content {
        order: 2;
    }

    .mpn-community__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   RESOURCES WIDGET (React-powered)
   ========================================================================== */
.mpn-resources {
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    border-top: 1px solid #f1f5f9;
    font-family: var(--mpn-font-body);
}

.mpn-resources__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-resources__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-resources__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--mpn-navy);
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body);
}

.mpn-resources__description {
    color: #64748b;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body);
}

.mpn-resources__btn,
.mpn-resources__btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 12px 32px;
    border-radius: 9999px;
    border: none !important;
    font-weight: 700 !important;
    font-size: 14px;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body) !important;
}

.mpn-resources__btn:hover,
.mpn-resources__btn:active {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
    text-decoration: none !important;
}

.mpn-resources__btn svg {
    color: var(--mpn-white) !important;
    stroke: var(--mpn-white) !important;
}

/* Calculator card */
.mpn-resources__calc-col {
    display: flex;
    justify-content: center;
}

.mpn-resources__calc-wrapper {
    position: relative;
    width: 100%;
    max-width: 384px;
}

.mpn-resources__calc-shadow {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background-color: rgba(16, 42, 67, 0.05);
    rotate: -3deg;
    scale: 0.95;
    transition: rotate 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: rotate;
}

.mpn-resources__calc-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--mpn-white);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    rotate: 2deg;
    transition: rotate 0.5s cubic-bezier(0, 0, 0.2, 1);
    will-change: rotate;
}

.mpn-resources__calc-card:hover {
    rotate: 0deg;
}

/* Prevent shadow card from lagging behind on hover */
.mpn-resources__calc-wrapper:hover .mpn-resources__calc-shadow {
    rotate: -6deg;
}

.mpn-resources__calc-header {
    background-color: var(--mpn-navy);
    border-bottom: 1px solid var(--mpn-navy-light);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpn-resources__calc-header-label,
.mpn-resources__calc-card:hover .mpn-resources__calc-header-label {
    color: var(--mpn-white) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mpn-resources__calc-header-label {
    font-size: 12px !important;
}

.mpn-resources__calc-header-label svg {
    color: var(--mpn-white);
    stroke: var(--mpn-white);
}

.mpn-resources__calc-dots {
    display: flex;
    gap: 6px;
}

.mpn-resources__calc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mpn-resources__calc-dot--red {
    background-color: #f87171;
}

.mpn-resources__calc-dot--amber {
    background-color: #fbbf24;
}

.mpn-resources__calc-dot--green {
    background-color: #4ade80;
}

.mpn-resources__calc-body {
    padding: 24px;
}

.mpn-resources__calc-field {
    margin-bottom: 20px;
}

.mpn-resources__calc-label,
.mpn-resources__calc-card:hover .mpn-resources__calc-label {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}

.mpn-resources__calc-label {
    font-size: 10px !important;
}

.mpn-resources__calc-value-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #e2e8f0;
}

.mpn-resources__calc-currency,
.mpn-resources__calc-card:hover .mpn-resources__calc-currency {
    margin-right: 8px;
    color: var(--mpn-slate-lighter) !important;
}

.mpn-resources__calc-currency {
    font-size: 18px !important;
}

.mpn-resources__calc-value,
.mpn-resources__calc-card:hover .mpn-resources__calc-value {
    font-family: monospace !important;
    color: var(--mpn-navy) !important;
}

.mpn-resources__calc-value {
    font-size: 20px !important;
}

.mpn-resources__calc-result {
    padding: 16px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--mpn-grey-lightest);
    border: 1px solid var(--mpn-grey-light);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
}

.mpn-resources__calc-result-label,
.mpn-resources__calc-card:hover .mpn-resources__calc-result-label {
    color: var(--mpn-navy-light) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mpn-resources__calc-result-label {
    font-size: 12px !important;
}

.mpn-resources__calc-result-value,
.mpn-resources__calc-card:hover .mpn-resources__calc-result-value {
    color: #a68023 !important;
    font-weight: 700 !important;
}

.mpn-resources__calc-result-value {
    font-size: 24px !important;
}

.mpn-resources__calc-btn,
.mpn-resources__calc-btn:visited,
.mpn-resources__calc-card:hover .mpn-resources__calc-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    border: none !important;
    font-weight: 700 !important;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
    text-decoration: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-family: var(--mpn-font-body) !important;
}

.mpn-resources__calc-btn {
    font-size: 14px !important;
}

.mpn-resources__calc-btn:hover,
.mpn-resources__calc-btn:active {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
    text-decoration: none !important;
}

/* Small mobile */
@media (max-width: 479px) {
    .mpn-resources {
        padding: 48px 0;
    }

    .mpn-resources__container {
        padding: 0 16px;
    }

    .mpn-resources__grid {
        gap: 32px;
    }

    .mpn-resources__title {
        font-size: 24px;
    }

    .mpn-resources__description {
        font-size: 15px;
    }

    .mpn-resources__calc-wrapper {
        max-width: 100%;
    }

    .mpn-resources__calc-card {
        border-radius: 12px;
    }

    .mpn-resources__calc-body {
        padding: 16px;
    }

    .mpn-resources__calc-result {
        padding: 12px;
    }

    .mpn-resources__calc-result-value {
        font-size: 20px !important;
    }
}

@media (min-width: 1024px) {
    .mpn-resources__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-resources__title {
        font-size: 36px;
    }

    .mpn-resources__calc-col {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   PAGE HEADER WIDGET
   ========================================================================== */
.mpn-page-header {
    padding: 64px 0;
    background-color: rgba(240, 244, 248, 0.5);
    border-bottom: 1px solid #f1f5f9;
    font-family: var(--mpn-font-body);
}

.mpn-page-header__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.mpn-page-header__title {
    font-size: 36px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    line-height: 1.2;
    font-family: var(--mpn-font-body) !important;
}

.mpn-page-header__description {
    font-size: 18px;
    color: #64748b !important;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

@media (min-width: 768px) {
    .mpn-page-header {
        padding: 96px 0;
    }

    .mpn-page-header__title {
        font-size: 48px;
    }
}

/* ==========================================================================
   BEGINNER'S GUIDE WIDGET
   ========================================================================== */
.mpn-beginners-guide {
    padding: 80px 0;
    background-color: var(--mpn-white);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-beginners-guide__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-beginners-guide__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-beginners-guide__image-col {
    order: 2;
}

.mpn-beginners-guide__content {
    order: 1;
}

.mpn-beginners-guide__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-beginners-guide__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

.mpn-beginners-guide__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-beginners-guide__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-beginners-guide__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mpn-beginners-guide__card {
    background-color: #f8fafc;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

.mpn-beginners-guide__card-title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0;
    font-size: 16px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-beginners-guide__card-text {
    color: #64748b !important;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
    font-family: var(--mpn-font-body) !important;
}

@media (min-width: 1024px) {
    .mpn-beginners-guide__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-beginners-guide__image-col {
        order: 1;
    }

    .mpn-beginners-guide__content {
        order: 2;
    }

    .mpn-beginners-guide__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   HOW PROPERTY WORKS WIDGET
   ========================================================================== */
.mpn-how-property {
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-how-property__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-how-property__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-how-property__content {
    order: 1;
}

.mpn-how-property__image-col {
    order: 2;
}

.mpn-how-property__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-how-property__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

.mpn-how-property__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-how-property__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-how-property__steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mpn-how-property__step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.mpn-how-property__step-number {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700 !important;
    font-size: 16px;
    margin-top: 4px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-how-property__step-body {
    flex: 1;
}

.mpn-how-property__step-title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 18px;
    margin: 0 0 4px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-how-property__step-text {
    color: #64748b !important;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
    font-family: var(--mpn-font-body) !important;
}

@media (min-width: 1024px) {
    .mpn-how-property__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-how-property__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   MARKET CYCLES WIDGET
   ========================================================================== */
.mpn-market-cycles {
    position: relative;
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    scroll-margin-top: 80px;
    overflow: hidden;
    font-family: var(--mpn-font-body);
}

.mpn-market-cycles__blob {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(25%);
    width: 600px;
    height: 600px;
    background-color: var(--mpn-grey-lightest);
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.6;
    pointer-events: none;
}

.mpn-market-cycles__container {
    position: relative;
    z-index: 10;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-market-cycles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-market-cycles__image-col {
    order: 2;
}

.mpn-market-cycles__content {
    order: 1;
}

.mpn-market-cycles__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-market-cycles__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

.mpn-market-cycles__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-market-cycles__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

/* Glassmorphism card */
.mpn-market-cycles__card {
    position: relative;
    overflow: hidden;
    background-color: rgba(16, 42, 67, 0.85) !important;
    -webkit-backdrop-filter: blur(48px);
    backdrop-filter: blur(48px);
    color: var(--mpn-white) !important;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mpn-market-cycles__card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

.mpn-market-cycles__card-heading {
    font-size: 20px;
    font-weight: 700 !important;
    background: linear-gradient(to right, #d6b356, #e8d5a3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 24px 0;
    position: relative;
    z-index: 10;
    font-family: var(--mpn-font-body) !important;
}

.mpn-market-cycles__phases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
}

.mpn-market-cycles__phase {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--mpn-slate-lightest) !important;
    font-size: 14px;
    font-weight: 500 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-market-cycles__phase-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--mpn-gold) !important;
    box-shadow: 0 0 8px rgba(197, 157, 50, 0.6);
}

@media (min-width: 1024px) {
    .mpn-market-cycles__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-market-cycles__image-col {
        order: 1;
    }

    .mpn-market-cycles__content {
        order: 2;
    }

    .mpn-market-cycles__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   CURRICULUM CTA WIDGET
   ========================================================================== */
.mpn-curriculum-cta {
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-curriculum-cta__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.mpn-curriculum-cta__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 48px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-curriculum-cta__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.mpn-curriculum-cta__topic {
    padding: 16px;
    background-color: var(--mpn-white) !important;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    font-weight: 500 !important;
    color: var(--mpn-navy) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-curriculum-cta__btn,
.mpn-curriculum-cta__btn:visited {
    display: inline-block;
    background-color: var(--mpn-gold) !important;
    color: var(--mpn-white) !important;
    font-weight: 700 !important;
    padding: 16px 40px;
    border-radius: 9999px;
    border: none !important;
    font-size: 14px;
    text-decoration: none !important;
    box-shadow: 0 10px 15px -3px rgba(197, 157, 50, 0.2);
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body) !important;
}

.mpn-curriculum-cta__btn:hover,
.mpn-curriculum-cta__btn:active {
    background-color: #a68023 !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(197, 157, 50, 0.3);
}

@media (min-width: 768px) {
    .mpn-curriculum-cta__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .mpn-curriculum-cta__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ==========================================================================
   ESSENTIAL GUIDES WIDGET
   ========================================================================== */
.mpn-essential-guides {
    padding: 80px 0;
    background-color: var(--mpn-white);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-essential-guides__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-essential-guides__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-essential-guides__image-col {
    order: 2;
}

.mpn-essential-guides__content {
    order: 1;
}

.mpn-essential-guides__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-essential-guides__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

.mpn-essential-guides__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-essential-guides__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-essential-guides__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mpn-essential-guides__item {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f8fafc !important;
    border-radius: 12px;
    border: 1px solid #f1f5f9 !important;
    transition: border-color 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit !important;
}

.mpn-essential-guides__item:hover {
    border-color: var(--mpn-brand-300, #9fb3c8) !important;
}

a.mpn-essential-guides__item,
a.mpn-essential-guides__item:visited,
a.mpn-essential-guides__item:hover {
    text-decoration: none !important;
    color: inherit !important;
}

.mpn-essential-guides__item-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background-color: var(--mpn-white) !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mpn-slate-dark) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9 !important;
    margin-right: 20px;
    flex-shrink: 0;
}

.mpn-essential-guides__item-icon svg {
    width: 24px;
    height: 24px;
    color: var(--mpn-slate-dark) !important;
    stroke: var(--mpn-slate-dark) !important;
}

.mpn-essential-guides__item-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mpn-essential-guides__item-title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 16px;
    margin-bottom: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-essential-guides__item-desc {
    color: #64748b !important;
    font-size: 14px;
    margin: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Download icon: slide-in on hover ---- */
.mpn-essential-guides__item-download {
    flex-shrink: 0;
    margin-left: 16px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mpn-essential-guides__item:hover .mpn-essential-guides__item-download {
    opacity: 1;
    transform: translateX(0);
}

.mpn-essential-guides__item-download svg {
    width: 20px;
    height: 20px;
    color: var(--mpn-slate-light, #829ab1) !important;
    stroke: var(--mpn-slate-light, #829ab1) !important;
}

@media (min-width: 1024px) {
    .mpn-essential-guides__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-essential-guides__image-col {
        order: 1;
    }

    .mpn-essential-guides__content {
        order: 2;
    }

    .mpn-essential-guides__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   NEWSLETTER WIDGET
   --------------------------------------------------------------------------
   Two-column card: brand panel (left) + Gravity Forms panel (right).
   Gravity Forms overrides are scoped to .mpn-newsletter so they only
   affect the newsletter section and leave all other forms untouched.

   Targets Gravity Form ID 2 with the Orbital theme. Overrides work in
   both the Elementor editor preview and the live frontend.
   ========================================================================== */
.mpn-newsletter {
    padding: 80px 0;
    background-color: var(--mpn-white);
    scroll-margin-top: 80px;
    font-family: var(--mpn-font-body);
}

.mpn-newsletter *,
.mpn-newsletter *::before,
.mpn-newsletter *::after {
    box-sizing: border-box;
}

.mpn-newsletter__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-newsletter__card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    display: grid;
    grid-template-columns: 1fr;
}

/* ---- Brand panel ---- */
.mpn-newsletter__brand {
    padding: 40px;
    background-color: var(--mpn-navy) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mpn-newsletter__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mpn-gold) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    margin-bottom: 24px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-newsletter__eyebrow svg {
    color: var(--mpn-gold) !important;
    stroke: var(--mpn-gold) !important;
    width: 16px;
    height: 16px;
}

.mpn-newsletter__heading {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-white) !important;
    margin: 0 0 24px 0;
    line-height: 1.2;
    padding-bottom: 8px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-newsletter__brand-desc {
    color: var(--mpn-slate-lightest) !important;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Form panel ---- */
.mpn-newsletter__form-panel {
    padding: 40px;
    background-color: var(--mpn-grey-lightest) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mpn-newsletter__form-header {
    margin-bottom: 32px;
}

.mpn-newsletter__form-heading {
    font-size: 24px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-newsletter__form-sub {
    color: #64748b !important;
    font-weight: 300;
    font-size: 14px;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

/* Gravity Forms shortcode wrapper */
.mpn-newsletter__gf-wrap {
    width: 100%;
}

/* ==========================================================================
   Gravity Forms overrides scoped to .mpn-newsletter
   ========================================================================== */

/* ---- GF theme variables (matches reference Orbital theme config) ---- */
.mpn-newsletter .gform_wrapper {
    --gf-color-primary: #102a43;
    --gf-color-primary-rgb: 16, 42, 67;
    --gf-color-primary-contrast: #fff;
    --gf-color-primary-contrast-rgb: 255, 255, 255;
    --gf-color-primary-darker: #061729;
    --gf-color-primary-lighter: #243b53;
    --gf-color-secondary: #fff;
    --gf-color-secondary-rgb: 255, 255, 255;
    --gf-color-secondary-contrast: #112337;
    --gf-color-secondary-contrast-rgb: 17, 35, 55;
    --gf-color-secondary-darker: #F5F5F5;
    --gf-color-secondary-lighter: #FFFFFF;
    --gf-radius: 8px;
    --gf-font-size-secondary: 14px;
    --gf-font-size-tertiary: 13px;
}

/* Strip GF's own wrapper padding and background */
.mpn-newsletter .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---- Fieldset and legend resets ----
   GF wraps Name and Checkbox fields in <fieldset> + <legend>.
   Browsers draw a border around fieldsets by default; the legend
   creates a notch in that border.  We must remove both.           */
.mpn-newsletter .gform_wrapper fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.mpn-newsletter .gform_wrapper fieldset>legend {
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}

/* ---- Field list spacing ---- */
.mpn-newsletter .gform_wrapper .gform_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Override GF theme grid gaps to match our design spacing */
.mpn-newsletter .gform_wrapper.gravity-theme .gform_fields,
.mpn-newsletter .gform_wrapper.gform-theme--framework .gform_fields {
    grid-column-gap: 0 !important;
    grid-row-gap: 24px !important;
}

/* Each field */
.mpn-newsletter .gform_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Labels ---- */
.mpn-newsletter .gform_wrapper .gfield_label,
.mpn-newsletter .gform_wrapper .gfield .gfield_label,
.mpn-newsletter .gform_wrapper legend.gfield_label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    font-family: var(--mpn-font-body) !important;
    display: block !important;
    border: none !important;
}

/* ---- Required indicator: show only "*" ----
   GF can render "(Required)" as .gfield_required_text. We hide that
   text and show a clean red asterisk via the parent .gfield_required. */
.mpn-newsletter .gform_wrapper .gfield_required {
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
}

.mpn-newsletter .gform_wrapper .gfield_required .gfield_required_text {
    font-size: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    display: inline !important;
}

.mpn-newsletter .gform_wrapper .gfield_required .gfield_required_text::after {
    content: '*' !important;
    font-size: 12px !important;
    visibility: visible !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
}

/* ---- Sub-labels (First Name / Last Name beneath the Name field inputs) ---- */
.mpn-newsletter .gform_wrapper .ginput_complex label,
.mpn-newsletter .gform_wrapper .ginput_complex .gform-field-label {
    font-size: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* ---- Name field: two columns for First / Last ---- */
.mpn-newsletter .gform_wrapper .ginput_complex.ginput_container_name,
.mpn-newsletter .gform_wrapper .ginput_container.ginput_container_name {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.mpn-newsletter .gform_wrapper .ginput_complex.ginput_container_name>span,
.mpn-newsletter .gform_wrapper .ginput_container.ginput_container_name>span {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- All text, email, tel, and select inputs ---- */
.mpn-newsletter .gform_wrapper input[type="text"],
.mpn-newsletter .gform_wrapper input[type="email"],
.mpn-newsletter .gform_wrapper input[type="tel"],
.mpn-newsletter .gform_wrapper input[type="url"],
.mpn-newsletter .gform_wrapper select,
.mpn-newsletter .gform_wrapper textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: var(--mpn-white) !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    font-family: var(--mpn-font-body) !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mpn-newsletter .gform_wrapper input[type="text"]:focus,
.mpn-newsletter .gform_wrapper input[type="email"]:focus,
.mpn-newsletter .gform_wrapper input[type="tel"]:focus,
.mpn-newsletter .gform_wrapper input[type="url"]:focus,
.mpn-newsletter .gform_wrapper select:focus,
.mpn-newsletter .gform_wrapper textarea:focus {
    border-color: var(--mpn-slate) !important;
    box-shadow: 0 0 0 3px rgba(98, 125, 152, 0.15) !important;
}

.mpn-newsletter .gform_wrapper input::placeholder,
.mpn-newsletter .gform_wrapper textarea::placeholder {
    color: #cbd5e1 !important;
}

/* ====================================================================
   Consent / Privacy checkbox field
   --------------------------------------------------------------------
   GF renders this as:
     <fieldset class="gfield gfield--type-consent">
       <legend class="gfield_label">Privacy *</legend>
       <div class="ginput_container_consent">
         <input type="checkbox" />
         <label>I agree to the privacy policy. *</label>
       </div>
     </fieldset>

   Reference hides the <legend> entirely (sr-only) and displays only
   the inline checkbox + label row.
   ==================================================================== */

/* Hide the "PRIVACY" legend label above the checkbox */
.mpn-newsletter .gform_wrapper .gfield--type-consent>legend,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox>legend,
.mpn-newsletter .gform_wrapper .gfield--type-consent>.gfield_label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Consent container: flex row */
.mpn-newsletter .gform_wrapper .ginput_container_consent,
.mpn-newsletter .gform_wrapper .ginput_container_checkbox .gchoice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Custom checkbox styling (appearance-none with CSS-only checked state)
   Matches the reference: 20px square, 4px radius, navy fill + white
   tick mark when checked. Removes native browser and GF Orbital
   theme checkbox overlays entirely.                                   */
.mpn-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"],
.mpn-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.mpn-newsletter .gform_wrapper .ginput_container_consent input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: var(--mpn-white) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Checked state: navy fill */
.mpn-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked,
.mpn-newsletter .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked {
    background-color: var(--mpn-navy) !important;
    border-color: var(--mpn-navy) !important;
}

/* White tick mark via ::after pseudo-element */
.mpn-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked::after,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked::after,
.mpn-newsletter .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* Hover state */
.mpn-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"]:hover,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"]:hover,
.mpn-newsletter .gform_wrapper .ginput_container_consent input[type="checkbox"]:hover {
    border-color: #94a3b8 !important;
}

/* Strip any GF Orbital theme pseudo-element overlays on the checkbox */
.mpn-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"]::before,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-newsletter .gform_wrapper .ginput_container_consent input[type="checkbox"]::before {
    display: none !important;
    content: none !important;
}

/* Inline consent label */
.mpn-newsletter .gform_wrapper .gfield--type-consent .gfield_consent_label,
.mpn-newsletter .gform_wrapper .ginput_container_consent label,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox .gchoice label {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    user-select: none !important;
    /* Ensure these are NOT hidden by the sub-label rule */
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    clip: auto !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Privacy policy link */
.mpn-newsletter .gform_wrapper .gfield--type-consent .gfield_consent_label a,
.mpn-newsletter .gform_wrapper .ginput_container_consent label a,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox .gchoice label a {
    color: var(--mpn-navy) !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.mpn-newsletter .gform_wrapper .gfield--type-consent .gfield_consent_label a:hover,
.mpn-newsletter .gform_wrapper .ginput_container_consent label a:hover,
.mpn-newsletter .gform_wrapper .gfield--type-checkbox .gchoice label a:hover {
    color: var(--mpn-gold) !important;
}

/* Hide the consent field description (rendered separately by GF) */
.mpn-newsletter .gform_wrapper .gfield--type-consent .gfield_description {
    display: none !important;
}

/* ---- Submit button ---- */
.mpn-newsletter .gform_wrapper .gform_footer,
.mpn-newsletter .gform_wrapper .gform_page_footer {
    margin: 24px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
}

.mpn-newsletter .gform_wrapper .gform_footer input[type="submit"],
.mpn-newsletter .gform_wrapper .gform_footer button[type="submit"],
.mpn-newsletter .gform_wrapper .gform_button,
.mpn-newsletter .gform_wrapper .gform-button {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: none !important;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
    text-align: center !important;
    display: block !important;
    line-height: 1.5 !important;
}

.mpn-newsletter .gform_wrapper .gform_footer input[type="submit"]:hover,
.mpn-newsletter .gform_wrapper .gform_footer button[type="submit"]:hover,
.mpn-newsletter .gform_wrapper .gform_button:hover,
.mpn-newsletter .gform_wrapper .gform-button:hover {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3) !important;
}

.mpn-newsletter .gform_wrapper .gform_footer input[type="submit"]:active,
.mpn-newsletter .gform_wrapper .gform_footer button[type="submit"]:active,
.mpn-newsletter .gform_wrapper .gform_button:active,
.mpn-newsletter .gform_wrapper .gform-button:active {
    transform: scale(0.99) !important;
}

/* ---- Validation messages ---- */
.mpn-newsletter .gform_wrapper .gfield_error .gfield_label {
    color: #dc2626 !important;
}

.mpn-newsletter .gform_wrapper .gfield_error input,
.mpn-newsletter .gform_wrapper .gfield_error textarea,
.mpn-newsletter .gform_wrapper .gfield_error select {
    border-color: #fca5a5 !important;
}

.mpn-newsletter .gform_wrapper .validation_message,
.mpn-newsletter .gform_wrapper .gfield_description.validation_message {
    color: #dc2626 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-newsletter .gform_wrapper .gform_validation_errors,
.mpn-newsletter .gform_wrapper .validation_error {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 24px !important;
    color: #991b1b !important;
    font-size: 13px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-newsletter .gform_wrapper .gform_validation_errors h2,
.mpn-newsletter .gform_wrapper .validation_error h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #991b1b !important;
    margin: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Confirmation message ---- */
.mpn-newsletter .gform_confirmation_message {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    color: #166534 !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.5 !important;
}

/* ---- Spinner / loading ---- */
.mpn-newsletter .gform_wrapper .gform_ajax_spinner {
    margin-left: 8px !important;
}

/* ---- Responsive ---- */

/* Small mobile: tighter padding, smaller type */
@media (max-width: 479px) {
    .mpn-newsletter {
        padding: 48px 0;
    }

    .mpn-newsletter__container {
        padding: 0 16px;
    }

    .mpn-newsletter__card {
        border-radius: 12px;
    }

    .mpn-newsletter__brand {
        padding: 32px 24px;
    }

    .mpn-newsletter__form-panel {
        padding: 32px 24px;
    }

    .mpn-newsletter__heading {
        font-size: 24px;
    }

    .mpn-newsletter__brand-desc {
        font-size: 15px;
    }

    .mpn-newsletter__form-header {
        margin-bottom: 24px;
    }

    .mpn-newsletter__form-heading {
        font-size: 20px;
    }
}

/* Tablet: moderate padding */
@media (min-width: 480px) and (max-width: 1023px) {
    .mpn-newsletter__brand {
        padding: 40px;
    }

    .mpn-newsletter__form-panel {
        padding: 40px;
    }

    .mpn-newsletter__heading {
        font-size: 30px;
    }
}

/* Desktop: side-by-side layout */
@media (min-width: 1024px) {
    .mpn-newsletter__card {
        grid-template-columns: 1fr 1fr;
    }

    .mpn-newsletter__brand {
        padding: 64px;
    }

    .mpn-newsletter__form-panel {
        padding: 64px;
    }

    .mpn-newsletter__heading {
        font-size: 36px;
    }
}

/* ==========================================================================
   COMMUNITY OVERVIEW WIDGET
   ========================================================================== */
.mpn-comm-overview {
    padding: 80px 0;
    background-color: var(--mpn-white);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-comm-overview__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-comm-overview__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-comm-overview__image-col {
    order: 2;
}

.mpn-comm-overview__content {
    order: 1;
}

.mpn-comm-overview__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--mpn-grey-lightest) !important;
    border-radius: 8px;
    color: var(--mpn-navy) !important;
    margin-bottom: 24px;
}

.mpn-comm-overview__icon-badge svg {
    color: var(--mpn-navy) !important;
    stroke: var(--mpn-navy) !important;
}

.mpn-comm-overview__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-comm-overview__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-comm-overview__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-comm-overview__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
    .mpn-comm-overview__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-comm-overview__image-col {
        order: 1;
    }

    .mpn-comm-overview__content {
        order: 2;
    }

    .mpn-comm-overview__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   LIVE MASTERMINDS WIDGET
   ========================================================================== */
.mpn-masterminds {
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-masterminds__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-masterminds__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-masterminds__content {
    order: 1;
}

.mpn-masterminds__image-col {
    order: 2;
}

.mpn-masterminds__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--mpn-grey-lightest) !important;
    border-radius: 8px;
    color: var(--mpn-navy) !important;
    margin-bottom: 24px;
}

.mpn-masterminds__icon-badge svg {
    color: var(--mpn-navy) !important;
    stroke: var(--mpn-navy) !important;
}

.mpn-masterminds__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-masterminds__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-masterminds__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-masterminds__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

/* Schedule card */
.mpn-masterminds__card {
    position: relative;
    overflow: hidden;
    background-color: var(--mpn-white) !important;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mpn-masterminds__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(16, 42, 67, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.mpn-masterminds__card-badge {
    display: inline-block;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 6px 16px;
    border-radius: 9999px;
    font-weight: 700 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    font-family: var(--mpn-font-body) !important;
}

.mpn-masterminds__card-inner--blurred {
    opacity: 0.5;
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}

.mpn-masterminds__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.mpn-masterminds__card-label {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 14px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-masterminds__card-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 700 !important;
    background-color: #dcfce7 !important;
    color: #15803d !important;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-family: var(--mpn-font-body) !important;
}

.mpn-masterminds__card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    color: var(--mpn-slate-dark) !important;
    font-weight: 500 !important;
    font-size: 14px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-masterminds__card-row:last-child {
    margin-bottom: 0;
}

.mpn-masterminds__card-row svg {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
    flex-shrink: 0;
}

.mpn-masterminds__card-dot-wrap {
    width: 20px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.mpn-masterminds__card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #94a3b8 !important;
}

@media (min-width: 1024px) {
    .mpn-masterminds__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-masterminds__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   IN-PERSON EVENTS WIDGET
   ========================================================================== */
.mpn-events {
    padding: 80px 0;
    background-color: var(--mpn-white);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-events__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-events__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-events__image-col {
    order: 2;
}

.mpn-events__content {
    order: 1;
}

.mpn-events__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--mpn-grey-lightest) !important;
    border-radius: 8px;
    color: var(--mpn-navy) !important;
    margin-bottom: 24px;
}

.mpn-events__icon-badge svg {
    color: var(--mpn-navy) !important;
    stroke: var(--mpn-navy) !important;
}

.mpn-events__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-events__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-events__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-events__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

/* Event card */
.mpn-events__card {
    position: relative;
    overflow: hidden;
    background-color: #f8fafc !important;
    border-radius: 12px;
    border: 1px solid #f1f5f9 !important;
    padding: 16px;
}

.mpn-events__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(16, 42, 67, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.mpn-events__card-badge {
    display: inline-block;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 6px 16px;
    border-radius: 9999px;
    font-weight: 700 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    font-family: var(--mpn-font-body) !important;
}

.mpn-events__card-inner {
    display: flex;
    gap: 16px;
    width: 100%;
}

.mpn-events__card-inner--blurred {
    opacity: 0.5;
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}

.mpn-events__card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 12px;
    background-color: var(--mpn-white) !important;
    border-radius: 8px;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mpn-events__card-month {
    display: block;
    font-size: 12px;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase;
    font-family: var(--mpn-font-body) !important;
}

.mpn-events__card-day {
    display: block;
    font-size: 24px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    line-height: 1.2;
    font-family: var(--mpn-font-body) !important;
}

.mpn-events__card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mpn-events__card-title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 16px;
    margin: 0 0 4px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-events__card-details {
    font-size: 14px;
    color: #64748b !important;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-events__card-access {
    display: inline-block;
    font-size: 12px;
    font-weight: 700 !important;
    color: #a68023 !important;
    margin-top: 4px;
    font-family: var(--mpn-font-body) !important;
}

@media (min-width: 1024px) {
    .mpn-events__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-events__image-col {
        order: 1;
    }

    .mpn-events__content {
        order: 2;
    }

    .mpn-events__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   FACEBOOK GROUP WIDGET
   ========================================================================== */
.mpn-fb-group {
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    font-family: var(--mpn-font-body);
    scroll-margin-top: 80px;
}

.mpn-fb-group__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-fb-group__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-fb-group__content {
    order: 1;
}

.mpn-fb-group__mockup-col {
    order: 2;
}

.mpn-fb-group__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--mpn-grey-lightest) !important;
    border-radius: 8px;
    color: var(--mpn-navy) !important;
    margin-bottom: 24px;
}

.mpn-fb-group__icon-badge svg {
    color: var(--mpn-navy) !important;
    stroke: var(--mpn-navy) !important;
}

.mpn-fb-group__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__description {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

/* Tags */
.mpn-fb-group__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.mpn-fb-group__tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--mpn-white) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px;
    color: #64748b !important;
    font-size: 14px;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-family: var(--mpn-font-body) !important;
}

/* CTA button */
.mpn-fb-group__btn,
.mpn-fb-group__btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 14px 32px;
    border-radius: 9999px;
    font-weight: 700 !important;
    font-size: 14px;
    text-decoration: none !important;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__btn:hover,
.mpn-fb-group__btn:active {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

.mpn-fb-group__btn svg {
    color: var(--mpn-white) !important;
    stroke: var(--mpn-white) !important;
    transition: transform 0.2s ease;
}

.mpn-fb-group__btn:hover svg {
    transform: translateX(4px);
}

/* ---- Facebook Group Mockup ---- */
.mpn-fb-group__mockup {
    max-width: 448px;
    margin: 0 auto;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    rotate: 1deg;
    transition: rotate 500ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: rotate;
}

.mpn-fb-group__mockup:hover {
    rotate: 0deg;
}

/* Cover image */
.mpn-fb-group__mockup-cover {
    position: relative;
    height: 112px !important;
    min-height: 112px;
    background-color: var(--mpn-navy) !important;
    overflow: hidden;
}

.mpn-fb-group__mockup-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.5;
    display: block !important;
}

.mpn-fb-group__mockup-cover-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
}

/* Group info */
.mpn-fb-group__mockup-info {
    padding: 0 16px 16px;
    background-color: var(--mpn-white) !important;
    border-bottom: 1px solid #e2e8f0;
}

.mpn-fb-group__mockup-info-row {
    display: flex;
    align-items: flex-end;
    margin-top: -32px;
    margin-bottom: 12px;
}

.mpn-fb-group__mockup-avatar {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px;
    min-height: 80px;
    background-color: var(--mpn-white) !important;
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    overflow: hidden;
}

.mpn-fb-group__mockup-avatar-inner {
    width: 100%;
    height: 100%;
    background-color: var(--mpn-grey-lightest) !important;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mpn-navy) !important;
    font-family: var(--mpn-font-serif) !important;
    font-weight: 700 !important;
    font-size: 10px;
    text-align: center;
    padding: 4px;
    line-height: 1.2;
    border: 1px solid var(--mpn-grey-light);
}

.mpn-fb-group__mockup-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
    display: block !important;
}

.mpn-fb-group__mockup-meta {
    margin-left: 12px;
    margin-bottom: 4px;
}

.mpn-fb-group__mockup-name {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 18px;
    margin: 0;
    line-height: 1.2;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-members {
    font-size: 12px;
    color: #64748b !important;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

/* Tabs */
.mpn-fb-group__mockup-tabs {
    display: flex;
    gap: 8px;
    font-size: 14px;
    font-weight: 500 !important;
    color: #64748b !important;
    border-top: 1px solid #f1f5f9;
    padding-top: 8px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-tab {
    padding: 0 8px;
}

.mpn-fb-group__mockup-tab--active {
    color: #1877F2 !important;
    border-bottom: 2px solid #1877F2;
    padding-bottom: 8px;
    margin-bottom: -10px;
}

/* Feed */
.mpn-fb-group__mockup-feed {
    padding: 16px;
    background-color: #f1f5f9 !important;
}

.mpn-fb-group__mockup-post {
    background-color: var(--mpn-white) !important;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0 !important;
    padding: 16px;
}

.mpn-fb-group__mockup-post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.mpn-fb-group__mockup-post-author {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mpn-fb-group__mockup-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--mpn-gold) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mpn-white) !important;
    font-weight: 700 !important;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-post-name {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 14px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-post-time {
    font-size: 10px;
    color: #94a3b8 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-post-more {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
    flex-shrink: 0;
}

.mpn-fb-group__mockup-post-body {
    font-size: 14px;
    color: #334155 !important;
    line-height: 1.6;
    margin: 0 0 12px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-post-image {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    margin-bottom: 12px;
    height: 192px !important;
    min-height: 192px;
}

.mpn-fb-group__mockup-post-image img {
    width: 100% !important;
    height: 192px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Reactions */
.mpn-fb-group__mockup-post-reactions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 12px;
    color: #64748b !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-post-likes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mpn-fb-group__mockup-post-like-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #1877F2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mpn-white) !important;
    flex-shrink: 0;
}

.mpn-fb-group__mockup-post-like-icon svg {
    color: var(--mpn-white) !important;
    fill: var(--mpn-white) !important;
}

/* Action buttons */
.mpn-fb-group__mockup-post-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.mpn-fb-group__mockup-post-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #64748b !important;
    font-size: 12px;
    font-weight: 500 !important;
    padding: 6px 0;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    cursor: default;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fb-group__mockup-post-action svg {
    color: #64748b !important;
    stroke: #64748b !important;
}

@media (min-width: 1024px) {
    .mpn-fb-group__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-fb-group__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   INTERACTIVE TOOLS WIDGET
   ========================================================================== */
.mpn-tools {
    padding: 80px 0;
    background-color: rgba(240, 244, 248, 0.5);
    scroll-margin-top: 80px;
    font-family: var(--mpn-font-body);
}

.mpn-tools__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Section header ---- */
.mpn-tools__header {
    text-align: center;
    margin-bottom: 48px;
}

.mpn-tools__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-tools__description {
    color: #64748b !important;
    font-size: 16px;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Two-column grid ---- */
.mpn-tools__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

/* ---- Shared column styles ---- */
.mpn-tools__column {
    display: flex;
    flex-direction: column;
}

.mpn-tools__col-heading {
    font-size: 20px;
    font-weight: 700 !important;
    color: var(--mpn-navy-light) !important;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-tools__dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--mpn-gold) !important;
}

.mpn-tools__col-desc {
    color: #475569 !important;
    font-size: 14px;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-tools__badge {
    font-style: italic;
    color: #94a3b8 !important;
    margin-left: 4px;
}

.mpn-tools__col-body {
    flex-grow: 1;
}

/* ---- Calculator mount point ---- */
.mpn-tools__calc-mount {
    height: 100%;
}

/* ==================================================
   AI Analyst Preview Card
   ================================================== */
.mpn-tools-ai {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--mpn-white) !important;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 10px 15px -3px rgba(226, 232, 240, 0.5);
}

/* Card header */
.mpn-tools-ai__header {
    background-color: var(--mpn-navy) !important;
    padding: 24px;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}

.mpn-tools-ai__header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mpn-tools-ai__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background-color: var(--mpn-navy-light) !important;
    border: 1px solid #334e68 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpn-tools-ai__icon svg {
    color: var(--mpn-gold-light) !important;
    stroke: var(--mpn-gold-light) !important;
}

.mpn-tools-ai__card-title {
    font-size: 14px;
    font-weight: 700 !important;
    color: var(--mpn-white) !important;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-tools-ai__card-subtitle {
    font-size: 10px;
    color: var(--mpn-slate-lighter) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

/* Body wrapper (relative container for content + overlay) */
.mpn-tools-ai__body-wrap {
    position: relative;
    flex-grow: 1;
    background-color: #f8fafc !important;
}

/* Scrollable / blurrable content */
.mpn-tools-ai__body {
    padding: 24px;
    transition: filter 0.5s ease-out;
}

.mpn-tools-ai:hover .mpn-tools-ai__body {
    filter: blur(4px);
}

/* Fake input bar */
.mpn-tools-ai__input-row {
    margin-bottom: 24px;
}

.mpn-tools-ai__input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--mpn-white) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.mpn-tools-ai__input-text {
    font-size: 14px;
    color: #334155 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-tools-ai__input-btn {
    background-color: rgba(16, 42, 67, 0.1) !important;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-family: var(--mpn-font-body) !important;
}

/* Fake response bubble */
.mpn-tools-ai__response {
    padding: 16px;
    background-color: var(--mpn-white) !important;
    border-radius: 8px;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mpn-tools-ai__response p {
    color: #334155 !important;
    line-height: 1.625;
    font-size: 14px;
    margin: 0 0 16px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-tools-ai__response p:last-child {
    margin-bottom: 0;
}

.mpn-tools-ai__disclaimer {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-style: italic;
    margin-bottom: 0 !important;
}

/* Unlock overlay */
.mpn-tools-ai__overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mpn-tools-ai:hover .mpn-tools-ai__overlay {
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* CTA button */
.mpn-tools-ai__cta,
.mpn-tools-ai__cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 14px 32px;
    border-radius: 9999px;
    font-weight: 700 !important;
    font-size: 14px;
    text-decoration: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: all 0.3s ease;
    font-family: var(--mpn-font-body) !important;
}

.mpn-tools-ai__cta svg {
    color: var(--mpn-white) !important;
    stroke: var(--mpn-white) !important;
    width: 16px;
    height: 16px;
}

.mpn-tools-ai:hover .mpn-tools-ai__cta {
    transform: scale(1);
}

.mpn-tools-ai__cta:hover,
.mpn-tools-ai__cta:active {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
}

/* ---- Responsive ---- */

/* Small mobile */
@media (max-width: 479px) {
    .mpn-tools {
        padding: 48px 0;
    }

    .mpn-tools__container {
        padding: 0 16px;
    }

    .mpn-tools__header {
        margin-bottom: 32px;
    }

    .mpn-tools__title {
        font-size: 24px;
    }

    .mpn-tools__description {
        font-size: 14px;
    }

    .mpn-tools__grid {
        gap: 40px;
    }

    .mpn-tools__col-heading {
        font-size: 18px;
    }

    .mpn-tools__col-desc {
        font-size: 13px;
    }

    /* AI card */
    .mpn-tools-ai__header {
        padding: 16px;
    }

    .mpn-tools-ai__body {
        padding: 16px;
    }

    .mpn-tools-ai__input {
        padding: 10px 12px;
    }

    .mpn-tools-ai__input-text {
        font-size: 13px;
    }

    .mpn-tools-ai__response p {
        font-size: 13px;
    }

    .mpn-tools-ai__cta {
        padding: 12px 24px;
        font-size: 13px;
    }

    /* Yield calculator: stack 2-col grids on small mobile.
       Uses !important to beat the inline React styles. */
    .mpn-tools__calc-mount div[style*="grid-template-columns"],
    .mpn-tools__calc-mount div[style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 1024px) {
    .mpn-tools__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mpn-tools__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   ABOUT HERO WIDGET
   ========================================================================== */
.mpn-about-hero {
    position: relative;
    padding: 64px 0;
    background-color: var(--mpn-navy);
    color: var(--mpn-white);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--mpn-font-body);
}

.mpn-about-hero__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, var(--mpn-navy-light), var(--mpn-navy), #0a1929);
    opacity: 0.6;
    pointer-events: none;
}

.mpn-about-hero__glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 500px;
    background-color: rgba(16, 42, 67, 0.3);
    filter: blur(120px);
    border-radius: 50%;
    pointer-events: none;
}

.mpn-about-hero__shafts {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
}

.mpn-about-hero__shaft {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--mpn-white), transparent);
    transform: skewX(-12deg);
}

.mpn-about-hero__shaft--left {
    left: 40%;
}

.mpn-about-hero__shaft--right {
    right: 40%;
}

.mpn-about-hero__container {
    position: relative;
    z-index: 10;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.mpn-about-hero__title {
    font-size: 36px;
    font-weight: 700 !important;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
    color: var(--mpn-white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-hero__description {
    font-size: 18px;
    color: var(--mpn-slate-lightest) !important;
    font-weight: 300;
    max-width: 768px;
    margin: 0 auto;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--mpn-font-body) !important;
}

/* Small mobile */
@media (max-width: 479px) {
    .mpn-about-hero {
        padding: 48px 0;
    }

    .mpn-about-hero__container {
        padding: 0 16px;
    }

    .mpn-about-hero__title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .mpn-about-hero__description {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    .mpn-about-hero {
        padding: 96px 0;
    }

    .mpn-about-hero__title {
        font-size: 48px;
    }
}

/* ==========================================================================
   ABOUT BIO WIDGET
   ========================================================================== */
.mpn-about-bio {
    padding: 80px 0;
    background-color: var(--mpn-white);
    scroll-margin-top: 80px;
    font-family: var(--mpn-font-body);
}

.mpn-about-bio__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-about-bio__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-about-bio__image-col {
    order: 2;
}

.mpn-about-bio__content {
    order: 1;
}

.mpn-about-bio__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-about-bio__image {
    width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: cover;
    display: block;
    aspect-ratio: 3 / 4;
}

.mpn-about-bio__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-bio__text {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 24px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-bio__text:last-child {
    margin-bottom: 0;
}

/* Small mobile */
@media (max-width: 479px) {
    .mpn-about-bio {
        padding: 48px 0;
    }

    .mpn-about-bio__container {
        padding: 0 16px;
    }

    .mpn-about-bio__grid {
        gap: 32px;
    }

    .mpn-about-bio__title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .mpn-about-bio__text {
        font-size: 16px;
    }

    .mpn-about-bio__image-wrapper {
        border-radius: 12px;
    }
}

@media (min-width: 1024px) {
    .mpn-about-bio__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-about-bio__image-col {
        order: 1;
    }

    .mpn-about-bio__content {
        order: 2;
    }

    .mpn-about-bio__title {
        font-size: 30px;
    }

    .mpn-about-bio__image {
        aspect-ratio: 4 / 3;
    }
}

/* ==========================================================================
   ABOUT STATS WIDGET
   ========================================================================== */
.mpn-about-stats {
    padding: 96px 0;
    background-color: var(--mpn-grey-lightest);
    scroll-margin-top: 80px;
    font-family: var(--mpn-font-body);
}

.mpn-about-stats__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section heading */
.mpn-about-stats__header {
    text-align: center;
    margin-bottom: 64px;
}

.mpn-about-stats__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-stats__rule {
    width: 96px;
    height: 4px;
    background-color: var(--mpn-gold) !important;
    margin: 0 auto;
    border-radius: 9999px;
}

/* Two-column narrative */
.mpn-about-stats__narrative {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 64px;
}

.mpn-about-stats__narrative-col--centred {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mpn-about-stats__text {
    color: #475569 !important;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 300;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-stats__text:last-child {
    margin-bottom: 0;
}

.mpn-about-stats__text--drop-cap::first-letter {
    font-size: 3.2em;
    font-weight: 700;
    color: var(--mpn-navy) !important;
    float: left;
    margin-right: 12px;
    margin-top: -4px;
    line-height: 1;
}

/* Blockquote */
.mpn-about-stats__quote {
    padding: 24px;
    background-color: var(--mpn-white) !important;
    border-radius: 12px;
    border-left: 4px solid var(--mpn-gold) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-style: italic;
    color: #64748b !important;
    font-size: 16px;
    line-height: 1.6;
    margin: 24px 0 0 0;
    font-family: var(--mpn-font-body) !important;
}

/* Stats card */
.mpn-about-stats__card {
    background-color: var(--mpn-white) !important;
    border-radius: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9 !important;
    padding: 48px;
}

.mpn-about-stats__stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
}

.mpn-about-stats__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.mpn-about-stats__stat+.mpn-about-stats__stat {
    border-top: 1px solid #f1f5f9;
    padding-top: 48px;
}

.mpn-about-stats__stat-value {
    font-size: 48px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin-bottom: 16px;
    line-height: 1;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-stats__stat-label {
    font-size: 12px;
    font-weight: 700 !important;
    color: #a68023 !important;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-family: var(--mpn-font-body) !important;
}

/* Small mobile */
@media (max-width: 479px) {
    .mpn-about-stats {
        padding: 48px 0;
    }

    .mpn-about-stats__container {
        padding: 0 16px;
    }

    .mpn-about-stats__header {
        margin-bottom: 40px;
    }

    .mpn-about-stats__title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .mpn-about-stats__narrative {
        gap: 32px;
        margin-bottom: 40px;
    }

    .mpn-about-stats__text {
        font-size: 16px;
    }

    .mpn-about-stats__text--drop-cap::first-letter {
        font-size: 2.8em;
    }

    .mpn-about-stats__quote {
        font-size: 14px;
        padding: 20px;
    }

    .mpn-about-stats__card {
        border-radius: 16px;
        padding: 32px 24px;
    }

    .mpn-about-stats__stats-grid {
        gap: 32px;
    }

    .mpn-about-stats__stat {
        padding: 0 8px;
    }

    .mpn-about-stats__stat+.mpn-about-stats__stat {
        padding-top: 32px;
    }

    .mpn-about-stats__stat-value {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .mpn-about-stats__stat-label {
        font-size: 11px;
        letter-spacing: 0.2em;
    }
}

@media (min-width: 768px) {
    .mpn-about-stats__narrative {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }

    .mpn-about-stats__stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .mpn-about-stats__stat+.mpn-about-stats__stat {
        border-top: none;
        border-left: 1px solid #f1f5f9;
        padding-top: 0;
    }

    .mpn-about-stats__stat-value {
        font-size: 56px;
    }
}

@media (min-width: 1024px) {
    .mpn-about-stats__title {
        font-size: 36px;
    }

    .mpn-about-stats__card {
        padding: 64px;
    }

    .mpn-about-stats__stat-value {
        font-size: 64px;
    }
}

/* ==========================================================================
   ABOUT PHILOSOPHY WIDGET
   ========================================================================== */
.mpn-about-philosophy {
    padding: 80px 0;
    background-color: var(--mpn-white);
    scroll-margin-top: 80px;
    font-family: var(--mpn-font-body);
}

.mpn-about-philosophy__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-about-philosophy__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mpn-about-philosophy__content {
    order: 1;
}

.mpn-about-philosophy__image-col {
    order: 2;
}

.mpn-about-philosophy__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 32px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-philosophy__text {
    color: #64748b !important;
    font-size: 18px;
    margin: 0 0 24px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-philosophy__text--lead {
    font-size: 20px;
    color: #475569 !important;
}

.mpn-about-philosophy__text:last-child {
    margin-bottom: 0;
}

.mpn-about-philosophy__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5);
}

.mpn-about-philosophy__image {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
    .mpn-about-philosophy__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .mpn-about-philosophy__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   ABOUT CONTACT WIDGET
   --------------------------------------------------------------------------
   Split card: brand info panel (left 5/12) + Gravity Forms (right 7/12).
   Maps to src/components/about/ContactSection.tsx.
   GF overrides are injected as inline <style> from the widget PHP;
   this section handles the card layout, info panel, and decorative elements.
   ========================================================================== */
.mpn-about-contact {
    padding: 80px 0;
    background-color: var(--mpn-grey-lightest);
    scroll-margin-top: 80px;
    font-family: var(--mpn-font-body);
}

.mpn-about-contact *,
.mpn-about-contact *::before,
.mpn-about-contact *::after {
    box-sizing: border-box;
}

.mpn-about-contact__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-about-contact__card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
}

/* ---- Left info panel ---- */
.mpn-about-contact__info {
    padding: 40px;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}

/* Decorative blurs */
.mpn-about-contact__blur {
    position: absolute;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}

.mpn-about-contact__blur--top {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background-color: rgba(197, 157, 50, 0.1);
}

.mpn-about-contact__blur--bottom {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    background-color: rgba(98, 125, 152, 0.1);
}

.mpn-about-contact__info-inner {
    position: relative;
    z-index: 1;
}

.mpn-about-contact__title {
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--mpn-white) !important;
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    padding-bottom: 8px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-contact__description {
    color: var(--mpn-slate-lightest) !important;
    font-size: 18px;
    margin: 0 0 48px 0;
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Contact links ---- */
.mpn-about-contact__links {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mpn-about-contact__link-row,
.mpn-about-contact__link-row:visited {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none !important;
    color: var(--mpn-white) !important;
}

.mpn-about-contact__link-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background-color: var(--mpn-navy-light) !important;
    border: 1px solid #334e68 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(7, 15, 24, 0.2);
}

.mpn-about-contact__link-row:hover .mpn-about-contact__link-icon {
    border-color: rgba(197, 157, 50, 0.5) !important;
    background-color: rgba(36, 59, 83, 0.8) !important;
}

.mpn-about-contact__link-icon svg {
    color: var(--mpn-slate-lightest) !important;
    stroke: var(--mpn-slate-lightest) !important;
    transition: color 0.2s ease, stroke 0.2s ease;
}

.mpn-about-contact__link-row:hover .mpn-about-contact__link-icon svg {
    color: var(--mpn-gold-light) !important;
    stroke: var(--mpn-gold-light) !important;
}

.mpn-about-contact__link-text {
    display: flex;
    flex-direction: column;
}

.mpn-about-contact__link-label {
    font-size: 10px;
    font-weight: 700 !important;
    color: var(--mpn-slate) !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
    transition: color 0.2s ease;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-contact__link-row:hover .mpn-about-contact__link-label {
    color: var(--mpn-slate-lightest) !important;
}

.mpn-about-contact__link-value {
    font-size: 16px;
    font-weight: 500 !important;
    color: var(--mpn-white) !important;
    transition: color 0.2s ease;
    font-family: var(--mpn-font-body) !important;
}

.mpn-about-contact__link-row:hover .mpn-about-contact__link-value {
    color: var(--mpn-gold-light) !important;
}

/* ---- Right form panel ---- */
.mpn-about-contact__form-panel {
    padding: 40px;
    background-color: var(--mpn-white) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Gravity Forms shortcode wrapper */
.mpn-about-contact__gf-wrap {
    width: 100%;
}

/* ---- Responsive ---- */

/* Small mobile: tighter padding, smaller type */
@media (max-width: 479px) {
    .mpn-about-contact {
        padding: 48px 0;
    }

    .mpn-about-contact__container {
        padding: 0 16px;
    }

    .mpn-about-contact__card {
        border-radius: 16px;
    }

    .mpn-about-contact__info {
        padding: 32px 24px;
    }

    .mpn-about-contact__form-panel {
        padding: 32px 24px;
    }

    .mpn-about-contact__title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .mpn-about-contact__description {
        font-size: 15px;
        margin-bottom: 32px;
    }

    .mpn-about-contact__links {
        gap: 20px;
    }

    .mpn-about-contact__link-row,
    .mpn-about-contact__link-row:visited {
        gap: 12px;
    }

    .mpn-about-contact__link-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
    }

    .mpn-about-contact__link-icon svg {
        width: 16px;
        height: 16px;
    }

    .mpn-about-contact__link-value {
        font-size: 13px;
        word-break: break-all;
        overflow-wrap: anywhere;
    }
}

/* Tablet: moderate padding */
@media (min-width: 480px) and (max-width: 1023px) {
    .mpn-about-contact__info {
        padding: 40px;
    }

    .mpn-about-contact__form-panel {
        padding: 40px;
    }

    .mpn-about-contact__title {
        font-size: 30px;
    }
}

/* Desktop: side-by-side layout */
@media (min-width: 1024px) {
    .mpn-about-contact__card {
        grid-template-columns: 5fr 7fr;
        min-height: 600px;
    }

    .mpn-about-contact__info {
        padding: 64px;
    }

    .mpn-about-contact__form-panel {
        padding: 64px;
    }

    .mpn-about-contact__title {
        font-size: 36px;
    }
}

/* ==========================================================================
   JOIN HEADER WIDGET
   --------------------------------------------------------------------------
   Dark navy header for the Join / Membership page.
   Pairs with the Pricing Grid widget which overlaps via negative margin.
   ========================================================================== */
.mpn-join-header {
    padding: 80px 0 64px;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    text-align: center;
    font-family: var(--mpn-font-body);
}

.mpn-join-header__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-join-header__title {
    font-size: 36px;
    font-weight: 700 !important;
    color: var(--mpn-white) !important;
    margin: 0 0 24px 0;
    line-height: 1.2;
    font-family: var(--mpn-font-body) !important;
}

.mpn-join-header__description {
    font-size: 20px;
    color: var(--mpn-slate-lightest) !important;
    font-weight: 300;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: var(--mpn-font-body) !important;
}

@media (min-width: 768px) {
    .mpn-join-header {
        padding: 80px 0 72px;
    }

    .mpn-join-header__title {
        font-size: 48px;
    }
}

/* ==========================================================================
   PRICING GRID WIDGET
   --------------------------------------------------------------------------
   Two-card pricing section with glassmorphism "Coming Soon" overlay.
   Uses a negative top margin to overlap the Join Header above it.
   ========================================================================== */
.mpn-pricing-grid {
    padding: 0 0 80px;
    background-color: var(--mpn-grey-lightest) !important;
    font-family: var(--mpn-font-body);
}

.mpn-pricing-grid *,
.mpn-pricing-grid *::before,
.mpn-pricing-grid *::after {
    box-sizing: border-box;
}

.mpn-pricing-grid__container {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-pricing-grid__wrapper {
    position: relative;
    margin-top: -48px;
}

/* ---- Glassmorphism overlay ---- */
.mpn-pricing-grid__overlay {
    position: absolute;
    inset: -24px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background-color: rgba(16, 42, 67, 0.60) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.mpn-pricing-grid__overlay-badge {
    display: inline-block;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 700 !important;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
    font-family: var(--mpn-font-body) !important;
}

/* ---- Grid ---- */
.mpn-pricing-grid__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

/* ---- Shared card styles ---- */
.mpn-pricing-grid__card {
    position: relative;
    z-index: 10;
    padding: 32px;
    border-radius: 16px;
    background-color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mpn-pricing-grid__card--monthly {
    border: 1px solid #f1f5f9 !important;
}

.mpn-pricing-grid__card--annual {
    border: 2px solid var(--mpn-gold) !important;
}

.mpn-pricing-grid__card-title {
    font-size: 20px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-pricing-grid__card-subtitle {
    font-size: 14px;
    margin: 0 0 24px 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-pricing-grid__card-subtitle--muted {
    color: #94a3b8 !important;
}

.mpn-pricing-grid__card-subtitle--accent {
    color: #a68023 !important;
    font-weight: 500 !important;
}

/* ---- Price ---- */
.mpn-pricing-grid__price {
    display: flex;
    align-items: baseline;
    margin-bottom: 32px;
}

.mpn-pricing-grid__price-value {
    font-size: 48px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    letter-spacing: -0.02em;
    font-family: var(--mpn-font-body) !important;
}

.mpn-pricing-grid__price-period {
    font-size: 16px;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-left: 8px;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Badge (Annual) ---- */
.mpn-pricing-grid__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--mpn-gold) !important;
    color: var(--mpn-white) !important;
    padding: 4px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Buttons ---- */
.mpn-pricing-grid__btn,
.mpn-pricing-grid__btn:visited {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 9999px;
    font-weight: 700 !important;
    font-size: 14px;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin-bottom: 32px;
    font-family: var(--mpn-font-body) !important;
}

.mpn-pricing-grid__btn--outline {
    background-color: transparent !important;
    color: var(--mpn-navy) !important;
    border: 1px solid #e2e8f0 !important;
}

.mpn-pricing-grid__btn--outline:hover {
    background-color: #f8fafc !important;
    border-color: var(--mpn-slate-lightest) !important;
}

.mpn-pricing-grid__btn--solid {
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
}

.mpn-pricing-grid__btn--solid:hover {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

/* ---- Features list ---- */
.mpn-pricing-grid__features {
    width: 100%;
    text-align: left;
    padding-left: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mpn-pricing-grid__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #475569 !important;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-pricing-grid__check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
}

.mpn-pricing-grid__check--accent {
    color: var(--mpn-gold) !important;
    stroke: var(--mpn-gold) !important;
}

.mpn-pricing-grid__check--muted {
    color: #cbd5e1 !important;
    stroke: #cbd5e1 !important;
}

.mpn-pricing-grid__feature-text--bold {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
}

/* ---- Footer text ---- */
.mpn-pricing-grid__footer {
    text-align: center;
    font-size: 14px;
    color: #94a3b8 !important;
    margin: 32px 0 0 0;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Responsive: tablet+ ---- */
@media (min-width: 768px) {
    .mpn-pricing-grid__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mpn-pricing-grid__card--annual {
        transform: translateY(-16px);
    }
}

/* ==========================================================================
   LOGIN WIDGET
   --------------------------------------------------------------------------
   Split-layout authentication section: visual image panel (left) and
   login form card (right). Image panel is hidden on screens below 1024 px.

   Form is powered by Gravity Forms (ID 3, Orbital theme). Overrides are
   scoped to .mpn-login so they only affect this widget.

   Includes an optional "Coming Soon" glassmorphism overlay that blurs the
   form fields whilst the section heading remains visible.
   ========================================================================== */
.mpn-login {
    padding: 80px 0;
    background-color: var(--mpn-grey-lightest);
    font-family: var(--mpn-font-body);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mpn-login *,
.mpn-login *::before,
.mpn-login *::after {
    box-sizing: border-box;
}

.mpn-login__container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.mpn-login__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1140px;
    margin: 0 auto;
}

/* ---- Visual side (left) ---- */
.mpn-login__visual {
    display: none;
    width: 50%;
    order: 1;
}

.mpn-login__image-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    /* 4:3 aspect ratio */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(16, 42, 67, 0.1);
}

.mpn-login__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpn-login__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 42, 67, 0.6), transparent);
    pointer-events: none;
}

.mpn-login__image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 32px;
    color: var(--mpn-white) !important;
}

.mpn-login__image-heading {
    font-size: 24px;
    font-family: var(--mpn-font-logo) !important;
    font-weight: 700 !important;
    color: var(--mpn-white) !important;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.mpn-login__image-quote {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--mpn-grey-light) !important;
    margin: 0;
    max-width: 400px;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Form side (right) ---- */
.mpn-login__form-side {
    width: 100%;
    order: 2;
}

.mpn-login__card {
    background-color: var(--mpn-white) !important;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9 !important;
}

/* ---- Header block (sits above the overlay) ---- */
.mpn-login__header {
    margin-bottom: 24px;
}

.mpn-login__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: var(--mpn-grey-lightest) !important;
    border: 1px solid var(--mpn-grey-light) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.mpn-login__icon {
    color: var(--mpn-navy) !important;
    stroke: var(--mpn-navy) !important;
}

.mpn-login__title {
    font-size: 24px;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.3;
}

.mpn-login__subtitle {
    font-size: 14px;
    font-weight: 300;
    color: #64748b !important;
    margin: 0;
    line-height: 1.5;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Form wrapper (contains overlay + shortcode) ---- */
.mpn-login__form-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

/* Shortcode wrapper */
.mpn-login__shortcode-wrap {
    width: 100%;
    position: relative;
    z-index: 10;
}

/* ---- "Coming Soon" glassmorphism overlay ---- */
.mpn-login__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(16, 42, 67, 0.50);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.mpn-login__overlay-badge {
    display: inline-block;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 700 !important;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Footer divider link ---- */
.mpn-login__footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center;
    position: relative;
    z-index: 10;
}

.mpn-login__footer-text {
    font-size: 14px;
    color: #64748b !important;
    margin: 0;
    font-family: var(--mpn-font-body) !important;
}

.mpn-login__footer-link,
.mpn-login__footer-link:visited {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    font-family: var(--mpn-font-body) !important;
    margin-left: 4px;
}

.mpn-login__footer-link:hover {
    color: var(--mpn-gold) !important;
}

/* ==========================================================================
   Gravity Forms overrides scoped to .mpn-login
   --------------------------------------------------------------------------
   Targets GF Form ID 3 with the Orbital theme.  Matches the reference
   design from LoginPage.tsx: slate-50 input backgrounds, rounded-lg
   fields, navy submit button with rounded-xl corners.
   ========================================================================== */

/* ---- GF theme variables ---- */
.mpn-login .gform_wrapper {
    --gf-color-primary: #102a43;
    --gf-color-primary-rgb: 16, 42, 67;
    --gf-color-primary-contrast: #fff;
    --gf-color-primary-contrast-rgb: 255, 255, 255;
    --gf-color-primary-darker: #061729;
    --gf-color-primary-lighter: #243b53;
    --gf-color-secondary: #fff;
    --gf-color-secondary-rgb: 255, 255, 255;
    --gf-color-secondary-contrast: #112337;
    --gf-color-secondary-contrast-rgb: 17, 35, 55;
    --gf-color-secondary-darker: #F5F5F5;
    --gf-color-secondary-lighter: #FFFFFF;
    --gf-radius: 8px;
    --gf-font-size-secondary: 14px;
    --gf-font-size-tertiary: 13px;
}

/* Strip GF wrapper padding and background */
.mpn-login .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---- Fieldset and legend resets ---- */
.mpn-login .gform_wrapper fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.mpn-login .gform_wrapper fieldset>legend {
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}

/* ---- Field list spacing ---- */
.mpn-login .gform_wrapper .gform_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Override GF theme grid gaps */
.mpn-login .gform_wrapper.gravity-theme .gform_fields,
.mpn-login .gform_wrapper.gform-theme--framework .gform_fields {
    grid-column-gap: 0 !important;
    grid-row-gap: 24px !important;
}

/* Each field */
.mpn-login .gform_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Labels ---- */
.mpn-login .gform_wrapper .gfield_label,
.mpn-login .gform_wrapper .gfield .gfield_label,
.mpn-login .gform_wrapper legend.gfield_label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    font-family: var(--mpn-font-body) !important;
    display: block !important;
    border: none !important;
}

/* ---- Required indicator: clean red asterisk ---- */
.mpn-login .gform_wrapper .gfield_required {
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
}

.mpn-login .gform_wrapper .gfield_required .gfield_required_text {
    font-size: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    display: inline !important;
}

.mpn-login .gform_wrapper .gfield_required .gfield_required_text::after {
    content: '*' !important;
    font-size: 12px !important;
    visibility: visible !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
}

/* ---- Sub-labels (visually hidden) ---- */
.mpn-login .gform_wrapper .ginput_complex label,
.mpn-login .gform_wrapper .ginput_complex .gform-field-label {
    font-size: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* ---- All text, email, and password inputs ---- */
.mpn-login .gform_wrapper input[type="text"],
.mpn-login .gform_wrapper input[type="email"],
.mpn-login .gform_wrapper input[type="password"],
.mpn-login .gform_wrapper input[type="tel"],
.mpn-login .gform_wrapper input[type="url"],
.mpn-login .gform_wrapper select,
.mpn-login .gform_wrapper textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    font-family: var(--mpn-font-body) !important;
    outline: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mpn-login .gform_wrapper input[type="text"]:focus,
.mpn-login .gform_wrapper input[type="email"]:focus,
.mpn-login .gform_wrapper input[type="password"]:focus,
.mpn-login .gform_wrapper input[type="tel"]:focus,
.mpn-login .gform_wrapper input[type="url"]:focus,
.mpn-login .gform_wrapper select:focus,
.mpn-login .gform_wrapper textarea:focus {
    background-color: var(--mpn-white) !important;
    border-color: var(--mpn-slate) !important;
    box-shadow: 0 0 0 3px rgba(16, 42, 67, 0.08) !important;
}

.mpn-login .gform_wrapper input::placeholder,
.mpn-login .gform_wrapper textarea::placeholder {
    color: #94a3b8 !important;
}

/* ---- Password field: show/hide toggle ---- */
.mpn-login .gform_wrapper .gform_show_password,
.mpn-login .gform_wrapper .gform-theme-button--simple {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    z-index: 5 !important;
}

.mpn-login .gform_wrapper .gform_show_password:hover,
.mpn-login .gform_wrapper .gform-theme-button--simple:hover {
    color: var(--mpn-navy) !important;
}

/* Ensure password input container is position:relative for the toggle */
.mpn-login .gform_wrapper .password_input_container,
.mpn-login .gform_wrapper .ginput_container_password>span {
    position: relative !important;
    display: block !important;
}

/* ---- Submit button ---- */
.mpn-login .gform_wrapper .gform_footer,
.mpn-login .gform_wrapper .gform_page_footer {
    margin: 32px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
}

.mpn-login .gform_wrapper .gform_footer input[type="submit"],
.mpn-login .gform_wrapper .gform_footer button[type="submit"],
.mpn-login .gform_wrapper .gform_button,
.mpn-login .gform_wrapper .gform-button {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 12px !important;
    border: none !important;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
    text-align: center !important;
    display: block !important;
    line-height: 1.5 !important;
}

.mpn-login .gform_wrapper .gform_footer input[type="submit"]:hover,
.mpn-login .gform_wrapper .gform_footer button[type="submit"]:hover,
.mpn-login .gform_wrapper .gform_button:hover,
.mpn-login .gform_wrapper .gform-button:hover {
    background-color: var(--mpn-navy-light) !important;
    color: var(--mpn-white) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3) !important;
}

.mpn-login .gform_wrapper .gform_footer input[type="submit"]:active,
.mpn-login .gform_wrapper .gform_footer button[type="submit"]:active,
.mpn-login .gform_wrapper .gform_button:active,
.mpn-login .gform_wrapper .gform-button:active {
    transform: scale(0.99) !important;
}

/* ---- Validation messages ---- */
.mpn-login .gform_wrapper .gfield_error .gfield_label {
    color: #dc2626 !important;
}

.mpn-login .gform_wrapper .gfield_error input,
.mpn-login .gform_wrapper .gfield_error textarea,
.mpn-login .gform_wrapper .gfield_error select {
    border-color: #fca5a5 !important;
}

.mpn-login .gform_wrapper .validation_message,
.mpn-login .gform_wrapper .gfield_description.validation_message {
    color: #dc2626 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-login .gform_wrapper .gform_validation_errors,
.mpn-login .gform_wrapper .validation_error {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 24px !important;
    color: #991b1b !important;
    font-size: 13px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-login .gform_wrapper .gform_validation_errors h2,
.mpn-login .gform_wrapper .validation_error h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #991b1b !important;
    margin: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Confirmation message ---- */
.mpn-login .gform_confirmation_message {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    color: #166534 !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.5 !important;
}

/* ---- Spinner / loading ---- */
.mpn-login .gform_wrapper .gform_ajax_spinner {
    margin-left: 8px !important;
}

/* ---- Hidden inputs (GF internals) ---- */
.mpn-login .gform_wrapper input[type="hidden"] {
    display: none !important;
}

/* ---- Responsive: tablet (768 px +) ---- */
@media (min-width: 768px) {
    .mpn-login__card {
        padding: 48px;
    }
}

/* ---- Responsive: desktop (1024 px +) ---- */
@media (min-width: 1024px) {
    .mpn-login__grid {
        flex-direction: row;
        gap: 48px;
    }

    .mpn-login__visual {
        display: block;
    }

    .mpn-login__form-side {
        width: 50%;
        order: 2;
    }
}

/* ==========================================================================
   IMPORTANT NOTICE WIDGET
   --------------------------------------------------------------------------
   Left-bordered callout box for disclaimers and editorial notices.
   Used both as a standalone widget and inline within legal page content.
   ========================================================================== */
.mpn-important-notice {
    background-color: var(--mpn-grey-lightest) !important;
    border-left: 4px solid var(--mpn-navy) !important;
    padding: 24px;
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
    font-family: var(--mpn-font-body);
}

.mpn-important-notice__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.4;
    font-family: var(--mpn-font-body) !important;
}

.mpn-important-notice__text {
    font-size: 14px !important;
    color: var(--mpn-slate-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6;
    font-family: var(--mpn-font-body) !important;
}

/* ==========================================================================
   LEGAL PAGE WIDGETS (Privacy Policy & Terms of Service)
   --------------------------------------------------------------------------
   Shared prose styles for long-form legal content. Both widgets output
   identical structural markup; only the text differs.
   ========================================================================== */
.mpn-legal {
    padding: 80px 0;
    background-color: var(--mpn-white);
    font-family: var(--mpn-font-body);
}

.mpn-legal__container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.mpn-legal__prose {
    color: #475569 !important;
    font-size: 18px;
    line-height: 1.75;
    font-family: var(--mpn-font-body) !important;
}

.mpn-legal__prose p {
    color: #475569 !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-legal__prose strong {
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
}

/* ---- "Last Updated" datestamp ---- */
.mpn-legal__updated {
    font-size: 13px !important;
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700 !important;
    margin: 0 0 32px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Section headings ---- */
.mpn-legal__heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 48px 0 16px 0 !important;
    line-height: 1.3;
    font-family: var(--mpn-font-body) !important;
}

.mpn-legal__heading--first {
    margin-top: 32px !important;
}

/* ---- Bullet lists (class-based and WYSIWYG output) ---- */
.mpn-legal__list,
.mpn-legal__prose ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin: 16px 0 24px 0 !important;
}

.mpn-legal__list li,
.mpn-legal__prose li {
    color: #475569 !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    margin: 0 0 8px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-legal__list li strong,
.mpn-legal__prose li strong {
    color: var(--mpn-navy) !important;
}

/* ---- Contact block ---- */
.mpn-legal__contact {
    margin-top: 16px !important;
}

/* ---- Inline links (class-based and WYSIWYG output) ---- */
a.mpn-legal__link,
a.mpn-legal__link:visited,
.mpn-legal__prose a,
.mpn-legal__prose a:visited {
    color: var(--mpn-navy) !important;
    text-decoration: underline !important;
    transition: color 0.2s ease;
}

a.mpn-legal__link:hover,
.mpn-legal__prose a:hover {
    color: var(--mpn-gold) !important;
}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .mpn-legal {
        padding: 48px 0;
    }

    .mpn-legal__prose p,
    .mpn-legal__list li,
    .mpn-legal__prose li {
        font-size: 16px !important;
    }

    .mpn-legal__heading {
        font-size: 20px !important;
        margin-top: 32px !important;
    }

    .mpn-important-notice {
        padding: 16px;
        margin: 16px 0;
    }
}

/* ==========================================================================
   GUIDE HERO WIDGET
   --------------------------------------------------------------------------
   Centred page header for individual Free Guide pages. Renders breadcrumbs,
   title, description, and a wide hero image with a negative bottom margin
   that overlaps the content section below.
   ========================================================================== */

.mpn-guide-hero {
    padding: 32px 0 64px !important;
    background-color: rgba(240, 244, 248, 0.5) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: relative !important;
    z-index: 20 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide-hero--has-image {
    padding-bottom: 64px !important;
}

.mpn-guide-hero *,
.mpn-guide-hero *::before,
.mpn-guide-hero *::after {
    box-sizing: border-box;
}

.mpn-guide-hero__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Breadcrumbs ---- */
.mpn-guide-hero__breadcrumbs {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mpn-slate) !important;
    margin-bottom: 32px !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-guide-hero__crumb-link,
a.mpn-guide-hero__crumb-link:visited {
    color: var(--mpn-slate) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-guide-hero__crumb-link:hover {
    color: var(--mpn-navy) !important;
}

.mpn-guide-hero__crumb-sep {
    margin: 0 12px !important;
    color: var(--mpn-slate-lightest) !important;
}

.mpn-guide-hero__crumb-current {
    color: var(--mpn-navy) !important;
    font-weight: 500 !important;
}

/* ---- Text block ---- */
.mpn-guide-hero__text {
    text-align: center !important;
    max-width: 896px !important;
    margin: 0 auto !important;
}

.mpn-guide-hero__title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    padding-bottom: 8px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide-hero__description {
    font-size: 18px !important;
    color: var(--mpn-slate) !important;
    max-width: 672px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Hero image (overlapping) ---- */
.mpn-guide-hero__image-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 1024px !important;
    margin: 48px auto 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
    border: 4px solid var(--mpn-white) !important;
    margin-bottom: -96px !important;
}

.mpn-guide-hero__image {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
}

/* ---- Responsive: tablet / desktop ---- */
@media (min-width: 768px) {
    .mpn-guide-hero {
        padding: 48px 0 96px !important;
    }

    .mpn-guide-hero--has-image {
        padding-bottom: 96px !important;
    }

    .mpn-guide-hero__breadcrumbs {
        margin-bottom: 48px !important;
    }

    .mpn-guide-hero__title {
        font-size: 48px !important;
    }

    .mpn-guide-hero__image-wrap {
        margin-top: 64px !important;
        margin-bottom: -128px !important;
    }

    .mpn-guide-hero__image {
        aspect-ratio: 2.5 / 1 !important;
    }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .mpn-guide-hero {
        padding: 24px 0 48px !important;
    }

    .mpn-guide-hero__breadcrumbs {
        font-size: 13px !important;
        margin-bottom: 24px !important;
    }

    .mpn-guide-hero__crumb-sep {
        margin: 0 8px !important;
    }

    .mpn-guide-hero__title {
        font-size: 28px !important;
    }

    .mpn-guide-hero__description {
        font-size: 16px !important;
    }

    .mpn-guide-hero__image-wrap {
        margin-top: 32px !important;
        margin-bottom: -64px !important;
        border-radius: 12px !important;
    }
}


/* ==========================================================================
   GUIDES GRID WIDGET
   --------------------------------------------------------------------------
   3-column card grid for the "Free Guides" archive on the Learn page.
   ========================================================================== */

.mpn-guides-grid {
    padding: 80px 0 !important;
    background: var(--mpn-white) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guides-grid *,
.mpn-guides-grid *::before,
.mpn-guides-grid *::after {
    box-sizing: border-box;
}

.mpn-guides-grid__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Header row ---- */
.mpn-guides-grid__header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 48px !important;
}

.mpn-guides-grid__header-text {
    flex: 1;
}

.mpn-guides-grid__title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guides-grid__description {
    color: var(--mpn-slate) !important;
    font-size: 16px !important;
    margin: 0 !important;
    max-width: 560px !important;
    line-height: 1.6 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- View All link ---- */
a.mpn-guides-grid__view-all,
a.mpn-guides-grid__view-all:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-guides-grid__view-all:hover {
    color: var(--mpn-gold) !important;
}

.mpn-guides-grid__view-all svg {
    width: 16px !important;
    height: 16px !important;
}

.mpn-guides-grid__view-all--desktop {
    display: none !important;
}

/* ---- Grid ---- */
.mpn-guides-grid__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

/* ---- Card ---- */
a.mpn-guides-grid__card-link,
a.mpn-guides-grid__card-link:visited {
    display: block !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.mpn-guides-grid__card {
    background: var(--mpn-grey-lightest) !important;
    border-radius: 16px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

a.mpn-guides-grid__card-link:hover .mpn-guides-grid__card {
    border-color: var(--mpn-slate-lightest) !important;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12) !important;
}

/* Image */
.mpn-guides-grid__card-image-wrap {
    position: relative !important;
    height: 256px !important;
    overflow: hidden !important;
    background: var(--mpn-grey-lightest) !important;
}

.mpn-guides-grid__card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

a.mpn-guides-grid__card-link:hover .mpn-guides-grid__card-image {
    transform: scale(1.02) !important;
}

.mpn-guides-grid__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(16, 42, 67, 0.05) !important;
    transition: background 0.3s ease !important;
}

a.mpn-guides-grid__card-link:hover .mpn-guides-grid__card-overlay {
    background: transparent !important;
}

/* Body */
.mpn-guides-grid__card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.mpn-guides-grid__card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 12px 0 !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.3 !important;
}

a.mpn-guides-grid__card-link:hover .mpn-guides-grid__card-title {
    color: var(--mpn-navy-light) !important;
}

.mpn-guides-grid__card-excerpt {
    color: var(--mpn-slate) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    flex-grow: 1 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guides-grid__card-footer {
    padding-top: 16px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
    margin-top: auto !important;
}

.mpn-guides-grid__card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    transition: gap 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guides-grid__card-cta svg {
    color: var(--mpn-gold) !important;
    width: 16px !important;
    height: 16px !important;
}

a.mpn-guides-grid__card-link:hover .mpn-guides-grid__card-cta {
    gap: 12px !important;
}

/* Empty state */
.mpn-guides-grid__empty {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

/* Mobile view all */
.mpn-guides-grid__view-all-mobile {
    margin-top: 48px !important;
    text-align: center !important;
}

/* ---- Responsive: tablet ---- */
@media (min-width: 768px) {
    .mpn-guides-grid__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mpn-guides-grid__view-all--desktop {
        display: inline-flex !important;
    }

    .mpn-guides-grid__view-all-mobile {
        display: none !important;
    }
}

/* ---- Responsive: desktop ---- */
@media (min-width: 1024px) {
    .mpn-guides-grid__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .mpn-guides-grid__title {
        font-size: 42px !important;
    }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .mpn-guides-grid {
        padding: 48px 0 !important;
    }

    .mpn-guides-grid__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .mpn-guides-grid__title {
        font-size: 28px !important;
    }

    .mpn-guides-grid__card-image-wrap {
        height: 200px !important;
    }
}


/* ==========================================================================
   FREE CONTENT HERO WIDGET
   --------------------------------------------------------------------------
   Centred hero banner for the Free Guides archive page. Renders a
   back-link, page title, and description above the grid.
   ========================================================================== */

.mpn-fc-hero {
    padding: 32px 0 64px !important;
    background: #fbfcfe !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-family: var(--mpn-font-body) !important;
    position: relative !important;
    z-index: 20 !important;
}

.mpn-fc-hero *,
.mpn-fc-hero *::before,
.mpn-fc-hero *::after {
    box-sizing: border-box;
}

.mpn-fc-hero__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Back link ---- */
.mpn-fc-hero__back-wrap {
    margin-bottom: 32px !important;
    display: flex !important;
    justify-content: flex-start !important;
}

a.mpn-fc-hero__back-link,
a.mpn-fc-hero__back-link:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--mpn-slate) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-fc-hero__back-link:hover {
    color: var(--mpn-navy) !important;
}

.mpn-fc-hero__back-link svg {
    width: 16px !important;
    height: 16px !important;
}

/* ---- Centred text ---- */
.mpn-fc-hero__text {
    text-align: center !important;
    max-width: 896px !important;
    margin: 0 auto !important;
}

.mpn-fc-hero__title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    padding-bottom: 8px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-fc-hero__description {
    font-size: 18px !important;
    color: var(--mpn-slate) !important;
    max-width: 672px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Responsive: tablet ---- */
@media (min-width: 768px) {
    .mpn-fc-hero {
        padding: 48px 0 96px !important;
    }

    .mpn-fc-hero__back-wrap {
        margin-bottom: 48px !important;
    }

    .mpn-fc-hero__title {
        font-size: 48px !important;
    }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .mpn-fc-hero__title {
        font-size: 32px !important;
    }

    .mpn-fc-hero__description {
        font-size: 16px !important;
    }
}


/* ==========================================================================
   FREE GUIDES WIDGET
   --------------------------------------------------------------------------
   Standalone grid of free-guide posts for the Guides archive page.
   Sits below the Free Content Hero. Includes section header, "View All"
   link, and a configurable CTA label per card.
   ========================================================================== */

.mpn-free-guides {
    padding: 80px 0 !important;
    background: var(--mpn-white) !important;
    font-family: var(--mpn-font-body) !important;
    scroll-margin-top: 80px !important;
}

.mpn-free-guides *,
.mpn-free-guides *::before,
.mpn-free-guides *::after {
    box-sizing: border-box;
}

.mpn-free-guides__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Grid ---- */
.mpn-free-guides__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

/* ---- Card ---- */
a.mpn-free-guides__card-link,
a.mpn-free-guides__card-link:visited {
    display: block !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.mpn-free-guides__card {
    background: var(--mpn-grey-lightest) !important;
    border-radius: 16px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

a.mpn-free-guides__card-link:hover .mpn-free-guides__card {
    border-color: var(--mpn-slate-lightest) !important;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12) !important;
}

/* Image */
.mpn-free-guides__card-image-wrap {
    position: relative !important;
    height: 256px !important;
    overflow: hidden !important;
    background: var(--mpn-grey-lightest) !important;
}

.mpn-free-guides__card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

a.mpn-free-guides__card-link:hover .mpn-free-guides__card-image {
    transform: scale(1.02) !important;
}

.mpn-free-guides__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(16, 42, 67, 0.05) !important;
    transition: background 0.3s ease !important;
}

a.mpn-free-guides__card-link:hover .mpn-free-guides__card-overlay {
    background: transparent !important;
}

/* Body */
.mpn-free-guides__card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.mpn-free-guides__card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 12px 0 !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.3 !important;
}

a.mpn-free-guides__card-link:hover .mpn-free-guides__card-title {
    color: var(--mpn-navy-light) !important;
}

.mpn-free-guides__card-excerpt {
    color: var(--mpn-slate) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    flex-grow: 1 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-free-guides__card-footer {
    padding-top: 16px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
    margin-top: auto !important;
}

.mpn-free-guides__card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    transition: gap 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-free-guides__card-cta svg {
    color: var(--mpn-gold) !important;
    width: 16px !important;
    height: 16px !important;
}

a.mpn-free-guides__card-link:hover .mpn-free-guides__card-cta {
    gap: 12px !important;
}

/* Empty state */
.mpn-free-guides__empty {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Responsive: tablet ---- */
@media (min-width: 768px) {
    .mpn-free-guides__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- Responsive: desktop ---- */
@media (min-width: 1024px) {
    .mpn-free-guides__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .mpn-free-guides {
        padding: 48px 0 !important;
    }

    .mpn-free-guides__card-image-wrap {
        height: 200px !important;
    }
}


/* ==========================================================================
   RELATED GUIDES WIDGET (Continue Learning)
   --------------------------------------------------------------------------
   Randomised grid of free-guide cards, excluding the current post.
   Placed at the bottom of single guide pages.
   Reference: DueDiligenceGuide.tsx / FindingTenantsGuide.tsx
   ========================================================================== */

.mpn-related-guides {
    padding: 80px 0 !important;
    background-color: #f8fbfe !important;
    border-top: 1px solid #f1f5f9 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-related-guides *,
.mpn-related-guides *::before,
.mpn-related-guides *::after {
    box-sizing: border-box;
}

.mpn-related-guides__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Header ---- */
.mpn-related-guides__header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 48px !important;
}

.mpn-related-guides__header-text {
    flex: 1;
}

.mpn-related-guides__title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-related-guides__description {
    color: var(--mpn-slate) !important;
    font-size: 16px !important;
    margin: 0 !important;
    max-width: 480px !important;
    line-height: 1.6 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- View All link ---- */
a.mpn-related-guides__view-all,
a.mpn-related-guides__view-all:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-related-guides__view-all:hover {
    color: var(--mpn-gold) !important;
}

.mpn-related-guides__view-all svg {
    width: 16px !important;
    height: 16px !important;
}

.mpn-related-guides__view-all--desktop {
    display: none !important;
}

/* ---- Grid ---- */
.mpn-related-guides__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

/* ---- Card ---- */
a.mpn-related-guides__card-link,
a.mpn-related-guides__card-link:visited {
    display: block !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.mpn-related-guides__card {
    background: var(--mpn-white) !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

a.mpn-related-guides__card-link:hover .mpn-related-guides__card {
    border-color: var(--mpn-slate-lightest) !important;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12) !important;
}

/* Image */
.mpn-related-guides__card-image-wrap {
    position: relative !important;
    height: 192px !important;
    overflow: hidden !important;
    background: var(--mpn-grey-lightest) !important;
}

.mpn-related-guides__card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

a.mpn-related-guides__card-link:hover .mpn-related-guides__card-image {
    transform: scale(1.02) !important;
}

.mpn-related-guides__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(16, 42, 67, 0.05) !important;
    transition: background 0.3s ease !important;
}

a.mpn-related-guides__card-link:hover .mpn-related-guides__card-overlay {
    background: transparent !important;
}

/* Body */
.mpn-related-guides__card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.mpn-related-guides__card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 12px 0 !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.3 !important;
}

a.mpn-related-guides__card-link:hover .mpn-related-guides__card-title {
    color: var(--mpn-navy-light) !important;
}

.mpn-related-guides__card-excerpt {
    color: var(--mpn-slate) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    flex-grow: 1 !important;
    font-family: var(--mpn-font-body) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.mpn-related-guides__card-footer {
    padding-top: 16px !important;
    border-top: 1px solid #f8fafc !important;
    margin-top: auto !important;
}

.mpn-related-guides__card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: var(--mpn-navy) !important;
    transition: gap 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-related-guides__card-cta svg {
    color: var(--mpn-gold) !important;
    width: 12px !important;
    height: 12px !important;
}

a.mpn-related-guides__card-link:hover .mpn-related-guides__card-cta {
    gap: 12px !important;
}

/* Empty state (editor only) */
.mpn-related-guides__empty {
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

/* Mobile view all */
.mpn-related-guides__view-all-mobile {
    margin-top: 48px !important;
    text-align: center !important;
}

/* ---- Responsive: tablet ---- */
@media (min-width: 768px) {
    .mpn-related-guides__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mpn-related-guides__view-all--desktop {
        display: inline-flex !important;
    }

    .mpn-related-guides__view-all-mobile {
        display: none !important;
    }
}

/* ---- Responsive: desktop ---- */
@media (min-width: 1024px) {
    .mpn-related-guides__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .mpn-related-guides {
        padding: 48px 0 !important;
    }

    .mpn-related-guides__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .mpn-related-guides__title {
        font-size: 24px !important;
    }

    .mpn-related-guides__card-image-wrap {
        height: 180px !important;
    }
}


/* ==========================================================================
   SINGLE GUIDE WIDGET
   --------------------------------------------------------------------------
   Two-column layout (content + sticky sidebar) for individual free-guide
   posts. Includes auto-generated TOC, numbered sections, and a newsletter
   sidebar box.
   ========================================================================== */

.mpn-guide {
    padding: 80px 0 80px !important;
    background: var(--mpn-white) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide *,
.mpn-guide *::before,
.mpn-guide *::after {
    box-sizing: border-box;
}

.mpn-guide__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Layout ---- */
.mpn-guide__layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
}

.mpn-guide__main {
    flex: 1 !important;
    min-width: 0 !important;
}

.mpn-guide__sidebar {
    display: none !important;
}

/* ---- Meta bar ---- */
.mpn-guide__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 14px !important;
    color: var(--mpn-slate-light) !important;
    margin-bottom: 32px !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__meta-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--mpn-grey-lightest) !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
}

.mpn-guide__meta-date svg {
    width: 14px !important;
    height: 14px !important;
}

/* ---- Mobile TOC ---- */
.mpn-guide__mobile-toc {
    margin-bottom: 48px !important;
    background: var(--mpn-grey-lightest) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: 1px solid var(--mpn-grey-light) !important;
}

.mpn-guide__toc-label {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__toc-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

a.mpn-guide__toc-item,
a.mpn-guide__toc-item:visited {
    display: flex !important;
    align-items: flex-start !important;
    font-size: 14px !important;
    color: var(--mpn-slate-dark) !important;
    text-decoration: none !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.5 !important;
}

a.mpn-guide__toc-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

a.mpn-guide__toc-item:hover {
    color: var(--mpn-navy) !important;
}

.mpn-guide__toc-num {
    color: var(--mpn-gold) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    margin-right: 12px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* ---- Sections ---- */
.mpn-guide__sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 64px !important;
}

.mpn-guide__section {
    scroll-margin-top: 128px !important;
}

.mpn-guide__section-heading {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.mpn-guide__section-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--mpn-grey-lightest) !important;
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__section-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

/* Section body (WYSIWYG content) */
.mpn-guide__section-body {
    font-size: 18px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.75 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__section-body p {
    margin: 0 0 16px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__section-body h4,
.mpn-guide__section-body h5 {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 24px 0 8px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__section-body h4 {
    font-size: 18px !important;
}

.mpn-guide__section-body h5 {
    font-size: 18px !important;
}

.mpn-guide__section-body strong {
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
}

.mpn-guide__section-body ul,
.mpn-guide__section-body ol {
    padding-left: 20px !important;
    margin: 16px 0 24px 0 !important;
}

.mpn-guide__section-body li {
    color: var(--mpn-slate-dark) !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    margin-bottom: 8px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__section-body blockquote {
    border-left: 4px solid var(--mpn-grey-light) !important;
    padding-left: 16px !important;
    margin: 16px 0 !important;
    color: var(--mpn-slate) !important;
    font-style: italic !important;
}

.mpn-guide__section-body a,
.mpn-guide__section-body a:visited {
    color: var(--mpn-navy) !important;
    text-decoration: underline !important;
}

.mpn-guide__section-body a:hover {
    color: var(--mpn-gold) !important;
}

/* ---- Mobile Newsletter ---- */
.mpn-guide__mobile-newsletter {
    margin-top: 64px !important;
}

.mpn-guide__newsletter-box {
    background: var(--mpn-navy) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    color: var(--mpn-white) !important;
}

.mpn-guide__newsletter-title {
    font-weight: 700 !important;
    font-size: 20px !important;
    margin: 0 0 8px 0 !important;
    color: var(--mpn-white) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__newsletter-text {
    font-size: 14px !important;
    color: var(--mpn-slate-lightest) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.6 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Bottom CTA ---- */
.mpn-guide__cta-wrap {
    margin-top: 80px !important;
    padding-top: 40px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
}

.mpn-guide__cta {
    background: linear-gradient(to bottom right, var(--mpn-grey-lightest), var(--mpn-white)) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    text-align: center !important;
    border: 1px solid var(--mpn-grey-light) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.mpn-guide__cta-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__cta-text {
    color: var(--mpn-slate-dark) !important;
    margin: 0 0 32px 0 !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
    font-size: 16px !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-guide__cta-button,
a.mpn-guide__cta-button:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 16px 32px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px -5px rgba(16, 42, 67, 0.2) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-guide__cta-button:hover {
    background: var(--mpn-navy-light) !important;
    box-shadow: 0 20px 40px -8px rgba(16, 42, 67, 0.3) !important;
}

a.mpn-guide__cta-button svg {
    width: 16px !important;
    height: 16px !important;
}

/* ---- Empty state ---- */
.mpn-guide__empty {
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Sidebar (Desktop) ---- */

.mpn-guide__sidebar-sticky {
    position: sticky !important;
    top: 112px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

/* Sidebar TOC */
.mpn-guide__sidebar-toc {
    background: var(--mpn-grey-lightest) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.mpn-guide__sidebar-toc-label {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 8px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__sidebar-toc-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

a.mpn-guide__sidebar-toc-link,
a.mpn-guide__sidebar-toc-link:visited {
    display: block !important;
    font-size: 14px !important;
    color: var(--mpn-slate-dark) !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-guide__sidebar-toc-link:hover {
    color: var(--mpn-navy) !important;
    background: var(--mpn-white) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Sidebar Newsletter */
.mpn-guide__sidebar-newsletter {
    background: var(--mpn-navy) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    color: var(--mpn-white) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15) !important;
}

.mpn-guide__sidebar-newsletter-glow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
    width: 128px !important;
    height: 128px !important;
    background: rgba(197, 157, 50, 0.2) !important;
    border-radius: 50% !important;
    filter: blur(32px) !important;
}

.mpn-guide__sidebar-newsletter-inner {
    position: relative !important;
    z-index: 1 !important;
}

.mpn-guide__sidebar-newsletter-title {
    font-weight: 700 !important;
    font-size: 20px !important;
    margin: 0 0 8px 0 !important;
    color: var(--mpn-white) !important;
    letter-spacing: -0.01em !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__sidebar-newsletter-text {
    font-size: 14px !important;
    color: var(--mpn-slate-lightest) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.6 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__sidebar-newsletter-fine {
    font-size: 10px !important;
    color: var(--mpn-slate-lighter) !important;
    margin: 16px 0 0 0 !important;
    opacity: 0.6 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ==========================================================================
   GRAVITY FORMS NEWSLETTER OVERRIDES
   --------------------------------------------------------------------------
   Styles the Gravity Form inside both the sidebar and mobile newsletter
   containers to match the React reference design. GF 2.5+ wraps grouped
   fields (Name, Consent) inside <fieldset> + <legend> elements, which
   need careful handling: legends are re-styled as block labels for Name/
   Email, but fully hidden for Consent (where the checkbox label is inline).

   Reference colours (from tailwind.config.js):
     accent-500  #c59d32  (--mpn-gold)
     accent-600  #a68023  (button hover)
     accent-700  #85631a  (button active)
     brand-200   #bcccdc  (--mpn-slate-lightest, label colour)
     brand-800   #243b53  (--mpn-navy-light)
     brand-900   #102a43  (--mpn-navy)
   ========================================================================== */

/* ---- Override GF 2.5 CSS custom properties within the newsletter scope ---- */
.mpn-guide__sidebar-newsletter .gform_wrapper,
.mpn-guide__newsletter-box .gform_wrapper {
    --gf-ctrl-border-color: transparent !important;
    --gf-ctrl-border-color-hover: transparent !important;
    --gf-ctrl-border-color-focus: var(--mpn-gold) !important;
    --gf-ctrl-border-radius: 8px !important;
    --gf-ctrl-bg-color: var(--mpn-white) !important;
    --gf-ctrl-bg-color-hover: var(--mpn-white) !important;
    --gf-ctrl-size: 14px !important;
    --gf-ctrl-label-color-primary: var(--mpn-slate-lightest) !important;
    --gf-ctrl-label-color-secondary: var(--mpn-slate-lightest) !important;
    --gf-ctrl-choice-size: 16px !important;
    --gf-ctrl-btn-bg-color-primary: var(--mpn-gold) !important;
    --gf-ctrl-btn-bg-color-primary-hover: #a68023 !important;
    --gf-ctrl-btn-color-primary: var(--mpn-white) !important;
    --gf-color-primary: var(--mpn-gold) !important;
    --gf-local-bg-color: transparent !important;
    --gf-color-out-ctrl-label-primary: var(--mpn-slate-lightest) !important;
    --gf-color-out-ctrl-label-secondary: var(--mpn-slate-lightest) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__sidebar-newsletter .gform_body,
.mpn-guide__newsletter-box .gform_body {
    padding: 0 !important;
}

/* ---- Kill ALL fieldset borders (GF 2.5+ grouped-field wrappers) ---- */
.mpn-guide__sidebar-newsletter .gform_wrapper fieldset,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield fieldset,
.mpn-guide__sidebar-newsletter .gform_wrapper fieldset.gfield,
.mpn-guide__sidebar-newsletter fieldset,
.mpn-guide__newsletter-box .gform_wrapper fieldset,
.mpn-guide__newsletter-box .gform_wrapper .gfield fieldset,
.mpn-guide__newsletter-box .gform_wrapper fieldset.gfield,
.mpn-guide__newsletter-box fieldset {
    border: 0 none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ---- Re-style <legend> as a block label (Name, Email) ----
   GF 2.5+ uses <legend class="gfield_label"> for grouped fields. */
.mpn-guide__sidebar-newsletter legend,
.mpn-guide__sidebar-newsletter legend.gfield_label,
.mpn-guide__sidebar-newsletter .gform_wrapper legend,
.mpn-guide__newsletter-box legend,
.mpn-guide__newsletter-box legend.gfield_label,
.mpn-guide__newsletter-box .gform_wrapper legend {
    display: block !important;
    float: none !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--mpn-slate-lightest) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.4 !important;
    border: none !important;
    background: transparent !important;
}

/* ---- Hide legend ONLY on consent/checkbox fields ----
   The inline checkbox label serves as the visible label. */
.mpn-guide__sidebar-newsletter .gfield--type-consent legend,
.mpn-guide__sidebar-newsletter .gfield--type-consent legend.gfield_label,
.mpn-guide__sidebar-newsletter .gfield--type-consent>.gfield_label,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox legend,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox legend.gfield_label,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox>.gfield_label,
.mpn-guide__newsletter-box .gfield--type-consent legend,
.mpn-guide__newsletter-box .gfield--type-consent legend.gfield_label,
.mpn-guide__newsletter-box .gfield--type-consent>.gfield_label,
.mpn-guide__newsletter-box .gfield--type-checkbox legend,
.mpn-guide__newsletter-box .gfield--type-checkbox legend.gfield_label,
.mpn-guide__newsletter-box .gfield--type-checkbox>.gfield_label {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Remove default GF list styling */
.mpn-guide__sidebar-newsletter .gform_fields,
.mpn-guide__newsletter-box .gform_fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-row-gap: 16px !important;
    row-gap: 16px !important;
}

/* Individual field containers */
.mpn-guide__sidebar-newsletter .gfield,
.mpn-guide__newsletter-box .gfield {
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Field labels (non-legend <label> elements) ---- */
.mpn-guide__sidebar-newsletter .gfield_label,
.mpn-guide__sidebar-newsletter .gform-field-label,
.mpn-guide__newsletter-box .gfield_label,
.mpn-guide__newsletter-box .gform-field-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--mpn-slate-lightest) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.4 !important;
}

/* ---- Required indicator ----
   GF 2.5+ renders: <span class="gfield_required gfield_required_asterisk">(Required)</span>
   or <span class="gfield_required"><span class="gfield_required_text">(Required)</span></span>
   We hide all inner text and inject a clean red asterisk via ::after. */
.mpn-guide__sidebar-newsletter .gfield_required,
.mpn-guide__newsletter-box .gfield_required {
    color: #f87171 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

.mpn-guide__sidebar-newsletter .gfield_required *,
.mpn-guide__newsletter-box .gfield_required * {
    display: none !important;
}

.mpn-guide__sidebar-newsletter .gfield_required::after,
.mpn-guide__newsletter-box .gfield_required::after {
    content: '*' !important;
    display: inline !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: #f87171 !important;
    font-weight: 700 !important;
    vertical-align: baseline !important;
    margin-left: 2px !important;
}

/* ---- Sub-labels ("First", "Last" beneath name inputs) ---- */
.mpn-guide__sidebar-newsletter .ginput_container_name label,
.mpn-guide__newsletter-box .ginput_container_name label {
    display: none !important;
}

/* ---- Name field: 2-column grid ---- */
.mpn-guide__sidebar-newsletter .ginput_container_name,
.mpn-guide__newsletter-box .ginput_container_name {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* Name sub-field wrappers */
.mpn-guide__sidebar-newsletter .ginput_container_name>span,
.mpn-guide__newsletter-box .ginput_container_name>span {
    display: block !important;
}

/* ---- All text / email inputs ---- */
.mpn-guide__sidebar-newsletter .gfield input[type="text"],
.mpn-guide__sidebar-newsletter .gfield input[type="email"],
.mpn-guide__sidebar-newsletter .gfield input[type="tel"],
.mpn-guide__sidebar-newsletter .gfield textarea,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield input[type="text"],
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield input[type="email"],
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield input[type="tel"],
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield textarea,
.mpn-guide__newsletter-box .gfield input[type="text"],
.mpn-guide__newsletter-box .gfield input[type="email"],
.mpn-guide__newsletter-box .gfield input[type="tel"],
.mpn-guide__newsletter-box .gfield textarea,
.mpn-guide__newsletter-box .gform_wrapper .gfield input[type="text"],
.mpn-guide__newsletter-box .gform_wrapper .gfield input[type="email"],
.mpn-guide__newsletter-box .gform_wrapper .gfield input[type="tel"],
.mpn-guide__newsletter-box .gform_wrapper .gfield textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: none !important;
    background: var(--mpn-white) !important;
    color: var(--mpn-navy) !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
    transition: box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}

.mpn-guide__sidebar-newsletter .gfield input[type="text"]::placeholder,
.mpn-guide__sidebar-newsletter .gfield input[type="email"]::placeholder,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield input[type="text"]::placeholder,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield input[type="email"]::placeholder,
.mpn-guide__newsletter-box .gfield input[type="text"]::placeholder,
.mpn-guide__newsletter-box .gfield input[type="email"]::placeholder,
.mpn-guide__newsletter-box .gform_wrapper .gfield input[type="text"]::placeholder,
.mpn-guide__newsletter-box .gform_wrapper .gfield input[type="email"]::placeholder {
    color: #94a3b8 !important;
}

.mpn-guide__sidebar-newsletter .gfield input[type="text"]:focus,
.mpn-guide__sidebar-newsletter .gfield input[type="email"]:focus,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield input[type="text"]:focus,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield input[type="email"]:focus,
.mpn-guide__newsletter-box .gfield input[type="text"]:focus,
.mpn-guide__newsletter-box .gfield input[type="email"]:focus,
.mpn-guide__newsletter-box .gform_wrapper .gfield input[type="text"]:focus,
.mpn-guide__newsletter-box .gform_wrapper .gfield input[type="email"]:focus {
    box-shadow: 0 0 0 2px var(--mpn-gold) !important;
}

/* ---- Consent / Checkbox field layout ---- */
.mpn-guide__sidebar-newsletter .gfield--type-consent,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox,
.mpn-guide__newsletter-box .gfield--type-consent,
.mpn-guide__newsletter-box .gfield--type-checkbox {
    display: block !important;
}

.mpn-guide__sidebar-newsletter .ginput_container_consent,
.mpn-guide__newsletter-box .ginput_container_consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* GF 2.5+ nests checkbox + label inside a .gchoice wrapper.
   Without flex on this inner div the label drops below the checkbox. */
.mpn-guide__sidebar-newsletter .ginput_container_consent .gchoice,
.mpn-guide__sidebar-newsletter .gfield--type-consent .gchoice,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox .gchoice,
.mpn-guide__newsletter-box .ginput_container_consent .gchoice,
.mpn-guide__newsletter-box .gfield--type-consent .gchoice,
.mpn-guide__newsletter-box .gfield--type-checkbox .gchoice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Checkbox input
   GF 2.5+ orbital theme uses high-specificity selectors and pseudo-element
   overlays for checkboxes. We need .gform_wrapper in the chain to win,
   and must strip ::before / ::after from GF's theme rendering. */
.mpn-guide__sidebar-newsletter .ginput_container_consent input[type="checkbox"],
.mpn-guide__sidebar-newsletter .gfield--type-checkbox input[type="checkbox"],
.mpn-guide__sidebar-newsletter .gfield--type-consent input[type="checkbox"],
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"],
.mpn-guide__sidebar-newsletter .gform_wrapper .ginput_container_consent input[type="checkbox"],
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.mpn-guide__newsletter-box .ginput_container_consent input[type="checkbox"],
.mpn-guide__newsletter-box .gfield--type-checkbox input[type="checkbox"],
.mpn-guide__newsletter-box .gfield--type-consent input[type="checkbox"],
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"],
.mpn-guide__newsletter-box .gform_wrapper .ginput_container_consent input[type="checkbox"],
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    border-radius: 4px !important;
    border: 1px solid #334e68 !important;
    background-color: #243b53 !important;
    background-image: none !important;
    cursor: pointer !important;
    margin: 2px 0 0 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    position: relative !important;
    outline: none !important;
    vertical-align: top !important;
}

/* Strip GF orbital theme pseudo-element overlays on the checkbox */
.mpn-guide__sidebar-newsletter .gfield--type-consent input[type="checkbox"]::before,
.mpn-guide__sidebar-newsletter .gfield--type-consent input[type="checkbox"]::after,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox input[type="checkbox"]::after,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"]::before,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"]::after,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::after,
.mpn-guide__newsletter-box .gfield--type-consent input[type="checkbox"]::before,
.mpn-guide__newsletter-box .gfield--type-consent input[type="checkbox"]::after,
.mpn-guide__newsletter-box .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-guide__newsletter-box .gfield--type-checkbox input[type="checkbox"]::after,
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"]::before,
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"]::after,
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::after {
    display: none !important;
    content: none !important;
}

/* Checked state: gold fill with dark tick SVG */
.mpn-guide__sidebar-newsletter .ginput_container_consent input[type="checkbox"]:checked,
.mpn-guide__sidebar-newsletter .gfield--type-checkbox input[type="checkbox"]:checked,
.mpn-guide__sidebar-newsletter .gfield--type-consent input[type="checkbox"]:checked,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked,
.mpn-guide__sidebar-newsletter .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked,
.mpn-guide__sidebar-newsletter .gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked,
.mpn-guide__newsletter-box .ginput_container_consent input[type="checkbox"]:checked,
.mpn-guide__newsletter-box .gfield--type-checkbox input[type="checkbox"]:checked,
.mpn-guide__newsletter-box .gfield--type-consent input[type="checkbox"]:checked,
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked,
.mpn-guide__newsletter-box .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked,
.mpn-guide__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked {
    background-color: var(--mpn-gold) !important;
    border-color: var(--mpn-gold) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102a43' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Consent inline label text */
.mpn-guide__sidebar-newsletter .ginput_container_consent label,
.mpn-guide__sidebar-newsletter .gfield_consent_label,
.mpn-guide__sidebar-newsletter .gfield--type-consent .gchoice label,
.mpn-guide__newsletter-box .ginput_container_consent label,
.mpn-guide__newsletter-box .gfield_consent_label,
.mpn-guide__newsletter-box .gfield--type-consent .gchoice label {
    font-size: 12px !important;
    color: var(--mpn-slate-lightest) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    visibility: visible !important;
}

.mpn-guide__sidebar-newsletter .ginput_container_consent label a,
.mpn-guide__sidebar-newsletter .gfield_consent_label a,
.mpn-guide__newsletter-box .ginput_container_consent label a,
.mpn-guide__newsletter-box .gfield_consent_label a {
    color: var(--mpn-slate-lightest) !important;
    text-decoration: underline !important;
}

.mpn-guide__sidebar-newsletter .ginput_container_consent label a:hover,
.mpn-guide__sidebar-newsletter .gfield_consent_label a:hover,
.mpn-guide__newsletter-box .ginput_container_consent label a:hover,
.mpn-guide__newsletter-box .gfield_consent_label a:hover {
    color: var(--mpn-white) !important;
}

/* GF consent description (if present) */
.mpn-guide__sidebar-newsletter .gfield_consent_description,
.mpn-guide__newsletter-box .gfield_consent_description {
    display: none !important;
}

/* ---- Checkbox list fields (alternative to consent) ---- */
.mpn-guide__sidebar-newsletter .gfield_checkbox,
.mpn-guide__newsletter-box .gfield_checkbox {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mpn-guide__sidebar-newsletter .gfield_checkbox li,
.mpn-guide__newsletter-box .gfield_checkbox li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mpn-guide__sidebar-newsletter .gfield_checkbox label,
.mpn-guide__newsletter-box .gfield_checkbox label {
    font-size: 12px !important;
    color: var(--mpn-slate-lightest) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ---- Submit button ---- */
.mpn-guide__sidebar-newsletter .gform_footer,
.mpn-guide__sidebar-newsletter .gform_page_footer,
.mpn-guide__newsletter-box .gform_footer,
.mpn-guide__newsletter-box .gform_page_footer {
    padding: 16px 0 0 0 !important;
    margin: 0 !important;
    border: none !important;
}

.mpn-guide__sidebar-newsletter .gform_footer input[type="submit"],
.mpn-guide__sidebar-newsletter .gform_footer button[type="submit"],
.mpn-guide__sidebar-newsletter .gform_button,
.mpn-guide__sidebar-newsletter .gform_wrapper input[type="submit"],
.mpn-guide__newsletter-box .gform_footer input[type="submit"],
.mpn-guide__newsletter-box .gform_footer button[type="submit"],
.mpn-guide__newsletter-box .gform_button,
.mpn-guide__newsletter-box .gform_wrapper input[type="submit"] {
    width: 100% !important;
    display: block !important;
    background: var(--mpn-gold) !important;
    color: var(--mpn-white) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    box-shadow: 0 10px 25px -5px rgba(197, 157, 50, 0.25) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: center !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.mpn-guide__sidebar-newsletter .gform_footer input[type="submit"]:hover,
.mpn-guide__sidebar-newsletter .gform_footer button[type="submit"]:hover,
.mpn-guide__sidebar-newsletter .gform_button:hover,
.mpn-guide__sidebar-newsletter .gform_wrapper input[type="submit"]:hover,
.mpn-guide__newsletter-box .gform_footer input[type="submit"]:hover,
.mpn-guide__newsletter-box .gform_footer button[type="submit"]:hover,
.mpn-guide__newsletter-box .gform_button:hover,
.mpn-guide__newsletter-box .gform_wrapper input[type="submit"]:hover {
    background: #a68023 !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 15px 30px -5px rgba(166, 128, 35, 0.4) !important;
}

.mpn-guide__sidebar-newsletter .gform_footer input[type="submit"]:focus-visible,
.mpn-guide__sidebar-newsletter .gform_footer button[type="submit"]:focus-visible,
.mpn-guide__sidebar-newsletter .gform_button:focus-visible,
.mpn-guide__newsletter-box .gform_footer input[type="submit"]:focus-visible,
.mpn-guide__newsletter-box .gform_footer button[type="submit"]:focus-visible,
.mpn-guide__newsletter-box .gform_button:focus-visible {
    outline: 2px solid var(--mpn-gold) !important;
    outline-offset: 2px !important;
}

.mpn-guide__sidebar-newsletter .gform_footer input[type="submit"]:active,
.mpn-guide__sidebar-newsletter .gform_footer button[type="submit"]:active,
.mpn-guide__sidebar-newsletter .gform_button:active,
.mpn-guide__newsletter-box .gform_footer input[type="submit"]:active,
.mpn-guide__newsletter-box .gform_footer button[type="submit"]:active,
.mpn-guide__newsletter-box .gform_button:active {
    background: #85631a !important;
    box-shadow: 0 5px 15px -5px rgba(133, 99, 26, 0.3) !important;
}

/* ---- GF AJAX spinner ---- */
.mpn-guide__sidebar-newsletter .gform_ajax_spinner,
.mpn-guide__newsletter-box .gform_ajax_spinner {
    display: inline-block !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

/* ---- Validation: top-level error banner ---- */
.mpn-guide__sidebar-newsletter .gform_validation_errors,
.mpn-guide__newsletter-box .gform_validation_errors {
    color: #fca5a5 !important;
    font-size: 12px !important;
    font-family: var(--mpn-font-body) !important;
    background: rgba(248, 113, 113, 0.15) !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 0 16px 0 !important;
    box-shadow: none !important;
}

.mpn-guide__sidebar-newsletter .gform_validation_errors h2,
.mpn-guide__sidebar-newsletter .gform_validation_errors h3,
.mpn-guide__newsletter-box .gform_validation_errors h2,
.mpn-guide__newsletter-box .gform_validation_errors h3 {
    font-size: 13px !important;
    color: #fca5a5 !important;
    margin: 0 0 4px 0 !important;
    font-family: var(--mpn-font-body) !important;
    font-weight: 700 !important;
}

.mpn-guide__sidebar-newsletter .gform_validation_errors ol,
.mpn-guide__sidebar-newsletter .gform_validation_errors ul,
.mpn-guide__newsletter-box .gform_validation_errors ol,
.mpn-guide__newsletter-box .gform_validation_errors ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
}

.mpn-guide__sidebar-newsletter .gform_validation_errors li,
.mpn-guide__newsletter-box .gform_validation_errors li {
    color: #fca5a5 !important;
    font-size: 12px !important;
    margin: 2px 0 !important;
}

.mpn-guide__sidebar-newsletter .gform_validation_errors a,
.mpn-guide__newsletter-box .gform_validation_errors a {
    color: #fca5a5 !important;
    text-decoration: underline !important;
}

/* Hide the GF error icon if present */
.mpn-guide__sidebar-newsletter .gform_validation_errors .gform-icon,
.mpn-guide__sidebar-newsletter .gform_validation_errors svg,
.mpn-guide__newsletter-box .gform_validation_errors .gform-icon,
.mpn-guide__newsletter-box .gform_validation_errors svg {
    display: none !important;
}

/* ---- Validation: per-field inline messages ---- */
.mpn-guide__sidebar-newsletter .validation_message,
.mpn-guide__sidebar-newsletter .gfield_description.validation_message,
.mpn-guide__newsletter-box .validation_message,
.mpn-guide__newsletter-box .gfield_description.validation_message {
    color: #fca5a5 !important;
    font-size: 11px !important;
    font-family: var(--mpn-font-body) !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    opacity: 1 !important;
}

/* Red ring around error fields */
.mpn-guide__sidebar-newsletter .gfield_error input[type="text"],
.mpn-guide__sidebar-newsletter .gfield_error input[type="email"],
.mpn-guide__sidebar-newsletter .gfield_error textarea,
.mpn-guide__newsletter-box .gfield_error input[type="text"],
.mpn-guide__newsletter-box .gfield_error input[type="email"],
.mpn-guide__newsletter-box .gfield_error textarea {
    box-shadow: 0 0 0 2px #f87171 !important;
}

/* Error label colour remains the same (don't turn red) */
.mpn-guide__sidebar-newsletter .gfield_error .gfield_label,
.mpn-guide__sidebar-newsletter .gfield_error legend,
.mpn-guide__newsletter-box .gfield_error .gfield_label,
.mpn-guide__newsletter-box .gfield_error legend {
    color: var(--mpn-slate-lightest) !important;
}

/* ---- Confirmation message ---- */
.mpn-guide__sidebar-newsletter .gform_confirmation_message,
.mpn-guide__newsletter-box .gform_confirmation_message {
    color: var(--mpn-white) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: var(--mpn-font-body) !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    text-align: center !important;
}

/* ---- Hide GF honeypot and hidden fields ---- */
.mpn-guide__sidebar-newsletter .gform_validation_container,
.mpn-guide__sidebar-newsletter .gfield_visibility_hidden,
.mpn-guide__newsletter-box .gform_validation_container,
.mpn-guide__newsletter-box .gfield_visibility_hidden {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ---- GF description helper text ---- */
.mpn-guide__sidebar-newsletter .gfield_description:not(.gfield_consent_description):not(.validation_message),
.mpn-guide__newsletter-box .gfield_description:not(.gfield_consent_description):not(.validation_message) {
    font-size: 11px !important;
    color: var(--mpn-slate-lighter) !important;
    margin: 4px 0 0 0 !important;
    font-family: var(--mpn-font-body) !important;
    opacity: 0.7 !important;
}

/* ==========================================================================
   DOWNLOADABLE GUIDE WIDGET
   --------------------------------------------------------------------------
   Full-page document layout for downloadable guides: centred page
   header with breadcrumb, action bar with "Download PDF" button,
   and a white card container with document header, sectioned content,
   and footer.

   Reference: InvestorsChecklistPage.tsx, YieldVsRoiPage.tsx,
              Section24GuidePage.tsx
   ========================================================================== */

/* ---- Hero / Page Header ---- */
.mpn-dl-guide__hero {
    background-color: rgba(240, 244, 248, 0.5) !important;
    padding: 48px 0 64px 0 !important;
    border-bottom: 1px solid var(--mpn-grey-light) !important;
    position: relative !important;
    z-index: 20 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__hero-container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

a.mpn-dl-guide__breadcrumb,
a.mpn-dl-guide__breadcrumb:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: var(--mpn-slate) !important;
    text-decoration: none !important;
    margin-bottom: 32px !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-dl-guide__breadcrumb:hover {
    color: var(--mpn-navy) !important;
}

a.mpn-dl-guide__breadcrumb svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.mpn-dl-guide__hero-content {
    text-align: center !important;
    max-width: 896px !important;
    margin: 0 auto !important;
}

.mpn-dl-guide__hero-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    padding: 0 0 8px 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__hero-desc {
    font-size: 18px !important;
    font-weight: 300 !important;
    color: var(--mpn-slate) !important;
    line-height: 1.625 !important;
    margin: 0 auto !important;
    max-width: 640px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Main container ---- */
.mpn-dl-guide {
    padding: 48px 0 80px 0 !important;
    background-color: #f8fafc !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__container {
    width: 100% !important;
    max-width: 896px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* ---- Action Bar ---- */
.mpn-dl-guide__action-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 32px !important;
    background-color: var(--mpn-white) !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--mpn-grey-light) !important;
}

.mpn-dl-guide__action-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--mpn-slate-dark) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__action-label svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--mpn-slate-dark) !important;
    flex-shrink: 0 !important;
}

.mpn-dl-guide__action-label span {
    font-weight: 500 !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__download-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.mpn-dl-guide__download-btn:hover {
    background-color: var(--mpn-navy-light) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.mpn-dl-guide__download-btn:disabled {
    opacity: 0.7 !important;
    cursor: wait !important;
}

.mpn-dl-guide__download-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* Spinner animation for generating state */
@keyframes mpn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Document Card ---- */
.mpn-dl-guide__card {
    background-color: var(--mpn-white) !important;
    padding: 24px !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--mpn-grey-light) !important;
    position: relative !important;
    overflow: hidden !important;
}

.mpn-dl-guide__card-border {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 8px !important;
    background: linear-gradient(to right, var(--mpn-navy), var(--mpn-navy-light, #334e68)) !important;
}

.mpn-dl-guide__pdf-content {
    background-color: var(--mpn-white) !important;
    color: #1e293b !important;
}

/* ---- Document Header ---- */
.mpn-dl-guide__doc-header {
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 40px !important;
    margin-bottom: 40px !important;
}

.mpn-dl-guide__doc-header-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
}

.mpn-dl-guide__doc-header-left {
    /* flex-grow handled by row */
}

.mpn-dl-guide__doc-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.02em !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.2 !important;
}

.mpn-dl-guide__doc-tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy-light, #334e68) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    border-bottom: 2px solid var(--mpn-brand-200, #bcccdc) !important;
    padding-bottom: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__doc-logo {
    display: flex !important;
    align-items: center !important;
}

.mpn-dl-guide__logo-text {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    line-height: 1.1 !important;
    font-family: var(--mpn-font-serif, 'Playfair Display', Georgia, serif) !important;
}

.mpn-dl-guide__logo-accent {
    color: var(--mpn-gold, #a68023) !important;
}

.mpn-dl-guide__doc-intro {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    max-width: 768px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Sections ---- */
.mpn-dl-guide__sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
}

.mpn-dl-guide__section {
    /* page-break-avoid is handled via class for PDF */
}

.mpn-dl-guide__section-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Content Items ---- */
.mpn-dl-guide__items {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.mpn-dl-guide__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

.mpn-dl-guide__item-number {
    flex-shrink: 0 !important;
    width: 32px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mpn-slate-dark) !important;
    padding-top: 2px !important;
    font-family: var(--mpn-font-body) !important;
    font-variant-numeric: tabular-nums !important;
}

.mpn-dl-guide__item-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.mpn-dl-guide__item-content--full {
    /* No number column, takes full width */
}

.mpn-dl-guide__item-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__item-desc {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__item-formula {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mpn-gold, #a68023) !important;
    line-height: 1.4 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Document Footer ---- */
.mpn-dl-guide__doc-footer {
    margin-top: 64px !important;
    padding-top: 32px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
    text-align: center !important;
}

.mpn-dl-guide__doc-footer p {
    font-size: 13px !important;
    color: var(--mpn-slate) !important;
    margin: 0 0 4px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-dl-guide__doc-footer p:last-child {
    margin-bottom: 0 !important;
}

/* ---- Empty state ---- */
.mpn-dl-guide__empty {
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Responsive ---- */
@media (min-width: 640px) {
    .mpn-dl-guide__action-bar {
        flex-direction: row !important;
    }

    .mpn-dl-guide__download-btn {
        width: auto !important;
    }

    .mpn-dl-guide__action-label span {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {
    .mpn-dl-guide__hero {
        padding: 80px 0 96px 0 !important;
    }

    .mpn-dl-guide__hero-title {
        font-size: 48px !important;
    }

    .mpn-dl-guide__container {
        padding: 0 24px !important;
    }

    .mpn-dl-guide__card {
        padding: 40px !important;
    }

    .mpn-dl-guide__doc-header-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .mpn-dl-guide__doc-title {
        font-size: 36px !important;
    }

    .mpn-dl-guide__section-title {
        font-size: 24px !important;
    }

    .mpn-dl-guide__doc-intro {
        font-size: 18px !important;
    }
}

@media (min-width: 1024px) {
    .mpn-dl-guide__card {
        padding: 56px !important;
    }
}

/* ---- Responsive: desktop ---- */
@media (min-width: 1024px) {
    .mpn-guide {
        padding: 80px 0 80px !important;
    }

    .mpn-guide__layout {
        flex-direction: row !important;
        gap: 80px !important;
    }

    .mpn-guide__sidebar {
        display: block !important;
        width: 33.333% !important;
        min-width: 320px !important;
    }

    .mpn-guide__mobile-toc {
        display: none !important;
    }

    .mpn-guide__mobile-newsletter {
        display: none !important;
    }

    .mpn-guide__section-body {
        padding-left: 56px !important;
    }

    .mpn-guide__section-title {
        font-size: 32px !important;
    }

    .mpn-guide__cta {
        padding: 48px !important;
    }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .mpn-guide {
        padding: 48px 0 48px !important;
    }

    .mpn-guide__section-title {
        font-size: 22px !important;
    }

    .mpn-guide__section-body {
        font-size: 16px !important;
    }

    .mpn-guide__section-body li {
        font-size: 16px !important;
    }

    .mpn-guide__cta-heading {
        font-size: 20px !important;
    }

    .mpn-guide__cta {
        padding: 24px !important;
    }

    .mpn-guide__newsletter-box {
        padding: 24px !important;
    }
}


/* ==========================================================================
   MPN SHORTCODES
   Reusable content patterns for WYSIWYG fields across all post types.
   Reference: src/components/learn/FoundationsGuide.tsx
   ========================================================================== */

/* ---- Section-body overrides for all shortcode containers ----
   .mpn-guide__section-body sets margins on h4, h5, p, ul, ol, li
   at specificity 0-1-1. These resets use 0-2-1 to ensure even
   padding inside shortcode components.
   ------------------------------------------------------------ */
.mpn-guide__section-body [class*="mpn-sc-"] h4,
.mpn-guide__section-body [class*="mpn-sc-"] h5 {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.mpn-guide__section-body [class*="mpn-sc-"] p {
    margin: 0 0 8px 0 !important;
}

.mpn-guide__section-body [class*="mpn-sc-"] p:last-child {
    margin-bottom: 0 !important;
}

.mpn-guide__section-body [class*="mpn-sc-"] ul,
.mpn-guide__section-body [class*="mpn-sc-"] ol {
    margin: 8px 0 !important;
    padding-left: 20px !important;
}

.mpn-guide__section-body [class*="mpn-sc-"] ul:last-child,
.mpn-guide__section-body [class*="mpn-sc-"] ol:last-child {
    margin-bottom: 0 !important;
}

.mpn-guide__section-body [class*="mpn-sc-"] li {
    font-size: 14px !important;
    line-height: 1.625 !important;
    margin-bottom: 4px !important;
}

/* ---- [mpn_card] ---- */
.mpn-sc-card {
    background-color: #f8fafc !important;
    padding: 24px !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-card+.mpn-sc-card {
    margin-top: 24px !important;
}

.mpn-sc-card h5.mpn-sc-card__title,
.mpn-sc-card__title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-card__body,
.mpn-sc-card__body p {
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-card__body p {
    margin: 0 !important;
    padding: 0 !important;
}

.mpn-sc-card__body p+p {
    margin-top: 8px !important;
}

/* ---- [mpn_risk_item] ---- */
.mpn-sc-risk-item {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-risk-item+.mpn-sc-risk-item {
    margin-top: 16px !important;
}

.mpn-sc-risk-item__dot {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    border-radius: 50% !important;
    background-color: #ef4444 !important;
    margin-top: 8px !important;
}

.mpn-sc-risk-item__content {
    display: flex !important;
    flex-direction: column !important;
}

.mpn-sc-risk-item__title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    display: block !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-risk-item__desc {
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    display: block !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- [mpn_callout] ---- */
.mpn-sc-callout {
    display: flex !important;
    gap: 12px !important;
    padding: 16px !important;
    background-color: #f0f4f8 !important;
    border-radius: 8px !important;
    border: 1px solid #d9e2ec !important;
    color: var(--mpn-navy) !important;
    font-family: var(--mpn-font-body) !important;
    margin-top: 24px !important;
}

.mpn-sc-callout__icon {
    flex-shrink: 0 !important;
    color: #334e68 !important;
    line-height: 0 !important;
}

.mpn-sc-callout__icon svg {
    width: 20px !important;
    height: 20px !important;
}

.mpn-sc-callout__body,
.mpn-sc-callout__body p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--mpn-navy) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-callout__body p {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Intro wrapper (Single Guide widget) ---- */
.mpn-guide__intro {
    margin-bottom: 48px !important;
}

.mpn-guide__intro h2 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__intro>p,
.mpn-guide__intro>div>p {
    color: #475569 !important;
    line-height: 1.625 !important;
    font-size: 18px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Guide Outro / Final Thought ---- */
.mpn-guide__outro {
    margin-top: 64px !important;
    background-color: #f0f4f8 !important;
    padding: 32px !important;
    border-radius: 16px !important;
    border: 1px solid #d9e2ec !important;
    text-align: center !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__outro h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__outro p {
    color: #475569 !important;
    line-height: 1.625 !important;
    font-size: 16px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__outro p:last-child {
    margin-bottom: 0 !important;
}

.mpn-guide__outro p strong {
    color: var(--mpn-navy) !important;
}

/* ---- [mpn_intro_box] ---- */
.mpn-sc-intro-box {
    background-color: var(--mpn-navy) !important;
    color: #fff !important;
    padding: 32px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-intro-box__title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-intro-box .mpn-sc-intro-box__subtitle {
    color: #d9e2ec !important;
    font-weight: 300 !important;
    line-height: 1.625 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-intro-box .mpn-sc-intro-box__body,
.mpn-sc-intro-box .mpn-sc-intro-box__body p {
    color: rgba(217, 226, 236, 0.8) !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-intro-box__body p {
    margin: 0 !important;
    padding: 0 !important;
}

.mpn-sc-intro-box__body p+p {
    margin-top: 8px !important;
}

/* ---- [mpn_aside] ---- */
.mpn-sc-aside {
    background-color: #f0f4f8 !important;
    border-left: 4px solid #627d98 !important;
    padding: 24px !important;
    border-radius: 0 12px 12px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-aside__title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-aside__body,
.mpn-sc-aside__body p {
    color: #243b53 !important;
    font-size: 15px !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-aside__body p {
    margin: 0 !important;
    padding: 0 !important;
}

.mpn-sc-aside__body p+p {
    margin-top: 8px !important;
}

.mpn-sc-aside__body ol {
    margin: 8px 0 0 0 !important;
    padding-left: 20px !important;
    list-style: decimal !important;
}

.mpn-sc-aside__body ol li {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    padding: 2px 0 !important;
}

/* ---- [mpn_term] ---- */
.mpn-sc-term {
    padding: 24px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    border-radius: 12px !important;
    transition: background-color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-term:hover {
    background-color: #f8fafc !important;
}

.mpn-sc-term+.mpn-sc-term {
    margin-top: 0 !important;
}

.mpn-sc-term__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-term__body {
    color: #475569 !important;
    line-height: 1.625 !important;
    font-weight: 300 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-term__body p {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #475569 !important;
    line-height: 1.625 !important;
    font-weight: 300 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-term__body p:last-child {
    margin-bottom: 0 !important;
}

.mpn-sc-term__body ul {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 0 8px 0 !important;
}

.mpn-sc-term__body ul li {
    padding: 2px 0 !important;
    color: #475569 !important;
    font-weight: 300 !important;
}

/* ---- [mpn_check_card] ---- */
.mpn-sc-check-card {
    display: flex !important;
    gap: 16px !important;
    padding: 16px !important;
    background-color: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    transition: box-shadow 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-check-card:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.mpn-sc-check-card+.mpn-sc-check-card {
    margin-top: 16px !important;
}

.mpn-sc-check-card__icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin-top: 4px !important;
    line-height: 0 !important;
}

.mpn-sc-check-card__icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Icon colour variants */
.mpn-sc-check-card__icon--check {
    color: #16a34a !important;
}

/* green-600 */
.mpn-sc-check-card__icon--droplets {
    color: #3b82f6 !important;
}

/* blue-500 */
.mpn-sc-check-card__icon--flame {
    color: #f97316 !important;
}

/* orange-500 */
.mpn-sc-check-card__icon--wrench {
    color: #64748b !important;
}

/* slate-500 */
.mpn-sc-check-card__icon--bug {
    color: #16a34a !important;
}

/* green-600 */
.mpn-sc-check-card__icon--phone {
    color: #627d98 !important;
}

/* brand-500 */
.mpn-sc-check-card__icon--clock {
    color: #627d98 !important;
}

/* brand-500 */
.mpn-sc-check-card__icon--shield {
    color: #486581 !important;
}

/* brand-600 */

.mpn-sc-check-card__content {
    flex: 1 !important;
}

.mpn-sc-check-card__content h1,
.mpn-sc-check-card__content h2,
.mpn-sc-check-card__content h3,
.mpn-sc-check-card__content h4,
.mpn-sc-check-card__content h5,
.mpn-sc-check-card__content h6 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none !important;
}

.mpn-sc-check-card .mpn-sc-check-card__content h5,
.mpn-sc-check-card__content .mpn-sc-check-card__title,
.mpn-sc-check-card__title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-family: var(--mpn-font-body) !important;
    border: none !important;
}

.mpn-sc-check-card__body,
.mpn-sc-check-card__body p {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-check-card__body p {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.mpn-sc-check-card__body p:last-child {
    margin-bottom: 0 !important;
}

.mpn-sc-check-card__body ul {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 0 8px 0 !important;
}

.mpn-sc-check-card__body ul li {
    font-size: 15px !important;
    color: #475569 !important;
    padding: 2px 0 !important;
}

.mpn-sc-check-card__body .mpn-sc-check-card__note {
    color: #dc2626 !important;
    font-style: italic !important;
}

/* Split variant: title-left / content-right two-column row */
.mpn-sc-check-card--split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 4px 32px !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mpn-sc-check-card--split:hover {
    box-shadow: none !important;
}

@media (min-width: 768px) {
    .mpn-sc-check-card--split {
        grid-template-columns: 1fr 2fr !important;
    }
}

/* Issue list container */
.mpn-sc-issue-list {
    display: flex !important;
    flex-direction: column !important;
}

.mpn-sc-issue-list>p,
.mpn-sc-issue-list>br {
    display: none !important;
}

/* Even spacing on all split cards */
.mpn-sc-issue-list .mpn-sc-check-card--split {
    margin-top: 0 !important;
    padding-bottom: 32px !important;
}

/* Divider between consecutive split cards */
.mpn-sc-issue-list .mpn-sc-check-card--split+.mpn-sc-check-card--split {
    padding-top: 32px !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Remove bottom padding on the last card */
.mpn-sc-issue-list .mpn-sc-check-card--split:last-child {
    padding-bottom: 0 !important;
}

.mpn-sc-check-card--split .mpn-sc-check-card__heading {
    display: flex !important;
    align-items: flex-start !important;
}

.mpn-sc-check-card--split .mpn-sc-check-card__title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.mpn-sc-check-card--split .mpn-sc-check-card__body {
    font-size: 15px !important;
}

.mpn-sc-check-card--split .mpn-sc-check-card__body ul li {
    font-size: 15px !important;
    padding: 4px 0 !important;
}

/* Highlight inside split variant: plain bold text, no badge */
.mpn-sc-check-card--split .mpn-sc-check-card__body .mpn-sc-highlight {
    display: block !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: var(--mpn-navy) !important;
    background-color: transparent !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 8px !important;
}

/* ---- [mpn_checklist] ---- */
.mpn-sc-checklist {
    background-color: var(--mpn-navy) !important;
    color: #fff !important;
    padding: 32px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-checklist__label {
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #c59d32 !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-checklist__divider {
    border: 0 !important;
    border-top: 1px solid #243b53 !important;
    margin: 24px 0 !important;
    padding: 0 !important;
}

.mpn-sc-checklist ul {
    list-style: disc !important;
    padding-left: 16px !important;
    margin: 0 !important;
}

.mpn-sc-checklist ul li {
    font-size: 15px !important;
    color: #d9e2ec !important;
    padding: 4px 0 !important;
}

.mpn-sc-checklist ul li::marker {
    color: #c59d32 !important;
}

/* ---- [mpn_redflags] ---- */
.mpn-sc-redflags {
    background-color: #fef2f2 !important;
    color: #7f1d1d !important;
    padding: 32px !important;
    border-radius: 16px !important;
    border: 1px solid #fee2e2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-redflags__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #b91c1c !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-redflags__body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mpn-sc-redflags__body ul li {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-start !important;
    font-size: 15px !important;
    color: #7f1d1d !important;
    padding: 6px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-redflags__body ul li::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    border-radius: 50% !important;
    background-color: #ef4444 !important;
    margin-top: 7px !important;
    display: inline-block !important;
}

.mpn-sc-redflags__footer {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #f87171 !important;
    background-color: #fff !important;
    padding: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #fee2e2 !important;
    text-align: center !important;
    margin: 32px 0 0 0 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- [mpn_grid] + [mpn_grid_card] ---- */
.mpn-sc-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
}

@media (min-width: 768px) {
    .mpn-sc-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.mpn-sc-grid>p,
.mpn-sc-grid>br {
    display: none !important;
}

.mpn-sc-grid-card {
    background-color: #f8fafc !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-grid-card h5.mpn-sc-grid-card__title,
.mpn-sc-grid-card__title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-grid-card__body,
.mpn-sc-grid-card__body p {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-grid-card__body p {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.mpn-sc-grid-card__body p:last-child {
    margin-bottom: 0 !important;
}

.mpn-sc-grid-card__body ul {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 0 8px 0 !important;
}

.mpn-sc-grid-card__body ul li {
    font-size: 15px !important;
    color: #475569 !important;
    padding: 2px 0 !important;
}

/* Wider gap when grid contains plain cards (matches reference gap-12 = 48px) */
.mpn-sc-grid:has(.mpn-sc-grid-card--plain) {
    gap: 48px !important;
}

/* Plain variant: no background, border, or rounding */
.mpn-sc-grid-card--plain {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

.mpn-sc-grid-card--plain h5.mpn-sc-grid-card__title,
.mpn-sc-grid-card--plain .mpn-sc-grid-card__title {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 13px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.mpn-sc-grid-card--plain .mpn-sc-grid-card__body ul {
    margin: 0 !important;
}

.mpn-sc-grid-card--plain .mpn-sc-grid-card__body ul li {
    padding: 6px 0 !important;
}

/* Divider note: bold footer with top border separator */
.mpn-sc-divider-note {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--mpn-navy) !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 24px !important;
    margin-top: 32px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- [mpn_step_list] + [mpn_step] ---- */
.mpn-sc-step-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-step-list>div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mpn-sc-step-list>p,
.mpn-sc-step-list>br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    height: 0 !important;
}

.mpn-sc-step {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding: 16px !important;
    margin: 0 !important;
    background-color: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    transition: box-shadow 0.2s ease !important;
}

.mpn-sc-step:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.mpn-sc-step__num {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    color: #627d98 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #d9e2ec !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-step__content {
    flex: 1 !important;
}

.mpn-sc-step__content h1,
.mpn-sc-step__content h2,
.mpn-sc-step__content h3,
.mpn-sc-step__content h4,
.mpn-sc-step__content h5,
.mpn-sc-step__content h6 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none !important;
}

.mpn-sc-step__content p {
    margin: 0 !important;
    padding: 0 !important;
}

.mpn-sc-step .mpn-sc-step__content h4,
.mpn-sc-step__content h4,
.mpn-sc-step__title {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-family: var(--mpn-font-body) !important;
    border: none !important;
}

.mpn-sc-step__content p,
.mpn-sc-step__desc {
    font-size: 15px !important;
    color: #64748b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- [mpn_formula] ---- */
.mpn-sc-formula {
    font-family: var(--mpn-font-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background-color: #f8fafc !important;
    padding: 8px !important;
    border-radius: 4px !important;
    border: 1px solid #f1f5f9 !important;
    display: inline-block !important;
    transition: background-color 0.2s ease !important;
}

.mpn-sc-term:hover .mpn-sc-formula {
    background-color: #fff !important;
}

/* ---- Glossary term headings (h4 in section body) ---- */
.mpn-guide__section-body h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 32px 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-guide__section-body h4:first-child {
    margin-top: 0 !important;
}

/* ---- [mpn_warning_box] ---- */
.mpn-sc-warning-box {
    background-color: #fef2f2 !important;
    padding: 24px !important;
    border-radius: 12px !important;
    border: 1px solid #fee2e2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-warning-box__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mpn-sc-warning-box__item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    color: #334155 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-sc-warning-box__item+.mpn-sc-warning-box__item {
    margin-top: 8px !important;
}

.mpn-sc-warning-box__dot {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    border-radius: 50% !important;
    background-color: #f87171 !important;
}

/* ---- [mpn_highlight] ---- */
.mpn-sc-highlight {
    font-weight: 500 !important;
    font-size: 15px !important;
    color: var(--mpn-navy) !important;
    border-left: 4px solid var(--mpn-gold) !important;
    padding-left: 16px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin: 0 !important;
    font-family: var(--mpn-font-body) !important;
}

/* Highlight inside check-card: inline badge variant (matches reference design) */
.mpn-sc-check-card__body .mpn-sc-highlight {
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--mpn-slate-dark) !important;
    background-color: var(--mpn-grey-lightest) !important;
    border-left: none !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-top: 4px !important;
    line-height: 1.5 !important;
}


/* ==========================================================================
   ARTICLES GRID WIDGET
   --------------------------------------------------------------------------
   3-column card grid for the "Free Articles" section on the Learn page
   and the /articles archive. Each card shows a featured image with a
   category tag overlay, date/read-time meta, title, excerpt, and a
   "Read Article" call-to-action.

   Reference: pages/LearnPage.tsx (section 6) & pages/ArticlesPage.tsx
   ========================================================================== */

.mpn-articles-grid {
    padding: 96px 0 !important;
    background: var(--mpn-white) !important;
    border-top: 1px solid #f1f5f9 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-articles-grid *,
.mpn-articles-grid *::before,
.mpn-articles-grid *::after {
    box-sizing: border-box;
}

.mpn-articles-grid__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Header row ---- */
.mpn-articles-grid__header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 48px !important;
}

.mpn-articles-grid__header-text {
    flex: 1;
}

.mpn-articles-grid__title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-articles-grid__description {
    color: var(--mpn-slate) !important;
    font-size: 16px !important;
    margin: 0 !important;
    max-width: 560px !important;
    line-height: 1.6 !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-articles-grid__view-all,
a.mpn-articles-grid__view-all:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-articles-grid__view-all:hover {
    color: var(--mpn-gold) !important;
}

.mpn-articles-grid__view-all svg {
    width: 16px !important;
    height: 16px !important;
}

.mpn-articles-grid__view-all--desktop {
    display: none !important;
}

.mpn-articles-grid__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

a.mpn-articles-grid__card-link,
a.mpn-articles-grid__card-link:visited {
    display: block !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.mpn-articles-grid__card {
    background: var(--mpn-grey-lightest) !important;
    border-radius: 16px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

a.mpn-articles-grid__card-link:hover .mpn-articles-grid__card {
    border-color: var(--mpn-slate-lightest) !important;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12) !important;
}

.mpn-articles-grid__card-image-wrap {
    position: relative !important;
    height: 256px !important;
    overflow: hidden !important;
    background: var(--mpn-grey-lightest) !important;
}

.mpn-articles-grid__card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

a.mpn-articles-grid__card-link:hover .mpn-articles-grid__card-image {
    transform: scale(1.02) !important;
}

.mpn-articles-grid__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(16, 42, 67, 0.05) !important;
    transition: background 0.3s ease !important;
}

a.mpn-articles-grid__card-link:hover .mpn-articles-grid__card-overlay {
    background: transparent !important;
}

.mpn-articles-grid__card-tag {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2 !important;
}

.mpn-articles-grid__card-tag-label {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--mpn-navy) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-articles-grid__card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.mpn-articles-grid__card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-articles-grid__card-meta svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

.mpn-articles-grid__card-meta-sep {
    margin: 0 4px !important;
}

.mpn-articles-grid__card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 12px 0 !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.3 !important;
}

a.mpn-articles-grid__card-link:hover .mpn-articles-grid__card-title {
    color: var(--mpn-navy-light) !important;
}

.mpn-articles-grid__card-excerpt {
    color: var(--mpn-slate) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    flex-grow: 1 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-articles-grid__card-footer {
    padding-top: 16px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
    margin-top: auto !important;
}

.mpn-articles-grid__card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    transition: gap 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-articles-grid__card-cta svg {
    color: var(--mpn-gold) !important;
    width: 16px !important;
    height: 16px !important;
}

a.mpn-articles-grid__card-link:hover .mpn-articles-grid__card-cta {
    gap: 12px !important;
}

.mpn-articles-grid__empty {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-articles-grid__view-all-mobile {
    margin-top: 48px !important;
    text-align: center !important;
}

@media (min-width: 768px) {
    .mpn-articles-grid__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mpn-articles-grid__view-all--desktop {
        display: inline-flex !important;
    }

    .mpn-articles-grid__view-all-mobile {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .mpn-articles-grid__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .mpn-articles-grid__title {
        font-size: 42px !important;
    }
}

@media (max-width: 767px) {
    .mpn-articles-grid {
        padding: 48px 0 !important;
    }

    .mpn-articles-grid__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .mpn-articles-grid__title {
        font-size: 28px !important;
    }

    .mpn-articles-grid__card-image-wrap {
        height: 200px !important;
    }
}

/* ==========================================================================
   FREE ARTICLES WIDGET
   --------------------------------------------------------------------------
   Standalone grid of article cards for the dedicated /articles archive
   page. Same card design as .mpn-articles-grid (category tag, meta row,
   excerpt, CTA) but without the section header or "View All" link.
   ========================================================================== */

.mpn-free-articles {
    padding: 80px 0 !important;
    background: var(--mpn-white) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-free-articles *,
.mpn-free-articles *::before,
.mpn-free-articles *::after {
    box-sizing: border-box;
}

.mpn-free-articles__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

.mpn-free-articles__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

a.mpn-free-articles__card-link,
a.mpn-free-articles__card-link:visited {
    display: block !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.mpn-free-articles__card {
    background: var(--mpn-grey-lightest) !important;
    border-radius: 16px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

a.mpn-free-articles__card-link:hover .mpn-free-articles__card {
    border-color: var(--mpn-slate-lightest) !important;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12) !important;
}

.mpn-free-articles__card-image-wrap {
    position: relative !important;
    height: 256px !important;
    overflow: hidden !important;
    background: var(--mpn-grey-lightest) !important;
}

.mpn-free-articles__card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

a.mpn-free-articles__card-link:hover .mpn-free-articles__card-image {
    transform: scale(1.02) !important;
}

.mpn-free-articles__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(16, 42, 67, 0.05) !important;
    transition: background 0.3s ease !important;
}

a.mpn-free-articles__card-link:hover .mpn-free-articles__card-overlay {
    background: transparent !important;
}

.mpn-free-articles__card-tag {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2 !important;
}

.mpn-free-articles__card-tag-label {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--mpn-navy) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-free-articles__card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.mpn-free-articles__card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-free-articles__card-meta svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

.mpn-free-articles__card-meta-sep {
    margin: 0 4px !important;
}

.mpn-free-articles__card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 12px 0 !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.3 !important;
}

a.mpn-free-articles__card-link:hover .mpn-free-articles__card-title {
    color: var(--mpn-navy-light) !important;
}

.mpn-free-articles__card-excerpt {
    color: var(--mpn-slate) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    flex-grow: 1 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-free-articles__card-footer {
    padding-top: 16px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
    margin-top: auto !important;
}

.mpn-free-articles__card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    transition: gap 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-free-articles__card-cta svg {
    color: var(--mpn-gold) !important;
    width: 16px !important;
    height: 16px !important;
}

a.mpn-free-articles__card-link:hover .mpn-free-articles__card-cta {
    gap: 12px !important;
}

.mpn-free-articles__empty {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

@media (min-width: 768px) {
    .mpn-free-articles__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .mpn-free-articles__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .mpn-free-articles {
        padding: 48px 0 !important;
    }

    .mpn-free-articles__card-image-wrap {
        height: 200px !important;
    }
}

/* ==========================================================================
   ARTICLE HERO WIDGET
   --------------------------------------------------------------------------
   Side-by-side page header for individual Free Article pages. Renders
   breadcrumbs, title, and description on the left with a hero image
   displayed as a rotated card that overlaps the content section below
   via a negative bottom margin.

   Reference: src/components/shared/PageHeader.tsx (article branch)
   ========================================================================== */

/* ---- Outer wrapper ---- */
.mpn-article-hero {
    background-color: rgba(240, 244, 248, 0.5) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: relative !important;
    z-index: 20 !important;
    padding: 48px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article-hero *,
.mpn-article-hero *::before,
.mpn-article-hero *::after {
    box-sizing: border-box;
}

/* ---- Container ---- */
.mpn-article-hero__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ---- Breadcrumbs ---- */
.mpn-article-hero__breadcrumbs {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mpn-slate) !important;
    margin-bottom: 32px !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-article-hero__crumb-link,
a.mpn-article-hero__crumb-link:visited {
    color: var(--mpn-slate) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-article-hero__crumb-link:hover {
    color: var(--mpn-navy) !important;
}

.mpn-article-hero__crumb-sep {
    margin: 0 12px !important;
    color: var(--mpn-slate-lighter) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article-hero__crumb-current {
    color: var(--mpn-navy) !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Two-column row ---- */
.mpn-article-hero__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 48px !important;
}

/* ---- Left: Text column ---- */
.mpn-article-hero__text {
    width: 100% !important;
}

.mpn-article-hero__title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article-hero__description {
    font-size: 18px !important;
    font-weight: 300 !important;
    color: var(--mpn-slate) !important;
    line-height: 1.625 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 576px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Right: Image column ---- */
.mpn-article-hero__image-col {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.mpn-article-hero__image-outer {
    position: relative !important;
    width: 100% !important;
    max-width: 512px !important;
    aspect-ratio: 3 / 2 !important;
    margin-bottom: -64px !important;
}

.mpn-article-hero__image-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: 4px solid var(--mpn-white) !important;
    transform: rotate(1deg) !important;
    transition: all 0.5s ease-out !important;
    will-change: transform !important;
}

.mpn-article-hero__image-card:hover {
    transform: rotate(0deg) !important;
}

.mpn-article-hero__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ---- Tablet (768px) ---- */
@media (min-width: 768px) {
    .mpn-article-hero {
        padding: 80px 0 !important;
    }

    .mpn-article-hero__breadcrumbs {
        margin-bottom: 48px !important;
    }

    .mpn-article-hero__image-outer {
        margin-bottom: -96px !important;
    }
}

/* ---- Desktop (1024px) ---- */
@media (min-width: 1024px) {
    .mpn-article-hero__row {
        flex-direction: row !important;
        gap: 80px !important;
    }

    .mpn-article-hero__text {
        width: 50% !important;
    }

    .mpn-article-hero__title {
        font-size: 48px !important;
    }

    .mpn-article-hero__image-col {
        width: 50% !important;
        justify-content: flex-end !important;
    }

    .mpn-article-hero__image-outer {
        margin-bottom: -96px !important;
    }
}

/* ---- Small mobile (max 767px) ---- */
@media (max-width: 767px) {
    .mpn-article-hero__title {
        font-size: 28px !important;
    }

    .mpn-article-hero__description {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   SINGLE ARTICLE WIDGET
   --------------------------------------------------------------------------
   Full single-article layout for individual Free Article pages. Contains
   a two-column layout with the main content (meta bar, intro, numbered
   sections, summary, newsletter, bottom CTA) and a sticky sidebar with
   a Table of Contents and Gravity Forms newsletter widget.

   Reference: src/components/articles/UKMarket2026Article.tsx
   ========================================================================== */

/* ---- Outer section ---- */
.mpn-article {
    padding: 48px 0 !important;
    background-color: var(--mpn-white) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article *,
.mpn-article *::before,
.mpn-article *::after {
    box-sizing: border-box;
}

/* ---- Container ---- */
.mpn-article__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Two-column layout ---- */
.mpn-article__layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
}

/* ---- Main content column ---- */
.mpn-article__main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

/* ---- Empty state ---- */
.mpn-article__empty {
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ==========================================================================
   META BAR
   ========================================================================== */
.mpn-article__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 14px !important;
    color: var(--mpn-slate) !important;
    margin-bottom: 32px !important;
    border-bottom: 1px solid var(--mpn-grey-light) !important;
    padding-bottom: 32px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__meta-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: var(--mpn-grey-lightest) !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__meta-date svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

.mpn-article__meta-category {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: var(--mpn-grey-lightest) !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    color: var(--mpn-slate-dark) !important;
    font-weight: 500 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ==========================================================================
   INTRO SECTION
   ========================================================================== */
.mpn-article__intro {
    margin-bottom: 48px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__intro h2 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__intro p {
    font-size: 18px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__intro p:last-child {
    margin-bottom: 0 !important;
}

.mpn-article__intro strong {
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   MOBILE TABLE OF CONTENTS
   ========================================================================== */
.mpn-article__mobile-toc {
    margin-bottom: 48px !important;
    background-color: var(--mpn-grey-lightest) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__toc-label {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__toc-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

a.mpn-article__toc-item,
a.mpn-article__toc-item:visited {
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
    font-size: 14px !important;
    color: var(--mpn-slate-dark) !important;
    padding: 4px 0 8px 0 !important;
    border-bottom: 1px solid var(--mpn-grey-light) !important;
    text-decoration: none !important;
    font-family: var(--mpn-font-body) !important;
    transition: color 0.2s ease !important;
}

a.mpn-article__toc-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

a.mpn-article__toc-item:hover {
    color: var(--mpn-navy) !important;
}

.mpn-article__toc-num {
    color: var(--mpn-gold) !important;
    font-weight: 700 !important;
    margin-right: 12px !important;
    font-size: 12px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */
.mpn-article__sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 64px !important;
}

.mpn-article__section {
    scroll-margin-top: 128px !important;
}

.mpn-article__section-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__section-body {
    font-size: 18px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Prose defaults inside section body ---- */
.mpn-article__section-body p {
    margin: 0 0 16px 0 !important;
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__section-body p:last-child {
    margin-bottom: 0 !important;
}

.mpn-article__section-body strong {
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
}

.mpn-article__section-body h3,
.mpn-article__section-body h4 {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 18px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__section-body h5 {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 18px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__section-body ul {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 0 16px 0 !important;
}

.mpn-article__section-body ul li {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    margin-bottom: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__section-body ol {
    list-style: decimal !important;
    padding-left: 20px !important;
    margin: 0 0 16px 0 !important;
}

.mpn-article__section-body ol li {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    margin-bottom: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ==========================================================================
   BODY FIELD CONTENT (single wysiwyg with H2-derived TOC)
   --------------------------------------------------------------------------
   Used when the article is written in the Article Content body field
   rather than the legacy repeater. H2 headings receive anchor IDs and
   optional number badges via the PHP parser.
   ========================================================================== */
.mpn-article__body {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__body h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 64px 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
    scroll-margin-top: 128px !important;
}

.mpn-article__body h2:first-child {
    margin-top: 0 !important;
}

.mpn-article__body p {
    margin: 0 0 16px 0 !important;
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__body p:last-child {
    margin-bottom: 0 !important;
}

.mpn-article__body strong {
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
}

.mpn-article__body h3,
.mpn-article__body h4 {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 18px !important;
    margin: 32px 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__body h5 {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    font-size: 18px !important;
    margin: 24px 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__body ul {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 0 16px 0 !important;
}

.mpn-article__body ul li {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    margin-bottom: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__body ol {
    list-style: decimal !important;
    padding-left: 20px !important;
    margin: 0 0 16px 0 !important;
}

.mpn-article__body ol li {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    margin-bottom: 4px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__body a {
    color: var(--mpn-gold) !important;
    text-decoration: underline !important;
}

.mpn-article__body a:hover {
    color: #a68023 !important;
}

.mpn-article__body blockquote {
    border-left: 4px solid var(--mpn-gold) !important;
    margin: 24px 0 !important;
    padding: 16px 24px !important;
    background: var(--mpn-grey-lightest) !important;
    border-radius: 0 8px 8px 0 !important;
    font-style: italic !important;
    color: var(--mpn-slate-dark) !important;
}

.mpn-article__body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin: 24px 0 !important;
}

/* ==========================================================================
   SECTION NUMBERING (shared by body field and repeater modes)
   --------------------------------------------------------------------------
   The number badge appears beside section headings and in the TOC when
   the per-post "Show Section Numbers" toggle is enabled.
   ========================================================================== */

/* Number badge inside H2 headings (body field mode, injected by PHP) */
.mpn-article__body .mpn-article__section-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--mpn-grey-lightest) !important;
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    font-style: normal !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
    margin-right: 14px !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -2px !important;
}

/* Section heading row (repeater mode with numbers) */
.mpn-article__section-heading {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

/* Number badge beside H2 (repeater mode) */
.mpn-article__section-heading .mpn-article__section-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--mpn-grey-lightest) !important;
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

/* TOC number badge (mobile TOC) */
.mpn-article__toc-num {
    color: var(--mpn-gold) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    margin-right: 12px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   SUMMARY / FINAL THOUGHT
   ========================================================================== */
.mpn-article__summary {
    margin-top: 64px !important;
    padding-top: 32px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__summary-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__summary-body {
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__summary-body p {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    line-height: 1.625 !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__summary-body p:last-child {
    margin-bottom: 0 !important;
}

.mpn-article__summary-body strong {
    color: var(--mpn-navy) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* ==========================================================================
   MOBILE NEWSLETTER - REMOVED
   --------------------------------------------------------------------------
   The duplicate mobile form container has been removed from the PHP.
   A single Gravity Forms instance now lives in the sidebar and is
   repositioned via CSS on mobile (see responsive rules below).
   ========================================================================== */

/* ==========================================================================
   BOTTOM CTA
   ========================================================================== */
.mpn-article__cta-wrap {
    margin-top: 80px !important;
    padding-top: 40px !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
}

.mpn-article__cta {
    background: linear-gradient(to bottom right, var(--mpn-grey-lightest), var(--mpn-white)) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    text-align: center !important;
    border: 1px solid var(--mpn-grey-light) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.mpn-article__cta-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__cta-text {
    font-size: 16px !important;
    color: var(--mpn-slate-dark) !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    max-width: 576px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-article__cta-button,
a.mpn-article__cta-button:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: var(--mpn-navy) !important;
    color: var(--mpn-white) !important;
    padding: 16px 32px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2) !important;
    transition: all 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-article__cta-button:hover {
    background-color: var(--mpn-navy-light) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3) !important;
}

a.mpn-article__cta-button svg {
    width: 16px !important;
    height: 16px !important;
}

/* ==========================================================================
   SIDEBAR (Desktop)
   ========================================================================== */
.mpn-article__sidebar {
    display: block !important;
    width: 100% !important;
    margin-top: 64px !important;
}

.mpn-article__sidebar-sticky {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

/* On mobile the sidebar TOC is hidden (the mobile TOC inside <article>
   serves that role). Only the newsletter form is shown. */
.mpn-article__sidebar-toc {
    display: none !important;
}

/* ---- Sidebar TOC ---- */
.mpn-article__sidebar-toc {
    background-color: var(--mpn-grey-lightest) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__sidebar-toc-label {
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 8px 0 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__sidebar-toc-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

a.mpn-article__sidebar-toc-link,
a.mpn-article__sidebar-toc-link:visited {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 14px !important;
    color: var(--mpn-slate-dark) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-article__sidebar-toc-link:hover {
    color: var(--mpn-navy) !important;
    background-color: var(--mpn-white) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* ---- Sidebar Newsletter ---- */
.mpn-article__sidebar-newsletter {
    background-color: var(--mpn-navy) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    color: var(--mpn-white) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__sidebar-newsletter-glow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
    width: 128px !important;
    height: 128px !important;
    background-color: rgba(197, 157, 50, 0.2) !important;
    border-radius: 9999px !important;
    filter: blur(40px) !important;
    pointer-events: none !important;
}

.mpn-article__sidebar-newsletter-inner {
    position: relative !important;
    z-index: 10 !important;
}

.mpn-article__sidebar-newsletter-title {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: var(--mpn-white) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.025em !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__sidebar-newsletter-text {
    color: rgba(188, 204, 220, 0.8) !important;
    font-size: 14px !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1.625 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__sidebar-newsletter-fine {
    font-size: 10px !important;
    color: var(--mpn-slate-lighter) !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
    opacity: 0.6 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ==========================================================================
   SINGLE ARTICLE - RESPONSIVE
   ========================================================================== */

/* ---- Tablet (768px) ---- */
@media (min-width: 768px) {
    .mpn-article {
        padding: 80px 0 !important;
    }

    .mpn-article__section-title {
        font-size: 30px !important;
    }

    .mpn-article__cta {
        padding: 48px !important;
    }
}

/* ---- Desktop (1024px) ---- */
@media (min-width: 1024px) {
    .mpn-article__layout {
        flex-direction: row !important;
        gap: 80px !important;
    }

    .mpn-article__sidebar {
        width: 33.333% !important;
        min-width: 320px !important;
        margin-top: 0 !important;
    }

    .mpn-article__sidebar-sticky {
        position: sticky !important;
        top: 112px !important;
    }

    .mpn-article__sidebar-toc {
        display: block !important;
    }

    .mpn-article__mobile-toc {
        display: none !important;
    }
}

/* ---- Small mobile (max 767px) ---- */
@media (max-width: 767px) {
    .mpn-article__intro h2 {
        font-size: 24px !important;
    }

    .mpn-article__section-title {
        font-size: 22px !important;
    }

    .mpn-article__cta-heading {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   RELATED ARTICLES WIDGET (Continue Reading)
   --------------------------------------------------------------------------
   Randomised 3-column card grid shown at the bottom of individual Free
   Article pages. Cards are visually identical to the Articles Grid but
   rendered on a tinted background with slightly reduced image heights,
   smaller title text, and a 3-line excerpt clamp.

   Reference: src/components/shared/RelatedArticles.tsx
   ========================================================================== */

/* ---- Outer section ---- */
.mpn-related-articles {
    padding: 80px 0 !important;
    background-color: rgba(240, 244, 248, 0.3) !important;
    border-top: 1px solid var(--mpn-grey-light) !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-related-articles *,
.mpn-related-articles *::before,
.mpn-related-articles *::after {
    box-sizing: border-box;
}

/* ---- Container ---- */
.mpn-related-articles__container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---- Header row ---- */
.mpn-related-articles__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 48px !important;
}

.mpn-related-articles__header-text {
    flex: 1 !important;
}

.mpn-related-articles__title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-related-articles__description {
    color: var(--mpn-slate) !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- View All link ---- */
a.mpn-related-articles__view-all,
a.mpn-related-articles__view-all:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mpn-navy) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
}

a.mpn-related-articles__view-all:hover {
    color: var(--mpn-gold) !important;
}

.mpn-related-articles__view-all svg {
    width: 16px !important;
    height: 16px !important;
}

.mpn-related-articles__view-all--desktop {
    display: none !important;
}

/* ---- Grid ---- */
.mpn-related-articles__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

/* ---- Card link wrapper ---- */
a.mpn-related-articles__card-link,
a.mpn-related-articles__card-link:visited {
    display: block !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* ---- Card ---- */
.mpn-related-articles__card {
    background: var(--mpn-white) !important;
    border-radius: 16px !important;
    border: 1px solid var(--mpn-grey-light) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

a.mpn-related-articles__card-link:hover .mpn-related-articles__card {
    border-color: var(--mpn-slate-lightest) !important;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12) !important;
}

/* ---- Card image ---- */
.mpn-related-articles__card-image-wrap {
    position: relative !important;
    height: 192px !important;
    overflow: hidden !important;
    background: var(--mpn-grey-lightest) !important;
}

.mpn-related-articles__card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

a.mpn-related-articles__card-link:hover .mpn-related-articles__card-image {
    transform: scale(1.02) !important;
}

.mpn-related-articles__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(16, 42, 67, 0.05) !important;
    transition: background 0.3s ease !important;
}

a.mpn-related-articles__card-link:hover .mpn-related-articles__card-overlay {
    background: transparent !important;
}

/* ---- Card tag ---- */
.mpn-related-articles__card-tag {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2 !important;
}

.mpn-related-articles__card-tag-label {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--mpn-navy) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Card body ---- */
.mpn-related-articles__card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.mpn-related-articles__card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-related-articles__card-meta svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

.mpn-related-articles__card-meta-sep {
    margin: 0 4px !important;
}

.mpn-related-articles__card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mpn-navy) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.3 !important;
}

a.mpn-related-articles__card-link:hover .mpn-related-articles__card-title {
    color: var(--mpn-navy-light) !important;
}

.mpn-related-articles__card-excerpt {
    color: var(--mpn-slate) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    flex-grow: 1 !important;
    font-family: var(--mpn-font-body) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ---- Card footer ---- */
.mpn-related-articles__card-footer {
    padding-top: 16px !important;
    border-top: 1px solid var(--mpn-grey-lightest) !important;
    margin-top: auto !important;
}

.mpn-related-articles__card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: var(--mpn-navy) !important;
    transition: gap 0.3s ease !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-related-articles__card-cta svg {
    color: var(--mpn-gold) !important;
    width: 12px !important;
    height: 12px !important;
    transition: transform 0.3s ease !important;
}

a.mpn-related-articles__card-link:hover .mpn-related-articles__card-cta {
    gap: 10px !important;
}

a.mpn-related-articles__card-link:hover .mpn-related-articles__card-cta svg {
    transform: translateX(4px) !important;
}

/* ---- Empty state ---- */
.mpn-related-articles__empty {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    color: #92400e !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
}

/* ---- Mobile View All ---- */
.mpn-related-articles__view-all-mobile {
    margin-top: 32px !important;
    text-align: center !important;
}

/* ==========================================================================
   RELATED ARTICLES - RESPONSIVE
   ========================================================================== */

/* ---- Tablet (768px) ---- */
@media (min-width: 768px) {
    .mpn-related-articles__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mpn-related-articles__view-all--desktop {
        display: inline-flex !important;
    }

    .mpn-related-articles__view-all-mobile {
        display: none !important;
    }

    .mpn-related-articles__title {
        font-size: 30px !important;
    }
}

/* ---- Desktop (1024px) ---- */
@media (min-width: 1024px) {
    .mpn-related-articles__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ---- Small mobile (max 767px) ---- */
@media (max-width: 767px) {
    .mpn-related-articles {
        padding: 48px 0 !important;
    }

    .mpn-related-articles__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .mpn-related-articles__title {
        font-size: 22px !important;
    }

    .mpn-related-articles__card-image-wrap {
        height: 160px !important;
    }
}

/* ==========================================================================
   GRAVITY FORMS OVERRIDES - ARTICLE NEWSLETTER CONTAINERS
   --------------------------------------------------------------------------
   Scoped to the dark-background newsletter boxes inside the Single Article
   widget. Both the mobile container (.mpn-article__newsletter-box) and the
   desktop sidebar container (.mpn-article__sidebar-newsletter-inner) share
   the same form styling.

   Adapted from the battle-tested Single Guide GF overrides. Key features:
     - Light labels on a dark background (slate-lightest)
     - Borderless white inputs with subtle shadow, gold focus ring
     - Gold accent submit button
     - Dark-themed checkbox with gold checked state + SVG tick
     - Honeypot and hidden field suppression

   Reference: src/components/articles/UKMarket2026Article.tsx (sidebar form)
   ========================================================================== */

.mpn-article__sidebar-newsletter-inner .gform_wrapper,
.mpn-article__newsletter-box .gform_wrapper {
    --gf-ctrl-border-color: transparent !important;
    --gf-ctrl-border-color-hover: transparent !important;
    --gf-ctrl-border-color-focus: var(--mpn-gold) !important;
    --gf-ctrl-border-radius: 8px !important;
    --gf-ctrl-bg-color: var(--mpn-white) !important;
    --gf-ctrl-bg-color-hover: var(--mpn-white) !important;
    --gf-ctrl-size: 14px !important;
    --gf-ctrl-label-color-primary: var(--mpn-slate-lightest) !important;
    --gf-ctrl-label-color-secondary: var(--mpn-slate-lightest) !important;
    --gf-ctrl-choice-size: 16px !important;
    --gf-ctrl-btn-bg-color-primary: var(--mpn-gold) !important;
    --gf-ctrl-btn-bg-color-primary-hover: #a68023 !important;
    --gf-ctrl-btn-color-primary: var(--mpn-white) !important;
    --gf-color-primary: var(--mpn-gold) !important;
    --gf-local-bg-color: transparent !important;
    --gf-color-out-ctrl-label-primary: var(--mpn-slate-lightest) !important;
    --gf-color-out-ctrl-label-secondary: var(--mpn-slate-lightest) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--mpn-font-body) !important;
}

.mpn-article__sidebar-newsletter-inner .gform_body,
.mpn-article__newsletter-box .gform_body {
    padding: 0 !important;
}

/* ---- Kill ALL fieldset borders (GF 2.5+ grouped-field wrappers) ---- */
.mpn-article__sidebar-newsletter-inner .gform_wrapper fieldset,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield fieldset,
.mpn-article__sidebar-newsletter-inner .gform_wrapper fieldset.gfield,
.mpn-article__sidebar-newsletter-inner fieldset,
.mpn-article__newsletter-box .gform_wrapper fieldset,
.mpn-article__newsletter-box .gform_wrapper .gfield fieldset,
.mpn-article__newsletter-box .gform_wrapper fieldset.gfield,
.mpn-article__newsletter-box fieldset {
    border: 0 none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ---- Re-style <legend> as a block label (Name, Email) ----
   GF 2.5+ uses <legend class="gfield_label"> for grouped fields. */
.mpn-article__sidebar-newsletter-inner legend,
.mpn-article__sidebar-newsletter-inner legend.gfield_label,
.mpn-article__sidebar-newsletter-inner .gform_wrapper legend,
.mpn-article__newsletter-box legend,
.mpn-article__newsletter-box legend.gfield_label,
.mpn-article__newsletter-box .gform_wrapper legend {
    display: block !important;
    float: none !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--mpn-slate-lightest) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.4 !important;
    border: none !important;
    background: transparent !important;
}

/* ---- Hide legend ONLY on consent/checkbox fields ----
   The inline checkbox label serves as the visible label. */
.mpn-article__sidebar-newsletter-inner .gfield--type-consent legend,
.mpn-article__sidebar-newsletter-inner .gfield--type-consent legend.gfield_label,
.mpn-article__sidebar-newsletter-inner .gfield--type-consent>.gfield_label,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox legend,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox legend.gfield_label,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox>.gfield_label,
.mpn-article__newsletter-box .gfield--type-consent legend,
.mpn-article__newsletter-box .gfield--type-consent legend.gfield_label,
.mpn-article__newsletter-box .gfield--type-consent>.gfield_label,
.mpn-article__newsletter-box .gfield--type-checkbox legend,
.mpn-article__newsletter-box .gfield--type-checkbox legend.gfield_label,
.mpn-article__newsletter-box .gfield--type-checkbox>.gfield_label {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Remove default GF list styling */
.mpn-article__sidebar-newsletter-inner .gform_fields,
.mpn-article__newsletter-box .gform_fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-row-gap: 16px !important;
    row-gap: 16px !important;
}

/* Individual field containers */
.mpn-article__sidebar-newsletter-inner .gfield,
.mpn-article__newsletter-box .gfield {
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Field labels (non-legend <label> elements) ---- */
.mpn-article__sidebar-newsletter-inner .gfield_label,
.mpn-article__sidebar-newsletter-inner .gform-field-label,
.mpn-article__newsletter-box .gfield_label,
.mpn-article__newsletter-box .gform-field-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--mpn-slate-lightest) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: var(--mpn-font-body) !important;
    line-height: 1.4 !important;
}

/* ---- Required indicator ----
   GF 2.5+ renders: <span class="gfield_required gfield_required_asterisk">(Required)</span>
   or <span class="gfield_required"><span class="gfield_required_text">(Required)</span></span>
   We hide all inner text and inject a clean red asterisk via ::after. */
.mpn-article__sidebar-newsletter-inner .gfield_required,
.mpn-article__newsletter-box .gfield_required {
    color: #f87171 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

.mpn-article__sidebar-newsletter-inner .gfield_required *,
.mpn-article__newsletter-box .gfield_required * {
    display: none !important;
}

.mpn-article__sidebar-newsletter-inner .gfield_required::after,
.mpn-article__newsletter-box .gfield_required::after {
    content: '*' !important;
    display: inline !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: #f87171 !important;
    font-weight: 700 !important;
    vertical-align: baseline !important;
    margin-left: 2px !important;
}

/* ---- Sub-labels ("First", "Last" beneath name inputs) ---- */
.mpn-article__sidebar-newsletter-inner .ginput_container_name label,
.mpn-article__newsletter-box .ginput_container_name label {
    display: none !important;
}

/* ---- Name field: 2-column grid ---- */
.mpn-article__sidebar-newsletter-inner .ginput_container_name,
.mpn-article__newsletter-box .ginput_container_name {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* Name sub-field wrappers */
.mpn-article__sidebar-newsletter-inner .ginput_container_name>span,
.mpn-article__newsletter-box .ginput_container_name>span {
    display: block !important;
}

/* ---- All text / email inputs ---- */
.mpn-article__sidebar-newsletter-inner .gfield input[type="text"],
.mpn-article__sidebar-newsletter-inner .gfield input[type="email"],
.mpn-article__sidebar-newsletter-inner .gfield input[type="tel"],
.mpn-article__sidebar-newsletter-inner .gfield textarea,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield input[type="text"],
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield input[type="email"],
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield input[type="tel"],
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield textarea,
.mpn-article__newsletter-box .gfield input[type="text"],
.mpn-article__newsletter-box .gfield input[type="email"],
.mpn-article__newsletter-box .gfield input[type="tel"],
.mpn-article__newsletter-box .gfield textarea,
.mpn-article__newsletter-box .gform_wrapper .gfield input[type="text"],
.mpn-article__newsletter-box .gform_wrapper .gfield input[type="email"],
.mpn-article__newsletter-box .gform_wrapper .gfield input[type="tel"],
.mpn-article__newsletter-box .gform_wrapper .gfield textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: none !important;
    background: var(--mpn-white) !important;
    color: var(--mpn-navy) !important;
    font-size: 14px !important;
    font-family: var(--mpn-font-body) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
    transition: box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}

.mpn-article__sidebar-newsletter-inner .gfield input[type="text"]::placeholder,
.mpn-article__sidebar-newsletter-inner .gfield input[type="email"]::placeholder,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield input[type="text"]::placeholder,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield input[type="email"]::placeholder,
.mpn-article__newsletter-box .gfield input[type="text"]::placeholder,
.mpn-article__newsletter-box .gfield input[type="email"]::placeholder,
.mpn-article__newsletter-box .gform_wrapper .gfield input[type="text"]::placeholder,
.mpn-article__newsletter-box .gform_wrapper .gfield input[type="email"]::placeholder {
    color: #94a3b8 !important;
}

.mpn-article__sidebar-newsletter-inner .gfield input[type="text"]:focus,
.mpn-article__sidebar-newsletter-inner .gfield input[type="email"]:focus,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield input[type="text"]:focus,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield input[type="email"]:focus,
.mpn-article__newsletter-box .gfield input[type="text"]:focus,
.mpn-article__newsletter-box .gfield input[type="email"]:focus,
.mpn-article__newsletter-box .gform_wrapper .gfield input[type="text"]:focus,
.mpn-article__newsletter-box .gform_wrapper .gfield input[type="email"]:focus {
    box-shadow: 0 0 0 2px var(--mpn-gold) !important;
}

/* ---- Consent / Checkbox field layout ---- */
.mpn-article__sidebar-newsletter-inner .gfield--type-consent,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox,
.mpn-article__newsletter-box .gfield--type-consent,
.mpn-article__newsletter-box .gfield--type-checkbox {
    display: block !important;
}

.mpn-article__sidebar-newsletter-inner .ginput_container_consent,
.mpn-article__newsletter-box .ginput_container_consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* GF 2.5+ nests checkbox + label inside a .gchoice wrapper.
   Without flex on this inner div the label drops below the checkbox. */
.mpn-article__sidebar-newsletter-inner .ginput_container_consent .gchoice,
.mpn-article__sidebar-newsletter-inner .gfield--type-consent .gchoice,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox .gchoice,
.mpn-article__newsletter-box .ginput_container_consent .gchoice,
.mpn-article__newsletter-box .gfield--type-consent .gchoice,
.mpn-article__newsletter-box .gfield--type-checkbox .gchoice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Checkbox input
   GF 2.5+ orbital theme uses high-specificity selectors and pseudo-element
   overlays for checkboxes. We need .gform_wrapper in the chain to win,
   and must strip ::before / ::after from GF's theme rendering. */
.mpn-article__sidebar-newsletter-inner .ginput_container_consent input[type="checkbox"],
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox input[type="checkbox"],
.mpn-article__sidebar-newsletter-inner .gfield--type-consent input[type="checkbox"],
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-consent input[type="checkbox"],
.mpn-article__sidebar-newsletter-inner .gform_wrapper .ginput_container_consent input[type="checkbox"],
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.mpn-article__newsletter-box .ginput_container_consent input[type="checkbox"],
.mpn-article__newsletter-box .gfield--type-checkbox input[type="checkbox"],
.mpn-article__newsletter-box .gfield--type-consent input[type="checkbox"],
.mpn-article__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"],
.mpn-article__newsletter-box .gform_wrapper .ginput_container_consent input[type="checkbox"],
.mpn-article__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    border-radius: 4px !important;
    border: 1px solid #334e68 !important;
    background-color: #243b53 !important;
    background-image: none !important;
    cursor: pointer !important;
    margin: 2px 0 0 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    position: relative !important;
    outline: none !important;
    vertical-align: top !important;
}

/* Strip GF orbital theme pseudo-element overlays on the checkbox */
.mpn-article__sidebar-newsletter-inner .gfield--type-consent input[type="checkbox"]::before,
.mpn-article__sidebar-newsletter-inner .gfield--type-consent input[type="checkbox"]::after,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox input[type="checkbox"]::after,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-consent input[type="checkbox"]::before,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-consent input[type="checkbox"]::after,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::after,
.mpn-article__newsletter-box .gfield--type-consent input[type="checkbox"]::before,
.mpn-article__newsletter-box .gfield--type-consent input[type="checkbox"]::after,
.mpn-article__newsletter-box .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-article__newsletter-box .gfield--type-checkbox input[type="checkbox"]::after,
.mpn-article__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"]::before,
.mpn-article__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"]::after,
.mpn-article__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::before,
.mpn-article__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"]::after {
    display: none !important;
    content: none !important;
}

/* Checked state: gold fill with dark tick SVG */
.mpn-article__sidebar-newsletter-inner .ginput_container_consent input[type="checkbox"]:checked,
.mpn-article__sidebar-newsletter-inner .gfield--type-checkbox input[type="checkbox"]:checked,
.mpn-article__sidebar-newsletter-inner .gfield--type-consent input[type="checkbox"]:checked,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked,
.mpn-article__sidebar-newsletter-inner .gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked,
.mpn-article__newsletter-box .ginput_container_consent input[type="checkbox"]:checked,
.mpn-article__newsletter-box .gfield--type-checkbox input[type="checkbox"]:checked,
.mpn-article__newsletter-box .gfield--type-consent input[type="checkbox"]:checked,
.mpn-article__newsletter-box .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked,
.mpn-article__newsletter-box .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked,
.mpn-article__newsletter-box .gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked {
    background-color: var(--mpn-gold) !important;
    border-color: var(--mpn-gold) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102a43' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Consent inline label text */
.mpn-article__sidebar-newsletter-inner .ginput_container_consent label,
.mpn-article__sidebar-newsletter-inner .gfield_consent_label,
.mpn-article__sidebar-newsletter-inner .gfield--type-consent .gchoice label,
.mpn-article__newsletter-box .ginput_container_consent label,
.mpn-article__newsletter-box .gfield_consent_label,
.mpn-article__newsletter-box .gfield--type-consent .gchoice label {
    font-size: 12px !important;
    color: var(--mpn-slate-lightest) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    visibility: visible !important;
}

.mpn-article__sidebar-newsletter-inner .ginput_container_consent label a,
.mpn-article__sidebar-newsletter-inner .gfield_consent_label a,
.mpn-article__newsletter-box .ginput_container_consent label a,
.mpn-article__newsletter-box .gfield_consent_label a {
    color: var(--mpn-slate-lightest) !important;
    text-decoration: underline !important;
}

.mpn-article__sidebar-newsletter-inner .ginput_container_consent label a:hover,
.mpn-article__sidebar-newsletter-inner .gfield_consent_label a:hover,
.mpn-article__newsletter-box .ginput_container_consent label a:hover,
.mpn-article__newsletter-box .gfield_consent_label a:hover {
    color: var(--mpn-white) !important;
}

/* GF consent description (if present) */
.mpn-article__sidebar-newsletter-inner .gfield_consent_description,
.mpn-article__newsletter-box .gfield_consent_description {
    display: none !important;
}

/* ---- Checkbox list fields (alternative to consent) ---- */
.mpn-article__sidebar-newsletter-inner .gfield_checkbox,
.mpn-article__newsletter-box .gfield_checkbox {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mpn-article__sidebar-newsletter-inner .gfield_checkbox li,
.mpn-article__newsletter-box .gfield_checkbox li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mpn-article__sidebar-newsletter-inner .gfield_checkbox label,
.mpn-article__newsletter-box .gfield_checkbox label {
    font-size: 12px !important;
    color: var(--mpn-slate-lightest) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ---- Submit button ---- */
.mpn-article__sidebar-newsletter-inner .gform_footer,
.mpn-article__sidebar-newsletter-inner .gform_page_footer,
.mpn-article__newsletter-box .gform_footer,
.mpn-article__newsletter-box .gform_page_footer {
    padding: 16px 0 0 0 !important;
    margin: 0 !important;
    border: none !important;
}

.mpn-article__sidebar-newsletter-inner .gform_footer input[type="submit"],
.mpn-article__sidebar-newsletter-inner .gform_footer button[type="submit"],
.mpn-article__sidebar-newsletter-inner .gform_button,
.mpn-article__sidebar-newsletter-inner .gform_wrapper input[type="submit"],
.mpn-article__newsletter-box .gform_footer input[type="submit"],
.mpn-article__newsletter-box .gform_footer button[type="submit"],
.mpn-article__newsletter-box .gform_button,
.mpn-article__newsletter-box .gform_wrapper input[type="submit"] {
    width: 100% !important;
    display: block !important;
    background: var(--mpn-gold) !important;
    color: var(--mpn-white) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--mpn-font-body) !important;
    box-shadow: 0 10px 25px -5px rgba(197, 157, 50, 0.25) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: center !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.mpn-article__sidebar-newsletter-inner .gform_footer input[type="submit"]:hover,
.mpn-article__sidebar-newsletter-inner .gform_footer button[type="submit"]:hover,
.mpn-article__sidebar-newsletter-inner .gform_button:hover,
.mpn-article__sidebar-newsletter-inner .gform_wrapper input[type="submit"]:hover,
.mpn-article__newsletter-box .gform_footer input[type="submit"]:hover,
.mpn-article__newsletter-box .gform_footer button[type="submit"]:hover,
.mpn-article__newsletter-box .gform_button:hover,
.mpn-article__newsletter-box .gform_wrapper input[type="submit"]:hover {
    background: #a68023 !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 15px 30px -5px rgba(166, 128, 35, 0.4) !important;
}

.mpn-article__sidebar-newsletter-inner .gform_footer input[type="submit"]:focus-visible,
.mpn-article__sidebar-newsletter-inner .gform_footer button[type="submit"]:focus-visible,
.mpn-article__sidebar-newsletter-inner .gform_button:focus-visible,
.mpn-article__newsletter-box .gform_footer input[type="submit"]:focus-visible,
.mpn-article__newsletter-box .gform_footer button[type="submit"]:focus-visible,
.mpn-article__newsletter-box .gform_button:focus-visible {
    outline: 2px solid var(--mpn-gold) !important;
    outline-offset: 2px !important;
}

.mpn-article__sidebar-newsletter-inner .gform_footer input[type="submit"]:active,
.mpn-article__sidebar-newsletter-inner .gform_footer button[type="submit"]:active,
.mpn-article__sidebar-newsletter-inner .gform_button:active,
.mpn-article__newsletter-box .gform_footer input[type="submit"]:active,
.mpn-article__newsletter-box .gform_footer button[type="submit"]:active,
.mpn-article__newsletter-box .gform_button:active {
    background: #85631a !important;
    box-shadow: 0 5px 15px -5px rgba(133, 99, 26, 0.3) !important;
}

/* ---- GF AJAX spinner ---- */
.mpn-article__sidebar-newsletter-inner .gform_ajax_spinner,
.mpn-article__newsletter-box .gform_ajax_spinner {
    display: inline-block !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

/* ---- Validation: top-level error banner ---- */
.mpn-article__sidebar-newsletter-inner .gform_validation_errors,
.mpn-article__newsletter-box .gform_validation_errors {
    color: #fca5a5 !important;
    font-size: 12px !important;
    font-family: var(--mpn-font-body) !important;
    background: rgba(248, 113, 113, 0.15) !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 0 16px 0 !important;
    box-shadow: none !important;
}

.mpn-article__sidebar-newsletter-inner .gform_validation_errors h2,
.mpn-article__sidebar-newsletter-inner .gform_validation_errors h3,
.mpn-article__newsletter-box .gform_validation_errors h2,
.mpn-article__newsletter-box .gform_validation_errors h3 {
    font-size: 13px !important;
    color: #fca5a5 !important;
    margin: 0 0 4px 0 !important;
    font-family: var(--mpn-font-body) !important;
    font-weight: 700 !important;
}

.mpn-article__sidebar-newsletter-inner .gform_validation_errors ol,
.mpn-article__sidebar-newsletter-inner .gform_validation_errors ul,
.mpn-article__newsletter-box .gform_validation_errors ol,
.mpn-article__newsletter-box .gform_validation_errors ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
}

.mpn-article__sidebar-newsletter-inner .gform_validation_errors li,
.mpn-article__newsletter-box .gform_validation_errors li {
    color: #fca5a5 !important;
    font-size: 12px !important;
    margin: 2px 0 !important;
}

.mpn-article__sidebar-newsletter-inner .gform_validation_errors a,
.mpn-article__newsletter-box .gform_validation_errors a {
    color: #fca5a5 !important;
    text-decoration: underline !important;
}

/* Hide the GF error icon if present */
.mpn-article__sidebar-newsletter-inner .gform_validation_errors .gform-icon,
.mpn-article__sidebar-newsletter-inner .gform_validation_errors svg,
.mpn-article__newsletter-box .gform_validation_errors .gform-icon,
.mpn-article__newsletter-box .gform_validation_errors svg {
    display: none !important;
}

/* ---- Validation: per-field inline messages ---- */
.mpn-article__sidebar-newsletter-inner .validation_message,
.mpn-article__sidebar-newsletter-inner .gfield_description.validation_message,
.mpn-article__newsletter-box .validation_message,
.mpn-article__newsletter-box .gfield_description.validation_message {
    color: #fca5a5 !important;
    font-size: 11px !important;
    font-family: var(--mpn-font-body) !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    opacity: 1 !important;
}

/* Red ring around error fields */
.mpn-article__sidebar-newsletter-inner .gfield_error input[type="text"],
.mpn-article__sidebar-newsletter-inner .gfield_error input[type="email"],
.mpn-article__sidebar-newsletter-inner .gfield_error textarea,
.mpn-article__newsletter-box .gfield_error input[type="text"],
.mpn-article__newsletter-box .gfield_error input[type="email"],
.mpn-article__newsletter-box .gfield_error textarea {
    box-shadow: 0 0 0 2px #f87171 !important;
}

/* Error label colour remains the same (don't turn red) */
.mpn-article__sidebar-newsletter-inner .gfield_error .gfield_label,
.mpn-article__sidebar-newsletter-inner .gfield_error legend,
.mpn-article__newsletter-box .gfield_error .gfield_label,
.mpn-article__newsletter-box .gfield_error legend {
    color: var(--mpn-slate-lightest) !important;
}

/* ---- Confirmation message ---- */
.mpn-article__sidebar-newsletter-inner .gform_confirmation_message,
.mpn-article__newsletter-box .gform_confirmation_message {
    color: var(--mpn-white) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: var(--mpn-font-body) !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    text-align: center !important;
}

/* ---- Hide GF honeypot and hidden fields ---- */
.mpn-article__sidebar-newsletter-inner .gform_validation_container,
.mpn-article__sidebar-newsletter-inner .gfield_visibility_hidden,
.mpn-article__newsletter-box .gform_validation_container,
.mpn-article__newsletter-box .gfield_visibility_hidden {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ---- GF description helper text ---- */
.mpn-article__sidebar-newsletter-inner .gfield_description:not(.gfield_consent_description):not(.validation_message),
.mpn-article__newsletter-box .gfield_description:not(.gfield_consent_description):not(.validation_message) {
    font-size: 11px !important;
    color: var(--mpn-slate-lighter) !important;
    margin: 4px 0 0 0 !important;
    font-family: var(--mpn-font-body) !important;
    opacity: 0.7 !important;
}