:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #ff6a3e;
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Outfit", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}
.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1260 {
    padding: var(--sectionPadding);
    /* clips svg graphic from overflowing the section */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px, changes to 20px at large desktop */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-1260 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 40.1875rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #pricing-1260 .cs-text {
    margin-bottom: 1rem;
  }
  #pricing-1260 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1260 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    overflow: hidden;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-1260 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #pricing-1260 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-1260 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #pricing-1260 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 1.5rem 1.5rem;
    background-color: #fff;
    border: 1px solid #dad9e3;
    border-radius: 1.5rem 0 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-item.cs-popular {
    background-color: #14142b;
    border-radius: 0 0 1.5rem 0;
    border: none;
  }
  #pricing-1260 .cs-item.cs-popular .cs-popular-tag {
    display: inline-flex;
  }
  #pricing-1260 .cs-item.cs-popular .cs-package,
  #pricing-1260 .cs-item.cs-popular .cs-price,
  #pricing-1260 .cs-item.cs-popular .cs-duration,
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-li {
    color: var(--bodyTextColorWhite);
  }
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-li {
    opacity: 0.8;
  }
  #pricing-1260 .cs-item.cs-popular .cs-icon {
    filter: none;
    opacity: 1;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border: none;
    transition: color 0.3s;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:before {
    background-color: #fff;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:hover {
    color: var(--primary);
  }
  #pricing-1260 .cs-popular-tag {
    font-size: 0.875rem;
    line-height: 1.2em;
    text-align: center;
    width: auto;
    margin: 0;
    padding: 0.25rem 0.75rem;
    box-sizing: border-box;
    color: #ff9b7d;
    overflow: hidden;
    border-radius: 0.25rem;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* same as cs-item padding top */
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
  }
  #pricing-1260 .cs-popular-tag:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.16;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #pricing-1260 .cs-picture {
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #pricing-1260 .cs-picture:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #pricing-1260 .cs-package {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
  #pricing-1260 .cs-price {
    font-size: 2.4375rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 900;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-duration {
    font-size: 0.875rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--headerColor);
  }
  #pricing-1260 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 2rem;
    color: var(--bodyTextColor);
  }
  #pricing-1260 .cs-ul {
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-1260 .cs-li.cs-disabled .cs-icon {
    filter: grayscale(1) brightness(300%);
  }
  #pricing-1260 .cs-icon {
    width: 1.5rem;
    height: auto;
    filter: grayscale(1);
    opacity: 0.5;
    display: block;
  }
  #pricing-1260 .button-solid {
    width: 100%;
  }
  #pricing-1260 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--primary);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  }
  #pricing-1260 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #pricing-1260 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }
  #pricing-1260 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #pricing-1260 .cs-waves-wrapper {
    width: 100vw;
    height: 60%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #pricing-1260 .cs-waves-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1260 .cs-container {
    max-width: 80rem;
    /* remove the position so the svg waves wrapper can be positioned relative to the section container for tablet so it hugs the right edge of the screen. We set it back to relative at 1024px so it can then be positioned relative to the container again so it hugs the right edge of the container with the pricing cards */
    position: initial;
  }
  #pricing-1260 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #pricing-1260 .cs-item {
    width: 50%;
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1260 .cs-item.cs-popular {
    border-radius: 0 1.5rem 1.5rem 0;
  }
  #pricing-1260 .cs-waves-wrapper {
    /* changes to 740px at large desktop */
    width: 55vw;
    height: 100%;
    left: auto;
    right: 0;
    bottom: auto;
    top: 0;
    transform: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1260 .cs-container {
    max-width: 80rem;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-waves-wrapper {
    height: 140%;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #pricing-1260 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.25rem;
  }
  #pricing-1260 .cs-card-group {
    width: 62%;
    max-width: 46.25rem;
  }
  #pricing-1260 .cs-waves-wrapper {
    max-width: 46.25rem;
    width: 100%;
  }
}