/* The Reveal Gate (assets/lp/js/bx-gate.js). The locked part is rendered and blurred, so the visitor
   sees there is more and roughly what shape it has; the form sits over its lower edge. Banrox palette
   only, the kit's own fields, switch and buttons. */
.bxg { position: relative; }
.bxg .bxg-locked { transition: filter .45s cubic-bezier(.2, .8, .2, 1), opacity .45s cubic-bezier(.2, .8, .2, 1); }
.bxg.is-locked .bxg-locked {
    filter: blur(7px) saturate(.9);
    opacity: .55;
    max-height: 190px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.bxg.is-open .bxg-locked { filter: none; opacity: 1; }

.bxg-form {
    position: relative;
    margin-top: -64px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(18, 24, 66, .96), rgba(10, 14, 40, .98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 48px -20px rgba(38, 75, 255, .45);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    z-index: 1;
}
.bxg.is-open .bxg-form { margin-top: 14px; background: none; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bxg-head { display: flex; gap: 12px; align-items: flex-start; }
.bxg-lock { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #FFFFFF;
    background: linear-gradient(135deg, #264BFF, #8585E9); box-shadow: 0 8px 20px -8px rgba(38, 75, 255, .8); }
.bxg-lock svg { width: 20px; height: 20px; }
.bxg-head__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bxg-head__txt b { font-weight: 500; font-size: 16px; line-height: 22px; color: #FFFFFF; }
.bxg-head__txt i { font-style: normal; font-size: 13.5px; line-height: 19px; color: rgba(255, 255, 255, .64); }
.bxg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bxg-form .bxc-field { margin: 0; }
.bxg-form .bxc-fine { margin: 0; text-align: center; }
.bxg-done { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .78); }
.bxg-done svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #31A650; color: #FFFFFF; }
.bxg-form [hidden] { display: none !important; }
@media (max-width: 600px) {
    .bxg-fields { grid-template-columns: 1fr; }
    .bxg-form { padding: 16px; margin-top: -48px; }
}
@media (prefers-reduced-motion: reduce) {
    .bxg .bxg-locked { transition: none; }
}

/* The placement slot (templates/site/hooks/_place.html): inline widgets keep the page's rhythm, and a link to
   #bxh-<widget> lands with the widget clear of the site header. */
.bxh-slot { scroll-margin-top: 96px; }
.bxh-slot--inline { margin: 32px 0; }
.bxh-slot--inline:first-child { margin-top: 0; }
@media (max-width: 767px) { .bxh-slot--inline { margin: 24px 0; } }

/* Up next (bx-gate.js upNext): under the done line, the journey's next step as one quiet row. */
.bxg-next { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 14px; padding: 10px 12px 10px 16px; border-radius: 16px;
  color: #FFFFFF; text-decoration: none; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .2s ease; }
.bxg-next:hover { background: rgba(255, 255, 255, .07); }
.bxg-next:active { background: rgba(255, 255, 255, .10); }
.bxg-next:focus-visible { outline: 2px solid #8585E9; outline-offset: 2px; }
.bxg-next__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bxg-next__txt i { font-style: normal; font-size: 12px; line-height: 16px; font-weight: 500; color: #B9C3FF; }
.bxg-next__txt b { font-weight: 500; font-size: 15px; line-height: 20px; }
.bxg-next__go { flex: none; width: 20px; height: 20px; color: rgba(255, 255, 255, .45); }
.bxg-next__go svg { display: block; width: 100%; height: 100%; }