/* ------------------------- BUTTON + TAG THEMES -------------------------  */
[data-wf--button-theme--variant="coral"]{ background-color: var(--color-coral); }
[data-wf--button-theme--variant="purple"]{ background-color: var(--color-purple); }
[data-wf--button-theme--variant="neutral-200"]{ background-color: var(--color-neutral-200); }
[data-wf--button-theme--variant="neutral-300"]{ background-color: var(--color-neutral-300); }
[data-wf--button-theme--variant="neutral-525"]{ background-color: var(--color-neutral-525); }
[data-wf--button-theme--variant="neutral-600"]{ background-color: var(--color-neutral-600); }
[data-wf--button-theme--variant="neutral-800"]{ background-color: var(--color-neutral-800); }
[data-wf--button-theme--variant="dark-10"]{ background-color: color-mix(in srgb,var(--color-neutral-800) 10%,transparent)}
[data-wf--button-theme--variant="light-10"]{ background-color: color-mix(in srgb,var(--color-neutral-200) 10%,transparent)}
[data-wf--button-theme--variant="dark-outline"]{ background-color: transparent; }
[data-wf--button-theme--variant="light-outline"]{ background-color: transparent; }

[data-theme]:has([data-wf--button-theme--variant="coral"]),
[data-theme]:has([data-wf--button-theme--variant="purple"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-525"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-600"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-800"]),
[data-theme]:has([data-wf--button-theme--variant="light-10"]){
  color: var(--color-neutral-200);
}

[data-theme]:has( [data-wf--button-theme--variant="electric"]),
[data-theme]:has( [data-wf--button-theme--variant="neutral-200"]),
[data-theme]:has( [data-wf--button-theme--variant="neutral-300"]),
[data-theme]:has( [data-wf--button-theme--variant="dark-10"]){
  color: var(--color-neutral-800);
}

[data-theme]:has( [data-wf--button-theme--variant="light-outline"]){
  color: var(--color-neutral-200);
  border: 0.0625em solid currentColor;
}

[data-theme]:has( [data-wf--button-theme--variant="dark-outline"]){
  color: var(--color-neutral-800);
  border: 0.0625em solid currentColor;
}

/* ------------------------- PADDING HERO ------------------------------------------- */

[data-wf--padding-hero--variant="nav"] {
  height: var(--nav-bar-height);
}

[data-wf--padding-hero--variant="nav-medium"] {
  height: calc(var(--nav-bar-height) + max(5em, 15svh));
}

[data-wf--padding-hero--variant="nav-large"] {
  height: calc(var(--nav-bar-height) + max(6.666em, 20svh));
}

[data-wf--padding-hero--variant="nav-xl"] {
  height: calc(var(--nav-bar-height) + max(8.333em, 25svh));
}

/* ------------------------- UNDER NAV BAR ------------------------------------------- */

[data-wf--under-nav-bar--variant="purple"] .nav-marquee,
[data-wf--under-nav-bar--variant="purple"] .nav-product-info__end .tag-bg{
  background-color: var(--color-purple);
}

[data-wf--under-nav-bar--variant="coral"] .nav-marquee,
[data-wf--under-nav-bar--variant="coral"] .nav-product-info__end .tag-bg{
  background-color: var(--color-coral);
}

[data-wf--under-nav-bar--variant="purple"] .nav-marquee,
[data-wf--under-nav-bar--variant="purple"] .nav-product-info__end .tag,
[data-wf--under-nav-bar--variant="coral"] .nav-marquee,
[data-wf--under-nav-bar--variant="coral"] .nav-product-info__end .tag{
  color: var(--color-light);
}


/* ------------------------- PRICING CARDS ------------------------------------------- */

[data-wf--pricing-card-member--variant="dark"],
[data-wf--pricing-card-team--variant="dark"]{
  background-color: var(--color-neutral-800) !important;
  color: var(--color-neutral-200) !important;
}

[data-wf--pricing-card-member--variant="dark"] .pricing-benefit,
[data-wf--pricing-card-team--variant="dark"] .pricing-benefit{
 border-color: color-mix(in srgb,var(--color-neutral-200)20%,transparent);  
}


/* ------------------------- DEFAULT HERO ------------------------------------------- */

[data-wf--default-hero--variant="gap-50"] .default-hero__content{
  gap: 3.75em;
}

[data-wf--default-hero--variant="gap-80"] .default-hero__content{
  gap: 5em;
}

[data-wf--default-hero-title--variant="xl"] h1{
  font-size: 7em;
}

[data-wf--default-hero-title--variant="l"] h1{
  font-size: 5em;
}

@media screen and (max-width: 767px){
  
  [data-wf--default-hero-title--variant="xl"] h1{
    font-size: 4em;
  }  
  
  [data-wf--default-hero-title--variant="l"] h1{
    font-size: 4em;
  }    
  
}

@media screen and (max-width: 479px){
  
  [data-wf--default-hero-title--variant="l"] h1{
    font-size: 3.5em;
  } 
  
}




/* ------------------------- HERO BG LINES ------------------------------------------- */

[data-wf--hero-background-lines--variant="dark-mode"]{
  color: var(--color-neutral-600);
}


/* ------------------------- HERO SCRIBBLE ------------------------------------------- */

[data-wf--default-hero-scribble--variant="coral"]{
  color: var(--color-coral);
}

[data-wf--default-hero-scribble--variant="purple"]{
  color: var(--color-purple);
}


/* ------------------------- Profile Picture ------------------------------------------- */

[data-wf--profile-picture--variant="medium"] {
  width: 1.875em;
  height: 1.875em;
}


/* ------------------------- Webcam float ------------------------------------------- */

[data-wf--webcam-wrap--variant="electric"] .webcam__video{
  outline-color: var(--color-electric);
}

/* ------------------------- Icon overview -------------------------------------------------- */

[data-wf--icon-overview-card--variant="light"]{
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-800);
}

[data-wf--icon-overview-card--variant="light"] .icon-overview__card-overlay{
  background: linear-gradient(
    180deg,
    rgba(244, 244, 244, 0) 0%,
    rgba(244, 244, 244, 1) 100%
  );
}


/* ------------------------- Section title ------------------------------------------- */

[data-wf--section-intro-title--variant="medium"] {
  max-width: 43.75em;
}


/* ------------------------- SQUARE CARD ------------------------------------------- */

[data-wf--square-cta-card--variant="dark-square"],
[data-wf--square-cta-card--variant="dark-round"]{
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
}

[data-wf--square-cta-card--variant="dark-round"],
[data-wf--square-cta-card--variant="electric-round"]{
  border-radius: 100em;
}



/* ------------------------- LIFETIME TABLE ------------------------------------------- */

[data-wf--lifetime-table-row--variant="not-included"] span{
  opacity: 0.5;
}