/* ==========================================================================
   Featured case-study carousel
   ========================================================================== */
.bbf-featured-cases {
  width: 100%;
  padding: 0.2rem 0 1.5rem;
  overflow: hidden;
  background: #F0F0F1;
}
.bbf-featured-cases__container {
  width: calc(100vw - 1.5rem);
  margin-left: 1.5rem;
}
.bbf-featured-cases__slider {
  padding: 0.75rem 0 0;
  overflow: visible;
  cursor: grab;
}
.bbf-featured-cases__slider:active {
  cursor: grabbing;
}
.bbf-featured-cases__slide {
  z-index: 1;
  width: 47.5rem;
  height: 17.8125rem;
  /*
         * Scale only the card inside the slide.
         * Swiper retains control of slide width and spacing.
         */
  /*
         * Active card on tablet and desktop.
         */
  /*
         * Hovered or keyboard-focused card.
         */
}
.bbf-featured-cases__slide .bbf-featured-case {
  opacity: 0.76;
  transform: scale(0.95);
  transform-origin: center;
}
.bbf-featured-cases__slide.swiper-slide-active {
  z-index: 2;
}
.bbf-featured-cases__slide.swiper-slide-active .bbf-featured-case {
  opacity: 1;
  box-shadow: 0 6px 16px rgba(34, 34, 34, 0.12);
  transform: scale(1);
}
.bbf-featured-cases__slide:hover,
.bbf-featured-cases__slide:focus-within {
  z-index: 3;
}
.bbf-featured-cases__slide:hover .bbf-featured-case,
.bbf-featured-cases__slide:focus-within .bbf-featured-case {
  opacity: 1;
  box-shadow: 0 6px 16px rgba(34, 34, 34, 0.12);
  transform: scale(1.02);
}
/* ==========================================================================
   Wide-screen carousel alignment
   ========================================================================== */
/*
 * Align the carousel with the left side of the standard
 * 1330px content container.
 */
@media screen and (min-width: 84.25rem) {
  .bbf-featured-cases__container {
    width: calc(100vw - ((100vw - 83.125rem) / 2));
    margin-left: calc((100vw - 83.125rem) / 2);
  }
}
/* ==========================================================================
   Featured case card
   ========================================================================== */
.bbf-featured-case {
  display: grid;
  grid-template-columns: calc(47.5rem - 29.6875rem) 29.6875rem;
  width: 47.5rem;
  height: 17.8125rem;
  overflow: hidden;
  color: #222222;
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
  text-decoration: none;
  transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
}
.bbf-featured-case:hover,
.bbf-featured-case:focus-visible {
  color: #222222;
  text-decoration: none;
}
.bbf-featured-case:focus-visible {
  outline: 3px solid #1476DB;
  outline-offset: 4px;
}
.bbf-featured-case__information {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 20px 32px;
  background: #FFFFFF;
}
.bbf-featured-case__company {
  min-width: 0;
}
.bbf-featured-case__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 2.8125rem;
  margin: 0 0 1rem;
  object-fit: contain;
  object-position: left center;
}
.bbf-featured-case__company-name {
  margin: 0;
  color: #222222;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-featured-case__industry {
  margin: 0.35rem 0 0;
  color: #4E4E4E;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}
.bbf-featured-case__result {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 1rem;
}
.bbf-featured-case__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}
.bbf-featured-case__metric-value {
  display: flex;
  align-items: baseline;
  margin: 0;
  color: #1476DB;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.bbf-featured-case__metric-number {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.bbf-featured-case__metric-prefix,
.bbf-featured-case__metric-suffix {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.bbf-featured-case__metric-prefix {
  margin-right: 0.1em;
}
.bbf-featured-case__metric-suffix {
  margin-left: 0.1em;
}
.bbf-featured-case__metric-label {
  display: block;
  margin-top: 0.65rem;
  color: #222222;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.bbf-featured-case__visual {
  width: 29.6875rem;
  height: 17.8125rem;
  overflow: hidden;
  border-radius: 0 22px 22px 0;
}
.bbf-featured-case__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 4px;
  margin-top: 10px;
  color: #1476DB;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  transition: opacity 180ms ease,
      transform 180ms ease;
}
.bbf-featured-case__link span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bbf-featured-case__link i {
  position: relative;
  top: -2px;
  font-size: 0.6875rem;
  text-decoration: none;
  transition: transform 180ms ease;
}
.bbf-featured-case:hover .bbf-featured-case__link,
.bbf-featured-case:focus-visible .bbf-featured-case__link {
  opacity: 0.75;
}
.bbf-featured-case:hover .bbf-featured-case__link i,
.bbf-featured-case:focus-visible .bbf-featured-case__link i {
  transform: translate(0.1rem, -0.1rem);
}
.bbf-featured-case__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bbf-featured-cases__container .bbf-case-study-carousel__controls {
  padding-top: 1rem;
}
/* ==========================================================================
   Small desktop and tablet
   ========================================================================== */
@media screen and (max-width: 1279px) {
  .bbf-featured-cases__slide {
    width: 42.5rem;
    height: 20rem;
  }
  .bbf-featured-case {
    grid-template-columns: calc(42.5rem - 27.25rem) 27.25rem;
    width: 42.5rem;
    height: 20rem;
  }
  .bbf-featured-case__information {
    padding: 2rem;
  }
  .bbf-featured-case__logo {
    height: 2.5rem;
    margin-bottom: 1rem;
  }
  .bbf-featured-case__metric {
    padding-top: 1.25rem;
  }
  .bbf-featured-case__metric-value {
    font-size: 2.625rem;
  }
  .bbf-featured-case__metric-prefix,
  .bbf-featured-case__metric-suffix {
    font-size: 1.5625rem;
  }
  .bbf-featured-case__visual {
    width: 27.25rem;
    height: 20rem;
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-featured-cases {
    padding-bottom: 1rem;
    /*
         * The container must use the full viewport width so
         * centeredSlides can calculate the center correctly.
         */
  }
  .bbf-featured-cases__container {
    width: 100%;
    margin-left: 0;
  }
  .bbf-featured-cases__slider {
    width: 100%;
    padding: 0.625rem 0;
    overflow: visible;
  }
  .bbf-featured-cases__slide {
    /*
             * 84vw centers the active card while leaving part
             * of the adjacent slides visible.
             */
    width: 84vw;
    max-width: 21.25rem;
    height: auto;
    /*
             * Mobile does not use scale enlargement.
             * Swiper communicates the active state through
             * positioning and the active-card shadow.
             */
  }
  .bbf-featured-cases__slide .bbf-featured-case,
  .bbf-featured-cases__slide.swiper-slide-active .bbf-featured-case,
  .bbf-featured-cases__slide:hover .bbf-featured-case,
  .bbf-featured-cases__slide:focus-within .bbf-featured-case {
    opacity: 1;
    box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
    transform: none;
  }
  .bbf-featured-cases__slide.swiper-slide-active .bbf-featured-case {
    box-shadow: 0 6px 16px rgba(34, 34, 34, 0.12);
  }
  .bbf-featured-case {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .bbf-featured-case__information {
    min-height: 13.75rem;
    padding: 1.5rem;
  }
  .bbf-featured-case__logo {
    width: auto;
    max-width: 100%;
    height: 2.375rem;
    margin-bottom: 1rem;
  }
  .bbf-featured-case__company-name {
    font-size: 1rem;
  }
  .bbf-featured-case__result {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-top: 1.25rem;
  }
  .bbf-featured-case__metric {
    align-items: flex-start;
    margin: 0;
    padding: 0;
  }
  .bbf-featured-case__link {
    flex-shrink: 0;
    align-self: flex-end;
    margin: 0 0 0.125rem;
    white-space: nowrap;
  }
  .bbf-featured-case__metric-value {
    font-size: 2.5rem;
  }
  .bbf-featured-case__metric-prefix,
  .bbf-featured-case__metric-suffix {
    font-size: 1.5rem;
  }
  .bbf-featured-case__metric-label {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
  }
  .bbf-featured-case__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0 0 22px 22px;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-featured-case {
    transition: none;
  }
}
/* ==========================================================================
   BBF campaign methods
   ========================================================================== */
.bbf-campaign-methods {
  padding-bottom: 0;
}
.bbf-campaign-methods__label-platform {
  font-size: 0.8rem;
}
.bbf-campaign-methods__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  width: 100%;
}
/* ==========================================================================
   Campaign-method card
   ========================================================================== */
.bbf-campaign-method-card {
  position: relative;
  width: 100%;
  height: 6.875rem;
  padding: 1.875rem 1.5rem;
  overflow: hidden;
  box-sizing: border-box;
  color: #222222;
  background: #F8F9FA;
  border-radius: 22px;
  transition: height 0.35s ease, box-shadow 0.35s ease;
  /*
     * First line:
     * X (Twitter) 完結型
     * Web 遷移型
     * X (Twitter)
     */
  /*
     * Only "(Twitter)" is smaller.
     */
  /*
     * Second title line.
     */
  /*
     * The first card remains permanently expanded.
     */
  /*
     * Cards 2–4 expand with mouse hover or keyboard focus.
     */
}
.bbf-campaign-method-card__header {
  position: relative;
  min-height: 3.125rem;
  padding-right: 2.375rem;
}
.bbf-campaign-method-card__title {
  margin: 0;
  color: #222222;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.bbf-campaign-method-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  color: #222222;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.bbf-campaign-method-card__eyebrow-main {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.bbf-campaign-method-card__platform {
  margin: 0 0.15em;
  font-size: 1rem;
  font-weight: inherit;
  line-height: inherit;
}
.bbf-campaign-method-card__title-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.15em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.bbf-campaign-method-card__title-text {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.bbf-campaign-method-card__title-note {
  font-size: 1rem;
  font-weight: inherit;
  line-height: inherit;
}
.bbf-campaign-method-card__icon {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  color: #747478;
  line-height: 1;
}
.bbf-campaign-method-card__icon i {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
}
.bbf-campaign-method-card__icon img {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  object-fit: contain;
}
.bbf-campaign-method-card__content {
  margin-top: 3.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.bbf-campaign-method-card__text {
  margin: 0;
  color: #4E4E4E;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
}
.bbf-campaign-method-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.625rem;
  margin: 1rem 0 0;
  padding: 0;
  color: #1476DB;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.6;
  list-style: none;
}
.bbf-campaign-method-card__tags li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.bbf-campaign-method-card.is-active {
  height: 15rem;
  background: #eff7ff;
}
.bbf-campaign-method-card.is-active .bbf-campaign-method-card__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bbf-campaign-method-card:not(.is-active):hover,
.bbf-campaign-method-card:not(.is-active):focus,
.bbf-campaign-method-card:not(.is-active):focus-within {
  height: 15rem;
}
.bbf-campaign-method-card:not(.is-active):hover .bbf-campaign-method-card__content,
.bbf-campaign-method-card:not(.is-active):focus .bbf-campaign-method-card__content,
.bbf-campaign-method-card:not(.is-active):focus-within .bbf-campaign-method-card__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bbf-campaign-method-card:focus-visible {
  outline: 3px solid #1476DB;
  outline-offset: 3px;
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-campaign-methods__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /*
     * Keep all cards expanded in the two-column layout.
     */
  .bbf-campaign-method-card {
    height: auto;
    min-height: 15rem;
  }
  .bbf-campaign-method-card__content {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .bbf-campaign-method-card:not(.is-active):hover,
  .bbf-campaign-method-card:not(.is-active):focus,
  .bbf-campaign-method-card:not(.is-active):focus-within {
    height: auto;
  }
}
/* ==========================================================================
   Mobile horizontal scroll
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-campaign-methods__grid {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: calc(100% + 3rem);
    margin-inline: -1.5rem;
    padding: 0 1.5rem 1rem;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bbf-campaign-methods__grid::-webkit-scrollbar {
    display: none;
  }
  .bbf-campaign-method-card {
    display: flex;
    flex: 0 0 min(85vw, 21.25rem);
    flex-direction: column;
    width: min(85vw, 21.25rem);
    height: auto;
    min-height: 16.75rem;
    padding: 1.875rem 1.5rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /*
         * All mobile cards remain permanently expanded.
         */
    /*
         * Keep the hashtags toward the bottom.
         */
  }
  .bbf-campaign-method-card,
  .bbf-campaign-method-card.is-active {
    height: auto;
    min-height: 16.75rem;
  }
  .bbf-campaign-method-card:not(.is-active):hover,
  .bbf-campaign-method-card:not(.is-active):focus,
  .bbf-campaign-method-card:not(.is-active):focus-within {
    height: auto;
    min-height: 16.75rem;
  }
  .bbf-campaign-method-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .bbf-campaign-method-card__tags {
    margin: auto 0 0;
    padding-top: 1rem;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-campaign-method-card,
  .bbf-campaign-method-card__content {
    transition: none;
  }
}
/* ==========================================================================
   BBF reasons
   ========================================================================== */
.bbf-reasons__layout {
  display: grid;
  grid-template-columns: minmax(0, 47.5rem) minmax(0, 1fr);
  align-items: start;
  gap: 4rem;
}
.bbf-reasons__panels,
.bbf-reasons__panel {
  width: 100%;
}
.bbf-reasons__panel[hidden] {
  display: none;
}
.bbf-reasons__navigation {
  align-self: center;
  width: 100%;
}
.bbf-reasons__trigger {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 1.875rem 0;
  color: #959595;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
.bbf-reasons__trigger:first-child {
  padding-top: 0;
}
.bbf-reasons__trigger:last-child {
  border-bottom: 0;
}
.bbf-reasons__trigger:hover,
.bbf-reasons__trigger:focus-visible,
.bbf-reasons__trigger.is-active,
.bbf-reasons__trigger[aria-selected="true"] {
  color: #1476DB;
}
.bbf-reasons__trigger:focus-visible {
  outline: 2px solid #1476DB;
  outline-offset: 4px;
}
.bbf-reasons__note {
  width: 100%;
  margin: 0.625rem 0 0;
  color: #b2b2b2;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
  font-style: italic;
}
.bbf-reasons__arrow {
  flex: 0 0 auto;
  margin-left: 1.5rem;
  font-size: 1.125rem;
  line-height: 1;
}
.bbf-reasons__mobile {
  display: none;
}
/* ==========================================================================
   Reason card
   ========================================================================== */
.bbf-reason-card {
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 28.125rem;
  padding: 1.5rem;
  box-sizing: border-box;
  color: #222222;
  background: #eff7ff;
  border-radius: 22px;
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}
.bbf-reason-card:hover,
.bbf-reason-card:focus-visible {
  color: #222222;
  box-shadow: 0 0.25rem 0.75rem rgba(34, 34, 34, 0.07);
  text-decoration: none;
}
.bbf-reason-card:focus-visible {
  outline: 3px solid #1476DB;
  outline-offset: 4px;
}
.bbf-reason-card__heading,
.bbf-reason-card__body,
.bbf-reason-card__link-label {
  position: relative;
  z-index: 2;
}
.bbf-reason-card__title {
  margin: 0;
  color: #222222;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}
.bbf-reason-card__subtitle {
  margin: 0.25rem 0 0;
  color: #222222;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
}
.bbf-reason-card__body {
  margin-top: 5.625rem;
}
.bbf-reason-card__text {
  max-width: 100%;
  margin: 0;
  color: #222222;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}
.bbf-reason-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 2.5rem 0 0;
  padding: 0;
  color: #808080;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  list-style: none;
}
.bbf-reason-card__tags li {
  margin: 0;
  padding: 0;
}
.bbf-reason-card__link-label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  color: #1476DB;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-reason-card__number {
  position: absolute;
  right: 1.5rem;
  bottom: -3rem;
  z-index: 1;
  color: #FFFFFF;
  font-size: 12.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
}
/* ==========================================================================
   Tablet accordion
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-reasons__desktop {
    display: none;
  }
  .bbf-reasons__mobile {
    display: block;
  }
  .bbf-reasons__mobile-item {
    border-bottom: 1px solid #ccc;
  }
  .bbf-reasons__mobile-trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.5rem 0;
    color: #959595;
    background: transparent;
    border: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
  }
  .bbf-reasons__mobile-trigger.is-active,
  .bbf-reasons__mobile-trigger[aria-expanded="true"] {
    color: #1476DB;
  }
  .bbf-reasons__mobile-trigger:focus-visible {
    outline: 2px solid #1476DB;
    outline-offset: 4px;
  }
  .bbf-reasons__mobile-trigger-number {
    font-size: 0.875rem;
    font-weight: 700;
  }
  .bbf-reasons__mobile-panel {
    padding-bottom: 1.5rem;
  }
  .bbf-reasons__mobile-panel[hidden] {
    display: none;
  }
  .bbf-reason-card {
    height: auto;
    min-height: 26.875rem;
  }
  .bbf-reason-card__body {
    margin-top: 4rem;
  }
  .bbf-reason-card__text {
    max-width: none;
  }
}
/* ==========================================================================
   Mobile accordion
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-reasons__mobile-trigger {
    gap: 0.75rem;
    padding: 1.25rem 0;
    font-size: 1.0625rem;
  }
  .bbf-reasons__arrow {
    margin-left: 0.5rem;
    font-size: 1rem;
  }
  .bbf-reason-card {
    min-height: 26.875rem;
    padding: 1.5rem;
  }
  .bbf-reason-card__title {
    padding-right: 0;
    font-size: 1.5rem;
  }
  .bbf-reason-card__subtitle {
    font-size: 1.0625rem;
  }
  .bbf-reason-card__body {
    margin-top: 3.5rem;
  }
  .bbf-reason-card__text {
    font-size: 0.9375rem;
  }
  .bbf-reason-card__tags {
    gap: 0.375rem 1.125rem;
    margin-top: 2rem;
    font-size: 0.8125rem;
  }
  .bbf-reason-card__link-label {
    font-size: 0.875rem;
  }
  .bbf-reason-card__number {
    right: 0.75rem;
    bottom: -1.75rem;
    font-size: 8.75rem;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-reasons__trigger,
  .bbf-reason-card {
    transition: none;
  }
}
/* ==========================================================================
   BBF support services
   ========================================================================== */
.bbf-support-services {
  background: #F0F0F1;
}
/* ==========================================================================
   Support tabs
   ========================================================================== */
.bbf-support-tabs {
  --sr-brand-tab-count: 6;
  /*
     * Desktop/tablet tabs:
     * Retain the shared background, hover and active states,
     * connected shape, and outside border radius.
     */
}
.bbf-support-tabs .sr-brand-tabs__tab {
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem 1.125rem;
  text-align: left;
}
.bbf-support-tabs .sr-brand-tabs__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
}
.bbf-support-tabs .sr-brand-tabs__title {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}
.bbf-support-tabs .sr-brand-tabs__meta {
  display: block;
  width: 100%;
  margin: 0;
  color: #222222;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  opacity: 1;
}
.bbf-support-tabs .sr-brand-tabs__tab.is-active .sr-brand-tabs__title,
.bbf-support-tabs .sr-brand-tabs__tab[aria-selected="true"] .sr-brand-tabs__title,
.bbf-support-tabs .sr-brand-tabs__tab.is-active .sr-brand-tabs__meta,
.bbf-support-tabs .sr-brand-tabs__tab[aria-selected="true"] .sr-brand-tabs__meta {
  color: #FFFFFF;
}
.bbf-support-tabs__panel {
  padding: 2.5rem;
}
.bbf-support-tabs__note {
  width: 100%;
  margin-top: 1rem;
  text-align: right;
}
/* ==========================================================================
   Support panel
   ========================================================================== */
.bbf-support-panel {
  width: 100%;
}
.bbf-support-panel__content {
  min-width: 0;
}
.bbf-support-panel__header {
  width: 100%;
  max-width: none;
  margin-bottom: 2rem;
}
.bbf-support-panel__title {
  margin: 0;
  color: #222222;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}
.bbf-support-panel__description {
  width: 100%;
  margin: 0.75rem 0 0;
  color: #4E4E4E;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}
.bbf-support-panel__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
}
.bbf-support-panel__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bbf-support-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.bbf-support-panel__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.bbf-support-panel__image {
  display: block;
  width: 14rem;
  max-width: 100%;
  height: 30rem;
  object-fit: contain;
  object-position: center top;
}
.bbf-support-panel__video {
  display: block;
  width: 14rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
/* ==========================================================================
   Support panel: desktop visual layouts
   ========================================================================== */
@media screen and (min-width: 768px) {
  /*
   * Standard image / video panels:
   * Content on the left, visual on the right.
   */
  .bbf-support-tabs__panel--with-visual:not(
    .bbf-support-tabs__panel--with-carousel
  ) .bbf-support-panel__layout {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  /*
   * Carousel panels:
   * The outer panel owns the two-column layout so the CTA can sit
   * below the content without being pushed down by the tall carousel.
   */
  .bbf-support-tabs__panel--with-carousel .bbf-support-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "header header" "content visual" "actions visual";
    column-gap: 2rem;
    align-items: start;
  }
  .bbf-support-tabs__panel--with-carousel .bbf-support-panel__header {
    grid-area: header;
  }
  .bbf-support-tabs__panel--with-carousel .bbf-support-panel__layout {
    display: contents;
  }
  .bbf-support-tabs__panel--with-carousel .bbf-support-panel__content {
    grid-area: content;
  }
  .bbf-support-tabs__panel--with-carousel .bbf-support-panel__visual {
    grid-area: visual;
  }
  .bbf-support-tabs__panel--with-carousel .bbf-support-panel__actions {
    grid-area: actions;
    width: 100%;
    margin-top: 2rem;
  }
}
/* ==========================================================================
   Support detail item
   ========================================================================== */
.bbf-support-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: "number title" "text text";
  column-gap: 1rem;
  row-gap: 0.875rem;
  min-width: 0;
  padding: 1.5rem;
  background: #F8F9FA;
  border-radius: 0.75rem;
}
.bbf-support-item__number {
  grid-area: number;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  color: #FFFFFF;
  background: #1476DB;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.bbf-support-item__content {
  display: contents;
}
.bbf-support-item__title {
  grid-area: title;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 5px 0 0;
  color: #222222;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}
.bbf-support-item__text {
  grid-area: text;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #4E4E4E;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-support-tabs .sr-brand-tabs__tab {
    min-width: 14.375rem;
    min-height: 6.25rem;
  }
  .bbf-support-tabs__panel {
    padding: 2rem;
  }
  .bbf-support-panel__title {
    font-size: 1.625rem;
  }
  .bbf-support-panel__items {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-support-tabs {
    /*
         * The native select remains positioned over the
         * custom two-line display and opens the platform menu.
         */
    /*
         * Invisible native select:
         * Remains clickable and retains native dropdown options.
         */
    /*
         * Shared navigation already supplies the layout.
         * These rules prevent long names from becoming
         * unreadably compressed.
         */
  }
  .bbf-support-tabs .sr-brand-tabs__mobile-control {
    background: #1476DB;
  }
  .bbf-support-tabs .sr-brand-tabs__select-wrap {
    position: relative;
    display: block;
    min-height: 6.5rem;
    padding: 0;
    /*
             * Show keyboard focus on the custom display when
             * the transparent native select receives focus.
             */
  }
  .bbf-support-tabs .sr-brand-tabs__select-wrap::after {
    top: 50%;
    right: 1.5rem;
    bottom: auto;
    z-index: 1;
    transform: translateY(-65%) rotate(45deg);
  }
  .bbf-support-tabs .sr-brand-tabs__select-wrap:focus-within {
    outline: 3px solid rgba(255, 255, 255, 0.45);
    outline-offset: -4px;
  }
  .bbf-support-tabs__mobile-display {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    min-height: 6.5rem;
    padding: 0.875rem 3.5rem 1rem 1.5rem;
    color: #FFFFFF;
    pointer-events: none;
  }
  .bbf-support-tabs .sr-brand-tabs__mobile-status {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .bbf-support-tabs__mobile-title {
    display: block;
    width: 100%;
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
  }
  .bbf-support-tabs__mobile-meta {
    display: block;
    width: 100%;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .bbf-support-tabs__mobile-select {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 6.5rem;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  .bbf-support-tabs__panel {
    padding: 1.5rem 1rem;
  }
  .bbf-support-tabs__note {
    margin-top: 0.75rem;
    text-align: left;
  }
  .bbf-support-tabs .sr-brand-tabs__nav-button {
    min-width: 0;
  }
  .bbf-support-tabs .sr-brand-tabs__nav-name {
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bbf-support-panel__header {
    margin-bottom: 1.5rem;
  }
  .bbf-support-panel__title {
    font-size: 1.5rem;
  }
  .bbf-support-panel__description {
    font-size: 0.9375rem;
  }
  .bbf-support-panel__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    width: 100%;
    min-width: 0;
  }
  .bbf-support-panel__content {
    width: 100%;
    min-width: 0;
  }
  .bbf-support-panel__items {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    min-width: 0;
  }
  .bbf-support-panel__visual {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
  }
  .bbf-support-panel__image {
    width: 10.1875rem;
    max-width: 100%;
    height: 21.875rem;
    margin: 0 auto;
  }
  .bbf-support-panel__video {
    width: 10.1875rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .bbf-support-panel__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 2rem;
  }
  .bbf-support-panel__actions .sr-brand-button {
    width: 100%;
    min-width: 0;
  }
  .bbf-support-item {
    padding: 1.25rem;
  }
  .bbf-support-item__title {
    font-size: 1.1875rem;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-support-tabs .sr-brand-tabs__tab {
    transition: none;
  }
}
/* ==========================================================================
   BBF service comparison
   ========================================================================== */
.bbf-service-comparison-section {
  background: #FFFFFF;
  padding-bottom: 0;
}
.bbf-service-comparison {
  --sr-comparison-feature-width: 18%;
  --sr-comparison-value-width: 21%;
  /* ----------------------------------------------------------------------
       Table wrapper
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Column widths
       ---------------------------------------------------------------------- */
  /*
     * Remove the shared interactive column overlay.
     * The BBF column remains permanently highlighted.
     */
  /* ----------------------------------------------------------------------
       Table headers
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Rows and cells
       ---------------------------------------------------------------------- */
  /*
     * Alternating light-grey rows.
     */
  /* ----------------------------------------------------------------------
       Feature column
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Comparison values
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Plain text values
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Metric values
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Notes attached to plain text values
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Legend / source
       ---------------------------------------------------------------------- */
}
.bbf-service-comparison .sr-brand-comparison__table-wrap {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.bbf-service-comparison .sr-brand-comparison__empty-cell,
.bbf-service-comparison .sr-brand-comparison__feature {
  width: var(--sr-comparison-feature-width);
}
.bbf-service-comparison .sr-brand-comparison__plan,
.bbf-service-comparison .sr-brand-comparison__value {
  width: var(--sr-comparison-value-width);
}
.bbf-service-comparison .sr-brand-comparison__column-highlight {
  display: none;
}
.bbf-service-comparison__header {
  height: 4.75rem;
  padding: 1rem;
  color: #222222;
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
}
.bbf-service-comparison__header--feature {
  text-align: left;
}
.bbf-service-comparison__header--featured {
  color: #FFFFFF;
  background: #1476DB;
  border-radius: 0.8125rem 0.8125rem 0 0;
  font-size: 1.5rem;
}
.bbf-service-comparison__company {
  display: block;
  width: 100%;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.bbf-service-comparison .sr-brand-comparison__row > th,
.bbf-service-comparison .sr-brand-comparison__row > td {
  height: 4.5rem;
  padding: 0.75rem 1rem;
  color: #222222;
  border: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  vertical-align: middle;
}
.bbf-service-comparison .sr-brand-comparison__row:nth-child(odd) > th,
.bbf-service-comparison .sr-brand-comparison__row:nth-child(odd) > td {
  background: #F8F9FA;
}
.bbf-service-comparison .sr-brand-comparison__row:nth-child(odd) > th:first-child {
  border-radius: 0.75rem 0 0 0.75rem;
}
.bbf-service-comparison .sr-brand-comparison__row:nth-child(odd) > td:last-child {
  border-radius: 0 0.75rem 0.75rem 0;
}
.bbf-service-comparison .sr-brand-comparison__feature {
  color: #222222;
  text-align: left;
}
.bbf-service-comparison .sr-brand-comparison__feature-title {
  color: #222222;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}
.bbf-service-comparison__value {
  color: #222222;
  font-size: 0.9375rem;
  font-weight: 400;
  text-align: center;
  /*
         * Keep all BBF cells light blue, including rows
         * that would normally have a white background.
         */
  /*
         * Round the bottom of the BBF column.
         */
}
.bbf-service-comparison__value--featured {
  color: #1476DB !important;
  background: #e4effb !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.bbf-service-comparison__value--featured.bbf-service-comparison__value--last {
  border-radius: 0 0 0.75rem 0.75rem;
}
.bbf-service-comparison__text-value {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
}
.bbf-service-comparison__metric {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}
.bbf-service-comparison__metric-part {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.bbf-service-comparison__metric-value {
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.2;
}
.bbf-service-comparison__metric-unit {
  color: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
}
.bbf-service-comparison__metric-part--modifier .bbf-service-comparison__metric-value {
  font-size: 0.75rem;
  font-weight: 400;
}
.bbf-service-comparison .bbf-service-comparison__value--featured .bbf-service-comparison__metric-value {
  font-weight: 700;
  font-size: 1rem;
}
.bbf-service-comparison .bbf-service-comparison__value--featured .bbf-service-comparison__metric-unit {
  font-weight: 500;
  font-size: 0.8125rem;
}
.bbf-service-comparison .bbf-service-comparison__value--featured .bbf-service-comparison__metric-part--modifier .bbf-service-comparison__metric-value {
  font-weight: 500;
}
.bbf-service-comparison .bbf-service-comparison__value--featured .bbf-comparison-symbol {
  color: #1476DB;
}
.bbf-service-comparison__note {
  display: block;
  margin-top: 0.1875rem;
  color: #4e4e4e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}
.bbf-service-comparison__note--accent {
  color: #1476DB;
}
.bbf-service-comparison__notes {
  margin-top: 1rem;
  color: #4e4e4e;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}
.bbf-service-comparison__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  width: 100%;
}
.bbf-service-comparison__legend-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.bbf-service-comparison__legend-symbol {
  display: inline;
  color: #4e4e4e;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}
.bbf-service-comparison__source {
  margin: 0.375rem 0 0;
  color: #4e4e4e;
  font-size: inherit;
  font-style: italic;
  font-weight: 400;
  line-height: inherit;
  text-align: right;
}
/* ==========================================================================
Comparison symbols
   ========================================================================== */
.bbf-comparison-symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  color: #4e4e4e;
  line-height: 1;
  /* ----------------------------------------------------------------------
       Symbol character
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Note underneath symbol
       ---------------------------------------------------------------------- */
}
.bbf-comparison-symbol__character {
  display: block;
  color: inherit;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}
.bbf-comparison-symbol__note {
  display: block;
  color: #4e4e4e;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.35;
}
.bbf-comparison-symbol__note--accent {
  color: #1476DB;
}
/* ==========================================================================
Featured BBF symbols
   ========================================================================== */
/*
 * All symbols in the featured BBF column use brand blue.
 */
.bbf-service-comparison__value--featured .bbf-comparison-symbol__note--accent {
  color: #1476DB;
}
/* ==========================================================================
Mobile comparison table
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-service-comparison {
    --sr-comparison-feature-width: 110px;
    --sr-comparison-value-width: 8.25rem;
    /* ------------------------------------------------------------------
        Horizontal scrolling
        ------------------------------------------------------------------ */
    /*
         * Keep normal scrollable cells underneath the two
         * sticky columns.
         */
    /* ------------------------------------------------------------------
        Sticky first column: comparison labels
        ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------
        Sticky second column: Shuttlerock BBF
        ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------
        Scrollable competitor columns
        ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------
        Header stacking
        ------------------------------------------------------------------ */
    /*
         * Opaque sticky backgrounds prevent competitor content
         * from appearing through the fixed columns.
         */
    /* ------------------------------------------------------------------
        Mobile cell sizing
        ------------------------------------------------------------------ */
  }
  .bbf-service-comparison .sr-brand-comparison__table-wrap {
    display: block;
    overflow-x: auto;
    overflow-y: visible;
    width: calc(100% + 1.5rem);
    margin-right: -1.5rem;
    padding: 0 1.5rem 0.5rem 0;
    box-sizing: border-box;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .bbf-service-comparison .sr-brand-comparison__table-stage {
    position: relative;
    width: max-content;
    min-width: 100%;
  }
  .bbf-service-comparison .sr-brand-comparison__table {
    width: auto;
    min-width: calc(110px + 8.125rem + (8.25rem * 3));
    table-layout: fixed;
  }
  .bbf-service-comparison .sr-brand-comparison__plan,
  .bbf-service-comparison .sr-brand-comparison__value {
    position: relative;
    z-index: 1;
  }
  .bbf-service-comparison .sr-brand-comparison__empty-cell,
  .bbf-service-comparison .sr-brand-comparison__feature {
    position: sticky;
    left: 0;
    z-index: 20;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
  }
  .bbf-service-comparison .sr-brand-comparison__plan--featured,
  .bbf-service-comparison .sr-brand-comparison__value--featured {
    position: sticky;
    left: 110px;
    z-index: 19;
    width: 8.125rem;
    min-width: 8.125rem;
    max-width: 8.125rem;
    box-shadow: 0.3125rem 0 0.4375rem rgba(34, 34, 34, 0.06);
  }
  .bbf-service-comparison .sr-brand-comparison__plan:not(.sr-brand-comparison__plan--featured),
  .bbf-service-comparison .sr-brand-comparison__value:not(.sr-brand-comparison__value--featured) {
    width: 8.25rem;
    min-width: 8.25rem;
    max-width: 8.25rem;
  }
  .bbf-service-comparison .bbf-service-comparison__header {
    position: relative;
    z-index: 2;
    height: 4.375rem;
    padding: 0.625rem;
    font-size: 1.1875rem;
  }
  .bbf-service-comparison .bbf-service-comparison__header--feature {
    position: sticky;
    left: 0;
    z-index: 30;
    color: #222222;
    background: #FFFFFF;
    font-size: 1rem;
    text-align: left;
  }
  .bbf-service-comparison .bbf-service-comparison__header--featured {
    position: sticky;
    left: 110px;
    z-index: 29;
    color: #FFFFFF;
    background: #1476DB;
    font-size: 1rem;
  }
  .bbf-service-comparison .sr-brand-comparison__row:nth-child(even) > .sr-brand-comparison__feature {
    background: #FFFFFF;
  }
  .bbf-service-comparison .sr-brand-comparison__row:nth-child(odd) > .sr-brand-comparison__feature {
    background: #F8F9FA;
  }
  .bbf-service-comparison .sr-brand-comparison__row > th,
  .bbf-service-comparison .sr-brand-comparison__row > td {
    height: 4.75rem;
    padding: 0.625rem;
    font-size: 0.8125rem;
  }
  .bbf-service-comparison .sr-brand-comparison__feature-title {
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .bbf-service-comparison .bbf-service-comparison__value--featured {
    font-size: 0.9375rem !important;
  }
  /*
     * Do not display the shared mobile-card version.
     */
  .bbf-service-comparison + .sr-brand-comparison-mobile,
  .bbf-service-comparison .sr-brand-comparison-mobile {
    display: none;
  }
}
/* ==========================================================================
   Instant Win case studies
   ========================================================================== */
.bbf-case-studies {
  width: 100%;
  overflow: hidden;
  background: #F8F9FA;
}
/* ==========================================================================
   Case-study carousel
   ========================================================================== */
.bbf-case-study-carousel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* ----------------------------------------------------------------------
       Carousel controls
       ---------------------------------------------------------------------- */
}
.bbf-case-study-carousel__slider {
  width: 100%;
  padding: 2rem 0;
  overflow: visible;
}
.bbf-case-study-carousel__slide {
  width: calc(100vw - 7.5rem);
  max-width: 75rem;
  height: auto;
  opacity: 0.5;
  transition: opacity 0.35s ease;
}
.bbf-case-study-carousel__slide .bbf-case-study-card {
  transform: scale(0.9);
  transform-origin: center;
  transition: transform 0.35s ease;
}
.bbf-case-study-carousel__slide.swiper-slide-prev .bbf-case-study-card {
  transform-origin: right center;
}
.bbf-case-study-carousel__slide.swiper-slide-next .bbf-case-study-card {
  transform-origin: left center;
}
.bbf-case-study-carousel__slide.swiper-slide-active {
  opacity: 1;
}
.bbf-case-study-carousel__slide.swiper-slide-active .bbf-case-study-card {
  transform: scale(1);
  transform-origin: center;
}
.bbf-case-study-carousel__more {
  padding-top: 1.5rem;
  justify-self: anchor-center;
}
.bbf-case-study-carousel__more i {
  font-size: 0.875rem;
}
.bbf-case-study-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: fit-content;
  margin: 0 auto;
}
.bbf-case-study-carousel__arrow {
  position: relative;
  inset: auto;
  z-index: 2;
  display: inline-flex !important;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  color: #1476DB;
  background: #FFFFFF;
  border: 1px solid #1476DB;
  border-radius: 50%;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  appearance: none;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.bbf-case-study-carousel__arrow:hover {
  color: #FFFFFF;
  background: #1476DB;
}
.bbf-case-study-carousel__arrow:active {
  transform: scale(0.94);
}
.bbf-case-study-carousel__arrow:focus {
  outline: none;
}
.bbf-case-study-carousel__arrow:focus-visible {
  outline: 3px solid rgba(20, 118, 219, 0.25);
  outline-offset: 3px;
}
.bbf-case-study-carousel__arrow:disabled,
.bbf-case-study-carousel__arrow.swiper-button-disabled {
  opacity: 0.35;
}
.bbf-case-study-carousel__arrow:disabled {
  cursor: not-allowed;
}
.bbf-case-study-carousel__arrow:not(.swiper-button-disabled) {
  opacity: 1;
}
.bbf-case-study-carousel__arrow.swiper-button-lock {
  display: inline-flex !important;
}
.bbf-case-study-carousel__pagination {
  position: static;
  inset: auto;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: auto !important;
  margin: 0;
  transform: none;
}
.bbf-case-study-carousel__pagination .swiper-pagination-bullet {
  display: block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 !important;
  padding: 0;
  opacity: 1;
  background: rgba(20, 118, 219, 0.22);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width 180ms ease, background-color 180ms ease;
}
.bbf-case-study-carousel__pagination .swiper-pagination-bullet:focus {
  outline: none;
}
.bbf-case-study-carousel__pagination .swiper-pagination-bullet:focus-visible {
  outline: 3px solid rgba(20, 118, 219, 0.25);
  outline-offset: 3px;
}
.bbf-case-study-carousel__pagination .swiper-pagination-bullet-active {
  width: 1.5rem;
  background: #1476DB;
  border-radius: 999px;
}
.bbf-case-study-carousel__pagination.swiper-pagination-horizontal {
  position: static;
  width: auto !important;
  transform: none;
}
/* ==========================================================================
   Case-study card
   ========================================================================== */
.bbf-case-study-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  column-gap: 2.5rem;
  width: 100%;
  min-height: 30rem;
  height: 100%;
  padding: 1.5rem 1.875rem;
  box-sizing: border-box;
  color: #222222;
  background: #FFFFFF;
  border: 0;
  border-radius: 1.375rem;
  box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
  text-decoration: none;
  /* ----------------------------------------------------------------------
       Written content
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Metrics
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Campaign information
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Divider and quote
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
   Company / case-study link
   ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Phone mockup
       ---------------------------------------------------------------------- */
}
.bbf-case-study-card:hover,
.bbf-case-study-card:focus {
  color: #222222;
  text-decoration: none;
}
.bbf-case-study-card:focus {
  outline: none;
}
.bbf-case-study-card:focus-visible {
  outline: 3px solid #1476DB;
  outline-offset: 0.25rem;
}
.bbf-case-study-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.5rem 0;
}
.bbf-case-study-card__heading {
  margin: 0;
  color: #1476DB;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-case-study-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}
.bbf-case-study-card__metric {
  min-width: 0;
}
.bbf-case-study-card__metric-value {
  display: flex;
  align-items: flex-start;
  margin: 0;
  color: #1476DB;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.bbf-case-study-card__metric-number {
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.bbf-case-study-card__metric-unit {
  align-self: flex-end;
  margin-bottom: 0.125rem;
  font-size: 2.25rem;
  line-height: 1;
}
.bbf-case-study-card__metric-suffix {
  align-self: flex-start;
  margin-top: 0.0625rem;
  margin-left: 0.125rem;
  font-size: 2.25rem;
  line-height: 1;
}
.bbf-case-study-card__metric-label {
  display: block;
  margin-top: 0.625rem;
  color: #222222;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}
.bbf-case-study-card__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 0.75rem;
  margin: 2.5rem 0 0;
  padding: 0;
}
.bbf-case-study-card__detail {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
}
.bbf-case-study-card__detail-label {
  margin: 0;
  padding: 0.3125rem 0.625rem;
  color: #6b7280;
  border: 1px solid #6b7280;
  border-radius: 0.1875rem;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.bbf-case-study-card__detail-value {
  min-width: 0;
  margin: 0;
  color: #6b7280;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
}
.bbf-case-study-card__divider {
  width: 100%;
  height: 1px;
  margin-top: 2.5rem;
  background: #ccc;
}
.bbf-case-study-card__quote {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
}
.bbf-case-study-card__quote-icon {
  display: block;
  width: 2rem;
  height: auto;
}
.bbf-case-study-card__quote-text {
  margin: 0;
  color: #222222;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
}
.bbf-case-study-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  margin-top: auto;
  padding-top: 2rem;
}
.bbf-case-study-card__company {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}
.bbf-case-study-card__company-logo {
  display: block;
  width: auto;
  max-width: 10rem;
  height: 2.1875rem;
  object-fit: contain;
  object-position: left center;
}
.bbf-case-study-card__company-information {
  min-width: 0;
}
.bbf-case-study-card__company-name {
  margin: 0;
  color: #222222;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-case-study-card__industry {
  margin: 0.25rem 0 0;
  color: #4E4E4E;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}
.bbf-case-study-card__link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  color: #1476DB;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.bbf-case-study-card__link > span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bbf-case-study-card__link i {
  position: relative;
  top: -0.125rem;
  font-size: 0.6875rem;
  text-decoration: none;
  transition: transform 180ms ease;
}
.bbf-case-study-card__visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 15rem;
  min-width: 15rem;
  height: 100%;
}
.bbf-case-study-card__mockup {
  display: block;
  width: auto;
  max-width: 100%;
  height: 20rem;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* ==========================================================================
   Small desktop
   ========================================================================== */
@media screen and (max-width: 1279px) {
  .bbf-case-study-carousel__slide {
    width: calc(100vw - 5rem);
  }
  .bbf-case-study-card {
    column-gap: 2rem;
  }
  .bbf-case-study-card__details {
    column-gap: 1.5rem;
  }
  .bbf-case-study-card__detail {
    gap: 0.75rem;
  }
  .bbf-case-study-card__visual {
    width: 12.5rem;
    min-width: 12.5rem;
  }
  .bbf-case-study-card__mockup {
    height: 27.5rem;
  }
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-case-study-carousel__slide {
    width: calc(100vw - 4rem);
    opacity: 0.6;
  }
  .bbf-case-study-carousel__slide .bbf-case-study-card {
    transform: scale(0.88);
  }
  .bbf-case-study-carousel__slide.swiper-slide-active {
    opacity: 1;
  }
  .bbf-case-study-carousel__slide.swiper-slide-active .bbf-case-study-card {
    transform: scale(1);
  }
  .bbf-case-study-carousel__more {
    width: 90%;
  }
  .bbf-case-study-card {
    grid-template-columns: minmax(0, 1fr) 11rem;
    column-gap: 1.5rem;
    min-height: 0;
  }
  .bbf-case-study-card__metrics {
    gap: 1.5rem;
  }
  .bbf-case-study-card__metric-number {
    font-size: 2.75rem;
  }
  .bbf-case-study-card__metric-unit,
  .bbf-case-study-card__metric-suffix {
    font-size: 1.875rem;
  }
  .bbf-case-study-card__details {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  .bbf-case-study-card__visual {
    width: 11rem;
    min-width: 11rem;
  }
  .bbf-case-study-card__mockup {
    height: 25rem;
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-case-study-carousel__slider {
    padding: 1.5rem 0;
  }
  .bbf-case-study-carousel__slide {
    width: calc(100vw - 2rem);
    opacity: 0.65;
  }
  .bbf-case-study-carousel__slide .bbf-case-study-card {
    transform: scale(0.96);
  }
  .bbf-case-study-carousel__slide.swiper-slide-active {
    opacity: 1;
  }
  .bbf-case-study-carousel__slide.swiper-slide-active .bbf-case-study-card {
    transform: scale(1);
  }
  .bbf-case-study-carousel__controls {
    margin-top: 0.75rem;
  }
  .bbf-case-study-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: max-content;
  }
  .bbf-case-study-card__content {
    padding: 0;
  }
  .bbf-case-study-card__metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1.25rem;
  }
  .bbf-case-study-card__metric-number {
    font-size: 2.75rem;
  }
  .bbf-case-study-card__metric-unit,
  .bbf-case-study-card__metric-suffix {
    font-size: 1.875rem;
  }
  .bbf-case-study-card__details {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
  }
  .bbf-case-study-card__detail {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 1rem;
  }
  .bbf-case-study-card__quote {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.875rem;
  }
  .bbf-case-study-card__quote-icon {
    width: 1.75rem;
  }
  .bbf-case-study-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-top: 0;
    padding-top: 2rem;
  }
  .bbf-case-study-card__company {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
  }
  .bbf-case-study-card__company-logo {
    display: block;
    width: auto;
    max-width: 7.5rem;
    height: 2.1875rem;
    object-fit: contain;
    object-position: left center;
  }
  .bbf-case-study-card__company-information {
    width: 100%;
    min-width: 0;
  }
  .bbf-case-study-card__company-name {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .bbf-case-study-card__industry {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .bbf-case-study-card__link {
    flex: 0 0 auto;
    align-self: flex-end;
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .bbf-case-study-card__link i {
    font-size: 0.625rem;
  }
  .bbf-case-study-card__visual {
    width: 100%;
    min-width: 0;
    height: auto;
    margin-top: 2.5rem;
  }
  .bbf-case-study-card__mockup {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 30.625rem;
    object-position: center bottom;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-case-study-carousel__slide,
  .bbf-case-study-carousel__arrow,
  .bbf-case-study-carousel__pagination .swiper-pagination-bullet,
  .bbf-case-study-carousel .bbf-case-study-card {
    transition: none;
  }
}
/* ==========================================================================
   BBF document download
   ========================================================================== */
.bbf-document-download-section {
  width: 100%;
}
.bbf-document-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  color: #222222;
  background: #e4effb;
  border-radius: 1.375rem;
  overflow: hidden;
  /* ----------------------------------------------------------------------
     Document content
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     Document image
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     Form column
     ---------------------------------------------------------------------- */
}
.bbf-document-download__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  padding: 2rem 0 2rem 2rem;
  box-sizing: border-box;
}
.bbf-document-download__label {
  margin: 0 0 1rem;
  color: #1476DB;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-document-download__title {
  margin: 0;
  color: #222222;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-document-download__visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  margin-top: 2rem;
}
.bbf-document-download__image {
  display: block;
  width: 100%;
  max-width: 46rem;
  height: auto;
  object-fit: contain;
}
.bbf-document-download__form-column {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.bbf-document-download__form {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-document-download {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }
  .bbf-document-download__content {
    width: 100%;
    padding: 2rem 2rem 0;
  }
  .bbf-document-download__form-column {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .bbf-document-download__image {
    max-width: 40rem;
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-document-download {
    gap: 0;
  }
  .bbf-document-download__content {
    padding: 1.5rem 1.875rem 0;
  }
  .bbf-document-download__label {
    margin-bottom: 0.75rem;
  }
  .bbf-document-download__title {
    font-size: 1.5rem;
  }
  .bbf-document-download__visual {
    margin-top: 1.5rem;
  }
  .bbf-document-download__image {
    width: 100%;
    max-width: 100%;
  }
  .bbf-document-download__form-column {
    max-width: none;
    margin-inline: 0;
  }
}
/* ==========================================================================
   BBF enterprise support
   ========================================================================== */
.bbf-enterprise-support {
  width: 100%;
  padding-bottom: 0;
  background: #F8F9FA;
}
.bbf-enterprise-support__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.25rem;
  width: 100%;
  margin-top: 3rem;
}
/* ==========================================================================
   Enterprise-support card
   ========================================================================== */
.bbf-enterprise-support-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 24.75rem;
  padding: 1.5rem 1.875rem;
  box-sizing: border-box;
  color: #222222;
  background: #FFFFFF;
  border-radius: 1.375rem;
  box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
  /* ----------------------------------------------------------------------
       X partner images
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
   Support process
   ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Security and privacy images
       ---------------------------------------------------------------------- */
}
.bbf-enterprise-support-card__content {
  min-width: 0;
}
.bbf-enterprise-support-card__title {
  margin: 0;
  color: #1476DB;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-enterprise-support-card__text {
  margin: 2.5rem 0 0;
  color: #4E4E4E;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}
.bbf-enterprise-support-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2.5rem;
  padding: 0;
}
.bbf-enterprise-support-card__caption {
  margin: 1rem 0 0;
  color: #4E4E4E;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}
.bbf-enterprise-support-card__partner-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  width: 100%;
}
.bbf-enterprise-support-card__partner-image {
  display: block;
  width: auto;
  object-fit: contain;
}
.bbf-enterprise-support-card__partner-image--authorized {
  max-width: 6.875rem;
  height: 3.3rem !important;
}
.bbf-enterprise-support-card__partner-image--official {
  max-width: 8.75rem;
  height: 3.3rem !important;
}
.bbf-enterprise-support-card__process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  /*
     * Connecting blue line.
     * Starts/ends at the centre of the first/last circles.
     */
}
.bbf-enterprise-support-card__process::before {
  position: absolute;
  top: 0.8125rem;
  right: 12.5%;
  left: 12.5%;
  z-index: 0;
  height: 0.125rem;
  background: #1476DB;
  content: "";
}
.bbf-enterprise-support-card__process-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
.bbf-enterprise-support-card__process-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: #FFFFFF;
  background: #1476DB;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}
.bbf-enterprise-support-card__process-label {
  margin-top: 0.5rem;
  color: #4E4E4E;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.bbf-enterprise-support-card__isms-image {
  width: auto;
  height: 2.8125rem !important;
  object-fit: contain;
}
.bbf-enterprise-support-card .isms-image__caption {
  display: block;
  width: 100%;
  margin-top: 5px;
  font-size: 6px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}
.bbf-enterprise-support-card__security-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 1.25rem;
}
.bbf-enterprise-support-card__security-image {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.bbf-enterprise-support-card__security-image--pmark {
  width: 2.8125rem;
}
.bbf-enterprise-support-card__security-image--soc,
.bbf-enterprise-support-card__security-image--gdpr {
  width: 2.8125rem;
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-enterprise-support__grid {
    gap: 1rem;
    margin-top: 2.5rem;
  }
  .bbf-enterprise-support-card {
    padding: 1.5rem;
  }
  .bbf-enterprise-support-card__title {
    font-size: 1.5rem;
  }
  .bbf-enterprise-support-card__text {
    margin-top: 2.5rem;
    font-size: 0.9375rem;
  }
  .bbf-enterprise-support-card__visual {
    margin-top: 2.5rem;
  }
  .bbf-enterprise-support-card__partner-images {
    gap: 1rem;
  }
  .bbf-enterprise-support-card__security-images {
    gap: 0.75rem;
  }
}
/* ==========================================================================
   Mobile horizontal scroll
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-enterprise-support__grid {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: calc(100% + 3rem);
    margin: 2rem -1.5rem 0;
    padding: 0 1.5rem 1rem;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bbf-enterprise-support__grid::-webkit-scrollbar {
    display: none;
  }
  .bbf-enterprise-support-card {
    flex: 0 0 min(85vw, 22.5rem);
    width: min(85vw, 22.5rem);
    min-height: 24.75rem;
    padding: 1.5rem 1.875rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .bbf-enterprise-support-card__title {
    font-size: 1.5rem;
  }
  .bbf-enterprise-support-card__text {
    margin-top: 2.5rem;
    font-size: 1rem;
  }
  .bbf-enterprise-support-card__visual {
    margin-top: 2.5rem;
  }
  .bbf-enterprise-support-card__isms-image {
    width: auto;
  }
}
/* ==========================================================================
   BBF service process
   ========================================================================== */
.bbf-service-process {
  width: 100%;
  background: #F8F9FA;
}
/* ==========================================================================
   Process timeline
   ========================================================================== */
.bbf-process {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  margin-top: 3rem;
  /*
     * The blue H3-style title is a button because it
     * controls the expandable content.
     */
  /*
     * Expanded content.
     */
}
.bbf-process__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.125rem minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
  width: 100%;
}
.bbf-process__item:not(:last-child)::after {
  position: absolute;
  top: 2.6875rem;
  bottom: -4.4375rem;
  left: calc(3.125rem / 2);
  z-index: 0;
  width: 1px;
  background: #1476DB;
  content: "";
  pointer-events: none;
}
.bbf-process__number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  margin-top: 1.125rem;
  box-sizing: border-box;
  color: #FFFFFF;
  background: #1476DB;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.bbf-process__card {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: auto;
  padding: 1.5rem 1.875rem;
  box-sizing: border-box;
  color: #222222;
  background: #FFFFFF;
  border: 0;
  border-radius: 1.375rem;
  box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
}
.bbf-process__heading {
  margin: 0;
}
.bbf-process__trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #1476DB;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.bbf-process__trigger:hover {
  color: #1162b6;
}
.bbf-process__trigger:focus-visible {
  outline: 3px solid rgba(20, 118, 219, 0.3);
  outline-offset: 0.25rem;
}
.bbf-process__panel {
  margin-top: 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #eaeaeb;
}
.bbf-process__panel[hidden] {
  display: none;
}
.bbf-process__subtitle {
  margin: 0;
  color: #222222;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}
.bbf-process__description {
  margin: 0.75rem 0 0;
  color: #4e4e4e;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
}
.bbf-process__note {
  margin: 0.5rem 0 0;
  color: #4e4e4e;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.6;
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-process {
    margin-top: 2.5rem;
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-process {
    margin-top: 2rem;
  }
  .bbf-process__item {
    gap: 1rem;
  }
  .bbf-process__trigger {
    font-size: 1.25rem;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-process__trigger {
    transition: none;
  }
}
/* ==========================================================================
   Shuttlerock BBF pricing
   ========================================================================== */
.bbf-pricing {
  width: 100%;
  color: #FFFFFF;
  background: #222222;
}
.bbf-pricing .sr-heading-2,
.bbf-pricing .sr-section-header__description {
  color: #FFFFFF;
}
.bbf-pricing__content {
  width: 100%;
}
.bbf-pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: 2rem;
  width: 100%;
}
.bbf-pricing__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bbf-pricing__note {
  margin: 1rem 0 0;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  text-align: right;
}
.bbf-pricing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2.5rem;
}
/* ==========================================================================
   Pricing card
   ========================================================================== */
.bbf-pricing-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 24rem;
  padding: 1.5rem 1.875rem;
  box-sizing: border-box;
  color: #222222;
  background: #FFFFFF;
  border: 0;
  border-radius: 1.375rem;
  box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
  /* ----------------------------------------------------------------------
       Pricing structure
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Description
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Feature list
       ---------------------------------------------------------------------- */
}
.bbf-pricing-card__title {
  margin: 0;
  color: #1476DB;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-pricing-card__price-structure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.bbf-pricing-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  color: #6b7280;
  background: #FFFFFF;
  border: 1px solid #6b7280;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.bbf-pricing-card__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.bbf-pricing-card__description {
  margin: 1.5rem 0 0;
  color: #4E4E4E;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}
.bbf-pricing-card__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  color: #4E4E4E;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  list-style: none;
}
.bbf-pricing-card__features--basic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}
.bbf-pricing-card__features li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding-left: 1.5rem;
}
.bbf-pricing-card__features li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #1476DB;
  font-weight: 700;
  content: "✓";
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-pricing__grid {
    gap: 1.5rem;
  }
  .bbf-pricing-card__price-structure {
    gap: 0.75rem;
  }
  .bbf-pricing-card__tag {
    padding-inline: 0.75rem;
    font-size: 1rem;
  }
  .bbf-pricing-card__features--basic {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-pricing__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .bbf-pricing__note {
    margin-top: 0.75rem;
  }
  .bbf-pricing-card {
    min-height: 0;
  }
  .bbf-pricing-card__title {
    font-size: 1.5rem;
  }
  .bbf-pricing-card__price-structure {
    flex-wrap: nowrap;
    gap: 0.75rem;
  }
  .bbf-pricing-card__tag {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }
  .bbf-pricing-card__plus {
    flex-shrink: 0;
    font-size: 1.25rem;
  }
  .bbf-pricing-card__description br {
    display: none;
  }
}
/* ==========================================================================
   BBF sticky CTA
   ========================================================================== */
.bbf-sticky-cta {
  position: fixed;
  right: 0;
  bottom: 3rem;
  z-index: 100;
  width: 12rem;
  /* Desktop scroll visibility */
  opacity: 0;
  visibility: hidden;
  transform: translateX(1rem);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  /* ----------------------------------------------------------------------
     Buttons
     ---------------------------------------------------------------------- */
}
.bbf-sticky-cta.is-scroll-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.bbf-sticky-cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.bbf-sticky-cta__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 12rem;
  min-height: 56px;
  padding: 0.75rem 1.25rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 8px 0 0 8px;
  color: #FFFFFF;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bbf-sticky-cta__button:hover {
  opacity: 0.9;
}
.bbf-sticky-cta__button:focus-visible {
  outline: 3px solid #222222;
  outline-offset: 2px;
}
.bbf-sticky-cta__button--download {
  background: #1476DB;
}
.bbf-sticky-cta__button--contact {
  background: #E91D2E;
}
.bbf-sticky-cta__arrow {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1;
}
.bbf-sticky-cta__external-icon {
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1;
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-sticky-cta {
    display: none;
  }
}
/* ==========================================================================
   BBF key visual
   ========================================================================== */
.bbf-hero {
  position: relative;
  width: 100%;
  min-height: 27.5rem;
  padding: 2rem 0;
  overflow: hidden;
  color: #FFFFFF;
  background: #222222;
  /* ----------------------------------------------------------------------
     Hero copy
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     Dashboard
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     Statistic cards
     ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
     Actions
     ---------------------------------------------------------------------- */
}
.bbf-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.92fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "content visual" "actions visual";
  align-items: stretch;
  gap: 0.75rem 1.5rem;
  min-height: 23.5rem;
}
.bbf-hero__content {
  position: relative;
  z-index: 3;
  grid-area: content;
  align-self: center;
  min-width: 0;
}
.bbf-hero__eyebrow {
  margin: 0 0 0.375rem;
  color: rgba(255, 255, 255, 0.82);
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.bbf-hero__brand {
  margin: 0 0 0.75rem;
  color: #1476DB;
  font-family: "Source Serif 4", serif;
  font-size: 2.25rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
}
.bbf-hero__brand span {
  font-size: 2rem;
}
.bbf-hero__title {
  margin: 0;
  color: #FFFFFF;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: clamp(2.375rem, 3.15vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /*
     * Keep "(Twitter)" smaller.
     */
}
.bbf-hero__title span {
  font-size: 0.6em;
}
.bbf-hero__description {
  width: 100%;
  max-width: 44.5rem;
  margin: 1.125rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}
.bbf-hero__visual {
  grid-area: visual;
  align-self: stretch;
  /*
     * On desktop, the dashboard is positioned relative
     * to .bbf-hero__inner so it can reach the viewport edge.
     */
  position: static;
  min-width: 0;
  min-height: 23.5rem;
}
.bbf-hero__dashboard {
  position: absolute;
  top: 0;
  right: calc(((100vw - 100%) / -2) - 6.875rem);
  display: block;
  width: auto;
  max-width: none;
  height: 23.4375rem;
  object-fit: contain;
  object-position: top right;
}
.bbf-hero__stats {
  position: absolute;
  right: -2rem;
  bottom: 0.125rem;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: 45rem;
  max-width: none;
}
.bbf-hero__actions {
  position: relative;
  z-index: 5;
  grid-area: actions;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.375rem;
}
.bbf-hero__actions .sr-brand-button {
  min-width: 0;
  width: 210px;
  padding-inline: 1.5rem;
  font-weight: 500;
}
/* ==========================================================================
   Hero statistic card
   ========================================================================== */
.bbf-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 5.625rem;
  padding: 0.625rem;
  color: #222222;
  background: #FFFFFF;
  border-radius: 0.375rem;
  box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
  text-align: center;
}
.bbf-hero-stat__value,
.bbf-hero-stat__label {
  margin: 0;
}
.bbf-hero-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.125rem;
  color: #1476DB;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.bbf-hero-stat__prefix,
.bbf-hero-stat__unit {
  font-size: 1rem;
  font-weight: 700;
}
.bbf-hero-stat__number {
  font-size: 2rem;
  font-weight: 700;
}
.bbf-hero-stat__label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.bbf-hero-stat__api-image {
  display: block;
  width: auto;
  max-width: 4.625rem;
  height: 2.6875rem;
  object-fit: contain;
}
/* ==========================================================================
   Laptop and tablet hero
   ========================================================================== */
@media screen and (min-width: 48rem) and (max-width: 79.9375rem) {
  .bbf-hero {
    min-height: 0;
    padding: 2rem 0;
    /*
     * At this breakpoint the dashboard is positioned
     * relative to its 40% visual column.
     */
    /*
     * Statistic cards become their own centered row.
     */
  }
  .bbf-hero__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: minmax(clamp(15rem, 30vw, 20.625rem), auto) auto auto;
    grid-template-areas: "content visual" "stats stats" "actions actions";
    align-items: stretch;
    gap: 1.25rem 1.5rem;
    min-height: 0;
  }
  .bbf-hero__content {
    align-self: center;
    max-width: none;
    padding-right: 1rem;
  }
  .bbf-hero__brand {
    font-size: 2.125rem;
  }
  .bbf-hero__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    white-space: normal;
  }
  .bbf-hero__description {
    width: 100%;
    max-width: 42.5rem;
    font-size: 0.875rem;
  }
  .bbf-hero__visual {
    position: relative;
    min-width: 0;
    min-height: clamp(15rem, 30vw, 20.625rem);
  }
  .bbf-hero__dashboard {
    position: absolute;
    top: 0;
    right: -6.875rem;
    width: auto;
    max-width: none;
    height: clamp(15rem, 30vw, 20.625rem);
  }
  .bbf-hero__stats {
    position: relative;
    right: auto;
    bottom: auto;
    grid-area: stats;
    width: min(100%, 45rem);
    max-width: 100%;
    margin: -1.25rem auto 0;
  }
  .bbf-hero__actions {
    grid-area: actions;
    justify-content: center;
    margin-top: 0;
  }
  .bbf-hero-stat {
    gap: 0.625rem;
    min-width: 0;
    min-height: 5.625rem;
    padding: 0.625rem;
  }
  .bbf-hero-stat__number {
    font-size: 1.75rem;
  }
  .bbf-hero-stat__prefix,
  .bbf-hero-stat__unit {
    font-size: 0.875rem;
  }
}
/* ==========================================================================
   Mobile hero
   ========================================================================== */
@media screen and (max-width: 47.9375rem) {
  .bbf-hero {
    min-height: 0;
    padding: 2rem 0;
  }
  .bbf-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "content" "visual" "stats" "actions";
    gap: 0;
    min-height: 0;
  }
  .bbf-hero__content {
    padding-right: 0;
  }
  .bbf-hero__eyebrow {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
  }
  .bbf-hero__brand {
    margin-bottom: 0.75rem;
    font-size: 1.625rem;
  }
  .bbf-hero__brand span {
    font-size: 1.5rem;
  }
  .bbf-hero__title {
    font-size: 1.75rem;
    line-height: 1.35;
    white-space: normal;
  }
  .bbf-hero__description {
    max-width: none;
    margin-top: 1.125rem;
    font-size: 0.875rem;
    line-height: 1.7;
  }
  .bbf-hero__visual {
    position: relative;
    grid-area: visual;
    width: 100%;
    min-height: 0;
    margin-top: 1.75rem;
  }
  .bbf-hero__dashboard {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: min(100%, 32.5rem);
    max-width: 100%;
    height: auto;
    margin-inline: auto;
  }
  .bbf-hero__stats {
    position: relative;
    right: auto;
    bottom: auto;
    grid-area: stats;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0 0;
  }
  .bbf-hero__actions {
    grid-area: actions;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.5rem;
  }
  .bbf-hero__actions .sr-brand-button {
    justify-content: center;
    width: 100%;
  }
  .bbf-hero-stat {
    gap: 0.625rem;
    min-width: 0;
    min-height: 5.625rem;
    padding: 0.625rem;
  }
  .bbf-hero-stat__number {
    font-size: 1.75rem;
  }
  .bbf-hero-stat__prefix,
  .bbf-hero-stat__unit {
    font-size: 0.875rem;
  }
  .bbf-hero-stat__label {
    font-size: 0.6875rem;
  }
}
/* ==========================================================================
   Instant Win entry methods
   ========================================================================== */
.bbf-entry-methods-section {
  background: #F8F9FA;
}
.bbf-entry-methods {
  position: relative;
  width: 100%;
  /*
     * The final visible row is partially clipped and faded
     * while more unfiltered items are available.
     */
  /* Hide while the initial "show more" state is active */
}
.bbf-entry-methods__filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  margin-bottom: 2rem;
  padding-bottom: 0.25rem;
}
.bbf-entry-methods__filter {
  width: 100%;
  min-width: 0;
  min-height: 2.0625rem;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
  color: #4E4E4E;
  background: #FFFFFF;
  border: 1px solid #6b7280;
  border-radius: 0.5rem;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.bbf-entry-methods__filter:hover,
.bbf-entry-methods__filter.is-active,
.bbf-entry-methods__filter[aria-pressed="true"] {
  color: #FFFFFF;
  background: #6b7280;
  border-color: #6b7280;
}
.bbf-entry-methods__filter:focus-visible {
  outline: 3px solid rgba(20, 118, 219, 0.3);
  outline-offset: 3px;
}
.bbf-entry-methods__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.25rem;
}
.bbf-entry-methods__grid::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 13rem;
  background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.75) 58%, #F8F9FA 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.bbf-entry-methods__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2rem;
}
.bbf-entry-methods__more[hidden] {
  display: none;
}
.bbf-entry-methods__more-button {
  min-width: 17.5rem;
}
.bbf-entry-methods.has-more-items .bbf-entry-methods__grid {
  max-height: 50rem;
  overflow: hidden;
}
.bbf-entry-methods.has-more-items .bbf-entry-methods__grid::after {
  opacity: 1;
}
.bbf-entry-methods.has-more-items .bbf-entry-methods__more {
  position: absolute;
  right: 0;
  bottom: 0.75rem;
  left: 0;
  z-index: 2;
  margin: 0;
}
.bbf-entry-methods__back-to-filters {
  display: flex;
  width: fit-content;
  margin: 2rem auto 0;
}
.bbf-entry-methods.has-more-items .bbf-entry-methods__back-to-filters {
  display: none;
}
/* ==========================================================================
   Entry-method card
   ========================================================================== */
.bbf-entry-method {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "media title" "media details" "media tags";
  column-gap: 1.5rem;
  row-gap: 1rem;
  width: 100%;
  min-width: 0;
  min-height: 26.75rem;
  height: 100%;
  padding: 1.5rem 1.875rem;
  box-sizing: border-box;
  color: #222222;
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 3px 8px rgba(34, 34, 34, 0.08);
  /* Title */
  /* Phone image */
  /* Optional format notice */
  /* Main content */
  /* Description */
  /* Conditions */
  /* Optional note */
  /* Tags */
}
.bbf-entry-method[hidden] {
  display: none;
}
.bbf-entry-method__title {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: #1476DB;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-entry-method__title-sub {
  font-size: 1.125rem;
  font-weight: inherit;
}
.bbf-entry-method__media {
  grid-area: media;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  margin: 0;
}
.bbf-entry-method__image {
  display: block;
  flex: none;
  width: auto;
  max-width: none;
  height: 26rem;
  max-height: 26rem;
  object-fit: contain;
  object-position: left bottom;
}
.bbf-entry-method__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  width: calc(26rem * 284 / 608);
  margin-top: 1rem;
  color: #1476DB;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.5;
}
.bbf-entry-method__notice-icon {
  flex: 0 0 auto;
  margin-top: 0.15em;
  font-size: 8px;
  line-height: 1.5;
}
.bbf-entry-method__notice-text {
  min-width: 0;
}
.bbf-entry-method__details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.bbf-entry-method__description {
  min-width: 0;
  margin: 0;
  color: #4E4E4E;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
}
.bbf-entry-method__conditions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
}
.bbf-entry-method__condition {
  display: grid;
  grid-template-columns: 5.125rem minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-width: 0;
}
.bbf-entry-method__condition-title {
  margin: 0;
  color: #404040;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.7;
}
.bbf-entry-method__condition-content {
  min-width: 0;
  margin: 0;
}
.bbf-entry-method__condition-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #4E4E4E;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  list-style: none;
}
.bbf-entry-method__condition-list li {
  position: relative;
  margin: 0;
  padding-left: 1.25rem;
}
.bbf-entry-method__condition-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #1476DB;
  font-weight: 700;
  content: "✓";
}
.bbf-entry-method__note {
  margin: 0.25rem 0 0;
  color: #4E4E4E;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
}
.bbf-entry-method__tags {
  grid-area: tags;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem 0.875rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
}
.bbf-entry-method__tags li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
/* ==========================================================================
   Small desktop
   ========================================================================== */
@media screen and (max-width: 1279px) {
  .bbf-entry-method {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.25rem;
    min-height: 26.75rem;
  }
  .bbf-entry-method__media {
    width: max-content;
    height: 26rem;
    min-height: 26rem;
  }
  .bbf-entry-method__condition {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem;
  }
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-entry-methods__filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    padding-bottom: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bbf-entry-methods__filters::-webkit-scrollbar {
    display: none;
  }
  .bbf-entry-methods__filter {
    flex: 0 0 auto;
    width: auto;
    min-width: 10rem;
    scroll-snap-align: start;
  }
  .bbf-entry-methods__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bbf-entry-methods.has-more-items .bbf-entry-methods__grid {
    max-height: 48rem;
  }
  .bbf-entry-method {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .bbf-entry-method__media {
    width: max-content;
    height: 26rem;
    min-height: 26rem;
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-entry-methods__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .bbf-entry-methods__filter {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    white-space: normal;
  }
  .bbf-entry-methods__grid {
    gap: 1rem;
  }
  .bbf-entry-methods__grid::after {
    height: 10rem;
  }
  .bbf-entry-methods__more-button {
    width: 100%;
    min-width: 0;
  }
  .bbf-entry-methods.has-more-items .bbf-entry-methods__grid {
    max-height: 90rem;
  }
  .bbf-entry-methods.has-more-items .bbf-entry-methods__more {
    right: 1.5rem;
    bottom: 0.5rem;
    left: 1.5rem;
    width: auto;
  }
  .bbf-entry-methods__back-to-filters {
    width: 100%;
  }
  .bbf-entry-method {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "title" "media" "details" "tags";
    row-gap: 1.25rem;
    min-height: 0;
    padding: 1.5rem;
  }
  .bbf-entry-method__title {
    font-size: 1.1875rem;
  }
  .bbf-entry-method__media {
    align-self: auto;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .bbf-entry-method__image {
    width: auto;
    max-width: 100%;
    height: 18rem;
    max-height: 18rem;
    object-position: center bottom;
  }
  .bbf-entry-method__notice {
    width: 100%;
    max-width: 16rem;
  }
  .bbf-entry-method__details {
    gap: 1.25rem;
  }
  .bbf-entry-method__description {
    font-size: 0.8125rem;
    line-height: 1.7;
  }
  .bbf-entry-method__conditions {
    gap: 0.75rem;
  }
  .bbf-entry-method__condition {
    display: block;
  }
  .bbf-entry-method__condition-title {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
  }
  .bbf-entry-method__condition-list {
    gap: 0.25rem;
    font-size: 0.8125rem;
  }
  .bbf-entry-method__condition-list li {
    padding-left: 1.0625rem;
  }
  .bbf-entry-method__note {
    font-size: 0.625rem;
  }
  .bbf-entry-method__tags {
    gap: 0.3125rem 0.75rem;
    font-size: 0.6875rem;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-entry-methods__filter,
  .bbf-entry-methods__grid::after {
    transition: none;
  }
}
/* ==========================================================================
   Instant-win functions section
   ========================================================================== */
.bbf-features {
  width: 100%;
  color: #FFFFFF;
  background: #e4effb;
}
.sr-heading-2 {
  color: #222222;
}
/* ==========================================================================
   Filters and grid
   ========================================================================== */
.bbf-functions {
  position: relative;
  width: 100%;
  /*
     * Five equal-width filters.
     *
     * At a content width of 1336px:
     * 5 × 240px + 4 × 34px = 1336px
     *
     * At smaller widths, the filters remain equal and
     * shrink together.
     */
}
.bbf-functions__filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  max-width: 83.5rem;
  margin: 2rem auto;
  padding: 0;
}
.bbf-functions__filter {
  width: 100%;
  min-width: 0;
  min-height: 2.0625rem;
  padding: 0.25rem 0.75rem;
  box-sizing: border-box;
  color: #4E4E4E;
  background: #FFFFFF;
  border: 1px solid #6b7280;
  border-radius: 0.5rem;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.bbf-functions__filter:hover,
.bbf-functions__filter.is-active,
.bbf-functions__filter[aria-pressed="true"] {
  color: #FFFFFF;
  background: #6b7280;
  border-color: #FFFFFF;
}
.bbf-functions__filter:focus-visible {
  color: #FFFFFF;
  background: #6b7280;
  border-color: #FFFFFF;
  outline: 2px solid #1476DB;
  outline-offset: 3px;
}
.bbf-functions__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.bbf-functions__grid::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 6.5rem;
  background: linear-gradient(to bottom, rgba(228, 239, 251, 0) 0%, rgba(228, 239, 251, 0.75) 58%, #e4effb 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.bbf-functions__note {
  position: relative;
  z-index: 2;
  margin: 1.5rem 0 0;
  color: #4E4E4E;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  text-align: right;
}
.bbf-functions__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
}
.bbf-functions__more[hidden] {
  display: none;
}
.bbf-functions.has-more-items .bbf-functions__grid {
  max-height: 30rem;
  overflow: hidden;
}
.bbf-functions.has-more-items .bbf-functions__grid::after {
  opacity: 1;
}
.bbf-functions.has-more-items .bbf-functions__note {
  display: none;
}
.bbf-functions.has-more-items .bbf-functions__more {
  position: absolute;
  right: 0;
  bottom: 0.75rem;
  left: 0;
  z-index: 2;
  margin: 0;
}
.bbf-functions.has-more-items .bbf-functions__back-to-filters {
  display: none;
}
.bbf-functions__back-to-filters {
  display: none;
}
/* ==========================================================================
   Function card
   ========================================================================== */
.bbf-function-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.5rem;
  min-width: 0;
  min-height: 9.375rem;
  padding: 1.5rem 1.875rem;
  box-sizing: border-box;
  color: #222222;
  background: #FFFFFF;
  border-radius: 1.375rem;
  /*
     * Smaller text for:
     * シーケンス（宝くじ番号）
     */
}
.bbf-function-card[hidden] {
  display: none;
}
.bbf-function-card__title {
  margin: 0;
  color: #1476DB;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
}
.bbf-function-card__title-note {
  font-size: 0.65em;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}
.bbf-function-card__description {
  margin: 0;
  color: #4E4E4E;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
}
/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-functions {
    /*
         * Keep all five filters equal on tablet.
         */
    /*
         * Two columns.
         * data-tablet-limit="6" creates three initial rows.
         */
  }
  .bbf-functions__filters {
    margin: 1.75rem 0;
  }
  .bbf-functions__filter {
    padding: 0.25rem 0.5rem;
    font-size: 0.9375rem;
  }
  .bbf-functions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bbf-function-card {
    padding: 1.5rem;
  }
}
/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-functions__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    max-width: none;
    margin: 1.5rem 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .bbf-functions__filter {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    white-space: normal;
  }
  .bbf-functions__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bbf-functions__grid::after {
    height: 5rem;
  }
  .bbf-functions__note {
    margin-top: 1.25rem;
    text-align: left;
  }
  .bbf-functions__more {
    margin-top: 1.25rem;
  }
  .bbf-functions__more-button {
    justify-content: center;
    width: 100%;
    min-width: 0;
  }
  .bbf-functions.has-more-items .bbf-functions__grid {
    max-height: 30rem;
  }
  .bbf-functions.has-more-items .bbf-functions__more {
    right: 1rem;
    bottom: 0;
    left: 1rem;
    width: auto;
  }
  .bbf-functions.has-more-items .bbf-functions__back-to-filters {
    display: none;
  }
  .bbf-functions__back-to-filters {
    display: flex;
    width: 100%;
    margin: 2rem auto 0;
  }
  .bbf-function-card {
    gap: 2rem;
  }
  .bbf-function-card__title {
    font-size: 1.25rem;
  }
}
/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bbf-functions__filter,
  .bbf-functions__grid::after {
    transition: none;
  }
}
/* ==========================================================================
   Campaign method cards: smaller desktop
   ========================================================================== */
@media screen and (min-width: 64rem) and (max-width: 87.4375rem) {
  .bbf-campaign-method-card {
    padding: 1.5rem 1.25rem;
  }
  .bbf-campaign-method-card__title {
    font-size: 1.125rem;
  }
  .bbf-campaign-method-card__description {
    font-size: 0.875rem;
  }
}
/* ==========================================================================
   Recommended campaign combinations
   ========================================================================== */
.bbf-recommendations {
  margin-top: 2rem;
}
.bbf-recommendations__header {
  margin-bottom: 2rem;
}
.bbf-recommendations__title {
  margin: 0;
  padding-top: 2rem;
  color: #222222;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-recommendations__description {
  max-width: 100%;
  margin: 0.75rem 0 0;
  color: #4E4E4E;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}
.bbf-recommendations__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.25rem;
}
.bbf-recommendations__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  min-width: 0;
  padding: 1.5rem 1.875rem;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 2px solid #1476DB;
  border-radius: 1.375rem;
}
.bbf-recommendations__card-title {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  color: #1476DB;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
}
.bbf-recommendations__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin: 0;
  padding: 0;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
}
.bbf-recommendations__service {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  /*
         * Add ＋ between tags.
         */
}
.bbf-recommendations__service:not(:last-child)::after {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}
.bbf-recommendations__service-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  color: #6b7280;
  border: 1px solid #6b7280;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.bbf-recommendations__text {
  margin: 0;
  color: #4E4E4E;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
}
/* ==========================================================================
   Recommendations: tablet
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .bbf-recommendations__card {
    padding: 1.25rem;
  }
  .bbf-recommendations__card-title {
    align-items: flex-start;
    font-size: 1.25rem;
  }
  .bbf-recommendations__services {
    gap: 0.5rem 0.75rem;
  }
  .bbf-recommendations__service {
    gap: 0.75rem;
  }
}
/* ==========================================================================
   Recommendations: mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .bbf-recommendations {
    margin-top: 2.5rem;
  }
  .bbf-recommendations__header {
    margin-bottom: 1.5rem;
  }
  .bbf-recommendations__title {
    font-size: 1.5rem;
  }
  .bbf-recommendations__description {
    margin-top: 0.625rem;
    font-size: 0.875rem;
  }
  .bbf-recommendations__grid {
    display: flex;
    gap: 1rem;
    width: calc(100% + 3rem);
    margin-inline: -1.5rem;
    padding: 0 1.5rem 1rem;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bbf-recommendations__grid::-webkit-scrollbar {
    display: none;
  }
  .bbf-recommendations__card {
    flex: 0 0 min(85vw, 21.25rem);
    width: min(85vw, 21.25rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .bbf-recommendations__icon {
    align-self: center;
  }
  .bbf-recommendations__services {
    gap: 0.5rem 0.625rem;
  }
  .bbf-recommendations__service {
    gap: 0.625rem;
  }
  .bbf-recommendations__service:not(:last-child)::after {
    font-size: 0.75rem;
  }
  .bbf-recommendations__service-label {
    min-height: 1.625rem;
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
  }
}
/* ==========================================================================
   Horizontal scroll indicator
   ========================================================================== */
.sr-horizontal-scroll {
  position: relative;
  width: 100%;
  min-width: 0;
  /*
     * Hidden by default.
     * Desktop does not need the indicator.
     */
}
.sr-horizontal-scroll__indicator,
.sr-horizontal-scroll__progress {
  display: none;
}
.sr-horizontal-scroll__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #1476DB;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.sr-horizontal-scroll__arrow {
  color: #1476DB;
  font-size: 1rem;
  line-height: 1;
}
.sr-horizontal-scroll__track {
  position: relative;
  display: block;
  width: 100%;
  height: 0.375rem;
  overflow: hidden;
  background: rgba(20, 118, 219, 0.2);
  border-radius: 999px;
}
.sr-horizontal-scroll__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  min-width: 2.5rem;
  background: #1476DB;
  border-radius: inherit;
  transition: left 0.1s linear, width 0.1s linear;
}
/* ==========================================================================
   Horizontal scroll indicator: tablet and mobile
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .sr-horizontal-scroll {
    /*
         * JavaScript adds .is-scrollable only when the content
         * is wider than its viewport.
         */
  }
  .sr-horizontal-scroll.is-scrollable .sr-horizontal-scroll__indicator {
    display: flex;
  }
  .sr-horizontal-scroll.is-scrollable .sr-horizontal-scroll__progress {
    display: block;
  }
  .sr-horizontal-scroll__indicator {
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 0.75rem;
  }
  .sr-horizontal-scroll__progress {
    width: 100%;
    margin-top: 0.75rem;
  }
  /*
     * Hide the browser scrollbar because the custom progress
     * indicator is displayed beneath the table.
     */
  .sr-horizontal-scroll [data-horizontal-scroll-viewport] {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sr-horizontal-scroll [data-horizontal-scroll-viewport]::-webkit-scrollbar {
    display: none;
  }
}
/* ==========================================================================
   Horizontal scroll indicator: reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sr-horizontal-scroll__thumb {
    transition: none;
  }
}
/* ==========================================================================
   Support visual carousel
   ========================================================================== */
.bbf-support-visual-carousel {
  width: 223px;
  max-width: 100%;
  margin: 0 auto;
  /* ==========================================================================
   Support visual carousel: mobile
   ========================================================================== */
  /* ----------------------------------------------------------------------
       Case-study link
       ---------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------
       Controls
       ---------------------------------------------------------------------- */
}
.bbf-support-visual-carousel__slider {
  width: 100%;
  overflow: hidden;
}
.bbf-support-visual-carousel__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
}
.bbf-support-visual-carousel__image {
  display: block;
  width: 14rem;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .bbf-support-visual-carousel .bbf-support-visual-carousel {
    width: 10.1875rem;
  }
  .bbf-support-visual-carousel .bbf-support-visual-carousel__image {
    width: 10.1875rem;
    height: 21.875rem;
    object-fit: contain;
  }
}
.bbf-support-visual-carousel__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  color: #1476DB;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 180ms ease;
}
.bbf-support-visual-carousel__link span {
  text-decoration: underline;
}
.bbf-support-visual-carousel__link:hover {
  color: #1476DB;
  opacity: 0.7;
}
.bbf-support-visual-carousel__link:focus {
  outline: none;
}
.bbf-support-visual-carousel__link:focus-visible {
  outline: 3px solid rgba(20, 118, 219, 0.25);
  outline-offset: 0.25rem;
}
.bbf-support-visual-carousel__link i {
  font-size: 0.75rem;
  text-decoration: none;
}
.bbf-support-visual-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: fit-content;
  margin: 0.75rem auto 0;
}
.bbf-support-visual-carousel__arrow {
  position: relative;
  inset: auto;
  z-index: 2;
  display: inline-flex !important;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  color: #1476DB;
  background: #FFFFFF;
  border: 1px solid #1476DB;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  appearance: none;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.bbf-support-visual-carousel__arrow:hover {
  color: #FFFFFF;
  background: #1476DB;
}
.bbf-support-visual-carousel__arrow:active {
  transform: scale(0.94);
}
.bbf-support-visual-carousel__arrow:focus {
  outline: none;
}
.bbf-support-visual-carousel__arrow:focus-visible {
  outline: 3px solid rgba(20, 118, 219, 0.25);
  outline-offset: 3px;
}
.bbf-support-visual-carousel__arrow:disabled,
.bbf-support-visual-carousel__arrow.swiper-button-disabled {
  opacity: 0.35;
}
.bbf-support-visual-carousel__arrow:disabled {
  cursor: not-allowed;
}
.bbf-support-visual-carousel__arrow:not(.swiper-button-disabled) {
  opacity: 1;
}
.bbf-support-visual-carousel__arrow.swiper-button-lock {
  display: inline-flex !important;
}
.bbf-support-visual-carousel__pagination {
  position: static;
  inset: auto;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: auto !important;
  margin: 0;
  transform: none;
}
.bbf-support-visual-carousel__pagination .swiper-pagination-bullet {
  display: block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 !important;
  padding: 0;
  opacity: 1;
  background: rgba(20, 118, 219, 0.22);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width 180ms ease, background-color 180ms ease;
}
.bbf-support-visual-carousel__pagination .swiper-pagination-bullet:focus {
  outline: none;
}
.bbf-support-visual-carousel__pagination .swiper-pagination-bullet:focus-visible {
  outline: 3px solid rgba(20, 118, 219, 0.25);
  outline-offset: 3px;
}
.bbf-support-visual-carousel__pagination .swiper-pagination-bullet-active {
  width: 1.5rem;
  background: #1476DB;
  border-radius: 999px;
}
.bbf-support-visual-carousel__pagination.swiper-pagination-horizontal {
  position: static;
  width: auto !important;
  transform: none;
}
/* ==========================================================================
   Shared BBF carousel pagination
   ========================================================================== */
.bbf-carousel-pagination {
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: auto !important;
  margin: 0;
  transform: none;
}
.bbf-carousel-pagination .swiper-pagination-bullet {
  display: block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 !important;
  padding: 0;
  opacity: 1;
  background: rgba(20, 118, 219, 0.22);
  border: 0;
  border-radius: 50%;
  transition: width 180ms ease, background-color 180ms ease;
}
.bbf-carousel-pagination .swiper-pagination-bullet-active {
  width: 1.5rem;
  background: #1476DB;
  border-radius: 999px;
}
.bbf-carousel-pagination.swiper-pagination-horizontal {
  position: static;
  width: auto !important;
  transform: none;
}
/* ==========================================================================
   Shared mobile autoplay Swiper
   ========================================================================== */
.bbf-mobile-autoscroll__pagination {
  display: none;
}
@media screen and (max-width: 767px) {
  .bbf-mobile-autoscroll {
    gap: 0;
    overflow-x: hidden;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
    overscroll-behavior-inline: auto;
    /* Make all cards in each row the same height. */
  }
  .bbf-mobile-autoscroll .swiper-wrapper {
    align-items: stretch;
  }
  .bbf-mobile-autoscroll .swiper-slide {
    height: auto;
  }
  .bbf-mobile-autoscroll__pagination {
    display: flex;
    margin-top: 1rem;
  }
}
/* ==========================================================================
   Shared break points
   ========================================================================== */
/* ==========================================================================
   Responsive line breaks
   ========================================================================== */
.bbf-pc-break {
  display: inline;
}
.bbf-mobile-break {
  display: none;
}
@media screen and (max-width: 767px) {
  .bbf-pc-break {
    display: none;
  }
  .bbf-mobile-break {
    display: inline;
  }
}