body#axle-refer {
    
  --prim: #d1bfa7;
  --dark: #101213;
  
  --bg: var(--dark);

  --bg-img-height: 90vh;
  --bg-img-pos: top;

  --body-pad: 5vh 2rem;  

  --content-width: min(80rem,93%);

  --font-main: "Montserrat", sans-serif;    
  --heading-font: 'Prompt',sans-serif;  
  --heading-weight: 600;  
  --heading-color: var(--prim);
  --heading-line-height: 1;
  --h1: min(9vw, 2.8rem);
  --h2: min(8vw, 2.5rem); 
  --h3: min(6vw, 2rem);

  --btn-radius: .1em;
  --btn-text: black;  
  --btn-text-hover: black;  
  
  --alert-success-text: black;

  --day-selected-text: black;

}

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  font-size: 90%;
  align-items: center;
  a {
    text-decoration: underline;
  }
  input[type="checkbox"] {
    all: unset;
    appearance: none;
    height: 18px;
    width: 18px;
    background-color: rgba(255,255,255,.25);    
    display: flex;
    align-items: center;
    justify-content: center;
    &:checked {
      background: var(--prim);
      &:before {
        content: '✔';
        color: black;
        font-weight: bold;
        font-size: 90%;        
      }
    }
    &.error {
      outline: 1px solid var(--error-color);
    }
  }
  &:has(.error) {
    color: tomato;
    a {
      color: inherit;
    }
  }
}


body:before { 
  background: url(bg.jpg) top center no-repeat;
  background-size: cover;
  z-index: -2; 
  display: none !important;
}





.btn-lg {
  font-size: 1.2rem !important;
}

p:empty {
  display: none !important;
}

.offer-text {  
  text-wrap: pretty;
  max-width: 85ch;
  line-height: 1.3;
  margin-top: 2vh;
  h1 + p {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  h1 {
    text-transform: uppercase;
  }
  strong {
    color: var(--prim);
    font-size: 115%;
  }
}

.packages {
  display: grid;  
  @media (min-width: 600px) {
    grid-template-columns: repeat(3,1fr);
  }
  gap: 2rem;
  grid-template-rows: 1fr;  
}

.bottom {
  text-wrap: pretty;
  font-size: 90%;
}

.package {
  padding: 2rem;
  background: #444;
  text-align: left;
  display: flex;
  flex-direction: column;  
  line-height: 1.5;
  position: relative;
  &.featured {
    outline: 2px solid white;
    &:before {
      content: 'Most Popular';
      background: white;
      color: black;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 0.75rem;
      position: absolute;
      top: 0;
      right: 0;
      padding: 0.25em 0.75em;
      border-bottom-left-radius: .25rem;
    }
  }
  gap: 1rem;
  .package-heading {    
    font-weight: bold;
    font-size: 125%;
    text-transform: uppercase;
    text-wrap: pretty;    
  }
  .package-cta {
    margin-top: auto;
  }
  .package-text {
    font-size: 80%;
    text-wrap: pretty;
    
  }  
}




main {
  min-height: 100vh;
  justify-content: center;
  gap: 2rem;
}
main > * {
  margin-bottom: 0 !important;
}

.logo {
  margin-top: auto;  
}

.bottom {
  margin-top: auto;
}

.form-wrapper {
  margin-top: 3rem;
}



fieldset[name=payment] .fields {
  grid-template-columns: repeat(3,1fr);
  .form-group:first-child {
    grid-column: 1/-1;
  }
  @media (width > 700px) {
    grid-template-columns: 3.3fr 1fr 1fr 1fr; 
    .form-group:first-child {
      grid-column: unset;
    }
  }
}