/* BMH-SECTIONS v1 — the home page dressed like the app: deep night background, every section its own colour, logos on lit white 3D tiles */
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3){background:
  radial-gradient(900px 520px at 8% 0%,rgba(124,92,255,.22),transparent 60%),
  radial-gradient(800px 520px at 100% 30%,rgba(34,211,238,.14),transparent 60%),
  radial-gradient(900px 600px at 30% 100%,rgba(255,79,216,.10),transparent 60%),
  linear-gradient(180deg,#0b1020,#070a16)!important;padding-bottom:30px}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3)>section[data-bmhx="ad"]{background:transparent!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3)>section.bmhx-pan{position:relative;isolation:isolate;overflow:hidden;
  margin:18px auto!important;max-width:min(1240px,calc(100% - 24px));border-radius:30px!important;
  background:linear-gradient(140deg,var(--x1),var(--x2) 75%)!important;
  border:1px solid color-mix(in srgb,var(--xa) 30%,transparent)!important;
  box-shadow:0 30px 60px -36px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08) inset!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3)>section.bmhx-pan::before{content:attr(data-xi);position:absolute;right:-20px;top:-46px;font-size:220px;line-height:1;opacity:.07;z-index:-1;pointer-events:none;filter:grayscale(.2)}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3)>section.bmhx-pan::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 200px at 0% 0%,color-mix(in srgb,var(--xa) 18%,transparent),transparent 70%)}
/* titles and "see all" */
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-social-title,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-section-title,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan h2,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan h3{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-social-title::before,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-section-title::before{background:var(--xa)!important;box-shadow:0 0 12px var(--xa)}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan p,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-section-sub{color:rgba(255,255,255,.75)!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan a[class*="see"],.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan a[class*="more"],.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan a[class*="all"]{color:var(--xa)!important;border-color:color-mix(in srgb,var(--xa) 50%,transparent)!important;background:rgba(255,255,255,.06)!important}
/* logo tiles: white, lit, a little 3D */
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-social-card,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-popular-media-card,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-category-source-card{
  background:linear-gradient(170deg,#ffffff,#f1f4fb)!important;border:1px solid rgba(255,255,255,.85)!important;border-radius:18px!important;
  box-shadow:0 14px 26px -14px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--xa) 20%,transparent)!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s!important;transform:perspective(800px) translateZ(0)}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-social-card:hover,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-popular-media-card:hover,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3) .bmhx-pan .bmh-category-source-card:hover{
  transform:perspective(800px) translateY(-4px) rotateX(4deg)!important;box-shadow:0 22px 34px -14px rgba(0,0,0,.85),0 0 0 2px var(--xa),0 0 26px -6px var(--xa)!important}
@media (max-width:700px){.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3)>section.bmhx-pan{border-radius:24px!important;max-width:calc(100% - 16px)}.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3)>section.bmhx-pan::before{font-size:150px}}

/* the live strip above the sections and the page behind it go dark too (the white header stays) */
body:has(.bmh-home.bmhx),main.page:has(>.bmh-home.bmhx){background:#0b1020!important}
main.page:has(>.bmh-home.bmhx)>div:not(.bmh-home) :is(span,div,small,p,a,h2,h3,b,strong):not(.bmhw-hero *):not(.bmhw-hero){color:#e8ecf8}

/* BMH-SECTIONS-NOLINE: no thin white frames or long lines (sections, ads, title lines) + readable tile names */
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4)>section.bmhx-pan,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4)>section.bmh-ad-hero,.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4)>section[data-bmhx]{border:0!important;outline:0!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4)>section.bmhx-pan{box-shadow:0 30px 60px -36px rgba(0,0,0,.9)!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4)>section.bmh-ad-hero{box-shadow:none!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4) a.bmh-ad-card{border:0!important;outline:0!important;box-shadow:0 22px 44px -22px rgba(2,6,23,.75)!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4) a.bmh-ad-card em{border:0!important}
a.bmh-ad-card.bmhfx:not(#bx1):not(#bx2):not(#bx3)::after{display:none!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4) .bmhx-pan :is(.bmh-section-head,.bmh-social-head,header,.bmh-section-header),.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4)>div .bmhd .bmh-social-head{border-bottom:0!important}
main.page:has(>.bmh-home.bmhx) .bmh-container{border-bottom:0!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4) .bmhx-pan :is(.bmh-social-card,.bmh-popular-media-card,.bmh-category-source-card) :is(h2,h3,h4,p,span,small){color:#1f2937!important;text-shadow:none!important}
.bmh-home.bmhx:not(#bx1):not(#bx2):not(#bx3):not(#bx4)>div .bmhd .bmh-social-title{color:#fff!important}

/* BMH-GAP-DARK: no light strip between the header and the live TV block */
html body:has(.bmh-home.bmhx):not(#bk1):not(#bk2):not(#bk3):not(#bk4):not(#bk5){background:#0b1020!important}