/* Products page design layer — /products.
 *
 * The presentation layer for the `webpages` row whose slug is 'products'. That
 * row holds every word on the page and is rendered by ContentPage.razor's
 * /{*Slug} catch-all — there is no component for this URL and this redesign does
 * not add one. Nothing in here is content: no text, no links, no image URLs, no
 * numbers. See docs/products-redesign.sql for the markup this styles and
 * docs/products.page_html.backup.html for what it replaced.
 *
 * Global CSS, linked from App.razor, so the two rules every sibling page sheet
 * calls out apply here too:
 *
 * 1. Nothing confines these rules to this page, so every selector is qpr-
 *    prefixed or a descendant of one. No bare element selectors.
 * 2. @keyframes names are global as well, hence the prefix on those — they must
 *    not collide with the compiled Tailwind bundle or with the qh-, qab-, qp-,
 *    qct-, qco-, qcp-, qps-, qsm- 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 why the page can be styled entirely
 * from here rather than from utility classes in the CMS textarea: the bundle the
 * site serves is a prebuilt Next.js artefact, so it contains only the utilities
 * that build emitted, and a class invented in the textarea would not exist at
 * runtime. The page this replaces was authored against those utilities and was
 * already paying for it — every one of its eleven section headings carried an
 * inline `style="color: #6366F1;"` because there was no other way to colour them.
 *
 * `boxed-container` IS from the bundle and is used deliberately: it is the site's
 * own container (max-width and gutters stepping 1200 -> 1400 -> 1600px), so this
 * page's content column lines up with the header, the footer and every other
 * page. Do not replace it with a max-width of this sheet's own.
 *
 * THE TWO BUTTON PAIRS ARE NOT STYLED HERE. The hero's and the closing band's
 * are `.qh-btn` and `.qh-btn-ghost` from css/pages/home.css, which App.razor
 * links on every page — the site's primary call-to-action pair, used exactly as
 * /company/about-us and /company/contact use it. This sheet only positions them
 * and undoes the CMS wrapper's inherited line-height and underline; restyling
 * .qh-btn here would change the home page too.
 *
 * PALETTE. The logo ramp the pricing, payroll, about, CPCM, contact and site-map
 * sheets already share — #4f46e5 (indigo, primary) -> #7c3aed (violet) ->
 * #a22dea (magenta-violet), with the brand's gold #d4af37 as the one secondary.
 * Gold is not decoration here: the old markup alternated indigo and gold left
 * rails down the eight "why" cards and used gold for the three trust ticks, and
 * that pairing is kept.
 *
 * WHAT HAPPENED TO THE SHADOWS. The old page put `shadow-md` on 25 separate
 * cards — every why-card, module card, audience tile and FAQ answer — so a
 * visitor scrolling the page met the same heavy drop shadow twenty-five times
 * and nothing on the page looked more important than anything else. Here the
 * resting state of a card is a hairline border on white with a shadow so soft it
 * reads as depth rather than as a box, and the shadow only grows on hover, on
 * the cards that are actually links. Two surfaces are allowed to be dark: the
 * trust band and the closing band.
 */

/* ── page shell ─────────────────────────────────────────────────────────
 *
 * ContentPage wraps every stored page in a div carrying
 * `style="color:#1a1a1a;line-height:1.8"` inline. Every CMS page depends on that
 * pair and it would otherwise cascade into every heading, badge and card here —
 * 1.8 silently inflates anything that sets no line-height of its own. Both are
 * re-declared on .qpr-page so this page's type inherits from the page root down
 * rather than from the wrapper. Do not remove them. */
.qpr-page {
    color: #14103a;
    line-height: 1.6;
    background: #fff;
}

/* The two JSON-LD blocks are the first children of .qpr-page. They render as
 * nothing, but a stray `display` from elsewhere would give them a box. */
.qpr-page > script {
    display: none;
}

/* ── shared section furniture ───────────────────────────────────────────
 *
 * Nine sections, each with a heading. One rule rather than nine near-copies with
 * drifting sizes — which is what the page had: `text-3xl` repeated eleven times
 * with a hand-written hex colour beside it, and section spacing set by an
 * `mb-12` on some sections, `mb-16` on one, and a `py-12 md:py-16` on the hero,
 * so the gaps between sections changed down the page for no reason a reader
 * could see. */
.qpr-section {
    position: relative;
    padding: 82px 0;
}

/* The tint alternates with white so consecutive sections separate without a rule
 * between them. */
.qpr-section--tint {
    background:
        radial-gradient(760px 460px at 6% 0%, rgba(79, 70, 229, .07), transparent 62%),
        radial-gradient(700px 440px at 94% 100%, rgba(162, 45, 234, .06), transparent 60%),
        #f8f7fe;
}

.qpr-section--plain {
    background: #fff;
}

.qpr-head {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}

.qpr-head--left {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.qpr-title {
    margin: 0;
    font-size: clamp(26px, 2.9vw, 39px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.022em;
    color: #14103a;
}

/* The one heading allowed to carry the ramp: the section that opens the page's
 * argument about the platform. Using it on all nine would make none of them
 * lead. */
.qpr-title--accent {
    background: linear-gradient(100deg, #4f46e5, #7c3aed 46%, #a22dea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Inline links inside body copy. The old markup wrote
 * `text-indigo-600 hover:underline` on all eleven of them. */
.qpr-a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color .2s, opacity .2s;
}

.qpr-a:hover,
.qpr-a:focus-visible {
    color: #7c3aed;
    text-decoration: none;
}

/* ── hero ───────────────────────────────────────────────────────────────
 *
 * Copy on the left, the plan ladder on the right — the arrangement the page
 * already had. What changes is that the ladder is now a raised white card on a
 * tinted band rather than a grey box on white, so the first screen has a focal
 * point instead of two equally flat halves. */
.qpr-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 92px) 0 clamp(60px, 7vw, 96px);
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(79, 70, 229, .13), transparent 60%),
        radial-gradient(760px 520px at 88% 8%, rgba(162, 45, 234, .11), transparent 58%),
        #fbfaff;
}

/* A hairline of the ramp closing the band off from the section below it. */
.qpr-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .28) 30%, rgba(162, 45, 234, .28) 70%, transparent);
}

/* Two soft blooms, purely atmospheric, behind the content. */
.qpr-hero__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(70px);
    pointer-events: none;
}

.qpr-hero__orb--a {
    top: -120px;
    left: -80px;
    width: 380px;
    height: 380px;
    background: rgba(79, 70, 229, .18);
}

.qpr-hero__orb--b {
    right: -110px;
    bottom: -150px;
    width: 420px;
    height: 420px;
    background: rgba(162, 45, 234, .14);
}

.qpr-hero .boxed-container {
    position: relative;
    z-index: 1;
}

.qpr-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: center;
}

.qpr-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e7e4fb;
    box-shadow: 0 10px 26px -20px rgba(79, 70, 229, .55);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
    color: #4f46e5;
}

.qpr-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #4f46e5, #a22dea);
    animation: qpr-pulse 2.4s ease-in-out infinite;
}

@keyframes qpr-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .45; transform: scale(.82); }
}

.qpr-hero__title {
    margin: 20px 0 0;
    font-size: clamp(32px, 4.1vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.028em;
    color: #14103a;
}

.qpr-hero__lede {
    margin: 20px 0 0;
    max-width: 560px;
    font-size: clamp(15.5px, 1.15vw, 17.5px);
    line-height: 1.72;
    color: #5b5673;
}

/* .qh-hero__actions comes from home.css and already spaces the pair. The CMS
 * wrapper's line-height and the bundle's link underline are what need undoing. */
.qpr-page .qh-hero__actions {
    line-height: 1.2;
}

.qpr-page .qh-btn,
.qpr-page .qh-btn-ghost {
    text-decoration: none;
}

/* ── plan ladder ────────────────────────────────────────────────────────
 *
 * Three rows, each a numbered chip and a name/description pair. The number chips
 * keep the hues the old markup gave them — green, blue, amber — because those
 * hues carry meaning here: they are the tier colours the pricing page uses, and
 * the amber row is the same amber as .qp-card--premium there. One modifier class
 * per hue sets two custom properties, so a fourth plan means a class in the
 * markup rather than a rule in this sheet. */
.qpr-plans {
    position: relative;
    padding: 30px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #eceafb;
    box-shadow: 0 34px 70px -44px rgba(28, 20, 84, .55), 0 2px 6px -2px rgba(28, 20, 84, .07);
}

/* The ramp as a top edge, so the card belongs to the brand without being tinted
 * by it. */
.qpr-plans::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed 50%, #a22dea);
}

.qpr-plans__label {
    margin: 0 0 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4f46e5;
}

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

.qpr-plan {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #f1effb;
}

.qpr-plan:first-child {
    border-top: 0;
    padding-top: 0;
}

.qpr-plan:last-child {
    padding-bottom: 0;
}

.qpr-plan__num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    color: var(--qpr-plan-ink);
    background: var(--qpr-plan-bg);
}

.qpr-plan--emerald { --qpr-plan-bg: #dcfce7; --qpr-plan-ink: #15803d; }
.qpr-plan--indigo  { --qpr-plan-bg: #dbeafe; --qpr-plan-ink: #1d4ed8; }
.qpr-plan--amber   { --qpr-plan-bg: #fef3c7; --qpr-plan-ink: #b45309; }

.qpr-plan__body {
    min-width: 0;
}

.qpr-plan__name {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #14103a;
}

.qpr-plan__desc {
    margin: 3px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6b6785;
}

/* ── product suite in action ────────────────────────────────────────────
 *
 * The two screenshots sat one above the other, each alone in a full-width grid,
 * with the phone shot capped at 600px tall and the browser shot at 500px — so
 * the section was two thirds empty white on a laptop. They are side by side and
 * equally wide here. DOM order is unchanged: mobile first.
 *
 * NEITHER FRAME DRAWS A DEVICE, and that is deliberate. The two files at
 * /images/products/ are composites, not raw captures: the mobile one already
 * contains a phone with a bezel and a status bar, and the web one already
 * contains the app's own sidebar and top bar, both floating on their own soft
 * lavender wash. A phone bezel or a mac-style browser title strip drawn around
 * either would be a second device around a device. The frame is therefore just a
 * panel — a hairline, a radius and a soft shadow — and the illustration inside
 * supplies the rest. If these are ever replaced by flat edge-to-edge captures,
 * this is the rule to revisit. */
.qpr-shots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: start;
}

.qpr-shot {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qpr-shot__label {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #4f46e5;
}

/* EQUAL HEIGHT, NOTHING CROPPED. The two files are 680x550 (1.24) and 610x436
 * (1.40) — close but not equal — so the panels have a fixed 4:3 box and the
 * images `contain` inside it: the narrower one fits by height and gains a little
 * space either side, the wider one fits by width and gains a little above and
 * below. `cover` would have squared them up too, but by shaving the phone off
 * the bottom of one and the dashboard off the side of the other.
 *
 * The letterbox is invisible because of what these two files are. Both are PNGs
 * whose edges are almost entirely transparent — alpha 18 to 68 out of 255, a
 * faint lavender haze rather than a background — so the white of the panel is
 * already what a viewer sees at the edge of the artwork. Padding that white out
 * to a shared ratio adds no seam. A file with an opaque background would show
 * one, and would want `cover` and a crop instead. */
.qpr-shot__frame {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e9e6f8;
    box-shadow: 0 40px 80px -50px rgba(28, 20, 84, .7), 0 2px 8px -3px rgba(28, 20, 84, .08);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}

.qpr-shot__frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 48px 92px -46px rgba(28, 20, 84, .62), 0 3px 10px -3px rgba(28, 20, 84, .1);
}

.qpr-shot__frame img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

/* ── introduction ───────────────────────────────────────────────────────
 *
 * Three paragraphs of running prose. Given a reading measure rather than the
 * full container width, and the first paragraph a step larger, so the section
 * opens rather than starting flat. */
.qpr-intro {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.qpr-intro__lead {
    margin: 26px 0 0;
    font-size: clamp(16.5px, 1.3vw, 19px);
    line-height: 1.72;
    color: #45415f;
}

.qpr-intro__p {
    margin: 18px 0 0;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.78;
    color: #5b5673;
}

/* ── why organisations choose QHRM ──────────────────────────────────────
 *
 * Eight equal-weight cards. The old markup gave each a 4px left rail alternating
 * indigo and gold; the alternation is kept, but as a short accent rule above the
 * heading rather than a full-height bar, which was competing with the card edge
 * itself. One modifier class per hue sets the custom properties. */
.qpr-why {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.qpr-card {
    position: relative;
    padding: 28px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 24px 48px -40px rgba(28, 20, 84, .5);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}

.qpr-card:hover {
    transform: translateY(-3px);
    border-color: var(--qpr-hue-edge);
    box-shadow: 0 30px 56px -34px rgba(28, 20, 84, .45);
}

.qpr-card::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--qpr-hue-bar);
}

.qpr-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #14103a;
}

.qpr-card__text {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.72;
    color: #5f5a79;
}

.qpr-hue--indigo {
    --qpr-hue-bar: linear-gradient(90deg, #4f46e5, #7c3aed);
    --qpr-hue-edge: #cfc9f7;
}

.qpr-hue--gold {
    --qpr-hue-bar: linear-gradient(90deg, #d4af37, #e8c766);
    --qpr-hue-edge: #ecdcaa;
}

/* ── all 16 modules ─────────────────────────────────────────────────────
 *
 * Four groups of four. Each group keeps its own heading and lede; the cards
 * below are a flat grid of equal tiles, because the sixteen modules are peers
 * and nothing in the old design distinguished one from another either.
 *
 * TWO OF THE SIXTEEN ARE NOT LINKS and never have been — Financial Well-Being
 * and Rewards & Recognition have no page to point at. They are <div>s in the
 * markup and .qpr-mod--static here removes the hover lift and the arrow, so a
 * visitor is not invited to click something that does nothing. */
.qpr-groups {
    display: grid;
    gap: 52px;
}

.qpr-group__head {
    margin-bottom: 22px;
    padding-left: 16px;
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, #4f46e5, #a22dea) 1;
}

.qpr-group__title {
    margin: 0;
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.018em;
    color: #14103a;
}

.qpr-group__lede {
    margin: 7px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6b6785;
}

.qpr-group__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.qpr-mod {
    position: relative;
    display: block;
    padding: 22px 22px 44px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 20px 40px -38px rgba(28, 20, 84, .55);
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}

.qpr-mod:hover {
    transform: translateY(-3px);
    border-color: #cfc9f7;
    box-shadow: 0 28px 52px -30px rgba(79, 70, 229, .45);
    text-decoration: none;
}

.qpr-mod__title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #14103a;
    transition: color .2s;
}

.qpr-mod:hover .qpr-mod__title {
    color: #4f46e5;
}

.qpr-mod__text {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #6b6785;
}

/* The arrow sits in the padding reserved at the bottom of every card, so the
 * two cards without one are exactly as tall as their neighbours. */
.qpr-mod__go {
    position: absolute;
    left: 22px;
    bottom: 20px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #f2f0fe;
    transition: background .25s, transform .25s;
}

.qpr-mod__go::before,
.qpr-mod__go::after {
    content: "";
    position: absolute;
    background: #4f46e5;
    transition: background .25s;
}

/* The shaft. */
.qpr-mod__go::before {
    top: 12.5px;
    left: 7px;
    width: 11px;
    height: 1.6px;
    border-radius: 2px;
}

/* The head: half a square rotated 45°, which needs no second element. */
.qpr-mod__go::after {
    top: 9.4px;
    left: 12.4px;
    width: 7px;
    height: 7px;
    background: none;
    border-top: 1.6px solid #4f46e5;
    border-right: 1.6px solid #4f46e5;
    border-radius: 1px;
    transform: rotate(45deg);
}

.qpr-mod:hover .qpr-mod__go {
    background: #4f46e5;
    transform: translateX(3px);
}

.qpr-mod:hover .qpr-mod__go::before {
    background: #fff;
}

.qpr-mod:hover .qpr-mod__go::after {
    border-top-color: #fff;
    border-right-color: #fff;
}

/* Not a link. No lift, no colour change, no arrow. */
.qpr-mod--static {
    padding-bottom: 22px;
    background: #fbfaff;
    box-shadow: none;
}

.qpr-mod--static:hover {
    transform: none;
    border-color: #ecebf6;
    box-shadow: none;
}

/* ── why 350+ organisations trust QHRM ──────────────────────────────────
 *
 * The first of the page's two dark surfaces. The old version was a pale indigo
 * panel carrying three gold ticks, which is the same colour pair — inverted here
 * so the section reads as the page's turn from what QHRM is to why it is
 * trusted, and so the gold has enough contrast to be a signal rather than a
 * tint. */
.qpr-trust {
    overflow: hidden;
    color: #f4f2ff;
    background:
        radial-gradient(760px 420px at 10% 0%, rgba(124, 58, 237, .5), transparent 62%),
        radial-gradient(680px 400px at 92% 100%, rgba(162, 45, 234, .4), transparent 60%),
        #1b1440;
}

.qpr-trust__orb {
    position: absolute;
    top: -140px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background: rgba(212, 175, 55, .16);
    filter: blur(90px);
    pointer-events: none;
}

.qpr-trust .boxed-container {
    position: relative;
    z-index: 1;
}

.qpr-trust .qpr-title {
    color: #fff;
}

.qpr-trust__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qpr-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 26px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(3px);
    transition: background .25s, border-color .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.qpr-trust__item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .085);
    border-color: rgba(212, 175, 55, .38);
}

/* The tick. In the old markup this SVG carried `fillRule`/`clipRule` — React
 * property names, not HTML attributes — so the even-odd rule never applied and
 * all three rendered as solid gold discs with no tick in them. The markup now
 * spells them `fill-rule`/`clip-rule`; this rule only sizes and colours them. */
.qpr-trust__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    color: #e6c35c;
}

.qpr-trust__body {
    min-width: 0;
}

.qpr-trust__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #fff;
}

.qpr-trust__text {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.72;
    color: #c6c0e4;
}

.qpr-trust__text .qpr-a {
    color: #e6c35c;
}

.qpr-trust__text .qpr-a:hover,
.qpr-trust__text .qpr-a:focus-visible {
    color: #f4dc9a;
}

/* ── who uses QHRM ──────────────────────────────────────────────────────
 *
 * Four audience tiles. Nearly the same object as a why-card, so it shares the
 * proportions and differs only in the accent, which here is a corner wash rather
 * than a rule — enough to tell the two sections apart at a glance without
 * inventing a second card language. */
.qpr-audience {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.qpr-tile {
    position: relative;
    overflow: hidden;
    padding: 28px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 24px 48px -40px rgba(28, 20, 84, .5);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}

.qpr-tile::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(124, 58, 237, .13), transparent 68%);
    pointer-events: none;
}

.qpr-tile:hover {
    transform: translateY(-3px);
    border-color: #cfc9f7;
    box-shadow: 0 30px 56px -34px rgba(28, 20, 84, .45);
}

.qpr-tile__title {
    position: relative;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #14103a;
}

.qpr-tile__text {
    position: relative;
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.72;
    color: #5f5a79;
}

/* ── explore more ───────────────────────────────────────────────────────
 *
 * Nine navigation cards, each an icon tile and a name/description pair. Closest
 * to what the page already had, and kept that way: this row was the one part of
 * the old design that was not a shadowed white box. */
.qpr-explore {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.qpr-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 19px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e9e7f5;
    box-shadow: 0 18px 36px -38px rgba(28, 20, 84, .6);
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}

.qpr-link:hover {
    transform: translateY(-3px);
    border-color: #cfc9f7;
    box-shadow: 0 26px 48px -30px rgba(79, 70, 229, .45);
    text-decoration: none;
}

.qpr-link__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #4f46e5;
    background: #f1effe;
    transition: color .25s, background .25s;
}

.qpr-link__icon svg {
    width: 21px;
    height: 21px;
}

.qpr-link:hover .qpr-link__icon {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.qpr-link__body {
    display: block;
    min-width: 0;
}

.qpr-link__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #14103a;
    transition: color .2s;
}

.qpr-link:hover .qpr-link__name {
    color: #4f46e5;
}

.qpr-link__desc {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: #7a7593;
}

/* ── FAQs ───────────────────────────────────────────────────────────────
 *
 * Eight questions, every answer visible. They are NOT an accordion: collapsing
 * them would change how the page behaves, and the brief for this change was the
 * design. What changes is that they read in two columns instead of one long
 * stack of eight identical shadowed boxes, and the question is marked with the
 * ramp rather than being just another bold line. */
.qpr-faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.qpr-faq__item {
    position: relative;
    padding: 24px 26px 24px 27px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 20px 42px -40px rgba(28, 20, 84, .55);
    transition: border-color .25s, box-shadow .25s;
}

.qpr-faq__item::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #4f46e5, #a22dea);
    opacity: .55;
    transition: opacity .25s;
}

.qpr-faq__item:hover {
    border-color: #dcd7f7;
    box-shadow: 0 26px 50px -34px rgba(28, 20, 84, .45);
}

.qpr-faq__item:hover::before {
    opacity: 1;
}

.qpr-faq__q {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.012em;
    color: #14103a;
}

.qpr-faq__a {
    margin: 9px 0 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: #5f5a79;
}

/* ── closing band ───────────────────────────────────────────────────────
 *
 * The page's second dark surface, and its last. The old one was a flat
 * indigo-to-purple gradient with two pill buttons of its own invention; the
 * gradient stays, deepened, and the buttons are the site's own pair. */
.qpr-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 7vw, 96px) 0;
    color: #f4f2ff;
    background:
        radial-gradient(720px 420px at 14% 0%, rgba(124, 58, 237, .55), transparent 62%),
        radial-gradient(680px 420px at 88% 100%, rgba(162, 45, 234, .45), transparent 60%),
        linear-gradient(120deg, #241a5c, #17123a);
}

.qpr-cta__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    pointer-events: none;
}

.qpr-cta__orb--a {
    top: -160px;
    left: -90px;
    width: 400px;
    height: 400px;
    background: rgba(79, 70, 229, .35);
}

.qpr-cta__orb--b {
    right: -120px;
    bottom: -170px;
    width: 440px;
    height: 440px;
    background: rgba(162, 45, 234, .28);
}

.qpr-cta .boxed-container {
    position: relative;
    z-index: 1;
}

.qpr-cta__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

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

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

.qpr-cta .qh-hero__actions {
    justify-content: center;
}

/* On the dark band the ghost button's white fill is the contrast it needs; only
 * its resting border is too bright against it. */
.qpr-cta .qh-btn-ghost {
    border-color: transparent;
}

/* ── breakpoints ────────────────────────────────────────────────────────
 *
 * Mobile-first: every grid above is one column, and each step below adds
 * columns. Ordered narrow to wide so later rules win. */
@media (min-width: 640px) {
    .qpr-group__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 760px) {
    .qpr-why,
    .qpr-audience {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qpr-explore {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qpr-shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }
}

@media (min-width: 900px) {
    .qpr-faq {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qpr-trust__list {
        gap: 22px;
    }
}

@media (min-width: 1024px) {
    .qpr-hero__grid {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
        gap: 60px;
    }

    .qpr-plans {
        padding: 34px;
    }

    .qpr-explore {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .qpr-group__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Wide desktops: the trust band's three items sit side by side rather than
 * stacked, which is the only place the layout changes above 1200px. */
@media (min-width: 1200px) {
    .qpr-trust__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── motion and focus ───────────────────────────────────────────────────
 *
 * Every transform above is a 3px lift; none of them is load-bearing, so they all
 * go when the visitor has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .qpr-badge__dot {
        animation: none;
    }

    .qpr-card,
    .qpr-tile,
    .qpr-mod,
    .qpr-link,
    .qpr-trust__item,
    .qpr-shot__frame,
    .qpr-mod__go {
        transition: none;
    }

    .qpr-card:hover,
    .qpr-tile:hover,
    .qpr-mod:hover,
    .qpr-link:hover,
    .qpr-trust__item:hover,
    .qpr-shot__frame:hover,
    .qpr-mod:hover .qpr-mod__go {
        transform: none;
    }
}

/* Keyboard users get the same affordance a mouse gets, plus a ring. The bundle
 * strips outlines from links site-wide, so this has to be explicit. */
.qpr-mod:focus-visible,
.qpr-link:focus-visible,
.qpr-a:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .45);
    outline-offset: 3px;
    border-radius: 8px;
}

.qpr-trust__text .qpr-a:focus-visible {
    outline-color: rgba(230, 195, 92, .6);
}