/* Managed payroll services page design layer.
 *
 * The presentation layer for Components/Pages/PayrollServicesPage.razor. Global
 * CSS, linked from App.razor, so the same two rules pages/home.css,
 * pages/saas-pricing.css and pages/free-hr-software.css call out apply here:
 *
 * 1. Nothing confines these rules to this page, so every selector is qps-
 *    prefixed or a descendant of one. No bare element selectors.
 * 2. @keyframes names are global too, hence the prefix on those as well — they
 *    must not collide with the compiled Tailwind bundle or with the qh-, qp-
 *    and qfh- animations the other page sheets declare.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. That is also why the markup this dresses
 * could drop its utility classes entirely: the page is styled from here.
 *
 * PALETTE. The same logo ramp the pricing and free-HR pages use — #a22dea
 * (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue). Two surfaces are dark,
 * the hero and the closing call to action, and both sit at the deep end of that
 * ramp rather than on a neutral black, so the page opens and closes on the same
 * material.
 *
 * Two hues come from outside the ramp and each has exactly one job:
 *
 *   emerald — "this is free" / "this is included". The hero offer ticks, the
 *             free-months figure on the shorter plan, the QHRM column in the
 *             responsibility tables and the not-charged list. Nothing else.
 *   amber   — the exit clause, and only the exit clause. It is the one block on
 *             the page that tells the buyer they can leave, and it is the most
 *             persuasive thing here, so it is the one thing that never shares a
 *             colour with anything else.
 *
 * CONTENT NOTE. Every figure, commitment length and cancellation point in the
 * markup is a commercial term the sales team quotes in written proposals, and
 * tests/Qhrm.Web.Tests/PayrollServicesTests.cs asserts them verbatim. Restyle
 * freely; do not reword, reorder or drop a heading.
 */

/* ── shared: layout rhythm ──────────────────────────────────────────── */

.qps-sec {
    position: relative;
    padding: 74px 0 80px;
}

/* The alternating surface. Used for the offers, the responsibility tables and
   the price — the three sections a buyer scrolls back to — so the page has a
   rhythm they can navigate by rather than one unbroken sheet of white. */
.qps-sec--tint {
    background:
        radial-gradient(ellipse 70% 50% at 10% 0%, rgba(162, 45, 234, .055), transparent 60%),
        radial-gradient(ellipse 60% 50% at 92% 26%, rgba(91, 93, 226, .07), transparent 60%),
        linear-gradient(180deg, #fbfaff 0%, #fff 42%, #faf9ff 100%);
    border-top: 1px solid rgba(124, 58, 237, .1);
    border-bottom: 1px solid rgba(124, 58, 237, .1);
}

/* Clears the sticky header (64px, 80px from md) when a CTA jumps to a section,
   or its first line lands underneath. */
.qps-anchor { scroll-margin-top: 96px; }

/* ── shared: section heading ────────────────────────────────────────── */

.qps-head {
    max-width: 780px;
    margin-bottom: 52px;
}

.qps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    margin-bottom: 18px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #4f46e5, #7c3aed 55%, #a855f7);
    box-shadow: 0 12px 30px -14px rgba(99, 102, 241, .85);
}

.qps-head__title {
    font-size: clamp(25px, 3vw, 37px);
    line-height: 1.16;
    letter-spacing: -.03em;
    font-weight: 800;
    color: #0b1020;
    margin: 0;
}

/* A short gradient rule under every section title. It is the one repeated mark
   that ties eleven very different sections together. */
.qps-head__title::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-top: 18px;
    border-radius: 99px;
    background: linear-gradient(90deg, #a22dea, #5b5de2);
}

.qps-head__sub {
    font-size: 16.5px;
    line-height: 1.72;
    color: #5b6478;
    margin: 18px 0 0;
}

.qps-head__sub strong { font-weight: 650; color: #241b4d; }

/* Tighter variant for the four sections whose heading is a single line with no
   eyebrow above it. */
.qps-head--tight { margin-bottom: 40px; }

/* Sub-heading inside a section, e.g. "Side by side". */
.qps-subhead {
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.25;
    letter-spacing: -.025em;
    font-weight: 750;
    color: #0b1020;
    margin: 66px 0 22px;
}

/* ── shared: buttons ────────────────────────────────────────────────── */
/* .startFreeTrial and .bookADemo come from the compiled Tailwind bundle and are
   the site-wide CTA pair, so they are re-skinned here rather than replaced —
   every other page still renders the bundle's version of them. */

.qps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 27px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s, color .2s, border-color .25s;
}

.qps-btn:hover { transform: translateY(-2px); }

.qps-btn--brand {
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 18px 38px -18px rgba(140, 40, 220, .95);
}

.qps-btn--brand:hover {
    color: #fff;
    background: linear-gradient(135deg, #8f1fd6, #4a4cd4);
    box-shadow: 0 26px 52px -18px rgba(140, 40, 220, 1);
}

.qps-btn--outline {
    color: #1e293b;
    background: #fff;
    border-color: #e4e2f3;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .55);
}

.qps-btn--outline:hover {
    color: #4f46e5;
    border-color: #c7d2fe;
    box-shadow: 0 18px 34px -20px rgba(79, 70, 229, .6);
}

/* On the two dark surfaces a white card button becomes a second solid button
   competing with the brand one, so it drops to glass instead. */
.qps-dark .qps-btn--outline {
    color: #e9e7fb;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(167, 139, 250, .42);
    box-shadow: 0 10px 26px -18px rgba(2, 6, 23, .9);
}

.qps-dark .qps-btn--outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(196, 181, 253, .72);
}

.qps-btn--wide { width: 100%; }

.qps-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* ── shared: inline link ────────────────────────────────────────────── */

.qps-link {
    font-weight: 650;
    color: #6d28d9;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(109, 40, 217, .38);
    transition: color .2s, text-decoration-color .2s;
}

.qps-link:hover {
    color: #a22dea;
    text-decoration-color: currentColor;
}

.qps-note {
    font-size: 14px;
    line-height: 1.72;
    color: #667085;
    margin: 22px 0 0;
    max-width: 78ch;
}

.qps-note--fine {
    font-size: 12.5px;
    color: #8b93a7;
}

/* ── hero ───────────────────────────────────────────────────────────── */
/* Deep end of the logo ramp, matching the campaign pages so the site reads as
   one surface. Copy left, enquiry form right — the offer and the way to claim
   it share the fold, which is the whole point of this layout. */

.qps-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 66px;
    background: linear-gradient(180deg, #0d0a24 0%, #14112f 46%, #1b1547 100%);
}

.qps-aurora,
.qps-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qps-aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .7;
    animation: qps-drift 28s ease-in-out infinite;
}

/* Additive glows on a near-black surface — the alphas run hot because the same
   values that tint white barely lift here. */
.qps-aurora i:nth-child(1) {
    width: 700px;
    height: 700px;
    top: -380px;
    right: -160px;
    background: radial-gradient(circle, rgba(129, 140, 248, .44), transparent 62%);
}

.qps-aurora i:nth-child(2) {
    width: 560px;
    height: 560px;
    bottom: -320px;
    left: -200px;
    animation-delay: -10s;
    background: radial-gradient(circle, rgba(167, 139, 250, .38), transparent 62%);
}

.qps-aurora i:nth-child(3) {
    width: 420px;
    height: 420px;
    top: 30%;
    left: 42%;
    animation-delay: -18s;
    background: radial-gradient(circle, rgba(192, 77, 240, .26), transparent 62%);
}

@keyframes qps-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-44px, 36px) scale(1.08); }
    66%      { transform: translate(36px, -26px) scale(.94); }
}

.qps-mesh {
    opacity: .45;
    background-image: radial-gradient(circle at 1px 1px, rgba(196, 181, 253, .4) 1.1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 62% 50% at 40% 4%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 62% 50% at 40% 4%, #000, transparent 72%);
}

.qps-hero__grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: start;
    gap: 48px;
}

.qps-hero__copy { min-width: 0; }

/* No .qps-crumbs rules: the hero prints no breadcrumb trail. The markup was
   removed on instruction and stays removed, so the styles went with it rather
   than sitting here waiting for a trail that is not coming back. */

/* ── hero: copy ─────────────────────────────────────────────────────── */

.qps-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 9px;
    margin-bottom: 22px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ede9ff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(167, 139, 250, .38);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.qps-badge__dot {
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 99px;
    flex: 0 0 auto;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
    animation: qps-blink 2.4s ease-in-out infinite;
}

@keyframes qps-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
    50%      { opacity: .55; box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

.qps-hero__title {
    font-size: clamp(31px, 3.9vw, 50px);
    line-height: 1.07;
    letter-spacing: -.035em;
    font-weight: 800;
    margin: 0 0 20px;
    max-width: 19ch;
    /* Near-white where the keyword sits, warming as the line wraps onto the
       offer — the H1 is one editable string and cannot be split into spans. */
    background: linear-gradient(104deg, #fff 0%, #ede9fe 40%, #d8b4fe 74%, #f9a8d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qps-hero__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.7;
    color: #a9b0d0;
    max-width: 60ch;
    margin: 0 0 26px;
}

.qps-hero__lede strong { font-weight: 650; color: #f3f0ff; }

/* ── hero: the offer terms box ──────────────────────────────────────── */
/* The exit clause, boxed, above the fold. A visitor who reads only the H1 and
   this panel has been told the whole offer. */

.qps-offerbox {
    position: relative;
    overflow: hidden;
    padding: 22px 24px 24px;
    margin-bottom: 26px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
    border: 1px solid rgba(167, 139, 250, .32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.qps-offerbox::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #34d399, #a78bfa 55%, transparent);
}

.qps-offerbox__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin: 0 0 14px;
}

.qps-terms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qps-terms li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: #dcd9f4;
}

.qps-tick {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 99px;
    color: #052e21;
    background: #6ee7b7;
}

.qps-tick svg { width: 11px; height: 11px; }

/* ── hero: proof points ─────────────────────────────────────────────── */

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

.qps-point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px 8px 9px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #dcd9f4;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(148, 163, 233, .24);
}

/* ── hero: the enquiry card ─────────────────────────────────────────── */
/* The only form on the page. A gradient hairline rather than a flat border, so
   the white card does not read as a rectangle dropped on the dark surface. */

.qps-formcard {
    position: relative;
    min-width: 0;
    padding: 1.5px;
    border-radius: 26px;
    background: linear-gradient(150deg, rgba(162, 45, 234, .85), rgba(91, 93, 226, .6) 50%, rgba(52, 211, 153, .55));
    box-shadow: 0 50px 110px -50px rgba(2, 6, 23, .95), 0 18px 44px -30px rgba(124, 58, 237, .85);
}

.qps-formcard__in {
    padding: 26px 26px 28px;
    border-radius: 24.5px;
    background: linear-gradient(160deg, #fff 0%, #fdfbff 55%, #f8f4ff 100%);
}

.qps-formcard__title {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.02em;
    font-weight: 750;
    color: #0b1020;
    margin: 0 0 8px;
}

.qps-formcard__sub {
    font-size: 14px;
    line-height: 1.62;
    color: #667085;
    margin: 0 0 20px;
}

/* ── savings tiles ──────────────────────────────────────────────────── */
/* What the offer is worth in money, at four headcounts. The figure is the whole
   point of the card, so everything else on it is deliberately quiet. */

.qps-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.qps-tile {
    position: relative;
    overflow: hidden;
    padding: 26px 24px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .5);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.qps-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, #a22dea, #5b5de2);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}

.qps-tile:hover {
    transform: translateY(-4px);
    border-color: #ddd8f7;
    box-shadow: 0 28px 52px -32px rgba(79, 70, 229, .6);
}

.qps-tile:hover::before { transform: scaleX(1); }

.qps-tile__head {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b93a7;
    margin: 0 0 12px;
}

.qps-tile__value {
    font-size: clamp(26px, 2.6vw, 33px);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 800;
    margin: 0 0 6px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #a22dea, #5b5de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qps-tile__caption {
    font-size: 13.5px;
    color: #667085;
    margin: 0;
}

/* ── plan cards ─────────────────────────────────────────────────────── */

.qps-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.qps-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 30px 32px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #eceaf7;
    box-shadow: 0 18px 44px -32px rgba(15, 23, 42, .5);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}

.qps-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 34px 70px -40px rgba(79, 70, 229, .55);
}

/* The recommended plan carries the logo ramp as its edge. Painted with two
   backgrounds rather than a border colour so the gradient survives the radius. */
.qps-plan--hot {
    border: 1.5px solid transparent;
    background:
        linear-gradient(160deg, #fff 0%, #fdfbff 60%, #f8f4ff 100%) padding-box,
        linear-gradient(140deg, #a22dea, #7b5ee5 50%, #5b5de2) border-box;
    box-shadow: 0 34px 76px -40px rgba(109, 40, 217, .6), 0 12px 30px -22px rgba(15, 23, 42, .3);
}

.qps-plan--hot:hover {
    box-shadow: 0 46px 96px -44px rgba(109, 40, 217, .7);
}

.qps-plan__badge {
    position: absolute;
    top: -13px;
    left: 28px;
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.qps-plan__badge--hot {
    background: linear-gradient(120deg, #a22dea, #5b5de2);
    box-shadow: 0 12px 26px -12px rgba(140, 40, 220, .95);
}

.qps-plan__badge--calm {
    background: linear-gradient(120deg, #10b981, #059669);
    box-shadow: 0 12px 26px -12px rgba(5, 150, 105, .9);
}

.qps-plan__name {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.02em;
    font-weight: 750;
    color: #0b1020;
    margin: 6px 0 20px;
}

/* The free figure. Boxed rather than run into the prose because it is the first
   thing a buyer scans for. */
.qps-plan__figure {
    position: relative;
    overflow: hidden;
    padding: 22px 24px 24px;
    margin-bottom: 22px;
    border-radius: 18px;
}

.qps-plan__figure--hot {
    background: linear-gradient(135deg, #f5edff, #eceaff 60%, #e8e9ff);
    border: 1px solid rgba(124, 58, 237, .22);
}

.qps-plan__figure--calm {
    background: linear-gradient(135deg, #ecfdf5, #e6fbf2 60%, #e3f7ef);
    border: 1px solid rgba(16, 185, 129, .3);
}

.qps-plan__amount {
    display: block;
    font-size: clamp(27px, 2.8vw, 34px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    margin-bottom: 6px;
}

.qps-plan__figure--hot .qps-plan__amount {
    background: linear-gradient(120deg, #a22dea, #5b5de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qps-plan__figure--calm .qps-plan__amount { color: #047857; }

.qps-plan__amount-sub {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748b;
}

.qps-plan__summary {
    font-size: 14.8px;
    line-height: 1.72;
    color: #5b6478;
    margin: 0 0 22px;
}

/* The exit clause. Its own block, above the terms rather than inside them:
   listed as a fifth bullet it reads as small print, pulled out like this it
   reads as the offer — which is what it is. Amber is used here and nowhere
   else on the page. */
.qps-exit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 20px 19px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fffbeb, #fef6e0);
    border: 1px solid rgba(217, 119, 6, .28);
}

.qps-exit__ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 10px 20px -12px rgba(217, 119, 6, .95);
}

.qps-exit__ic svg { width: 16px; height: 16px; }

.qps-exit__title {
    display: block;
    font-size: 14.5px;
    line-height: 1.4;
    font-weight: 750;
    color: #78350f;
    margin-bottom: 5px;
}

.qps-exit__body {
    display: block;
    font-size: 13.8px;
    line-height: 1.68;
    color: #92400e;
}

.qps-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #a5a0c9;
    margin: 0 0 14px;
}

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

.qps-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.2px;
    line-height: 1.6;
    color: #48506a;
    padding: 9px 0;
    border-top: 1px solid #f1eff9;
}

.qps-list li:first-child { border-top: 0; padding-top: 0; }

.qps-check {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 99px;
    color: #fff;
}

.qps-check svg { width: 12px; height: 12px; }

.qps-check--hot { background: linear-gradient(135deg, #a22dea, #5b5de2); }

.qps-check--calm { background: linear-gradient(135deg, #34d399, #059669); }

.qps-plan__foot { margin-top: auto; }

/* ── risk answers ───────────────────────────────────────────────────── */
/* The three objections that stop a buyer signing, on one row at the moment the
   decision is made. Deliberately plainer than the plan cards — they answer
   doubt, so nothing on them should read as a sales device. */

.qps-risks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}

.qps-risk {
    position: relative;
    padding: 26px 26px 28px 30px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eceaf7;
    box-shadow: 0 12px 32px -26px rgba(15, 23, 42, .5);
}

/* A gradient spine instead of an icon: three cards each carrying a badge would
   compete with the plan cards directly above them. */
.qps-risk::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    bottom: 26px;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: linear-gradient(180deg, #a22dea, #5b5de2);
}

.qps-risk__title {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -.015em;
    font-weight: 750;
    color: #0b1020;
    margin: 0 0 9px;
}

.qps-risk__body {
    font-size: 14px;
    line-height: 1.72;
    color: #667085;
    margin: 0;
}

/* ── tables ─────────────────────────────────────────────────────────── */
/* Narrow screens scroll the wrapper horizontally rather than squeezing columns
   of prose into 375px. The min-width stays inline in the markup. */

.qps-tablewrap {
    overflow-x: auto;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eceaf7;
    box-shadow: 0 14px 36px -28px rgba(15, 23, 42, .5);
    -webkit-overflow-scrolling: touch;
}

.qps-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.qps-table thead tr {
    background: linear-gradient(180deg, #faf9ff, #f5f3fd);
}

.qps-table th,
.qps-table td {
    text-align: left;
    vertical-align: top;
    padding: 14px 20px;
}

.qps-table thead th {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8b93a7;
    padding-top: 15px;
    padding-bottom: 15px;
    white-space: nowrap;
}

/* The comparison table names the two plans in its header rather than labelling
   columns, so those cells are set as titles, not as column keys. */
.qps-table thead th.qps-table__plan {
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.01em;
    text-transform: none;
    color: #0b1020;
}

.qps-table thead th.qps-table__plan--hot {
    background: linear-gradient(120deg, #a22dea, #5b5de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qps-table tbody tr { border-top: 1px solid #f1eff9; }

.qps-table tbody tr:nth-child(2n) { background: #fcfbff; }

.qps-table tbody th {
    font-size: 14px;
    font-weight: 650;
    color: #131a2e;
}

.qps-table tbody td {
    font-size: 14px;
    line-height: 1.6;
    color: #5b6478;
}

.qps-table__notes { color: #8b93a7 !important; }

/* Owner marks. The tick is a filled pip rather than a bare glyph so a column
   can be read at a glance down a forty-row table; the em dash stays a plain
   character because "no owner" should recede. */
.qps-mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.qps-mark--you {
    color: #3730a3;
    background: #e5e7ff;
    border: 1px solid rgba(79, 70, 229, .22);
}

.qps-mark--qhrm {
    color: #fff;
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: 0 8px 16px -10px rgba(5, 150, 105, .9);
}

.qps-mark--none {
    color: #c9cddb;
    background: transparent;
}

/* ── responsibility groups ──────────────────────────────────────────── */

.qps-groups {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.qps-group__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.qps-group__no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: #5b21b6;
    background: linear-gradient(135deg, #f3e8ff, #e0e7ff);
}

.qps-group__title {
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 750;
    color: #0b1020;
    margin: 0;
}

/* ── feature / reason cards ─────────────────────────────────────────── */

.qps-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.qps-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 30px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 12px 32px -26px rgba(15, 23, 42, .5);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.qps-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, #a22dea, #5b5de2);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}

.qps-card:hover {
    transform: translateY(-4px);
    border-color: #ddd8f7;
    box-shadow: 0 28px 54px -34px rgba(79, 70, 229, .6);
}

.qps-card:hover::before { transform: scaleX(1); }

.qps-card__ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 14px;
    color: #5b21b6;
    background: linear-gradient(135deg, #f3e8ff, #e0e7ff);
    transition: color .28s, background .28s, box-shadow .28s;
}

.qps-card__ic svg { width: 21px; height: 21px; }

.qps-card:hover .qps-card__ic {
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 14px 28px -14px rgba(140, 40, 220, .95);
}

.qps-card__title {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -.015em;
    font-weight: 750;
    color: #131a2e;
    margin: 0 0 9px;
}

.qps-card__body {
    font-size: 14px;
    line-height: 1.72;
    color: #667085;
    margin: 0;
}

/* ── the price ──────────────────────────────────────────────────────── */
/* One figure, and a list of what is NOT charged doing more work than the figure
   itself. Every line in that list is a fee this page used to carry. */

.qps-price {
    padding: 1.5px;
    border-radius: 28px;
    margin-bottom: 26px;
    background: linear-gradient(135deg, #a22dea, #7b5ee5 50%, #5b5de2);
    box-shadow: 0 44px 96px -52px rgba(109, 40, 217, .65), 0 14px 34px -24px rgba(15, 23, 42, .3);
}

.qps-price__in {
    position: relative;
    overflow: hidden;
    padding: 40px 42px 44px;
    border-radius: 26.5px;
    background: linear-gradient(150deg, #fff 0%, #fdfbff 52%, #f8f4ff 100%);
}

.qps-price__in::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    top: -300px;
    right: -150px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .13), transparent 64%);
}

.qps-price__fig {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
}

.qps-price__amount {
    font-size: clamp(44px, 5.4vw, 66px);
    line-height: .95;
    letter-spacing: -.045em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #a22dea, #5b5de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qps-price__unit {
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 650;
    color: #241b4d;
}

.qps-price__body {
    position: relative;
    font-size: 15.5px;
    line-height: 1.75;
    color: #5b6478;
    margin: 0 0 30px;
    max-width: 72ch;
}

.qps-price__rule {
    position: relative;
    height: 1px;
    margin-bottom: 26px;
    background: linear-gradient(90deg, rgba(124, 58, 237, .28), rgba(124, 58, 237, .05) 60%, transparent);
}

.qps-free {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qps-free li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #48506a;
}

.qps-free__ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 99px;
    color: #fff;
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: 0 8px 16px -10px rgba(5, 150, 105, .9);
}

.qps-free__ic svg { width: 13px; height: 13px; }

/* ── the monthly cycle ──────────────────────────────────────────────── */

.qps-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.qps-step {
    position: relative;
    padding: 28px 24px 26px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 12px 32px -26px rgba(15, 23, 42, .5);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s;
}

.qps-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 54px -34px rgba(79, 70, 229, .55);
}

.qps-step__no {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 14px 26px -14px rgba(140, 40, 220, .9);
}

.qps-step__title {
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 750;
    color: #131a2e;
    margin: 0 0 9px;
}

.qps-step__body {
    font-size: 13.8px;
    line-height: 1.7;
    color: #667085;
    margin: 0 0 14px;
}

.qps-step__when {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #5b21b6;
    background: linear-gradient(135deg, #f3e8ff, #e0e7ff);
    margin: 0;
}

/* ── industries ─────────────────────────────────────────────────────── */

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

.qps-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #48506a;
    background: #fff;
    border: 1px solid #e6e3f5;
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, .6);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), color .22s, border-color .22s, box-shadow .22s;
}

.qps-pill:hover {
    transform: translateY(-2px);
    color: #6d28d9;
    border-color: #d8cffa;
    box-shadow: 0 16px 30px -20px rgba(109, 40, 217, .7);
}

/* ── faq ────────────────────────────────────────────────────────────── */
/* Answers stay open. An accordion would hide them from the first paint, and the
   FAQPage structured data on this page is generated from exactly these
   question/answer pairs — visible text and markup have to agree. */

.qps-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.qps-faq__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 26px 28px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 12px 30px -26px rgba(15, 23, 42, .5);
    transition: border-color .28s, box-shadow .28s;
}

.qps-faq__card:hover {
    border-color: #ddd8f7;
    box-shadow: 0 22px 44px -32px rgba(79, 70, 229, .55);
}

.qps-faq__q {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #5b21b6;
    background: linear-gradient(135deg, #f3e8ff, #e0e7ff);
}

.qps-faq__question {
    font-size: 15.5px;
    line-height: 1.45;
    font-weight: 750;
    color: #131a2e;
    margin: 0 0 9px;
}

.qps-faq__answer {
    font-size: 14px;
    line-height: 1.72;
    color: #667085;
    margin: 0;
}

/* ── closing call to action ─────────────────────────────────────────── */
/* Same material as the hero, so the page closes where it opened. */

.qps-cta {
    position: relative;
    overflow: hidden;
    padding: 82px 0 88px;
    background: linear-gradient(180deg, #1b1547 0%, #14112f 54%, #0d0a24 100%);
}

.qps-cta__in {
    position: relative;
    z-index: 5;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.qps-cta__title {
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.032em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 18px;
}

.qps-cta__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.7;
    color: #a9b0d0;
    margin: 0 0 32px;
}

.qps-cta .qps-actions { justify-content: center; }

.qps-cta__mail {
    font-size: 14px;
    color: #a9b0d0;
    margin: 30px 0 0;
}

.qps-cta__mail a {
    font-weight: 650;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1120px) {
    .qps-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .qps-hero__title { max-width: none; }
    .qps-formcard { max-width: 640px; }
    .qps-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qps-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qps-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qps-risks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .qps-plans { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .qps-faq { grid-template-columns: minmax(0, 1fr); }
    .qps-price__in { padding: 32px 28px 36px; }
    .qps-free { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .qps-sec { padding: 56px 0 60px; }
    .qps-hero { padding: 40px 0 52px; }
    .qps-cta { padding: 62px 0 68px; }

    .qps-head { margin-bottom: 36px; }
    .qps-subhead { margin-top: 48px; }

    .qps-terms { grid-template-columns: minmax(0, 1fr); }
    .qps-tiles { grid-template-columns: minmax(0, 1fr); }
    .qps-grid3 { grid-template-columns: minmax(0, 1fr); }
    .qps-steps { grid-template-columns: minmax(0, 1fr); }

    .qps-formcard__in { padding: 22px 20px 24px; }
    .qps-plan { padding: 30px 22px 26px; }
    .qps-price__in { padding: 28px 22px 32px; }

    .qps-btn { width: 100%; }
    .qps-actions { gap: 12px; }
    .qps-actions .qps-btn { flex: 1 1 100%; }

    .qps-table th,
    .qps-table td { padding: 12px 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .qps-aurora i,
    .qps-badge__dot { animation: none !important; }

    .qps-btn,
    .qps-tile,
    .qps-tile::before,
    .qps-card,
    .qps-card::before,
    .qps-card__ic,
    .qps-step,
    .qps-plan,
    .qps-pill,
    .qps-faq__card { transition: none; }

    .qps-btn:hover,
    .qps-tile:hover,
    .qps-card:hover,
    .qps-step:hover,
    .qps-plan:hover,
    .qps-pill:hover { transform: none; }
}