/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-881jd8c61l] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-881jd8c61l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* accounts for the mobile browser toolbar where supported */
}

/* The page body takes the space between header and footer, so a short page still
   pushes the footer to the bottom of the screen. */
.content[b-881jd8c61l] {
    flex: 1 0 auto;
}

.sidebar[b-881jd8c61l] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-881jd8c61l] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-881jd8c61l]  a, .top-row[b-881jd8c61l]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-881jd8c61l]  a:hover, .top-row[b-881jd8c61l]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-881jd8c61l]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-881jd8c61l] {
        justify-content: space-between;
    }

    .top-row[b-881jd8c61l]  a, .top-row[b-881jd8c61l]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-881jd8c61l] {
        flex-direction: row;
    }

    .sidebar[b-881jd8c61l] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-881jd8c61l] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-881jd8c61l]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

/*    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }*/
}

#blazor-error-ui[b-881jd8c61l] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-881jd8c61l] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Dev/Components.razor.rz.scp.css */
.group-title[b-a5iq1pbu0f] {
    scroll-margin-top: 7rem;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-primary);
}

.component-section[b-a5iq1pbu0f] {
    /* Leaves room for the sticky header (5.75rem) when jumping to a section */
    scroll-margin-top: 7rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bs-border-color);
}

    .section-demo[b-a5iq1pbu0f] {
    scroll-margin-top: 7rem;
    margin-bottom: 1.5rem;
}

.sidebar-nested-toggle[b-a5iq1pbu0f] {
    font-size: 1rem;
    background-color: transparent;
}

    .sidebar-nested-toggle:not(.collapsed)[b-a5iq1pbu0f] {
        color: var(--brand-primary-emphasis);
        background-color: var(--brand-primary-tint);
    }

.component-section > h3[b-a5iq1pbu0f] {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

/* Hero demo theme button: aria-pressed="true" while the dark theme is showing (see js/demo-toggles.js). */
.hero-theme-toggle .when-dark[b-a5iq1pbu0f],
.hero-theme-toggle[aria-pressed="true"] .when-light[b-a5iq1pbu0f] {
    display: none;
}

.hero-theme-toggle[aria-pressed="true"] .when-dark[b-a5iq1pbu0f] {
    display: inline;
}

.swatch[b-a5iq1pbu0f] {
    display: flex;
    align-items: flex-end;
    height: 5rem;
    padding: 0.5rem 0.75rem;
    color: #fff;
}

.swatch-light[b-a5iq1pbu0f] {
    color: var(--brand-text);
    border-bottom: 1px solid var(--bs-border-color);
}

.logo-stage[b-a5iq1pbu0f] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10rem;
    padding: 1rem;
    background-color: #fff;
    border-bottom: 1px solid var(--bs-border-color);
}

.logo-stage-dark[b-a5iq1pbu0f] {
    background-color: var(--brand-primary);
}

    .logo-stage img[b-a5iq1pbu0f] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.component-sidebar[b-a5iq1pbu0f] {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

@media (min-width: 992px) {
    .component-sidebar[b-a5iq1pbu0f] {
        position: sticky;
        top: 6.75rem; /* just below the sticky header (5.75rem) */
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-ttoni1jzzs] {
    padding-block: clamp(3rem, 8vw, 6rem);
    text-align: center;
    background:
        radial-gradient(60rem 30rem at 50% -10%, var(--brand-primary-tint), transparent 70%),
        transparent;
}

/* "4 (logo mark) 4": the mark stands in for the zero */
.not-found-code[b-ttoni1jzzs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    margin: 0 0 0.5rem;
    font-size: clamp(4.5rem, 16vw, 9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-primary);
}

.not-found-mark[b-ttoni1jzzs] {
    display: block;
    height: 0.8em;
    width: auto;
}

.not-found-title[b-ttoni1jzzs] {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--brand-primary);
}

.not-found-text[b-ttoni1jzzs] {
    max-width: 34rem;
    margin: 0 auto 1.75rem;
    font-size: 1.1rem;
    color: var(--bs-secondary-color);
}

.not-found-actions[b-ttoni1jzzs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Suggested places */
.not-found-links[b-ttoni1jzzs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    max-width: 52rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: start;
}

.not-found-link[b-ttoni1jzzs] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    color: var(--brand-text);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .not-found-link:hover[b-ttoni1jzzs],
    .not-found-link:focus-visible[b-ttoni1jzzs] {
        border-color: var(--brand-primary);
        box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .not-found-link:focus-visible[b-ttoni1jzzs] {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }

.not-found-link-icon[b-ttoni1jzzs] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    color: #fff;
    background-color: var(--brand-primary);
    border-radius: 50%;
}

.not-found-link-title[b-ttoni1jzzs],
.not-found-link-text[b-ttoni1jzzs] {
    display: block;
}

.not-found-link-title[b-ttoni1jzzs] {
    font-weight: 700;
    color: var(--brand-primary);
}

.not-found-link-text[b-ttoni1jzzs] {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

@media (prefers-reduced-motion: reduce) {
    .not-found-link[b-ttoni1jzzs] {
        transition: none;
    }

    .not-found-link:hover[b-ttoni1jzzs],
    .not-found-link:focus-visible[b-ttoni1jzzs] {
        transform: none;
    }
}
/* /Components/Shared/CodeBlock.razor.rz.scp.css */
.code-wrap[b-101536g6ng] {
    position: relative;
}

.code-pre[b-101536g6ng] {
    margin: 0;
    padding: 1rem 3.25rem 1rem 1rem; /* right padding keeps text clear of the copy button */
    max-height: 22rem;
    overflow: auto;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #e5e7eb;
    background-color: var(--brand-text);
    border-radius: var(--bs-border-radius);
}

    .code-pre code[b-101536g6ng] {
        color: inherit;
        white-space: pre;
        font-size: inherit;
    }

.code-copy[b-101536g6ng] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #e5e7eb;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
}

    .code-copy:hover[b-101536g6ng] {
        background-color: rgba(255, 255, 255, 0.18);
    }

    .code-copy:focus-visible[b-101536g6ng] {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

.code-toggle .when-open[b-101536g6ng],
.code-toggle[aria-expanded="true"] .when-closed[b-101536g6ng] {
    display: none;
}

.code-toggle[aria-expanded="true"] .when-open[b-101536g6ng] {
    display: inline;
}
/* /Components/Shared/Modals/AnnouncementModal.razor.rz.scp.css */
.announcement[b-q8br5u6tdo] {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding-block: 0.5rem 0.25rem;
    text-align: center;
}

.announcement-icon[b-q8br5u6tdo] {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    font-size: 1.75rem;
    color: #fff;
    background-color: var(--brand-secondary);
    border-radius: 50%;
}

.announcement-heading[b-q8br5u6tdo] {
    margin: 0.25rem 0 0;
    font-size: 1.375rem;
    font-weight: 700;
}

.announcement-text[b-q8br5u6tdo] {
    max-width: 30rem;
    margin: 0;
}

.announcement-action[b-q8br5u6tdo] {
    min-width: 8rem;
    margin-top: 0.5rem;
}
/* /Components/Shared/Modals/ModalShell.razor.rz.scp.css */
/* ===== Opening / closing animation =====
   Opening: the dialog eases up from slightly below and scales in, with a soft deceleration curve.
   Closing: a quick fade, so the modal doesn't linger. A transition uses the timing of the state
   it is moving INTO, so the long timing lives on .show (opening) and the short timing on the
   base state (closing). Bootstrap waits for these transitions before it finishes opening or
   closing, so durations here are felt directly as delay. */
.modal.fade[b-fh864g6rpt] {
    transition: opacity 0.15s ease-in;
}

    .modal.fade .modal-dialog[b-fh864g6rpt] {
        transform: translateY(1rem) scale(0.98);
        transition: transform 0.15s ease-in;
    }

    .modal.show[b-fh864g6rpt] {
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

        .modal.show .modal-dialog[b-fh864g6rpt] {
            transform: none;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

/* Opened from a button: wwwroot/js/modal-origin.js draws the genie animation with copies of the
   content, so the real content is hidden while it plays and the dialog's own slide/scale is off. */
.modal.is-genie .modal-dialog[b-fh864g6rpt] {
    transform: none;
    transition: none;
}

.modal.is-genie .modal-content[b-fh864g6rpt] {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade[b-fh864g6rpt],
    .modal.show[b-fh864g6rpt],
    .modal.fade .modal-dialog[b-fh864g6rpt],
    .modal.show .modal-dialog[b-fh864g6rpt] {
        transition: none;
    }
}

/* ===== Frame ===== */
.modal-content[b-fh864g6rpt] {
    /* Brand primary color for the title and everything in the body, whatever the modal is placed
       inside (it is rendered in the footer, which has white text). */
    --bs-modal-color: var(--brand-primary);
    --bs-heading-color: var(--brand-primary);
    color: var(--brand-primary);
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
}

.modal-header[b-fh864g6rpt] {
    justify-content: center;
    padding: 3rem 4rem 0.5rem;
    border-bottom: 0;
}

.modal-title[b-fh864g6rpt] {
    color: var(--brand-primary);
    text-align: center;
}

/* More room at the left and right of the content */
.modal-body[b-fh864g6rpt] {
    padding: 1.25rem 2rem 2rem;
}

/* ===== Close button: icon on the secondary color, flush to the top-right corner ===== */
.modal-close[b-fh864g6rpt] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: #fff;
    background-color: var(--brand-secondary);
    border: 0;
    border-bottom-left-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

    .modal-close:hover[b-fh864g6rpt] {
        background-color: var(--brand-secondary-hover);
    }

    .modal-close:active[b-fh864g6rpt] {
        background-color: var(--brand-secondary-active);
    }

    .modal-close:focus-visible[b-fh864g6rpt] {
        outline: 2px solid #fff;
        outline-offset: -5px;
    }

@media (max-width: 575.98px) {
    .modal-header[b-fh864g6rpt] {
        padding-inline: 3rem;
    }

    .modal-body[b-fh864g6rpt] {
        padding-inline: 1.25rem;
    }
}
/* /Components/Shared/Sections/AboutUs.razor.rz.scp.css */
/* ===== Panel ===== */
.about-us-panel[b-g1b7hn68p7] {
    padding: 2rem 1.25rem;
    background-color: var(--brand-accent);
    border-radius: 1rem;
}

@media (min-width: 992px) {
    .about-us-panel[b-g1b7hn68p7] {
        padding: 2.5rem 3rem;
    }
}

@media (min-width: 1200px) {
    .about-us-panel[b-g1b7hn68p7] {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* ===== Photo ===== */
/* Capped and centred while it stacks above the copy; fills its column from lg up. */
.about-us-image[b-g1b7hn68p7] {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .about-us-image[b-g1b7hn68p7] {
        max-width: none;
    }
}
/* /Components/Shared/Sections/BusinessApplication.razor.rz.scp.css */
.business-application[b-lwpb5lcd3v] {
    padding-top: 3rem;
}

/* ===== Intro ===== */
.business-application-intro[b-lwpb5lcd3v] {
    margin-bottom: 2rem;
}

.business-application-title[b-lwpb5lcd3v] {
    margin-bottom: 0.75rem;
    color: var(--brand-primary);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}

.business-application-subtitle[b-lwpb5lcd3v] {
    max-width: 52rem;
    margin: 0 auto;
    font-size: 1.0625rem;
}

/* ===== Panel ===== */
.business-application-panel[b-lwpb5lcd3v] {
    padding: 1.5rem 1rem;
    background-color: var(--brand-accent);
    border-radius: 1.5rem;
}

@media (min-width: 768px) {
    .business-application-panel[b-lwpb5lcd3v] {
        padding: 2.5rem 2rem;
    }
}
/* /Components/Shared/Sections/BusinessSolution.razor.rz.scp.css */
.business-solution[b-z28tg1xegy] {
    padding-top: 3rem;
}

/* ===== Intro ===== */
.business-solution-intro[b-z28tg1xegy] {
    margin-bottom: 2rem;
}

.business-solution-title[b-z28tg1xegy] {
    margin-bottom: 0.75rem;
    color: var(--brand-primary);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}

.business-solution-subtitle[b-z28tg1xegy] {
    max-width: 52rem;
    margin: 0 auto;
    font-size: 1.0625rem;
}

/* ===== Panel ===== */
/* Tinted per product line: teal for Biz, orange for Enterprise. */
.business-solution-panel[b-z28tg1xegy] {
    padding: 1.5rem 1rem;
    border-radius: 1.5rem;
}

.business-solution-biz .business-solution-panel[b-z28tg1xegy] {
    background-color: var(--brand-primary-accent);
}

.business-solution-enterprise .business-solution-panel[b-z28tg1xegy] {
    background-color: var(--brand-secondary-accent);
}

@media (min-width: 768px) {
    .business-solution-panel[b-z28tg1xegy] {
        padding: 2rem 1.5rem;
    }
}

/* ===== Footer tagline ===== */
.business-solution-footer[b-z28tg1xegy] {
    margin: 2rem 0 0;
    font-weight: 700;
    font-size: 1.0625rem;
}
/* /Components/Shared/Sections/ContactUs.razor.rz.scp.css */
.contact-us[b-qofzmqjci1] {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* ===== Intro ===== */
.contact-us-intro[b-qofzmqjci1] {
    margin-bottom: 2rem;
}

.contact-us-heading[b-qofzmqjci1] {
    margin-bottom: 0.75rem;
    color: var(--brand-primary);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}

.contact-us-intro-text[b-qofzmqjci1] {
    max-width: 52rem;
    margin: 0 auto;
    font-size: 1.0625rem;
}

    .contact-us-intro-text[b-qofzmqjci1]  p:last-child {
        margin-bottom: 0;
    }

/* ===== Panel ===== */
.contact-us-panel[b-qofzmqjci1] {
    padding: 2rem 1.25rem;
    background-color: var(--brand-tertiary-tint);
    border-radius: 1rem;
}

@media (min-width: 768px) {
    .contact-us-panel[b-qofzmqjci1] {
        padding: 2.5rem 3rem;
    }
}

.contact-us-title[b-qofzmqjci1] {
    margin-bottom: 0.5rem;
    color: var(--brand-secondary);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
}

.contact-us-subtitle[b-qofzmqjci1] {
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
}

/* ===== Fields ===== */
.contact-us-fields[b-qofzmqjci1] {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

.contact-us .form-label[b-qofzmqjci1] {
    margin-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
}

.contact-us .form-control[b-qofzmqjci1] {
    padding: 0.5rem 1rem;
    background-color: #fff;
    border-color: var(--brand-primary-subtle-border);
    border-radius: 0.75rem;
}

/* ===== Consent and submit ===== */
/* One flex row, as tall as an input, so it lines up with the field beside it. */
.contact-us-consent[b-qofzmqjci1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: calc(1.5em + 1rem + 2px); /* same as .form-control */
}

/* Bootstrap floats the checkbox with a negative margin; here it sits inline in the row. */
.contact-us .form-check-input[b-qofzmqjci1] {
    flex-shrink: 0;
    float: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    border-color: var(--brand-primary-subtle-border);
    border-radius: 0.375rem;
}

.contact-us .form-check-label[b-qofzmqjci1] {
    max-width: 14rem;
    font-size: 0.875rem;
    line-height: 1.3;
}

.contact-us-submit[b-qofzmqjci1] {
    flex-shrink: 0;
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Gray and not clickable while any required field is empty or the privacy box is unticked.
   The browser's own required-field check backs this up on submit. */
.contact-us-form:has(:invalid) .contact-us-submit[b-qofzmqjci1] {
    --bs-btn-bg: var(--bs-gray-600);
    --bs-btn-border-color: var(--bs-gray-600);
    pointer-events: none;
}

/* Honeypot field: off screen and out of the tab order, so only bots fill it in */
.contact-us-trap[b-qofzmqjci1] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* /Components/Shared/Sections/FaqList.razor.rz.scp.css */
/* ===== Accordion ===== */
/* Bootstrap's accordion without its box: no borders, fill or side padding, so each question reads as
   a heading followed by a rule line and the chevron. */
.faq-list .accordion[b-dpmkfonia3] {
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
}

/* Keyboard focus only, so a click doesn't leave a ring around the question */
.faq-list .accordion-button:focus[b-dpmkfonia3] {
    box-shadow: none;
}

.faq-list .accordion-button:focus-visible[b-dpmkfonia3] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 0.25rem;
}

/* ===== Rule line ===== */
/* Fills the space between the question and the chevron. A long question that fills its row still
   keeps a short stub. The flex order puts it after the question text and before the chevron. */
.faq-list .accordion-button[b-dpmkfonia3]::before {
    content: "";
    order: 1;
    flex: 1 0 1.5rem;
    height: 1px;
    margin-inline: 0.75rem;
    background-color: var(--brand-primary-subtle-border);
}

/* ===== Chevron ===== */
/* Bootstrap's ::after, which already points down when collapsed and turns up when open. The arrow
   is a mask over the background colour, so it takes the brand orange from app.css. */
.faq-list .accordion-button[b-dpmkfonia3]::after {
    order: 2;
    background-image: none;
    background-color: var(--brand-secondary);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* ===== Answer ===== */
/* Answers stop short of the chevron, as in the design, and leave room before the next question. */
.faq-list .accordion-body[b-dpmkfonia3] {
    max-width: 47rem;
    padding-bottom: 2rem;
}

    .faq-list .accordion-body > :last-child[b-dpmkfonia3],
    .faq-list .accordion-body dd:last-child[b-dpmkfonia3] {
        margin-bottom: 0;
    }

/* A blank line between products, like the gap between paragraphs */
.faq-list .accordion-body dd[b-dpmkfonia3] {
    margin-bottom: 1rem;
}
/* /Components/Shared/Sections/FaqSearch.razor.rz.scp.css */
/* ===== Search bar ===== */
/* A pill-shaped Bootstrap input with the magnifier inside its right end. As wide as the answers in
   FaqList, and lined up with the questions' left edge. */
.faq-search-box[b-66v2n65fll] {
    position: relative;
    max-width: 47rem;
}

    .faq-search-box .form-control[b-66v2n65fll] {
        padding-left: 2.75rem;
        padding-right: 3.25rem; /* clears the icon; the browser's clear button sits just before it */
        border-color: var(--brand-primary-subtle-border);
    }

        /* Back to the site-wide focus colour from app.css, which the rule above outranks */
        .faq-search-box .form-control:focus[b-66v2n65fll] {
            border-color: var(--brand-primary);
        }

        .faq-search-box .form-control[b-66v2n65fll]::placeholder {
            color: var(--brand-primary);
            opacity: 1; /* Firefox fades placeholders by default */
        }

        /* The browser's clear button (Chromium and Safari), redrawn as a gray cross to match the
           magnifier. The cross is a mask over the background colour, like the FAQ chevron. */
        .faq-search-box .form-control[b-66v2n65fll]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
            width: 0.875rem;
            height: 0.875rem;
            background-color: var(--bs-secondary-color);
            -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / contain no-repeat;
            cursor: pointer;
        }

/* Decorative: the input itself is the search, so clicks go straight through to it */
.faq-search-icon[b-66v2n65fll] {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    line-height: 1;
    pointer-events: none;
}
/* /Components/Shared/Sections/Footer.razor.rz.scp.css */
/* Mobile-first. The footer responds to its own width (container queries, not the viewport),
   so it adapts wherever it is placed:
     base          phones: one column, two link columns, touch-sized targets
     < 22.5rem     very narrow phones: social labels stack over their icons
     >= 40rem      tablets: four link columns, contact and social side by side
     >= 70.625rem  desktop: the design layout
   Text size comes from Bootstrap's "small" class on the <footer> (Small on the Components page's
   typography scale); headings and labels inherit it. */
.site-footer[b-afnpkzerhl] {
    container: site-footer / inline-size;
    color: #fff;
    background-color: var(--brand-primary);
}

    .site-footer a[b-afnpkzerhl] {
        color: inherit;
        text-decoration: none;
    }

        .site-footer a:focus-visible[b-afnpkzerhl],
        .site-footer .footer-link-button:focus-visible[b-afnpkzerhl] {
            outline: 2px solid #fff;
            outline-offset: 2px;
            border-radius: 2px;
        }

/* A <button> that opens a modal (Terms, Privacy), styled to look like the footer's links */
.site-footer .footer-link-button[b-afnpkzerhl] {
    display: inline-block;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Hover effects only where hover exists, so a tap doesn't leave a link underlined */
@media (hover: hover) {
    .site-footer a:hover[b-afnpkzerhl],
    .site-footer .footer-link-button:hover[b-afnpkzerhl] {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .site-footer .social-link:hover[b-afnpkzerhl] {
        color: #fff;
    }
}

.footer-inner[b-afnpkzerhl] {
    max-inline-size: 70.625rem;
    margin-inline: auto;
    padding: 2.5rem 1.25rem 2rem;
}

.footer-top[b-afnpkzerhl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.footer-logo[b-afnpkzerhl] {
    justify-self: start;
}

    .footer-logo img[b-afnpkzerhl] {
        display: block;
        inline-size: 8rem;
        block-size: auto;
    }

.footer-heading[b-afnpkzerhl] {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
}

/* ===== Link groups ===== */
.footer-nav[b-afnpkzerhl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
}

.footer-group[b-afnpkzerhl] {
    display: grid;
    align-content: start;
    gap: 0.25rem;
}

.footer-list[b-afnpkzerhl] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Padding gives each link a tap target of at least 24px (WCAG 2.5.8) */
    .footer-list a[b-afnpkzerhl],
    .footer-legal a[b-afnpkzerhl],
    .site-footer .footer-legal .footer-link-button[b-afnpkzerhl] {
        display: inline-block;
        padding-block: 0.25rem;
    }

/* ===== Contact ===== */
.footer-contact address[b-afnpkzerhl] {
    margin: 0;
}

.footer-contact li[b-afnpkzerhl] {
    display: flex;
    align-items: center;
    gap: 0.375em;
}

    .footer-contact a[b-afnpkzerhl] {
        overflow-wrap: anywhere;
    }

/* Sized in em so the icons scale with the text at every breakpoint */
.contact-icon[b-afnpkzerhl] {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: 1.25em;
    block-size: 1.25em;
    color: var(--brand-secondary);
}

    .contact-icon[b-afnpkzerhl]::before {
        font-size: 1.15em;
    }

.contact-icon-round[b-afnpkzerhl] {
    color: var(--brand-primary);
    background-color: var(--brand-secondary);
    border-radius: 50%;
}

    .contact-icon-round[b-afnpkzerhl]::before {
        font-size: 0.7em;
    }

/* ===== Social ===== */
/* Label and icon columns shared by every "Follow" row (subgrid), so the icons line up.
   A label wraps before its icons do when space runs out. */
.footer-social[b-afnpkzerhl] {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    justify-content: start;
    align-items: center;
    column-gap: 0.25rem;
}

.footer-follow[b-afnpkzerhl] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

.footer-icons[b-afnpkzerhl] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Icon-only links get a 44px touch target around the glyph */
.site-footer .social-link[b-afnpkzerhl] {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    font-size: 1.25rem;
    color: var(--brand-secondary);
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out;
}

    /* Flex turns the icon's ::before into a block, dropping Bootstrap's baseline nudge
       so the glyph sits centered in the link */
    .social-link .bi[b-afnpkzerhl] {
        display: flex;
    }

/* ===== Divider and legal ===== */
.footer-divider[b-afnpkzerhl] {
    margin-block: 2rem 1.5rem;
    border: 0;
    border-block-start: 2px solid rgb(255 255 255 / 0.35);
    opacity: 1;
}

.footer-bottom[b-afnpkzerhl] {
    display: grid;
    gap: 0.75rem;
}

    .footer-bottom p[b-afnpkzerhl] {
        margin: 0;
    }

.footer-legal[b-afnpkzerhl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .footer-legal li + li[b-afnpkzerhl]::before {
        content: "|";
        content: "|" / "";
        margin-inline: 0.5rem;
    }

/* ===== Very narrow phones ===== */
@container site-footer (width < 22.5rem) {
    /* No room for label and icons side by side: stack each label over its icons */
    .footer-social[b-afnpkzerhl] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Pull the 44px targets in so the first glyph lines up with the label */
    .footer-icons[b-afnpkzerhl] {
        margin-inline-start: -0.75rem;
    }
}

/* ===== Tablet ===== */
@container site-footer (width >= 40rem) {
    .footer-inner[b-afnpkzerhl] {
        padding-inline: 2rem;
    }

    /* Logo and links span the full width; contact and social share the row below */
    .footer-top[b-afnpkzerhl] {
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 3rem;
    }

    .footer-logo[b-afnpkzerhl],
    .footer-nav[b-afnpkzerhl] {
        grid-column: 1 / -1;
    }

        .footer-logo img[b-afnpkzerhl] {
            inline-size: 9rem;
        }

    .footer-nav[b-afnpkzerhl] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ===== Desktop: the design layout =====
   The design's measurements scaled by 14/11, since its 11px text is now Small (14px) */
@container site-footer (width >= 70.625rem) {
    .footer-inner[b-afnpkzerhl] {
        padding: 2.5rem 0 5.75rem;
    }

    .footer-top[b-afnpkzerhl] {
        grid-template-columns: 20.375rem minmax(0, 1fr);
        gap: 1.875rem 0;
        padding-inline: 3.5rem;
    }

    .footer-logo[b-afnpkzerhl],
    .footer-nav[b-afnpkzerhl] {
        grid-column: auto;
    }

        .footer-logo img[b-afnpkzerhl] {
            inline-size: 12.75rem;
        }

    .footer-nav[b-afnpkzerhl] {
        display: flex;
        flex-wrap: wrap;
        gap: 1.875rem 4.5rem;
        padding-block-start: 1.25rem;
    }

    .footer-group[b-afnpkzerhl],
    .footer-list[b-afnpkzerhl] {
        gap: 0.25rem;
    }

        .footer-list a[b-afnpkzerhl],
        .footer-legal a[b-afnpkzerhl],
        .site-footer .footer-legal .footer-link-button[b-afnpkzerhl] {
            padding-block: 0;
        }

    /* Hang the icons in the gutter so the text lines up with the heading */
    .footer-contact address[b-afnpkzerhl] {
        margin-inline-start: -1.625em;
    }

    .footer-social[b-afnpkzerhl] {
        display: flex;
        flex-wrap: wrap;
        align-self: center;
        gap: 0.625rem 2.5rem;
    }

    .footer-follow[b-afnpkzerhl] {
        display: flex;
        gap: 0.9375rem;
    }

    .footer-icons[b-afnpkzerhl] {
        gap: 0.5625rem;
    }

    .site-footer .social-link[b-afnpkzerhl] {
        inline-size: auto;
        block-size: auto;
        font-size: 1.1875rem;
        border-radius: 2px;
    }

    .footer-divider[b-afnpkzerhl] {
        margin-block: 2rem 1.875rem;
    }

    .footer-bottom[b-afnpkzerhl] {
        gap: 0.75rem;
        padding-inline: 3.5rem;
    }
}

/* The website version: there if you look for it, quiet if you don't */
.footer-version[b-afnpkzerhl] {
    margin-inline-start: 0.5rem;
    font-size: 0.85em;
    opacity: 0.65;
    white-space: nowrap;
}
/* /Components/Shared/Sections/Header.razor.rz.scp.css */
/*
   The header is two stacked bars (product bar 2.25rem + main bar 3.5rem = 5.75rem). Both stay
   pinned while scrolling. Pages with their own sticky elements should offset them by 5.75rem.
*/
.app-header[b-83u6yikkcm] {
    --product-bar-height: 2.25rem;
}

/* ===== Product switcher (top bar) ===== */
.product-bar[b-83u6yikkcm] {
    height: var(--product-bar-height);
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

    .product-bar .container[b-83u6yikkcm] {
        height: 100%;
    }

.product-list[b-83u6yikkcm] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

    .product-list li + li[b-83u6yikkcm] {
        border-left: 1px solid var(--brand-primary-subtle-border);
    }

.product-link[b-83u6yikkcm] {
    display: block;
    padding: 0.125rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    color: var(--brand-primary);
}

    .product-link:hover[b-83u6yikkcm] {
        color: var(--brand-primary-hover);
        text-decoration: underline;
    }

    .product-link.active[b-83u6yikkcm] {
        color: var(--brand-secondary-hover);
    }

/* ===== Main bar ===== */
.app-header-inner[b-83u6yikkcm] {
    position: relative; /* anchors the dropdown menu on phones */
    height: 3.5rem;
    background: var(--brand-primary);
}

.app-brand[b-83u6yikkcm] {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}

    .app-brand img[b-83u6yikkcm] {
        display: block;
        height: 2.25rem;
        max-width: 100%;
        width: auto;
    }

.nav-link[b-83u6yikkcm] {
    padding: 0.375rem 0.75rem;
    color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
}

    .nav-link:hover[b-83u6yikkcm],
    .nav-link:focus-visible[b-83u6yikkcm] {
        color: var(--bs-body-bg);
        background-color: rgba(255, 255, 255, 0.14);
    }

    /* Current page: bold, in the secondary color */
    .nav-link.active[b-83u6yikkcm] {
        color: var(--brand-secondary);
        font-weight: 700;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

/* ===== Current page name beside the menu button (phones only) ===== */
.nav-current[b-83u6yikkcm] {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--bs-body-bg);
}

    .nav-current:empty[b-83u6yikkcm] {
        display: none;
    }

/* ===== Menu button (phones only, hidden from md up by d-md-none) ===== */
.nav-toggle[b-83u6yikkcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bs-body-bg);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
}

    .nav-toggle:hover[b-83u6yikkcm],
    .nav-toggle:focus-visible[b-83u6yikkcm] {
        background-color: rgba(255, 255, 255, 0.14);
    }

    .nav-toggle .icon-close[b-83u6yikkcm],
    .nav-toggle[aria-expanded="true"] .icon-open[b-83u6yikkcm] {
        display: none;
    }

    .nav-toggle[aria-expanded="true"] .icon-close[b-83u6yikkcm] {
        display: inline;
    }

/* ===== Phones and small tablets: links drop down below the bar ===== */
@media (max-width: 767.98px) {
    .main-nav[b-83u6yikkcm] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: var(--brand-primary);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
    }

        .main-nav .nav[b-83u6yikkcm] {
            flex-direction: column;
            flex-wrap: nowrap;
            padding: 0.5rem 0.75rem;
        }

        .main-nav .nav-link[b-83u6yikkcm] {
            padding: 0.75rem 0.5rem;
            border-radius: var(--bs-border-radius);
        }

            .main-nav .nav-link.active[b-83u6yikkcm] {
                border-radius: var(--bs-border-radius);
            }
}

@media (max-width: 575.98px) {
    /* Let the product bar scroll sideways from its left edge instead of clipping both ends. */
    .product-list[b-83u6yikkcm] {
        justify-content: flex-start;
        scrollbar-width: none;
    }

        .product-list[b-83u6yikkcm]::-webkit-scrollbar {
            display: none;
        }

    .product-link[b-83u6yikkcm] {
        padding-inline: 0.75rem;
        font-size: 0.8rem;
    }

    .app-brand img[b-83u6yikkcm] {
        height: 1.75rem;
    }
}

/* ===== Dropdown in the main nav (Products on the AsensoPay page) ===== */
.nav-item.dropdown[b-83u6yikkcm] {
    position: relative;
}

.nav-link.dropdown-toggle[b-83u6yikkcm] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    cursor: pointer;
}

    /* Active: while its menu is open, the same look as the current page's link (bold, secondary color) */
    .nav-link.dropdown-toggle.show[b-83u6yikkcm],
    .nav-link.dropdown-toggle[aria-expanded="true"][b-83u6yikkcm] {
        color: var(--brand-secondary);
        font-weight: 700;
    }

.nav-item.dropdown .dropdown-menu[b-83u6yikkcm] {
    min-width: 17rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    background-color: #fff;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
}

.dropdown-header[b-83u6yikkcm] {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.dropdown-divider[b-83u6yikkcm] {
    margin: 0.35rem 0;
}

.dropdown-item[b-83u6yikkcm] {
    padding: 0.4rem 1rem 0.4rem 1.5rem;
    font-weight: 400;
    color: var(--brand-text);
}

    .dropdown-item:hover[b-83u6yikkcm],
    .dropdown-item:focus-visible[b-83u6yikkcm] {
        color: var(--brand-primary);
        background-color: var(--brand-primary-tint);
    }

    .dropdown-item.active[b-83u6yikkcm] {
        color: #fff;
        background-color: var(--brand-primary);
    }

/* On phones the menu opens in place inside the nav panel instead of floating */
@media (max-width: 767.98px) {
    .main-nav .nav-link.dropdown-toggle[b-83u6yikkcm] {
        width: 100%;
        justify-content: space-between;
    }

    .nav-item.dropdown .dropdown-menu[b-83u6yikkcm] {
        position: static;
        min-width: 0;
        margin: 0 0 0.5rem;
        padding: 0 0 0 0.75rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .dropdown-header[b-83u6yikkcm] {
        padding-inline: 0.5rem;
        color: #fff;
    }

    .dropdown-divider[b-83u6yikkcm] {
        border-color: rgba(255, 255, 255, 0.2);
    }

    .dropdown-item[b-83u6yikkcm] {
        padding: 0.5rem 0.5rem 0.5rem 1rem;
        color: var(--bs-body-bg);
        white-space: normal;
    }

        .dropdown-item:hover[b-83u6yikkcm],
        .dropdown-item:focus-visible[b-83u6yikkcm] {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.14);
        }
}

/* Keyboard focus on the nav links uses a white ring rather than Bootstrap's blue glow */
.main-nav .nav-link:focus-visible[b-83u6yikkcm] {
    outline: 2px solid #fff;
    outline-offset: -2px;
    box-shadow: none;
}

/* While the genie animation plays (modal-origin.js) the real menu is invisible but still there:
   opacity (not visibility) keeps it under the pointer, so moving onto the menu while it unfolds counts
   as hovering it and the menu does not close on you. */
.nav-item.dropdown .dropdown-menu.is-genie[b-83u6yikkcm] {
    opacity: 0;
}

/* Hover-to-open: fills the small gap between the button and the menu so the pointer can cross it */
@media (hover: hover) and (min-width: 768px) {
    .nav-item.dropdown .dropdown-menu[b-83u6yikkcm]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -0.75rem;
        height: 0.75rem;
    }
}
/* /Components/Shared/Sections/Hero.razor.rz.scp.css */
.hero[b-bj46obg0vp] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(380px, 34vw, 560px);
    overflow: hidden;
    isolation: isolate;
}

.hero-light[b-bj46obg0vp] {
    --hero-fade: var(--brand-primary-tint);
    background: var(--hero-fade);
    color: var(--brand-text);
}

.hero-dark[b-bj46obg0vp] {
    --hero-fade: var(--brand-primary-emphasis);
    background: var(--hero-fade);
    color: #fff;
}

/* ===== Photo ===== */
.hero-media[b-bj46obg0vp] {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-media img[b-bj46obg0vp] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% center;
}

.hero-media[b-bj46obg0vp]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--hero-fade) 0%, var(--hero-fade) 20%, transparent 55%);
}

/* ===== Copy ===== */
.hero-copy[b-bj46obg0vp] {
    position: relative;
    padding-top: clamp(2rem, 3.5vw, 3.5rem);
    padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

.hero-copy > *[b-bj46obg0vp] {
    max-width: min(38rem, 45%);
}

.hero-eyebrow[b-bj46obg0vp] {
    margin-bottom: 0.75rem;
    color: var(--brand-primary);
    font-weight: 700;
    font-size: clamp(0.875rem, 1.1vw, 1.125rem);
    text-transform: uppercase;
}

.hero-dark .hero-eyebrow[b-bj46obg0vp] {
    color: var(--brand-primary-subtle);
}

.hero-title[b-bj46obg0vp],
.hero-subtitle[b-bj46obg0vp] {
    max-width: min(32ch, 45%);
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.85vw, 2.5rem);
    line-height: 1.1;
    text-wrap: balance;
}

.hero-subtitle[b-bj46obg0vp] {
    margin-bottom: 1.5rem;
    font-weight: 400;
    font-size: clamp(1.0625rem, 1.5vw, 2rem);
    line-height: 1.2;
}


.hero-light .hero-title[b-bj46obg0vp] {
    color: var(--brand-primary);
}

.hero-light .hero-subtitle[b-bj46obg0vp] {
    color: var(--brand-text-emphasis);
}

.hero-dark .hero-title[b-bj46obg0vp],
.hero-dark .hero-subtitle[b-bj46obg0vp] {
    color: #fff;
}

.hero-tagline[b-bj46obg0vp] {
    margin-bottom: 1rem;
    color: var(--brand-secondary);
    font-weight: 700;
    font-size: clamp(1.125rem, 1.45vw, 2rem);
    line-height: 1.15;
}

.hero-body[b-bj46obg0vp] {
    font-size: clamp(0.875rem, 0.95vw, 1.0625rem);
}

/* Body and Actions are authored by the page, so their elements need ::deep. */
.hero-body[b-bj46obg0vp]  p {
    margin-bottom: 1rem;
}

.hero-body[b-bj46obg0vp]  p:last-child {
    margin-bottom: 0;
}

.hero-actions[b-bj46obg0vp] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
    margin-top: clamp(1.25rem, 1.75vw, 1.75rem);
}

.hero-actions[b-bj46obg0vp]  .btn {
    --bs-btn-padding-y: 0.75em;
    --bs-btn-padding-x: 1.25em;
    --bs-btn-font-size: clamp(0.8125rem, 0.82vw, 1rem);
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 0.5rem;
}

.hero-actions[b-bj46obg0vp]  .btn .bi {
    font-size: 1.3em;
    vertical-align: -0.2em;
}

/* ===== Stacked layout on tablets and phones: photo on top, copy below ===== */
@media (max-width: 991.98px) {
    .hero[b-bj46obg0vp] {
        display: block;
        min-height: 0;
    }

    .hero-media[b-bj46obg0vp] {
        position: relative;
        aspect-ratio: 16 / 9;
    }

    .hero-media[b-bj46obg0vp]::after {
        background: linear-gradient(180deg, transparent 25%, var(--hero-fade) 60%);
    }

    .hero-copy[b-bj46obg0vp] {
        margin-top: -20%;
        padding-top: 0;
        padding-bottom: 2.5rem;
    }

    .hero-copy > *[b-bj46obg0vp] {
        max-width: none;
    }

    .hero-eyebrow[b-bj46obg0vp] {
        font-size: 1.125rem;
    }

    .hero-title[b-bj46obg0vp],
    .hero-subtitle[b-bj46obg0vp] {
        font-size: 2rem;
    }

    .hero-tagline[b-bj46obg0vp] {
        font-size: 1.5rem;
    }

    .hero-body[b-bj46obg0vp] {
        font-size: 1.0625rem;
    }

    .hero-actions[b-bj46obg0vp] {
        gap: 1.25rem;
        margin-top: 1.75rem;
    }
}

/* ===== Phone: fixed, smaller type ===== */
@media (max-width: 575.98px) {
    .hero-title[b-bj46obg0vp],
    .hero-subtitle[b-bj46obg0vp] {
        font-size: 1.25rem;
    }

    .hero-tagline[b-bj46obg0vp] {
        font-size: 1.125rem;
    }

    .hero-body[b-bj46obg0vp] {
        font-size: 0.95rem;
    }

    /* Buttons stack full width. */
    .hero-actions[b-bj46obg0vp] {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .hero-actions[b-bj46obg0vp]  .btn {
        width: 100%;
    }
}
/* /Components/Shared/UI/CardA.razor.rz.scp.css */
.card-a[b-d1b4maqvcg] {
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(31, 41, 55, 0.08);
}

/* ===== Label bar ===== */
.card-a-label[b-d1b4maqvcg] {
    padding: 1rem 4rem;
    color: #fff;
    background-color: var(--brand-primary);
    border-bottom: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: clamp(0.9rem, 0.55rem + 0.7vw, 1.5rem);
}

/* One-line label (LabelClass="text-nowrap"): slimmer sides, and the text shrinks with the card
   so a label up to 11em wide, such as "AsensoPay BIZ | PORTAL", still fits */
.card-a-label.text-nowrap[b-d1b4maqvcg] {
    padding-inline: 1rem;
    font-size: min(clamp(0.9rem, 0.55rem + 0.7vw, 1.5rem), (100cqi - 2rem) / 11);
}

/* ===== Photo and badge ===== */
.card-a-media[b-d1b4maqvcg] {
    position: relative;
}

.card-a-media img[b-d1b4maqvcg] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0; /* Bootstrap rounds .card-img-top; the label bar sits above it here */
}

/* The badges sit in a row on the photo's bottom edge, at the right */
.card-a-icons[b-d1b4maqvcg] {
    position: absolute;
    right: 1rem;
    bottom: -1.375rem;
    display: flex;
    gap: 0.5rem;
}

.card-a-icon[b-d1b4maqvcg] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #fff;
    background-color: var(--brand-secondary);
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 0.75rem rgba(31, 41, 55, 0.15);
    font-size: 1.375rem;
}

/* ===== Body ===== */
.card-a .card-body[b-d1b4maqvcg] {
    padding: 2.25rem 1.25rem 1rem; /* top padding leaves room for the badge */
}

/* Default colours; override from the page with Bootstrap utilities in LabelClass / TitleClass. */
.card-a-title[b-d1b4maqvcg] {
    margin-bottom: 0.75rem;
    color: var(--brand-secondary);
    font-weight: 700;
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
    line-height: 1.2;
}

.card-a .card-body > .card-a-title:last-child[b-d1b4maqvcg] {
    margin-bottom: 0.25rem; /* compact variant: no description below the title */
}

.card-a .card-text[b-d1b4maqvcg] {
    font-size: clamp(0.875rem, 0.78rem + 0.4vw, 1.0625rem);
}

/* ===== Actions ===== */
.card-a-actions[b-d1b4maqvcg] {
    display: grid;
/*    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);*/
    gap: 0.5rem;
    padding: 0.25rem 1.25rem 1.25rem;
    background-color: transparent;
    border-top: 0;
}

.card-a-actions[b-d1b4maqvcg]  .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: clamp(0.6875rem, 0.6rem + 0.3vw, 0.8125rem);
    font-weight: 700;
    line-height: 1.15;
/*    text-align: left;*/
    justify-content: center;
    white-space: normal;
    border-radius: 0.5rem;
}

.card-a-actions[b-d1b4maqvcg]  .btn i {
    flex-shrink: 0;
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
}

@container (max-width: 17rem) {
    .card-a-label[b-d1b4maqvcg] {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .card-a-label.text-nowrap[b-d1b4maqvcg] {
        padding-inline: 0.75rem;
        font-size: min(0.9rem, (100cqi - 1.5rem) / 11);
    }

    .card-a-icons[b-d1b4maqvcg] {
        right: 0.75rem;
        bottom: -1.25rem;
    }

    .card-a-icon[b-d1b4maqvcg] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }

    .card-a .card-body[b-d1b4maqvcg] {
        padding: 2rem 1rem 0.75rem;
    }

    .card-a-title[b-d1b4maqvcg] {
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .card-a .card-text[b-d1b4maqvcg] {
        font-size: 0.875rem;
    }

    .card-a-actions[b-d1b4maqvcg] {
        gap: 0.375rem;
        padding: 0.25rem 1rem 1rem;
    }

    .card-a-actions[b-d1b4maqvcg]  .btn {
        gap: 0.35rem;
        padding: 0.4rem 0.45rem;
        font-size: 0.6875rem;
        border-radius: 0.4rem;
    }

    .card-a-actions[b-d1b4maqvcg]  .btn i {
        font-size: 1.125rem;
    }
}

@container (max-width: 12.5rem) {
    .card-a-actions[b-d1b4maqvcg] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Shared/UI/CardB.razor.rz.scp.css */
.card-b[b-55bohyzkis] {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(31, 41, 55, 0.08);
}

/* ===== Photo and badge ===== */
.card-b-media[b-55bohyzkis] {
    position: relative;
}

.card-b-media img[b-55bohyzkis] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 0; /* the card clips the corners itself */
}

.card-b-icon[b-55bohyzkis] {
    position: absolute;
    left: 50%;
    bottom: -1.375rem;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #fff;
    background-color: var(--brand-secondary);
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 0.75rem rgba(31, 41, 55, 0.15);
    font-size: 1.375rem;
}

/* ===== Body ===== */
.card-b .card-body[b-55bohyzkis] {
    padding: 2.5rem 1.25rem 1.5rem; /* top padding leaves room for the badge */
}

/* Default colour; override from the page with Bootstrap utilities in TitleClass. */
.card-b-title[b-55bohyzkis] {
    margin-bottom: 0.75rem;
    color: var(--brand-primary);
    font-weight: 700;
    line-height: 1.2;
}

.card-b-lead[b-55bohyzkis] {
    margin-bottom: 1rem;
    color: var(--brand-text);
    font-weight: 700;
    font-size: 1.0625rem;
}

.card-b .card-text[b-55bohyzkis] {
    font-size: 1.0625rem;
}

/* Description paragraphs are authored by the page, so they need ::deep. */
.card-b .card-text[b-55bohyzkis]  p {
    margin-bottom: 1rem;
}

.card-b .card-text[b-55bohyzkis]  p:last-child {
    margin-bottom: 0;
}
/* /Components/Shared/UI/ScrollToTop.razor.rz.scp.css */
.scroll-top[b-5r5q6yx7nv] {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 1030;              /* above the page and its sticky header, below modals (1055) */
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: #fff;
    background-color: var(--brand-primary);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    cursor: pointer;

    /* Hidden until the page has been scrolled; visibility also keeps it out of the tab order */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background-color 0.15s ease;
}

    .scroll-top.is-visible[b-5r5q6yx7nv] {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .scroll-top:hover[b-5r5q6yx7nv] {
        background-color: var(--brand-primary-hover);
    }

    .scroll-top:active[b-5r5q6yx7nv] {
        background-color: var(--brand-primary-active);
    }

    .scroll-top:focus-visible[b-5r5q6yx7nv] {
        outline: 3px solid var(--brand-secondary);
        outline-offset: 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .scroll-top[b-5r5q6yx7nv] {
        transition: none;
    }
}

@media print {
    .scroll-top[b-5r5q6yx7nv] {
        display: none;
    }
}
/* /Components/Shared/UI/SolutionSelector.razor.rz.scp.css */
/* Mobile-first. The selector responds to its own width (container queries, not the viewport),
   so it adapts wherever it is placed:
     base        phones: tabs side by side, logo and Explore link only
     >= 36rem    tablets: headline and description appear
     >= 60rem    desktop: the design's spacing
   Grid rows: 1 = tab buttons, 2 = Explore links, 3 = panel. Each tab spans rows 1-2 of its column,
   and its link is placed over the tab's bottom edge in row 2. The selected tab runs on into the
   panel and lends it its colour; the other tab stops short, leaving a thin gap. */
.solution-selector[b-0b17eex9as] {
    --solution-gap: 0.5rem; /* between the tabs and the panel */
    --solution-radius: 1.25rem;
    container: solution-selector / inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
}

/* ===== Colours ===== */
/* Hover: the accent nudged 8% toward its brand colour */
.solution-biz[b-0b17eex9as] {
    --solution-bg: var(--brand-primary-accent);
    --solution-hover-bg: color-mix(in srgb, var(--brand-primary-accent) 92%, var(--brand-primary));
}

.solution-enterprise[b-0b17eex9as] {
    --solution-bg: var(--brand-secondary-accent);
    --solution-hover-bg: color-mix(in srgb, var(--brand-secondary-accent) 92%, var(--brand-secondary));
}

/* ===== Tabs ===== */
.solution-tabs[b-0b17eex9as] {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.solution-tab[b-0b17eex9as] {
    position: relative; /* containing block for the button's ::after layer */
    isolation: isolate; /* keeps that layer (z-index: -1) behind the tab's content, not the page */
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    padding: 1rem 0.75rem 0;
}

.solution-tab-button[b-0b17eex9as] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 0.75rem;
    padding: 0;
    color: inherit;
    text-align: start;
    background: none;
    border: 0;
}

    .solution-tab-button.active[b-0b17eex9as] {
        cursor: default;
    }

    /* Covers the whole tab, link row included, so a click anywhere on it selects the tab. It also
       paints the tab's background, so every state below is styled from the button alone. */
    .solution-tab-button[b-0b17eex9as]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--solution-bg);
        transition: background-color 0.15s ease-in-out;
    }

.solution-tab:first-child .solution-tab-button[b-0b17eex9as]::after {
    border-start-start-radius: var(--solution-radius);
}

.solution-tab:last-child .solution-tab-button[b-0b17eex9as]::after {
    border-start-end-radius: var(--solution-radius);
}

/* Selected: bridge the gap so the tab and the panel read as one shape */
.solution-tab-button.active[b-0b17eex9as]::after {
    inset-block-end: calc(-1 * var(--solution-gap));
}

/* Outline the whole tab, not just the button's content */
.solution-tab-button:focus-visible[b-0b17eex9as] {
    outline: 0;
}

    .solution-tab-button:focus-visible[b-0b17eex9as]::after {
        outline: 2px solid var(--brand-primary);
        outline-offset: -0.25rem;
    }

/* Hover effects only where hover exists, so a tap doesn't leave a tab highlighted */
@media (hover: hover) {
    .solution-tab-button:not(.active):hover[b-0b17eex9as]::after {
        background-color: var(--solution-hover-bg);
    }
}

.solution-logo[b-0b17eex9as] {
    display: block;
    width: 100%;
    max-width: 23.5rem;
    height: auto;
}

/* Phones show only the logo; screen readers still get the text through aria-describedby */
.solution-text[b-0b17eex9as] {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.solution-headline[b-0b17eex9as] {
    font-weight: 700;
}

/* ===== Explore links ===== */
.solution-link[b-0b17eex9as] {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 0.5rem;
    position: relative;
    z-index: 1; /* above the tab's click layer */
    grid-row: 2;
    align-self: end;
    margin: 0 0.75rem 0.75rem;
}

/* ===== Panel ===== */
.solution-panels[b-0b17eex9as] {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-block-start: var(--solution-gap);
    padding: 1rem;
    border-end-start-radius: var(--solution-radius);
    border-end-end-radius: var(--solution-radius);
}

/* The panel takes the selected tab's colour; Bootstrap's tab plugin moves .active between the tabs */
.solution-selector:has(.solution-biz > .active) .solution-panels[b-0b17eex9as] {
    background-color: var(--brand-primary-accent);
}

.solution-selector:has(.solution-enterprise > .active) .solution-panels[b-0b17eex9as] {
    background-color: var(--brand-secondary-accent);
}

/* ===== Tablet ===== */
@container solution-selector (width >= 36rem) {
    .solution-tab[b-0b17eex9as] {
        padding: 1.5rem 1.5rem 0;
    }

    .solution-text[b-0b17eex9as] {
        display: flex;
    }

    .solution-link[b-0b17eex9as] {
        justify-self: end;
        margin: 0 1.5rem 1.25rem;
    }

    .solution-panels[b-0b17eex9as] {
        padding: 1.5rem;
    }
}

/* ===== Desktop: the design's spacing ===== */
@container solution-selector (width >= 60rem) {
    .solution-tab[b-0b17eex9as] {
        padding: 2.75rem 2.5rem 0;
    }

    .solution-link[b-0b17eex9as] {
        margin-inline: 2.25rem;
    }

    .solution-panels[b-0b17eex9as] {
        padding: 2rem 2.25rem 2.5rem;
    }
}