/* The marketing pages' type scale and section rhythm (Pages/Index.cshtml, the Mission block in _Footer.cshtml).

   Loaded unminified from _Layout.cshtml for visitors who are not signed in, next to marketing-nav.css, so an edit here
   is live on the next build without the site.min.css step.

   Why this exists: the home page set every paragraph as Bootstrap's lead (20px) with a 2.0 line-height, so each
   section read as double-spaced and stood as tall as its heading was wide, and every heading was an h1 of the same
   size, so nothing led. Bootstrap has no step between its 16px body and its 20px lead; this adds the one the copy
   needs, and one section padding used once per section instead of stacked container, row and margin spacing
   (Ryan, 2026-10-11). */

/* body copy: a step above the body size, with the leading long copy wants */
.marketing-copy {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--bs-body-color);
}

    .marketing-copy p {
        margin-bottom: .9rem;
    }

        .marketing-copy p:last-child {
            margin-bottom: 0;
        }

/* the opening sentence of a section: Bootstrap's lead, at the body's leading rather than its 2.0 */
.marketing-lead {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.55;
}

/* one padding per section; the containers inside carry none of their own */
.marketing-section {
    padding: 3.25rem 0;
}

@media (min-width: 992px) {
    .marketing-section {
        padding: 4.5rem 0;
    }
}

/* the hero's four questions: check marks in the brand purple, the same size as the copy around them */
.marketing-checks {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .marketing-checks li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        padding: .3rem 0;
    }

        .marketing-checks li .fa-circle-check {
            color: var(--purple);
            margin-top: .3rem;
            flex: 0 0 auto;
        }

/* an illustration never outgrows its column (the 100% is what keeps it inside a phone's width; a bare 520px here
   overrode img-fluid's cap and ran off the right edge) and never grows past the size it was drawn to be read at */
.marketing-figure {
    max-width: min(100%, 520px);
    margin: 0 auto;
}

/* a numbered list of benefits (LearnMore): purple numbers, the lead-in of each item bold in purple */
.marketing-benefits {
    padding-left: 1.5rem;
    margin: 0;
}

    .marketing-benefits li {
        padding-left: .35rem;
        margin-bottom: 1rem;
    }

        .marketing-benefits li::marker {
            color: var(--purple);
            font-weight: 600;
        }

        .marketing-benefits li:last-child {
            margin-bottom: 0;
        }

/* a form beside a pitch (Pricing, Contact, Unsubscribe): a card that reads as one object */
.marketing-card {
    border: 1px solid rgba(98, 90, 255, .14);
    border-radius: 1rem;
    box-shadow: 0 22px 44px -28px rgba(47, 46, 65, .4);
}

/* long legal text (Privacy): headings a step above the copy, never display sizes, and lists indented as the copy is */
.marketing-legal h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2.25rem 0 .6rem;
}

.marketing-legal h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 1.25rem 0 .2rem;
}

.marketing-legal ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

/* a video or a carousel beside copy (LearnMore) */
.marketing-media {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 22px 44px -28px rgba(47, 46, 65, .5);
}

/* ---------------------------------------------------------------------
   The footer (_Footer.cshtml): a faintly tinted band under a rule, the brand and its contact details, three labelled
   groups of plain links, one quiet line of copyright. It was a third white section with a bordered list widget.
   --------------------------------------------------------------------- */

.marketing-footer {
    margin-top: 1rem;
    padding: 3.5rem 0 2rem;
    background-color: rgba(98, 90, 255, .04);
    border-top: 1px solid rgba(98, 90, 255, .14);
}

.marketing-footer-label {
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.marketing-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .marketing-footer-links li {
        margin-bottom: .5rem;
    }

    .marketing-footer-links a,
    .marketing-footer-contact a {
        color: var(--dark-blue-color);
        text-decoration: none;
    }

        .marketing-footer-links a:hover,
        .marketing-footer-links a:focus-visible,
        .marketing-footer-contact a:hover,
        .marketing-footer-contact a:focus-visible {
            color: var(--purple);
            text-decoration: underline;
            text-underline-offset: .2em;
        }

.marketing-footer-contact li {
    margin-bottom: .4rem;
}

.marketing-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

    /* Font Awesome swaps the <i> for an <svg> that keeps the fa-fw class; the icon takes the brand purple */
    .marketing-footer-contact .fa-fw {
        color: var(--purple);
    }

.marketing-footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(98, 90, 255, .12);
}