:root {
         --brand: #057aac;
         --brand-dark: #01304b;
         --brand-light: #eaf4ff;
         --brand-soft: #f2f8ff;
         --ink: #102542;
         --muted: #495b66;
      }

      /* body {
            margin: 0;
            color: #111111;
            font-family: "Montserrat", Arial, sans-serif;
            font-size: 1rem;
            background-color: #f7fbfd;
            background-image:
            radial-gradient(
            circle at top left,
            rgba(5, 122, 172, 0.09),
            transparent 42%
            );
            } */
      .breadcrumb {
         padding: 15px !important;
         margin-bottom: 1rem;
      }

      .sticky-top .card {
         border-radius: 14px;
         border: 1px solid #eef1f5 !important;
         box-shadow: 0 6px 20px rgba(24, 137, 238, 0.07);
      }

      .sticky-top .card-body {
         padding: 1.25rem 1rem;
         font-size: 1.15rem;
      }

      /* Corrected font size here to keep formatting clean */
      .sticky-top .card-body h4 {
         position: relative;
         padding-left: 14px;
      }

      .sticky-top .card-body h4::before {
         content: "";
         position: absolute;
         left: 0;
         top: 3px;
         bottom: 3px;
         width: 4px;
         border-radius: 4px;
         background: linear-gradient(180deg, var(--brand), var(--brand-dark));
      }

      .toc-tree {
         font-size: 13.5px;
      }

      .toc-item {
         display: flex;
         align-items: flex-start;
         gap: 6px;
         padding: 12px 10px;
         color: black;
         text-decoration: none;
         border-radius: 8px;
         cursor: pointer;
         line-height: 1.35;
         margin-bottom: 1px;
         transition:
            background-color 0.15s ease,
            color 0.15s ease,
            transform 0.15s ease;
      }

      .toc-item:hover {
         background-color: var(--brand-light);
         color: var(--brand);
         transform: translateX(2px);
      }

      .toc-item.active {
         background: #1a66b8;
         color: #fff;
         font-weight: 600;
         box-shadow: 0 4px 12px rgba(24, 137, 238, 0.35);
         transform: translateX(2px);
      }

      .toc-item.active:hover {
         color: #fff;
         transform: translateX(2px);
      }

      .toc-item.level-2 {
         font-size: 12.5px;
         padding-left: 30px;
         position: relative;
      }

      .toc-item.level-2::before {
         content: "";
         position: absolute;
         left: 16px;
         top: 50%;
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: #cfd8e3;
         transform: translateY(-50%);
         transition: background-color 0.15s ease;
      }

      .toc-item.level-2:hover::before {
         background-color: var(--brand);
      }

      .toc-item.level-2:hover {
         color: var(--brand);
      }

      .toc-item.level-2.active {
         color: #fff;
      }

      .toc-item.level-2.active::before {
         background-color: #fff;
      }

      .toc-caret {
         flex: 0 0 auto;
         width: 12px;
         font-size: 16px;
         margin-top: 2px;
         color: #adb5bd;
         transition: transform 0.18s ease;
      }

      .toc-item.has-children.open>.toc-caret {
         transform: rotate(90deg);
         color: var(--brand);
      }

      .toc-item.active>.toc-caret {
         color: #fff;
      }

      .toc-children {
         display: none;
         flex-direction: column;
         border-left: 2px solid #eef1f5;
         margin-left: 8px;
      }

      .toc-children.show {
         display: flex;
      }

      .toc-tree::-webkit-scrollbar {
         width: 5px;
      }

      .toc-tree::-webkit-scrollbar-thumb {
         background-color: #ced4da;
         border-radius: 10px;
      }

      .col-lg-9 .container {
         position: relative;
         background: #fff;
         border: 5px solid #f0f2f5;
         border-radius: 20px;
         overflow: hidden;
         box-shadow:
            0 10px 30px rgba(24, 137, 238, 0.06),
            0 2px 10px rgba(0, 0, 0, 0.03);
      }

      .col-lg-9 .container::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 10px;
         background: linear-gradient(135deg, #1955b0, #3a6edc);
         border-radius: 20px 20px 0 0;
         z-index: 0;
      }

      .col-lg-9 .container>* {
         position: relative;
         z-index: 1;
      }

      section h2 {
         border-bottom: 2px solid #e9ecef;
         padding-bottom: 0.6rem;
         margin-bottom: 1.2rem;
         margin-top: 1rem;
         position: relative;
      }

      section h2::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: -2px;
         width: 56px;
         height: 3px;
         border-radius: 4px;
         background: linear-gradient(90deg, var(--brand), var(--brand-dark));
      }

      .bi-check-circle {
         color: var(--brand);
         font-size: 1.1rem;
      }

      ul.fs-5 li span {
         color: #343a40;
         line-height: 1.6;
      }

      section a {
         color: var(--brand);
         font-weight: 500;
         text-decoration: none;
      }

      section a:hover {
         color: var(--brand-dark);
         text-decoration: underline !important;
      }

      .text-muted {
         font-size: 0.9rem;
      }

      .step-num {
         width: 30px;
         height: 30px;
         border-radius: 50%;
         background: linear-gradient(135deg, #1955b0, #3a6edc);
         color: #fff;
         font-weight: 700;
         font-size: 0.85rem;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         box-shadow: 0 3px 8px rgba(24, 137, 238, 0.35);
         margin-top: 5px;
      }

      ol.list-unstyled li {
         padding: 0.5rem 0.6rem;
         border-radius: 8px;
         transition: background-color 0.15s ease;
      }

      ol.list-unstyled li:hover {
         background-color: var(--brand-soft);
      }

      section {
         scroll-margin-top: 100px;
      }

      .compare-table {
         border-radius: 12px;
         overflow: hidden;
         box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
      }

      .compare-table th {
         background: linear-gradient(180deg, var(--brand-soft), #eaf4fe);
         font-size: 0.85rem;
         color: var(--brand-dark);
      }

      .compare-table td,
      .compare-table th {
         font-size: 0.85rem;
         vertical-align: middle;
      }

      .compare-table tbody tr:hover {
         background-color: var(--brand-soft);
      }

      .faq-item:hover {
         background-color: #fbfdff;
      }

      /* ---------- Was this helpful / related articles ---------- */
      .helpful-card {
         border: 1px solid #e9ecef;
         border-radius: 14px;
         padding: 1.25rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap;
         gap: 0.75rem;
         margin-top: 2.5rem;
         background: linear-gradient(135deg, #ffffff, var(--brand-soft));
         box-shadow: 0 6px 18px rgba(24, 137, 238, 0.07);
      }

      .helpful-card p {
         margin-bottom: 0;
         font-weight: 600;
         color: var(--ink);
         font-size: 24px;
      }

      .helpful-card .helpful-count {
         font-size: 0.85rem;
         color: #8a94a6;
         font-weight: 400;
         margin-top: 2px;
         margin-bottom: 3rem;
      }

      .helpful-btns {
         display: flex;
         gap: 0.6rem;
      }

      .helpful-btn {
         width: 42px;
         height: 42px;
         border-radius: 10px;
         border: none;
         background-color: #f1f3f5;
         color: var(--muted);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.05rem;
         cursor: pointer;
         transition:
            background-color 0.15s ease,
            color 0.15s ease,
            transform 0.15s ease;
      }

      .helpful-btn:hover {
         background-color: var(--brand);
         color: #fff;
         transform: translateY(-2px);
      }

      .helpful-btn.active {
         background-color: var(--brand);
         color: #fff;
      }

      .related-articles {
         margin-top: 2rem;
      }

      .related-articles h5 {
         font-weight: 700;
         font-size: 2rem;
         margin-bottom: 1rem;
         color: var(--ink);
         padding-bottom: 0.5rem;
         border-bottom: 2px solid var(--brand-light);
      }

      p {
         margin-top: 0;
         margin-bottom: 1rem;
         line-height: 2;
      }

      ol {
         line-height: 2;
      }

      .related-articles ul {
         list-style: none;
         padding-left: 0;
         margin-bottom: 0;
      }

      .related-articles li {
         margin-bottom: 0.85rem;
         display: flex;
         align-items: flex-start;
         gap: 8px;
         transition: transform 0.15s ease;
      }

      .related-articles li:hover {
         transform: translateX(3px);
      }

      .related-articles li i {
         color: var(--brand);
         font-size: 0.7rem;
         margin-top: 6px;
         flex-shrink: 0;
      }

      .related-articles a {
         color: var(--brand);
         font-weight: 500;
         text-decoration: none;
         line-height: 1.4;
         font-size: 0.95rem;
      }

      .related-articles a:hover {
         color: var(--brand-dark);
         text-decoration: underline;
      }

      .sticky-top {
         z-index: 1000 !important;
      }

      .navbar,
      .nav,
      nav,
      header {
         position: relative !important;
         z-index: 1060 !important;
         /* Standard Bootstrap dropdown stack layer */
      }

      .dropdown-menu,
      [class*="dropdown"],
      [class*="menu"],
      [class*="mega"] {
         z-index: 9999 !important;
         /* Maximum priority to overlap the sidebar */
      }

      .content-heading-pop {
         position: relative;
         z-index: 10;
         background: linear-gradient(135deg, #417cba, #233355);
         color: #ffff !important;
         border-radius: 10px;
         box-shadow: 0 10px 25px rgba(1, 48, 75, 0.25);
         transform-origin: left center;
         animation: tocHeadingPopup 0.65s ease-out;
      }

      section h2.content-heading-pop {
         padding: 10px 14px !important;
         border-bottom-color: transparent !important;
      }

      section h2.content-heading-pop::after {
         opacity: 0;
      }

      section h3.content-heading-pop,
      section h4.content-heading-pop {
         padding: 10px 14px !important;
         border-left-color: transparent !important;
      }

      .display-5.content-heading-pop {
         display: block;
         padding: 12px 16px !important;
         color: #ffff !important;
         -webkit-text-fill-color: #fff !important;
         background: linear-gradient(135deg, #417cba, #233355) !important;
         background-clip: border-box !important;
         -webkit-background-clip: border-box !important;
         border-radius: 10px;
         box-shadow: 0 10px 25px rgba(1, 48, 75, 0.25);
         transform-origin: left center;
         animation: tocHeadingPopup 0.65s ease-out;
      }

      @keyframes tocHeadingPopup {
         0% {
            opacity: 0;
            transform: translateY(18px) scale(0.92);
         }

         35% {
            opacity: 1;
            transform: translateY(-5px) scale(1.045);
         }

         65% {
            transform: translateY(2px) scale(0.985);
         }

         100% {
            opacity: 1;
            transform: translateY(0) scale(1);
         }
      }

      @media (max-width: 767px) {
         .content-heading-pop {
            animation-duration: 0.65s;
         }

         section h2.content-heading-pop,
         section h3.content-heading-pop,
         section h4.content-heading-pop,
         .display-5.content-heading-pop {
            padding: 8px 10px !important;
         }
      }

      @media (min-width: 1200px) {
         .display-5 {
            font-size: 2.5rem !important;
         }
      }

      @media (prefers-reduced-motion: reduce) {
         .content-heading-pop {
            animation: none;
         }
      }

      section h4:hover {
         transform: translateX(4px);
         box-shadow: 0 10px 20px rgba(5, 122, 172, 0.15);
      }

      .col-lg-9 .info-grid {
         display: grid !important;
         grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
         gap: 20px !important;
         margin: 1.25rem 0 !important;
      }

      .col-lg-9 .info-grid .info-card {
         position: relative !important;
         display: flex !important;
         flex-direction: column !important;
         width: 100% !important;
         height: 100% !important;
         padding: 22px 24px 22px 12px !important;
         border: 3px solid #366bd7 !important;
         border-radius: 14px !important;
         overflow: hidden !important;
         transform: none !important;
      }

      .col-lg-9 .info-grid .info-card::after {
         content: "" !important;
         position: absolute !important;
         top: 0 !important;
         right: 0 !important;
         left: 0 !important;
         height: 1px !important;
      }

      .col-lg-9 .info-grid .info-card h3,
      .col-lg-9 .info-grid .info-card h4,
      .col-lg-9 .info-grid .info-card h5,
      .col-lg-9 .info-grid .info-card h6,
      .col-lg-9 .info-grid .info-card .fw-bold {
         position: relative !important;
         z-index: 2 !important;
         display: flex !important;
         align-items: center !important;
         gap: 8px !important;
         padding: 0 !important;
         margin: 0 0 10px !important;
         color: #01304b !important;
         font-size: 1.22rem !important;
         font-weight: 700 !important;
         line-height: 1.4 !important;
         background: transparent !important;
         border: 0 !important;
         box-shadow: none !important;
      }

      .col-lg-9 .info-grid .info-card h3::before,
      .col-lg-9 .info-grid .info-card h4::before,
      .col-lg-9 .info-grid .info-card h5::before,
      .col-lg-9 .info-grid .info-card h6::before,
      .col-lg-9 .info-grid .info-card .fw-bold::before {
         content: "✓";
         display: inline-block;
         margin-right: 8px;
         color: #198754;
         font-size: 18px;
         font-weight: 700;
         line-height: 1;
         background: none;
         border: none;
         width: auto;
         height: auto;
      }

      .col-lg-9 .info-grid .info-card p,
      .col-lg-9 .info-grid .info-card ul {
         position: relative !important;
         z-index: 2 !important;
         margin-bottom: 0 !important;
         color: #495b66 !important;
         font-size: 1rem !important;
         line-height: 1.9 !important;
      }

      .col-lg-9 .info-grid .info-card:hover {
         background: linear-gradient(to right, #ffffff, #f9fdff) !important;
         border-color: #185ea6 !important;
         box-shadow:
            0 5px 14px rgba(5, 122, 172, 0.12),
            0 12px 30px rgba(5, 122, 172, 0.13) !important;
         transform: none !important;
      }

      @media (max-width: 991px) {
         .col-lg-9 .info-grid {
            grid-template-columns: 1fr !important;
         }
      }

      @media (max-width: 767px) {
         .col-lg-9 .info-grid {
            gap: 16px !important;
         }

         .col-lg-9 .info-grid .info-card {
            padding: 18px 18px 18px 22px !important;
         }

         .col-lg-9 .info-grid .info-card h3,
         .col-lg-9 .info-grid .info-card h4,
         .col-lg-9 .info-grid .info-card h5,
         .col-lg-9 .info-grid .info-card h6 {
            font-size: 1.1rem !important;
         }
      }

      #t2t,
      #lic,
      #limited,
      #config,
      #usermap,
      #cutover {
         scroll-margin-top: 110px;
      }

      section h4 {
         position: relative;

         margin: 2rem 0 1.2rem;
         padding: 16px 20px 16px 24px;

         color: #01304b !important;

         border: 1px solid #bdefff;
         border-left: 6px solid #057aac;

         border-radius: 14px;

         box-shadow: 0 6px 18px rgba(5, 122, 172, 0.1);
         font-size: 22px;
         font-weight: 700;
      }

      /* Remove top strip */
      section h4::before {
         display: none !important;
         content: none !important;
      }

      .faq-item {
         position: relative;
         padding: 20px 24px;
         margin-bottom: 14px;
         background: #ffffff;
         border: 1px solid #dceff6;
         border-radius: 12px;
         box-shadow: 0 4px 12px rgba(5, 122, 172, 0.06);
      }

      .faq-q {
         display: flex;
         align-items: flex-start;
         gap: 14px;
         margin: 0 0 12px 0 !important;
         color: #102532 !important;
         font-size: 1.05rem;
         font-weight: 700;
         line-height: 1.5;
      }

      .faq-q::before {
         content: "?";
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 30px;
         width: 30px;
         height: 30px;
         margin-top: 1px;
         color: #ffffff;
         font-size: 15px;
         font-weight: 700;
         line-height: 30px;
         text-align: center;
         background: linear-gradient(135deg, #1955b0, #3a6edc);
         border-radius: 50%;
         box-shadow: 0 4px 10px rgba(5, 122, 172, 0.2);
      }

      .faq-a {
         padding-left: 44px;
         margin: 0 !important;
         color: #495b66 !important;
         font-size: 1rem;
         line-height: 1.9;
      }

      .faq-a strong {
         font-weight: 700;
      }

      @media (max-width: 767px) {
         .faq-item {
            padding: 16px;
         }

         .faq-q {
            gap: 10px;
            font-size: 1rem;
         }

         .faq-q::before {
            flex-basis: 26px;
            width: 26px;
            height: 26px;
            font-size: 13px;
            line-height: 26px;
         }

         .faq-a {
            padding-left: 36px;
         }
      }

      .shadow-box {
         background: #fff;
         border: 1px solid #1a66b8;
         border-radius: 15px;
         padding: 30px;
         box-shadow:
            0 5px 15px rgba(0, 0, 0, 0.08),
            0 15px 35px rgba(43, 108, 176, 0.15);
      }

      #Contents .info-card h6::before,
      #Contents .info-card h3::before {
         display: none !important;
         content: none !important;
      }

      #Contents .card-title {
         display: flex;
         align-items: flex-start;
         gap: 12px !important;
         font-weight: 700;
         color: #102532;
         line-height: 1.4;
      }

      #Contents .title-icon {
         width: 42px;
         height: 42px;
         min-width: 42px;
         background: #eaf4ff;
         border: 1px solid #1a66b8;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
      }

      #Contents .title-icon i {
         color: #1a66b8;
         font-size: 18px;
      }

      .feature-list {
         list-style: none;
         padding: 0;
         margin: 0;
      }

      .feature-list li {
         display: flex;
         align-items: flex-start;
         gap: 12px;
         margin-bottom: 18px;
         color: #495b66;
         line-height: 1.8;
      }

      .feature-list li i {
         color: #1a66b8;
         font-size: 18px;
         margin-top: 4px;
         flex-shrink: 0;
      }

      .feature-list li span {
         flex: 1;
      }

      .article-subheading {
         color: #102542;
         padding-left: 16px;
         border-left: 5px solid #0d2344;
         margin: 35px 0 18px;
         line-height: 1.4;
      }

      .new-heading {
         color: #1a66b8;
         font-size: 20px;
         font-weight: 600;
         margin: 20px 0 12px;
         padding-bottom: 6px;
         border-bottom: 1px solid #d9e6f5;
      }

      @font-face {
         font-display: swap;
         font-family: Mulish;
         font-style: normal;
         font-weight: 400;
         src: local("Mulish"), url(https://www.arysontechnologies.com/dit/fonts/Mulish-Regular.woff2) format("woff2")
      }

      @font-face {
         font-display: swap;
         font-family: Mulish;
         font-style: normal;
         font-weight: 500;
         src: local("Mulish"), url(https://www.arysontechnologies.com/dit/fonts/Mulish-Bold.woff2) format("woff2")
      }