/* /Components/Layout/HandoverLayout.razor.rz.scp.css */
/* Bare chrome for the anonymous buyer page: brand header, centred column,
   nothing else. Colours come from the shared tokens so dark mode just works. */

.handover-shell[b-ah5g9bak57] {
    min-height: 100vh;
    background: var(--hc-bg);
}

.handover-brand[b-ah5g9bak57] {
    padding: var(--hc-space-4) var(--hc-space-5);
    border-bottom: 1px solid var(--hc-border-subtle);
    background: var(--hc-surface);
}

.handover-main[b-ah5g9bak57] {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--hc-space-5) var(--hc-space-4) var(--hc-space-8);
}
/* /Components/Layout/MarketingLayout.razor.rz.scp.css */
/* Public shopfront chrome. Structure-first: everything leans on the shared
   tokens so a restyle is a token change, not a rewrite here. */

.mkt-shell[b-j5fxviqq77] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--hc-bg);
    color: var(--hc-text);
}

.mkt-topbar[b-j5fxviqq77] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--hc-topbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hc-border-subtle);
    /* Smoothly firm up as the page scrolls. Always translucent enough to keep
       the brand and nav legible even with no JS (is-scrolled never lands then),
       so this transition only deepens an already-readable bar. */
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* marketing.js adds .is-scrolled once the hero (or the first screen) has passed:
   the bar compacts and lifts with a subtle shadow, keynote-style. */
.mkt-topbar.is-scrolled[b-j5fxviqq77] {
    background: var(--hc-surface);
    box-shadow: var(--hc-shadow-sm);
}

.mkt-topbar-inner[b-j5fxviqq77] {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--hc-space-3) var(--hc-space-4);
    display: flex;
    align-items: center;
    gap: var(--hc-space-5);
    flex-wrap: wrap;
    transition: padding 0.25s ease;
}

.mkt-topbar.is-scrolled .mkt-topbar-inner[b-j5fxviqq77] {
    padding-top: var(--hc-space-2);
    padding-bottom: var(--hc-space-2);
}

.mkt-nav[b-j5fxviqq77] {
    display: flex;
    gap: var(--hc-space-4);
    margin-inline-start: auto;
}

.mkt-nav a[b-j5fxviqq77] {
    color: var(--hc-text);
    text-decoration: none;
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
}

.mkt-nav a:hover[b-j5fxviqq77] {
    color: var(--hc-accent);
}

.mkt-actions[b-j5fxviqq77] {
    display: flex;
    gap: var(--hc-space-2);
    align-items: center;
}

.mkt-main[b-j5fxviqq77] {
    flex: 1;
}

.mkt-footer[b-j5fxviqq77] {
    border-top: 1px solid var(--hc-border-subtle);
    background: var(--hc-surface);
}

.mkt-footer-inner[b-j5fxviqq77] {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--hc-space-5) var(--hc-space-4);
    display: flex;
    align-items: center;
    gap: var(--hc-space-4);
    flex-wrap: wrap;
    font-size: var(--hc-font-size-sm);
    color: var(--hc-text-muted);
}

.mkt-footer-brand[b-j5fxviqq77] {
    margin: 0;
    font-weight: 600;
    color: var(--hc-brand);
}

.mkt-footer-nav[b-j5fxviqq77] {
    display: flex;
    gap: var(--hc-space-3);
    margin-inline-start: auto;
}

.mkt-footer-nav a[b-j5fxviqq77] {
    color: var(--hc-text-muted);
    text-decoration: none;
}

.mkt-footer-nav a:hover[b-j5fxviqq77] {
    color: var(--hc-accent);
}

.mkt-footer-copyright[b-j5fxviqq77] {
    margin: 0;
}

/* Narrow screens: the bar stacks rather than collapsing behind a burger.
   CSS only on purpose, the marketing page ships no interactivity at all. */
@media (max-width: 639px) {
    .mkt-topbar-inner[b-j5fxviqq77] {
        gap: var(--hc-space-3);
    }

    .mkt-nav[b-j5fxviqq77] {
        order: 3;
        width: 100%;
        margin-inline-start: 0;
        justify-content: center;
        padding-top: var(--hc-space-1);
    }

    .mkt-actions[b-j5fxviqq77] {
        margin-inline-start: auto;
    }

    .mkt-footer-inner[b-j5fxviqq77] {
        flex-direction: column;
        text-align: center;
    }

    .mkt-footer-nav[b-j5fxviqq77] {
        margin-inline-start: 0;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibility per state. The success class swaps the connecting animation for
   the tick without moving anything else. */
.components-reconnect-first-attempt-visible[b-wg4u20bl2u],
.components-reconnect-repeated-attempt-visible[b-wg4u20bl2u],
.components-reconnect-failed-visible[b-wg4u20bl2u],
.components-pause-visible[b-wg4u20bl2u],
.components-resume-failed-visible[b-wg4u20bl2u],
.components-rejoining-animation[b-wg4u20bl2u],
.components-reconnect-success-tick[b-wg4u20bl2u],
.components-reconnect-success-text[b-wg4u20bl2u] {
    display: none;
}

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

#components-reconnect-modal.components-reconnect-success .components-reconnect-success-tick[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-success .components-reconnect-success-text[b-wg4u20bl2u] {
    display: block;
}

/* Full-screen overlay in the app's own palette; the tokens flip for dark mode
   automatically (tokens.css handles prefers-color-scheme). */
#components-reconnect-modal[b-wg4u20bl2u] {
    position: fixed;
    inset: 0;
    width: 100vw;
    /* dvh, not vh: on phones 100vh is the LARGE viewport (it includes the
       space behind the browser's bars), so centring in it pushed the ripple
       visibly below centre. dvh tracks what is actually on screen. */
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--hc-bg, #f5f7fb);
    color: var(--hc-text, #16233a);
    font-family: inherit;
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-wg4u20bl2u 0.4s both;
}

#components-reconnect-modal[open][b-wg4u20bl2u] {
    display: grid;
    place-items: center;
    animation: components-reconnect-modal-fadeInOpacity-b-wg4u20bl2u 0.3s ease-in-out;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-wg4u20bl2u]::backdrop {
    background: none;
}

@keyframes components-reconnect-modal-fadeInOpacity-b-wg4u20bl2u {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

.components-reconnect-container[b-wg4u20bl2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem;
    text-align: center;
}

#components-reconnect-modal p[b-wg4u20bl2u] {
    margin: 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 550;
}

#components-reconnect-modal button[b-wg4u20bl2u] {
    border: 0;
    background-color: var(--hc-accent, #e75f87);
    color: #ffffff;
    padding: 10px 28px;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-wg4u20bl2u] {
    filter: brightness(1.08);
}

/* Connecting ripple. */
.components-rejoining-animation[b-wg4u20bl2u] {
    position: relative;
    width: 80px;
    height: 80px;
}

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

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

@keyframes components-rejoining-animation-b-wg4u20bl2u {
    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; }
}

/* Success: a green tick draws itself in where the ripple was. */
.components-reconnect-success-tick[b-wg4u20bl2u] {
    width: 80px;
    height: 80px;
}

.components-reconnect-success-tick svg[b-wg4u20bl2u] {
    width: 80px;
    height: 80px;
    stroke: #22a06b;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.components-reconnect-success-tick circle[b-wg4u20bl2u] {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: components-tick-draw-b-wg4u20bl2u 0.45s ease-out forwards;
}

.components-reconnect-success-tick path[b-wg4u20bl2u] {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: components-tick-draw-b-wg4u20bl2u 0.3s ease-out 0.35s forwards;
}

#components-reconnect-modal.components-reconnect-success .components-reconnect-success-text[b-wg4u20bl2u] {
    color: #22a06b;
}

@keyframes components-tick-draw-b-wg4u20bl2u {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-wg4u20bl2u],
    .components-reconnect-success-tick circle[b-wg4u20bl2u],
    .components-reconnect-success-tick path[b-wg4u20bl2u] {
        animation-duration: 0.01s;
    }
}
/* /Components/Pages/AboutPage.razor.rz.scp.css */
/* The about page's styling now lives in the shared, non-scoped
   wwwroot/css/marketing.css (linked from MarketingLayout). Nothing scoped here. */
/* /Components/Pages/ComingSoonPage.razor.rz.scp.css */
.coming-soon[b-cv3vsl8eju] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #fff5f8 0%, #fafafa 55%, #fdeef3 100%);
}

.coming-soon-card[b-cv3vsl8eju] {
    max-width: 30rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid #f3d3de;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 32px rgba(231, 95, 135, 0.12);
}

.coming-soon-logo[b-cv3vsl8eju] {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    margin-bottom: 1rem;
}

.coming-soon-card h1[b-cv3vsl8eju] {
    color: #e75f87;
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.coming-soon-card p[b-cv3vsl8eju] {
    color: #4a5568;
    margin: 0;
}

.coming-soon-note[b-cv3vsl8eju] {
    margin-top: 0.75rem;
    font-weight: 600;
}

.coming-soon-error[b-cv3vsl8eju] {
    margin-top: 0.75rem;
    color: #c53030;
    font-size: 0.9rem;
}

.coming-soon-confirm[b-cv3vsl8eju] {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.coming-soon-confirm-btn[b-cv3vsl8eju] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1.6rem;
    border: none;
    border-radius: 999px;
    background: #e75f87;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.coming-soon-confirm-btn:hover[b-cv3vsl8eju] {
    background: #d94f78;
}

.coming-soon-confirm-btn:active[b-cv3vsl8eju] {
    transform: scale(0.98);
}

.coming-soon-elsewhere[b-cv3vsl8eju] {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.coming-soon-attribution[b-cv3vsl8eju] {
    margin-top: 1.75rem;
    font-size: 0.78rem;
}

.coming-soon-attribution a[b-cv3vsl8eju] {
    color: #9aa3b2;
    text-decoration: none;
}

.coming-soon-attribution a:hover[b-cv3vsl8eju] {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .coming-soon[b-cv3vsl8eju] {
        background: linear-gradient(160deg, #1a1420 0%, #0f1828 55%, #1c1220 100%);
    }

    .coming-soon-card[b-cv3vsl8eju] {
        background: #16233a;
        border-color: #3a2a35;
    }

    .coming-soon-card p[b-cv3vsl8eju] {
        color: #c6cedb;
    }
}
/* /Components/Pages/FeaturesPage.razor.rz.scp.css */
/* The features page's styling now lives in the shared, non-scoped
   wwwroot/css/marketing.css (linked from MarketingLayout). Nothing scoped here. */
/* /Components/Pages/PrivacyPage.razor.rz.scp.css */
/* The privacy notice: a plain reading column. 72ch is the comfortable line
   length for continuous legal prose; everything else leans on the tokens. */

.pv-page[b-aowzw5dyzt] {
    max-width: 72ch;
    margin: 0 auto;
    padding: var(--hc-space-6) var(--hc-space-4) var(--hc-space-8);
    color: var(--hc-text);
    line-height: var(--hc-line-height);
}

/* Heading scale matched to the new (smaller) marketing system; the reading
   column itself stays calm and unanimated, this is a legal notice. */
.pv-page h1[b-aowzw5dyzt] {
    margin: 0 0 var(--hc-space-1);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pv-updated[b-aowzw5dyzt] {
    margin: 0 0 var(--hc-space-5);
    font-size: var(--hc-font-size-sm);
    color: var(--hc-text-muted);
}

.pv-page h2[b-aowzw5dyzt] {
    margin: var(--hc-space-6) 0 var(--hc-space-3);
    font-size: var(--hc-font-size-lg);
}

.pv-page p[b-aowzw5dyzt] {
    margin: 0 0 var(--hc-space-3);
}

.pv-page ul[b-aowzw5dyzt] {
    margin: 0 0 var(--hc-space-3);
    padding-inline-start: var(--hc-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-2);
}

.pv-page li[b-aowzw5dyzt]::marker {
    color: var(--hc-accent);
}

.pv-page a[b-aowzw5dyzt] {
    color: var(--hc-accent);
}
/* /Components/Pages/WelcomePage.razor.rz.scp.css */
/* The marketing home's styling now lives in the shared, non-scoped
   wwwroot/css/marketing.css (linked from MarketingLayout), because the reveal
   engine gates on classes the script adds to <html> and the brand-graphics kit
   is shared byte-for-byte across home, features and about. Nothing scoped here. */