/* /Components/Layout/LandingPageLayout.razor.rz.scp.css */
.landing-page[b-ovg7ci52ej] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.landing-header[b-ovg7ci52ej] {
    padding: 1.25rem 1.5rem;
    text-align: center;
}

    .landing-header .brand[b-ovg7ci52ej] {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: 'Quicksand', sans-serif;
        font-size: 1.3rem;
        color: var(--baa-ink);
        text-decoration: none;
    }

.brand-logo[b-ovg7ci52ej] {
    height: 44px;
    width: auto;
}

.landing-content[b-ovg7ci52ej] {
    flex: 1;
}

.landing-footer[b-ovg7ci52ej] {
    padding: 1.5rem;
    text-align: center;
    color: var(--baa-grey);
    font-size: 0.85rem;
    border-top: 1px solid var(--baa-border);
}

    .landing-footer a[b-ovg7ci52ej] {
        color: var(--baa-grey);
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-sm2q5p42ox] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-sm2q5p42ox] {
    flex: 1;
    background: #fff;
}

/* ---- Yellow announcement bar (matches the original Google Sites site), rotating messages ---- */
/* Container: fixed-ish height, each .announce-slide stacked absolutely inside it. Which one is
   visible is a plain class toggle (.is-active) driven by wwwroot/js/announceBar.js, not a CSS
   keyframe animation -- that's what lets the prev/next buttons jump to a slide immediately
   instead of the visitor having to wait out a fixed animation timeline. */
.announce-bar[b-sm2q5p42ox] {
    position: relative;
    min-height: 3.4rem;
}

.announce-slide[b-sm2q5p42ox] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: absolute;
    inset: 0;
    padding: 0.85rem 3rem;
    background: #ffd966;
    color: #1b1b1b;
    text-decoration: none;
    font-size: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

    .announce-slide.is-active[b-sm2q5p42ox] {
        opacity: 1;
        pointer-events: auto;
    }

    .announce-slide:hover[b-sm2q5p42ox] {
        color: #1b1b1b;
    }

.announce-button[b-sm2q5p42ox] {
    border: 1px solid #1b1b1b;
    border-radius: 4px;
    padding: 0.45rem 1.4rem;
    font-weight: 600;
    background: transparent;
    white-space: nowrap;
}

    .announce-slide:hover .announce-button[b-sm2q5p42ox] {
        background: rgba(0, 0, 0, 0.06);
    }

/* Prev/next controls: siblings of the slides (see MainLayout.razor's comment on why they can't
   nest inside a slide's <a>), overlaid at the bar's edges so they don't disturb the centered
   slide content, which keeps clear of them via the slide's own left/right padding above. */
.announce-nav-btn[b-sm2q5p42ox] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(27, 27, 27, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    color: #1b1b1b;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

    .announce-nav-btn:hover[b-sm2q5p42ox] {
        background: rgba(255, 255, 255, 0.65);
    }

    .announce-nav-btn.prev[b-sm2q5p42ox] {
        left: 0.75rem;
    }

    .announce-nav-btn.next[b-sm2q5p42ox] {
        right: 0.75rem;
    }

/* Respect reduced-motion: announceBar.js itself checks this and skips auto-advance, but keep the
   crossfade itself instant too rather than relying on script timing alone. */
@media (prefers-reduced-motion: reduce) {
    .announce-slide[b-sm2q5p42ox] {
        transition: none;
    }
}

/* ---- White top header with brand + horizontal nav ---- */
.site-header[b-sm2q5p42ox] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 2rem;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0 1.5rem;
    min-height: 64px;
}

.brand[b-sm2q5p42ox] {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #212121;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-logo[b-sm2q5p42ox] {
    height: 44px;
    width: auto;
}

    .brand:hover[b-sm2q5p42ox] {
        color: #000;
    }

.site-footer[b-sm2q5p42ox] {
    padding: 1.5rem;
    border-top: 1px solid #eee;
    color: #6b6b6b;
    font-size: 0.85rem;
    text-align: center;
    background: #fff;
}

@media (max-width: 999.98px) {
    .announce-bar[b-sm2q5p42ox] {
        min-height: 4.4rem;
    }

    .announce-slide[b-sm2q5p42ox] {
        gap: 0.75rem;
        padding: 0.85rem 2.25rem;
        text-align: center;
    }

    .announce-text[b-sm2q5p42ox] {
        font-size: 0.9rem;
    }

    .announce-nav-btn[b-sm2q5p42ox] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
    }

    .site-header[b-sm2q5p42ox] {
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
    }
}

#blazor-error-ui[b-sm2q5p42ox] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-sm2q5p42ox] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Horizontal top navigation with hover dropdowns, styled after the original
   Google Sites design: charcoal text on white, subtle hover, nested flyouts. */

.top-nav[b-k90ov94dxt] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-root[b-k90ov94dxt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .nav-root li[b-k90ov94dxt] {
        position: relative;
    }

    .nav-root a[b-k90ov94dxt],
    .nav-link-button[b-k90ov94dxt] {
        display: block;
        color: #3c3c3c;
        text-decoration: none;
        padding: 1.25rem 0.85rem;
        font-size: 1rem;
        white-space: nowrap;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
    }

        .nav-root a:hover[b-k90ov94dxt],
        .nav-link-button:hover[b-k90ov94dxt] {
            color: #000;
            text-decoration: none;
        }

/* ---- Dropdowns (second level) ---- */
.dropdown[b-k90ov94dxt] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    min-width: 240px;
    z-index: 200;
}

.nav-root > li:hover > .dropdown[b-k90ov94dxt],
.nav-root > li:focus-within > .dropdown[b-k90ov94dxt] {
    display: block;
}

.dropdown a[b-k90ov94dxt] {
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
}

    .dropdown a:hover[b-k90ov94dxt] {
        background: #f6f6f6;
    }

/* ---- Flyouts (third level, e.g. Doula Standards) ---- */
.flyout[b-k90ov94dxt] {
    display: none;
    position: absolute;
    top: -0.4rem;
    left: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    min-width: 260px;
    z-index: 210;
}

.dropdown li:hover > .flyout[b-k90ov94dxt],
.dropdown li:focus-within > .flyout[b-k90ov94dxt] {
    display: block;
}

.logout-form[b-k90ov94dxt] {
    margin: 0;
}

/* Avatar + name link, added 2026-09-11 (see NavMenu.razor's own comment) -- overrides .nav-root
   a's plain display:block so the avatar and "My Profile" text sit side by side on one line. */
.nav-root a.nav-user-link[b-k90ov94dxt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Mobile: hamburger toggle, stacked menu ---- */
.nav-toggle[b-k90ov94dxt] {
    display: none;
}

.nav-toggle-label[b-k90ov94dxt] {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #212121;
    padding: 0.25rem 0.5rem;
    margin-left: auto;
    user-select: none;
}

@media (max-width: 999.98px) {
    .nav-toggle-label[b-k90ov94dxt] {
        display: block;
        order: 1;
    }

    .top-nav[b-k90ov94dxt] {
        display: none;
        flex-basis: 100%;
        order: 2;
    }

    .nav-toggle:checked ~ .top-nav[b-k90ov94dxt] {
        display: block;
    }

    .nav-root[b-k90ov94dxt] {
        flex-direction: column;
        align-items: stretch;
    }

        .nav-root a[b-k90ov94dxt],
        .nav-link-button[b-k90ov94dxt] {
            padding: 0.7rem 0.5rem;
            width: 100%;
            text-align: left;
        }

    /* On mobile, show all levels inline (no hover on touch) */
    .dropdown[b-k90ov94dxt],
    .flyout[b-k90ov94dxt] {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        padding-left: 1.25rem;
        min-width: 0;
    }
}
/* /Components/Pages/InfoSession.razor.rz.scp.css */
.is-session-time[b-uak40hy5wr] {
    max-width: 40rem;
    margin: 0 auto 1.5rem;
    font-size: 1.1rem;
    text-align: center;
}

/* Vimeo's responsive-embed markup (added 2026-08-28) uses the padding-top aspect-ratio trick
   (75% = 4:3) on this div with an absolutely-positioned iframe filling it -- that inline style is
   Vimeo's own and left untouched; this class only adds the centered max-width the rest of the page
   uses, since .page-inner alone is wider than a comfortable video width. */
.is-video-wrap[b-uak40hy5wr] {
    max-width: 40rem;
    margin: 0 auto 1.5rem;
}

.is-ready-to-enroll[b-uak40hy5wr] {
    max-width: 40rem;
    margin: 0 auto 2rem;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
}

/* ::deep -- see BetterThanCollege.razor.css's comment on the equivalent .lp-form rule. This class
   sits on <EditForm class="is-form">, and Blazor CSS isolation never stamps its scope attribute
   onto a component tag, only onto native elements written directly in this file -- so a plain
   ".is-form" selector silently matched nothing (no card, and no display:flex, which is also why
   the submit button's align-self centering below did nothing). Fixed alongside the landing pages'
   .lp-form 2026-08-26. */
[b-uak40hy5wr] .is-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40rem;
    margin: 0 auto 3rem;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    padding: 1.75rem;
}

    .is-form label[b-uak40hy5wr] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        font-weight: 600;
        color: var(--baa-ink);
    }

    .is-form input[type="text"][b-uak40hy5wr],
    .is-form input[type="email"][b-uak40hy5wr],
    .is-form input[b-uak40hy5wr],
    .is-form textarea[b-uak40hy5wr],
    .is-form select[b-uak40hy5wr] {
        font-weight: 400;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--baa-border);
        border-radius: 4px;
        font-family: inherit;
    }

.is-fieldset[b-uak40hy5wr] {
    border: 1px solid var(--baa-border);
    border-radius: 4px;
    padding: 0.75rem 1rem 1rem;
}

    .is-fieldset legend[b-uak40hy5wr] {
        font-weight: 600;
        font-size: 0.95rem;
        padding: 0 0.35rem;
        width: auto;
    }

/* Same flex-column-child-per-line issue as the landing pages' .lp-form label -- an InputRadio plus
   its text label wraps them both in one <label class="is-choice"> element so they land on one line
   as a single flex item, not two rows.

   Found 2026-08-28 (Weston screenshotted the radio/checkbox rows stacked instead of side-by-side):
   plain ".is-choice" (specificity 0-1-0) lost to the ".is-form label" rule above (0-1-1, a class
   PLUS a type selector) that sets flex-direction: column for every ordinary label in the form --
   CSS specificity beats source order, so ".is-choice" being written after it in this file didn't
   help. Scoped to ".is-form label.is-choice" (0-2-1) so it unambiguously wins. */
.is-form label.is-choice[b-uak40hy5wr] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

    /* ::deep, same reason as ::deep .is-form above: the <input> here is rendered internally by
       <InputRadio>/<InputCheckbox> (components), not written as a literal <input> in this file, so
       Blazor CSS isolation never stamps its scope attribute onto it -- a plain ".is-choice input"
       rule compiles to ".is-choice input[scope]" and silently matches nothing.

       Found 2026-08-28, same investigation as the row/column fix above but a second, separate bug:
       even after that fix, the row-direction flex container's align-items: flex-start puts the
       13px-tall radio flush against the TOP of the row, and this margin-top nudge -- meant to drop
       it down those few pixels to line up with the vertical center of the label's first line -- was
       never actually applying (::deep fixes that), but 0.2rem (3.2px) undershot the actual center
       and still looked slightly high once it did apply (Weston: "a little better" but still off).
       align-items: center was considered instead of a nudge at all, but several options in this
       form wrap to 2-3 lines, and centering would float the radio in the middle of the whole
       wrapped block instead of against its first line -- so flex-start + a nudge is still the right
       approach, just with the right number: this label's font-size/line-height is 16px/24px and the
       radio renders at 13px tall in Chrome/Windows (both confirmed live via getBoundingClientRect),
       so centering it within a 24px line needs (24 - 13) / 2 = 5.5px = 0.34375rem, not 0.2rem.
       Verified live on production via devtools before deploying: with margin-top: 5.5px, the radio's
       vertical center lands at exactly 12px from the label's top edge -- the same 12px as the
       24px line's own center. */
    [b-uak40hy5wr] .is-choice input {
        margin-top: 0.34375rem;
        flex-shrink: 0;
    }

/* Belt-and-suspenders centering, same fix applied to the landing pages' submit buttons 2026-08-26
   after align-self alone wasn't enough on its own -- see BetterThanCollege.razor.css. */
.is-form button[type="submit"][b-uak40hy5wr] {
    align-self: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.lp-optional[b-uak40hy5wr] {
    font-weight: 400;
    color: var(--baa-grey);
}

.is-privacy-note[b-uak40hy5wr] {
    font-size: 0.8rem;
    color: var(--baa-grey);
    margin: 0;
    text-align: center;
}

/* Staff-typed join details (passcode, dial-in) on the post-signup panel -- pre-line keeps the
   line breaks they typed in the admin textarea. */
.is-join-details[b-uak40hy5wr] {
    white-space: pre-line;
    color: var(--baa-grey);
}

.is-thanks[b-uak40hy5wr] {
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-align: center;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    padding: 2rem 1.5rem;
}
/* /Components/Pages/LandingPages/BetterThanCollege.razor.rz.scp.css */
.lp-hero[b-wpm3hxmrm0] {
    max-width: 64rem;
    margin: 1rem auto 2rem;
    padding: 0 1.5rem;
}

.lp-hero-columns[b-wpm3hxmrm0] {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.lp-hero-text[b-wpm3hxmrm0] {
    flex: 1 1 22rem;
    text-align: center;
}

    .lp-hero-text h1[b-wpm3hxmrm0] {
        font-size: 2.1rem;
        margin-bottom: 0.75rem;
    }

/* Small "who this is for" badge above the headline (added 2026-08-26, per Weston: "I feel like
   there needs to be something at the top"). Sits centered inside .lp-hero-text (text-align: center)
   as an inline-block pill so it reads as a label, not another headline. */
.lp-eyebrow[b-wpm3hxmrm0] {
    display: inline-block;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    color: var(--baa-ink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.lp-hero-photo[b-wpm3hxmrm0] {
    flex: 1 1 18rem;
    max-width: 26rem;
    margin: 0 auto;
}

    .lp-hero-photo img[b-wpm3hxmrm0] {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

.lp-subhead[b-wpm3hxmrm0] {
    font-size: 1.1rem;
    color: var(--baa-ink);
}

.lp-form-section[b-wpm3hxmrm0] {
    max-width: 30rem;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}

/* ::deep, not a plain .lp-form selector -- this class sits on <EditForm class="lp-form">, and
   Blazor CSS isolation only stamps its scope attribute onto native HTML elements literally written
   in this file, never onto a component tag like <EditForm>. A plain ".lp-form { }" rule compiles to
   ".lp-form[b-scopeid]" and the real <form> element EditForm renders internally only ever gets the
   "class" attribute forwarded to it, not the scope attribute -- so that rule silently matched
   nothing (no card background/border, and .lp-form's own display:flex never applied, which is also
   why align-self centering on the button below did nothing: flex properties don't do anything on a
   non-flex parent). ::deep drops the scope requirement so this rule matches by class name alone.
   Confirmed 2026-08-26 -- Weston reported both the missing card and the still-uncentered button
   after the earlier align-self/margin-auto fix, and both symptoms trace back to this one selector.
   The *nested* rules below (.lp-form label, .lp-form input, .lp-form button[type="submit"]) don't
   need ::deep -- those target label/input/button elements that ARE written directly in this file's
   markup (inside EditForm's child content) and do carry the scope attribute themselves; the
   descendant-combinator match only needs the ".lp-form" ancestor class name, not its scope. */
[b-wpm3hxmrm0] .lp-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    padding: 1.75rem;
}

    .lp-form label[b-wpm3hxmrm0] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        font-weight: 600;
        color: var(--baa-ink);
    }

    .lp-form input[b-wpm3hxmrm0] {
        font-weight: 400;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--baa-border);
        border-radius: 4px;
        font-family: inherit;
    }

    /* The submit button is a direct .lp-form flex child, same as each label above it -- without
       this it inherits the column's default align-items:stretch (full width, flush left) instead
       of sitting as its own centered pill, and the built-in Bootstrap .btn padding alone reads as
       too tight against the field above it. Weston flagged both 2026-08-26. */
    .lp-form button[type="submit"][b-wpm3hxmrm0] {
        align-self: center;
        /* Belt-and-suspenders with align-self above: width:fit-content + margin-inline:auto is a
           second, independent centering mechanism (margin:auto on a flex item's cross axis centers
           it on its own) so this still centers even if align-self is ever overridden or fails to
           apply. Weston reported 2026-08-26 that align-self alone wasn't visibly centering it. */
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

.lp-form-heading[b-wpm3hxmrm0] {
    text-align: center;
    margin-bottom: 0.5rem;
}

.lp-form-lede[b-wpm3hxmrm0] {
    text-align: center;
    color: var(--baa-ink);
    margin-bottom: 1.25rem;
}

.lp-optional[b-wpm3hxmrm0] {
    font-weight: 400;
    color: var(--baa-grey);
}

.lp-privacy-note[b-wpm3hxmrm0] {
    font-size: 0.8rem;
    color: var(--baa-grey);
    margin: 0;
}

.lp-thanks[b-wpm3hxmrm0] {
    text-align: center;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    padding: 2rem 1.5rem;
}

.lp-what-you-get[b-wpm3hxmrm0],
.lp-credibility[b-wpm3hxmrm0] {
    max-width: 50rem;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    text-align: center;
}

.lp-benefits[b-wpm3hxmrm0] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.lp-benefit[b-wpm3hxmrm0] {
    flex: 1 1 240px;
    max-width: 300px;
    text-align: left;
}

    .lp-benefit h3[b-wpm3hxmrm0] {
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
    }

/* Matches the lp-what-you-get/lp-credibility section rhythm. Only this wrapper and its intro are
   styled here -- the pricing widget inside is the shared <StatePricing /> component, whose markup
   is NOT written in this file and so never carries this file's CSS-isolation scope attribute
   (same mechanism as the ::deep .lp-form fix above); it's styled by the global app.css
   .state-pricing* rules instead, which is exactly what keeps it looking identical everywhere
   it's embedded. */
.lp-pricing[b-wpm3hxmrm0],
.lp-earnings[b-wpm3hxmrm0] {
    max-width: 44rem;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    text-align: center;
}

    .lp-pricing-intro[b-wpm3hxmrm0],
    .lp-earnings-intro[b-wpm3hxmrm0] {
        color: var(--baa-ink);
        margin-bottom: 1.5rem;
    }

    /* The component's own layout is left-aligned; recenter only the state-picker form so it sits
       naturally under the centered heading. ::deep because .state-pricing-form is inside the child
       component. */
    .lp-pricing[b-wpm3hxmrm0]  .state-pricing-form {
        justify-content: center;
    }

    /* ...but the widget's own body (hint text, the line-item table) resets to left-aligned:
       .lp-pricing's text-align:center would otherwise inherit into the table and center every
       item name and note, which reads as a mess. */
    .lp-pricing[b-wpm3hxmrm0]  .state-pricing {
        text-align: left;
    }

.lp-credibility[b-wpm3hxmrm0] {
    color: var(--baa-grey);
}

    /* Split into an outer circular frame + an uncropped inner photo (2026-08-26, per Weston: the
       circle was cutting off part of Inga's face). The source photo (inga-goodwin.jpg) is already a
       tight, tilted square headshot with her face filling nearly the whole frame -- a plain
       border-radius:50% on the <img> itself clips the square's corners into a circle, and with a
       tilted, edge-to-edge face those corners are exactly where her forehead and jaw sit, no matter
       how big or small the circle is rendered. Fix: keep the *frame* circular, but size the inner
       photo so the whole square is inscribed inside that circle with room to spare (a square fits
       entirely inside a circle only when the circle's diameter is at least the square's diagonal,
       side*sqrt(2) ~= side*1.41 -- 5.5rem inside an 8rem circle clears that with margin), and give
       the photo itself soft rounded corners instead of a circular crop so none of her face is lost. */
    .lp-credibility-photo-frame[b-wpm3hxmrm0] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 8rem;
        height: 8rem;
        margin: 0 auto 1rem;
        border-radius: 50%;
        background: var(--baa-gold-light);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    }

    .lp-credibility-photo[b-wpm3hxmrm0] {
        display: block;
        width: 5.5rem;
        height: 5.5rem;
        border-radius: 8px;
        object-fit: cover;
    }

/* --------------------------------------------------------------------------------------------
   Added 2026-08-28 for the full copy rewrite (per Weston, relaying his wife's notes). New shared
   building blocks for the long-form narrative sections her draft calls for -- built from the same
   --baa-* variables and Quicksand/body-font pairing every other .lp-* rule above already uses, so
   these read as one continuous page rather than a bolted-on section partway through.
   -------------------------------------------------------------------------------------------- */

/* Generic centered-heading / left-aligned-prose section, used for every new narrative block that
   isn't a 4-card grid (.lp-what-you-get/.lp-benefits) or a widget wrapper (.lp-pricing/.lp-earnings). */
.lp-section[b-wpm3hxmrm0] {
    max-width: 46rem;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}

    .lp-section h2[b-wpm3hxmrm0] {
        text-align: center;
        margin-bottom: 1rem;
    }

    .lp-section p[b-wpm3hxmrm0] {
        color: var(--baa-ink);
        margin-bottom: 1rem;
    }

/* Short kicker line above an H1/H2 -- plain styled text, not a pill (unlike the older .lp-eyebrow
   above, still used nowhere in the current copy but left in place rather than deleted). Used both
   above the hero H1 and above the "Skills She Can Carry Into Her Own Home" H2. */
.lp-eyebrow-tagline[b-wpm3hxmrm0] {
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--baa-grey);
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Row of short feature badges under the hero subhead ("6-Week Online Training | Christian &
   Evidence-Based | ..."). Reuses the same pill look .lp-eyebrow established, just smaller and
   several side by side instead of one alone. */
.lp-feature-strip[b-wpm3hxmrm0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.lp-feature-pill[b-wpm3hxmrm0] {
    display: inline-block;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    color: var(--baa-ink);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

/* Checkmark list -- "she can prepare for meaningful professional work that allows her to:" and
   "to begin professional doula work, she will need:". Left-aligned even inside a centered
   .lp-section, same reasoning .lp-pricing's own left-aligned widget override uses: a centered
   bullet list is hard to scan. */
.lp-checklist[b-wpm3hxmrm0] {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    text-align: left;
}

    .lp-checklist li[b-wpm3hxmrm0] {
        position: relative;
        padding-left: 1.6rem;
        margin-bottom: 0.5rem;
        color: var(--baa-ink);
    }

    /* Same green already used for a completed activity/passing grade elsewhere in the app
       (.section-index li a.completed, .assignment-status.graded-pass) -- one consistent
       "done/positive" color across the whole site, not a new one invented for this page. */
    .lp-checklist li[b-wpm3hxmrm0]::before {
        content: "\2713";
        position: absolute;
        left: 0;
        top: 0.05rem;
        color: #1b6e3c;
        font-weight: 700;
    }

/* Short "stage" sequences -- Pregnancy/Birth/Postpartum, Prepare/Support/Recover, and
   Train/Qualify/Get Started/Serve/Earn. Wraps on narrow screens rather than truncating, since
   these are short single words/phrases. */
.lp-process-row[b-wpm3hxmrm0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--baa-ink);
    margin: 0.75rem 0;
}

/* The second (Prepare/Support/Recover) row under Pregnancy/Birth/Postpartum -- lighter weight so
   it visibly reads as the gloss on the row above it, not a second, equally-weighted headline. */
.lp-process-row-sub[b-wpm3hxmrm0] {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--baa-grey);
    margin-top: 0.25rem;
}

.lp-process-arrow[b-wpm3hxmrm0] {
    color: var(--baa-grey);
    font-weight: 400;
}

/* "6 Weeks / [pricing link] / About 2 Clients" stat tiles under "Meaningful Work Can Provide
   Meaningful Income". */
.lp-stats-row[b-wpm3hxmrm0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.lp-stat[b-wpm3hxmrm0] {
    flex: 1 1 160px;
    max-width: 200px;
    text-align: center;
}

.lp-stat-value[b-wpm3hxmrm0] {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--baa-ink);
}

    /* The middle tile's value is a link down to the real StatePricing widget (#pricing, the id its
       own root div already carries) rather than a second copy of the widget itself -- see this
       file's own top-of-file comment for why. Styled to still read as a stat value, not a normal
       inline link, so it doesn't look out of place next to the two plain-text stats beside it. */
    .lp-stat-value .lp-stat-link[b-wpm3hxmrm0] {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: var(--baa-border);
        text-underline-offset: 3px;
    }

.lp-stat-label[b-wpm3hxmrm0] {
    display: block;
    font-size: 0.85rem;
    color: var(--baa-grey);
    margin-top: 0.25rem;
}

/* Short, bolded closing line inside a .lp-section -- "Earn an income serving mothers who need
   support.", "We believe work can be more than a paycheck...", "Professional skills today. Life
   skills for tomorrow." */
.lp-emphasis-line[b-wpm3hxmrm0] {
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--baa-ink);
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Small print under a widget -- the Medicaid-income disclaimer under EarningsEstimator, and the
   "~2 clients" note under StatePricing. Left-aligned like .lp-pricing/.lp-earnings' own widget
   override, for the same reason: small print centered under a left-aligned widget looks mismatched. */
.lp-footnote[b-wpm3hxmrm0] {
    text-align: left;
    font-size: 0.8rem;
    color: var(--baa-grey);
    margin-top: 1rem;
}
/* /Components/Pages/LandingPages/BetterThanCollegeThankYou.razor.rz.scp.css */
/* Same wrapper width as BetterThanCollege.razor.css's .lp-form-section, so the confirmation card
   reads as the same visual system even though this is a separate page/CSS-isolation scope. */
.lp-form-section[b-wt3nerxfoj] {
    max-width: 30rem;
    margin: 4rem auto;
    padding: 0 1.5rem;
}

.lp-thanks[b-wt3nerxfoj] {
    text-align: center;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    padding: 2rem 1.5rem;
}

    .lp-thanks h2[b-wt3nerxfoj] {
        margin-top: 0;
    }
/* /Components/Pages/LandingPages/MinistryMinded.razor.rz.scp.css */
.lp-hero[b-cjsvs9lig2] {
    max-width: 40rem;
    margin: 1rem auto 2rem;
    padding: 0 1.5rem;
    text-align: center;
}

    .lp-hero h1[b-cjsvs9lig2] {
        font-size: 2.1rem;
        margin-bottom: 0.75rem;
    }

.lp-subhead[b-cjsvs9lig2] {
    font-size: 1.1rem;
    color: var(--baa-ink);
}

.lp-form-section[b-cjsvs9lig2] {
    max-width: 30rem;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}

/* ::deep -- see BetterThanCollege.razor.css's comment on this same rule. This class sits on
   <EditForm class="lp-form">, and Blazor CSS isolation never stamps its scope attribute onto a
   component tag, only onto native elements written directly in this file -- so a plain ".lp-form"
   selector silently matched nothing (no card, and no display:flex, which is also why the button's
   align-self centering below did nothing). Fixed alongside BetterThanCollege.razor.css 2026-08-26. */
[b-cjsvs9lig2] .lp-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    padding: 1.75rem;
}

    .lp-form label[b-cjsvs9lig2] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        font-weight: 600;
        color: var(--baa-ink);
    }

    .lp-form input[b-cjsvs9lig2] {
        font-weight: 400;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--baa-border);
        border-radius: 4px;
        font-family: inherit;
    }

    /* The submit button is a direct .lp-form flex child, same as each label above it -- without
       this it inherits the column's default align-items:stretch (full width, flush left) instead
       of sitting as its own centered pill, and the built-in Bootstrap .btn padding alone reads as
       too tight against the field above it. Same fix applied to BetterThanCollege.razor.css, where
       Weston flagged both 2026-08-26 -- this page shares the identical markup/CSS pattern. */
    .lp-form button[type="submit"][b-cjsvs9lig2] {
        align-self: center;
        /* Belt-and-suspenders with align-self above: width:fit-content + margin-inline:auto is a
           second, independent centering mechanism (margin:auto on a flex item's cross axis centers
           it on its own) so this still centers even if align-self is ever overridden or fails to
           apply. Weston reported 2026-08-26 that align-self alone wasn't visibly centering it. */
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

.lp-optional[b-cjsvs9lig2] {
    font-weight: 400;
    color: var(--baa-grey);
}

.lp-privacy-note[b-cjsvs9lig2] {
    font-size: 0.8rem;
    color: var(--baa-grey);
    margin: 0;
}

.lp-thanks[b-cjsvs9lig2] {
    text-align: center;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    padding: 2rem 1.5rem;
}

.lp-what-you-get[b-cjsvs9lig2],
.lp-credibility[b-cjsvs9lig2] {
    max-width: 50rem;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    text-align: center;
}

.lp-benefits[b-cjsvs9lig2] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.lp-benefit[b-cjsvs9lig2] {
    flex: 1 1 240px;
    max-width: 300px;
    text-align: left;
}

    .lp-benefit h3[b-cjsvs9lig2] {
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
    }

.lp-credibility[b-cjsvs9lig2] {
    color: var(--baa-grey);
}
/* /Components/Shared/HtmlEditor.razor.rz.scp.css */
.html-editor[b-zcfj9ccbys] {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
}

.html-editor-toolbar[b-zcfj9ccbys] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem;
    background: #f8f9fa;
    border-bottom: 1px solid #ced4da;
}

.html-editor-toolbar button[b-zcfj9ccbys] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.html-editor-toolbar button:hover[b-zcfj9ccbys] {
    background: #e9ecef;
    border-color: #ced4da;
}

.html-editor-sep[b-zcfj9ccbys] {
    width: 1px;
    align-self: stretch;
    background: #ced4da;
    margin: 0 0.25rem;
}

.html-editor-surface[b-zcfj9ccbys] {
    min-height: 320px;
    padding: 0.75rem 1rem;
    outline: none;
    line-height: 1.5;
}

.html-editor-surface:focus[b-zcfj9ccbys] {
    box-shadow: inset 0 0 0 2px #86b7fe;
}

.html-editor-source[b-zcfj9ccbys] {
    display: block;
    width: 100%;
    min-height: 320px;
    padding: 0.75rem 1rem;
    border: none;
    outline: none;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    box-sizing: border-box;
}

.html-editor-source:focus[b-zcfj9ccbys] {
    box-shadow: inset 0 0 0 2px #86b7fe;
}
/* /Components/Shared/ProfilePhotoUpload.razor.rz.scp.css */
/* Both the "already have a photo" preview and the live crop canvas render at the same fixed
   on-screen size and get the same circular mask -- see ProfilePhotoUpload.razor's own doc comment:
   the canvas's underlying pixels are always a plain square JPEG, the circle here is purely a CSS
   preview guide for how it'll display everywhere else it's used later (razor_gotchas.md's
   border-radius/img entry). */
.profile-photo-upload .profile-photo-current[b-2uuzye16bz],
.profile-photo-upload .profile-photo-crop-frame[b-2uuzye16bz] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    border: 1px solid #dee2e6;
}

.profile-photo-upload .profile-photo-current[b-2uuzye16bz] {
    object-fit: cover;
}

.profile-photo-upload .profile-photo-crop-frame canvas[b-2uuzye16bz] {
    width: 100%;
    height: 100%;
    display: block;
}

.profile-photo-upload .profile-photo-zoom[b-2uuzye16bz] {
    max-width: 240px;
    margin-top: 0.5rem;
}
/* /Components/Shared/UserAvatar.razor.rz.scp.css */
.user-avatar[b-gkv78kkr49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size, 32px);
    height: var(--avatar-size, 32px);
    min-width: var(--avatar-size, 32px);
    border-radius: 50%;
    overflow: hidden;
    background: #6c757d;
    color: #fff;
    font-weight: 600;
    font-size: calc(var(--avatar-size, 32px) * 0.4);
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
}

.user-avatar img[b-gkv78kkr49] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}