/* NFL Fantasy Mate - shared shell for static supporting pages. */
.support-page {
    background: linear-gradient(180deg, #ffffff 0%, #f5f6f5 70%, #eef0ef 100%);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.support-page button,
.support-page input,
.support-page select,
.support-page textarea {
    font: inherit;
}

.support-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-right: 28px;
    padding-left: 28px;
}

.support-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #ffffff;
    border-bottom: 1px solid rgba(242, 194, 48, .22);
    background: linear-gradient(118deg, #111315 0%, #191c1e 58%, #202326 100%);
}

.support-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 12%, rgba(242, 194, 48, .22), transparent 22rem),
        radial-gradient(circle at 66% 110%, rgba(242, 194, 48, .08), transparent 28rem);
}

.support-hero::after {
    content: attr(data-ghost);
    position: absolute;
    right: max(28px, calc((100vw - var(--max-width)) / 2 + 28px));
    bottom: -22px;
    z-index: -1;
    color: rgba(255, 255, 255, .035);
    font-size: clamp(4.6rem, 9vw, 9rem);
    line-height: .82;
    font-weight: 950;
    letter-spacing: -.07em;
    pointer-events: none;
    white-space: nowrap;
}

.support-hero__inner {
    position: relative;
    z-index: 1;
    min-height: 330px;
    display: flex;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 64px;
}

.support-eyebrow {
    margin: 0 0 10px;
    color: var(--fm-gold);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.support-hero h1 {
    max-width: 900px;
    margin: 0;
    color: #ffffff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.055em;
}

.support-hero__lead {
    max-width: 760px;
    margin: 22px 0 0;
    color: #c7ccce;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.62;
}

.support-section {
    padding: clamp(56px, 7vw, 92px) 0;
}

.support-section--soft {
    background: #f4f4f1;
    border-top: 1px solid rgba(17, 19, 21, .10);
    border-bottom: 1px solid rgba(17, 19, 21, .10);
}

.support-kicker {
    margin: 0 0 9px;
    color: #8b6900;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.support-section h2 {
    margin: 0;
    color: #111315;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 750;
}

.support-section p {
    color: #60666a;
    line-height: 1.75;
}

.support-page .site-footer {
    margin-top: 0;
}

.support-page .footer-links a {
    color: inherit;
    transition: color .16s ease;
}

.support-page .footer-links a:hover,
.support-page .footer-links a[aria-current="page"] {
    color: var(--fm-gold-soft);
}

@media (max-width: 720px) {
    .support-container {
        padding-right: 18px;
        padding-left: 18px;
    }

    .support-hero::after {
        right: 10px;
        bottom: -10px;
        font-size: 4.7rem;
    }

    .support-hero__inner {
        min-height: 0;
        padding-top: 46px;
        padding-bottom: 48px;
    }
}