/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-ykqyieu3i0] {
    min-height: 60vh;
}
/* /Components/Layout/NewsletterBand.razor.rz.scp.css */
.newsletter[b-s03z2ugo88] {
    border-top: 1px solid var(--hairline);
    background: var(--fill-subtle);
    padding-block: 2.5rem;
    text-align: center;
}

.newsletter p[b-s03z2ugo88] {
    color: var(--text-soft);
    margin-bottom: 1.25rem;
}

.newsletter .thanks[b-s03z2ugo88] {
    color: var(--green);
    font-weight: 600;
    margin-bottom: 0;
}

.newsletter .signup-error[b-s03z2ugo88] {
    color: var(--red);
    margin-bottom: 0.75rem;
}

.newsletter[b-s03z2ugo88]  .validation-errors {
    color: var(--red);
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.fields[b-s03z2ugo88] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 620px;
    margin-inline: auto;
}

.fields input[b-s03z2ugo88]::placeholder {
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .fields[b-s03z2ugo88] {
        flex-direction: row;
    }

    .fields input[type="email"][b-s03z2ugo88] {
        flex: 1;
    }
}
/* /Components/Layout/SaleBanner.razor.rz.scp.css */
.sale-banner[b-kaw3t40qzj] {
    background: var(--grad-blue);
    color: var(--on-brand);
    font-size: 0.9rem;
}

.banner-row[b-kaw3t40qzj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1rem;
    padding-block: 0.5rem;
    text-align: center;
}

.banner-row a[b-kaw3t40qzj] {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
footer[b-ihvhszuaaw] {
    margin-top: 3rem;
    border-top: 1px solid var(--hairline);
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.92rem;
}

.footer-grid[b-ihvhszuaaw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 2.5rem;
}

.brand-col p[b-ihvhszuaaw] {
    color: var(--text-muted);
    margin-top: 0.75rem;
    max-width: 32ch;
}

.social[b-ihvhszuaaw] {
    display: flex;
    gap: 1rem;
}

    .social a[b-ihvhszuaaw] {
        color: var(--text-muted);
        display: inline-flex;
    }

        .social a:hover[b-ihvhszuaaw] {
            color: var(--text-hover);
        }

.footer-grid nav[b-ihvhszuaaw] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-grid h4[b-ihvhszuaaw] {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.footer-grid nav a[b-ihvhszuaaw] {
    color: var(--text-soft);
    width: fit-content;
}

.legal[b-ihvhszuaaw] {
    display: flex;
    gap: 1.5rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--fill-input);
    color: var(--text-muted);
}

    .legal a[b-ihvhszuaaw] {
        color: var(--text-muted);
    }

        .legal a:hover[b-ihvhszuaaw] {
            color: var(--text-hover);
        }

@media (min-width: 640px) {
    .footer-grid[b-ihvhszuaaw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .footer-grid[b-ihvhszuaaw] {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
.site-header[b-u415dlkoss] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(23, 25, 29, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--hairline);
}

.header-row[b-u415dlkoss] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.65rem;
}

.logo[b-u415dlkoss] {
    display: inline-flex;
    align-items: center;
}

    .logo img[b-u415dlkoss] {
        width: 138px;
        height: auto;
    }

.desktop-nav[b-u415dlkoss] {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

    .desktop-nav a:not(.btn)[b-u415dlkoss] {
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-soft);
    }

        .desktop-nav a:not(.btn):hover[b-u415dlkoss] {
            color: var(--text-hover);
        }

    .desktop-nav .btn[b-u415dlkoss] {
        padding: 0.45rem 1.2rem;
    }

.header-actions[b-u415dlkoss] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart-button[b-u415dlkoss] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--fill-quiet);
    color: var(--text);
    cursor: pointer;
}

    .cart-button[hidden][b-u415dlkoss] {
        display: none;
    }

    .cart-button:hover[b-u415dlkoss] {
        background: var(--fill-hover);
        color: var(--text-hover);
    }

.cart-count[b-u415dlkoss] {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.15rem;
    text-align: center;
}

.mobile-menu[b-u415dlkoss] {
    position: relative;
}

    .mobile-menu > summary[b-u415dlkoss] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--glass-border);
        background: var(--fill-quiet);
        color: var(--text);
        cursor: pointer;
        list-style: none;
    }

        .mobile-menu > summary[b-u415dlkoss]::-webkit-details-marker {
            display: none;
        }

.mobile-panel[b-u415dlkoss] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 230px;
    padding: 0.75rem;
    background: linear-gradient(180deg, #24272C 0%, #1A1C21 100%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
}

    .mobile-panel a:not(.btn)[b-u415dlkoss] {
        padding: 0.55rem 0.75rem;
        border-radius: var(--radius-sm);
        font-weight: 500;
        color: var(--text-soft);
    }

        .mobile-panel a:not(.btn):hover[b-u415dlkoss] {
            background: var(--fill-hover);
            color: var(--text-hover);
        }

    .mobile-panel .btn[b-u415dlkoss] {
        margin-top: 0.5rem;
    }

@media (min-width: 960px) {
    .logo img[b-u415dlkoss] {
        width: 162px;
    }

    .desktop-nav[b-u415dlkoss] {
        display: flex;
    }

    .mobile-menu[b-u415dlkoss] {
        display: none;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.hero[b-e3zi3pqsc4] {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

.lede[b-e3zi3pqsc4] {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-soft);
}

.story[b-e3zi3pqsc4] {
    display: grid;
    gap: 2rem;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.beat p[b-e3zi3pqsc4] {
    margin: 0;
    color: var(--text-soft);
}

/* Centered like the story section above it. */
.what[b-e3zi3pqsc4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 2.5rem 2rem;
    margin-bottom: 3rem;
}

    .what p[b-e3zi3pqsc4] {
        margin: 0;
        color: var(--text-soft);
        max-width: 70ch;
    }

    .what a[b-e3zi3pqsc4] {
        color: var(--brand);
        font-weight: 600;
    }

section[b-e3zi3pqsc4] {
    margin-bottom: 3rem;
}

.philosophy[b-e3zi3pqsc4] {
    --card-min: 250px;
}

.tenet[b-e3zi3pqsc4] {
    padding: 1.3rem;
}

    .tenet h3[b-e3zi3pqsc4] {
        font-size: 1rem;
        margin-bottom: 0.4rem;
        color: var(--brand);
    }

    .tenet p[b-e3zi3pqsc4] {
        margin: 0;
        color: var(--text-soft);
        font-size: 0.9rem;
    }

@media (min-width: 640px) {
    .hero[b-e3zi3pqsc4] {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}
/* /Components/Pages/Changelog.razor.rz.scp.css */
.day[b-00q7uj4169] {
    max-width: 720px;
    margin-bottom: 2rem;
}

    .day h2[b-00q7uj4169] {
        font-size: 1.05rem;
        color: var(--brand);
        margin-bottom: 0.6rem;
    }

    .day ul[b-00q7uj4169] {
        margin: 0;
        padding-left: 1.25rem;
        display: grid;
        gap: 0.4rem;
        color: var(--text-soft);
    }

    .day li[b-00q7uj4169]::marker {
        color: var(--brand);
    }
/* /Components/Pages/Courses/Catalog.razor.rz.scp.css */
.container[b-29ls4lk9v3] {
    --page-head-gap: 1.5rem;
}

.toolbar[b-29ls4lk9v3] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
    max-width: 560px;
}

    .toolbar input[type="search"][b-29ls4lk9v3] {
        flex: 1;
    }

.pills[b-29ls4lk9v3] {
    gap: var(--sp-2);
    margin-bottom: 2rem;
}

/* A .tag that behaves like a filter link; .active promotes it to a button. */
.pill[b-29ls4lk9v3] {
    padding: var(--sp-1) 1rem;
    font-size: 0.88rem;
}

    .pill:hover[b-29ls4lk9v3] {
        color: var(--text-hover);
        border-color: var(--glass-border-hover);
    }

    .pill.active[b-29ls4lk9v3] {
        background: var(--grad-brand);
        border-color: transparent;
        color: var(--on-brand);
        font-weight: 600;
        box-shadow: var(--shadow-btn), var(--edge-top);
    }

.result-count[b-29ls4lk9v3] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

    .result-count a[b-29ls4lk9v3] {
        color: var(--brand);
    }

.tier-section[b-29ls4lk9v3] {
    margin-bottom: 3rem;
    scroll-margin-top: var(--header-h);
}

/* Wrapper that carries the live-search text; the card fills it. */
.search-item[b-29ls4lk9v3] {
    display: grid;
    min-width: 0;
}

#search-results[b-29ls4lk9v3] {
    margin-bottom: 3rem;
}

/* Mastercourses get larger cards than everything below them. */
.flagship[b-29ls4lk9v3] {
    --card-min: 300px;
}

.closer[b-29ls4lk9v3] {
    margin-top: 1rem;
}
/* /Components/Pages/Courses/CourseDetail.razor.rz.scp.css */
.hero[b-k5ajnjkcen] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.subtitle[b-k5ajnjkcen] {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-soft);
}

/* DOM order (hero, rail, content) is the phone order: title first, then the
   buy box, then the long content. */
.detail-grid[b-k5ajnjkcen] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Sections here are spaced by the flex gap, so nested components must not
   add their own bottom margin on top of it. */
.content[b-k5ajnjkcen] {
    --section-gap: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    min-width: 0;
}

.tech-chips[b-k5ajnjkcen] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.legacy-note[b-k5ajnjkcen] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.content .btn-ghost[b-k5ajnjkcen] {
    margin-top: 1rem;
}

.payoff[b-k5ajnjkcen] {
    margin-top: 1rem;
    color: var(--text-soft);
}

    .payoff strong[b-k5ajnjkcen] {
        color: var(--green);
    }

.sample-note[b-k5ajnjkcen] {
    display: inline-block;
    padding: var(--sp-1) 0.8rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--orange) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--orange) 32%, transparent);
    color: var(--orange);
    font-size: var(--fs-sm);
}

/* The curriculum is one timeline: a connector line running behind the
   numbered section nodes, with group headers indented past it. */
.curriculum[b-k5ajnjkcen] {
    position: relative;
    display: grid;
    gap: var(--sp-3);
}

    .curriculum[b-k5ajnjkcen]::before {
        content: "";
        position: absolute;
        left: 1.1rem;
        top: 1rem;
        bottom: 1rem;
        width: 2px;
        background: linear-gradient(180deg, var(--brand-edge), color-mix(in srgb, var(--brand) 8%, transparent));
    }

/* Each path this course belongs to, as a row: where it sits in the sequence,
   what the path leads to, and an arrow that leans in on hover. */
.path-callouts[b-k5ajnjkcen] {
    display: grid;
    gap: var(--sp-3);
}

.path-callout[b-k5ajnjkcen] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    color: var(--text-soft);
}

    .path-callout .step[b-k5ajnjkcen] {
        flex: none;
        align-self: stretch;
        display: flex;
        align-items: center;
        padding-right: var(--sp-4);
        border-right: 1px solid var(--glass-border);
        color: var(--brand);
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: center;
        width: 7.5rem;
        justify-content: center;
    }

    .path-callout .path-body[b-k5ajnjkcen] {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

    .path-callout .path-name[b-k5ajnjkcen] {
        color: var(--text-strong);
        font-size: 1.05rem;
        transition: color 0.15s ease;
    }

    .path-callout:hover .path-name[b-k5ajnjkcen] {
        color: var(--brand);
    }

    .path-callout .outcome[b-k5ajnjkcen] {
        color: var(--green);
        font-size: var(--fs-md);
    }

    .path-callout .go[b-k5ajnjkcen] {
        margin-left: auto;
        flex: none;
        color: var(--brand);
        font-size: 1.2rem;
        transition: transform 0.15s ease;
    }

    .path-callout:hover .go[b-k5ajnjkcen] {
        transform: translateX(3px);
    }

/* Stacked on phones: the step label and arrow share the top line, with the
   path name and outcome beneath them. */
@media (max-width: 639px) {
    .path-callout[b-k5ajnjkcen] {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

        .path-callout .step[b-k5ajnjkcen] {
            align-self: auto;
            width: auto;
            justify-content: flex-start;
            padding-right: 0;
            border-right: 0;
        }

        .path-callout .go[b-k5ajnjkcen] {
            order: 1;
        }

        .path-callout .path-body[b-k5ajnjkcen] {
            order: 2;
            flex-basis: 100%;
        }
}

@media (min-width: 960px) {
    /* The rail spans both rows so the buy box top-aligns with the title. */
    .detail-grid[b-k5ajnjkcen] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "hero rail"
            "content rail";
        gap: 2rem 2.5rem;
        align-items: start;
    }

    .hero[b-k5ajnjkcen] {
        grid-area: hero;
    }

    .content[b-k5ajnjkcen] {
        grid-area: content;
    }

    .rail[b-k5ajnjkcen] {
        grid-area: rail;
        position: sticky;
        top: 5rem;
    }
}
/* /Components/Pages/DevPass.razor.rz.scp.css */
.hero[b-tjjjfi2xyi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.stat-strip[b-tjjjfi2xyi] {
    display: flex;
    gap: 2rem;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

    .stat-strip strong[b-tjjjfi2xyi] {
        color: var(--text-strong);
        font-size: 1.15rem;
        margin-right: 0.3rem;
    }

.container[b-tjjjfi2xyi] {
    --section-gap: 3.5rem;
}

section[b-tjjjfi2xyi] {
    margin-bottom: 3.5rem;
    scroll-margin-top: var(--header-h);
}

.plans[b-tjjjfi2xyi] {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.plan[b-tjjjfi2xyi] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.75rem;
}

    .plan.popular[b-tjjjfi2xyi] {
        border-color: var(--brand-edge);
    }

.plan h3[b-tjjjfi2xyi] {
    margin: 0;
}

.plan-price[b-tjjjfi2xyi] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.amount[b-tjjjfi2xyi] {
    font-size: 2.1rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: var(--text-strong);
}

.cadence[b-tjjjfi2xyi] {
    color: var(--text-muted);
}

.blurb[b-tjjjfi2xyi] {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.plan .check-list[b-tjjjfi2xyi] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    gap: 0.35rem;
}

    /* Plan-specific perks stand out in the brand color. */
    .plan .check-list li.highlight[b-tjjjfi2xyi] {
        color: var(--brand);
        font-weight: 600;
    }

        .plan .check-list li.highlight[b-tjjjfi2xyi]::before {
            color: var(--brand);
        }

.fine-print[b-tjjjfi2xyi] {
    margin-top: 1.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.compare-wrap[b-tjjjfi2xyi] {
    overflow-x: auto;
}

.compare[b-tjjjfi2xyi] {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    border-collapse: collapse;
    font-size: 0.92rem;
}

    .compare th[b-tjjjfi2xyi],
    .compare td[b-tjjjfi2xyi] {
        padding: 0.65rem 0.9rem;
        text-align: left;
        border-bottom: 1px solid var(--hairline);
    }

    .compare thead th[b-tjjjfi2xyi] {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
    }

    .compare tbody th[b-tjjjfi2xyi] {
        color: var(--text-soft);
        font-weight: 500;
        white-space: nowrap;
    }

    .compare td[b-tjjjfi2xyi] {
        color: var(--text);
    }

.compare-note[b-tjjjfi2xyi] {
    max-width: 760px;
    margin: 1.25rem auto 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

    .compare-note a[b-tjjjfi2xyi] {
        color: var(--brand);
        font-weight: 600;
    }

.inside[b-tjjjfi2xyi] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 860px;
    margin-inline: auto;
}

.inside-card[b-tjjjfi2xyi] {
    --stat-size: 1.8rem;
    --stat-color: var(--accent, var(--text-strong));
    gap: 0.25rem;
    padding: var(--sp-4);
    color: var(--text-soft);
}

    /* The label here is a full sentence, so it keeps body size. */
    .inside-card .stat-label[b-tjjjfi2xyi] {
        color: inherit;
        font-size: inherit;
    }

.guarantee-box[b-tjjjfi2xyi] {
    gap: 0;
    padding: 2rem;
    max-width: 640px;
    margin-inline: auto;
}

    .guarantee-box h2[b-tjjjfi2xyi] {
        color: var(--green);
    }

    .guarantee-box p[b-tjjjfi2xyi] {
        margin: 0;
        color: var(--text-soft);
    }

@media (min-width: 640px) {
    .plans[b-tjjjfi2xyi] {
        grid-template-columns: repeat(3, 1fr);
    }

    .inside[b-tjjjfi2xyi] {
        grid-template-columns: repeat(5, 1fr);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* 1. Hero: copy left, intro video right on desktop; stacked on mobile. */
.hero[b-xif4seyy4n] {
    padding-block: 4rem 3rem;
}

.hero-grid[b-xif4seyy4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.hero-copy[b-xif4seyy4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 880px;
    text-align: center;
}

.hero h1[b-xif4seyy4n] {
    font-size: clamp(2.3rem, 1.5rem + 3.6vw, 3.6rem);
}

@media (min-width: 960px) {
    .hero-grid[b-xif4seyy4n] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
    }

    .hero-copy[b-xif4seyy4n] {
        align-items: flex-start;
        text-align: left;
    }

    .hero-actions[b-xif4seyy4n] {
        justify-content: flex-start;
    }
}

.lede[b-xif4seyy4n] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-soft);
    max-width: 58ch;
}

.hero-actions[b-xif4seyy4n] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.browse-link[b-xif4seyy4n] {
    color: var(--text-soft);
    font-size: 0.95rem;
}

.trust[b-xif4seyy4n] {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* 2. Problem */
/* Exactly three cards under a centered heading: explicit columns, because
   auto-fill would keep an empty fourth track and left-shift the row. */
.problem .card-grid[b-xif4seyy4n] {
    grid-template-columns: 1fr;
}

.pain[b-xif4seyy4n] {
    padding: 1.4rem;
}

    .pain h3[b-xif4seyy4n] {
        font-size: 1.05rem;
        margin-bottom: 0.4rem;
    }

    .pain p[b-xif4seyy4n] {
        margin: 0;
        color: var(--text-soft);
        font-size: 0.93rem;
    }

.stakes[b-xif4seyy4n] {
    margin: 2rem auto 0;
    max-width: 62ch;
    text-align: center;
    color: var(--text-soft);
}

    .stakes span[b-xif4seyy4n] {
        display: block;
        margin-top: 0.5rem;
        color: var(--text-strong);
        font-weight: 600;
    }

.more-link[b-xif4seyy4n] {
    margin-top: 1rem;
}

    .more-link a[b-xif4seyy4n] {
        color: var(--brand);
        font-weight: 600;
    }

/* 4. Plan */
.steps[b-xif4seyy4n] {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    counter-reset: step;
}

    .steps li[b-xif4seyy4n] {
        position: relative;
        padding: 1.5rem;
    }

.step-num[b-xif4seyy4n] {
    margin-bottom: var(--sp-3);
}

.steps h3[b-xif4seyy4n] {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

.steps p[b-xif4seyy4n] {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.93rem;
}

.steps a[b-xif4seyy4n] {
    color: var(--brand);
    font-weight: 600;
}

/* 5. Value stack */
.flagship[b-xif4seyy4n] {
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    border-color: var(--accent-edge);
}

.flagship-head[b-xif4seyy4n] {
    max-width: 640px;
    margin-bottom: 1.5rem;
}

    .flagship-head h3[b-xif4seyy4n] {
        font-size: 1.4rem;
    }

    .flagship-head p[b-xif4seyy4n] {
        margin: 0;
        color: var(--text-soft);
    }

/* 5b. Topic sets. The stacked "deck" edges peeking above each card say
   "this is a set of courses", not a single one. */
.tier-sets[b-xif4seyy4n] {
    display: grid;
    gap: 1.75rem;
}

.tier-set[b-xif4seyy4n] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.4rem;
    margin-top: 1.05rem;
    border-color: var(--accent-edge);
}

    .tier-set[b-xif4seyy4n]::before,
    .tier-set[b-xif4seyy4n]::after {
        content: "";
        position: absolute;
        height: 0.55rem;
        border: 1px solid var(--accent-edge);
        border-bottom: none;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        background: rgba(255, 255, 255, 0.04);
    }

    .tier-set[b-xif4seyy4n]::before {
        top: -0.55rem;
        left: 0.9rem;
        right: 0.9rem;
    }

    .tier-set[b-xif4seyy4n]::after {
        top: -1.05rem;
        left: 1.8rem;
        right: 1.8rem;
        opacity: 0.55;
    }

.set-head[b-xif4seyy4n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

    .set-head h3[b-xif4seyy4n] {
        margin: 0;
        font-size: 1.1rem;
    }

.set-blurb[b-xif4seyy4n] {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.set-label[b-xif4seyy4n] {
    margin-top: var(--sp-1);
}

.set-samples[b-xif4seyy4n] {
    gap: 0.4rem;
}

    .set-samples a[b-xif4seyy4n] {
        font-size: 0.92rem;
    }

.set-foot[b-xif4seyy4n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.set-price[b-xif4seyy4n] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.set-link[b-xif4seyy4n] {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}

.value-closer[b-xif4seyy4n] {
    margin-top: 1.75rem;
    color: var(--text-soft);
}

    .value-closer a[b-xif4seyy4n] {
        color: var(--brand);
        font-weight: 600;
    }

/* 8. Free */
.free-grid[b-xif4seyy4n] {
    display: grid;
    gap: 1.25rem;
}

.free-list[b-xif4seyy4n] {
    display: grid;
    gap: 0.75rem;
}

.free-item[b-xif4seyy4n] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.2rem;
    color: var(--text);
}

    .free-item:hover[b-xif4seyy4n] {
        color: var(--text);
    }

        .free-item:hover strong[b-xif4seyy4n] {
            color: var(--brand);
        }

    .free-item span[b-xif4seyy4n] {
        color: var(--text-muted);
        font-size: 0.88rem;
    }

    .free-item .item-link[b-xif4seyy4n],
    .free-item .item-link a[b-xif4seyy4n] {
        color: var(--brand);
        font-weight: 600;
    }

    .free-item .item-link[b-xif4seyy4n] {
        margin-top: 0.25rem;
    }

        .free-item .item-link + .item-link[b-xif4seyy4n] {
            margin-top: 0.1rem;
        }

/* 7. Pricing teaser */
/* Both cards stretch to the same height; buttons pin to the bottom. */
.price-cards[b-xif4seyy4n] {
    display: grid;
    gap: 1.25rem;
    max-width: 860px;
    margin-inline: auto;
}

.price-card .btn[b-xif4seyy4n] {
    margin-top: auto;
}

.price-card[b-xif4seyy4n] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.75rem;
}

    .price-card.popular[b-xif4seyy4n] {
        border-color: var(--brand-edge);
    }

.price-card h3[b-xif4seyy4n] {
    margin: 0;
}

.big[b-xif4seyy4n] {
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: var(--text-strong);
}

    /* Scoped to .cadence rather than every span: the amount itself is now an
       element too, and it has to keep the big type. */
    .big .cadence[b-xif4seyy4n] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
        letter-spacing: 0;
    }

.guarantee-row[b-xif4seyy4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

    .guarantee-row a[b-xif4seyy4n] {
        color: var(--brand);
        font-size: 0.9rem;
        font-weight: 600;
    }

@media (min-width: 640px) {
    .steps[b-xif4seyy4n] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Card column kept narrow so the course card stays about as tall as
       the three link tiles combined; both columns stretch to match. The
       tile column is capped and the pair centered so tiles stay compact. */
    .free-grid[b-xif4seyy4n] {
        grid-template-columns: minmax(0, 25rem) minmax(0, 33rem);
        justify-content: center;
    }

    .price-cards[b-xif4seyy4n] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .problem .card-grid[b-xif4seyy4n],
    .tier-sets[b-xif4seyy4n] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Pages/LearningPaths/PathDetail.razor.rz.scp.css */
.hero[b-e3rirqu47a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 2.25rem;
}

.subtitle[b-e3rirqu47a] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-soft);
    max-width: 65ch;
}

section[b-e3rirqu47a] {
    margin-bottom: 3rem;
}

/* Roadmap: numbered nodes on a vertical connector line. */
.roadmap[b-e3rirqu47a] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: 1.25rem;
}

    .roadmap[b-e3rirqu47a]::before {
        content: "";
        position: absolute;
        left: 1.1rem;
        top: 1rem;
        bottom: -1.5rem;
        width: 2px;
        background: linear-gradient(180deg, var(--brand-edge), color-mix(in srgb, var(--brand) 8%, transparent));
    }

    .roadmap li[b-e3rirqu47a] {
        display: flex;
        align-items: center;
        gap: 1rem;
        position: relative;
    }

/* Sits on the connector line, so it needs to stack above it. */
.node[b-e3rirqu47a] {
    flex: none;
    z-index: 1;
}

.step-card[b-e3rirqu47a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
    min-width: 0;
}

    .step-card:hover[b-e3rirqu47a] {
        color: var(--text);
    }

        .step-card:hover h3[b-e3rirqu47a] {
            color: var(--brand);
        }

    .step-card img[b-e3rirqu47a] {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-bottom: 1px solid var(--glass-border);
    }

        /* Mastercourse art is centered; everything else anchors left. */
        .step-card img.align-left[b-e3rirqu47a] {
            object-position: left center;
        }

.step-body[b-e3rirqu47a] {
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.step-info[b-e3rirqu47a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

    .step-info h3[b-e3rirqu47a] {
        margin: 0;
        transition: color 0.15s ease;
    }

.meta[b-e3rirqu47a] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.about[b-e3rirqu47a] {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    max-width: 52ch;
}

/* Two columns of the shared check-list, tightened for the card. */
.bullets[b-e3rirqu47a] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem 1rem;
    font-size: var(--fs-sm);
}

    .bullets li[b-e3rirqu47a] {
        gap: 0.3rem;
    }

.finish[b-e3rirqu47a] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 0;
    font-size: 1.1rem;
}

.finish-node[b-e3rirqu47a] {
    background: var(--grad-green);
}

.finish strong[b-e3rirqu47a] {
    color: var(--green);
}

.takeaways[b-e3rirqu47a] {
    max-width: 640px;
}

.bundle[b-e3rirqu47a] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}

    .bundle p[b-e3rirqu47a] {
        margin: 0;
        color: var(--text-soft);
    }

    .bundle s[b-e3rirqu47a] {
        color: var(--text-muted);
        margin-left: 0.35rem;
    }

.bundle-actions[b-e3rirqu47a] {
    margin-block: var(--sp-2);
}

@media (min-width: 640px) {
    .step-card[b-e3rirqu47a] {
        flex-direction: row;
    }

        .step-card img[b-e3rirqu47a] {
            width: 220px;
            height: auto;
            aspect-ratio: 16 / 9;
            align-self: stretch;
            object-fit: cover;
            border-bottom: 0;
            border-right: 1px solid var(--glass-border);
        }
}

/* Checklist becomes a fixed-width right rail so its checkmarks left-align
   across every card, vertically centered in the body. */
@media (min-width: 960px) {
    .step-body[b-e3rirqu47a] {
        flex-direction: row;
        gap: 2rem;
    }

    .bullets[b-e3rirqu47a] {
        flex: none;
        width: 26rem;
        align-self: center;
    }
}
/* /Components/Pages/LearningPaths/PathIndex.razor.rz.scp.css */
/* Plain text trio - no boxes; the path rows below carry the visual weight. */
.how[b-xt5orcvvfo] {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

    .how h3[b-xt5orcvvfo] {
        color: var(--brand);
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .how p[b-xt5orcvvfo] {
        margin: 0;
        color: var(--text-soft);
        font-size: 0.92rem;
        max-width: 35ch;
    }

/* Two cards per row on desktop, one on smaller screens. */
.path-list[b-xt5orcvvfo] {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.path-card[b-xt5orcvvfo] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
}

.main[b-xt5orcvvfo] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;
    min-width: 0;
}

    .path-card h2[b-xt5orcvvfo] {
        margin: 0;
    }

        .path-card h2 a[b-xt5orcvvfo] {
            color: var(--text-strong);
        }

            .path-card h2 a:hover[b-xt5orcvvfo] {
                color: var(--brand);
            }

.desc[b-xt5orcvvfo] {
    margin: 0;
    color: var(--text-soft);
}

/* Stats rail: brand-coloured numbers over small-caps labels. Horizontal on
   phones, a vertical side rail from 640px up. */
.stats[b-xt5orcvvfo] {
    --stat-size: 1.5rem;
    --stat-color: var(--brand);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin: 0;
    border-top: 1px solid var(--glass-border);
    padding-top: 1rem;
}

    .stats dd[b-xt5orcvvfo] {
        font-size: var(--fs-2xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.bundle[b-xt5orcvvfo] {
    color: var(--text-soft);
    font-size: var(--fs-base);
}

    .bundle strong[b-xt5orcvvfo] {
        color: var(--text-strong);
        font-size: 1.15rem;
    }

/* Buttons pin to the card bottom so both cards in a row line up. */
.actions[b-xt5orcvvfo] {
    margin-top: auto;
    padding-top: var(--sp-2);
}

/* Centered block, left-aligned text. */
.chooser[b-xt5orcvvfo] {
    color: var(--text-soft);
    max-width: var(--measure-wide);
    margin-inline: auto;
    margin-bottom: var(--sp-6);
}

    .chooser a[b-xt5orcvvfo] {
        color: var(--brand);
        font-weight: 600;
    }

@media (min-width: 640px) {
    /* Three narrow columns pulled together in the middle of the page,
       keeping the text inside them left-aligned. */
    .how[b-xt5orcvvfo] {
        grid-template-columns: repeat(3, minmax(0, 320px));
        justify-content: center;
        gap: 3rem;
    }

    .path-card[b-xt5orcvvfo] {
        flex-direction: row;
        gap: 1.75rem;
    }

    .stats[b-xt5orcvvfo] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.4rem;
        border-top: none;
        border-left: 1px solid var(--glass-border);
        padding: 0.5rem 0.5rem 0.5rem 1.75rem;
    }
}

@media (min-width: 960px) {
    .path-list[b-xt5orcvvfo] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.panel[b-otngnfrsc1] {
    max-width: 640px;
    margin: 3rem auto;
    padding: var(--sp-6);
}

.panel p[b-otngnfrsc1] {
    margin: 0;
    color: var(--text-soft);
}

.links[b-otngnfrsc1] {
    gap: 0.6rem;
}
/* /Components/Pages/Resources.razor.rz.scp.css */
.container[b-jvosmrf4nh] {
    --page-head-gap: 1rem;
}

/* Editorial feature rows divided by hairlines - no small boxes. Inline
   padding keeps the content inset from the rules. */
.feature[b-jvosmrf4nh] {
    display: grid;
    gap: 2rem;
    padding: 2.75rem clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid var(--glass-border);
    align-items: center;
}

    .feature .copy[b-jvosmrf4nh] {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }

    .feature h2[b-jvosmrf4nh] {
        margin: 0;
        font-size: 1.6rem;
    }

    .feature p[b-jvosmrf4nh] {
        margin: 0;
        color: var(--text-soft);
        max-width: 56ch;
    }

.visual[b-jvosmrf4nh] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    justify-self: center;
    width: min(100%, 420px);
}

.link-list[b-jvosmrf4nh] {
    gap: 0.55rem;
}

    .link-list a[b-jvosmrf4nh] {
        font-weight: 600;
    }

.q-list[b-jvosmrf4nh] {
    gap: var(--sp-3);
    font-size: 1.02rem;
}

    .q-list a[b-jvosmrf4nh] {
        color: var(--text);
    }

        .q-list a:hover[b-jvosmrf4nh] {
            color: var(--brand);
        }

.more[b-jvosmrf4nh] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.stores img[b-jvosmrf4nh] {
    display: block;
    height: 48px;
    width: auto;
}

.course-art img[b-jvosmrf4nh] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
}

.mockup[b-jvosmrf4nh] {
    width: min(100%, 340px);
    height: auto;
    margin-inline: auto;
}

/* Get help: two open columns, no boxes. */
.help[b-jvosmrf4nh] {
    padding-block: 2.75rem;
    border-bottom: 1px solid var(--glass-border);
}

.help-grid[b-jvosmrf4nh] {
    display: grid;
    gap: 2rem;
    max-width: 960px;
    margin-inline: auto;
}

    .help-grid h3[b-jvosmrf4nh] {
        margin-bottom: 0.5rem;
    }

    .help-grid p[b-jvosmrf4nh] {
        margin: 0 0 0.75rem;
        color: var(--text-soft);
    }

.go[b-jvosmrf4nh] {
    color: var(--brand);
    font-weight: 600;
}

/* Trailhead partnership panel. Generous inline padding keeps the columns
   near each other with the whitespace on the outside. */
.trailhead[b-jvosmrf4nh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    padding: 3rem clamp(1.5rem, 7vw, 6rem);
    margin-block: 3rem;
}

.trailhead-copy[b-jvosmrf4nh] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: var(--measure);
}

    .trailhead-copy h2[b-jvosmrf4nh] {
        margin: 0;
        font-size: 1.6rem;
    }

    .trailhead-copy p[b-jvosmrf4nh] {
        margin: 0;
        color: var(--text-soft);
        max-width: var(--measure);
    }

/* The logo's dark text needs a light chip on our dark theme. */
.trailhead-logo[b-jvosmrf4nh] {
    flex: none;
    background: var(--surface-light);
    border-radius: var(--radius-md);
    padding: 1.5rem 2rem;
}

    .trailhead-logo img[b-jvosmrf4nh] {
        display: block;
        width: 250px;
        height: auto;
    }

/* Consultation dialog. */
.trailhead-dialog[b-jvosmrf4nh] {
    width: min(92vw, 480px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    color: var(--text);
    padding: var(--sp-5);
    box-shadow: var(--shadow-raised);
}

    .trailhead-dialog[b-jvosmrf4nh]::backdrop {
        background: color-mix(in srgb, var(--bg-deep) 78%, transparent);
        backdrop-filter: blur(3px);
    }

.dialog-head[b-jvosmrf4nh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

    .dialog-head h2[b-jvosmrf4nh] {
        margin: 0;
        font-size: 1.3rem;
    }

.dialog-close[b-jvosmrf4nh] {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}

    .dialog-close:hover[b-jvosmrf4nh] {
        color: var(--text-hover);
    }

.trailhead-dialog form[b-jvosmrf4nh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trailhead-dialog p[b-jvosmrf4nh] {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
}

.trailhead-dialog label[b-jvosmrf4nh] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-soft);
}

.trailhead-dialog select option[b-jvosmrf4nh] {
    background: var(--surface-2);
}

.trailhead-dialog form .btn[b-jvosmrf4nh] {
    margin-top: 0.5rem;
    align-self: flex-start;
}

.trailhead-dialog .dialog-error[b-jvosmrf4nh],
.trailhead-dialog .validation-errors[b-jvosmrf4nh] {
    color: var(--red);
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.9rem;
}

.dialog-success[b-jvosmrf4nh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

    .dialog-success[hidden][b-jvosmrf4nh] {
        display: none;
    }

    .dialog-success h3[b-jvosmrf4nh] {
        margin: 0;
        color: var(--green);
    }

@media (min-width: 640px) {
    .help-grid[b-jvosmrf4nh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .feature[b-jvosmrf4nh] {
        grid-template-columns: 1.1fr 1fr;
        gap: 3rem;
    }

        .feature.flip .copy[b-jvosmrf4nh] {
            order: 2;
        }

        .feature.flip .visual[b-jvosmrf4nh] {
            order: 1;
        }

    .trailhead[b-jvosmrf4nh] {
        flex-direction: row;
        justify-content: space-between;
        gap: 3rem;
    }
}
/* /Components/Shared/Breadcrumbs.razor.rz.scp.css */
.crumbs[b-4nz8vqxa3b] {
    display: flex;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

    .crumbs a[b-4nz8vqxa3b] {
        color: var(--text-muted);
    }

        .crumbs a:hover[b-4nz8vqxa3b] {
            color: var(--text-hover);
        }
/* /Components/Shared/BuyBox.razor.rz.scp.css */
.buy-box[b-fakylh608j] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.5rem;
    border-color: var(--accent-edge, var(--glass-border));
}

.cover[b-fakylh608j] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    margin-bottom: 0.3rem;
}

.price-line[b-fakylh608j] {
    --price-size: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.sale-ends[b-fakylh608j] {
    margin: -0.4rem 0 0;
    color: var(--red);
    font-size: 0.85rem;
    font-weight: 600;
}

.micro[b-fakylh608j] {
    margin: -0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.exclusive[b-fakylh608j] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-strong);
}

.note[b-fakylh608j] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 163, 77, 0.12);
    border: 1px solid rgba(255, 163, 77, 0.3);
    color: var(--orange);
    font-size: 0.87rem;
}

.divider[b-fakylh608j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .divider[b-fakylh608j]::before,
    .divider[b-fakylh608j]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--glass-border);
    }
/* /Components/Shared/CourseCard.razor.rz.scp.css */
.card[b-d8yxzwrs5l] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
}

    .card:hover h3 a[b-d8yxzwrs5l] {
        color: var(--accent, var(--brand));
    }

.thumb[b-d8yxzwrs5l] {
    position: relative;
    display: block;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid var(--glass-border);
}

    .thumb img[b-d8yxzwrs5l] {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

.badge[b-d8yxzwrs5l] {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background-color: #12151C;
    border-color: var(--accent, var(--glass-border));
}

.body[b-d8yxzwrs5l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.1rem 1.1rem;
    flex: 1;
}

.body h3[b-d8yxzwrs5l] {
    margin: 0;
    font-size: 1.05rem;
}

    .body h3 a[b-d8yxzwrs5l] {
        color: var(--text-strong);
        transition: color 0.15s ease;
    }

.desc[b-d8yxzwrs5l] {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta[b-d8yxzwrs5l] {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.free-note[b-d8yxzwrs5l] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.was[b-d8yxzwrs5l] {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.2;
}

.bundled-note[b-d8yxzwrs5l] {
    color: var(--green);
    font-size: 0.85rem;
    font-weight: 600;
}

.price-row[b-d8yxzwrs5l] {
    margin-top: auto;
    padding-top: 0.35rem;
    width: 100%;
    display: flex;
    align-items: center;
    /* Price cluster left, button right. PriceTag is a single element, so a
       sale's extra pieces stay together instead of spreading across the row. */
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* /Components/Shared/CtaBand.razor.rz.scp.css */
.cta[b-96ioq3e22z] {
    padding: var(--sp-6) 1.5rem;
}

    .cta p[b-96ioq3e22z] {
        margin: 0;
        color: var(--text-soft);
        max-width: 55ch;
    }

.actions[b-96ioq3e22z] {
    margin-block: var(--sp-2);
}
/* /Components/Shared/CurriculumSection.razor.rz.scp.css */
/* One group of the curriculum. The page draws the timeline behind this
   component; each section is a numbered node beside a card that expands
   into its lesson list. Group headers are indented past the line so it
   runs unbroken from the first section to the last. */
.group[b-wxpgjuugzq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* Clears the timeline: node width plus the row gap. */
    margin-left: 3.2rem;
}

    .group:not(:first-child)[b-wxpgjuugzq] {
        margin-top: var(--sp-3);
    }

.g-name[b-wxpgjuugzq] {
    font-weight: 650;
    font-size: 1.05rem;
    color: var(--text-strong);
}

.group small[b-wxpgjuugzq] {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.sections[b-wxpgjuugzq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

    .sections > li[b-wxpgjuugzq] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

/* Sits on the connector line, so it needs to stack above it. Centering the
   row keeps it in the middle of the card, open or closed. */
.node[b-wxpgjuugzq] {
    z-index: 1;
}

.sec[b-wxpgjuugzq] {
    flex: 1;
    min-width: 0;
}

/* The section row, whether or not it opens. */
.sec-row[b-wxpgjuugzq] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.7rem var(--sp-4);
    list-style: none;
}

summary.sec-row[b-wxpgjuugzq] {
    cursor: pointer;
}

    summary.sec-row[b-wxpgjuugzq]::-webkit-details-marker {
        display: none;
    }

    summary.sec-row:hover .sec-name[b-wxpgjuugzq] {
        color: var(--brand);
    }

.sec-name[b-wxpgjuugzq] {
    min-width: 0;
    font-weight: 600;
    color: var(--text-strong);
    transition: color 0.15s ease;
}

    /* Subtitle line under a two-level course's section name. */
    .sec-name small[b-wxpgjuugzq] {
        display: block;
        font-weight: 400;
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }

.sec-meta[b-wxpgjuugzq] {
    margin-left: auto;
    flex: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Chevron, rotating when the section opens. */
.caret[b-wxpgjuugzq] {
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.sec[open] .sec-row .caret[b-wxpgjuugzq] {
    transform: rotate(225deg);
}

.lessons[b-wxpgjuugzq] {
    list-style: none;
    margin: 0;
    padding: 0.25rem var(--sp-4) 0.7rem;
    border-top: 1px solid var(--hairline);
}

    .lessons li[b-wxpgjuugzq] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.3rem 0;
        font-size: var(--fs-md);
        color: var(--text-soft);
    }

        .lessons li + li[b-wxpgjuugzq] {
            border-top: 1px dashed var(--hairline);
        }

    .lessons .len[b-wxpgjuugzq] {
        flex: none;
        color: var(--text-muted);
        font-size: var(--fs-sm);
        font-variant-numeric: tabular-nums;
    }
/* /Components/Shared/FactRow.razor.rz.scp.css */
.fact-row[b-pn6winsol0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-md);
}
/* /Components/Shared/FaqList.razor.rz.scp.css */
/* Seamless divider list instead of boxes. A brand plus-badge twists into an
   x when a question opens, and the answer glides open (pure CSS). */
.faq-list[b-g6tddxipr1] {
    border-top: 1px solid var(--glass-border);
    max-width: 860px;
    margin-inline: auto;
}

.faq[b-g6tddxipr1] {
    border-bottom: 1px solid var(--glass-border);
    interpolate-size: allow-keywords;
}

    .faq > summary[b-g6tddxipr1] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.15rem 0.25rem;
        cursor: pointer;
        list-style: none;
        font-weight: 600;
        font-size: 1.02rem;
        color: var(--text);
        transition: color 0.15s ease;
    }

        .faq > summary[b-g6tddxipr1]::-webkit-details-marker {
            display: none;
        }

        .faq > summary[b-g6tddxipr1]::after {
            content: "+";
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 50%;
            border: 1px solid var(--brand-edge);
            background: var(--brand-tint);
            color: var(--brand);
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1;
            transition: transform 0.2s ease;
        }

        .faq > summary:hover[b-g6tddxipr1] {
            color: var(--brand);
        }

    .faq[open] > summary[b-g6tddxipr1] {
        color: var(--brand);
    }

        .faq[open] > summary[b-g6tddxipr1]::after {
            transform: rotate(45deg);
        }

    .faq > :not(summary)[b-g6tddxipr1] {
        padding: 0 3rem 1.3rem 0.25rem;
        max-width: 72ch;
    }

    /* Glide the answer open in browsers that can transition to height: auto. */
    .faq[b-g6tddxipr1]::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
    }

    .faq[open][b-g6tddxipr1]::details-content {
        height: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .faq[b-g6tddxipr1]::details-content {
        transition: none;
    }
}
/* /Components/Shared/GuaranteeRibbon.razor.rz.scp.css */
.guarantee[b-dik2nehjy3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--green);
    font-size: 0.88rem;
    font-weight: 600;
}

.guarantee svg[b-dik2nehjy3] {
    flex: none;
}
/* /Components/Shared/HeroVideo.razor.rz.scp.css */
.frame[b-1gqy7txwuo] {
    border-radius: var(--radius-lg);
    border: 1px solid var(--brand-edge);
    overflow: hidden;
    background: #000;
    line-height: 0;
}

.vertical[b-1gqy7txwuo] {
    width: min(100%, 300px);
    aspect-ratio: 9 / 16;
}

/* Beside the hero copy, hold a usable size instead of flex-shrinking away;
   the copy column gives way instead. */
@media (min-width: 960px) {
    .vertical[b-1gqy7txwuo] {
        width: clamp(16rem, 23vw, 300px);
        flex: none;
    }
}

.horizontal[b-1gqy7txwuo] {
    width: min(100%, 560px);
    aspect-ratio: 16 / 9;
}

.frame video[b-1gqy7txwuo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* /Components/Shared/MeetTimBlock.razor.rz.scp.css */
.meet[b-u31thr91xh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: var(--sp-5);
    text-align: center;
}

    .meet img[b-u31thr91xh] {
        flex: none;
    }

    /* The text column is only as wide as the paragraph, so the stat bar
       ends where the paragraph does; the whole block centers in the panel. */
    .meet > div[b-u31thr91xh] {
        min-width: 0;
    }

    .meet p[b-u31thr91xh] {
        color: var(--text-soft);
        max-width: var(--measure-wide);
    }

@media (min-width: 640px) {
    .meet[b-u31thr91xh] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem 3rem;
        text-align: left;
    }
}

@media (min-width: 960px) {
    .meet[b-u31thr91xh] {
        padding: var(--sp-6) 4.5rem;
        gap: 2.25rem;
    }
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-head[b-7hustuq45i] {
    margin-bottom: var(--page-head-gap, 2rem);
}
/* /Components/Shared/PriceTag.razor.rz.scp.css */
.price-tag[b-l355hei31m] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
}

/* --price-size lets a host scale the whole group; the old price is always a
   step smaller than the price you'd actually pay, never larger. */
.price[b-l355hei31m] {
    font-size: var(--price-size, 1.15rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

    .price.sale[b-l355hei31m] {
        color: var(--red);
    }

    .price.free[b-l355hei31m] {
        color: var(--green);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: calc(var(--price-size, 1.15rem) * 0.92);
    }

.was[b-l355hei31m] {
    font-size: calc(var(--price-size, 1.15rem) * 0.75);
    line-height: 1.2;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* The chip is inline-flex, so baseline alignment would hang it below the
   numbers; centre it against them instead. */
.chip[b-l355hei31m] {
    align-self: center;
    font-size: var(--fs-xs);
}

.note[b-l355hei31m] {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.devpass-only[b-l355hei31m] {
    color: var(--text-soft);
    font-size: var(--fs-md);
    font-weight: 600;
}
/* /Components/Shared/SectionHeading.razor.rz.scp.css */
.heading[b-12zyc7ksug] {
    margin-bottom: 1.75rem;
}
/* /Components/Shared/StatBar.razor.rz.scp.css */
.stat-bar[b-8o4fyc0v6w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat[b-8o4fyc0v6w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
}

/* Same gradient-text treatment devforge.com uses for its display numbers. */
.value[b-8o4fyc0v6w] {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    background: var(--grad-brand);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.label[b-8o4fyc0v6w] {
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .stat-bar[b-8o4fyc0v6w] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Components/Shared/TestimonialSection.razor.rz.scp.css */
/* The section element lives inside this component, so a host page's bare
   `section` rule can't reach it. Hosts that space sections differently set
   --section-gap; course pages use flex gap and set it to 0. */
section[b-uhc4pmqawi] {
    margin-bottom: var(--section-gap, 3rem);
}
/* /Components/Shared/TestimonialStrip.razor.rz.scp.css */
/* Floating pull-quotes - no boxes. The strip scroll-snaps horizontally;
   sets of three or fewer become a static grid from 640px up. */
.strip[b-xr5io18689] {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: 0.5rem;
    scrollbar-width: none;
}

    .strip[b-xr5io18689]::-webkit-scrollbar {
        display: none;
    }

.quote[b-xr5io18689] {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* Every quote is a hard stop, so the arrows and swipes advance exactly
       one at a time instead of skipping by the ~85% "page" scroll. */
    scroll-snap-stop: always;
    position: relative;
    margin: 0;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

    .quote[b-xr5io18689]::before {
        content: "\201C";
        position: absolute;
        top: -0.4rem;
        left: 0;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 3.4rem;
        line-height: 1;
        color: var(--brand);
    }

    .quote blockquote[b-xr5io18689] {
        margin: 0;
        color: var(--text);
        font-size: 1.02rem;
        line-height: 1.6;
    }

    /* The cut-off part of a long quote, revealed by the details toggle below
       it. The row grows while it is open and collapses back when it closes. */
    .quote .tail[b-xr5io18689] {
        display: none;
    }

    .quote:has(.expand[open]) .tail[b-xr5io18689] {
        display: inline;
    }

    .quote:has(.expand[open]) .ellipsis[b-xr5io18689] {
        display: none;
    }

    .quote .expand summary[b-xr5io18689] {
        list-style: none;
        cursor: pointer;
        width: fit-content;
        color: var(--brand);
        font-size: 0.85rem;
        font-weight: 600;
    }

        .quote .expand summary[b-xr5io18689]::-webkit-details-marker {
            display: none;
        }

        .quote .expand summary .less[b-xr5io18689] {
            display: none;
        }

    .quote .expand[open] summary .more[b-xr5io18689] {
        display: none;
    }

    .quote .expand[open] summary .less[b-xr5io18689] {
        display: inline;
    }

    .quote figcaption[b-xr5io18689] {
        margin-top: auto;
        color: var(--text-muted);
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

        .quote figcaption[b-xr5io18689]::before {
            content: "\2014\00a0";
            color: var(--brand);
        }

@media (min-width: 640px) {
    .static[b-xr5io18689] {
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        gap: 2rem;
    }

        .static .quote[b-xr5io18689] {
            flex: unset;
        }

    .carousel[b-xr5io18689] {
        gap: 2rem;
    }

        .carousel .quote[b-xr5io18689] {
            flex-basis: calc((100% - 2rem) / 2);
        }
}

@media (min-width: 960px) {
    .carousel .quote[b-xr5io18689] {
        flex-basis: calc((100% - 4rem) / 3);
    }
}

/* Prev/next arrows via CSS scroll buttons (no JavaScript). Browsers without
   support keep the swipeable strip and get a thin scrollbar instead. */
.carousel[b-xr5io18689] {
    anchor-name: --quotes;
}

/* Reserve a band above the strip for the arrows so they never overlap the
   heading - only where the buttons actually render. */
@supports selector(::scroll-button(inline-end)) {
    .carousel[b-xr5io18689] {
        margin-block-start: 3.4rem;
    }
}

    .carousel[b-xr5io18689]::scroll-button(*) {
        position: absolute;
        position-anchor: --quotes;
        position-area: block-start center;
        justify-self: end;
        margin-block-end: 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        border: 1px solid var(--glass-border);
        background: var(--glass-fill);
        color: var(--text);
        font-size: 1.05rem;
        cursor: pointer;
    }

    .carousel[b-xr5io18689]::scroll-button(inline-start) {
        content: "\2190" / "Previous testimonial";
        margin-inline-end: 3.2rem;
    }

    .carousel[b-xr5io18689]::scroll-button(inline-end) {
        content: "\2192" / "Next testimonial";
    }

    .carousel[b-xr5io18689]::scroll-button(*):hover:not(:disabled) {
        background: var(--glass-fill-hover);
        border-color: var(--glass-border-hover);
    }

    .carousel[b-xr5io18689]::scroll-button(*):disabled {
        opacity: 0.35;
        cursor: default;
    }

@supports not selector(::scroll-button(inline-end)) {
    .carousel[b-xr5io18689] {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }
}
/* /Components/Shared/WhatYouGet.razor.rz.scp.css */
.what-you-get h4[b-11na7eh42s] {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.what-you-get .check-list[b-11na7eh42s] {
    font-size: 0.9rem;
    gap: 0.35rem;
}

.bonus[b-11na7eh42s] {
    color: var(--accent, var(--violet));
    font-weight: 600;
}