/* ==========================================================================
   OptiML QMS — Hero section
   ========================================================================== */

section.inner_page_top.qms_hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, #102A4B 30%, #21738c 120%) !important;
    background-color: #102A4B;
    background-size: cover;
    color: #fff;
}

.qms_hero .container {
    position: relative;
    z-index: 1;
}

section.inner_page_top.qms_hero .inner_page_title,
section.inner_page_top.qms_hero .inner_page_sub_title,
section.inner_page_top.qms_hero .inner_page_descp,
section.inner_page_top.qms_hero ul,
section.inner_page_top.qms_hero li {
    color: #fff !important;
}

/* soft moving glow behind the copy */
.qms_hero::after {
    content: "";
    position: absolute;
    top: -140px;
    left: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 186, 230, .35) 0%, rgba(49, 186, 230, 0) 70%);
    z-index: 0;
    animation: qms_glow_drift 12s ease-in-out infinite alternate;
}

@keyframes qms_glow_drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(70px, 60px, 0); }
}

/* --- Copy column ------------------------------------------------------- */

.qms_hero_copy {
    padding: 30px 0;
}

.qms_hero_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
}

.qms_hero_badge i {
    color: #31bae6;
    font-size: 12px;
}

section.inner_page_top.qms_hero .inner_page_title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* .qms_hero .inner_page_title .qms_title_accent {
    background: linear-gradient(90deg, #31bae6 0%, #f0812d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
} */

section.inner_page_top.qms_hero .inner_page_descp {
    font-size: 19px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    margin-bottom: 22px;
    min-height: 40px;
}

/* --- Form input text more readable on dark bg -------------------------- */

.qms_hero .theme-form-submit .form-control::placeholder {
    color: #5e6162;
}

/* --- Typewriter -------------------------------------------------------- */

.typewriter-text {
    font-weight: 700;
    color: #f0812d;
}

.typewriter-cursor {
    display: inline-block;
    margin-left: 2px;
    font-weight: 400;
    color: #31bae6;
    animation: qms_caret_blink .7s step-end infinite;
}

@keyframes qms_caret_blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* --- Feature chips ----------------------------------------------------- */

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

.qms_hero_chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.qms_hero_chips li:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(49, 186, 230, .7);
    transform: translateY(-2px);
}

.qms_hero_chips li i {
    color: #16a64a;
    font-size: 13px;
}

/* --- Inline demo form -------------------------------------------------- */

.qms_hero .theme-form-submit {
    max-width: 470px;
}

.qms_hero .theme-form-submit .input-group {
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
}

.qms_hero .theme-form-submit .form-control {
    height: 46px;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.qms_hero .theme-form-submit .form-control:focus {
    box-shadow: 0 0 0 3px rgba(49, 186, 230, .35);
}

.qms_hero .theme-form-submit .btn-primary {
    height: 46px;
    padding: 0 26px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    /* Matches the darkened platform-page gradient in a11y-fixes.css, so this
       hero button and the reference buttons on /products/voice-ai and
       /products/analytics read as one control. White on the old #f0812d
       fails, and the dark label this used to inherit measured #0a1425 on
       #e4252e = 4.04:1, so the gradient itself has to deepen.
       #ffffff on #b15f21 = 4.64:1, on #c9202e = 5.63:1. */
    background: linear-gradient(135deg, #b15f21 0%, #c9202e 100%);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(177, 95, 33, .38);
    transition: transform .25s ease, box-shadow .25s ease;
    color:#fff!important;
}

.qms_hero .theme-form-submit .btn-primary:hover,
.qms_hero .theme-form-submit .btn-primary:focus {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #9c521c 0%, #b01c28 100%);
    box-shadow: 0 9px 24px rgba(177, 95, 33, .5);
    color:#fff!important;
}

.qms_hero .errorMessage1 {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #ffd5d8 !important;
}

/* --- Trust strip ------------------------------------------------------- */

.qms_hero_trust {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.qms_hero_trust_item .qms_hero_trust_value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.qms_hero_trust_item .qms_hero_trust_label {
    font-size: 12.5px;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .7);
}

/* --- Visual column ----------------------------------------------------- */

.qms_hero_visual {
    position: relative;
    width: 100%;
}

.qms_hero_visual_frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    animation: qms_float 6s ease-in-out infinite;
}

.qms_hero_visual_frame img {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes qms_float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.qms_hero_visual_frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 32, 71, .45), transparent 55%);
    pointer-events: none;
}

/* floating stat card over the image */
.qms_hero_stat_card {
    position: absolute;
    bottom: 26px;
    left: -18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    z-index: 2;
}

.qms_hero_stat_card i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(22, 166, 74, .12);
    color: #16a64a;
    font-size: 16px;
}

.qms_hero_stat_card .qms_hero_stat_value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: #102A4B;
}

.qms_hero_stat_card .qms_hero_stat_label {
    font-size: 12px;
    color: #5e6162;
}


.system-heading{
    color:#fff!important;
    font-size:30px!important;
}


.system-para{
    font-size: 18px !important;
    color: #fff !important;
    line-height: 30px !important;
}


.section-optiml-heading{
    margin-bottom: 0px!important;
}



.automated-service-frame-wrap{
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 60px 0 60px !important;
    background-color: #edf2fa;

}

/* ==========================================================================
   OptiML QMS — "How It Works" four-stage pipeline
   ========================================================================== */

section.qms_pipeline_section {
    position: relative;
    padding: 40px 0 40px !important;
    background: #fff;
    overflow: hidden;
}

/* faint grid backdrop so the section reads as a "process canvas" */
section.qms_pipeline_section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(16, 42, 75, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 42, 75, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}

section.qms_pipeline_section .container {
    position: relative;
    z-index: 1;
}

/* --- Section headings -------------------------------------------------- */

/* .qms_section_eyebrow carries the same pill for the one-word labels that open
   the Features / Analytics / Industries / Security bands. They used to be a
   second 30px H2 stacked above the band's own 30px H2, which read as two
   headings of equal rank across a background change. */
.qms_pipeline_eyebrow,
.qms_section_eyebrow {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 16px;
    border-radius: 100px;
    background: rgba(33, 115, 140, .1);
    color: #21738c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* font-size is deliberately absent: the element also carries .section_heading,
   so it inherits the page-wide 30px (and its own breakpoint steps) and stays
   level with every other section H2 on the page. */
section.qms_pipeline_section .qms_pipeline_heading {
    margin-bottom: 12px;
    font-weight: 700;
    color: #102A4B;
}

.qms_pipeline_subheading {
    max-width: 620px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: #5e6162;
}

/* --- Pipeline layout --------------------------------------------------- */

.qms_pipeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}

/* the horizontal connector line running through the markers */
.qms_pipeline_track {
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #102A4B 0%, #21738c 50%, #f0812d 100%);
    opacity: .28;
}

.qms_pipeline_step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Numbered marker --------------------------------------------------- */

.qms_pipeline_marker {
    position: relative;
    z-index: 2;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    aspect-ratio: 1 / 1;
    margin-bottom: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #102A4B 0%, #21738c 100%);
    box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(16, 42, 75, .28);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* "hanger" drop line connecting the marker down to its card */
.qms_pipeline_marker::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 34px;
    background: linear-gradient(180deg, #21738c 0%, rgba(33, 115, 140, .25) 100%);
}

.qms_pipeline_num {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
}

/* .qms_pipeline_step:nth-child(3) .qms_pipeline_marker { background: linear-gradient(135deg, #16506b 0%, #2b8aa6 100%); }
.qms_pipeline_step:nth-child(4) .qms_pipeline_marker { background: linear-gradient(135deg, #21738c 0%, #31bae6 100%); } */
/* .qms_pipeline_step:nth-child(5) .qms_pipeline_marker { background: linear-gradient(135deg, #d9741f 0%, #f0812d 100%); } */

/* --- Step card --------------------------------------------------------- */

.qms_pipeline_card {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px 24px 28px;
    border: 1px solid #e3e9f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(16, 42, 75, .07);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* accent bar that fills in on hover */
.qms_pipeline_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #21738c, #f0812d);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
}

.qms_pipeline_step:hover .qms_pipeline_card {
    transform: translateY(-8px);
    border-color: #cfdcec;
    box-shadow: 0 16px 38px rgba(16, 42, 75, .14);
}

.qms_pipeline_step:hover .qms_pipeline_card::before {
    transform: scaleX(1);
}

.qms_pipeline_step:hover .qms_pipeline_marker {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 0 0 6px #fff, 0 12px 26px rgba(16, 42, 75, .36);
}

/* keep the hanger line touching the card while the marker lifts */
.qms_pipeline_step:hover .qms_pipeline_marker::after {
    height: 42px;
}

/* --- Card icon --------------------------------------------------------- */

.qms_pipeline_icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(140deg, #eef4fb 0%, #e2edf7 100%);
    /* stage glyphs are inline SVG and stroke with currentColor */
    color: #094fb7;
    transition: background .3s ease, transform .3s ease;
}

.qms_pipeline_icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* .qms_pipeline_step:hover .qms_pipeline_icon {
    background: linear-gradient(140deg, #dcebf7 0%, #cfe3f4 100%);
    transform: rotate(-4deg);
} */

/* --- Card text --------------------------------------------------------- */

.qms_pipeline_card .qms_pipeline_title {
    margin-bottom: 12px;
    font-size: 21px;
    font-weight: 700;
    color: #102A4B;
}

.qms_pipeline_text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.72;
    color: #5e6162;
}

/* --- Pipeline responsive ----------------------------------------------- */

@media (max-width: 1199px) {
    .qms_pipeline { gap: 18px; }
    .qms_pipeline_card { padding: 26px 18px 24px; }
    .qms_pipeline_text { font-size: 14px; }
}

@media (max-width: 991px) {
    .qms_pipeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
    /* horizontal line no longer maps to a 4-across row */
    .qms_pipeline_track { display: none; }
}

@media (max-width: 767px) {
    section.qms_pipeline_section { padding: 50px 0 55px !important; }
    .qms_pipeline_subheading { font-size: 15.5px; }

    /* vertical timeline on mobile */
    .qms_pipeline {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 40px;
        padding-left: 8px;
    }

    .qms_pipeline_step {
        flex-direction: row;
        align-items: flex-start;
        gap: 18px;
        padding-bottom: 28px;
    }

    /* connector between stacked steps */
    .qms_pipeline_step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 56px;
        left: 23px;
        bottom: 4px;
        width: 3px;
        border-radius: 3px;
        background: linear-gradient(180deg, rgba(33, 115, 140, .45), rgba(33, 115, 140, .1));
    }

    .qms_pipeline_marker {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        margin-bottom: 0;
        box-shadow: 0 0 0 5px #fff, 0 6px 14px rgba(16, 42, 75, .25);
    }

    /* vertical timeline handles the connection on mobile */
    .qms_pipeline_marker::after { display: none; }

    .qms_pipeline_num { font-size: 15px; }

    .qms_pipeline_card {
        padding: 22px 20px;
        text-align: left;
    }

    .qms_pipeline_card::before { left: 20px; right: 20px; }

    .qms_pipeline_icon {
        width: 56px;
        height: 56px;
        margin: 0 0 14px;
        border-radius: 14px;
    }

    .qms_pipeline_icon img,
    .qms_pipeline_icon svg { width: 32px; height: 32px; }

    .qms_pipeline_card .qms_pipeline_title { font-size: 19px; }

    .qms_pipeline_step:hover .qms_pipeline_card { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .qms_pipeline_card,
    .qms_pipeline_marker,
    .qms_pipeline_icon { transition: none; }
    .qms_pipeline_step:hover .qms_pipeline_card,
    .qms_pipeline_step:hover .qms_pipeline_marker,
    .qms_pipeline_step:hover .qms_pipeline_icon { transform: none; }
}

/* ==========================================================================
   OptiML QMS — FAQ
   ========================================================================== */

section.qms_faq_section {
    position: relative;
    padding: 70px 0 75px;
    background: #fff;
    overflow: hidden;
}

/* soft tint behind the aside column */
section.qms_faq_section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 115, 140, .1) 0%, rgba(33, 115, 140, 0) 70%);
    pointer-events: none;
}

section.qms_faq_section .container {
    position: relative;
    z-index: 1;
}

/* --- Left aside -------------------------------------------------------- */

.qms_faq_aside {
    position: sticky;
    top: 120px;
    padding-right: 24px;
}

.qms_faq_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 16px;
    border-radius: 100px;
    background: rgba(33, 115, 140, .1);
    color: #21738c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* Sized to match .section_heading, the H2 treatment every other section on
   this page uses. The steps below mirror style.css's own breakpoints for
   .section_heading so the two stay level at every width. */
.qms_faq_aside .qms_faq_heading {
    margin-bottom: 14px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #102A4B;
}

@media only screen and (max-width: 1024px) {
    .qms_faq_aside .qms_faq_heading { font-size: 33px; }
}

@media only screen and (max-width: 768px) {
    .qms_faq_aside .qms_faq_heading { font-size: 30px; }
}

@media only screen and (max-width: 575px) {
    .qms_faq_aside .qms_faq_heading { font-size: 25px; }
}

@media only screen and (max-width: 479px) {
    .qms_faq_aside .qms_faq_heading { font-size: 21px; }
}

.qms_faq_lead {
    margin-bottom: 28px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #5e6162;
}

/* helper card */
.qms_faq_help {
    display: flex;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e3e9f2;
    border-left: 3px solid #f0812d;
    border-radius: 14px;
    background: #f8fafd;
}

.qms_faq_help_icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(240, 129, 45, .12);
    color: #f0812d;
    font-size: 16px;
}

.qms_faq_help strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #102A4B;
}

.qms_faq_help p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #5e6162;
}

.qms_faq_help a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* 13.5px text alone gives a ~20px hit box; WCAG 2.5.8 wants 24px minimum */
    min-height: 24px;
    padding: 2px 0;
    color: #21738c;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.qms_faq_help a i {
    font-size: 11px;
    transition: transform .25s ease;
}

.qms_faq_help a:hover {
    color: #f0812d;
    text-decoration: none;
}

.qms_faq_help a:hover i {
    transform: translateX(4px);
}

/* --- Accordion --------------------------------------------------------- */

.qms_faq_accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qms_faq_item {
    position: relative;
    border: 1px solid #e3e9f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(16, 42, 75, .05);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.qms_faq_item:hover {
    border-color: #cfdcec;
    box-shadow: 0 8px 24px rgba(16, 42, 75, .09);
}

/* --- Question ---------------------------------------------------------- */

.qms_faq_accordion .qms_faq_q {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 22px 24px;
    cursor: pointer;
    user-select: none;
    transition: background .25s ease;
}

/* left accent bar that grows in when the item is open */
.qms_faq_accordion .qms_faq_q::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #21738c, #f0812d);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease;
}

.qms_faq_accordion .qms_faq_q:hover {
    background: #f8fafd;
}

.qms_faq_accordion .qms_faq_q:focus-visible {
    outline: 2px solid #21738c;
    outline-offset: -2px;
}

.qms_faq_index {
    flex: 0 0 auto;
    min-width: 30px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
    color: #66748a;
    letter-spacing: .5px;
    transition: color .25s ease;
}

.qms_faq_qtext {
    flex: 1 1 auto;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.55;
    color: #102A4B;
    transition: color .25s ease;
}

/* animated plus / minus toggle */
.qms_faq_toggle {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 50%;
    background: #eef3f9;
    transition: background .3s ease, transform .3s ease;
}

.qms_faq_toggle::before,
.qms_faq_toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #21738c;
    transform: translate(-50%, -50%);
    transition: transform .3s ease, background .3s ease;
}

.qms_faq_toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* --- Open state -------------------------------------------------------- */

.qms_faq_q:not(.collapsed) {
    background: #f8fafd;
}

.qms_faq_q:not(.collapsed)::before {
    transform: scaleY(1);
}

.qms_faq_q:not(.collapsed) .qms_faq_index {
    color: #21738c;
}

.qms_faq_q:not(.collapsed) .qms_faq_qtext {
    color: #21738c;
}

.qms_faq_q:not(.collapsed) .qms_faq_toggle {
    background: #21738c;
    transform: rotate(180deg);
}

.qms_faq_q:not(.collapsed) .qms_faq_toggle::before,
.qms_faq_q:not(.collapsed) .qms_faq_toggle::after {
    background: #fff;
}

/* collapse the vertical bar to leave a minus sign */
.qms_faq_q:not(.collapsed) .qms_faq_toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* --- Answer ------------------------------------------------------------ */

.qms_faq_a {
    padding: 0 24px 24px 70px;
}

.qms_faq_a p {
    margin: 0;
    border-top: 1px dashed #e3e9f2;
    padding-top: 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #5e6162;
}

/* --- FAQ responsive ---------------------------------------------------- */

@media (max-width: 991px) {
    .qms_faq_aside {
        position: static;
        padding-right: 0;
        margin-bottom: 36px;
    }
    .qms_faq_aside .qms_faq_heading br { display: none; }
}

@media (max-width: 767px) {
    section.qms_faq_section { padding: 45px 0 50px; }
    .qms_faq_lead { font-size: 15px; }

    .qms_faq_accordion .qms_faq_q {
        gap: 12px;
        padding: 18px 16px;
    }
    .qms_faq_index {
        min-width: 24px;
        font-size: 12px;
    }
    .qms_faq_qtext { font-size: 15.5px; }
    .qms_faq_toggle {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
    }
    .qms_faq_a { padding: 0 16px 20px 52px; }
    .qms_faq_a p { font-size: 14.5px; }
}

@media (max-width: 479px) {
    .qms_faq_a { padding: 0 16px 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .qms_faq_item,
    .qms_faq_accordion .qms_faq_q::before,
    .qms_faq_toggle,
    .qms_faq_toggle::before,
    .qms_faq_toggle::after { transition: none; }
}

/* ==========================================================================
   OptiML QMS — "Get a Free Consultation" CTA
   ========================================================================== */

section.qms_cta_section {
    position: relative;
    padding: 70px 0 80px;
    background: #f4f7fb;
    overflow: hidden;
}

/* soft decorative blobs */
.qms_cta_blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.qms_cta_blob_1 {
    top: -120px;
    left: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(33, 115, 140, .18) 0%, rgba(33, 115, 140, 0) 70%);
}

.qms_cta_blob_2 {
    bottom: -140px;
    right: -110px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(240, 129, 45, .16) 0%, rgba(240, 129, 45, 0) 70%);
}

section.qms_cta_section .container {
    position: relative;
    z-index: 1;
}

/* --- Panel ------------------------------------------------------------- */

.qms_cta_panel {
    position: relative;
    padding: 52px 48px;
    border-radius: 24px;
    background: linear-gradient(120deg, #102A4B 0%, #16506b 55%, #21738c 100%);
    box-shadow: 0 24px 60px rgba(16, 42, 75, .3);
    overflow: hidden;
}

/* faint diagonal sheen across the panel */
.qms_cta_panel::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -10%;
    width: 60%;
    height: 220%;
    background: linear-gradient(100deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(12deg);
    pointer-events: none;
}

/* --- Copy side --------------------------------------------------------- */

.qms_cta_copy {
    position: relative;
    z-index: 1;
    padding-right: 20px;
}

.qms_cta_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .6px;
}

.qms_cta_eyebrow i {
    color: #f0812d;
    font-size: 12px;
}

.qms_cta_panel .qms_cta_title {
    margin-bottom: 14px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.qms_cta_text {
    max-width: 560px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .84);
}

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

.qms_cta_list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
}

.qms_cta_list li:last-child {
    margin-bottom: 0;
}

.qms_cta_list li i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #31bae6;
    font-size: 14px;
}

/* --- Form card --------------------------------------------------------- */

.qms_cta_card {
    position: relative;
    z-index: 1;
    padding: 32px 30px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.qms_cta_card .qms_cta_card_title {
    margin-bottom: 6px;
    font-size: 23px;
    font-weight: 700;
    color: #102A4B;
}

.qms_cta_card_sub {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #5e6162;
}

/* primary CTA button — routes to the contact page */
.qms_cta_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    border-radius: 10px;
    /* same darkened gradient as the hero button above, so the two do not diverge */
    background: linear-gradient(135deg, #b15f21 0%, #c9202e 100%);
    box-shadow: 0 8px 20px rgba(177, 95, 33, .34);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.qms_cta_btn:hover,
.qms_cta_btn:focus {
    background: linear-gradient(135deg, #9c521c 0%, #b01c28 100%);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(177, 95, 33, .46);
}

.qms_cta_btn i {
    font-size: 13px;
    transition: transform .25s ease;
}

.qms_cta_btn:hover i {
    transform: translateX(4px);
}

/* --- Divider ----------------------------------------------------------- */

.qms_cta_or {
    position: relative;
    margin: 24px 0 18px;
    text-align: center;
}

.qms_cta_or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e6ecf4;
}

.qms_cta_or span {
    position: relative;
    padding: 0 12px;
    background: #fff;
    font-size: 12.5px;
    color: #5e6162;
}

/* --- Direct links ------------------------------------------------------ */

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

.qms_cta_direct a {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid #dde5ef;
    border-radius: 10px;
    background: #f8fafd;
    color: #102A4B;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.qms_cta_direct a i {
    color: #21738c;
    font-size: 13px;
    transition: color .25s ease;
}

.qms_cta_direct a:hover {
    background: #eef4fb;
    border-color: #21738c;
    color: #102A4B;
    text-decoration: none;
}

.qms_cta_direct a:hover i {
    color: #f0812d;
}

.qms_cta_privacy {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #5e6162;
}

.qms_cta_privacy i {
    font-size: 11px;
    color: #16a64a;
}

/* --- CTA responsive ---------------------------------------------------- */

@media (max-width: 1199px) {
    .qms_cta_panel { padding: 44px 36px; }
    .qms_cta_panel .qms_cta_title { font-size: 34px; }
}

@media (max-width: 991px) {
    .qms_cta_copy {
        padding-right: 0;
        margin-bottom: 34px;
    }
    .qms_cta_panel .qms_cta_title { font-size: 32px; }
    .qms_cta_text { max-width: 100%; }
}

@media (max-width: 767px) {
    section.qms_cta_section { padding: 45px 0 55px; }
    .qms_cta_panel {
        padding: 32px 22px;
        border-radius: 18px;
    }
    .qms_cta_panel .qms_cta_title { font-size: 26px; }
    .qms_cta_text { font-size: 15px; }
    .qms_cta_list li { font-size: 14.5px; }
    .qms_cta_card { padding: 24px 20px; }
    .qms_cta_card .qms_cta_card_title { font-size: 20px; }
    .qms_cta_direct a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .qms_cta_btn,
    .qms_cta_btn i { transition: none; }
    .qms_cta_btn:hover,
    .qms_cta_btn:hover i { transform: none; }
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 991px) {
    .qms_hero .inner_page_title { font-size: 38px; }
    .qms_hero .inner_page_descp { font-size: 16.5px; }
    .qms_hero_trust { gap: 20px; }
}

@media (max-width: 767px) {
    .qms_hero_copy { padding: 10px 0 0; }
    .qms_hero .inner_page_title { font-size: 30px; }
    .qms_hero .inner_page_descp { font-size: 15.5px; min-height: 72px; }
    .qms_hero .theme-form-submit { max-width: 100%; }
    .qms_hero .theme-form-submit .input-group { flex-wrap: nowrap; }
    .qms_hero .theme-form-submit .btn-primary { padding: 0 16px; font-size: 14px; }
    .qms_hero_visual_frame { animation: none; }
    .qms_hero_stat_card { left: 12px; bottom: 12px; padding: 10px 14px; }
    .qms_hero_stat_card i { width: 32px; height: 32px; font-size: 14px; }
    .qms_hero_trust_item .qms_hero_trust_value { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .qms_hero::after,
    .qms_hero_visual_frame,
    .typewriter-cursor { animation: none; }
}

/* ==========================================================================
   OptiML QMS — Keyboard focus
   Only the accordion question and the hero e-mail field had a focus style;
   every other interactive element on the page relied on the UA default,
   which the site's resets remove.
   ========================================================================== */

.qms_hero .theme-form-submit .btn-primary:focus-visible,
.qms_cta_btn:focus-visible,
.qms_cta_direct a:focus-visible,
.qms_faq_help a:focus-visible {
    outline: 3px solid #31bae6;
    outline-offset: 3px;
}

.qms_hero .theme-form-submit .form-control:focus-visible {
    outline: 3px solid #31bae6;
    outline-offset: 2px;
}

/* the hero sits on a dark gradient — use a light ring there instead */
.qms_hero .theme-form-submit .btn-primary:focus-visible {
    outline-color: #fff;
}

/* success state for the inline demo-request form */
.qms_hero .errorMessage1.is-success {
    color: #d6f5e4 !important;
}





/* ==========================================================================
   OptiML CX Platform — FAQ and final-CTA sections
   Ported from css/optiml-qms.css (.qms_faq_* / .qms_cta_*) and rescoped to
   .pf_* so the platform module pages do not depend on the QMS stylesheet.
   ========================================================================== */

/* ==========================================================================
   FAQ
   ========================================================================== */

section.pf_faq_section {
    position: relative;
    padding: 70px 0 75px;
    background: #fff;
    overflow: hidden;
}

/* soft tint behind the aside column */
section.pf_faq_section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 115, 140, .1) 0%, rgba(33, 115, 140, 0) 70%);
    pointer-events: none;
}

section.pf_faq_section .container {
    position: relative;
    z-index: 1;
}

/* --- Left aside -------------------------------------------------------- */

/* Not sticky: section.pf_faq_section clips its decorative circle with
   overflow:hidden, which makes the section the aside's scroll container, and a
   container that never scrolls can never stick — measured on /products/cx-solutions,
   the aside scrolls straight off the top like any static block. All the sticky
   did was pin the aside to the bottom of the equal-height column, so its
   eyebrow hung 8px (module pages) to 120px (optiml-qms) below accordion row 01. */
.pf_faq_aside {
    padding-right: 24px;
}

.pf_faq_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 16px;
    border-radius: 100px;
    background: rgba(33, 115, 140, .1);
    color: #21738c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.pf_faq_aside .pf_faq_heading {
    margin-bottom: 14px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #102A4B;
}

.pf_faq_lead {
    margin-bottom: 28px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #5e6162;
}

/* helper card */
.pf_faq_help {
    display: flex;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e3e9f2;
    border-left: 3px solid #f0812d;
    border-radius: 14px;
    background: #f8fafd;
}

.pf_faq_help_icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(240, 129, 45, .12);
    color: #f0812d;
    font-size: 16px;
}

.pf_faq_help strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #102A4B;
}

.pf_faq_help p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #5e6162;
}

.pf_faq_help a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #21738c;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.pf_faq_help a i {
    font-size: 11px;
    transition: transform .25s ease;
}

.pf_faq_help a:hover {
    color: #f0812d;
    text-decoration: none;
}

.pf_faq_help a:hover i {
    transform: translateX(4px);
}

/* --- Accordion --------------------------------------------------------- */

.pf_faq_accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pf_faq_item {
    position: relative;
    border: 1px solid #e3e9f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(16, 42, 75, .05);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.pf_faq_item:hover {
    border-color: #cfdcec;
    box-shadow: 0 8px 24px rgba(16, 42, 75, .09);
}

/* --- Question ---------------------------------------------------------- */

/* The question is a real <button> inside an <h3>: the heading keeps its
   semantics for screen readers and the control keeps native button
   behaviour, which role="button" on the heading itself would have lost. */
.pf_faq_q_wrap {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.pf_faq_accordion .pf_faq_q {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 22px 24px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background .25s ease;
}

/* left accent bar that grows in when the item is open */
.pf_faq_accordion .pf_faq_q::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #21738c, #f0812d);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease;
}

.pf_faq_accordion .pf_faq_q:hover {
    background: #f8fafd;
}

.pf_faq_accordion .pf_faq_q:focus-visible {
    outline: 2px solid #21738c;
    outline-offset: -2px;
}

.pf_faq_index {
    flex: 0 0 auto;
    min-width: 30px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
    color: #66748c;
    letter-spacing: .5px;
    transition: color .25s ease;
}

.pf_faq_qtext {
    flex: 1 1 auto;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.55;
    color: #102A4B;
    transition: color .25s ease;
}

/* animated plus / minus toggle */
.pf_faq_toggle {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 50%;
    background: #eef3f9;
    transition: background .3s ease, transform .3s ease;
}

.pf_faq_toggle::before,
.pf_faq_toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #21738c;
    transform: translate(-50%, -50%);
    transition: transform .3s ease, background .3s ease;
}

.pf_faq_toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* --- Open state -------------------------------------------------------- */

.pf_faq_q:not(.collapsed) {
    background: #f8fafd;
}

.pf_faq_q:not(.collapsed)::before {
    transform: scaleY(1);
}

.pf_faq_q:not(.collapsed) .pf_faq_index {
    color: #f0812d;
}

.pf_faq_q:not(.collapsed) .pf_faq_qtext {
    color: #21738c;
}

.pf_faq_q:not(.collapsed) .pf_faq_toggle {
    background: #21738c;
    transform: rotate(180deg);
}

.pf_faq_q:not(.collapsed) .pf_faq_toggle::before,
.pf_faq_q:not(.collapsed) .pf_faq_toggle::after {
    background: #fff;
}

/* collapse the vertical bar to leave a minus sign */
.pf_faq_q:not(.collapsed) .pf_faq_toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* --- Answer ------------------------------------------------------------ */

.pf_faq_a {
    padding: 0 24px 24px 70px;
}

.pf_faq_a p {
    margin: 0;
    padding-top: 16px;
    border-top: 1px dashed #e3e9f2;
    font-size: 15px;
    line-height: 1.8;
    color: #5e6162;
}

/* --- FAQ responsive ---------------------------------------------------- */

@media (max-width: 991px) {
    .pf_faq_aside {
        padding-right: 0;
        margin-bottom: 36px;
    }
    .pf_faq_aside .pf_faq_heading { font-size: 32px; }
    .pf_faq_aside .pf_faq_heading br { display: none; }
}

@media (max-width: 767px) {
    section.pf_faq_section { padding: 45px 0 50px; }
    .pf_faq_aside .pf_faq_heading { font-size: 26px; }
    .pf_faq_lead { font-size: 15px; }

    .pf_faq_accordion .pf_faq_q {
        gap: 12px;
        padding: 18px 16px;
    }
    .pf_faq_index {
        min-width: 24px;
        font-size: 12px;
    }
    .pf_faq_qtext { font-size: 15.5px; }
    .pf_faq_toggle {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
    }
    .pf_faq_a { padding: 0 16px 20px 52px; }
    .pf_faq_a p { font-size: 14.5px; }
}

@media (max-width: 479px) {
    .pf_faq_a { padding: 0 16px 20px 16px; }
}

/* ==========================================================================
   Final CTA — "Book your slot"
   ========================================================================== */

section.pf_cta_section {
    position: relative;
    padding: 70px 0 80px;
    background: #f4f7fb;
    overflow: hidden;
}

/* soft decorative blobs */
.pf_cta_blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.pf_cta_blob_1 {
    top: -120px;
    left: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(33, 115, 140, .18) 0%, rgba(33, 115, 140, 0) 70%);
}

.pf_cta_blob_2 {
    bottom: -140px;
    right: -110px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(240, 129, 45, .16) 0%, rgba(240, 129, 45, 0) 70%);
}

section.pf_cta_section .container {
    position: relative;
    z-index: 1;
}

/* --- Panel ------------------------------------------------------------- */

.pf_cta_panel {
    position: relative;
    padding: 52px 48px;
    border-radius: 24px;
    background: linear-gradient(120deg, #102A4B 0%, #16506b 55%, #21738c 100%);
    box-shadow: 0 24px 60px rgba(16, 42, 75, .3);
    overflow: hidden;
}

/* faint diagonal sheen across the panel */
.pf_cta_panel::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -10%;
    width: 60%;
    height: 220%;
    background: linear-gradient(100deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(12deg);
    pointer-events: none;
}

/* --- Copy side --------------------------------------------------------- */

.pf_cta_copy {
    position: relative;
    z-index: 1;
    padding-right: 20px;
}

.pf_cta_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .6px;
}

.pf_cta_eyebrow i {
    color: #f0812d;
    font-size: 12px;
}

.pf_cta_panel .pf_cta_title {
    margin-bottom: 14px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.pf_cta_text {
    max-width: 560px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .84);
}

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

.pf_cta_list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
}

.pf_cta_list li:last-child {
    margin-bottom: 0;
}

.pf_cta_list li i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #31bae6;
    font-size: 14px;
}

/* --- Form card --------------------------------------------------------- */

.pf_cta_card {
    position: relative;
    z-index: 1;
    padding: 32px 30px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.pf_cta_card .pf_cta_card_title {
    margin-bottom: 6px;
    font-size: 23px;
    font-weight: 700;
    color: #102A4B;
}

.pf_cta_card_sub {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #5e6162;
}

.pf_cta_form .form-control {
    height: 48px;
    margin-bottom: 12px;
    border: 1px solid #dde5ef;
    border-radius: 10px;
    background: #f8fafd;
    font-size: 14.5px;
}

.pf_cta_form .form-control:focus {
    border-color: #21738c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(33, 115, 140, .18);
}

.pf_cta_form .errorMessage2 {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    color: #c0392b;
}

.pf_cta_form .errorMessage2:empty {
    display: none;
}

.pf_cta_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0812d 0%, #e4252e 100%);
    box-shadow: 0 8px 20px rgba(240, 129, 45, .34);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

.pf_cta_btn:hover,
.pf_cta_btn:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(240, 129, 45, .46);
}

.pf_cta_btn i {
    font-size: 13px;
    transition: transform .25s ease;
}

.pf_cta_btn:hover i {
    transform: translateX(4px);
}

/* --- Divider ----------------------------------------------------------- */

.pf_cta_or {
    position: relative;
    margin: 24px 0 18px;
    text-align: center;
}

.pf_cta_or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e6ecf4;
}

.pf_cta_or span {
    position: relative;
    padding: 0 12px;
    background: #fff;
    font-size: 12.5px;
    color: #66748c;
}

/* --- Direct links ------------------------------------------------------ */

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

.pf_cta_direct a {
    flex: 1 1 140px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid #dde5ef;
    border-radius: 10px;
    background: #f8fafd;
    color: #102A4B;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.pf_cta_direct a i {
    color: #21738c;
    font-size: 13px;
    transition: color .25s ease;
}

.pf_cta_direct a:hover {
    background: #eef4fb;
    border-color: #21738c;
    color: #102A4B;
    text-decoration: none;
}

.pf_cta_direct a:hover i {
    color: #f0812d;
}

.pf_cta_privacy {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #66748c;
}

.pf_cta_privacy i {
    font-size: 11px;
    color: #16a64a;
}

/* --- CTA responsive ---------------------------------------------------- */

@media (max-width: 1199px) {
    .pf_cta_panel { padding: 44px 36px; }
    .pf_cta_panel .pf_cta_title { font-size: 34px; }
}

@media (max-width: 991px) {
    .pf_cta_copy {
        padding-right: 0;
        margin-bottom: 34px;
    }
    .pf_cta_panel .pf_cta_title { font-size: 32px; }
    .pf_cta_text { max-width: 100%; }
}

@media (max-width: 767px) {
    section.pf_cta_section { padding: 45px 0 55px; }
    .pf_cta_panel {
        padding: 32px 22px;
        border-radius: 18px;
    }
    .pf_cta_panel .pf_cta_title { font-size: 26px; }
    .pf_cta_card { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf_faq_item,
    .pf_faq_accordion .pf_faq_q::before,
    .pf_faq_toggle,
    .pf_faq_toggle::before,
    .pf_faq_toggle::after,
    .pf_cta_btn,
    .pf_cta_btn i,
    .pf_cta_direct a { transition: none; }

    /* AOS animates 31-37 elements per module page and ships no reduced-motion
       guard of its own, so the scroll reveal ran regardless of the setting.
       Show the content immediately instead. */
    #main-content [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .voice-ai-arrow-link i,
    .voice-ai-tab > summary::after { transition: none; }
}

/* --- Section sub-heading -----------------------------------------------
 * These lines are descriptive sentences under the section h2, not headings,
 * so the template emits them as <p>. Keep the heading line-height (1.2) the
 * markup used to inherit so the layout is unchanged.
 * --------------------------------------------------------------------- */
.pf_section_sub {
    line-height: 1.2;
}

/* Spec table: the 40% label column used to be an inline style on every <th>. */
.pf_spec_label {
    width: 40%;
}

/* The labels are one or two words — the widest measures 227px — so 40% of a
   1110px table left a blank channel of about 340px running the full height of
   it while the value cells, the side that actually wraps, were squeezed into
   666px. Give the room back to the values. Two steps, because the percentage
   is of a container that steps too: 24% of the 930px lg table is 223px, which
   is under the widest label and wraps it, so lg gets 30% and xl gets 24%.
   Below lg the label column is already narrow and keeps the 40%. */
@media (min-width: 992px) {
    .pf_spec_label {
        width: 30%;
    }
}

@media (min-width: 1200px) {
    .pf_spec_label {
        width: 24%;
    }
}

/* ==========================================================================
   "Where this module is used" band
   The reverse of the "platform underneath" band on the Solutions pages. Both
   lists come from _solutions_links.php, generated by _solutions_build.py.
   ========================================================================== */

section.pf_solutions_band {
    position: relative;
    overflow: hidden;
}

/* Soft tint behind the grid so the band reads as its own map of the platform
   rather than a third slab of the same flat gray as the two bands above it. */
.pf_sol_blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.pf_sol_blob_1 {
    top: -140px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(33, 115, 140, .14) 0%, rgba(33, 115, 140, 0) 70%);
}

.pf_sol_blob_2 {
    right: -140px;
    bottom: -160px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(240, 129, 45, .12) 0%, rgba(240, 129, 45, 0) 70%);
}

.pf_solutions_band .container {
    position: relative;
    z-index: 1;
}

.pf_sol_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 14px;
    border-radius: 100px;
    background: rgba(33, 115, 140, .1);
    color: #21738c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.pf_sol_card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
    overflow: hidden;
    border: 1px solid #e6ecf4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(16, 42, 75, .04);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* A coloured rail per group is what lets a reader tell the three columns
   apart at a glance once they have scrolled past the headings. */
.pf_sol_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #21738c 0%, rgba(33, 115, 140, .25) 100%);
}

.pf_sol_card_role::before {
    background: linear-gradient(90deg, #102A4B 0%, rgba(16, 42, 75, .25) 100%);
}

.pf_sol_card_use-case::before {
    background: linear-gradient(90deg, #f0812d 0%, rgba(240, 129, 45, .25) 100%);
}

.pf_sol_card:hover {
    transform: translateY(-5px);
    border-color: rgba(33, 115, 140, .35);
    box-shadow: 0 16px 36px rgba(16, 42, 75, .11);
}

.pf_sol_card_head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e2e9f2;
}

.pf_sol_icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(33, 115, 140, .1);
    color: #21738c;
    font-size: 17px;
}

.pf_sol_card_role .pf_sol_icon {
    background: rgba(16, 42, 75, .09);
    color: #102A4B;
}

.pf_sol_card_use-case .pf_sol_icon {
    background: rgba(240, 129, 45, .12);
    color: #d96f1c;
}

.pf_sol_head_text {
    flex: 1 1 auto;
    min-width: 0;
}

/* style.css sizes headings inside .QMS-inner-page cards, so the specificity
   here has to match those ancestors or the label keeps the 21-23px treatment. */
.single_service_frame.QMS-inner-page .pf_sol_card .pf_sol_title,
.pf_solutions_band .pf_sol_card .pf_sol_title {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: #102A4B;
    letter-spacing: .3px;
}

.pf_sol_hint {
    margin: 2px 0 0;
    color: #6b7a90;
    font-size: 12.5px;
    line-height: 1.35;
}

.pf_sol_count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(33, 115, 140, .1);
    color: #21738c;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.pf_solutions_band ul.pf_solutions_list,
.single_service_frame.QMS-inner-page .pf_sol_card ul.pf_solutions_list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.pf_solutions_band ul.pf_solutions_list li,
.single_service_frame.QMS-inner-page .pf_sol_card ul.pf_solutions_list li {
    padding: 0;
    padding-left: 0;
    margin-bottom: 6px;
    line-height: 22px;
    font-size: 15px;
}

/* The bullet in style.css is `content: "\f621" !important`, so clearing it
   needs !important too. Without this the FontAwesome chevron is absolutely
   positioned at left:0 and paints on top of the first characters of every
   link in the band, on all 14 module pages. */
.single_service_frame.QMS-inner-page .pf_sol_card ul.pf_solutions_list li::before,
.pf_solutions_band ul.pf_solutions_list li::before {
    content: none !important;
    display: none !important;
}

/* Full-width rows, not inline text: the arrow then sits on a common right
   edge down the card and the whole row is the hit target. */
.pf_solutions_band ul.pf_solutions_list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f5f8fb;
    color: #0a1425;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.pf_solutions_band ul.pf_solutions_list li a i {
    flex: 0 0 auto;
    font-size: 11px;
    color: #21738c;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.pf_solutions_band ul.pf_solutions_list li a:hover,
.pf_solutions_band ul.pf_solutions_list li a:focus-visible {
    background: rgba(33, 115, 140, .1);
    color: #21738c;
    text-decoration: none;
    transform: translateX(3px);
}

.pf_solutions_band ul.pf_solutions_list li a:hover i,
.pf_solutions_band ul.pf_solutions_list li a:focus-visible i {
    opacity: 1;
    transform: translateX(0);
}

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

@media (prefers-reduced-motion: reduce) {
    .pf_sol_card,
    .pf_solutions_band ul.pf_solutions_list li a,
    .pf_solutions_band ul.pf_solutions_list li a i { transition: none; }

    .pf_sol_card:hover { transform: none; }
    .pf_solutions_band ul.pf_solutions_list li a:hover { transform: none; }
}

/* -----------------------------------------------------------------------
 * Related modules: keep the "Explore" pills on one line
 * --------------------------------------------------------------------- */

/* The cards carry h-100 d-flex flex-column on the platform pages, so the
   pill can be pushed to the bottom of the card and every pill in a row
   lines up whatever length the blurb above it runs to. Scoped to .d-flex
   so the plain .InOutOmniBox used elsewhere is untouched. */
.InOutOmniBox.d-flex > p,
.InOutOmniBox.d-flex .InOutOmniBoxLearnMore {
    align-self: center;
}

.InOutOmniBox.d-flex .InOutOmniBoxLearnMore {
    margin-top: auto;
}

/* -----------------------------------------------------------------------
 * Capability cards: hold the line length to a readable measure
 * --------------------------------------------------------------------- */

/* Full-width capability cards were setting body copy across the whole
   1140px container - 105 to 148 characters a line. The child combinator
   keeps this off the two-column split layout, whose copy is nested inside
   .voice-ai-cap-text and already measures around 430px. */
.single_service_box_inner_one > p,
.single_service_box_inner_one > ul,
.single_service_box_inner_one > .voice-ai-tabs,
.single_service_box_inner_one > .voice-ai-chips,
.single_service_box_inner_one > .voice-ai-callout {
    max-width: 75ch;
}