/* Pricing page design layer.
 *
 * The presentation layer for /pricing/saas-pricing, whose markup lives in
 * webpages.page_html and is rendered by ContentPage's /{*Slug} catch-all — see
 * docs/saas-pricing-cms.sql. There is no SaasPricingPage.razor any more: every
 * word on that page is edited at Admin -> Pages -> Web Pages, and this sheet is
 * the only part of it that is code. Restyle here; do not pull content back out
 * of the database to do it.
 *
 * Global CSS, linked from App.razor — it was Blazor-scoped until the stylesheets
 * were consolidated under wwwroot/css. The same two rules pages/home.css calls
 * out apply:
 *
 * 1. Nothing confines these rules to this page any more, so every selector is
 *    qp- prefixed or a descendant of one.
 * 2. @keyframes names are global too. Hence the qp- prefix on
 *    every one, so they cannot collide with the compiled Tailwind bundle or with
 *    Home's qh- animations.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. Keep every selector class-based and
 * prefixed — a bare element selector here would leak the same way the deleted
 * css/site.css did.
 *
 * Two families, both taken from the logo, which is a single ramp running
 * #a22dea (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue):
 *
 *   brand  — magenta-led, the full logo ramp. Reserved for the free plan and
 *            its call to action, so a visitor scanning for "what is free" has
 *            one colour to follow.
 *   indigo — #4f46e5 → #7c3aed, the site's existing primary. Everything else.
 *
 * Magenta-led vs indigo-led is the whole distinction; nothing on this page uses
 * a hue from outside that ramp. Two surfaces are dark — the hero and the
 * Professional card — and both are the same deep end of that ramp, not a
 * neutral black.
 */

/* ── page shell ─────────────────────────────────────────────────────── */

/* ContentPage wraps every stored page in
   `<div class="max-w-none" style="color:#1a1a1a;line-height:1.8">`. That inline
   line-height is not decorative — the prose pages depend on it — but an inline
   style on an ancestor cannot be overridden by a rule on a descendant, and 1.8
   is far too loose here: the pills, badges, ribbons, buttons and card headings
   below deliberately set no line-height of their own, so they would all inherit
   it and grow. Re-declaring both properties on the wrapper this page's markup
   opens with stops them at the boundary — everything inside inherits from
   .qp-page, not from ContentPage's div.

   The values are the site's own defaults, restored: line-height 1.5 from the
   Tailwind bundle's `:host, html` reset and --foreground from :root, which is
   what this page inherited when it was a routed component sitting straight
   under <main>. Do not remove them, and keep the wrapper in page_html. */
.qp-page {
    color: var(--foreground);
    line-height: 1.5;
}

/* ── shared: buttons ────────────────────────────────────────────────── */
.qp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s, color .2s, border-color .25s;
}

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

.qp-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.qp-btn--solid {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 18px 38px -18px rgba(79, 70, 229, .9);
}

.qp-btn--solid:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
    box-shadow: 0 26px 52px -18px rgba(79, 70, 229, 1);
}

/* The logo ramp end to end — the free plan's button and nothing else. */
.qp-btn--brand {
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 18px 38px -18px rgba(140, 40, 220, .95);
}

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

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

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

/* Outsourced HR's action. Amber, not violet, so the service card's CTA reads
   as a different offer rather than a second copy of the software one. */
.qp-btn--amber {
    color: #fff;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 18px 38px -18px rgba(217, 119, 6, .95);
}

.qp-btn--amber:hover {
    background: linear-gradient(135deg, #b45309, #d97706);
    box-shadow: 0 26px 52px -18px rgba(217, 119, 6, 1);
}

/* The primary action *on the dark card* — a gradient button on a dark violet
   panel goes muddy, so the featured plan inverts instead. */
.qp-btn--light {
    color: #312e81;
    background: #fff;
    box-shadow: 0 18px 38px -18px rgba(2, 6, 23, .85);
}

.qp-btn--light:hover {
    color: #4338ca;
    background: #f5f3ff;
    box-shadow: 0 26px 52px -18px rgba(2, 6, 23, .95);
}

.qp-btn--block { width: 100%; }

/* ── shared: section heading ────────────────────────────────────────── */
.qp-head {
    max-width: 740px;
    margin: 0 auto 48px;
    text-align: center;
}

.qp-head__rule {
    width: 54px;
    height: 4px;
    margin: 0 auto 20px;
    border-radius: 99px;
    background: linear-gradient(90deg, #4f46e5, #a855f7);
}

.qp-head__title {
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.18;
    letter-spacing: -.025em;
    font-weight: 800;
    color: #0b1020;
    margin: 0;
}

.qp-head__sub {
    font-size: 15.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 14px 0 0;
}

.qp-note {
    max-width: 780px;
    margin: 30px auto 0;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.7;
    color: #64748b;
}

.qp-note a {
    color: #4f46e5;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qp-note a:hover { color: #6d28d9; }

/* ── hero ───────────────────────────────────────────────────────────── */
/* Dark surface, from the same logo ramp as everything else — it is the deep end
   of the Professional card's gradient rather than a neutral black, so the hero
   and the featured plan read as the same material. Everything inside the hero
   (title, lede, grid dots, outline button) is re-toned for it below; the
   .qp-freewrap gradient carries the dark down through the overlap and fades it
   out, so the seam stays invisible. */
.qp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0d0a24 0%, #14112f 46%, #1b1547 100%);
    padding: 76px 0 122px;
}

.qp-hero__aurora,
.qp-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qp-hero__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .72;
    animation: qp-drift 26s ease-in-out infinite;
}

/* Alphas run hotter than the light version did: these are additive glows on a
   near-black surface, where the same .28 that tinted white now barely lifts. */
.qp-hero__aurora i:nth-child(1) {
    width: 720px;
    height: 720px;
    top: -400px;
    right: -200px;
    background: radial-gradient(circle, rgba(129, 140, 248, .46), transparent 62%);
}

.qp-hero__aurora i:nth-child(2) {
    width: 560px;
    height: 560px;
    bottom: -300px;
    left: -200px;
    animation-delay: -9s;
    background: radial-gradient(circle, rgba(167, 139, 250, .40), transparent 62%);
}

.qp-hero__aurora i:nth-child(3) {
    width: 440px;
    height: 440px;
    top: 24%;
    left: 44%;
    animation-delay: -16s;
    background: radial-gradient(circle, rgba(192, 77, 240, .30), transparent 62%);
}

@keyframes qp-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-46px, 38px) scale(1.08); }
    66%      { transform: translate(38px, -28px) scale(.94); }
}

/* Indigo dots vanished against the dark surface — the grid now draws in light
   violet and is dialled back with opacity instead. */
.qp-hero__grid {
    opacity: .55;
    background-image: radial-gradient(circle at 1px 1px, rgba(196, 181, 253, .42) 1.1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 58% 46% at 50% 8%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 58% 46% at 50% 8%, #000, transparent 72%);
}

.qp-hero__inner {
    position: relative;
    z-index: 5;
    max-width: 830px;
    margin: 0 auto;
    text-align: center;
}

.qp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px 8px 9px;
    margin-bottom: 26px;
    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 -12px rgba(99, 102, 241, .85);
}

.qp-eyebrow__pip {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    animation: qp-pulse 2.8s ease-in-out infinite;
}

.qp-eyebrow__pip svg { width: 12px; height: 12px; }

@keyframes qp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .38); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

.qp-hero__title {
    font-size: clamp(32px, 4.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
}

/* Same ramp as the light version, lifted to the tints the featured card already
   uses — #4f46e5 as a gradient stop is barely lighter than the surface now. */
.qp-accent {
    background: linear-gradient(96deg, #a5b4fc 0%, #d8b4fe 46%, #f9a8d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qp-hero__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.65;
    color: #a9b0d0;
    max-width: 640px;
    margin: 0 auto;
}

.qp-hero__lede strong {
    font-weight: 650;
    color: #e6e8f6;
}

.qp-hero__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 34px;
}

/* The default outline button is a white card on a light page. Left alone on the
   dark hero it becomes a second solid button competing with "Create free
   account", so inside the hero only it drops to glass. Same reasoning as
   .qp-btn--light on the featured card, in the other direction. */
.qp-hero .qp-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);
}

.qp-hero .qp-btn--outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(196, 181, 253, .72);
    box-shadow: 0 18px 34px -20px rgba(124, 58, 237, .8);
}

/* ── free-forever spotlight ─────────────────────────────────────────── */
/* Rides up over the hero's lower edge, so the offer reads as part of the
   banner rather than as the first of five equal sections. The wrapper starts on
   the hero's end colour so the overlap is seamless, then ramps back to white —
   that ramp is the only place the dark hero meets the light page, and it needs
   the intermediate stops or a straight #1b1547 → #fff fade bands visibly. */
.qp-freewrap {
    position: relative;
    z-index: 6;
    margin-top: -78px;
    padding-bottom: 78px;
    background: linear-gradient(180deg, #1b1547 0%, #1b1547 18%, #4b3f8f 34%, #d7d0f3 56%, #fff 82%);
}

/* A gradient hairline rather than a flat border: the page around it is already
   faintly violet, so a 1px solid line in the same family would disappear. Same
   padding trick the home hero uses for its console frame. */
.qp-free {
    position: relative;
    padding: 1.5px;
    border-radius: 29px;
    background: linear-gradient(120deg, #a22dea, #7b5ee5 46%, #5b5de2);
    box-shadow: 0 46px 100px -50px rgba(109, 40, 217, .6), 0 12px 30px -20px rgba(15, 23, 42, .3);
}

.qp-free__in {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 38px;
    align-items: center;
    padding: 38px 42px;
    border-radius: 27.5px;
    background: linear-gradient(122deg, #fff 0%, #fdfbff 46%, #f8f3ff 100%);
}

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

.qp-free__copy {
    position: relative;
    min-width: 0;
}

.qp-free__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    margin-bottom: 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #a22dea, #7b5ee5 52%, #5b5de2);
    box-shadow: 0 12px 26px -14px rgba(140, 40, 220, .9);
}

.qp-free__badge svg { width: 13px; height: 13px; }

.qp-free__title {
    font-size: clamp(22px, 2.3vw, 30px);
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 800;
    color: #0b1020;
    margin: 0 0 14px;
}

.qp-free__title strong { font-weight: 800; }

.qp-free__copy p {
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    max-width: 620px;
    margin: 0 0 22px;
}

.qp-free__copy p strong {
    font-weight: 650;
    color: #0f172a;
}

.qp-free__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 560px;
}

.qp-point {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

.qp-point__ic {
    width: 24px;
    height: 24px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #6d5ce4);
    box-shadow: 0 6px 14px -6px rgba(140, 40, 220, .8);
}

.qp-point__ic svg { width: 13px; height: 13px; }

/* The action plate. Everything the visitor has to do next lives in one white
   panel so it survives the copy on the left growing. */
.qp-plate {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 22px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #efe6fb;
    box-shadow: 0 26px 56px -34px rgba(88, 28, 135, .5);
}

.qp-plate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, #a22dea, #5b5de2);
}

.qp-plate__fine {
    font-size: 12px;
    text-align: center;
    color: #94a3b8;
    margin: 2px 0 0;
}

/* ── plan cards ─────────────────────────────────────────────────────── */
.qp-plans {
    position: relative;
    padding: 22px 0 92px;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
}

.qp-plans__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    padding-top: 22px;
}

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

.qp-card:hover {
    transform: translateY(-6px);
    border-color: #d8d5f6;
    box-shadow: 0 36px 72px -34px rgba(79, 70, 229, .45);
}

.qp-card--featured {
    color: #e6e8f6;
    background: linear-gradient(165deg, #1c1745 0%, #141230 54%, #1b1349 100%);
    border-color: rgba(167, 139, 250, .34);
    transform: translateY(-18px);
    box-shadow: 0 56px 116px -42px rgba(79, 70, 229, .78), 0 12px 32px -20px rgba(15, 23, 42, .55);
}

.qp-card--featured:hover {
    transform: translateY(-24px);
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 66px 130px -42px rgba(79, 70, 229, .9), 0 12px 32px -20px rgba(15, 23, 42, .6);
}

/* Outsourced HR is a service, not a plan — amber keeps it from reading as a
   fourth shade of the violet ramp the two software plans share. */
.qp-card--premium {
    background: linear-gradient(178deg, #fffdf8 0%, #fff 46%);
    border-color: rgba(217, 119, 6, .38);
    box-shadow: 0 24px 52px -34px rgba(180, 83, 9, .5);
}

.qp-card--premium:hover {
    border-color: rgba(217, 119, 6, .6);
    box-shadow: 0 36px 72px -34px rgba(217, 119, 6, .5);
}

.qp-ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #4f46e5, #7c3aed 55%, #a855f7);
    box-shadow: 0 14px 30px -12px rgba(99, 102, 241, .95);
}

.qp-ribbon--premium {
    background: linear-gradient(100deg, #b45309, #d97706 55%, #f59e0b);
    box-shadow: 0 14px 30px -12px rgba(217, 119, 6, .95);
}

.qp-ribbon svg { width: 12px; height: 12px; }

.qp-ribbon--premium svg { width: 10px; height: 10px; }

.qp-card__name {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.015em;
    color: #0b1020;
    margin: 0 0 8px;
}

.qp-card--featured .qp-card__name { color: #fff; }

.qp-card__price {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #4f46e5;
    margin: 0 0 12px;
}

.qp-card--featured .qp-card__price {
    background: linear-gradient(96deg, #a5b4fc, #d8b4fe 52%, #f9a8d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qp-card--premium .qp-card__price { color: #b45309; }

/* The two quoted plans lead with what they are, not with a price — this is the
   price line demoted to a subtitle underneath. */
.qp-card__quote {
    font-size: 12.5px;
    font-weight: 650;
    color: #94a3b8;
    margin: -4px 0 14px;
}

.qp-card--featured .qp-card__quote { color: #8b93bd; }

.qp-card__sum {
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0 0 22px;
}

.qp-card--featured .qp-card__sum { color: #a9b0d0; }

.qp-card__div {
    height: 1px;
    margin: 0 0 20px;
    background: linear-gradient(90deg, #e9e7f7, rgba(233, 231, 247, 0));
}

.qp-card--featured .qp-card__div {
    background: linear-gradient(90deg, rgba(167, 139, 250, .34), rgba(167, 139, 250, 0));
}

.qp-card__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 14px;
}

.qp-card--featured .qp-card__label { color: #8b93bd; }

.qp-list {
    display: grid;
    gap: 11px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

/* Kept for any card that ever needs a two-up list. The three plan cards all run
   one column now: the QHRM card's eighteen modules are what makes it as tall as
   the fourteen services beside it, and splitting them halves that height. */
.qp-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 20px; }

.qp-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #475569;
}

/* Outsourced HR lists a service plus what it covers. The two sit in their own
   columns so the eye can run down the service names without the descriptions
   pushing them out of line. */
.qp-list--svc li {
    display: grid;
    grid-template-columns: 17px minmax(0, .92fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 4px 10px;
}

.qp-list--svc li strong {
    font-weight: 700;
    color: #0b1020;
}

.qp-list--svc li span:last-child { color: #64748b; }

.qp-card--featured .qp-list li { color: #ccd1e8; }

.qp-list li svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #7c3aed;
}

.qp-card--featured .qp-list li svg { color: #a5b4fc; }
.qp-card--premium .qp-list li svg { color: #d97706; }

.qp-card__foot { margin-top: auto; }

.qp-card__fine {
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    color: #94a3b8;
    margin: 12px 0 0;
}

.qp-card__fine a {
    color: #4f46e5;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qp-card--premium .qp-card__fine a { color: #b45309; }

.qp-card--featured .qp-card__fine { color: #8b93bd; }
.qp-card--featured .qp-card__fine a { color: #c4b5fd; }

/* ── module grid ────────────────────────────────────────────────────── */
.qp-modules {
    padding: 86px 0;
    background: linear-gradient(180deg, #fbfaff 0%, #fff 42%, #f7f6ff 100%);
    border-top: 1px solid #eeecf9;
    border-bottom: 1px solid #eeecf9;
}

.qp-mgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.qp-mod {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 18px 23px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 12px 26px -24px rgba(15, 23, 42, .55);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

/* The rail is the only thing carrying the plan colour at a glance — the pill
   spells it out for anyone who needs the word. */
.qp-mod::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.qp-mod--free::before         { background: linear-gradient(180deg, #c04df0, #a22dea); }
.qp-mod--qhrm::before         { background: linear-gradient(180deg, #818cf8, #4f46e5); }

.qp-mod:hover {
    transform: translateY(-4px);
    border-color: #d9d6f6;
    box-shadow: 0 26px 48px -30px rgba(79, 70, 229, .55);
}

.qp-mod__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.qp-mod__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0b1020;
    transition: color .2s;
}

a.qp-mod__name:hover { color: #4f46e5; }

.qp-mod__arrow {
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s, transform .25s;
}

.qp-mod:hover .qp-mod__arrow {
    opacity: 1;
    transform: none;
}

.qp-mod__blurb {
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

.qp-pill {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.qp-pill--free {
    color: #8b1fd0;
    background: #faf1ff;
    border: 1px solid rgba(162, 45, 234, .28);
}

.qp-pill--qhrm {
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid rgba(99, 102, 241, .26);
}

/* ── what's included ────────────────────────────────────────────────── */
.qp-inc { padding: 86px 0; }

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

.qp-inccard {
    padding: 30px 28px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 18px 40px -32px rgba(15, 23, 42, .45);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.qp-inccard:hover {
    transform: translateY(-5px);
    border-color: #d9d6f6;
    box-shadow: 0 32px 62px -34px rgba(79, 70, 229, .45);
}

.qp-inccard__ic {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(99, 102, 241, .95);
}

/* Three gradients cycling across the grid, so six identical tiles do not read
   as one block of indigo. All three are points on the logo ramp — indigo end,
   magenta end, and the full sweep. */
.qp-inccard:nth-child(3n+2) .qp-inccard__ic {
    background: linear-gradient(135deg, #7c3aed, #d946ef);
    box-shadow: 0 14px 28px -14px rgba(168, 85, 247, .95);
}

.qp-inccard:nth-child(3n+3) .qp-inccard__ic {
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 14px 28px -14px rgba(140, 40, 220, .9);
}

.qp-inccard__ic svg { width: 23px; height: 23px; }

.qp-inccard h3 {
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -.015em;
    color: #0b1020;
    margin: 0 0 8px;
}

.qp-inccard p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* ── how it works ───────────────────────────────────────────────────── */
.qp-steps {
    padding: 86px 0 94px;
    background: linear-gradient(180deg, #fff 0%, #faf9ff 100%);
    border-top: 1px solid #eeecf9;
}

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

.qp-step {
    position: relative;
    padding: 28px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 18px 40px -32px rgba(15, 23, 42, .45);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.qp-step:hover {
    transform: translateY(-5px);
    border-color: #d9d6f6;
    box-shadow: 0 32px 62px -34px rgba(79, 70, 229, .45);
}

/* Connector between the numbered nodes; sits in the gutter, aligned with the
   centre of the badge above it. */
.qp-step::after {
    content: "";
    position: absolute;
    top: 50px;
    right: -20px;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #c7d2fe, #e9d5ff);
}

.qp-step:last-child::after { display: none; }

.qp-step__n {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(99, 102, 241, .95);
}

.qp-step h3 {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.015em;
    color: #0b1020;
    margin: 0 0 8px;
}

.qp-step p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

.qp-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 48px;
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .qp-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The lift only means anything when the three sit side by side. */
    .qp-card--featured { transform: none; }
    .qp-card--featured:hover { transform: translateY(-6px); }

    .qp-mgrid,
    .qp-incgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .qp-stepgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qp-step::after { display: none; }
}

@media (max-width: 900px) {
    .qp-free__in {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 32px 28px;
    }
}

@media (max-width: 760px) {
    .qp-hero { padding: 56px 0 104px; }
    .qp-hero__actions { gap: 12px; }
    .qp-btn { width: 100%; }

    .qp-freewrap { margin-top: -64px; padding-bottom: 56px; }
    .qp-free__points { grid-template-columns: minmax(0, 1fr); }

    .qp-plans { padding: 14px 0 66px; }
    .qp-plans__grid,
    .qp-mgrid,
    .qp-incgrid,
    .qp-stepgrid { grid-template-columns: minmax(0, 1fr); }
    .qp-list--two { grid-template-columns: minmax(0, 1fr); }

    .qp-modules,
    .qp-inc { padding: 62px 0; }
    .qp-steps { padding: 62px 0 70px; }

    .qp-head { margin-bottom: 34px; }
    .qp-card { padding: 30px 24px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .qp-hero__aurora i,
    .qp-eyebrow__pip { animation: none !important; }

    .qp-btn,
    .qp-card,
    .qp-mod,
    .qp-inccard,
    .qp-step {
        transition: none;
    }

    .qp-btn:hover,
    .qp-card:hover,
    .qp-card--featured:hover,
    .qp-mod:hover,
    .qp-inccard:hover,
    .qp-step:hover {
        transform: none;
    }

    .qp-card--featured { transform: none; }
    .qp-mod__arrow { opacity: 1; transform: none; }
}