:root {
    --mg-gold: #f7b900;
    --mg-bg: #020d18;
    --mg-panel: #061522;
    --mg-line: rgba(247,185,0,.28);
    --mg-text: #ffffff;
    --mg-muted: #c0cad2;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--mg-bg);
    color: var(--mg-text);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.mg-page-wrap {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(14,54,82,.35),
            transparent 42%
        ),
        #020d18;
}


/* CANONICAL HEADER */

.mg-benefit-header {
    height: 158px;
    position: relative;
    z-index: 10;
    border-bottom:
        1px solid rgba(247,185,0,.10);
}

.mg-benefit-header-inner {
    width:
        min(1320px, calc(100% - 70px));

    height: 158px;

    margin: auto;

    position: relative;
}

.mg-benefit-logo {
    position: absolute;
    left: 0;
    top: 10px;
}

.mg-benefit-logo img {
    display: block;
    width: 190px;
    height: auto;
}

.mg-benefit-nav {
    position: absolute;
    right: 0;
    top: 32px;

    display: flex;
    align-items: center;

    gap: 34px;
}

.mg-benefit-nav a {
    min-height: 45px;

    display: inline-flex;
    align-items: center;

    color: #fff;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;
    text-transform: uppercase;
}

.mg-benefit-nav .quote {
    height: 50px;

    padding:
        0 28px;

    background:
        var(--mg-gold);

    color:
        #07111b;
}


/* HERO */

.mg-benefit-hero {
    width:
        min(1320px, calc(100% - 70px));

    min-height:
        520px;

    margin:
        0 auto;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid var(--mg-line);
}

.mg-benefit-hero img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.mg-benefit-hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(1,11,20,.94) 0%,
            rgba(1,11,20,.74) 38%,
            rgba(1,11,20,.20) 72%,
            rgba(1,11,20,.08) 100%
        );
}

.mg-benefit-hero-copy {
    position:
        relative;

    z-index:
        2;

    width:
        min(620px, 70%);

    padding:
        90px 64px;
}

.mg-benefit-eyebrow {
    margin-bottom:
        15px;

    color:
        var(--mg-gold);

    font-size:
        14px;

    font-weight:
        900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}

.mg-benefit-hero h1 {
    margin:
        0;

    font-size:
        clamp(48px, 6vw, 78px);

    line-height:
        .97;

    text-transform:
        uppercase;
}

.mg-benefit-hero p {
    max-width:
        560px;

    margin:
        25px 0 0;

    color:
        #e1e7eb;

    font-size:
        20px;

    line-height:
        1.6;
}


/* BODY */

.mg-benefit-content {
    width:
        min(1120px, calc(100% - 70px));

    margin:
        70px auto;

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:
        55px;
}

.mg-benefit-content h2 {
    margin-top:
        0;

    font-size:
        38px;
}

.mg-benefit-content h3 {
    margin-top:
        35px;

    color:
        var(--mg-gold);

    font-size:
        21px;
}

.mg-benefit-content p,
.mg-benefit-content li {
    color:
        #d3dbe1;

    font-size:
        17px;

    line-height:
        1.75;
}

.mg-benefit-content figure {
    margin:
        0;

    border:
        1px solid var(--mg-line);

    background:
        var(--mg-panel);
}

.mg-benefit-content figure img {
    display:
        block;

    width:
        100%;

    max-height:
        520px;

    object-fit:
        cover;
}

.mg-benefit-content figcaption {
    padding:
        16px 18px;

    color:
        var(--mg-muted);

    font-size:
        13px;
}


/* CTA */

.mg-benefit-cta {
    width:
        min(1120px, calc(100% - 70px));

    margin:
        0 auto 70px;

    padding:
        40px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    border:
        1px solid var(--mg-line);

    background:
        var(--mg-panel);
}

.mg-benefit-cta strong {
    display:
        block;

    max-width:
        650px;

    font-size:
        30px;
}

.mg-benefit-cta a {
    padding:
        18px 28px;

    background:
        var(--mg-gold);

    color:
        #07111b;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


/* FOOTER — ONE ONLY */

.mg-benefit-footer {
    border-top:
        1px solid var(--mg-line);

    background:
        #03101a;
}

.mg-benefit-footer-inner {
    width:
        min(1320px, calc(100% - 70px));

    min-height:
        130px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    gap:
        30px;

    align-items:
        center;
}

.mg-benefit-footer-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}

.mg-benefit-footer-brand img {
    width:
        80px;
}

.mg-benefit-footer-brand strong {
    display:
        block;

    font-size:
        18px;
}

.mg-benefit-footer-brand span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--mg-muted);

    font-size:
        12px;
}

.mg-benefit-footer-nav {
    display:
        flex;

    gap:
        20px;
}

.mg-benefit-footer-nav a {
    color:
        #fff;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.mg-benefit-social {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        10px;
}

.mg-benefit-social strong {
    margin-right:
        8px;

    font-size:
        11px;

    text-transform:
        uppercase;
}

.mg-social-circle {
    width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,.7);

    border-radius:
        50%;

    font-size:
        13px;

    font-weight:
        900;
}

.mg-benefit-copy {
    width:
        min(1320px, calc(100% - 70px));

    margin:
        auto;

    padding:
        15px 0 22px;

    border-top:
        1px solid rgba(255,255,255,.1);

    color:
        #8a969f;

    font-size:
        11px;

    text-align:
        center;
}


/* ========================================================
   R11-R11 BENEFIT PAGE REFINEMENT
   ======================================================== */

.mg-final-benefit-page .mg-benefit-hero::after {
    background:
        linear-gradient(
            90deg,
            rgba(1,11,20,.72) 0%,
            rgba(1,11,20,.48) 38%,
            rgba(1,11,20,.12) 72%,
            rgba(1,11,20,.04) 100%
        ) !important;
}

.mg-final-benefit-page .mg-benefit-hero img {
    filter:
        brightness(1.12)
        contrast(1.02)
        saturate(1.03);
}

.mg-final-benefit-page .mg-benefit-footer-inner {
    text-align: center;
}

.mg-final-benefit-page .mg-benefit-social {
    justify-content: center;
}