/* ========================================
         BASE STYLES (DESKTOP 1024px+)
         ======================================== */
      
      /* Banner section - base desktop styles.
         padding-top is 5.5rem (~88px) to clear the fixed/absolute navbar
         (~65-80px tall) so the free-badge never overlaps the menu.
         padding-bottom reduced from 5rem to 2rem so the pricing cards
         below are always partially visible (peek / scroll hint). */
      .top-banner {
        color: #f8f9fa;
        padding: 5.5rem 1.5rem 2rem;
        overflow: visible;
        position: relative;
        z-index: 10;
      }

      /* Typography - Desktop */
      .top-banner .heading {
        font-size: 2.4rem;
        font-weight: 700;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-bottom: 0.75rem;
        margin-top: 1.5rem;
      }

      .top-banner .lead {
        font-size: 1.1rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        margin-bottom: 1.75rem;
      }

      .top-banner .subheading {
        font-size: 1.4rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 1.25rem;
      }

      .top-banner .tab-pane p,
      .top-banner .benefit-list li {
        color: rgba(255, 255, 255, 0.88);
      }

      /* Form controls */
      .top-banner .form-control {
        background-color: rgba(255, 255, 255, 0.15);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
      }

      .top-banner .form-control:focus {
        background-color: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        color: #fff;
      }

      .top-banner .form-control::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      /* Input groups */
      .top-banner .input-group-text {
        background-color: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        border-radius: 0 8px 8px 0;
        font-weight: 500;
        padding: 0.75rem 1rem;
      }

      .top-banner .input-group .form-control {
        border-radius: 8px 0 0 8px;
      }

      /* Keep username input at native size; match only domain suffix box to it */
      .top-banner .input-group {
        align-items: center;
      }

      .top-banner .input-group .input-group-text {
        font-size: 0.95rem;
        height: calc(1.5em + 0.75rem + 2px);
        min-height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        line-height: 1.5;
        display: flex;
        align-items: center;
        white-space: nowrap;
      }

      /* Checkboxes */
      .top-banner .form-check {
        padding-left: 1.5rem;
      }

      .top-banner .form-check-input {
        width: 1.2rem;
        height: 1.2rem;
        margin-top: 0.15rem;
        cursor: pointer;
      }

      .top-banner .form-check-label {
        color: #fff;
        font-weight: 500;
        cursor: pointer;
      }

      /* Tab navigation */
      .top-banner .nav-tabs {
        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 2rem;
        flex-wrap: wrap;
      }

      .top-banner .nav-tabs .nav-item {
        margin: 0 0.5rem;
      }

      .top-banner .nav-tabs .nav-link {
        color: rgba(255, 255, 255, 0.7);
        border: 2px solid transparent;
        border-radius: 8px 8px 0 0;
        padding: 0.75rem 2rem;
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        background-color: rgba(255, 255, 255, 0.05);
        cursor: pointer;
      }

      .top-banner .nav-tabs .nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
      }

      .top-banner .nav-tabs .nav-link.active {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) transparent;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      }

      /* Tab content area */
      .top-banner .tab-content {
        background-color: rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 2rem;
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        margin-bottom: 3rem;
        position: relative;
        z-index: 10;
      }

      /* Tab panes visibility control */
      .top-banner .tab-pane {
        display: none;
        opacity: 0;
        transition: opacity 0.15s linear;
      }

      .top-banner .tab-pane.active,
      .top-banner .tab-pane.show {
        display: block;
        opacity: 1;
      }

      .top-banner .tab-pane.show.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
      }

      .top-banner .tab-pane .row {
        position: relative;
        z-index: 10;
      }

      .top-banner .form-group {
        position: relative;
        z-index: 10;
        margin-bottom: 1rem;
      }

      /* Buttons */
      .top-banner .btn-primary {
        background: #a3d133;
        border: 1px solid #a3d133;
        color: #122157;
        font-weight: 600;
        padding: 0.875rem 2.5rem;
        font-size: 1.05rem;
        border-radius: 50px;
        box-shadow: 0 6px 18px rgba(163, 209, 51, 0.35);
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .top-banner .btn-primary:hover {
        background: #93be2d;
        border-color: #93be2d;
        color: #122157;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(147, 190, 45, 0.42);
      }

      .top-banner .btn-primary:active {
        transform: translateY(0);
      }

      .top-banner .btn-success {
        background: #a3d133;
        border: 1px solid #a3d133;
        color: #122157;
        font-weight: 600;
        padding: 0.875rem 2.5rem;
        font-size: 1.05rem;
        border-radius: 50px;
        box-shadow: 0 6px 18px rgba(163, 209, 51, 0.35);
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .top-banner .btn-success:hover {
        background: #93be2d;
        border-color: #93be2d;
        color: #122157;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(147, 190, 45, 0.42);
      }

      .top-banner .btn-success:active {
        transform: translateY(0);
      }

      /* Ensure pricing section has proper spacing.
         Override both margins from the global .sec-uping { margin: -300px 0px }
         rule — not overriding margin-bottom would leave it at -300px, which
         pulls the next section 300px up and creates a white gap inside this
         section. */
      .pricing.sec-uping {
        margin-top: 3rem;
        margin-bottom: 0 !important;
        padding-top: 3rem;
        padding-bottom: 2rem;
        position: relative;
        z-index: 5;
        background: #fff;
      }

      /* ========================================
         ENTERPRISE PAID PLAN CARDS
         ======================================== */
      .enterprise-plan-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #e8eaf0;
        box-shadow: 0 4px 24px rgba(74, 0, 224, 0.06);
        padding: 2rem 1.75rem 1.75rem;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .enterprise-plan-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 40px rgba(74, 0, 224, 0.13);
      }
      .enterprise-plan-card.popular {
        background: linear-gradient(145deg, #5b21b6, #3730a3);
        border-color: transparent;
        color: #fff;
        /* Use box-shadow and border for visual prominence instead of transform
           which causes the card to overflow the section boundary */
        box-shadow: 0 12px 50px rgba(91, 33, 182, 0.45);
        border: 2.5px solid #7c3aed;
      }
      .enterprise-plan-card.popular:hover {
        box-shadow: 0 18px 60px rgba(91, 33, 182, 0.55);
        transform: translateY(-4px);
      }
      .enterprise-plan-card .plan-badge {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(90deg, #f59e0b, #ef4444);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        padding: 0.3rem 1.1rem;
        border-radius: 50px;
        white-space: nowrap;
      }
      .enterprise-plan-card .plan-name {
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #3730a3;
        margin-bottom: 0.4rem;
      }
      .enterprise-plan-card.popular .plan-name { color: rgba(255,255,255,0.85); }
      .enterprise-plan-card .plan-tagline {
        font-size: 0.82rem;
        color: #6b7280;
        margin-bottom: 1.25rem;
        min-height: 2.5rem;
      }
      .enterprise-plan-card.popular .plan-tagline { color: rgba(255,255,255,0.7); }
      .enterprise-plan-card .plan-divider {
        border: none;
        border-top: 1px solid #e8eaf0;
        margin: 1rem 0;
      }
      .enterprise-plan-card.popular .plan-divider { border-top-color: rgba(255,255,255,0.2); }
      .enterprise-plan-card .plan-price-block {
        margin-bottom: 1.25rem;
      }
      .enterprise-plan-card .plan-from {
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #9ca3af;
      }
      .enterprise-plan-card.popular .plan-from { color: rgba(255,255,255,0.55); }
      .enterprise-plan-card .plan-amount {
        font-size: 2.6rem;
        font-weight: 800;
        line-height: 1;
        color: #1e1b4b;
      }
      .enterprise-plan-card.popular .plan-amount { color: #fff; }
      .enterprise-plan-card .plan-amount sup { font-size: 1.1rem; font-weight: 700; vertical-align: super; }
      .enterprise-plan-card .plan-amount .plan-period { font-size: 0.95rem; font-weight: 500; color: #6b7280; }
      .enterprise-plan-card.popular .plan-amount .plan-period { color: rgba(255,255,255,0.65); }
      .enterprise-plan-card .plan-no-price-label { font-size: 0.88rem; color: #9ca3af; font-style: italic; }
      .enterprise-plan-card.popular .plan-no-price-label { color: rgba(255,255,255,0.5); }
      .enterprise-plan-card .plan-features {
        list-style: none;
        padding: 0;
        margin: 0 0 1.5rem;
        flex: 1;
      }
      .enterprise-plan-card .plan-features li {
        font-size: 0.9rem;
        color: #374151;
        padding: 0.45rem 0;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }
      .enterprise-plan-card .plan-features li:last-child { border-bottom: none; }
      .enterprise-plan-card.popular .plan-features li { color: rgba(255,255,255,0.88); border-bottom-color: rgba(255,255,255,0.12); }
      .enterprise-plan-card .plan-features .feat-icon { color: #10b981; font-size: 0.85rem; flex-shrink: 0; }
      .enterprise-plan-card.popular .plan-features .feat-icon { color: #6ee7b7; }

      /* Plan admin-defined highlight text block */
      .enterprise-plan-card .plan-highlight {
        font-size: 0.88rem;
        color: #374151;
        margin: 0 0 1rem;
        line-height: 1.6;
      }
      .enterprise-plan-card .plan-highlight a {
        color: #5b21b6;
        text-decoration: underline;
      }
      .enterprise-plan-card .plan-highlight a:hover { color: #3730a3; }
      .enterprise-plan-card .plan-highlight ul {
        padding-left: 1.2rem;
        margin: 0.3rem 0 0;
      }
      .enterprise-plan-card .plan-highlight ul li {
        font-size: 0.88rem;
        color: #374151;
        padding: 0.2rem 0;
        border: none;
        display: list-item;
        list-style: disc;
      }
      .enterprise-plan-card.popular .plan-highlight { color: rgba(255,255,255,0.88); }
      .enterprise-plan-card.popular .plan-highlight a { color: #a5b4fc; }
      .enterprise-plan-card.popular .plan-highlight a:hover { color: #c7d2fe; }
      .enterprise-plan-card.popular .plan-highlight ul li { color: rgba(255,255,255,0.88); }
      .enterprise-plan-card .plan-cta {
        display: block;
        width: 100%;
        padding: 0.8rem 1rem;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.95rem;
        text-align: center;
        text-decoration: none !important;
        transition: all 0.25s ease;
        letter-spacing: 0.3px;
      }
      .enterprise-plan-card .plan-cta-outline {
        border: 2px solid #5b21b6;
        color: #5b21b6;
        background: transparent;
      }
      .enterprise-plan-card .plan-cta-outline:hover {
        background: #5b21b6;
        color: #fff;
      }
      .enterprise-plan-card.popular .plan-cta {
        background: #fff;
        color: #5b21b6;
        border: 2px solid #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.15);
      }
      .enterprise-plan-card.popular .plan-cta:hover {
        background: transparent;
        color: #fff;
      }
      .enterprise-plan-card .custom-domain-badge {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        background: rgba(16,185,129,0.12);
        color: #059669;
        border: 1px solid rgba(16,185,129,0.3);
        padding: 0.2rem 0.7rem;
        border-radius: 50px;
        margin-bottom: 0.75rem;
      }
      .enterprise-plan-card.popular .custom-domain-badge {
        background: rgba(110,231,183,0.2);
        color: #6ee7b7;
        border-color: rgba(110,231,183,0.4);
      }

      /* Pricing section header */
      .pricing-section-header { text-align: center; margin-bottom: 2.5rem; }
      .pricing-section-header .section-eyebrow {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #7c3aed;
        background: rgba(124,58,237,0.08);
        border: 1px solid rgba(124,58,237,0.18);
        padding: 0.3rem 1rem;
        border-radius: 50px;
        margin-bottom: 1rem;
      }
      .pricing-section-header h2 { font-size: 2rem; font-weight: 800; color: #1e1b4b; margin-bottom: 0.5rem; }
      .pricing-section-header p { font-size: 1rem; color: #6b7280; }

      /* Term / currency switcher styling — custom pills, no Bootstrap btn classes */
      .tc-pill-btn {
        display: inline-block;
        padding: 0.45rem 1.25rem;
        border-radius: 50px;
        border: 2px solid #7c3aed;
        background: transparent;
        color: #7c3aed;
        font-weight: 600;
        font-size: 0.88rem;
        cursor: pointer;
        margin: 0 0.15rem;
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        outline: none;
        -webkit-appearance: none;
      }
      .tc-pill-btn:hover {
        background: rgba(124, 58, 237, 0.08);
        color: #7c3aed;
      }
      .tc-pill-btn.active {
        background: #7c3aed !important;
        color: #fff !important;
        border-color: #7c3aed !important;
      }
      .tc-pill-btn:focus {
        box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.35);
      }
      #currency-switcher {
        border: 1.5px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.88rem;
        padding: 0.4rem 0.75rem;
        color: #374151;
        background: #fff;
      }

      /* ========================================
         ENTERPRISE PLAN CARDS — RESPONSIVE
         ======================================== */

      /* Tablet: 2-column layout */
      @media (max-width: 991px) {
        .enterprise-plan-card.popular {
          box-shadow: 0 8px 32px rgba(91,33,182,0.28);
        }
        .enterprise-plan-card.popular:hover {
          transform: translateY(-4px);
        }
        .enterprise-plan-card {
          padding: 1.75rem 1.5rem;
        }
        .enterprise-plan-card .plan-badge {
          top: -12px;
        }
        .pricing-section-header h2 { font-size: 1.7rem; }
          .pricing.sec-uping { margin-top: 2.5rem; margin-bottom: 0 !important; padding-top: 2.5rem; padding-bottom: 1.75rem; }
      }

      /* Mobile single-column */
      @media (max-width: 767px) {
        .enterprise-plan-card {
          padding: 1.5rem 1.25rem;
        }
        .enterprise-plan-card .plan-amount { font-size: 2.2rem; }
        .pricing-section-header h2 { font-size: 1.5rem; }
        .pricing-section-header p { font-size: 0.9rem; }
        .pricing.sec-uping { margin-top: 2rem; margin-bottom: 0 !important; padding-top: 2rem; padding-bottom: 1.5rem; }
        .tc-pill-btn {
          padding: 0.4rem 0.9rem;
          font-size: 0.82rem;
        }
      }

      @media (max-width: 575px) {
        .pricing-section-header { margin-bottom: 1.75rem; }
        .pricing-section-header h2 { font-size: 1.35rem; }
        .enterprise-plan-card .plan-amount { font-size: 2rem; }
        .enterprise-plan-card .plan-features li { font-size: 0.85rem; }
        .enterprise-plan-card .plan-cta { padding: 0.75rem 1rem; font-size: 0.9rem; }
        .enterprise-plan-card {
          padding: 1.25rem 1rem;
        }
      }

      /* ========================================
         ENTERPRISE WHY-CHOOSE SECTION
         ======================================== */
      .why-choose-enterprise {
        background: #f9fafb;
        padding: 5rem 0;
        position: relative;
        z-index: 6;
      }
      .why-choose-enterprise .sec-eyebrow {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #7c3aed;
        background: rgba(124,58,237,0.08);
        border: 1px solid rgba(124,58,237,0.18);
        padding: 0.3rem 1rem;
        border-radius: 50px;
        margin-bottom: 1rem;
      }
      .why-choose-enterprise h2 { font-size: 1.9rem; font-weight: 800; color: #1e1b4b; }
      .why-choose-enterprise .section-subheading { color: #6b7280; font-size: 1rem; margin-bottom: 3rem; }
      .why-feat-card {
        background: #fff;
        border: 1px solid #e8eaf0;
        border-radius: 14px;
        padding: 1.75rem 1.5rem;
        height: 100%;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
      }
      .why-feat-card:hover {
        box-shadow: 0 8px 32px rgba(74,0,224,0.1);
        transform: translateY(-4px);
      }
      .why-feat-card .feat-icon-wrap {
        width: 52px; height: 52px;
        border-radius: 14px;
        background: linear-gradient(135deg, #ede9fe, #ddd6fe);
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 1rem;
        font-size: 1.35rem;
        color: #7c3aed;
      }
      .why-feat-card h5 { font-size: 1rem; font-weight: 700; color: #1e1b4b; margin-bottom: 0.5rem; }
      .why-feat-card p { font-size: 0.88rem; color: #6b7280; margin-bottom: 0; line-height: 1.6; }

      /* Why Choose — responsive */
      @media (max-width: 991px) {
        .why-choose-enterprise { padding: 3.5rem 0; }
        .why-choose-enterprise h2 { font-size: 1.65rem; }
      }
      @media (max-width: 767px) {
        .why-choose-enterprise { padding: 2.5rem 0; }
        .why-choose-enterprise h2 { font-size: 1.45rem; }
        .why-feat-card { padding: 1.25rem 1rem; }
        .why-feat-card .feat-icon-wrap { width: 44px; height: 44px; font-size: 1.15rem; }
      }
      @media (max-width: 575px) {
        .why-choose-enterprise { padding: 2rem 0; }
        .why-choose-enterprise h2 { font-size: 1.25rem; }
        .why-feat-card { padding: 1rem; }
        .why-choose-enterprise .section-subheading { font-size: 0.88rem; margin-bottom: 1.75rem; }
      }

      /* ========================================
         TECH SPECS SECTION
         ======================================== */
      .specs-section {
        background: #fff;
        padding: 5rem 0;
      }
      .specs-section h2 { font-size: 1.9rem; font-weight: 800; color: #1e1b4b; }
      .specs-section .section-subheading { color: #6b7280; font-size: 1rem; margin-bottom: 2.5rem; }
      .spec-group {
        background: #f9fafb;
        border: 1px solid #e8eaf0;
        border-radius: 12px;
        padding: 1.5rem;
        height: 100%;
      }
      .spec-group .spec-group-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #7c3aed;
        margin-bottom: 1rem;
      }
      .spec-group .spec-group-title .spec-icon { color: #7c3aed; margin-right: 0.4rem; }
      .spec-group ul { list-style: none; padding: 0; margin: 0; }
      .spec-group ul li {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.9rem;
        color: #374151;
        padding: 0.45rem 0;
        border-bottom: 1px solid #e8eaf0;
      }
      .spec-group ul li:last-child { border-bottom: none; }
      .spec-group ul li .spec-icon { color: #10b981; font-size: 0.8rem; flex-shrink: 0; }

      /* Tech Specs — responsive */
      @media (max-width: 991px) {
        .specs-section { padding: 3.5rem 0; }
        .specs-section h2 { font-size: 1.65rem; }
      }
      @media (max-width: 767px) {
        .specs-section { padding: 2.5rem 0; }
        .specs-section h2 { font-size: 1.45rem; }
        .spec-group { padding: 1.25rem; }
        .spec-group ul li { font-size: 0.85rem; }
      }
      @media (max-width: 575px) {
        .specs-section { padding: 2rem 0; }
        .specs-section h2 { font-size: 1.25rem; }
        .specs-section .section-subheading { font-size: 0.85rem; }
      }

      /* ========================================
         FAQ SECTION
         ======================================== */
      .faq-enterprise {
        background: #f3f4f6;
        padding: 5rem 0;
      }
      .faq-enterprise h2 { font-size: 1.9rem; font-weight: 800; color: #1e1b4b; }
      .faq-enterprise .section-subheading { color: #6b7280; margin-bottom: 2.5rem; }
      .faq-enterprise .faq-item {
        background: #fff;
        border: 1px solid #e8eaf0;
        border-radius: 12px;
        margin-bottom: 0.75rem;
        overflow: hidden;
        transition: box-shadow 0.2s ease;
      }
      .faq-enterprise .faq-item:hover { box-shadow: 0 4px 16px rgba(74,0,224,0.07); }
      .faq-enterprise .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.5rem;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95rem;
        color: #1e1b4b;
        user-select: none;
      }
      .faq-enterprise .faq-question .faq-toggle {
        width: 28px; height: 28px;
        border-radius: 50%;
        background: #ede9fe;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        transition: background 0.2s ease, transform 0.2s ease;
      }
      .faq-enterprise .faq-question .faq-toggle i { color: #7c3aed; font-size: 0.75rem; }
      .faq-enterprise .faq-item.open .faq-question .faq-toggle {
        background: #7c3aed;
        transform: rotate(45deg);
      }
      .faq-enterprise .faq-item.open .faq-question .faq-toggle i { color: #fff; }
      .faq-enterprise .faq-answer {
        display: none;
        padding: 0 1.5rem 1.25rem;
        font-size: 0.9rem;
        color: #4b5563;
        line-height: 1.7;
        border-top: 1px solid #f3f4f6;
      }
      .faq-enterprise .faq-item.open .faq-answer { display: block; }

      /* FAQ — responsive */
      @media (max-width: 991px) {
        .faq-enterprise { padding: 3.5rem 0; }
        .faq-enterprise h2 { font-size: 1.65rem; }
      }
      @media (max-width: 767px) {
        .faq-enterprise { padding: 2.5rem 0; }
        .faq-enterprise h2 { font-size: 1.45rem; }
        .faq-enterprise .faq-question { font-size: 0.9rem; padding: 0.9rem 1.1rem; }
        .faq-enterprise .faq-answer { padding: 0 1.1rem 1rem; font-size: 0.88rem; }
      }
      @media (max-width: 575px) {
        .faq-enterprise { padding: 2rem 0; }
        .faq-enterprise h2 { font-size: 1.25rem; }
        .faq-enterprise .faq-question { font-size: 0.85rem; padding: 0.8rem 1rem; }
        .faq-enterprise .faq-answer { padding: 0 1rem 0.9rem; font-size: 0.85rem; }
        .faq-enterprise .faq-question .faq-toggle { width: 24px; height: 24px; }
      }

      /* ========================================
         GET READY CTA SECTION
         ======================================== */
      .cta-enterprise {
        background: linear-gradient(135deg, #4a00e0, #8e2de2);
        padding: 5rem 0;
        text-align: center;
      }
      .cta-enterprise h2 { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 0.75rem; }
      .cta-enterprise p { font-size: 1.05rem; color: rgba(255,255,255,0.8); margin-bottom: 2rem; }
      .cta-enterprise .cta-strip {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-bottom: 2rem;
      }
      .cta-enterprise .cta-strip span { font-size: 0.9rem; color: rgba(255,255,255,0.85); font-weight: 500; }
      .cta-enterprise .cta-strip .cta-check { color: #6ee7b7; margin-right: 0.3rem; }
      .cta-enterprise .btn-cta-white {
        background: #fff;
        color: #4a00e0;
        font-weight: 700;
        padding: 0.875rem 2.5rem;
        border-radius: 50px;
        font-size: 1rem;
        border: 2px solid #fff;
        text-decoration: none;
        transition: all 0.25s ease;
        display: inline-block;
        margin: 0.3rem;
      }
      .cta-enterprise .btn-cta-white:hover { background: transparent; color: #fff; }
      .cta-enterprise .btn-cta-outline {
        background: transparent;
        color: #fff;
        font-weight: 700;
        padding: 0.875rem 2.5rem;
        border-radius: 50px;
        font-size: 1rem;
        border: 2px solid rgba(255,255,255,0.6);
        text-decoration: none;
        transition: all 0.25s ease;
        display: inline-block;
        margin: 0.3rem;
      }
      .cta-enterprise .btn-cta-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }

      /* CTA — responsive */
      @media (max-width: 991px) {
        .cta-enterprise { padding: 3.5rem 0; }
        .cta-enterprise h2 { font-size: 1.7rem; }
      }
      @media (max-width: 767px) {
        .cta-enterprise { padding: 2.5rem 0; }
        .cta-enterprise h2 { font-size: 1.45rem; }
        .cta-enterprise p { font-size: 0.95rem; }
        .cta-enterprise .cta-strip { gap: 0.75rem; }
        .cta-enterprise .cta-strip span { font-size: 0.85rem; }
        .cta-enterprise .btn-cta-white,
        .cta-enterprise .btn-cta-outline { padding: 0.75rem 1.75rem; font-size: 0.9rem; }
      }
      @media (max-width: 575px) {
        .cta-enterprise { padding: 2rem 0; }
        .cta-enterprise h2 { font-size: 1.2rem; }
        .cta-enterprise p { font-size: 0.88rem; margin-bottom: 1.25rem; }
        .cta-enterprise .cta-strip { flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
        .cta-enterprise .btn-cta-white,
        .cta-enterprise .btn-cta-outline { display: block; width: 100%; max-width: 280px; margin: 0.3rem auto; text-align: center; padding: 0.75rem 1rem; font-size: 0.9rem; }
      }

      /* Free plan left-column benefit list */
      .top-banner .benefit-list { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; display: inline-block; }
      .top-banner .benefit-list li { font-size: 0.92rem; padding: 0.3rem 0; display: flex; align-items: center; gap: 0.55rem; }
      .top-banner .benefit-list li .bl-icon { color: #a0ffca; font-size: 0.8rem; flex-shrink: 0; }
      /* Free badge strip above tabs */
      .top-banner .free-badge {
        display: inline-flex; align-items: center; gap: 0.4rem;
        background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
        border-radius: 50px; padding: 0.3rem 1rem; font-size: 0.8rem;
        font-weight: 600; letter-spacing: 0.5px; color: #fff; margin-bottom: 1.25rem;
      }
      .top-banner .free-badge .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #a0ffca; flex-shrink: 0; }

      /* ========================================
         TABLET RANGE (768px - 1023px)
         ======================================== */
      @media (min-width: 768px) and (max-width: 1023px) {
        .top-banner {
          padding: 5rem 1.5rem 5rem;
        }

        .top-banner .heading {
          font-size: 2rem;
          margin-top: 1.25rem;
          margin-bottom: 0.6rem;
        }

        .top-banner .lead {
          font-size: 1rem;
          margin-bottom: 1.5rem;
        }

        .top-banner .subheading {
          font-size: 1.2rem;
          margin-bottom: 1rem;
        }

        /* Keep left column visible on tablets */
        .top-banner .tab-pane .col-lg-5 {
          display: block;
        }

        .top-banner .nav-tabs .nav-link {
          padding: 0.65rem 1.5rem;
          font-size: 1rem;
        }

        .top-banner .tab-content {
          padding: 1.75rem;
          margin-bottom: 3rem;
        }

        .top-banner .form-control {
          font-size: 0.9rem;
          padding: 0.65rem 0.9rem;
        }

        .top-banner .input-group-text {
          padding: 0.65rem 0.9rem;
          font-size: 0.9rem;
        }

        .top-banner .btn-primary,
        .top-banner .btn-success {
          padding: 0.75rem 2rem;
          font-size: 1rem;
        }

        .top-banner .form-group {
          margin-bottom: 0.9rem;
        }

        /* Extra spacing for pricing section on tablets */
        .pricing.sec-uping {
          margin-top: 4rem;
          margin-bottom: 0 !important;
          padding-top: 3rem;
          padding-bottom: 2rem;
        }
      }

      /* ========================================
         LARGE MOBILE RANGE (576px - 767px)
         ======================================== */
      @media (min-width: 576px) and (max-width: 767px) {
        .top-banner {
          padding: 4.5rem 1.25rem 4rem;
        }

        .top-banner .heading {
          font-size: 1.75rem;
          margin-top: 1rem;
          margin-bottom: 0.5rem;
        }

        .top-banner .lead {
          font-size: 0.95rem;
          margin-bottom: 1.25rem;
          line-height: 1.5;
        }

        .top-banner .subheading {
          font-size: 1.1rem;
          margin-bottom: 0.85rem;
        }

        /* Hide left column on large mobile */
        .top-banner .tab-pane .col-lg-5 {
          display: none !important;
        }

        .top-banner .tab-pane p {
          display: none;
        }

        .top-banner .tab-pane ul {
          display: none;
        }

        .top-banner .nav-tabs {
          margin-bottom: 1.5rem;
        }

        .top-banner .nav-tabs .nav-link {
          padding: 0.6rem 1.25rem;
          font-size: 0.95rem;
        }

        .top-banner .tab-content {
          padding: 1.5rem;
          margin-bottom: 2.5rem;
        }

        .top-banner .form-control {
          font-size: 0.9rem;
          padding: 0.6rem 0.8rem;
        }

        .top-banner .input-group-text {
          padding: 0.6rem 0.8rem;
          font-size: 0.9rem;
        }

        .top-banner .btn-primary,
        .top-banner .btn-success {
          padding: 0.7rem 1.75rem;
          font-size: 0.95rem;
          width: 100%;
        }

        .top-banner .form-group {
          margin-bottom: 0.8rem;
        }

        .pricing.sec-uping {
          margin-top: 3rem;
          margin-bottom: 0 !important;
          padding-top: 2rem;
          padding-bottom: 1.75rem;
        }
      }

      /* ========================================
         SMALL MOBILE RANGE (320px - 575px)
         ======================================== */
      @media (min-width: 320px) and (max-width: 575px) {
        .top-banner {
          padding: 4rem 1rem 3rem;
        }

        .top-banner .heading {
          font-size: 1.4rem;
          margin-top: 0.75rem;
          margin-bottom: 0.4rem;
          line-height: 1.3;
        }

        .top-banner .lead {
          font-size: 0.85rem;
          margin-bottom: 1rem;
          line-height: 1.4;
        }

        .top-banner .subheading {
          display: none;
        }

        /* Hide left column on small mobile */
        .top-banner .tab-pane .col-lg-5 {
          display: none !important;
        }

        .top-banner .tab-pane p {
          display: none;
        }

        .top-banner .tab-pane ul {
          display: none;
        }

        .top-banner .nav-tabs {
          margin-bottom: 1rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .top-banner .nav-tabs .nav-item {
          margin: 0 0.25rem;
          flex: 1;
        }

        .top-banner .nav-tabs .nav-link {
          padding: 0.5rem 0.5rem;
          font-size: 0.8rem;
          border-radius: 4px 4px 0 0;
          text-align: center;
          white-space: nowrap;
        }

        .top-banner .tab-content {
          padding: 1rem;
          margin-bottom: 2rem;
        }

        .top-banner .tab-pane .row {
          margin: 0;
        }

        .top-banner .form-group {
          margin-bottom: 0.6rem;
        }

        .top-banner .form-control {
          font-size: 0.85rem;
          padding: 0.5rem 0.7rem;
          height: auto;
        }

        .top-banner .input-group-text {
          padding: 0.5rem 0.7rem;
          font-size: 0.8rem;
        }

        .top-banner .btn-primary,
        .top-banner .btn-success {
          padding: 0.6rem 1.25rem;
          font-size: 0.85rem;
          width: 100%;
          margin-top: 0.5rem;
        }

        .top-banner .form-check {
          padding-left: 1.3rem;
          font-size: 0.85rem;
        }

        .top-banner .form-check-label {
          font-size: 0.85rem;
        }

        .top-banner .form-check-input {
          width: 1rem;
          height: 1rem;
        }

        .top-banner .small {
          font-size: 0.75rem;
        }

        .pricing.sec-uping {
          margin-top: 2.5rem;
          margin-bottom: 0 !important;
          padding-top: 1.5rem;
          padding-bottom: 1.5rem;
        }
      }

      /* ========================================
         LANDSCAPE ORIENTATION FIX
         Covers all phones in landscape mode:
         iPhone SE (667x375), iPhone 12/13/14 (844x390),
         iPhone 14 Pro Max (932x430), and similar.
         Threshold: viewport height <= 500px (landscape phone)
         ======================================== */

      @media (max-height: 500px) and (orientation: landscape) {
        /*
         * All spacing values use clamp(min, viewport-relative, max) so
         * they scale smoothly between different phone sizes:
         *   iPhone SE landscape  667 × 375 (vh = 375px)
         *   iPhone 12/13/14      844 × 390
         *   iPhone 14 Pro Max    932 × 430
         *
         * The navbar occupies roughly 14-16% of the landscape viewport
         * height on phones, so we clear it with clamp(3.2rem, 15vh, 4.5rem).
         */
        .top-banner {
          padding:
            clamp(3.2rem, 15vh, 4.5rem)          /* top — clears navbar */
            clamp(0.5rem, 2vw, 1.25rem)           /* sides */
            clamp(0.25rem, 1vh, 0.75rem);         /* bottom */
          overflow: visible;
        }

        /* Compact heading */
        .top-banner .heading {
          font-size: clamp(0.9rem, 2.5vh, 1.1rem);
          margin-top: 0;
          margin-bottom: clamp(0.1rem, 0.4vh, 0.2rem);
          line-height: 1.15;
        }

        /* Hide lead — saves ~2 lines */
        .top-banner .lead {
          display: none !important;
        }

        /* Hide verbose labels and helper text inside the form to
           reduce row count by ~3 lines without losing functionality. */
        .top-banner .form-group > label.small,
        .top-banner .form-group > .form-text {
          display: none !important;
        }

        /* Compact tab nav */
        .top-banner .nav-tabs {
          margin-bottom: clamp(0.2rem, 0.7vh, 0.4rem);
          border-bottom: 1px solid rgba(255,255,255,0.25);
        }

        .top-banner .nav-tabs .nav-item {
          margin: 0 clamp(0.1rem, 0.5vw, 0.3rem);
        }

        .top-banner .nav-tabs .nav-link {
          padding: clamp(0.2rem, 0.7vh, 0.35rem) clamp(0.6rem, 2vw, 1.2rem);
          font-size: clamp(0.72rem, 1.9vh, 0.85rem);
          border-radius: 4px 4px 0 0;
        }

        /* Compact tab content box */
        .top-banner .tab-content {
          padding: clamp(0.4rem, 1.5vh, 0.7rem) clamp(0.5rem, 2vw, 1rem);
          margin-bottom: clamp(0.2rem, 0.7vh, 0.4rem);
        }

        /* Hide info column — form gets full width */
        .top-banner .tab-pane .col-lg-5 {
          display: none !important;
        }

        /* Tighten form rows */
        .top-banner .form-group {
          margin-bottom: clamp(0.15rem, 0.5vh, 0.35rem);
        }

        .top-banner .form-control {
          font-size: clamp(0.75rem, 1.9vh, 0.9rem);
          padding: clamp(0.2rem, 0.7vh, 0.4rem) clamp(0.4rem, 1.2vw, 0.75rem);
          height: auto;
        }

        .top-banner .input-group-text {
          padding: clamp(0.2rem, 0.7vh, 0.4rem) clamp(0.4rem, 1.2vw, 0.75rem);
          font-size: clamp(0.72rem, 1.8vh, 0.85rem);
        }

        /* Make form fields 2-per-row even before sm breakpoint */
        .top-banner .tab-pane .col-lg-7 form.row > .form-group,
        .top-banner .tab-pane .col-lg-7 form.row > [class*="col-"] {
          flex: 0 0 50%;
          max-width: 50%;
        }

        /* Keep domain, terms and submit at full width */
        .top-banner .tab-pane .col-lg-7 form.row > .form-group.col-12:not([class*="col-sm"]),
        .top-banner .tab-pane .col-lg-7 form.row > .col-12.text-center {
          flex: 0 0 100%;
          max-width: 100%;
        }

        .top-banner .btn-primary,
        .top-banner .btn-success {
          padding: clamp(0.25rem, 0.9vh, 0.5rem) clamp(1rem, 5vw, 2.5rem);
          font-size: clamp(0.72rem, 1.9vh, 0.85rem);
          width: auto;
        }

        .top-banner .form-check {
          padding-left: 1.25rem;
          font-size: clamp(0.72rem, 1.8vh, 0.85rem);
        }

        .top-banner .form-check-label {
          font-size: clamp(0.72rem, 1.8vh, 0.85rem);
        }

        .top-banner .form-check-input {
          width: clamp(0.85rem, 2.2vh, 1.1rem);
          height: clamp(0.85rem, 2.2vh, 1.1rem);
        }

        .top-banner .tab-pane .row {
          margin-left: 0;
          margin-right: 0;
        }

        .pricing.sec-uping {
          margin-top: 1.5rem;
          margin-bottom: 0 !important;
          padding-top: 1rem;
          padding-bottom: 1.25rem;
        }
      }

      /* ========================================
         LANDSCAPE — MEDIUM-HEIGHT DEVICES
         (Tablets in landscape: e.g. iPad mini 744x1133 rotated
          or large phones 500px–600px viewport height)
         ======================================== */

      @media (min-height: 501px) and (max-height: 620px) and (orientation: landscape) {
        .top-banner {
          padding: 4rem 1.25rem 2.5rem;
        }

        .top-banner .heading {
          font-size: 1.4rem;
          margin-top: 0.5rem;
          margin-bottom: 0.3rem;
        }

        .top-banner .lead {
          font-size: 0.88rem;
          margin-bottom: 0.75rem;
          line-height: 1.4;
        }

        .top-banner .nav-tabs .nav-link {
          padding: 0.55rem 1.5rem;
          font-size: 0.95rem;
        }

        .top-banner .tab-content {
          padding: 1.25rem;
          margin-bottom: 1.5rem;
        }

        .top-banner .form-group {
          margin-bottom: 0.5rem;
        }

        .top-banner .form-control {
          font-size: 0.88rem;
          padding: 0.5rem 0.75rem;
          height: auto;
        }

        .top-banner .input-group-text {
          padding: 0.5rem 0.75rem;
          font-size: 0.85rem;
        }

        .top-banner .btn-primary,
        .top-banner .btn-success {
          padding: 0.55rem 1.75rem;
          font-size: 0.9rem;
        }

        .top-banner .form-check-label {
          font-size: 0.85rem;
        }

        .top-banner .small {
          font-size: 0.72rem;
        }

        .pricing.sec-uping {
          margin-top: 2rem;
          margin-bottom: 0 !important;
          padding-top: 1.5rem;
          padding-bottom: 1.5rem;
        }
      }

      /* ========================================
         CAROUSEL & CONTAINER HEIGHT FIXES
         ======================================== */
      
      /* Carousel height fixes - let the carousel size to its content */
      #owl-demo,
      #owl-demo .full,
      #owl-demo .h-100 {
        min-height: auto !important;
        height: auto !important;
      }

      /* Override global style.css: .owl-carousel .vc-parent.fix { height: 75% !important }
         ID selector wins over class selector. */
      #owl-demo .vc-parent,
      #owl-demo .vc-parent.fix {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
      }

      #owl-demo .vc-child {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        vertical-align: top !important;
      }

      #owl-demo .owl-stage-outer,
      #owl-demo .owl-stage,
      #owl-demo .owl-item,
      #owl-demo .full.h-100 {
        height: auto !important;
        min-height: 0 !important;
      }

      /*
       * PEEK EFFECT — clip only the gradient background, never the content.
       *
       * .total-grad-purple is position:absolute (top/right/bottom/left: 0)
       * so it always fills 100% of .full. Applying max-height here stops
       * the purple colour at 90dvh without touching .vc-parent or the form.
       * The form content that extends beyond 90dvh stays fully visible and
       * reachable via normal page body scroll — no inner scrollbar.
       */
      #owl-demo .total-grad-purple {
        background: linear-gradient(135deg, #14177c 0%, #1d226f 55%, #16224d 100%) !important;
        max-height: 90dvh;
        overflow: hidden;
      }

      #owl-demo .total-grad-purple .opa-purple {
        display: none;
      }

      #owl-demo .total-grad-purple,
      #owl-demo .total-grad-purple::before,
      #owl-demo .total-grad-purple::after {
        display: none !important;
      }

      #owl-demo .full.h-100 {
        background: linear-gradient(135deg, #14177c 0%, #1d226f 55%, #16224d 100%) !important;
      }

      /*
       * NAVBAR Z-INDEX FIX:
       * .menu-wrap is z-index: 9 (absolute) / z-index: 1000 (fixed).
       * Keep container below both so dropdown menus render above the banner.
       */
      .top-banner .container {
        position: relative;
        z-index: 5;
      }

#customize-plan-modal .modal-dialog { min-height: auto !important; overflow: visible !important; margin: 8vh auto 1.75rem; }
#customize-plan-modal .modal-dialog::before { display: none !important; }
#customize-plan-modal .modal-content { background-color: #fff !important; border-radius: 0.5rem !important; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.3) !important; }

/* Extracted inline style replacements */
.mail-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.mail-trust-strip-item {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
}

.mail-trust-icon {
  color: #a0ffca;
}

.mail-intro-text {
  font-size: 0.9rem;
}

.mail-feature-card {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  backdrop-filter: blur(8px);
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mail-feature-icon-wrap {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.mail-feature-icon {
  color: #c9aaff;
}

.mail-feature-title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.mail-feature-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  margin-bottom: 0;
}

.mail-trust-strip-logged-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}

.mail-trust-strip-logged-in .mail-trust-strip-item {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.mail-currency-switcher {
  width: auto;
}

.paid-plans-row {
  padding-top: 14px;
}

.plan-badge-icon {
  font-size: 0.65rem;
}

.plan-guarantee-icon {
  color: #10b981;
}

.mail-price-hidden {
  display: none;
}

/* Tighten transition from free hero to paid plans to remove the large white gap. */
#paid-plans-section.pricing.sec-uping {
  margin-top: 0 !important;
  padding-top: 0.75rem !important;
}