/* =========================================================
   BEROVIO — AKO TO FUNGUJE
   Informational marketplace page. No marketplace logic here.
   ========================================================= */
.berovio-how-page {
    --bhw-blue: var(--berovio-blue, #0064f8);
    --bhw-blue-dark: var(--berovio-blue-dark, #004fc7);
    --bhw-green: var(--berovio-green, #009668);
    --bhw-green-dark: #087754;
    --bhw-ink: #0e1623;
    --bhw-hero: #203a54;
    --bhw-muted: #647182;
    --bhw-line: #e2e8ef;
    --bhw-soft: #f5f7fa;
    --bhw-soft-blue: #f3f7fc;
    --bhw-soft-green: #f2faf6;
    --bhw-white: #fff;
    --bhw-gutter: clamp(16px, 3vw, 32px);
    --bhw-section: clamp(64px, 7vw, 96px);
    position: relative;
    width: 100vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
    color: var(--bhw-ink);
    background: var(--bhw-white);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.55;
    overflow: clip;
}

.berovio-how-page *,
.berovio-how-page *::before,
.berovio-how-page *::after { box-sizing: border-box; }

.berovio-how-page :is(h1, h2, h3, p, ul, ol) { overflow-wrap: break-word; }

.berovio-how-page :is(a, summary):focus-visible {
    outline: 3px solid rgba(0, 100, 248, .38);
    outline-offset: 3px;
}

.berovio-how-container {
    width: min(1320px, 100%);
    margin-inline: auto;
    padding-inline: var(--bhw-gutter);
}

.berovio-how-eyebrow {
    margin: 0 0 10px;
    color: var(--bhw-blue);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .115em;
    text-transform: uppercase;
}

.berovio-how-eyebrow.is-brand {
    letter-spacing: .08em;
    text-transform: none;
}

.berovio-how-eyebrow.is-brand .berovio-how-brand-find { color: var(--bhw-ink); }
.berovio-how-eyebrow.is-brand .berovio-how-brand-buy { color: var(--bhw-blue); }
.berovio-how-eyebrow.is-brand .berovio-how-brand-reuse { color: var(--bhw-green); }

.berovio-how-page h2 {
    margin: 0;
    color: var(--bhw-ink);
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.berovio-how-page h3 {
    margin: 0;
    color: var(--bhw-ink);
    font-weight: 800;
    letter-spacing: -.025em;
    text-wrap: balance;
}

/* HERO */
.berovio-how-hero {
    position: relative;
    padding: clamp(58px, 7vw, 96px) 0 clamp(64px, 8vw, 106px);
    background: var(--bhw-hero);
    color: #fff;
}

.berovio-how-hero::before,
.berovio-how-hero::after {
    position: absolute;
    top: 0;
    height: 3px;
    content: '';
}

.berovio-how-hero::before {
    left: 0;
    width: 68%;
    background: var(--bhw-blue);
}

.berovio-how-hero::after {
    right: 0;
    width: 32%;
    background: var(--bhw-green);
}

.berovio-how-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .72fr);
    gap: clamp(42px, 7vw, 92px);
    align-items: center;
}

.berovio-how-hero .berovio-how-eyebrow { color: #8fc0ff; }

.berovio-how-hero h1 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 5.6vw, 70px);
    font-weight: 820;
    line-height: .99;
    letter-spacing: -.058em;
    text-wrap: balance;
}

.berovio-how-lead {
    max-width: 760px;
    margin: 24px 0 0;
    color: #c6d0db;
    font-size: clamp(16px, 1.45vw, 19px);
    line-height: 1.68;
}

.berovio-how-hero-actions,
.berovio-how-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.berovio-how-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 19px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 820;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.berovio-how-button:hover { transform: translateY(-1px); text-decoration: none; }

.berovio-how-button.is-primary {
    border-color: var(--bhw-blue);
    background: var(--bhw-blue);
    color: #fff;
    box-shadow: 0 9px 24px rgba(0, 100, 248, .2);
}

.berovio-how-button.is-primary:hover {
    border-color: var(--bhw-blue-dark);
    background: var(--bhw-blue-dark);
    color: #fff;
}

.berovio-how-button.is-secondary {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.berovio-how-button.is-secondary:hover {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.berovio-how-button.is-dark {
    border-color: var(--bhw-ink);
    background: var(--bhw-ink);
    color: #fff;
}

.berovio-how-button.is-dark:hover {
    border-color: #1e2d40;
    background: #1e2d40;
    color: #fff;
}

.berovio-how-button.is-partner {
    border-color: var(--bhw-green);
    background: var(--bhw-green);
    color: #fff;
}

.berovio-how-button.is-partner:hover {
    border-color: var(--bhw-green-dark);
    background: var(--bhw-green-dark);
    color: #fff;
}

.berovio-how-hero-card {
    position: relative;
    min-width: 0;
    padding: clamp(26px, 3vw, 34px);
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    color: var(--bhw-ink);
    box-shadow: 0 28px 64px rgba(7, 20, 35, .22);
}

.berovio-how-hero-card::before,
.berovio-how-hero-card::after {
    position: absolute;
    top: 0;
    height: 4px;
    content: '';
}

.berovio-how-hero-card::before { left: 0; width: 68%; background: var(--bhw-blue); }
.berovio-how-hero-card::after { right: 0; width: 32%; background: var(--bhw-green); }

.berovio-how-card-kicker {
    margin: 0 0 22px;
    color: var(--bhw-blue-dark);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.berovio-how-hero-facts { display: grid; gap: 0; }

.berovio-how-hero-facts > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid #e9edf2;
}

.berovio-how-hero-facts > div:first-child { padding-top: 0; border-top: 0; }
.berovio-how-hero-facts > div:last-child { padding-bottom: 0; }

.berovio-how-hero-facts span {
    color: var(--bhw-blue);
    font-size: 15px;
    font-weight: 860;
    line-height: 1.5;
}

.berovio-how-hero-facts p {
    margin: 0;
    color: #536171;
    font-size: 13px;
    line-height: 1.58;
}

.berovio-how-hero-facts strong { color: var(--bhw-ink); }

/* SHARED */
.berovio-how-section { padding-block: var(--bhw-section); }

.berovio-how-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 54px;
    margin-bottom: 34px;
}

.berovio-how-section-head > div { min-width: 0; }

.berovio-how-section-head.is-narrow {
    display: block;
    max-width: 900px;
    margin-bottom: 38px;
}

.berovio-how-section-head > p,
.berovio-how-section-head.is-narrow > p:not(.berovio-how-eyebrow),
.berovio-how-section-intro,
.berovio-how-copy {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--bhw-muted);
    font-size: 15px;
    line-height: 1.72;
}

.berovio-how-section-head > .berovio-how-section-intro { margin: 0; }

/* PURPOSE */
.berovio-how-purpose {
    border-bottom: 1px solid #e8edf3;
    background: #fff;
}

.berovio-how-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--bhw-line);
    border-bottom: 1px solid var(--bhw-line);
}

.berovio-how-principles article {
    min-width: 0;
    padding: 30px clamp(22px, 3vw, 36px) 32px;
    border-right: 1px solid var(--bhw-line);
}

.berovio-how-principles article:first-child { padding-left: 0; }
.berovio-how-principles article:last-child { padding-right: 0; border-right: 0; }

.berovio-how-number {
    display: block;
    margin-bottom: 34px;
    color: var(--bhw-blue);
    font-size: 32px;
    font-weight: 860;
    line-height: 1;
    letter-spacing: -.05em;
}

.berovio-how-principles h3 { font-size: 19px; line-height: 1.28; }
.berovio-how-principles p { margin: 12px 0 0; color: var(--bhw-muted); font-size: 13px; line-height: 1.68; }

/* MARKET CATEGORIES */
.berovio-how-market {
    border-bottom: 1px solid #e7edf4;
    background: var(--bhw-soft-blue);
}

.berovio-how-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.berovio-how-category-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: clamp(24px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid #dfe6ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 36, 55, .04);
}

.berovio-how-category-grid article::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: #8593a3;
    content: '';
}

.berovio-how-category-grid article.is-blue::before { background: var(--bhw-blue); }
.berovio-how-category-grid article.is-green::before { background: var(--bhw-green); }

.berovio-how-category-grid article > span {
    margin-bottom: 13px;
    color: #677587;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.berovio-how-category-grid article.is-blue > span { color: var(--bhw-blue-dark); }
.berovio-how-category-grid article.is-green > span { color: var(--bhw-green-dark); }
.berovio-how-category-grid h3 { font-size: 20px; line-height: 1.25; }
.berovio-how-category-grid p { margin: 13px 0 24px; color: var(--bhw-muted); font-size: 13px; line-height: 1.68; }

.berovio-how-category-grid a,
.berovio-how-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--bhw-blue-dark);
    font-size: 13px;
    font-weight: 820;
    text-decoration: none;
}

.berovio-how-category-grid a::after,
.berovio-how-text-link::after { content: '\2192'; }
.berovio-how-category-grid a:hover,
.berovio-how-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* BUY / SELL */
.berovio-how-buy-sell { background: #fff; }

.berovio-how-flow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.berovio-how-flow-card {
    min-width: 0;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid var(--bhw-line);
    border-radius: 20px;
    background: #fff;
}

.berovio-how-flow-card.is-buyer { border-color: #dce8f8; background: #f8fbff; }
.berovio-how-flow-card.is-seller { border-color: #dcefe4; background: #f8fcfa; }

.berovio-how-flow-head { margin-bottom: 22px; }
.berovio-how-flow-head > span { display: block; margin-bottom: 8px; color: var(--bhw-blue-dark); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.berovio-how-flow-card.is-seller .berovio-how-flow-head > span { color: var(--bhw-green-dark); }
.berovio-how-flow-head h3 { font-size: 24px; line-height: 1.2; }

.berovio-how-flow-card ol {
    display: grid;
    gap: 0;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    counter-reset: berovio-how-flow;
}

.berovio-how-flow-card li {
    position: relative;
    padding: 18px 0 18px 42px;
    border-top: 1px solid rgba(100, 113, 130, .14);
    counter-increment: berovio-how-flow;
}

.berovio-how-flow-card li:first-child { border-top: 0; }
.berovio-how-flow-card li::before {
    position: absolute;
    top: 18px;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 100, 248, .09);
    color: var(--bhw-blue-dark);
    font-size: 11px;
    font-weight: 850;
    content: counter(berovio-how-flow, decimal-leading-zero);
}

.berovio-how-flow-card.is-seller li::before { background: rgba(0, 150, 104, .09); color: var(--bhw-green-dark); }
.berovio-how-flow-card li strong { display: block; color: var(--bhw-ink); font-size: 14px; }
.berovio-how-flow-card li p { margin: 5px 0 0; color: var(--bhw-muted); font-size: 13px; line-height: 1.6; }

/* FILTERING */
.berovio-how-filtering {
    border-block: 1px solid #e6edf5;
    background: #f7f9fc;
}

.berovio-how-filtering-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
    gap: clamp(42px, 7vw, 92px);
    align-items: center;
}

.berovio-how-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid #dfe6ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 36, 55, .04);
}

.berovio-how-filter-list span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #d9e3ee;
    border-radius: 999px;
    background: #f8fafc;
    color: #415165;
    font-size: 12px;
    font-weight: 760;
}

/* ACCOUNT */
.berovio-how-account { background: #fff; }

.berovio-how-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
    gap: clamp(42px, 7vw, 92px);
    align-items: center;
}

.berovio-how-account-grid > div:first-child > p:last-child {
    max-width: 690px;
    margin: 16px 0 0;
    color: var(--bhw-muted);
    font-size: 15px;
    line-height: 1.72;
}

.berovio-how-account-benefits {
    display: grid;
    gap: 0;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid #dfe6ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(20, 36, 55, .055);
}

.berovio-how-account-benefits > div { padding: 17px 0; border-top: 1px solid #e9edf2; }
.berovio-how-account-benefits > div:first-child { padding-top: 0; border-top: 0; }
.berovio-how-account-benefits strong { display: block; margin-bottom: 5px; color: var(--bhw-ink); font-size: 14px; }
.berovio-how-account-benefits span { display: block; color: var(--bhw-muted); font-size: 13px; line-height: 1.58; }
.berovio-how-account-benefits .berovio-how-button { justify-self: start; margin-top: 18px; }

/* DEMAND */
.berovio-how-demand {
    border-block: 1px solid #e4edf9;
    background: #f1f6fd;
}

.berovio-how-demand-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 42px;
    align-items: center;
}

.berovio-how-demand-grid > div > p:last-child {
    max-width: 780px;
    margin: 16px 0 0;
    color: var(--bhw-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* PARTNER */
.berovio-how-partner {
    position: relative;
    background: var(--bhw-hero);
    color: #fff;
}

.berovio-how-partner::before,
.berovio-how-partner::after {
    position: absolute;
    top: 0;
    height: 3px;
    content: '';
}

.berovio-how-partner::before { left: 0; width: 68%; background: var(--bhw-blue); }
.berovio-how-partner::after { right: 0; width: 32%; background: var(--bhw-green); }

.berovio-how-partner-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .7fr);
    gap: clamp(42px, 7vw, 92px);
    align-items: center;
}

.berovio-how-partner .berovio-how-eyebrow { color: #8fc0ff; }
.berovio-how-partner h2 { color: #fff; }
.berovio-how-partner-grid > div:first-child > p:last-child { max-width: 760px; margin: 16px 0 0; color: #c6d0db; font-size: 15px; line-height: 1.72; }

.berovio-how-partner-benefits {
    display: grid;
    gap: 0;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
}

.berovio-how-partner-benefits > span {
    position: relative;
    padding: 13px 0 13px 22px;
    border-top: 1px solid rgba(255, 255, 255, .11);
    color: #e9eef4;
    font-size: 13px;
    font-weight: 760;
}

.berovio-how-partner-benefits > span:first-child { padding-top: 0; border-top: 0; }
.berovio-how-partner-benefits > span::before { position: absolute; left: 0; color: #59cf9c; font-weight: 900; content: '\2713'; }
.berovio-how-partner-benefits .berovio-how-button { margin-top: 20px; }

/* FAQ */
.berovio-how-faq { background: #fff; }

.berovio-how-faq-grid {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.65fr);
    gap: 70px;
    align-items: start;
}

.berovio-how-section-head.is-faq { display: block; margin: 0; }
.berovio-how-faq-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--bhw-blue-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.berovio-how-faq-all::after { content: '\2192'; }
.berovio-how-faq-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.berovio-how-faq-list { min-width: 0; border-top: 1px solid var(--bhw-line); }
.berovio-how-faq details { margin: 0; border-bottom: 1px solid var(--bhw-line); }

.berovio-how-faq summary {
    position: relative;
    padding: 20px 38px 20px 0;
    color: var(--bhw-ink);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.berovio-how-faq summary::-webkit-details-marker { display: none; }

.berovio-how-faq summary::after {
    position: absolute;
    top: 17px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--bhw-blue-dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    content: '+';
}

.berovio-how-faq details[open] summary::after { content: '\2212'; }
.berovio-how-faq summary:hover { color: var(--bhw-blue-dark); }
.berovio-how-faq details p { max-width: 780px; margin: 0; padding: 0 38px 22px 0; color: var(--bhw-muted); font-size: 14px; line-height: 1.7; }

/* FINAL CTA */
.berovio-how-final {
    padding-block: clamp(52px, 6vw, 78px);
    border-top: 1px solid #e8edf3;
    background: #f7f9fc;
}

.berovio-how-final-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 42px;
    align-items: center;
}

.berovio-how-final-inner > div:first-child > p:last-child { margin: 14px 0 0; color: var(--bhw-muted); font-size: 14px; }
.berovio-how-final-actions { margin-top: 0; }
.berovio-how-final .berovio-how-button.is-secondary { border-color: #cfd9e5; background: #fff; color: #354456; }
.berovio-how-final .berovio-how-button.is-secondary:hover { border-color: #aebed0; background: #f6f9fd; color: var(--bhw-blue-dark); }

/* RESPONSIVE */
@media (max-width: 960px) {
    .berovio-how-hero-grid,
    .berovio-how-filtering-grid,
    .berovio-how-account-grid,
    .berovio-how-partner-grid { grid-template-columns: 1fr; gap: 34px; }

    .berovio-how-hero-card { max-width: 720px; }
    .berovio-how-filtering-grid { align-items: start; }
    .berovio-how-section-head { align-items: start; flex-direction: column; gap: 16px; }
    .berovio-how-section-head > .berovio-how-section-intro { margin: 0; }
    .berovio-how-faq-grid { grid-template-columns: 1fr; gap: 30px; }
    .berovio-how-final-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 760px) {
    .berovio-how-principles,
    .berovio-how-category-grid,
    .berovio-how-flow-grid { grid-template-columns: 1fr; }

    .berovio-how-principles { border-bottom: 0; }
    .berovio-how-principles article,
    .berovio-how-principles article:first-child,
    .berovio-how-principles article:last-child {
        padding: 25px 0;
        border-right: 0;
        border-bottom: 1px solid var(--bhw-line);
    }

    .berovio-how-number { margin-bottom: 18px; }
    .berovio-how-demand-grid { grid-template-columns: 1fr; gap: 24px; }
    .berovio-how-demand-grid .berovio-how-button { justify-self: start; }
}

@media (max-width: 559px) {
    .berovio-how-page { --bhw-section: 56px; }
    .berovio-how-hero { padding: 48px 0 58px; }
    .berovio-how-hero h1 { font-size: clamp(36px, 10.5vw, 45px); }
    .berovio-how-hero-actions,
    .berovio-how-final-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .berovio-how-button { width: 100%; }
    .berovio-how-hero-card,
    .berovio-how-flow-card,
    .berovio-how-account-benefits,
    .berovio-how-partner-benefits,
    .berovio-how-filter-list { border-radius: 15px; }
    .berovio-how-filter-list { gap: 7px; padding: 18px; }
    .berovio-how-filter-list span { min-height: 34px; padding-inline: 10px; font-size: 11px; }
    .berovio-how-faq summary { font-size: 14px; }
}