* {
  padding: 0;
  box-sizing: border-box !important;
  text-decoration: none !important;
  /* list-style: disc !important; */
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0 !important;
}

.pilot-program-section {
  background: var(--color-neavy-blue);
  padding: 100px 20px;

  @media (max-width: 768px) {
    padding: 80px 20px;
  }

  @media (max-width: 576px) {
    padding: 60px 20px;
  }

  .pilot-program-container {
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 40px;

    @media (max-width: 768px) {
      flex-direction: column;
      max-width: 600px;
      gap: 50px;
    }

    .content-wrapper {
      max-width: 601px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      @media (max-width: 768px) {
        max-width: none;
      }

      .badge {
        padding: 0;
        font-size: var(--text-lg);
        font-weight: 400;
        color: var(--color-off-white);
        display: flex;
        align-items: center;
        gap: 10px;
        height: 27px;
        width: 100%;

        @media (max-width: 576px) {
          font-size: 12px !important;
          height: 18px;
        }

        span {
          background: var(--color-off-white);
          width: 40px;
          height: 1px;
        }
      }

      .heading {
        font-size: var(--text-6xl);
        line-height: 110%;
        color: var(--color-off-white);
        margin-top: 20px;

        @media (max-width: 423.99px) {
          margin-top: 10px;
          max-width: 320px;
          margin-right: auto;
        }

        span {
          font-weight: 500;
        }
      }

      .paragraph {
        font-size: var(--text-lg);
        color: var(--color-off-white);
        opacity: 0.7;
        margin-top: 16px;

        @media (max-width: 576px) {
          font-size: 14px !important;
        }
      }

      img {
        max-width: 452px;
        width: 100%;
        margin-top: 33px;

        @media (max-width: 576px) {
          margin-top: 60px;
        }

        @media (max-width: 1024px) {
          max-width: 372px;
        }
      }
    }

    .limited-pilot-spots-wrapper {
      max-width: 467px;
      min-width: 400px;
      width: 100%;
      padding: 24px 24px 20px 24px;
      background: #fcfcfc;
      box-shadow: 8px 8px 108.9px 0px #fcfcfc40;
      border-radius: 12px;

      @media (max-width: 768px) {
        max-width: none;
        min-width: 0 !important;
      }

      .limited-badge {
        font-weight: 600;
        font-size: var(--text-xl);
        color: var(--color-neavy-blue);
        padding: 7px 23px;
        border: 1px solid var(--color-neavy-blue);
        max-width: max-content;
        border-radius: 35px;
        @media (max-width: 576px) {
          font-size: 16px !important;
        }
      }

      .heading {
        font-size: var(--text-5xl);
        color: var(--color-neavy-blue);
        line-height: 125%;
        font-weight: 300;
        margin-top: 24px;

        span {
          font-size: 40px !important;
          font-weight: 700;

          @media (max-width: 992px) {
            font-size: 36px !important;
          }

          @media (max-width: 992px) {
            font-size: 32px !important;
          }
        }

        @media (max-width: 576px) {
          margin-top: 20px;
          line-height: 120%;
        }
      }

      .paragraph {
        font-size: var(--text-lg);
        color: #010101b2;
        line-height: 150%;
        margin-top: 16px;
      }

      .tag-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 32px;
        padding-bottom: 33px;

        @media (max-width: 575.98px) {
          padding-top: 24px;
          padding-bottom: 24px;
        }

        .tag {
          display: flex;
          gap: 8px;

          svg {
            margin-top: 3.5px;
            min-width: 20px;

            @media (max-width: 576px) {
              margin-top: 0.5px;
            }
          }

          p {
            font-size: var(--text-lg);
            color: #010101b2;
            line-height: 150%;

            @media (max-width: 576px) {
              font-size: 14px !important;
            }
          }
        }
      }

      .apply-button {
        padding: 15px 31px;
        border: 1px solid #68df1b;
        font-family: "Geologica", sans-serif !important;
        background: #68df1b;
        border-radius: 100px;
        font-weight: 600;
        font-size: 16px;
        color: #010101;
        line-height: 110%;
        transition: all 0.3s linear;
        text-align: center;
        width: 100%;

        &:hover {
          background: #ffffff;
        }
      }
    }
  }
}

.faq-section {
  padding: 120px 20px;
  position: relative;
  /* overflow: clip; */

  @media (max-width: 768px) {
    padding: 100px 20px;
  }

  @media (max-width: 576px) {
    padding: 60px 20px;
  }

  .faq-container {
    max-width: 1015px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .badge {
      padding: 0;
      font-size: var(--text-lg);
      font-weight: 400;
      color: var(--color-neavy-blue);
      display: flex;
      align-items: center;
      gap: 10px;
      height: 27px;

      @media (max-width: 576px) {
        font-size: 12px !important;
        height: 18px;
      }

      span {
        background: var(--color-neavy-blue);
        width: 40px;
        height: 1px;
      }
    }

    .heading {
      font-size: var(--text-6xl);
      line-height: 110%;
      color: var(--color-neavy-blue);
      margin-top: 20px;
      text-align: center;

      @media (max-width: 576px) {
        margin-top: 10px;
      }

      span {
        font-weight: 500;
      }
    }

    .faq-wrapper {
      display: flex;
      gap: 20px;
      flex-direction: column;
      margin-top: 60px;
      width: 100%;

      .faq {
        border: 1px solid #043b6f1f;
        border-radius: 12px;
        padding: 23px;
        cursor: pointer;

        @media (max-width: 576px) {
          padding: 11px;
        }

        .faq-que-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 40px;

          .faq-que {
            display: flex;
            gap: 8px;
            font-weight: 600;
            font-size: var(--text-xl);
            color: var(--color-neavy-blue);
            line-height: 150%;

            @media (max-width: 576px) {
              font-size: 15px !important;
            }
          }

          .line {
            display: none;
            min-width: 30px;

            @media (max-width: 576px) {
              min-width: 18px;
              width: 18px;
            }
          }

          .plus {
            min-width: 32px;

            @media (max-width: 576px) {
              min-width: 18px;
              width: 18px;
            }
          }
        }

        .faq-ans-wrapper {
          display: grid;
          grid-template-rows: 0fr;
          transition: all 0.3s ease-in;
          max-width: 826px;

          .overflow-hidden {
            overflow: hidden;

            .faq-ans {
              font-size: var(--text-lg);
              line-height: 150%;
              color: #505050;
              margin-top: 10px;

              @media (max-width: 576px) {
                font-size: 14px !important;
              }
            }
          }
        }

        &.active {
          background: #52cbf50a;

          .faq-que-wrapper {
            .faq-que {
              @media (max-width: 576px) {
                font-size: 18px !important;
              }
            }

            .line {
              display: block !important;
            }

            .plus {
              display: none !important;
            }
          }

          .faq-ans-wrapper {
            grid-template-rows: 1fr;
          }
        }
      }
    }

    .other-questions-button {
      padding: 15px 31px;
      border: 1px solid #68df1b;
      margin-top: 42px;
      background: #68df1b;
      border-radius: 100px;
      font-weight: 600;
      font-family: "Geologica", sans-serif !important;

      font-size: 16px;
      color: #010101;
      line-height: 110%;
      transition: all 0.3s linear;
      text-align: center;
      width: 100%;
      max-width: 228px;

      @media (max-width: 576px) {
        margin-top: 40px;
        max-width: 400px;
      }

      &:hover {
        background: #ffffff;
      }
    }
  }

  .faq-ellipse-1,
  .faq-ellipse-2 {
    position: absolute;
    max-width: 451px;
    width: 100%;
    rotate: 157deg;

    @media (max-width: 992px) {
      max-width: 390px;
    }

    @media (max-width: 768px) {
      max-width: 290px;
    }

    @media (max-width: 576px) {
      max-width: 184px;
    }
  }

  .faq-ellipse-1 {
    left: -204px;
    top: 30px;

    @media (max-width: 576px) {
      left: -54px;
      top: 10px;
    }
  }

  .faq-ellipse-2 {
    right: -230px;
    bottom: 209px;

    @media (max-width: 576px) {
      right: -100px;
      bottom: -31px;
    }
  }
}

.get-started-section {
  padding: 100px 20px 140px;
  background-image: url(/assets/images/png/get-started-bg-image.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;

  @media (max-width: 1024px) {
    padding: 80px 20px 130px;
  }

  @media (max-width: 576px) {
    padding: 60px 20px 120px;
  }

  .get-started-container {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;

    @media (max-width: 576px) {
      gap: 50px;
    }

    .content-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .heading-and-badge {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 633px;

        @media (max-width: 768px) {
          max-width: 100%;
        }

        @media (max-width: 576px) {
          gap: 10px;
        }

        .badge {
          padding: 0;
          font-size: var(--text-lg);
          font-weight: 400;
          color: var(--color-neavy-blue);
          display: flex;
          align-items: center;
          gap: 10px;
          height: 27px;
          width: 100%;

          @media (max-width: 576px) {
            font-size: 12px !important;
            height: 18px;
          }

          span {
            background: var(--color-neavy-blue);
            width: 40px;
            height: 1px;
          }
        }

        .heading {
          font-size: var(--text-6xl);
          line-height: 110%;
          color: var(--color-neavy-blue);

          span {
            font-weight: 500;
          }
        }
      }

      .paragraph {
        font-size: var(--text-lg);
        color: #010101b2;
        max-width: 360px;

        @media (max-width: 768px) {
          max-width: 100%;
        }

        @media (max-width: 576px) {
          font-size: 14px !important;
        }
      }
    }

    .form-wrapper {
      display: flex;
      align-items: center;
      gap: 34px;

      @media (max-width: 1024px) {
        flex-direction: column;
        /* max-width: 768px; */
        margin: 0 auto;
      }

      @media (max-width: 576px) {
        gap: 60px;
      }

      .get-in-touch-image {
        max-width: 608px;
        width: 100%;
        height: auto;
        min-width: 0;
      }

      .form {
        padding: 24px;
        background: var(--color-neavy-blue);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        min-width: 572px;
        max-width: 598px;

        @media (max-width: 768px) {
          min-width: 0;
        }

        @media (max-width: 576px) {
          padding: 16px;
        }

        .two-inputs {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;

          @media (max-width: 576px) {
            grid-template-columns: 1fr;
            gap: 16px;
          }
        }

        .input-wrapper {
          display: flex;
          flex-direction: column;
          width: 100%;
        }

        .form input,
        .form textarea {
          width: 100% !important;
        }

        .error-message {
          color: #ff2b2b;
          font-size: 13px;
          margin-top: 6px;
          text-align: left;
          font-weight: 500;
        }

        input,
        textarea {
          border-radius: 6px;
          padding: 13px;
          border: 1px solid #fefefe3d;
          background: #fefefe1f;
          font-size: var(--text-lg);
          line-height: 150%;
          color: #fefefeb2;
          outline: none;

          @media (max-width: 576px) {
            padding: 7px;
          }

          &::placeholder {
            color: #fefefeb2;
          }
        }

        .custom-dropdown {
          position: relative;
          width: 100%;
          font-size: var(--text-lg);
          color: #fefefeb2;
        }

        /* selected box */
        .dropdown-selected {
          display: flex;
          align-items: center;
          justify-content: space-between;

          border-radius: 6px;
          padding: 13px;
          border: 1px solid #fefefe3d;
          background: #fefefe1f;
          backdrop-filter: blur(6px);
          cursor: pointer;

          transition: all 0.25s ease;

          @media (max-width: 576px) {
            padding: 7px;
          }
        }

        .dropdown-selected:hover {
          background: #fefefe2a;
          border-color: #fefefe66;
        }

        /* arrow */
        .dropdown-arrow {
          transition: transform 0.25s ease;

          @media (max-width: 576px) {
            width: 16px;
            height: 16px;
          }
        }

        /* rotate arrow */
        .custom-dropdown.active .dropdown-arrow {
          transform: rotate(180deg);
        }

        /* dropdown menu */
        .dropdown-options {
          position: absolute;
          top: calc(100% + 6px);
          left: 0;
          width: 100%;

          border-radius: 6px;
          border: 1px solid #fefefe3d;
          background: var(--color-neavy-blue);
          /* backdrop-filter: blur(8px); */

          opacity: 0;
          transform: translateY(10px);
          pointer-events: none;

          transition: all 0.25s ease;
          overflow: hidden;
          z-index: 10;
        }

        /* show dropdown */
        .custom-dropdown.active .dropdown-options {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }

        /* options */
        .dropdown-option {
          padding: 12px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .dropdown-option:hover {
          background: #fefefe2a;
        }

        /* selected option */
        .dropdown-option.selected {
          background: #fefefe33;
        }

        textarea {
          resize: none;
          min-height: 118px;

          @media (max-width: 576px) {
            min-height: 108px;
          }
        }

        .submit-button {
          padding: 16px 32px;
          background: #68df1b;
          border-radius: 100px;
          border: none;
          font-weight: 600;
          font-family: "Geologica", sans-serif !important;
          font-size: 16px;
          color: #010101;
          line-height: 110%;
          transition: all 0.3s linear;
          text-align: center;
          width: 100%;
          margin-top: 8px;

          &:hover {
            background: #ffffff;
          }

          @media (max-width: 576px) {
            margin-top: 4px;
          }
        }

        p {
          font-size: var(--text-base);
          color: var(--color-off-white);
          font-weight: 600;
          text-align: center;
          margin-top: -4px;

          @media (max-width: 576px) {
            max-width: 246px;
            margin-inline: auto;
          }
        }
      }
    }
  }
}

/* ==========================================================================
   CTA banner variant of .get-started-section
   Used on pages where the in-page form was replaced with a link to /request-demo.
   Stacks content vertically, centers it, and shows a single large button.
   ========================================================================== */
.get-started-section .content-wrapper.cta-banner-layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
    max-width: 720px;
    margin: 0 auto;
}

.get-started-section .content-wrapper.cta-banner-layout .heading-and-badge {
    align-items: center;
    text-align: center;
    max-width: 100%;
}

.get-started-section .content-wrapper.cta-banner-layout .heading-and-badge .badge {
    justify-content: center;
    width: auto;
}

.get-started-section .content-wrapper.cta-banner-layout .paragraph {
    max-width: 560px;
    text-align: center;
}

.get-started-section .content-wrapper.cta-banner-layout .cta-banner-button {
    margin-top: 16px;
    padding: 16px 40px;
    font-size: var(--text-lg);
    min-width: 240px;
    text-align: center;
    background: var(--color-green);
    color: var(--color-neavy-blue);
    font-weight: 600;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.get-started-section .content-wrapper.cta-banner-layout .cta-banner-button:hover {
    background: #5bc716;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(104, 223, 27, 0.3);
}

/* ==========================================================================
   Urgency banner — homepage only, dismissible
   ========================================================================== */
.urgency-bar {
    background-color: var(--color-green);
    padding: 10px 0;
    position: relative;
    z-index: 100;
}

.urgency-bar p,
.urgency-bar a,
.urgency-bar strong {
    font-size: var(--text-sm);
    color: var(--color-neavy-blue) !important;
}

.urgency-cta {
    white-space: nowrap;
    font-weight: 600;
    margin-left: 8px;
    text-decoration: underline !important;
}

.urgency-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    margin-left: 16px;
    opacity: 0.7;
    color: var(--color-neavy-blue) !important;
}

.urgency-close:hover {
    opacity: 1;
}

@media (max-width: 576px) {
    .urgency-bar p {
        font-size: 12px;
    }
    .urgency-cta {
        display: none;
    }
}

/* ==========================================================================
   Payment processors / stats strip (from need-tuition-page.css, duplicated
   here so the homepage can use it without loading the full subpage CSS)
   ========================================================================== */
.payment-processors-section {
    padding: 80px 20px 0px;
}

.payment-processors-section .payment-processors-container {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

@media (max-width: 992px) {
    .payment-processors-section .payment-processors-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .payment-processors-section .payment-processors-container {
        grid-template-columns: 1fr;
    }
}

.payment-processors-section .payment-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 39px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px solid #043b6f1f;
    max-width: 292px;
    width: 100%;
    transition: all 0.3s linear;
}

@media (max-width: 992px) {
    .payment-processors-section .payment-card {
        max-width: none;
        height: 100%;
    }
}

@media (max-width: 576px) {
    .payment-processors-section .payment-card {
        padding: 24px 16px;
    }
}

.payment-processors-section .payment-card .payment-card-heading {
    font-size: 64px;
    line-height: 150%;
    color: var(--color-neavy-blue);
    transition: all 0.3s linear;
}

@media (max-width: 768px) {
    .payment-processors-section .payment-card .payment-card-heading {
        font-size: 48px;
    }
}

@media (max-width: 576px) {
    .payment-processors-section .payment-card .payment-card-heading {
        font-size: 40px;
    }
}

.payment-processors-section .payment-card .paragraph {
    font-weight: 600;
    font-size: var(--text-3xl);
    line-height: 150%;
    color: var(--color-neavy-blue);
    text-align: center;
    transition: all 0.3s linear;
}

.payment-processors-section .payment-card:hover {
    background: var(--color-neavy-blue);
    box-shadow: 4px 4px 17.5px 0px #043b6f40;
}

.payment-processors-section .payment-card:hover .payment-card-heading,
.payment-processors-section .payment-card:hover .paragraph {
    color: var(--color-off-white);
}

/* ==========================================================================
   Founder story — "Our Story" section
   ========================================================================== */
.founder-section {
    padding: 120px 20px;
    background-color: var(--color-light-white);
}

.founder-wrapper {
    max-width: 1240px;
    margin: 0 auto;
}

.founder-para {
    color: #010101b2;
}

@media (max-width: 768px) {
    .founder-section {
        padding: 64px 20px;
    }
}

/* ==========================================================================
   Item 6 — Hide swiper pagination dots on compare pages when all slides fit
   ========================================================================== */
@media (min-width: 1280px) {
    .get_swiper_dots {
        display: none !important;
    }
}

/* ==========================================================================
   Section badge bars — consistent gap + styling for .get_wrapper + .border_blue
   The designer scoped these inside .get-more-section in helper.css, but
   they're reused in founder-section, compare Real Feedback, etc. This
   top-level rule ensures they all render identically (matching the .badge
   + <span> pattern used in Launch Pricing, FAQ, Get Started).
   ========================================================================== */
.get_wrapper {
    gap: 10px;
}

.get_wrapper .border_blue {
    border: 1px solid var(--color-neavy-blue);
    width: 40px;
    border-radius: 18px;
}

/* ==========================================================================
   Item 10 — Mobile comparison table scroll hint
   ========================================================================== */
@media (max-width: 768px) {
    .table_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    .table_wrapper::after {
        content: 'Swipe to see more \2192';
        display: block;
        text-align: center;
        padding: 12px 0 4px;
        font-size: 13px;
        color: var(--color-neavy-blue);
        opacity: 0.5;
    }
}

/* ==========================================================================
   Item 11 — Mobile homepage hero — reduce top margin on .mt_104
   ========================================================================== */
@media (max-width: 768px) {
    .hero_section .mt_104 {
        margin-top: 60px !important;
    }
}

/* ==========================================================================
   Item 12 — Mobile nav dropdown — show inline (not hover) inside mobile menu
   ========================================================================== */
@media (max-width: 767px) {
    .nav-dropdown .dropdown-menu-custom {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding-left: 16px;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ==========================================================================
   Button text centering — <a> tags used as buttons don't center by default
   ========================================================================== */
.apply-button,
a.common_green_button,
a.common_border_button,
.cta-banner-button {
    text-align: center;
    display: inline-block;
}

/* ==========================================================================
   Accessibility — Skip to content link
   ========================================================================== */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--color-neavy-blue);
    color: var(--color-off-white);
    padding: 8px 16px;
    border-radius: 4px;
    z-index: 9999;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 8px;
}

/* ==========================================================================
   Accessibility — Hamburger button reset
   ========================================================================== */
button.menu-bar {
    background: none;
    border: none;
    padding: 0;
    outline: none;
}
button.menu-bar:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ==========================================================================
   Accessibility — Compare dropdown trigger button reset
   ========================================================================== */
button.compare-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}