/**
 * The first screen of the home page ([bmfaq_hero]). The dark background
 * with the hexagons of the site, white Roboto text with the key words in
 * the blue of the site (#0161F6, as on the old first screen); the picture and the role cards stay white on it. The block
 * runs edge to edge, so the Elementor container it stands in should be
 * full width without padding.
 *
 * [bmfaq_hero_centered] is the centered layout on white (.bmfaq-hero-c), at
 * the end of the file.
 */

.bmfaq-hero {
    --hr-text: #292E33;
    --hr-muted: #5E6674;
    --hr-grey: #8A93A3;
    --hr-blue: #0161F6;
    --hr-blue-dk: #002EB8;
    --hr-pale: #E7F1FF;
    --hr-line: #DDE6F5;
    --hr-ez: cubic-bezier(0.4, 0, 0.2, 1);
    padding: 96px 20px 104px;
    background-color: #02040C;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.bmfaq-hero *,
.bmfaq-hero *::before,
.bmfaq-hero *::after {
    box-sizing: border-box;
}

.bmfaq-hero__in {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.bmfaq-hero .bmfaq-hero__title {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: inherit;
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 400;
    line-height: 1.08;
}

.bmfaq-hero__title span {
    color: var(--hr-blue);
}

.bmfaq-hero .bmfaq-hero__list {
    display: grid;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.bmfaq-hero .bmfaq-hero__list li {
    margin: 0;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--hr-blue);
    color: rgba(255, 255, 255, .86);
    font-size: 17px;
    line-height: 1.5;
}

.bmfaq-hero .bmfaq-hero__price {
    margin: 28px 0 0;
    color: rgba(255, 255, 255, .75);
    font-size: 17px;
    line-height: 1.2;
}

.bmfaq-hero__price b {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
}

/* The box of the picture opens into the real role cards of the site */
.bmfaq-hero__stage {
    position: relative;
}

.bmfaq-hero .bmfaq-hero__pic {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(1, 97, 246, .7), 0 30px 80px -20px rgba(1, 97, 246, .6);
}

.bmfaq-hero__pic img {
    display: block;
    width: 100%;
    height: auto;
}

.bmfaq-hero__wires {
    position: absolute;
    inset: 0;
    overflow: visible;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bmfaq-hero__wires path {
    fill: none;
    stroke: var(--hr-blue);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
}

.bmfaq-hero__wires circle {
    fill: var(--hr-blue);
}

.bmfaq-hero__cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

/* The role card of the archive, made small */
.bmfaq-hero a.bmfaq-hero__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--hr-text);
    text-decoration: none;
    box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .7);
    transition: transform 180ms var(--hr-ez), box-shadow 180ms var(--hr-ez);
}

.bmfaq-hero a.bmfaq-hero__card:hover {
    color: var(--hr-text);
    transform: translateY(-3px);
    box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .8);
}

.bmfaq-hero a.bmfaq-hero__card:focus-visible {
    outline: 2px solid var(--hr-blue);
    outline-offset: 3px;
}

.bmfaq-hero__role {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bmfaq-hero__avatar {
    display: flex;
    flex: 0 0 40px;
    overflow: hidden;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--hr-pale);
}

.bmfaq-hero__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bmfaq-hero__avatar--empty {
    background: linear-gradient(140deg, #002EB8 0%, #006DFB 100%);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
}

.bmfaq-hero__name {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

/* The link stays at the bottom, however the names of the roles wrap */
.bmfaq-hero__read {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--hr-line);
    color: var(--hr-blue);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.bmfaq-hero a.bmfaq-hero__card:hover .bmfaq-hero__read {
    color: var(--hr-blue-dk);
}

@media (max-width: 1023px) {
    .bmfaq-hero__in {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bmfaq-hero__stage {
        max-width: 680px;
    }
}

@media (max-width: 1024px) {
    /* The Elementor header paints every link dark here, the cards keep their colours */
    .bmfaq-hero a.bmfaq-hero__card,
    .bmfaq-hero a.bmfaq-hero__card:hover {
        color: var(--hr-text) !important;
    }
}

@media (max-width: 767px) {
    .bmfaq-hero {
        padding: 48px 16px 56px;
        background-position: 30% center;
    }

    .bmfaq-hero .bmfaq-hero__list li {
        font-size: 16px;
    }

    .bmfaq-hero__wires {
        display: none;
    }

    /* On a phone the cards are rows: the role on the left, the arrow on the right */
    .bmfaq-hero__cards {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
    }

    .bmfaq-hero a.bmfaq-hero__card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .bmfaq-hero__read {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 0;
    }

    .bmfaq-hero__read span {
        font-size: 18px;
    }
}

/* ------------------------------------------------------------ centered layout on white */

/*
 * The whole block fits the first screen under the header: the heading, the
 * promises and the price take what they need, the picture gets the rest of
 * the screen height (but not less than --hc-pic-min). On a screen too low
 * for that the block grows and the price goes below the fold.
 */
.bmfaq-hero-c {
    --hc-text: #292E33;
    --hc-muted: #5E6674;
    --hc-blue: #0161F6;
    --hc-pale: #E7F1FF;
    --hc-line: #DDE6F5;
    --hc-head: 70px;
    --hc-pic-min: 220px;
    display: grid;
    grid-template-rows: auto minmax(var(--hc-pic-min), 1fr) auto auto;
    row-gap: 24px;
    min-height: calc(100vh - var(--hc-head));
    min-height: calc(100svh - var(--hc-head));
    padding: 32px 20px;
    background: #FFFFFF;
    color: var(--hc-text);
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-align: center;
}

.bmfaq-hero-c *,
.bmfaq-hero-c *::before,
.bmfaq-hero-c *::after {
    box-sizing: border-box;
}

.bmfaq-hero-c .bmfaq-hero-c__title {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    color: var(--hc-text);
    font-family: inherit;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 400;
    line-height: 1.08;
}

.bmfaq-hero-c__title span {
    color: var(--hc-blue);
}

/* The row of the picture is a size container: the picture is as big as the row allows, 2:1, at most 880px wide */
.bmfaq-hero-c .bmfaq-hero-c__pic {
    display: grid;
    place-items: center;
    min-height: 0;
    margin: 0;
    padding: 0;
    container-type: size;
}

.bmfaq-hero-c__pic img {
    display: block;
    width: min(880px, 100cqw, 200cqh);
    height: auto;
    border: 1px solid var(--hc-line);
    border-radius: 20px;
}

.bmfaq-hero-c .bmfaq-hero-c__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

/* A promise is a row: the icon on the left, the text on the right */
.bmfaq-hero-c .bmfaq-hero-c__fact {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 16px 20px;
    border: 1px solid var(--hc-line);
    border-radius: 16px;
    background: #F7FAFF;
    color: var(--hc-text);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
}

.bmfaq-hero-c__icon {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--hc-pale);
    color: var(--hc-blue);
}

.bmfaq-hero-c .bmfaq-hero-c__price {
    margin: 0;
    color: var(--hc-muted);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}

.bmfaq-hero-c__price b {
    color: var(--hc-blue);
    font-size: 34px;
    font-weight: 700;
}

/*
 * On a computer the heading is one line. The size follows the width of the
 * screen and the length of the heading in each language: at 100px the
 * English one is about 24.1 widths of 1px, the Russian and the Ukrainian
 * ones about 32.2, so these divide the free width.
 */
@media (min-width: 1200px) {
    .bmfaq-hero-c .bmfaq-hero-c__title {
        max-width: none;
        font-size: min(44px, calc((100vw - 64px) / 24.6));
        white-space: nowrap;
    }

    .bmfaq-hero-c .bmfaq-hero-c__title:lang(ru),
    .bmfaq-hero-c .bmfaq-hero-c__title:lang(uk) {
        font-size: min(44px, calc((100vw - 64px) / 32.8));
    }
}

@media (max-width: 1023px) {
    .bmfaq-hero-c .bmfaq-hero-c__facts {
        grid-template-columns: 1fr;
        max-width: 640px;
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .bmfaq-hero-c {
        --hc-pic-min: 150px;
        row-gap: 18px;
        padding: 20px 16px 24px;
    }

    .bmfaq-hero-c .bmfaq-hero-c__title {
        font-size: 28px;
        line-height: 1.12;
    }

    .bmfaq-hero-c__pic img {
        border-radius: 14px;
    }

    /* On a phone the promises are a plain list, no boxes, so the block fits the screen */
    .bmfaq-hero-c .bmfaq-hero-c__facts {
        gap: 12px;
    }

    .bmfaq-hero-c .bmfaq-hero-c__fact {
        gap: 12px;
        padding: 0;
        border: 0;
        background: none;
        font-size: 16px;
    }

    .bmfaq-hero-c__icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .bmfaq-hero-c__icon svg {
        width: 17px;
        height: 17px;
    }

    .bmfaq-hero-c .bmfaq-hero-c__price {
        font-size: 18px;
    }

    .bmfaq-hero-c__price b {
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmfaq-hero a.bmfaq-hero__card {
        transition: none;
    }
}