:host {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 22 22%27 fill=%27none%27%3E%3Cpath d=%27M10.6445 0C16.5234 0 21.2898 4.76568 21.29 10.6445C21.29 16.5236 16.5236 21.29 10.6445 21.29C4.76568 21.2898 0 16.5234 0 10.6445C0.000253564 4.76583 4.76583 0.000253569 10.6445 0ZM9.43359 6.1709C9.10584 5.8433 8.57391 5.84339 8.24609 6.1709C7.91826 6.49873 7.91827 7.03153 8.24609 7.35938L11.8496 10.9629L8.24805 14.5664C7.92059 14.8941 7.92067 15.4261 8.24805 15.7539C8.57589 16.0817 9.10868 16.0817 9.43652 15.7539L13.6328 11.5576L13.6299 11.5557C13.9576 11.2278 13.9577 10.695 13.6299 10.3672L9.43359 6.1709Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%274%27 y1=%2712%27 x2=%2720%27 y2=%2712%27/%3E%3Cpolyline points=%2714 6 20 12 14 18%27/%3E%3C/svg%3E");
  --arrow-left:  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%2720%27 y1=%2712%27 x2=%274%27 y2=%2712%27/%3E%3Cpolyline points=%2710 6 4 12 10 18%27/%3E%3C/svg%3E");
  --arrow-down:  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235C6F54%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  --terracottaAccent: #C06A45;
  --brown: #5A231B;
  --green: #01562b;
  --olive: #667038;
  --accentColor: var(--green);
 /* Spacing */
  --spacingExtraSmall: 6px;
  --spacingSmall: 12px;
  --spacingMedium: 24px;
  --spacingSemilarge: 32px;
  --spacingLarge: 48px;
  --spacingExtraLarge: 80px;
  --spacingDoubleExtraLarge: 150px;

 /* border-radius */
 --borderRadiusSmall: 16px;

 /* border */
 --borderColorDefault: #EBE4D4;
 --borderDefault: 1px solid var(--borderColorDefault);
}
body{
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-weight: normal;
}
.text-medium{
    letter-spacing: -0.01em;
    font-size: 1.125rem;
    line-height: 1.25;
}

button{
  appearance: none;
  border: unset;
  padding: unset;
  background: unset;
}
.button{
    display: inline-flex;
    gap: 1.25rem;
    background-color: rgb(201, 111, 74);
    color: rgb(255, 248, 242);
    text-align: center;
    text-transform: uppercase;
    text-wrap: pretty;
    border-radius: 100px;
    border: 2px solid transparent;
    justify-content: center;
    align-items: center;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 900;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform 200ms ease-out;
}
.button:hover{
    background-color: transparent;
    border-color: rgb(201, 111, 74);
    color: rgb(201, 111, 74);
    transform: translateY(-2px);
}
.is-pale-yellow{
    background-color: var(--_primitives---colors--pale-yellow);
    color: var(--_primitives---colors--chocolate);
}

.icon-arrow-cta:after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor; /* mask = the paint comes from here */
  -webkit-mask-image: var(--icon-arrow);
          mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}


@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeSlideLeftOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }

h2{
  font-family: var(--_typography---font-styles--heading);
  font-size: 3rem;
  line-height: 1.1;
  font-weight: normal;
  margin-top: var(--spacingSmall);
  margin-bottom: var(--spacingMedium);
}

h3{
    font-family: var(--_typography---font-styles--heading);
    font-size: 28px;
    line-height: 33.6px;
    font-weight: normal;
    margin-top: var(--spacingSmall);
    margin-bottom: var(--spacingMedium);
}

.card-defaults{
  background: #FFFDF8;
  border: var(--borderDefault);
  border-radius: var(--borderRadiusSmall);
  box-shadow: 0 1px 2px rgba(38,51,43,.06), 0 18px 40px -28px rgba(38,51,43,.35);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
  text-decoration: none;
  width: 100%;
  padding: unset;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.card-defaults h3{
    margin: unset;
}
.card-defaults:hover .icon-next:after{
    transform: translateX(10px);
}
.card-defaults__description{
    font-size: 15px;
    line-height: 1.6;
    color: #5C6A5F;
}
.card-defaults__tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EEF3EA;
    border: 1px solid #D7E2CF;
    border-radius: 99px;
    padding: 7px 15px;
    margin-top: 32px;
    font-size: 14px;
    font-weight: 600;
    color: #34503F;
}
.card-defaults:hover{
  box-shadow: 0 2px 4px rgba(38,51,43,.08), 0 24px 48px -24px rgba(38,51,43,.4);
  transform: translateY(-2px);
}
.eyebrow{
    font-family: "Swiss 721 Bt", Arial, sans-serif;
    font-size: 16px;
    letter-spacing: .64px;
    font-weight: 700;
    color: var(--intro-eyebrow-color, rgb(201, 111, 74));
    margin-bottom: 12px;
    text-transform: uppercase;
}

.icon-prev, .icon-next{
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}
.icon-prev::before {
  width: 24px;
  height: 24px;
  content:'';
  background-color: currentColor; /* arrow takes button text color */
  -webkit-mask: var(--arrow-left) center / contain no-repeat;
          mask: var(--arrow-left) center / contain no-repeat;
}
.icon-next::after {
  width: 24px;
  height: 24px;
  content:'';
  background-color: currentColor;
  -webkit-mask: var(--arrow-right) center / contain no-repeat;
  mask: var(--arrow-right) center / contain no-repeat;
  transition: .3s ease;
}
.primary-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: rgb(201, 111, 74);
  color: rgb(255, 248, 242);
  text-align: center;
  text-transform: uppercase;
  text-wrap: pretty;
  font-weight: 900;
  font-size: .875rem;
  padding: .75rem 1.5rem;
  border-radius: 100px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform 200ms ease-out;
}
.primary-button:hover{
  background: transparent;
  border-color: rgb(201, 111, 74);
  color: rgb(201, 111, 74);
  transform: translateY(-2px);
}

.tab-button{ 
  display: inline-flex;
  background: rgba(247, 244, 236, 0.4);
  color: #5A231B;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 36px;
  border-radius: 50px;
  text-decoration: none;
  border: 1px solid rgba(107, 43, 34, 0.35);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.tab-button:hover, .tab-button--active{
    background: #5A231B;  
    border: 1px solid rgba(107, 43, 34, 0.35);
    color: #F7F4EC;
}
.content-block {
    display: flex;
    justify-content: center;
    padding-bottom: var(--spacingLarge);
}

.content-block__inner {
    max-width: 720px;
    text-align: center;
}

.content-block--left-align {
    justify-content: flex-start;
}

.content-block--left-align .content-block__inner {
    text-align: left;
}

.content-block__header {
    font-size: 48px;
    line-height: 52.8px;
    font-family: var(--_typography---font-styles--heading);
    color: var(--intro-header-color, #26332B);
    margin-top: 16px;
    margin-bottom: 20px;
    font-weight: normal;
}

.content-block__subheader {
    margin-top: unset;
    font-size: 18px;
    line-height: 1.6;
    color: var(--intro-subheader-color, #5C6A5F);
}

.content-block:has(.button) .content-block__subheader {
    margin-bottom: var(--spacingSemilarge);
}
.pricing-form{
    --background-color: var(--color-scheme-1--background);
    padding: var(--spacingExtraLarge) 0;
    background: var(--background-color);
    color: var(--accent-color, #26332B);
}

.pricing-form--green{
    --background-color: var(--green);
    --accent-color: var(--_primitives---colors--ice-blue);
}
.pricing-form--blue{
    --background-color: #96bcd1;
    --accent-color: #6f312f;
}
.pricing-form--yellow{
    --background-color: var(--_primitives---colors--pale-yellow);
    --accent-color: var(--_primitives---colors--chocolate);
}
.pricing-form .content-block__header, .pricing-form .content-block__subheader, .pricing-form .eyebrow{
    color: var(--accent-colorl);
}
.pricing-form__results--content-per-hour, .pricing-form__form-header{
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: unset;
    font-family: var(--_typography---font-styles--body);
    font-size: 1.5rem;
    font-weight: bold;
}
.pricing-form__inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacingLarge);
    max-width: 1217px;
    margin: 0 auto;
    padding: 0 4.5rem;
}
.pricing-form__intro .content-block__subheader{
    font-family: var(--_typography---font-styles--heading);
    font-size: 1.25rem;
    max-width: 400px;
    white-space: pre-line;
}
.pricing-form__header{
    margin-top: unset;
    max-width: 400px;
    white-space: pre-line;
}
.pricing-form__panel{
    display: grid;
    padding: 2.5rem;
    border: .0625rem solid var(--accent-color, #26332B);
    gap: var(--spacingMedium);
}
.pricing-form__form-header{
    margin: unset;
    font-family: var(--_typography---font-styles--body);
    font-size: 1.5rem;
}
.pricing-form__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pricing-form__results--content{ 
    gap: 16px;
    display: grid;
}
.pricing-form__results--content-amount{
    font-size: 5.5rem;
    line-height: .8;
}
.pricing-form__list-item{
    display: flex;
    align-items: flex-start;
    gap: var(--spacingSmall);
    font-size: 14px;
    line-height: 1.7;
}
.pricing-form__list-item::before{
    content: '✓';
}
.pricing-form__field-row{
    display: flex;
    background: #FFF;
    border-radius: 50px;
    gap: var(--spacingSmall);
    padding: 6px;
    padding-left: 32px;
}
.pricing-form__field-row:has(.pricing-form__input--error){
    outline: 2px solid #C0392B;
}
.pricing-form__input--error-code{
    color: #C0392B;
    font-size: 13px;
}
.pricing-form__input{
    background: none;
    border: none;
    outline: none;
    background: #FFF;
    flex: 1;
    font-size: 16px;
}
.pricing-form__submit{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    font-size: .875rem;
    padding: 0 1.75rem;
    border-radius: 50px;
    padding: 10px 24px;
    font-size: 14px;
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform 200ms ease-out;
}
.pricing-form__submit:hover{
    background: none;
    border-color: var(--submit-text);
    color: var(--submit-text);
}

.pricing-form__results{
    display: grid;
    gap: var(--spacingMedium);
    animation: fadeSlideDown 300ms ease-out;
}
.pricing-form__results--error{
    font-size: 15px;
    line-height: 1.5;
}
.pricing-form__results--columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacingMedium);
}
.pricing-form__results--columns > * + *{
    border-left: solid 1px var(--accent-color);
    padding-left: var(--spacingMedium);
}
@media(max-width: 991px){
    .pricing-form__inner{
        grid-template-columns: 1fr;
        padding-left: 5%;
        padding-right: 5%;
    }
}

.pricing-form__input:-webkit-autofill,
.pricing-form__input:-webkit-autofill:hover,
.pricing-form__input:-webkit-autofill:focus,
.pricing-form__input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000000 !important;
    caret-color: #000000;
    transition: background-color 5000s ease-in-out 0s;
}