/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-18nr7ppb3f] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-18nr7ppb3f] {
    flex: 1;
}

.content[b-18nr7ppb3f] {
    padding-top: 1.5rem;
}

#blazor-error-ui[b-18nr7ppb3f] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-18nr7ppb3f] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.topnav[b-cjq0zlhr0f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    padding: 0 1.5rem;
    background: #0f172a;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topnav-left[b-cjq0zlhr0f] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand[b-cjq0zlhr0f] {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.brand:hover[b-cjq0zlhr0f] {
    color: white;
    text-decoration: none;
}

.nav-icon[b-cjq0zlhr0f] {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
    margin-top: -2px;
    flex-shrink: 0;
}

.nav-links[b-cjq0zlhr0f] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.nav-links[b-cjq0zlhr0f]  .nav-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 5px;
    transition: color 0.15s, background-color 0.15s;
    white-space: nowrap;
}

.nav-links[b-cjq0zlhr0f]  .nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-links[b-cjq0zlhr0f]  .nav-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.12);
}

.topnav-right[b-cjq0zlhr0f] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.topnav-right[b-cjq0zlhr0f]  .btn-profile {
    color: #94a3b8;
    font-size: 0.875rem;
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 5px;
    transition: color 0.15s, background-color 0.15s;
    white-space: nowrap;
}

.topnav-right[b-cjq0zlhr0f]  .btn-profile:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.08);
}

.btn-signout[b-cjq0zlhr0f] {
    color: #94a3b8;
    font-size: 0.875rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.35rem 0.75rem;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-signout:hover[b-cjq0zlhr0f] {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.06);
}

.topnav-right[b-cjq0zlhr0f]  .btn-signin {
    color: #94a3b8;
    font-size: 0.875rem;
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.topnav-right[b-cjq0zlhr0f]  .btn-signin:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.06);
}

.topnav-right[b-cjq0zlhr0f]  .btn-signup {
    color: white;
    font-size: 0.875rem;
    text-decoration: none;
    padding: 0.35rem 0.875rem;
    border-radius: 5px;
    background-color: #3b82f6;
    border: 1px solid transparent;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.topnav-right[b-cjq0zlhr0f]  .btn-signup:hover {
    background-color: #2563eb;
    text-decoration: none;
    color: white;
}

.d-inline[b-cjq0zlhr0f] {
    display: inline;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0y810b6am3],
.components-reconnect-repeated-attempt-visible[b-0y810b6am3],
.components-reconnect-failed-visible[b-0y810b6am3],
.components-pause-visible[b-0y810b6am3],
.components-resume-failed-visible[b-0y810b6am3],
.components-rejoining-animation[b-0y810b6am3] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-0y810b6am3 {
    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/Landing.razor.rz.scp.css */
/* MyFlott landing page — Section 1 (hero). specs/10-myflott-landing-design-prompt.md */

.lp-root[b-nq9py8k9oy] {
    position: relative;
    background: var(--paper);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    *[b-nq9py8k9oy], *[b-nq9py8k9oy]::before, *[b-nq9py8k9oy]::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ---- Page shell: section band system ---- */

.lp-band[b-nq9py8k9oy] {
    position: relative;
    padding-block: clamp(64px, 9vw, 132px);
    border-block: 1px solid var(--line);
}

.lp-band + .lp-band[b-nq9py8k9oy] {
    border-top: none; /* adjoining bands share one 1px edge, not a doubled line */
}

.lp-band-paper[b-nq9py8k9oy] {
    background: var(--paper);
}

.lp-band-fog[b-nq9py8k9oy] {
    background: var(--fog);
}

/* Pattern C — asphalt texture, --fog bands only, behind content (§ new patterns). */
.lp-band-fog[b-nq9py8k9oy]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient( to right, var(--asphalt) 0 1px, transparent 1px 120px );
    pointer-events: none;
}

.lp-band-ink[b-nq9py8k9oy] {
    background: var(--ink);
    color: var(--on-ink);
}

/* Base spec §4 texture: trailer-floor dot grid. Dark sections only —
   this is its one permitted use on the page (specs/12 §1). */
.tex-dot[b-nq9py8k9oy] {
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Base spec §4 texture: the $19.99 anchor only (specs/14 §1) — the
   Pro pricing card, nowhere else. background-image is naturally
   clipped to the card's own border-radius, so no extra overflow
   wrapper is needed, and it paints behind the card's real children
   the same way any element's own background does. */
.tex-chevron[b-nq9py8k9oy] {
    background-image: repeating-linear-gradient( -45deg, rgba(255, 153, 0, .10) 0 14px, transparent 14px 28px );
}

/* ---- Page shell: lane spine + per-band rail (mile marker + shoulder dashes) ----
   One rail per band, not one element spanning the whole page: the
   spine has to switch color crossing into an --ink band (spec 12 §1),
   and a single page-spanning gradient can't do that without knowing
   each band's pixel height. Each rail mirrors .lp-container's own
   max-width/margin-inline/padding-left geometry so left:47px always
   lands on the same x-coordinate as the content column's rail,
   independent of viewport width. Trade-off: the 40px dash phase
   restarts at each band top instead of running phase-perfect through
   the whole page — acceptable since every boundary already carries a
   mile marker + shoulder tick marking it as a deliberate transition. */

.lp-band-rail[b-nq9py8k9oy] {
    display: none;
}

@media (min-width: 1100px) {
    .lp-band-rail[b-nq9py8k9oy] {
        display: block;
        position: absolute;
        inset-block: 0;
        left: 0;
        right: 0;
        max-width: 1280px;
        margin-inline: auto;
        padding-left: 120px;
        color: var(--line);
        background-image: repeating-linear-gradient( to bottom, currentColor 0 22px, transparent 22px 40px );
        background-size: 2px 100%;
        background-position: 47px 0;
        background-repeat: no-repeat;
        opacity: .8;
        pointer-events: none;
    }

    .lp-band-ink .lp-band-rail[b-nq9py8k9oy] {
        color: var(--orange-dark);
        opacity: 1;
    }

    /* Shoulder rules (pattern B): a 40px dashed segment at the rail,
       laid over the band's solid top/bottom edge — reads as a
       shoulder break, not a plain divider. */
    .lp-band-rail[b-nq9py8k9oy]::before,
    .lp-band-rail[b-nq9py8k9oy]::after {
        content: "";
        position: absolute;
        left: 47px;
        width: 40px;
        height: 3px;
        background: repeating-linear-gradient( to right, currentColor 0 6px, transparent 6px 12px );
    }

    .lp-band-rail[b-nq9py8k9oy]::before {
        top: -1px;
    }

    .lp-band-rail[b-nq9py8k9oy]::after {
        bottom: -1px;
    }

    /* Mile markers (pattern A): position at the tick, mono label in --line. */
    .lp-mile-marker[b-nq9py8k9oy] {
        position: absolute;
        top: 24px; /* clears the band's own outer edge — band-rail's inset-block:0 starts there, before the band's padding-block is applied, so 10px read as clipped against the viewport top on the hero (nothing above it to lead in) */
        left: 47px;
        transform: translateX(-50%);
        font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
        font-size: .65rem;
        letter-spacing: .14em;
        white-space: nowrap;
        color: currentColor;
    }
}

/* ---- Page shell: exit-sign eyebrow (built for later sections; unused in the hero) ---- */

.lp-eyebrow[b-nq9py8k9oy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.lp-eyebrow[b-nq9py8k9oy]::before {
    content: "";
    display: inline-block;
    width: 3px;
    align-self: stretch;
    background: var(--orange);
}

/* ---- Shared content container (reused by every section) ---- */

.lp-container[b-nq9py8k9oy] {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 24px;
    position: relative;
}

@media (min-width: 1100px) {
    .lp-container[b-nq9py8k9oy] {
        padding-left: 120px;
    }
}

/* ---- Hero layout ---- */

.lp-hero[b-nq9py8k9oy] {
    /* ~25% less than .lp-band's default clamp(64px,9vw,132px). */
    padding-block: clamp(48px, 6.75vw, 99px);
}

.lp-hero-grid[b-nq9py8k9oy] {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: 56px;
    align-items: start;
    position: relative;
}

@media (min-width: 900px) {
    .lp-hero-grid[b-nq9py8k9oy] {
        grid-template-columns: repeat(12, 1fr);
        align-items: center;
    }

    .lp-hero-copy[b-nq9py8k9oy] {
        grid-column: 1 / span 8;
    }

    .lp-hero-card-wrap[b-nq9py8k9oy] {
        grid-column: 9 / span 4;
    }
}

.lp-hero-card-wrap[b-nq9py8k9oy] {
    position: relative;
}

.lp-hero-card[b-nq9py8k9oy] {
    position: relative;
    overflow: hidden; /* clip pattern D to the card's own rounded corners */
}

/* Pattern D — hero road surface: faint horizontal lane dashes behind
   the table card, fading right to left (new patterns). Replaces the
   earlier vertical placeholder texture now that this is spec'd. */
.lp-hero-card[b-nq9py8k9oy]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient( to bottom, var(--orange) 0 2px, transparent 2px 24px );
    opacity: .04;
    mask-image: linear-gradient(to left, black, transparent);
    -webkit-mask-image: linear-gradient(to left, black, transparent);
    pointer-events: none;
    z-index: 0;
}

.lp-table-header[b-nq9py8k9oy],
.lp-gross-table[b-nq9py8k9oy] {
    position: relative; /* z-index:auto here still paints after the ::before texture pseudo, since tree order puts the pseudo first */
}

/* ---- Type ---- */

.lp-h1[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(2.5rem, 5.2vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0 0 24px;
}

.lp-h1-line[b-nq9py8k9oy] {
    display: block;
}

/* box-decoration-break:clone makes the background clone per wrapped
   line-fragment instead of sizing to the widest line and sitting
   under only the last one — so the bar stays correct whether this
   phrase holds one line or wraps to two. */
.lp-h1-underline[b-nq9py8k9oy] {
    background-image: linear-gradient(var(--orange), var(--orange));
    background-repeat: no-repeat;
    background-size: 100% 6px;
    background-position: 0 1.28em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.lp-subhead[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.6;
    max-width: 62ch;
    color: var(--ink);
    margin: 0 0 32px;
}

/* ---- Buttons ---- */

.lp-hero-actions[b-nq9py8k9oy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.lp-btn[b-nq9py8k9oy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: filter 120ms, transform 120ms;
    cursor: pointer;
}

.lp-btn:focus-visible[b-nq9py8k9oy] {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.lp-btn-primary[b-nq9py8k9oy] {
    background: var(--amber);
    color: var(--ink);
    border: 1px solid rgba(0, 0, 0, .12);
}

.lp-btn-primary:hover[b-nq9py8k9oy] {
    filter: brightness(.96);
    transform: translateY(-1px);
}

.lp-btn-secondary[b-nq9py8k9oy] {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.lp-btn-secondary:hover[b-nq9py8k9oy] {
    filter: brightness(.96);
    transform: translateY(-1px);
}

.lp-band-ink .lp-btn-secondary[b-nq9py8k9oy] {
    color: var(--paper);
    border-color: rgba(255, 255, 255, .28);
}

/* ---- Trust line ---- */

.lp-trust-line[b-nq9py8k9oy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: .8125rem;
    color: var(--slate);
    opacity: .8;
    margin: 20px 0 0;
}

.lp-trust-bullet[b-nq9py8k9oy] {
    width: 6px;
    height: 6px;
    background: var(--orange);
    flex-shrink: 0;
}

/* ---- Product card ---- */

.lp-hero-card[b-nq9py8k9oy] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(19, 25, 33, .22);
    overflow: hidden;
}

.lp-table-header[b-nq9py8k9oy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--slate);
    color: var(--paper);
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-date-range[b-nq9py8k9oy] {
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ---- Gross table ---- */

.lp-gross-table[b-nq9py8k9oy] {
    width: 100%;
    border-collapse: collapse;
}

.lp-gross-table thead th[b-nq9py8k9oy] {
    background: var(--fog);
    color: rgba(19, 25, 33, .7);
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.lp-gross-table th.lp-num[b-nq9py8k9oy],
.lp-gross-table td.lp-num[b-nq9py8k9oy] {
    text-align: right;
}

.lp-gross-row[b-nq9py8k9oy] {
    height: 44px;
    border-bottom: 1px solid var(--line);
    transition: background-color 120ms;
}

.lp-gross-row:nth-child(even)[b-nq9py8k9oy] {
    background: rgba(242, 244, 245, .5);
}

.lp-gross-row:hover[b-nq9py8k9oy] {
    background: rgba(242, 244, 245, .9);
}

.lp-gross-row-top[b-nq9py8k9oy] {
    border-left: 3px solid var(--orange);
    background: rgba(255, 153, 0, .05);
}

.lp-gross-table td[b-nq9py8k9oy] {
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: .875rem;
}

.lp-gross-table td.lp-col-dispatcher[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.lp-gross-table td.lp-num[b-nq9py8k9oy] {
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: .875rem;
    color: rgba(19, 25, 33, .85);
}

.lp-gross-value[b-nq9py8k9oy] {
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
}

.lp-gross-value .js-gross-value[b-nq9py8k9oy] {
    font-variant-numeric: tabular-nums;
}

.lp-share-cell[b-nq9py8k9oy] {
    position: relative;
    padding-bottom: 12px !important;
}

.lp-share-bar[b-nq9py8k9oy] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    background: var(--orange);
    max-width: calc(100% - 24px);
}

.lp-total-row[b-nq9py8k9oy] {
    background: var(--fog);
    font-weight: 600;
    border-top: 2px solid var(--ink);
    border-bottom: none;
    height: 44px;
}

.lp-total-row td[b-nq9py8k9oy] {
    font-weight: 600;
}

/* ---- Hero micro-stat strip (fills the dead space under the card) ---- */

.lp-hero-stats[b-nq9py8k9oy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.lp-hero-stat[b-nq9py8k9oy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-hero-stat-num[b-nq9py8k9oy] {
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.lp-hero-stat-label[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(19, 25, 33, .6);
}

.lp-visually-hidden[b-nq9py8k9oy] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Responsive: table becomes a stacked card list below 640px (§8) ---- */

@media (max-width: 640px) {
    .lp-gross-table thead[b-nq9py8k9oy] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .lp-gross-table[b-nq9py8k9oy], .lp-gross-table tbody[b-nq9py8k9oy], .lp-gross-table tfoot[b-nq9py8k9oy], .lp-gross-table tr[b-nq9py8k9oy], .lp-gross-table td[b-nq9py8k9oy] {
        display: block;
        width: 100%;
    }

    .lp-gross-row[b-nq9py8k9oy], .lp-total-row[b-nq9py8k9oy] {
        height: auto;
        padding: 12px 16px;
    }

    .lp-gross-table td[b-nq9py8k9oy] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: none;
    }

    .lp-gross-table td[b-nq9py8k9oy]::before {
        content: attr(data-label);
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: .75rem;
        text-transform: uppercase;
        color: rgba(19, 25, 33, .6);
    }

    .lp-share-cell[b-nq9py8k9oy] {
        padding-bottom: 4px !important;
    }

    .lp-share-bar[b-nq9py8k9oy] {
        display: none;
    }
}

/* =====================================================================
   Section 2 — The Problem. specs/11-myflott-section-2-problem.md
   ===================================================================== */

/* §1: paper -> fog is the first band change. The shared .lp-band edge
   (top/bottom 1px --line, doubled-up removed by .lp-band + .lp-band)
   does the separating work — not .rule-lane, which is reserved for
   same-tone joins. */

.lp-problem-grid[b-nq9py8k9oy] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    row-gap: 56px;
}

.lp-problem-header[b-nq9py8k9oy] {
    grid-column: 1 / span 7;
}

/* ---- Eyebrow -> H2 -> intro spacing (§3) ---- */

.lp-problem-h2[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    max-width: 16ch;
    margin: 0 0 24px;
}

.lp-problem-h2-line[b-nq9py8k9oy] {
    display: block;
    color: var(--ink);
}

.lp-problem-h2-line--fade[b-nq9py8k9oy] {
    opacity: .4;
}

.lp-problem-intro[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--slate);
    max-width: 62ch;
    margin: 0;
}

/* ---- The three cards (§4) ---- */

.lp-problem-cards[b-nq9py8k9oy] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.lp-problem-card[b-nq9py8k9oy] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--loss);
    border-radius: var(--radius);
    padding: 22px;
}

.lp-problem-label[b-nq9py8k9oy] {
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--loss);
    margin: 0 0 16px;
}

.lp-problem-title[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 22ch;
    margin: 0 0 14px;
}

.lp-problem-body[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--slate);
    margin: 0;
}

.lp-numeral[b-nq9py8k9oy] {
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-weight: 500;
    color: var(--ink);
}

/* ---- Responsive (§6) ---- */

@media (min-width: 640px) {
    .lp-problem-cards[b-nq9py8k9oy] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .lp-problem-card:nth-child(3)[b-nq9py8k9oy] {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) {
    .lp-problem-cards[b-nq9py8k9oy] {
        grid-template-columns: repeat(3, 1fr);
    }

    .lp-problem-card:nth-child(3)[b-nq9py8k9oy] {
        grid-column: auto;
    }
}

@media (min-width: 1100px) {
    .lp-problem-card[b-nq9py8k9oy] {
        padding: 28px;
    }

    .lp-problem-title[b-nq9py8k9oy] {
        font-size: 1.25rem;
    }
}

@media (max-width: 639px) {
    .lp-section-problem[b-nq9py8k9oy] {
        padding-block: 56px;
    }

    .lp-section-problem .lp-container[b-nq9py8k9oy] {
        padding-inline: 20px;
    }
}

/* =====================================================================
   Section 6 — Comparison. specs/12-myflott-section-6-comparison.md
   ===================================================================== */

.lp-comparison-grid[b-nq9py8k9oy] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    row-gap: 56px;
}

.lp-comparison-header[b-nq9py8k9oy] {
    grid-column: 1 / span 7;
}

/* §2: no type device here — both lines full weight, full --on-ink. */
.lp-comparison-h2[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--on-ink);
    margin: 0 0 24px;
}

.lp-comparison-h2-line[b-nq9py8k9oy] {
    display: block;
}

.lp-comparison-intro[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--on-ink-muted);
    max-width: 62ch;
    margin: 0;
}

.lp-comparison-table-wrap[b-nq9py8k9oy] {
    grid-column: 1 / -1;
    max-width: 1040px;
    position: relative;
}

/* MyFlott column panel (§3 Structure) — one shape spanning the full
   table height, positioned to match the 3rd <col>'s 33% width. Kept
   out of the table's own cell backgrounds on purpose: a per-cell
   panel can't run "unbroken" the way §4's bird's-eye payoff needs. */
.lp-comparison-panel[b-nq9py8k9oy] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 33%;
    background: var(--panel);
    border-top: 2px solid var(--orange);
    border-radius: var(--radius) var(--radius) 0 0;
}

.lp-comparison-table[b-nq9py8k9oy] {
    position: relative;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.lp-comparison-table col.lp-comparison-col-criterion[b-nq9py8k9oy] {
    width: 34%;
}

.lp-comparison-table col.lp-comparison-col-sheets[b-nq9py8k9oy],
.lp-comparison-table col.lp-comparison-col-myflott[b-nq9py8k9oy] {
    width: 33%;
}

.lp-comparison-table th[b-nq9py8k9oy],
.lp-comparison-table td[b-nq9py8k9oy] {
    text-align: left;
    vertical-align: top;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ink-line);
}

.lp-comparison-table thead th[b-nq9py8k9oy] {
    padding-block: 18px;
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-comparison-table thead th.lp-comparison-col-sheets[b-nq9py8k9oy] {
    color: var(--on-ink-muted);
}

.lp-comparison-table thead th.lp-comparison-col-myflott[b-nq9py8k9oy] {
    color: var(--orange);
}

.lp-comparison-table th[scope="row"][b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: .9375rem;
    color: var(--on-ink);
}

.lp-comparison-table td[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: .9375rem;
    line-height: 1.5;
}

.lp-comparison-table td.lp-comparison-col-sheets[b-nq9py8k9oy] {
    color: var(--on-ink-muted);
}

.lp-comparison-table td.lp-comparison-col-myflott[b-nq9py8k9oy] {
    color: var(--on-ink);
}

.lp-numeral--on-ink[b-nq9py8k9oy] {
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-weight: 500;
    color: var(--on-ink);
}

/* Lane-dash marker: same device as the road pattern, different
   weight per column — not a checkmark. */
.lp-comparison-dash[b-nq9py8k9oy] {
    display: inline-block;
    width: 10px;
    height: 2px;
    margin-right: 12px;
    margin-bottom: 2px; /* optical centering on the first text line */
    background: rgba(255, 255, 255, .22);
}

.lp-comparison-table td.lp-comparison-col-myflott .lp-comparison-dash[b-nq9py8k9oy] {
    background: var(--orange);
}

/* ---- Responsive (§5) ---- */

@media (min-width: 768px) and (max-width: 1023px) {
    .lp-comparison-table th[b-nq9py8k9oy],
    .lp-comparison-table td[b-nq9py8k9oy] {
        font-size: .875rem;
        padding: 16px;
    }
}

@media (max-width: 767px) {
    .lp-comparison-panel[b-nq9py8k9oy] {
        display: none;
    }

    .lp-comparison-table thead[b-nq9py8k9oy] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .lp-comparison-table[b-nq9py8k9oy],
    .lp-comparison-table tbody[b-nq9py8k9oy],
    .lp-comparison-table tr[b-nq9py8k9oy],
    .lp-comparison-table th[b-nq9py8k9oy],
    .lp-comparison-table td[b-nq9py8k9oy] {
        display: block;
        width: 100%;
    }

    .lp-comparison-table tr[b-nq9py8k9oy] {
        padding-block: 16px;
        border-bottom: 1px solid var(--ink-line);
    }

    .lp-comparison-table th[scope="row"][b-nq9py8k9oy] {
        padding: 0 0 12px;
        border-bottom: none;
    }

    .lp-comparison-table td[b-nq9py8k9oy] {
        padding: 10px 12px;
        border-bottom: none;
    }

    .lp-comparison-table td[b-nq9py8k9oy]::before {
        content: attr(data-label);
        display: block;
        font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
        font-size: .65rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--on-ink-muted);
        margin-bottom: 6px;
    }

    .lp-comparison-table td.lp-comparison-col-myflott[b-nq9py8k9oy] {
        background: var(--panel);
        border-radius: var(--radius);
    }
}

/* =====================================================================
   Section 7 — Objection Handling. specs/13-myflott-section-7-objections.md
   ===================================================================== */

/* §1: the page's breath — deliberately tighter than the default band
   padding, no cards/panels/texture, one orange rule per answer only. */
.lp-section-objections[b-nq9py8k9oy] {
    padding-block: clamp(56px, 6vw, 88px);
}

.lp-objections-grid[b-nq9py8k9oy] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
}

.lp-objections-col[b-nq9py8k9oy] {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .lp-objections-col[b-nq9py8k9oy] {
        grid-column: 1 / span 9;
    }
}

@media (min-width: 1024px) {
    .lp-objections-col[b-nq9py8k9oy] {
        grid-column: 1 / span 7;
    }
}

.lp-objections-h2[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    max-width: 24ch;
    margin: 0 0 40px;
}

.lp-objections-list[b-nq9py8k9oy] {
    margin: 0;
}

.lp-objections-q[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 46ch;
    margin: 0 0 16px;
    text-indent: -0.5em; /* hanging opening quote: fallback for the ~universal case */
}

@supports (hanging-punctuation: first) {
    .lp-objections-q[b-nq9py8k9oy] {
        hanging-punctuation: first;
        text-indent: 0;
    }
}

.lp-objections-a[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--slate);
    max-width: 66ch;
    margin: 0;
    padding-left: 20px;
    border-left: 3px solid var(--orange);
}

/* Between items: 1px --line rule, 36px above/below. Targeting dt so
   the first item never gets a leading rule, and there's nothing after
   the last dd to draw one below it either. */
.lp-objections-list dt:not(:first-of-type)[b-nq9py8k9oy] {
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

@media (max-width: 767px) {
    .lp-objections-q[b-nq9py8k9oy] {
        font-size: 1.125rem;
    }

    .lp-objections-list dt:not(:first-of-type)[b-nq9py8k9oy] {
        margin-top: 28px;
        padding-top: 28px;
    }
}

/* =====================================================================
   Section 8 — Pricing. specs/14-myflott-section-8-pricing.md
   ===================================================================== */

.lp-pricing-header[b-nq9py8k9oy] {
    margin-bottom: 40px;
}

.lp-pricing-h2[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    letter-spacing: -0.025em;
    color: var(--on-ink);
    max-width: 28ch;
    margin: 0;
}

.lp-pricing-h2-break[b-nq9py8k9oy] {
    display: none;
}

@media (max-width: 1023px) {
    .lp-pricing-h2-break[b-nq9py8k9oy] {
        display: block;
    }
}

/* ---- Toggle (§3) ---- */

.lp-pricing-toggle[b-nq9py8k9oy] {
    display: inline-flex;
    gap: 4px;
    background: var(--slate);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 32px;
}

.lp-pricing-seg[b-nq9py8k9oy] {
    appearance: none;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    cursor: pointer;
}

.lp-pricing-seg:focus-visible[b-nq9py8k9oy] {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.lp-pricing-cards[data-billing="monthly"] .lp-pricing-seg[data-set-billing="monthly"][b-nq9py8k9oy],
.lp-pricing-cards[data-billing="yearly"] .lp-pricing-seg[data-set-billing="yearly"][b-nq9py8k9oy] {
    background: var(--orange);
    color: var(--ink);
}

.lp-pricing-save[b-nq9py8k9oy] {
    font-size: .65rem;
    opacity: .7;
}

/* ---- Cards (§4) ---- */

.lp-pricing-grid[b-nq9py8k9oy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
}

@media (min-width: 768px) {
    .lp-pricing-grid[b-nq9py8k9oy] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .lp-pricing-grid[b-nq9py8k9oy] {
        grid-template-columns: 5fr 7fr;
    }
}

.lp-pricing-card[b-nq9py8k9oy] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--radius);
}

@media (min-width: 1024px) {
    .lp-pricing-card[b-nq9py8k9oy] {
        padding: 32px;
    }
}

.lp-pricing-card-free[b-nq9py8k9oy] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
}

/* Same device as the MyFlott column in section 6 — panel + orange top
   edge only, no side borders. .tex-chevron supplies the texture. */
.lp-pricing-card-pro[b-nq9py8k9oy] {
    background-color: var(--panel);
    border-top: 2px solid var(--orange);
}

.lp-pricing-plan[b-nq9py8k9oy] {
    font-family: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--on-ink);
    margin: 0 0 8px;
}

.lp-pricing-price[b-nq9py8k9oy] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: clamp(2.25rem, 3.6vw, 3rem);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.lp-pricing-card-free .lp-pricing-price-num[b-nq9py8k9oy] {
    color: var(--on-ink);
}

.lp-pricing-card-pro .lp-pricing-price-num[b-nq9py8k9oy] {
    color: var(--orange);
}

.lp-pricing-permonth[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--on-ink-muted);
}

.lp-pricing-sub[b-nq9py8k9oy] {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: .875rem;
    color: var(--on-ink-muted);
    margin: 8px 0 0;
}

.lp-pricing-sub [data-sub][b-nq9py8k9oy] {
    display: block;
}

/* Price/sub-line swap — an attribute flip, no transition anywhere in
   this rule set, so the swap is instant per §3. */
.lp-pricing-cards[data-billing="yearly"] [data-price="monthly"][b-nq9py8k9oy],
.lp-pricing-cards[data-billing="yearly"] [data-sub="monthly"][b-nq9py8k9oy] {
    display: none;
}

.lp-pricing-cards[data-billing="monthly"] [data-price="yearly"][b-nq9py8k9oy],
.lp-pricing-cards[data-billing="monthly"] [data-sub="yearly"][b-nq9py8k9oy] {
    display: none;
}

.lp-pricing-divider[b-nq9py8k9oy] {
    border: none;
    border-top: 1px solid var(--ink-line);
    margin: 24px 0;
}

.lp-pricing-plus[b-nq9py8k9oy] {
    font-family: 'Overpass Mono', 'IBM Plex Mono', monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin: 0 0 16px;
}

.lp-pricing-features[b-nq9py8k9oy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-pricing-features li[b-nq9py8k9oy] {
    display: flex;
    align-items: flex-start;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--on-ink); /* honesty rule: Free is full-contrast, same as Pro */
}

.lp-pricing-dash[b-nq9py8k9oy] {
    flex-shrink: 0;
    display: inline-block;
    width: 10px;
    height: 2px;
    margin: .6em 12px 0 0;
    background: rgba(255, 255, 255, .22);
}

.lp-pricing-dash-pro[b-nq9py8k9oy] {
    background: var(--orange);
}

.lp-pricing-feature-rest[b-nq9py8k9oy] {
    color: var(--on-ink-muted);
    font-weight: 400;
}

.lp-pricing-btn[b-nq9py8k9oy] {
    margin-top: auto; /* pins the button to the bottom of the stretched card */
    padding-top: 32px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.lp-pricing-btn-free[b-nq9py8k9oy] {
    background: transparent;
    color: var(--on-ink);
    border: 1px solid rgba(255, 255, 255, .28);
}

.lp-pricing-btn-pro[b-nq9py8k9oy] {
    background: var(--amber);
    color: var(--ink);
    border: 1px solid rgba(0, 0, 0, .12);
}

/* ---- Closing line (§5) ---- */

.lp-pricing-closer-grid[b-nq9py8k9oy] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--ink-line);
}

.lp-pricing-closer[b-nq9py8k9oy] {
    grid-column: 1 / -1;
    max-width: 72ch;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--on-ink-muted);
    margin: 0;
}

@media (min-width: 1024px) {
    .lp-pricing-closer[b-nq9py8k9oy] {
        grid-column: 1 / span 8;
    }
}

/* ---- Responsive (§6): stack, Free first, Pro second — already the
   DOM order, so no reordering rule is needed. Toggle full width. ---- */

@media (max-width: 767px) {
    .lp-pricing-toggle[b-nq9py8k9oy] {
        display: flex;
        width: 100%;
    }

    .lp-pricing-seg[b-nq9py8k9oy] {
        flex: 1;
        justify-content: center;
    }
}
/* /Components/Pages/Wall/WallBoard.razor.rz.scp.css */
[b-k1c5l3ivh1] .zone-c {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0; /* Important for flex children to shrink */
    margin-top: 1rem;
}

[b-k1c5l3ivh1] .panel-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}