/* Public website: active navigation + content pages (policy, jobs) */

/* ---------- Active navigation link ---------- */
.header .right ul li a.active {
    background: #fff;
    color: #FE0000;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.header .right ul li a.active:hover {
    color: #FE0000;
}

@media only screen and (max-width: 575px) {
    .header .right ul li a.active {
        border-radius: 0;
        box-shadow: none;
        border-left: 5px solid #FE0000;
        background: #fff;
    }
}

/* ---------- Page hero ---------- */
.page-hero {
    background: linear-gradient(135deg, #FE0000 0%, #a80000 100%);
    color: #fff;
    padding: 38px 0 34px;
}

.page-hero h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.2;
}

.page-hero p {
    margin: 0;
    font-size: 16px;
    opacity: 0.92;
}

/* ---------- Layout ---------- */
.page-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.page-content {
    flex: 1;
    min-width: 0;
    max-width: 900px;
    color: #333;
    font-size: 16px;
    line-height: 1.75;
}

.page-content p {
    margin: 0 0 14px;
}

.page-content ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.page-content li {
    margin-bottom: 4px;
}

.page-content a {
    color: #FE0000;
}

/* ---------- Table of contents ---------- */
.page-toc {
    width: 270px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fafafa;
}

.page-toc .toc-inner {
    padding: 16px 6px 12px;
}

.page-toc h3 {
    margin: 0 12px 10px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #777;
}

.page-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-toc li.toc-group {
    margin: 12px 12px 4px;
    font-size: 12px;
    font-weight: bold;
    color: #FE0000;
    text-transform: uppercase;
}

.page-toc li a {
    display: block;
    padding: 5px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #444;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.page-toc li a:hover {
    background: #f0f0f0;
}

.page-toc li a.active {
    color: #FE0000;
    font-weight: bold;
    border-left-color: #FE0000;
    background: #fff;
}

/* ---------- Policy ---------- */
.policy-group + .policy-group {
    margin-top: 44px;
    padding-top: 30px;
    border-top: 2px solid #eee;
}

.policy-body .group-title {
    margin: 0 0 22px;
    font-size: 24px;
    color: #111;
}

.policy-body h4 {
    margin: 30px 0 10px;
    padding-left: 12px;
    font-size: 19px;
    color: #111;
    border-left: 4px solid #FE0000;
    scroll-margin-top: 20px;
}

.policy-body h4:first-of-type {
    margin-top: 0;
}

/* ---------- Jobs ---------- */
.job-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 22px 26px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.job-card h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-size: 19px;
    color: #111;
    border-bottom: 2px solid #FE0000;
    display: inline-block;
}

.job-card p:last-child,
.job-card ul:last-child {
    margin-bottom: 0;
}

.job-highlight {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.job-highlight div {
    flex: 1;
    min-width: 190px;
    padding: 16px 20px;
    border-radius: 8px;
    background: #fff5f5;
    border: 1px solid #ffd6d6;
}

.job-highlight strong {
    display: block;
    font-size: 24px;
    color: #FE0000;
}

.job-highlight span {
    font-size: 14px;
    color: #555;
}

.job-apply {
    text-align: center;
    padding: 26px;
    border-radius: 8px;
    background: #111;
    color: #fff;
}

.job-apply p {
    margin: 0 0 16px;
}

.job-apply a.apply-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 6px;
    background: #FE0000;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.job-apply a.apply-btn:hover {
    background: #d30000;
}

/* ---------- Mobile ---------- */
@media only screen and (max-width: 860px) {
    .page-layout {
        display: block;
    }

    .page-toc {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .page-hero h1 {
        font-size: 24px;
    }

    .job-card {
        padding: 18px;
    }
}

/* ---------- Request a quote page ---------- */
.footer-quote-btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 5px;
    background: #FE0000;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
}

.footer-quote-btn:hover {
    background: #d30000;
    text-decoration: none;
}

.header-bottom .header-area .menu li a.active {
    color: #FE0000;
    box-shadow: inset 0 -3px 0 #FE0000;
}

.quote-hero {
    padding: 70px 0 50px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #5350ff 0%, #2b27c7 100%);
}

.quote-hero .cate {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #dfe4ff;
    opacity: 1;
}

.quote-hero h1 {
    margin: 0 0 10px;
    font-size: 40px;
    color: #fff;
}

.quote-hero p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 17px;
    opacity: 0.92;
}

.quote-page {
    padding: 50px 0 70px;
    background: #f6f7fb;
}

.quote-heading {
    margin: 0 0 20px;
    font-size: 24px;
    color: #1d2033;
}

.quote-benefits {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.quote-benefits li {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.quote-benefits li > i {
    flex: 0 0 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: #e9e8ff;
    color: #5350ff;
    font-size: 18px;
}

.quote-benefits strong {
    display: block;
    color: #1d2033;
}

.quote-benefits span {
    color: #5c6078;
    font-size: 15px;
}

.quote-contact {
    padding: 20px;
    border: 1px dashed #c9cbe4;
    border-radius: 10px;
    background: #fff;
}

.quote-contact strong {
    display: block;
    margin-bottom: 10px;
    color: #1d2033;
}

.quote-whatsapp {
    display: inline-block;
    margin-right: 14px;
    padding: 9px 18px;
    border-radius: 6px;
    background: #25a244;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
}

.quote-whatsapp:hover {
    background: #1d8a38;
}

.quote-phone {
    color: #5c6078;
    white-space: nowrap;
}

.quote-card {
    padding: 34px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(40, 40, 120, 0.1);
}

.quote-alert {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fdecec;
    border: 1px solid #f5b5b5;
    color: #a61e1e;
    font-weight: 600;
}

.quote-alert.quote-alert-ok {
    background: #e8f7ee;
    border-color: #9fd8b3;
    color: #176a37;
}

.quote-field {
    margin-bottom: 20px;
}

.quote-row {
    display: flex;
    gap: 16px;
}

.quote-row .quote-field {
    flex: 1;
    min-width: 0;
}

.quote-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #1d2033;
}

.quote-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d5d8e8;
    border-radius: 8px;
    background: #fff;
    color: #1d2033;
    font-size: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.quote-field input:focus {
    outline: 0;
    border-color: #5350ff;
    box-shadow: 0 0 0 3px rgba(83, 80, 255, 0.18);
}

.quote-field.has-error input {
    border-color: #d93025;
    background: #fff8f8;
}

.quote-error {
    display: block;
    min-height: 0;
    margin-top: 5px;
    color: #d93025;
    font-size: 13px;
}

.quote-hint {
    display: block;
    margin-top: 6px;
    color: #6b6f86;
    font-size: 13px;
}

.quote-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.quote-chip {
    padding: 7px 16px;
    border: 1px solid #d5d8e8;
    border-radius: 20px;
    background: #fff;
    color: #3b3f58;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.quote-chip:hover {
    border-color: #5350ff;
    color: #5350ff;
}

.quote-chip.active {
    background: #5350ff;
    border-color: #5350ff;
    color: #fff;
}

.quote-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.quote-submit {
    position: relative;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 8px;
    background: #5350ff;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}

.quote-submit:hover {
    background: #3d3ae0;
}

.quote-submit:disabled {
    background: #8f8dff;
    cursor: default;
}

.quote-spinner {
    display: none;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    vertical-align: middle;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: quote-spin 0.8s linear infinite;
}

.quote-submit.is-busy .quote-spinner {
    display: inline-block;
}

@keyframes quote-spin {
    to { transform: rotate(360deg); }
}

.quote-privacy {
    margin: 14px 0 0;
    text-align: center;
    color: #6b6f86;
    font-size: 13px;
}

.quote-success {
    padding: 20px 0;
    text-align: center;
}

.quote-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    line-height: 72px;
    border-radius: 50%;
    background: #e3f6e8;
    color: #1e8a3c;
    font-size: 30px;
}

.quote-success h2 {
    margin-bottom: 10px;
    color: #1d2033;
}

.quote-success p {
    max-width: 440px;
    margin: 0 auto 24px;
    color: #5c6078;
}

.quote-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.quote-btn-main,
.quote-btn-light {
    padding: 11px 24px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
}

.quote-btn-main {
    background: #5350ff;
    color: #fff !important;
}

.quote-btn-light {
    background: #25a244;
    color: #fff !important;
}

.quote-btn-link {
    border: 0;
    background: none;
    color: #5350ff;
    text-decoration: underline;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

@media (max-width: 575px) {
    .quote-hero {
        padding: 50px 0 36px;
    }

    .quote-hero h1 {
        font-size: 30px;
    }

    .quote-card {
        padding: 22px 18px;
    }

    .quote-row {
        display: block;
    }
}

/* ---------- Login (one time code) ---------- */
.login-page {
    padding: 60px 0 80px;
    background: #f6f7fb;
}

.login-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 36px 34px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(40, 40, 120, 0.1);
}

.login-card h1 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #1d2033;
    text-align: center;
}

.login-logo {
    display: block;
    height: 56px;
    margin: 0 auto 14px;
}

.login-sub {
    margin: 0 0 22px;
    text-align: center;
    color: #5c6078;
}

.login-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.login-channel {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.login-channel input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.login-channel span {
    display: block;
    padding: 11px 12px;
    border: 1px solid #d5d8e8;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #3b3f58;
    transition: all 0.15s;
}

.login-channel input:checked + span {
    border-color: #5350ff;
    background: #eeeeff;
    color: #3d3ae0;
    box-shadow: 0 0 0 2px rgba(83, 80, 255, 0.18);
}

.login-channel input:focus-visible + span {
    outline: 2px solid #5350ff;
}

.login-sent {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #e9f7ee;
    color: #1e6b3a;
    font-weight: 600;
    text-align: center;
}

#login-code {
    font-size: 24px;
    letter-spacing: 6px;
    text-align: center;
}

.login-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.login-links .quote-btn-link:disabled {
    color: #8b8fa6;
    text-decoration: none;
    cursor: default;
}

.login-foot {
    margin: 24px 0 0;
    text-align: center;
    color: #5c6078;
}

.dashboard-balance {
    margin: 0 0 22px;
    padding: 18px;
    border-radius: 10px;
    background: #f1f2ff;
    text-align: center;
}

.dashboard-balance span {
    display: block;
    color: #5c6078;
    font-size: 14px;
}

.dashboard-balance strong {
    font-size: 28px;
    color: #1d2033;
}

.dashboard-card {
    text-align: center;
}

@media (max-width: 575px) {
    .login-card {
        padding: 26px 20px;
    }

    .login-channels {
        grid-template-columns: 1fr;
    }
}

/* ---------- Pricing ---------- */
.pricing-page {
    padding: 56px 0 30px;
    background: #f6f7fb;
}

.pricing-page.pricing-ussd {
    padding-top: 30px;
    padding-bottom: 60px;
}

.pricing-head {
    margin-bottom: 26px;
    text-align: center;
}

.pricing-head h2 {
    margin: 0 0 6px;
    font-size: 30px;
    color: #1d2033;
}

.pricing-head p {
    margin: 0;
    color: #5c6078;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    max-width: 880px;
    margin: 0 auto;
}

.pricing-grid-two {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.price-card {
    padding: 28px 26px;
    border: 1px solid #e3e5f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(40, 40, 120, 0.07);
    transition: transform 0.15s, box-shadow 0.15s;
}

.price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(40, 40, 120, 0.12);
}

.price-country {
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #1d2033;
}

.price-country i {
    margin-right: 6px;
    color: #5350ff;
}

.price-amount {
    margin-bottom: 18px;
    color: #1d2033;
}

.price-amount .symbol {
    font-size: 22px;
    font-weight: 700;
    vertical-align: top;
    color: #5350ff;
}

.price-amount .value {
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
}

.price-amount .per {
    margin-left: 6px;
    color: #6b6f86;
    font-size: 15px;
}

.price-points {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.price-points li {
    margin-bottom: 8px;
    color: #4a4e66;
}

.price-points i {
    margin-right: 6px;
    color: #1e8a3c;
}

.price-note {
    margin: -6px 0 14px;
    color: #6b6f86;
    font-size: 14px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table td {
    padding: 12px 0;
    border-top: 1px solid #eceef8;
    color: #1d2033;
}

.price-table td:last-child {
    text-align: right;
    font-weight: 700;
}

.price-btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 8px;
    background: #5350ff;
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.price-card .price-btn {
    display: block;
}

.price-btn:hover {
    background: #3d3ae0;
    text-decoration: none;
}

.price-btn-green {
    background: #25a244;
}

.price-btn-green:hover {
    background: #1d8a38;
}

.price-btn-light {
    background: #fff;
    color: #3d3ae0 !important;
}

.price-btn-light:hover {
    background: #eeeeff;
}

.pricing-download {
    margin: 22px 0 0;
    text-align: center;
}

.pricing-download a {
    color: #3d3ae0;
    font-weight: 600;
}

.pricing-other {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 880px;
    margin: 30px auto 0;
    padding: 18px 22px;
    border: 1px dashed #c9cbe4;
    border-radius: 12px;
    background: #fff;
    color: #4a4e66;
}

.pricing-other > i {
    font-size: 26px;
    color: #25a244;
}

.pricing-other > div {
    flex: 1;
}

.pricing-other strong {
    display: block;
    color: #1d2033;
}

.pricing-cta {
    padding: 60px 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #5350ff 0%, #2b27c7 100%);
}

.pricing-cta h2 {
    margin: 0 0 8px;
    font-size: 30px;
    color: #fff;
}

.pricing-cta p {
    margin: 0 0 22px;
    opacity: 0.92;
}

.pricing-trusted {
    padding: 50px 0 60px;
    background: #fff;
    text-align: center;
}

.pricing-trusted h2 {
    margin: 0 0 24px;
    font-size: 24px;
    color: #1d2033;
}

.trusted-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}

.trusted-row > div {
    width: 190px;
}

.trusted-row img {
    display: block;
    width: 100%;
    height: 110px;
    margin-bottom: 10px;
    object-fit: contain;
    border: 1px solid #eceef8;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.trusted-row span {
    color: #4a4e66;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 575px) {
    .pricing-other {
        flex-direction: column;
        text-align: center;
    }

    .pricing-head h2,
    .pricing-cta h2 {
        font-size: 24px;
    }

    .trusted-row > div {
        width: 140px;
    }
}

/* ---------- USSD quote pop-up ---------- */
.price-btn-button {
    border: 0;
    cursor: pointer;
    font-size: 16px;
}

body.uq-open {
    overflow: hidden;
}

.uq-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 20, 50, 0.6);
}

.uq-modal[hidden] {
    display: none !important;
}

.uq-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 32px 30px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.uq-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #6b6f86;
    cursor: pointer;
}

.uq-close:hover {
    background: #eeeeff;
    color: #1d2033;
}

.uq-dialog h2 {
    margin: 0 0 6px;
    font-size: 26px;
    color: #1d2033;
}

.uq-sub {
    margin: 0 0 22px;
    color: #5c6078;
}

.uq-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.uq-options-stack {
    flex-direction: column;
}

.uq-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.uq-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.uq-option span {
    display: block;
    padding: 10px 18px;
    border: 1px solid #d5d8e8;
    border-radius: 8px;
    font-weight: 600;
    color: #3b3f58;
    transition: all 0.15s;
}

.uq-option input:checked + span {
    border-color: #5350ff;
    background: #eeeeff;
    color: #3d3ae0;
    box-shadow: 0 0 0 2px rgba(83, 80, 255, 0.18);
}

.uq-option input:focus-visible + span {
    outline: 2px solid #5350ff;
}

/* the quote itself */
.uq-document {
    padding: 4px 2px 10px;
    color: #1d2033;
}

.uq-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 3px solid #5350ff;
}

.uq-brand {
    font-size: 26px;
    font-weight: 800;
    color: #5350ff;
}

.uq-doc-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b6f86;
}

.uq-meta {
    text-align: right;
    font-size: 14px;
    color: #4a4e66;
}

.uq-to {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 18px 0;
}

.uq-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b6f86;
}

.uq-to strong {
    font-size: 18px;
}

.uq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.uq-table th,
.uq-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eceef8;
}

.uq-table thead td {
    background: #f1f2ff;
    font-weight: 700;
    color: #3b3f58;
}

.uq-table .num {
    text-align: right;
    white-space: nowrap;
}

.uq-strong {
    font-weight: 800;
    font-size: 15px;
}

.uq-muted td {
    color: #6b6f86;
}

.uq-fee {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 18px 0 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f6f7fb;
}

.uq-fee span {
    color: #5c6078;
    font-size: 14px;
}

.uq-notes {
    margin: 0;
    padding-left: 18px;
    color: #5c6078;
    font-size: 13px;
}

.uq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.uq-actions button.quote-btn-main {
    border: 0;
    cursor: pointer;
    font-size: 16px;
}

@media (max-width: 575px) {
    .uq-dialog {
        padding: 26px 18px;
    }

    .uq-head {
        flex-direction: column;
    }

    .uq-meta {
        text-align: left;
    }

    .uq-table {
        font-size: 13px;
    }
}

@media print {
    body.uq-printing > *:not(.uq-modal) {
        display: none !important;
    }

    body.uq-printing .uq-modal {
        position: static;
        padding: 0;
        background: none;
        display: block;
    }

    body.uq-printing .uq-dialog {
        max-width: none;
        max-height: none;
        padding: 0;
        overflow: visible;
        box-shadow: none;
    }

    body.uq-printing .uq-close,
    body.uq-printing .uq-actions {
        display: none !important;
    }
}

/* ---------- Login note: where the code arrives ---------- */
.login-note {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 16px;
    border-left: 4px solid #5350ff;
    border-radius: 0 8px 8px 0;
    background: #f1f2ff;
    color: #3b3f58;
    font-size: 14px;
    line-height: 1.5;
}

.login-note i {
    margin-top: 3px;
    color: #5350ff;
}

.login-note p {
    margin: 0;
}

/* ---------- Pages without a banner (login, dashboard): the white menu needs a dark band behind it ---------- */
.login-page {
    padding-top: 130px;
    background:
        linear-gradient(135deg, #5350ff 0%, #2b27c7 100%) top / 100% 300px no-repeat,
        #f6f7fb;
}

.login-channel span i {
    margin-right: 6px;
}

.hero-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

.hero-link:hover {
    color: #fff;
    opacity: 0.85;
}

/* the active menu link: white on the dark banner (the menu is white everywhere on this site) */
.header-bottom .header-area .menu li a.active {
    color: #fff;
    font-weight: 800;
    box-shadow: inset 0 -3px 0 #fff;
}

/* ---------- Logo on quotes ---------- */
.quote-card-logo {
    display: block;
    height: 60px;
    width: auto;
    margin: 0 0 18px;
}

.uq-logo {
    display: block;
    height: 62px;
    width: auto;
    margin-bottom: 6px;
}

/* ---------- About ---------- */
.about-section {
    padding: 56px 0;
    background: #fff;
}

.about-section.about-alt {
    background: #f6f7fb;
}

.about-heading {
    margin: 0 0 16px;
    font-size: 28px;
    color: #1d2033;
}

.about-section p {
    color: #4a4e66;
    line-height: 1.75;
}

.about-section a {
    color: #3d3ae0;
    font-weight: 600;
}

.about-owner {
    padding: 28px;
    border: 1px solid #e3e5f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(40, 40, 120, 0.08);
    text-align: center;
}

.about-owner img {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 14px;
}

.about-owner-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b6f86;
}

.about-owner strong {
    display: block;
    margin-bottom: 14px;
    font-size: 22px;
    color: #1d2033;
}

.about-owner ul {
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid #eceef8;
    text-align: left;
    color: #4a4e66;
}

.about-owner li {
    margin-bottom: 8px;
}

.about-owner li i {
    width: 22px;
    color: #5350ff;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
}

.about-grid-three {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.about-card {
    padding: 26px 24px;
    border: 1px solid #e3e5f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(40, 40, 120, 0.06);
}

.about-card > i {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    line-height: 48px;
    text-align: center;
    border-radius: 12px;
    background: #e9e8ff;
    color: #5350ff;
    font-size: 20px;
}

.about-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
    color: #1d2033;
}

.about-card p {
    margin: 0;
    font-size: 15px;
}

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-tags li {
    padding: 8px 16px;
    border-radius: 20px;
    background: #eeeeff;
    color: #3d3ae0;
    font-weight: 600;
    font-size: 14px;
}

.pricing-cta .price-btn {
    margin: 4px 6px;
}

/* ---------- Quotes carry the WGIT logo ---------- */
.quote-card-logo {
    display: block;
    height: 60px;
    width: auto;
    margin: 0 0 18px;
}

.uq-logo {
    display: block;
    height: 62px;
    width: auto;
    margin-bottom: 6px;
}

.uq-meta-line {
    font-size: 13px;
    color: #6b6f86;
}

/* ---------- Login: step 2 ---------- */
.login-card {
    scroll-margin-top: 110px; /* stays below the fixed menu when the page scrolls to it */
}

#login-code::placeholder {
    font-size: 15px;
    letter-spacing: 0;
    font-weight: 400;
}

.login-sent {
    text-align: left;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.35;
}

.login-sent strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.35;
}

.login-sent ul {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
}

.login-sent ul li {
    margin: 0;
    padding: 0;
}

.login-sent ul li i {
    width: 18px;
    text-align: center;
}

.login-sent-hint {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;
}

.login-links {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.login-links .quote-btn-link {
    padding: 6px 4px;
    font-size: 14px;
}

/* ---------- Login: the code in one box per digit ---------- */
.quote-field .otp-boxes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 6px;
}

.quote-field .otp-boxes .otp-box {
    width: 66px;
    height: 76px;
    padding: 0;
    border: 2px solid #d5d8e8;
    border-radius: 14px;
    background: #fff;
    color: #1d2033;
    caret-color: #5350ff;
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.15s;
}

.quote-field .otp-boxes .otp-box:focus {
    outline: 0;
    border-color: #5350ff;
    box-shadow: 0 0 0 4px rgba(83, 80, 255, 0.18);
    transform: translateY(-2px);
}

.quote-field .otp-boxes .otp-box.filled {
    border-color: #5350ff;
    background: #f1f2ff;
}

.quote-field.has-error .otp-boxes .otp-box {
    border-color: #d93025;
    background: #fff8f8;
}

.otp-boxes.shake {
    animation: otp-shake 0.4s;
}

@keyframes otp-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

.otp-error {
    text-align: center;
}

#step-code .quote-field > label {
    display: block;
    text-align: center;
}

@media (max-width: 575px) {
    .quote-field .otp-boxes {
        gap: 10px;
    }

    .quote-field .otp-boxes .otp-box {
        width: 58px;
        height: 68px;
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .otp-boxes.shake {
        animation: none;
    }
}

/* ---------- Pricing: payment integrations and VPN ---------- */
.pi-explain {
    max-width: 880px;
    margin: 0 auto 26px;
    padding: 20px 24px;
    border-left: 4px solid #5350ff;
    border-radius: 10px;
    background: #f5f5ff;
    color: #4a4e66;
}

.pi-explain h3 {
    margin: 0 0 8px;
    font-size: 19px;
    color: #1d2033;
}

.pi-explain h3 i {
    margin-right: 6px;
    color: #5350ff;
}

.pi-explain p {
    margin: 0 0 8px;
}

.pi-explain p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: #1d2033;
}

.pricing-payments .price-table small {
    font-weight: 400;
    color: #6b6f86;
}

.pricing-payments .price-card > .price-btn,
.pricing-payments .price-card > .price-table + .price-btn {
    margin-top: 18px;
    width: 100%;
}

/* ---------- Payment integration quotation ---------- */
.pq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 3px solid #1d2033; }
.pq-brand-name { margin-top: 6px; font-size: 13px; font-weight: 600; color: #6b6f86; }
.pq-title { text-align: right; }
.pq-title-text { font-size: 28px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #1d2033; line-height: 1.1; }
.pq-meta { font-size: 13px; color: #4a4e66; }
.pq-parties { display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0; }
.pq-party { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #4a4e66; }
.pq-party strong { font-size: 16px; color: #1d2033; }
.pq-table thead td { background: #1d2033; color: #fff; }
.pq-table td { vertical-align: top; }
.pq-n { width: 28px; color: #6b6f86; }
.pq-sub { font-size: 12.5px; color: #6b6f86; }
.pq-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 18px; margin: 14px 0 18px; padding: 12px 8px; border-top: 2px solid #1d2033; }
.pq-total span { font-size: 14px; font-weight: 600; color: #4a4e66; }
.pq-total strong { font-size: 22px; color: #1d2033; }
.pq-alt { padding: 10px 14px; border-left: 4px solid #5350ff; background: #f6f7fb; font-size: 13.5px; color: #4a4e66; }
.pq-alt strong { color: #1d2033; }
.pq-terms-title { margin: 18px 0 6px; }
.pq-terms { margin: 0; padding-left: 18px; font-size: 12.5px; color: #5c6078; }
.pq-terms li { margin-bottom: 3px; }
@media (max-width: 575px) { .pq-head { flex-direction: column; } .pq-title { text-align: left; } }

/* the quotation pop-up is wider, like a document */
.uq-dialog.uq-dialog-wide { max-width: 860px; padding: 36px 44px; }
.pq-foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid #eceef8; font-size: 13px; color: #6b6f86; text-align: center; }
@media (max-width: 575px) { .uq-dialog.uq-dialog-wide { padding: 26px 18px; } }

.pq-sums { width: 50%; margin: 12px 0 0 auto; border-collapse: collapse; font-size: 14px; color: #4a4e66; }
.pq-sums td { padding: 6px 8px; }
.pq-sums .num { text-align: right; white-space: nowrap; }
.pq-sums + .pq-total { margin-top: 6px; }
@media (max-width: 575px) { .pq-sums { width: 100%; } }

/* the sums of every document: the last row is the amount payable */
.pq-sums .pay td { padding-top: 10px; border-top: 2px solid #1d2033; font-size: 17px; font-weight: 700; color: #1d2033; }
.pq-note { margin-top: 18px; padding: 10px 14px; border-left: 4px solid #1d2033; background: #f4f5fa; font-size: 13.5px; color: #4a4e66; }
.pq-doc { margin: 18px 0; padding: 18px; border: 1px solid #e6e8f2; border-radius: 10px; background: #fff; text-align: left; }

/* ---------- Our services ---------- */
.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-card { display: flex; flex-direction: column; }
.service-card p { flex: 0 0 auto; }
.service-points { margin: 4px 0 16px; padding-left: 18px; color: #4a4e66; font-size: 14px; flex: 1; }
.service-points li { margin-bottom: 4px; }
.service-link { align-self: flex-start; font-weight: 700; color: #3d3ae0; }
.service-link i { margin-left: 4px; font-size: 12px; }
.pricing-cta .price-btn + .price-btn { margin-left: 10px; }
@media (max-width: 767px) { .services-grid { grid-template-columns: 1fr; } .pricing-cta .price-btn + .price-btn { margin: 10px 0 0; } }

/* documents: the text is written as it is (an email or a web address must not be capitalised) */
.uq-document span, .uq-document div, .uq-document strong, .pq-doc span { text-transform: none; letter-spacing: normal; }
.uq-document .uq-label { text-transform: uppercase; letter-spacing: 1px; }
.uq-document .pq-title-text { text-transform: uppercase; letter-spacing: 2px; }
.pq-sums td { white-space: nowrap; }
.pq-doc .pq-sums { width: 80%; }
.pq-doc .pq-sub { line-height: 1.4; }

/* services: the points with a tick */
.service-points { list-style: none; padding-left: 0; margin: 6px 0 18px; line-height: 1.5; }
.service-points li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.service-points li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; font-size: 12px; color: #1e8a3c; }
.uq-document .pq-party span, .pq-doc .pq-party span, .pq-doc .pq-party strong { text-transform: none !important; }
.uq-document *::first-letter { text-transform: none !important; }
.uq-document .pq-party .uq-label { text-transform: uppercase !important; }
.uq-document .uq-label::first-letter { text-transform: uppercase !important; }
.quote-hero p { max-width: 780px; margin-left: auto; margin-right: auto; }
.service-pitch { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #3d3ae0; }
.service-sub { margin: 4px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6b6f86; }

/* ---------- Beyond The Tech ---------- */
.beyond-nav { padding: 14px 0; background: #fff; border-bottom: 1px solid #eceef8; position: sticky; top: 0; z-index: 5; }
.beyond-nav .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.beyond-nav a { padding: 6px 14px; border-radius: 999px; background: #f1f2ff; color: #3d3ae0; font-size: 13px; font-weight: 600; text-decoration: none; }
.beyond-nav a:hover { background: #3d3ae0; color: #fff; }
.beyond-service { scroll-margin-top: 60px; }
.beyond-hero-img { width: 100%; height: 320px; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 30px rgba(29, 32, 51, .15); }
.beyond-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
.beyond-tech { font-weight: 700; color: #3d3ae0; }
.beyond-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.beyond-item { overflow: hidden; border: 1px solid #eceef8; border-radius: 12px; background: #fff; }
.beyond-item img { display: block; width: 100%; height: 160px; object-fit: cover; }
.beyond-item-body { padding: 14px 16px 16px; }
.beyond-item h3 { margin: 0 0 6px; font-size: 16px; color: #1d2033; }
.beyond-item p { margin: 0; font-size: 14px; color: #5c6078; }
.beyond-extra { margin-top: 26px; }
.beyond-sub { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6b6f86; }
.beyond-related { display: flex; flex-wrap: wrap; gap: 10px; }
.beyond-related a { padding: 8px 16px; border: 1px solid #c9cbe4; border-radius: 8px; color: #3d3ae0; font-weight: 600; }
@media (max-width: 991px) { .beyond-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beyond-hero-img { height: 240px; } }
@media (max-width: 575px) { .beyond-items { grid-template-columns: 1fr; } }

.beyond-visit { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: #3d3ae0; }
.beyond-visit i { margin-left: 4px; font-size: 12px; }

/* ---------- SaaS ---------- */
.saas-hero-actions { margin-top: 18px; }
.saas-hero-actions .price-btn + .price-btn { margin-left: 10px; }
.saas-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #6b6f86; }
.saas-products { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.saas-no { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #3d3ae0; }
.saas-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.saas-related-card { display: block; padding: 16px 18px; border: 1px solid #eceef8; border-radius: 12px; background: #fff; text-decoration: none; }
.saas-related-card strong { display: block; color: #3d3ae0; }
.saas-related-card span { color: #5c6078; font-size: 14px; }
.saas-related-card:hover { border-color: #3d3ae0; }
@media (max-width: 991px) { .saas-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .saas-products, .saas-related { grid-template-columns: 1fr; } .saas-hero-actions .price-btn + .price-btn { margin: 10px 0 0; } }

.beyond-icon { display: flex; align-items: center; justify-content: center; height: 160px; background: linear-gradient(135deg, #5350ff 0%, #2b27c7 100%); }
.beyond-icon i { font-size: 54px; color: #fff; }

.saas-credit { display: block; margin-top: 6px; font-size: 11.5px; color: #8a8ea6; }
.saas-credit a { color: #8a8ea6; text-decoration: underline; }

.pricing-grid-three { max-width: 1100px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pq-note { white-space: pre-line; }

/* the grouped lines of a quotation */
.pq-table td.pq-svc { font-weight: 700; vertical-align: top; background: #fafbfe; }
.pq-table tr.pq-first td { border-top: 1px solid #cfd3e6; }
.pq-table td { font-size: 13.5px; }