/* /Components/BrewTimeline.razor.rz.scp.css */
.bt-row[b-sefjuw3cx5] {
    flex-wrap: wrap;
    row-gap: 0.45rem; /* breathing room between wrapped timeline rows */
}

/* Phones: same wrapping behavior, just denser blocks so more of the brew fits per row. */
@media (max-width: 640.98px) {
    /* !important: padding/min-width arrive as inline styles from BlockStyle. */
    .bt-row .bt-step[b-sefjuw3cx5] {
        padding: 0.1rem 0.4rem !important;
        min-width: 2.4rem !important;
        font-size: 0.9em;
    }

    /* Long pauses don't need proportionally long connectors on a phone. */
    .bt-row .bt-gap[b-sefjuw3cx5] {
        max-width: 48px;
    }
}
/* /Components/CoffeeGapChips.razor.rz.scp.css */
/* Word-width answer chips. Deliberately not .rating-pill: that's a 5-column grid sized for digits,
   and these are variable-width words that need to wrap on a phone. Same visual language though —
   palette variables only, and the same 44px minimum touch target. */
.gap-chips[b-o3gzxfbgdh] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.gap-chip[b-o3gzxfbgdh] {
    min-height: 2.75rem; /* 44px touch target on phones */
    padding: 0 .85rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: .95rem;
    cursor: pointer;
}

/* Hover is paired with focus-visible so the affordance exists for taps and keyboards too. */
.gap-chip:hover[b-o3gzxfbgdh],
.gap-chip:focus-visible[b-o3gzxfbgdh] {
    border-color: var(--accent);
    color: var(--accent);
}

/* A value a web lookup proposed. Highlighted, never pre-selected: the member is the one vouching
   for it, so the tap has to stay theirs. */
.gap-chip-suggested[b-o3gzxfbgdh] {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* What they actually picked, in the all-fields form where a tap selects rather than saves. Filled,
   so "chosen" is unmistakably louder than "suggested" — the same relationship .rating-pill-active
   has to a plain pill. */
.gap-chip-active[b-o3gzxfbgdh],
.gap-chip-active:hover[b-o3gzxfbgdh],
.gap-chip-active:focus-visible[b-o3gzxfbgdh] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

/* "Not listed" reads as secondary but stays a full-size chip: it has to be as easy to tap as a
   guess, or the careful answers are the ones we lose. */
.gap-chip-quiet[b-o3gzxfbgdh] {
    color: var(--muted);
    border-style: dashed;
}

.gap-chip:disabled[b-o3gzxfbgdh] {
    opacity: .55;
    cursor: default;
}

/* The free-text answer: input and Save stay on one line, and the input takes the slack. */
.gap-entry[b-o3gzxfbgdh] {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex: 1 1 16rem;
    min-width: 0;
}

.gap-entry input[b-o3gzxfbgdh] {
    min-height: 2.75rem;
    min-width: 0;
}

.gap-entry .btn[b-o3gzxfbgdh] {
    min-height: 2.75rem;
    white-space: nowrap;
}
/* /Components/CoffeeGapStrip.razor.rz.scp.css */
/* Four stacked questions in one card need a little separation, or the chips of one field read as
   belonging to the label of the next. A hairline rule is enough; boxes would make a form of it. */
.gap-field + .gap-field[b-6p84pgeddv] {
    border-top: 1px solid var(--line);
    padding-top: .6rem;
}
/* /Components/CoffeeIntakeWorkspace.razor.rz.scp.css */
/* Scoped styles for the shared intake workspace. Theme-agnostic (used under both the
   editorial and classic looks), built from the shared palette in wwwroot/app.css. */

/* ---- Edit affordance on the generated-profile card ------------------------- */
/* Icon-only pencil; the 44px square keeps the tap target comfortable. */
.edit-profile-btn[b-p4xq6gzv5g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.edit-profile-btn:hover[b-p4xq6gzv5g],
.edit-profile-btn:focus-visible[b-p4xq6gzv5g] {
    color: var(--accent);
    border-color: var(--accent);
}

.edit-profile-btn i[b-p4xq6gzv5g] {
    font-size: .95rem;
}

/* ---- Coffee Journey nudge (under the tasting-note chips) ------------------- */
.journey-nudge[b-p4xq6gzv5g] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: .25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.journey-nudge span[b-p4xq6gzv5g] {
    white-space: nowrap;
}

.journey-nudge:hover[b-p4xq6gzv5g],
.journey-nudge:focus-visible[b-p4xq6gzv5g] {
    text-decoration: underline;
}

/* ---- Full-width send action ------------------------------------------------ */
/* Stretches whatever SendButton renders. ::deep reaches its child markup: a plain
   button (single Aiden) fills the width; the multi-Aiden split group fills it with
   the main action growing and the caret staying compact. */
.send-full[b-p4xq6gzv5g]  > .btn {
    width: 100%;
}

.send-full[b-p4xq6gzv5g]  > .btn-group {
    display: flex;
    width: 100%;
}

.send-full[b-p4xq6gzv5g]  > .btn-group > .btn {
    flex: 1 1 auto;
}

.send-full[b-p4xq6gzv5g]  > .btn-group > .dropdown-toggle-split {
    flex: 0 0 auto;
    width: auto;
}

/* ---- Edit-recipe drawer ---------------------------------------------------- */
/* Mirrors the editorial drawer's pattern (bottom sheet on phones, centred modal on
   desktop) but stands on its own so it renders under the classic look too. Always
   mounted; the `open` modifier drives the slide/fade transition. */
.ci-drawer-host[b-p4xq6gzv5g] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    pointer-events: none;
}

.ci-drawer-scrim[b-p4xq6gzv5g] {
    position: absolute;
    inset: 0;
    background: rgba(43, 33, 26, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.ci-drawer-host.open[b-p4xq6gzv5g] {
    pointer-events: auto;
}

.ci-drawer-host.open .ci-drawer-scrim[b-p4xq6gzv5g] {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile-first: a bottom sheet that slides up. */
.ci-drawer[b-p4xq6gzv5g] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(43, 33, 26, .18);
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.ci-drawer-host.open .ci-drawer[b-p4xq6gzv5g] {
    transform: translateY(0);
}

/* Grab handle affordance on the sheet. */
.ci-drawer[b-p4xq6gzv5g]::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
    margin: 8px auto 0;
}

.ci-drawer-head[b-p4xq6gzv5g] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 18px 0;
}

.ci-drawer-body[b-p4xq6gzv5g] {
    flex: 1;
    overflow: auto;
    padding: 14px 18px 18px;
}

.ci-drawer-foot[b-p4xq6gzv5g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

.ci-drawer-close[b-p4xq6gzv5g] {
    margin-left: auto;
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.ci-drawer-close:hover[b-p4xq6gzv5g],
.ci-drawer-close:focus-visible[b-p4xq6gzv5g] {
    color: var(--accent);
    border-color: var(--accent);
}

/* Desktop: a centred modal that scales/fades in. */
@media (min-width: 768px) {
    .ci-drawer[b-p4xq6gzv5g] {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(460px, calc(100% - 48px));
        max-height: min(88vh, 780px);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(43, 33, 25, .22);
        transform: translate(-50%, -50%) scale(.96);
        opacity: 0;
        visibility: hidden;
        transition: transform .28s cubic-bezier(.22, .61, .36, 1),
                    opacity .28s ease,
                    visibility 0s linear .28s;
    }

    .ci-drawer-host.open .ci-drawer[b-p4xq6gzv5g] {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
        transition: transform .28s cubic-bezier(.22, .61, .36, 1),
                    opacity .28s ease;
    }

    .ci-drawer[b-p4xq6gzv5g]::before {
        display: none;
    }
}
/* /Components/InstallAppLink.razor.rz.scp.css */
/* A link-styled button so it sits inline with the footer's anchors (which SiteFooter styles). */
.install-link[b-hr2vnl9f1a] {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}

.install-link:hover[b-hr2vnl9f1a] {
    color: var(--accent-hover);
    text-decoration: underline;
}
/* /Components/InstallPrompt.razor.rz.scp.css */
/* Install guide modal. Mobile-first: a bottom sheet that slides up on phones; a centered card on
   wider screens. Styled entirely off the palette variables so it follows the active theme. */
.install-host[b-bqepkosx8j] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;      /* bottom sheet on phones */
    justify-content: center;
}

.install-scrim[b-bqepkosx8j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: install-fade-b-bqepkosx8j 0.2s ease-out;
}

.install-sheet[b-bqepkosx8j] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    background: var(--surface, #fff);
    color: var(--ink, #211f1a);
    border-top-left-radius: var(--radius, 14px);
    border-top-right-radius: var(--radius, 14px);
    padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: install-slide-up-b-bqepkosx8j 0.28s cubic-bezier(0.05, 0.7, 0.25, 1);
}

.install-close[b-bqepkosx8j] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted, #7c7458);
    font-size: 1rem;
    border-radius: 50%;
    cursor: pointer;
}

.install-close:hover[b-bqepkosx8j],
.install-close:focus-visible[b-bqepkosx8j] {
    background: var(--surface-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #211f1a);
}

.install-app-icon[b-bqepkosx8j] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid var(--line, #e2d8bc);
    margin-bottom: 0.75rem;
}

.install-title[b-bqepkosx8j] {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 0.4rem;
}

.install-sub[b-bqepkosx8j] {
    color: var(--muted, #7c7458);
    font-size: 0.95rem;
    margin: 0 auto 1.25rem;
    max-width: 24rem;
}

/* iOS steps — left-aligned inside the centered sheet, each with its glyph badge. */
.install-steps[b-bqepkosx8j] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
}

.install-steps li[b-bqepkosx8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    font-size: 0.95rem;
}

.install-steps li + li[b-bqepkosx8j] {
    border-top: 1px solid var(--line, #e2d8bc);
}

.install-step-ico[b-bqepkosx8j] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft, rgba(var(--accent-rgb, 46, 74, 62), 0.12));
    color: var(--accent, #2e4a3e);
    font-size: 1.15rem;
}

.install-later[b-bqepkosx8j] {
    margin-top: 0.5rem;
    color: var(--muted, #7c7458);
    text-decoration: none;
}

.install-later:hover[b-bqepkosx8j] {
    color: var(--ink, #211f1a);
}

@media (min-width: 768px) {
    .install-host[b-bqepkosx8j] {
        align-items: center;    /* centered card on desktop */
    }

    .install-sheet[b-bqepkosx8j] {
        max-width: 26rem;
        border-radius: var(--radius, 14px);
        padding: 2rem;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
        animation: install-pop-b-bqepkosx8j 0.22s cubic-bezier(0.05, 0.7, 0.25, 1);
    }
}

@keyframes install-fade-b-bqepkosx8j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes install-slide-up-b-bqepkosx8j {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes install-pop-b-bqepkosx8j {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .install-scrim[b-bqepkosx8j],
    .install-sheet[b-bqepkosx8j] {
        animation: none;
    }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Same error-UI styling as MainLayout.razor.css — those rules are scoped to MainLayout, so
   this layout needs its own copy (without it the banner renders permanently visible). */
#blazor-error-ui[b-j49joeuw3k] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #1A1D21;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-j49joeuw3k] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-cjjutrszy1] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #1A1D21;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cjjutrszy1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vuokai2ak8],
.components-reconnect-repeated-attempt-visible[b-vuokai2ak8],
.components-reconnect-failed-visible[b-vuokai2ak8],
.components-pause-visible[b-vuokai2ak8],
.components-resume-failed-visible[b-vuokai2ak8],
.components-rejoining-animation[b-vuokai2ak8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-retrying[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-failed[b-vuokai2ak8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vuokai2ak8] {
    display: block;
}


#components-reconnect-modal[b-vuokai2ak8] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vuokai2ak8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vuokai2ak8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vuokai2ak8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vuokai2ak8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-vuokai2ak8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vuokai2ak8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vuokai2ak8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vuokai2ak8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vuokai2ak8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vuokai2ak8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-vuokai2ak8] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-vuokai2ak8] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-vuokai2ak8] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-vuokai2ak8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vuokai2ak8] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vuokai2ak8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vuokai2ak8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vuokai2ak8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AdminAnalytics.razor.rz.scp.css */
.activity-feed .list-group-item[b-br6j1aiam9] {
    background: var(--surface);
    border-color: var(--line);
}

.activity-icon[b-br6j1aiam9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: .8rem;
    color: var(--accent-contrast);
    background: var(--muted);
}

/* One color per activity family (see ActivityClass in the page). */
.activity-people[b-br6j1aiam9] {
    background: var(--accent);
}

.activity-content[b-br6j1aiam9] {
    background: rgb(var(--success-rgb));
}

.activity-community[b-br6j1aiam9] {
    background: var(--ink);
}

.activity-brewing[b-br6j1aiam9] {
    background: rgb(var(--info-rgb));
}

.activity-premium[b-br6j1aiam9] {
    background: rgb(var(--warning-rgb));
    color: var(--ink); /* white on the warning yellow is unreadable */
}

.activity-ai[b-br6j1aiam9] {
    background: var(--muted);
}
/* /Components/Pages/AdminCatalog.razor.rz.scp.css */
/* The maintenance grid needs more room than the site's reading column. .editorial-content caps
   content at 1320px (theme-editorial.css) and centres it, which left the nine columns overflowing
   into a horizontal scroll. This breaks just the grid out to the full viewport while the rest of
   the page keeps the normal measure.

   Deliberately not 100vw: that includes the vertical scrollbar's width and would itself cause a
   horizontal page scroll. The gutter keeps a little breathing room at both edges. */
.grid-bleed[b-smceetdxys] {
    --bleed-gutter: 1.25rem;
    width: calc(100vw - (2 * var(--bleed-gutter)));
    margin-inline: calc(50% - 50vw + var(--bleed-gutter));
}

/* Below the desktop breakpoint the reading column is already near full width, so bleeding adds
   nothing and the inner container's own overflow handles the width instead — that keeps the page
   itself from ever scrolling sideways. */
@media (max-width: 900px) {
    .grid-bleed[b-smceetdxys] {
        width: 100%;
        margin-inline: 0;
    }
}
/* /Components/Pages/CoffeeDetail.razor.rz.scp.css */
/* Coffee photo thumbnail; the click-to-enlarge overlay is the shared PhotoLightbox component. */

.coffee-thumb[b-1qsqqtj8ue] {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: .5rem;
    cursor: pointer;
}

.coffee-thumb:focus-visible[b-1qsqqtj8ue] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Recreated 1:1 from design_handoff_landing_page/Landing Page.html (Toasted Sand palette).
   Values are final — don't round or "normalize" them. Differences from the reference on purpose:
   - .btn/.btn-primary/.btn-ghost are .lp-btn/.lp-btn-primary/.lp-btn-ghost (Bootstrap collision);
   - the product-shot <iframe>s are static <img> screenshots;
   - the nav bar wears the app TopNav's skin (60/52px, kettle brand, 13.5px links) instead of
     the reference's 64px "AP"-tile bar, and the footer is the shared <SiteFooter/> — the site
     and the landing must read as one product;
   - the palette variables live on .landing (not :root) so the page is always Toasted Sand,
     whatever theme the visitor's device has picked for the app. */

.landing[b-qexe2qbbxu] {
    --bg: #F8F1E2;
    --surface: #FFFDF6;
    --surface-2: #F0E8D3;
    --line: #E2D8BC;
    --line-strong: #C9BC9A;
    --ink: #211F1A;
    --muted: #7C7458;
    --accent: #2E4A3E;
    --accent-hover: #243B31;
    --hero-fg: #F2EFE4;
    --hero-muted: #C4D2C6;
    --gold: #C9922E;
    --gold-soft: #F3E7C8;
    --gold-ink: #6E5210;
    --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", Consolas, monospace;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.6 var(--font);
    text-wrap: pretty;
}

a[b-qexe2qbbxu] { color: var(--accent); text-decoration: none; }
a:hover[b-qexe2qbbxu] { color: var(--accent-hover); }

.wrap[b-qexe2qbbxu] { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.eyebrow[b-qexe2qbbxu] { font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.lp-btn[b-qexe2qbbxu] { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 10px; font: 600 15px var(--font); border: none; cursor: pointer; transition: background .15s; }
.lp-btn-primary[b-qexe2qbbxu] { background: var(--accent); color: #fff; }
.lp-btn-primary:hover[b-qexe2qbbxu] { background: var(--accent-hover); color: #fff; }
.lp-btn-ghost[b-qexe2qbbxu] { background: transparent; color: var(--accent); border: 1px solid var(--line-strong); }
.lp-btn-ghost:hover[b-qexe2qbbxu] { background: var(--surface); }

/* The bar mirrors the app TopNav's skin (60px, blur 6, 13.5px links, kettle brand) so the
   landing and the app read as one site; the links/CTAs stay marketing-specific. */
nav[b-qexe2qbbxu] { position: sticky; top: 0; z-index: 10; background: rgba(252, 248, 238, .85); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
/* Same centered 1320px column as the app TopNav (not the page's 1080px .wrap), so the brand
   and the right-hand cluster sit in exactly the same spot on every page of the site. */
.nav-in[b-qexe2qbbxu] { display: flex; align-items: center; gap: 26px; height: 60px; max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.logo[b-qexe2qbbxu] { display: flex; align-items: center; gap: 10px; font: 700 15px var(--font); letter-spacing: -.01em; color: var(--ink); }
.logo:hover[b-qexe2qbbxu] { color: var(--ink); }
.nav-links[b-qexe2qbbxu] { display: flex; gap: 26px; margin: 0 auto; font: 500 13.5px var(--font); }
.nav-links a[b-qexe2qbbxu] { color: var(--muted); transition: color .15s ease; }
.nav-links a:hover[b-qexe2qbbxu] { color: var(--accent); }
.nav-cta[b-qexe2qbbxu] { padding: 9px 18px; border-radius: 8px; background: var(--accent); color: #fff; font: 600 14px var(--font); }
.nav-cta:hover[b-qexe2qbbxu] { background: var(--accent-hover); color: #fff; }

header[b-qexe2qbbxu] { padding: 88px 0 0; text-align: center; }
h1[b-qexe2qbbxu] { font: 700 clamp(38px, 5.5vw, 58px)/1.08 var(--font); letter-spacing: -.03em; margin: 18px auto 0; max-width: 15ch; }
.sub[b-qexe2qbbxu] { font: 400 19px/1.55 var(--font); color: var(--muted); max-width: 52ch; margin: 20px auto 0; }
.hero-ctas[b-qexe2qbbxu] { display: flex; gap: 14px; justify-content: center; margin-top: 32px; }
.hero-note[b-qexe2qbbxu] { margin-top: 14px; font: 400 13px var(--font); color: var(--muted); }

.shot[b-qexe2qbbxu] { margin: 64px auto 0; max-width: 1020px; border: 1px solid var(--line-strong); border-radius: 16px 16px 0 0; border-bottom: none; overflow: hidden; background: var(--surface); box-shadow: 0 30px 80px -30px rgba(33, 31, 26, .35); }
.shot-bar[b-qexe2qbbxu] { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.shot-bar i[b-qexe2qbbxu] { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.shot-vp[b-qexe2qbbxu] { height: 560px; overflow: hidden; }
.shot-vp img[b-qexe2qbbxu] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-phone[b-qexe2qbbxu] { display: none; }

.band[b-qexe2qbbxu] { background: var(--accent); color: var(--hero-fg); }
.band .wrap[b-qexe2qbbxu] { display: flex; gap: 48px; justify-content: center; padding: 26px 32px; flex-wrap: wrap; }
.stat[b-qexe2qbbxu] { text-align: center; }
.stat b[b-qexe2qbbxu] { display: block; font: 600 22px var(--mono); letter-spacing: -.02em; }
.stat span[b-qexe2qbbxu] { font: 400 13px var(--font); color: var(--hero-muted); }

section[b-qexe2qbbxu] { padding: 96px 0; }
.sec-hd[b-qexe2qbbxu] { max-width: 56ch; margin-bottom: 52px; }
h2[b-qexe2qbbxu] { font: 700 clamp(26px, 3.4vw, 36px)/1.15 var(--font); letter-spacing: -.02em; margin: 12px 0 0; }
.sec-hd p[b-qexe2qbbxu] { color: var(--muted); font-size: 17px; margin: 14px 0 0; }

.feat-grid[b-qexe2qbbxu] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat[b-qexe2qbbxu] { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.feat .ic[b-qexe2qbbxu] { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; margin-bottom: 16px; }
.feat h3[b-qexe2qbbxu] { font: 600 17px var(--font); margin: 0 0 8px; letter-spacing: -.01em; }
.feat p[b-qexe2qbbxu] { font-size: 14.5px; color: var(--muted); margin: 0; }

/* Icon and heading share one line: the icon labels the heading rather than standing as its
   own row, and stacking them spent a whole line of height per card on phones. The paragraph
   spans both columns underneath. Scoped to #features - the catalog section's cards carry no
   icon, and a two-column grid there would squeeze their headings. */
#features .feat[b-qexe2qbbxu] { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
#features .feat .ic[b-qexe2qbbxu] { margin-bottom: 0; }
#features .feat h3[b-qexe2qbbxu] { margin: 0; }
#features .feat p[b-qexe2qbbxu] { grid-column: 1 / -1; margin-top: 12px; }

.how[b-qexe2qbbxu] { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.steps[b-qexe2qbbxu] { display: flex; flex-direction: column; gap: 0; }
.step[b-qexe2qbbxu] { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.step:last-child[b-qexe2qbbxu] { border-bottom: none; }
.step b.num[b-qexe2qbbxu] { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font: 600 13px var(--mono); color: var(--accent); }
.step h3[b-qexe2qbbxu] { font: 600 16px var(--font); margin: 4px 0 6px; }
.step p[b-qexe2qbbxu] { font-size: 14.5px; color: var(--muted); margin: 0; }

.phone[b-qexe2qbbxu] { width: 340px; height: 600px; margin: 0 auto; border-radius: 38px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 24px 60px -24px rgba(33, 31, 26, .35); overflow: hidden; position: relative; }
.phone img[b-qexe2qbbxu] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.premium[b-qexe2qbbxu] { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.premium .wrap[b-qexe2qbbxu] { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.gold-chip[b-qexe2qbbxu] { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--gold-ink); font: 600 12px var(--font); letter-spacing: .04em; text-transform: uppercase; }
.premium ul[b-qexe2qbbxu] { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.premium li[b-qexe2qbbxu] { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.premium li[b-qexe2qbbxu]::before { content: "—"; color: var(--gold); font-weight: 700; }
/* The reference's testimonial card slot, reused for the AutoPilot sample. The 1em 40px margin
   reproduces the browser-default <figure> inset the prototype rendered with. */
.quote-card[b-qexe2qbbxu] { margin: 1em 40px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 30px; }
.quote-card .ap-row[b-qexe2qbbxu] { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--line-strong); }
.quote-card .ap-row:first-of-type[b-qexe2qbbxu] { margin-top: 10px; }
.quote-card .ap-row:last-of-type[b-qexe2qbbxu] { border-bottom: none; }
.quote-card .ap-row b[b-qexe2qbbxu] { flex: none; min-width: 52px; font: 600 12px var(--mono); color: var(--accent); }
.quote-card .ap-row span[b-qexe2qbbxu] { font-size: 14.5px; line-height: 1.5; }
.quote-card .ap-note[b-qexe2qbbxu] { margin: 12px 0 0; font: 400 13.5px var(--font); color: var(--muted); }

.cta-final[b-qexe2qbbxu] { text-align: center; padding: 110px 0; }
.cta-final h2[b-qexe2qbbxu] { max-width: 20ch; margin: 12px auto 0; }

@media (max-width: 900px) {
    .feat-grid[b-qexe2qbbxu] { grid-template-columns: 1fr; }
    .how[b-qexe2qbbxu], .premium .wrap[b-qexe2qbbxu] { grid-template-columns: 1fr; }
    .shot-vp[b-qexe2qbbxu] { height: 440px; }
}

@media (max-width: 640px) {
    .wrap[b-qexe2qbbxu] { padding: 0 20px; }
    .nav-links[b-qexe2qbbxu] { display: none; }
    /* With the links hidden, their auto margins are gone — push the CTAs right again. */
    .nav-in .lp-btn-ghost[b-qexe2qbbxu] { margin-left: auto; }
    /* The app TopNav compresses to a 52px header on phones — mirror it (incl. 16px padding). */
    .nav-in[b-qexe2qbbxu] { height: 52px; gap: 12px; padding: 0 16px; }
    .logo[b-qexe2qbbxu] { font-size: 16px; letter-spacing: -.02em; }
    header[b-qexe2qbbxu] { padding: 56px 0 0; }
    .sub[b-qexe2qbbxu] { font-size: 16.5px; }
    .hero-ctas[b-qexe2qbbxu] { flex-direction: column; align-items: center; }
    /* Every CTA on the page takes the hero buttons' width, not just the hero pair: a column of
       buttons that agree on one width reads as one set of choices, while content-width buttons
       further down look like leftovers. display:flex (not inline-flex) so margin-inline:auto
       centres them inside the plain divs the section CTAs sit in. */
    header .lp-btn[b-qexe2qbbxu],
    section .lp-btn[b-qexe2qbbxu] {
        display: flex;
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
        justify-content: center;
    }
    section[b-qexe2qbbxu] { padding: 64px 0; }
    .sec-hd[b-qexe2qbbxu] { margin-bottom: 32px; }
    .shot[b-qexe2qbbxu] { display: none; }
    .hero-phone[b-qexe2qbbxu] { display: block; margin-top: 48px; }
    .band .wrap[b-qexe2qbbxu] { gap: 22px; padding: 22px 20px; }
    .stat b[b-qexe2qbbxu] { font-size: 18px; }
    .how[b-qexe2qbbxu] { gap: 40px; }
    .phone[b-qexe2qbbxu] { width: 300px; height: 530px; }
    .cta-final[b-qexe2qbbxu] { padding: 72px 0; }
}
/* /Components/Pages/Premium.razor.rz.scp.css */
/* The plan cards grow slightly on hover so the pricing reads as clickable. */
.plan-card[b-oooafkyi7c] {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.plan-card:hover[b-oooafkyi7c] {
    transform: scale(1.03);
    box-shadow: var(--bs-box-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    .plan-card[b-oooafkyi7c],
    .plan-card:hover[b-oooafkyi7c] {
        transition: none;
        transform: none;
    }
}
/* /Components/PhotoLightbox.razor.rz.scp.css */
.photo-lightbox[b-o39af3gnkq] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, .8);
    cursor: zoom-out;
}

    .photo-lightbox:focus[b-o39af3gnkq] {
        outline: none;
    }

.photo-lightbox-img[b-o39af3gnkq] {
    max-width: min(92vw, 900px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
    cursor: default;
}

.photo-lightbox-close[b-o39af3gnkq] {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    line-height: 1;
    font-size: 1.75rem;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

    .photo-lightbox-close:hover[b-o39af3gnkq],
    .photo-lightbox-close:focus-visible[b-o39af3gnkq] {
        background: rgba(0, 0, 0, .6);
        outline: none;
    }
/* /Components/SendButton.razor.rz.scp.css */
/* The "sent" checkmark draws itself in and pops slightly — the element is inserted the
   moment a send succeeds, so the animations run exactly once per success. */
.send-check[b-uihwk6ie7w] {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    animation: send-check-pop-b-uihwk6ie7w 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.send-check path[b-uihwk6ie7w] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* 15 ≈ the path's length; drawing = sliding the dash offset back to 0. */
    stroke-dasharray: 15;
    stroke-dashoffset: 15;
    animation: send-check-draw-b-uihwk6ie7w 0.4s ease-out 0.1s forwards;
}

@keyframes send-check-pop-b-uihwk6ie7w {
    0% { transform: scale(0.4); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes send-check-draw-b-uihwk6ie7w {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .send-check[b-uihwk6ie7w] { animation: none; }
    .send-check path[b-uihwk6ie7w] { animation: none; stroke-dashoffset: 0; }
}
/* /Components/SiteFooter.razor.rz.scp.css */
/* Metrics from the landing-page design's footer (design_handoff_landing_page/README.md §9),
   colors from the surrounding theme's palette variables. */
.site-footer[b-v88kwcac19] {
    border-top: 1px solid var(--line);
    padding: 28px 0;
    color: var(--muted);
    font-size: 13px;
}

.site-footer .wrap[b-v88kwcac19] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.site-footer a[b-v88kwcac19] {
    color: var(--accent);
    text-decoration: none;
}

.site-footer a:hover[b-v88kwcac19] {
    color: var(--accent-hover);
}

@media (max-width: 640px) {
    .site-footer .wrap[b-v88kwcac19] {
        padding: 0 20px;
        justify-content: center;
        text-align: center;
    }
}
/* /Components/StatCard.razor.rz.scp.css */
.stat-card-wrap[b-0fpj2ucy36] {
    position: relative;
    height: 100%;
}

.stat-card[b-0fpj2ucy36] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, .5rem);
    padding: .75rem .9rem;
    height: 100%;
}

.stat-card-head[b-0fpj2ucy36] {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
    /* Keep long labels clear of the corner "?" button. */
    padding-right: 1.2rem;
}

.stat-card-head .bi[b-0fpj2ucy36] {
    color: var(--accent);
}

.stat-label[b-0fpj2ucy36] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.stat-value[b-0fpj2ucy36] {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    margin-top: .15rem;
}

.stat-sub[b-0fpj2ucy36] {
    margin-top: .1rem;
}

/* The corner "?": tap-friendly explanation toggle (hover tooltips don't exist on touch). */
.stat-help-btn[b-0fpj2ucy36] {
    position: absolute;
    top: .4rem;
    right: .45rem;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: .7rem;
    line-height: 1;
}

.stat-help-btn:hover[b-0fpj2ucy36],
.stat-help-btn[aria-expanded="true"][b-0fpj2ucy36] {
    color: var(--accent);
    border-color: var(--line-strong);
}

/* Catches clicks outside the open bubble and dismisses it. */
.stat-help-backdrop[b-0fpj2ucy36] {
    position: fixed;
    inset: 0;
    z-index: 9;
    background: transparent;
}

/* The explanation bubble, laid over the tile; clicking it dismisses. */
.stat-help-pop[b-0fpj2ucy36] {
    position: absolute;
    z-index: 10;
    top: 1.8rem;
    right: .4rem;
    left: .4rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm, .5rem);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    font-size: .8rem;
    line-height: 1.35;
    box-shadow: var(--card-shadow-hover);
    cursor: pointer;
}

/* Locked (Premium teaser) tiles: same silhouette, blurred number, subtle invite on hover. */
a.stat-card-locked[b-0fpj2ucy36] {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.stat-card-locked:hover[b-0fpj2ucy36] {
    border-color: var(--bs-warning, #d9a406);
}

.stat-card-locked .stat-value[b-0fpj2ucy36] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.stat-blur[b-0fpj2ucy36] {
    filter: blur(7px);
    user-select: none;
    opacity: .7;
}

.stat-lock[b-0fpj2ucy36] {
    font-size: 1rem;
}
/* /Components/TopList.razor.rz.scp.css */
.top-list[b-837mekgr0i] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.top-head[b-837mekgr0i] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.top-label[b-837mekgr0i] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
}

.top-count[b-837mekgr0i] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent);
}

.top-bar[b-837mekgr0i] {
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: .15rem;
}

.top-bar > span[b-837mekgr0i] {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

.top-sub[b-837mekgr0i] {
    display: block;
    max-width: 100%;
}
/* /Components/TrendChart.razor.rz.scp.css */
.trend-chart[b-akuzhhptkt] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, .5rem);
    padding: .75rem .9rem;
    height: 100%;
}

/* Sized to the ApexCharts height so the card doesn't jump when the chart mounts client-side. */
.trend-plot[b-akuzhhptkt] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The chart div itself should span the card, not be centered as a shrunk flex item. */
.trend-plot[b-akuzhhptkt] >  div {
    width: 100%;
}

.trend-empty[b-akuzhhptkt] {
    margin: 0 auto;
}