body.bs-pl h1,
body.bs-pl h2 {
  -webkit-text-fill-color: currentColor;
  color: #FCFCFC;
  opacity: 1;
  visibility: visible;
}

body.bs-pl {
  margin: 0;
  min-height: 100vh;
  background: #101319;
  color: #FCFCFC;
  
  font-family: "Mulish", Sans-serif;
}


body.bs-pl::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70vw 70vw at 82% -8%, rgba(186, 32, 63, .55), transparent 60%),
    radial-gradient(58vw 58vw at 2% 12%, rgba(58, 92, 178, .42), transparent 58%),
    radial-gradient(48vw 48vw at 60% 108%, rgba(140, 40, 110, .34), transparent 60%);
}

.bs-pl-wrap {
  position: relative; z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 20px 72px;
}

.bs-pl-logo { display: inline-block; margin-bottom: 56px; }
.bs-pl-logo img { display: block; height: 28px; width: auto; }

.bs-pl-head { margin-bottom: 56px; max-width: 720px; }
.bs-pl-head h1 {
  margin: 0 0 14px;
  font-family: "Poppins", Sans-serif;
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 500; line-height: 1.2; letter-spacing: 1.4px;
}
.bs-pl-head p {
  margin: 0;
  font-family: "Mulish", Sans-serif;
  font-size: 16px; line-height: 24px; color: #FCFCFCCC;
}


.bs-pl-usp {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 0; padding: 0;
}
.bs-pl-usp li {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: 13px; color: rgba(252, 252, 252, .82);
}

.bs-pl-devices { margin-bottom: 52px; }
.bs-pl-devices h2,
.bs-pl-form h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  font-family: "Poppins", Sans-serif;
  font-size: 20px; font-weight: 500; letter-spacing: 1.4px;
}

.bs-pl-devices h2 i,
.bs-pl-form h2 i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  font-style: normal; font-size: 14px; color: rgba(252, 252, 252, .8);
}


.bs-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
@media (min-width: 900px) {
  .bs-pl-grid { grid-template-columns: repeat(3, 1fr); }
}


.bs-pl-tile {
  position: relative;
  display: flex; flex-direction: column;
  padding: 10px 10px 0;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.bs-pl-tile:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .42);
  transform: translateY(-3px);
}


.bs-pl-tile img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain;
  background: none;
}
.bs-pl-tile span {
  display: flex; align-items: center; min-height: 56px;
  padding: 0 4px;
  font-family: "Mulish", Sans-serif;
  font-size: 16px; line-height: 24px; color: #FCFCFC;
}


.bs-pl-tile input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.bs-pl-tile:has(input:checked) {
  background: rgba(186, 32, 63, .26);
  border-color: #BA203F;
}
.bs-pl-tile:has(input:focus-visible) {
  outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px;
}

.bs-pl-tile::after {
  content: ''; position: absolute; top: 18px; right: 18px;
  width: 22px; height: 22px; border-radius: 7px;
  background: rgba(16, 19, 25, .32);
  border: 1px solid rgba(255, 255, 255, .7);
  transition: background .2s ease, border-color .2s ease;
}
.bs-pl-tile:has(input:checked)::after {
  background: #BA203F; border-color: #BA203F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}

.bs-pl-form form.bs-lead-form { max-width: 660px; margin: 0 auto; }
.bs-pl-form h2 { justify-content: center; }

.bs-pl-foot {
  margin-top: 56px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13px; color: rgba(252, 252, 252, .55);
}
.bs-pl-foot a { color: rgba(252, 252, 252, .8); }

@media (max-width: 600px) {
  .bs-pl-wrap { padding: 24px 16px 56px; }
  .bs-pl-logo { margin-bottom: 36px; }
  .bs-pl-head { margin-bottom: 40px; }
  .bs-pl-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bs-pl-tile { padding: 8px 8px 0; border-radius: 14px; }
  .bs-pl-tile span { min-height: 48px; font-size: 13px; }
  .bs-pl-tile::after { top: 14px; right: 14px; width: 18px; height: 18px; }
}