/* /Components/Pages/Blog.razor.rz.scp.css */
.kf-blog-grid[b-3kg5wyye3q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    gap: 24px;
}

/* Card links fill their grid cell and stretch the card to equal heights. */
.kf-blog-grid[b-3kg5wyye3q]  a {
    display: block;
    height: 100%;
}

.kf-blog-card[b-3kg5wyye3q] {
    height: 100%;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.kf-blog-card:hover[b-3kg5wyye3q] {
    border-color: rgba(245, 197, 24, 0.5) !important;
    transform: translateY(-2px);
}

.kf-blog-card-title[b-3kg5wyye3q] {
    color: #FFFFFF;
    font-weight: 700;
}

.kf-blog-date[b-3kg5wyye3q] {
    font-family: "Roboto Mono", ui-monospace, monospace;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

/* ── Detail page: light reading card on the dark page ───────────────────────
   The page/section background stays the dark marketing colour; only the article
   card (where the post body appears) is a light, high-contrast reading surface. */
.kf-blog-article[b-3kg5wyye3q] {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
}

/* Admin-authored HTML body — give the raw markup readable rhythm. */
.kf-blog-body[b-3kg5wyye3q] {
    color: #1F2933;
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* Darker than the body text, not white: this card is the one light surface on
   the page, so the inherited marketing-page heading colour was invisible here. */
.kf-blog-body[b-3kg5wyye3q]  h2,
.kf-blog-body[b-3kg5wyye3q]  h3 {
    color: #102A43;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
}

.kf-blog-body[b-3kg5wyye3q]  h2 { font-size: 1.5rem; }
.kf-blog-body[b-3kg5wyye3q]  h3 { font-size: 1.25rem; }

.kf-blog-body[b-3kg5wyye3q]  p {
    margin: 0 0 1.15rem;
}

.kf-blog-body[b-3kg5wyye3q]  a {
    color: #B8860B;
    text-decoration: underline;
}

.kf-blog-body[b-3kg5wyye3q]  ul,
.kf-blog-body[b-3kg5wyye3q]  ol {
    margin: 0 0 1.15rem 1.25rem;
}

.kf-blog-body[b-3kg5wyye3q]  blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid #D4A017;
    color: #52606D;
    font-style: italic;
}

.kf-blog-body[b-3kg5wyye3q]  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
/* /Components/Pages/FAQ.razor.rz.scp.css */
/* ── FAQ ────────────────────────────────────────────────────────────────────── */
[b-z1o2wzo783] .kf-faq .mud-expand-panel {
    background: #1A1A1A;
    border: 1px solid #2E2E2E;
    margin-bottom: -1px;
}
/* /Components/Pages/Features.razor.rz.scp.css */

/* ── Product preview mock widgets ───────────────────────────────────────────── */
.kf-mini-stat[b-344mwrgjoy] {
    flex: 1 1 70px;
    background: #141414;
    border: 1px solid #2E2E2E;
    border-radius: 4px;
    padding: 8px 10px;
}
.kf-mini-stat-num[b-344mwrgjoy] {
    display: block;
    font-family: "Roboto Mono", monospace;
    font-size: 1.1rem;
    font-weight: 500;
}
.kf-num--progress[b-344mwrgjoy] { color: #66BB6A; }
.kf-num--ready[b-344mwrgjoy] { color: #42A5F5; }
.kf-num--attention[b-344mwrgjoy] { color: #FFA726; }
.kf-mini-stat-label[b-344mwrgjoy] {
    font-size: 0.65rem;
    color: #757575;
}


.kf-progress-seg[b-344mwrgjoy] {
    flex: 1;
    height: 8px;
    border-radius: 2px;
    background: #2E2E2E;
}
.kf-progress-seg--done[b-344mwrgjoy] { background: #66BB6A; }

.kf-attn[b-344mwrgjoy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
}
.kf-attn-dot[b-344mwrgjoy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
/* Needs-attention = ochre; behind-pace = muted accent. Never red (destructive only). */
.kf-attn--attention[b-344mwrgjoy] {
    background: rgba(239,108,0,0.10);
    border: 1px solid rgba(239,108,0,0.28);
    color: #FFA726;
}
.kf-attn--pace[b-344mwrgjoy] {
    background: rgba(245,197,24,0.10);
    border: 1px solid rgba(245,197,24,0.28);
    color: #F5C518;
}

/* ── Features (3-col, shape-differentiated icon tiles) ──────────────────────── */
.kf-feature-icon[b-344mwrgjoy] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: rgba(245,197,24,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kf-feature-glyph[b-344mwrgjoy] {
    display: block;
    background: #F5C518;
}
.kf-feature-glyph--circle[b-344mwrgjoy] { width: 14px; height: 14px; border-radius: 50%; }
.kf-feature-glyph--diamond[b-344mwrgjoy] { width: 12px; height: 12px; border-radius: 2px; transform: rotate(45deg); }
.kf-feature-glyph--square[b-344mwrgjoy] { width: 14px; height: 14px; border-radius: 2px; }
/* /Components/Pages/Home.razor.rz.scp.css */
/* koshiFlo marketing homepage — black & yellow language.
   MudBlazor's dark KfAccentTheme supplies surfaces/text/accent; this sheet adds
   the marketing-only visuals Mud can't express (hero photo, spine dots, mocked
   preview widgets). Colours mirror the design handoff. ::deep reaches the
   MudBlazor-rendered children inside the isolated scope. */

.kf-marketing[b-1la2gf6mlx] {
    background: #0A0A0A;
    color: #EDEDED;
    min-height: 100vh;
}

/* ── Hero (2a banner) ───────────────────────────────────────────────────────── */
.kf-hero[b-1la2gf6mlx] {
    position: relative;
    min-height: 620px;
    overflow: hidden;
}
/* <picture> is only a wrapper for choosing the format; left as an inline box it would
   contribute a stray line box of its own height inside the hero. */
.kf-hero picture[b-1la2gf6mlx] {
    display: contents;
}

/* A real <img> now, not a background div — see the comment in Home.razor. object-fit
   reproduces what background-size: cover did, and the explicit width/height on the
   element give the browser the aspect ratio before the bytes arrive, so the hero does
   not shift as it loads. The background colour still covers the gap while it does. */
.kf-hero-photo[b-1la2gf6mlx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    object-fit: cover;
    object-position: center;
}
.kf-hero-scrim[b-1la2gf6mlx] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.9) 100%);
}
.kf-hero-inner[b-1la2gf6mlx] {
    position: relative;
    z-index: 2;
}
.kf-hero-copy[b-1la2gf6mlx] {
    max-width: 760px;
    padding: 90px 0 80px;
}
.kf-hero[b-1la2gf6mlx]  .kf-hero-title {
    color: #FFFFFF;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: -0.01em;
    margin: 22px 0 20px;
}
.kf-hero[b-1la2gf6mlx]  .kf-hero-sub {
    max-width: 520px;
    color: rgba(255,255,255,0.78);
    font-weight: 400;
    line-height: 1.6;
}
.kf-hero[b-1la2gf6mlx]  .kf-hero-badge {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Wordmark (used by header/footer, rendered outside this component's scope) */
[b-1la2gf6mlx] .kf-wordmark {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

/* ── Sections ───────────────────────────────────────────────────────────────── */
.kf-section[b-1la2gf6mlx] {
    padding: 96px 0;
}
.kf-section--raised[b-1la2gf6mlx] {
    background: #141414;
    border-top: 1px solid #2E2E2E;
}
.kf-section-head[b-1la2gf6mlx] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}
.kf-section[b-1la2gf6mlx]  .kf-section-title {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin-bottom: 12px;
}

/* ── Problem: old way vs koshiFlo way ───────────────────────────────────────── */
/* ── Founder ────────────────────────────────────────────────────────────────── */
/* ::deep because the class is handed to MudPaper, whose markup is rendered by the
   component itself and so does not carry this file's scope attribute. */
[b-1la2gf6mlx] .kf-founder {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
@media (max-width: 599px) {
    [b-1la2gf6mlx] .kf-founder {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
.kf-founder-photo[b-1la2gf6mlx] {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    /* Sized and shaped here rather than on the image so the placeholder below and a real
       photograph occupy exactly the same space — swapping one for the other must not
       move the copy beside it. */
}
.kf-founder-monogram[b-1la2gf6mlx] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,197,24,0.10);
    border: 1px solid rgba(245,197,24,0.32);
    color: var(--mud-palette-primary, #FFD54F);
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.kf-founder-copy[b-1la2gf6mlx] {
    min-width: 0;
}

/* ── How it works: vertical spine (diamond = milestone, circle = routine) ───── */
[b-1la2gf6mlx] .kf-spine .mud-timeline-item-dot {
    background: transparent;
    box-shadow: none;
}
.kf-spine-dot[b-1la2gf6mlx] {
    display: block;
    width: 16px;
    height: 16px;
    background: var(--mud-palette-primary, #FFD54F);
}
.kf-spine-dot--circle[b-1la2gf6mlx] { border-radius: 50%; }
.kf-spine-dot--diamond[b-1la2gf6mlx] { border-radius: 2px; transform: rotate(45deg); }
[b-1la2gf6mlx] .kf-spine .kf-step-title {
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
}
.kf-milestone-tag[b-1la2gf6mlx] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #F5C518;
    border: 1px solid rgba(245,197,24,0.4);
    border-radius: 10px;
    padding: 1px 8px;
}

.kf-pill[b-1la2gf6mlx] {
    font-size: 0.65rem;
    padding: 2px 10px;
    border-radius: 10px;
}
.kf-pill--ready[b-1la2gf6mlx] {
    background: rgba(21,101,192,0.18);
    color: #42A5F5;
}

/* ── Final CTA email field ──────────────────────────────────────────────────── */
.kf-email[b-1la2gf6mlx] {
    max-width: 300px;
    width: 100%;
}

/* ── Responsive / motion ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .kf-section[b-1la2gf6mlx] { padding: 64px 0; }
    .kf-hero-copy[b-1la2gf6mlx] { padding: 64px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
    html[b-1la2gf6mlx] { scroll-behavior: auto; }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.kf-not-found-page[b-0o9ki4or8s] {
    color-scheme: dark;
}

.kf-not-found-hero[b-0o9ki4or8s] {
    min-height: calc(100vh - 176px);
    overflow: hidden;
    position: relative;
}

.kf-not-found-photo[b-0o9ki4or8s] {
    background-color: #0A0A0A;
    background-image: url('/images/hero_image_2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    inset: 0;
    position: absolute;
}

.kf-not-found-scrim[b-0o9ki4or8s] {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 42%, rgba(0, 0, 0, 0.94) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 64%, rgba(0, 0, 0, 0.5) 100%);
    inset: 0;
    position: absolute;
}

.kf-not-found-copy[b-0o9ki4or8s] {
    max-width: 760px;
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 11vw, 8rem);
    position: relative;
    z-index: 2;
}

[b-0o9ki4or8s] .kf-not-found-badge {
    font-weight: 700;
    letter-spacing: 0.08em;
}

[b-0o9ki4or8s] .kf-not-found-title {
    color: #FFFFFF;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.98;
    margin: 1.5rem 0 1.25rem;
}

[b-0o9ki4or8s] .kf-not-found-sub {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
    line-height: 1.6;
    max-width: 580px;
}

@media (max-width: 600px) {
    .kf-not-found-hero[b-0o9ki4or8s] {
        min-height: auto;
    }

    .kf-not-found-copy[b-0o9ki4or8s] {
        padding: 3rem 0 5rem;
    }
}
/* /Components/Pages/Plans.razor.rz.scp.css */
/* koshiFlo plans page — black & yellow language. MudBlazor's dark KfAccentTheme
   supplies surfaces/text/accent; this sheet scopes the marketing shell + the
   plan-card treatment. (Scoped per-component, so it repeats the shared shell
   rules from Home.razor.css rather than sharing them.) */

.kf-marketing[b-14vkvqq3ir] {
    background: #0A0A0A;
    color: #EDEDED;
    min-height: 100vh;
}

.kf-plans-hero[b-14vkvqq3ir] {
    position: relative;
    background: #141414;
    border-bottom: 1px solid #2E2E2E;
}
.kf-hero-inner[b-14vkvqq3ir] {
    position: relative;
    z-index: 2;
}
.kf-plans-head[b-14vkvqq3ir] {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 56px 0 72px;
}
.kf-plans-head[b-14vkvqq3ir]  .kf-section-title {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin-bottom: 12px;
}
.kf-plans-head[b-14vkvqq3ir]  .kf-hero-badge {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.kf-section[b-14vkvqq3ir] {
    padding: 72px 0 96px;
}

/* ── Plan cards ─────────────────────────────────────────────────────────────── */
[b-14vkvqq3ir] .kf-plan--featured {
    border-color: rgba(245,197,24,0.5) !important;
    box-shadow: 0 0 0 1px rgba(245,197,24,0.5);
}
.kf-price[b-14vkvqq3ir] {
    font-family: "Roboto Mono", monospace;
    font-size: 2rem;
    font-weight: 500;
    color: #FFFFFF;
}
[b-14vkvqq3ir] .kf-plan-features {
    padding: 0;
}
[b-14vkvqq3ir] .kf-plan-features .mud-list-item {
    padding-left: 0;
    padding-right: 0;
}
/* /Components/Shared/Marketing/MarketingFooter.razor.rz.scp.css */
/* Marketing footer. ::deep reaches the MudText/MudLink-rendered children. */
[b-x5hss00wof] .kf-wordmark {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}
.gap-6[b-x5hss00wof] { gap: 1.75rem; }
/* /Components/Shared/Marketing/MarketingHeader.razor.rz.scp.css */
/* Marketing nav bar. ::deep reaches the MudLink/MudButton-rendered children. */
.kf-marketing-nav[b-29y8gl27be] {
    position: relative;
    z-index: 3;
}
[b-29y8gl27be] .kf-wordmark {
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}
.gap-6[b-29y8gl27be] { gap: 2rem; }

/* Mobile hamburger menu: highlight "Get started" as the primary CTA,
   set apart from the plain links by the divider above it. */
[b-29y8gl27be] .kf-mobile-cta {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    border-radius: 6px;
    margin: 4px 8px 0;
}
[b-29y8gl27be] .kf-mobile-cta:hover {
    background-color: var(--mud-palette-primary-darken);
}
/* /Components/Shared/Marketing/ProductScreenshot.razor.rz.scp.css */
.kf-shot[b-z30ygull9s] {
    margin: 0;
}

.kf-shot-img[b-z30ygull9s] {
    display: block;
    width: 100%;
    /* Overrides the height attribute, which is there for the aspect ratio rather than to
       set a size. Without this the image would be letterboxed at its intrinsic height. */
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background-color: #1a1a1a;
}

.kf-shot-caption[b-z30ygull9s] {
    margin-top: 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary, #9E9E9E);
}
/* /Components/Shared/Marketing/Testimonials.razor.rz.scp.css */
.kf-testimonials[b-jzvvvab3v2] {
    padding: 72px 0;
}

.kf-testimonial-list[b-jzvvvab3v2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

/* ::deep: the class goes to MudPaper, whose markup the component renders itself and so
   does not carry this file's scope attribute. */
[b-jzvvvab3v2] .kf-testimonial {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kf-testimonial-quote[b-jzvvvab3v2] {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #EDEDED;
}

/* The default blockquote indent reads as a nested block rather than a quotation here. */
.kf-testimonial-quote[b-jzvvvab3v2]::before {
    content: open-quote;
}
.kf-testimonial-quote[b-jzvvvab3v2]::after {
    content: close-quote;
}

.kf-testimonial-by[b-jzvvvab3v2] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

.kf-testimonial-by cite[b-jzvvvab3v2] {
    font-style: normal;
    font-weight: 600;
    color: #EDEDED;
}

.kf-testimonial-club[b-jzvvvab3v2] {
    color: var(--mud-palette-text-secondary, #9E9E9E);
}
/* /Components/Shared/Marketing/TrustBand.razor.rz.scp.css */
/* Quieter than the sections above it and darker than the page, so it reads as a
   footer preamble rather than another pitch. */
.kf-trust[b-i0wr8mrro4] {
    background: #0D0D0D;
    border-top: 1px solid #2E2E2E;
    padding: 56px 0 48px;
}

.kf-trust[b-i0wr8mrro4]  .kf-trust-heading {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8125rem;
    margin-bottom: 28px;
}

.kf-trust-list[b-i0wr8mrro4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px 32px;
}

.kf-trust-item[b-i0wr8mrro4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kf-trust-item[b-i0wr8mrro4]  .kf-trust-icon {
    color: #F5C518;
    font-size: 1.375rem;
    flex: 0 0 auto;
    margin-top: 2px;
}

.kf-trust[b-i0wr8mrro4]  .kf-trust-title {
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 2px;
}

/* Deliberately not Color.Secondary: at this size the muted palette drops below
   4.5:1 on the band background. */
.kf-trust[b-i0wr8mrro4]  .kf-trust-body {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}

.kf-trust[b-i0wr8mrro4]  .kf-trust-more {
    display: block;
    margin-top: 32px;
    color: rgba(255, 255, 255, 0.72);
}

.kf-trust[b-i0wr8mrro4]  .kf-trust-link {
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.kf-trust[b-i0wr8mrro4]  .kf-trust-link:hover,
.kf-trust[b-i0wr8mrro4]  .kf-trust-link:focus-visible {
    text-decoration-thickness: 0.14em;
}

@media (max-width: 600px) {
    .kf-trust[b-i0wr8mrro4] {
        padding: 40px 0 36px;
    }

    .kf-trust-list[b-i0wr8mrro4] {
        gap: 22px;
    }
}