/* SKILX brand X motif
 * Uses the standalone vector form traced from the approved SKILX X reference.
 * The silhouette is true SVG geometry, so it stays sharp at every display size.
 */

.skx-hero::after,
.skx-course-cover::after,
.skx-skill-card::before,
.skx-cta::after,
.skx-info-hero::after,
.skx-account-auth-story::after,
.skx-signup-story::after{
  content:""!important;
  display:block!important;
  width:auto;
  height:auto;
  aspect-ratio:3 / 2;
  background-image:url('/wp-content/themes/skilx/assets/skilx-x-mark.svg')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  color:transparent!important;
  font-size:0!important;
  font-weight:400!important;
  letter-spacing:0!important;
  filter:none!important;
  transform:none;
  pointer-events:none!important;
}

/* Main marketing hero: crisp but restrained brand watermark. */
.skx-hero::after{
  width:min(38vw,520px)!important;
  right:-2vw!important;
  top:1vw!important;
  opacity:.14!important;
}

/* Resource artwork: the same mark at a smaller, more graphic scale. */
.skx-course-cover::after{
  width:150px!important;
  right:-18px!important;
  bottom:-22px!important;
  top:auto!important;
  opacity:.22!important;
}

/* Skill cards: clear corner signature rather than a generic letterform. */
.skx-skill-card::before{
  width:126px!important;
  right:-8px!important;
  top:-14px!important;
  bottom:auto!important;
  opacity:.14!important;
}

/* Closing CTA: broad watermark that echoes the hero. */
.skx-cta::after{
  width:min(32vw,410px)!important;
  right:-28px!important;
  top:-54px!important;
  bottom:auto!important;
  opacity:.15!important;
}

/* Editorial, legal and support page heroes. */
.skx-info-hero::after{
  width:min(43vw,610px)!important;
  right:-1.5vw!important;
  top:-2vw!important;
  bottom:auto!important;
  opacity:.14!important;
}

/* Account and signup storytelling panels. */
.skx-account-auth-story::after{
  width:min(41vw,530px)!important;
  right:-4vw!important;
  top:8%!important;
  bottom:auto!important;
  opacity:.13!important;
}

.skx-signup-story::after{
  width:min(38vw,500px)!important;
  right:-3vw!important;
  bottom:-6vw!important;
  top:auto!important;
  opacity:.12!important;
}

@media(max-width:900px){
  .skx-hero::after{width:min(54vw,440px)!important;right:-12vw!important;top:4vw!important}
  .skx-info-hero::after{width:min(58vw,490px)!important;right:-15vw!important;top:0!important}
  .skx-account-auth-story::after,.skx-signup-story::after{width:min(60vw,450px)!important;right:-15vw!important}
}

@media(max-width:560px){
  .skx-hero::after{width:72vw!important;right:-27vw!important;top:12vw!important;opacity:.11!important}
  .skx-info-hero::after{width:72vw!important;right:-27vw!important;top:7vw!important;opacity:.11!important}
  .skx-course-cover::after{width:124px!important}
  .skx-skill-card::before{width:108px!important}
  .skx-cta::after{width:240px!important;right:-76px!important;top:-16px!important}
  .skx-account-auth-story::after,.skx-signup-story::after{width:76vw!important;right:-29vw!important;opacity:.10!important}
}