/* Bright marketing artwork, 2026-10-21. Scoped to marketing project banners. */
html body .marketing-banner-light.project-banner {background:#f5f5f5!important}
html body .marketing-banner-light.project-banner .project-banner__copy {background:none!important}
html body .marketing-banner-light.project-banner [data-r="cs-hero-gradient"] {display:none!important}
html body .marketing-banner-light.project-banner :is(.project-banner__label,.project-banner__title,.project-banner__subtitle,[data-r="cs-brandline"],[data-r="wh-brandline"],[data-r="herocred"],.ty-hero,.ty-hero span,.project-tags li) {color:#111!important;text-shadow:none!important}
html body .marketing-banner-light.project-banner .project-tags li {border-color:rgba(17,17,17,.25)!important;background:transparent!important}
.hero-carousel__slide[href^="marketing/"] {background:#f5f5f5!important;color:#111!important}
.hero-carousel__slide[href^="marketing/"]::after {background:linear-gradient(90deg,rgba(248,248,248,.98),rgba(248,248,248,.9) 30%,transparent 65%),linear-gradient(0deg,rgba(248,248,248,.95),transparent 25%)!important}
.hero-carousel__slide[href^="marketing/"] .hero-carousel__kind {color:#111!important}
.avatar-hero--carousel:has(.hero-carousel__slide.is-active[href^="marketing/"]) :is(.avatar-hero__title,.avatar-hero__description,.avatar-hero__description p,.avatar-hero__brand) {color:#111!important}
.avatar-hero--carousel:has(.hero-carousel__slide.is-active[href^="marketing/"]) .hero-carousel__dot::before {background:rgba(17,17,17,.45)!important}
.avatar-hero--carousel:has(.hero-carousel__slide.is-active[href^="marketing/"]) .hero-carousel__toggle {color:#111!important}

/* Override legacy per-page hero copy rules at all breakpoints. */
html.site-typography body section.marketing-banner-light.project-banner.project-banner :is(p,h1,h1 span,[data-r="cs-brandline"],[data-r="wh-brandline"],.project-banner__label,.project-banner__subtitle,.project-tags li){color:#111!important;text-shadow:none!important}

html.site-typography body section.marketing-banner-light.project-banner.project-banner.project-banner {background:#f5f5f5!important}
html.site-typography body section.marketing-banner-light.project-banner .project-banner__responsive {background:#f5f5f5!important;--banner-fill:#f5f5f5!important}
html.site-typography body section.marketing-banner-light.project-banner .project-banner__responsive::after {background:none!important}

@media(max-width:767px){
 .hero-carousel__slide[href^="marketing/"]::after {background:linear-gradient(180deg,#f6f6f6 0%,rgba(246,246,246,.9) 24%,transparent 43%,transparent 80%,#f6f6f6 100%)!important}
}

/* Rabbit Tape: requested tablet-only copy and tag wrapping. */
.rabbit-tablet-break {display:none}
@media(min-width:768px) and (max-width:1199px){
 html body .project-banner:has(.rabbit-tablet-break) .rabbit-tablet-break {display:block}
 html body .project-banner:has(.rabbit-tablet-break) .project-banner__copy .project-tags {display:grid!important;grid-template-columns:max-content max-content!important;justify-content:start!important}
 html body .project-banner:has(.rabbit-tablet-break) .project-banner__copy .project-tags li:last-child {grid-column:1 / -1;width:fit-content}
}

/* Sales: tablet-only subtitle and final tag wrapping. */
.sales-tablet-break {display:none}
@media(min-width:768px) and (max-width:1199px){
 html body .project-banner:has(.sales-tablet-break) .sales-tablet-break {display:block}
 html body .project-banner:has(.sales-tablet-break) .project-banner__copy .project-tags {display:grid!important;grid-template-columns:max-content max-content!important;justify-content:start!important}
 html body .project-banner:has(.sales-tablet-break) .project-banner__copy .project-tags li:last-child {grid-column:1 / -1;width:fit-content}
}

/* Product Launch: tablet-only subtitle and final tag wrapping. */
.launch-tablet-break {display:none}
@media(min-width:768px) and (max-width:1199px){
 html body .project-banner:has(.launch-tablet-break) .launch-tablet-break {display:block}
 html body .project-banner:has(.launch-tablet-break) .project-banner__copy .project-tags {display:grid!important;grid-template-columns:max-content max-content!important;justify-content:start!important}
 html body .project-banner:has(.launch-tablet-break) .project-banner__copy .project-tags li:last-child {grid-column:1 / -1;width:fit-content}
}

/* Black Friday: tablet-only subtitle and final tag wrapping. */
.bf-tablet-break {display:none}
@media(min-width:768px) and (max-width:1199px){
 html body .project-banner:has(.bf-tablet-break) .bf-tablet-break {display:block}
 html body .project-banner:has(.bf-tablet-break) .project-banner__copy .project-tags {display:grid!important;grid-template-columns:max-content max-content!important;justify-content:start!important}
 html body .project-banner:has(.bf-tablet-break) .project-banner__copy .project-tags li:last-child {grid-column:1 / -1;width:fit-content}
}

/* GUI Refresh: tablet-only subtitle and final tag wrapping. */
.gui-tablet-break {display:none}
@media(min-width:768px) and (max-width:1199px){
 html body .project-banner:has(.gui-tablet-break) .gui-tablet-break {display:block}
 html body .project-banner:has(.gui-tablet-break) .project-banner__copy .project-tags {display:grid!important;grid-template-columns:max-content max-content!important;justify-content:start!important}
 html body .project-banner:has(.gui-tablet-break) .project-banner__copy .project-tags li:last-child {grid-column:1 / -1;width:fit-content}
}

/* William Hill: requested three-line tablet subtitle and two tag rows. */
.wh-tablet-break {display:none}
@media(min-width:768px) and (max-width:1199px){
 html body .project-banner:has(.wh-tablet-break) .wh-tablet-break {display:block}
 html body .project-banner:has(.wh-tablet-break) .project-banner__subtitle-full {white-space:nowrap}
 html body .project-banner:has(.wh-tablet-break) .project-banner__copy .project-tags {display:grid!important;grid-template-columns:max-content max-content!important;justify-content:start!important}
 html body .project-banner:has(.wh-tablet-break) .project-banner__copy .project-tags li:last-child {grid-column:1 / -1;width:fit-content}
}

/* Mobile marketing banners: trim 5% from the upper image area only.
   Existing text, spacing, picture dimensions and bottom anchoring stay unchanged. */
@media(max-width:767px){
 html.site-typography.marketing-case body section.marketing-banner-light.project-banner.project-banner.project-banner.project-banner {
  height:calc(121.125vw + 60.8px)!important;
 }
}

@media(max-width:767px){
 html body .project-banner__title .launch-title-first {display:block;white-space:nowrap}
}

/* Four requested mobile heroes: another 5% off the current height, top only. */
@media(max-width:767px){
 html.site-typography.marketing-case body section.marketing-banner-light.project-banner.project-banner.project-banner.project-banner:has(.project-banner__image:is([src*="rabbit-tape-tablet-20261021"],[src*="gui-refresh-tablet-20261021"],[src*="william-hill-tablet-20261021"],[src*="etoro-tablet-20261021"])) {
  height:calc(115.06875vw + 57.76px)!important;
 }
 /* A soft upper wash behind the copy, fading out before the lower artwork. */
 html body section.marketing-banner-light.project-banner .project-banner__responsive::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:52%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.32) 48%,rgba(255,255,255,0) 100%);
 }
}

/* Rabbit Tape: two-line title on desktop only. */
@media(min-width:1200px){
 html body section.marketing-banner-light.project-banner:has(.rabbit-tablet-break) br[data-r="desktop-title-break"] {display:block!important}
}

.launch-desktop-break {display:none}
@media(min-width:1200px){
 html body section.marketing-banner-light.project-banner [data-r="cs-herotext"] .ty-hero .launch-desktop-break {display:block!important}
}

.wh-desktop-break {display:none}
@media(min-width:1200px){
 html body section.marketing-banner-light.project-banner [data-r="wh-herotext"] .wh-desktop-break {display:block!important}
 html body section.marketing-banner-light.project-banner [data-r="wh-herotext"] [data-r="herocred"] {white-space:nowrap}
}

@media(min-width:1200px){
 html body section.marketing-banner-light.project-banner [data-r="cs-herotext"] [data-r="herocred"] .launch-desktop-break {display:block!important}
}

.bf-desktop-break {display:none}
@media(min-width:1200px){
 html body section.marketing-banner-light.project-banner [data-r="cs-herotext"] [data-r="herocred"] .bf-desktop-break {display:block!important}
}

/* Desktop carousel: a softer wash behind the copy, clear of the artwork. */
@media(min-width:1200px){
 .hero-carousel__slide[href^="marketing/"]::after {background:linear-gradient(90deg,rgba(248,248,248,.72) 0%,rgba(248,248,248,.32) 30%,transparent 44%)!important}
}

/* Desktop product slides: a gentler copy-side shade, clear of the UI artwork. */
@media(min-width:1200px){
 .hero-carousel__slide:not([href^="marketing/"])::after {
  background:linear-gradient(90deg,rgba(4,9,28,.68) 0%,rgba(4,9,28,.35) 26%,transparent 44%)!important;
 }
}