@import '_content/Sutz.Food.Customer.UI/Sutz.Food.Customer.UI.5wj09fp6lj.bundle.scp.css';
@import '_content/Sutz.Food.Shared.UI/Sutz.Food.Shared.UI.ue5p4ur5dm.bundle.scp.css';

/* /Components/Account/DeleteAccount.razor.rz.scp.css */
.page[b-kfnhg9conw] {
    padding-block: var(--sutz-space-32);
}

.muted[b-kfnhg9conw] {
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

/* Same icon-list pattern as Vender.razor's .plan-card__features — no default bullet, an icon
   carries each line instead. */
.consequence-list[b-kfnhg9conw] {
    display: grid;
    gap: var(--sutz-space-8);
    margin: 0 0 var(--sutz-space-16);
    padding: 0;
    list-style: none;
}

.consequence-list li[b-kfnhg9conw] {
    display: flex;
    align-items: flex-start;
    gap: var(--sutz-space-8);
    line-height: 1.5;
}

.consequence-list .sutz-icon[b-kfnhg9conw] {
    flex: none;
    margin-top: 2px;
}

.form-actions[b-kfnhg9conw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-8);
    margin-top: var(--sutz-space-16);
}
/* /Components/Account/DownloadData.razor.rz.scp.css */
.page[b-q4bsnxzje5] {
    padding-block: var(--sutz-space-32);
}

/* Same icon-list pattern as Vender.razor's .plan-card__features — no default bullet, an icon
   carries each line instead. */
.feature-list[b-q4bsnxzje5] {
    display: grid;
    gap: var(--sutz-space-8);
    margin: 0 0 var(--sutz-space-16);
    padding: 0;
    list-style: none;
}

.feature-list li[b-q4bsnxzje5] {
    display: flex;
    align-items: flex-start;
    gap: var(--sutz-space-8);
    line-height: 1.5;
}

.feature-list .sutz-icon[b-q4bsnxzje5] {
    flex: none;
    margin-top: 2px;
}

.actions[b-q4bsnxzje5] {
    margin: var(--sutz-space-8) 0 var(--sutz-space-16);
}

.back-link[b-q4bsnxzje5] {
    font-size: var(--sutz-text-sm);
}
/* /Components/Account/Profile.razor.rz.scp.css */
.page[b-qwo59vtrzl] {
    padding-block: var(--sutz-space-32);
}

.muted[b-qwo59vtrzl] {
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.cards[b-qwo59vtrzl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sutz-space-16);
    align-items: start;
}

.cards h2[b-qwo59vtrzl] {
    margin-bottom: var(--sutz-space-8);
    font-size: var(--sutz-text-lg);
}

.field__input:disabled[b-qwo59vtrzl] {
    color: var(--sutz-color-text-muted);
    background: var(--sutz-color-surface-muted, var(--sutz-color-surface));
    cursor: not-allowed;
}

.profile-links[b-qwo59vtrzl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-8);
}
/* /Components/Account/SellerLocation.razor.rz.scp.css */
.location-grid[b-5sz2jdzwzd] {
    display: grid;
    gap: var(--sutz-space-24);
    align-items: start;
}

.location-grid__map[b-5sz2jdzwzd] {
    padding: var(--sutz-space-12);
}

@media (min-width: 900px) {
    .location-grid[b-5sz2jdzwzd] {
        grid-template-columns: minmax(320px, 420px) 1fr;
    }
}
/* /Components/Account/SellerPayment.razor.rz.scp.css */
.payment-card[b-zrp7as1733] {
    margin: 0 auto;
    padding: 0px;
}

    .payment-card .field__hint[b-zrp7as1733] {
        var(--sutz-space-4) var(--sutz-space-12) var(--sutz-space-12) var(--sutz-space-12)
    }

.muted[b-zrp7as1733] {
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.payment-status[b-zrp7as1733] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-16);
}

.payment-status--ok[b-zrp7as1733] {
    color: var(--sutz-color-success-dark, var(--sutz-color-text));
}

.payment-status strong[b-zrp7as1733] {
    display: block;
    margin-bottom: 2px;
}

.payment-note[b-zrp7as1733] {
    margin: 0 0 var(--sutz-space-12);
    padding: var(--sutz-space-8) var(--sutz-space-12);
    border-radius: var(--sutz-radius-md);
    background: var(--sutz-color-surface-alt);
    font-size: var(--sutz-text-sm);
}

.payment-frame[b-zrp7as1733] {
    min-height: 420px;
}
/* /Components/Account/TrialUpsell.razor.rz.scp.css */
.offer-card[b-4rab4fuu91] {
    max-width: 480px;
    margin: 0 auto;
}

.muted[b-4rab4fuu91] {
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.payment-status[b-4rab4fuu91] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-16);
}

.payment-status--ok[b-4rab4fuu91] {
    color: var(--sutz-color-success-dark, var(--sutz-color-text));
}

.payment-status strong[b-4rab4fuu91] {
    display: block;
    margin-bottom: 2px;
}

.payment-note[b-4rab4fuu91] {
    margin: 0 0 var(--sutz-space-12);
    padding: var(--sutz-space-8) var(--sutz-space-12);
    border-radius: var(--sutz-radius-md);
    background: var(--sutz-color-surface-alt);
    font-size: var(--sutz-text-sm);
}

.payment-frame[b-4rab4fuu91] {
    min-height: 420px;
}

.offer__plan[b-4rab4fuu91] {
    margin: 0 0 var(--sutz-space-4);
    font-weight: var(--sutz-font-weight-semibold);
}

.offer__price[b-4rab4fuu91] {
    margin: 0 0 var(--sutz-space-12);
    font-size: var(--sutz-text-xl, 1.5rem);
    font-weight: var(--sutz-font-weight-bold);
}

.offer__price-old[b-4rab4fuu91] {
    margin-left: var(--sutz-space-8);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-md);
    font-weight: var(--sutz-font-weight-regular);
    text-decoration: line-through;
}
/* /Components/Account/TwoFactor.razor.rz.scp.css */
.page[b-wte8c0w7ku] {
    padding-block: var(--sutz-space-32);
}

.muted[b-wte8c0w7ku] {
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.qr[b-wte8c0w7ku] {
    width: 100%;
    max-width: 260px;
    margin-block: var(--sutz-space-12);
    padding: var(--sutz-space-12);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-md);
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .qr[b-wte8c0w7ku]  svg {
        display: block;
        width: 100%;
        height: auto;
    }

.two-factor__key[b-wte8c0w7ku] {
    display: block;
    width: 100%;
    margin-bottom: var(--sutz-space-12);
    padding: 8px 10px;
    border-radius: var(--sutz-radius-sm);
    background: var(--sutz-color-surface-alt);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--sutz-text-sm);
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
    user-select: all;
}

.two-factor__actions[b-wte8c0w7ku] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-8);
    margin-top: var(--sutz-space-12);
}

.recovery-codes[b-wte8c0w7ku] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--sutz-space-8);
    margin-block: var(--sutz-space-12);
}

    .recovery-codes code[b-wte8c0w7ku] {
        display: block;
        padding: 8px 10px;
        border-radius: var(--sutz-radius-sm);
        background: var(--sutz-color-surface-alt);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: var(--sutz-text-sm);
        text-align: center;
    }
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.site[b-62cs4ffhsh] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sutz-color-surface);
}

/* ---------------- Header ---------------- */

.site-header[b-62cs4ffhsh] {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Plain opaque background, not backdrop-filter: a filter/backdrop-filter on this element would
       make it the containing block for any position:fixed descendant — including MobileNav's
       drawer and backdrop — pinning them to the header's own small box instead of the viewport. */
    border-bottom: 1px solid var(--sutz-color-border);
    backdrop-filter: blur(14px);
    background-color: rgb(255 191 128 / 20%);
}

.site-header__inner[b-62cs4ffhsh] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-4);
    min-height: 68px;
}

.brand[b-62cs4ffhsh] {
    display: inline-flex;
    align-items: center;
    gap: var(--sutz-space-8);
    text-decoration: none;
    color: var(--sutz-color-text);
    font-weight: var(--sutz-font-weight-bold);
    font-size: var(--sutz-text-lg);
    letter-spacing: var(--sutz-tracking-tight);
    white-space: nowrap;
}

.brand__mark[b-62cs4ffhsh] {
    width: 64px;
    height: 64px;
    font-size: 1.1rem;
}

.site-nav[b-62cs4ffhsh] {
    display: none;
    gap: var(--sutz-space-24);
    margin-inline-start: var(--sutz-space-16);
}

.site-nav a[b-62cs4ffhsh] {
    color: var(--sutz-color-text-muted);
    text-decoration: none;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
    transition: color var(--sutz-transition-fast);
}

.site-nav a:hover[b-62cs4ffhsh] {
    color: var(--sutz-color-primary-dark);
}

.site-header__actions[b-62cs4ffhsh] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-8);
    margin-inline-start: auto;
}

.logout-form[b-62cs4ffhsh] {
    display: inline;
}

.site-user[b-62cs4ffhsh] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-weight: var(--sutz-font-weight-semibold);
    font-size: var(--sutz-text-sm);
}

/* ---------------- Main ---------------- */

.site-main[b-62cs4ffhsh] {
    flex: 1 1 auto;
}

/* ---------------- Footer ---------------- */

.site-footer[b-62cs4ffhsh] {
    margin-top: var(--sutz-space-48);
    padding-block: var(--sutz-space-32) var(--sutz-space-16);
    background: var(--sutz-color-text);
    color: rgba(255, 255, 255, 0.82);
}

.site-footer__inner[b-62cs4ffhsh] {
    display: flex;
    flex-direction: column;
    gap: var(--sutz-space-24);
}

.site-footer__brand[b-62cs4ffhsh] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
}

.site-footer__name[b-62cs4ffhsh] {
    margin: 0;
    font-weight: var(--sutz-font-weight-bold);
    color: #fff;
}

.site-footer__tagline[b-62cs4ffhsh] {
    margin: 2px 0 0;
    font-size: var(--sutz-text-sm);
    color: rgba(255, 255, 255, 0.66);
}

.site-footer__links[b-62cs4ffhsh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-16);
}

.site-footer__links a[b-62cs4ffhsh] {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: var(--sutz-text-sm);
}

.site-footer__links a:hover[b-62cs4ffhsh] {
    color: #fff;
    text-decoration: underline;
}

.site-footer__social[b-62cs4ffhsh] {
    display: flex;
    gap: var(--sutz-space-8);
}

.site-footer__social a[b-62cs4ffhsh] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sutz-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    transition: background var(--sutz-transition-fast), color var(--sutz-transition-fast);
}

.site-footer__social a:hover[b-62cs4ffhsh] {
    background: var(--sutz-color-primary);
    color: #fff;
}

.site-footer__legal[b-62cs4ffhsh] {
    margin: var(--sutz-space-24) auto 0;
    padding-top: var(--sutz-space-16);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--sutz-text-xs);
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 860px) {
    .site-nav[b-62cs4ffhsh] {
        display: flex;
    }

    .site-footer__inner[b-62cs4ffhsh] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
/* /Components/Layout/DocsLayout.razor.rz.scp.css */
.docs-site[b-zpqgr9v5qi] {
    --docs-header-height: 57px;
    min-height: 100vh;
    background: var(--sutz-color-surface, #fff);
}

.docs-site__bar[b-zpqgr9v5qi] {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--sutz-color-border, #eae1db);
}

.docs-site__inner[b-zpqgr9v5qi] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 clamp(16px, 2.5vw, 40px);
    min-height: 56px;
}

.docs-site__body[b-zpqgr9v5qi] {
    display: flex;
    align-items: flex-start;
}

.docs-site__main[b-zpqgr9v5qi] {
    flex: 1 1 auto;
    min-width: 0;
}

.docs-site__brand[b-zpqgr9v5qi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sutz-color-text, #000);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.docs-site__tag[b-zpqgr9v5qi] {
    color: var(--sutz-color-primary-dark, #e04a17);
    font-size: 0.85rem;
    font-weight: 600;
}

.docs-site__links[b-zpqgr9v5qi] {
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.docs-site__links a[b-zpqgr9v5qi] {
    color: var(--sutz-color-text, #000);
    text-decoration: none;
    font-size: 0.9rem;
}

.docs-site__links a:hover[b-zpqgr9v5qi] {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .docs-site__tag[b-zpqgr9v5qi] {
        display: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site[b-3d5guesore] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sutz-color-surface);
}

/* ---------------- Header ---------------- */

.site-header[b-3d5guesore] {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Plain opaque background, not backdrop-filter: a filter/backdrop-filter on this element would
       make it the containing block for any position:fixed descendant — including MobileNav's
       drawer and backdrop — pinning them to the header's own small box instead of the viewport. */
    background: #fff;
    border-bottom: 1px solid var(--sutz-color-border);
    backdrop-filter: blur(14px);
    background-color: rgb(255 191 128 / 20%);
}

.site-header__inner[b-3d5guesore] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-4);
    min-height: 68px;
}

.brand[b-3d5guesore] {
    display: inline-flex;
    align-items: center;
    gap: var(--sutz-space-8);
    text-decoration: none;
    color: var(--sutz-color-text);
    font-weight: var(--sutz-font-weight-bold);
    font-size: var(--sutz-text-lg);
    letter-spacing: var(--sutz-tracking-tight);
    white-space: nowrap;
}

.brand__mark[b-3d5guesore] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    font-size: 1.1rem;
}

.site-nav[b-3d5guesore] {
    display: none;
    gap: var(--sutz-space-24);
    margin-inline-start: var(--sutz-space-16);
}

.site-nav a[b-3d5guesore] {
    color: var(--sutz-color-text-muted);
    text-decoration: none;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
    transition: color var(--sutz-transition-fast);
}

.site-nav a:hover[b-3d5guesore] {
    color: var(--sutz-color-primary-dark);
}

.site-header__actions[b-3d5guesore] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-8);
    margin-inline-start: auto;
}

.logout-form[b-3d5guesore] {
    display: inline;
}

.site-user[b-3d5guesore] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-weight: var(--sutz-font-weight-semibold);
    font-size: var(--sutz-text-sm);
}

/* ---------------- Main ---------------- */

.site-main[b-3d5guesore] {
    flex: 1 1 auto;
}

/* ---------------- Footer ---------------- */

.site-footer[b-3d5guesore] {
    margin-top: var(--sutz-space-48);
    padding-block: var(--sutz-space-32) var(--sutz-space-16);
    background: var(--sutz-color-text);
    color: rgba(255, 255, 255, 0.82);
}

.site-footer__inner[b-3d5guesore] {
    display: flex;
    flex-direction: column;
    gap: var(--sutz-space-24);
}

.site-footer__brand[b-3d5guesore] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
}

.site-footer__name[b-3d5guesore] {
    margin: 0;
    font-weight: var(--sutz-font-weight-bold);
    color: #fff;
}

.site-footer__tagline[b-3d5guesore] {
    margin: 2px 0 0;
    font-size: var(--sutz-text-sm);
    color: rgba(255, 255, 255, 0.66);
}

.site-footer__links[b-3d5guesore] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-16);
}

.site-footer__links a[b-3d5guesore] {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: var(--sutz-text-sm);
}

.site-footer__links a:hover[b-3d5guesore] {
    color: #fff;
    text-decoration: underline;
}

.site-footer__social[b-3d5guesore] {
    display: flex;
    gap: var(--sutz-space-8);
}

.site-footer__social a[b-3d5guesore] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sutz-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    transition: background var(--sutz-transition-fast), color var(--sutz-transition-fast);
}

.site-footer__social a:hover[b-3d5guesore] {
    background: var(--sutz-color-primary);
    color: #fff;
}

.site-footer__legal[b-3d5guesore] {
    margin: var(--sutz-space-24) auto 0;
    padding-top: var(--sutz-space-16);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--sutz-text-xs);
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 860px) {
    .site-nav[b-3d5guesore] {
        display: flex;
    }

    .site-footer__inner[b-3d5guesore] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-u5eqy0zoxp],
.components-reconnect-repeated-attempt-visible[b-u5eqy0zoxp],
.components-reconnect-failed-visible[b-u5eqy0zoxp],
.components-pause-visible[b-u5eqy0zoxp],
.components-resume-failed-visible[b-u5eqy0zoxp],
.components-rejoining-animation[b-u5eqy0zoxp] {
    display: none;
}

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


#components-reconnect-modal[b-u5eqy0zoxp] {
    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-u5eqy0zoxp 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-u5eqy0zoxp {
    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/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-1ygvplfyfy] {
    position: relative;
}

.user-menu__trigger[b-1ygvplfyfy] {
    display: inline-flex;
    align-items: center;
    gap: var(--sutz-space-8);
    padding: 4px 10px 4px 4px;
    border: solid 1px var(--sutz-color-border-strong);
    border-radius: var(--sutz-radius-pill);
    background-color: #ffffff60;
    cursor: pointer;
    color: var(--sutz-color-text);
    font: inherit;
    max-width: 220px;
}

.user-menu__trigger:hover[b-1ygvplfyfy],
.user-menu--open .user-menu__trigger[b-1ygvplfyfy] {
    border-color: var(--sutz-color-border);
    background: var(--sutz-color-surface-alt);
}

.user-menu__avatar[b-1ygvplfyfy] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: solid 1px var(--sutz-color-border-strong);
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-weight: var(--sutz-font-weight-semibold);
    font-size: var(--sutz-text-sm);
}

.user-menu__avatar--lg[b-1ygvplfyfy] {
    width: 40px;
    height: 40px;
    font-size: var(--sutz-text-base);
}

.user-menu__label[b-1ygvplfyfy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
}

@media (max-width: 640px) {
    .user-menu__label[b-1ygvplfyfy] {
        display: none;
    }
}

.user-menu__chevron[b-1ygvplfyfy] {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--sutz-color-text-muted);
    transition: transform var(--sutz-transition-fast);
}

.user-menu--open .user-menu__chevron[b-1ygvplfyfy] {
    transform: rotate(180deg);
}

.user-menu__scrim[b-1ygvplfyfy] {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: transparent;
}

.user-menu__panel[b-1ygvplfyfy] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: var(--sutz-space-8);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    box-shadow: var(--sutz-shadow-lg);
}

.user-menu__id[b-1ygvplfyfy] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-8);
}

.user-menu__id-text[b-1ygvplfyfy] {
    min-width: 0;
}

.user-menu__id-title[b-1ygvplfyfy] {
    margin: 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.user-menu__id-mail[b-1ygvplfyfy] {
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-semibold);
}

.user-menu__sep[b-1ygvplfyfy] {
    margin: var(--sutz-space-4) 0;
    border: none;
    border-top: 1px solid var(--sutz-color-border);
}

.user-menu__item[b-1ygvplfyfy] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
    width: 100%;
    padding: 10px var(--sutz-space-8);
    border: none;
    border-radius: var(--sutz-radius-md);
    background: none;
    color: var(--sutz-color-text);
    text-decoration: none;
    font: inherit;
    font-size: var(--sutz-text-sm);
    text-align: left;
    cursor: pointer;
}

.user-menu__item:hover[b-1ygvplfyfy] {
    background: var(--sutz-color-surface-alt);
}

.user-menu__item--danger[b-1ygvplfyfy] {
    color: var(--sutz-color-danger);
}

.user-menu__item--danger:hover[b-1ygvplfyfy] {
    background: var(--sutz-color-danger-light);
}

.user-menu__glyph[b-1ygvplfyfy] {
    flex: none;
    width: 20px;
    text-align: center;
}

.user-menu__logout[b-1ygvplfyfy] {
    margin: 0;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---------------- Hero ---------------- */

.hero[b-hnwh5t3ikb] {
    position: relative;
    overflow: hidden;
    padding-block: var(--sutz-space-48);
    background:
        radial-gradient(1200px 400px at 85% -10%, var(--sutz-color-primary-light), transparent 70%),
        var(--sutz-color-surface);
}

.hero__inner[b-hnwh5t3ikb] {
    display: grid;
    gap: var(--sutz-space-48);
    align-items: center;
}

.hero__eyebrow[b-hnwh5t3ikb] {
    display: inline-block;
    margin-bottom: var(--sutz-space-12);
    padding: 6px 12px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero__title[b-hnwh5t3ikb] {
    margin: 0 0 var(--sutz-space-16);
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.08;
}

.hero__lede[b-hnwh5t3ikb] {
    max-width: 52ch;
    margin: 0 0 var(--sutz-space-24);
    font-size: var(--sutz-text-lg);
    color: var(--sutz-color-text-muted);
}

.hero__actions[b-hnwh5t3ikb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-12);
    margin-bottom: var(--sutz-space-24);
}

.hero__points[b-hnwh5t3ikb] {
    display: grid;
    gap: var(--sutz-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.hero__points li[b-hnwh5t3ikb] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-8);
}

/* Floating preview cards */

.hero__art[b-hnwh5t3ikb] {
    position: relative;
    display: grid;
    gap: var(--sutz-space-16);
}

.hero__card[b-hnwh5t3ikb] {
    padding: var(--sutz-space-16);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    box-shadow: var(--sutz-shadow-lg);
}

.hero__card--two[b-hnwh5t3ikb] {
    margin-inline-start: var(--sutz-space-24);
    opacity: 0.96;
}

.hero__card-head[b-hnwh5t3ikb] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
}

.hero__avatar[b-hnwh5t3ikb] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sutz-radius-md);
    background: var(--sutz-color-surface-alt);
    font-size: 1.4rem;
}

.hero__card-title[b-hnwh5t3ikb] {
    margin: 0;
    font-weight: var(--sutz-font-weight-semibold);
}

.hero__card-meta[b-hnwh5t3ikb] {
    margin: 2px 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.hero__card-head .sutz-badge[b-hnwh5t3ikb] {
    margin-inline-start: auto;
}

.hero__card-dish[b-hnwh5t3ikb] {
    margin: var(--sutz-space-12) 0 0;
    font-weight: var(--sutz-font-weight-medium);
}

.hero__card-tags[b-hnwh5t3ikb] {
    display: flex;
    gap: var(--sutz-space-8);
    margin-top: var(--sutz-space-12);
}

/* ---------------- Generic section ---------------- */

.section[b-hnwh5t3ikb] {
    padding-block: var(--sutz-space-48);
}

.section--alt[b-hnwh5t3ikb] {
    background: var(--sutz-color-surface-alt);
}

.section__head[b-hnwh5t3ikb] {
    max-width: 60ch;
    margin-bottom: var(--sutz-space-32);
}

.section__head h2[b-hnwh5t3ikb] {
    margin-bottom: var(--sutz-space-8);
}

.section__head p[b-hnwh5t3ikb] {
    margin: 0;
    color: var(--sutz-color-text-muted);
}

/* ---------------- Steps ---------------- */

.steps[b-hnwh5t3ikb] {
    display: grid;
    gap: var(--sutz-space-24);
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps__item[b-hnwh5t3ikb] {
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    transition: transform var(--sutz-transition-base), box-shadow var(--sutz-transition-base);
}

.steps__item:hover[b-hnwh5t3ikb] {
    transform: translateY(-2px);
    box-shadow: var(--sutz-shadow-md);
}

.steps__num[b-hnwh5t3ikb] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--sutz-space-12);
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary);
    color: var(--sutz-color-primary-contrast);
    font-weight: var(--sutz-font-weight-bold);
}

.steps__item h3[b-hnwh5t3ikb] {
    margin-bottom: var(--sutz-space-8);
    font-size: var(--sutz-text-lg);
}

.steps__item p[b-hnwh5t3ikb] {
    margin: 0;
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

/* ---------------- Categories ---------------- */

.categories[b-hnwh5t3ikb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sutz-space-12);
}

.category[b-hnwh5t3ikb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sutz-space-8);
    padding: var(--sutz-space-16);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    color: var(--sutz-color-text);
    text-decoration: none;
    transition: border-color var(--sutz-transition-fast), transform var(--sutz-transition-fast);
}

.category:hover[b-hnwh5t3ikb] {
    border-color: var(--sutz-color-primary);
    transform: translateY(-2px);
}

/* Photo renders its own <img>/placeholder <div>, outside this component's CSS scope - same
   treatment as DirectoryPanel's own .category-card__photo, so a category looks the same whether a
   visitor sees it here or in the full directory. */
.category[b-hnwh5t3ikb]  .category__photo {
    width: 56px;
    height: 56px;
    border-radius: var(--sutz-radius-sm);
    background: var(--sutz-color-surface-alt);
    object-fit: cover;
    font-size: 1.5rem;
    pointer-events: none;
    border: solid 1px #367ec738;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}

.category__name[b-hnwh5t3ikb] {
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
}

/* -------- App store badges (coming soon) -------- */

.store-badges[b-hnwh5t3ikb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sutz-space-16);
    margin-top: var(--sutz-space-24);
}

/* Styled after the two real store badges' proportions and layout, drawn from scratch — not the
   official trademarked artwork — and dimmed + disabled since neither app is published yet. */
.store-badge[b-hnwh5t3ikb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 14px;
    border-radius: var(--sutz-radius-md);
    background: #1b1b1f;
    color: #fff;
    opacity: 0.72;
    cursor: default;
    user-select: none;
}

.store-badge__glyph[b-hnwh5t3ikb] {
    width: 26px;
    height: 26px;
    flex: none;
    color: #fff;
}

.store-badge__glyph--play[b-hnwh5t3ikb] {
    width: 22px;
    height: 22px;
}

.store-badge__text[b-hnwh5t3ikb] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.store-badge__eyebrow[b-hnwh5t3ikb] {
    font-size: 10px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
}

.store-badge__name[b-hnwh5t3ikb] {
    font-size: var(--sutz-text-base);
    font-weight: var(--sutz-font-weight-semibold);
}

@media (min-width: 900px) {
    .hero__inner[b-hnwh5t3ikb] {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .steps[b-hnwh5t3ikb] {
        grid-template-columns: repeat(3, 1fr);
    }

    .app-stores[b-hnwh5t3ikb] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Vender.razor.rz.scp.css */
/* ---------------- Hero ---------------- */

.vhero[b-m5xcklg41t] {
    padding-block: var(--sutz-space-48);
    background:
        radial-gradient(1000px 360px at 15% -10%, var(--sutz-color-primary-light), transparent 70%),
        var(--sutz-color-surface);
    text-align: center;
}

.vhero__inner[b-m5xcklg41t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 68ch;
    margin-inline: auto;
}

.vhero__title[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-16);
    font-size: clamp(2rem, 5.5vw, 3rem);
    line-height: 1.1;
}

.vhero__lede[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-24);
    font-size: var(--sutz-text-lg);
    color: var(--sutz-color-text-muted);
}

.vhero .hero__actions[b-m5xcklg41t] {
    justify-content: center;
}

.vhero__note[b-m5xcklg41t] {
    margin: var(--sutz-space-16) 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

/* ---------------- Generic section (mirrors Home.razor's) ---------------- */

.section[b-m5xcklg41t] {
    padding-block: var(--sutz-space-48);
}

.section--alt[b-m5xcklg41t] {
    background: var(--sutz-color-surface-alt);
}

.section__head[b-m5xcklg41t] {
    max-width: 60ch;
    margin-bottom: var(--sutz-space-32);
}

.section__head h2[b-m5xcklg41t] {
    margin-bottom: var(--sutz-space-8);
}

.section__head p[b-m5xcklg41t] {
    margin: 0;
    color: var(--sutz-color-text-muted);
}

/* ---------------- Pain points ---------------- */

.pain-grid[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-16);
}

.pain[b-m5xcklg41t] {
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
}

.pain__icon[b-m5xcklg41t] {
    display: inline-block;
    margin-bottom: var(--sutz-space-8);
    font-size: 1.5rem;
}

.pain h3[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-8);
    font-size: var(--sutz-text-base);
}

.pain p[b-m5xcklg41t] {
    margin: 0;
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

/* ---------------- Comparison table ---------------- */

.compare[b-m5xcklg41t] {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
}

.compare__row[b-m5xcklg41t] {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-12) var(--sutz-space-16);
    border-bottom: 1px solid var(--sutz-color-border);
    align-items: center;
}

.compare__row:last-child[b-m5xcklg41t] {
    border-bottom: none;
}

.compare__row--head[b-m5xcklg41t] {
    background: var(--sutz-color-surface-alt);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--sutz-color-text-muted);
}

.compare__label[b-m5xcklg41t] {
    font-weight: var(--sutz-font-weight-medium);
    font-size: var(--sutz-text-sm);
}

.compare__cell[b-m5xcklg41t] {
    display: flex;
    align-items: baseline;
    gap: var(--sutz-space-8);
    font-size: var(--sutz-text-sm);
}

.compare__cell--bad[b-m5xcklg41t] {
    color: var(--sutz-color-text-muted);
}

.compare__cell--bad span[aria-hidden][b-m5xcklg41t] {
    color: var(--sutz-color-danger);
}

.compare__cell--good[b-m5xcklg41t] {
    color: var(--sutz-color-text);
    font-weight: var(--sutz-font-weight-medium);
}

.compare__cell--good span[aria-hidden][b-m5xcklg41t] {
    color: var(--sutz-color-success);
    font-weight: var(--sutz-font-weight-bold);
}

/* ---------------- Benefits ---------------- */

.benefits[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-16);
}

.benefit[b-m5xcklg41t] {
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    transition: transform var(--sutz-transition-base), box-shadow var(--sutz-transition-base);
}

.benefit:hover[b-m5xcklg41t] {
    transform: translateY(-2px);
    box-shadow: var(--sutz-shadow-md);
}

.benefit__icon[b-m5xcklg41t] {
    display: inline-block;
    margin-bottom: var(--sutz-space-8);
    font-size: 1.5rem;
}

.benefit h3[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-8);
    font-size: var(--sutz-text-base);
}

.benefit p[b-m5xcklg41t] {
    margin: 0;
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

/* ---------------- Pricing / plan comparison ---------------- */

.pricing__badge[b-m5xcklg41t] {
    display: inline-block;
    margin-bottom: var(--sutz-space-12);
    padding: 6px 14px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    letter-spacing: 0.02em;
}

.pricing__note[b-m5xcklg41t] {
    max-width: 60ch;
    margin: var(--sutz-space-32) auto 0;
    text-align: center;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.periodicity-toggle[b-m5xcklg41t] {
    display: flex;
    width: fit-content;
    margin: 0 auto var(--sutz-space-32);
    padding: 4px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-surface-alt);
    border: 1px solid var(--sutz-color-border);
}

.periodicity-toggle__input[b-m5xcklg41t] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.periodicity-toggle__label[b-m5xcklg41t] {
    padding: 8px 20px;
    border-radius: var(--sutz-radius-pill);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
    cursor: pointer;
    user-select: none;
    transition: background var(--sutz-transition-fast), color var(--sutz-transition-fast);
}

.periodicity-toggle__input:checked + .periodicity-toggle__label[b-m5xcklg41t] {
    background: var(--sutz-color-primary);
    color: var(--sutz-color-primary-contrast, #fff);
}

.periodicity-toggle__input:focus-visible + .periodicity-toggle__label[b-m5xcklg41t] {
    outline: 2px solid var(--sutz-color-primary);
    outline-offset: 2px;
}

.plans-grid[b-m5xcklg41t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sutz-space-24);
    /* stretch (the grid default), not start — every card in a row matches the tallest one's height,
       so .plan-card's own flex-column + the CTA's margin-top:auto push every button to the same
       bottom edge regardless of how much description/feature text a given plan has. */
    align-items: stretch;
}

.plan-card[b-m5xcklg41t] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sutz-space-32);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
}

.plan-card--popular[b-m5xcklg41t] {
    border-color: var(--sutz-color-primary);
    box-shadow: var(--sutz-shadow-md);
}

.plan-card__badge[b-m5xcklg41t] {
    align-self: flex-start;
    margin-bottom: var(--sutz-space-12);
    padding: 4px 12px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary);
    color: var(--sutz-color-primary-contrast, #fff);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
}

.plan-card__name[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-8);
}

.plan-card__description[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-16);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.plan-card__price[b-m5xcklg41t] {
    margin-bottom: var(--sutz-space-16);
}

/* Only one of these is ever visible: annual by default, monthly once #freq-monthly is checked —
   see the sibling-selector rules below. Both render server-side so the toggle is pure CSS, no
   interactivity/circuit needed on an otherwise-static marketing page. */
.price[b-m5xcklg41t] {
    display: none;
    align-items: baseline;
    gap: var(--sutz-space-8);
}

.price--annual[b-m5xcklg41t] {
    display: flex;
}

.plan-card__price-label[b-m5xcklg41t] {
    align-self: center;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.plan-card__amount[b-m5xcklg41t] {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: var(--sutz-font-weight-bold);
    color: var(--sutz-color-primary-darker);
    font-variant-numeric: tabular-nums;
}

.plan-card__billed-annually[b-m5xcklg41t] {
    margin: 4px 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.plan-card__currency[b-m5xcklg41t] {
    margin-right: 1px;
    font-size: 0.55em;
    font-weight: var(--sutz-font-weight-semibold);
    vertical-align: top;
}

.plan-card__cents[b-m5xcklg41t] {
    margin-left: 1px;
    font-size: 0.5em;
    font-weight: var(--sutz-font-weight-semibold);
}

.plan-card__period[b-m5xcklg41t] {
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

.plan-card__annual-only[b-m5xcklg41t] {
    margin: 4px 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

/* #freq-monthly itself is nested inside .periodicity-toggle, not a sibling of .plans-grid — so the
   ":has()" check happens on the wrapper, which *is* .plans-grid's sibling inside .sutz-container,
   and reaches every card's price blocks at once. */
.periodicity-toggle:has(#freq-monthly:checked) ~ .plans-grid .price--annual[b-m5xcklg41t] {
    display: none;
}

.periodicity-toggle:has(#freq-monthly:checked) ~ .plans-grid .price--monthly[b-m5xcklg41t] {
    display: flex;
}

.periodicity-toggle:has(#freq-monthly:checked) ~ .plans-grid .plan-card__billed-annually[b-m5xcklg41t] {
    display: none;
}

.plan-card__trial[b-m5xcklg41t] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sutz-space-16);
    padding: 6px 12px;
    width: fit-content;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
}

.plan-card__trial[b-m5xcklg41t]  .sutz-icon {
    width: 14px;
    height: 14px;
}

.plan-card .sutz-btn[b-m5xcklg41t] {
    margin-top: auto;
    width: 100%;
}

/* ---------------- Feature comparison table ---------------- */

.feature-compare__wrap[b-m5xcklg41t] {
    margin-top: var(--sutz-space-32);
    overflow-x: auto;
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
}

.feature-compare[b-m5xcklg41t] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sutz-text-sm);
}

.feature-compare__corner[b-m5xcklg41t] {
    background: var(--sutz-color-surface-alt);
}

.feature-compare__plan[b-m5xcklg41t] {
    min-width: 140px;
    padding: var(--sutz-space-12) var(--sutz-space-16);
    background: var(--sutz-color-surface-alt);
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-semibold);
    text-align: center;
    white-space: nowrap;
}

.feature-compare__group-row th[b-m5xcklg41t] {
    padding: var(--sutz-space-8) var(--sutz-space-16);
    background: var(--sutz-color-surface-alt);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
}

.feature-compare__feature[b-m5xcklg41t] {
    padding: var(--sutz-space-12) var(--sutz-space-16);
    border-top: 1px solid var(--sutz-color-border);
    font-weight: var(--sutz-font-weight-medium);
    text-align: left;
    white-space: nowrap;
}

.feature-compare__cell[b-m5xcklg41t] {
    padding: var(--sutz-space-12) var(--sutz-space-16);
    border-top: 1px solid var(--sutz-color-border);
    text-align: center;
}

.feature-compare__dash[b-m5xcklg41t] {
    color: var(--sutz-color-text-muted);
}

.feature-compare__limit[b-m5xcklg41t] {
    font-weight: var(--sutz-font-weight-semibold);
    color: var(--sutz-color-primary-darker);
}

/* ---------------- Seller CTA (mirrors Home.razor's) ---------------- */

.seller-cta[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-32);
    align-items: center;
}

.seller-cta__copy h2[b-m5xcklg41t] {
    margin-bottom: var(--sutz-space-16);
}

.seller-cta__note[b-m5xcklg41t] {
    margin: 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.seller-cta__panel[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    box-shadow: var(--sutz-shadow-sm);
}

.seller-cta__row[b-m5xcklg41t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sutz-space-16);
    padding-bottom: var(--sutz-space-12);
    border-bottom: 1px dashed var(--sutz-color-border-strong);
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

.seller-cta__row:last-child[b-m5xcklg41t] {
    padding-bottom: 0;
    border-bottom: none;
}

.seller-cta__row strong[b-m5xcklg41t] {
    color: var(--sutz-color-text);
}

.seller-cta__row--muted[b-m5xcklg41t] {
    font-size: var(--sutz-text-xs);
}

/* ---------------- Sell steps ---------------- */

.vsteps[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-16);
    margin: 0 0 var(--sutz-space-24);
    padding-inline-start: var(--sutz-space-24);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.vsteps strong[b-m5xcklg41t] {
    display: block;
    margin-bottom: 2px;
    color: var(--sutz-color-text);
    font-size: var(--sutz-text-base);
}

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

    .benefits[b-m5xcklg41t] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .seller-cta[b-m5xcklg41t] {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

@media (max-width: 640px) {
    .compare__row[b-m5xcklg41t] {
        grid-template-columns: 1fr;
        gap: var(--sutz-space-8, 4px);
    }

    .compare__row--head[b-m5xcklg41t] {
        display: none;
    }

    .compare__label[b-m5xcklg41t] {
        margin-bottom: 2px;
    }
}