/* Black November 2026 hero */
.hero.hero-bf26 {
    --bf26-yellow: #F0C318;
    --bf26-yellow-hover: #DCB010;
    --bf26-form-top: min(85vw, 510px);
    /* Stacked layout: same top-to-bottom gradient baked into the mobile art */
    background: linear-gradient(to bottom, #282626, #0A0909);
    padding-top: var(--bf26-form-top);
    padding-bottom: 40px;
}

.hero-bf26 .hero-bf26-bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 600px;
    transform: translateX(-50%);
    pointer-events: none;
}

.hero-bf26 .hero-bf26-bg img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-bf26 .hero-bf26-brand {
    position: absolute;
    top: calc(-1 * var(--bf26-form-top) + 16px);
    left: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hero-bf26 .hero-bf26-brand .hero-brand {
    width: 120px;
    height: auto;
}

/* LPs without site header: brand bar sits above the art on mobile */
.hero.hero-bf26.hero-bf26-ppc {
    padding-top: calc(var(--bf26-form-top) + 64px);
}

.hero-bf26.hero-bf26-ppc .hero-bf26-bg {
    top: 64px;
}

.hero-bf26.hero-bf26-ppc .hero-bf26-brand {
    top: calc(-1 * (var(--bf26-form-top) + 64px) + 16px);
}

.hero-bf26 .hero-bf26-title {
    margin: 0;
}

/* Campaign copy is baked into the art; keep it in the DOM for SEO/screen readers */
.hero-bf26 .hero-bf26-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero-bf26 .form {
    margin: 0 auto;
    max-width: 489px;
}

/* Some LPs restyle ".hero .col-lg-6.offset-xl-1" inline; keep the grid of this hero stable */
.hero.hero-bf26 .col-lg-6.offset-xl-1 {
    margin-top: 0;
}

.hero-bf26 .box-form-body {
    border: 0;
    border-radius: 8px;
    padding: 24px 20px 20px;
    color: #18181B;
}

.hero-bf26 .box-form-title {
    color: #18181B;
    font-weight: 700;
    text-align: center;
}

.hero-bf26 .form-steps span {
    background: var(--bf26-yellow);
    color: #fff;
}

.hero-bf26 .box-form .btn-default,
.hero-bf26 .box-form .btn-default:active,
.hero-bf26 .box-form .btn-default:focus {
    background: var(--bf26-yellow);
    border-color: var(--bf26-yellow);
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
}

.hero-bf26 .box-form .btn-default:hover {
    background: var(--bf26-yellow-hover);
    border-color: var(--bf26-yellow-hover);
    color: #fff;
}

.hero-bf26 .hero-bf26-claim {
    margin: 24px auto 0;
    max-width: 320px;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.hero-bf26 .hero-bf26-claim + .form-avatar {
    margin-top: 16px;
}

.hero-bf26 .form-avatar {
    color: #fff;
}

@media (max-width: 991px) {
    /* Mobile frame has no ® on title and button */
    .hero-bf26 .box-form-title .registered-sign,
    .hero-bf26 .box-form .btn .registered-sign {
        display: none;
    }

    /* Fade the art edges that don't touch the hero edges into the gradient */
    .hero-bf26.hero-bf26-ppc .hero-bf26-bg img {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px);
        mask-image: linear-gradient(to bottom, transparent, #000 40px);
    }
}

@media (min-width: 601px) and (max-width: 991px) {
    .hero-bf26 .hero-bf26-bg img {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    }

    .hero-bf26.hero-bf26-ppc .hero-bf26-bg img {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 40px);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 40px);
        mask-composite: intersect;
    }
}

@media (min-width: 992px) {
    .hero.hero-bf26 {
        --bf26-art-height: min(681px, 43vw);
        /* Same left-to-right gradient baked into the desktop art, so uncovered areas blend in */
        background: linear-gradient(to right, #282626, #0A0909);
        display: flex;
        align-items: center;
        min-height: var(--bf26-art-height);
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .hero.hero-bf26.hero-bf26-ppc {
        padding-top: 32px;
    }

    .hero-bf26 .hero-bf26-bg,
    .hero-bf26.hero-bf26-ppc .hero-bf26-bg {
        top: 50%;
        left: 0;
        width: auto;
        max-width: none;
        transform: translateY(-50%);
    }

    .hero-bf26 .hero-bf26-bg img {
        width: auto;
        height: var(--bf26-art-height);
        /* Fade right, top and bottom edges into the hero gradient when the hero is taller than the art */
        -webkit-mask-image: linear-gradient(to right, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
        mask-composite: intersect;
    }

    .hero-bf26 .hero-container {
        width: 100%;
    }

    .hero-bf26 .hero-bf26-brand,
    .hero-bf26.hero-bf26-ppc .hero-bf26-brand {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .hero-bf26 .hero-bf26-brand .hero-brand {
        width: 157px;
    }

    .hero-bf26 .form {
        margin: 0 0 0 auto;
    }

    .hero-bf26 .box-form-body {
        padding: 40px 48px 36px;
    }

    .hero-bf26 .box-form-title {
        text-align: left;
    }

    .hero.hero-bf26 .col-lg-6.offset-xl-1 {
        margin-left: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1200px) {
    .hero.hero-bf26 {
        /* Figma frame: art 681px tall at 1440 */
        --bf26-art-height: min(681px, 47.3vw);
    }

    .hero.hero-bf26 .col-lg-6.offset-xl-1 {
        margin-left: 8.333333%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
}

/* Black November 2026 over a page's regular hero (home, city pages, /g/), Figma /v3.
   Copy and form stay the page's own; only the art, colours and side widgets change. */
.hero.hero-bf26-skin {
    position: relative;
    overflow: hidden;
    /* Colour where the mobile texture fades out */
    background: #131313;
    padding-bottom: 0;
}

.hero-bf26-skin .hero-bf26-skin-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.hero-bf26-skin .hero-bf26-skin-bg img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

.hero-bf26-skin .hero-bf26-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero-bf26-skin > .container {
    position: relative;
}

.hero-bf26-skin .hero-title,
.hero-bf26-skin .hero-opening,
.hero-bf26-skin .hero-opening strong,
.hero-bf26-skin .hero-header,
.hero-bf26-skin p[typeof="BreadcrumbList"],
.hero-bf26-skin p[typeof="BreadcrumbList"] a {
    color: #fff;
}

/* Figma button: campaign orange-yellow instead of each page's own button colour */
.hero-bf26-skin .box-form .btn-default,
.hero-bf26-skin .box-form .btn-default:active,
.hero-bf26-skin .box-form .btn-default:focus {
    background: #F9A825;
    border-color: #F9A825;
    color: #fff;
}

.hero-bf26-skin .box-form .btn-default:hover {
    background: #E8961B;
    border-color: #E8961B;
    color: #fff;
}

.hero-bf26-skin .form-steps span.active {
    background: #F9A825;
    border-color: #F9A825;
    color: #fff;
}

/* The campaign art takes the place of the consultants photo and the registry seal */
.hero-bf26-skin .form-avatar,
.hero-bf26-skin .registry-seal {
    display: none !important;
}

/* Mobile: seal + 40% OFF right under the form, edge to edge */
.hero-bf26-skin .hero-bf26-skin-art {
    margin: 8px -15px 0;
    text-align: center;
}

.hero-bf26-skin .hero-bf26-skin-art img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .hero.hero-bf26-skin {
        /* Same left-to-right shading as the art, for heroes taller than it */
        background: linear-gradient(to right, #2c2c2c, #0b0b0a);
        min-height: 600px;
        padding-bottom: 48px;
    }

    .hero-bf26-skin .hero-bf26-skin-bg {
        bottom: 0;
    }

    /* Art (1440x680, seal at the bottom left) scales with the width and sits at the bottom,
       so taller heroes (/g/, city pages) don't blow it up behind the copy and the form.
       Above 1440 it stays at the Figma size, centred like the container. */
    .hero-bf26-skin .hero-bf26-skin-bg picture {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100%;
        max-width: 1440px;
        transform: translateX(-50%);
    }

    .hero-bf26-skin .hero-bf26-skin-bg img {
        width: 100%;
        height: auto;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
        mask-image: linear-gradient(to bottom, transparent, #000 12%);
    }

    /* City pages end the hero in a 96px white band (city.css .hero:before) for the form to
       float over. Like their regular blue hero, the art fills only the dark area above the
       band, shrunk to the container so the seal sits under the copy, not behind it. */
    .hero.hero-bf26-skin-band {
        min-height: 0;
        padding-bottom: 53px;
    }

    .hero-bf26-skin-band .hero-bf26-skin-bg {
        bottom: 96px;
        overflow: hidden;
    }

    .hero-bf26-skin-band .hero-bf26-skin-bg picture {
        max-width: 960px;
    }

    .hero-bf26-skin-band .hero-bf26-skin-bg img {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, transparent, #000 12%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
        mask-composite: intersect;
    }

    /* Room under the copy for the seal (bottom 46% of the art) plus the form's overhang
       into the band: a longer city name pushes the hero down instead of into the seal. */
    .hero-bf26-skin-band .row > .col-lg-7 {
        padding-bottom: 280px;
    }
}

@media (min-width: 1200px) {
    .hero.hero-bf26-skin {
        min-height: 680px;
    }

    .hero.hero-bf26-skin-band {
        min-height: 0;
    }

    .hero-bf26-skin-band .hero-bf26-skin-bg picture {
        max-width: 1010px;
    }
}

@media (min-width: 1441px) {
    .hero-bf26-skin .hero-bf26-skin-bg img {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, transparent, #000 12%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
        mask-composite: intersect;
    }
}