@import 'aurora-blazor.Client.oysd2ymfrw.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-j7jeyf94tm] {
    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-j7jeyf94tm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    /* Blazor's template ships this link with a .reload class and no rule for it anywhere, so it
       rendered as default-blue on lightyellow — the one link in the app that ignores the design
       system, in the one bar a user only ever sees when something has already gone wrong. Given a
       rule rather than deleted: the class is a recognised hook and this bar is not themed, so it
       inherits the surrounding text colour instead of a token. */
    #blazor-error-ui .reload[b-j7jeyf94tm] {
        color: inherit;
        font-weight: 600;
        text-underline-offset: 2px;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* NavLink renders its own <a>, and Blazor's CSS isolation never puts the scope attribute on markup
   produced by a child component — so every rule targeting a link needs ::deep off .fnav, which this
   component does own. Without it the links silently fall back to inherited styles.

   Concept 2b. Values taken from the design doc rather than rounded, so the bar matches it exactly:
   72px height, a --brand-rule hairline, 14.5px/500 nav text at #4a4a4a, 36px outline buttons at radius 7. */

.fnav[b-a1l3ojewu4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 72px, but declared in theme.css: /browse sizes itself as 100dvh minus this, and a height that
       lives in two files is a page that scrolls or clips the first time one of them changes. */
    height: var(--navbar-height);
    padding: 0 32px;
    background: #fff;
    border-bottom: 1px solid var(--brand-rule);
}

.fnav__left[b-a1l3ojewu4] {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 44px;
    min-width: 0;
}

.fnav__logo[b-a1l3ojewu4] {
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-graphite);
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}

/* 2b put this dot in green. It is the one place lime was asked to be *ink on white*, where it is 1.4:1
   and reads as a rendering artefact rather than as the wordmark's accent — and the same wordmark in the
   footer (.foot__dot) was already purple, so the two lockups disagreed. Lime stays a field colour. */
.fnav__dot[b-a1l3ojewu4] {
    color: var(--brand-purple);
}

.fnav__items[b-a1l3ojewu4] {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 28px;
}

.fnav[b-a1l3ojewu4]  .fnav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4a4a4a;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.fnav[b-a1l3ojewu4]  .fnav__link:hover {
    color: var(--brand-graphite);
}

/* 2b has no active underline — every item carries the same weight, so the current page is marked by
   colour and weight only. */
.fnav[b-a1l3ojewu4]  .fnav__link.active {
    color: var(--brand-graphite);
    font-weight: 600;
}

.fnav__chevron[b-a1l3ojewu4] {
    flex: none;
}

/* Full bar height, so the panel's `top: 100%` lands on the bar's bottom edge rather than mid-bar,
   and so the hover target covers the whole bar — moving the pointer down to the panel keeps it open. */
.fnav__group[b-a1l3ojewu4] {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Matches BlazorBlueprint's NavigationMenuContent sample: a fixed-width grid of rounded rows rather
   than a list of bare links. */
.fnav__panel[b-a1l3ojewu4] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 400px;
    display: none;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    z-index: 40;
}

/* Driven by the <details> open state, so pointer, touch and keyboard all work. The panel's display is
   set explicitly here rather than relying on the UA hiding a closed disclosure's content, which is not
   something to depend on once the details itself is display:flex. */
.fnav__group[open] .fnav__panel[b-a1l3ojewu4] {
    display: grid;
}

.fnav__group-trigger[b-a1l3ojewu4] {
    list-style: none;
}

.fnav__group-trigger[b-a1l3ojewu4]::-webkit-details-marker {
    display: none;
}

/* Both group variants: the desktop dropdown and the mobile sheet's nested disclosure. */
.fnav__group[open] .fnav__chevron[b-a1l3ojewu4],
.fnav__sheet-group[open] .fnav__chevron[b-a1l3ojewu4] {
    transform: rotate(180deg);
}

.fnav[b-a1l3ojewu4]  .fnav__panel-link {
    display: block;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.fnav[b-a1l3ojewu4]  .fnav__panel-link:hover {
    background: var(--brand-light);
}

.fnav[b-a1l3ojewu4]  .fnav__panel-title {
    display: block;
    margin-bottom: 3px;
    color: var(--brand-graphite);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.fnav[b-a1l3ojewu4]  .fnav__panel-desc {
    display: block;
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.fnav[b-a1l3ojewu4]  .fnav__panel-link.active .fnav__panel-title {
    color: var(--brand-purple);
}

.fnav__right[b-a1l3ojewu4] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fnav__culture[b-a1l3ojewu4] {
    font-size: 13.5px;

    /* #3c3c3c, matching .fnav__btn next to it, and not the #8a8a8a this used to inherit down onto the
       trigger and its globe icon.

       #8a8a8a is 3.45:1 on white - under AA's 4.5:1, and a third of the contrast of everything beside it
       in the same bar (.fnav__link is 8.86:1, .fnav__btn is 11.03:1). Nothing was ever disabled and the
       opacity was always 1: the control just read as greyed out, because at that ratio next to those
       neighbours the eye files it as inactive. Reported from the dev cluster as a greyed-out dropdown.

       .fnav__btn rather than .fnav__link because that is what this already is - the slot copies the
       buttons' 13.5px, and the trigger carries the same --brand-rule border they do. */
    color: #3c3c3c;

    /* CultureSelector does not prerender (AB-64), so this slot is empty until WASM boots. Without a
       reservation it collapses to zero and everything to its right slides left, then jumps back.

       124px, from measuring the live trigger: 110.44px under `pl`, where the label is the only variable
       part - "English" is 48.20px of text against "Polski"'s 38.44px, so the same trigger is ~120.2px
       under `en`. Reserving the wider of the two means neither language shifts.

       ponytail: min-width, not width, so a third language cannot be clipped - SupportedCultures is meant
       to be the only file you touch to add one. A longer label than "English" would grow the slot and
       under-reserve it by the difference; re-measure here if one is added. */
    min-width: 124px;
    min-height: 36px;
}

/* BbSelect renders a 40px trigger, which sits proud of the 36px buttons next to it. */
.fnav__culture[b-a1l3ojewu4]  button {
    height: 36px;
}

.fnav__btn[b-a1l3ojewu4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--brand-rule);
    border-radius: 7px;
    background: transparent;
    color: #3c3c3c;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.fnav__btn:hover[b-a1l3ojewu4] {
    background: var(--brand-light);
}

/* The one purple element in 2b: an outline CTA, not a filled one. */
.fnav__btn--cta[b-a1l3ojewu4] {
    padding: 0 18px;
    border: 1.5px solid var(--brand-purple);
    color: var(--brand-purple);
}

.fnav__btn--cta:hover[b-a1l3ojewu4] {
    background: color-mix(in srgb, var(--brand-purple) 6%, transparent);
}

.fnav__btn--block[b-a1l3ojewu4] {
    width: 100%;
    height: 42px;
    font-size: 14.5px;
}

/* ---- Mobile ------------------------------------------------------------------------------------ */

.fnav__mobile[b-a1l3ojewu4] {
    display: none;
}

.fnav__burger[b-a1l3ojewu4] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    list-style: none;
}

/* Drops the default disclosure triangle. */
.fnav__burger[b-a1l3ojewu4]::-webkit-details-marker {
    display: none;
}

.fnav__burger span[b-a1l3ojewu4] {
    display: block;
    height: 1.8px;
    border-radius: 2px;
    background: var(--brand-graphite);
}

.fnav__sheet[b-a1l3ojewu4] {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 18px 24px;
    background: #fff;
    border-bottom: 1px solid var(--brand-rule);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    z-index: 30;
}

.fnav[b-a1l3ojewu4]  .fnav__sheet-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 4px;
    border-bottom: 1px solid var(--brand-rule);
    color: #3c3c3c;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.fnav[b-a1l3ojewu4]  .fnav__sheet-link::-webkit-details-marker {
    display: none;
}

.fnav[b-a1l3ojewu4]  .fnav__sheet-link.active {
    color: var(--brand-purple);
}

.fnav[b-a1l3ojewu4]  .fnav__sheet-link--child {
    padding-left: 18px;
    font-size: 15px;
    color: #5a5a5a;
}

.fnav__sheet-culture[b-a1l3ojewu4] {
    padding: 14px 4px 10px;
    font-size: 14px;

    /* Same #8a8a8a problem as .fnav__culture, same fix - this slot inherits onto the sheet's own trigger,
       where it sits directly above two #3c3c3c block buttons. */
    color: #3c3c3c;

    /* Same reservation as .fnav__culture, but vertical: this slot is block-level and full-width, so a
       late-arriving trigger pushes the basket and login buttons below it down rather than sideways.

       64px, and neither number in it is the desktop one. Blueprint's preflight sets box-sizing:border-box,
       so the reservation carries this slot's own 14px+10px padding as well as the trigger; and the trigger
       here is 40px, not the 36px next door, because the `::deep button` override above applies only to
       .fnav__culture - in the sheet BbSelect keeps its default h-10. Measured, after 60px failed. */
    min-height: 64px;
}

.fnav__sheet .fnav__btn--block + .fnav__btn--block[b-a1l3ojewu4] {
    margin-top: 8px;
}

/* The design's desktop row is 1160px wide once the right-hand cluster is in it, so it needs more than
   BlazorBlueprint's md breakpoint. 1024px is where the two groups plus three items stop fitting. */
@media (max-width: 1023px) {
    .fnav[b-a1l3ojewu4] {
        position: relative;
        /* The 56px lives in theme.css's matching media query, for the same reason as the desktop one. */
        padding: 0 18px;
    }

    .fnav__logo[b-a1l3ojewu4] {
        font-size: 18px;
    }

    .fnav__items[b-a1l3ojewu4],
    .fnav__right[b-a1l3ojewu4] {
        display: none;
    }

    .fnav__mobile[b-a1l3ojewu4] {
        display: block;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4dygdf9s77],
.components-reconnect-repeated-attempt-visible[b-4dygdf9s77],
.components-reconnect-failed-visible[b-4dygdf9s77],
.components-pause-visible[b-4dygdf9s77],
.components-resume-failed-visible[b-4dygdf9s77],
.components-rejoining-animation[b-4dygdf9s77] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-4dygdf9s77 {
    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/AdDetail.razor.rz.scp.css */
/*
    The ad detail page (AB-60). Two columns at desktop, one on a phone.

    Colours are theme.css's brand tokens, as everywhere else. This page deliberately does not reuse the
    landing page's .section/.grid rhythm: those are scoped to Home.razor and are the landing page's own
    system, and lifting them into a shared stylesheet to serve one more page would make every future change
    to the landing rhythm a change to this page too.
*/
.ad[b-uozg3p3d7e] {
    max-width: 1120px;
    margin-inline: auto;
    padding: 28px 20px 56px;
    color: var(--brand-graphite);
}

.ad__back[b-uozg3p3d7e] {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-purple);
    text-decoration: none;
}

.ad__back:hover[b-uozg3p3d7e] {
    text-decoration: underline;
}

.ad__layout[b-uozg3p3d7e] {
    display: grid;
    /* The sidebar is the fixed half: the price box has a natural width and the photos should take the
       rest, rather than both splitting the page evenly and leaving the price adrift in whitespace. */
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

.ad__lead[b-uozg3p3d7e] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    background: var(--brand-light);
}

/* An ad with no photo is normal. The box is kept at the same size so the page does not reflow around
   whether an owner uploaded anything. */
.ad__lead--empty[b-uozg3p3d7e] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
}

.ad__gallery[b-uozg3p3d7e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.ad__shot[b-uozg3p3d7e] {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 10px;
    background: var(--brand-light);
}

.ad__title[b-uozg3p3d7e] {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 22px 0 6px;
    text-wrap: balance;
}

.ad__where[b-uozg3p3d7e] {
    font-size: 15px;
    color: #6b6b6b;
    margin: 0 0 10px;
}

.ad__medium[b-uozg3p3d7e] {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--brand-light);
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
}

.ad__h2[b-uozg3p3d7e] {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
}

.ad__about[b-uozg3p3d7e] {
    margin-top: 28px;
}

/*
    The one block on this page whose markup is not ours — it is owner-authored, through AdDescription's
    sanitizer. So it is styled by element rather than by class: there are no classes to hook, and the
    sanitizer strips any the author tried to bring.
*/
.ad__prose[b-uozg3p3d7e] {
    font-size: 15px;
    line-height: 1.6;

    /* Owner copy cannot be trusted to be sensible about length. Without this a pasted URL with no spaces
       pushes the whole two-column layout sideways. */
    overflow-wrap: anywhere;
}

/* ::deep, because this content arrives as a MarkupString at runtime and so never gets the scope
   attribute the compiler stamps on our own markup. Without it the rewriter produces
   `.ad__prose p[b-xxx]`, which matches nothing here and the rules are silently dead. */
.ad__prose[b-uozg3p3d7e]  p {
    margin: 0 0 12px;
}

.ad__prose[b-uozg3p3d7e]  ul,
.ad__prose[b-uozg3p3d7e]  ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.ad__prose[b-uozg3p3d7e]  a {
    color: var(--brand-purple);
}


.ad__side[b-uozg3p3d7e] {
    border: 1px solid var(--brand-rule);
    border-radius: 14px;
    padding: 20px;
    position: sticky;
    top: 20px;
}

.ad__facts[b-uozg3p3d7e] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 16px;
    margin: 0;
    font-size: 13.5px;
}

.ad__facts dt[b-uozg3p3d7e] {
    color: #6b6b6b;
}

.ad__facts dd[b-uozg3p3d7e] {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* Not-found and unavailable. Same shell, different words — see the page for why they are two states. */
.ad-empty[b-uozg3p3d7e] {
    max-width: 560px;
    margin: 64px auto;
    padding-inline: 20px;
    text-align: center;
    color: var(--brand-graphite);
}

.ad-empty h1[b-uozg3p3d7e] {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 10px;
}

.ad-empty p[b-uozg3p3d7e] {
    font-size: 15px;
    color: #6b6b6b;
    margin: 0 0 18px;
}

@media (max-width: 900px) {
    .ad__layout[b-uozg3p3d7e] {
        grid-template-columns: 1fr;
    }

    /* Sticky in one column pins the price box over the photos as the reader scrolls past it. */
    .ad__side[b-uozg3p3d7e] {
        position: static;
    }
}

/* AB-95. The one action on this page, so it reads as the primary CTA rather than a link: the nav's
   own purple-outline button, sized to the sidebar. Full width because it sits under the facts list
   in a narrow column, where an inline-width button looks like a stray tag. */
.ad__cta[b-uozg3p3d7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    margin-top: 18px;
    padding: 0 18px;
    border: 1.5px solid var(--brand-purple);
    border-radius: 7px;
    color: var(--brand-purple);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
}

.ad__cta:hover[b-uozg3p3d7e] {
    background: color-mix(in srgb, var(--brand-purple) 6%, transparent);
}
/* /Components/Pages/ComingSoon.razor.rz.scp.css */
/*
    The launch page. Brand tokens from theme.css; the green = owner, purple = advertiser pairing is the
    landing page's, kept so the two pages read as one product. Ink and muted grey are the landing page's
    AA-checked values (see Home.razor.css) rather than new ones.
*/
.soon[b-z75dc8kmx7] {
    --soon-ink: #1a1a1a;
    --soon-muted: #6b6b6b;
    --soon-pad: clamp(16px, 5vw, 40px);

    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--soon-ink);
    background: #fff;
}

.soon__bar[b-z75dc8kmx7],
.soon__main[b-z75dc8kmx7],
.soon__foot[b-z75dc8kmx7] {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    padding-inline: var(--soon-pad);
    box-sizing: border-box;
}

.soon__bar[b-z75dc8kmx7] {
    padding-block: 24px;
}

.soon__logo[b-z75dc8kmx7] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-graphite);
}

.soon__dot[b-z75dc8kmx7] {
    color: var(--brand-green);
}

.soon__main[b-z75dc8kmx7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 6vw, 56px);
    padding-block: clamp(16px, 4vw, 48px) 56px;
}

.soon__badge[b-z75dc8kmx7] {
    display: inline-block;
    margin: 0 0 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand-purple);
    font-size: 14px;
    font-weight: 600;
}

.soon__title[b-z75dc8kmx7] {
    margin: 0 0 20px;
    max-width: 16ch;
    font-size: clamp(2.25rem, 7vw, 4rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.soon__lead[b-z75dc8kmx7] {
    margin: 0;
    max-width: 60ch;
    font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
    line-height: 1.55;
    color: var(--soon-muted);
}

/* The one thing to do on the page, so it sits straight under the pitch — above the fold on a phone. */
.soon__signup[b-z75dc8kmx7] {
    max-width: 600px;
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--brand-rule);
    border-radius: 20px;
    /* #zapis is the redirect's target: keep the heading clear of the viewport edge when it is jumped to. */
    scroll-margin-top: 16px;
}

.soon__signup-title[b-z75dc8kmx7] {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.soon__signup-body[b-z75dc8kmx7] {
    margin: 0 0 20px;
    color: var(--soon-muted);
    line-height: 1.5;
}

.soon__label[b-z75dc8kmx7] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.soon__row[b-z75dc8kmx7] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 16px text and a 48px target: smaller text makes iOS zoom the page on focus. */
.soon__input[b-z75dc8kmx7] {
    flex: 1 1 240px;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #8a8a8a;
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
    color: var(--soon-ink);
    background: #fff;
}

.soon__button[b-z75dc8kmx7] {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-purple);
    cursor: pointer;
}

.soon__button:hover[b-z75dc8kmx7] {
    background: #3600c4;
}

.soon__input:focus-visible[b-z75dc8kmx7],
.soon__button:focus-visible[b-z75dc8kmx7],
.soon a:focus-visible[b-z75dc8kmx7] {
    outline: 3px solid var(--brand-purple);
    outline-offset: 2px;
}

/* Full-width button once the row wraps, so it is not left as a stub under the field. */
@media (max-width: 480px) {
    .soon__button[b-z75dc8kmx7] {
        flex-basis: 100%;
    }
}

.soon__note[b-z75dc8kmx7] {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;
}

.soon__note--ok[b-z75dc8kmx7] {
    margin: 8px 0 0;
    background: var(--brand-green);
    color: var(--brand-graphite);
    font-weight: 600;
}

.soon__note--error[b-z75dc8kmx7] {
    background: #fdecec;
    color: #8a1c1c;
}

.soon__privacy[b-z75dc8kmx7] {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--soon-muted);
}

.soon a[b-z75dc8kmx7] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.soon__trap[b-z75dc8kmx7] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.soon__offers[b-z75dc8kmx7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

.soon__offer[b-z75dc8kmx7] {
    padding: clamp(20px, 4vw, 32px);
    border-radius: 20px;
    line-height: 1.55;
}

.soon__offer p[b-z75dc8kmx7] {
    margin: 0;
}

.soon__offer-title[b-z75dc8kmx7] {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
}

.soon__offer--owner[b-z75dc8kmx7] {
    background: var(--brand-green);
    color: var(--brand-graphite);
}

.soon__offer--renter[b-z75dc8kmx7] {
    background: var(--brand-purple);
    color: #fff;
}

.soon__foot[b-z75dc8kmx7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding-block: 24px;
    border-top: 1px solid var(--brand-rule);
    font-size: 14px;
    color: var(--soon-muted);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/*
    Landing page tokens, rhythm and the two shared layout classes. Every landing subtask styles its own
    section in this file and reuses what is here — the alternative is nine sections each inventing their
    own heading size and side padding, which is how the rhythm drifts.

    Colours come from theme.css's brand tokens (global :root, loaded in App.razor). Note --landing-ink
    is #1a1a1a, which is *not* theme.css's --brand-graphite (#2f2f2f) — Bold uses the darker one on
    white, so do not swap them.

    Every hairline and every light wash on this page is --brand-rule / --brand-light. There is no
    --landing-rule any more: it was an alias for one border, which is one indirection too many.

    Anything printed *on* --brand-green is --brand-graphite. That replaced three inks that existed only
    for this — a deep purple, a muted purple-grey and a bottle green. All three passed AA; the problem
    was that the owner panel spoke in three colours where the renter panel spoke in one. Graphite is
    10.5:1 on lime, better than any of them. Do not invent a fourth.
*/
.landing[b-lq38vrnkkn] {
    --landing-ink: #1a1a1a;
    /* The design's #8a8a8a is 3.4:1 on white and misses AA. #6b6b6b is 5.3:1 and is the design's own
       description grey, so this is one fewer colour on the page rather than one more. */
    --landing-muted: #6b6b6b;
    --landing-pad: 40px;
    --landing-gap: 36px;

    /* --brand-purple pressed. The design's own a:hover. */
    --landing-purple-dark: #3600c4;

    max-width: 1440px;
    margin-inline: auto;
    /* Deliberately no `overflow-x: clip` here. It would stop the body scrolling sideways by hiding the
       overflow instead of preventing it — the section would still be cut off, and
       LandingShellTests.TheBodyNeverScrollsHorizontally would go green against it. Sections wrap or
       scroll inside themselves; the page does not paper over them. */
}

/*
    .section owns side padding and the gap above it, and nothing else. Anything vertical inside a section
    is that section's own business — padding declared on both this and a child is the usual way two rules
    cancel out and a section ends up flush against the one above it.

    Sections that need to bleed to the edge (the hero) simply do not take .section. The dark owner band
    used to be listed here too and is not one: Bold insets it, so it takes .section like the rest.
*/
.section[b-lq38vrnkkn] {
    padding-inline: var(--landing-pad);
    margin-top: var(--landing-gap);
}

.section__title[b-lq38vrnkkn] {
    font-size: 22px;
    font-weight: 700;
    color: var(--landing-ink);
    letter-spacing: -0.01em;
    margin: 0 0 18px;
}

/*
    Heading with a "see all" link opposite it. Deliberately declares no margin of its own: the 18px stays
    on .section__title in every section, whether or not it has a link beside it. Putting it on this
    wrapper instead — and zeroing the title's — is what makes a section with a link sit differently from
    one without, which is the drift .section__title exists to prevent. Margins do not collapse inside a
    flex container, so the title's own 18px still spaces the row correctly.
*/
.section__head[b-lq38vrnkkn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.section__more[b-lq38vrnkkn] {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-purple);
    text-decoration: none;
    white-space: nowrap;
}

.section__more:hover[b-lq38vrnkkn] {
    text-decoration: underline;
}

/*
    The card grid, and the page's only breakpoints. The design is a single 1440px desktop frame with
    hardcoded repeat(4,1fr) and no mobile spec, so the steps are decided here: 4 up, 2 up below 1024,
    1 up below 640. Use these two widths in every landing section — a section that picks its own
    breakpoint reflows out of step with the one above it.
*/
.grid[b-lq38vrnkkn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .grid[b-lq38vrnkkn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .landing[b-lq38vrnkkn] {
        --landing-pad: 20px;
        --landing-gap: 28px;
    }

    .grid[b-lq38vrnkkn] {
        grid-template-columns: 1fr;
    }
}

/* Hero (AB-46) ----------------------------------------------------------- */

/*
    Two solid colour panels, edge to edge. Bold went from tinted panels to full brand colour here, which
    is why nothing in this block takes .section — the padding is the panel's own, and an inset would put
    white gutters down both sides of the split.
*/
.hero[b-lq38vrnkkn] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hero__panel[b-lq38vrnkkn] {
    padding: 60px 48px 56px;
}

.hero__panel--renter[b-lq38vrnkkn] {
    background: var(--brand-purple);
}

.hero__panel--owner[b-lq38vrnkkn] {
    background: var(--brand-green);
}

.hero__badge[b-lq38vrnkkn] {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 6px 13px;
    margin: 0 0 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hero__badge--renter[b-lq38vrnkkn] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Purple on the green panel, so the two badges swap colours across the seam rather than each sitting
   in its own. */
.hero__badge--owner[b-lq38vrnkkn] {
    background: var(--brand-purple);
    color: #fff;
}

/*
    clamp() rather than a breakpoint. The design fixes 44px against a 1440px frame; at 375px that is wide
    enough for a single Polish compound ("powierzchnię") to push the body sideways on its own, and a
    heading is the one element on this page that cannot wrap out of trouble. The ramp bottoms out at 32px
    well before the panels stack, so the stacked layout is not also shrinking.
*/
.hero__title[b-lq38vrnkkn] {
    font-size: clamp(32px, 3.1vw, 44px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.02em;

    /*
        530px, not the design's 470. Polish is the longer language here: "Zarabiaj na przestrzeni,
        którą już masz" needs 518px to hold two lines, so at 470 it broke to three and the owner panel
        stood a line taller than the renter one — in English, where both titles fit at 470, the split
        looked even and the defect was invisible. 530 is the first round number clear of 518, and well
        inside the panel's 624px of inner width at 1440.

        Check a new title against the *Polish* string, not the English one.
    */
    max-width: 530px;

    /*
        …and balance is what stops the wider cap changing breaks it was not meant to touch. Greedy
        wrapping fills the first line, so at 530 the English owner title becomes "Earn from the space
        you / already have". Balanced, all four title/language pairs break exactly where they did at
        470 and Polish owner is the only one that moves — three lines to two, which is the point.

        Unsupported, it degrades to that greedy wrap: still two lines in all four, just two of the
        break points less even. That is why the cap is 530 and not more — by 560 the greedy fallback
        starts splitting the English renter title badly too.
    */
    text-wrap: balance;

    margin: 0 0 14px;
}

.hero__title--renter[b-lq38vrnkkn] {
    color: #fff;
}

.hero__title--owner[b-lq38vrnkkn] {
    color: var(--brand-graphite);
}

.hero__body[b-lq38vrnkkn] {
    font-size: 15.5px;
    line-height: 1.5;
    max-width: 440px;
    margin: 0 0 26px;
}

/*
    The design's rgba(255,255,255,0.82) — 5.3:1 on --brand-purple, comfortably AA at this size.
*/
.hero__body--renter[b-lq38vrnkkn] {
    color: rgba(255, 255, 255, 0.82);
}

.hero__body--owner[b-lq38vrnkkn] {
    color: var(--brand-graphite);
}

/*
    The design says rgba(255,255,255,0.7). At 13px that is 4.24:1 against --brand-purple and misses AA by
    a hair — this is the one place the page deviates from the spec's colour, and 0.8 (5.3:1) is not
    distinguishable from it by eye. Do not put it back.
*/
.hero__proof[b-lq38vrnkkn] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.hero__cta[b-lq38vrnkkn] {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 22px;
    margin-bottom: 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, transform 80ms ease;
}

/* The whole page's interaction vocabulary: colour on hover, 1px down on press. Declared once here and
   reused by .chip and the dialog CTA rather than each growing its own. */
.hero__cta:active[b-lq38vrnkkn],
.chip:active[b-lq38vrnkkn],
.hiw__trigger:active[b-lq38vrnkkn],
.hiw-dialog__foot-cta:active[b-lq38vrnkkn],
.owners__cta:active[b-lq38vrnkkn] {
    transform: translateY(1px);
}

/* Nobody asked for the page to animate; someone on prefers-reduced-motion did ask for it not to. */
@media (prefers-reduced-motion: reduce) {
    .hero__cta[b-lq38vrnkkn],
    .chip[b-lq38vrnkkn],
    .hiw__trigger[b-lq38vrnkkn],
    .hiw-dialog__foot-cta[b-lq38vrnkkn],
    .owners__cta[b-lq38vrnkkn] {
        transition: none;
    }

    .hero__cta:active[b-lq38vrnkkn],
    .chip:active[b-lq38vrnkkn],
    .hiw__trigger:active[b-lq38vrnkkn],
    .hiw-dialog__foot-cta:active[b-lq38vrnkkn],
    .owners__cta:active[b-lq38vrnkkn] {
        transform: none;
    }
}

/*
    Each CTA wears the *other* panel's colour — purple button on the green panel, green on the purple —
    because a button in its own panel's colour would vanish into it. This is also Bold's own scheme: its
    search submit is green on the purple field.
*/
.hero__cta--owner[b-lq38vrnkkn] {
    background: var(--brand-purple);
    color: #fff;
}

.hero__cta--owner:hover[b-lq38vrnkkn],
.hero__cta--owner:focus-visible[b-lq38vrnkkn] {
    background: var(--landing-purple-dark);
    color: #fff;
}

.hero__cta--renter[b-lq38vrnkkn] {
    background: var(--brand-green);
    color: var(--brand-graphite);
}

.hero__cta--renter:hover[b-lq38vrnkkn],
.hero__cta--renter:focus-visible[b-lq38vrnkkn] {
    background: #8ce637;
    color: var(--brand-graphite);
}

/*
    Drawn as the renter panel's proof line, not as a feature list — the two panels do the same job here
    (three claims under the CTA) and were saying it in two different voices: ✓ glyphs at weight 600 and
    18px gaps on the left, one quiet middot-separated sentence on the right. That mismatch is what made
    the split read as two designs rather than one choice.

    So: same 13px, same normal weight, same middot, and the same ink as the panel's own body — which is
    exactly how .hero__proof relates to .hero__body--renter (both 0.8 white, differing only in size).
    Graphite stays full strength because on lime there is only ever one ink; see this file's header.

    Still a <ul>, and the separator is still generated content, for the reason the tick was: three list
    items announced as three claims, not one run-on sentence with punctuation read out.
*/
.hero__perks[b-lq38vrnkkn] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--brand-graphite);
}

.hero__perks li[b-lq38vrnkkn] {
    display: inline;
}

/* A space each side rather than a margin, so the gap is the renter proof string's own literal " · "
   and the two lines space their separators identically. The leading space collapses with the source
   whitespace between the <li>s, so this holds however the markup is wrapped. */
.hero__perks li + li[b-lq38vrnkkn]::before {
    content: " · ";
}

/*
    What makes the split read as a choice rather than two unrelated blocks. Out of flow, so it takes no
    grid track despite sitting between the panels in source order.
*/
.hero__or[b-lq38vrnkkn] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    background: var(--landing-ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .hero[b-lq38vrnkkn] {
        grid-template-columns: 1fr;
    }

    /*
        Once the panels stack there is no seam to sit on: still centred, the disc lands in the middle of
        the owner panel on top of its heading. Dropped rather than re-placed on the horizontal join —
        two stacked panels already read as two offers, and the disc's whole job was the vertical split.
    */
    .hero__or[b-lq38vrnkkn] {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero__panel[b-lq38vrnkkn] {
        padding: 40px var(--landing-pad) 36px;
    }
}

/* "Jak to działa" (AB-50) ------------------------------------------------ */

/*
    The brand green is a neon and is used like one: never as a field behind text, only as a small disc
    or a pressed state. The two columns sit on tinted washes of the brand colours (#f1ecff, #eefccb)
    with dark ink on top — that is where the colour identity lives at this size without the panel
    glowing at someone reading six paragraphs of it.

    The owner side's ink used to be a bottle green (#3d6c00) mirroring the renter side's purple. It is
    --brand-graphite now: the wash carries the identity, and a fourth green was a colour in neither
    palette. Swap it back only if the two pills stop reading as a pair.

    Secondary text here is --landing-muted, the same grey the footer uses. It was a separate --hiw-muted
    holding the identical value, which is how two greys that are meant to match stop matching.
*/
.hiw[b-lq38vrnkkn] {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/*
    Bold draws this as a grey dotted underline, which under two full-bleed colour panels reads as a
    footnote and gets skipped. It is a tinted pill instead — the same #f1ecff wash the dialog's own
    renter column uses, so it gains weight without becoming a third CTA competing with the hero's two.
    Filling it with --brand-purple would do exactly that.

    The label carries the affordance now ("Click to learn…"), which is what the dotted border was for.
*/
.hiw__trigger[b-lq38vrnkkn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 22px;
    background: #f1ecff;
    padding: 11px 20px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-purple);
    cursor: pointer;
    transition: background-color 120ms ease, transform 80ms ease;
}

.hiw__trigger:hover[b-lq38vrnkkn],
.hiw__trigger:focus-visible[b-lq38vrnkkn] {
    background: var(--brand-purple);
    color: #fff;
}

/*
    A dialog in the top layer is positioned against the viewport, not against .landing — the max-width
    and auto margins above it do not apply, so the geometry here is the design's own.

    margin-block: 70px pins the top rather than centring it, and caps the height at what is left, so a
    dialog taller than the viewport scrolls inside itself instead of running off the bottom. dvh, not
    vh: on mobile Safari vh is the *expanded* viewport, which puts the last step behind the URL bar.
*/
.hiw-dialog[b-lq38vrnkkn] {
    width: 620px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 140px);
    overflow: auto;
    margin: 70px auto;
    padding: 32px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--landing-ink);
}

.hiw-dialog[b-lq38vrnkkn]::backdrop {
    background: rgba(26, 26, 26, 0.55);
}

.hiw-dialog__head[b-lq38vrnkkn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.hiw-dialog__title[b-lq38vrnkkn] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.hiw-dialog__sub[b-lq38vrnkkn] {
    font-size: 13px;
    color: var(--landing-muted);
    margin: 0;
}

.hiw-dialog__close[b-lq38vrnkkn] {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--landing-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.hiw-dialog__close:hover[b-lq38vrnkkn],
.hiw-dialog__close:focus-visible[b-lq38vrnkkn] {
    background: var(--brand-rule);
}

.hiw-dialog__cols[b-lq38vrnkkn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.hiw-col__pill[b-lq38vrnkkn] {
    display: inline-block;
    border-radius: 20px;
    padding: 5px 12px;
    margin: 0 0 16px;
    font-size: 12.5px;
    font-weight: 600;
}

.hiw-col__pill--renter[b-lq38vrnkkn] {
    background: #f1ecff;
    color: var(--brand-purple);
}

.hiw-col__pill--owner[b-lq38vrnkkn] {
    background: #eefccb;
    color: var(--brand-graphite);
}

/*
    The numerals come from a counter on a real <ol> — ordered stages, so the list semantics stay and the
    markup cannot drift out of sequence with what is drawn.
*/
.hiw-col__steps[b-lq38vrnkkn] {
    counter-reset: hiw-step;
    list-style: none;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.hiw-col__steps li[b-lq38vrnkkn] {
    counter-increment: hiw-step;
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 12px;
    align-items: start;
}

.hiw-col__steps li[b-lq38vrnkkn]::before {
    content: counter(hiw-step);
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

/* Each column's discs carry its own colour, so a step is legible as renter's or owner's on its own. */
.hiw-col__steps--renter li[b-lq38vrnkkn]::before {
    background: var(--brand-purple);
    color: #fff;
}

.hiw-col__steps--owner li[b-lq38vrnkkn]::before {
    background: var(--brand-green);
    color: var(--brand-graphite);
}

.hiw-col__step-title[b-lq38vrnkkn] {
    font-size: 14px;
    font-weight: 600;
}

.hiw-col__step-desc[b-lq38vrnkkn] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--landing-muted);
}

/* Stacked and centred rather than the design's line-then-button row: the band is the last thing in the
   dialog and the CTA is the one action in it, so it gets the centre line rather than a far corner. */
.hiw-dialog__foot[b-lq38vrnkkn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 20px 16px;
    border-radius: 12px;
    background: #f6fce9;
}

.hiw-dialog__foot-line[b-lq38vrnkkn] {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-graphite);
    text-align: center;
    margin: 0;
}

/*
    Purple, matching .hero__cta--owner — same action, same destination, and the hero's own rule that a
    CTA wears the colour its panel does not. Bold's charcoal button is the one thing in this band that
    belongs to no palette on the page; on a green wash it reads as a dialog control rather than as the
    listing CTA it actually is.
*/
.hiw-dialog__foot-cta[b-lq38vrnkkn] {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--brand-purple);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, transform 80ms ease;
}

.hiw-dialog__foot-cta:hover[b-lq38vrnkkn],
.hiw-dialog__foot-cta:focus-visible[b-lq38vrnkkn] {
    background: var(--landing-purple-dark);
    color: #fff;
}

@media (max-width: 640px) {
    .hiw-dialog[b-lq38vrnkkn] {
        padding: 24px;
    }

    /* Same step as .grid's last one. The two columns are the hero's split restated, and the hero has
       already stacked well before here. */
    .hiw-dialog__cols[b-lq38vrnkkn] {
        grid-template-columns: 1fr;
    }
}

/* Categories (AB-52) ---------------------------------------------------- */

/*
    The loudest row on the page: four solid tiles, each with its own foreground pair. Every difference
    between them is a custom property set on the modifier, so the geometry below is declared once — four
    copies of the same block differing in three colours is how one of them ends up 13px.

    The icon square is white whatever the tile colour, which is what lets one glyph colour read on all
    four. On the pale Dostarczalne tile that square is nearly invisible; that is the design's own choice
    and the glyph still carries.
*/
.cat[b-lq38vrnkkn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 14px;
    background: var(--cat-bg);
    text-decoration: none;
    transition: transform 80ms ease, filter 120ms ease;
}

.cat:hover[b-lq38vrnkkn],
.cat:focus-visible[b-lq38vrnkkn] {
    /* Neither a colour change nor a shadow: the tiles *are* the colours, so the hover has to work on
       four different fields at once. brightness on a dark tile lightens and on a light one dims, which
       is why it is the one filter used here. */
    filter: brightness(1.08);
}

.cat:active[b-lq38vrnkkn] {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .cat[b-lq38vrnkkn] {
        transition: none;
    }

    .cat:active[b-lq38vrnkkn] {
        transform: none;
    }
}

.cat--outdoor[b-lq38vrnkkn] {
    --cat-bg: var(--brand-purple);
    --cat-ink: #fff;
    --cat-sub: rgba(255, 255, 255, 0.75);
    --cat-glyph: var(--brand-purple);
}

.cat--indoor[b-lq38vrnkkn] {
    --cat-bg: var(--brand-green);
    /* The deep purple the design prints on both light tiles. Not --brand-purple: that is the field
       colour of the tile beside it, and at 17px on lime it vibrates. */
    --cat-ink: #2c0088;
    --cat-sub: #463a6b;
    --cat-glyph: #2c0088;
}

.cat--vehicle[b-lq38vrnkkn] {
    --cat-bg: var(--landing-ink);
    --cat-ink: #fff;
    --cat-sub: rgba(255, 255, 255, 0.7);
    --cat-glyph: var(--landing-ink);
}

.cat--deliverable[b-lq38vrnkkn] {
    --cat-bg: #f1ecff;
    --cat-ink: #2c0088;
    --cat-sub: #6b4bb8;
    --cat-glyph: #2c0088;
}

.cat__icon[b-lq38vrnkkn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.9);
    /* The glyph inherits this — lucide draws with currentColor — so there is no rule on the <svg> itself
       beyond its size below. */
    color: var(--cat-glyph);
}

/* ::deep, because LucideIcon renders the <svg> and Blazor does not put this page's scope attribute on a
   child component's own output (CLAUDE.md §5). Without it the icon draws at its intrinsic 24px. */
.cat__icon[b-lq38vrnkkn]  .cat__glyph {
    width: 22px;
    height: 22px;
}

.cat__name[b-lq38vrnkkn] {
    font-size: 17px;
    font-weight: 700;
    color: var(--cat-ink);
}

.cat__types[b-lq38vrnkkn] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--cat-sub);
}

/* Owner earnings band (AB-58) ------------------------------------------- */

/*
    The page's only dark field, and the only place white text sits on one outside the hero's purple panel.

    Bold specifies #141414. This is --landing-ink (#1a1a1a) instead — six units apart, indistinguishable
    on a screen, and a third near-black on a page whose header already warns about the two it has. The
    same reasoning as the ink/graphite note above: one fewer colour, not one more.

    Laid out as pitch-left, CTA-right rather than as a stack. With the design's three revenue cards gone
    (see Home.razor) a single column would leave a very tall dark block with one button at the bottom;
    side by side it stays the width of the page and the CTA sits at the optical centre.
*/
.owners[b-lq38vrnkkn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 36px;
    border-radius: 18px;
    background: var(--landing-ink);
}

/* Bold's 540px. The band has no cards under it any more, so this cap is the only thing stopping the
   headline running the full 1440px and reading as a banner. */
.owners__pitch[b-lq38vrnkkn] {
    max-width: 540px;
}

.owners__title[b-lq38vrnkkn] {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--brand-green);
    margin: 0 0 12px;
    text-wrap: balance;
}

/* rgba(255,255,255,0.8) on --landing-ink is 11.9:1 — the same 0.8 the hero settled on, for the same
   reason (see .hero__proof: the design's 0.7 is the one value on this page that misses AA). */
.owners__body[b-lq38vrnkkn] {
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;

    /* Two lines at 540px, and without this the second is the single word "pojawi." Unsupported, it is
       the ordinary greedy wrap — the same orphan, nothing worse. */
    text-wrap: pretty;
}

/* Right-aligned so the note tucks under the button's trailing edge rather than starting where the
   button does — the design's own arrangement, and it reads as a footnote to the CTA that way. */
.owners__act[b-lq38vrnkkn] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/*
    Green on graphite, exactly as .hero__cta--renter: green is what this page's CTAs wear on a dark
    field, and the band is the darkest field on it. Bold's #3a3a38 ink is not used for the reason this
    file's header gives — anything printed on --brand-green is --brand-graphite, and a fourth near-black
    to save one shade of difference is how the page ends up with five.
*/
.owners__cta[b-lq38vrnkkn] {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--brand-green);
    color: var(--brand-graphite);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, transform 80ms ease;
}

.owners__cta:hover[b-lq38vrnkkn],
.owners__cta:focus-visible[b-lq38vrnkkn] {
    background: #8ce637;
    color: var(--brand-graphite);
}

/* 7.7:1 on --landing-ink, so it clears AA at 12px. */
.owners__note[b-lq38vrnkkn] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

@media (max-width: 640px) {
    .owners[b-lq38vrnkkn] {
        padding: 28px 22px;
    }

    /* Stacked, the right-alignment becomes a lone button pushed to the edge under left-aligned copy.
       Both go back to the start once there is no second column to sit opposite. */
    .owners__act[b-lq38vrnkkn] {
        align-items: flex-start;
    }
}

/* City chips ------------------------------------------------------------ */

.chips[b-lq38vrnkkn] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip[b-lq38vrnkkn] {
    border: 1.5px solid var(--landing-ink);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--landing-ink);
    background: #fff;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
}

.chip:hover[b-lq38vrnkkn],
.chip:focus-visible[b-lq38vrnkkn] {
    background: var(--landing-ink);
    color: #fff;
}

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

.foot[b-lq38vrnkkn] {
    border-top: 1px solid var(--brand-rule);
    margin-top: var(--landing-gap);
    padding: 32px var(--landing-pad);
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.foot__logo[b-lq38vrnkkn] {
    font-size: 20px;
    font-weight: 700;
    color: var(--landing-ink);
}

.foot__dot[b-lq38vrnkkn] {
    color: var(--brand-purple);
}

.foot__tagline[b-lq38vrnkkn] {
    font-size: 12.5px;
    color: var(--landing-muted);
    max-width: 200px;
    line-height: 1.5;
    margin: 6px 0 0;
}

.foot__cols[b-lq38vrnkkn] {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.foot__col[b-lq38vrnkkn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.foot__heading[b-lq38vrnkkn] {
    font-size: 13px;
    font-weight: 600;
    color: var(--landing-ink);
    margin: 0 0 2px;
}

.foot__col a[b-lq38vrnkkn] {
    color: var(--brand-purple);
    text-decoration: none;
}

.foot__col a:hover[b-lq38vrnkkn] {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .foot[b-lq38vrnkkn],
    .foot__cols[b-lq38vrnkkn] {
        gap: 28px;
    }
}