/* ============================================================
       CSS CUSTOM PROPERTIES – DESIGN TOKENS
    ============================================================ */
    :root {
      --clr-primary: #3187f3;
      --clr-primary-hover: #2573dc;
      --clr-text-dark: #1f2024;
      --clr-text-body: #383e48;
      --clr-text-medium: #4e4e4e;
      --clr-text-review-h: #1a2845;
      --clr-text-muted: #3f4260;
      --clr-text-cancel: #626c7c;
      --clr-text-placeholder: #757575;
      --clr-text-disabled: #9ca5b5;
      --clr-icon-accordion: #7b869c;
      --clr-border: #d5e2f1;
      --clr-card-border: #c6cacf;
      --clr-white: #ffffff;
      --clr-premium-bg: #1d2e4d;
      --clr-badge-bg: #f5a623;
      --clr-section-bg: #ebf3fc;
      --clr-footer-bg: #1a2845;

      --font-manrope: 'Manrope', sans-serif;
      --font-inter: 'Inter', sans-serif;

      --content-max: 1084px;
      --content-pad: 0 40px;
      --radius-btn: 50px;
      --radius-card: 12px;
    }

    /* ============================================================
       BASE RESET
    ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--font-manrope);
      color: var(--clr-text-dark);
      background: var(--clr-white);
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    ul,
    ol {
      list-style: none;
    }

    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
    }

    /* ============================================================
       UTILITY
    ============================================================ */
    .container {
      max-width: var(--content-max);
      margin: 0 auto;
      padding: var(--content-pad);
    }

    /* ============================================================
       COMMON BUTTON
    ============================================================ */
    .btn {
      width: 280px;
      height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-btn);
      font-family: var(--font-manrope);
      font-size: 18px;
      font-weight: 700;
      line-height: 18px;
      white-space: nowrap;
      cursor: pointer;
      border: none;
      transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-primary {
      background: var(--clr-primary);
      color: var(--clr-white);
      padding: 0 20px;
    }

    .btn-primary:hover {
      background: var(--clr-primary-hover);
      box-shadow: 0 4px 14px rgba(49, 135, 243, .35);
    }

    .btn-cancel {
      background: transparent;
      color: var(--clr-text-cancel);
      border: 1.5px solid var(--clr-card-border);
      padding: 16px 40px;
    }

    .btn-submit {
      background: transparent;
      color: var(--clr-primary);
      border: 1.5px solid var(--clr-primary);
      padding: 16px 40px;
      font-family: var(--font-inter);
      font-size: 17.4px;
      font-weight: 700;
    }

    .btn-submit:hover {
      background: rgba(49, 135, 243, .06);
    }

    /* ============================================================
       FLOATING CHAT WIDGET
    ============================================================ */
    .chat-widget {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 999;
      cursor: pointer;
    }

    .chat-widget img {
      width: 55px;
      height: 55px;
      border-radius: 28px;
      transition: transform 0.2s;
    }

    .chat-widget:hover img {
      transform: scale(1.07);
    }

    /* ============================================================
       SECTION 1 – PRICING HERO
    ============================================================ */
    .pricing-hero {
      background: #F2F8FF;
      padding: 93px 0 64px;
      text-align: center;
    }

    .pricing-hero__title {
      font-size: 44px;
      font-weight: 800;
      line-height: 60px;
      color: var(--clr-text-dark);
    }

    .pricing-hero__subtitle {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: 0.7px;
      line-height: 44px;
      color: var(--clr-text-dark);
      margin-top: 8px;
    }

    .pricing-hero__tagline {
      font-size: 26px;
      font-weight: 800;
      color: var(--clr-text-medium);
      margin-top: 13px;
    }

    .content_block .content_subtitle {
      font-family: 'Manrope', sans-serif;
      font-size: 26px;
      font-weight: 800;
      line-height: 35.52px;
      margin-bottom: 4px;
      margin-top: -1px;
      text-align: center;
      color: #4E4E4E;
    }

    .pricing-hero__free {
      font-size: 18px;
      font-weight: 700;
      color: var(--clr-text-muted);
      margin-top: -1px;
    }

    .pricing-hero__free .highlight {
      color: #229D7A;
    }

    /* --- Plan Cards --- */
    .plan-cards {
      width: 1084px;
      display: flex;
      gap: 24px;
      margin-top: 38px;
      margin-left: -40px;
      align-items: flex-start;
    }

    .plan-card {
      flex: 1;
      border-radius: var(--radius-card);
      padding: 28px 24px 32px;
      text-align: left;
      position: relative;
      overflow: hidden;
    }

    .plan-card--premium {
      background: var(--clr-premium-bg);
      color: var(--clr-white);
      overflow: hidden;
    }

    .plan-card--standard,
    .plan-card--lite {
      background: var(--clr-white);
      border: 1px solid var(--clr-card-border);
    }

    @media (min-width: 1025px) {
      .plan-card {
        flex: 0 0 337.33px;
        width: 337.33px;
        min-height: 808px;
        padding: 32px;
      }

      .plan-card--standard,
      .plan-card--lite {
        background-color: #ffffff;
        box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.16);
        border: solid 0.5px #bbc8d8;
      }
    }



    .plan-cards__dots {
      display: none;
    }

    .plan-card__badge {
      position: absolute;
      top: -9px;
      right: 20px;
      width: 70px;
      height: 115px;
      padding: 0;
      margin: 0;
      border-radius: 0 12px 0 0;
      overflow: hidden;
      z-index: 10;
      line-height: 0;
      font-size: 0;
      pointer-events: none;
    }

    .plan-card__badge img {
      width: 70px;
      height: 115px;
      display: block;
      object-fit: fill;
    }

    .plan-card__name {
      font-size: 28px;
      font-weight: 800;
      text-transform: uppercase;
      padding-right: 52px;
      position: relative;
      top: -5px;
    }

    .plan-card--premium .plan-card__name {
      color: var(--clr-white);
    }

    .plan-card--standard .plan-card__name,
    .plan-card--lite .plan-card__name {
      color: #1A2845;
    }

    .plan-card__price-row {
      display: flex;
      align-items: baseline;
      gap: 2px;
      margin-top: 12px;
      position: relative;
      top: 5px;
    }

    .plan-card__price {
      font-size: 34px;
      font-weight: 800;
      line-height: 1;
    }

    .plan-card--standard .plan-card__price,
    .plan-card--lite .plan-card__price {
      color: #1A2845;
    }

    .plan-card--premium .plan-card__price {
      color: var(--clr-white);
    }

    .plan-card__price-period {
      font-size: 18px;
      font-weight: 500;
      margin-left: 5px !important;
      opacity: .85;
    }

    .plan-card--standard .plan-card__price-period,
    .plan-card--lite .plan-card__price-period {
      color: #1A2845;
    }

    .pricing_wrapper .pricing_container .pricing_rate {
      display: inline-block;
      width: 100%;
      font-size: 34px;
      font-weight: 800;
      line-height: 44px;
      color: #ffffff;
    }

    .plan-card__billed {
      font-size: 14px;
      font-weight: 500;
      margin-top: 7px;
      margin-bottom: 20px;
      width: 154px;
    }

    .plan-card--premium .plan-card__billed {
      color: rgba(255, 255, 255, .55);
    }

    .plan-card--standard .plan-card__billed,
    .plan-card--lite .plan-card__billed {
      color: var(--clr-text-cancel);
    }

    .plan-card__btn {
      width: 271.31px;
      height: 56px;
      padding: 0px 24px;
      border-radius: var(--radius-btn);
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-manrope);
      color: var(--clr-white);
      background: var(--clr-primary);
      border: none;
      cursor: pointer;
      margin-bottom: 35px;
      transition: background-color 0.2s, transform 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      top: -1px;
    }

    .plan-card__btn:hover {
      background: var(--clr-primary-hover);
      transform: translateY(-1px);
    }

    .plan-card__features {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .plan-card__feature {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
    }

    .plan-card--premium .plan-card__feature {
      color: #DBDFE8;
      font-weight: 500;
      line-height: 28px;
    }

    .plan-card--standard .plan-card__feature.feature--active,
    .plan-card--lite .plan-card__feature.feature--active {
      color: #383e48;
      font-weight: 500;
      line-height: 28px;
    }

    .plan-card--standard .plan-card__feature.feature--inactive,
    .plan-card--lite .plan-card__feature.feature--inactive {
      color: var(--clr-text-disabled);
    }

    .plan-card__check {
      flex-shrink: 0;
      width: 16.38px;
      height: 12px;
      min-width: 16.38px;
      min-height: 12px;
    }

    .plan-card__check-placeholder {
      width: 16px;
      flex-shrink: 0;
    }

    /* Quote Bar */
    .quote-bar {
      width: 1064px;
      margin-top: 16px;
      border: 1px solid var(--clr-card-border);
      border-radius: var(--radius-card);
      background: var(--clr-white);
      height: 81px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 27px;
      padding: 0 24px;
      margin-left: -41px;
    }

    .quote-bar__icon {
      width: 71px;
      height: 36px;
      flex-shrink: 0;
    }

    .quote-bar__text {
      font-size: 16px;
      font-weight: 600;
      color: var(--clr-text-dark);
    }

    .quote-bar__link {
      color: var(--clr-primary);
      font-weight: 700;
      cursor: pointer;
    }

    .quote-bar__link:hover {
      text-decoration: underline;
    }

    /* Trust Badges */
    .trust-badges {
      margin-top: 32px;
      display: flex;
      justify-content: center;
    }

    .trust-badges__img {
      width: 100%;
      height: auto;
    }

    .trust-badges__grid {
      display: none;
    }

    /* ============================================================
       SECTION 2 – TESTIMONIALS
    ============================================================ */
    .testimonials {
      background: var(--clr-white);
      padding: 80px 0;
    }

    .testimonials__title {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: 0.7px;
      line-height: 44px;
      color: var(--clr-text-dark);
      text-align: center;
      margin-bottom: 40px;
    }

    .testimonials__wrapper {
      position: relative;
    }

    .testimonials__quote-open {
      position: absolute;
      top: 0;
      left: 0;
      width: 37px;
      height: 30px;
    }

    .testimonials__quote-close {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 37px;
      height: 30px;
    }

    .testimonials__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      padding: 48px 50px;
    }

    .testimonial__title {
      font-size: 24px;
      font-weight: 800;
      line-height: 32px;
      color: var(--clr-text-review-h);
      margin-bottom: 20px;
    }

    .testimonial__text {
      font-size: 20px;
      font-weight: 400;
      line-height: 32px;
      color: #000000;
      margin-bottom: 24px;
    }

    .testimonial__reviewer {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testimonial__avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .testimonial__name {
      font-size: 16px;
      font-weight: 500;
      color: #000000;
      margin-bottom: 4px;
    }

    .testimonial__stars img {
      width: 94px;
      height: auto;
    }

    .testimonials__cta {
      text-align: center;
      margin-top: 48px;
    }

    @media (min-width: 1025px) {
      .testimonials .container {
        max-width: 1084px;
        padding-left: 0;
        padding-right: 0;
      }

      .testimonials__wrapper {
        position: relative;
      }

      .testimonials__grid {
        width: 100%;
        max-width: none;
        margin: 0;
        grid-template-columns: 518px 518px;
        gap: 48px;
        padding: 48px 0;
      }

      .testimonial {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .testimonial__text {
        width: 100%;
        max-width: 100%;
      }

      .testimonials__quote-open {
        top: 0;
        left: 0;
      }

      .testimonials__quote-close {
        bottom: 0;
        right: 0;
      }
    }

    /* ============================================================
       SECTION 3 – FEATURES / ACCORDION
    ============================================================ */
    .features {
      background: var(--clr-white);
      padding-bottom: 60px;
    }

    .features__header {
      padding: 0px 0 40px;
      text-align: center;
      margin-top: -2px;
    }

    .features__title {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: 0.7px;
      line-height: 44px;
      color: var(--clr-text-dark);
      margin-top: 7px;
      margin-bottom: 14px;
    }

    .features__subtitle {
      font-size: 18px;
      font-weight: 700;
      color: var(--clr-text-muted);
    }

    .features__subtitle a {
      color: var(--clr-primary);
      text-decoration: underline;
    }

    /* Accordion */
    .accordion {
      border-top: 1px solid var(--clr-border);
    }

    .accordion-item {
      border-bottom: 1px solid var(--clr-border);
    }

    .accordion-item__trigger {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 28px 18px;
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      transition: background 0.2s;
    }

    .accordion-item__trigger:hover {
      background: rgba(49, 135, 243, .02);
    }

    .accordion-item__title {
      font-size: 24px;
      font-weight: 700;
      line-height: 32.78px;
      color: var(--clr-text-dark);
    }

    .accordion-item__chevron {
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .accordion-item.is-open .accordion-item__chevron {
      transform: rotate(180deg);
    }

    .accordion-item__content {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.38s ease;
    }

    .accordion-item.is-open .accordion-item__content {
      max-height: 4000px;
    }

    .accordion-item__body {
      padding: 0 18px 36px;
    }

    .accordion-item__desc {
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
      color: var(--clr-text-body);
      margin-bottom: 32px;
    }

    .accordion-item__screenshot {
      display: flex;
      justify-content: center;
      margin-bottom: 32px;
    }

    .accordion-item__screenshot img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    #acc-panel-1 .accordion-item__screenshot img {
      width: 800px;
      height: 522.9px;
    }

    #acc-panel-2 .accordion-item__screenshot img {
      width: 400px;
      height: 607px;
    }

    #acc-panel-3 .accordion-item__screenshot img {
      width: 400px;
      height: 522.9px;
    }

    .accordion-item__cta {
      text-align: center;
    }

    /* ============================================================
       SECTION 4 – FAQ
    ============================================================ */
    .faq {
      background: var(--clr-white);
      padding: 0px 0;
    }

    .faq__title {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: 0.7px;
      line-height: 44px;
      color: var(--clr-text-dark);
      text-align: center;
      margin-bottom: 48px;
    }

    .faq__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 40px;
      row-gap: 48px;
    }

    .faq__item h3 {
      font-size: 24px;
      font-weight: 700;
      line-height: 28px;
      color: var(--clr-text-dark);
      margin-bottom: 12px;
    }

    .faq__item p {
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
      color: var(--clr-text-body);
    }

    .faq__item a {
      color: var(--clr-primary);
      text-decoration: underline;
    }

    .faq__cta {
      text-align: center;
      margin-bottom: 64px;
      margin-top: 48px;
    }

    /* ============================================================
       SECTION 5 – APP STORES
    ============================================================ */
    .app-stores {
      background: var(--clr-section-bg);
      padding: 36px 0;
    }

    .app-stores__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .app-stores__text {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: 0.7px;
      line-height: 44px;
      color: var(--clr-text-dark);
      white-space: nowrap;
    }

    .app-stores__badges {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
    }

    .app-stores__badge-img {
      height: 56px;
      width: auto;
    }

    /* ============================================================
       SECTION 6 – CONTACT FORM
    ============================================================ */
    .contact-form {
      background: var(--clr-white);
      padding: 80px 0;
    }

    .contact-form__title {
      font-size: 34px;
      font-weight: 800;
      line-height: 44px;
      color: var(--clr-text-dark);
      text-align: center;
      margin-bottom: 40px;
    }

    .contact-form__form {
      max-width: 640px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-input,
    .form-textarea {
      width: 100%;
      padding: 18px 24px;
      border: 1.5px solid #e0e4eb;
      border-radius: 50px;
      font-family: var(--font-manrope);
      font-size: 18px;
      font-weight: 500;
      color: var(--clr-text-dark);
      background: var(--clr-white);
      outline: none;
      transition: border-color 0.2s;
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: var(--clr-text-placeholder);
    }

    .form-input:focus,
    .form-textarea:focus {
      border-color: var(--clr-primary);
    }

    .form-textarea {
      border-radius: 24px;
      min-height: 120px;
      resize: vertical;
      line-height: 21.6px;
    }

    .form-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 20px;
    }

    /* ============================================================
       SECTION 7 – FOOTER CTA
    ============================================================ */
    .footer-cta {
      background: var(--clr-footer-bg);
      padding: 60px 0 72px;
      text-align: center;
    }

    .footer-cta__title {
      font-size: 34px;
      font-weight: 800;
      line-height: 44px;
      color: var(--clr-white);
      margin-bottom: 32px;
    }

    .footer-cta__form {
      display: flex;
      max-width: 480px;
      margin: 0 auto;
      background: var(--clr-white);
      border-radius: 50px;
      padding: 6px 6px 6px 24px;
      align-items: center;
      gap: 8px;
    }

    .footer-cta__input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      font-family: var(--font-manrope);
      font-size: 17px;
      font-weight: 500;
      color: var(--clr-text-dark);
      background: transparent;
    }

    .footer-cta__input::placeholder {
      color: var(--clr-text-placeholder);
    }

    .footer-cta__btn {
      flex-shrink: 0;
      background: var(--clr-primary);
      color: var(--clr-white);
      border: none;
      border-radius: 50px;
      padding: 14px 28px;
      font-family: var(--font-manrope);
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s;
    }

    .footer-cta__btn:hover {
      background: var(--clr-primary-hover);
    }

    /* ============================================================
       TABLET  768px – 1024px
    ============================================================ */
    @media (max-width: 1024px) {
      #acc-panel-1 .accordion-item__screenshot img {
        width: 674px;
        height: auto;
      }

      #acc-panel-2 .accordion-item__screenshot img {
        width: 400px;
        height: 607px;
      }

      #acc-panel-3 .accordion-item__screenshot img {
        width: 400px;
        height: 607px;
      }

      :root {
        --content-pad: 0 24px;
      }

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
      }

      .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 24px;
        padding-right: 24px;
      }

      .pricing-hero {
        background: var(--clr-section-bg);
        padding: 80px 0 64px;
        margin-top: 35px;
        text-align: center;
      }

      .pricing-hero,
      .testimonials,
      .features,
      .faq,
      .app-stores,
      .contact-form,
      .footer-cta {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
      }

      .quote-bar {
        width: 100%;
        margin-left: 0;
      }

      .quote-bar__text {
        font-size: 18px;
      }

      .plan-cards__wrapper {
        overflow: hidden;
        width: 100%;
      }

      .plan-cards {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        margin-left: 0;
        gap: 24px;
        align-items: stretch;
        margin-top: -1px;
        box-sizing: border-box;
        transition: transform 0.3s ease;
      }

      .plan-card {
        flex: 0 0 312px;
        width: 312px;
        min-height: 808px;
        margin: 32px 0 0 0;
        padding: 32px;
        box-sizing: border-box;
      }

      .pricing-hero__title {
        font-size: 40px;
        line-height: 56px;
        position: relative;
        top: -13px;
      }

      .pricing-hero__subtitle {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: 0.7px;
        line-height: 44px;
        color: var(--clr-text-dark);
        margin-top: -4px;
      }

      .pricing-hero__tagline {
        font-size: 26px;
        font-weight: 800;
        color: var(--clr-text-medium);
        margin-top: 12px;
      }

      .pricing-hero__free {
        font-size: 18px;
      }

      .plan-card__price {
        font-size: 34px;
      }

      .plan-card__name {
        font-size: 28px;
        letter-spacing: 0.8px;
        padding-right: 44px;
      }

      .plan-card__price-period {
        font-size: 18px;
      }

      .plan-card__billed {
        font-size: 14px;
        color: #939BAF;
      }

      .plan-card__btn {
        width: 246px;
        height: 56px;
        padding: 0 20px;
      }

      .plan-card__feature {
        font-size: 18px;
        line-height: 28px;
      }

      .plan-cards__dots {
        display: none !important;
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
      }

      .plan-cards__dot {
        display: none !important;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1.5px solid #1f2024;
        background: transparent;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s;
      }

      .plan-cards__dot.is-active {
        background: #1f2024;
        border-color: #1f2024;
      }

      .testimonials__grid {
        gap: 32px;
        padding: 36px 32px;
      }

      .testimonial__title {
        font-size: 24px;
      }

      .testimonial__text {
        font-size: 20px;
        line-height: 28px;
      }

      .footer-cta__title,
      .app-stores__text {
        font-size: 28px;
        line-height: 38px;
      }

      .testimonials__title,
      .features__title,
      .faq__title,
      .contact-form__title {
        font-size: 34px;
        line-height: 44px;
      }

      .features__subtitle {
        font-size: 18px;
      }

      .accordion-item__trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px 18px;
        width: 100%;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: background 0.2s;
      }

      .accordion-item__title {
        font-size: 24px;
        line-height: 28px;
      }

      .accordion-item__desc {
        font-size: 18px;
      }

      .faq .container {
        padding-left: 40px;
        padding-right: 40px;
      }

      .faq__grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .faq__item h3 {
        font-size: 24px;
        width: 358px;
      }

      .faq__item p {
        font-size: 18px;
        width: 358px;
        margin: 24px 0px 0px;
      }

      .app-stores {
        padding: 56px 0;
      }

      .app-stores__inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 30px !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .app-stores__text {
        font-size: 34px !important;
        line-height: 44px !important;
        text-align: center !important;
      }

      .app-stores__badges {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 16px !important;
      }

      .testimonials__wrapper {
        overflow-x: hidden;
        /* change from overflow: hidden to overflow-x: hidden only */
        overflow-y: visible;
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
      }

      .testimonials__grid {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 40px;
        transition: transform 0.3s ease;
        /* JS will set transform: translateX(-100%) to go to slide 2 */
      }

      .testimonial {
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 48px 28px 40px 28px;
        /* reduced bottom padding since quote flows naturally */
        min-width: 0;
      }

      .testimonial__text {
        font-size: 20px;
        line-height: 40px;
        width: 688px;
        margin: 15px 0px 24px;
      }

      .testimonials__quote-open {
        top: 32px;
        left: 60px;
      }

      .testimonials__quote-close {
        bottom: 32px;
        right: 70px;
      }

      /* Dots container */
      .testimonials__dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
        margin-bottom: 0;
      }

      /* Each dot */
      .testimonials__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1.5px solid #1f2024;
        background: transparent;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s;
      }

      /* Active dot = filled */
      .testimonials__dot.is-active {
        background: #1f2024;
        border-color: #1f2024;
      }

      /* Hide the CTA button in carousel mode */
      .testimonials__cta {
        /* display: none; */
      }

      .chat-widget {
        display: none;
      }

      .faq__cta {
        text-align: center;
        margin-bottom: 64px;
        margin-top: 48px;
      }

      .app-stores__badge-img {
        width: 168px;
        height: 56px;
      }

      .review_wrapper .review_container li .review_msg {
        line-height: 40px;
        max-width: 688px;
      }
    }

    /* ============================================================
       MOBILE  320px – 767px
    ============================================================ */
    @media (max-width: 767px) {
      #acc-panel-1 .accordion-item__screenshot img {
        width: 354px;
        height: 237.95px;
      }

      #acc-panel-2 .accordion-item__screenshot img {
        width: 364px;
        height: 522.9px;
      }

      #acc-panel-3 .accordion-item__screenshot img {
        width: 364px;
        height: 475.92px;
      }

      :root {
        --content-pad: 0 16px;
      }

      body {
        width: 100%;
        overflow-x: hidden;
      }

      .pricing-hero,
      .testimonials,
      .features,
      .faq,
      .app-stores,
      .contact-form,
      .footer-cta {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Hero */
      .pricing-hero {
        padding: 48px 0 40px;
        margin-top: 34px !important;
      }

      .pricing-hero__title {
        font-size: 30px;
        line-height: 42px;
        color: #1F2024;
        width: 380px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }

      .pricing-hero__subtitle {
        font-size: 26px;
        line-height: 35.52px;
        color: #1F2024;
        margin: 8px 0 16px;
      }

      .pricing-hero__tagline {
        font-size: 22px;
        color: #4E4E4E;
        margin: 0 0 4px;
        line-height: 30.05px;
        font-weight: 700;
      }

      .pricing-hero__free {
        font-size: 16px;
        color: #3F4260;
        margin-bottom: -20px;
      }

      /* Plan card name - mobile */
      .plan-card__name {
        font-size: 18px;
        letter-spacing: 0.8px;
      }

      /* Price /month - mobile */
      .plan-card__price-period {
        font-size: 14px;
      }

      /* Billed Annually - mobile */
      .plan-card__billed {
        font-size: 14px;
        width: auto;
      }

      /* Feature list font size - mobile */
      .plan-card__feature {
        font-size: 16px;
      }

      /* Check tick icon size - mobile */
      .plan-card__check {
        width: 13.64px;
        height: 10px;
        min-width: 13.64px;
        min-height: 10px;
      }

      /* Button - mobile: match image 1 (334x48) */
      .plan-card__btn {
        width: 334px;
        height: 48px;
        max-width: 100%;
        padding: 0px 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
      }

      /* Card sizing - mobile: match image 2 (398x664) */
      .plan-card {
        flex: none;
        width: 398px;
        max-width: 100%;
        min-height: 664px;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 24px 32px;
      }

      /* Plan cards stack centered - mobile: match image 3 */
      .plan-cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
      }

      .plan-cards__dots {
        display: none !important;
      }

      /* Quote bar */
      .quote-bar {
        height: auto;
        padding: 16px 20px;
        flex-direction: row;
        /* icon and text side by side */
        flex-wrap: nowrap;
        /* prevent icon from wrapping above text */
        align-items: flex-start;
        /* align icon and text to top */
        text-align: left;
        /* text left-aligned beside icon */
        gap: 12px;
      }

      .quote-bar__icon {
        flex-shrink: 0;
        /* icon never shrinks */
        width: 71px;
        height: 36px;
        margin-top: 2px;
        /* slight nudge to align with text baseline */
      }

      .quote-bar__text {
        font-size: 14px;
        line-height: 1.5;
        flex: 1;
        /* text takes remaining width and wraps naturally */
        min-width: 0;
      }

      /* Hide the single SVG strip on mobile */
      .trust-badges__img {
        display: none;
      }

      /* Show the 2x2 grid on mobile */
      .trust-badges__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 24px;
      }

      /* Each cell: centered column layout */
      .trust-badges__grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        text-align: center;
      }

      .trust-badges__icon-box {
        height: 80px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }

      /* Mom's Choice & Satisfaction Guaranteed — 58x58 */
      .trust-badges__grid-item:nth-child(1) img,
      .trust-badges__grid-item:nth-child(4) img {
        width: 58px;
        height: 58px;
        object-fit: contain;
      }

      /* Certified Secure — 101x30.9 */
      .trust-badges__grid-item:nth-child(2) img {
        width: 101px;
        height: 30.9px;
        object-fit: contain;
      }

      /* Trusted Provider BBB — 117x80 */
      .trust-badges__grid-item:nth-child(3) img {
        width: 117px;
        height: 80px;
        object-fit: contain;
      }

      /* Label text below each badge */
      .trust-badges__grid-item span {
        font-size: 12px;
        font-weight: 500;
        color: var(--clr-text-body);
        line-height: 16px;
        max-width: 140px;
      }

      /* Testimonials */
      .testimonials {
        padding: 48px 0;
      }

      .testimonials__cta {
        display: block;
      }

      .testimonials__title,
      .features__title,
      .contact-form__title,
      .footer-cta__title,
      .app-stores__text {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0;
        white-space: nowrap;
      }

      .faq__title {
        font-size: 30px;
        line-height: 40.98px;
        letter-spacing: 0;
        white-space: normal;
        margin-top: 0;
      }

      .testimonials__wrapper {
        width: 100%;
        max-width: 100%;
      }

      .testimonials__grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 32px 0;
        box-sizing: border-box;
      }

      .testimonials__quote-open {
        width: 26px;
        height: 21px;
        top: 20px;
        left: 20px;
      }

      .testimonials__quote-close {
        width: 26px;
        height: 21px;
        bottom: 20px;
        right: 20px;
      }

      .testimonial {
        box-sizing: border-box;
        overflow: hidden;
        padding: 40px 20px 32px 20px;
      }

      .testimonial__title {
        font-size: 20px;
      }

      .testimonial__text {
        font-size: 16px;
        line-height: 26px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
      }

      /* Features */
      .features {
        padding-bottom: 0;
      }

      .features__header {
        padding: 10px 0 24px;
      }

      .accordion-item__trigger {
        padding: 20px 8px;
      }

      .accordion-item__title {
        font-size: 17px;
        line-height: 24px;
      }

      .accordion-item__body {
        padding: 0 8px 28px;
      }

      .accordion-item__desc {
        font-size: 16px;
        line-height: 26px;
      }

      /* FAQ */
      .faq {
        padding: 0px 0;
      }

      .faq__grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .faq__item h3 {
        font-size: 18px;
        line-height: 24px;
      }

      .faq__item p {
        font-size: 15px;
        line-height: 24px;
      }

      /* App Stores */
      .app-stores {
        padding: 28px 0;
      }

      .app-stores__inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        align-items: center;
        justify-content: center;
      }

      .app-stores__text {
        font-size: 26px;
        line-height: 34px;
        white-space: normal;
        text-align: center;
      }

      .app-stores__badge-img {
        height: 44px;
      }

      .app-stores__badges {
        justify-content: center;
        flex-wrap: wrap;
      }

      /* Contact Form */
      .contact-form {
        padding: 48px 0;
      }

      .form-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .btn-cancel,
      .btn-submit {
        min-height: 44px;
        width: 100%;
        max-width: 280px;
      }

      /* Footer CTA */
      .footer-cta {
        padding: 48px 0 60px;
      }

      .footer-cta__form {
        flex-direction: column;
        border-radius: 20px;
        padding: 12px;
        gap: 10px;
        max-width: 100%;
        background: transparent;
      }

      .footer-cta__input {
        background: var(--clr-white);
        border-radius: 50px;
        padding: 14px 20px;
        width: 100%;
        font-size: 15px;
        border: 1.5px solid #e0e4eb;
      }

      .footer-cta__btn {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 12px 24px;
      }

      /* General button min tap target */
      .btn {
        min-height: 44px;
      }

      /* Chat widget */
      .chat-widget {
        top: 12px;
        right: 12px;
      }

      .chat-widget img {
        width: 44px;
        height: 44px;
        border-radius: 22px;
      }

      .chat-widget {
        display: none;
      }
    }

    @media screen and (width: 375px) {
      .pricing-hero__title {
        margin-top: 35px;
      }
    }

/* ========================================
   SHARED FOOTER: ONE SIGN-UP BAND
   Nothing above this line is modified.

   This page carries its own "Try Mobicip For Free" sign-up band at the
   end of <main>, with the export's script wired to it. The shared
   footer partial also ships a default "Build Better Digital Habits"
   band, plus a pricing-only variant that WordPress switched on for this
   page through a body class. With the page's own band kept verbatim,
   both partial bands are hidden here so exactly one appears - the same
   result WordPress showed on this page.
======================================== */

#mobicip-footer > .footer-cta {
    display: none;
}

/* ========================================
   MOBILE / TABLET HEADER CLEARANCE (this page)
   Nothing above this line is modified.

   Below 1025px this export resets html, body { padding: 0 } and clears
   its own fixed header with a 34-35px margin on the hero - not enough
   for the 80px mobile header. header.css's shared clearance is
   restated here, after the export's rules, so this page gets the same
   80px + 16px as every other page below 1024px. Desktop is untouched.
======================================== */

@media (max-width: 1023px) {
    body {
        padding-top: 96px !important;
    }
}