.m-minus {
    margin-left: -45px;
 }
 
 .h1-banner .text ul {
    list-style-type: none;
 }
 
 .h1-banner .text .icon-list:not(.row-list) ul li {
    font-size: 20px;
    margin-bottom: 10px;
    color: #393939;
 }
 
 .text.shart-space p {
    margin: 10px 0 20px;
 }
 
 /* pricing-section  */
 
 .outline-card {
    border: 1px solid #dadada;
    border-radius: 12px;
    padding: 20px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: space-between;
 }
 
 .card-featured {
    border: 1px solid var(--blue);
    position: relative;
    padding-top: 50px;
 }
 
 .pricing-section .row > div {
    padding-top: 30px;
 }
 
 .pricing-section .row > div:has(.card-featured) {
    padding-top: 0;
 }
 .popular-tag {
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    margin: auto;
    background: var(--blue);
    color: white;
    padding: 8px 20px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 500;
    width: max-content;
 }
 
 .price-text {
    font-size: 36px;
    font-weight: 700;
    color: var(--blue);
 }
 
 .price-text span {
    font-size: 20px;
    font-weight: normal;
    color: var(--gray);
 }
 
 .outline-card .sub-title {
    padding: 4px 15px;
    background-color: #e6f1fa;
 }
 
 .outline-card h5 {
    font-size: 20mpx;
    font-weight: 600;
    color: var(--black);
 }
 
 .outline-card p {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--gray);
    margin-top: 8px;
 }
 
 .outline-card .main-price > p {
    font-size: 16px;
    margin-bottom: 40px;
 }
 
 .main-index .bttn-outline-primary {
    background-color: transparent;
    color: var(--blue);
    border-color: var(--blue);
 }
 
 .main-index .bttn-outline-primary:hover {
    background-color: var(--blue);
    color: white;
 }
 
 .outline-card .bttn-2 {
    width: 100%;
    padding: 9px 15px;
    font-size: 16px;
 }
 
 .outline-card .icon-list ul li:not(:last-child) {
    margin-bottom: 10px;
 }
 
 .outline-card .icon-list ul li {
    font-weight: 500;
 }
 
 .table-container {
    border-radius: 16px 16px 0 0;
    overflow: auto;
    box-shadow: -9px 0px 30px 0px rgba(0, 117, 196, 0.12);
 }
 
 .table-container::-webkit-scrollbar {
    display: none;
 }
 
 .table-container .table {
    background-color: white;
    white-space: nowrap;
 }
 
 .table-container .table th {
    background-color: var(--blue);
    color: white;
    font-size: 24px;
    font-weight: 600;
 }
 
 .table-container .table th,
 .table-container .table td {
    padding: 20px 24px;
 }
 
 .table-container .table tbody td {
    border-bottom: 1px solid #d9d9d9;
    color: var(--gray);
    font-size: 16px;
    font-weight: 400;
 }
 
 .table-container .table tbody tr {
    transition: 0.3s all ease;
 }
 
 .table-container .table tbody tr:last-child td {
    border-bottom: transparent;
 }
 
 .table-container .table tbody tr:hover,
 .table-container .table tbody tr.active {
    background-color: rgba(0, 117, 196, 0.16);
 }
 
 .main-index .white-outline {
    border-color: white;
    color: white;
    background-color: transparent;
 }
 
 .main-index .white-outline:hover {
    background-color: var(--black);
    color: white;
    border-color: transparent;
 }
 
 /* --- toggle manu start --- */
 
 .main-index {
    --bar-width: 30px;
    --bar-height: 4px;
    --bar-spacing: 12px;
    --transition-speed: 0.4s;
    --bar-color: var(--blue);
 }
 
 .main-index .navbar-toggler .navbar-toggler-icon i {
    display: none;
 }
 
 .navbar-toggler {
    width: var(--bar-width);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    position: relative;
 }
 
 .navbar-toggler .navbar-toggler-icon {
    width: 100%;
    height: var(--bar-height);
    background-color: var(--bar-color);
    border-radius: var(--bar-height);
    transition: all var(--transition-speed);
    position: relative;
 }
 
 .navbar-toggler .navbar-toggler-icon::before,
 .navbar-toggler .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    height: var(--bar-height);
    background-color: var(--bar-color);
    border-radius: var(--bar-height);
    transition: all var(--transition-speed);
 }
 
 .navbar-toggler .navbar-toggler-icon::before {
    top: calc(var(--bar-spacing) * -1);
    width: 70%;
    right: 0;
    left: auto;
 }
 
 .navbar-toggler .navbar-toggler-icon::after {
    bottom: calc(var(--bar-spacing) * -1);
    width: 50%;
    left: auto;
    right: 0;
 }
 
 .navbar-toggler.active span {
    background-color: transparent;
    transform: translateX(-20px);
 }
 
 .navbar-toggler.active span::before {
    top: 0;
    width: 100%;
    transform: translateX(20px) rotate(45deg);
 }
 
 .navbar-toggler.active span::after {
    bottom: 0;
    width: 100%;
    transform: translateX(20px) rotate(-45deg);
 }
 
 /* --- toggle manu end --- */
 
 @media (max-width: 1199px) {
    .pricing-section .row > div {
       padding-top: 0;
    }
 }
 
 @media (max-width: 991px) {
    .h1-banner .m-minus {
       margin: 0;
    }
 
    /* --- toggle manu start --- */
    .main-index .navbar-collapse {
       box-shadow: -9px 0px 30px 0px rgba(0, 117, 196, 0.12);
    }
    /* --- toggle manu start --- */
 }
 
 @media (max-width: 767px) {
    .h1-banner h1 {
       font-size: 35px;
    }
 
    .h1-banner .text .icon-list:not(.row-list) ul li {
       font-size: 16px;
    }
 
    .table-container .table th,
    .table-container .table td {
       padding: 10px 20px;
    }
 
    .table-container .table th {
       font-size: 18px;
    }
 
    .table-container .table tbody td,
    .outline-card .main-price p {
       font-size: 14px;
    }
 
    .outline-card {
       gap: 30px;
    }
 
    .outline-card .main-price > p {
       margin-bottom: 30px;
    }
    .outline-card .icon-list ul li:not(:last-child) {
       margin-bottom: 5px;
    }
 }

/* Plan picker (onboarding / profile): selected plan uses same blue border as Most Popular */
.pricing-section .outline-card.pricing-plan-card-selected {
    border: 1px solid var(--blue);
}

/* When another plan is selected, Most Popular column shows neutral border + badge */
.pricing-section .outline-card.card-featured.card-featured-muted {
    border-color: #dadada;
}
.pricing-section .popular-tag.popular-tag-muted {
    background: #adb5bd;
    color: #fff;
}