/* ============================================================================
   BROCHURE — the marketing landing pages' own stylesheet.

   Loaded by App.razor ONLY on a public-shell route (PublicShellRouteScope, the same
   path-derived answer MainLayout uses to decide `is-public-site`), exactly as admin.css is
   loaded only on an operator route. The two sheets are the same mechanism pointed in
   opposite directions: an operator never downloads the marketing landings' CSS, and a
   marketing visitor never downloads the operator console's.

   WHAT LIVES HERE: the `.home-*`, `.founder-*` and `.evidence-stat*` families — the hero,
   intent router, journey cards, proof strip, founder-rate panels and the evidence-stats
   band. Every one of them is emitted only by Home.razor, MenuCostCalculator.razor and the
   shared EvidenceStatsSection, all of which render inside the public shell.

   WHAT DOES NOT: anything an operator route can also render. A rule moved here only if
   EVERY selector in its list names one of those families, so a rule shared with an operator
   surface stayed in app.css rather than travelling and silently going missing.

   CASCADE: this sheet is promoted immediately after app.css and before the shell/scoped
   sheets, so a moved rule keeps its position relative to everything that used to follow it.
   ========================================================================== */

.home-hero {
    background:
        linear-gradient(135deg, rgba(51, 204, 204, 0.12), transparent 36%),
        linear-gradient(160deg, var(--public-hero-bg) 0%, #0a1b2d 62%, #082534 100%);
    border-top: 1px solid var(--public-hero-border);
    color: var(--public-hero-text);
    display: grid;
    gap: 1.5rem;
    overflow: hidden;
    padding: 2.7rem max(1.35rem, calc((100vw - var(--public-hero-max)) / 2)) 2.25rem;
}

.home-intent-hero {
    min-height: auto;
}

.home-product-hero {
    min-height: 520px;
}

.home-hero-copy {
    display: grid;
    gap: 0.82rem;
    justify-items: start;
}

.home-hero-title {
    color: var(--public-hero-text);
    font-size: 2.55rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
    max-width: 11ch;
}

.home-hero-subtitle {
    color: #9be8ed;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    max-width: 38ch;
}

.home-hero-lead {
    color: var(--public-hero-muted);
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 62ch;
}

.home-hero-notice {
    background: rgba(39, 129, 184, 0.1);
    border: 1px solid rgba(39, 129, 184, 0.26);
    border-radius: 8px;
    color: rgba(244, 247, 255, 0.88);
    display: grid;
    gap: 0.35rem;
    max-width: 640px;
    padding: 0.92rem 1rem;
}

.home-hero-notice strong,
.home-hero-notice span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.home-hero-notice strong {
    color: var(--public-hero-text);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.26;
}

.home-hero-notice span {
    color: var(--public-hero-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.home-founder-lock {
    align-items: start;
    background: var(--public-hero-panel);
    border: 1px solid var(--public-hero-border);
    border-inline-start: 4px solid var(--tma-red);
    border-radius: 8px;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 560px;
    padding: 0.76rem 0.82rem;
}

.home-founder-lock strong,
.home-founder-lock small,
.founder-lock-points strong,
.founder-lock-points small,
.founder-rate-row strong,
.founder-rate-row small {
    display: block;
}

.home-founder-lock strong,
.founder-lock-points strong,
.founder-rate-row strong {
    color: var(--public-text);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.3;
}

.home-founder-lock strong {
    color: var(--public-hero-text);
}

.home-founder-lock small,
.founder-lock-points small,
.founder-rate-row small {
    color: var(--public-muted);
    font-size: 0.84rem;
    line-height: 1.34;
    margin-top: 0.22rem;
}

.home-founder-lock small {
    color: var(--public-hero-muted);
}

.home-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 520px;
    width: 100%;
}

.home-hero-actions .mud-button-root {
    min-width: 10.25rem;
}

.home-hero-actions .mud-button-outlined {
    border-color: rgba(155, 232, 237, 0.55) !important;
    color: #9be8ed !important;
}

.home-proof-strip {
    border-top: 1px solid var(--public-hero-border);
    display: grid;
    gap: 0.75rem;
    margin-top: 0.15rem;
    padding-top: 0.9rem;
    width: 100%;
}

.home-intent-hero .home-proof-strip {
    max-width: 620px;
}

.home-intent-router {
    border-top: 1px solid var(--public-border);
}

.home-router-eyebrow {
    color: var(--tma-blue);
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.home-intent-router .home-journey-card {
    box-shadow: 0 14px 36px rgba(14, 34, 52, 0.08);
}

.home-intent-router .home-journey-card .mud-button-root {
    justify-self: start;
    min-width: max-content;
}

.evidence-stats-section {
    display: grid;
    gap: 1.25rem;
}

.evidence-stats-head {
    display: grid;
    gap: 0.48rem;
    max-width: 760px;
}

.evidence-stats-head .mud-typography-h5 {
    color: var(--public-text);
    font-size: clamp(1.45rem, 3vw, 2rem) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
}

/* The eyebrow is the design system's own role, and --eyebrow is the token measured for it in both
   themes; --tma-blue is theme-invariant and read 4.03:1 on the dark canvas. */
.evidence-stats-eyebrow {
    color: var(--eyebrow, #2980b9);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.evidence-stats-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The card's SURFACE is stated here rather than inherited from MudPaper's palette slot. MEASURED on the
   served /for-restaurants in dark: the paper resolved #2C3E50, and every colour below was a light-mode
   literal painted onto it — the value and heading at 1.1:1, the kicker at 1.52, the source link at 1.9 and
   the body copy at 2.64. Naming --surface (the design system's own card slot, ported from the prototype)
   makes the pairing measurable in both themes from ONE ladder instead of two: light is #FFFFFF, exactly
   what the paper already painted, so light mode is unchanged. */
.evidence-stat-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--public-border);
    border-radius: 8px;
    display: grid;
    gap: 0.58rem;
    padding: 1rem;
}

.evidence-stat-kicker {
    align-self: start;
    background: rgba(51, 204, 204, 0.12);
    border: 1px solid rgba(51, 204, 204, 0.24);
    border-radius: 999px;
    color: var(--eyebrow, #146f85);
    font-size: 0.74rem;
    font-weight: 850;
    justify-self: start;
    line-height: 1.2;
    padding: 0.34rem 0.62rem;
}

.evidence-stat-value {
    color: var(--ink-1, #22384e);
    display: block;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.evidence-stat-card .mud-typography-h6 {
    color: var(--ink-1, #22384e);
    font-size: 1.02rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

/* --ink-2, not the old #697f91: that literal measured 4.16:1 on the white card in LIGHT mode as well,
   so this pair was under the floor in both themes, not only the dark one. */
.evidence-stat-card .mud-typography-body2 {
    color: var(--ink-2, #43566a);
    line-height: 1.5 !important;
}

.evidence-stat-source {
    align-items: center;
    /* --accent-fg, not --tma-blue: that token is theme-INVARIANT (#2980b9) and measured 4.03:1 on the
       dark canvas. The design system's accent ink has a measured companion in each theme. */
    color: var(--accent-fg, #2980b9);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    justify-self: start;
    line-height: 1.35;
    margin-top: 0.15rem;
    text-decoration: none;
}

.evidence-stat-source:hover {
    text-decoration: underline;
}

/* The head sits on the BAND, not on a card, so it takes the band's own ink pair. The lede is listed
   beside the heading because it is not inside .app-section-head — the generic band rule in app.css can
   never reach it, and without an entry here it kept --public-muted and measured 2.19:1 on the dark band
   in LIGHT mode (served, 2026-09-09). */
.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stats-head .mud-typography-h5 {
    color: var(--public-section-dark-text);
}

.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stats-head .app-section-lead {
    color: var(--public-section-dark-muted);
}

/* On the dark band the eyebrow and the section's own source links take the band's light accent; the
   CARD's source link is re-stated below, because it sits on the card's surface, not the band's. */
.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stats-eyebrow,
.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stat-source {
    color: var(--public-section-dark-text);
}

/* The card keeps its OWN ink inside the dark band — it is a card on the band, not part of it. These
   three restate the rules above at the band's specificity for exactly that reason; they now restate the
   same TOKENS, so the two statements of one fact cannot resolve to different colours. */
.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stat-card .evidence-stat-value,
.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stat-card .mud-typography-h6 {
    color: var(--ink-1, #22384e) !important;
}

.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stat-card .mud-typography-body2 {
    color: var(--ink-2, #43566a) !important;
}

.site-shell.is-public-site .app-canvas > section:not(.app-hero):not(.home-hero):nth-of-type(odd) .evidence-stat-card .evidence-stat-source {
    color: var(--accent-fg, #1f6e9c) !important;
}

.home-proof-strip strong,
.home-proof-strip small {
    display: block;
}

.home-proof-strip strong {
    color: var(--public-hero-text);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.25;
}

.home-proof-strip small {
    color: var(--public-hero-muted);
    font-size: 0.82rem;
    line-height: 1.32;
    margin-top: 0.15rem;
}

.home-hero-media {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 300px;
}

.home-hero-media > img {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.45));
    justify-self: center;
    max-height: 430px;
    object-fit: contain;
    width: min(92%, 400px);
}

.home-intent-section {
    background: var(--public-section-light);
    border-bottom: 1px solid var(--public-border);
    display: grid;
    gap: 1rem;
    padding: 1.35rem max(1.35rem, calc((100vw - var(--public-hero-max)) / 2));
}

.home-intent-head {
    display: grid;
    gap: 0.25rem;
}

.home-intent-head .mud-typography-h5 {
    color: var(--public-text);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0;
}

.home-intent-head .mud-typography-body2 {
    color: var(--public-muted);
    line-height: 1.45;
}

.home-intent-list {
    border: 1px solid var(--public-border);
    border-radius: 8px;
    overflow: hidden;
}

.home-journey-section {
    background: var(--public-section-light);
    border-bottom: 1px solid var(--public-border);
    display: grid;
    gap: 1rem;
    padding: 1.35rem max(1.35rem, calc((100vw - var(--public-hero-max)) / 2));
}

.home-journey-head {
    display: grid;
    gap: 0.25rem;
    max-width: 48rem;
}

.home-journey-head .mud-typography-h5 {
    color: var(--public-text);
    font-size: 1.18rem;
    font-weight: 850;
    letter-spacing: 0;
}

.home-journey-head .mud-typography-body2 {
    color: var(--public-muted);
    line-height: 1.45;
}

.home-journey-grid {
    display: grid;
    gap: 0.85rem;
}

.home-journey-card {
    background: var(--public-surface);
    border: 1px solid var(--public-border);
    border-radius: 8px;
    display: grid;
    gap: 0.82rem;
    min-width: 0;
    padding: 1rem;
}

.home-journey-card-head {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.home-journey-card-head span,
.home-journey-card-head small,
.home-journey-card-head strong,
.home-journey-links a {
    min-width: 0;
}

.home-journey-card-head small,
.home-journey-card-head strong,
.home-journey-links a {
    display: block;
}

.home-journey-card-head small {
    color: var(--tma-blue);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-journey-card-head strong {
    color: var(--public-text);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.18;
    margin-top: 0.16rem;
}

.home-journey-card .mud-typography-body2 {
    color: var(--public-muted);
    line-height: 1.5;
}

.home-journey-card .mud-button-root {
    justify-self: start;
}

.home-journey-links {
    border-top: 1px solid var(--public-border);
    display: grid;
    gap: 0.25rem;
    padding-top: 0.72rem;
}

.home-journey-links a {
    align-items: center;
    border-radius: 8px;
    color: #244761;
    display: grid;
    font-size: 0.86rem;
    font-weight: 850;
    gap: 0.5rem;
    grid-template-columns: auto minmax(0, 1fr);
    line-height: 1.25;
    padding: 0.44rem 0.5rem;
    text-decoration: none;
}

.home-journey-links a:hover,
.home-journey-links a:focus-visible {
    background: #eef6fa;
    outline: 2px solid rgba(41, 128, 185, 0.24);
    outline-offset: 0;
}

.founder-offer-card {
    background: var(--public-surface);
    border: 1px solid var(--public-border);
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.founder-offer-copy {
    display: grid;
    gap: 0.65rem;
}

.founder-offer-copy .mud-typography-h5 {
    color: var(--public-text);
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.25;
}

.founder-offer-copy .mud-typography-body2 {
    color: var(--public-text);
    line-height: 1.55;
}

.founder-lock-points {
    border-top: 1px solid var(--public-border);
    display: grid;
    gap: 0.65rem;
    padding-top: 0.75rem;
}

.founder-rate-row {
    display: grid;
    gap: 0.75rem;
    margin: 0.85rem 0 1rem;
}

.founder-rate-row span {
    background: var(--public-surface);
    border: 1px solid var(--public-border);
    border-radius: 8px;
    padding: 0.85rem;
}

.founder-principles {
    margin-top: 0.25rem;
}

.home-hero-eyebrow {
    color: rgba(244, 247, 255, 0.62);
    justify-content: flex-start;
    margin-bottom: 0;
}

@media (min-width: 700px) {
    .home-proof-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .founder-lock-points,
    .founder-rate-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .founder-lock-points span + span {
        border-inline-start: 1px solid var(--public-border);
        padding-inline-start: 0.85rem;
    }
}

@media (min-width: 860px) {
/* SHELL.4 — the whole desktop marketing bar is gone. It re-laid the toolbar grid to five columns
       (menu | title | nav | app | logo), grew the bar to 56px, re-anchored the title to the start,
       revealed the public nav links and painted an App Sign In button in the marketing accent — i.e. it
       was a second, different app bar for one area, which is precisely what DESIGN-SYSTEM §4 forbids.
       The design bar is 56px on every area at every width, so the height change needs no rule; the nav
       links become the bottom nav (SHELL.5) and App Sign In moves into the identity menu (SHELL.4). */

    
.home-hero {
        align-items: center;
        gap: 1.75rem 2.7rem;
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
        min-height: 540px;
        padding-block: 3rem 2.35rem;
    }

    .home-intent-hero {
        grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.78fr);
        min-height: 500px;
    }

    .home-hero-title {
        font-size: 3.75rem !important;
        max-width: 11ch;
    }

    .home-intent-hero .home-hero-title {
        max-width: 14ch;
    }

    .home-hero-subtitle,
    .home-hero-lead {
        max-width: 62ch;
    }

    .home-hero-media {
        min-height: 360px;
    }

    .home-hero-media > img {
        max-height: 480px;
        width: min(100%, 440px);
    }

    .home-intent-section {
        align-items: center;
        grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
        padding-block: 1.2rem;
    }

    .home-intent-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-journey-section {
        align-items: start;
        gap: 1rem 1.35rem;
        grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
        padding-block: 1.6rem;
    }

    .home-journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-intent-router {
        grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr);
        padding-block: 2rem;
    }

    .home-intent-router .home-journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evidence-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-journey-card {
        align-content: start;
        grid-template-rows: auto minmax(5.2rem, auto) auto auto;
        min-height: 100%;
    }

    .home-intent-router .home-journey-card {
        grid-template-rows: auto minmax(5.8rem, auto) auto auto;
    }

    .home-intent-list .app-list-item {
        align-content: start;
        align-items: start;
        border: 0;
        min-height: 146px;
    }

    .home-intent-list .app-list-item + .app-list-item {
        border-inline-start: 1px solid var(--public-border);
        border-top: 0;
    }

    .founder-offer-card {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) minmax(210px, 0.34fr);
        padding: 1.25rem;
    }
}

@media (max-width: 560px) {
    .home-hero {
        gap: 0.95rem;
        padding-block: 1.2rem 0.95rem;
    }

    .home-product-hero {
        min-height: 0;
    }

    .home-hero-copy {
        gap: 0.54rem;
    }

    .home-hero-title {
        font-size: 2.2rem !important;
        line-height: 1.04 !important;
    }

    .home-hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.32 !important;
    }

    .home-hero-lead {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    .home-hero-title,
    .home-hero-subtitle,
    .home-hero-lead,
    .home-journey-card-head strong,
    .home-journey-card .mud-typography-body2,
    .home-journey-links a,
    .home-intent-list .app-list-item strong,
    .home-intent-list .app-list-item small,
    .founder-offer-copy .mud-typography-h5,
    .founder-offer-copy .mud-typography-body2 {
        overflow-wrap: anywhere;
    }

    .home-founder-lock {
        gap: 0.5rem;
        padding: 0.68rem 0.72rem;
    }

    .home-hero-actions {
        gap: 0.62rem;
    }

    .home-hero-actions .mud-button-root {
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .home-hero-notice {
        padding: 0.78rem 0.82rem;
    }

    .home-hero-notice span {
        font-size: 0.8rem;
        line-height: 1.34;
    }

    .home-proof-strip {
        gap: 0.5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 0.72rem;
    }

    .home-proof-strip strong {
        font-size: 0.74rem;
    }

    .home-proof-strip small {
        font-size: 0.68rem;
    }

    .evidence-stats-section {
        gap: 1rem;
    }

    .evidence-stats-grid {
        grid-template-columns: 1fr;
    }

    .evidence-stat-card {
        padding: 0.88rem;
    }

    .home-hero-media {
        display: none;
    }

    .home-intent-router .home-journey-card .mud-button-root {
        justify-self: stretch;
        min-width: 0;
    }
}

.home-cost-hero {
    align-items: start;
    min-height: 0;
}

.home-cost-hero-title {
    max-width: 14ch;
}

.home-card-eyebrow {
    color: var(--tma-blue);
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.home-cost-card {
    align-self: start;
    background: var(--public-surface);
    border: 1px solid rgba(155, 232, 237, 0.32);
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28);
    color: var(--public-text);
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    width: 100%;
}

.site-shell.is-public-site .home-cost-card {
    background: var(--public-surface) !important;
    color: var(--public-text) !important;
}

.home-cost-card-head,
.home-pricing-offer-head,
.home-white-glove-card,
.home-unsure-card {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.home-cost-card-head span,
.home-cost-card-head .mud-typography,
.home-pricing-offer-head span,
.home-pricing-offer-head .mud-typography,
.home-white-glove-card span,
.home-unsure-card span {
    min-width: 0;
}

.home-cost-card-head .mud-typography-h5,
.home-pricing-offer-head .mud-typography-h5,
.home-white-glove-card .mud-typography-h5,
.home-unsure-card .mud-typography-h5 {
    color: var(--public-text);
    font-size: 1.18rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
    margin: 0 !important;
}

.site-shell.is-public-site .home-cost-card-head .mud-typography-h5,
.site-shell.is-public-site .home-cost-summary-grid strong {
    color: var(--public-text) !important;
}

.home-cost-value-wrap {
    background: #eef9fa;
    border: 1px solid rgba(51, 204, 204, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem;
}

.site-shell.is-public-site .home-cost-value-wrap,
.site-shell.is-public-site .home-cost-summary-grid span,
.site-shell.is-public-site .home-cost-assumptions .mud-expand-panel {
    background: var(--public-surface) !important;
}

.site-shell.is-public-site .home-cost-value-wrap {
    background: #eef9fa !important;
}

.home-cost-value {
    color: #07101d;
    display: block;
    font-size: 2.65rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

.home-cost-value-wrap small,
.home-cost-summary-grid small,
.home-cost-summary-grid strong,
.home-pricing-price small,
.home-savings-card small,
.home-white-glove-card .mud-typography-body2,
.home-unsure-card .mud-typography-body2 {
    display: block;
}

.home-cost-value-wrap small {
    color: var(--public-muted);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
}

.home-cost-summary-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-cost-summary-grid span {
    background: #f7fbfc;
    border: 1px solid var(--public-border);
    border-radius: 8px;
    min-width: 0;
    padding: 0.7rem;
}

.home-cost-summary-grid small {
    color: var(--public-muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.25;
}

.site-shell.is-public-site .home-cost-value-wrap small,
.site-shell.is-public-site .home-cost-summary-grid small,
.site-shell.is-public-site .home-cost-note {
    color: var(--public-muted) !important;
}

.home-cost-summary-grid strong {
    color: var(--public-text);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.1;
    margin-top: 0.28rem;
}

.home-cost-assumptions {
    border: 1px solid var(--public-border);
    border-radius: 8px;
    overflow: hidden;
}

.home-cost-assumptions .mud-expand-panel {
    background: var(--public-surface) !important;
    box-shadow: none !important;
}

.home-cost-assumptions .mud-expand-panel-header {
    min-height: 46px;
}

.home-cost-assumptions .mud-expand-panel-header-title {
    color: var(--public-text);
    font-size: 0.92rem;
    font-weight: 900;
}

.home-cost-fields {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0.4rem;
}

.home-cost-field-section {
    background: rgba(245, 248, 248, 0.72);
    border: 1px solid rgba(18, 53, 72, 0.12);
    border-radius: 8px;
    padding: 0.85rem;
}

.home-cost-field-section-title {
    color: var(--public-text) !important;
    font-size: 0.86rem !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    margin-bottom: 0.72rem !important;
}

.home-cost-field-section-grid {
    display: grid;
    gap: 0.72rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-cost-note {
    color: var(--public-muted);
    display: block;
    line-height: 1.38 !important;
    margin-top: 0.85rem !important;
}

.home-savings-grid {
    display: grid;
    gap: 0.85rem;
}

.site-shell.is-public-site .home-savings-section {
    padding-inline: max(1.35rem, calc((100vw - var(--public-hero-max)) / 2));
}

.home-savings-card,
.home-founder-story-card,
.home-pricing-offer-card,
.home-white-glove-card,
.home-unsure-card {
    background: var(--public-surface);
    border: 1px solid var(--public-border);
    border-radius: 8px;
    min-width: 0;
    padding: 1rem;
}

.home-savings-card {
    align-items: start;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.home-savings-card strong {
    color: var(--public-text);
    display: block;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.22;
}

.home-savings-card small {
    color: var(--public-muted);
    font-size: 0.86rem;
    line-height: 1.42;
    margin-top: 0.22rem;
}

.home-founder-pricing-grid {
    display: grid;
    gap: 1rem;
}

.home-founder-story-card {
    display: grid;
    gap: 1rem;
}

.home-founder-story-card img {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
}

.home-founder-story-card > div {
    display: grid;
    gap: 0.65rem;
}

.home-founder-story-card .mud-typography-h5 {
    color: var(--public-text);
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
}

.home-founder-story-card .mud-typography-body2,
.home-pricing-offer-card .mud-typography-body2 {
    color: var(--public-muted);
    line-height: 1.5 !important;
}

.home-founder-story-card .mud-button-root {
    justify-self: start;
}

.home-pricing-offer-card {
    display: grid;
    gap: 1rem;
}

.home-pricing-price {
    background: #07101d;
    border-radius: 8px;
    color: #f4f7ff;
    display: grid;
    gap: 0.18rem;
    padding: 1rem;
}

.home-pricing-price strong {
    display: block;
    font-size: 2.4rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

.home-pricing-price small {
    color: rgba(244, 247, 255, 0.78);
    font-size: 0.86rem;
    font-weight: 800;
}

.home-final-grid {
    display: grid;
    gap: 1rem;
}

.home-white-glove-card,
.home-unsure-card {
    align-content: start;
    gap: 0.9rem;
}

.home-white-glove-card span,
.home-unsure-card span {
    display: grid;
    gap: 0.72rem;
}

.home-white-glove-card .mud-typography-body2,
.home-unsure-card .mud-typography-body2 {
    color: var(--public-muted);
    line-height: 1.5 !important;
}

.home-white-glove-card .mud-button-root,
.home-unsure-card .mud-button-root {
    max-width: 100%;
    justify-self: start;
    min-width: 0;
    white-space: nowrap;
}

.home-white-glove-card .mud-button-label,
.home-unsure-card .mud-button-label {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    min-width: 0;
    white-space: nowrap;
}

.home-white-glove-card .mud-button-icon-end,
.home-unsure-card .mud-button-icon-end {
    flex: 0 0 auto;
}

@media (min-width: 860px) {
    .home-cost-hero {
        align-items: center;
        grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.8fr);
        min-height: 0;
        padding-block: 2.65rem 2.15rem;
    }

    .home-cost-hero-title {
        font-size: 3.35rem !important;
        max-width: 15ch;
    }

    .home-savings-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-savings-card {
        grid-template-columns: 1fr;
        min-height: 100%;
    }

    .home-founder-pricing-grid {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr) minmax(310px, 0.72fr);
    }

    .home-founder-story-card {
        grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1fr);
    }

    .home-founder-story-card img {
        height: 100%;
    }

    .home-final-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .home-cost-hero {
        gap: 0.8rem;
        padding-block: 0.95rem 0.8rem;
    }

    .home-cost-hero .home-hero-copy {
        gap: 0.46rem;
    }

    .home-cost-hero .home-hero-subtitle,
    .home-cost-hero .home-hero-lead,
    .home-cost-card-head .mud-typography-h5 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .home-cost-hero-title {
        font-size: 1.9rem !important;
        line-height: 1.08 !important;
        max-width: 17ch;
    }

    .home-cost-card {
        gap: 0.6rem;
        overflow: hidden;
        padding: 0.78rem;
    }

    .home-cost-card-head {
        gap: 0.55rem;
    }

    .home-cost-card-head .mud-typography-h5 {
        font-size: 1rem !important;
        line-height: 1.16 !important;
    }

    .home-cost-card,
    .home-savings-card,
    .home-founder-story-card,
    .home-pricing-offer-card,
    .home-white-glove-card,
    .home-unsure-card {
        max-width: 100%;
        min-width: 0;
    }

    .home-cost-value {
        font-size: 1.95rem;
    }

    .home-cost-value-wrap {
        gap: 0.12rem;
        justify-self: start;
        max-width: 100%;
        padding: 0.56rem 0.68rem 0.52rem;
        width: fit-content;
    }

    .home-cost-value-wrap small {
        max-width: 19rem;
    }

    .home-cost-fields,
    .home-savings-grid,
    .home-founder-pricing-grid,
    .home-final-grid {
        grid-template-columns: 1fr;
    }

    .home-cost-field-section {
        padding: 0.75rem;
    }

    .home-cost-field-section-grid {
        grid-template-columns: 1fr;
    }

    .home-cost-summary-grid {
        display: none;
    }

    .home-cost-assumptions .mud-expand-panel-header {
        min-height: 42px;
    }

    .home-cost-card-head .mud-typography-h5,
    .home-pricing-offer-head .mud-typography-h5,
    .home-white-glove-card .mud-typography-h5,
    .home-unsure-card .mud-typography-h5,
    .home-founder-story-card .mud-typography-h5,
    .home-savings-card strong,
    .home-savings-card small,
    .home-cost-value-wrap small,
    .home-cost-summary-grid small,
    .home-white-glove-card .mud-typography-body2,
    .home-unsure-card .mud-typography-body2 {
        overflow-wrap: anywhere;
    }

    .home-white-glove-card,
    .home-unsure-card {
        grid-template-columns: 1fr;
    }

    .home-white-glove-card .mud-button-root,
    .home-unsure-card .mud-button-root {
        justify-self: start;
        width: auto;
    }
}